/*
 * Los estilos de Parlelia.
 *
 * TRES COSAS MANDAN AQUÍ, y en este orden:
 *
 *  1. Que un niño de cinco años acierte el botón. De ahí que el botón de hablar
 *     sea enorme y esté abajo, donde llega el pulgar en una tablet.
 *  2. Que se lea con luz de sol en el patio y de noche en la cama. De ahí el
 *     contraste alto y el modo oscuro.
 *  3. Que funcione igual en móvil, tablet y ordenador sin tres diseños. Todo se
 *     apila en una columna y se ensancha cuando hay sitio.
 *
 * Sin compilar nada: un CSS que se escribe y se sube. No hay Node en esta casa.
 */

/*
 * LOS COLORES.
 *
 * Azul tinta sobre papel claro, y AMARILLO PARA LO QUE HAY QUE TOCAR. Los dos
 * papeles están separados a propósito:
 *
 *   --acento  el azul: la cabecera, los enlaces, lo que está seleccionado.
 *             Es el color de la casa, el que se ve por todas partes.
 *   --accion  el amarillo: el botón de hablar y el de seguir. SOLO eso.
 *             Si el amarillo se usara también para adornar, dejaría de
 *             significar «aquí se toca», que es para lo único que está.
 *
 * El verde se ha quitado de la marca --se parecía demasiado al de otro
 * proyecto de la casa-- pero SIGUE siendo el de «palabra bien dicha»: ese
 * verde lo entiende cualquiera sin que nadie se lo explique.
 */
:root {
    --fondo: #f5f7fc;
    --papel: #ffffff;
    --tinta: #1b2440;
    --tinta-suave: #6b7694;
    --acento: #2d5bd7;
    --acento-fuerte: #1f45ad;
    --cabecera: #2d5bd7;
    --cabecera-tinta: #ffffff;
    --accion: #ffd23f;
    --accion-tinta: #16233d;
    --borde: #dfe5f4;
    --bien: #1f9d6b;
    --flojo: #d98324;
    --falta: #d64545;
    --sombra: 0 2px 0 rgba(27, 36, 64, .05), 0 10px 24px rgba(27, 36, 64, .08);
    --redondeo: 18px;
}

/*
 * DE NOCHE.
 *
 * Azul muy oscuro en vez de negro: el negro puro con texto blanco deslumbra en
 * una habitación a oscuras, que es justo cuando se usa el modo oscuro. El
 * amarillo se queda igual --es la señal de dónde tocar y no puede cambiar de
 * sitio según la hora-- y el azul se aclara para que se lea sobre el fondo.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #10172a;
        --papel: #1a2338;
        --tinta: #eef2fb;
        --tinta-suave: #97a3c0;
        --acento: #7fa3ff;
        --acento-fuerte: #a3bcff;
        --cabecera: #1b2a57;
        --cabecera-tinta: #ffffff;
        --accion: #ffd23f;
        --accion-tinta: #16233d;
        --borde: #2b3654;
        --bien: #45c48c;
        --flojo: #e8ab4e;
        --falta: #f07c7c;
        --sombra: 0 2px 0 rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .4);
    }
}

* { box-sizing: border-box; }

/*
 * LOS ENLACES, CON COLOR PROPIO.
 *
 * Sin esto, el navegador les pone el suyo: azul chillón los normales y salmón
 * los ya visitados --que es lo que hacía que «Alguien nuevo» saliera de color
 * rosa en el iPhone--. Se ven raros y encima cambian de color a espaldas de
 * uno según dónde haya entrado ya.
 */
a { color: var(--acento); }
a:visited { color: var(--acento); }

/* Los que son tarjetas o botones mandan sobre esto: llevan su propio color. */
a.tarjeta, a.perfil, a.quien, a.dato, a.boton-principal, a.boton-secundario, a.boton-escuchar {
    color: var(--tinta);
}

a.boton-principal { color: var(--accion-tinta); }

/*
 * `hidden` GANA SIEMPRE.
 *
 * El navegador esconde lo que lleva `hidden` poniéndole `display: none`, pero
 * cualquier clase nuestra con `display: grid` o `display: flex` le gana por ser
 * más específica. Resultado: el guión esconde algo, no da ningún error, y el
 * trozo sigue ahí en la pantalla. Pasó con el segundo Athos de las misiones.
 */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

main {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

/* --- La barra de arriba ------------------------------------------------ */

/*
 * UNA FRANJA DE COLOR DE LADO A LADO, no un logo suelto sobre el fondo.
 *
 * Es lo que le da carácter a la pantalla de un vistazo, y en el móvil hace de
 * remate por debajo de la barra de estado. El contenido de dentro sigue
 * centrado a 720, como el resto.
 */
.barra {
    background: var(--cabecera);
    color: var(--cabecera-tinta);
    padding: 12px 0;
    margin-bottom: 8px;
}

.barra-dentro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

.marca {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    text-decoration: none;
    color: inherit;
}

/* La «E» en amarillo: sobre el azul de la cabecera desaparecería si fuera del
   color de acento, que es el mismo azul. */
.marca-inicial { color: var(--accion); }

.quien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 999px;
    text-decoration: none;
    color: var(--tinta);
    font-size: 15px;
}

.boton-salir { color: var(--tinta-suave); }

.quien-emoji { font-size: 20px; }

/* --- Portada: quién practica ------------------------------------------- */

.titulo-grande {
    font-size: 28px;
    margin: 12px 0 20px;
}

.perfiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.perfil {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
    box-shadow: var(--sombra);
    text-decoration: none;
    color: var(--tinta);
}

.perfil:active { transform: translateY(1px); }
.perfil-emoji { font-size: 44px; line-height: 1.1; }
.perfil-nombre { font-weight: 700; font-size: 18px; }
.perfil-nivel { color: var(--tinta-suave); font-size: 14px; }

.perfil-racha {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 14px;
    font-weight: 700;
}

.perfil-nuevo { grid-column: 1 / -1; padding: 0; }

.perfil-nuevo summary {
    color: var(--tinta);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px;
    cursor: pointer;
    list-style: none;
}

.perfil-nuevo summary::-webkit-details-marker { display: none; }
.perfil-nuevo[open] summary { border-bottom: 1px solid var(--borde); }

/* --- Formularios -------------------------------------------------------- */

.formulario-perfil { padding: 16px; text-align: left; }
.campo { display: block; margin-bottom: 20px; border: 0; padding: 0; }
.campo > span, .campo legend { display: block; font-weight: 700; margin-bottom: 8px; }

/* Todas las casillas de escribir, no solo las de texto: sin esto, las de
   correo y contraseña salen estrechas y con otro tipo de letra. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo textarea {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    border: 2px solid var(--borde);
    border-radius: 12px;
    background: var(--fondo);
    color: var(--tinta);
}

/* El recado de una invitación: el mismo cuadro, pero que quepan dos líneas y
   se pueda estirar si alguien se anima a escribir más. */
.campo textarea { font-family: inherit; line-height: 1.4; resize: vertical; }

.emojis { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-opcion input { position: absolute; opacity: 0; }

.emoji-opcion span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 28px;
    border: 2px solid var(--borde);
    border-radius: 14px;
    cursor: pointer;
}

.emoji-opcion input:checked + span {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 12%, transparent);
}

/* El foco se ve SIEMPRE. Quien navega con teclado tiene que saber dónde está,
   y en una tablet con teclado conectado esto es lo único que lo dice. */
.emoji-opcion input:focus-visible + span,
.nivel-opcion input:focus-visible + .nivel-texto,
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

.nivel-opcion { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.nivel-opcion input { margin-top: 14px; width: 20px; height: 20px; accent-color: var(--acento); }

.nivel-texto {
    flex: 1;
    padding: 12px 14px;
    border: 2px solid var(--borde);
    border-radius: 14px;
    background: var(--papel);
}

.nivel-texto strong { display: block; }
.nivel-texto small { color: var(--tinta-suave); }
.nota-pequena { color: var(--tinta-suave); font-size: 14px; }

/* La explicación de una casilla va DEBAJO, no pegada al lado. */
.campo small { display: block; margin-top: 6px; }
.error { color: var(--falta); font-weight: 700; }

/* --- Botones ------------------------------------------------------------ */

.boton-principal, .boton-secundario {
    display: inline-block;
    padding: 14px 22px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 14px;
    border: 2px solid var(--acento);
    cursor: pointer;
    text-decoration: none;
}

/* Amarillo y letra oscura: es el par con más contraste de toda la paleta, y
   además el amarillo se encuentra antes que ningún otro color de reojo. */
.boton-principal { background: var(--accion); color: var(--accion-tinta); border-color: var(--accion); }
.boton-secundario { background: transparent; color: var(--acento); }
.boton-mini {
    font-family: inherit;
    font-size: 16px;
    padding: 4px 10px;
    margin-left: 8px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--papel);
    cursor: pointer;

    /* Desde que lleva el altavoz dibujado y no un emoticono, el dibujo tiene
       que quedar centrado y del color del texto, como el resto de iconos. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--acento);
    vertical-align: middle;
}

/* Mientras suena, late. Es la única señal de que el botón ha hecho algo:
   antes se tocaba, tardaba medio segundo en sonar y parecía roto. */
.boton-mini.sonando { animation: latido .8s ease-in-out infinite; }

/* --- Pantalla de una persona -------------------------------------------- */

.resumen { display: flex; gap: 10px; margin: 8px 0 24px; }

.dato {
    flex: 1;
    padding: 14px 10px;
    text-align: center;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 14px;
}

.dato-numero { display: block; font-size: 26px; font-weight: 800; }
.dato-que { display: block; font-size: 13px; color: var(--tinta-suave); }

.titulo-seccion { font-size: 20px; margin: 24px 0 12px; }
.lecciones { display: grid; gap: 10px; }

.tarjeta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
    text-decoration: none;
    color: var(--tinta);
}

.tarjeta-emoji { font-size: 30px; }
.tarjeta-texto strong { display: block; font-size: 18px; }
.tarjeta-texto small { color: var(--tinta-suave); }
.tarjeta-repaso { border-color: var(--acento); margin-bottom: 8px; }

.lista-flojas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }

.lista-flojas li {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 6px 12px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.floja-palabra { font-weight: 700; }
.floja-veces { font-size: 13px; color: var(--tinta-suave); }

.cambiar-nivel { margin-top: 32px; }
.cambiar-nivel summary { cursor: pointer; color: var(--tinta-suave); padding: 8px 0; }

/* --- Practicar ----------------------------------------------------------- */

.donde { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.donde a { color: var(--tinta-suave); text-decoration: none; }
.contador { color: var(--tinta-suave); font-size: 14px; }

.pista-leccion {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--acento) 10%, transparent);
    border-radius: 14px;
    font-size: 15px;
}

.tarjeta-frase {
    padding: 28px 20px;
    margin: 12px 0 20px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: 22px;
    box-shadow: var(--sombra);
    text-align: center;
}

/* La frase, lo más grande de la pantalla: es lo que hay que leer en voz alta. */
.frase-en {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
}

.frase-es { margin: 0 0 24px; color: var(--tinta-suave); font-size: 18px; }

.botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.boton-oir, .boton-hablar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 26px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    border-radius: 18px;
    border: 2px solid var(--acento);
    background: transparent;
    color: var(--acento);
    cursor: pointer;
}

.boton-oir .icono, .boton-hablar .icono { font-size: 30px; }
.boton-hablar {
    background: var(--accion);
    color: var(--accion-tinta);
    border-color: var(--accion);
    min-width: 160px;
}

.boton-oir.sonando { animation: latido .8s ease-in-out infinite; }

/* Grabando: el botón se pone rojo y late. Un niño que no lee tiene que saber
   por el color que la máquina le está escuchando. */
.boton-hablar.grabando {
    background: var(--falta);
    border-color: var(--falta);
    color: #fff;
    animation: latido 1s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* --- El resultado -------------------------------------------------------- */

.resultado {
    padding: 20px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: 22px;
    text-align: center;
}

.resultado.muy-bien { border-color: var(--bien); }
.resultado.bien { border-color: var(--bien); }
.resultado.casi { border-color: var(--flojo); }

.nota {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 10px;
    font-size: 34px;
    font-weight: 800;
    border-radius: 50%;
    border: 4px solid var(--acento);
}

.resultado.casi .nota, .resultado.otra-vez .nota { border-color: var(--flojo); }
.animo { font-size: 18px; font-weight: 700; margin: 6px 0 14px; }
.palabras { font-size: 22px; line-height: 1.6; margin: 0 0 12px; }

.palabra { padding: 2px 4px; border-radius: 6px; }
.palabra-bien { color: var(--bien); }
.palabra-flojo { color: var(--flojo); text-decoration: underline wavy; text-underline-offset: 4px; }
.palabra-falta { color: var(--falta); text-decoration: line-through; }
.palabra-sobra { color: var(--tinta-suave); font-style: italic; }
.palabra-sin-nota { color: var(--tinta); }

.repasar { font-size: 17px; margin: 0 0 16px; }
.botones-despues { margin-top: 8px; }

.final { text-align: center; padding: 40px 20px; }
.final-emoji { font-size: 64px; margin: 0; }
.final-texto { font-size: 22px; font-weight: 700; margin: 8px 0 24px; }

/* --- El pie -------------------------------------------------------------- */

.pie {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 32px;
    color: var(--tinta-suave);
    font-size: 14px;
    text-align: center;
}

/* El aviso de que no hay nota NO se disimula: una aplicación que calla que no
   está puntuando de verdad hace creer a un niño que lo hace bien. */
.aviso-sin-azure {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--flojo) 14%, transparent);
    border: 1px solid var(--flojo);
    border-radius: 12px;
    color: var(--tinta);
}

/* --- Sitio de sobra: dos columnas en el ordenador ------------------------ */

@media (min-width: 860px) {
    body { font-size: 18px; }
    .frase-en { font-size: 40px; }
}

/* Quien prefiere menos movimiento, sin movimiento. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- Escuchar y elegir --------------------------------------------------- */

.fila-leccion { display: flex; gap: 8px; align-items: stretch; }
.fila-leccion .tarjeta { flex: 1; }

/* 64 píxeles de lado: el dedo de un niño de cinco años no acierta menos. */
.boton-escuchar {
    display: grid;
    place-items: center;
    width: 64px;
    font-size: 28px;
    text-decoration: none;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
}

/* Para quien lee la pantalla en voz alta: el texto está, aunque no se vea. */
.solo-para-leer {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tarjeta-escucha { padding: 32px 20px; }
.que-hacer { margin: 0 0 20px; font-size: 18px; color: var(--tinta-suave); }
.boton-oir-grande { padding: 24px 40px; }
.boton-oir-grande .icono { font-size: 44px; }

.opciones { display: grid; gap: 12px; margin-top: 20px; }

.opcion {
    padding: 20px 18px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    text-align: left;
    color: var(--tinta);
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
    cursor: pointer;
}

.opcion:active { transform: translateY(1px); }

/* El acierto y el fallo se dicen con color Y con dibujo: uno de cada doce
   niños varones no distingue bien el rojo del verde. */
.opcion-bien {
    border-color: var(--bien);
    background: color-mix(in srgb, var(--bien) 14%, transparent);
}

.opcion-bien::before { content: "✔ "; }

.opcion-mal {
    border-color: var(--falta);
    background: color-mix(in srgb, var(--falta) 12%, transparent);
}

.opcion-mal::before { content: "✘ "; }

/* --- Cómo van (la pantalla del padre) ------------------------------------ */

.tarjeta-gasto {
    padding: 16px 18px;
    margin-bottom: 24px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
}

.gasto-titulo { margin: 0 0 10px; font-weight: 700; }

.barra-gasto {
    height: 12px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
    overflow: hidden;
}

.barra-gasto span { display: block; height: 100%; background: var(--acento); }

.ficha {
    padding: 18px;
    margin-bottom: 18px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
}

.ficha-quien { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 20px; }
.ficha-quien .perfil-emoji { font-size: 30px; }
.ficha-quien small { color: var(--tinta-suave); font-size: 14px; font-weight: 400; }
.ficha .resumen { margin: 0 0 16px; }
.ficha .dato { background: var(--fondo); }

/* Los siete días, en barritas. Se busca ver el hueco, no el número. */
.semana { display: flex; gap: 6px; align-items: flex-end; height: 74px; margin-bottom: 14px; }

.dia {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 4px;
}

.dia-barra {
    width: 100%;
    min-height: 3px;
    background: var(--acento);
    border-radius: 6px 6px 0 0;
}

.dia-letra { font-size: 12px; color: var(--tinta-suave); }

/* En un móvil, cuatro datos en fila salen apretados y parten las palabras:
   se ponen en dos filas de dos. */
@media (max-width: 480px) {
    .ficha .resumen { flex-wrap: wrap; }
    .ficha .dato { flex: 1 1 calc(50% - 5px); }
}

/* --- Athos ---------------------------------------------------------------- */

/* Todos los gestos están dibujados; se enseña el que toca. Cambiar de cara es
   así instantáneo: un niño grabando no puede esperar a que se descargue nada. */
.athos .gesto { display: none; }
.athos[data-gesto="saluda"] .gesto-saluda,
.athos[data-gesto="escucha"] .gesto-escucha,
.athos[data-gesto="celebra"] .gesto-celebra,
.athos[data-gesto="anima"] .gesto-anima,
.athos[data-gesto="piensa"] .gesto-piensa { display: block; }

/*
 * LOS COLORES DE ATHOS, sacados de la referencia que dio Javier: golden dorado
 * cálido, morro y flequillo más claros, y el pañuelo del mismo azul que la
 * cabecera de la app --que fue una casualidad feliz: el perro y la casa
 * combinan sin haberlo buscado--.
 */
.athos-cuello { fill: #e3a94f; }
.athos-oreja { fill: #dc9c45; }
.athos-cabeza { fill: #f0c477; }
.athos-flequillo { fill: #f7dca6; }
.athos-morro { fill: #fbeecd; }
.athos-ojo { fill: #3f2a1c; }
.athos-brillo { fill: #fff; }
.athos-hocico { fill: #3f2a1c; }
.athos-chispas path { fill: #ffd23f; }

.athos-panuelo-tela, .athos-panuelo-nudo { fill: #2d5bd7; }
.athos-huella ellipse { fill: #ffffff; }

.athos-ojo-feliz, .athos-boca, .athos-tabique, .athos-ceja, .athos-ondas path {
    fill: none;
    stroke: #3f2a1c;
    stroke-width: 4;
    stroke-linecap: round;
}

.athos-ceja { stroke-width: 3.5; }
.athos-ondas path { stroke: #f0c477; stroke-width: 5; }
.athos-bocaza { fill: #3f2a1c; }
.athos-lengua { fill: #f08b96; }

/* De noche, el dorado quema menos. El pañuelo se aclara un poco para que no
   se funda con el fondo azul oscuro. */
@media (prefers-color-scheme: dark) {
    .athos-cabeza { fill: #e0b064; }
    .athos-flequillo { fill: #eacd96; }
    .athos-morro { fill: #f0dfc0; }
    .athos-oreja { fill: #c98c3c; }
    .athos-cuello { fill: #cf9844; }
    .athos-panuelo-tela, .athos-panuelo-nudo { fill: #4f7ce8; }
}

/* Escuchando y animando, ladea la cabeza: es lo que hace un perro de verdad
   cuando presta atención, y se reconoce sin explicarlo. */
.athos[data-gesto="escucha"] { transform: rotate(-7deg); }
.athos[data-gesto="anima"] { transform: rotate(5deg); }
.athos { transition: transform .2s ease; }

.athos-dice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* El bocadillo, con su pico mirando a Athos. */
.bocadillo {
    position: relative;
    flex: 1;
    margin: 0;
    padding: 14px 16px;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: 18px;
    font-size: 17px;
}

.bocadillo::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 26px;
    width: 14px;
    height: 14px;
    background: var(--papel);
    border-left: 2px solid var(--borde);
    border-bottom: 2px solid var(--borde);
    transform: rotate(45deg);
}

.athos-en-practica { display: grid; place-items: center; margin-bottom: 4px; }

/* Lo que dice Athos: corto, en inglés y grande. Es lo primero que se mira. */
.athos-ingles {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--acento);
}

/* --- Misiones ------------------------------------------------------------ */

.mision {
    padding: 24px 20px;
    margin: 12px 0;
    background: var(--papel);
    border: 2px solid var(--acento);
    border-radius: 22px;
    text-align: center;
    box-shadow: var(--sombra);
}

.mision-escenario { font-size: 56px; margin: 0 0 8px; }
.mision .athos-dice { text-align: left; }
.mision .bocadillo { font-size: 19px; font-weight: 700; }
.mision-traduccion { color: var(--tinta-suave); margin: 0 0 16px; }
.mision-objetivo { font-size: 18px; margin: 0 0 20px; }

.tarjeta-mision { border-color: var(--acento); }
.final-ingles { font-size: 26px; font-weight: 800; color: var(--acento); margin: 12px 0 4px; }

/* --- Cuentas ------------------------------------------------------------- */

.barra-derecha { display: flex; align-items: center; gap: 8px; }
.salir { margin: 0; }

/* El acceso al panel, con la misma pinta que el botón de al lado: son los dos
   botones de adulto de la barra y deben parecer hermanos. */
.al-panel {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.boton-salir {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-family: inherit;
    color: var(--tinta-suave);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 999px;
    cursor: pointer;
}

.tarjeta-formulario {
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
}

.centrado { text-align: center; }

.aviso-bueno {
    padding: 12px 14px;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    border: 1px solid var(--acento);
    border-radius: 12px;
}

/* El parte, en frases. Va antes que los números y se lee del tirón. */
.parte { margin: 0 0 14px; padding-left: 20px; }
.parte li { margin-bottom: 6px; }
.los-numeros summary { cursor: pointer; color: var(--tinta-suave); font-size: 14px; padding: 6px 0; }
.los-numeros .resumen { margin-top: 8px; }

/* --- Charlas ------------------------------------------------------------- */

.tarjeta-charla { border-color: var(--acento); }

.hilo { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.dice { display: flex; gap: 10px; align-items: flex-start; }
.dice-yo { justify-content: flex-end; }

.globo {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 18px;
    border: 2px solid var(--borde);
    background: var(--papel);
}

/* Lo que dice Athos, a la izquierda; lo que dice el niño, a la derecha y en
   verde. Es el lenguaje que ya conocen de cualquier chat, sin explicar nada. */
.globo-athos { border-bottom-left-radius: 4px; }
.globo-yo {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
    border-bottom-right-radius: 4px;
    font-weight: 700;
}

.globo-en { margin: 0; font-size: 19px; font-weight: 700; }
.globo-es { margin: 4px 0 0; color: var(--tinta-suave); font-size: 15px; }
.globo-nota { font-weight: 800; color: var(--acento); }

.que-contesto { margin: 18px 0 10px; font-weight: 700; text-align: center; }
.turno .opcion { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: 10px; }
.opcion-en { font-size: 19px; }
.opcion-es { color: var(--tinta-suave); font-weight: 400; }

.decirlo { text-align: center; padding: 16px; }
.decirlo-frase { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.decirlo-aviso { color: var(--tinta-suave); margin: 0 0 14px; }
.decirlo .boton-mini { margin-top: 14px; display: inline-block; }

/* --- Ajustes ------------------------------------------------------------- */

.borrar-perfil { margin-top: 36px; }
.borrar-perfil summary { cursor: pointer; color: var(--tinta-suave); font-size: 14px; padding: 8px 0; }
.borrar-perfil form { padding: 16px; border: 2px solid var(--falta); border-radius: var(--redondeo); }

.boton-peligro {
    padding: 14px 22px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background: var(--falta);
    border: 2px solid var(--falta);
    border-radius: 14px;
    cursor: pointer;
}

.enlace-ajustes { margin-top: 32px; }

/* --- Lo que lleva puesto Athos ------------------------------------------- */

.athos-collar path { stroke: #c23b3b; }
.athos-chapa { fill: #f5c542; }
.athos-bufanda path { fill: #c23b3b; }
.athos-gorra path, .athos-gorra circle { fill: #2f6fb3; }
.athos-gafas rect { fill: #2b2b2b; }
.athos-gafas .athos-puente { stroke: #2b2b2b; }
.athos-corona path, .athos-corona rect { fill: #f5c542; }
.athos-pelota circle { fill: #d7e84f; }
.athos-pelota .athos-costura { fill: none; stroke: #fff; stroke-width: 3; }

/* --- Lo tuyo: medallas, mundo y caseta ----------------------------------- */

.huesos-grande { text-align: center; font-size: 34px; font-weight: 800; margin: 4px 0 18px; }
.huesos-grande small { font-size: 16px; font-weight: 400; color: var(--tinta-suave); }

.medallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.medalla {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 12px;
    text-align: center;
    background: var(--papel);
    border: 2px solid var(--acento);
    border-radius: var(--redondeo);
}

.medalla-emoji { font-size: 38px; }
.medalla small { color: var(--tinta-suave); font-size: 13px; }
.medalla-cuando { opacity: .7; }

.mundo { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

/* Los sitios que faltan se ven, en gris. Saber qué queda por delante es la
   mitad de las ganas de seguir; esconderlo solo hace que parezca que no hay
   más. */
.sitio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    text-align: center;
    background: var(--fondo);
    border: 2px dashed var(--borde);
    border-radius: var(--redondeo);
    opacity: .55;
}

.sitio-visitado {
    background: var(--papel);
    border-style: solid;
    border-color: var(--acento);
    opacity: 1;
}

.sitio-emoji { font-size: 30px; }
.sitio-nombre { font-size: 13px; line-height: 1.25; }

.sitio-marca {
    position: absolute;
    top: 4px;
    right: 8px;
    color: var(--acento);
    font-weight: 800;
}

.caseta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.cosa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    text-align: center;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
}

.cosa-tuya { border-color: var(--acento); }
.cosa-emoji { font-size: 34px; }
.cosa-precio { font-weight: 800; }
.cosa-pide { color: var(--tinta-suave); font-size: 12px; }
.cosa button { width: 100%; font-size: 15px; padding: 10px 12px; }
.cosa button[disabled] { opacity: .5; cursor: not-allowed; }

/* El objetivo del día, cumplido. Se celebra; no se regaña cuando falta. */
.dato-cumplido { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.dato-numero small { font-size: 16px; font-weight: 400; color: var(--tinta-suave); }
.dato-enlace { text-decoration: none; color: var(--tinta); }

/* El anuncio de medalla nueva: se da al volver de practicar, no en mitad. */
.medallas-nuevas {
    padding: 18px;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--acento) 10%, transparent);
    border: 2px solid var(--acento);
    border-radius: var(--redondeo);
}

.medallas-nuevas-titulo { margin: 0 0 12px; font-size: 20px; font-weight: 800; text-align: center; }

/* --- Los iconos dibujados ------------------------------------------------ */

/*
 * UNA PALETA CORTA Y FIJA, la misma para los veintiuno. Es lo que hace que
 * parezcan de la misma mano: si cada icono eligiera sus colores, volveríamos a
 * tener la ensalada de los emoji.
 */
.ic { vertical-align: middle; flex: none; }

.ic-tierra { fill: #b98756; }
.ic-tallo { fill: #35c281; }
.ic-hoja { fill: #35c281; }
.ic-hoja-clara { fill: #6fdcab; }

.ic-cuerpo { fill: #2d5bd7; }
.ic-ala { fill: #7fa3ff; }
.ic-ventana { fill: #ffd23f; }
.ic-llama { fill: #ff8a3d; }
.ic-llama-clara { fill: #ffd23f; }

.ic-amarillo { fill: #ffd23f; }
.ic-asa { fill: #e0a800; }
.ic-base { fill: #e0a800; }
.ic-cinta { fill: #2d5bd7; }
.ic-medalla-centro { fill: #ffe98a; }

.ic-onda { fill: none; stroke: #2d5bd7; stroke-width: 3; stroke-linecap: round; }
.ic-pie { fill: #2d5bd7; }
.ic-piel { fill: #f7c9a6; }
.ic-trazo { fill: none; stroke: #c98a63; stroke-width: 3; stroke-linecap: round; }

.ic-hueso { fill: #f2e7d2; stroke: #d9c9a9; stroke-width: 1.5; }

.ic-diana-fuera { fill: #ff6b4a; }
.ic-diana-medio { fill: #fff; }
.ic-diana-centro { fill: #ff6b4a; }

.ic-almohadilla { fill: #2d5bd7; }

/* Los sitios de las misiones */
.ic-cucurucho { fill: #e0a86a; }
.ic-nata { fill: #fdf3e3; }
.ic-guinda { fill: #ff6b4a; }
.ic-tronco { fill: #a9744a; }
.ic-copa { fill: #35c281; }
.ic-copa-clara { fill: #6fdcab; }
.ic-sombrilla { fill: #ff6b4a; }
.ic-palo { fill: #c9a06b; }
.ic-ola { fill: #4f9dff; }
.ic-pan { fill: #f0c477; }
.ic-relleno { fill: #ff8a3d; }
.ic-gato { fill: #9aa7c4; }
.ic-ojo-gato { fill: #2b3654; }
.ic-bigote { fill: none; stroke: #6b7694; stroke-width: 2; stroke-linecap: round; }
.ic-maletin { fill: #2d5bd7; }
.ic-asa-maletin { fill: #1f45ad; }
.ic-cruz { fill: #fff; }
.ic-vela { fill: #7fa3ff; }
.ic-bizcocho { fill: #e0a86a; }
.ic-glaseado { fill: #ff9fb0; }
.ic-avion { fill: #2d5bd7; }
.ic-vagon { fill: #ff6b4a; }
.ic-ventana-metro { fill: #d9e6ff; }
.ic-faro { fill: #ffd23f; }
.ic-rail { fill: none; stroke: #6b7694; stroke-width: 2.5; stroke-linecap: round; }

/* De noche, los que son casi blancos se apagan un poco para no deslumbrar. */
@media (prefers-color-scheme: dark) {
    .ic-hueso { fill: #e6d9c0; stroke: #bfae8c; }
    .ic-nata { fill: #f2e6d2; }
    .ic-diana-medio { fill: #f2f5ff; }
    .ic-cruz { fill: #eef2fb; }
}

.ic-globo { fill: #2d5bd7; }
.ic-punto { fill: #fff; }
.ic-verde { fill: #35c281; }
.ic-flecha { fill: #fff; }

/*
 * CLASES DE COLOR GENÉRICAS PARA LOS ICONOS.
 *
 * Con veintitantos dibujos, ponerle a cada uno clases con nombre propio
 * --«ic-cucurucho», «ic-bizcocho»-- multiplica el CSS por nada. Los de las
 * lecciones usan esta paleta corta y ya está: es justo lo que hace que
 * parezcan de la misma mano.
 */
.ic-azul { fill: #2d5bd7; }
.ic-azul-claro { fill: #7fa3ff; }
.ic-amarillo-c { fill: #ffd23f; }
.ic-naranja { fill: #ff9f43; }
.ic-coral { fill: #ff6b4a; }
.ic-verde-c { fill: #35c281; }
.ic-verde-claro { fill: #6fdcab; }
.ic-crema { fill: #fdf0d5; }
.ic-marron { fill: #a9744a; }
.ic-marron-claro { fill: #d9a86e; }
.ic-gris { fill: #cfd8ee; }
.ic-blanco { fill: #ffffff; }
.ic-tinta { fill: #2b3654; }
.ic-rosa { fill: #ff9fb0; }
.ic-piel-c { fill: #f7c9a6; }
.ic-linea { fill: none; stroke: #2d5bd7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-color-scheme: dark) {
    .ic-crema { fill: #f2e6d2; }
    .ic-blanco { fill: #eef2fb; }
    .ic-gris { fill: #9aa7c4; }
}

/* --- Lo que se puede escuchar en español --------------------------------- */

/*
 * EL ALTAVOZ PEQUEÑO, al lado de lo que está escrito en español.
 *
 * Todo lo que EXPLICA qué hacer está en español, y quien no lee no puede
 * usarlo. Con esto lo oye tocando; y si su perfil lo pide, lo principal suena
 * solo al abrir la pantalla.
 */
.boton-leer {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    font-size: 15px;
    font-family: inherit;
    line-height: 1;
    color: var(--acento);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 999px;
    cursor: pointer;
}

.boton-leer:active { transform: translateY(1px); }
.leible { vertical-align: middle; }

/* En el bocadillo de Athos el altavoz va pegado al texto, sin caja. */
.bocadillo .boton-leer { background: transparent; border: 0; }

.campo-interruptor { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.campo-interruptor input { width: 26px; height: 26px; margin-top: 2px; accent-color: var(--acento); flex: none; }
.interruptor-texto strong { display: block; }
.interruptor-texto small { color: var(--tinta-suave); }

/* --- Una opción con su altavoz al lado ----------------------------------- */

/*
 * El altavoz va FUERA del botón de la opción: un botón dentro de otro no es
 * HTML válido, y además tocar el altavoz no puede contestar sin querer.
 */
.fila-opcion { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.fila-opcion .opcion { flex: 1; margin-bottom: 0; }

/* Grande de verdad: lo va a tocar un niño de cuatro años. */
.boton-leer-grande {
    width: 58px;
    height: auto;
    margin-left: 0;
    border-radius: var(--redondeo);
    border: 2px solid var(--borde);
    flex: none;
}


/* ===========================================================================
   EL PANEL DE CONTROL
   ---------------------------------------------------------------------------
   Se mira en el móvil, así que son fichas apiladas y no una tabla ancha: una
   tabla de ocho columnas en un teléfono se lee de lado o no se lee.

   LOS COLORES SALEN DE LAS VARIABLES DE LA CASA (--papel, --tinta, --borde) y
   no de valores escritos aquí. La primera versión ponía `#fff` como respaldo y
   en modo oscuro las tarjetas salieron BLANCAS con el texto claro encima:
   ilegible. Un color escrito a mano en una hoja con modo oscuro es un fallo
   esperando al anochecer.

   Y LAS BARRAS SE PINTAN CON CSS, sin ninguna librería de gráficas: son un
   `span` con un alto en porcentaje. 90 kB de librería para esto es algo que un
   día no carga y se lleva la pantalla por delante.
   ======================================================================== */

.pantalla-panel main { max-width: 60rem; }

.bloque-panel {
    background: var(--papel);
    color: var(--tinta);
    border: 1px solid var(--borde);
    border-radius: var(--redondeo);
    box-shadow: var(--sombra);
    padding: 1rem 1.1rem 1.2rem;
    margin: 0 0 1.1rem;
}

.bloque-panel h2 {
    margin: 0 0 .8rem;
    font-size: 1.05rem;
    color: var(--tinta);
}

.bloque-panel h3 {
    margin: 1.1rem 0 .5rem;
    font-size: .95rem;
    color: var(--tinta);
}

.bloque-panel .parte li,
.bloque-panel .nota-pequena { color: var(--tinta-suave); }

/* Las barras: alto por porcentaje, y un mínimo visible para que un día a cero
   siga ocupando sitio. Un hueco se lee como «no hay dato», y sí lo hay. */
.barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    padding: .3rem 0;
}

.barra {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-width: 4px;
    background: var(--fondo);
    border-radius: 3px;
}

.barra-alto {
    display: block;
    width: 100%;
    background: var(--acento);
    border-radius: 3px;
}

.ficha-panel {
    border-top: 1px solid var(--borde);
    padding: .7rem 0 .2rem;
}

.ficha-panel:first-of-type { border-top: 0; }

.ficha-panel h3 {
    margin: 0 0 .2rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
}

.ficha-panel h3 small {
    font-weight: 400;
    color: var(--tinta-suave);
    font-size: .8rem;
}

.medidor { margin: 0 0 .9rem; }

/* Los tres colores del gasto. Sin estado, la barra se queda del color de la
   casa: no opina. */
.barra-gasto.barra-ojo span { background: var(--flojo); }
.barra-gasto.barra-mal span { background: var(--falta); }

.lista-contenido,
.lista-averias,
.lista-claves {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .88rem;
    color: var(--tinta);
}

.lista-contenido li,
.lista-averias li,
.lista-claves li {
    padding: .35rem 0;
    border-top: 1px solid var(--borde);
}

.lista-contenido li small {
    color: var(--tinta-suave);
    margin-left: .4rem;
}

.clave-falta strong { color: var(--falta); }
.clave-puesta strong { color: var(--bien); }

/* El aviso que cuesta dinero: arriba del todo y en rojo hasta que deje de ser
   verdad. Con el color de «falta», que ya está pensado para los dos modos. */
.aviso-malo {
    background: color-mix(in srgb, var(--falta) 14%, var(--papel));
    border: 1px solid var(--falta);
    color: var(--tinta);
    border-radius: var(--redondeo);
    padding: .8rem 1rem;
    margin: 0 0 1.1rem;
    font-size: .92rem;
}


/* La equivalencia europea del nivel: al lado del nombre, pequeña y discreta.
   Manda el nombre de la casa; esto es para quien viene de fuera. */
.nivel-mcer {
    font-size: .72em;
    font-weight: 600;
    color: var(--tinta-suave);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: .05em .5em;
    margin-left: .35em;
    vertical-align: middle;
}

.nivel-sabe {
    display: block;
    margin-top: .2rem;
    color: var(--tinta-suave);
    font-size: .82em;
}

.lo-que-sabe { margin: .4rem 0 .2rem; }

.lo-que-sabe summary {
    cursor: pointer;
    color: var(--acento);
    font-size: .9rem;
}

.lista-sabe {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    color: var(--tinta);
}

.lista-sabe li { margin: .2rem 0; }


/* El aviso de confirmar el correo: visible sin gritar, en todas las pantallas
   y con la salida al lado. Un aviso sin botón es un reproche. */
.aviso-confirmar {
    background: color-mix(in srgb, var(--flojo) 16%, var(--papel));
    border: 1px solid var(--flojo);
    color: var(--tinta);
    border-radius: var(--redondeo);
    padding: .6rem .9rem;
    margin: 0 auto 1rem;
    max-width: 44rem;
    font-size: .9rem;
}

.aviso-confirmar a {
    color: var(--acento);
    font-weight: 600;
    margin-left: .3rem;
}


/* ===========================================================================
   LOS JUEGOS DE PALABRAS
   ---------------------------------------------------------------------------
   Seis dibujos grandes y un botón de altavoz. Lo juega quien todavía no lee y
   quien tiene cinco años, así que todo es GRANDE: el objetivo mínimo de un
   dedo son 44 px y aquí se pasa de largo a propósito.
   ======================================================================== */

.pantalla-jugar-tema main { max-width: 40rem; }

.juego { text-align: center; }

.progreso-juego {
    height: 10px;
    background: var(--borde);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 1rem;
}

.progreso-hecho {
    display: block;
    height: 100%;
    width: 0;
    background: var(--acento);
    transition: width .3s ease;
}

.athos-juego { max-width: 120px; margin: 0 auto .5rem; }

.boton-escuchar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 3px solid var(--acento);
    background: var(--papel);
    color: var(--acento);
    cursor: pointer;
    margin: 0 0 1.2rem;
}

.boton-escuchar:active { transform: scale(.96); }

.dibujos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}

.dibujo {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--papel);
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, border-color .12s ease;
}

.dibujo:active { transform: scale(.97); }

.dibujo-emoji { font-size: clamp(2.2rem, 11vw, 3.4rem); line-height: 1; }

/* Verde para lo bueno; para lo fallado, el color de «casi» y NUNCA rojo: el
   rojo está reservado a lo que no se dijo, y a un niño no se le dice «mal». */
.dibujo-bien { border-color: var(--bien); background: color-mix(in srgb, var(--bien) 18%, var(--papel)); }
.dibujo-casi { border-color: var(--flojo); }

.dice-el-juego {
    min-height: 2.4rem;
    margin: 1rem 0 0;
    font-size: 1.1rem;
    color: var(--tinta);
}

.final-juego { margin-top: 1rem; display: grid; gap: .6rem; justify-items: center; }

/* Los temas del propio nivel, primero y marcados. Los demás no se esconden:
   jugar con los animales del nivel de al lado también enseña. */
.tarjeta-suya { border-color: var(--acento); }

.tarjeta-juegos { border-color: var(--acento); }

@media (min-width: 30rem) {
    .dibujos { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}


/* ===========================================================================
   LA PRUEBA DE NIVEL
   ======================================================================== */

.pantalla-prueba main { max-width: 40rem; text-align: center; }

.dos-botones {
    display: grid;
    gap: .8rem;
    margin: 1.2rem 0;
}

.dos-botones .boton-principal {
    display: block;
    padding: 1rem;
    line-height: 1.3;
}

.dos-botones small {
    display: block;
    font-weight: 400;
    opacity: .8;
    margin-top: .25rem;
}

.va-por {
    color: var(--tinta-suave);
    font-size: .9rem;
    margin: 0 0 .6rem;
}

/* Las frases se eligen en una columna: leer cuatro frases en dos columnas en un
   móvil es exactamente lo que nadie hace. */
.opciones-frases { display: grid; gap: .6rem; }

.opcion-frase {
    padding: .9rem 1rem;
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
    background: var(--papel);
    color: var(--tinta);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}

.opcion-frase:active { transform: scale(.99); }
.opcion-frase.dibujo-bien { border-color: var(--bien); }
.opcion-frase.dibujo-casi { border-color: var(--flojo); }

.medalla-nivel { margin: 1rem 0; color: var(--acento); }

.nivel-grande {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tinta);
    margin: .4rem 0 .1rem;
}

.lo-que-sabes-titulo { margin: 1.4rem 0 .3rem; font-weight: 600; }

.pantalla-prueba .lista-sabe { text-align: left; display: inline-block; }

.hacer-la-prueba { margin: 0 0 1rem; }

.tarjeta-prueba { border-color: var(--accion); }


/* ===========================================================================
   LAS TEMPORADAS
   ---------------------------------------------------------------------------
   Un episodio abierto se lee; uno cerrado se ve, pero apagado. Esconderlo del
   todo no crea intriga: hace pensar que no hay nada más.
   ======================================================================== */

.pantalla-temporada main { max-width: 44rem; }

.resumen-temporada {
    color: var(--tinta-suave);
    text-align: center;
    margin: 0 auto 1rem;
    max-width: 34rem;
}

.episodio {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--redondeo);
    padding: 1rem 1.1rem 1.2rem;
    margin: 0 0 1rem;
}

.episodio h2 { margin: 0 0 .5rem; font-size: 1.05rem; }

.episodio-gris { opacity: .55; }
.episodio-gris h2 { font-weight: 600; }
.episodio-hecho { border-color: var(--bien); }

.gancho { margin: 0 0 .8rem; }

.escena {
    background: var(--fondo);
    border-radius: var(--redondeo);
    padding: .8rem .9rem;
    margin: 0 0 1rem;
}

.escena-linea { margin: .4rem 0; }
.escena-en { font-weight: 600; }
.escena-es { display: block; color: var(--tinta-suave); font-size: .88em; }

.partes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.parte a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border: 2px solid var(--borde);
    border-radius: var(--redondeo);
    text-decoration: none;
    color: var(--tinta);
}

.parte-hecha a { border-color: var(--bien); color: var(--tinta-suave); }
.parte-nombre { font-weight: 600; }
.parte-tipo { display: block; color: var(--tinta-suave); font-size: .8em; }

.final-episodio { margin-top: 1rem; }

/* El «continuará»: lo último que se lee y lo que hace volver. */
.continuara {
    margin: .8rem 0 0;
    padding-top: .8rem;
    border-top: 1px dashed var(--borde);
    font-style: italic;
    color: var(--acento);
}

.tarjeta-temporada { border-color: var(--acento); }


/* ===========================================================================
   QUÉ HAY EN PARLELIA Y POR QUÉ (en el panel)
   ---------------------------------------------------------------------------
   Cada pieza va plegada: el índice entero abierto son cinco pantallas de
   móvil, y lo que se busca aquí casi siempre es UNA cosa concreta.
   ======================================================================== */

.bloque-metodo h3 { margin-top: 1.4rem; }

.pieza {
    border-top: 1px solid var(--borde);
    padding: .55rem 0;
}

.pieza summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
}

.pieza-titulo { font-weight: 600; color: var(--tinta); }

.pieza-hay { color: var(--tinta-suave); font-size: .85em; }

.pieza-que {
    margin: .6rem 0 .5rem;
    color: var(--tinta);
}

.pieza-linea {
    margin: .4rem 0;
    color: var(--tinta-suave);
    font-size: .92em;
}

.pieza-linea strong { color: var(--tinta); }

.bloque-metodo .lista-contenido li { padding: .5rem 0; }

.bloque-metodo .lista-contenido small {
    display: block;
    margin: .15rem 0 0;
    color: var(--tinta-suave);
}


/* El matiz de cada idea pedagógica: en un tono aparte, porque es lo que impide
   leer el resto como si fuera una ley. */
.pieza-matiz {
    margin: .5rem 0 .2rem;
    padding: .5rem .7rem;
    background: var(--fondo);
    border-radius: .6rem;
    color: var(--tinta-suave);
    font-size: .88em;
}

.pieza-matiz strong { color: var(--flojo); }

.pieza-idea summary .pieza-titulo { font-weight: 600; }


/* ===========================================================================
   EL RECORRIDO DE CADA UNO (para su padre o su madre)
   ---------------------------------------------------------------------------
   Tres líneas por apartado y ninguna más: qué es, para qué sirve y cómo le va.
   Lo que no se ha probado se ve apagado, pero se ve: un apartado escondido
   parece que no existe, y lo que pasa es que todavía no se ha abierto.
   ======================================================================== */

.pantalla-recorrido main { max-width: 44rem; }

.paso {
    border-top: 1px solid var(--borde);
    padding: .9rem 0 .5rem;
}

.paso:first-of-type { border-top: 0; }

.paso h3 { margin: 0 0 .3rem; font-size: 1rem; }

.paso-para-que {
    margin: 0 0 .5rem;
    color: var(--tinta-suave);
    font-size: .92em;
}

.paso-como { margin: 0; }

.paso-como small {
    display: block;
    margin-top: .2rem;
    color: var(--tinta-suave);
}

.paso-sin-empezar { opacity: .6; }

.pantalla-recorrido .nivel-grande { margin: .2rem 0 .8rem; }


/* ===========================================================================
   LA PORTADA PÚBLICA
   ---------------------------------------------------------------------------
   Se ve casi siempre desde un móvil y con prisa, así que manda el orden: qué
   es, qué se hace dentro, por qué así, qué hay de verdad y cómo se entra.
   Sin imágenes pesadas salvo el dibujo de arriba, que es el que explica de qué
   va esto en medio segundo.
   ======================================================================== */

.pantalla-bienvenida main { max-width: 64rem; }

/* ------------------------------------------------------------------- HERO */

.hero {
    display: grid;
    gap: 1.4rem;
    align-items: center;
    padding: .5rem 0 1.6rem;
}

.hero-marca {
    margin: 0 0 .4rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--acento);
}

.hero-marca span {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    font-style: italic;
    color: var(--tinta-suave);
    letter-spacing: 0;
}

.hero-titular {
    margin: 0 0 .7rem;
    font-size: clamp(1.9rem, 7vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--tinta);
}

.hero-frase {
    margin: 0 0 1.3rem;
    font-size: 1.08rem;
    color: var(--tinta-suave);
    max-width: 34rem;
}

.hero-botones {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    margin: 0 0 .8rem;
}

.boton-grande { padding: .85rem 1.6rem; font-size: 1.05rem; }

/* La nota de debajo del botón, en su renglón. Un botón es inline, así que sin
   esto la frase «solo usamos tu correo...» empieza pegada a su derecha y parece
   parte del botón. */
.tarjeta-formulario .boton-grande + .nota-pequena { display: block; margin-top: 12px; }

.hero-pie { margin: 0; font-size: .85rem; color: var(--tinta-suave); }

/* El dibujo de arriba: redondeado, con sombra y sin pasarse de alto en el
   móvil, que si no empuja el botón fuera de la pantalla. */
.hero-dibujo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--redondeo);
    box-shadow: var(--sombra);
}

/* ------------------------------------------------------------- LOS BLOQUES */

.bloque-ancho { margin-bottom: 1.4rem; }

.portada-bloque {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--redondeo);
    padding: 1.3rem 1.3rem 1.5rem;
}

.portada-bloque h2 {
    margin: 0 0 .7rem;
    font-size: clamp(1.2rem, 4.5vw, 1.5rem);
}

.portada-grande { font-size: 1.1rem; color: var(--tinta); }

/* Qué hacemos: cuatro cosas con su icono. */
.que-hacemos {
    display: grid;
    gap: 1rem;
    margin-top: 1.2rem;
}

.hace h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .3rem;
    font-size: 1rem;
    color: var(--acento);
}

.hace p { margin: 0; color: var(--tinta-suave); }

/* Un día por dentro: los cinco pasos, numerados. */
.un-dia {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

/* DOS COLUMNAS Y DOS HIJOS, ni uno más. Con el texto suelto fuera de un
   elemento, la cuadrícula se lo llevaba a su propia celda de dos rem y salía
   una palabra por línea. */
.un-dia li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .7rem;
    align-items: start;
    color: var(--tinta-suave);
}

.un-dia-texto { line-height: 1.5; }

.un-dia strong { color: var(--tinta); }

.un-dia-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--acento);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}

.camino { width: 100%; height: auto; margin: 1rem 0 1rem; }

/* Las cifras del contenido. */
.cifras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
    margin: 1rem 0;
}

.cifra {
    background: var(--fondo);
    border-radius: var(--redondeo);
    padding: .9rem .6rem;
    text-align: center;
}

.cifra strong {
    display: block;
    font-size: 1.7rem;
    color: var(--acento);
    line-height: 1.1;
}

.cifra span { font-size: .82rem; color: var(--tinta-suave); }

.portada-lista { margin: 0; padding-left: 1.2rem; }
.portada-lista li { margin: .5rem 0; color: var(--tinta-suave); }

/* Las preguntas, plegadas: abiertas son dos pantallas de móvil. */
.preguntas { display: grid; gap: .1rem; margin: .8rem 0 1rem; }

.pregunta {
    border-top: 1px solid var(--borde);
    padding: .7rem 0;
}

.pregunta summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--tinta);
}

.pregunta p { margin: .5rem 0 0; color: var(--tinta-suave); }

/* El bloque de la invitación, destacado: es a donde lleva todo lo demás. */
.bloque-invitacion {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 6%, var(--papel));
}

/* La trampa para robots: fuera de la vista pero no «display:none», que algunos
   programas se saltan lo que está escondido así. */
.solo-para-robots {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (min-width: 46rem) {
    .hero {
        grid-template-columns: 1.05fr .95fr;
        gap: 2.2rem;
        padding: 1.5rem 0 2.4rem;
    }

    /* El dibujo a la derecha y el texto a la izquierda: se lee antes lo que
       dice que lo que se ve, y lo que dice es lo que convence. */
    .hero-dibujo { order: 2; }
    .hero-dibujo img { max-height: none; }

    .que-hacemos { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.8rem; }
    .cifras { grid-template-columns: repeat(3, 1fr); }
    .portada-bloque { padding: 1.6rem 1.8rem 1.8rem; }
}

/* ---------------------------------------- Las invitaciones, en el panel */

.cuantas-esperan {
    display: inline-block;
    min-width: 1.5em;
    padding: .05em .45em;
    margin-left: .4em;
    border-radius: 999px;
    background: var(--accion);
    color: var(--accion-tinta);
    font-size: .8em;
    text-align: center;
}

.solicitud {
    border-top: 1px solid var(--borde);
    padding: .7rem 0;
}

.solicitud:first-of-type { border-top: 0; }

.solicitud-quien { margin: 0 0 .2rem; }
.solicitud-quien small { color: var(--tinta-suave); margin-left: .4rem; }

.solicitud-dice {
    margin: .2rem 0 .5rem;
    color: var(--tinta-suave);
    font-style: italic;
}

.solicitud-botones { display: flex; gap: .5rem; flex-wrap: wrap; }

.solicitud-botones button { padding: .45rem .9rem; font-size: .9rem; }

/* Lo ya atendido, apagado: se ve, pero no compite con lo que espera. */
.solicitud-archivada, .solicitud-dentro { opacity: .6; }


/* Un enlace dentro del parte del panel es un enlace, no una caja: sin esto
   heredaba el borde de los campos de formulario y parecía un buscador. */
.parte li a {
    color: var(--acento);
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
}


/* Las acciones de cada cuenta, en el panel. Apiladas en el móvil y en fila en
   cuanto hay sitio; el borrar va plegado, que no es un botón para rozar. */
.cuenta-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-top: .5rem;
}

.cuenta-botones button { padding: .4rem .85rem; font-size: .88rem; }

.borrar-cuenta summary,
.invitar-a-dedo summary {
    cursor: pointer;
    color: var(--tinta-suave);
    font-size: .88rem;
}

.borrar-cuenta summary { color: var(--falta); }

.borrar-cuenta .formulario-perfil,
.invitar-a-dedo .formulario-perfil {
    margin-top: .6rem;
    padding: .8rem;
    background: var(--fondo);
    border-radius: var(--redondeo);
}

.invitar-a-dedo { margin: 0 0 1rem; }


/* La página de privacidad: texto largo, pero legible. Ancho corto --unas
   setenta letras por línea-- porque un párrafo de pared entera no se lee. */
.pantalla-legal main { max-width: 44rem; }

.pantalla-legal .portada-bloque h3 { margin: 1.1rem 0 .4rem; font-size: .98rem; }

.pantalla-legal .portada-lista li { margin: .6rem 0; }

.legal-fecha {
    text-align: center;
    color: var(--tinta-suave);
    font-size: .88rem;
    margin: 0 0 1.4rem;
}


/* ===========================================================================
   EL MANUAL
   ---------------------------------------------------------------------------
   Athos a un lado y lo que dice al otro. En el móvil se apila, con la cara
   pequeña arriba: un perro de 120 px empujando el texto media pantalla abajo
   hace que nadie llegue al paso 3.
   ======================================================================== */

.pantalla-manual main { max-width: 46rem; }

.pasos-manual {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.paso-manual {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: .9rem;
    align-items: start;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--redondeo);
    padding: 1rem;
}

.paso-cara { width: 64px; }
.paso-cara svg { width: 100%; height: auto; }

.paso-contenido h2 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    color: var(--tinta);
}

.paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--acento);
    color: #fff;
    font-size: .8em;
    flex: none;
}

/* Lo que dice Athos, más grande: es la frase que se escucha. */
.paso-texto {
    margin: 0 0 .5rem;
    font-size: 1.02rem;
    color: var(--tinta);
}

/* Y lo que es para el adulto, debajo y más pequeño. */
.paso-detalle {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
    color: var(--tinta-suave);
    font-size: .9rem;
}

.paso-detalle li { margin: .25rem 0; }

.enlace-manual { text-align: right; margin: -.4rem 0 .8rem; }

@media (min-width: 34rem) {
    .paso-manual { grid-template-columns: 90px 1fr; gap: 1.2rem; padding: 1.2rem; }
    .paso-cara { width: 90px; }
}


/* El altavoz de la entradilla del manual: el texto ya está en el bocadillo de
   Athos, así que aquí solo queda el botón. */
.leible.solo-el-boton { display: none; }

.altavoz-entradilla { margin: -.6rem 0 1.2rem; }


/* ===========================================================================
   LA CARA DE CADA UNO: foto o dibujo
   ---------------------------------------------------------------------------
   El mismo hueco sirva lo que sirva, para que la portada no dé un salto cuando
   alguien sube su foto.
   ======================================================================== */

.cara-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: var(--fondo);
}

.perfil-emoji,
.quien-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.perfil-emoji .cara-foto,
.quien-emoji .cara-foto { border-radius: 50%; }

/* El color de cada uno, en su tarjeta de la portada. */
.perfil { border-top: 4px solid var(--suyo, var(--acento)); }

/* --------------------------------------------- Elegir foto y color */

.campo-foto { display: grid; gap: .6rem; justify-items: start; }

.foto-ahora {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fondo);
    border: 2px solid var(--borde);
    overflow: hidden;
}

.foto-botones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* La etiqueta que abre el selector de ficheros se comporta como un botón. */
.foto-botones label { cursor: pointer; }

.colores { display: flex; flex-wrap: wrap; gap: .5rem; }

.color-opcion {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--suyo);
    cursor: pointer;
    border: 3px solid transparent;
    display: inline-block;
}

.color-opcion input { position: absolute; opacity: 0; pointer-events: none; }

/* El elegido, con un aro: sin él no se sabe cuál está puesto, que es justo lo
   que hay que saber al abrir los ajustes. */
.color-opcion:has(input:checked) {
    border-color: var(--tinta);
    transform: scale(1.08);
}


/* Cómo instalarlo, por aparato. */
.aparato {
    border-top: 1px solid var(--borde);
    padding: .9rem 0 .2rem;
}

.aparato:first-of-type { border-top: 0; }

.aparato h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .5rem;
    font-size: 1rem;
}

.aparato h3 small {
    font-weight: 400;
    color: var(--tinta-suave);
    font-size: .82em;
}

.pasos-instalar {
    margin: 0;
    padding-left: 1.3rem;
    color: var(--tinta);
    font-size: .94rem;
}

.pasos-instalar li { margin: .35rem 0; }


/* ===========================================================================
   ATHOS SE PRESENTA
   ---------------------------------------------------------------------------
   La ilustración primero y grande: es lo que hace que un niño se quede a leer
   --o a escuchar-- lo que viene debajo. En pantalla ancha, dibujo y texto van
   uno al lado del otro, alternándose para que no parezca una lista.
   ======================================================================== */

.pantalla-athos main { max-width: 52rem; }

.capitulos-athos { display: grid; gap: 1.4rem; margin: 1.6rem 0; }

.capitulo-athos {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--redondeo);
    overflow: hidden;
}

.capitulo-foto {
    display: block;
    width: 100%;
    height: auto;
    background: var(--fondo);
}

.capitulo-texto { padding: 1.1rem 1.2rem 1.3rem; }

.capitulo-texto h2 { margin: 0 0 .5rem; font-size: 1.15rem; }

@media (min-width: 46rem) {
    .capitulo-athos {
        display: grid;
        grid-template-columns: 46% 1fr;
        align-items: center;
    }

    /* Una sí y otra no, el dibujo a la derecha: si todas van igual, cinco
       capítulos seguidos se leen como un formulario. */
    .capitulo-athos:nth-child(even) .capitulo-foto { order: 2; }

    .capitulo-foto { height: 100%; object-fit: cover; }
}


/* El botón de entrar de la barra, para quien ya tiene cuenta y vuelve. Va en
   blanco sobre el azul de la cabecera: se ve, y no se confunde con el amarillo
   de «aquí se habla». */
.boton-entrar {
    display: inline-block;
    padding: .35rem .9rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: var(--cabecera-tinta);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
}

.boton-entrar:hover, .boton-entrar:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: var(--cabecera-tinta);
}

/* La etiqueta de «en pruebas»: va en la firma del pie, en todas las pantallas
   y no solo en la portada, porque lo que está en pruebas es Parlelia entero. En
   gris y no en amarillo: aquí el amarillo significa «esto se toca» --está
   dicho arriba-- y una etiqueta que no se pulsa le quitaría ese sentido. */
.etiqueta-beta {
    display: inline-block;
    font-style: normal;
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--borde);
    border-radius: 999px;
    padding: .1em .55em;
    vertical-align: middle;
    margin: 0 .1em;
}


/* --- Ordena la frase ----------------------------------------------------- */

/* La frase que se va montando: siempre arriba y con sitio reservado aunque
   esté vacía, para que al poner la primera pieza no salte toda la pantalla. */
.montada {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    padding: 12px;
    margin: 0 auto 16px;
    max-width: 560px;
    border: 2px dashed var(--borde);
    border-radius: var(--redondeo);
    background: var(--papel);
}

.montada-bien { border-color: var(--bien); border-style: solid; }
.montada-casi { border-color: var(--flojo); border-style: solid; }

.piezas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto 20px;
}

/* Cada palabra, un botón grande: esto se toca con el dedo, y muchas veces con
   el dedo de un niño de seis años. 44 píxeles de alto es lo mínimo que se
   acierta sin mirar. */
.pieza {
    min-height: 44px;
    padding: .5rem .9rem;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--papel);
    color: var(--tinta);
    font-family: inherit;
    font-size: 1.15rem;
    cursor: pointer;
}

.pieza-puesta { border-color: var(--acento); }
.pieza-buena { border-color: var(--bien); cursor: default; }

.juego-ordenar .boton-principal[disabled] { opacity: .45; cursor: default; }


/* --- Parejas ------------------------------------------------------------- */

/* Tres columnas en el móvil y cuatro con sitio: con doce cartas en dos
   columnas habría que hacer scroll, y un tablero que no se ve entero no se
   puede recordar, que es de lo que va el juego. */
.tablero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 480px;
    margin: 0 auto 20px;
}

.carta {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--papel);
    color: var(--tinta);
    font-family: inherit;
    font-size: 2rem;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: var(--sombra);
}

/* La carta con palabra lleva texto, no un dibujo: más pequeño y partido en
   varias líneas si hace falta, que «ice cream» no quepa no puede romper el
   tablero. */
.carta-texto { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }

.carta-dorso { opacity: .5; }

.carta-vuelta { border-color: var(--acento); }

.carta-hecha {
    border-color: var(--bien);
    background: color-mix(in srgb, var(--bien) 12%, var(--papel));
    cursor: default;
}

@media (min-width: 560px) {
    .tablero { grid-template-columns: repeat(4, 1fr); }
}

/* Cada tema con sus dos juegos: la tarjeta de siempre y, debajo, el otro. */
.tema-con-juegos { display: flex; flex-direction: column; gap: 6px; }

.boton-otro-juego {
    align-self: flex-start;
    padding: .3rem .8rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--acento);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.boton-otro-juego:hover, .boton-otro-juego:focus-visible { border-color: var(--acento); }