@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --color-1: white;
  --text-color: #333333;
  --accent-color: #43b248;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
}

/* —————————————————————————————————————————————— */
/* Evita scroll horizontal al cargar la página */
/* —————————————————————————————————————————————— */
html, body {
  overflow-x: hidden;
}

html {
  font-size: 16px;
  font-family: "Playfair Display", serif;
}
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  font-size: 16px;
}
header {
  z-index: 1;
}

/* Video de fondo */
.youtube-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  overflow: hidden;
}
.youtube-background iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: opacity(0.8) contrast(1.1);
}
.youtube-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 93, 0, 0.25);
  z-index: 1;
  pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
  .youtube-background iframe { height: 56.25vw; }
}
@media (max-aspect-ratio: 16/9) {
  .youtube-background iframe { width: 177.78vh; }
}

/* Sección Hero */
.sec1 {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 700px;
  display: flex;
  align-items: center;
}
.sec1 .content {
  width: 80%;
  margin: 0 auto;
  margin-top: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec1 h1 {
  color: white;
  font-weight: 400;
  font-size: 45px;
  font-family: "Playfair Display", serif;
}
.sec1 p {
  margin-top: 20px;
  font-family: "Lato", serif;
  color: white;
  font-weight: 400;
}
.mainp { width: 50%; }
.specialbtn {
  font-family: "Playfair Display", serif;
  background-color: #43b248;
  color: white;
  width: 200px;
  border: unset;
  border-radius: 2px;
  margin-top: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.specialbtn .arrow {
  margin-left: 8px;
  transition: all 0.4s ease;
}
.specialbtn:hover .arrow {
  transform: translateX(5px);
}
.specialbtn:hover {
  background: linear-gradient(43deg, var(--myColor1) 0%, var(--myColor2) 46%, var(--myColor3) 100%);
  transition: --myColor1 0.4s, --myColor2 0.5s, --myColor3 0.2s;
  --myColor1: #43b248;
  --myColor2: #d4b757;
  --myColor3: #ffdb98;
}
.specialbtn:not(:hover) {
  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 0.4s, --myColor2 0.5s;
}
@property --myColor1 {
  syntax: '<color>';
  initial-value: #43b248;
  inherits: false;
}
@property --myColor2 {
  syntax: '<color>';
  initial-value: #43b248;
  inherits: false;
}
@property --myColor3 {
  syntax: '<color>';
  initial-value: #43b248;
  inherits: false;
}

/* AGRUPAR BOTONES EN HORIZONTAL */
.links-b {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

/* Estructura general de secciones */
.section {
  padding: 50px 20px;
  text-align: center;
  background-color: rgb(245, 245, 245);
}
.section h2 {
  font-size: 2em;
  font-weight: 300;
  margin-top: 30px;
  margin-bottom: 60px;
  font-family: "Playfair Display", serif;
}
.section p {
  font-size: 16px;
  color: #666;
}

/* "Why choose us" */
.why-choose-us,
.what-we-offer,
.testimonials {
  background-color: #f5f5f5;
}
.why-choose-us .features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-family: "Lato", serif;
}
.feature {
  border-radius: 10px;
  padding: 30px;
  width: 300px;
}
.feature i {
  font-size: 1.5em;
  color: #3c763e;
  margin-bottom: 30px;
  background-color: #c7dfc7;
  width: 55px;
  height: 55px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
}
.feature h3 {
  margin-bottom: 20px;
}

/* Sección "What we offer" */
.what-we-offer {
  background-image: url("../images/map.png");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  width: 100%;
  padding: 60px 20px;
}
.what-we-offer button {
  margin-top: 40px;
  margin-bottom: 30px;
  font-family: "Lato", serif;
  background-color: #43b248;
  color: white;
  border: unset;
  border-radius: 20px;
  padding: 10px 34px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
}
.what-we-offer button:hover {
  background: linear-gradient(43deg, var(--myColor1) 0%, var(--myColor2) 46%, var(--myColor3) 100%);
  transition: --myColor1 0.4s, --myColor2 0.5s;
}
.what-we-offer button:not(:hover) {
  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 0.4s, --myColor2 0.5s;
}

/* Cada "oferta" (slide en Slick) */
.offer {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 20px;
  transition: .4s ease;
  margin: 0 15px;
}
.offer:hover {
  transform: scale(1.05);
}
.offer img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.offer .description {
  padding: 10px;
}
.offer .description h3 {
  margin-bottom: 6px;
}
.btnmasinfo {
  margin-top: 5px;
  display: inline-block;
  border-radius: 20px;
  font-size: 16px !important;
}
.btnmasinfo a {
  color: white !important;
  background-color: #43b248;
  border-radius: 30px;
  font-size: 14px;
  padding: 8px 15px;
  font-weight: 400;
}
.btnmasinfo a:hover {
  color: #2e7c32;
  text-decoration: none;
}

/* Flechas Slick */
.my-arrow {
  background-color: #43b248;
  border: none;
  border-radius: 50%;
  color: #fff;
  width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.my-arrow:hover {
  background-color: #2e7c32;
}
.my-arrow i {
  font-size: 16px;
}
.my-arrow.slick-prev {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.my-arrow.slick-next {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Contact / Mapa */
.contact {
  position: relative;
  display: flex;
  padding: 0;
}
.contact > * {
  width: 50%;
}
.contact iframe {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* Testimonios */
.testimonials {
  background-color: #2E7D32;
  color: white;
}
.testimonials h2 {
  margin-bottom: 30px;
}
.carousel {
  display: flex;
  padding: 20px 0;
  overflow: hidden;
  position: relative;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel-inner {
  display: flex;
  width: 400%;
  animation: scroll 60s linear infinite;
}
.testimonial {
  min-width: 320px;
  margin-right: 80px;
}
.testimonial p {
  font-size: 14px;
  color: white;
  line-height: 1.6;
}
.testimonial h4 {
  margin-top: 10px;
  font-size: 1.2em;
}
.testimonial span {
  font-size: 0.9em;
  color: #ccc;
}
.testimonial .stars {
  color: #FFD700;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  /* La duplicación de los testimonios está en el HTML, así que necesitamos
     desplazarnos solo la mitad del ancho total para crear un bucle perfecto */
  100% { transform: translateX(-50%); }
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
  .testimonial {
    min-width: 280px;
    margin-right: 60px;
  }
  .testimonial p {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .testimonial {
    min-width: 250px;
    margin-right: 40px;
  }
  .testimonial p {
    font-size: 12px;
  }
}

/* Animación showonscroll */
.hiddenscroll {
  opacity: 0;
  transition: all 1.1s cubic-bezier(.07,.04,.09,1.00);
  transform: translateY(30px);
}
.showscroll {
  opacity: 1;
  transform: translateY(0px);
}

/* Subtítulo “¡A 2 metros del Monumento!” sin degradado interior y líneas más juntas */
.h3m {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;    /* dorado sólido */
  background: none;
  animation: none;
}
.h3m::before,
.h3m::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  
  filter: blur(2px);
}
.h3m::before { top: -3px; }
.h3m::after  { bottom: -3px; }

/* Estilo específico para el botón de WhatsApp en el navbar */
.whatsapp-btn-navbar {
  width: 109px;
  height: 40px;
  padding: 0;
  font-family: 'Lato', sans-serif;
  background-color: #43b248;
  color: white !important;
  border: unset;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  margin: 0 10px;
}

.whatsapp-btn-navbar:hover {
  background: linear-gradient(43deg, var(--myColor1) 0%, var(--myColor2) 46%, var(--myColor3) 100%);
  transition: --myColor1 0.4s, --myColor2 0.5s, --myColor3 0.2s;
  --myColor1: #43b248;
  --myColor2: #d4b757;
  --myColor3: #ffdb98;
  color: white !important;
  text-decoration: none;
}

.whatsapp-btn-navbar:not(:hover) {
  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 0.4s, --myColor2 0.5s;
}

/* Responsividad */
@media (max-width: 768px) {
  /* Texto más grande en hero para móvil */
  .sec1 h1 {
    font-size: 32px !important;
    line-height: 1.3;
  }

  .why-choose-us .features {
    flex-direction: column;
    align-items: center;
  }
  .mainp { width: 100%; }
  .contact {
    flex-direction: column;
  }
  .contact > * {
    width: 100%;
  }
  .specialbtn {
    width: auto;
  }
  .offer { margin: 0 5px; }
  /* WhatsApp full width en responsive */
  #mobile-menu a.whatsapp-btn-mobile {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    font-weight: bold !important;
    display: block; /* Asegura que ocupe su propia línea */
    width: calc(100% - 30px); /* Ancho completo menos el padding lateral del contenedor */
    padding: 10px 15px; /* Padding vertical 10px, horizontal 15px */
    margin: 10px 15px; /* Margen para centrar y espaciar */
    box-sizing: border-box; /* Incluye padding en el ancho */
    text-align: center; /* Centra el texto */
    border-radius: 5px; /* Bordes redondeados */
  }
  /* Estilo general para otros items del menu movil si es necesario */
  #mobile-menu a:not(.whatsapp-btn-mobile) {
    padding: 10px 15px; /* Asegurar padding consistente */
  }
}