/* Estilos de Costa Viva, portados del prototipo por _build/portar-tema.js.
   No editar a mano mientras el prototipo siga siendo la fuente del diseño.
   Las tipografías se cargan desde fuentes.css. */
:root{
  /* Muestreados de la referencia con canvas: lienzo #E4E4E4, panel #F6F6F6,
     titular negro. Son neutros puros (R=G=B); el verde es solo acento. */
  --fondo:#F6F6F6; --panel:#FFFFFF; --panel-2:#F6F6F6;
  --tinta:#0A0A0A; --cuerpo:#545454; --suave:#6E6E6E;   /* era #7A7A7A y daba 4,29:1 sobre blanco y 3,97 sobre el gris de sección: no llegaba al 4,5 que pide el texto chico. Este da 5,10 / 4,72 / 4,52 sobre las tres superficies claras. */   /* #545454 es el color de texto de la marca */
  --linea:#E4E4E4; --linea-f:#D2D2D2;
  /* Paleta real de la marca (variables globales de Elementor):
     primary #5BC655 · secondary y accent #09AC00 · texto #545454.
     --verde-txt es el MISMO tono oscurecido, no un color de marca: existe
     solo porque #09AC00 da 3,04:1 sobre blanco y el texto pequeño necesita
     4,5:1. Sobre claro mide 6,75:1. */
  --verde:#09AC00; --verde-cl:#5BC655; --verde-txt:#066B00; --verde-tinte:#EAF4E8;
  --hondo:#0C1F10;            /* verde casi negro: hero y cierre */
  --rojo:#B3261E;             /* color semantico de error, no de marca */
  /* Dos radios, no uno solo: las superficies grandes llevan mas curva que
     los controles. Las bandas a sangre siguen rectas — redondear un bloque
     de ancho completo se ve mal. */
  --r:12px; --r-chico:8px; --gutter:14px;
  --proto-alto:0px; --hdr-alto:76px;   /* los mide el JS */
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --texto:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--cuerpo);font-family:var(--texto);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);color:var(--tinta);margin:0;line-height:1.06;
  letter-spacing:-.025em;font-weight:400;text-wrap:balance}
a{color:var(--verde-txt)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}


/* barra del prototipo */





/* ─────────── cabecera ─────────── */
/* La barra del prototipo tambien es sticky en top:0 y tiene z-index mayor:
   tapaba 49px de 77 en escritorio y 113 de 130 en movil. La cabecera se ancla
   debajo. --proto-alto y --hdr-alto los mide el JS y se actualizan al
   redimensionar, porque la barra se parte en dos filas en pantallas chicas. */
.hdr{position:sticky;top:var(--proto-alto,0px);z-index:40;
  background:var(--panel);border-bottom:1px solid var(--linea);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.nav{display:flex;align-items:center;gap:28px;height:76px;
  transition:height .26s cubic-bezier(.4,0,.2,1),gap .26s cubic-bezier(.4,0,.2,1)}
.logo{display:block;width:142px;color:var(--verde-cl);flex:none;
  transition:width .26s cubic-bezier(.4,0,.2,1)}
/* Compacta: baja de 76 a 48 px y devuelve 28 px de pantalla al contenido.
   Se activa al bajar y se deshace al subir, así que el menú entero está
   siempre a un gesto de distancia. Los 48 px son el piso: el botón mide
   36 y necesita su aire, y por debajo de eso la barra deja de leerse
   como cabecera y parece un borde. */
.hdr--compacta{box-shadow:0 1px 10px rgba(12,31,16,.07)}
.hdr--compacta .nav{height:48px;gap:22px}
.hdr--compacta .logo{width:104px}
.hdr--compacta .menu{gap:20px}
.hdr--compacta .menu a{font-size:13.5px}
.hdr--compacta .nav>.btn{padding:6px 14px;font-size:13px;gap:7px}
.hdr--compacta .nav>.btn span{font-size:12px}
.logo svg{width:100%;height:auto;display:block}
.menu{list-style:none;display:flex;gap:26px;margin:0 0 0 14px;padding:0}
/* Los enlaces del menú van en la tipografía de texto, la misma de los
   botones, no en la monoespaciada. */
.menu a{color:var(--cuerpo);text-decoration:none;font-family:var(--texto);font-size:14.5px;
  font-weight:500;letter-spacing:0;padding:5px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--tinta);border-bottom-color:var(--tinta)}
.nav .btn{margin-left:auto}
.solo-movil{display:none}
.hamb{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--tinta);padding:0}
.hamb span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.hdr--sobre .hamb{color:#fff}
.hdr--sobre.hdr--pegado .hamb{color:var(--tinta)}
.hdr--abierto .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr--abierto .hamb span:nth-child(2){opacity:0}
.hdr--abierto .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdr--abierto.hdr--sobre .hamb{color:#fff}

/* En la portada la cabecera flota sobre el hero y se vuelve solida al bajar. */
.hdr--sobre{background:transparent;border-bottom-color:transparent;
  margin-bottom:calc(-1 * var(--hdr-alto,76px))}
.hdr--sobre .logo{color:#fff}
.hdr--sobre .menu a{color:#CBD5C7}
.hdr--sobre .menu a:hover,.hdr--sobre .menu a[aria-current]{color:#fff;border-bottom-color:var(--verde-cl)}
.hdr--sobre.hdr--pegado{background:var(--panel);border-bottom-color:var(--linea)}
.hdr--sobre.hdr--pegado .logo{color:var(--verde-cl)}
.hdr--sobre.hdr--pegado .menu a{color:var(--cuerpo)}
.hdr--sobre.hdr--pegado .menu a:hover,.hdr--sobre.hdr--pegado .menu a[aria-current]{color:var(--tinta);border-bottom-color:var(--tinta)}
/* Sobre el hero el boton sobra: el hero ya tiene el suyo. Aparece justo
   cuando ese se va de pantalla y la cabecera se vuelve solida. */
/* Hijo directo a proposito: el boton del panel de celular tambien cuelga
   del nav, y con el selector suelto quedaba en visibility:hidden. */
.hdr--sobre .nav > .btn{visibility:hidden}
.hdr--sobre.hdr--pegado .nav > .btn{visibility:visible}

/* ─────────── botones ─────────── */
/* Los botones van en la tipografia de texto, no en la monoespaciada: la
   mono queda para rotulos y numeros. */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--texto);font-weight:600;
  font-size:15px;letter-spacing:0;padding:14px 24px;border-radius:var(--r-chico);text-decoration:none;
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,
    padding .26s cubic-bezier(.4,0,.2,1),font-size .26s cubic-bezier(.4,0,.2,1)}
/* Botón primario en el primary #5BC655, sin filete por decisión de diseño.
   Queda anotado: el relleno da 2,18:1 contra el fondo de página, por debajo
   del 3:1 que pide un control para distinguirse. El texto interior sí pasa,
   con 9,10:1, así que la etiqueta se lee bien; lo que pierde nitidez es el
   borde del botón. El hover al accent #09AC00 lo compensa en parte. */
.btn--solid{background:var(--verde-cl);color:var(--tinta)}
.btn--solid:hover{background:var(--verde)}
.btn--fantasma{border-color:rgba(255,255,255,.45);color:#fff}
.btn--fantasma:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* REGLA GENERAL (Mauricio, 6-sep): los botones van sin filete.
   Queda anotado que el relleno blanco sobre #5BC655 da 2,18:1, por debajo
   del 3:1 que pide un control; el texto interior sí pasa con 19,8:1.
   El hover invierte a fondo oscuro, que sí destaca contra el verde. */
.btn--blanco{background:#fff;color:var(--tinta)}
.btn--blanco:hover{background:var(--tinta);color:#fff}

/* ─────────── hero de portada ─────────── */
.hero{position:relative;overflow:hidden;background:var(--hondo);
  min-height:min(92vh,780px);display:flex;flex-direction:column}
/* La cabeza del operario esta pegada al borde superior de la foto, asi que
   cualquier recorte vertical se la come: por eso va anclada arriba.
   El 58% horizontal la mantiene dentro del cuadro en pantallas angostas.
   El 112% de alto es la holgura que el parallax necesita para desplazarse
   sin dejar una franja vacia en el hero. */
.hero-bg{position:absolute;top:0;left:0;width:100%;height:112%;
  object-fit:cover;object-position:58% top;transform-origin:50% 0}
.hero-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,20,10,.74) 0%,rgba(8,20,10,.30) 34%,rgba(8,20,10,.56) 68%,rgba(8,20,10,.90) 100%)}
/* width:100% es obligatorio: .wrap trae margin:0 auto y, dentro de un flex
   container en columna, un margen automatico transversal desactiva el stretch
   y encoge el bloque al ancho de su contenido. */
.hero-cuerpo{position:relative;flex:1;width:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding:112px clamp(20px,4vw,52px) 46px}
.hero h1{color:#fff;font-size:clamp(40px,6.2vw,88px);font-weight:400;
  letter-spacing:-.04em;line-height:1.0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--verde-cl)}
.hero-pie{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px;margin-top:64px}
.hero-pie p{color:#CBD5C7;font-size:15px;margin:0;max-width:46ch;flex:1 1 240px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ─────────── hero de paginas internas ─────────── */
.phero{background:#FFFFFF;padding:clamp(40px,6vw,78px) 0 clamp(38px,5vw,58px)}
.phero h1{font-size:clamp(34px,5.4vw,64px);font-weight:400;letter-spacing:-.03em;
  max-width:17ch;margin-bottom:26px}
.phero .lede{max-width:66ch;margin:0 0 14px}
/* Índice de la página. Reemplaza a los chips del hero, que repetían cifras
   que ya aparecían más abajo y no llevaban a ninguna parte. */
.salta{margin-top:30px}
.salta-rot{display:block;font-family:var(--display);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:12px}
.salta ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
/* Enlaces subrayados, no botones: son navegación secundaria y en forma de
   píldora competían con el botón de cotizar, que es la acción de la página. */
.salta a{position:relative;display:inline-block;font-family:var(--texto);font-size:14.5px;
  font-weight:500;color:var(--verde-txt);text-decoration:none;padding-bottom:3px}
.salta a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.38;transition:opacity .18s ease,height .18s ease}
/* El hover engrosa y opaca el subrayado. El color no se mueve: #066B00 sobre
   blanco da 6,75:1, y cualquier verde más vivo bajaría de 4,5:1. */
.salta a:hover::after,.salta a:focus-visible::after{opacity:1;height:2px}
/* que el titular no quede tapado por la cabecera al saltar */
section[id]{scroll-margin-top:calc(var(--proto-alto,0px) + 94px)}
.miga{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:11.5px;
  color:var(--suave);padding:18px 0 0}
.miga a{color:var(--suave);text-decoration:none}
.miga a:hover{color:var(--verde-txt)}
.tira-miga{background:#FFFFFF}

/* ─────────── paneles de seccion ─────────── */
/* 7vw daba 100,8px arriba y abajo: 202px de vacío entre cada par de
   secciones, y como muchas comparten fondo se leía como un hueco. */
.banda{background:var(--fondo);padding:clamp(42px,4.6vw,72px) 0}
.banda--alt{background:#FFFFFF}

/* Rótulo de sección. Antes iba en monoespaciada con una barra delante:
   ese registro es de software, no de una empresa de alimentos. Ahora va en
   la tipografía de titulares, en versalitas espaciadas, con un filete corto
   en verde de marca que hace de ancla visual en lugar de la barra. */
.eyebrow{display:flex;align-items:center;gap:13px;font-family:var(--display);
  font-size:12px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--verde-txt);margin-bottom:22px}
.eyebrow::before{content:'';flex:none;width:24px;height:1.5px;background:currentColor}
.eyebrow--claro{color:#123A0D}

.h-sec{font-size:clamp(30px,5vw,62px);font-weight:400;letter-spacing:-.035em;
  max-width:18ch;margin-bottom:34px}
.lede{font-size:17px;max-width:66ch;margin:0 0 14px}
.intro p{font-size:16.5px;max-width:66ch;margin:0 0 14px}
/* Los contadores van entre el texto y el índice, que queda de último
   como en las otras dos internas. */
.phero .cifras{margin-top:44px}
.phero .cifras+.salta{margin-top:38px}

/* La C de la marca como icono suelto. */
.marca-c{display:inline-block;line-height:0}
.marca-c svg{display:block;height:1em;width:auto}

/* Costos: el texto a la izquierda y, al lado, una cotización de mentira.
   Es decorativa a propósito —no dice ninguna cifra— porque los precios
   dependen de cada proyecto y no hay ninguno que podamos publicar. */
.costos{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,4vw,60px);
  align-items:start;margin-top:8px}
.cotiza{background:var(--panel-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:20px 20px 16px}
.banda--alt .cotiza{background:var(--panel-2)}
.cotiza-cab{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--suave);padding-bottom:14px;border-bottom:1px solid var(--linea)}
.cotiza-cab .marca-c{color:var(--verde);font-size:13px}
.cotiza-filas{list-style:none;margin:0;padding:14px 0 4px}
.cotiza-filas li{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:9px 0}
.cotiza-filas i{display:block;height:8px;border-radius:99px;background:#DFDFDF}
.cotiza-filas i+i{background:#EAEAEA}
.cotiza-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding-top:14px;border-top:1px solid var(--linea)}
.cotiza-total span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave)}
.cotiza-total b{font-family:var(--display);font-size:23px;font-weight:400;
  letter-spacing:-.02em;color:var(--verde-txt)}
@media (max-width:900px){
  .costos{grid-template-columns:1fr;gap:30px}
}
.intro p:last-child{margin-bottom:0}

/* apertura de portada: parrafo grande y parrafo de apoyo al lado */
.apertura{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.apertura .destacado{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.5vw,31px);
  line-height:1.28;letter-spacing:-.02em;color:var(--tinta);margin:0}
.apertura .apoyo{margin:0;font-size:15.5px;color:var(--cuerpo)}
/* Titular y bajada en paralelo: apilados, la sección se pasaba de una
   pantalla por hasta 58px. */
.apertura--cab{align-items:end}
.apertura--cab .h-sec{margin-bottom:0}
.apertura--cab .lede:last-child{margin-bottom:0}

/* cifras */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;margin-top:52px;border-top:1px solid var(--linea)}
/* Mismo componente sobre el hero oscuro.
   OJO: la clase doble .cifras.cifras--hero es obligatoria. Con una sola clase
   la especificidad empata con .cifras b y .cifras span, que estan mas abajo
   en la hoja y ganaban por orden: las cifras salian en casi negro sobre la
   foto oscura (1,50:1) y no se leian. */
.cifras.cifras--hero{margin-top:52px;border-top-color:rgba(255,255,255,.28)}
.cifras.cifras--hero>div{border-right-color:rgba(255,255,255,.20)}
.cifras.cifras--hero b{color:#fff}
.cifras.cifras--hero span{color:#C9D6C7}
.cifras>div{padding:24px 16px 0;text-align:center;border-right:1px solid var(--linea)}
.cifras>div:last-child{border-right:0}
.cifras b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,42px);
  font-weight:400;letter-spacing:-.03em;color:var(--tinta);line-height:1;
  font-variant-numeric:tabular-nums}
.cifras span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--suave);margin-top:12px;text-transform:uppercase}

/* fichas de servicio: manda la foto, el texto va encima */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gutter)}
.ficha{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;
  display:flex;align-items:flex-end;background:var(--hondo)}
.ficha-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
/* La tarjeta entera navega (usa el mismo data-ir que el enlace), así que
   tiene que verse activa entera: la foto se acerca y el enlace se enciende
   aunque el puntero no esté justo encima de él. */
.ficha{cursor:pointer}
.ficha:hover .ficha-img{transform:scale(1.055)}
.ficha:hover .enlace{color:var(--verde-cl)}
.ficha:hover .enlace::after{transform:scaleX(1)}
.ficha:hover .enlace span{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .ficha-img{transition:none}
  .ficha:hover .ficha-img{transform:none}
}
.ficha::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,20,10,.18) 0%,rgba(8,20,10,.46) 45%,rgba(8,20,10,.93) 100%)}
.ficha-txt{position:relative;z-index:1;padding:32px;display:flex;flex-direction:column;gap:12px}
.ficha-txt .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--verde-cl)}
.ficha-txt h3{color:#fff;font-size:clamp(24px,2.6vw,32px);font-weight:400;letter-spacing:-.025em}
.ficha-txt p{margin:0;color:#C6D2C3;font-size:15px;max-width:44ch}
.ficha .enlace{color:#fff;margin-top:4px}
.ficha .enlace:hover{color:var(--verde-cl)}
/* Hover del enlace: cambia de color y el subrayado crece desde la izquierda.
   Solo el color se notaba poco a este tamaño de letra.
   El subrayado se corta antes de la flecha, que ya se mueve por su cuenta. */
.enlace{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-decoration:none;
  display:inline-flex;gap:8px;align-items:center;color:var(--verde-txt);
  position:relative;align-self:flex-start;transition:color .18s ease}
.enlace::after{content:'';position:absolute;left:0;right:24px;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.enlace:hover{color:var(--tinta)}
.enlace:hover::after{transform:scaleX(1)}
.enlace:hover span{transform:translateX(4px)}
.enlace span{transition:transform .16s ease;display:inline-block}
@media (prefers-reduced-motion:reduce){
  .enlace::after{transition:none}
  .enlace span{transition:none}
}

/* Banda de foto a lo ancho de la sección. La usa «Qué maquilamos»: es un
   lineup horizontal de productos y en una columna vertical se perdía el 49%
   del ancho, o sea la mitad del portafolio. */
.banda-foto{margin:26px 0 0;border-radius:var(--r);overflow:hidden;
  background:#FFFFFF;border:1px solid var(--linea)}
.banda-img{display:block;width:100%;height:auto}
/* La foto y las listas en una sola vista: dos columnas en vez de la foto
   debajo, que obligaba a hacer scroll para ver ambas cosas. */
.dupla{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;
  gap:clamp(28px,4vw,64px);align-items:stretch}
.dupla-foto{position:relative;overflow:hidden;border-radius:var(--r);min-height:340px}
.dupla-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La foto del equipo es vertical (3024x4032) y la gente ocupa la mitad de
   abajo. Con el encuadre centrado, cover mostraba techo de almacen y cortaba
   al grupo por la cintura. */
#desarrollo-equipo .dupla-img{object-position:50% 72%}
/* En columna el titular no necesita el tamaño de una seccion a ancho completo. */
.dupla-txt .h-sec{font-size:clamp(28px,3.2vw,44px);margin-bottom:14px;max-width:none}
.dupla-txt .lede{margin-bottom:26px}
/* Las dos listas lado a lado dentro de la columna: apiladas la seccion medía
   1074px y no entraba en una pantalla. */
/* En columna las cifras son mas angostas: a tamaño completo «+650 mil»
   partia en dos lineas y desalineaba los rotulos. */
.dupla-txt .cifras{margin-top:38px}
.dupla-txt .cifras b{font-size:clamp(25px,2.3vw,34px)}
.dupla-txt .cifras>div{padding:22px 12px 0}
.dupla-txt .lede{font-size:16px}
/* Espejada: cuando una página lleva dos duplas, alternar el lado de la foto
   evita que se lean como la misma pieza repetida. */
.dupla--espejo{grid-template-columns:1.2fr minmax(240px,.8fr)}
.dupla--espejo .dupla-foto{order:2}
@media (max-width:900px){
  .dupla{grid-template-columns:1fr;gap:32px}
  .dupla--espejo .dupla-foto{order:0}
  .dupla-foto{aspect-ratio:16/10;min-height:0}
}
@media (max-width:620px){
  .dupla-txt .cats{grid-template-columns:1fr}
}
/* En portátiles de pantalla baja el aire de sección se come la vista: con
   768px de alto la sección de categorías no entraba por 15px, y con 720 por 49.
   Se recorta el respiro vertical, no el contenido. */
@media (max-height:850px){
  .banda{padding-top:clamp(32px,4vh,56px);padding-bottom:clamp(32px,4vh,56px)}
  /* En pantalla baja la sección de categorías se aprieta un poco más: es la
     más alta de la portada y con la foto nueva se pasaba por 46px. */
  .wrap--cat .h-sec{margin-bottom:12px}
  .wrap--cat .lede{margin-bottom:0}
  .wrap--cat .banda-foto{margin-top:14px}
  .wrap--cat .cat li{padding:6px 0}
  .wrap--cat .cat{padding:16px 16px 12px}
  .wrap--cat .eyebrow{margin-bottom:12px}
  .wrap--cat .cat-cab{padding-bottom:10px;margin-bottom:2px}
}
/* Categorías como tarjetas tintadas con un icono por fila, según la
   referencia. Sin chevron a la derecha: las filas no son enlaces y una
   flecha ahí prometería una navegación que no existe. */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  align-items:stretch;margin-top:28px}
.cat{border-radius:var(--r);padding:20px 18px 16px;display:flex;flex-direction:column}
/* Blanca sobre el fondo gris de sección, gris sobre las secciones blancas:
   con --panel-2 quedaba del mismo color que la banda. */
.cat--masivo{background:var(--panel);border:1px solid var(--linea)}
.cat--funcional{background:var(--verde-tinte);border:1px solid #D7E9D4}
.banda--alt .cat--masivo{background:var(--panel-2)}
.cat-cab{display:flex;align-items:flex-start;gap:11px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--linea)}
.cat--funcional .cat-cab{border-bottom-color:#D2E7CF}
.cat-cab h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:0}
.cat-cab .icono{margin:0;flex:none;width:30px;height:30px;padding:5px;border-radius:50%;
  background:#fff;color:var(--suave)}
.cat--funcional .cat-cab .icono{color:var(--verde-txt)}
.cat ul{margin:0;padding:0;list-style:none}
.cat li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;font-size:14px;
  line-height:1.4;border-bottom:1px solid var(--linea)}
.cat--funcional li{border-bottom-color:#D2E7CF}
.cat li:last-child{border-bottom:0}
.cat li .icono{margin:0;flex:none;width:22px;height:22px;color:var(--suave)}
.cat--funcional li .icono{color:var(--verde-txt)}
/* La tarjeta verde tiene cuatro filas contra siete, así que al emparejar los
   altos le sobraba aire abajo. Ese aire es ahora el CTA: margin-top:auto lo
   pega al fondo, y no agrega altura mientras entre en lo que sobra. */
.cat-pie{margin-top:auto;padding-top:12px;border-top:1px solid #D2E7CF}
.cat-pie span{display:block;font-size:13px;line-height:1.35;color:var(--cuerpo);margin-bottom:7px}
@media (max-width:620px){ .cats{grid-template-columns:1fr} }
/* La columna de foto de esta sección es más ancha: la foto es un lineup de
   productos y necesita ancho para no perder la mitad del portafolio. */
/* «Qué maquilamos» lleva el lineup de productos como banda a lo ancho, no
   como foto en columna. Ya se probó la columna y no funciona: la foto es una
   tira de 3,05:1 con 20 envases y, recortada a una columna angosta, a 1024px
   quedaba en el 21% del ancho y se perdían Bell's, Gloranta y Timonel.
   Si alguna vez vuelve a una columna, la foto tiene que ser otra. */

/* Muro de logos: son 9, y 9 solo cae parejo en 3 columnas. Con auto-fit
   quedaban filas de 5+4 y, cerca de 1100px, un logo solo en la ultima. */
.muro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:8px}
/* Tarjeta de dos caras. El giro solo se activa donde hay puntero real:
   en pantallas táctiles no hay hover y quedaría contenido inalcanzable.
   tabindex hace que también se pueda llegar con el teclado. */
.lg{height:150px;position:relative;perspective:900px;border-radius:var(--r);
  outline-offset:3px}
.lg-cara{position:absolute;inset:0;border:1px solid var(--linea);border-radius:var(--r);
  display:grid;place-items:center;padding:18px;backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.lg-frente{background:var(--panel)}
.banda--alt .lg-frente{background:var(--panel-2)}
.lg-dorso{background:var(--hondo);border-color:var(--hondo);color:#fff;
  transform:rotateY(180deg);align-content:center;gap:8px;text-align:center;padding:16px}
.lg-dorso b{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.015em}
.lg-dorso span{font-size:12.5px;line-height:1.4;color:#B9C9B6}
.lg-dorso em{font-style:normal;font-size:12.5px;line-height:1.4;color:#fff}
.lg img{max-height:78px;width:auto;object-fit:contain}
@media (hover:hover){
  .lg:hover .lg-frente{transform:rotateY(-180deg)}
  .lg:hover .lg-dorso{transform:rotateY(0)}
}
.lg:focus-visible .lg-frente{transform:rotateY(-180deg)}
.lg:focus-visible .lg-dorso{transform:rotateY(0)}
@media (prefers-reduced-motion:reduce){
  /* Sin giro: las caras se cruzan por opacidad. */
  .lg-cara{transition:opacity .2s ease;backface-visibility:visible}
  .lg-dorso{transform:none;opacity:0}
  .lg:hover .lg-frente,.lg:focus-visible .lg-frente{transform:none;opacity:0}
  .lg:hover .lg-dorso,.lg:focus-visible .lg-dorso{transform:none;opacity:1}
}

/* testimonios */
.citas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gutter)}
/* Las tarjetas llevaban el mismo fondo que su seccion y quedaban invisibles.
   Regla del sistema: sobre el fondo gris van blancas, sobre blanco van grises,
   y siempre con filete. */
.cita{margin:0;background:var(--panel);border:1px solid var(--linea);border-top:2px solid var(--verde);
  border-radius:var(--r);
  padding:34px 32px 30px;display:flex;flex-direction:column;gap:20px}
.banda--alt .cita{background:var(--panel-2)}
.cita blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--cuerpo)}
.cita figcaption{margin-top:auto;padding-top:18px;border-top:1px solid var(--linea)}
.cita figcaption b{display:block;font-family:var(--display);color:var(--tinta);
  font-size:16px;font-weight:500;letter-spacing:-.01em}
.cita figcaption span{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.02em;color:var(--suave);margin-top:5px;text-transform:uppercase}

/* Las cinco etapas son una secuencia real, así que se dibujan como línea de
   proceso y no como tarjetas sueltas: el hilo entre nodos es la información.
   Ocupa bastante menos alto que las cinco cajas anteriores. */
.pasos{list-style:none;margin:clamp(40px,4.4vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.paso{position:relative;padding:0 12px;text-align:center}
.paso::before{content:'';position:absolute;top:21px;right:50%;width:100%;height:2px;
  background:#BFE5BC}
.paso:first-child::before{display:none}
.paso-n{position:relative;z-index:1;width:44px;height:44px;margin:0 auto 18px;
  border-radius:50%;background:var(--verde-cl);color:var(--tinta);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500}
.paso b{display:block;font-family:var(--display);color:var(--tinta);font-size:16px;
  font-weight:500;letter-spacing:-.015em;line-height:1.24;margin-bottom:8px}
.paso-d{display:block;font-size:13.5px;color:var(--cuerpo);line-height:1.45}
@media (max-width:820px){
  /* En vertical la línea pasa al costado y el texto queda alineado a la izquierda. */
  .pasos{grid-template-columns:1fr;gap:0}
  .paso{display:grid;grid-template-columns:44px 1fr;column-gap:18px;text-align:left;
    padding:0 0 26px}
  .paso::before{top:44px;left:21px;right:auto;width:2px;height:calc(100% - 44px)}
  .paso:first-child::before{display:block}
  .paso:last-child::before{display:none}
  .paso-n{margin:0;grid-row:1 / span 2}
  .paso b{align-self:center;margin-bottom:6px}
  .paso-d{grid-column:2}
}

/* preguntas frecuentes */
.faq{margin-top:8px;border-top:1px solid var(--linea-f);max-width:860px}
.faq details{border-bottom:1px solid var(--linea-f)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:500;color:var(--tinta);font-size:17.5px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:10px;top:29px;width:9px;height:9px;
  border-right:1.5px solid var(--verde);border-bottom:1.5px solid var(--verde);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 24px;max-width:66ch}

/* bloques de nosotros */
/* Misión y visión sí van del mismo alto: son un par y sus textos tienen
   largo parecido. Los valores siguen a la altura de su contenido, porque
   ahí las diferencias de largo son grandes y estirarlos deja huecos. */
.duo-txt{display:grid;gap:var(--gutter);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.duo-txt .bloque{display:flex;flex-direction:column}
/* Los tres valores del mismo alto, pedido por Mauricio sabiendo que la
   tarjeta más corta queda con aire abajo. */
.valores{display:grid;gap:var(--gutter);align-items:stretch}
.valores .bloque{display:flex;flex-direction:column}
.valores{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.valores.valores--nombres{display:flex;flex-wrap:wrap;justify-content:center}
.valores--nombres .bloque{flex:0 1 calc((100% - 4 * var(--gutter)) / 5);align-items:center;
  text-align:center;padding:28px 16px 26px}
.valores--nombres .bloque .icono{margin:0 auto 16px}
.valores--nombres .bloque h3{margin-bottom:0;font-size:18px}
@media (max-width:900px){ .valores--nombres .bloque{flex-basis:calc((100% - 2 * var(--gutter)) / 3)} }
@media (max-width:560px){ .valores--nombres .bloque{flex-basis:calc((100% - var(--gutter)) / 2)} }
.bloque{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:30px 32px}
.banda--alt .bloque{background:var(--panel-2)}
.bloque h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:12px}
.bloque p{margin:0}
.bloque .num{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--verde-txt);margin-bottom:14px}
/* Diagrama de distribución. La barra horizontal y los tramos verticales
   dicen «de acá sale a estos cinco lados»: es información, no adorno. */
.mapa{margin-top:36px}
.mapa-origen{display:inline-flex;align-items:center;gap:12px;background:var(--hondo);
  color:#fff;padding:13px 22px;border-radius:var(--r-chico);font-family:var(--display);
  font-weight:500;font-size:16px;position:relative;left:50%;transform:translateX(-50%)}
.mapa-origen .marca-c{display:block;width:26px;color:var(--verde-cl)}
.mapa-origen .marca-c svg{display:block;width:100%;height:auto}
.mapa-rama{list-style:none;margin:0;padding:36px 0 0;position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gutter)}
.mapa-rama::before{content:'';position:absolute;top:18px;left:10%;right:10%;height:2px;background:#BFE5BC}
.mapa-rama::after{content:'';position:absolute;top:0;left:50%;width:2px;height:18px;
  margin-left:-1px;background:#BFE5BC}
.mapa-canal{position:relative;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);padding:22px 14px;text-align:center;font-size:14.5px}
.mapa-canal::before{content:'';position:absolute;top:-18px;left:50%;width:2px;height:18px;
  margin-left:-1px;background:#BFE5BC}
.mapa-canal .icono{margin:0 auto 12px;color:var(--verde-txt)}
.banda--alt .mapa-canal{background:var(--panel-2)}
@media (max-width:820px){
  /* Sin conectores en vertical: la barra horizontal no tiene sentido apilada. */
  .mapa-origen{left:0;transform:none}
  .mapa-rama{grid-template-columns:1fr 1fr;padding-top:18px;gap:10px}
  .mapa-rama::before,.mapa-rama::after,.mapa-canal::before{display:none}
  .mapa-canal{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px}
  .mapa-canal .icono{margin:0;flex:none;width:22px;height:22px}
}
/* Nota de apoyo: dice lo mismo que una sección pero sin pesar como tal.
   El filete verde a la izquierda la marca como respaldo, no como tema nuevo.
   Se llama .aval y no .nota porque .nota ya existe dentro de la barra del
   prototipo: la regla global se la aplicaba y la barra crecía a 158px. */
.aval{display:grid;grid-template-columns:minmax(210px,.8fr) 1.2fr;gap:clamp(18px,3vw,44px);
  margin-top:clamp(22px,3.2vw,44px);padding:22px 28px;background:var(--panel);
  border:1px solid var(--linea);border-left:3px solid var(--verde-cl);border-radius:var(--r)}
/* Enlace dentro del cuerpo de texto: subrayado, porque un enlace en medio
   de un párrafo tiene que distinguirse por algo más que el color. */
.liga{color:var(--verde-txt);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .16s ease}
.liga:hover{color:var(--tinta)}
.aval .eyebrow{margin-bottom:8px}
.aval h3{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.aval p{margin:0;font-size:15.5px}
@media (max-width:820px){ .aval{grid-template-columns:1fr;gap:14px} }
/* Iconos dibujados a mano en SVG, no de una libreria externa: la CSP del
   prototipo bloquea imagenes de otros dominios y asi heredan currentColor. */
.icono{width:26px;height:26px;display:block;margin-bottom:16px;color:var(--verde-txt)}
.icono svg{width:100%;height:100%;display:block}
.canal .icono{margin-bottom:12px}

/* Banda de marca propia, a mitad de /maquila/. Oscura para no competir con
   el cierre verde. Verde claro sobre #0C1F10 y blanco dan de sobra. */
.banda--marca{background:var(--hondo);color:#fff}
.marca-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
.banda--marca .eyebrow{color:var(--verde-cl)}
.banda--marca h2{color:#fff;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;margin:0 0 16px}
.banda--marca p{color:#C6D2C3;font-size:17px;line-height:1.55;max-width:42ch;margin:0 0 28px}
.marca-foto{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10}
.marca-img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){ .marca-grid{grid-template-columns:1fr} }

/* cierre */
/* El cierre usaba el mismo verde casi negro que el pie, asi que los dos se
   fundian en un solo bloque oscuro al final de la pagina. Ahora es un
   contenedor de verde de marca sobre fondo claro: se despega del pie y es
   lo que mas resalta. */
/* El cierre va en el primary #5BC655, no en el accent. El botón se invierte
   a casi negro: en blanco quedaba en 2,18:1 sobre este verde y no se
   distinguía como control. En negro da 9,10:1. */
.banda--cierre{padding-top:clamp(20px,2.4vw,36px)}
/* 76px arriba y abajo eran el 42% del alto del bloque, con solo 206px de
   contenido. El horizontal se mantiene: ahí el aire sí hace falta. */
/* Un tono por debajo del #5BC655: el bloque ocupa el ancho entero y a ese
   tamaño el verde vivo pesaba demasiado. Sobre este verde el párrafo da
   6,68:1 y el titular 10,3:1, mejor que antes. */
.cierre{background:#7ACE74;color:#123A0D;border-radius:var(--r);
  padding:clamp(30px,3.2vw,46px) clamp(28px,4vw,60px)}
/* Icono dibujado a mano, no de Flaticon: la vista previa bloquea imágenes de
   afuera y la licencia gratuita de Flaticon exige atribución visible. */
.cta-grid{display:grid;grid-template-columns:1.5fr auto;gap:36px;align-items:end}
.cierre h2{color:var(--tinta);font-size:clamp(26px,3.6vw,46px);
  font-weight:400;letter-spacing:-.03em;max-width:18ch;margin-bottom:0}
.cierre p{color:#123A0D;margin:16px 0 0;max-width:56ch;font-size:16px}

/* formulario */
.form-grid{display:grid;grid-template-columns:minmax(240px,.85fr) 1.3fr;gap:clamp(28px,5vw,64px);align-items:start}
.canal{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
.canal h3{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--suave);margin-bottom:9px}
.canal p{margin:0;font-size:15.5px}
.form{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:34px}
.form-cab{font-family:var(--display);font-weight:400;color:var(--tinta);font-size:24px;
  letter-spacing:-.025em;margin-bottom:24px}
.campos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
/* 6 columnas para mezclar tercios (c2) y dos tercios (c4); .full es el ancho entero.
   Los rótulos alinean al pie para que un rótulo que parta en dos renglones
   no desnivele los campos de la misma fila. */
.campos > label{grid-column:span 3;justify-content:flex-end}
.campos > label.c2{grid-column:span 2}
.campos > label.c4{grid-column:span 4}
.campos input:not([type="radio"]),.campos select{height:44px}
@media (max-width:1200px){ .form-grid{grid-template-columns:1fr} }
/* Tipo de maquila: tarjetas de opción con descripción desplegable.
   Las reglas van con .campos delante porque .campos label y .campos input
   (monoespaciada, mayúsculas, ancho 100%) pisarían a las tarjetas. */
.tipo{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.tipo legend{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--suave);padding:0;margin-bottom:7px}
.tipo-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tipo-op{position:relative;display:flex;align-items:center;border:1px solid var(--linea-f);
  border-radius:var(--r-chico);background:var(--panel);transition:border-color .16s ease,background .16s ease}
.tipo-op:has(input:checked){border-color:var(--verde);background:var(--verde-tinte)}
/* El contorno de foco va en la tarjeta, no en el radio: la regla global lo
   dibujaba cuadrado alrededor del círculo, y en Chrome un radio activa
   :focus-visible también con el mouse. */
.tipo-op:has(input:focus-visible){outline:2px solid var(--verde);outline-offset:3px}
.campos .tipo-op input:focus,.campos .tipo-op input:focus-visible{outline:none}
.campos .tipo-op label{flex:1;flex-direction:row;align-items:center;gap:9px;padding:11px 4px 11px 12px;
  font-family:var(--texto);font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--tinta);cursor:pointer}
.campos .tipo-op label b{font-weight:600}
.campos .tipo-op input{width:auto;padding:0;margin:0;border:0;flex:none;accent-color:var(--verde-txt)}
.tipo-op .info{flex:none;width:26px;height:26px;margin-right:9px;border:0;padding:0;
  background:none;color:var(--suave);cursor:pointer;display:grid;place-items:center;
  transition:color .16s ease}
.tipo-op .info svg{width:100%;height:100%;display:block}
.tipo-op .info:hover,.tipo-op .info[aria-expanded="true"]{color:var(--verde-txt)}
.tipo-op .info:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:50%}
.tipo-op .ayuda{display:none;position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;margin:0;
  padding:10px 12px;border-radius:var(--r-chico);background:var(--hondo);color:#fff;
  font-family:var(--texto);font-size:13px;line-height:1.45;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.tipo-op.abierta .ayuda,.tipo-op .info:focus-visible ~ .ayuda{display:block}
@media (hover:hover){ .tipo-op .info:hover ~ .ayuda{display:block} }
@media (max-width:760px){ .tipo-ops{grid-template-columns:1fr} }
.campos label{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--suave)}
.campos label.full{grid-column:1/-1}
.campos input,.campos select,.campos textarea{font-family:var(--texto);font-size:15px;
  color:var(--tinta);border:1px solid var(--linea-f);border-radius:var(--r-chico);padding:11px 13px;
  background:var(--panel);width:100%;text-transform:none;letter-spacing:0}
.campos input:focus,.campos select:focus,.campos textarea:focus{outline:2px solid var(--verde-txt);
  outline-offset:1px;border-color:var(--verde-cl)}
.form .btn{margin-top:22px}
.form-pie{font-family:var(--mono);font-size:11px;color:var(--suave);margin:16px 0 0}
/* Estados de error. El rojo es color semantico y no compite con el verde
   de marca: se usa solo para senalar problemas. */
.form-leyenda{font-family:var(--mono);font-size:11px;color:var(--suave);margin:-14px 0 20px}
.campos label em,.form-leyenda em{font-style:normal;color:var(--rojo)}
.campos label.mal>span{color:var(--rojo)}
.campos label.mal input,.campos label.mal select,.campos label.mal textarea{
  border-color:var(--rojo);background:#FDF4F3}
.campos label.mal input:focus,.campos label.mal textarea:focus{outline-color:var(--rojo)}
.campos .aviso{font-family:var(--texto);font-size:12.5px;line-height:1.45;color:var(--rojo);
  text-transform:none;letter-spacing:0}
.form-estado{display:none;margin:18px 0 0;padding:13px 15px;font-size:14.5px;line-height:1.5;
  border-radius:0 var(--r-chico) var(--r-chico) 0}
.form-estado--mal{display:block;color:var(--rojo);background:#FDF4F3;border-left:2px solid var(--rojo)}
.form-estado--bien{display:block;color:#0A5405;background:var(--verde-tinte);border-left:2px solid var(--verde)}

/* pie */
.ft{background:var(--hondo);color:#A9BCA6;padding:62px 0 34px;font-size:15px}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:38px}
.ft h3{font-family:var(--mono);color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:18px}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* Mismo hover que los enlaces de las fichas: el color cambia y el subrayado
   crece desde la izquierda. En el pie hay muchos enlaces juntos, así que la
   señal tiene que ser clara y no solo un cambio de tono. */
.ft a{color:#A9BCA6;text-decoration:none;position:relative;transition:color .18s ease}
.ft a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.ft a:hover{color:#fff}
.ft a:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){ .ft a::after,.salta a::after,.nav,.logo,.hdr{transition:none} }
.ft-logo{width:142px;color:var(--verde-cl);margin-bottom:20px}
.ft-logo svg{width:100%;height:auto;display:block}
.ft-marca p{margin:0;max-width:36ch;line-height:1.6;color:#8FA98C}
.ft address{font-style:normal;line-height:1.7}
.ft address strong{color:#fff;display:block;font-weight:500}

/* Animaciones. Del pliegue para abajo el reveal NO usa opacidad: cualquier
   cosa en opacity:0 deja la pagina vacia en una miniatura o al imprimir.
   Solo el hero usa opacidad, porque entra al cargar y termina visible. */
@keyframes asomar{from{transform:translateY(18px)}to{transform:none}}
@keyframes subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rev{animation:asomar .5s linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
/* Si GSAP cargo, el reveal lo maneja el. Si el CDN falla, queda el de CSS. */
.gsap-si .rev{animation:none}
/* La entrada del hero la hace GSAP. Esto solo corre si el CDN no cargo: una
   animacion CSS gana sobre el estilo en linea y pisaria a la de GSAP. */
@media (prefers-reduced-motion:no-preference){
  html:not(.gsap-si) .hero-cuerpo>*{animation:subir .55s cubic-bezier(.2,.7,.3,1) both}
  html:not(.gsap-si) .hero-cuerpo>*:nth-child(2){animation-delay:.08s}
}

@media (max-width:980px){
  .apertura{grid-template-columns:1fr;gap:24px}
  .form-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;align-items:start}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ficha{min-height:380px}
}
@media (max-width:760px){
  .nav{height:64px;column-gap:14px}
  .logo{width:120px}
  .solo-ancho{display:none}
  .hamb{display:inline-flex;margin-left:auto}
  /* El panel va en position:absolute a proposito: si estuviera en el flujo,
     abrirlo cambiaria el alto de la cabecera y con el --hdr-alto, que es lo
     que fija el margen negativo del hero. */
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    margin:0;gap:0;padding:6px 0 20px;background:var(--hondo);
    box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
  .hdr--abierto .menu{display:flex}
  .menu li{border-bottom:1px solid rgba(255,255,255,.12)}
  /* display:block explícito: la regla base .solo-movil{display:none} gana
     si no se revierte, y el panel se quedaba sin botón de cotizar. */
  .menu li.solo-movil{display:block;border-bottom:0;padding:18px clamp(20px,4vw,52px) 0}
  /* .menu a pisa a .btn por especificidad (0,1,1 contra 0,1,0): sin esto el
     boton del panel salia en monoespaciada, en bloque y alineado a la
     izquierda, distinto de todos los demas botones del sitio. */
  .menu li.solo-movil .btn{display:inline-flex;width:100%;justify-content:center;
    font-family:var(--texto);font-weight:600;font-size:15px;letter-spacing:0;
    padding:14px 24px;color:var(--tinta);border-radius:var(--r-chico)}
  .menu a{display:block;padding:17px clamp(20px,4vw,52px);font-size:16px;
    font-weight:500;color:#D7E2D5;border-bottom:0;white-space:nowrap}
  .menu a:hover,.menu a[aria-current]{color:#fff;border-bottom-color:transparent}
  .hdr--sobre .menu a,.hdr--sobre.hdr--pegado .menu a{color:#D7E2D5}
  .hdr--sobre .menu a[aria-current],.hdr--sobre.hdr--pegado .menu a[aria-current]{color:#fff}
  /* La vertical ya viene encuadrada; el 58% es para la panorámica. */
  .hero-bg{object-position:50% top}
  .hero-cuerpo{padding:150px clamp(20px,4vw,52px) 38px}
  .hero-pie{margin-top:44px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .cifras>div{border-right:0;border-bottom:1px solid var(--linea);padding:18px 0}
  /* El hero es la excepción: sus cuatro cifras van en una sola fila. */
  .cifras.cifras--hero{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px}
  .cifras.cifras--hero>div{padding:14px 5px 0;border-bottom:0;
    border-right:1px solid rgba(255,255,255,.20)}
  .cifras.cifras--hero>div:last-child{border-right:0}
  .cifras.cifras--hero b{font-size:clamp(18px,5.4vw,27px);letter-spacing:-.04em}
  .cifras.cifras--hero span{font-size:8.5px;letter-spacing:.01em;margin-top:7px;line-height:1.22}
  .campos{grid-template-columns:1fr}
  .campos > label,.campos > label.c2,.campos > label.c4{grid-column:1/-1}
  .ft-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .muro{gap:9px}
}
/* Sin puntero no hay giro posible: tocar no dispara :focus-visible y el dorso
   quedaba inalcanzable. Y con los textos aprobados por el cliente (hasta 39
   palabras) tampoco entra en una tarjeta cuadrada. Así que abajo de 1000px la
   tarjeta se despliega: logo a un lado, descripción al otro, sin nada oculto. */
@media (hover:none),(max-width:1000px){
  .muro{grid-template-columns:1fr;gap:10px}
  .lg{height:auto;min-height:88px;perspective:none;display:grid;
    grid-template-columns:104px 1fr;overflow:hidden;border-radius:var(--r)}
  .lg-cara{position:static;inset:auto;transform:none;opacity:1;
    backface-visibility:visible;transition:none;border:0;border-radius:0}
  .lg-frente{background:var(--panel);border-right:1px solid var(--linea);padding:12px}
  .banda--alt .lg-frente{background:var(--panel-2)}
  /* place-items:center viene de .lg-cara y centra cada hijo del grid; sin
     justify-items:start el nombre de la marca quedaba centrado sobre un
     texto alineado a la izquierda. */
  .lg-dorso{text-align:left;align-content:center;justify-items:start;padding:14px 16px;gap:6px}
  .lg img{max-height:56px}
}

/* Área de toque en celular: la WCAG pide 24x24 y varios controles quedaban
   por debajo. Solo se agranda el área sensible, el dibujo no se mueve. */
@media (max-width:760px){
  .enlace{padding:6px 0}
  .miga a{padding:4px 0}
  .canal p a{display:inline-block;padding:4px 0}
  .hdr .logo{padding:10px 0}
  .cat-pie .enlace{padding:8px 0}
}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:var(--r-chico)}

/* Modo estándar. El prototipo publicado no tiene <!doctype html> y el
   navegador lo dibuja en modo de compatibilidad (quirks); el tema sí lo tiene.
   En quirks el <form> lleva 1em de margen inferior: se lo pone explícito para
   que /contacto/ quede igual a lo aprobado. El resto de diferencias medidas
   entre los dos modos es de 1 a 2 px por sección y no se corrige. */
form.form{margin-bottom:1em}