/* ==========================================================================
   ACADEMIA EQUITY — SISTEMA DE DISEÑO
   Un solo CSS para el hub y todos los temas.
   ========================================================================== */

:root{
  /* Paleta */
  --azul-900:#0b1b2b;
  --azul-800:#12283d;
  --azul-700:#1b3a56;
  --azul-600:#27506f;
  --linea:rgba(255,255,255,.10);
  --linea-fuerte:rgba(255,255,255,.20);

  --ambar:#f5a623;
  --ambar-claro:#ffc45c;
  --ambar-suave:rgba(245,166,35,.14);

  --verde:#2fbf71;
  --verde-suave:rgba(47,191,113,.14);
  --rojo:#e5534b;
  --rojo-suave:rgba(229,83,75,.14);
  --azul-info:#4a9fe0;

  --texto:#eef4f9;
  --texto-2:#a8bccd;
  --texto-3:#6f8798;

  /* Formas */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-full:999px;
  --sombra:0 10px 30px rgba(0,0,0,.28);
  --sombra-sm:0 4px 14px rgba(0,0,0,.20);
  --ancho:940px;
  --t:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--texto);
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(245,166,35,.10), transparent 60%),
    radial-gradient(900px 500px at 92% 4%, rgba(74,159,224,.10), transparent 60%),
    var(--azul-900);
  -webkit-font-smoothing:antialiased;
}

/* Respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(1.7rem,4vw,2.4rem)}
h2{font-size:clamp(1.3rem,3vw,1.65rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--ambar-claro)}
strong{color:#fff;font-weight:650}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(255,255,255,.08);padding:.15em .4em;border-radius:6px;
}

/* Accesibilidad: foco siempre visible */
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:6px}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--ambar);color:#111;
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;z-index:200;
}
.saltar:focus{left:0}

/* ============================================================ ESTRUCTURA */
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem}

/* ============================================================ CABECERA */
.barra{
  position:sticky;top:0;z-index:100;
  background:rgba(11,27,43,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.barra-int{
  max-width:var(--ancho);margin:0 auto;padding:.7rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
}
.btn-home{
  flex:0 0 34px;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;font-size:1.05rem;
  background:rgba(255,255,255,.06);border:1px solid var(--linea);color:var(--texto-2);
  text-decoration:none;transition:background var(--t),color var(--t),border-color var(--t);
}
.btn-home:hover{background:rgba(255,255,255,.12);color:var(--texto);border-color:var(--linea-fuerte)}

.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;min-width:0}
.monograma{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  background:linear-gradient(135deg,var(--ambar),#e07c1f);
  color:#1a1205;display:grid;place-items:center;font-weight:800;font-size:1.05rem;
}
.marca-txt{display:flex;flex-direction:column;min-width:0}
.marca-nombre{font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.marca-sub{font-size:.72rem;color:var(--texto-3);text-transform:uppercase;letter-spacing:.09em}

.barra-derecha{margin-left:auto;display:flex;align-items:center;gap:.6rem}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.07);border:1px solid var(--linea);
  padding:.35rem .7rem;border-radius:var(--r-full);
  font-size:.82rem;font-weight:600;white-space:nowrap;
}
.chip-puntos{background:var(--ambar-suave);border-color:rgba(245,166,35,.35);color:var(--ambar-claro)}
.chip-nivel{color:var(--texto-2)}

/* Barra de progreso fina bajo la cabecera */
.progreso-fino{height:3px;background:rgba(255,255,255,.07)}
.progreso-fino > span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--ambar),var(--ambar-claro));
  transition:width .4s ease;
}

/* ============================================================ TARJETAS */
.tarjeta{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.5rem;margin:0 0 1rem;box-shadow:var(--sombra-sm);
}

/* ============================================================ BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:650;font-size:.95rem;
  padding:.72rem 1.3rem;border-radius:var(--r-full);
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),opacity var(--t);
  text-decoration:none;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primario{background:linear-gradient(135deg,var(--ambar),#e88f14);color:#1a1205;box-shadow:0 6px 18px rgba(245,166,35,.28)}
.btn-secundario{background:rgba(255,255,255,.08);border-color:var(--linea-fuerte);color:var(--texto)}
.btn-fantasma{background:transparent;color:var(--texto-2)}
.btn-fantasma:hover{color:var(--texto)}
.btn-bloque{width:100%}

/* ============================================================ HUB */
.hero{padding:2.75rem 0 1.5rem}
.hero .ojo{
  display:inline-block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ambar);font-weight:700;margin-bottom:.6rem;
}
.hero p.lede{color:var(--texto-2);font-size:1.05rem;max-width:56ch}

.panel-alumno{
  display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:center;
  background:linear-gradient(135deg,rgba(245,166,35,.10),rgba(74,159,224,.07));
  border:1px solid var(--linea);border-radius:var(--r-lg);padding:1.35rem 1.5rem;margin-bottom:2rem;
}
.panel-alumno .quien{font-weight:700;font-size:1.05rem}
.panel-alumno .meta{color:var(--texto-3);font-size:.85rem}
.metricas{display:flex;gap:1.75rem;text-align:center}
.metrica .n{font-size:1.5rem;font-weight:800;color:var(--ambar-claro);line-height:1.1}
.metrica .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--texto-3)}

.grupo-linea{margin-bottom:2rem}
.grupo-titulo{
  display:flex;align-items:center;gap:.75rem;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--texto-3);font-weight:700;margin-bottom:.9rem;
}
.grupo-titulo::after{content:'';flex:1;height:1px;background:var(--linea)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}

.tema{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.35rem;text-decoration:none;color:inherit;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.tema:hover:not(.tema-inerte){transform:translateY(-3px);border-color:rgba(245,166,35,.45);box-shadow:var(--sombra)}
.tema-inerte{opacity:.5;cursor:not-allowed}
.tema-completo{border-color:rgba(47,191,113,.40)}

.tema-alto{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.6rem}
.tema-id{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--texto-3)}
.tema h3{margin:0 0 .4rem;font-size:1.06rem}
.tema p{color:var(--texto-2);font-size:.9rem;margin:0 0 1rem;flex:1}
.tema-bajo{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--texto-3);flex-wrap:wrap}

.insignia{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:var(--r-full);
}
.insignia-ok{background:var(--verde-suave);color:var(--verde);border:1px solid rgba(47,191,113,.35)}
.insignia-curso{background:var(--ambar-suave);color:var(--ambar-claro);border:1px solid rgba(245,166,35,.35)}
.insignia-bloq{background:rgba(255,255,255,.06);color:var(--texto-3);border:1px solid var(--linea)}

.badges{display:flex;gap:.6rem;flex-wrap:wrap}
.badge{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--linea);border-radius:var(--r-full);
  padding:.4rem .8rem;font-size:.82rem;background:rgba(255,255,255,.04);
}
.badge-off{opacity:.32}
.badge .ic{font-size:1.05rem}

/* ==================================================== HUB · DASHBOARD
   Pensado para caber en una sola pantalla en una laptop estándar, sin
   scroll de página. Si la ventana es muy chica (o hay muchos módulos),
   el scroll queda contenido dentro de .dash-modulos / .dash-lateral, nunca
   en el documento completo.                                              */
body.pagina-dash{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
body.pagina-dash .barra{flex:0 0 auto}
.dash-shell{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}

/* ================================================== FONDO CON PARALLAX
   Capas de imagen con crossfade + desplazamiento sutil según la posición
   del cursor. No depende de scroll (estas pantallas no hacen scroll de
   página) — por eso el parallax reacciona al mouse en vez de al scroll.  */
.fondo-parallax{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fondo-capa{
  position:absolute;inset:-40px;
  background-size:cover;background-position:center;
  opacity:0;will-change:opacity,transform;
  transition:transform .25s ease-out;
  animation:fondo-ciclo 36s infinite;
}
.fondo-capa:nth-child(1){animation-delay:0s}
.fondo-capa:nth-child(2){animation-delay:9s}
.fondo-capa:nth-child(3){animation-delay:18s}
.fondo-capa:nth-child(4){animation-delay:27s}
@keyframes fondo-ciclo{
  0%{opacity:0}
  4%{opacity:1}
  22%{opacity:1}
  27%{opacity:0}
  100%{opacity:0}
}
.fondo-oscurecer{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(245,166,35,.14), transparent 60%),
    radial-gradient(900px 500px at 92% 4%, rgba(74,159,224,.12), transparent 60%),
    linear-gradient(180deg, rgba(11,27,43,.85), rgba(11,27,43,.94) 55%, var(--azul-900) 100%);
}
@media (prefers-reduced-motion:reduce){
  .fondo-capa{animation:none!important;transition:none!important}
  .fondo-capa:nth-child(1){opacity:1}
}

.dash{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem;
  padding-top:1.1rem;padding-bottom:1.1rem;
}

.dash-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:0 0 auto}
.saludo-nombre{font-weight:700;font-size:1.05rem}
.saludo-meta{color:var(--texto-3);font-size:.82rem}
.btn-sm{padding:.45rem .95rem;font-size:.82rem}

.dash-stats{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.stat{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--linea);border-radius:var(--r);
  padding:.85rem 1rem;text-align:center;
}
.stat-v{font-size:1.3rem;font-weight:800;color:var(--ambar-claro);line-height:1.15;white-space:nowrap}
.stat-l{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--texto-3);margin-top:.15rem}

.dash-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:1fr 280px;gap:1rem}

.dash-modulos{
  min-height:0;overflow-y:auto;align-content:start;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.85rem;
  padding-right:.2rem;
}
.modulo{
  display:flex;align-items:center;gap:.9rem;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:.9rem 1rem;text-decoration:none;color:inherit;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.modulo:hover{transform:translateY(-2px);border-color:rgba(245,166,35,.45);box-shadow:var(--sombra-sm)}
.modulo-inerte{opacity:.55;cursor:not-allowed}
.modulo-inerte:hover{transform:none;box-shadow:none}

.mod-anillo{position:relative;flex:0 0 52px;width:52px;height:52px}
.mod-anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.mod-centro{position:absolute;inset:0;display:grid;place-items:center;font-weight:800}
.mod-num{font-size:1.05rem;color:var(--texto-2)}
.mod-ic{font-size:1.15rem}
.mod-check{color:var(--verde);font-size:1.3rem}

.mod-info{min-width:0;flex:1}
.mod-titulo{font-size:.92rem;font-weight:650;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mod-estado{font-size:.76rem;margin-top:.25rem;font-weight:650}

.dash-lateral{min-height:0;display:flex;flex-direction:column;gap:.85rem;overflow-y:auto}
.lateral-bloque{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--linea);border-radius:var(--r-lg);padding:1rem 1.1rem;
}
.lateral-titulo{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--texto-3);font-weight:700;margin-bottom:.7rem;
}
.lateral-bloque .badges{gap:.45rem}
.lateral-bloque .badge{padding:.32rem .6rem;font-size:.76rem}

.ref-fila{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 0;text-decoration:none;color:inherit;
  border-top:1px solid var(--linea);
}
.ref-fila:first-child{border-top:0;padding-top:0}
.ref-ic{flex:0 0 auto}
.ref-txt{flex:1;font-size:.86rem;font-weight:600}
.ref-flecha{color:var(--ambar-claro);font-weight:700}

@media (max-width:860px){
  .dash-cuerpo{grid-template-columns:1fr}
  .dash-lateral{flex-direction:row;flex-wrap:wrap}
  .lateral-bloque{flex:1;min-width:220px}
}
@media (max-width:640px){
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  body.pagina-dash{height:auto;overflow:visible}
  .dash-shell{overflow:visible}
  .dash-modulos,.dash-lateral{overflow:visible}
}

/* ============================================================ LECCIÓN */
.leccion{padding:2rem 0 5rem}

/* ==================================================== LECCIÓN · DIAPOSITIVAS
   Se activa por JS (Academia.iniciarTema agrega la clase pagina-slides al
   body) y convierte cada <section class="seccion"> existente en una
   pantalla completa, con menú numerado a la derecha. No requiere tocar el
   contenido de los temas: reutiliza el HTML tal cual está escrito.
   Si una pantalla puntual es más alta que la ventana, esa pantalla concreta
   hace scroll interno — el documento en sí nunca hace scroll.            */
body.pagina-slides{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.pagina-slides .barra{flex:0 0 auto}
body.pagina-slides .progreso-fino{display:none}
body.pagina-slides main.leccion{flex:1;min-height:0;padding:0;overflow:hidden}
body.pagina-slides main.leccion > .envoltura{height:100%;max-width:none;padding:0}

.diap-fila{display:flex;height:100%;gap:1.25rem;max-width:1400px;margin:0 auto;padding:1.1rem 1.25rem;box-sizing:border-box}

.diap-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:.75rem;min-height:0}
.diapositivas{flex:1;min-height:0;position:relative}
.diapositiva{display:none;height:100%;overflow-y:auto;padding-right:.5rem}
.diapositiva.activa{display:block}
.diapositiva .seccion{border-top:0;margin-top:0;padding-top:0}

.diap-nav{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.85rem;border-top:1px solid var(--linea);
}
.diap-puntos{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.punto-mini{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.punto-mini.visto{background:var(--ambar)}
.punto-mini.actual{background:var(--ambar-claro);box-shadow:0 0 0 3px var(--ambar-suave)}
#diap-sig-host .nav-pie{margin:0;padding:0;border-top:0}

.diap-menu{
  flex:0 0 272px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:.6rem;display:flex;flex-direction:column;gap:.3rem;
}
.diap-item{
  display:flex;align-items:center;gap:.7rem;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r);
  padding:.6rem .7rem;cursor:pointer;font:inherit;color:var(--texto-2);width:100%;
  transition:background var(--t),border-color var(--t);
}
.diap-item:hover{background:rgba(255,255,255,.05)}
.diap-item.actual{background:var(--ambar-suave);border-color:rgba(245,166,35,.35);color:var(--texto)}
.diap-num{
  flex:0 0 24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:.74rem;font-weight:800;background:rgba(255,255,255,.08);color:var(--texto-3);
}
.diap-item.actual .diap-num{background:var(--ambar);color:#1a1205}
.diap-item.visto:not(.actual) .diap-num{background:var(--verde-suave);color:var(--verde)}
.diap-txt{flex:1;font-size:.85rem;font-weight:600;line-height:1.25}
.diap-check{flex:0 0 auto;color:var(--verde);font-weight:800;opacity:0;font-size:.9rem}
.diap-item.visto .diap-check{opacity:1}

@media (max-width:900px){
  .diap-fila{flex-direction:column;padding:.9rem}
  .diap-menu{
    flex:0 0 auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    order:-1;
  }
  .diap-item{flex:0 0 auto;width:auto}
  .diap-txt{display:none}
}
@media (max-width:640px){
  body.pagina-slides{height:auto;overflow:visible}
  body.pagina-slides main.leccion{overflow:visible}
  .diapositiva{overflow:visible}
  .diapositiva:not(.activa){display:none}
}

.objetivos{
  background:linear-gradient(135deg,rgba(74,159,224,.10),rgba(255,255,255,.03));
  border:1px solid rgba(74,159,224,.28);border-left:4px solid var(--azul-info);
  border-radius:var(--r);padding:1.25rem 1.4rem;margin:0 0 2rem;
}
.objetivos h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;color:var(--azul-info);margin-bottom:.7rem}
.objetivos ul{margin:0;padding-left:1.2rem;color:var(--texto-2)}
.objetivos li{margin-bottom:.35rem}
.objetivos li::marker{color:var(--azul-info)}

.seccion{
  border-top:1px solid var(--linea);
  padding-top:2rem;margin-top:2.5rem;
}
.seccion:first-of-type{border-top:0;margin-top:0;padding-top:0}
.seccion-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--ambar-suave);
  color:var(--ambar-claro);font-size:.8rem;font-weight:800;margin-right:.6rem;
  vertical-align:2px;
}

.nota{
  border-left:3px solid var(--ambar);background:var(--ambar-suave);
  padding:.9rem 1.15rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.25rem 0;
}
.nota strong:first-child{display:block;margin-bottom:.2rem;color:var(--ambar-claro);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}

/* Flip cards */
.flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem;margin:1.5rem 0}
.flip{
  perspective:1000px;height:165px;border:0;padding:0;background:none;
  cursor:pointer;font:inherit;color:inherit;text-align:left;
}
.flip-int{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.flip[aria-pressed="true"] .flip-int{transform:rotateY(180deg)}
.flip-cara{
  position:absolute;inset:0;backface-visibility:hidden;
  border:1px solid var(--linea);border-radius:var(--r);
  padding:1rem;display:flex;flex-direction:column;justify-content:center;
}
.flip-frente{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.flip-frente .pista{font-size:.7rem;color:var(--texto-3);margin-top:.6rem;text-transform:uppercase;letter-spacing:.08em}
.flip-atras{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,rgba(245,166,35,.16),rgba(245,166,35,.05));
  border-color:rgba(245,166,35,.35);font-size:.9rem;color:var(--texto-2);
}
.flip-frente strong{font-size:1rem}

/* Acordeón */
.acordeon{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin:1.25rem 0}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon details:last-child{border-bottom:0}
.acordeon summary{
  cursor:pointer;padding:.95rem 1.2rem;font-weight:650;
  background:rgba(255,255,255,.035);list-style:none;display:flex;align-items:center;gap:.6rem;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::before{content:'+';color:var(--ambar);font-weight:800;width:1ch}
.acordeon details[open] summary::before{content:'−'}
.acordeon .cuerpo{padding:.4rem 1.2rem 1.15rem;color:var(--texto-2);font-size:.94rem}

/* ==================================================== RECUPERACIÓN ACTIVA */
.reto{
  background:linear-gradient(135deg,rgba(47,191,113,.08),rgba(255,255,255,.03));
  border:1px solid rgba(47,191,113,.28);border-radius:var(--r-lg);
  padding:1.4rem 1.5rem;margin:2rem 0;
}
.reto-etiqueta{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;
  color:var(--verde);margin-bottom:.7rem;
}
.reto-pregunta{font-weight:650;font-size:1.02rem;margin-bottom:1rem}

.opciones{display:flex;flex-direction:column;gap:.55rem}
.opcion{
  display:flex;align-items:flex-start;gap:.75rem;
  border:1px solid var(--linea);border-radius:var(--r);
  padding:.8rem 1rem;cursor:pointer;background:rgba(255,255,255,.03);
  transition:border-color var(--t),background var(--t),transform var(--t);
  font:inherit;color:inherit;text-align:left;width:100%;
}
.opcion:hover:not([disabled]){border-color:var(--linea-fuerte);background:rgba(255,255,255,.06)}
.opcion .marca-op{
  flex:0 0 22px;height:22px;border-radius:6px;border:2px solid var(--linea-fuerte);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:var(--texto-3);
  margin-top:1px;
}
.opcion[aria-checked="true"]{border-color:var(--ambar);background:var(--ambar-suave)}
.opcion[aria-checked="true"] .marca-op{border-color:var(--ambar);background:var(--ambar);color:#1a1205}
.opcion.ok{border-color:var(--verde);background:var(--verde-suave)}
.opcion.ok .marca-op{border-color:var(--verde);background:var(--verde);color:#04150b}
.opcion.mal{border-color:var(--rojo);background:var(--rojo-suave)}
.opcion.mal .marca-op{border-color:var(--rojo);background:var(--rojo);color:#fff}
.opcion[disabled]{cursor:default}
.opcion.pista-descartada{opacity:.4;text-decoration:line-through}

.btn-pista{
  display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:1px dashed var(--ambar);color:var(--ambar-claro);
  font-size:.8rem;font-weight:700;padding:.4rem .8rem;border-radius:var(--r-full);
  cursor:pointer;margin-bottom:.8rem;transition:background var(--t),border-color var(--t);
}
.btn-pista:hover{background:var(--ambar-suave);border-style:solid}

.retro{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r);
  font-size:.92rem;display:none;
}
.retro.visible{display:block;animation:aparecer .3s ease}
.retro-ok{background:var(--verde-suave);border:1px solid rgba(47,191,113,.35)}
.retro-mal{background:var(--rojo-suave);border:1px solid rgba(229,83,75,.35)}
.retro .titulo{font-weight:700;display:block;margin-bottom:.2rem}
.retro-ok .titulo{color:var(--verde)}
.retro-mal .titulo{color:var(--rojo)}

@keyframes aparecer{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.puntos-flotan{
  position:fixed;right:1.5rem;top:4.5rem;z-index:150;
  background:var(--ambar);color:#1a1205;font-weight:800;
  padding:.45rem .9rem;border-radius:var(--r-full);
  box-shadow:0 8px 24px rgba(245,166,35,.4);
  animation:subir 1.6s ease forwards;pointer-events:none;
}
@keyframes subir{
  0%{opacity:0;transform:translateY(10px) scale(.9)}
  15%{opacity:1;transform:translateY(0) scale(1)}
  75%{opacity:1}
  100%{opacity:0;transform:translateY(-18px)}
}

/* ============================================================ QUIZ */
.quiz-portada{
  text-align:center;
  background:linear-gradient(135deg,rgba(245,166,35,.12),rgba(74,159,224,.08));
  border:1px solid rgba(245,166,35,.3);border-radius:var(--r-lg);padding:2.5rem 1.5rem;
}
.quiz-portada .datos{display:flex;justify-content:center;gap:2rem;margin:1.5rem 0;flex-wrap:wrap}
.quiz-portada .datos div{text-align:center}
.quiz-portada .datos .n{font-size:1.35rem;font-weight:800;color:var(--ambar-claro)}
.quiz-portada .datos .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--texto-3)}

.quiz-cabeza{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem}
.quiz-paso{font-size:.78rem;color:var(--texto-3);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.puntitos{display:flex;gap:.3rem}
.puntito{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.puntito.hecho{background:var(--ambar)}
.puntito.actual{background:var(--ambar-claro);box-shadow:0 0 0 3px var(--ambar-suave)}

.emparejar{display:grid;gap:.6rem;margin-top:.4rem}
.par{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;
  border:1px solid var(--linea);border-radius:var(--r);padding:.7rem .9rem;background:rgba(255,255,255,.03)}
.par span{font-size:.94rem}
.par select{
  font:inherit;font-size:.9rem;padding:.45rem .6rem;border-radius:var(--r-sm);
  background:var(--azul-800);color:var(--texto);border:1px solid var(--linea-fuerte);
}
.par.ok{border-color:var(--verde);background:var(--verde-suave)}
.par.mal{border-color:var(--rojo);background:var(--rojo-suave)}

.resultado{text-align:center;padding:1rem 0}
.aro{
  width:150px;height:150px;margin:0 auto 1.25rem;position:relative;
}
.aro svg{transform:rotate(-90deg)}
.aro .valor{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:2rem;font-weight:800;
}
.resultado h2{margin-bottom:.3rem}
.resultado .dictamen{color:var(--texto-2);max-width:48ch;margin:0 auto 1.5rem}
.desglose{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;
  margin:1.5rem 0;text-align:center;
}
.desglose > div{background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:var(--r);padding:.9rem}
.desglose .n{font-size:1.3rem;font-weight:800;color:var(--ambar-claro)}
.desglose .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3)}

.revision{text-align:left;margin-top:1.5rem}
.revision-item{
  border:1px solid var(--linea);border-left:3px solid var(--linea);
  border-radius:0 var(--r) var(--r) 0;padding:.9rem 1.1rem;margin-bottom:.7rem;
  background:rgba(255,255,255,.03);font-size:.92rem;
}
.revision-item.ok{border-left-color:var(--verde)}
.revision-item.mal{border-left-color:var(--rojo)}
.revision-item .p{font-weight:650;margin-bottom:.35rem}
.revision-item .r{color:var(--texto-2);font-size:.88rem}

.estado-envio{
  margin-top:1.25rem;font-size:.88rem;padding:.7rem 1rem;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:.5rem;
}
.envio-ok{background:var(--verde-suave);color:var(--verde);border:1px solid rgba(47,191,113,.35)}
.envio-espera{background:rgba(255,255,255,.06);color:var(--texto-2);border:1px solid var(--linea)}
.envio-error{background:var(--rojo-suave);color:var(--rojo);border:1px solid rgba(229,83,75,.35)}

/* ============================================================ NAVEGACIÓN */
.nav-pie{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border-top:1px solid var(--linea);margin-top:3rem;padding-top:1.5rem;flex-wrap:wrap;
}

/* ============================================================ MODAL */
.modal{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(4,12,20,.75);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:1.25rem;
}
.modal.abierto{display:flex}
.modal-caja{
  background:var(--azul-800);border:1px solid var(--linea-fuerte);
  border-radius:var(--r-lg);padding:2rem;max-width:430px;width:100%;box-shadow:var(--sombra);
}
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.8rem;font-weight:650;color:var(--texto-2);margin-bottom:.35rem}
.campo input,.campo select{
  width:100%;font:inherit;padding:.7rem .9rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid var(--linea-fuerte);color:var(--texto);
}
.campo input::placeholder{color:var(--texto-3)}
.error-campo{color:var(--rojo);font-size:.8rem;margin-top:.3rem;display:none}
.error-campo.visible{display:block}

/* ================================================= CAPTURAS DE PANTALLA */
figure.captura{margin:1.5rem 0}
figure.captura img{
  width:100%;height:auto;display:block;
  border:1px solid var(--linea-fuerte);border-radius:var(--r);
  box-shadow:var(--sombra-sm);
}
figure.captura figcaption{
  font-size:.84rem;color:var(--texto-3);margin-top:.6rem;
  padding-left:.9rem;border-left:2px solid var(--ambar);
}
/* Marcador visible mientras no exista la imagen real */
.captura-pendiente{
  border:2px dashed rgba(245,166,35,.45);border-radius:var(--r);
  background:repeating-linear-gradient(45deg,rgba(245,166,35,.05) 0 12px,transparent 12px 24px);
  padding:2rem 1.5rem;text-align:center;color:var(--texto-2);
}
.captura-pendiente .etiq{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ambar);margin-bottom:.6rem;
}
.captura-pendiente .que{font-weight:650;color:var(--texto)}
.captura-pendiente .como{font-size:.86rem;margin-top:.5rem}

/* ============================================================ UTILES */
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.centro{text-align:center}
.mt-2{margin-top:1.5rem}
.filas{display:flex;gap:.7rem;flex-wrap:wrap}
.filas-centro{justify-content:center}

@media (max-width:640px){
  .panel-alumno{grid-template-columns:1fr}
  .metricas{justify-content:space-between;gap:1rem}
  .marca-sub{display:none}
  .flips{grid-template-columns:1fr}
}

/* Impresión: sirve como certificado */
@media print{
  body{background:#fff;color:#000}
  .barra,.nav-pie,.btn,.modal{display:none!important}
}