/* Capa premium compartida (Santiago y Badges): fondo WebGL de manchas de color
 * (fondo.js) + cristal esmerilado encima con borde de luz y reflejo que sigue al
 * cursor. Sin WebGL queda un degradado CSS con las mismas manchas, quieto.
 */
:root {
  --fondo-base: oklch(97% 0.012 230);
  --fondo-violeta: oklch(84% 0.08 240 / 0.7);
  --fondo-menta: oklch(86% 0.12 165 / 0.7);
  --fondo-azul: oklch(72% 0.14 262 / 0.7);
  --fondo-rosa: oklch(84% 0.1 350 / 0.6);
  --vidrio: oklch(100% 0 0 / 0.42);
  --vidrio-fuerte: oklch(100% 0 0 / 0.62);
  --vidrio-borde: oklch(100% 0 0 / 0.75);
  --vidrio-borde-bajo: oklch(100% 0 0 / 0.18);
  --vidrio-sombra: 0 30px 80px oklch(35% 0.12 280 / 0.18), 0 2px 6px oklch(35% 0.12 280 / 0.06);
  --vidrio-luz: oklch(100% 0 0 / 0.55);
  --lamina: oklch(100% 0 0 / 0.16);
  --gloss-top: oklch(100% 0 0 / 0.3);
  --gloss-bottom: oklch(0% 0 0 / 0.1);
  --btn-shadow: 0 12px 28px oklch(45% 0.2 265 / 0.35);
  --halo-1: oklch(78% 0.13 240);
  --halo-2: oklch(86% 0.12 185);
  --halo-3: oklch(84% 0.1 350);
  --halo-4: oklch(92% 0.12 95);
}

body {
  background:
    radial-gradient(40vmax 30vmax at 15% 10%, var(--fondo-violeta), transparent 70%),
    radial-gradient(36vmax 30vmax at 85% 25%, var(--fondo-menta), transparent 70%),
    radial-gradient(40vmax 32vmax at 55% 95%, var(--fondo-azul), transparent 70%),
    radial-gradient(28vmax 24vmax at 10% 75%, var(--fondo-rosa), transparent 70%),
    var(--fondo-base);
  background-attachment: fixed;
}
.fondo { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.fondo canvas { display: block; width: 100%; height: 100%; }

/* Láminas de cristal que flotan entre el fondo y el contenido */
.cristales { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cristales i {
  position: absolute; display: block;
  border: 1px solid var(--vidrio-borde);
  border-radius: 48px;
  background: linear-gradient(135deg, var(--vidrio-luz), var(--lamina) 40%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--vidrio-borde), var(--vidrio-sombra);
  translate: calc((var(--mx, 0.5) - 0.5) * var(--p) * 1px) calc((var(--my, 0.5) - 0.5) * var(--p) * 1px);
  transition: translate 0.9s var(--ease-out);
  animation: flota 18s var(--ease-in-out) infinite alternate;
}
.cristales .c1 { --p: 60; width: 30vw; height: 42vh; left: -16vw; top: 52vh; rotate: -12deg; }
.cristales .c2 { --p: -80; width: 26vw; height: 34vh; right: -4vw; top: 8vh; rotate: 14deg; animation-duration: 22s; }
.cristales .c3 { --p: 40; width: 22vw; height: 22vw; right: 18vw; bottom: -10vh; border-radius: 50%; animation-duration: 26s; }
@keyframes flota { from { transform: translateY(-2vh) rotate(-2deg); } to { transform: translateY(3vh) rotate(3deg); } }

/* Contenido en cristal */
.vidrio:not(.nav) { position: relative; }
.vidrio {
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--vidrio-borde), inset 0 -1px 0 var(--vidrio-borde-bajo), var(--vidrio-sombra);
}
.vidrio::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), var(--vidrio-luz), transparent 60%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  mix-blend-mode: soft-light;
}
.vidrio:hover::after { opacity: 1; }
.form.vidrio, .wallet.vidrio, .live.vidrio { background: var(--vidrio-fuerte); }
.signup { background: transparent; }
.who { border-top: 0; }
.foot { border-top: 1px solid var(--vidrio-borde-bajo); background: var(--vidrio); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.shot.vidrio { background: var(--vidrio); }

/* Títulos con más peso */
.hero h1 { font-weight: 700; letter-spacing: -0.045em; }

/* Botones con brillo */
.btn-primary {
  background: linear-gradient(180deg, var(--gloss-top), transparent 55%, var(--gloss-bottom)), var(--color-accent);
  box-shadow: var(--btn-shadow), inset 0 1px 0 var(--gloss-top);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--gloss-top), transparent 55%, var(--gloss-bottom)), var(--color-accent-hover); }
.btn-ghost { background: var(--vidrio); border-color: var(--vidrio-borde); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.more .btn-ghost { background: transparent; }

/* Hero: una línea de luz azul recorre el borde del demo. */
@property --halo-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.live-halo { position: relative; min-width: 0; padding: 2px; border-radius: calc(var(--radius-lg) + 2px); isolation: isolate; }
.live-halo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--halo-ang), var(--vidrio-borde) 0deg, var(--vidrio-borde) 250deg, var(--halo-1) 310deg, var(--vidrio-luz) 340deg, var(--vidrio-borde) 360deg);
  animation: halo-gira 5s linear infinite;
}
.live-halo .live.vidrio { border-color: transparent; background: var(--color-surface); }
@keyframes halo-gira { to { --halo-ang: 360deg; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio, .foot { background: var(--color-surface); }
  .cristales { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cristales i { animation: none; transition: none; }
  .live-halo::before { animation: none; }
}
@media (max-width: 760px) {
  .vidrio { -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
}