/* ═══════════════════════════════════════════════════════════════════════
   Tema claro para las landings de producto — se carga DESPUÉS de tokens.css.

   ¿Por qué una capa aparte y no invertir tokens.css?
   Porque esa hoja también la usan entrenamiento.html, privacidad.html y
   terminos.html, y esas tres todavía arrastran la paleta vieja a mano
   (#D4A857 dorado, #5CE1FF cian, #161924 azul). Invertir el tema global
   las dejaría con texto claro hardcodeado sobre fondo blanco. Esta capa
   las deja intactas.

   La jugada es invertir la escala de neutros en vez de reescribir cada
   regla: --silver-50 sigue significando "el texto más fuerte" y --silver-400
   "el más apagado", solo que ahora sobre blanco. Así el CSS de cada página
   sigue funcionando sin tocarlo.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ══ Superficies ══ */
  --bg-void:        #FFFFFF;
  --bg-deep:        #FAF9F7;
  --bg-elevated:    #F6F4F0;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FAF9F7;
  --bg-overlay:     rgba(20, 18, 17, 0.55);   /* sigue oscuro: es un velo */

  /* ══ Neutros, invertidos (50 = texto fuerte · 900 = superficie) ══ */
  --neutral-50:   #141211;
  --neutral-100:  #231F20;
  --neutral-200:  #332E2B;
  --neutral-300:  #4A443F;
  --neutral-400:  #6B645D;
  --neutral-500:  #837C75;
  --neutral-600:  #A8A19A;
  --neutral-700:  #CFC9C1;
  --neutral-800:  #E8E4DE;
  --neutral-900:  #F6F4F0;

  --silver-50:   #141211;
  --silver-100:  #231F20;
  --silver-200:  #332E2B;
  --silver-300:  #4A443F;
  --silver-400:  #6B645D;
  --silver-500:  #837C75;
  --silver-600:  #A8A19A;
  --silver-700:  #CFC9C1;
  --silver-800:  #E8E4DE;
  --silver-900:  #F6F4F0;

  /* ══ El acento "electric" era blanco sobre negro (puntos de estado, los
        ✓ de precios, el cronómetro de la llamada). Sobre blanco eso se
        apaga: pasa al naranja de marca, que es el acento de la portada.
        Se usa el tono profundo porque #ff4f0e en texto chico da 3,4:1. ══ */
  --electric:        #B8360A;
  --electric-deep:   #992f08;
  --electric-glow:   #B8360A;
  --electric-soft:   rgba(255, 79, 14, 0.07);
  --electric-border: rgba(255, 79, 14, 0.26);

  /* ══ Funcionales: los de tokens.css están calibrados para negro.
        El verde #4FD18B da 1,9:1 sobre blanco y el rojo #FF5A4E, 3,1:1. ══ */
  --success:  #0F7A3D;
  --warning:  #A66A00;
  --danger:   #C0362C;
  --info:     #4A443F;

  /* ══ Gradientes ══ */
  --gradient-noir:      linear-gradient(180deg, #FFFFFF 0%, #FAF9F7 60%, #F6F4F0 100%);
  --gradient-neutral:   linear-gradient(135deg, #141211 0%, #4A443F 50%, #837C75 100%);
  --gradient-silver:    linear-gradient(135deg, #141211 0%, #4A443F 50%, #837C75 100%);
  --gradient-electric:  linear-gradient(135deg, #332E2B 0%, #231F20 50%, #141211 100%);
  /* terminaba en blanco hueso: sobre blanco se cortaba a la mitad */
  --gradient-ember:     linear-gradient(135deg, #ff7a45 0%, #ff4f0e 55%, #cc3f0b 100%);
  --gradient-aurora:    linear-gradient(135deg, #141211 0%, #4A443F 38%, #ff4f0e 100%);
  /* .text-ice marca el énfasis de los titulares; en la portada ese énfasis
     es naranja, así que acá también */
  --gradient-text-ice:  linear-gradient(135deg, #ff7a45 0%, #cc3f0b 100%);

  /* ══ Glows: los blancos translúcidos no existen sobre blanco ══ */
  --glow-neutral:  radial-gradient(circle, rgba(255, 79, 14, 0.10) 0%, transparent 70%);
  --glow-electric: radial-gradient(circle, rgba(255, 79, 14, 0.10) 0%, transparent 70%);
  --glow-silver:   radial-gradient(circle, rgba(35, 31, 32, 0.05) 0%, transparent 70%);

  /* ══ Bordes ══ */
  --border-subtle:   rgba(35, 31, 32, 0.07);
  --border-soft:     rgba(35, 31, 32, 0.11);
  --border-strong:   rgba(35, 31, 32, 0.20);
  --border-electric: rgba(35, 31, 32, 0.22);

  /* ══ Sombras: sobre blanco, un 0.60 de negro es una mancha ══ */
  --shadow-sm:  0 1px 2px rgba(35, 31, 32, 0.05);
  --shadow-md:  0 6px 20px rgba(35, 31, 32, 0.07);
  --shadow-lg:  0 18px 48px rgba(35, 31, 32, 0.11);
  --shadow-xl:  0 28px 70px -16px rgba(35, 31, 32, 0.16);
  --shadow-glow-electric: 0 10px 30px rgba(35, 31, 32, 0.14);
}

/* ── Lienzo ── */
body{
  color: var(--silver-200);
  background: var(--bg-void);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 79, 14, 0.07), transparent),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(255, 79, 14, 0.05), transparent);
}
/* el grano se diseñó para negro; sobre blanco a 0.035 se ve sucio */
body::after{ opacity: .018; mix-blend-mode: multiply; }

h1,h2,h3,h4{ color: var(--silver-50); }

/* ── El naranja pleno con texto blanco da 3:1; con tinta, 9:1 ── */
.btn-primary-gold{ color: #1A0A02; }
::selection{ background: var(--brand); color: #FFFFFF; }

/* ── El pie: el naranja claro no se lee sobre blanco ── */
.bi-footer a:hover{ color: var(--brand-deep); }

/* ── El desplazamiento lo maneja el scroll-margin de /brand/nav.css: sin
      esto se suma al scroll-padding de tokens.css y deja 158px de hueco ── */
html{ scroll-padding-top: 0; }