/* =====================================================================
   Corporación Alcoholes del Caribe · sistema de marca aplicado a web
   Tokens y escala tomados de cacsa-design-system.
   ===================================================================== */

:root{
  /* primitivos */
  --navy-900:#051E2A; --navy-800:#07293A; --navy-700:#09344A;
  --navy-600:#0B415C; --navy-500:#15516F;
  --papel:#FEFDFC; --papel-100:#F1F3F4; --papel-200:#DFE3E5;
  --dorado-claro:#CDAD80; --dorado:#BE965C; --dorado-texto:#8F6C39;
  --blanco:#fff; --blanco-80:#CDD4D8; --blanco-62:#A1AEB4;
  --gris-cuerpo:#607580; --gris-etiqueta:#798B93;

  /* medidas */
  --ancho:1200px; --padx:120px; --pady:112px; --radio:5px;

  --titulo:'Space Grotesk',system-ui,sans-serif;
  --texto:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0; background:var(--navy-900); color:var(--blanco-80);
  font-family:var(--texto); font-weight:500; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo);font-weight:700;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,5.3vw,4.75rem);line-height:1.04;letter-spacing:-.03em;color:var(--blanco)}
h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1}
.h2--chico{font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.18}
h3{font-family:var(--titulo);font-weight:500;font-size:1.3125rem;line-height:1.32;letter-spacing:0}
p{margin:0}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--dorado);color:var(--navy-900);
  padding:12px 20px;z-index:100;border-radius:0 0 4px 0;font-size:.9rem}
.saltar:focus{left:0}

/* ---------- utilidades ---------- */
.etiqueta{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-etiqueta);margin:0 0 20px}
.etiqueta--oro{color:var(--dorado)}
.lead{font-size:1.25rem;line-height:1.56;color:var(--blanco-80)}
.lead--medida{max-width:640px;color:var(--gris-cuerpo);margin-top:22px}
.detalle{font-size:.9375rem;line-height:1.62;color:var(--blanco-62)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  font-family:var(--texto);font-weight:500;font-size:.9375rem;text-decoration:none;
  padding:17px 36px 17px 28px;border-radius:4px;border:1px solid transparent;cursor:pointer;
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .18s ease,filter .18s ease,border-color .55s ease,
             border-radius .6s cubic-bezier(.23,1,.32,1)}
/* Las dos flechas se cruzan: la de la derecha sale por su lado mientras entra
   otra por la izquierda. Van de mascara sobre currentColor, asi que cambian de
   color junto con el texto sin tener que declararlo dos veces. */
.boton::before,.boton::after{content:'';position:absolute;top:50%;width:15px;height:15px;
  margin-top:-7px;z-index:2;background-color:currentColor;pointer-events:none;
  -webkit-mask:var(--flecha) center/contain no-repeat;
          mask:var(--flecha) center/contain no-repeat;
  transition:left .8s cubic-bezier(.34,1.56,.64,1),right .8s cubic-bezier(.34,1.56,.64,1)}
.boton::before{left:-30%}
.boton::after{right:14px}
.boton:hover::before,.boton:focus-visible::before{left:14px}
.boton:hover::after,.boton:focus-visible::after{right:-30%}
/* el texto arranca corrido a la izquierda porque la flecha ocupa la derecha */
.boton__txt{position:relative;z-index:2;display:inline-block;transform:translateX(-5px);
  transition:transform .8s cubic-bezier(.19,1,.22,1)}
.boton:hover .boton__txt,.boton:focus-visible .boton__txt{transform:translateX(10px)}
.boton:active{transform:scale(.96)}

.boton--solido{background:linear-gradient(100deg,var(--dorado-claro),var(--dorado));color:var(--navy-900)}
/* El del cierre es el unico boton grande del sitio: es la accion de la pagina. */
.boton--grande{font-size:1.0625rem;padding:22px 52px 22px 40px;border-radius:5px}
.boton--grande::after{right:20px}
.boton--grande:hover::before,.boton--grande:focus-visible::before{left:20px}
.boton--solido:hover{filter:brightness(1.07);border-radius:14px}

/* El de linea vive sobre navy y se llena de dorado desde el centro: el circulo
   es un degradado radial cuyo tamano de fondo se anima de cero al doble del
   boton. Asi no hace falta un tercer elemento para el relleno. */
.boton--linea{background:transparent;border-color:rgba(255,255,255,.34);color:var(--blanco);
  background-image:radial-gradient(circle closest-side,
    var(--dorado-claro) 0%,var(--dorado) 99%,transparent 100%);
  background-repeat:no-repeat;background-position:50% 50%;background-size:0 0;
  transition:background-size .85s cubic-bezier(.19,1,.22,1),color .4s ease .12s,
             border-color .55s ease,border-radius .6s cubic-bezier(.23,1,.32,1),transform .18s ease}
.boton--linea:hover,.boton--linea:focus-visible,.boton--linea:active{background-size:700% 700%;
  color:var(--navy-900);border-color:transparent;border-radius:14px}
.boton--chico{padding:13px 32px 13px 26px}
.boton--ancho{width:100%}
/* en pantallas tactiles no hay hover: el boton tiene que verse completo asi */
/* Tactil (telefono e iPad) o ventana estrecha: en los dos casos la flecha
   sobra. El escritorio completo es donde se luce. */
@media (hover:none),(max-width:760px){
  /* Sin cursor no hay hover: la flecha nunca llegaria a cruzarse y en un boton
     estrecho se monta encima del texto. Se quita y el rotulo queda centrado.
     El dorado entra al presionar, y ahi tiene que ser rapido: un toque dura
     mucho menos que el recorrido de escritorio. */
  .boton__txt{transform:none}
  .boton::before,.boton::after{display:none}
  .boton{padding-left:28px;padding-right:28px}
  .boton--chico{padding-left:22px;padding-right:22px}
  .boton--linea{transition:background-size .3s ease,color .2s ease,
    border-color .3s ease,border-radius .3s ease,transform .18s ease}
}
:focus-visible{outline:2px solid var(--dorado-claro);outline-offset:3px}

/* ---------- nav ---------- */
/* El nav usa el MISMO contenedor centrado que las secciones. Si se deja a lo
   ancho de la pantalla, coincide solo a 1440 y se despega en monitores más
   grandes: a 1905 px el nav arrancaba en 120 y el contenido en 353. */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:22px var(--padx);
  transition:background-color .3s ease,padding .3s ease,backdrop-filter .3s ease}
.nav.pegado{background:rgba(5,30,42,.92);backdrop-filter:blur(10px);padding:12px var(--padx);
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav__caja{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blanco)}
.logo__texto{font-family:var(--titulo);font-weight:500;font-size:.6875rem;line-height:1.28;
  letter-spacing:.04em;text-transform:uppercase}
.logo__texto em{display:block;font-style:normal;font-family:var(--texto);font-size:.375rem;
  letter-spacing:.3em;color:var(--dorado-claro);margin-top:4px}
.nav__menu{display:flex;align-items:center;gap:36px}
.nav__menu a{font-size:.9375rem;text-decoration:none;color:var(--blanco-80);transition:color .2s}
.nav__menu a:hover{color:var(--blanco)}
.nav__menu .boton{color:var(--navy-900)}
.nav__hamburguesa{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav__hamburguesa span{display:block;width:24px;height:2px;background:var(--blanco);margin:5px 0;
  transition:transform .25s ease,opacity .2s ease}
.nav__hamburguesa[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburguesa[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__hamburguesa[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* el panel móvil sangra a los bordes, pero sus enlaces siguen la misma guía */
.nav__movil{display:none;flex-direction:column;gap:4px;
  margin-inline:calc(var(--padx) * -1);padding:18px var(--padx) 26px;
  background:rgba(5,30,42,.97);backdrop-filter:blur(10px)}
.nav__movil a{padding:12px 0;text-decoration:none;color:var(--blanco-80);
  border-bottom:1px solid rgba(255,255,255,.08)}
/* El boton de cotizacion es el ultimo del menu de telefono: sin raya de
   separacion, centrado y despegado de la lista. */
.nav__movil .boton{justify-content:center;padding:15px 24px;border-bottom:0;margin-top:16px}

/* ---------- secciones ---------- */
.seccion{padding:var(--pady) var(--padx)}
.seccion--clara{background:linear-gradient(150deg,var(--papel),#F1F3F4);color:var(--gris-cuerpo)}
.seccion--clara h2,.seccion--clara h3{color:var(--navy-800)}
.seccion--clara .etiqueta{color:var(--dorado-texto)}
.seccion--oscura{background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}
/* una seccion oscura necesita sus propios colores: el gris de cuerpo y el
   dorado de texto estan calculados para fondo claro y sobre navy no contrastan */
.seccion--oscura h2,.seccion--oscura h3{color:var(--blanco)}
.seccion--oscura .lead--medida{color:var(--blanco-80)}
.seccion--oscura .proceso .paso{color:var(--dorado-claro)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(840px,100vh);display:flex;align-items:stretch;
  padding:0 var(--padx);isolation:isolate;
  background-image:
    linear-gradient(115deg,rgba(5,30,42,.78) 0%,rgba(5,30,42,.2) 55%,rgba(5,30,42,0) 100%),
    linear-gradient(to bottom,rgba(7,41,58,.34) 0%,rgba(5,30,42,.8) 50%,rgba(5,30,42,.99) 100%),
    url('assets/img/hero-columnas.webp');
  background-size:cover,cover,cover;background-position:center;
}
.hero__caja{display:flex;flex-direction:column;justify-content:space-between;
  width:100%;max-width:var(--ancho);margin-inline:auto;padding:150px 0 52px}
.hero__mensaje{margin-block:auto;padding-block:56px}
.hero h1{margin:0 0 30px}
.hero .lead{max-width:560px}
.hero__botones{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px}
.credenciales{list-style:none;display:flex;justify-content:space-between;gap:24px;
  margin:0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.credenciales strong{display:block;font-family:var(--titulo);font-weight:700;font-size:2.125rem;
  line-height:1.1;letter-spacing:-.01em;color:var(--dorado-claro)}
.credenciales span{display:block;font-size:.9375rem;color:var(--blanco-62);margin-top:8px}

/* ---------- cargador: el isotipo se arma punta por punta ---------- */
/* Ocupa el tiempo que el hero necesita para descargar y decodificar sus primeros
   cuadros, asi que la espera deja de ser una espera. Solo existe si hay JS y si
   el visitante no pidio menos movimiento: la clase `cargando` la pone un script
   inline al abrir el body. */
.cargador{position:fixed;inset:0;z-index:200;display:none;place-items:center;pointer-events:none}
html.entrada .cargador{display:grid}
/* el degradado vive en su propia capa: el logo se va rapido y el fondo se
   disuelve despacio, acompanando la entrada de la escena y de los textos */
.cargador__fondo{position:absolute;inset:0;opacity:1;transition:opacity 1.7s ease;
  background:radial-gradient(120% 85% at 50% 42%,#0B415C 0%,#07293A 46%,#051E2A 100%)}
/* un halo tenue detras del isotipo, para que el fondo tenga profundidad */
.cargador__halo{position:absolute;width:min(60vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(205,173,128,.16) 0%,rgba(205,173,128,0) 62%);
  opacity:0;transition:opacity 1.2s ease}
.cargador--armado .cargador__halo{opacity:1}
.cargador__marca{position:relative;width:clamp(116px,15vw,184px);height:auto;overflow:visible}
/* cada punta entra por su cuenta, en el orden que marca --i */
.cargador__marca path{opacity:0;transform:scale(.86);transform-origin:396px 420.5px;
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.25,1);
  transition-delay:calc(var(--i) * 130ms)}
.cargador--armado .cargador__marca path{opacity:1;transform:none}
.cargador--fuera .cargador__marca,.cargador--fuera .cargador__halo{opacity:0;transition:opacity .45s ease}
.cargador--fuera .cargador__fondo{opacity:0}

/* Mientras carga y mientras corre la entrada del hero, la interfaz no existe.
   El contenido sigue en el HTML: solo se oculta, asi que buscadores y lectores
   de pantalla lo leen igual. */
html.cargando .nav,html.cargando .reveal__estacion{opacity:0}
html.cargando .nav{pointer-events:none}
.nav{transition:background-color .3s ease,padding .3s ease,backdrop-filter .3s ease,opacity .9s ease}
/* al terminar la entrada, todo aparece mas lento que en un cambio normal */
html.entrando .nav,html.entrando .reveal__estacion{transition-duration:1.1s}

/* ---------- hero por estaciones (scroll reveal) ---------- */
/* La seccion mide 320vh: ese es el recorrido de scroll. Adentro, un marco sticky
   de 100vh con el canvas; lo unico que cambia es que cuadro esta dibujado y que
   estacion de texto esta visible. Lo decide reveal.js con el scroll suavizado. */
.reveal{position:relative;height:420vh;background:var(--navy-900)}
.reveal__pegado{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:var(--navy-900)}
.reveal__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.reveal__velo{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(105deg,rgba(5,30,42,.84) 0%,rgba(5,30,42,.5) 40%,rgba(5,30,42,0) 70%),
  linear-gradient(to bottom,rgba(5,30,42,.6) 0%,rgba(5,30,42,0) 30%,rgba(5,30,42,0) 72%,rgba(5,30,42,.97) 100%)}
.reveal__estacion{position:absolute;inset:0;padding:0 var(--padx);opacity:0;
  transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.reveal__estacion.visible{opacity:1;transform:none;pointer-events:auto}
.reveal__caja{display:flex;flex-direction:column;justify-content:space-between;height:100%;
  max-width:var(--ancho);margin-inline:auto;padding:150px 0 52px}
.reveal .hero__mensaje{margin-block:0;padding-block:0;padding-top:4vh}
.reveal h1,.reveal__titulo{margin:0 0 30px}
.reveal__titulo{font-family:var(--titulo);font-weight:700;font-size:clamp(2.5rem,5.3vw,4.75rem);
  line-height:1.04;letter-spacing:-.03em;color:var(--blanco)}
.reveal .lead{max-width:560px}
/* la tira de datos es un remate, no una nota al pie: numeros grandes y cifras
   de ancho fijo para que no baile la fila mientras el contador sube */
.reveal .credenciales{padding-top:30px}
.reveal .credenciales strong{font-size:3.25rem;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.reveal .credenciales span{font-size:1.0625rem;color:var(--blanco-80);margin-top:10px}
/* Lenis: el scroll suave lo maneja JS; el nativo se apaga mientras esta activo */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-stopped{overflow:hidden}
/* con syncTouch el gesto lo maneja Lenis: el navegador no debe hacer su propio scroll vertical */
.reveal--tactil{touch-action:pan-y}
/* Apilado: movil y movimiento reducido. Sin canvas ni secuencia: cada estacion
   es una imagen fija con su texto, una debajo de la otra. */
.reveal--apilado{height:auto}
.reveal--apilado .reveal__pegado{position:static;height:auto;overflow:visible}
.reveal--apilado .reveal__lienzo,.reveal--apilado .reveal__velo{display:none}
.reveal--apilado .reveal__estacion{position:relative;opacity:1;transform:none;pointer-events:auto;
  isolation:isolate;background-size:cover;background-position:center}
.reveal--apilado .reveal__estacion::before{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(105deg,rgba(5,30,42,.84) 0%,rgba(5,30,42,.5) 40%,rgba(5,30,42,.1) 70%),
  linear-gradient(to bottom,rgba(5,30,42,.6) 0%,rgba(5,30,42,.1) 30%,rgba(5,30,42,.2) 72%,rgba(5,30,42,.97) 100%)}
.reveal--apilado .reveal__estacion--1{background-image:url('assets/img/hero/estacion-1.webp');background-position:60% center}
.reveal--apilado .reveal__estacion--2{background-image:url('assets/img/hero/estacion-2.webp')}
.reveal--apilado .reveal__caja{min-height:100vh;height:auto}
.reveal--apilado .reveal__estacion--2 .reveal__caja{padding-top:96px}

/* Escritorio: el texto de la estacion 1 va centrado en la pantalla. En telefono
   se queda arriba, que es donde cabe con la imagen debajo. */
@media (min-width:761px){
  .reveal__estacion--1 .reveal__caja{justify-content:center;padding-bottom:150px}
  .reveal__estacion--1 .hero__mensaje{padding-top:0}
}

/* ---------- indicador de deslizar (solo telefono) ---------- */
.reveal__desliza{display:none}
@keyframes desliza{0%{transform:rotate(45deg) translate(-3px,-3px);opacity:0}
  45%{opacity:1}
  100%{transform:rotate(45deg) translate(4px,4px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .reveal__desliza::after{animation:none!important;opacity:1!important;transform:rotate(45deg)!important}
}

/* ---------- laboratorio por estaciones ---------- */
/* 233 cuadros a 24/s por unos 24 px de scroll cada uno. El alto sale de esa
   cuenta, no se elige a ojo: 233 x 24 = 5.592 px, que en una pantalla de 900
   son 620vh. */
.labo{position:relative;height:620vh;background:var(--papel)}
.labo__pegado{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  isolation:isolate}
.labo__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
/* La escena es un laboratorio blanco: el texto va oscuro y el velo aclara en vez
   de oscurecer. Sube desde abajo, que es donde vive el texto. */
/* El velo aclara desde la izquierda, que es donde vive todo el texto, y
   se abre hacia la derecha para dejar ver al químico. Tiene que cubrir de sobra
   el borde donde el plano se corta: el lienzo no amplía la imagen para rellenar,
   así que el lado izquierdo queda del color del papel. */
/* ‼️ Horizontal, no inclinado. El corte de la imagen es una linea vertical,
   asi que un degradado en diagonal la cubre abajo y la deja asomar arriba. Y el
   tramo opaco llega al 25 %: el borde cae entre el 7 % y el 13 % segun la
   proporcion de la ventana, y tiene que quedar tapado con holgura en todas. */
.labo__velo{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right,
    rgba(254,253,252,1) 0%,rgba(254,253,252,1) 25%,
    rgba(254,253,252,.94) 32%,rgba(254,253,252,.72) 41%,
    rgba(254,253,252,.4) 51%,rgba(254,253,252,.12) 62%,
    rgba(254,253,252,0) 72%),
  linear-gradient(to bottom,rgba(254,253,252,.92) 0%,rgba(254,253,252,0) 14%),
  /* ‼️ El pie se disuelve del todo en el papel: es el mismo color de la sección
     de abajo, asi que el borde donde termina el film no se ve y las dos leen
     como una sola pieza. */
  linear-gradient(to top,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 5%,
    rgba(254,253,252,.82) 12%,rgba(254,253,252,.45) 20%,
    rgba(254,253,252,.15) 27%,rgba(254,253,252,0) 34%)}
/* La sección entra desde el blanco: este velo arranca opaco y lo disuelve el
   propio scroll mientras corre el principio de la animación. */
.labo__entrada{position:absolute;inset:0;pointer-events:none;
  background:var(--papel);opacity:0;will-change:opacity;z-index:1}
.labo__marco{z-index:2}
.labo--vivo .labo__entrada{opacity:1}
.labo--vivo .labo__portada{opacity:1}
.labo--apilado .labo__portada{position:static;display:block;text-align:left;
  padding:0;margin-bottom:8px;opacity:1;transform:none}
/* La portada abre la sección: el titular grande y centrado sobre el blanco,
   antes de que el plano aparezca. Se va cuando la escena ya se ve. */
.labo__portada{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  padding-block:0;padding-inline:max(var(--padx),calc((100% - var(--ancho)) / 2));
  text-align:center;pointer-events:none;will-change:opacity}
.labo__portada h2{color:var(--navy-900);font-size:clamp(2.25rem,4.6vw,4rem);
  line-height:1.06;letter-spacing:-.03em;max-width:18ch}
/* Cada estación es su propio titular, en el sitio donde estaba el de la sección:
   a la izquierda, centrado en vertical. */
.labo__marco{position:absolute;inset:0;padding-block:0;
  padding-inline:max(var(--padx),calc((100% - var(--ancho)) / 2));
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
/* Las tres ocupan el mismo sitio: solo una está visible a la vez. La caja
   reserva su alto para que nada salte al cambiar de texto. */
.labo__bloque{position:relative;width:100%;max-width:32rem;min-height:15rem}
.labo__estacion{position:absolute;left:0;right:0;top:0;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.23,1,.32,1)}
.labo__estacion.visible{opacity:1;transform:none}
.labo__estacion h3{color:var(--navy-900);font-family:var(--titulo);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 20px;max-width:16ch}
.labo__estacion p{color:var(--gris-cuerpo);font-size:1.0625rem;line-height:1.6;margin:0;
  max-width:30rem}
.labo__estacion h3::before{content:'';display:block;width:34px;height:2px;
  background:var(--dorado);margin-bottom:18px}

/* Con movimiento reducido no hay lienzo: las tres estaciones se apilan como
   fijas, igual que el hero. */
.labo--apilado{height:auto}
.labo--apilado .labo__pegado{position:static;height:auto;overflow:visible}
.labo--apilado .labo__lienzo,.labo--apilado .labo__velo,
.labo--apilado .labo__entrada{display:none}

.labo--apilado .labo__marco{position:static;padding-block:var(--pady)}
.labo--apilado .labo__bloque{min-height:0;max-width:none}
.labo--apilado .labo__estacion{position:relative;left:auto;right:auto;top:auto;bottom:auto;
  opacity:1;transform:none;pointer-events:auto;margin-top:44px;padding-top:44px;
  min-height:56vh;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;max-width:none}
.labo--apilado .labo__estacion h3,.labo--apilado .labo__estacion p{
  background:rgba(254,253,252,.92);padding:0 18px}
.labo--apilado .labo__estacion h3{padding-top:18px}
.labo--apilado .labo__estacion p{padding-bottom:18px}
.labo--apilado .labo__estacion--1{background-image:url('assets/img/lab/fija-1.webp')}
.labo--apilado .labo__estacion--2{background-image:url('assets/img/lab/fija-2.webp')}
.labo--apilado .labo__estacion--3{background-image:url('assets/img/lab/fija-3.webp')}

/* ---------- productos: los cuatro alcoholes ---------- */
/* Mismo papel que el laboratorio de arriba: la seccion anterior se disuelve en
   este color por abajo, asi que un blanco distinto marcaria el corte. */
.productos{background:var(--papel);color:var(--gris-cuerpo)}
.productos h2{margin-bottom:52px;color:var(--navy-900);text-align:center}

/* Cerradas son una lista de filas. Se abre una a la vez y el panel es la foto
   entera: el lado derecho de las cuatro se genero vacio justamente para que ahi
   entre el texto. */
.alcoholes{list-style:none;margin:0;padding:0;border-top:1px solid rgba(5,30,42,.14)}
.alcohol{border-bottom:1px solid rgba(5,30,42,.14)}
.alcohol__titulo{margin:0;font:inherit}
.alcohol__fila{width:100%;display:grid;
  grid-template-columns:minmax(11rem,16rem) 1fr auto 18px;
  align-items:baseline;gap:26px;
  padding:26px 6px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;
  transition:padding-left .35s cubic-bezier(.23,1,.32,1)}
.alcohol__fila:hover{padding-left:16px}
.alcohol__nombre{font-family:var(--titulo);font-weight:700;font-size:2rem;line-height:1;
  letter-spacing:-.02em;color:var(--navy-900)}
.alcohol__uso{font-size:1rem;color:var(--gris-cuerpo)}
.alcohol__grado{font-family:var(--titulo);font-weight:700;font-size:1.25rem;
  letter-spacing:-.01em;color:var(--dorado-texto);white-space:nowrap}
/* el signo pasa de mas a menos: la barra vertical se encoge */
.alcohol__signo{position:relative;width:18px;height:18px;align-self:center}
.alcohol__signo::before,.alcohol__signo::after{content:'';position:absolute;left:50%;top:50%;
  background:var(--navy-900)}
.alcohol__signo::before{width:18px;height:1.5px;transform:translate(-50%,-50%)}
.alcohol__signo::after{width:1.5px;height:18px;transform:translate(-50%,-50%);
  transition:transform .4s cubic-bezier(.23,1,.32,1)}
.alcohol.abierta .alcohol__signo::after{transform:translate(-50%,-50%) scaleY(0)}

/* La reja de una sola fila pasa de 0fr a 1fr: se anima el alto sin tener que
   medirlo desde el guion. */
.alcohol__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .6s cubic-bezier(.23,1,.32,1)}
.alcohol.abierta .alcohol__panel{grid-template-rows:1fr}
.alcohol__interior{overflow:hidden;min-height:0}
.alcohol__marco{position:relative;overflow:hidden;border-radius:var(--radio);
  margin:0 0 30px;background:var(--navy-900)}
.alcohol__foto{display:block;width:100%;height:auto}
/* La palabra gigante va integrada a la foto, no encima: en luz suave toma la
   luminosidad de lo que tiene debajo y no tapa el sujeto. */
.alcohol__palabra{position:absolute;left:-1.5%;top:4%;pointer-events:none;
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.5rem,13.5vw,11.5rem);line-height:.8;letter-spacing:-.05em;
  color:rgba(255,255,255,.55);mix-blend-mode:overlay;max-width:8ch}
.alcohol__texto{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:flex-end;padding:0 clamp(24px,4.5%,64px)}
.alcohol__ficha{width:min(38%,26rem)}
.alcohol__resumen{color:var(--blanco);font-size:1.0625rem;line-height:1.62;margin:0 0 26px}
.alcohol__lista{list-style:none;margin:0;padding:0}
.alcohol__lista li{color:var(--blanco-80);font-size:.9375rem;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.18)}
.alcohol__lista li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
/* Entra despues de que el panel abrio, igual que los textos del laboratorio. */
.alcohol__palabra,.alcohol__ficha{opacity:0;transition:opacity .5s ease}
.alcohol__ficha{transform:translateY(16px);
  transition:opacity .5s ease .22s,transform .6s cubic-bezier(.23,1,.32,1) .22s}
.alcohol.abierta .alcohol__palabra{opacity:1;transition-delay:.14s}
.alcohol.abierta .alcohol__ficha{opacity:1;transform:none}

.productos .enlace-mas{margin-top:44px;margin-inline:auto;display:flex;width:fit-content}

/* ---------- el recorrido por las seis etapas ---------- */
/* La foto de la etapa ocupa el fondo de la seccion y el texto vive encima. Al
   tocar una tarjeta, ESA MISMA tarjeta crece hasta el tamano de la seccion y se
   convierte en el fondo: no es un cruce de opacidad, es un solo elemento que
   viaja. */
.recorrido{position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy-900);color:var(--blanco-80);
  padding:var(--pady) var(--padx);min-height:min(92vh,860px);display:flex;align-items:center}
.recorrido__escena{position:absolute;inset:0;z-index:0}
/* El cambio de etapa es un cruce de opacidad largo y parejo. Nada se agranda:
   probamos que la tarjeta creciera hasta el fondo y quedaba inquieto. */
.recorrido__foto{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .8s ease}
.recorrido__foto.es-actual{opacity:1}
/* El velo protege el texto de la izquierda y suelta la foto hacia la derecha.
   Si tapa parejo, la fotografia deja de verse y la seccion queda azul plana. */
.recorrido__velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to right,rgba(5,30,42,.94) 0%,rgba(5,30,42,.86) 26%,
    rgba(5,30,42,.55) 52%,rgba(5,30,42,.3) 78%,rgba(5,30,42,.32) 100%),
  linear-gradient(to top,rgba(5,30,42,.82) 0%,rgba(5,30,42,0) 38%),
  linear-gradient(to bottom,rgba(5,30,42,.7) 0%,rgba(5,30,42,0) 22%)}
.recorrido__caja{position:relative;z-index:2;width:100%}
/* Titular de una sola palabra clave: la seccion se explica sola con lo que se
   ve, no hace falta un parrafo. */
.recorrido__rotulo{color:var(--blanco);font-size:clamp(2.25rem,4.6vw,3.75rem);
  line-height:1.04;letter-spacing:-.03em;margin:0}

.recorrido__cuerpo{display:grid;grid-template-columns:1fr auto;
  gap:56px;align-items:end;margin-top:60px}
/* Sin esto una palabra larga desborda la columna y la tira de tarjetas se le
   monta encima: asi quedaba Fermentacion sin la ultima letra. */
.recorrido__texto,.recorrido__titulo,.recorrido__titulo span{min-width:0}
.recorrido__titulo span{overflow-wrap:anywhere}
.recorrido__texto{transition:opacity .3s ease,transform .45s cubic-bezier(.23,1,.32,1)}
.recorrido.cambiando .recorrido__texto{opacity:0;transform:translateY(10px)}
/* El numero de etapa vale por si solo: ocupa el alto del titulo mas el detalle
   y reemplaza al rotulo chico, que repetia el nombre dos veces seguidas. */
.recorrido__cabecera{display:flex;align-items:flex-start;gap:20px}
.recorrido__cifra{font-family:var(--titulo);font-weight:700;
  font-size:clamp(3.25rem,5.4vw,4.75rem);line-height:.86;letter-spacing:-.04em;
  color:var(--dorado);flex:none}
.recorrido__rotulos{padding-top:2px}
.recorrido__titulo{display:flex;align-items:center;gap:14px;margin:0 0 8px;
  font-family:var(--titulo);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--blanco)}
.recorrido__icono{width:26px;height:26px;flex:none;fill:none;stroke:var(--dorado);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.recorrido__icono--grande{width:38px;height:38px;stroke-width:1.2}
.recorrido__detalle{margin:0 0 16px;color:var(--dorado-claro);font-size:1rem}
.recorrido__cuerpotxt{margin:22px 0 0;color:var(--blanco-80);font-size:1rem;line-height:1.62;max-width:34ch}

/* Las tarjetas corren dentro de una pista con el desborde oculto: la fila entera
   se desplaza y las que salen se van por el borde, en vez de aparecer y
   desaparecer de golpe. La lista esta duplicada, asi que el recorrido no tiene
   final visible. */
/* Ancho de exactamente tres tarjetas mas sus dos separaciones: con cuatro, la
   tira invadia el titulo. */
.recorrido__pista{overflow:hidden;padding:12px 0;
  width:calc(clamp(104px,11.5vw,152px) * 3 + 28px)}
.recorrido__fila{list-style:none;margin:0;padding:0;display:flex;gap:14px;
  will-change:transform;transition:transform .75s cubic-bezier(.23,1,.32,1)}
.recorrido__fila.sin-viaje{transition:none}
.recorrido__tarjeta{width:clamp(104px,11.5vw,152px);flex:none}
/* Sin numero, sin icono y sin nombre: la imagen alcanza. */
.recorrido__boton{display:block;width:100%;aspect-ratio:3/4;position:relative;overflow:hidden;
  border:0;padding:0;cursor:pointer;border-radius:12px;
  background-color:var(--navy-700);background-size:cover;background-position:center;
  transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s ease,
             filter .35s ease}
.recorrido__boton::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,30,42,.45) 0%,rgba(5,30,42,0) 55%)}
.recorrido__boton:hover{transform:translateY(-7px);filter:brightness(1.08);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.8)}

.recorrido__pie{display:flex;align-items:center;justify-content:space-between;
  gap:24px;margin-top:38px}
.recorrido__mandos{display:flex;align-items:center;gap:12px;flex:1}
.recorrido__flecha{width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;
  transition:background-color .25s ease,border-color .25s ease}
.recorrido__flecha:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.recorrido__flecha svg{width:18px;height:18px;fill:none;stroke:var(--blanco);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.recorrido__barra{flex:1;max-width:340px;height:1px;background:rgba(255,255,255,.22);
  margin-left:8px;position:relative}
.recorrido__barra span{position:absolute;left:0;top:-1px;height:3px;background:var(--dorado);
  width:16.6%;transition:width .5s cubic-bezier(.23,1,.32,1)}
.recorrido__cuenta{margin:0;font-family:var(--titulo);font-weight:700;font-size:1.5rem;
  color:var(--blanco)}
.recorrido__cuenta b{color:var(--blanco)}


/* ---------- cierre: el empujon final ---------- */
.cierre{background:var(--papel);color:var(--gris-cuerpo);text-align:center;
  padding-block:calc(var(--pady) * 1.15);overflow:hidden}
.cierre__titulo{margin:0 auto;color:var(--navy-900);
  font-family:var(--titulo);font-weight:700;
  font-size:clamp(2.25rem,5.2vw,4.5rem);line-height:1.04;letter-spacing:-.035em}
/* Cada linea vive dentro de una ventana con el desborde oculto, asi que sube
   desde debajo del renglon en vez de aparecer. */
.cierre__linea{display:block;overflow:hidden;padding-bottom:.06em}
.cierre__linea > span{display:block;transform:translateY(108%);
  transition:transform .95s cubic-bezier(.19,1,.22,1)}
.cierre__linea:nth-of-type(2) > span{transition-delay:.11s}
.cierre__regla{display:block;width:min(300px,38%);height:2px;background:var(--dorado);
  margin:40px auto 34px;transform:scaleX(0);
  transition:transform 1s cubic-bezier(.19,1,.22,1) .3s}
.cierre__texto{max-width:46ch;margin:0 auto}
.cierre__acciones{display:flex;justify-content:center;margin-top:44px}
.cierre__texto,.cierre__acciones{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease .44s,transform .95s cubic-bezier(.19,1,.22,1) .44s}
.cierre__acciones{transition-delay:.56s}
.cierre .enlace-mas{display:inline-flex}
/* estado de llegada */
.cierre.visible .cierre__linea > span{transform:none}
.cierre.visible .cierre__regla{transform:none}
.cierre.visible .cierre__texto,.cierre.visible .cierre__acciones{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cierre__linea > span,.cierre__regla,.cierre__texto,.cierre__acciones{
    transform:none;opacity:1;transition:none}
}

/* ---------- cómo se compra ---------- */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:56px 0 0;padding:0}
.pasos figure{position:relative;margin:0 0 26px;border-radius:var(--radio);overflow:hidden;aspect-ratio:6/5}
.pasos img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.pasos figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,30,42,0) 45%,rgba(5,30,42,.8))}
.pasos figcaption{position:absolute;left:22px;bottom:16px;z-index:1;
  font-family:var(--titulo);font-weight:700;font-size:2.125rem;color:var(--dorado-claro)}
.pasos h3{margin-bottom:12px}

/* ---------- contacto ---------- */
.contacto__caja{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:88px;align-items:start}
.contacto h2{color:var(--blanco);margin-bottom:22px}
.contacto__texto>p{color:var(--blanco-80)}
.datos{margin:44px 0 0}
.datos>div{padding:20px 0;border-top:1px solid rgba(255,255,255,.16)}
.datos>div:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.datos dt{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco-62)}
.datos dd{margin:8px 0 0;color:var(--blanco)}
.datos a{text-decoration:none}
.datos a:hover{color:var(--dorado-claro)}

.formulario{background:linear-gradient(150deg,var(--navy-600),var(--navy-800));
  border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:44px 40px}
.formulario__sub{font-size:.9375rem;color:var(--blanco-62);margin:-12px 0 0}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:26px 0}
.campo{margin:0;display:flex;flex-direction:column;gap:8px}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco-62)}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto);font-size:.9375rem;color:var(--blanco);
  background:rgba(5,30,42,.5);border:1px solid rgba(255,255,255,.18);border-radius:3px;
  padding:14px 16px;width:100%;transition:border-color .2s ease,background-color .2s ease}
.campo textarea{resize:vertical;min-height:96px;line-height:1.6}
.campo select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5 7 9.5l4-4' stroke='%23A1AEB4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.campo ::placeholder{color:var(--blanco-62);opacity:1}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--dorado);background:rgba(5,30,42,.72);outline:none}
.formulario__nota{font-size:.9375rem;color:var(--blanco-62);margin-top:18px}
.formulario__nota.error{color:#E9A79B}
.formulario__nota.ok{color:#8FD3B0}

/* ---------- pie ---------- */
/* El pie vuelve al navy de la barra de arriba. El corte con la llamada a la
   accion, que es clara, lo hace el propio cambio de color, asi que no hace
   falta ninguna linea. El logotipo se fue: ya vive fijo en la barra. */
.pie{background:var(--navy-900);padding:76px var(--padx) 40px;color:var(--blanco-62);
  text-align:center}
.pie__contacto{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;
  gap:clamp(40px,7vw,110px);flex-wrap:wrap}
.pie__contacto li{display:flex;flex-direction:column;align-items:center;gap:6px;
  max-width:22rem}
.pie__contacto svg{width:22px;height:22px;fill:none;stroke:var(--dorado);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.pie__contacto a,.pie__fuerte{font-family:var(--titulo);font-weight:500;font-size:1.0625rem;
  color:var(--blanco);text-decoration:none;margin:0;transition:color .25s ease}
.pie__contacto a:hover{color:var(--dorado-claro)}
.pie__contacto p{margin:0;font-size:.875rem;line-height:1.5;color:var(--blanco-62)}
.pie__rotulo{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-etiqueta)}
.pie__bajo{border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;
  align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.9375rem}
.pie__bajo a{color:var(--dorado-claro);text-decoration:none}

/* =====================================================================
   Adaptación a pantallas menores
   ===================================================================== */
@media (max-width:1240px){
  :root{--padx:64px;--pady:88px}
  .contacto__caja{gap:56px;grid-template-columns:minmax(0,1fr) 460px}
}

@media (max-width:1024px){
  :root{--padx:48px}
  .nav__menu{display:none}
  .nav__hamburguesa{display:block}
  .nav__movil.abierto{display:flex}
  .proceso{grid-template-columns:repeat(3,1fr);gap:40px 24px}
  .proceso li::after{display:none}
  .alcohol__fila{grid-template-columns:minmax(9rem,13rem) 1fr auto 18px;gap:20px}
  .alcohol__nombre{font-size:1.75rem}
  .alcohol__uso{font-size:.9375rem}
  .alcohol__grado{font-size:1.125rem}
  .alcohol__ficha{width:min(42%,22rem)}
  .alcohol__resumen{font-size:1rem;line-height:1.55;margin-bottom:20px}
  .alcohol__lista li{padding:9px 0;font-size:.875rem}
  .labo__estacion{max-width:30rem}
  .labo__estacion h3{font-size:1.5rem}
  .recorrido__cuerpo{gap:32px}
  .recorrido__tarjeta{width:clamp(96px,13vw,130px)}
  .recorrido__pista{width:calc(clamp(96px,13vw,130px) * 3 + 28px)}
  /* Igual que en telefono: el texto y el blanco que lo sostiene van al pie. En
     este ancho el cuadro apaisado ya cubre de sobra los dos lados, asi que el
     velo puede ser vertical sin dejar asomar el corte lateral. */
  .labo__marco{justify-content:flex-end;padding-bottom:8vh}
  .labo__estacion{top:auto;bottom:0}
  /* Sin lavado lateral: la tableta usa su propio recorte y lo llena por el lado
     que haga falta, asi que no queda borde que tapar. */
  .labo__velo{background:
    linear-gradient(to bottom,rgba(254,253,252,.5) 0%,rgba(254,253,252,.1) 10%,
      rgba(254,253,252,.04) 34%,rgba(254,253,252,.3) 46%,
      rgba(254,253,252,.72) 54%,rgba(254,253,252,.93) 60%,
      rgba(254,253,252,1) 66%,rgba(254,253,252,1) 100%)}
  .contacto__caja{grid-template-columns:1fr;gap:56px}
  .formulario{max-width:640px}
}

@media (max-width:760px){
  :root{--padx:24px;--pady:72px}
  body{font-size:16px}
  .hero__caja{padding:120px 0 40px}
  .hero__mensaje{padding-block:36px}
  .reveal{height:380vh}
  .reveal__caja{padding:104px 0 36px}
  .reveal .hero__mensaje{padding-top:0}
  .reveal .reveal__estacion--1 h1{font-size:1.625rem;letter-spacing:-.025em}
  /* El indicador vive al pie de la primera pantalla y se va en cuanto el
     visitante empieza a bajar: ya no hace falta decirle que baje. */
  .reveal__desliza{display:flex;flex-direction:column;align-items:center;gap:10px;
    position:absolute;left:0;right:0;bottom:24px;margin:0;z-index:2;pointer-events:none;
    font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blanco-80);
    transition:opacity .45s ease}
  .reveal__desliza::after{content:'';width:15px;height:15px;
    border-right:1.6px solid var(--dorado-claro);border-bottom:1.6px solid var(--dorado-claro);
    transform:rotate(45deg);animation:desliza 1.9s ease-in-out infinite}
  .reveal--enmarcha .reveal__desliza,html.cargando .reveal__desliza{opacity:0}
  /* En teléfono el titular se parte solo: el <br> de escritorio dejaba una
     palabra huérfana y cuatro líneas que tapaban toda la imagen. */
  .reveal h1 br,.reveal__titulo br{display:none}
  .reveal h1,.reveal__titulo{font-size:2.125rem;letter-spacing:-.025em;margin-bottom:18px}
  .reveal .lead{font-size:1rem;line-height:1.5;max-width:22rem}
  .reveal .hero__botones{margin-top:24px;gap:10px}
  .reveal .hero__botones .boton{padding:13px 20px;font-size:.875rem}
  /* En la estación 2 las cuatro credenciales van en dos columnas compactas: en
     una columna se salían por abajo de una pantalla de 812 px. */
  /* La estacion 2 lleva los botones en todos los tamanos. En telefono hay que
     hacerles sitio: el bloque arranca mas arriba, la bajada y las cifras se
     comprimen un punto y los botones van compactos. */
  .reveal__estacion--2 .reveal__caja{padding-top:96px}
  /* Estacion 2: el titular se parte donde corresponde y el cuerpo no llega a
     la torre de la derecha, que es lo que hacia perder la lectura. */
  .reveal__estacion--2 .reveal__titulo br{display:inline}
  .reveal .reveal__estacion--2 .lead{font-size:.9375rem;line-height:1.45;max-width:17rem}
  .reveal__estacion--2 .hero__botones{margin-top:18px;gap:8px}
  .reveal__estacion--2 .hero__botones .boton{padding:12px 20px;font-size:.875rem}
  /* las tres cifras van siempre en una sola fila: una sola abajo se veia mal */
  .reveal .credenciales{padding-top:14px;gap:12px;flex-wrap:nowrap}
  .reveal .credenciales li{flex:1 1 0;min-width:0}
  .reveal .credenciales strong{font-size:1.25rem;white-space:nowrap}
  .reveal .credenciales span{font-size:.6875rem;margin-top:5px;line-height:1.25}
  .reveal__estacion--2 .lead{max-width:20rem}
  /* apilado en teléfono: las fijas verticales, no el apaisado */
  .reveal--apilado .reveal__estacion--1{background-image:url('assets/img/hero/m/c_043.webp');background-position:center}
  .reveal--apilado .reveal__estacion--2{background-image:url('assets/img/hero/m/c_160.webp')}
  .credenciales{flex-wrap:wrap;gap:26px 32px}
  .credenciales li{flex:1 1 40%}
  .credenciales strong{font-size:1.75rem}
  .pasos{grid-template-columns:1fr;gap:44px}
  /* En telefono la cadencia es la del hero: unos 18 px de scroll por cuadro.
     233 x 18 = 4.194 px, que en una pantalla de 760 son 550vh. */
  .labo{height:550vh}
  .labo__portada h2{font-size:2rem;line-height:1.08;max-width:14ch}
  /* en vertical la molécula recortada a cover pierde los extremos: se encaja */
  .labo__bloque{max-width:none;min-height:13rem}
  .labo__estacion h3{font-size:1.875rem;line-height:1.08;margin-bottom:16px;max-width:none}
  .labo__estacion h3::before{margin-bottom:14px}
  .labo__estacion p{font-size:.9375rem;line-height:1.5;max-width:24rem}
  /* En vertical el texto va abajo, no al medio. Centrado, el blanco que lo
     sostiene caia justo sobre las manos y el material de vidrio, que es el
     tema de la toma, y partia la imagen en dos. Abajo se apoya en el borde de
     la seccion, donde el encuadre solo tiene bata. Las estaciones se anclan al
     pie para que la ultima linea quede siempre a la misma altura. */
  .labo__marco{justify-content:flex-end;padding-bottom:8vh}
  .labo__estacion{top:auto;bottom:0}
  /* El velo acompana al texto: transparente sobre la cara y las manos, opaco
     del 66 % hacia abajo, y llega al papel puro en el borde inferior para que
     la seccion de productos siga leyendo como continuidad. */
  .labo__velo{background:
    linear-gradient(to bottom,rgba(254,253,252,.5) 0%,rgba(254,253,252,.1) 10%,
      rgba(254,253,252,.04) 34%,rgba(254,253,252,.3) 46%,
      rgba(254,253,252,.72) 54%,rgba(254,253,252,.93) 60%,
      rgba(254,253,252,1) 66%,rgba(254,253,252,1) 100%)}
  /* Con movimiento reducido, las fijas verticales: las apaisadas se recortan
     a cover y en un telefono dejan al quimico fuera del cuadro. */
  .labo--apilado .labo__estacion--1{background-image:url('assets/img/lab/m/fija-1.webp')}
  .labo--apilado .labo__estacion--2{background-image:url('assets/img/lab/m/fija-2.webp')}
  .labo--apilado .labo__estacion--3{background-image:url('assets/img/lab/m/fija-3.webp')}
  /* El recorrido se apila y la fila de tarjetas pasa a ser un carrusel que se
     arrastra, sangrando hasta los dos bordes. */
  .recorrido{min-height:0;padding-block:var(--pady)}
  .recorrido__cuerpo{grid-template-columns:1fr;gap:30px;margin-top:38px}
  .recorrido__pista{width:auto}
  .recorrido__titulo{font-size:1.875rem}
  .recorrido__cuerpotxt{max-width:none}
  .recorrido__pista{margin-inline:calc(var(--padx) * -1);padding-inline:var(--padx)}
  .recorrido__fila{gap:10px}
  .recorrido__tarjeta{width:130px}
  .cierre__titulo{font-size:clamp(1.75rem,7.2vw,2.5rem)}
  .cierre__acciones{margin-top:34px}
  .boton--grande{font-size:1rem;padding:19px 44px 19px 34px}
  .pie__contacto{gap:34px}
  .recorrido__pie{margin-top:28px}
  .recorrido__cuenta{font-size:1.25rem}

  /* ‼️ En telefono no hay sitio para las miniaturas y le robaban alto a la
     foto, que es lo unico que se quiere ver. Se navega con las flechas. */
  .recorrido__pista{display:none}
  .recorrido__cuerpo{margin-top:26px}

  /* La fila se apila y el signo se ancla a la derecha. */
  .alcohol__fila{display:block;position:relative;padding:22px 32px 24px 0}
  .alcohol__fila:hover{padding-left:0}
  .alcohol__nombre{display:block;font-size:1.625rem;margin:0 0 6px;padding-right:70px}
  .alcohol__uso{display:block;font-size:.9375rem}
  .alcohol__grado{position:absolute;right:32px;top:20px;font-size:1rem}
  .alcohol__signo{position:absolute;right:0;top:50%;margin-top:-9px}
  /* En vertical el texto no cabe sobre la foto: baja al papel, debajo. */
  .alcohol__marco{overflow:visible;border-radius:0;background:none;margin-bottom:26px}
  /* El 16:9 en vertical deja media foto vacia y queda una franja baja: se
     recorta a 4:3 sobre el sujeto, que vive en el tercio izquierdo. */
  .alcohol__foto{border-radius:var(--radio);aspect-ratio:4/3;object-fit:cover;
    object-position:20% center}
  .alcohol__palabra{top:14px;left:14px;font-size:2rem;letter-spacing:-.03em;
    color:rgba(255,255,255,.62);max-width:7ch}
  .alcohol__texto{position:static;display:block;padding:22px 0 0}
  .alcohol__ficha{width:auto}
  .alcohol__resumen{color:var(--gris-cuerpo);font-size:1rem;line-height:1.6;margin-bottom:20px}
  .alcohol__lista li{color:var(--navy-900);border-top-color:rgba(5,30,42,.14);padding:10px 0}
  .alcohol__lista li:last-child{border-bottom-color:rgba(5,30,42,.14)}
  .proceso{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .campos{grid-template-columns:1fr}
  .formulario{padding:32px 24px}
  .pie__bajo{flex-direction:column;gap:10px}
  .lead{font-size:1.125rem}
}

/* ‼️ En vertical la foto sigue siendo FONDO, como en escritorio, pero no ocupa
   toda la seccion: arranca a media altura, donde empieza el cuerpo de texto.
   Dos motivos. El de arriba, que el titulo y el nombre viven sobre navy limpio.
   Y el de abajo, que una caja mas baja es menos vertical, asi que el recorte a
   cover se come mucho menos: se pasa de ver el 31 % del ancho del cuadro a ver
   la mitad. El azul de arriba la disuelve, de modo que el borde donde empieza
   no se ve. En apaisado no hace falta nada de esto y va a sangre. */
@media (max-width:1024px) and (orientation:portrait){
  /* Al sacarle las miniaturas la seccion se quedaba en 456 px y el texto le
     comia casi todo, asi que la foto no tenia donde verse. Se le da alto y el
     contenido se pega arriba: el sobrante de abajo es para la imagen. */
  .recorrido{min-height:80vh;align-items:flex-start}
  .recorrido__escena{top:54%}
  /* El azul de arriba llega SOLIDO hasta pasada la linea donde arranca la foto
     y hasta donde terminan las letras, asi que el borde superior del cuadro no
     se ve nunca. Y el pie tambien se disuelve en navy, para que la foto no
     corte en seco contra el final de la seccion. */
  .recorrido__velo{background:
    linear-gradient(to bottom,var(--navy-900) 0%,var(--navy-900) 64%,
      rgba(5,30,42,.84) 71%,rgba(5,30,42,.44) 79%,rgba(5,30,42,.2) 87%,
      rgba(5,30,42,.42) 95%,rgba(5,30,42,.6) 100%)}
  .recorrido__cuerpo{margin-top:32px}
  /* Miniaturas cuadradas y chicas. */
  .recorrido__tarjeta{width:82px}
  .recorrido__boton{aspect-ratio:1/1;border-radius:8px}
  .recorrido__fila{gap:8px}
  .recorrido__pista{padding:8px 0}
  /* La tira de mandos, al minimo. */
  .recorrido__pie{margin-top:20px}
  .recorrido__flecha{width:32px;height:32px}
  .recorrido__flecha svg{width:14px;height:14px}
  .recorrido__barra{max-width:150px;margin-left:4px}
  .recorrido__cuenta{font-size:1rem}
  .recorrido__mandos{gap:8px}
}

@media (max-width:420px){
  .proceso{grid-template-columns:1fr}
  .credenciales li{flex:1 1 100%}
}

/* =====================================================================
   PAGINAS INTERIORES · catalogo y como comprar
   ===================================================================== */

/* ---------- nav: marcar donde estoy ---------- */
.nav__menu a.es-aqui{color:var(--dorado-claro)}
.nav__menu a.es-aqui::after{content:'';display:block;height:1px;margin-top:5px;
  background:var(--dorado)}

/* ---------- cabecera de pagina interior ---------- */
.pagina-cab{padding:186px var(--padx) 84px;
  background:linear-gradient(158deg,var(--navy-700),var(--navy-900) 62%)}
/* La imagen acompana al TEMA de cada pagina, no decora: los cuatro tubos en el
   catalogo, la gandola en como comprar, la planta al atardecer en contacto.
   Encima va el mismo velo direccional del hero: profundo a la izquierda, donde
   cae el texto, y abierto a la derecha, donde esta el sujeto. */
.pagina-cab--foto{background-image:
    linear-gradient(100deg,rgba(5,30,42,.94) 0%,rgba(5,30,42,.74) 44%,rgba(5,30,42,.30) 100%),
    linear-gradient(to bottom,rgba(5,30,42,.50) 0%,rgba(5,30,42,.18) 42%,rgba(5,30,42,.97) 100%),
    var(--cab);
  background-size:cover;background-position:center}
.pagina-cab--catalogo{--cab:url('assets/img/cab-catalogo.webp?v=5')}
.pagina-cab--comprar{--cab:url('assets/img/cab-comprar.webp')}
.pagina-cab--contacto{--cab:url('assets/img/cab-contacto.webp');background-position:center 70%}
/* la bajada de una cabecera va sobre fondo oscuro y ahora ademas sobre foto:
   el gris de cuerpo no contrasta lo suficiente */
.pagina-cab .lead--medida{color:var(--blanco-80)}
.pagina-cab h1{font-size:clamp(2.25rem,4.4vw,3.75rem);margin:0 0 26px}
.salto{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;padding:0}
.salto a{display:inline-block;text-decoration:none;font-size:.875rem;
  padding:9px 18px;border-radius:999px;color:var(--blanco-80);
  border:1px solid rgba(255,255,255,.22);transition:border-color .2s,color .2s}
.salto a:hover{color:var(--navy-900);background:var(--dorado-claro);border-color:var(--dorado-claro)}

/* ---------- el film: video de fondo, la informacion siempre en el mismo sitio ---------- */
/* La seccion mide cuatro pantallas de alto. El video y el marco de contenido van
   los dos pegados con sticky en el mismo punto, asi que ninguno de los dos se
   mueve: lo unico que cambia con el scroll es CUAL panel esta visible. */
.film{position:relative;height:260vh;background:var(--navy-900)}
.film__fondo{position:sticky;top:0;height:100vh;overflow:hidden;z-index:0;
  background:linear-gradient(158deg,var(--navy-700),var(--navy-900) 60%)}
.film__fondo video{width:100%;height:100%;object-fit:cover;display:block}
/* el velo es lo que hace legible el texto encima del film */
.film__velo{position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(5,30,42,.55) 0%,rgba(5,30,42,.30) 60%,rgba(5,30,42,0) 100%)}

.film__marco{position:sticky;top:0;height:100vh;margin-top:-100vh;z-index:2;
  display:flex;align-items:center;padding:0 var(--padx)}
.film__caja{display:flex;align-items:center;justify-content:space-between;gap:56px;width:100%}
.film__paneles{flex:1 1 auto;max-width:620px;display:grid;align-items:center}

.panel{grid-area:1/1;opacity:0;visibility:hidden;
  transform:translateY(18px);pointer-events:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s}
.panel.es-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s}
.panel__cuenta{font-family:var(--titulo);font-weight:500;font-size:.8125rem;
  letter-spacing:.16em;color:var(--gris-etiqueta);margin:0 0 18px}
.panel__cuenta b{font-weight:700;color:var(--dorado-claro)}
.panel .ficha__cab{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.panel .ficha__cab h2{margin:0;color:var(--blanco)}
.panel .lead{max-width:none;margin-bottom:22px}
.usos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin:0;padding:0}
.usos li{font-size:.875rem;padding:7px 15px;border-radius:3px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--blanco-80)}

.tabla-tec{margin-top:26px;border-radius:var(--radio);padding:22px 24px 18px;
  background:rgba(3,21,30,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(205,173,128,.26)}
.tabla-tec__tit{font-family:var(--titulo);font-weight:500;font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dorado-claro);
  padding-bottom:12px;border-bottom:1px solid rgba(205,173,128,.4);margin:0}
.tabla-tec__cuerpo{margin:0;columns:2;column-gap:34px}
.tabla-tec__fila{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1);
  break-inside:avoid;-webkit-column-break-inside:avoid}
.tabla-tec__fila dt{font-size:.75rem;line-height:1.35;color:var(--blanco-62);flex:1 1 auto}
.tabla-tec__fila dt span{display:none}
.tabla-tec__fila dd{margin:0;flex:0 0 auto;text-align:right;
  font-family:var(--titulo);font-weight:500;font-size:.8125rem;
  letter-spacing:-.01em;color:var(--blanco);font-variant-numeric:tabular-nums}

/* el indice: dice cuantos son y en cual va */
.film__indice{flex:0 0 auto}
.film__indice ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  text-align:right}
.film__indice a{display:block;text-decoration:none;font-size:.875rem;padding:9px 0 9px 22px;
  color:var(--blanco-62);border-right:1px solid rgba(255,255,255,.16);padding-right:18px;
  transition:color .3s,border-color .3s}
.film__indice a.es-visible{color:var(--blanco);border-right-color:var(--dorado)}
.film__indice a:hover{color:var(--dorado-claro)}

.cab__muestra{margin:44px 0 0}
.cab__muestra img{height:280px;width:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}

@media (prefers-reduced-motion:reduce){
  .panel{transition:opacity .01ms,visibility 0s}
  .film__fondo video{display:none}
}

/* ---------- el catalogo por estaciones -------------------------------------
   Una sola toma de la destilacion con tres paradas, y cada parada es una parte
   de la pagina: la primera es el encabezado, la segunda saca los cuatro
   alcoholes a la derecha y la tercera abre la ficha del elegido. Misma
   mecanica que el laboratorio del home: el lienzo pegado ocupa la pantalla y
   el scroll mueve el cuadro. */
.destila{position:relative;height:320vh;background:var(--papel)}
.destila__pegado{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--papel) center/contain no-repeat url("assets/img/destila/d_001.webp");
  isolation:isolate}
.destila__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Dos velos que se turnan. En el encabezado el texto va al pie, asi que aclara
   desde abajo; de la segunda parada en adelante el panel se va a la derecha y
   el plano se corre a la izquierda para dejarle sitio. La opacidad de cada uno
   la maneja el guion, no una clase. */
.destila__velo{position:absolute;inset:0;pointer-events:none;will-change:opacity}
.destila__velo--pie{background:
  linear-gradient(to top,rgba(254,253,252,1) 0%,rgba(254,253,252,.99) 20%,
    rgba(254,253,252,.86) 34%,rgba(254,253,252,.5) 48%,
    rgba(254,253,252,.16) 60%,rgba(254,253,252,0) 73%),
  linear-gradient(to bottom,rgba(254,253,252,.92) 0%,rgba(254,253,252,0) 16%)}
.destila__velo--lado{opacity:0;background:
  linear-gradient(to left,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 26%,
    rgba(254,253,252,.93) 35%,rgba(254,253,252,.68) 45%,
    rgba(254,253,252,.3) 56%,rgba(254,253,252,.08) 66%,
    rgba(254,253,252,0) 75%),
  linear-gradient(to bottom,rgba(254,253,252,.92) 0%,rgba(254,253,252,0) 15%),
  linear-gradient(to top,rgba(254,253,252,.8) 0%,rgba(254,253,252,0) 11%)}

.destila__capa{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;
  will-change:opacity;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.23,1,.32,1)}
.destila__capa.visible{opacity:1;pointer-events:auto;transform:none}

/* ---- estacion 1: el encabezado de la pagina, al pie ---- */
.destila__cab{position:absolute;inset:auto 0 0 0;
  padding-bottom:clamp(44px,8vh,92px);
  display:flex;flex-direction:column;align-items:flex-start}
.destila__cab h1{color:var(--navy-900);font-size:clamp(2.25rem,4.4vw,3.75rem);
  margin:0 0 22px}
.destila__cab .lead--medida{color:var(--gris-cuerpo);margin:0}
.destila__cab .descargar{margin-top:28px}

/* ---- estaciones 2 y 3: el panel del lateral ---- */
.destila__panel{position:absolute;top:50%;transform:translateY(-50%);
  right:max(var(--padx),calc((100% - var(--ancho)) / 2));
  width:min(40rem,48vw);max-height:80vh;
  overflow-y:auto;overscroll-behavior:contain}
.destila__panel::-webkit-scrollbar{width:3px}
.destila__panel::-webkit-scrollbar-thumb{background:rgba(5,30,42,.18);border-radius:3px}
.destila__titulo{font-family:var(--titulo);font-weight:700;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dorado-texto);
  margin:0 0 16px}
.destila__nombres{list-style:none;margin:0;padding:0;display:grid;gap:0}
.destila__nombre{display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:0;border-bottom:1px solid rgba(5,30,42,.1);
  padding:12px 0;cursor:pointer;font-family:inherit;text-align:left}
.destila__marca{flex:none;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--papel-200);background:transparent;
  transition:background-color .35s ease,border-color .35s ease,transform .35s ease}
.destila__texto{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--titulo);font-weight:500;font-size:1.125rem;
  color:var(--gris-cuerpo);transition:color .35s ease}
.destila__texto em{font-style:normal;font-size:.8125rem;letter-spacing:.04em;
  color:var(--gris-etiqueta);transition:color .35s ease}
.destila__nombre:hover .destila__texto{color:var(--navy-900)}
.destila__nombre:hover .destila__marca{border-color:var(--dorado)}
.destila__nombre.es-activo .destila__marca{background:var(--dorado);
  border-color:var(--dorado);transform:scale(1.25)}
.destila__nombre.es-activo .destila__texto{color:var(--navy-900);font-weight:700}
.destila__nombre.es-activo .destila__texto em{color:var(--dorado-texto)}
.destila__ayuda{font-size:.875rem;color:var(--gris-etiqueta);margin:16px 0 0;
  transition:opacity .4s ease}
.destila--ficha .destila__ayuda{opacity:0}

/* La ficha crece desde cero al llegar a la tercera parada. La reja de una sola
   fila es lo que permite animar el alto sin saber cuanto mide el contenido. */
.destila__fichas{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .7s cubic-bezier(.23,1,.32,1)}
.destila--ficha .destila__fichas{grid-template-rows:1fr}
.destila__fichas > *{min-height:0}
.destila__ficha[hidden]{display:none}
.destila__ficha .ficha__cab{display:flex;align-items:baseline;gap:20px;
  flex-wrap:wrap;margin:22px 0 14px}
.destila__ficha .ficha__cab h2{margin:0;color:var(--navy-900)}
.destila__ficha .lead{max-width:none;margin-bottom:20px;color:var(--gris-cuerpo)}

/* ---- sin motor: todo apilado y legible ---- */
.destila--apilado{height:auto}
.destila--apilado .destila__pegado{position:static;height:auto;overflow:visible}
.destila--apilado .destila__lienzo,.destila--apilado .destila__velo,
.destila--apilado .destila__lienzo{display:none}
.destila--apilado .destila__capa{position:static;opacity:1;transform:none;
  pointer-events:auto}
.destila--apilado .destila__cab{position:static;padding:150px var(--padx) 40px}
.destila--apilado .destila__panel{position:static;transform:none;width:auto;
  max-height:none;overflow:visible;padding:0 var(--padx) var(--pady)}
.destila--apilado .destila__fichas{grid-template-rows:1fr}

@media (prefers-reduced-motion:reduce){
  .destila__capa,.destila__fichas,.destila__marca,.destila__texto{transition:none}
}

/* En telefono y tableta el panel va al pie a todo el ancho, no al lateral: no
   hay sitio para una columna al costado sin comerse la escena. */
@media (max-width:1024px){
  .destila{height:300vh}
  .destila__velo--lado{background:
    linear-gradient(to top,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 26%,
      rgba(254,253,252,.9) 40%,rgba(254,253,252,.55) 52%,
      rgba(254,253,252,.18) 64%,rgba(254,253,252,0) 76%),
    linear-gradient(to bottom,rgba(254,253,252,.92) 0%,rgba(254,253,252,0) 15%)}
  .destila__panel{position:absolute;top:auto;bottom:0;left:0;right:0;
    transform:none;width:auto;max-height:62vh;
    padding:0 var(--padx) clamp(28px,5vh,54px)}
  .destila__texto{font-size:1.0625rem}
}
@media (max-width:760px){
  .destila{height:280vh}
  .destila__cab{padding-bottom:clamp(32px,6vh,64px)}
  .destila__cab h1{font-size:clamp(1.875rem,7.4vw,2.375rem);margin-bottom:16px}
  .destila__cab .descargar{margin-top:20px}
  .destila__panel{max-height:66vh}
  .destila__titulo{font-size:.75rem;margin-bottom:12px}
  .destila__texto{font-size:1rem}
  .destila__nombre{padding:10px 0}
  .destila__ficha .ficha__cab{margin-top:18px}
}

/* La ficha completa mide mas que el panel en pantallas chicas, donde la tabla
   cae a una columna. Ahi se dejan los cuatro parametros que deciden la compra y
   el resto queda en la ficha tecnica y en la comparativa de abajo: obligar a
   scrollear dentro de una seccion que ya se mueve con el scroll es peor que
   resumir. */
.destila__resto{display:none;font-size:.8125rem;color:var(--gris-etiqueta);
  margin:14px 0 0}
@media (max-width:1024px){
  .destila__ficha .tabla-tec__fila:not(.es-clave){display:none}
  .destila--ficha .destila__resto{display:block}
}

/* En pantalla chica el panel es una hoja al pie, y con la ficha abierta la
   lista de nombres se lleva media hoja. Ahi los nombres se encogen a fichas en
   una fila que corre de lado: siguen a mano para cambiar de alcohol, pero
   dejan el sitio a lo que se vino a leer. */
@media (max-width:1024px){
  .destila--ficha .destila__titulo{display:none}
  .destila--ficha .destila__nombres{display:flex;gap:8px;overflow-x:auto;
    padding-bottom:4px;scrollbar-width:none}
  .destila--ficha .destila__nombres::-webkit-scrollbar{display:none}
  .destila--ficha .destila__nombre{width:auto;gap:8px;padding:7px 14px;
    border:1px solid rgba(5,30,42,.14);border-radius:999px;white-space:nowrap}
  .destila--ficha .destila__nombre.es-activo{border-color:var(--dorado);
    background:rgba(190,150,92,.12)}
  .destila--ficha .destila__marca{width:7px;height:7px}
  .destila--ficha .destila__texto{font-size:.875rem}
  .destila--ficha .destila__texto em{display:none}
}

/* La ficha entra suave: la reja abre el alto y el articulo sube y aparece un
   poco despues, en vez de estirarse de golpe. */
.destila__fichas{transition:grid-template-rows .8s cubic-bezier(.22,1,.36,1)}
.destila__ficha{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease .14s,transform .7s cubic-bezier(.22,1,.36,1) .14s}
.destila--ficha .destila__ficha{opacity:1;transform:none}

/* ‼️ En telefono la escena NO cubre la pantalla: el cuadro es apaisado y la
   pantalla vertical, asi que cubrir ampliaba la imagen casi cuatro veces y se
   comia tres cuartos del tren de destilacion. El plano llena el ancho y queda
   arriba; el papel de abajo es donde vive el texto, y el velo solo disuelve el
   borde inferior de la imagen para que no se vea donde termina. */
@media (max-width:760px){
  .destila__pegado{background-image:url("assets/img/destila/m/m_001.webp");
    background-size:100% auto;background-position:center 12%}
  .destila__velo--pie,.destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,.88) 0%,rgba(254,253,252,0) 9%,
      rgba(254,253,252,0) 28%,rgba(254,253,252,.55) 36%,
      rgba(254,253,252,.95) 43%,rgba(254,253,252,1) 48%)}
  .destila__velo--lado{opacity:0}
  .destila__panel{max-height:56vh}
  .destila__cab{padding-bottom:clamp(28px,5vh,52px)}
}

/* ---- estacion 3: la ficha sola, desplegada, con camino de vuelta -----------
   Antes la lista de nombres y la ficha convivian en el mismo panel y entre las
   dos no entraban: aparecia una barra de desplazamiento dentro de una seccion
   que ya se mueve con el scroll, que es lo peor de los dos mundos. Ahora al
   abrir una ficha la lista se va, la ficha se despliega a lo ancho y se vuelve
   a la lista con un boton. */
.destila__volver{display:none;align-items:center;gap:8px;background:none;border:0;
  padding:0 0 6px;cursor:pointer;font-family:var(--titulo);font-weight:500;
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-etiqueta);transition:color .3s ease}
.destila__volver svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.destila__volver:hover{color:var(--dorado-texto)}
.destila--ficha .destila__volver{display:inline-flex}
.destila--ficha .destila__titulo,
.destila--ficha .destila__nombres,
.destila--ficha .destila__ayuda{display:none}
/* con la lista fuera, la ficha se puede ensanchar y la tabla entra en dos
   columnas sin que haya que desplazar nada */
.destila--ficha .destila__panel{width:min(46rem,56vw)}
.destila--ficha .destila__ficha .ficha__cab{margin:6px 0 14px}

/* El primer cuadro de fondo se coloca como lo dibuja el lienzo: llenando el
   ancho, no metido entero ni cubriendo. */
.destila__pegado{background-size:100% auto;background-position:center}

@media (max-width:1024px){
  .destila--ficha .destila__panel{width:auto}
  .destila--ficha .destila__nombres{display:none}
}
@media (max-width:760px){
  .destila__pegado{background-position:center 12%}
}

/* ---- nitidez del panel y de sus marcas ------------------------------------
   ‼️ Nada de transform ni de will-change en lo que lleva texto. El panel se
   centraba con translateY(-50%) y la capa declaraba will-change:opacity; las
   dos cosas lo promueven a una capa de composicion aparte, y ahi Windows le
   apaga el suavizado subpixel: las letras salen mordidas y el circulo de la
   marca, picado. Se centra con reja y se anima solo la opacidad. */
.destila__capa{transform:none;will-change:auto;transition:opacity .5s ease}
.destila__capa--panel{display:flex;align-items:center;justify-content:flex-end;
  padding:19vh max(var(--padx),calc((100% - var(--ancho)) / 2)) 5vh}
.destila__panel{position:static;top:auto;right:auto;bottom:auto;transform:none;
  max-height:76vh}

/* La marca ya no se escala: crecer con transform la promovia y la dejaba con el
   borde dentado. El estado activo se nota con el relleno y un aro por fuera. */
.destila__marca{width:10px;height:10px;
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.destila__nombre.es-activo .destila__marca{transform:none;
  box-shadow:0 0 0 3px rgba(190,150,92,.22)}

@media (max-width:1024px){
  .destila__capa--panel{display:block;padding:0}
  .destila__panel{position:absolute;bottom:0;left:0;right:auto;width:100%;
    max-height:62vh}
}
@media (max-width:760px){
  .destila__panel{max-height:56vh}
}

/* ---------- comparativa ---------- */
.comparativa{background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}
.comparativa h2{color:var(--blanco)}
.tabla-envoltura{overflow-x:auto;margin-top:44px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radio)}
.tabla-comp{width:100%;border-collapse:collapse;min-width:760px;font-size:.875rem}
.tabla-comp th,.tabla-comp td{text-align:left;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.tabla-comp tr:last-child th,.tabla-comp tr:last-child td{border-bottom:0}
.tabla-comp thead th{font-family:var(--titulo);font-weight:700;font-size:.9375rem;
  color:var(--dorado-claro);background:rgba(5,30,42,.5);
  border-bottom:1px solid rgba(205,173,128,.4);white-space:nowrap}
.tabla-comp tbody th{font-weight:500;color:var(--blanco-80);white-space:nowrap}
.tabla-comp tbody th span{display:block;font-size:.6875rem;color:var(--gris-etiqueta);margin-top:1px}
.tabla-comp td{color:var(--blanco);font-family:var(--titulo);font-weight:500;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-comp tbody tr:hover th,.tabla-comp tbody tr:hover td{background:rgba(255,255,255,.04)}

/* ---------- aviso de documentacion ---------- */
.aviso{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap;
  margin-top:52px;padding:34px 38px;border-radius:var(--radio);
  background:rgba(190,150,92,.1);border:1px solid rgba(205,173,128,.3)}
.aviso h3{color:var(--blanco);margin-bottom:8px}
.aviso p{color:var(--blanco-80);font-size:.9375rem;max-width:620px}
.aviso .boton{flex:0 0 auto}

/* ---------- pagina en claro ----------------------------------------------
   El catalogo corre entero sobre papel: solo la barra de arriba y el pie
   quedan en navy. Se resuelve con una marca en el body y un bloque de
   inversion, en vez de tocar las reglas base, porque esas mismas clases las
   usan las otras paginas interiores, que siguen oscuras. */
/* El color del body es blanco-80, heredado por todo lo que no declare el suyo:
   acá se cambia por gris de cuerpo, o cualquier elemento nuevo saldria en claro
   sobre claro. */
.pagina-clara{background:var(--papel);color:var(--gris-cuerpo)}
/* La barra es transparente hasta que se hace scroll, y sobre papel el logo y
   los enlaces blancos desaparecian. Acá arranca ya con su fondo navy. */
.pagina-clara .nav{background:rgba(5,30,42,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08)}

/* la cabecera: el velo se invierte, de navy a papel, y el texto se oscurece */
/* Mas alta, para que entre el condensador entero y no solo la punta. El
   degradado de abajo llega a papel puro: sin eso se ve la linea donde termina
   la fotografia contra el fondo de la pagina. */
.pagina-clara .pagina-cab{background:var(--papel);padding-bottom:190px}
.pagina-clara .pagina-cab--foto{background-image:
    linear-gradient(100deg,rgba(254,253,252,.97) 0%,rgba(254,253,252,.86) 42%,
      rgba(254,253,252,.28) 100%),
    linear-gradient(to bottom,rgba(254,253,252,.5) 0%,rgba(254,253,252,.06) 30%,
      rgba(254,253,252,.14) 70%,rgba(254,253,252,.6) 88%,var(--papel) 100%),
    var(--cab)}
.pagina-clara .pagina-cab h1{color:var(--navy-900)}
.pagina-clara .pagina-cab .lead--medida{color:var(--gris-cuerpo)}

/* el film */
.pagina-clara .film{background:var(--papel)}
.pagina-clara .film__fondo{background:linear-gradient(158deg,var(--papel),var(--papel-100) 60%)}
.pagina-clara .film__velo{background:linear-gradient(100deg,
    rgba(254,253,252,.6) 0%,rgba(254,253,252,.3) 60%,rgba(254,253,252,0) 100%)}
.pagina-clara .panel__cuenta{color:var(--gris-etiqueta)}
.pagina-clara .panel__cuenta b{color:var(--dorado-texto)}
/* El grado perdio su regla base cuando se rehizo el bloque de productos del
   home: ahora solo vive acá, en las fichas del catalogo. */
.grado{font-family:var(--titulo);font-weight:700;font-size:1.625rem;
  letter-spacing:-.01em;color:var(--dorado-claro);white-space:nowrap}
.pagina-clara .grado{color:var(--dorado-texto)}
.pagina-clara .panel .ficha__cab h2{color:var(--navy-900)}
.pagina-clara .panel .lead{color:var(--gris-cuerpo)}
.pagina-clara .usos li{background:rgba(5,30,42,.045);border-color:rgba(5,30,42,.14);
  color:var(--navy-800)}
.pagina-clara .tabla-tec{background:rgba(255,255,255,.7);
  border-color:rgba(143,108,57,.32);backdrop-filter:none}
.pagina-clara .tabla-tec__tit{color:var(--dorado-texto);
  border-bottom-color:rgba(143,108,57,.42)}
.pagina-clara .tabla-tec__fila{border-bottom-color:rgba(5,30,42,.1)}
.pagina-clara .tabla-tec__fila dt{color:var(--gris-cuerpo)}
.pagina-clara .tabla-tec__fila dd{color:var(--navy-900)}
.pagina-clara .film__indice a{color:var(--gris-etiqueta);
  border-right-color:rgba(5,30,42,.16)}
.pagina-clara .film__indice a.es-visible{color:var(--navy-900);
  border-right-color:var(--dorado)}
.pagina-clara .film__indice a:hover{color:var(--dorado-texto)}

/* la comparativa */
.pagina-clara .comparativa{background:var(--papel-100)}
.pagina-clara .comparativa h2{color:var(--navy-900)}
.pagina-clara .tabla-envoltura{border-color:rgba(5,30,42,.14);background:var(--papel)}
.pagina-clara .tabla-comp th,.pagina-clara .tabla-comp td{
  border-bottom-color:rgba(5,30,42,.1)}
.pagina-clara .tabla-comp thead th{color:var(--dorado-texto);
  background:rgba(5,30,42,.04);border-bottom-color:rgba(143,108,57,.42)}
.pagina-clara .tabla-comp tbody th{color:var(--gris-cuerpo)}
.pagina-clara .tabla-comp tbody th span{color:var(--gris-etiqueta)}
.pagina-clara .tabla-comp td{color:var(--navy-900)}
.pagina-clara .tabla-comp tbody tr:hover th,
.pagina-clara .tabla-comp tbody tr:hover td{background:rgba(5,30,42,.03)}

/* el aviso del pie de la comparativa */
.pagina-clara .aviso{background:rgba(190,150,92,.12);border-color:rgba(143,108,57,.3)}
.pagina-clara .aviso h3{color:var(--navy-900)}
.pagina-clara .aviso p{color:var(--gris-cuerpo)}

/* el boton de linea vive sobre navy: en claro necesita borde y texto oscuros */
.pagina-clara .boton--linea{border-color:rgba(5,30,42,.3);color:var(--navy-900)}

/* ---------- responsive de lo nuevo ---------- */
@media (max-width:1120px){
  .film__caja{gap:36px}
  .film__paneles{max-width:540px}
  .tabla-tec__cuerpo{column-gap:26px}
}
@media (max-width:900px){
  .pagina-cab{padding:152px var(--padx) 68px}
  /* en telefono el texto ocupa todo el ancho, asi que el velo deja de ser
     direccional y pasa a ser vertical: oscuro arriba, donde cae el texto */
  .pagina-cab--foto{background-image:
      linear-gradient(to bottom,rgba(5,30,42,.93) 0%,rgba(5,30,42,.88) 40%,rgba(5,30,42,.62) 72%,rgba(5,30,42,.96) 100%),
      var(--cab)}
  /* nada de anclado en movil: el video queda arriba y los paneles se apilan */
  .film{height:auto}
  .film__fondo{position:relative;height:0}
  .film__marco{position:static;height:auto;margin-top:0;display:block;
    padding:0 var(--padx) var(--pady)}
  .film__caja{display:block}
  .film__paneles{max-width:none;display:block}
  .panel{grid-area:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    padding-top:64px;border-top:1px solid rgba(255,255,255,.14)}
  .panel:first-child{border-top:0}
  .film__indice{display:none}
  .tabla-tec__cuerpo{columns:1}
  .cab__muestra img{height:220px;margin-inline:auto}
}
@media (max-width:640px){
  .pagina-cab{padding:132px var(--padx) 56px}
  .cab__muestra img{height:200px}
  .tabla-tec{padding:22px 20px 20px}
  .aviso{padding:26px 24px;gap:26px}
  .salto{gap:8px}
}

/* =====================================================================
   COMO COMPRAR
   ===================================================================== */

/* ---------- los seis pasos del servicio ---------- */
.servicio{background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}
.servicio h2{color:var(--blanco)}
.servicio__pasos{list-style:none;counter-reset:p;margin:52px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 72px}
.servicio__pasos li{position:relative;padding:30px 0 30px 0;
  border-top:1px solid rgba(255,255,255,.14)}
.servicio__pasos li:nth-child(1),.servicio__pasos li:nth-child(2){border-top:0;padding-top:0}
.servicio__pasos .paso{display:block;font-family:var(--titulo);font-weight:700;
  font-size:.8125rem;letter-spacing:.14em;color:var(--dorado);margin-bottom:12px}
.servicio__pasos h3{color:var(--blanco);margin-bottom:10px}
.servicio__pasos p{font-size:.9375rem;line-height:1.62;color:var(--blanco-62);max-width:46ch}
/* el paso 03 es el que demora: se marca */
.servicio__pasos li:nth-child(3)::before{content:'';position:absolute;left:-24px;top:34px;
  bottom:34px;width:2px;background:var(--dorado)}

/* ---------- presentaciones ---------- */
.presentaciones{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin:52px 0 0;padding:0}
.presentaciones li{padding:28px 30px;border-radius:var(--radio);
  background:var(--blanco);border:1px solid var(--papel-200);
  box-shadow:0 1px 2px rgba(5,30,42,.05),0 14px 34px -22px rgba(5,30,42,.3)}
.presentaciones .etiqueta{margin:0 0 10px;color:var(--dorado-texto)}
.presentaciones strong{display:block;font-family:var(--titulo);font-weight:700;
  font-size:2.25rem;letter-spacing:-.02em;color:var(--navy-800);line-height:1}
.presentaciones p{font-size:.9375rem;line-height:1.6;margin-top:14px;color:var(--gris-cuerpo)}
.nota-transporte{margin-top:32px;font-size:.9375rem;color:var(--gris-etiqueta)}

/* ---------- permisologia ---------- */
.permisos{background:linear-gradient(150deg,var(--navy-800),var(--navy-900))}
.permisos h2{color:var(--blanco)}
.permisos__caja{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:88px;align-items:start}
.permisos__lista{list-style:none;margin:0;padding:0;counter-reset:n}
.permisos__lista li{counter-increment:n;position:relative;padding:22px 0 22px 54px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.permisos__lista li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.permisos__lista li::before{content:counter(n,decimal-leading-zero);position:absolute;
  left:0;top:24px;font-family:var(--titulo);font-weight:700;font-size:.8125rem;
  letter-spacing:.1em;color:var(--dorado)}
.permisos__lista strong{display:block;font-family:var(--titulo);font-weight:500;
  font-size:1.125rem;color:var(--blanco)}
.permisos__lista span{display:block;font-size:.875rem;color:var(--blanco-62);margin-top:3px}

/* ---------- preguntas frecuentes ---------- */
.faq__lista{margin-top:48px;border-top:1px solid var(--papel-200)}
.faq__item{border-bottom:1px solid var(--papel-200)}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--titulo);font-weight:500;font-size:1.125rem;line-height:1.4;
  color:var(--navy-800);transition:color .18s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--dorado-texto)}
.faq__item summary::after{content:'';position:absolute;right:6px;top:31px;
  width:11px;height:11px;border-right:1.6px solid var(--dorado);
  border-bottom:1.6px solid var(--dorado);transform:rotate(45deg);
  transition:transform .2s ease}
.faq__item[open] summary::after{transform:rotate(-135deg);top:34px}
.faq__item p{padding:0 60px 26px 0;margin:-4px 0 0;font-size:.9375rem;
  line-height:1.68;color:var(--gris-cuerpo);max-width:76ch}
.aviso--claro{background:rgba(190,150,92,.12);border-color:rgba(143,108,57,.32)}
.aviso--claro h3{color:var(--navy-800)}
.aviso--claro p{color:var(--gris-cuerpo)}

@media (max-width:1120px){
  .permisos__caja{gap:56px;grid-template-columns:minmax(0,1fr) 420px}
  .servicio__pasos{gap:0 48px}
}
@media (max-width:900px){
  .servicio__pasos,.presentaciones,.permisos__caja{grid-template-columns:1fr;gap:0}
  .servicio__pasos li:nth-child(2){border-top:1px solid rgba(255,255,255,.14);padding-top:30px}
  .servicio__pasos li:nth-child(3)::before{left:-18px}
  .presentaciones{gap:20px}
  .permisos__caja{gap:44px}
  .permisos__lista{margin-top:8px}
}
@media (max-width:640px){
  .faq__item summary{font-size:1rem;padding-right:36px}
  .faq__item p{padding-right:0}
  .presentaciones li{padding:24px 22px}
  .servicio__pasos li:nth-child(3)::before{display:none}
}

/* ---------- enlace de "seguir leyendo" entre paginas ---------- */
.enlace-mas{display:inline-flex;align-items:center;gap:10px;margin-top:34px;
  font-size:.9375rem;text-decoration:none;color:var(--dorado-claro);
  padding-bottom:4px;border-bottom:1px solid rgba(205,173,128,.42);
  transition:gap .2s ease,border-color .2s}
.enlace-mas:hover{gap:16px;border-color:var(--dorado-claro)}
.enlace-mas span{font-size:1.05em;line-height:1}
.enlace-mas--claro{color:var(--dorado-texto);border-bottom-color:rgba(143,108,57,.4)}
.enlace-mas--claro:hover{border-color:var(--dorado-texto)}

/* Pantallas bajas. El panel más alto del film mide unos 700 px: en un portátil de
   768 de alto no entra con aire, así que se compacta en vez de desbordar. */
@media (min-width:901px) and (max-height:1040px){
  .film .lead{font-size:1rem;line-height:1.48;margin-bottom:16px}
  .panel__cuenta{margin-bottom:10px}
  .panel .ficha__cab{margin-bottom:10px}
  .panel .ficha__cab h2{font-size:1.625rem}
  .panel .grado{font-size:1.5rem}
  .usos li{padding:4px 11px;font-size:.8125rem}
  .usos{gap:8px 9px}
  .tabla-tec{margin-top:18px;padding:16px 18px 12px}
  .tabla-tec__fila{padding:4px 0}
  .tabla-tec__fila dt{font-size:.6875rem}
  .tabla-tec__fila dd{font-size:.75rem}
  .tabla-tec__tit{padding-bottom:9px}
}

/* ---------- descarga de la ficha técnica ---------- */
/* La cabecera del catalogo ya no lista los cuatro productos: el visitante los
   tiene abajo igual. En su lugar va la accion, que es pedir la ficha del suyo,
   y la descarga general queda de segunda opcion. */
.descargar{display:inline-flex;align-items:center;gap:12px;margin-top:34px;
  padding:15px 26px;border-radius:5px;text-decoration:none;
  background:linear-gradient(100deg,var(--dorado-claro),var(--dorado));color:var(--navy-900);
  font-weight:500;font-size:.9375rem;transition:transform .18s ease,filter .18s ease}
.descargar:hover{filter:brightness(1.07);transform:translateY(-1px)}
.descargar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.descargar span{font-weight:400;opacity:.7;font-size:.8125rem}
.aviso__botones{display:flex;gap:14px;flex-wrap:wrap;flex:0 0 auto}
@media (max-width:640px){
  .aviso__botones{width:100%}
  .aviso__botones .boton{flex:1 1 auto;text-align:center;justify-content:center}
}

/* ---------- entrada por industria ---------- */

/* ---------- permisología: lo que ponemos nosotros se distingue ---------- */
.permisos__nuestro{position:relative}
.permisos__nuestro strong{color:var(--dorado-claro)}
.permisos__nuestro::after{content:'Lo emitimos nosotros';position:static;display:inline-block;margin-top:10px;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-900);
  background:var(--dorado-claro);padding:3px 9px;border-radius:3px;font-weight:500}

/* etiqueta de campo opcional en el formulario */
.campo__opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--blanco-62);font-size:.9em}

/* ---------- páginas legales ---------- */
.legal__caja{max-width:760px}
.legal h2{margin:40px 0 12px;color:var(--navy-800)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--gris-cuerpo);margin-bottom:14px;max-width:70ch}
.legal__lista{margin:0 0 14px;padding-left:20px;color:var(--gris-cuerpo);max-width:70ch}
.legal__lista li{margin-bottom:7px}
/* quedo huerfana al rehacer el bloque de proceso: vive en como-comprar */
.pie-nota{color:var(--blanco-62)}
.pie__legal,.pie__bajo p{color:var(--gris-etiqueta);margin:0}
.pie__legal a{color:var(--dorado-claro);text-decoration:none}
.pie__legal a:hover{color:var(--dorado)}

/* ---------- aviso de cookies ---------- */
.cookies[hidden]{display:none}
.cookies{position:fixed;left:24px;right:24px;bottom:24px;z-index:80;max-width:520px;margin-inline:auto;
  background:var(--navy-700);border:1px solid rgba(205,173,128,.34);border-radius:var(--radio);
  padding:22px 24px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:14px}
.cookies p{font-size:.9375rem;color:var(--blanco-80);margin:0}
.cookies a{color:var(--dorado-claro)}
.cookies__botones{display:flex;gap:12px}
.cookies__botones .boton{flex:1 1 auto;justify-content:center;padding:12px 18px}
/* ---- la barra solo vive arriba del todo ------------------------------------
   En las paginas con escenas a pantalla completa la barra cruzaba una linea por
   encima de la imagen todo el tiempo. Ahora se va apenas se empieza a bajar y
   vuelve al llegar de nuevo al tope. Se marca con una clase en el body, no en
   todas las paginas: en las interiores de texto la barra sigue fija. */
.nav-al-tope .nav{transition:transform .38s cubic-bezier(.4,0,.2,1),
  opacity .28s ease,background-color .3s ease,padding .3s ease,
  backdrop-filter .3s ease}
.nav-al-tope.abajo .nav{transform:translateY(-100%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .nav-al-tope .nav{transition:opacity .01ms}
  .nav-al-tope.abajo .nav{transform:none;visibility:hidden}
}
/* ---- estacion 2: el panel al margen, y sin el blanco de arriba -------------
   El riel centra el contenido a 1200 px, asi que en un monitor de 1920 el panel
   quedaba a 360 px del borde y dejaba una franja de papel muerto a la derecha.
   El panel es lo unico que vive ahi y no tiene por que respetar el riel: se
   pega al margen de pagina, que es el limite de verdad. */
.destila__capa--panel{padding-inline-end:var(--padx)}

/* ‼️ Fuera el degradado superior. Estaba para que se leyera la barra de
   navegacion por encima de la escena, y la barra ahora se esconde en cuanto se
   baja: lo unico que hacia era lavar la parte de arriba de la imagen justo en
   la estacion 2. */
.destila__velo--lado{background:
  linear-gradient(to left,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 28%,
    rgba(254,253,252,.94) 37%,rgba(254,253,252,.7) 47%,
    rgba(254,253,252,.32) 58%,rgba(254,253,252,.08) 68%,
    rgba(254,253,252,0) 77%),
  linear-gradient(to top,rgba(254,253,252,.8) 0%,rgba(254,253,252,0) 11%)}

/* La marca, mas simple. A 10 px un borde de 1 px MAS un aro por fuera es
   demasiado detalle para tan pocos pixeles: el aro se leia como un segundo
   circulo roto. Queda un punto lleno y nada mas. */
.destila__marca{width:11px;height:11px;box-shadow:none}
.destila__nombre.es-activo .destila__marca{box-shadow:none;
  background:var(--dorado);border-color:var(--dorado)}

/* Mas contraste: el gris de cuerpo sobre una foto velada se leia flojo. */
.destila__texto{color:var(--navy-600)}
.destila__texto em{color:var(--gris-cuerpo)}
.destila__nombre.es-activo .destila__texto{color:var(--navy-900)}
.destila__nombre.es-activo .destila__texto em{color:var(--dorado-texto)}
.destila__ayuda{color:var(--gris-cuerpo)}

@media (max-width:1024px){
  .destila__capa--panel{padding-inline-end:0}
  .destila__velo--lado{background:
    linear-gradient(to top,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 26%,
      rgba(254,253,252,.9) 40%,rgba(254,253,252,.55) 52%,
      rgba(254,253,252,.18) 64%,rgba(254,253,252,0) 76%)}
}
@media (max-width:760px){
  .destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 28%,
      rgba(254,253,252,.55) 36%,rgba(254,253,252,.95) 43%,
      rgba(254,253,252,1) 48%)}
}
/* ---- estacion 1: el texto a la izquierda, a media altura -------------------
   El velo pasa al lateral IZQUIERDO, que es donde vive el titular, y deja la
   derecha al descubierto para que se vea el destilador. Se va el degradado de
   abajo: el texto ya no vive ahi. Con el de la estacion 2 en el lateral
   derecho, el paso de una a otra se lee como un barrido de un lado al otro. */
.destila__velo--pie{background:
  linear-gradient(to right,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 30%,
    rgba(254,253,252,.94) 39%,rgba(254,253,252,.7) 49%,
    rgba(254,253,252,.32) 60%,rgba(254,253,252,.08) 70%,
    rgba(254,253,252,0) 79%)}

.destila__capa--cab{display:flex;align-items:center;justify-content:flex-start;
  padding-inline:max(var(--padx),calc((100% - var(--ancho)) / 2))}
.destila__cab{position:static;inset:auto;padding:0;margin-inline:0;
  max-width:none;width:min(32rem,46vw)}

/* En telefono y tableta el plano vive arriba y el papel de abajo es del texto,
   asi que ahi el velo sigue siendo inferior y el titular se queda al pie. */
@media (max-width:1024px){
  .destila__velo--pie{background:
    linear-gradient(to top,rgba(254,253,252,1) 0%,rgba(254,253,252,1) 26%,
      rgba(254,253,252,.9) 40%,rgba(254,253,252,.55) 52%,
      rgba(254,253,252,.18) 64%,rgba(254,253,252,0) 76%),
    linear-gradient(to bottom,rgba(254,253,252,.9) 0%,rgba(254,253,252,0) 15%)}
  .destila__capa--cab{display:block;padding-inline:0}
  .destila__cab{position:absolute;inset:auto 0 0 0;width:auto;
    padding:0 var(--padx) clamp(28px,5vh,52px)}
}
@media (max-width:760px){
  .destila__velo--pie{background:
    linear-gradient(to bottom,rgba(254,253,252,.88) 0%,rgba(254,253,252,0) 9%,
      rgba(254,253,252,0) 28%,rgba(254,253,252,.55) 36%,
      rgba(254,253,252,.95) 43%,rgba(254,253,252,1) 48%)}
}
/* ---------- la brujula: el menu que reemplaza a la barra escondida ----------
   La barra de arriba se va en cuanto se baja, y sin esto no habia forma de
   cambiar de pagina sin volver hasta el tope. Aparece exactamente cuando la
   barra se esconde, en el mismo sitio donde estaba, para que la mano ya sepa
   donde buscar. */
.brujula{position:fixed;top:16px;right:var(--padx);z-index:60;
  opacity:0;pointer-events:none;transform:translateY(-12px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}
.nav-al-tope.abajo .brujula{opacity:1;pointer-events:auto;transform:none}

.brujula__boton{display:grid;place-content:center;gap:5px;
  width:46px;height:46px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(5,30,42,.92);backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(5,30,42,.22)}
.brujula__boton span{display:block;width:18px;height:2px;border-radius:2px;
  background:var(--blanco);transition:transform .25s ease,opacity .2s ease}
.brujula__boton[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.brujula__boton[aria-expanded=true] span:nth-child(2){opacity:0}
.brujula__boton[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.brujula__menu{position:absolute;top:58px;right:0;min-width:15.5rem;
  display:flex;flex-direction:column;gap:0;padding:8px 20px 20px;
  border-radius:var(--radio);background:rgba(5,30,42,.96);
  backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(5,30,42,.32)}
.brujula__menu[hidden]{display:none}
.brujula__menu a{padding:12px 0;text-decoration:none;font-size:.9375rem;
  color:var(--blanco-80);border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s}
.brujula__menu a:hover{color:var(--blanco)}
.brujula__menu a.es-aqui{color:var(--dorado-claro)}
.brujula__menu .boton{justify-content:center;margin-top:16px;border-bottom:0;
  color:var(--navy-900)}

@media (prefers-reduced-motion:reduce){
  .brujula{transition:opacity .01ms;transform:none}
  .nav-al-tope.abajo .brujula{transform:none}
  .brujula__boton span{transition:none}
}
@media (max-width:760px){
  .brujula{top:12px}
  .brujula__menu{min-width:min(17rem,calc(100vw - var(--padx) * 2))}
}

/* ---------- la ficha de la estacion 3 entra escalonada ----------------------
   Antes el bloque entero se estiraba de golpe. Ahora el alto abre con una
   curva larga y las partes de la ficha llegan una detras de otra: el titulo,
   el texto, los usos y la tabla. Se lee mucho mas suave que una sola pieza
   creciendo. */
.destila__fichas{transition:grid-template-rows 1.05s cubic-bezier(.16,1,.3,1)}
.destila__ficha{opacity:1;transform:none;transition:none}
.destila__ficha > *{opacity:0;transform:translateY(15px);
  transition:opacity .62s ease,transform .82s cubic-bezier(.16,1,.3,1)}
.destila--ficha .destila__ficha > *{opacity:1;transform:none}
.destila--ficha .destila__ficha > *:nth-child(1){transition-delay:.14s}
.destila--ficha .destila__ficha > *:nth-child(2){transition-delay:.22s}
.destila--ficha .destila__ficha > *:nth-child(3){transition-delay:.30s}
.destila--ficha .destila__ficha > *:nth-child(4){transition-delay:.38s}
.destila__volver{transition:color .3s ease,opacity .5s ease .06s}

@media (prefers-reduced-motion:reduce){
  .destila__fichas,.destila__ficha > *{transition:none}
}

/* El titulo de la comparativa va centrado y en la escala grande, la misma que
   la portada del laboratorio. Es la unica seccion de la pagina que funciona
   como tabla de consulta, y conviene que se anuncie de lejos. */
.comparativa__cab{text-align:center;margin-bottom:6px}
.comparativa__cab h2{font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.06;
  margin:0 0 18px}
.comparativa__cab .lead--medida{margin-inline:auto}
@media (max-width:760px){
  .comparativa__cab h2{font-size:clamp(1.875rem,7.4vw,2.5rem)}
}

/* ---- telefono: la banda mas grande y el texto pegado a ella ----------------
   La banda ocupaba el 26 % del alto y quedaban casi 200 px de papel muerto
   entre la imagen y el titular, que ademas terminaba pegado al borde de abajo.
   Ahora la escena entra al 45 % y el bloque de texto se apoya debajo, con aire
   propio al pie. */
@media (max-width:760px){
  .destila__capa--cab{display:flex;align-items:flex-end;padding:0}
  .destila__cab{position:static;inset:auto;width:auto;
    padding:0 var(--padx) 12vh}
  .destila__velo--pie{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 36%,
      rgba(254,253,252,.5) 41%,rgba(254,253,252,.95) 47%,
      rgba(254,253,252,1) 51%)}
  .destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 36%,
      rgba(254,253,252,.5) 41%,rgba(254,253,252,.95) 47%,
      rgba(254,253,252,1) 51%)}
}

/* ---- telefono, estacion 3: la ficha entera sin desplazar --------------------
   La ficha pedia 689 px y la hoja daba 455: quedaban 234 px de scroll dentro de
   una seccion que ya se mueve con el scroll, que es lo peor de los dos mundos.
   Se resuelve por los dos lados: la hoja crece porque en el macro la imagen ya
   no necesita medio alto de pantalla, y el contenido se aprieta donde no cuesta
   nada (el texto un punto mas chico, los usos en una fila que corre de lado). */
@media (max-width:760px){
  .destila__nombre{padding:13px 0}
  .destila--ficha .destila__panel{max-height:74vh}
  .destila--ficha .destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 19%,
      rgba(254,253,252,.75) 26%,rgba(254,253,252,1) 32%)}
  .destila__ficha .ficha__cab{margin:2px 0 10px}
  .destila__ficha .lead{font-size:.9375rem;line-height:1.55;margin-bottom:14px}
  .destila__ficha .usos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px}
  .destila__ficha .usos::-webkit-scrollbar{display:none}
  .destila__ficha .usos li{white-space:nowrap}
  .destila__resto{font-size:.75rem;margin-top:10px}
}

/* ---- telefono: la escena arranca arriba y la informacion se le pega ---------
   Tres cosas que estaban mal y se arreglan juntas porque son la misma:

   * Quedaba una franja de papel entre la barra y la imagen. Ahora la escena
     empieza en el borde de arriba, sin franja.
   * La informacion quedaba anclada al pie, asi que entre la imagen y la lista
     habia un hueco enorme. Ahora el bloque se cuelga DEBAJO de la imagen, no
     del pie de la pantalla.
   * El panel de la ficha era de ancho automatico, o sea que se estiraba con su
     contenido y la tabla se salia de la pantalla por la derecha: los valores
     quedaban fuera. Ahora ocupa el ancho y nada mas.

   Y se le saca el data-lenis-prevent, que era lo que impedia seguir bajando:
   con el panel ocupando media pantalla, el gesto no llegaba nunca a la pagina. */
@media (max-width:760px){
  .destila__velo--pie,.destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 26%,
      rgba(254,253,252,.55) 31%,rgba(254,253,252,.95) 37%,
      rgba(254,253,252,1) 41%)}

  .destila__capa--cab{display:block;padding:0}
  .destila__cab{position:absolute;inset:37vh 0 auto 0;width:auto;
    padding:0 var(--padx)}

  .destila__panel{position:absolute;top:37vh;bottom:auto;left:0;right:0;
    width:100%;max-height:58vh;overflow-y:auto;overscroll-behavior:auto;
    padding:0 var(--padx) 12px}

  /* En el macro la imagen no necesita tanto alto, asi que la ficha sube y se
     lleva el sitio que sobra: entra entera y no hay que desplazar nada. */
  .destila--ficha .destila__panel{top:31vh;width:100%;max-height:64vh}
  .destila--ficha .destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 17%,
      rgba(254,253,252,.7) 23%,rgba(254,253,252,1) 29%)}

  /* En telefono el alto no se anima: con el bloque colgado de arriba, crecer
     no mueve nada de lo que ya se estaba leyendo, y asi no da el salto. */
  .destila__fichas{transition:none}
}

/* ‼️ La ficha es un elemento de reja, y por defecto esos NO encogen por debajo
   del ancho de su contenido: se estiraba a 566 px dentro de una reja de 327 y
   la tabla quedaba cortada por la derecha, con los valores fuera de pantalla.
   min-width:0 la deja encoger, y ahi las filas parten en dos lineas solas. */
.destila__ficha{min-width:0}
.destila__ficha .tabla-tec,.destila__ficha .tabla-tec__cuerpo{min-width:0}
.destila__ficha .tabla-tec__fila{flex-wrap:wrap;min-width:0}
.destila__ficha .tabla-tec__fila dt{min-width:0}

/* Al partir las filas en dos lineas la ficha crecio y volvia a pedir un poco de
   desplazamiento. Se le da algo mas de alto y el texto baja un punto: entra
   entera y no hay que desplazar nada. */
@media (max-width:760px){
  .destila--ficha .destila__panel{top:30vh;max-height:66vh}
  .destila--ficha .destila__velo--lado{background:
    linear-gradient(to bottom,rgba(254,253,252,0) 15%,
      rgba(254,253,252,.7) 21%,rgba(254,253,252,1) 27%)}
  .destila__ficha .lead{font-size:.875rem;line-height:1.5;margin-bottom:12px}
  .destila__ficha .tabla-tec{padding:16px 18px 12px}
  .destila__ficha .tabla-tec__fila dd{white-space:nowrap}
}

/* ---- telefono: el corte del plano, y la ficha completa en flujo -------------
   ‼️ El velo cierra JUSTO antes del borde real del plano, que el guion publica
   en --corte cuadro a cuadro. Antes cerraba DESPUES del borde y por eso se veia
   el corte de la imagen; en la tercera estacion cerraba antes por casualidad, y
   por eso ahi se veia mas suave. Ahora las tres se comportan igual. */
@media (max-width:760px){
  .destila__velo--pie,.destila__velo--lado,
  .destila--ficha .destila__velo--lado{background:
    linear-gradient(to bottom,
      rgba(254,253,252,0) calc(var(--corte,32%) - 14%),
      rgba(254,253,252,.5) calc(var(--corte,32%) - 8%),
      rgba(254,253,252,.92) calc(var(--corte,32%) - 3%),
      rgba(254,253,252,1) var(--corte,32%))}

  .destila__cab{top:calc(var(--corte,32%) + 4vh);bottom:auto;inset-inline:0}
  .destila__panel,.destila--ficha .destila__panel{
    top:calc(var(--corte,32%) + 3vh);bottom:auto;width:100%;
    max-height:none;overflow:visible}

  /* Con la ficha abajo, la lista se queda entera en la escena y el boton de
     volver sobra: la lista nunca se fue. */
  .destila--ficha .destila__titulo{display:block}
  .destila--ficha .destila__nombres{display:grid}
  .destila--ficha .destila__ayuda{display:block}
  .destila__volver,.destila__resto{display:none}
}

/* La ficha completa, en flujo normal y solo en telefono. Aca sobra el sitio,
   asi que van los trece parametros y no los cuatro que entraban en la hoja. */
.fichas-abajo{display:none}
@media (max-width:760px){
  .fichas-abajo{display:block;background:var(--papel);
    padding:4px var(--padx) var(--pady)}
  .fichas-abajo .destila__fichas{grid-template-rows:1fr;overflow:visible;
    transition:none}
  .fichas-abajo .destila__ficha > *{opacity:1;transform:none;transition:none}
  .fichas-abajo .destila__ficha .tabla-tec__fila{display:flex}
  .fichas-abajo .destila__ficha .lead{font-size:1rem;line-height:1.6;
    margin-bottom:20px}
  .fichas-abajo .destila__ficha .usos{flex-wrap:wrap;overflow:visible}
  .fichas-abajo .destila__ficha .usos li{white-space:normal}
  .fichas-abajo .destila__ficha .tabla-tec{padding:20px 20px 14px}
  .fichas-abajo .destila__ficha .ficha__cab{margin:0 0 14px}
}

/* ---- telefono: la escena solo elige, la ficha se lee abajo ------------------
   Con la ficha en flujo, la escena se queda con una sola tarea: elegir. Asi que
   ahi no va ni el boton de volver ni la nota de "los demas parametros", que
   sobra cuando ya se ven los trece. Y la lista no se encoge a fichas: nunca se
   fue, no hay nada que compactar. */
@media (max-width:760px){
  .destila--ficha .destila__resto{display:none}
  .destila--ficha .destila__nombre{width:100%;gap:14px;padding:13px 0;
    border:0;border-bottom:1px solid rgba(5,30,42,.1);border-radius:0;
    white-space:normal;background:none}
  .destila--ficha .destila__texto{font-size:1rem}
  .destila--ficha .destila__texto em{display:inline}

  /* el boton de volver, ya dentro de la seccion de la ficha */
  .fichas-abajo .destila__volver{display:inline-flex;margin:0 0 14px}
}

/* ---- telefono, estacion 3: solo el detalle ---------------------------------
   La estacion 2 es para elegir y la 3 para leer lo elegido, asi que en la 3 la
   lista no pinta nada. Queda el macro limpio, y al seguir bajando aparece la
   ficha con "Volver y elegir otro" justo encima de su nombre, que es el unico
   camino de vuelta que hace falta. */
@media (max-width:760px){
  .destila--ficha .destila__titulo,
  .destila--ficha .destila__nombres,
  .destila--ficha .destila__ayuda{display:none}
}

/* ---- telefono: la ficha partida en dos ------------------------------------
   En la estacion 3 se queda lo que cabe y es lo que se quiere ver de entrada:
   el nombre en grande, su cuerpo de texto, y arriba el volver. Los usos y la
   tabla de trece parametros bajan a una seccion en flujo, que se lee
   scrolleando y puede medir lo que haga falta. */
@media (max-width:760px){
  .destila--ficha .destila__volver{display:inline-flex;margin:0 0 10px}
  .destila__ficha .ficha__cab{margin:0 0 10px}
  .destila__ficha .ficha__cab h2{font-size:1.75rem}
  .destila__ficha .lead{font-size:.9375rem;line-height:1.55;margin:0}

  .fichas-abajo{display:block;background:var(--papel);
    padding:0 var(--padx) var(--pady)}
  .ficha-cuerpo[hidden]{display:none}
  .ficha-cuerpo .usos{flex-wrap:wrap;overflow:visible;margin-bottom:4px}
  .ficha-cuerpo .usos li{white-space:normal}
  .ficha-cuerpo .tabla-tec{padding:20px 20px 14px;margin-top:22px;min-width:0}
  .ficha-cuerpo .tabla-tec__fila{flex-wrap:wrap;min-width:0}
  .ficha-cuerpo .tabla-tec__fila dt{min-width:0}
  .ficha-cuerpo .tabla-tec__fila dd{white-space:nowrap}
}

/* Los usos vuelven al panel de la estacion 3: son cuatro pastillas, ocupan poco
   y llenan el resto del escenario que quedaba en blanco entre el cuerpo de
   texto y la tabla. Abajo empieza directamente la ficha tecnica. */
@media (max-width:760px){
  .destila__ficha .lead{margin:0 0 14px}
  .destila__ficha .usos{flex-wrap:wrap;overflow:visible;gap:8px 9px}
  .destila__ficha .usos li{white-space:normal}
  .ficha-cuerpo .tabla-tec{margin-top:0}
  .fichas-abajo{padding-top:0}
}

/* ---- pantallas bajas: el hero no puede desbordar --------------------------
   ‼️ La caja del hero reparte con space-between dentro de 100vh y llevaba un
   relleno fijo de 150 px arriba. En una pantalla de 620 px utiles el contenido
   pedia 753 y la tira de cifras se salia 77 px por abajo: en un portatil de
   1366x768, con la barra del navegador encima, las etiquetas que van debajo de
   los numeros grandes quedaban cortadas. Medido en produccion. */
/* ‼️ Con min-width. Estas reglas se escribieron para un PORTATIL de pantalla
   baja, y sin limite de ancho se aplicaban tambien a los telefonos cortos
   (375x667, 360x740, 320x568): ahi la cifra saltaba de 20 px a 36 dentro de
   una columna de 91 y se salia hasta 64 px, montandose sobre la de al lado. */
@media (max-height:760px) and (min-width:761px){
  .reveal__caja{padding:104px 0 30px}
  .reveal .hero__mensaje{padding-top:0}
  .reveal h1,.reveal__titulo{font-size:clamp(1.875rem,4vw,3.125rem);
    line-height:1.06;margin-bottom:18px}
  .reveal .lead{font-size:1rem;line-height:1.55}
  .reveal .credenciales{padding-top:18px}
  .reveal .credenciales strong{font-size:2.25rem}
  .reveal .credenciales span{font-size:.9375rem;margin-top:6px}
  .reveal__desliza{display:none}
}
@media (max-height:640px) and (min-width:761px){
  .reveal__caja{padding:88px 0 22px}
  .reveal h1,.reveal__titulo{font-size:clamp(1.75rem,3.4vw,2.5rem)}
  .reveal .credenciales strong{font-size:1.875rem}
}

/* ‼️ Interlinea de los titulos en telefono: las lineas se estaban TOCANDO.
   Medido con la tipografia ya cargada: en Space Grotesk el alto real de un
   glifo con acento arriba y cola abajo ("Anjpli" con tildes) es 1,115 veces el
   tamano de letra. Los titulos venian con interlinea 1,04 a 1,08, asi que la
   caja de una linea invadia la de la siguiente entre 0,6 y 2,6 px. En
   escritorio casi no se nota porque los titulos entran en una o dos lineas; en
   un telefono todo se parte en dos y tres y ahi se lee como texto pegado.
   1,16 deja holgura sin perder el aire apretado del diseno. */
@media (max-width:760px){
  .reveal__estacion h1,
  .reveal__titulo,
  .labo__portada h2,
  .labo__estacion h3,
  .destila__cab h1,
  .comprar__cab h1,
  .contacto__cab h1,
  main > section h1,
  main > header h1{line-height:1.16}
  /* etiqueta de dos lineas bajo cada cifra: 11px con interlinea 13,75 */
  .reveal .credenciales span{line-height:1.45}
  /* palabra decorativa sobre la foto: iba con interlinea 0,8 y a dos lineas
     los glifos se encimaban 10,4 px */
  .alcohol__palabra{line-height:1.18}
}

/* Hallazgos de la auditoria automatica de maquetacion (revisar-web).
   Los tres salieron de medir, no de mirar. */

/* 1. A 360 px de ancho este titulo se parte en dos lineas y los glifos se
      enciman 2,6 px. No se habia visto porque solo se probaba a 390. */
@media (max-width:760px){
  .recorrido__rotulo{line-height:1.16}
  /* 2. Entre la cifra (20px) y su etiqueta (11px) habia 5 px: a ese tamano el
        numero y el rotulo se leen como un solo bloque pegado. */
  .reveal .credenciales span{margin-top:9px}
}

/* 3. El aviso de cookies vive a 24 px del borde inferior, y en un iPhone esos
      24 px caen bajo el indicador de inicio y la barra de Safari: los botones
      quedan tapados y no se pueden pulsar. El sitio no usaba la zona segura en
      ningun sitio. En un equipo sin muesca env() vale 0 y no cambia nada. */
.cookies{bottom:calc(24px + env(safe-area-inset-bottom, 0px))}

/* Mas hallazgos de la auditoria automatica. */

/* El aviso de cookies vivia a 24 px del borde inferior. En un telefono esa
   franja la ocupan la barra de Safari y el indicador de inicio, asi que los dos
   botones quedaban tapados y no habia forma de aceptar ni de rechazar. Se sube
   por encima de la barra y ademas se respeta la zona segura. */
/* Tambien por alto: con el telefono acostado el ancho es 844 y la regla no
   entraba, asi que los botones volvian a quedar bajo la barra del navegador. */
@media (hover:none),(max-width:760px),(max-height:500px){
  .cookies{bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
}

/* La correccion de interlinea en telefono se habia hecho con una lista de
   selectores enumerada, y quedaron titulos afuera: el de cierre (1.04), el del
   recorrido (1.05), el del cuadro comparativo (1.06), el h2 global (1.10) y el
   nombre del alcohol (1.00). Enumerar es fragil: cada titulo nuevo nace con el
   defecto. Aca se cubren todos los niveles de titulo del telefono, con la
   especificidad suficiente para ganarle a las reglas de escritorio.
   El minimo medido para Space Grotesk es 1,115; 1,20 deja margen de verdad.

   ‼️ El corte va por (hover:none) ADEMAS de por ancho. Con solo el ancho, al
   girar el telefono la correccion se APAGA: un iPhone 12 Pro acostado mide 844
   px y cae del lado de escritorio. Medido en ese tamano, 18 titulos quedaban
   por debajo del piso, con .alcohol__palabra en 0,80. Es el mismo corte que el
   sitio ya usa para el aviso de cookies.

   Y ademas por ALTO. (hover:none) es lo correcto pero no se puede verificar
   desde un equipo de escritorio: un marco de prueba no reporta "sin puntero"
   aunque un telefono real si. Un telefono acostado tiene poco ALTO (375 a 430
   px), y eso si se comprueba. Las tres condiciones juntas cubren el aparato
   real y ademas dejan el arreglo medible. */
@media (hover:none),(max-width:760px),(max-height:500px){
  h1,h2,h3,h4,h5,h6{line-height:1.20}
  .cierre__titulo,
  .recorrido__titulo,
  .comparativa__cab h2,
  .destila__cab h1,
  .labo__portada h2,
  .labo__estacion h3,
  .recorrido__rotulo,
  .reveal__estacion h1,
  .reveal__titulo{line-height:1.20}
  .alcohol__nombre,.alcohol__palabra{line-height:1.20}
}

/* La tira de cifras de la estacion 2, en vertical, va UNA DEBAJO DE OTRA.
   En tres columnas al lado no entra: a 360 px cada columna mide 91 y "+50 Años"
   necesita 155, asi que las cifras se montaban sobre la de al lado. Apiladas,
   cada una dispone del ancho completo.
   Cifra y rotulo van en la misma linea porque el encabezado tiene poco alto en
   un telefono corto: asi la tira mide unos 100 px en vez de 163.
   Solo en pantalla ANGOSTA (telefono de pie, 320 a 440 px). Acostado hay 844 px
   de ancho y las tres columnas entran de sobra, y ademas el alto es de 390: ahi
   una tira apilada de 120 px no cabe. Una tableta tampoco necesita apilar. */
@media (max-width:560px){
  .reveal .credenciales{flex-direction:column;align-items:flex-start;
    flex-wrap:nowrap;gap:12px;padding-top:16px}
  .reveal .credenciales li{flex:0 0 auto;width:100%;display:flex;
    align-items:baseline;gap:9px;min-width:0}
  .reveal .credenciales strong{font-size:1.5rem;white-space:nowrap;flex:0 0 auto}
  .reveal .credenciales span{font-size:.8125rem;margin-top:0;line-height:1.35;min-width:0}
}

/* Telefono ACOSTADO: 844 px de ancho pero solo 390 de alto. El encabezado
   entero no entra, y la tira de cifras se salia por abajo. Se comprime todo lo
   vertical; el cuerpo de texto se reduce en vez de quitarse, porque es el que
   explica de que va la pagina. */
@media (max-height:450px) and (min-width:561px){
  .reveal__caja{padding:60px 0 14px}
  .reveal h1,.reveal__titulo{font-size:1.5rem;margin-bottom:8px}
  .reveal .lead{font-size:.875rem;line-height:1.4}
  .reveal .credenciales{padding-top:8px;gap:18px}
  .reveal .credenciales strong{font-size:1.25rem}
  .reveal .credenciales span{font-size:.75rem;margin-top:2px;line-height:1.3}
}

/* El boton de la ficha tecnica NO va en la estacion 1 del telefono. Es lo que
   quedaba mas abajo, y en un iPhone con la barra de direcciones ABAJO caia
   debajo del buscador. Subir el bloque entero desordenaba su relacion con el
   borde de la imagen, asi que se quita el boton y el titulo y el cuerpo de
   texto recuperan su altura normal. El PDF sigue disponible: hay un segundo
   enlace mas abajo en la misma pagina. */
@media (max-width:760px){
  .destila__cab .descargar{display:none}
}