/* ============================================================
   ¡Hablemos Inglés! · sistema visual "Constelación"
   ------------------------------------------------------------
   Ver ../brand-profile-hablemos-ingles.md para el DNA completo.
   Estructura heredada del motor DTMM (deck.css / hub.css) pero
   con tema propio: negro + rojo, no carbón/crema/mostaza.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Spline+Sans:wght@300;400;500;600&family=Martian+Mono:wght@400;500;600&display=swap');

:root{
  --accent-text:#ea4a63;
  --accent-surface:#c8102e;
  --hub-panel-rgb:22,20,20;
  /* --- tema Constelación (sustituye el bloque de tema de deck.css) --- */
  --char:#0a0a0a; --char-soft:#161414;
  --paper:#0a0a0a; --paper-soft:#161414;      /* sin modo "paper" claro: la marca es siempre negra */
  /* "sesame"/"ketchup" = nuestro rojo, el mismo de las piezas de marca.
     Nota de contraste (por si el rojo se ve apagado en pantallas muy
     brillantes): #c8102e sobre negro da 3.37:1, bajo el AA de 4.5:1 para
     texto pequeño. Se decidió mantener el rojo de marca tal cual — el
     bug real reportado era otro (ver más abajo, body.on-paper .navbtn).
     --sesame-deep queda como alias del mismo valor por compatibilidad. */
  --sesame:#c8102e; --sesame-hi:#e13350; --sesame-deep:#c8102e;
  --ketchup:#c8102e; --lettuce:#7c9a3e;
  --on-char:#f2f0ec; --on-char-soft:#c9c5be; --on-char-mute:#8a8680;
  --on-paper:#f2f0ec; --on-paper-soft:#c9c5be; --on-paper-mute:#8a8680;
  --line-d:rgba(242,240,236,0.12); --line-d2:rgba(242,240,236,0.22);
  --line-l:rgba(242,240,236,0.12); --line-l2:rgba(242,240,236,0.22);
  --glow:rgba(200,16,46,0.45);
  --ease:cubic-bezier(0.22,1,0.36,1);

  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-body:'Spline Sans',system-ui,sans-serif;
  --font-serif:'Spline Sans',system-ui,sans-serif;  /* la marca no usa serif; alias para no romper átomos heredados */
  --font-mono:'Martian Mono',ui-monospace,monospace;

  --dorado-marca:#d4a94a;  /* SOLO para el lockup de La Red de Luz — nunca como acento de composición */

  --mega:clamp(2.1rem,7vw,6rem);
  --h1:clamp(1.7rem,4.6vw,3.8rem);
  --lead:clamp(1.05rem,1.7vw,1.5rem);
}

/* ===== Academia hub theme ===== */
.theme-english{background:#0a0a0a;font-family:'Spline Sans',system-ui,sans-serif}
.theme-english .hub-identity h1{font-family:'Archivo Black',system-ui,sans-serif;
  text-transform:uppercase;font-size:clamp(2.8rem,6vw,6.2rem);line-height:.88;letter-spacing:.005em}
.theme-english .featured-class h2,.theme-english .row-head h3,
.theme-english .deck-card h4{font-family:'Archivo Black',system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:-.01em}
.motif-english{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 78% 18%,rgba(200,16,46,.22),transparent 30%),
  linear-gradient(rgba(242,240,236,.02) 1px,transparent 1px),
  linear-gradient(90deg,rgba(242,240,236,.02) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px}
.motif-english::before,.motif-english::after{content:"";position:absolute;left:-10%;
  width:120%;height:42%;border:1px solid rgba(200,16,46,.42);border-radius:50%}
.motif-english::before{top:18%;transform:rotate(5deg)}
.motif-english::after{top:34%;border-color:rgba(242,240,236,.1);transform:rotate(-3deg)}
.theme-english .constellation-avatar{color:var(--accent-text)}

/* Archivo Black es más ancha que Unbounded (para la que --mega fue calibrado
   en deck.css); en móvil necesita un piso más bajo para no desbordar */
@media(max-width:480px){
  :root{--mega:clamp(1.7rem,9vw,2.6rem)}
}

/* el motor deck.css define .paper con otra paleta; aquí la anulamos
   porque esta marca no tiene variante "clara" — siempre es negra */
.slide.paper{background:var(--char);color:var(--on-char)}
.paper .eyebrow{color:var(--sesame)}
.paper .hl{color:var(--sesame)}
.paper .lead{color:var(--on-char-soft)}

/* titulares: condensada/bold/mayúsculas, tracking ajustado — look broadcast */
.mega,.h1{text-transform:uppercase;letter-spacing:.005em;line-height:.92}

/* el .glow de deck.css trae mostaza hardcodeada (tema DTMM); aquí es rojo */
.glow{background:radial-gradient(circle at center,rgba(200,16,46,0.16) 0%,transparent 70%)}

/* deck.css hardcodea varios tonos de mostaza/crema para el tema DTMM,
   con reglas SEPARADAS para el estado base y para body.on-paper (que en
   DTMM es texto casi negro para leerse sobre fondo crema). Esta marca no
   tiene variante "paper" clara — siempre es negra — así que hay que pisar
   AMBOS estados o el HUD queda casi negro sobre negro en las slides .paper
   (bug real: "‹ Clases" ilegible en slides pensadas como claras). */
#hud,#hint,
body.on-paper #hud,body.on-paper #hint{color:var(--on-char-mute)}
.navbtn,
body.on-paper .navbtn{border-color:var(--line-d2);color:var(--on-char-soft)}
.navbtn:hover,.navbtn.on,
body.on-paper .navbtn:hover,body.on-paper .navbtn.on{border-color:var(--sesame);color:var(--sesame)}
.ab .b{background:rgba(234,74,99,.1)}
/* texto rojo sobre fondo rojo translúcido nunca pasa contraste — la etiqueta
   destacada de .ab .b usa blanco, y el rojo se queda en el borde/acento */
.ab .b .label{color:var(--on-char)}
.bub.you{background:rgba(234,74,99,.16)}
.chip{border-color:rgba(234,74,99,.4)}

/* ============================================================
   Lockup de La Red de Luz (logo + wordmark, dorado, aislado)
   ============================================================ */
.lockup-rdl{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.lockup-rdl img{width:clamp(38px,4.5vw,52px);height:auto;display:block}
.lockup-rdl .wordmark{font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--dorado-marca)}

/* eyebrow tipo "CONSTELACIÓN · CLASES DE INGLÉS" */
.constelacion-tag{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line-d2);border-radius:999px;padding:.4rem 1rem .4rem .5rem;
  margin-bottom:clamp(1.2rem,2.4vw,1.8rem)}
.constelacion-tag .k1{color:var(--on-char-mute)}
.constelacion-tag .k2{color:var(--sesame);font-weight:600}
.constelacion-tag::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--sesame);margin-left:.4rem}

/* badge de estado: ● EN VIVO / ● PRE-LIVE 00:15:00 */
.live-badge{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  justify-content:center;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;
  border:1px solid var(--sesame);border-radius:999px;padding:.6rem 1.1rem;
  color:var(--on-char)}
@media(max-width:420px){
  .live-badge{font-size:.66rem;border-radius:16px;gap:.5rem}
  .live-badge .clock{padding-left:.5rem}
}
.live-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--sesame);
  box-shadow:0 0 12px var(--sesame);animation:pulso 1.6s ease-in-out infinite}
.live-badge .label{color:var(--sesame);font-weight:600;text-transform:uppercase}
.live-badge .clock{padding-left:.9rem;border-left:1px solid var(--line-d2);
  font-variant-numeric:tabular-nums;letter-spacing:.08em}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.live-badge .dot{animation:none}}

/* fondo decorativo: constelación de nodos y líneas (solo portada/cierre) */
.constelacion-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.constelacion-bg svg{width:100%;height:100%}
.constelacion-bg .linea{fill:none;stroke:var(--on-char);stroke-opacity:.14;stroke-width:1}
.constelacion-bg .linea.roja{stroke:var(--sesame);stroke-opacity:.35}
.constelacion-bg .nodo{fill:var(--char);stroke:var(--on-char);stroke-opacity:.3;stroke-width:1}
.constelacion-bg .nodo.rojo{stroke:var(--sesame);stroke-opacity:.7}

/* regla separadora fina, roja/blanca */
.rule-live{width:100%;max-width:20rem;height:1px;margin:clamp(1.2rem,2.4vw,2rem) auto;
  background:linear-gradient(90deg,transparent,var(--sesame),transparent)}

/* frase de cierre de marca */
.frase-red{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-char-mute);text-align:center}
.frase-red .hl{color:var(--sesame)}
.frase-red::before,.frase-red::after{content:"//";color:var(--line-d2);margin:0 .5em}
@media(max-width:420px){.frase-red{font-size:.52rem;letter-spacing:.16em}}

.theme-english .deck-card .stripe{background:var(--accent-surface)}
.theme-english .deck-card .lvl,.theme-english .deck-card .go{color:var(--accent-text)}
.theme-english .deck-card:hover{border-color:var(--accent-surface)}