/* =====================================================================
   componentes.css · Piezas de la interfaz
   ---------------------------------------------------------------------
   Orden del archivo:
     1. Enlace de salto, cabecera, navegación, migas, pie
     2. Botones, chips, interruptores, avisos
     3. Panel de ajustes
     4. Portada
     5. Tarjetas de juego y capacidad, listados
     6. Evidencia científica
     7. Páginas informativas
     (El motor de juegos y cada juego siguen a continuación.)
   El diseño parte de la tablet; móvil y escritorio son adaptaciones.
   ===================================================================== */

/* --------------------------------------------------------------------
   1. Estructura común
   -------------------------------------------------------------------- */

.saltar {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--boton-oscuro);
  color: var(--boton-oscuro-texto);
  border-radius: var(--radio-boton);
}

.saltar:focus { top: var(--e-2); color: var(--boton-oscuro-texto); }

.cabecera__fila {
  background: var(--superficie);
  border-bottom: var(--grosor-fino) solid var(--borde);
}

.cabecera__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-3);
}

.logo {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque-min);
  color: var(--texto);
  font-size: var(--t-subtitulo);
  font-weight: 800;
  text-decoration: none;
}

.logo:hover { color: var(--texto); }

.logo__dibujo { width: var(--logo); height: var(--logo); flex: none; }

.boton-aa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  min-width: var(--toque-min);
  padding: var(--e-2) var(--e-4);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--texto);
  border-radius: var(--radio-boton);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.1;
  flex: none;
}

.boton-aa__letras { font-size: var(--t-destacado); font-weight: 800; }

/* Tablet: cuatro botones grandes en una fila bajo la cabecera. */
.nav-principal { padding-block: var(--e-4) 0; }

.nav-principal__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-nav)), 1fr));
  gap: var(--separacion-toque);
  list-style: none;
}

.nav-principal__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  height: 100%;
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-2);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.nav-principal__enlace:hover { border-color: var(--texto); color: var(--texto); }

.nav-principal__enlace[aria-current='page'] {
  background: var(--superficie-marcada);
  border-color: var(--principal);
  color: var(--principal-oscuro);
}

/* En contraste alto no hay fondos de color: la página actual se subraya. */
html[data-colores='contraste'] .nav-principal__enlace[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 3px; }

.migas { padding-top: var(--e-4); font-size: var(--t-nota); color: var(--texto-tenue); }

.migas__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); list-style: none; }

.migas__lista li + li::before { content: '›'; margin-right: var(--e-2); }

/* Los enlaces de las migas son pequeños: se les da altura para tocarlos bien. */
.migas a { display: inline-block; padding-block: var(--e-2); }

.pie { background: var(--neutro); border-top: var(--grosor-fino) solid var(--borde); }

.pie a { color: var(--enlace); }

.pie a:hover { color: var(--principal-oscuro); }

@media (max-width: 599px) {
  .logo { font-size: var(--t-destacado); gap: var(--e-2); }
  .boton-aa { padding-inline: var(--e-3); }
  .nav-principal__enlace { flex-direction: row; justify-content: flex-start; gap: var(--e-3); padding-inline: var(--e-4); text-align: left; }
}

/* Escritorio: todo en una sola banda blanca. `display: contents` deja que el
   logotipo, la navegación y el botón Aa se ordenen como hermanos. */
@media (min-width: 1200px) {
  .cabecera { background: var(--superficie); border-bottom: var(--grosor-fino) solid var(--borde); }
  .cabecera__marco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); padding-block: var(--e-2); }
  .cabecera__fila { display: contents; }
  .cabecera__interior { display: contents; }
  .nav-principal { order: 2; padding: 0; margin-left: auto; }
  .boton-aa { order: 3; }
  .nav-principal__lista { display: flex; gap: var(--e-1); }
  .nav-principal__enlace { flex-direction: row; padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--radio-boton); background: transparent; font-size: var(--t-nota); }
  .nav-principal__enlace .icono { display: none; }
  .nav-principal__enlace:hover { background: var(--neutro); }
}

/* En tablet el marco no debe añadir márgenes: la banda blanca llega al borde
   y son los hijos los que centran su contenido. */
@media (max-width: 1199px) {
  .cabecera__marco { max-width: none; padding-inline: 0; }
  .nav-principal { padding-inline: var(--margen-lateral); max-width: calc(var(--ancho-contenedor) + 2 * var(--margen-lateral)); margin-inline: auto; }
  .cabecera__interior { padding-inline: var(--margen-lateral); }
}

/* --------------------------------------------------------------------
   2. Botones, chips, interruptores, avisos
   -------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-5);
  border: var(--grosor-boton) solid transparent;
  border-radius: var(--radio-boton);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-boton);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--tiempo-suave);
}

.boton:hover { color: inherit; }

.boton--principal { background: var(--principal); color: var(--principal-texto); min-height: var(--toque-medio); }
.boton--principal:hover { background: var(--principal-oscuro); color: var(--principal-texto); }

/* En modo oscuro --principal-oscuro es claro: el texto sigue siendo oscuro. */
.boton--oscuro { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); }
.boton--oscuro:hover { color: var(--boton-oscuro-texto); }

.boton--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton--secundario:hover { border-color: var(--texto); }

.boton--contorno { background: var(--superficie); color: var(--texto); border-color: var(--texto); }

.boton--acento { background: var(--acento); color: var(--acento-texto); }
.boton--acento:hover { color: var(--acento-texto); }

.boton--sobre-oscuro { background: transparent; color: var(--panel-oscuro-texto); border-color: var(--panel-oscuro-texto); }
.boton--sobre-oscuro:hover { color: var(--panel-oscuro-texto); }

.boton--enlace { background: transparent; color: var(--texto); text-decoration: underline; }

.boton--grande { min-height: var(--toque-principal); font-size: var(--t-boton-grande); font-weight: 800; }

.boton--ancho { display: flex; width: 100%; }

.boton[disabled], .boton[aria-disabled='true'] { background: var(--neutro-fuerte); color: var(--texto-tenue); border-color: var(--borde-fuerte); cursor: not-allowed; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--radio-chip);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-chip);
  font-weight: 700;
  line-height: 1.3;
}

.chip--borde { border: var(--grosor-fino) solid var(--borde-fuerte); }
.chip--oscuro { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); }
.chip--aviso { background: var(--aviso-fondo); color: var(--cap-atencion-texto); }

.grupo-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; }

/* Colores por capacidad, reutilizables en chips, tarjetas y filas. */
.cap-memoria { background: var(--cap-memoria-fondo); color: var(--cap-memoria-texto); }
.cap-atencion { background: var(--cap-atencion-fondo); color: var(--cap-atencion-texto); }
.cap-rapidez { background: var(--cap-rapidez-fondo); color: var(--cap-rapidez-texto); }
.cap-razonamiento { background: var(--cap-razonamiento-fondo); color: var(--cap-razonamiento-texto); }

/* Interruptor grande: una casilla real con su etiqueta, toda la fila es tocable. */
.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--toque-medio);
  padding: var(--e-2) var(--e-5);
  background: var(--superficie);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta);
  font-weight: 600;
  cursor: pointer;
}

.interruptor input {
  width: 30px;
  height: 30px;
  flex: none;
  margin: 0;
  accent-color: var(--principal);
  cursor: pointer;
}

.lista-interruptores { display: flex; flex-direction: column; gap: var(--separacion-toque); }

.aviso-honesto {
  padding: var(--e-4) var(--e-5);
  background: var(--neutro);
  border: var(--grosor-fino) solid transparent;
  border-radius: var(--radio-tarjeta);
  color: var(--texto-suave);
  font-size: var(--t-nota);
}

html[data-colores='contraste'] .aviso-honesto { border-color: var(--borde); }

.aviso-pendiente {
  padding: var(--e-3) var(--e-4);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  border: var(--grosor-boton) dashed var(--aviso-texto);
  border-radius: var(--radio-boton);
  font-weight: 700;
}

.seccion { margin-top: var(--ritmo-seccion); }

.seccion__titulo { margin-bottom: var(--e-4); }

.desplegable { margin-top: var(--e-3); }

.desplegable summary {
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--enlace);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* --------------------------------------------------------------------
   3. Panel «Letra y contraste»
   Pantalla completa en móvil y tablet, ventana centrada en escritorio.
   -------------------------------------------------------------------- */

.panel-ajustes {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fondo);
  color: var(--texto);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel-ajustes::backdrop { background: var(--velo-pausa); }

.panel-ajustes__cabecera {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--margen-lateral);
  background: var(--superficie);
  border-bottom: var(--grosor-fino) solid var(--borde);
}

.panel-ajustes__titulo { font-size: var(--t-seccion); }

.panel-ajustes__cuerpo { padding: var(--e-5) var(--margen-lateral) var(--e-6); }

.panel-ajustes__seccion { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-destacado); }

.panel-ajustes__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-5); }

.muestra-ajustes {
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: var(--grosor-boton) solid var(--texto);
  border-radius: var(--radio-tarjeta);
}

.muestra-ajustes__rotulo { color: var(--texto-tenue); font-size: var(--t-nota); font-weight: 700; }

.muestra-ajustes__texto { font-size: var(--t-destacado); font-weight: 600; line-height: 1.35; }

.rejilla-tamanos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-700)), 1fr)); gap: var(--separacion-toque); }

.rejilla-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-900)), 1fr)); gap: var(--separacion-toque); }

.opcion-tamano, .opcion-color {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-2);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.15;
}

.opcion-tamano { align-items: center; justify-content: flex-end; }

.opcion-color { padding: var(--e-3); text-align: left; }

/* La opción elegida se reconoce por el borde grueso y por una marca de forma,
   no solo por el fondo (en contraste alto el fondo no cambia). */
.opcion-tamano[aria-pressed='true'], .opcion-color[aria-pressed='true'] {
  background: var(--superficie-marcada);
  border-color: var(--texto);
  border-width: var(--grosor-marca);
  outline: var(--grosor-fino) solid var(--texto);
}

/* Las cuatro «A» crecen de verdad: son la muestra del tamaño de cada opción. */
.opcion-tamano__a { font-weight: 800; line-height: 1; }
.opcion-tamano__a--1 { font-size: var(--medida-130); }
.opcion-tamano__a--2 { font-size: var(--medida-180); }
.opcion-tamano__a--3 { font-size: var(--medida-230); }
.opcion-tamano__a--4 { font-size: var(--medida-280); }

.opcion-color__muestra {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--medida-320);
  border-radius: var(--radio-boton);
  font-size: var(--t-destacado);
  font-weight: 800;
}

/* Las muestras enseñan siempre el mismo aspecto, sea cual sea el modo activo.
   Reutilizan los valores de los tres modos; por eso se fijan aquí con los
   tokens de marca y no con los que cambian. */
.opcion-color__muestra--normal { background: var(--muestra-normal-fondo); color: var(--muestra-normal-texto); border: var(--grosor-fino) solid var(--muestra-normal-borde); }
.opcion-color__muestra--contraste { background: var(--muestra-contraste-fondo); color: var(--muestra-contraste-texto); border: var(--grosor-marca) solid var(--muestra-contraste-texto); }
.opcion-color__muestra--oscuro { background: var(--muestra-oscuro-fondo); color: var(--muestra-oscuro-texto); }

@media (min-width: 1200px) {
  .panel-ajustes {
    width: var(--ancho-ventana-ajustes);
    height: auto;
    max-height: 92vh;
    margin: auto;
    border-radius: var(--radio-tarjeta-grande);
  }
}

/* --------------------------------------------------------------------
   4. Portada
   -------------------------------------------------------------------- */

.tira-avisos { padding-top: var(--e-4); display: flex; flex-direction: column; gap: var(--separacion-toque); }

.partida-a-medias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  border-radius: var(--radio-tarjeta);
}

.partida-a-medias__rotulo { color: var(--cap-atencion-texto); font-size: var(--t-nota); font-weight: 700; }

.partida-a-medias__detalle { font-size: var(--t-destacado); font-weight: 700; color: var(--texto); }

html[data-colores='contraste'] .partida-a-medias { border: var(--grosor-fino) solid var(--borde); }

.portada { padding-top: var(--e-5); }

.portada__titulo { font-size: var(--t-titulo-portada); letter-spacing: -0.01em; }

.portada__entrada { margin-top: var(--e-2); color: var(--texto-suave); font-size: var(--t-texto); }

.portada__rejilla { display: flex; flex-direction: column; gap: var(--e-6); }

/* Hasta 1199 px, los sellos van pegados a la entradilla, antes del reto, y el
   recuerdo bajo el reto, a la distancia de una sección. */
.portada__rejilla > .portada__sellos { margin-top: calc(var(--e-4) - var(--e-6)); }
.portada__rejilla > .hueco-recuerdo { margin-top: calc(var(--ritmo-seccion) - var(--e-6)); }

.portada__sellos { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); list-style: none; color: var(--principal-oscuro); font-size: var(--t-nota); font-weight: 700; }

.portada__sellos li { display: flex; align-items: center; gap: var(--e-1); }

.portada__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

/* Se oculta antes de pintar a quien ya ha jugado: ver SCRIPT_AJUSTES. */
html[data-visita='habitual'] .primera-vez--inicio { display: none; }

.primera-vez { margin-bottom: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--superficie-marcada); color: var(--principal-oscuro); border-radius: var(--radio-boton); font-weight: 700; }

/* En la portada, el saludo es una línea de texto, sin caja ni fondo (ajustes K,
   43.1): con caja parecía un botón y era lo primero que se tocaba sin respuesta.
   La flecha hacia abajo señala el reto que tiene debajo. No es un enlace. */
.primera-vez--inicio { padding: 0; background: none; border-radius: 0; }

/* Tarjeta del reto de hoy */
.tarjeta-reto {
  padding: var(--e-5) var(--e-5) var(--e-4);
  background: var(--superficie);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta-grande);
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-reto__arriba { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; color: var(--texto-tenue); font-size: var(--t-nota); }

.tarjeta-reto__titulo { margin-block: var(--e-3); font-size: var(--t-seccion); }

.reto-juegos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-reto)), 1fr)); gap: var(--separacion-toque); list-style: none; }

/* El reto se calcula en el navegador: se reserva su sitio para que la página
   no salte al aparecer. */
.reto-juegos { min-height: var(--alto-reto); }

.reto-juego { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); padding: var(--e-3) var(--e-4); border-radius: var(--radio-boton); }

html[data-colores='contraste'] .reto-juego { border: var(--grosor-fino) solid var(--borde); }

.reto-juego__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--medida-160);
  height: var(--medida-160);
  flex: none;
  border-radius: 50%;
  background: var(--boton-oscuro);
  color: var(--boton-oscuro-texto);
  font-size: var(--t-nota);
  font-weight: 800;
}

.reto-juego__nombre { color: var(--texto); font-size: var(--t-texto); font-weight: 700; line-height: 1.2; text-decoration: none; }

/* El enlace cubre toda la tarjeta, para que se pueda tocar en cualquier parte. */
.reto-juego__nombre::after { content: ''; position: absolute; inset: 0; border-radius: var(--radio-boton); }

.reto-juego__nombre:hover { color: var(--texto); text-decoration: underline; }

.reto-juego__capacidad { font-size: var(--t-nota); font-weight: 700; line-height: 1.2; }

.reto-juego__hecho { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--texto); font-size: var(--t-nota); font-weight: 700; }

.tarjeta-reto__botones { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); margin-top: var(--e-4); }

.tarjeta-reto__botones > * { flex: 1 1 var(--medida-1000); }

.tarjeta-reto__botones > .boton--principal { flex-grow: 2; }

/* «Mandar el reto a alguien» (ajustes K, 43.4): enlace de texto pequeño bajo
   «Empezar el reto», para que no compita con él. Es un botón porque abre el menú
   de compartir, pero se ve como enlace; como todo botón, su zona táctil es de
   56 px, aunque la letra sea pequeña. */
.enlace-mandar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  margin-top: var(--e-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--enlace);
  font: inherit;
  font-size: var(--t-nota);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.enlace-mandar:hover { color: var(--texto); }

/* En la portada, uno encima del otro y a todo el ancho, también en escritorio. */
[data-tarjeta-reto] .tarjeta-reto__botones { flex-direction: column; }

[data-tarjeta-reto] .tarjeta-reto__botones > * { flex: none; width: 100%; }

.tarjeta-reto__racha { margin-top: var(--e-3); text-align: center; color: var(--texto-suave); font-size: var(--t-nota); }

/* Promoción oscura (fotos y fichas) */
.promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-5);
  background: var(--panel-oscuro);
  color: var(--panel-oscuro-texto);
  border: var(--grosor-fino) solid var(--panel-oscuro-borde);
  border-radius: var(--radio-tarjeta-grande);
}

.promo h2, .promo h3 { color: var(--panel-oscuro-texto); margin-bottom: var(--e-2); }

.promo p { color: var(--panel-oscuro-suave); }

.promo__rotulo { color: var(--panel-oscuro-acento) !important; font-size: var(--t-nota); font-weight: 700; }

.promo__botones { display: flex; flex-direction: column; gap: var(--separacion-toque); flex: none; }

.promo__mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); flex: none; width: var(--medida-660); }

.promo__mosaico span { aspect-ratio: 1; border-radius: var(--radio-boton); background: var(--acento); }

.promo__mosaico span:nth-child(2), .promo__mosaico span:nth-child(3) { background: var(--principal-suave); }

.promo__texto { flex: 1 1 var(--ancho-tarjeta); min-width: 0; }

.promo__texto .boton { margin-top: var(--e-3); }

.bloque-proyecto { display: grid; gap: var(--e-5); }

@media (max-width: 599px) {
  .reto-juegos { grid-template-columns: 1fr; }
  .reto-juego { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); align-items: center; }
  .reto-juego__numero { grid-row: span 3; }
  .partida-a-medias { flex-direction: column; align-items: stretch; }
  .promo { flex-direction: column; align-items: stretch; }
  .promo__mosaico { display: none; }
  .promo .boton { display: flex; width: 100%; }
  .promo__botones { width: 100%; }
}

@media (min-width: 1200px) {
  .portada { padding-top: var(--e-6); }

  /* Con esta letra, el título de la columna izquierda cabe así en sus dos líneas. */
  html[data-texto='muy-grande'] .portada__titulo, html[data-texto='enorme'] .portada__titulo { font-size: 2.5rem; }

  .portada__rejilla { --alto-reto: 12.1rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-rows: auto auto 1fr; align-items: start; gap: var(--e-4) var(--e-8); }
  .portada__rejilla > .tarjeta-reto { grid-column: 2; grid-row: 1 / span 3; }
  .portada__rejilla > .portada__sellos { grid-column: 1; grid-row: 2; margin-top: 0; }
  .portada__rejilla > .hueco-recuerdo { grid-column: 1; grid-row: 3; margin-top: var(--e-5); }
  .portada__rejilla .reto-juego { padding-block: var(--e-2); }
  .portada__entrada { font-size: var(--t-destacado); max-width: var(--medida-3400); }
  .reto-juegos { grid-template-columns: 1fr; }
  .reto-juego { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); align-items: center; }
  .reto-juego__numero { grid-row: span 3; }
  /* Misma rejilla de 4 + 8 que las preguntas frecuentes, justo debajo. */
  .bloque-proyecto { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-6); }
}

/* --------------------------------------------------------------------
   5. Tarjetas de juego y capacidad, listados
   -------------------------------------------------------------------- */

.rejilla-juegos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); gap: var(--e-3); list-style: none; }

.tarjeta-juego {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta);
}

.tarjeta-juego:hover { border-color: var(--texto); }

/* El enlace del título cubre toda la tarjeta: se toca en cualquier parte, pero
   sigue siendo un único enlace para el teclado y los lectores de pantalla. */
.tarjeta-juego__enlace { color: var(--texto); text-decoration: none; }
.tarjeta-juego__enlace::after { content: ''; position: absolute; inset: 0; border-radius: var(--radio-tarjeta); }
.tarjeta-juego__enlace:hover { color: var(--texto); }
.tarjeta-juego__enlace:focus-visible { outline: none; box-shadow: none; }
.tarjeta-juego__enlace:focus-visible::after { outline: var(--grosor-foco) solid var(--texto); outline-offset: var(--separacion-foco); }

.tarjeta-juego__nombre { font-size: var(--t-subtitulo); }

.tarjeta-juego__frase { color: var(--texto-suave); font-size: var(--t-nota); }

.tarjeta-juego__boton { width: 100%; pointer-events: none; }

.flecha-fila { display: none; }

.distintivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  background: var(--neutro);
  color: var(--texto);
  border: var(--grosor-fino) solid var(--borde-fuerte);
  border-radius: var(--radio-chip);
  font-weight: 700;
  line-height: 1.3;
}

.distintivo__icono { width: var(--icono); height: var(--icono); flex: none; }

.distintivo--pequeno { padding: 0 var(--e-2); font-size: var(--t-nota); font-weight: 600; }

.distintivo--pequeno .distintivo__icono { width: var(--icono-pequeno); height: var(--icono-pequeno); }

/* Distintivo discreto de los listados (ajustes K, 43.2): sin barras, en gris y en
   una sola línea, con el relleno vertical que le faltaba al pequeño (el texto
   quedaba a 1 px del borde). Sigue siendo texto: el nivel no depende del color. */
.distintivo--discreto {
  padding: var(--e-1) var(--e-3);
  background: var(--neutro);
  color: var(--texto-tenue);
  border-color: var(--borde);
  font-size: var(--t-nota);
  font-weight: 600;
  white-space: nowrap;
}

.rejilla-capacidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); gap: var(--e-3); list-style: none; }

.tarjeta-capacidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  height: 100%;
  min-height: var(--toque-medio);
  padding: var(--e-3) var(--e-4);
  border: var(--grosor-fino) solid transparent;
  border-radius: var(--radio-tarjeta);
  text-decoration: none;
}

a.tarjeta-capacidad:hover { border-color: currentColor; }

.tarjeta-capacidad.cap-memoria:hover { color: var(--cap-memoria-texto); }
.tarjeta-capacidad.cap-atencion:hover { color: var(--cap-atencion-texto); }
.tarjeta-capacidad.cap-rapidez:hover { color: var(--cap-rapidez-texto); }
.tarjeta-capacidad.cap-razonamiento:hover { color: var(--cap-razonamiento-texto); }

html[data-colores='contraste'] .tarjeta-capacidad { border-color: var(--borde); }

.tarjeta-capacidad__nombre { color: var(--texto); font-size: var(--t-destacado); font-weight: 800; line-height: 1.2; }

.tarjeta-capacidad__dato { flex: none; font-size: var(--t-nota); font-weight: 700; }

.tarjeta-capacidad__frase, .tarjeta-capacidad .icono { display: none; }

.tarjetas-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); gap: var(--e-3); }

.tarjeta-extra {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta);
  text-decoration: none;
}

.tarjeta-extra:hover { border-color: var(--texto); color: var(--texto); }

.tarjeta-extra p { color: var(--texto-suave); font-size: var(--t-nota); }

/* En la portada, bajo «Para familias y centros», sus títulos bajan a h4 y
   conservan el tamaño que tenían como h3. */
.tarjeta-extra h4 { font-size: var(--t-subtitulo); }

/* Portada, ajustes K (43.5): la parte de la familia y el centro empieza con un
   encabezado claro, separado de lo de jugar por una raya. Los bloques que cuelgan
   de él llevan h3 con el tamaño de un título de sección. */
.parte-familias__cabeza { margin-top: var(--e-8); padding-top: var(--e-7); border-top: var(--grosor-boton) solid var(--borde-fuerte); }

.titulo-bloque { font-size: var(--t-seccion); }

@media (max-width: 599px) {
  /* En móvil la tarjeta se queda en dos líneas con flecha (ver Movil-Inicio). */
  .tarjeta-juego { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-2); row-gap: 0; padding: var(--e-3) var(--e-4); }
  .tarjeta-juego .chip { grid-column: 1; padding: 0; background: none; }
  .tarjeta-juego__nombre { grid-column: 1; font-size: var(--t-destacado); }
  .tarjeta-juego__frase, .tarjeta-juego__boton, .tarjeta-juego .distintivo { display: none; }
  .flecha-fila { display: block; grid-column: 2; grid-row: 1 / span 2; }
  .tarjeta-capacidad { flex-direction: column; align-items: flex-start; gap: 0; }
}

@media (min-width: 1200px) {
  .tarjeta-capacidad { flex-direction: column; align-items: flex-start; padding: var(--e-5); gap: var(--e-2); }
  .tarjeta-capacidad__frase, .tarjeta-capacidad .icono { display: block; }
  .tarjeta-capacidad__frase { color: var(--texto-suave); font-size: var(--t-nota); }
  .tarjeta-capacidad__dato { margin-top: auto; }
  .tarjetas-extra { display: none; }
}

/* Página de capacidad */
.cabecera-capacidad { padding: var(--e-5) var(--e-5); margin-top: var(--e-4); border-radius: var(--radio-tarjeta-grande); }

.cabecera-capacidad__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); color: var(--texto); }

.cabecera-capacidad p { margin-top: var(--e-2); color: var(--texto); }

.cabecera-capacidad .grupo-chips { margin-top: var(--e-3); }

html[data-colores='contraste'] .cabecera-capacidad { border: var(--grosor-fino) solid var(--borde); }

.filtros { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); margin-block: var(--e-5) var(--e-4); }

.filtro {
  min-height: var(--toque-min);
  padding: var(--e-1) var(--e-5);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-chip);
  font-size: var(--t-nota);
  font-weight: 700;
}

.filtro[aria-pressed='true'] { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-color: var(--boton-oscuro); }

.lista-filas { display: flex; flex-direction: column; gap: var(--e-3); list-style: none; }

.fila-juego {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta);
}

.fila-juego:hover { border-color: var(--texto); }

.fila-juego__dibujo { display: flex; align-items: center; justify-content: center; width: var(--medida-900); height: var(--medida-550); flex: none; border-radius: var(--radio-boton); padding: var(--e-1); }

.fila-juego__dibujo img { width: 100%; height: 100%; }

.fila-juego__texto { flex: 1; min-width: 0; }

.fila-juego__nombre { font-size: var(--t-subtitulo); }

.fila-juego__texto p { color: var(--texto-suave); font-size: var(--t-nota); }

.fila-juego__meta { color: var(--texto-tenue); font-size: var(--t-nota); }

.fila-juego__distintivo { margin-top: var(--e-1); }

.resumen-investigacion > * + * { margin-top: var(--e-3); }

.resumen-investigacion { padding: var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

@media (max-width: 599px) {
  .fila-juego { flex-wrap: wrap; }
  .fila-juego__dibujo { width: var(--medida-550); height: var(--medida-400); }
  .fila-juego__texto { flex-basis: 60%; }
  .fila-juego .boton { width: 100%; }
}

/* --------------------------------------------------------------------
   6. Evidencia científica
   -------------------------------------------------------------------- */

.bloque-evidencia > * + * { margin-top: var(--e-4); }

.bloque-evidencia__intro { font-size: var(--t-texto); }

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

.tarjeta-estudio {
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: var(--grosor-fino) solid var(--borde);
  border-radius: var(--radio-tarjeta);
}

.tarjeta-estudio__nombre { color: var(--principal-oscuro); font-size: var(--t-nota); font-weight: 700; line-height: 1.3; }

.tarjeta-estudio__resumen { margin-top: var(--e-2); font-size: var(--t-destacado); font-weight: 700; line-height: 1.35; }

.tarjeta-estudio__no-dice { margin-top: var(--e-3); color: var(--texto-suave); }

.tarjeta-estudio__tipo { margin-top: var(--e-3); color: var(--texto-tenue); font-size: var(--t-nota); }

.tarjeta-estudio__enlaces { display: flex; flex-direction: column; gap: var(--separacion-toque); margin-top: var(--e-3); }

/* Enlaces grandes y fáciles de tocar (sección 12.2). */
.enlace-estudio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--e-1);
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-4);
  background: var(--superficie);
  color: var(--enlace);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-boton);
  font-weight: 700;
}

.enlace-estudio:hover { border-color: var(--texto); }

.enlace-externo__aviso { font-weight: 400; font-size: var(--t-nota); }

.nota-honesta { padding: var(--e-4) var(--e-5); background: var(--neutro); color: var(--texto); border: var(--grosor-fino) solid transparent; border-radius: var(--radio-tarjeta); }

html[data-colores='contraste'] .nota-honesta { border-color: var(--borde); }

.lista-niveles { margin: var(--e-2) 0 0; display: flex; flex-direction: column; gap: var(--e-3); }

.lista-niveles dd { margin: var(--e-1) 0 0; }

/* --------------------------------------------------------------------
   7. Páginas informativas
   -------------------------------------------------------------------- */

.pagina-info { padding-top: var(--e-6); }

.pagina-info > h1 { margin-bottom: var(--e-3); }

.pagina-info .lectura h2 { margin-top: var(--e-7); margin-bottom: var(--e-3); }

.pagina-info .lectura p + p, .pagina-info .lectura ul:not([role]), .pagina-info .lectura ol:not([role]) { margin-top: var(--e-3); }

.pagina-info .lectura ul:not([role]), .pagina-info .lectura ol:not([role]) { padding-left: var(--e-5); }

.pagina-info .lectura li + li { margin-top: var(--e-2); }

.entradilla { color: var(--texto-suave); font-size: var(--t-destacado); }

.pagina-aviso { padding-block: var(--e-9); text-align: center; }

.pagina-aviso .portada__botones { justify-content: center; }

/* --------------------------------------------------------------------
   8. Página de juego (texto alrededor del tablero)
   -------------------------------------------------------------------- */

.juego-cabeza { padding-top: var(--e-4); display: flex; gap: var(--e-6); align-items: flex-start; justify-content: space-between; }

.juego-cabeza__texto { flex: 1; min-width: 0; }

.juego-cabeza__frase { margin-top: var(--e-1); color: var(--texto-suave); }

.juego-cabeza__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--separacion-toque); margin-top: var(--e-3); }

/* En móvil, «Ver cómo se juega» y «Escuchar» comparten fila si caben. */
@media (max-width: 599px) {
  .juego-cabeza__fila .grupo-chips { flex: 1 1 100%; }

  .juego-cabeza__fila .boton--compacto { flex: 1 1 auto; }
}

.boton--compacto { font-size: var(--t-nota); padding-inline: var(--e-4); }

/* Ajustes K (44.3): lo que trabaja el juego, en frase y no en píldoras. */
.juego-cabeza__trabaja-frase { margin-top: var(--e-2); font-weight: 600; }

/* «Ver cómo se juega» y «Escuchar cómo se juega»: enlaces con icono, juntos y
   con poco peso (ajustes K, 44.4). Son botones: zona táctil de 56 px. */
.juego-cabeza__ayudas { column-gap: var(--e-5); row-gap: 0; margin-top: var(--e-2); }

.boton-ayuda {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: 0;
  background: none;
  border: 0;
  color: var(--enlace);
  font: inherit;
  font-size: var(--t-nota);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.boton-ayuda:hover { color: var(--texto); }

.boton-ayuda[hidden] { display: none; }

.juego-cabeza__trabaja { flex: 0 0 var(--medida-2200); padding: var(--e-4) var(--e-5); border-radius: var(--radio-tarjeta); color: var(--texto); }

.juego-cabeza__trabaja h2 { color: var(--principal-oscuro); font-size: var(--t-texto); }

.juego-cabeza__trabaja p { font-size: var(--t-nota); }

/* Igual con el tablero: el texto de debajo no debe moverse al cargar el juego. */
/* La zona mide lo que mide su contenido: un alto de pantalla fijo dejaba un
   hueco enorme bajo la pantalla previa (ajustes D, sección 11). El alto completo
   solo hace falta durante la partida y, antes de pintar, para que el texto de
   debajo no asome y luego salte. Sin JavaScript, la zona no reserva nada. */
.zona-juego { margin-top: var(--e-5); }

html.con-menus .zona-juego--cargando, .zona-juego--jugando { min-height: 100vh; }

.zona-juego--jugando { margin-top: 0; }


.lista-pasos { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-3); list-style: none; counter-reset: paso; }

.lista-pasos li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; counter-increment: paso; }

.lista-pasos li::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--medida-200);
  height: var(--medida-200);
  border-radius: 50%;
  background: var(--boton-oscuro);
  color: var(--boton-oscuro-texto);
  font-weight: 800;
}

.parrafos-trabaja { margin-top: var(--e-3); }

.lista-consejos { margin-top: var(--e-3); padding-left: var(--e-5); }

.lista-consejos li + li { margin-top: var(--e-2); }

.enlace-guia { margin-top: var(--e-3); font-weight: 700; }

html[data-colores='contraste'] .otro-juego { border: var(--grosor-fino) solid var(--borde); }

@media (min-width: 1200px) {
}

/* --------------------------------------------------------------------
   9. Motor de juegos: pantalla «Antes de jugar»
   -------------------------------------------------------------------- */

.previa__titulo { margin-top: var(--e-5); margin-bottom: var(--e-2); font-size: var(--t-destacado); }

.previa__nota { margin-top: var(--e-2); color: var(--texto-suave); font-size: var(--t-nota); }

/* «Te sugerimos Fácil para empezar» al tamaño del texto normal (ajustes K, 44.4):
   es la ayuda más útil de la pantalla previa. */
.previa__sugerencia { margin-top: var(--e-2); color: var(--texto); }

/* «Más opciones», plegado (ajustes K, 44.4). El título lleva «+» y «−», como las
   preguntas frecuentes, y un margen abajo al desplazarse: la barra fija de
   «Empezar a jugar» no lo tapa nunca. */
.mas-opciones { margin-top: var(--e-5); scroll-margin-bottom: calc(var(--toque-principal) + var(--e-7)); }

.mas-opciones__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--toque-min); margin: 0; padding: var(--e-2) var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde-fuerte); border-radius: var(--radio-boton); cursor: pointer; list-style: none; }

.mas-opciones__titulo::-webkit-details-marker { display: none; }

.mas-opciones__titulo::after { content: '+'; flex: none; font-size: var(--t-subtitulo); line-height: 1; }

.mas-opciones[open] > .mas-opciones__titulo::after { content: '−'; }

.mas-opciones .lista-interruptores { margin-top: var(--e-3); }

/* Sitio bajo «Más opciones» para que, abierto o cerrado, quede por encima de
   la barra fija de «Empezar a jugar» al llegar abajo del todo. */
.previa:has(.mas-opciones) .previa__pie { margin-top: var(--e-6); }

.previa__aviso { margin-bottom: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--radio-boton); font-weight: 600; }

.previa__aviso a { color: inherit; }

.rejilla-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-800)), 1fr)); gap: var(--separacion-toque); }

.tarjeta-nivel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-2);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
}

.tarjeta-nivel[aria-pressed='true'], .tarjeta-tema[aria-pressed='true'] {
  background: var(--superficie-marcada);
  border-color: var(--texto);
  outline: var(--grosor-fino) solid var(--texto);
}

/* La marca de visto bueno indica la elección con forma, no solo con color. */
.tarjeta-nivel__marca {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--marca-acierto);
  height: var(--marca-acierto);
  border-radius: 50%;
  background: var(--boton-oscuro);
  color: var(--boton-oscuro-texto);
}

.tarjeta-nivel[aria-pressed='true'] .tarjeta-nivel__marca { display: flex; }

.tarjeta-nivel__dibujo { color: var(--principal); }

.tarjeta-nivel__nombre { font-size: var(--t-subtitulo); font-weight: 800; line-height: 1.2; }

.tarjeta-nivel__detalle { color: var(--texto-suave); font-size: var(--t-nota); }

.dibujo-rejilla { display: inline-grid; grid-template-columns: repeat(var(--col), var(--celda-dibujo)); gap: var(--hueco-dibujo); }

.dibujo-rejilla span { height: var(--celda-dibujo); border-radius: var(--radio-minimo); background: var(--principal-suave); }

.dibujo-rejilla span.encendida { background: var(--principal); }

.tarjeta-nivel[aria-pressed='true'] .dibujo-rejilla span { background: var(--principal); }

.tarjeta-nivel[aria-pressed='true'] .dibujo-rejilla:has(.encendida) span:not(.encendida) { background: var(--principal-suave); }

.dibujo-lineas { display: flex; flex-direction: column; gap: var(--hueco-dibujo); width: var(--medida-400); }

.dibujo-lineas span { height: var(--hueco-dibujo); border-radius: var(--radio-minimo); background: var(--principal); }

.dibujo-svg { width: var(--medida-400); height: var(--medida-400); }

.dibujo-serie { display: inline-flex; gap: var(--hueco-dibujo); font-weight: 800; font-size: var(--t-nota); }

.dibujo-serie span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--medida-140); min-height: var(--medida-160); border-radius: var(--radio-minimo); background: var(--superficie-marcada); color: var(--principal-oscuro); }

.dibujo-serie span.hueco { background: var(--superficie); outline: var(--grosor-boton) dashed var(--principal); }

.rejilla-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-700)), 1fr)); gap: var(--separacion-toque); }

.tarjeta-tema {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-principal);
  padding: var(--e-3) var(--e-2);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.2;
}

.tarjeta-tema img { width: var(--dibujo-tema); height: var(--dibujo-tema); }

.tarjeta-tema--fotos { border-style: dashed; border-color: var(--texto); }

.nombres-jugadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-1300)), 1fr)); gap: var(--separacion-toque); }

.nombres-jugadores label { display: flex; flex-direction: column; gap: var(--e-1); font-weight: 600; }

.campo, .nombres-jugadores input {
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-boton);
  font-weight: 600;
}

/* Barra pegada abajo: visible mientras se ve la pantalla previa y sale de la
   vista al bajar a los textos del juego. */
.previa__pie {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: var(--e-4);
  margin-inline: calc(-1 * var(--margen-lateral));
  padding: var(--e-3) var(--margen-lateral);
  background: var(--fondo);
  border-top: var(--grosor-fino) solid var(--borde);
}

@media (min-width: 1200px) {
  .previa { padding: var(--e-5) var(--e-6) 0; background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta-grande); }
  /* Solo dentro de la tarjeta: en Fotos y Taller no hay tarjeta, y con letra
     enorme este margen superaría al lateral y desbordaría la página. */
  .previa .previa__pie { margin-inline: calc(-1 * var(--e-6)); padding-inline: var(--e-6); background: var(--superficie); border-radius: 0 0 var(--radio-tarjeta-grande) var(--radio-tarjeta-grande); }
}

/* --------------------------------------------------------------------
   10. Motor de juegos: partida
   Un único HTML. En horizontal, tablero a la izquierda y panel a la
   derecha; en vertical, barra arriba, tablero y botones abajo.
   -------------------------------------------------------------------- */

body.en-partida { overflow: hidden; }

body.en-partida .cabecera, body.en-partida .migas, body.en-partida .pie, body.en-partida .juego-cabeza,
body.en-partida .juego-contenido, body.en-partida .saltar, body.en-fin .juego-cabeza { display: none; }

.partida {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'cabeza' 'barra' 'mensaje' 'marco' 'acciones';
  background: var(--fondo);
  /* Respeta las zonas seguras de los móviles con muesca. */
  padding-bottom: env(safe-area-inset-bottom);
}

.partida:focus { outline: none; box-shadow: none; }

.partida__cabeza {
  grid-area: cabeza;
  display: flex;
  align-items: center;
  gap: var(--separacion-toque);
  padding: var(--e-2) var(--margen-lateral);
  background: var(--superficie);
  border-bottom: var(--grosor-fino) solid var(--borde);
}

.partida__rotulo { flex: 1; min-width: 0; text-align: center; }

.partida__reto { color: var(--cap-atencion-texto); font-size: var(--t-nota); font-weight: 700; line-height: 1.2; }

.partida__titulo { font-size: var(--t-destacado); line-height: 1.2; }

.partida__progreso-texto { color: var(--texto-suave); }

.partida__salir-corto { padding-inline: var(--e-3); }

.partida__aa { padding-inline: var(--e-2); }

.partida__barra { grid-area: barra; height: var(--alto-barra); background: var(--neutro-fuerte); }

.partida__barra span { display: block; height: 100%; width: 0; background: var(--principal); transition: width var(--tiempo-giro); }

/* En contraste alto la barra necesita un contorno para distinguirse. */
html[data-colores='contraste'] .partida__barra { border: var(--grosor-boton) solid var(--borde); }

.partida__detalle { display: none; }

.partida__mensaje {
  grid-area: mensaje;
  margin: var(--e-2) var(--margen-lateral) 0;
  padding: var(--e-2) var(--e-4);
  min-height: var(--medida-300);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  border: var(--grosor-fino) solid transparent;
  border-radius: var(--radio-boton);
  font-weight: 700;
  line-height: 1.3;
}

html[data-colores='contraste'] .partida__mensaje { border-color: var(--borde); }

.partida__oferta:not(:empty) { margin-top: var(--e-2); }

/* El tablero cabe siempre en condiciones normales. overflow-y es la red de
   seguridad para la letra Enorme en móvil: es peor no poder alcanzar un botón
   que tener que deslizar. */
.partida__marco { grid-area: marco; position: relative; min-height: 0; padding: var(--e-3) var(--margen-lateral); overflow-y: auto; }

.partida__tablero { display: flex; flex-direction: column; gap: var(--e-2); height: 100%; min-height: 0; }

/* Pausa: oscurece el tablero y evita tocarlo. */
.partida__velo {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  background: var(--velo-pausa);
  border-radius: var(--radio-tarjeta);
}

.partida__velo-texto { color: var(--velo-pausa-texto); font-size: var(--t-seccion); font-weight: 800; }

.partida__acciones {
  grid-area: acciones;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--separacion-toque);
  padding: var(--e-2) var(--margen-lateral);
  background: var(--superficie);
  border-top: var(--grosor-fino) solid var(--borde);
}

.partida__ver-grande { grid-column: 1 / -1; }

.partida__salir-largo { display: none; }

/* Controles que solo existen en el modo grande. */
.selector-tamano, .partida__pista-grande, .partida__salir-grande { display: none; }

.selector-tamano { border: var(--grosor-boton) solid var(--texto); border-radius: var(--radio-boton); overflow: hidden; flex: none; }

.selector-tamano button { min-width: var(--toque-min); min-height: var(--toque-min); background: var(--superficie); color: var(--texto); border: 0; font-weight: 800; }

.selector-tamano button:nth-child(1) { font-size: var(--t-nota); }
.selector-tamano button:nth-child(2) { font-size: var(--t-destacado); }
.selector-tamano button:nth-child(3) { font-size: var(--t-subtitulo); }

.selector-tamano button[aria-pressed='true'] { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); }

@media (max-width: 599px) {
  /* Con letra Enorme el nombre no cabe: aquí la letra se limita al ancho de
     la pantalla, para que no se parta a mitad de palabra. */
  .partida__titulo { font-size: min(var(--t-nota), 5vw); overflow-wrap: normal; }
  .partida__ver-grande { grid-column: auto; }
  .partida__acciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partida__acciones .boton { padding-inline: var(--e-1); font-size: var(--t-nota); }
  .partida__acciones .icono--pequeno { display: none; }
}

/* Horizontal: tablero a la izquierda, panel a la derecha (Tablet-Juego). */
@media (min-aspect-ratio: 5/4) {
  .partida {
    grid-template-columns: minmax(0, 1fr) min(var(--medida-1900), 36vw);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: 'marco cabeza' 'marco mensaje' 'marco acciones';
    padding: var(--e-4);
    column-gap: var(--e-4);
    row-gap: var(--e-3);
  }

  .partida__marco { padding: var(--e-3); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta-grande); }

  /* La cabeza se convierte en la tarjeta de progreso del panel. */
  .partida__cabeza { flex-wrap: wrap; justify-content: space-between; padding: var(--e-3) var(--e-4) var(--e-8); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

  .partida__rotulo { flex: 1 1 0; text-align: left; }

  .partida__cabeza { flex-wrap: nowrap; }

  .partida__titulo { font-size: var(--t-subtitulo); font-weight: 800; }

  .partida__progreso-texto { display: none; }

  .partida__salir-corto { display: none; }

  /* La barra y el detalle se superponen en la parte baja de esa tarjeta. */
  .partida__barra { grid-area: cabeza; align-self: end; height: var(--alto-barra); margin: 0 var(--e-4) var(--e-7); border-radius: var(--radio-chip); overflow: hidden; }

  .partida__detalle { display: block; grid-area: cabeza; align-self: end; margin: 0 var(--e-4) var(--e-2); color: var(--texto-suave); font-size: var(--t-nota); }

  .partida__mensaje { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--radio-tarjeta); }

  .partida__acciones { display: flex; flex-direction: column; justify-content: flex-end; padding: 0; background: none; border: 0; overflow-y: auto; }

  .partida__acciones .boton { flex: none; padding-inline: var(--e-3); }

  .partida__acciones .boton:not(.boton--enlace) { min-height: var(--toque-medio); }

  .partida__salir-largo { display: inline-flex; }

  /* Con letra grande los botones vuelven a su alto mínimo: así caben todos en
     el panel y «Dame una pista» no queda tapado. */
  html[data-texto='muy-grande'] .partida__acciones .boton:not(.boton--enlace),
  html[data-texto='enorme'] .partida__acciones .boton:not(.boton--enlace) { min-height: var(--toque-min); }

  html[data-texto='muy-grande'] .partida__acciones, html[data-texto='enorme'] .partida__acciones { gap: var(--e-1); }

  html[data-texto='enorme'] .partida__titulo { font-size: var(--t-destacado); }
}

/* Modo grande: solo progreso, selector de tamaño, Pista y Salir (Juego-Grande). */
.partida.es-grande {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: 'cabeza' 'mensaje' 'marco';
  padding: 0;
  gap: 0;
}

.partida.es-grande .partida__acciones, .partida.es-grande .partida__barra, .partida.es-grande .partida__detalle,
.partida.es-grande .partida__salir-corto, .partida.es-grande .partida__aa { display: none; }

.partida.es-grande .partida__cabeza { flex-wrap: wrap; padding: var(--e-2) var(--margen-lateral); border-width: 0 0 var(--grosor-fino); border-radius: 0; }

.partida.es-grande .partida__rotulo { flex: 1 1 var(--medida-1000); text-align: left; }

.partida.es-grande .partida__titulo { font-size: var(--t-subtitulo); font-weight: 400; }

.partida.es-grande .partida__progreso-texto { display: inline; }

.partida.es-grande .selector-tamano { display: flex; }

.partida.es-grande .partida__pista-grande, .partida.es-grande .partida__salir-grande { display: inline-flex; }

.partida.es-grande .partida__mensaje { margin: var(--e-2) var(--margen-lateral) 0; padding: var(--e-2) var(--e-4); border-radius: var(--radio-boton); }

.partida.es-grande .partida__marco { padding: var(--e-2) var(--margen-lateral); background: none; border: 0; border-radius: 0; }

/* Escala que elige el selector de tres «A». */
.partida[data-escala='1'] { --escala-carta: 0.8; }
.partida[data-escala='2'] { --escala-carta: 1; }
.partida[data-escala='3'] { --escala-carta: 1.25; }

/* Único caso en que el tablero puede desplazarse: Difícil en modo grande (9.3). */
.partida.es-grande[data-nivel='dificil'] .partida__marco { overflow-y: auto; }
.partida.es-grande[data-nivel='dificil'] .partida__tablero { height: auto; }

/* --------------------------------------------------------------------
   11. Parejas
   -------------------------------------------------------------------- */

.tablero-parejas {
  --columnas: 4;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  grid-template-rows: repeat(var(--filas), minmax(0, 1fr));
  gap: var(--hueco-cartas);
}

.tablero-parejas[data-cartas='8'] { --filas: 2; }
.tablero-parejas[data-cartas='12'] { --filas: 3; }
.tablero-parejas[data-cartas='16'] { --filas: 4; }

/* En vertical, nunca filas incompletas (corrección 2.5 del pliego de la fase 2):
   8 cartas en 2 × 4, 12 en 3 × 4 y 16 en 4 × 4. */
@media (orientation: portrait) {
  .tablero-parejas[data-cartas='8'] { --columnas: 2; --filas: 4; }
  .tablero-parejas[data-cartas='12'] { --columnas: 3; --filas: 4; }
  .tablero-parejas[data-cartas='16'] { --columnas: 4; --filas: 4; }
}

/* Móvil horizontal: poca altura, así que las cartas van en menos filas. */
@media (max-height: 500px) and (orientation: landscape) {
  .tablero-parejas[data-cartas='12'] { --columnas: 6; --filas: 2; }
  .tablero-parejas[data-cartas='16'] { --columnas: 8; --filas: 2; }
}

/* Difícil en grande: menos cartas por fila y las filas ya no se comprimen. */
.es-grande[data-nivel='dificil'] .tablero-parejas {
  --columnas: 3;
  --filas: 6;
  grid-template-rows: repeat(6, var(--alto-carta-grande));
}

.carta {
  /* Cada carta es un contenedor: dibujo y palabra se miden sobre su tamaño, de
     modo que siempre caben, sea cual sea el número de cartas y la pantalla. */
  container-type: size;
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radio-carta);
  color: var(--texto);
  cursor: pointer;
  perspective: 900px;
}

.carta__giro {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform var(--tiempo-giro);
}

.carta--vuelta .carta__giro { transform: rotateY(180deg); }

.carta__dorso, .carta__cara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-carta);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.carta__dorso { background: var(--principal); color: var(--principal-texto); }

.carta__motivo { width: 18cqmin; height: 18cqmin; opacity: 0.4; }

.carta__numero { font-size: 55cqmin; font-weight: 800; line-height: 1; }

.carta__cara {
  flex-direction: column;
  gap: 3cqh;
  padding: 4cqmin;
  background: var(--superficie);
  border: var(--grosor-marca) solid var(--texto);
  box-shadow: var(--sombra-carta);
  transform: rotateY(180deg);
}

.carta__imagen { flex: 0 1 auto; width: auto; height: calc(58cqh * var(--escala-carta, 1)); max-width: 88cqw; max-height: 66cqh; min-height: 0; }

.carta__palabra {
  font-size: calc(min(16cqw, 17cqh) * var(--escala-carta, 1));
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Fotos propias: la imagen llena la carta y el nombre va en una banda debajo. */
.carta__cara--foto { padding: 0; gap: 0; overflow: hidden; }

/* «contain» y no «cover»: en una carta estrecha, recortar cortaría las caras. */
.carta__cara--foto .carta__imagen { flex: 1; width: 100%; height: 0; max-width: none; max-height: none; object-fit: contain; background: var(--neutro-fuerte); }

.carta__cara--foto .carta__palabra { padding: 1.5cqh 3cqw; font-size: calc(min(12cqw, 13cqh) * var(--escala-carta, 1)); }

.carta__marca {
  position: absolute;
  top: 3cqmin;
  right: 3cqmin;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--marca-acierto);
  height: var(--marca-acierto);
  border-radius: 50%;
  background: var(--principal);
  color: var(--principal-texto);
}

.carta--acertada { cursor: default; }

.carta--acertada .carta__cara { background: var(--superficie-marcada); border-color: var(--principal); box-shadow: none; }

.carta--acertada .carta__marca { display: flex; }

/* Pista: anillo grueso, sin parpadeos (sección 19). */
.carta--pista .carta__dorso, .carta--pista .carta__cara { outline: var(--grosor-pista) solid var(--acento); outline-offset: var(--separacion-foco); }

/* Turnos de dos jugadores: nombre, color y borde grueso. */
.turno { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); }

.turno__jugador { flex: 1 1 var(--medida-800); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); padding: var(--e-1) var(--e-3); background: var(--equipo-azul-fondo); color: var(--equipo-azul-texto); border: var(--grosor-boton) solid transparent; border-radius: var(--radio-boton); }

.turno__jugador:nth-child(2) { background: var(--equipo-naranja-fondo); color: var(--equipo-naranja-texto); }

.turno__jugador--activo { border-width: var(--grosor-pista); border-color: var(--equipo-azul-borde); }

.turno__jugador:nth-child(2).turno__jugador--activo { border-color: var(--equipo-naranja-borde); }

.turno__etiqueta { padding: 0 var(--e-2); background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-radius: var(--radio-chip); font-size: var(--t-nota); font-weight: 700; }

/* Cartas ganadas por cada jugador: mismo color que su etiqueta de turno. */
.carta--acertada[data-equipo='0'] .carta__cara { background: var(--equipo-azul-fondo); border-color: var(--equipo-azul-borde); }
.carta--acertada[data-equipo='1'] .carta__cara { background: var(--equipo-naranja-fondo); border-color: var(--equipo-naranja-borde); }
.carta--acertada[data-equipo='2'] .carta__cara { background: var(--equipo-verde-fondo); border-color: var(--equipo-verde-borde); }
.carta--acertada[data-equipo='3'] .carta__cara { background: var(--equipo-morado-fondo); border-color: var(--equipo-morado-borde); }

/* --------------------------------------------------------------------
   12. Motor de juegos: fin de partida
   -------------------------------------------------------------------- */

.fin { max-width: var(--ancho-fin-partida); margin-inline: auto; display: flex; flex-direction: column; gap: var(--e-5); }

.fin__tarjeta { padding: var(--e-6) var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta-grande); box-shadow: var(--sombra-tarjeta); text-align: center; }

.fin__marca { display: inline-flex; align-items: center; justify-content: center; width: var(--medida-400); height: var(--medida-400); border-radius: 50%; background: var(--superficie-marcada); color: var(--principal); }

.fin__titulo { margin-top: var(--e-3); font-size: var(--t-titulo-grande); }

.fin__titulo:focus { outline: none; box-shadow: none; }

.fin__frase { margin-top: var(--e-2); color: var(--texto-suave); font-size: var(--t-destacado); }

.fin__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-1000)), 1fr)); gap: var(--e-3); margin-top: var(--e-5); text-align: left; }

.fin-dato { padding: var(--e-3) var(--e-4); background: var(--fondo); border: var(--grosor-fino) solid transparent; border-radius: var(--radio-tarjeta); }

html[data-colores='contraste'] .fin-dato { border-color: var(--borde); }

.fin-dato--aviso { background: var(--aviso-fondo); }

.fin-dato__etiqueta { color: var(--texto-suave); font-size: var(--t-nota); }

.fin-dato--aviso .fin-dato__etiqueta, .fin-dato--aviso .fin-dato__nota { color: var(--cap-atencion-texto); }

.fin-dato__valor { font-size: var(--t-seccion); font-weight: 800; line-height: 1.2; }

.fin-dato__nota { color: var(--principal-oscuro); font-size: var(--t-nota); font-weight: 700; }

.fin-reto { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); margin-top: var(--e-5); padding: var(--e-4); background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--radio-tarjeta); }

.fin__trabajado { margin-top: var(--e-5); padding: var(--e-4) var(--e-5); background: var(--superficie-marcada); border: var(--grosor-fino) solid transparent; border-radius: var(--radio-tarjeta); text-align: left; }

html[data-colores='contraste'] .fin__trabajado { border-color: var(--borde); }

.fin__trabajado h3 { margin-bottom: var(--e-2); }

.fin__trabajado p + p { margin-top: var(--e-2); }

.fin__porque { margin-top: var(--e-3); color: var(--texto-suave); }

.fin__botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--separacion-toque); margin-top: var(--e-5); }

.fin__gusto { margin-top: var(--e-5); padding-top: var(--e-4); border-top: var(--grosor-fino) solid var(--borde); }

.fin__caras { display: flex; justify-content: center; gap: var(--separacion-toque); margin-top: var(--e-2); }

.boton-cara { display: flex; align-items: center; justify-content: center; width: var(--toque-principal); height: var(--toque-principal); background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: 50%; }

.boton-cara[aria-pressed='true'] { background: var(--superficie-marcada); border-color: var(--texto); border-width: var(--grosor-marca); }

.boton-cara .icono--grande { width: var(--medida-240); height: var(--medida-240); }

/* Ajustes K (44.2): el dato del juego, dicho como frase bajo la principal. */
.fin__resultado { margin-top: var(--e-2); font-size: var(--t-destacado); font-weight: 700; }

.fin__comparacion { color: var(--texto-suave); font-weight: 600; }

/* Debajo de las tres salidas y más discreto: la semana, «¿Te ha gustado?» y la
   sugerencia de otro juego, en letra de nota y sin caja propia. */
.fin__extra { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); margin-top: var(--e-5); padding-top: var(--e-4); border-top: var(--grosor-fino) solid var(--borde); color: var(--texto-suave); font-size: var(--t-nota); }

.fin__extra .fin__gusto { margin: 0; padding: 0; border: 0; }

.fin__extra .boton-cara { width: var(--toque-min); height: var(--toque-min); }

.fin__extra .boton-cara .icono--grande { width: var(--medida-200); height: var(--medida-200); }

.fin__sugerencia { margin: 0; }

/* --------------------------------------------------------------------
   13. Vistazo rápido
   -------------------------------------------------------------------- */

.vistazo {
  /* El tablero se mide a sí mismo: objeto y señal escalan con el espacio libre
     (sección 10.1), también en modo grande. */
  container-type: size;
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
}

.vistazo__fijacion { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); }

.vistazo__punto { width: var(--medida-120); height: var(--medida-120); border-radius: 50%; background: var(--texto); }

.vistazo__mira { font-size: var(--t-subtitulo); font-weight: 700; }

.vistazo__siguiente { flex: none; width: min(100%, var(--medida-2200)); }

/* Lienzo cuadrado: así las 8 posiciones están a la misma distancia real. */
.vistazo__escena { position: relative; flex: 1 1 0; min-height: 0; aspect-ratio: 1; max-width: 100%; }

.vistazo__objeto { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); }

.vistazo__figura { position: absolute; width: 13%; height: 13%; transform: translate(-50%, -50%); }

.vistazo__figura--senal { color: var(--vistazo-senal); }

.vistazo__figura--distractor { color: var(--vistazo-distractor); }

/* Máscara estática: bloques de color sin animación, sin parpadeo. */
.vistazo__mascara {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: 1;
  max-width: 100%;
  background-color: var(--vistazo-mascara-4);
  background-image:
    conic-gradient(var(--vistazo-mascara-1) 25%, transparent 0 50%, var(--vistazo-mascara-2) 0 75%, transparent 0),
    conic-gradient(transparent 25%, var(--vistazo-mascara-3) 0 50%, transparent 0 75%, var(--vistazo-mascara-1) 0);
  background-size: 11% 11%, 17% 17%;
  border-radius: var(--radio-tarjeta);
}

.vistazo__pregunta { flex: none; font-size: var(--t-subtitulo); font-weight: 800; text-align: center; }

.vistazo__respuestas { flex: 1 1 0; min-height: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-1200)), 1fr)); gap: var(--e-3); }

.vistazo__opcion {
  min-height: var(--toque-principal);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-2);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  font-size: var(--t-subtitulo);
  font-weight: 800;
  overflow: hidden;
}

.vistazo__opcion:hover { border-color: var(--texto); }

.vistazo__opcion img { flex: 1 1 0; min-height: 0; width: 100%; max-width: var(--medida-1200); }

.vistazo__corona { flex: 1 1 0; min-height: 0; aspect-ratio: 1; max-width: 100%; display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); gap: var(--separacion-toque); }

.vistazo__lugar {
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18%;
  background: var(--superficie);
  color: var(--vistazo-senal);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
}

.vistazo__lugar:hover { border-color: var(--texto); }

.vistazo__lugar[disabled] { background: var(--neutro); color: var(--borde-fuerte); border-style: dashed; cursor: default; }

.vistazo__centro { display: flex; align-items: center; justify-content: center; }

.vistazo__centro::before { content: ''; width: var(--medida-100); height: var(--medida-100); border-radius: 50%; background: var(--texto); }

/* --------------------------------------------------------------------
   14. Encuentra la serie
   -------------------------------------------------------------------- */

.serie { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); }

.serie__fila { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--separacion-toque); list-style: none; }

.serie__celda {
  flex: 0 1 auto;
  min-width: var(--toque-principal);
  min-height: var(--toque-principal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  border: var(--grosor-boton) solid var(--borde);
  border-radius: var(--radio-boton);
}

.serie__celda--hueco { border: var(--grosor-marca) dashed var(--texto); }

.serie__celda--resuelta { background: var(--superficie-marcada); border: var(--grosor-marca) solid var(--principal); }

.serie__texto { font-size: var(--t-subtitulo); font-weight: 800; line-height: 1.1; }

.serie__nombre { font-size: var(--t-nota); font-weight: 600; line-height: 1.1; }

.serie__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--separacion-toque); }

.serie__opcion {
  min-height: var(--toque-principal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  padding: var(--e-2);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
}

.serie__opcion:hover:not([disabled]) { border-color: var(--texto); }

.serie__explicacion { padding: var(--e-2) var(--e-4); background: var(--neutro); border-radius: var(--radio-boton); font-weight: 600; text-align: center; line-height: 1.3; }

.serie__seguir { align-self: center; width: min(100%, var(--medida-2200)); }

.figura { fill: currentColor; width: var(--medida-220); height: var(--medida-220); }

.figura--rojo { color: var(--figura-rojo); }
.figura--azul { color: var(--figura-azul); }
.figura--verde { color: var(--figura-verde); }
.figura--amarillo { color: var(--figura-amarillo); }

.figura--t1 { width: var(--medida-110); height: var(--medida-110); }
.figura--t2 { width: var(--medida-180); height: var(--medida-180); }
.figura--t3 { width: var(--medida-250); height: var(--medida-250); }
.figura--t4 { width: var(--medida-320); height: var(--medida-320); }

@media (min-width: 600px) {
  .serie { gap: var(--e-5); }
  .serie__celda { min-width: var(--medida-500); min-height: var(--medida-500); }
  .serie__texto { font-size: var(--t-seccion); }
  .serie__opcion { min-height: var(--medida-600); }
  .serie__opcion .serie__texto { font-size: var(--t-titulo-grande); }
  .figura--t2 { width: var(--medida-260); height: var(--medida-260); }
  .figura--t3 { width: var(--medida-340); height: var(--medida-340); }
  .figura--t4 { width: var(--medida-420); height: var(--medida-420); }
}

/* Con letra muy grande estas medidas ya se multiplican por el factor de letra:
   se vuelve a los mínimos para que la serie quepa sin deslizar. */
html[data-texto='muy-grande'] .serie__celda, html[data-texto='enorme'] .serie__celda { min-width: var(--toque-principal); min-height: var(--toque-principal); padding: var(--e-1) var(--e-2); }

html[data-texto='muy-grande'] .serie__opcion, html[data-texto='enorme'] .serie__opcion { min-height: var(--toque-principal); padding: var(--e-1); }

html[data-texto='muy-grande'] .serie__opcion .serie__texto, html[data-texto='enorme'] .serie__opcion .serie__texto { font-size: var(--t-subtitulo); }

html[data-texto='muy-grande'] .serie, html[data-texto='enorme'] .serie { gap: var(--e-2); }

/* --------------------------------------------------------------------
   15. Recuerda la lista
   -------------------------------------------------------------------- */

.lista { flex: 1 0 auto; max-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); }

/* Solo la cuadrícula de recordar y la de figuras reparten el alto disponible. */
.lista--recordar, .lista:has(.lista__figuras) { flex: 1; min-height: 0; }

.lista > .boton { flex: none; align-self: center; width: min(100%, var(--medida-2400)); }

.lista__tarjeta { padding: var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.lista__tarjeta > * + * { margin-top: var(--e-2); }

.lista__rotulo { color: var(--principal-oscuro); font-size: var(--t-nota); font-weight: 700; }

.lista__titulo { font-size: var(--t-seccion); }

.lista__ejemplo { color: var(--texto-suave); }

.lista__palabras { flex: 0 1 auto; align-self: center; width: min(100%, var(--medida-2400)); display: flex; flex-direction: column; gap: var(--e-1); list-style: none; }

.lista__resultados {
  flex: 0 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-1200)), 1fr));
  align-content: center;
  gap: var(--e-1) var(--e-3);
  list-style: none;
}

.lista__palabras li { padding: var(--e-1) var(--e-3); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); font-size: var(--t-subtitulo); font-weight: 800; text-align: center; line-height: 1.2; }

/* La lista de 12 palabras reduce un poco la letra para caber sin desplazarse. */
.lista__palabras[data-cuantas='12'] li { padding-block: 0; font-size: var(--t-destacado); }

.lista__consigna { font-size: var(--t-subtitulo); font-weight: 800; text-align: center; }

.lista__figuras { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(var(--toque-min), 1fr); gap: var(--separacion-toque); }

.lista__figura { display: flex; align-items: center; justify-content: center; min-height: var(--toque-min); background: var(--superficie); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-boton); color: var(--texto); }

.lista__figura span { display: block; width: var(--medida-240); height: var(--medida-240); background: currentColor; }

.lista__figura--circulo span { border-radius: 50%; }

.lista__figura--rombo span { transform: rotate(45deg) scale(0.8); }

.lista__figura--tocada { background: var(--superficie-marcada); border-color: var(--principal); }

.lista__figura--tocada span { background: var(--principal); }

.lista__tiempo { height: var(--alto-barra); background: var(--neutro-fuerte); border-radius: var(--radio-chip); overflow: hidden; }

.lista__tiempo span { display: block; height: 100%; background: var(--principal); }

.lista--recordar { gap: var(--e-2); }

.lista__cuadricula { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--columnas-lista), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--e-2); }

.lista__cuadricula[data-cuantas='10'] { --columnas-lista: 2; }
.lista__cuadricula[data-cuantas='16'] { --columnas-lista: 4; }
.lista__cuadricula[data-cuantas='24'] { --columnas-lista: 4; }

.lista__palabra {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  padding: var(--e-1);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-boton);
  font-weight: 700;
  line-height: 1.1;
}

.lista__palabra[aria-pressed='true'] { background: var(--superficie-marcada); border: var(--grosor-marca) solid var(--texto); }

.lista__marca { display: none; flex: none; }

.lista__palabra[aria-pressed='true'] .lista__marca { display: inline-flex; }

.lista__palabra--pista { outline: var(--grosor-pista) solid var(--acento); }

.lista__resultado { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-1) var(--e-3); background: var(--neutro); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); font-weight: 700; line-height: 1.2; }

.lista__resultado--bien { background: var(--superficie-marcada); border-color: var(--principal); }

.lista__estado { flex: none; color: var(--texto-suave); font-size: var(--t-nota); font-weight: 600; }

/* Móvil vertical: 3 columnas como máximo y filas iguales. */
@media (max-width: 599px) {
  .lista__cuadricula[data-cuantas='16'], .lista__cuadricula[data-cuantas='24'] { --columnas-lista: 3; }
  .lista__palabra { font-size: var(--t-nota); }
  .lista__marca { position: absolute; top: 0; right: 0; }
}

/* --------------------------------------------------------------------
   16. Secuencia
   -------------------------------------------------------------------- */

.secuencia {
  flex: 1 1 0;
  min-height: 0;
  align-self: center;
  aspect-ratio: 1;
  max-width: 100%;
  display: grid;
  grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  gap: var(--hueco-cartas);
}

.casilla {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18%;
  background: var(--casilla-fondo);
  color: var(--casilla-texto);
  border: var(--grosor-marca) solid var(--casilla-fondo);
  border-radius: var(--radio-carta);
  cursor: default;
  transition: background-color var(--tiempo-suave);
}

.secuencia[data-turno='si'] .casilla { cursor: pointer; }

.casilla--1 { --casilla-fondo: var(--casilla-1); }
.casilla--2 { --casilla-fondo: var(--casilla-2); }
.casilla--3 { --casilla-fondo: var(--casilla-3); }
.casilla--4 { --casilla-fondo: var(--casilla-4); }
.casilla--5 { --casilla-fondo: var(--casilla-5); }
.casilla--6 { --casilla-fondo: var(--casilla-6); }
.casilla--7 { --casilla-fondo: var(--casilla-7); }
.casilla--8 { --casilla-fondo: var(--casilla-8); }
.casilla--9 { --casilla-fondo: var(--casilla-9); }

/* Encendida: el fondo se invierte y el borde engorda; se nota sin ver colores. */
.casilla--encendida, .casilla--tocada { background: var(--casilla-encendida); color: var(--casilla-encendida-texto); border-width: var(--grosor-pista); border-color: var(--casilla-encendida-texto); }

/* --------------------------------------------------------------------
   17. Parejas con tus fotos
   -------------------------------------------------------------------- */

.pagina-fotos { padding-top: var(--e-5); }

.pasos-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-900)), 1fr)); gap: var(--separacion-toque); margin-block: var(--e-5); list-style: none; }

.paso-fotos { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); font-size: var(--t-nota); font-weight: 700; }

.paso-fotos span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--medida-160); height: var(--medida-160); border-radius: 50%; background: var(--neutro-fuerte); color: var(--texto); }

.paso-fotos--activo { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-color: var(--boton-oscuro); }

.paso-fotos--activo span { background: var(--acento); color: var(--acento-texto); }

.rejilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-1100)), 1fr)); gap: var(--e-3); }

.foto__marco { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radio-carta); overflow: hidden; background: var(--neutro-fuerte); }

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

.foto__quitar { position: absolute; top: var(--e-1); right: var(--e-1); display: flex; align-items: center; justify-content: center; width: var(--toque-min); height: var(--toque-min); background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--texto); border-radius: 50%; }

.foto__nombre { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-2); color: var(--texto-suave); font-size: var(--t-nota); font-weight: 700; }

.foto__nombre .campo { width: 100%; color: var(--texto); }

.foto__anadir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); width: 100%; aspect-ratio: 16 / 11; min-height: var(--toque-principal); background: var(--superficie); color: var(--texto); border: var(--grosor-marca) dashed var(--texto); border-radius: var(--radio-carta); font-weight: 700; }

.fotos__recuento { margin-top: var(--e-4); }

.bloque-candado { display: flex; align-items: center; gap: var(--e-4); margin-block: var(--e-4); padding: var(--e-4) var(--e-5); background: var(--superficie-marcada); color: var(--texto); border: var(--grosor-fino) solid transparent; border-radius: var(--radio-tarjeta); }

html[data-colores='contraste'] .bloque-candado { border-color: var(--borde); }

.bloque-candado .icono { color: var(--principal-oscuro); }

/* --------------------------------------------------------------------
   18. Modo taller
   Para ver desde varios metros: letra mínima de 28 px en toda la pantalla.
   -------------------------------------------------------------------- */

.lista-atajos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); list-style: none; }

kbd { display: inline-block; padding: 0 var(--e-2); background: var(--superficie); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-pequeno); font-family: inherit; font-weight: 700; }

body.en-taller { overflow: hidden; }

body.en-taller .cabecera, body.en-taller .pie, body.en-taller .saltar { display: none; }

.taller { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--fondo); color: var(--texto); font-size: var(--t-taller); line-height: 1.2; }

.taller:fullscreen { background: var(--fondo); }

.taller__partida { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.taller__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); padding: var(--e-2) var(--margen-lateral); background: var(--superficie); border-bottom: var(--grosor-fino) solid var(--borde); }

.taller__titulo { font-size: var(--t-taller); color: var(--texto-suave); }

.taller__titulo strong { color: var(--texto); }

.marcador { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); }

.marcador__equipo { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-4); border: var(--grosor-pista) solid transparent; border-radius: var(--radio-tarjeta); font-weight: 800; }

.marcador__equipo--azul { background: var(--equipo-azul-fondo); color: var(--equipo-azul-texto); }
.marcador__equipo--naranja { background: var(--equipo-naranja-fondo); color: var(--equipo-naranja-texto); }
.marcador__equipo--verde { background: var(--equipo-verde-fondo); color: var(--equipo-verde-texto); }
.marcador__equipo--morado { background: var(--equipo-morado-fondo); color: var(--equipo-morado-texto); }

/* El turno se reconoce por el borde grueso y por la etiqueta, no solo el color. */
.marcador__equipo--turno.marcador__equipo--azul { border-color: var(--equipo-azul-borde); }
.marcador__equipo--turno.marcador__equipo--naranja { border-color: var(--equipo-naranja-borde); }
.marcador__equipo--turno.marcador__equipo--verde { border-color: var(--equipo-verde-borde); }
.marcador__equipo--turno.marcador__equipo--morado { border-color: var(--equipo-morado-borde); }

.marcador__puntos { font-size: var(--t-taller-puntos); line-height: 1; }

.marcador__toca { padding: 0 var(--e-3); background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-radius: var(--radio-chip); font-size: var(--t-taller); }

.taller__tablero { position: relative; flex: 1; min-height: 0; padding: var(--e-3) var(--margen-lateral); }

.taller__cartas { display: flex; height: 100%; }

.taller__velo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--velo-pausa); color: var(--velo-pausa-texto); font-size: var(--t-taller-puntos); font-weight: 800; }

/* Cartas apaisadas: dibujo y palabra uno al lado del otro (ver Taller). */
.taller .carta__cara { flex-direction: row; gap: 5cqw; }

.taller .carta__imagen { height: 70cqh; max-height: 70cqh; max-width: 40cqw; }

.taller .carta__palabra { font-size: max(var(--t-taller), min(11cqw, 24cqh)); }

.taller .carta__marca { display: none; }

.taller__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding: var(--e-2) var(--margen-lateral); background: var(--panel-oscuro); color: var(--panel-oscuro-texto); border-top: var(--grosor-fino) solid var(--panel-oscuro-borde); }

.taller__mensaje { flex: 1 1 var(--medida-2000); font-weight: 700; }

.taller__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--separacion-toque); }

.taller .boton { font-size: var(--t-taller); min-height: var(--toque-medio); }

.taller__resultado { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-6); text-align: center; }

.taller__resultado h2 { font-size: var(--t-taller-puntos); }

.marcador--final { justify-content: center; }

/* --------------------------------------------------------------------
   19. Fichas para imprimir
   Las hojas se ven en pantalla como una página A4 a escala. El tamaño va
   referido al ancho de la hoja (cqw) para que la vista previa sea fiel.
   imprimir.css convierte luego estas medidas a papel real.
   -------------------------------------------------------------------- */

[data-controles-fichas] { min-height: var(--alto-controles-fichas); }

.hojas { min-height: 100vh; }

.fichas__grupo .filtros { margin-block: 0; }

.fichas__acciones { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); margin-top: var(--e-5); }

.hojas { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: var(--e-5); margin-top: var(--e-5); }

.hoja {
  width: 100%;
  max-width: var(--ancho-hoja);
  aspect-ratio: 210 / 297;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 7cqw;
  background: var(--hoja-fondo);
  color: var(--hoja-texto);
  border: var(--grosor-fino) solid var(--borde-fuerte);
  border-radius: var(--radio-pequeno);
  box-shadow: var(--sombra-tarjeta);
  /* 16 pt sobre una hoja de 210 mm son un 2,7 % de su ancho. */
  font-size: min(2.7cqw, var(--letra-hoja));
  line-height: 1.3;
  overflow: hidden;
}

/* Las listas de la hoja no deben heredar los márgenes de las páginas de texto. */
.hoja ul, .hoja ol { margin: 0; padding: 0; }

.hoja li + li { margin-top: 0; }

.hoja__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; border-bottom: 0.1em solid currentColor; padding-bottom: 0.3em; }

.hoja__titulo { color: inherit; font-size: 1.5em; }

.hoja__detalle { flex: none; }

.hoja__instrucciones { font-weight: 600; }

/* En columna: lo que se escribe a mano puede estirarse hasta llenar la hoja. */
.hoja__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.hoja__pie { text-align: center; }

.papel-series { display: flex; flex-direction: column; gap: 0.6em; list-style: none; }

.papel-serie { display: flex; align-items: center; gap: 0.5em; }

.papel-serie__numero { flex: none; width: 1.6em; font-weight: 700; }

.papel-serie__fila { display: flex; flex-wrap: wrap; gap: 0.3em; }

.papel-serie__celda { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.6em; min-height: 2.4em; padding: 0 0.3em; border: 0.05em solid currentColor; border-radius: 0.2em; font-weight: 700; }

.papel-serie__celda small { font-size: 1em; font-weight: 400; line-height: 1; }

.papel-serie__celda--hueco { min-width: 4em; border-width: 0.12em; }

.hoja .figura { width: 1.4em; height: 1.4em; }

.hoja .figura--t1 { width: 0.8em; height: 0.8em; }
.hoja .figura--t2 { width: 1.2em; height: 1.2em; }
.hoja .figura--t3 { width: 1.6em; height: 1.6em; }
.hoja .figura--t4 { width: 2em; height: 2em; }

.papel-soluciones { display: flex; flex-direction: column; gap: 0.5em; list-style: none; }

.papel-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2em 1em; list-style: none; font-weight: 700; }

.papel-doblar { margin-block: 0.8em; padding-block: 0.4em; border-top: 0.08em dashed currentColor; }

.papel-recuerdo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3em 1em; list-style: none; }

.papel-recuerdo li { display: flex; align-items: center; gap: 0.4em; }

.papel-casilla { flex: none; width: 1em; height: 1em; border: 0.08em solid currentColor; }

.papel-animo { margin-top: 1em; }

.papel-cartas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; height: 100%; max-height: 85%; }

.papel-carta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; min-height: 0; padding: 0.3em; border: 0.05em dashed currentColor; text-align: center; font-weight: 700; line-height: 1.05; overflow: hidden; }

.papel-carta img { flex: 0 1 auto; min-height: 0; width: 72%; max-height: 62%; }

.papel-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em 1em; list-style: none; }

.papel-par { display: flex; align-items: center; gap: 0.4em; }

.papel-par__numero { font-weight: 700; }

.papel-cuadricula { display: inline-grid; grid-template-columns: repeat(3, 1.8em); grid-auto-rows: 1.8em; border: 0.08em solid currentColor; }

.papel-cuadricula span { display: flex; align-items: center; justify-content: center; border: 0.04em solid currentColor; font-weight: 700; }

/* --------------------------------------------------------------------
   20. Fase 2 · Cabecera, pie y banda de página
   -------------------------------------------------------------------- */

.nav-principal__enlace span { min-width: 0; }

/* Quinto botón (Familias): en móvil ocupa la fila entera para no dejar un hueco. */
@media (max-width: 599px) {
  .nav-principal__lista > li:nth-child(5) { grid-column: 1 / -1; }
}

/* Corrección 2.7: en escritorio ningún elemento del menú se parte. */
@media (min-width: 1200px) {
  .nav-principal__enlace { white-space: nowrap; }
}

.pie { margin-top: var(--ritmo-seccion); padding-top: var(--e-7); }

.pie__interior { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-900)), 1fr)); gap: var(--e-6); padding-block: 0 var(--e-6); }

/* La marca ocupa su propia fila: debajo, tres columnas iguales en tablet. */
.pie__marca { grid-column: 1 / -1; }

.pie__marca { color: var(--texto-suave); font-size: var(--t-nota); }

.pie__logo { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); color: var(--texto); font-size: var(--t-destacado); font-weight: 800; }

.pie__logo .logo__dibujo { width: var(--icono-grande); height: var(--icono-grande); }

.pie__titulo { margin-bottom: var(--e-2); font-size: var(--t-texto); }

.pie__enlaces { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; list-style: none; font-size: var(--t-nota); }

.pie__enlaces a { display: inline-block; min-height: var(--toque-compacto); padding-block: var(--e-1); }

.pie__linea { border-top: var(--grosor-fino) solid var(--borde); }

.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-5); padding-block: var(--e-3); color: var(--texto-suave); font-size: var(--t-nota); }

@media (min-width: 600px) {
  .pie__interior { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pie__interior { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .pie__marca { grid-column: auto; }
}

/* Cabecera de sección: banda de color a todo lo ancho, texto y dibujo.
   Es la misma en todas las páginas: solo cambian el color y el dibujo. */
.cabecera-seccion { padding-block: var(--e-5) var(--e-6); color: var(--texto); }

.cabecera-seccion--verde { background: var(--superficie-marcada); }

.cabecera-seccion--neutro { background: var(--neutro); }

.cabecera-seccion__interior { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--e-5); }

.cabecera-seccion__texto { min-width: 0; max-width: var(--ancho-banda); }

.cabecera-seccion .migas { padding-top: 0; color: var(--texto-suave); }

.cabecera-seccion__rotulo { margin-top: var(--e-2); color: var(--texto); font-size: var(--t-nota); font-weight: 800; }

.cabecera-seccion__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-block: var(--e-2); color: var(--texto); font-size: var(--t-titulo-grande); }

.cabecera-seccion__entradilla { color: var(--texto-suave); font-size: var(--t-destacado); }

.cap-memoria .cabecera-seccion__entradilla, .cap-atencion .cabecera-seccion__entradilla, .cap-rapidez .cabecera-seccion__entradilla,
.cap-razonamiento .cabecera-seccion__entradilla, .cap-lenguaje .cabecera-seccion__entradilla, .cap-calculo .cabecera-seccion__entradilla,
.cap-orientacion .cabecera-seccion__entradilla, .cap-recuerdos .cabecera-seccion__entradilla { color: var(--texto); }

.cabecera-seccion__datos { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); margin-top: var(--e-3); color: var(--texto-suave); font-size: var(--t-nota); list-style: none; }

.cabecera-seccion .grupo-chips, .cabecera-seccion .portada__botones { margin-top: var(--e-3); }

html[data-colores='contraste'] .cabecera-seccion { border-bottom: var(--grosor-fino) solid var(--borde); }

/* El dibujo solo se ve con sitio. En móvil, el contenido va primero. */
.cabecera-seccion__dibujo { display: none; justify-self: center; width: auto; max-width: 100%; object-fit: contain; }

/* Dibujos compuestos: miden lo mismo que uno normal, 320 × 260. */
.cabecera-seccion__dibujo--capacidad, .cabecera-seccion__dibujo--hoja { position: relative; aspect-ratio: 320 / 260; }

.cabecera-seccion__dibujo--capacidad::before { content: ''; position: absolute; inset-block: 0; left: 50%; aspect-ratio: 1; background: var(--color-capacidad, var(--principal)); border-radius: 50%; opacity: 0.16; transform: translateX(-50%); }

.cabecera-seccion.cap-memoria { --color-capacidad: var(--cap-memoria-texto); }
.cabecera-seccion.cap-atencion { --color-capacidad: var(--cap-atencion-texto); }
.cabecera-seccion.cap-rapidez { --color-capacidad: var(--cap-rapidez-texto); }
.cabecera-seccion.cap-razonamiento { --color-capacidad: var(--cap-razonamiento-texto); }
.cabecera-seccion.cap-lenguaje { --color-capacidad: var(--cap-lenguaje-texto); }
.cabecera-seccion.cap-calculo { --color-capacidad: var(--cap-calculo-texto); }
.cabecera-seccion.cap-orientacion { --color-capacidad: var(--cap-orientacion-texto); }
.cabecera-seccion.cap-recuerdos { --color-capacidad: var(--cap-recuerdos-texto); }

.cabecera-seccion__miniatura { position: absolute; width: 60%; padding: 3%; background: var(--papel-dibujo); border-radius: 8%; box-shadow: var(--sombra-tarjeta); }

.cabecera-seccion__miniatura img { display: block; width: 100%; height: auto; }

.cabecera-seccion__miniatura:nth-child(1) { top: 6%; left: 3%; transform: rotate(-7deg); }

.cabecera-seccion__miniatura:nth-child(2) { top: 32%; right: 3%; transform: rotate(5deg); }

.cabecera-seccion__miniatura:nth-child(3) { bottom: 5%; left: 11%; transform: rotate(-3deg); }

.cabecera-seccion__dibujo--hoja { display: none; aspect-ratio: 200 / 260; padding: 8%; background: var(--papel-dibujo); border-radius: 3%; box-shadow: var(--sombra-tarjeta); transform: rotate(3deg); }

.cabecera-seccion__dibujo--hoja img { display: block; width: 100%; height: auto; margin-bottom: 12%; }

.cabecera-seccion__dibujo--hoja span { display: block; height: 5%; margin-top: 7%; background: var(--borde); border-radius: 99px; }

.cabecera-seccion__dibujo--hoja span:last-child { width: 62%; }

@media (min-width: 720px) and (max-width: 1023px) {
  .cabecera-seccion__interior:has(> .cabecera-seccion__dibujo) { grid-template-columns: minmax(0, 1fr) auto; }

  .cabecera-seccion__dibujo { display: block; height: var(--dibujo-banda-tablet); }

  /* Con letra muy grande el dibujo no cabe junto al título. */
  html[data-texto='muy-grande'] .cabecera-seccion__dibujo, html[data-texto='enorme'] .cabecera-seccion__dibujo { display: none; }

  html[data-texto='muy-grande'] .cabecera-seccion__interior, html[data-texto='enorme'] .cabecera-seccion__interior { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .cabecera-seccion { padding-block: var(--e-4); }

  /* 8 + 4 columnas, y la banda mide lo mismo de una sección a otra. */
  .cabecera-seccion__interior { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--e-7); min-height: calc(var(--alto-banda) - 2 * var(--e-4)); }

  .cabecera-seccion__dibujo { display: block; height: var(--dibujo-banda); }

  .cabecera-seccion__dibujo--capacidad, .cabecera-seccion__dibujo--hoja { height: auto; width: min(100%, calc(var(--dibujo-banda) * 320 / 260)); }

  .cabecera-seccion__dibujo--hoja { width: calc(var(--dibujo-banda) * 200 / 260); }
}

/* Colores de las capacidades nuevas. */
.cap-lenguaje { background: var(--cap-lenguaje-fondo); color: var(--cap-lenguaje-texto); }
.cap-calculo { background: var(--cap-calculo-fondo); color: var(--cap-calculo-texto); }
.cap-orientacion { background: var(--cap-orientacion-fondo); color: var(--cap-orientacion-texto); }
.cap-recuerdos { background: var(--cap-recuerdos-fondo); color: var(--cap-recuerdos-texto); }

.tarjeta-capacidad.cap-lenguaje:hover { color: var(--cap-lenguaje-texto); }
.tarjeta-capacidad.cap-calculo:hover { color: var(--cap-calculo-texto); }
.tarjeta-capacidad.cap-orientacion:hover { color: var(--cap-orientacion-texto); }
.tarjeta-capacidad.cap-recuerdos:hover { color: var(--cap-recuerdos-texto); }

/* --------------------------------------------------------------------
   21. Fase 2 · Plantilla de lectura
   -------------------------------------------------------------------- */

.plantilla-lectura { display: flex; flex-direction: column; align-items: center; padding-top: var(--e-6); }

.plantilla-lectura__texto { width: 100%; max-width: var(--ancho-lectura); min-width: 0; }

.plantilla-lectura__lateral { display: none; }

@media (min-width: 1024px) {
  .plantilla-lectura { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--e-6); }
  .plantilla-lectura__lateral { display: block; flex: 0 0 var(--ancho-lateral); align-self: stretch; }
  /* Sin scroll interno: la única barra es la de la página. lectura.js quita lo
     fijo si no cabe. Esto corta también el recorte de bordes y sombras. */
  .lateral-arriba { margin-bottom: var(--e-3); }
  .lateral-fijo { position: sticky; top: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
  .lateral-fijo--suelto { position: static; }
  .indice-plegado { display: none; }
}

/* Texto de lectura: 1 rem, interlineado 1,6 y medida máxima de 68 caracteres. */
.prosa { line-height: var(--interlineado-lectura); }

.prosa > p, .prosa > ul, .prosa > ol { max-width: var(--medida-lectura); }

.prosa > * + * { margin-top: var(--e-4); }

.prosa h2 { margin-top: var(--e-7); scroll-margin-top: var(--e-4); }

.prosa > h2:first-child { margin-top: 0; }

.prosa > ul, .prosa > ol { padding-left: var(--e-5); }

.prosa > ul li + li, .prosa > ol li + li { margin-top: var(--e-2); }

.tarjeta-lateral { padding: var(--e-3) var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); font-size: var(--t-nota); }

.tarjeta-lateral__titulo { margin-bottom: var(--e-2); color: var(--texto-suave); font-weight: 800; }

.indice-lateral__lista, .lista-lateral { display: flex; flex-direction: column; gap: var(--e-1); list-style: none; }

.indice-lateral__lista a, .lista-lateral a { display: block; padding: var(--e-1) var(--e-3); color: var(--texto); border-left: var(--grosor-marca) solid transparent; border-radius: var(--radio-pequeno); text-decoration: none; line-height: 1.3; }

.indice-lateral__lista a:hover, .lista-lateral a:hover { background: var(--neutro); color: var(--texto); text-decoration: underline; }

/* El actual se distingue por el borde y la negrita, además del fondo. */
.indice-lateral__enlace--actual { background: var(--superficie-marcada); border-left-color: var(--principal) !important; font-weight: 800; }

.indice-plegado { margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); }

.indice-plegado summary { min-height: var(--toque-compacto); display: flex; align-items: center; justify-content: space-between; font-weight: 800; cursor: pointer; list-style: none; }

/* El mismo «+» / «−» que las preguntas frecuentes, a la derecha del título
   (ajustes K, 46.1). */
.indice-plegado summary::-webkit-details-marker { display: none; }

.indice-plegado summary::after { content: '+'; flex: none; font-size: var(--t-subtitulo); line-height: 1; }

.indice-plegado[open] summary::after { content: '−'; }

.indice-plegado .indice-lateral__lista { margin-top: var(--e-2); }

.indice-plegado .indice-lateral__lista a { min-height: var(--toque-compacto); padding-block: var(--e-2); }

/* --------------------------------------------------------------------
   22. Fase 2 · Tarjeta de juego (sección 5.2)
   -------------------------------------------------------------------- */

.rejilla-juegos { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); gap: var(--e-4); }

.rejilla-juegos > li { display: flex; min-width: 0; }

.tarjeta-juego { width: 100%; gap: 0; padding: 0; overflow: hidden; }

.tarjeta-juego__miniatura { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--alto-miniatura); flex: none; }

.tarjeta-juego__miniatura img { width: auto; height: calc(var(--alto-miniatura) - var(--e-4)); }

.tarjeta-juego__cuerpo { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4); }

.tarjeta-juego__nombre { font-size: var(--t-tarjeta); }

/* Tiempo, distintivo y botón van abajo, a la misma altura en toda la fila. */
.tarjeta-juego__meta { margin-top: auto; color: var(--texto-tenue); font-size: var(--t-nota); }

/* Los botones quedan alineados abajo en toda la fila (sección 3.2). */
.tarjeta-juego .distintivo { margin-top: auto; }

.tarjeta-juego__boton { margin-top: 0; }

html[data-colores='contraste'] .tarjeta-juego__miniatura { border-bottom: var(--grosor-fino) solid var(--borde); }

@media (max-width: 599px) {
  /* Tarjeta completa: anula la versión compacta de la fase 1. */
  .rejilla-juegos { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-juego { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .tarjeta-juego__frase, .tarjeta-juego__boton, .tarjeta-juego .distintivo { display: flex; }
  .tarjeta-juego__frase { display: block; }
  .tarjeta-juego__nombre { font-size: var(--t-tarjeta); }
}

/* Corrección 2.4: el dibujo tiene un alto fijo y el texto queda alineado abajo. */
.tarjeta-nivel { justify-content: flex-start; }

/* En móvil, tres niveles en una fila, con el dibujo de la rejilla a 32 px. */
@media (max-width: 599px) {
  .rejilla-niveles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); }

  .tarjeta-nivel__dibujo .dibujo-rejilla { --celda-dibujo: calc((var(--dibujo-nivel-movil) - (var(--col) - 1) * var(--hueco-dibujo)) / var(--col)); }

  .tarjeta-nivel__dibujo .dibujo-serie { gap: 1px; font-size: 0.8em; }

  .tarjeta-nivel__dibujo .dibujo-serie span { min-width: 1.1em; }
}

.tarjeta-nivel__dibujo { display: flex; align-items: center; justify-content: center; height: var(--alto-dibujo-nivel); flex: none; }

.tarjeta-nivel__nombre { margin-top: auto; }

/* --------------------------------------------------------------------
   23. Fase 2 · Qué dice la ciencia
   -------------------------------------------------------------------- */

.seccion__entrada { margin-top: calc(-1 * var(--e-2)); margin-bottom: var(--e-4); color: var(--texto-suave); }

.tres-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); gap: var(--e-4); list-style: none; }

.idea { padding: var(--e-4) var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.idea h3 { margin-bottom: var(--e-2); font-size: var(--t-tarjeta); }

.idea p { color: var(--texto-suave); }

.destacado-oms { display: flex; flex-wrap: wrap; gap: var(--e-5); padding: var(--e-6); background: var(--panel-oscuro); color: var(--panel-oscuro-suave); border: var(--grosor-fino) solid var(--panel-oscuro-borde); border-radius: var(--radio-tarjeta-grande); }

.destacado-oms h2 { color: var(--panel-oscuro-texto); }

.destacado-oms strong { color: var(--panel-oscuro-texto); }

.destacado-oms__texto { flex: 1 1 var(--medida-2400); min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }

.destacado-oms__enlaces { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); }

.destacado-oms__lista { flex: 1 1 var(--medida-1500); display: flex; flex-direction: column; gap: var(--separacion-toque); list-style: none; }

.destacado-oms__lista li { display: flex; flex-direction: column; flex: 1; justify-content: center; padding: var(--e-2) var(--e-4); background: var(--panel-oscuro-tarjeta); border-radius: var(--radio-boton); font-size: var(--t-nota); }

.destacado-oms .enlace-estudio { background: transparent; color: var(--panel-oscuro-texto); border-color: var(--panel-oscuro-texto); }

.destacado-oms .enlace-estudio:first-child { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }

.rejilla-niveles-ciencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); gap: var(--e-3); list-style: none; }

.tarjeta-nivel-ciencia { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); font-size: var(--t-nota); }

.tarjeta-nivel-ciencia p { color: var(--texto-suave); }

.tarjeta-nivel-ciencia a { margin-top: auto; display: inline-flex; align-items: center; min-height: var(--toque-compacto); font-weight: 800; }

/* Estudios en rejilla de dos columnas, con el mismo alto por fila. */
.rejilla-estudios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-2200)), 1fr)); gap: var(--e-4); }

.tarjeta-estudio { display: flex; flex-direction: column; }

.tarjeta-estudio__no-dice { padding: var(--e-3) var(--e-4); background: var(--neutro); border-radius: var(--radio-boton); color: var(--texto); font-size: var(--t-nota); }

html[data-colores='contraste'] .tarjeta-estudio__no-dice { border: var(--grosor-fino) solid var(--borde); }

.tarjeta-estudio__enlaces { margin-top: auto; padding-top: var(--e-3); }

.rejilla-enlaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-1500)), 1fr)); gap: var(--e-3); list-style: none; }

.tarjeta-enlace { display: flex; align-items: center; min-height: var(--toque-principal); height: 100%; padding: var(--e-3) var(--e-4); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); font-weight: 800; text-decoration: none; }

.tarjeta-enlace:hover { border-color: var(--texto); color: var(--texto); }

/* --------------------------------------------------------------------
   24. Fase 2 · Componentes de la Guía de la memoria
   -------------------------------------------------------------------- */

.lo-esencial { padding: var(--e-5); background: var(--superficie); border: var(--grosor-boton) solid var(--principal); border-radius: var(--radio-tarjeta); }

.lo-esencial h2, .lo-esencial h3 { margin: 0 0 var(--e-3); color: var(--principal-oscuro); font-size: var(--t-subtitulo); }

.lo-esencial ul { display: flex; flex-direction: column; gap: var(--e-3); list-style: none; padding: 0; }

.lo-esencial li { display: flex; align-items: flex-start; gap: var(--e-3); margin: 0; }

.lo-esencial li .icono--pequeno { flex: none; margin-top: var(--e-1); padding: var(--e-1); width: var(--icono); height: var(--icono); background: var(--principal); color: var(--principal-texto); border-radius: 50%; stroke-width: 3; }

.ref { font-size: var(--t-nota); line-height: 0; }

.ref a { padding-inline: 1px; font-weight: 800; text-decoration: none; }

.ref a:hover { text-decoration: underline; }

/* El destino de un salto a fuente se resalta para no perder el sitio. */
.fuente:target { background: var(--aviso-fondo); border-radius: var(--radio-pequeno); }

.tarjetas-guia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-1500)), 1fr)); gap: var(--e-3); }

.tarjeta-guia { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.tarjeta-guia h3 { font-size: var(--t-tarjeta); }

.tarjeta-guia__ejemplo { color: var(--texto-suave); font-size: var(--t-nota); }

.tarjeta-guia__boton { margin-top: auto; font-size: var(--t-nota); }

.comparativa-marco { border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }

.comparativa, .tabla-oms { width: 100%; border-collapse: collapse; background: var(--superficie); }

/* Las dos columnas miden lo mismo: es una comparación. */
.comparativa { table-layout: fixed; }

.comparativa th, .comparativa td, .tabla-oms th, .tabla-oms td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top; border-top: var(--grosor-fino) solid var(--borde); }

.comparativa td + td, .comparativa th + th { border-left: var(--grosor-fino) solid var(--borde); }

.comparativa thead th { border-top: 0; font-weight: 800; }

.comparativa thead th .icono--pequeno { display: inline-block; vertical-align: -3px; margin-right: var(--e-2); }

.comparativa thead .comparativa__si { background: var(--superficie-marcada); color: var(--principal-oscuro); }

.comparativa thead .comparativa__no { background: var(--comparativa-no-fondo); color: var(--comparativa-no-texto); }

.tabla-oms thead th { border-top: 0; background: var(--neutro); font-weight: 800; }

.tabla-oms tbody th { font-weight: 400; }

.tabla-oms__para { display: block; color: var(--texto-suave); font-size: var(--t-nota); }

.fuerza { display: inline-block; margin-bottom: var(--e-1); padding: 0 var(--e-2); border: var(--grosor-boton) solid var(--texto); border-radius: var(--radio-chip); font-size: var(--t-nota); font-weight: 800; }

.fuerza--firme { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-color: var(--boton-oscuro); }

.certeza { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-nota); }

.certeza svg { flex: none; width: var(--icono-pequeno); height: var(--icono-pequeno); }

/* Móvil: cada fila pasa a ser una tarjeta con las celdas apiladas. */
@media (max-width: 599px) {
  .comparativa-marco { border: 0; border-radius: 0; overflow: visible; }
  .comparativa, .comparativa tbody, .comparativa tr, .comparativa td, .tabla-oms, .tabla-oms tbody, .tabla-oms tr, .tabla-oms td, .tabla-oms tbody th { display: block; width: 100%; }
  .comparativa thead, .tabla-oms thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparativa, .tabla-oms { background: none; }
  .comparativa tr, .tabla-oms tr { margin-bottom: var(--e-3); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--superficie); }
  .comparativa td, .tabla-oms td, .tabla-oms tbody th { border: 0; }
  .comparativa td + td { border-left: 0; }
  .comparativa td.comparativa__si { background: var(--superficie-marcada); }
  .comparativa td.comparativa__no { background: var(--comparativa-no-fondo); }
  .comparativa td::before, .tabla-oms td::before { content: attr(data-columna); display: block; font-size: var(--t-nota); font-weight: 800; }
  .comparativa td.comparativa__si::before { color: var(--principal-oscuro); }
  .comparativa td.comparativa__no::before { color: var(--comparativa-no-texto); }
}

.cifra { display: flex; align-items: center; gap: var(--e-5); padding: var(--e-4) var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.cifra__valor { flex: none; color: var(--principal-oscuro); font-size: var(--t-cifra); font-weight: 800; line-height: 1; }

.cifra__texto { min-width: 0; }

.cifra-banda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5); padding: var(--e-5) var(--e-6); background: var(--panel-oscuro); color: var(--panel-oscuro-suave); border: var(--grosor-fino) solid var(--panel-oscuro-borde); border-radius: var(--radio-tarjeta-grande); }

.cifra-banda .cifra__valor { color: var(--panel-oscuro-acento); }

.cifra-banda .cifra__texto { flex: 1 1 var(--medida-1500); }

.cifra-banda a { color: var(--panel-oscuro-acento); font-weight: 700; }

@media (max-width: 599px) {
  .cifra { flex-direction: column; align-items: flex-start; }
}

.prosa ol.pasos, .prosa > ol:not(.lista-fuentes) { list-style: none; padding: 0; counter-reset: paso; }

.prosa ol.pasos li, .prosa > ol:not(.lista-fuentes) > li { position: relative; margin: 0; padding-left: var(--medida-300); counter-increment: paso; }

.prosa ol.pasos li + li, .prosa > ol:not(.lista-fuentes) > li + li { margin-top: var(--e-3); }

.prosa ol.pasos li::before, .prosa > ol:not(.lista-fuentes) > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--medida-200);
  height: var(--medida-200);
  border-radius: 50%;
  background: var(--boton-oscuro);
  color: var(--boton-oscuro-texto);
  font-weight: 800;
}

.prosa .lista-fuentes { padding: 0; }

.caja { display: flex; gap: var(--e-3); padding: var(--e-4); border-left: var(--grosor-pista) solid; border-radius: var(--radio-boton); }

.caja > .icono { flex: none; margin-top: var(--e-1); }

.caja > div > * + * { margin-top: var(--e-2); }

.caja__titulo { font-weight: 800; }

.caja--consejo { background: var(--consejo-fondo); color: var(--consejo-texto); border-color: var(--consejo-borde); }

.caja--aviso { background: var(--urgencia-fondo); color: var(--urgencia-texto); border-color: var(--urgencia-borde); }

.mito { border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--superficie); }

.mito__dice { padding: var(--e-3) var(--e-4); background: var(--neutro); }

.mito__sabemos { padding: var(--e-3) var(--e-4); }

.mito__rotulo { color: var(--texto-suave); font-size: var(--t-nota); font-weight: 800; }

.mito__dice p:last-child { font-weight: 700; }

.lista-factores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-1200)), 1fr)); gap: var(--e-2) var(--e-4); padding: 0 !important; list-style: none; }

.lista-factores li { display: flex; align-items: center; gap: var(--e-2); margin: 0 !important; padding: var(--e-2) var(--e-3); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); }

.rejilla-recursos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }

.recurso { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.recurso h3 { font-size: var(--t-tarjeta); }

.recurso__titulo { color: var(--texto-suave); font-size: var(--t-nota); }

.pregunta { background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--toque-principal); padding: var(--e-3) var(--e-4); font-weight: 800; cursor: pointer; list-style: none; }

.pregunta summary::-webkit-details-marker { display: none; }

/* El signo cambia al abrir: la forma lo indica, no solo el color. */
.pregunta summary::after { content: '+'; flex: none; font-size: var(--t-subtitulo); }

.pregunta[open] summary::after { content: '−'; }

.pregunta p { padding: 0 var(--e-4) var(--e-4); color: var(--texto-suave); }

.lista-preguntas { display: flex; flex-direction: column; gap: var(--separacion-toque); }

.lista-fuentes { display: flex; flex-direction: column; gap: var(--e-2); list-style: none; font-size: var(--t-nota); }

.fuente { display: flex; gap: var(--e-2); padding: var(--e-1); }

.fuente__numero { flex: none; font-weight: 800; }

.fuente__enlace { font-weight: 700; }

.fuente__direccion { display: none; }

.indice-capitulos ol { display: flex; flex-direction: column; gap: var(--e-1); list-style: none; }

.indice-capitulos a { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-1) 0; color: var(--texto-suave); text-decoration: none; line-height: 1.25; }

.indice-capitulos a:hover { color: var(--texto); text-decoration: underline; }

.indice-capitulos a[aria-current='page'] { color: var(--texto); font-weight: 800; }

.numero-capitulo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--medida-120); height: var(--medida-120); background: var(--neutro-fuerte); color: var(--texto); border-radius: 50%; font-size: var(--t-chip); font-weight: 800; }

.indice-capitulos a[aria-current='page'] .numero-capitulo { background: var(--principal); color: var(--principal-texto); }

.guia-imprimir-movil { margin-top: var(--e-4); }

@media (min-width: 1024px) {
  .guia-imprimir-movil { display: none; }
}

.rejilla-capitulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-1500)), 1fr)); gap: var(--e-3); list-style: none; }

.tarjeta-capitulo { display: flex; flex-direction: column; gap: var(--e-2); height: 100%; padding: var(--e-4); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); text-decoration: none; }

.tarjeta-capitulo:hover { border-color: var(--texto); color: var(--texto); }

.tarjeta-capitulo__arriba { display: flex; align-items: center; justify-content: space-between; color: var(--texto-suave); font-size: var(--t-nota); }

.tarjeta-capitulo__numero { display: inline-flex; align-items: center; justify-content: center; width: var(--medida-200); height: var(--medida-200); background: var(--superficie-marcada); color: var(--principal-oscuro); border-radius: var(--radio-boton); font-size: var(--t-destacado); font-weight: 800; }

.tarjeta-capitulo__titulo { font-size: var(--t-tarjeta); font-weight: 800; line-height: 1.2; }

.tarjeta-capitulo__icono { flex: none; width: var(--icono-capitulo); height: auto; }

.tarjeta-capitulo__tiempo { color: var(--texto-suave); font-size: var(--t-nota); font-weight: 700; }

.tarjeta-capitulo__entradilla { color: var(--texto-suave); font-size: var(--t-nota); }

.guia-imprimible { padding-top: var(--e-5); max-width: var(--ancho-lectura); }

.capitulo-impreso + .capitulo-impreso { margin-top: var(--ritmo-seccion); }

.impreso-titulo { margin-top: var(--e-5); }

/* En tablet vertical la banda se alinea con la columna de lectura centrada. */
@media (max-width: 1023px) {
  .cabecera-seccion:has(+ .plantilla-lectura) .cabecera-seccion__interior { max-width: calc(var(--ancho-lectura) + 2 * var(--margen-lateral)); }
}

/* --------------------------------------------------------------------
   25. Fase 2 · Partida: panel lateral de 300 px y tablero común
   -------------------------------------------------------------------- */

.partida__capacidad { display: none; }


.partida__mensaje[data-tono='neutro'] { background: var(--neutro); color: var(--texto); }

@media (min-aspect-ratio: 5/4) {
  .partida { grid-template-columns: minmax(0, 1fr) min(var(--ancho-panel), 36vw); }
  .partida__capacidad { display: inline-flex; margin-bottom: var(--e-2); }
  .partida__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: end; }
  .partida__acciones > :first-child, .partida__salir-largo { grid-column: 1 / -1; }
  .partida__ver-grande { grid-column: auto; }
  .partida__acciones .boton { font-size: var(--t-nota); }
  .partida__acciones > :first-child { font-size: var(--t-boton); }
  /* «Ver en grande» va entero también en el panel (ajustes K, 44.1): si no
     cabe junto a «Pausa», baja a dos líneas sin partir palabras. */
  .partida__ver-grande { text-align: center; }
}

/* --------------------------------------------------------------------
   26. Fase 2 · Rondas con opciones (la mayoría de los juegos nuevos)
   -------------------------------------------------------------------- */

.ronda { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--e-4); max-height: 100%; }

.ronda--doble { flex-direction: row; align-items: stretch; }

.ronda__contenido { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }

.ronda__pregunta { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }

.ronda__rotulo { color: var(--texto-suave); }

.ronda__titulo { font-size: var(--t-seccion); line-height: 1.2; }

/* Sin contenido a la izquierda, la pregunta es la protagonista (Juego-Refran). */
.ronda:not(.ronda--doble) .ronda__titulo { font-size: var(--t-titulo-grande); }

.ronda, .antes { padding: var(--e-2); }

.ronda__opciones { margin-top: auto; display: flex; flex-direction: column; gap: var(--hueco-opciones); }

.ronda__opciones--fila { flex-direction: row; }

.ronda__opciones--fila .opcion { flex: 1 1 0; padding-inline: var(--e-1); white-space: nowrap; }

.opcion {
  min-height: var(--alto-opcion);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--borde-fuerte);
  border-radius: var(--radio-carta);
  font-size: var(--t-opcion);
  font-weight: 700;
  line-height: 1.2;
}

.opcion:hover:not([disabled]) { border-color: var(--texto); }

.opcion[disabled] { color: var(--texto-tenue); cursor: default; }

.opcion--correcta[disabled] { background: var(--superficie-marcada); color: var(--principal-oscuro); border: var(--grosor-marca) solid var(--principal); }

.opcion--quitada { visibility: hidden; }

.ronda__despues { display: flex; flex-direction: column; gap: var(--e-3); }

.ronda__despues:empty { display: none; }

.ronda__seguir { width: 100%; }

.explicacion { display: flex; flex-direction: column; gap: var(--e-2); }

.explicacion__titulo { font-size: var(--t-subtitulo); font-weight: 800; line-height: 1.25; }

.para-conversar { padding: var(--e-3) var(--e-4); border-radius: var(--radio-tarjeta); }

.para-conversar__rotulo { font-size: var(--t-nota); font-weight: 800; }

html[data-colores='contraste'] .para-conversar { border: var(--grosor-fino) solid var(--borde); }

.dibujo-objeto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--medida-900); background: var(--cap-recuerdos-fondo); border-radius: var(--radio-tarjeta); }

.dibujo-objeto img { width: 62%; max-height: 80%; }

/* En vertical, el contenido arriba y la pregunta debajo. */
@media (max-aspect-ratio: 5/4) {
  .ronda--doble { flex-direction: column; }
  .ronda--doble .ronda__contenido { flex: 0 1 auto; min-height: 0; max-height: 34vh; }
  .ronda--doble .dibujo-objeto { height: 32vh; }
  /* El tique y el pago no se recortan: se leen enteros. */
  .ronda--doble .ronda__contenido:has(.tique, .pago) { flex: none; max-height: none; }
  .tique li { padding-block: var(--e-1); }
}

/* --------------------------------------------------------------------
   27. Fase 2 · ¿Qué pasó antes?
   -------------------------------------------------------------------- */

.antes { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--e-3); }

.antes__huecos, .antes__tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-900)), 1fr)); gap: var(--hueco-opciones); }

.antes__rotulo { margin-bottom: var(--e-1); color: var(--texto-suave); font-size: var(--t-nota); font-weight: 800; }

.hueco {
  width: 100%;
  min-height: var(--alto-hueco-momento);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-1);
  padding: var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--grosor-boton) dashed var(--borde-fuerte);
  border-radius: var(--radio-carta);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.hueco--lleno { background: var(--cap-recuerdos-fondo); color: var(--texto); border-style: solid; border-color: var(--cap-recuerdos-texto); }

.hueco[disabled] { cursor: default; }

.hueco__vacio { color: var(--texto-suave); font-weight: 400; font-size: var(--t-nota); text-align: center; width: 100%; }

.momento__anio { font-size: var(--t-nota); font-weight: 800; }

.tarjeta-momento {
  position: relative;
  min-height: var(--alto-hueco-momento);
  padding: var(--e-3);
  background: var(--cap-recuerdos-fondo);
  color: var(--texto);
  border: var(--grosor-boton) solid var(--cap-recuerdos-texto);
  border-radius: var(--radio-carta);
  font-size: var(--t-texto);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

/* Lo elegido se reconoce por el borde grueso y por una etiqueta escrita. */
.tarjeta-momento--elegida { border-width: var(--grosor-pista); }

.etiqueta-elegido { display: inline-block; margin-top: var(--e-1); padding: 0 var(--e-2); background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-radius: var(--radio-chip); font-size: var(--t-nota); }

.antes__pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-3); }

.antes__pie .boton { width: 100%; }

/* --------------------------------------------------------------------
   28. Fase 2 · Letras revueltas
   -------------------------------------------------------------------- */

.letras { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-5); container-type: inline-size; }

.letras__pista { font-size: var(--t-subtitulo); font-weight: 800; text-align: center; }

.letras__huecos, .letras__fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hueco-letras); }

.letra {
  width: var(--ancho-letra);
  height: var(--ancho-letra);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radio-boton);
  font-size: calc(var(--ancho-letra) * 0.55);
  font-weight: 800;
}

.letras { --ancho-letra: var(--tam-letra); }

.letra--ficha { background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--texto); }

.letra--hueco { background: var(--superficie-marcada); color: var(--texto); border: var(--grosor-boton) solid var(--principal); }

.letra--hueco[disabled] { cursor: default; color: var(--texto); }

.letra--vacia { background: var(--superficie); border-style: dashed; border-color: var(--borde-fuerte); }

.letras__pie { min-height: var(--toque-principal); display: flex; align-items: center; width: 100%; justify-content: center; }

.letras__pie .boton--principal { width: min(100%, var(--medida-2200)); }

/* --------------------------------------------------------------------
   29. Fase 2 · Sopa de letras
   -------------------------------------------------------------------- */

.sopa { flex: 1 1 0; min-height: 0; display: flex; gap: var(--e-4); container-type: size; }

.sopa__marco { position: relative; flex: none; align-self: center; aspect-ratio: 1; width: min(100cqh, 72cqw); max-width: 100%; }

.sopa__rejilla { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--lado), 1fr); grid-template-rows: repeat(var(--lado), 1fr); gap: var(--radio-minimo); }

.sopa__celda { min-width: 0; min-height: 0; padding: 0; background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-pequeno); font-size: calc(min(100cqh, 72cqw) / var(--lado) * 0.55); font-weight: 700; line-height: 1; }

.sopa__celda--elegida { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-color: var(--boton-oscuro); }

.sopa__celda--pista { outline: var(--grosor-pista) solid var(--acento); outline-offset: calc(-1 * var(--grosor-marca)); }

.sopa__trazos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.sopa__trazos line { stroke: var(--principal); stroke-width: 6; stroke-linecap: round; opacity: 0.35; }

.sopa__lista { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--e-1); list-style: none; overflow-y: auto; }

.sopa__palabra { display: flex; align-items: center; gap: var(--e-2); font-weight: 700; line-height: 1.1; }

.sopa__palabra img { width: var(--icono-grande); height: var(--icono-grande); flex: none; }

.sopa__palabra--hallada span:not(.solo-lector) { text-decoration: line-through; }

/* En vertical, la lista debajo en dos columnas. */
@media (max-aspect-ratio: 5/4) {
  .sopa { flex-direction: column; align-items: center; }
  .sopa__marco { width: min(100cqw, 72cqh); }
  .sopa__celda { font-size: calc(min(100cqw, 72cqh) / var(--lado) * 0.55); }
  .sopa__lista { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .sopa__palabra img { width: var(--icono); height: var(--icono); }
}

/* Modo grande: casillas de al menos 48 px y desplazamiento vertical. */
.es-grande .sopa { container-type: normal; flex: none; flex-direction: column; align-items: stretch; }

.es-grande .sopa__marco { width: min(100%, calc(var(--lado) * var(--celda-grande))); margin-inline: auto; }

.es-grande .sopa__celda { font-size: calc(var(--celda-grande) * 0.5); }

.partida.es-grande:has(.sopa) .partida__marco { overflow-y: auto; }

.partida.es-grande:has(.sopa) .partida__tablero { height: auto; }

/* En móvil vertical el tablero tiene poco alto: se compacta ¿Qué pasó antes? */
@media (max-width: 599px) {
  .antes { gap: var(--e-2); }
  .antes > .ronda__rotulo { display: none; }
  .antes .ronda__titulo { font-size: var(--t-subtitulo); }
  .antes__tarjetas:empty { display: none; }
  .hueco, .tarjeta-momento { padding: var(--e-1) var(--e-2); font-size: var(--t-nota); }
  .antes__pie .para-conversar { padding: var(--e-1) var(--e-3); }
}

/* --------------------------------------------------------------------
   30. Fase 2 · La cuenta de la compra y El cambio
   -------------------------------------------------------------------- */

.tique { width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); background: var(--tique-fondo); color: var(--tique-texto); border: var(--grosor-boton) solid var(--borde); border-radius: var(--radio-carta); box-shadow: var(--sombra-carta); }

.tique__tienda { color: var(--texto-suave); font-size: var(--t-nota); font-weight: 800; text-align: center; }

.tique ul { list-style: none; }

.tique li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-2); border-bottom: var(--grosor-boton) dashed var(--borde-fuerte); }

.tique__total { display: flex; justify-content: space-between; font-size: var(--t-subtitulo); font-weight: 800; }

.pago { width: 100%; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); background: var(--tique-fondo); color: var(--tique-texto); border: var(--grosor-boton) solid var(--borde); border-radius: var(--radio-carta); }

.pago__compra { font-size: var(--t-subtitulo); font-weight: 800; line-height: 1.2; }

.pago__linea { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); font-size: var(--t-opcion); }

.importe { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

.importe__piezas { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.importe__total { flex: none; font-weight: 800; }

/* Dibujos esquemáticos: no imitan los diseños reales del euro. */
.dinero { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--dinero-texto); border: var(--grosor-boton) solid var(--dinero-borde); font-size: var(--t-chip); font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }

.dinero--moneda { width: var(--tam-moneda); height: var(--tam-moneda); border-radius: 50%; background: var(--dinero-plata); font-size: var(--t-dinero-moneda); }

.dinero--v5, .dinero--v10, .dinero--v20, .dinero--v50 { background: var(--dinero-cobre); }

.dinero--v100, .dinero--v200 { background: var(--dinero-oro); }

.dinero--billete { width: var(--ancho-billete); height: var(--tam-moneda); border-radius: var(--radio-pequeno); }

.dinero--v500 { background: var(--dinero-billete-1); }
.dinero--v1000 { background: var(--dinero-billete-2); }
.dinero--v2000 { background: var(--dinero-billete-3); }
.dinero--v5000 { background: var(--dinero-billete-4); }

/* --------------------------------------------------------------------
   31. Fase 2 · ¿Qué hora es?
   -------------------------------------------------------------------- */

.reloj { width: 100%; max-width: var(--reloj-maximo); max-height: 100%; aspect-ratio: 1; }

.reloj__esfera { fill: var(--superficie); stroke: var(--texto); stroke-width: 6; }

.reloj text { fill: var(--texto); font-family: var(--fuente); font-size: 24px; font-weight: 800; }

.reloj__corta { stroke: var(--texto); stroke-width: 9; stroke-linecap: round; }

.reloj__larga { stroke: var(--principal); stroke-width: 5; stroke-linecap: round; }

.reloj__centro { fill: var(--texto); }

/* La pista engorda la aguja corta y la ilumina con un trazo ancho. */
.reloj--pista .reloj__corta { stroke: var(--acento); stroke-width: 13; }

/* --------------------------------------------------------------------
   32. Fase 2 · Paseo por el barrio
   -------------------------------------------------------------------- */

.barrio { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-2); }

.barrio__titulo { font-size: var(--t-subtitulo); }

.barrio__cuerpo { flex: 1; display: flex; align-items: center; gap: var(--e-4); }

.barrio__controles { flex: 0 0 var(--ancho-controles-barrio); display: flex; flex-direction: column; gap: var(--hueco-opciones); }

.plano { position: relative; flex: 1; min-width: 0; aspect-ratio: 4 / 3; background: var(--calle); border-radius: var(--radio-pequeno); overflow: hidden; }

/* Único sitio con guion automático: es una caja muy pequeña y un nombre largo,
   como «Ayuntamiento», se saldría de ella. */
.manzana { hyphens: auto; position: absolute; width: 18%; height: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1%; padding: 1%; background: var(--superficie); color: var(--texto); border-radius: var(--radio-pequeno); font-size: var(--t-plano); font-weight: 700; line-height: 1.05; text-align: center; overflow: hidden; hyphens: auto; }

.manzana img { flex: 0 1 auto; min-height: 0; height: 55%; }

.manzana--casa { background: var(--acento); color: var(--acento-texto); }

.manzana--destino { background: var(--superficie-marcada); outline: var(--grosor-marca) solid var(--texto); outline-offset: calc(-1 * var(--grosor-marca)); }

.plano__camino { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.plano__camino polyline { fill: none; stroke: var(--principal); stroke-width: 1.800; stroke-linejoin: round; stroke-linecap: round; vector-effect: none; }

/* El punto lleva una flecha que indica hacia dónde se camina. */
.plano__punto { position: absolute; width: var(--tam-punto-plano); height: var(--tam-punto-plano); margin: calc(var(--tam-punto-plano) / -2); background: var(--principal); border: var(--grosor-marca) solid var(--superficie); border-radius: 50%; transition: left var(--tiempo-giro), top var(--tiempo-giro); }

.plano__punto::after { content: ''; position: absolute; inset: 22%; background: var(--principal-texto); clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); transform: rotate(var(--giro)); }

.cruce { position: absolute; width: var(--toque-compacto); height: var(--toque-compacto); margin: calc(var(--toque-compacto) / -2); padding: 0; background: var(--superficie); border: var(--grosor-marca) dashed var(--texto); border-radius: 50%; opacity: 0.85; }

.cruce:hover { opacity: 1; background: var(--acento); }

.opcion--pista { border-color: var(--acento); outline: var(--grosor-pista) solid var(--acento); }

@media (max-aspect-ratio: 5/4) {
  .barrio__cuerpo { flex-direction: column; align-items: stretch; }
  .barrio__controles { flex: none; }
  .barrio__controles .opcion { min-height: var(--toque-medio); }
  .plano { flex: none; width: 100%; }
}

/* --------------------------------------------------------------------
   33. Fase 2 · Escenas: ¿Qué ha cambiado? y Las diferencias
   -------------------------------------------------------------------- */

.juego-escena { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-2); }

.juego-escena__titulo { flex: none; font-size: var(--t-subtitulo); }

.juego-escena > .boton { flex: none; align-self: center; width: min(100%, var(--medida-2400)); }

.juego-escena__pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-3); }

.juego-escena__pie:empty { display: none; }

/* La escena va siempre sobre claro: sus colores se eligieron para ese fondo. */
.escena { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); grid-template-rows: repeat(var(--filas), minmax(0, 1fr)); gap: var(--e-1); padding: var(--e-2); background: var(--hoja-fondo); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.escena__celda { container-type: size; position: relative; min-width: 0; min-height: 0; padding: 0; background: none; border: var(--grosor-boton) solid transparent; border-radius: var(--radio-boton); cursor: pointer; }

.escena__objeto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.escena__objeto svg { width: calc(84cqmin * var(--tam, 1)); height: calc(84cqmin * var(--tam, 1)); }

/* «Cambia un detalle»: una pegatina en la esquina del objeto. */
.escena__objeto--detalle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24cqmin; height: 24cqmin; margin: 8cqmin 0 0 8cqmin; background: var(--urgencia-borde); border: var(--grosor-boton) solid var(--hoja-fondo); border-radius: 50%; }

.escena__celda--marcada { border: var(--grosor-pista) solid var(--principal); background: var(--cap-memoria-fondo); }

html[data-colores='contraste'] .escena__celda--marcada { background: var(--hoja-fondo); border-color: var(--hoja-texto); }

.escena__celda--apagada { opacity: 0.25; }

.cortina { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--panel-oscuro); color: var(--panel-oscuro-texto); border-radius: var(--radio-tarjeta); font-size: var(--t-seccion); font-weight: 800; text-align: center; }

.diferencias { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-3); }

.diferencias__escenas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }

@media (max-aspect-ratio: 5/4) {
  .diferencias__escenas { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------
   34. Fase 2 · Busca y tacha
   -------------------------------------------------------------------- */

.busca { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-1); }

.busca__cabeza { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

.busca__titulo { font-size: var(--t-subtitulo); }

.busca__modelo { padding: 0 var(--e-2); background: var(--superficie-marcada); border-radius: var(--radio-boton); }

.busca__muestra { display: flex; flex: none; width: var(--medida-300); height: var(--medida-300); align-items: center; justify-content: center; font-size: var(--t-subtitulo); font-weight: 800; }

.busca__rejilla { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--e-1); }

.busca__celda { container-type: size; position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--hoja-fondo); color: var(--hoja-texto); border: var(--grosor-boton) solid var(--borde); border-radius: var(--radio-boton); }

.busca__celda img { max-width: 76cqmin; max-height: 76cqmin; width: 76cqmin; height: 76cqmin; }

.busca__letra { font-size: 70cqmin; font-weight: 700; line-height: 1; }

.busca__muestra img { width: 100%; height: 100%; }

.busca__muestra .busca__letra { font-size: inherit; }

.busca__variante--girada { transform: rotate(160deg); }

.busca__variante--tenida { filter: hue-rotate(150deg); }

/* Marcado: borde grueso y marca, no solo color. */
.busca__celda--marcada { background: var(--cap-memoria-fondo); border: var(--grosor-marca) solid var(--principal); }

html[data-colores='contraste'] .busca__celda--marcada { background: var(--hoja-fondo); border-color: var(--hoja-texto); }

.busca__marca { position: absolute; top: 2%; right: 2%; display: flex; padding: 1px; background: var(--principal); color: var(--principal-texto); border-radius: 50%; }

.busca__celda--faltaba { outline: var(--grosor-pista) solid var(--acento); outline-offset: calc(-1 * var(--grosor-marca)); }

.busca__celda--pista { background: var(--aviso-fondo); }

.busca > .boton { flex: none; align-self: center; width: min(100%, var(--medida-2400)); }

/* --------------------------------------------------------------------
   35. Fase 2 · El semáforo
   -------------------------------------------------------------------- */

.juego-semaforo { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-4); }

.semaforo { flex: 1 1 0; min-height: 0; aspect-ratio: 1 / 2.6; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: var(--e-3); background: var(--panel-oscuro); border: var(--grosor-fino) solid var(--panel-oscuro-borde); border-radius: var(--radio-tarjeta-grande); }

html[data-colores='contraste'] .semaforo { background: var(--hoja-fondo); }

.semaforo__luz { width: 72%; aspect-ratio: 1; border: var(--grosor-boton) solid var(--panel-oscuro-borde); display: flex; align-items: center; justify-content: center; background: var(--semaforo-apagado); color: var(--semaforo-simbolo); border-radius: 50%; }

.semaforo__luz svg { width: 62%; height: 62%; }

.semaforo__luz--rojo.semaforo__luz--encendida { background: var(--semaforo-rojo); }
.semaforo__luz--ambar.semaforo__luz--encendida { background: var(--semaforo-ambar); }
.semaforo__luz--verde.semaforo__luz--encendida { background: var(--semaforo-verde); }

.semaforo__boton { flex: none; width: min(100%, var(--medida-2400)); min-height: calc(var(--toque-principal) * 1.4); font-size: var(--t-seccion); }

/* --------------------------------------------------------------------
   36. Fase 2 · Recuerda la historia y Caras y nombres
   -------------------------------------------------------------------- */

.historia { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-2); }

.truco { padding: var(--e-2) var(--e-4); background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--radio-boton); }

/* Un relato largo se desplaza dentro de su caja: los botones siguen a la vista. */
.historia__texto { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: var(--medida-lectura); font-size: var(--t-destacado); line-height: var(--interlineado-lectura); }

.historia__texto mark { padding: 0 2px; background: var(--aviso-fondo); color: var(--aviso-texto); border-bottom: var(--grosor-boton) solid currentColor; }

.historia__pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--separacion-toque); }

.historia__pie .boton--principal { flex: 1 1 var(--medida-800); }

.historia__mas { flex: none; color: var(--texto-suave); font-size: var(--t-nota); }

.caras { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-3); padding: var(--e-2); text-align: center; }

.caras > .boton { width: min(100%, var(--medida-2200)); }

.caras > .truco { width: 100%; }

.caras__retrato { width: min(100%, var(--retrato-cara)); }

.caras__retrato .cara { width: 100%; height: auto; }

.caras__nombre { font-size: var(--t-seccion); }

/* Repaso: todas las caras caben a la vez. Columnas y filas salen del número
   de personas; cada cara ocupa lo que le deja su celda. */
.caras--repaso { flex: 1; min-height: 0; }

.caras--repaso > .boton { flex: none; }

.caras__grupo { --col: 3; --fil: 1; flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--e-2); list-style: none; font-weight: 700; line-height: 1.15; }

.caras__grupo--5 { --fil: 2; }

.caras__grupo--7 { --col: 4; --fil: 2; }

@media (max-aspect-ratio: 5/4) {
  .caras__grupo--7 { --col: 3; --fil: 3; }
}

.caras__grupo li { flex: 0 0 calc((100% - (var(--col) - 1) * var(--e-2)) / var(--col)); height: calc((100% - (var(--fil) - 1) * var(--e-2)) / var(--fil)); min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: var(--e-1); }

.caras__grupo .cara { min-height: 0; width: 100%; height: 100%; }

/* --------------------------------------------------------------------
   37. Fase 2 · ¿Igual o distinto?
   -------------------------------------------------------------------- */

.iguales { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-1); }

.iguales__par { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }

/* Sobre claro siempre: los colores de las figuras se eligieron para ese fondo. */
.iguales__figura { container-type: size; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--hoja-fondo); color: var(--hoja-texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.iguales__dibujo { width: 74cqmin; height: 74cqmin; }

.iguales__texto { font-size: min(17cqw, 60cqh); font-weight: 800; line-height: 1; }

.iguales__botones { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco-opciones); }

.iguales__boton { min-height: calc(var(--toque-principal) * 1.4); }

.iguales__signo { font-size: var(--t-cifra); font-weight: 800; line-height: 1; }

/* --------------------------------------------------------------------
   38. Fase 2 · Clasifica rápido
   -------------------------------------------------------------------- */

.clasifica { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; gap: var(--e-3); padding: var(--e-1); }

.clasifica--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.clasifica__cosa { grid-column: 1 / -1; container-type: size; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); background: var(--hoja-fondo); color: var(--hoja-texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); text-align: center; }

.clasifica__dibujo { width: 58cqmin; height: 58cqmin; }

.clasifica__palabra { font-size: var(--t-cifra); font-weight: 800; line-height: 1.1; }

.clasifica__cesta { min-width: 0; min-height: calc(var(--toque-principal) * 1.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-1); padding: var(--e-2); background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-tarjeta); font-size: var(--t-opcion); font-weight: 700; line-height: 1.15; }

.clasifica__cesta:hover { border-color: var(--texto); }

.clasifica__cesta--bien { background: var(--superficie-marcada); color: var(--principal-oscuro); border: var(--grosor-marca) solid var(--principal); }

.clasifica__icono { flex: none; width: var(--medida-240); height: var(--medida-240); }

/* En horizontal, la cosa queda en el centro y una cesta a cada lado. */
@media (min-aspect-ratio: 5/4) {
  .clasifica--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .clasifica--2 .clasifica__cosa { grid-column: 2; grid-row: 1; }
}

/* --------------------------------------------------------------------
   39. Fase 2 · La torre
   -------------------------------------------------------------------- */

.torre { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-1); }

.torre__cabeza { flex: none; }

.torre__titulo { font-size: var(--t-subtitulo); }

.torre__regla { color: var(--texto-suave); }

/* Banda fija para la flecha de la pista: así el tablero no salta al salir. */
.torre__guia { flex: none; position: relative; height: var(--medida-200); }

.torre__flecha { position: absolute; top: 50%; height: var(--grosor-pista); margin-top: calc(var(--grosor-pista) / -2); background: var(--principal); border-radius: var(--grosor-pista); }

.torre__flecha::after { content: ''; position: absolute; right: 0; top: 50%; width: var(--medida-140); height: var(--medida-140); margin-top: calc(var(--medida-140) / -2); border-top: var(--grosor-pista) solid var(--principal); border-right: var(--grosor-pista) solid var(--principal); transform: rotate(45deg); }

.torre__flecha--izquierda::after { right: auto; left: 0; transform: rotate(-135deg); }

.torre__tablero { flex: 1 0 var(--medida-1200); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }

/* Cada palo entero es el botón: el eje y la pila comparten la misma celda. */
.torre__palo { container-type: size; position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; padding: var(--e-1) var(--e-1) 0; background: var(--hoja-fondo); color: var(--hoja-texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-tarjeta); }

.torre__palo--elegido { border: var(--grosor-pista) solid var(--principal); }

html[data-colores='contraste'] .torre__palo--elegido { border-color: var(--hoja-texto); }

.torre__eje { grid-row: 1; grid-column: 1; align-self: end; width: var(--grosor-eje); height: 66cqh; background: var(--eje-torre); border-radius: var(--grosor-eje) var(--grosor-eje) 0 0; }

.torre__pila { grid-row: 1; grid-column: 1; align-self: end; width: 100%; display: flex; flex-direction: column-reverse; align-items: center; }

.torre__disco { display: block; width: var(--ancho); height: min(calc(58cqh / var(--discos)), var(--medida-240)); border: var(--grosor-boton) solid var(--disco-borde); border-radius: var(--radio-boton); }

.torre__disco--tono0 { background: var(--disco-oscuro); }
.torre__disco--tono1 { background: var(--disco-medio); }
.torre__disco--tono2 { background: var(--disco-claro); }

.torre__arriba { position: absolute; top: var(--e-1); left: var(--e-1); right: var(--e-1); display: flex; flex-direction: column; align-items: center; gap: var(--e-1); }

.torre__etiqueta { padding: 0 var(--e-2); background: var(--principal); color: var(--principal-texto); border-radius: var(--radio-boton); font-size: var(--t-chip); font-weight: 800; }

.torre__nombre { padding-block: var(--e-1); font-size: min(var(--t-boton), 22cqw); font-weight: 800; white-space: nowrap; }

.torre__pie { flex: none; display: flex; justify-content: center; }

/* --------------------------------------------------------------------
   40. Fase 2 · Cuatro opciones en rejilla (¿Cuál sobra?)
   -------------------------------------------------------------------- */

/* Las cuatro cosas llenan el tablero: son las protagonistas de la ronda. */
.ronda__opciones--rejilla { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(var(--alto-opcion), var(--medida-900)); align-content: center; margin-top: var(--e-3); }

.ronda__opciones--rejilla .opcion { font-size: var(--t-subtitulo); }

/* --------------------------------------------------------------------
   41. Fase 2 · Catálogo por capacidades (sección 5.2)
   -------------------------------------------------------------------- */

.filtro__numero { margin-left: var(--e-1); font-weight: 400; }

.aviso-respaldo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--radio-tarjeta); }

.seccion-capacidad { margin-top: var(--e-7); }

/* Cada capacidad pone el color de su línea inferior. */
.seccion-capacidad--memoria { --color-capacidad: var(--cap-memoria-texto); }
.seccion-capacidad--atencion { --color-capacidad: var(--cap-atencion-texto); }
.seccion-capacidad--rapidez { --color-capacidad: var(--cap-rapidez-texto); }
.seccion-capacidad--razonamiento { --color-capacidad: var(--cap-razonamiento-texto); }
.seccion-capacidad--lenguaje { --color-capacidad: var(--cap-lenguaje-texto); }
.seccion-capacidad--calculo { --color-capacidad: var(--cap-calculo-texto); }
.seccion-capacidad--orientacion { --color-capacidad: var(--cap-orientacion-texto); }
.seccion-capacidad--recuerdos { --color-capacidad: var(--cap-recuerdos-texto); }

.seccion-capacidad__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); margin-bottom: var(--e-4); padding-bottom: var(--e-2); border-bottom: var(--grosor-pista) solid var(--color-capacidad); }

.seccion-capacidad__numero { color: var(--texto-suave); }

.seccion-capacidad__enlace { margin-left: auto; font-weight: 700; }

/* Cuatro columnas en escritorio, dos en tablet y una en móvil. Los bordes de
   las tarjetas coinciden con los del título y la línea de cada sección. */
@media (min-width: 1100px) {
  .seccion-capacidad .rejilla-juegos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 620px) and (max-width: 1099.98px) {
  .seccion-capacidad .rejilla-juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------
   42. Fase 2 · Bloque de la guía en el inicio (sección 5.1)
   -------------------------------------------------------------------- */

.bloque-guia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); padding: var(--e-5); background: var(--superficie-marcada); border-radius: var(--radio-tarjeta-grande); }

.bloque-guia__texto { max-width: var(--medida-lectura); }

.bloque-guia__capitulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--medida-900)), 1fr)); gap: var(--e-3); list-style: none; }

.bloque-guia__boton { justify-self: start; }

@media (max-width: 619.98px) {
  .bloque-guia__boton { justify-self: stretch; }
}

/* --------------------------------------------------------------------
   43. Fase 2 · Fichas nuevas (sección 10.2)
   Como las demás hojas, todo va en em: la hoja escala con el contenedor.
   -------------------------------------------------------------------- */

.fichas__seccion { margin-top: var(--e-5); }

.fichas__seccion .seccion-capacidad__cabeza { margin-bottom: var(--e-3); }

.fichas__seccion .filtros { margin-block: 0; }

.papel-titulo { margin-block: 0.4em; font-size: 1.2em; }

.papel-relato { line-height: 1.6; }

/* Reparten el espacio que sobre: las rondas no se amontonan arriba de la hoja. */
.papel-repartido, .papel-sobra, .papel-letras, .papel-cambios, .papel-series, .papel-preguntas, .papel-grupos, .papel-objetos { flex: 1; min-height: 0; justify-content: space-between; }

.papel-repartido { display: flex; flex-direction: column; }

.papel-bloque--solo { flex: 1; min-height: 0; justify-content: space-between; }

.hoja--grande .papel-bloque--solo .papel-lista, .hoja--grande .papel-bloque--solo .papel-recuerdo { row-gap: 0.7em; }

.hoja--grande .papel-busca { width: 84%; }

.papel-preguntas { display: flex; flex-direction: column; gap: 0.5em; list-style: none; }

.papel-preguntas__texto { font-weight: 700; }

.papel-opciones { list-style: none; }

.papel-opciones li { display: flex; align-items: baseline; gap: 0.4em; }

.papel-marcada { outline: 0.14em solid currentColor; outline-offset: -0.1em; border-radius: 50%; }

.papel-muestra { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em; font-weight: 700; }

.papel-muestra__dibujo { display: inline-flex; width: 2em; height: 2em; align-items: center; justify-content: center; }

.papel-muestra__dibujo img { width: 100%; height: 100%; }

.papel-muestra__dibujo .busca__letra, .papel-busca .busca__letra { font-size: 1.4em; line-height: 1; }

.papel-busca { display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); gap: 0.15em; width: 94%; margin-inline: auto; }

.papel-busca > span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }

.papel-busca img { width: 80%; height: 80%; }

.papel-escenas { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.5em; height: 100%; }

.papel-escenas .escena { min-height: 0; height: 100%; padding: 0.2em; border-radius: 0; border: 0.06em solid currentColor; }

.papel-escenas .escena__celda { border: 0; }

.papel-escenas .papel-marcada { outline-width: 0.18em; }

.papel-iguales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 1.2em; list-style: none; }

.papel-iguales--texto { grid-template-columns: minmax(0, 1fr); gap: 0.5em; }

.papel-iguales li { display: flex; align-items: center; gap: 0.5em; }

.papel-iguales .iguales__dibujo { flex: none; width: 3.2em; height: 3.2em; }

.papel-iguales .iguales__texto { flex: 1 1 0; font-size: 1em; font-weight: 700; line-height: 1.2; }

.papel-iguales__numero { flex: none; width: 1.6em; font-weight: 700; }

.papel-sobra { display: flex; flex-direction: column; gap: 0.8em; list-style: none; }

.papel-sobra li { display: grid; grid-template-columns: 1.6em repeat(4, minmax(0, 1fr)); gap: 0.4em; align-items: baseline; }

.papel-letras { display: flex; flex-direction: column; gap: 0.4em; list-style: none; }

.papel-letras li { display: flex; align-items: baseline; gap: 0.5em; }

.papel-letras__revuelta { flex: none; min-width: 45%; font-weight: 700; letter-spacing: 0.06em; }

.papel-linea { flex: 1 1 auto; min-width: 3em; border-bottom: 0.06em solid currentColor; }

/* No a todo el ancho: con la lista debajo, no cabría en la hoja. */
.papel-sopa { display: grid; grid-template-columns: repeat(var(--lado), minmax(0, 1fr)); width: 88%; margin: 0.5em auto 0; border: 0.08em solid currentColor; }

.hoja--grande .papel-sopa { width: 80%; }

.papel-sopa > span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-weight: 700; }

.papel-tiques { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.6em 1em; list-style: none; }

.papel-tique { padding: 0.5em; border: 0.06em solid currentColor; }

.papel-tique ul { list-style: none; margin-block: 0.3em; }

.papel-tique ul li { display: flex; justify-content: space-between; gap: 0.5em; line-height: 1.2; }

.papel-tique ul li span:last-child { flex: none; white-space: nowrap; }

.papel-tique__titulo { font-weight: 700; }

.papel-tique__total { display: flex; align-items: baseline; gap: 0.5em; margin-top: 0.5em; font-weight: 700; }

.papel-cambios { display: flex; flex-direction: column; gap: 1em; list-style: none; }

.papel-relojes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; list-style: none; }

.papel-relojes li { display: flex; flex-direction: column; align-items: center; gap: 0.4em; text-align: center; }

.papel-relojes .reloj { width: 78%; height: auto; }

.hoja--grande .papel-relojes .reloj { width: 100%; }

.papel-relojes .papel-linea { flex: none; width: 90%; min-height: 1.2em; }

.papel-objetos { display: flex; flex-direction: column; gap: 0.8em; list-style: none; }

.papel-objetos li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 0.8em; align-items: center; }

.papel-objetos img { width: 4.2em; height: 4.2em; }

/* --------------------------------------------------------------------
   44. Fase 2 · Juegos de preguntas en el taller (sección 10.3)
   -------------------------------------------------------------------- */

.taller__tablero { overflow-y: auto; }

.taller__tablero .opcion, .taller__tablero .hueco, .taller__tablero .tarjeta-momento,
.taller__tablero .ronda__rotulo, .taller__tablero .antes__rotulo, .taller__tablero .hueco__vacio { font-size: var(--t-taller); }

.taller__tablero .ronda__titulo { font-size: var(--t-taller-puntos); }

.taller [data-contar] { display: none; }

/* Después de cada respuesta: pantalla completa para hablar en grupo. */
.taller-pantalla { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-5); padding: var(--e-7) var(--margen-lateral); background: var(--fondo); color: var(--texto); font-size: clamp(var(--t-taller), 2.4vw, var(--t-taller-puntos)); text-align: center; overflow-y: auto; }

.taller-pantalla > *, .taller-pantalla p, .taller-pantalla li { max-width: var(--medida-lectura); font-size: inherit; line-height: 1.3; }

.taller-pantalla .para-conversar { width: 100%; }

.taller-pantalla .boton { flex: none; min-width: var(--medida-1500); font-size: var(--t-taller); }

.taller-orden { display: flex; flex-direction: column; gap: var(--e-2); list-style: none; text-align: left; }

/* --------------------------------------------------------------------
   45. Fase 2 · Móvil: lo que depende del largo del contenido
   Los relatos, momentos e importes cambian en cada partida: la prueba
   completa mostró que algunos no cabían en un móvil de 390 × 844.
   -------------------------------------------------------------------- */

@media (max-width: 599px) {
  /* Cuatro momentos: huecos y tarjetas en dos columnas. Van numerados, así
     que el orden se sigue leyendo bien. */
  .antes[data-columnas='4'] .antes__huecos, .antes[data-columnas='4'] .antes__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .antes[data-columnas='4'] .hueco, .antes[data-columnas='4'] .tarjeta-momento { min-height: var(--toque-principal); }

  /* El pago, en dos columnas: el alto que se ahorra es para las opciones. */
  .pago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1) var(--e-3); padding: var(--e-2) var(--e-3); }

  .pago__compra { grid-column: 1 / -1; font-size: var(--t-tarjeta); }

  .pago__linea { gap: var(--e-1); font-size: var(--t-texto); }
}

/* --------------------------------------------------------------------
   46. Ajustes · Capítulos al final y lectura con letra grande
   -------------------------------------------------------------------- */

/* Con letra grande o mayor, la columna lateral robaría demasiado espacio: el
   texto se queda solo, centrado, y el índice se pliega encima de él. */
@media (min-width: 1024px) {
  html[data-texto='grande'] .plantilla-lectura,
  html[data-texto='muy-grande'] .plantilla-lectura,
  html[data-texto='enorme'] .plantilla-lectura { flex-direction: column; align-items: center; }

  html[data-texto='grande'] .plantilla-lectura__lateral,
  html[data-texto='muy-grande'] .plantilla-lectura__lateral,
  html[data-texto='enorme'] .plantilla-lectura__lateral { display: none; }

  html[data-texto='grande'] .indice-plegado,
  html[data-texto='muy-grande'] .indice-plegado,
  html[data-texto='enorme'] .indice-plegado { display: block; }

  html[data-texto='grande'] .guia-imprimir-movil,
  html[data-texto='muy-grande'] .guia-imprimir-movil,
  html[data-texto='enorme'] .guia-imprimir-movil { display: flex; }
}

/* --------------------------------------------------------------------
   47. Ajustes · Páginas legales
   -------------------------------------------------------------------- */

.tabla-cookies { width: 100%; border-collapse: collapse; font-size: var(--t-nota); }

.tabla-cookies th, .tabla-cookies td { padding: var(--e-2) var(--e-3); border-bottom: var(--grosor-fino) solid var(--borde); text-align: left; vertical-align: top; }

.tabla-cookies code { overflow-wrap: anywhere; }

/* En móvil, cada cookie es una ficha: cinco columnas no caben a 390 px. */
@media (max-width: 767px) {
  .tabla-cookies thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .tabla-cookies tr, .tabla-cookies th, .tabla-cookies td { display: block; }

  .tabla-cookies th, .tabla-cookies td { padding-inline: 0; border-bottom: 0; }

  .tabla-cookies tr { padding-block: var(--e-2); border-bottom: var(--grosor-fino) solid var(--borde); }
}

/* --------------------------------------------------------------------
   48. Ajustes · Aviso de cookies (sección 3.4)
   -------------------------------------------------------------------- */

/* El aviso reserva su alto abajo (ver aviso-cookies.js): así no tapa ni el
   final de la página ni la barra de «Empezar a jugar». */
body { padding-bottom: var(--alto-aviso, 0px); }

.previa__pie { bottom: var(--alto-aviso, 0px); }

.aviso-cookies { position: fixed; left: 50%; bottom: 0; z-index: 25; width: min(100%, calc(var(--ancho-contenedor) + 2 * var(--margen-lateral))); max-height: 45vh; max-height: 45dvh; overflow-y: auto; transform: translateX(-50%); background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-bottom: 0; border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; }

.aviso-cookies[hidden] { display: none; }

.aviso-cookies__interior { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--margen-lateral); }

.aviso-cookies__titulo { font-size: var(--t-tarjeta); font-weight: 800; }

/* Pegados abajo: con letra Enorme en móvil el texto se desplaza, y responder
   tiene que estar siempre a la vista. */
.aviso-cookies__botones { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--separacion-toque); padding-block: var(--e-1); background: var(--superficie); }

.aviso-cookies__mas { font-size: var(--t-nota); }

/* Primera capa compacta (ajustes K, 43.6): la frase en texto normal, los dos
   botones iguales y de contorno, y «Elegir · Más información» en una línea
   pequeña. Así el aviso no se parece a «Empezar el reto» ni a «Empezar a jugar». */
.aviso-cookies__frase { font-size: var(--t-texto); font-weight: 700; }

.aviso-cookies__botones > .boton--contorno { flex: 1 1 10rem; }

.aviso-cookies__otros { font-size: var(--t-nota); }

.aviso-cookies .aviso-cookies__elegir { min-height: var(--toque-compacto); padding: 0; font-size: var(--t-nota); text-decoration: underline; }

/* En pantallas anchas, «Elegir · Más información» va en la fila de los botones
   (ajustes K, 44.4): el aviso baja de unos 190 a unos 125 px y, en una tablet
   apaisada, la barra de «Empezar a jugar» cabe por encima de él. */
@media (min-width: 900px) {
  .aviso-cookies__interior:has(> .aviso-cookies__otros) { flex-flow: row wrap; align-items: center; column-gap: var(--e-5); }
  .aviso-cookies__interior:has(> .aviso-cookies__otros) > .aviso-cookies__frase { flex-basis: 100%; }
  .aviso-cookies__interior:has(> .aviso-cookies__otros) > .aviso-cookies__botones { flex: 1 1 28rem; }
}

/* Oculto durante la partida y en el taller, salvo que se haya pedido abrirlo. */
body.en-partida .aviso-cookies, body.en-taller .aviso-cookies,
.pagina-taller .aviso-cookies:not(.aviso-cookies--pedido) { display: none; }

.pie__boton { min-height: var(--toque-compacto); padding: var(--e-1) 0; background: none; border: 0; color: var(--enlace); font-size: var(--t-nota); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }

.pie__boton:hover { color: var(--principal-oscuro); }

/* --------------------------------------------------------------------
   49. Ajustes · Submenús de «Juegos» y «Guía de la memoria» (C, sección 9)
   Solo en escritorio, con letra normal y con JavaScript. En los demás casos
   no hay flecha ni panel: el enlace lleva a su página, como siempre.
   -------------------------------------------------------------------- */

.nav-principal__flecha, .menu-panel { display: none; }

@media (min-width: 1200px) {
  .nav-principal__con-panel { display: flex; align-items: center; }

  /* 44 × 44 de zona táctil, aunque la flecha se vea pequeña. Los márgenes
     negativos la acercan al texto: el menú sigue cabiendo en una fila a 1280 px.
     Va por encima de los enlaces de los lados: si no, con el dedo, sus esquinas
     eran del enlace y el toque llevaba a la página en lugar de abrir el menú
     (ajustes K, 46.6). */
  html.con-menus[data-texto='normal'] .nav-principal__flecha { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--toque-compacto); height: var(--toque-compacto); margin-inline: calc(var(--e-3) * -1) calc(var(--e-2) * -1); padding: 0; background: none; color: var(--texto); border: 0; border-radius: var(--radio-boton); cursor: pointer; }

  .nav-principal__flecha:hover { background: var(--neutro); }

  .nav-principal__icono-flecha { width: var(--medida-100); height: var(--medida-100); fill: none; stroke: currentColor; transition: transform 0.12s; }

  .nav-principal__flecha[aria-expanded='true'] .nav-principal__icono-flecha { transform: rotate(180deg); }

  /* Menos relleno que los demás enlaces: la flecha no debe mandar «Letra y
     contraste» a una segunda línea a 1280 px. */
  .nav-principal__enlace { padding-inline: var(--e-2); }

  .cabecera { position: relative; }

  /* Justo debajo de la cabecera, sin hueco: tapa la página, no la empuja. */
  html.con-menus[data-texto='normal'] .menu-panel:not([hidden]) { display: block; position: absolute; top: 100%; inset-inline: 0; z-index: 20; background: var(--superficie); border-block: var(--grosor-fino) solid var(--borde); box-shadow: var(--sombra-tarjeta); animation: aparecer-panel 0.12s ease-out; }

  /* La franja entre el texto del menú y el panel cuenta como panel: al bajar el
     ratón en diagonal no se sale de él. Mide lo que el relleno de la cabecera:
     más alta, taparía los otros elementos del menú. */
  .menu-panel::before { content: ''; position: absolute; bottom: 100%; inset-inline: 0; height: var(--e-2); }
}

@keyframes aparecer-panel {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-movimiento='reducido'] .menu-panel { animation: none !important; }

html[data-movimiento='reducido'] .nav-principal__icono-flecha { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .menu-panel { animation: none !important; }
}

.menu-panel__interior { max-width: calc(var(--ancho-contenedor) + 2 * var(--margen-lateral)); margin-inline: auto; padding: var(--e-4) var(--margen-lateral); }

.menu-panel__capacidades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); list-style: none; }

.menu-panel__capacidad { display: flex; align-items: center; gap: var(--e-2); min-height: var(--toque-compacto); padding: var(--e-1) var(--e-3); border-radius: var(--radio-boton); font-weight: 800; text-decoration: none; }

html[data-colores='contraste'] .menu-panel__capacidad { border: var(--grosor-fino) solid var(--borde); }

.menu-panel__juegos { list-style: none; margin-top: var(--e-1); }

.menu-panel__capitulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-1) var(--e-5); list-style: none; }

.menu-panel__todo { display: inline-flex; align-items: center; min-height: var(--toque-compacto); margin-top: var(--e-3); font-weight: 800; }

/* --------------------------------------------------------------------
   50. Ajustes B · Bloque «Pensada para jugar en la tablet» (sección 5)
   -------------------------------------------------------------------- */

.tablet { display: flex; flex-direction: column; align-items: center; gap: var(--e-5); padding: var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta-grande); }

/* Lleva sus propios colores: sobre el fondo oscuro la tablet se perdería. */
.tablet__dibujo { width: 70%; height: auto; }

html[data-colores='oscuro'] .tablet__dibujo { padding: var(--e-3); background: var(--hoja-fondo); border-radius: var(--radio-tarjeta); }

.tablet__texto { min-width: 0; width: 100%; }

.tablet__antetitulo { color: var(--principal-oscuro); font-weight: 800; }

.tablet__entradilla { margin-top: var(--e-2); color: var(--texto-suave); font-size: var(--t-destacado); }

.tablet__ventajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-4); list-style: none; }

.tablet__ventajas li { display: flex; align-items: flex-start; gap: var(--e-2); }

.tablet__ventajas .icono--pequeno { flex: none; margin-top: var(--e-1); color: var(--principal); }

.tablet__ventajas p { color: var(--texto-suave); }

.tablet__botones { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); margin-top: var(--e-4); }

.tablet__instalada { font-weight: 800; color: var(--principal-oscuro); }

@media (max-width: 619.98px) {
  .tablet__ventajas { grid-template-columns: minmax(0, 1fr); }

  .tablet__botones .boton { width: 100%; }
}

/* Los dos botones, uno al lado del otro y del mismo ancho. */
@media (min-width: 620px) {
  .tablet__botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En horizontal, ilustración a la izquierda y texto a la derecha. Como la
   columna de texto es estrecha, los dos botones van uno debajo del otro, a
   todo su ancho: lado a lado, «Ponerla en la pantalla de inicio» se partía en
   dos líneas y quedaba más alto que «Probar un juego» (ajustes I, 36). */
@media (min-width: 1024px) {
  .tablet { flex-direction: row; align-items: flex-start; gap: var(--e-6); }

  .tablet__botones { grid-template-columns: minmax(0, 1fr); }

  .tablet__dibujo { flex: 0 1 45%; width: 45%; min-width: 0; }

  .tablet__texto { flex: 1 1 55%; }
}

/* Ventana de instalar: misma forma que el panel de ajustes. */
.ventana-instalar { width: min(100% - 2 * var(--margen-lateral), var(--ancho-lectura)); max-height: 90vh; padding: var(--e-5); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta-grande); margin: auto; }

.ventana-instalar::backdrop { background: var(--velo-pausa); }

.ventana-instalar__cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }

.ventana-instalar__cabecera h2 { flex: 1 1 var(--medida-1500); font-size: var(--t-seccion); }

.ventana-instalar__pestanas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-block: var(--e-4); }

.ventana-instalar__pestana { min-height: var(--toque-compacto); padding: var(--e-1) var(--e-4); background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-boton); font-weight: 700; cursor: pointer; }

/* La pestaña activa se distingue por el borde grueso, no solo por el color. */
.ventana-instalar__pestana[aria-selected='true'] { background: var(--superficie-marcada); border: var(--grosor-marca) solid var(--principal); font-weight: 800; }

.ventana-instalar__pasos { display: flex; flex-direction: column; gap: var(--e-3); list-style: none; }

.ventana-instalar__pasos li { display: flex; align-items: center; gap: var(--e-3); }

.ventana-instalar__dibujo { flex: none; width: var(--medida-300); height: var(--medida-300); padding: var(--e-1); background: var(--neutro); border-radius: var(--radio-boton); }

.ventana-instalar__panel .boton { margin-block: var(--e-2) var(--e-4); }

.fin__instalar { margin-top: var(--e-3); color: var(--texto-suave); font-size: var(--t-nota); }

/* --------------------------------------------------------------------
   51. Ajustes B · Generador de fichas (sección 6.2)
   -------------------------------------------------------------------- */

.cabecera-seccion--ambar { background: var(--aviso-fondo); }

.impresion { display: none; }

.fichas { display: flex; flex-direction: column; gap: var(--e-6); padding-top: var(--e-6); }

.fichas__pasos { min-width: 0; display: flex; flex-direction: column; gap: var(--e-6); }

.fichas__pasos section { display: flex; flex-direction: column; gap: var(--e-3); }

.paso-ficha { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-seccion); }

.paso-ficha > span:first-child { flex: none; display: flex; align-items: center; justify-content: center; width: var(--medida-200); height: var(--medida-200); background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-radius: 50%; font-size: var(--t-destacado); }

.fichas .filtros { margin-block: 0; }

/* En rem: con letra grande caben menos columnas y los nombres no se salen. */
.fichas__rejilla { --columnas-ficha: 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(7.5rem, (100% - (var(--columnas-ficha) - 1) * var(--e-3)) / var(--columnas-ficha) - 1px)), 1fr)); gap: var(--e-3); list-style: none; }

.ficha-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); min-width: 0; padding: var(--e-2); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.ficha-tarjeta[hidden] { display: none; }

.ficha-tarjeta__elegir { position: relative; width: 100%; display: flex; flex-direction: column; gap: var(--e-1); padding: 0; background: none; color: var(--texto); border: 0; text-align: left; cursor: pointer; }

.ficha-tarjeta__imagen { display: block; padding: var(--e-2); border-radius: var(--radio-boton); }

.ficha-tarjeta__imagen img { width: 100%; height: auto; background: var(--hoja-fondo); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-pequeno); }

.ficha-tarjeta__nombre { font-weight: 800; line-height: 1.2; }

.ficha-tarjeta__marca { display: none; position: absolute; top: var(--e-1); right: var(--e-1); padding: 0 var(--e-2); background: var(--principal); color: var(--principal-texto); border-radius: var(--radio-boton); font-size: var(--t-chip); font-weight: 800; }

/* La elegida lleva borde grueso y etiqueta: nunca solo color. El relleno descuenta
   ese grosor de más para que la tarjeta no se mueva ni desalinee su botón. */
.ficha-tarjeta--elegida { padding: calc(var(--e-2) - (var(--grosor-pista) - var(--grosor-fino))); border: var(--grosor-pista) solid var(--principal); }

.ficha-tarjeta--elegida .ficha-tarjeta__marca { display: block; }

.ficha-tarjeta__anadir { margin-top: auto; min-height: var(--toque-min); padding: 0; font-size: var(--t-nota); }

/* «+ Juntar con otras fichas» solo en la tarjeta elegida (ajustes K, 45.2): en
   las 19 a la vez competía con lo principal, que es elegir. */
.ficha-tarjeta:not(.ficha-tarjeta--elegida) .ficha-tarjeta__anadir { display: none; }

/* Franja «Has elegido… · Seguir →» bajo la tarjeta elegida (ajustes K, 45.1):
   en tablet y móvil, la respuesta visible a la elección. No flota, así que no
   choca con la decisión 215. */
.ficha-elegida { width: 100%; margin-top: var(--e-2); padding: var(--e-2) var(--e-3); background: var(--superficie-marcada); color: var(--principal-oscuro); border-radius: var(--radio-boton); font-size: var(--t-nota); font-weight: 700; }

.ficha-elegida[hidden] { display: none; }

.ficha-elegida a { display: inline-flex; align-items: center; min-height: var(--toque-compacto); color: inherit; }

.fichas__niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }

.fichas .interruptor small { display: block; color: var(--texto-suave); font-size: var(--t-nota); font-weight: 400; }

/* Panel «Tu ficha»: en una columna, los pasos 2 y 3 van antes que la vista previa. */
.fichas__vista { min-width: 0; display: flex; flex-direction: column; gap: var(--e-6); }

.fichas__paso { display: flex; flex-direction: column; gap: var(--e-3); }

.vista-previa { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-3); background: var(--neutro); border-radius: var(--radio-tarjeta-grande); }

.vista-previa__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }

.vista-previa__titulo { font-weight: 800; }

.vista-previa__pestanas { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.vista-previa__pestanas button { min-height: var(--toque-min); padding: 0 var(--e-3); background: none; color: var(--texto); border: var(--grosor-boton) solid transparent; border-radius: var(--radio-boton); font-weight: 700; cursor: pointer; }

.vista-previa__pestanas [aria-pressed='true'] { background: var(--superficie); border-color: var(--principal); font-weight: 800; }

.vista-previa .hojas { margin: 0 auto; min-height: 0; width: 100%; }

.vista-previa .previa__nota:empty { display: none; }

.fichas__vista .fichas__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin: 0; }

.fichas__vista .fichas__acciones .boton--principal { grid-column: 1 / -1; }

/* Bandeja oscura del cuadernillo: acompaña mientras se eligen las fichas. */
.bandeja { position: sticky; bottom: var(--alto-aviso, 0px); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--panel-oscuro); color: var(--panel-oscuro-texto); border: var(--grosor-fino) solid var(--panel-oscuro-borde); border-radius: var(--radio-tarjeta); }

.bandeja[hidden] { display: none; }

.bandeja__titulo { font-weight: 800; }

.bandeja__fichas { flex: 1 1 var(--medida-1500); display: flex; flex-wrap: wrap; gap: var(--e-1); list-style: none; }

.bandeja__ficha { display: flex; align-items: center; gap: var(--e-1); padding-left: var(--e-2); background: var(--panel-oscuro-tarjeta); border-radius: var(--radio-boton); font-size: var(--t-nota); }

.bandeja__ficha button { min-width: var(--toque-min); min-height: var(--toque-min); background: none; color: inherit; border: 0; cursor: pointer; }

/* Botón que baja hasta la vista previa: solo en una columna. */
.fichas__ver { position: sticky; bottom: var(--alto-aviso, 0px); z-index: 3; align-self: center; }

.fichas__ver--oculto { visibility: hidden; }

.fichas__descargas { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); margin-block: var(--e-3); }

.cuadernos__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }

.cuadernos__cabeza .filtros { margin-block: 0; }

.rejilla-cuadernos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--medida-900)), 1fr)); gap: var(--e-3); margin-block: var(--e-3); list-style: none; }

.rejilla-cuadernos li[hidden] { display: none; }

.tarjeta-cuaderno { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: var(--e-1); padding: var(--e-3); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); text-decoration: none; }

.tarjeta-cuaderno:hover { border-color: var(--texto); color: var(--texto); }

.tarjeta-cuaderno__mes { font-weight: 800; }

.tarjeta-cuaderno__pdf { padding: 0 var(--e-1); background: var(--cap-lenguaje-fondo); color: var(--cap-lenguaje-texto); border-radius: var(--radio-pequeno); font-size: var(--t-chip); font-weight: 800; }

.tarjeta-cuaderno__datos { grid-column: 1 / -1; color: var(--texto-suave); font-size: var(--t-nota); }

.campo-etiqueta { display: flex; flex-direction: column; gap: var(--e-1); margin-block: var(--e-3); font-weight: 700; }

/* Dos columnas desde 1024 px: pasos a la izquierda y previa fija a la derecha.
   La hoja se limita por el alto de la ventana: así cabe siempre y no hace falta
   scroll interno, igual que la columna lateral de la guía. */
@media (min-width: 1024px) {
  .fichas { display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-vista-previa); align-items: start; gap: var(--e-6); }

  /* Todo el panel es fijo: vista previa, nivel, ajustes y botones. */
  .fichas__vista { position: sticky; top: var(--e-4); grid-row: 1; grid-column: 2; gap: var(--e-3); padding: var(--e-3); background: var(--neutro); border-radius: var(--radio-tarjeta-grande); }

  .vista-previa { order: -1; padding: 0; background: none; border-radius: 0; }

  .fichas__vista .paso-ficha { font-size: var(--t-destacado); }

  .fichas__vista .paso-ficha > span:first-child { width: var(--e-6); height: var(--e-6); font-size: var(--t-nota); }

  .fichas__paso { gap: var(--e-2); }

  .fichas__vista .lista-interruptores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1) var(--e-3); }

  .fichas__vista .interruptor { min-height: 0; padding: var(--e-1) var(--e-2); gap: var(--e-2); font-size: var(--t-nota); line-height: 1.2; }

  .fichas__vista .interruptor small { display: none; }

  .fichas__vista .vista-previa__pestanas button { min-height: var(--toque-compacto); }

  /* Los tres botones en una fila: así la hoja gana altura. */
  .fichas__vista .fichas__acciones { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }

  .fichas__vista .fichas__acciones .boton--principal { grid-column: auto; }

  .fichas__vista .fichas__acciones .boton { min-height: var(--toque-compacto); padding: 0 var(--e-1); font-size: var(--t-nota); }

  .fichas__vista .fichas__acciones .boton svg { display: none; }

  .fichas__vista .filtros { gap: var(--e-1); }

  .fichas__vista .filtro { min-height: var(--toque-compacto); padding-block: 0; font-size: var(--t-nota); }

  /* Con 4 columnas los títulos y «Añadir al cuadernillo» se parten: solo desde 1600 px.
     El mínimo en rem de la rejilla quita columnas si la letra no cabe. */
  @media (min-width: 1600px) {
    .fichas__rejilla { --columnas-ficha: 4; }
  }

  /* Miniaturas algo más bajas. */
  @media (min-width: 1280px) {
    .ficha-tarjeta__imagen img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
  }

  .fichas__vista .tarjeta-nivel { min-height: 0; padding: var(--e-1) var(--e-2); }

  .fichas__vista .tarjeta-nivel__dibujo, .fichas__vista .tarjeta-nivel__detalle { display: none; }

  .fichas__vista .tarjeta-nivel__nombre { margin-top: 0; font-size: var(--t-texto); }

  /* La hoja cede sitio para que los botones sigan siempre a la vista. */
  .vista-previa .hojas { width: min(100%, calc((100vh - var(--alto-panel-ficha)) * 0.707)); }

  .fichas__vista:has([data-temas-ficha]:not([hidden])) .hojas { width: min(100%, calc((100vh - var(--alto-panel-ficha) - var(--alto-temas-ficha)) * 0.707)); }

  /* Con letra grande el panel no cabe en la pantalla: deja de ser fijo. */
  html[data-texto='grande'] .fichas__vista, html[data-texto='muy-grande'] .fichas__vista, html[data-texto='enorme'] .fichas__vista { position: static; }

  /* Con el panel fijo al lado, la franja de la ficha elegida sobra. Con letra
     grande el panel deja de ser fijo y la franja vuelve (ajustes K, 45.1). */
  html[data-texto='normal'] .ficha-elegida { display: none; }

  /* Y, como ya no es fijo, la hoja no tiene por qué encogerse para caber en
     el alto de la pantalla: a 768 px de alto y con letra enorme se quedaba en
     11 px (ajustes I, 36; lo encontró la prueba de textos recortados). */
  html[data-texto='grande'] .vista-previa .hojas, html[data-texto='muy-grande'] .vista-previa .hojas, html[data-texto='enorme'] .vista-previa .hojas { width: 100%; }

  .bandeja { grid-column: 1 / -1; }

  .fichas__ver { display: none; }
}

/* --------------------------------------------------------------------
   52. Ajustes B · Hojas de las fichas (sección 6.3)
   -------------------------------------------------------------------- */

.hoja--grande { font-size: min(3.05cqw, var(--letra-hoja-grande)); }

.hoja__datos { display: grid; grid-template-columns: 2fr 1fr; gap: 1em; padding-bottom: 0.5em; }

.hoja__datos span { border-bottom: 0.06em solid currentColor; }

.hoja__instrucciones { display: flex; align-items: flex-start; gap: 0.4em; }

.hoja__icono { flex: none; width: 1.2em; height: 1.2em; }

.hoja__pie { display: flex; justify-content: space-between; gap: 1em; font-size: 0.75em; text-align: left; }

/* «Ahorrar tinta»: sin colores de relleno, solo líneas. */
.hoja--sin-color img, .hoja--sin-color svg { filter: grayscale(1) contrast(1.2); }

.papel-bloque { display: flex; flex-direction: column; gap: 0.3em; margin-bottom: 1em; }

.papel-etiquetas { display: flex; flex-wrap: wrap; gap: 0.4em; margin-block: 0.6em; list-style: none; }

.papel-etiquetas li { padding: 0.1em 0.5em; border: 0.08em solid currentColor; border-radius: 0.4em; font-weight: 700; }

.papel-columnas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); gap: 1em; list-style: none; }

.papel-columnas li { display: flex; flex-direction: column; justify-content: space-between; }

.papel-columnas .papel-linea { flex: none; }

.papel-grupos { display: flex; flex-direction: column; gap: 0.7em; list-style: none; }

.papel-plano { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4em; margin-bottom: 0.8em; }

.papel-plano > div { display: flex; flex-direction: column; align-items: center; gap: 0.1em; padding: 0.3em; border: 0.08em solid currentColor; border-radius: 0.3em; font-size: 0.9em; line-height: 1.1; text-align: center; }

.hoja--grande .papel-plano > div { font-size: 1em; }

.papel-plano img { width: 2.6em; height: 2.6em; }

.papel-portada { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; text-align: center; }

.papel-portada__titulo { font-size: 2.6em; font-weight: 800; line-height: 1.1; }

.papel-portada__subtitulo { font-size: 1.3em; }

.papel-portada__para { font-size: 1.3em; font-weight: 700; }

.hoja--portada .hoja__cabeza { display: none; }

.papel-indice { display: flex; flex-direction: column; gap: 0.4em; list-style: none; }

.papel-indice li { display: grid; grid-template-columns: 5em minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.5em; border-bottom: 0.04em solid currentColor; }

/* --------------------------------------------------------------------
   53. Ajustes B · SEO: textos nuevos
   -------------------------------------------------------------------- */

.portada__clave { margin-bottom: var(--e-1); color: var(--texto-suave); font-weight: 700; }


.promo__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin-top: var(--e-2); list-style: none; }

.promo__enlaces a { color: var(--panel-oscuro-acento); font-weight: 700; }

.ficha-tarjeta .chip { max-width: 100%; white-space: normal; }

/* --------------------------------------------------------------------
   54. Ajustes C · Enlaces sin subrayado, salvo en el texto (sección 10)
   El subrayado sirve para distinguir un enlace en mitad de un párrafo. En
   menús, listas y tarjetas, su sitio ya dice que se pueden pulsar. El foco de
   teclado no cambia: es el contorno grueso de toda la web.
   -------------------------------------------------------------------- */

.migas a, .pie__enlaces a, .pie__boton, .indice-lateral__lista a, .lista-lateral a, .indice-capitulos a,
.sigue-leyendo__tarjeta, .sigue-leyendo__anterior, .tarjeta-practica, .capitulo-final, .tarjeta-capitulo, .tarjeta-enlace, .tarjeta-cuaderno,
.boton--enlace, .seccion-capacidad__enlace, .menu-panel__todo, .menu-panel__juegos a, .menu-panel__capitulos a { text-decoration: none; }

/* Migas: color principal y un poco más de peso, porque ya no van subrayadas. */
.migas a { color: var(--enlace); font-weight: 600; }

/* Enlaces sueltos con flecha. */
.seccion-capacidad__enlace, .menu-panel__todo { color: var(--enlace); font-weight: 700; }

/* Con el ratón o el foco, subrayado. */
.migas a:hover, .pie__enlaces a:hover, .pie__boton:hover, .boton--enlace:hover, .seccion-capacidad__enlace:hover, .menu-panel__todo:hover,
.migas a:focus-visible, .pie__enlaces a:focus-visible, .pie__boton:focus-visible, .boton--enlace:focus-visible, .seccion-capacidad__enlace:focus-visible, .menu-panel__todo:focus-visible { text-decoration: underline; }

/* Índices y capítulos: fondo suave y subrayado. */
.indice-lateral__lista a:hover, .lista-lateral a:hover, .indice-capitulos a:hover,
.indice-lateral__lista a:focus-visible, .lista-lateral a:focus-visible, .indice-capitulos a:focus-visible { background: var(--neutro); text-decoration: underline; }

/* Enlaces dentro del texto y a estudios o fuentes: siguen subrayados y, con el
   ratón, más gruesos. */
.prosa a:hover, .prosa a:focus-visible, .ref a:hover, .ref a:focus-visible, .fuente__enlace:hover, .fuente__enlace:focus-visible, .faq-tarjeta a:hover, .faq-tarjeta a:focus-visible { text-decoration-thickness: var(--grosor-marca); }

.ref a { text-decoration: underline; }

/* Filas del panel: como ya no van subrayadas, cada una parece pulsable por su
   tamaño, su fondo y la flecha que aparece a la derecha (sección 10.2). */
.menu-panel__juegos a, .menu-panel__capitulos a { display: flex; align-items: center; gap: var(--e-2); min-height: var(--toque-compacto); padding: 8px 12px; color: var(--texto); border-radius: var(--radio-boton); font-size: var(--t-fila-panel); font-weight: 600; }

.menu-panel__juegos a::after, .menu-panel__capitulos a::after, .menu-panel__capacidad::after { content: '›'; margin-left: auto; font-size: var(--t-destacado); font-weight: 800; line-height: 1; opacity: 0; }

.menu-panel__juegos a:hover, .menu-panel__capitulos a:hover, .menu-panel__juegos a:focus-visible, .menu-panel__capitulos a:focus-visible { background: var(--neutro); color: var(--texto); text-decoration: underline; }

.menu-panel__capacidad:hover, .menu-panel__capacidad:focus-visible { color: inherit; text-decoration: underline; }

.menu-panel__juegos a:hover::after, .menu-panel__capitulos a:hover::after, .menu-panel__capacidad:hover::after,
.menu-panel__juegos a:focus-visible::after, .menu-panel__capitulos a:focus-visible::after, .menu-panel__capacidad:focus-visible::after { opacity: 1; }

/* En alto contraste, todos los enlaces llevan subrayado: quien elige ese modo
   necesita la máxima claridad. !important porque debe ganar a todo lo anterior. */
html[data-colores='contraste'] a { text-decoration: underline !important; }

html[data-colores='contraste'] .pie__boton, html[data-colores='contraste'] .boton--enlace { text-decoration: underline; }

/* --------------------------------------------------------------------
   55. Ajustes D · Plantilla de página de juego (sección 12)
   -------------------------------------------------------------------- */

/* Entre la tarjeta de la previa y «Cómo se juega», el espacio entre secciones. */
.juego-contenido .plantilla-lectura { padding-top: var(--e-7); }

/* El primer título va en lo alto de la columna, a la misma altura que el índice:
   su margen se sumaría al de arriba y el hueco pasaría de 64 px. */
.juego-contenido .prosa > section:first-child > h2 { margin-top: 0; }

.juego-contenido .comparativa-marco { margin-top: var(--e-3); }

.juego-contenido .comparativa-marco + p, .juego-grupo > * + * { margin-top: var(--e-3); }

.tabla-niveles { width: 100%; table-layout: fixed; border-collapse: collapse; }

.tabla-niveles th, .tabla-niveles td { padding: var(--e-2) var(--e-3); border: var(--grosor-fino) solid var(--borde); text-align: left; vertical-align: top; }

.tabla-niveles thead th { background: var(--neutro); font-weight: 800; }

.dia-a-dia { display: flex; align-items: flex-start; gap: var(--e-3); margin-top: var(--e-4); padding: var(--e-3) var(--e-4); background: var(--superficie-marcada); border-radius: var(--radio-tarjeta); }

.dia-a-dia .icono { flex: none; color: var(--principal); }

html[data-colores='contraste'] .dia-a-dia { border: var(--grosor-fino) solid var(--borde); }

.juego-ficha { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-3); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); text-decoration: none; }

.juego-ficha:hover { border-color: var(--texto); color: var(--texto); }

.juego-ficha img { flex: none; width: var(--medida-500); height: auto; border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-pequeno); }

.juego-ficha span { display: flex; flex-direction: column; gap: var(--e-1); }

.juego-ficha span span { color: var(--texto-suave); font-size: var(--t-nota); }

/* Tres tarjetas a todo el ancho, de borde a borde del contenedor. */
@media (min-width: 620px) {
  .juego-otros .rejilla-juegos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Compras largas en móvil: con cinco productos o siete monedas, las opciones se
   salían de la pantalla. El alto que se ahorra aquí es el que necesitan. El precio
   no se parte: una cifra cortada en dos líneas se lee mal. */
@media (max-width: 599px) {
  .tique { gap: var(--e-1); padding: var(--e-2) var(--e-3); }

  .tique__tienda { display: none; }

  .tique li { gap: var(--e-2); padding-block: var(--e-1); line-height: 1.25; }

  .tique li strong { flex: none; white-space: nowrap; }

  .tique__total { font-size: var(--t-tarjeta); }

  .importe { gap: var(--e-2); }

  .importe .dinero { --tam-moneda: 1.75rem; --ancho-billete: 2.6rem; }

  /* ¿Qué pasó antes?, cuatro momentos: los huecos vacíos ocupan lo justo y la
     etiqueta «Elegido» va sobre el borde, para no alargar una tarjeta ya larga. */
  .antes[data-columnas='4'] .hueco:not(.hueco--lleno) { min-height: var(--toque-min); }

  .antes[data-columnas='4'] .tarjeta-momento { min-height: var(--toque-min); }

  .antes[data-columnas='4'] .tarjeta-momento--elegida { padding-bottom: var(--e-3); }

  .antes[data-columnas='4'] .tarjeta-momento--elegida .etiqueta-elegido { position: absolute; right: var(--e-1); bottom: 0; transform: translateY(50%); }

  .antes__pie .boton { min-height: var(--toque-medio); }

  /* La fecha completa ocupa más: con cuatro momentos, la pregunta va sin rótulo. */
  .antes[data-columnas='4'] .para-conversar__rotulo { display: none; }
}

/* --------------------------------------------------------------------
   56. Ajustes de la fase 2 (E)
   -------------------------------------------------------------------- */

.juego-cabeza__duracion { margin-top: var(--e-1); color: var(--texto-suave); font-size: var(--t-nota); }

/* Pie del panel de «Juegos»: sus dos enlaces, en la misma línea. */
.menu-panel__pie { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }

/* Fuentes de las fechas de ¿Qué pasó antes? */
.fuentes-fechas { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); overflow-wrap: anywhere; }

/* De dónde sale la información (sección 15). Bajo el título de cada capítulo,
   una sola línea: minutos, revisión y «Ver fuentes ↓» (ajustes K, 46.3). */
.capitulo-meta { margin-top: var(--e-3); color: var(--texto-suave); font-size: var(--t-nota); }

.enlace-suelto { color: var(--enlace); font-weight: 700; text-decoration: none; }

.enlace-suelto:hover, .enlace-suelto:focus-visible { text-decoration: underline; }

.fuente__texto { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }

.fuente__cita, .fuente__citada { color: var(--texto-suave); font-size: var(--t-nota); }

.lista-fuentes + h3 { margin-top: var(--e-6); }

.prosa ul.lista-fuentes { padding: 0; list-style: none; }

.prosa ul.lista-fuentes .fuente { margin: 0; }

.prosa ul.lista-fuentes .fuente + .fuente { margin-top: var(--e-3); }

/* Globo de las llamadas [n]. Lo coloca js/nucleo/globos.js, siempre dentro de la
   pantalla. Es un dibujo aparte: el nombre accesible ya va en el enlace. */
.globo-fuente { position: fixed; z-index: 30; max-width: min(20rem, calc(100vw - 2rem)); padding: var(--e-2) var(--e-3); background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-radius: var(--radio-boton); font-size: var(--t-nota); line-height: 1.3; }

/* --------------------------------------------------------------------
   57. Ajustes de la fase 2 (F)
   -------------------------------------------------------------------- */

/* 23. En vertical, pregunta y opciones van juntas y centradas en el espacio
   libre: las opciones ya no se quedan abajo del todo, lejos de la pregunta. */
@media (max-aspect-ratio: 5/4) {
  .ronda { justify-content: center; }

  .ronda__pregunta { flex: none; }

  .ronda__opciones { margin-top: 0; }

  .ronda__opciones--rejilla { flex: none; }

  .ronda__opciones--rejilla .opcion { font-size: var(--t-opcion); }
}

@media (max-aspect-ratio: 5/4) and (min-width: 600px) {
  .opcion, .ronda__opciones--rejilla .opcion { min-height: var(--alto-opcion-vertical); font-size: var(--t-opcion-vertical); }
}

/* 24. «¿Algo no funciona?», en el pie y en las páginas de aviso. */
.pie__ayuda { margin-top: var(--e-3); }

.pie__ayuda a, .aviso-fallo a { font-weight: 700; }

/* 16. «Mira cómo se juega». La capa cubre la partida para que nadie toque el
   tablero sin querer; solo atienden sus botones. */
.demo { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; }

.demo__franja { padding: var(--e-3) var(--e-4); background: var(--boton-oscuro); color: var(--boton-oscuro-texto); font-size: var(--t-destacado); font-weight: 800; line-height: 1.25; text-align: center; }

.demo__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--separacion-toque); padding: var(--e-3); background: var(--superficie); border-top: var(--grosor-fino) solid var(--borde); }

.demo__botones .boton { flex: 1 1 0; min-height: var(--toque-medio); }

.demo__mano-sitio { position: fixed; z-index: 13; width: 0; height: 0; pointer-events: none; transition: left 0.6s ease-in-out, top 0.6s ease-in-out; }

.demo__mano-sitio--fija { position: absolute; transition: none; }

.demo__mano { position: absolute; left: -24px; top: -3px; width: 64px; max-width: none; height: 64px; filter: drop-shadow(0 3px 4px var(--sombra-demo)); }

.demo__onda { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border: var(--grosor-marca) solid var(--principal); border-radius: 50%; opacity: 0; }

.demo__mano-sitio--toque .demo__onda { animation: demo-onda 0.45s ease-out; }

@keyframes demo-onda {
  from { opacity: 1; transform: scale(0.4); }
  to { opacity: 0; transform: scale(1.3); }
}

.demo__vineta { position: absolute; inset: 0; z-index: 11; overflow: hidden; background: var(--fondo); }

.ventana-demo { width: min(100% - 2 * var(--margen-lateral), var(--ancho-lectura)); margin: auto; padding: var(--e-5); background: var(--superficie); color: var(--texto); border: 0; border-radius: var(--radio-tarjeta); text-align: center; }

.ventana-demo::backdrop { background: var(--velo-pausa); }

.ventana-demo__botones { display: flex; flex-direction: column; gap: var(--separacion-toque); margin-top: var(--e-4); }

/* En horizontal, la capa ocupa el panel de la derecha y deja el tablero a la vista. */
@media (min-aspect-ratio: 5/4) {
  .demo { left: auto; width: min(var(--medida-1900), 36vw); background: var(--fondo); }
}

/* Con la demostración en marcha, el tablero no atiende a los toques de nadie. */
.partida:has(.demo) .partida__marco { pointer-events: none; }

/* En las viñetas, el mensaje de la partida ya no corresponde a lo que se ve. */
.partida:has(.demo--vinetas) .partida__mensaje { visibility: hidden; }

/* 19. ¿Qué suena? */
.suena { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-3); width: 100%; }

.suena--volumen { flex: 1; text-align: center; }

.suena__altavoz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); min-width: var(--medida-900); min-height: var(--medida-900); padding: var(--e-3); background: var(--cap-recuerdos-fondo); color: var(--texto); border: var(--grosor-marca) solid var(--cap-recuerdos-texto); border-radius: var(--radio-tarjeta); font-size: var(--t-opcion); font-weight: 800; cursor: pointer; }

.suena__altavoz .icono { width: var(--medida-500); height: var(--medida-500); }

.opcion__dibujo { flex: none; width: var(--medida-300); height: var(--medida-300); }

.aviso-oido { margin-block: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--superficie-marcada); border-radius: var(--radio-tarjeta); }

.tabla-desliza { overflow-x: auto; }


/* 18. Con tus fotos */
.aviso-fotos { display: flex; align-items: center; gap: var(--e-3); margin-block: var(--e-4); padding: var(--e-3) var(--e-4); background: var(--superficie-marcada); border-radius: var(--radio-tarjeta); }

.aviso-fotos .icono { flex: none; color: var(--principal-oscuro); }

.cara--foto { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio-carta); }

.album { display: flex; flex-direction: column; gap: var(--e-3); background: var(--fondo); }

.album:fullscreen { padding: var(--e-4); overflow-y: auto; }

.album__marco { margin: 0; text-align: center; }

.album__marco img { width: 100%; max-height: 62vh; object-fit: contain; background: var(--neutro); border-radius: var(--radio-carta); }

.album__pie { margin-top: var(--e-2); font-size: var(--t-subtitulo); font-weight: 800; }

.album__preguntas { display: flex; flex-direction: column; gap: var(--e-2); list-style: none; padding: 0; }

.album__preguntas li { padding: var(--e-3) var(--e-4); background: var(--cap-recuerdos-fondo); border-radius: var(--radio-tarjeta); font-size: var(--t-destacado); font-weight: 700; }

.album__botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--separacion-toque); }

.album__opciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--separacion-toque); }

.album__opciones .interruptor { flex: 1 1 auto; }

.album__vacio { padding: var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); text-align: center; font-size: var(--t-destacado); }

/* Una columna en móvil, tres en pantallas anchas y menos si la letra es grande. */
.actividades-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--e-3); list-style: none; padding: 0; }

.actividades-fotos li { display: flex; }

.actividades-fotos .tarjeta-extra { width: 100%; }

.actividades-fotos .tarjeta-extra:hover { border-color: var(--borde); }

.actividad-foto__requisito { margin-top: auto; font-weight: 700; }

.tarjeta-extra p.actividad-foto__requisito { color: var(--texto); }

.actividad-foto__boton { width: 100%; }

/* 17. Mi semana */
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-1); max-width: var(--medida-1900); padding: 0; list-style: none; }

.semana__dia { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; background: var(--superficie); color: var(--texto-suave); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: 50%; font-weight: 800; }

.semana__dia--jugado { background: var(--principal); color: var(--principal-texto); border-color: var(--principal); }

.semana__dia--hoy { border: var(--grosor-pista) solid var(--texto); }

.semana__resumen { margin-top: var(--e-3); font-size: var(--t-subtitulo); font-weight: 800; }

.semana__vacia { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-top: var(--e-2); }

.semana__vacia[hidden] { display: none; }

.semana__sugerencia { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--superficie-marcada); border-radius: var(--radio-tarjeta); }

.chapas { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; list-style: none; }

.chapa { display: flex; flex-direction: column; padding: var(--e-2) var(--e-3); border: var(--grosor-boton) solid transparent; border-radius: var(--radio-tarjeta); font-weight: 800; }

/* Sin partidas: gris claro. El peso y la falta de número también lo distinguen. */
.chapa--vacia { background: var(--neutro); color: var(--texto-suave); font-weight: 600; }

.chapa__numero { font-size: var(--t-nota); font-weight: 600; }

.tu-semana { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); padding-top: var(--e-3); border-top: var(--grosor-fino) solid var(--borde); }

.tu-semana__titulo { font-weight: 800; }

.tu-semana .semana { max-width: var(--medida-1900); }

.fin__semana { margin: 0; text-align: center; }

/* 20. Plan de la semana */
.plan { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-3); padding: var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.plan__rotulo { display: flex; flex-direction: column; gap: var(--e-1); font-weight: 800; }

.plan__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-1); max-width: var(--ancho-lectura); }

.plan__dia { min-height: var(--toque-medio); padding: 0; background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-boton); font-size: var(--t-destacado); font-weight: 800; cursor: pointer; }

.plan__dia[aria-pressed='true'] { background: var(--boton-oscuro); color: var(--boton-oscuro-texto); border-color: var(--boton-oscuro); }

.plan__hora { width: min(100%, var(--medida-1100)); min-height: var(--toque-min); font-weight: 400; }

.plan__botones { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); }

.plan__ayuda { display: flex; flex-direction: column; gap: var(--e-2); padding: 0; list-style: none; font-size: var(--t-nota); }

.plan__ayuda li { display: flex; align-items: center; gap: var(--e-2); }

.plan__ayuda .icono { flex: none; color: var(--principal-oscuro); }

/* 21. Un recuerdo para hoy. El hueco se reserva: el bloque llega después de pintar
   la página y no debe empujar lo que hay debajo. */
html.con-menus .hueco-recuerdo { min-height: var(--medida-1500); }

@media (min-width: 720px) {
  html.con-menus .hueco-recuerdo { min-height: var(--medida-1100); }
}

.recuerdo { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) var(--e-5); border-radius: var(--radio-tarjeta); }

.recuerdo__titulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-subtitulo); }

.recuerdo__frase { font-size: var(--t-destacado); font-weight: 800; line-height: 1.3; }

.recuerdo__enlaces { font-weight: 700; }

/* «Fuente», al final del hecho (ajustes K, 46.4): pequeña y sin negrita. */
.recuerdo__fuente { font-size: var(--t-nota); font-weight: 400; }

html[data-colores='contraste'] .recuerdo { border: var(--grosor-fino) solid var(--borde); }

/* El cuadrado de la fecha solo sale en la tarjeta de la portada; fuera de ella, estas
   dos envolturas no cuentan y el bloque se reparte como una sola columna. */
.recuerdo__fecha { display: none; }
.recuerdo__cuerpo { display: contents; }

/* Tarjeta de la portada, en todos los anchos: fecha a la izquierda y texto apilado.
   Medidas en rem, para que crezcan con el ajuste de letra: a 20 px de base son el
   cuadrado de 64 px, la separación de 18 y el relleno de 20 × 24. Va ligada a
   .recuerdo--tarjeta: con una copia vieja de recuerdo.js, el bloque se apila. */
html.con-menus .portada__rejilla > .hueco-recuerdo { min-height: 5.75rem; }

@media (max-width: 599px) {
  html.con-menus .portada__rejilla > .hueco-recuerdo { min-height: 9rem; }
}

.portada__rejilla > .hueco-recuerdo { container: recuerdo / inline-size; }
.portada__rejilla .recuerdo--tarjeta { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; overflow-wrap: break-word; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; background: var(--superficie); border-radius: 0.7rem; line-height: 1.1; }
.recuerdo__dia { font-size: 1.1rem; font-weight: 800; }
.recuerdo__mes { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__cuerpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__titulo { color: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.3; text-transform: uppercase; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__titulo svg { display: none; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__frase { font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__pregunta, .portada__rejilla .recuerdo--tarjeta .recuerdo__enlaces { font-size: 0.8rem; line-height: 1.4; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__mas { display: none; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__juego { font-weight: 700; text-decoration: none; }
/* Espacio duro: la flecha no se queda sola en otra línea. */
.portada__rejilla .recuerdo--tarjeta .recuerdo__juego::after { content: '\00a0→'; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__juego:hover, .portada__rejilla .recuerdo--tarjeta .recuerdo__juego:focus-visible { text-decoration: underline; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__fuente { color: var(--texto-suave); font-size: 0.7rem; font-weight: 400; }
/* Zona de toque de 24 px como mínimo (WCAG 2.5.8). En bloque en línea y no en
   inline-flex: así el texto de «Jugar a…» se parte como texto normal y la
   flecha sigue a la última palabra (ajustes K, 46.4). */
.portada__rejilla .recuerdo--tarjeta .recuerdo__juego { display: inline-block; min-height: var(--toque-wcag); padding-block: 0.1rem; }
.portada__rejilla .recuerdo--tarjeta .recuerdo__fuente { display: inline-flex; align-items: center; min-height: var(--toque-wcag); vertical-align: baseline; }
.portada__rejilla .recuerdo--tarjeta .enlace-externo__aviso { display: none; }

/* Tarjeta estrecha para su letra (móvil, o letra grande en una columna
   estrecha): el cuadrado y el relleno, que crecen con la letra, dejaban al
   texto 160 px con letra Enorme a 390 px, y «noviembre» se salía de su
   columna. Entonces el cuadrado va junto al antetítulo y el texto ocupa todo
   el ancho de la tarjeta (ajustes K, 46). */
@container recuerdo (max-width: 17rem) {
  .portada__rejilla .recuerdo--tarjeta { align-items: center; gap: 0.35rem 0.75rem; padding: 0.9rem 1rem; }
  .portada__rejilla .recuerdo--tarjeta .recuerdo__cuerpo { display: contents; }
  .portada__rejilla .recuerdo--tarjeta .recuerdo__titulo { grid-column: 2; }
  .portada__rejilla .recuerdo--tarjeta .recuerdo__frase,
  .portada__rejilla .recuerdo--tarjeta .recuerdo__pregunta,
  .portada__rejilla .recuerdo--tarjeta .recuerdo__enlaces { grid-column: 1 / -1; }
}

.taller-recuerdo { z-index: 40; }

.taller__recuerdo { margin-bottom: var(--e-3); }

/* 22. Plan de sesión */
.sesion__opciones { display: flex; flex-direction: column; gap: var(--e-4); }

.sesion__opciones .filtros { margin-block: var(--e-1) 0; }

.tabla-sesion { width: 100%; border-collapse: collapse; }

.tabla-sesion th, .tabla-sesion td { padding: var(--e-2) var(--e-3); border-bottom: var(--grosor-fino) solid var(--borde); text-align: left; vertical-align: top; }

.tabla-sesion a { overflow-wrap: anywhere; }

.hoja--sesion h4 { margin-top: 1em; }

.sesion__guion { display: flex; flex-direction: column; gap: 0.6em; padding-left: 1.2em !important; }

.sesion__grandes { display: flex; flex-direction: column; gap: 0.8em; font-size: 1.3em; font-weight: 700; list-style: none; }

.sesion__recuerdo { font-size: 1.2em; }

.sesion__enlace { font-size: 1.15em; font-weight: 800; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------
   58. Ajustes de la fase 2 (G)
   -------------------------------------------------------------------- */

/* 26. Créditos, a todo el ancho del contenedor. */
.tabla-creditos { width: 100%; margin-top: var(--e-3); border-collapse: collapse; background: var(--superficie); }

.tabla-creditos th, .tabla-creditos td { padding: var(--e-2) var(--e-3); border-bottom: var(--grosor-fino) solid var(--borde); text-align: left; vertical-align: top; }

.tabla-creditos thead th { background: var(--neutro); font-weight: 800; }

.tabla-creditos a { white-space: nowrap; }

/* Cada fila es una tarjeta cuando la tabla no cabe. Va en em porque su ancho depende
   del tamaño de letra: con letra normal, 36em son los 720 px de contenido de una pantalla de 768. */
.pagina-creditos { container: creditos / inline-size; }

@container creditos (max-width: 35.99em) {
  .tabla-creditos, .tabla-creditos tbody, .tabla-creditos tr, .tabla-creditos td, .tabla-creditos tbody th { display: block; width: 100%; }

  .tabla-creditos { background: none; }

  .tabla-creditos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .tabla-creditos tr { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

  .tabla-creditos tbody th, .tabla-creditos td { padding: 0; border: 0; }

  .tabla-creditos__sonido { font-size: var(--t-destacado); font-weight: 800; }

  .tabla-creditos td[data-columna]::before { content: attr(data-columna) ': '; color: var(--texto-suave); }

  .tabla-creditos__original { margin-top: var(--e-2); }

  .tabla-creditos__original a { display: flex; align-items: center; justify-content: center; min-height: var(--toque-min); background: var(--superficie); color: var(--texto); border: var(--grosor-boton) solid var(--borde-fuerte); border-radius: var(--radio-boton); font-weight: 800; text-decoration: none; }
}

/* Ninguna celda baja de 120 px: las tablas que no caben pasan a tarjetas. */
.tabla-sesion th:first-child, .tabla-creditos th, .tabla-creditos td, .tabla-cookies th, .tabla-cookies td { min-width: var(--ancho-celda-minimo); }

@media (max-width: 767px) {
  .tabla-sesion, .tabla-sesion tbody, .tabla-sesion tr, .tabla-sesion td, .tabla-sesion tbody th { display: block; width: 100%; }

  .tabla-sesion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .tabla-sesion tr { padding-block: var(--e-2); border-bottom: var(--grosor-fino) solid var(--borde); }

  .tabla-sesion th, .tabla-sesion td { padding: 0; border: 0; }

  .tabla-niveles, .tabla-niveles tbody, .tabla-niveles tr, .tabla-niveles td { display: block; width: 100%; }

  .tabla-niveles thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .tabla-niveles td { border: 0; border-top: var(--grosor-fino) solid var(--borde); }

  .tabla-niveles td:first-child { border-top: 0; }

  .tabla-niveles td::before { content: attr(data-columna) ': '; font-weight: 800; }

  .tabla-cookies, .tabla-cookies tbody, .tabla-cookies tr, .tabla-cookies td, .tabla-cookies tbody th { display: block; width: 100%; }

  .tabla-cookies thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .tabla-cookies tr { padding: var(--e-2) var(--e-3); border-top: var(--grosor-fino) solid var(--borde); }

  .tabla-cookies th, .tabla-cookies td { padding: 0; border: 0; }
}

/* 27. Preguntas frecuentes: componente único. */
.preguntas-frecuentes { display: flex; flex-direction: column; gap: var(--e-4); }

.preguntas-frecuentes__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }

.preguntas-frecuentes__cabeza p { color: var(--texto-suave); }

/* A 360 px con letra Enorme, el título y el dibujo de 120 px no cabían juntos y
   la página se desplazaba de lado (ajustes K, 46). Ahora encoge primero el
   texto, hasta su palabra más larga, y solo después el dibujo, hasta 64 px:
   con base 0, el texto no pide sitio al dibujo mientras quepa entero. */
.preguntas-frecuentes__cabeza > div { flex: 1 1 0; }

.preguntas-frecuentes__dibujo { flex: 0 1 120px; min-width: 64px; width: 120px; height: auto; }

.preguntas-frecuentes__lista { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }

.faq-tarjetas { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }

.preguntas-frecuentes .faq-tarjetas { margin-top: 0; }

.faq-tarjeta { background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.faq-tarjeta summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--toque-medio); padding: var(--e-2) var(--e-4); font-size: var(--t-pregunta); font-weight: 800; line-height: 1.3; cursor: pointer; list-style: none; }

.faq-tarjeta summary::-webkit-details-marker { display: none; }

/* El signo es decorativo: el estado abierto o cerrado ya lo anuncia <details>. */
.faq-tarjeta summary::after { content: '+'; flex: none; font-size: var(--t-subtitulo); line-height: 1; }

.faq-tarjeta[open] summary::after { content: '−'; }

.faq-tarjeta__respuesta { padding: 0 var(--relleno-respuesta) var(--relleno-respuesta); }

.faq-tarjeta__respuesta > * + * { margin-top: var(--e-2); }

.faq-contacto { padding: var(--e-3) var(--e-4); background: var(--superficie-marcada); border-radius: var(--radio-tarjeta); }

.faq-contacto__titulo { font-weight: 800; }

.faq-contacto a { font-weight: 800; }

.faq-contacto--lado { display: none; }

@media (min-width: 1024px) {
  .preguntas-frecuentes { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: var(--e-6); }

  .preguntas-frecuentes__lado { position: sticky; top: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }

  .preguntas-frecuentes__cabeza { flex-direction: column; align-items: flex-start; }

  .preguntas-frecuentes__cabeza > div { flex: none; }

  .preguntas-frecuentes__dibujo { flex-basis: 220px; width: 220px; }

  .faq-contacto--lado { display: block; }

  .faq-contacto--final { display: none; }
}

html[data-colores='contraste'] .faq-contacto { border: var(--grosor-fino) solid var(--borde); }

@media print {
  .preguntas-frecuentes__dibujo, .faq-contacto { display: none; }
}

/* 28. Paneles nuevos. */
.menu-panel__columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }

.menu-panel__titulo { margin-bottom: var(--e-2); color: var(--texto-suave); font-size: var(--t-nota); font-weight: 800; }

.menu-panel__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1); list-style: none; }

.menu-panel__meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-1); margin-block: var(--e-1) var(--e-2); list-style: none; }

.menu-panel__mes { display: flex; align-items: center; justify-content: center; min-height: var(--toque-compacto); background: var(--neutro); color: var(--texto); border-radius: var(--radio-boton); font-size: var(--t-nota); font-weight: 700; text-decoration: none; }

.menu-panel__mes:hover, .menu-panel__mes:focus-visible { background: var(--superficie-marcada); text-decoration: underline; }



/* «Mi semana · 3»: en móvil, solo el dibujo y el número. */
.boton-semana { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--toque-compacto); margin-left: auto; padding: var(--e-1) var(--e-3); background: var(--superficie-marcada); color: var(--texto); border-radius: var(--radio-boton); font-size: var(--t-nota); font-weight: 800; text-decoration: none; white-space: nowrap; }

.boton-semana[hidden] { display: none; }

.boton-semana + .boton-aa { margin-left: var(--e-2); }

@media (max-width: 599px) {
  .boton-semana { gap: 2px; padding-inline: var(--e-1); }

  .boton-semana__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .boton-semana + .boton-aa { margin-left: var(--e-1); }
}

/* En escritorio, la cabecera reparte sus piezas por orden: va justo antes de «Aa». */
@media (min-width: 1200px) {
  .boton-semana { order: 3; margin-left: 0; }

  .boton-semana + .boton-aa { margin-left: 0; }
}

/* Tarjetas de acceso: para tablet y móvil. Se ven siempre que no haya paneles. */
.accesos { display: grid; gap: var(--e-2); margin-block: var(--e-3); padding: 0; list-style: none; }

.accesos--cuatro, .accesos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Accesos de `/juegos/` (ajustes K, 43.3): dos o tres según haya «Mi semana».
   En fila mientras quepan con la letra elegida; si no, uno debajo de otro. */
.accesos--flexible { display: flex; flex-wrap: wrap; }

.accesos--flexible > li { flex: 1 1 12rem; }

.accesos--flexible > li[hidden] { display: none; }


.accesos--bloques { grid-template-columns: minmax(0, 1fr); }

.acceso-bloque { padding: var(--e-3) var(--e-4); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.acceso-bloque__titulo { font-weight: 800; }

.acceso-bloque ul { padding: 0; list-style: none; }

.acceso-bloque li { margin: 0; }

.acceso-bloque a { display: flex; align-items: center; min-height: var(--toque-min); font-size: var(--t-destacado); font-weight: 700; text-decoration: none; }

.acceso-bloque a:hover, .acceso-bloque a:focus-visible { text-decoration: underline; }

/* En móvil pequeño, filas a todo el ancho: en 2 × 2 las palabras no caben. */
@media (max-width: 479px) {
  .accesos--cuatro, .accesos--dos { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 720px) {
  .accesos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Los tres bloques de Familias: 3 columnas solo si caben con la letra elegida
   (ajustes I, 36); si no, uno debajo de otro. */
.accesos-marco { container-type: inline-size; }

@container (min-width: 34rem) {
  .accesos--bloques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  html.con-menus[data-texto='normal'] .accesos { display: none; }
}

.menu-panel__grupos .menu-panel__capacidad { font-size: var(--t-nota); }

/* Con «Mi semana» a la vista, la cabecera debe seguir cabiendo en una línea. */
.cabecera__interior:has(.boton-semana:not([hidden])) { flex-wrap: nowrap; gap: var(--e-1); }

@media (min-width: 1200px) {
  .cabecera__marco:has(.boton-semana:not([hidden])) { column-gap: var(--e-2); }

  .cabecera__marco:has(.boton-semana:not([hidden])) .boton-aa .no-movil { display: none; }
}

/* Fila de accesos al pie del panel «Juegos»: 4 tarjetas + «Ver todos». */
.menu-panel__accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--hueco-accesos); align-items: stretch; margin: var(--e-3) 0 0; padding: var(--relleno-fila-accesos) 0 0; border-top: var(--grosor-fino) solid var(--borde-suave); list-style: none; }

.menu-panel__accesos li { margin: 0; }

/* Cada acceso es una tarjeta enlazada entera. */
.acceso { display: flex; align-items: center; gap: var(--hueco-acceso); height: 100%; min-height: var(--alto-acceso); padding: var(--relleno-acceso); background: var(--neutro); color: var(--texto); border: var(--grosor-fino) solid var(--borde-suave); border-radius: var(--radio-acceso); text-decoration: none; }

/* Cuadrado blanco que enmarca el icono, centrado con las dos líneas de texto. */
.acceso__icono { flex: none; display: grid; place-items: center; width: var(--lado-icono-acceso); height: var(--lado-icono-acceso); background: var(--fondo-icono-acceso); color: var(--principal-oscuro); border: var(--grosor-fino) solid var(--borde-suave); border-radius: var(--radio-icono-acceso); }

.acceso__icono svg { width: var(--dibujo-acceso); height: var(--dibujo-acceso); }

.acceso__texto { display: block; min-width: 0; }

.acceso__titulo { display: block; font-size: var(--t-acceso); font-weight: 700; line-height: 1.2; }

.acceso__sub { display: block; margin-top: var(--separa-acceso); color: var(--texto-secundario); font-size: var(--t-acceso-sub); line-height: 1.3; }

/* Ratón y foco: toda la tarjeta en verde suave, y el título subrayado. */
.acceso:hover, .acceso:focus-visible { background: var(--superficie-marcada); color: var(--texto); border-color: var(--principal-claro); }

.acceso:hover .acceso__titulo, .acceso:focus-visible .acceso__titulo { text-decoration: underline; }

/* «Ver todos los juegos →», centrado en vertical a la derecha. */
.menu-panel__ver-todos { align-self: center; white-space: nowrap; }

.menu-panel__ver-todos .menu-panel__todo { margin-top: 0; }

/* Entre 1200 y 1279 px no caben: 2 × 2 y «Ver todos» debajo, a la derecha. */
@media (max-width: 1279px) {
  .menu-panel__accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .menu-panel__ver-todos { grid-column: 1 / -1; justify-self: end; }
}

/* Alto contraste: borde más marcado y título subrayado siempre. */
html[data-colores='contraste'] .acceso { border: var(--grosor-boton) solid currentColor; }

html[data-colores='contraste'] .acceso__titulo { text-decoration: underline; }

/* --------------------------------------------------------------------
   59. Ajustes de la fase 2 (I) · Final de capítulo de la guía (33)
   Orden: «Sigue leyendo», «Ponlo en práctica» y la guía capítulo a
   capítulo. Referencia: guia-final-capitulo.png.
   -------------------------------------------------------------------- */

.sigue-leyendo h2, .practica h2, .capitulos-final h2 { margin-bottom: var(--e-3); }

/* «Sigue leyendo»: tarjeta grande en verde, toda ella enlace. Dibujo a la
   izquierda, texto en el centro y flecha en un círculo a la derecha. */
.sigue-leyendo__tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-5); padding: var(--e-5) var(--e-6); background: var(--principal); color: var(--principal-texto); border-radius: var(--radio-tarjeta-grande); }

.sigue-leyendo__tarjeta:hover, .sigue-leyendo__tarjeta:focus-visible { background: var(--principal-oscuro); color: var(--principal-texto); }

.sigue-leyendo__tarjeta:hover .sigue-leyendo__titulo, .sigue-leyendo__tarjeta:focus-visible .sigue-leyendo__titulo { text-decoration: underline; }

.sigue-leyendo__dibujo { display: flex; align-items: center; justify-content: center; width: var(--sigue-dibujo-ancho); height: var(--sigue-dibujo-alto); padding: var(--e-2); background: var(--superficie); border-radius: var(--radio-boton); }

.sigue-leyendo__dibujo img, .capitulo-final__dibujo img { width: 100%; height: 100%; object-fit: contain; }

.sigue-leyendo__texto { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }

.sigue-leyendo__rotulo { font-size: var(--t-chip); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }

.sigue-leyendo__titulo { font-size: var(--t-sigue-titulo); font-weight: 800; line-height: 1.2; }

.sigue-leyendo__entradilla { font-size: var(--t-nota); line-height: 1.45; }

/* La flecha va del color de la tarjeta sobre el del texto: así se invierte
   bien en los modos oscuro y de contraste. */
.sigue-leyendo__flecha { display: flex; flex: none; align-items: center; justify-content: center; width: var(--sigue-flecha); height: var(--sigue-flecha); background: var(--principal-texto); color: var(--principal); border-radius: 50%; }

.sigue-leyendo__flecha { font-size: var(--t-sigue-titulo); font-weight: 800; line-height: 1; }

/* El enlace al anterior, pequeño, pero con zona de toque suficiente. */
.sigue-leyendo__anterior { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--toque-compacto); margin-top: var(--e-2); color: var(--enlace); font-size: var(--t-nota); font-weight: 700; }

.sigue-leyendo__anterior:hover, .sigue-leyendo__anterior:focus-visible { text-decoration: underline; }

/* «Ponlo en práctica»: 3 tarjetas de juego, cada una un enlace entero. */
.practica__entradilla { margin-bottom: var(--e-4); color: var(--texto-suave); }

.practica__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); list-style: none; }

.practica__lista li, .capitulos-final__lista li { display: flex; min-width: 0; }

.tarjeta-practica { display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.tarjeta-practica:hover, .tarjeta-practica:focus-visible { border-color: var(--principal); color: var(--texto); }

.tarjeta-practica:hover .tarjeta-practica__jugar, .tarjeta-practica:focus-visible .tarjeta-practica__jugar { text-decoration: underline; }

.tarjeta-practica__miniatura { display: flex; flex: none; align-items: center; justify-content: center; height: var(--alto-miniatura-practica); padding: var(--e-2); }

.tarjeta-practica__miniatura img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }

/* Cuerpo en columna: «Jugar →» se queda al pie aunque el nombre ocupe dos líneas. */
.tarjeta-practica__cuerpo { display: flex; flex: 1; flex-direction: column; gap: var(--e-1); padding: var(--e-3) var(--e-4) var(--e-4); }

.tarjeta-practica__nombre { font-size: var(--t-texto); font-weight: 800; line-height: 1.2; }

.tarjeta-practica__que { color: var(--texto-suave); font-size: var(--t-nota); line-height: 1.35; }

.tarjeta-practica__jugar { margin-top: auto; padding-top: var(--e-2); color: var(--enlace); font-weight: 800; }

/* «La guía, capítulo a capítulo»: barra de avance y rejilla de 3 × 3. */
.avance-guia { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-4); }

.avance-guia[hidden], .capitulo-final__leido[hidden] { display: none; }

.avance-guia__texto { flex: none; font-size: var(--t-nota); font-weight: 800; }

.avance-guia__barra { flex: 1; height: var(--alto-barra-avance); overflow: hidden; background: var(--neutro-fuerte); border-radius: var(--radio-chip); }

.avance-guia__relleno { display: block; width: 0; height: 100%; background: var(--principal); border-radius: inherit; }

.capitulos-final__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); list-style: none; }

.capitulo-final { position: relative; display: flex; align-items: center; gap: var(--e-2); width: 100%; padding: var(--e-4) var(--e-3); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); }

.capitulo-final:hover, .capitulo-final:focus-visible { border-color: var(--principal); color: var(--texto); }

.capitulo-final:hover .capitulo-final__titulo, .capitulo-final:focus-visible .capitulo-final__titulo { text-decoration: underline; }

/* El actual: fondo verde suave y borde verde de 2 px. El grosor de más va
   por dentro, para que la tarjeta no cambie de tamaño. */
.capitulo-final--actual { background: var(--superficie-marcada); border-color: var(--principal); box-shadow: inset 0 0 0 var(--grosor-fino) var(--principal); }

.capitulo-final__dibujo { display: flex; flex: none; align-items: center; justify-content: center; width: var(--capitulo-dibujo-ancho); height: var(--capitulo-dibujo-alto); padding: var(--e-1); background: var(--neutro); border-radius: var(--radio-pequeno); }

.capitulo-final__texto { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }

.capitulo-final__titulo { font-size: var(--t-nota); font-weight: 800; line-height: 1.25; }

.capitulo-final__meta { color: var(--texto-suave); font-size: var(--t-nota); }

/* «· ✓ Leído» va de una pieza: si no cabe tras los minutos, baja entero. */
.capitulo-final__meta { display: flex; flex-wrap: wrap; column-gap: var(--e-1); }

.capitulo-final__leido { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--enlace); font-weight: 700; white-space: nowrap; }

/* «Estás aquí», como una etiqueta montada sobre el borde de arriba. */
.capitulo-final__aqui { position: absolute; top: 0; right: var(--e-3); padding: 0 var(--e-2); background: var(--principal); color: var(--principal-texto); border-radius: var(--radio-chip); font-size: var(--t-chip); font-weight: 800; line-height: 1.6; transform: translateY(-50%); }

/* Los cortes dependen del ancho de la columna medido en letras, no del de la
   pantalla: con letra grande, 3 columnas no caben ni en escritorio. Por eso
   son consultas de contenedor en rem, que crecen con el ajuste de letra. Las
   rejillas pasan de 3 columnas a 1, nunca a 2, para no dejar filas a medias.
   A 20 px de base, 28, 32 y 34 rem son 560, 640 y 680 px. */
.sigue-leyendo, .practica, .capitulos-final { container-type: inline-size; }

/* Columna estrecha: la tarjeta verde con el dibujo encima y la flecha abajo
   a la derecha. */
@container (max-width: 28rem) {
  .sigue-leyendo__tarjeta { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'dibujo dibujo' 'texto texto' '. flecha'; gap: var(--e-3); padding: var(--e-5); }

  .sigue-leyendo__dibujo { grid-area: dibujo; width: var(--sigue-dibujo-movil-ancho); height: var(--sigue-dibujo-movil-alto); }

  .sigue-leyendo__texto { grid-area: texto; }

  .sigue-leyendo__flecha { grid-area: flecha; }
}

/* Los juegos, en una columna de filas con la miniatura a la izquierda: un
   carrusel escondería dos de los tres y es más difícil de manejar. */
@container (max-width: 32rem) {
  .practica__lista { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }

  .tarjeta-practica { flex-direction: row; }

  .tarjeta-practica__miniatura { width: var(--ancho-miniatura-practica-movil); height: auto; }

  .tarjeta-practica__cuerpo { padding: var(--e-3) var(--e-4); }
}

/* Los capítulos, en filas con el dibujo pequeño. */
@container (max-width: 34rem) {
  .capitulos-final__lista { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }

  .capitulo-final { padding: var(--e-3); }

  /* Aquí el título empieza arriba del todo: se aparta de «Estás aquí». */
  .capitulo-final--actual { padding-top: var(--e-5); }

  .capitulo-final__dibujo { width: var(--capitulo-dibujo-movil-ancho); height: var(--capitulo-dibujo-movil-alto); }
}

/* Alto contraste: la parte vacía de la barra es blanca como el fondo; el
   borde deja ver cuánto falta. */
html[data-colores='contraste'] .avance-guia__barra { border: var(--grosor-fino) solid currentColor; }

/* --------------------------------------------------------------------
   60. Ajustes de la fase 2 (I) · Página de cada cuaderno del mes (35)
   -------------------------------------------------------------------- */

/* Botones de descarga con los datos del PDF debajo del nivel. */
.descarga-cuaderno { align-items: center; gap: var(--e-3); min-height: var(--toque-principal); text-align: left; }

.descarga-cuaderno__texto { display: flex; flex-direction: column; }

.descarga-cuaderno__nivel { font-weight: 800; }

.descarga-cuaderno__datos { color: var(--texto-suave); font-size: var(--t-nota); font-weight: 400; }

/* Vista previa: tira de 5 páginas. En pantallas estrechas se desliza en
   horizontal, con las páginas a un tamaño que aún se reconoce. */
.vista-cuaderno { display: grid; grid-template-columns: repeat(5, minmax(var(--ancho-vista-cuaderno), 1fr)); gap: var(--e-4); margin-top: var(--e-4); padding-bottom: var(--e-2); overflow-x: auto; list-style: none; }

.vista-cuaderno li { display: flex; min-width: 0; }

.vista-cuaderno__hoja { position: relative; display: flex; flex-direction: column; gap: var(--e-2); width: 100%; color: var(--texto); text-decoration: none; }

/* «position: relative» no es adorno: el texto «(ver en grande)» para lectores
   de pantalla va en posición absoluta y, sin esto, se saldría de la tira y
   ensancharía toda la página en el móvil. */

.vista-cuaderno__hoja img { width: 100%; height: auto; background: var(--hoja-fondo); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-pequeno); box-shadow: var(--sombra-tarjeta); }

.vista-cuaderno__hoja:hover img, .vista-cuaderno__hoja:focus-visible img { border-color: var(--principal); }

.vista-cuaderno__pie { font-size: var(--t-nota); font-weight: 700; line-height: 1.3; }

.vista-cuaderno__hoja:hover .vista-cuaderno__pie, .vista-cuaderno__hoja:focus-visible .vista-cuaderno__pie { text-decoration: underline; }

/* La página en grande, en una ventana dentro de la página. */
.vista-grande { width: min(100% - 2 * var(--margen-lateral), var(--ancho-vista-grande)); max-height: 94vh; margin: auto; padding: 0; background: var(--superficie); color: var(--texto); border: 0; border-radius: var(--radio-tarjeta); }

.vista-grande::backdrop { background: var(--velo-pausa); }

.vista-grande__marco { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); }

.vista-grande__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }

.vista-grande__titulo { font-weight: 800; }

.vista-grande__imagen { width: auto; max-width: 100%; height: auto; max-height: 72vh; margin-inline: auto; background: var(--hoja-fondo); border: var(--grosor-fino) solid var(--borde); }

.vista-grande__pasos { display: flex; justify-content: space-between; gap: var(--e-3); }

/* «Qué trae este cuaderno»: una fila por capacidad, con su color. */
.contenido-cuaderno__tema { max-width: var(--ancho-lectura); }

.contenido-cuaderno { display: flex; flex-direction: column; gap: var(--e-2); margin-block: var(--e-4); list-style: none; }

.contenido-cuaderno__grupo { display: grid; grid-template-columns: var(--ancho-capacidad-cuaderno) minmax(0, 1fr); align-items: baseline; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: var(--grosor-fino) solid var(--borde); }

.contenido-cuaderno__capacidad { justify-self: start; padding: var(--e-1) var(--e-3); border-radius: var(--radio-chip); font-size: var(--t-chip); font-weight: 800; }

.contenido-cuaderno__ficha { white-space: nowrap; }

/* Otros meses: anterior y siguiente, y la rejilla de los 12. */
.meses-cuaderno__pasos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-block: var(--e-3); font-weight: 700; }

.meses-cuaderno__pasos a { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--toque-compacto); color: var(--enlace); text-decoration: none; }

.meses-cuaderno__pasos a:hover, .meses-cuaderno__pasos a:focus-visible { text-decoration: underline; }

.meses-cuaderno__rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-2); list-style: none; }

.mes-cuaderno { display: flex; align-items: center; justify-content: center; min-height: var(--toque-min); padding: var(--e-2); background: var(--superficie); color: var(--texto); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); font-weight: 700; text-decoration: none; }

.mes-cuaderno:hover, .mes-cuaderno:focus-visible { border-color: var(--principal); text-decoration: underline; }

.mes-cuaderno--actual { background: var(--principal); color: var(--principal-texto); border-color: var(--principal); }

.mes-cuaderno--actual:hover, .mes-cuaderno--actual:focus-visible { color: var(--principal-texto); }

/* Los cortes van por ancho del bloque medido en rem, como en el final de
   capítulo: así también responden a la letra grande. La rejilla de meses va
   de 6 a 4, 3, 2 o 1 columnas: siempre filas completas. */
.meses-cuaderno, .contenido-cuaderno, .descargas-cuaderno { container-type: inline-size; }

.mes-cuaderno { font-size: var(--t-nota); }

@container (max-width: 48rem) {
  .meses-cuaderno__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (max-width: 30rem) {
  .meses-cuaderno__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contenido-cuaderno__grupo { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }

  .contenido-cuaderno__ficha { white-space: normal; }

  .descarga-cuaderno { width: 100%; }
}

@container (max-width: 20rem) {
  .meses-cuaderno__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 13rem) {
  .meses-cuaderno__rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------
   61. Ajustes de la fase 2 (I) · Textos que se salían de su caja (36)
   Los encontró la prueba nueva de cortes.mjs (scrollWidth > clientWidth).
   -------------------------------------------------------------------- */

/* Qué dice la ciencia: las tres ideas en 3 columnas o en 1, nunca 2 + 1, y
   solo en 3 cuando «acompañado» cabe en su tarjeta. */
.seccion--tres-ideas { container-type: inline-size; }

.seccion--tres-ideas .tres-ideas { grid-template-columns: minmax(0, 1fr); }

@container (min-width: 36rem) {
  .seccion--tres-ideas .tres-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cifras de la guía: si el texto no cabe junto al número, baja debajo. */
.cifra { flex-wrap: wrap; }

.cifra__texto { flex: 1 1 var(--medida-1200); }

/* Filas de juego de las capacidades: con letra grande el texto pasa debajo
   del dibujo antes que quedarse más estrecho que sus palabras. En móvil
   manda la regla de siempre, con el texto al 60 %. */
@media (min-width: 600px) {
  .fila-juego { flex-wrap: wrap; }

  .fila-juego__texto { flex: 1 1 var(--medida-1400); }
}

/* Con tus fotos: un poco menos de margen interior para que «conversar» quepa. */
.actividades-fotos .tarjeta-extra { padding-inline: var(--e-4); }

/* Créditos en tarjetas: el enlace al original puede ocupar dos líneas, y un
   nombre de usuario largo («15HPanska_Ruttner_Jan») se parte donde haga falta:
   es un identificador, no una palabra. */
@container creditos (max-width: 35.99em) {
  .tabla-creditos__original a { white-space: normal; text-align: center; }

  .tabla-creditos td { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------
   62. Ajustes de la fase 2 (J) · Estudios que se pueden leer en español
   -------------------------------------------------------------------- */

.tarjeta-estudio__idioma { margin-top: var(--e-1); }

.chip--idioma { background: var(--superficie-marcada); color: var(--principal-oscuro); }

html[data-colores='contraste'] .chip--idioma { border: var(--grosor-fino) solid currentColor; }

/* «Leer el estudio en español» y, al lado, el original. */
.fuente__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }

/* Capítulo 3: «Si algo de este capítulo te preocupa», en lugar de los juegos
   (ajustes J, 39.1). Es una caja de consejo con su título como h2. */
.recuadro-preocupa .caja__titulo { font-size: var(--t-subtitulo); line-height: 1.25; }

.recuadro-preocupa__enlace { display: inline-flex; align-items: center; gap: 0.25em; min-height: var(--toque-compacto); color: var(--consejo-texto); font-weight: 800; text-decoration: none; }

.recuadro-preocupa__enlace:hover, .recuadro-preocupa__enlace:focus-visible { color: var(--consejo-texto); text-decoration: underline; }

/* Cifras de la guía: con letra enorme en el móvil, «800.000» (capítulo 9) no
   cabía. El número no pasa del 14 % del ancho de la pantalla; con letra
   normal, y en tablet o escritorio, se queda en su tamaño de siempre. */
.cifra__valor { font-size: min(var(--t-cifra), 14vw); }

/* --------------------------------------------------------------------
   63. Ajustes de la fase 2 (J) · «Fuentes» en tarjetas (sección 42)
   Componente fuentes-lista. En los capítulos, una columna de tarjetas;
   en la portada de la guía, el mismo esquema que las preguntas
   frecuentes: columna fija a la izquierda y tarjetas a la derecha.
   -------------------------------------------------------------------- */

.fuentes-lista__tarjetas { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-4); padding: 0; list-style: none; }

.tarjeta-fuente { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: var(--e-4) var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); scroll-margin-top: var(--e-6); }

.tarjeta-fuente > p { margin: 0; }

.tarjeta-fuente__cabeza { display: flex; align-items: center; gap: var(--e-3); }

/* El número, el mismo de la llamada [n] del texto, en un círculo. */
.tarjeta-fuente__numero { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: var(--medida-180); height: var(--medida-180); padding: 0 var(--e-1); background: var(--neutro-fuerte); color: var(--texto); border-radius: var(--radio-chip); font-size: var(--t-chip); font-weight: 800; }

.tarjeta-fuente__nombre { font-weight: 800; line-height: 1.3; }

/* Tipo · año · idioma: etiquetas pequeñas, el idioma como distintivo. */
.tarjeta-fuente__etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }

.tarjeta-fuente__etiqueta { color: var(--texto-tenue); font-size: var(--t-nota); }

.chip--idioma-otro { background: var(--neutro-fuerte); color: var(--texto-suave); }

html[data-colores='contraste'] .chip--idioma-otro { border: var(--grosor-fino) solid currentColor; }

.tarjeta-fuente__referencia { color: var(--texto-tenue); font-size: var(--t-nota); }

.tarjeta-fuente__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }

/* Son botones: sin el subrayado de los enlaces del texto. */
.tarjeta-fuente .fuente__enlace, .prosa .tarjeta-fuente .fuente__enlace { text-decoration: none; }

.tarjeta-fuente .fuente__enlace:hover, .tarjeta-fuente .fuente__enlace:focus-visible { text-decoration: underline; text-decoration-thickness: var(--grosor-fino); }

/* Al llegar desde una llamada [n], la tarjeta se resalta un momento y se
   queda con el borde verde. Sin animación para quien la ha quitado. */
.tarjeta-fuente:target { border-color: var(--principal); animation: resalte-fuente 2.4s ease-out; }

@keyframes resalte-fuente {
  from { background: var(--superficie-marcada); box-shadow: 0 0 0 var(--grosor-marca) var(--principal); }
  to { background: var(--superficie); box-shadow: 0 0 0 0 transparent; }
}

html[data-movimiento='reducido'] .tarjeta-fuente:target { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-fuente:target { animation: none; }
}

/* Portada de la guía y páginas a todo el ancho. En tablet y móvil, título,
   frase y enlace arriba y las tarjetas debajo, sin el dibujo. */
.fuentes-lista--completa { display: flex; flex-direction: column; gap: var(--e-4); }

.fuentes-lista__lado { display: flex; flex-direction: column; gap: var(--e-3); }

.fuentes-lista__frase { margin-top: var(--e-2); color: var(--texto-suave); }

.fuentes-lista__dibujo { display: none; width: var(--ancho-dibujo-fuentes); height: auto; }

.fuentes-lista__enlace { display: inline-flex; align-items: center; gap: 0.25em; align-self: flex-start; min-height: var(--toque-compacto); color: var(--enlace); font-weight: 700; text-decoration: none; }

.fuentes-lista__enlace:hover, .fuentes-lista__enlace:focus-visible { text-decoration: underline; }

.fuentes-lista--completa .fuentes-lista__tarjetas { margin-top: 0; }

@media (min-width: 1024px) {
  .fuentes-lista--completa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: var(--e-6); }

  .fuentes-lista__lado { position: sticky; top: var(--e-4); }

  .fuentes-lista__dibujo { display: block; }
}

/* «Dónde informarse» (capítulo 9): los botones de cada tarjeta, como los de
   las tarjetas de fuentes, al pie y sin el subrayado de los enlaces del texto. */
.recurso__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; padding-top: var(--e-1); }

.recurso .recurso__boton, .prosa .recurso .recurso__boton { text-decoration: none; }

.recurso .recurso__boton:hover, .recurso .recurso__boton:focus-visible { text-decoration: underline; text-decoration-thickness: var(--grosor-fino); }

/* ---------------------------------------------------------------------
   Borrar los datos del dispositivo, por grupos (9-11-2026)
   --------------------------------------------------------------------- */

/* Ventana «¿Seguro?»: la de instalar, con dos botones que caben en el móvil. */
.ventana-confirmar h2 { font-size: var(--t-seccion); }

.ventana-confirmar p { margin-top: var(--e-3); }

.ventana-confirmar__botones { display: flex; flex-wrap: wrap; gap: var(--separacion-toque); margin-top: var(--e-5); }

.ventana-confirmar__botones .boton { flex: 1 1 auto; }

/* /privacidad/: una fila por grupo; toda la fila marca la casilla. */
.datos-dispositivo { display: flex; flex-direction: column; gap: var(--e-4); }

.datos-dispositivo__grupos { min-width: 0; padding: 0; border: 0; }

.datos-dispositivo__leyenda { margin-bottom: var(--e-3); font-weight: 800; }

.datos-dispositivo__lista { display: flex; flex-direction: column; gap: var(--separacion-toque); padding: 0; list-style: none; }

.datos-grupo { display: flex; align-items: flex-start; gap: var(--e-4); min-height: var(--toque-medio); padding: var(--e-3) var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); cursor: pointer; }

.datos-grupo:has(input:checked) { background: var(--superficie-marcada); border: var(--grosor-marca) solid var(--principal); }

.datos-grupo input { flex: none; width: 30px; height: 30px; margin: 0; accent-color: var(--principal); cursor: pointer; }

.datos-grupo__texto { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }

.datos-grupo__nombre { font-weight: 800; }

.datos-grupo__contiene { color: var(--texto-suave); font-size: var(--t-nota); }

.datos-grupo__estado { font-size: var(--t-nota); font-weight: 700; }

.datos-grupo__estado:empty { display: none; }

.datos-dispositivo__apuntar { font-weight: 700; }

.datos-dispositivo__botones, .semana-datos__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--separacion-toque); }

.datos-dispositivo__hecho:empty, .semana-datos__hecho:empty, .avance-guia__hecho:empty { display: none; }

.datos-dispositivo__hecho, .semana-datos__hecho, .avance-guia__hecho { font-weight: 700; }

/* Mi semana: el interruptor, el aviso de que no se apunta y el botón. */
.semana-datos { display: flex; flex-direction: column; gap: var(--e-4); }

.semana-datos .interruptor { max-width: var(--ancho-lectura); }

.semana-datos .enlace-suelto { display: inline-flex; align-items: center; min-height: var(--toque-wcag); }

/* Plan de la semana: «Quitar mi plan» y la frase del calendario. */
.plan__quitar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }

.plan__quitar[hidden] { display: none; }

.plan__quitar .nota { flex: 1 1 var(--medida-1500); }

/* Guía: «Empezar de nuevo» junto a «Has leído N de 9». */
.avance-guia { flex-wrap: wrap; }

.avance-guia__barra { min-width: 6rem; }

.avance-guia__reiniciar { flex: none; }

.avance-guia__hecho { margin-bottom: var(--e-4); }

/* Bandeja de fichas: «Vaciar», discreto, junto a «Crear el PDF». */
.bandeja__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }

.bandeja__vaciar { min-height: var(--toque-min); padding-inline: var(--e-2); background: none; color: inherit; border: 0; font-weight: 700; text-decoration: underline; cursor: pointer; }