/* ==========================================================================
   OXIRA · web pública — tema oscuro con movimiento
   Todo es CSS/SVG nativo: sin librerías, sin imágenes pesadas.
   El color de marca llega como --oxi desde Ajustes.
   ========================================================================== */

/* Los valores de marca (--oxi, --oxi-2, --oxi-3, --bg, --bg-2, --oxi-claro)
   los inyecta el layout desde Ajustes → Empresa vía App\Support\Paleta.
   Lo de aquí abajo es solo el respaldo por si faltaran. */
:root {
  --oxi: #4407d5;                   /* violeta profundo de marca */
  --oxi-2: #1e0360;                 /* el mismo tono llevado al negro */
  --oxi-3: #12a594;                 /* teal sobrio: el único acento vivo */
  --oxi-claro: #a98cf0;

  --bg: #05040a;
  --bg-2: #0a0816;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --txt: #ece9f5;
  --muted: #9a94b0;

  --radius: 18px;
}

/* ------------------------------------------------------------------ base */

body.oxi-front {
  background: var(--bg);
  color: var(--txt);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.oxi-front h1, .oxi-front h2, .oxi-front h3 {
  letter-spacing: -.03em;
  font-weight: 800;
}

.oxi-front .text-muted,
.oxi-front .text-body-secondary { color: var(--muted) !important; }

.oxi-front a { color: color-mix(in srgb, var(--oxi) 45%, #fff); }
.oxi-front hr { border-color: var(--line); opacity: 1; }

/* ------------------------------------------------- fondo vivo (aurora) */

.oxi-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 14% -12%, color-mix(in srgb, var(--oxi) 26%, transparent), transparent 62%),
    radial-gradient(820px 540px at 90% 6%, color-mix(in srgb, var(--oxi-2) 30%, transparent), transparent 64%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
}

/* Manchas de luz que respiran lentamente. Discretas: el fondo no compite. */
.oxi-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .30;
  animation: oxi-flotar 26s ease-in-out infinite;
  will-change: transform;
}
.oxi-blob-1 { width: 540px; height: 540px; top: -160px; left: -120px; background: var(--oxi); }
.oxi-blob-2 { width: 470px; height: 470px; top: 8%; right: -150px; background: var(--oxi-2); opacity: .38; animation-delay: -8s; }
.oxi-blob-3 { width: 360px; height: 360px; bottom: -130px; left: 38%; background: var(--oxi-3); opacity: .14; animation-delay: -16s; }

@keyframes oxi-flotar {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(60px, -40px, 0) scale(1.12); }
  66% { transform: translate3d(-40px, 50px, 0) scale(.94); }
}

/* Rejilla sutil encima del degradado. */
.oxi-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* --------------------------------------------------------------- navbar */

.oxi-nav {
  background: rgba(10, 8, 20, .55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.oxi-nav .nav-link { color: var(--muted); font-weight: 500; font-size: .925rem; }
.oxi-nav .nav-link:hover, .oxi-nav .nav-link.activo { color: #fff; }
.oxi-nav .navbar-brand { color: #fff; font-weight: 800; letter-spacing: -.02em; }

.oxi-logo {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--oxi), color-mix(in srgb, var(--oxi) 40%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--oxi) 32%, transparent);
  color: #fff;
}

/* ------------------------------------------------- menú móvil a pantalla completa */

/* La barra es sticky y crea su propio contexto de apilamiento.
   Con el menú abierto la sacamos del camino por completo: si se queda encima,
   intercepta los clics de la franja superior y el aspa deja de responder.
   El menú trae su propia marca y su propio botón de cerrar. */
body.oxi-menu-abierto .oxi-nav {
  opacity: 0;
  pointer-events: none;
}

/* Botón hamburguesa que se transforma en aspa. */
.oxi-burger {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  display: grid; place-items: center;
  gap: 5px;
  padding: 0;
  position: relative;
  z-index: 1101;
  cursor: pointer;
}
.oxi-burger span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: #fff;
}

/* Con el menú abierto manda el aspa que vive dentro del overlay:
   así solo hay un botón de cerrar y no depende del apilamiento de la barra. */
body.oxi-menu-abierto .oxi-burger { opacity: 0; pointer-events: none; }

.oxi-menu {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  padding: 5.5rem 1.5rem 2rem;
  background:
    radial-gradient(700px 500px at 80% -10%, color-mix(in srgb, var(--oxi) 34%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  /* Cerrado: recortado a un círculo en la esquina del botón. */
  clip-path: circle(0 at calc(100% - 42px) 42px);
  transition: clip-path .55s cubic-bezier(.77, 0, .18, 1), visibility .55s;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.oxi-menu-abierto .oxi-menu {
  clip-path: circle(150% at calc(100% - 42px) 42px);
  visibility: visible;
}
body.oxi-menu-abierto { overflow: hidden; }

/* Cabecera del menú: marca a la izquierda, aspa a la derecha. */
.oxi-menu-cabecera {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 1.5rem;
  z-index: 3;
}
.oxi-menu-cabecera .oxi-brand { padding: 0; }

.oxi-menu-cerrar {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
}
.oxi-menu-cerrar:hover { background: var(--surface-2); }

.oxi-menu-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--txt);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  /* Entran escalonados cuando el menú se abre. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s ease, transform .4s ease, color .2s;
}
body.oxi-menu-abierto .oxi-menu-link { opacity: 1; transform: none; }
body.oxi-menu-abierto .oxi-menu-link:nth-child(1) { transition-delay: .18s; }
body.oxi-menu-abierto .oxi-menu-link:nth-child(2) { transition-delay: .25s; }
body.oxi-menu-abierto .oxi-menu-link:nth-child(3) { transition-delay: .32s; }
body.oxi-menu-abierto .oxi-menu-link:nth-child(4) { transition-delay: .39s; }

.oxi-menu-link i { font-size: 1.1rem; color: var(--oxi-3); width: 1.4rem; }
.oxi-menu-link .bi-arrow-right { margin-left: auto; opacity: .35; font-size: .95rem; color: var(--muted); }
.oxi-menu-link:hover, .oxi-menu-link:focus { color: #fff; }
.oxi-menu-link.activo { color: var(--oxi-claro); }

.oxi-menu-pie {
  margin-top: auto;
  padding-top: 2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease .46s, transform .45s ease .46s;
}
body.oxi-menu-abierto .oxi-menu-pie { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .oxi-menu { transition: visibility .01s; }
  .oxi-menu-link, .oxi-menu-pie { transition: none; }
  .oxi-burger span { transition: none; }
}

@media (min-width: 992px) {
  .oxi-menu, .oxi-burger { display: none !important; }
}

/* ---------------------------------------------------------------- héroe */

.oxi-hero { position: relative; padding: 6rem 0 8rem; }

.oxi-hero h1 {
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  line-height: 1.05;
}

/* Palabra con degradado animado: la versión clara de tu color → teal. */
.oxi-gradiente {
  background: linear-gradient(100deg, var(--oxi-claro), var(--oxi-3), var(--oxi-claro), var(--oxi-claro));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oxi-desplazar 8s linear infinite;
}
@keyframes oxi-desplazar { to { background-position: 300% 0; } }

/* Etiqueta con punto latiendo. */
.oxi-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  font-size: .8rem; color: var(--muted);
  backdrop-filter: blur(8px);
}
.oxi-pulso {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: oxi-latir 2s infinite;
}
@keyframes oxi-latir {
  70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Destello que barre el héroe. Tenue: se intuye más de lo que se ve. */
.oxi-flare {
  position: absolute;
  top: 12%; left: -30%;
  width: 55%; height: 240px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035), transparent);
  transform: rotate(-14deg);
  filter: blur(26px);
  pointer-events: none;
  animation: oxi-barrer 12s ease-in-out infinite;
}
@keyframes oxi-barrer {
  0%, 100% { left: -35%; opacity: 0; }
  45% { opacity: 1; }
  100% { left: 115%; }
}

/* ----------------------------------------------------- ondas divisorias */

.oxi-ondas {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.oxi-ondas svg { width: 100%; height: 110px; display: block; }
.oxi-onda-1 { animation: oxi-vaiven 14s ease-in-out infinite; }
.oxi-onda-2 { animation: oxi-vaiven 20s ease-in-out infinite reverse; }
@keyframes oxi-vaiven {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-38px); }
}

/* --------------------------------------------------------------- botones */

.btn-oxi {
  background: linear-gradient(135deg, var(--oxi), color-mix(in srgb, var(--oxi) 55%, #000));
  color: #fff; border: 0;
  border-radius: 100px;
  padding: .8rem 1.75rem;
  font-weight: 650;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--oxi) 32%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-oxi:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--oxi) 42%, transparent);
}
/* Brillo que cruza el botón al pasar el cursor. */
.btn-oxi::after {
  content: '';
  position: absolute; inset: 0 auto 0 -80%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.btn-oxi:hover::after { left: 130%; }

.btn-fantasma {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .8rem 1.6rem;
  color: var(--txt);
  background: var(--surface);
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s;
}
.btn-fantasma:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--oxi) 45%, transparent); color: #fff; }

/* --------------------------------------------------------------- tarjetas */

.oxi-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  overflow: hidden;
}
.oxi-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--oxi) 50%, transparent);
  background: var(--surface-2);
}
/* Foco que sigue al cursor (lo alimenta el JS con --mx/--my). */
.oxi-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--oxi) 22%, transparent), transparent 42%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.oxi-card:hover::before { opacity: 1; }

/* Plan destacado: borde con degradado, rematado en teal. */
.oxi-card.destacado {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(135deg, var(--oxi), var(--oxi-3)) border-box;
  border: 1px solid transparent;
}

.oxi-icono {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--oxi), color-mix(in srgb, var(--oxi) 45%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.oxi-precio {
  font-size: 2.5rem; font-weight: 800; line-height: 1;
  color: #fff;
}

.oxi-chip {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 100px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--oxi-3);
  color: #04211d;
}

/* ------------------------------------------------------ cinta de logos */

.oxi-cinta { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.oxi-cinta-pista { display: flex; gap: 2.5rem; width: max-content; animation: oxi-correr 32s linear infinite; }
.oxi-cinta:hover .oxi-cinta-pista { animation-play-state: paused; }
@keyframes oxi-correr { to { transform: translateX(-50%); } }
.oxi-cinta-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 600; white-space: nowrap;
}

/* ------------------------------------------------------ reveal al scroll */

.oxi-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.oxi-reveal.visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ contadores */

.oxi-num {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #fff;
}

/* ---------------------------------------------------------------- formas */

.oxi-glass-form .form-control,
.oxi-glass-form .form-select {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--txt);
  border-radius: 12px;
  padding: .7rem .9rem;
}
.oxi-glass-form .form-control:focus {
  background: var(--surface-2);
  border-color: var(--oxi);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oxi) 20%, transparent);
  color: var(--txt);
}
.oxi-glass-form .form-control::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ------------------------------------------------------------- pie */

.oxi-footer { border-top: 1px solid var(--line); background: rgba(6, 4, 12, .6); }

/* -------------------------------------------- respeto por quien lo pide */

@media (prefers-reduced-motion: reduce) {
  .oxi-blob, .oxi-flare, .oxi-gradiente, .oxi-onda-1, .oxi-onda-2,
  .oxi-cinta-pista, .oxi-pulso { animation: none !important; }
  .oxi-reveal { opacity: 1; transform: none; transition: none; }
  .oxi-card:hover { transform: none; }
}

@media (max-width: 767.98px) {
  .oxi-hero { padding: 3.5rem 0 5.5rem; }
  .oxi-blob { filter: blur(70px); opacity: .35; }
  .oxi-ondas svg { height: 70px; }
}