/* ============================================================================
   telus-marca.css — capa de marca Telus Energy · Propuesta B «Señal» (1-nov-2026)
   ----------------------------------------------------------------------------
   · Fuente única de los colores y tipografías de la marca. La carga telus-nav.js
     en todas las páginas con cabecera; las páginas sin cabecera la enlazan directo:
       <link rel="stylesheet" href="/assets/marca/telus-marca.css">
   · Tokens nuevos con prefijo --tm-. Además re-mapea, en contraste oscuro, las
     variables que ya usan las páginas (--void, --bg, --panel, --cyan, --green…)
     para que todo el sitio tome la paleta B sin editar cada página.
   · El contraste claro lo sigue manejando telus-nav.css (html[data-theme="light"]).
   · Guía completa: /assets/marca/  ·  proyecto «Ecosistema» → claude/guia-marca-telus-1nov2026.md
   ==========================================================================*/

/* ---------- Tipografías (servidas desde el propio sitio) ---------- */
@font-face{font-family:'Exo 2';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/marca/fonts/exo-2-400.woff2) format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/marca/fonts/exo-2-500.woff2) format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/marca/fonts/exo-2-600.woff2) format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/marca/fonts/exo-2-700.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/marca/fonts/orbitron-500.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/marca/fonts/orbitron-600.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/marca/fonts/orbitron-700.woff2) format('woff2')}
/* Los títulos del sitio estaban en Chakra Petch: se sirven con Exo 2 (la tipografía de títulos de la marca)
   sin tocar cada página. Esta hoja se carga después de Google Fonts, así que estas caras prevalecen. */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/marca/fonts/exo-2-400.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/marca/fonts/exo-2-500.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/marca/fonts/exo-2-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/marca/fonts/exo-2-700.woff2) format('woff2')}

/* ---------- Tokens de marca ---------- */
:root{
  /* Degradado de capas: Clima → Mercado → Prospectiva → Riesgo → Decisión */
  --tm-clima:#00E5FF; --tm-mercado:#00FFA8; --tm-prospectiva:#7CFF00; --tm-riesgo:#D8FF00; --tm-decision:#FFE600;
  --tm-grad:linear-gradient(90deg,#00E5FF 0%,#00FFA8 25%,#7CFF00 50%,#D8FF00 75%,#FFE600 100%);
  /* Azul noche */
  --tm-fondo:#04070F; --tm-superficie:#070C18; --tm-superficie-2:#0E1524; --tm-linea:rgba(120,190,255,.10); --tm-linea-fuerte:rgba(120,190,255,.18);
  --tm-texto:#E9EEF6; --tm-texto-2:#8C99AE; --tm-alerta:#FF6B6B;
  /* Acentos para fondos claros (documentos, impresos, tema claro) */
  --tm-claro-clima:#00B8E6; --tm-claro-mercado:#00C9A7; --tm-claro-prospectiva:#2FB845; --tm-claro-riesgo:#8CC400; --tm-claro-decision:#D4B800;
  --tm-grad-claro:linear-gradient(90deg,#00B8E6 0%,#00C9A7 25%,#2FB845 50%,#8CC400 75%,#D4B800 100%);
  --tm-tinta-clara:#0B1220;
  /* Tipografías */
  --tm-font-logo:'Orbitron',system-ui,sans-serif; --tm-font-titulo:'Exo 2',system-ui,sans-serif;
  --tm-font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --tm-font-mono:'JetBrains Mono',ui-monospace,monospace;
  /* Forma */
  --tm-radio:14px; --tm-radio-lg:22px; --tm-brillo:0 0 18px rgba(0,229,255,.18);
}

/* ---------- Contraste oscuro: las variables que ya usan las páginas toman la paleta B ----------
   (selector de especificidad 0,1,1: gana sobre el :root de cada página sin necesidad de !important) */
html:not([data-theme="light"]){
  --void:#04070F; --bg:#04070F; --panel:#070C18; --panel-2:#0E1524; --panel2:#0E1524; --surface:#070C18; --surface-1:#070C18; --surface2:#0E1524;
  --line:rgba(120,190,255,.10); --ink:#E9EEF6; --mute:#8C99AE; --muted:#8C99AE;
  --cyan:#00E5FF; --green:#7CFF00; --yellow:#FFE600; --lima:#D8FF00; --lime:#7CFF00; --teal:#00FFA8;
  --spectrum:linear-gradient(90deg,#00E5FF 0%,#00FFA8 25%,#7CFF00 50%,#D8FF00 75%,#FFE600 100%);
  --grad:linear-gradient(90deg,#00E5FF 0%,#00FFA8 25%,#7CFF00 50%,#D8FF00 75%,#FFE600 100%);
  --c1:#00E5FF; --c2:#00FFA8; --c3:#7CFF00; --c4:#FFE600;
}
html:not([data-theme="light"]) body{background-color:#04070F}

/* ---------- Utilidades de marca ---------- */
.tm-grad-text{background:var(--tm-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tm-filete{display:flex;align-items:center;gap:12px;font-family:var(--tm-font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm-texto-2)}
.tm-filete::before,.tm-filete::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.tm-filete::after{background:linear-gradient(90deg,currentColor,transparent)}
.tm-nodo{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tm-clima);box-shadow:0 0 10px currentColor}