/* ==========================================================================
   juegos.css — lo propio de las paginas de /juegos/

   El sistema visual (colores, botones, tarjetas, cabecera, victoria) vive
   en base.css. Aqui va la maqueta de la pagina de juego y, mas adelante,
   los tableros de cada juego.

   Igual que en base.css: nada de valores sueltos, siempre var(--algo).
   ========================================================================== */

/* --- Maqueta que arma comun.js ------------------------------------------ */

.instruccion {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-texto-tenue);
  text-align: center;
}

.zona-juego {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  min-height: var(--esp-8);
}

.pie {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* ==========================================================================
   Juego 1 — La fecha correcta

   Teclado de telefono: burbujas del 1 al 9 en tres filas, el 0 abajo al
   centro y el borrar a su derecha. Arriba, seis puntos (DDMMAA) que se van
   llenando al teclear.

   Al acertar, los puntos se transforman en la fecha, el teclado se va y en
   su mismo sitio entra la foto. La pantalla de victoria espera a que se vea.

   Los valores propios de este tablero viven en el :root de mas abajo, igual
   que en base.css: fuera de ahi, siempre var(--algo).
   ========================================================================== */

:root {
  --tecla-medida: 4.5rem;        /* diametro de cada burbuja del teclado */
  --tecla-texto: 1.75rem;
  --punto-medida: 0.875rem;      /* el punto vacio o lleno */
  --punto-fecha: 2rem;           /* el punto ya convertido en digito */
  --escala-latir: 0.5;           /* de donde sale el punto al llenarse */
  --escala-entrada: 0.94;        /* el teclado que se va, la foto que llega */
  --espera-foto: 350ms;          /* del acierto a que entre la foto */
  --ancho-foto: 18rem;
  --proporcion-cuadrada: 1 / 1;  /* a/NOVIOS.JPG es cuadrada */
}

.fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-6);
  width: 100%;
}

/* --- Los seis puntos ----------------------------------------------------
   Tres grupos de dos, con su etiqueta debajo: asi el formato DDMMAA se lee
   sin tener que explicarlo.
   ------------------------------------------------------------------------ */

.fecha-marcador {
  display: flex;
  justify-content: center;
  gap: var(--esp-4);
}

.fecha-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
}

.fecha-digitos {
  display: flex;
  gap: var(--esp-2);
}

.punto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--punto-medida);
  height: var(--punto-medida);
  border-radius: var(--radio-burbuja);
  background-color: var(--color-pastel);
  color: var(--color-acento);
  font-size: 0;                  /* el digito solo aparece al revelar */
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-linea-titulo);
  transition: width var(--dur-media) var(--curva),
              height var(--dur-media) var(--curva),
              font-size var(--dur-media) var(--curva),
              background-color var(--dur-rapida) var(--curva);
}

.punto.lleno {
  background-color: var(--color-acento);
  animation: latir var(--dur-rapida) var(--curva);
}

/* Al fallar, los puntos sacuden junto al mensaje de error y se vacian solos.
   La animacion es la misma que la del mensaje, que ya vive en base.css. */
.fecha-marcador.sacudir {
  animation: sacudida var(--dur-sacudida) var(--curva);
}

.fecha-etiqueta {
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--espaciado-letras-ancho);
  color: var(--color-texto-tenue);
}

@keyframes latir {
  from { transform: scale(var(--escala-latir)); }
  to { transform: scale(1); }
}

/* --- El teclado --------------------------------------------------------- */

.teclado {
  display: grid;
  grid-template-columns: repeat(3, var(--tecla-medida));
  gap: var(--esp-4);
  justify-content: center;
  transition: opacity var(--dur-media) var(--curva),
              transform var(--dur-media) var(--curva),
              visibility var(--dur-media) var(--curva);
}

/* Son .boton-secundario: asi heredan el hundido y el sonido de toque. Lo que
   no heredan es la cursiva de los botones: son digitos que ella tiene que
   leer de un golpe, y ahi manda la fuente del sistema. */
.tecla {
  width: var(--tecla-medida);
  height: var(--tecla-medida);
  min-height: 0;
  padding: 0;
  color: var(--color-acento);
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--tecla-texto);
  font-weight: var(--peso-medio);
}

.tecla-cero { grid-column: 2; }

/* El borrar no lleva burbuja: al lado del 0 se lee como lo que es. */
.tecla-borrar {
  background-color: transparent;
  box-shadow: none;
  font-size: var(--txt-l);
}

.tecla-borrar:active:not(:disabled) { box-shadow: none; }

/* --- El teclado y la foto comparten sitio -------------------------------
   Las dos cosas ocupan la misma celda: cuando el teclado se va, la foto
   entra donde estaba y la pagina no pega ningun salto.
   ------------------------------------------------------------------------ */

.fecha-escena {
  display: grid;
  width: 100%;
  justify-items: center;
  align-items: center;
}

.fecha-escena > * { grid-area: 1 / 1; }

.fecha-foto {
  width: 100%;
  max-width: var(--ancho-foto);
  aspect-ratio: var(--proporcion-cuadrada);
  visibility: hidden;
  opacity: 0;
  transform: scale(var(--escala-entrada));
  transition: opacity var(--dur-media) var(--curva),
              transform var(--dur-media) var(--curva),
              visibility var(--dur-media) var(--curva);
}

/* --- Acierto ------------------------------------------------------------ */

.fecha.revelado .punto {
  width: var(--punto-fecha);
  height: var(--punto-fecha);
  background-color: transparent;
  font-size: var(--txt-xl);
}

.fecha.revelado .teclado {
  visibility: hidden;
  opacity: 0;
  transform: scale(var(--escala-entrada));
  pointer-events: none;
}

.fecha.revelado .fecha-foto {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: var(--espera-foto);
}

/* comun.js pinta la victoria en cuanto Verificar devuelve true. Aqui la foto
   va primero, asi que j1.js pone esta clase antes de ganar y la quita cuando
   toca; al quitarla, la victoria entra con su animacion de siempre. */
body.victoria-en-espera .victoria,
body.victoria-en-espera .victoria-tarjeta {
  visibility: hidden;
  animation: none;
}

/* ==========================================================================
   Juego 2 — ¿Donde fue esto?

   Rejilla de dos columnas: fotos a la izquierda, momentos a la derecha, y
   un hueco ancho en el medio por donde pasan las lineas. Las celdas van
   intercaladas en el HTML, asi que cada foto y su tarjeta comparten fila y
   la linea siempre cruza por ese hueco, nunca por encima de otra celda.

   Las lineas son un <svg> hermano de la rejilla, estirado sobre ella. La
   capa no recibe toques; solo los reciben los trazos anchos e invisibles
   que lleva cada linea debajo, para que se puedan borrar con el dedo.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  /* Los cuatro colores de union, en el orden en que se reparten. */
  --union-1: #E07A76;         /* rojo pastel */
  --union-2: #7FA9D4;         /* azul pastel */
  --union-3: #E0BE63;         /* amarillo pastel */
  --union-4: #7FAF87;         /* verde pastel */

  --union-grosor: 5px;        /* la linea que se ve */
  --union-tocable: 22px;      /* la que recibe el dedo, invisible */
  --dur-union: 320ms;         /* trazarse o recogerse (tambien en j2.js) */
  --anillo: 3px;              /* borde del elegido y del ya unido */
  --alto-fila: 6.5rem;        /* alto de cada fila; crece si el texto no entra */
  --columna-fotos: 0.85fr;    /* la foto un poco mas angosta que el texto */
  --hueco-lineas: var(--esp-6);
}

.lugares {
  position: relative;
  width: 100%;
}

/* Al fallar sacude el conjunto, lineas incluidas: la animacion es la misma
   del mensaje de error, que ya vive en base.css. */
.lugares.sacudir { animation: sacudida var(--dur-sacudida) var(--curva); }

.lugares.resuelto { pointer-events: none; }

.lugares-tablero {
  display: grid;
  grid-template-columns: minmax(0, var(--columna-fotos)) minmax(0, 1fr);
  grid-auto-rows: minmax(var(--alto-fila), auto);
  gap: var(--esp-3) var(--hueco-lineas);
  align-items: stretch;
}

/* --- Las celdas ---------------------------------------------------------
   Son .boton-secundario para heredar el hundido y el sonido de toque, con
   el relleno y el radio cambiados: aqui no son burbujas, son tarjetas.
   ------------------------------------------------------------------------ */

.lugar-foto,
.lugar-texto {
  position: relative;
  min-height: 0;
  padding: 0;
  border-radius: var(--radio-tarjeta);
}

/* El anillo va en un ::after y no en la sombra: asi no se lo lleva por
   delante el :active de .boton-secundario mientras la tiene apretada. */
.lugar-foto::after,
.lugar-texto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--anillo) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--dur-rapida) var(--curva);
}

.lugar-foto.elegido::after,
.lugar-texto.elegido::after { border-color: var(--color-acento); }

.lugar-foto.unido::after,
.lugar-texto.unido::after { border-color: var(--color-union); }

.lugar-foto {
  overflow: hidden;
  background-color: var(--color-pastel);
}

/* La foto va absoluta a proposito: si fuera estatica, cada imagen estiraria
   su fila hasta su propio alto natural y las cuatro filas quedarian
   disparejas (y el tablero, larguisimo). Asi la fila la manda --alto-fila y
   la foto se recorta para llenarla, venga vertical o cuadrada. */
.lugar-foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mientras la foto no exista, el hueco pastel con el nombre que le toca. */
.lugar-falta {
  display: none;
  padding: var(--esp-2);
  color: var(--color-texto-tenue);
  /* Es un nombre de archivo: en cursiva no se leeria bien. */
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--txt-xs);
  line-height: var(--alto-linea-titulo);
  text-align: center;
  /* El nombre del archivo es largo y la caja es angosta: que corte donde sea
     antes que desbordar. Solo se ve mientras falte la foto. */
  overflow-wrap: anywhere;
}

.lugar-foto.vacio .lugar-falta { display: block; }

.lugar-texto {
  padding: var(--esp-3);
  background-color: var(--color-superficie);
  color: var(--color-texto);
  font-size: var(--txt-m);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-fuerte);
  text-align: center;
  text-wrap: balance;
  white-space: normal;
  overflow-wrap: break-word;
}

/* --- Las lineas ---------------------------------------------------------
   Sin viewBox: una unidad del SVG es un pixel de la pagina, asi que j2.js
   escribe los extremos ya medidos. El trazo lleva pathLength="1", asi que
   se dibuja yendo de stroke-dashoffset 1 (nada) a 0 (entera), sea cual sea
   su largo; al rotar el telefono solo hay que mover los extremos.
   ------------------------------------------------------------------------ */

.lugares-lineas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.union-1 { --color-union: var(--union-1); }
.union-2 { --color-union: var(--union-2); }
.union-3 { --color-union: var(--union-3); }
.union-4 { --color-union: var(--union-4); }

.union-trazo {
  fill: none;
  stroke: var(--color-union);
  stroke-width: var(--union-grosor);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-union) var(--curva);
}

/* El area de toque: ancha para el dedo y transparente para el ojo. */
.union-tocable {
  fill: none;
  stroke: transparent;
  stroke-width: var(--union-tocable);
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

/* Mientras se recoge ya no se puede volver a tocar. */
.union.saliendo { pointer-events: none; }

/* ==========================================================================
   Juego 3 — Memorama

   Rejilla de tres columnas y cuatro filas: doce cartas cuadradas.

   Cada carta es un boton con perspectiva propia y, dentro, un envoltorio
   que rota media vuelta sobre su eje vertical. De ese envoltorio cuelgan
   las dos caras, una girada respecto de la otra y las dos con la espalda
   oculta (backface-visibility), asi que en cada momento solo se ve una: es
   un giro de verdad, no un fundido, y al cruzar los noventa grados se ve el
   canto. La perspectiva va carta por carta y no en el tablero para que
   todas giren igual, esten en el centro o en la esquina.

   Lo que rota es el envoltorio y no el boton: asi el hundido del toque
   (.boton-secundario) y el giro son dos transformaciones en dos capas
   distintas y no se pisan.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  --memo-columnas: 3;             /* 3 x 4 = las doce cartas */
  --dur-volteo: 400ms;            /* el giro (tambien en j3.js) */
  --perspectiva: 800px;           /* mas chico, giro mas exagerado */
  --giro-carta: 180deg;
  --dorso-punto: 22px;            /* el lunar del dorso */
  --escala-pareja: 1.06;          /* el respingo del par encontrado */
  --dorso-patron:
    radial-gradient(circle at 50% 50%,
                    var(--color-acento-tenue) 26%, transparent 27%);
}

.memorama {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  width: 100%;
}

.memorama-tablero {
  display: grid;
  grid-template-columns: repeat(var(--memo-columnas), minmax(0, 1fr));
  gap: var(--esp-3);
}

/* Mientras una jugada se resuelve el tablero entero deja de recibir toques.
   Va aqui y no solo en j3.js para que tampoco se hunda al apretarla: si no
   se puede voltear, la carta no tiene que contestar. */
.memorama.esperando .memorama-tablero { pointer-events: none; }

/* --- Las cartas ---------------------------------------------------------
   Son .boton-secundario para heredar el hundido y el sonido de toque, pero
   sin fondo ni sombra propios: lo que se ve es la cara de arriba, y el
   boton solo aporta el hueco cuadrado y la perspectiva.
   ------------------------------------------------------------------------ */

.carta {
  position: relative;
  aspect-ratio: var(--proporcion-cuadrada);
  min-height: 0;
  padding: 0;
  border-radius: var(--radio-tarjeta);
  background-color: transparent;
  box-shadow: none;
  perspective: var(--perspectiva);
}

/* Del :active heredado se queda el hundido; el fondo y la sombra, no. */
.carta:active:not(:disabled) {
  background-color: transparent;
  box-shadow: none;
}

/* Las cartas ya emparejadas se desactivan para que no se puedan volver a
   tocar, pero se quedan enteras: aqui apagarlas seria mentir, son las que
   ella ya gano. */
.carta:disabled {
  opacity: 1;
  box-shadow: none;
  cursor: default;
}

.carta-giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--dur-volteo) var(--curva);
}

.carta.descubierta .carta-giro { transform: rotateY(var(--giro-carta)); }

.carta-cara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.carta-dorso {
  background-color: var(--color-pastel);
  background-image: var(--dorso-patron);
  background-size: var(--dorso-punto) var(--dorso-punto);
}

/* La cara de la foto vive girada media vuelta: cuando el envoltorio rota,
   queda derecha y el dorso pasa a estar de espaldas. */
.carta-frente {
  transform: rotateY(var(--giro-carta));
  background-color: var(--color-superficie);
}

.carta-frente img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mientras la foto no exista, el hueco pastel con el nombre que le toca.
   Los pares se distinguen igual, asi que el juego se puede probar entero. */
.carta-falta {
  display: none;
  padding: var(--esp-2);
  color: var(--color-texto-tenue);
  /* Es un nombre de archivo: en cursiva no se leeria bien. */
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--txt-xs);
  line-height: var(--alto-linea-titulo);
  text-align: center;
  overflow-wrap: anywhere;
}

.carta-frente.vacio {
  background-color: var(--color-pastel);
}

.carta-frente.vacio .carta-falta { display: block; }

/* --- El par encontrado --------------------------------------------------
   Un anillo de acento y un respingo corto. El anillo va en un ::after para
   no tocar el tamaño de la cara ni pelearse con el overflow de la foto.
   ------------------------------------------------------------------------ */

.carta.pareja .carta-frente::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--anillo) solid var(--color-acento);
  border-radius: inherit;
  pointer-events: none;
}

/* Se pone cuando el giro ya termino, asi que la animacion no pelea con la
   transicion; por eso mismo tiene que repetir el rotateY en cada paso. */
.carta.pareja .carta-giro {
  animation: respingo var(--dur-media) var(--curva);
}

@keyframes respingo {
  0% { transform: rotateY(var(--giro-carta)) scale(1); }
  50% { transform: rotateY(var(--giro-carta)) scale(var(--escala-pareja)); }
  100% { transform: rotateY(var(--giro-carta)) scale(1); }
}

/* --- El aviso de tablero completo ---------------------------------------
   Ocupa su sitio desde el principio, invisible: cuando aparece, el tablero
   no pega ningun salto.
   ------------------------------------------------------------------------ */

.memorama-aviso {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-acento);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transition: opacity var(--dur-media) var(--curva);
}

.memorama.completo .memorama-aviso { opacity: 1; }

/* ==========================================================================
   Juego 4 — Pelimoji

   Tres tarjetas, una debajo de otra: los emojis en grande arriba y el campo
   de texto abajo. La tarjeta entera es un <label>, asi que tocar los emojis
   ya pone el cursor en su campo.

   Al fallar sacuden las tres a la vez, nunca una sola: el error es del
   intento, no de una pelicula. Al acertar, las tres se marcan con el anillo
   de acento y los campos se apagan.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  /* La fuente de emoji del sistema. Sin esto, en Windows algunos salen en
     blanco y negro o como cuadrito. */
  --fuente-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                  "Segoe UI Symbol", var(--fuente);

  /* Los emojis crecen con la pantalla y se paran en 2.75rem: en un telefono
     angosto la fila de cinco tiene que caber en una sola linea. */
  --emoji-medida: clamp(1.75rem, 9vw, 2.75rem);
  --emoji-separacion: 0.12em;     /* aire entre uno y otro */
}

.emojis {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  width: 100%;
}

/* La misma animacion del mensaje de error, que ya vive en base.css. */
.emojis.sacudir { animation: sacudida var(--dur-sacudida) var(--curva); }

/* --- La tarjeta --------------------------------------------------------- */

.emoji-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-4);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-1);
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

/* El anillo va en un ::after, igual que en los otros tableros: no toca el
   tamaño de la tarjeta ni se pelea con nada de dentro. */
.emoji-carta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--anillo) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--dur-rapida) var(--curva);
}

/* --- Los emojis ---------------------------------------------------------
   El letter-spacing tambien deja aire despues del ultimo, asi que la fila
   quedaria corrida a la izquierda; el text-indent devuelve justo eso y la
   deja centrada de verdad.
   ------------------------------------------------------------------------ */

.emoji-simbolos {
  font-family: var(--fuente-emoji);
  font-size: var(--emoji-medida);
  line-height: var(--alto-linea-titulo);
  letter-spacing: var(--emoji-separacion);
  text-indent: var(--emoji-separacion);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

/* --- El campo -----------------------------------------------------------
   Es el .campo de base.css con dos cambios: aqui se escribe una frase, no
   una clave, asi que va con el espaciado normal y el cuerpo de siempre.
   ------------------------------------------------------------------------ */

.emoji-campo {
  font-size: var(--txt-m);
  letter-spacing: var(--espaciado-letras);
}

/* --- Acierto ------------------------------------------------------------
   Los campos se apagan pero se siguen leyendo enteros: son las respuestas
   que ella acaba de acertar, apagarlas seria taparle lo que gano.
   (-webkit-text-fill-color es por iOS, que aclara el texto desactivado.)
   ------------------------------------------------------------------------ */

.emojis.resuelto .emoji-carta::after { border-color: var(--color-acento); }

.emojis.resuelto .emoji-campo:disabled {
  opacity: 1;
  border-color: var(--color-acento);
  color: var(--color-acento);
  -webkit-text-fill-color: var(--color-acento);
  font-weight: var(--peso-medio);
}

/* ==========================================================================
   Juego 5 — Rompecabezas

   Un cuadrado con nueve sitios: ocho fichas y un hueco. Las fichas no van
   en una rejilla, van sueltas y colocadas por transform, porque una rejilla
   no puede deslizar nada: al cambiar de celda pegaria un salto. Asi cada
   ficha viaja a su sitio nuevo.

   Cada ficha son dos capas:

     .rc-celda   el envoltorio, el que se mueve por el tablero (transform)
     .rc-ficha   el boton, el que se hunde al tocarlo (transform tambien)

   Van separadas porque las dos cosas son transform: si fueran el mismo
   elemento, el hundido de .boton-secundario le borraria el sitio a la ficha
   y se iria a la esquina al apretarla.

   Dentro del boton va la foto ENTERA, corrida y recortada por el boton, en
   vez de nueve recortes distintos: es el mismo archivo para las nueve, lo
   descarga una sola vez y no hay que preparar nada a mano.

   La cuenta la lleva --rc-linea, el hueco entre fichas. Al armarse se va a
   cero: las fichas se juntan, se les quita el radio y la sombra, y las
   lineas que partian la foto se desvanecen. Debajo esta la foto entera
   (.rc-fondo), invisible hasta ese momento: aparece ahi, rellena el cuadro
   que faltaba y tapa cualquier pelo de fondo entre ficha y ficha.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  --rc-ancho: 20rem;             /* el tablero no crece mas que esto */
  --rc-lado: 3;                  /* 3 x 3 = los nueve sitios */
  --rc-linea: 6px;               /* el hueco entre fichas */
  --rc-linea-armado: 0px;        /* ...y lo que vale con la foto armada */
  --rc-numero: 1.75rem;          /* el numero, solo si falta la foto */
  --rc-mini: 3.25rem;            /* la miniatura de referencia */
  --dur-deslizar: 190ms;         /* lo que tarda una ficha en llegar */
  --dur-armar: 650ms;            /* lo que tarda la foto en cerrarse */
}

.rompecabezas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  width: 100%;
}

.rc-tablero {
  position: relative;
  width: 100%;
  max-width: var(--rc-ancho);
  aspect-ratio: var(--proporcion-cuadrada);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-pastel);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* --- La foto entera, debajo de todo --------------------------------------
   Durante el juego no se ve: si se viera, rellenaria el hueco y no habria
   rompecabezas. Aparece cuando ya esta armado.
   ------------------------------------------------------------------------ */

.rc-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-armar) var(--curva);
}

.rompecabezas.armado .rc-fondo { opacity: 1; }

/* --- El sitio de cada ficha ----------------------------------------------
   Ancho y alto salen de repartir el tablero entre tres, descontando los dos
   huecos. El translate es en porcentaje de la propia ficha, asi que una
   columna a la derecha es "mi ancho + un hueco": las mismas cuentas valen
   en cualquier pantalla, sin medir nada desde JS.
   ------------------------------------------------------------------------ */

.rc-celda {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100% - (var(--rc-lado) - 1) * var(--rc-linea)) / var(--rc-lado));
  height: calc((100% - (var(--rc-lado) - 1) * var(--rc-linea)) / var(--rc-lado));
  transform: translate(calc(var(--col) * (100% + var(--rc-linea))),
                       calc(var(--fila) * (100% + var(--rc-linea))));
  transition: transform var(--dur-deslizar) var(--curva),
              width var(--dur-deslizar) var(--curva),
              height var(--dur-deslizar) var(--curva);
}

/* --- La ficha ------------------------------------------------------------
   Es .boton-secundario para heredar el hundido y el sonido de toque, con el
   relleno y el radio cambiados: aqui no es una burbuja, es un cuadro que
   recorta la foto.
   ------------------------------------------------------------------------ */

.rc-ficha {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-hundida);
  touch-action: manipulation;         /* sin espera al doble toque */
  transition: transform var(--dur-rapida) var(--curva),
              box-shadow var(--dur-deslizar) var(--curva),
              border-radius var(--dur-deslizar) var(--curva);
}

/* La unica pista de que se puede tocar: la ficha que puede moverse va un
   poco levantada y las quietas van planas. */
.rc-ficha:not(:disabled) { box-shadow: var(--sombra-1); }

/* Las que no tocan el hueco se desactivan, pero se quedan enteras: aqui
   apagarlas seria tapar la foto. */
.rc-ficha:disabled {
  opacity: 1;
  cursor: default;
}

/* --- El pedazo de foto que le toca a cada ficha --------------------------
   La imagen es la foto entera, del tamaño del tablero (tres fichas mas los
   dos huecos), corrida hacia arriba y hacia la izquierda hasta dejar a la
   vista el cuadro que le toca. El boton recorta el resto.
   ------------------------------------------------------------------------ */

.rc-ficha img {
  position: absolute;
  left: calc(var(--foto-col) * -1 * (100% + var(--rc-linea)));
  top: calc(var(--foto-fila) * -1 * (100% + var(--rc-linea)));
  width: calc(var(--rc-lado) * 100% + (var(--rc-lado) - 1) * var(--rc-linea));
  height: calc(var(--rc-lado) * 100% + (var(--rc-lado) - 1) * var(--rc-linea));
  max-width: none;                    /* el reset la encogeria al 100% */
  object-fit: cover;
  transition: left var(--dur-deslizar) var(--curva),
              top var(--dur-deslizar) var(--curva),
              width var(--dur-deslizar) var(--curva),
              height var(--dur-deslizar) var(--curva);
}

/* --- La foto armada ------------------------------------------------------
   El hueco se va a cero y con el se van los bordes y las sombras. Todo lo
   que depende de --rc-linea (el sitio, el ancho, el trozo de foto) se mueve
   junto, y mas despacio que un movimiento normal: es el final, no una
   jugada.
   ------------------------------------------------------------------------ */

.rompecabezas.armado { --rc-linea: var(--rc-linea-armado); }

.rompecabezas.armado .rc-celda,
.rompecabezas.armado .rc-ficha,
.rompecabezas.armado .rc-ficha img {
  transition-duration: var(--dur-armar);
}

.rompecabezas.armado .rc-ficha {
  border-radius: 0;
  box-shadow: none;
}

/* --- Mientras la foto no exista ------------------------------------------
   Cada ficha enseña su numero: armarlo es dejar el 1 al 8 en orden, asi que
   el juego se puede probar entero sin la foto.
   ------------------------------------------------------------------------ */

/* Del 1 al 8 y en la fuente del sistema, por lo mismo que el teclado. */
.rc-numero {
  display: none;
  margin: auto;
  color: var(--color-acento);
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--rc-numero);
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-linea-titulo);
}

.rompecabezas.sin-foto .rc-numero { display: block; }
.rompecabezas.sin-foto .rc-fondo { display: none; }
.rompecabezas.sin-foto .rc-ficha img { display: none; }
.rompecabezas.sin-foto .rc-miniatura img { display: none; }

/* --- El pie: la referencia y la cuenta -----------------------------------
   La miniatura esta siempre a la vista, que para eso es la referencia. La
   cuenta de movimientos va del lado contrario, chica y en gris: es un dato,
   no un limite ni un reloj.
   ------------------------------------------------------------------------ */

.rc-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  width: 100%;
  max-width: var(--rc-ancho);
}

.rc-referencia {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.rc-miniatura {
  display: block;
  width: var(--rc-mini);
  height: var(--rc-mini);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radio-chico);
  background-color: var(--color-pastel);
  box-shadow: var(--sombra-1);
}

.rc-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc-referencia figcaption,
.rc-cuenta {
  font-size: var(--txt-xs);
  color: var(--color-texto-tenue);
}

.rc-cuenta { font-variant-numeric: tabular-nums; }

/* --- El aviso de foto armada ---------------------------------------------
   Ocupa su sitio desde el principio, invisible: cuando aparece, el tablero
   no pega ningun salto. El mismo trato que en el memorama.
   ------------------------------------------------------------------------ */

.rc-aviso {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-acento);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transition: opacity var(--dur-media) var(--curva);
}

.rompecabezas.armado .rc-aviso { opacity: 1; }

/* ==========================================================================
   Juego 6 — Acertijos

   Cuatro tarjetas, una debajo de otra: el enunciado arriba con su numero,
   el boton de pista debajo y las diez respuestas al final, en burbujas de
   dos columnas. Las diez son las mismas en las cuatro tarjetas.

   Cada burbuja es un <label> con un radio dentro. El radio va clipeado con
   .solo-lectores (no display: none) para que siga recibiendo el foco; lo
   que se ve es el <span>, que es .boton-secundario y por eso hereda el
   hundido y el sonido de toque. La elegida se pinta de ciruela, como el
   boton principal: se toca, asi que puede ser ciruela.

   Al fallar sacuden las cuatro a la vez, nunca una sola: el error es del
   intento, no de un acertijo. Al acertar, las cuatro tarjetas se marcan con
   el anillo de acento y las respuestas no elegidas se apagan.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  /* Ancho minimo de cada respuesta: con 7.5rem entran dos por fila hasta en
     el telefono mas angosto, y tres en cuanto hay sitio. */
  --ac-opcion-min: 7.5rem;
  --ac-numero: 1.75rem;          /* la burbuja con el numero del acertijo */
  --ac-apagado: 0.35;            /* lo que queda de las no elegidas al ganar */
}

.acertijos { width: 100%; }

/* La misma animacion del mensaje de error, que ya vive en base.css. */
.acertijos.sacudir { animation: sacudida var(--dur-sacudida) var(--curva); }

.acertijos.resuelto { pointer-events: none; }

.acertijos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* --- La tarjeta --------------------------------------------------------- */

.acertijo-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-4);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

/* El anillo va en un ::after, igual que en los otros tableros: no toca el
   tamaño de la tarjeta ni se pelea con nada de dentro. */
.acertijo-carta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--anillo) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--dur-rapida) var(--curva);
}

/* --- El enunciado ------------------------------------------------------- */

/* El acertijo va en la cursiva de siempre, la misma del titulo, los botones
   y las diez respuestas de aqui abajo: es lo que se lee, no un formulario. */
.acertijo-enunciado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-m);
  font-weight: var(--peso-medio);
  text-wrap: pretty;
}

/* El numero vuelve a la fuente del sistema: en Playfair cursiva un 1 y un 4
   se leen peor de lo que deberia costar leer un numero. */
.acertijo-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ac-numero);
  height: var(--ac-numero);
  flex: 0 0 auto;
  border-radius: var(--radio-burbuja);
  background-color: var(--color-pastel);
  color: var(--color-acento);
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--txt-xs);
  font-weight: var(--peso-fuerte);
}

/* --- La pista -----------------------------------------------------------
   Un texto a mano subrayado, no un boton con fondo: al lado de diez
   burbujas, otra burbuja mas se leeria como una respuesta. El relleno le
   da area para el dedo y el margen negativo lo devuelve a la linea del
   enunciado.
   ------------------------------------------------------------------------ */

.acertijo-boton-pista {
  align-self: flex-start;
  margin-left: calc(var(--esp-2) * -1);
  padding: var(--esp-1) var(--esp-2);
  border: none;
  background: none;
  color: var(--color-acento);
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.acertijo-boton-pista:active { transform: var(--hundir-suave); }

/* El desplegable es el .panel de base.css (de 0fr a 1fr), asi que la pista
   se abre empujando la tarjeta, sin saltos ni alturas a mano. */
.acertijo-panel { width: 100%; }

.acertijo-pista {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-texto-tenue);
  text-wrap: pretty;
}

/* --- Las diez respuestas ------------------------------------------------ */

.acertijo-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ac-opcion-min), 1fr));
  gap: var(--esp-2);
  width: 100%;
}

.acertijo-opcion {
  position: relative;      /* el radio clipeado se ancla aqui */
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Es .boton-secundario con el relleno y el cuerpo cambiados: aqui son diez
   en dos columnas, no un boton suelto. */
.acertijo-burbuja {
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--txt-m);
  line-height: var(--alto-linea-titulo);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* La elegida se pinta como el boton principal: a un metro del telefono se
   tiene que ver cual es sin buscarla. */
.acertijo-opcion input:checked + .acertijo-burbuja {
  background-color: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: var(--sombra-acento);
}

/* El radio no se ve, asi que su foco lo enseña la burbuja. */
.acertijo-opcion input:focus-visible + .acertijo-burbuja {
  outline: var(--borde-fino) solid var(--color-acento);
  outline-offset: var(--esp-1);
}

/* --- Acierto ------------------------------------------------------------
   Las cuatro tarjetas se marcan y las respuestas que ella no eligio se
   apagan: lo que queda a la vista es lo que acerto.
   ------------------------------------------------------------------------ */

.acertijos.resuelto .acertijo-carta::after { border-color: var(--color-acento); }

.acertijos.resuelto .acertijo-opcion input:not(:checked) + .acertijo-burbuja {
  opacity: var(--ac-apagado);
  box-shadow: none;
}

/* ==========================================================================
   Juego 7 — La linea del tiempo

   Seis sitios en dos columnas, numerados 1..6 en el orden en que se leen.
   Cada sitio tiene su numero en la esquina y dentro una polaroid: el marco
   blanco con la foto arriba y el margen ancho abajo.

   Ese margen de abajo esta reservado desde el principio aunque este vacio
   (--tl-pie): la fecha aparece ahi al acertar y nada se mueve de sitio al
   escribirse. Es lo unico que se gana mirando, asi que hasta entonces el
   texto no existe: lo escribe j7.js recien al ganar.

   La tarjeta es .boton-secundario para heredar el hundido y el sonido de
   toque, pero sin fondo ni sombra: lo que se ve es el marco de dentro. Van
   separados porque el marco esta torcido y la tarjeta no: asi la torcedura
   no se pelea con el desplazamiento con que la tarjeta viaja a su nuevo
   sitio, que tambien es un transform.

   Cada sitio tuerce lo suyo (--tl-giro-1 .. --tl-giro-6), poco y para lados
   distintos: es lo que hace que parezcan fotos puestas a mano y no celdas.
   La elegida se endereza y crece; al ganar se enderezan las seis.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  --tl-proporcion: 1 / 1;        /* la foto de la polaroid, cuadrada */
  --tl-marco: var(--esp-2);      /* el borde blanco de arriba y los lados */
  --tl-pie: 2rem;                /* el margen ancho de abajo, el de la fecha */
  --tl-numero: 1.75rem;          /* la burbuja con el numero del sitio */
  --tl-escala-elegida: 1.05;
  --tl-recto: 0deg;              /* enderezada: la elegida y las seis al ganar */
  --tl-giro: var(--tl-recto);    /* lo pisa cada sitio con el suyo */
  --tl-giro-1: -2.5deg;
  --tl-giro-2: 2deg;
  --tl-giro-3: 1.5deg;
  --tl-giro-4: -2deg;
  --tl-giro-5: -1.5deg;
  --tl-giro-6: 2.5deg;
  --dur-tl-viaje: 320ms;         /* lo que tarda una foto en cambiar de sitio */
}

.timeline { width: 100%; }

/* Al fallar sacude la linea entera, con las seis fotos donde estaban: la
   animacion es la misma del mensaje de error, que ya vive en base.css. */
.timeline.sacudir { animation: sacudida var(--dur-sacudida) var(--curva); }

.timeline.resuelto { pointer-events: none; }

.timeline-linea {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5) var(--esp-4);
  align-items: start;
}

/* --- El sitio y su numero -----------------------------------------------
   El numero vive en el sitio y no en la foto: es la casilla la que se llama
   "3", y sigue llamandose asi cuando las fotos se mueven. Va derecho aunque
   la foto este torcida, y con fondo solido y sombra como el de la portada,
   para que se lea sea cual sea la foto que quede debajo.
   ------------------------------------------------------------------------ */

.timeline-sitio {
  position: relative;
  display: flex;
}

.timeline-numero {
  position: absolute;
  top: calc(var(--esp-2) * -1);
  left: calc(var(--esp-2) * -1);
  z-index: 1;
  width: var(--tl-numero);
  height: var(--tl-numero);
  background-color: var(--color-superficie);
  color: var(--color-acento);
  /* Es un numero: va en la fuente del sistema, no en la cursiva. */
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--txt-xs);
  box-shadow: var(--sombra-burbuja);
}

/* --- La tarjeta ---------------------------------------------------------
   Es .boton-secundario vaciado: sin fondo, sin sombra y sin relleno. Todo
   lo que se ve lo pone .timeline-marco.
   ------------------------------------------------------------------------ */

.timeline-tarjeta {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 0;
  border-radius: var(--radio-chico);
  background-color: transparent;
  box-shadow: none;
}

.timeline-tarjeta:active:not(:disabled) {
  background-color: transparent;
  box-shadow: none;
}

/* Al ganar quedan apagadas para que no se puedan mover mas, pero se siguen
   viendo enteras: son las seis fotos en orden, que es el premio. */
.timeline-tarjeta:disabled {
  opacity: 1;
  box-shadow: none;
}

/* --- El viaje de una foto a su nuevo sitio ------------------------------
   Solo mientras dura el cambio: si la transicion viviera siempre en la
   tarjeta, el hundido del toque tardaria lo mismo y se sentiria pesado.
   j7.js pone .viajando para clavar la tarjeta donde estaba (sin transicion)
   y .volviendo para traerla; el orden importa, .viajando tiene que ganar.
   ------------------------------------------------------------------------ */

.timeline-tarjeta.volviendo {
  transition: transform var(--dur-tl-viaje) var(--curva);
}

.timeline-tarjeta.viajando { transition: none; }

/* --- La polaroid --------------------------------------------------------- */

.timeline-marco {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--tl-marco);
  border-radius: var(--radio-chico);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-1);
  transform: rotate(var(--tl-giro));
  transition: transform var(--dur-media) var(--curva),
              box-shadow var(--dur-media) var(--curva);
}

.timeline-sitio:nth-child(1) { --tl-giro: var(--tl-giro-1); }
.timeline-sitio:nth-child(2) { --tl-giro: var(--tl-giro-2); }
.timeline-sitio:nth-child(3) { --tl-giro: var(--tl-giro-3); }
.timeline-sitio:nth-child(4) { --tl-giro: var(--tl-giro-4); }
.timeline-sitio:nth-child(5) { --tl-giro: var(--tl-giro-5); }
.timeline-sitio:nth-child(6) { --tl-giro: var(--tl-giro-6); }

/* El anillo va en un ::after del marco, no de la tarjeta: asi se tuerce con
   la foto en vez de quedar recto alrededor de algo torcido. */
.timeline-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--anillo) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--dur-rapida) var(--curva);
}

/* La elegida se endereza y crece un poco: se ve levantada de la mesa. */
.timeline-tarjeta.elegida .timeline-marco {
  transform: rotate(var(--tl-recto)) scale(var(--tl-escala-elegida));
  box-shadow: var(--sombra-2);
}

.timeline-tarjeta.elegida .timeline-marco::after {
  border-color: var(--color-acento);
}

/* --- La foto ------------------------------------------------------------
   Cuadrada y a sangre contra el borde blanco. Va absoluta dentro de su
   hueco para que sea la proporcion la que manda el alto, venga la imagen
   vertical, cuadrada o apaisada.
   ------------------------------------------------------------------------ */

.timeline-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--tl-proporcion);
  background-color: var(--color-pastel);
  overflow: hidden;
}

.timeline-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mientras la foto no exista, el hueco pastel con lo que deberia verse en
   ella. Aqui no va el nombre del archivo, como en los otros juegos: los
   archivos se llaman por su orden y eso seria regalar la respuesta. */
.timeline-falta {
  display: none;
  padding: var(--esp-2);
  color: var(--color-texto-tenue);
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--txt-xs);
  font-weight: var(--peso-normal);
  line-height: var(--alto-linea-titulo);
  text-align: center;
  overflow-wrap: anywhere;
}

.timeline-foto.vacio .timeline-falta { display: block; }

/* --- La fecha -----------------------------------------------------------
   El margen ancho de la polaroid, vacio durante todo el juego. Ocupa su
   sitio desde el principio: cuando la fecha se escribe, no se mueve nada.
   Va a mano, como una fecha escrita en el borde de la foto.
   ------------------------------------------------------------------------ */

.timeline-fecha {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tl-pie);
  padding-top: var(--esp-1);
  color: var(--color-texto);
  font-family: var(--fuente-nota);
  font-style: normal;
  font-size: var(--txt-nota);
  font-weight: var(--peso-normal);
  line-height: var(--alto-linea-titulo);
  text-align: center;
  overflow-wrap: anywhere;
}

/* --- Acierto ------------------------------------------------------------
   Las seis se enderezan y se marcan con el anillo de acento, y cada fecha
   entra con un fundido corto.
   ------------------------------------------------------------------------ */

.timeline.resuelto .timeline-marco {
  transform: rotate(var(--tl-recto));
  box-shadow: var(--sombra-1);
}

.timeline.resuelto .timeline-marco::after {
  border-color: var(--color-acento);
}

.timeline.resuelto .timeline-fecha {
  animation: aparecer var(--dur-media) var(--curva);
}

/* ==========================================================================
   Juego 8 — Trivia

   Ocho tarjetas, una debajo de otra: el enunciado arriba con su numero y
   las cuatro respuestas debajo, en pastillas que se acomodan solas en una o
   dos por fila segun lo que midan.

   Cada pastilla es un <label> con un radio dentro. El radio va clipeado con
   .solo-lectores (no display: none) para que siga recibiendo el foco; lo
   que se ve es el <span>, que es .boton-secundario y por eso hereda el
   hundido y el sonido de toque. La elegida se pinta de ciruela, como el
   boton principal: se toca, asi que puede ser ciruela.

   Debajo de las ocho va la cuenta de respondidas, a mano y tenue: acompaña,
   no manda.

   Al fallar sacuden las ocho a la vez, nunca una sola: el error es del
   intento, no de una pregunta. Al acertar, las ocho tarjetas se marcan con
   el anillo de acento y las respuestas no elegidas se apagan.

   Igual que arriba: los valores propios de este tablero viven en :root.
   ========================================================================== */

:root {
  --tr-numero: 1.75rem;          /* la burbuja con el numero de la pregunta */
  --tr-alto-pastilla: 2.5rem;    /* mas baja que un boton suelto, pero tocable */
  --tr-apagado: 0.35;            /* lo que queda de las no elegidas al ganar */
}

.trivia {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  width: 100%;
}

/* La misma animacion del mensaje de error, que ya vive en base.css. */
.trivia.sacudir { animation: sacudida var(--dur-sacudida) var(--curva); }

.trivia.resuelto { pointer-events: none; }

.trivia-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* --- La tarjeta --------------------------------------------------------- */

.trivia-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-4);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

/* El anillo va en un ::after, igual que en los otros tableros: no toca el
   tamaño de la tarjeta ni se pelea con nada de dentro. */
.trivia-carta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--anillo) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--dur-rapida) var(--curva);
}

/* --- El enunciado ------------------------------------------------------- */

/* La pregunta va en la cursiva de siempre, la misma del titulo, los botones
   y las respuestas de aqui abajo: es lo que se lee, no un formulario. */
.trivia-enunciado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-m);
  font-weight: var(--peso-medio);
  text-wrap: pretty;
}

/* El numero vuelve a la fuente del sistema: en Playfair cursiva un 1 y un 4
   se leen peor de lo que deberia costar leer un numero. */
.trivia-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tr-numero);
  height: var(--tr-numero);
  flex: 0 0 auto;
  border-radius: var(--radio-burbuja);
  background-color: var(--color-pastel);
  color: var(--color-acento);
  font-family: var(--fuente);
  font-style: normal;
  font-size: var(--txt-xs);
  font-weight: var(--peso-fuerte);
}

/* --- Las cuatro respuestas ----------------------------------------------
   Pastillas que se acomodan solas: cada una mide lo que mide su texto y
   pasa a la fila siguiente cuando ya no cabe. Con respuestas cortas entran
   dos o tres por fila; con una larga, esa se lleva la fila entera.
   ------------------------------------------------------------------------ */

.trivia-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  width: 100%;
}

.trivia-opcion {
  position: relative;      /* el radio clipeado se ancla aqui */
  display: flex;
  max-width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Es .boton-secundario con el alto y el relleno cambiados: aqui son cuatro
   seguidas dentro de una tarjeta, no un boton suelto. */
.trivia-pastilla {
  min-height: var(--tr-alto-pastilla);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--txt-m);
  line-height: var(--alto-linea-titulo);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* La elegida se pinta como el boton principal: a un metro del telefono se
   tiene que ver cual es sin buscarla. */
.trivia-opcion input:checked + .trivia-pastilla {
  background-color: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: var(--sombra-acento);
}

/* El radio no se ve, asi que su foco lo enseña la pastilla. */
.trivia-opcion input:focus-visible + .trivia-pastilla {
  outline: var(--borde-fino) solid var(--color-acento);
  outline-offset: var(--esp-1);
}

/* --- La cuenta ----------------------------------------------------------
   Cuantas van contestadas de las ocho. Es lo unico que dice el tablero
   mientras se juega: nada de si estan bien o mal.
   ------------------------------------------------------------------------ */

.trivia-cuenta {
  color: var(--color-texto-tenue);
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Acierto ------------------------------------------------------------
   Las ocho tarjetas se marcan y las respuestas que ella no eligio se
   apagan: lo que queda a la vista es lo que contesto.
   ------------------------------------------------------------------------ */

.trivia.resuelto .trivia-carta::after { border-color: var(--color-acento); }

.trivia.resuelto .trivia-opcion input:not(:checked) + .trivia-pastilla {
  opacity: var(--tr-apagado);
  box-shadow: none;
}