/* ── LA ONDA NEÓN DEL SITIO (18-sep-2026, pedido de Edgar) ─────────────────────────────
   Nació en los banners de la portada y Edgar la quiso en todo el sitio. ⚠️ EXCEPCIÓN A
   BRAND.md (§7: sin sombras ni degradés), decidida por él. El criterio para no pasarse:
   el neón va en los DETALLES —íconos, líneas, rótulos, botones, bordes al pasar el mouse—
   y NUNCA en el texto que se lee de corrido, que queda limpio.
   El sitio queda siempre en oscuro (`data-theme="dark"` en cada <html>): el neón sobre el
   fondo claro no se ve. Para volver al claro, se saca ese atributo y este archivo.
   El único color es el ultramar-alto de la marca; los verdes y miel son de WhatsApp y
   PiBee, y sólo aparecen donde está su marca. */
:root {
  /* Que el NAVEGADOR también sepa que es oscuro: sin esto, a quien tiene el modo claro le
     salían claras la barra de scroll, los desplegables y el autocompletado. */
  color-scheme: dark;
  --neon: #5A6BF0;
  --neon-suave: rgba(90, 107, 240, .35);
  --neon-halo: rgba(90, 107, 240, .10);
}

/* Fondo: dos halos quietos detrás de todo, como la luz de un cartel en la pared. */
body {
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--neon-halo), transparent 60%),
    radial-gradient(45rem 35rem at -10% 45%, rgba(90, 107, 240, .06), transparent 65%),
    radial-gradient(40rem 30rem at 110% 90%, rgba(90, 107, 240, .05), transparent 65%),
    var(--fondo);
  background-attachment: fixed;
}

/* El isotipo de la cabecera: la veta brilla. */
.veta-linea { filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 8px var(--neon-suave)); }

/* Los rótulos de sección, en neón. */
.rotulo, .bn-rot, .producto .que { color: var(--neon) !important;
  text-shadow: 0 0 10px var(--neon-suave); }

/* Los títulos de sección: un resplandor apenas, que no moleste al leer. */
.seccion h2, .hero h1 { text-shadow: 0 0 28px rgba(90, 107, 240, .22); }

/* La veta divisoria: el tramo azul se prende. */
hr.veta { height: 1px; box-shadow: 0 0 10px var(--neon-suave); position: relative; overflow: visible; }

/* Íconos de producto: brillan quietos y se encienden al pasar. */
.ico, .producto .ico { filter: drop-shadow(0 0 6px var(--neon-suave)) drop-shadow(0 0 18px rgba(90, 107, 240, .18));
  transition: filter .3s; }

/* Tarjetas y fichas: borde neón al pasar el mouse. */
.producto, .ficha, .caja, .tres .caja, .wa-chat, .wa-probar, .demo-grupo {
  transition: border-color .25s, box-shadow .25s, transform .25s; }
.producto:hover, .ficha:hover, .caja:hover, .wa-probar:hover {
  border-color: var(--neon) !important;
  box-shadow: 0 0 0 1px var(--neon-suave), 0 0 22px rgba(90, 107, 240, .25), inset 0 0 24px rgba(90, 107, 240, .06); }
.producto:hover .ico { filter: drop-shadow(0 0 8px var(--neon)) drop-shadow(0 0 26px var(--neon-suave)); }

/* Botones y enlaces de acción: se iluminan. */
.enviar, .b1, .cabecera nav a.ingresar {
  transition: box-shadow .25s, filter .25s; }
.enviar:hover, .b1:hover, .cabecera nav a.ingresar:hover {
  box-shadow: 0 0 0 1px var(--neon), 0 0 18px var(--neon-suave), 0 0 42px rgba(90, 107, 240, .2); }
.producto .ir, .bn-ir { text-shadow: 0 0 12px var(--neon-suave); }
.cabecera nav a:hover { text-shadow: 0 0 10px var(--neon); }

/* Los números grandes y los turnos en mono: son el "cartel" del producto. */
.cifra, .num, .ficha .n, .tarjeta .n { text-shadow: 0 0 14px var(--neon-suave), 0 0 32px rgba(90, 107, 240, .18); }

/* Las tarjetas llevan SIEMPRE un borde teñido: la onda se ve sin tener que pasar el mouse. */
.producto, .ficha, .caja, .tablero, .wa-probar { border-color: rgba(90, 107, 240, .28) !important; }

/* El turno grande de la portada del turnero y las cifras: brillan como el cartel. */
.tablero .turno { color: #EAF0FF; text-shadow: 0 0 6px var(--neon), 0 0 22px var(--neon-suave), 0 0 48px rgba(90, 107, 240, .3); }
.tablero { box-shadow: 0 0 30px rgba(90, 107, 240, .12), inset 0 0 30px rgba(90, 107, 240, .05); }
.cifra { color: #EAF0FF; text-shadow: 0 0 6px var(--neon), 0 0 20px var(--neon-suave); }

/* Las viñetas de las listas de beneficios. */
.marca-li { box-shadow: 0 0 8px var(--neon); }

/* Donde está la marca de WhatsApp, su verde. */
.wa-cabeza img, .wa-mini img, .wa-chat .de img { filter: drop-shadow(0 0 6px rgba(37, 211, 102, .8)) drop-shadow(0 0 16px rgba(37, 211, 102, .4)); }
.pronto { box-shadow: 0 0 10px var(--neon-suave); text-shadow: 0 0 8px var(--neon-suave); }

/* Movimiento reducido: el brillo queda, sólo se van las transiciones. */
@media (prefers-reduced-motion: reduce) {
  .producto, .ficha, .caja, .ico, .enviar, .b1 { transition: none; }
}