/* BlackXos — Design System v5 "Dashboard"
   Inspirado en dashboards modernos: sidebar colapsable + tarjetas-widget suaves.
   Oscuro, tipografía limpia (Plus Jakarta Sans + Inter), acento cian/azul-violeta. */

:root {
  --bx-bg:#0a0e14;
  --bx-side:#0b0f16;
  --bx-card:rgba(255,255,255,.035);
  --bx-card-2:rgba(255,255,255,.06);
  --bx-elev:#141a23;
  --bx-border:rgba(255,255,255,.08);
  --bx-border-2:rgba(255,255,255,.14);

  /* Paleta de marca (azul + oro) */
  --bx-cyan:#1f7fd6;        /* azul acento (legible sobre oscuro) */
  --bx-cyan-2:#0a5cb8;
  --bx-blue-deep:#014ba0;
  --bx-violet:#D4AF37;      /* segundo acento = oro */
  --bx-green:#34d399;
  --bx-red:#f87171;
  --bx-gold:#D4AF37;
  --bx-gold-2:#e5c24c;

  --bx-text:#eaeef4;
  --bx-text-dim:#93a0b2;
  --bx-text-mut:#5b6573;

  --bx-accent:linear-gradient(135deg,#1f7fd6 0%,#0a5cb8 100%);
  --bx-gold-grad:linear-gradient(135deg,#e5c24c 0%,#D4AF37 100%);
  --bx-cyan-soft:rgba(31,127,214,.16);
  --bx-gold-soft:rgba(212,175,55,.14);
  /* Neones */
  --bx-glow:0 0 22px rgba(31,127,214,.55);
  --bx-glow-soft:0 0 26px rgba(31,127,214,.16);
  --bx-glow-gold:0 0 24px rgba(212,175,55,.5);

  --bx-font-display:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --bx-font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --bx-radius:14px;
  --bx-radius-lg:20px;
  --bx-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.35);
  --side-w:266px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--bx-text); font-family:var(--bx-font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:var(--bx-bg);
  background-image:
    radial-gradient(900px 520px at 100% -8%, rgba(31,127,214,.18), transparent 55%),
    radial-gradient(820px 480px at 0% -6%, rgba(212,175,55,.10), transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3,h4 { font-family:var(--bx-font-display); font-weight:700; line-height:1.18; margin:0 0 .4em; letter-spacing:-.01em; color:#fff; }
a { color:var(--bx-cyan); text-decoration:none; }
a:hover { color:#7fdcff; }
img { max-width:100%; }
.bx-muted { color:var(--bx-text-dim); }
.bx-grad-text { background:var(--bx-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bx-tag { color:var(--bx-cyan); letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; font-weight:700; }
.bx-section-title { font-size:1.5rem; margin-bottom:.2rem; }

@keyframes bxUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.bx-up{animation:bxUp .4s ease both}.bx-up-2{animation:bxUp .4s ease .06s both}.bx-up-3{animation:bxUp .4s ease .12s both}

/* ============ APP SHELL ============ */
.bx-shell { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh; transition:grid-template-columns .2s ease; }
.bx-shell.collapsed { --side-w:78px; }

/* ---- Sidebar ---- */
.bx-side { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; overflow-x:hidden;
  background:var(--bx-side); border-right:1px solid var(--bx-border); display:flex; flex-direction:column; padding:1rem .8rem; }
.bx-side-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.3rem .4rem .9rem; }
.bx-side-brand img { height:46px; mix-blend-mode:screen; filter:drop-shadow(0 0 14px rgba(31,127,214,.45)); }
.bx-shell.collapsed .bx-side-brand img { height:30px; }
.bx-side-toggle { background:transparent; border:1px solid var(--bx-border); color:var(--bx-text-dim); border-radius:8px; width:30px; height:30px; display:grid; place-items:center; cursor:pointer; }
.bx-side-toggle:hover { color:#fff; border-color:var(--bx-border-2); }
.bx-side-nav { display:flex; flex-direction:column; gap:.12rem; flex:1; }
.bx-side-group { color:var(--bx-text-mut); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.9rem .7rem .3rem; }
.bx-side-link { display:flex; align-items:center; gap:.75rem; padding:.6rem .7rem; border-radius:10px; color:var(--bx-text-dim); font-weight:500; font-size:.92rem; white-space:nowrap; transition:.12s; }
.bx-side-link .ic { flex:0 0 auto; display:inline-flex; color:currentColor; }
.bx-side-link:hover { background:var(--bx-card); color:#fff; }
.bx-side-link.active { background:var(--bx-cyan-soft); color:#fff; }
.bx-side-link.active .ic { color:var(--bx-cyan); }
.bx-side-foot { padding:.6rem .5rem .2rem; }
.bx-side-prog .bx-progress { margin-bottom:.4rem; }
.bx-side-prog-l { color:var(--bx-text-dim); font-size:.74rem; }

/* colapsado */
.bx-shell.collapsed .bx-side-link { justify-content:center; padding:.6rem; }
.bx-shell.collapsed .bx-side-link .tx,
.bx-shell.collapsed .bx-side-group,
.bx-shell.collapsed .bx-side-foot,
.bx-shell.collapsed .bx-side-brand img { display:none; }
.bx-shell.collapsed .bx-side-top { justify-content:center; }

/* ---- Content ---- */
.bx-content { min-width:0; display:flex; flex-direction:column; }
.bx-topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem; height:62px; padding:0 2rem;
  background:rgba(10,14,20,.8); backdrop-filter:blur(12px); border-bottom:1px solid var(--bx-border); }
.bx-crumb { font-weight:600; color:#fff; font-size:.95rem; }
.bx-topbar-right { margin-left:auto; display:flex; align-items:center; gap:.7rem; }
.bx-pill { display:inline-flex; align-items:center; gap:.45rem; background:var(--bx-card); border:1px solid var(--bx-border); color:var(--bx-text-dim);
  border-radius:999px; padding:.4rem .85rem; font-size:.82rem; font-weight:600; }
.bx-pill:hover { color:#fff; border-color:var(--bx-border-2); }
.bx-side-open { display:none; background:transparent; border:1px solid var(--bx-border); color:var(--bx-text); border-radius:8px; width:36px; height:36px; place-items:center; cursor:pointer; }
.bx-main { flex:1; }
.bx-wrap { max-width:1180px; margin:0 auto; padding:2rem; }
.bx-footer { border-top:1px solid var(--bx-border); color:var(--bx-text-mut); font-size:.84rem; }
.bx-footer .bx-wrap { padding-top:1.4rem; padding-bottom:1.4rem; }
.bx-side-scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; }

/* ============ Cards ============ */
.bx-card { background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); border:1px solid var(--bx-border);
  border-radius:var(--bx-radius-lg); padding:1.4rem 1.5rem; box-shadow:var(--bx-shadow), var(--bx-glow-soft); }

/* Neón detrás de tarjetas y datos */
.bx-stat, .bx-tile, .bx-route-card, .bx-module-card, .bx-dash-mod, .bx-pill {
  box-shadow:var(--bx-glow-soft);
}
.bx-stat:hover, .bx-tile:hover, .bx-route-card:hover, .bx-module-card:hover {
  box-shadow:0 0 28px rgba(31,127,214,.32); border-color:rgba(31,127,214,.5);
}

/* ============ Hero / dashboard ============ */
.bx-hero { padding:.5rem 0 1.5rem; }
.bx-hero-logo { height:46px; width:auto; display:block; margin:0 0 1rem; mix-blend-mode:screen; }
.bx-hero h1 { font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; }
.bx-hero p { color:var(--bx-text-dim); font-size:1.05rem; margin:.6rem 0 1.2rem; max-width:60ch; }
.bx-cta-row { display:flex; gap:.7rem; flex-wrap:wrap; }

.bx-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-top:1.2rem; }
.bx-stat { background:var(--bx-card); border:1px solid var(--bx-border); border-radius:var(--bx-radius); padding:1.1rem 1.2rem; }
.bx-stat .n { font-family:var(--bx-font-display); font-weight:800; font-size:1.7rem; line-height:1; color:#fff; }
.bx-stat .l { color:var(--bx-text-dim); font-size:.82rem; margin-top:.35rem; }

/* Botones */
.bx-btn { font-family:var(--bx-font-body); font-weight:600; font-size:.94rem; display:inline-flex; align-items:center; gap:.5rem;
  background:var(--bx-accent); color:#fff; border:none; border-radius:10px; padding:.7rem 1.3rem; cursor:pointer; transition:.15s; box-shadow:var(--bx-glow); }
.bx-btn:hover { filter:brightness(1.1); color:#fff; box-shadow:0 0 30px rgba(31,127,214,.75); transform:translateY(-1px); }
.bx-btn--gold { background:var(--bx-gold-grad); color:#1a1300; box-shadow:var(--bx-glow-gold); }
.bx-btn--gold:hover { color:#1a1300; box-shadow:0 0 32px rgba(212,175,55,.7); }
.bx-btn--ghost { background:transparent; color:var(--bx-text); border:1px solid var(--bx-border-2); box-shadow:none; }
.bx-btn--ghost:hover { background:var(--bx-card); color:#fff; box-shadow:none; transform:none; }

/* Grids */
.bx-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.bx-grid--wide { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }

/* Tarjeta de lección */
.bx-tile { position:relative; display:block; background:var(--bx-card); border:1px solid var(--bx-border); border-radius:var(--bx-radius); padding:1.2rem 1.3rem; transition:.15s; }
.bx-tile:hover { border-color:var(--bx-border-2); background:var(--bx-card-2); transform:translateY(-2px); }
.bx-tile h3 { font-size:1rem; margin:.2rem 0 .35rem; color:#fff; font-weight:600; font-family:var(--bx-font-body); }
.bx-tile-meta { font-size:.85rem; color:var(--bx-text-dim); line-height:1.5; }
.bx-num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--bx-cyan-soft); color:var(--bx-cyan); font-family:var(--bx-font-display); font-weight:700; margin-bottom:.6rem; }
.bx-tile.is-done { border-color:rgba(52,211,153,.4); }
.bx-tile.is-done::after { content:""; position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; background:var(--bx-green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat; }

/* Tarjeta de RUTA (dashboard) */
.bx-route-card { display:block; background:var(--bx-card); border:1px solid var(--bx-border); border-radius:var(--bx-radius-lg); padding:1.4rem; transition:.15s; }
.bx-route-card:hover { border-color:var(--bx-border-2); background:var(--bx-card-2); transform:translateY(-3px); }
.bx-route-card .top { display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem; }
.bx-route-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--bx-cyan-soft); color:var(--bx-cyan); }
.bx-route-ic svg { width:22px; height:22px; }
.bx-route-card h3 { font-size:1.1rem; margin:0; }
.bx-route-card .c { color:var(--bx-text-dim); font-size:.82rem; }
.bx-route-card .pl { display:flex; justify-content:space-between; color:var(--bx-text-dim); font-size:.78rem; margin:.7rem 0 .35rem; }

/* Tarjeta de MÓDULO (asignatura) */
.bx-module-card { display:block; background:var(--bx-card); border:1px solid var(--bx-border); border-radius:var(--bx-radius); padding:1.1rem 1.2rem; transition:.15s; }
.bx-module-card:hover { border-color:var(--bx-border-2); background:var(--bx-card-2); transform:translateY(-2px); }
.bx-module-card .top { display:flex; align-items:center; gap:.75rem; margin-bottom:.8rem; }
.bx-module-ic { flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--bx-cyan-soft); }
.bx-module-ic svg { width:20px; height:20px; color:var(--bx-cyan); }
.bx-module-card h4 { margin:0; font-weight:600; font-size:.97rem; color:#fff; font-family:var(--bx-font-body); }
.bx-module-card .c { color:var(--bx-text-dim); font-size:.78rem; }
.bx-module-card .pl { display:flex; justify-content:space-between; color:var(--bx-text-dim); font-size:.76rem; margin:.4rem 0 .35rem; }

/* ============ Chips / niveles ============ */
.bx-chip { display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:.16rem .55rem; border-radius:7px; line-height:1.6; background:var(--bx-elev); border:1px solid var(--bx-border); color:var(--bx-text-dim); }
.bx-lvl-básico{color:var(--bx-green)} .bx-lvl-intermedio{color:var(--bx-cyan)} .bx-lvl-pro{color:#c4b5fd} .bx-soon{color:var(--bx-gold)}

.bx-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 1.4rem; }
.bx-filter { font-family:var(--bx-font-body); font-weight:500; font-size:.84rem; cursor:pointer; background:var(--bx-card); color:var(--bx-text-dim); border:1px solid var(--bx-border); border-radius:8px; padding:.45rem .9rem; transition:.15s; }
.bx-filter:hover{ color:#fff; } .bx-filter.active { background:var(--bx-accent); color:#06121b; border-color:transparent; }

.bx-search { display:flex; align-items:center; gap:.6rem; background:var(--bx-card); border:1px solid var(--bx-border); border-radius:11px; padding:.8rem 1rem; margin:1.1rem 0; }
.bx-search input { flex:1; background:transparent; border:none; color:var(--bx-text); font-family:var(--bx-font-body); font-size:1rem; outline:none; }
.bx-search .i { color:var(--bx-text-dim); display:inline-flex; }

/* ============ Progreso ============ */
.bx-progress { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.bx-progress > span { display:block; height:100%; width:0; background:var(--bx-accent); border-radius:999px; transition:width .5s ease; }
.bx-ring { width:120px; height:120px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--bx-gold) 0%, rgba(255,255,255,.08) 0); box-shadow:var(--bx-glow-gold); }
.bx-ring .inner { width:96px; height:96px; border-radius:50%; background:var(--bx-bg); display:grid; place-items:center; font-family:var(--bx-font-display); font-weight:800; font-size:1.6rem; color:#fff; }
.bx-progress-card { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.bx-progress-card .grow { flex:1; min-width:220px; }

.bx-dash-mod { display:grid; grid-template-columns:1fr auto; gap:.4rem .8rem; align-items:center; padding:.9rem 1.1rem; border:1px solid var(--bx-border); border-radius:12px; background:var(--bx-card); margin-bottom:.6rem; }
.bx-dash-mod .nm { display:flex; align-items:center; gap:.55rem; font-weight:600; color:#fff; }
.bx-dash-mod .nm svg { width:18px; height:18px; color:var(--bx-cyan); }
.bx-dash-mod .pc { color:var(--bx-text-dim); font-size:.85rem; font-variant-numeric:tabular-nums; }
.bx-dash-mod .bx-progress { grid-column:1 / -1; }

/* ============ Ruta de activación ============ */
.bx-path { display:flex; flex-direction:column; max-width:760px; }
.bx-step-row { display:flex; gap:1rem; }
.bx-step-rail { display:flex; flex-direction:column; align-items:center; }
.bx-step-bullet { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--bx-font-display); font-weight:700; font-size:.9rem; border:1px solid var(--bx-border-2); color:var(--bx-text-dim); background:var(--bx-card); }
.bx-step-bullet.done { background:var(--bx-accent); color:#06121b; border:none; }
.bx-step-line { width:2px; flex:1; background:var(--bx-border); min-height:24px; }
.bx-step-card { flex:1; margin-bottom:1rem; }

/* ============ Lección ============ */
.bx-lesson { max-width:none; }
.bx-objective { border:1px solid var(--bx-border); background:var(--bx-card); padding:1rem 1.2rem; border-radius:var(--bx-radius); margin:1rem 0 1.6rem; }
.bx-intro p { color:var(--bx-text); }
.bx-stepblock { margin:1.6rem 0; padding-bottom:1.3rem; border-bottom:1px solid var(--bx-border); text-align:center; }
.bx-stepblock:last-of-type { border-bottom:none; }
.bx-stepblock .bx-step-h { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.6rem; text-align:left; }
.bx-stepblock .bx-step-n { flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:var(--bx-cyan-soft); color:var(--bx-cyan); display:grid; place-items:center; font-family:var(--bx-font-display); font-weight:700; font-size:.85rem; }
.bx-shot { width:100%; height:auto; border:1px solid rgba(43,143,255,.6); border-radius:var(--bx-radius); display:block; margin-top:.4rem;
  box-shadow:0 0 0 1px rgba(43,143,255,.35), 0 0 26px rgba(43,143,255,.35); }
/* capturas verticales (formularios/paneles): se limitan por ALTURA, no por ancho */
.bx-shot.is-tall { width:auto; max-width:100%; height:auto; max-height:420px; }
/* --- Resaltado: el contenedor se ajusta a la imagen y se centra (así el resaltado, en %, cuadra) --- */
.bx-shot-wrap { position:relative; display:block; width:100%; max-width:1000px; margin:.4rem auto 0; line-height:0; }
.bx-shot-wrap.is-tall { display:inline-block; width:auto; max-width:100%; margin:.4rem 0 0; vertical-align:top; }
.bx-shot-wrap .bx-shot { margin-top:0; }
.bx-hl {
  position:absolute; border-radius:9px; border:3px solid var(--bx-gold);
  pointer-events:none; z-index:2; box-sizing:border-box;
  animation:bxHlPulse 1.5s ease-in-out infinite;
}
.bx-hl-tag {
  position:absolute; left:0; bottom:calc(100% + 9px); white-space:nowrap;
  background:var(--bx-gold-grad); color:#1a1205; font-family:var(--bx-font-display);
  font-weight:700; font-size:.78rem; line-height:1.1; padding:.34rem .68rem;
  border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.45);
  animation:bxHlBob 1.5s ease-in-out infinite;
}
.bx-hl-tag::after {
  content:''; position:absolute; top:100%; left:18px; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--bx-gold);
}
@keyframes bxHlPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(212,175,55,.28), 0 0 16px 4px rgba(212,175,55,.42), inset 0 0 12px rgba(212,175,55,.18); border-color:var(--bx-gold); }
  50%     { box-shadow:0 0 0 5px rgba(212,175,55,.50), 0 0 34px 12px rgba(212,175,55,.78), inset 0 0 18px rgba(212,175,55,.30); border-color:var(--bx-gold-2); }
}
@keyframes bxHlBob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .bx-hl,.bx-hl-tag { animation:none } }
.bx-expected { background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); border-radius:var(--bx-radius); padding:1rem 1.2rem; margin-top:1.5rem; }

.bx-media { border:1px solid var(--bx-border); border-radius:var(--bx-radius); overflow:hidden; margin:1.2rem 0; background:#0a0d12; }
.bx-media video, .bx-media iframe { width:100%; aspect-ratio:16/9; display:block; border:0; }
.bx-media-ph { aspect-ratio:16/9; display:grid; place-items:center; align-content:center; text-align:center; gap:.4rem; color:var(--bx-text-dim); }
.bx-media-ph svg { width:42px; height:42px; color:var(--bx-text-mut); }

.bx-complete { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:var(--bx-font-body); font-weight:600; border-radius:9px; padding:.65rem 1.2rem; border:1px solid var(--bx-green); color:var(--bx-green); background:transparent; transition:.15s; }
.bx-complete:hover { background:rgba(52,211,153,.1); }
.bx-complete.done { background:var(--bx-green); color:#06121b; border-color:transparent; }
.bx-complete svg { width:18px; height:18px; }

/* ============ Chat ============ */
.bx-chat-fab { position:fixed; right:22px; bottom:22px; z-index:120; width:54px; height:54px; border-radius:15px; border:none; cursor:pointer; background:var(--bx-accent); color:#06121b; display:grid; place-items:center; box-shadow:0 8px 26px rgba(0,0,0,.4); transition:.15s; }
.bx-chat-fab:hover { filter:brightness(1.08); }
.bx-chat-fab svg { width:24px; height:24px; }
.bx-chat-panel { position:fixed; right:22px; bottom:88px; z-index:120; width:min(380px,calc(100vw-44px)); height:480px; display:none; flex-direction:column; background:var(--bx-elev); border:1px solid var(--bx-border-2); border-radius:var(--bx-radius-lg); overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,.55); }
.bx-chat-panel.open { display:flex; }
.bx-chat-head { background:rgba(255,255,255,.04); color:#fff; padding:.85rem 1rem; font-family:var(--bx-font-display); font-weight:700; border-bottom:1px solid var(--bx-border); }
.bx-chat-body { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.bx-msg { padding:.6rem .85rem; border-radius:10px; max-width:85%; font-size:.92rem; line-height:1.45; }
.bx-msg.bot { background:var(--bx-card-2); align-self:flex-start; }
.bx-msg.me { background:var(--bx-cyan); color:#06121b; align-self:flex-end; }
.bx-chat-foot { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--bx-border); }
.bx-chat-foot input { flex:1; background:var(--bx-bg); border:1px solid var(--bx-border); border-radius:8px; color:var(--bx-text); padding:.55rem .7rem; font-family:var(--bx-font-body); }
.bx-chat-foot button { border:none; border-radius:8px; background:var(--bx-accent); color:#06121b; padding:0 .8rem; cursor:pointer; display:grid; place-items:center; }
.bx-chat-foot button svg{ width:18px; height:18px; }

/* ============ Neón + acentos azul/oro en TODAS las páginas ============ */
/* Iconos de datos (chips de icono) con resplandor azul en cualquier página */
.bx-num, .bx-module-ic, .bx-route-ic, .bx-layer-ic, .bx-stepblock .bx-step-n {
  box-shadow:0 0 16px rgba(31,127,214,.32);
}
/* Lección: objetivo con acento azul + neón; resultado esperado con leve glow */
.bx-objective { border-left:3px solid var(--bx-cyan); box-shadow:var(--bx-glow-soft); }
.bx-expected { box-shadow:0 0 22px rgba(52,211,153,.12); }
/* Nivel Pro en oro (premium) */
.bx-lvl-pro { color:var(--bx-gold); border-color:rgba(212,175,55,.45); }
/* Eyebrow con leve neón azul */
.bx-tag { text-shadow:0 0 14px rgba(31,127,214,.45); }
/* Buscador: neón al enfocar */
.bx-search:focus-within { border-color:rgba(31,127,214,.6); box-shadow:0 0 22px rgba(31,127,214,.22); }
/* Item activo del menú lateral con neón azul */
.bx-side-link.active { box-shadow:inset 0 0 0 1px rgba(31,127,214,.28), 0 0 18px rgba(31,127,214,.18); }
/* Filtros y chips activos con brillo */
.bx-filter.active { box-shadow:var(--bx-glow); }
/* Pasos de la Ruta de activación: bala completada con neón azul */
.bx-step-bullet.done { box-shadow:0 0 16px rgba(31,127,214,.45); }
/* Botón completar (al marcar) con neón verde */
.bx-complete.done { box-shadow:0 0 20px rgba(52,211,153,.45); }
/* FAB del asistente con neón azul */
.bx-chat-fab { box-shadow:0 0 24px rgba(31,127,214,.5); }

/* ============ Responsive ============ */
@media (max-width:900px){
  .bx-shell { grid-template-columns:1fr; }
  .bx-side { position:fixed; left:0; top:0; width:266px; transform:translateX(-100%); transition:transform .2s ease; z-index:200; }
  .bx-shell.side-open .bx-side { transform:none; }
  .bx-shell.side-open .bx-side-scrim, .bx-shell.side-open ~ .bx-side-scrim { display:block; }
  .bx-side-open { display:grid; }
  .bx-side-toggle { display:none; }
  .bx-wrap, .bx-topbar { padding-left:1.2rem; padding-right:1.2rem; }
}

/* ============================================================
   v6 — DISEÑO "Academia BlackXos" (referencia subida por Pedro)
   Capa que sobrescribe el shell v5 y añade el dashboard gamificado.
   Paleta: fondo #070a0e, tarjetas #0d1219, azul #2b8fff, oro #f5c84a.
   ============================================================ */
@property --bxp { syntax:'<percentage>'; inherits:false; initial-value:0%; }
@keyframes bxFade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes bxBarX { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes bxBarY { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes bxBreath { 0%,100%{box-shadow:0 0 0 1px rgba(43,143,255,.4),0 0 18px rgba(43,143,255,.18)} 50%{box-shadow:0 0 0 1px rgba(70,200,255,.7),0 0 30px rgba(43,143,255,.45)} }
@keyframes bxSheen { 0%{transform:translateX(-130%) skewX(-18deg)} 100%{transform:translateX(330%) skewX(-18deg)} }

/* ---- Shell ---- */
.bx-shell{ display:grid; grid-template-columns:252px 1fr; min-height:100vh;
  background:radial-gradient(1100px 600px at 100% -12%,rgba(43,143,255,.20),transparent 56%) fixed,
             radial-gradient(760px 460px at -4% 0%,rgba(70,200,255,.08),transparent 55%) #070a0e; }
.bx-shell.collapsed{ grid-template-columns:252px 1fr; }   /* v6 no usa colapso manual */
.bx-side{ position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(#0b0f15,#080b10); border-right:1px solid rgba(120,160,210,.12);
  display:flex; flex-direction:column; padding:1.15rem .85rem; box-shadow:inset -1px 0 0 rgba(255,255,255,.02); }
.bx-logo-wrap{ display:flex; align-items:center; padding:.5rem .3rem 1rem; }
.bx-logo-wrap img{ height:auto; width:100%; max-width:180px; object-fit:contain; display:block;
  filter:drop-shadow(0 0 18px rgba(0,212,255,.5)); }
.bx-lbl{ color:#59616d; font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:.6rem .7rem .4rem; }
.bx-navgrp{ display:flex; flex-direction:column; gap:.2rem; }
.bx-navitem{ display:flex; align-items:center; gap:.8rem; padding:.62rem .75rem; border-radius:11px;
  font-weight:600; font-size:.9rem; cursor:pointer; white-space:nowrap; transition:.15s; color:#8a94a3; }
.bx-navitem:hover{ background:rgba(43,143,255,.08); color:#fff; }
.bx-navitem.active{ background:linear-gradient(rgba(43,143,255,.2),rgba(43,143,255,.06)); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(43,143,255,.4),0 0 20px rgba(43,143,255,.22); }
.bx-navitem svg{ flex:0 0 auto; }
.bx-usercard{ margin-top:auto; padding:.4rem .2rem .2rem; }

/* ---- Contenido / topbar / footer ---- */
.bx-content{ min-width:0; display:flex; flex-direction:column; }
.bx-topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem; height:64px;
  padding:0 2rem; background:rgba(8,11,16,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(120,160,210,.1); }
.bx-crumb{ font-weight:600; color:#fff; font-size:.95rem; }
.bx-crumb .bx-muted{ color:#8a94a3; }
.bx-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.bx-chip{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.4rem .8rem; font-size:.82rem; font-weight:700; }
.bx-chip-gold{ background:linear-gradient(rgba(245,200,74,.18),rgba(245,200,74,.05)); border:1px solid rgba(245,200,74,.4); color:#f5c84a; box-shadow:0 0 16px rgba(245,200,74,.2); }
.bx-chip-cyan{ background:linear-gradient(rgba(70,200,255,.12),rgba(70,200,255,.03)); border:1px solid rgba(70,200,255,.3); color:#7fdcff; }
.bx-avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; padding:2px;
  overflow:hidden; background:conic-gradient(#ffe07a,#f5c84a,#d9a528,#f5c84a,#ffe07a); box-shadow:0 0 12px rgba(245,200,74,.4); }
.bx-avatar > span{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.72rem; background:#0d1219; color:#f5c84a; }
.bx-main{ flex:1; }
.bx-page{ padding:2rem 2rem 3rem; position:relative; }
.bx-footer{ border-top:1px solid rgba(120,160,210,.1); color:#59616d; font-size:.84rem; padding:1.4rem 2rem; }
.bx-footer .bx-wrap{ padding:0; max-width:none; }

/* ---- Tarjeta estándar del dashboard ---- */
.bx-dcard{ border-radius:20px; border:1px solid rgba(120,160,210,.14);
  background:linear-gradient(162deg,#151c26,#0d1219); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.bx-sec-h{ display:flex; align-items:center; justify-content:space-between; margin:2.2rem 0 1rem; }
.bx-sec-h h2{ font-size:1.4rem; font-weight:800; color:#fff; margin:0; }
.bx-seemore{ color:#6bb6ff; font-weight:600; font-size:.88rem; cursor:pointer; }
.bx-lift{ transition:.18s; }
.bx-lift:hover{ transform:translateY(-3px); border-color:rgba(43,143,255,.55); box-shadow:0 0 30px rgba(43,143,255,.22); }

/* ---- Calendario de racha ---- */
.bx-day{ position:relative; width:100%; }
.bx-tip{ position:absolute; bottom:128%; left:50%; transform:translateX(-50%) translateY(5px); opacity:0;
  pointer-events:none; transition:.16s; white-space:nowrap; z-index:6; background:linear-gradient(180deg,#1d2230,#11151d);
  border:1px solid rgba(245,200,74,.4); color:#f5c84a; font-size:.7rem; font-weight:700; padding:.28rem .55rem; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.bx-day:hover .bx-tip{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Cols responsivas del dashboard ---- */
@media (max-width:1024px){
  .bx-shell{ grid-template-columns:74px 1fr; }
  .bx-lbl, .bx-navitem .tx, .bx-userfull{ display:none!important; }
  .bx-logo-wrap{ justify-content:center; padding-left:0; padding-right:0; }
  .bx-logo-wrap img{ width:60px; height:auto; }
  .bx-side{ padding-left:.5rem; padding-right:.5rem; }
  .bx-navitem{ justify-content:center; gap:0; }
  .bx-col1{ grid-template-columns:1fr!important; }
  .bx-col2{ grid-template-columns:1fr 1fr!important; }
  .bx-hero{ flex-direction:column!important; min-height:0!important; }
  .bx-hero-img{ display:none!important; }
  .bx-3col{ grid-template-columns:1fr!important; }
}
@media (max-width:720px){
  .bx-shell{ grid-template-columns:1fr; }
  .bx-side{ position:fixed; left:0; top:0; width:240px; transform:translateX(-100%); transition:transform .2s ease; z-index:200; padding:1.15rem .85rem; }
  .bx-side .bx-lbl, .bx-side .bx-navitem .tx, .bx-side .bx-userfull{ display:block!important; }
  .bx-side .bx-navitem{ justify-content:flex-start; gap:.8rem; }
  .bx-shell.side-open .bx-side{ transform:none; }
  .bx-shell.side-open .bx-side-scrim{ display:block; }
  .bx-side-open{ display:grid!important; }
  .bx-page, .bx-topbar, .bx-footer{ padding-left:1.1rem; padding-right:1.1rem; }
  .bx-col2{ grid-template-columns:1fr 1fr!important; }
  .bx-badges{ grid-template-columns:repeat(4,1fr)!important; }
}
.bx-side-open{ display:none; background:transparent; border:1px solid rgba(120,160,210,.18); color:#cdd5e0; border-radius:9px; width:38px; height:38px; place-items:center; cursor:pointer; }

.bx-back-btn{ position:absolute; top:2rem; right:2rem; z-index:5; display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(245,200,74,.08); border:1px solid rgba(245,200,74,.4); color:#f5c84a; border-radius:9px;
  padding:.45rem .8rem .45rem .65rem; font-size:.84rem; font-weight:700; font-family:inherit; cursor:pointer; }
.bx-back-btn:hover{ background:rgba(245,200,74,.16); border-color:#f5c84a; color:#ffe07a; }
@media (max-width:640px){ .bx-back-btn{ right:1.1rem; padding:.45rem; } .bx-back-btn span{ display:none; } }

/* ============================================================
   v6.1 — Anatomía de lección extendida (tutorial conectado)
   ============================================================ */
.bx-lesson-chips{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; }
.bx-chip-phase{ background:linear-gradient(rgba(70,200,255,.12),rgba(70,200,255,.03)); border:1px solid rgba(70,200,255,.3); color:#7fdcff; border-radius:999px; padding:.18rem .6rem; font-size:.7rem; font-weight:700; text-transform:none; letter-spacing:0; }
.bx-chip-type{ background:rgba(245,200,74,.12); border:1px solid rgba(245,200,74,.35); color:#f5c84a; border-radius:999px; padding:.18rem .6rem; font-size:.7rem; font-weight:700; text-transform:none; letter-spacing:0; }
.bx-callout{ border-radius:14px; padding:1rem 1.2rem; margin:1.2rem 0; border:1px solid var(--bx-border);
  background:linear-gradient(162deg,#151c26,#0d1219); }
.bx-callout .bx-tag{ display:block; margin-bottom:.35rem; }
.bx-callout.is-where{ border-color:rgba(70,200,255,.32); background:linear-gradient(162deg,#13202c,#0d1219); }
.bx-callout.is-why{ border-color:rgba(120,160,210,.18); }
.bx-callout.is-warn{ border-color:rgba(248,177,74,.32); }
.bx-callout.is-warn .bx-tag{ color:#f8b14a; }
.bx-callout p{ margin:.2rem 0; }
.bx-concept{ display:block; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.bx-concept:last-child{ border-bottom:none; }
.bx-concept b{ color:#fff; }
.bx-list-clean{ list-style:none; padding:0; margin:.3rem 0 0; }
.bx-list-clean li{ padding:.4rem 0 .4rem 1.5rem; position:relative; color:var(--bx-text); }
.bx-list-clean li::before{ content:''; position:absolute; left:.25rem; top:.95rem; width:6px; height:6px; border-radius:50%; background:var(--bx-cyan); }
.bx-list-clean.is-warn li::before{ background:#f8b14a; }
.bx-reto{ border-radius:16px; padding:1.2rem 1.3rem; margin:1.6rem 0 .4rem; border:1px solid rgba(43,143,255,.42);
  background:linear-gradient(160deg,rgba(43,143,255,.16),rgba(43,143,255,.02)); box-shadow:0 0 30px rgba(43,143,255,.15); }
.bx-reto .bx-tag{ color:#7fdcff; display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; }
.bx-reto .xp{ background:linear-gradient(#f7d45e,#d9a528); color:#3a2a00; font-weight:800; font-size:.7rem; padding:.12rem .5rem; border-radius:999px; }

/* ============================================================
   v6.2 — Orientación de lección "a lo ancho" (menos scroll)
   Dónde estás · Objetivo · Por qué importa en 3 columnas;
   Conceptos clave a lo ancho debajo (2 columnas).
   ============================================================ */
.bx-lead { color:var(--bx-text-dim); font-size:1.05rem; line-height:1.6; margin:.2rem 0 1.1rem; }
.bx-orient { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; margin:.6rem 0 1.7rem; }
.bx-ocard { display:flex; flex-direction:column; border-radius:16px; border:1px solid rgba(43,143,255,.40);
  background:linear-gradient(rgba(43,143,255,.10),rgba(43,143,255,.02)), linear-gradient(162deg,#151c26,#0d1219);
  padding:1.15rem 1.3rem;
  box-shadow:inset 0 0 0 1px rgba(43,143,255,.22), 0 0 22px rgba(43,143,255,.22); }
.bx-ocard .bx-tag { display:block; margin-bottom:.45rem; }
.bx-ocard p { margin:.2rem 0; }
.bx-ocard p:first-of-type { margin-top:0; }
.bx-ocard--wide { grid-column:1 / -1; }
.bx-concepts-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
.bx-concepts-grid .bx-concept { padding:.5rem 0; }
@media (max-width:900px){
  .bx-orient { grid-template-columns:1fr 1fr; }
  .bx-ocard--wide { grid-column:1 / -1; }
}
@media (max-width:600px){
  .bx-orient { grid-template-columns:1fr; }
  .bx-concepts-grid { grid-template-columns:1fr; }
}

/* La vista de lección usa todo el ancho disponible de la página (no columna estrecha) */
.bx-page--wide { max-width:none; }

/* mismo efecto "botón activo del lateral" en el cuadro de Plantilla de la lección */
.bx-lesson .bx-card { border:1px solid rgba(43,143,255,.40);
  background:linear-gradient(rgba(43,143,255,.08),rgba(43,143,255,.015)), linear-gradient(162deg,#151c26,#0d1219);
  box-shadow:inset 0 0 0 1px rgba(43,143,255,.20), 0 0 22px rgba(43,143,255,.20); }

/* ============================================================
   v6.3 — Lección: pasos verticales y bloques finales a 2 columnas
   ============================================================ */
/* Paso a paso: cuando las capturas son verticales, 2 por fila (1ª a la izquierda) */
.bx-steps.is-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.4rem; align-items:start; }
.bx-steps.is-grid2 .bx-stepblock { margin:0; padding-bottom:0; border-bottom:none; }
/* Pasos sin captura → fila entera */
.bx-steps.is-grid2 .bx-stepblock.no-shot { grid-column:1 / -1; }
/* Separador de sección dentro del grid */
.bx-step-sep { grid-column:1 / -1; display:flex; align-items:center; gap:1rem; padding:.6rem 0 .2rem; }
.bx-step-sep span { font-weight:700; font-size:1rem; color:#fff; white-space:nowrap; }
.bx-step-sep::before,.bx-step-sep::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.08); }
/* Último impar con captura → centrado solo en su fila */
.bx-steps.is-grid2 .bx-stepblock.is-solo { grid-column:1 / -1; max-width:50%; margin:0 auto; }

/* Más neón en las capturas verticales (se notaba poco sobre fondo claro) */
.bx-shot.is-tall { box-shadow:0 0 0 1px rgba(43,143,255,.6), 0 0 38px rgba(43,143,255,.55); }

/* Bloques finales (Plantilla, Errores, Resultado, Reto) a 2 columnas */
.bx-finblocks { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:stretch; margin-top:1.7rem; }
.bx-finblocks .bx-fcard { padding:1.1rem 1.3rem; }
.bx-finblocks .bx-fcard .bx-list-clean { margin:0; }
.bx-fcard--warn { border-color:rgba(248,177,74,.5)!important;
  background:linear-gradient(rgba(248,177,74,.07),rgba(248,177,74,.015)), linear-gradient(162deg,#1a1610,#0f0c08)!important;
  box-shadow:0 0 0 1px rgba(248,177,74,.28), 0 0 24px rgba(248,177,74,.22)!important; }
.bx-fcard--ok { border-color:rgba(52,211,153,.5)!important;
  background:linear-gradient(rgba(52,211,153,.07),rgba(52,211,153,.015)), linear-gradient(162deg,#0f1f18,#0c120e)!important;
  box-shadow:0 0 0 1px rgba(52,211,153,.28), 0 0 24px rgba(52,211,153,.22)!important; }
.xp { background:linear-gradient(#f7d45e,#d9a528); color:#3a2a00; font-weight:800; font-size:.7rem; padding:.12rem .5rem; border-radius:999px; }
@media (max-width:820px){
  .bx-finblocks { grid-template-columns:1fr; }
  .bx-steps.is-grid2 { grid-template-columns:1fr; }
}

/* Si un paso vertical queda SOLO en su fila (impar al final), ocupa toda la fila y se centra */
/* (reemplazado por lógica JS con .is-solo) */

/* ===================== v1.2 — quiz, reto, mapa de viaje, confeti ===================== */

/* --- Microanimación de recompensa (confeti) --- */
@keyframes bxConfFall { 0%{ transform:translateY(-12vh) rotate(0); opacity:1 } 100%{ transform:translateY(104vh) rotate(560deg); opacity:.15 } }
.bx-confetti { position:fixed; top:-14px; width:9px; height:14px; border-radius:2px; z-index:99999; pointer-events:none;
  animation:bxConfFall 1.9s cubic-bezier(.25,.6,.4,1) forwards; box-shadow:0 0 6px rgba(255,255,255,.15); }

/* --- Mini-quiz (Comprobación) --- */
.bx-quiz { margin-top:1.6rem; padding:1.4rem 1.5rem; border-radius:var(--bx-radius);
  border:1px solid rgba(43,143,255,.34); background:linear-gradient(160deg,rgba(43,143,255,.1),rgba(43,143,255,.015));
  box-shadow:0 0 30px rgba(43,143,255,.08); }
.bx-q-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.bx-q { margin-bottom:0; }
.bx-q-text { font-weight:700; color:var(--bx-text); margin:0 0 .6rem; font-size:.92rem; }
.bx-q-opts { display:grid; grid-template-columns:1fr; gap:.4rem; }
@media (max-width:860px){ .bx-q-row { grid-template-columns:1fr; } }
.bx-opt { text-align:left; padding:.5rem .65rem; border-radius:9px; cursor:pointer; color:var(--bx-text);
  background:linear-gradient(#1a212b,#10151d); border:1px solid rgba(120,160,210,.2);
  font-size:.78rem; line-height:1.3; transition:border-color .15s, background .15s, transform .1s; }
.bx-opt:hover { border-color:rgba(58,155,255,.7); background:linear-gradient(rgba(43,143,255,.14),rgba(43,143,255,.03)); }
.bx-opt.correct { border-color:rgba(52,211,153,.7); background:linear-gradient(rgba(52,211,153,.18),rgba(52,211,153,.04)); color:#d6ffe9; cursor:default; }
.bx-opt.wrong { border-color:rgba(248,113,113,.7); background:linear-gradient(rgba(248,113,113,.16),rgba(248,113,113,.03)); animation:bxShake .35s; }
@keyframes bxShake { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }
.bx-q.ok .bx-opt:not(.correct) { opacity:.45; pointer-events:none; }
.bx-quiz-res { margin-top:.4rem; font-weight:700; color:#46c8ff; min-height:1.2em; }
.bx-quiz-res.ok { color:var(--bx-green); }

/* --- Botón "Marcar reto hecho" --- */
.bx-reto-btn { margin-top:.8rem; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  background:linear-gradient(#1c2a3d,#111a28); border:1px solid rgba(43,143,255,.45); color:#fff;
  font-weight:700; font-size:.85rem; border-radius:11px; padding:.55rem 1rem; transition:transform .1s, border-color .15s; }
.bx-reto-btn:hover { border-color:rgba(120,180,255,.7); transform:translateY(-1px); }
.bx-reto-btn.done { background:linear-gradient(rgba(52,211,153,.2),rgba(52,211,153,.05)); border-color:rgba(52,211,153,.6); color:#d6ffe9; }

/* ===================== Mapa de viaje · ROADMAP ===================== */
.bx-roadmap { display:flex; flex-direction:column; margin-top:1.5rem; }
.bx-phase { display:flex; gap:1.3rem; --c:#46c8ff; }
.bx-roadmap .bx-phase:nth-of-type(1){ --c:#46c8ff; }
.bx-roadmap .bx-phase:nth-of-type(2){ --c:#34d399; }
.bx-roadmap .bx-phase:nth-of-type(3){ --c:#f5c84a; }
.bx-roadmap .bx-phase:nth-of-type(4){ --c:#a78bfa; }
.bx-roadmap .bx-phase:nth-of-type(5){ --c:#ff7eb3; }

/* Espina + medallón de estación */
.bx-rm-spine { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:58px; }
.bx-rm-node { position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.35rem; color:#fff;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 85%, #fff 0%), color-mix(in srgb, var(--c) 60%, #000 25%));
  border:2px solid color-mix(in srgb, var(--c) 70%, #fff 30%);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent), 0 6px 20px color-mix(in srgb, var(--c) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.bx-rm-node .bx-rm-check-ic { display:none; }
.bx-phase.is-done .bx-rm-node .bx-rm-num { display:none; }
.bx-phase.is-done .bx-rm-node .bx-rm-check-ic { display:block; }
.bx-phase.is-active .bx-rm-node { animation:bxRmPulse 2.4s ease-in-out infinite; }
@keyframes bxRmPulse { 0%,100%{ box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent),0 6px 20px color-mix(in srgb,var(--c) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.4); }
  50%{ box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 8%,transparent),0 8px 28px color-mix(in srgb,var(--c) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4); } }
.bx-rm-line { flex:1; width:4px; min-height:34px; margin:.4rem 0; border-radius:4px;
  background:linear-gradient(var(--c), color-mix(in srgb, var(--c) 25%, transparent)); opacity:.55; }

/* Tarjeta de fase */
.bx-rm-card { flex:1; min-width:0; margin-bottom:1.6rem; padding:1.2rem 1.3rem; border-radius:18px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--c) 9%, #121821), #0d121a);
  border:1px solid color-mix(in srgb, var(--c) 30%, rgba(120,160,210,.12));
  box-shadow:0 0 30px color-mix(in srgb, var(--c) 9%, transparent); transition:transform .12s, box-shadow .2s; }
.bx-rm-card:hover { transform:translateY(-2px); box-shadow:0 0 38px color-mix(in srgb, var(--c) 18%, transparent); }
.bx-phase.is-done .bx-rm-card { border-color:color-mix(in srgb, var(--bx-green) 40%, transparent); }
.bx-rm-top { display:flex; align-items:center; gap:1rem; }
.bx-rm-ring { position:relative; flex:0 0 auto; width:62px; height:62px; border-radius:50%;
  background:conic-gradient(var(--c) 0%, rgba(255,255,255,.08) 0); display:grid; place-items:center; }
.bx-rm-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#0d121a; }
.bx-rm-ringpct { position:relative; z-index:1; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:.86rem; color:#fff; }
.bx-rm-headtx { flex:1; min-width:0; }
.bx-rm-phaselabel { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); padding:.16rem .55rem; border-radius:999px; margin-bottom:.35rem; }
.bx-rm-title { display:flex; align-items:center; gap:.5rem; font-size:1.2rem; font-weight:800; color:#fff; margin:0 0 .25rem; }
.bx-rm-title svg { color:var(--c); }
.bx-rm-blurb { color:#9aa6b4; font-size:.86rem; margin:0; max-width:62ch; }
.bx-rm-stat { flex:0 0 auto; text-align:center; }
.bx-rm-count { display:block; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.05rem; color:#fff; }
.bx-rm-lessons-lbl { font-size:.7rem; color:#8a94a3; font-weight:600; }

/* Checkpoints (lecciones) */
.bx-rm-checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.45rem; margin-top:1.1rem; }
.bx-rm-check { display:flex; align-items:center; gap:.55rem; padding:.5rem .75rem; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.025); border:1px solid rgba(120,160,210,.14); transition:border-color .15s, transform .1s, background .15s; }
.bx-rm-check:hover { border-color:color-mix(in srgb, var(--c) 55%, transparent); background:color-mix(in srgb, var(--c) 7%, transparent); transform:translateX(2px); }
.bx-rm-chkdot { flex:0 0 auto; width:13px; height:13px; border-radius:50%; border:2px solid color-mix(in srgb, var(--c) 60%, #555); position:relative; }
.bx-rm-check.is-done .bx-rm-chkdot { background:var(--bx-green); border-color:var(--bx-green); box-shadow:0 0 8px rgba(52,211,153,.6); }
.bx-rm-check.is-done .bx-rm-chkdot::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:.6rem; font-weight:900; color:#06281a; }
.bx-rm-chktx { flex:1; color:#dce3ec; font-size:.84rem; font-weight:600; line-height:1.25; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-rm-check.is-done .bx-rm-chktx { color:#8a94a3; }
@media (max-width:640px){ .bx-rm-top{ flex-wrap:wrap; } .bx-rm-stat{ order:3; } }

/* ===================== Ilustración hero de la lección ===================== */
/* Banner panorámico con título a un lateral (cabecera de la lección) */
.bx-hero-band { position:relative; width:100%; height:260px; border-radius:16px; overflow:hidden;
  margin:.6rem 0 1.4rem; border:1px solid rgba(120,160,210,.16); box-shadow:0 14px 36px rgba(0,0,0,.45);
  background:radial-gradient(90% 130% at 62% 45%, #14202f 0%, #0b121b 55%, #070b11 100%); }
.bx-hero-band > img { position:absolute; left:66%; top:0; transform:translateX(-50%); height:100%; width:auto;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 17%, #000 84%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 17%, #000 84%, transparent 100%); }
.bx-hero-band .bx-hero-scrim { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,11,17,.85) 0%, rgba(8,11,17,.45) 30%, rgba(8,11,17,0) 55%); }
.bx-hero-band .bx-hero-txt { position:absolute; left:9%; right:48%; top:0; bottom:0;
  display:flex; flex-direction:column; justify-content:center; }
.bx-hero-band .bx-hero-num { color:#46c8ff; font-weight:700; letter-spacing:.12em; font-size:.74rem;
  text-transform:uppercase; margin-bottom:.5rem; }
.bx-hero-band .bx-hero-h { font-family:'Plus Jakarta Sans',sans-serif; font-size:2rem; font-weight:800;
  color:#fff; margin:0; line-height:1.08; text-shadow:0 2px 14px rgba(0,0,0,.6); }
@media (max-width:640px){ .bx-hero-band{ height:200px; } .bx-hero-band .bx-hero-txt{ right:34px; }
  .bx-hero-band .bx-hero-h{ font-size:1.4rem; } .bx-hero-band .bx-hero-scrim{ background:linear-gradient(180deg, rgba(8,11,17,.2), rgba(8,11,17,.92)); } }

/* Variante --full: imagen propia de la lección (foto de tema, no un personaje recortable).
   Ocupa TODO el ancho del banner en vez de un fragmento a la derecha. */
.bx-hero-band--full > img { left:0; top:0; transform:none; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%; -webkit-mask-image:none; mask-image:none; }
.bx-hero-band--full .bx-hero-scrim { background:linear-gradient(0deg, rgba(7,10,15,.94) 0%, rgba(7,10,15,.55) 45%, rgba(7,10,15,.15) 100%); }
.bx-hero-band--full .bx-hero-txt { left:9%; right:9%; top:auto; bottom:0; height:auto;
  justify-content:flex-end; padding-bottom:1.2rem; }
@media (max-width:640px){ .bx-hero-band--full .bx-hero-txt{ right:9%; } }

/* ===================== Guía-mascota + bocadillo ===================== */
.bx-guia { display:flex; align-items:center; gap:20px; margin:1rem 0 1.6rem; padding:18px 22px; border-radius:20px;
  background:radial-gradient(120% 100% at 0% 0%, rgba(31,127,214,.16), transparent 55%), linear-gradient(155deg,#121a24,#0a0e14);
  border:1px solid rgba(120,160,210,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.45); }
.bx-guia-img { height:160px; width:auto; flex:0 0 auto; filter:drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.bx-guia-bubble { position:relative; flex:1; min-width:0; border-radius:16px; padding:16px 18px;
  background:linear-gradient(160deg, rgba(31,127,214,.16), rgba(20,26,35,.92)); border:1px solid rgba(120,170,230,.28); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.bx-guia-bubble::before { content:""; position:absolute; left:-9px; top:34px; width:18px; height:18px; transform:rotate(45deg);
  background:linear-gradient(160deg, rgba(31,127,214,.16), rgba(20,26,35,.92)); border-left:1px solid rgba(120,170,230,.28); border-bottom:1px solid rgba(120,170,230,.28); }
.bx-guia-chip { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.06em; color:#3a2a00;
  background:linear-gradient(#f0d98a,#D4AF37); padding:5px 12px; border-radius:999px; margin-bottom:10px; }
.bx-guia-bubble p { margin:0; color:#eaeef4; font-size:15px; line-height:1.55; }
@media (max-width:640px){ .bx-guia{ flex-direction:column; text-align:center; } .bx-guia-bubble::before{ display:none; } .bx-guia-img{ height:130px; } }

/* ===================== Simulador de objeciones ===================== */
.bx-objmod { margin-top:2.2rem; }
.bx-objmod-head { display:flex; align-items:center; gap:1rem; margin-bottom:.4rem; padding:.7rem 1rem; border-radius:16px;
  background:radial-gradient(120% 130% at 0% 0%, rgba(31,127,214,.14), transparent 60%), linear-gradient(155deg,#141d29,#0b1119);
  border:1px solid rgba(120,160,210,.16); }
.bx-objmod-robot { flex:0 0 auto; height:78px; width:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.bx-objmod-title { margin:0; color:#fff; font-size:1.2rem; font-weight:800; }
.bx-obj-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-top:.9rem; align-items:start; }
.bx-obj { padding:1.2rem 1.3rem; }
.bx-maria { flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; color:#3a2a00; background:linear-gradient(#f0d98a,#D4AF37); font-size:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.4); }
.bx-maria-foto { flex:0 0 auto; width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(212,175,55,.7); box-shadow:0 2px 8px rgba(0,0,0,.45); }
.bx-cliente-lbl { font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#D4AF37; margin-bottom:.25rem; }
.bx-maria-bubble { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  border-radius:4px 14px 14px 14px; padding:.65rem .85rem; color:#eef2f7; font-size:.96rem; line-height:1.45; }
.bx-obj-por { color:#8a94a3; font-size:.84rem; line-height:1.45; margin:.8rem 0 .95rem; }
.bx-obj-por b { color:#9fb4cf; }
.bx-obj-reveal { font-size:.85rem; padding:.5rem 1.1rem; }
.bx-obj-reveal.done { background:linear-gradient(#1a212b,#10151d); border-color:rgba(120,160,210,.25); }
.bx-obj-ans { margin-top:.95rem; border-top:1px solid rgba(255,255,255,.08); padding-top:.85rem; animation:bxFade .3s ease both; }
.bx-obj-resp { color:#d6ffe9; background:linear-gradient(160deg,rgba(52,211,153,.12),rgba(52,211,153,.02));
  border:1px solid rgba(52,211,153,.3); border-radius:12px; padding:.7rem .9rem; margin:0 0 .6rem; font-size:.93rem; line-height:1.5; }
.bx-obj-evita { color:#f8b14a; font-size:.82rem; line-height:1.45; }
@media (max-width:1080px){ .bx-obj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .bx-obj-grid{ grid-template-columns:1fr; } .bx-objmod-head{ flex-wrap:wrap; } }

/* ===================== Rutas por objetivo ===================== */
.bx-ruta-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.6rem; align-items:start; }
.bx-ruta { padding:1.2rem 1.3rem; }
.bx-ruta-h { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.9rem; }
.bx-ruta-ic { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#46c8ff;
  background:linear-gradient(150deg, rgba(43,143,255,.18), rgba(13,18,26,.5)); border:1px solid rgba(43,143,255,.3); }
.bx-ruta-bar { height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.bx-ruta-bar > span { display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,#46c8ff,#1466d6); box-shadow:0 0 10px rgba(43,143,255,.6); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.bx-ruta-steps { display:flex; flex-direction:column; gap:.4rem; }
.bx-ruta-step { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.025); border:1px solid rgba(120,160,210,.14); transition:border-color .15s, transform .1s; }
.bx-ruta-step:hover { border-color:rgba(120,180,255,.5); transform:translateX(2px); }
.bx-ruta-dot { flex:0 0 auto; width:13px; height:13px; border-radius:50%; border:2px solid rgba(120,160,210,.4); position:relative; }
.bx-ruta-step.is-done .bx-ruta-dot { background:var(--bx-green); border-color:var(--bx-green); box-shadow:0 0 8px rgba(52,211,153,.6); }
.bx-ruta-step.is-done .bx-ruta-dot::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:.6rem; font-weight:900; color:#06281a; }
.bx-ruta-tx { flex:1; color:#dce3ec; font-size:.86rem; font-weight:600; line-height:1.3; min-width:0; }
.bx-ruta-step.is-done .bx-ruta-tx { color:#8a94a3; }
@media (max-width:760px){ .bx-ruta-grid{ grid-template-columns:1fr; } }


/* ============================================================
   v6.5 — Responsive móvil: barra superior + lección a 1 columna
   ============================================================ */
@media (max-width:600px){
  .bx-topbar{ padding-left:.85rem; padding-right:.85rem; gap:.5rem; }
  .bx-crumb{ font-size:.8rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bx-topbar-right{ gap:.4rem; flex-shrink:0; }
  .bx-topbar-right .bx-chip{ padding:.28rem .5rem; font-size:.68rem; gap:.3rem; }
  .bx-topbar-right .bx-chip svg{ width:12px; height:12px; }
  .bx-topbar-right .bx-avatar{ width:32px!important; height:32px!important; }
  /* Lección: pasos y bloques finales a 1 sola columna */
  .bx-steps.is-grid2{ grid-template-columns:1fr; }
  .bx-steps.is-grid2 .bx-stepblock.is-solo{ max-width:100%; margin:0; }
  .bx-finblocks{ grid-template-columns:1fr; }
  .bx-shot, .bx-shot img, .bx-shot-wrap, .bx-shot-wrap img{ max-width:100%!important; height:auto; }
}
@media (max-width:400px){
  .bx-topbar-right .bx-chip-gold{ display:none; }  /* pantallas muy estrechas: deja solo XP */
}

/* v6.5 — remates responsive (pantallas estrechas 320–380) */
@media (max-width:600px){
  .bx-rm-checks{ grid-template-columns:1fr; }
  .bx-main img, .bx-main video{ max-width:100%!important; height:auto; }
  .bx-shot-wrap.is-tall{ max-width:100%; }
}
/* Red de seguridad anti-scroll lateral (clip no rompe position:sticky) */
html, body{ overflow-x:clip; }

/* ============================================================
   Tour de bienvenida (solo alumnos, solo la primera vez)
   ============================================================ */
.bx-tour-overlay{ position:fixed; inset:0; z-index:400; pointer-events:none; }
.bx-tour-click{ position:fixed; inset:0; z-index:398; background:transparent; pointer-events:auto; }
.bx-tour-dim{ position:fixed; inset:0; z-index:399; background:rgba(4,6,10,.82); pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .3s ease; }
.bx-tour-dim.show{ opacity:1; visibility:visible; }
/* el foco es la ÚNICA fuente de oscurecimiento en los pasos con objetivo: su
   box-shadow gigante tapa todo MENOS su propio rectángulo, que queda transparente
   y deja ver el elemento real, bien iluminado (antes había una capa opaca detrás
   que anulaba ese "agujero" y por eso apenas se veía nada). */
.bx-tour-spot{ position:fixed; z-index:400; border-radius:16px; box-shadow:0 0 0 9999px rgba(4,6,10,.82);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1),
  width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.bx-tour-spot.show{ opacity:1; visibility:visible; }
.bx-tour-card{ position:fixed; z-index:401; width:320px; max-width:88vw; pointer-events:auto;
  background:linear-gradient(160deg,#171f2a,#0c1119); border:1px solid rgba(245,200,74,.4); border-radius:16px;
  padding:1.2rem 1.3rem; box-shadow:0 20px 55px rgba(0,0,0,.6); transition:top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1); }
.bx-tour-card.is-center{ left:50%!important; top:50%!important; transform:translate(-50%,-50%); text-align:center; width:360px; }
.bx-tour-bot-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
.bx-tour-card.is-center .bx-tour-bot-row{ flex-direction:column; }
.bx-tour-bot{ width:54px; height:auto; flex:0 0 auto; filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));
  animation:bxTourBob 2.6s ease-in-out infinite; }
.bx-tour-card.is-center .bx-tour-bot{ width:82px; }
@keyframes bxTourBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-7px) rotate(2deg); } }
.bx-tour-prog{ display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; max-width:180px; }
.bx-tour-card.is-center .bx-tour-prog{ max-width:none; }
.bx-tour-prog-bar{ flex:1; min-width:0; height:4px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.bx-tour-prog-bar span{ display:block; height:100%; width:0%; background:#f5c84a; border-radius:999px; box-shadow:0 0 6px rgba(245,200,74,.7); transition:width .3s ease; }
.bx-tour-prog-txt{ flex:0 0 auto; font-size:.68rem; font-weight:700; color:#8a94a3; white-space:nowrap; }
.bx-tour-body h3{ color:#fff; font-size:1.05rem; margin:0 0 .5rem; font-family:'Plus Jakarta Sans'; }
.bx-tour-body p{ color:#c7d2df; font-size:.86rem; line-height:1.6; margin:0; }
.bx-tour-actions{ display:flex; align-items:center; gap:.5rem; margin-top:1.2rem; }
.bx-tour-card.is-center .bx-tour-actions{ justify-content:center; }
.bx-tour-skip{ background:none; border:none; color:#748094; font-size:.78rem; cursor:pointer; font-family:inherit; padding:.4rem 0; }
.bx-tour-skip:hover{ color:#cdd5e0; text-decoration:underline; }
.bx-tour-ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#e7eef6;
  border-radius:9px; padding:.5rem .9rem; font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit; }
.bx-tour-ghost:hover{ background:rgba(255,255,255,.1); }
.bx-tour-primary{ background:var(--bx-gold-grad); border:none; color:#1a1300; border-radius:9px; padding:.5rem 1.1rem;
  font-size:.82rem; font-weight:800; cursor:pointer; font-family:inherit; }
.bx-tour-primary:hover{ filter:brightness(1.08); }
@media (max-width:480px){ .bx-tour-card{ width:88vw; } }

/* ============================================================
   Intro cinemática (vídeo con audio al entrar en la plataforma)
   ============================================================ */
body.bx-intro-open{ overflow:hidden; }
.bx-intro{ position:fixed; inset:0; z-index:500; background:#000; opacity:1; transition:opacity .7s ease; }
.bx-intro.is-out{ opacity:0; pointer-events:none; }

/* --- pantalla de entrada --- */
.bx-intro-splash{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 42%, #07131c 0%, #010409 70%);
  opacity:1; transition:opacity .5s ease; }
.bx-intro-splash.hide{ opacity:0; pointer-events:none; }
.bx-intro-grid{ position:absolute; left:-20%; right:-20%; bottom:-12%; height:58%;
  background-image:linear-gradient(rgba(0,212,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.22) 1px,transparent 1px);
  background-size:52px 52px; transform:perspective(420px) rotateX(62deg);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);
  mask-image:linear-gradient(180deg,transparent,#000 45%);
  animation:bxIntroGrid 2.6s linear infinite; }
@keyframes bxIntroGrid{ from{ background-position:0 0,0 0; } to{ background-position:0 52px,0 0; } }
.bx-intro-scan{ position:absolute; left:0; right:0; top:-12%; height:12%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.1) 55%,rgba(0,212,255,.32));
  animation:bxIntroScan 3.4s ease-in-out infinite; }
@keyframes bxIntroScan{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:1; }
  60%{ transform:translateY(870%); opacity:.9; } 100%{ transform:translateY(920%); opacity:0; } }
.bx-intro-center{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1rem; animation:bxIntroPop 1s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes bxIntroPop{ from{ transform:scale(.82); opacity:0; } to{ transform:scale(1); opacity:1; } }
.bx-intro-logo{ width:min(340px,70vw); height:auto;
  filter:drop-shadow(0 0 34px rgba(0,212,255,.55)); animation:bxIntroGlow 2.4s ease-in-out infinite; }
@keyframes bxIntroGlow{ 0%,100%{ filter:drop-shadow(0 0 22px rgba(0,212,255,.4)); }
  50%{ filter:drop-shadow(0 0 48px rgba(0,212,255,.85)); } }
.bx-intro-line{ width:min(300px,60vw); height:2px; margin:1.2rem 0 .9rem; border-radius:2px;
  background:linear-gradient(90deg,transparent,#00d4ff,transparent);
  animation:bxIntroLine 1.1s .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bxIntroLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.bx-intro-sub{ color:#8fd0ff; font-weight:700; letter-spacing:.3em; text-indent:.3em; font-size:.82rem;
  animation:bxIntroFade .9s .6s ease both; }
@keyframes bxIntroFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.bx-intro-enter{ position:relative; margin-top:2.4rem; display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bx-gold-grad); color:#1a1300; border:none; border-radius:999px;
  padding:1rem 2.6rem; font-family:inherit; font-size:1.05rem; font-weight:800; letter-spacing:.1em;
  cursor:pointer; box-shadow:0 0 0 0 rgba(245,200,74,.55), 0 14px 40px rgba(0,0,0,.55);
  animation:bxIntroFade .9s .9s ease both, bxIntroPulse 2s 1.4s ease-out infinite; }
@keyframes bxIntroPulse{ 0%{ box-shadow:0 0 0 0 rgba(245,200,74,.55), 0 14px 40px rgba(0,0,0,.55); }
  70%{ box-shadow:0 0 0 22px rgba(245,200,74,0), 0 14px 40px rgba(0,0,0,.55); }
  100%{ box-shadow:0 0 0 0 rgba(245,200,74,0), 0 14px 40px rgba(0,0,0,.55); } }
.bx-intro-enter:hover{ filter:brightness(1.1); }
.bx-intro-ring{ position:absolute; inset:-7px; border-radius:999px; pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 78%, #ffe07a 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:bxIntroSpin 2.6s linear infinite; }
@keyframes bxIntroSpin{ to{ transform:rotate(360deg); } }
.bx-intro-hint{ margin-top:1.1rem; color:#5b6b7d; font-size:.8rem; font-weight:600;
  animation:bxIntroFade .9s 1.2s ease both; }

/* --- vídeo --- */
.bx-intro-stage{ position:absolute; inset:0; display:none; place-items:center; background:#000; }
.bx-intro-stage.show{ display:grid; animation:bxIntroFade .45s ease both; }
.bx-intro-stage video{ width:100%; height:100%; object-fit:contain; display:block; }
.bx-intro-c{ position:absolute; width:44px; height:44px; pointer-events:none; z-index:2;
  filter:drop-shadow(0 0 8px rgba(240,165,0,.5)); animation:bxIntroFade .6s .4s ease both; }
.bx-intro-c.tl{ top:18px; left:18px; border-top:3px solid #ffb703; border-left:3px solid #ffb703; border-top-left-radius:10px; }
.bx-intro-c.tr{ top:18px; right:18px; border-top:3px solid #ffb703; border-right:3px solid #ffb703; border-top-right-radius:10px; }
.bx-intro-c.bl{ bottom:18px; left:18px; border-bottom:3px solid #ffb703; border-left:3px solid #ffb703; border-bottom-left-radius:10px; }
.bx-intro-c.br{ bottom:18px; right:18px; border-bottom:3px solid #ffb703; border-right:3px solid #ffb703; border-bottom-right-radius:10px; }
.bx-intro-skip{ position:absolute; right:26px; bottom:26px; z-index:3; opacity:0; pointer-events:none;
  background:rgba(8,11,16,.66); border:1px solid rgba(255,255,255,.22); color:#e7eef6; border-radius:999px;
  padding:.55rem 1.1rem; font-family:inherit; font-size:.84rem; font-weight:700; cursor:pointer;
  backdrop-filter:blur(6px); transition:opacity .4s ease; }
.bx-intro-skip.show{ opacity:1; pointer-events:auto; }
.bx-intro-skip:hover{ border-color:#f5c84a; color:#ffe07a; }