/* ============================================================
   AULA AIAO · Curso de informática e IA para mayores
   Hoja de estilos única. Colores del Aula AIAO:
   naranja #ea580c · rojo #dc2626
   Pensada para personas mayores: letra grande, botones grandes,
   mucho contraste, nada de letra pequeña.
   ============================================================ */

:root{
  --naranja:#ea580c;
  --naranja-osc:#c2410c;
  --naranja-claro:#fff1e8;
  --rojo:#dc2626;
  --rojo-osc:#b91c1c;
  --negro:#1b1b1f;
  --gris-texto:#2f2f36;
  --gris:#6b6b76;
  --gris-claro:#f4f4f6;
  --borde:#e3e3e8;
  --verde:#15803d;
  --verde-claro:#ecfdf3;
  --azul:#1d4ed8;
  --azul-claro:#eef3ff;
  --amarillo:#facc15;
  --amarillo-claro:#fff9db;
  --blanco:#ffffff;
  --sombra:0 6px 24px rgba(20,20,30,.08);
  --sombra-fuerte:0 14px 40px rgba(20,20,30,.16);
  --radio:18px;
  --ancho:1120px;
  --base:20px;            /* tamaño base de letra (se cambia con A+ / A-) */
  --fuente:"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
html[data-letra="grande"]{ --base:24px; }
html[data-letra="enorme"]{ --base:28px; }

*{ box-sizing:border-box; }
html{ font-size:var(--base); scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--fuente); color:var(--gris-texto); background:var(--blanco);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--naranja-osc); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--rojo); }
h1,h2,h3,h4{ color:var(--negro); line-height:1.2; margin:0 0 .5em; font-weight:800; }
h1{ font-size:2.2rem; }
h2{ font-size:1.6rem; margin-top:1.2em; }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }
ul,ol{ padding-left:1.4em; }
li{ margin-bottom:.4em; }
strong{ color:var(--negro); }
.visually-hidden{ position:absolute; left:-9999px; }

/* Salto al contenido (accesibilidad) */
.saltar{ position:absolute; left:-9999px; top:0; background:var(--negro); color:#fff; padding:.6em 1em; z-index:999; }
.saltar:focus{ left:10px; top:10px; }

.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 20px; }

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--borde);
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.cabecera .fila{ display:flex; align-items:center; gap:18px; min-height:84px; }
.logo img{ height:62px; width:auto; }
.menu{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.menu a{
  text-decoration:none; color:var(--negro); font-weight:700; padding:.5em .6em; border-radius:12px; font-size:.84rem; white-space:nowrap;
}
.menu a:hover, .menu a.activo{ background:var(--naranja-claro); color:var(--naranja-osc); }
.herramientas{ display:flex; gap:6px; align-items:center; }
.btn-letra{
  border:2px solid var(--borde); background:#fff; border-radius:12px; font-weight:800; cursor:pointer;
  min-width:52px; min-height:48px; font-size:1rem; color:var(--negro);
}
.btn-letra:hover{ border-color:var(--naranja); color:var(--naranja-osc); }
.btn-menu-movil{ display:none; }

@media (max-width:900px){
  .menu{ display:none; width:100%; order:10; flex-direction:column; padding-bottom:10px; }
  .menu.abierto{ display:flex; }
  .menu a{ font-size:1.05rem; padding:.7em 1em; }
  .btn-menu-movil{ display:inline-flex; margin-left:auto; }
  .cabecera .fila{ flex-wrap:wrap; }
  .logo img{ height:50px; }
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--naranja); color:#fff !important; text-decoration:none; font-weight:800;
  padding:.8em 1.5em; border-radius:14px; border:none; cursor:pointer; font-size:1.05rem; min-height:58px;
  box-shadow:0 4px 14px rgba(234,88,12,.3); transition:transform .08s ease, background .15s ease;
  font-family:inherit; line-height:1.2; text-align:center;
}
.btn:hover{ background:var(--naranja-osc); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn.rojo{ background:var(--rojo); box-shadow:0 4px 14px rgba(220,38,38,.3); }
.btn.rojo:hover{ background:var(--rojo-osc); }
.btn.secundario{ background:#fff; color:var(--naranja-osc) !important; border:2px solid var(--naranja); box-shadow:none; }
.btn.secundario:hover{ background:var(--naranja-claro); }
.btn.gris{ background:var(--gris-claro); color:var(--negro) !important; box-shadow:none; border:2px solid var(--borde); }
.btn.gris:hover{ background:#e9e9ee; }
.btn.verde{ background:var(--verde); box-shadow:0 4px 14px rgba(21,128,61,.3); }
.btn.grande{ font-size:1.25rem; padding:1em 1.8em; }
.btn.pequeno{ min-height:44px; padding:.5em 1em; font-size:.95rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-escuchar{
  background:var(--azul-claro); color:var(--azul) !important; border:2px solid #c7d6ff; box-shadow:none; min-height:46px; padding:.4em 1em; font-size:.9rem;
}
.btn-escuchar:hover{ background:#dfe8ff; }
.btn-escuchar.hablando{ background:var(--azul); color:#fff !important; }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(120deg, var(--naranja) 0%, var(--rojo) 100%); color:#fff; padding:56px 0 48px; position:relative; overflow:hidden;
}
.hero::after{ content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.08); }
.hero h1, .hero h2{ color:#fff; }
.hero p{ font-size:1.2rem; max-width:720px; }
.hero .fila{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.hero .texto{ flex:1 1 480px; position:relative; z-index:1; }
.hero .mascota{ flex:0 0 280px; text-align:center; position:relative; z-index:1; }
.hero .mascota img{ width:260px; margin:0 auto; filter:drop-shadow(0 16px 24px rgba(0,0,0,.25)); }
.hero .etiqueta{ display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); padding:.3em .9em; border-radius:999px; font-weight:700; font-size:.9rem; margin-bottom:14px; }
.hero .acciones{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.hero .btn{ background:#fff; color:var(--naranja-osc) !important; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.hero .btn:hover{ background:#fff4ec; }
.hero .btn.oscuro{ background:var(--negro); color:#fff !important; }
.hero .btn.oscuro:hover{ background:#000; }

/* Hero de tema (más compacto) */
.hero.tema{ padding:40px 0 36px; }
.hero.tema h1{ font-size:2rem; }
.hero .numero{ font-size:4rem; font-weight:900; opacity:.35; line-height:1; }
.hero .meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.hero .meta span{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); padding:.25em .8em; border-radius:999px; font-size:.9rem; font-weight:700; }

/* Bocadillo de la mascota */
.bocadillo{
  position:relative; background:#fff; color:var(--gris-texto); border-radius:16px; padding:16px 20px; font-weight:600; box-shadow:var(--sombra-fuerte);
  max-width:360px; margin:0 auto 12px; font-size:1rem;
}
.bocadillo::after{ content:""; position:absolute; bottom:-12px; left:50%; margin-left:-12px; border:12px solid transparent; border-top-color:#fff; border-bottom:0; }

/* ---------- Secciones ---------- */
.seccion{ padding:48px 0; }
.seccion.gris{ background:var(--gris-claro); }
.seccion.naranja-suave{ background:var(--naranja-claro); }
.cabecera-seccion{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.cabecera-seccion h2{ margin:0; }
.subtitulo{ color:var(--gris); font-size:1.05rem; margin-bottom:24px; }

/* Tarjetas */
.tarjetas{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.tarjeta{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:24px; box-shadow:var(--sombra); position:relative;
}
.tarjeta h3{ margin-top:0; }
.tarjeta .icono{ font-size:2.4rem; line-height:1; margin-bottom:10px; }
.tarjeta.naranja{ background:var(--naranja-claro); border-color:#ffd6bd; }
.tarjeta.verde{ background:var(--verde-claro); border-color:#bfe7cc; }
.tarjeta.amarilla{ background:var(--amarillo-claro); border-color:#f3e29a; }
.tarjeta.azul{ background:var(--azul-claro); border-color:#c7d6ff; }
.tarjeta.oscura{ background:var(--negro); color:#fff; border-color:#000; }
.tarjeta.oscura h3, .tarjeta.oscura strong{ color:#fff; }

/* Tarjetas de tema (portada) */
.tema-card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease;
}
.tema-card:hover{ transform:translateY(-3px); box-shadow:var(--sombra-fuerte); color:inherit; }
.tema-card .num{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--naranja); color:#fff; font-weight:900; font-size:1.3rem; }
.tema-card.hecho .num{ background:var(--verde); }
.tema-card .estado{ font-size:.9rem; color:var(--gris); font-weight:700; margin-top:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tema-card .estado .ok{ color:var(--verde); }
.tema-card .tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{ display:inline-block; background:var(--gris-claro); border:1px solid var(--borde); border-radius:999px; padding:.15em .7em; font-size:.8rem; font-weight:700; color:var(--gris); }
.tag.pc{ background:var(--azul-claro); color:var(--azul); border-color:#c7d6ff; }
.tag.movil{ background:var(--verde-claro); color:var(--verde); border-color:#bfe7cc; }
.tag.ambos{ background:var(--amarillo-claro); color:#854d0e; border-color:#f3e29a; }

/* Barra de progreso */
.progreso{ background:#fff; border:1px solid var(--borde); border-radius:999px; height:26px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.08); }
.progreso > div{ height:100%; background:linear-gradient(90deg, var(--naranja), var(--rojo)); width:0; transition:width .6s ease; border-radius:999px; }
.progreso-texto{ font-weight:800; margin-top:8px; }

/* ---------- Página de tema ---------- */
.tema-cuerpo{ padding:40px 0; }
.bloque{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:28px; margin-bottom:28px; box-shadow:var(--sombra); }
.bloque > h2:first-child, .bloque > .titulo-bloque{ margin-top:0; }
.titulo-bloque{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.titulo-bloque h2{ margin:0; display:flex; align-items:center; gap:.4em; }
.titulo-bloque .emoji{ font-size:1.5em; }

.objetivos{ list-style:none; padding:0; display:grid; gap:10px; }
.objetivos li{ background:var(--verde-claro); border:1px solid #bfe7cc; border-radius:12px; padding:12px 16px; font-weight:600; display:flex; gap:10px; align-items:flex-start; }
.objetivos li::before{ content:"✔"; color:var(--verde); font-weight:900; }

/* Dos columnas: "Así es de verdad" / "Traducido al cristiano" */
.traduccion{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.traduccion .col{ border-radius:16px; padding:20px; }
.traduccion .tecnico{ background:var(--gris-claro); border:1px solid var(--borde); }
.traduccion .clasico{ background:var(--naranja-claro); border:1px solid #ffd6bd; }
.traduccion h3{ display:flex; align-items:center; gap:.4em; margin-top:0; }
@media (max-width:760px){ .traduccion{ grid-template-columns:1fr; } }

/* Caja de recuerdos (nostalgia) */
.recuerdo{
  background:#fdf6e3; border:2px dashed #e0c27a; border-radius:16px; padding:20px 22px; margin:18px 0; position:relative;
  font-family:Georgia, "Times New Roman", serif; font-size:1.05rem; color:#4a3b16;
}
.recuerdo::before{ content:"📻 ¿Te acuerdas?"; display:block; font-family:var(--fuente); font-weight:900; color:#8a6d1f; margin-bottom:6px; letter-spacing:.3px; }

/* Pasos */
.pasos{ list-style:none; padding:0; margin:0; counter-reset:paso; display:grid; gap:14px; }
.pasos li{
  counter-increment:paso; display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:start;
  background:#fff; border:1px solid var(--borde); border-radius:16px; padding:16px;
}
.pasos li > *{ grid-column:2; }
.pasos li::before{
  content:counter(paso); grid-column:1; grid-row:1 / span 3; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:16px;
  background:var(--naranja); color:#fff; font-weight:900; font-size:1.6rem;
}
.pasos li > strong{ display:block; font-size:1.1rem; margin-bottom:4px; }
.pasos .dibujo{ margin-top:10px; }

/* Avisos */
.aviso{ border-radius:16px; padding:18px 20px; margin:16px 0; border:1px solid; display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; }
.aviso .ico{ font-size:2rem; line-height:1; }
.aviso.tranquilo{ background:var(--verde-claro); border-color:#bfe7cc; }
.aviso.ojo{ background:var(--amarillo-claro); border-color:#f3e29a; }
.aviso.peligro{ background:#fff0f0; border-color:#f5bcbc; }
.aviso.truco{ background:var(--azul-claro); border-color:#c7d6ff; }
.aviso strong:first-child{ display:block; margin-bottom:4px; }

/* Mitos ("esto no puede pasar") */
.mitos{ display:grid; gap:12px; }
.mito{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mito .falso, .mito .verdad{ border-radius:12px; padding:12px 14px; }
.mito .falso{ background:#fff0f0; border:1px solid #f5bcbc; }
.mito .verdad{ background:var(--verde-claro); border:1px solid #bfe7cc; }
.mito .falso::before{ content:"❌ Miedo: "; font-weight:900; color:var(--rojo); }
.mito .verdad::before{ content:"✅ Verdad: "; font-weight:900; color:var(--verde); }
@media (max-width:700px){ .mito{ grid-template-columns:1fr; } }

/* Teclas y botones dibujados */
.tecla{ display:inline-block; border:2px solid #9a9aa5; border-bottom-width:4px; border-radius:8px; padding:.1em .6em; background:#f8f8fa; font-weight:800; font-family:var(--fuente); color:var(--negro); white-space:nowrap; }
.boton-ui{ display:inline-block; background:var(--naranja); color:#fff; border-radius:8px; padding:.1em .6em; font-weight:800; }

/* ---------- Juegos ---------- */
.juego{
  background:linear-gradient(180deg,#fff,#fff7f1); border:2px solid #ffd6bd; border-radius:var(--radio); padding:20px; margin-top:12px;
  min-height:200px; position:relative; user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.juego .instruccion{ font-weight:800; font-size:1.1rem; margin-bottom:12px; color:var(--negro); }
.juego .zona{ background:#fff; border:1px dashed #ffb27a; border-radius:14px; min-height:240px; position:relative; overflow:hidden; }
.juego .marcador{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; font-weight:800; }
.juego .marcador .pill{ background:var(--naranja-claro); border:1px solid #ffd6bd; border-radius:999px; padding:.25em .9em; }
.juego .mensaje{ margin-top:10px; min-height:1.6em; font-weight:700; color:var(--naranja-osc); }
.juego .mensaje.bien{ color:var(--verde); }
.juego .mensaje.mal{ color:var(--rojo); }
.juego .completado{ margin-top:14px; background:var(--verde-claro); border:2px solid #bfe7cc; border-radius:14px; padding:16px; font-weight:800; color:var(--verde); display:none; }
.juego.terminado .completado{ display:block; }
.objetivo-juego{ position:absolute; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:2.6rem; transition:transform .1s ease; }
.objetivo-juego:hover{ transform:scale(1.15); }
.bombilla{ display:inline-flex; align-items:center; justify-content:center; width:92px; height:92px; border-radius:50%; background:#ddd; border:3px solid #bbb; font-size:2.4rem; cursor:pointer; margin:8px; transition:all .15s; }
.bombilla.encendida{ background:#fff3a8; border-color:#f5c518; box-shadow:0 0 22px #ffe066; }
.bombilla.peq{ width:64px; height:64px; font-size:1.7rem; }
.bombilla.mini{ width:44px; height:44px; font-size:1.1rem; }

/* Ventana simulada */
.sim-ventana{ border:2px solid #9a9aa5; border-radius:10px; background:#fff; width:min(100%,520px); box-shadow:var(--sombra-fuerte); overflow:hidden; margin:0 auto; }
.sim-ventana .barra{ display:flex; align-items:center; background:#e9e9ee; padding:6px 10px; gap:6px; }
.sim-ventana .barra .titulo{ flex:1; font-weight:700; font-size:.95rem; }
.sim-ventana .barra button{ width:44px; height:38px; border:1px solid #bbb; background:#fff; border-radius:6px; font-weight:900; font-size:1.1rem; cursor:pointer; }
.sim-ventana .barra button.cerrar:hover{ background:var(--rojo); color:#fff; }
.sim-ventana .contenido{ padding:18px; min-height:120px; }
.sim-ventana.max{ width:100%; }
.sim-ventana.min{ display:none; }
.sim-escritorio{ background:linear-gradient(180deg,#2d6cdf,#1b3f8f); border-radius:14px; min-height:420px; position:relative; padding:16px; overflow:hidden; }
.sim-escritorio .icono-esc{ position:absolute; width:96px; text-align:center; color:#fff; font-weight:700; font-size:.85rem; cursor:pointer; padding:6px; border-radius:8px; }
.sim-escritorio .icono-esc:hover, .sim-escritorio .icono-esc.sel{ background:rgba(255,255,255,.25); }
.sim-escritorio .icono-esc .ico{ font-size:2.6rem; }
.sim-barra-tareas{ position:absolute; left:0; right:0; bottom:0; height:56px; background:rgba(20,20,30,.85); display:flex; align-items:center; padding:0 10px; gap:8px; color:#fff; }
.sim-barra-tareas .inicio{ width:48px; height:44px; border-radius:8px; background:#fff; color:#1b3f8f; display:flex; align-items:center; justify-content:center; font-weight:900; cursor:pointer; font-size:1.3rem; }
.sim-barra-tareas .app{ height:44px; padding:0 12px; border-radius:8px; background:rgba(255,255,255,.15); display:flex; align-items:center; gap:6px; cursor:pointer; font-size:.9rem; font-weight:700; }
.sim-barra-tareas .reloj{ margin-left:auto; font-weight:700; font-size:.9rem; cursor:pointer; padding:6px 10px; border-radius:8px; }
.sim-barra-tareas .bandeja{ display:flex; gap:10px; font-size:1.1rem; }
.sim-barra-tareas .bandeja span{ cursor:pointer; padding:6px; border-radius:6px; }
.sim-barra-tareas .reloj:hover, .sim-barra-tareas .bandeja span:hover{ background:rgba(255,255,255,.2); }

/* Móvil simulado */
.sim-movil{ width:300px; height:560px; margin:22px auto; background:#111; border-radius:38px; padding:14px; position:relative; box-shadow:var(--sombra-fuerte); }
.sim-movil .boton-lateral{ position:absolute; right:-6px; width:6px; height:60px; background:#333; border-radius:3px; cursor:pointer; }
.sim-movil .boton-lateral.encendido{ top:150px; }
.sim-movil .boton-lateral.vol{ left:-6px; right:auto; height:44px; }
.sim-movil .boton-lateral.vol.mas{ top:120px; } .sim-movil .boton-lateral.vol.menos{ top:172px; }
.sim-movil .pantalla{ background:#fff; width:100%; height:100%; border-radius:28px; overflow:hidden; position:relative; }
.sim-movil .pantalla.apagada{ background:#000; }
.sim-movil .barra-estado{ display:flex; justify-content:space-between; padding:8px 16px; font-size:.75rem; font-weight:700; color:#333; }
.sim-movil .apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:10px 14px; }
.sim-movil .app-ico{ text-align:center; font-size:.65rem; font-weight:700; color:#222; cursor:pointer; }
.sim-movil .app-ico .ico{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 3px; background:#eee; }
.sim-movil .cortina{ position:absolute; left:0; right:0; top:0; background:#1f2937; color:#fff; border-radius:0 0 24px 24px; transform:translateY(-100%); transition:transform .25s ease; padding:14px; z-index:5; }
.sim-movil .cortina.abierta{ transform:translateY(0); }
.sim-movil .cortina .ajustes-rapidos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.sim-movil .cortina .ajuste{ background:#374151; border-radius:14px; padding:10px 4px; text-align:center; font-size:.7rem; font-weight:700; cursor:pointer; }
.sim-movil .cortina .ajuste .ico{ font-size:1.5rem; }
.sim-movil .cortina .ajuste.on{ background:var(--naranja); }
.sim-movil .asa{ position:absolute; top:0; left:0; right:0; height:46px; cursor:grab; z-index:6; }
.sim-movil .chat{ display:flex; flex-direction:column; height:100%; }
.sim-movil .chat .cab{ background:#075e54; color:#fff; padding:10px 14px; font-weight:700; font-size:.85rem; }
.sim-movil .chat .mensajes{ flex:1; background:#e5ddd5; padding:10px; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.sim-movil .chat .msg{ max-width:85%; padding:8px 10px; border-radius:10px; font-size:.78rem; background:#fff; align-self:flex-start; }
.sim-movil .chat .msg.mio{ background:#dcf8c6; align-self:flex-end; }
.sim-movil .chat .escribir{ display:flex; gap:6px; padding:8px; background:#f0f0f0; align-items:center; }
.sim-movil .chat input{ flex:1; min-width:0; border:1px solid #ccc; border-radius:999px; padding:8px 12px; font-size:.85rem; font-family:inherit; }
.sim-movil .chat button{ width:42px; height:42px; border-radius:50%; border:none; background:#25d366; color:#fff; font-size:1.1rem; cursor:pointer; }
.sim-movil .chat button.clip{ background:#999; }
.sim-movil .chat button.mic.grabando{ background:var(--rojo); transform:scale(1.15); }

/* Cuestionario */
.pregunta{ background:#fff; border:1px solid var(--borde); border-radius:16px; padding:18px 20px; margin-bottom:14px; }
.pregunta .enunciado{ font-weight:800; font-size:1.1rem; margin-bottom:12px; display:flex; gap:10px; }
.pregunta .enunciado .n{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:var(--naranja); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.opciones{ display:grid; gap:10px; }
.opcion{
  text-align:left; background:#fff; border:2px solid var(--borde); border-radius:12px; padding:12px 16px; font-size:1.02rem; cursor:pointer; font-family:inherit; color:var(--gris-texto); min-height:56px; font-weight:600; line-height:1.4;
}
.opcion:hover{ border-color:var(--naranja); background:var(--naranja-claro); }
.opcion.correcta{ border-color:var(--verde); background:var(--verde-claro); }
.opcion.incorrecta{ border-color:var(--rojo); background:#fff0f0; }
.pregunta .explicacion{ margin-top:10px; padding:10px 14px; border-radius:10px; background:var(--gris-claro); display:none; font-weight:600; }
.pregunta.respondida .explicacion{ display:block; }
.resultado-prueba{ margin-top:16px; padding:18px; border-radius:16px; background:var(--naranja-claro); border:2px solid #ffd6bd; font-weight:800; display:none; }
.resultado-prueba.visible{ display:block; }
.resultado-prueba.aprobado{ background:var(--verde-claro); border-color:#bfe7cc; color:var(--verde); }

/* Sello / recompensa */
.sello-bloque{ text-align:center; }
.sello{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:190px; height:190px; border-radius:50%;
  border:6px double var(--gris); color:var(--gris); background:#fafafa; transform:rotate(-8deg); font-weight:900; text-transform:uppercase; letter-spacing:1px; font-size:.85rem; padding:14px; line-height:1.2;
  transition:all .5s ease; filter:grayscale(1); opacity:.55;
}
.sello .ico{ font-size:2.6rem; margin-bottom:4px; }
.sello.ganado{ border-color:var(--rojo); color:var(--rojo); background:#fff5f5; filter:none; opacity:1; transform:rotate(-8deg) scale(1.05); box-shadow:0 0 0 6px #fff, 0 10px 30px rgba(220,38,38,.25); }
.sello-texto{ margin-top:14px; font-weight:700; }
.pesetas{ display:inline-block; background:var(--amarillo-claro); border:2px solid #f3e29a; border-radius:999px; padding:.3em 1em; font-weight:900; color:#854d0e; }

/* Pasaporte (página) */
.pasaporte-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
.pasaporte-grid .sello{ transform:rotate(-6deg); width:170px; height:170px; }
.pasaporte-grid .sello.ganado{ transform:rotate(-6deg); }
.diploma{ border:10px double var(--naranja); padding:40px; text-align:center; background:#fffdf8; max-width:820px; margin:0 auto; }
.diploma h2{ font-size:2rem; color:var(--rojo); }
.diploma .nombre{ font-size:1.8rem; font-weight:900; border-bottom:2px solid var(--negro); display:inline-block; min-width:320px; padding:0 20px 4px; margin:12px 0; }
.diploma input{ font-size:1.6rem; text-align:center; border:none; border-bottom:2px solid var(--negro); font-family:inherit; min-width:320px; padding:6px; background:transparent; }

/* Formador (detalles plegables) */
details.formador{ background:#f6f3ff; border:1px solid #d9d1ff; border-radius:16px; padding:0; margin-top:24px; }
details.formador summary{ cursor:pointer; font-weight:800; padding:16px 20px; color:#4c1d95; font-size:1.05rem; list-style:none; }
details.formador summary::before{ content:"👩‍🏫 "; }
details.formador summary::-webkit-details-marker{ display:none; }
details.formador .cuerpo{ padding:0 20px 20px; }
details.formador ul{ margin:0; }

/* Navegación entre temas */
.nav-temas{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:30px; }
.nav-temas .btn{ flex:1 1 260px; }

/* Glosario */
.glosario dt{ font-weight:900; font-size:1.15rem; color:var(--naranja-osc); margin-top:18px; }
.glosario dd{ margin:4px 0 0; padding-left:0; }
.glosario .como-dicen{ color:var(--gris); font-style:italic; font-size:.95rem; }

/* Tabla sencilla */
table.tabla{ width:100%; border-collapse:collapse; font-size:.98rem; margin:14px 0; background:#fff; }
table.tabla th, table.tabla td{ border:1px solid var(--borde); padding:10px 12px; text-align:left; vertical-align:top; }
table.tabla th{ background:var(--naranja-claro); color:var(--negro); }
.tabla-scroll{ overflow:auto; }

/* Informe */
.informe h2{ border-bottom:3px solid var(--naranja); padding-bottom:6px; margin-top:1.8em; }
.informe h3{ margin-top:1.4em; color:var(--naranja-osc); }
.informe blockquote{ border-left:6px solid var(--naranja); background:var(--naranja-claro); margin:1em 0; padding:12px 18px; border-radius:0 12px 12px 0; }
.informe .indice{ background:var(--gris-claro); border-radius:16px; padding:18px 24px; }
.informe .indice ol{ margin:0; column-count:2; column-gap:30px; }
@media (max-width:700px){ .informe .indice ol{ column-count:1; } }

/* Pie */
.pie{ background:var(--negro); color:#cfcfd6; padding:48px 0 30px; margin-top:40px; }
.pie a{ color:#fff; }
.pie .cols{ display:grid; gap:30px; grid-template-columns:2fr 1fr 1fr; }
.pie img{ height:110px; width:auto; margin-bottom:12px; }
.pie h4{ color:#fff; margin-bottom:10px; }
.pie ul{ list-style:none; padding:0; margin:0; }
.pie li{ margin-bottom:8px; }
.pie .legal{ border-top:1px solid #333; margin-top:30px; padding-top:18px; display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; font-size:.85rem; }
@media (max-width:800px){ .pie .cols{ grid-template-columns:1fr; } }

/* Aviso de estado (toast) */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(30px); background:var(--negro); color:#fff; padding:14px 22px; border-radius:16px; font-weight:800;
  opacity:0; transition:all .3s ease; z-index:200; box-shadow:var(--sombra-fuerte); max-width:90vw; text-align:center;
}
.toast.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
#confeti{ position:fixed; inset:0; pointer-events:none; z-index:150; }

/* Utilidades */
.centrado{ text-align:center; }
.fila-botones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.peq{ font-size:.9rem; color:var(--gris); }
.destacado{ font-size:1.25rem; font-weight:800; color:var(--negro); }
.caja-dibujo{ background:#fff; border:1px solid var(--borde); border-radius:14px; padding:14px; display:inline-block; }
.emoji-grande{ font-size:3.5rem; line-height:1; }
.lista-iconos{ list-style:none; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.lista-iconos li{ background:#fff; border:1px solid var(--borde); border-radius:12px; padding:12px 14px; display:flex; gap:12px; align-items:center; }
.lista-iconos .ico{ font-size:2rem; }

/* Impresión: ficha para llevar a casa */
@media print{
  .cabecera, .pie, .juego, .nav-temas, .btn, .herramientas, details.formador, .hero .mascota, .prueba-bloque, .sello-bloque, .no-imprimir{ display:none !important; }
  .hero{ background:none; color:#000; padding:10px 0; }
  .hero h1, .hero p{ color:#000; }
  .bloque{ box-shadow:none; border:1px solid #999; page-break-inside:avoid; }
  body{ font-size:14pt; }
  a{ color:#000; text-decoration:none; }
}