/* BenStar Occidente — TEMA OSCURO con títulos neón (2026-07-18, a pedido del cliente).
   Fondo oscuro, texto claro. Las rampas de acento están INVERTIDAS respecto al
   tema claro: lo que antes era claro (100-200, usado como FONDO) ahora es oscuro,
   y lo que era oscuro (700-900, usado como TEXTO) ahora es claro. Así cada par
   fondo/texto del sistema Organic conserva su contraste, pero en oscuro.
   El paso 500 se mantiene como el acento vívido (neón) para botones y detalles.
   Para volver al tema claro: git revert de este commit. */
:root{
  --color-bg:#141019;
  --color-surface:#1d1727;
  --color-text:#f3eefa;
  --color-divider:color-mix(in srgb, #f3eefa 16%, transparent);

  /* El sistema Organic define --space-1..4, 6 y 8, pero las páginas también usan
     --space-5 y --space-7 (15 veces). Al no existir, esas declaraciones son
     inválidas y el margen colapsa a 0: por eso varios párrafos quedaban pegados
     a su título. Se completan siguiendo la misma escala (4.4px × n). */
  --space-5:22px;
  --space-7:30.8px;

  /* Verde — oscuro (fondos) → neón claro (texto/acento) */
  --color-accent:#8fce16;
  --color-accent-2:#bd57f7;
  --color-accent-100:#182508;
  --color-accent-200:#223311;
  --color-accent-300:#33490f;
  --color-accent-400:#5c8a10;
  --color-accent-500:#8fce16;
  --color-accent-600:#a6dd3c;
  --color-accent-700:#bde866;
  --color-accent-800:#d3f194;
  --color-accent-900:#e8f8c4;

  /* Morado — oscuro (fondos) → neón claro (texto/acento) */
  --color-accent-2-100:#1f1033;
  --color-accent-2-200:#2b1547;
  --color-accent-2-300:#401d66;
  --color-accent-2-400:#8231c9;
  --color-accent-2-500:#bd57f7;
  --color-accent-2-600:#cd77fa;
  --color-accent-2-700:#db98fc;
  --color-accent-2-800:#ebc0ff;
  --color-accent-2-900:#f5daff;

  /* Neutros del sistema Organic, re-mapeados a oscuro */
  --color-neutral-100:#1c1826;
  --color-neutral-200:#262032;
  --color-neutral-300:#332c40;
  --color-neutral-400:#4a4356;
  --color-neutral-500:#6b6478;
  --color-neutral-600:#8e8799;
  --color-neutral-700:#b3adbd;
  --color-neutral-800:#d6d2de;
  --color-neutral-900:#efecf5;

  /* Sombras para tema oscuro: negro + halo, en vez de tinta sobre claro */
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 4px 16px rgba(0,0,0,.55);
  --shadow-lg:0 18px 44px rgba(0,0,0,.6);
}

/* Fondo de marca: halos de luz neón (verde + morado) sobre el negro */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 10% 6%, rgba(143,206,22,.20), transparent 62%),
    radial-gradient(52% 44% at 94% 2%, rgba(189,87,247,.24), transparent 60%),
    radial-gradient(72% 60% at 88% 96%, rgba(143,206,22,.16), transparent 66%),
    radial-gradient(60% 50% at 4% 92%, rgba(189,87,247,.18), transparent 64%),
    var(--color-bg);
}

/* Nav: barra fija con tinte morado neón translúcido + blur */
.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-accent-2-500) 22%, color-mix(in srgb, var(--color-bg) 70%, transparent));
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent-2-500) 30%, transparent);
}
.nav {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* El CTA del nav es un <a>, y `.nav a{color:inherit}` le ganaba al color del
   botón → texto claro sobre verde. Forzamos el texto oscuro del botón. */
.nav a.btn-primary { color: var(--color-bg); }
body { padding-top: 82px; }
html { scroll-padding-top: 98px; }

/* Contenedores de información: superficie oscura translúcida + borde neón tenue */
.card {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-2-500) 20%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.card.elev-sm { box-shadow: var(--shadow-md); }

/* Banda "closing" de Nosotros: en el tema claro usaba un morado oscuro (700) como
   fondo con texto claro. Al invertir la rampa quedó clara; la volvemos a un panel
   oscuro con borde neón y texto claro, coherente con el tema. */
[style*="background: var(--color-accent-2-700)"] {
  background: color-mix(in srgb, var(--color-accent-2-500) 18%, var(--color-bg)) !important;
  color: var(--color-text) !important;
  border: 1px solid color-mix(in srgb, var(--color-accent-2-500) 45%, transparent);
}
[style*="background: var(--color-accent-2-700)"] a.btn {
  background: var(--color-accent-500) !important;
  color: var(--color-bg) !important;
}

/* ── Títulos neón ── texto claro con halo morado; los acentos verdes brillan en verde */
h1, h2, h3, h4 { color: var(--color-text); }
h1, h2, h3 {
  text-shadow:
    0 0 2px color-mix(in srgb, var(--color-accent-2-500) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--color-accent-2-500) 50%, transparent),
    0 0 34px color-mix(in srgb, var(--color-accent-2-500) 28%, transparent);
}
/* palabras de acento dentro de los títulos (van con color:var(--color-accent-700)) → glow verde */
h1 [style*="--color-accent-700"],
h2 [style*="--color-accent-700"],
h3 [style*="--color-accent-700"] {
  text-shadow:
    0 0 2px color-mix(in srgb, var(--color-accent-500) 75%, transparent),
    0 0 14px color-mix(in srgb, var(--color-accent-500) 55%, transparent),
    0 0 32px color-mix(in srgb, var(--color-accent-500) 30%, transparent);
}

/* La mascota (lobo carbón) necesita despegarse del fondo oscuro: halo morado */
.mascota-wrap .mascota-avatar {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.55))
    drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent-2-500) 42%, transparent));
}

/* Burbujas de texto (tags/kickers): efecto hover — leve elevación + realce de color */
.tag {
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease,
    background-color .2s ease, border-color .2s ease;
}
.tag:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: var(--shadow-sm);
}
.tag-accent:hover   { background: var(--color-accent-200); }
.tag-accent-2:hover { background: var(--color-accent-2-200); }
.tag-neutral:hover  { background: var(--color-neutral-200); }
.tag-outline:hover  { background: color-mix(in srgb, var(--color-accent-500) 14%, transparent); border-color: var(--color-accent-500); }

@media (prefers-reduced-motion: reduce) {
  .tag:hover { transform: none; }
}