/* ============================================================
   INSUMOS ESCOBAGRO — Hoja de estilos (sistema FLUIDO)
   Todo escala con la pantalla: anchos con min()/%, espaciado y
   tipografía con clamp(), medios con object-fit/alturas fluidas.
   ============================================================ */

/* ---------- Fuente auto-alojada (Montserrat variable, WOFF2) ----------
   Un solo archivo cubre todos los grosores (100–900). Archivo:
   "Montserrat-Variable.woff2" en assets/comunes/fuentes/. */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/comunes/fuentes/Montserrat-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables / Tokens ---------- */
:root {
  /* ============================================================
     PALETA DE MARCA — rampa Verde → Lima → Amarillo
     Derivada de los 3 cromáticos de la paleta Escobagro.
     ============================================================ */
  --verde-profundo:  #036b2b;  /* 1 · verde profundo (footer / UI oscura) */
  --verde:           #04953f;  /* 2 · verde de marca (primario)          */
  --verde-lima:      #5cb91e;  /* 3 · puente verde→lima (secundario)     */
  --lima:            #b1f911;  /* 4 · lima brillante (highlights)        */
  --amarillo:        #ffcf00;  /* 5 · amarillo de marca (acento / CTA)   */

  /* ---- Alias semánticos (compatibilidad con el resto del CSS) ---- */
  --green-dark:   var(--verde-profundo);
  --green-deep:   #024d20;           /* hover sobre verde profundo */
  --green-bright: var(--verde-lima);

  /* ---- Neutros cálidos (verdosos) ---- */
  --ink:          #1d2a14;
  --muted:        #6a7360;
  --line:         #e7eadf;
  --bg:           #ffffff;
  --surface:      #eef6f0;  /* verde-gris casi blanco, derivado de --verde #04953f */

  --pill-bg:      rgba(4, 149, 63, 0.42);   /* verde de marca, más claro */
  --pill-bg-hover:rgba(4, 149, 63, 0.62);

  /* Tokens fluidos */
  --container:    min(92%, 1240px);          /* ancho central adaptable */
  --gutter:       clamp(1rem, 2.4vw, 1.75rem);
  --section-y:    clamp(2.25rem, 4.5vw, 3.75rem);  /* padding vertical de secciones */
  /* Tamaño único del título de cada página. Antes cada página traía el
     suyo —de 1,5rem a 4,4rem— y no había dos iguales. La medida sale del
     título del legado (nosotros.html), que es la que se tomó de patrón.
     Se cambia aquí y cambian todas. */
  --titulo-pagina: clamp(2.2rem, 5vw, 4rem);
  --header-h:     clamp(64px, 7vw, 92px);

  /* ---------- Unidad de alto de viewport (compatibilidad con Safari) ----------
     En el móvil la barra de direcciones aparece y desaparece al hacer scroll,
     así que "el alto de la ventana" son dos números distintos. 1svh mide contra
     la ventana PEQUEÑA (con la barra a la vista), que es lo que se quiere: algo
     dimensionado en svh nunca queda tapado por la barra al cargar.

     El problema es que Safari no entendió svh hasta la versión 15.4 (marzo de
     2022), y en CSS una declaración con una unidad desconocida no se ignora a
     medias: se DESCARTA ENTERA. Un "min-height: 100svh" en un Safari viejo no
     deja un alto aproximado, deja la propiedad sin poner — y con ella se cae la
     maqueta de la página de sedes, que reparte todo por altura.

     Por eso la unidad vive aquí: el valor base es vh, que entiende cualquier
     navegador, y el @supports de abajo lo sustituye por svh solo donde exista.
     En el CSS se escribe  calc(N * var(--svh))  en vez de  Nsvh.

     La diferencia entre ambas es la altura de la barra de direcciones, y solo
     en móvil: en escritorio vh y svh valen exactamente lo mismo. */
  --svh: 1vh;

  /* El hueco bajo el header en una página SIN hero a pantalla completa.
     El header es fijo (position: fixed), así que no ocupa sitio en el
     flujo: sin este margen el contenido arranca debajo de él y el título
     de la página queda medio tapado.

     Es una medida sola para todo el sitio. Antes estaba escrita a mano,
     igual, en siete reglas distintas (productos, cultivos, servicios,
     galería, contacto, carrito y las guías de cultivo); al añadir una
     página nueva había que acordarse de repetirla, y si alguna vez se
     quisiera cambiar el aire de la cabecera habría que tocar las siete
     y no olvidarse de ninguna. Ahora se cambia aquí y cambia en todas.

     DOS EXCEPCIONES, y las dos a propósito (ver sus reglas):
       · .page-sedes main — más ajustado, para que el mapa de Colombia
         quepa entero en un portátil sin obligar a hacer scroll.
       · .legado-text     — nosotros.html empieza con su propia foto a
         sangre, no con un título sobre fondo blanco. */
  --tope-pagina:  calc(var(--header-h) + var(--section-y));

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, sans-serif;

  /* Escala de radios — fluida. En el resto del CSS se usan estos tokens,
     nunca px sueltos (salvo bordes finos, que deben quedar nítidos). */
  --radius-sm:    clamp(6px, .8vw, 10px);    /* chips / etiquetas pequeñas */
  --radius:       clamp(12px, 1.4vw, 18px);  /* base: campos, tarjetas medianas */
  --radius-lg:    clamp(14px, 1.8vw, 22px);  /* botones-caja, fotos, barras */
  --radius-xl:    clamp(18px, 2vw, 26px);    /* tarjetas grandes, formulario */
  --radius-pill:  999px;                     /* píldoras (siempre redondo) */

  /* Iconos del carrito como MÁSCARA y no como <svg> en el marcado: el
     portafolio pinta 500 tarjetas de una vez y llevar el trazo —el del
     carrito y el de "ya agregado"— dentro de cada una sumaba más de
     200 KB de HTML para dibujar siempre el mismo dibujo. Así el color lo
     pone currentColor y cambiar de estado es cambiar una variable. */
  --ico-cart:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 3.5h2.4l2.2 11.1a1.7 1.7 0 0 0 1.7 1.4h8.4a1.7 1.7 0 0 0 1.7-1.3L20.6 7H5.4'/><circle cx='9.5' cy='20' r='1.5'/><circle cx='17.5' cy='20' r='1.5'/></svg>");
  --ico-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.6l5 5 10-10.6'/></svg>");
  --shadow:       0 10px 30px rgba(0,0,0,.12);
}

/* Donde svh exista (Safari 15.4+, y Chrome/Firefox desde hace años), la unidad
   pasa a ser la buena. Donde no, se queda el vh de arriba y la página se ve
   igual salvo por la altura de la barra de direcciones del móvil. */
@supports (height: 1svh) {
  :root { --svh: 1svh; }
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Quita el recuadro/tono azulado que los navegadores móviles
     dibujan al tocar enlaces y botones. */
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  /* iOS agranda por su cuenta el texto de algunos bloques al girar el
     teléfono a horizontal ("text inflation"). Lo hace sobre el tamaño ya
     calculado, así que una maqueta que cuadra en vertical aparece con las
     letras desbordando su caja en horizontal. Con 100% se le dice que
     respete el tamaño que pide el CSS y no invente. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Solo para lectores de pantalla: títulos que la maqueta no muestra
   (el hero de la portada es una imagen, sin titular visible). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Primer tabulador de la página: invisible hasta que el teclado lo enfoca.
   Con el header fijo y el menú por delante, sin esto llegar al contenido
   cuesta media docena de tabulaciones en cada página. */
.skip-link {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 300;
  transform: translateY(-160%);
  background: var(--verde-profundo);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: .75em 1.4em;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: transform .18s ease;
}
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* El foco del teclado nunca debe quedar invisible. El sitio no quita
   ningún outline, pero varios controles van sobre foto o sobre verde,
   donde el azul del navegador se pierde: se les da uno propio. */
.pill:focus-visible,
.btn-blue:focus-visible,
.btn-submit:focus-visible,
.cultivo-card:focus-visible,
.product-card-link:focus-visible,
.prod-item:focus-visible,
.serv-cta:focus-visible,
.sede-cta:focus-visible,
.eng-wa:focus-visible,
.linea-btn:focus-visible,
.car-arrow:focus-visible,
.whatsapp-fab:focus-visible,
.header-cart:focus-visible,
.prod-add:focus-visible,
.btn-cotizar:focus-visible,
.feno-back:focus-visible,
.main-nav a:focus-visible,
.footer-col a:focus-visible,
.contact-list a:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Rebote de los extremos: el "despegue" de iOS ----------
   En iPhone/iPad, al llegar al tope y seguir tirando, Safari sigue
   moviendo el contenido: el header es fijo y se queda quieto, así que el
   contenido se DESPEGA de él; y al final de la página asoma una franja
   blanca bajo el footer. En Android el scroll se para en seco al llegar
   al borde, y por eso allí el footer "está fijo" por más que se insista.

   overscroll-behavior-y: none apaga ese arrastre y deja el mismo tope
   duro en los dos sistemas.

   POR QUÉ VA DENTRO DE UN @supports Y NO SUELTO
   ---------------------------------------------
   Ese arrastre y el "tirar hacia abajo para recargar" son el MISMO
   mecanismo, y el gesto lo tienen los dos sistemas: apagarlo sin acotar
   dejaría también a Android sin recargar tirando. En iPhone no se echa
   de menos —la recarga está en el botón de la barra—, pero en Android es
   el gesto de siempre, así que allí se deja como estaba.

   -webkit-touch-callout es una propiedad que solo existe en el WebKit de
   iOS: no la soportan ni Chrome/Firefox de Android ni el Safari de macOS.
   Por eso sirve de interruptor "esto es un iPhone o un iPad". Alcanza
   también a Chrome y Firefox de iOS, que por dentro son el mismo Safari
   y rebotan igual — que es justo lo que se quiere.

   Solo el eje Y: overscroll-behavior-x debe quedarse como está, porque
   es el que gobierna el gesto de deslizar al lado para ir atrás.

   Safari lo entiende desde la 16 (2022); en un iOS más viejo el rebote
   seguirá, sin romper nada. */
@supports (-webkit-touch-callout: none) {
  html, body { overscroll-behavior-y: none; }
}

/* ---------- ...y el mismo rebote en el escritorio de macOS ----------
   El rebote elástico del Mac no es cosa de Safari: lo hacen los TRES
   navegadores, porque es convención del sistema. Sin esto el contenido
   se despegaría del header igual que en el iPhone, solo que con el
   trackpad.

   El filtro es "ratón o trackpad de verdad": hover real y puntero fino.
   Eso deja fuera a los teléfonos y tablets —Android se queda con su
   gesto de recargar tirando, que es lo que se quería conservar— y
   alcanza a Mac, Windows y Linux. En los dos últimos no hay rebote que
   apagar y la regla no hace nada; se dejan dentro porque el filtro
   describe una FORMA DE APUNTAR, no una marca, y así no hay que
   mantener una lista de sistemas.

   En escritorio esto no cuesta ninguna función: el gesto de "tirar para
   recargar" no existe con ratón, y el de ir atrás deslizando al lado va
   por el eje X, que aquí no se toca. */
@media (hover: hover) and (pointer: fine) {
  html, body { overscroll-behavior-y: none; }
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Safari / iOS: quita el aspecto nativo (sombra interna, esquinas y flechas
   propias) de los controles para que respeten el estilo del sitio. */
input, textarea, button, select {
  -webkit-appearance: none;
  appearance: none;
}
input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }

/* ---------- Placeholder de imagen reutilizable ----------
   Reemplazar cada .media-ph por <img>/<video> con:
   width:100%; height:100%; object-fit:cover;  (mantiene calidad y llena) */
.media-ph {
  position: relative;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #eef1ec 0 12px, #e7ebe4 12px 24px);
  border: 1px dashed #c4cdbb;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* El MISMO nombre de clase se usa en dos cosas distintas: el recuadro
   rayado de "foto pendiente" (un <div>) y la foto de verdad cuando llega
   (un <img>). Sin esta regla el <img> heredaba el degradado rayado y el
   borde punteado del placeholder: el borde se colaba por encima de la foto
   (se veía en el círculo de las guías fenológicas) y el navegador pintaba
   un degradado repetido de 45° detrás de cada imagen para nada.
   Aquí el <img> se queda solo con lo que necesita —llenar su hueco sin
   deformarse— y de paso deja de hacer falta repetir
   style="width:100%;height:100%;object-fit:cover" en cada etiqueta. */
img.media-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: none;
  border: 0;
  display: block;
}

.media-ph::after {
  content: attr(data-ph);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .04em;
  color: #8a9580;
  text-align: center;
  padding: 0 6%;
}

/* ---------- Tipografía display ---------- */
.display-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.02;
}
.display-title.light { color: #fff; }

/* ---------- Botón pill (translúcido) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  letter-spacing: .02em;
  color: #fff;
  background: var(--pill-bg);
  padding: 0.9em 2em;
  border-radius: var(--radius-pill);
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.pill:hover { background: var(--pill-bg-hover); transform: translateY(-1px); }
.pill-lg { font-size: clamp(1rem, 1.3vw, 1.15rem); padding: 1em 2.3em; }
.pill-card { font-size: clamp(0.8rem, 1vw, 0.88rem); padding: 0.7em 1.5em; }

/* El blur de las pastillas solo en escritorio: en móvil obliga al navegador a
   recalcular el desenfoque en cada fotograma del scroll (scroll "trabado").
   Sin blur se compensa subiendo un poco la opacidad del fondo. */
@media (hover: hover) and (pointer: fine) {
  .pill { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .pill-card { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
}
@media not all and (pointer: fine) {
  .pill { background: rgba(4, 149, 63, 0.58); }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: linear-gradient(to bottom, rgba(8,22,12,.95) 0%, rgba(8,22,12,.7) 55%, rgba(8,22,12,0) 100%);
  border-bottom: 0;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* Oculto al hacer scroll hacia abajo; reaparece al subir */
.site-header.header-hidden {
  transform: translateY(-100%);
}
.header-inner {
  width: var(--container);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Marca */
.brand { display: flex; align-items: center; }
.brand-logo {
  height: clamp(40px, 5vw, 58px);
  width: auto;
  display: block;
}

/* Nav */
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: clamp(1.1rem, 2.7vw, 2.4rem); }
.main-nav a {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: #fafaf7;
  letter-spacing: .01em;
  position: relative;
  transition: color .2s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -.4em;
  width: 0; height: 2px; background: var(--green-bright);
  transition: width .25s ease;
}
.main-nav a:hover::after { width: 100%; }
/* Página actual: la franja queda fija para indicar en qué sección estás */
.main-nav a[aria-current="page"]::after { width: 100%; }

/* Carrito del header.
   Vive FUERA de .main-nav (ver js/components.js): en móvil el menú se
   pliega tras la hamburguesa y el carrito tiene que seguir visible con su
   contador. En PC queda a la derecha de "Contáctanos". */
.header-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fafaf7;
  transition: color .2s ease, background-color .2s ease;
}
.header-cart svg { width: clamp(22px, 2.2vw, 25px); height: auto; }
.header-cart:hover { color: var(--amarillo); background: rgba(255,255,255,.1); }
.header-cart[aria-current="page"] { color: var(--amarillo); }

/* El contador. Solo aparece con algo dentro (js/carrito.js le pone [hidden]
   cuando está vacío), y el aro oscuro lo despega del icono al superponerse. */
.cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--amarillo);
  color: #1d2a14;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px rgba(8,22,12,.8);
}
.cart-badge[hidden] { display: none; }

/* Toggle móvil */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; height: 3px; width: 26px; background: #fafaf7; border-radius: 3px; transition: .25s; }

/* ============================================================
   HERO  (banner PEGAJOSO al fondo — efecto reveal)
   sticky en vez de fixed: mismo efecto (se queda pinneado arriba y
   el contenido se desliza encima), pero al estar EN el flujo viaja
   con el rebote elástico de Safari (iOS/macOS) y no asoma tras el
   footer al hacer overscroll. Además el <main> ya no necesita un
   margin-top que "adivine" el alto del hero.
   ============================================================ */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;                 /* detrás del contenido que se desliza */
  /* Alto realmente VISIBLE con la barra de URL a la vista (iOS): el hero
     cabe entero al cargar. La unidad --svh trae su propio respaldo. */
  height: calc(100 * var(--svh));
  min-height: clamp(480px, 70vw, 720px);
  transform: translateZ(0);   /* capa de compositing propia: deslizamiento fluido */
  backface-visibility: hidden;
}
/* Cada foto del hero es un slide apilado: todas ocupan el mismo hueco y
   solo la que lleva .is-on está visible. El cambio lo maneja js/hero.js.
   --hero-pos es el encuadre; si una foto nueva queda mal recortada, se
   ajusta aquí una sola vez (p. ej. "center 50%"). */
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, center 35%);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-media.is-on { opacity: 1; }
/* Relevo sin fundido. Se pone un instante cuando el cambio lo pidió una
   persona con las bolitas: así su foto entra ya, en vez de asomar por
   encima de la anterior durante algo más de un segundo. */
.hero-media.sin-fundido { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-media { transition: none; }
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.15) 100%);
}
.hero-content { position: absolute; right: 6%; bottom: 14%; }

/* Bolitas del hero: una por foto, para cambiarla a mano y para que se vea
   de entrada que hay más de una imagen. Las pinta js/hero.js y solo
   aparecen cuando hay dos o más fotos en assets/index/hero/. */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 4vh, 2.4rem);
  transform: translateX(-50%);
  z-index: 2;                 /* por encima del degradado del hero */
  display: flex;
  /* Sin animación de entrada, a propósito. Las bolitas las crea
     js/hero.js justo cuando ya sabe qué fotos hay, así que no hay nada
     que ocultar antes. Y un fundido de entrada aquí es una trampa: una
     pestaña en segundo plano no anima nada, así que la animación se
     queda clavada en su primer fotograma —opacidad 0— y las bolitas no
     aparecen hasta que alguien mira la pestaña. Se ven y ya está. */
}
.hero-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  /* La bolita se ve de 11px, pero el botón mide 34: el área de toque
     cómoda en un teléfono no cabe en un punto de 11px. */
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
}
.hero-dot::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: background .25s ease, transform .25s ease;
}
.hero-dot[aria-current="true"]::before { background: #fff; transform: scale(1.35); }

/* Bolita pulsada cuya foto todavía viene por la red: late despacio para
   que se note que el clic SÍ se registró. Casi nunca se ve, porque las
   fotos del ciclo se van bajando de fondo; solo aparece con conexión
   lenta o si se pulsa una bolita muy por delante. */
.hero-dot.is-loading::before { animation: hero-dot-late 1s ease-in-out infinite; }
@keyframes hero-dot-late {
  0%, 100% { background: rgba(255,255,255,.45); transform: scale(1); }
  50%      { background: #fff;                  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dot.is-loading::before { animation: none; background: #fff; }
}
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: -7px; }
@media (hover: hover) and (pointer: fine) {
  .hero-dot:hover::before { background: rgba(255, 255, 255, .8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dot::before { transition: none; }
}

/* Contenido que se monta sobre el hero al hacer scroll.
   Con el hero sticky (en flujo) ya no hace falta margin-top: el main
   sigue al hero de forma natural y las alturas siempre coinciden. */
main {
  position: relative;
  z-index: 1;
  background: var(--bg);      /* fondo opaco: tapa el hero al subir */
}
.site-footer { position: relative; z-index: 1; }

/* ============================================================
   SERVICIOS  (banner)
   ============================================================ */
.servicios {
  position: relative;
  min-height: clamp(300px, 40vw, 460px);
  display: grid;
  place-items: center;
}
.servicios-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.servicios-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.servicios-content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
}
.servicios-content .display-title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.servicios-cards {
  position: absolute;
  inset: auto 0 clamp(1.5rem, 3vw, 2.3rem) 0;
  display: flex;
  justify-content: space-between;
  padding: 0 6%;
  pointer-events: none;
}
.servicios-cards .pill { pointer-events: auto; }

/* ============================================================
   PORTAFOLIO POR CULTIVOS  (mosaico fluido)
   ============================================================ */
/* Franja verde de ancho completo: divide Productos (blanco) · Cultivos
   (verde) · Certificaciones (blanco). El mosaico queda centrado dentro. */
.cultivos {
  background: var(--surface);
  width: 100%;
  padding: var(--section-y) 0;
}
.cultivos-grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(16px, 2.2vw, 30px);  /* la fila escala con la pantalla */
  gap: 0;
}
.cultivos-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin: clamp(2.5px, 0.35vw, 4.5px);
  align-self: center;
}
.cultivo-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
  margin: clamp(2.5px, 0.35vw, 4.5px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cultivo-card:hover, .cultivo-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.22); }
.cultivo-card .media-ph { border-radius: var(--radius); border-color: transparent; }
.cultivo-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  pointer-events: none;
}

/* ============================================================
   PÁGINA · CULTIVOS  (cultivos.html)
   Mismo mosaico de la portada, con la intro ocupando la celda
   del título y el espacio del header fijo arriba.
   ============================================================ */
.page-cultivos main { margin-top: 0; }
.cultivos-page {
  background: #fff;   /* la página propia de cultivos va sobre blanco */
  padding-top: var(--tope-pagina);
}
/* El h1 de cultivos.html. Lleva .display-title, que es una clase de
   tipografía sin tamaño propio, así que hasta ahora este título salía con
   el tamaño por defecto del navegador. El selector se ancla en
   .cultivos-intro para no alcanzar los h2 de la portada, que usan la
   misma clase y tienen su propia escala. */
.cultivos-intro .display-title { font-size: var(--titulo-pagina); }
.cultivos-intro {
  margin: clamp(2.5px, 0.35vw, 4.5px);
  align-self: center;
  padding-right: clamp(1rem, 2.5vw, 2.4rem);
}
.cultivos-intro .lead {
  margin-top: clamp(0.8rem, 1.6vw, 1.2rem);
  color: var(--muted);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  max-width: 40ch;
  text-wrap: pretty;
}

/* ============================================================
   PRODUCTOS MÁS BUSCADOS
   ============================================================ */
.productos {
  background: var(--bg);
  padding: var(--section-y) 0;
  text-align: center;
}
.productos-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--ink);
  letter-spacing: .01em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
}

/* Carrusel */
.carousel {
  /* El hueco entre tarjetas vive aquí porque lo necesitan las dos: el
     carril para separarlas y la tarjeta para descontarlo de su ancho. Sin
     ese descuento, cuatro tarjetas al 25% más sus huecos suman MÁS que el
     carril y la cuarta queda cortada. */
  --car-gap: clamp(.55rem, 1.2vw, 1rem);
  position: relative;
  width: var(--container);
  margin-inline: auto;
  padding: 0 clamp(48px, 6vw, 72px);
  display: flex;
  align-items: center;
}
.car-track {
  flex: 1;
  display: flex;
  gap: var(--car-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Más aire abajo que arriba: la sombra del hover cae hacia abajo y el
     carril, al tener overflow, recortaría la cola. */
  padding: .625rem 0 1.5rem;
}
.car-track::-webkit-scrollbar { display: none; }
/* En un móvil, deslizar el carrusel hasta el tope encadenaba el gesto con
   la página: el scroll se iba al eje vertical a mitad de movimiento y, en
   iOS, llegaba a disparar el "volver atrás" del borde. Con
   overscroll-behavior el gesto se queda dentro del carril. */
.car-track { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Misma ficha que el portafolio (.prod-item): recuadro blanco, borde fino
   y el mismo gesto al pasar por encima. Antes las fotos flotaban sueltas
   sobre el fondo y la sección no se leía como un listado de productos. */
.product-card {
  /* Cuatro enteras por pantalla, huecos incluidos. */
  flex: 0 0 calc((100% - 3 * var(--car-gap)) / 4);
  scroll-snap-align: start;
  position: relative;            /* ancla del botón de agregar al carrito */
  display: flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(.85rem, 1.3vw, 1.15rem);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-card:hover {
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(29,42,20,.10);
  transform: translateY(-2px);
}
/* El enlace es quien ordena el contenido: el botón de agregar es hermano
   suyo, no hijo, para no anidar un <button> dentro de un <a>. */
.product-card-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.product-img {
  width: 100%;
  height: clamp(170px, 17vw, 250px);  /* fluido */
  border: 0;
  background: transparent;
  /* contain y no cover, igual que en el portafolio: son fotos del producto
     sobre fondo blanco y recortarlas les cortaría la etiqueta. */
  object-fit: contain;
}
.cat-pill {
  margin-top: .375rem;
  font-weight: 600;
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  letter-spacing: .04em;
  color: #fff;
  background: var(--verde-profundo);
  padding: 0.4em 1.1em;
  border-radius: var(--radius-sm);
}
.product-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  margin-top: 0.8em;
  color: var(--ink);
}
.product-sub {
  font-weight: 500;
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 0.6em;
}

/* Flechas del carrusel */
.car-arrow {
  position: absolute;
  top: 36%;
  z-index: 3;
  width: clamp(44px, 4.4vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #2f2f2f;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.car-arrow:hover { background: #f0f0f0; transform: scale(1.06); }
.car-prev { left: 0; }
.car-next { right: 0; }

/* Botón azul */
.productos-action { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #fff;
  background: var(--green-dark);
  padding: 0.9em 2.1em;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(46,125,18,.32);
  transition: background .2s ease, transform .2s ease;
}
.btn-blue:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn-blue .arr { font-size: 1.15em; }

/* ============================================================
   CERTIFICACIONES
   ============================================================ */
.certificaciones {
  background: var(--bg);
  width: var(--container);
  margin-inline: auto;
  padding: var(--section-y) 0;
  text-align: center;
}
.certificaciones > .display-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cert-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
.cert-item {
  width: clamp(240px, 28vw, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cert-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--verde-profundo);
  color: #e8e8e8;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.footer-inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.footer-brand { display: flex; align-items: center; }
.footer-logo {
  height: clamp(54px, 6.5vw, 80px);
  width: auto;
  display: block;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: #fff;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
  padding-left: 0.6em;
  border-left: 4px solid var(--green-bright);
  line-height: 1;
}
.footer-col ul { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.2vw, 0.9rem); }
.footer-col a {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #d8d8d8;
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--green-bright); }

.footer-contact { align-self: start; }
.footer-contact h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: #fff;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
  padding-left: 0.6em;
  border-left: 4px solid var(--green-bright);
  line-height: 1;
}
.contact-list { display: flex; flex-direction: column; gap: clamp(0.9rem, 1.6vw, 1.2rem); }
.contact-list li { display: flex; flex-direction: column; gap: 0.15em; }
.contact-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.78rem, 1vw, 0.85rem);
  letter-spacing: .02em;
  color: var(--amarillo);
}
.contact-list a,
.contact-text {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #d8d8d8;
  line-height: 1.4;
  transition: color .2s ease;
}
.contact-list a:hover { color: var(--green-bright); }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */
.whatsapp-fab {
  position: fixed;
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 26px);
  z-index: 200;
  width: clamp(54px, 5vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab svg { width: 55%; height: auto; }
.whatsapp-fab:hover { box-shadow: 0 6px 16px rgba(0,0,0,.24); }

/* ============================================================
   AVISO DEL CARRITO
   El header se esconde al bajar, así que el contador puede no estar a la
   vista justo cuando se agrega un producto desde el portafolio: sin este
   aviso el clic se quedaría sin respuesta visible. Se coloca JUSTO ENCIMA
   del botón de WhatsApp para no taparlo (su alto + los dos márgenes).
   ============================================================ */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(16px, 2vw, 26px) * 2 + clamp(54px, 5vw, 62px));
  z-index: 210;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: min(90vw, 440px);
  padding: .8em 1.2em;
  border-radius: var(--radius-pill);
  background: rgba(8,22,12,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fafaf7;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem);
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  transform: translate(-50%, 130%);
  opacity: 0;
  visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease, visibility .28s;
}
.cart-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.cart-toast-txt { min-width: 0; }
.cart-toast-link {
  flex: 0 0 auto;
  color: var(--lima);
  font-weight: 800;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-toast-link:hover { color: #fff; }

/* Accesibilidad + rendimiento: sin movimiento innecesario si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   RESPONSIVE (puntos de quiebre de reacomodo, no de tamaño)
   ============================================================ */
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: .625rem; }
  .footer-contact { grid-column: 1 / -1; justify-self: start; margin-top: .625rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* Menú móvil: tarjeta FLOTANTE (estilo invertido) con la misma
     transparencia oscura del header. */
  .main-nav {
    position: fixed;
    top: calc(var(--header-h) + .625rem);
    inset-inline: .875rem;
    border-radius: var(--radius-lg);
    background: rgba(8,22,12,.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    margin: 0;
    overflow: hidden;
    transform-origin: top center;
    transform: translateY(-.75rem) scale(.97);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease, visibility .28s;
  }
  .main-nav.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
  }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0; }
  .main-nav a { color: #fafaf7; padding: 1em 7%; display: block; }
  .main-nav li + li a { border-top: 1px solid rgba(255,255,255,.07); }
  .main-nav a::after { display: none; }

  /* .main-nav sale del flujo (queda fija), así que en la barra solo
     quedan marca, carrito y hamburguesa. El orden explícito los deja en
     ese orden: el carrito empuja, la hamburguesa cierra a la derecha. */
  .header-cart { order: 2; margin-left: auto; }
  .nav-toggle  { order: 3; margin-left: .15rem; }

  .product-card { flex: 0 0 calc((100% - var(--car-gap)) / 2); }   /* dos enteras */
  .carousel { padding: 0 clamp(40px, 8vw, 56px); }

  .cultivos-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .cultivos-grid .cultivo-card {
    grid-area: auto !important;
    height: clamp(150px, 38vw, 220px);
  }
  .cultivos-title,
  .cultivos-intro {
    grid-area: auto / 1 / auto / -1 !important;
    align-self: auto;
    margin-bottom: clamp(1rem, 3vw, 1.6rem);
  }
}

@media (max-width: 560px) {
  /* En móvil las dos opciones bajan al flujo, debajo de "Conoce más".
     position: relative y NO static: la foto de fondo y su velo son
     absolutos —es decir, posicionados— y un elemento posicionado se pinta
     siempre por encima de sus hermanos en flujo normal. Con static las dos
     opciones seguían ahí, ocupando su sitio, pero enterradas bajo la
     imagen: en el teléfono la sección parecía tener solo el botón.
     Se conserva el reparto de PC: una opción pegada a la izquierda y otra a
     la derecha. */
  .servicios-cards {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 6% 0;
  }
  /* En pantallas muy estrechas el rótulo se parte en dos líneas en vez de
     desbordarse: así las dos opciones mantienen su sitio a lado y lado
     —que es como se ven en PC— por angosto que sea el teléfono. */
  .servicios-cards .pill {
    padding-inline: 1.3em;
    white-space: normal;
    text-align: center;
  }
  .servicios { padding-bottom: 1.8rem; }

  .product-card { flex: 0 0 100%; }   /* una sola, a pantalla completa */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cert-item { width: 100%; }
}

/* ============================================================
   PÁGINA CONTACTO
   ============================================================ */
/* El header es idéntico al de inicio (degradado oscuro transparente).
   Aquí se apoya sobre el banner verde en lugar del hero, igual que en
   index el header se apoya sobre la foto del hero. */

/* Sin hero ni banner en esta página: el <main> no reserva 100vh; el
   contenido arranca bajo el header fijo con el ritmo de --section-y. */
.page-contacto main {
  margin-top: 0;
}


.contacto-wrap {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: var(--tope-pagina) 0 var(--section-y);
  align-items: start;
}

/* Bloque de información */
.contacto-info h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--titulo-pagina);
  color: var(--ink);
  letter-spacing: .02em;
  padding-left: .6em;
  /* El grosor en em y no en px: la barra medía 4px fijos y al pasar el
     título de 1,5rem a 4rem se quedaba como un hilo al lado de la letra.
     En em guarda la proporción a cualquier tamaño (~3px arriba del
     mínimo, ~6px en el máximo). El padding ya era em y por eso no se
     toca. */
  border-left: .09em solid var(--green-bright);
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.info-list { display: flex; flex-direction: column; gap: clamp(1.3rem, 2.6vw, 1.9rem); }
.info-row { display: flex; gap: 1rem; align-items: flex-start; }
.info-row .ico {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--verde);
  display: grid; place-items: center;
}
.info-row .ico svg { width: 1.25rem; height: 1.25rem; }
.info-row .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.78rem, 1vw, 0.85rem);
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: .2em;
}
.info-row .val { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink); line-height: 1.4; }
.info-row a.val:hover { color: var(--verde); }

/* Tarjeta del formulario */
.form-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.form-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--ink);
  margin-bottom: clamp(1.3rem, 2.6vw, 1.8rem);
}
.field { margin-bottom: clamp(0.9rem, 1.8vw, 1.1rem); }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  /* 16px mínimo: por debajo, iOS hace zoom al enfocar el campo */
  font-size: max(16px, clamp(0.98rem, 1.2vw, 1.05rem));
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 1em 1.4em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { border-radius: var(--radius); min-height: clamp(8rem, 16vh, 11rem); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9aa593; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(4,149,63,.14);
}
.consent {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: clamp(0.9rem,1.8vw,1.2rem) 0 clamp(1.1rem,2.2vw,1.5rem);
  font-size: clamp(0.88rem,1.1vw,0.98rem);
  color: var(--muted);
}
.consent input { margin-top: .2em; accent-color: var(--verde); width: 1.1rem; height: 1.1rem; flex: none; }
/* Nota: el texto de consentimiento menciona la Política de Privacidad pero aún
   no es un enlace. Cuando se convierta en <a>, añadir aquí su estilo. */

.btn-submit {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: #fff;
  background: var(--verde);
  border: 0; cursor: pointer;
  padding: 1em 2.3em;
  border-radius: var(--radius-pill);
  transition: background .2s ease, transform .2s ease;
}
.btn-submit:hover { background: var(--verde-profundo); transform: translateY(-1px); }

/* Aclara a dónde lleva el botón antes de pulsarlo. */
.form-nota {
  margin-top: .7em;
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  color: var(--muted);
}

.form-success {
  display: none;
  background: #fff;
  border: 1px solid var(--green-bright);
  border-radius: var(--radius-lg);
  padding: 1.1em 1.3em;
  color: var(--verde-profundo);
  font-weight: 600;
  margin-top: 1.1rem;
}
.form-success.show { display: block; }

@media (max-width: 860px) {
  .contacto-wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   PÁGINA ESCOBAGRO  (Nosotros / Legado · Quiénes Somos · MVV)
   Sin hero a pantalla completa: el contenido arranca bajo el header.
   ============================================================ */
.page-escobagro main { margin-top: 0; }

.hl { color: var(--verde); }

/* ---------- 1 · LEGADO (intro) ---------- */
/* Hero dividido a sangre: imagen full-bleed a la izquierda (pegada al borde
   y bajo el header) y texto a la derecha. */
.legado {
  position: relative;
  width: 100%;
  padding: 0;
  min-height: calc(100 * var(--svh));
}
.legado-grid {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: stretch;
  min-height: 100vh;
  min-height: calc(100 * var(--svh));
}
.legado-media {
  position: relative;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
/* Slideshow del fundador: crossfade suave cada 5s */
.legado-slideshow {
  position: absolute;
  inset: 0;
  /* Dejar el scroll vertical de la página como siempre; el gesto
     horizontal (cambiar de foto) lo captura js/legado.js. */
  touch-action: pan-y;
}
.legado-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.legado-slide.is-active { opacity: 1; }

/* Encuadre por foto. El contenedor recorta (object-fit: cover) y el archivo
   fotográfico es de 1990–2000: formatos mixtos y personas descentradas. Estos
   porcentajes mueven la ventana del recorte para que el protagonista quede
   siempre dentro. h1–h4 conservan 'center top'. */
.legado-slide:nth-child(5)  { object-position: center 42%; } /* h5  · grupo en la plaza */
.legado-slide:nth-child(6)  { object-position: center 46%; } /* h6  · monumento y equipo */
.legado-slide:nth-child(7)  { object-position: center 50%; } /* h7  · bodega */
.legado-slide:nth-child(8)  { object-position: 38% 62%;   } /* h8  · cañón, él abajo a la izquierda */
.legado-slide:nth-child(9)  { object-position: center 38%; } /* h9  · a caballo */
.legado-slide:nth-child(10) { object-position: 58% 45%;   } /* h10 · plaza de mercado, Alto Ariari */
.legado-slide:nth-child(11) { object-position: 38% 42%;   } /* h11 · taller y moto */
.legado-slide:nth-child(12) { object-position: center 40%; } /* h12 · grado */
/* Hasta la h12, que son las fotos que hay. Una h13 nueva entra con el
   encuadre por defecto ('center top'); si su protagonista queda fuera del
   recorte, se le añade aquí su propia línea. NO se dejan líneas por
   adelantado: el encuadre depende de CADA foto, y un valor puesto a ciegas
   descuadra la que llegue. */

/* Puntos del carrusel de legado: uno por foto, para pasarlas a mano y en
   el mismo orden en que se turnan solas (sin barajar, a diferencia del
   hero). Los crea js/legado.js en cuanto sabe cuántas fotos hay, y solo
   si hay dos o más. Misma tonalidad blanca que los puntos del hero
   (.hero-dot), a petición explícita: se ven bien sobre la foto aunque
   el borde de abajo se aclare un poco con .legado-fade. */
.legado-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 1.8rem);
  transform: translateX(-50%);
  z-index: 2;                 /* por encima de .legado-fade */
  display: flex;
}
.legado-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  /* La bolita se ve de 9px, pero el botón mide 30: el área de toque
     cómoda en un teléfono no cabe en un punto de 9px. */
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
}
.legado-dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: background .25s ease, transform .25s ease;
}
.legado-dot[aria-current="true"]::before { background: #fff; transform: scale(1.35); }
.legado-dot:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .legado-dot:hover::before { background: rgba(255, 255, 255, .8); }
}
@media (prefers-reduced-motion: reduce) {
  .legado-dot::before { transition: none; }
}

/* Degradado suave a blanco — disuelve el borde derecho de la foto
   hacia el texto, sin corte rígido en la cuadrícula. */
.legado-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,0)   70%,
      rgba(255,255,255,.55) 88%,
      rgba(255,255,255,.92) 97%,
      #fff                  100%),
    linear-gradient(0deg,
      rgba(255,255,255,0)   78%,
      rgba(255,255,255,.4)  92%,
      rgba(255,255,255,.7)  100%);
}
.legado-text {
  align-self: center;
  padding: calc(var(--header-h) + clamp(1rem, 3vw, 2.2rem))
           clamp(2rem, 5vw, 5rem)
           clamp(2rem, 5vw, 3.5rem)
           clamp(1.6rem, 3.5vw, 3.2rem);
}
.legado-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  font-size: var(--titulo-pagina);
  color: var(--ink);
  margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
}
.legado-text p {
  color: #273218;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.65;
  max-width: 54ch;
}
.legado-text p + p { margin-top: clamp(.9rem, 1.8vw, 1.3rem); }

/* ---------- 2 · QUIÉNES SOMOS ---------- */
.quienes {
  width: 100%;
  margin-inline: 0;
  padding: var(--section-y) 0;
}
.quienes-grid {
  display: grid;
  grid-template-columns: 1fr 52%;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding-left: calc((100% - var(--container)) / 2);
}
.quienes-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  color: var(--ink);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.quienes-text > p {
  color: #273218;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  max-width: 50ch;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.feature .ic {
  width: clamp(40px, 4.4vw, 52px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  color: var(--verde);
  margin-bottom: .55rem;
}
.feature .ic svg { width: 100%; height: auto; }
.feature h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: .35rem;
  text-transform: none;
}
.feature p {
  font-size: clamp(.8rem, 1vw, .9rem);
  color: #273218;
  line-height: 1.4;
}
/* Imagen en forma orgánica (blob) con halo verde claro y puntos */
.quienes-media {
  position: relative;
  align-self: center;
  display: flex;
}
.quienes-media > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Barra de cifras */
.stats {
  width: var(--container);
  margin: clamp(.6rem, 1.4vw, 1.1rem) auto 0;
  background: var(--verde-profundo);
  color: #fff;
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--amarillo);
  padding: clamp(1.4rem, 2.8vw, 2rem) clamp(1.6rem, 3.5vw, 2.6rem);
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
}
.stats-lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.15;
}
.stat { display: flex; flex-direction: column; gap: .12rem; }
.stat .ic { color: var(--lima); margin-bottom: .35rem; }
.stat .ic svg { width: clamp(22px, 2.2vw, 28px); height: auto; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--lima);
}
.stat .lbl {
  font-size: clamp(.75rem, 1vw, .85rem);
  color: rgba(255,255,255,.82);
  line-height: 1.25;
}

/* ---------- 3 · MISIÓN, VISIÓN, VALORES ---------- */
.mvv {
  position: relative;
  background: var(--surface);
  padding: var(--section-y) 0 calc(var(--section-y) + clamp(1rem, 3vw, 2.5rem));
  overflow: hidden;
  isolation: isolate;
}
/* Foto de paisaje de campo como fondo de la sección */
.mvv-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: -2;
}
/* Difuminado blanco que baja desde Quiénes Somos: sólido arriba,
   revelando el paisaje hacia el fondo de la sección. */
.mvv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    #fff                  0%,
    rgba(255,255,255,.9)  12%,
    rgba(255,255,255,.84) 45%,
    rgba(255,255,255,.78) 70%,
    rgba(255,255,255,.5)  88%,
    rgba(255,255,255,.28) 100%);
}
.mvv-inner {
  width: var(--container);
  margin-inline: auto;
  position: relative;
  text-align: center;
}
.mvv-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--ink);
  margin-bottom: clamp(.8rem, 1.6vw, 1.2rem);
}
.mvv-sub {
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
  color: #273218;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
}
.mvv-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  position: relative;
}
.mvv-cols::before {
  content: "";
  position: absolute;
  top: clamp(32px, 3.5vw, 45px);
  left: 16%; right: 16%;
  height: clamp(80px, 9vw, 120px);
  transform: translateY(-50%);
  /* Onda en S: valle entre Misión y Visión, cresta entre Visión y Valores */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2015%20Q25%2044%2050%2015%20Q75%20-14%20100%2015'%20fill='none'%20stroke='%2304953f'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-dasharray='1%209'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: .6;
  z-index: 0;
}
/* Puntas laterales independientes: una curva corta punteada que remata en un
   punto sólido. Comparten la imagen; la derecha es la izquierda reflejada. */
.mvv-onda-tip {
  position: absolute;
  top: clamp(32px, 3.5vw, 45px);
  height: clamp(80px, 9vw, 120px);
  width: 18%;
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  background-repeat: no-repeat, no-repeat;
  background-position: 16% center, center;
  background-size: 16px 16px, 100% 100%;
  background-image:
    radial-gradient(circle, #04953f 0 4px, transparent 4.5px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M22%2015%20Q48%2010%2080%2015'%20fill='none'%20stroke='%2304953f'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-dasharray='1%209'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.mvv-onda-tip.izq { left: 0;  transform: translateY(-50%); }
.mvv-onda-tip.der { right: 0; transform: translateY(-50%) scaleX(-1) scaleY(-1); }
.mvv-col { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.mvv-col .ic-circle {
  width: clamp(64px, 7vw, 90px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(3,77,32,.3);
  border: 4px solid var(--surface);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
/* Mismo tono de verde para los tres iconos */
.mvv-col:nth-child(1) .ic-circle,
.mvv-col:nth-child(2) .ic-circle,
.mvv-col:nth-child(3) .ic-circle { background: var(--verde); }
.mvv-col .ic-circle svg { width: 46%; height: auto; }
.mvv-col h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--ink);
  margin-bottom: .7rem;
}
.mvv-col p {
  color: #1b1f1a;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  max-width: 34ch;
}
.mvv-values {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1vw, .75rem);
}
.mvv-values li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  color: #1b1f1a;
}
.mvv-values li::before {
  content: "";
  width: .9rem; height: 2px;
  border-radius: 1px;
  background: var(--verde);
  flex: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats-lead { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .legado { height: auto; min-height: 0; }
  .legado-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .legado-media { min-height: clamp(300px, 70vw, 460px); }
  /* En móvil el recorte es ancho-bajo: 'center top' deja fuera a las personas,
     que en varias fotos están a media altura. Encuadre vertical propio para
     h1–h4; de h5 en adelante sirve el mismo valor base. */
  .legado-slide:nth-child(1) { object-position: center 35%; } /* h1 · familia */
  .legado-slide:nth-child(2) { object-position: center 32%; } /* h2 · vivero */
  .legado-slide:nth-child(3) { object-position: center 40%; } /* h3 · transporte */
  .legado-slide:nth-child(4) { object-position: center 56%; } /* h4 · páramo */
  /* Apilado: la frontera con el texto pasa a ser el borde inferior de la
     foto, así que el difuminado va hacia abajo, no hacia la derecha. */
  .legado-fade {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0)   80%,
        rgba(255,255,255,.45) 91%,
        rgba(255,255,255,.85) 97%,
        #fff                  100%);
  }
  .legado-text {
    padding: clamp(1.6rem, 6vw, 2.4rem) var(--gutter) clamp(1.6rem, 6vw, 2.4rem);
  }
  .quienes-grid { grid-template-columns: 1fr; padding-left: var(--gutter); padding-right: var(--gutter); }
  /* En móvil la imagen va PRIMERO (antes del texto) */
  .quienes-media { order: -1; margin-bottom: clamp(1.2rem, 4vw, 1.8rem); }
  .mvv-cols { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.5rem); }
  .mvv-cols::before { display: none; }
  .mvv-onda-tip { display: none; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PÁGINA · SERVICIOS
   Sin hero ni banner: el contenido arranca bajo el header fijo y
   usa el mismo ritmo vertical que el resto del sitio (--section-y).
   ============================================================ */
.page-servicios main { margin-top: 0; }

/* ---------- Bloque: intro a la izquierda + tarjetas a la derecha ---------- */
.serv-block {
  width: var(--container);
  margin-inline: auto;
  padding: var(--tope-pagina) 0 var(--section-y);
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) 1.55fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}
.serv-intro { padding-top: clamp(0.2rem, 1vw, 0.8rem); }
.serv-intro h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.06;
  font-size: var(--titulo-pagina);
  color: var(--ink);
  text-wrap: balance;
}
.serv-intro-text {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: #273218;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  max-width: 40ch;
  text-wrap: pretty;
}

/* ---------- Tarjetas de servicio ---------- */
.serv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}
.serv-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.serv-card-body {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.serv-card-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--ink);
  margin-bottom: clamp(0.6rem, 1.2vw, 0.9rem);
}
.serv-card-body > p {
  color: #273218;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  max-width: 44ch;
}
.serv-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 0.85rem);
  margin: clamp(1.3rem, 2.6vw, 1.8rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.7rem);
  border-top: 1px solid var(--line);
}
.serv-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  color: var(--ink);
}
.serv-list .chk {
  flex: none;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: grid; place-items: center;
}
.serv-list .chk svg { width: 0.8rem; height: 0.8rem; }
.serv-cta {
  align-self: stretch;
  justify-content: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  color: var(--verde-profundo);
  background: transparent;
  border: 2px solid var(--verde);
  padding: 0.85em 1.4em;
  text-align: center;
  border-radius: var(--radius-pill);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.serv-cta svg { width: 1.05em; height: 1.05em; }
.serv-cta:hover { background: var(--verde); color: #fff; transform: translateY(-1px); }

/* ---------- Proceso de acompañamiento ---------- */
.proceso {
  background: var(--surface);
  padding: var(--section-y) 0;
}
.proceso-inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4.5vw, 3.5rem);
  align-items: start;
}
.proceso-intro h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: var(--ink);
  letter-spacing: .01em;
  line-height: 1.08;
  text-wrap: balance;
}
.proceso-intro p {
  margin-top: clamp(0.8rem, 1.6vw, 1.2rem);
  color: #273218;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  max-width: 60ch;
  text-wrap: pretty;
}
.proceso-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
  position: relative;
  text-align: center;
}
/* Línea punteada que conecta los pasos */
.proceso-steps::before {
  content: "";
  position: absolute;
  top: clamp(28px, 3vw, 38px);
  left: 12.5%; right: 12.5%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--verde) 40%, transparent 0);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  opacity: .55;
  z-index: 0;
}
.proceso-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; align-self: start; }
.proceso-ic {
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(3,77,32,.25);
  border: 4px solid var(--surface);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem);
}
.proceso-ic svg { width: 44%; height: auto; }
.proceso-step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.proceso-step p {
  color: #273218;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.5;
  max-width: 26ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .serv-block { grid-template-columns: 1fr; }
  .proceso-intro p { max-width: 52ch; }
}
@media (max-width: 860px) {
  .serv-cards { grid-template-columns: 1fr; }
  .serv-cta { align-self: flex-start; padding-inline: 1.8em; }
  .proceso-steps { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 2.6rem); }
  .proceso-steps::before { display: none; }
}
@media (max-width: 480px) {
  .proceso-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   PÁGINA · NUESTRAS SEDES (mapa interactivo de Colombia)
   ============================================================ */
/* La página no tiene hero: el contenido empieza justo bajo el header.
   El degradado oscuro del header mantiene legible la navegación. */
/* Alto anclado al viewport: la sección ocupa exactamente una pantalla
   (sin scroll) en escritorio. Todo se dimensiona por escala (svh/vh),
   no por píxeles fijos, para que se ajuste a cualquier altura. */
.page-sedes main {
  /* El aire bajo el header en esta página. Es MENOR que el --tope-pagina
     del resto del sitio y escala con el ALTO de la ventana (svh) en vez
     de con el ancho: el mapa y la ficha tienen que caber juntos en una
     sola pantalla, y cada píxel que se regale arriba se lo quita al mapa.

     Va en una variable porque hay que compensarlo abajo, en .sedes-intro,
     y porque las media queries de más adelante lo cambian: teniéndolo
     aquí, la compensación se ajusta sola y no hay que repetir la cuenta. */
  --tope-sedes: clamp(1.4rem, calc(4 * var(--svh)), 3rem);

  margin-top: 0;
  background: #fff;
  min-height: calc(100 * var(--svh));
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  padding: calc(var(--header-h) + var(--tope-sedes)) 0 clamp(2rem, calc(6 * var(--svh)), 4rem);
}
.sedes-wrap { width: min(96%, 1620px); margin-inline: auto; display: flex; align-items: stretch; }
.sedes-grid {
  flex: 1;
  display: grid;
  grid-template-columns:
    minmax(190px, 0.85fr)   /* intro */
    minmax(280px, 1.42fr)   /* mapa — protagonista */
    minmax(300px, 1fr);     /* ficha */
  gap: clamp(.7rem, 1.6vw, 1.7rem);
  align-items: stretch;
}

/* ---------- Columna 1 · Intro ---------- */
.sedes-title {
  font-family: var(--font-display); font-weight: 800;
  color: var(--ink); line-height: 1.02; letter-spacing: .005em;
  font-size: var(--titulo-pagina);
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
}
/* La columna del título baja hasta el mismo aire que el resto del sitio.

   Solo baja ELLA: el mapa y la ficha son celdas hermanas del grid, así
   que su posición no depende de esta. Es justo lo que se quería —que
   "Nuestras sedes" armonice con los títulos de las demás páginas— sin
   robarle al mapa el alto que necesita para caber en una pantalla.

   La cuenta es la diferencia entre el aire estándar y el de esta página.
   Al estar las dos en variables, cambiar cualquiera de ellas (o entrar
   en una media query que redefina --tope-sedes) reajusta esto solo. */
.sedes-intro {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--section-y) - var(--tope-sedes));
}
.sedes-intro .lead {
  color: var(--muted); max-width: 34ch;
  font-size: clamp(.86rem, calc(1.7 * var(--svh)), 1.02rem); line-height: 1.5;
  text-wrap: pretty;
}

/* Leyenda */
.map-legend {
  margin-top: clamp(1.2rem, calc(5 * var(--svh)), 3.2rem);
  margin-bottom: auto;
  max-width: 22ch;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.4rem, calc(3.5 * var(--svh)), 2.2rem) clamp(.95rem, calc(2 * var(--svh)), 1.4rem);
  box-shadow: 0 4px 16px rgba(20,40,15,.05);
}
.map-legend h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.92rem, 1.1vw, 1rem); color: var(--ink);
}
.map-legend > p {
  color: var(--muted); font-size: clamp(.78rem, .95vw, .85rem);
  margin: .45em 0 1em; line-height: 1.5;
}
.legend-item {
  display: flex; align-items: center; gap: .6em;
  font-size: clamp(.82rem, .95vw, .9rem); color: var(--ink);
  font-weight: 600; margin-top: .55em;
}
.legend-dot { width: .72em; height: .72em; border-radius: 50%; flex: 0 0 auto; }
.dot-central { background: var(--verde-profundo); }
.dot-atencion { background: var(--verde-lima); }

/* ---------- Columna 2 · Mapa ---------- */
.sedes-mapwrap {
  position: relative;
  /* Sube el mapa hasta el borde inferior del header anulando el espacio extra del main */
  margin-top: calc(-1 * clamp(1.4rem, calc(4 * var(--svh)), 3rem));
  /* y baja hasta el borde inferior anulando el padding inferior */
  margin-bottom: calc(-1 * clamp(2rem, calc(6 * var(--svh)), 4rem));
  height: auto; min-height: calc(100 * var(--svh));
  display: flex; align-items: stretch; justify-content: center;
  padding-top: 0;
}
.sedes-map {
  width: 100%; height: calc(100 * var(--svh)); display: block;
  overflow: visible;
  /* Sangra el mapa por el borde izquierdo y lo agranda: es el elemento
     decorativo de la página, no una figura centrada.

     Estos números están atados al viewBox que pone js/sedes.js. Antes
     eran -16% y 1.12 sobre un marco de 613 unidades de ancho; al
     recortarlo a la tierra firme (514) la MISMA composición sale con
     -6% y 0.939 —el 1.12 reescalado por 514/613—. Si se vuelve a tocar
     el viewBox hay que rehacer las dos: escala = 1.12 x ancho/613. */
  transform: translateX(-6%) translateY(-7%) scale(0.939);
  transform-origin: center;
}
.dept {
  stroke: #ffffff; stroke-width: 1; stroke-linejoin: round;
  transition: fill .18s ease;
}
.dept.no-sede { fill: var(--surface); }
.dept.central { fill: var(--verde-profundo); cursor: pointer; }
.dept.central:hover, .dept.central:focus-visible { fill: var(--green-deep); }
.dept.central.selected { fill: var(--green-deep); }
.dept.atencion { fill: var(--verde-lima); cursor: pointer; }
.dept.atencion:hover, .dept.atencion:focus-visible { fill: var(--verde); }

/* El recuadro que salía al pulsar un departamento.

   Es el anillo de foco POR DEFECTO del navegador (outline: auto), que en
   Linux toma el color del tema del sistema: de ahí el naranja, que no es
   de la paleta. Se colaba porque un clic de ratón deja el elemento en
   :focus pero NO en :focus-visible, y las reglas de arriba solo anulaban
   el outline en :focus-visible, así que nunca llegaban a tapar este caso.

   Se corta en :focus —el clic ya se entiende por el relleno, que cambia,
   y por la ficha que se abre al lado— y se repone en :focus-visible, que
   es el del teclado, ahora en el amarillo de marca y con el mismo grosor
   que el resto de los controles del sitio. Antes ese caso quedaba SIN
   ninguna marca: quien recorriera el mapa con el tabulador no tenía forma
   de saber en qué departamento estaba. */
.dept:focus { outline: none; }
.dept:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.dept.atencion.selected { fill: var(--verde); }

/* Etiquetas de las regiones interactivas */
.dept-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .01em;
  fill: var(--ink); paint-order: stroke;
  stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}

/* ---------- Columna 3 · Ficha ---------- */
.sede-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow); overflow: hidden;
  align-self: start;
  display: flex; flex-direction: column;
}
.sede-photo {
  position: relative;
  height: clamp(118px, calc(15 * var(--svh)), 168px);
  margin: clamp(.7rem, calc(1.6 * var(--svh)), 1.05rem) clamp(.7rem, calc(1.6 * var(--svh)), 1.05rem) 0;
}
.sede-photo img.media-ph {
  object-fit: cover; display: block; background: none; border: 1px solid var(--line);
}
.sede-photo .media-ph {
  height: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #eef2ec;
}
.sede-photo .media-ph::after { color: #9aa590; }
.sede-badge {
  position: absolute; left: clamp(.9rem, 1.4vw, 1.2rem); bottom: -.95em;
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--verde-profundo); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.66rem, .85vw, .74rem); letter-spacing: .02em;
  padding: .58em 1.05em; border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(2,77,32,.35);
}
.sede-badge svg { width: 1.1em; height: 1.1em; }
.badge-atencion {
  position: static; left: auto; bottom: auto; margin-bottom: clamp(.7rem, calc(1.8 * var(--svh)), 1rem);
  background: var(--verde-lima); color: #fff;
  box-shadow: 0 6px 16px rgba(92,185,30,.32);
}
.sede-body { padding: clamp(1.3rem, calc(3 * var(--svh)), 1.9rem) clamp(1rem, 1.7vw, 1.5rem) clamp(.9rem, calc(2.4 * var(--svh)), 1.45rem); }
.sede-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, calc(3.4 * var(--svh)), 2.2rem); color: var(--ink);
  line-height: 1.02;
}
.sede-city {
  color: var(--verde); font-weight: 700;
  font-size: clamp(.95rem, calc(1.9 * var(--svh)), 1.1rem); margin-top: .1em;
}
.sede-desc {
  color: var(--muted); margin: clamp(.5rem, calc(1.5 * var(--svh)), .85rem) 0 clamp(.7rem, calc(1.9 * var(--svh)), 1.15rem);
  font-size: clamp(.84rem, calc(1.6 * var(--svh)), .94rem); line-height: 1.5; text-wrap: pretty;
}
.sede-info { display: grid; gap: clamp(.55rem, calc(1.7 * var(--svh)), 1.05rem); }
.sede-row {
  display: grid; grid-template-columns: 1.5em 6.5em minmax(0, 1fr);
  align-items: start; gap: .35em .8em;
}
.sede-row .ic { color: var(--verde); display: block; }
.sede-row .ic svg { width: 1.25em; height: 1.25em; }
.sede-row .k { color: var(--muted); font-size: clamp(.78rem, .92vw, .85rem); font-weight: 600; padding-top: .05em; }
.sede-row .v { color: var(--ink); font-size: clamp(.85rem, 1vw, .93rem); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.sede-row .v a { color: var(--ink); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.sede-row .v a:hover { color: var(--verde); border-color: var(--verde); }
.sede-hours { display: grid; grid-template-columns: 1fr; gap: .15em; }
.sede-hours .hk { color: var(--muted); font-size: .8em; }
.sede-hours .hv { color: var(--ink); }
.sede-cta {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; margin-top: clamp(.85rem, calc(2.3 * var(--svh)), 1.5rem);
  background: var(--verde); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.9rem, calc(1.7 * var(--svh)), 1rem);
  padding: clamp(.78em, calc(1.7 * var(--svh)), 1em) 1.2em; border-radius: var(--radius-lg);
  transition: background .2s ease, transform .2s ease;
}
.sede-cta svg { width: 1.15em; height: 1.15em; }
.sede-cta:hover { background: var(--verde-profundo); transform: translateY(-1px); }

/* ---------- Tarjeta de Punto de atención (ingenieros) ---------- */
.atencion-body { padding-top: clamp(1.2rem, calc(2.8 * var(--svh)), 1.7rem); }
.eng-list { display: grid; gap: clamp(.9rem, calc(2.2 * var(--svh)), 1.4rem); margin-top: clamp(1rem, calc(2.4 * var(--svh)), 1.4rem); }
.eng {
  display: grid; gap: clamp(.7rem, calc(1.6 * var(--svh)), 1rem);
  padding-top: clamp(.9rem, calc(2.2 * var(--svh)), 1.4rem); border-top: 1px solid var(--line);
}
.eng:first-child { padding-top: 0; border-top: 0; }
.eng-top { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1rem); }
.eng-avatar {
  width: clamp(46px, calc(7 * var(--svh)), 58px); height: clamp(46px, calc(7 * var(--svh)), 58px); flex: none;
  border-radius: 50%; background: var(--surface); color: var(--verde);
  display: grid; place-items: center;
}
.eng-avatar svg { width: 56%; height: auto; }
.eng-meta { min-width: 0; }
.eng-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, calc(1.9 * var(--svh)), 1.15rem); color: var(--ink); line-height: 1.15; }
.eng-role { color: var(--muted); font-size: clamp(.82rem, calc(1.5 * var(--svh)), .9rem); margin-top: .1em; }
.eng-mail { display: inline-block; color: var(--verde); font-size: clamp(.82rem, calc(1.5 * var(--svh)), .9rem); margin-top: .25em; word-break: break-word; }
.eng-mail.muted { color: var(--muted); }
a.eng-mail:hover { color: var(--verde-profundo); }
.eng-wa {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--verde); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.9rem, calc(1.7 * var(--svh)), 1rem);
  padding: clamp(.72em, calc(1.7 * var(--svh)), .9em) 1.2em; border-radius: var(--radius);
  transition: background .2s ease, transform .2s ease;
}
.eng-wa svg { width: 1.25em; height: 1.25em; }
.eng-wa:hover { background: var(--verde-profundo); transform: translateY(-1px); }

/* ---------- Estado vacío (sin región seleccionada) ---------- */
.sede-card.is-empty { box-shadow: var(--shadow); }
.sede-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(1rem, calc(2.4 * var(--svh)), 1.5rem);
  padding: clamp(2.2rem, calc(7 * var(--svh)), 3.6rem) clamp(1.4rem, 3vw, 2.2rem);
  min-height: clamp(190px, calc(32 * var(--svh)), 300px);
}
.sede-empty p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, calc(2.2 * var(--svh)), 1.3rem); color: var(--ink);
  max-width: 16ch; line-height: 1.3; text-wrap: balance;
}
.empty-icons { display: flex; align-items: center; gap: .6rem; color: var(--verde); }
.empty-ic svg { width: clamp(34px, calc(5 * var(--svh)), 44px); height: auto; }
.empty-arrow svg { width: clamp(26px, calc(4 * var(--svh)), 34px); height: auto; }

/* ---------- Responsive ---------- */
/* Escritorio corto: si la pantalla es muy baja, se libera el alto fijo
   para que la página se desplace en vez de recortar contenido. */
@media (min-width: 1181px) and (max-height: 700px) {
  .page-sedes main {
    /* Pantalla baja: se suelta el alto fijo y la página se desplaza, así
       que aquí el recorte de arriba ya no protege nada... pero se deja
       ajustado igualmente porque el mapa sigue siendo lo que se quiere
       ver primero. La intro se compensa sola contra esta variable. */
    --tope-sedes: 1.4rem;
    height: auto; min-height: 0; display: block;
    padding: calc(var(--header-h) + var(--tope-sedes)) 0 2.2rem;
  }
  .sedes-grid { align-items: start; }
  .sedes-mapwrap { height: auto; min-height: calc(60 * var(--svh)); }
}

/* Tablet: el alto deja de fijarse al viewport; intro arriba, mapa y
   ficha en dos columnas debajo, y la página fluye con normalidad. */
@media (max-width: 1180px) {
  .page-sedes main {
    /* Tablet y móvil: el grid se apila (intro arriba, mapa y ficha
       debajo) y la página fluye con normalidad, así que ya no hay un
       alto que repartir. Se pasa de svh a vw, como el resto del sitio. */
    --tope-sedes: clamp(1.4rem, 4vw, 2.4rem);
    height: auto; min-height: 0; display: block;
    padding: calc(var(--header-h) + var(--tope-sedes)) 0 clamp(2rem, 6vw, 3.5rem);
  }
  .sedes-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "intro intro"
      "map   card";
    column-gap: clamp(1.4rem, 3vw, 2.6rem);
    row-gap: clamp(1.6rem, 4vw, 2.4rem);
    align-items: start;
  }
  .sedes-intro { grid-area: intro; }
  .sedes-intro .map-legend { margin-top: clamp(1rem, 3vw, 1.6rem); margin-bottom: 0; max-width: none; }
  .sedes-mapwrap { grid-area: map; height: auto; min-height: 0; margin-top: 0; margin-bottom: 0; }
  /* Sin transform: el viewBox de js/sedes.js ya encuadra la tierra firme
     con el mismo aire a los dos lados, así que el mapa entra centrado y
     ocupando todo el ancho. La sangría de escritorio aquí no se quiere:
     esto es una columna normal, no un fondo decorativo. */
  .sedes-map { height: auto; transform: none; }
  .sede-card { grid-area: card; align-self: start; }
  .sedes-intro .lead { max-width: 62ch; }
  .sede-photo { height: clamp(150px, 26vw, 230px); }
}

/* Móvil: una sola columna — intro, mapa y ficha apilados. */
@media (max-width: 720px) {
  .sedes-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "map" "card";
    row-gap: clamp(1.4rem, 6vw, 2rem);
  }
  .sedes-mapwrap { max-width: 440px; margin-inline: auto; width: 100%; }
  .sede-photo { height: clamp(150px, 44vw, 220px); }
}


/* ============================================================
   PÁGINA PRODUCTOS  (productos.html)
   Aside de filtros (línea / buscador) + grilla.
   ============================================================ */
.prod-layout {
  width: var(--container);
  margin-inline: auto;
  padding: var(--tope-pagina) 0 var(--section-y);
  display: grid;
  grid-template-columns: clamp(215px, 21vw, 275px) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3rem);
  align-items: start;
}

/* ---------- Aside de filtros ---------- */
.filtros {
  position: sticky;
  top: calc(var(--header-h) + 0.9rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.05rem, 1.7vw, 1.5rem);
}
.filtros h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  letter-spacing: .03em;
  color: var(--ink);
  padding-bottom: .55em;
  border-bottom: 2px solid var(--verde-lima);
}
.filtro-group { margin-top: clamp(1.1rem, 1.8vw, 1.5rem); }
.filtro-label {
  display: block;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: .6rem;
}

.prod-search { position: relative; display: flex; align-items: center; }
.prod-search svg {
  position: absolute; left: .85em;
  width: 17px; height: 17px;
  color: var(--muted);
  pointer-events: none;
}
.prod-search input {
  width: 100%;
  font-family: var(--font-body);
  /* 16px mínimo: por debajo, iOS hace zoom al enfocar el campo */
  font-size: max(16px, 0.9rem);
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .72em 1em .72em 2.6em;
}
.prod-search input::placeholder { color: #9aa38d; }
.prod-search input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.prod-search input::-webkit-search-cancel-button { cursor: pointer; }

.linea-list { display: flex; flex-direction: column; gap: .25rem; }
.linea-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: #33402a;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: .58em .85em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.linea-btn:hover { background: rgba(4,149,63,.10); }
.linea-btn[aria-pressed="true"] { background: var(--verde-profundo); color: #fff; }

/* Botón que pliega el listado de líneas. En PC no existe visualmente: la
   lista se ve entera y este control solo aparece en el bloque responsive. */
.filtro-toggle { display: none; }

/* ---------- Resultados ---------- */
.prod-results-head {
  /* En columna, no en fila. El contador ("Mostrando 12 de 500") iba al
     otro extremo de la misma línea, alineado por la base con el título;
     con el título al tamaño de página esa pareja quedaba descompensada
     —60px contra 14px sobre la misma base— así que el contador pasa
     debajo, que además aguanta cualquier ancho sin reflujos raros. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.9rem);
}
.prod-results-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--titulo-pagina);
  letter-spacing: .01em;
  color: var(--ink);
}
.prod-count { font-size: 0.85rem; font-weight: 500; color: var(--muted); }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 13vw, 205px), 1fr));
  gap: clamp(.8rem, 1.6vw, 1.35rem);
}
.prod-item {
  position: relative;          /* ancla del botón de agregar al carrito */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(.85rem, 1.3vw, 1.15rem);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.prod-item:hover {
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(29,42,20,.10);
  transform: translateY(-2px);
}
.prod-item[hidden] { display: none; }
/* Las 500 tarjetas viven en el DOM a la vez (ver js/productos.js). 'contain'
   le promete al navegador que lo que pasa dentro de una tarjeta no cambia el
   tamaño ni los estilos de las demás, así que al teclear en el buscador
   recalcula solo lo que cambió en vez de repasar la rejilla entera. */
.prod-item { contain: layout style; }
.prod-item-img {
  width: 100%;
  height: clamp(140px, 12vw, 180px);
  border: 0;
  background: transparent;
  margin-bottom: .55rem;
  /* contain, no cover: las fotos del inventario son el producto sobre fondo
     blanco y recortarlas les cortaría la etiqueta. El recuadro mide siempre
     lo mismo, así que la rejilla queda a ras aunque las fotos vengan en dos
     proporciones (320x400 y 400x400). */
  object-fit: contain;
}
.prod-item .product-name { font-size: clamp(0.95rem, 1.2vw, 1.08rem); margin-top: .7em; }
.prod-item .product-sub { font-size: clamp(0.75rem, 0.9vw, 0.82rem); margin-top: .45em; letter-spacing: .02em; }

/* Agregar al carrito. Un icono en la esquina y no un botón con texto: la
   ficha ya lleva foto, categoría, nombre e ingrediente activo, y una línea
   más de letra en 500 tarjetas emborrona justo lo que se viene a leer. El
   dibujo lo pone la máscara --ico-cart, y pasa a --ico-check cuando el
   producto ya está en la lista. */
.prod-add {
  position: absolute;
  top: clamp(.5rem, .8vw, .7rem);
  right: clamp(.5rem, .8vw, .7rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(36px, 3.4vw, 42px);
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--verde);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.prod-add::before {
  content: "";
  width: 54%;
  height: 54%;
  background: currentColor;
  -webkit-mask: var(--ico-cart) center / contain no-repeat;
  mask: var(--ico-cart) center / contain no-repeat;
}
.prod-add:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.prod-add:active { transform: scale(.9); }
/* Ya está en el carrito: verde lleno y visto. Volver a pulsarlo lo saca. */
.prod-add[aria-pressed="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}
.prod-add[aria-pressed="true"]::before {
  -webkit-mask-image: var(--ico-check);
  mask-image: var(--ico-check);
}
.prod-add[aria-pressed="true"]:hover { background: var(--verde-profundo); border-color: var(--verde-profundo); }

.prod-empty {
  text-align: center;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.prod-more { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.prod-more .btn-blue { border: 0; cursor: pointer; font-family: var(--font-body); }
.prod-note {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}
.prod-note a { color: var(--verde); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.prod-note a:hover { color: var(--verde-profundo); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .prod-layout { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2rem); }
  .filtros { position: static; }
  .linea-list { flex-direction: row; flex-wrap: wrap; }
  .linea-btn { width: auto; background: #fff; }

  /* En pantallas chicas el aside se queda solo con el buscador: las líneas
     viven detrás del botón para que el portafolio no quede empujado media
     pantalla hacia abajo. */
  .filtro-group--linea .filtro-label { display: none; }
  .filtro-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    width: 100%;
    font-family: var(--font-body);
    font-size: max(16px, 0.9rem);
    text-align: left;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .62em 1.1em;
    cursor: pointer;
  }
  .filtro-toggle:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
  .filtro-toggle-txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
  .filtro-toggle-txt .k {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: .02em;
    color: var(--muted);
  }
  .filtro-toggle-txt > span:last-child {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filtro-toggle svg {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    color: var(--verde);
    transition: transform .2s ease;
  }
  .filtro-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .filtro-group--linea .linea-list { display: none; margin-top: .75rem; }
  .filtro-group--linea .linea-list.is-open { display: flex; }
}
@media (max-width: 520px) {
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-item-img { height: clamp(120px, 32vw, 160px); }
}

/* ============================================================
   CARRITO DE COTIZACIÓN  (carrito.html)
   Misma rejilla que el portafolio: contenido a la izquierda y una
   columna pegajosa a la derecha con el resumen, para que el botón de
   cotizar esté siempre a un clic por larga que sea la lista.
   ============================================================ */
.carrito-wrap {
  width: var(--container);
  margin-inline: auto;
  padding: var(--tope-pagina) 0 var(--section-y);
}
.carrito-head {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.9rem);
}
.carrito-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--titulo-pagina);
  letter-spacing: .01em;
  color: var(--ink);
}
.carrito-sub {
  margin-top: .5em;
  max-width: 60ch;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  color: var(--muted);
}

/* ---------- Carrito vacío ---------- */
.carrito-vacio {
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 6vw, 4rem) clamp(1.2rem, 5vw, 3rem);
}
.carrito-vacio[hidden] { display: none; }
.vacio-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--ink);
}
.vacio-texto {
  margin: .7em auto clamp(1.4rem, 3vw, 2rem);
  max-width: 46ch;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  color: var(--muted);
}

/* ---------- Lista + resumen ---------- */
.carrito-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.carrito-cuerpo[hidden] { display: none; }

.carrito-lista { list-style: none; display: grid; gap: clamp(.7rem, 1.4vw, 1rem); }
.cart-row {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 92px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.8rem, 1.8vw, 1.4rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(.7rem, 1.3vw, 1rem);
}
.cart-row-img {
  width: 100%;
  height: clamp(72px, 7.5vw, 100px);
  object-fit: contain;   /* igual que en el portafolio: no recortar la etiqueta */
}
.cart-row-info { min-width: 0; }
.cart-row-info .cat-pill {
  display: inline-block;
  margin-top: 0;
  font-size: clamp(0.62rem, 0.8vw, 0.7rem);
  padding: .32em .9em;
}
.cart-row-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  margin-top: .45em;
  color: var(--ink);
}
.cart-row-sub {
  margin-top: .25em;
  font-size: clamp(0.76rem, 0.9vw, 0.84rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
}
.cart-row-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

/* Cantidades. El campo acepta teclear el número directo: pedir doce
   unidades a golpe de "+" son doce clics. */
.cart-stepper {
  display: flex;
  align-items: center;
  gap: .15rem;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: .2rem;
}
.step-btn {
  width: clamp(28px, 2.8vw, 32px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--verde-profundo);
  background: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.step-btn:hover { background: var(--verde); color: #fff; }
.step-btn:focus-visible { outline: 2px solid var(--verde-profundo); outline-offset: 1px; }
.step-num {
  width: 2.4em;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: max(16px, 0.92rem);   /* 16px o más: menos hace que iOS haga zoom al enfocar */
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}
.step-num:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--radius-sm); }
.cart-quitar {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  padding: .2em .4em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
.cart-quitar:hover { color: #b3261e; }
.cart-quitar:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* ---------- Resumen ---------- */
.carrito-resumen {
  position: sticky;
  top: calc(var(--header-h) + 0.9rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
}
.resumen-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  letter-spacing: .03em;
  color: var(--ink);
  padding-bottom: .55em;
  border-bottom: 1px solid var(--line);
  margin-bottom: .9rem;
}
.resumen-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--muted);
  padding: .3em 0;
}
.resumen-dato { font-weight: 800; color: var(--ink); }

/* No dice "comprar" porque aquí no se compra: se manda la lista al
   WhatsApp del negocio y la cotización la responde una persona. */
.btn-cotizar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  margin-top: 1rem;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  text-align: center;
  color: #fff;
  /* Verde de MARCA, no el de WhatsApp: este botón es el cierre del
     carrito y pertenece al sitio, aunque el chat se abra en WhatsApp.
     Mismo par de verdes que el "Solicitar más información" de Contacto
     (.btn-submit). La burbuja flotante sí conserva el verde de WhatsApp:
     allí es un elemento reconocible de la app, no del sitio. */
  background: var(--verde);
  padding: 0.85em 1.2em;
  border-radius: var(--radius-pill);
  transition: background .2s ease, transform .2s ease;
}
.btn-cotizar:hover { background: var(--verde-profundo); transform: translateY(-1px); }
.btn-cotizar svg { flex: 0 0 auto; }
.resumen-nota {
  margin-top: .85rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.resumen-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.resumen-seguir { font-size: 0.82rem; font-weight: 700; color: var(--verde-profundo); }
.resumen-seguir:hover { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.carrito-vaciar {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.carrito-vaciar:hover { color: #b3261e; }
.carrito-vaciar:focus-visible,
.resumen-seguir:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* El resumen pasa DEBAJO de la lista y deja de ser pegajoso: en una
     columna estrecha, fijarlo se comería media pantalla. */
  .carrito-cuerpo { grid-template-columns: 1fr; }
  .carrito-resumen { position: static; }
}
@media (max-width: 560px) {
  /* Foto y datos arriba; cantidades y "quitar" en su propia fila, de lado
     a lado, para que los tres controles queden con tamaño de dedo. */
  .cart-row { grid-template-columns: clamp(58px, 18vw, 76px) minmax(0, 1fr); }
  .cart-row-acciones {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    padding-top: .3rem;
    border-top: 1px solid var(--line);
  }
}

/* ============================================================
   TELEVISORES / PANTALLAS MUY GRANDES
   Un TV puede exponer un viewport CSS más ancho que un monitor
   (4K real = 3840px). Para que se vea IGUAL que en un PC —mismas
   proporciones, solo que más grande— se escala TODA la página de
   forma uniforme, tomando 1920px (Full HD) como pantalla PC de
   referencia. A 1920px o menos NO tiene efecto (zoom = 1), así que
   móviles, tablets y monitores normales quedan intactos.
   ============================================================ */
@media (min-width: 1921px) {
  :root { zoom: calc(100vw / 1920); }
  /* 100vw INCLUYE el ancho de la barra de desplazamiento, así que el zoom
     sale un pelo mayor que el espacio real y la página se pasa unos pocos
     píxeles a lo ancho: aparecía una barra horizontal fantasma en monitores
     4K. 'clip' recorta ese sobrante sin crear un contenedor de scroll, de
     modo que el hero sticky y el header fijo siguen funcionando igual
     (con 'hidden' sí se romperían). */
  html { overflow-x: clip; }
}


/* ============================================================
   GUÍA FENOLÓGICA — páginas de cultivo (cultivo-*.html)
   Sistema fluido: ancho central --container, sin franjas laterales.
   ============================================================ */
.feno-hero {
  width: var(--container); margin-inline: auto;
  padding-top: var(--tope-pagina);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.feno-back {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.72rem, .9vw, .8rem);
  letter-spacing: .02em;
  color: var(--verde);
}
.feno-back:hover { color: var(--verde-profundo); }
.feno-back svg { width: 1em; height: 1em; }
.feno-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  line-height: 1.02; letter-spacing: .005em;
  font-size: var(--titulo-pagina);
  color: var(--ink);
  margin-top: clamp(.8rem, 1.6vw, 1.2rem);
}
.feno-hero h1 span { display: block; }
.feno-hero .lead {
  margin-top: clamp(.8rem, 1.6vw, 1.1rem);
  max-width: 44ch; color: var(--muted);
  font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1.6;
}
.feno-hero-media {
  aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
}
.feno-hero-media .media-ph { border-radius: var(--radius-lg); }

/* ---------- Tarjetas por etapa ----------
   Rejilla fija de tres etapas por fila: el número de fichas por fila es el
   mismo en cualquier monitor o nivel de zoom; lo que escala es su tamaño. */
.feno-etapas {
  width: var(--container); margin: clamp(1.4rem, 3vw, 2.4rem) auto 0;
  display: flex; flex-direction: column; gap: clamp(1.1rem, 2.2vw, 1.8rem);
}
.feno-fila {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.5rem);
}
/* --- Plegado: solo la primera fila completa. De la segunda se deja asomar
   el borde superior con un degradado, como pista de que hay más etapas. --- */
.feno-etapas:not(.is-open) .feno-fila--extra { display: none; }
.feno-etapas:not(.is-open) .feno-fila--peek {
  max-height: clamp(52px, 6vw, 82px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}
.feno-etapas:not(.is-open) .feno-fila--peek .badge { display: none; }
.feno-fila > .feno-etapa:only-child { grid-column: 2; }
.feno-etapa {
  position: relative;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
}
.feno-etapa-media { position: relative; aspect-ratio: 4 / 3; }
/* El redondeo lo lleva la imagen, no el contenedor: así el numerador puede
   sobresalir del borde inferior sin quedar recortado. */
.feno-etapa-media .media-ph { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.feno-etapa-media .badge {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -.85rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--verde-profundo); border: 2px solid #fff; color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  z-index: 1;
}
.feno-etapa-body {
  padding: clamp(1.2rem, 1.9vw, 1.4rem) clamp(.8rem, 1.2vw, 1rem) clamp(.9rem, 1.4vw, 1.15rem);
  display: flex; flex-direction: column; gap: .6rem;
}
.feno-etapa h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.22; color: var(--ink);
}
.feno-rule { height: 1px; background: var(--line); }
.feno-dur-label {
  font-weight: 600; font-size: clamp(.64rem, .78vw, .7rem);
  letter-spacing: .02em; color: var(--muted);
}
.feno-dur { font-weight: 700; font-size: clamp(.78rem, .98vw, .86rem); color: var(--ink); margin-top: .15em; }
.feno-etapa p { font-size: clamp(.76rem, .94vw, .85rem); line-height: 1.5; color: var(--muted); }

/* Al desplegarse, las filas plegadas entran con un fundido corto. */
.feno-etapas.is-open .feno-fila--extra { animation: fenoIn .35s ease both; }
@keyframes fenoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.feno-more { text-align: center; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.feno-etapas:not(.is-open) .feno-more { margin-top: clamp(.2rem, .6vw, .5rem); }
.feno-more .btn-blue { border: 0; cursor: pointer; font-family: var(--font-body); }
.feno-more .btn-blue .arr { transition: transform .2s ease; }
.feno-more .btn-blue[aria-expanded="true"] .arr { transform: rotate(180deg); }

/* ---------- Paneles inferiores ---------- */
.feno-panels {
  width: var(--container); margin: var(--section-y) auto 0;
  padding-bottom: var(--section-y);
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(.9rem, 1.8vw, 1.4rem); align-items: start;
}
.feno-panel { background: var(--surface); border-radius: var(--radius-xl); padding: clamp(1.1rem, 2vw, 1.7rem); }
.feno-panel-head { display: flex; align-items: center; gap: .7em; margin-bottom: clamp(.9rem, 1.6vw, 1.25rem); }
.feno-panel-head .ic {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1.5px solid var(--verde-profundo); color: var(--verde-profundo);
  display: grid; place-items: center;
}
.feno-panel-head .ic svg { width: 1.05rem; height: 1.05rem; }
.feno-panel-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.35vw, 1.18rem); color: var(--ink); }
.feno-criticos { display: flex; flex-direction: column; gap: clamp(.7rem, 1.2vw, .95rem); }
.feno-criticos li {
  display: flex; gap: .75em; align-items: flex-start;
  font-size: clamp(.8rem, .98vw, .9rem); line-height: 1.5; color: var(--muted);
}
.feno-criticos .n {
  flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--verde-profundo); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .76rem;
}
.feno-criticos strong { color: var(--ink); font-weight: 700; }
.feno-fito { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 1.8vw, 1.4rem); }
.feno-fito h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.8rem, .98vw, .88rem); color: var(--verde-profundo); margin-bottom: .7em;
}
.feno-fito ul { display: flex; flex-direction: column; gap: .45em; }
.feno-fito li {
  display: flex; gap: .55em;
  font-size: clamp(.76rem, .94vw, .85rem); line-height: 1.45; color: var(--muted);
}
.feno-fito li::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--verde); margin-top: .55em;
}
.feno-fito-col + .feno-fito-col { border-left: 1px solid var(--line); padding-left: clamp(.9rem, 1.8vw, 1.4rem); }
.feno-fito-media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(.9rem, 1.6vw, 1.2rem); }

@media (max-width: 860px) {
  .feno-hero, .feno-panels { grid-template-columns: 1fr; }
  .feno-hero .lead { max-width: 62ch; }
  .feno-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feno-fila > .feno-etapa:only-child { grid-column: auto; }
}
@media (max-width: 520px) {
  .feno-fila { grid-template-columns: minmax(0, 1fr); }
  /* En una sola columna: una etapa completa, la siguiente asomando. */
  .feno-etapas:not(.is-open) .feno-fila--peek { display: none; }
  .feno-etapas:not(.is-open) .feno-fila:first-child > .feno-etapa:nth-child(n + 3) { display: none; }
  .feno-etapas:not(.is-open) .feno-fila:first-child > .feno-etapa:nth-child(2) {
    max-height: clamp(52px, 12vw, 82px);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
  }
  .feno-etapas:not(.is-open) .feno-fila:first-child > .feno-etapa:nth-child(2) .badge { display: none; }
  .feno-fito { grid-template-columns: 1fr; }
  .feno-fito-col + .feno-fito-col { border-left: 0; padding-left: 0; }
}

/* ============================================================
   GALERÍA  (galeria.html)
   Rejilla de fotos + visor de foto ampliada.
   Las fotos las pone js/galeria.js leyendo assets/galeria/.
   ============================================================ */
.galeria-block {
  width: var(--container);
  margin-inline: auto;
  padding: var(--tope-pagina) 0 var(--section-y);
}

/* ---------- Encabezado ---------- */
.galeria-intro { max-width: 60ch; }
.galeria-intro h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.06;
  font-size: var(--titulo-pagina);
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- Rejilla ----------
   auto-fill + minmax: las columnas las decide el ancho disponible, así
   que la rejilla no depende de cuántas fotos haya. Con tres fotos se
   ven tres tarjetas del mismo tamaño que con treinta; no se estiran
   para rellenar la fila. */
.galeria-grid {
  margin-top: clamp(1.8rem, 3.6vw, 2.8rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 24vw, 300px), 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}

/* Cada foto es un botón (se abre con clic y con teclado). Hay que
   apagarle los estilos que el navegador le pone de fábrica. */
.gal-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow);
  /* La sombra y el desplazamiento se animan; el recorte de la foto, no. */
  transition: transform .25s ease, box-shadow .25s ease;
}
.gal-item img {
  display: block;
  width: 100%;
  /* Todas con el mismo formato para que las filas queden parejas. El
     recorte es solo de la miniatura: el visor enseña la foto entera. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Un pelín de zoom al pasar por encima: el movimiento queda dentro de
     la tarjeta, que no se mueve de su sitio en la rejilla. */
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.gal-item:hover, .gal-item:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.22); }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.045); }
.gal-item:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* Velo verde muy tenue al pasar por encima: la misma familia de color
   que el resto del sitio, no un gris cualquiera. */
.gal-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,107,43,.28), rgba(3,107,43,0) 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.gal-item:hover::after, .gal-item:focus-visible::after { opacity: 1; }

/* Mientras no haya fotos en assets/galeria/ */
.galeria-vacio {
  margin-top: clamp(1.8rem, 3.6vw, 2.8rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  text-align: center;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
}

/* ============================================================
   VISOR DE FOTO AMPLIADA
   Todo lo de atrás se oscurece y la foto queda centrada: NO ocupa
   la pantalla entera, se queda en su tamaño con aire alrededor.
   ============================================================ */
.gal-visor {
  position: fixed;
  inset: 0;
  z-index: 400;              /* por encima del header (100) y del botón de WhatsApp */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .22s ease;
}
.gal-visor.is-open { opacity: 1; }
.gal-visor[hidden] { display: none; }

/* El fondo oscurecido. Es un elemento aparte —y no el fondo del
   visor— porque es lo que se pulsa para cerrar: así un clic sobre la
   foto o sobre las flechas no cierra nada. */
.gal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 12, .78);   /* el mismo verde-negro del header */
  cursor: zoom-out;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gal-scrim {
    background: rgba(8, 22, 12, .68);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
}

/* La foto. max-height en vh y width auto: se ajusta sola tanto si es
   apaisada como si es vertical, y nunca se recorta ni se estira. */
.gal-figura {
  position: relative;
  display: flex;
  max-width: min(100%, 1100px);
  transform: scale(.94);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.gal-visor.is-open .gal-figura { transform: scale(1); }
.gal-foto {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  background: var(--surface);   /* mientras llega, en vez de un rectángulo negro */
}

/* Contador. Flota bajo la foto, fuera de ella: la foto es la foto y no
   lleva nada encima. */
.gal-pie {
  position: absolute;
  left: 50%;
  bottom: clamp(.8rem, 2.5vw, 1.6rem);
  transform: translateX(-50%);
  padding: .45em 1.1em;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.45);
  color: #fafaf7;
  font-size: clamp(.8rem, 1vw, .92rem);
  font-weight: 600;
  letter-spacing: .04em;
  pointer-events: none;
}
.gal-pie[hidden] { display: none; }

/* ---------- Botones del visor (cerrar y flechas) ---------- */
.gal-cerrar, .gal-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(42px, 5vw, 52px);
  height: clamp(42px, 5vw, 52px);
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fafaf7;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.gal-cerrar svg, .gal-nav svg { width: 55%; height: 55%; }
.gal-cerrar:hover, .gal-nav:hover { background: rgba(255,255,255,.24); }
.gal-cerrar:active, .gal-nav:active { transform: scale(.94); }
.gal-cerrar:focus-visible, .gal-nav:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.gal-cerrar[hidden], .gal-nav[hidden] { display: none; }

.gal-cerrar { top: clamp(.8rem, 2.5vw, 1.6rem); right: clamp(.8rem, 2.5vw, 1.6rem); }
.gal-prev   { left:  clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.gal-next   { right: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.gal-prev:active, .gal-next:active { transform: translateY(-50%) scale(.94); }

/* ---------- La página de atrás no se mueve con el visor abierto ----------
   POR QUÉ NO BASTA overflow: hidden
   ---------------------------------
   Es lo que había aquí, y en escritorio y en Android cumple. El problema
   es iOS: ahí ese candado no sujeta el arrastre con el dedo, y la página
   de detrás se sigue moviendo bajo la foto. Es el motivo de que exista
   media docena de librerías dedicadas solo a este candado.

   Lo que sí sujeta en todos los motores es sacar el body del flujo: con
   position: fixed el documento se queda sin nada que desplazar, así que
   no hay scroll que arrastrar ni rebote que sacar. El precio es que el
   body pierde su desplazamiento, y eso hay que devolverlo a mano: al
   abrir, js/galeria.js anota dónde estaba la página y pone ese valor en
   top con signo negativo, de modo que en pantalla NADA se mueve; al
   cerrar, quita el candado y devuelve el scroll de un salto seco.

   El relleno compensa el ancho de la barra de desplazamiento que se
   acaba de quitar (--sb lo mide js/galeria.js): sin él, todo el
   contenido —header fijo incluido— pegaría un salto lateral al abrir la
   foto. Sigue siendo necesario, porque con el body fuera del flujo el
   documento tampoco tiene ya barra.

   overflow: hidden se queda de refuerzo: no estorba y cubre cualquier
   motor donde el truco del fixed tuviera una esquina rara. */
body.gal-bloqueado {
  position: fixed;
  inset-inline: 0;                /* el top lo pone js/galeria.js */
  overflow: hidden;
  padding-right: var(--sb, 0px);
}
body.gal-bloqueado .site-header { padding-right: var(--sb, 0px); }

@media (max-width: 860px) {
  /* En un teléfono no hay sitio para flechas a los lados de la foto: se
     pasa de foto deslizando el dedo. Quedan las dos abajo, juntas, para
     quien no descubra el gesto. */
  .gal-visor { padding: clamp(.8rem, 3vw, 1.5rem); }
  .gal-foto { max-height: 64vh; }
  .gal-prev, .gal-next {
    top: auto;
    bottom: clamp(1.1rem, 4vw, 2rem);
    transform: none;
  }
  .gal-prev { left: calc(50% - clamp(58px, 9vw, 74px)); }
  .gal-next { right: calc(50% - clamp(58px, 9vw, 74px)); }
  .gal-prev:active, .gal-next:active { transform: scale(.94); }
  /* El contador sube para no chocar con las flechas. */
  .gal-pie { bottom: calc(clamp(1.1rem, 4vw, 2rem) + clamp(42px, 5vw, 52px) + .7rem); }
}

@media (max-width: 520px) {
  .galeria-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}

/* Con "reducir movimiento" no hay zoom ni desplazamientos: solo el
   fundido, que es lo que evita el cambio brusco. */
@media (prefers-reduced-motion: reduce) {
  .gal-item, .gal-item img, .gal-figura, .gal-cerrar, .gal-nav { transition: none; }
  .gal-item:hover, .gal-item:focus-visible { transform: none; }
  .gal-item:hover img, .gal-item:focus-visible img { transform: none; }
  .gal-figura { transform: none; }
}