/* ZURU — ramen, slurped loud */
/* Dela Gothic One, cut down to the glyphs this page uses (SIL OFL) */
@font-face { font-family: 'Dela Gothic One'; src: url('../fonts/dela-gothic-one.woff2') format('woff2'); font-display: swap; }
:root {
  --crema: #fff0da;
  --tinta: #1b1310;
  --rojo: #e8401f;
  --amarillo: #f6c22f;
  --display: 'Dela Gothic One', 'Arial Black', sans-serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --salida: cubic-bezier(.16, 1, .3, 1);
  --estandar: cubic-bezier(.65, 0, .35, 1);
  --rapido: .38s;
  --lento: .9s;
  --gut: clamp(16px, 3.6vw, 56px);
  --bg: #e8401f;
  --fg: #fff0da;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.5 var(--sans); font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.salto { position: fixed; left: 12px; top: -60px; z-index: 99; background: var(--tinta); color: var(--crema); padding: 10px 14px; }
.salto:focus { top: 12px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.etiqueta { margin: 0 0 1.4rem; font: 600 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* buttons: hard shadow, bouncy */
.boton {
  --b: var(--fg); --t: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 800 .95rem/1 var(--sans); font-variation-settings: 'wdth' 112; letter-spacing: .01em; text-transform: uppercase; text-decoration: none;
  padding: 1em 1.5em; border-radius: 999px; border: 2px solid var(--b); background: var(--b); color: var(--t); cursor: pointer;
  box-shadow: 0 0 0 var(--b); transition: transform var(--rapido) var(--rebote), box-shadow var(--rapido) var(--rebote), background var(--rapido) var(--salida), color var(--rapido) var(--salida);
}
.boton:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 color-mix(in srgb, var(--b) 45%, transparent); }
.boton:active { transform: translate(0, 0) scale(.97); box-shadow: 0 0 0 var(--b); }
.boton--grande { font-size: 1.05rem; padding: 1.15em 1.8em; }
.boton--linea { background: none; color: var(--b); }
.boton--mini { font-size: .72rem; padding: .85em 1.15em; }
.boton--nav { font-size: .78rem; padding: .85em 1.2em; }

/* nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: clamp(14px, 2.6vw, 40px);
  padding: 18px var(--gut); color: var(--fg); transition: color var(--rapido) var(--salida), padding var(--rapido) var(--salida), background var(--rapido) var(--salida);
}
.nav.solida { background: var(--bg); padding-block: 12px; box-shadow: 0 2px 0 color-mix(in srgb, var(--fg) 14%, transparent); }
.nav__logo { font: 400 1.6rem/1 var(--display); text-decoration: none; letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: .4em; }
.nav__logo span { font-size: .55em; opacity: .7; }
.nav__links { display: flex; gap: 6px; }
.nav__links a { font: 700 .82rem/1 var(--sans); font-variation-settings: 'wdth' 110; text-transform: uppercase; text-decoration: none; padding: .7em 1em; border-radius: 999px; transition: background var(--rapido) var(--salida), color var(--rapido) var(--salida), transform var(--rapido) var(--rebote); }
.nav__links a:hover { background: var(--fg); color: var(--bg); transform: rotate(-3deg); }
.nav__abierto { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* ── THE WHEEL ───────────────────────────── */
.rueda { position: relative; height: 940vh; }
.rueda__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; color: var(--fg); }
.rueda__jp {
  position: absolute; z-index: 1; left: calc(var(--gut) * .8); top: 50%; translate: 0 -50%; margin: 0;
  writing-mode: vertical-rl; font: 400 clamp(2.4rem, 6.4vh, 4.6rem)/1 var(--display); letter-spacing: .06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--fg); opacity: .7;
}
.palabras { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.palabra {
  position: absolute; left: 50%; top: 50%; width: max-content; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 20vw; line-height: .82; letter-spacing: -.035em;
  transform: translate3d(-50%, calc(-50% + var(--y, 0) * 1%), 0); opacity: var(--o, 0); color: var(--fg);
}
.bols { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bol { position: absolute; left: 50%; top: 52%; width: var(--bw); }
.bol img { width: 100%; filter: drop-shadow(22px 28px 0 rgba(27, 19, 16, .22)); }
.bol { --bw: min(72vh, 50vw); transform: translate3d(-50%, -50%, 0); opacity: 0; will-change: transform; }
.vapor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; mix-blend-mode: screen; }
.toppings { position: absolute; inset: 0; pointer-events: none; }
.top { position: absolute; left: 50%; top: 50%; will-change: transform; }
.top[data-t='0'] { width: clamp(90px, 11vw, 190px); z-index: 5; filter: drop-shadow(14px 18px 0 rgba(27, 19, 16, .2)); }
.top[data-t='1'] { width: clamp(120px, 15vw, 260px); z-index: 5; filter: drop-shadow(16px 20px 0 rgba(27, 19, 16, .2)); }
.top[data-t='2'] { width: clamp(150px, 19vw, 330px); z-index: 6; filter: drop-shadow(18px 24px 0 rgba(27, 19, 16, .2)); }
.top[data-t='3'] { width: clamp(60px, 7vw, 120px); z-index: 2; filter: drop-shadow(8px 10px 0 rgba(27, 19, 16, .18)); }
.top[data-t='4'] { width: clamp(26px, 2.6vw, 44px); z-index: 2; filter: drop-shadow(8px 10px 0 rgba(27, 19, 16, .18)); }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the nav prints in ink while you stand in front of the poster */
.cartel .nav { --fg: #1b1310; --bg: #fff0da; color: #1b1310; }

/* ── THE POSTER: a Japanese gig poster, screen-printed layer by layer; its red sun becomes the room ───────────────────────────── */
.zp { position: absolute; inset: 0; pointer-events: none; --mx: 0; --my: 0; --hk: 0; }
.zp--fondo { z-index: 0; }
.zp--frente { z-index: 8; }
.zp--frente > * { pointer-events: auto; }
.zp__l { translate: calc(var(--mx) * var(--z, 0) * 1px) calc(var(--my) * var(--z, 0) * 1px); }
.zp__papel { position: absolute; inset: 0; background: #fff0da; opacity: calc(1 - var(--hk) * 1.6); }
.zp__papel::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* colour layers */
.zp__amarillo { position: absolute; left: 44vw; top: 55vh; width: 15vw; height: 27vh; background-color: #f6c22f;
  background-image: radial-gradient(rgba(27, 19, 16, .85) 22%, transparent 24%); background-size: 11px 11px;
  transform: translate3d(calc(var(--hk) * -30vw), calc(var(--hk) * 50vh), 0) rotate(calc(var(--hk) * -20deg)); }
.zp__rosa { position: absolute; right: 2.4vw; top: 16vh; width: 1.1vw; height: 58vh; background: #f3a3be; transform: translate3d(0, calc(var(--hk) * -90vh), 0); }
.zp__circulo { position: absolute; left: 0; top: 0; width: var(--D, 600px); height: var(--D, 600px); margin: calc(var(--D, 600px) / -2) 0 0 calc(var(--D, 600px) / -2);
  transform: translate3d(var(--cx, 64vw), var(--cy, 47vh), 0) scale(var(--cs, 1)); will-change: transform; }
.zp__circulo i { position: absolute; inset: 0; border-radius: 50%; background: #e8401f; }
.zp__kana { position: absolute; right: 4.6vw; top: 9vh; margin: 0; writing-mode: vertical-rl; font: 400 min(17vh, 11vw)/1 var(--display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px #1b1310; opacity: calc(.55 - var(--hk)); transform: translate3d(0, calc(var(--hk) * -120vh), 0); }
/* ink layers */
.zp__tira { position: absolute; left: var(--gut); right: var(--gut); top: 84px; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #1b1310;
  color: #1b1310; font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: calc(1 - var(--hk) * 2.4); transform: translate3d(0, calc(var(--hk) * -12vh), 0); }
.zp__tira span:first-child { font: 400 .9rem/1 var(--display); }
.zp__barra { position: absolute; left: var(--gut); top: calc(84px + 3.6vh); width: min(5.4vw, 86px); height: 47vh; background: #2747c9; color: #fff0da; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0 18px;
  transform: translate3d(0, calc(var(--hk) * -110vh), 0); }
.zp__barra b { writing-mode: vertical-rl; font: 400 min(2.3vw, 2.2rem)/1 var(--display); letter-spacing: .14em; }
.zp__barra i { width: 14px; height: 14px; border-radius: 50%; background: #fff0da; }
.zp__txt { position: absolute; left: calc(var(--gut) + min(5.4vw, 86px) + 2.4vw); top: calc(84px + 3.6vh); width: min(27vw, 420px); color: #1b1310;
  opacity: calc(1 - var(--hk) * 2.2); transform: translate3d(0, calc(var(--hk) * -30vh), 0); }
.zp__lema { margin: 0 0 1.4rem; font: 400 min(4.6vw, 8.6vh)/.88 var(--display); letter-spacing: -.035em; }
.zp__lede { margin: 0 0 1.6rem; max-width: 22em; font: 500 clamp(.98rem, 1.1vw, 1.15rem)/1.42 var(--sans); }
.zp__cta { --b: #1b1310; --t: #fff0da; }
.zp__marca { position: absolute; left: calc(var(--gut) - .04em); bottom: 11vh; margin: 0; font: 400 min(19.5vw, 36vh)/.74 var(--display); letter-spacing: -.045em; color: #1b1310;
  mix-blend-mode: multiply; white-space: nowrap; opacity: calc(1 - var(--hk) * 1.8); transform: translate3d(calc(var(--hk) * -20vw), calc(var(--hk) * -70vh), 0) scale(calc(1 + var(--hk) * .25)); transform-origin: 0 100%; }
.zp__hanko { position: absolute; left: 39vw; bottom: 31vh; width: min(5.6vw, 92px); aspect-ratio: 1; display: grid; place-items: center; text-align: center; background: #e8401f; color: #fff0da; border-radius: 6px;
  font: 400 min(1.1vw, 1.05rem)/1.05 var(--display); rotate: -8deg; box-shadow: inset 0 0 0 3px rgba(255, 240, 218, .55); opacity: calc(1 - var(--hk) * 2); }
.zp__pie { position: absolute; left: var(--gut); right: var(--gut); bottom: 3.6vh; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 12px; border-top: 2px solid #1b1310;
  color: #1b1310; font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: calc(1 - var(--hk) * 2.4); }
.zp__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.zp__menu b { font-weight: 600; margin-right: 6px; opacity: .55; }
.zp__colores { display: flex; gap: 4px; }
.zp__colores i { width: 18px; height: 18px; background: var(--c); }
.zp__scroll { margin: 0; }
.zp__reg { position: absolute; width: 22px; height: 22px; opacity: calc(.7 - var(--hk) * 2); }
.zp__reg svg { width: 100%; height: 100%; fill: none; stroke: #1b1310; stroke-width: 1.5; }
.zp__reg--a { left: calc(var(--gut) * .3); top: 76px; } .zp__reg--b { right: calc(var(--gut) * .3); top: 76px; }
.zp__reg--c { left: calc(var(--gut) * .3); bottom: 2vh; } .zp__reg--d { right: calc(var(--gut) * .3); bottom: 2vh; }
/* the print run: each colour is pulled across the screen in turn */
.js .zp__l, .js .zp__circulo i { clip-path: inset(0 100% 0 0); }
.listo .zp__l, .listo .zp__circulo i { clip-path: inset(0 -2% 0 0); transition: clip-path .85s var(--estandar) var(--d, 0s); }
.listo .zp__circulo i { transition-delay: .45s; }
.hero__cue { white-space: nowrap; }
.hero__cue { white-space: nowrap; }
.hero__cue { margin: 0; display: flex; align-items: center; gap: 12px; font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.hero__cue i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--fg); position: relative; }
.hero__cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--fg); animation: rueda 1.8s var(--estandar) infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

.fichas { list-style: none; margin: 0; padding: 0; }
.ficha {
  position: absolute; z-index: 9; left: var(--gut); bottom: 5vh; width: min(30vw, 420px);
  opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 26px), 0); pointer-events: none;
}
.ficha.on { pointer-events: auto; }
.ficha__num { margin: 0 0 .6rem; display: flex; gap: 14px; align-items: baseline; font: 600 .78rem/1 var(--mono); }
.ficha__num span { font: 400 1.05rem/1 var(--display); }
.ficha__t { margin: 0 0 .7rem; font: 400 clamp(2.4rem, 4vw, 4rem)/.9 var(--display); letter-spacing: -.02em; }
.ficha__d { margin: 0 0 1.2rem; font-weight: 500; max-width: 24em; }
.ficha__pie { margin: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ficha__precio { font: 400 1.7rem/1 var(--display); }
.picante { display: inline-flex; gap: 3px; }
.picante::before { content: '●●●●●'; font-size: .7rem; letter-spacing: 3px; background: linear-gradient(90deg, var(--fg) calc(var(--n) * 20%), color-mix(in srgb, var(--fg) 25%, transparent) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rueda__cuenta { position: absolute; z-index: 9; right: var(--gut); top: 96px; margin: 0; font: 600 .78rem/1 var(--mono); letter-spacing: .1em; opacity: calc(1 - var(--h, 1)); }
.rueda__cuenta b { font: 400 2.2rem/1 var(--display); margin-right: 6px; }
.rueda__puntos { position: absolute; z-index: 7; right: var(--gut); bottom: 5vh; display: flex; gap: 8px; opacity: calc(1 - var(--h, 1)); }
.rueda__puntos i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--fg); transition: background var(--rapido) var(--salida), transform var(--rapido) var(--rebote); }
.rueda__puntos i.on { background: var(--fg); transform: scale(1.3); }

/* ── coloured layers: each room slides over the last with a bowl-rim edge that flattens ───────────────────────────── */
[data-piel='crema'] { --bg: #fff0da; --fg: #1b1310; --acc: #e8401f; }
[data-piel='azul'] { --bg: #2747c9; --fg: #fff0da; --acc: #f6c22f; }
[data-piel='amarillo'] { --bg: #f6c22f; --fg: #1b1310; --acc: #e8401f; }
[data-piel='rosa'] { --bg: #f3a3be; --fg: #1b1310; --acc: #e8401f; }
[data-piel='rojo'] { --bg: #e8401f; --fg: #fff0da; --acc: #f6c22f; }
[data-piel='verde'] { --bg: #1f6b45; --fg: #fff0da; --acc: #f6c22f; }
.rueda__pin { background: var(--bg); }
.capa { --borde: clamp(56px, 10vw, 190px); position: relative; background: var(--bg); color: var(--fg); margin-top: calc(var(--borde) * -1); border-radius: 50% 50% 0 0 / var(--borde) var(--borde) 0 0; }
.sorbo, .caldo, .gacha, .barra, .visita { padding-bottom: calc(12vh + var(--borde)) !important; }
.capa::after { content: ''; position: absolute; left: 50%; top: calc(var(--borde) * .32); width: 64px; height: 6px; margin-left: -32px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 22%, transparent); }

/* ── MANIFESTO ───────────────────────────── */
.sorbo { padding: calc(var(--borde) + 6vh) var(--gut) 14vh; overflow: hidden; min-height: 100vh; }
.sorbo__t { position: relative; margin: 0; font: 400 min(11vw, 17.5vh)/.86 var(--display); letter-spacing: -.035em; display: grid; }
.sorbo__l { display: block; position: relative; }
.sorbo__l--atras { z-index: 1; }
.sorbo__l--delante { z-index: 3; }
.sorbo__l:nth-child(2) { padding-left: 14vw; }
.sorbo__l:nth-child(3) { padding-left: 4vw; }
.sorbo__l:nth-child(4) { padding-left: 8vw; }
.sorbo__t em { font-style: normal; color: var(--acc); }
.sorbo__fideos { position: absolute; z-index: 2; left: 50%; top: calc(var(--borde) * .5); width: min(30vw, 50vh); transform-origin: 50% 4%; rotate: var(--giro, 0deg); }
.sorbo__fideos img { width: 100%; filter: drop-shadow(18px 22px 0 rgba(27, 19, 16, .16)); }
.sorbo__pie { position: relative; z-index: 3; display: flex; gap: 4vw; align-items: center; margin: 6vh 0 0 auto; max-width: 640px; }
.sorbo__pie p { margin: 0; font: 500 clamp(1.15rem, 1.6vw, 1.5rem)/1.4 var(--sans); }
.sorbo__pie strong { font-weight: 900; }
.sorbo__huevo { width: min(130px, 14vh); flex: none; rotate: 14deg; animation: gira 18s linear infinite; filter: drop-shadow(10px 12px 0 rgba(27, 19, 16, .16)); }
@keyframes gira { to { rotate: 374deg; } }
.sello-giro { position: absolute; z-index: 4; right: 6vw; top: calc(var(--borde) + 4vh); width: min(190px, 22vh); aspect-ratio: 1; animation: gira 22s linear infinite; }
.sello-giro text { font: 400 13.5px var(--display); letter-spacing: 2.6px; fill: var(--fg); }
.sello-giro circle { fill: var(--acc); }
.sello-giro .kj { font: 400 34px var(--display); fill: var(--crema); letter-spacing: 0; }

/* ── BROTH ───────────────────────────── */
.caldo { padding: calc(var(--borde) + 4vh) var(--gut) 10vh; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3vw; align-items: center; }
.caldo__txt { position: relative; z-index: 3; }
.caldo__t { margin: 0; font: 400 min(6.6vw, 11.5vh)/.88 var(--display); letter-spacing: -.03em; }
.caldo__lede { margin: 2rem 0 0; max-width: 25em; font: 500 1.15rem/1.45 var(--sans); }
.caldo__fig { position: relative; width: min(84vh, 52vw); aspect-ratio: 1; justify-self: center; margin: 0; }
.caldo__num { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; z-index: 0; }
.caldo__num span { font: 400 min(66vh, 41vw)/.8 var(--display); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--fg) 40%, transparent); }
.caldo__bol { position: absolute; z-index: 2; left: 50%; top: 50%; width: 56%; translate: -50% -50%; rotate: var(--g, 0deg); filter: drop-shadow(22px 28px 0 rgba(10, 16, 60, .4)); }
.caldo__extra { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 3); rotate: var(--r, 0deg); filter: drop-shadow(12px 16px 0 rgba(10, 16, 60, .35)); }
.caldo__lineas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.caldo__lineas path { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.caldo__notas { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 4; }
.caldo__notas li { position: absolute; left: var(--x); top: var(--y); width: 23%; font: 500 .92rem/1.32 var(--sans); translate: 14px -50%; }
.caldo__notas li.izq { translate: calc(-100% - 14px) -50%; text-align: right; }
.caldo__notas li.abajo { translate: -50% 14px; text-align: center; width: 30%; }
.caldo__notas li::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); left: -19px; top: 50%; margin-top: -5px; }
.caldo__notas li.izq::before { left: auto; right: -19px; }
.caldo__notas li.abajo::before { left: 50%; top: -19px; margin: 0 0 0 -5px; }
.caldo__notas b { display: block; font: 400 1.35rem/1.1 var(--display); color: var(--acc); }
.caldo__cifras { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 3vw; margin: 6vh 0 0; border-top: 2px solid var(--fg); padding-top: 22px; }
.caldo__cifras dt { font: 600 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.caldo__cifras dd { margin: 10px 0 0; font: 400 min(5vw, 9vh)/.9 var(--display); letter-spacing: -.03em; }

/* ── THE BOWL MACHINE: turn the handle, a capsule drops, it opens into a poster ───────────────────────────── */
.gacha { padding: calc(var(--borde) + 2vh) var(--gut) 12vh; min-height: 100vh; overflow: clip; display: grid; align-items: center;
  background-image: radial-gradient(rgba(27, 19, 16, .09) 1.4px, transparent 1.6px); background-size: 14px 14px; }
.gacha__cab { position: relative; z-index: 2; align-self: start; margin-top: 4vh; }
.gacha__t { margin: 0 0 1.6rem; font: 400 min(4.4vw, 8.4vh)/.88 var(--display); letter-spacing: -.04em; }
.gacha__sub { margin: 0; max-width: 16em; font: 500 clamp(1.05rem, 1.3vw, 1.35rem)/1.35 var(--sans); }
.gacha__escena { position: relative; display: grid; grid-template-columns: minmax(0, 3.3fr) auto minmax(0, 4.6fr); gap: 3.4vw; align-items: center; }

/* the machine: one SVG, drawn like the poster — ink outline, flat colour, a hard shadow */
.gacha__maquina { position: relative; width: min(28vw, 46vh, 470px); justify-self: center; }
.maq { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(12px 14px 0 rgba(27, 19, 16, .92)); }
.maq__rotulo { font: 400 28px var(--display); letter-spacing: 1.5px; }
.maq__mini { font: 600 10.5px var(--mono); letter-spacing: 2.2px; fill: #fff0da; }
.maq__mini--k { font: 400 13px var(--display); letter-spacing: 2px; }
.maq__mini--s { font-size: 7.5px; fill: #1b1310; letter-spacing: 1.6px; }
.maq__sello { font: 400 19px var(--display); fill: #1b1310; }
.gacha__cupula { cursor: pointer; }
.bola { transform-box: fill-box; transform-origin: center; }
.bola__giro { transform-box: fill-box; transform-origin: center; rotate: var(--r); }
.gacha__maquina.gira .bola { animation: agita .95s var(--estandar); animation-delay: calc(var(--i) * 16ms); }
.gacha__maquina.gira .bola__giro { animation: agita-g .95s var(--estandar); animation-delay: calc(var(--i) * 16ms); }
@keyframes agita { 18% { translate: var(--ax, 8px) -22px; } 42% { translate: calc(var(--ax, 8px) * -1) 8px; } 68% { translate: 4px -9px; } }
@keyframes agita-g { 30% { rotate: calc(var(--r) + 120deg); } 65% { rotate: calc(var(--r) - 40deg); } }
.gacha__tapa { transform-box: fill-box; transform-origin: 50% 0; transition: scale .3s var(--rebote); }
.gacha__maquina.suelta .gacha__tapa { scale: 1 .18; }
/* the dial: everything about it says "turn me" */
.dial__anillo { transform-box: view-box; transform-origin: 140px 548px; animation: gira-a 16s linear infinite; }
.dial__anillo text { font: 400 13.5px var(--display); letter-spacing: 3px; fill: #fff0da; }
@keyframes gira-a { to { rotate: 360deg; } }
.dial__pulso { transform-box: fill-box; transform-origin: center; animation: pulso-d 2s var(--salida) infinite; }
@keyframes pulso-d { from { scale: 1; opacity: .9; } to { scale: 1.55; opacity: 0; } }
.dial__plato { transform-box: fill-box; transform-origin: center; transition: scale var(--rapido) var(--rebote); }
.dial__barra { transform-box: fill-box; transform-origin: center; transition: rotate 1s cubic-bezier(.5, 0, .2, 1.35); }
.gacha__maquina:not(.usada) .dial__barra { animation: tienta 3.4s var(--estandar) infinite 1.2s; }
@keyframes tienta { 0%, 76%, 100% { rotate: 0deg; } 84% { rotate: -38deg; } 92% { rotate: 14deg; } }
.dial__flecha { transform-box: view-box; transform-origin: 140px 548px; transition: opacity .4s; }
.gacha__maquina:not(.usada) .dial__flecha { animation: tienta-f 3.4s var(--estandar) infinite 1.2s; }
@keyframes tienta-f { 0%, 76%, 100% { rotate: 0deg; } 84% { rotate: -16deg; } 92% { rotate: 6deg; } }
.gacha__mango { position: absolute; left: 18%; top: 63.5%; width: 34%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.gacha__mango:focus-visible { outline: 3px solid #1b1310; outline-offset: 4px; }
.gacha__maquina:has(.gacha__mango:hover) .dial__plato { scale: 1.07; }
.gacha__maquina:has(.gacha__mango:active) .dial__plato { scale: .95; }
.gacha__maquina:has(.gacha__mango:hover) .dial__barra { rotate: -24deg; }
.gacha__pista { position: absolute; right: 88%; top: 71%; margin: 0; display: flex; align-items: flex-start; gap: 4px; color: #1b1310; pointer-events: none;
  font: 400 clamp(.95rem, 1.2vw, 1.3rem)/1.05 var(--display); text-align: right; white-space: nowrap; transition: opacity .5s var(--salida), translate .5s var(--salida); }
.gacha__pista span { padding: .5em .7em; background: #fff0da; border: 3px solid #1b1310; border-radius: 12px; box-shadow: 6px 7px 0 #1b1310; rotate: -4deg; }
.gacha__pista svg { width: clamp(70px, 6.5vw, 120px); margin-top: 1.2em; }
.gacha__maquina:not(.usada) .gacha__pista { animation: invita-p 1.6s var(--estandar) infinite; }
@keyframes invita-p { 50% { translate: 8px 4px; } }
.gacha__maquina.usada .gacha__pista { opacity: 0; translate: -12px 0; }

/* the capsule in flight */
.capsula { position: absolute; z-index: 6; left: 0; top: 0; width: var(--cw, 110px); aspect-ratio: 1; pointer-events: none; opacity: 0;
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0) rotate(var(--cr, 0deg)) scale(var(--cs, 1)); }
.capsula i { position: absolute; left: 0; right: 0; height: 50%; border: 4px solid #1b1310; filter: drop-shadow(8px 10px 0 rgba(27, 19, 16, .35)); transition: transform .55s var(--rebote), opacity .4s; }
.capsula__a { top: 0; border-radius: 999px 999px 0 0; background: var(--cc, #e8401f); border-bottom-width: 2px !important; }
.capsula__b { bottom: 0; border-radius: 0 0 999px 999px; background: #fff6e6; border-top-width: 2px !important; }
.capsula.abre .capsula__a { transform: translate(-30%, -120%) rotate(-38deg); opacity: 0; }
.capsula.abre .capsula__b { transform: translate(30%, 120%) rotate(30deg); opacity: 0; }

/* the result poster */
.gacha__cartel { position: relative; height: min(72vh, 720px); border: 3px solid #1b1310; background: #fff0da; overflow: hidden; display: grid; box-shadow: 14px 16px 0 #1b1310; }
.gacha__cartel .zp__reg { opacity: .6; }
.gacha__cartel .zp__reg--a { left: 10px; top: 10px; } .gacha__cartel .zp__reg--d { right: 10px; bottom: 10px; }
.gacha__vacio, .gacha__res { grid-area: 1 / 1; }
.gacha__vacio { display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; transition: opacity .3s; }
.gacha__q { margin: 0; font: 400 min(30vh, 18vw)/.9 var(--display); color: transparent; -webkit-text-stroke: 2px #1b1310; animation: late 2.4s var(--estandar) infinite; }
@keyframes late { 50% { transform: scale(1.05) rotate(4deg); } }
.gacha__vacio .mono { margin: 0; font-size: .72rem; letter-spacing: .12em; }
.gacha__res { position: absolute; inset: 0; padding: clamp(22px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; gap: 0 3vw;
  background: var(--rc, #e8401f); color: var(--rt, #fff0da); clip-path: inset(0 100% 0 0); visibility: hidden; }
.gacha__res::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(27, 19, 16, .16) 1.6px, transparent 1.8px); background-size: 12px 12px; pointer-events: none; }
.gacha__cartel.lleno .gacha__vacio { opacity: 0; }
.gacha__cartel.lleno .gacha__res { visibility: visible; clip-path: inset(0 -2% 0 0); transition: clip-path .75s var(--estandar); }
.gacha__kanji { position: absolute; right: -2%; top: -6%; margin: 0; writing-mode: vertical-rl; font: 400 min(42vh, 22vw)/1 var(--display); color: transparent; -webkit-text-stroke: 2px currentColor; opacity: .3; pointer-events: none; }
.gacha__eres { grid-column: 1 / -1; margin: 0 0 .4rem; position: relative; }
.gacha__nombre { grid-column: 1 / -1; position: relative; z-index: 2; margin: 0; font: 400 min(8vw, 15vh)/.82 var(--display); letter-spacing: -.045em; text-transform: uppercase; mix-blend-mode: multiply; color: #1b1310; }
.gacha__res[data-claro] .gacha__nombre { mix-blend-mode: normal; color: var(--rt); }
.gacha__bol { grid-column: 2; grid-row: 3 / 6; align-self: center; justify-self: center; width: min(100%, 44vh); position: relative; z-index: 1; filter: drop-shadow(16px 20px 0 rgba(27, 19, 16, .3)); }
.gacha__cartel.lleno .gacha__bol { animation: cae .9s var(--rebote) .35s both; }
@keyframes cae { from { transform: translateY(-40%) rotate(-120deg) scale(.6); opacity: 0; } }
.gacha__frase { grid-column: 1; grid-row: 3; align-self: end; position: relative; margin: 0 0 1rem; font: 400 min(2vw, 3.3vh)/1.08 var(--display); letter-spacing: -.01em; }
.gacha__plato { grid-column: 1; grid-row: 4; position: relative; margin: 0 0 1.4rem; font-size: .72rem; line-height: 1.6; letter-spacing: .06em; max-width: 30em; opacity: .9; }
.gacha__acc { grid-column: 1; grid-row: 5; position: relative; }
.gacha__acc .boton { --b: #1b1310; --t: #fff0da; }
.gacha__cartel.lleno .gacha__frase, .gacha__cartel.lleno .gacha__plato, .gacha__cartel.lleno .gacha__acc, .gacha__cartel.lleno .gacha__eres { animation: entra-r .7s var(--salida) both; }
.gacha__cartel.lleno .gacha__frase { animation-delay: .45s; } .gacha__cartel.lleno .gacha__plato { animation-delay: .55s; } .gacha__cartel.lleno .gacha__acc { animation-delay: .65s; }
@keyframes entra-r { from { opacity: 0; transform: translateY(18px); } }

/* ── THE MENU: a metro map; the scroll drives the train, the board says where you are ───────────────────────────── */
.metro { --lc: #e8401f; --lt: #fff0da; height: 760vh; padding-bottom: var(--borde); }
.metro__pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 520px); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 3.4vw; padding: max(84px, 10vh) var(--gut) 3.4vh; overflow: hidden; }
.metro__cab { grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
.metro__t { margin: 0 0 .9rem; font: 400 min(4.3vw, 7.6vh)/.9 var(--display); letter-spacing: -.035em; }
.metro__sub { margin: 0; max-width: 22em; font: 500 clamp(.92rem, 1vw, 1.08rem)/1.4 var(--sans); }
.metro__mapa { grid-column: 1; grid-row: 1 / 3; position: relative; min-height: 0; }
.metro__mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.metro__leyenda { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2vh 0 0; padding: 0; list-style: none; }
.metro__leyenda button { display: inline-flex; align-items: center; gap: .55em; padding: .55em .95em .55em .55em; border: 2px solid var(--tinta); border-radius: 999px; background: #fffaf2;
  font: 600 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform var(--rapido) var(--rebote), box-shadow var(--rapido) var(--rebote); }
.metro__leyenda button:hover { transform: translate(-2px, -2px) rotate(-2deg); box-shadow: 4px 4px 0 var(--tinta); }
.metro__leyenda b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: var(--t); font: 800 .7rem/1 var(--sans); }

/* the map itself (SVG drawn by main.js) */
.m-calles { stroke: rgba(27, 19, 16, .075); stroke-width: 1.2; fill: none; }
.m-parque { fill: rgba(31, 107, 69, .1); }
.m-agua { fill: rgba(39, 71, 201, .1); }
.m-zona { font: 600 9px/1 var(--mono); letter-spacing: .3em; fill: rgba(27, 19, 16, .32); }
.m-sombra { stroke: rgba(27, 19, 16, .16); fill: none; stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; }
.m-borde { stroke: var(--tinta); fill: none; stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; }
.m-fondo { stroke: color-mix(in srgb, var(--c) 26%, #fffaf2); fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.m-color { fill: none; stroke-width: 10.5; stroke-linecap: round; stroke-linejoin: round; }
.m-paso { fill: #fffaf2; stroke: var(--tinta); stroke-width: 4; }
.m-est { cursor: pointer; }
.m-est .m-toque { fill: transparent; stroke: none; }
.m-est circle:not(.m-toque) { fill: #fffaf2; stroke: var(--tinta); stroke-width: 4; transition: r var(--rapido) var(--rebote); }
.m-est:hover circle:not(.m-toque):not(.m-anillo) { r: 13; }
.m-est:focus-visible { outline: none; }
.m-est circle.m-anillo { fill: none; stroke: var(--c); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m-est.aqui .m-anillo { animation: m-pulso 1.6s var(--salida) infinite; }
@keyframes m-pulso { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.6; } }
.m-nombre { font: 800 17px/1 var(--sans); font-variation-settings: 'wdth' 112; letter-spacing: .01em; text-transform: uppercase; fill: var(--tinta);
  paint-order: stroke; stroke: #fff0da; stroke-width: 6px; stroke-linejoin: round; }
.m-kana { font: 400 13.5px/1 var(--display); fill: rgba(27, 19, 16, .7); paint-order: stroke; stroke: #fff0da; stroke-width: 5px; stroke-linejoin: round; }
.m-est:hover .m-nombre, .m-est.aqui .m-nombre { font-size: 20px; }
.m-sombra, .m-borde, .m-fondo { stroke-dasharray: 1 1; }
.m-peg { pointer-events: none; }
.m-peg__in { transform-box: fill-box; transform-origin: center; scale: 0; rotate: calc(var(--r) - 40deg); transition: scale .5s var(--rebote), rotate .5s var(--rebote); }
.m-peg.vista .m-peg__in { scale: 1; rotate: var(--r); }
.m-peg.aqui .m-peg__in { scale: 1.16; }
.m-tren { pointer-events: none; }
.m-tren__cuerpo { fill: var(--tc, #e8401f); stroke: var(--tinta); stroke-width: 3.5; transition: fill .4s var(--salida); }
.m-tren__ventana { fill: #fff0da; }
.m-tren__sombra { fill: rgba(27, 19, 16, .22); }
.m-sol circle { fill: #e8401f; stroke: var(--tinta); stroke-width: 4; }
.m-sol text { fill: #fff0da; text-anchor: middle; }
.m-sol .m-sol__marca { font: 400 46px/1 var(--display); letter-spacing: -.03em; }
.m-sol .m-sol__kana { font: 400 15px/1 var(--display); opacity: .85; }
.m-sol .m-sol__dir { font: 600 8.5px/1 var(--mono); letter-spacing: .18em; }
.m-sol { transition: scale .6s var(--rebote); transform-box: view-box; transform-origin: 0 0; }
.m-sol.llega { scale: 1.08; }
.m-sol.llega .m-sol__rayos { animation-duration: 8s; }
.m-sol__rayos { stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: m-gira 60s linear infinite; }
@keyframes m-gira { to { rotate: 360deg; } }
.m-nota { font: 600 8.5px/1.3 var(--mono); letter-spacing: .14em; fill: rgba(27, 19, 16, .55); }

/* the board: a Japanese station sign, with the dish stuck on top */
.tablero { grid-column: 2; grid-row: 2 / 4; align-self: end; position: relative; z-index: 3; padding-top: min(15vw, 23vh); }
.tablero__foto { position: absolute; right: -1vw; top: 0; height: min(19vw, 30vh); width: auto; max-width: 58%; object-fit: contain; rotate: 6deg; transform-origin: 50% 90%;
  filter: drop-shadow(10px 12px 0 rgba(27, 19, 16, .9)); pointer-events: none; }
.tablero__foto.cae { animation: t-cae .7s var(--rebote); }
@keyframes t-cae { from { transform: translateY(-34%) rotate(-24deg) scale(.55); opacity: 0; } }
.tablero__estado { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.tablero__estado span:first-child { padding: .5em .8em; border-radius: 999px; background: var(--lc); color: var(--lt); transition: background .4s var(--salida), color .4s var(--salida); }
.tablero__estado.mueve span:first-child { animation: parpadea 1s steps(2) infinite; }
@keyframes parpadea { 50% { opacity: .55; } }
.tablero__cuenta { opacity: .6; }
.senal { position: relative; background: #fffaf2; color: var(--tinta); border: 3px solid var(--tinta); border-radius: 10px; box-shadow: 10px 12px 0 var(--tinta); overflow: hidden; }
.senal__cabeza { display: flex; align-items: center; gap: 14px; padding: 16px 18px 0; }
.senal__cod { flex: none; display: grid; place-items: center; align-content: center; width: 52px; height: 52px; border-radius: 50%; border: 6px solid var(--lc); background: #fffaf2; line-height: .9; transition: border-color .4s var(--salida); }
.senal__cod b { font: 800 .9rem/1 var(--sans); }
.senal__cod i { font: 600 .66rem/1 var(--mono); font-style: normal; }
.senal__kana { font: 400 min(2.3vw, 4.2vh)/1 var(--display); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.senal__nombre { margin: 0; padding: 8px 18px 14px; font: 400 min(4.1vw, 7.4vh)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; }
.senal__banda { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 18px; background: var(--lc); color: var(--lt); border-top: 3px solid var(--tinta);
  font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: background .4s var(--salida), color .4s var(--salida); }
.senal__banda span:empty::before { content: '—'; opacity: .5; }
.senal.cambia .senal__nombre, .senal.cambia .senal__kana { animation: imprime .55s var(--salida) both; }
.senal.cambia .senal__kana { animation-delay: .06s; }
@keyframes imprime { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0); } }
.tablero__desc { margin: 26px 0 8px; max-width: 26em; min-height: 2.8em; font: 500 clamp(.95rem, 1.05vw, 1.12rem)/1.4 var(--sans); }
.tablero__nota { margin: 0; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.tablero__cta { display: none; margin-top: 14px; }
.tablero.fin .tablero__nota { display: none; }
.tablero.fin .tablero__cta { display: inline-flex; animation: entra-r .5s var(--rebote); }

@media (min-width: 900px) and (max-height: 820px) {
  .metro__sub { display: none; }
  .tablero { padding-top: min(13vw, 21vh); }
  .tablero__foto { height: min(17vw, 27vh); }
}
/* tall screens: header on top, the map across, the board underneath */
@media (min-width: 900px) and (max-aspect-ratio: 1 / 1) {
  .metro__pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 2vh; }
  .metro__cab { grid-column: 1 / 3; grid-row: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 4vw; align-items: end; }
  .metro__cab .etiqueta { grid-column: 1 / 3; }
  .metro__t { font-size: 6.4vw; margin: 0; }
  .metro__mapa { grid-column: 1 / 3; grid-row: 2; }
  .tablero { grid-column: 2; grid-row: 3; padding-top: 0; }
  .tablero__foto { top: auto; bottom: 42%; right: calc(100% + 6vw); height: min(26vw, 17vh); max-width: none; }
  .metro__leyenda { grid-column: 1; grid-row: 3; align-self: end; }
}

.metro__mando { display: none; }
/* with JS the list becomes the map; without it, it's a plain menu */
.metro__lista { margin: 0; padding: 0 var(--gut) 10vh; list-style: none; columns: 2 22rem; column-gap: 4vw; }
.metro__lista li { break-inside: avoid; padding: 1.2rem 0; border-top: 2px solid currentColor; }
.metro__lista h3 { margin: 0 0 .4rem; font: 400 1.6rem/1 var(--display); }
.metro__lista p { margin: 0 0 .3rem; }
.js .metro__lista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .metro { height: auto; }
html:not(.js) .metro__pin { display: none; }

/* ── THE COUNTER: through the noren, into a scrapbook ───────────────────────────── */
.barra { height: 250vh; overflow: clip; }
.foto { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; padding: 10px 10px 40px; background: #fffdf6; rotate: var(--r, 0deg); box-shadow: 12px 14px 0 rgba(27, 19, 16, .22); }
.foto::before { content: ''; position: absolute; z-index: 2; left: 50%; top: -14px; width: 42%; height: 28px; margin-left: -21%; rotate: var(--rc, -4deg); background: var(--cinta, rgba(246, 194, 47, .78)); }
.foto[data-z='1'] { z-index: 1; }
.foto[data-z='3'] { z-index: 3; }
.foto img { width: 100%; }
.foto figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font: 600 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta); }
.barra__txt { position: sticky; top: 32vh; z-index: 2; text-align: center; padding: 0 var(--gut); margin-top: 72vh; pointer-events: none; }
.barra__t { margin: 0 auto; max-width: 54vw; font: 400 min(4.9vw, 9.5vh)/.94 var(--display); letter-spacing: -.035em; }
.barra__t em { font-style: normal; color: var(--acc); }
.pegote { position: absolute; z-index: 6; left: var(--x); top: var(--y); width: var(--s, 120px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 10px;
  background: var(--c, #f6c22f); color: var(--t, #1b1310); border: 3px solid var(--tinta); font: 400 .82rem/1.05 var(--display); rotate: var(--r, -10deg);
  box-shadow: 8px 10px 0 rgba(27, 19, 16, .25); cursor: grab; touch-action: none; user-select: none; transition: scale var(--rapido) var(--rebote), box-shadow var(--rapido) var(--rebote); }
.pegote:hover { scale: 1.06; }
.pegote.arrastra { cursor: grabbing; scale: 1.12; box-shadow: 16px 20px 0 rgba(27, 19, 16, .22); transition: none; }

/* ── VISIT: the address is a meal ticket ───────────────────────────── */
.visita { padding: calc(var(--borde) + 6vh) var(--gut) 12vh; min-height: 100vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.visita__ticket {
  grid-column: 1 / 8; grid-row: 1 / 3; position: relative; z-index: 2; background: #fffdf6; color: var(--tinta); padding: 5vh 3.4vw 6vh; rotate: -2deg;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 9px, #000 9.5px) top / 26px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 9px, #000 9.5px) bottom / 26px 51% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent 9px, #000 9.5px) top / 26px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 9px, #000 9.5px) bottom / 26px 51% repeat-x;
  filter: drop-shadow(14px 16px 0 rgba(27, 19, 16, .3));
}
.visita__ticket .etiqueta { display: flex; justify-content: space-between; border-bottom: 2px dashed rgba(27, 19, 16, .3); padding-bottom: 1rem; }
.visita__t { margin: 3vh 0 3vh; font: 400 min(6.6vw, 12vh)/.86 var(--display); letter-spacing: -.04em; }
.visita__t span { display: block; margin-top: 1.2rem; font: 600 .95rem/1 var(--mono); letter-spacing: .04em; }
.visita__botones { display: flex; gap: 14px; flex-wrap: wrap; }
.visita__ticket .boton { --b: var(--tinta); --t: #fffdf6; }
.visita__codigo { height: 34px; margin-top: 4vh; background: repeating-linear-gradient(90deg, var(--tinta) 0 3px, transparent 3px 6px, var(--tinta) 6px 7px, transparent 7px 12px, var(--tinta) 12px 16px, transparent 16px 18px); opacity: .85; }
.sello-tinta { position: absolute; right: 2.4vw; bottom: 3.4vh; width: min(150px, 18vh); aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--rojo); color: var(--rojo); display: grid; place-items: center; text-align: center; font: 400 .9rem/1.05 var(--display); rotate: 16deg; mix-blend-mode: multiply; opacity: .9; }
.sello-tinta::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid var(--rojo); }
.horario { grid-column: 9 / 13; grid-row: 2; margin: 0; font-weight: 600; }
.horario div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); transition: padding var(--rapido) var(--salida); }
.horario dt, .horario dd { margin: 0; }
.horario dd { font: 600 .78rem/1.6 var(--mono); text-align: right; }
.horario .hoy { padding-inline: 14px; background: var(--fg); color: var(--bg); border-radius: 10px; border-color: transparent; }
.visita__foto { grid-column: 9 / 13; grid-row: 1; justify-self: center; position: relative; width: min(16vw, 34vh); margin: 0 0 2vh; padding: 9px 9px 34px; background: #fffdf6; rotate: 5deg; z-index: 2; box-shadow: 14px 14px 0 rgba(27, 19, 16, .3); transition: rotate var(--rapido) var(--rebote); }
.visita__foto::before { content: ''; position: absolute; left: 50%; top: -14px; width: 46%; height: 26px; margin-left: -23%; rotate: 3deg; background: rgba(243, 163, 190, .85); }
.visita__foto:hover { rotate: -2deg; }
.pegatina { position: absolute; left: -46px; bottom: 34px; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--amarillo); color: var(--tinta); font: 400 .78rem/1.05 var(--display); rotate: -14deg; border: 3px solid var(--tinta); }

/* ── FOOTER ───────────────────────────── */
.pie { overflow: hidden; padding: calc(var(--borde) + 6vh) var(--gut) 24px; min-height: 86vh; display: grid; grid-template-rows: auto 1fr auto; }
.pie__fila, .pie__fin { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; font: 600 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.pie__fila p { margin: 0; }
.pie__fila a { text-decoration: none; border-bottom: 2px solid transparent; transition: border-color var(--rapido); }
.pie__fila a:hover { border-color: currentColor; }
.pie__marca { position: relative; z-index: 1; align-self: center; margin: 4vh 0 2vh; font: 400 min(31vw, 52vh)/.8 var(--display); letter-spacing: -.06em; text-align: center; color: var(--rojo); }
.pie__bol { position: absolute; z-index: 2; right: -5vw; bottom: -16vh; width: min(40vw, 70vh); animation: gira 60s linear infinite; filter: drop-shadow(18px 22px 0 rgba(27, 19, 16, .22)); }
.pie__extra { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r); filter: drop-shadow(12px 14px 0 rgba(27, 19, 16, .2)); }

/* ── entrance + scroll reveals ───────────────────────────── */
.js .intro { opacity: 0; transform: translateY(18px); }
.listo .intro { opacity: 1; transform: none; transition: opacity var(--lento) var(--salida) var(--d, 0s), transform var(--lento) var(--rebote) var(--d, 0s); }
@supports (animation-timeline: view()) {
  .capa { animation: aplana linear both; animation-timeline: view(); animation-range: entry 0% entry 95%; }
  @keyframes aplana { to { border-top-left-radius: 0 0; border-top-right-radius: 0 0; } }
  .caldo__lineas path { stroke-dashoffset: 1; animation: traza linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  .caldo__notas li, .caldo__cifras div, .horario div { animation: sube linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .sorbo__l { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .foto img { animation: crece linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  @keyframes traza { to { stroke-dashoffset: 0; } }
  @keyframes sube { from { opacity: 0; transform: translateY(34px); } }
  @keyframes entra { from { opacity: 0; transform: translateX(-8vw); } }
  @keyframes crece { from { clip-path: inset(18% 18% 18% 18% round 6px); } to { clip-path: inset(0 round 6px); } }
}

/* ── responsive ───────────────────────────── */
@media (max-width: 899px) {
  .nav { grid-template-columns: 1fr auto; padding-block: 14px; }
  .nav__links, .nav__abierto { display: none; }
  .rueda { height: 860vh; }
  .rueda__jp { display: none; }
  .bol { --bw: 82vw; top: 50%; }
  .palabra { top: 27%; }
  .zp__tira { top: 70px; font-size: .56rem; }
  .zp__tira span:nth-child(3), .zp__tira span:nth-child(5) { display: none; }
  .zp__barra { width: 9vw; top: 100px; height: 40vh; padding: 14px 0; }
  .zp__barra b { font-size: 4.6vw; }
  .zp__txt { left: calc(var(--gut) + 9vw + 4vw); top: 100px; width: auto; right: var(--gut); }
  .zp__lema { font-size: 10.4vw; margin-bottom: .9rem; }
  .zp__lede { font-size: .9rem; margin-bottom: 1rem; max-width: 17em; }
  .zp__cta { display: none; }
  .zp__marca { font-size: 26vw; bottom: 12vh; }
  .zp__hanko { left: auto; right: 6vw; bottom: 30vh; width: 50px; font-size: .62rem; }
  .zp__kana { font-size: 13vw; right: 2vw; top: 46vh; }
  .zp__amarillo { left: 6vw; top: 60vh; width: 30vw; height: 14vh; }
  .zp__rosa { display: none; }
  .zp__menu, .zp__colores { display: none; }
  .ficha { left: var(--gut); right: var(--gut); width: auto; bottom: 3.5vh; }
  .ficha__t { font-size: 2.3rem; }
  .ficha__d { font-size: .95rem; margin-bottom: .9rem; }
  .ficha__precio { font-size: 1.4rem; }
  .rueda__cuenta { top: 76px; }
  .rueda__cuenta b { font-size: 1.4rem; margin: 0 4px 0 0; }
  .rueda__puntos { display: none; }
  .sorbo__fideos { width: 52vw; left: 44%; }
  .sello-giro { width: 110px; right: 3vw; top: calc(var(--borde) + 1vh); }
  .sorbo__l:nth-child(2) { padding-left: 8vw; }
  .sorbo__l:nth-child(4) { padding-left: 0; }
  .sorbo__t { font-size: 10.6vw; }
  .sorbo__pie { margin-top: 6vh; }
  .sorbo__huevo { width: 84px; }
  .caldo { display: block; }
  .caldo__t { font-size: 13vw; }
  .caldo__fig { width: 100%; margin-top: 4vh; aspect-ratio: auto; padding-top: 92vw; }
  .caldo__num { bottom: auto; height: 92vw; }
  .caldo__num span { font-size: 70vw; }
  .caldo__bol { width: 72%; top: 46vw; }
  .caldo__extra { display: none; }
  .caldo__notas { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 4vh; }
  .caldo__notas li, .caldo__notas li.izq, .caldo__notas li.abajo { position: static; translate: none; width: auto; text-align: left; font-size: .9rem; }
  .caldo__notas li::before { display: none; }
  .caldo__lineas { display: none; }
  .caldo__cifras { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .caldo__cifras dd { font-size: 12vw; }
  .barra { height: 270vh; }
  .gacha__t { font-size: 12vw; }
  .gacha__sub { text-align: left; }
  .gacha__escena { grid-template-columns: 1fr; gap: 5vh; }
  .gacha__cartel { height: auto; min-height: 0 !important; }
  .gacha__vacio { min-height: 90vw; }
  .gacha__res { position: relative; inset: auto; }
  .gacha__maquina { width: 54vw; justify-self: start; margin-left: 2vw; }
  .gacha__pista { right: auto; left: calc(100% - 4px); top: 66%; flex-direction: row-reverse; text-align: left; gap: 0; }
  .gacha__pista svg { transform: scaleX(-1); width: 42px; margin-top: .6em; }
  .gacha__pista span { font-size: .78rem; padding: .45em .55em; }
  .gacha__t { margin-bottom: 1rem; }
  .gacha__cartel { min-height: 118vw; }
  .gacha__res { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto auto; }
  .gacha__nombre { font-size: 14.5vw; }
  .gacha__bol { grid-column: 1; grid-row: 3; width: 62vw; margin: 2vh 0; }
  .gacha__frase { grid-column: 1; grid-row: 4; font-size: 5vw; }
  .gacha__plato { grid-row: 5; }
  .gacha__acc { grid-row: 6; }
  .gacha__kanji { font-size: 60vw; }
  .metro { height: auto; padding-bottom: calc(var(--borde) + 4vh); }
  .metro__pin { position: relative; height: auto; display: flex; flex-direction: column; padding: 0 0 2vh; overflow: visible; }
  .metro__cab { padding: calc(var(--borde) * .55) var(--gut) 1vh; }
  .metro__t { font-size: 12.5vw; margin-bottom: .6rem; }
  .metro__sub { font-size: .9rem; max-width: 21em; }
  .metro__mapa { order: 1; flex: none; height: 35vh; min-height: 230px; margin: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
  .tablero { order: 2; padding: 0 var(--gut); margin-top: calc(min(26vw, 12vh) * -1); }
  .tablero__foto { display: block; position: relative; top: auto; right: auto; margin: 0 0 -38px auto; height: min(50vw, 24vh); max-width: 62%; z-index: 2; }
  .tablero__estado { position: relative; z-index: 3; margin-bottom: 9px; }
  .metro__mando { order: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 14px var(--gut) 0; }
  .mando__b { padding: 1.05em 1em; border: 2.5px solid var(--tinta); border-radius: 999px; background: #fffaf2; color: var(--tinta); cursor: pointer;
    font: 800 .88rem/1 var(--sans); font-variation-settings: 'wdth' 112; text-transform: uppercase; box-shadow: 4px 5px 0 var(--tinta); transition: transform .2s var(--rebote), box-shadow .2s var(--rebote), opacity .2s; }
  .mando__b:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--tinta); }
  .mando__b--sig { background: var(--lc, #e8401f); color: var(--lt, #fff0da); }
  .mando__b:disabled { opacity: .3; box-shadow: none; }
  .mando__n { font-size: .7rem; letter-spacing: .12em; text-align: center; min-width: 5.5em; }
  .metro__leyenda { order: 4; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 16px 0 0; padding: 4px var(--gut) 6px; scrollbar-width: none; }
  .metro__leyenda button { font-size: .6rem; white-space: nowrap; }
  .senal { box-shadow: 7px 8px 0 var(--tinta); }
  .senal__cabeza { padding: 12px 14px 0; gap: 10px; }
  .senal__cod { width: 44px; height: 44px; border-width: 5px; }
  .senal__kana { font-size: 6.4vw; }
  .senal__nombre { font-size: min(10.5vw, 5.4vh); padding: 4px 14px 9px; }
  .senal__banda { padding: 9px 14px; font-size: .6rem; }
  .tablero__desc { margin: 14px 0 4px; font-size: .92rem; min-height: 2.8em; }
  .tablero__nota { font-size: .6rem; }
  .barra { height: auto; padding-top: calc(var(--borde) + 6vh); display: flex; flex-direction: column; }
  .barra__txt { order: -1; }
  .barra__txt { position: relative; top: 0; margin: 0 0 6vh; }
  .barra__t { font-size: 11vw; max-width: none; }
  .foto { position: relative; left: auto; top: auto; width: 74% !important; margin: 0 0 7vh; translate: none !important; }
  .foto:nth-of-type(2n) { margin-left: auto; }
  .pegote { display: none; }
  .pegote { --s: 92px !important; font-size: .66rem; }
  .visita { display: block; }
  .visita__ticket { padding: 4vh 6vw 5vh; margin-bottom: 8vh; }
  .visita__t { font-size: 13vw; }
  .sello-tinta { width: 96px; font-size: .62rem; right: 5vw; top: 2vh; }
  .visita__foto { width: 62vw; margin: 0 0 8vh auto; }
  .pegatina { left: -30px; width: 92px; height: 92px; font-size: .66rem; }
  .pie__marca { font-size: 30vw; }
  .pie__extra[style*='--x:44%'] { display: none; }
  .pie__bol { width: 70vw; bottom: -10vh; right: -18vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .intro { opacity: 1; transform: none; }
}