/* =====================================================================
   ESCENAS · apertura, entradas de categoría y composición de escritorio
   ===================================================================== */

/* ---------- Apertura ---------- */
.intro{display:none}
.js .intro{display:grid;position:fixed;inset:0;z-index:var(--z-intro);place-items:center;background:var(--asfalto-800) var(--textura-zigzag);cursor:pointer}
.intro:not(.en-marcha) .intro-escena{opacity:0}
.intro-escena{position:relative;width:min(78vw,360px);aspect-ratio:420/318}
.intro-bandeja{position:absolute;left:50%;top:52%;width:94%;transform:translate(-50%,-50%)}
.intro-logo{position:absolute;inset:0;opacity:0}
.intro-logo .logo{width:100%;height:100%}
.intro .frita{transform-box:fill-box;transform-origin:center}
.intro-saltar{position:absolute;right:16px;top:calc(env(safe-area-inset-top) + 12px);min-height:44px;padding:0 18px;border-radius:14px;border:2px solid var(--c-linea);color:var(--c-texto-suave);font-weight:700}
.lat-marca{opacity:0;transition:opacity var(--d-corto)}
.lat-marca.llego,html:not(.js) .lat-marca{opacity:1}

/* ---------- Entrada escalonada de cada categoría (una sola vez) ---------- */
.mov .pagina:not(.entro) :is(.bandeja,.fila,.adi,.infantil,.completo li){opacity:0}
.mov .pagina.entro :is(.bandeja,.fila,.adi,.infantil,.completo li){animation:entra var(--d-medio) var(--ease-salida) both;animation-delay:calc(var(--i, 0) * 55ms)}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(1){--i:0}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(2){--i:1}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(3){--i:2}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(4){--i:3}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(5){--i:4}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(6){--i:5}
.pagina :is(.bandeja,.fila,.adi,.completo li):nth-child(n+7){--i:6}
@keyframes entra{from{opacity:0;transform:translateY(18px)}}

/* ---------- Escritorio: composición propia (lateral · carta · pedido) ---------- */
@media (min-width:1024px){
  .app{flex-direction:row}
  .cab,.cuenta{display:none!important}
  .lateral{display:flex;flex-direction:column;gap:18px;flex:none;width:330px;padding:24px 20px;background:var(--asfalto-800);border-right:2px solid var(--asfalto-600);overflow-y:auto}
  .lat-marca .logo{width:100%;max-width:280px;margin:0 auto}
  .lateral .mesa{padding:0}
  .lateral .mesa-q{font-size:28px}
  .lat-nav{display:grid;gap:4px}
  .lat-fila{min-height:46px;padding:0 14px;border-radius:14px;text-align:left;font:400 22px/1 var(--f-display);color:var(--c-texto);transition:background var(--d-micro),color var(--d-micro)}
  .lat-fila:hover{background:var(--asfalto-700)}
  .lat-fila[aria-current=true]{background:var(--papa-500);color:var(--tinta)}
  .lat-buscar{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;border:2px dashed var(--c-linea);color:var(--c-texto-suave);font-weight:700;margin-top:auto}
  .lat-buscar svg{width:20px;height:20px}
  .lat-buscar:hover{color:var(--c-texto);border-color:var(--papa-500)}
  .centro{flex:1;min-width:0}
  .paginas{display:block;overflow:hidden;scroll-snap-type:none}
  .pagina{display:none;height:100%;padding-bottom:40px;scroll-snap-stop:normal}
  .pagina.activa{display:block}
  .pagina-in{max-width:960px;margin:0 auto;padding:34px 36px 0}
  .pag-titulo b{font-size:clamp(48px,5vw,72px)}
  .pag-titulo[data-largo="12"] b{font-size:clamp(42px,4.4vw,62px)}
  .pag-titulo[data-largo="15"] b{font-size:clamp(38px,4vw,56px)}
  .bandejas{grid-template-columns:minmax(0,1fr);gap:16px}
  .bandeja--grande{grid-column:1/-1;grid-template-columns:260px 1fr;grid-template-areas:"ilu nom" "ilu desc" "pie pie";padding:18px 24px 18px 8px;align-items:center}
  .bandeja--grande .bandeja-ilu{width:250px;height:250px;margin:0}
  .bandeja--grande .desc{-webkit-line-clamp:5;font-size:16px}
  .bandeja--mundo:nth-child(even){grid-template-columns:112px 1fr;grid-template-areas:"ilu nom" "ilu desc" "pie pie";padding:12px 12px 12px 6px}
  .bandeja--mundo:nth-child(even) .bandeja-ilu{margin:-2px 0 0 -4px}
  .adi-lista{grid-template-columns:repeat(3,1fr)}
  .tomar{max-width:640px}
  .infantil{max-width:640px}
  .pedido-aside{display:flex;flex-direction:column;flex:none;width:410px;padding:18px;background:var(--asfalto-800);border-left:2px solid var(--asfalto-600)}
  .pedido-aside .ticket{border-radius:24px;overflow:hidden;box-shadow:var(--elev-capa)}
  .pedido-aside .tk-cab{padding:22px 18px 10px}
  .pedido-aside .tk-pie{padding-bottom:18px}
  .hoja{top:50%;left:50%;bottom:auto;width:560px;max-height:88dvh;border-radius:28px}
  .hoja[open]{animation:ficha-pc var(--d-medio) var(--ease-salida);transform:translate(-50%,-50%)}
  .hoja.saliendo{animation:ficha-pc-sale calc(var(--d-medio) * .7) var(--ease-entrada) forwards}
  @keyframes ficha-pc{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}}
  @keyframes ficha-pc-sale{to{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
  .hoja--busca{height:80dvh}
  .agarre::before{display:none}
  .ficha-escena{padding-top:30px}
}
@media (min-width:1500px){
  .bandejas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandeja--grande{grid-column:1/-1}
  .pagina-in{max-width:1180px}
}
@media (min-width:1900px){
  .bandejas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Tableta: composición de dos columnas y hojas centradas, no el móvil estirado */
@media (min-width:700px) and (max-width:1023px){
  .pagina-in{padding:28px 32px 0}
  .bandejas{grid-template-columns:1fr 1fr;gap:16px}
  .bandeja--grande{grid-column:1/-1;grid-template-columns:240px 1fr;grid-template-areas:"ilu nom" "ilu desc" "pie pie";align-items:center}
  .bandeja--grande .bandeja-ilu{width:230px;height:230px;margin:0;rotate:-4deg}
  .adi-lista{grid-template-columns:repeat(3,1fr)}
  .tomar,.infantil,.completo{max-width:620px}
  .hoja{width:min(100%,600px);margin-inline:auto}
  .cuenta{left:50%;right:auto;width:min(calc(100% - 24px),560px);translate:-50% 0}
}
@media (max-height:700px){
  .ficha-ilu{width:132px;height:132px}
  .ficha-escena{padding-top:28px;gap:6px}
  .mesa--grande .seg-btn{min-height:64px}
}
@media (max-width:359px){
  .pill{min-width:0;flex-direction:column;gap:3px;min-height:60px;padding:6px 2px;font-size:19px}
  .bandeja{grid-template-columns:96px 1fr}
  .bandeja-ilu{width:100px;height:100px}
  .infantil{grid-template-columns:1fr 110px}
}