:root {
  --fondo: #14121f;
  --superficie: #221f33;
  --superficie2: #2d2944;
  --borde: #3d3858;
  /* Cuatro tamaños de letra y dos pesos. Lo que no está acá es una pieza del juego (la palabra secreta, el código, el
     año, la grilla, el teclado) o un dibujo (las caras).
     La letra crece con la del teléfono, hasta el doble (regla de diseño, 5): la base es la que eligió la persona (la del
     navegador, 16 de fábrica; en el iPhone, la de «Tamaño del texto», 17 de fábrica), con tope en 32. De fábrica quedan
     15, 17, 20 y 26, como antes. */
  --base: min(1rem, 32px);
  --chica: calc(var(--base) * 15 / 16); --letra: calc(var(--base) * 17 / 16); --titulo: calc(var(--base) * 20 / 16); --grande: calc(var(--base) * 26 / 16);
  --fuerte: 800;
  --borde-toca: #7a7598; /* el borde de lo que se toca: 3 a 1 o más contra los tres fondos (regla de diseño, 4) */
  --texto: #f5f3ff;
  --suave: #b8b3d1;
  --rosa: #ff4d8d;
  --amarillo: #ffd23f;
  --celeste: #3ee3e3;
  --verde: #5ee38f;
  --radio: 18px;
  color-scheme: dark;
}
/* En el iPhone, la letra de la app sigue a «Tamaño del texto» (Dynamic Type): la raíz toma la letra del sistema. */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
  :root { --base: min(calc(1rem * 16 / 17), 32px); }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body {
  font: var(--letra)/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: var(--fuerte); }
h1, h2 { font-size: var(--grande); }
h3 { font-size: var(--titulo); }
strong, b { font-weight: var(--fuerte); }
p { margin: 0; }
button, input { font: inherit; color: inherit; }

.logo { display: block; width: min(100%, 360px); height: auto; aspect-ratio: 1200 / 620; margin: 8px auto 0; }
.logoChico { display: block; height: 26px; width: auto; aspect-ratio: 1600 / 403; flex: none; }
/* El título de cada juego, con su carpincho chico al lado: la cara (con su gorro, sus anteojos o su patito) en un
   medallón. Es un dibujo quieto: no se toca ni se mueve (regla de diseño, 3). */
.tituloJuego { display: inline-flex; align-items: center; gap: 10px; }
.carpinchoChico { width: var(--tam, 48px); height: var(--tam, 48px); flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--superficie2); border: 2px solid #f2c879; box-sizing: border-box; }
/* El medallón: el carpincho del juego (en Charadas, los dos de sus equipos, encimados) y, en la esquina, la insignia con
   el objeto del juego. No se toca ni se mueve. */
.medallon { position: relative; display: inline-flex; flex: none; padding: 0 6px 4px 0; }
.medallon .carpinchoChico + .carpinchoChico { margin-left: calc(var(--tam) * -0.32); }
.medallon .insignia { position: absolute; right: -2px; bottom: -2px; width: calc(var(--tam) * 0.5); height: calc(var(--tam) * 0.5); }
.tituloEstero.tituloJuego { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0; }
.tituloJuego .insignia.sola { width: 1.15em; height: 1.15em; flex: none; align-self: center; margin-right: 10px; }
.tituloJuego small { margin-left: .25em; }
.lema { text-align: center; color: var(--suave); margin-bottom: 24px; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.centro { text-align: center; }
.suave { color: var(--suave); }
.chico { font-size: var(--letra); } /* era 16: una frase se lee en 17 o más (regla de diseño, 3); queda el color más suave */
.grande { font-size: var(--titulo); font-weight: var(--fuerte); }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.etiqueta { font-size: var(--chica); font-weight: var(--fuerte); letter-spacing: .5px; text-transform: uppercase; color: var(--suave); margin-bottom: 8px; }

.boton {
  display: block; width: 100%; min-height: 56px; border: 0; border-radius: 999px; padding: 16px 24px;
  font-weight: var(--fuerte); font-size: var(--letra); cursor: pointer; background: var(--superficie2); color: var(--texto);
  transition: transform .08s ease;
}
.boton:active { transform: scale(.97); }
/* Tocado y esperando al servidor: se nota al instante y, si tarda, gira (regla de diseño, 6). No toma otro toque. */
.boton.trabaja, .trabaja { position: relative; pointer-events: none; filter: brightness(.82); }
.trabaja::before {
  content: ''; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent; opacity: 0; animation: gira .8s linear .35s infinite, asoma .2s ease .35s both;
}
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes asoma { to { opacity: .9; } }
/* Texto oscuro sobre el rosa: 5,9 a 1 de contraste (el blanco daba 2,6 a 3,1, y el mínimo es 4,5). */
.boton.principal { background: linear-gradient(90deg, var(--rosa), #ff7a59); color: #14121f; box-shadow: 0 6px 24px #ff4d8d55; }
/* El botón principal de la pantalla mide 88 (14 mm, regla de diseño, 4): con 56, a los mayores les fallaba la puntería. */
.boton.principal { min-height: 88px; font-size: var(--titulo); }
/* Y sigue a la vista (regla de diseño, 5): si la pantalla no entra (la letra grande, un celu chico), queda pegado abajo y
   lo demás se baja con el dedo. En una fila de dos o en la hoja de una pregunta, se queda en su lugar. */
.boton.principal { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; }
.dos .boton.principal, .hoja .boton.principal { position: static; }
.dos .boton.principal.trabaja, .hoja .boton.principal.trabaja { position: relative; }
.boton.amarillo { background: var(--amarillo); color: #1b1600; }
.boton.borde { background: transparent; border: 2px solid var(--borde-toca); }
.boton.mini { min-height: 56px; min-width: 56px; width: auto; display: inline-block; font-size: var(--letra); padding: 8px 16px; } /* 56, como todo lo que se toca */
/* Apagado se lee igual (6 a 1): gris plano, sin el color de actuar. Con opacidad, la letra bajaba a 2,3 a 1. Va después
   de los colores (principal, amarillo) para ganarles. */
.boton[disabled] { background: #3a3650; color: #c4bfdc; box-shadow: none; cursor: default; }
.boton.borde[disabled] { background: transparent; color: #a9a4c4; border-color: var(--borde); }

input.campo {
  width: 100%; min-height: 56px; border-radius: 14px; border: 2px solid var(--borde-toca); background: var(--superficie2);
  padding: 12px 16px; font-size: var(--titulo); outline: none;
}
input.campo:focus { border-color: var(--rosa); }
input.codigo { text-align: center; letter-spacing: 12px; font-size: 32px; font-weight: var(--fuerte); text-transform: uppercase; }

/* Las caras: una fila que se desliza con el dedo, cada una de 56 y a 8 de la otra (eran 16 botones de 36, a 5). La
   sexta asoma cortada: se ve que hay más. La elegida lleva borde amarillo y una tilde: no depende sólo del color. */
.emojis { display: flex; gap: 8px; overflow-x: auto; padding: 8px 8px 8px 4px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* el aire de arriba es para la tilde */
.emojis::-webkit-scrollbar { display: none; }
.emojis button { position: relative; flex: 0 0 56px; width: 56px; height: 56px; font-size: 28px; border-radius: 14px; border: 2px solid var(--borde-toca); background: var(--superficie2); cursor: pointer; padding: 0; scroll-snap-align: start; }
.emojis button[aria-pressed='true'] { border-color: var(--amarillo); background: #3a3350; }
.emojis button.tomada { opacity: .25; filter: grayscale(1); cursor: not-allowed; }
/* La tilde de lo elegido (una cara, a quién votás): arriba a la derecha, sobre el borde. */
.emojis button[aria-pressed='true']::after, button.persona[aria-pressed='true']::after {
  content: '✓'; position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: #1b1600; font-size: var(--chica); font-weight: var(--fuerte); line-height: 1;
}

.barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } /* si no entra (un celu de 320), baja de renglón en vez de cortarse */
.barra .fila { flex-wrap: nowrap; gap: 8px; flex: none; }
.barra .boton.mini { padding: 8px 8px; }
.codigoSala { font-weight: var(--fuerte); letter-spacing: 3px; background: var(--superficie2); border-radius: 10px; padding: 4px 8px; font-size: var(--letra); }
/* «Salir» y «Música» llevan siempre su palabra (regla de diseño, 2: ningún dibujo solo). Si no entran en un renglón, la
   barra baja al segundo. */
.sinPalabra { display: none; }
/* La llave de la música: en las pantallas donde suena, va en el lugar del logo de la barra. Prendida, con borde celeste
   y relleno; apagada, con el parlante tachado: no depende sólo del color. */
.boton.llave { flex: none; white-space: nowrap; }
.boton.llave[aria-pressed='true'] { border-color: var(--celeste); background: #173c44; }
@media (max-width: 389px) { .barra .boton.llave { font-size: var(--chica); } .barra .logoChico { height: 22px; } } /* en un celu de 360, la barra de la juntada queda justa (y con un código de letras anchas, no entraba) */
/* Un celu angosto, o uno con la pantalla ampliada (un iPhone con «Texto más grande» mide 320 de ancho): las barras y la
   fila de ayudas del crucigrama no entraban, y toda la pantalla se achicaba o se cortaba a la derecha (visto el 07/10
   con el motor de Safari). Más arriba de 351 no cambia nada. */
@media (max-width: 369px) { .codigoSala { letter-spacing: 2px; font-size: var(--chica); } .barra .reloj { font-size: var(--letra); } }
@media (max-width: 351px) { .barra .logoChico { display: none; } } /* un celu de 320: sin el logo chico */

.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(96px, 4.5em), 1fr)); gap: 8px; }
.persona { background: var(--superficie2); border-radius: 14px; padding: 8px 8px; text-align: center; position: relative; border: 2px solid transparent; }
.persona .cara { font-size: 34px; line-height: 1.1; }
.persona .nombre { font-weight: var(--fuerte); font-size: var(--chica); overflow-wrap: anywhere; } /* un nombre largo baja de renglón: no se corta con «…» */
.persona.fuera { opacity: .4; }
.persona .corona { position: absolute; top: 4px; right: 8px; font-size: var(--chica); }
button.persona { cursor: pointer; color: inherit; font: inherit; width: 100%; border-color: var(--borde-toca); }
/* sin agrandarse: al crecer, quedaba a 6 de la de al lado (van a 8). La elegida lleva la tilde de arriba. */
button.persona[aria-pressed='true'] { border-color: var(--amarillo); background: #3a3350; }
.persona .puntos { font-size: var(--chica); color: var(--amarillo); font-weight: var(--fuerte); }

.qr { background: #fff; border-radius: 16px; padding: 12px; width: 200px; height: 200px; margin: 0 auto; display: block; }
.qr.chico { width: 150px; height: 150px; }

/* Cada juego del menú: su medallón (el carpincho y la insignia del juego) al lado del nombre, y las opciones y el
   botón a todo el ancho de la tarjeta (con los botones de 56 de alto, en la columna angosta cada opción ocupaba un
   renglón y el menú se alargaba). */
.juego { display: grid; grid-template-columns: minmax(56px, auto) 1fr; gap: 8px 12px; align-items: start; }
.juego .icono { font-size: 44px; line-height: 1; grid-row: span 2; }
.juego > div:last-child { display: contents; }
.juego > div:last-child > h3, .juego > div:last-child > p { grid-column: 2; }
.juego > div:last-child > :not(h3):not(p) { grid-column: 1 / -1; margin: 0; }
.opciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.opciones button { border: 2px solid var(--borde-toca); background: transparent; color: var(--texto); border-radius: 999px; padding: 8px 16px; font-weight: var(--fuerte); min-height: 56px; cursor: pointer; }
.opciones button[aria-pressed='true'] { border-color: var(--celeste); background: #173c44; }
.opciones button[aria-pressed='true']::before { content: '✓ '; } /* la elegida, con tilde: no sólo con color (la música ya cambia de dibujo) */
.opciones button[disabled] { color: #a9a4c4; border-color: var(--borde); cursor: default; }
.opciones button:active, .emojis button:active, button.persona:active, .linea button.hueco:active, .diaIr:active, .diaLetra:active { transform: scale(.97); }

/* El secreto se ve sólo mientras se mantiene apretado, y «TE COLASTE» tiene la misma letra y el mismo color que una
   palabra: desde la silla de al lado no se distingue. */
.secreto {
  position: relative; border-radius: 24px; padding: 20px 16px 28px; text-align: center; cursor: pointer; width: 100%; min-height: 230px;
  display: grid; justify-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  background: repeating-linear-gradient(45deg, #2d2944, #2d2944 14px, #29253e 14px, #29253e 28px); color: var(--texto);
  border: 2px solid var(--borde-toca); /* se toca: su borde se distingue del fondo */
}
.secreto .tapa, .secreto .contenido { grid-area: 1 / 1; }
.secreto .tapa { align-self: end; }
.secreto .contenido { align-self: start; }
.secreto .contenido { visibility: hidden; }
.secreto.visible { background: linear-gradient(160deg, #3a1f4d, #1f2a4d); box-shadow: 0 0 0 2px var(--amarillo) inset; }
.secreto.visible .tapa { visibility: hidden; }
.secreto.visible .contenido { visibility: visible; }
.secreto .palabra, .charada .palabra { font-size: 40px; font-weight: var(--fuerte); letter-spacing: -1px; margin: 8px 0; min-height: 56px; display: grid; place-items: center; overflow-wrap: normal; word-break: normal; hyphens: none; color: var(--amarillo); text-transform: uppercase; }
/* Nunca se parte una palabra («RECONCILIACIÓ / N»): se achica la letra. Entran 16 letras en un iPhone SE. */
.secreto .palabra.larga, .charada .palabra.larga { font-size: 32px; }
.secreto .palabra.muyLarga, .charada .palabra.muyLarga { font-size: 27px; }
.secreto .palabra.larguisima, .charada .palabra.larguisima { font-size: 23px; letter-spacing: -.5px; }
/* ——— La dirección C, «CarpinGo! ilustrado» (elegida por Verónica el 14/10, con la palabra gigante de la B), para
   Charadas y Juntalas: el estero de noche de la carrera, los carpinchos pintados asomados espiando, la palabra y los
   grupos en carteles de madera y las palabras de Juntalas en camalotes. Títulos y palabra en Bitter (licencia OFL,
   web/fuentes/OFL-Bitter.txt). Contrastes medidos (pruebas/diseno/analizar.mjs): crema sobre la madera, 7,4 a 1 en lo más claro; camalote, 7,4 a 1. */
@font-face { font-family: 'Bitter'; font-weight: 800; font-display: swap; src: url('fuentes/bitter-800.woff2') format('woff2'); }
body.estero { background: linear-gradient(180deg, #1c1940 0%, #241e48 46%, #1a2f45 78%, #133a4a 100%) fixed; }
.tituloEstero { font: 800 var(--grande)/1.1 Bitter, Georgia, serif; text-align: center; margin: 0; }
.tituloEstero small { font: 400 var(--chica) system-ui, sans-serif; color: var(--suave); }
/* El carpincho se asoma por arriba del cartel: sus patas apoyan en el borde. No se toca ni se mueve. */
.asomado { display: block; margin: 0 auto -30px; position: relative; z-index: 2; height: auto; pointer-events: none; user-select: none; }
.madera { background: linear-gradient(180deg, #74462a, #5a361d); color: #fff7e6; border: 4px solid var(--c, #f2c879); box-shadow: 0 6px 0 #3e2412, 0 14px 26px #0009; }
body.estero .suave { color: #d6d2ec; } /* sobre el agua del estero, el gris de siempre daba 6 a 1: así, 8 */
.nocturno { background: linear-gradient(180deg, #3a2f5c, #2a2346); color: var(--texto); border: 4px solid var(--c, var(--borde-toca)); box-shadow: 0 6px 0 #17132a, 0 14px 26px #0009; }
/* El pie de Juntalas va pegado abajo de la pantalla: lo que contesta y «Probar», juntos (el botón, adentro, ya no se
   pega solo). */
.pieFijo { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; display: grid; gap: 6px; }
.pieFijo p { justify-self: center; background: #14121fee; border-radius: 999px; padding: 6px 16px; }
.pieFijo .boton.borde.fondo { background: #14121fee; } /* pegado abajo, con fondo: no se le ve el texto de atrás */
/* En el tablero, las 16 van de a cuatro por fila, como en el juego original: así se ven todas sin bajar la pantalla
   (14/10: de a dos, en un celu de 390 × 844 «Probar» tapaba 4, y en un iPhone SE, 10). Donde no entran de a cuatro (un
   celu muy angosto, o la letra del teléfono agrandada), de a dos, y se baja con el dedo. La cuenta es en «em», así sigue
   a la letra del teléfono (pruebas/grupos.mjs mide las palabras de todos los días). */
.tablero .palabrasGrupo { grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); }
@container tablero (min-width: 18em) {
  .tablero .palabrasGrupo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tablero .palabraGrupo { min-height: 56px; padding: 6px 3px; font-size: var(--chica); }
}
.tablero { container: tablero / inline-size; padding: 34px 8px 10px; background: #221f33; border: 3px solid #f2c879; border-radius: 22px; position: relative; z-index: 1; box-shadow: 0 10px 30px #0008; display: flex; flex-direction: column; gap: 10px; }
/* Charadas: el cartel con la palabra. Mide siempre lo mismo, así al cambiar la palabra los botones no se corren bajo el
   dedo. La palabra, gigante (de la dirección B): se lee desde la otra punta de la mesa. */
.charada { border-radius: 20px; padding: 40px 16px 14px; text-align: center; display: grid; align-content: center; justify-items: center; position: relative; z-index: 1; }
.charada .etiqueta { margin-bottom: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; opacity: .9; }
.charada .palabra { font: 800 46px/1.08 Bitter, Georgia, serif; height: 132px; min-height: 0; margin: 4px 0; letter-spacing: -.5px; color: #fff7e6; text-transform: none; text-shadow: 0 2px 0 #4a2c16; display: grid; place-items: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
.charada .palabra.larga { font-size: 38px; }
.charada .palabra.muyLarga { font-size: 32px; }
.charada .palabra.larguisima { font-size: 27px; letter-spacing: 0; }
.charada.nocturno .palabra { text-shadow: 0 2px 0 #17132a; }
.charada.cuenta .palabra { font-size: 56px; height: 64px; margin: 0; }
.charadaFila { justify-content: space-between; flex-wrap: nowrap; }
.charadaFila span { color: var(--verde); font-weight: var(--fuerte); flex: none; }
/* La tabla de los dos equipos, como la transmisión de la regata: cada equipo con su carpincho. */
.tablaEquipos { display: flex; gap: 8px; }
.equipoTv { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #14121fd9; border: 2px solid var(--c); border-radius: 14px; padding: 4px 10px 4px 4px; }
.equipoTv img { width: 46px; height: 52px; object-fit: cover; object-position: top; border-radius: 10px; background: var(--c); flex: none; }
.equipoTv .nombre { font: 800 var(--letra)/1.1 Bitter, Georgia, serif; }
.equipoTv .juegan { display: block; font-size: var(--chica); color: var(--suave); font-weight: 400; }
.equipoTv .pts { margin-left: auto; font: 800 30px/1 Bitter, Georgia, serif; }
.equipoTv.juega { box-shadow: 0 0 0 3px var(--amarillo); } /* el que adivina ahora: además lo dice «juegan» */
.reservaNoVale { min-height: 56px; display: grid; align-items: center; }
/* Cuando el equipo saca una, su pantalla destella su color una vez (dirección B): responde al toque, no es un adorno. */
body.destello::before { content: ''; position: fixed; inset: 0; background: var(--destello, var(--amarillo)); pointer-events: none; z-index: 40; animation: destello .6s ease-out both; }
@keyframes destello { from { opacity: .45; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.destello::before { animation-duration: .01s; } }
/* Juntalas (boceto, 14/10): las 16 palabras, de a dos por fila en el celu (de a cuatro en la tablet; con la letra al
   doble, de a una). La elegida lleva tilde, no sólo color. Los grupos juntados, con los colores de la app. */
.palabrasGrupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); gap: 8px; }
/* Dirección C: las palabras flotan en camalotes (verde de estero) y cada grupo juntado queda en un cartel de madera con
   el borde de su color, del más fácil al de doble sentido: verde, celeste, naranja y rosa. */
/* Se corta sólo donde app.js puso el guion invisible (cortes()), nunca en cualquier letra. */
.palabraGrupo { position: relative; min-height: 56px; border: 2px solid #6fbf8a; background: #2f5a3f; color: #f4fff7; border-radius: 16px; padding: 8px; font-weight: var(--fuerte); font-size: var(--letra); line-height: 1.15; cursor: pointer; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
.palabraGrupo[aria-pressed='true'] { background: var(--amarillo); color: #1b1600; border-color: var(--amarillo); }
/* La tilde va en la esquina, así no le quita lugar a la palabra. */
.palabraGrupo[aria-pressed='true']::before { content: '✓'; position: absolute; top: 1px; left: 6px; font-size: var(--chica); line-height: 1.2; }
.palabraGrupo:active { transform: scale(.97); }
.grupoJunto { border-radius: 12px; padding: 10px 14px 12px; display: grid; gap: 2px; text-align: center; }
.grupoJunto strong { font: 800 var(--titulo)/1.15 Bitter, Georgia, serif; }
.grupoJunto span { font-size: var(--letra); }
.grupoJunto.n1 { --c: var(--verde); }
.grupoJunto.n2 { --c: var(--celeste); }
.grupoJunto.n3 { --c: #ff9f1c; }
.grupoJunto.n4 { --c: var(--rosa); }
.grillaCompartir { text-align: center; font-size: 28px; line-height: 1.2; letter-spacing: 2px; }

.orden { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.orden span { background: var(--superficie2); border-radius: 999px; padding: 4px 12px; font-size: var(--letra); }
.orden span.ahora { background: var(--amarillo); color: #1b1600; font-weight: var(--fuerte); }
.orden span.ya { opacity: .45; }

.turno { font-size: var(--grande); font-weight: var(--fuerte); text-align: center; }
.pregunta { font-size: var(--grande); font-weight: var(--fuerte); line-height: 1.15; text-align: center; }

.revelacion { text-align: center; padding: 20px 8px; }
.revelacion .gigante { font-size: 84px; line-height: 1; animation: saltar .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.revelacion .titulo { font-size: var(--grande); font-weight: var(--fuerte); margin-top: 8px; }
.suspenso { font-size: var(--grande); font-weight: var(--fuerte); text-align: center; padding: 56px 0; animation: latir 0.6s ease-in-out infinite alternate; }

.puntosRonda { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.puntosRonda span { background: #173c2a; color: var(--verde); border-radius: 999px; padding: 4px 12px; font-weight: var(--fuerte); font-size: var(--letra); }

.premio { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; animation: premio .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.premio .icono { font-size: 40px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla td { padding: 8px 4px; border-bottom: 1px solid var(--borde); }
.tabla td:last-child { text-align: right; font-weight: var(--fuerte); color: var(--amarillo); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dos .boton { padding: 12px 8px; }
.fila.centrada { justify-content: center; }
.alerta { border-color: var(--amarillo); }
.oferta { border: 2px solid var(--amarillo); background: linear-gradient(160deg, #2e2640, #1f2a3d); }
.turnoMio { border: 2px solid var(--amarillo); }
.aparece { animation: aparecer .5s ease both; }
.desaparece { animation: desaparecer .4s ease both; }
.abajo { margin-top: 24px; }
.grilla { display: grid; gap: 2px; justify-content: center; margin: 4px auto; }
.grilla > div { border-radius: 4px; }
.celda { position: relative; background: #3a3558; border: 1px solid #6a6492; display: grid; place-items: center; font-weight: var(--fuerte); line-height: 1; }
.celda .numero { position: absolute; top: 1px; left: 2px; font-size: 11px; font-weight: 800; }
.celda.actual { border: 2px solid #ffffff; box-shadow: 0 0 8px #ffffff88; }
/* En el celu, todo en una columna. En la tablet acostada, para no bajar la pantalla (la prueba en la tablet del 01/10):
   en Cruzados, la grilla a la izquierda y lo que se lee y se toca a la derecha; en el menú, los juegos a la derecha. */
.mesa { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) and (orientation: landscape) {
  main.ancho { max-width: 1040px; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
  .mesa { display: grid; grid-template-columns: auto minmax(360px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "grilla arriba" "grilla abajo"; align-items: start; gap: 12px 32px; }
  .mesa > .arriba { grid-area: arriba; }
  .mesa > .grilla { grid-area: grilla; margin: 0; }
  .mesa > .abajo { grid-area: abajo; }
}
.celda.pinta { animation: pinta .6s ease both; }
.definicion { font-size: var(--grande); font-weight: var(--fuerte); line-height: 1.2; }
.palabraGrande { font-size: 40px; font-weight: var(--fuerte); letter-spacing: 2px; color: var(--amarillo); }
.punto { width: 16px; height: 16px; border-radius: 50%; flex: none; }
/* Sin conexión: dice qué pasa y ofrece un botón (regla de diseño, 7). */
.reconectando { position: sticky; top: 0; z-index: 6; background: var(--amarillo); color: #14121f; font-weight: var(--fuerte); border-radius: 14px; padding: 8px 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reconectando .boton.mini, #aviso .boton.mini { background: #14121f; color: #fff; border: 0; flex: none; }
.reconectando .boton.mini.borde, #aviso .boton.mini.borde { background: transparent; color: #14121f; border: 2px solid #14121f; }
.cargando::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; }

/* El reloj de cada etapa: un anillo que se vacía. --p va de 1 a 0. */
.anillo {
  --p: 1; width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--fondo) 74%, transparent 76% 100%), conic-gradient(var(--amarillo) calc(var(--p) * 360deg), var(--superficie2) 0);
}
.anillo .segundos { font-weight: var(--fuerte); font-size: var(--letra); }

/* La revelación: apagón, suspenso (los votos vuelan y se apilan), golpe (el sello) y festejo. Los tiempos los pone
   app.js con animation-delay, calculados con la hora del servidor: así sale igual en todos los celus. */
.escena { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px 0 24px; }
.apagon {
  position: fixed; inset: 0; z-index: 5; background: #000; display: grid; place-items: center; font-size: 72px;
  animation-name: apagon; animation-fill-mode: both; animation-timing-function: ease-in; pointer-events: none;
}
.votados { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.votado { position: relative; width: 96px; text-align: center; background: var(--superficie2); border-radius: 16px; padding: 8px 4px; }
.votado .cara { font-size: 44px; line-height: 1.1; }
.votado .nombre { font-weight: var(--fuerte); font-size: var(--chica); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.votado .votos { min-height: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; font-size: 20px; }
.votado .votos span { animation: voto .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.sello {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%) rotate(-14deg); padding: 4px 8px; border-radius: 8px;
  font-weight: var(--fuerte); font-size: var(--titulo); letter-spacing: 1px; border: 3px solid; background: #14121fcc; white-space: nowrap;
  animation: sello .35s cubic-bezier(.2, 1.8, .4, 1) both;
}
.sello.si { color: var(--rosa); border-color: var(--rosa); }
.sello.no { color: var(--celeste); border-color: var(--celeste); }
.final { text-align: center; }
.final .titulo { font-size: var(--grande); font-weight: var(--fuerte); }
.linterna {
  font-size: 84px; line-height: 1.2; margin: 0 auto; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #fff6c7 0%, #ffd23f55 45%, transparent 70%); animation: linterna 1.2s ease both;
}

/* El cartel: arriba, sobre la barra, y espera el toque (no se va solo: regla de diseño, 12). No corre nada de lugar. */
#aviso {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-220px); visibility: hidden;
  background: #fff; color: #14121f; padding: 12px 12px 12px 16px; border-radius: 16px; font-weight: var(--fuerte); width: min(528px, calc(100vw - 32px));
  transition: transform .25s ease, visibility 0s .25s; z-index: 60; box-shadow: 0 10px 30px #000a;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
#aviso.visible { transform: translateX(-50%) translateY(0); visibility: visible; transition: transform .25s ease; }
#aviso p { flex: 1 1 160px; }
#aviso .fila { flex: none; flex-wrap: nowrap; margin-left: auto; }
/* La pregunta antes de algo que no tiene vuelta: una hoja abajo, con los dos botones que dicen qué pasa. */
.velo { position: fixed; inset: 0; z-index: 70; background: #0b0a12cc; display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: min(560px, 100%); background: var(--superficie); border-radius: 24px 24px 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; animation: aparecer .25s ease both; }
.hoja .grande { text-align: center; }
.hoja p { text-align: center; color: var(--suave); }

@keyframes apagon { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes voto { from { opacity: 0; transform: translateY(-60px) scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes sello { from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(3); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
@keyframes linterna { 0% { transform: translateX(-120px); opacity: .3; } 60% { transform: translateX(40px); } 100% { transform: none; opacity: 1; } }
@keyframes premio { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes desaparecer { from { opacity: 1; } to { opacity: 0; height: 0; padding: 0; margin: 0; border-width: 0; overflow: hidden; } }
@keyframes pinta { from { transform: scale(.4); filter: brightness(2); } to { transform: none; filter: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } } /* hidden: mientras espera, no se puede tocar */
@keyframes saltar { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes latir { from { opacity: .5; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* En la Onda: el dial de la radio, de 0 a 100 entre las dos puntas. */
.dial { width: 100%; user-select: none; -webkit-user-select: none; }
.dial .franja { position: relative; height: 96px; border-radius: 14px; background: repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 10%), linear-gradient(180deg, #1b3a46, #10242c); border: 2px solid #4fc3f7; overflow: hidden; touch-action: none; }
.dial.tocable .franja { cursor: pointer; box-shadow: 0 0 0 4px #4fc3f733; }
.dial .puntas { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-weight: var(--fuerte); font-size: var(--letra); }
.dial .puntas span:last-child { text-align: right; }
.dial .banda { position: absolute; top: 0; bottom: 0; }
.dial .banda.b0 { background: #4fc3f733; }
.dial .banda.b1 { background: #4fc3f766; }
.dial .banda.b2 { background: #4fc3f7aa; }
.dial .objetivo { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--amarillo); box-shadow: 0 0 12px var(--amarillo); }
.dial .aguja { position: absolute; top: 10px; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--rosa); }
.dial .aguja span { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 22px; line-height: 1; }
.dial .aguja.mia { background: var(--texto); width: 4px; margin-left: -2px; }

/* Antes o Después: la línea de tiempo, de la más vieja a la más nueva, con los huecos entre las figuritas. */
.carta { border-color: #ffb547; }
.linea { display: flex; flex-direction: column; gap: 8px; }
.linea .figurita { display: flex; align-items: center; gap: 12px; background: var(--superficie2); border: 2px solid #ffb54766; border-radius: 14px; padding: 8px 16px; }
.linea .figurita .texto { flex: 1; }
.linea .figurita .anio { font-size: var(--grande); font-weight: var(--fuerte); color: #ffb547; }
.linea .hueco { min-height: 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: var(--fuerte); color: var(--suave); }
.linea button.hueco { min-height: 56px; border: 2px dashed var(--borde-toca); background: transparent; cursor: pointer; }
.linea .hueco.marcado { min-height: 36px; border: 2px solid #ffb547; color: #ffb547; }
.linea .hueco.elegido { border: 2px solid var(--rosa); background: #ff4d8d22; color: var(--texto); }
.tarjeta.dato { border-color: #ffb54766; font-size: var(--letra); }
.otraLinea { gap: 8px; }
.otraLinea.deTurno { font-weight: var(--fuerte); }
.otraLinea .anios { flex: 1; min-width: 0; color: var(--suave); } /* con muchas tarjetas, los años bajan de renglón: no se cortan con «…» */
.otraLinea .apagado { opacity: .25; filter: grayscale(1); }
.selloAnio { font-size: 80px; line-height: 1; font-weight: var(--fuerte); color: #ffb547; letter-spacing: -2px; }

.dial .aguja b { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: var(--chica); font-weight: var(--fuerte); color: var(--texto); background: #000a; border-radius: 6px; padding: 0 4px; }
.linea .figurita.nueva { border-color: var(--rosa); box-shadow: 0 0 0 3px #ff4d8d44; }
.linea button.hueco .anillo { width: 28px; height: 28px; margin-left: 8px; }

/* CarpinGo!, la carrera: su página va encima de la app, a pantalla completa, mientras dure (app.js, puenteCarpinGo). */
.carpingo { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 50; background: #0B222C; }
.carpingo.cargando { opacity: 0; pointer-events: none; } /* mientras baja, se ve «Cargando la carrera…» */

/* Cruzados del día, solo. Se escribe sobre las casillas, con un teclado propio pegado abajo (de mirar CodyCross, 07/10):
   casillas claras con la letra oscura; la palabra elegida, en durazno; el cursor, amarillo; lo escrito sin confirmar,
   «en lápiz» (gris); lo confirmado, en tinta; la palabra resuelta, verde agua. La que no es se sacude en rojo, sin cartel. */
.barra .reloj { font-variant-numeric: tabular-nums; font-weight: var(--fuerte); font-size: var(--titulo); color: var(--amarillo, #ffd23f); }
.dia { display: flex; flex-direction: column; gap: 8px; min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px - env(safe-area-inset-bottom)); }
.dia .barra { margin-bottom: 0; }
.grilla.papel { gap: 3px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.grilla.papel .celda { background: #f3eeff; color: #1f1a3d; border: 0; border-radius: 6px; box-shadow: inset 0 -3px 0 #cfc6ee; }
.grilla.papel .celda.resuelta { background: #a6f0e6; box-shadow: inset 0 -3px 0 #62cfc2; }
.grilla.papel .celda.activa { background: #ffe2a8; box-shadow: inset 0 -3px 0 #f0b95a; }
.grilla.papel .celda.cursor { background: var(--amarillo); box-shadow: 0 0 0 3px var(--celeste); z-index: 1; }
.grilla.papel .celda.lapiz { color: #6d6699; }
.grilla.papel .celda.mal { background: #ffb4b4; box-shadow: inset 0 -3px 0 #e87878; animation: sacude .4s ease both; }
.grilla.papel .celda.entra { animation: pinta .5s ease both; }
@keyframes sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* La definición y el teclado: al pie de la pantalla aunque la grilla sea más alta (ocupa también el margen de main). */
.diaPanel {
  position: sticky; bottom: 0; z-index: 4; display: grid; gap: 6px;
  margin: auto -16px calc(-32px - env(safe-area-inset-bottom)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--borde); box-shadow: 0 -10px 20px #14121fd9;
}
.diaPanel > * { min-width: 0; } /* sin esto, la fila de ayudas (que no parte renglón) ensanchaba toda la pantalla */
.diaFila { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
@media (max-width: 351px) { .dia, .diaPanel { gap: 4px; } } /* en 320, la barra y la fila de ayudas van en dos renglones: el mini entra igual */
.diaIr { flex: none; min-width: 72px; min-height: 56px; padding: 4px 6px; display: grid; place-content: center; gap: 0; line-height: 1.1; border: 2px solid var(--borde-toca); border-radius: 14px; background: transparent; color: var(--texto); font-size: var(--chica); cursor: pointer; }
.diaIr small { font-size: var(--chica); color: var(--suave); } /* «Anterior», «Siguiente»: ningún dibujo solo */
.diaLetra { flex: 1 1 0; min-width: min(100%, 4.6em); min-height: 56px; padding: 4px 6px; white-space: nowrap; border: 2px solid var(--borde-toca); border-radius: 999px; background: transparent; color: var(--texto); font-weight: var(--fuerte); font-size: var(--chica); cursor: pointer; }
.diaLetra small { color: var(--suave); font-weight: 400; font-size: var(--chica); }
.diaLetra[disabled] { color: #a9a4c4; border-color: var(--borde); cursor: default; }
.diaLetra { white-space: normal; } /* con la letra grande, la ayuda parte renglón en vez de salirse del botón */
@media (max-width: 399px) { /* en un celu (hasta 399 de ancho), lo que cuesta la ayuda va en un segundo renglón: con ◀ ▶ y su palabra no entra al lado */
  .diaLetra { white-space: normal; line-height: 1.15; padding: 3px 4px; }
  .diaLetra small { display: block; }
}
.diaPanel .definicion { font-size: var(--titulo); line-height: 1.2; min-height: 2.4em; overflow-wrap: anywhere; padding: 0 4px; display: flex; align-items: center; justify-content: center; text-align: center; }
/* La guía de la primera vez: una línea con la flecha de .senal, hacia el teclado o hacia la grilla. */
.diaGuia { text-align: center; color: var(--amarillo); font-weight: var(--fuerte); font-size: var(--letra); }
.diaGuia::after {
  content: ''; display: inline-block; width: 20px; height: 24px; margin-left: 8px; vertical-align: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 3 37 24H27v21H13V24H3z' fill='%23ffd23f' stroke='%2314121f' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: guiaArriba .9s ease-in-out 6; animation-delay: var(--ya, 0s);
}
.diaGuia.abajo::after { transform: rotate(180deg); animation-name: guiaAbajo; }
.diaGuia.quieta::after { animation: none; }
@keyframes guiaArriba { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
@keyframes guiaAbajo { 0%, 100% { transform: rotate(180deg) translateY(3px); } 50% { transform: rotate(180deg) translateY(-4px); } }
/* Las teclas tienen relieve (pedido de Verónica, 07/10: «más profundidad a cada tecla, visual al tacto»): la cara de
   arriba más clara, un canto oscuro abajo y su sombra. Al tocarla se hunde (baja lo que mide el canto, que desaparece)
   y se aclara, y vuelve a subir. */
.teclado { display: grid; gap: 10px; padding-bottom: 5px; user-select: none; -webkit-user-select: none; }
.teclas { display: flex; gap: 5px; justify-content: center; }
.tecla {
  flex: 0 0 calc((100% - 45px) / 10); height: 44px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(#6a5fc0, #4d4391); color: #fff; font-weight: var(--fuerte); font-size: 20px; text-shadow: 0 1px 0 #0005; /* la pieza: no crece con la letra del teléfono */
  box-shadow: 0 5px 0 #2a2356, 0 8px 8px #0007, inset 0 1px 0 #ffffff55, inset 0 -1px 0 #0003;
  touch-action: manipulation; /* dos toques seguidos no agrandan la pantalla */
}
.tecla.borrar { flex-basis: calc((100% - 45px) / 10 * 1.6 + 5px); background: linear-gradient(#ffe27a, #f5bf1f); color: #1b1600; text-shadow: none;
  box-shadow: 0 5px 0 #a87c06, 0 8px 8px #0007, inset 0 1px 0 #ffffffaa, inset 0 -1px 0 #0002; }
.tecla:active, .tecla.apretada { animation: tecla .22s ease-out both; }
@keyframes tecla {
  0%, 45% { transform: translateY(5px); filter: brightness(1.45); box-shadow: 0 0 0 #2a2356, 0 1px 2px #0007, inset 0 2px 5px #0006; }
  100% { transform: none; filter: none; }
}
.revelacion .medalla { font-size: var(--titulo); font-weight: var(--fuerte); color: var(--amarillo); }
@media (min-width: 700px) {
  .tecla { height: 52px; font-size: 26px; }
  .diaPanel .definicion { font-size: var(--grande); }
}
/* El podio del día, al final del Cruzados de la juntada. */
.podio .fila { flex-wrap: nowrap; padding: 8px 8px; border-radius: 10px; }
.podio .fila.nuestra { background: var(--superficie2); outline: 2px solid var(--amarillo); }
.podio .medalla { font-size: 26px; }
.podio .caras { flex: 1; font-size: var(--titulo); min-width: 0; overflow-wrap: anywhere; } /* «(ustedes)» baja de renglón si no entra */
.podio .caras strong { font-size: var(--chica); white-space: nowrap; }
.podio .tiempo { font-weight: var(--fuerte); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La espera de la carrera con desconocidos. */
.cola-caras { font-size: 34px; letter-spacing: 6px; min-height: 44px; }

/* La app guía (regla de Verónica, 07/10: «una flecha que le indique qué tocar»). La flecha va sobre lo único que hay
   que tocar ahora (app.js, senal). Viene de abajo a la derecha, como una mano, y su punta queda adentro de lo que
   señala: no tapa el texto ni corre nada de lugar. Le gana a «nada late ni señala solo» (libro general, capítulo 23). */
.senal { position: relative; }
.senal::after {
  content: ''; position: absolute; right: 10px; bottom: -18px; width: 34px; height: 41px; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 3 37 24H27v21H13V24H3z' fill='%23ffd23f' stroke='%2314121f' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 0; transform: rotate(-40deg); animation: senal .9s ease-in-out 6; animation-delay: var(--ya, 0s); filter: drop-shadow(0 3px 5px #000a);
}
/* app.js (guiaQuieta) le pasa --ya, lo que ya lleva sobre ese blanco: cada dibujo nuevo sigue donde iba, y a los 5 s para. */
.senal.quieta::after { animation: none; }
/* En el dial, quieta en una punta (o en el medio) diría «va acá»: recorre la barra de lado a lado y, a los 5 s, se va:
   queda el marco amarillo, quieto, sobre toda la barra. */
.dial.senal::after { right: auto; bottom: auto; top: 58px; left: 6%; transform: none; animation: recorre 2.2s ease-in-out 2 alternate; animation-delay: var(--ya, 0s); }
.dial.senal.quieta::after { display: none; }
.dial.senal.quieta .franja { box-shadow: 0 0 0 4px var(--amarillo); }
@keyframes recorre { from { left: 6%; } to { left: calc(94% - 34px); } }
.juego p + .boton { margin-top: 8px; } /* la línea del juego ya no es un párrafo largo: que no quede pegada al botón */
.secreto.senal::after { right: 22px; bottom: 6px; width: 42px; height: 50px; }
@keyframes senal { 0%, 100% { transform: rotate(-40deg) translateY(5px); } 50% { transform: rotate(-40deg) translateY(-7px); } }
/* Donde hay que elegir entre varios (los huecos de Antes o Después), la flecha señalaría uno solo: laten todos. */
.linea.laten button.hueco { border-color: var(--amarillo); color: var(--texto); animation: laten 1.1s ease-in-out 5; animation-delay: var(--ya, 0s); } /* después queda el marco amarillo, quieto */
.linea.laten.quieta button.hueco { animation: none; }
@keyframes laten { 50% { background: #ffd23f2e; } }