/* Kanji Food · «La ventanilla del callejón», pintada en tinta: tinta arriba, papel abajo. Tokens, tipografía y reglas en DESIGN.md. Las letras se sirven desde aquí (fuentes/). */
@font-face{font-family:"Cabinet Grotesk";src:url("../fuentes/cabinet-grotesk-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fuentes/general-sans.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"LXGW WenKai";src:url("../fuentes/wenkai-hanzi.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Kanji Frases";src:url("../fuentes/wenkai-frases.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}   /* LXGW WenKai con solo los dichos de la cortina y su pinyin */
:root{
  --noche-mojada:#0E1218; --pared-mojada:#182029; --filo-mojado:#273140; --papel-de-farol:#F4ECDD; --humo:#A9A49A;
  --rojo-laca:#D8262C; --rojo-farol:#D2171A; --luz-de-ventanilla:#E47726; --dorado-de-placa:#E7C688; --jade:#3F9B7A;
  --ambar-espera:#E8B04B; --gris-apagado:#8A8C95;
  --laca:linear-gradient(180deg,#E3362E 0%,#C8232A 100%);
  --display:"Cabinet Grotesk",sans-serif; --texto:"General Sans",system-ui,sans-serif; --hanzi:"LXGW WenKai","Songti SC","Noto Serif SC",serif;
  --barra-caja:0px; --radio:8px; --alto-cabecera:56px;
  /* Elevación (elementos-flotantes, nivel 1): sombras teñidas del negro de la portada y brillo del rojo laca */
  --sombra:3 3 3; --k:2.4; --luz:.1; --brillo:216 38 44;
  --elev-1:0 1px 1px rgb(var(--sombra) / calc(.06 * var(--k))),0 2px 5px rgb(var(--sombra) / calc(.07 * var(--k)));
  --elev-2:0 1px 2px rgb(var(--sombra) / calc(.05 * var(--k))),0 4px 10px rgb(var(--sombra) / calc(.07 * var(--k))),0 14px 28px -6px rgb(var(--sombra) / calc(.10 * var(--k)));
  --elev-3:0 2px 4px rgb(var(--sombra) / calc(.05 * var(--k))),0 10px 20px -4px rgb(var(--sombra) / calc(.08 * var(--k))),0 28px 56px -12px rgb(var(--sombra) / calc(.16 * var(--k)));
  --luz-borde:inset 0 1px 0 rgb(255 255 255 / var(--luz));
  --brillo-acento:0 12px 24px -10px rgb(var(--brillo) / calc(.6 * min(var(--k), 1)));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + 4px);background:linear-gradient(to bottom,#000 50%,var(--papel-de-farol) 50%)}   /* el lienzo: tinta arriba, papel abajo (se ve al rebotar) */
body{margin:0;overflow-x:clip;background:var(--papel-de-farol);color:var(--noche-mojada);font:400 16px/1.5 var(--texto);-webkit-font-smoothing:antialiased;padding-bottom:var(--barra-caja)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
h1,h2,h3,.dela,.precio{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(52px,14vw,64px);line-height:.92;letter-spacing:-.025em}
h2{font-size:30px;line-height:1.02}
h3{font-size:20px;line-height:1.2}
p{margin:0}
.precio{font-variant-numeric:tabular-nums;color:var(--dorado-de-placa)}
.contenedor{max-width:1200px;margin:0 auto;padding-left:16px;padding-right:16px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--rojo-laca);color:#fff;padding:8px 12px;border-radius:var(--radio);z-index:100}
.saltar:focus{left:16px}
.hanzi{font-family:var(--hanzi);font-weight:500;line-height:1}
.hanzi-linea{display:flex;align-items:baseline;gap:10px;color:#4A4740;font-size:14px}
.hanzi-linea .hanzi{font-size:30px;color:var(--rojo-laca)}

/* La llovizna: constante en toda la página (dos capas, una cerca y una lejos). Se apaga con saveData y se queda quieta sin movimiento. */

/* Barra y marca (va encima de la foto) */
.barra{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;padding-bottom:14px;color:var(--papel-de-farol)}   /* la barra va sobre el negro de la portada */
.barra--portada{justify-content:flex-end}   /* en la portada el logo grande se pinta abajo: la barra no lo repite */
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca svg{width:44px;height:44px;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.marca__nombre{letter-spacing:.18em;font-weight:600;font-size:14px;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.marca__nombre b{display:block;color:var(--rojo-laca);font-size:10px;letter-spacing:.3em;font-weight:700}
.sello{display:inline-grid;place-items:center;width:20px;height:40px;background:var(--laca);border-radius:3px;color:#fff;font-family:var(--hanzi);font-size:11px;writing-mode:vertical-rl;letter-spacing:.06em;box-shadow:0 0 12px rgba(216,38,44,.35)}
/* El letrero de horario, como una placa de caligrafía: marco de laca con filete dorado y un sello; rojo con 休 «descanso»
   cuando está cerrado, jade con 开 «abierto» cuando abre (el sello respira despacio mientras está abierto). */
.estado{--tono:216 38 44;position:relative;display:inline-flex;align-items:center;gap:9px;padding:4px 13px 4px 4px;border-radius:5px;font:500 13px/1 var(--texto);letter-spacing:.01em;color:var(--papel-de-farol);white-space:nowrap;background:linear-gradient(180deg,#1B2028,#0C0F14);box-shadow:inset 0 0 0 1px rgb(var(--tono) / .6),inset 0 0 0 3px #0B0E12,inset 0 0 0 4px rgb(231 198 136 / .24),0 8px 20px -10px rgb(var(--tono) / .55)}
.estado--abierto{--tono:63 155 122}
.estado__sello{width:26px;height:26px;flex:none;border-radius:3px;fill:#FFF8EC;background:linear-gradient(180deg,#E3362E,#B81E24);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -1px 0 rgb(0 0 0 / .25)}
.estado--abierto .estado__sello{background:linear-gradient(180deg,#52B48F,#2E7A5E)}
a.estado{text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
@media (hover:hover){ a.estado:hover{transform:translateY(-1px);filter:brightness(1.12)} }
a.estado:focus-visible{outline:2px solid var(--dorado-de-placa);outline-offset:3px}
.estado__kai--abierto,.estado--abierto .estado__kai--cerrado{display:none}
.estado--abierto .estado__kai--abierto{display:inline}
.estado--abierto::after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:3px;box-shadow:0 0 14px 2px rgb(63 155 122 / .7);opacity:.35;animation:respira 2.8s ease-in-out infinite;pointer-events:none}
@keyframes respira{50%{opacity:1}}

/* Botones: el principal es laca iluminada; su sombra es la luz del farol en el piso mojado */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;padding:14px 18px;border-radius:var(--radio);border:0;background:var(--laca);color:#fff;font:700 17px/1.2 var(--texto);text-decoration:none;cursor:pointer;box-shadow:0 6px 22px rgba(216,38,44,.3),inset 0 1px 0 rgba(255,255,255,.14);transition:box-shadow .15s,filter .15s}
.btn:hover,.btn:focus-visible{filter:brightness(1.07);box-shadow:0 8px 28px rgba(216,38,44,.42),inset 0 1px 0 rgba(255,255,255,.14)}
.btn:disabled{background:var(--pared-mojada);color:var(--humo);box-shadow:none;cursor:not-allowed;filter:none}
.btn .precio{font-size:17px;color:#FFE9B8}
.btn:disabled .precio{color:var(--humo)}
.btn--sec{background:rgba(14,18,24,.55);border:1.5px solid rgba(244,236,221,.42);color:var(--papel-de-farol);font-weight:500;box-shadow:none}
.btn--sec:hover,.btn--sec:focus-visible{background:rgba(244,236,221,.08);border-color:rgba(244,236,221,.75);filter:none;box-shadow:none}
.btn--tinta{background:var(--noche-mojada);color:var(--papel-de-farol);box-shadow:none}
.btn--tinta:hover,.btn--tinta:focus-visible{background:var(--pared-mojada);filter:none;box-shadow:none}
.btn--linea{background:transparent;border:1.5px solid var(--noche-mojada);color:var(--noche-mojada);font-weight:500;box-shadow:none}
.btn--linea:hover,.btn--linea:focus-visible{background:rgba(14,18,24,.06);filter:none;box-shadow:none}
:focus-visible{outline:2px solid var(--dorado-de-placa);outline-offset:2px}

/* La pantalla principal: pintura en tinta. Fondo de tinta con grano, la caja rebosante como motivo, el título chico y dos acciones */
.portada{position:relative;margin-top:-72px;padding-top:92px;padding-bottom:30vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;color:var(--papel-de-farol);background:url("../img/tinta-transicion.webp?v=20261031v") 0 100%/100% 40% no-repeat,linear-gradient(to bottom,#000 0%,#000 70%,var(--papel-de-farol) 70%)}
.tinta-viva{position:absolute;left:0;bottom:0;width:100%;height:40%;z-index:0;pointer-events:none}   /* js/tinta-viva.js: la misma textura, respirando */
.portada__cuerpo{position:relative;z-index:1;width:100%;display:grid;gap:0;justify-items:center}
.portada__caja{position:relative;width:min(58vw,300px);aspect-ratio:836/814;margin-top:6px}
.portada__caja::before{content:"";position:absolute;inset:-22% -26% -28% -26%;background:url("../img/tinta-mancha.webp?v=20261031v") center/100% 100% no-repeat;z-index:-1;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}   /* la mancha se desvanece en sus orillas: sin borde recto sobre el papel */
.portada__img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 34px rgba(0,0,0,.6))}
.portada__texto{display:contents;text-align:center}   /* en celular sus piezas se acomodan solas: logo, caja, título, botones */
.portada__titulo{position:relative;font-size:26px;line-height:1;margin:14px 0 0;letter-spacing:-.015em;text-align:center}
.subrayado{position:absolute;left:-4%;bottom:-.5em;width:108%;height:auto;overflow:visible;pointer-events:none}   /* el trazo rojo que subraya, pintado después del sello (img/subrayado-pincel.webp, de 3d/logo.py) */
.portada__acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,340px);margin-top:26px}

/* El logo pintado a pincel (img/logo-pincel.webp, de 3d/logo.py): el ensō se pinta de un trazo, luego los tres trazos rojos,
   KANJI y FOOD se escriben trazo por trazo, aparece la fecha y cae el sello, como al firmar un pergamino. Se pinta una vez. */
.portada{--ritmo:.555}   /* un solo reloj para el logo y el subrayado (3 s en total, Daniel 31 oct 2026): súbelo para que todo vaya más lento */
.portada__logo{order:-1;width:min(58vw,232px)}
.logo-pincel{display:block;width:100%;height:auto;overflow:visible}
.lp-a{stroke-dasharray:1 2;stroke-dashoffset:1.05;animation:lp-trazo calc(var(--t) * var(--ritmo) * 1s) cubic-bezier(.45,.05,.25,1) calc((var(--d) + .35) * var(--ritmo) * 1s) forwards}
.lp-enso{animation-name:lp-enso;animation-timing-function:linear}
.lp-raya{animation-timing-function:cubic-bezier(.3,0,.12,1)}
.lp-fecha{opacity:0;animation:lp-aparece calc(var(--t) * var(--ritmo) * 1s) ease-out calc((var(--d) + .35) * var(--ritmo) * 1s) forwards}
.lp-sello{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:lp-sella calc(var(--t) * var(--ritmo) * 1s) cubic-bezier(.3,.7,.4,1) calc((var(--d) + .35) * var(--ritmo) * 1s) forwards}
.lp-sello g{font-family:var(--hanzi);font-weight:500}
.portada.espera .lp-a,.portada.espera .lp-fecha,.portada.espera .lp-sello{animation-play-state:paused!important}   /* espera a que lleguen las imágenes del pincel */
@keyframes lp-trazo{to{stroke-dashoffset:0}}
@keyframes lp-enso{0%{stroke-dashoffset:1.05;animation-timing-function:cubic-bezier(.5,0,.9,.5)}14%{stroke-dashoffset:.965;animation-timing-function:cubic-bezier(.25,.45,.35,1)}100%{stroke-dashoffset:0}}   /* el pincel se apoya, carga la gota y corre */
@keyframes lp-aparece{to{opacity:.82}}
@keyframes lp-sella{0%{opacity:0;transform:scale(1.7) rotate(-9deg)}55%{opacity:1;transform:scale(.93) rotate(0)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Los dos botones de la portada flotan (elementos-flotantes, nivel 1): luz en el borde de arriba, superficie que se aclara
   arriba, brillo rojo debajo de Pedir; al pasar el cursor suben y se aclaran, al tocar se hunden. */
.portada__acciones .btn{position:relative;border:0;filter:none;background:linear-gradient(180deg,#F05A45 0%,#E3362E 25%,#D8262C 55%,#B81E24 100%) 0 100%/100% 200%;box-shadow:inset 0 1px 0 rgb(255 255 255 / .32),inset 0 -2px 0 rgb(70 0 0 / .3),var(--elev-1),0 4px 16px -4px rgb(var(--brillo) / .32),var(--brillo-acento);transition:transform .2s cubic-bezier(.2,.8,.2,1),background-position .2s}
.portada__acciones .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--elev-3),0 22px 38px -14px rgb(var(--brillo) / .75);opacity:0;transition:opacity .2s}
.portada__acciones .btn--sec{border:1px solid transparent;color:var(--papel-de-farol);font-weight:500;background:linear-gradient(180deg,#323A46 0%,#262D37 25%,#1A1F27 55%,#12161C 100%) 0 100%/100% 200% padding-box,linear-gradient(172deg,rgb(244 236 221 / .6),rgb(244 236 221 / .16) 42%,rgb(244 236 221 / .07)) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),var(--elev-1),0 10px 24px -12px rgb(0 0 0 / .9)}
.portada__acciones .btn--sec::after{box-shadow:var(--elev-2),0 18px 30px -14px rgb(244 236 221 / .16)}
.portada__acciones .btn:focus-visible{outline:2px solid var(--papel-de-farol);outline-offset:3px}
@media (hover:hover){
  .portada__acciones .btn:hover{transform:translateY(-3px);background-position:0 0}
  .portada__acciones .btn--sec:hover{background-position:0 0,0 0}
  .portada__acciones .btn:hover::after{opacity:1}
}
.portada__acciones .btn:active{transform:translateY(1px) scale(.98)}
.portada__acciones .btn:active::after{opacity:0}

/* Las secciones se turnan tinta y papel (Daniel, 31 oct 2026): cada una empieza en el tono en que terminó la anterior y
   termina en el otro, con la misma orilla nublada de la portada. La orilla guarda solo cuánto hay del tono de abajo
   (img/orilla-*.webp, de 3d/orillas.py): el tono de arriba es su fondo y el de abajo va encima con esa máscara, así nunca
   hay costura. El contenido termina antes de que la orilla se ponga gris. Sobre papel, letra de tinta; sobre tinta, letra de
   papel; las pastillas, la ventanilla y la barra de pasos siguen siendo bloques de tinta. */
:root{--orilla:clamp(220px,40vh,440px)}
.tramo{position:relative;isolation:isolate}
main>.tramo{padding-bottom:calc(var(--orilla) * .84)}
.tramo--tinta{background:#000;color:var(--papel-de-farol)}
.orilla{--de:var(--papel-de-farol);--a:#000;position:absolute;bottom:0;left:calc(50% - 50vw);width:100vw;height:var(--orilla);z-index:-1;pointer-events:none;background:var(--de)}
.tramo--tinta>.orilla{--de:#000;--a:var(--papel-de-farol)}
/* la nube baja 3 px de más: escalada, la última fila de la máscara deja ver el fondo de la orilla como una raya */
.orilla::after{content:"";position:absolute;inset:0 0 -3px;background:var(--a);-webkit-mask:url("../img/orilla-1.webp?v=20261031o1") 0 0/100% 100% no-repeat;mask:url("../img/orilla-1.webp?v=20261031o1") 0 0/100% 100% no-repeat}
.orilla--2::after{-webkit-mask-image:url("../img/orilla-2.webp?v=20261031o1");mask-image:url("../img/orilla-2.webp?v=20261031o1")}
.orilla--espejo{transform:scaleX(-1)}   /* la misma nube volteada: ninguna orilla se ve igual a la otra */
.orilla>.tinta-viva{height:100%;z-index:1}
.tramo--tinta .seccion__cabeza p,.tramo--tinta .hanzi-linea,.tramo--tinta .fila__desc{color:var(--humo)}
.tramo--tinta .fila{border-bottom-color:rgb(244 236 221 / .14)}
.papel a{color:var(--noche-mojada)}
.papel .marca__nombre{color:var(--noche-mojada);text-shadow:none}
.papel .marca svg{filter:none}

@keyframes vapor{0%{opacity:0;transform:translateY(8px)}30%{opacity:.75}100%{opacity:0;transform:translateY(-24px)}}

/* Secciones */
.seccion__cabeza{padding-top:40px;padding-bottom:16px;display:grid;gap:8px}
.seccion__cabeza p{color:#4A4740;max-width:48ch}
.armador{position:relative}

/* Pasos */
.pasos{position:sticky;top:var(--alto-cabecera);z-index:5;display:flex;gap:4px;padding:10px 0;margin:0 -16px;padding-left:16px;padding-right:16px;overflow-x:auto;background:rgba(14,18,24,.96);border-bottom:1px solid var(--filo-mojado);scrollbar-width:none}
.pasos::-webkit-scrollbar{display:none}
.paso{position:relative;display:flex;align-items:center;gap:10px;flex:none;background:none;border:0;padding:2px 12px 2px 2px;border-radius:999px;color:var(--humo);font:500 14px var(--texto);cursor:pointer}
/* cada paso lleva el tazón de su ingrediente (Daniel, 31 oct 2026): apagado mientras no eliges, a color con lo que elegiste;
   el número va como sello en la esquina del tazón */
.paso__plato{position:relative;width:40px;height:40px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
.paso__plato img{display:block;width:100%;height:100%;filter:saturate(.35) brightness(.8);transition:filter .3s}
.paso__plato--vacio::before{content:"";position:absolute;inset:18% 6% 8%;border-radius:50%;border:1.5px dashed rgb(244 236 221 / .4);background:radial-gradient(ellipse at 50% 40%,#1B2129,#0B0E12 70%)}
.pasos .paso .num{position:absolute;left:27px;bottom:0;width:19px;height:19px;font-size:11px;border-width:1px;box-shadow:0 0 0 2px #10141A}
.paso--lista .paso__plato img,.paso--actual .paso__plato img{filter:none}
.paso--actual .paso__plato{transform:scale(1.08);filter:drop-shadow(0 0 7px rgb(216 38 44 / .55))}
.pasos .paso--actual .num{box-shadow:0 0 0 2px #10141A,0 0 10px rgb(216 38 44 / .6)}
@media (hover:hover){ .paso:hover .paso__plato{transform:translateY(-2px)} .paso--actual:hover .paso__plato{transform:translateY(-2px) scale(1.08)} }
.paso__nombre{display:none}
.paso--actual{color:var(--papel-de-farol)}
.paso--actual .paso__nombre{display:inline}
.num{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--pared-mojada);color:var(--humo);font-family:var(--display);font-weight:800;font-size:15px;border:1px solid var(--filo-mojado);line-height:1}
.paso--actual .num,.paso-bloque h3 .num{background:radial-gradient(circle at 35% 30%,#F2583F,#C8232A 72%);color:#fff;border-color:transparent;box-shadow:0 0 14px rgba(216,38,44,.45)}
.paso--lista .num{background:var(--papel-de-farol);color:var(--noche-mojada);border-color:transparent;box-shadow:none}
.paso-bloque h3 .num{width:34px;height:34px;font-size:17px}
.paso-bloque{padding:24px 0;border-bottom:1px solid rgba(14,18,24,.14)}
.paso-bloque h3{display:flex;align-items:center;gap:10px}
.hanzi--paso{margin-left:auto;font-size:24px;color:var(--humo);letter-spacing:.08em}
.paso-bloque__ayuda{color:#4A4740;font-size:14px;margin:8px 0 14px}
.paso-bloque--nota{border-bottom:0}
/* Las pastillas flotan (Daniel, 31 oct 2026; skill elementos-flotantes, nivel 2): cada una es un bloque de laca negra en
   altura 1, con luz en el filo de arriba y su tazón real (sacado del menú impreso y rehecho en Artlist, img/ingredientes/)
   rompiendo el borde de arriba, como en la carta de la ventanilla. Al pasar el mouse sube a altura 3; al elegirla se queda
   arriba, se enciende el filo rojo con la luz de la ventanilla y cae el sello. Sombras teñidas del papel. */
.armador{--sombra:53 38 7;--k:1;
  --elev-1:0 1px 1px rgb(var(--sombra) / calc(.06 * var(--k))),0 2px 5px rgb(var(--sombra) / calc(.07 * var(--k)));
  --elev-2:0 1px 2px rgb(var(--sombra) / calc(.05 * var(--k))),0 4px 10px rgb(var(--sombra) / calc(.07 * var(--k))),0 14px 28px -6px rgb(var(--sombra) / calc(.10 * var(--k)));
  --elev-3:0 2px 4px rgb(var(--sombra) / calc(.05 * var(--k))),0 10px 20px -4px rgb(var(--sombra) / calc(.08 * var(--k))),0 28px 56px -12px rgb(var(--sombra) / calc(.16 * var(--k)))}
.opciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 10px;padding-top:26px}
.opciones--dos{grid-template-columns:1fr 1fr}
/* la pastilla es el tazón negro tras el vidrio: se enciende al elegirla */
.opcion{--plato:64px;position:relative;min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:calc(var(--plato) * .62) 8px 12px;border:1px solid transparent;border-radius:12px;color:var(--papel-de-farol);font:600 15px/1.15 var(--texto);text-align:center;cursor:pointer;
  background:linear-gradient(180deg,#27313D 0%,#1A212A 45%,#12171D 100%) padding-box,linear-gradient(172deg,rgb(244 236 221 / .34),rgb(244 236 221 / .1) 38%,rgb(244 236 221 / .05)) border-box;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .09),var(--elev-1);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,color .15s}
.opcion::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--elev-3);opacity:0;transition:opacity .22s}
.opcion__plato{position:absolute;left:50%;top:calc(var(--plato) * -.4);width:var(--plato);height:var(--plato);transform:translateX(-50%);filter:drop-shadow(0 5px 5px rgb(25 16 4 / .38));transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s}
.opcion__plato img{display:block;width:100%;height:100%}
.opcion__plato--vacio::before{content:"";position:absolute;inset:16% 8% 10%;border-radius:50%;border:1.5px dashed rgb(244 236 221 / .4);background:radial-gradient(ellipse at 50% 40%,#1B2129,#0B0E12 70%)}
.opcion__nombre{min-width:0}
.opcion .precio{font-size:14px;font-weight:800}
.opcion__marca{position:absolute;top:-9px;right:-7px;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(180deg,#F05A45,#C8232A);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 4px 10px -2px rgb(216 38 44 / .55);transform:scale(.4) rotate(-12deg);opacity:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .15s}
.opcion__marca svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.opcion--extra{color:var(--humo);background:linear-gradient(180deg,#1F262F,#13181E) padding-box;border:1px dashed rgb(244 236 221 / .32);box-shadow:var(--elev-1)}
.opcion--extra .precio{color:var(--humo)}
.opcion[aria-pressed="true"]{color:#FFF8EC;transform:translateY(-3px);background:linear-gradient(180deg,#33262A 0%,#1E1619 50%,#150F12 100%) padding-box,linear-gradient(172deg,#F26A4F,#D8262C 42%,#7E171B) border-box;border:1px solid transparent;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),var(--elev-2),0 12px 24px -12px rgb(var(--brillo) / .6),0 0 30px -10px rgb(228 119 38 / .55)}
.opcion[aria-pressed="true"] .opcion__plato{transform:translate(-50%,-5px) scale(1.07);filter:drop-shadow(0 10px 8px rgb(25 16 4 / .42))}
.opcion[aria-pressed="true"] .opcion__marca{opacity:1;transform:scale(1) rotate(-6deg)}
.opcion[aria-pressed="true"] .precio{color:var(--dorado-de-placa)}
@media (hover:hover){
  .opcion:hover{transform:translateY(-3px)}
  .opcion:hover::after{opacity:1}
  .opcion:hover .opcion__plato{transform:translate(-50%,-3px)}
  .opcion[aria-pressed="true"]:hover .opcion__plato{transform:translate(-50%,-6px) scale(1.07)}
}
.opcion:active{transform:translateY(1px) scale(.97)}
.opcion:active::after{opacity:0}
/* doble porción: la misma laca, a lo ancho */
.extra-toggle{position:relative;display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid transparent;border-radius:12px;cursor:pointer;color:var(--humo);font-weight:500;
  background:linear-gradient(180deg,#1F262F,#13181E) padding-box,linear-gradient(172deg,rgb(244 236 221 / .28),rgb(244 236 221 / .06) 40%) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),var(--elev-1);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.extra-toggle input{width:20px;height:20px;accent-color:var(--rojo-laca);margin:0}
.extra-toggle .precio{margin-left:auto;font-size:15px}
.extra-toggle:has(input:checked){color:#FFF8EC;background:linear-gradient(180deg,#33262A,#150F12) padding-box,linear-gradient(172deg,#F26A4F,#D8262C 42%,#7E171B) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),var(--elev-2),0 0 26px -10px rgb(228 119 38 / .5)}
@media (hover:hover){ .extra-toggle:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),var(--elev-2)} }
/* la segunda porción (Daniel, 31 oct 2026): otra de la misma o cualquiera de las demás, en la misma laca */
.doble-elige{margin-top:10px;padding:14px 12px 12px;border-radius:12px;color:var(--papel-de-farol);background:linear-gradient(180deg,#1F262F,#13181E);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),var(--elev-1)}
.doble-elige[hidden]{display:none}
.doble-elige__titulo{font-weight:600;font-size:15px;padding-left:4px}
.doble-elige__opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.doble-elige__nota{margin-top:10px;padding-left:4px;font-size:13px;color:var(--humo)}
.chip-prot{display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:6px 10px 6px 6px;border-radius:10px;border:1px solid transparent;color:var(--papel-de-farol);font:600 14px/1.15 var(--texto);text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#27313D,#12171D) padding-box,linear-gradient(172deg,rgb(244 236 221 / .3),rgb(244 236 221 / .06) 40%) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.chip-prot[hidden]{display:none}
.chip-prot__plato{position:relative;flex:none;width:40px;height:40px}
.chip-prot__plato img{display:block;width:100%;height:100%}
.chip-prot__plato--vacio::before{content:"";position:absolute;inset:14% 6% 8%;border-radius:50%;border:1.5px dashed rgb(244 236 221 / .4)}
.chip-prot__nombre{min-width:0}
.chip-prot .precio{margin-left:auto;font-size:13px;font-weight:700}
.chip-prot[aria-pressed="true"]{color:#FFF8EC;background:linear-gradient(180deg,#33262A,#150F12) padding-box,linear-gradient(172deg,#F26A4F,#D8262C 42%,#7E171B) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 0 22px -10px rgb(228 119 38 / .6)}
.chip-prot:active{transform:scale(.97)}
.campo{display:grid;gap:6px;font-size:14px;color:#4A4740;margin:0;padding:0;border:0;min-width:0}
.campo legend{padding:0;margin-bottom:6px}
input[type=text],input[type=tel],input[type=number],input[type=time],textarea{width:100%;font:inherit;font-size:16px;color:var(--papel-de-farol);background:var(--pared-mojada);border:1px solid var(--filo-mojado);border-radius:var(--radio);padding:12px 14px}
input::placeholder{color:var(--gris-apagado)}

/* La ventanilla: el momento firma (js/ventanilla.js). En celular va fija arriba, sobre la barra de pasos (ver abajo); en escritorio, fija a la derecha. */
.resumen{position:sticky;bottom:calc(var(--barra-caja) + 8px);z-index:4;color:var(--papel-de-farol);display:grid;grid-template-columns:132px 1fr;gap:8px 12px;align-items:center;margin-top:16px;padding:10px;background:var(--pared-mojada);border:1px solid var(--filo-mojado);border-radius:var(--radio);box-shadow:0 -10px 32px rgba(0,0,0,.5)}
.resumen .btn{grid-column:1/-1;min-height:48px;padding:12px 16px}
/* «Agregar a la caja» flota como el Pedir de la portada: laca con luz arriba, brillo rojo debajo; con el mouse sube */
.resumen .btn:not(:disabled):not(.btn--falta){position:relative;filter:none;background:linear-gradient(180deg,#F05A45 0%,#E3362E 25%,#D8262C 55%,#B81E24 100%) 0 100%/100% 200%;box-shadow:inset 0 1px 0 rgb(255 255 255 / .32),inset 0 -2px 0 rgb(70 0 0 / .3),0 4px 16px -4px rgb(var(--brillo) / .4),0 12px 24px -10px rgb(var(--brillo) / .55);transition:transform .2s cubic-bezier(.2,.8,.2,1),background-position .2s}
.resumen .btn:not(:disabled):not(.btn--falta)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 22px 38px -14px rgb(var(--brillo) / .75);opacity:0;transition:opacity .2s}
@media (hover:hover){ .resumen .btn:not(:disabled):not(.btn--falta):hover{transform:translateY(-3px);background-position:0 0} .resumen .btn:not(:disabled):not(.btn--falta):hover::after{opacity:1} }
.resumen .btn:not(:disabled):not(.btn--falta):active{transform:translateY(1px) scale(.98)}
.resumen__titulo{font-family:var(--display);font-size:14px;color:var(--humo)}
.resumen__cabeza{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.resumen__cancelar{margin:-6px -4px -6px 0;padding:4px 6px;border:0;background:none;color:var(--humo);font:600 12px/1 var(--texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.resumen__cancelar[hidden]{display:none}
.resumen.resumen--editando .resumen__titulo{color:var(--dorado-de-placa)}
.resumen__detalle{font-size:14px;line-height:1.35;margin-top:2px;color:#D9D1C2}
.resumen__detalle[hidden]{display:none}
/* Tu box en lista (Daniel, 31 oct 2026): un renglón por cosa con su tazón. En celular la lista ocupa el alto de la caja y
   se desliza; el renglón nuevo entra de lado y queda a la vista */
.resumen__texto{position:relative;align-self:stretch;min-width:0;min-height:132px}
.resumen__lista{position:absolute;top:22px;left:0;right:0;bottom:0;margin:0;padding:4px 0 6px;list-style:none;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(180deg,transparent,#000 6px,#000 calc(100% - 12px),transparent);transition:opacity .25s}
.resumen__lista::-webkit-scrollbar{display:none}
.resumen--empacando .resumen__lista{opacity:0}
.renglon{display:flex;align-items:center;gap:8px;min-height:26px;font-size:14px;line-height:1.15;color:#E4DCCB}
.renglon__plato{position:relative;flex:none;width:26px;height:26px}
.renglon__plato img{display:block;width:100%;height:100%}
.renglon__plato--vacio::before{content:"";position:absolute;inset:14% 6% 8%;border-radius:50%;border:1.5px dashed rgb(244 236 221 / .4)}
.renglon__nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.renglon__marca{flex:none;margin-left:auto;padding-left:6px;font-size:12px;font-weight:700;color:var(--dorado-de-placa);font-variant-numeric:tabular-nums}
.renglon__marca:empty{display:none}
.renglon--nuevo{animation:renglon-entra .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes renglon-entra{from{opacity:0;transform:translateX(-12px)}}
/* mientras falta algo, el botón dice qué y lleva a ese paso; se enciende en rojo con la caja completa */
.resumen .btn--falta{background:linear-gradient(180deg,#1F262F,#13181E);color:var(--humo);border:1px dashed rgb(244 236 221 / .3);box-shadow:none;font-weight:600;font-size:16px}
.resumen .btn--falta .precio{color:var(--humo)}
.resumen .btn--falta:hover,.resumen .btn--falta:focus-visible{filter:none;box-shadow:none;color:var(--papel-de-farol);border-color:rgb(244 236 221 / .55)}
.resumen--lista .resumen__titulo{color:var(--papel-de-farol)}
/* En el celular, la caja arriba y un paso a la vez (Daniel, 2 nov 2026): la caja grande con Tu box y el botón va fija bajo
   la cabecera, debajo la barra de pasos y abajo solo el paso donde vas, que cabe en la pantalla; al elegir entra el
   siguiente de lado (js/app.js, verPaso) y nada tapa las opciones. A los lados del título, «‹ Base» regresa al paso anterior y
   «Vegetales ›» lleva al que viene. En la compu todo sigue a la vista con la caja fija a la derecha */
.paso-sigue,.paso-atras{display:none}
/* La pregunta del extra antes de pasar al paso siguiente (Daniel, 2 nov 2026: «¿La quieres doble?», «¿Quieres otro?»,
   «¿Salsa extra?», «¿Otro topping?»): un bloque de laca con filo rojo, como la confirmación de la caja. «Sí» en rojo laca,
   «No, sigue» con filo; con el sí, al final queda «Listo, sigue» */
.pregunta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding:14px;border:1px solid transparent;border-radius:12px;color:var(--papel-de-farol);
  background:linear-gradient(180deg,#27313D,#12171D) padding-box,linear-gradient(172deg,#F26A4F,#D8262C 42%,#7E171B) border-box;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),var(--elev-2),0 0 26px -10px rgb(228 119 38 / .5);animation:confirma-entra .25s ease-out;
  scroll-margin-top:calc(var(--alto-cabecera) + 24px);scroll-margin-bottom:calc(var(--barra-caja) + 16px)}
.pregunta[hidden]{display:none}
.pregunta__texto{flex:1 1 100%;margin:0 0 2px;font-weight:600;font-size:15px;line-height:1.3}
.pregunta__si,.pregunta__no,.pregunta__sigue{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 16px;border-radius:var(--radio);font:600 15px/1.1 var(--texto);cursor:pointer;transition:transform .15s}
.pregunta__si,.pregunta__sigue{border:0;color:#fff;background:linear-gradient(180deg,#F05A45 0%,#E3362E 30%,#D8262C 60%,#B81E24 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -2px 0 rgb(70 0 0 / .3),0 6px 14px -6px rgb(var(--brillo) / .6)}
.pregunta__no{border:1px solid rgb(244 236 221 / .45);background:none;color:var(--papel-de-farol)}
.pregunta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pregunta button:active{transform:scale(.97)}
.pregunta button:focus-visible{outline:2px solid var(--dorado-de-placa);outline-offset:2px}
.pregunta--listo{padding:0;border:0;background:none;box-shadow:none}
.paso-bloque--pregunta .extra-toggle{display:none}   /* mientras se pregunta, el interruptor espera; con la respuesta regresa */
@media (max-width:899px){
  .armador{--caja:clamp(120px,calc(100dvh - 590px),190px);display:flex;flex-direction:column}
  .armador__cuerpo{display:contents}
  .resumen{order:1;position:sticky;top:var(--alto-cabecera);bottom:auto;z-index:6;margin:0 -16px;padding:10px 16px 12px;grid-template-columns:var(--caja) minmax(0,1fr);gap:10px 12px;border-width:0 0 1px;border-radius:0;background:var(--noche-mojada);box-shadow:none}
  .resumen__texto{min-height:var(--caja)}
  .resumen .btn{min-height:46px;padding:10px 14px}
  .pasos{order:2;top:calc(var(--alto-cabecera) + var(--alto-resumen,calc(var(--caja) + 80px)));background:var(--noche-mojada)}
  .armador__pasos{order:3}
  .armador__pasos[data-visto] .paso-bloque{display:none}
  .armador__pasos[data-visto="1"] #paso-1,.armador__pasos[data-visto="2"] #paso-2,.armador__pasos[data-visto="3"] #paso-3,
  .armador__pasos[data-visto="4"] #paso-4,.armador__pasos[data-visto="5"] #paso-5,.armador__pasos[data-visto="5"] .paso-bloque--nota{display:block}
  .paso-bloque{position:relative;border-bottom:0;padding:14px 0 22px}
  .paso-bloque h3{justify-content:center;min-height:40px;font-size:22px}
  .paso-bloque h3 .num{display:none}   /* el número ya va en la barra de pasos; aquí van «‹» y «›» */
  .paso-bloque h3 .hanzi--paso{margin-left:2px;font-size:21px}
  .paso-bloque__ayuda{margin:6px 0 6px;text-align:center}
  .paso-bloque--nota{padding-top:0}
  .opciones{gap:28px 10px;padding-top:24px}
  .opcion{--plato:58px;padding:calc(var(--plato) * .62) 6px 10px}
  /* «‹ Base» y «Vegetales ›» van a los lados del título: así el paso completo cabe sobre el dock */
  .paso-sigue,.paso-atras{position:absolute;top:14px;right:0;display:flex;align-items:center;gap:4px;min-height:40px;padding:8px 8px 8px 12px;border:1px solid transparent;border-radius:10px;color:var(--papel-de-farol);font:600 13px/1.2 var(--texto);cursor:pointer;
    background:linear-gradient(180deg,#27313D,#12171D) padding-box,linear-gradient(172deg,rgb(244 236 221 / .3),rgb(244 236 221 / .06) 40%) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),var(--elev-1);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  .paso-atras{right:auto;left:0;padding:8px 12px 8px 8px;color:#D9D1C2}
  .paso-sigue svg,.paso-atras svg{width:16px;height:16px;fill:none;stroke:var(--rojo-laca);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .paso-atras svg{stroke:var(--humo)}
  .paso-sigue--listo{color:#fff;background:linear-gradient(180deg,#F05A45 0%,#E3362E 30%,#D8262C 60%,#B81E24 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .32),inset 0 -2px 0 rgb(70 0 0 / .3),0 8px 18px -8px rgb(var(--brillo) / .7)}
  .paso-sigue--listo svg{stroke:#fff}
  .paso-sigue:active,.paso-atras:active{transform:scale(.97)}
  .paso-sigue:focus-visible,.paso-atras:focus-visible{outline:2px solid var(--rojo-laca);outline-offset:3px}
  .pregunta{scroll-margin-top:calc(var(--alto-cabecera) + var(--alto-resumen,calc(var(--caja) + 80px)) + 76px)}   /* debajo de la caja y de la barra */
  .pregunta--listo .pregunta__sigue{flex-basis:100%}
  @media (max-width:359px){ .paso-bloque h3 .hanzi--paso{display:none} }
  .paso-bloque--entra{animation:paso-entra .34s cubic-bezier(.2,.8,.2,1) both}
  .paso-bloque--vuelve{animation:paso-vuelve .34s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes paso-entra{from{opacity:0;transform:translateX(32px)}}
@keyframes paso-vuelve{from{opacity:0;transform:translateX(-32px)}}
.ventanilla{width:100%;height:auto;display:block;overflow:visible;border-radius:6px}
.ventanilla[hidden]{display:none}
/* La caja con fotos (js/caja-fotos.js) toma el lugar de la ventanilla cuando hay red y movimiento; si no, se queda el SVG */
.resumen__escena{position:relative;min-width:0}
.caja-fotos{display:block;width:100%;aspect-ratio:1;border-radius:6px;background:#000}   /* la caja con fotos (js/caja-fotos.js) */
.vent-tapa{transform-box:fill-box;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.vent-tapa--izq{transform-origin:0% 100%;transform:rotate(-42deg)}
.vent-tapa--der{transform-origin:100% 100%;transform:rotate(42deg)}
.ventanilla--cierra .vent-tapa{transform:rotate(0)}
.vent-asa{opacity:0;transition:opacity .3s .2s}
.ventanilla--cierra .vent-asa{opacity:1}
.vent-enso-g{transform-box:fill-box;transform-origin:50% 50%}
.ventanilla--cierra .vent-enso-g{animation:sello-pop .45s cubic-bezier(.3,1.5,.5,1) .35s 1 both}
@keyframes sello-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.vent-caja{transform-box:fill-box;transform-origin:50% 50%}
.ventanilla--sale .vent-caja{animation:caja-sale .7s cubic-bezier(.5,0,.8,.4) 1 both}
@keyframes caja-sale{0%{transform:none;opacity:1}100%{transform:translate(170px,-30px) rotate(3deg);opacity:0}}
.vent-llama{opacity:0;transition:opacity .35s}
.ventanilla--fuego .vent-llama{opacity:1}
.vent-llama-g{transform-box:fill-box;transform-origin:50% 100%;animation:vent-llama .5s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes vent-llama{from{transform:scaleY(.86) scaleX(1.05)}to{transform:scaleY(1.1) scaleX(.95)}}
.vent-vapor{fill:none;stroke:var(--papel-de-farol);stroke-width:2.5;stroke-linecap:round;opacity:0}
.ventanilla--humea .vent-vapor{animation:vapor 2.6s ease-out infinite;animation-delay:var(--d,0s)}
.vent-salsa{opacity:0;transition:opacity .5s}
.ventanilla--salsa .vent-salsa{opacity:.55}
.pieza{transform-box:fill-box;transform-origin:50% 50%}
.pieza--entra{animation:pieza-cae .55s cubic-bezier(.3,1.35,.5,1) 1 both}
@keyframes pieza-cae{0%{transform:translateY(-76px) scale(.6);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
.pieza--se-va{animation:pieza-se-va .3s ease-in 1 both}
@keyframes pieza-se-va{to{opacity:0;transform:scale(.3)}}
.ventanilla--empaca .pieza{animation:pieza-a-caja .7s cubic-bezier(.45,0,.55,1) 1 both}
@keyframes pieza-a-caja{0%{transform:none;opacity:1}55%{transform:translate(calc(var(--dx) * .55),calc(var(--dy) - 46px)) scale(.85);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.25);opacity:0}}
.ventanilla--empaca .vent-salsa{opacity:0}

/* Filas (boxes de la casa) */
.filas{list-style:none;margin:0;padding:0}
/* cada box con su foto (la caja de Kanji rebosante, img/boxes/) sobre la luz cálida de la ventanilla, y lo que lleva en
   fichas con el tazón de cada ingrediente (Daniel, 31 oct 2026) */
.fila{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"foto nombre" "foto der" "lleva lleva";align-items:center;column-gap:14px;row-gap:10px;padding:18px 0;border-bottom:1px solid rgba(14,18,24,.14)}
.fila__foto{grid-area:foto;position:relative;align-self:start;width:96px;aspect-ratio:1}
.fila__foto::before{content:"";position:absolute;inset:-8% -12% -4%;border-radius:50%;background:radial-gradient(closest-side,rgb(228 119 38 / .26),rgb(228 119 38 / .07) 60%,transparent);z-index:0}
.fila__foto img{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 10px 10px rgb(0 0 0 / .55))}
.fila__nombre{grid-area:nombre;align-self:end;min-width:0;font-family:var(--display);font-size:20px;line-height:1.1}
.fila__desc{grid-area:lleva;color:#4A4740;font-size:14px;margin:0}
/* lo que lleva: una rejilla pareja de fichas de laca, dos por fila (tres o cuatro en tableta), y la salsa a lo ancho al final */
.fila__lleva{--cols:2;grid-area:lleva;list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px}
.fila__lleva li{display:flex;align-items:center;gap:8px;min-width:0;min-height:40px;padding:4px 10px 4px 4px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:500;line-height:1.15;color:var(--papel-de-farol);
  background:linear-gradient(180deg,#2B3541 0%,#1C232C 55%,#161B22 100%) padding-box,linear-gradient(172deg,rgb(244 236 221 / .42),rgb(244 236 221 / .14) 45%,rgb(244 236 221 / .08)) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .1)}
.fila__lleva img{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .5))}
.fila__lleva li:last-child{grid-column:1/-1;color:var(--dorado-de-placa);background:linear-gradient(180deg,#3A3021 0%,#272014 55%,#1D1810 100%) padding-box,linear-gradient(172deg,rgb(231 198 136 / .75),rgb(231 198 136 / .25) 45%,rgb(231 198 136 / .14)) border-box}   /* la salsa */
.fila__der{grid-area:der;align-self:start;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.fila__der .precio{border:1px solid rgba(231,198,136,.45);border-radius:var(--radio);padding:6px 10px;font-size:16px;line-height:1}
.mas{width:44px;height:44px;border-radius:var(--radio);border:0;background:var(--laca);color:#fff;font:700 24px/1 var(--texto);cursor:pointer;box-shadow:0 4px 14px rgba(216,38,44,.3);transition:filter .15s}
.mas:hover,.mas:focus-visible{filter:brightness(1.08)}
.boxes__sub{margin-top:36px;font-size:16px;color:var(--dorado-de-placa);letter-spacing:.01em}
/* «Arma tu box», el primer renglón del Menú (Daniel, 2 nov 2026: como el menú impreso de la ventanilla, que empieza por armar
   el box): un bloque de laca con filo dorado, la caja rebosante con la luz de la ventanilla, «Desde $170», los tazones de los
   cinco pasos con su número en sello y «Armar el mío» en rojo laca */
.arma{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"foto texto" "pasos pasos" "btn btn";gap:14px;align-items:center;margin-top:10px;padding:16px;border:1px solid transparent;border-radius:14px;color:var(--papel-de-farol);
  background:linear-gradient(180deg,#27313D 0%,#1A212A 45%,#12171D 100%) padding-box,linear-gradient(172deg,rgb(231 198 136 / .6),rgb(231 198 136 / .16) 40%,rgb(231 198 136 / .08)) border-box;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 18px 40px -20px rgb(0 0 0 / .85)}
.arma__foto{grid-area:foto;position:relative;width:104px;aspect-ratio:1}
.arma__foto::before{content:"";position:absolute;inset:-10% -14% -6%;border-radius:50%;background:radial-gradient(closest-side,rgb(228 119 38 / .3),rgb(228 119 38 / .08) 60%,transparent)}
.arma__foto img{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgb(0 0 0 / .55))}
.arma__texto{grid-area:texto;min-width:0}
.arma__nombre{margin:0;font-size:24px;line-height:1.05}
.arma__precio{margin:6px 0 0;font-size:14px;color:var(--humo)}
.arma__precio .precio{margin-left:2px;font-size:18px;color:var(--dorado-de-placa);font-variant-numeric:tabular-nums}
.arma__desc{margin:6px 0 0;font-size:14px;line-height:1.35;color:#D9D1C2}
.arma__pasos{grid-area:pasos;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;text-align:center;font-size:12px;color:var(--humo)}
.arma__pasos li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.arma__plato{position:relative;width:46px;height:46px}
.arma__plato img{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 3px rgb(0 0 0 / .5))}
.arma__plato b{position:absolute;right:-5px;bottom:-2px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font:800 11px/1 var(--display);color:#fff;background:radial-gradient(circle at 35% 30%,#F2583F,#C8232A 72%);box-shadow:0 0 0 2px #151A21}
.arma__btn{grid-area:btn}
.arma__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Dónde: sobre papel, entre dos orillas de tinta */
.donde{color:var(--noche-mojada);padding:40px 0}
.donde p{color:#4A4740;margin-top:6px}
.donde h2{color:var(--noche-mojada)}
.donde__lugar{color:var(--noche-mojada)!important;font-size:26px;margin-top:12px!important}
.donde__acciones{grid-area:acciones;display:grid;gap:10px}
.donde__grid{display:grid;grid-template-areas:"cabeza" "mapa" "acciones" "horario";gap:20px}
.donde__cabeza{grid-area:cabeza}
/* el minimapa (3d/mapa.py): las calles reales de OpenStreetMap en tinta de papel sobre la noche, la luz de la ventanilla y el
   ensō de Kanji marcando el Food Park; un bloque de tinta sobre el papel, como la ventanilla del armador */
.donde__mapa{grid-area:mapa;position:relative;display:block;aspect-ratio:1.12;border-radius:14px;overflow:hidden;background:#0A0D11;box-shadow:inset 0 0 0 1px rgb(244 236 221 / .14),0 2px 4px rgb(53 38 7 / .08),0 18px 36px -14px rgb(53 38 7 / .35);-webkit-tap-highlight-color:transparent}
.donde__mapa:focus-visible{outline:2px solid var(--rojo-laca);outline-offset:3px}
.mapa__svg{display:block;width:100%;height:100%;font-family:var(--texto)}
.mapa__manzana{fill:rgb(244 236 221 / .035)}
.mapa__edificio{fill:rgb(244 236 221 / .07)}
.mapa__arroyo{fill:none;stroke:rgb(140 170 190 / .25);stroke-width:2px;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.mapa__c{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mapa__c--servicio{stroke:rgb(244 236 221 / .14);stroke-width:1.5px}
.mapa__c--menor{stroke:rgb(244 236 221 / .32);stroke-width:3px}
.mapa__c--media{stroke:rgb(244 236 221 / .5);stroke-width:5px}
.mapa__c--mayor{stroke:rgb(231 198 136 / .75);stroke-width:7px}
.mapa__nombres{font-size:22px;font-weight:600;letter-spacing:.04em;fill:rgb(244 236 221 / .78);paint-order:stroke;stroke:#0E1218;stroke-width:5px;stroke-linejoin:round}
.mapa__credito{position:absolute;right:10px;bottom:8px;font-size:11px;color:rgb(244 236 221 / .5);pointer-events:none}
.mapa__nombres text{text-anchor:middle}
.mapa__punto{transform:translate(var(--x),var(--y)) scale(1.55)}
.mapa__onda{fill:none;stroke:var(--rojo-laca);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:mapa-onda 2.4s ease-out infinite}
@keyframes mapa-onda{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.mapa__pin{fill:#14181F;stroke:var(--dorado-de-placa);stroke-width:1.4;filter:drop-shadow(0 6px 6px rgb(0 0 0 / .6))}
.mapa__placa{fill:#0A0D11;stroke:rgb(231 198 136 / .35);stroke-width:1}
.mapa__rotulo rect{fill:var(--papel-de-farol);filter:drop-shadow(0 4px 8px rgb(0 0 0 / .5))}
.mapa__rotulo text{font-size:14px;font-weight:700;fill:var(--noche-mojada)}
.mapa__rotulo .mapa__rotulo-sub{font-size:10.5px;font-weight:500;fill:#4A4740}
/* horario por día: el de hoy resalta con su sello, abierto en jade o cerrado en rojo laca */
.donde__horario{grid-area:horario}
.donde__horario h3{font-size:22px;color:var(--noche-mojada)}
.horario{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid rgba(14,18,24,.12)}
.horario li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid rgba(14,18,24,.12);font-size:16px;color:var(--noche-mojada)}
.horario__dia{flex:1}
.horario__horas{font-variant-numeric:tabular-nums;font-weight:600}
.horario li.horario--hoy{margin:4px -4px;padding:12px 16px;border:0;border-radius:10px;color:var(--papel-de-farol);background:linear-gradient(180deg,#27313D,#12171D);box-shadow:inset 0 1px 0 rgb(255 255 255 / .09),inset 0 0 0 1px rgb(var(--tono-hoy, 216 38 44) / .55),0 10px 22px -12px rgb(53 38 7 / .5)}
.horario--hoy .horario__dia{font-weight:700}
.horario__sello{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;color:#FFF8EC;background:rgb(var(--tono-hoy, 216 38 44));white-space:nowrap}
.horario--abierto{--tono-hoy:63 155 122}
.horario--cerrado:not(.horario--hoy) .horario__horas{color:var(--rojo-laca)}
.horario__nota{margin-top:10px!important;font-size:14px}
.donde .hanzi-linea{color:#4A4740}
.donde .hanzi-linea .hanzi{color:var(--rojo-laca)}

/* Historia (sobre tinta) y pie (sobre papel) */
.historia{padding-top:48px}
.historia__texto > p:not(.hanzi-linea){color:var(--humo);max-width:54ch;margin-top:12px;font-size:17px}
/* Historia (Daniel, 31 oct 2026): tres rollos colgantes (挂轴) con fotos reales del Instagram de Kanji, colgados de un cordón
   rojo y meciéndose despacio; cada uno con su fecha en un sello rojo escrita como la del logo (II · XXI · XXV), y 镬气
   «wok hei, el aliento del wok» escrito a pincel. Los caracteres son trazos SVG de LXGW WenKai (#kai-shi, #kai-huo, #kai-qi) */
.historia__grid{display:grid;gap:36px}
.hanzi-svg{width:30px;height:30px;flex:none;align-self:center;fill:var(--rojo-laca)}
.historia__huo{display:flex;align-items:center;gap:16px;margin-top:28px}
.historia__kai{display:grid;gap:2px;padding:10px 8px;border-radius:6px;background:linear-gradient(180deg,#E3362E,#B81E24);box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),0 12px 24px -10px rgb(216 38 44 / .6)}
.historia__kai svg{display:block;width:46px;height:46px;fill:#FFF4E6}
.historia__glosa{display:grid;gap:3px;max-width:22ch;font-size:14px;line-height:1.35;color:var(--humo)}
.historia__glosa b{font-family:var(--display);font-size:18px;font-weight:800;color:var(--dorado-de-placa);letter-spacing:.02em}
.rollos{position:relative;list-style:none;margin:0 -16px;padding:40px 16px 8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,68%);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rollos::-webkit-scrollbar{display:none}
.rollos::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:linear-gradient(90deg,transparent,rgb(216 38 44 / .75) 8%,rgb(216 38 44 / .75) 92%,transparent)}   /* el cordón rojo */
.rollo{position:relative;display:flex;flex-direction:column;align-items:center;scroll-snap-align:center;transform-origin:50% -28px;animation:rollo-mece 7s ease-in-out infinite alternate}
.rollo:nth-child(2){animation-delay:-2.4s}
.rollo:nth-child(3){animation-delay:-4.8s}
@keyframes rollo-mece{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
.rollo::before{content:"";position:absolute;top:-28px;left:22%;right:22%;height:28px;background:linear-gradient(to top right,transparent calc(50% - 1px),rgb(231 198 136 / .7) 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - 1px),rgb(231 198 136 / .7) 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}   /* el hilo que lo cuelga */
.rollo__vara{position:relative;z-index:1;width:calc(100% + 16px);height:12px;border-radius:6px;background:linear-gradient(180deg,#6B3E2A,#2A160F);box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 3px 6px rgb(0 0 0 / .55)}
.rollo__vara::before,.rollo__vara::after{content:"";position:absolute;top:-2px;width:10px;height:16px;border-radius:3px;background:linear-gradient(180deg,#F0D49A,#9C7434)}
.rollo__vara::before{left:-7px}
.rollo__vara::after{right:-7px}
.rollo__vara--abajo{height:14px;border-radius:7px}
.rollo__lienzo{position:relative;margin:0;width:100%;padding:16px 12px 24px;background:linear-gradient(180deg,#6E2620 0 10px,#E9DFC9 10px calc(100% - 12px),#6E2620 calc(100% - 12px));box-shadow:0 20px 34px -18px rgb(0 0 0 / .9)}
.rollo__lienzo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;box-shadow:0 0 0 1px rgb(14 18 24 / .25)}
.historia .rollo__titulo{margin-top:16px;font-family:var(--display);font-weight:800;font-size:17px;color:var(--papel-de-farol)}
.historia .rollo__texto{margin-top:4px;max-width:26ch;font-size:14px;line-height:1.4;text-align:center;color:var(--humo)}
/* Pie (31 oct 2026): el letrero del truck sobre papel. El logo en tinta, la rama de bambú pintada a pincel en la esquina
   (3d/pie.py), la tira roja de la caja con 谢谢光临 «gracias por venir» y un trazo seco antes de la última línea */
.pie{position:relative;isolation:isolate;overflow-x:clip;padding-top:40px;padding-bottom:28px;font-size:15px;color:#4A4740}
.pie__bambu{position:absolute;z-index:-1;top:-64px;right:-30px;width:min(42vw,220px);height:auto;opacity:.92;pointer-events:none}
.pie__cuerpo{display:grid;gap:36px;justify-items:center;text-align:center}
.pie__marca{display:grid;justify-items:center;gap:14px}
.pie__logo{display:block;width:min(64vw,250px);border-radius:var(--radio)}
.pie__logo svg{display:block;width:100%;height:auto}
.pie__lema{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;font:600 12px/1.2 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--noche-mojada)}
.pie__lema span{white-space:nowrap}
.pie__lema span:nth-child(2){color:var(--rojo-laca)}
.pie__datos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 16px;width:100%;max-width:520px}
.pie__col--redes{grid-column:1/-1;order:-1}
.pie__col{display:grid;justify-items:center;gap:8px;align-content:start}
.pie__titulo{margin:0 0 2px;font:800 20px/1.1 var(--display);color:var(--noche-mojada)}
.pie__col p{margin:0;line-height:1.5}
.pie__col:not(.pie__col--redes){font-size:14px}
.pie__horas{font-variant-numeric:tabular-nums}
.pie__lista{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.pie .pie__enlace{color:var(--noche-mojada);font-weight:600;text-decoration:underline;text-decoration-color:rgb(216 38 44 / .55);text-decoration-thickness:2px;text-underline-offset:4px}
.pie__redes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pie .pie__red{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--radio);background:linear-gradient(180deg,#27313D,#12171D);color:var(--papel-de-farol);font-weight:600;text-decoration:none;box-shadow:inset 0 1px 0 rgb(255 255 255 / .1)}
.pie .pie__red--sec{background:transparent;color:var(--noche-mojada);box-shadow:inset 0 0 0 1.5px rgb(14 18 24 / .55)}
.pie__ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pie__tira{display:flex;flex-direction:column;align-items:center;gap:10px}
.pie__kai{display:flex;gap:6px;padding:10px 14px;border-radius:3px;background:var(--laca);box-shadow:inset 0 0 0 1.5px rgb(255 244 230 / .5),0 6px 16px -8px rgb(216 38 44 / .7)}
.pie__kai svg{width:34px;height:34px;fill:#FFF4E6}
.pie__glosa{font-size:13px;line-height:1.35;color:#4A4740}
.pie__glosa b{display:block;font-weight:600;color:var(--rojo-laca)}
.pie__base{margin-top:32px}
.pie__trazo{display:block;width:100%;height:auto;opacity:.9}
.pie__fila{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;align-items:center;padding-top:10px;font-size:13px;text-align:center}
.pie__fila p{margin:0}
.pie__fecha{letter-spacing:.18em;color:var(--noche-mojada)}
@media (hover:hover){
  .pie .pie__enlace:hover{text-decoration-color:var(--rojo-laca)}
  .pie .pie__red:hover{filter:brightness(1.25)}
  .pie .pie__red--sec:hover{filter:none;box-shadow:inset 0 0 0 1.5px var(--noche-mojada)}
}

/* Motivos pintados a pincel (3d/motivos.py, Daniel 31 oct 2026): uno por sección, con el pincel seco del bambú del pie.
   Van detrás del texto (z-index -1 dentro de su tramo) y nunca se salen de la pantalla */
.motivo{position:absolute;z-index:-1;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}
.armador .seccion__cabeza,.boxes .seccion__cabeza{position:relative}
.motivo--arroz{top:6px;right:-6px;width:min(36vw,170px);opacity:.88;-webkit-mask-image:linear-gradient(#000 58%,transparent 96%);mask-image:linear-gradient(#000 58%,transparent 96%)}
.motivo--chiles{top:14px;right:-4px;width:min(34vw,160px);opacity:.92}
.motivo--cerros{left:calc(50% - 50vw);width:100vw;height:clamp(150px,19vw,280px);object-fit:cover;object-position:50% 100%;bottom:calc(var(--orilla) * .38);opacity:.9}
.motivo--ciruelo{top:14px;right:0;width:min(42vw,200px);opacity:.82}
@media (min-width:900px){
  .motivo--arroz{top:-4px;right:12px;width:290px}
  .motivo--chiles{top:-14px;right:8px;width:236px}
  .motivo--cerros{bottom:calc(var(--orilla) * .16)}
  .motivo--ciruelo{top:auto;right:auto;left:max(0px,calc(50% - 660px));bottom:calc(var(--orilla) * .4);width:400px;opacity:.9}
}

/* La cortina (js/cortina.js, Daniel 31 oct 2026): al ir directo a una sección la tinta baja con la orilla nublada de las
   secciones, cubre la pantalla y se pinta el ensō con un dicho chino de comida; luego sigue bajando y descubre la sección */
.cortina{position:fixed;inset:0;z-index:200;overflow:hidden;display:grid;place-items:center;color:var(--papel-de-farol);pointer-events:none;overscroll-behavior:contain}
.cortina[hidden]{display:none}
main>section[tabindex="-1"]:focus{outline:none}   /* la cortina deja el foco en la sección, sin marco alrededor */
.cortina--activa{pointer-events:auto;cursor:pointer}
.cortina__tinta{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column;transform:translateY(-100%);will-change:transform}
.cortina__tinta i{display:block;flex:none}
.cortina__negro{height:100vh;height:100lvh;margin:-2px 0;background:#000}
.cortina__orilla{height:42vh;height:42lvh;background:#000;-webkit-mask:url("../img/orilla-2.webp?v=20261031o1") 0 0/100% 100% no-repeat;mask:url("../img/orilla-2.webp?v=20261031o1") 0 0/100% 100% no-repeat}
.cortina__orilla--abajo{transform:scaleY(-1);-webkit-mask-image:url("../img/orilla-1.webp?v=20261031o1");mask-image:url("../img/orilla-1.webp?v=20261031o1")}
.cortina__centro{position:relative;display:grid;justify-items:center;gap:8px;max-width:min(92vw,560px);padding:24px;text-align:center;opacity:0}
.cortina--activa .cortina__centro{animation:cz-aparece .5s ease-out .46s both}
.cortina--sale .cortina__centro{animation:cz-se-va .2s ease-in both}
.cortina__enso{width:min(34vw,148px);height:auto;margin-bottom:6px}
.cz-a{stroke-dasharray:1 2;stroke-dashoffset:1.05}
.cortina--activa .cz-a{animation:lp-trazo calc(var(--t) * 1s) cubic-bezier(.45,.05,.25,1) calc((var(--d) + .5) * 1s) forwards}
.cortina__hanzi{margin:0;font:500 clamp(42px,12vw,68px)/1.15 "Kanji Frases",var(--hanzi);letter-spacing:.06em}
.cortina__pinyin{margin:0;font:500 18px/1.3 "Kanji Frases",var(--hanzi);letter-spacing:.04em;color:var(--dorado-de-placa)}
.cortina__glosa{margin:4px 0 0;max-width:28ch;font:500 18px/1.4 var(--texto)}
.cortina__rumbo{margin:18px 0 0;font-size:14px;color:var(--humo)}
.cortina__rumbo:not(:empty)::after{content:"…"}
@keyframes cz-aparece{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@keyframes cz-se-va{from{opacity:1}to{opacity:0}}
.cortina--quieta .cortina__centro{animation:none;opacity:1}
.cortina--quieta.cortina--sale .cortina__centro{opacity:1}
.cortina--quieta .cz-a{animation:none;stroke-dashoffset:0}

/* Barra de la caja */
.caja-barra{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(14,18,24,.96);border-top:1px solid var(--filo-mojado);padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
.caja-barra__btn{width:100%;max-width:1168px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radio);border:1px solid rgba(244,236,221,.35);background:var(--pared-mojada);color:var(--papel-de-farol);font:500 15px var(--texto);cursor:pointer}
.caja-barra__icono{width:30px;height:33px;flex:none}
.caja-barra__btn .precio{margin-left:auto;font-size:18px}
.caja-barra__ver{font-weight:700;color:var(--luz-de-ventanilla);padding-left:8px}
.caja-barra--salta .caja-barra__btn{animation:salta .4s}
/* lo que entra a tu caja vuela al ícono de la caja y el número salta (js/app.js, volarALaCaja) */
.vuelo{position:fixed;left:0;top:0;z-index:60;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;pointer-events:none;color:#fff;background:linear-gradient(180deg,#F05A45 0%,#E3362E 30%,#D8262C 60%,#B81E24 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 12px 26px -8px rgb(216 38 44 / .65)}
.vuelo__icono{width:30px;height:30px;fill:currentColor}
.vuelo--foto{background:none;box-shadow:none;border-radius:0}
.vuelo--foto img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgb(0 0 0 / .5))}
.dock__cuenta.salta,.cabecera__cuenta.salta{animation:cuenta-salta .55s cubic-bezier(.3,1.6,.5,1)}
.dock__boton.salta{animation:boton-salta .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes cuenta-salta{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes boton-salta{40%{transform:translateY(-5px) scale(1.06)}}
@keyframes salta{50%{transform:translateY(-4px)}}
body.con-caja{--barra-caja:78px}

/* La cabecera fija: al bajar, el ensō del logo vuela de la portada a su centro y lleva al inicio (js/navegacion.js).
   Vidrio líquido de tinta sobre la portada y de papel sobre el papel: excepción a «sin glassmorphism», solo aquí y en el
   dock (Daniel, 31 oct 2026). */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--alto-cabecera);pointer-events:none;--p:0}
.cabecera__fila{position:relative;z-index:1;height:100%;max-width:1200px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.cabecera__nav,.cabecera__der{display:none}
.cabecera__logo{grid-column:2}
.cabecera::before,.cabecera::after{content:"";position:absolute;inset:0;transition:opacity .35s;-webkit-backdrop-filter:blur(16px) saturate(1.6) brightness(.85);backdrop-filter:blur(16px) saturate(1.6) brightness(.85)}
.cabecera::before{opacity:var(--p);background:linear-gradient(180deg,rgb(255 255 255 / .07),transparent 70%),rgb(9 11 14 / .62);box-shadow:inset 0 -1px 0 rgb(244 236 221 / .12),0 12px 28px -18px rgb(0 0 0 / .8)}
.cabecera::after{opacity:0;background:linear-gradient(180deg,rgb(255 255 255 / .55),transparent 75%),rgb(246 240 229 / .62);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 0 -1px 0 rgb(14 18 24 / .10),0 12px 28px -18px rgb(53 38 7 / .4)}
.cabecera--papel::before{opacity:0}
.cabecera--papel::after{opacity:var(--p)}
.cabecera__logo{position:relative;display:block;width:44px;height:44px;border-radius:50%;pointer-events:none;-webkit-tap-highlight-color:transparent}
.cabecera--lista .cabecera__logo{pointer-events:auto}
.cabecera__logo:focus-visible{outline:2px solid var(--rojo-laca);outline-offset:4px}
.cabecera__vuelo{position:absolute;inset:0;transform-origin:0 0;opacity:0}
.cabecera--vuela .cabecera__vuelo{opacity:1}
.cabecera__marca{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s}
.cabecera__marca--tinta,.cabecera--papel .cabecera__marca{opacity:0}
.cabecera--papel .cabecera__marca--tinta{opacity:1}
.portada__logo{opacity:var(--texto-logo,1)}
/* En compu (mouse) la cabecera lleva las secciones a la izquierda y Mi pedido con el letrero de horario a la derecha;
   en celular y tablet las secciones viven en el dock (Daniel, 31 oct 2026) */
@media (min-width:900px) and (pointer:fine),(min-width:1367px){
  .cabecera__nav{display:flex;gap:26px;justify-self:start}
  .cabecera__der{display:flex;align-items:center;gap:20px;justify-self:end}
  .cabecera__nav a,.cabecera__pedido{position:relative;pointer-events:auto;padding:8px 0;color:var(--papel-de-farol);text-decoration:none;font:500 14px/1 var(--texto);letter-spacing:.02em;transition:color .35s}
  .cabecera__nav a::after,.cabecera__pedido::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;background:var(--rojo-laca);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .cabecera__nav a:hover::after,.cabecera__pedido:hover::after,.cabecera__nav a[aria-current="true"]::after{transform:scaleX(1)}   /* un trazo rojo bajo la sección donde vas */
  .cabecera__nav a:focus-visible,.cabecera__pedido:focus-visible{outline:2px solid var(--rojo-laca);outline-offset:4px;border-radius:2px}
  .cabecera--papel .cabecera__nav a,.cabecera--papel .cabecera__pedido{color:var(--noche-mojada)}
  .cabecera__der .estado{pointer-events:auto}
  /* tu caja con cuántos artículos llevas: la misma laca del Pedir del dock, con el número en dorado */
  .cabecera__caja{position:relative;pointer-events:auto;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;background:linear-gradient(180deg,#F05A45 0%,#E3362E 30%,#D8262C 60%,#B81E24 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -2px 0 rgb(70 0 0 / .3),0 6px 14px -4px rgb(216 38 44 / .5);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  .cabecera__caja[hidden],.cabecera__cuenta:empty{display:none}
  .cabecera__caja svg{width:24px;height:24px;fill:currentColor}
  .cabecera__caja:hover{transform:translateY(-2px)}
  .cabecera__caja:focus-visible{outline:2px solid var(--rojo-laca);outline-offset:3px}
  .cabecera__cuenta{position:absolute;top:-5px;right:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--dorado-de-placa);color:var(--noche-mojada);font:800 12px/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px rgb(12 14 18 / .85)}
  .barra--portada .estado{visibility:hidden}   /* el letrero vive en la cabecera */
}
.pasos.bajo-cabecera,.resumen.bajo-cabecera{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.portada.vuela .logo-pincel image{opacity:0}   /* el ensō ya va volando en la cabecera */

/* El dock (celular y tablet): aparece al bajar. Vidrio líquido que toma la tinta o el papel de lo que tiene detrás; íconos
   pintados a pincel (3d/iconos.py); al centro, Pedir: el botón de laca que rompe el borde de arriba (elementos-flotantes,
   nivel 2). Con algo en la caja, el centro es «Tu caja» y abre la caja; la barra de «Tu caja» se esconde solo cuando el
   dock ya está listo. */
.dock{display:none}
@media (max-width:899px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  body.dock-listo{--barra-caja:calc(100px + env(safe-area-inset-bottom))}
  body.dock-listo .caja-barra{display:none!important}
  .dock{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:25;isolation:isolate;display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;align-items:end;width:min(calc(100% - 24px),440px);height:64px;padding:0 4px 7px;border-radius:24px;color:var(--papel-de-farol);
    background:linear-gradient(180deg,rgb(255 255 255 / .09),rgb(255 255 255 / .02) 45%,rgb(0 0 0 / .12)),rgb(12 14 18 / .64);
    -webkit-backdrop-filter:blur(18px) saturate(1.7) brightness(.82);backdrop-filter:blur(18px) saturate(1.7) brightness(.82);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),inset 0 0 18px rgb(255 255 255 / .04),var(--elev-3),0 18px 40px -18px rgb(0 0 0 / .85);
    transform:translate(-50%,calc(100% + 40px));opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s .45s,color .35s,background-color .35s}
  body.con-dock .dock{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s,color .35s,background-color .35s}
  .dock::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(165deg,rgb(255 255 255 / .5),rgb(255 255 255 / .1) 30%,rgb(255 255 255 / .03) 62%,rgb(255 255 255 / .24));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}   /* el filo del vidrio, más claro arriba a la izquierda */
  .dock::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 130% at 16% -35%,rgb(255 255 255 / .16),transparent 55%),linear-gradient(0deg,rgb(228 119 38 / .10),transparent 38%)}   /* brillo de arriba y la luz cálida de la ventanilla abajo */
  .dock--papel{color:var(--noche-mojada);background:linear-gradient(180deg,rgb(255 255 255 / .6),rgb(255 255 255 / .14) 50%,rgb(255 255 255 / .04)),rgb(246 240 229 / .58);-webkit-backdrop-filter:blur(18px) saturate(1.9);backdrop-filter:blur(18px) saturate(1.9);box-shadow:inset 0 1px 0 rgb(255 255 255 / .85),inset 0 -1px 0 rgb(53 38 7 / .06),0 2px 4px rgb(53 38 7 / .05),0 10px 20px -4px rgb(53 38 7 / .09),0 28px 56px -12px rgb(53 38 7 / .2)}
  .dock--papel::after{background:radial-gradient(90% 130% at 16% -35%,rgb(255 255 255 / .5),transparent 55%),linear-gradient(0deg,rgb(228 119 38 / .06),transparent 38%)}
}
/* En iPhone, Safari (iOS 26 en adelante) deja su barra flotando sobre la página y un fijo no baja de ahí, ni con bottom:0 ni con
   viewport-fit=cover: el dock se quedaba arriba de la barra con la página asomada debajo (Daniel, 3 nov 2026). Esta franja toca
   el borde de lo visible y Safari pinta de su color lo que sigue hasta abajo: el dock queda apoyado en el pie */
.dock-suelo{display:none}
@supports (-webkit-touch-callout:none){
  @media (max-width:899px){
    body.con-dock .dock-suelo{display:block;position:fixed;left:0;right:0;bottom:0;z-index:24;height:12px;background:#000}
    body.con-dock .dock--papel+.dock-suelo{background:var(--papel-de-farol)}
  }
}
.dock__item,.dock__pedir{position:relative;display:grid;justify-items:center;gap:2px;min-height:52px;padding-top:6px;color:inherit;text-decoration:none;font:500 10.5px/1.1 var(--texto);letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.dock__item{opacity:.8;transition:opacity .2s,transform .15s}
.dock__icono{width:26px;height:26px;fill:currentColor;overflow:visible}
.dock__item[aria-current="true"]{opacity:1;font-weight:600}
.dock__item[aria-current="true"]::after{content:"";position:absolute;bottom:-5px;width:14px;height:3px;border-radius:2px;background:var(--rojo-laca)}   /* un trazo rojo marca dónde vas */
.dock__item:active{transform:scale(.93)}
.dock__pedir{gap:3px;padding-top:0;font-weight:600}
.dock__boton{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-top:-26px;border-radius:50%;color:#fff;background:linear-gradient(180deg,#F05A45 0%,#E3362E 30%,#D8262C 60%,#B81E24 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -2px 0 rgb(70 0 0 / .3),0 0 0 4px rgb(12 14 18 / .5),var(--elev-3),0 12px 24px -8px rgb(var(--brillo) / .7);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.dock--papel .dock__boton{box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -2px 0 rgb(70 0 0 / .3),0 0 0 4px rgb(255 255 255 / .55),0 10px 20px -6px rgb(var(--brillo) / .45)}
.dock__boton .dock__icono{width:30px;height:30px}
.dock__pedir:active .dock__boton{transform:translateY(1px) scale(.96)}
.dock__cuenta{position:absolute;top:-5px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--dorado-de-placa);color:var(--noche-mojada);font:800 13px/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px rgb(12 14 18 / .85)}
.dock__item:focus-visible,.dock__pedir:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:12px}

/* Diálogo de la caja: la hoja del pedido es la ventanilla */
.caja{width:100%;max-width:none;margin:auto 0 0;border:1px solid var(--filo-mojado);border-bottom:0;border-radius:14px 14px 0 0;background:var(--noche-mojada);color:var(--papel-de-farol);padding:18px 16px calc(28px + env(safe-area-inset-bottom));max-height:92dvh;overflow:auto}
.caja::backdrop{background:rgba(5,7,10,.7)}
.caja__cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px}
.caja__cerrar{width:40px;height:40px;border-radius:var(--radio);border:1px solid var(--filo-mojado);background:none;color:var(--papel-de-farol);font-size:24px;line-height:1;cursor:pointer}
.caja__lista{list-style:none;margin:12px 0 0;padding:0}
/* cada artículo con su foto (o el tazón de la proteína y los tazones de lo que lleva, si lo armaste); Editar y Quitar */
.caja__item{display:grid;grid-template-columns:60px minmax(0,1fr) auto;grid-template-areas:"foto info precio" "acciones acciones acciones";gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--filo-mojado)}
.caja__foto{grid-area:foto;position:relative;width:60px;height:60px;align-self:start}
.caja__foto img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgb(0 0 0 / .5))}
.caja__info{grid-area:info;min-width:0}
.caja__nombre{font-family:var(--display);font-size:17px}
.caja__tazones{display:flex;flex-wrap:wrap;margin:6px 0 4px}
.caja__tazones img{width:24px;height:24px;margin-right:-2px}
.caja__detalle{color:var(--humo);font-size:13px;line-height:1.4}
.caja__item .precio{grid-area:precio;font-size:16px}
.caja__item--nuevo{animation:caja-cambio 1.8s ease-out}
/* Agotados (Daniel, 31 oct 2026): lo que se acabó hoy se ve apagado y tachado, con un sello de laca, y no se puede elegir */
.opcion.agotada,.chip-prot.agotada{cursor:not-allowed;color:var(--humo);transform:none;box-shadow:none}
.opcion.agotada .opcion__plato,.chip-prot.agotada .chip-prot__plato{filter:grayscale(1) brightness(.75);opacity:.45}
.opcion.agotada .opcion__nombre,.chip-prot.agotada .chip-prot__nombre{text-decoration:line-through;text-decoration-color:var(--rojo-laca);text-decoration-thickness:2px}
.opcion.agotada .precio,.chip-prot.agotada .precio{visibility:hidden}
.agotada__marca{position:absolute;top:-8px;right:-6px;padding:3px 7px;border-radius:5px;background:linear-gradient(180deg,#E3362E,#C8232A);color:#fff;font:800 11px/1 var(--texto);letter-spacing:.03em;text-transform:uppercase;transform:rotate(-6deg);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .85),0 4px 10px -3px rgb(216 38 44 / .6);pointer-events:none}
.chip-prot{position:relative}
.opcion.agotada:active,.chip-prot.agotada:active{transform:none}
.fila__agotada{display:none;color:var(--rojo-laca);font:800 13px/1 var(--texto);letter-spacing:.03em;text-transform:uppercase}
.fila--agotada .fila__agotada{display:inline}
.fila--agotada .fila__foto img,.fila--agotada .fila__lleva img{filter:grayscale(1) brightness(.8);opacity:.5}
.fila--agotada .fila__nombre{text-decoration:line-through;text-decoration-color:var(--rojo-laca);text-decoration-thickness:2px;opacity:.7}
.fila--agotada .fila__der .precio{display:none}
.mas:disabled{background:#5B5650;box-shadow:none;cursor:not-allowed;opacity:.55}
.caja__item--agotado .caja__foto img{filter:grayscale(1);opacity:.5}
.caja__item--agotado .caja__nombre{text-decoration:line-through;text-decoration-color:var(--rojo-laca);text-decoration-thickness:2px}
.caja__agotado{margin:4px 0 0;color:#FF8A7E;font-size:13px;font-weight:700}
@keyframes caja-cambio{0%,30%{background:rgb(228 119 38 / .16);box-shadow:inset 3px 0 0 var(--rojo-laca)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
.cantidad{grid-area:acciones;display:flex;align-items:center;gap:10px;margin-top:4px}
.cantidad .caja__editar{width:auto;margin-left:auto;padding:0 14px;border-color:rgb(244 236 221 / .55);font-size:14px;font-weight:600}
.cantidad .caja__editar+.quitar{margin-left:0}
.cantidad button{width:34px;height:34px;border-radius:var(--radio);border:1px solid rgba(244,236,221,.4);background:none;color:var(--papel-de-farol);font-size:18px;line-height:1;cursor:pointer}
.cantidad__n{min-width:20px;text-align:center;font-weight:700}
.cantidad .quitar{margin-left:auto;border-color:var(--filo-mojado);color:var(--humo);font-size:13px;width:auto;padding:0 10px}
.caja__vacia{color:var(--humo);padding:16px 0}
/* antes de quitar o vaciar se pregunta ahí mismo (Daniel, 31 oct 2026): «Sí» en laca, «No» con filo, el foco en «No» */
.caja__confirma{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:4px;padding:10px 12px;border-radius:10px;background:rgb(216 38 44 / .1);box-shadow:inset 0 0 0 1px rgb(216 38 44 / .5);animation:confirma-entra .2s ease-out}
.caja__item .caja__confirma{grid-area:acciones}
.caja__pregunta{flex:1 1 100%;margin:0;font-size:14px;font-weight:600;color:var(--papel-de-farol)}
.caja__si,.caja__no{min-height:40px;padding:0 18px;border-radius:var(--radio);font:600 14px/1 var(--texto);cursor:pointer}
.caja__si{border:0;color:#fff;background:linear-gradient(180deg,#E3362E,#C8232A);box-shadow:inset 0 1px 0 rgb(255 255 255 / .25)}
.caja__no{border:1px solid rgb(244 236 221 / .5);background:none;color:var(--papel-de-farol)}
.caja__si:focus-visible,.caja__no:focus-visible{outline:2px solid var(--dorado-de-placa);outline-offset:2px}
@keyframes confirma-entra{from{opacity:0;transform:translateY(-3px)}}
.caja__vaciar{display:flex;flex-direction:column;align-items:flex-end;padding:10px 0 2px}
.caja__vaciar .caja__confirma{align-self:stretch;margin-top:0}
.caja__vaciar-btn{padding:6px 0;border:0;background:none;color:var(--humo);font:500 14px/1 var(--texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.caja__total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;font-weight:700;border-bottom:1px solid var(--filo-mojado)}
.caja__total .precio{font-size:24px}
.pedido{display:grid;gap:16px;margin-top:16px}
.segmento{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.segmento label{position:relative;display:block}
.segmento input{position:absolute;opacity:0;inset:0;margin:0}
.segmento span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 12px;border:1px solid rgba(244,236,221,.3);border-radius:var(--radio);background:var(--pared-mojada);color:var(--papel-de-farol);font-size:15px;font-weight:500;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.segmento input:checked+span{border-color:var(--rojo-laca);box-shadow:0 0 0 1px var(--rojo-laca),0 0 16px rgba(228,119,38,.2)}
.segmento input:focus-visible+span{outline:2px solid var(--dorado-de-placa);outline-offset:2px}
#pedido-hora{margin-top:8px;max-width:200px}
.caja__regla{font-size:14px;color:var(--humo);border-left:3px solid var(--rojo-laca);padding-left:12px}
.pedido-listo{margin-top:16px;display:grid;gap:12px;justify-items:start}
/* enviado: el sello rojo con el número de la caja cae (Daniel, 31 oct 2026) */
.pedido-listo__sello{display:flex;align-items:center;gap:12px;margin:6px 0 4px;color:var(--humo)!important;font:600 14px/1 var(--texto)}
.pedido-listo__sello b{padding:9px 13px 8px;border-radius:3px;color:#FFF4E6;font:800 28px/1 var(--display);letter-spacing:.03em;transform:rotate(-4deg);background:linear-gradient(180deg,#E3362E,#B81E24);box-shadow:inset 0 0 0 1.5px rgb(255 244 230 / .45),0 8px 18px -8px rgb(216 38 44 / .8);animation:listo-sello .7s cubic-bezier(.3,1.35,.5,1) both}
.pedido-listo h3{font:800 24px/1.1 var(--display)}
.pedido-listo .btn{width:100%}
@keyframes listo-sello{0%{opacity:0;transform:translateY(-60px) rotate(-22deg) scale(1.5)}60%{opacity:1;transform:rotate(-4deg) scale(.9)}100%{transform:rotate(-4deg) scale(1)}}
.caja__nota-pago{margin-top:8px;font-size:14px;color:var(--humo)}
.segmento input:disabled+span{opacity:.4;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.pedido-listo p{color:var(--humo)}
.pedido-listo textarea{resize:vertical;font-size:14px;line-height:1.45}
.pedido-listo__acciones{display:grid;gap:8px}

/* Escritorio */
@media (min-width:600px) and (max-width:899px){ .rollos{grid-auto-columns:40%} .fila{grid-template-columns:120px minmax(0,1fr)} .fila__foto{width:120px} .fila__lleva{--cols:3} .fila__lleva[data-n="4"]{--cols:4} }
@media (min-width:900px){
  h1{font-size:clamp(84px,7.8vw,112px);line-height:.9}
  h2{font-size:40px}
  :root{--alto-cabecera:64px}
  .barra{padding-top:20px;padding-bottom:20px}
  .marca svg{width:52px;height:52px}
  .marca__nombre{font-size:16px}
  .estado{font-size:14px}
  .hanzi-linea .hanzi{font-size:36px}
  .portada{margin-top:-92px;padding-top:120px;padding-bottom:16vh;min-height:clamp(640px,100vh,960px)}
  .portada__cuerpo{grid-template-columns:5fr 7fr;align-items:center;gap:40px;justify-items:start}
  .portada{align-items:flex-start;padding-top:108px}
  .portada__texto{display:grid;order:-1;justify-items:start;align-self:start;text-align:left;gap:0}
  /* el logo tan grande como deje la pantalla: los botones terminan antes de que el negro se vuelva papel (70 % del alto) */
  .portada__logo{--w:clamp(260px,min(31vw,79vh - 280px),450px);width:var(--w);margin-left:calc(var(--w) * -.0635)}   /* la K queda al hilo del título */
  .portada__titulo{font-size:34px;margin-top:26px;text-align:left}
  .portada__acciones{grid-template-columns:auto auto;width:auto;margin-top:34px}
  .portada__acciones .btn{width:auto;min-width:168px;padding:16px 30px}
  .portada__caja{width:min(40vw,560px);justify-self:end;margin-top:0}
  .seccion__cabeza{padding-top:56px;padding-bottom:20px}
  .pasos{padding:12px 16px}
  .paso__nombre{display:inline}
  .armador__cuerpo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
  .opciones{gap:40px 14px;padding-top:32px}
  .opcion{--plato:84px;font-size:16px;padding-bottom:14px}
  .resumen{position:sticky;top:calc(var(--alto-cabecera) + 16px);bottom:auto;grid-template-columns:1fr;padding:18px;margin-top:24px;box-shadow:none;gap:12px}
  .resumen__titulo{font-size:16px}
  .resumen__detalle{font-size:16px}
  .resumen__texto{min-height:0}
  .resumen__lista{position:relative;top:auto;max-height:min(34vh,300px);margin-top:6px}
  .renglon{font-size:15px;min-height:32px;gap:10px}
  .renglon__plato{width:32px;height:32px}
  .doble-elige__opciones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .resumen .btn{min-height:56px}
  .caja-fotos{max-width:380px;margin:0 auto}
  .filas{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
  .fila{grid-template-columns:128px minmax(0,1fr) auto;grid-template-areas:"foto nombre der" "foto lleva lleva";column-gap:18px;row-gap:12px;align-items:start}
  .arma{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"foto texto btn" "foto pasos btn";gap:14px 28px;padding:20px 24px}
  .arma__foto{width:150px}
  .arma__nombre{font-size:30px}
  .arma__pasos{max-width:440px;font-size:13px}
  .arma__btn{width:auto;padding-left:28px;padding-right:22px}
  .pregunta{max-width:640px}
  .fila__foto{width:128px;align-self:start}
  .fila__nombre{align-self:center}
  .fila__der{align-self:center}
  .fila__desc{align-self:start}
  .fila__nombre{font-size:24px}
  .donde{padding:72px 0}
  .donde__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"mapa cabeza" "mapa acciones" "mapa horario";grid-template-rows:auto auto 1fr;column-gap:56px;row-gap:22px;align-items:start}
  .donde__mapa{aspect-ratio:auto;align-self:stretch;width:100%;height:100%;min-height:460px}
  .mapa__nombres{font-size:14px;stroke-width:4px}
  .mapa__punto{transform:translate(var(--x),var(--y)) scale(1.15)}
  .donde__acciones{grid-template-columns:auto auto;justify-content:start}
  .donde__acciones .btn{width:auto;padding:14px 22px}
  .historia{padding-top:80px}
  .historia__texto > p:not(.hanzi-linea){font-size:19px}
  .historia__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px;align-items:start}
  .rollos{margin:0;padding:40px 0 8px;overflow:visible;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .rollo:nth-child(2){margin-top:54px}
  .rollo:nth-child(3){margin-top:22px}
  .pie{padding-top:72px;padding-bottom:40px}
  .pie__bambu{top:-120px;right:-12px;width:300px}
  .pie__cuerpo{grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto;align-items:start;justify-items:stretch;text-align:left;gap:40px}
  .pie__marca{justify-items:start}
  .pie__logo{width:270px;margin-left:-22px}
  .pie__lema{flex-direction:row;gap:0;font-size:11px;letter-spacing:.1em}
  .pie__lema span{padding:2px 10px}
  .pie__lema span:first-child{padding-left:0}
  .pie__lema span+span{border-left:2px solid var(--rojo-laca)}
  .pie__datos{grid-template-columns:repeat(3,auto);justify-content:space-between;max-width:none;padding-top:28px}
  .pie__col--redes{grid-column:auto;order:0}
  .pie__col:not(.pie__col--redes){font-size:15px}
  .pie__fila{justify-content:space-between;text-align:left}
  .pie__col{justify-items:start}
  .pie__redes{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .pie__tira{width:96px;padding-top:4px;text-align:center}
  .pie__kai{flex-direction:column;padding:14px 10px}
  .pie__base{margin-top:56px}
  .caja{max-width:560px;margin:auto;border-radius:14px;border-bottom:1px solid var(--filo-mojado);padding:24px 24px 28px}
  .pedido-listo__acciones{grid-template-columns:1fr 1fr}
}

/* Sin movimiento: el vapor se queda quieto y la ventanilla muestra el cuadro final de cada paso */
@media (prefers-reduced-motion:reduce){
  .en-curso::before,.dock__item.con-pedido::after,.cabecera__pedido.con-pedido::before{animation:none}
  .pedido-listo__sello b{animation:none}
  .caja__confirma{animation:none}
  .dock__cuenta.salta,.cabecera__cuenta.salta,.dock__boton.salta,.caja__item--nuevo{animation:none}
  .renglon--nuevo,.paso-bloque--entra,.paso-bloque--vuelve,.pregunta{animation:none}
  .chip-prot,.paso-sigue,.paso-atras,.pregunta button{transition:none}
  .opcion,.opcion__plato,.opcion__marca,.extra-toggle,.paso__plato{transition:none!important}
  .mapa__onda{animation:none;opacity:0}
  .rollo{animation:none}
  a.estado:hover{transform:none}
  .paso:hover .paso__plato{transform:none!important}
  .resumen .btn:hover,.resumen .btn:active{transform:none!important}
  .opcion:hover,.opcion:active,.opcion[aria-pressed="true"],.extra-toggle:hover{transform:none!important}
  html{scroll-behavior:auto}
  .vent-vapor,.vent-llama-g,.vent-enso-g,.vent-caja,.pieza,.caja-barra--salta .caja-barra__btn{animation:none!important}
  .ventanilla--humea .vent-vapor{opacity:.5}
  .ventanilla--empaca .pieza{opacity:0}
  .vent-tapa,.vent-asa,.vent-salsa,.vent-llama,.btn,.opcion,.mas{transition:none}
  .lp-a,.lp-fecha,.lp-sello{animation:none!important}
  .lp-a{stroke-dashoffset:0}
  .lp-fecha{opacity:.82}
  .lp-sello{opacity:1;transform:none}
  .portada__acciones .btn:hover,.portada__acciones .btn:active{transform:none}
  .dock,body.con-dock .dock,.dock__item,.dock__boton,.cabecera::before,.cabecera::after,.cabecera__marca{transition:none!important}
  .dock__item:active,.dock__pedir:active .dock__boton{transform:none}
  .estado--abierto::after{animation:none;opacity:.7}
}

/* ===== Mi pedido (/pedido/) ===== */
.pagina-pedido{padding-bottom:40px}
.pagina-pedido .barra{z-index:1}
.seguir{max-width:560px;padding-top:12px}
.seguir__cargando{padding:60px 0;color:var(--humo);text-align:center}
.seguir__folio{color:var(--humo);font-size:14px;display:flex;align-items:baseline;gap:8px}
.seguir__folio .dela{font-size:26px;color:var(--dorado-de-placa)}
.seguir .escena{margin:8px auto 12px}
.seguir__titulo{font-size:32px;line-height:1.05;margin-top:4px}
.seguir__texto{color:var(--humo);font-size:17px;margin-top:10px;max-width:46ch}
.seguir__aviso{margin-top:12px;padding:12px 14px;border:1.5px solid var(--ambar-espera);border-radius:var(--radio);color:var(--papel-de-farol);font-size:15px}
.seguir__error{color:var(--ambar-espera);font-size:14px;margin-top:8px}
.seguir__pasos{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;counter-reset:paso}
.seguir__pasos li{position:relative;padding-top:18px;font-size:12px;color:var(--gris-apagado);text-align:center;line-height:1.2}
.seguir__pasos li::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--pared-mojada);border:2px solid var(--filo-mojado)}
.seguir__pasos li::after{content:"";position:absolute;top:5px;left:calc(50% + 8px);right:calc(-50% + 8px);height:2px;background:var(--filo-mojado)}
.seguir__pasos li:last-child::after{display:none}
.seguir__pasos li.hecho{color:var(--papel-de-farol)}
.seguir__pasos li.hecho::before{background:var(--papel-de-farol);border-color:var(--papel-de-farol)}
.seguir__pasos li.hecho::after{background:var(--papel-de-farol)}
.seguir__pasos li.actual{color:var(--papel-de-farol)}
.seguir__pasos li.actual::before{background:var(--rojo-laca);border-color:var(--rojo-laca);box-shadow:0 0 0 3px rgba(216,38,44,.22),0 0 10px rgba(216,38,44,.5)}
.seguir__pasos li.final{color:var(--gris-apagado)}
.seguir__pasos li.final::before{background:var(--gris-apagado);border-color:var(--gris-apagado)}
.seguir__pasos time{display:block;font-size:11px;color:var(--humo);font-variant-numeric:tabular-nums}
.seguir__pago,.seguir__comprobante,.seguir__detalle,.seguir__contacto{margin-top:28px;padding-top:20px;border-top:1px solid var(--filo-mojado)}
.seguir h2{font-size:22px}
.seguir__datos{margin-top:12px;background:var(--papel-de-farol);color:var(--noche-mojada);border-radius:var(--radio);padding:14px 16px}
.seguir__datos p{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(14,18,24,.1);font-size:15px}
.seguir__datos p:last-of-type{border-bottom:0}
.seguir__datos span{color:#4A4740;min-width:92px;font-size:13px}
.seguir__datos b{font-weight:700;word-break:break-all}
.seguir__datos .precio{font-size:18px;color:var(--noche-mojada)}
.seguir__datos .seguir__nota{color:#4A4740;display:block;padding-top:8px}
.seguir__copiar{margin-left:auto;background:none;border:1px solid currentColor;border-radius:4px;color:inherit;font:600 12px var(--texto);padding:4px 8px;cursor:pointer}
.seguir__subir{margin-top:14px}
.seguir__subir .btn{display:flex}
.btn--espera{opacity:.7;pointer-events:none}
.seguir__nota{color:var(--humo);font-size:14px;margin-top:10px}
.seguir__comprobante img{max-width:220px;border-radius:var(--radio);border:1px solid var(--filo-mojado);margin-top:12px}
.seguir__contacto{display:grid;gap:10px}
.seguir__guardar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.seguir__guardar .seguir__copiar{margin-left:0}
.tab{font-variant-numeric:tabular-nums}

/* aviso de pedido en curso (portada) */
/* tu pedido en curso (js/en-curso.js): un bloque de laca con filo rojo, el número en su sello y un punto que late */
.en-curso{position:relative;z-index:6;display:flex;align-items:center;gap:12px;margin:10px 16px 8px;padding:10px 14px 10px 12px;border:1px solid transparent;border-radius:12px;color:var(--papel-de-farol);text-decoration:none;font-size:14px;
  background:linear-gradient(180deg,#27313D,#12171D) padding-box,linear-gradient(172deg,#F26A4F,#D8262C 42%,#7E171B) border-box;box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 10px 24px -10px rgb(0 0 0 / .7),0 0 26px -12px rgb(228 119 38 / .55)}
.en-curso::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#F2583F;animation:latido 1.8s ease-in-out infinite}
.en-curso b{padding:6px 9px 5px;border-radius:3px;color:#FFF4E6;font:800 16px/1 var(--display);font-variant-numeric:tabular-nums;transform:rotate(-3deg);background:linear-gradient(180deg,#E3362E,#B81E24)}
.en-curso small{display:block;color:var(--humo);font-size:12px}
.en-curso__ver{margin-left:auto;color:var(--dorado-de-placa);font-weight:700}
/* «Mi pedido» con un pedido en curso: un punto rojo que late (dock y cabecera) */
.dock__item.con-pedido::after{content:"";position:absolute;top:3px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:#E3362E;box-shadow:0 0 0 2px rgb(12 14 18 / .75);animation:latido 1.8s ease-in-out infinite}
.cabecera__pedido.con-pedido{padding-left:15px!important}
.cabecera__pedido.con-pedido::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#E3362E;animation:latido 1.8s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.4);opacity:.65}}
/* con el aviso arriba, la portada también se mete debajo de él: el negro empieza desde arriba, sin franja de papel */
body:has(#en-curso:not([hidden])){--en-curso:100px}   /* lo que mide el aviso con sus márgenes */
body:has(#en-curso:not([hidden])) .portada{margin-top:calc(-72px - var(--en-curso));padding-top:calc(92px + var(--en-curso))}
@media (min-width:900px){
  body:has(#en-curso:not([hidden])){--en-curso:90px}
  body:has(#en-curso:not([hidden])) .portada{margin-top:calc(-92px - var(--en-curso));padding-top:calc(108px + var(--en-curso))}
}
@media (min-width:900px){.en-curso{max-width:1168px;margin:0 auto 8px}}

/* confirmación del pedido registrado */
.pedido-listo .seguir__datos{margin-top:12px}
.pedido-listo__folio{font-size:40px;line-height:1}
.turnstile{display:flex;justify-content:center}   /* sin alto propio: el cuadro de Cloudflare solo sale si hace falta tocarlo */