:root{
  --navy:#0b1f3a; --navy-2:#132d52; --azul:#1e6fd9; --azul-2:#e8f1fd; --naranja:#ff8a1f; --naranja-2:#fff1e3;
  --fondo:#f5f7fb; --tarjeta:#ffffff; --tinta:#14213d; --tinta-2:#4b5a73; --linea:#d9e1ee; --ok:#1f9d55; --mal:#d64545;
  --pizarra:#10291f; --pizarra-borde:#5b3a1e; --r:14px; --sombra:0 6px 24px rgba(11,31,58,.08);
  --tiza:"Chalkboard SE","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
}
@media (prefers-color-scheme:dark){
  :root{ --fondo:#0a1424; --tarjeta:#11203a; --tinta:#e7edf7; --tinta-2:#a5b3c9; --linea:#22355a; --azul-2:#13294a; --naranja-2:#2f2112; --sombra:0 6px 24px rgba(0,0,0,.35) }
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--tinta);min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:20px 16px 40px;outline:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(26px,4vw,38px)} h2{font-size:22px} h3{font-size:18px}
p{margin:0 0 1em}
a{color:var(--azul)}
.oculto{display:none!important}
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.marca{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:18px}
.marca svg{width:30px;height:30px}.m-pizarra{fill:#0b1f3a;stroke:#1e6fd9;stroke-width:2}.m-trazo{fill:none;stroke:#ff8a1f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.m-pata{stroke:#1e6fd9;stroke-width:2;stroke-linecap:round}
.marca b{color:var(--naranja)}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a,.nav .enlace{color:#dbe6f7;text-decoration:none;padding:6px 10px;border-radius:8px;font-size:15px}
.nav a[aria-current="page"],.nav a:hover{background:var(--navy-2);color:#fff}
.enlace{background:none;border:0;cursor:pointer;font:inherit}
.pie{font-size:13px;color:var(--tinta-2);text-align:center;padding:16px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:11px 18px;font:600 15px/1.2 inherit;font-family:inherit;cursor:pointer;background:var(--azul);color:#fff;transition:transform .12s,filter .12s}
.boton:hover{filter:brightness(1.08)}.boton:active{transform:scale(.98)}
.boton:disabled{opacity:.55;cursor:wait}
.boton.naranja{background:var(--naranja);color:#1b1206}
.boton.suave{background:var(--azul-2);color:var(--azul)}
.boton.peligro{background:transparent;color:var(--mal);border:1px solid var(--mal)}
.boton.chico{padding:7px 12px;font-size:14px}
input.t,select.t,textarea.t{width:100%;font:inherit;color:var(--tinta);background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:11px 12px}
input.t:focus,select.t:focus,textarea.t:focus,.boton:focus-visible{outline:3px solid rgba(30,111,217,.35);outline-offset:1px}
label.c{display:grid;gap:4px;font-size:14px;color:var(--tinta-2)}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.aviso{background:var(--naranja-2);border-left:4px solid var(--naranja);padding:10px 12px;border-radius:8px;font-size:14px;margin:10px 0}
.error{background:#fde8e8;color:#8a1c1c;border-left:4px solid var(--mal);padding:10px 12px;border-radius:8px;font-size:14px;margin:10px 0}
.chip{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--azul-2);color:var(--azul);font-weight:600}
.muted{color:var(--tinta-2);font-size:14px}

/* Entrada */
.entrar{max-width:430px;margin:8vh auto 0;display:grid;gap:14px;text-align:center}
.entrar input{text-align:center;letter-spacing:.12em;text-transform:uppercase;font-size:20px}

/* Inicio */
.heroe{display:grid;gap:14px;padding:26px;background:linear-gradient(135deg,var(--navy),#163d73);color:#fff;border-radius:20px;margin-bottom:22px}
.heroe h1{color:#fff}.heroe p{color:#cfe0f7;margin:0}
.pedido{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.pedido input.t{font-size:17px;padding:14px}
.opciones{display:flex;gap:10px;flex-wrap:wrap}
.opciones select.t{width:auto;background:#0e2850;color:#fff;border-color:#2c5590}
.foto-previa{display:flex;align-items:center;gap:10px;font-size:14px;color:#cfe0f7}
.foto-previa img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:2px solid var(--naranja)}
.boton.icono{padding:12px 14px;background:#0e2850;border:1px solid #2c5590}
.lista-clases{display:grid;gap:8px}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--linea);border-radius:12px;background:var(--tarjeta);text-decoration:none;color:var(--tinta)}
.item:hover{border-color:var(--azul)}
.lista-tarjetas .tarjeta{cursor:pointer;transition:transform .16s,border-color .16s;text-align:left;font:inherit;color:var(--tinta);display:grid;gap:6px}
.lista-tarjetas .tarjeta:hover{transform:translateY(-3px);border-color:var(--naranja)}
.lista-tarjetas .tarjeta b{font-size:17px}
.emoji-g{font-size:34px;line-height:1}
section{margin:26px 0}

/* Clase */
.clase{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
@media (max-width:860px){.clase{grid-template-columns:1fr}}
.clase-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.progreso{height:6px;background:var(--linea);border-radius:99px;overflow:hidden;margin:6px 0 12px}
.progreso i{display:block;height:100%;background:var(--naranja);width:0;transition:width .4s}
.marco{position:relative;background:var(--pizarra);border:10px solid var(--pizarra-borde);border-radius:14px;box-shadow:inset 0 0 60px rgba(0,0,0,.45),var(--sombra);overflow:hidden}
.marco svg.pizarra{display:block;width:100%;height:auto;aspect-ratio:16/9}
.pizarra text{font-family:var(--tiza);text-anchor:middle;dominant-baseline:middle}
.pizarra .trazo{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pizarra .aparece{opacity:0;transition:opacity .5s, transform .5s}
.pizarra .aparece.ya{opacity:1}
.titulo-escena{position:absolute;left:14px;top:10px;color:#f4f1e8;font-family:var(--tiza);font-size:clamp(14px,2.2vw,20px);opacity:.85}
.subtitulo{min-height:70px;margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--tarjeta);border:1px solid var(--linea);font-size:17px}
.subtitulo span{transition:color .2s}.subtitulo span.dicho{color:var(--tinta)}.subtitulo span.pend{color:var(--tinta-2);opacity:.55}
.controles{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.controles .boton{padding:10px 14px}
.lateral{display:grid;gap:12px}
.cuaderno ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.cuaderno li{animation:entra .35s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.capa{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,16,30,.55);padding:12px}
.capa .tarjeta{max-width:560px;width:100%;max-height:100%;overflow:auto}
.opcs{display:grid;gap:8px;margin:12px 0}
.opc{text-align:left;font:inherit;padding:11px 12px;border-radius:10px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);cursor:pointer}
.opc:hover{border-color:var(--azul)}
.opc.bien{border-color:var(--ok);background:rgba(31,157,85,.12)}
.opc.mal{border-color:var(--mal);background:rgba(214,69,69,.1)}
.opc:disabled{cursor:default}
.preguntar{display:grid;gap:8px}
.pensando{display:inline-flex;gap:4px}.pensando i{width:7px;height:7px;border-radius:50%;background:var(--naranja);animation:salta 1s infinite}
.pensando i:nth-child(2){animation-delay:.15s}.pensando i:nth-child(3){animation-delay:.3s}
@keyframes salta{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.fin ul{padding-left:20px}
.grabando{background:var(--mal)!important;color:#fff!important}

/* Simulacro y entrevistas */
.pregunta-sim{padding:14px 0;border-bottom:1px solid var(--linea)}
.pregunta-sim:last-child{border:0}
.resultado-num{font-size:44px;font-weight:800;color:var(--azul)}
.estrellas{color:var(--naranja);font-size:22px;letter-spacing:2px}
.entrevistador{display:flex;gap:14px;align-items:flex-start}
.avatar{flex:none;width:58px;height:58px;border-radius:50%;background:var(--navy);display:grid;place-items:center;font-size:30px}
.burbuja{background:var(--azul-2);padding:14px;border-radius:4px 14px 14px 14px;font-size:17px}
.tabla{width:100%;border-collapse:collapse;font-size:14px}.tabla th,.tabla td{padding:8px;border-bottom:1px solid var(--linea);text-align:left}
.codigo{font:700 22px/1.2 ui-monospace,monospace;letter-spacing:.08em;background:var(--naranja-2);padding:10px 14px;border-radius:10px;display:inline-block}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .barra,.pie,.controles,.lateral .preguntar,.marco,.subtitulo,.no-imprimir{display:none!important}
  .clase{display:block}.tarjeta{box-shadow:none;border:0}
  body{background:#fff;color:#000}
}
@media (max-width:620px){.pedido{grid-template-columns:1fr 1fr}.pedido input.t{grid-column:1/-1}.heroe{padding:18px}}
.aviso{color:#3a2a12}
.heroe .aviso{color:#3a2a12}
.controles select.t{width:auto}
.marca span{white-space:nowrap}
@media (max-width:520px){.barra{flex-wrap:wrap}.nav a,.nav .enlace{padding:5px 7px;font-size:14px}}
/* ---------- Resolver ---------- */
.pedido textarea.t{flex:1;min-width:220px;resize:vertical}
.chip.ejemplo{cursor:pointer;border:1px solid var(--linea);font:inherit;font-size:13px}
.chip.ejemplo:hover{border-color:var(--azul)}
.sello{border-radius:var(--r);padding:12px 16px;margin:12px 0;background:var(--azul-2);border:1px solid var(--linea)}
.sello p{margin:.3em 0 0;color:var(--tinta-2);font-size:14px}
.sello.ok{border-color:var(--ok)}
.sello.ok b{color:var(--ok)}
.sello.alerta{background:var(--naranja-2);border-color:var(--naranja)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 12px;border-bottom:1px solid var(--linea)}
.pestana{border:0;background:none;color:var(--tinta-2);font:600 15px/1.2 inherit;font-family:inherit;padding:10px 14px;cursor:pointer;border-bottom:3px solid transparent}
.pestana[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--naranja)}
.pasos{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:10px;counter-reset:paso}
.paso{counter-increment:paso;position:relative;padding-left:56px;animation:entra .35s ease}
.paso::before{content:counter(paso);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.paso p{margin:.4em 0}
.acciones{display:inline-flex;gap:6px;margin-left:auto}
code.expr{display:block;margin:.5em 0;padding:10px 12px;border-radius:10px;background:var(--fondo);border:1px solid var(--linea);font:16px/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;overflow-x:auto;white-space:pre-wrap}
.respuesta{margin-top:12px;border-color:var(--naranja);animation:entra .35s ease}
.respuesta .resultado-num{font-size:clamp(22px,4vw,34px);word-break:break-word}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.paso,.respuesta{animation:none}}
svg.grafica{width:100%;height:auto;display:block;background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;touch-action:none;cursor:grab;margin-top:8px}
.g-rejilla{stroke:var(--linea);stroke-width:1}
.g-eje{stroke:var(--tinta-2);stroke-width:1.6}
.g-num{fill:var(--tinta-2);font-size:13px}
.g-curva{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.g-c0,.leyenda.l0{stroke:var(--azul);color:var(--azul)}
.g-c1,.leyenda.l1{stroke:var(--naranja);color:var(--naranja)}
.g-c2,.leyenda.l2{stroke:var(--ok);color:var(--ok)}
.g-punto{fill:var(--naranja);stroke:var(--tarjeta);stroke-width:2}
.g-etq{fill:var(--tinta);font-size:15px;font-weight:700}
@media (max-width:600px){.g-num{font-size:20px}.g-etq{font-size:24px}.g-curva{stroke-width:4.5}}
.g-cursor{stroke:var(--tinta-2);stroke-dasharray:4 4}
.lectura{font-size:14px;margin-top:6px;min-height:1.5em}
.leyenda{font-weight:700;margin-right:12px}
.tarjetas-estudio{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.voltear{min-height:150px;cursor:pointer;font:inherit;color:var(--tinta);text-align:center;display:grid;place-items:center;transition:transform .4s;transform-style:preserve-3d;position:relative}
.voltear .cara{grid-area:1/1;backface-visibility:hidden;font-weight:600}
.voltear .atras{transform:rotateY(180deg);font-weight:400}
.voltear.volteada{transform:rotateY(180deg)}
.heroe .chip.ejemplo{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.heroe .chip.ejemplo:hover{background:rgba(255,255,255,.22)}
@media (prefers-color-scheme:dark){.aviso,.heroe .aviso{color:var(--tinta)}}