/* ==========================================================================
   CAUXE — Barra superior compacta (2026-10-08, antes 2026-10-07)
   Cápsula flotante de vidrio con 4 opciones (Productos, Soluciones, Testimonios,
   Planes) y a la derecha: tema, WhatsApp, Demo en vivo, Mi cuenta y Crea tu cuenta.
   Inspirada en la lógica de navegación de Zolutium, con estética propia de CAUXE.
   Barras anteriores: archivo/portada-cauxe02/barra-nav-v1.html y barra-nav-v2/
   ========================================================================== */

.nav, .nav.scrolled, [data-theme="light"] .nav {
  padding-top: 12px; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav-inner {
  position: relative; height: 64px; gap: 18px;
  width: min(100% - 32px, 1280px); padding: 0 10px 0 18px; border-radius: 20px;
  background: rgba(8, 14, 32, .52);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: height .35s var(--ease), background .35s, box-shadow .35s, border-color .35s;
}
.nav-inner::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #22d3ee, #3b82f6, transparent); opacity: .75;
}
.nav.scrolled .nav-inner {
  height: 58px; background: rgba(6, 11, 26, .84);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nav .logo { font-size: 1.45rem; flex: none; }
.nav .logo .logo-mark, .nav-cta > *, .nav-cta svg, .nav-dot { flex: none; }

/* ---------- Menú en pista ---------- */
.nav-links {
  position: relative; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
}
.nav-links a {
  position: relative; z-index: 1; padding: 8px 14px; font-size: .74rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); background: none;
}
.nav-links a:hover, .nav-links a.is-active { color: #fff; background: none; }
.nav-ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, rgba(59, 130, 246, .30), rgba(34, 211, 238, .16));
  border: 1px solid rgba(34, 211, 238, .38); box-shadow: 0 0 18px rgba(34, 211, 238, .22);
  opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.nav-ind.on { opacity: 1; }

/* ---------- Luna = modo oscuro, sol = modo claro ---------- */
.nav .theme-toggle { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.nav .theme-toggle:hover { background: rgba(255, 255, 255, .1); box-shadow: 0 0 16px rgba(34, 211, 238, .25); }
:root:not([data-theme="light"]) .nav .theme-toggle .moon { opacity: 1; transform: none; }
:root:not([data-theme="light"]) .nav .theme-toggle .sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="light"] .nav .theme-toggle .sun { opacity: 1; transform: none; color: #f59e0b; }
:root[data-theme="light"] .nav .theme-toggle .moon { opacity: 0; transform: rotate(-90deg) scale(.5); }

/* ---------- WhatsApp y acciones ---------- */
.nav-cta { gap: 8px; }
.nav-wa {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.nav-wa svg { width: 38px; height: 38px; }
.nav-wa:hover { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18), 0 0 20px rgba(37, 211, 102, .45); }
.nav-live, .nav-acc, .nav-new {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; transition: background .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease), color .3s;
}
.nav-live { padding: 0 6px 0 2px; color: var(--text); }
.nav-play {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #2563eb, #22d3ee); box-shadow: 0 6px 18px -6px rgba(34, 211, 238, .7);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.nav .nav-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 1px; }
.nav-live:hover .nav-play { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(34, 211, 238, .16), 0 8px 22px -6px rgba(34, 211, 238, .8); }
.nav-acc { padding: 0 16px; color: var(--text); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
.nav-acc:hover { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .08); }
.nav-new { padding: 0 16px 0 18px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #2563eb 45%, #0891b2); box-shadow: 0 10px 24px -10px rgba(37, 99, 235, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
.nav-new:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(37, 99, 235, 1), inset 0 1px 0 rgba(255, 255, 255, .22); }
.nav-acc svg, .nav-new svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.nav-only-m { display: none; }
.nav-links a[aria-current="page"] { color: #fff; }

/* ---------- Tema claro ---------- */
[data-theme="light"] .nav-inner {
  background: rgba(255, 255, 255, .72); border-color: rgba(15, 35, 75, .08);
  box-shadow: 0 14px 40px -20px rgba(15, 35, 75, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
}
[data-theme="light"] .nav.scrolled .nav-inner { background: rgba(255, 255, 255, .9); }
[data-theme="light"] .nav-links { background: rgba(15, 35, 75, .04); border-color: rgba(15, 35, 75, .07); }
[data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.is-active { color: var(--text); background: none; }
[data-theme="light"] .nav-ind { background: #fff; border-color: rgba(59, 130, 246, .25); box-shadow: 0 4px 14px -4px rgba(59, 130, 246, .35); }
[data-theme="light"] .nav .theme-toggle { background: #fff; border-color: rgba(15, 35, 75, .1); }
[data-theme="light"] .nav-acc { border-color: rgba(15, 35, 75, .16); background: #fff; }
[data-theme="light"] .nav-acc:hover { border-color: rgba(37, 99, 235, .45); background: #f3f7ff; }
[data-theme="light"] .nav-links a[aria-current="page"] { color: var(--text); }

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1320px) { .nav-links a { padding: 8px 11px; letter-spacing: .07em; } .nav-live { font-size: 0; gap: 0; padding: 0; } }
@media (max-width: 1100px) {
  .nav-inner { height: 58px; padding: 0 8px 0 14px; border-radius: 18px; }
  .nav-ind { display: none; }
  .nav-only-m { display: block; }
  .nav-cta .nav-acc { display: none; }
  .nav.open .nav-links { top: calc(100% + 8px); left: 0; right: 0; border-radius: 18px; padding: 10px; }
  .nav.open .nav-links a { font-size: .9rem; }
  .nav.open .nav-links { background: rgba(8, 15, 34, .97); }
  [data-theme="light"] .nav.open .nav-links { background: rgba(255, 255, 255, .98); box-shadow: 0 20px 50px -20px rgba(15, 35, 75, .4); }
}
@media (max-width: 640px) {
  .nav { padding-top: 8px; }
  .nav-inner { width: calc(100% - 20px); gap: 10px; }
  .nav-cta { gap: 6px; }
  .nav-cta .nav-live { display: none; }
  .nav-inner { padding: 0 6px 0 10px; }
  .nav .logo { font-size: 1.2rem; gap: 6px; }
  .nav .logo .logo-mark { width: 30px; height: 30px; }
  .nav-new { height: 34px; padding: 0 11px; font-size: .62rem; letter-spacing: .04em; }
  .nav-new svg { display: none; }
  .nav-wa, .nav-wa svg { width: 32px; height: 32px; }
  .nav .theme-toggle { width: 34px; height: 34px; }
  .nav .menu-toggle { width: 38px; height: 38px; }
}
@media (max-width: 360px) { .nav .logo { font-size: 0; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .nav-ind { transition: none; } }

/* 2026-10-08: ElectricLogo sobre la X del encabezado (electric-logo.js). */
.elogo { position: relative; display: inline-flex; flex: none; }
.elogo-cv { position: absolute; left: -16px; top: -16px; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.elogo.on .elogo-cv { opacity: 1; }
/* 2026-10-15 (pedido del equipo): "Preguntas frecuentes" entra al menú; los enlaces se compactan para que todo quepa en una línea. */
.nav-links a { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1500px) { .nav-links a { padding: 8px 10px; letter-spacing: .05em; } .nav-live { font-size: 0; gap: 0; padding: 0; } }
@media (min-width: 1101px) and (max-width: 1260px) { .nav-links a { padding: 8px 8px; font-size: .68rem; letter-spacing: .03em; } }
.nav-inner { width: min(100% - 32px, 1480px); } /* antes 1280px */
@media (min-width: 1101px) and (max-width: 1320px) { .nav-acc { font-size: 0; gap: 0; padding: 0 11px; } } /* "Mi cuenta" queda solo con el ícono */
@media (min-width: 1101px) and (max-width: 1180px) { .nav-links a { padding: 8px 6px; font-size: .66rem; } .nav-inner { gap: 10px; } .nav-cta { gap: 6px; } }