/* Pigeon Roll Sushi · maqueta
   Paleta "papel, tinta y salmón" (60/30/10): crema de fondo, tinta para texto y bloques,
   rojo laca solo para pedir/agregar. El oro solo va sobre fondo oscuro. */

/* ---------- letras: guardadas en el sitio (versión "latin": acentos, ñ, ¿ y ¡). Fraunces e Inter son variables:
   un solo archivo trae todos los gruesos, y Fraunces también los tamaños ópticos (opsz).
   Títulos en Fraunces desde el 15 oct 2026 (decisión de Daniel): la Bodoni de antes tenía los trazos finos tan
   delgados que costaba leerla, y el menú de las mesas lo leen chicos y grandes. Licencia SIL OFL (libre). ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/fraunces.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500 600; font-display: swap; src: url(../fonts/fraunces-cursiva.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter.woff2) format('woff2'); }

:root {
  --crema: #F6F1E9;      /* 60 · fondo */
  --crema-2: #EDE5D8;    /* superficies, "foto pendiente" */
  --crema-3: #DDD2C1;    /* bordes */
  --tinta: #171413;      /* 30 · texto, bloques, barra */
  --gris: #6B625B;       /* texto secundario (5.3:1 sobre crema) */
  --rojo: #C8322F;       /* 10 · pedir, agregar, + */
  --rojo-hover: #B02A27;
  --rojo-logo: #E1413E;  /* solo formas grandes, sin texto encima */
  --oro: #C59365;        /* solo sobre oscuro */
  --carbon: #131110;
  --carbon-2: #1E1A18;
  --carbon-3: #2A2522;
  --hueso: #F3ECE2;
  --hueso-2: #A9A097;
  --acento-osc: #F0625C;
  --verde: #2E7D4F;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 14px;
  --r-s: 10px;
  --cab: 60px;            /* alto de la cabecera */
  --chips: 90px;          /* alto de la barra de categorías */
  --tab: 64px;            /* barra inferior en celular */
  /* margen de los lados: 16px, o más con el iPhone acostado, para que nada quede debajo de la isla de la cámara
     (la página usa viewport-fit=cover y el iPhone la deja llegar hasta las orillas) */
  --orilla: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --sombra: 0 1px 2px rgba(23, 20, 19, .06), 0 8px 24px rgba(23, 20, 19, .08);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.portada, .banda-estrella, .menu, .pedir, .reservar, .eventos, .conocenos, .ubicacion, .preguntas { scroll-margin-top: var(--cab); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font: 400 16px/1.5 var(--sans); font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--tab) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
body.bloqueado { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* en iPhone, dos toques rápidos en un botón hacían zoom a la página (además de contar los dos toques).
   En botones y enlaces se quita ese zoom; pellizcar para acercar y el doble toque sobre texto siguen funcionando */
button, a, label, summary, [role="button"] { touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
/* Fraunces con su corte óptico de 40 en todos los tamaños: en los títulos grandes no se afila (con el automático, a 50 px
   los trazos finos se vuelven delgados otra vez) y en los nombres chicos se ve firme */
h1, h2, h3, h4, .portada-lema, .te-nombre, .platillo-nombre, .nuevo-nombre, .pasos li::before, .ev-nombre, .ch-rol-t b,
.rs-res, .rs-para, .rs-dias .opcion b, .pl-vacio, .est-espera em { font-variation-settings: 'opsz' 40; }
p { margin: 0; }
[hidden]:not(.globo-pedido) { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--crema); padding: 10px 14px; border-radius: 8px; }
.saltar:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }
html.con-dedo :focus-visible:not(input):not(textarea):not(select) { outline: none; }
.envoltura { width: min(1180px, 100% - 2 * var(--orilla)); margin-inline: auto; }
.estrecha { width: min(760px, 100% - 2 * var(--orilla)); }
.ceja { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: .7rem; }
.ceja-oro { color: var(--oro); }
.pequeno { font-size: .84rem; color: var(--gris); }
.centro { text-align: center; }
.opcional { color: var(--gris); font-weight: 400; }
.precio, [data-precio] { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  font: 600 .98rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { background: var(--rojo-hover); }
.btn-tinta { background: var(--tinta); color: var(--crema); }
.btn-tinta:hover { background: #2b2624; }
.btn-linea { border: 1.5px solid var(--tinta); color: var(--tinta); background: transparent; }
.btn-linea:hover { background: var(--tinta); color: var(--crema); }
.btn-ancho { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn[aria-disabled="true"] { opacity: .45; }   /* se ve apagado, pero al tocarlo dice qué falta */
.btn-texto { display: block; margin: 10px auto 0; padding: 8px 12px; color: var(--gris); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.enlace { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.enlace .ico { width: 1.05em; height: 1.05em; transition: transform .2s; }
.enlace:hover .ico { transform: translateX(3px); }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30; height: var(--cab);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--orilla);
  background: rgba(246, 241, 233, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.cabecera.con-borde { border-bottom-color: var(--crema-3); }
.marca img { height: 38px; width: auto; }
.nav { display: none; }
.estado {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font: 600 .8rem/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: var(--crema-2); white-space: nowrap;
}
.estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); }
.estado.abierto::before { background: var(--verde); box-shadow: 0 0 0 3px rgba(46, 125, 79, .18); }
/* el letrero lleva al horario; cerrado se pone en rojo */
a.estado { text-decoration: none; color: var(--tinta); transition: background-color .2s, color .2s; }
a.estado:hover { background: var(--crema-3); }
.estado.cerrado { background: #F8E1DD; color: #A3271F; }
.estado.cerrado::before { background: var(--rojo); box-shadow: 0 0 0 3px rgba(200, 50, 47, .18); }
a.estado.cerrado:hover { background: #F3D2CC; }
.btn-bolsa { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; place-items: center; }
.btn-bolsa:hover { background: var(--crema-2); }
.cuenta {
  position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--rojo); color: #fff; font: 700 .7rem/19px var(--sans); text-align: center;
}
.cuenta.brinca { animation: brinca .35s var(--ease); }
@keyframes brinca { 40% { transform: scale(1.35); } }

@media (min-width: 900px) {
  :root { --cab: 72px; }
  body { padding-bottom: 0; }
  .cabecera { padding: 0 max(32px, var(--orilla)); gap: 28px; }
  .marca img { height: 44px; }
  .nav { display: flex; gap: 4px; margin-left: 12px; }
  .nav a { text-decoration: none; font-weight: 500; font-size: .95rem; padding: 10px 12px; border-radius: 8px; }
  .nav a:hover { background: var(--crema-2); }
  .estado { margin-left: auto; }
  .btn-bolsa { display: grid; }
}

/* ---------- ES | EN (22 oct 2026) ----------
   Dibujado como la paloma: el idioma activo va dentro de un ensō de tinta (el del menú washi, pintado con Artlist).
   Al tocar el otro, el ensō se pinta a su alrededor siguiendo el pincel (una máscara que gira desde donde empieza el
   trazo, con mucha tinta, hasta la punta seca) y la página cambia de idioma. Sin animación si se pidió menos movimiento. */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.idioma { flex: none; display: flex; align-items: center; margin-right: -6px; }
.idioma a {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; text-decoration: none;
  font: 600 .74rem/1 var(--serif); letter-spacing: .04em; color: var(--gris); -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.idioma a span[aria-hidden] { position: relative; padding-left: .04em; }
.idioma a::before {
  content: ''; position: absolute; inset: -1px; background: url(/assets/img/enso-idioma.webp) center / contain no-repeat;
  opacity: 0; transform: rotate(-14deg) scale(.86); transition: opacity .25s ease, transform .35s var(--ease);
  -webkit-mask-image: conic-gradient(from 115deg, #000 var(--giro), transparent 0); mask-image: conic-gradient(from 115deg, #000 var(--giro), transparent 0);
}
.idioma a[aria-current] { color: var(--tinta); }
.idioma a[aria-current]::before { opacity: 1; transform: none; }
.idioma a:not([aria-current]):hover::before { opacity: .22; transform: none; }
.idioma a:not([aria-current]):hover { color: var(--tinta); }
/* al tocar: el ensō se va del idioma de ahora y se pinta en el nuevo */
.idioma.cambia a[aria-current]::before { opacity: 0; transform: rotate(10deg) scale(.9); }
.idioma.cambia a.pinta { color: var(--tinta); }
.idioma.cambia a.pinta::before { opacity: 1; transform: none; transition: none; animation: pinta-enso .5s cubic-bezier(.45, .05, .3, 1) both; }
@keyframes pinta-enso { from { --giro: 0deg; } to { --giro: 360deg; } }
@media (prefers-reduced-motion: reduce) { .idioma.cambia a.pinta::before { animation: none; } }
@media (max-width: 380px) { .idioma a { width: 36px; height: 36px; font-size: .7rem; } .cabecera { gap: 10px; } }

/* ---------- portada: el logo vivo (paloma pintada + nombre), una frase y dos botones ---------- */
.portada {
  position: relative; display: grid; justify-items: center; align-content: center; text-align: center;
  width: min(1180px, 100% - 2 * var(--orilla)); margin-inline: auto; padding: 4px 0 28px;
  min-height: calc(100svh - var(--cab) - var(--tab) - env(safe-area-inset-bottom));
}
.portada-visual { position: relative; display: grid; justify-items: center; width: 100%; }
/* la paloma pintada: su papel tiene el mismo color de la página y las orillas se desvanecen */
.paloma {
  grid-area: 1 / 1; position: relative; width: min(84vw, 360px); aspect-ratio: 1;
  border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* la máscara va en cada capa y no en la caja, para que el contorno de foco con teclado sí se vea */
.paloma img, .paloma video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 56%, transparent 74%); mask-image: radial-gradient(circle at 50% 50%, #000 56%, transparent 74%);
}
.paloma:focus-visible { outline: 2px solid var(--tinta); outline-offset: -6px; }
.paloma video { opacity: 0; transition: opacity .35s ease; }
.paloma video.on { opacity: 1; }
.js .paloma-cuadro { opacity: 0; transition: opacity .6s ease; }
.js .paloma.con-cuadro .paloma-cuadro { opacity: 1; }
/* sin video (ahorro de datos o "reducir movimiento"): el plato aparece como foto fija */
.paloma-plato-fijo { opacity: 0; transition: opacity .5s ease; }
.paloma.sirve .paloma-plato-fijo { opacity: 1; }
/* un brinquito, una sola vez, para que se note que se puede tocar */
.paloma.invita { animation: invita .9s ease-in-out; }
@keyframes invita {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(-8px); }
  72% { transform: translateY(-3px); }
}
.portada-texto { display: grid; justify-items: center; gap: 14px; margin-top: -14px; }
.portada-nombre { margin: 0; line-height: 0; }
.portada-nombre img { width: min(70vw, 290px); height: auto; }   /* las letras del logo, en vector: no se mueven con la paloma */
.portada-lema { font: 500 1.3rem/1.25 var(--serif); color: #3b3532; }
.portada-lema em { font-style: italic; }
.portada-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
/* en la portada el nombre ya se ve grande: el de la cabecera aparece al bajar */
.marca { transition: opacity .3s ease; }
body.en-portada .marca { opacity: 0; pointer-events: none; }

@media (min-width: 900px) {
  /* como el logo original: la paloma a la izquierda y el nombre a la derecha */
  .portada {
    grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 40px; text-align: left;
    padding: 24px 0 40px; min-height: calc(100svh - var(--cab));   /* siempre llena la pantalla, aunque sea muy alta */
  }
  .paloma { width: min(40vw, 520px); }
  .portada-texto { justify-items: start; margin-top: 0; gap: 18px; }
  .portada-nombre img { width: min(36vw, 480px); }
  .portada-lema { font-size: 1.65rem; }
  .portada-ctas { justify-content: flex-start; }
}
/* celular acostado: en columna no cabe (quedan unos 250 px de alto y solo se veía la paloma), así que va como
   en computadora: la paloma a la izquierda, del alto de la pantalla, y el nombre con los botones a la derecha */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  .portada {
    grid-template-columns: auto minmax(0, 340px); justify-content: center; align-items: center; column-gap: 24px; text-align: left;
    padding: 6px 0;
  }
  .paloma { width: min(calc(100svh - var(--cab) - var(--tab) - env(safe-area-inset-bottom) - 16px), 44vw); }
  .portada-texto { justify-items: start; margin-top: 0; gap: 10px; }
  .portada-nombre img { width: min(100%, 260px); }
  .portada-lema { font-size: 1.1rem; }
  .portada-ctas { justify-content: flex-start; margin-top: 2px; }
}
/* tableta de pie (iPad): mismo acomodo que el celular, pero a su tamaño; antes se veía chica y con mucho vacío */
@media (min-width: 700px) and (max-width: 899px) and (min-height: 700px) {
  .paloma { width: min(60vw, 480px); }
  .portada-nombre img { width: min(50vw, 400px); }
  .portada-lema { font-size: 1.55rem; }
  .portada-texto { gap: 18px; }
}

/* ---------- banda de rollos de la casa ---------- */
.banda-estrella { background: var(--carbon); color: var(--hueso); padding: 56px 0 44px; overflow: hidden; }
.banda-estrella h2 { font-size: clamp(2rem, 7vw, 3.4rem); max-width: 16ch; }
.banda-sub { color: var(--hueso-2); margin-top: 12px; max-width: 46ch; }
.carril-estrella {
  list-style: none; margin: 28px 0 0; padding: 4px var(--orilla) 12px; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78vw, 320px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--orilla);
  scrollbar-width: none;
}
.carril-estrella::-webkit-scrollbar { display: none; }
.carril-estrella li { scroll-snap-align: start; }
.tarjeta-estrella {
  width: 100%; height: 100%; text-align: left; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r);
  background: var(--carbon-2); border: 1px solid var(--carbon-3); overflow: hidden; transition: border-color .2s, transform .2s var(--ease);
}
.tarjeta-estrella:hover { border-color: #4a413c; transform: translateY(-2px); }
.te-visual { position: relative; height: 150px; display: grid; place-items: center; padding: 0 14px; background: radial-gradient(120% 90% at 50% 100%, #2c2522 0%, var(--carbon-2) 60%); }
.te-visual > img { width: 100%; height: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .55)); transition: transform .35s var(--ease); }
.tarjeta-estrella:hover .te-visual > img { transform: scale(1.04) rotate(-1deg); }
.te-visual > img.te-pieza { width: auto; height: 132px; }
.te-texto { flex: 1; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.te-cat { font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.te-nombre { font: 600 1.55rem/1.1 var(--serif); }
.te-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 6px; }   /* el precio siempre abajo, parejo en toda la fila */
.te-precio { font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
/* «Precio por confirmar» va más chico y suave; si no cabe junto a «Ver por dentro», este baja entero a la derecha */
.te-precio.suave { font-size: .9rem; font-weight: 500; color: var(--hueso-2); }
.te-ver { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; color: var(--acento-osc); font-weight: 600; font-size: .88rem; }
@media (min-width: 900px) {
  .banda-estrella { padding: 80px 0 64px; }
  .carril-estrella { width: min(1180px, 100% - 2 * var(--orilla)); margin-inline: auto; padding: 4px 0 0; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .te-visual { height: 170px; }
  .te-visual > img.te-pieza { height: 150px; }
}

/* ---------- menú ---------- */
.menu { padding-top: 44px; }
.menu-cabeza { display: grid; gap: 14px; align-items: end; }
.menu-cabeza h2 { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.menu-nota { color: var(--gris); font-size: .9rem; margin-top: 6px; min-height: 1.35em; }
.selector {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--crema-2);
  border-radius: 999px; padding: 4px; width: max-content; isolation: isolate;
}
.selector button { position: relative; z-index: 1; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--gris); transition: color .2s; min-height: 42px; }
.selector button[aria-checked="true"] { color: var(--crema); }
/* el de Comer aquí / Para llevar son enlaces entre el sitio y el menú de las mesas */
.selector a { position: relative; z-index: 1; display: grid; place-items: center; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--gris); text-decoration: none; transition: color .2s; min-height: 42px; }
.selector a[href]:hover { color: var(--tinta); }
.selector a[aria-current="page"] { color: var(--crema); }
.selector::before {
  content: ''; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2));
  border-radius: 999px; background: var(--tinta); transform: translateX(calc(var(--sel, 0) * 100%)); transition: transform .3s var(--ease);
}
.selector-ancho { width: 100%; }
.buscar {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--crema-3); border-radius: 999px;
  padding: 0 16px; min-height: 48px; color: var(--gris);
}
.buscar:focus-within { border-color: var(--tinta); }
.buscar input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; font-size: 1rem; color: var(--tinta); }
.buscar input::placeholder { color: #8d847c; }
@media (min-width: 900px) {
  .menu { padding-top: 72px; }
  .menu-cabeza { grid-template-columns: 1fr auto minmax(260px, 340px); gap: 20px; }
}

.chips {
  position: sticky; top: var(--cab); z-index: 20; margin-top: 18px; height: var(--chips);
  background: rgba(246, 241, 233, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--crema-3);
}
.chips-carril {
  display: flex; gap: 6px; height: 100%; align-items: center; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--orilla); width: min(1180px, 100%); margin-inline: auto;
}
.chips-carril::-webkit-scrollbar { display: none; }
/* cada sección es un botón casi cuadrado: el dibujo a tinta arriba y el nombre abajo. El botón es del color del papel
   de los dibujos, así el dibujo no necesita marco; en el activo (fondo tinta) el dibujo queda como tarjetita */
.chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none;
  min-width: 80px; padding: 5px 7px; border-radius: var(--r); background: #FBF8F3;
  font-size: .74rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  color: var(--tinta); border: 1px solid var(--crema-3); transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--tinta); }
.chip.activo { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
/* el recorte es cuadrado con aire arriba y abajo: cover lo deja apaisado sin cortar tinta */
.chip img { flex: none; width: 64px; height: 50px; object-fit: cover; border-radius: 9px; background: #FBF8F3; }
@media (min-width: 900px) {
  :root { --chips: 110px; }
  .chip { flex: 1 0 auto; min-width: 92px; padding: 6px 8px; gap: 3px; font-size: .84rem; }
  .chip img { width: 80px; height: 62px; }
}
/* celular acostado (o ventana muy baja): botones más chicos para que la barra no se coma la pantalla */
@media (max-height: 500px) {
  :root { --chips: 66px; }
  .chip { min-width: 66px; padding: 3px 6px; gap: 1px; font-size: .72rem; }
  .chip img { width: 48px; height: 38px; border-radius: 7px; }
}
@media (min-width: 1180px) { .chips-carril { padding: 0; } }

.cat { padding-top: 34px; scroll-margin-top: calc(var(--cab) + var(--chips) + 4px); }
.cat-cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cat-tit { display: flex; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; min-width: 0; }
/* el dibujo a tinta de la sección, junto a su título */
.sec-dib { flex: none; width: 60px; height: 60px; border-radius: 50%; background: #FBF8F3; border: 1px solid var(--crema-3); }
@media (min-width: 900px) { .sec-dib { width: 76px; height: 76px; } }

/* ---------- temporada: Halloween (16 oct 2026, decisión de Daniel) ----------
   En celular los murciélagos y la telaraña tienen su franja arriba del título (encima de las letras no se leía).
   Lo primero del menú, en una tarjeta de papel con luz de calabaza. Los dibujos a tinta (Artlist, mismo estilo que los
   de las secciones) van detrás de los platillos con mix-blend-mode: multiply, así su papel blanco desaparece; abajo
   queda un «piso» para las calabazas, el fantasma de onigiri y la paloma con sombrero de bruja.
   Naranja de texto #A3461A (5.6:1 sobre el papel) y de etiqueta #B4501A con blanco (5.1:1); el #D9661F solo adorna. */
.cat-temporada { position: relative; isolation: isolate; overflow: clip; }
.cat-halloween {
  --calabaza: #D9661F; --calabaza-texto: #A3461A; --calabaza-fondo: #B4501A;
  margin-top: 30px; padding: 78px 14px 122px; border-radius: 22px; border: 1px solid rgba(217, 102, 31, .3);
  background:
    radial-gradient(90% 55% at 100% 0, rgba(217, 102, 31, .15), transparent 62%),
    radial-gradient(70% 40% at 0 100%, rgba(217, 102, 31, .14), transparent 66%),
    #FBF5EC;
}
.cat-halloween .intro-sub { color: var(--calabaza-texto); font-weight: 600; }
/* el título y la fecha nunca llegan a la columna de la telaraña (la araña quedaba sobre «Halloween» en iPhone) */
.cat-halloween .cat-cabeza { padding-right: 96px; }
.cat-halloween .sec-dib { border-color: rgba(217, 102, 31, .5); box-shadow: 0 0 0 4px rgba(217, 102, 31, .1); }
.adornos { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: multiply; }   /* en el grupo: con z-index, en cada imagen no se mezcla con el fondo */
.adorno { position: absolute; height: auto; }
.ad-telarana { top: 0; right: 0; width: 92px; }
.ad-murcielagos { top: 2px; left: 20px; width: 88px; animation: aleteo 7s ease-in-out infinite alternate; }   /* cabe en la franja de 78 px */
.ad-calabazas { bottom: 12px; left: 8px; width: 140px; }
.ad-fantasma { bottom: 40px; left: 50%; width: 66px; margin-left: -10px; animation: flotar 4.5s ease-in-out infinite alternate; }
.ad-paloma-bruja { bottom: 8px; right: 12px; width: 84px; }
@keyframes aleteo { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(-16px, 8px) rotate(3deg); } }
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.etiqueta.temporada { background: var(--calabaza-fondo, #B4501A); border-color: var(--calabaza-fondo, #B4501A); color: #fff; }
/* su botón en la barra de secciones lleva el borde de calabaza */
.chip-temporada { border-color: rgba(217, 102, 31, .6); background: #FBF3E8; }
.chip-temporada:hover { border-color: #B4501A; }
.chip-temporada.activo { background: var(--tinta); border-color: var(--tinta); }
@media (min-width: 900px) {
  .cat-halloween { padding: 34px 28px 150px; }
  .ad-telarana { width: 150px; }
  .ad-murcielagos { top: 18px; left: auto; right: 190px; width: 190px; }
  .ad-calabazas { width: 210px; bottom: 14px; left: 18px; }
  .ad-fantasma { width: 86px; bottom: 48px; }
  .ad-paloma-bruja { width: 116px; right: 26px; }
  .cat-halloween .cat-cabeza { padding-right: 160px; }
}
/* entre 900 y 1099 px (iPad acostado, laptop chica, iPhone grande acostado) el título con su fecha llega hasta donde
   vuelan los murciélagos: aquí van chicos, en su franja de arriba */
@media (min-width: 900px) and (max-width: 1099px) {
  .cat-halloween { padding-top: 100px; }
  .ad-murcielagos { top: 8px; right: 168px; width: 112px; }
}
@media (max-width: 359px) {   /* en celular angosto, más lugar para las tarjetas y para que «Halloween» quepa junto a la telaraña */
  .cat-halloween { padding-inline: 8px; }
  .cat-halloween .cat-cabeza { padding-right: 60px; }
  .ad-telarana { width: 58px; }
}
@media (prefers-reduced-motion: reduce) { .ad-murcielagos, .ad-fantasma { animation: none; } }
.cat-cabeza h3 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.cat-cabeza p { color: var(--gris); font-size: .9rem; }
.lista-platillos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .lista-platillos { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 1100px) { .lista-platillos { grid-template-columns: repeat(3, 1fr); } }

/* tarjeta de platillo: foto + texto + botón de agregar */
.platillo {
  position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--crema-3); border-radius: var(--r); padding: 10px; min-height: 112px;
  transition: border-color .2s, box-shadow .2s;
}
.platillo:hover { border-color: #c9bca8; box-shadow: var(--sombra); }
.platillo-abrir { position: absolute; inset: 0; border-radius: var(--r); z-index: 1; }
.platillo-foto { position: relative; width: 92px; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--crema-2); }
.platillo-foto img { width: 100%; height: 100%; object-fit: cover; }
.platillo-texto { display: grid; gap: 4px; padding: 2px 44px 0 0; min-width: 0; }
.platillo-nombre { font: 600 1.25rem/1.15 var(--serif); }
.platillo-desc { font-size: .86rem; line-height: 1.38; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.platillo-desc.aviso { font-style: italic; }
.platillo-precio { font-weight: 600; font-size: 1.05rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.platillo-precio.suave { color: var(--gris); font-weight: 500; font-size: .95rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.etiqueta { font: 600 .66rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--tinta); }
.etiqueta.dentro { background: var(--tinta); color: var(--crema); display: inline-flex; gap: 4px; align-items: center; }
.etiqueta.dentro .ico { width: 1.1em; height: 1.1em; vertical-align: 0; }

/* nivel de picante (20 oct 2026): 1, 2 o 3 chiles dibujados a tinta, un poco encimados y con ligero giro, como a mano.
   Sobre la foto van en una pastilla de papel abajo a la izquierda; al abrir el platillo, junto al nombre con su texto. */
.pica { display: inline-flex; align-items: center; flex: none; --chile: 18px; }
.pica .chile { width: var(--chile); height: var(--chile); max-width: none; object-fit: contain; }
.pica .chile + .chile { margin-left: calc(var(--chile) * -.2); }
.pica .chile:nth-child(2) { transform: rotate(9deg); }
.pica .chile:nth-child(3) { transform: rotate(-5deg); }
.pica.sobre {
  position: absolute; left: 5px; bottom: 5px; z-index: 1; --chile: 18px; padding: 2px 5px 2px 3px; border-radius: 99px;
  background: rgba(251, 248, 243, .94); box-shadow: 0 1px 3px rgba(23, 20, 19, .28); pointer-events: none;
}
.nuevo .pica.sobre { left: 7px; bottom: 7px; --chile: 20px; }
.te-visual .pica.sobre { left: 10px; bottom: 10px; --chile: 21px; }
.pica.en-linea { --chile: 17px; margin-right: 5px; vertical-align: -4px; }
.ficha-pica, .est-pica { display: flex; align-items: center; gap: 8px; font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.ficha-pica .pica, .est-pica .pica { --chile: 24px; }
.est-pica { justify-content: center; margin-top: 8px; }
.btn-mas {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rojo); color: #fff; transition: background-color .2s, transform .15s;
}
.btn-mas:hover { background: var(--rojo-hover); }
.btn-mas:active { transform: scale(.92); }
.btn-mas .ico { stroke-width: 2.2; }
.btn-mas[data-n]::after {
  content: attr(data-n); position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--tinta); color: var(--crema); font: 700 .7rem/20px var(--sans); text-align: center; padding: 0 5px;
}
.solo-aqui { position: absolute; right: 12px; bottom: 12px; z-index: 0; font-size: .74rem; color: var(--gris); text-align: right; max-width: 9em; line-height: 1.2; }
.platillo.no-llevar .platillo-foto { opacity: .65; }

/* "foto pendiente": la paloma del logo a línea sobre crema más oscuro */
.pendiente { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; background: var(--crema-2); }
.pendiente img { width: 46%; height: auto; opacity: .3; }
.pendiente span { font: 500 .62rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.platillo-foto .pendiente span { display: none; }
.platillo-foto .pendiente img { width: 52%; }

/* lo nuevo: carril horizontal */
.carril-nuevo {
  list-style: none; margin: 0 calc(-1 * var(--orilla)); padding: 2px var(--orilla) 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 10px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--orilla); scrollbar-width: thin;
}
.carril-nuevo li { scroll-snap-align: start; }
.nuevo { position: relative; display: grid; gap: 6px; }
.nuevo .platillo-foto { width: 100%; border-radius: var(--r); }
.nuevo .platillo-abrir { border-radius: var(--r); }
.nuevo-nombre { font: 600 1.1rem/1.15 var(--serif); }
.nuevo .platillo-precio { margin: 0; font-size: .97rem; }
.nuevo .btn-mas { top: 112px; bottom: auto; right: 8px; width: 36px; height: 36px; }
.nuevo .solo-aqui { display: none; }
@media (min-width: 900px) { .carril-nuevo { margin: 0; padding-inline: 0; grid-auto-columns: 176px; } .nuevo .btn-mas { top: 130px; } }

.dos-listas { display: grid; gap: 22px; }
.dos-listas h4 { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
@media (min-width: 700px) { .dos-listas { grid-template-columns: 1fr 1fr; gap: 40px; } }
.lista-simple { list-style: none; margin: 0 0 8px; padding: 0; }
.lista-simple li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 0; border-bottom: 1px solid var(--crema-3); }
.ls-dibujo { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #FBF8F3; border: 1px solid var(--crema-3); object-fit: cover; }
.lista-simple .ls-nombre { flex: 1; min-width: 0; }
.sin-corte { white-space: nowrap; }
.lista-simple .ls-precio { font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-simple .ls-suave { color: var(--gris); font-size: .8rem; }
.btn-mas-chico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rojo); color: #fff; position: relative; flex: none; }
.btn-mas-chico[data-n]::after { content: attr(data-n); position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--tinta); color: var(--crema); font: 700 .66rem/18px var(--sans); padding: 0 4px; }
.sin-resultados { padding: 40px 0; text-align: center; color: var(--gris); overflow-wrap: anywhere; }
.oculto { display: none !important; }

/* ---------- pedir ---------- */
.pedir { margin-top: 56px; background: var(--crema-2); padding: 52px 0; }
.pedir h2, .reservar h2, .eventos h2, .conocenos h2, .ubicacion h2 { font-size: clamp(2.1rem, 8vw, 3.2rem); }
.pedir-rejilla { display: grid; gap: 28px; }
.pasos { list-style: none; counter-reset: paso; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; }
.pasos li::before { content: counter(paso); grid-row: span 2; font: italic 600 2.5rem/1 var(--serif); color: var(--tinta); }
.pasos b { font-size: 1.05rem; }
.pasos span { color: var(--gris); }
.mini-mas { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rojo); color: #fff; font-weight: 700; line-height: 1; font-size: .9rem; vertical-align: 1px; }
.resumen { background: var(--crema); border-radius: var(--r); padding: 22px; border: 1px solid var(--crema-3); align-self: start; }
.resumen h3 { font-size: 1.5rem; margin-bottom: 10px; }
.resumen ul { list-style: none; margin: 0 0 12px; padding: 0; }
.resumen li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--crema-3); font-size: .95rem; }
.resumen li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumen .total { display: flex; justify-content: space-between; font-weight: 700; margin: 6px 0 16px; font-size: 1.05rem; }
.resumen .vacio { color: var(--gris); margin-bottom: 16px; }
@media (min-width: 900px) { .pedir { padding: 80px 0; } .pedir-rejilla { align-items: center; } }

/* ---------- reservar mesa (13 oct 2026; oculta desde el 15 oct, ver RESERVAR_MESA en main.js): de noche, con luz de velas ----------
   La tarjeta de «Reservado» sobre su plato negro se llena sola y recibe el sello rojo al apartar.
   Celular: título, la escena y el formulario. Computadora: la escena fija a la izquierda. */
.reservar.noche {
  --hueso-3: #B8AFA5; --oro-2: #E2BF8E; --rosa: #F08A86; --rosa-2: #F3B3A8;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); padding: 56px 0 64px;
  background: var(--carbon); color: var(--hueso); color-scheme: dark; overflow: clip; transition: background-color .5s ease;
}
/* luz de velas arriba */
.reservar.noche::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 600px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70px 70px at 10% 8%, rgba(255, 176, 84, .26), transparent 70%),
    radial-gradient(46px 46px at 28% 3%, rgba(255, 196, 120, .18), transparent 70%),
    radial-gradient(80px 80px at 88% 6%, rgba(255, 160, 70, .22), transparent 70%),
    radial-gradient(40px 40px at 70% 13%, rgba(255, 205, 140, .16), transparent 70%),
    radial-gradient(420px 260px at 50% 0, rgba(214, 140, 70, .14), transparent 70%);
}
.rs-intro { padding: 0 var(--orilla); }
.rs-intro .ceja { color: var(--oro); letter-spacing: .2em; }
.rs-intro h2 i { font-weight: 500; color: var(--oro-2); }
.rs-intro .intro-sub { margin-top: 12px; color: var(--hueso-3); font-size: 1.02rem; max-width: 46ch; }
/* ---------- la escena ---------- */
.rs-escena { --pw: min(86cqw, 400px); --abajo: 14px; position: relative; container-type: inline-size; height: clamp(200px, 65vw, 300px); margin-top: 8px; }
.rs-mesa { position: absolute; inset: 0; }
.rs-luz { position: absolute; left: 50%; bottom: calc(var(--abajo) - var(--pw) * .08); width: calc(var(--pw) * 1.25); height: calc(var(--pw) * .7); translate: -50% 0;
  background: radial-gradient(closest-side, rgba(226, 178, 120, .3), rgba(226, 178, 120, .08) 60%, transparent); }
.rs-plato { position: absolute; left: 50%; bottom: var(--abajo); width: var(--pw); height: auto; translate: -50% 0; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
/* velas: cuerpo de cera y flama que titila */
.vela { position: absolute; bottom: calc(var(--abajo) + var(--pw) * .17); width: calc(var(--pw) * .055); height: calc(var(--pw) * .3); border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, #d9cdb9, #f4ead9 45%, #cdbfa8); box-shadow: 0 0 22px rgba(255, 190, 110, .22); }
.vela::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: calc(var(--pw) * .03); height: calc(var(--pw) * .06); margin-bottom: 4px; translate: -50% 0; transform-origin: 50% 100%;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(circle at 50% 70%, #fff6d8, #ffc35a 45%, rgba(255, 120, 30, 0) 75%);
  box-shadow: 0 0 calc(var(--pw) * .08) calc(var(--pw) * .03) rgba(255, 170, 70, .33); animation: flama 2.6s ease-in-out infinite alternate; }
.vela.v1 { left: calc(50% - var(--pw) * .5); height: calc(var(--pw) * .34); }
.vela.v2 { left: calc(50% - var(--pw) * .41); height: calc(var(--pw) * .22); bottom: calc(var(--abajo) + var(--pw) * .15); }
.vela.v2::before { animation-delay: -1.1s; }
.vela.v3 { right: calc(50% - var(--pw) * .49); height: calc(var(--pw) * .29); }
.vela.v3::before { animation-delay: -.6s; animation-duration: 3.1s; }
@keyframes flama { 0% { transform: scale(1, 1) rotate(-2deg); opacity: .95; } 50% { transform: scale(.92, 1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1.04, .94) rotate(-1deg); opacity: .88; } }
/* la tarjeta de «Reservado» parada en el plato */
.rs-tarjeta { position: absolute; left: 50%; bottom: calc(var(--abajo) + var(--pw) * .225); width: calc(var(--pw) * .62); translate: -50% 0; padding: calc(var(--pw) * .02);
  background: linear-gradient(170deg, #FBF3EC, #EADBCF); border-radius: 3px; color: #6E1F1C;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 24px rgba(0, 0, 0, .45), 0 0 40px rgba(255, 190, 120, .16); }
.rs-marco { display: grid; justify-items: center; gap: calc(var(--pw) * .016); padding: calc(var(--pw) * .036) calc(var(--pw) * .03) calc(var(--pw) * .028); border: 1px solid rgba(110, 31, 28, .55); text-align: center; }
.rs-res { font: 600 calc(var(--pw) * .064)/1 var(--serif); letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; }
.rs-para { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 500 calc(var(--pw) * .046)/1.15 var(--serif); color: #3A2422; }
.rs-det { font: 600 calc(var(--pw) * .029)/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #8B5A50; }
.rs-firma { display: flex; align-items: center; gap: 5px; font: 600 calc(var(--pw) * .024)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.rs-firma img { width: auto; height: calc(var(--pw) * .05); }
.rs-cambia { animation: rs-cambia .35s ease; }
@keyframes rs-cambia { from { opacity: .25; } }
/* el sello rojo con el rollo del logo: cae al apartar */
.rs-sello { position: absolute; right: calc(var(--pw) * -.05); bottom: calc(var(--pw) * -.045); width: calc(var(--pw) * .17); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 34%, #ef5a55, #c8322f 55%, #9c201d); box-shadow: 0 0 0 3px rgba(156, 32, 29, .5), 0 6px 12px rgba(0, 0, 0, .4);
  opacity: 0; transform: rotate(-12deg) scale(1.7); pointer-events: none; }
.rs-sello::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 1.5px dashed rgba(255, 225, 215, .55); }
.rs-sello img { width: 52%; height: auto; margin-top: -8%; filter: brightness(0) invert(.93); }
.rs-sello span { position: absolute; bottom: 15%; font: 700 calc(var(--pw) * .018)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ffe3da; }
.sellada .rs-sello { opacity: 1; transform: rotate(-12deg) scale(1); animation: sello .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes sello { from { opacity: 0; transform: rotate(-12deg) scale(1.7); } 60% { opacity: 1; } }

/* ---------- el formulario, de noche ---------- */
.rs-cuerpo { min-width: 0; padding: 18px var(--orilla) 0; }
.reservar .panel, #mesaForma { display: grid; gap: 22px; }
.reservar .panel[hidden], #mesaForma[hidden] { display: none; }
:is(.reservar, .eventos) legend { color: var(--hueso); }
:is(.reservar, .eventos) .opcional, :is(.reservar, .eventos) .pequeno { color: var(--hueso-3); }
.reservar .contador { background: #1B1817; border-color: rgba(197, 147, 101, .45); }
.reservar .contador button { color: var(--oro-2); }
.reservar .contador button:hover { background: rgba(255, 255, 255, .07); }
:is(.reservar, .eventos) .opcion { background: #1B1817; border-color: rgba(243, 236, 226, .16); color: var(--hueso); }
:is(.reservar, .eventos) .opcion:hover { border-color: rgba(243, 236, 226, .55); }
:is(.reservar, .eventos) .opcion small { color: var(--hueso-3); }
:is(.reservar, .eventos) .opcion[aria-checked="true"], :is(.reservar, .eventos) .opcion[aria-pressed="true"] { background: var(--hueso); border-color: var(--hueso); color: var(--tinta); font-weight: 600; }
:is(.reservar, .eventos) .opcion[aria-checked="true"] small, :is(.reservar, .eventos) .opcion[aria-pressed="true"] small { color: var(--gris); }
:is(.reservar, .eventos) .opcion:focus-visible, :is(.reservar, .eventos) .contador button:focus-visible { outline: 2px solid var(--oro-2); outline-offset: 2px; }
/* el día: abreviatura arriba y el número grande, como un calendario de mesa */
.rs-dias .opcion { width: 64px; padding: 8px 0 9px; gap: 3px; }
.rs-dias .opcion small { font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.rs-dias .opcion b { font: 600 1.45rem/1 var(--serif); }
:is(.reservar, .eventos) .campos label { color: var(--hueso); }
:is(.reservar, .eventos) .campos input { background: #1B1817; border-color: rgba(243, 236, 226, .18); color: var(--hueso); }
:is(.reservar, .eventos) .campos input::placeholder { color: #8f867d; }
:is(.reservar, .eventos) .campos input:focus { outline-color: var(--oro); border-color: var(--oro); }
:is(.reservar, .eventos) .campos .falta { border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(240, 138, 134, .2); }
:is(.reservar, .eventos) .btn-rojo { box-shadow: 0 10px 26px rgba(200, 50, 47, .32); }
:is(.reservar, .eventos) .btn-rojo:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
.mesa-cuando:not(:empty)::before { content: " ·"; }
/* en celular angosto «Apartar mi mesa · mañana 9:00» no cabe en una línea: el cuándo baja, más chico */
@media (max-width: 359px) {
  .mesa-btn { display: grid; justify-items: center; gap: 3px; }
  .mesa-cuando:empty { display: none; }
  .mesa-cuando::before { content: none !important; }
  .mesa-cuando { font-size: .8em; font-weight: 500; opacity: .92; }
}
/* ya apartada */
.rs-listo { display: grid; gap: 14px; text-align: center; }
.rs-listo[hidden] { display: none; }
.rs-listo .ceja { color: var(--oro); margin: 0; letter-spacing: .2em; }
.rs-listo h3 { font: 600 clamp(1.9rem, 7.5vw, 2.4rem)/1.05 var(--serif); }
.rs-listo h3:focus { outline: none; }
.rs-listo-sub { color: var(--hueso-3); max-width: 36ch; margin: 0 auto; }
.rs-pasos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: paso; text-align: left; }
.rs-pasos li { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 50px; border: 1px solid rgba(243, 236, 226, .12); border-radius: 14px; background: #1B1817; counter-increment: paso; }
.rs-pasos li::before { content: counter(paso); position: absolute; left: 14px; top: 13px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--oro); color: var(--oro); display: grid; place-items: center; font: 600 .74rem/1 var(--sans); }
.rs-pasos b { font-weight: 600; }
.rs-pasos span { color: var(--hueso-3); font-size: .86rem; }
.rs-pasos .btn-texto { display: inline; margin: 0; padding: 0; color: var(--oro-2); font-size: inherit; }
.rs-acciones { display: grid; gap: 10px; }
.btn-borde { border: 1px solid rgba(243, 236, 226, .3); color: var(--hueso); background: transparent; }
.btn-borde:hover { background: rgba(255, 255, 255, .06); }
.rs-otra { color: var(--oro-2); margin-top: 2px; }
.rs-a-eventos { margin: 26px 0 0; text-align: center; font-size: .92rem; color: var(--hueso-3); }
.rs-a-eventos a { color: var(--oro-2); }
@media (prefers-reduced-motion: reduce) {
  .vela::before { animation: none; }
  .sellada .rs-sello { animation: none; }
  .rs-cambia { animation: none; }
}
@media (min-width: 900px) {
  .reservar.noche { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: auto 1fr; padding: 0; }
  .rs-escena { --pw: min(76cqw, 540px); --abajo: 26%; grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: var(--cab); height: calc(100svh - var(--cab)); margin: 0;
    background: radial-gradient(60% 50% at 50% 62%, rgba(214, 140, 70, .13), transparent 70%); }
  .rs-intro, .rs-cuerpo { grid-column: 2; padding-inline: clamp(32px, 5vw, 84px); }
  .rs-intro > *, .rs-cuerpo > * { max-width: 640px; }
  .rs-intro { padding-top: 84px; }
  .rs-cuerpo { padding-top: 28px; padding-bottom: 84px; }
}
/* ---------- eventos (15 oct 2026): «Resérvanos para tu evento», de noche como su reel ----------
   Usa el patrón de secciones con video (abajo): en celular el reel es la portada con el título encima y el
   contenido sube sobre él; en computadora el reel queda fijo a la izquierda. Mantel negro con brillos, rosa de
   sus rosas para el acento y fotos del mismo reel en las tarjetas de «¿Qué llevamos?». */
.eventos, .eventos .lado-cuerpo {
  background-color: #0E0C0C;
  background-image: radial-gradient(1.2px 1.2px at 10% 20%, rgba(255, 255, 255, .3) 50%, transparent), radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, .2) 50%, transparent),
    radial-gradient(1.4px 1.4px at 70% 30%, rgba(255, 228, 190, .34) 50%, transparent), radial-gradient(1px 1px at 85% 75%, rgba(255, 255, 255, .18) 50%, transparent);
  background-size: 46px 46px, 38px 38px, 52px 52px, 34px 34px;
}
.eventos { --hueso-3: #B8AFA5; --oro-2: #E2BF8E; --rosa: #F08A86; --rosa-2: #F3B3A8; color: var(--hueso); color-scheme: dark; }
.eventos .lado-intro .ceja { color: var(--rosa); letter-spacing: .2em; }
.eventos h2 i { font-weight: 500; color: var(--rosa-2); }
/* en celular el título va sobre el reel, que arranca con el techo claro de la palapa: más sombra abajo para que se lea */
.eventos .lado-intro { text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
@media (max-width: 899px) { .eventos .video-lado::after { background: linear-gradient(to top, #0E0C0C 0%, rgba(14, 12, 12, .72) 42%, rgba(14, 12, 12, 0) 80%); } }
/* así funciona: su equipo sirviendo y los 3 pasos */
.ev-como { display: grid; border-radius: 18px; overflow: hidden; background: #1B1817; border: 1px solid rgba(243, 236, 226, .12); }
.ev-como img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ev-pasos { list-style: none; margin: 0; padding: 16px 16px 18px; display: grid; gap: 12px; counter-reset: paso; }
.ev-pasos li { position: relative; display: grid; gap: 2px; padding-left: 38px; counter-increment: paso; }
.ev-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rosa); color: var(--rosa-2); display: grid; place-items: center; font: 600 .76rem/1 var(--sans); }
.ev-pasos b { font-weight: 600; }
.ev-pasos span { color: var(--hueso-3); font-size: .88rem; }
@media (min-width: 600px) {
  .ev-como { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .ev-como img { height: 100%; aspect-ratio: auto; }
  .ev-pasos { align-content: center; }
}
/* el formulario: las tarjetas con fotos del reel se tocan para elegir */
.ev-forma { display: grid; gap: 26px; margin-top: 30px; }
.ev-pista { margin: -2px 0 0; color: var(--hueso-3); font-size: .88rem; }
.ev-grupo { margin: 18px 0 9px; font: 600 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-2); }
.ev-grupo .opcional { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.ev-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ev-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ev-tarjeta { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #1B1817; color: #fff; text-align: left; isolation: isolate; }
.ev-tarjeta img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ev-tarjeta::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(10, 8, 8, .9) 0%, rgba(10, 8, 8, .4) 36%, rgba(10, 8, 8, 0) 62%); }
/* el borde va encima de la foto (un box-shadow quedaría debajo) */
.ev-tarjeta::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; border: 1px solid rgba(243, 236, 226, .16); transition: border-color .2s, border-width .2s; }
.ev-tarjeta:hover img { transform: scale(1.04); }
.ev-tarjeta:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
.ev-nombre { position: absolute; left: 12px; right: 12px; bottom: 11px; font: 600 1.05rem/1.15 var(--serif); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.ev-extras .ev-nombre { left: 9px; right: 9px; bottom: 9px; font: 600 .8rem/1.2 var(--sans); }
.ev-marca { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(14, 12, 12, .5); border: 1.5px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .2s, border-color .2s; }
.ev-marca .ico { grid-area: 1 / 1; width: 16px; height: 16px; stroke-width: 2.2; }
.ev-marca .ico + .ico, .ev-tarjeta[aria-pressed="true"] .ev-marca .ico:first-child { display: none; }
.ev-tarjeta[aria-pressed="true"] .ev-marca .ico + .ico { display: block; }
.ev-tarjeta[aria-pressed="true"] .ev-marca { background: var(--rojo-logo); border-color: var(--rojo-logo); }
.ev-tarjeta[aria-pressed="true"]::before { border: 2.5px solid var(--rosa); }
.ev-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Safari del iPhone: el campo de fecha trae su propio ancho y se encimaba con Personas, y vacío no decía nada:
   sin apariencia nativa, a lo ancho de su columna y con su calendario dibujado (el de Chrome queda invisible encima) */
.ev-campos input { min-width: 0; }
.ev-campos input[type="date"] { -webkit-appearance: none; appearance: none; display: block; position: relative; text-align: left; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8AFA5' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 20px; }
.ev-campos input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.ev-campos input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 46px; height: 100%; opacity: 0; cursor: pointer; }
.ev-ancho { grid-column: 1 / -1; }
.ev-resumen { margin: 0 0 -10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(243, 236, 226, .2); color: var(--hueso-3); font-size: .9rem; }
.eventos .pequeno { margin-top: -14px; }
@media (max-width: 359px) { .ev-extras { gap: 6px; } .ev-extras .ev-nombre { font-size: .74rem; } .ev-marca { width: 26px; height: 26px; } }
@media (min-width: 900px) {
  .eventos .lado-intro { color: var(--hueso); }
  .eventos .lado-intro .intro-sub { color: var(--hueso-3); }
}

/* ---------- en la mesa (15 oct 2026): /menu/restaurante, la página de los QR de las mesas ----------
   Solo para ver: la bienvenida, los rollos de la casa con su animación y el menú con los precios de comer aquí.
   Nada se agrega ni se pide (lo piden a su mesero). La clase en-mesa la pone el <head> según la dirección. */
.mesa-hola, .para-mesa, .mesa-pide { display: none; }
.en-mesa .mesa-hola { display: block; }
.en-mesa .para-mesa { display: inline; }
.en-mesa .para-sitio,
.en-mesa .portada, .en-mesa .pedir, .en-mesa .reservar, .en-mesa .eventos, .en-mesa .conocenos, .en-mesa .ubicacion, .en-mesa .preguntas,
.en-mesa .nav a[href="#pedir"], .en-mesa .nav a[href="#reservar"], .en-mesa .nav a[href="#eventos"], .en-mesa .nav a[href="#ubicacion"],
.en-mesa .btn-bolsa, .en-mesa .globo-pedido, .en-mesa .tabbar,
.en-mesa .btn-mas, .en-mesa .btn-mas-chico, .en-mesa .solo-aqui, .en-mesa .ls-suave, .en-mesa #estAgregar,
.en-mesa .pie-iconos li:not(:first-child), .en-mesa .pie-rejilla > div + div { display: none !important; }
.en-mesa { --tab: 0px; }                       /* sin la barra de abajo, la página no deja su hueco */
.en-mesa .estado { pointer-events: none; }
.mesa-hola { padding: 30px 0 34px; text-align: center; }
.mesa-hola .ceja { letter-spacing: .2em; }
.mesa-nombre { margin: 2px 0 0; line-height: 0; }
.mesa-nombre img { display: block; margin-inline: auto; width: min(72vw, 330px); height: auto; }
.mesa-lema { max-width: 34ch; margin: 16px auto 0; color: var(--gris); font-size: 1.04rem; }
.mesa-lema em { font-style: normal; font-weight: 600; color: var(--tinta); }
.mesa-ir { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.mesa-ir .btn { flex: 1 1 180px; max-width: 240px; }
.en-mesa .mesa-pide { display: block; margin: 0 0 0 auto; padding: 12px 16px; border-radius: 999px; background: var(--crema-2); border: 1px solid var(--crema-3); font-weight: 600; font-size: .92rem; color: var(--tinta); white-space: nowrap; }
.en-mesa #chAgregar .ico { display: none; }   /* la charola no se agrega: el botón solo guía hasta «pídesela a tu mesero» */
.ficha-mesero { margin: 4px 0 0; padding: 14px; border-radius: 12px; background: var(--crema-2); font-weight: 600; text-align: center; }
@media (min-width: 900px) {
  .mesa-hola { padding: 56px 0 60px; }
  .mesa-nombre img { width: 380px; }
}

.panel { display: grid; gap: 20px; max-width: 760px; }
.panel[hidden] { display: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.contador { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--crema-3); border-radius: 999px; padding: 4px; }
.contador button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.contador button:hover { background: var(--crema-2); }
.contador button:disabled { opacity: .3; cursor: default; background: none; }
.contador output { min-width: 42px; text-align: center; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones.carril { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--orilla)); padding: 0 var(--orilla) 4px; scrollbar-width: none; }
.opciones.carril::-webkit-scrollbar { display: none; }
.opcion {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--crema-3); background: #fff;
  font-weight: 500; font-size: .93rem; display: inline-grid; place-items: center; line-height: 1.15; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.opcion small { display: block; font-size: .72rem; color: var(--gris); font-weight: 500; }
.opcion:hover { border-color: var(--tinta); }
.opcion[aria-checked="true"], .opcion[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.opcion[aria-checked="true"] small, .opcion[aria-pressed="true"] small { color: #cfc6bb; }
.opcion:disabled { opacity: .35; pointer-events: none; text-decoration: line-through; }
.rejilla-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.rejilla-horas .opcion { min-height: 42px; padding: 6px 4px; font-variant-numeric: tabular-nums; }
.campos { display: grid; gap: 14px; }
.campos label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.campos label small { font-weight: 400; color: var(--gris); }
.campos input, .campos textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--crema-3); background: #fff; font-weight: 400; font-size: 1rem;
}
.campos input:focus, .campos textarea:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.campos .falta { border-color: var(--rojo); }
@media (min-width: 700px) { .campos { grid-template-columns: 1fr 1fr; } .campos-3 { grid-template-columns: 1fr 1.2fr 1.6fr; } }

/* ---------- conócenos ---------- */
.conocenos-texto { display: grid; gap: 14px; justify-items: start; }
.conocenos-texto p { max-width: 52ch; color: #3b3532; }

/* ---------- ubicación ---------- */
.ubicacion { padding: 56px 0; background: var(--crema-2); }
.ubicacion-rejilla { display: grid; gap: 28px; }
address { font-style: normal; margin-top: 18px; font-size: 1.05rem; line-height: 1.6; }
.referencia { color: var(--gris); margin-top: 8px; }
.horario { margin-top: 20px; padding: 14px 0; border-block: 1px solid var(--crema-3); display: grid; gap: 8px; }
.horario-estado { font-size: .95rem; font-weight: 600; color: var(--gris); }
.horario-estado.abierto { color: #236B41; }
.horario-estado.cerrado { color: #A3271F; }
.semana { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 360px; }
.semana li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.semana li.hoy { background: var(--crema); font-weight: 600; }
.semana li.hoy span:first-child::after { content: ' · hoy'; font-weight: 500; color: var(--gris); }
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mapa { position: relative; border-radius: var(--r); overflow: hidden; min-height: 320px; background: #e4dccd url('../img/paloma-linea.webp') center 38% / 64px auto no-repeat; border: 1px solid var(--crema-3); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-cargar { position: absolute; inset: 0; display: grid; place-items: center; align-content: end; gap: 6px; padding-bottom: 32%; font-weight: 600; }
.mapa-cargar .ico { display: none; }
.mapa-cargar span { background: var(--tinta); color: var(--crema); padding: 12px 18px; border-radius: 999px; }
/* el minimapa propio: papel blanco y tinta, como el logo */
.mapa.con-mapa { background: #FCFAF6; }
.mapa .maplibregl-canvas { outline: none; }
.mapa .maplibregl-ctrl-group { background: #FCFAF6; border: 1px solid var(--tinta); border-radius: 10px; box-shadow: none; overflow: hidden; }
.mapa .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.mapa .maplibregl-ctrl-group button + button { border-top: 1px solid var(--tinta); }
.mapa .maplibregl-ctrl-attrib { font-size: 10px; line-height: 1.3; background-color: rgba(252, 250, 246, .85); color: var(--gris); }
.mapa .maplibregl-ctrl-attrib a { color: inherit; }
.mapa .maplibregl-cooperative-gesture-screen { background: rgba(23, 20, 19, .72); font: 600 1rem/1.3 var(--sans); }
/* el pigeon pintado, parado sobre el local, con orilla blanca como calcomanía para que se lea encima de las calles.
   El rollo no está al centro del dibujo (la cola es larga): se recorre a la izquierda para que el rollo caiga en el punto. */
.pin { display: block; width: 72px; cursor: pointer; }
.pin img {
  display: block; width: 100%; height: auto; transform: translateX(-20.5%);
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 3px rgba(23, 20, 19, .3));
}
.pin-nombre {
  position: absolute; left: calc(80% + 2px); top: 52%; white-space: nowrap;
  background: var(--tinta); color: #fff; font: 600 12px/1 var(--sans); padding: 6px 9px; border-radius: 999px;
}
@media (min-width: 900px) { .ubicacion { padding: 90px 0; } .ubicacion-rejilla { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: stretch; } .mapa { min-height: 420px; } }

/* ---------- preguntas ---------- */
.preguntas { padding: 56px 0 64px; }
.preguntas h2 { font-size: clamp(1.9rem, 7vw, 2.8rem); margin-bottom: 18px; }
details { border-bottom: 1px solid var(--crema-3); }
summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; font-weight: 600; position: relative; font-size: 1.02rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--sans); transition: transform .2s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding: 0 0 18px; color: #3b3532; max-width: 62ch; }

/* ---------- pie ---------- */
.pie { background: var(--carbon); color: var(--hueso); padding: 52px 0 24px; }
.pie-rejilla { display: grid; gap: 28px; }
.pie-logo { width: 200px; margin-bottom: 12px; }
.pie h3 { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: 12px; }
.pie p { color: var(--hueso-2); margin-bottom: 6px; }
.pie a { text-decoration: none; color: var(--hueso); }
.pie a:hover { text-decoration: underline; }
/* iconos del pie: Instagram, WhatsApp, llamar y Maps */
.pie-iconos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.pie-iconos a { display: grid; justify-items: center; gap: 7px; color: var(--hueso-2); }
.pie-iconos a:hover { text-decoration: none; color: var(--hueso); }
.pie-icono {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carbon-2); border: 1px solid var(--carbon-3); color: var(--hueso);
  transition: border-color .2s, color .2s, transform .15s;
}
.pie-icono .ico { width: 24px; height: 24px; }
.pie-iconos a:hover .pie-icono { border-color: var(--acento-osc); color: var(--acento-osc); }
.pie-iconos a:active .pie-icono { transform: scale(.94); }
.pie-etiqueta { font-size: .74rem; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.6fr 1fr; } }
.pie-legal { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--carbon-3); font-size: .8rem; color: var(--hueso-2); }

/* ---------- barra inferior (celular) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tab) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--carbon); color: var(--hueso);
}
.tabbar a, .tabbar button {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px; text-decoration: none;
  font: 500 .72rem/1 var(--sans); color: var(--hueso-2); transition: color .2s;
}
.tabbar .ico { width: 24px; height: 24px; }
.tabbar a:hover, .tabbar button:hover, .tabbar .activo { color: var(--hueso); }
.tabbar .activo::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--acento-osc); border-radius: 0 0 2px 2px; }
/* "Pedir": con algo en el pedido se vuelve un globo rojo que sobresale de la barra, con cuántos platillos y el total debajo.
   Así no tapa nada de la página (antes era una barra ancha encima de los botones de la portada). */
.tab-globo { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s; }
.tabbar .tab-globo .cuenta { top: -6px; right: -12px; }
body.con-pedido .tab-globo { width: 54px; height: 54px; margin-top: -30px; background: var(--rojo); color: #fff; box-shadow: 0 0 0 4px var(--carbon), 0 8px 20px rgba(0, 0, 0, .35); }
body.con-pedido .tab-globo .ico { width: 26px; height: 26px; }
body.con-pedido .tabbar .tab-globo .cuenta { top: -3px; right: -5px; background: #fff; color: var(--rojo); }
body.con-pedido .tab-texto { color: var(--hueso); font-weight: 700; font-variant-numeric: tabular-nums; }
.tab-globo.brinca { animation: globo .4s var(--ease); }
@keyframes globo { 40% { transform: scale(1.14); } }
@media (min-width: 900px) { .tabbar { display: none; } }

/* globo del pedido en computadora: carrito redondo abajo a la derecha con el número de platillos */
.globo-pedido {
  position: fixed; right: max(28px, env(safe-area-inset-right) + 12px); bottom: max(28px, env(safe-area-inset-bottom) + 12px); z-index: 39; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rojo); color: #fff; box-shadow: 0 10px 28px rgba(120, 25, 20, .38);
  transition: transform .3s var(--ease), opacity .3s;
}
.globo-pedido .ico { width: 28px; height: 28px; }
.globo-pedido .cuenta { top: -2px; right: -2px; background: #fff; color: var(--rojo); box-shadow: 0 0 0 2px var(--rojo); }
.globo-pedido:hover { transform: scale(1.06); }
.globo-pedido[hidden] { display: grid; transform: scale(.4); opacity: 0; pointer-events: none; }
@media (max-width: 899px) { .globo-pedido { display: none !important; } }
body.con-pedido { padding-bottom: calc(var(--tab) + 30px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.con-pedido { padding-bottom: 100px; } }
body.dialogo-abierto .globo-pedido { opacity: 0; pointer-events: none; }

/* ---------- avisos ---------- */
.aviso-flotante {
  position: fixed; left: 50%; top: calc(var(--cab) + 10px); z-index: 80; transform: translateX(-50%);
  background: var(--tinta); color: var(--crema); padding: 12px 16px; border-radius: 12px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  display: flex; gap: 14px; align-items: center; width: max-content; max-width: calc(100% - 32px); animation: sube .3s var(--ease);
}
.aviso-flotante button { color: #ffb3ae; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@keyframes sube { from { opacity: 0; transform: translate(-50%, -12px); } }
@media (min-width: 900px) { .aviso-flotante { top: calc(var(--cab) + 16px); } }

/* ---------- diálogos ---------- */
.dialogo { position: fixed; left: 0; right: 0; top: var(--vv-arriba, 0px); height: var(--vv-alto, 100%); z-index: 50; }
.dialogo[hidden] { display: none; }
.velo { position: absolute; inset: 0; background: rgba(19, 17, 16, .55); animation: aparece .25s ease; }
@keyframes aparece { from { opacity: 0; } }
.hoja-caja {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: min(92svh, calc(var(--vv-alto, 100svh) - 12px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--crema); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom);
  animation: hoja .38s var(--ease);
}
@keyframes hoja { from { transform: translateY(100%); } }
/* tableta de pie y celular acostado: la hoja va centrada y no tan ancha (a 820 px los − y + quedaban lejísimos del nombre) */
@media (min-width: 700px) and (max-width: 899px) { .hoja-caja { width: min(620px, 100% - 48px); margin-inline: auto; } }
.cerrar {
  position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(246, 241, 233, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
@media (min-width: 900px) {
  .hoja-caja { left: 50%; top: 50%; bottom: auto; width: min(920px, 100% - 48px); max-height: min(88vh, 760px); border-radius: 20px; transform: translate(-50%, -50%); animation: modal .3s var(--ease); }
  @keyframes modal { from { opacity: 0; transform: translate(-50%, -46%); } }
  .hoja-pedido .hoja-caja { width: min(520px, 100% - 48px); }
}

/* ficha del platillo */
.ficha { display: grid; }
.ficha-foto { position: relative; aspect-ratio: 4 / 5; max-height: 52svh; width: 100%; overflow: hidden; background: var(--crema-2); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-foto.sin-foto { aspect-ratio: auto; height: 190px; }
.ficha-foto .pendiente img { width: 30%; max-width: 110px; }
.ficha-foto .pendiente span { font-size: .78rem; }
.ficha-texto { padding: 20px 20px 24px; display: grid; gap: 12px; align-content: start; }
.ficha-texto h2 { font-size: 2rem; padding-right: 30px; }
.ficha-sub { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ficha-desc { color: #3b3532; }
.ficha-aviso { color: var(--gris); font-style: italic; }
.ficha-precios { display: flex; align-items: baseline; gap: 18px; font-size: .9rem; color: var(--gris); }
.ficha-precios b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ficha-precios .actual b { font-size: 1.25rem; }
.ficha-precios .sin-precio { color: var(--tinta); font-weight: 600; font-size: 1rem; }
.mini-contador { display: inline-flex; align-items: center; gap: 2px; }
.mini-contador button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--crema-3); }
.mini-contador button:disabled { opacity: .3; }
.mini-contador output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-compra { display: flex; gap: 10px; align-items: center; margin-top: 4px; position: sticky; bottom: 0; background: var(--crema); padding: 12px 0 4px; }
.ficha-compra .btn { flex: 1; }
.ficha-solo { background: var(--crema-2); padding: 14px; border-radius: 12px; font-size: .93rem; }
.ficha-nota-llevar { font-size: .86rem; color: var(--gris); margin-bottom: -6px; }
@media (min-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 520px; }
  .ficha-foto, .ficha-foto.sin-foto { max-height: none; height: 100%; aspect-ratio: auto; }
  .ficha-texto { padding: 36px 32px 28px; }
  .ficha-texto h2 { font-size: 2.4rem; }
}

/* pedido */
.pedido { padding: 22px 20px 26px; display: grid; gap: 16px; }
.pedido h2 { font-size: 2rem; }
.lineas { list-style: none; margin: 0; padding: 0; display: grid; }
.lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--crema-3); }
.lineas .ln-nombre { font-weight: 600; }
.lineas .ln-det { grid-column: 1; font-size: .84rem; color: var(--gris); overflow-wrap: anywhere; }
.lineas .mini-contador { grid-row: span 2; grid-column: 2; }
.lineas .ln-precio { grid-column: 1; font-size: .9rem; font-variant-numeric: tabular-nums; }
.lineas .ln-extras { grid-column: 1; justify-self: start; font: 600 .84rem/1.2 var(--sans); color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.pedido-total { display: flex; justify-content: space-between; font-size: 1.15rem; }
.pedido-total b { font-variant-numeric: tabular-nums; }
.pago { font-size: .9rem; background: var(--crema-2); padding: 12px 14px; border-radius: 12px; }
.pedido .campos { grid-template-columns: 1fr; }
/* dos pasos: 1) bebidas y extras con toques, 2) entrega, nombre y enviar */
.paso-cuenta { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: -8px; }
.pedido h2:focus { outline: none; }
.paso-bajada { color: var(--gris); margin-top: -6px; }
/* aviso cuando el restaurante está cerrado: se puede pedir, pero se sabe para cuándo es */
.aviso-horario { display: flex; gap: 10px; align-items: flex-start; background: var(--crema-2); border-radius: 12px; padding: 12px 14px; font-size: .9rem; line-height: 1.4; }
.aviso-horario .ico { flex: none; margin-top: 1px; }
/* aviso de pedido ya mandado: el pedido sigue ahí, pero se puede empezar uno nuevo */
.aviso-enviado { display: grid; grid-template-columns: auto 1fr; gap: 10px 10px; align-items: start; background: #EAF3E4; border-radius: 12px; padding: 12px 14px; font-size: .9rem; line-height: 1.4; }
.aviso-enviado .ico { margin-top: 1px; color: #2E6B34; }
.aviso-enviado .btn { grid-column: 1 / -1; justify-self: start; min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.paso-grupo h3 { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
.paso-grupo .mini-contador { margin-left: 2px; }
.paso-pie { position: sticky; bottom: 0; z-index: 2; background: var(--crema); padding: 10px 0 4px; margin-top: -4px; }
.paso-pie .btn .ico:last-child { margin-left: 2px; }
.paso-pie .btn-texto { margin-top: 2px; padding: 6px 12px; }   /* "Vaciar pedido", pegado abajo junto a "Continuar" */
/* cabecera fija del pedido: barra de pasos (volver al menú o saltar entre pasos) y el botón de cerrar */
.pedido-cabeza { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 10px 8px; background: var(--crema); border-bottom: 1px solid var(--crema-3); }
.pedido-cabeza .cerrar { position: static; float: none; flex: none; margin: 0 0 0 auto; box-shadow: none; background: transparent; }
.pasos-pedido { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pasos-pedido button { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 6px; border-radius: 10px; font: 600 .8rem/1.1 var(--sans); color: var(--gris); text-align: left; }
.pasos-pedido [data-ir-paso="menu"] { flex: none; padding-right: 10px; margin-right: 2px; border-radius: 10px 0 0 10px; box-shadow: 1px 0 0 var(--crema-3); }
.pasos-pedido .pp-num { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: .7rem; font-variant-numeric: tabular-nums; }
.pasos-pedido [aria-current="step"] { color: var(--tinta); }
.pasos-pedido [aria-current="step"] .pp-num { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
@media (hover: hover) { .pasos-pedido button:not([aria-current]):hover { color: var(--tinta); background: var(--crema-2); } }
.pedido-cabeza ~ .pedido { padding-top: 18px; }
.rollos-extras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.re { border: 1px solid var(--crema-3); border-radius: 14px; background: #FBF8F3; overflow: hidden; scroll-margin: 76px 0 84px; }
.re-fila { display: flex; align-items: center; padding-right: 10px; }
.re-cabeza { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; text-align: left; }
.re-fila .mini-contador { flex: none; }
.re-foto { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; background: var(--crema-2); display: grid; place-items: center; }
.re-foto img { width: 100%; height: 100%; object-fit: cover; }
.re-foto .re-sin { width: 68%; height: auto; object-fit: contain; }
.re-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.re-sel { font-size: .84rem; color: var(--gris); overflow-wrap: anywhere; }
/* celulares muy angostos (320 px): foto más chica para que el nombre del rollo quepa */
@media (max-width: 359px) {
  .re-cabeza { gap: 8px; padding-left: 10px; }
  .re-foto { width: 36px; height: 36px; }
}
.re-cabeza > .ico { flex: none; transform: rotate(90deg); transition: transform .2s ease; color: var(--gris); }
.re-cabeza[aria-expanded="true"] > .ico { transform: rotate(-90deg); }
.re-opciones { padding: 0 12px 12px; display: grid; gap: 8px; border-top: 1px solid var(--crema-3); }
/* con alga o sin alga: cada rollo se contesta antes de seguir; si falta y tocan "Continuar", la tarjeta se marca en rojo */
.re-alga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 12px 12px; }
.re-alga-txt { flex: 1 1 auto; font-size: .86rem; font-weight: 600; }
.re-alga-op { display: flex; gap: 6px; }
.re-alga .opcion { min-height: 40px; padding: 6px 14px; font-size: .88rem; }
.re.falta { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
.re.falta .re-alga-txt { color: var(--rojo); }
.paso-falta { margin: 0 0 8px; text-align: center; font-size: .84rem; font-weight: 600; color: #A3271F; }
/* extras de cada rollo: lista con − y +, como las bebidas */
.re-lista { margin: 0; }
.re-lista li { gap: 10px; min-height: 0; padding: 6px 0; }
.re-lista li:last-child { border-bottom: 0; }
.re-lista .ls-dibujo { width: 44px; height: 44px; background: var(--crema); }
/* en el pedido, bebidas y extras llevan el precio debajo del nombre */
.re-lista .ls-nombre, #acompBebidas .ls-nombre { font-size: .93rem; font-weight: 600; line-height: 1.2; }
.re-lista .ls-nombre small, #acompBebidas .ls-nombre small { display: block; font-size: .78rem; font-weight: 400; color: var(--gris); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- el plato de cada rollo (papel crema; plato blanco de porcelana) ----------
   Celular: todo en una columna. Computadora: el plato a la izquierda y lo demás a la derecha. */
.estrella { background: var(--crema); color: var(--tinta); overflow-y: auto; overscroll-behavior: contain; animation: aparece .3s ease; }
.est-caja { width: min(820px, 100%); margin: 0 auto; padding: 8px var(--orilla) calc(20px + env(safe-area-inset-bottom)); min-height: 100%; display: flex; flex-direction: column; }
.est-barra { display: flex; align-items: center; gap: 4px; height: 56px; }
.est-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta); }
.est-btn:hover { background: var(--crema-2); }
.est-cuenta { font-size: .84rem; color: var(--gris); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.est-cerrar { margin-left: auto; }
.est-titulo { text-align: center; margin-top: 2px; }
.est-cat { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); margin-bottom: 8px; }
.est-titulo h2 { font-size: clamp(2rem, 8vw, 3rem); }
/* rollos de arroz de color (Halloween): la misma lámina, con el arroz teñido; el alga casi no cambia porque es oscura */
.pl-lamina.arroz-negro { filter: brightness(.36) contrast(1.15); }
.pl-lamina.arroz-morado { filter: sepia(1) saturate(3.2) hue-rotate(225deg) brightness(.72); }
.pl-lamina.arroz-verde { filter: sepia(1) saturate(2.3) hue-rotate(50deg) brightness(.66); }
/* isolation: las piezas llevan z-index altos para encimarse bien entre ellas; así no se pintan encima del botón de Agregar */
.escenario { position: relative; isolation: isolate; width: calc(100% + 2 * var(--orilla)); max-width: 640px; aspect-ratio: 1000 / 700; margin: 4px auto 0; margin-inline: max(calc(-1 * var(--orilla)), calc((100% - 640px) / 2)); }
.pl { position: absolute; display: block; pointer-events: none; }
.pl-plato, .pl-lamina { height: auto; }
.pl-sombra { border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 46, 36, .32), transparent); }
.pl-ing, .pl-pieza { transform-origin: 0 0; }
.pl-ing img { display: block; width: 100%; transform: translate(-50%, -50%) scaleY(.8) rotate(90deg); filter: drop-shadow(0 2px 2px rgba(23, 20, 19, .25)); }
.pl-pieza img { display: block; width: 100%; transform: translate(-50%, -92%); filter: drop-shadow(0 4px 4px rgba(23, 20, 19, .22)); }
.pl-num { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--rojo); color: #fff; font: 700 12px/22px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--crema); }
.pl-vacio { transform: translate(-50%, -50%); margin: 0; white-space: nowrap; font: italic 500 clamp(1rem, 3.6vw, 1.6rem)/1 var(--serif); color: #B9B0A6; }   /* gris cálido: se lee sobre el plato negro sin gritar */
.est-otra { position: absolute; right: 0; top: 0; z-index: 950; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gris); border: 1px solid var(--crema-3); background: var(--crema); opacity: 0; transition: opacity .4s; pointer-events: none; }
.est-otra.on { opacity: 1; pointer-events: auto; }
.est-otra:hover { color: var(--tinta); border-color: var(--gris); }
.est-ingredientes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.est-ingredientes[hidden], .est-lleva[hidden], .est-aviso[hidden] { display: none; }
.est-ingredientes h3, .est-lleva h3 { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.est-ingredientes ol, .est-ingredientes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.est-ingredientes li {
  display: flex; align-items: center; gap: 8px; font-size: .92rem; line-height: 1.25;
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s var(--ease); transition-delay: calc(var(--d, 0) * 70ms);
}
.est-ingredientes li .num { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
#estAfuera li::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 7.5px; border-radius: 50%; background: var(--tinta); }
.est-ingredientes.on li { opacity: 1; transform: none; }
.est-lleva { margin-top: 12px; }
.est-espera { text-align: center; color: var(--gris); font-size: .86rem; margin: 0 auto 16px; max-width: 34ch; }
.est-espera em { display: block; font: italic 500 1.2rem/1.3 var(--serif); color: var(--tinta); margin-bottom: 2px; }
.est-lleva p:last-child { font-size: .95rem; line-height: 1.5; }
.est-aviso { margin-top: 14px; font-size: .78rem; color: var(--gris); text-align: center; }
.est-pie {
  position: sticky; bottom: 0; margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(rgba(246, 241, 233, 0), var(--crema) 30%);
}
.est-foto { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.est-foto[hidden] { display: none; }
.est-precio { flex: 1; display: grid; }
.est-precio span { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.est-precio small { color: var(--gris); font-size: .78rem; }
.est-pie .btn { min-width: 150px; }
@media (min-width: 900px) {
  .est-caja {
    width: min(1180px, 100%); padding-top: 16px; display: grid; column-gap: 48px; align-content: center;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    grid-template-areas: "barra barra" "esc titulo" "esc ingr" "esc aviso" "esc pie" "esc .";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .est-barra { grid-area: barra; }
  .est-titulo { grid-area: titulo; text-align: left; margin-top: 24px; }
  .est-pica { justify-content: flex-start; }
  .est-titulo h2 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  /* arriba, a la altura del título: centrado en todo el alto, en pantallas altas (iPad Pro de pie) el plato
     quedaba muy abajo, lejos de su nombre (prueba dura, 13 oct) */
  .escenario { grid-area: esc; align-self: start; margin: 24px 0 0; width: 100%; max-width: none; }
  .est-ingredientes, .est-lleva { grid-area: ingr; margin-top: 22px; }
  .est-espera { text-align: left; margin-left: 0; }
  .est-aviso { grid-area: aviso; text-align: left; }
  .est-pie { grid-area: pie; position: static; background: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--crema-3); }
}

/* ---------- charolas: la charola redonda que arma la paloma (13 oct 2026) ----------
   Usa la ventana del plato de cada rollo (.estrella). En celular la barra y la charola se quedan arriba
   mientras bajas por la lista; en computadora, la charola a la izquierda y la lista a la derecha. */
.charola .est-barra { position: sticky; top: 0; z-index: 6; background: var(--crema); }
.ch-sub { color: var(--gris); font-size: .88rem; margin-top: 6px; }
/* el fondo crema se alarga a los lados (sombra recortada arriba y abajo): en tableta de pie la charola mide 640 y la
   lista, que pasa por debajo al bajar, se asomaba a los lados (prueba dura, 13 oct) */
.ch-escenario { aspect-ratio: 1000 / 570; position: sticky; top: 56px; z-index: 5; background: var(--crema); box-shadow: 0 0 0 100vmax var(--crema); clip-path: inset(0 -100vmax -12px); }
.ch-escenario::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: linear-gradient(var(--crema), rgba(246, 241, 233, 0)); pointer-events: none; }
.pl[hidden] { display: none; }
.ch-pz { height: auto; transform-origin: 50% 92%; filter: drop-shadow(0 4px 4px rgba(23, 20, 19, .22)); }
.charola.es-dubai .ch-pz { pointer-events: auto; cursor: pointer; }
.ch-num { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--rojo); color: #fff; font: 700 12px/22px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--crema); }
.ch-hueco { width: 9%; aspect-ratio: 2.4; transform: translate(-50%, -50%); border: 1.6px dashed rgba(233, 223, 207, .5); border-radius: 50%; }
.ch-rollo { height: auto; }
/* la paloma clara lleva un contorno oscuro finito: se lee también cuando vuela fuera de la charola, sobre el crema */
.ch-paloma { height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0 1.2px rgba(23, 20, 19, .95)) drop-shadow(0 0 1.2px rgba(23, 20, 19, .8)) drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.ch-panel { margin-top: 14px; }
.ch-ayuda { font-size: .88rem; color: var(--gris); min-height: 2.7em; margin: 0 0 8px; }
.ch-tuya { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ch-tuya:empty { display: none; }
.ch-tuya .num { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.ch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 2px 3px 4px; border-radius: 999px; background: #fff; border: 1px solid var(--crema-3); font-size: .84rem; }
.ch-chip small { color: var(--gris); }
.ch-chip button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gris); }
.ch-chip button .ico { width: 14px; height: 14px; }
.ch-tuya.fija { display: grid; gap: 8px; }
.ch-item { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .95rem; }
.ch-item-t { flex: 1; min-width: 0; }
.ch-te { color: var(--gris); padding-left: 1px; }
.ch-te .ico { width: 20px; height: 20px; flex: none; }
.ch-grupo h3 { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: 16px 2px 8px; }
.ch-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ch-rol { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--crema-3); border-radius: 14px; background: #fff; }
.ch-rol img { width: 46px; height: 46px; object-fit: contain; }
.ch-rol img.sin { opacity: .45; padding: 4px; }
.ch-rol-t { min-width: 0; }
.ch-rol-t b { display: block; font: 600 1rem/1.15 var(--serif); }
.ch-rol-t small { display: block; color: var(--gris); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-algas { display: flex; gap: 5px; flex: none; }
.ch-alga { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(200, 50, 47, .5); background: #fff; color: var(--tinta); font: 600 .78rem/1 var(--sans); white-space: nowrap; }
.ch-alga i { font-style: normal; }
.ch-alga.on, .ch-alga[aria-pressed="true"] { background: var(--rojo); color: #fff; border-color: transparent; }
.ch-alga:disabled { opacity: .35; }
.ch-item.falta .ch-alga { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(200, 50, 47, .18); }
#chAgregar[aria-disabled="true"] { opacity: .6; }
.charola.es-dubai .est-precio span { font-size: 1.02rem; line-height: 1.2; }
.charola .est-pie .btn { min-width: 170px; }
.ch-vaciar { margin: 0 0 10px; padding: 6px 2px; font-size: .86rem; }
/* ¿le agregas algo?: sale con la charola completa y hay que contestarlo para poder agregarla */
.ch-extras { margin: 4px 0 14px; padding: 14px 14px 10px; border: 1px solid var(--crema-3); border-radius: 16px; background: #fff; }
.ch-extras h3 { font: 600 1.2rem/1.2 var(--serif); }
.ch-extras-sub { color: var(--gris); font-size: .84rem; margin: 4px 0 10px; }
.ch-si-no { flex-wrap: wrap; }
.ch-si-no .ch-alga { min-height: 42px; padding: 0 16px; font-size: .86rem; }
.ch-extras-lista { margin-top: 10px; border-top: 1px solid var(--crema-3); }
/* cambio de ingrediente e ingrediente extra: justo debajo de su extra, "Cambiar [pepino] por [aguacate]",
   un renglón por cada uno que se pide */
.lista-simple li.con-cual { border-bottom: 0; }
.lista-simple li.cual-li { display: block; min-height: 0; padding: 0 0 12px; }
.cual { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.cual legend { padding: 0; margin-bottom: 4px; font-size: .8rem; font-weight: 600; color: var(--gris); }
.cual-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: end; }
.cual-fila.cambio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cual-fila.con-num { grid-template-columns: 24px minmax(0, 1fr); }
.cual-fila.cambio.con-num { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
.cual-num { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 11px; border-radius: 50%; background: var(--tinta); color: var(--crema); font-size: .74rem; font-weight: 700; }
.cual-campo { display: grid; gap: 4px; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--gris); }
.cual-campo input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--crema-3); background: #fff; color: var(--tinta); font-size: 1rem; font-weight: 400; }
.cual-campo input:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
@media (max-width: 359px) { .cual-fila { gap: 6px; } .cual-campo input { padding: 10px 8px; } }
.cual-campo input.falta { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(200, 50, 47, .18); }
/* ingrediente extra, marisco y aderezo: el renglón abre sus opciones, cada una con − y + */
.lista-simple li.ex-grupo { padding: 0; }
.lista-simple li.ex-grupo.abierto { border-bottom: 0; }
.ex-grupo-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ex-grupo-btn .ls-nombre { font-weight: 600; }
.ex-grupo-btn .ls-nombre small { display: block; font-size: .78rem; font-weight: 400; color: var(--gris); margin-top: 2px; overflow-wrap: anywhere; }
.ex-grupo-ver { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 4px 0 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--rojo); }
.ex-grupo-ver .ico { transform: rotate(90deg); transition: transform .2s ease; }
.ex-grupo-btn[aria-expanded="true"] .ex-grupo-ver .ico { transform: rotate(-90deg); }
.ex-grupo-btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 10px; }
.lista-simple li.ex-ops { display: block; min-height: 0; padding: 0 0 10px; }
.ex-ops-lista { list-style: none; margin: 0 0 0 21px; padding: 0 0 0 14px; border-left: 2px solid var(--crema-3); }
.lista-simple .ex-ops-lista li { min-height: 46px; padding: 3px 0; gap: 10px; }
.lista-simple .ex-ops-lista li:last-child { border-bottom: 0; }
.ex-ops-lista .ls-nombre { font-size: .94rem; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) { .ch-alga:not(:disabled):hover { background: rgba(200, 50, 47, .08); } .ch-alga.on:hover, .ch-alga[aria-pressed="true"]:hover { background: var(--rojo); } }
@media (min-width: 900px) {
  .ch-caja { grid-template-areas: "barra barra" "esc titulo" "esc panel" "esc pie"; grid-template-rows: auto auto 1fr auto; align-content: start; }
  .ch-escenario { position: sticky; top: 72px; align-self: start; box-shadow: none; clip-path: none; }
  .ch-panel { grid-area: panel; min-height: 0; }
  .charola .est-pie { position: sticky; bottom: 0; background: var(--crema); padding-bottom: 16px; }
}
/* celular acostado: en una columna el plato o la charola no cabían en los ~375 px de alto, tapaban el botón de Agregar
   y la lista de la charola pasaba escondida debajo (prueba dura, 13 oct). Va como en computadora: el plato o la
   charola a la izquierda, fijos, y lo demás a la derecha con el botón siempre abajo */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  .est-caja {
    display: grid; column-gap: 24px; align-content: start;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 1fr);
    grid-template-areas: "barra barra" "esc titulo" "esc ingr" "esc aviso" "esc pie" "esc .";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .est-barra { grid-area: barra; height: 48px; }
  .est-titulo { grid-area: titulo; text-align: left; }
  .est-pica { justify-content: flex-start; }
  .est-titulo h2 { font-size: 1.9rem; }
  .escenario { grid-area: esc; align-self: start; position: sticky; top: 8px; margin: 0; width: 100%; max-width: none; }
  .est-ingredientes, .est-lleva { grid-area: ingr; }
  .est-espera { text-align: left; margin-left: 0; }
  .est-aviso { grid-area: aviso; text-align: left; }
  .est-pie { grid-area: pie; }
  .ch-caja { grid-template-areas: "barra barra" "esc titulo" "esc panel" "esc pie"; grid-template-rows: auto auto 1fr auto; }
  .ch-escenario { top: 48px; box-shadow: none; clip-path: none; }
  .ch-panel { grid-area: panel; min-height: 0; }
  .charola .est-pie { background: var(--crema); padding-bottom: 10px; }
}
/* celular angosto (iPhone SE de 320, Android de 360): en la lista de la Dubai el nombre del rollo se enciman con
   «Con alga · Sin alga». Debajo de 360 los botones bajan a su propio renglón; arriba, el nombre largo se parte con
   guion (Guamu-chilito). Y el botón de abajo deja de pedir 150 px para que el precio no quede en cinco renglones */
/* solo palabras de 10 letras o más, con 5 de cada lado: «Guamu-chilito» sí, «espe-cial» no (Safari partía de más) */
.ch-rol-t b { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
@media (max-width: 359px) {
  .ch-rol { grid-template-columns: 46px minmax(0, 1fr); row-gap: 6px; }
  .ch-rol .ch-algas { grid-column: 2; }
  .est-pie .btn, .charola .est-pie .btn { min-width: 0; }
}

/* ---------- secciones con video (Reservar y Conócenos; se cargan al llegar, mientras se ve la foto fija) ----------
   Celular: el video es la portada de la sección, de orilla a orilla, con el título encima; el contenido sube
   sobre la orilla de abajo como una hoja. Computadora: el video ocupa media pantalla hasta la orilla y se
   queda fijo mientras lees o llenas el formulario del otro lado. */
.con-video { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; border-top: 0; }
.video-lado { grid-area: 1 / 1; position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: 76svh; overflow: hidden; background: var(--carbon); }
.video-lado video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-lado::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(19, 17, 16, .86) 0%, rgba(19, 17, 16, .45) 34%, rgba(19, 17, 16, 0) 60%); }
.video-lado figcaption {
  position: absolute; left: var(--orilla); top: 16px; z-index: 1; font-size: .76rem; font-weight: 500; color: #fff;
  background: rgba(19, 17, 16, .55); padding: 6px 11px; border-radius: 999px;
}
.lado-intro { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; padding: 0 var(--orilla) 50px; color: var(--hueso); }
.lado-intro .ceja { color: rgba(243, 236, 226, .78); }
.lado-intro .intro-sub { color: rgba(243, 236, 226, .88); }
.lado-cuerpo { grid-area: 2 / 1; position: relative; z-index: 2; min-width: 0; margin-top: -24px; padding: 26px var(--orilla) 56px; background: var(--crema); border-radius: 22px 22px 0 0; }
@media (min-width: 900px) {
  .con-video { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: auto 1fr; }
  .video-lado { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: var(--cab); height: calc(100svh - var(--cab)); aspect-ratio: auto; max-height: none; }
  .video-lado::after { background: linear-gradient(to top, rgba(19, 17, 16, .55) 0%, rgba(19, 17, 16, 0) 26%); }
  .video-lado figcaption { top: auto; bottom: 22px; left: 24px; }
  .lado-intro, .lado-cuerpo { grid-column: 2; padding-inline: clamp(32px, 5vw, 84px); }
  .lado-intro { grid-row: 1; align-self: start; padding-top: 84px; padding-bottom: 0; color: var(--tinta); }
  .lado-intro .ceja, .lado-intro .intro-sub { color: var(--gris); }
  .lado-cuerpo { grid-row: 2; margin: 0; padding-top: 26px; padding-bottom: 84px; background: none; border-radius: 0; }
  .lado-intro > *, .lado-cuerpo > * { max-width: 640px; }
  /* Conócenos: el video a la derecha y el texto centrado a lo alto, del otro lado */
  .video-derecha { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); grid-template-rows: 1fr auto auto 1fr; }
  .video-derecha .video-lado { grid-column: 2; grid-row: 1 / -1; }
  .video-derecha .lado-intro, .video-derecha .lado-cuerpo { grid-column: 1; }
  .video-derecha .lado-intro { grid-row: 2; padding-top: 0; }
  .video-derecha .lado-cuerpo { grid-row: 3; padding-bottom: 0; }
}
@media (min-width: 900px) {
  .pedir-rejilla { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}

/* ---------- intros animadas y transición entre secciones ---------- */
/* Pincelada: el título se pinta de izquierda a derecha. Corte: una línea roja lo cruza y lo deja escrito.
   El estado oculto solo aplica con JS (clase .js en <html>), para que sin JS todo se vea. */
.js .intro:not(.vista) .ceja, .js .intro:not(.vista) .intro-sub { opacity: 0; }
.intro.vista .ceja { animation: aparece .45s ease both; }
.intro.vista .intro-sub { animation: aparece .55s ease .5s both; }
/* el dibujo de la sección cae como sello, un poco girado, mientras el título se pinta */
.js .intro:not(.vista) .sec-dib { opacity: 0; }
.intro.vista .sec-dib { animation: sello-dib .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes sello-dib { from { opacity: 0; transform: scale(.75) rotate(-10deg); } }
.anim-pincel { padding: .06em .14em .16em 0; margin: -.06em -.14em -.16em 0; }
.js .intro .anim-pincel {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.intro.vista .anim-pincel { animation: pincel .85s cubic-bezier(.3, .6, .2, 1) .08s both; }
.js .intro .anim-pincel.listo { -webkit-mask-image: none; mask-image: none; }
@keyframes pincel {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.anim-corte { position: relative; }
.js .intro .anim-corte { clip-path: inset(-20% 101% -20% -4%); }
.intro.vista .anim-corte { animation: corte .7s cubic-bezier(.45, 0, .55, 1) .12s both; }
.js .intro .anim-corte.listo { clip-path: none; }
.anim-corte::after {
  content: ''; position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: var(--acento-osc);
  transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.intro.vista .anim-corte::after { animation: linea .9s cubic-bezier(.45, 0, .55, 1) .12s both; }
@keyframes corte { from { clip-path: inset(-20% 101% -20% -4%); } to { clip-path: inset(-20% -4% -20% -4%); } }
@keyframes linea { 0% { transform: scaleX(0); opacity: 1; } 78% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.velo-nav { position: fixed; inset: 0; z-index: 25; background: var(--crema); opacity: 0; pointer-events: none; transition: opacity .28s ease-out; }
.velo-nav.on { opacity: 1; transition: opacity .17s ease-in; }

/* ---------- Halloween en toda la página (20 oct 2026, pedido de Daniel) ----------
   main.js pone los adornos (img.hw) solo mientras dura la sección de Halloween; los colores de fondo no cambian.
   En lo claro, el papel blanco del dibujo desaparece con multiply; en lo oscuro van en tinta crema (-claro) o con
   transparencia (velas). Lejos del texto y de los botones, sin recibir toques */
.halloween :is(#inicio, #estrella, #menu, #preguntas, .pie) { position: relative; }
.hw { position: absolute; height: auto; max-width: none; pointer-events: none; user-select: none; }
.hw:not([class*="-claro"]):not([class*="-color"]):not([class*="-trans"]) { mix-blend-mode: multiply; }
@keyframes hw-cuelga { from { transform: translateY(-14px); } to { transform: translateY(0); } }
@keyframes hw-flota { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(-8px, 6px) rotate(2deg); } }
.hw-luna { top: 6px; right: 0; width: clamp(66px, 9vw, 132px); opacity: .9; animation: hw-flota 6s ease-in-out infinite alternate; }
.hw-telarana-esquina-claro { top: 0; right: 0; width: clamp(110px, 15vw, 210px); opacity: .38; transform: scaleX(-1); }
.hw-arana-claro { top: 0; right: clamp(118px, 16vw, 230px); width: clamp(20px, 2.2vw, 28px); opacity: .75; transform-origin: top center; animation: hw-cuelga 5s ease-in-out infinite alternate; }
/* al final de algunos títulos, como un dibujito más del texto: así no tapan nada en ningún tamaño */
.hw-junto { white-space: nowrap; }
:is(#t-menu, #t-eventos, #t-conocenos) .hw { position: relative; display: inline-block; margin-left: .16em; }
#t-menu .hw-sushi-calabaza { width: .82em; vertical-align: -.06em; transform: rotate(-8deg); }
#t-eventos .hw-velas-color { width: .9em; vertical-align: -.1em; }
#t-conocenos .hw-murcielagos-vuelo-trans { width: 1.25em; vertical-align: .25em; opacity: .9; animation: hw-flota 5s ease-in-out infinite alternate; }
.hw-arana { top: -12px; right: 9%; width: clamp(20px, 2.4vw, 30px); opacity: .85; animation: hw-cuelga 4.4s ease-in-out infinite alternate; }
.hw-hojas { display: none; right: 3%; bottom: 4px; width: clamp(92px, 12vw, 160px); opacity: .9; }   /* solo con espacio a los lados */
/* telaraña: en celular arriba a la derecha (el título va a la izquierda); en computadora, en la esquina izquierda libre */
.hw-telarana-esquina { top: 0; right: 0; width: clamp(86px, 13vw, 190px); opacity: .5; transform: scaleX(-1); }
.hw-paloma-bruja-claro { right: 5%; top: 22px; width: clamp(58px, 8vw, 104px); opacity: .32; }
@media (max-width: 599px) { .hw-arana-claro { right: 7%; } .hw-telarana-esquina { width: 68px; } }
@media (min-width: 900px) {
  .hw-hojas { display: block; }
  .hw-telarana-esquina { right: auto; left: 0; transform: none; }
  .hw-paloma-bruja-claro { top: auto; bottom: 18px; }
}
/* la paloma de la portada con sombrero de bruja: main.js lo mueve con la corona (--x, --y: base de la corona; --a: giro).
   El ala del sombrero se apoya en la cabeza y tapa la corona: el punto de apoyo está al 73% de su alto */
.paloma-sombrero {
  position: absolute; left: var(--x, 68%); top: var(--y, 19%); z-index: 99; width: 25%; aspect-ratio: 240 / 230; pointer-events: none;
  transform: translate(-44%, -73%) rotate(var(--a, 0deg)); transform-origin: 44% 73%; opacity: 0; transition: opacity .4s ease;
}
.paloma-sombrero.on { opacity: 1; }
/* debajo del sombrero, un parche del color del papel de la pintura (#F6F1EA) borra las puntas de la corona que se asomaban */
.paloma-sombrero::before { content: ''; position: absolute; left: 6%; top: 30%; width: 84%; height: 46%; background: radial-gradient(closest-side, #F6F1EA 70%, rgba(246, 241, 234, 0) 100%); }
.paloma-sombrero::after { content: ''; position: absolute; inset: 0; background: url(/assets/dibujos/halloween/sombrero-trans.webp) center bottom / contain no-repeat; }
/* el sombrero de bruja, puesto en la esquina de «Tu pedido» (es un pseudo-elemento: la tarjeta se repinta con JS) */
.halloween #resumenPedido { position: relative; }
.halloween #resumenPedido::before {
  content: ''; position: absolute; top: -30px; right: -10px; width: 66px; aspect-ratio: 240 / 217; pointer-events: none;
  background: url(/assets/dibujos/halloween/sombrero.webp) center / contain no-repeat; transform: rotate(16deg); mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hw { animation: none !important; }   /* los adornos de Halloween se quedan quietos (con .01ms seguían brincando) */
  .js .intro .anim-pincel { -webkit-mask-image: none; mask-image: none; }
  .js .intro .anim-corte { clip-path: none; }
  .js .intro:not(.vista) .ceja, .js .intro:not(.vista) .intro-sub, .js .intro:not(.vista) .sec-dib { opacity: 1; }
}

/* iPhone y iPad con iOS 15 o anterior: no entienden cqw (iOS 15) ni svh (antes de 15.4). Sin esto la tarjeta de
   «Reservado» salía gigante encima del plato y la hoja del pedido podía pasar del alto de la pantalla (prueba dura, 13 oct).
   Van al final del archivo para ganarle a las reglas de arriba que usan esas unidades */
@supports not (width: 1cqw) {
  .rs-escena { --pw: min(calc((100vw - 2 * var(--orilla)) * .86), 400px); }
  @media (min-width: 900px) { .rs-escena { --pw: min(35vw, 540px); } }
}
@supports not (height: 1svh) {
  @media (max-width: 899px) { .hoja-caja { max-height: min(92vh, calc(var(--vv-alto, 100vh) - 12px)); } }
  @media (min-width: 900px) { .rs-escena, .video-lado { height: calc(100vh - var(--cab)); } }
}