/* ==========================================================================
   Eureka · sistema de diseño
   Aprender es descubrir. Noche + Bombilla, con 6 respuestas de color y forma.
   ========================================================================== */
@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url(../fonts/baloo-2-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url(../fonts/baloo-2-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url(../fonts/nunito-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url(../fonts/nunito-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(../fonts/nunito-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url(../fonts/nunito-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url(../fonts/nunito-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(../fonts/nunito-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url(../fonts/nunito-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noche: #13203B; --noche-2: #1B2B4D; --noche-3: #26396A;
  --bombilla: #FFB020; --bombilla-claro: #FFD27A; --bombilla-osc: #E08E00;
  --turquesa: #22B8A7; --turquesa-osc: #148C7F; --coral: #FF6B6B; --coral-osc: #E04848;
  --azul: #3B82F6; --rosa: #EC4899; --lima: #84CC16;
  --crema: #FFF8EA; --crema-2: #F6EDDA; --papel: #FFFFFF;
  --tinta: #13203B; --tinta-2: #4A5672; --tinta-3: #5E6982;
  --linea: #E6DCC6; --linea-2: #D7CBAF;
  --ok: #129C8C; --ko: #E04848; --aviso: #E08E00;
  --sombra-1: 0 1px 2px rgba(19,32,59,.08), 0 2px 8px rgba(19,32,59,.06);
  --sombra-2: 0 6px 24px rgba(19,32,59,.14), 0 2px 6px rgba(19,32,59,.08);
  --sombra-3: 0 18px 48px rgba(19,32,59,.25);
  --radio: 14px; --radio-g: 22px; --radio-p: 10px;
  --fuente-titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r1: #FFB020; --r1t: #13203B; --r2: #22B8A7; --r2t: #13203B; --r3: #FF6B6B; --r3t: #13203B;
  --r4: #2F6FE4; --r4t: #FFFFFF; --r5: #DB2777; --r5t: #FFFFFF; --r6: #84CC16; --r6t: #13203B;
  --rsi: #22B8A7; --rno: #FF6B6B;
  --anim: cubic-bezier(.2, .9, .3, 1.2);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); color: var(--tinta); background: var(--crema); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0 0 1em; }
a { color: var(--azul); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 2px; border-radius: 6px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: min(1180px, 100% - 32px); margin-inline: auto; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.columna { display: flex; flex-direction: column; gap: 12px; }
.espacio { flex: 1; }
.centro { text-align: center; }
.suave { color: var(--tinta-2); }
.peque { font-size: .875rem; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Botones ---------- */
.boton { --b: var(--papel); --bt: var(--tinta); --bb: var(--linea-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7em 1.2em; min-height: 44px;
  border-radius: 999px; border: 2px solid var(--bb); background: var(--b); color: var(--bt); font-weight: 800; cursor: pointer;
  text-decoration: none; transition: transform .15s var(--anim), box-shadow .15s, background .15s; white-space: nowrap; box-shadow: 0 3px 0 var(--bb); }
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bb); }
.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.boton.primario { --b: var(--bombilla); --bt: var(--noche); --bb: var(--bombilla-osc); }
.boton.oscuro { --b: var(--noche); --bt: #fff; --bb: #0A1225; }
.boton.verde { --b: var(--turquesa); --bt: #fff; --bb: var(--turquesa-osc); }
.boton.peligro { --b: #fff; --bt: var(--ko); --bb: #F2C1C1; }
.boton.fantasma { --b: transparent; --bb: transparent; box-shadow: none; }
.boton.fantasma:hover { background: rgba(19,32,59,.06); }
.boton.grande { font-size: 1.25rem; padding: .8em 1.8em; min-height: 58px; }
.boton.enorme { font-size: 1.6rem; padding: .7em 2.2em; min-height: 72px; }
.boton.peque { padding: .4em .9em; min-height: 34px; font-size: .9rem; }
.boton.icono { padding: 0; width: 44px; border-radius: 50%; }
.boton svg { width: 1.2em; height: 1.2em; flex: none; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span, .etiqueta { font-weight: 800; font-size: .9rem; }
.entrada, select.entrada, textarea.entrada { width: 100%; padding: .75em 1em; border-radius: var(--radio-p); border: 2px solid var(--linea-2); background: #fff; min-height: 46px; transition: border-color .15s, box-shadow .15s; }
.entrada:focus { border-color: var(--bombilla); outline: none; box-shadow: 0 0 0 4px rgba(255,176,32,.25); }
textarea.entrada { resize: vertical; min-height: 90px; }
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; user-select: none; }
.interruptor input { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--linea-2); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform .2s var(--anim); }
.interruptor input:checked { background: var(--turquesa); }
.interruptor input:checked::after { transform: translateX(20px); }
.interruptor small { display: block; color: var(--tinta-2); font-weight: 400; }
.interruptor b { display: block; }
.error-campo { color: var(--ko); font-weight: 700; font-size: .9rem; min-height: 1.2em; }

/* ---------- Tarjetas y piezas ---------- */
.tarjeta { background: var(--papel); border-radius: var(--radio-g); box-shadow: var(--sombra-1); border: 1px solid rgba(19,32,59,.06); padding: 24px; }
.tarjeta.plana { box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: .3em .8em; border-radius: 999px; background: var(--crema-2); color: var(--tinta); font-weight: 800; font-size: .85rem; }
.chip svg { width: 1.1em; height: 1.1em; flex: none; }
.escena .chip.oscuro { background: rgba(255,255,255,.16); color: #fff; }
.escena .chip:not(.oscuro):not(.ambar):not(.verde):not(.rojo) { background: rgba(255,255,255,.92); color: var(--tinta); }
.chip.oscuro { background: rgba(19,32,59,.85); color: #fff; }
.chip.ambar { background: var(--bombilla); color: var(--noche); }
.chip.verde { background: #D6F3EE; color: var(--turquesa-osc); }
.chip.rojo { background: #FDE2E2; color: var(--coral-osc); }
.insignia { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--noche); color: #fff; font-weight: 800; font-size: .8rem; }
.vacio { text-align: center; padding: 48px 16px; color: var(--tinta-2); }
.vacio svg { width: 96px; height: 96px; margin-bottom: 12px; }
.vacio .boton svg { width: 1.2em; height: 1.2em; margin: 0; }
.separador { height: 1px; background: var(--linea); margin: 16px 0; border: 0; }

/* ---------- Cabecera de las páginas de gestión ---------- */
/* Hueco de la cabecera antes de que se pinte: así no empuja la página al aparecer. */
#cabecera:empty { display: block; min-height: 69px; }
@media (max-width: 1080px) { #cabecera:empty { min-height: 61px; } }
.cabecera { position: sticky; top: 0; z-index: 30; background: rgba(255,248,234,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; }
.marca svg { width: 40px; height: 40px; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a { text-decoration: none; color: var(--tinta); font-weight: 800; padding: .5em .9em; border-radius: 999px; }
.nav a:hover, .nav a.activo { background: rgba(19,32,59,.07); }
.menu-cuenta { position: relative; }
.menu-cuenta .desplegable { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-2); min-width: 220px; padding: 8px; display: none; z-index: 40; }
.menu-cuenta.abierto .desplegable { display: block; }
.desplegable a, .desplegable button { display: flex; width: 100%; text-align: left; gap: 10px; padding: 10px 12px; border-radius: 10px; background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--tinta); font-weight: 700; }
.desplegable a:hover, .desplegable button:hover { background: var(--crema); }
.avatar-inicial { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--noche); color: var(--bombilla); font-weight: 800; border: 0; cursor: pointer; }
@media (max-width: 760px) { .nav .solo-ancho { display: none; } }

/* ---------- Avisos y ventanas ---------- */
#tostadas { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100% - 32px)); }
.tostada { background: var(--noche); color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: var(--sombra-2); font-weight: 700; animation: entrar-abajo .35s var(--anim); pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.tostada.ok { background: var(--turquesa-osc); }
.tostada.ko { background: var(--coral-osc); }
.fondo-modal { position: fixed; inset: 0; z-index: 900; background: rgba(10,18,37,.55); backdrop-filter: blur(3px); z-index: 900; display: grid; place-items: center; padding: 16px; animation: aparecer .2s; overflow-y: auto; }
.modal { background: #fff; border-radius: var(--radio-g); box-shadow: var(--sombra-3); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; animation: entrar-zoom .3s var(--anim); color: var(--tinta); }
.modal.ancho { width: min(980px, 100%); }
.modal-cabeza { display: flex; align-items: center; gap: 12px; padding: 20px 24px 8px; }
.modal-cabeza h3 { margin: 0; flex: 1; }
.modal-cuerpo { padding: 8px 24px 16px; }
.modal-pie { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 24px 22px; flex-wrap: wrap; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar-zoom { from { opacity: 0; transform: scale(.92) translateY(10px); } }
@keyframes entrar-abajo { from { opacity: 0; transform: translateY(16px); } }
@keyframes latido { 50% { transform: scale(1.06); } }
@keyframes flotar { 50% { transform: translateY(-8px); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brillo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.cargando { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(255,176,32,.25); border-top-color: var(--bombilla); animation: girar .9s linear infinite; margin: 24px auto; }

/* ---------- Formas y respuestas ---------- */
.forma { width: 1.6em; height: 1.6em; flex: none; display: inline-block; }
.forma svg { width: 100%; height: 100%; display: block; }
.r1 { --c: var(--r1); --ct: var(--r1t); } .r2 { --c: var(--r2); --ct: var(--r2t); } .r3 { --c: var(--r3); --ct: var(--r3t); }
.r4 { --c: var(--r4); --ct: var(--r4t); } .r5 { --c: var(--r5); --ct: var(--r5t); } .r6 { --c: var(--r6); --ct: var(--r6t); }
.rsi { --c: var(--rsi); --ct: #13203B; } .rno { --c: var(--rno); --ct: #13203B; }
.respuesta { background: var(--c); color: var(--ct); border-radius: var(--radio); display: flex; align-items: center; gap: 14px; padding: 14px 18px; font-weight: 800; position: relative; box-shadow: inset 0 -5px 0 rgba(0,0,0,.14); min-height: 64px; overflow: hidden; }
.respuesta .forma { width: 2.1em; height: 2.1em; }
.respuesta .forma svg path, .respuesta .forma svg circle { fill: currentColor; }
.respuesta .txt { flex: 1; overflow-wrap: anywhere; }
.respuesta img.img-resp { max-height: 120px; border-radius: 10px; background: #fff; }

/* ---------- Bombillas (avatares) ---------- */
.bombilla-avatar { width: 44px; height: 44px; flex: none; }
.bombilla-avatar.grande { width: 140px; height: 140px; }

/* ---------- Temas de pantalla ---------- */
.escena { --fondo-texto: #fff; min-height: 100vh; color: var(--fondo-texto); position: relative; overflow: hidden; background-color: var(--noche); }
.escena::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--deco, none); background-size: var(--deco-tam, auto); opacity: var(--deco-op, 1); }
.escena > #app, .escena > main, .portada.escena > .deco { position: relative; z-index: 1; }
.tarjeta-cuestionario .portada .chip { z-index: 2; }
.tema-noche { background: radial-gradient(1200px 600px at 10% -10%, rgba(255,176,32,.18), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(34,184,167,.18), transparent 60%), var(--noche);
  --deco: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.5px); --deco-tam: 28px 28px; }
.tema-aula { background: radial-gradient(1000px 500px at 50% 0%, rgba(255,255,255,.08), transparent 60%), #1F4A3E;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' opacity='.085'%3E %3Cpath d='M22 78h44L22 34zM22 70h8v8'/%3E %3Cg transform='translate(198 54)'%3E%3Cellipse rx='20' ry='7'/%3E%3Cellipse rx='20' ry='7' transform='rotate(60)'/%3E%3Cellipse rx='20' ry='7' transform='rotate(-60)'/%3E%3C/g%3E%3Ccircle cx='198' cy='54' r='2.6' fill='%23fff' stroke='none'/%3E %3Cpath d='M112 150a14 14 0 1 1 21 12.2V170h-14v-7.8A14 14 0 0 1 112 150zM120 170v5a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 2.5-2.5v-5M120 150l4 4 7-8'/%3E %3Cpath d='M190 160h30M197 160v22M213 160v18q0 4 4 4'/%3E %3Cpath d='M48 214l4.6 9.4 10.4 1.5-7.5 7.3 1.8 10.3-9.3-4.9-9.3 4.9 1.8-10.3-7.5-7.3 10.4-1.5z'/%3E %3Cpath d='M120 40q10-12 20 0t20 0'/%3E %3Cpath d='M150 228l8-8m0 8l-8-8M176 228h12M182 222v12'/%3E %3Cpath d='M22 140q8-22 32-18M46 114l8 8-9 5'/%3E %3C/g%3E%3C/svg%3E"); }
.tema-espacio { background: radial-gradient(800px 500px at 85% 15%, rgba(59,130,246,.35), transparent 60%), radial-gradient(600px 400px at 10% 90%, rgba(236,72,153,.25), transparent 60%), #0A0F24;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.5' opacity='.8'/%3E%3Ccircle cx='120' cy='84' r='1' opacity='.6'/%3E%3Ccircle cx='250' cy='40' r='1.8' opacity='.9'/%3E%3Ccircle cx='200' cy='162' r='1.2' opacity='.5'/%3E%3Ccircle cx='60' cy='220' r='1.6' opacity='.7'/%3E%3Ccircle cx='282' cy='262' r='1' opacity='.6'/%3E%3Ccircle cx='150' cy='272' r='1.4' opacity='.8'/%3E%3Ccircle cx='96' cy='150' r='.9' opacity='.6'/%3E%3Ccircle cx='232' cy='110' r='.8' opacity='.5'/%3E%3Ccircle cx='34' cy='98' r='.8' opacity='.5'/%3E%3C/g%3E %3Cg fill='%23fff' opacity='.75'%3E%3Cg transform='translate(176 44)'%3E%3Cpath d='M0 -5Q0.8 -0.8 5 0 0.8 0.8 0 5 -0.8 0.8 -5 0 -0.8 -0.8 0 -5Z'/%3E%3C/g%3E%3Cg transform='translate(36 262)'%3E%3Cpath d='M0 -4Q0.64 -0.64 4 0 0.64 0.64 0 4 -0.64 0.64 -4 0 -0.64 -0.64 0 -4Z'/%3E%3C/g%3E%3C/g%3E %3Cg opacity='.2' transform='translate(80 64) rotate(-16)'%3E%3Cpath d='M-25 0a25 7 0 0 1 50 0' fill='none' stroke='%23FFD27A' stroke-width='3'/%3E%3Ccircle r='13' fill='%23C4B5FD'/%3E%3Cpath d='M-8-9.5q8 2.5 16 0M-12-3q12 3 24 0' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M25 0a25 7 0 0 1-50 0' fill='none' stroke='%23FFD27A' stroke-width='3'/%3E%3C/g%3E %3Cg opacity='.3' transform='translate(236 214) rotate(32)'%3E%3Cpath d='M-34 0H-4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M0 -4.5Q0.72 -0.72 4.5 0 0.72 0.72 0 4.5 -0.72 0.72 -4.5 0 -0.72 -0.72 0 -4.5Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); animation: estrellas 120s linear infinite; }
@keyframes estrellas { to { background-position: 0 0; } }
.tema-selva { background: radial-gradient(900px 500px at 20% 0%, rgba(132,204,22,.25), transparent 60%), #0E3B2C;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%2384CC16' opacity='.1'%3E%3Cg transform='translate(54 70) rotate(-34)'%3E%3Cpath fill-rule='evenodd' d='M0-32C14-24 17-6 12 8 8 19 3 25 0 30-3 25-8 19-12 8-17-6-14-24 0-32ZM0-30Q1.1-4 0 26-1.1-4 0-30ZM1.3 -18Q6 -20.2 11 -25Q6 -19 1.3 -16.8ZM1.3 -8Q6 -10.2 11 -15Q6 -9 1.3 -6.8ZM1.3 2Q6 -0.2 11 -5Q6 1 1.3 3.2ZM1.3 12Q6 9.8 11 5Q6 11 1.3 13.2ZM-1.3 -13Q-6 -15.2 -11 -20Q-6 -14 -1.3 -11.8ZM-1.3 -3Q-6 -5.2 -11 -10Q-6 -4 -1.3 -1.8ZM-1.3 7Q-6 4.8 -11 0Q-6 6 -1.3 8.2ZM-1.3 16Q-6 13.8 -11 9Q-6 15 -1.3 17.2Z'/%3E%3C/g%3E%3Cg transform='translate(196 196) rotate(28) scale(0.9)'%3E%3Cpath fill-rule='evenodd' d='M0-32C14-24 17-6 12 8 8 19 3 25 0 30-3 25-8 19-12 8-17-6-14-24 0-32ZM0-30Q1.1-4 0 26-1.1-4 0-30ZM1.3 -18Q6 -20.2 11 -25Q6 -19 1.3 -16.8ZM1.3 -8Q6 -10.2 11 -15Q6 -9 1.3 -6.8ZM1.3 2Q6 -0.2 11 -5Q6 1 1.3 3.2ZM1.3 12Q6 9.8 11 5Q6 11 1.3 13.2ZM-1.3 -13Q-6 -15.2 -11 -20Q-6 -14 -1.3 -11.8ZM-1.3 -3Q-6 -5.2 -11 -10Q-6 -4 -1.3 -1.8ZM-1.3 7Q-6 4.8 -11 0Q-6 6 -1.3 8.2ZM-1.3 16Q-6 13.8 -11 9Q-6 15 -1.3 17.2Z'/%3E%3C/g%3E%3C/g%3E %3Cg fill='%2322B8A7' stroke='%2322B8A7' opacity='.1'%3E%3Cg transform='translate(196 60) rotate(12)'%3E%3Cpath fill-rule='evenodd' stroke-linejoin='round' stroke-width='2' d='M0 -26L7 -24.5L13 -21L16.5 -17.5L5.5 -12.5L19.5 -13L22.5 -7L23.5 -3.5L6.5 -1.5L24 1.5L23.5 6.5L22 10L6.5 8L19.5 14.5L16 19L10 22.5L4.5 23.5L0 17L-4.5 23.5L-10 22.5L-16 19L-19.5 14.5L-6.5 8L-22 10L-23.5 6.5L-24 1.5L-6.5 -1.5L-23.5 -3.5L-22.5 -7L-19.5 -13L-5.5 -12.5L-16.5 -17.5L-13 -21L-7 -24.5ZM3.6 -9.2a1.3 2.4 0 1 0 .01 0zM3.8 0.8a1.3 2.4 0 1 0 .01 0zM-3.6 -10a1.3 2.4 0 1 0 .01 0zM-3.8 0.2a1.3 2.4 0 1 0 .01 0zM0-22Q.8-3 0 15-.8-3 0-22Z'/%3E%3C/g%3E%3Cg transform='translate(62 200) rotate(-20) scale(0.8)'%3E%3Cpath fill-rule='evenodd' stroke-linejoin='round' stroke-width='2' d='M0 -26L7 -24.5L13 -21L16.5 -17.5L5.5 -12.5L19.5 -13L22.5 -7L23.5 -3.5L6.5 -1.5L24 1.5L23.5 6.5L22 10L6.5 8L19.5 14.5L16 19L10 22.5L4.5 23.5L0 17L-4.5 23.5L-10 22.5L-16 19L-19.5 14.5L-6.5 8L-22 10L-23.5 6.5L-24 1.5L-6.5 -1.5L-23.5 -3.5L-22.5 -7L-19.5 -13L-5.5 -12.5L-16.5 -17.5L-13 -21L-7 -24.5ZM3.6 -9.2a1.3 2.4 0 1 0 .01 0zM3.8 0.8a1.3 2.4 0 1 0 .01 0zM-3.6 -10a1.3 2.4 0 1 0 .01 0zM-3.8 0.2a1.3 2.4 0 1 0 .01 0zM0-22Q.8-3 0 15-.8-3 0-22Z'/%3E%3C/g%3E%3C/g%3E %3Cg fill='%2384CC16' stroke='%2384CC16' opacity='.12'%3E%3Cg transform='translate(128 130) rotate(40) scale(1.1)'%3E%3Cpath fill-rule='evenodd' d='M0-12Q9.5-3 0 10-9.5-3 0-12ZM0-8.6Q.8-1 0 6.6-.8-1 0-8.6Z'/%3E%3Cpath d='M0 10v5' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.tema-playa { --fondo-texto: var(--tinta); background: linear-gradient(180deg, #8ED8F8 0%, #C9EEFB 48%, #F8E3B9 72%, #F1D199 100%);
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200'%3E%3Cg fill='%23FFD678' opacity='.92'%3E%3Ccircle cx='150' cy='70' r='44'/%3E%3C/g%3E%3Cg stroke='%23FFD678' stroke-width='5' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M206 70L218 70'/%3E%3Cpath d='M198.5 98L208.89 104'/%3E%3Cpath d='M178 118.5L184 128.89'/%3E%3Cpath d='M150 126L150 138'/%3E%3Cpath d='M122 118.5L116 128.89'/%3E%3Cpath d='M101.5 98L91.11 104'/%3E%3Cpath d='M94 70L82 70'/%3E%3Cpath d='M101.5 42L91.11 36'/%3E%3Cpath d='M122 21.5L116 11.11'/%3E%3Cpath d='M150 14L150 2'/%3E%3Cpath d='M178 21.5L184 11.11'/%3E%3Cpath d='M198.5 42L208.89 36'/%3E%3C/g%3E%3Cg stroke='%2313203B' opacity='.28'%3E%3Cg transform='translate(46 92)'%3E%3Cpath d='M-9 0Q-4.5-6 0 0Q4.5-6 9 0' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(72 120) scale(0.7)'%3E%3Cpath d='M-9 0Q-4.5-6 0 0Q4.5-6 9 0' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right -24px top -10px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='70'%3E%3Cg opacity='.3'%3E%3Cg fill='%23FF8A65' stroke='%23FF8A65' transform='translate(60 36) rotate(18)'%3E%3Cpath d='M0 -10L2.7 -3.72L9.51 -3.09L4.37 1.42L5.88 8.09L0 4.6L-5.88 8.09L-4.37 1.42L-9.51 -3.09L-2.7 -3.72Z' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/g%3E%3Cg fill='%23FFF8EA' stroke='%23E0A060' transform='translate(210 40) rotate(-14) scale(0.95)'%3E%3Cpath d='M0 9-9.5-3.2Q-9.4-11 0-12 9.4-11 9.5-3.2Z' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M0 9V-11.6M0 9-4.8-11M0 9 4.8-11M0 9-8.4-7M0 9 8.4-7' fill='none' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M-3.4 9.4h6.8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23E0A060'%3E%3Ccircle cx='130' cy='50' r='2'/%3E%3Ccircle cx='145' cy='44' r='1.4'/%3E%3Ccircle cx='270' cy='30' r='1.6'/%3E%3Ccircle cx='26' cy='58' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left bottom 6px repeat-x; }
.tema-papel { --fondo-texto: var(--tinta); background-color: #FFFDF6;
  --deco: linear-gradient(90deg, transparent 47px, rgba(255,107,107,.3) 47px 49px, transparent 49px), linear-gradient(rgba(59,130,246,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,.12) 1px, transparent 1px); --deco-tam: 100% 100%, 28px 28px, 28px 28px; }
.tema-neon { background: radial-gradient(800px 500px at 50% 120%, rgba(236,72,153,.35), transparent 60%), #0D0A24;
  --deco: linear-gradient(rgba(34,184,167,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(236,72,153,.15) 1px, transparent 1px); --deco-tam: 48px 48px; }
.tema-otono { background: radial-gradient(900px 500px at 80% 0%, rgba(255,176,32,.25), transparent 60%), #3A1E12;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23FFB020' stroke='%23FFB020' opacity='.13'%3E%3Cg transform='translate(52 62) rotate(-18) scale(1.25)'%3E%3Cpath d='M0 -15L2.7 -9.4L5.6 -10.8L4.6 -4.8L9.2 -8.8L10.2 -6.4L13.8 -6.9L12.3 -2.8L14.6 -1.7L8.7 3.2L9.6 6L1.3 4.9L-1.3 4.9L-9.6 6L-8.7 3.2L-14.6 -1.7L-12.3 -2.8L-13.8 -6.9L-10.2 -6.4L-9.2 -8.8L-4.6 -4.8L-5.6 -10.8L-2.7 -9.4Z' stroke-linejoin='round'/%3E%3Cpath d='M0 4L0 14' fill='none' stroke-width='1.9' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(186 176) rotate(24) scale(0.9)'%3E%3Cpath d='M0 -15L2.7 -9.4L5.6 -10.8L4.6 -4.8L9.2 -8.8L10.2 -6.4L13.8 -6.9L12.3 -2.8L14.6 -1.7L8.7 3.2L9.6 6L1.3 4.9L-1.3 4.9L-9.6 6L-8.7 3.2L-14.6 -1.7L-12.3 -2.8L-13.8 -6.9L-10.2 -6.4L-9.2 -8.8L-4.6 -4.8L-5.6 -10.8L-2.7 -9.4Z' stroke-linejoin='round'/%3E%3Cpath d='M0 4L0 14' fill='none' stroke-width='1.9' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E %3Cg fill='%23F97316' stroke='%23F97316' opacity='.13'%3E%3Cg transform='translate(176 50) rotate(36) scale(1.15)'%3E%3Cpath d='M0 9Q-3 9-3.4 6.6-8 7.4-7.4 3.4-3.7 2.2-3.8.4-8.8-.2-7.8-3.8-4-4.4-3.8-6.2-7.2-8.8-5-11.4-2.2-10.6-1.6-12.8 0-15.6 1.6-12.8 2.2-10.6 5-11.4 7.2-8.8 3.8-6.2 4-4.4 7.8-3.8 8.8-.2 3.8.4 3.7 2.2 7.4 3.4 8 7.4 3.4 6.6 3 9Z'/%3E%3Cpath d='M0 9v6' fill='none' stroke-width='1.8' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(60 184) rotate(-40) scale(0.95)'%3E%3Cpath d='M0 9Q-3 9-3.4 6.6-8 7.4-7.4 3.4-3.7 2.2-3.8.4-8.8-.2-7.8-3.8-4-4.4-3.8-6.2-7.2-8.8-5-11.4-2.2-10.6-1.6-12.8 0-15.6 1.6-12.8 2.2-10.6 5-11.4 7.2-8.8 3.8-6.2 4-4.4 7.8-3.8 8.8-.2 3.8.4 3.7 2.2 7.4 3.4 8 7.4 3.4 6.6 3 9Z'/%3E%3Cpath d='M0 9v6' fill='none' stroke-width='1.8' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E %3Cg fill='%23FF6B6B' stroke='%23FF6B6B' opacity='.12'%3E%3Cg transform='translate(120 118) rotate(62) scale(1.2)'%3E%3Cpath fill-rule='evenodd' d='M0-12Q9.5-3 0 10-9.5-3 0-12ZM0-8.6Q.8-1 0 6.6-.8-1 0-8.6Z'/%3E%3Cpath d='M0 10v5' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(222 108) rotate(-30) scale(0.8)'%3E%3Cpath fill-rule='evenodd' d='M0-12Q9.5-3 0 10-9.5-3 0-12ZM0-8.6Q.8-1 0 6.6-.8-1 0-8.6Z'/%3E%3Cpath d='M0 10v5' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
/* Temas de temporada */
.tema-halloween { background: radial-gradient(900px 520px at 85% -10%, rgba(255,122,0,.32), transparent 60%), radial-gradient(700px 420px at 0% 110%, rgba(124,58,237,.35), transparent 60%), #17102A;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg opacity='.2' transform='translate(62 196)'%3E%3Cg fill='%23FF7A00'%3E%3Cellipse cx='-9.5' cy='2' rx='12' ry='13.5'/%3E%3Cellipse cx='9.5' cy='2' rx='12' ry='13.5'/%3E%3Cellipse cx='0' cy='1' rx='12.5' ry='15'/%3E%3C/g%3E%3Cpath d='M-4.6-12.4q-1.6 2.6-2.4 5.4M4.6-12.4q1.6 2.6 2.4 5.4' fill='none' stroke='%23B5470A' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M-8.5-2.5l3-4.5 3 4.5zM2.5-2.5l3-4.5 3 4.5zM-8 4.5q8 7 16 0-1.6 4.4-4.4 5.6l-1.2-2.2-1.2 2.6h-2.4l-1.2-2.6-1.2 2.2Q-6.4 8.9-8 4.5z' fill='%233A1606'/%3E%3Cpath d='M-2.6-12.6l.9-8.4q3.4-1.9 5.2.9l-.8 7.5z' fill='%234D7C0F'/%3E%3Cpath d='M3.2-19q6-4.6 9.4.6 1.7 3.6-2.2 4.8' fill='none' stroke='%234D7C0F' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M-1.5-16.5q-8.5-6-14-.6 6.8 3.4 14 .6z' fill='%2365A30D'/%3E%3C/g%3E%3Cg opacity='.17' transform='translate(214 92) scale(0.72)'%3E%3Cg fill='%23FF7A00'%3E%3Cellipse cx='-9.5' cy='2' rx='12' ry='13.5'/%3E%3Cellipse cx='9.5' cy='2' rx='12' ry='13.5'/%3E%3Cellipse cx='0' cy='1' rx='12.5' ry='15'/%3E%3C/g%3E%3Cpath d='M-4.6-12.4q-4.6 14.4 0 28.4M4.6-12.4q4.6 14.4 0 28.4' fill='none' stroke='%23B5470A' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M-2.6-12.6l.9-8.4q3.4-1.9 5.2.9l-.8 7.5z' fill='%234D7C0F'/%3E%3Cpath d='M3.2-19q6-4.6 9.4.6 1.7 3.6-2.2 4.8' fill='none' stroke='%234D7C0F' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M-1.5-16.5q-8.5-6-14-.6 6.8 3.4 14 .6z' fill='%2365A30D'/%3E%3C/g%3E %3Cg fill='%23C4B5FD' opacity='.2'%3E%3Cpath d='M0-3L1.6-7.2 3.2-3.4Q8-5 12-8.5 17-8 22.5-5.5 19.5-4.5 18.5-1 15.5-2.8 13 0 10-1.6 7.5 1.6 5.5 4 0 7.5-5.5 4-7.5 1.6-10-1.6-13 0-15.5-2.8-18.5-1-19.5-4.5-22.5-5.5-17-8-12-8.5-8-5-3.2-3.4L-1.6-7.2Z' transform='translate(160 46) rotate(-8) scale(1.15)'/%3E%3Cpath d='M0-3L1.6-7.2 3.2-3.4Q8-5 12-8.5 17-8 22.5-5.5 19.5-4.5 18.5-1 15.5-2.8 13 0 10-1.6 7.5 1.6 5.5 4 0 7.5-5.5 4-7.5 1.6-10-1.6-13 0-15.5-2.8-18.5-1-19.5-4.5-22.5-5.5-17-8-12-8.5-8-5-3.2-3.4L-1.6-7.2Z' transform='translate(48 74) rotate(10) scale(0.8)'/%3E%3Ccircle cx='210' cy='206' r='2.2'/%3E%3Ccircle cx='120' cy='140' r='1.6'/%3E%3Ccircle cx='236' cy='150' r='1.3'/%3E%3Ccircle cx='18' cy='130' r='1.5'/%3E%3C/g%3E %3Cg opacity='.12' transform='translate(132 214) rotate(-8) scale(0.9)'%3E%3Cpath d='M-8 9V-1a8 8 0 0 1 16 0V9L5.3 6.4 2.7 9 0 6.4-2.7 9-5.3 6.4-8 9z' fill='%23fff'/%3E%3Ccircle cx='-3' cy='-1' r='1.6' fill='%232A1A4A'/%3E%3Ccircle cx='3' cy='-1' r='1.6' fill='%232A1A4A'/%3E%3C/g%3E%3C/svg%3E"); }
.tema-navidad { background: radial-gradient(900px 520px at 50% -20%, rgba(255,255,255,.12), transparent 60%), radial-gradient(700px 420px at 100% 100%, rgba(220,38,38,.3), transparent 60%), #0F3326;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23fff' opacity='.55'%3E%3Ccircle cx='20' cy='30' r='2.2'/%3E%3Ccircle cx='90' cy='70' r='1.6'/%3E%3Ccircle cx='170' cy='20' r='2.6'/%3E%3Ccircle cx='230' cy='118' r='1.8'/%3E%3Ccircle cx='60' cy='160' r='2.4'/%3E%3Ccircle cx='140' cy='204' r='1.5'/%3E%3Ccircle cx='214' cy='236' r='2.1'/%3E%3Ccircle cx='110' cy='130' r='1.2'/%3E%3Ccircle cx='246' cy='60' r='1.3'/%3E%3C/g%3E %3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.4'%3E%3Cpath d='M0 0L0 -13M-3.13 -9.89L0 -6.76L3.13 -9.89M-1.84 -12.24L0 -10.4L1.84 -12.24M0 0L11.26 -6.5M7 -7.65L5.85 -3.38L10.12 -2.24M9.68 -7.71L9.01 -5.2L11.52 -4.53M0 0L11.26 6.5M10.12 2.24L5.85 3.38L7 7.65M11.52 4.53L9.01 5.2L9.68 7.71M0 0L0 13M3.13 9.89L0 6.76L-3.13 9.89M1.84 12.24L0 10.4L-1.84 12.24M0 0L-11.26 6.5M-7 7.65L-5.85 3.38L-10.12 2.24M-9.68 7.71L-9.01 5.2L-11.52 4.53M0 0L-11.26 -6.5M-10.12 -2.24L-5.85 -3.38L-7 -7.65M-11.52 -4.53L-9.01 -5.2L-9.68 -7.71' transform='translate(200 66) rotate(8)'/%3E%3Cpath d='M0 0L0 -10M-2.4 -7.6L0 -5.2L2.4 -7.6M-1.41 -9.41L0 -8L1.41 -9.41M0 0L8.66 -5M5.38 -5.88L4.5 -2.6L7.79 -1.72M7.45 -5.93L6.93 -4L8.86 -3.48M0 0L8.66 5M7.79 1.72L4.5 2.6L5.38 5.88M8.86 3.48L6.93 4L7.45 5.93M0 0L0 10M2.4 7.6L0 5.2L-2.4 7.6M1.41 9.41L0 8L-1.41 9.41M0 0L-8.66 5M-5.38 5.88L-4.5 2.6L-7.79 1.72M-7.45 5.93L-6.93 4L-8.86 3.48M0 0L-8.66 -5M-7.79 -1.72L-4.5 -2.6L-5.38 -5.88M-8.86 -3.48L-6.93 -4L-7.45 -5.93' transform='translate(42 222) rotate(-10)'/%3E%3Cpath d='M0 0L0 -7.5M-1.8 -5.7L0 -3.9L1.8 -5.7M-1.06 -7.06L0 -6L1.06 -7.06M0 0L6.5 -3.75M4.04 -4.41L3.38 -1.95L5.84 -1.29M5.58 -4.45L5.2 -3L6.65 -2.61M0 0L6.5 3.75M5.84 1.29L3.38 1.95L4.04 4.41M6.65 2.61L5.2 3L5.58 4.45M0 0L0 7.5M1.8 5.7L0 3.9L-1.8 5.7M1.06 7.06L0 6L-1.06 7.06M0 0L-6.5 3.75M-4.04 4.41L-3.38 1.95L-5.84 1.29M-5.58 4.45L-5.2 3L-6.65 2.61M0 0L-6.5 -3.75M-5.84 -1.29L-3.38 -1.95L-4.04 -4.41M-6.65 -2.61L-5.2 -3L-5.58 -4.45' transform='translate(118 100) rotate(20)'/%3E%3Cpath d='M0 0L0 -10.5M-2.52 -7.98L0 -5.46L2.52 -7.98M-1.48 -9.88L0 -8.4L1.48 -9.88M0 0L9.09 -5.25M5.65 -6.18L4.73 -2.73L8.18 -1.81M7.82 -6.23L7.27 -4.2L9.3 -3.66M0 0L9.09 5.25M8.18 1.81L4.73 2.73L5.65 6.18M9.3 3.66L7.27 4.2L7.82 6.23M0 0L0 10.5M2.52 7.98L0 5.46L-2.52 7.98M1.48 9.88L0 8.4L-1.48 9.88M0 0L-9.09 5.25M-5.65 6.18L-4.73 2.73L-8.18 1.81M-7.82 6.23L-7.27 4.2L-9.3 3.66M0 0L-9.09 -5.25M-8.18 -1.81L-4.73 -2.73L-5.65 -6.18M-9.3 -3.66L-7.27 -4.2L-7.82 -6.23' transform='translate(176 176)'/%3E%3C/g%3E%3C/svg%3E"); --deco-tam: 260px 260px; }
.tema-navidad::before { animation: nieve 26s linear infinite; }
@keyframes nieve { to { background-position: 0 260px; } }
.tema-primavera { --fondo-texto: var(--tinta); background: linear-gradient(160deg, #FDF2F8 0%, #ECFDF5 55%, #FEF9C3 100%);
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='.2' transform='translate(48 56)'%3E%3Cg fill='%23EC4899'%3E%3Ccircle cx='0' cy='-7.2' r='6.4'/%3E%3Ccircle cx='6.85' cy='-2.22' r='6.4'/%3E%3Ccircle cx='4.23' cy='5.82' r='6.4'/%3E%3Ccircle cx='-4.23' cy='5.82' r='6.4'/%3E%3Ccircle cx='-6.85' cy='-2.22' r='6.4'/%3E%3C/g%3E%3Ccircle r='4.61' fill='%23FFB020'/%3E%3C/g%3E%3Cg opacity='.18' transform='translate(180 158) rotate(18)'%3E%3Cg fill='%23F472B6'%3E%3Ccircle cx='0' cy='-5.9' r='5.2'/%3E%3Ccircle cx='5.61' cy='-1.82' r='5.2'/%3E%3Ccircle cx='3.47' cy='4.77' r='5.2'/%3E%3Ccircle cx='-3.47' cy='4.77' r='5.2'/%3E%3Ccircle cx='-5.61' cy='-1.82' r='5.2'/%3E%3C/g%3E%3Ccircle r='3.74' fill='%23FFB020'/%3E%3C/g%3E %3Cg fill='%23EC4899' opacity='.16'%3E%3Cg transform='translate(120 96) rotate(30)'%3E%3Cpath d='M0-6Q4.5-1 0 6-4.5-1 0-6Z'/%3E%3C/g%3E%3Cg transform='translate(210 52) rotate(-40) scale(0.8)'%3E%3Cpath d='M0-6Q4.5-1 0 6-4.5-1 0-6Z'/%3E%3C/g%3E%3Cg transform='translate(36 150) rotate(64) scale(0.9)'%3E%3Cpath d='M0-6Q4.5-1 0 6-4.5-1 0-6Z'/%3E%3C/g%3E%3C/g%3E %3Cg fill='%2322B8A7' stroke='%2322B8A7' opacity='.16'%3E%3Cg transform='translate(196 36) rotate(36) scale(0.85)'%3E%3Cpath fill-rule='evenodd' d='M0-12Q9.5-3 0 10-9.5-3 0-12ZM0-8.6Q.8-1 0 6.6-.8-1 0-8.6Z'/%3E%3Cpath d='M0 10v5' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(66 194) rotate(-28) scale(0.85)'%3E%3Cpath fill-rule='evenodd' d='M0-12Q9.5-3 0 10-9.5-3 0-12ZM0-8.6Q.8-1 0 6.6-.8-1 0-8.6Z'/%3E%3Cpath d='M0 10v5' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E %3Cg opacity='.3' transform='translate(112 192) rotate(-12) scale(1.25)'%3E%3Cg fill='%23FFB020'%3E%3Cpath d='M.6-1C2-9 8-13.4 12.2-11.2 15.4-9.2 13.2-3 8-1.2 5-.2 2.2-.2.6-1Z'/%3E%3Cpath d='M-.6-1C-2-9-8-13.4-12.2-11.2-15.4-9.2-13.2-3-8-1.2-5-.2-2.2-.2-.6-1Z'/%3E%3C/g%3E%3Cg fill='%23FF8A65'%3E%3Cpath d='M.6 0C4.2 0 8.4 2 8.4 6.2 8.4 9.4 4.4 10.4 2.4 7.4 1.2 5.4.6 3 .6 0Z'/%3E%3Cpath d='M-.6 0C-4.2 0-8.4 2-8.4 6.2-8.4 9.4-4.4 10.4-2.4 7.4-1.2 5.4-.6 3-.6 0Z'/%3E%3C/g%3E%3Cellipse cx='0' cy='.6' rx='1.4' ry='6.2' fill='%23B45309'/%3E%3Cpath d='M-.6-5Q-2-9.2-4.4-10.4M.6-5Q2-9.2 4.4-10.4' fill='none' stroke='%23B45309' stroke-width='1' stroke-linecap='round'/%3E%3C/g%3E %3Cg fill='%23FFB020' opacity='.22'%3E%3Ccircle cx='130' cy='30' r='2.4'/%3E%3Ccircle cx='22' cy='112' r='2'/%3E%3Ccircle cx='224' cy='222' r='2.6'/%3E%3C/g%3E%3C/svg%3E"); }
.tema-playa .chip.oscuro, .tema-papel .chip.oscuro, .tema-primavera .chip.oscuro { background: rgba(19,32,59,.12); color: var(--tinta); }
.escena.con-fondo { background-size: cover !important; background-position: center !important; }
.escena.con-fondo::after { content: ''; position: absolute; inset: 0; background: rgba(10,18,37,.45); z-index: 0; }

/* ---------- Alto contraste ---------- */
.contraste { --r1: #FFC233; --r2: #00A08A; --r3: #E8002D; --r4: #1A5FE0; --r5: #C2006A; --r6: #5B9E00; --r1t: #000; --r2t: #000; --r3t: #fff; --r4t: #fff; --r5t: #fff; --r6t: #000; }
.contraste .respuesta { border: 3px solid #000; }
.contraste .tarjeta-pregunta { border: 3px solid #000; }
.contraste .boton-respuesta .forma, .contraste .tecla-figura svg { filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 1.5px #000); }
.contraste .movil .caja-entrada, .contraste .movil .pie-jugador { border: 3px solid #000; }
.contraste .figuras-secuencia .figura, .contraste .tecla-figura, .contraste .huecos-secuencia .hueco { border: 3px solid #000; }
.movil .boton-contraste { color: inherit; border-color: currentColor; --bb: rgba(255,255,255,.35); }
.movil .boton-contraste[aria-pressed="true"] { background: #fff; color: #000; }
/* Idioma de las pantallas del alumno (español · English) */
.selector-idioma { display: inline-flex; gap: 2px; padding: 3px; border: 2px solid currentColor; border-radius: 999px; color: inherit; opacity: .92; align-self: center; flex: none; }
.selector-idioma button { appearance: none; border: 0; background: transparent; color: inherit; font: 800 .85rem/1 Nunito, system-ui, sans-serif; padding: 8px 13px; min-height: 34px; border-radius: 999px; cursor: pointer; }
.selector-idioma button:hover { background: rgba(127,127,127,.18); }
.selector-idioma button.on { background: var(--bombilla); color: var(--tinta); cursor: default; }
.selector-idioma button:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 2px; }
.barra-curso .selector-idioma { margin-left: auto; color: var(--tinta); border-color: rgba(19,32,59,.25); }
.portada-h .selector-idioma { margin-top: 4px; }
.contraste .selector-idioma { border-color: #fff; opacity: 1; }
.selector-idioma.corto { padding: 2px; border-width: 1.5px; border-color: rgba(19,32,59,.22); color: var(--tinta); }
.selector-idioma.corto button { padding: 6px 9px; min-height: 30px; font-size: .78rem; letter-spacing: .04em; }
.idioma-menu { padding: 10px 14px 4px; }
.aviso-ok { background: #E8FBF7; border: 1px solid #A7E8DC; border-radius: 12px; padding: 12px 14px; color: var(--tinta); gap: 6px; }
.idioma-menu .selector-idioma { color: var(--tinta); border-color: rgba(19,32,59,.22); }
.pie-sitio .selector-idioma { color: inherit; border-color: currentColor; opacity: .85; }
/* Textos fijos del HTML que se traducen al cargar: ocultos (sin mover nada) hasta que llega el diccionario */
html.idioma-en:not(.traducido) [data-t] { visibility: hidden; }
/* Bloques largos escritos en los dos idiomas (privacidad, aviso legal) */
html.idioma-en [data-idioma="es"], html:not(.idioma-en) [data-idioma="en"] { display: none !important; }

/* Entrada en dos pasos */
.secuencia-sala { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.secuencia-sala[hidden] { display: none; }
.secuencia-sala small { font-weight: 800; color: var(--tinta-2); white-space: nowrap; }
.figuras-secuencia { display: inline-flex; gap: 8px; align-items: center; }
.figuras-secuencia .figura { width: clamp(40px, 4.4vw, 64px); height: clamp(40px, 4.4vw, 64px); border-radius: 14px; background: var(--c); color: var(--ct); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.figuras-secuencia .figura svg { width: 64%; height: 64%; }
#secuencia-mini:empty { display: none; }
#secuencia-mini { display: inline-flex; margin-left: 4px; }
#secuencia-mini .figuras-secuencia { gap: 4px; }
#secuencia-mini .figura { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.huecos-secuencia { display: flex; justify-content: center; gap: 10px; }
.huecos-secuencia .hueco { width: 56px; height: 56px; border-radius: 14px; border: 3px dashed var(--linea-2); display: grid; place-items: center; background: var(--crema); }
.huecos-secuencia .hueco.lleno { border: 0; background: var(--c); color: var(--ct); animation: estallar .3s var(--anim); }
.huecos-secuencia .hueco svg { width: 62%; height: 62%; }
.teclado-secuencia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tecla-figura { aspect-ratio: 1.5; border-radius: var(--radio-g); border: 0; background: var(--c); color: var(--ct); display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.2); transition: transform .12s var(--anim); }
.tecla-figura svg { width: 46%; height: 70%; }
.tecla-figura:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }

/* ==========================================================================
   Pantalla grande (presentador)
   ========================================================================== */
.pantalla { min-height: 100vh; display: flex; flex-direction: column; }
.barra-sup { display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 64px; }
.barra-sup .marca { color: inherit; font-size: 1.5rem; }
.barra-sup .marca svg { width: 34px; height: 34px; }
.pastilla-pin { background: rgba(255,255,255,.95); color: var(--tinta); border-radius: 999px; padding: 6px 16px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; box-shadow: var(--sombra-1); }
.pastilla-pin b { font-family: var(--fuente-titulo); font-size: 1.3rem; letter-spacing: 2px; }
.boton-redondo { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: inherit; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.tema-playa .boton-redondo, .tema-papel .boton-redondo, .tema-primavera .boton-redondo { background: rgba(19,32,59,.1); }
.boton-redondo:hover { background: rgba(255,255,255,.25); transform: scale(1.05); }
.boton-redondo svg { width: 22px; height: 22px; }
.contador-jug { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; background: rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; }
.cuerpo-pantalla { flex: 1; display: flex; flex-direction: column; padding: 8px clamp(16px, 3vw, 40px) 24px; gap: 18px; min-height: 0; }

/* Sala de espera */
.sala-arriba { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: stretch; }
.tarjeta-unirse { background: #fff; color: var(--tinta); border-radius: var(--radio-g); box-shadow: var(--sombra-3); display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 18px clamp(18px, 3vw, 36px); }
/* «Entra en eurekaquiz.io»: la dirección, grande como el PIN de al lado (y en varias líneas si alguna fuera larga). */
.tarjeta-unirse .donde { font-weight: 800; font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.3; color: var(--tinta-2); }
.tarjeta-unirse .donde b { display: block; font-family: var(--fuente-titulo); font-size: clamp(1.9rem, 3.7vw, 4.2rem); line-height: 1.05; letter-spacing: -.01em; color: var(--noche); margin: 2px 0 4px; overflow-wrap: anywhere; }
.pin-grande { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: .9; letter-spacing: .04em; color: var(--noche); cursor: pointer; white-space: nowrap; }
.pin-grande small { display: block; font-family: var(--fuente); font-size: 1rem; letter-spacing: 0; color: var(--tinta-2); font-weight: 800; margin-bottom: 4px; }
.qr-caja { background: #fff; border-radius: var(--radio-g); padding: 14px; box-shadow: var(--sombra-3); display: grid; place-items: center; cursor: zoom-in; }
.qr-caja img { width: clamp(150px, 16vw, 230px); height: auto; display: block; }
.qr-gigante { position: fixed; inset: 0; background: rgba(10,18,37,.85); z-index: 800; display: grid; place-items: center; cursor: zoom-out; }
.qr-gigante div { background: #fff; padding: 28px; border-radius: 28px; text-align: center; color: var(--tinta); }
.qr-gigante img { width: min(70vh, 80vw); }
.zona-jugadores { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 12px; padding: 10px; overflow: auto; }
.ficha-jugador { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.95); color: var(--tinta); padding: 6px 16px 6px 6px; border-radius: 999px; font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.35rem); box-shadow: var(--sombra-1); animation: estallar .45s var(--anim); border: 0; cursor: pointer; }
.ficha-jugador .bombilla-avatar { width: 38px; height: 38px; }
.ficha-jugador:hover { text-decoration: line-through; background: #FDE2E2; }
.ficha-jugador.desconectado { opacity: .5; }
@keyframes estallar { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.1); } }
.espera-mensaje { text-align: center; font-family: var(--fuente-titulo); font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 800; opacity: .9; margin-top: 4vh; }
.espera-mensaje .bombilla-espera { width: 120px; height: 120px; animation: flotar 3s ease-in-out infinite; display: block; margin: 0 auto 10px; }
.sala-abajo { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.columnas-equipos { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; overflow: auto; }
.columna-equipo { background: rgba(255,255,255,.1); border-radius: var(--radio-g); padding: 14px; border-top: 6px solid var(--ce); }
.columna-equipo h4 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; }
.columna-equipo .lista { display: flex; flex-wrap: wrap; gap: 6px; }
.columna-equipo .ficha-jugador { font-size: 1rem; }

/* Pregunta */
.tarjeta-pregunta { background: #fff; color: var(--tinta); border-radius: var(--radio-g); padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 34px); text-align: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.15; box-shadow: var(--sombra-3); overflow-wrap: anywhere; }
.tarjeta-pregunta.enorme { font-size: clamp(2rem, 5vw, 4.4rem); padding: 4vh 4vw; }
.etiquetas-pregunta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.zona-central { flex: 1; display: grid; grid-template-columns: 140px 1fr 140px; align-items: center; gap: 16px; min-height: 0; }
.temporizador { width: clamp(90px, 9vw, 130px); aspect-ratio: 1; position: relative; justify-self: center; }
.temporizador svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.temporizador .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(2rem, 3.5vw, 3rem); }
.temporizador.urgente .num { color: var(--coral); animation: latido .5s infinite; }
.contador-respuestas { justify-self: center; text-align: center; font-weight: 800; }
.contador-respuestas b { display: block; font-family: var(--fuente-titulo); font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; }
.media-pregunta { display: grid; place-items: center; min-height: 0; height: 100%; }
.media-pregunta img { max-height: min(42vh, 100%); max-width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-3); background: #fff; object-fit: contain; }
/* Los vídeos se dimensionan por la altura que queda libre, para que la pregunta, las respuestas y los botones quepan siempre. */
.media-pregunta iframe { height: min(46vh, calc(100vh - 440px)); min-height: 150px; width: auto; max-width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radio); box-shadow: var(--sombra-3); background: #000; }
.media-pregunta .credito { font-size: .75rem; opacity: .8; margin-top: 4px; }
.media-pregunta video.video-propio { height: min(46vh, calc(100vh - 440px)); min-height: 150px; width: auto; max-width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-3); background: #000; }
.zona-central .media-pregunta video.video-propio, .zona-central .media-pregunta iframe { height: min(42vh, calc(100vh - 500px)); min-height: 120px; }
.diapositiva video.video-propio { max-height: 100%; max-width: 55%; border-radius: var(--radio); background: #000; box-shadow: var(--sombra-2); }
.diapositiva.d-titulo video.video-propio, .diapositiva.d-cita video.video-propio { display: none; }
.revelar { position: relative; display: inline-block; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-3); }
.revelar img { display: block; max-height: 44vh; box-shadow: none; border-radius: 0; }
.revelar .velo { position: absolute; inset: 0; display: grid; }
.revelar .velo i { background: var(--noche-3); border: 1px solid rgba(255,255,255,.08); transition: opacity .6s, transform .6s; }
.revelar .velo i.fuera { opacity: 0; transform: scale(.6) rotate(8deg); }
.rejilla-respuestas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rejilla-respuestas.n3, .rejilla-respuestas.n5, .rejilla-respuestas.n6 { grid-template-columns: repeat(3, 1fr); }
.rejilla-respuestas .respuesta { font-size: clamp(1.1rem, 2.1vw, 1.9rem); min-height: clamp(70px, 11vh, 120px); transition: opacity .4s, transform .4s, filter .4s; }
.rejilla-respuestas .respuesta.apagada { opacity: .35; filter: saturate(.5); transform: scale(.98); }
.rejilla-respuestas .respuesta .marca-ok { margin-left: auto; width: 1.6em; height: 1.6em; flex: none; }
.lista-puzzle { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 0 auto; width: 100%; }
.lista-puzzle .respuesta { font-size: clamp(1.1rem, 2vw, 1.7rem); }
.lista-puzzle .orden { font-family: var(--fuente-titulo); font-size: 1.6em; width: 1.4em; text-align: center; }
.controles-pregunta { display: flex; gap: 10px; justify-content: flex-end; }
.pausado-capa { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,18,37,.6); z-index: 20; font-family: var(--fuente-titulo); font-size: 3rem; font-weight: 800; color: #fff; backdrop-filter: blur(4px); }
.barra-lectura { height: 10px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; width: min(700px, 80%); margin: 0 auto; }
.barra-lectura i { display: block; height: 100%; background: var(--bombilla); width: 0; }

/* Resultados */
.grafica-barras { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 28px); height: clamp(110px, 24vh, 320px); padding-top: 6px; }
.rejilla-respuestas.compacta .respuesta { min-height: clamp(46px, 7.5vh, 86px); font-size: clamp(1rem, 1.7vw, 1.6rem); padding: 8px 16px; }
.rejilla-respuestas.compacta .respuesta .forma { width: 1.7em; height: 1.7em; }
.explicacion { padding: 10px 18px; }
@media (max-height: 820px) { .cuerpo-pantalla { gap: 12px; padding-bottom: 14px; } .tarjeta-pregunta { padding: 10px 24px; } .barra-sup { min-height: 54px; padding: 8px 18px; } }
.barra-opcion { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; width: clamp(60px, 9vw, 120px); height: 100%; }
.barra-opcion .pilar { width: 100%; background: var(--c); border-radius: 12px 12px 4px 4px; height: 0; transition: height 1s var(--anim); min-height: 8px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12); }
.barra-opcion .base { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: var(--c); color: var(--ct); border-radius: 10px; padding: 6px; font-weight: 800; font-size: 1.3rem; }
.barra-opcion .base .forma { width: 1.2em; height: 1.2em; }
.barra-opcion.mal { opacity: .45; }
.explicacion { background: rgba(255,255,255,.96); color: var(--tinta); border-radius: var(--radio-g); padding: 14px 20px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--sombra-2); max-width: 1000px; margin: 0 auto; font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 700; animation: entrar-abajo .5s var(--anim); }
.explicacion svg { width: 42px; height: 42px; flex: none; }
.pie-pantalla { display: flex; gap: 12px; align-items: center; }
.pie-pantalla .estado { flex: 1; font-weight: 800; opacity: .9; }

/* Clasificación */
.marcador { width: min(900px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; position: relative; }
.fila-marcador { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.96); color: var(--tinta); border-radius: var(--radio); padding: 10px 18px; font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.8rem); box-shadow: var(--sombra-2); }
.fila-marcador:first-child { background: var(--bombilla); }
.fila-marcador .puesto { font-family: var(--fuente-titulo); width: 1.6em; text-align: center; }
.fila-marcador .nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-marcador .puntos { font-variant-numeric: tabular-nums; }
.fila-marcador .sube { color: var(--turquesa-osc); font-size: .7em; }
.fila-marcador .racha { font-size: .65em; background: var(--noche); color: var(--bombilla); padding: 2px 8px; border-radius: 999px; }
.fila-equipo { border-left: 10px solid var(--ce); }

/* Diapositivas */
.diapositiva { background: #fff; color: var(--tinta); border-radius: var(--radio-g); box-shadow: var(--sombra-3); aspect-ratio: 16/9; width: min(100%, (100vh - 220px) * 16 / 9); margin: 0 auto; padding: 5% 6%; display: flex; flex-direction: column; justify-content: center; gap: 3%; overflow: hidden; }
.diapositiva h2 { font-size: clamp(1.8rem, 4.2vw, 4rem); margin: 0; }
.diapositiva .cuerpo { font-size: clamp(1.1rem, 2.2vw, 2rem); white-space: pre-line; }
.diapositiva ul { font-size: clamp(1.1rem, 2.2vw, 2rem); margin: 0; padding-left: 1.2em; }
.diapositiva ul li { margin-bottom: .4em; }
.diapositiva ul li::marker { color: var(--bombilla); }
.diapositiva.d-titulo { text-align: center; background: var(--noche); color: #fff; }
.diapositiva.d-titulo h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.diapositiva.d-cita blockquote { margin: 0; font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 3.6vw, 3.4rem); font-weight: 800; line-height: 1.2; }
.diapositiva.d-cita blockquote::before { content: '“'; color: var(--bombilla); font-size: 2em; line-height: 0; vertical-align: -.4em; margin-right: .1em; }
.diapositiva.d-media { flex-direction: row; align-items: center; }
.diapositiva.d-media img, .diapositiva.d-clasica img { max-height: 100%; max-width: 50%; border-radius: var(--radio); object-fit: contain; }

/* Podio */
.podio { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 30px); padding-top: 20px; min-height: 0; }
.peldano { display: flex; flex-direction: column; align-items: center; width: clamp(150px, 20vw, 260px); opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .8s var(--anim); }
.peldano.visible { opacity: 1; transform: none; }
.peldano .quien { text-align: center; margin-bottom: 10px; }
.peldano .quien .bombilla-avatar { width: clamp(80px, 9vw, 130px); height: clamp(80px, 9vw, 130px); animation: flotar 2.5s ease-in-out infinite; }
.peldano .quien b { display: block; font-family: var(--fuente-titulo); font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; }
.peldano .quien span { font-weight: 800; opacity: .9; }
.peldano .bloque { width: 100%; border-radius: 18px 18px 0 0; display: grid; place-items: start center; padding-top: 14px; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(3rem, 6vw, 5rem); color: rgba(19,32,59,.85); box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); }
.peldano.p1 .bloque { height: clamp(120px, 26vh, 320px); background: linear-gradient(180deg, var(--bombilla-claro), var(--bombilla)); }
.peldano.p2 .bloque { height: clamp(90px, 19vh, 240px); background: linear-gradient(180deg, #E9EEF6, #BAC6DA); }
.peldano.p3 .bloque { height: clamp(70px, 13vh, 170px); background: linear-gradient(180deg, #FFC9A8, #F09A6B); }
.peldano.p1 { order: 2; } .peldano.p2 { order: 1; } .peldano.p3 { order: 3; }
.panel-final { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: entrar-abajo .6s var(--anim); }
#panel-final.en-espera { visibility: hidden; }
#panel-final:not(.en-espera) { animation: entrar-abajo .6s var(--anim); }
.estadisticas-finales { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dato { background: rgba(255,255,255,.12); border-radius: var(--radio); padding: 10px 18px; text-align: center; font-weight: 800; }
.dato b { display: block; font-family: var(--fuente-titulo); font-size: 2rem; line-height: 1; }
canvas.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 700; }
.reacciones-capa { position: fixed; inset: 0; pointer-events: none; z-index: 600; overflow: hidden; }
.reaccion-flotante { position: absolute; bottom: -60px; font-size: 44px; animation: subir-reaccion 3.4s ease-out forwards; display: flex; flex-direction: column; align-items: center; }
.reaccion-flotante small { font-size: 13px; font-weight: 800; background: rgba(255,255,255,.9); color: var(--tinta); padding: 1px 8px; border-radius: 999px; }
@keyframes subir-reaccion { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-15vh) scale(1.1); } 100% { transform: translateY(-85vh) scale(1); opacity: 0; } }

/* Preparar partida */
.preparar { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 24px 0 60px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; color: var(--tinta); }
.modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.modo { background: #fff; border: 3px solid transparent; border-radius: var(--radio-g); padding: 18px; cursor: pointer; text-align: left; box-shadow: var(--sombra-1); transition: transform .15s var(--anim), border-color .15s; display: flex; flex-direction: column; gap: 6px; }
.modo:hover { transform: translateY(-3px); }
.modo.elegido { border-color: var(--bombilla); box-shadow: 0 0 0 6px rgba(255,176,32,.2); }
.modo .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--crema); }
.modo .ico svg { width: 32px; height: 32px; }
.modo b { font-family: var(--fuente-titulo); font-size: 1.3rem; }
.modo small { color: var(--tinta-2); }
@media (max-width: 900px) { .preparar { grid-template-columns: 1fr; } .zona-central { grid-template-columns: 90px 1fr 90px; } .sala-arriba { grid-template-columns: 1fr; } }

/* ==========================================================================
   Móvil (jugador)
   ========================================================================== */
.movil { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.movil .zona { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; gap: 16px; text-align: center; }
.movil .caja-entrada { background: #fff; color: var(--tinta); border-radius: var(--radio-g); padding: 22px; width: min(420px, 100%); box-shadow: var(--sombra-3); display: flex; flex-direction: column; gap: 12px; }
.movil .entrada-pin { text-align: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: 2rem; letter-spacing: .15em; }
.movil .pie-jugador { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(10,18,37,.6); color: #fff; font-weight: 800; }
.movil .pie-jugador .bombilla-avatar { width: 38px; height: 38px; }
.movil .pie-jugador .pts { background: rgba(255,255,255,.15); padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.movil .cab-pregunta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 0; font-weight: 800; }
.movil .texto-pregunta { background: #fff; color: var(--tinta); border-radius: var(--radio); padding: 12px 16px; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.3rem; line-height: 1.2; margin: 10px 14px 0; box-shadow: var(--sombra-2); }
.botonera { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px 14px; }
.botonera.n3 { grid-template-columns: 1fr; } .botonera.n5, .botonera.n6 { grid-template-columns: 1fr 1fr; }
.botonera.n2.vf { grid-template-columns: 1fr 1fr; }
.boton-respuesta { border: 0; cursor: pointer; flex-direction: column; justify-content: center; align-content: center; font-size: 1.15rem; transition: transform .1s, opacity .2s, filter .2s; min-height: 90px; height: 100%; width: 100%; text-align: center; }
.boton-respuesta .txt { flex: 0 1 auto; }
.boton-respuesta .forma { width: 3.2rem; height: 3.2rem; }
.boton-respuesta.sin-texto .forma { width: 5rem; height: 5rem; }
.boton-respuesta:active { transform: scale(.96); }
.boton-respuesta.marcada { outline: 5px solid #fff; outline-offset: -9px; }
.boton-respuesta.marcada::after { content: '✓'; position: absolute; top: 8px; right: 12px; font-size: 1.5rem; }
.botonera.atenuada .boton-respuesta:not(.marcada) { opacity: .35; filter: saturate(.4); }
.lista-ordenar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; flex: 1; width: 100%; }
.item-ordenar { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--tinta); border-radius: var(--radio); padding: 12px; font-weight: 800; box-shadow: var(--sombra-1); border-left: 10px solid var(--c); text-align: left; touch-action: none; user-select: none; }
.item-ordenar .num { font-family: var(--fuente-titulo); font-size: 1.5rem; width: 1.4em; text-align: center; color: var(--tinta-3); }
.item-ordenar .txt { flex: 1; }
.item-ordenar .mover { display: flex; flex-direction: column; gap: 4px; }
.item-ordenar .mover button { width: 40px; height: 32px; border-radius: 8px; border: 0; background: var(--crema); cursor: pointer; font-size: 1rem; font-weight: 800; }
.item-ordenar.arrastrando { opacity: .7; transform: scale(1.02); box-shadow: var(--sombra-3); }
.resultado-movil { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 18px; text-align: center; }
.resultado-movil.acierto { background: linear-gradient(180deg, #1FB29F, #128A7C); color: #fff; }
.resultado-movil.fallo { background: linear-gradient(180deg, #FF7B7B, #D94545); color: #fff; }
.resultado-movil.parcial { background: linear-gradient(180deg, #FFC14D, #E08E00); color: var(--noche); }
.resultado-movil.neutro { background: transparent; }
.resultado-movil h2 { font-size: 2.6rem; margin: 0; }
.resultado-movil .icono-grande { width: 96px; height: 96px; }
.puntos-ganados { background: rgba(0,0,0,.2); border-radius: 999px; padding: 8px 22px; font-family: var(--fuente-titulo); font-weight: 800; font-size: 2rem; animation: estallar .5s var(--anim); }
.racha-chip { background: var(--noche); color: var(--bombilla); padding: 6px 14px; border-radius: 999px; font-weight: 800; }
.mensaje-puesto { font-weight: 800; font-size: 1.15rem; }
.explicacion-movil { background: rgba(255,255,255,.95); color: var(--tinta); border-radius: var(--radio); padding: 12px 14px; font-weight: 700; text-align: left; display: flex; gap: 10px; max-width: 460px; }
.explicacion-movil svg { width: 28px; height: 28px; flex: none; }
.bombilla-viva { width: 150px; height: 150px; animation: flotar 3s ease-in-out infinite; }
.reacciones-barra { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reacciones-barra button { width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); font-size: 26px; cursor: pointer; transition: transform .1s; }
.reacciones-barra button:active { transform: scale(.85); }
.estrellas { display: flex; gap: 6px; justify-content: center; }
.estrellas button { font-size: 2.2rem; background: none; border: 0; cursor: pointer; filter: grayscale(1); opacity: .45; transition: transform .15s; padding: 0 2px; }
.estrellas button.on { filter: none; opacity: 1; transform: scale(1.1); }
.opciones-si-no { display: flex; gap: 8px; justify-content: center; }
.opciones-si-no button.on { background: var(--bombilla); border-color: var(--bombilla-osc); }
.medalla { width: 120px; height: 120px; }
.cuenta-atras-movil { font-family: var(--fuente-titulo); font-size: 5rem; font-weight: 800; line-height: 1; }
.barra-tiempo-movil { height: 8px; background: rgba(255,255,255,.2); margin: 8px 14px 0; border-radius: 999px; overflow: hidden; }
.barra-tiempo-movil i { display: block; height: 100%; background: var(--bombilla); transition: width .25s linear; }
.equipos-elegir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.equipos-elegir button { border: 3px solid transparent; border-radius: 12px; padding: 10px; font-weight: 800; color: var(--tinta); background: var(--ce); cursor: pointer; }
.equipos-elegir button.on { border-color: var(--noche); box-shadow: 0 0 0 3px #fff inset; }

/* ==========================================================================
   Páginas de gestión: portada, biblioteca, editor, informes, admin
   ========================================================================== */
.heroe { padding: 48px 0 32px; position: relative; overflow: hidden; }
.heroe .contenedor { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.heroe h1 span { color: var(--bombilla-osc); }
.heroe p.lead { font-size: 1.25rem; color: var(--tinta-2); max-width: 36em; }
.caja-pin { background: var(--noche); color: #fff; border-radius: 28px; padding: 28px; box-shadow: var(--sombra-3); position: relative; overflow: hidden; }
.caja-pin::before { content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,176,32,.45), transparent 65%); }
.caja-pin h2 { color: #fff; position: relative; }
.caja-pin form { display: flex; gap: 10px; position: relative; flex-wrap: wrap; }
.caja-pin input { flex: 1 1 180px; text-align: center; font-family: var(--fuente-titulo); font-size: 1.8rem; font-weight: 800; letter-spacing: .12em; border-radius: 16px; border: 0; padding: .4em .6em; color: var(--tinta); min-width: 0; }
.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ventaja { background: #fff; border-radius: var(--radio-g); padding: 20px; box-shadow: var(--sombra-1); }
.ventaja .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px; }
.ventaja .ico svg { width: 28px; height: 28px; }
.ventaja h3 { margin-bottom: 4px; }
.ventaja p { margin: 0; color: var(--tinta-2); }
.seccion { padding: 36px 0; }
.seccion > .contenedor > h2 { margin-bottom: 18px; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tarjeta-cuestionario { background: #fff; border-radius: var(--radio-g); overflow: hidden; box-shadow: var(--sombra-1); display: flex; flex-direction: column; transition: transform .15s var(--anim), box-shadow .15s; border: 1px solid rgba(19,32,59,.06); }
.tarjeta-cuestionario:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tarjeta-cuestionario .portada { height: 120px; position: relative; display: grid; place-items: center; overflow: hidden; }
.tarjeta-cuestionario .portada img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tarjeta-cuestionario .portada svg.deco { width: 64px; height: 64px; position: relative; }
.tarjeta-cuestionario .portada .chip { position: absolute; left: 10px; bottom: 10px; }
.tarjeta-cuestionario .info { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-cuestionario h3 { margin: 0; font-size: 1.15rem; }
.tarjeta-cuestionario .meta { color: var(--tinta-2); font-size: .85rem; display: flex; gap: 10px; flex-wrap: wrap; }
.tarjeta-cuestionario .acciones { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
.pestanas { display: flex; gap: 6px; border-bottom: 2px solid var(--linea); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pestanas button { border: 0; background: none; padding: 10px 16px; font-weight: 800; cursor: pointer; border-bottom: 4px solid transparent; margin-bottom: -2px; color: var(--tinta-2); white-space: nowrap; }
.pestanas button.activa { color: var(--tinta); border-bottom-color: var(--bombilla); }
.pie-sitio { padding: 32px 0 48px; color: var(--tinta-2); font-size: .9rem; border-top: 1px solid var(--linea); margin-top: 40px; }
/* En el móvil, quien escribe la dirección que ve en la pantalla trae un PIN: la caja para escribirlo va primero. */
@media (max-width: 860px) { .heroe .contenedor { grid-template-columns: 1fr; gap: 28px; } .heroe .caja-pin { order: -1; } .heroe .caja-pin form .boton { flex: 1 1 100%; } }

/* Editor */
.editor { display: grid; grid-template-columns: 260px 1fr 300px; height: calc(100vh - 68px); height: calc(100dvh - 68px); }
.editor-lista { background: #fff; border-right: 1px solid var(--linea); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mini-pregunta { display: flex; gap: 8px; align-items: stretch; padding: 8px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; background: var(--crema); position: relative; text-align: left; }
.mini-pregunta.activa { border-color: var(--bombilla); background: #FFF3D6; }
.mini-pregunta .n { font-weight: 800; color: var(--tinta-3); width: 22px; }
.mini-pregunta .contenido { flex: 1; min-width: 0; }
.mini-pregunta .tipo { font-size: .75rem; font-weight: 800; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .03em; }
.mini-pregunta .t { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-pregunta .alerta { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.mini-pregunta.arrastrando { opacity: .4; }
.mini-pregunta.sobre { box-shadow: 0 -4px 0 var(--bombilla); }
.editor-lienzo { overflow-y: auto; padding: 22px clamp(16px, 3vw, 40px) 60px; background: var(--crema); }
.lienzo-inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.campo-pregunta { width: 100%; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 2rem); text-align: center; border: 2px dashed var(--linea-2); border-radius: var(--radio-g); padding: 16px; background: #fff; resize: none; line-height: 1.2; min-height: 84px; }
.campo-pregunta:focus { border-style: solid; border-color: var(--bombilla); outline: none; }
.zona-media { border: 2px dashed var(--linea-2); border-radius: var(--radio-g); min-height: 200px; display: grid; place-items: center; background: #fff; position: relative; overflow: hidden; padding: 12px; }
.zona-media img { max-height: 280px; border-radius: 12px; }
.zona-media iframe { width: 100%; max-width: 560px; aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.zona-media .quitar { position: absolute; top: 10px; right: 10px; }
.zona-media.arrastre { border-color: var(--bombilla); background: #FFF3D6; }
.respuestas-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resp-editor { display: flex; align-items: center; gap: 10px; background: var(--c); color: var(--ct); border-radius: var(--radio); padding: 8px 10px 8px 14px; min-height: 68px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12); }
.resp-editor input[type=text] { flex: 1; width: 0; background: rgba(255,255,255,.92); color: var(--tinta); border: 0; border-radius: 10px; padding: 10px 12px; font-weight: 700; min-width: 0; }
.resp-editor .correcta { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); background: transparent; cursor: pointer; display: grid; place-items: center; flex: none; color: #fff; }
.resp-editor .correcta.on { background: #fff; color: var(--turquesa-osc); border-color: #fff; }
.resp-editor .correcta svg { width: 24px; height: 24px; }
.resp-editor .mini { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.25); color: inherit; cursor: pointer; display: grid; place-items: center; flex: none; }
.resp-editor img.mini-img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.editor-props { background: #fff; border-left: 1px solid var(--linea); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.editor-props h4 { margin: 0; font-size: 1rem; }
.selector-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.selector-tipos button { border: 2px solid var(--linea); background: #fff; border-radius: 12px; padding: 10px 8px; cursor: pointer; font-weight: 800; font-size: .85rem; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.selector-tipos button svg { width: 28px; height: 28px; }
.selector-tipos button.on { border-color: var(--bombilla); background: #FFF3D6; }
.problemas { background: #FDE2E2; color: var(--coral-osc); border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: .9rem; }
.estado-guardado { font-weight: 700; color: var(--tinta-2); font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.titulo-editable { text-overflow: ellipsis; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.2rem; border: 2px solid transparent; border-radius: 10px; padding: 4px 10px; background: transparent; min-width: 0; flex: 1; max-width: 520px; }
.titulo-editable:hover, .titulo-editable:focus { border-color: var(--linea-2); background: #fff; outline: none; }
@media (max-width: 1100px) { .editor { grid-template-columns: 200px 1fr; } .editor-props { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linea); } .editor { height: auto; } }
@media (max-width: 720px) { .editor { grid-template-columns: 1fr; } .editor-lista { flex-direction: row; overflow-x: auto; } .mini-pregunta { min-width: 180px; } .respuestas-editor { grid-template-columns: 1fr; } }
.galeria-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.galeria-imagenes button { border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; background: var(--crema); }
.galeria-imagenes img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.galeria-imagenes button:hover img { transform: scale(1.06); }
.temas-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.temas-elegir button { height: 64px; border-radius: 12px; border: 3px solid transparent; cursor: pointer; color: #fff; font-weight: 800; font-size: .8rem; display: flex; align-items: flex-end; padding: 6px; position: relative; overflow: hidden; }
.temas-elegir button.on { border-color: var(--bombilla); box-shadow: 0 0 0 3px rgba(255,176,32,.35); }
.temas-elegir button.tema-playa, .temas-elegir button.tema-papel, .temas-elegir button.tema-primavera { color: var(--tinta); }
.temas-elegir button { flex-direction: column; align-items: flex-start; justify-content: flex-end; line-height: 1.15; text-align: left; }
.temas-elegir button .temporada { display: block; font-size: .65rem; font-weight: 800; opacity: .8; position: relative; z-index: 1; }
.temas-elegir button .nombre-tema { position: relative; z-index: 1; }
.galeria-h .carrusel-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Informes y paneles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: #fff; border-radius: var(--radio-g); padding: 16px 18px; box-shadow: var(--sombra-1); }
.kpi small { color: var(--tinta-2); font-weight: 800; display: block; }
.kpi b { font-family: var(--fuente-titulo); font-size: 2.2rem; line-height: 1.1; display: block; }
.kpi span { font-size: .85rem; color: var(--tinta-2); }
.anillo { width: 150px; height: 150px; position: relative; flex: none; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo .valor { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.anillo .valor small { display: block; font-family: var(--fuente); font-size: .85rem; color: var(--tinta-2); }
.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radio); overflow: hidden; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { background: var(--crema-2); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.tabla tr:hover td { background: #FFFBF2; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.envoltura-tabla { overflow-x: auto; border-radius: var(--radio); box-shadow: var(--sombra-1); }
.barra-progreso { height: 10px; border-radius: 999px; background: var(--crema-2); overflow: hidden; min-width: 80px; }
.barra-progreso i { display: block; height: 100%; border-radius: 999px; background: var(--turquesa); }
.barra-progreso.medio i { background: var(--bombilla); } .barra-progreso.bajo i { background: var(--coral); }
.grafica { width: 100%; height: auto; display: block; margin-top: 8px; }
.grafica text { font-family: var(--fuente); font-size: 12px; fill: var(--tinta-2); }
.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-simple li { background: #fff; border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: var(--sombra-1); }
.pregunta-informe { background: #fff; border-radius: var(--radio-g); padding: 18px; box-shadow: var(--sombra-1); display: flex; flex-direction: column; gap: 10px; }
.opcion-informe { display: grid; grid-template-columns: 34px 1fr 160px 48px; gap: 10px; align-items: center; font-weight: 700; }
.opcion-informe .forma { width: 28px; height: 28px; color: var(--c); }
.opcion-informe .forma svg path, .opcion-informe .forma svg circle { fill: var(--c); }
.opcion-informe.buena .txt::after { content: ' ✓'; color: var(--ok); }
.disenos-diapo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.disenos-diapo button { border: 2px solid var(--linea); border-radius: 10px; background: #fff; padding: 8px; cursor: pointer; font-weight: 800; font-size: .8rem; }
.disenos-diapo button.on { border-color: var(--bombilla); background: #FFF3D6; }
.nota-ia { background: linear-gradient(135deg, #FFF3D6, #E8FBF7); border-radius: var(--radio); padding: 12px 14px; font-weight: 700; }
.pasos-ia { display: flex; gap: 6px; flex-wrap: wrap; }
.pasos-ia button { border: 2px solid var(--linea); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; cursor: pointer; }
.pasos-ia button.on { background: var(--noche); color: #fff; border-color: var(--noche); }

@media print {
  .cabecera, .no-imprimir, #tostadas { display: none !important; }
  body { background: #fff; }
  .tarjeta, .kpi, .pregunta-informe { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .contenedor { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Bombillas grandes: el SVG ocupa todo su contenedor */
.bombilla-espera, .bombilla-viva, .icono-grande, .medalla { display: inline-block; }
.bombilla-espera > svg, .bombilla-viva > svg, .icono-grande > svg, .medalla > svg, .deco > svg { width: 100%; height: 100%; display: block; }
.tarjeta-cuestionario .portada .deco { width: 64px; height: 64px; display: block; }
.quien .avatar-podio { display: block; width: clamp(64px, min(9vw, 13vh), 130px); height: clamp(70px, min(10vw, 14vh), 142px); margin: 0 auto 4px; animation: flotar 2.5s ease-in-out infinite; }
.quien .avatar-podio > svg { width: 100%; height: 100%; }

.galeria-imagenes button.guardando { opacity: .5; outline: 3px solid var(--bombilla); }
/* Iconos libres: cuadrícula más apretada, el icono entero y las muestras de color y fondo */
.galeria-iconos { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.galeria-iconos .icono-libre { aspect-ratio: 1; display: grid; place-items: center; background: var(--crema); border: 2px solid transparent; transition: transform .15s var(--anim), border-color .15s; }
.galeria-iconos .icono-libre:hover, .galeria-iconos .icono-libre:focus-visible { border-color: var(--bombilla); transform: translateY(-2px); }
.galeria-iconos .icono-libre img { width: 62%; height: 62%; object-fit: contain; }
.galeria-iconos button:hover img { transform: none; }
.opciones-iconos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pestanas.pequenas { margin: 0; }
.pestanas.pequenas button { padding: 6px 12px; font-size: .9rem; }
.muestras { display: flex; gap: 6px; }
.muestra { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--papel); background: var(--m); box-shadow: 0 0 0 1px var(--linea-2); cursor: pointer; padding: 0; }
.muestra.vacia { background: repeating-linear-gradient(45deg, #fff 0 4px, #EDE4CF 4px 8px); }
.muestra[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bombilla); }
/* Sonidos y música libres */
.lista-sonidos { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.sonido-libre { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radio); background: var(--papel); border: 2px solid var(--linea); }
.sonido-libre b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sonido-libre small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sonido-libre .reproducir { flex: none; width: 42px; height: 42px; border-radius: 50%; --b: var(--bombilla); --bt: var(--tinta); --bb: var(--bombilla-osc); }
.sonido-libre .reproducir[aria-pressed="true"] { --b: var(--turquesa); --bb: var(--turquesa-osc); }

.aviso-privacidad { grid-column: 1 / -1; background: var(--crema); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-cuestionario .meta .privacidad { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--tinta); }

.lista-objetivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 22px; margin-top: 10px; }
.lista-objetivos .objetivo { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Carrusel y audio ---------- */
.carrusel { position: relative; width: 100%; height: 100%; min-height: 160px; }
.carrusel-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; border-radius: 14px; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-foto { flex: 0 0 100%; scroll-snap-align: center; margin: 0; position: relative; display: grid; place-items: center; }
.carrusel-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; }
.carrusel-foto figcaption { position: absolute; left: 8px; bottom: 8px; font-size: .7rem; background: rgba(0,0,0,.45); color: #fff; padding: 2px 8px; border-radius: 999px; }
.carrusel.auto .carrusel-pista { display: grid; overflow: hidden; }
.carrusel.auto .carrusel-foto { grid-area: 1 / 1; opacity: 0; transition: opacity .9s ease; }
.carrusel.auto .carrusel-foto.activa { opacity: 1; }
.carrusel-puntos { position: absolute; left: 0; right: 0; bottom: -18px; display: flex; justify-content: center; gap: 6px; }
.carrusel-puntos i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .3s, transform .3s; }
.carrusel-puntos i.on { opacity: .9; transform: scale(1.25); }
.media-pregunta .carrusel { height: 100%; }
.diapositiva.con-carrusel { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4%; align-items: center; }
.diapositiva.con-carrusel .texto-diapo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.diapositiva.con-carrusel .carrusel { height: 100%; min-height: 0; align-self: stretch; }
.diapositiva.con-carrusel .carrusel-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.diapositiva.con-carrusel .carrusel-puntos { bottom: -18px; color: var(--tinta); }
.audio-pregunta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.audio-pregunta audio { width: min(560px, 90%); }
.onda-audio { display: flex; align-items: center; gap: 8px; height: 90px; }
.onda-audio i { width: 14px; border-radius: 8px; background: var(--bombilla); animation: onda 1.1s ease-in-out infinite; height: 30%; }
.onda-audio i:nth-child(2) { animation-delay: .15s; } .onda-audio i:nth-child(3) { animation-delay: .3s; } .onda-audio i:nth-child(4) { animation-delay: .45s; }
.onda-audio i:nth-child(5) { animation-delay: .3s; } .onda-audio i:nth-child(6) { animation-delay: .15s; } .onda-audio i:nth-child(7) { animation-delay: 0s; }
@keyframes onda { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.zona-media.con-lista { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }

/* ---------- Panel del docente ---------- */
.cabecera-panel { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.aviso-directo { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #E8FBF7; border-radius: var(--radio); padding: 12px 16px; }
.punto-vivo { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255,107,107,.6); animation: vivo 1.6s infinite; }
@keyframes vivo { 70% { box-shadow: 0 0 0 10px rgba(255,107,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); } }
.kpi small svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.rejilla-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.rejilla-panel .tarjeta h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.mundo-panel { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 20px; align-items: center; }
@media (max-width: 640px) { .mundo-panel { grid-template-columns: 1fr; } }

/* ---------- Mundo de la clase ---------- */
.mundo-svg { width: 100%; height: auto; display: block; border-radius: var(--radio-g); }
.mundo-svg .aspas { transform-box: fill-box; transform-origin: center; animation: girar 9s linear infinite; }
.mundo-svg .aura { animation: latir 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mundo-svg .llama { animation: latir .6s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
.mundo-svg .haz { animation: latir 4s ease-in-out infinite; }
.mundo-svg .nubes { animation: nubes 40s linear infinite alternate; }
.mundo-svg .nuevo .crece { transform-box: fill-box; transform-origin: bottom center; animation: brotar 1.2s var(--anim) .4s both; }
@keyframes latir { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes nubes { to { transform: translateX(60px); } }
@keyframes brotar { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.dato-mundo { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; border: 0; font: inherit; color: inherit; }
.dato-mundo .mundo-mini { width: 110px; flex: none; }
.dato-mundo .mundo-mini .mundo-svg { border-radius: 10px; }
.dato-mundo small { display: block; font-weight: 700; opacity: .85; }
.panel-mundo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .panel-mundo { grid-template-columns: 1fr; } }
.lista-edificios { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lista-edificios li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; font-weight: 800; }
.lista-edificios li.bloqueado { opacity: .45; font-weight: 700; }
.lista-edificios li.siguiente { outline: 3px solid var(--bombilla); }
.lista-edificios li b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--crema-2); flex: none; font-size: .85rem; }
.lista-edificios li.hecho b { background: var(--turquesa); color: #fff; }

/* ---------- Comunidad ---------- */
.cabecera-comunidad { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }
.buscador-comunidad { margin-bottom: 12px; flex-wrap: nowrap; }
.buscador-comunidad #q { flex: 1; min-width: 0; }
.buscador-comunidad select { width: auto; }
.vacio > span svg { width: 64px; height: 64px; }

/* ---------- Grupos de trabajo ---------- */
.tarjeta-grupo { background: #fff; border: 1px solid rgba(19,32,59,.06); border-radius: var(--radio-g); box-shadow: var(--sombra-1); padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .15s var(--anim), box-shadow .15s; }
.tarjeta-grupo:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tarjeta-grupo b { font-family: var(--fuente-titulo); font-size: 1.2rem; }
.ico-grupo { width: 44px; height: 44px; border-radius: 14px; background: #EDE9FE; color: #6D28D9; display: grid; place-items: center; }
.ico-grupo svg { width: 26px; height: 26px; }
.cabecera-grupo { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.cabecera-grupo .invitacion { flex: 1 1 340px; display: flex; flex-direction: column; gap: 8px; background: #FFF3D6; border: 0; }
.quitar-chip { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 6px; color: inherit; opacity: .6; }
.quitar-chip:hover { opacity: 1; }
#vista-grupos .vacio > span svg { width: 64px; height: 64px; }

/* ---------- IA desde fotos ---------- */
.fotos-ia { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.foto-ia { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sombra-1); }
.foto-ia img { width: 100%; height: 100%; object-fit: cover; }
.foto-ia .quitar { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(19,32,59,.75); color: #fff; font-size: 1.2rem; cursor: pointer; }
.anadir-foto { aspect-ratio: 3 / 4; border: 2px dashed var(--linea-2); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; cursor: pointer; font-weight: 800; color: var(--tinta-2); background: #fff; }
.anadir-foto:hover { border-color: var(--bombilla); color: var(--tinta); }
.anadir-foto svg { width: 34px; height: 34px; }

/* ==========================================================================
   Historias para el móvil
   ========================================================================== */
.cuerpo-historia { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(1200px 700px at 50% -10%, #22305A, #0B1224 70%); color: #fff; overflow: hidden; }
.visor-historia { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: 22px; }
.marco-historia { width: 100vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; color: var(--fondo-texto, #fff); }
.marco-historia.escena { min-height: 0; }
@media (min-width: 640px) { .marco-historia { width: 440px; height: min(880px, 94dvh); border-radius: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.45); } }
.marco-historia > * { position: relative; z-index: 1; }
.segmentos { display: flex; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 14px 0; }
.segmentos i { flex: 1; height: 4px; border-radius: 4px; background: currentColor; opacity: .25; transition: opacity .3s; }
.segmentos i.hecho { opacity: .95; }
.segmentos i.actual { opacity: .6; }
.cab-historia { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.cab-historia .marca-mini svg { width: 28px; height: 28px; display: block; }
.titulo-mini { flex: 1; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-historia .boton-redondo { width: 40px; height: 40px; }
.cab-historia .boton-redondo svg { width: 20px; height: 20px; }
.cab-historia .boton-redondo[aria-pressed="true"] { background: var(--bombilla); color: var(--noche); }
.contenido-h { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.tarjeta-h { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); }
.tarjeta-h h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin: 0; line-height: 1.1; color: inherit; }
.tarjeta-h h2 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); margin: 0; line-height: 1.2; color: inherit; }
.portada-h, .final-h { align-items: center; justify-content: center; text-align: center; }
.portada-img { width: 100%; max-height: 34vh; object-fit: cover; border-radius: 20px; box-shadow: var(--sombra-2); }
.logo-h { max-height: 46px; max-width: 160px; object-fit: contain; }
.portada-h .bombilla-viva, .final-h .bombilla-viva { width: 120px; height: 120px; }
.lead-h { font-size: 1.1rem; opacity: .92; margin: 0; }
.pista-h { font-size: .8rem; opacity: .7; margin: 0; }
.media-h { position: relative; border-radius: 18px; overflow: hidden; background: rgba(0,0,0,.18); display: grid; place-items: center; flex: none; }
.media-h img { width: 100%; max-height: 38vh; object-fit: contain; display: block; }
.galeria-h { background: transparent; overflow: visible; padding-bottom: 20px; }
.galeria-h .carrusel { height: 36vh; }
.video-h iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.audio-h { padding: 18px 14px; gap: 12px; display: flex; flex-direction: column; align-items: center; }
.audio-h audio { width: 100%; }
.audio-h .onda-audio { height: 56px; }
.revelar-h .velo { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); }
.revelar-h .velo i { background: var(--noche); border: 1px solid rgba(255,255,255,.06); animation: destapar .8s ease both; }
@keyframes destapar { from { opacity: 1; } to { opacity: 0; transform: scale(.6); } }
.credito-h { position: absolute; left: 8px; bottom: 8px; font-size: .68rem; background: rgba(0,0,0,.5); color: #fff; padding: 2px 8px; border-radius: 999px; }
.texto-h { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.lista-h { margin: 0; padding-left: 1.2em; font-size: 1.1rem; line-height: 1.5; }
.lista-h li { margin-bottom: .35em; }
.lista-h li::marker { color: var(--bombilla); }
.cita-h { margin: 0; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.4rem; line-height: 1.3; border-left: 5px solid var(--bombilla); padding-left: 14px; }
.siguiente-h { margin-top: auto; align-self: stretch; justify-content: center; }
.opciones-h { display: flex; flex-direction: column; gap: 10px; }
.opcion-h { width: 100%; border: 0; cursor: pointer; text-align: left; font-size: 1.05rem; min-height: 58px; font-family: inherit; }
.opcion-h .forma { width: 1.6em; height: 1.6em; flex: none; }
.opcion-h.marcada { outline: 4px solid #fff; outline-offset: -8px; }
.opcion-h.buena { box-shadow: 0 0 0 4px #fff, inset 0 -5px 0 rgba(0,0,0,.14); }
.opcion-h.buena::after { content: "\2713"; margin-left: auto; font-size: 1.4rem; }
.opcion-h.mala { opacity: .8; }
.opcion-h.mala::after { content: "\2717"; margin-left: auto; font-size: 1.3rem; }
.opcion-h.apagada { opacity: .35; filter: saturate(.4); }
.opcion-h.elegida { box-shadow: 0 0 0 4px #fff; }
.opcion-h:disabled { cursor: default; }
.puzzle-h .pieza { background: rgba(255,255,255,.95); color: var(--tinta); }
.puzzle-h .pieza.puesta { background: var(--bombilla); }
.numero-h { width: 30px; height: 30px; border-radius: 50%; background: rgba(19,32,59,.12); display: grid; place-items: center; font-weight: 800; flex: none; }
ol.puzzle-h { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
ol.puzzle-h li { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.95); color: var(--tinta); border-radius: 14px; padding: 12px 14px; font-weight: 800; }
ol.puzzle-h li b { width: 28px; height: 28px; border-radius: 50%; background: var(--turquesa); color: #fff; display: grid; place-items: center; flex: none; }
ol.puzzle-h li.mal b { background: var(--coral); }
.respuesta-h { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; animation: entrar-abajo .35s var(--anim); }
.respuesta-h.acierto { background: #E8FBF7; color: #0B5D53; }
.respuesta-h.fallo { background: #FFE9E7; color: #8A2620; }
.respuesta-h.neutra { background: rgba(255,255,255,.95); color: var(--tinta); }
.respuesta-h b { font-family: var(--fuente-titulo); font-size: 1.3rem; }
.respuesta-h p { margin: 0; }
.explica-h { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.explica-h svg { width: 22px; height: 22px; flex: none; }
/* Tutor con IA en las historias */
.tutor-h { display: flex; flex-direction: column; gap: 8px; }
.boton-tutor { align-self: flex-start; --b: #fff; --bt: #8A2620; --bb: #F3B8B3; }
.tutor-h.lista { background: #fff; color: var(--tinta); border-radius: 14px; padding: 14px; box-shadow: var(--sombra-1); animation: entrar-abajo .35s var(--anim); }
.tutor-cabeza { display: flex; align-items: center; gap: 8px; }
.tutor-cabeza b { font-size: 1.05rem; }
.tutor-icono { width: 28px; display: inline-flex; }
.tutor-icono svg { width: 28px; height: auto; }
.tutor-pensando { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tutor-pensando .bombilla-ia { width: 32px; display: inline-flex; }
.truco-h { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--bombilla-osc); }
.truco-h svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.comprueba-h { background: var(--crema); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.comprueba-h small { font-weight: 800; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.comprueba-h summary { cursor: pointer; font-weight: 800; color: var(--azul); }
.comprueba-h details p { margin: 6px 0 0; font-weight: 700; }
.enlace-h { background: none; border: 0; color: inherit; opacity: .75; text-decoration: underline; cursor: pointer; align-self: center; font-weight: 700; padding: 8px; font-family: inherit; font-size: .95rem; }
.marcador-h { background: rgba(255,255,255,.14); border-radius: 20px; padding: 14px 26px; display: flex; flex-direction: column; align-items: center; }
.marcador-h b { font-family: var(--fuente-titulo); font-size: 2.4rem; line-height: 1; }
.enlace-crear { display: inline-flex; align-items: center; gap: 6px; color: inherit; opacity: .85; font-weight: 800; margin-top: 8px; }
.enlace-crear svg { width: 20px; height: 20px; }
.flecha-h { display: none; }
@media (min-width: 760px) and (hover: hover) {
  .flecha-h { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .15s; }
  .flecha-h:hover { background: rgba(255,255,255,.24); }
  .flecha-h svg { width: 26px; height: 26px; }
}
.entra-adelante { animation: entra-derecha .35s var(--anim); }
.entra-atras { animation: entra-izquierda .35s var(--anim); }
@keyframes entra-derecha { from { opacity: 0; transform: translateX(40px); } }
@keyframes entra-izquierda { from { opacity: 0; transform: translateX(-40px); } }
.sacudir { animation: sacudir .45s; }
@keyframes sacudir { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Pulido tras la revisión visual ---------- */
.ico-svg { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.tarjeta-cuestionario { position: relative; }
.tarjeta-cuestionario .portada .chip { background: rgba(19,32,59,.72); color: #fff; backdrop-filter: blur(4px); }
.mas-acciones { position: absolute; top: 8px; right: 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(19,32,59,.55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s; }
.mas-acciones:hover, .mas-acciones:focus-visible { background: rgba(19,32,59,.88); }
.mas-acciones svg { width: 22px; height: 22px; }
.ventajas { grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 32px) / 3)), 1fr)); }
#rejilla-plantillas { grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 32px) / 3)), 1fr)); }

/* Menú del móvil */
.boton-menu { display: none; width: 44px; height: 44px; border-radius: 14px; border: 0; background: rgba(19,32,59,.07); color: var(--tinta); cursor: pointer; place-items: center; flex: none; }
.boton-menu svg { width: 24px; height: 24px; }
.boton-menu[aria-expanded="true"] { background: var(--noche); color: var(--bombilla); }
.menu-movil { display: none; position: absolute; left: auto; right: 12px; width: min(420px, calc(100% - 24px)); top: calc(100% + 6px); background: #fff; border-radius: 20px; box-shadow: var(--sombra-3); padding: 8px; flex-direction: column; gap: 2px; z-index: 40; animation: entrar-abajo .2s var(--anim); }
.menu-movil.abierto { display: flex; }
.menu-movil > a { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.menu-movil > a:hover, .menu-movil > a.activo { background: var(--crema); }
.menu-movil > a svg { width: 22px; height: 22px; color: var(--bombilla-osc); }
.menu-movil .acciones-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 6px 4px; border-top: 1px solid var(--linea); margin-top: 6px; }
.menu-movil .acciones-menu .boton { justify-content: center; }
/* App instalable: el botón solo se ve cuando el navegador deja instalar */
.boton-instalar[hidden], .menu-instalar[hidden], .pie-instalar[hidden] { display: none !important; }
.menu-movil > .menu-instalar { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; color: var(--tinta); font: inherit; font-weight: 800; font-size: 1.05rem; background: none; border: 0; cursor: pointer; text-align: left; }
.menu-movil > .menu-instalar:hover { background: var(--crema); }
.menu-movil > .menu-instalar svg { width: 22px; height: 22px; color: var(--bombilla-osc); }
.pie-instalar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; opacity: .85; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pie-instalar:hover { opacity: 1; }
.pie-instalar svg { width: 17px; height: 17px; }
.pasos-instalar { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.paso-instalar { display: grid; grid-template-columns: 30px 26px 1fr; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--crema); }
.paso-instalar .num { width: 30px; height: 30px; border-radius: 50%; background: var(--bombilla); color: var(--tinta); font-weight: 800; display: grid; place-items: center; }
.paso-instalar svg { width: 26px; height: 26px; color: var(--azul); }
.insignias-app { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.insignia-app { display: inline-flex; align-items: center; gap: 9px; height: 48px; min-width: 152px; padding: 0 18px 0 12px; border-radius: 10px; background: #000; color: #fff; border: 1px solid #A6A6A6; cursor: pointer; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; transition: transform .18s var(--anim), box-shadow .18s; }
.insignia-app:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.insignia-app:active { transform: translateY(0); }
.insignia-app:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 3px; }
.insignia-app .logo-plataforma { flex: none; height: 26px; width: auto; }
.insignia-app .logo-plataforma.android { height: 22px; }
.insignia-app .textos { display: flex; flex-direction: column; line-height: 1.08; }
.insignia-app small { font-size: .68rem; font-weight: 500; letter-spacing: .02em; }
.insignia-app b { font-size: 1.28rem; font-weight: 600; letter-spacing: -.012em; }
@media (display-mode: standalone) { .insignias-app { display: none; } }
.instalar-con-qr { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.qr-instalar { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qr-instalar img { width: 150px; height: 150px; border-radius: 14px; background: #fff; box-shadow: var(--sombra-1); padding: 6px; }
.qr-instalar figcaption { font-size: .8rem; color: var(--tinta-2); text-align: center; max-width: 150px; }
@media (max-width: 560px) { .instalar-con-qr { grid-template-columns: 1fr; } }
/* La navegación se recoge en el menú en móviles y tabletas (en tableta no cabía en una línea). */
@media (max-width: 1080px) {
  .cabecera .nav, .cabecera .solo-escritorio { display: none !important; }
  .boton-menu { display: inline-grid; }
  .cabecera .contenedor { gap: 10px; min-height: 60px; }
  .marca { font-size: 1.5rem; }
  .marca svg { width: 34px; height: 34px; }
}

/* Portada en el móvil: tarjetas más compactas y plantillas en carrusel */
@media (max-width: 560px) {
  .ventaja { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; align-items: start; }
  .ventaja .ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .ventaja h3 { margin: 2px 0; }
  .ventaja > :not(.ico) { grid-column: 2; }
  .ventaja > .boton { justify-self: start; }
  #rejilla-plantillas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  #rejilla-plantillas::-webkit-scrollbar { display: none; }
  #rejilla-plantillas > * { flex: 0 0 82%; scroll-snap-align: center; }
}

/* Barra del editor en pantallas estrechas: solo iconos */
@media (max-width: 720px) {
  #b-ia .txt-boton, #b-ajustes .txt-boton, #b-probar .txt-boton, #b-presentar .txt-boton { display: none; }
  #b-ia, #b-ajustes, #b-probar, #b-mas, #b-presentar { padding: 0; width: 40px; min-width: 40px; justify-content: center; }
  .estado-guardado { display: none; }
  .titulo-editable { font-size: 1.05rem; padding: 4px 6px; }
}

/* ---------- Tipos sin opciones: escribir, deslizador, chincheta, nube y pregunta abierta ---------- */
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Editor */
.resp-aceptada { --c: #D6F3EE; --ct: var(--tinta); }
.resp-aceptada .forma { color: var(--turquesa-osc); }
.probador { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--crema); border: 2px dashed var(--linea-2); border-radius: var(--radio); padding: 10px 12px; }
.probador .entrada { flex: 1 1 240px; }
.probador .chip svg { width: 1em; height: 1em; }
.rejilla-deslizador { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; }
.muestra-deslizador { padding: 40px 18px 4px; background: var(--crema); border-radius: var(--radio); }
.muestra-deslizador .pista, .escala-deslizador .pista { position: relative; height: 14px; border-radius: 99px; background: linear-gradient(90deg, #FFE7B0, var(--bombilla)); box-shadow: inset 0 2px 3px rgba(19,32,59,.18); }
.pista .margen { position: absolute; top: -7px; bottom: -7px; background: rgba(34,184,167,.32); border: 2px solid var(--turquesa); border-radius: 99px; }
.pista .objetivo { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--turquesa); border: 5px solid #fff; box-shadow: 0 3px 10px rgba(19,32,59,.35); z-index: 1; }
.pista .objetivo span { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--noche); color: #fff; font-weight: 800; padding: 3px 12px; border-radius: 10px; white-space: nowrap; font-size: .95rem; }
.pista .objetivo span::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--noche); }
.muestra-deslizador .extremos, .selector-numero .extremos { display: flex; justify-content: space-between; font-weight: 800; font-size: .9rem; margin-top: 10px; }
.muestra-deslizador .extremos { color: var(--tinta-2); }
#lienzo .marco-chincheta { align-self: center; cursor: crosshair; }
.aviso-participacion { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 2px dashed var(--linea-2); border-radius: var(--radio-g); padding: 18px 20px; }
.ico-grande { width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--crema); color: var(--bombilla-osc); display: grid; place-items: center; }
.ico-grande svg { width: 60%; height: 60%; }
.grupo-botones { display: inline-flex; border-radius: 999px; box-shadow: var(--sombra-1); }
.grupo-botones .boton { border-radius: 0; box-shadow: none; }
.grupo-botones .boton:first-child { border-radius: 999px 0 0 999px; }
.grupo-botones .boton:last-child { border-radius: 0 999px 999px 0; }
.grupo-botones .boton.activo { background: var(--noche); color: #fff; }
/* Chincheta: el marco se ajusta a la imagen y todo se coloca en % de ella */
.marco-chincheta { position: relative; display: inline-block; line-height: 0; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.marco-chincheta img { display: block; max-width: 100%; max-height: 52vh; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-2); }
.marco-chincheta:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 4px; border-radius: var(--radio); }
.zona-chincheta { position: absolute; border: 3px dashed #fff; background: rgba(34,184,167,.3); box-shadow: 0 0 0 3px rgba(19,32,59,.55), 0 0 26px rgba(34,184,167,.85); cursor: move; outline: none; touch-action: none; }
.zona-chincheta.circulo, .zona-chincheta.elipse { border-radius: 50%; }
.zona-chincheta.rect { border-radius: 10px; }
.zona-chincheta:focus-visible { box-shadow: 0 0 0 3px var(--bombilla), 0 0 26px rgba(255,176,32,.95); }
.zona-chincheta .asa { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--turquesa); cursor: nwse-resize; box-shadow: var(--sombra-1); }
.zona-chincheta.ver { cursor: default; border: 3px solid #fff; background: rgba(47,211,191,.26); pointer-events: none; animation: zona-brilla 1.4s ease-in-out infinite alternate; }
@keyframes zona-brilla { from { box-shadow: 0 0 0 2px rgba(19,32,59,.6), 0 0 6px 1px rgba(47,211,191,.55); } to { box-shadow: 0 0 0 2px rgba(19,32,59,.6), 0 0 22px 6px rgba(47,211,191,.9); } }
.pin { position: absolute; width: 24px; height: 32px; transform: translate(-50%, -100%); color: var(--bombilla); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); pointer-events: none; animation: pin-cae .5s var(--anim) backwards; }
.pin svg { width: 100%; height: 100%; display: block; }
.pin.ok { color: #2FD3BF; }
.pin.ko { color: #FF7A7A; }
.pin.propio { width: 34px; height: 45px; color: var(--bombilla); z-index: 2; }
.pin.propio.ok { color: #2FD3BF; }
.pin.propio.ko { color: #FF7A7A; }
@keyframes pin-cae { from { opacity: 0; transform: translate(-50%, -170%); } }
.marco-chincheta.tam-presentador img { max-height: min(46vh, 520px); }
.marco-chincheta.tam-movil, .marco-chincheta.tam-resultado { align-self: center; }
.marco-chincheta.tam-movil img { max-height: 46vh; }
.marco-chincheta.tam-resultado img { max-height: 30vh; }
.caja-chincheta { display: flex; flex-direction: column; gap: 12px; padding: 10px 14px 16px; }
.pista-chincheta { margin: 0; text-align: center; font-weight: 800; }
/* Pantalla grande */
.consigna-movil { align-self: center; display: flex; align-items: center; gap: 14px; background: #fff; color: var(--tinta); border-radius: 999px; padding: 10px 28px 10px 12px; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.8rem); box-shadow: var(--sombra-3); animation: entrar-abajo .5s var(--anim); max-width: 100%; }
.ico-consigna { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--bombilla); color: var(--noche); display: grid; place-items: center; flex: none; animation: latido-suave 2.2s ease-in-out infinite; }
.ico-consigna svg { width: 58%; height: 58%; }
@keyframes latido-suave { 50% { transform: scale(1.08); } }
.centro-resultado { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.centro-resultado.amplio > * { width: min(100%, 1200px); max-height: 100%; }
.escala-deslizador { width: min(100%, 1100px); padding: 56px 26px 8px; }
.escala-deslizador .pista { height: 18px; }
.escala-deslizador .pista .objetivo { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.escala-deslizador .pista .objetivo span { font-size: clamp(1rem, 1.9vw, 1.6rem); padding: 4px 14px; }
.escala-deslizador .marcas { display: flex; justify-content: space-between; margin-top: 16px; font-weight: 800; color: var(--fondo-texto); font-size: clamp(.9rem, 1.4vw, 1.2rem); }
.escala-deslizador.con-resultado .marcas { margin-top: 44px; }
.escala-deslizador .histograma { display: flex; align-items: flex-end; gap: 4px; height: clamp(80px, 20vh, 230px); margin: 0 0 16px; }
.escala-deslizador .histograma i { flex: 1; height: 0; background: linear-gradient(180deg, #FFD27A, var(--bombilla)); border-radius: 8px 8px 3px 3px; transition: height 1s var(--anim); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.escala-deslizador .marca-media { position: absolute; top: calc(100% + 4px); width: 3px; height: 14px; border-radius: 2px; background: var(--fondo-texto); transform: translateX(-50%); }
.escala-deslizador .marca-media small { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; color: var(--fondo-texto); font-size: clamp(.8rem, 1.2vw, 1rem); opacity: .9; }
.ranking-textos { display: flex; flex-direction: column; gap: 10px; width: min(100%, 900px); }
.fila-texto { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.96); color: var(--tinta); border-radius: var(--radio); padding: 10px 18px; font-weight: 800; font-size: clamp(1rem, 2vw, 1.6rem); overflow: hidden; box-shadow: var(--sombra-2); animation: entrar-abajo .45s var(--anim) backwards; }
.fila-texto i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1s var(--anim); }
.fila-texto.buena i { background: rgba(34,184,167,.3); }
.fila-texto.mala i { background: rgba(255,107,107,.2); }
.fila-texto > :not(i) { position: relative; }
.fila-texto .marca { width: 1.4em; height: 1.4em; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.fila-texto.buena .marca { background: var(--turquesa-osc); }
.fila-texto.mala .marca { background: var(--coral-osc); }
.fila-texto .marca svg { width: 68%; height: 68%; }
.fila-texto .txt { flex: 1; overflow-wrap: anywhere; }
.fila-texto b { font-family: var(--fuente-titulo); font-size: 1.15em; font-variant-numeric: tabular-nums; }
.aceptadas { align-self: center; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--tinta); border-radius: var(--radio-g); padding: 12px 24px 12px 14px; font-weight: 700; font-size: clamp(1rem, 2vw, 1.6rem); box-shadow: var(--sombra-3); animation: entrar-abajo .5s var(--anim); max-width: 100%; }
.aceptadas > span:first-child { width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--turquesa-osc); color: #fff; display: grid; place-items: center; flex: none; }
.aceptadas > span:first-child svg { width: 64%; height: 64%; }
.sin-respuestas { font-family: var(--fuente-titulo); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 800; opacity: .85; margin: 0; }
.nube-palabras { position: relative; width: 100%; min-height: 240px; align-self: stretch; }
.nube-palabras .palabra { position: absolute; font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.05; white-space: nowrap; text-shadow: 0 3px 0 rgba(0,0,0,.2); animation: palabra-entra .6s var(--anim) backwards; cursor: default; }
.tema-playa .nube-palabras .palabra, .tema-papel .nube-palabras .palabra, .tema-primavera .nube-palabras .palabra { text-shadow: none; filter: brightness(.68) saturate(1.4); }
@keyframes palabra-entra { from { opacity: 0; transform: scale(.3); } }
.muro-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; align-content: start; max-height: 100%; overflow: auto; padding: 8px; }
.nota-muro { background: #FFF1BF; color: var(--tinta); border-radius: 6px 6px 20px 6px; padding: 14px 16px; font-weight: 700; font-size: clamp(.95rem, 1.5vw, 1.25rem); line-height: 1.3; box-shadow: 0 10px 20px rgba(0,0,0,.24); transform: rotate(var(--giro, 0deg)); animation: nota-entra .5s var(--anim) backwards; overflow-wrap: anywhere; }
.nota-muro.c1 { background: #D3F5EF; }
.nota-muro.c2 { background: #FFDCDC; }
.nota-muro.c3 { background: #DEE8FF; }
.nota-muro.c4 { background: #EEF8D2; }
.nota-muro.c5 { background: #FCE0F0; }
@keyframes nota-entra { from { opacity: 0; transform: translateY(24px) scale(.9); } }
/* Móvil */
.caja-escribir { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.entrada-movil { width: 100%; font: 800 1.35rem var(--fuente); color: var(--tinta); background: #fff; border: 3px solid transparent; border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-2); outline: none; resize: none; }
.entrada-movil:focus { border-color: var(--bombilla); }
.linea-pista { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: .92rem; opacity: .92; }
.contador-letras { font-variant-numeric: tabular-nums; flex: none; }
.caja-deslizador { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; }
.pantalla-valor { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.valor-deslizador { width: min(100%, 250px); text-align: center; font: 800 2.7rem var(--fuente-titulo); color: var(--tinta); background: #fff; border: 3px solid transparent; border-radius: var(--radio-g); padding: 4px 10px; box-shadow: var(--sombra-2); -moz-appearance: textfield; appearance: textfield; }
.valor-deslizador::-webkit-outer-spin-button, .valor-deslizador::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.valor-deslizador:focus { outline: none; border-color: var(--bombilla); }
.unidad-deslizador { font: 800 1.5rem var(--fuente-titulo); }
.fila-rango { display: flex; align-items: center; gap: 10px; }
.paso-rango { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--tinta); font: 800 1.9rem/1 var(--fuente-titulo); box-shadow: var(--sombra-2); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.paso-rango:active { transform: scale(.92); }
.paso-rango:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 2px; }
.rango-eureka { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; background: transparent; --relleno: 50%; cursor: pointer; }
.rango-eureka::-webkit-slider-runnable-track { height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--bombilla) var(--relleno), rgba(255,255,255,.88) var(--relleno)); box-shadow: inset 0 2px 3px rgba(19,32,59,.22); }
.rango-eureka::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -11px; border-radius: 50%; background: #fff; border: 6px solid var(--bombilla); box-shadow: 0 3px 8px rgba(0,0,0,.32); }
.rango-eureka::-moz-range-track { height: 14px; border-radius: 99px; background: rgba(255,255,255,.88); }
.rango-eureka::-moz-range-progress { height: 14px; border-radius: 99px; background: var(--bombilla); }
.rango-eureka::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 6px solid var(--bombilla); box-shadow: 0 3px 8px rgba(0,0,0,.32); }
.rango-eureka:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 4px; border-radius: 99px; }
.eco-respuesta { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; }
.eco-respuesta b { font-family: var(--fuente-titulo); font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.eco-respuesta small { opacity: .88; font-weight: 700; }
.histograma-informe { display: flex; align-items: flex-end; gap: 3px; height: 90px; background: var(--crema); border-radius: var(--radio); padding: 8px 10px 0; }
.histograma-informe i { flex: 1; background: var(--bombilla); border-radius: 5px 5px 0 0; min-height: 0; }
.marco-chincheta.tam-informe img { max-height: 280px; }
.lista-abiertas { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.selector-numero { display: flex; flex-direction: column; gap: 14px; }
.caja-deslizador.practica { background: var(--noche); color: #fff; border-radius: var(--radio-g); }
.movil .pie-jugador { margin-top: auto; }
/* ---------- Galería de imágenes y selector de archivos ---------- */
.nota-galeria { grid-column: 1 / -1; margin: 0; }
.aviso-busqueda:empty { display: none; }
.aviso-busqueda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .92rem; background: var(--crema); border-radius: var(--radio); padding: 8px 12px; }
.aviso-busqueda > svg { width: 18px; height: 18px; color: var(--bombilla-osc); }
.enlace { background: none; border: 0; padding: 0; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; font-weight: 700; }
.enlace:hover { color: var(--tinta); }
.galeria-imagenes button { transition: opacity .35s ease, transform .35s var(--anim); }
.galeria-imagenes button.por-cargar { opacity: 0; transform: scale(.94); }
.galeria-imagenes button.emoji { background: #fff; box-shadow: inset 0 0 0 2px var(--crema-2); }
.galeria-imagenes button.emoji img { object-fit: contain; padding: 10px; }
.centinela-galeria { grid-column: 1 / -1; height: 1px; }
.selector-archivo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px dashed var(--linea-2); border-radius: var(--radio-g); background: var(--papel); padding: 16px 18px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.selector-archivo:hover, .selector-archivo:focus-visible { border-color: var(--bombilla); background: #FFFBF2; outline: none; }
.selector-archivo.arrastre { border-color: var(--turquesa); background: #EEFBF8; transform: scale(1.01); }
.selector-archivo.ocupado { opacity: .7; pointer-events: none; }
.ico-archivo { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--crema); color: var(--bombilla-osc); display: grid; place-items: center; }
.ico-archivo svg { width: 58%; height: 58%; }
.textos-archivo { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.textos-archivo small { color: var(--tinta-2); font-weight: 600; }
.estado-archivo { font-size: .85rem; color: var(--tinta-3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-archivo .boton { pointer-events: none; }
.logo-propio { height: 36px; max-width: 170px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px 8px; box-shadow: var(--sombra-1); }
.logo-sala { max-height: 76px; max-width: min(240px, 60vw); object-fit: contain; background: #fff; border-radius: 14px; padding: 6px 12px; box-shadow: var(--sombra-2); align-self: center; }
/* ---------- Panel de administración ampliado ---------- */
.pestanas-admin { overflow-x: auto; scrollbar-width: thin; flex-wrap: wrap; row-gap: 2px; }
.pestanas-admin button { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.pestanas.secundarias { margin-bottom: 14px; }
.pestanas.secundarias button { font-size: .95rem; }
.fila-clic { cursor: pointer; }
.fila-clic:hover td, .fila-clic:focus-visible td { background: var(--crema); }
.fila-clic:focus-visible { outline: 3px solid var(--bombilla); outline-offset: -3px; }
.orden-tabla { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.orden-tabla:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 2px; border-radius: 4px; }
.credenciales { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; background: var(--crema); border-radius: var(--radio); padding: 14px 18px; }
.credenciales span { color: var(--tinta-2); font-weight: 700; }
.credenciales b { font-size: 1.15rem; overflow-wrap: anywhere; }
.rejilla-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px 14px; }
.ficha-usuario .kpis { margin: 0; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .02em; }
/* ---------- Cuenta: contraseña provisional y recuperación ---------- */
.aviso-provisional { background: #FFF4D6; border-top: 1px solid #F3DCA0; color: var(--tinta); }
.aviso-provisional .contenedor { padding-top: 8px; padding-bottom: 8px; gap: 10px; font-weight: 700; }
.aviso-provisional svg { width: 20px; height: 20px; color: var(--bombilla-osc); }
.tarjeta.destacada { border: 2px solid var(--bombilla); box-shadow: 0 0 0 5px rgba(255,176,32,.18), var(--sombra-2); }
.codigo-recuperacion { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: clamp(1.2rem, 4.6vw, 1.7rem); font-weight: 800; letter-spacing: .08em; text-align: center; background: var(--crema); border: 2px dashed var(--linea-2); border-radius: var(--radio); padding: 16px 10px; overflow-wrap: anywhere; user-select: all; }
/* ---------- Páginas legales ---------- */
.texto-legal { max-width: 780px; }
.texto-legal h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.texto-legal h2 { font-size: 1.35rem; margin-top: 1.6em; }
.texto-legal .entradilla { font-size: 1.15rem; color: var(--tinta-2); }
.texto-legal li { margin-bottom: .45em; }
.pie-sitio a { color: inherit; opacity: .85; }
.pie-sitio a:hover { opacity: 1; }
/* Respuestas largas en el móvil: una columna, texto a la izquierda y letra ajustada */
.botonera.largo { grid-template-columns: 1fr; grid-auto-rows: minmax(64px, auto); }
.botonera.largo .boton-respuesta { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; min-height: 64px; padding: 10px 14px; font-size: 1.05rem; line-height: 1.25; }
.botonera.largo .boton-respuesta .forma { width: 2.1rem; height: 2.1rem; flex: none; }
.botonera.largo .boton-respuesta .img-resp { max-height: 56px; width: auto; flex: none; }
.botonera.muy-largo .boton-respuesta { font-size: .95rem; }
/* Móvil pequeño con mucho texto: se encoge por pasos hasta que cabe todo (lo decide jugar.js, nunca por debajo de ~13 px). */
.apretado .texto-pregunta { font-size: 1.08rem; padding: 10px 14px; margin-top: 8px; }
.apretado .botonera { gap: 8px; padding: 8px 12px 10px; }
.apretado .boton-respuesta { min-height: 64px; }
.apretado .botonera.largo { grid-auto-rows: minmax(50px, auto); }
.apretado .botonera.largo .boton-respuesta { min-height: 50px; padding: 7px 12px; font-size: .92rem; gap: 10px; }
.apretado .botonera.largo .boton-respuesta .forma { width: 1.6rem; height: 1.6rem; }
.muy-apretado .cab-pregunta { padding-top: 8px; }
.muy-apretado .texto-pregunta { font-size: .96rem; line-height: 1.15; padding: 8px 12px; }
.muy-apretado .botonera { gap: 6px; padding: 6px 10px 8px; }
.muy-apretado .boton-respuesta { min-height: 52px; }
.muy-apretado .botonera.largo { grid-auto-rows: minmax(42px, auto); }
.muy-apretado .botonera.largo .boton-respuesta { min-height: 42px; padding: 5px 10px; font-size: .86rem; line-height: 1.18; gap: 8px; }
.muy-apretado .botonera.largo .boton-respuesta .forma { width: 1.4rem; height: 1.4rem; }
.minimo .texto-pregunta { font-size: .88rem; }
.minimo .botonera.largo .boton-respuesta { font-size: .8rem; min-height: 38px; padding: 4px 9px; }
.minimo .botonera.largo .boton-respuesta .forma { width: 1.2rem; height: 1.2rem; }
.minimo .pie-jugador { padding: 6px 12px; }
.pista .objetivo.opinion { background: var(--bombilla); }
.tipos-mini { display: inline-flex; gap: 3px; color: var(--tinta-3); }
.tipos-mini svg { width: 15px; height: 15px; }
/* Respuestas que son solo una imagen: centrada y grande, con la forma de color a un lado */
.rejilla-respuestas .respuesta.solo-imagen { justify-content: center; padding-left: 64px; }
.rejilla-respuestas .respuesta.solo-imagen .forma { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.rejilla-respuestas .respuesta.solo-imagen img.img-resp { max-height: calc(100% - 4px); height: clamp(60px, 13vh, 130px); width: auto; }
/* La imagen de la pregunta se encoge con la pantalla para que las respuestas y los botones quepan siempre */
.zona-central .media-pregunta img { max-height: min(42vh, calc(100vh - 500px)); min-height: 120px; }
.zona-central .marco-chincheta.tam-presentador img { max-height: min(46vh, calc(100vh - 380px)); }
.boton.solo-icono { padding-left: 11px; padding-right: 11px; }
.boton.solo-icono svg { margin: 0; }
.rejilla-respuestas .respuesta.solo-imagen .txt { display: none; }

/* ---------- Asistente de IA ---------- */
.boton-ia-cabecera { --b: #FFF3D6; --bb: #F2C46B; }
.boton-ia-cabecera .ico-svg { color: var(--bombilla-osc); }
.boton.boton-ia { width: 100%; --b: linear-gradient(135deg, #FFF3D6, #E8FBF7); --bb: #F2C46B; background: linear-gradient(135deg, #FFF3D6, #E8FBF7); }
.boton.boton-ia .ico-svg { color: var(--bombilla-osc); }
.espera-ia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 4px; text-align: center; }
.espera-ia .bombilla-ia svg { width: 100%; height: 100%; display: block; }
.espera-ia .bombilla-ia { display: block; width: 112px; height: 112px; animation: flotar 2s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(255,176,32,.35)); }
.espera-ia .frase-ia { font-weight: 800; margin: 6px 0 0; min-height: 1.5em; }
.espera-ia .cargando { margin: 10px auto 4px; }
.acciones-ia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.accion-ia { display: flex; gap: 12px; align-items: flex-start; text-align: left; text-decoration: none; padding: 14px; border-radius: var(--radio); border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); font: inherit; cursor: pointer; transition: transform .15s var(--anim), border-color .15s, box-shadow .15s; }
.accion-ia:hover:not(:disabled), .accion-ia:focus-visible { transform: translateY(-2px); border-color: var(--bombilla); box-shadow: 0 6px 0 rgba(224,142,0,.18); }
.accion-ia:disabled { opacity: .55; cursor: not-allowed; }
.accion-ia .icono-ia { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #FFF3D6, #FFE2A8); color: var(--bombilla-osc); }
.accion-ia .icono-ia svg { width: 24px; height: 24px; }
.accion-ia b { font-size: 1rem; }
.accion-ia small { color: var(--tinta-2); font-weight: 600; line-height: 1.35; }
.antes-despues { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 640px) { .antes-despues { grid-template-columns: 1fr; } }
.tarjeta-ia { border: 2px solid var(--linea); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--papel); min-width: 0; }
.tarjeta-ia.nueva { border-color: #F2C46B; background: #FFFBF1; }
.etiqueta-ia { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.etiqueta-ia .ico-svg { width: 15px; height: 15px; }
.tarjeta-ia.nueva .etiqueta-ia { color: var(--bombilla-osc); }
.texto-ia { font-weight: 800; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.resp-ia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.resp-ia li { padding: 6px 10px; border-radius: var(--radio-p); background: var(--crema); font-weight: 700; display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.resp-ia li .ico-svg { width: 16px; height: 16px; flex: none; }
.resp-ia li.ok { background: #DDF6EE; color: #0B6B4F; }
.resp-ia .punto-ia { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); flex: none; margin: 0 4px; }
.explicacion-ia { display: flex; gap: 6px; align-items: flex-start; font-size: .875rem; color: var(--tinta-2); }
.explicacion-ia .ico-svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--bombilla-osc); }
.lista-ia { display: flex; flex-direction: column; gap: 10px; max-height: min(56vh, 620px); overflow: auto; padding: 2px 4px 2px 2px; }
/* Revisión con IA: la nota y cada problema con su gravedad */
.nota-revision { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: var(--radio); background: linear-gradient(135deg, #FFF8EA, #F1FBF8); }
.nota-circulo { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; align-content: center; flex: none; color: #fff; box-shadow: var(--sombra-1); }
.nota-circulo b { font-family: var(--fuente-titulo); font-size: 1.9rem; line-height: 1; }
.nota-circulo small { font-weight: 800; opacity: .9; font-size: .75rem; }
.nota-circulo.alta { background: var(--turquesa-osc); }
.nota-circulo.media { background: var(--bombilla-osc); }
.nota-circulo.baja { background: var(--coral-osc); }
.chip.gravedad-error { background: #FDE2E2; color: #B42318; }
.chip.gravedad-aviso { background: #FFF3D6; color: #8A5A00; }
.chip.gravedad-idea { background: #E0F2FE; color: #1D4ED8; }
.hallazgo-ia { border-left-width: 6px; }
.hallazgo-ia.error { border-left-color: var(--coral); }
.hallazgo-ia.aviso { border-left-color: var(--bombilla); }
.hallazgo-ia.idea { border-left-color: var(--azul); }
.tarjeta-ia.quitada { border-color: #F3B8B3; background: #FFF5F4; }
.tarjeta-ia.quitada .texto-ia { text-decoration: line-through; color: var(--tinta-2); }
.ideas-ia { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-idea { border: 1px solid var(--linea-2); background: var(--papel); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; }
.chip-idea:hover, .chip-idea:focus-visible { background: var(--crema); border-color: var(--bombilla); }
/* Corrección con IA en el informe */
.correccion-ia { border: 2px solid #F2DDB0; background: linear-gradient(135deg, #FFFBF1, #F1FBF8); border-radius: var(--radio); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.correccion-ia .icono-ia { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #FFF3D6, #FFE2A8); color: var(--bombilla-osc); }
.correccion-ia .icono-ia svg { width: 18px; height: 18px; }
.errores-ia { margin: 0; padding-left: 20px; }
.respuesta-corregida { align-items: center; }
.respuesta-corregida > .chip { flex: none; min-width: 104px; justify-content: center; }
@media print { .correccion-ia { break-inside: avoid; background: none; } }
/* Curso con IA */
.lecciones-ia { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 560px); overflow: auto; }
.detalle-leccion summary { cursor: pointer; font-weight: 700; color: var(--azul); font-size: .9rem; }
.detalle-leccion ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.propuesta-ia { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 2px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.propuesta-ia > input[type=checkbox] { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--turquesa-osc); }
.propuesta-ia:has(> input:not(:checked)) { opacity: .6; }
.diapo-ia { border-radius: var(--radio); padding: 14px 16px; background: var(--noche); color: #fff; display: flex; flex-direction: column; gap: 6px; white-space: pre-line; }
.diapo-ia b { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--bombilla-claro); }
.aviso-ia { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio); background: #FFF1F1; color: #8A1F1F; font-weight: 700; }
.aviso-ia .ico-svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.hecho-ia { display: flex; gap: 14px; align-items: center; padding: 6px 0; }
.hecho-ia .sello-ia { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #DDF6EE, #E8FBF7); color: var(--turquesa-osc); }
.hecho-ia .sello-ia svg { width: 30px; height: 30px; }
.resumen-ia { font-size: 1.08rem; font-weight: 700; line-height: 1.45; margin: 0; }
.temas-ia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tema-ia { --c: var(--bombilla); border-radius: var(--radio); padding: 12px 14px; background: var(--crema); border-left: 6px solid var(--c); display: flex; flex-direction: column; gap: 6px; }
.tema-ia.c1 { --c: var(--turquesa); } .tema-ia.c2 { --c: var(--coral); } .tema-ia.c3 { --c: var(--azul); } .tema-ia.c4 { --c: var(--rosa); } .tema-ia.c5 { --c: var(--lima); }
.barra-tema { height: 8px; border-radius: 999px; background: rgba(19,32,59,.08); overflow: hidden; }
.barra-tema i { display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; animation: crecer-barra .8s var(--anim) both; }
@keyframes crecer-barra { from { transform: scaleX(0); } }
.destacadas-ia { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.analisis-ia { display: flex; flex-direction: column; gap: 14px; background: linear-gradient(135deg, #FFFBF1, #F1FBF8); border: 2px solid #F2DDB0; }
.analisis-ia .icono-ia { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #FFF3D6, #FFE2A8); color: var(--bombilla-osc); }
.analisis-ia .icono-ia svg { width: 26px; height: 26px; }
.rejilla-analisis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bloque-ia { background: var(--papel); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-1); }
.bloque-ia h4 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; font-size: 1rem; }
.bloque-ia h4 .ico-svg { width: 20px; height: 20px; color: var(--turquesa-osc); }
.bloque-ia ul, .bloque-ia ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.bloque-ia li { line-height: 1.4; }
.idea-ia { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; font-size: .9rem; color: var(--tinta-2); }
.idea-ia .ico-svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--bombilla-osc); }
@media print { .analisis-ia { break-inside: avoid; background: none; } }
.ver-mas-plantillas { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 4px; }
/* Editor en el móvil: el título en su propia línea, a todo lo ancho. */
@media (max-width: 480px) {
  .cabecera .contenedor:has(> .titulo-editable) { flex-wrap: wrap; row-gap: 4px; gap: 8px; padding-bottom: 8px; }
  .cabecera .titulo-editable { order: 10; flex: 1 1 100%; max-width: none; }
}

/* ---------- Modos confianza y supervivencia ---------- */
.vidas { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.vidas .vida { display: inline-flex; color: currentColor; opacity: .28; }
.vidas .vida svg { width: 1.15em; height: 1.15em; }
.vidas .vida.llena { color: #FF4D6D; opacity: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); animation: latido 1.6s ease-in-out infinite; }
.vidas .vida.llena:nth-child(2) { animation-delay: .15s; } .vidas .vida.llena:nth-child(3) { animation-delay: .3s; }
@keyframes latido { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .vidas .vida.llena { animation: none; } }
.fila-marcador .vidas { font-size: .8em; }
.fila-marcador.eliminado { opacity: .62; background: rgba(255,255,255,.75); }
.fila-marcador .fuera { font-size: .62em; background: var(--noche); color: #fff; padding: 3px 10px; border-radius: 999px; }
.chips-modo { justify-content: center; gap: 8px; }
.chips-modo .chip { font-size: clamp(.85rem, 1.2vw, 1.05rem); }
.explicacion-modo ul { margin: 6px 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.explicacion-modo .vidas { color: var(--tinta); }
.apuesta { margin: 10px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.apuesta-titulo { font-weight: 800; font-size: .95rem; }
.selector-confianza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.selector-confianza .nivel { border: 3px solid transparent; border-radius: var(--radio); padding: 8px 6px; background: rgba(255,255,255,.92); color: var(--tinta); display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; cursor: pointer; transition: transform .12s var(--anim), border-color .12s, box-shadow .12s; }
.selector-confianza .nivel b { font-size: .95rem; line-height: 1.15; }
.selector-confianza .nivel small { font-size: .74rem; font-weight: 700; color: var(--tinta-2); }
.selector-confianza .nivel.on { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.selector-confianza .nivel-1.on { border-color: #9AA6BD; background: #EEF2F8; }
.selector-confianza .nivel-2.on { border-color: var(--bombilla); background: #FFF3D6; }
.selector-confianza .nivel-3.on { border-color: var(--coral); background: #FFE4E4; }
.chip-apuesta { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 999px; font-weight: 700; background: rgba(255,255,255,.92); color: var(--tinta); }
.chip-apuesta.nivel-2 b { color: var(--bombilla-osc); } .chip-apuesta.nivel-3 b { color: var(--coral-osc); }
.puntos-ganados.negativos { background: rgba(0,0,0,.32); }
.aviso-vidas { display: inline-flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.22); font-weight: 800; }
.aviso-vidas.bien { background: rgba(255,255,255,.18); }
.aviso-vidas.fuera { background: var(--noche); color: #fff; }
.movil .pie-jugador .vidas { font-size: 1rem; }
.contraste .selector-confianza .nivel, .contraste .chip-apuesta { border-color: #000; }

/* ---------- Tienda ---------- */
.tarjeta-tienda .portada .precio { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--bombilla); color: var(--noche); font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.05rem; padding: 3px 12px; border-radius: 999px; box-shadow: 0 3px 0 var(--bombilla-osc); }
.tarjeta-tienda .portada .precio.gratis, .precio-grande.gratis { background: var(--turquesa); color: #fff; box-shadow: 0 3px 0 var(--turquesa-osc); }
.tarjeta-tienda .descripcion { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-tienda .meta .ico-svg { width: 14px; height: 14px; vertical-align: -2px; }
.cabeza-detalle { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .cabeza-detalle { grid-template-columns: 1fr; } }
.portada-detalle .portada { height: 150px; border-radius: var(--radio); overflow: hidden; position: relative; display: grid; place-items: center; }
.portada-detalle .portada img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.portada-detalle .portada .chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(19,32,59,.72); color: #fff; }
.portada-detalle .portada .deco { width: 64px; height: 64px; display: block; }
.muestra-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.pregunta-muestra { border: 2px solid var(--linea); border-radius: var(--radio); padding: 12px; background: var(--papel); display: flex; flex-direction: column; gap: 6px; }
.pregunta-muestra .texto-muestra { font-weight: 800; line-height: 1.3; }
.pregunta-muestra .img-muestra { max-height: 110px; width: 100%; object-fit: cover; border-radius: var(--radio-p); }
.resp-muestra { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.resp-muestra li { background: var(--crema); border-radius: var(--radio-p); padding: 5px 10px; font-weight: 700; font-size: .9rem; }
.zona-compra { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px; border-radius: var(--radio); background: linear-gradient(135deg, #FFF8EA, #F1FBF8); border: 2px solid var(--linea); }
.precio-grande { font-family: var(--fuente-titulo); font-weight: 800; font-size: 2rem; background: var(--bombilla); color: var(--noche); padding: 4px 18px; border-radius: 999px; box-shadow: 0 4px 0 var(--bombilla-osc); }
.formas-pago { gap: 8px; flex: 1; min-width: min(100%, 260px); }
.formas-pago .boton { width: 100%; }
.pedido-pendiente { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: min(100%, 280px); }
.pedido-pendiente .importe { font-family: var(--fuente-titulo); font-size: 1.4rem; }
.referencia { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--noche); color: #fff; border-radius: var(--radio); padding: 10px 14px; }
.referencia small { display: block; opacity: .8; font-weight: 700; }
.referencia b { font-family: var(--fuente-titulo); font-size: 1.6rem; letter-spacing: .08em; }
.mini-portada { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.linea-compra { gap: 14px; padding: 12px 14px; }
@media (max-width: 640px) { .linea-compra { flex-wrap: wrap; } .linea-compra > .fila { width: 100%; } }
.fuentes-ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fuentes-ia button { border: 2px solid var(--linea); border-radius: var(--radio); background: var(--papel); padding: 8px 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; color: var(--tinta); }
.fuentes-ia button small { color: var(--tinta-2); font-weight: 600; font-size: .78rem; }
.fuentes-ia button.on { border-color: var(--bombilla); background: #FFF3D6; }
.carpetas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; }
.chip-carpeta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.chip-carpeta .ico-svg { width: 16px; height: 16px; color: var(--bombilla-osc); }
.chip-carpeta .cuantos { background: var(--crema-2); border-radius: 999px; padding: 0 8px; font-size: .78rem; }
.chip-carpeta.on { border-color: var(--bombilla); background: #FFF3D6; }

/* ---------- Accesorios de la bombilla, logros y premios del mundo de la clase ---------- */
.selector-estilo { width: min(440px, 100%); background: rgba(255,255,255,.1); border-radius: var(--radio-g); padding: 10px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.cab-estilo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; }
.chip-temporada { display: inline-flex; align-items: center; gap: 4px; background: var(--bombilla); color: var(--tinta); border-radius: 999px; padding: 2px 10px 2px 6px; font-size: .78rem; font-weight: 800; }
.chip-temporada svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.tira-estilo { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tira-estilo::-webkit-scrollbar { display: none; }
.opcion-estilo { position: relative; flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; border-radius: 16px; border: 2px solid transparent; background: rgba(255,255,255,.12); color: inherit; font: inherit; cursor: pointer; scroll-snap-align: center; transition: transform .15s var(--anim), background .15s; }
.opcion-estilo:active { transform: scale(.92); }
.opcion-estilo .mini { width: 52px; height: 52px; display: block; }
.opcion-estilo .mini svg { width: 100%; height: 100%; }
.opcion-estilo small { font-size: .68rem; font-weight: 800; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcion-estilo.on { background: #fff; color: var(--tinta); border-color: var(--bombilla); box-shadow: 0 0 0 3px rgba(255,176,32,.35); }
.opcion-estilo.de-temporada::after { content: ''; position: absolute; top: 5px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bombilla); box-shadow: 0 0 0 2px rgba(19,32,59,.5); }
.opcion-estilo.bloqueado .mini { opacity: .38; filter: grayscale(.85); }
.opcion-estilo .candado { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); display: grid; place-items: center; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.opcion-estilo .candado svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 2.2; }
.logros-final { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(420px, 100%); }
.lista-logros { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.logro { display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(255,255,255,.12); border-radius: 16px; padding: 8px 14px 8px 8px; animation: logro-entra .6s var(--anim) both; }
.logro .insignia-logro { width: 46px; height: 46px; flex: 0 0 auto; display: block; }
.logro b { display: block; font-family: var(--fuente-titulo); font-size: 1.05rem; line-height: 1.1; }
.logro small { display: block; opacity: .9; font-weight: 700; line-height: 1.25; }
@keyframes logro-entra { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.logros-podio { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.logro-mini { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.92); color: var(--tinta); border-radius: 999px; padding: 2px 9px 2px 3px; font-size: clamp(.68rem, 1vw, .85rem); font-weight: 800; white-space: nowrap; }
.logro-mini .insignia-logro { width: 20px; height: 20px; display: block; }
.premios-mundo { display: flex; flex-direction: column; gap: 12px; }
.premios-mundo h3 svg { width: 20px; height: 20px; vertical-align: -3px; fill: var(--bombilla); stroke: none; }
.rejilla-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.premio { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: var(--crema); border: 2px solid var(--linea); border-radius: var(--radio); padding: 10px 8px; }
.premio.ganado { background: #FFF6E0; border-color: var(--bombilla-claro); }
.premio .premio-bombilla { width: 64px; height: 64px; display: block; }
.premio .premio-bombilla svg { width: 100%; height: 100%; }
.premio:not(.ganado) .premio-bombilla { opacity: .4; filter: grayscale(.9); }
.premio .candado { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); padding: 5px; display: grid; place-items: center; }
.premio .candado svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 2.2; }
.premio b { font-size: .9rem; line-height: 1.15; }
.premio small { color: var(--tinta-2); font-weight: 700; font-size: .78rem; }
.premio.ganado small { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .logro { animation: none; } }

/* ---------- Cursos: página pública, camino, lecciones y diploma ---------- */
.cuerpo-curso { background: var(--crema); }
.pagina-curso { width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 36px; }
.barra-curso { display: flex; align-items: center; padding: 16px 0; }
.marca-curso { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); text-decoration: none; font-family: var(--fuente-titulo); font-size: 1.4rem; }
.marca-curso svg { display: block; }
.portada-curso { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--noche); color: #fff; border-radius: 28px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--sombra-3); position: relative; overflow: hidden; }
.portada-curso::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,176,32,.22), transparent 70%); pointer-events: none; }
.portada-curso.sola { grid-template-columns: 1fr; }
.texto-portada { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; }
.texto-portada h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 0; line-height: 1.05; }
.texto-portada .lead { font-size: 1.08rem; opacity: .92; margin: 0; max-width: 560px; white-space: pre-line; }
.autor-curso { margin: 0; font-weight: 800; color: var(--bombilla-claro); }
.progreso-curso { display: flex; align-items: center; gap: 12px; width: min(420px, 100%); }
.progreso-curso .barra-progreso { flex: 1; height: 12px; background: rgba(255,255,255,.16); }
.progreso-curso .barra-progreso i { background: var(--bombilla); transition: width .8s var(--anim); }
.progreso-curso b { white-space: nowrap; font-family: var(--fuente-titulo); font-size: 1.1rem; }
.portada-curso .boton.enorme { font-size: 1.25rem; min-height: 60px; padding: .55em 1.4em; margin-top: 6px; }
.ilustracion-curso { position: relative; }
.ilustracion-curso > svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 28px rgba(0,0,0,.25)); }
.ilustracion-curso .latido { transform-box: fill-box; transform-origin: center; animation: latido-curso 1.8s ease-in-out infinite; }
.ilustracion-curso .tramo-hecho { animation: tramo-curso 1.4s var(--anim) both; }
.ilustracion-curso .mascota-curso { animation: flotar 3s ease-in-out infinite; }
@keyframes latido-curso { 0%, 100% { transform: scale(.85); opacity: .25; } 50% { transform: scale(1.25); opacity: .5; } }
@keyframes tramo-curso { from { stroke-dashoffset: 100; } }
.titulo-lecciones { margin: 30px 0 12px; font-size: 1.5rem; }
.lecciones-curso { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.lecciones-curso::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: var(--linea); }
.leccion-curso { position: relative; display: flex; align-items: center; gap: 16px; background: #fff; border-radius: var(--radio-g); padding: 14px 16px 14px 10px; box-shadow: var(--sombra-1); border: 2px solid transparent; }
.leccion-curso.siguiente { border-color: var(--bombilla); box-shadow: 0 0 0 4px rgba(255,176,32,.18), var(--sombra-2); }
.leccion-curso .numero { flex: 0 0 auto; width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 800; background: var(--crema-2); color: var(--tinta-2); position: relative; z-index: 1; box-shadow: 0 0 0 5px #fff; }
.leccion-curso.siguiente .numero { background: var(--bombilla); color: var(--noche); }
.leccion-curso.hecha .numero { background: var(--turquesa); color: #fff; }
.leccion-curso .numero svg { width: 20px; height: 20px; stroke-width: 3; }
.portada-leccion { width: 76px; height: 56px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; background: var(--crema-2); }
.texto-leccion { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.texto-leccion h3 { margin: 0; font-size: 1.15rem; }
.texto-leccion p { margin: 0; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.texto-leccion small { color: var(--tinta-3); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.texto-leccion small .chip { font-size: .72rem; padding: .1em .6em; }
.leccion-curso .boton { flex: 0 0 auto; }
.fin-curso { margin-top: 22px; display: flex; align-items: center; gap: 22px; background: linear-gradient(135deg, #FFF3D6, #FFE2A3); border-radius: 28px; padding: 22px 28px; box-shadow: var(--sombra-2); }
.fin-curso .bombilla-viva { width: 120px; height: 120px; flex: 0 0 auto; }
.fin-curso h2 { margin: 0 0 4px; font-size: 1.8rem; }
.fin-curso p { margin: 0 0 12px; color: var(--tinta-2); }
@media (max-width: 760px) {
  .portada-curso { grid-template-columns: 1fr; }
  .ilustracion-curso { order: -1; }
  .leccion-curso { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding: 14px 14px 14px 10px; }
  .portada-leccion { display: none; }
  .leccion-curso .boton { grid-column: 2; justify-self: start; }
  .fin-curso { flex-direction: column; text-align: center; }
}
/* Cabecera de una historia que es lección de un curso */
.chip-curso { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; background: rgba(255,255,255,.16); color: inherit; text-decoration: none; border-radius: 999px; padding: 3px 10px 3px 8px; font-weight: 800; font-size: .82rem; }
.chip-curso svg { width: 15px; height: 15px; }
.boton-siguiente { white-space: normal; text-align: left; justify-content: space-between; padding-top: .55em; padding-bottom: .55em; }
.boton-siguiente .dos-lineas { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.boton-siguiente small { font-size: .82rem; font-weight: 700; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.borrar-curso { margin-left: auto; color: var(--tinta-3); width: 36px; min-height: 36px; }
.borrar-curso:hover { color: var(--ko); }
/* Diploma: se ve en la ventana y es lo único que sale al imprimir */
.diploma { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--sombra-2); }
.diploma-marco { position: relative; border: 3px solid var(--bombilla); outline: 1.5px solid var(--bombilla); outline-offset: -10px; border-radius: 12px; padding: 30px 28px 26px; text-align: center; background: radial-gradient(circle at 50% 0%, #FFF8EA, #fff 62%); }
.diploma-cabeza { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--tinta); }
.diploma-tipo { margin: 6px 0 0; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: .08em; text-transform: uppercase; color: var(--bombilla-osc); }
.diploma-texto { margin: 6px 0 0; color: var(--tinta-2); font-weight: 700; }
.diploma-nombre { margin: 6px auto 0; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.7rem, 4.4vw, 2.5rem); color: var(--tinta); border-bottom: 2px dashed var(--linea-2); padding: 0 18px 4px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.diploma-curso { margin: 6px 0 0; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.35rem; color: var(--noche-3); }
.diploma-datos { margin: 6px 0 0; color: var(--tinta-3); font-weight: 700; }
.diploma-pie { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; text-align: left; }
.diploma-pie b { display: block; }
.diploma-pie small { color: var(--tinta-3); font-weight: 700; }
.diploma-mascota svg { width: 58px; height: 58px; display: block; }
.diploma-sello { position: absolute; right: 22px; top: 20px; width: 72px; height: 72px; transform: rotate(-12deg); }
.diploma-sello svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) { .diploma-sello { width: 46px; height: 46px; right: 14px; top: 14px; } .diploma-marco { padding: 26px 18px 22px; } }
@media print {
  body.imprimir-diploma * { visibility: hidden !important; }
  body.imprimir-diploma .diploma, body.imprimir-diploma .diploma * { visibility: visible !important; }
  body.imprimir-diploma .diploma { position: fixed; inset: 0; margin: auto; width: 100%; height: fit-content; box-shadow: none; padding: 0; }
  body.imprimir-diploma .fondo-modal { background: none !important; }
  body.imprimir-diploma .diploma-marco { -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 56px 48px; }
  @page { size: A4 landscape; margin: 14mm; }
}
/* Cursos en «Mis cuestionarios» */
.cab-cursos { justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.rejilla-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.tarjeta-curso { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.descripcion-curso { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-curso .kpi { padding: 10px 14px; background: var(--crema); box-shadow: none; }
.embudo-curso { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.embudo-curso li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 34px; align-items: center; gap: 8px; font-size: .86rem; }
.embudo-curso .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.embudo-curso .barra-progreso { height: 8px; min-width: 0; }
.embudo-curso b { text-align: right; font-variant-numeric: tabular-nums; }
.aviso-curso { margin: 0; background: #FDE2E2; color: var(--ko); border-radius: var(--radio-p); padding: 8px 12px; font-weight: 700; }
.editor-curso { gap: 14px; }
.lecciones-elegidas { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; background: var(--crema); border-radius: var(--radio); min-height: 52px; }
.lecciones-elegidas li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 6px 6px 6px 8px; box-shadow: var(--sombra-1); font-weight: 700; }
.lecciones-elegidas li.vacia { background: none; box-shadow: none; color: var(--tinta-3); font-weight: 600; justify-content: center; text-align: center; padding: 10px; }
.lecciones-elegidas .numero { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bombilla); color: var(--noche); font-family: var(--fuente-titulo); font-weight: 800; font-size: .85rem; flex: 0 0 auto; }
.lecciones-elegidas .espacio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-disponibles { display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow: auto; padding-right: 2px; }
.disponible { display: flex; align-items: center; gap: 8px; text-align: left; border: 1.5px dashed var(--linea-2); background: #fff; border-radius: 12px; padding: 8px 10px; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; }
.disponible:hover { border-color: var(--bombilla); background: #FFF8EA; }
.disponible svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--bombilla-osc); }
.disponible .espacio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disponible small { color: var(--tinta-3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ilustracion-curso .latido, .ilustracion-curso .tramo-hecho, .ilustracion-curso .mascota-curso { animation: none; } }

/* Sin saltos al cargar: huecos con su tamaño final para lo que pinta JavaScript. */
[data-ico]:empty { display: inline-block; width: 1.2em; height: 1.2em; flex: none; }
#filtros-plantillas:empty, #pestanas:empty, #categorias:empty { min-height: 48px; }
#rejilla-plantillas:has(> .cargando) { min-height: 380px; }
main:has(+ #pie) { min-height: calc(100vh - 60px); }
/* Páginas que se montan con JavaScript: se enseñan ya colocadas, con un indicador mientras tanto. */
main.montando, body.montando > header, body.montando > main { visibility: hidden; }
main.montando { position: relative; }
body.montando { position: relative; min-height: 100vh; }
main.montando::after, body.montando::after { content: ""; visibility: visible; position: absolute; left: calc(50% - 22px); top: 140px; width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(255,176,32,.25); border-top-color: var(--bombilla); animation: girar .9s linear infinite; }