/* ==========================================================
   TerraTech Agro — styles.css
   Paleta y tipografía tomadas del diseño en Figma
   ========================================================== */

:root {
  --verde-oscuro: #01302b;      /* texto oscuro / botón contacto */
  --verde-fondo: #043120;       /* degradado hero / footer */
  --verde-claro-bg: #f3faef;    /* fondo "Nuestro enfoque" */
  --amarillo: #f4df57;          /* acento principal */
  --naranja: #F9BD23;           /* hover/nav activo (más visible que el amarillo en el header claro) */
  --amarillo-90: rgba(244, 223, 87, 0.9);
  --blanco-suave: #f8f9f9;
  --texto-claro: #eaf4f0;
  --texto-footer: rgba(234, 244, 240, 0.8);
  --borde-chip: #c2cfcd;
  --grad-boton: linear-gradient(90deg, #93cc70 0%, #7bc250 100%);

  /* Outfit para todo el contenido (header, enfoque, experiencia, footer).
     'Batica Sans' sólo para titulares/display; si no está instalada cae en Outfit. */
  --font: 'Outfit', sans-serif;
  --font-display: 'Batica Sans', 'Outfit', sans-serif;
}

/* Batica Sans empaquetada (para que el título de los pilares y los titulares
   se vean igual en cualquier equipo, no solo donde esté instalada). */
@font-face {
  font-family: 'Batica Sans';
  src: url('batica-modern-sans-serif-font-2026-04-07-06-19-09-utc/Web-TT/BaticaSans-Regular.woff2') format('woff2'),
       url('batica-modern-sans-serif-font-2026-04-07-06-19-09-utc/Web-TT/BaticaSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;   /* evita el pestañeo: espera la fuente en vez de mostrar otra */
}
@font-face {
  font-family: 'Batica Sans';
  src: url('batica-modern-sans-serif-font-2026-04-07-06-19-09-utc/OpenType-TT/BaticaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;   /* evita el pestañeo: espera la fuente en vez de mostrar otra */
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--verde-oscuro);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }

a { text-decoration: none; color: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 10.94vw, 140px);   /* 140px exactos a 1280 de ancho */
}

/* ---------- Componentes comunes ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 6px 20px;
  border-radius: 13px;
  font-size: 16.3px;
  letter-spacing: -0.4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.btn-yellow { background: var(--amarillo); color: var(--verde-oscuro); }

.btn-green {
  background: var(--grad-boton);
  color: var(--blanco-suave);
  min-width: 167px;
}

.btn { font-family: var(--font); font-weight: 400; }

/* Los chips ahora son encabezados reales (h1/h2/h3) para que los buscadores
   entiendan la estructura de cada pagina. Fijamos el peso para que un <h2>
   se siga viendo igual que el <span> que habia antes. */
.chip {
  font-family: var(--font-display);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 23px;
  background: var(--blanco-suave);
  border: 1px solid var(--borde-chip);
  border-radius: 0 18px 0 18px;   /* redondeado sólo arriba-izq y abajo-der invertido, como en Figma */
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  font-size: clamp(13.75px, 1.25vw, 18px);   /* escala 1100 -> 1440 */
  letter-spacing: -0.16px;
  color: var(--verde-oscuro);
}

/* ---------- HERO ---------- */

.hero {
  position: relative;
  min-height: max(100vh, 723px);   /* la imagen siempre llena la pantalla; no asoma la sección siguiente */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* Export exacto de Figma (el degradado ya viene en la imagen) */
  background: url('assets/hero-bg.webp') center / cover no-repeat, #043120;
}

/* El logo y Contacto quedan en el hero (absolute);
   sólo la píldora del nav baja con la página (fixed). */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 47px clamp(24px, 7vw, 89.5px) 12px;   /* logo/Contacto a 89.5 de los bordes */
}

.logo { display: flex; align-items: center; }
.logo-img { width: 122px; height: 46px; }

.main-nav {
  position: fixed;
  top: 37.5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4.5vw, 65px);
  padding: 20px clamp(28px, 4.5vw, 65px);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16.3px;
  letter-spacing: -0.4075px;
  line-height: 1.4;
  color: #000;
  white-space: nowrap;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.main-nav.scrolled {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.main-nav a { transition: color 0.2s ease; }
.main-nav .nav-contact, .main-nav .nav-lang { display: none; }   /* solo aparecen en el menú desplegable móvil */
.main-nav a:hover { color: var(--naranja); }
/* el color de la página activa aparece solo al hacer scroll (nav con fondo) */
.main-nav.scrolled a.active { color: var(--naranja); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.search-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.search-btn svg { width: 17px; height: 17px; }

/* ---------- Selector de idioma (Esp/Eng) ---------- */

.lang-menu { position: relative; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 6px 16px;
  border: none;
  border-radius: 13px;
  background: #fff6bd;
  color: #938000;
  font-family: var(--font);
  font-size: 16.3px;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.lang-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }

.lang-btn svg { width: 14px; height: 14px; transition: transform 0.25s ease; }

.lang-menu.open .lang-btn svg { transform: rotate(180deg); }

.lang-options[hidden] { display: none; }   /* cerrado de verdad (el display:grid le ganaba a hidden) */

.lang-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 132px;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: grid;
  gap: 2px;
  z-index: 60;
}

.lang-opt {
  display: block;           /* también como enlace <a> */
  border: none;
  background: none;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--verde-oscuro);
  cursor: pointer;
}

.lang-opt:hover:not(:disabled) { background: var(--verde-claro-bg); }
.lang-opt.is-active { font-weight: 500; color: #0d7233; }
.lang-opt:disabled { color: #9aa5a1; cursor: default; }

.menu-toggle { display: none; }

.hero-content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;              /* columna: título arriba, subtítulo abajo */
  flex-direction: column;
  width: 100%;
  /* alineado al margen de contenido (como el título del logo en la guía).
     Vertical en vh para respetar la proporción del diseño: el título arranca
     ~26% bajo el borde superior y el subtítulo cierra ~16% sobre el inferior. */
  padding: clamp(150px, 26vh, 280px) clamp(24px, 10.94vw, 140px) clamp(80px, 16vh, 175px);
}

.hero-content h1 {
  max-width: 820px;
  font-family: var(--font-display);   /* Batica Bold 71.5 */
  font-size: clamp(42px, 5.6vw, 71.5px);
  font-weight: 700;
  line-height: 1.0;
  color: #fff;
}

.hero-content h1 .accent { color: var(--amarillo); }

.hero-copy {
  max-width: 460px;         /* caja del subtítulo */
  margin-left: auto;
  margin-top: auto;         /* empuja el subtítulo abajo-derecha, como en la guía */
  font-size: clamp(16px, 1.35vw, 19px);          /* Outfit Mixed 19, line-height auto, letter-spacing 0% */
  line-height: normal;
  letter-spacing: 0;
  text-align: justify;
  color: var(--texto-claro);
}

.hero-copy strong { color: var(--amarillo); font-weight: 700; }

/* Indicador de scroll: una flecha con fundido suave, invita a bajar */
.hero { position: relative; }
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 6;   /* por encima de .hero-content, que si no se traga el clic */
  line-height: 0;
  color: #d3dbd6;   /* blanca grisácea */
  transition: color 0.2s ease;
}
.scroll-hint svg {
  width: 34px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
  animation: scrollFade 1.5s ease-in-out infinite;
}
.scroll-hint:hover { color: var(--naranja); }
@keyframes scrollFade {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; opacity: 1; } }

/* ---------- NUESTRO ENFOQUE ---------- */

/* al bajar con la flecha del hero, la seccion no queda pegada al borde */
.enfoque { scroll-margin-top: 40px; }

.enfoque {
  background: var(--verde-claro-bg);
  padding: 73px 0 110px;   /* espacio inferior equilibrado con el superior */
}

.enfoque-text {
  margin-top: 61.5px;       /* texto a 170.5 del inicio de la sección (73 + 36 + 61.5) */
  max-width: 1000px;
  font-size: clamp(20px, 2.3vw, 29.17px);
  line-height: 1.4;
  letter-spacing: -0.29px;
  color: #000;
}

.enfoque-text strong { font-weight: 600; }
@media (max-width: 1100px) { .br-enfoque { display: none; } }   /* evita línea huérfana al achicar */

.enfoque-cta {
  max-width: 1000px;
  display: flex;
  justify-content: flex-end;
  margin-top: 26.5px;   /* texto → 26.5 → botón (40) → 69.5 → fin de sección = 136 */
}

/* ---------- PILARES ---------- */

.pilares {
  position: relative;
  z-index: 5;               /* la expansión queda por encima de la sección siguiente */
  background: #fff;
  padding: 73px 0 220px;    /* 73 arriba del chip; espacio para la expansión de Social */
}

.pilares-sub {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-left: 24px;   /* alinea con el inicio del texto del chip (padding 23 + borde) */
  font-family: var(--font);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  letter-spacing: -0.2px;
  color: #4e625b;   /* gris-verde secundario del diseño */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.pilares-sub:hover { color: var(--verde-oscuro); }
.pilares-sub .ps-arrow { display: inline-block; font-weight: 600; transition: transform 0.25s ease; }
.pilares-sub:hover .ps-arrow { transform: translateY(4px); }

/* CTA "Ver más" bajo el botón + de Experiencia */
.stat-cta {
  display: block;
  margin-top: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--amarillo);
}
.stat:hover .stat-cta { text-decoration: underline; }

.pilares-figure {
  position: relative;
  width: 269px;
  height: 420px;
  margin: 132px auto 0;   /* bajado para centrar más el isotipo en la sección */
  scroll-margin-top: 200px;   /* al bajar desde el subtítulo, deja espacio bajo el nav */
}

/* Rebote en secuencia: cada hoja del isotipo "salta" por turnos para invitar a
   interactuar. Solo en reposo (figura visible y sin hover); durante el hover se
   detiene y las hojas vuelven a su posición para el relevo con las fotos.
   El transform-origin va al centro visual de cada hoja para que crezca en su lugar. */
@keyframes pilar-pop {
  0%, 55%, 100% { transform: scale(1); }
  27%           { transform: scale(1.08); }
}

.pilares-figure.visible .base-top   { transform-origin: 50% 13%; }
.pilares-figure.visible .base-left  { transform-origin: 20% 69%; }
.pilares-figure.visible .base-right { transform-origin: 78% 61%; }

.pilares-figure.visible:not(:hover) .base-top   { animation: pilar-pop 2.6s ease-in-out infinite; }
.pilares-figure.visible:not(:hover) .base-right { animation: pilar-pop 2.6s ease-in-out infinite 0.55s; }
.pilares-figure.visible:not(:hover) .base-left  { animation: pilar-pop 2.6s ease-in-out infinite 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .pilares-figure.visible .base-top,
  .pilares-figure.visible .base-left,
  .pilares-figure.visible .base-right { animation: none; }
}

/* El isotipo de color queda POR ENCIMA de la imagen: al hacer hover
   su color se disuelve lentamente revelando la foto (secuencia de opacidad),
   mientras la hoja se expande con una curva muy suave. */
.pilar-base {
  position: absolute;
  inset: 0;
  width: 269px;
  height: auto;
  z-index: 3;                 /* el color (isotipo) queda SOBRE las fotos */
  /* SIN transición: los relevos con las capas de color enmascaradas son 1:1
     (mismo color, misma posición) — el swap es invisible */
}

.pilar-state {
  position: absolute;
  inset: 0;
  z-index: 2;                 /* las fotos van por debajo del color */
  pointer-events: none;
}

.pilar-state img {
  position: absolute;
  opacity: 0;               /* sin transición: la coreografía visible la hacen las capas de color */
  will-change: transform, opacity;
}

/* la hoja principal escala junto con su capa de color (expansión) */
.pilar-state .ps-main {
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Escala inicial de cada hoja principal = cubre EXACTO su hoja del isotipo.
   Así el relevo al abrir Y al cerrar es invisible (sin saltos de tamaño):
   crece desde el isotipo y encoge de vuelta a él. */
.state-ma .ps-main,     .state-ma .leaf-c-main     { transform: translateZ(0) scale(0.7079, 0.6554); }
.state-social .ps-main, .state-social .leaf-c-main { transform: translateZ(0) scale(0.6073, 0.6439); }
.state-gob .ps-main,    .state-gob .leaf-c-main    { transform: translateZ(0) scale(0.6073, 0.6078); }

/* el texto entra al final con un leve desplazamiento (ahora es texto HTML editable) */
.pilar-state .ps-text {
  position: absolute;
  opacity: 0;
  width: max-content;
  max-width: 340px;
  transform: translateY(14px);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.ps-text .ps-heading {
  font-family: var(--font-display);   /* Batica Sans */
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.15;
  color: #043120;
  margin-bottom: 14px;
}

.ps-text .ps-list { list-style: none; display: grid; gap: 9px; }

.ps-text .ps-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font);           /* Outfit */
  font-weight: 300;                    /* Light */
  font-size: clamp(14px, 1.15vw, 16.5px);
  line-height: 1.25;
  color: #111;
}

/* viñeta = hoja (assets/hoja (punto) pilares.svg), incrustada para evitar el nombre con espacios */
.ps-text .ps-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.05769 0C5.0859 0 6.0718 0.422588 6.79872 1.17489C7.52564 1.9272 7.93397 2.94818 7.93397 4.01163V7.81958H3.87629C1.73526 7.81958 0 6.02374 0 3.80795V0H4.05769Z" fill="%237BC250"/></svg>') center/contain no-repeat;
}

/* Zonas interactivas por hoja */
.pilar-zone {
  position: absolute;
  cursor: pointer;
  z-index: 5;
}

.zone-ma     { left: 0;     top: 0;     width: 269px; height: 116px; }
.zone-social { left: 0;     top: 156px; width: 116px; height: 264px; }
.zone-gob    { left: 153px; top: 156px; width: 116px; height: 203px; }

/* Estado activo: el color de fondo (isotipo) se desvanece y las fotos aparecen EN PARALELO */
.pilares-figure.active-ma .state-ma .ps-main,
.pilares-figure.active-social .state-social .ps-main,
.pilares-figure.active-gob .state-gob .ps-main {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

.pilares-figure.active-ma .state-ma .ps-b,
.pilares-figure.active-social .state-social .ps-b,
.pilares-figure.active-gob .state-gob .ps-b,
.pilares-figure.active-ma .state-ma .ps-c,
.pilares-figure.active-social .state-social .ps-c,
.pilares-figure.active-gob .state-gob .ps-c {
  opacity: 1;
}

.pilares-figure.active-ma .state-ma .ps-text,
.pilares-figure.active-social .state-social .ps-text,
.pilares-figure.active-gob .state-gob .ps-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;   /* el texto entra al final, tras disolverse el color */
  pointer-events: auto;
}

/* con estado activo O cerrándose, el isotipo base queda oculto: las capas de color
   enmascaradas (mismo color exacto) toman su lugar sin corte visible */
.pilares-figure.active-ma .pilar-base,
.pilares-figure.active-social .pilar-base,
.pilares-figure.active-gob .pilar-base,
.pilares-figure.closing-ma .pilar-base,
.pilares-figure.closing-social .pilar-base,
.pilares-figure.closing-gob .pilar-base {
  opacity: 0;
}

/* Capa de color por hoja: la MISMA foto teñida del color exacto de su hoja con un
   filtro SVG (silueta idéntica garantizada; funciona también abriendo el sitio
   como archivo local, donde Chrome bloquea las máscaras CSS). */
.leaf-c {
  position: absolute;
  z-index: 2;                 /* sobre la foto (dentro de pilar-state) */
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.leaf-c-main {                /* la hoja principal crece (expansión) con el color */
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.pilares-figure.active-ma .state-ma .leaf-c-main,
.pilares-figure.active-social .state-social .leaf-c-main,
.pilares-figure.active-gob .state-gob .leaf-c-main {
  transform: translateZ(0) scale(1);
}
/* APERTURA (crossfade exacto al video): el color parte en 1 —toma el relevo del isotipo
   sin corte— y solo se DISUELVE: la foto emerge a través del verde. Nunca "aparece" verde. */
@keyframes leafFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.pilares-figure.active-ma .state-ma .leaf-c,
.pilares-figure.active-social .state-social .leaf-c,
.pilares-figure.active-gob .state-gob .leaf-c {
  /* 'both' = mantiene opacidad 1 durante el delay y 0 al terminar */
  animation: leafFadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* las hojas secundarias se disuelven un instante después, como en el video */
.pilares-figure.active-ma .state-ma .leaf-c:not(.leaf-c-main),
.pilares-figure.active-social .state-social .leaf-c:not(.leaf-c-main),
.pilares-figure.active-gob .state-gob .leaf-c:not(.leaf-c-main) {
  animation-duration: 0.55s;
  animation-delay: 0.22s;
}

/* CIERRE (como el video): las fotos SE QUEDAN mientras el color vuelve fundiéndose
   SOBRE ellas —siguiendo su silueta y su contracción—; al terminar, el JS quita la
   clase 'closing-*' y el isotipo base retoma sin corte (mismos colores). */
@keyframes leafFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pilares-figure.closing-ma .state-ma img,
.pilares-figure.closing-social .state-social img,
.pilares-figure.closing-gob .state-gob img {
  opacity: 1;
}
.pilares-figure.closing-ma .state-ma .leaf-c,
.pilares-figure.closing-social .state-social .leaf-c,
.pilares-figure.closing-gob .state-gob .leaf-c {
  animation: leafFadeIn 0.45s ease both;
}
/* el texto sale rápido durante el cierre (no se queda flotando) */
.pilares-figure.closing-ma .state-ma .ps-text,
.pilares-figure.closing-social .state-social .ps-text,
.pilares-figure.closing-gob .state-gob .ps-text {
  transition: transform 0.3s ease, opacity 0.3s ease;
}


@media (max-width: 1100px) {
  /* en pantallas chicas los estados expandidos no caben a los lados */
  .pilares-figure { transform: scale(0.8); }
}

/* ---------- CONTACTO ---------- */

.contacto-main { padding-top: 167px; }   /* mismo aire bajo el encabezado que las demás páginas */

.contacto-main > .container > .chip { margin-bottom: 34px; }

/* franja verde clara de ancho completo */
.contacto-banda {
  background: var(--verde-claro-bg);
  padding: 38px 0;
}

.contacto-banda p {
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.25px;
  color: #0d7233;
  max-width: 1060px;
}

.contacto-form {
  padding: 52px 0 90px;
  max-width: 733px;
}

.cf-heading {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  color: #0d7233;
  margin-bottom: 26px;
}

.cf-heading-sep { margin-top: 46px; }

.cf-field { margin-bottom: 22px; }

.cf-field label {
  display: block;
  font-size: 17.5px;
  color: #0d7233;
  margin-bottom: 10px;
}

/* cajas del diseño: 733x47, radio 20, fondo #F3FAEF al 50%, borde #043120 al 21% */
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  height: 47px;
  padding: 0 20px;
  border-radius: 20px;
  background: rgba(243, 250, 239, 0.5);
  border: 1px solid rgba(4, 49, 32, 0.21);
  font-family: var(--font);
  font-size: 16px;
  color: var(--verde-oscuro);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: rgba(4, 49, 32, 0.55);
  background: rgba(243, 250, 239, 0.85);
}

/* recuadro grande del mensaje: 733x233 */
.cf-field textarea {
  height: 233px;
  padding: 14px 20px;
  resize: vertical;
}

/* select con chevron propio */
.cf-select-wrap { position: relative; }

.cf-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.cf-chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--verde-oscuro);
  pointer-events: none;
}

.cf-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 30px 0 34px;
  font-size: 16px;
  color: #0d7233;
  cursor: pointer;
  max-width: 733px;
}

.cf-consent input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: #0d7233;
  cursor: pointer;
}

/* botón del diseño: 145x40, radio 13, amarillo */
.cf-enviar {
  min-width: 145px;
  border: none;
  cursor: pointer;
}

.cf-success {
  margin-top: 22px;
  font-size: 17px;
  color: #0d7233;
}
.cf-success.cf-error { color: #b3261e; }

@media (max-width: 860px) {
  .contacto-form { padding-top: 40px; }
}

/* ---------- EXPERIENCIA ---------- */

.experiencia {
  position: relative;
  min-height: 744px;
  padding: 130px 0 160px;
  overflow: hidden;
  color: var(--blanco-suave);
}

.experiencia-bg {
  position: absolute;
  inset: 0;
  /* Compuesto exacto de Figma: arranca en blanco puro y funde al verde
     sin cortes con la sección blanca anterior */
  background: url('assets/experiencia-bg.webp') center top / cover no-repeat, #fff;
}

/* Garantiza el fundido al color del footer aunque el 'cover' recorte la imagen */
.experiencia-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(4, 49, 32, 0) 0%, #043120 92%);
}

.experiencia .container { position: relative; z-index: 2; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
  margin-top: 120px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.stat {
  text-align: center;
  cursor: pointer;
}

/* Especificidad con .stats para ganarle a .reveal.visible (que fija transform:none) */
.stats .stat {
  transition: opacity 0.7s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stats .stat:hover { transform: translateY(-12px); }

/* escalonado como en el diseño */
.stat-2 { margin-top: 50px; }
.stat-3 { margin-top: 100px; }

/* Cifras exactas de Figma: números/KPI 100, k/s 70, signo + 48 bold */
.stat-number {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(58px, 6.95vw, 100px);
  line-height: 1;
  color: var(--amarillo);
}

.stat-suffix { font-size: clamp(40px, 4.85vw, 70px); }

.stat-plus {
  font-size: clamp(28px, 3.35vw, 48px);
  font-weight: 700;
  vertical-align: 19px; /* centrado respecto a la altura de los números */
}

/* +25 no tiene sufijo que equilibre el "+", así que el número quedaba corrido a
   la derecha. Se neutraliza el ancho del signo (width = -margin) para que el
   "25" quede centrado bajo el texto y el botón. */
.stat-3 .stat-plus {
  display: inline-block;
  width: 0.6em;
  margin-left: -0.6em;
}

.stat-label {
  margin-top: 14px;
  font-family: var(--font);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  letter-spacing: -0.2px;
  color: var(--blanco-suave);
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.stat-more {
  margin-top: 18px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--verde-oscuro);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: inline-grid;
  place-items: center;
}
.stat-more svg { width: 13px; height: 13px; display: block; stroke-width: 3.7; } /* ~2px reales, igual que la flecha */

/* Al pasar el mouse por cualquier parte del bloque, el botón crece e invita a clickear */
.stat:hover .stat-more {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.25);
}

/* Un poco más grande aún si se apunta directo al botón */
.stat-more:hover { transform: scale(1.5); }

/* ---------- FOOTER ---------- */

.site-footer {
  background: var(--verde-fondo);
  padding: 20px 0;
}

.footer-inner {
  display: flex;
  gap: clamp(40px, 8vw, 120px);
  align-items: flex-start;
  border-top: 1px solid rgba(243, 250, 239, 0.26);
  padding-top: 80px;
  padding-bottom: 80px;
}

.footer-brand { flex: 1 0 0; min-width: 260px; }

.footer-logo {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.65vw, 24px);
  letter-spacing: -0.48px;
  color: var(--amarillo-90);
  line-height: 1.45;
}

.footer-tagline {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.08px;
  color: var(--texto-footer);
  line-height: 1.45;
}

.social-links {
  display: flex;
  gap: 24px;
  margin-top: 56px;
}

.social-links a {
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-links a:hover { opacity: 0.7; transform: translateY(-2px); }
.social-links img { display: block; width: 100%; height: 100%; }

.footer-nav {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-col { display: flex; flex-direction: column; gap: 8px; width: 130px; }
.footer-col-wide { width: 258px; }

/* Los titulos del pie dejaron de ser <h3> (competian con la jerarquia del
   contenido) y pasaron a <p class="footer-title">. Se mantiene el selector h3
   para las paginas de web-mobile/, que aun no se migran. */
.footer-col h3,
.footer-col .footer-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.08px;
  color: var(--amarillo-90);
  padding-bottom: 16px;
  line-height: 1.45;
}

.footer-col p,
.footer-col a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.08px;
  color: var(--texto-footer);
  line-height: 1.45;
}

.footer-col a { text-decoration: underline; text-underline-position: from-font; }
.footer-col a.q-underline { text-decoration: none; }
.footer-col a.q-underline span { text-decoration: underline; text-underline-position: from-font; }
.footer-col a:hover { color: var(--amarillo); }

/* ---------- Modal Experiencia (+60k): collage y galerías ---------- */

.exp-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: start center;   /* contenido anclado bajo la banda superior */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.exp-modal.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.exp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 49, 32, 0.82);   /* #043120 (mismo difuminado/blur) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.exp-dialog {
  position: relative;
  width: min(1000px, 92vw);
  margin-top: 106px;           /* banda superior: 53 arriba / 53 abajo del centro de X y título */
  /* sin transform al abrir: así la X (y el título) quedan fijos, no se mueven.
     La entrada la aportan el fundido del modal y la aparición escalonada de las tarjetas. */
}

/* X global: centro a 53px del borde superior, a 40px del borde derecho del contenido */
.exp-close {
  position: absolute;
  top: -70.5px;          /* centro en 53px del viewport (banda 53/53, diálogo a 106px) */
  right: -75px;          /* 40px de separación + 35px de la X */
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10;
  display: grid;
  place-items: center;
}
.exp-close svg { width: 15px; height: 15px; display: block; stroke-width: 3.2; } /* ~2px reales, igual que la flecha */
.exp-close:hover { background: var(--amarillo); color: var(--verde-oscuro); transform: rotate(90deg); }

/* Collage: mosaico exacto del diseño (posiciones en % del frame 1000x486) */
.exp-collage {
  position: relative;
  aspect-ratio: 1000 / 490;
  width: 100%;
  container-type: inline-size;   /* 100cqw = ancho del collage: todo escala uniforme */
}

.tile {
  position: absolute;
  border: none;
  padding: 0;
  background-color: transparent;   /* sin recuadro blanco del botón */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 33px;   /* rx=33 del diseño original */
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease, box-shadow 0.3s ease;
}

.exp-modal.open .tile { opacity: 1; transform: none; }

/* Expansión: se desvanecen las tarjetas (con su texto) mientras crece la foto limpia */
.exp-collage.expanding .tile {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* foto limpia que crece desde la tarjeta clicada hasta llenar el collage (sin deformar).
   Curva suave y continua + el radio pasa de 14 a 26px para empalmar sin corte con el slider. */
.exp-grow {
  position: absolute;
  object-fit: cover;
  border-radius: 33px;
  z-index: 6;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: left 0.66s cubic-bezier(0.33, 1, 0.68, 1), top 0.66s cubic-bezier(0.33, 1, 0.68, 1),
    width 0.66s cubic-bezier(0.33, 1, 0.68, 1), height 0.66s cubic-bezier(0.33, 1, 0.68, 1),
    border-radius 0.66s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: left, top, width, height;
  transform: translateZ(0);   /* capa propia en GPU: crecimiento más fluido */
  backface-visibility: hidden;
}

/* entrada escalonada de las piezas */
.exp-modal.open .t-cultivos  { transition-delay: 0.05s; }
.exp-modal.open .t-frutales  { transition-delay: 0.13s; }
.exp-modal.open .t-impacto   { transition-delay: 0.21s; }
.exp-modal.open .t-riego     { transition-delay: 0.29s; }
.exp-modal.open .t-innovacion{ transition-delay: 0.37s; }

/* sin box-shadow: las tarjetas tienen forma de hoja (PNG transparente) y la sombra
   rectangular se veía como una figura detrás */
.tile:hover {
  transform: scale(1.03) !important;
  z-index: 2;
}

/* ----- Tarjetas del collage: foto limpia + vidrio (formas del diseño) + título en texto ----- */

.tile { overflow: hidden; }

/* El vidrio frosted (blur + tinte + forma) va HORNEADO en la propia imagen
   portada-base.webp, generado desde el SVG del diseño. Así se ve idéntico en
   cualquier navegador y no depende del backdrop-filter (que Chrome no renderiza
   de forma fiable con archivos locales). Se oculta la capa HTML para no duplicar. */
.tile-glass {
  display: none;
}

/* el desenfoque va en una capa interna: si se aplica junto al clip-path en el mismo
   elemento, Chrome pinta el blur como rectángulo completo (los "recuadros de más") */
.tile-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.t-cultivos .tile-glass {
  left: 0; bottom: 0; width: 243px; height: 125px;
  background: rgba(123, 194, 80, 0.4);
  clip-path: path('M0 92.1315C0 41.2487 41.2487 0 92.1315 0H243V92C243 110.225 228.225 125 210 125H32.8685C14.7157 125 0 110.284 0 92.1315Z');
}

.t-frutales .tile-glass {
  right: 0; top: 0; width: 220px; height: 240px;
  background: rgba(249, 189, 35, 0.4);
  clip-path: path('M1.04033e-05 121C4.65772e-06 186.722 53.2781 240 119 240L187 240C205.225 240 220 225.225 220 207L220 33C220 14.7746 205.225 2.68258e-06 187 1.08927e-06L2.09815e-05 -1.52588e-05L1.04033e-05 121Z');
}

/* Impacto ambiental es la unica portada que NO trae el vidrio horneado, asi que
   aca se dibuja con CSS. Las medidas van en % y cqw (no en px) para que escale
   igual que el vidrio horneado de las demas al cambiar el ancho del collage.
   La forma del diseno es un rectangulo con la esquina superior izquierda muy
   redondeada (119 sobre base 1000 = 11.9cqw) y las inferiores a 33 (3.3cqw). */
.t-impacto .tile-glass {
  display: block;
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 39.6%;
  background: rgba(244, 223, 87, 0.4);
  /* Forma del diseno sobre una caja de 240x194: esquina superior izquierda con
     radio 119 e inferiores con 33. Los porcentajes de border-radius se miden
     sobre cada eje por separado, de ahi la sintaxis con barra (h / v).
     119/240=49.6% y 119/194=61.3%; 33/240=13.8% y 33/194=17%. */
  border-radius: 49.6% 0 13.8% 13.8% / 61.3% 0 17% 17%;
  /* El desenfoque va en el propio elemento, no en una capa ::before: su
     border-radius lo recorta correctamente. No se puede usar clip-path aca
     porque un ancestro con clip-path crea un backdrop root y deja al
     backdrop-filter sin fondo que desenfocar (se pierde el efecto). */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* la capa interna que usan las demas tarjetas sobra: pintaria un rectangulo */
.t-impacto .tile-glass::before { content: none; }

.t-riego .tile-glass {
  left: 0; top: 0; width: 265px; height: 240px;
  background: rgba(13, 114, 51, 0.4);
  clip-path: path('M265 119C265 53.2781 211.722 4.65772e-06 146 1.04033e-05L33 2.02821e-05C14.7746 2.18754e-05 -2.92259e-05 14.7746 -2.76326e-05 33L-1.24211e-05 207C-1.08278e-05 225.225 14.7746 240 33 240L265 240L265 119Z');
}

.t-innovacion .tile-glass {
  left: 0; bottom: 0; width: 243px; height: 122px;
  background: rgba(4, 49, 32, 0.4);
  clip-path: path('M243 89.9203C243 40.2587 202.741 0 153.08 0H0V89C0 107.225 14.7746 122 33 122H210.92C228.637 122 243 107.637 243 89.9203Z');
}

/* Título de tarjeta: Batica Sans regular, centrado dentro de su vidrio.
   Antes iba posicionado con coordenadas sueltas del diseño original, lo que dejaba
   cada título desviado del centro de su cristal (hasta 35px en Gestión hídrica).
   Ahora la caja del título replica la del vidrio (ver .tile-glass) y centra por flex. */
.tile-title {
  position: absolute;
  inset: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6cqw;   /* 26px sobre base 1000: escala con el ancho del collage */
  line-height: 1.05;
  letter-spacing: 0;
  color: #EAF4F0;
  pointer-events: none;
}

/* cajas de los vidrios, en % del tile (derivadas de los px de .tile-glass) */
.t-cultivos .tile-title   { left: 0; bottom: 0; width: 100%;   height: 52.1%; }
.t-frutales .tile-title   { right: 0; top: 0;   width: 44.8%;  height: 100%;  }
.t-impacto .tile-title    { left: 0; bottom: 0; width: 100%;   height: 39.6%; color: #043120; }   /* verde oscuro exacto del diseño (#043120) */
.t-riego .tile-title      { left: 0; top: 0;    width: 53.97%; height: 100%;  }   /* 265/491 y 240/240 del diseño */
.t-innovacion .tile-title { left: 0; bottom: 0; width: 100%;   height: 50.8%; }

/* Conteo de fotos: aparece al acercar el mouse. Crece desde altura cero para que
   el título quede centrado también en reposo, sin reservar un hueco vacío. */
.tile-count {
  display: block;
  font-family: var(--font);
  font-size: 1.25cqw;
  letter-spacing: 0.02em;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: opacity 0.28s ease, max-height 0.28s ease, margin-top 0.28s ease;
}
.tile:hover .tile-count,
.tile:focus-visible .tile-count { opacity: 0.82; max-height: 2.4cqw; margin-top: 0.7cqw; }

@media (prefers-reduced-motion: reduce) {
  .tile-count { transition: none; }
}

/* Mosaico exacto (base 1000x490; gaps 13px horiz / 10px vert)
   cultivos 243x240 · frutales 491x240 · impacto 240x490 · riego 491x240 · innovacion 243x240 */
.t-cultivos   { left: 0%;    top: 0%;     width: 24.3%; height: 48.98%; }
.t-frutales   { left: 25.6%; top: 0%;     width: 49.1%; height: 48.98%; }
.t-impacto    { left: 76%;   top: 0%;     width: 24%;   height: 100%; }
.t-riego      { left: 0%;    top: 51.02%; width: 49.1%; height: 48.98%; }
.t-innovacion { left: 50.4%; top: 51.02%; width: 24.3%; height: 48.98%; }

/* Galería: foto grande redondeada, flechas amarillas a los lados (como en Figma) */
.exp-gallery {
  position: relative;
  display: grid;
  place-items: center;
}

/* clave: 'hidden' debe ganar al display:grid */
.exp-gallery[hidden],
.exp-collage[hidden],
.exp-esquema[hidden],
.exp-logos[hidden] { display: none !important; }

/* Logos +30: marquee infinito hacia la izquierda, pausa al hover (config de Figma) */
.exp-logos {
  display: grid;
  place-items: center;
  /* centrado vertical en el espacio bajo la banda superior */
  min-height: calc(100vh - 206px);
  padding: 40px 0;
}

.logos-marquee {
  width: 100%;
  overflow: hidden;
  /* desvanecido en los bordes para entrada/salida suave */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logos-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logosMarquee 24s linear infinite;  /* ~50 px/s */
}

.logos-track { align-items: center; }
.logos-track li { flex: none; padding-right: 24px; }  /* 24px entre cada logo */
.logos-track img { display: block; height: auto; width: auto; max-height: 74px; }

.logos-marquee:hover .logos-track { animation-play-state: paused; }

@keyframes logosMarquee {
  to { transform: translateX(-50%); }
}

/* Esquema KPIs — medidas del diseño:
   X a 22,5px del borde superior; título 123px bajo esa línea;
   72,5px entre el bloque del título y el esquema. */
.exp-modal.mode-esquema { place-items: start center; }

.mode-esquema .exp-dialog {
  width: min(1360px, 96vw);   /* más ancho: el esquema se ve más grande */
  margin-top: 0;
}

.mode-esquema .exp-close {
  top: 22.5px;
  right: 0;
}

.exp-esquema {
  padding-top: 145.5px;   /* 22,5 (línea X) + 123 hasta el título */
  padding-bottom: 60px;
}

/* Marco del esquema: 1084x412 del diseño, con textos HTML editables */
.esq-frame {
  position: relative;
  width: 1084px;          /* el JS lo escala completo al ancho disponible */
  height: 412px;
  transform-origin: top left;
}

.esq-curvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Título: Batica Sans regular 30, altura 95%, espaciado -1% */
.esq-head {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 0.95;
  letter-spacing: -0.3px;
  color: #fff;
}

/* Chip: Batica Sans regular 16, altura 140%, espaciado -1% */
.esq-chip {
  position: absolute;
  left: 0;
  top: 76px;
  background: var(--amarillo);
  color: #01302b;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.16px;
  padding: 7px 24px;
  /* forma exacta del "frame amarillo.svg": redondeado arriba-izq y abajo-der (18px) */
  border-radius: 18px 0 18px 0;
}

.esq-svg { display: none; }   /* esquema vectorial antiguo (se elimina del HTML) */

.esq-nodo { position: absolute; width: 200px; }

/* número: círculo amarillo de 29px, como el componente del diseño */
.esq-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--amarillo);
  color: #043120;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: -0.12px;
}

/* línea vertical con punto al final (degradado blanco, como el diseño) */
.esq-linea {
  display: block;
  position: relative;
  width: 2px;
  margin-left: 13.5px;
  border-radius: 1px;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.3));
}

.esq-linea::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 5.6px;
  height: 5.6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
}

/* Textos de los puntos: Outfit regular 14, altura 140%, espaciado -1% */
.esq-nodo p {
  margin: 17px 0 0;   /* deja aire tras el punto de la línea */
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.14px;
  color: #d9d9d9;
}


/* Galería: banda superior de 106px (53 arriba / 53 abajo del centro).
   Flechas de 35px (mismo porte que la X) a 40px de la foto (75px al borde externo).
   Título alineado con la flecha izquierda; X alineada con la derecha. */
.exp-gallery { padding-top: 0; }  /* la banda la aporta el margin-top del diálogo */


.gal-box {
  position: relative;
  width: min(1000px, 92vw);   /* tamaño fijo (igual al collage): la X, el título y
                                 las flechas NO se mueven al cambiar de imagen */
  aspect-ratio: 1000 / 490;
  margin: 0 auto;
}

.gal-title {
  position: absolute;
  top: -106px;
  left: 0;                    /* alineado con el borde izquierdo de la imagen */
  height: 106px;
  display: flex;
  align-items: center;        /* centro vertical = centro de la X */
  gap: 18px;                  /* separa el nombre del contador */
  color: #fff;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.2;
  color: #eaf4f0;
  white-space: nowrap;
}

/* X propia de la galería, alineada verticalmente con la flecha derecha */
.gal-close {
  position: absolute;
  top: -106px;
  right: -75px;
  height: 106px;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.gal-close span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gal-close span svg { width: 17px; height: 17px; position: relative; left: -1px; stroke-width: 2.8; }
.gal-close:hover span { background: var(--amarillo); color: var(--verde-oscuro); transform: translateX(-2px); }

/* Carrusel galería: sin flechas, click en mitades + puntos */
.gal-nav { display: none; }
.gal-zone { position: absolute; top: 0; bottom: 0; width: 26%; z-index: 3; background: none; border: 0; cursor: pointer; display: flex; align-items: center; }
.gal-zone-prev { left: 0; justify-content: flex-start; padding-left: 20px; }
.gal-zone-next { right: 0; justify-content: flex-end; padding-right: 20px; }
/* flecha en círculo semitransparente, aparece al hover cerca del borde */
.z-circle { width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.32); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.z-circle svg { width: 24px; height: 24px; color: #fff; }
.gal-zone:hover .z-circle { opacity: 1; }
/* Contador junto al título, separado por una línea fina */
.gal-count {
  align-self: center;          /* mismo eje que el nombre, sin depender del alto de línea */
  font-family: var(--font);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  line-height: 1.6;            /* da alto a la línea divisoria */
}

/* Barra segmentada sobre la foto: cuántas fotos hay, en cuál estás y cuánto falta
   para la siguiente (el segmento activo se llena durante el intervalo) */
.gal-segs { position: absolute; top: 18px; left: 20px; right: 20px; z-index: 4; display: flex; justify-content: center; gap: 7px; }
/* punto que se estira en píldora al activarse; la píldora se llena como cuenta regresiva */
.gal-seg { flex: none; width: 8px; height: 8px; border-radius: 999px; overflow: hidden; border: 0; padding: 0;
           background: rgba(255, 255, 255, 0.42); transition: width 0.35s ease, background 0.35s ease; }
.gal-seg.done { background: rgba(255, 255, 255, 0.75); }
.gal-seg.now { width: 56px; background: rgba(255, 255, 255, 0.3); }
.gal-seg i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--amarillo); }
.gal-seg.now i { animation: galLlenar var(--gal-dur, 1800ms) linear forwards; }
@keyframes galLlenar { from { width: 0; } to { width: 100%; } }

/* Miniaturas: muestran cuántas fotos hay y permiten saltar directo */
.gal-thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.gal-thumb {
  width: 104px; height: 64px; border: 0; padding: 0; border-radius: 12px; overflow: hidden;
  cursor: pointer; opacity: 0.5; outline: 2px solid transparent; outline-offset: 3px;
  transition: opacity 0.3s ease, transform 0.3s ease, outline-color 0.3s ease;
}
.gal-thumb:hover { opacity: 0.85; transform: translateY(-3px); }
.gal-thumb.active { opacity: 1; outline-color: var(--amarillo); }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .gal-seg.now i { animation: none; width: 100%; }
  .gal-thumb { transition: none; }
}

/* en la galería manda la X propia (alineada con la flecha derecha, a 40px de la foto) */
.exp-dialog.in-gallery > .exp-close { display: none; }

.gal-img {
  position: absolute;          /* dos capas apiladas para crossfade fluido */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.gal-img.is-active { opacity: 1; }

@keyframes galFade { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

.gal-nav {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  transform: translateY(-50%);
  z-index: 3;
}
.gal-nav img { display: block; width: 100%; height: 100%; }
.gal-nav:hover { filter: brightness(1.08); transform: translateY(-50%) scale(1.12); }
/* esquina interna de la flecha a 40px de la foto */
.gal-prev { left: -75px; }
.gal-next { right: -75px; }

@media (max-width: 1150px) {
  .gal-prev { left: 10px; }
  .gal-next { right: 10px; }
  .gal-title { left: 10px; }
  .gal-close { right: 10px; }
}

body.modal-open { overflow: hidden; }

/* ---------- Página Nosotros (versión clara) ---------- */

.page-nosotros { background: #fff; }

.page-nosotros .site-header { position: absolute; }
/* nav con efecto blur también en la versión clara */
.page-nosotros .main-nav {
  background: rgba(216, 216, 216, 0.42);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.page-nosotros .search-btn { color: var(--verde-oscuro); }
.page-nosotros .menu-toggle span { background: var(--verde-oscuro); }

.nos-main { padding-top: 167px; }

/* Filas del diseño (SVG exactos de Figma) */
.nos-row {
  margin-top: 40px;
}

.nos-row img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

.nos-row-center img { max-width: 657px; }
.nos-row-sep { margin-top: 64px; }
.nos-mv { margin-top: 48px; }

/* Equipo */
.chip-equipo { margin-top: 73px; display: inline-flex; }

/* ---- Misión / Visión como texto (rectángulo #7BC250 al 9%, radio 44) ---- */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1000px;          /* 476 + 48 + 476 = 1000, como el diseño (sin distorsión) */
  margin: 48px auto 0;
  align-items: stretch;       /* ambas tarjetas del mismo alto */
}
.mv-card {
  background: rgba(123, 194, 80, 0.09);
  border-radius: 44px;
  padding: 48px 52px;
}
.mv-card.reveal { transform: translateY(10px); }   /* entrada más tenue */
.mv-chip {
  display: inline-block;
  font-family: var(--font-display);   /* Batica Sans Regular 20 */
  font-weight: 400;
  font-size: clamp(13.98px, 1.271vw, 18.3px);   /* escala 1100 -> 1440 */
  color: #6aa63c;
  background: rgba(123, 194, 80, 0.16);
  padding: 9px 28px;
  border-radius: 999px;
  margin-bottom: 30px;
}
.mv-text {
  font-family: var(--font);           /* Outfit Regular 24 */
  font-weight: 400;
  font-size: clamp(16.04px, 1.458vw, 21px);   /* escala 1100 -> 1440 */
  line-height: 1.23;                   /* 123% */
  letter-spacing: -0.24px;             /* -1% */
  color: #043120;
}
.mv-text .hl { color: #6aa63c; }

/* ---- Equipo / Asesorías como tarjetas de texto (foto + nombre + cargo) ---- */
.team-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 29px;                  /* 3×314 + 2×29 = 1000 (fila de 3); 2×314 + 29 = 657 (fila de 2) */
  max-width: 1000px;
  /* 88px tras el chip de seccion: antes eran 40, menos que los 64 que separan
     dos filas del mismo grupo, asi que la etiqueta quedaba mas pegada a la
     grilla que las filas entre si */
  margin: 88px auto 0;
}
.team-row-sep { margin-top: 64px; }
.team-card {
  width: 314px;               /* frame gris 314×336, todas iguales */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team-photo {
  width: 314px;
  max-width: 100%;
  aspect-ratio: 314 / 336;
  background: #cbcbcb;
  border-radius: 24px;
  overflow: hidden;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* con foto real no se muestra el fondo gris del marco (las fotos traen
   sus propias esquinas redondeadas y transparencia) */
.team-photo:has(img) { background: transparent; }
.team-card figcaption { margin-top: 22px; line-height: 1.3; }
.team-name {
  display: block;
  font-family: var(--font);           /* Outfit Regular 22 */
  font-weight: 400;
  font-size: clamp(16px, 1.55vw, 22px);
  color: #008340;
}
.team-role {
  display: block;
  font-family: var(--font);           /* Outfit Bold 22 */
  font-weight: 700;
  font-size: clamp(16px, 1.55vw, 22px);
  color: #008340;
}

@media (max-width: 820px) {
  .mv-grid { grid-template-columns: 1fr; gap: 28px; }
  .mv-card { border-radius: 32px; padding: 34px 32px; }
}

/* Asesorías técnicas externas: recuadro verde MUY tenue para diferenciarla de Equipo
   (el resto de la página queda en blanco) */
/* Banda verde tenue a lo ancho, esquinas cuadradas, desde Asesorías hasta el pie */
.asesorias {
  margin-top: 90px;
  padding: 73px 0 100px;
  background: rgba(123, 194, 80, 0.09);
}

.page-nosotros { background: #fff; }
.page-nosotros .nos-main,
.page-nosotros .site-header { background: transparent; }
.nos-main { background: #fff; }   /* Equipo y parte superior en blanco */
/* el mismo verde continúa en el pie de página */
.page-nosotros .site-footer.footer-light { background: rgba(123, 194, 80, 0.09); padding-top: 0; }

/* Footer claro (colores del SVG: negro con opacidades sobre blanco) */
.footer-light { background: #fff; }
.footer-light .footer-inner { border-top-color: rgba(0, 0, 0, 0.15); }
.footer-light .footer-logo { color: #000; }
.footer-light .footer-col h3,
.footer-light .footer-col .footer-title { color: #000; }
.footer-light .footer-tagline,
.footer-light .footer-col p,
.footer-light .footer-col a { color: rgba(0, 0, 0, 0.6); }
.footer-light .social-links a { color: rgba(0, 0, 0, 0.55); }
.footer-light .social-links a:hover,
.footer-light .footer-col a:hover { color: #0d7233; }

@media (max-width: 960px) {
  .mv-grid { grid-template-columns: 1fr; }
  .team-grid, .team-grid-2 { grid-template-columns: min(314px, 86vw); }
}

/* ---------- Página ¿Qué hacemos? ---------- */

.page-quehacemos,
.page-quehacemos .site-footer.footer-light { background: #fff; }

.qh-main { padding-top: 167px; background: #fff; }

.qh-intro {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
  margin-top: 45px;   /* chip → título */
}

.qh-intro h1 {
  font-family: var(--font);
  font-weight: 500;                /* Outfit Medium */
  font-size: clamp(23.68px, 2.153vw, 31px);   /* escala 1100 -> 1440 */
  line-height: 1.4;
  letter-spacing: -0.3039px;   /* -1% */
  color: #0d7233;
}

.qh-intro p {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(16.04px, 1.458vw, 21px);   /* escala 1100 -> 1440 */
  line-height: 1.4;
  letter-spacing: -0.2px;      /* -1% */
  color: #0d7233;
  max-width: 700px;
}

/* palabras destacadas en Outfit Medium dentro del intro de Qué hacemos */
.qh-intro p .hl-med {
  font-family: var(--font);
  font-weight: 600;
  color: inherit;
}

/* Proceso: tarjetas 266x226 (r20, gap 12/23) sobre la foto.
   Foto: empieza 128px bajo el inicio de las tarjetas, mide 489px de alto
   y sobresale 142px bajo la última fila. */
.proceso {
  position: relative;
  margin-top: 66px;       /* intro → tarjetas */
  padding-bottom: 142px;  /* la foto sobresale bajo la fila 2 */
  margin-bottom: 120px;
}

.proceso-bg {
  position: absolute;
  top: 128px;
  left: 0;
  right: 0;
  bottom: 0;   /* antes 489px fijos, calculados para 2 filas */
  background: url('assets/quehacemos-bg2.webp') center / cover no-repeat;
}

.proceso-grid {
  position: relative;
  display: grid;
  /* Ocupan el ancho de la pagina con la separacion original. Para que no queden
     apaisadas, la altura la fija la proporcion del diseno en .paso. */
  grid-template-columns: repeat(3, 1fr);
  gap: 23px 12px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 10.94vw, 140px);
}

.paso {
  display: flex;
  flex-direction: column;
  aspect-ratio: 266 / 226;   /* proporcion del diseno: crece a lo alto con el ancho */
  min-height: 226px;
  background: #e9f4e1;          /* verde claro de las tarjetas */
  border-radius: 20px;
  padding: clamp(18px, 1.9vw, 27px) clamp(19px, 2vw, 29px) clamp(19px, 2vw, 29px);
}
/* alterna en damero: con 3 columnas, par/impar basta (el patron 2,4,5,7 era
   para la matriz de 4 y dejaba las tarjetas 4 y 5 del mismo color, pegadas) */
.paso:nth-child(even) { background: #F3FAEF; }
.paso-num {
  font-family: var(--font);     /* Outfit Regular 48 */
  font-weight: 400;
  font-size: clamp(37.43px, 3.403vw, 49px);   /* escala 1100 -> 1440 */
  line-height: 1;
  color: #0d7233;
  margin-bottom: 32px;          /* el texto arranca a una altura fija en todas las tarjetas */
}
.paso-text {
  font-family: var(--font);     /* Outfit Regular 20 */
  font-weight: 400;
  font-size: clamp(17.19px, 1.562vw, 22.5px);   /* escala 1100 -> 1440 */
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #0d7233;
}

@media (max-width: 820px) {
  /* al bajar de columnas la tarjeta se ensancharia en vez de encoger:
     se le pone tope y el grid se centra */
  .proceso-grid { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
  /* aca la altura la manda el texto: manteniendo la proporcion cuadrada quedaba
     mucho aire debajo, porque el texto ocupa solo dos lineas */
  .paso { aspect-ratio: auto; min-height: 0; }
  .proceso-bg { height: 100%; top: 0; }
  .qh-intro { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .proceso-grid { grid-template-columns: minmax(0, 360px); justify-content: center; }
}

/* ---------- PROYECTOS (slider: foto con flechas + tarjeta de texto) ---------- */
.proy-main { padding-top: 167px; padding-bottom: clamp(120px, 14vw, 180px); background: #fff; }
.page-proyectos,
.page-proyectos .site-footer.footer-light { background: #fff; }   /* footer blanco, igual al fondo */

/* Contacto: mismo encabezado (píldora + lupa oscura) que Nosotros/Qué hacemos/Proyectos */
.page-contacto,
.page-contacto .site-footer.footer-light { background: #fff; }

/* ---------- Sombra tenue, compartida ----------
   La misma que llevan las tarjetas de Proyectos, aplicada a las demas cajas del
   sitio para que todas se despeguen del fondo igual. Se declara una sola vez:
   si hay que ajustarla, se cambia aca y no en cinco lugares. */
.mv-card,
.paso,
.proy-card {
  box-shadow: 0 10px 34px rgba(4, 49, 32, 0.10);
}
/* Las fotos del equipo quedan fuera a proposito: llevan las esquinas redondeadas
   con transparencia dentro del propio archivo, asi que la sombra dibujaba el
   borde del contenedor y aparecia un recuadro detras de cada retrato. */

/* ---------- Proyectos: galeria de tarjetas ----------
   La pagina lista los proyectos y cada tarjeta lleva a su propia pagina, donde
   estan el carrusel completo y el texto. */
.proy-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: clamp(28px, 3.4vw, 44px);
  max-width: 760px;
  margin-inline: auto;            /* centradas en el ancho del contenedor */
}
.proy-tarjeta {
  background: #fff;
  border-radius: 44px;            /* mismo radio que la tarjeta del carrusel */
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(4, 49, 32, 0.10);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1), box-shadow 0.28s ease;
}
.proy-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(4, 49, 32, 0.16); }
.pt-foto { display: block; aspect-ratio: 478 / 300; overflow: hidden; }
.pt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Las dos portadas tienen el horizonte a distinta altura. Se corrige el encuadre
   para que la linea del arbolado coincida entre ambas tarjetas. */
.pt-foto img.enc-abajo { object-position: center 22%; }
.pt-foto img.enc-arriba { object-position: center 78%; }
.pt-cuerpo { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pt-titulo { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); color: #0D7233; margin: 0; letter-spacing: -0.3px; }
.pt-titulo a { color: inherit; }
/* el enlace del titulo cubre la tarjeta entera: se puede tocar en cualquier parte */
.pt-titulo a::after { content: ""; position: absolute; inset: 0; }
.proy-tarjeta { position: relative; }
/* el texto pesa claramente menos que el titulo: ese contraste es el del diseno */
.pt-texto { font-family: var(--font); font-weight: 400; font-size: 15px; line-height: 1.5; color: #0D7233; margin: 0; }
.pt-texto strong { font-weight: 600; }
.pt-mas {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-size: 15px; font-weight: 500; color: #0D7233;
}
.pt-mas svg { width: 17px; height: 17px; transition: transform 0.25s ease; }
.proy-tarjeta:hover .pt-mas svg { transform: translateX(4px); }

/* volver, en la pagina de cada proyecto */
/* mismo tratamiento que el "Ver mas" de las tarjetas: texto y flecha, sin caja */
.proy-volver {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  color: #8a9691;                 /* gris tenue: es navegacion, no contenido */
  margin-bottom: 20px;
  transition: color 0.2s ease;
}
.proy-volver:hover { color: #0D7233; }
.proy-volver svg { width: 17px; height: 17px; transition: transform 0.25s ease; }
.proy-volver:hover svg { transform: translateX(-4px); }

/* Varios proyectos en la misma pagina: cada uno abre con su chip y se separa del
   anterior. Los chips son inline-flex, asi que sin esto quedarian uno al lado del
   otro en la misma linea; display:flex los hace de bloque y width:fit-content les
   conserva el ancho ajustado al texto. */
.proy-main .chip { display: flex; width: fit-content; }
.chip-proyecto { margin-top: clamp(64px, 8vw, 104px); }
/* el primero abre la pagina: sin margen, queda donde estaba cuando habia un solo proyecto */
.proy-main .container > .chip-proyecto:first-child { margin-top: 0; }
/* en la pagina de un proyecto el chip va despues del enlace "volver" */
.proy-volver + .chip-proyecto { margin-top: 0; }

.proy-slider {
  position: relative;                 /* las flechas se anclan a los costados del slider */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 8vw, 150px);
  margin-top: 48px;
}

/* frame foto 478x400 (escala en pantallas chicas) */
.proy-media {
  position: relative;
  height: clamp(280px, 34vw, 400px);
  aspect-ratio: 478 / 400;
  flex: 0 0 auto;
}

.proy-photo {
  position: absolute;          /* dos capas apiladas para crossfade */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.proy-photo.is-active { opacity: 1; }

/* Carrusel: sin flechas, click en mitades + puntos */
.proy-nav { display: none; }
.proy-zone { position: absolute; top: 0; bottom: 0; width: 30%; z-index: 3; background: none; border: 0; cursor: pointer; display: flex; align-items: center; }
.proy-zone-prev { left: 0; justify-content: flex-start; padding-left: 14px; }
.proy-zone-next { right: 0; justify-content: flex-end; padding-right: 14px; }
.proy-zone:hover .z-circle { opacity: 1; }
/* Barra segmentada sobre la foto: cuántas fotos hay, en cuál estás y cuánto falta
   para la siguiente (el segmento activo se llena durante el intervalo) */
.proy-segs { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; display: flex; justify-content: center; gap: 7px; }
/* punto que se estira en píldora al activarse; la píldora se llena como cuenta regresiva */
.proy-seg { flex: none; width: 9px; height: 9px; border-radius: 999px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
            background: rgba(255, 255, 255, 0.5); transition: width 0.35s ease, background 0.35s ease; }
.proy-seg.done { background: rgba(255, 255, 255, 0.8); }
.proy-seg.now { width: 58px; background: rgba(255, 255, 255, 0.32); }
.proy-seg i { display: block; height: 100%; width: 0; border-radius: 999px; background: #fff; }
.proy-seg.now i { animation: proyLlenar var(--proy-dur, 1800ms) linear forwards; }
@keyframes proyLlenar { from { width: 0; } to { width: 100%; } }
/* con el mouse encima se congela: no cambia la foto que estás mirando */
.proy-slider.pausa .proy-seg.now i { animation-play-state: paused; }

/* el chip del proyecto va pegado a su propio carrusel, no al de arriba */
.chip-proyecto + .proy-slider { margin-top: clamp(20px, 2.4vw, 32px); }

@media (prefers-reduced-motion: reduce) {
  .proy-seg { transition: none; }
  .proy-seg.now i { animation: none; width: 100%; }
}

.proy-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;                        /* más pequeñas */
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.proy-nav img { display: block; width: 100%; height: 100%; }
.proy-nav:hover { filter: brightness(1.04); transform: translateY(-50%) scale(1.1); }
.proy-prev { left: -57px; }          /* flanquean la foto con un pequeño aire (~17px) */
.proy-next { right: -57px; }

/* tarjeta de texto 413x400 (misma altura que la foto) */
.proy-card {
  flex: 0 0 auto;
  width: calc(clamp(280px, 34vw, 400px) * 413 / 400);
  min-height: clamp(280px, 34vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3FAEF;
  border-radius: 44px;
  padding: clamp(24px, 2.6vw, 40px);
}
.proy-text {
  font-family: var(--font);      /* Outfit Regular 20 */
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;              /* 140% */
  letter-spacing: -0.2px;        /* -1% */
  color: #0d7233;
  text-align: center;
}

/* palabras destacadas (como en el diseño): Medium */
.proy-text strong { font-weight: 500; }

@media (max-width: 900px) {
  .proy-slider { flex-direction: column; gap: 40px; }
  .proy-media, .proy-card { flex: 1 1 auto; width: 100%; }
  .proy-prev { left: 8px; }
  .proy-next { right: 8px; }
}

/* ---------- BUSCADOR (lupa del encabezado) ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(1, 48, 43, 0.30);
  backdrop-filter: blur(14px);            /* efecto vidrio, como el buscador del navegador */
  -webkit-backdrop-filter: blur(14px);
  display: none;
}

.search-overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
}

.search-box {
  width: min(560px, 90vw);
  background: rgba(255, 255, 255, 0.86);   /* caja translúcida tipo vidrio */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.search-box input {
  width: 100%;
  height: 47px;
  border-radius: 14px;
  border: 1px solid rgba(4, 49, 32, 0.25);
  background: var(--blanco-suave);
  padding: 0 18px;
  font-family: var(--font);
  font-size: 17px;
  color: var(--verde-oscuro);
  outline: none;
}

.search-box input:focus { border-color: rgba(4, 49, 32, 0.55); }

/* la ✕ para borrar la búsqueda, en el verde de la paleta */
.search-box input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230D7233" stroke-width="3.2" stroke-linecap="round"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>') center/contain no-repeat;
  cursor: pointer;
}

.search-results {
  list-style: none;
  margin-top: 6px;
  max-height: 320px;
  overflow: auto;
}

.search-results li a {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--verde-oscuro);
}

.search-results li a:hover { background: var(--verde-claro-bg); }

.search-results .sr-title { display: block; font-weight: 500; }

.search-results .sr-desc {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #5c6b66;
}

.search-empty { padding: 12px 14px; font-size: 15px; color: #5c6b66; }

/* ---------- Animaciones de entrada ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible { opacity: 1; transform: none; }

/* Hero: el título revela primero y el subtítulo un instante después */
.hero-content h1.reveal { transition-delay: 0.1s; }
.hero-copy.reveal { transition-delay: 0.28s; }

/* Hover: agrandar los frames de Misión/Visión y los pasos numerados de ¿Qué hacemos?
   (la transición cubre reveal + hover; el scale sólo aplica ya revelado) */
.mv-card,
.paso {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, opacity 0.7s ease;
}
.mv-card:hover,
.paso:hover {
  transform: scale(1.035);
  box-shadow: 0 22px 55px rgba(20, 60, 30, 0.14);
  z-index: 2;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .main-nav {
    top: 110px;
    left: 24px;
    right: 24px;
    transform: none;
    flex-direction: column;
    gap: 20px;
    background: rgba(255, 255, 255, 0.92);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav .nav-contact, .main-nav .nav-lang { display: block; }
  .header-actions .btn-yellow, .header-actions .lang-menu { display: none; }

  /* la lupa se pega al botón de 3 líneas en vez de quedar al centro */
  .header-actions { margin-left: auto; gap: 4px; }
  .site-header { gap: 6px; }

  /* selector de idioma dentro del menú desplegable */
  .main-nav .nav-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid rgba(194, 207, 205, 0.5);
  }
  .main-nav .nav-lang a {
    color: #9aa5a1;
    padding: 6px 10px;
    border-radius: 9px;
  }
  .main-nav .nav-lang a.is-active { font-weight: 500; color: #0d7233; }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }
  .menu-toggle span {
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  .hero-copy { margin-left: 0; }

  .stats { grid-template-columns: 1fr; margin-top: 60px; }
  .stat-2, .stat-3 { margin-top: 0; }
  .stat-plus { vertical-align: 13px; }

  .footer-inner { flex-direction: column; }
}