@font-face {
  font-family: 'Sztos';
  src: url('../fonts/Sztos-Regular.ttf') format('truetype-variations'),
       url('../fonts/Sztos-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 100% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sztos';
  src: url('../fonts/Sztos-Italic.ttf') format('truetype-variations'),
       url('../fonts/Sztos-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 100% 150%;
  font-style: italic;
  font-display: swap;
}

:root {
  --verde: #037A4C;
  --cielo: #E2F4FF;
  --crema: #FFFDF5;

  /* estrella del rating (estrella.svg dentro de una baldosa de 20.86x16,
     el sobrante es la separación entre estrellas) */
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.86 16'%3E%3Cpath d='M8.084 0L9.992 5.873H16.168L11.172 9.503L13.080 15.377L8.084 11.747L3.088 15.377L4.996 9.503L0 5.873H6.176L8.084 0Z'/%3E%3C/svg%3E") left center / 20.86px 16px repeat-x;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* texto disponible para lectores de pantalla y buscadores, oculto visualmente */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html, body {
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

/* ---------- STACK (hero + next section, pinned together) ---------- */

.stack {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--cielo) 0%, #F9EFDE 100%);
  z-index: 1;
}

.hero-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1690px;
  height: 653px;
  transform: translate(-50%, -50%);
}

.clouds-layer, .houses-layer, .verduras-layer {
  position: absolute;
  inset: 0;
}

.clouds-layer > span, .houses-layer > span, .verduras-layer > span {
  position: absolute;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
}

/* estos dos son los que anima GSAP */
.hero-casitas, .hero-casitas-back { will-change: transform; }

/* cada ilustración: posición, ancho y proporción intrínseca del SVG */
.hero-nubes {
  left: 189px; top: -30px; width: 1400px;
  aspect-ratio: 1446 / 209;
  background-image: url('../img/hero-nubes.svg');
}

/* verduras: SVG inline, no background — cada grupo .veg se anima aparte */
.verduras-layer > svg {
  position: absolute;
  display: block;
  left: 334px;
  top: 20px;
  width: 1110px;
  height: auto;
  overflow: visible;
  will-change: transform;
}

/* cada verdura rota sobre su propio centro, no sobre el del lienzo */
.verduras-layer .veg {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
}

/* Las dos tiras van centradas sobre el viewport (.hero-stage ya está centrado)
   y alineadas por el borde inferior. El centrado se hace con margin negativo,
   no con transform, porque el transform lo usa GSAP para el paneo. */
.hero-casitas-back {
  left: 50%; margin-left: -1162px; bottom: 0; width: 2324px;
  aspect-ratio: 1992 / 307;
  background-image: url('../img/casitas-detras.svg');
  z-index: 0;
}

.hero-casitas {
  left: 50%; margin-left: -1318px; bottom: -10px; width: 2637px;
  aspect-ratio: 2260 / 348;
  background-image: url('../img/hero-casitas.svg');
  z-index: 1;
}

.hero-headline {
  position: absolute;
  left: 465px;
  top: 60px;
  width: 869px;
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 90px;
  line-height: 83px;
  color: var(--verde);
  font-variation-settings: 'wdth' 200;
}

.hero-sub {
  position: absolute;
  left: 867px;
  top: 259px;
  width: 380px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.64px;
  color: #000;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--verde);
  opacity: 0.6;
}

/* ---------- shared base for stacked cards after the hero ---------- */

.card {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---------- HERO2: "Una huerta, muchas experiencias" ---------- */

  #hero2 {
  background: linear-gradient(to right, #F6BFD0 0 50%, #F9EFDE 50% 100%);
  z-index: 2;
  }

.h2-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1200px;
  height: 550px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.h2-plant-wrap {
  position: relative;
  width: 526px;
  height: 520px;
  margin: 0;
  flex-shrink: 0;
}

.h2-plant {
  position: absolute;
  left: -40px;
  top: -180px;
  width: 620px;
  aspect-ratio: 375 / 690;
  background: url("../img/plantita.svg") no-repeat center / contain;
}

.h2-plant {
  position: absolute;
  left: calc(600px - 50vw);
  top: -135px;
  width: 50vw;
  height: 100vh;
  transform: translateY(-50%);
  background: url("../img/plantita.svg") no-repeat center / cover;
}


.h2-photo {
  position: absolute;
  left: 110px;
  top: 95px;
  width: 287px;
  height: 265px;
  object-fit: cover;
  background: #d9d9d9;
}

.h2-content {
  width: 480px;
  padding-right: 40px;
}

.h2-headline {
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 35px;
  color: #000;
  margin-bottom: 24px;
  font-variation-settings: 'wdth' 200;
}

.h2-sub {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: #000;
}

.h2-tomato {
  position: absolute;
  right: calc(600px - 50vw);
  bottom: 0;
  width: 130px;
  aspect-ratio: 130 / 203;
  background: url('../img/seccion-2-tomate.svg') center / contain no-repeat;
}

/* ---------- HERO3: "Cultivamos mucho más" ---------- */

#hero3 {
  background: #ffffff;
  z-index: 3;
}

.h3-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1200px;
  height: 500px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
}

.h3-content {
  width: 420px;
}

/* La trama es un panel a sangre sobre la mitad derecha de la sección,
   no un marco ceñido a la foto. La foto va centrada adentro. */
.h3-photo-frame {
  position: absolute;
  right: 0;
  top: 0;
  width: 50vw;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: url('../img/contenedorFamilia.svg') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.h3-foto {
  width: 387px;
  height: 392px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.h3-headline {
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 42px;
  color: #333;
  margin-bottom: 24px;
  font-variation-settings: 'wdth' 200;
}

.h3-sub {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #333;
}

.h3-sub p + p { margin-top: 14px; }

@keyframes plantSway {
  0%, 100% { transform: rotate(-0.6deg); }
  50% { transform: rotate(0.6deg); }
}

.h2-plant { transform-origin: 50% 100%; animation: plantSway 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .h2-plant { animation: none; }
  .hero-casitas, .hero-casitas-back { transform: none !important; }
  .verduras-layer > svg, .verduras-layer .veg { transform: none !important; }
  .stack { height: auto; overflow: visible; }
  .hero-viewport { position: relative; height: 100vh; }
  .card { position: relative; inset: auto; height: 100vh; transform: none !important; }
}

/* ================= shared page sections below the hero stack ================= */

h2 {
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #333;
  font-variation-settings: 'wdth' 200;
}

/* ---- shared button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  padding: 0 20px;
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--verde);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  box-shadow: 4px 4px 0 #000;
    transform: rotate(-2deg);
}

.btn-sm { height: 40px; padding: 0 16px; font-size: 12px; }

/* ---- nav ---- */

.nav-bar {
  background: #F9EFDE;
  position: relative;
  z-index: 10;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.nav-logo img { height: 46px; display: block; }

.nav-links { display: flex; gap: 32px; }

.nav-links a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #000;
  text-decoration: none;
}

.nav-links a,
.footer-col a {
  position: relative;
}

/* el bloque necesita ancho de contenido, si no la línea cruza toda la columna */
.footer-col a {
  width: fit-content;
}

.nav-links a::after,
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.footer-col a:hover::after {
  transform: scaleX(1);
}

.nav-links a:hover,
.footer-col a:hover {
  opacity: 0.65;
}
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-cta-mobile { display: none; }

/* ---- reveal-on-scroll (generic) ----
   Se arma y se desarma: el observer pone y saca .is-visible cada vez que el
   elemento entra y sale de cuadro, así que la transición vive en la clase base
   (si viviera en .is-visible, al salir el elemento desaparecería de golpe). */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* la salida es más corta y sin escalonado: no tiene que hacerse esperar */
[data-reveal]:not(.is-visible) {
  transition-duration: 0.45s;
  transition-delay: 0s;
}

/* fotos: entran sólo con fade y un mínimo de escala, sin desplazamiento */
[data-reveal="foto"] {
  transform: scale(1.015);
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal="foto"].is-visible {
  transform: scale(1);
}

[data-reveal="foto"]:not(.is-visible) {
  transition-duration: 0.5s;
  transition-delay: 0s;
}


@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- productos: 4 bloques ---- */

.productos {
  background: #E2F4FF;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.productos-stage {
  position: relative;
  width: 1200px;
  height: 1498px;
  margin: 0 auto;
}

.pd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* cada item ocupa el ancho del stage; sus hijos se posicionan dentro de él */
.pd-item {
  position: absolute;
  left: 0;
  right: 0;
}

.pd-item-1 { top: 97px; }
.pd-item-2 { top: 403px; }
.pd-item-3 { top: 765px; }
.pd-item-4 { top: 1072px; }

.pd-figure { margin: 0; }

.pd-figure img,
.pd-figure > span,
.pd-decor > span {
  position: absolute;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- fotos: marco crema, sin esquinas redondeadas, aspecto natural --- */

.pd-foto {
  --rot: 0deg;
  height: auto;
  border: 10px solid #F9EFDE;
  border-radius: 0;
  transform: rotate(var(--rot));
  z-index: 2;
}

.pd-foto-1 { --rot: -3deg;  left: 137px; top: 0;   width: 343px; }
.pd-foto-2 { --rot: 2.5deg; left: 703px; top: 0;   width: 490px; }
.pd-foto-3 { --rot: -2.5deg; left: 159px; top: 0;  width: 324px; }
.pd-foto-4 { --rot: 3deg;   left: 759px; top: 0;   width: 338px; }

/* --- tramas: shapes de fondo, sangran hasta el borde de pantalla --- */

.pd-trama { z-index: 1; }

/* Impares sangran a la izquierda, pares a la derecha.
   El ancho va explícito: con aspect-ratio y width:auto el navegador dimensiona
   la caja como una imagen y descarta `right`, así que la sangría queda corta. */
.pd-trama-1, .pd-trama-3 {
  left: calc(600px - 50vw);
  right: auto;
  width: calc(50vw + 4px);
}

.pd-trama-2, .pd-trama-4 {
  left: 607px;
  right: auto;
  width: calc(50vw - 7px);
}

.pd-trama-1 {
  top: 66px;
  aspect-ratio: 556 / 217;
  background-image: url('../img/seccion-4-trama-1.svg');
}

.pd-trama-2 {
  top: 76px;
  aspect-ratio: 597 / 216;
  background-image: url('../img/seccion-4-trama-2.svg');
}

.pd-trama-3 {
  top: 30px;
  aspect-ratio: 556 / 217;
  background-image: url('../img/seccion-4-trama-3.svg');
}

.pd-trama-4 {
  top: 58px;
  aspect-ratio: 597 / 216;
  background-image: url('../img/seccion-4-trama-4.svg');
}

/* --- textos --- */

/* Se posiciona el bloque, no cada línea: así un título de tres renglones
   empuja al párrafo en vez de pisarlo. */
.pd-text {
  position: absolute;
  z-index: 3;
}

.pd-item-1 .pd-text { left: 701px; top: 60px; width: 322px; }
.pd-item-2 .pd-text { left: 115px; top: 87px; width: 387px; }
.pd-item-3 .pd-text { left: 701px; top: 52px; width: 309px; }
.pd-item-4 .pd-text { left: 110px; top: 49px; width: 322px; }

.pd-title {
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  color: #000;
  text-shadow: 3px 1px 0 #fff;
  margin: 38px 0 14px;
  font-variation-settings: 'wdth' 200;
}

.pd-body {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.64px;
  color: #000;
  margin: 0;
}

/* --- decoración de fondo --- */

@keyframes floatMisc {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(4.5deg);
  }
}

.pd-decor { position: absolute; inset: 0; pointer-events: none; }

.pd-misc-1 {
  left: calc(600px - 50vw); top: 0; height: 659px;
  width: auto;
  aspect-ratio: 273 / 660;
  background-image: url('../img/seccion-4-miscelaneas-1.svg');
}

.pd-misc-2 {
  right: calc(600px - 50vw); left: auto; top: 337px; height: 685px;
  width: auto;
  aspect-ratio: 155 / 686;
  background-image: url('../img/seccion-4-miscelaneas-2.svg');
}

.pd-misc-3 {
  left: calc(600px - 50vw); top: 1016px; height: 481px;
  width: auto;
  aspect-ratio: 207 / 481;
  background-image: url('../img/seccion-4-miscelaneas-3.svg');
}

.pd-limon {
  left: -58px; top: 0; width: 137px;
  height: auto;
  aspect-ratio: 137 / 146;
  background-image: url('../img/seccion-4-limon.svg');
  animation: floatMisc 5s ease-in-out infinite; /* Animación aplicada */
}

.pd-zanahoria {
  left: 1074px; top: 258px; width: 48px;
  height: auto;
  aspect-ratio: 48 / 86;
  background-image: url('../img/zanahoria.svg');
  animation: floatMisc 4s ease-in-out infinite; /* Animación aplicada */
}

.pd-nube-a {
  right: calc(600px - 50vw); left: auto; top: 54px; width: 343px;
  height: auto;
  aspect-ratio: 343 / 100;
  background-image: url('../img/_nube-2.svg');
}

.pd-nube-b {
  left: 606px; top: 448px; width: 192px;
  height: auto;
  aspect-ratio: 206 / 54;
  background-image: url('../img/nube-3.svg');
  animation: floatMisc 6s ease-in-out infinite; /* Animación aplicada */
}

.pd-nube-c {
  left: calc(600px - 50vw); top: 780px; width: 194px;
  height: auto;
  aspect-ratio: 167 / 39;
  background-image: url('../img/nube-1.svg');
}

.pd-nube-d {
  left: 475px; top: 1072px; width: 176px;
  height: auto;
  aspect-ratio: 167 / 39;
  background-image: url('../img/nube-1.svg');
}

/* el reveal no debe pisar la rotación de la foto */
.pd-item[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.pd-item[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pd-item[data-reveal]:not(.is-visible) {
  transition-duration: 0.45s;
  transition-delay: 0s;
}

/* ---- te acompañamos ---- */

.acompanamos { background: #fff; overflow: hidden; }

.ac-stage {
  position: relative;
  width: 1200px;
  height: 370px;
  margin: 0 auto;
}

.ac-title {
  position: absolute;
  left: 0; top: 25px;
  width: 955px;
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 80px;
  line-height: 84px;
  color: #000;
  margin: 0;
  font-variation-settings: 'wdth' 200;
}

.ac-body {
  position: absolute;
  left: 72px; top: 236px;
  width: 549px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.6px;
  color: #000;
  margin: 0;
}

.ac-tags {
  position: absolute;
  left: 72px; top: 343px;
  width: 369px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.6px;
  color: #000;
}

/* el separador es presentación, no contenido: lo dibuja el CSS */
.ac-tags li + li::before {
  content: '·';
  margin-right: 8px;
}

.ac-btn {
  position: absolute;
  left: 760px; top: 305px;
  width: 223px;
  height: 47px;
}

/* ---- lo que dice nuestra comunidad ---- */

.testimonios { background: #fff; padding: 0; overflow: hidden; }

.tt-stage {
  position: relative;
  width: 1158px;
  height: 570px;
  margin: 40px auto;
  background: url('../img/seccion-loquedice-back.svg') center / cover no-repeat;
}

.tt-title {
  position: absolute;
  left: 0; right: 0; top: 37px;
  white-space: nowrap;
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  color: #000;
  margin: 0;
  font-variation-settings: 'wdth' 200;
}

/* --- reseñas --- */

.tt-cards-row { list-style: none; margin: 0; padding: 0; }

.tt-card {
  position: absolute;
  top: 92px;
  width: 255px;
  height: 280.5px;
  background: #fff;
  border-radius: 6px;
}

.tt-card-1 { left: 39px; }
.tt-card-2 { left: 314px; }
.tt-card-3 { left: 589px; }
.tt-card-4 { left: 864px; }

.tt-photo {
  position: absolute;
  left: 9px; top: 8px;
  width: 237px; height: 84px;
  object-fit: cover;
  display: block;
}

/* estado temporal: hueco de foto todavía sin imagen cargada */
.tt-photo[data-placeholder] { background: #d9d9d9; }

.tt-content { position: absolute; left: 20px; top: 113px; width: 196px; }

/* la estrella es una forma: se dibuja por CSS, no con elementos vacíos.
   El ancho lo define el rating a través de data-rating. */
.tt-stars {
  --star: 17px;
  --star-gap: 3.86px;
  --rating: 5;
  height: 16px;
  width: calc(var(--rating) * (var(--star) + var(--star-gap)) - var(--star-gap));
  margin: 0;
  background-color: var(--verde);
  -webkit-mask: var(--star-mask);
  mask: var(--star-mask);
}

.tt-stars[data-rating="1"] { --rating: 1; }
.tt-stars[data-rating="2"] { --rating: 2; }
.tt-stars[data-rating="3"] { --rating: 3; }
.tt-stars[data-rating="4"] { --rating: 4; }
.tt-stars[data-rating="5"] { --rating: 5; }

.tt-quote {
  margin: 11px 0 0;
  padding: 0;
  border: 0;
}

.tt-quote p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.25;
  color: #000;
}

/* --- cifras --- */

.tt-stats-row { margin: 0; }

.tt-stat {
  position: absolute;
  top: 417px;
  height: 89px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.st-1 { left: 139px; width: 163px; }
.st-2 { left: 389px; width: 370px; }
.st-3 { left: 871px; width: 171px; }

/* en el marcado el <dt> precede al <dd> (spec); visualmente el número va arriba */
.tt-stat-n {
  order: 1;
  margin: 0;
  font-family: 'Sztos', sans-serif;
  font-weight: 546;
  font-size: 40px;
  line-height: 1.22;
  color: #F5F5F5;
  text-shadow: 3px 3px 0 #000;
  font-variation-settings: 'wdth' 200;
  font-variant-numeric: tabular-nums;
}

.tt-stat-label {
  order: 2;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.22;
  color: #000;
}

/* ---- institucional ---- */

/* La mitad inferior de la sección es beige, el mismo de las FAQ: las cajas
   quedan montadas sobre el corte. Con padding vertical simétrico, el 50%
   de la sección cae justo en el medio de las cajas. */
.institucional {
  background: linear-gradient(to bottom, #ffffff 50%, #F9EFDE 50%);
  padding: 80px 60px;
}

.inst-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.inst-card {
  border-radius: 0;
  border: 10px solid var(--crema);
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.inst-blue { background: var(--cielo); }
.inst-yellow { background: #F9ED32; }

.inst-card h3 {
  position: relative;
  z-index: 1;
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #000;
  margin-bottom: 14px;
  font-variation-settings: 'wdth' 200;
}

.inst-card p {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  max-width: 60%;
  margin-bottom: 32px;
}

.inst-card .btn { position: relative; z-index: 1; }

/* --- misceláneas de cada caja --- */

.inst-misc {
  position: absolute;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.inst-misc-prog-1 {
  left: 0; bottom: 0; width: 119px;
  aspect-ratio: 119 / 72;
  background-image: url('../img/misc-programas-1.svg');
}

.inst-misc-prog-2 {
  right: 0px; top: 34px; width: 93px;
  aspect-ratio: 93 / 103;
  background-image: url('../img/misc-programas-2.svg');
}

.inst-misc-may-1 {
  left: 24px; bottom: 0; width: 166px;
  aspect-ratio: 166 / 59;
  background-image: url('../img/misc-mayoristas-1.svg');
}

.inst-misc-may-2 {
  right: 0; top: 0; width: 132px;
  aspect-ratio: 132 / 99;
  background-image: url('../img/misc-mayoristas-2.svg');
}

/* ---- faq ---- */

.faq {
  background: #F9EFDE;
  padding: 80px 60px;
}

.faq h2 { text-align: center; margin-bottom: 40px; }

.faq-list { max-width: 1080px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid #333;
  padding: 20px 0;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-plus { font-size: 18px; transition: transform 0.2s ease; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }

.faq-pending {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #999;
  font-style: italic;
  margin-top: 12px;
}

/* ---- footer ---- */

.site-footer {
  position: relative;
  background: var(--verde) url('https://www.figma.com/api/mcp/asset/e6440b87-8053-4b82-832a-9f0c10456f71.svg') center/cover no-repeat;
  padding: 60px 60px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  color: #F9EFDE;
}

.footer-col h4 {
  font-family: 'Sztos', sans-serif;
  font-size: 14px;
  margin-bottom: 14px;
  font-variation-settings: 'wdth' 200;
}

.footer-col p, .footer-col a {
  display: block;
  font-family: 'Sztos', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #F9EFDE;
  text-decoration: none;
  margin-bottom: 8px;
  font-variation-settings: 'wdth' 200;
}

.footer-copy {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 20px;
  margin-top: 40px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  /* Forzar visibilidad y flujo normal en todo el stack */
  .stack {
    height: auto !important;
    overflow: visible !important;
  }

  .card {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* 1. HERO 1 */
  .hero-viewport {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: auto !important;
    background: linear-gradient(to bottom, var(--cielo) 0%, #F9EFDE 100%) !important;
    padding: 30px 24px 0 !important;
  }

  .hero-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-headline {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    font-size: 38px !important;
    line-height: 38px !important;
    margin-bottom: 16px !important;
    color: var(--verde) !important;
  }

  .hero-sub {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    font-size: 15px !important;
    line-height: 22px !important;
    margin-bottom: 20px !important;
  }

  .scroll-hint { display: none !important; }

  /* Orden mobile: navbar (fuera de este stage) → título → ilustración */
  .hero-headline { order: 1 !important; }
  .hero-sub { order: 2 !important; }
  .clouds-layer { order: 3 !important; }
  .houses-layer { order: 4 !important; }
  .verduras-layer { order: 5 !important; }

  /* Nubes: franja fina arriba de las casitas */
  .clouds-layer {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: -30px !important;
    z-index: 1 !important;
  }

  .hero-nubes {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: translateX(22%) !important;
  }

  /* Ilustración de las casitas posicionada debajo del título, sin traslapar */
  .houses-layer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
    margin-top: 10px !important;
    z-index: 2 !important;
  }

  /* La tira sobrepasa el ancho de pantalla: las casas se ven más grandes
     y queda recorrido para animarla en horizontal. Ambas quedan centradas
     sobre el viewport con margen negativo. */
  .hero-casitas {
    position: relative !important;
    width: 340% !important;
    margin-left: -120% !important;
    height: auto !important;
    display: block !important;
    left: auto !important;
    bottom: auto !important;
  }

  .hero-casitas-back {
    position: absolute !important;
    left: 50% !important;
    margin-left: -150% !important;
    bottom: 0 !important;
    width: 300% !important;
    height: auto !important;
  }

  /* Verduras flotantes: se superponen un poco a las casitas */
  .verduras-layer {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 78% !important;
    margin: -60px auto 0 !important;
    z-index: 3 !important;
  }

  .verduras-layer > svg {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
  }

  /* 2. HERO 2: Una huerta, muchas experiencias */
  #hero2 {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    background: #F9EFDE !important;
    padding: 40px 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
  }



  .h2-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .h2-plant-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 470px !important;
    margin: 0 auto 20px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  /* La planta se dimensiona sola por su proporción y desborda la caja,
     así sobresale por arriba, por abajo y a los costados de la foto. */
.h2-plant {
  position: absolute;
  left: -40px;
  top: -80px;
  width: 620px;
  aspect-ratio: 375 / 690;
  background: url("../img/plantita.svg") no-repeat center / contain;
}

  .h2-photo {
    position: relative !important;
    width: 200px !important;
    height: 182px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .h2-content {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  .h2-headline {
    font-size: 32px !important;
    line-height: 34px !important;
    margin-bottom: 12px !important;
  }

  .h2-sub {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .h2-tomato {
    display: none !important;
  }

  /* 3. HERO 3: Cultivamos mucho más */
  #hero3 {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    padding: 0 0 40px !important;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .h3-stage {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    padding: 0 24px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .h3-content {
    order: 2 !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .h3-headline {
    font-size: 32px !important;
    line-height: 34px !important;
    margin-bottom: 12px !important;
  }

  /* hijo directo de #hero3: ya ocupa todo el ancho, sin márgenes negativos */
  .h3-photo-frame {
    order: -1 !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 44px !important;
    border-radius: 0 !important;
  }

  .h3-foto {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
  }

  /* Desactivar opacidad inline generada por animaciones JS en mobile */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 4. SECCIÓN TESTIMONIOS */
  .testimonios {
    position: relative !important;
    padding: 0 !important;
    background: #F9EFDE !important;
    display: block !important;
    opacity: 1 !important;
  }

  .tt-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 40px 0 !important;
    display: block !important;
    overflow: hidden !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .tt-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 0 24px !important;
    font-size: 24px !important;
    line-height: 28px !important;
    white-space: normal !important;
    text-align: left !important;
    color: #000 !important;
    margin-bottom: 20px !important;
  }

  /* Reseñas en scroll horizontal */
  .tt-cards-row {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 24px 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tt-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 78% !important;
    max-width: 280px !important;
    width: auto !important;
    height: auto !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    scroll-snap-align: start !important;
  }

  .tt-photo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 12px !important;
  }

  .tt-content {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .tt-quote p {
    color: #333 !important;
    font-size: 13px !important;
  }

  /* Cifras, debajo del carrusel */
  .tt-stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
    padding: 24px 24px 0 !important;
  }

  .tt-stat {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* mismo tratamiento tipográfico que en desktop, sólo más chico */
  .tt-stat-n {
    font-family: 'Sztos', sans-serif !important;
    font-weight: 546 !important;
    font-variation-settings: 'wdth' 200 !important;
    font-size: 30px !important;
    line-height: 1.22 !important;
    color: #F5F5F5 !important;
    text-shadow: 2px 2px 0 #000 !important;
  }

  .tt-stat-label {
    max-width: 140px !important;
    font-size: 13px !important;
    color: #333 !important;
    margin: 2px auto 0 !important;
  }

  /* 5. SECCIÓN PRODUCTOS */
  .productos-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 40px 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* la decoración de fondo también va en mobile */
  .pd-decor {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .pd-decor > span { height: auto !important; }

  .pd-limon     { left: -6% !important; top: 0 !important; width: 18% !important; }
  .pd-zanahoria { left: 76% !important; top: 8% !important; width: 7% !important; }

  .pd-nube-a { left: auto !important; right: -4% !important; top: 1% !important; width: 32% !important; }
  .pd-nube-b { left: 58% !important; top: 45% !important; width: 26% !important; }
  .pd-nube-c { left: -5% !important; top: 27% !important; width: 26% !important; }
  .pd-nube-d { left: 2% !important; top: 70% !important; width: 24% !important; }

  .pd-misc-1 { left: -13% !important; top: 11% !important; width: 26% !important; }
  .pd-misc-2 { left: auto !important; right: -14% !important; top: 41% !important; width: 21% !important; }
  .pd-misc-3 { left: -13% !important; top: 71% !important; width: 25% !important; }

  /* --- items --- */

  .pd-item {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 1 !important;
    margin-bottom: 12% !important;
  }

  .pd-figure {
    position: relative !important;
    display: block !important;
    margin: 0 0 6% !important;
  }

  /* La trama sangra por un borde y su extremo curvo asoma del lado
     opuesto a la foto. Impares sangran por izquierda, pares por derecha. */
  .pd-trama {
    position: absolute !important;
    top: 22% !important;
    height: auto !important;
    border-radius: 0 !important;
    z-index: 1 !important;
  }

  .pd-trama-1, .pd-trama-3 {
    left: -2% !important;
    right: auto !important;
    width: 101% !important;
  }

  .pd-trama-2, .pd-trama-4 {
    left: 22% !important;
    right: auto !important;
    width: 92% !important;
  }

  /* Fotos: proporción natural intacta, nunca height fijo ni object-fit */
  .pd-foto {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    border: 6px solid #F9EFDE !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    z-index: 2 !important;
    transform: rotate(var(--rot)) !important;
  }

  .pd-foto-1 { width: 50% !important; margin: 0 0 0 28% !important; }
  .pd-foto-2 { width: 68% !important; margin: 0 0 0 30% !important; }
  .pd-foto-3 { width: 52% !important; margin: 0 0 0 24% !important; }
  .pd-foto-4 { width: 62% !important; margin: 0 0 0 4% !important; }

  /* --- textos: caja angosta, alternando el lado --- */

  .pd-text {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    z-index: 3 !important;
  }

  .pd-item-1 .pd-text, .pd-item-3 .pd-text { padding: 0 37% 0 7% !important; }
  .pd-item-2 .pd-text, .pd-item-4 .pd-text { padding: 0 8% 0 30% !important; }

  .pd-title, .pd-body {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .pd-title {
    font-size: 30px !important;
    line-height: 32px !important;
    margin-bottom: 14px !important;
  }

  .pd-body {
    font-size: 13px !important;
    line-height: 19px !important;
  }

  /* 6. TE ACOMPAÑAMOS */
/* 6. TE ACOMPAÑAMOS */
  .ac-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important; /* Clave para que el padding no expanda el ancho */
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: hidden !important; /* Evita desbordes visuales */
  }

  .ac-title, .ac-body, .ac-tags, .ac-btn {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .ac-title {
    font-size: 32px !important; /* Reducido ligeramente para evitar cortes */
    line-height: 36px !important;
    word-break: break-word; /* Fuerza el corte prolijo si una palabra es muy larga */
  }

  .ac-body {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .ac-tags {
    font-size: 14px !important;
  }

  .ac-btn {
    width: fit-content !important;
    margin-top: 8px !important;
  }

  /* 7. NAVEGACIÓN Y FOOTER */
  .nav {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    padding: 16px 20px !important;
    gap: 0 !important;
  }

  .nav-burger { display: flex !important; }
  .nav-cta-desktop { display: none !important; }

  .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 3;
  }

  .nav-links.is-open {
    display: flex;
    margin-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 8px;
  }

  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 15px;
  }

    .nav-links a:hover {
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  .nav-cta-mobile {
    display: inline-flex !important;
    width: fit-content;
    margin-top: 16px;
  }

  /* el grid ahora vive en .inst-grid, no en la sección */
  .institucional { padding: 40px 24px !important; }

  .inst-grid {
    grid-template-columns: 1fr !important;
  }

  .site-footer {
    grid-template-columns: 1fr !important;
    padding: 40px 24px !important;
  }

  .inst-card {
    border-width: 8px !important;
    padding: 24px !important;
  }

  .inst-card p {
    max-width: 100% !important;
  }

  /* misceláneas más chicas para que no invadan el texto */
  .inst-misc-prog-1 { width: 84px !important; }
  .inst-misc-prog-2 { width: 66px !important; right: 14px !important; top: 20px !important; }
  .inst-misc-may-1  { width: 116px !important; left: 14px !important; }
  .inst-misc-may-2  { width: 94px !important; }
}

/* ---- Footer Whatsapp---- */

.footer-wa-icon {
  position: fixed;
  right: 24px;
  bottom: 24px;
  top: auto;
  z-index: 50;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease;
}

.footer-wa-icon:hover {
  transform: scale(1.08);
}

.footer-wa-icon img {
  width: 65px;
  height: 65px;
  display: block;
}

/* Ajustes Responsive */
@media (max-width: 768px) {
  .site-footer {
    grid-template-columns: 1fr !important;
    padding: 40px 24px !important;
    /* Controla el fondo en mobile para que no se deforme con el alto */
    background-size: 100% auto !important;
    background-position: center bottom 20px !important;
  }

  .footer-wa-icon {
    right: 16px;
    bottom: 16px;
  }



  .footer-wa-icon img {
    width: 48px;
    height: 48px;
  }
}

@keyframes tomatoAnimation {
  0%, 100% {
    transform: rotate(-3deg) scale(1.95);
  }
  50% {
    transform: rotate(3deg) scale(2.05);
  }
}

.h2-tomato {
  position: absolute;
  right: -10rem; /* O un porcentaje relativo al contenedor */
  bottom: -11vh; /* Se posiciona de manera fluida respecto al alto de la pantalla */
  width: 15vw; /* Su tamaño escala proporcionalmente al ancho de la pantalla */
  min-width: 100px; /* Evita que se vuelva diminuto en celulares muy chicos */
  max-width: 140px; /* Evita que crezca de más en desktop */
  aspect-ratio: 195 / 304;
  background: url('../img/seccion-2-tomate.svg') center / contain no-repeat;
  transform-origin: center bottom;
  animation: tomatoAnimation 4s ease-in-out infinite;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .h2-tomato { animation: none; }
}