/* Escenas: apertura, portada, páginas de la carta, cierre y composición de escritorio */

/* ---------- Apertura «Se imprime el nombre» ---------- */
#intro{position:fixed;inset:0;z-index:200;overflow:hidden;touch-action:manipulation}
.intro-fondo{position:absolute;inset:0;background:var(--c-azul)}
.intro-centro{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:10svh}
.logo-lockup{flex-direction:column;align-items:center;gap:.06em;font-size:min(18vw,19svh,100px);line-height:.92;text-align:center}
.logo-lockup .lg-est{width:1.05em;height:1.05em;padding:.2em;margin-bottom:.32em;box-shadow:0 0 0 .05em var(--c-crema)}
.logo-lockup .lg-w{display:block}
.logo-lockup .lg-mano{font-size:.5em;margin:.5em 0 0;transform:rotate(-4deg)}
.volante{position:fixed;margin:0;transform-origin:0 0;z-index:5}
body.en-intro{overflow:hidden}

/* ---------- Layout móvil ---------- */
.app{min-height:100svh}
.calle{position:fixed;top:0;left:0;right:0;z-index:30;height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;background:var(--c-azul);border-bottom:2px solid #eae5d544}
.calle-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);height:64px}
.solo-escritorio{display:none}
.album{padding-top:calc(64px + env(safe-area-inset-top));padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* ---------- Portada: pantalla de inicio de la mini app (una sola pantalla, completa) ---------- */
.portada{position:relative;background:var(--c-azul);color:var(--c-crema);min-height:calc(100svh - 64px - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:var(--e-5) 20px var(--e-5);display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:var(--e-3);text-align:center;overflow:hidden}
.por-nota{font-size:24px;line-height:1.05;max-width:20ch;color:var(--c-amarillo);transform:rotate(-3deg)}
.por-titulo{font-size:min(calc((100vw - 40px) / 6.7),11svh,104px)}
.por-hero{position:relative;width:min(100%,280px,max(150px,calc((100svh - 480px) * 1.15)));aspect-ratio:1.15}
.hero-disco{position:absolute;left:14%;top:4%;width:72%;aspect-ratio:1;border-radius:50%;background:var(--c-amarillo);box-shadow:5px 7px 0 var(--c-naranja)}
.hero-burger{position:absolute;left:20%;top:24%;width:60%;aspect-ratio:1.387;color:var(--c-tinta);transform:rotate(-6deg)}
.hero-papas{position:absolute;right:0;bottom:0;width:24%;aspect-ratio:1.12;color:var(--c-crema);transform:rotate(10deg)}
.hero-est{position:absolute;aspect-ratio:1;color:var(--c-amarillo)}
.hero-est.a{left:0;top:6%;width:16%;transform:rotate(-14deg)}
.hero-est.b{right:4%;top:0;width:12%;color:var(--c-crema);transform:rotate(12deg)}
.hero-cor{position:absolute;left:4%;bottom:2%;width:11%;aspect-ratio:.76;color:var(--c-crema);transform:rotate(-8deg)}
.portada .estado{color:var(--c-crema)}
.por-sede{font-size:var(--t-pequeno);font-weight:800;letter-spacing:.06em}
.cta-portada{width:min(100%,420px);min-height:56px;border-radius:var(--r-pastilla);background:var(--c-amarillo);color:var(--c-tinta);font-family:var(--f-display);font-weight:900;font-size:20px;text-transform:uppercase;box-shadow:0 6px 0 var(--c-naranja);margin-top:var(--e-1)}
@media (max-height:700px){ .portada{gap:var(--e-2);padding-block:var(--e-3)}.por-titulo{font-size:min(calc((100vw - 40px) / 7),9svh)}.por-nota{font-size:20px} }

/* ---------- Páginas de la carta ---------- */
.pag{--ink:var(--c-tinta);--paper:var(--c-amarillo);position:relative;overflow-x:clip;padding:var(--e-10) 14px var(--e-10);background:var(--c-amarillo);color:var(--ink)}
.pag::before{content:"";position:absolute;inset:0;background:var(--grano);mix-blend-mode:multiply;pointer-events:none}
.pag>*{position:relative}
.pag-az{--ink:var(--c-crema);--paper:var(--c-azul);background:var(--c-azul)}
.pag-az .slot{--sb:var(--c-amarillo);--si:var(--c-tinta);--c-linea:#eae5d5aa}
.pag-az .slot-mas{background:var(--c-amarillo);color:var(--c-tinta)}
.pag-az .stepper{background:var(--c-amarillo);color:var(--c-tinta)}
.pag-az .slot-etq{color:var(--c-amarillo)}
.pag-az .slot.pegada .slot-nom{text-shadow:2px 2px 0 #fff}
.pag-cr{--ink:var(--c-tinta);--paper:var(--c-crema);background:var(--c-crema)}
.pag-cr .slot{--sb:var(--c-azul)}
.pag-am .slot:nth-child(3n+2){--sb:var(--c-electrico)}
.pag-cr .slot:nth-child(3n+2){--sb:var(--c-noche-alta)}
.pag-cr .slot:nth-child(3n){--sb:var(--c-electrico)}
.pag-cab{display:grid;gap:var(--e-2);margin-bottom:var(--e-8);position:relative;padding-top:44px}
.pag-nro{font-size:var(--t-pequeno);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.pag-tit{font-size:min(var(--t-titulo),calc((100vw - 36px) / (var(--len,8) * .82)));color:var(--c-noche-alta);text-shadow:3px 3px 0 var(--c-naranja);overflow-wrap:anywhere;position:relative;z-index:1}
.pag-az .pag-tit{color:#fff;text-shadow:3px 3px 0 var(--c-naranja)}
.pag-nota{font-size:22px;color:var(--c-electrico);max-width:28ch;transform:rotate(-1.5deg);position:relative;z-index:1}
.pag-az .pag-nota{color:var(--c-amarillo)}
/* dibujo del menú impreso al borde de la página: acompaña, no tapa */
.pag-ilus{position:absolute;right:-4px;top:-16px;width:clamp(92px,27vw,128px);aspect-ratio:1.4;color:var(--ink);opacity:.9;transform:rotate(var(--giro,8deg));z-index:0}
.pag-ilus.alto{aspect-ratio:.55;width:clamp(40px,11vw,56px);top:-6px;right:10px}
.pag-ilus.par{aspect-ratio:1;width:76px;right:6px}

/* Ritmo: el primer plato es grande y los demás se desfasan */
.pag:not(.pag-compacta) .slot:first-child{grid-column:1/-1;min-height:230px}
.pag:not(.pag-compacta) .slot:first-child .slot-nom{font-size:clamp(34px,11vw,46px)}
.pag:not(.pag-compacta) .slot:first-child .slot-desc{-webkit-line-clamp:5;font-size:14px}
.pag:not(.pag-compacta) .slot:nth-child(odd):not(:first-child){margin-top:22px}
.pag:not(.pag-compacta) .slot:first-child.pegada{--rot:-.6deg}
.pag-poca .slot.pegada{--rot:.5deg!important}
.pag-poca .slots{grid-template-columns:1fr}
.pag-poca .slot:nth-child(odd):not(:first-child){margin-top:0}
.pag-compacta .slots{gap:14px 12px}

/* ---------- Cartel de la multitud (con el logo vivo en el hueco del logo impreso) ---------- */
.cartel{position:relative;aspect-ratio:990/780;container-type:inline-size;background:var(--c-azul);border-radius:var(--r-grande);overflow:hidden}
.cartel-img{position:absolute;inset:0;color:var(--c-crema)}
.cartel-logo{position:absolute;left:52.5%;top:37.9%;width:28.3%;height:19.9%}
.logo-pila{flex-direction:column;justify-content:center;gap:.12em;position:relative;width:100%;height:100%;font-size:6.5cqw;line-height:.86;text-align:center}
.logo-pila .lg-est{position:absolute;right:-.55em;top:-.75em;width:1.05em;height:1.05em;padding:.18em;margin:0;box-shadow:0 0 0 .08em var(--c-crema);z-index:3}
.logo-pila .lg-w{display:block;position:relative;z-index:1}
.logo-pila .lg-mano{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%) rotate(-7deg);font-size:1.1em;white-space:nowrap;z-index:2;margin:0}

/* ---------- Cierre ---------- */
.cierre{background:var(--c-azul);color:var(--c-crema);padding:var(--e-10) 20px var(--e-8);display:grid;gap:var(--e-6);justify-items:center;text-align:center}
.cierre-letrero{display:grid;gap:var(--e-2);justify-items:center}
.cierre-letrero .imp{font-size:min(16vw,76px)}
.cierre-letrero .mano{font-size:26px;color:var(--c-amarillo);max-width:22ch;line-height:1.05}
.cierre-cartel{width:min(100%,760px);border:3px solid var(--c-crema);box-shadow:6px 7px 0 var(--c-naranja)}
.cierre-acciones{display:grid;gap:var(--e-2);justify-items:center}
.ig-enlace{font-size:24px;color:var(--c-crema);text-decoration:underline;min-height:44px;display:inline-grid;align-items:center}
.cierre-notas{list-style:none;display:grid;gap:var(--e-2);font-size:14px;max-width:46ch;text-align:left}
.cierre-notas li::before{content:"★ ";color:var(--c-amarillo)}
.completo{background:var(--c-crema);color:var(--c-tinta);border-radius:var(--r-grande);padding:var(--e-6);max-width:560px;width:100%;box-shadow:5px 6px 0 var(--c-naranja);text-align:left}
.completo h3{font-size:26px;margin-bottom:var(--e-3);color:var(--c-noche-alta)}
.completo ul{padding-left:20px;display:grid;gap:var(--e-2);font-size:15px}
.firma-prop{font-size:var(--t-pequeno)}

/* ---------- Escritorio: barra superior con las categorías y una sola columna de contenido centrada ---------- */
@media (min-width:1024px){
  :root{--t-titulo:clamp(56px,5.4vw,84px);--cab-d:118px}
  html{scroll-padding-top:134px}
  .app{display:block}
  /* cabecera en dos filas: arriba el logo y las acciones; debajo, todas las categorías centradas y siempre a la vista */
  .calle{position:fixed;top:0;left:0;right:0;height:var(--cab-d);padding:10px max(28px,calc((100% - 1240px) / 2)) 0;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:52px 1fr;grid-template-areas:"logo . buscar pedido" "nav nav nav nav";column-gap:16px;align-items:center;border-bottom:2px solid #eae5d544;border-right:0;z-index:40}
  .calle .calle-fila,.calle .calle-pie{display:contents}
  .estado.solo-escritorio,.calle-dir{display:none}
  .calle .logo-sign{grid-area:logo;flex-direction:row;align-items:center;gap:var(--e-3)}
  .calle .lg-est{width:44px;height:44px;padding:9px}
  .calle .lg-txt{font-size:26px;white-space:nowrap}
  .calle .lg-w{display:inline-block}
  .calle .lg-txt .lg-w2{margin-left:.3em}
  .calle .lg-mano{font-size:24px;margin-left:6px}
  .calle .btn-circ{grid-area:buscar;position:static}
  .calle .ped{grid-area:pedido;min-height:48px;font-size:15px}
  .calle .rotulos{grid-area:nav;display:flex;flex-direction:row;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0;padding:0 4px 10px;align-self:center}
  .calle .rotulos::-webkit-scrollbar{display:none}
  .rot{font-family:var(--f-texto);font-size:14px;text-transform:none;min-height:40px;padding:0 16px;border:0;border-radius:var(--r-pastilla);white-space:nowrap;color:var(--c-crema);opacity:1}
  .rot.lit{background:var(--c-amarillo);color:var(--c-tinta);box-shadow:2px 3px 0 var(--c-naranja);transform:none}
  .dock{display:none}
  .album{padding-top:var(--cab-d);padding-bottom:0;min-width:0}

  /* portada en dos columnas: texto a la izquierda, el dibujo como protagonista a la derecha */
  .portada{min-height:calc(100svh - var(--cab-d));padding:32px max(40px,calc((100% - 1160px) / 2));grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"nota hero" "titulo hero" "estado hero" "sede hero" "cta hero";justify-items:start;text-align:left;align-content:center;column-gap:56px;row-gap:var(--e-3)}
  .por-nota{grid-area:nota;font-size:30px;max-width:none;transform:rotate(-2deg);transform-origin:left}
  .por-titulo{grid-area:titulo;font-size:min(7vw,14svh,118px)}
  .por-hero{grid-area:hero;justify-self:center;width:min(100%,560px,max(260px,calc((100svh - 160px) * 1.1)))}
  .por-estado{grid-area:estado}
  .por-sede{grid-area:sede;font-size:15px}
  .cta-portada{grid-area:cta;width:auto;min-width:280px;padding:0 40px;margin-top:var(--e-3)}

  /* páginas de la carta: bandas de color a todo el ancho y contenido centrado */
  .pag{padding:88px max(32px,calc((100% - 1160px) / 2)) 96px}
  .pag-cab{padding-top:0;margin-bottom:var(--e-10)}
  .pag-ilus{right:0;top:-8px;width:170px}
  .pag-ilus.alto{width:60px;right:16px}
  .pag-ilus.par{width:96px}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
  .pag:not(.pag-compacta) .slot:first-child{grid-column:span 2;min-height:220px}
  .pag:not(.pag-compacta) .slot:nth-child(odd):not(:first-child){margin-top:0}
  .pag:not(.pag-compacta) .slot:nth-child(3n):not(:first-child){margin-top:28px}
  .pag-poca .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pag-poca .slot:first-child{grid-column:auto!important}
  .pag-compacta .slots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .slot{padding:16px 16px 14px}
  .slot-nom{font-size:var(--nom,24px)}
  .slot-desc{font-size:14px}
  .slot-precio{font-size:22px}
  .cierre{padding:96px max(32px,calc((100% - 1160px) / 2))}
  .aviso{left:50%;bottom:36px}

  /* Ficha y pedido: panel lateral en lugar de hoja inferior */
  .hoja{left:auto;top:0;bottom:0;right:0;width:min(500px,100vw);height:100%;border-radius:0;transform:translateX(100%)}
  .ficha .hoja,.pedido .hoja,.horarios .hoja,.buscador .hoja{height:100%}
  .capa.directa .hoja{transition:transform var(--d-medio) var(--ease-salida)}
  .arrastre{cursor:default}
  .arrastre i{display:none}
  .f-lamina{min-height:300px}
}
@media (min-width:1024px) and (max-height:780px){ .portada{padding-block:20px;row-gap:var(--e-2)}.por-titulo{font-size:min(7vw,11svh,100px)}.por-nota{font-size:24px}.cta-portada{margin-top:var(--e-2)} }
@media (min-width:1024px) and (max-width:1180px){ .rot{padding:0 12px;font-size:13px} }
@media (max-width:359px){ .calle .lg-mano{display:none} }