/* ==============================================================
   NV MARKETING DIGITAL — Variables, Tokens y Tema Dark/Light
   Archivo: css/variables.css
============================================================== */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* ── THEME TOKENS ── */
  :root {
    --fucsia:  #cf2ab1;
    --violeta: #5a25cf;
    --acento:  #F01366;

    /* Dark mode (default) */
    --bg:       #070f1e;
    --bg-2:     #0b2243;
    --bg-card:  rgba(7,15,30,0.88);
    --white:    #F0EEFF;
    --muted:    rgba(210,195,255,0.55);
    --border:   rgba(255,255,255,0.07);
    --border-accent: rgba(207,42,177,0.22);
    --nav-bg:   rgba(7,15,30,0.92);

    /* aliases kept for compat */
    --dark:    #0b2243;
    --darker:  #070f1e;
  }

  /* ── LIGHT MODE OVERRIDES ── */
  html.light {
    --bg:       #f5f3ff;
    --bg-2:     #ede9ff;
    --bg-card:  rgba(255,255,255,0.95);
    --white:    #1a0533;
    --muted:    rgba(30,10,60,0.72);
    --border:   rgba(90,37,207,0.12);
    --border-accent: rgba(207,42,177,0.3);
    --nav-bg:   rgba(245,243,255,0.95);
    --dark:     #ede9ff;
    --darker:   #f5f3ff;
  }

  /* Swap blobs in light mode */
  html.light .hero::before { background: radial-gradient(circle, rgba(207,42,177,0.10) 0%, transparent 65%); }
  html.light .hero::after  { background: radial-gradient(circle, rgba(90,37,207,0.12) 0%, transparent 65%); }
  html.light .ring-1 { border-color: rgba(207,42,177,0.18); }
  html.light .ring-2 { border-color: rgba(90,37,207,0.15); }
  html.light .ring-3 { border-color: rgba(240,19,102,0.15); }
  html.light .dot-grid span { background: #1a0533; }
  html.light .clients-section { background: #ede9ff; }
  html.light .carousel-wrapper::before { background: linear-gradient(to right, #ede9ff, transparent); }
  html.light .carousel-wrapper::after  { background: linear-gradient(to left,  #ede9ff, transparent); }
  html.light 
  
  html.light 
  html.light .nosotros-section::before { background: radial-gradient(circle, rgba(207,42,177,0.08) 0%, transparent 65%); }
  html.light .nos-stat-card { background: rgba(90,37,207,0.05); border-color: rgba(90,37,207,0.12); }
  html.light .nos-stat-card:first-child { background: rgba(207,42,177,0.08); border-color: rgba(207,42,177,0.2); }
  html.light .nos-quote { background: rgba(90,37,207,0.07); border-color: rgba(90,37,207,0.18); }
  html.light .nos-cert { background: rgba(90,37,207,0.05); border-color: rgba(90,37,207,0.15); }
  html.light .section-divider { background: rgba(90,37,207,0.1); }
  html.light .hero-tag { background: rgba(207,42,177,0.07); border-color: rgba(207,42,177,0.3); }
  html.light .service-tag { background: rgba(207,42,177,0.06); border-color: rgba(207,42,177,0.2); color: rgba(60,30,100,0.65); }
  html.light .service-tag:hover { background: rgba(207,42,177,0.12); color: var(--fucsia); }
  html.light nav { border-bottom-color: rgba(90,37,207,0.1); }
  html.light .nos-bio { color: rgba(60,30,100,0.65); }
  html.light .nos-values li { color: rgba(60,30,100,0.75); }
  html.light .nos-quote p { color: rgba(60,30,100,0.7); }
  html.light .nos-cert { color: rgba(60,30,100,0.65); }
  html.light .hero-sub { color: rgba(60,30,100,0.65); }
  html.light .btn-ghost { color: rgba(60,30,100,0.6); }
  html.light .btn-ghost:hover { color: #1a0533; }
  html.light .nav-links a { color: rgba(60,30,100,0.55); }
  html.light .nav-links a:hover { color: #1a0533; }
  html.light .counter-label { color: rgba(60,30,100,0.5); }
  html.light .stat-label { color: rgba(60,30,100,0.5); }

  html, body { min-height: 100vh; background: var(--bg); transition: background 0.35s ease, color 0.35s ease; }
  body { font-family: 'Poppins', system-ui, sans-serif; color: var(--white); overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════
   LIGHT MODE — correcciones de legibilidad de texto
   Todas las clases con --muted o colores bajos que no se
   distinguen en fondo claro.
═══════════════════════════════════════════════════════ */

/* — Sección Nosotros — */
html.light .nos-quote-role { color: rgba(60,30,100,0.75) !important; }
html.light .nos-quote p   { color: rgba(30,10,60,0.78) !important; }
html.light .nos-bio        { color: rgba(30,10,60,0.78) !important; }
html.light .nos-values li  { color: rgba(30,10,60,0.80) !important; }
html.light .nos-cert       { color: rgba(30,10,60,0.80) !important; }
html.light .nos-quote-name { color: #1a0533 !important; }
html.light .nos-stat-label { color: rgba(30,10,60,0.75) !important; }
html.light .nos-stat-num   { -webkit-text-fill-color: initial; color: var(--fucsia); }

/* — Team carousel (carrusel equipo) — */
html.light .nos-quote-author .nos-quote-role { color: rgba(30,10,60,0.72) !important; }
html.light .nos-team-slide p   { color: rgba(30,10,60,0.78) !important; }
html.light .nos-team-slide-skills .nos-cert { color: rgba(30,10,60,0.80) !important; }
html.light .nos-team-quote-role { color: rgba(30,10,60,0.72) !important; }

/* — Hero — */
html.light .hero-sub    { color: rgba(30,10,60,0.72) !important; }
html.light .counter-label { color: rgba(30,10,60,0.72) !important; }
html.light .stat-label  { color: rgba(30,10,60,0.72) !important; }

/* — Carrusel logos / labels — */
html.light .clients-label span { color: rgba(30,10,60,0.55) !important; }

/* — Sección dolores — */
html.light .dolor-text  { color: rgba(30,10,60,0.78) !important; }

/* — Servicios — */
html.light .servicio-desc  { color: rgba(30,10,60,0.75) !important; }
html.light .servicio-name  { color: #1a0533 !important; }

/* — Partners — */
html.light .partner-name   { color: #1a0533 !important; }
html.light .partner-desc   { color: rgba(30,10,60,0.72) !important; }
html.light .partner-cert   { color: rgba(30,10,60,0.78) !important; }

/* — Portafolio — */
html.light .portfolio-title  { color: #1a0533 !important; }
html.light .portfolio-meta   { color: rgba(30,10,60,0.65) !important; }
html.light .portfolio-result { color: rgba(30,10,60,0.78) !important; }
html.light .portfolio-img-label { color: rgba(30,10,60,0.65) !important; }

/* — Testimonios — */
html.light .testimonio-text  { color: rgba(30,10,60,0.80) !important; }
html.light .t-name           { color: #1a0533 !important; }
html.light .t-role           { color: rgba(30,10,60,0.65) !important; }

/* — FAQ — */
html.light .faq-question     { color: #1a0533 !important; }
html.light .faq-answer       { color: rgba(30,10,60,0.78) !important; }

/* — Proceso — */
html.light .proceso-title    { color: #1a0533 !important; }
html.light .proceso-desc     { color: rgba(30,10,60,0.75) !important; }

/* — Secciones generales — */
html.light .section-sub-center  { color: rgba(30,10,60,0.72) !important; }
html.light .section-sub         { color: rgba(30,10,60,0.72) !important; }
html.light .cta-final-sub       { color: rgba(30,10,60,0.72) !important; }

/* — Footer — */
html.light .footer-desc    { color: rgba(30,10,60,0.72) !important; }
html.light .footer-link    { color: rgba(30,10,60,0.65) !important; }
html.light .footer-link:hover { color: var(--fucsia) !important; }

/* — Nav — */
html.light .nav-links a    { color: rgba(30,10,60,0.70) !important; }
html.light .nav-links a:hover { color: #1a0533 !important; }
html.light .btn-ghost      { color: rgba(30,10,60,0.72) !important; }
html.light .btn-ghost:hover { color: #1a0533 !important; }

/* — Formulario — */
html.light .form-privacy   { color: rgba(30,10,60,0.65) !important; }
html.light .form-success-text { color: rgba(30,10,60,0.75) !important; }

/* — Team cards (versión grid, por si quedan restos) — */
html.light .nos-team-role    { color: rgba(30,10,60,0.72) !important; }
html.light .nos-team-bio     { color: rgba(30,10,60,0.78) !important; }
html.light .nos-team-exp-label { color: rgba(30,10,60,0.65) !important; }