/* ============================================================================
   LIQUID GLASS · kit reutilizable (color-neutral)
   Efectos: material vidrio + refracción cromática · destello del filo (glow +
   estrellas, física 1/d²) · reflejo especular que sigue el cursor · botones
   lente · spot del cursor · menú móvil de vidrio.

   NO impone colores: la luz es blanca (neutra) y el vidrio toma el color de lo
   que tenga detrás. Opcional: tintá el spot del cursor con --lg-accent.

   Uso: poné la clase a tus elementos y llamá LiquidGlass.init() (ver el .js).
     .lg-panel    → tarjeta/panel de vidrio
     .lg-button   → botón lente de vidrio
     [data-lg-glow] o .lg-panel/.lg-button → reciben el destello del filo
   Mejor en Chromium/Safari (filtros SVG en backdrop-filter); fallback elegante.
   ============================================================================ */

:root{
  --lg-radius: 16px;            /* redondeo del vidrio (igualar al de tus elementos) */
  --lg-accent: 255,255,255;     /* RGB del spot ambiental del cursor (blanco = neutro) */
  --lg-edge: 255,255,255;       /* color del filo/realces (blanco = neutro) */
  --lg-tint: 0;                 /* 0 = vidrio sin tinte. Subí a ~0.05 si querés calidez del color de la página */
}

/* ───────── MATERIAL VIDRIO (paneles) ───────── */
.lg-panel{
  position: relative; overflow: hidden;
  border-radius: var(--lg-radius);
  background:
    linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.05));
  border: 1px solid rgba(var(--lg-edge), 0.18);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 -28px 56px rgba(0,0,0,0.12),
    0 26px 64px rgba(0,0,0,0.42), 0 5px 16px rgba(0,0,0,0.34);
  -webkit-backdrop-filter: blur(var(--lg-glass-blur, 22px));
  backdrop-filter: blur(var(--lg-glass-blur, 22px));
}
/* refracción REAL del fondo (vidrio, no esmerilado) cuando hay soporte de filtros SVG */
@supports ((backdrop-filter: url(#g)) or (-webkit-backdrop-filter: url(#g))){
  .lg-panel{
    -webkit-backdrop-filter: url(#lg-glass);
    backdrop-filter: url(#lg-glass);
  }
}
/* fallback sin backdrop-filter: un vidrio oscuro translúcido neutro */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lg-panel{ background: rgba(20,20,22,0.72); }
}

/* ───────── BOTONES LENTE ───────── */
.lg-button{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--lg-radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--lg-edge), 0.34);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 10px 26px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@supports ((backdrop-filter: url(#g)) or (-webkit-backdrop-filter: url(#g))){
  .lg-button{
    -webkit-backdrop-filter: url(#lg-lens) brightness(1.03);
    backdrop-filter: url(#lg-lens) brightness(1.03);
  }
}

/* ───────── DESTELLO DEL FILO (capa global de emisores) ─────────
   Glow tangente + estrella de 8 puntas, en el punto del borde redondeado más
   cercano al cursor, intensidad ∝ 1/d². Capa absolute en coords de DOCUMENTO
   (scrollea nativa). Luz BLANCA (neutra). El JS posiciona --x/--y/--ang/--int/--scale. */
.lg-fxlayer{ position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483000; pointer-events: none; }
.lg-fx{ position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: translate(var(--x, -400px), var(--y, -400px)); will-change: transform; }
.lg-fx::before{   /* glow tangente al filo (alt 3: nítido) */
  content: ''; position: absolute; left: 0; top: 0;
  width: 100px; height: 50px; margin: -25px 0 0 -50px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.98), rgba(255,255,255,0.30) 42%, transparent 72%);
  filter: blur(5px); mix-blend-mode: screen;
  transform: scale(var(--scale, 1)) rotate(calc(var(--ang, 0deg) + 90deg));
  opacity: var(--int, 0);
}
.lg-fx::after{    /* estrella de 8 puntas (alt 3: marcadas) */
  content: ''; position: absolute; left: 0; top: 0;
  width: 70px; height: 70px; margin: -35px 0 0 -35px;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0.95) 0deg, rgba(255,255,255,0) 2.5deg, rgba(255,255,255,0) 45deg);
  -webkit-mask: radial-gradient(circle, #fff 3%, rgba(255,255,255,0.5) 24%, transparent 60%);
  mask: radial-gradient(circle, #fff 3%, rgba(255,255,255,0.5) 24%, transparent 60%);
  filter: blur(0.5px); mix-blend-mode: screen;
  transform: scale(var(--scale, 1)) rotate(var(--ang, 0deg));
  opacity: calc(var(--int, 0) * 0.82);
}

/* ───────── REFLEJO ESPECULAR DE SUPERFICIE ─────────
   Capa SVG absolute (coords documento, scroll nativo). Una luz blanca que sigue
   el cursor refleja en la superficie de los paneles/botones. El JS sincroniza
   un <rect> por elemento y mueve la luz. */
.lg-speclight{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible;
  z-index: 2147482999; pointer-events: none; mix-blend-mode: screen; }

/* ───────── SPOT DE LUZ DEL CURSOR (ambiental, neutro) ───────── */
.lg-cursor-glow{
  position: fixed; top: -72px; left: -72px; width: 144px; height: 144px; border-radius: 50%;
  z-index: 0; pointer-events: none; will-change: transform;
  background: radial-gradient(circle, rgba(var(--lg-accent),0.10), rgba(var(--lg-accent),0.03) 45%, transparent 66%);
}

/* ───────── MENÚ MÓVIL DE VIDRIO ─────────
   Estructura mínima: un overlay .lg-menu (display:none → .open) con enlaces.
   El JS lo cablea a un botón .lg-burger. */
.lg-menu{
  display: none; position: fixed; inset: 0; z-index: 2147483600;
  background: rgba(8,8,10,0.98);
  flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.lg-menu.open{ display: flex; }
.lg-menu a{
  display: block; text-align: center; text-decoration: none;
  width: min(280px, 72vw); padding: 15px 0; border-radius: 14px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(var(--lg-edge),0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.45), 0 8px 20px rgba(0,0,0,0.35);
  transition: transform .2s;
}
.lg-menu a:active{ transform: scale(0.98); }
.lg-burger{ background: none; border: 0; cursor: pointer; display: inline-flex; flex-direction: column; gap: 5px; padding: 4px; }
.lg-burger span{ display: block; width: 24px; height: 2px; background: currentColor; transition: .3s; }
.lg-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.lg-burger.open span:nth-child(2){ opacity: 0; }
.lg-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce){ .lg-cursor-glow{ display: none; } }