/* ==========================================================
   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 */
  --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; }

.chip {
  font-family: var(--font-display);
  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: 16px;
  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 a:hover { color: var(--amarillo); }

.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; }

/* Inglés en stand-by: ítem no navegable con badge "Coming soon" */
.lang-opt.lang-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #9aa5a1;
  cursor: default;
}
.lang-opt.lang-soon:hover { background: none; }
.lang-opt.lang-soon em {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0d7233;
  background: var(--verde-claro-bg);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.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) */
  padding: clamp(140px, 14vw, 178px) clamp(24px, 10.94vw, 140px) clamp(72px, 8vw, 104px);
}

.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: 341px;         /* caja del subtítulo (Figma) */
  margin-left: auto;
  margin-top: auto;         /* empuja el subtítulo abajo-derecha, como en la guía */
  font-size: 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; }

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

.enfoque {
  background: var(--verde-claro-bg);
  padding: 73px 0 69.5px;   /* 73 arriba del chip; 69.5 bajo el botón */
}

.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; }

.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-figure {
  position: relative;
  width: 269px;
  height: 420px;
  margin: 89px auto 0;   /* hojas a 198px del inicio de la sección (73 + 36 + 89) */
}

/* 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: 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: 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: 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: 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;
}

@media (max-width: 860px) {
  .contacto-banda p { font-size: 20px; }
  .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;
  transition: transform 0.3s ease;
}

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

/* 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: 100px;
  line-height: 1;
  color: var(--amarillo);
}

.stat-suffix { font-size: 70px; }

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

.stat-label {
  margin-top: 14px;
  font-family: var(--font);
  font-size: 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);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.stat-more:hover { transform: scale(1.15); }

/* ---------- 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: 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; }

.footer-col h3 {
  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: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;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.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');
}

.t-impacto .tile-glass {
  left: 0; bottom: 0; width: 240px; height: 194px;
  background: rgba(244, 223, 87, 0.4);
  clip-path: path('M119 1.5605e-05C53.2781 6.98658e-06 -6.98658e-06 53.2781 -1.5605e-05 119L-2.11126e-05 161C-2.35026e-05 179.225 14.7746 194 33 194L207 194C225.225 194 240 179.225 240 161L240 3.14722e-05L119 1.5605e-05Z');
}

.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 33, altura 78%, espaciado 0% */
.tile-title {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.3cqw;   /* 33px sobre base 1000: escala con el ancho del collage */
  line-height: 0.95;
  letter-spacing: 0;
  color: #EAF4F0;
  text-align: left;
  pointer-events: none;
}

/* posiciones medidas del diseño original */
.t-cultivos .tile-title   { left: 8.1cqw; bottom: 4.6cqw; }
.t-frutales .tile-title   { left: 33.1cqw; top: 10.5cqw; }
.t-impacto .tile-title    { left: 4.3cqw; bottom: 6cqw; color: #043120; }   /* verde oscuro exacto del diseño (#043120) */
.t-riego .tile-title      { left: 3.5cqw; top: 9.4cqw; }
.t-innovacion .tile-title { left: 2.7cqw; bottom: 3.9cqw; }

/* 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: 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 */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 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:hover span { background: var(--amarillo); color: var(--verde-oscuro); transform: rotate(90deg); }

/* 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-chip {
  display: inline-block;
  font-family: var(--font-display);   /* Batica Sans Regular 20 */
  font-weight: 400;
  font-size: 20px;
  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: 24px;
  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;
  margin: 40px 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: 22px;
  color: #008340;
}
.team-role {
  display: block;
  font-family: var(--font);           /* Outfit Bold 22 */
  font-weight: 700;
  font-size: 22px;
  color: #008340;
}

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

/* 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 { 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: 30.39px;
  line-height: 1.4;
  letter-spacing: -0.3039px;   /* -1% */
  color: #0d7233;
}

.qh-intro p {
  font-family: var(--font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.2px;      /* -1% */
  color: #0d7233;
  max-width: 700px;
}

/* 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;
  height: 489px;
  background: url('assets/quehacemos-bg2.webp') center / cover no-repeat;
}

.proceso-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 266px);
  gap: 23px 12px;
  justify-content: center;
}

.paso {
  display: flex;
  flex-direction: column;
  width: 266px;
  min-height: 226px;
  background: #e9f4e1;          /* verde claro de las tarjetas */
  border-radius: 20px;
  padding: 22px 24px 24px;
}
/* alterna: tarjetas 2, 4, 5 y 7 en un verde más claro */
.paso:nth-child(2),
.paso:nth-child(4),
.paso:nth-child(5),
.paso:nth-child(7) { background: #F3FAEF; }
.paso-num {
  font-family: var(--font);     /* Outfit Regular 48 */
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  color: #0d7233;
  margin-bottom: 30px;          /* 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: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #0d7233;
}

@media (max-width: 1180px) {
  .proceso-grid { grid-template-columns: repeat(2, 266px); }
  .proceso-bg { height: 100%; top: 0; }
  .qh-intro { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .proceso-grid { grid-template-columns: min(266px, 88vw); }
}

/* ---------- 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; }

.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; }

.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: 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; }
  .proy-text { font-size: 20px; }
}

/* ---------- 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; }

  .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; }
  /* en móvil se reducen proporcionalmente */
  .stat-number { font-size: 68px; }
  .stat-suffix { font-size: 48px; }
  .stat-plus { font-size: 33px; vertical-align: 13px; }

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