/* Anshus — landing de campaña
   Dirección tomada del isotipo: serif de alto contraste en versalitas espaciadas
   (el registro de "COMIDA CONGELADA") sobre azul petróleo, con el celeste como filete.
   Dos familias, nada más: Bodoni Moda para display, Karla para lectura. */

:root{
  --azul-900:#12354B;
  --azul:#2A5F87;
  --celeste:#4EC8E0;
  --hielo:#F2F8FB;
  --hielo-2:#E4F0F6;
  --nieve:#FFFFFF;
  --gris:#63798A;
  --linea:#D2E3EC;
  --wa:#25D366;

  --display:'Bodoni Moda',Georgia,serif;
  --body:'Karla',system-ui,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--hielo);color:var(--azul-900);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--azul-900);color:#fff;padding:10px 14px;z-index:99}
:focus-visible{outline:2px solid var(--azul);outline-offset:4px}

/* ---------- piezas tipográficas ---------- */
.kicker{
  font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--azul);
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.kicker::after{content:"";flex:1;max-width:64px;height:1px;background:var(--celeste)}

.sec-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-.01em;
}
.sec-sub{color:var(--gris);max-width:56ch;margin-top:14px;font-size:16px}
.sec-head{margin-bottom:44px;max-width:var(--maxw)}

/* ---------- botones y enlaces ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--azul-900);color:var(--nieve);
  font-family:var(--body);font-weight:600;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;border:1px solid var(--azul-900);
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:transparent;color:var(--azul-900)}
.btn-sm{padding:10px 20px;font-size:12px}
.btn-light{background:var(--nieve);color:var(--azul-900);border-color:var(--nieve)}
.btn-light:hover{background:transparent;color:var(--nieve)}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--azul);
  border-bottom:1px solid var(--celeste);padding-bottom:3px;
}
.link-arrow::after{content:"→";transition:transform .18s ease}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:28px;
  padding:12px var(--pad);
  background:rgba(242,248,251,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
/* El PNG del logo viene en lienzo 1920x1080 con fondo blanco: se recorta y se funde. */
.logo{display:flex;align-items:center;height:52px;overflow:hidden}
.logo img{height:114px;width:auto;margin:-31px 0;mix-blend-mode:multiply}
.topbar nav{margin-left:auto;display:flex;gap:30px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.topbar nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.topbar nav a:hover{border-bottom-color:var(--celeste)}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,6vw,80px);align-items:center;
  padding:clamp(56px,9vw,120px) var(--pad) clamp(48px,7vw,96px);
  max-width:var(--maxw);margin:0 auto;
}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:22px;
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6.2vw,76px);line-height:1.04;letter-spacing:-.02em;
}
.lead{font-size:clamp(16.5px,1.5vw,19px);color:#3B5568;max-width:44ch;margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:36px}

/* ---------- ELEMENTO FIRMA: ficha de congelado ---------- */
.ficha{
  background:var(--nieve);border:1px solid var(--linea);
  position:relative;
  box-shadow:0 30px 60px -46px rgba(18,53,75,.7);
  --intervalo:5.5s; /* lo que dura cada plato en pantalla; ver el riel, más abajo */
}
.ficha::before{ /* filete celeste superior: el hilo del isotipo */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--celeste);z-index:2;
}

/* La foto es una mesa fría. Las fotos del cliente vienen sobre blanco opaco, así que el
   plato se funde con multiply —el mismo recurso que usa el logo— y queda apoyado sobre el
   degradado helado, en vez de leerse como un rectángulo blanco pegado dentro de la ficha. */
.ficha-foto{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(120% 104% at 50% 32%,
    var(--nieve) 0%,var(--hielo) 54%,var(--hielo-2) 100%);
}
.ficha-foto::after{ /* escarcha: el copo del isotipo, corrido para no pisar el plato */
  content:"";position:absolute;right:-16%;bottom:-28%;width:68%;aspect-ratio:1;
  background:url("../img/copo.png") center/contain no-repeat;opacity:.07;pointer-events:none;
}
/* Dos capas superpuestas: una sale y la otra entra. --z iguala el tamaño aparente de
   platos fotografiados a distinta distancia y --ox/--oy corrigen el centro óptico;
   los valores de cada plato vienen del JSON del hero. --k lo mueve la animación. */
.ficha-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;opacity:0;
  transform:translate(var(--ox,0),var(--oy,0)) scale(calc(var(--z,1) * var(--k,1)));
}
.ficha-img.is-on{opacity:1}

/* Riel: un tramo por plato, apoyado en el borde de abajo de la foto. Hace eco del filete
   celeste de arriba y funciona de índice — el tramo activo se llena mientras corre el
   intervalo, así que la barra es además el reloj que dispara el cambio (ver ficha.js).
   Va superpuesto y no en el flujo: la ficha ya es alta y no le sobra alto de pantalla. */
.ficha-riel{
  position:absolute;left:0;right:0;bottom:4px;z-index:3;
  list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:7px;padding:0 26px;
}
/* La barra que se ve mide 2px, pero el botón es de 24 —el mínimo para tocar con el dedo
   sin errarle—, así que el alto de más es área invisible repartida arriba y abajo. */
.ficha-riel button{
  position:relative;display:block;width:100%;height:24px;
  padding:0;border:0;background:none;cursor:pointer;
}
.ficha-riel button::before,
.ficha-riel button::after{content:"";position:absolute;left:0;right:0;top:11px;height:2px}
.ficha-riel button::before{background:rgba(18,53,75,.17)}
.ficha-riel button::after{background:var(--celeste);transform:scaleX(0);transform-origin:left}
.ficha-riel button:hover::before{background:rgba(18,53,75,.42)}

/* Flechas: aparecen sobre la foto solo con el mouse encima. En touch no van: hay swipe. */
.ficha-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:grid;place-items:center;width:38px;height:38px;padding:0;cursor:pointer;
  border:1px solid var(--linea);background:rgba(255,255,255,.88);color:var(--azul-900);
  opacity:0;pointer-events:none;
}
.ficha-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.ficha-prev{left:12px}
.ficha-next{right:12px}
.ficha-foto:hover .ficha-nav,
.ficha-nav:focus-visible{opacity:1;pointer-events:auto}
.ficha-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:6px;
}
.ficha-temp{
  display:flex;align-items:flex-start;gap:4px;
  font-family:var(--display);color:var(--azul);line-height:.78;
}
.ficha-temp span{font-size:clamp(38px,4.4vw,56px);font-weight:500}
.ficha-temp em{font-style:normal;font-size:17px;padding-top:5px;color:var(--celeste)}
.ficha-body{padding:26px 32px 30px;position:relative}
.ficha-cat{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  padding-top:8px;
}
/* Dos renglones reservados siempre: los nombres de plato van de una a dos líneas y,
   sin esta altura mínima, la página entera pegaría un salto en cada cambio de ficha. */
.ficha-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,2.6vw,32px);line-height:1.14;margin:4px 0 24px;
  min-height:2.28em;
}
.ficha dl{display:grid;gap:0;border-top:1px solid var(--linea)}
.ficha dl div{display:flex;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--linea)}
.ficha dt{font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);padding-top:3px}
.ficha dd{font-size:15px;font-weight:500;text-align:right}

/* ---------- secciones ---------- */
/* Solo las secciones de primer nivel llevan el padding vertical grande.
   Los <section class="grupo"> de la carta son subsecciones y no deben heredarlo. */
main > section{padding:clamp(64px,8vw,110px) var(--pad)}
.grupo{padding:0}

/* ---------- carta ---------- */
.carta{background:var(--nieve);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);max-width:none}
.carta > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.carta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(40px,4.5vw,68px)}
.grupo-ancho{grid-column:1 / -1}

.grupo-head{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:12px;border-bottom:2px solid var(--azul-900);margin-bottom:20px;
}
.grupo-head h3{
  font-family:var(--display);font-weight:400;font-size:clamp(21px,2.2vw,27px);line-height:1;
}
.grupo-precio{
  margin-left:auto;font-family:var(--display);font-size:20px;font-weight:500;white-space:nowrap;
}
.grupo-precio em{font-style:normal;font-size:12px;font-family:var(--body);
  font-weight:600;letter-spacing:.06em;color:var(--gris)}

/* Renglones de carta: una hairline por plato, sin leaders punteados
   (el precio es por categoría, así que un leader no tendría a dónde llevar). */
.platos{list-style:none;display:grid;margin-bottom:26px}
.platos li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:15.5px;padding:9px 0;color:#2B4356;
  border-bottom:1px solid var(--hielo-2);
}
.platos li i{font-style:normal;font-size:10.5px;font-weight:700;white-space:nowrap;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.platos-dos{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,4vw,64px)}

.carta-cta{margin-top:48px;display:flex;justify-content:center}
main > section.carta{padding-bottom:clamp(48px,6vw,80px)}

/* ---------- muestras ---------- */
main > section.muestras{background:var(--nieve);padding-top:0;padding-bottom:clamp(48px,6vw,84px)}
.muestras ul{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,24px);max-width:var(--maxw);margin:0 auto;
}
.muestras li{display:grid;gap:12px}
.muestras img{aspect-ratio:4/3;object-fit:cover;width:100%}
.muestras span{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
}

/* ---------- cómo se calienta ---------- */
.calentar{max-width:none;background:var(--hielo)}
.calentar > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.tiempos{width:100%;border-collapse:collapse;text-align:left}
.tiempos tr{border-top:1px solid var(--linea)}
.tiempos tr:last-child{border-bottom:1px solid var(--linea)}
.tiempos th,.tiempos td{padding:22px 24px 22px 0;vertical-align:top}
.tiempos th{
  font-family:var(--display);font-weight:400;font-size:20px;width:26%;
}
.tiempos .t{
  width:16%;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);white-space:nowrap;padding-top:26px;
}
.tiempos td:last-child{color:var(--gris);font-size:15.5px}

/* ---------- entregas ---------- */
.entregas{
  background:var(--azul-900);color:var(--hielo);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.entregas .kicker{color:var(--celeste)}
.entregas .kicker::after{background:rgba(78,200,224,.45)}
.entregas .sec-sub{color:#9FBFD2;margin-bottom:32px}
.zonas{list-style:none;display:grid}
.zonas li{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px 24px;flex-wrap:wrap;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.16);
}
.zonas li:first-child{border-top:1px solid rgba(255,255,255,.16)}
/* Nombre de la zona arriba y las localidades debajo, en un cuerpo mucho menor:
   el ojo salta de zona en zona y solo baja al detalle si la suya no está a la vista. */
.zona-nom{display:grid;gap:3px;min-width:0}
.zonas span{font-family:var(--display);font-size:clamp(20px,2.3vw,27px);line-height:1.1}
.zonas small{
  font-size:12.5px;line-height:1.5;color:#8FB4C9;letter-spacing:.01em;
}
.zonas i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--celeste);white-space:nowrap;padding-top:7px}

/* ---------- faq ---------- */
.faq{max-width:none;background:var(--nieve);border-top:1px solid var(--linea)}
.faq > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.faq-list{border-top:1px solid var(--linea);max-width:860px;margin-left:0}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 0;
  font-family:var(--display);font-size:19px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--azul);font-family:var(--body)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:24px;color:var(--gris);max-width:62ch;font-size:15.5px}

/* ---------- cierre ---------- */
.cierre{
  background:var(--azul);color:var(--nieve);text-align:center;
  position:relative;overflow:hidden;
}
.cierre::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,92%);aspect-ratio:1;opacity:.1;pointer-events:none;
  background:url("../img/copo.png") center/contain no-repeat;
}
.cierre h2{
  font-family:var(--display);font-weight:400;position:relative;
  font-size:clamp(32px,5vw,60px);line-height:1.06;
}
.cierre p{margin:18px auto 34px;max-width:48ch;color:#D6EAF3;position:relative}
.cierre .btn{position:relative}

/* ---------- footer ---------- */
footer{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:20px var(--pad);border-top:1px solid var(--linea);
  font-size:12px;letter-spacing:.06em;color:var(--gris);
}
.foot-logo{height:94px;width:auto;margin:-28px 0;mix-blend-mode:multiply}
footer .foot-note{margin-left:auto;text-transform:uppercase;font-weight:600;letter-spacing:.12em;font-size:11px}
footer a{font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
footer a:hover{color:var(--azul)}

/* ---------- whatsapp flotante ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--wa);color:#08331A;
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;cursor:pointer;
  box-shadow:0 16px 32px -16px rgba(0,0,0,.55);
}
.wa-float svg{width:20px;height:20px;fill:currentColor}
.wa-float:hover{filter:brightness(1.05)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .carta-grid{grid-template-columns:1fr}
  .grupo-ancho{grid-row:auto}
  .hero{grid-template-columns:1fr}
  .entregas{grid-template-columns:1fr}
  .topbar nav{display:none}
}
@media (max-width:1000px){
  .muestras ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .platos-dos{grid-template-columns:1fr;column-gap:0}
  .tiempos th,.tiempos td{display:block;width:auto;padding:0}
  .tiempos tr{padding:20px 0;display:block}
  .tiempos .t{padding:6px 0 8px}
  .tiempos td:last-child{padding-bottom:4px}
  .wa-float span{display:none}
  .wa-float{padding:16px;border-radius:999px}
}
/* ===========================================================================
   MOVIMIENTO
   Regla de la casa: el movimiento acompaña, no protagoniza. Entradas cortas
   (.6-.7s), una sola dirección, y curva de salida suave — nada que rebote.
   Todo se apaga entero con prefers-reduced-motion, al final del archivo.
   =========================================================================== */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.7s;
}

/* ---------- reveal al entrar en pantalla ---------- */
/* El JS agrega .in cuando el elemento cruza el viewport. Si el JS no corre,
   el elemento queda visible igual: la opacidad 0 se aplica solo con .js-reveal
   en <html>, que también pone el JS. Sin JS, la página se ve completa. */
.js-reveal .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  will-change:opacity,transform;
}
.js-reveal .reveal.in{opacity:1;transform:none}

/* Escalonado: los hijos entran uno detrás de otro, no todos juntos. */
.js-reveal .reveal[data-delay="1"]{transition-delay:.07s}
.js-reveal .reveal[data-delay="2"]{transition-delay:.14s}
.js-reveal .reveal[data-delay="3"]{transition-delay:.21s}
.js-reveal .reveal[data-delay="4"]{transition-delay:.28s}
.js-reveal .reveal[data-delay="5"]{transition-delay:.35s}

/* La línea del kicker se dibuja sola al entrar. */
.js-reveal .reveal .kicker::after{transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out) .2s}
.js-reveal .reveal.in .kicker::after{transform:scaleX(1)}

/* ---------- topbar que reacciona al scroll ---------- */
.topbar{transition:box-shadow .35s ease,background .35s ease}
.topbar.scrolled{
  background:rgba(242,248,251,.97);
  box-shadow:0 10px 30px -24px rgba(18,53,75,.85);
}
.topbar .logo img{transition:transform .35s var(--ease-out)}
.topbar.scrolled .logo img{transform:scale(.93)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate}
/* Halo frío detrás del título: da profundidad sin competir con el texto. */
.hero::before{
  content:"";position:absolute;z-index:-1;inset:auto auto 0 -10%;
  width:min(620px,80%);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(78,200,224,.16),transparent 62%);
  animation:halo 14s ease-in-out infinite alternate;
}
@keyframes halo{
  from{transform:translate3d(0,0,0) scale(1);opacity:.75}
  to{transform:translate3d(4%,-6%,0) scale(1.14);opacity:1}
}

/* Copos: los inserta el JS. Caída lenta y opacidad baja — tiene que leerse
   como textura de fondo, no como un banner navideño. */
.copo{
  position:absolute;top:-6%;z-index:-1;pointer-events:none;
  color:var(--celeste);opacity:0;
  animation:caer linear infinite;
}
.copo svg{width:100%;height:100%;display:block;fill:currentColor}
@keyframes caer{
  0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0deg)}
  12%{opacity:.5}
  88%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--dx,14px),var(--dy,320px),0) rotate(160deg)}
}

/* La ficha flota apenas y sigue el mouse con mucha inercia. */
.ficha{
  animation:flotar 7s ease-in-out infinite;
  transition:box-shadow .4s ease;
  transform:translate3d(var(--px,0),var(--py,0),0);
}
@keyframes flotar{
  0%,100%{margin-top:0}
  50%{margin-top:-12px}
}
.ficha:hover{box-shadow:0 40px 70px -46px rgba(18,53,75,.85)}

/* ---------- ficha: el cambio de plato ---------- */
/* Nada se desliza de costado: la ficha ya flota y sigue al mouse, y un carrusel que
   además viaje en horizontal terminaría mareando. El plato que entra viene un punto
   más grande y se asienta; el que sale se achica apenas mientras se apaga. */
.ficha-img{transition:opacity .62s ease,transform 1.1s var(--ease-out)}
.ficha-img.is-enter{--k:1.07}
.ficha-img.is-out{--k:.965}
.ficha-img.sin-tr{transition:none} /* para fijar el estado de entrada sin animarlo */
.ficha:hover .ficha-img.is-on{--k:1.045}

/* El bloque de datos se apaga, se reescribe con la ficha ya oculta, y vuelve. */
.ficha-body{transition:opacity .3s ease,transform .45s var(--ease-out)}
.ficha.cambiando .ficha-body{opacity:0;transform:translateY(7px)}

/* El tramo activo se llena en un intervalo. Al terminar avisa por animationend y la
   ficha pasa al plato siguiente: una sola fuente de tiempo, imposible que se desfasen.
   Con el mouse encima o el foco adentro se pausa —y con él, el cambio automático. */
.ficha-riel .is-actual button::after{
  animation:llenarRiel var(--intervalo) linear forwards;
}
.ficha.en-pausa .ficha-riel .is-actual button::after{animation-play-state:paused}
@keyframes llenarRiel{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.ficha-nav{transition:opacity .25s ease,background .2s ease,border-color .2s ease}
.ficha-nav:hover{background:var(--nieve);border-color:var(--celeste)}
/* El filete celeste se dibuja al aparecer la ficha. */
.js-reveal .reveal .ficha::before{transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .25s}
.js-reveal .reveal.in .ficha::before{transform:scaleX(1)}

/* ---------- botones ---------- */
/* El fondo se retira hacia abajo en vez de cambiar de color de golpe. */
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--azul-900);
  transform:translateY(0);transition:transform .34s var(--ease-out);
}
.btn:hover::before{transform:translateY(101%)}
.btn-light::before{background:var(--nieve)}
.wa-float{transition:transform .28s var(--ease-out),box-shadow .28s ease,filter .2s ease}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 22px 38px -16px rgba(0,0,0,.6)}

/* ---------- carta ---------- */
/* El renglón se corre apenas y se tiñe: señal de que la lista es navegable. */
.platos li{transition:background .22s ease,padding-left .22s var(--ease-out),color .22s ease}
.platos li:hover{background:var(--hielo);padding-left:10px;color:var(--azul-900)}
/* La regla del encabezado de grupo se completa al entrar en pantalla. */
.js-reveal .reveal .grupo-head{background-image:linear-gradient(var(--azul-900),var(--azul-900));
  background-repeat:no-repeat;background-position:left bottom;background-size:0 2px;
  border-bottom-color:transparent;
  transition:background-size .9s var(--ease-out) .15s}
.js-reveal .reveal.in .grupo-head{background-size:100% 2px}

/* ---------- muestras ---------- */
.muestras li{overflow:hidden}
.muestras li img{transition:transform .8s var(--ease-out)}
.muestras li:hover img{transform:scale(1.07)}
.muestras li span{transition:color .25s ease,letter-spacing .35s var(--ease-out)}
.muestras li:hover span{color:var(--azul);letter-spacing:.22em}

/* ---------- tabla de tiempos ---------- */
.tiempos tr{transition:background .25s ease}
.tiempos tr:hover{background:rgba(255,255,255,.55)}

/* ---------- zonas ---------- */
.zonas li{transition:padding-left .3s var(--ease-out),background .3s ease}
.zonas li:hover{padding-left:12px;background:rgba(255,255,255,.05)}
.zonas span{transition:color .25s ease}
.zonas li:hover span{color:var(--celeste)}

/* ---------- faq ---------- */
/* El "+" gira 45° y queda como cruz: un solo glifo, sin cambio de contenido. */
.faq summary::after{content:"+";transition:transform .32s var(--ease-out),color .2s ease}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--azul)}
.faq details[open] p{animation:faqIn .38s var(--ease-out)}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* ---------- cierre ---------- */
/* El copo del fondo gira despacio: el único movimiento continuo de la página
   además del hero, y está a 10% de opacidad. */
.cierre::before{animation:girar 90s linear infinite}
@keyframes girar{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  /* Sin parallax ni flotación en touch: no hay mouse y consume batería. */
  .ficha{animation:none;transform:none}
  .copo{display:none}
  /* Las flechas dependen del hover: en touch sobran, quedan el swipe y el riel. */
  .ficha-nav{display:none}
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  /* Nada puede quedar invisible por una animación que no se ejecuta. */
  .js-reveal .reveal{opacity:1!important;transform:none!important}
  .js-reveal .reveal .kicker::after,
  .js-reveal .reveal .ficha::before{transform:scaleX(1)!important}
  .js-reveal .reveal .grupo-head{background-size:100% 2px!important;
    border-bottom-color:var(--azul-900)!important}
  .copo{display:none}
  /* La ficha no pasa sola de plato —el reloj es la animación del riel, y acá no hay
     animaciones—, pero el tramo del plato a la vista tiene que verse igual. */
  .ficha-riel .is-actual button::after{transform:scaleX(1)!important}
}