/* ==========================================================
   AXEL MARTÍNEZ — MENÚ DE DEGUSTACIÓN
   Todo vive en una sola pantalla: el riel se desplaza en horizontal.
   --a = alto útil del riel. Casi todo se mide contra él para que
   nada se salga hacia abajo, en ninguna pantalla.
   ========================================================== */

:root {
  --barra: 46px;
  --pie: 44px;
  --a: calc(100dvh - var(--barra) - var(--pie));

  --tinta: #121110;
  --papel: #F4EFE5;
  --rosa: #FF7AD9;
  --verde: #10C25B;
  --lima: #D9F43C;
  --cielo: #5CC4F2;
  --tomate: #E8341F;
  --amarillo: #FFE15A;
  --morado: #5A1FB4;
  --naranja: #E8901C;
  --marino: #13274F;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --vt: "VT323", "Space Mono", monospace;

  --suave: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--tinta);
  color: var(--tinta);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.vt { font-family: var(--vt); }

.saltar { position: fixed; left: -999px; top: 8px; z-index: 99; background: var(--amarillo); padding: 8px 12px; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--tomate); outline-offset: 3px; }

/* ---------- BARRA SUPERIOR ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; height: var(--barra); z-index: 20;
  display: flex; align-items: center; gap: 22px; padding: 0 16px 0 18px;
  background: var(--amarillo);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.barra a { text-decoration: none; }
.barra__marca { font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.barra__marca span { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .04em; }
.barra__linea { flex: 1; height: 1px; background: var(--tinta); }
.barra__nav { display: flex; gap: 20px; }
.barra__nav a { position: relative; padding: 4px 0; }
.barra__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--suave);
}
.barra__nav a:hover::after, .barra__nav a.activo::after { transform: scaleX(1); transform-origin: left; }
.barra__orden {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 1.5px solid var(--tinta); border-radius: 99px; padding: 6px 8px 6px 12px;
  transition: background .25s, color .25s;
}
.barra__orden i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta); }
.barra__orden b {
  min-width: 22px; height: 22px; border-radius: 99px; background: var(--tinta); color: var(--amarillo);
  display: grid; place-items: center; font-size: 11px;
}
.barra__orden:hover { background: var(--tinta); color: var(--amarillo); }
.barra__orden:hover i { background: var(--amarillo); }
.barra__orden:hover b { background: var(--amarillo); color: var(--tinta); }
.barra__orden.brinca b { animation: brinca .6s var(--suave); }
@keyframes brinca { 0% { transform: scale(1); } 35% { transform: scale(1.55) rotate(-8deg); } 100% { transform: scale(1); } }

/* ---------- RIEL ---------- */
#riel {
  position: fixed; top: var(--barra); bottom: var(--pie); left: 0; right: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior: contain;
  outline: none; cursor: grab;
}
#riel::-webkit-scrollbar { display: none; }
#riel.arrastrando { cursor: grabbing; user-select: none; }
#riel.arrastrando * { pointer-events: none; }
.panel { flex: 0 0 auto; height: 100%; position: relative; overflow: hidden; }

/* revelado al entrar en pantalla */
.revela { opacity: 0; transform: translateX(40px); transition: opacity .9s var(--suave), transform 1.1s var(--suave); }
.visto .revela { opacity: 1; transform: none; }
.visto .revela:nth-child(3) { transition-delay: .12s; }
.visto .revela:nth-child(4) { transition-delay: .22s; }

/* ---------- PORTADA + LA CASA ---------- */
.portada {
  width: 100vw;
  display: grid;
  grid-template-rows: 27% 1fr;
  grid-template-areas: "banda" "casa";
  background: var(--cielo);
}
.portada__banda {
  grid-area: banda; background: var(--rosa); display: flex; align-items: center; justify-content: center;
  padding: 0 2vw; overflow: hidden; position: relative; z-index: 2;
}
.portada__banda h1 {
  font-family: var(--display); font-weight: 900; font-stretch: 78%;
  letter-spacing: -.035em; line-height: .8; white-space: nowrap; text-transform: uppercase;
  font-size: 100px; /* app.js lo ajusta al ancho */
  padding-top: .06em;
}
.portada__banda h1 sup { font-size: .26em; vertical-align: top; position: relative; top: .05em; margin-left: .04em; letter-spacing: 0; }
.sube { display: inline-block; animation: sube 1.1s var(--suave) both; }
.sube.d1 { animation-delay: .12s; }
@keyframes sube { from { transform: translateY(105%); } to { transform: none; } }

/* la casa: hoja azul, texto editorial; las fotos pasan por DETRÁS del texto */
.portada__casa {
  grid-area: casa; position: relative; background: var(--cielo); overflow: hidden;
  display: grid; padding: 18px 26px 16px;
  grid-template-columns: 1.15fr minmax(300px, .85fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "arriba arriba" "izq der" "abajo abajo";
  column-gap: 5vw;
}
@media (pointer: fine) { .portada__casa { cursor: none; } }
.portada__casa > *:not(.estela):not(.vidrio) { position: relative; z-index: 2; }
/* cristal esmerilado: las fotos pasan detrás, borrosas; el texto queda limpio encima */
.vidrio {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(92,196,242,.34));
}
.casa__fila { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.casa__fila.arriba { grid-area: arriba; }
.casa__fila.abajo { grid-area: abajo; }
.casa__fila > span { padding: 3px 0; }
.casa__izq { grid-area: izq; align-self: end; padding-bottom: calc(var(--a) * .02); }
.casa__pre { margin-bottom: calc(var(--a) * .02); font-family: var(--serif); font-size: calc(var(--a) * .03); line-height: 1; margin-left: .3em; animation: entra 1s var(--suave) .3s both; }
.casa__titulo {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: min(calc(var(--a) * .34), 15vw); line-height: .8; letter-spacing: -.045em;
  margin-top: calc(var(--a) * .045); padding-top: .02em;
  animation: entra 1.1s var(--suave) .4s both;
}
.casa__der { grid-area: der; align-self: end; padding-bottom: calc(var(--a) * .035); max-width: 44ch; }
.casa__etiqueta { font-size: 11px; margin-bottom: calc(var(--a) * .02); animation: entra 1s var(--suave) .45s both; }
.casa__bio {
  font-family: var(--serif); font-size: clamp(16px, calc(var(--a) * .029), 25px); line-height: 1.24;
  margin-bottom: calc(var(--a) * .018);
  animation: entra 1.1s var(--suave) .5s both;
}
.casa__bio + .casa__bio { animation-delay: .6s; }
.casa__marcas { font-size: 10.5px; line-height: 1.7; margin-top: calc(var(--a) * .02); opacity: .85; animation: entra 1s var(--suave) .7s both; }

.estela { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.estela figure {
  position: absolute; left: 0; top: 0; width: calc(var(--a) * .24);
  translate: -50% -50%;
  animation: servir 1.25s var(--suave) forwards;
}
.estela img { width: 100%; height: auto; display: block; }
.estela figcaption {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; margin-top: 6px;
  display: flex; justify-content: space-between; gap: 8px; color: var(--tinta);
}
@keyframes servir {
  0% { opacity: 0; scale: .55; }
  14% { opacity: 1; scale: 1; }
  70% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .92; }
}

@keyframes entra { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.desliza {
  position: relative;
  font-family: var(--mono); text-transform: uppercase; font-size: 11px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 99px; padding: 8px 14px;
  cursor: pointer;
}
.desliza span { display: inline-block; animation: flecha 1.4s ease-in-out infinite; }
@keyframes flecha { 50% { transform: translateX(6px); } }

/* ---------- ENTRADAS ---------- */
.entradas { width: 100vw; background: var(--tinta); color: var(--papel); padding: clamp(14px, 3.2vh, 34px) clamp(16px, 3vw, 48px); display: flex; }
.entradas__cab { container-type: size; display: flex; flex-direction: column; justify-content: center; border-top: 2px solid var(--papel); border-bottom: 2px solid var(--papel); min-height: 0; }
.stickers .entradas__cab h2 { font-size: min(44cqh, 15cqw); margin-top: 6cqh; line-height: .82; }
.stickers .entradas__sub { font-size: min(13cqh, 4.6cqw); margin-top: 5cqh; }
.entradas__cab .mono, .sobremesa__cab .mono { font-size: 11px; color: var(--lima); }
.entradas__cab h2, .sobremesa__cab h2 {
  font-weight: 900; font-stretch: 72%; text-transform: uppercase;
  font-size: calc(var(--a) * .13); line-height: .82; letter-spacing: -.03em; margin-top: auto;
}
.entradas__sub, .sobremesa__sub { font-family: var(--serif); font-style: italic; font-size: calc(var(--a) * .04); line-height: 1; margin-top: 10px; }
/* boletos de cine: una marca por boleto. Todo Entradas cabe en UNA pantalla:
   2 columnas × 4 filas (título + 7 boletos). Dentro del boleto todo se mide contra
   su propio alto (cqh), así escala con cualquier tamaño de pantalla. */
.stickers {
  container-type: size;
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-flow: column;
  gap: clamp(10px, 2.4vh, 26px) clamp(14px, 2.4vw, 40px); min-height: 0;
}
.boleto {
  container-type: size;
  /* estas tres medidas usan el alto de la cuadrícula (un boleto mide ~23% de ella) */
  --talon: 6.8cqh;
  --muesca: 1.8cqh;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 25cqh var(--talon);
  min-height: 0; text-align: left;
  background: var(--boleto, var(--fondo)); color: var(--boleto-texto, var(--texto));
  -webkit-mask:
    radial-gradient(circle var(--muesca) at calc(100% - var(--talon)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--muesca) at calc(100% - var(--talon)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--muesca) at calc(100% - var(--talon)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--muesca) at calc(100% - var(--talon)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform .5s var(--suave);
}
.boleto:hover { transform: translateY(-5px) rotate(-.6deg); }
.boleto__info { display: flex; flex-direction: column; justify-content: space-between; padding: 9cqh 9cqh 8cqh; min-width: 0; }
.boleto__marca {
  font-weight: 900; font-stretch: 72%; text-transform: uppercase; letter-spacing: -.01em; line-height: .86;
  font-size: min(25cqh, 9cqw); color: var(--boleto-acento, var(--texto));
}
.boleto__datos { display: flex; flex-direction: column; gap: 2cqh; }
.boleto__fila, .boleto__pie { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); text-transform: uppercase; font-size: max(9px, min(7.6cqh, 2.4cqw)); line-height: 1.15; }
.boleto__fila i, .boleto__pie i { font-style: normal; white-space: nowrap; }
.boleto__fila i:last-child { text-align: right; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.boleto__pie { margin-top: 3cqh; padding-top: 4cqh; border-top: 1px solid currentColor; font-weight: 700; }
.boleto__foto { position: relative; overflow: hidden; margin: 6cqh 0; }
.boleto__foto::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); pointer-events: none; }
.boleto__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: filter .5s, transform .8s var(--suave); }
.boleto:hover .boleto__foto img { filter: none; transform: scale(1.06); }
.boleto__foto em {
  position: absolute; left: 7cqh; right: 7cqh; bottom: 7cqh; font-style: normal; z-index: 1;
  font-weight: 900; font-stretch: 70%; text-transform: uppercase; color: #fff; line-height: .92;
  font-size: 11cqh;
}
.boleto__talon {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 3cqh;
  border-left: 2px dashed currentColor; margin: calc(var(--muesca) + 3cqh) 0; padding: 0 3cqh;
}
.boleto__barras {
  width: 40%; height: 100%;
  background: repeating-linear-gradient(180deg, var(--boleto-acento, currentColor) 0 2px, transparent 2px 4px, var(--boleto-acento, currentColor) 4px 7px, transparent 7px 8px, var(--boleto-acento, currentColor) 8px 9px, transparent 9px 12px);
}
.boleto__talon small { writing-mode: vertical-rl; font-family: var(--mono); font-size: max(7px, 5.4cqh); text-transform: uppercase; letter-spacing: .06em; opacity: .85; white-space: nowrap; overflow: hidden; }
/* colores del boleto por marca (las muy oscuras se aclaran para verse sobre negro) */
.boleto.c-joe { --boleto: #FF52C5; --boleto-texto: #121110; --boleto-acento: #121110; }
.boleto.c-fogo { --boleto: #F7EBDD; --boleto-texto: #140D0A; --boleto-acento: #E8341F; }
.boleto.c-arvo { --boleto-acento: #F2DDA8; }
.boleto.c-lavo { --boleto-acento: #F2C14E; }
.boleto.c-bellezza { --boleto-acento: #FFE66B; }
.boleto.c-catch { --boleto: #D9B25A; --boleto-texto: #0E2D25; --boleto-acento: #0E2D25; }
.boleto.c-gyu { --boleto-acento: #FFFFFF; }
.boleto.c-ling { --boleto-acento: #FFFFFF; }

/* ---------- DIVISOR ---------- */
.divisor { width: max(92vw, calc(var(--a) * .95)); max-width: calc(var(--a) * 1.1); background: var(--tomate); color: var(--amarillo); padding: 18px; }
.divisor__marco {
  position: relative; height: 100%; border: 2px dashed var(--amarillo); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.divisor .esq { position: absolute; line-height: 1.1; font-family: var(--mono); text-transform: uppercase; font-size: 10.5px; }
.divisor .esq.e1, .divisor .esq.e3 { top: 16px; } .divisor .esq.e1 { left: 18px; } .divisor .esq.e3 { right: 18px; }
.divisor .esq.e4, .divisor .esq.e5 { bottom: 16px; } .divisor .esq.e4 { left: 18px; } .divisor .esq.e5 { right: 18px; }
.divisor__titulo { display: flex; flex-direction: column; align-items: center; font-weight: 900; font-stretch: 70%; text-transform: uppercase; line-height: .84; letter-spacing: -.02em; font-size: calc(var(--a) * .2); }
.divisor__titulo em {
  font-family: var(--serif); font-weight: 400; text-transform: none; font-size: .42em; letter-spacing: 0;
  border-top: 2px solid; border-bottom: 2px solid; padding: .02em .5em .08em; margin: .12em 0;
}
.divisor__nota { font-family: var(--mono); text-transform: uppercase; font-size: 11px; line-height: 1.5; margin-top: calc(var(--a) * .05); }

/* ---------- PLATOS FUERTES (casos) ---------- */
.caso {
  --fondo: var(--papel); --texto: var(--tinta); --acento: var(--tomate);
  display: flex; background: var(--fondo); color: var(--texto);
}
.caso__texto {
  width: clamp(300px, calc(var(--a) * .56), 540px); flex: 0 0 auto;
  padding: 26px 28px 24px; display: flex; flex-direction: column;
  border-right: 1.5px solid color-mix(in srgb, var(--texto) 22%, transparent);
}
.caso__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.caso__top b { color: var(--acento); font-weight: 700; }
.caso__marca {
  font-weight: 900; font-stretch: 70%; text-transform: uppercase; letter-spacing: -.03em; line-height: .84;
  font-size: calc(var(--a) * .108); margin-top: auto; padding-top: 14px;
  overflow-wrap: anywhere;
}
.caso__linea { display: flex; align-items: baseline; gap: 8px; margin: calc(var(--a) * .028) 0 calc(var(--a) * .016); font-weight: 800; font-size: calc(var(--a) * .024); letter-spacing: -.01em; }
.caso__linea i { flex: 1; border-bottom: 2px dotted currentColor; transform: translateY(-4px); opacity: .6; }
.caso__linea span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.25em; }
.caso__desc { font-family: var(--mono); font-size: clamp(11px, calc(var(--a) * .0158), 13.5px); line-height: 1.5; text-transform: uppercase; }
.caso__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(var(--a) * .022); }
.caso__tags li { font-family: var(--mono); font-size: 10px; text-transform: uppercase; border: 1.2px solid currentColor; border-radius: 99px; padding: 3px 9px; }
.botones { display: flex; gap: 8px; margin-top: calc(var(--a) * .03); flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  padding: 11px 16px; border-radius: 99px; border: 1.5px solid var(--texto, var(--tinta));
  transition: background .25s, color .25s, transform .25s var(--suave);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--negro { background: var(--texto, var(--tinta)); color: var(--fondo, var(--papel)); }
.btn--negro:hover { background: var(--acento, var(--tomate)); border-color: var(--acento, var(--tomate)); color: #fff; }
.btn--linea:hover { background: var(--texto, var(--tinta)); color: var(--fondo, var(--papel)); }
.btn.en-orden { background: var(--acento, var(--tomate)); border-color: var(--acento, var(--tomate)); color: #fff; }
.btn--ancho { width: 100%; }

/* tres tiempos por marca: Creatividad, Contenido, Diseño */
.caso__secciones { display: flex; align-items: stretch; padding: calc(var(--a) * .05) calc(var(--a) * .05) calc(var(--a) * .045); gap: calc(var(--a) * .05); }
.seccion {
  width: calc(var(--a) * .54); flex: 0 0 auto; display: flex; flex-direction: column; text-align: left;
  border-top: 2px solid var(--texto); padding-top: calc(var(--a) * .018);
}
.seccion__pila { position: relative; flex: 1; display: block; min-height: 0; overflow: hidden; }
.seccion__pila img {
  position: absolute; left: 50%; top: 50%; height: 74%; width: auto; max-width: 62%; object-fit: cover;
  translate: calc(-50% + var(--j) * 38%) -50%; rotate: calc(var(--j) * 6deg);
  transition: translate .7s var(--suave), rotate .7s var(--suave), scale .7s var(--suave);
}
.seccion__pila img:nth-child(2) { z-index: 1; }
.seccion:hover .seccion__pila img { translate: calc(-50% + var(--j) * 52%) calc(-50% + var(--j) * var(--j) * 5%); rotate: calc(var(--j) * 9deg); }
.seccion:hover .seccion__pila img:nth-child(2) { scale: 1.05; }
.seccion__pie { display: flex; align-items: baseline; gap: 10px; margin-top: calc(var(--a) * .02); }
.seccion__pie em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--acento); }
.seccion__pie b { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: calc(var(--a) * .062); line-height: .9; letter-spacing: -.02em; }
.seccion__pie i { flex: 1; border-bottom: 2px dotted currentColor; opacity: .5; transform: translateY(-5px); }
.seccion__pie small { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; white-space: nowrap; }
.seccion__sub { font-size: 10.5px; line-height: 1.45; margin-top: 8px; opacity: .8; min-height: 3em; }
.seccion:hover .seccion__pie b { color: var(--acento); }

/* colores de cada plato */
.c-joe { --fondo: #FF52C5; --texto: var(--tinta); --acento: #1B1BFF; }
.c-fogo { --fondo: #140D0A; --texto: #F7EBDD; --acento: var(--tomate); }
.c-arvo { --fondo: #1C2547; --texto: #E6CC93; --acento: #F2DDA8; }
.c-bellezza { --fondo: #1F5E33; --texto: #FFF7E0; --acento: #FFE66B; }
.c-catch { --fondo: #0E2D25; --texto: #EFE3C2; --acento: #D9B25A; }
.c-gyu { --fondo: #D7262E; --texto: #FFFFFF; --acento: #121110; }
.c-lavo { --fondo: #1E3F8C; --texto: #FFFFFF; --acento: #F2C14E; }
.c-ling { --fondo: #E3007E; --texto: #FFFFFF; --acento: #2B1BFF; }
.c-bl { --fondo: var(--lima); --texto: var(--tinta); --acento: var(--morado); }

/* ---------- ESPECIALIDAD: RESEÑAS Y LEALTAD (cabe en una pantalla) ---------- */
.especialidad {
  container-type: size;
  width: 100vw; background: var(--lima);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 4cqw;
  padding: 5cqh 3.4cqw 4.5cqh;
}
.esp__txt { display: flex; flex-direction: column; min-height: 0; }
.esp__eti { font-size: max(10px, 1.45cqh); }
.esp__titular {
  font-weight: 600; letter-spacing: -.045em; line-height: .9;
  font-size: min(8.4cqh, 4.6cqw); margin-top: 2.4cqh;
}
.esp__remate { font-family: var(--serif); font-style: italic; font-size: min(5.2cqh, 2.9cqw); line-height: 1; margin-top: 1.4cqh; }
.esp__pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 4.5cqh; }
.esp__pasos li { border-top: 2px solid var(--tinta); padding-top: 1.4cqh; display: flex; flex-direction: column; gap: .8cqh; }
.esp__pasos em { font-family: var(--mono); font-style: normal; font-size: max(10px, 1.4cqh); }
.esp__pasos b { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: min(3.6cqh, 2cqw); line-height: .9; letter-spacing: -.01em; }
.esp__pasos span { font-size: max(12px, min(1.95cqh, 1.05cqw)); line-height: 1.3; }
.esp__extras { display: flex; flex-wrap: wrap; gap: .8cqh .6cqw; margin-top: 3.4cqh; }
.esp__extras li { font-size: max(9.5px, 1.3cqh); border: 1.5px solid var(--tinta); border-radius: 99px; padding: .7cqh 1cqw; }
.esp__pie { margin-top: auto; display: flex; align-items: flex-end; gap: 2cqw; flex-wrap: wrap; }
.esp__cifras { display: flex; gap: 2cqw; }
.esp__cifras li { font-family: var(--mono); font-size: max(10px, 1.3cqh); text-transform: uppercase; display: flex; flex-direction: column; }
.esp__cifras b { font-family: var(--display); font-size: 8cqh; font-weight: 900; font-stretch: 75%; letter-spacing: -.03em; line-height: .9; }
.esp__nota { font-size: max(10px, 1.3cqh); padding-bottom: .6cqh; }
.especialidad .botones { margin: 0 0 0 auto; }
/* capturas en cuadrícula limpia: portal arriba a lo ancho; abajo comensal + estadísticas */
.esp__fotos {
  display: grid; min-height: 0;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 3.2cqh 1.6cqw;
}
.esp__img { display: flex; flex-direction: column; gap: 1cqh; margin: 0; min-height: 0; cursor: pointer; }
.esp__img img {
  flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top left; display: block;
  border: 2px solid var(--tinta); transition: transform .7s var(--suave);
}
.esp__img:hover img { transform: translateY(-4px); }
.esp__img figcaption { font-size: max(9.5px, 1.25cqh); line-height: 1.3; }
.esp__img figcaption b { font-weight: 700; margin-right: .5em; }
.i1 { grid-column: 1 / -1; }
.i2 img { object-position: center; }

/* ---------- SOBREMESA ---------- */
.sobremesa { width: max(100vw, calc(var(--a) * 1.95)); background: var(--tinta); color: var(--papel); padding: 26px 3vw; display: grid; grid-template-columns: calc(var(--a) * .42) 1fr; grid-template-rows: 1fr auto; column-gap: 3vw; }
.sobremesa__cab { display: flex; flex-direction: column; grid-row: 1 / 3; }
.estampas { display: flex; align-items: center; gap: calc(var(--a) * .04); }
.estampa {
  --c: var(--morado);
  position: relative; background: var(--c); color: var(--tinta);
  width: calc(var(--a) * .29); height: calc(var(--a) * .44);
  padding: calc(var(--a) * .028); display: flex; flex-direction: column;
  transition: transform .5s var(--suave);
}
.estampa:nth-child(odd) { transform: rotate(-3deg) translateY(calc(var(--a) * -.03)); }
.estampa:nth-child(even) { transform: rotate(2.5deg) translateY(calc(var(--a) * .04)); }
.estampa:hover { transform: rotate(0) translateY(-6px); }
/* bordes perforados de estampilla */
.estampa::before, .estampa::after { content: ""; position: absolute; pointer-events: none; }
.estampa::before {
  left: 0; right: 0; top: -6px; bottom: -6px;
  background:
    radial-gradient(circle, var(--tinta) 5px, transparent 5.5px) 0 0 / 16px 12px repeat-x,
    radial-gradient(circle, var(--tinta) 5px, transparent 5.5px) 0 100% / 16px 12px repeat-x;
}
.estampa::after {
  top: 0; bottom: 0; left: -6px; right: -6px;
  background:
    radial-gradient(circle, var(--tinta) 5px, transparent 5.5px) 0 0 / 12px 16px repeat-y,
    radial-gradient(circle, var(--tinta) 5px, transparent 5.5px) 100% 0 / 12px 16px repeat-y;
}
.estampa span { font-size: 10px; }
.estampa b { font-family: var(--serif); font-weight: 400; font-size: calc(var(--a) * .042); line-height: 1; margin-top: 10px; letter-spacing: -.01em; }
.estampa small { font-family: var(--display); font-size: clamp(12px, calc(var(--a) * .019), 15px); line-height: 1.3; margin-top: 10px; }
.estampa i { font-style: normal; font-size: calc(var(--a) * .06); margin-top: auto; align-self: flex-end; line-height: 1; }
.c-morado { --c: #A98BE8; } .c-verde { --c: #63C24F; } .c-cielo { --c: #4C86F0; } .c-naranja { --c: var(--naranja); }
.cocina { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(244,239,229,.25); }
.cocina .mono { font-size: 11px; color: var(--lima); }
.cocina ul { display: flex; gap: 8px; flex-wrap: wrap; }
.cocina li { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; border: 1.2px solid rgba(244,239,229,.6); border-radius: 6px; padding: 5px 10px; }

/* ---------- LA CUENTA ---------- */
.cuenta { width: max(100vw, calc(var(--a) * 1.15)); display: grid; place-items: center; background: #2a0f0a; }
.cuenta__fondo { position: absolute; inset: 0 -8%; width: 116%; height: 100%; object-fit: cover; }
.ticket-envoltura { position: relative; z-index: 1; rotate: -1.6deg; }
.ticket {
  --s: 16px;
  width: clamp(290px, calc(var(--a) * .5), 420px);
  max-height: calc(var(--a) * .94);
  background: #FBFAF6; color: var(--tinta);
  padding: calc(var(--s) + calc(var(--a) * .022)) calc(var(--a) * .036);
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--s) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--s) 51% repeat-x;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--s) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--s) 51% repeat-x;
  font-size: clamp(15px, calc(var(--a) * .024), 21px);
}
.ticket__casa { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: calc(var(--a) * .068); line-height: .84; letter-spacing: -.02em; text-align: center; margin-bottom: calc(var(--a) * .016); }
.ticket__meta, .ticket__fila { display: flex; justify-content: space-between; gap: 10px; line-height: 1.05; }
.ticket hr { border: 0; border-top: 2px dashed var(--tinta); margin: calc(var(--a) * .012) 0; }
.ticket__lista { font-family: var(--vt); line-height: 1.05; min-height: 1.05em; }
.ticket__lista li { display: flex; gap: 8px; }
.ticket__lista li span:first-child { width: 1.8em; flex: 0 0 auto; }
.ticket__lista li span:nth-child(2) { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ticket__lista li.vacio { display: block; opacity: .7; }
.ticket__lista li.nuevo { animation: imprime .5s steps(4) both; }
@keyframes imprime { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ticket__total { display: flex; justify-content: space-between; font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: calc(var(--a) * .034); letter-spacing: -.01em; margin-top: calc(var(--a) * .012); padding-top: calc(var(--a) * .01); border-top: 2px solid var(--tinta); }
.ticket__botones { display: grid; gap: 7px; margin-top: calc(var(--a) * .018); }
.ticket__par { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ticket .btn { padding: 9px 10px; font-size: 10.5px; }
.ticket__gracias { text-align: center; margin-top: calc(var(--a) * .016); }
.codigo { height: calc(var(--a) * .045); margin-top: 6px; background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 7px, transparent 7px 8px, var(--tinta) 8px 9px, transparent 9px 12px); }
.sello-rojo {
  position: absolute; z-index: 2; left: calc(var(--a) * -.09); top: calc(var(--a) * .02);
  width: calc(var(--a) * .17); aspect-ratio: 1; border-radius: 50%;
  background: var(--tomate); color: #fff; display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: calc(var(--a) * .021); line-height: 1.02; rotate: -14deg;
  animation: late 2.6s ease-in-out infinite;
}
@keyframes late { 50% { scale: 1.06; } }

/* ---------- PIE ---------- */
.pie {
  position: fixed; inset: auto 0 0 0; height: var(--pie); z-index: 20;
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: var(--papel); border-top: 1.5px solid var(--tinta); font-size: 10.5px;
}
.pie__ayuda { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tecla { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.2px solid var(--tinta); border-radius: 4px; font-size: 11px; }
.pie__avance { flex: 1; height: 16px; position: relative; }
.pie__marcas { position: absolute; inset: 0; }
.pie__marcas button { position: absolute; top: 0; height: 16px; width: 14px; margin-left: -7px; display: grid; place-items: center; }
.pie__marcas button::before { content: ""; width: 1.5px; height: 10px; background: var(--tinta); opacity: .5; transition: height .3s, opacity .3s; }
.pie__marcas button:hover::before, .pie__marcas button.activo::before { height: 16px; opacity: 1; }
.pie__marcas button[data-etiqueta]:hover::after {
  content: attr(data-etiqueta); position: absolute; bottom: 22px; left: 50%; translate: -50% 0; white-space: nowrap;
  background: var(--tinta); color: var(--papel); padding: 3px 7px; font-family: var(--mono); text-transform: uppercase; font-size: 10px;
}
.pie__avance::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--tinta); opacity: .2; }
#avance { position: absolute; left: 0; top: calc(50% - 1.5px); height: 3px; width: 100%; background: var(--tomate); transform-origin: left; transform: scaleX(0); }
.pie__actual { white-space: nowrap; display: flex; gap: 10px; }
.pie__actual b { font-weight: 700; }

/* ---------- EL PLATO (DETALLE) ---------- */
.plato { position: fixed; inset: var(--barra) 0 var(--pie) 0; z-index: 30; pointer-events: none; }
.plato__velo { position: absolute; inset: 0; background: rgba(18,17,16,.55); opacity: 0; transition: opacity .5s; backdrop-filter: blur(2px); }
.plato__hoja {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(1240px, 95vw);
  background: var(--fondo, var(--papel)); color: var(--texto, var(--tinta));
  transform: translateX(102%); transition: transform .75s var(--suave);
  display: flex; flex-direction: column;
}
.plato.abierto { pointer-events: auto; }
.plato.abierto .plato__velo { opacity: 1; }
.plato.abierto .plato__hoja { transform: none; }
.plato__cab { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1.5px solid color-mix(in srgb, var(--texto) 25%, transparent); font-size: 11px; }
.plato__cerrar { font-family: var(--mono); text-transform: uppercase; font-size: 11px; border: 1.5px solid currentColor; border-radius: 99px; padding: 7px 14px; }
.plato__cerrar:hover { background: var(--texto); color: var(--fondo); }
.plato__cuerpo { flex: 1; display: flex; min-height: 0; }
.plato__info { width: clamp(280px, 30%, 380px); flex: 0 0 auto; padding: 22px; display: flex; flex-direction: column; overflow: hidden; }
.plato__cat { font-size: 11px; color: var(--acento); }
.plato__info h3 { font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: clamp(34px, calc(var(--a) * .09), 86px); line-height: .84; letter-spacing: -.03em; margin: 10px 0 14px; }
.plato__nombre { display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-style: italic; font-size: calc(var(--a) * .032); }
.plato__nombre i { flex: 1; border-bottom: 2px dotted currentColor; opacity: .5; }
.plato__nombre b { font-family: var(--mono); font-style: normal; font-size: 11px; }
.plato__intro { font-family: var(--serif); font-size: clamp(15px, calc(var(--a) * .022), 19px); line-height: 1.25; margin: -4px 0 16px; opacity: .9; }
.plato__desc { font-size: clamp(13px, calc(var(--a) * .02), 16px); line-height: 1.4; margin: 14px 0; }
.plato__info .btn--ancho { margin-top: auto; }
.plato__volver { align-self: flex-start; font-size: 11px; border-bottom: 1.5px solid currentColor; padding: 2px 0; }
.plato__volver:hover { color: var(--acento); }
.plato__tabs { display: flex; gap: 6px; }
.plato__tabs button { font-size: 11px; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 99px; padding: 7px 14px; transition: background .25s, color .25s; }
.plato__tabs button em { font-style: normal; opacity: .6; margin-right: 4px; }
.plato__tabs button:hover, .plato__tabs button.activo { background: var(--texto); color: var(--fondo); }
.plato__info .btn--ancho { margin-top: 16px; }
.plato__galeria {
  flex: 1; display: flex; gap: 16px; padding: 22px 22px 22px 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--texto) transparent; overscroll-behavior: contain;
}
.plato__galeria figure, .portadita { flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; gap: 6px; }
.plato__galeria.entra > * { animation: llega .8s var(--suave) both; animation-delay: calc(.12s + var(--d) * .07s); }
@keyframes llega { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
.portadita { text-align: left; cursor: pointer; }
.portadita img { height: calc(100% - 64px); width: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform .7s var(--suave); }
.portadita:hover img { transform: translateY(-6px) rotate(-1deg); }
.portadita__pie { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; max-width: max(100%, 220px); height: 56px; }
.portadita__pie em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--acento); }
.portadita__pie b { font-weight: 800; font-size: 15px; line-height: 1.1; letter-spacing: -.01em; }
.portadita__pie small { grid-column: 2; font-family: var(--mono); font-size: 10px; text-transform: uppercase; opacity: .75; }
.portadita:hover .portadita__pie small { opacity: 1; color: var(--acento); }
.plato__galeria img { height: calc(100% - 22px); width: auto; aspect-ratio: var(--r); object-fit: contain; }
.plato__galeria figcaption { font-family: var(--mono); font-size: 10px; text-transform: uppercase; opacity: .7; }

/* ---------- AVISO, CURSOR, GRANO ---------- */
.aviso {
  position: fixed; left: 18px; bottom: calc(var(--pie) + 14px); z-index: 40;
  background: var(--tinta); color: var(--papel); font-size: 11px; padding: 10px 14px; border-radius: 4px;
  border-left: 4px solid var(--lima);
  transform: translateY(20px); opacity: 0; transition: transform .45s var(--suave), opacity .3s; pointer-events: none;
}
.aviso.ve { transform: none; opacity: 1; }

.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tinta); mix-blend-mode: normal; display: grid; place-items: center; transition: width .35s var(--suave), height .35s var(--suave), margin .35s var(--suave), background .3s; opacity: 0; }
.cursor span { font-family: var(--mono); font-size: 10px; color: var(--papel); text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.cursor.grande { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--tomate); }
.cursor.grande span { opacity: 1; color: #fff; }
@media (pointer: fine) { .cursor { opacity: 1; } }

.grano {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- PANTALLAS CHICAS ---------- */
@media (max-width: 900px) {
  .barra__nav, .barra__marca span, .pie__ayuda { display: none; }
  .barra { gap: 12px; }
  .cuenta { width: 100vw; }
  .ticket-envoltura { rotate: -1deg; }
  .portada { grid-template-rows: 18% 1fr; }
  .portada__casa {
    padding: 14px 18px 12px; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "arriba" "izq" "der" "abajo";
  }
  .casa__fila.arriba span:last-child { display: none; }
  .casa__izq { align-self: start; padding-top: 4vh; }
  .casa__titulo { font-size: 24vw; margin-top: 3vh; }
  .casa__der { align-self: start; padding-top: 2vh; }
  .casa__bio { font-size: 16px; }
  .estela figure { width: 42vw; }
  .divisor { width: 100vw; max-width: none; }
  .divisor__titulo { font-size: 22vw; }
  .entradas { width: auto; padding: 2.4vh 4vw; }
  .stickers { grid-template-columns: repeat(2, 90vw); }
  #plato-num { display: none; }
  .plato__tabs button { padding: 6px 9px; font-size: 10px; }
  .plato__tabs button em { display: none; }
  .seccion { width: 78vw; }
  .caso__texto { width: 88vw; padding: 18px; }
  .especialidad { width: 200vw; grid-template-columns: 92vw 92vw; padding: 3cqh 4vw; column-gap: 8vw; }
  .esp__titular { font-size: 9.6vw; }
  .esp__remate { font-size: 6vw; }
  .esp__pasos { grid-template-columns: 1fr; gap: 1.6cqh; margin-top: 3cqh; }
  .esp__pasos b { font-size: 5vw; }
  .esp__pasos span { font-size: 12.5px; }
  .esp__extras { display: none; }
  .sobremesa { grid-template-columns: auto; grid-template-rows: auto 1fr auto; width: calc(var(--a) * 1.45); padding: 18px 5vw; }
  .sobremesa__cab { grid-row: auto; }
  .estampa { width: calc(var(--a) * .25); height: calc(var(--a) * .38); }
  .sello-rojo { left: -10px; top: -20px; }
  .plato__cuerpo { flex-direction: column; }
  .plato__info { width: auto; padding: 16px; }
  .plato__info h3 { font-size: 40px; }
  .plato__galeria { padding: 0 16px 16px; }
  .pie__actual #actual-titulo { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}

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