/* =====================================================================
   BASE · reinicio, tipografía, estructura de la app (móvil primero)
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;background:var(--asfalto-800)}
body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;font:500 var(--t-texto)/1.42 var(--f-texto);color:var(--c-texto);background:var(--asfalto-800);-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility;font-synthesis-weight:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--foco,var(--papa-500));outline-offset:2px;border-radius:6px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
.saltar{position:fixed;left:-999px;top:8px;background:var(--papa-500);color:var(--tinta);padding:12px 16px;border-radius:var(--r-medio);z-index:var(--z-intro);font-weight:700}
.saltar:focus{left:8px}
.sin-js{padding:24px;color:#fff}
.cifra{font-weight:800;font-stretch:var(--ancho-cond);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.personas{height:1em;width:auto;flex:none}
.icono-btn{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;transition:background var(--d-micro),transform var(--d-micro)}
.icono-btn:active{transform:scale(.92)}
.icono-btn svg{width:22px;height:22px}

/* ---------- Estructura ---------- */
.app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--asfalto-800)}
.lateral,.pedido-aside{display:none}
.centro{display:flex;flex-direction:column;flex:1;min-height:0}

/* ---------- Cabecera: marca, categoría actual, búsqueda y la mesa ---------- */
.cab{flex:none;position:relative;z-index:var(--z-cabecera);background:var(--asfalto-800);padding-top:env(safe-area-inset-top);border-bottom:2px solid var(--asfalto-600)}
.cab-fila{display:flex;align-items:center;gap:6px;height:58px;padding:0 8px}
.cab-marca{flex:none;width:46px;height:46px;border-radius:14px;background:var(--asfalto-700);display:grid;place-items:center;opacity:0;transition:opacity var(--d-corto)}
.cab-marca.llego,html:not(.js) .cab-marca{opacity:1}
.cab-marca svg{width:30px;height:30px}
.cab-titulo{flex:1;min-width:0;height:48px;border-radius:14px;background:var(--asfalto-700);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;transition:background var(--d-micro)}
.cab-titulo:active{background:var(--asfalto-600)}
.tit-nombre{display:flex;align-items:center;gap:6px;font:400 20px/1 var(--f-display);color:var(--papa-500);max-width:100%}
.tit-nombre svg{width:16px;height:16px;flex:none}
.tit-puntos{display:flex;gap:4px}
.tit-puntos i{display:block;width:6px;height:6px;border-radius:3px;background:#6E625A;transition:width var(--d-corto) var(--ease-salida),background var(--d-corto)}
.tit-puntos i.on{width:20px;background:var(--papa-500)}

/* ---------- Mesa: ¿cuántos amigos? ---------- */
.mesa{padding:0 10px 10px}
.mesa-q{font:400 30px/1 var(--f-display);color:var(--c-texto);padding:4px 4px 12px;overflow:hidden;max-height:60px;transition:max-height var(--d-medio) var(--ease-salida),opacity var(--d-corto),padding var(--d-medio) var(--ease-salida)}
.mesa-ayuda{font-size:14px;line-height:1.3;color:var(--c-texto-suave);padding:10px 4px 0;overflow:hidden;max-height:60px;transition:max-height var(--d-medio) var(--ease-salida),opacity var(--d-corto),padding var(--d-medio) var(--ease-salida)}
.mesa:not(.mesa--grande) .mesa-q,.mesa:not(.mesa--grande) .mesa-ayuda{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg-btn{min-height:48px;border-radius:16px;background:var(--asfalto-700);display:flex;align-items:center;justify-content:center;gap:8px;font-size:20px;transition:background var(--d-corto) var(--ease-salida),color var(--d-corto),transform var(--d-corto) var(--ease-resorte),min-height var(--d-medio) var(--ease-salida)}
.seg-btn .personas{font-size:22px}
.seg-btn b{font-weight:800;font-stretch:var(--ancho-cond);line-height:1}
.seg-btn:active{transform:scale(.96)}
.seg-btn[aria-pressed=true]{background:var(--papa-500);color:var(--tinta)}
.mesa--grande .seg-btn{min-height:78px;flex-direction:column;gap:8px}
.mesa--grande .seg-btn .personas{font-size:28px}

/* ---------- Páginas por categoría (gesto lateral) ---------- */
.paginas{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline:none}
.paginas::-webkit-scrollbar{display:none}
.pagina{flex:none;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overscroll-behavior-y:contain;background:var(--atm-fondo);color:var(--atm-texto);padding-bottom:calc(env(safe-area-inset-bottom) + 112px);--foco:var(--atm-texto)}
.pagina-in{padding:22px var(--e-4) 0}
.pag-titulo{margin-bottom:var(--e-2)}
.pag-titulo small{display:block;font:400 var(--t-titulo-chico)/1 var(--f-display);color:var(--atm-texto);margin-left:4px}
.pag-titulo b{display:block;font:400 var(--t-titulo)/.92 var(--f-display);color:var(--atm-titulo);letter-spacing:-.005em;transform:rotate(-2.5deg);transform-origin:0 100%;text-shadow:0 4px 0 rgba(0,0,0,.26);text-wrap:balance;padding-bottom:4px}
.pag-titulo[data-largo="12"] b{font-size:clamp(34px,11vw,64px)}
.pag-titulo[data-largo="15"] b{font-size:clamp(28px,9.6vw,54px)}
.pag-titulo[data-largo="9"] b{font-size:clamp(40px,12.4vw,66px)}
.pag-titulo:not(:has(b)) small{font-size:var(--t-titulo);line-height:.92;color:var(--atm-titulo);transform:rotate(-2.5deg);transform-origin:0 100%;text-shadow:0 4px 0 rgba(0,0,0,.26)}

/* ---------- Barra de la cuenta ---------- */
.cuenta{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:var(--z-barra);height:72px;border-radius:24px;background:var(--granate-500);color:var(--crema-100);display:flex;align-items:center;gap:10px;padding:0 14px 0 10px;box-shadow:0 5px 0 var(--granate-700),0 16px 30px rgba(0,0,0,.35);transition:transform var(--d-medio) var(--ease-resorte),opacity var(--d-corto);--foco:#fff;text-align:left}
.cuenta[data-vacia="true"]{transform:translateY(170%);opacity:0;pointer-events:none}
.cuenta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--granate-700)}
.cuenta-n{flex:none;width:46px;height:46px;border-radius:15px;background:var(--papa-500);color:var(--tinta);display:grid;place-items:center;font-size:25px}
.cuenta-tot,.cuenta-cu{display:flex;flex-direction:column;line-height:1.05}
.cuenta-tot small,.cuenta-cu small{font-size:13px;font-weight:600;font-stretch:90%;color:#FFD9D0}
.cuenta-tot b{font-size:28px}
.cuenta-cu{margin-left:auto;align-items:flex-end;text-align:right}
.cuenta-cu b{font-size:23px;color:var(--papa-500)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}