/* ============================================================
   FANESCA — fanesca.css
   Composición de las pantallas del juego SOBRE el sistema de
   diseño (design-system.css). Aquí no se inventan colores ni
   sombras: todo sale de los tokens.

   ESCRITO DE UNA VEZ. La versión anterior era siete pasadas
   apiladas, cada una corrigiendo a la de abajo con !important;
   esto es una sola capa, en el orden en que se ve el juego:
   el marco, la portada, el recetario, el cuaderno, el mesón,
   las hojas emergentes, la cortina y el confeti. Lo que no
   está aquí no existe en pantalla.
   ============================================================ */

:root {
  /* 62px de contenido; el safe-area-inset-top se SUMA aparte (ver
     .juego-hud) — si no, en un iPhone con isla la cabecera del nivel
     queda debajo de la cámara */
  --prep-hud-h: calc(62px + env(safe-area-inset-top));
  --prep-ctrl-h: 74px;             /* la fila de botones del nivel */
  --dock-h: 84px;                  /* el dock «Sigue» al pie del recetario */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
/* Es un juego de mantener el dedo apretado: sin esto, el toque largo
   del fréjol dispara la selección de texto y la pantalla entera se
   pinta de celeste. Nada aquí se selecciona. */
html, body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; height: 100%; }

body {
  font-family: var(--font-text);
  color: var(--text);
  line-height: var(--lead);
  background: var(--noche-950);
  min-height: 100vh;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
svg { display: block; width: 100%; height: 100%; }
/* icons.js inyecta su bloque de <defs> como un <svg width="0" height="0">.
   La regla de arriba lo estiraría a pantalla completa y dejaría un
   scroll fantasma que en móvil se siente como "rebote". */
svg[width="0"] { width: 0; height: 0; }

/* ============================================================
   EL MARCO — un teléfono en medio de la mesa
   En un teléfono ocupa todo. En escritorio se ve como el juego que
   es: una columna con esquinas redondas sobre una sobremesa cálida
   desenfocada, no una página angosta perdida en un fondo gris.
   ============================================================ */
#stage {
  position: relative;
  width: 100%; max-width: var(--frame);
  margin: 0 auto;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--noche-900);
  box-shadow: var(--e-4);
}
@media (min-width: 600px) {
  body {
    background:
      radial-gradient(70% 60% at 50% 100%, rgba(224,138,69,.28), transparent 70%),
      radial-gradient(60% 50% at 20% 0%, rgba(255,211,106,.1), transparent 60%),
      var(--noche-950);
  }
}
@media (min-width: 600px) and (min-height: 760px) {
  #stage { height: min(100dvh, 920px); margin-top: calc((100dvh - min(100dvh, 920px)) / 2); border-radius: 34px; }
}

/* ---------- la cocina de noche: el fondo de las pantallas de papel ----------
   Una lumbre desde abajo (la hornilla), una viñeta que hunde las
   esquinas, y vapor que sube despacio. Lo llevan la portada, el
   recetario y el cuaderno; el mesón no, porque su fondo ES la mesa 3D. */
.fondo-cocina {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(224,138,69,.42) 0%, rgba(200,112,47,.16) 40%, transparent 72%),
    radial-gradient(80% 40% at 50% -10%, rgba(255,211,106,.12), transparent 70%),
    linear-gradient(180deg, var(--noche-900) 0%, var(--noche-800) 55%, var(--noche-900) 100%);
}
/* el grano fino de la pared, casi invisible, que quita lo "digital" */
.fondo-cocina::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,235,200,.012) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.02) 5px 6px);
}
/* la viñeta */
.fondo-cocina::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 50% 45%, transparent 55%, rgba(8,4,2,.55) 100%);
}
.vapor { position: absolute; inset: 0; }
.vapor i {
  position: absolute; bottom: -20%; left: var(--x, 50%);
  width: 140px; height: 220px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,240,220,.16), transparent 68%);
  filter: blur(18px);
  animation: vapor-sube var(--d, 14s) linear infinite;
  animation-delay: var(--t, 0s);
  will-change: transform, opacity;
}
@keyframes vapor-sube {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -120vh) scale(1.5); opacity: 0; }
}

/* ============================================================
   LAS PANTALLAS — y cómo se pasa de una a otra
   La que llega sube con resorte; la que se va se hunde un poco y
   se apaga. Dos capas que se cruzan, como en cualquier consola.
   ============================================================ */
.screen { display: none; position: relative; z-index: var(--z-scene); height: 100%; }
.screen.active { display: block; animation: pantalla-entra var(--dur-slow) var(--ease-out) both; }
.screen.saliendo {
  display: block; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  animation: pantalla-sale .32s var(--ease-in-out) both;
}
@keyframes pantalla-entra {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes pantalla-sale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px) scale(.97); }
}

/* ============================================================
   LA PORTADA — la pantalla de título
   Un lockup grande, los ingredientes flotando con la lumbre detrás,
   y UNA sola acción. Lo demás (reiniciar, versión, modo dev) vive
   al pie, en letra chica, como los créditos.
   ============================================================ */
.portada {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4);
  padding: calc(env(safe-area-inset-top) + var(--sp-6)) var(--sp-5) calc(env(safe-area-inset-bottom) + var(--sp-5));
  text-align: center;
}

/* los platos flotando sobre la lumbre: crecen hasta donde la
   pantalla dé, y el aire que sobra se reparte arriba y abajo */
.portada-escena {
  position: relative; flex: 1 1 auto; width: 100%;
  min-height: 160px; max-height: 440px;
  pointer-events: none;
}
.portada-lumbre {
  position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
  width: 320px; height: 220px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,211,106,.55) 0%, rgba(240,168,102,.25) 40%, transparent 70%);
  filter: blur(14px);
  animation: lumbre-late 4s ease-in-out infinite;
}
@keyframes lumbre-late { 50% { transform: translateX(-50%) scale(1.08); opacity: .85; } }
.portada-plato {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w, 88px);
  transform: translate(-50%, -50%);
  animation: plato-flota var(--d, 5s) ease-in-out infinite;
  animation-delay: var(--t, 0s);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
  will-change: transform;
}
.portada-plato .plate { width: 100%; }
@keyframes plato-flota {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
  50%      { transform: translate(-50%, calc(-50% - 12px)) rotate(calc(var(--r, 0deg) * -1)); }
}

/* el lockup */
.portada-lockup { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.portada-over {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--oro-300);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.portada-title {
  font-family: var(--font-display); font-size: clamp(3rem, 15vw, 4.2rem); font-weight: 800; line-height: .95;
  letter-spacing: -.02em;
  color: var(--oro-200);
  background: linear-gradient(180deg, #fff3cf 0%, var(--oro-300) 45%, var(--oro-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(120, 60, 10, .55)) drop-shadow(0 12px 24px rgba(0,0,0,.5));
  animation: titulo-entra .9s var(--ease-spring) both;
}
@keyframes titulo-entra { from { opacity: 0; transform: translateY(16px) scale(.92); } }
.portada-sub {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 600;
  color: rgba(255,246,232,.72);
}

/* la tarjeta de avance: sólo con partida guardada */
.portada-acciones { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); width: 100%; max-width: 360px; }
.portada-tarjeta {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  animation: pantalla-entra var(--dur-slow) var(--ease-out) both;
}
.portada-tarjeta .anillo { flex: 0 0 auto; --anillo-fondo: var(--noche-800); }
.portada-tarjeta-txt { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.portada-tarjeta-txt b {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; line-height: 1.15;
  color: var(--text-invert);
}
.portada-tarjeta-txt span, #portada-avance {
  font-family: var(--font-text); font-size: var(--t-sm); font-weight: 600;
  color: rgba(255,246,232,.7);
}
#btn-empezar { box-shadow: var(--gloss), inset 0 -3px 0 rgba(0,0,0,.18), 0 0 0 1px var(--oro-600), var(--e-3), var(--glow-oro); }

/* los créditos al pie */
.portada-secundario {
  display: flex; gap: var(--sp-2); justify-content: center; align-items: center; flex-wrap: wrap;
}
.portada-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .25rem .8rem;
  font-family: var(--font-text); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,246,232,.62);
  background: rgba(255,244,226,.05);
  border: 1.5px solid rgba(255,244,226,.12); border-radius: var(--r-pill);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  /* cursor: pointer no es decorativo: sin él, Safari en iOS no
     dispara click en lo que no considera interactivo */
  cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.portada-link:active { transform: scale(.95); background: rgba(255,244,226,.14); }
.portada-link--peligro { color: var(--brasa-400); border-color: rgba(229,83,61,.35); }
.portada-link.activo { color: var(--maiz-800); background: var(--oro-400); border-color: var(--oro-600); }
[data-version] { opacity: .55; }

/* ============================================================
   LA CONSOLA — el recetario y el cuaderno como pantallas de consola
   en vertical. Cabecera fija, pestañas, un carrusel de pantallas
   del ancho de la ventana y la barra de acción al pie. NADA SE
   DESPLAZA: cada pantalla cabe entera, y lo que no cabe se pasa
   de página, no se baja.
   ============================================================ */
.consola {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding-top: calc(env(safe-area-inset-top) + var(--sp-2));
}
.consola-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2);
}
.consola-head .sign { flex: 1; min-width: 0; }
.consola-anillo { flex: 0 0 auto; --anillo-fondo: var(--noche-800); width: 48px; height: 48px; }
.consola-anillo b { font-size: var(--t-2xs); }

/* ---- las pestañas: una por pantalla ---- */
.tabs {
  flex: 0 0 auto;
  display: flex; gap: .28rem;
  padding: .1rem var(--sp-4) var(--sp-2);
}
.tab {
  position: relative;
  flex: 1 1 0; min-width: 0; min-height: 38px;
  padding: .2rem .1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  color: rgba(255,246,232,.62);
  background: var(--vidrio);
  border: 1.5px solid var(--vidrio-borde);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tab:active { transform: scale(.94); }
.tab--activa {
  color: var(--maiz-800);
  background: linear-gradient(180deg, var(--oro-300), var(--oro-500));
  border-color: var(--oro-600);
  box-shadow: var(--glow-oro);
}
.tab--hecha::after {
  content: '✓'; position: absolute; top: -6px; right: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .55rem; color: #fff;
  background: var(--hoja-500); border: 2px solid var(--noche-900);
}
.tab--cerrada { opacity: .42; }

/* ---- el carrusel ---- */
.carrusel { position: relative; flex: 1 1 auto; min-height: 0; }
.carrusel .scroll {
  position: absolute; inset: 0;
  overflow: hidden; padding: 0;
  mask-image: none; -webkit-mask-image: none;
  touch-action: none;
}
.pista-paginas {
  display: flex; height: 100%; width: 100%;
  transition: transform .4s var(--ease-out);
  will-change: transform;
}
.pista-paginas > .pag {
  flex: 0 0 100%; width: 100%; height: 100%; min-width: 0;
  display: flex;
  padding: 2px var(--sp-4) var(--sp-2);
}
.pag > .pagina { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; font-size: 1.25rem;
  opacity: .9;
}
.flecha--izq { left: 2px; }
.flecha--der { right: 2px; }
.flecha:active { transform: translateY(-50%) scale(.9); }

/* ---- la barra de acción ---- */
.dock {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-3));
}
.dock-lado { position: relative; flex: 0 0 auto; width: 52px; height: 52px; font-size: 1.35rem; }
.dock-principal {
  flex: 1 1 auto; min-width: 0; min-height: 58px;
  flex-direction: column; gap: .05rem; line-height: 1.05;
  padding: .5rem 1rem;
}
.dock-principal b { font-size: var(--t-lg); }
.dock-principal small {
  font-family: var(--font-text); font-size: var(--t-xs); font-weight: 700;
  opacity: .82; text-transform: none; letter-spacing: 0;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#btn-sigue { box-shadow: var(--gloss), inset 0 -3px 0 rgba(0,0,0,.14), 0 0 0 1px var(--oro-600), var(--e-3), var(--glow-oro); }
/* el punto que avisa "hay algo nuevo que leer" */
.cuaderno-nuevo {
  position: absolute; top: -2px; right: -2px;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--brasa-500);
  border: 2px solid var(--noche-900);
  animation: nuevo-late 1.6s ease-in-out infinite;
}
@keyframes nuevo-late { 50% { transform: scale(1.35); } }

/* ---- una pantalla de día: papel con cabecera y rejilla ---- */
.pagina {
  position: relative;
  padding: 0;
  overflow: hidden;
  animation: pagina-entra .45s var(--ease-out) both;
}
@keyframes pagina-entra { from { opacity: 0; transform: translateY(12px); } }
.pagina--porvenir { opacity: .72; }
.pagina--porvenir .pagina-head { filter: grayscale(.4); }

.pagina-head {
  position: relative; flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3);
  padding: .7rem var(--sp-4) .55rem;
  background: linear-gradient(180deg, rgba(200,112,47,.14), rgba(200,112,47,.03));
  border-bottom: 1.5px solid var(--hairline);
}
.pagina-head-txt { min-width: 0; grid-column: 1; }
.pagina-dia {
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent-ink);
}
.pagina-titulo {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800;
  color: var(--text); line-height: 1.05; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pagina-quien {
  margin-top: .1rem;
  font-family: var(--font-hand); font-size: 1.15rem; line-height: 1;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pagina-anillo { grid-column: 2; grid-row: 1 / span 2; --anillo-fondo: var(--crema-50); --anillo-pista: rgba(42,26,18,.1); width: 48px; height: 48px; }
.pagina-deco { font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.pagina-cuenta, .pagina-sello { grid-column: 1; grid-row: 2; justify-self: start; }
.pagina-cuenta { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--text-muted); }
/* el sello de página hecha: tinta verde, torcido, de caucho */
.pagina-sello {
  transform: rotate(-4deg);
  font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: var(--hoja-600);
  border: 2px solid var(--hoja-500); border-radius: 8px;
  padding: .08rem .45rem;
  background: rgba(93,181,90,.1);
}

/* la rejilla: dos columnas, las filas que hagan falta, sin bajar */
.pagina-pasos {
  flex: 1 1 auto; min-height: 0;
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr);
  gap: .4rem;
  padding: .5rem;
}
.pagina-pasos li { min-height: 0; min-width: 0; display: flex; }

/* la ficha de una parada */
.renglon {
  position: relative;
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .12rem;
  padding: .3rem .4rem;
  border-radius: var(--r-md);
  background: rgba(42,26,18,.05);
  border: 1.5px solid var(--hairline);
  font-family: inherit; text-align: center; color: inherit;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.renglon:active { transform: scale(.96); }
.renglon-num {
  position: absolute; top: .22rem; left: .45rem;
  font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: var(--text-muted);
}
.renglon-icono {
  flex: 0 0 auto;
  width: 44px; height: 44px; padding: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0%, var(--crema-50) 55%, var(--crema-200) 92%);
  box-shadow: inset 0 -3px 6px rgba(42,26,18,.08), var(--e-1);
}
.renglon-txt { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.renglon-nombre {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.renglon-dif { font-size: .62rem; letter-spacing: -1px; line-height: 1; filter: saturate(.9); }
.renglon-estado { position: absolute; top: .3rem; right: .4rem; display: flex; align-items: center; }

/* cucharas en vez de estrellas: aquí se mide en cucharadas */
.cucharas { display: flex; gap: .15rem; justify-content: center; }
.cuchara { width: 1.15rem; height: 1.15rem; filter: grayscale(1) opacity(.3); transition: filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring); }
.cuchara.llena { filter: none; transform: scale(1.12); }
.renglon-cucharas { display: flex; gap: 0; }
.renglon-cucharas .cuchara { width: 12px; height: 12px; }

/* hecho: anillo verde y nombre en gris — tachar en una ficha no se lee */
.renglon--hecho .renglon-nombre { color: var(--text-muted); }
.renglon--hecho .renglon-icono { box-shadow: inset 0 0 0 2.5px var(--hoja-500), var(--e-1); }

/* el siguiente paso lleva el lápiz y respira */
.renglon--siguiente {
  background: linear-gradient(180deg, rgba(244,185,66,.28), rgba(244,185,66,.1));
  border-color: rgba(224,161,44,.5);
}
.renglon--siguiente .renglon-icono {
  box-shadow: inset 0 0 0 2.5px var(--oro-400), 0 0 0 4px rgba(244,185,66,.22), var(--e-2);
  animation: late-suave 1.8s var(--ease-in-out) infinite;
}
@keyframes late-suave {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.renglon-lapiz { font-size: 1rem; animation: lapiz-bob 1.8s ease-in-out infinite; }
@keyframes lapiz-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-8deg); }
}
.renglon--bloqueado { opacity: .45; }
.renglon--bloqueado .renglon-icono { filter: grayscale(.8); }
.renglon-candado { font-size: .85rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

/* EL CURSOR: la ficha elegida lleva el marco blanco y oro, como en
   una consola, y es la que el botón grande de abajo cocina */
.renglon--foco {
  z-index: 1;
  transform: scale(1.03);
  background: linear-gradient(180deg, rgba(244,185,66,.34), rgba(244,185,66,.14));
  border-color: transparent;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--oro-400), var(--e-3);
  animation: foco-late 1.6s var(--ease-in-out) infinite;
}
.renglon--foco:active { transform: scale(1); }
@keyframes foco-late {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--oro-400), var(--e-3); }
  50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--oro-300), var(--e-3), 0 0 22px rgba(255,190,80,.5); }
}

/* ---- la pantalla de la olla ---- */
.pagina--olla { background: linear-gradient(180deg, #fff6e0, #fbe9c4); }
.olla-centro {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.olla-anillo { width: 132px; height: 132px; --anillo-grosor: 8px; --anillo-fondo: var(--crema-50); --anillo-pista: rgba(42,26,18,.1); box-shadow: var(--e-2); }
.olla-anillo-ic { width: 84px; height: 84px; display: block; }
.mesa-frase {
  font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.2;
  color: var(--text); text-align: center;
  max-width: 30ch;
}
.receta-final {
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  width: calc(100% - var(--sp-3) * 2); min-height: 84px;
  margin: 0 var(--sp-3) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  color: var(--text-invert);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255,211,106,.28), transparent 60%),
    linear-gradient(135deg, var(--cobre-500), var(--cobre-600) 70%, #6b3512);
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.2);
  font-family: inherit; text-align: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.receta-final:active { transform: scale(.98); }
.receta-plato {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,244,226,.12);
  border: 1.5px solid rgba(255,244,226,.25);
  border-radius: 50%;
}
.receta-plato svg { width: 74%; height: 74%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.receta-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.receta-txt .pagina-dia { color: var(--oro-300); }
.receta-txt strong { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; line-height: 1.05; }
.receta-txt small { font-size: var(--t-xs); color: rgba(255,246,232,.75); }
.receta-final .renglon-candado { flex: 0 0 auto; font-size: 1.2rem; opacity: .8; }
.receta-final--lista { box-shadow: var(--e-3), var(--glow-oro); animation: late-suave 1.8s var(--ease-in-out) infinite; }
.receta-final--servida { background: radial-gradient(80% 120% at 100% 0%, rgba(165,224,143,.3), transparent 60%), linear-gradient(135deg, var(--hoja-600), #2f6a2c); }
/* la olla se llena: la barra es la promesa de que esto termina */
.olla-carga {
  width: 100%; max-width: 200px; height: 8px;
  margin-top: .2rem;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.28);
  overflow: hidden;
}
.olla-carga i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--oro-400), var(--oro-200));
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(255,211,106,.6);
  transition: width .5s var(--ease-out);
}

/* ---- el Viernes Santo: tres fichas y El Apuro ---- */
.pagina--viernes { background: linear-gradient(180deg, #fff6e0, #fbe9c4); }
.pagina--viernes .pagina-pasos { flex: 1 1 auto; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.viernes-promesa {
  flex: 0 0 auto;
  /* el aire en el margen, como en .mesa-plato-nota: con padding asoma
     la tercera línea bajo el recorte */
  margin: 0 0 .4rem; padding: 0 var(--sp-4);
  font-size: var(--t-xs); line-height: 1.35; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.btn-apuro {
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; gap: .8rem;
  width: calc(100% - var(--sp-3) * 2); min-height: 64px;
  margin: 0 var(--sp-3) var(--sp-3);
  padding: .6rem 1rem;
  border-radius: var(--r-md);
  color: #fff;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(255,211,106,.3), transparent 60%),
    linear-gradient(135deg, var(--brasa-500), #c23a20 60%, var(--brasa-600));
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.22);
  text-align: left; font-family: inherit;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-apuro:active { transform: scale(.98); }
.btn-apuro-ico {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.btn-apuro-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.btn-apuro-txt strong { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; line-height: 1.1; }
.btn-apuro-txt small { font-size: var(--t-2xs); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-apuro-ir { font-size: 1rem; opacity: .85; }
.btn-apuro--cerrado {
  background: linear-gradient(135deg, #8a7a68, #6e6053);
  box-shadow: var(--e-1);
  color: rgba(255,246,232,.85);
}
.btn-apuro--cerrado .btn-apuro-ico { background: rgba(255,255,255,.1); }

/* ---- el botón de La Olla, en la pantalla de la olla ----
   Misma anatomía que el de El Apuro —son dos modos hermanos y tienen
   que leerse como tales— pero en verde nopal: el rojo brasa es «se
   quema el tiempo» y este modo no quema nada, mide. */
.btn-modo {
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; gap: .8rem;
  width: calc(100% - var(--sp-3) * 2); min-height: 64px;
  margin: 0 var(--sp-3) var(--sp-3);
  padding: .6rem 1rem;
  border-radius: var(--r-md);
  color: #fff;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(220,255,200,.26), transparent 60%),
    linear-gradient(135deg, var(--nopal-500, #4e8c3f), #3d7333 60%, var(--nopal-600, #2f5c28));
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,.22);
  text-align: left; font-family: inherit;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-modo:active { transform: scale(.98); }
.btn-modo-ico {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.btn-modo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.btn-modo-txt strong { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; line-height: 1.1; }
.btn-modo-txt small {
  display: flex; align-items: center; gap: .25rem;
  font-size: var(--t-2xs); opacity: .92;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* las cucharitas del récord, a tamaño de renglón */
.btn-modo-txt small .cucharas { gap: .1rem; }
.btn-modo-txt small .cuchara { width: .78rem; height: .78rem; }
.btn-modo-ir { font-size: 1rem; opacity: .85; }
.btn-modo--cerrado {
  background: linear-gradient(135deg, #8a7a68, #6e6053);
  box-shadow: var(--e-1);
  color: rgba(255,246,232,.85);
}
.btn-modo--cerrado .btn-modo-ico { background: rgba(255,255,255,.1); }

/* ---- el cartel que abre cada acto de La Olla ----
   Dos segundos sobre el mesón, sin fondo opaco: la partida sigue
   detrás y taparla entera cortaría el ritmo que el cartel viene
   justamente a marcar. */
.acto-cartel {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: var(--sp-4);
  text-align: center; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 50%, rgba(24,16,10,.72), rgba(24,16,10,.18) 70%, transparent);
  opacity: 0;
}
.acto-cartel.entra { animation: acto-entra 2.1s var(--ease-out) both; }
.acto-cartel-ico { font-size: 2.6rem; line-height: 1; }
.acto-cartel-eyebrow {
  margin: .3rem 0 0; font-size: var(--t-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,246,232,.7);
}
.acto-cartel-nombre {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 9vw, 2.6rem); color: #fff6e8;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.acto-cartel-lema { margin: 0; font-size: var(--t-sm); color: rgba(255,246,232,.9); }
@keyframes acto-entra {
  0%   { opacity: 0; transform: scale(1.08); }
  12%  { opacity: 1; transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .acto-cartel.entra { animation: acto-entra-suave 2.1s linear both; }
  @keyframes acto-entra-suave { 0%,100% { opacity: 0; } 10%,80% { opacity: 1; } }
}

/* ---- las marcas por acto, en el resumen de La Olla ---- */
.olla-actos {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  width: 100%;
}
.olla-acto {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .32rem .55rem;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.04);
  font-size: var(--t-xs);
}
.olla-acto b { font-weight: 700; }
.olla-acto span { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.olla-acto i { font-style: normal; font-weight: 700; margin-left: .3rem; }
.olla-acto i.mejor { color: var(--nopal-600, #2f5c28); }
.olla-acto i.peor  { color: var(--brasa-600, #a5301a); }
.olla-acto--sin { opacity: .45; }
/* qué sigue en la escalera de platos: una línea que manda de vuelta
   a la despensa, con el tono de la nota del plato */
.olla-sigue {
  margin: var(--sp-2) 0 0; padding: .45rem .7rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--maiz-500, #e0a526);
  background: rgba(224,165,38,.12);
  font-size: var(--t-xs); line-height: 1.35; text-align: left;
  width: 100%;
}

/* ---- dónde se cocina: dentro de su hoja, tres fichas en columna ---- */
.escenarios { width: 100%; }
.escenarios-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.escenario {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: .7rem;
  min-height: 56px; padding: .45rem .9rem .45rem .7rem;
  text-align: left;
  color: var(--text);
  background: rgba(42,26,18,.05);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.escenario:active { transform: scale(.97); }
.escenario--activo {
  background: linear-gradient(180deg, rgba(244,185,66,.3), rgba(244,185,66,.12));
  border-color: var(--oro-500);
  box-shadow: var(--glow-oro);
}
.escenario-emoji { font-size: 1.7rem; line-height: 1; }
.escenario-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.escenario-txt b { font-family: var(--font-display); font-size: var(--t-md); line-height: 1.15; }
.escenario-txt i { font-style: normal; font-size: var(--t-xs); color: var(--text-muted); line-height: 1.2; }
.escenario-check {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; color: var(--maiz-800);
  background: var(--oro-400);
}

/* la despensa (vacía hoy) */
.despensa { display: none; }

/* ============================================================
   EL CUADERNO — se hojea, no se baja
   ============================================================ */
.puntos { flex: 0 0 auto; display: flex; justify-content: center; gap: .35rem; padding: .25rem 0 0; }
.punto {
  width: 10px; height: 10px; min-width: 10px; padding: 0; border-radius: 5px;
  background: rgba(255,246,232,.25);
  transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.punto--activo { width: 24px; background: var(--oro-400); }

.capitulo-portada {
  align-items: center; justify-content: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-5);
}
.capitulo-portada-ic { width: 96px; height: 96px; display: block; margin-bottom: var(--sp-2); }
.cuaderno-entradilla {
  font-family: var(--font-hand); font-size: 1.4rem; line-height: 1.25;
  color: var(--text); text-align: center; max-width: 30ch;
}
.capitulo { padding: var(--sp-4); gap: var(--sp-3); }
.capitulo.cerrado { opacity: .6; filter: grayscale(.8); }
/* la página cerrada no deja un papel vacío: el aviso va al centro */
.capitulo.cerrado .capitulo-cuerpo { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-4); }
.capitulo-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); }
.capitulo-head .plate { width: 52px; flex-shrink: 0; }
.capitulo-titulo { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; line-height: 1.1; color: var(--text); }
/* un capítulo largo se lee dentro de su página: la única lectura
   que baja en todo el juego, y baja sólo el texto */
/* `pan-y` REPARTE EL GESTO: lo vertical es del texto (los capítulos
   son largos y hay que poder bajarlos), lo horizontal es del
   carrusel. Sin decirlo, el navegador daba por suyo cualquier
   arrastre en cuanto el dedo se movía y mandaba `pointercancel`
   antes de que el deslizamiento llegara a contar: el cuaderno pasaba
   de página UNA vez y después se quedaba clavado. */
.capitulo-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-right: .2rem; }
.capitulo-cuerpo::-webkit-scrollbar { width: 0; }
.capitulo p { font-size: var(--t-sm); line-height: var(--lead); color: var(--text); }
.capitulo p + p { margin-top: var(--sp-3); }
.capitulo-cerrojo { font-size: var(--t-sm); color: var(--text-muted); font-style: italic; }
/* el renglón con la fecha de este año, en la página de la fecha */
.capitulo-fecha { margin-top: .6rem; padding: .5rem .7rem; border-radius: var(--r-sm); background: rgba(244,185,66,.14); font-size: var(--t-sm); }
/* las páginas de ingrediente que faltan: en gris, con lo que las abre */
.tarjetas-faltan { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--hairline); display: grid; gap: .3rem; }
.tarjetas-faltan li { font-size: var(--t-xs); color: var(--text-muted); }

/* los granos, repartidos por orilla */
.granos-mapa { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.grano-chip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .16rem .6rem;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
}
.grano-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; }
.grano-chip.aca  { color: var(--hoja-600); background: rgba(93,181,90,.14); border-color: rgba(93,181,90,.4); }
.grano-chip.aca::before  { background: var(--hoja-500); }
.grano-chip.alla { color: var(--rosa-700); background: rgba(232,80,138,.1); border-color: rgba(232,80,138,.35); }
.grano-chip.alla::before { background: var(--fiesta-500); }
.granos-leyenda { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--t-2xs); }

/* la cita, tratada como cita */
.cita {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(244,185,66,.14);
  border-left: 4px solid var(--oro-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cita p { font-size: var(--t-md); line-height: var(--lead); font-style: italic; color: var(--text); }
.cita footer { margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; color: var(--accent-ink); }
.cita footer span { display: block; font-family: var(--font-text); font-weight: 400; color: var(--text-muted); font-style: normal; }

.capitulo-fuentes { padding: var(--sp-4); gap: var(--sp-2); }
.cuaderno-fuentes-lista { list-style: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; }
.cuaderno-fuentes-lista li { font-size: var(--t-sm); line-height: 1.45; margin-bottom: .45rem; }
.cuaderno-fuentes-lista a { color: var(--accent-ink); }
#cuaderno-volver { color: var(--text-invert); box-shadow: inset 0 0 0 1.5px var(--vidrio-borde); background: var(--vidrio); }

/* ---- pantallas cortas: las fichas se aprietan, nada se baja ---- */
@media (max-height: 740px) {
  .renglon-icono { width: 36px; height: 36px; padding: 4px; }
  .renglon-nombre { font-size: var(--t-2xs); }
  .pagina-quien { display: none; }
  .pagina-head { padding: .5rem var(--sp-3) .4rem; }
  .viernes-promesa { display: none; }
  .olla-anillo { width: 100px; height: 100px; }
  .olla-anillo-ic { width: 64px; height: 64px; }
  .mesa-frase { font-size: 1.15rem; }
  .consola-head { padding-block: .3rem; }
  .capitulo-portada-ic { width: 72px; height: 72px; }
  /* la bienvenida en un teléfono chico (360 × 640): con el plato de
     120 px, «Ver la despensa primero» quedaba bajo el borde. El
     plato baja al tamaño de las otras hojas y el título aprieta */
  #modal-hola .sheet-hero--olla { width: 84px; height: 84px; }
  #modal-hola .sheet-title { font-size: var(--t-xl); }
  #modal-hola .sheet-body { font-size: var(--t-sm); }
}

/* ============================================================
   EL MESÓN — el nivel 3D y su HUD
   Todo lo que flota sobre la escena es cristal oscuro con un filo
   claro. La regla: nada tapa el centro, que es donde están las
   manos. Arriba la tarea y el reloj, abajo la pista y los botones.
   ============================================================ */
.escena { position: absolute; inset: 0; z-index: 0; }
.escena canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* la viñeta cálida hunde las esquinas y deja el centro como lo más
   claro del cuadro: es lo que separa "escena 3D" de "producto" */
.escena::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 60%, transparent 38%, rgba(20,10,4,.36) 76%, rgba(12,6,2,.62) 100%);
}

/* el flash rojo/verde de "algo pasó" */
.destello { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(229,83,61,.5); opacity: 0; }
.destello.activo { animation: destello-va .45s var(--ease-out) both; }
@keyframes destello-va { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ---- la cabecera ---- */
.juego-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: var(--prep-hud-h);
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top) + var(--sp-2)) var(--sp-3) 0;
  /* la barra es casi toda aire: si capturara el dedo se comería los
     toques sobre lo alto del ingrediente. Solo los controles reciben
     el dedo. */
  pointer-events: none;
}
.hud-salir, .hud-tiempo { pointer-events: auto; }
.hud-salir {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1;
  order: -1;
}
.hud-centro {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .5rem;
  height: 46px; padding: 0 .75rem 0 .3rem;
  border-radius: var(--r-pill);
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  box-shadow: var(--e-2);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur));
}
.hud-icono {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(255,244,226,.22), rgba(255,244,226,.06));
  border: 1.5px solid var(--vidrio-borde); border-radius: 50%;
}
.hud-icono svg { width: 76%; height: 76%; }
.hud-centro-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.hud-tarea {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; line-height: 1.1;
  color: var(--text-invert);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-barra-fila { display: flex; align-items: center; gap: .45rem; }
.hud-barra-fila .meter { height: 7px; background: rgba(255,244,226,.16); box-shadow: none; }
.hud-centro .meter-fill { background: linear-gradient(90deg, var(--oro-400), var(--oro-200)); box-shadow: 0 0 10px rgba(255,211,106,.55); }
.hud-pct {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-2xs);
  color: var(--oro-300); min-width: 2.4rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* la barra late cuando sube */
.meter-fill.late { animation: barra-late .34s var(--ease-spring); }
@keyframes barra-late { 35% { filter: brightness(1.6) saturate(1.3); } }

/* el reloj, con su cronómetro */
.hud-tiempo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  height: 46px; min-width: 4.6rem; padding: 0 .8rem;
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-md);
  color: var(--text-invert);
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  border-radius: var(--r-pill);
  box-shadow: var(--e-2);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur));
  font-variant-numeric: tabular-nums;
}
.hud-crono { font-size: .95em; }
/* el reloj en rojo cuando se acaba: late para que se mire sin leerlo */
.hud-tiempo--rojo {
  color: #fff; background: linear-gradient(180deg, var(--brasa-400), var(--brasa-600));
  border-color: rgba(255,255,255,.35);
  animation: apuro-late .6s ease-in-out infinite;
}
@keyframes apuro-late { 50% { transform: scale(1.08); } }

/* el aviso grande de peligro, sobre la escena */
.hud-alerta {
  position: absolute; top: calc(var(--prep-hud-h) + var(--sp-2)); left: 50%;
  transform: translateX(-50%) translateY(-8px); z-index: 4;
  /* deja libre la esquina del combo a la izquierda y el «?» a la derecha */
  max-width: 62%;
  padding: .5rem 1.1rem;
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; text-align: center; line-height: 1.2;
  color: #fff;
  /* desde brasa-500 y no 400: el blanco sobre la parte alta daba
     2.6:1 (medido); así arranca en 3.7 y baja a 10 */
  background: linear-gradient(180deg, var(--brasa-500), var(--brasa-600));
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.7);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hud-alerta.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* el verde del botón, no el de la hoja: con hoja-400 arriba el blanco daba 1.9:1 */
.hud-alerta.tono-bien { background: linear-gradient(180deg, #4a9a45, #336f30); }
.hud-alerta.entra { animation: alerta-entra .42s var(--ease-spring); }
@keyframes alerta-entra {
  0%   { transform: translateX(-50%) translateY(-14px) scale(.8); }
  60%  { transform: translateX(-50%) translateY(0) scale(1.06); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---- el combo, grande, a la izquierda ---- */
.hud-combo {
  position: absolute; left: var(--sp-3);
  top: calc(var(--prep-hud-h) + var(--sp-5)); z-index: 5;
  text-align: center; pointer-events: none;
  opacity: 0; transform: scale(.7) translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.hud-combo.visible { opacity: 1; transform: scale(1) translateY(0); }
.hud-combo-tit {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-sm);
  color: var(--hoja-300); letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(30,60,10,.6), 0 0 12px rgba(125,203,111,.7);
}
.hud-combo-x {
  font-family: var(--font-display); font-weight: 800; font-size: 2.8rem; line-height: .95;
  color: #fff;
  text-shadow: 0 3px 0 rgba(120,70,10,.75), 0 0 22px rgba(255,211,106,.85);
}
.hud-combo-pie {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xs);
  color: var(--oro-300); letter-spacing: .16em;
  text-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.hud-combo.brinca .hud-combo-x { animation: combo-brinca .32s var(--ease-spring); }
@keyframes combo-brinca { 45% { transform: scale(1.28); } }
.hud-racha { display: none; }

/* ---- los +N que suben, y el ±Ns del reloj ---- */
.hud-flotantes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.flota {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xl);
  color: var(--hoja-300);
  text-shadow: 0 2px 0 rgba(30,60,10,.7), 0 0 14px rgba(125,203,111,.8);
  animation: flota-sube .9s var(--ease-out) forwards;
}
@keyframes flota-sube {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  22%  { opacity: 1; transform: translate(-50%, -78%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
.flota-tiempo {
  position: absolute; right: 12%; top: calc(var(--prep-hud-h) + .4rem);
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 0 16px rgba(0,0,0,.4);
  animation: flota-t 1.1s var(--ease-spring) forwards;
  pointer-events: none;
}
.flota-tiempo--gana   { color: var(--hoja-300); }
.flota-tiempo--pierde { color: var(--brasa-400); }
@keyframes flota-t {
  0%   { opacity: 0; transform: translateY(6px) scale(.7); }
  22%  { opacity: 1; transform: translateY(-4px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-40px) scale(1); }
}

/* ---- botones que cada nivel pide (girar la mazorca, etc.) ---- */
.juego-controles {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--sp-4));
  z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  pointer-events: none;
}
.ctrl {
  pointer-events: auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 4.6rem; min-height: 58px; padding: .3rem .9rem;
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; line-height: 1;
  color: var(--text-invert);
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  border-radius: var(--r-pill);
  box-shadow: var(--e-2), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur));
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ctrl:active, .ctrl.presionado { transform: scale(.94); background: rgba(255,211,106,.28); border-color: var(--oro-400); }
.ctrl-tip { font-family: var(--font-text); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-300); }
/* a los lados, a media altura: el choclo de pie los pide así para que
   no tapen los cuencos del pie de la pantalla */
.juego-controles--lados {
  top: 50%; bottom: auto; transform: translateY(-50%);
  justify-content: space-between;
  padding: 0 var(--sp-3);
}
.juego-controles--lados .ctrl { min-width: 3.6rem; }

/* ---- la pista: la única enseñanza del juego ---- */
.juego-pista {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: calc(env(safe-area-inset-bottom) + var(--prep-ctrl-h) + var(--sp-4));
  z-index: 4; width: max-content; max-width: 86%;
  padding: .6rem 1.2rem;
  font-family: var(--font-text); font-size: var(--t-sm); font-weight: 600; text-align: center; line-height: 1.4;
  color: var(--text-invert);
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  border-left: 4px solid var(--oro-400);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur));
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.juego-pista.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- la mano guía ----------
   Un dedo que hace el gesto: --x0/--y0 es dónde empieza (la pieza),
   --x1/--y1 dónde acaba. La yema es la punta de arriba del 👆, así que
   el dedo se cuelga de ahí. Nunca recibe toques. */
.mano-guia { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.mano-guia[hidden] { display: none; }
.mano-guia-dedo, .mano-guia-onda { position: absolute; left: 0; top: 0; }
.mano-guia-dedo {
  font-size: 44px; line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
  transform: translate(calc(var(--x0) - 50%), var(--y0));
  margin-left: -4px;
}
.mano-guia-onda {
  width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 3px solid rgba(255, 236, 170, .95); box-shadow: 0 0 14px rgba(255, 210, 100, .6);
  transform: translate(var(--x0), var(--y0)) scale(.2); opacity: 0;
}
/* tocar: dos golpecitos, con su onda */
.mano-guia--tocar .mano-guia-dedo { animation: guia-toca 1.1s var(--ease-out) 2 both; }
.mano-guia--tocar .mano-guia-onda { animation: guia-onda 1.1s var(--ease-out) 2 both; }
@keyframes guia-toca {
  0%, 100% { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) + 26px)); opacity: 0; }
  20% { opacity: 1; }
  40% { transform: translate(calc(var(--x0) - 50%), var(--y0)) scale(.9); opacity: 1; }
  60% { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) + 10px)); opacity: 1; }
}
@keyframes guia-onda {
  0%, 38% { transform: translate(var(--x0), var(--y0)) scale(.2); opacity: 0; }
  42% { opacity: 1; }
  80%, 100% { transform: translate(var(--x0), var(--y0)) scale(1.2); opacity: 0; }
}
/* mantener: baja, se queda, y el aro se llena */
.mano-guia--mantener .mano-guia-dedo { animation: guia-mantiene 2.2s var(--ease-out) both; }
.mano-guia--mantener .mano-guia-onda { animation: guia-llena 2.2s linear both; }
@keyframes guia-mantiene {
  0% { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) + 26px)); opacity: 0; }
  15%, 80% { transform: translate(calc(var(--x0) - 50%), var(--y0)) scale(.9); opacity: 1; }
  100% { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) + 26px)); opacity: 0; }
}
@keyframes guia-llena {
  0%, 15% { transform: translate(var(--x0), var(--y0)) scale(.3); opacity: 0; }
  20% { opacity: 1; }
  80% { transform: translate(var(--x0), var(--y0)) scale(1.3); opacity: 1; }
  100% { transform: translate(var(--x0), var(--y0)) scale(1.5); opacity: 0; }
}
/* frotar: va y viene a lo largo de la pieza, tres veces */
.mano-guia--frotar .mano-guia-dedo { animation: guia-frota 1s ease-in-out 3 both; }
@keyframes guia-frota {
  0%, 100% { transform: translate(calc(var(--x0) - 50%), var(--y0)); opacity: 1; }
  50% { transform: translate(calc(var(--x1) - 50%), var(--y1)); opacity: 1; }
}
/* arrastrar: de la pieza a su destino, con una estela */
.mano-guia--arrastrar .mano-guia-dedo { animation: guia-arrastra 1.3s var(--ease-out) 2 both; }
.mano-guia--arrastrar .mano-guia-onda { animation: guia-destino 1.3s var(--ease-out) 2 both; }
@keyframes guia-arrastra {
  0% { transform: translate(calc(var(--x0) - 50%), calc(var(--y0) + 20px)); opacity: 0; }
  15% { transform: translate(calc(var(--x0) - 50%), var(--y0)); opacity: 1; }
  80% { transform: translate(calc(var(--x1) - 50%), var(--y1)); opacity: 1; }
  100% { transform: translate(calc(var(--x1) - 50%), var(--y1)); opacity: 0; }
}
@keyframes guia-destino {
  0%, 70% { transform: translate(var(--x1), var(--y1)) scale(.3); opacity: 0; }
  80% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(1.3); opacity: 0; }
}
/* el «?» late cuando el juego cree que hace falta */
.btn-pista.late { animation: pista-late .6s var(--ease-spring) 3; }
@keyframes pista-late { 50% { transform: scale(1.22); box-shadow: 0 0 0 6px rgba(244,185,66,.45); } }
@media (prefers-reduced-motion: reduce) {
  /* sin movimiento: el dedo quieto sobre la pieza, que ya dice dónde */
  .mano-guia-dedo { animation: none !important; transform: translate(calc(var(--x0) - 50%), var(--y0)); opacity: 1; }
  .mano-guia-onda { animation: none !important; opacity: 0; }
}
.juego-pista b { color: var(--oro-200); }

/* el «?»: la última pista, otra vez */
.btn-pista {
  position: absolute; right: var(--sp-3);
  top: calc(var(--prep-hud-h) + var(--sp-3));
  z-index: 5;
  width: 44px; height: 44px;
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800;
}

/* ---- los descuidos: bajo el «?», en rojo cuando queda uno ---- */
.hud-fallos {
  position: absolute; right: var(--sp-3);
  top: calc(var(--prep-hud-h) + var(--sp-3) + 52px);
  z-index: 5;
  padding: .2rem .6rem;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 800;
  color: var(--text-invert);
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  border-radius: var(--r-pill);
  box-shadow: var(--e-2);
  opacity: 0; transform: scale(.8);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
  pointer-events: none;
}
.hud-fallos.visible { opacity: 1; transform: none; }
.hud-fallos--rojo { color: #fff; background: linear-gradient(180deg, var(--brasa-400), var(--brasa-600)); border-color: rgba(255,255,255,.4); }
.hud-fallos.brinca { animation: combo-brinca .32s var(--ease-spring); }
.stat--mal .stat-n { color: var(--brasa-600); }

/* ---- la voz sobre la escena ---- */
.voz {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -6px) scale(.98); z-index: 5;
  width: min(340px, 88%);
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  border-top: 3px solid var(--oro-400);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur));
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.voz.visible { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; cursor: pointer; }
.voz-texto { font-family: var(--font-text); font-size: var(--t-md); font-style: italic; line-height: var(--lead); color: var(--text-invert); }
.voz-quien {
  margin-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--oro-300);
}

/* ---- el toast sube cuando el mesón está activo: abajo vive la pista.
   Y va DEBAJO de la alerta, que tiene su sitio justo bajo la cabecera:
   los dos a la misma altura se tapaban las palabras del medio ---- */
#stage:has(#screen-juego.active) #toast { bottom: auto; top: calc(var(--prep-hud-h) + 6.4rem); }

/* ============================================================
   LA CORTINA — la tarjeta de parada
   Al entrar al mesón la pantalla se va a negro un instante y sale
   el título de la parada: qué día es, qué toca, con qué gesto.
   Es lo que separa "cargó un nivel" de "empieza una escena".
   ============================================================ */
.cortina {
  position: absolute; inset: 0; z-index: var(--z-cortina);
  display: grid; place-items: center;
  background:
    radial-gradient(80% 50% at 50% 110%, rgba(224,138,69,.28), transparent 70%),
    var(--noche-950);
  opacity: 0; pointer-events: none;
}
/* `abre` la deja puesta; main.js le pone `cierra` cuando el mesón
   está armado (y nunca antes de un segundo) */
.cortina.abre { opacity: 1; }
.cortina.cierra { animation: cortina-sale .5s var(--ease-in-out) both; }
@keyframes cortina-sale { from { opacity: 1; } to { opacity: 0; } }
.tarjeta-parada {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 0 var(--sp-6);
  text-align: center;
  opacity: 0;
}
.cortina.abre .tarjeta-parada { animation: parada-entra .5s var(--ease-spring) both; }
.cortina.cierra .tarjeta-parada { animation: parada-sale .5s var(--ease-in-out) both; }
@keyframes parada-entra {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes parada-sale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px) scale(1.03); }
}
.tarjeta-parada-icono { width: 84px; height: 84px; margin-bottom: .4rem; }
.tarjeta-parada-icono .plate { width: 100%; }
/* con el selector anidado para ganarle al `.tarjeta-parada p` de abajo:
   el día va en oro, no en el crema apagado de la tarea */
.tarjeta-parada .tarjeta-parada-dia {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--oro-300);
}
.tarjeta-parada h2 {
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; line-height: 1.05;
  color: var(--text-invert); letter-spacing: -.01em;
}
.tarjeta-parada p { font-family: var(--font-text); font-size: var(--t-md); color: rgba(255,246,232,.7); }

/* ============================================================
   LAS HOJAS EMERGENTES — listo, arruinado, fin de día, la olla,
   El Apuro. Todas suben desde abajo (design-system.css); aquí va
   lo propio de cada una.
   ============================================================ */
.sheet-hero {
  width: 84px; height: 84px; margin: var(--sp-1) 0 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff, var(--crema-100) 70%);
  box-shadow: 0 0 0 6px rgba(244,185,66,.22), var(--e-2);
  animation: hero-entra .6s var(--ease-spring) both;
  font-size: 2.6rem; line-height: 1;
}
.sheet-hero svg { width: 70%; height: 70%; filter: drop-shadow(0 3px 4px rgba(42,26,18,.25)); }
@keyframes hero-entra { from { opacity: 0; transform: scale(.5); } }
.sheet-hero--mal { box-shadow: 0 0 0 6px rgba(229,83,61,.2), var(--e-2); }
.sheet-hero--mal span { animation: bicho-tiembla .6s var(--ease-out) 3; display: block; }
@keyframes bicho-tiembla { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.sheet-hero--dia { box-shadow: 0 0 0 6px rgba(95,168,211,.2), var(--e-2); }
.sheet-hero--olla { width: 120px; height: 120px; box-shadow: 0 0 0 8px rgba(244,185,66,.25), var(--glow-oro), var(--e-3); }

#listo-cucharas .cuchara { width: 2.4rem; height: 2.4rem; }
.cucharas-pie { margin: -.1rem 0 .2rem; font-size: var(--t-xs); color: var(--text-muted); text-wrap: balance; }
/* la cuchara que cae al revelarse */
.cuchara.cae { animation: cuchara-cae .4s var(--ease-spring) both; }
@keyframes cuchara-cae {
  0%   { transform: translateY(-16px) scale(1.5); opacity: 0; }
  60%  { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.listo-mejor, .final-total { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--text-muted); }
.sheet .stats { margin-top: var(--sp-1); }

/* la tarjeta que se gana al terminar */
.tarjeta {
  width: 100%; text-align: left;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(42,26,18,.05);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--r-md);
}
.tarjeta .label { margin-bottom: var(--sp-1); }
.tarjeta-titulo { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; line-height: 1.2; color: var(--text); margin-bottom: var(--sp-1); }
.tarjeta-texto {
  font-size: var(--t-sm); line-height: var(--lead); color: var(--text-muted);
  /* la hoja cabe sin bajar: tres líneas — el resto se lee en el cuaderno */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-cita {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: rgba(244,185,66,.14);
  border-left: 3px solid var(--oro-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.tarjeta-cita p { font-size: var(--t-sm); font-style: italic; line-height: var(--lead); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-cita footer { margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--accent-ink); }

/* se arruinó */
.sheet--mal .sheet-eyebrow { color: var(--brasa-600); }

/* fin de día */
.dia-refri {
  display: flex; flex-direction: column; gap: .15rem;
  width: 100%; margin: var(--sp-2) 0 var(--sp-3);
  padding: .6rem .9rem;
  border-radius: var(--r-md);
  background: rgba(93,181,90,.12);
  border: 1.5px solid rgba(93,181,90,.3);
  font-size: var(--t-sm); text-align: left;
}
.dia-refri .label { font-size: var(--t-2xs); color: var(--hoja-600); }

/* la fanesca servida */
.final-cierre { font-size: var(--t-sm); line-height: var(--lead); color: var(--text-muted); }
.final-voz {
  width: 100%; margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-sm); font-style: italic; line-height: var(--lead);
  color: var(--text);
  background: rgba(244,185,66,.14);
  border-left: 3px solid var(--oro-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  text-align: left;
}
.final-voz span { display: block; margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; font-style: normal; color: var(--accent-ink); }

/* El Apuro: la cifra grande del resultado */
.apuro-cifra {
  font-family: var(--font-display); font-weight: 800;
  font-size: 4.6rem; line-height: 1;
  color: var(--hoja-600);
  margin-top: var(--sp-2);
  animation: hero-entra .6s var(--ease-spring) both;
}
.apuro-cifra-pie { margin: -.2rem 0 .3rem; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.listo-tiempo { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--text); }
/* la escalera de logros: pendientes en gris, el nuevo brilla */
/* la escalera de logros en rejilla de dos: siete peldaños que caben
   sin bajar la hoja */
/* quién llega con el plato: la voz de la casa */
.listo-plato-llega { display: block; font-style: normal; font-size: var(--t-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa-voz {
  flex: 0 0 auto; margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); padding: 0 var(--sp-4);
  font-family: var(--font-hand); font-size: 1.15rem; line-height: 1.15; color: var(--oro-300);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-height: 700px) { .mesa-voz { display: none; } }
.olla-mesa { margin: 0; font-family: var(--font-hand); font-size: 1.1rem; line-height: 1.2; color: var(--text-muted); }
/* dónde se perdió el tiempo en la olla */
.olla-donde { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .2rem; }
.olla-donde li { font-size: var(--t-xs); color: var(--text-muted); text-align: center; }
.olla-donde b { color: var(--text); }
.logros { list-style: none; width: 100%; margin: .3rem 0 .1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
/* «y N más por ganar»: una línea que despliega la escalera entera */
.logro--mas { grid-column: 1 / -1; background: none; border: 0; padding: 0; }
.logros-mas { font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--accent-ink); background: none; border: 0; padding: .4rem; cursor: pointer; }
.logro {
  display: flex; flex-direction: column; text-align: left;
  padding: .5rem .8rem;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, rgba(244,185,66,.22), rgba(244,185,66,.08));
  border: 1.5px solid rgba(224,161,44,.3);
  animation: logro-entra .42s var(--ease-spring) both;
}
.logro:nth-child(2) { animation-delay: .08s; }
.logro:nth-child(3) { animation-delay: .16s; }
.logro:nth-child(4) { animation-delay: .24s; }
.logro:nth-child(n+5) { animation-delay: .32s; }
.logro strong { font-family: var(--font-display); font-size: var(--t-xs); line-height: 1.15; }
.logro span { font-size: var(--t-2xs); line-height: 1.25; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes logro-entra { from { opacity: 0; transform: translateX(-10px) scale(.96); } }
.logro--pendiente { background: rgba(42,26,18,.05); border-color: var(--hairline); }
.logro--pendiente strong { color: var(--text-muted); }
.logro--nuevo { background: linear-gradient(100deg, rgba(244,185,66,.45), rgba(244,185,66,.16)); border-color: var(--oro-500); box-shadow: var(--glow-oro); }

/* ============================================================
   LAS FAENAS DEL MESÓN — en qué paso va este nivel
   Una fila de fichas bajo el HUD: la de ahora se abre y dice su
   nombre, las hechas se encogen con su visto, las que faltan quedan
   como puntos apagados. En los niveles de un solo gesto no sale.
   ============================================================ */
.hud-pasos {
  position: absolute; z-index: 6;
  top: calc(var(--prep-hud-h) + .45rem); left: var(--sp-3);
  display: flex; align-items: center; gap: .3rem;
  max-width: calc(100% - 5.5rem);
  pointer-events: none;
}
.hud-paso {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 30px; padding: 0 .42rem;
  border-radius: var(--r-pill);
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--vidrio-borde);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .95rem; line-height: 1;
  opacity: .5;
  transition: opacity var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
.hud-paso b {
  display: none;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800;
  letter-spacing: .01em; color: #fff6e8; white-space: nowrap;
}
.hud-paso i { font-style: normal; }
/* el que se está haciendo: se abre y se lee */
.hud-paso--ahora {
  opacity: 1; padding: 0 .62rem 0 .48rem;
  background: rgba(244,185,66,.22); border-color: var(--oro-400);
  box-shadow: var(--glow-oro);
}
.hud-paso--ahora b { display: inline; }
.hud-paso--ahora.entra { animation: paso-entra .42s var(--ease-spring); }
@keyframes paso-entra { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } }
/* los hechos: el visto verde en lugar del icono */
.hud-paso--hecho { opacity: .8; background: rgba(93,181,90,.2); border-color: rgba(93,181,90,.45); }
.hud-paso--hecho i { visibility: hidden; position: relative; }
.hud-paso--hecho i::after {
  content: '✓'; visibility: visible; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--hoja-400, #7ecb7a); font-size: .9rem; font-weight: 800;
}
@media (max-height: 740px) { .hud-pasos { top: calc(var(--prep-hud-h) + .3rem); } }
/* CON LA FILA DE FAENAS PUESTA, EL AVISO BAJA UN RENGLÓN. Los dos
   vivían a la misma altura y la fila (z 6) tapaba al aviso (z 4): en
   la olla, «el mote ✓» salía medio escondido detrás de «Los granos,
   en orden», y lo mismo en cualquier mesón de varias faenas. El combo
   de la izquierda se montaba igual sobre la ficha abierta. */
.hud-pasos:not(.hidden) ~ .hud-alerta { top: calc(var(--prep-hud-h) + .45rem + 30px + var(--sp-2)); }
.hud-pasos:not(.hidden) ~ .hud-combo  { top: calc(var(--prep-hud-h) + .45rem + 30px + var(--sp-3)); }

/* ============================================================
   LA OLLA SE LLENA — la escena final
   Encima del altar del jueves: fondo de cocina a oscuras con el
   fogón encendido, la olla de barro al centro y, uno a uno, los
   ingredientes cayendo desde arriba en el orden en que entran de
   verdad. Cada uno deja un trozo en el caldo, que va pasando de
   agua a fanesca; el vapor sube con la olla llena. Todo es DOM y
   CSS: main.js pone las piezas y el ritmo, el CSS las deja caer.
   ============================================================ */
.olla-escena {
  position: absolute; inset: 0; z-index: calc(var(--z-modal) + 1);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 var(--sp-5) calc(env(safe-area-inset-bottom) + 9vh);
  background: radial-gradient(120% 70% at 50% 100%, #4a2410 0%, #1f130b 42%, #0c0805 100%);
  color: #fff6e8;
  opacity: 0; transition: opacity .45s var(--ease-out);
  overflow: hidden; touch-action: none; cursor: pointer; user-select: none;
}
/* `hidden` tiene que ganarle al display:flex de arriba: el atributo
   solo pesa lo que el estilo del navegador, y cualquier regla de autor
   lo pisa */
.olla-escena[hidden] { display: none; }
.olla-escena--abre { opacity: 1; }
.olla-escena--sale { opacity: 0; transition-duration: .55s; pointer-events: none; }
/* las burbujas del hervor, latiendo a destiempo */
#olla-burbujas circle { animation: olla-burbuja 1.1s ease-in-out infinite alternate; }
#olla-burbujas circle:nth-child(2n) { animation-delay: -.4s; }
#olla-burbujas circle:nth-child(3n) { animation-delay: -.8s; }
@keyframes olla-burbuja { from { opacity: .15; } to { opacity: .95; } }
.olla-escena-cielo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 38% at 50% 70%, rgba(244,185,66,.26), transparent 70%);
  transition: opacity .8s;
}
.olla-escena-texto { position: absolute; top: 8vh; left: 0; right: 0; text-align: center; padding: 0 var(--sp-5); pointer-events: none; }
.olla-escena-eyebrow { font-family: var(--font-display); font-size: var(--t-2xs); letter-spacing: .18em; text-transform: uppercase; color: var(--oro-400); font-weight: 700; }
.olla-escena-titulo {
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 800; line-height: 1.05;
  margin-top: .3rem; color: #fff6e8; text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.olla-escena-titulo.entra { animation: olla-nombre .55s var(--ease-spring) both; }
.olla-escena-nombre { margin-top: .6rem; min-height: 1.7em; font-size: var(--t-md); font-style: italic; color: rgba(255,246,232,.86); }
.olla-escena-nombre.entra { animation: olla-nombre .45s var(--ease-out) both; }
@keyframes olla-nombre { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* la olla, con su fogón detrás y su vapor encima */
.olla-escena-olla { position: relative; width: min(78vw, 340px); }
.olla-svg { width: 100%; height: auto; display: block; position: relative; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
.olla-escena-olla.plop .olla-svg { animation: olla-plop .34s var(--ease-spring); }
@keyframes olla-plop { 30% { transform: scale(1.035, .96) translateY(4px); } 70% { transform: scale(.985, 1.02); } }
.olla-escena--hierve .olla-svg { animation: olla-hierve 1.1s ease-in-out infinite; }
@keyframes olla-hierve { 50% { transform: translateY(-2px) scale(1.008, .995); } }

.olla-fuego { position: absolute; left: 16%; right: 16%; bottom: -5%; height: 26%; pointer-events: none; }
.olla-fuego i {
  position: absolute; bottom: 0; width: 22%; height: 100%;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 85%, #ffe28a 0%, #f4a03a 38%, rgba(230,90,40,.7) 62%, rgba(230,90,40,0) 80%);
  filter: blur(3px); transform-origin: 50% 100%;
  animation: olla-llama .85s ease-in-out infinite alternate;
}
.olla-fuego i:nth-child(1) { left: 0;   animation-delay: -.2s; height: 80%; }
.olla-fuego i:nth-child(2) { left: 20%; animation-delay: -.5s; }
.olla-fuego i:nth-child(3) { left: 40%; animation-delay: 0s;   height: 110%; }
.olla-fuego i:nth-child(4) { left: 58%; animation-delay: -.35s; }
.olla-fuego i:nth-child(5) { left: 78%; animation-delay: -.65s; height: 85%; }
@keyframes olla-llama { from { transform: scale(1, .82) skewX(-4deg); opacity: .8; } to { transform: scale(1.06, 1.06) skewX(4deg); opacity: 1; } }

.olla-vapor { position: absolute; left: 22%; right: 22%; top: -6%; height: 46%; pointer-events: none; opacity: var(--vapor, 0); transition: opacity .7s; z-index: 2; }
.olla-vapor i {
  position: absolute; bottom: 0; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,246,232,.5); filter: blur(11px);
  animation: olla-vapor 2.6s ease-out infinite;
}
.olla-vapor i:nth-child(1) { left: 12%; animation-delay: 0s; }
.olla-vapor i:nth-child(2) { left: 44%; animation-delay: -.9s; width: 56px; height: 56px; }
.olla-vapor i:nth-child(3) { left: 72%; animation-delay: -1.7s; }
@keyframes olla-vapor {
  0%   { opacity: 0; transform: translateY(10px) scale(.6); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}
.olla-escena--hierve .olla-vapor { opacity: 1; transform: scale(1.5); transform-origin: 50% 100%; }

/* lo que cae: nace arriba y aterriza justo en la boca de la olla
   (la boca está al 44 % del alto del dibujo) */
.olla-escena-caida { position: absolute; left: 0; right: 0; top: 44%; height: 0; pointer-events: none; z-index: 3; }
.olla-cae {
  position: absolute; left: var(--x, 50%); top: 0;
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
  animation: olla-cae .64s cubic-bezier(.5, 0, .85, .45) both;
}
.olla-cae svg { width: 100%; height: 100%; }
@keyframes olla-cae {
  0%   { opacity: 0; transform: translateY(-72vh) rotate(calc(var(--gira, 20deg) * -1)) scale(1.15); }
  8%   { opacity: 1; }
  88%  { opacity: 1; transform: translateY(0) rotate(var(--gira, 20deg)) scale(.72); }
  100% { opacity: 0; transform: translateY(6px) rotate(var(--gira, 20deg)) scale(.35); }
}
/* el chapoteo: un aro que se abre y dos gotas que saltan */
.olla-salpica { position: absolute; left: var(--x, 50%); top: 0; width: 0; height: 0; pointer-events: none; }
.olla-salpica i {
  position: absolute; left: -20px; top: -8px; width: 40px; height: 16px;
  border: 3px solid rgba(255,246,232,.75); border-radius: 50%;
  animation: olla-aro .5s var(--ease-out) both;
}
.olla-salpica b {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff6e8; animation: olla-gota .5s cubic-bezier(.3, 0, .8, .5) both;
}
.olla-salpica b:nth-child(3) { --dx: 22px; --dy: -34px; }
.olla-salpica b:nth-child(2) { --dx: -20px; --dy: -28px; }
@keyframes olla-aro { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.9); } }
@keyframes olla-gota { 40% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .7), var(--dy, -30px)) scale(1); } to { opacity: 0; transform: translate(var(--dx, 0px), 6px) scale(.6); } }

.olla-escena-pie {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 1.6vh); left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-size: var(--t-2xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,246,232,.42); pointer-events: none;
}
@media (max-height: 740px) {
  .olla-escena-olla { width: min(70vw, 280px); }
  .olla-escena-texto { top: 5vh; }
}

/* ============================================================
   EL CONFETI — lo que cae cuando algo sale bien
   Papelitos de la fiesta: se generan desde main.js con su color,
   su columna y su giro en variables, y el CSS los deja caer.
   Va por encima de la escena de la olla: la fiesta cae cuando la
   escena se apaga, y no debajo de ella.
   ============================================================ */
.confeti { position: absolute; inset: 0; z-index: calc(var(--z-modal) + 2); pointer-events: none; overflow: hidden; }
.confeti i {
  position: absolute; top: -4%; left: var(--x, 50%);
  width: var(--w, 9px); height: var(--h, 14px);
  background: var(--c, var(--oro-400));
  border-radius: 2px;
  opacity: 0;
  animation: confeti-cae var(--d, 1.6s) cubic-bezier(.2, .6, .4, 1) both;
  animation-delay: var(--t, 0s);
}
@keyframes confeti-cae {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(var(--r, 720deg)); }
}

/* ============================================================
   EL EDITOR DE ESCENA — de escritorio, en modo dev
   ============================================================ */
.btn-editor {
  position: absolute; right: var(--sp-3);
  top: calc(var(--prep-hud-h) + var(--sp-3) + 54px); z-index: 6;
  width: 44px; height: 44px; font-size: 1.2rem;
}
.editor {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: 340px; max-width: 38vw;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: var(--sp-4);
  background: linear-gradient(180deg, rgba(22,14,10,.98), rgba(12,8,6,.99));
  border-left: 1.5px solid var(--vidrio-borde);
  box-shadow: -10px 0 30px rgba(0,0,0,.45);
  transform: translateX(101%);
  transition: transform var(--dur) var(--ease-out);
  color: #fff;
}
.editor.abierto { transform: translateX(0); }
body.con-editor #stage { margin-right: 340px; }
.ed-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ed-head b { font-family: var(--font-display); font-size: var(--t-lg); }
.ed-x { margin-left: auto; color: #fff; font-size: var(--t-lg); padding: .2rem .5rem; }
.ed-sec { margin-bottom: var(--sp-4); }
.ed-sec-tit {
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro-300); margin-bottom: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: .22rem;
}
.ed-sel {
  width: 100%; padding: .4rem .5rem; margin-bottom: .3rem;
  font: inherit; font-size: var(--t-xs); color: #fff;
  background: rgba(0,0,0,.45);
  border: 1.5px solid rgba(255,255,255,.24); border-radius: var(--r-sm);
}
.ed-fila { display: grid; grid-template-columns: 6.6rem 1fr 2.9rem; align-items: center; gap: .5rem; margin-bottom: .28rem; }
.ed-et { font-size: var(--t-2xs); color: rgba(255,255,255,.82); }
.ed-fila input[type=range] { width: 100%; accent-color: var(--oro-300); }
.ed-fila output { font-family: var(--font-display); font-size: var(--t-2xs); text-align: right; color: var(--oro-300); }
.ed-codigo {
  margin: var(--sp-2) 0; padding: .5rem .6rem;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.45;
  color: #d8f3c0; white-space: pre-wrap; word-break: break-word;
}
.ed-nota { font-size: var(--t-2xs); color: rgba(255,255,255,.55); margin-top: .3rem; line-height: 1.35; }
.ed-pie { display: flex; gap: var(--sp-2); }
.ed-btn {
  flex: 1; padding: .45rem; font-size: var(--t-xs); font-weight: 700;
  color: var(--tinta-900); background: linear-gradient(180deg, var(--oro-300), var(--oro-400));
  border: 2px solid var(--oro-600); border-radius: var(--r-pill);
}
.ed-btn--flojo { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
@media (max-width: 999px) {
  .editor, .btn-editor { display: none !important; }
  body.con-editor #stage { margin-right: 0; }
}

/* ============================================================
   PANTALLAS CORTAS Y MOVIMIENTO REDUCIDO
   ============================================================ */
@media (max-height: 680px) {
  .portada-escena { min-height: 120px; max-height: 200px; }
  .portada-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .portada { gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cortina.abre .tarjeta-parada { animation: none; opacity: 1; }
  .vapor i, .portada-lumbre { display: none; }
  /* la escena de la olla es puro movimiento: main.js no la lanza, y
     por si acaso tampoco se pinta */
  .olla-escena { display: none; }
}
/* «Menos movimiento» de Tu cocina: lo mismo que pide el sistema, para
   quien no sabe que su teléfono tiene ese ajuste o no quiere tocarlo */
html.menos-mov *, html.menos-mov *::before, html.menos-mov *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html.menos-mov .cortina.abre .tarjeta-parada { animation: none; opacity: 1; }
html.menos-mov .vapor i, html.menos-mov .portada-lumbre, html.menos-mov .olla-escena { display: none; }
html.menos-mov .acto-cartel.entra { animation: acto-entra-suave 2.1s linear both; }
html.menos-mov .mano-guia-dedo { animation: none !important; transform: translate(calc(var(--x0) - 50%), var(--y0)); opacity: 1; }
html.menos-mov .mano-guia-onda { animation: none !important; opacity: 0; }

/* «Letra grande»: todo va en rem, así que basta subir la raíz. El HUD
   deja que la tarea parta en dos renglones en vez de cortarse en «De…» */
html[data-letra="grande"] { font-size: 20px; }
html[data-letra="grande"] .hud-tarea { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-letra="grande"] .dock-principal small { white-space: normal; line-height: 1.15; }

/* ---------- Tu cocina: las opciones ---------- */
.opciones-lista { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; gap: .4rem; }
.opcion {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .7rem;
  padding: .55rem .8rem; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: rgba(42,26,18,.05); border: 1.5px solid var(--hairline); border-radius: var(--r-md);
}
.opcion b { font-family: var(--font-display); font-size: var(--t-sm); }
.opcion small { display: block; grid-column: 1; font-size: var(--t-xs); color: var(--text-muted); line-height: 1.3; }
.opcion i {
  grid-column: 2; grid-row: 1 / 3; font-style: normal; font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px; background: rgba(42,26,18,.1); color: var(--text-muted);
}
.opcion[aria-pressed="true"] { background: rgba(108,191,90,.14); border-color: var(--hoja-600); }
.opcion[aria-pressed="true"] i { background: var(--hoja-600); color: #fff; }
.opciones-pie { font-size: var(--t-xs); color: var(--text-muted); margin: 0; }
.opciones-sub { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-ink); margin: .4rem 0 .2rem; }

/* ---- el renglón de «se abrió una página» en la hoja de listo ----
   Lo que había aquí era un párrafo de historia con su cita, después
   de cada parada. Probándolo con gente quedó claro que entre dos
   mesones nadie se para a leer: querían el siguiente. Ahora es un
   renglón que avisa y lleva al cuaderno de un toque; el texto vive
   allá, entero. */
.listo-nota {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; min-height: 52px;
  margin: var(--sp-2) 0 0; padding: .5rem .7rem;
  text-align: left; font-family: inherit; color: var(--text);
  background: var(--papel-200, rgba(0,0,0,.045));
  border: 1.5px dashed var(--madera-300, #d07c3f);
  border-radius: var(--r-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.listo-nota:active { transform: scale(.985); }
.listo-nota-ic { flex: 0 0 auto; font-size: 1.4rem; line-height: 1; }
.listo-nota-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.listo-nota-txt small {
  font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.listo-nota-txt strong {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  line-height: 1.2;
}
.listo-nota-ir { flex: 0 0 auto; font-size: 1.2rem; color: var(--text-muted); }
/* el plato nuevo: la misma fila, pero en oro y con borde lleno — es
   una noticia, no una nota al margen */
.listo-plato {
  background: linear-gradient(180deg, #fff3d6, #ffe6ab);
  border: 1.5px solid rgba(224,161,44,.65);
  animation: reto-entra .5s var(--ease-spring) both .6s;
}
.listo-plato .listo-nota-txt small { color: var(--maiz-800); opacity: .75; }
.listo-plato .listo-nota-txt strong { color: var(--maiz-800); }

/* ---- el orden de la olla, en el cuaderno ---- */
.orden-olla { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.orden-olla li {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .45rem 0;
  border-top: 1px solid rgba(0,0,0,.08);
}
.orden-olla li:first-child { border-top: 0; }
.orden-olla b { font-family: var(--font-display); font-size: var(--t-sm); }
.orden-olla span { font-size: var(--t-xs); line-height: 1.4; color: var(--text-muted); }

/* la frase de cocina en la pantalla de «se arruinó»: dicha en bajo,
   que es un consuelo y no una lección */
.arruinado-nota {
  margin: var(--sp-2) 0 0; padding: .5rem .7rem;
  font-size: var(--t-xs); line-height: 1.45; font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--madera-300, #d07c3f);
  background: rgba(0,0,0,.04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  text-align: left;
}
/* la primera vez, el arreglo: se lee como instrucción, no como nota */
/* el pie pegado de una hoja larga: los botones no se van debajo del borde */
.sheet-pie {
  position: sticky; bottom: calc(-1 * (env(safe-area-inset-bottom) + var(--sp-5)));
  width: calc(100% + 2 * var(--sp-5)); margin: 0 calc(-1 * var(--sp-5)) calc(-1 * (env(safe-area-inset-bottom) + var(--sp-5)));
  padding: var(--sp-2) var(--sp-5) calc(env(safe-area-inset-bottom) + var(--sp-4));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: linear-gradient(180deg, rgba(255,248,236,0), var(--crema-100) 22%);
  z-index: 2;
}
.sheet-pie .btn + .btn { margin-top: -.15rem; }
.arruinado-nota--como { font-style: normal; font-weight: 700; color: var(--text); border-left-color: var(--nopal-600, #4c7c1f); background: rgba(108,191,90,.12); }

/* ============================================================
   LA DESPENSA — el menú nuevo: una bolsa por ingrediente.

   Aquí SÍ se desplaza, y a propósito. La consola de la semana no
   desplazaba nada porque cada día eran ocho paradas y cabían; los
   dieciocho ingredientes no caben en una pantalla de teléfono sin
   volverse ilegibles, y pasar de página para encontrar una bolsa es
   peor que bajar el pulgar. Lo que no se desplaza es la cabecera —el
   plato que hoy sale— ni el dock, que es donde se cocina.
   ============================================================ */
.scroll--despensa {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .2rem var(--sp-4) var(--sp-2);
  /* el borde de arriba se difumina: se ve que hay más arriba */
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 6px), transparent 100%);
}
/* los nombres de plato son largos («Sopa de zapallo y doce granos»)
   y a tamaño de titular se comían media pantalla: aquí manda caber */
#mesa-titulo { font-size: clamp(1.15rem, 5.4vw, 1.6rem); line-height: 1.08; }
/* la frase de qué falta es la razón para abrir otra bolsa: cabe en
   dos renglones antes que cortarse con puntos suspensivos */
#screen-mesa .sign-sub { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* la meta más cercana se toca: lleva a su bolsa */
.mesa-progreso--meta { text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
/* la tarea y la cuenta caben en un renglón bajando el cuerpo: en dos
   renglones empujaban el nombre del ingrediente fuera de la cabecera */
#screen-bolsa .sign-sub { font-size: clamp(.72rem, 3.4vw, .9rem); line-height: 1.2; }
.mesa-plato-nota {
  flex: 0 0 auto;
  /* el aire de abajo va en el MARGEN: el recorte de las dos líneas
     corta en el borde del padding, y con el aire como padding asomaba
     media tercera línea bajo los puntos suspensivos */
  margin: 0 0 var(--sp-2); padding: 0 var(--sp-4);
  font-size: var(--t-2xs); line-height: 1.35; color: rgba(255,244,226,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* el enlace a la escalera de platos: chico, bajo la nota del plato */
.mesa-escalera {
  flex: 0 0 auto; align-self: flex-start;
  margin: calc(-1 * var(--sp-1)) var(--sp-4) var(--sp-2); padding: .3rem .7rem;
  font: inherit; font-size: var(--t-2xs); font-weight: 700; color: var(--oro-400);
  background: rgba(255,244,226,.06); border: 1px solid rgba(244,185,66,.35); border-radius: 999px;
  cursor: pointer;
}
.mesa-escalera:active { transform: scale(.96); }
/* la hoja de los platos: una fila por peldaño */
.platos-lista { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; gap: .35rem; }
.plato-fila {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: .6rem;
  text-align: left; padding: .55rem .8rem; border-radius: var(--r-md);
  background: rgba(244,185,66,.12); border: 1.5px solid rgba(244,185,66,.4); cursor: pointer;
}
.plato-fila b { font-family: var(--font-display); font-size: var(--t-sm); color: var(--text); }
.plato-fila small { grid-row: 2; font-size: var(--t-2xs); color: var(--text-muted); }
.plato-fila span { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: var(--t-sm); }
.plato-fila--hoy { border-color: var(--oro-600); box-shadow: var(--glow-oro); }
.plato-fila--cerrada { background: rgba(42,26,18,.05); border-color: var(--hairline); cursor: default; }
.plato-fila--cerrada b { color: var(--text-muted); }
.plato-fila:not(.plato-fila--cerrada):active { transform: scale(.98); }
.mesa-bolsas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.mesa-extras { padding: var(--sp-3) 0 var(--sp-2); }
.mesa-niveles {
  margin: 0 0 var(--sp-2);
  text-align: center;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  color: var(--text-muted);
}

/* LA FICHA DE UNA BOLSA. Cuatro estados que se leen sin leer:
   cerrada (apagada, con candado), nueva (oro, «empieza aquí»),
   en curso (barra), sabida (anillo verde y su ✓). */
.bolsa {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .18rem;
  min-height: 96px;
  padding: .45rem .3rem .5rem;
  border-radius: var(--r-md);
  /* CADA BOLSA ES UN PAPELITO CON LUZ. En la semana las fichas iban
     dentro de una hoja crema y podían ser transparentes; aquí flotan
     sobre la cocina de noche, así que la cara clara y la tinta oscura
     tienen que traerlas ellas o no se lee ni un nombre. */
  background: linear-gradient(180deg, var(--crema-50), var(--crema-100));
  border: 1.5px solid var(--hairline);
  box-shadow: var(--e-1);
  font-family: inherit; text-align: center; color: var(--text);
  cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bolsa:active { transform: scale(.95); }
.bolsa-ico {
  flex: 0 0 auto;
  width: 46px; height: 46px; padding: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0%, var(--crema-50) 55%, var(--crema-200) 92%);
  box-shadow: inset 0 -3px 6px rgba(42,26,18,.08), var(--e-1);
}
.bolsa-ico svg, .bolsa-ico .plate { width: 100%; height: 100%; }
.bolsa-nombre {
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.bolsa-pie { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--text-muted); line-height: 1; }
.bolsa-nuevo { color: var(--maiz-800); }
.bolsa-barra {
  position: absolute; left: .5rem; right: .5rem; bottom: .3rem;
  height: 3px; border-radius: 99px; background: rgba(42,26,18,.12); overflow: hidden;
}
.bolsa-barra i { display: block; height: 100%; background: var(--hoja-500); border-radius: 99px; }
.bolsa-sello {
  position: absolute; top: .25rem; right: .35rem;
  font-size: .75rem; color: var(--hoja-500); font-weight: 800;
}
.bolsa-candado { font-size: .8rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

.bolsa--cerrada { opacity: .5; background: rgba(255,244,226,.14); border-color: rgba(255,244,226,.12); box-shadow: none; color: var(--crema-200); }
.bolsa--cerrada .bolsa-ico { filter: grayscale(.9); opacity: .5; background: rgba(255,244,226,.1); box-shadow: none; }
.bolsa--cerrada .bolsa-nombre { color: var(--crema-200); }
.bolsa--sabida .bolsa-ico { box-shadow: inset 0 0 0 2.5px var(--hoja-500), var(--e-1); }
/* OJO CON LOS TINTES TRANSLÚCIDOS: encima de la cocina de noche un
   verde al 12% no aclara la ficha, la apaga — y el nombre en tinta
   oscura desaparecía justo en las bolsas terminadas. Los estados
   pintan SOBRE la cara clara, no en lugar de ella. */
.bolsa--completa {
  background: linear-gradient(180deg, #f2fbef, #e2f3dd);
  border-color: rgba(93,181,90,.55);
}
.bolsa--completa .bolsa-ico { box-shadow: inset 0 0 0 3px var(--hoja-500), var(--e-1); }
/* la recién abierta llama: es la única noticia de esta pantalla */
.bolsa--nueva {
  background: linear-gradient(180deg, #fff3d6, #ffe6ab);
  border-color: rgba(224,161,44,.65);
}
.bolsa--nueva .bolsa-nuevo { color: var(--maiz-800); }
.bolsa--nueva .bolsa-ico {
  box-shadow: inset 0 0 0 2.5px var(--oro-400), 0 0 0 4px rgba(244,185,66,.22), var(--e-2);
  animation: late-suave 1.8s var(--ease-in-out) infinite;
}

/* ============================================================
   DENTRO DE UNA BOLSA — los niveles en fila.

   Aquí las fichas SON renglones y no tarjetas: dentro de un
   ingrediente lo que se compara es el peldaño (qué número, cuántas
   cucharas), y una fila lo enseña de un vistazo. El icono no se
   repite en cada uno — es el mismo dieciocho veces y ya está arriba,
   en la cabecera.
   ============================================================ */
/* EL GESTO VA SOBRE LA COCINA DE NOCHE, no dentro de una hoja: sus
   colores tienen que ser los del fondo oscuro. Con los de la hoja
   —tinta casi negra en el <b>— las dos palabras que MÁS importan de
   la frase («jala hacia abajo») eran las únicas invisibles. */
.bolsa-gesto {
  flex: 0 0 auto;
  margin: 0; padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--t-2xs); line-height: 1.4; color: rgba(255,244,226,.68);
}
.bolsa-gesto b { color: var(--oro-300); font-weight: 800; }
/* la nota del ingrediente, al pie de la bolsa */
.bolsa-nota { margin: var(--sp-3) var(--sp-1) var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: rgba(255,244,226,.06); border: 1px solid rgba(255,244,226,.12); }
.bolsa-nota p { margin: .3rem 0; font-size: var(--t-xs); line-height: 1.45; color: rgba(255,244,226,.82); }
.bolsa-nota-origen { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--oro-300); letter-spacing: .03em; }
.bolsa-nota-cierre { font-size: var(--t-2xs); color: rgba(255,244,226,.55); }
.bolsa-nota-ir { font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--oro-300); background: none; border: 0; padding: .3rem 0; cursor: pointer; }
.scroll--bolsa {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .2rem var(--sp-4) var(--sp-2);
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 6px), transparent 100%);
}
.bolsa-niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.bolsa-niveles li { display: flex; }
.bolsa-niveles .renglon {
  flex: 1 1 auto;
  /* misma razón que las bolsas: el renglón flota sobre la cocina de
     noche y se trae su propia cara clara */
  background: linear-gradient(180deg, var(--crema-50), var(--crema-100));
  box-shadow: var(--e-1);
  color: var(--text);
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: .6rem;
  min-height: 52px;
  padding: .45rem .7rem .45rem .5rem;
  text-align: left;
}
.bolsa-niveles .renglon-num {
  position: static;
  flex: 0 0 auto; width: 1.6rem; text-align: center;
  font-size: 1.15rem;
}
.bolsa-niveles .renglon-txt { flex: 1 1 auto; flex-direction: row; align-items: center; gap: .4rem; }
.bolsa-niveles .renglon-nombre { -webkit-line-clamp: 1; font-size: var(--t-xs); }
.bolsa-niveles .renglon-estado { position: static; flex: 0 0 auto; }
.bolsa-niveles .renglon--bloqueado {
  background: rgba(255,244,226,.14); border-color: rgba(255,244,226,.12);
  box-shadow: none; color: var(--crema-200); opacity: .6;
}
.bolsa-niveles .renglon--bloqueado .renglon-num { color: var(--crema-200); }
.bolsa-niveles .renglon--foco { transform: none; animation: none; box-shadow: 0 0 0 2px var(--oro-400), var(--e-2); }
.bolsa-niveles .renglon--foco:active { transform: scale(.98); }

/* ============================================================
   LOS RETOS — por qué volver a una bolsa terminada.

   Viven al pie de la pantalla de la bolsa, después de los niveles:
   quien baja hasta ahí es quien ya no tiene peldaño nuevo y anda
   buscando qué más hay.
   ============================================================ */
.bolsa-retos { margin-top: var(--sp-4); padding-bottom: var(--sp-2); }
.bolsa-retos-titulo {
  margin: 0 0 .5rem; padding-left: .2rem;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,244,226,.5);
}
.reto {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  margin-bottom: .35rem;
  border-radius: var(--r-md);
  background: rgba(255,244,226,.09);
  border: 1.5px solid rgba(255,244,226,.12);
  color: rgba(255,244,226,.78);
}
.reto-ico { flex: 0 0 auto; font-size: 1.2rem; line-height: 1; filter: grayscale(.55) opacity(.75); }
.reto-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.reto-txt strong { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; }
.reto-txt small { font-size: .68rem; line-height: 1.25; opacity: .72; }
/* LA CUENTA ES LA INVITACIÓN: «3 / 9» pide otra partida, un candado
   pelado no pide nada. Por eso el que falta enseña su marcador y
   sólo el ganado lo cambia por el ✓. */
.reto-marca {
  flex: 0 0 auto;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800;
  color: rgba(255,244,226,.55);
}
.reto--hecho {
  background: linear-gradient(180deg, #f2fbef, #e2f3dd);
  border-color: rgba(93,181,90,.55);
  color: var(--text);
}
.reto--hecho .reto-ico { filter: none; }
.reto--hecho .reto-marca { color: var(--hoja-500); font-size: var(--t-md); }

/* la medalla en la ficha de la despensa: sustituye al ✓, que ya no
   era noticia en una bolsa terminada */
.bolsa-medallas {
  position: absolute; top: .25rem; right: .3rem;
  font-family: var(--font-display); font-size: .62rem; font-weight: 800;
  color: var(--maiz-800);
}
.bolsa--cerrada .bolsa-medallas { display: none; }

/* EL RETO GANADO en la hoja de listo */
.listo-reto {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; margin-bottom: var(--sp-2);
  padding: .6rem .8rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #fff3d6, #ffe6ab);
  border: 1.5px solid rgba(224,161,44,.6);
  text-align: left;
  animation: reto-entra .5s var(--ease-spring) both .85s;
}
@keyframes reto-entra { from { opacity: 0; transform: scale(.9) translateY(8px); } }
.listo-reto-ico { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; }
.listo-reto-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; color: var(--maiz-800); }
.listo-reto-txt small { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.listo-reto-txt strong { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; }
.listo-reto-txt em { font-size: .7rem; font-style: normal; line-height: 1.3; opacity: .8; }

/* LA BIENVENIDA: la escalera de platos en una fila, que es la
   respuesta a «¿y esto para qué?» antes de tocar la primera vaina */
.hola-escalera {
  list-style: none; margin: var(--sp-3) 0 var(--sp-1); padding: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem;
  font-family: var(--font-display); font-size: var(--t-xs); color: var(--text-muted);
}
.hola-escalera li { display: flex; align-items: center; gap: .25rem; }
.hola-escalera li + li::before { content: '→'; opacity: .5; }
.hola-escalera b { color: var(--maiz-800); }
.hola-pie { margin: 0 0 var(--sp-3); text-align: center; font-size: var(--t-2xs); color: var(--text-muted); }

/* el título de una hoja recibe el foco al abrirse (para el lector de
   pantalla); no hace falta pintarle un aro */
.sheet-title:focus { outline: none; }