/* ============================================================================
   PUENTE A «LA PIZARRA» para las páginas con CSS propio (2 oct 2026)
   ----------------------------------------------------------------------------
   Por qué existe: 25 páginas sueltas (comunidad, equipo-ia, guía, newsletter,
   Domina IA, Páginas Inteligentes, agentIA, pago…) llevan su propio <style> con
   tokens locales (--bg, --amber, --obsidiana…), Inter/Space Grotesk/DM Sans y
   hasta cian y violeta. En vez de reescribir 25 hojas a mano (y que la siguiente
   sesión las vuelva a separar), esta hoja REDEFINE esos nombres locales con los
   tokens del sistema (css/tokens.css) y fija letra y esquinas.

   Cómo se usa: la página carga /css/tokens.css y DESPUÉS de todo lo demás esta
   hoja, y pone en <html> un atributo `data-pz` con su familia de tokens:
       a = comunidad, equipo-ia, recursos     (--bg --surface --muted --dim…)
       b = guía ChatGPT, newsletter           (--dim claro, --muted oscuro)
       c = Domina IA Online                   (--obsidiana --ambar --offwhite)
       d = pago exitoso                       (--card-bg --text-dim…)
       e = agentIA                            (--bg-primary --accent-primary…)
       f = Páginas Inteligentes y demos       (--pi-*)
   Un acento: el marcador ámbar. El cian, el violeta y los verdes de marca se
   convierten en ámbar o en tiza; el verde y el rojo quedan solo como ESTADO.
   ⛔ No añadir colores aquí: se declaran en css/tokens.css.
   ============================================================================ */

/* ---------- Familia a: comunidad, equipo-ia, recursos ---------- */
html[data-pz="a"] {
  --bg: var(--e-bg); --surface: var(--e-bg-raise); --surface-2: var(--e-panel);
  --border: var(--e-line); --border-h: var(--e-linea-tiza);
  --text: var(--e-text); --muted: var(--e-text-2); --dim: var(--e-muted);
  --amber: var(--e-amber); --amber-l: var(--e-amber-hi); --amber-d: var(--e-amber-deep);
  --violet: var(--e-amber-hi); --cyan: var(--e-amber-hi);
  --green: var(--e-green); --red: var(--e-red);
  --font: var(--e-sans); --mono: var(--e-mono);
}

/* ---------- Familia b: guía ChatGPT, newsletter ---------- */
html[data-pz="b"] {
  --bg: var(--e-bg); --surface: var(--e-bg-raise); --surface-2: var(--e-panel);
  --border: var(--e-line); --text: var(--e-text);
  --dim: var(--e-text-2); --muted: var(--e-muted);
  --amber: var(--e-amber); --amber-light: var(--e-amber-hi);
  --green: var(--e-green); --red: var(--e-red); --blue: var(--e-amber);
}

/* ---------- Familia c: Domina IA Online ---------- */
html[data-pz="c"] {
  --obsidiana: var(--e-bg); --obsidiana-2: var(--e-panel);
  --ambar: var(--e-amber); --ambar-soft: rgba(var(--e-amber-rgb), .12);
  --offwhite: var(--e-text); --muted: var(--e-text-2); --line: var(--e-line);
}

/* ---------- Familia d: pago exitoso ---------- */
html[data-pz="d"] {
  --amber: var(--e-amber); --amber-glow: rgba(var(--e-amber-rgb), .45); --cyan: var(--e-amber-hi);
  --bg: var(--e-bg); --card-bg: var(--e-panel); --border: var(--e-line);
  --text: var(--e-text); --text-dim: var(--e-text-2); --text-soft: var(--e-muted);
}

/* ---------- Familia e: agentIA ---------- */
html[data-pz="e"] {
  --bg-primary: var(--e-bg); --bg-secondary: var(--e-bg-raise);
  --accent-primary: var(--e-amber); --accent-secondary: var(--e-amber-deep);
  --gradient-main: linear-gradient(135deg, var(--e-amber), var(--e-amber-hi));
  --text-primary: var(--e-text); --text-secondary: var(--e-text-2); --text-muted: var(--e-muted);
  --success: var(--e-green); --alert: var(--e-amber); --error: var(--e-red);
  --card-bg: var(--e-panel); --card-border: var(--e-line); --card-hover: var(--e-panel-2);
  --font-heading: var(--e-display); --font-body: var(--e-sans);
}

/* ---------- Familia f: Páginas Inteligentes y demos ---------- */
html[data-pz="f"] {
  --pi-dark: var(--e-bg); --pi-dark-2: var(--e-bg-raise);
  --pi-surface: var(--e-panel); --pi-surface-2: var(--e-panel-2); --pi-surface-3: var(--e-panel-2);
  --pi-border: var(--e-line); --pi-border-hover: var(--e-linea-tiza);
  --pi-cyan: var(--e-amber); --pi-cyan-light: var(--e-amber-hi); --pi-cyan-dark: var(--e-amber-deep);
  --pi-cyan-bg: rgba(var(--e-amber-rgb), .08); --pi-cyan-glow: rgba(var(--e-amber-rgb), .22);
  --pi-amber: var(--e-amber); --pi-amber-light: var(--e-amber-hi); --pi-amber-dark: var(--e-amber-deep);
  --pi-amber-bg: rgba(var(--e-amber-rgb), .10); --pi-amber-glow: rgba(var(--e-amber-rgb), .30);
  --pi-success: var(--e-green);
}

/* ---------- Letra y gesto comunes a todas las familias ---------- */
html[data-pz] body { font-family: var(--e-sans); }
html[data-pz] h1, html[data-pz] h2, html[data-pz] h3,
html[data-pz] .display, html[data-pz] .serif { font-family: var(--e-display); letter-spacing: -0.01em; }
html[data-pz] h1 { line-height: 1.06; }
html[data-pz] code, html[data-pz] kbd, html[data-pz] pre, html[data-pz] .mono { font-family: var(--e-mono); }
html[data-pz] button, html[data-pz] input, html[data-pz] select, html[data-pz] textarea { font-family: inherit; }
html[data-pz] input:focus-visible, html[data-pz] select:focus-visible, html[data-pz] textarea:focus-visible,
html[data-pz] button:focus-visible, html[data-pz] a:focus-visible {
  outline: 2px solid var(--e-amber); outline-offset: 2px;
}
/* El fondo de pizarra gana a los degradados «cósmicos» sueltos de cada página */
html[data-pz] body { background-color: var(--e-bg); color: var(--e-text); }
html[data-pz] .orb, html[data-pz] .orb-a, html[data-pz] .orb-b, html[data-pz] .orb-c { display: none; }