/* ==========================================================================
   CAUXE — Tema claro
   Se activa con <html data-theme="light">. Las piezas que simulan producto
   (teléfono, dashboard, código, ROI, industrias, video) siguen oscuras.
   ========================================================================== */

/* ---------- Botón sol / luna ---------- */
.theme-toggle {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--text);
  background: transparent; border: 1px solid var(--border-strong);
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); transform: rotate(-12deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.theme-toggle svg {
  position: absolute; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s, transform .5s var(--ease);
}
.theme-toggle .moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="light"] .theme-toggle .sun { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="light"] .theme-toggle .moon { opacity: 1; transform: none; }

html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .4s, border-color .4s, color .4s !important;
}

/* ---------- Tokens claros ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fd;
  --bg-2: #eaf0fa;
  --surface: #ffffff;
  --surface-2: rgba(15, 40, 90, .05);
  --border: rgba(20, 50, 110, .1);
  --border-strong: rgba(20, 50, 110, .2);
  --text: #0a1428;
  --muted: #4b5b7a;
  --dim: #7c8aa7;
  --sky: #0369a1;
  --cyan: #0891b2;
  --green: #059669;
  --amber: #b45309;
  --red: #dc2626;
  --grad-text: linear-gradient(100deg, #1d4ed8 0%, #0891b2 45%, #2563eb 100%);
  --shadow: 0 30px 70px -35px rgba(20, 45, 100, .35);
  --glow: 0 0 0 1px rgba(37, 99, 235, .3), 0 20px 50px -24px rgba(8, 145, 178, .45);
}

/* Piezas que se mantienen oscuras: recuperan los tokens del tema oscuro */
[data-theme="light"] :is(.phone, .dash, .code, .roi-result, .industry, .contact-info, .vplayer, .reel, .vmodal, .tool-chip, .channel, .greet) {
  --text: #eaf1ff; --muted: #93a3c4; --dim: #5f6f91;
  --border: rgba(148, 180, 255, .12); --border-strong: rgba(148, 180, 255, .24);
  --sky: #7dd3fc; --cyan: #22d3ee; --green: #34d399; --amber: #fbbf24; --red: #f87171;
  --grad-text: linear-gradient(100deg, #7dd3fc 0%, #22d3ee 30%, #60a5fa 60%, #7dd3fc 100%);
  color: var(--text);
}
[data-theme="light"] .greet { color: #0b1733; }
[data-theme="light"] .contact-info h2 { color: #fff; }

/* ---------- Base ---------- */
[data-theme="light"] body { background: var(--bg); color: var(--text); }
[data-theme="light"] ::selection { background: rgba(8, 145, 178, .2); color: var(--text); }

[data-theme="light"] .btn-ghost { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(20, 45, 100, .06); }
[data-theme="light"] .btn-ghost:hover { background: #fff; box-shadow: 0 10px 24px -12px rgba(20, 45, 100, .35); }
[data-theme="light"] .btn-primary { color: #fff; background: linear-gradient(120deg, #2563eb 0%, #0891b2 100%); box-shadow: 0 12px 30px -12px rgba(37, 99, 235, .7); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 18px 40px -14px rgba(37, 99, 235, .8); }

/* ---------- Anuncio y navegación ---------- */
[data-theme="light"] .announce { background: linear-gradient(90deg, #dbeafe, #cffafe); color: #0b2a55; }
[data-theme="light"] .announce a { color: #0b2a55; border-bottom-color: rgba(11, 42, 85, .35); }
[data-theme="light"] .nav { background: rgba(245, 248, 253, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--border); }
[data-theme="light"] .nav-links a:hover { color: var(--text); background: var(--surface-2); }
[data-theme="light"] .menu-toggle { background: #fff; }
[data-theme="light"] .menu-toggle span, [data-theme="light"] .menu-toggle span::before, [data-theme="light"] .menu-toggle span::after { background: var(--text); }
[data-theme="light"] .nav.open .menu-toggle span { background: transparent; }
@media (max-width: 1100px) {
  [data-theme="light"] .nav.open .nav-links { background: rgba(255, 255, 255, .98); }
}

/* ---------- Hero: el video sigue, con velo claro ---------- */
[data-theme="light"] .hero { margin-top: 0; padding-top: 90px; }
[data-theme="light"] .hero-media::after {
  background:
    radial-gradient(ellipse at 18% 45%, rgba(245, 248, 253, .75) 0%, transparent 60%),
    linear-gradient(90deg, rgba(245, 248, 253, .97) 0%, rgba(245, 248, 253, .82) 42%, rgba(245, 248, 253, .15) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%);
}
[data-theme="light"] .hero-tag { background: rgba(255, 255, 255, .8); color: var(--text); }
[data-theme="light"] .hero-lead { color: var(--muted); }
[data-theme="light"] .hero-lead strong { color: var(--text); }
[data-theme="light"] .hero-stats > div { background: rgba(255, 255, 255, .88); }
[data-theme="light"] .scroll-cue { border-color: rgba(10, 20, 40, .3); }
[data-theme="light"] .btn-play i { background: #fff; }
[data-theme="light"] .btn-play i::before { border-left-color: #1d4ed8; }

/* ---------- Tarjetas y secciones ---------- */
[data-theme="light"] .card { background: #fff; box-shadow: 0 1px 2px rgba(20, 45, 100, .05), 0 18px 40px -30px rgba(20, 45, 100, .35); }
[data-theme="light"] .card:hover { border-color: rgba(8, 145, 178, .4); }
[data-theme="light"] .card::before { background: radial-gradient(500px circle at var(--mx) var(--my), rgba(8, 145, 178, .08), transparent 40%); }
[data-theme="light"] .checklist li, [data-theme="light"] .stage-name,
[data-theme="light"] .compare th:first-child, [data-theme="light"] .compare td:first-child,
[data-theme="light"] .field label, [data-theme="light"] .footer h4, [data-theme="light"] .footer h3 { color: var(--text); }
[data-theme="light"] .chaos-core { background: radial-gradient(circle at 30% 20%, #3b82f6, #0b2a55 75%); }
[data-theme="light"] .pain-icon { background: rgba(220, 38, 38, .08); }
[data-theme="light"] .feature-row .fi { background: rgba(37, 99, 235, .1); }
[data-theme="light"] .module .mi { background: rgba(8, 145, 178, .1); }
[data-theme="light"] .range-group output { color: var(--text); }
[data-theme="light"] .range-group input[type="range"] { background: linear-gradient(90deg, var(--blue), var(--cyan)) 0/var(--p, 50%) 100% no-repeat, rgba(20, 50, 110, .12); }
[data-theme="light"] .range-group input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(8, 145, 178, .18), 0 4px 12px rgba(20, 45, 100, .3); }
[data-theme="light"] .compare thead th { background: var(--bg-2); }
[data-theme="light"] .compare .us, [data-theme="light"] .compare thead .us { background: linear-gradient(180deg, rgba(37, 99, 235, .1), rgba(8, 145, 178, .05)); color: var(--text); }
[data-theme="light"] .quote blockquote { color: var(--text); }
[data-theme="light"] .quote-metric { background: rgba(8, 145, 178, .07); border-color: rgba(8, 145, 178, .25); color: #0e7490; }
[data-theme="light"] .m.get { color: #1d4ed8; }

/* ---------- Formulario y footer ---------- */
[data-theme="light"] .form { background: #fff; }
[data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea,
[data-theme="light"] .news-form input { background-color: var(--bg); }
[data-theme="light"] .field input:focus, [data-theme="light"] .field select:focus, [data-theme="light"] .field textarea:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(8, 145, 178, .14); }
[data-theme="light"] .field select option { background: #fff; color: var(--text); }
[data-theme="light"] .footer { background: linear-gradient(180deg, transparent, #e4ebf7); }
[data-theme="light"] .footer ul a:hover, [data-theme="light"] .footer-bottom a:hover { color: var(--text); }

/* ---------- Capa pro ---------- */
[data-theme="light"] .adapt-tabs button { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
[data-theme="light"] .adapt-tabs button[aria-selected="true"], [data-theme="light"] .step.lit .step-dot svg { color: #fff; }
[data-theme="light"] .adapt-tabs button[aria-selected="true"] { background: linear-gradient(120deg, #2563eb, #0891b2); }
[data-theme="light"] .config { background: #fff; box-shadow: var(--shadow); }
[data-theme="light"] .mod { background: var(--bg); }
[data-theme="light"] .mod .tg { background: rgba(20, 50, 110, .15); }
[data-theme="light"] .mod.on { background: rgba(8, 145, 178, .06); border-color: rgba(8, 145, 178, .35); }
[data-theme="light"] .steps-line .track { stroke: rgba(20, 50, 110, .12); }
[data-theme="light"] .step-num { color: rgba(20, 50, 110, .07); }
[data-theme="light"] .step-dot { background: #e3ebf8; }
[data-theme="light"] .step.lit .step-dot { background: linear-gradient(120deg, #2563eb, #0891b2); }
[data-theme="light"] .tabs { background: #fff; }
[data-theme="light"] .tabs button[aria-selected="true"] { background: var(--bg-2); }
[data-theme="light"] .faq-list details { background: #fff; }
[data-theme="light"] .faq-list details[open] { background: #fff; border-color: rgba(8, 145, 178, .4); }
[data-theme="light"] .cta-inline { background: #fff; box-shadow: var(--shadow); }

/* ---------- Flotantes ---------- */
[data-theme="light"] :is(.rail a, .rail a span, .fab-menu a, .demo-pill) { background: rgba(255, 255, 255, .95); }
[data-theme="light"] .rail a:hover, [data-theme="light"] .rail a.active { color: #fff; background: linear-gradient(120deg, #2563eb, #0891b2); }
[data-theme="light"] .greet { box-shadow: 0 20px 50px -18px rgba(20, 45, 100, .45); }
@media (max-width: 640px) {
  [data-theme="light"] .mbar { background: rgba(255, 255, 255, .96); }
  [data-theme="light"] .mbar a { background: var(--bg); }
  [data-theme="light"] .mbar a.demo { color: #fff; background: linear-gradient(120deg, #2563eb, #0891b2); }
}
@media (max-width: 900px) {
  [data-theme="light"] .hero-media::after {
    background: linear-gradient(180deg, rgba(245, 248, 253, .9) 0%, rgba(245, 248, 253, .86) 70%, var(--bg) 100%);
  }
}

/* 2026-10-07: la pastilla "Facturación electrónica certificada por el SRI" no se leía en modo claro (verde pálido sobre fondo pálido). */
[data-theme="light"] .badge-sri { color: #065f46; background: #d1fae5; border-color: rgba(5, 150, 105, .45); font-weight: 600; }
[data-theme="light"] .badge-sri::before { background: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .18); }

/* 2026-10-07: en modo claro los interruptores encendidos del configurador se veían grises (como apagados). */
[data-theme="light"] .mod.on .tg { background: linear-gradient(120deg, #2563eb, #0891b2); }