@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

/*
  BolsaHoy — Design tokens compartidos.
  Prefijo --bh-* deliberado para no colisionar con las variables locales
  (--blue, --green, --ink, etc.) que cada página ya declara en su propio
  <style> inline. Cada página remapea sus variables históricas hacia estas
  (--blue: var(--bh-blue);) en vez de reescribir su CSS existente.
*/

:root,
[data-theme="dark"] {
  /* Marca — constantes en ambos temas */
  --bh-blue: #1f80ff;
  --bh-blue-2: #0d54c8;
  --bh-green: #00c48c;
  --bh-red: #f04438;
  --bh-white: #ffffff;

  /* Superficies — tema oscuro (por defecto) */
  --bh-bg: #05070d;
  --bh-bg-elevated: #0d1420;
  --bh-panel: #0d1b35;
  --bh-panel-2: #0f2040;
  --bh-ink: #eef3fb;
  --bh-ink-muted: rgba(238, 243, 251, 0.62);
  --bh-line: rgba(255, 255, 255, 0.12);
  --bh-line-soft: rgba(255, 255, 255, 0.07);
  --bh-fg-rgb: 255, 255, 255;

  /* Radios y sombras */
  --bh-radius-sm: 8px;
  --bh-radius: 12px;
  --bh-radius-lg: 16px;
  --bh-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  --bh-shadow-glow: 0 0 0 1px rgba(31, 128, 255, 0.25), 0 8px 30px rgba(31, 128, 255, 0.15);

  /* Tipografía */
  --bh-font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bh-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Motion — unificado para hover/foco/cambios de estado en toda la web */
  --bh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bh-transition-fast: 150ms var(--bh-ease);
  --bh-transition: 200ms var(--bh-ease);
  --bh-lift: -2px;

  --bh-shell-max: 1480px;
  --bh-shell-wide-max: 1680px;
  --bh-shell-readable-max: 1320px;
  --bh-shell-gutter: clamp(28px, 5vw, 96px);
  --bh-shell-mobile-gutter: 22px;
  --bh-nav-max: 1180px;
  --bh-nav-gutter: 24px;
}

[data-theme="light"] {
  --bh-bg: #f4f7fb;
  --bh-bg-elevated: #ffffff;
  --bh-panel: #ffffff;
  --bh-panel-2: #eef2f8;
  --bh-ink: #08090b;
  --bh-ink-muted: #647084;
  --bh-line: #dfe6f0;
  --bh-line-soft: #eef1f6;
  --bh-shadow: 0 18px 42px rgba(8, 9, 11, 0.12);
  --bh-shadow-glow: 0 0 0 1px rgba(31, 128, 255, 0.15), 0 8px 30px rgba(31, 128, 255, 0.08);
  --bh-fg-rgb: 8, 9, 11;
}

/* Semántico de mercado — igual en ambos temas por legibilidad de ganancias/pérdidas */
:root {
  --bh-up: var(--bh-green);
  --bh-down: var(--bh-red);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--bh-font-sans);
}

/* Escala editorial común: la portada de Noticias marca el ritmo de toda BolsaHoy. */
:root {
  --bh-title-size: clamp(36px, 4vw, 58px);
  --bh-title-line: 1.05;
  --bh-title-weight: 900;
  --bh-title-tracking: -.02em;
  --bh-section-size: clamp(28px, 4vw, 44px);
  --bh-section-line: .98;
  --bh-section-weight: 700;
}

:where(
  .bh-hero2-title,
  .mkt-hero h1,
  .an-hero h1,
  .comm-hero h1,
  .lab-hero h1,
  .hero-inner h1,
  .hero-identity h1,
  .account-greeting,
  .plans-page > main h1,
  .plans-page main .hero h1,
  .news-page .hero h1
) {
  font-family: var(--bh-font-sans) !important;
  font-size: var(--bh-title-size) !important;
  line-height: var(--bh-title-line) !important;
  font-weight: var(--bh-title-weight) !important;
  letter-spacing: var(--bh-title-tracking) !important;
}

:where(
  .section-head h2,
  .lab-section-head h2,
  .an-reports h2,
  .feats-left h2,
  .plans-page .section-head h2
) {
  font-family: var(--bh-font-sans) !important;
  font-size: var(--bh-section-size) !important;
  line-height: var(--bh-section-line) !important;
  font-weight: var(--bh-section-weight) !important;
  letter-spacing: normal !important;
}

:where(
  .post-card h3,
  .lab-card-title h3,
  .mkt-hero-news-head h3,
  .market-panel h3,
  .comm-card h3
) {
  font-family: var(--bh-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

/* La misma escala se mantiene también en móvil; solo cambia el ancho disponible. */
html body .bh-hero2-title,
html body .mkt-hero h1,
html body .an-hero h1,
html body[data-community-focus="true"] .comm-hero h1,
html body .lab-hero h1,
html body .hero-inner h1,
html body .hero-identity h1,
html body .account-greeting,
html body.plans-page main h1,
html body.plans-page .hero-copy h1,
html body.news-page .hero h1 {
  font-family: var(--bh-font-sans) !important;
  font-size: var(--bh-title-size) !important;
  line-height: var(--bh-title-line) !important;
  font-weight: var(--bh-title-weight) !important;
  letter-spacing: var(--bh-title-tracking) !important;
}