/* ==========================================================================
   cloaca.css — la capa de juego de Guareneitor (02-10-2026)
   Nivel de alcantarilla de arcade de los 90: lo que es interfaz va oscuro y con
   marcadores; lo que es información del restorán va en boletos de papel encima.

   Paleta, con un rol por color (ver diseno/PALETA.md):
     --ooze    verde tóxico  → lo seleccionado, los marcadores, el foco
     --queso   amarillo      → lo destacado y los botones secundarios
     --laser   rojo LED      → el porcentaje y el botón principal
     --oxido   naranjo       → solo cañerías (decoración, nunca texto)
     --fondo / --ladrillo    → el muro; --papel → los boletos
   Todo el movimiento es transform/opacity y se apaga con prefers-reduced-motion.
   ========================================================================== */

@font-face {
  font-family: "Arcade";
  src: url("../fonts/pressstart.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

:root {
  --fondo: #0D1B1E;
  --fondo-alto: #081214;
  --ladrillo: #16292C;
  --mosaico: #12262A;
  --mosaico-alto: #1A3539;
  --verdin: #2F6B5C;
  --ooze: #9BE931;
  --ooze-osc: #24400C;
  --oxido: #C8632B;
  --oxido-luz: #E89255;
  --oxido-osc: #7A3A17;
  --cano: var(--oxido);
  --queso: #FFCC33;
  --papel: #F6F0DF;
  --claro: #EAF4EE;
  --claro-suave: #9FBDB3;
  --f-arcade: "Arcade", "Courier New", monospace;
}

body { background-color: var(--fondo); }
:focus-visible { outline-color: var(--ooze); }

/* ---------- barra y pestañas: el caño con sus bridas ---------- */
.barra, .tabs { background: var(--fondo-alto); }
.barra { box-shadow: 0 6px 0 var(--oxido), 0 9px 0 var(--tinta); }
.tabs { box-shadow: 0 -6px 0 var(--oxido), 0 -9px 0 var(--tinta); }
.tab[aria-current="page"] .ico { background: var(--ooze); border-color: var(--tinta); color: var(--tinta); }
.tab[aria-current="page"] { color: var(--ooze); }
.tab .globo { background: var(--laser-vivo); color: #fff; border-color: var(--fondo-alto); }
.btn-bancos { background: var(--mosaico-alto); color: var(--claro); border-color: var(--tinta); box-shadow: 2px 2px 0 #000; }
.btn-bancos .cuantos { background: var(--queso); color: var(--tinta); }
.marca-txt { color: var(--claro); }

.marcador {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 10px;
  font-family: var(--f-arcade); font-size: 11px; color: var(--ooze);
  background: #050B0C; border: 2px solid var(--verdin); border-radius: 8px;
}
.marcador svg { width: 20px; height: 20px; }
.marcador .relleno { fill: var(--queso); }
.marcador b { font-weight: 400; min-width: 2ch; text-align: right; }
.marcador.sube { animation: marcador-sube 420ms ease-out; }
@keyframes marcador-sube { 40% { transform: scale(1.18); background: var(--ooze-osc); } }
@media (max-width: 430px) { .barra .marcador { padding: 0 7px; } .barra .marcador svg { width: 17px; height: 17px; } }

/* ---------- la columna de contenido es un paño de muro: los caños pasan por detrás ---------- */
.inicio-dentro, .comida-dentro, .idas-dentro, .indice-dentro { position: relative; }

/* ---------- marcadores del nivel (portada) ---------- */
.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.hud-item {
  background: #050B0C; border: 2px solid var(--verdin); border-radius: 10px; padding: 8px 8px 6px; text-align: center;
}
.hud-rotulo { display: block; font-family: var(--f-arcade); font-size: 11px; line-height: 1.5; color: var(--claro-suave); }
.hud-valor { display: block; font-family: var(--f-titulo); font-weight: 800; font-stretch: 80%; font-size: 1.7rem; line-height: 1.1; color: var(--ooze); }
.inicio-titulo { color: var(--claro); text-shadow: 3px 3px 0 #000; }
.inicio-sub, .comida .inicio-sub { color: var(--claro); }
.elige {
  font-family: var(--f-arcade); font-size: 13px; line-height: 1.6; color: var(--queso); margin: 26px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.elige::before { content: ""; width: 0; height: 0; border: 7px solid transparent; border-left-color: var(--queso); animation: parpadeo 1s steps(2, jump-none) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ---------- mosaicos de selección (trajes y cocinas) ---------- */
.miembro, .plato {
  --luz: var(--verdin);
  background: linear-gradient(180deg, var(--mosaico-alto), var(--mosaico) 62%);
  color: var(--claro); border: 3px solid #000; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--verdin), 5px 6px 0 2px #000;
  position: relative; overflow: hidden;
}
.miembro:hover, .plato:hover, .miembro:focus-visible, .plato:focus-visible { box-shadow: 0 0 0 3px var(--ooze), 5px 6px 0 3px #000; }
.miembro:active, .plato:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--ooze), 2px 3px 0 3px #000; }
.miembro-dibujo, .plato-dibujo { position: relative; z-index: 0; }
/* foco de luz del color del traje + tapa de alcantarilla bajo los pies */
.miembro-dibujo::before, .plato-dibujo::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--luz), transparent 72%); opacity: .5;
}
.miembro-dibujo::after, .plato-dibujo::after {
  content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 1%; height: 11%;
  background: repeating-linear-gradient(90deg, #2A3B3D 0 6px, #1B2A2C 6px 12px); border: 2.5px solid #000; border-radius: 50%;
}
.miembro-rol, .plato-rol { font-family: var(--f-arcade); font-size: 11px; line-height: 1.5; color: var(--ooze); }
.miembro-nombre { color: var(--claro); }
.miembro-frase { color: var(--claro-suave); }
.miembro-dato, .plato-dato { background: var(--papel); color: var(--tinta); border-color: #000; }
.miembro-accion { background: var(--queso); color: var(--tinta); border: 2.5px solid #000; box-shadow: 2px 2px 0 #000; }
.plato-nombre { color: var(--claro); }
.plato.sin { opacity: .5; }
.comida-cab, .comida-heroe {
  --luz: var(--verdin);
  background: linear-gradient(180deg, var(--mosaico-alto), var(--mosaico)); color: var(--claro);
  border: 3px solid #000; box-shadow: 0 0 0 2px var(--verdin), 5px 6px 0 2px #000;
}
.comida-rol { font-family: var(--f-arcade); font-size: 11px; line-height: 1.5; color: var(--ooze); }
.comida-titulo { color: var(--claro); }
.comida-bajada { color: var(--claro-suave); }
.comida-bajada strong { color: var(--queso); }
.inicio-bajada strong { color: var(--queso); }
.volver-link { color: var(--claro); }

/* chips sobre el muro */
.vista .chip, .dias .chip { background: var(--mosaico-alto); color: var(--claro); border-color: #000; }
.vista .chip[aria-pressed="true"], .dias .chip[aria-pressed="true"] { background: var(--ooze); color: var(--tinta); }
.dias .chip.hoy, .vista .chip.hoy { background: var(--queso); color: var(--tinta); }
.dias .chip.hoy[aria-pressed="true"], .vista .chip.hoy[aria-pressed="true"] { background: var(--ooze); color: var(--tinta); }
.hoja .chip { background: var(--papel); color: var(--tinta); border-color: var(--tinta); }
.hoja .chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.dlg .chip, .ficha .chip { background: var(--papel); color: var(--tinta); border-color: var(--tinta); }
.dlg .chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.comida-controles .orden, .comida-controles .btn { background: var(--papel); }
.ley { background: var(--fondo-alto); color: var(--claro); border-color: #000; }
.ley small { color: var(--claro-suave); }
.quien { background: var(--papel); }

/* ==========================================================================
   EL JUEGO: guarenes que corren por el caño y se tiran al agua
   ========================================================================== */
.gc { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 2px rgba(155, 233, 49, .55)); }
.gc .gc-pata-a, .gc .gc-pata-a2, .gc .gc-pata-b, .gc .gc-pata-b2, .gc .gc-cola, .gc .gc-tarjeta { transform-box: fill-box; transform-origin: 50% 0%; }
.gc .gc-pata-a, .gc .gc-pata-a2 { animation: gc-pata 320ms ease-in-out infinite alternate; }
.gc .gc-pata-b, .gc .gc-pata-b2 { animation: gc-pata 320ms ease-in-out infinite alternate-reverse; }
.gc .gc-cola { transform-origin: 100% 100%; animation: gc-cola 640ms ease-in-out infinite alternate; }
.gc .gc-cuerpo { animation: gc-bote 320ms ease-in-out infinite alternate; }
@keyframes gc-pata { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes gc-cola { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes gc-bote { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

/* franja con caño: va dentro del flujo, en cualquier ancho */
.franja {
  position: relative; height: 92px; margin: 22px -14px 6px; overflow: hidden;
}
.franja::before {  /* el caño */
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 148px, var(--oxido-osc) 148px 151px, #5A2A10 151px 163px, var(--oxido-osc) 163px 166px),
    linear-gradient(180deg, var(--oxido-luz) 0 22%, var(--oxido) 22% 70%, var(--oxido-osc) 70%);
  border-top: 3px solid #000; border-bottom: 3px solid #000;
}
.franja-rotulo {
  position: absolute; left: 14px; top: 4px; font-family: var(--f-arcade); font-size: 11px; line-height: 1.5; color: var(--claro-suave);
}
.corredor {
  position: absolute; left: 0; bottom: 26px; width: 84px; padding: 0; border: 0; background: transparent; cursor: pointer;
  animation: correr var(--t, 9s) linear infinite; animation-delay: var(--espera, 0s);
  transform: translateX(-110px); touch-action: manipulation;
}
.corredor.vuelve { animation-name: correr-vuelta; }
.corredor.vuelve .gc { transform: scaleX(-1); }
@keyframes correr { from { transform: translateX(-110px); } to { transform: translateX(var(--pista, 100vw)); } }
@keyframes correr-vuelta { from { transform: translateX(var(--pista, 100vw)); } to { transform: translateX(-110px); } }
.corredor:focus-visible { outline: 3px solid var(--ooze); outline-offset: 2px; border-radius: 10px; }
.corredor.atrapado .gc { animation: atrapado 520ms cubic-bezier(.3, .7, .4, 1); }
@keyframes atrapado { 35% { transform: translateY(-26px) rotate(-14deg); } 70% { transform: translateY(0) rotate(4deg); } }
.corredor.vuelve.atrapado .gc { animation-name: atrapado-vuelta; }
@keyframes atrapado-vuelta { 0%, 100% { transform: scaleX(-1); } 35% { transform: scaleX(-1) translateY(-26px) rotate(-14deg); } 70% { transform: scaleX(-1) rotate(4deg); } }
.mas-uno {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%); pointer-events: none;
  font-family: var(--f-arcade); font-size: 12px; color: var(--queso); text-shadow: 2px 2px 0 #000; white-space: nowrap;
  animation: mas-uno 900ms ease-out forwards;
}
@keyframes mas-uno { to { transform: translate(-50%, -34px); opacity: 0; } }

/* franja de agua: el fondo del nivel, con clavadistas */
.agua {
  position: relative; height: 150px; margin: 30px -14px -40px; overflow: hidden;
}
.agua::before {  /* tubo de desagüe desde donde saltan */
  content: ""; position: absolute; left: 0; top: 34px; width: 74px; height: 30px;
  background: linear-gradient(180deg, #7C8B8F 0 25%, #55646A 25% 75%, #39464B 75%); border: 3px solid #000; border-left: 0; border-radius: 0 6px 6px 0;
}
.agua-olas { position: absolute; left: -60px; right: -60px; bottom: 0; height: 58px; }
.agua-olas svg { width: calc(100% + 120px); height: 100%; display: block; }
.agua-olas .ola-1 { animation: gn-ola 5s linear infinite; }
.agua-olas .ola-2 { animation: gn-ola 3s linear infinite reverse; }
.clavadista {
  position: absolute; left: 6px; top: 0; width: 66px; pointer-events: none;
  animation: clavado 7s cubic-bezier(.3, 0, .6, 1) infinite; animation-delay: var(--espera, 0s);
  opacity: 0;
}
.clavadista .gc-pata-a, .clavadista .gc-pata-a2, .clavadista .gc-pata-b, .clavadista .gc-pata-b2 { animation: none; }
@keyframes clavado {
  0%   { transform: translate(-70px, -8px) rotate(0); opacity: 1; }
  12%  { transform: translate(8px, -8px) rotate(0); opacity: 1; }
  18%  { transform: translate(18px, -4px) rotate(8deg); opacity: 1; }
  34%  { transform: translate(78px, -40px) rotate(-22deg); opacity: 1; }
  48%  { transform: translate(126px, -6px) rotate(48deg); opacity: 1; }
  58%  { transform: translate(150px, 66px) rotate(84deg); opacity: 1; }
  61%  { transform: translate(152px, 92px) rotate(88deg); opacity: 0; }
  100% { transform: translate(152px, 92px) rotate(88deg); opacity: 0; }
}
.salpicon { position: absolute; left: 150px; bottom: 34px; width: 90px; height: 60px; pointer-events: none; opacity: 0; animation: salpicon 7s ease-out infinite; animation-delay: var(--espera, 0s); }
.salpicon i { position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: #3C7A6E; border: 2px solid #000; }
.salpicon i:nth-child(1) { --dx: -34px; --dy: -34px; }
.salpicon i:nth-child(2) { --dx: -14px; --dy: -52px; }
.salpicon i:nth-child(3) { --dx: 10px; --dy: -56px; }
.salpicon i:nth-child(4) { --dx: 32px; --dy: -36px; }
.salpicon i { animation: gota 7s ease-out infinite; animation-delay: var(--espera, 0s); }
@keyframes salpicon { 0%, 59% { opacity: 0; } 61%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes gota { 0%, 60% { transform: translate(-50%, 0) scale(.4); } 70% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1); } 76%, 100% { transform: translate(calc(-50% + var(--dx)), 0) scale(.6); } }
.agua .clavadista.dos { left: auto; right: 150px; --espera: -3.4s; animation-name: clavado-b; }
.agua .salpicon.dos { left: auto; right: 14px; --espera: -3.4s; }
.agua::after {  /* segundo desagüe, a la derecha */
  content: ""; position: absolute; right: 0; top: 34px; width: 74px; height: 30px;
  background: linear-gradient(180deg, #7C8B8F 0 25%, #55646A 25% 75%, #39464B 75%); border: 3px solid #000; border-right: 0; border-radius: 6px 0 0 6px;
}
.clavadista.dos .gc { transform: scaleX(-1); }
@keyframes clavado-b {
  0%   { transform: translate(220px, -8px) rotate(0); opacity: 1; }
  12%  { transform: translate(142px, -8px) rotate(0); opacity: 1; }
  18%  { transform: translate(132px, -4px) rotate(-8deg); opacity: 1; }
  34%  { transform: translate(72px, -40px) rotate(22deg); opacity: 1; }
  48%  { transform: translate(24px, -6px) rotate(-48deg); opacity: 1; }
  58%  { transform: translate(0, 66px) rotate(-84deg); opacity: 1; }
  61%  { transform: translate(-2px, 92px) rotate(-88deg); opacity: 0; }
  100% { transform: translate(-2px, 92px) rotate(-88deg); opacity: 0; }
}

/* ojos al fondo del túnel y carteles del nivel */
.tunel {
  position: absolute; width: 120px; height: 104px; background: #050B0C; border: 4px solid #000; border-bottom: 0; border-radius: 60px 60px 0 0;
  box-shadow: 0 0 0 5px var(--ladrillo);
}
.tunel i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--laser-vivo); box-shadow: 11px 0 0 var(--laser-vivo); animation: ojos 5s steps(1) infinite; }
.tunel i:nth-child(1) { left: 34px; top: 46px; }
.tunel i:nth-child(2) { left: 66px; top: 62px; animation-delay: -1.7s; }
.tunel i:nth-child(3) { left: 48px; top: 78px; animation-delay: -3.1s; transform: scale(.8); }
@keyframes ojos { 0%, 88% { opacity: 1; } 90%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } }
.cartel {
  position: absolute; padding: 8px 10px; background: var(--queso); color: var(--tinta); border: 3px solid #000; border-radius: 4px;
  font-family: var(--f-arcade); font-size: 11px; line-height: 1.6; box-shadow: 3px 3px 0 #000; max-width: 150px;
}
.cartel::before, .cartel::after { content: ""; position: absolute; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #000; }
.cartel::before { left: 4px; } .cartel::after { right: 4px; }
.cartel.verde { background: var(--ooze); }
.gota-cano { position: absolute; width: 7px; height: 11px; background: #4E9C8B; border: 2px solid #000; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; animation: gotea 3.6s ease-in infinite; animation-delay: var(--espera, 0s); }
@keyframes gotea { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { transform: translateY(0) scale(1); opacity: 1; } 80% { transform: translateY(160px); opacity: 1; } 86%, 100% { transform: translateY(170px) scale(1.6, .3); opacity: 0; } }

/* ---------- costados de escritorio: el nivel se ve a los lados de la columna ---------- */
.lado { display: none; }
@media (min-width: 1240px) {
  .lado {
    display: block; position: fixed; z-index: 21; top: calc(var(--alto-barra) + var(--cano-alto)); bottom: 0;
    width: calc((100vw - 980px) / 2); overflow: hidden; pointer-events: none;
  }
  .lado.izq { left: 0; } .lado.der { right: 0; }
  body[data-vista="hoy"] .lado, body[data-vista="cerca"] .lado { display: none; }
  .lado .franja { position: absolute; left: 0; right: 0; margin: 0; pointer-events: auto; }
  .lado .franja.a { top: 12%; } .lado .franja.b { top: 52%; }
  .lado .tunel { bottom: 150px; }
  .lado.izq .tunel { left: 12%; } .lado.der .tunel { right: 12%; }
  .lado .cartel { top: 36%; }
  .lado.izq .cartel { left: 16%; transform: rotate(-3deg); } .lado.der .cartel { right: 14%; transform: rotate(2deg); }
  .lado .agua { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
  .lado .gota-cano { top: calc(12% + 86px); left: 30%; }
  .lado .gota-cano.dos { top: calc(52% + 86px); left: 68%; --espera: -1.8s; }
  .lado .corredor { --pista: 40vw; }
}

/* el paño central en escritorio: borde de muro para que el caño "entre" */
@media (min-width: 900px) {
  .inicio-dentro, .comida-dentro, .idas-dentro, .indice-dentro { padding-left: 22px; padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .gc *, .corredor, .clavadista, .salpicon, .salpicon i, .gota-cano, .tunel i, .elige::before, .agua-olas .ola-1, .agua-olas .ola-2, .marcador.sube, .mas-uno { animation: none !important; }
  .corredor { transform: translateX(40px); }
  .corredor.vuelve { transform: translateX(calc(100% + 120px)); }
  .clavadista { opacity: 1; transform: translate(8px, -8px); }
  .clavadista.dos { transform: translate(142px, -8px); }
  .gota-cano { opacity: 0; }
}

/* ==========================================================================
   ÍNDICE RATA: la tabla de puntajes
   ========================================================================== */
.indice { background: transparent; color: var(--claro); --sombra: 5px 5px 0 #000; --sombra-chica: 3px 3px 0 #000; }
.indice-dentro { max-width: 820px; margin: 0 auto; padding: 14px 14px 40px; }
.ajustes { display: grid; gap: 12px; margin: 16px 0 4px; padding: 14px; background: #050B0C; border: 2px solid var(--verdin); border-radius: 12px; }
.ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-weight: 700; }
.paso { display: inline-flex; align-items: center; gap: 6px; }
.paso output { min-width: 2.2ch; text-align: center; font-family: var(--f-titulo); font-weight: 800; font-size: 1.7rem; color: var(--ooze); }
.paso .btn { min-height: 44px; width: 44px; font-size: 1.4rem; background: var(--papel); color: var(--tinta); }
.casilla-linea { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.casilla-linea input { width: 24px; height: 24px; accent-color: var(--ooze); flex: none; }
.puntajes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.puesto { background: linear-gradient(180deg, var(--mosaico-alto), var(--mosaico)); border: 3px solid #000; border-radius: 12px; box-shadow: inset 7px 0 0 var(--cb), 4px 5px 0 #000; overflow: hidden; }
.puesto > summary { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px 10px 18px; min-height: 64px; cursor: pointer; }
.puesto > summary::after { content: none; }
.puesto[open] > summary { border-bottom: 3px solid #000; }
.puesto-n { font-family: var(--f-arcade); font-size: 13px; color: var(--queso); }
.puesto-nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 1.18rem; line-height: 1.15; }
.puesto-nombre small { display: block; font-family: var(--f-texto); font-weight: 400; font-size: .86rem; color: var(--claro-suave); margin-top: 2px; }
.puesto-pts { font-family: var(--f-titulo); font-weight: 800; font-stretch: 78%; font-size: 2rem; line-height: 1; color: var(--ooze); text-align: right; }
.puesto-pts small { display: block; font-family: var(--f-arcade); font-size: 11px; color: var(--claro-suave); margin-top: 4px; }
.puesto-detalle { background: var(--papel); color: var(--tinta); padding: 14px; display: grid; gap: 14px; }
.datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.datos dt { font-size: .82rem; color: var(--tinta-suave); }
.datos dd { margin: 0; font-weight: 700; }
.datos dd small { font-weight: 400; color: var(--tinta-suave); }
.historia { margin: 0; display: flex; gap: 12px; align-items: center; }
.historia figcaption { font-size: .84rem; color: var(--tinta-suave); }
.mini-historia { flex: none; font-family: var(--f-texto); }
.costo { border: 2px dashed rgba(46, 42, 68, .4); border-radius: 10px; padding: 12px; display: grid; gap: 6px; }
.costo h4 { margin: 0; font-family: var(--f-titulo); font-size: 1.05rem; }
.costo .btn { justify-self: start; margin-top: 4px; }
.costo a { color: var(--tinta); }
.puesto-detalle > .btn { justify-self: start; }
.dupla { margin-top: 18px; padding: 14px; background: var(--queso); color: var(--tinta); border: 3px solid #000; border-radius: 12px; box-shadow: 4px 5px 0 #000; }
.dupla h3 { font-size: 1.25rem; margin-bottom: 4px; }
.metodo { margin-top: 16px; padding: 4px 14px 12px; background: #050B0C; border: 2px solid var(--verdin); border-radius: 12px; color: var(--claro-suave); }
.metodo summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--claro); cursor: pointer; }
.metodo p { margin-top: 8px; font-size: .95rem; }
.metodo strong { color: var(--claro); }
.solo-escritorio { display: none; }
.dlg-nota { padding: 0 16px 10px; }
.btn-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-weight: 700; color: var(--tinta); text-decoration: underline; cursor: pointer; text-align: left; }
@media (min-width: 900px) {
  .solo-escritorio { display: flex; }
  .barra { padding-right: 700px; }
}
@media (max-width: 420px) { .datos { grid-template-columns: 1fr; } }

.puesto[open] > summary::after, .puesto > summary::after { content: none; }
.puesto-n { font-size: 15px; }
.datos .ancho { grid-column: 1 / -1; }
.franja-rotulo { text-transform: uppercase; }
/* la barra en celulares angostos: el texto largo del botón se acorta */
.solo-ancho { display: inline; }
@media (max-width: 480px) {
  .solo-ancho { display: none; }
  .btn-bancos-txt { text-transform: capitalize; }
  .btn-bancos { padding: 6px 8px; gap: 4px; }
  .barra { gap: 6px; padding: 0 8px; }
  .marca { gap: 6px; }
  .marca-txt { font-size: 1.22rem; }
}
@media (min-width: 900px) { .barra { padding-right: 730px; } .btn-bancos .ico { display: none; } }
.comida-rol, .miembro-rol, .plato-rol { text-transform: uppercase; }

/* ---------- contraste sobre el muro ---------- */
.btn { color: var(--tinta); }
.btn-principal { color: #fff; }
.btn.btn-bancos { color: var(--claro); }
.vision .btn { color: #fff; }
.vision .btn-principal { color: var(--hud-fondo); }
.idas .intro, .idas .vacio p, .comida .vacio p, .indice .vacio p, .inicio .vacio p { color: var(--claro-suave); }
.idas h2, .idas .vacio h3, .comida .vacio h3 { color: var(--claro); }
.ida .aprox, .ida .ida-cuando { color: var(--tinta-suave); }

/* Índice Rata: filtro por renta */
.ajuste-nota { flex-basis: 100%; font-weight: 400; font-size: .82rem; color: var(--claro-suave); }
.fuera-renta { margin: 10px 2px 0; font-size: .9rem; color: var(--claro-suave); }

/* Crédito del mapa: propio y fijo, para no meter en la página el HTML que manda el servidor de teselas. */
.mapa-credito {
  position: fixed; z-index: 14; left: 8px; margin: 0;
  top: calc(var(--alto-barra) + var(--alto-dias) + var(--cano-alto) + 50px);
  max-width: calc(100% - 70px); padding: 2px 8px; border-radius: 8px;
  font-size: 11px; line-height: 1.5; color: #D5E2DC; background: rgba(8, 18, 20, .78);
}
.mapa-credito a { color: #D5E2DC; }
@media (min-width: 900px) { .mapa-credito { left: 448px; top: auto; bottom: 8px; } }
.pie-idas { margin: 14px 2px 0; font-size: .9rem; color: var(--claro-suave); }
.pie-idas .btn-link { color: var(--claro); }
.boleto-datos .por-tarjeta { flex-basis: 100%; font-weight: 700; }

/* Lo que va sobre papel lleva tinta, esté en la vista que esté (en «Comida» heredaba el texto claro de la vista). */
.tarjeta, .tarjeta .tarjeta-nombre, .tarjeta .banco, .monograma, .boleto, .ida { color: var(--tinta); }
.lista-bancos .cuantos { color: var(--claro); }
.comida-rol { font-size: 12px; }

/* ---------- escritorio: lo que salió de la prueba de uso del 02-10-2026 ---------- */
@media (min-width: 900px) {
  /* En app.css la regla base de .leyenda va después de su ajuste de escritorio y le ganaba: quedaba bajo la lista. */
  .leyenda { left: 440px; flex-wrap: wrap; overflow: visible; row-gap: 6px; }
}
/* Entre 900 y 1079 px no caben las seis pestañas con texto: quedan solo con ícono y el botón de bancos conserva su nombre. */
@media (min-width: 900px) and (max-width: 1079.98px) {
  .tab span:not(.globo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab { padding: 0 2px; }
  .barra { padding-right: 400px; }
}
@media (min-width: 900px) and (max-width: 1240px) {
  .btn-bancos-txt { display: inline; text-transform: capitalize; }
  .btn-bancos-txt .solo-ancho { display: none; }
}
/* Sin mapa no hay crédito de mapa. */
.sin-mapa .mapa-credito { display: none; }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }

/* Varios locales en un mismo punto del mapa */
.punto-lista { list-style: none; margin: 0; padding: 0 4px 12px; display: grid; gap: 8px; }
.punto-btn { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left;
  background: #fff; color: var(--tinta); border: var(--borde); border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.punto-btn span { flex: 1; }
.punto-btn strong { font-family: var(--f-titulo); font-size: 1.25rem; color: var(--laser, #CF2F20); }

/* ---------- celular: lo que salió de la prueba de uso del 02-10-2026 ---------- */
.cargando { margin: 28vh auto 0; text-align: center; font-family: var(--f-arcade); font-size: 12px; color: var(--ooze); }
/* La hoja se baja con transform y la lista conserva su alto: sin este relleno, el final quedaba bajo la pantalla. */
.lista { padding-bottom: calc(24px + var(--hoja-y, 0px)); }
.lista.lista-plana { padding-bottom: 0; }
@media (min-width: 900px) { .lista { padding-bottom: 24px; } }
/* La línea de cocina y comuna era un span en línea: la elipsis no regía y se montaba sobre el porcentaje. */
.tarjeta-meta { display: block; }
.tarjeta-bancos { min-width: 0; }
.tarjeta .banco { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 374px) {
  .tarjeta { grid-template-columns: 64px 1fr auto; gap: 8px; padding: 8px; }
  .tarjeta-foto, .tarjeta .monograma { width: 64px; height: 64px; }
  .tarjeta .pct { font-size: 1.5rem; }
}
/* Cabecera: la marca cede antes de que el botón de bancos se salga de la pantalla. */
.marca { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.marca-cara { flex: none; }
.marca-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 339px) { .marca-txt { display: none; } }
/* El aviso usaba media pantalla de ancho y salía alto y angosto. */
.aviso-toast { left: 14px; right: 14px; transform: none; width: fit-content; max-width: calc(100% - 28px); margin-inline: auto; }
dialog .aviso-toast { position: fixed; }
/* El mensaje de «sin mapa» va arriba, donde la hoja no lo tapa. */
.mapa-sin { place-items: start center; padding-top: 104px; }
.img-rota { visibility: hidden; }
.quitar-banco { min-height: 0; padding: 6px 0; margin-left: 6px; font-size: inherit; }
/* Pantallas bajas: menos cabecera en la hoja para que quepa al menos una tarjeta. */
@media (max-height: 700px) and (max-width: 899px) { .hoja-sub:not(:has(.quitar-banco)) { display: none; } .hoja-titulo { font-size: 1.1rem; } }
/* Celular en horizontal: la hoja entera hace scroll, o la lista no se ve nunca. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
  .hoja { overflow-y: auto; }
  .hoja .lista { flex: none; overflow: visible; }
  .hoja-cab { touch-action: pan-y; }
}
/* Objetivos táctiles que importan: la verificación del descuento, el reclamo, las fuentes y los controles del mapa. */
.aviso-banco a, .reportar, .costo .aprox a { display: inline-block; padding-block: 12px; }
.maplibregl-ctrl-group button { width: 44px; height: 44px; }
.ley, .hoja .chip, .ficha-cocinas .chip { min-height: 44px; }
.boleto summary { min-height: 44px; display: flex; align-items: center; }
.mapa-credito a { display: inline-block; padding-block: 6px; }
@media (max-width: 899px) { .mapa-credito { top: calc(var(--alto-barra) + var(--alto-dias) + var(--cano-alto) + 60px); } }

/* ---------- accesibilidad: revisión del 02-10-2026 ---------- */
/* El foco es ooze sobre el muro y tinta sobre el papel (ooze sobre papel daba 1,31:1). */
:is(.hoja, .ficha, .dlg, .puesto-detalle, .ida, .dupla, .metodo, .texto-largo, .tarjeta, .boleto) :focus-visible,
:is(.hoja .tarjeta, .ida, .punto-btn):focus-visible { outline-color: var(--tinta); }
.puesto > summary:focus-visible { outline-offset: -5px; }            /* .puesto recorta lo que sale */
.calcu .campo:focus-within, .calcu input:focus-visible { box-shadow: 0 0 0 3px var(--tinta); }
.maplibregl-canvas:focus-visible { outline: 3px solid var(--ooze); outline-offset: -3px; }
/* El agua del guarén hundido se salía de su caja y tapaba el título del estado vacío. */
.vacio .gn-hundido { overflow: hidden; }
.idas h1 { font-size: 1.7rem; font-stretch: 85%; margin-bottom: 6px; color: var(--claro); }
/* La lista deja a la vista lo que recibe el foco. */
.lista { scroll-padding-block: 12px calc(var(--alto-tabs) + 24px); }
.hoja-fila { flex-wrap: wrap; }
/* El punto del banco se ve igual que en el mapa: con borde claro, para que el azul y el burdeo no se pierdan en lo oscuro. */
.ley i, .puesto .punto-banco, .objetivo .punto-banco { border: 2px solid #FFFDF8; box-sizing: content-box; }
/* Lo seleccionado es ooze, como en el resto de la app; el punto conserva el color del banco. */
.ley[aria-pressed="true"] { background: var(--ooze); color: var(--tinta); }
.ley[aria-pressed="true"] small { color: var(--tinta); }

/* El juego se pausa desde el marcador (WCAG 2.2.2). No se usa animation-play-state: congelaría los diálogos a medio abrir. */
button.marcador { font-family: var(--f-arcade); font-size: 11px; line-height: 1; min-height: 44px; cursor: pointer; touch-action: manipulation; }
.marcador[aria-pressed="true"] { color: var(--claro-suave); border-style: dashed; }
:root[data-juego="pausa"] :is(.gc *, .corredor, .clavadista, .salpicon, .salpicon i, .gota-cano, .tunel i, .agua-olas .ola-1, .agua-olas .ola-2, .animal *, .gn .an-brazo, .gn .gn-led, .gn-ola, .gn-ola-lenta, .radar .barrido),
:root[data-juego="pausa"] .elige::before { animation: none !important; }
:root[data-juego="pausa"] .corredor { transform: translateX(40px); }
:root[data-juego="pausa"] .corredor.vuelve { transform: translateX(calc(100% + 120px)); }
:root[data-juego="pausa"] .clavadista { opacity: 1; transform: translate(8px, -8px); }
:root[data-juego="pausa"] .clavadista.dos { transform: translate(142px, -8px); }
:root[data-juego="pausa"] .gota-cano { opacity: 0; }
/* Costados: adorno que se puede cazar con el mouse (antes quedaban bajo .vista y solo respondían al teclado). */
@media (min-width: 1240px) {
  .lado { z-index: 23; pointer-events: none; }
  .lado .corredor { pointer-events: auto; }
}

/* Portada en escritorio: el retrato al lado del título, para que las opciones se vean sin bajar. */
@media (min-width: 900px) {
  .inicio .retrato-marco { float: left; width: 47%; margin: 4px 24px 12px 0; }
  .inicio .inicio-titulo { margin-top: 6px; }
  .inicio .franja, .inicio .elige { clear: both; }
}

/* Siete pestañas arriba (se sumó «Quién soy»): el ícono pierde su relleno lateral para que quepan con texto. */
@media (min-width: 900px) {
  .tab .ico { padding: 2px 3px; }
  .tab { gap: 3px; padding: 0 6px; }
  .barra { padding-right: 760px; }
}
@media (min-width: 900px) and (max-width: 1179.98px) {
  .tab span:not(.globo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab { padding: 0 2px; }
  .tab .ico { padding: 2px 8px; }
  .barra { padding-right: 420px; }
}

/* ---------- 02-10-2026 (tarde): opiniones en la ficha, pie de tarjeta y portada sin trajes ---------- */
.inicio-nota-fuente { margin: 6px 0 0; font-size: .92rem; color: var(--claro-suave); }
/* Seis pestañas arriba otra vez (salió «Mis idas», entró «Quién soy»). */
@media (min-width: 1180px) { .barra { padding-right: 680px; } }

/* Bajo cada tarjeta: cómo llegar y la nota de Google. Son enlaces, así que van fuera del botón de la tarjeta. */
.tarjeta-pie { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 2px 4px; }
.pie-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px;
  background: #fff; color: var(--tinta); border: 2px solid var(--tinta); border-radius: 999px;
  font-size: .88rem; font-weight: 700; text-decoration: none; }
.pie-link .ico { width: 17px; height: 17px; }
.pie-link:focus-visible { outline-color: var(--tinta); }
.comida .pie-link:focus-visible, .vision .pie-link:focus-visible { outline-color: var(--ooze); }
.pie-off { background: transparent; border-style: dashed; color: var(--tinta-suave); font-weight: 400; }
.comida .pie-off, .vision .pie-off { color: var(--claro-suave); border-color: var(--verdin); }

/* Opiniones en la ficha */
.opiniones { display: grid; gap: 12px; }
.opiniones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opiniones-lista:empty { display: none; }
.opinion { background: #fff; border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 12px; }
.opinion-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.opinion-quesos svg { width: 20px; height: 20px; vertical-align: middle; }
.opinion-dia { font-size: .82rem; color: var(--tinta-suave); }
.opinion-texto { margin: 6px 0 0; overflow-wrap: anywhere; }
.opinion-pie { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; font-size: .82rem; }
.opinion-pie span { border: 1.5px solid var(--tinta-suave); border-radius: 999px; padding: 1px 9px; }
.opinion-pie .op-si { border-color: var(--verde-txt); color: var(--verde-txt); font-weight: 700; }
.opinion-pie .op-no { border-color: #B3261E; color: #B3261E; font-weight: 700; }
.opiniones > .btn { justify-self: start; }
.voto-texto { width: 100%; min-height: 84px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--tinta);
  background: #fff; border: var(--borde); border-radius: 12px; resize: vertical; }
.voto-texto:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
label.pregunta { display: block; }
.voto-ayuda { margin: 6px 0 0; font-size: .85rem; color: var(--tinta-suave); }
.opinion-quesos svg .relleno, .nota-rata svg .relleno { fill: var(--queso); }

/* ---------- Navegando el Mapocho (el juego) ---------- */
.juego:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; background: #0D1B1E; }
.juego-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 8px 12px; }
.juego-titulo { margin: 0; font-size: 1.15rem; font-stretch: 80%; color: var(--claro); }
.juego-hud { display: flex; gap: 12px; margin: 0; font-family: var(--f-arcade); font-size: 11px; color: var(--claro-suave); }
.juego-hud b { font-weight: 400; color: var(--ooze); }
.juego-cancha { position: relative; flex: 1; min-height: 0; }
#juego-lienzo { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -3px; }
.juego-cartel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 32px));
  background: var(--papel); color: var(--tinta); border: var(--borde); border-radius: 18px; box-shadow: 6px 6px 0 #000; padding: 18px; text-align: center; }
.juego-cartel[hidden] { display: none; }
.juego-cartel h2 { margin: 0 0 8px; font-size: 1.6rem; font-stretch: 78%; }
.juego-cartel p { margin: 0 0 10px; }
.juego-como { font-size: .9rem; color: var(--tinta-suave); }
.juego-cartel .btn { width: 100%; }
.juego-cartel :focus-visible { outline-color: var(--tinta); }
.juego-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 12px 10px; }
.juego-botones .btn { min-height: 52px; font-size: 1.4rem; }
/* Con mouse y teclado sobran los botones; con el dedo sobra la ayuda de teclado. */
.solo-tactil { display: none; }
@media (hover: none), (pointer: coarse) { .solo-tactil { display: inline; } .solo-teclado { display: none; } }
@media (hover: hover) and (pointer: fine) { .juego-botones { display: none; } }
.tab-largo { display: none; }
@media (min-width: 1400px) { .tab-largo { display: inline; } .barra { padding-right: 880px; } }
@media (min-width: 1180px) and (max-width: 1399.98px) { .barra { padding-right: 770px; } }
body[data-vista="juego"] .lado { display: none; }
/* Seis pestañas abajo en celular (se sumó el juego). */
@media (max-width: 899.98px) {
  .tabs { grid-template-columns: repeat(6, 1fr); }
  .tab { font-size: .7rem; }
  .tab .ico { padding: 2px 7px; }
}
#juego-lienzo:focus { outline: none; }
.hoja-sub:has(button) { white-space: normal; overflow: visible; }

/* ---------- 02-10-2026 (noche): American Express de Santander, Índice simple ---------- */
.alerta-amex { margin: 10px 0 4px; padding: 10px; background: #FFF4D1; border: 2px solid var(--tinta); border-radius: 12px; color: var(--tinta); }
.alerta-amex img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--papel); }
.alerta-amex p { margin: 8px 0 0; font-size: .92rem; }
.alerta-amex .foto-credito { margin-top: 4px; font-size: .75rem; color: var(--tinta-suave); }
.mostrar-amex { display: block; width: 100%; max-width: 360px; height: auto; margin: 8px auto 0; border-radius: 8px; }

.veredicto { margin: 18px 0 8px; padding: 18px; background: var(--papel); color: var(--tinta); border: var(--borde); border-left: 10px solid var(--cb); border-radius: 18px; box-shadow: 6px 6px 0 #000; }
.veredicto-antes { margin: 0; font-weight: 700; color: var(--tinta-suave); }
.veredicto h2 { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: clamp(1.9rem, 7vw, 2.6rem); font-stretch: 78%; line-height: 1; }
.veredicto h2 .punto-banco { width: 18px; height: 18px; }
.veredicto-datos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 1.05rem; }
.veredicto-datos strong { font-family: var(--f-titulo); font-size: 1.35em; color: var(--laser, #CF2F20); }
.veredicto-tarjeta, .veredicto-otra { margin: 8px 0 0; }
.veredicto-otra { padding-top: 8px; border-top: 2px dashed rgba(46, 42, 68, .25); }
.veredicto-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.veredicto :focus-visible { outline-color: var(--tinta); }
.indice-nota { margin: -4px 2px 10px; color: var(--claro-suave); font-size: .92rem; }
.puesto-plata { margin-left: auto; text-align: right; font-family: var(--f-titulo); font-weight: 800; font-size: 1.3rem; color: var(--ooze); white-space: nowrap; }
.puesto-plata small { display: block; font-family: var(--f-texto); font-weight: 700; font-size: .72rem; color: var(--claro-suave); }
.puesto-explica { margin: 0 0 8px; }

/* ---------- Reseñas ---------- */
.resenas { background: transparent; color: var(--claro); }
.resenas-dentro { max-width: 780px; margin: 0 auto; padding: 14px 14px 40px; position: relative; }
.resena { margin: 18px 0; background: var(--papel); color: var(--tinta); border: var(--borde); border-radius: 18px; box-shadow: 6px 6px 0 #000; overflow: hidden; }
.resena-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--borde); }
@media (min-width: 700px) { .resena-foto { aspect-ratio: 16 / 7; } }
.resena-cuerpo { padding: 16px 18px 18px; }
.resena-lugar { margin: 0; font-weight: 700; color: var(--tinta-suave); }
.resena h2 { margin: 2px 0 6px; font-size: clamp(1.6rem, 6vw, 2.2rem); font-stretch: 80%; line-height: 1.05; }
.resena-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--tinta-suave); font-size: .92rem; }
.resena-meta svg { width: 22px; height: 22px; vertical-align: middle; }
.resena-meta svg .relleno { fill: var(--queso); }
.resena-cuerpo > p { max-width: 65ch; }
.resena-pedi { margin: 6px 0 0; }
.resena-acciones { margin: 14px 0 0; }
.resena-patrocinio { margin: 0; padding: 8px 18px; background: var(--queso); color: var(--tinta); font-weight: 800; border-bottom: var(--borde); }
.resena :focus-visible { outline-color: var(--tinta); }
.resena-contacto { margin: 24px 0 8px; padding: 18px; background: #050B0C; border: 2px dashed var(--ooze); border-radius: 18px; }
.resena-contacto h2 { margin: 0 0 6px; font-size: 1.4rem; font-stretch: 85%; color: var(--claro); }
.resena-contacto p { color: var(--claro-suave); }
.resena-contacto a { color: var(--ooze); font-weight: 700; }
/* Seis pestañas abajo en celular (Inicio, Mapa, Tipo de comida, Cerca, Reseñas, Mapocho): el Índice salió el 03-10-2026. */
@media (max-width: 899.98px) {
  .tabs { grid-template-columns: repeat(6, 1fr); }
  .tab > span:not(.globo) { white-space: normal; line-height: 1.05; text-align: center; }
  .tab { font-size: .66rem; letter-spacing: -.01em; }
  .tab .ico { padding: 2px 5px; width: 24px; height: 24px; }
}
@media (max-width: 359.98px) { .tab { font-size: .6rem; } .tab .ico { padding: 2px 3px; } }

/* ---------- barra de arriba: el espacio para las pestañas lo mide la página (--ancho-tabs), no un número fijo ---------- */
@media (min-width: 900px) and (max-width: 1299.98px) {
  .tab span:not(.globo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab { padding: 0 2px; }
  .tab .ico { padding: 2px 8px; }
}
.tab-largo { display: none; }
@media (min-width: 1560px) { .tab-largo { display: inline; } }
@media (min-width: 900px) { .barra { padding-right: calc(var(--ancho-tabs, 760px) + 24px); } }

/* ---------- revisión en celular, tablet y computador (02-10-2026, noche) ----------
   Salió de una pasada con Playwright en 12 tamaños (de 320×568 a 1920×1080) y las reglas de la
   skill de UX: objetivos de 44 px, sin scroll de lado, nada tapado, letra de al menos 11 px. */
/* A 320 px el nombre del puesto empujaba la fila 2 px fuera de la pantalla. */
.puesto > summary { grid-template-columns: 44px minmax(0, 1fr) auto; }
.puesto-nombre { overflow-wrap: anywhere; }
/* El tope del descuento es información, no adorno. */
.pct small, .puesto-plata small { font-size: .78rem; }
/* Objetivos táctiles de 44 px (antes 40): chips de días y del Índice, «Ver mapa», enlaces bajo cada tarjeta, notas. */
.dias .chip, .dias-linea .chip, .ajuste .chip, .dlg .chip, .pastilla, .pie-link, .nota { min-height: 44px; }
.ajuste .chip { min-width: 44px; }
/* Pestañas de abajo: 11 px de letra desde 360 px de ancho (iOS usa 10 pt en su barra). */
@media (min-width: 360px) and (max-width: 899.98px) { .tab { font-size: .6875rem; letter-spacing: -.015em; } }
/* El cartel del juego nunca más alto que la cancha (a 320×568 tapaba el marcador). */
.juego-cartel { max-height: calc(100% - 16px); overflow-y: auto; }
/* Escritorio y tablet horizontal: la caja de la leyenda tapaba el + y el − del mapa y los pines bajo ella. */
@media (min-width: 900px) {
  .leyenda { right: 64px; pointer-events: none; }
  .leyenda > * { pointer-events: auto; }
}
/* Celular en horizontal: la hoja tapaba el mapa entero (quedaban 8 px). Pasa a columna, como en escritorio. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
  .hoja { top: calc(var(--alto-barra) + var(--alto-dias) + var(--cano-alto)); bottom: calc(var(--alto-tabs) + var(--seguro-abajo) + var(--cano-alto));
    left: 0; right: auto; width: min(380px, 46vw); height: auto; transform: none !important;
    border-top: 0; border-right: var(--borde); border-radius: 0; box-shadow: none; }
  .agarre, .pastilla, .hoja-sub { display: none; }
  .mapa, .leyenda { left: min(380px, 46vw); }
  .lista-bancos { grid-template-columns: 1fr 1fr; }
  /* El juego: cancha a la izquierda; marcador y botones en una columna a la derecha (la cancha pasa de 140 a ~250 px de alto). */
  .juego:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 112px; grid-template-rows: auto minmax(0, 1fr); }
  .juego-cab { grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; padding: 8px 6px; }
  .juego-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .juego-hud { flex-direction: column; gap: 6px; }
  .juego-cancha { grid-column: 1; grid-row: 1 / -1; }
  .juego-botones { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; align-content: end; padding: 6px; }
  .juego-botones .btn { min-height: 48px; }
}

/* ---------- el top 10 del Mapocho (02-10-2026) ----------
   Al perder, el cartel muestra la tabla de récords de todos como pantalla de arcade: fondo de
   marcador, letra Arcade (sin tildes: la fuente no las tiene), verde tóxico y tu fila en queso. */
.juego-cartel.con-records .juego-como { display: none; }
.juego-records { margin: 0 0 12px; text-align: left; }
.juego-records[hidden] { display: none; }
.records-tit { margin: 12px 0 6px; font: 12px/1.4 var(--f-arcade); text-align: center; color: var(--tinta); letter-spacing: .04em; }
.records-nota { margin: 6px 0; font-size: .92rem; color: var(--tinta-suave); text-align: center; }
.records { list-style: none; margin: 0; padding: 8px 10px; background: var(--fondo-alto); border: 3px solid var(--tinta); border-radius: 12px; }
.records li { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px;
  font: 12px/1.6 var(--f-arcade); color: var(--claro); }
.records .r-pos { color: var(--claro-suave); }
.records .r-nom { color: var(--ooze); letter-spacing: .12em; }
.records .r-pts { color: var(--queso); font-variant-numeric: tabular-nums; }
.records li.yo { background: var(--queso); }
.records li.yo span { color: var(--tinta); }
/* Las iniciales: tres casillas grandes con ▲ y ▼, como en las máquinas. */
.iniciales { margin: 4px 0 6px; padding: 10px; background: var(--fondo-alto); border: 3px solid var(--tinta); border-radius: 12px; text-align: center; color: var(--claro); }
.iniciales:focus-visible { outline: 3px solid var(--ooze); outline-offset: 2px; }
.ini-tit { margin: 2px 0 4px; font: 12px/1.5 var(--f-arcade); color: var(--queso); }
.ini-ayuda { margin: 0 0 8px; font-size: .85rem; color: var(--claro-suave); }
.ini-slots { display: flex; justify-content: center; gap: 10px; margin: 0 0 10px; }
.ini-slot { display: grid; gap: 4px; justify-items: center; }
.ini-flecha { min-width: 48px; min-height: 44px; padding: 0; font-size: 1rem; line-height: 1; color: var(--tinta); background: var(--papel);
  border: 2px solid #000; border-radius: 10px; cursor: pointer; }
.ini-letra { width: 48px; height: 56px; padding: 0; font: 26px/1 var(--f-arcade); color: var(--ooze); background: #050B0C;
  border: 2px solid var(--verdin); border-radius: 10px; cursor: pointer; }
.ini-letra.activa { border-color: var(--queso); box-shadow: 0 0 0 2px var(--queso); }
.iniciales :focus-visible { outline: 3px solid var(--ooze); outline-offset: 2px; }
.ini-guardar { width: 100%; }
.ini-error { margin: 6px 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 700; color: #FF8D7E; }

/* ---------- Reseñas como carta de restorán (03-10-2026) ----------
   La pestaña es una carta impresa: un renglón por lugar, con puntitos hasta los quesos, como el
   precio en un menú. Al tocar uno, la reseña completa se abre encima (#dlg-resena). */
/* «carta-resenas» y no «carta»: .carta ya es la lista «De la carta» de la ficha (app.css). */
.carta-resenas { margin: 18px 0; padding: 22px 18px 14px; background: var(--papel); color: var(--tinta);
  border: var(--borde); border-radius: 18px; box-shadow: 6px 6px 0 #000; outline: 2px dashed #CDBF9F; outline-offset: -10px; }
.carta-sobre { margin: 0; text-align: center; font-family: var(--f-titulo); font-style: italic; color: var(--tinta-suave); }
.carta-tit { margin: 0 0 12px; text-align: center; font-size: clamp(2.2rem, 9vw, 3.2rem); font-stretch: 75%; line-height: 1; }
.carta-tit::after { content: ""; display: block; width: 72px; margin: 10px auto 0; border-top: 3px solid var(--tinta); }
.carta-lista { list-style: none; margin: 0; padding: 0; }
.carta-lista li + li { border-top: 2px dashed #CDBF9F; }
.carta-item { display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 14px 10px; margin: 0; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-radius: 12px; cursor: pointer; }
.carta-item:hover { background: var(--manteca); }
.carta-item:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.carta-fila { display: flex; align-items: baseline; gap: 8px; }
.carta-nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 1.45rem; font-stretch: 82%; line-height: 1.1; }
.carta-puntos { flex: 1; min-width: 24px; border-bottom: 3px dotted var(--tinta-suave); transform: translateY(-5px); }
.carta-fila .opinion-quesos { white-space: nowrap; }
.carta-fila .opinion-quesos svg { width: 20px; height: 20px; vertical-align: -3px; }
.carta-titulo { font-style: italic; font-weight: 700; }
.carta-desc { color: var(--tinta-suave); max-width: 60ch; }
.carta-meta { font-size: .85rem; color: var(--tinta-suave); }
.carta-leer { margin-top: 2px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.carta-vacia { text-align: center; color: var(--tinta-suave); }

/* La reseña emergente */
.dlg-resena { width: min(680px, 100%); }
.dlg-resena .dlg-cab { border-bottom: 2px dashed #CDBF9F; }
.dlg-resena .resena-lugar { flex: 1; margin: 0; font-weight: 700; color: var(--tinta-suave); }
.dlg-resena .dlg-cuerpo { padding: 14px 18px calc(22px + var(--seguro-abajo)); outline: none; }
.resena-fotos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px 14px; padding: 0 18px 6px; overscroll-behavior-x: contain; }
.resena-fotos:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
.resena-fotos figure { flex: 0 0 min(78%, 300px); margin: 0; scroll-snap-align: start; }
.resena-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: var(--borde); border-radius: 14px; }
.resena-fotos figcaption { margin-top: 4px; font-size: .8rem; color: var(--tinta-suave); }
.resena-tit { margin: 0 0 6px; font-size: clamp(1.7rem, 6vw, 2.3rem); font-stretch: 78%; line-height: 1.05; }
.dlg-resena .resena-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--tinta-suave); font-size: .92rem; }
.dlg-resena .resena-meta svg { width: 22px; height: 22px; vertical-align: middle; }
.resena-texto p { margin: 0 0 12px; max-width: 65ch; }
.resena-sub { margin: 18px 0 8px; font-size: 1.2rem; font-stretch: 85%; }
.pedi-carta { list-style: none; margin: 0; padding: 12px 14px; background: #FFFBEF; border: 2px solid var(--tinta); border-radius: 12px; display: grid; gap: 10px; }
.pedi-nombre { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.15rem; font-stretch: 85%; }
.pedi-que { display: block; font-size: .92rem; color: var(--tinta-suave); }
.resena-ideal { margin: 14px 0 0; }
.dlg-resena .resena-acciones { margin: 16px 0 0; }
.dlg-resena .resena-patrocinio { margin: -14px -18px 14px; }
.dlg-resena :focus-visible { outline-color: var(--tinta); }

/* ---------- Apps de delivery y descuentos online: cómo funciona y el cupón a la vista (03-10-2026) ---------- */
.como-funciona { padding: 14px 16px; background: var(--manteca); border: var(--borde); border-radius: 14px; }
.como-funciona h3 { margin-top: 0; }
.como-funciona ol { margin: 8px 0 10px; padding-left: 1.3em; display: grid; gap: 6px; }
.como-funciona p:last-child { margin-bottom: 0; }
.cupones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.cupones-tit { font-weight: 800; }
.cupon { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; background: #fff; border: 2px dashed var(--tinta); border-radius: 10px; }
.cupon code { font: 700 1rem/1 var(--f-texto); letter-spacing: .06em; }
.cupon .btn-chico { min-height: 44px; padding: 6px 12px; }
.cupon small { font-size: .8rem; color: var(--tinta-suave); }

/* ---------- Compartir una ficha (03-10-2026) ---------- */
.compartir-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.compartir-btns .btn { min-height: 44px; }
.btn-red { font-weight: 800; }
/* Desde el 03-10-2026, por lo que investigaron los agentes: en Chile se recomienda dónde comer por
   WhatsApp, así que ese botón va primero, a todo el ancho y con su verde. La historia de Instagram va
   segunda (sirve para la marca más que para traer visitas) y el resto en una fila chica. */
.compartir-cta { margin: 0 0 10px; font: 800 1.15rem/1.25 var(--f-titulo); font-stretch: 86%; color: var(--tinta); }
.compartir-btns .btn-wsp, .compartir-btns .btn-historia { flex: 1 1 100%; min-height: 54px; font-size: 1.05rem; font-weight: 800; }
.btn-wsp { background: #25D366; color: var(--tinta); }
.btn-historia { background: #C13584; color: #fff; }
.compartir-btns .ico { width: 22px; height: 22px; }
/* El resto en una grilla pareja: de a dos en el celular (Facebook y Telegram, Copiar link y Más), en una
   fila donde hay ancho. La ficha es angosta también en el computador, así que los dos grandes van apilados. */
.compartir-otras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 100%; }
.compartir-otras .btn { min-height: 44px; padding: 8px 10px; font-size: .95rem; }
.compartir-otras .ico { width: 18px; height: 18px; }
@media (min-width: 520px) { .compartir-otras { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }

/* El nombre del top 10 se escribe en un campo de verdad (03-10-2026): así el celular muestra su teclado.
   18 px de letra: con menos, Safari de iPhone acerca la página al tocarlo. */
.ini-nombre { display: block; width: 100%; min-height: 52px; margin: 6px 0 10px; padding: 10px 12px; font: 18px/1.2 var(--f-arcade);
  letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--ooze); background: #050B0C;
  border: 3px solid var(--queso); border-radius: 12px; caret-color: var(--queso); }
.ini-nombre::placeholder { color: #5E7F75; }
.ini-nombre:focus-visible { outline: 3px solid var(--ooze); outline-offset: 2px; }
.iniciales .ini-ayuda { display: block; }
.records .r-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------- un movimiento propio para cada guarén (03-10-2026, segunda versión) ----------
   Benjamín: «se ve muy robótico que todos hagan lo mismo». La primera versión movía el brazo con
   ritmos distintos y se leía igual en todos. Ahora el brazo queda quieto y cada traje se mueve con
   el cuerpo entero, de una forma que se reconoce de lejos. La clase anim-<id> la pone app.js al
   dibujarlos (comida, portada); en la escena de la portada va por d1…d5. Solo transform; se apaga
   con «menos movimiento» y con la pausa del marcador (.animal * en la regla de pausa). */
.gn :is(.an-cuerpo, .an-brazo, .an-cola, .an-oreja-i, .an-oreja-d) { transform-box: fill-box; }
.gn .an-cuerpo { transform-origin: 50% 100%; }
.gn .an-cola { transform-origin: 0% 0%; }
.gn .an-oreja-i { transform-origin: 80% 100%; }
.gn .an-oreja-d { transform-origin: 20% 100%; }
.gn[class*="anim-"] .an-brazo, .gn-retrato .an-brazo { animation: none; }

/* Tipo de comida: un movimiento por traje */
.gn.anim-sushi .an-cuerpo { animation: gn-reverencia 3.2s ease-in-out infinite; }          /* reverencia */
.gn.anim-peruana .an-cuerpo { animation: gn-marinera 2.4s ease-in-out infinite; }          /* marinera de lado a lado */
.gn.anim-italiana .an-cuerpo { animation: gn-vuelta 4s ease-in-out infinite; }             /* da una vuelta, como la masa */
.gn.anim-parrilla .an-cuerpo { animation: gn-calor 2.6s linear infinite; }                 /* tiembla de calor */
.gn.anim-hamburguesas .an-cuerpo { animation: gn-salto 1.3s cubic-bezier(.3, 0, .3, 1) infinite; }  /* salta, se aplasta al caer */
.gn.anim-chilena .an-cuerpo { animation: gn-zapateo 1.1s ease-in-out infinite; }           /* zapatea la cueca */
.gn.anim-mexicana .an-cuerpo { animation: gn-sacudida 1.6s ease-in-out infinite; }         /* se sacude con las maracas */
.gn.anim-asiatica .an-cuerpo { animation: gn-taichi 5s ease-in-out infinite; }             /* tai chi, lento */
.gn.anim-cafe .an-cuerpo { animation: gn-cabeceo 4.2s ease-in-out infinite; }              /* cabecea de sueño y despierta */
.gn.anim-bar .an-cuerpo { animation: gn-tambaleo 3s ease-in-out infinite; }                /* se tambalea */
.gn.anim-mariscos .an-cuerpo { animation: gn-bote 3.4s ease-in-out infinite; }             /* se mece como en un bote */
.gn.anim-veg .an-cuerpo { animation: gn-flotar 4s ease-in-out infinite; }                  /* flota respirando */
.gn.anim-otros .an-cuerpo { animation: gn-respirar 3.6s ease-in-out infinite; }

/* Portada y la escena de arriba: cada sección con su gesto */
.gn.anim-guareneitor .an-cuerpo, .gn-retrato .d1 .an-cuerpo { animation: gn-radar-cuerpo 4s ease-in-out infinite; }   /* Cerca: escanea */
.gn.anim-guareneitor .gn-led, .gn-retrato .d1 .gn-led { animation: gn-radar 1.4s steps(2, jump-none) infinite; }
.gn.anim-chaucha .an-cuerpo, .gn-retrato .d2 .an-cuerpo { animation: gn-contar 2.2s ease-in-out infinite; }        /* Bancos: cuenta plata */
.gn.anim-cazuela .an-cuerpo, .gn-retrato .d3 .an-cuerpo { animation: gn-revolver 2s linear infinite; }             /* Comida: revuelve la olla */
.gn.anim-guarencito .an-cuerpo, .gn-retrato .d4 .an-cuerpo { animation: gn-mirar 4.4s ease-in-out infinite; }      /* Mapa: mira para los lados */
.gn.anim-quesillo .an-cuerpo, .gn-retrato .d5 .an-cuerpo { animation: gn-probar 3s ease-in-out infinite; }         /* Reseñas: prueba y asiente */
.gn.anim-nadador .an-cuerpo { animation: gn-nadar 2.4s ease-in-out infinite; }                                     /* Mapocho: nada */
.gn-retrato .d2 .an-cuerpo { animation-delay: -.7s; }
.gn-retrato .d3 .an-cuerpo { animation-delay: -1.3s; }
.gn-retrato .d4 .an-cuerpo { animation-delay: -2.1s; }
.gn-retrato .d5 .an-cuerpo { animation-delay: -.4s; }

@keyframes gn-reverencia { 0%, 45%, 100% { transform: rotate(0); } 60%, 75% { transform: rotate(14deg) translateY(4px); } }
@keyframes gn-marinera { 0%, 100% { transform: translateX(-5px) rotate(-5deg); } 50% { transform: translateX(5px) rotate(5deg); } }
@keyframes gn-vuelta { 0%, 55%, 100% { transform: scaleX(1); } 66% { transform: scaleX(-1) translateY(-3px); } 78% { transform: scaleX(1) translateY(0); } }
@keyframes gn-calor { 0%, 60%, 100% { transform: translateX(0); } 63% { transform: translateX(-2px); } 66% { transform: translateX(2px); } 69% { transform: translateX(-2px); } 72% { transform: translateX(2px); } 75% { transform: translateX(-1px); } 78% { transform: translateX(0); } }
@keyframes gn-salto { 0%, 100% { transform: translateY(0) scale(1.06, .92); } 15% { transform: translateY(0) scale(.95, 1.06); } 45% { transform: translateY(-14px) scale(1, 1); } 75% { transform: translateY(0) scale(1.08, .9); } 88% { transform: translateY(0) scale(1); } }
@keyframes gn-zapateo { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-5px) rotate(-6deg); } 40% { transform: translateY(0) rotate(0); } 60% { transform: translateY(-5px) rotate(6deg); } 80% { transform: translateY(0) rotate(0); } }
@keyframes gn-sacudida { 0%, 40%, 100% { transform: rotate(0); } 45%, 55%, 65%, 75% { transform: rotate(-4deg) translateY(-1px); } 50%, 60%, 70%, 80% { transform: rotate(4deg) translateY(0); } }
@keyframes gn-taichi { 0%, 100% { transform: translateX(-6px) rotate(-3deg) scaleY(.98); } 50% { transform: translateX(6px) rotate(3deg) scaleY(1.02); } }
@keyframes gn-cabeceo { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg) translateY(2px); } 60% { transform: rotate(11deg) translateY(3px); } 63% { transform: rotate(-3deg) translateY(-6px); } 70% { transform: rotate(0) translateY(0); } }
@keyframes gn-tambaleo { 0%, 100% { transform: rotate(-6deg) skewX(2deg); } 30% { transform: rotate(5deg) skewX(-2deg); } 55% { transform: rotate(-3deg); } 75% { transform: rotate(7deg) skewX(-3deg); } }
@keyframes gn-bote { 0%, 100% { transform: rotate(-5deg) translateY(0); } 25% { transform: rotate(0) translateY(-4px); } 50% { transform: rotate(5deg) translateY(0); } 75% { transform: rotate(0) translateY(-4px); } }
@keyframes gn-flotar { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.03, .99); } }
@keyframes gn-respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, .985); } }
@keyframes gn-radar-cuerpo { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 45% { transform: rotate(6deg); } 60% { transform: rotate(0); } }
@keyframes gn-radar { 0% { opacity: 1; } 100% { opacity: .3; } }
@keyframes gn-contar { 0%, 40%, 100% { transform: translateY(0); } 48%, 64%, 80% { transform: translateY(-4px); } 56%, 72% { transform: translateY(0); } }
@keyframes gn-revolver { 0% { transform: translate(4px, 0) rotate(2deg); } 25% { transform: translate(0, -3px) rotate(0); } 50% { transform: translate(-4px, 0) rotate(-2deg); } 75% { transform: translate(0, 2px) rotate(0); } 100% { transform: translate(4px, 0) rotate(2deg); } }
@keyframes gn-mirar { 0%, 100% { transform: scaleX(1) rotate(0); } 30%, 45% { transform: scaleX(1) rotate(-5deg); } 55%, 80% { transform: scaleX(-1) rotate(-5deg); } 90% { transform: scaleX(1) rotate(0); } }
@keyframes gn-probar { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 60% { transform: translateY(2px) rotate(6deg) scaleY(.96); } 70% { transform: translateY(0) rotate(-2deg); } 80% { transform: translateY(2px) rotate(6deg) scaleY(.96); } 90% { transform: translateY(0) rotate(0); } }
@keyframes gn-nadar { 0%, 100% { transform: translateX(-6px) rotate(-8deg) translateY(0); } 50% { transform: translateX(6px) rotate(8deg) translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .gn :is(.an-cuerpo, .an-brazo, .an-cola, .an-oreja-i, .an-oreja-d, .gn-led) { animation: none !important; }
}

/* Cuadro «Compartir en Instagram» (03-10-2026): la imagen ya armada y lo que se puede hacer en ese equipo. */
.dlg-insta { width: min(460px, 100%); }
.insta-vista { display: grid; place-items: center; margin: 0 0 12px; min-height: 120px; }
.insta-vista img { width: auto; height: auto; max-width: 100%; max-height: 46dvh; aspect-ratio: 9 / 16; border: var(--borde); border-radius: 14px; box-shadow: 4px 4px 0 var(--tinta); }
#insta-acciones { display: grid; gap: 10px; }
#insta-acciones .btn { width: 100%; min-height: 48px; justify-content: center; }
.insta-paso { margin: 0; font-size: .95rem; }

/* ---------- El juego en la portada: una máquina de arcade a todo el ancho (03-10-2026) ----------
   Antes era la sexta tarjeta y quedaba sola en una fila. Ahora es otra cosa a propósito: letrero
   iluminado, pantalla de tubo con el guarén nadando y el récord, y el botón rojo de las máquinas. */
.arcade { display: block; margin: 16px 0 6px; color: var(--claro); text-decoration: none; background: #170F1D;
  border: var(--borde); border-color: #000; border-radius: 22px 22px 14px 14px; box-shadow: 0 0 0 3px #3A2A4A, 6px 7px 0 3px #000;
  overflow: hidden; touch-action: manipulation; transition: transform var(--t-toque) ease, box-shadow var(--t-toque) ease; }
.arcade:hover, .arcade:focus-visible { box-shadow: 0 0 0 3px var(--ooze), 6px 7px 0 3px #000; outline: none; }
.arcade:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--ooze), 2px 3px 0 3px #000; }
.arcade-marquesina { display: block; padding: 12px 10px 10px; text-align: center; font: 15px/1.3 var(--f-arcade); letter-spacing: .06em;
  color: var(--queso); background: linear-gradient(180deg, #3A1B4E, #22102E); border-bottom: 3px solid #000;
  text-shadow: 0 0 6px rgba(255, 204, 51, .8), 2px 2px 0 #000; }
.arcade-cuerpo { display: grid; gap: 14px; padding: 14px; }
.arcade-pantalla { position: relative; display: block; min-height: 236px; border: 4px solid #000; border-radius: 18px / 26px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1E4A45 0%, #0D2523 65%, #061413 100%); box-shadow: inset 0 0 0 3px #2F6B5C, inset 0 0 30px rgba(0, 0, 0, .7); }
.arcade-pantalla::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px); }
.arcade-hud { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between;
  font: 12px/1 var(--f-arcade); color: var(--ooze); text-shadow: 0 0 4px rgba(155, 233, 49, .7); z-index: 1; }
.arcade-guaren { position: absolute; left: 50%; bottom: 18px; width: 140px; transform: translateX(-50%); }
.arcade-guaren .gn { width: 100%; height: auto; display: block; }
/* El Mapocho: agua café con rayas de corriente, como el río del juego. */
.arcade-agua { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; border-top: 3px solid #000;
  background: linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .2) 10px 32px, transparent 32px) 0 9px / 58px 3px repeat-x,
    linear-gradient(90deg, transparent 0 32px, rgba(255, 255, 255, .13) 32px 48px, transparent 48px) 0 21px / 58px 3px repeat-x,
    linear-gradient(#8A6240, #5E4029); }
.arcade-texto { display: flex; flex-direction: column; gap: 8px; }
.arcade-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.7rem; font-stretch: 80%; line-height: 1.05; color: var(--claro); }
.arcade-frase { color: var(--claro-suave); font-size: .95rem; line-height: 1.4; }
.arcade-insert { font: 12px/1.4 var(--f-arcade); color: var(--queso); animation: arcade-parpadeo 1.6s steps(2, jump-none) infinite; }
@keyframes arcade-parpadeo { 0% { opacity: 1; } 100% { opacity: .25; } }
.arcade-boton { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 160px;
  padding: 10px 26px; font: 16px/1 var(--f-arcade); color: #fff; background: radial-gradient(circle at 40% 35%, #FF6A5C, var(--laser) 60%, #8E1B12);
  border: 3px solid #000; border-radius: 999px; box-shadow: 0 5px 0 #000, inset 0 -4px 0 rgba(0, 0, 0, .25); text-shadow: 2px 2px 0 #000; }
@media (min-width: 640px) {
  .arcade-cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 22px 20px; }
  .arcade-pantalla { min-height: 250px; }
  .arcade-guaren { width: 150px; }
  .arcade-marquesina { font-size: 20px; padding: 14px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .arcade-insert { animation: none; } }
:root[data-juego="pausa"] .arcade-insert { animation: none; }

/* ---------- Ficha del restorán, rediseño (03-10-2026, con las skills de UX y diseño web) ----------
   Lo que decide si vas va arriba y se ve sin bajar: el % como sello sobre la portada, una línea con el
   descuento de hoy (o el próximo) y las acciones con la carta primero. Después, pestañas fijas para saltar
   entre las partes de una ficha que en el celular mide cinco pantallas. */
.portada-ficha { position: relative; }
.sello-pct { position: absolute; right: 0; bottom: 34px; z-index: 2; display: flex; flex-direction: column; align-items: center;
  min-width: 96px; padding: 6px 14px 8px; color: #fff; background: var(--laser); border: 3px solid var(--tinta); border-radius: 14px;
  box-shadow: 4px 5px 0 var(--tinta); transform: rotate(3deg); font: 800 2.6rem/1 var(--f-titulo); font-stretch: 80%; }
.sello-pct small { margin-top: 5px; font: 11px/1.2 var(--f-arcade); letter-spacing: .04em; color: var(--queso); }
.sello-pct.otro-dia { background: var(--tinta); }
.resumen-hoy { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding: 12px 14px; background: var(--manteca);
  border: var(--borde); border-radius: 12px; box-shadow: var(--sombra-chica); }
.resumen-dato { font: 700 1.2rem/1.25 var(--f-titulo); font-stretch: 88%; }
.resumen-dato strong { color: var(--laser); font-weight: 800; }
.resumen-hoy.sin-hoy { background: #fff; }
.resumen-hoy.sin-hoy strong { color: var(--tinta); }
.resumen-letra { font-size: .95rem; color: var(--tinta-suave); }
.enlace-boton { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; border: 0; background: none;
  color: var(--tinta); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acciones-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.acciones-rapidas .btn { min-height: 48px; padding: 8px 10px; font-size: .92rem; }
.accion-carta { background: var(--queso); }
.acciones-rapidas .accion-carta { grid-column: 1 / -1; min-height: 52px; font-size: 1rem; }
.ficha-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; margin: 20px -14px 0; padding: 6px 8px;
  background: var(--papel); border-top: 2px solid var(--tinta); border-bottom: 3px solid var(--tinta); overflow-x: auto; scrollbar-width: none; }
.ficha-tabs::-webkit-scrollbar { display: none; }
.ficha-tabs button { flex: 1 0 auto; min-height: 44px; padding: 6px 6px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 800 .9rem/1 var(--f-titulo); font-stretch: 80%; color: var(--tinta); touch-action: manipulation; }
@media (min-width: 420px) { .ficha-tabs button { padding: 6px 8px; font-size: .98rem; } }
.ficha-tabs button[aria-current="true"] { background: var(--tinta); color: var(--papel); }
.ficha .seccion { scroll-margin-top: 78px; }
.ficha h3[tabindex="-1"]:focus { outline: none; }
.ficha h4.sub { margin: 20px 0 8px; font-size: 1.05rem; font-stretch: 88%; }
.carta-completa { margin: 12px 0 0; }
.carta-completa .btn { width: 100%; }
.ficha .seccion .calcu { margin-top: 18px; }
.horario { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.horario .ico { margin-top: 2px; }
@media (min-width: 900px) {
  .ficha { width: min(720px, 100%); }
  /* En el computador la portada no se come la pantalla: el sello y el resumen quedan a la vista. */
  .portada-ficha { max-width: 500px; margin: 0 auto; }
  .ficha-tabs { margin-left: -14px; margin-right: -14px; }
}

/* ---------- «¿Con qué tarjeta pagas?» en la portada (04-10-2026) ----------
   Lo primero que se ve: la pregunta con cinco bancos a un toque y, al elegir, «Tus descuentos de hoy». */
.inicio-lema { margin: 0 0 14px; font: 700 1.15rem/1.3 var(--f-titulo); font-stretch: 88%; color: var(--claro-suave); }
.bloque-tarjeta { position: relative; z-index: 1; margin: 0 0 22px; padding: 16px 14px 14px; color: var(--tinta); background: var(--papel);
  border: var(--borde); border-color: #000; border-radius: 16px; box-shadow: 6px 7px 0 #000; }
.bloque-tarjeta h2 { margin: 0; font-size: 1.6rem; font-stretch: 82%; line-height: 1.05; }
.bloque-tarjeta.pregunta h2 { font-size: 1.9rem; }
.pt-bajada { margin: 6px 0 12px; color: var(--tinta-suave); }
.pt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Los chips son los del sitio (oscuros; marcado = verde ooze): solo más grandes y con un ✓ al marcar. */
.pt-chip { min-height: 48px; gap: 8px; padding: 8px 12px; font-size: 1rem; font-weight: 800; }
.pt-chip[aria-pressed="true"]::after { content: "✓"; margin-left: 6px; font-weight: 800; }
.pt-saltar { margin: 10px 0 0; text-align: center; }
.pt-lista { margin: 14px 0 0; }
/* En la portada cada descuento va compacto: tocarlo abre la ficha, donde están «Cómo llegar» y la nota. */
.pt-lista .tarjeta-pie { display: none; }
.pt-mas { margin: 12px 0 0; }
.pt-mas .btn { width: 100%; }
.pt-vacio { margin: 12px 0 0; }
@media (min-width: 640px) { .pt-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Al perder en el juego: un descuento de hoy con tu banco. */
.juego-dato { margin: 0 0 12px; padding: 10px; text-align: left; color: var(--tinta); background: var(--papel); border: 3px solid #000; border-radius: 12px; }
.juego-dato[hidden] { display: none; }
.juego-dato-tit { margin: 0 0 6px; font: 800 1.15rem/1.1 var(--f-titulo); font-stretch: 85%; }
.juego-dato p { margin: 0 0 8px; }
.juego-descuento { display: grid; grid-template-columns: 56px 1fr; gap: 4px 10px; align-items: center; width: 100%; padding: 8px; text-align: left;
  color: var(--tinta); background: #fff; border: 2px solid var(--tinta); border-radius: 10px; cursor: pointer; font: inherit; touch-action: manipulation; }
.juego-descuento .juego-dato-foto, .juego-descuento .monograma { grid-row: span 2; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid var(--tinta); }
.juego-dato-txt b { color: var(--laser); font: 800 1.3rem/1 var(--f-titulo); }
.juego-dato-ir { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; font-size: .92rem; }
.juego-dato .btn { width: 100%; }