/* =====================================================================
   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); }

.portada__sellos { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-bottom: var(--e-3); 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; }

/* 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; }

.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-8); }
  .portada__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--medida-2400)); align-items: center; gap: var(--e-8); }
  .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; }
  .bloque-proyecto { grid-template-columns: 1fr 2.2fr; gap: var(--e-8); }
}

/* --------------------------------------------------------------------
   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 { margin-top: auto; 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); }

.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); }

@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); }

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

.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); }

.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); }

.fin__sugerencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-tarjeta); }

.fin__sugerencia > div { flex: 1 1 var(--medida-1400); }

.fin__sugerencia-texto { font-size: var(--t-destacado); font-weight: 800; line-height: 1.25; }

/* --------------------------------------------------------------------
   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;
  /* Palabras largas como «Destornillador» en columnas estrechas: sin guion. */
  overflow-wrap: anywhere;
}

.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; }
}

/* Banda de cabecera: color a todo lo ancho e interior en el contenedor común. */
.cabecera-pagina { padding-block: var(--e-5) var(--e-6); color: var(--texto); }

.cabecera-pagina--guia { background: var(--superficie-marcada); }

.cabecera-pagina__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--e-7); }

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

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

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

.cabecera-pagina__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-pagina__entradilla { color: var(--texto-suave); font-size: var(--t-destacado); }

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

.cabecera-pagina__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-pagina__dibujo { flex: none; width: var(--dibujo-banda); height: auto; }

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

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

@media (max-width: 1023px) {
  .cabecera-pagina__dibujo { display: none; }
}

/* 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; }

.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); }

.tarjeta-juego__meta { 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; }

.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); }

.navegacion-capitulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }

.navegacion-capitulos__tarjeta { display: flex; flex-direction: column; gap: var(--e-1); 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); text-decoration: none; }

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

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

.navegacion-capitulos__tarjeta--siguiente { text-align: right; }

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

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

@media (max-width: 599px) {
  .navegacion-capitulos { grid-template-columns: minmax(0, 1fr); }
}

.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__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-pagina:has(+ .plantilla-lectura) .cabecera-pagina__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; }

/* «Ver en grande» se abrevia en el panel, donde el botón es estrecho. */
.partida__ver-corto { 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); }
  .partida__ver-largo { display: none; }
  .partida__ver-corto { display: inline; }
}

/* --------------------------------------------------------------------
   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
   -------------------------------------------------------------------- */

.capitulos-final__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2) var(--e-3); margin-top: var(--e-3); list-style: none; }

.capitulos-final.indice-capitulos ol { display: grid; }

.capitulos-final__enlace { height: 100%; padding: var(--e-2); background: var(--superficie); border: var(--grosor-fino) solid var(--borde); border-radius: var(--radio-boton); }

.capitulos-final__enlace[aria-current='page'] { border-color: var(--principal); }

@media (max-width: 767px) {
  .capitulos-final__lista { grid-template-columns: minmax(0, 1fr); }
}

/* 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); }

/* 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. */
  html.con-menus[data-texto='normal'] .nav-principal__flecha { 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%; }
}

/* En horizontal, ilustración a la izquierda y texto a la derecha. */
@media (min-width: 1024px) {
  .tablet { flex-direction: row; gap: var(--e-6); }

  .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-pagina--fichas { 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 { 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; }

.fichas__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 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. */
.ficha-tarjeta--elegida { border: var(--grosor-pista) solid var(--principal); }

.ficha-tarjeta--elegida .ficha-tarjeta__marca { display: block; }

.ficha-tarjeta__anadir { min-height: var(--toque-min); padding: 0; font-size: var(--t-nota); }

.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; }

.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; }

.vista-previa .fichas__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin: 0; }

.vista-previa .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) auto; 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); }

  .fichas__vista { position: sticky; top: var(--e-4); grid-row: 1; grid-column: 2; }

  .vista-previa .hojas { width: min(100%, calc((100vh - var(--alto-acciones-ficha)) * 0.707)); }

  .fichas__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .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%; overflow-wrap: anywhere; 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,
.navegacion-capitulos__tarjeta, .capitulos-final__enlace, .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, .navegacion-capitulos__tarjeta:hover, .capitulos-final__enlace:hover,
.indice-lateral__lista a:focus-visible, .lista-lateral a:focus-visible, .indice-capitulos a:focus-visible, .navegacion-capitulos__tarjeta:focus-visible, .capitulos-final__enlace: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; overflow-wrap: break-word; hyphens: auto; }

.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) */
.basado-en { 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); }

@media (min-width: 720px) {
  .tarjetas-extra--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.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); }

.tarjetas-extra--tres { list-style: none; padding: 0; }

.tarjetas-extra--tres li { display: flex; }

.tarjetas-extra--tres .tarjeta-extra { 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__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; }

.chapa--vacia { color: var(--texto-suave); border-color: var(--borde-fuerte); 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-top: var(--e-3); 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 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4); font-weight: 700; }

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

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

.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; }

/* Por debajo de 768 px, cada fila es una tarjeta. */
@media (max-width: 767px) {
  .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); }

.preguntas-frecuentes__dibujo { flex: none; 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__dibujo { 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--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; }

@media (min-width: 720px) {
  .accesos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .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; }