/* Taquería El Compa: base del sitio v2. Tokens, componentes y movimiento. Móvil primero (390 px); escritorio desde 900 px. */
@font-face{font-family:"Alfa";src:url("../fonts/AlfaSlabOne-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"Lobster";src:url("../fonts/LobsterTwo-BoldItalic.otf");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Bitter";src:url("../fonts/Bitter-var.ttf");font-weight:100 900;font-display:swap}

:root{
  --rojo:#B5121B; --oscuro:#7E0C18; --crema:#F6EBD3; --tinta:#1F1A17; --amar:#F2B21A; --verde:#4F6B2A;
  --sk:#EADBB9; --sk-brillo:#FBF4E4; --linea:rgba(31,26,23,.18); --error:#9A0E16; --papel:#FBF4E4;
  --t14:14px; --t16:16px; --t20:20px; --t28:28px; --t40:40px; --t56:56px;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --ease-pop:cubic-bezier(0.34,1.4,0.64,1);
  --pad:20px; --max:1120px; --barra-h:64px; --seguro:env(safe-area-inset-bottom,0px);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .09 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Bitter",Georgia,serif;font-weight:600;font-size:var(--t16);line-height:1.5;color:var(--tinta);background:var(--crema) var(--grano);overflow-x:hidden;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--barra-h) + var(--seguro))}
img,svg{max-width:100%;display:block}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px}
.alfa{font-family:"Alfa",serif;font-weight:400;line-height:1.08;letter-spacing:.005em}
.lob{font-family:"Lobster",cursive;font-style:italic;font-weight:700;line-height:1}
.precio{color:var(--verde);font-weight:700}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.salto{position:absolute;left:8px;top:-64px;background:var(--crema);padding:12px 16px;z-index:100;border-radius:8px}
.salto:focus{top:8px}
[hidden]{display:none!important}

/* ---------- estructura ---------- */
main{flex:1;width:100%;max-width:calc(var(--max) + 2 * var(--pad));margin:0 auto;padding:24px var(--pad) 40px}
.titulo-pagina{font-size:var(--t40);margin-bottom:8px}
.sub{max-width:52ch;color:rgba(31,26,23,.84)}
.seccion{margin-top:48px}
.seccion>h2,.h2{font-family:"Alfa",serif;font-weight:400;font-size:var(--t28);line-height:1.1;margin-bottom:16px}

/* ---------- toldo y cabecera ---------- */
.tope{position:relative;z-index:30;view-transition-name:tope}
.cabecera{background:var(--rojo);color:var(--crema);padding:6px var(--pad);min-height:60px}
.cabecera-in{width:100%;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;min-height:48px}
.marca .alfa{font-size:var(--t14);text-transform:uppercase;letter-spacing:.06em}
.marca .lob{font-size:34px;color:var(--crema)}
.toldo{height:32px;background:var(--rojo) url("../img/toldo-neg.svg") repeat-x 0 0/60px 32px;margin-top:-1px}
.toldo-abre .toldo{animation:toldo-baja 600ms var(--ease-in-out) both}
@keyframes toldo-baja{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.nav-sup{display:none}
.icono-btn{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none;position:relative;transition:transform 120ms var(--ease-out)}
.icono-btn:active{transform:scale(.94)}
.icono-btn .i{width:26px;height:26px}

/* ---------- barra inferior (móvil) ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--barra-h) + var(--seguro));padding-bottom:var(--seguro);background:var(--crema) var(--grano);border-top:2px solid var(--tinta);display:grid;grid-template-columns:repeat(4,1fr);view-transition-name:barra}
.barra a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;text-decoration:none;font-size:var(--t14);line-height:1.15;font-weight:700;letter-spacing:-.01em;color:rgba(31,26,23,.78);transition:color 160ms var(--ease-out)}
.barra a .i{width:26px;height:26px;transition:transform 260ms var(--ease-pop)}
.barra a::before{content:"";position:absolute;top:-2px;left:22%;right:22%;height:4px;background:var(--rojo);border-radius:0 0 4px 4px;opacity:0;transform:scaleX(.4);transition:transform 260ms var(--ease-out),opacity 160ms var(--ease-out)}
.barra a[aria-current=page]{color:var(--rojo)}
.barra a[aria-current=page]::before{opacity:1;transform:scaleX(1)}
.barra a[aria-current=page] .i{transform:translateY(-1px) scale(1.08)}
.insignia{position:absolute;top:5px;left:calc(50% + 6px);min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--rojo);color:var(--crema);font-size:var(--t14);line-height:20px;text-align:center;font-weight:800;border:2px solid var(--crema);box-sizing:content-box;opacity:0;transform:scale(.6);transition:transform 260ms var(--ease-pop),opacity 160ms var(--ease-out)}
.insignia.on{opacity:1;transform:scale(1)}

/* ---------- carrito flotante ---------- */
.fab{position:fixed;right:16px;bottom:calc(var(--barra-h) + var(--seguro) + 14px);z-index:35;min-height:56px;padding:0 20px 0 16px;display:flex;align-items:center;gap:10px;border-radius:99px;background:var(--rojo);color:var(--crema);border:2px solid var(--tinta);box-shadow:3px 4px 0 var(--tinta);text-decoration:none;font-weight:800;font-size:var(--t20);transform:scale(.8) translateY(12px);opacity:0;pointer-events:none;transition:transform 320ms var(--ease-pop),opacity 160ms var(--ease-out)}
.fab.on{transform:none;opacity:1;pointer-events:auto}
.fab:active{transform:scale(.97)}
.fab .i{width:26px;height:26px}
.fab-n{position:absolute;top:-10px;left:-6px;min-width:24px;height:24px;border-radius:99px;background:var(--crema);color:var(--tinta);border:2px solid var(--tinta);font-size:var(--t14);display:grid;place-items:center;padding:0 5px;line-height:1}
body[data-sin-fab] .fab{display:none}
/* Móvil: el carrito es una franja sobre la barra inferior; nada queda debajo de un botón suelto */
@media (max-width:899.98px){
  .fab{left:0;right:0;bottom:calc(var(--barra-h) + var(--seguro));min-height:52px;padding:0 20px;justify-content:center;border-radius:0;border-width:2px 0 0;box-shadow:none;transform:translateY(12px)}
  .fab-n{position:static;border-color:var(--crema);background:var(--crema)}
  body:has(.fab.on) .pie{padding-bottom:calc(36px + 52px)}
}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 22px;border-radius:10px;border:2px solid var(--tinta);background:var(--crema);color:var(--tinta);font-weight:800;font-size:var(--t16);line-height:1.1;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 var(--tinta);transition:transform 120ms var(--ease-out),background-color 160ms var(--ease-out),color 160ms var(--ease-out),border-color 160ms var(--ease-out);-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97)}
.btn-rojo{background:var(--rojo);color:var(--crema)}
.btn-tinta{background:var(--tinta);color:var(--crema)}
.btn-ancho{width:100%}
.btn[disabled],.btn[aria-disabled=true]{cursor:default;opacity:.55;box-shadow:none}
.btn[data-estado=cargando]{pointer-events:none;opacity:1}
.btn[data-estado=exito]{background:var(--verde);color:var(--crema);opacity:1}
.btn[data-estado=exito] .i{animation:pop 280ms var(--ease-pop) both}
.btn.err{animation:sacude 240ms var(--ease-out);box-shadow:0 0 0 3px var(--crema),0 0 0 5px var(--error)}
.aro{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;flex:none;animation:gira 700ms linear infinite}
.btn-msg{display:flex;gap:6px;align-items:flex-start;margin-top:10px;font-size:var(--t14);color:var(--error);font-weight:700;animation:entra-fade 160ms var(--ease-out)}
.btn-msg .i{margin-top:2px}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes sacude{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes pop{from{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes entra-fade{from{opacity:0}to{opacity:1}}
@media (hover:hover){
  .btn:not([disabled]):hover{background-color:#FFF6E0}
  .btn-rojo:not([disabled]):hover{background-color:#C7222B}
  .btn-tinta:not([disabled]):hover{background-color:#3A312C}
  .btn[data-estado=exito]:hover{background-color:var(--verde)}
  .barra a:hover{color:var(--rojo)}
  .nav-sup a:hover{background:rgba(246,235,211,.16)}
}

/* ---------- chips y campos ---------- */
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:99px;border:2px solid var(--tinta);background:transparent;font-weight:700;font-size:var(--t14);cursor:pointer;white-space:nowrap;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 120ms var(--ease-out)}
.chip::after{content:"";position:absolute;inset:-4px 0}
.chip:active{transform:scale(.97)}
.chip[aria-pressed=true]{background:var(--tinta);color:var(--crema)}
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo label{font-weight:800;font-size:var(--t14)}
.campo input,.campo textarea{min-height:52px;padding:12px 14px;border:2px solid var(--tinta);border-radius:10px;background:var(--papel);font-size:var(--t16);width:100%;transition:border-color 160ms var(--ease-out)}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--amar);outline-offset:0;box-shadow:0 0 0 5px var(--tinta)}
.campo .error{color:var(--error);font-size:var(--t14)}

/* ---------- skeleton ---------- */
.sk{position:relative;overflow:hidden;background:var(--sk);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,var(--sk-brillo) 50%,transparent 100%);transform:translateX(-100%);animation:shimmer 1.4s var(--ease-in-out) infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk-l{height:14px;border-radius:7px;margin:8px 0}
.sk-l.g{height:22px}
.sk-w30{width:30%}.sk-w50{width:50%}.sk-w70{width:70%}.sk-w90{width:90%}
.sk-foto{aspect-ratio:4/3;border-radius:12px}
.sk-circ{border-radius:50%}
.sk-tarjeta{border:2px solid var(--linea);border-radius:14px;padding:12px;background:var(--papel)}
.sk-capa{position:absolute;inset:0 0 auto 0;transition:opacity 160ms var(--ease-out);pointer-events:none}
.sk-capa.sale{opacity:0}
.aparece{animation:entra-fade 160ms var(--ease-out) both}
.vacio{display:grid;justify-items:start;gap:14px;padding:32px 0}
.vacio p{font-family:"Alfa",serif;font-size:var(--t28);line-height:1.1;font-weight:400}
.vacio .sub{font-family:"Bitter",serif;font-size:var(--t16);font-weight:600}

/* ---------- avisos ---------- */
.avisos{position:fixed;bottom:calc(var(--barra-h) + var(--seguro) + 12px);left:12px;right:12px;z-index:80;display:grid;gap:10px;justify-items:center;pointer-events:none}
.aviso{pointer-events:auto;width:100%;max-width:420px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--tinta);color:var(--crema);border-radius:12px;box-shadow:0 8px 24px rgba(31,26,23,.28);animation:aviso-in 320ms var(--ease-out) both;font-size:var(--t16)}
.aviso.sale{animation:aviso-out 200ms var(--ease-out) both}
.aviso .i{margin-top:2px;width:22px;height:22px}
.aviso b{display:block;font-family:"Alfa",serif;font-weight:400;font-size:var(--t16);margin-bottom:2px}
.aviso-t{flex:1;min-width:0}
.aviso button{background:none;border:0;color:var(--amar);font-weight:800;min-height:48px;margin:-12px -8px -12px 0;padding:0 12px;cursor:pointer}
.aviso.ok .i{color:#B9D58E}
.aviso.error .i{color:#FF9B8F}
.aviso.wa{background:#1F3A2A}
.aviso.wa b{font-family:"Bitter",serif;font-weight:800}
.aviso .cod{font-family:"Alfa",serif;font-size:var(--t28);letter-spacing:.2em;color:var(--amar);display:block;line-height:1.2}
.avisos.arr{top:12px;bottom:auto}
body:has(.fab.on) .avisos.abj{bottom:calc(var(--barra-h) + var(--seguro) + 64px)}
.avisos.arr .aviso{animation-name:aviso-in-arr}
.avisos.arr .aviso.sale{animation-name:aviso-out-arr}
@keyframes aviso-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes aviso-out{to{opacity:0;transform:translateY(12px)}}
@keyframes aviso-in-arr{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes aviso-out-arr{to{opacity:0;transform:translateY(-12px)}}

/* ---------- hoja inferior ---------- */
.hoja-fondo{position:fixed;inset:0;z-index:60;background:rgba(31,26,23,.5);animation:entra-fade 240ms var(--ease-out) both}
.hoja-fondo.sale{animation:sale-fade 200ms var(--ease-out) both}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;background:var(--crema) var(--grano);border-radius:20px 20px 0 0;border-top:2px solid var(--tinta);box-shadow:0 -8px 32px rgba(31,26,23,.25);margin:0 auto;max-width:560px;animation:hoja-in 320ms var(--ease-out) backwards}
.hoja.sale{animation:hoja-out 200ms var(--ease-out) forwards}
.hoja-asa{display:grid;place-items:center;height:28px;flex:none;cursor:grab;touch-action:none}
.hoja-asa::before{content:"";width:44px;height:5px;border-radius:3px;background:rgba(31,26,23,.3)}
.hoja-cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad) calc(24px + var(--seguro))}
.hoja-x{position:absolute;top:6px;right:6px;z-index:2}
@keyframes hoja-in{from{transform:translateY(100%)}}
@keyframes hoja-out{to{transform:translateY(100%)}}
@keyframes sale-fade{to{opacity:0}}
body.hoja-abierta{overflow:hidden}

/* ---------- revelado al scroll ---------- */
.js .rev{opacity:0;transform:translateY(16px)}
.js .rev.ya{opacity:1;transform:none;transition:opacity 320ms var(--ease-out) var(--d,0ms),transform 320ms var(--ease-out) var(--d,0ms)}

/* ---------- contador de dígitos rodantes ---------- */
.cont{display:inline-flex;line-height:1.1}
.cont{font-variant-numeric:tabular-nums}
.cont .dig{display:inline-block;width:1ch;height:1.1em;overflow:hidden;text-align:center}
.cont .col{display:block;transform:translateY(calc(var(--d) * -1.1em));transition:transform 220ms var(--ease-out)}
.cont .col span{display:block;height:1.1em}
.cont .nuevo{animation:entra-fade 220ms var(--ease-out) both}

/* ---------- vuelo al carrito ---------- */
.vuelo{position:fixed;left:0;top:0;z-index:90;width:56px;height:56px;border-radius:50%;background:var(--crema) center/cover;border:3px solid var(--tinta);pointer-events:none;display:grid;place-items:center;color:var(--rojo)}
.vuelo .i{width:28px;height:28px}

/* ---------- tarjeta de platillo ---------- */
.plato{position:relative;display:flex;flex-direction:column;background:var(--papel);border:2px solid var(--tinta);border-radius:14px;overflow:hidden;box-shadow:0 4px 0 var(--tinta)}
.plato-foto{position:relative;aspect-ratio:4/3;background:var(--oscuro);color:var(--crema);display:block;overflow:hidden;border:0;padding:0;cursor:pointer;width:100%}
.plato-foto img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.mosaico{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;background-image:repeating-linear-gradient(90deg,rgba(246,235,211,.07) 0 22px,transparent 22px 44px)}
.mosaico.mini{position:static;width:100%;height:100%;padding:0}.mosaico.mini svg{width:70%}
.mosaico svg{width:min(46%,104px);height:auto;flex:none}
.mosaico b{font-family:"Alfa",serif;font-weight:400;font-size:var(--t16);line-height:1.1}
.plato-foto .rotulo{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-family:"Alfa",serif;font-size:var(--t20);line-height:1.1;background:repeating-linear-gradient(90deg,var(--oscuro) 0 22px,#8F1020 22px 44px)}
.plato-cuerpo{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;flex:1}
.plato-cuerpo h3{font-family:"Alfa",serif;font-weight:400;font-size:var(--t20);line-height:1.12}
.plato-cuerpo p{font-size:var(--t14);line-height:1.4;color:rgba(31,26,23,.84)}
.etqs{display:flex;gap:6px;flex-wrap:wrap}
.etq{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 10px;border-radius:99px;border:2px solid var(--tinta);font-size:var(--t14);font-weight:800;line-height:1}
.etq .i{width:14px;height:14px;color:var(--rojo)}
.etq.estrella{background:var(--tinta);color:var(--amar)}
.plato-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.plato-pie .precio{font-size:var(--t20)}
.plato.agotado{opacity:.62}
.plato.agotado .plato-foto img{filter:grayscale(1)}
.agota{font-weight:800;font-size:var(--t14)}
.cant{display:inline-flex;align-items:center;border:2px solid var(--tinta);border-radius:10px;background:var(--crema);overflow:hidden;min-height:48px}
.cant button{width:48px;min-height:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;transition:background-color 160ms var(--ease-out),transform 120ms var(--ease-out)}
.cant button:active{transform:scale(.9)}
.cant output{min-width:32px;text-align:center;font-weight:800;font-size:var(--t20)}
.btn-agregar{min-width:116px}
@media (hover:hover){.plato:hover .plato-foto img{transform:scale(1.04)}.cant button:hover{background:rgba(31,26,23,.1)}}

/* ---------- estado y tarjetas ---------- */
.estado-dia{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 12px;border:2px solid var(--tinta);border-radius:99px;background:var(--papel);font-weight:800;font-size:var(--t14)}
.punto{width:12px;height:12px;border-radius:50%;background:var(--verde);flex:none}
.estado-dia.pausa .punto{background:var(--amar);box-shadow:0 0 0 2px var(--tinta)}
.estado-dia.cierre .punto{background:var(--rojo)}
.carril{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 12px;scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
.carril>*{scroll-snap-align:start}
.cinta{display:grid;grid-template-rows:0fr;transition:grid-template-rows 360ms var(--ease-in-out)}
.cinta.abre{grid-template-rows:1fr}
.cinta>div{overflow:hidden;min-height:0}

/* ---------- pie con lámina acanalada ---------- */
.pie{margin-top:auto;background:repeating-linear-gradient(90deg,#7E0C18 0 8px,#6F0A15 8px 16px);color:var(--crema);padding:28px var(--pad) 36px;position:relative}
.pie::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tinta)}
.pie-in{max-width:var(--max);margin:0 auto;display:grid;gap:8px}
.pie .lob{font-size:var(--t28)}
.pie a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}

/* ---------- transiciones entre documentos ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sale 120ms var(--ease-out) both}
::view-transition-new(root){animation:vt-entra 260ms var(--ease-out) both}
::view-transition-group(tope),::view-transition-group(barra){animation-duration:0s}
::view-transition-old(tope),::view-transition-old(barra){display:none}
::view-transition-new(tope),::view-transition-new(barra){animation:none}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(12px)}}
@supports not (view-transition-name:a){main{animation:vt-entra 260ms var(--ease-out) both}}

/* ---------- escritorio: barra superior ---------- */
@media (min-width:900px){
  body{padding-bottom:0}
  .tope{position:sticky;top:0}
  .barra{display:none}
  .nav-sup{display:flex;gap:4px;align-items:center}
  .nav-sup a{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:99px;text-decoration:none;font-weight:800;position:relative;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
  .nav-sup a[aria-current=page]{background:var(--crema);color:var(--rojo)}
  .nav-sup .insignia{position:static;border-color:var(--rojo);margin-left:-2px;display:none}
  .nav-sup .insignia.on{display:block}
  .solo-movil{display:none!important}
  .fab{right:32px;bottom:32px}
  main{padding-top:48px;padding-bottom:72px}
  .carril{grid-auto-flow:row;grid-template-columns:1.5fr 1fr 1fr;grid-auto-columns:auto;overflow:visible;margin:0;padding:4px 0 12px}
  .hoja{inset:0;margin:auto;height:fit-content;max-height:80vh;border-radius:20px;border:2px solid var(--tinta);animation-name:hoja-in-d}
  .hoja.sale{animation-name:hoja-out-d}
  @keyframes hoja-in-d{from{opacity:0;transform:translateY(24px)}}
  @keyframes hoja-out-d{to{opacity:0;transform:translateY(24px)}}
}

/* ---------- reduced motion: sólo fades de 150 ms y color ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .toldo-abre .toldo{animation:none}
  .btn:active,.chip:active,.cant button:active,.icono-btn:active,.fab:active{transform:none}
  .btn[data-estado=exito] .i,.btn.err{animation:none}
  .aro{animation:pulso 1.4s ease-in-out infinite}
  .sk::after{display:none}
  .sk{animation:pulso 2s ease-in-out infinite}
  .js .rev,.js .rev.ya{transform:none}
  .js .rev.ya{transition:opacity 150ms linear}
  .cont .col{transition:none}
  .barra a .i,.barra a::before,.insignia,.fab{transition:opacity 150ms linear,color 160ms linear}
  .barra a[aria-current=page] .i,.fab,.insignia,.barra a::before{transform:none}
  .aviso,.hoja,.hoja-fondo,.aparece,.btn-msg{animation-name:entra-fade;animation-duration:150ms}
  .aviso.sale,.hoja.sale,.hoja-fondo.sale{animation-name:sale-fade;animation-duration:150ms}
  .plato-foto img{transition:none}
  .cinta{transition:none}
  @keyframes pulso{50%{opacity:.55}}
}