/* Identidad de Stella TV Ecuador — off-black profundo + azul marino + dorado
   estratégico (ver Fase 4 de la propuesta aprobada, refinada en la Fase de
   ajuste UI/UX §24.1). Se carga después de shared/styles/global.css con el
   mismo mecanismo que ya usa Perú (BaseLayout → themeStylesheet): la
   especificidad extra de ":root, html:root" gana sobre el ":root" simple de
   global.css y remapea las variables sin tocar ese archivo compartido.

   Regla de color (confirmada explícitamente por el cliente, §24.1-24.2):
   dorado = precios / badges / indicadores / detalles premium / estados
   activos. Verde = exclusivamente los CTA que llevan a WhatsApp (todos los
   "Contratar"/"Activar" de la página lo son). Rojo = solo si existiera una
   oferta/urgencia real y confirmada — no existe todavía, así que --urgent
   se define pero no se usa en ningún selector. */

@font-face {
  font-family: 'Fraunces EC';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans EC';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/worksans-variable.woff2') format('woff2');
}

:root,
html:root {
  /* Dark mode más profundo — sin negro puro. Los 3 tonos conservan el mismo
     orden de elevación que ya usaba el sistema (bg < bg2 < bg3), solo con
     valores más oscuros y con sesgo azul marino en vez de charcoal neutro. */
  --bg:         #0A0F1D;  /* fondo principal */
  --bg2:        #0F172A;  /* superficie estándar (tarjetas: Confianza, Planes, código) */
  --bg3:        #111827;  /* superficie elevada (plan destacado, tab activo del Showcase) */

  --text:       #F8FAFC;
  --text-muted: #CBD5E1;
  --text-dim:   #7C8CA6;

  --border:      #243044;
  --glass-bg:     rgba(15, 23, 42, 0.72);
  --glass-border: rgba(36, 48, 68, 0.92);

  /* Dorado/ámbar — reservado a precios, badges, indicadores e íconos
     "premium", NO a los botones de acción (ver --green más abajo). */
  --accent-rgb: 251, 191, 36;
  --orange:        #FBBF24;
  --orange-dark:   #F59E0B;
  --orange-glow:   rgba(251, 191, 36, 0.32);
  --orange-soft:   rgba(251, 191, 36, 0.12);
  --orange-border: rgba(251, 191, 36, 0.38);
  --orange-deep:   #B45309;

  /* Verde — el color de TODOS los CTA que llevan a WhatsApp (Hero, plan
     destacado, CTA final, sticky, navbar, botón flotante). Antes esta
     hoja dejaba --green sin redefinir a propósito para heredar el verde
     base de WhatsApp de global.css; ahora se fija explícitamente a
     emerald-500 por instrucción directa del cliente (§24.2), con la misma
     estructura de variables que --orange (glow/soft/border/deep) para que
     el botón 3D ya construido solo cambie de tono, no de forma. */
  --green:        #10B981;
  --green-dark:   #059669;
  --green-deep:   #047857;
  --green-glow:   rgba(16, 185, 129, 0.34);
  --green-soft:   rgba(16, 185, 129, 0.12);
  --green-border: rgba(16, 185, 129, 0.38);
  --cta-rgb: 16, 185, 129;

  --success: #3FAE86;
  --warning: #E2803C;

  /* Rojo de urgencia — definido y listo, pero NO aplicado en ningún
     selector todavía: no existe una oferta/urgencia real confirmada para
     Ecuador. Cuando exista, se usa aquí; hasta entonces, usarlo en
     cualquier componente sería inventar una urgencia falsa. */
  --urgent: #DC2626;

  /* Sombras de profundidad reutilizadas por tarjetas (Planes, Confianza,
     Showcase) y por los botones 3D. */
  --shadow-card:    0 1px 2px rgba(0,0,0,0.28), 0 10px 26px rgba(0,0,0,0.34);
  --shadow-card-lg: 0 4px 10px rgba(0,0,0,0.34), 0 22px 48px rgba(0,0,0,0.42);

  /* Escala tipográfica responsive (§24.3) — medida contra los valores REALES
     y computados de apps/st (Perú), no estimada. .section-title de Perú usa
     clamp(2rem, 4.5vw, 3.2rem) → 32px min, 51.2px max (verificado con
     getComputedStyle en Chrome headless a 1440/1024/768px). --h2-size adopta
     el mismo coeficiente de vw (misma velocidad de crecimiento que Perú desde
     el mismo punto de partida en mobile) y sube el techo a 3.3rem (52.8px)
     para quedar igual o más generoso que Perú en cualquier ancho de
     escritorio, sin tocar el piso mobile (1.5rem, igual que antes). */
  --h2-size:  clamp(1.5rem, 4.5vw, 3.3rem);
  --sub-size: 0.98rem;

  --font-body:    'Work Sans EC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Fraunces EC', 'Iowan Old Style', ui-serif, Georgia, serif;
}

@media (min-width: 1024px) {
  :root,
  html:root {
    --sub-size: 1.08rem;
  }
}