/* ============================================================
   TIPOGRAFÍA FUTURISTA (Exo 2) + Raleway
   + Glassmorphism en textos largos + highlights de acento
   ============================================================ */

/* Headings y títulos de sección → EXO 2 (futurista, con acentos) + capas de sombra */
h1,h2,#hero h1,.stat .n,.quote{
  font-family:'Exo 2','Raleway',sans-serif !important;
  font-weight:800; letter-spacing:.3px;
  text-shadow:
     0 1px 0 rgba(0,0,0,.5),
     0 2px 10px rgba(0,0,0,.55),
     0 6px 30px rgba(0,0,0,.5),
     0 0 26px rgba(13,203,240,.28),
     0 0 60px rgba(14,118,201,.16);
}
#hero h1{ font-weight:900; }
/* halo de legibilidad detrás de los títulos grandes */
#hero h1,#leccion-full h2{position:relative}
#hero h1::after,#leccion-full h2::after{content:'';position:absolute;inset:-14% -6%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(7,15,29,.6),transparent 70%);filter:blur(9px);pointer-events:none}

/* h3 y subtítulos → Raleway (legible, combina con Exo 2) */
h3,.lead,.sub,.card h3,.tl-item h3,.block .bt,.minfo .mt,.res .t{ font-family:'Raleway','Lexend',sans-serif !important; }
/* cuerpo → Raleway */
body,p{ font-family:'Raleway',system-ui,sans-serif; }
.eyebrow,.mono,.tag,.bm,.t-status,.chip{ font-family:'JetBrains Mono',monospace !important; }

/* ---- GLASSMORPHISM en bloques de texto largo ---- */
.prose{
  background:rgba(10,22,40,.42);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(120,160,210,.16);
  border-radius:20px;
  padding:30px 32px;
  box-shadow:0 14px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.prose h4{ color:var(--white); }
@media(max-width:600px){ .prose{ padding:22px 20px; } }

/* ---- PALABRAS IMPORTANTES: verde + coloreado de acento detrás ---- */
.prose strong, .prose b{
  color:var(--green); font-weight:700; position:relative; z-index:0; padding:0 2px;
}
.prose strong::after, .prose b::after{
  content:''; position:absolute; left:-1px; right:-1px; bottom:1px; height:42%; z-index:-1;
  background:linear-gradient(90deg, rgba(122,184,45,.30), rgba(13,203,240,.16));
  border-radius:3px;
}
/* énfasis secundario → cyan */
.prose em{ color:var(--cyan); font-style:normal; font-weight:600; }

/* glass reforzado para cajas de instrucción/continuidad */
#leccion-full .card{ backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); }

/* ---- ICONOS sin fondo (blend) + flotación ya en el HTML ---- */
.sec-icon img{ mix-blend-mode:screen; }

/* ============================================================
   LAYOUT E-LEARNING · bloques escaneables (wireframe senior)
   ============================================================ */
.el-card{ background:rgba(10,22,40,.42); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(120,160,210,.16); border-left:3px solid var(--cyan); border-radius:18px; padding:24px 26px; margin:16px 0;
  box-shadow:0 14px 40px rgba(0,0,0,.3); }
.el-lead{ font-family:'Raleway',sans-serif; font-size:17px; color:var(--white); font-weight:500; margin-bottom:4px; }
.el-kp{ margin:16px 0; }
.el-kp-t{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); margin-bottom:8px; }
.el-kp ul{ list-style:none; margin:0; display:grid; gap:8px; }
.el-kp li{ position:relative; padding-left:26px; color:var(--ink); font-size:14.5px; }
.el-kp li::before{ content:'▹'; position:absolute; left:4px; color:var(--cyan); font-weight:700; }
.el-terms{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.el-chip{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.5px; padding:5px 12px; border-radius:20px;
  background:rgba(122,184,45,.12); border:1px solid rgba(122,184,45,.32); color:var(--green); }
.el-chip:nth-child(3n+2){ background:rgba(13,203,240,.1); border-color:rgba(13,203,240,.32); color:var(--cyan); }
.el-chip:nth-child(3n){ background:rgba(14,118,201,.12); border-color:rgba(14,118,201,.34); color:#5fb0ff; }
/* prosa colapsable: display corto, audio completo */
.prose.collapsed{ max-height:0; padding-top:0; padding-bottom:0; margin:0; border:none; opacity:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s,padding .4s; pointer-events:none; }
.prose{ max-height:6000px; opacity:1; margin-top:16px; transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s; }
.el-more{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--glass-line);
  background:rgba(255,255,255,.04); color:var(--white); border-radius:30px; padding:9px 18px; font-family:'Raleway',sans-serif; font-weight:600; font-size:13.5px; transition:.25s; }
.el-more:hover{ border-color:var(--cyan); background:rgba(13,203,240,.1); }
.el-hook{ margin:16px 0; } .el-cont{ margin:16px 0; }
/* el botón Escuchar dentro de .prose colapsada igual debe verse → lo movemos al .el-card */
.el-card > .tts-btn{ margin-top:6px; }

/* ============================================================
   HERO TITLE · premium futurista (con acentos · Exo 2)
   ============================================================ */
#hero .hero-title{ display:flex; flex-direction:column; gap:6px; line-height:.96; }
/* "01 · Lección" — eyebrow premium */
.hero-pre{
  display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  font-family:'Exo 2',sans-serif !important; font-weight:600; text-transform:uppercase;
  font-size:clamp(13px,1.5vw,18px); letter-spacing:6px; color:var(--silver);
  text-shadow:0 0 18px rgba(13,203,240,.35); margin-bottom:6px;
}
.hero-num{
  font-family:'JetBrains Mono',monospace !important; font-weight:600; letter-spacing:1px;
  font-size:.82em; color:var(--navy); background:linear-gradient(120deg,var(--cyan),var(--green));
  padding:3px 10px; border-radius:8px; box-shadow:0 0 22px rgba(13,203,240,.5);
}
/* el gran título con gradiente VIVO + glow por capas + acentos ok */
#hero h1 .grad{
  font-family:'Exo 2',sans-serif !important; font-weight:800;
  text-transform:uppercase;
  font-size:clamp(40px,7.4vw,96px); letter-spacing:1px; line-height:1.0;
  background:linear-gradient(100deg,#0DCBF0 0%,#9be36a 38%,#0DCBF0 60%,#0E76C9 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; position:relative;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.5)) drop-shadow(0 0 32px rgba(13,203,240,.38)) drop-shadow(0 0 70px rgba(14,118,201,.2));
  animation:heroShimmer 10s linear infinite;
}
@keyframes heroShimmer{ to{ background-position:240% center; } }
#hero h1::after{ inset:-10% -8% !important; }
@media(prefers-reduced-motion:reduce){ #hero h1 .grad{ animation:none; } }
@media(max-width:600px){ .hero-pre{ letter-spacing:4px; } }

/* ============================================================
   MINI-REPRODUCTOR TTS por sección (play / pausa / descargar)
   ============================================================ */
.tts-ctl{ display:inline-flex; align-items:center; gap:10px; margin-top:16px;
  padding:6px 8px 6px 6px; border:1px solid var(--glass-line); background:rgba(13,203,240,.07);
  border-radius:30px; backdrop-filter:blur(6px); }
.tts-play{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
  background:linear-gradient(120deg,var(--cyan),var(--blue)); color:var(--navy); display:grid; place-items:center; font-size:13px; line-height:1; }
.tts-play span{ display:none; } .tts-play .i-play{ display:block; }
.tts-ctl.playing .tts-play .i-play{ display:none; } .tts-ctl.playing .tts-play .i-pause{ display:block; }
.tts-ctl.loading .tts-play .i-play{ display:none; } .tts-ctl.loading .tts-play .i-load{ display:block; animation:ttsspin 1s linear infinite; }
@keyframes ttsspin{ to{ transform:rotate(360deg); } }
.tts-bars{ display:none; align-items:center; gap:2px; height:16px; }
.tts-ctl.playing .tts-bars{ display:flex; }
.tts-bars i{ width:2.5px; background:var(--cyan); border-radius:2px; height:5px; animation:eq .8s ease-in-out infinite; }
.tts-bars i:nth-child(2){animation-delay:.1s} .tts-bars i:nth-child(3){animation-delay:.2s} .tts-bars i:nth-child(4){animation-delay:.3s} .tts-bars i:nth-child(5){animation-delay:.4s}
.tts-lbl{ font-family:'Raleway',sans-serif; font-size:13px; font-weight:600; color:var(--cyan); white-space:nowrap; }
.tts-dl{ width:32px; height:32px; border-radius:50%; border:1px solid var(--glass-line); background:transparent; color:var(--silver); cursor:pointer; flex-shrink:0; font-size:13px; transition:.2s; }
.tts-dl:hover{ color:var(--cyan); border-color:var(--cyan); background:rgba(13,203,240,.1); }
.quote .tts-ctl{ margin:22px auto 0; }
.el-card > .tts-ctl{ margin-top:14px; }

/* ============================================================
   PULIDO DI · flashcards + quiz score + barra de lectura
   ============================================================ */
.kc .q .q-n{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; margin-right:9px;
  background:rgba(13,203,240,.16); color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; vertical-align:middle; }
.quiz-score{ margin-top:16px; background:var(--glass); border:1px solid var(--glass-line); border-radius:14px; padding:16px 20px; backdrop-filter:blur(8px); }
.qs-bar{ height:8px; border-radius:20px; background:rgba(255,255,255,.07); overflow:hidden; }
.qs-bar i{ display:block; height:100%; width:0; border-radius:20px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); transition:width .5s cubic-bezier(.22,1,.36,1); }
.qs-txt{ margin-top:9px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--silver); }
.qs-txt span{ color:var(--cyan); font-weight:700; }
.qs-final{ margin-top:12px; padding:11px 14px; border-radius:10px; background:rgba(122,184,45,.12); border:1px solid rgba(122,184,45,.3); color:var(--green); font-family:'Raleway',sans-serif; font-weight:600; font-size:14px; }
.flashgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.flashcard{ border:none; background:none; padding:0; cursor:pointer; perspective:1300px; height:172px; font-family:inherit;
  --fc-glow:rgba(13,203,240,.55); --fc-line:rgba(13,203,240,.35); }
.flashcard.cyan{ --fc-glow:rgba(13,203,240,.6); --fc-line:rgba(13,203,240,.4); }
.flashcard.green{ --fc-glow:rgba(122,184,45,.6); --fc-line:rgba(122,184,45,.42); }
.flashcard.blue{ --fc-glow:rgba(14,118,201,.62); --fc-line:rgba(14,118,201,.46); }
.flashcard.mag{ --fc-glow:rgba(230,0,126,.6); --fc-line:rgba(230,0,126,.42); }
.fc-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; border-radius:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.32); }
.flashcard.flip .fc-inner{ transform:rotateY(180deg); }
/* GLOW al tocar / voltear / hover */
.flashcard:hover .fc-inner{ box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 0 1px var(--fc-line), 0 0 26px -4px var(--fc-glow); }
.flashcard:active .fc-inner{ box-shadow:0 0 0 1.5px var(--fc-glow), 0 0 38px -2px var(--fc-glow); }
.flashcard.flip .fc-inner{ box-shadow:0 12px 34px rgba(0,0,0,.45), 0 0 0 1.5px var(--fc-glow), 0 0 44px -2px var(--fc-glow); }
.fc-front,.fc-back{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; padding:16px 18px;
  display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--glass-line); overflow:hidden; text-align:left; }
/* FRENTE: imagen de fondo (concepto a la derecha) + gradiente que protege el texto en el espacio negativo izquierdo */
.fc-front{ background:#0A1628; background-size:cover; background-position:right center; border-color:var(--fc-line);
  align-items:flex-start; }
.fc-front::before{ content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,22,40,.94) 0%, rgba(10,22,40,.82) 34%, rgba(10,22,40,.35) 60%, rgba(10,22,40,.05) 100%),
            linear-gradient(0deg, rgba(10,22,40,.85) 0%, rgba(10,22,40,0) 46%); }
.fc-front > *{ position:relative; z-index:1; }
.fc-n{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--cyan); opacity:.85; }
.fc-term{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:20px; color:var(--white); margin-top:auto; line-height:1.12;
  text-shadow:0 2px 12px rgba(0,0,0,.6); max-width:62%; }
.fc-hint{ position:absolute; bottom:12px; right:14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#e6eefb; opacity:.92; }
.fc-back{ transform:rotateY(180deg); justify-content:center; background:linear-gradient(135deg,rgba(13,203,240,.12),rgba(13,29,52,.92)); backdrop-filter:blur(8px); }
.fc-def{ font-family:'Raleway',sans-serif; font-size:13.5px; color:var(--ink); line-height:1.5; }
.flashcard.cyan .fc-term{color:#dff6fd} .flashcard.green .fc-term{color:#e2f3cb} .flashcard.blue .fc-term{color:#cfe2fa} .flashcard.mag .fc-term{color:#fbcce6}
.flashcard.green .fc-n{color:#9ad04a} .flashcard.blue .fc-n{color:#5fa3e8} .flashcard.mag .fc-n{color:#f06bb4}
.flashcard.cyan .fc-back{background:linear-gradient(135deg,rgba(13,203,240,.14),rgba(13,29,52,.92))}
.flashcard.green .fc-back{background:linear-gradient(135deg,rgba(122,184,45,.14),rgba(13,29,52,.92))}
.flashcard.blue .fc-back{background:linear-gradient(135deg,rgba(14,118,201,.16),rgba(13,29,52,.92))}
.flashcard.mag .fc-back{background:linear-gradient(135deg,rgba(230,0,126,.14),rgba(13,29,52,.92))}
@media(max-width:880px){ .flashgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .flashgrid{ grid-template-columns:1fr; } .flashcard{ height:150px; } }
#read-progress{ position:fixed; left:0; top:0; height:3px; z-index:67; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--green),var(--magenta)); box-shadow:0 0 10px var(--cyan); transition:width .12s; }

/* ============================================================
   BOTONES "ESCUCHAR" compactos · estados de color + resume
   idle=cyan · started(intermedio)=ámbar · done=verde
   ============================================================ */
.lbtn{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(13,203,240,.4); cursor:pointer; flex-shrink:0;
  background:rgba(13,203,240,.12); color:var(--cyan); display:inline-grid; place-items:center; font-size:11px; line-height:1;
  transition:.22s cubic-bezier(.22,1,.36,1); vertical-align:middle; padding:0; }
.lbtn:hover{ transform:scale(1.12); background:rgba(13,203,240,.22); }
.lbtn span{ display:none; } .lbtn .lb-play{ display:block; }
.lbtn.playing .lb-play{ display:none; } .lbtn.playing .lb-pause{ display:block; }
.lbtn.loading .lb-play,.lbtn.loading .lb-pause{ display:none; } .lbtn.loading .lb-load{ display:block; animation:ttsspin 1s linear infinite; }
.lbtn.playing{ animation:lbpulse 1.3s ease-in-out infinite; }
@keyframes lbpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(13,203,240,.5);} 50%{ box-shadow:0 0 0 6px rgba(13,203,240,0);} }
/* ESTADO intermedio (ya lo presionó alguna vez, no terminó) → ámbar */
.lbtn.started{ border-color:rgba(230,160,40,.55); background:rgba(230,160,40,.15); color:#f0b429; }
.lbtn.started:hover{ background:rgba(230,160,40,.26); }
.lbtn.started.playing{ animation:lbpulseA 1.3s ease-in-out infinite; }
@keyframes lbpulseA{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,180,41,.5);} 50%{ box-shadow:0 0 0 6px rgba(240,180,41,0);} }
/* ESTADO terminado (lo escuchó completo) → verde */
.lbtn.done{ border-color:rgba(122,184,45,.6); background:rgba(122,184,45,.16); color:var(--green); }
.lbtn.done::after{ content:'✓'; position:absolute; font-size:8px; }
.lbtn.done .lb-play{ }  /* sigue mostrando play para re-escuchar */
.lbtn.done:hover{ background:rgba(122,184,45,.28); }
/* posiciones */
.lbtn-inline{ margin-left:12px; width:32px; height:32px; font-size:12px; }
h2 .lbtn-inline{ vertical-align:middle; transform:translateY(-3px); }
h4 .lbtn-inline{ width:26px; height:26px; font-size:10px; margin-left:9px; }
.lbtn-corner{ position:absolute; top:14px; right:14px; width:26px; height:26px; font-size:10px; opacity:.7; }
.lbtn-corner:hover{ opacity:1; }
.el-kp, .el-terms{ position:relative; }

/* ============================================================
   NAV MENU retráctil · glassmorphism fino
   ============================================================ */
#nav-fab{ position:fixed; top:16px; left:24px; z-index:75; width:46px; height:46px; border-radius:14px;
  border:1px solid rgba(120,160,210,.22); cursor:pointer; display:grid; place-items:center;
  background:rgba(15,29,50,.45); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 6px 22px rgba(0,0,0,.3); transition:.3s cubic-bezier(.22,1,.36,1); }
#nav-fab:hover{ border-color:rgba(13,203,240,.5); transform:translateY(-2px); }
.nf-bars{ width:20px; height:14px; position:relative; display:block; }
.nf-bars i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--cyan); transition:.3s cubic-bezier(.22,1,.36,1); }
.nf-bars i:nth-child(1){ top:0; } .nf-bars i:nth-child(2){ top:6px; width:70%; } .nf-bars i:nth-child(3){ top:12px; }
#nav-fab.open .nf-bars i:nth-child(1){ top:6px; transform:rotate(45deg); }
#nav-fab.open .nf-bars i:nth-child(2){ opacity:0; }
#nav-fab.open .nf-bars i:nth-child(3){ top:6px; transform:rotate(-45deg); }

#nav-scrim{ position:fixed; inset:0; z-index:74; background:rgba(4,10,20,.45); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:.4s; }
#nav-scrim.show{ opacity:1; pointer-events:auto; }

#nav-menu{ position:fixed; top:0; left:0; bottom:0; z-index:76; width:312px; max-width:84vw;
  transform:translateX(-108%); transition:transform .5s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
  background:rgba(12,24,42,.62); backdrop-filter:blur(26px) saturate(1.25); -webkit-backdrop-filter:blur(26px) saturate(1.25);
  border-right:1px solid rgba(120,160,210,.18); box-shadow:20px 0 60px rgba(0,0,0,.45); }
#nav-menu.open{ transform:none; }
.nm-head{ padding:26px 24px 18px; border-bottom:1px solid rgba(120,160,210,.14); position:relative; }
.nm-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); }
.nm-title{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:20px; color:var(--white); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
.nm-close{ position:absolute; top:22px; right:20px; width:30px; height:30px; border-radius:9px; border:1px solid rgba(120,160,210,.2);
  background:transparent; color:var(--silver); cursor:pointer; font-size:13px; transition:.2s; }
.nm-close:hover{ color:var(--cyan); border-color:var(--cyan); }
.nm-list{ flex:1; overflow-y:auto; padding:12px; }
.nm-item{ display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:12px; color:var(--silver);
  text-decoration:none; font-family:'Raleway',sans-serif; font-weight:600; font-size:14px; position:relative;
  border:1px solid transparent; transition:.25s cubic-bezier(.22,1,.36,1); margin-bottom:3px; }
.nm-item:hover{ background:rgba(13,203,240,.08); color:var(--white); transform:translateX(4px); }
.nm-item.active{ background:linear-gradient(100deg,rgba(13,203,240,.16),rgba(122,184,45,.08));
  color:var(--white); border-color:rgba(13,203,240,.32); }
.nm-item.active::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:4px; height:20px; border-radius:0 4px 4px 0; background:linear-gradient(var(--cyan),var(--green)); }
.nm-ico{ width:20px; height:20px; flex-shrink:0; color:var(--cyan); display:grid; place-items:center; }
.nm-ico svg{ width:19px; height:19px; }
.nm-item.active .nm-ico{ color:var(--green); }
.nm-lbl{ flex:1; }
.nm-dot{ width:6px; height:6px; border-radius:50%; background:transparent; }
.nm-item.active .nm-dot{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.nm-foot{ padding:16px 22px; border-top:1px solid rgba(120,160,210,.14); display:flex; align-items:center; gap:12px; }
.nm-prog{ flex:1; height:5px; border-radius:20px; background:rgba(255,255,255,.08); overflow:hidden; }
.nm-prog i{ display:block; height:100%; width:0; border-radius:20px; background:linear-gradient(90deg,var(--cyan),var(--green)); transition:width .15s; }
.nm-pct{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--silver); min-width:34px; text-align:right; }
@media(max-width:600px){ #nav-fab{ top:12px; left:14px; } }

/* ============================================================
   TURING AGENT v3 · panel conversacional glassmorphism
   ============================================================ */
#ta-fab{ position:fixed; bottom:24px; right:24px; z-index:82; width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(120deg,var(--cyan),var(--blue)); color:#04121f; display:grid; place-items:center;
  box-shadow:0 12px 34px rgba(13,203,240,.5); transition:.3s cubic-bezier(.22,1,.36,1); }
#ta-fab:hover{ transform:scale(1.08); }
#ta-fab svg{ width:24px; height:24px; }
#ta-panel{ position:fixed; bottom:96px; right:24px; z-index:82; width:392px; max-width:calc(100vw - 32px); height:580px; max-height:78vh;
  display:none; flex-direction:column; overflow:hidden; border-radius:22px;
  background:rgba(10,20,38,.72); backdrop-filter:blur(28px) saturate(1.3); -webkit-backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid rgba(120,160,210,.2); box-shadow:0 30px 80px rgba(0,0,0,.55); }
#ta-panel.open{ display:flex; animation:taIn .42s cubic-bezier(.22,1,.36,1); }
@keyframes taIn{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }
.ta-head{ display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid rgba(120,160,210,.16); }
.ta-av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#04121f;
  background:linear-gradient(120deg,var(--cyan),var(--green)); position:relative; }
.ta-av svg{ width:20px; height:20px; }
.ta-av.speaking{ animation:taPulse 1s infinite; }
@keyframes taPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(13,203,240,.55);} 50%{ box-shadow:0 0 0 9px rgba(13,203,240,0);} }
.ta-nm{ font-family:'Raleway',sans-serif; font-weight:700; font-size:14.5px; color:var(--white); }
.ta-st{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--silver); }
.ta-st.on{ color:var(--green); } .ta-st.listen{ color:var(--magenta); } .ta-st.speak{ color:var(--cyan); } .ta-st.warn{ color:#e6a23c; }
.ta-x{ margin-left:auto; width:28px; height:28px; border-radius:8px; border:1px solid rgba(120,160,210,.2); background:transparent; color:var(--silver); cursor:pointer; font-size:12px; }
.ta-x:hover{ color:var(--cyan); border-color:var(--cyan); }
.ta-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px; }
.ta-msg{ max-width:86%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.55; font-family:'Raleway',sans-serif; word-wrap:break-word; }
.ta-msg.bot{ background:rgba(13,203,240,.1); border:1px solid rgba(120,160,210,.16); color:var(--white); align-self:flex-start; border-bottom-left-radius:5px; }
.ta-msg.user{ background:linear-gradient(120deg,var(--cyan),var(--blue)); color:#04121f; align-self:flex-end; font-weight:600; border-bottom-right-radius:5px; }
.ta-msg.interim{ opacity:.6; }
.ta-msg.sys{ align-self:center; text-align:center; background:rgba(122,184,45,.12); border:1px solid rgba(122,184,45,.3); color:var(--green); font-size:11.5px; font-family:'JetBrains Mono',monospace; padding:6px 12px; }
.ta-msg.connect{ align-self:center; background:transparent; padding:4px; max-width:100%; width:100%; }
.ta-connect{ width:100%; background:linear-gradient(120deg,var(--cyan),var(--blue)); color:#04121f; border:none; border-radius:12px; padding:12px; font-weight:700; cursor:pointer; font-family:'Raleway',sans-serif; font-size:14px; }
.ta-connect[disabled]{ opacity:.6; }
.ta-msg.connect input{ background:rgba(255,255,255,.06); border:1px solid rgba(120,160,210,.2); border-radius:10px; padding:10px 13px; color:var(--white); font-family:inherit; font-size:13px; outline:none; }
.ta-img{ width:100%; border-radius:12px; margin-bottom:6px; border:1px solid rgba(120,160,210,.2); }
.ta-fn{ font-size:11px; opacity:.8; } .ta-dl-img{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--cyan); text-decoration:none; }
.ta-bar{ padding:12px; border-top:1px solid rgba(120,160,210,.16); display:flex; align-items:center; gap:8px; }
.ta-mic{ width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0; position:relative;
  background:rgba(13,203,240,.15); color:var(--cyan); display:grid; place-items:center; transition:.25s; }
.ta-mic svg{ width:20px; height:20px; }
.ta-mic.on{ background:linear-gradient(120deg,var(--magenta),#ff4d9e); color:#fff; }
.ta-lvl{ position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--cyan); opacity:0; }
.ta-mic.on .ta-lvl{ opacity:.7; }
.ta-bar input{ flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(120,160,210,.2); border-radius:30px; padding:11px 16px; color:var(--white); font-family:'Raleway',sans-serif; font-size:13.5px; outline:none; }
.ta-bar input:focus{ border-color:var(--cyan); }
.ta-ic{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(120,160,210,.2); background:transparent; color:var(--cyan); cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:.2s; }
.ta-ic:hover{ background:rgba(13,203,240,.1); border-color:var(--cyan); }
.ta-ic svg{ width:18px; height:18px; }
.ta-send{ background:var(--cyan); color:#04121f; border:none; }
@media(max-width:600px){ #ta-panel{ right:12px; bottom:84px; width:calc(100vw - 24px); } #ta-fab{ right:14px; bottom:14px; } }

/* ============================================================
   AUTH GATE · login con Google (Supabase) + chip de usuario
   ============================================================ */
#auth-gate{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:radial-gradient(circle at 50% 35%, #0d1f38, #060d18 80%); }
#auth-gate::before{ content:''; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(13,203,240,.15) 1px, transparent 1px); background-size:26px 26px; }
.ag-card{ position:relative; width:400px; max-width:92vw; text-align:center; padding:40px 34px; border-radius:24px;
  background:rgba(12,24,42,.7); backdrop-filter:blur(28px) saturate(1.3); -webkit-backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid rgba(120,160,210,.2); box-shadow:0 30px 80px rgba(0,0,0,.55); }
.ag-brand{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:2.5px; color:var(--cyan); }
.ag-logo{ font-size:46px; margin:14px 0 6px; filter:drop-shadow(0 0 24px rgba(13,203,240,.5)); }
.ag-card h2{ font-family:'Exo 2',sans-serif !important; font-weight:800; text-transform:uppercase; font-size:24px; color:var(--white); margin-bottom:8px; }
.ag-sub{ color:var(--silver); font-size:14px; margin-bottom:24px; }
.ag-google{ width:100%; display:flex; align-items:center; justify-content:center; gap:11px; padding:13px; border-radius:12px;
  border:1px solid rgba(120,160,210,.25); background:#fff; color:#1f2937; font-family:'Raleway',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer; transition:.25s; }
.ag-google:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.ag-google.disabled{ opacity:.5; filter:grayscale(.4); cursor:not-allowed; }
.ag-google.disabled:hover{ transform:none; box-shadow:none; }
.ag-or{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1px; color:var(--text-3,#7c8eaa); text-transform:uppercase; margin:18px 0 12px; }
.ag-mail{ display:flex; gap:8px; }
.ag-mail input{ flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(120,160,210,.22); border-radius:10px; padding:11px 14px; color:var(--white); font-family:'Raleway',sans-serif; font-size:13.5px; outline:none; }
.ag-mail input:focus{ border-color:var(--cyan); }
.ag-mail button{ background:linear-gradient(120deg,var(--cyan),var(--blue)); color:#04121f; border:none; border-radius:10px; padding:0 16px; font-weight:700; cursor:pointer; font-family:'Raleway',sans-serif; font-size:13px; }
.ag-msg{ font-size:12.5px; margin-top:12px; min-height:16px; }
.ag-msg.ok{ color:var(--green); } .ag-msg.err{ color:#ff6b8a; }
.ag-note{ font-size:11px; color:var(--text-3,#7c8eaa); margin-top:18px; }
#user-chip{ position:fixed; top:14px; right:74px; z-index:66; display:flex; align-items:center; gap:9px; padding:5px 6px 5px 5px; border-radius:30px;
  background:rgba(15,29,50,.55); backdrop-filter:blur(14px); border:1px solid rgba(120,160,210,.2); }
#user-chip img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
#user-chip .uc-i{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(120deg,var(--cyan),var(--green)); color:#04121f; font-weight:800; font-family:'Exo 2',sans-serif; }
#user-chip .uc-n{ font-family:'Raleway',sans-serif; font-weight:600; font-size:13px; color:var(--white); }
#user-chip .uc-out{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(120,160,210,.2); background:transparent; color:var(--silver); cursor:pointer; font-size:12px; }
#user-chip .uc-out:hover{ color:var(--cyan); border-color:var(--cyan); }
@media(max-width:600px){ #user-chip{ right:64px; top:10px; } #user-chip .uc-n{ display:none; } }

/* ============================================================
   PANEL DERECHO retráctil + redimensionable (Cronograma / Progreso / Recursos)
   ============================================================ */
#rp-fab{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:75; width:38px; height:96px;
  border:1px solid rgba(120,160,210,.22); border-right:none; border-radius:14px 0 0 14px; cursor:pointer;
  background:rgba(12,24,42,.62); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:var(--cyan);
  display:grid; place-items:center; box-shadow:-8px 0 28px rgba(0,0,0,.32); transition:.3s; }
#rp-fab svg{ width:20px; height:20px; }
#rp-fab:hover{ background:rgba(13,203,240,.14); color:#dff6fd; width:44px; }
#rp-fab.open{ opacity:0; pointer-events:none; }
#rp-panel{ position:fixed; top:0; right:0; bottom:0; z-index:78; display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .46s cubic-bezier(.22,1,.36,1);
  background:rgba(11,22,40,.78); backdrop-filter:blur(28px) saturate(1.2); -webkit-backdrop-filter:blur(28px) saturate(1.2);
  border-left:1px solid rgba(120,160,210,.2); box-shadow:-24px 0 70px rgba(0,0,0,.5); }
#rp-panel.open{ transform:none; }
.rp-resize{ position:absolute; left:-4px; top:0; bottom:0; width:9px; cursor:ew-resize; z-index:2; }
.rp-resize::after{ content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:3px; height:46px; border-radius:3px; background:rgba(120,160,210,.3); transition:.2s; }
.rp-resize:hover::after{ background:var(--cyan); height:64px; }
.rp-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:22px 20px 16px; border-bottom:1px solid rgba(120,160,210,.14); }
.rp-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); }
.rp-title{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:18px; color:var(--white); margin-top:3px; }
.rp-close{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(120,160,210,.2); background:transparent; color:var(--silver); cursor:pointer; font-size:13px; flex-shrink:0; transition:.2s; }
.rp-close:hover{ color:var(--cyan); border-color:var(--cyan); }
.rp-body{ flex:1; overflow-y:auto; padding:8px 0 28px; }
.rp-area{ border-bottom:1px solid rgba(120,160,210,.1); }
.rp-ah{ width:100%; display:flex; align-items:center; gap:9px; padding:16px 20px; cursor:pointer; border:none; background:none;
  font-family:'Exo 2',sans-serif; font-weight:700; font-size:14px; color:var(--white); text-align:left; }
.rp-ai{ font-size:16px; } .rp-chev{ margin-left:auto; color:var(--silver); transition:.3s; font-size:14px; }
.rp-area.open .rp-chev{ transform:rotate(180deg); }
.rp-ac{ max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s; padding:0 20px; }
.rp-area.open .rp-ac{ max-height:380px; padding:0 20px 18px; }
.rp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px dashed rgba(120,160,210,.12); }
.rp-row:last-child{ border-bottom:none; }
.rp-k{ font-family:'Raleway',sans-serif; font-size:12.5px; color:var(--silver); }
.rp-v{ font-family:'Exo 2',sans-serif; font-weight:700; font-size:13px; color:var(--white); text-align:right; }
.rp-v.hot{ color:#ffd166; }
.rp-prog{ margin:6px 0 12px; }
.rp-prog-bar{ height:8px; border-radius:6px; background:rgba(120,160,210,.16); overflow:hidden; }
.rp-prog-bar i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--green)); transition:width .5s ease; }
.rp-prog-t{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--silver); margin-top:7px; }
.rp-prog-t span{ color:var(--cyan); font-weight:700; }
.rp-link{ display:flex; align-items:center; gap:11px; padding:11px 0; color:var(--ink); text-decoration:none; font-family:'Raleway',sans-serif; font-size:13.5px; border-bottom:1px dashed rgba(120,160,210,.12); transition:.2s; }
.rp-link:last-child{ border-bottom:none; }
.rp-link svg{ width:17px; height:17px; color:var(--cyan); flex-shrink:0; }
.rp-link:hover{ color:var(--cyan); padding-left:5px; }
@media(max-width:600px){ #rp-panel{ width:90vw !important; } .rp-resize{ display:none; } }

/* ============================================================
   SUB-SUB-SECCIONES — delimitación visual clara (h4 dentro de .prose)
   ============================================================ */
.prose h4{ position:relative; margin:30px 0 12px; padding:14px 0 12px 16px; font-family:'Exo 2',sans-serif; font-weight:800; font-size:16.5px;
  border-top:1px solid rgba(120,160,210,.16); border-left:3px solid var(--cyan); }
.prose h4::before{ content:'§'; position:absolute; left:-2px; top:50%; transform:translateY(-50%) translateX(-120%);
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--cyan); opacity:.5; }
.prose h4:first-child{ border-top:none; margin-top:4px; }
/* numeración automática de sub-sub-secciones dentro de cada sección */
.prose{ counter-reset:subsub; }
.prose h4{ counter-increment:subsub; }
.prose h4 .ssn{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--cyan); opacity:.7; margin-right:8px; }

/* ============================================================
   KNOWLEDGE CHECKS — verificación tras secciones de 5-8 min
   ============================================================ */
.kcheck{ margin:26px 0 8px; border:1px solid rgba(120,160,210,.2); border-left:3px solid var(--green); border-radius:18px;
  background:linear-gradient(135deg,rgba(122,184,45,.07),rgba(13,29,52,.5)); padding:20px 22px; }
.kcheck.cyan{ border-left-color:var(--cyan); background:linear-gradient(135deg,rgba(13,203,240,.07),rgba(13,29,52,.5)); }
.kcheck.blue{ border-left-color:var(--blue); background:linear-gradient(135deg,rgba(14,118,201,.08),rgba(13,29,52,.5)); }
.kcheck.mag{ border-left-color:var(--magenta); background:linear-gradient(135deg,rgba(230,0,126,.07),rgba(13,29,52,.5)); }
.kc-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.kc-badge{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--green);
  border:1px solid rgba(122,184,45,.4); border-radius:20px; padding:3px 10px; }
.kcheck.cyan .kc-badge{ color:var(--cyan); border-color:rgba(13,203,240,.4); }
.kc-q{ font-family:'Raleway',sans-serif; font-size:15.5px; font-weight:600; color:var(--white); margin:8px 0 14px; line-height:1.45; }
.kc-opts{ display:flex; flex-direction:column; gap:9px; }
.kc-opt{ display:flex; align-items:center; gap:11px; text-align:left; padding:12px 15px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(120,160,210,.18); background:rgba(255,255,255,.03); color:var(--ink); font-family:'Raleway',sans-serif; font-size:14px; transition:.2s; }
.kc-opt:hover{ border-color:var(--cyan); background:rgba(13,203,240,.07); }
.kc-opt .kc-mk{ width:24px; height:24px; border-radius:50%; border:1px solid rgba(120,160,210,.3); display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--silver); flex-shrink:0; }
.kc-opt.ok{ border-color:var(--green); background:rgba(122,184,45,.14); color:#e2f3cb; }
.kc-opt.ok .kc-mk{ border-color:var(--green); color:var(--green); }
.kc-opt.bad{ border-color:#ff6b8a; background:rgba(255,107,138,.12); color:#ffd2dc; }
.kc-opt.bad .kc-mk{ border-color:#ff6b8a; color:#ff6b8a; }
.kc-opt:disabled{ cursor:default; }
.kc-fb{ margin-top:14px; padding:13px 16px; border-radius:12px; font-family:'Raleway',sans-serif; font-size:13.5px; line-height:1.5;
  display:none; }
.kc-fb.show{ display:block; }
.kc-fb.ok{ background:rgba(122,184,45,.12); border:1px solid rgba(122,184,45,.3); color:#e2f3cb; }
.kc-fb.bad{ background:rgba(255,107,138,.1); border:1px solid rgba(255,107,138,.3); color:#ffd2dc; }
.kc-listen{ margin-left:auto; }

/* ============================================================
   BLOQUES TEMÁTICOS — cabeceras que agrupan las 6 secciones en 3
   ============================================================ */
.bloque-head{ margin:84px 0 8px; padding:30px 30px 26px; border-radius:22px; position:relative; overflow:hidden;
  border:1px solid rgba(120,160,210,.2);
  background:linear-gradient(135deg, rgba(13,29,52,.7), rgba(10,22,40,.5)); }
.bloque-head::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.bloque-head.cyan::before{ background:linear-gradient(180deg,var(--cyan),transparent); }
.bloque-head.blue::before{ background:linear-gradient(180deg,var(--blue),transparent); }
.bloque-head.mag::before{ background:linear-gradient(180deg,var(--magenta),transparent); }
.bloque-head::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%;
  filter:blur(60px); opacity:.18; pointer-events:none; }
.bloque-head.cyan::after{ background:var(--cyan); } .bloque-head.blue::after{ background:var(--blue); } .bloque-head.mag::after{ background:var(--magenta); }
.bq-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.bloque-head.cyan .bq-eyebrow{ color:var(--cyan); } .bloque-head.blue .bq-eyebrow{ color:#5fa3e8; } .bloque-head.mag .bq-eyebrow{ color:#f06bb4; }
.bq-title{ font-family:'Exo 2',sans-serif; font-weight:900; font-size:30px; color:var(--white); margin:8px 0 6px; line-height:1.08; }
.bq-secs{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--silver); margin-bottom:12px; }
.bq-desc{ font-family:'Raleway',sans-serif; font-size:15px; color:var(--ink); line-height:1.6; max-width:760px; margin:0; }
@media(max-width:600px){ .bq-title{ font-size:23px; } .bloque-head{ padding:24px 22px; } }

/* ============================================================
   KNOWLEDGE CHECK multi-premisa
   ============================================================ */
.kc-prog{ height:5px; border-radius:5px; background:rgba(120,160,210,.16); overflow:hidden; margin:10px 0 16px; }
.kc-prog i{ display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(90deg,var(--green),var(--cyan)); transition:width .4s ease; }
.kc-prem{ padding:14px 0; border-top:1px dashed rgba(120,160,210,.16); }
.kc-prem:first-of-type{ border-top:none; padding-top:4px; }
.kc-qn{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--cyan); border:1px solid rgba(13,203,240,.3);
  border-radius:20px; padding:2px 9px; margin-right:8px; vertical-align:middle; }

/* ============================================================
   GAMIFICACIÓN — chip XP, toasts, panel, retos, micro-credencial
   ============================================================ */
#xp-chip{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:73; display:flex; align-items:center; gap:11px;
  padding:8px 16px 8px 12px; border-radius:40px; cursor:pointer; border:1px solid rgba(13,203,240,.3);
  background:rgba(11,22,40,.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 8px 30px rgba(0,0,0,.4); transition:.25s; }
#xp-chip:hover{ border-color:var(--cyan); box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 22px -6px var(--cyan); }
.xpc-ic{ font-size:18px; color:var(--cyan); }
.xpc-meta{ display:flex; flex-direction:column; line-height:1.1; }
.xpc-lvl{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:13px; color:var(--white); }
.xpc-xp{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--cyan); }
.xpc-bar{ width:80px; height:6px; border-radius:6px; background:rgba(120,160,210,.18); overflow:hidden; }
.xpc-bar i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--green)); transition:width .5s ease; }
@media(max-width:600px){ #xp-chip{ bottom:78px; } .xpc-bar{ display:none; } }

#xp-toasts{ position:fixed; right:24px; bottom:90px; z-index:90; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; }
.xp-toast{ display:flex; flex-direction:column; align-items:flex-end; padding:9px 15px; border-radius:14px; opacity:0; transform:translateX(30px);
  transition:.4s cubic-bezier(.22,1,.36,1); border:1px solid rgba(122,184,45,.4);
  background:linear-gradient(135deg,rgba(122,184,45,.2),rgba(13,29,52,.92)); backdrop-filter:blur(14px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.xp-toast.show{ opacity:1; transform:none; }
.xpt-big{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:15px; color:#cfe9a8; }
.xpt-small{ font-family:'Raleway',sans-serif; font-size:11px; color:var(--silver); }

/* panel derecho — área gamificación */
.rg-top{ display:flex; justify-content:space-between; align-items:baseline; margin:4px 0 8px; }
.rg-lvlname{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:15px; color:var(--white); }
.rg-xp{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--silver); } .rg-xp b{ color:var(--cyan); font-size:15px; }
.rg-bar{ height:9px; border-radius:6px; background:rgba(120,160,210,.16); overflow:hidden; }
.rg-bar i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--green)); transition:width .5s ease; }
.rg-next{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--silver); margin:7px 0 14px; }
.rg-cred{ border:1px solid rgba(120,160,210,.2); border-radius:16px; padding:14px; background:rgba(255,255,255,.03); transition:.4s; }
.rg-cred.unlocked{ border-color:rgba(196,155,42,.55); background:linear-gradient(135deg,rgba(196,155,42,.12),rgba(13,29,52,.5)); box-shadow:0 0 26px -8px rgba(255,209,102,.5); }
.rg-cred-head{ display:flex; gap:11px; align-items:flex-start; }
.rg-cred-badge{ font-size:26px; filter:grayscale(1) opacity(.5); transition:.4s; }
.rg-cred.unlocked .rg-cred-badge{ filter:none; }
.rg-cred-t{ font-family:'Exo 2',sans-serif; font-weight:800; font-size:13.5px; color:var(--white); line-height:1.2; }
.rg-cred-s{ font-family:'Raleway',sans-serif; font-size:11px; color:var(--silver); margin-top:3px; }
.rg-cred-s b{ color:#ffd166; }
.rg-reqs{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.rg-reqs li{ font-family:'Raleway',sans-serif; font-size:12px; color:var(--silver); display:flex; align-items:center; gap:9px; }
.rg-reqs li .rq-mk{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(120,160,210,.3); display:grid; place-items:center; font-size:10px; flex-shrink:0; color:transparent; }
.rg-reqs li.ok{ color:#cfe9a8; } .rg-reqs li.ok .rq-mk{ border-color:var(--green); background:var(--green); color:#04121f; }
.rg-reqs li.ok .rq-mk::after{ content:"✓"; }

/* retos avanzados + actividades */
.reto-wrap{ margin-top:14px; }
.reto-tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.5px; color:#ffd166;
  border:1px solid rgba(255,209,102,.4); border-radius:20px; padding:3px 10px; margin-bottom:8px; }
.reto-btn,.act-done-btn{ display:block; width:100%; margin-top:10px; padding:12px 16px; border-radius:12px; cursor:pointer;
  font-family:'Exo 2',sans-serif; font-weight:700; font-size:13.5px; transition:.2s; }
.reto-btn{ border:1px solid rgba(255,209,102,.45); background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(13,29,52,.4)); color:#ffe2a8; }
.reto-btn:hover{ box-shadow:0 0 22px -6px rgba(255,209,102,.6); }
.act-done-btn{ border:1px solid rgba(13,203,240,.35); background:rgba(13,203,240,.08); color:var(--cyan); }
.act-done-btn:hover{ background:rgba(13,203,240,.14); }
.reto-btn.done,.act-done-btn.done{ border-color:var(--green); background:rgba(122,184,45,.14); color:#cfe9a8; cursor:default; }

/* celebración de desbloqueo */
#cred-celebrate{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; background:rgba(4,10,20,.7);
  backdrop-filter:blur(8px); opacity:0; transition:.4s; }
#cred-celebrate.show{ opacity:1; }
.cc-card{ text-align:center; max-width:420px; padding:40px 36px; border-radius:26px; transform:scale(.9); transition:.5s cubic-bezier(.22,1.4,.36,1);
  border:1px solid rgba(196,155,42,.5); background:linear-gradient(160deg,rgba(20,33,55,.96),rgba(10,22,40,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px -10px rgba(255,209,102,.5); }
#cred-celebrate.show .cc-card{ transform:none; }
.cc-badge{ font-size:64px; animation:ccpop .6s cubic-bezier(.22,1.4,.36,1); }
@keyframes ccpop{ 0%{transform:scale(0) rotate(-20deg)} 100%{transform:scale(1) rotate(0)} }
.cc-kick{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#ffd166; margin-top:10px; }
.cc-title{ font-family:'Exo 2',sans-serif; font-weight:900; font-size:22px; color:var(--white); margin:8px 0 6px; }
.cc-sub{ font-family:'Raleway',sans-serif; font-size:13px; color:var(--silver); line-height:1.5; }
.cc-close{ margin-top:22px; padding:11px 28px; border-radius:30px; cursor:pointer; border:none;
  font-family:'Exo 2',sans-serif; font-weight:700; font-size:14px; color:#04121f; background:linear-gradient(120deg,#ffd166,var(--green)); }

/* ============================================================
   ACCESIBILIDAD ENTERPRISE (Ola 1) · WCAG 2.2 AA
   ============================================================ */

/* Token de texto terciario que faltaba (--text-3 se usaba con fallback #7c8eaa ≈4:1).
   Valor con contraste ≥4.5:1 sobre navy #0A1628. */
:root{ --text-3:#9fb2cc; }

/* A11Y-1 · Indicador de foco visible y de alto contraste para TODO interactivo
   (antes: 0 reglas :focus-visible + outline:none en inputs → teclado sin foco). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, .flashcard:focus-visible, .kc-opt:focus-visible,
.lbtn:focus-visible, .opt:focus-visible, .nm-item:focus-visible, .rp-ah:focus-visible,
.tts-play:focus-visible, .tts-dl:focus-visible, .ta-mic:focus-visible, .ta-ic:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px;
  box-shadow:0 0 0 4px rgba(13,203,240,.25);
}
/* Inputs que traían outline:none → foco visible por box-shadow */
.ta-bar input:focus-visible, .ta-msg.connect input:focus-visible, .ag-mail input:focus-visible{
  outline:2px solid var(--cyan); outline-offset:1px;
}

/* A11Y-2 · prefers-reduced-motion GLOBAL (antes solo cubría 2 animaciones).
   Anula animaciones infinitas/transiciones para usuarios con sensibilidad vestibular. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  /* Flashcards sin flip 3D: mostrar/ocultar caras por display (mantiene la definición accesible) */
  .fc-inner{ transition:none !important; transform:none !important; }
  .fc-front, .fc-back{ backface-visibility:visible !important; -webkit-backface-visibility:visible !important; position:absolute !important; transform:none !important; }
  .flashcard:not(.flip) .fc-back{ display:none !important; }
  .flashcard.flip .fc-front{ display:none !important; }
  .lbtn.playing, .ta-av.speaking, #hero h1 .grad{ animation:none !important; }
}