/* ============================================================
   FEBRES 360° · LIQUID GLASS MEJORADO
   Tres capas que crean el efecto "vidrio líquido":
   1. Desenfoque + saturación del fondo (backdrop-filter)
   2. Refracción en los bordes (filtro SVG #lg-distort, solo
      Chromium — mejora progresiva, en Safari/Firefox se ve
      como glass premium normal)
   3. Brillo especular que sigue el dedo/cursor (liquid-glass.js)
   Requiere: tokens.css + el <svg> de filtros incluido en
   html/tarjeta-liquid-glass.html (una sola vez por página).
   ============================================================ */

/* ---------- Base ---------- */
.lg{
  position:relative;
  background:var(--lg-bg);
  border:1px solid var(--lg-border);
  border-radius:var(--lg-radius);
  box-shadow:var(--lg-shadow),
             inset 0 1px 0 rgba(255,255,255,.16),
             inset 0 -1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
  overflow:hidden;
}

/* Refracción líquida en bordes — solo Chromium, mejora progresiva */
@supports (backdrop-filter: url(#lg-distort)) {
  .lg.lg-liquid{
    backdrop-filter:url(#lg-distort) blur(calc(var(--lg-blur) - 8px)) saturate(var(--lg-saturate));
  }
}

/* Lámina de luz superior (curvatura del vidrio) */
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 35%),
    radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.10), transparent 60%);
}

/* Brillo especular líquido: sigue el puntero vía --mx / --my
   (las actualiza js/liquid-glass.js) */
.lg::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, transparent 70%);
}
.lg:hover::after,.lg.lg-touch::after{opacity:1}

.lg:hover{background:var(--lg-bg-hover);border-color:var(--lg-border-hover)}

/* ---------- Variantes ---------- */

/* Tarjeta */
.lg-card{padding:28px 24px}
.lg-card:hover{transform:translateY(-6px)}

/* Barra de navegación tipo píldora */
.lg-nav{
  display:flex;align-items:center;gap:6px;
  padding:8px;border-radius:999px;width:max-content;
}
.lg-nav a{
  font-family:var(--f360-font-body);font-size:14px;font-weight:500;
  color:var(--f360-ink-dim);text-decoration:none;
  padding:9px 18px;border-radius:999px;transition:all .25s ease;
}
.lg-nav a:hover{color:var(--f360-ink);background:rgba(255,255,255,.08)}
.lg-nav a.activo{
  color:var(--f360-bg-deep);font-weight:600;
  background:var(--f360-neon);
  box-shadow:0 4px 18px -4px var(--f360-neon-soft);
}

/* Botón de vidrio */
.lg-btn{
  display:inline-block;cursor:pointer;
  font-family:var(--f360-font-body);font-size:15px;font-weight:600;
  color:var(--f360-ink);padding:14px 30px;border-radius:999px;
}
.lg-btn:hover{transform:translateY(-2px)}

/* Inclinación 3D sutil (la activa liquid-glass.js con .lg-tilt) */
.lg-tilt{
  transform:perspective(700px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--ty,0px));
  will-change:transform;
}

@media (prefers-reduced-motion: reduce){
  .lg,.lg::after{transition:none}
  .lg-tilt{transform:none!important}
}