/* ==========================================================================
   La Vieja · la pila de cajas
   Cartón kraft, flexo a dos tintas (rojo cinta y negro), papel antigrasa.
   ========================================================================== */

:root {
  --kraft: #c99462;
  --kraft-claro: #e9c9a0;
  --canto: #c18b56;
  --canto-luz: #dcb07c;
  --canto-sombra: #93633a;
  --tinta: #1d1410;
  --rojo: #c23a1a;
  --rojo-hondo: #a32f14;
  --cinta: #dd471d;
  --sello: #b8321a;
  --papel: #f7f1e6;
  --claro: #fbf6ee;
  --verde: #2e7d3e;

  --rotulo: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texto: "Courier Prime", "Courier New", monospace;
  --mano: "Permanent Marker", "Comic Sans MS", cursive;

  --sale: cubic-bezier(.23, 1, .32, 1);
  --entra-sale: cubic-bezier(.77, 0, .175, 1);

  --margen: clamp(1rem, 4vw, 3rem);
  --aire: clamp(4.5rem, 10vw, 8.5rem);
  --ancho: 78rem;

  /* Grano del cartón y tinta de sello: ruido SVG, sin imágenes */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .06 1.3 0 0 0 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --tinta-sello: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 0 0 0 2.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  /* La cinta del logo: rectángulo de lados cóncavos. Manda en botones y rótulos. */
  --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 1Q50 6 99 1Q94.5 20 99 39Q50 34 1 39Q5.5 20 1 1Z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--tinta) var(--kraft-claro); }
body {
  margin: 0;
  background: var(--kraft) var(--grano);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
  caret-color: var(--rojo);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--tinta); color: var(--kraft-claro); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 6.5rem; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.marcador { font-family: var(--mano); font-weight: 400; letter-spacing: 0; text-transform: none; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .8rem 1.2rem; background: var(--tinta); color: var(--claro); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 1rem; }

.demo-bar { padding: .45rem var(--margen); background: var(--tinta); color: var(--kraft-claro); font-size: .78rem; letter-spacing: .04em; text-align: center; }

.titulo {
  font: 900 clamp(2.75rem, 7vw, 6rem)/1.08 var(--rotulo);
  text-transform: uppercase;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.titulo--claro { color: var(--claro); }

/* ---------- Botones: la cinta del logo, borde blanco y relleno ---------- */
.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .8rem 1.7rem .75rem;
  color: var(--claro);
  font: 900 1.05rem/1 var(--rotulo);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: none;
  transition: transform .16s var(--sale);
}
.boton::before, .boton::after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-mask: var(--forma) center / 100% 100% no-repeat;
  mask: var(--forma) center / 100% 100% no-repeat;
}
.boton::before { inset: 0; background: var(--claro); }
.boton::after { inset: 3px; background: var(--rojo); transition: background-color .2s ease; }
.boton svg { width: 1.35em; height: 1.35em; flex: none; fill: currentColor; }
.boton:active { transform: scale(.97); }
.boton--grande { min-height: 3.75rem; padding-inline: 2.1rem; font-size: 1.2rem; }
.boton--tinta::after { background: var(--tinta); }
.boton--linea { color: var(--tinta); }
.boton--linea::before { background: var(--tinta); }
.boton--linea::after { inset: 2.5px; background: var(--kraft); }
.boton--linea svg { fill: none; stroke: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .boton--rojo:hover::after { background: var(--rojo-hondo); }
  .boton--tinta:hover::after { background: #3a2a22; }
  .boton--linea:hover::after { background: var(--kraft-claro); }
}

/* ---------- Etiqueta y sello de goma ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .75rem .4rem .5rem;
  background: var(--papel);
  color: var(--tinta);
  font: 700 .78rem/1.2 var(--texto);
  box-shadow: 0 0 0 1px rgb(29 20 16 / .4);
  transform: rotate(1.5deg);
}
.sello {
  display: inline-block;
  padding: .3rem .5rem .22rem;
  border: 2.5px solid currentColor;
  color: var(--sello);
  font: 900 1rem/1 var(--rotulo);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-4deg);
  -webkit-mask: var(--tinta-sello) 0 0 / 140px 140px;
  mask: var(--tinta-sello) 0 0 / 140px 140px;
}
.etiqueta[data-abierto="false"] .sello { color: var(--tinta); }
.etiqueta--sola { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); padding: .55rem .7rem; transform: rotate(6deg); }
.etiqueta--sola .sello { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kraft) var(--grano);
  border-bottom: 2px solid var(--tinta);
}
.cabecera__in { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); min-height: 4.5rem; }
.cabecera__logo { position: relative; z-index: 2; flex: none; }
.cabecera__logo img { width: clamp(7rem, 11vw, 9.5rem); transform: rotate(-2deg); }
.cabecera .etiqueta { position: relative; z-index: 2; order: 1; }
.nav { order: 2; margin-left: auto; }
.nav ul { display: flex; gap: clamp(1rem, 2vw, 1.75rem); }
.nav ul a { font: 800 1.15rem/1 var(--rotulo); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding-block: .6rem; background: linear-gradient(currentColor 0 0) left 92% / 0 3px no-repeat; transition: background-size .3s var(--sale); }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { background-size: 100% 3px; } }
.menu-boton { display: none; }

@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: 1.75rem; }
}

@media (max-width: 61.99rem) {
  .cabecera .etiqueta { margin-left: auto; }
  .menu-boton {
    order: 3;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid var(--tinta);
    background: var(--claro);
    cursor: pointer;
  }
  .menu-boton__barras, .menu-boton__barras::before, .menu-boton__barras::after { display: block; width: 1.3rem; height: 2.5px; background: var(--tinta); transition: transform .3s var(--sale), opacity .2s; }
  .menu-boton__barras { position: relative; }
  .menu-boton__barras::before, .menu-boton__barras::after { content: ""; position: absolute; left: 0; }
  .menu-boton__barras::before { top: -.42rem; }
  .menu-boton__barras::after { top: .42rem; }
  .menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(.42rem) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-boton__barras::after { transform: translateY(-.42rem) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    margin: 0;
    padding: 6rem var(--margen) 3rem;
    background: var(--rojo) var(--grano);
    color: var(--claro);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .5s var(--entra-sale), visibility 0s .5s;
  }
  .nav.abierto { transform: none; visibility: visible; transition: transform .5s var(--entra-sale); }
  .nav ul { flex-direction: column; gap: .4rem; }
  .nav ul a { display: inline-block; font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .nav__wa { align-self: flex-start; }
  .nav__wa::after { background: var(--tinta); }
  :root:has(.nav.abierto) { overflow: hidden; }
}
@media (max-width: 26rem) {
  .cabecera__logo img { width: 6.25rem; }
  .cabecera .etiqueta { gap: .4rem; padding: .3rem .45rem .3rem .35rem; }
  .cabecera .etiqueta .sello { font-size: .82rem; }
  .cabecera .etiqueta__txt { max-width: 6.4rem; font-size: .7rem; line-height: 1.15; }
}

/* ---------- Canto de caja: cada sabor es el borde de una caja apilada ---------- */
.canto {
  --x: 0rem;
  --saca: 0rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: clamp(2.85rem, 4.2vw, 3.4rem);
  padding: .35rem .9rem .3rem 1.1rem;
  border: 0;
  background: linear-gradient(180deg, var(--canto-luz) 0 7%, var(--canto) 7% 86%, var(--canto-sombra) 86%);
  color: var(--tinta);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transform: translateX(calc(var(--x) + var(--saca)));
  transition: transform .3s var(--sale);
}
.canto__nombre { font: 900 clamp(1.4rem, 2.3vw, 1.85rem)/1 var(--rotulo); letter-spacing: .02em; text-transform: uppercase; }
.canto__dato { margin-left: auto; font: 700 .72rem/1.15 var(--texto); letter-spacing: .05em; text-transform: uppercase; text-align: right; }
.tricolor { flex: none; width: .95rem; height: 1.55rem; background: linear-gradient(90deg, var(--verde) 0 33.4%, var(--claro) 0 66.6%, var(--rojo) 0); box-shadow: 0 0 0 1.5px var(--tinta); }
@media (hover: hover) and (pointer: fine) { .canto:hover { --saca: .7rem; } }

/* ---------- La caja abierta, en 3D ---------- */
.caja { container-type: inline-size; position: relative; perspective: 1500px; perspective-origin: 50% 0%; }
.caja__tope {
  --inclina: 38deg;
  position: relative;
  aspect-ratio: 1;
  margin-top: 44cqi;
  transform-origin: 50% 100%;
  transform: rotateX(var(--inclina));
  transform-style: preserve-3d;
}
.caja__fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 12%;
  background: var(--canto) var(--grano);
  box-shadow: inset 0 0 0 .2rem var(--canto-sombra), inset 0 1.1rem 0 rgb(80 45 15 / .24);
}
.caja__fondo::before { content: ""; position: absolute; inset: 2.5%; background: url("../img/papel-antigrasa-560.webp") center / 100% 100% no-repeat; transform: rotate(-2.5deg); }
.caja__fondo img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sale); }
.caja__fondo--papel { display: grid; place-content: center; gap: .75rem; padding: 16%; color: var(--tinta); text-align: center; }
.caja__fondo--papel > * { position: relative; }
.caja__fondo--papel .marcador { font-size: clamp(2rem, 12cqi, 3.4rem); line-height: 1; transform: rotate(-4deg); }
.caja__falta { font: 700 .82rem/1.3 var(--texto); }
.caja__tapa {
  --abre: 0deg;
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: translateZ(2px) rotateX(var(--abre));
  transition: transform .95s var(--sale);
}
.caja--abierta .caja__tapa { --abre: 96deg; }
.caja:not(.caja--abierta) .caja__fondo img { transform: scale(1.06); }
.caja__cara { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.caja__cara--fuera {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4%;
  background: var(--canto-luz) var(--grano);
  box-shadow: inset 0 0 0 .2rem var(--canto-sombra);
}
.caja__cara--fuera img { width: 64%; }
.caja__cara--fuera .marcador { font-size: clamp(1.4rem, 9cqi, 2.4rem); transform: rotate(-5deg); }
.caja__cara--dentro {
  display: grid;
  place-items: center;
  transform: rotateX(180deg);
  background: var(--kraft-claro) var(--grano);
  box-shadow: inset 0 0 0 .2rem var(--canto-sombra), inset 0 -1.4rem 0 rgb(80 45 15 / .14);
}
.caja__cara--dentro span {
  padding: .5rem 1rem;
  border-block: 3px solid var(--rojo);
  color: var(--rojo);
  font: 900 clamp(1rem, 6.5cqi, 1.6rem)/1 var(--rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.canto--frente { --x: 0rem; margin-top: -1px; }

/* ---------- Inicio ---------- */
.inicio { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.inicio__in { display: grid; gap: 2.5rem; }
.inicio__titulo {
  font: 900 clamp(3.1rem, 8.6vw, 6rem)/1.08 var(--rotulo);
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.inicio__bajada { max-width: 34rem; margin-top: 1.5rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.inicio__nota { margin-top: .9rem; font-size: 1.25rem; transform: rotate(-1.5deg); transform-origin: left; }
.inicio__acciones { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; margin-top: 1.75rem; }
.inicio__pila { width: min(100%, 25rem); justify-self: center; }
@media (min-width: 62rem) { .inicio__pila { width: min(100%, 28rem); } }
.inicio__pila > .canto:nth-of-type(1) { --x: -.6rem; }
.inicio__pila > .canto:nth-of-type(2) { --x: .5rem; }
.inicio__pila > .canto:nth-of-type(3) { --x: -.25rem; }
.inicio__pila > .canto:nth-of-type(4) { --x: .8rem; }

.impreso {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: .5rem;
  border-block: 2px solid var(--tinta);
}
.impreso > div { padding: .85rem 1rem .9rem; border-left: 1px dashed var(--tinta); }
.impreso > div:nth-child(odd) { border-left: 0; }
.impreso > div:nth-child(n+3) { border-top: 1px dashed var(--tinta); }
.impreso dt { font: 700 .72rem/1.2 var(--texto); letter-spacing: .1em; text-transform: uppercase; }
.impreso dd { font: 900 clamp(1.8rem, 3.2vw, 2.6rem)/1 var(--rotulo); font-variant-numeric: tabular-nums; }
.impreso small { font: 700 .72rem/1 var(--texto); letter-spacing: .02em; }

@media (max-width: 61.99rem) {
  .inicio__canto-extra { display: none; }
}
@media (min-width: 62rem) {
  .inicio { min-height: calc(100svh - 4.5rem - 2rem); display: flex; flex-direction: column; }
  .inicio__in {
    flex: 1;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "texto pila" "impreso impreso";
    grid-template-rows: 1fr auto;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 2rem;
  }
  .inicio__texto { grid-area: texto; align-self: center; }
  .inicio__pila { grid-area: pila; align-self: end; margin-bottom: -1rem; }
  .impreso { grid-area: impreso; grid-template-columns: repeat(4, 1fr); }
  .impreso > div:nth-child(odd) { border-left: 1px dashed var(--tinta); }
  .impreso > div:first-child { border-left: 0; }
  .impreso > div:nth-child(n+3) { border-top: 0; }
}

/* ---------- Cinta italiana ---------- */
.cinta { overflow: hidden; margin-top: clamp(2.5rem, 5vw, 3.5rem); border-block: 3px solid var(--tinta); background: var(--rojo) var(--grano); color: var(--claro); }
.cinta__pista { display: flex; width: max-content; }
/* La cinta avanza con el scroll, como cinta de embalar que se tira: nada se mueve solo */
@supports (animation-timeline: view()) {
  .anima .cinta__pista { animation: cinta linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
.cinta__grupo { display: flex; align-items: center; gap: 1.4rem; padding: .8rem 1.4rem .8rem 0; }
.cinta span { font: 900 clamp(1.4rem, 2.6vw, 2.1rem)/1 var(--rotulo); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cinta i { flex: none; width: 1.5rem; height: .85rem; background: linear-gradient(90deg, var(--verde) 0 33.4%, var(--claro) 0 66.6%, var(--tinta) 0); }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-35%); } }

/* ---------- Turnos ---------- */
.turnos { padding-block: var(--aire) 0; }
.turnos .titulo { margin-bottom: clamp(2rem, 4vw, 3rem); }
.turnos__par { display: grid; }
.turno { position: relative; display: grid; gap: 2rem; padding: clamp(2.5rem, 6vw, 4.5rem) var(--margen); }
.turno--dia { background: var(--papel); }
.turno--noche { background: var(--tinta); color: var(--kraft-claro); }
.turno__in { position: relative; display: grid; align-content: start; gap: 1rem; max-width: 32rem; }
.turno__in .boton { justify-self: start; margin-top: .5rem; }
.turno__hora { font: 900 clamp(2.6rem, 5.5vw, 4.6rem)/.9 var(--rotulo); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.turno__hora span { letter-spacing: -.01em; }
.turno--noche .turno__hora, .turno--noche .turno__titulo { color: var(--claro); }
.turno__titulo { font: 900 clamp(1.7rem, 3vw, 2.4rem)/1 var(--rotulo); text-transform: uppercase; }
.turno__fotos { position: relative; min-height: 17rem; }
.turno__foto { position: absolute; padding: .45rem; background: var(--claro); box-shadow: 0 0 0 1px rgb(29 20 16 / .4); object-fit: cover; }
.turno__foto--a { left: 0; top: 0; width: 72%; aspect-ratio: 4 / 3; transform: rotate(-2.5deg); }
.turno__foto--b { right: 0; bottom: 0; width: 52%; aspect-ratio: 1; transform: rotate(3deg); }
.turno .etiqueta--sola { position: absolute; z-index: 2; top: -.75rem; right: -.25rem; }
@media (min-width: 62rem) {
  .turnos__par { grid-template-columns: 1fr 1fr; }
  .turno { grid-template-rows: auto 1fr; padding-inline: clamp(2rem, 5vw, 4.5rem); }
  .turno--dia { padding-left: max(var(--margen), (100vw - var(--ancho)) / 2); }
  .turno--noche { padding-right: max(var(--margen), (100vw - var(--ancho)) / 2); }
  .turno__fotos { min-height: 21rem; }
}

/* ---------- La carta: la pila ---------- */
.carta { padding-block: var(--aire); background: var(--rojo) var(--grano); color: var(--claro); }
.carta__cabeza { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.carta__bajada { max-width: 36rem; }
.carta__pie { margin-top: 2.5rem; font-weight: 700; }
.carta__pie a { color: var(--claro); }
.sabor__h { margin: 0; font: inherit; }
.sabor__panel { padding: .9rem 0 2rem; }
.sabor__panel .caja { width: min(100%, 24rem); margin-inline: auto; }
.comanda {
  position: relative;
  width: min(100%, 26rem);
  margin: -1rem auto 0;
  padding: 1.3rem 1.4rem 2rem;
  background: var(--papel);
  color: var(--tinta);
  transform: rotate(1.2deg);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - .7rem) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.4rem .7rem repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - .7rem) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.4rem .7rem repeat-x;
}
.comanda p + p { margin-top: .5rem; }
.comanda__nombre { padding-bottom: .55rem; margin-bottom: .7rem; border-bottom: 2px dashed var(--tinta); font: 900 2rem/1 var(--rotulo); text-transform: uppercase; }
.comanda .boton { margin-top: 1.1rem; }

.js .pila .canto[aria-expanded="true"] { --saca: 1.1rem; }
.js .pila .canto[aria-expanded="true"]::after { content: "abierta"; position: absolute; right: .9rem; top: -1.05rem; padding: .1rem .45rem; background: var(--papel); color: var(--tinta); font: 400 .9rem/1.2 var(--mano); transform: rotate(3deg); }

@media (min-width: 62rem) {
  .carta__cabeza { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .js .pila { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .js .sabor { display: contents; }
  .js .sabor__h { grid-column: 1; }
  .js .pila { position: relative; }
  .js .sabor__panel { grid-column: 2; grid-row: 1 / span 15; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: end; padding: 0; transform: translateY(var(--y, 0px)); }
  .js .sabor__panel .caja { width: 100%; max-width: 27rem; margin: 0; }
  .js .sabor__panel .comanda { margin: 0 0 1.5rem -2.5rem; z-index: 1; }
}

/* ---------- Mediodía ---------- */
.mediodia { padding-block: var(--aire); }
.mediodia__cabeza { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mediodia__cabeza p { max-width: 38rem; }
.viandas { display: flex; gap: 1.25rem; padding: 1rem var(--margen) 1.5rem; margin-inline: calc(var(--margen) * -1); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.vianda { --giro: -1.5deg; position: relative; flex: 0 0 min(78vw, 22rem); scroll-snap-align: center; padding: .55rem .55rem .65rem; background: var(--claro); box-shadow: 0 0 0 1px rgb(29 20 16 / .4); transform: rotate(var(--giro)); }
.vianda:nth-child(even) { --giro: 1.8deg; }
.vianda img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vianda::before {
  content: "LA VIEJA · LA VIEJA · LA VIEJA";
  position: absolute;
  z-index: 1;
  top: .3rem;
  left: -1.1rem;
  padding: .3rem .8rem;
  background: var(--rojo);
  color: var(--claro);
  font: 900 .72rem/1 var(--rotulo);
  letter-spacing: .14em;
  white-space: nowrap;
  transform: rotate(-9deg);
}
.vianda__rotulo { display: block; padding-top: .5rem; font-size: 1.15rem; line-height: 1.2; }
.mediodia__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
@media (min-width: 62rem) {
  .mediodia__cabeza { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .viandas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.25rem 1.75rem; padding: 0; margin: 0; overflow: visible; }
  .vianda { flex: none; }
  .vianda--1 { grid-column: 1 / 6; }
  .vianda--2 { grid-column: 6 / 9; margin-top: 3.5rem; }
  .vianda--3 { grid-column: 9 / 13; margin-top: 1rem; }
  .vianda--4 { grid-column: 2 / 6; }
  .vianda--5 { grid-column: 6 / 10; margin-top: -1rem; }
  .vianda--6 { grid-column: 10 / 13; margin-top: 2rem; }
  .vianda--2 img, .vianda--6 img { aspect-ratio: 1; }
}

/* ---------- El oficio ---------- */
.oficio { padding-block: var(--aire); background: var(--tinta); color: var(--kraft-claro); }
.oficio__in { display: grid; gap: 3rem; }
.oficio__texto { display: grid; gap: 1.25rem; align-content: start; max-width: 38rem; }
.oficio__texto .titulo { margin-bottom: .5rem; }
.oficio__cita { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 3px solid var(--cinta); }
.oficio__cita p { color: var(--claro); font: 800 clamp(1.7rem, 3vw, 2.5rem)/1.02 var(--rotulo); text-wrap: balance; }
.oficio__cita footer { margin-top: .8rem; font-size: .85rem; }
.oficio__fotos { position: relative; min-height: 26rem; }
.oficio__foto { position: absolute; padding: .5rem; background: var(--claro); object-fit: cover; }
.oficio__foto--cajas { left: 0; top: 0; width: 62%; aspect-ratio: 4 / 5; transform: rotate(-3deg); }
.oficio__foto--pizza { right: 0; bottom: 2rem; width: 52%; aspect-ratio: 1; transform: rotate(4deg); }
.oficio__fotos figcaption { position: absolute; left: 4%; bottom: 0; font-size: 1.15rem; color: var(--kraft-claro); transform: rotate(-2deg); }
@media (min-width: 62rem) {
  .oficio__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: center; }
  .oficio__fotos { min-height: 36rem; }
}

/* ---------- Eventos ---------- */
.eventos { padding-block: var(--aire); }
.eventos__cabeza { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.eventos__cabeza p { max-width: 38rem; }
.eventos__cabeza .boton { justify-self: start; }
.eventos__fotos { display: grid; gap: 1.25rem; }
.eventos__fotos img { width: 100%; padding: .5rem; background: var(--claro); box-shadow: 0 0 0 1px rgb(29 20 16 / .4); object-fit: cover; }
.eventos__grande img { aspect-ratio: 16 / 10; }
.eventos__grande figcaption { margin-top: .6rem; font: 700 .85rem/1.3 var(--texto); }
.eventos__chica { aspect-ratio: 16 / 10; }
.eventos__chica--1 { transform: rotate(-1.5deg); }
.eventos__chica--2 { transform: rotate(1.5deg); }
@media (min-width: 62rem) {
  .eventos__cabeza { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .eventos__cabeza .titulo { grid-row: span 2; }
  .eventos__fotos { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 1.75rem 2.25rem; align-items: start; }
  .eventos__grande { grid-row: span 2; }
  .eventos__chica--2 { margin-top: .5rem; }
}

/* ---------- Opiniones: comandas impresas ---------- */
.opiniones { padding-block: var(--aire); border-top: 2px solid var(--tinta); }
.opiniones__cabeza { display: grid; gap: .9rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.tickets { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 1.5rem; }
.ticket {
  --giro: -1.5deg;
  display: grid;
  gap: 1rem;
  align-content: space-between;
  width: min(100%, 17.5rem);
  padding: 1.6rem 1.3rem 1.8rem;
  background: var(--claro);
  transform: rotate(var(--giro));
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 1.2rem .6rem repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 1.2rem) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.2rem .6rem repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 1.2rem .6rem repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 1.2rem) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.2rem .6rem repeat-x;
}
.ticket:nth-child(2) { --giro: 1.8deg; margin-top: 1.5rem; }
.ticket:nth-child(3) { --giro: -.6deg; }
.ticket:nth-child(4) { --giro: 2.2deg; margin-top: 2.2rem; }
.ticket:nth-child(5) { --giro: -2deg; margin-top: .6rem; }
.ticket blockquote p { font-size: 1rem; line-height: 1.5; }
.ticket blockquote p::before { content: "«"; }
.ticket blockquote p::after { content: "»"; }
.ticket__firma { padding-top: .7rem; border-top: 2px dashed var(--tinta); font: 700 .78rem/1.3 var(--texto); letter-spacing: .05em; text-transform: uppercase; }
.enlace { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.5rem; font-weight: 700; }
.enlace svg { width: 1.2rem; height: 1.2rem; }
@media (min-width: 62rem) {
  .opiniones__cabeza { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .tickets { flex-wrap: nowrap; justify-content: space-between; }
  .ticket { width: auto; flex: 1 1 0; }
}

/* ---------- Pedir y dónde ---------- */
.pedir { padding-block: var(--aire); background: var(--rojo) var(--grano); color: var(--claro); }
.pedir :focus-visible, .carta :focus-visible, .oficio :focus-visible, .pie :focus-visible, .turno--noche :focus-visible, .nav :focus-visible { outline-color: var(--claro); }
.pasos { display: grid; gap: 2rem; margin-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.pasos li { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; align-items: start; }
.pasos__n { grid-row: span 2; font: 900 clamp(4rem, 8vw, 6rem)/.8 var(--rotulo); color: var(--claro); }
.pasos h3 { font: 900 1.7rem/1 var(--rotulo); text-transform: uppercase; }
.pasos p { margin-top: .5rem; }
.pasos a { color: var(--claro); font-weight: 700; }
.donde { display: grid; gap: 1.75rem; align-items: start; }
.hoja { padding: 1.6rem 1.5rem 1.8rem; background: var(--papel); color: var(--tinta); }
.hoja :focus-visible { outline-color: var(--tinta); }
.hoja__titulo { margin-bottom: 1rem; font: 900 2rem/1 var(--rotulo); text-transform: uppercase; }
.hoja__titulo--claro { color: var(--claro); }
.horario table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horario th, .horario td { padding: .5rem .3rem; border-bottom: 1px dashed rgb(29 20 16 / .45); text-align: left; font-size: clamp(.78rem, 2.6vw, .95rem); white-space: nowrap; }
.horario thead th { font: 800 .9rem/1 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--tinta); }
.horario tbody th { font-weight: 700; }
.horario tr[data-hoy] th, .horario tr[data-hoy] td { font-weight: 700; background: linear-gradient(transparent 62%, rgb(221 71 29 / .28) 62% 90%, transparent 90%); }
.horario tr[data-hoy] th::after { content: "hoy"; margin-left: .45rem; color: var(--sello); font: 400 .95rem/1 var(--mano); }
.hoja__nota { margin-top: .9rem; font-size: .82rem; }
.direccion__calle { font: 900 clamp(2.2rem, 4vw, 3rem)/1 var(--rotulo); text-transform: uppercase; }
.direccion .boton { margin-top: 1.25rem; }
.direccion .boton svg { fill: none; stroke: currentColor; }
.direccion__nota { margin-top: 1.1rem; font-size: 1.1rem; transform: rotate(-2deg); transform-origin: left; }
.preguntas details { border-bottom: 2px solid rgb(251 246 238 / .55); }
.preguntas summary { position: relative; padding: .95rem 2.2rem .95rem 0; font: 800 1.3rem/1.1 var(--rotulo); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::before, .preguntas summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 1rem; height: 3px; background: currentColor; transition: transform .25s var(--sale); }
.preguntas summary::after { transform: rotate(90deg); }
.preguntas details[open] summary::after { transform: rotate(0); }
.preguntas details p { padding-bottom: 1.1rem; }
.preguntas a { color: var(--claro); font-weight: 700; }
@media (min-width: 48rem) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .donde { grid-template-columns: 1fr 1fr; }
  .preguntas { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  .donde { grid-template-columns: 1.15fr .85fr 1.1fr; }
  .preguntas { grid-column: auto; }
  .horario { transform: rotate(-.8deg); }
  .direccion { transform: rotate(1.2deg); margin-top: 1.5rem; }
}

/* ---------- Pie: bloque de créditos ---------- */
.pie { padding-block: clamp(3.5rem, 7vw, 5.5rem) 6rem; background: var(--tinta); color: var(--kraft-claro); }
.pie__arriba { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; padding-bottom: 2.25rem; border-bottom: 2px solid var(--kraft-claro); }
.pie__logo { width: clamp(9rem, 16vw, 12rem); }
.pie__lema { flex: 1 1 14rem; font: 800 clamp(1.4rem, 2.4vw, 1.9rem)/1.05 var(--rotulo); color: var(--claro); text-transform: uppercase; }
.creditos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1.3rem 2rem; padding-block: 2.25rem; }
.creditos dt { font: 800 .82rem/1.2 var(--rotulo); color: var(--claro); letter-spacing: .14em; text-transform: uppercase; }
.creditos dd { margin-top: .25rem; font-size: .92rem; line-height: 1.45; overflow-wrap: break-word; }
.creditos a { color: var(--kraft-claro); }
.pie__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px dashed rgb(233 201 160 / .5); font-size: .82rem; }
.credit { display: inline-flex; align-items: center; gap: .7rem; min-height: 3rem; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: color .25s ease; }
.credit svg { width: auto; height: 1.375rem; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .credit:hover { color: var(--claro); } }

/* ---------- WhatsApp flotante ---------- */
.wa-flota {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 40;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .7rem 1.4rem .65rem;
  color: var(--claro);
  font: 900 1.1rem/1 var(--rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .16s var(--sale), opacity .3s ease, translate .4s var(--sale);
}
.wa-flota::before, .wa-flota::after { content: ""; position: absolute; z-index: -1; -webkit-mask: var(--forma) center / 100% 100% no-repeat; mask: var(--forma) center / 100% 100% no-repeat; }
.wa-flota::before { inset: 0; background: var(--claro); }
.wa-flota::after { inset: 3px; background: var(--rojo); transition: background-color .2s ease; }
.wa-flota svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.wa-flota:active { transform: scale(.97); }
.wa-flota--escondida { opacity: 0; translate: 0 1.5rem; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .wa-flota:hover::after { background: var(--rojo-hondo); } }

/* ---------- Carga: la tapa de la caja ---------- */
.carga { display: none; }
.js .carga {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  perspective: 1600px;
  perspective-origin: 50% 0%;
  animation: carga-fuera 0s 3.2s forwards;
}
.carga__tapa {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  background: var(--canto-luz) var(--grano);
  transform-origin: 50% 0;
}
.carga__tapa img { width: min(72vw, 26rem); }
.carga__impreso { padding: .45rem 1rem; border-block: 3px solid var(--rojo); color: var(--tinta); font: 900 clamp(.95rem, 2.5vw, 1.3rem)/1 var(--rotulo); letter-spacing: .3em; text-transform: uppercase; }
.carga--abre .carga__tapa { transform: rotateX(82deg); opacity: 0; transition: transform 1s var(--entra-sale), opacity .35s .62s; }
@keyframes carga-fuera { to { visibility: hidden; } }

/* ---------- Movimiento (solo con .anima, que pone app.js sin reduced-motion) ---------- */
.anima .inicio__titulo, .anima .inicio__bajada, .anima .inicio__nota, .anima .inicio__acciones { opacity: 0; translate: 0 1.2rem; }
.anima.listo .inicio__titulo, .anima.listo .inicio__bajada, .anima.listo .inicio__nota, .anima.listo .inicio__acciones { opacity: 1; translate: 0 0; transition: opacity .7s var(--sale), translate .9s var(--sale); }
.anima.listo .inicio__bajada { transition-delay: .12s; }
.anima.listo .inicio__nota { transition-delay: .22s; }
.anima.listo .inicio__acciones { transition-delay: .3s; }
.anima .inicio__pila > * { opacity: 0; translate: 3.5rem 0; }
.anima.listo .inicio__pila > * { opacity: 1; translate: 0 0; transition: opacity .5s var(--sale), translate .8s var(--sale), transform .3s var(--sale); }
.anima.listo .inicio__pila > :nth-child(1) { transition-delay: .05s; }
.anima.listo .inicio__pila > :nth-child(2) { transition-delay: .12s, .12s, 0s; }
.anima.listo .inicio__pila > :nth-child(3) { transition-delay: .18s, .18s, 0s; }
.anima.listo .inicio__pila > :nth-child(4) { transition-delay: .24s, .24s, 0s; }
.anima.listo .inicio__pila > :nth-child(5) { transition-delay: .3s, .3s, 0s; }
.anima .cabecera .sello { opacity: 0; }
.anima.listo .cabecera .sello { animation: golpe .55s .5s var(--sale) both; }
@keyframes golpe {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.9); }
  60% { opacity: 1; transform: rotate(-3deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

.anima .revela { clip-path: inset(100% -5% -10% -5%); }
.anima .revela.visto { clip-path: inset(-25% -5% -10% -5%); transition: clip-path 1s var(--entra-sale); }
.anima .revela-foto { clip-path: inset(0 0 100% 0); scale: 1.04; }
.anima .revela-foto.visto { clip-path: inset(-2rem); scale: 1; transition: clip-path 1.1s var(--entra-sale), scale 1.4s var(--sale); }
.anima .ticket { opacity: 0; translate: 0 -2rem; }
.anima .ticket.visto { opacity: 1; translate: 0 0; transition: opacity .6s var(--sale), translate .8s var(--sale); }
.anima .ticket.visto:nth-child(2) { transition-delay: .08s; }
.anima .ticket.visto:nth-child(3) { transition-delay: .16s; }
.anima .ticket.visto:nth-child(4) { transition-delay: .24s; }
.anima .ticket.visto:nth-child(5) { transition-delay: .32s; }
.anima .etiqueta--sola.visto .sello { animation: golpe .55s .25s var(--sale) both; }

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