/* Colores, tipografía y tema claro vienen del sistema de diseño (_ds/…/styles.css).
   Aquí solo: variables propias de la página y secciones forzadas a oscuro dentro del tema claro. */
:root { --header-bg:linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.6)); --bar-bg:rgba(0,0,0,0.86); color-scheme: dark; }
[data-theme="light"] { --header-bg:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.8)); --bar-bg:rgba(255,255,255,0.9); color-scheme: light; }
[data-theme="light"] [data-dark] {
  --ground:#000000; --ground-2:#131316;
  --glass:rgba(232,234,240,0.10); --glass-2:rgba(232,234,240,0.06);
  --hair:rgba(236,238,244,0.24); --hair-soft:rgba(236,238,244,0.11);
  --ink:#FFFFFF; --ink-2:#BDBFC6; --ink-3:#9396A0; --gold-text:#E4B94D;
  color-scheme: dark;
}

/* Burbuja 3D: brillo + reflejo + destello animado sobre los colores existentes */
button:not([style*="padding: 0;"]),
a[style*="border-radius: 999px"][style*="padding"] {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--font-sans);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
button:not([style*="padding: 0;"])::before,
a[style*="border-radius: 999px"][style*="padding"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(4px 2px at calc(100% - 16px) calc(100% - 5px), rgba(255,255,255,.8), transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 48%) top 2px center / 80% 46% no-repeat;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -5px 10px rgba(0,0,0,.18);
  mix-blend-mode: screen; opacity: .85;
}
button:not([style*="padding: 0;"])::after,
a[style*="border-radius: 999px"][style*="padding"]::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45) 50%, transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: wo-bubble-shine 3.6s ease-in-out infinite;
}
button:not([style*="padding: 0;"]):hover,
a[style*="border-radius: 999px"][style*="padding"]:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
button:not([style*="padding: 0;"]):active,
a[style*="border-radius: 999px"][style*="padding"]:active { transform: translateY(1px) scale(.98); }
button:not([style*="padding: 0;"]):hover::after,
a[style*="border-radius: 999px"][style*="padding"]:hover::after { animation-duration: 1.2s; }
@keyframes wo-bubble-shine {
  0%, 55% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(360%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  button::after, a::after { animation: none !important; }
}