/* AIZURG landing — base global (el resto del estilo vive inline en index.html, fiel al diseño de Claude Design) */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0A0A0B;color:#F4F4F2;-webkit-font-smoothing:antialiased}
body{font-family:'Geist',-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
::selection{background:#7C5CFF;color:#FFFFFF}
a{color:inherit;text-decoration:none}

@keyframes az-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@keyframes az-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes az-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* hovers (en el .dc.html eran style-hover; acá son clases porque el inline style siempre gana) */
.nav-link{font-size:14px;color:var(--muted);transition:color .25s}
.nav-link:hover{color:#F4F4F2}
.btn-ghost{background:transparent;border:1px solid var(--line);transition:border-color .25s,background .25s}
.btn-ghost:hover{border-color:#3a3a40;background:rgba(255,255,255,.03)}
.flink{transition:color .25s}
.flink:hover{color:#F4F4F2}

:focus-visible{outline:2px solid var(--accent,#7C5CFF);outline-offset:3px;border-radius:4px}

/* ============================================================
   LIQUID GLASS (.lg) — capas montadas por app.js
   Receta: canvas→PNG→feDisplacementMap→CSS filter sobre réplica
   del fondo del .lg-host (NO backdrop-filter: Safari no soporta
   filtros SVG ahí). Fallback sin JS / reduced-motion: esmerilado.
   Portado de aizurg-demo/sfp-assets (codepen-liquid-glass-
   fedisplacement, inspiration-only, reimplementada).
   ============================================================ */
.lg{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:100px;isolation:isolate;overflow:hidden;border:1px solid rgba(244,244,242,.22);background:rgba(244,244,242,.07);backdrop-filter:blur(7px) saturate(1.15);-webkit-backdrop-filter:blur(7px) saturate(1.15);box-shadow:0 8px 26px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(244,244,242,.18);transition:border-color .25s}
.lg.lg-live{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.lg-label{position:relative;z-index:3;display:inline-flex;align-items:center;white-space:nowrap}
.lg-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0}
/* ventana del tamaño del elemento: acá vive el filter (su región userSpaceOnUse
   queda alineada al pill); adentro, la réplica corrida del fondo del host */
.lg-window{position:absolute;inset:0}
.lg-refract{position:absolute;will-change:transform}
.lg-tint{position:absolute;inset:0;background:rgba(244,244,242,.07)}
.lg-glint{position:absolute;inset:0;mix-blend-mode:screen;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 30%),radial-gradient(80% 120% at 85% 110%,rgba(124,92,255,.20),transparent 60%)}
/* glint sweep en hover (barato: CSS, sin recalcular el filtro) */
.lg::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.lg:hover::after{transform:translateX(120%)}
.lg:hover{border-color:rgba(124,92,255,.6)}

/* CTA primaria: vidrio violeta */
.lg-primary{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.16);box-shadow:0 14px 40px -14px rgba(124,92,255,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.lg-primary .lg-tint{background:rgba(124,92,255,.28)}
.lg-primary:hover{border-color:rgba(124,92,255,.85)}

/* pill del nav: fixed sobre contenido que scrollea — app.js le monta
   backdrop-filter:url(#mapa) (Chrome/Edge = refracción en vivo).
   Fallback (Safari/Firefox/sin JS): esmerilado violeta estándar. */
.nav-glass{border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.16);box-shadow:0 8px 24px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}

/* material refractable de los hosts: el glass necesita contraste detrás —
   glow + hairlines viven EN el background (la réplica copia exactamente esto) */
.host-hero{background:radial-gradient(46% 38% at 22% 16%,rgba(124,92,255,.16),transparent 64%),radial-gradient(42% 36% at 84% 82%,rgba(59,130,246,.10),transparent 62%),radial-gradient(50% 34% at 50% 102%,rgba(124,92,255,.07),transparent 70%),repeating-linear-gradient(115deg,rgba(244,244,242,.04) 0 1px,transparent 1px 10px),#0A0A0B}
.host-cierre{background:radial-gradient(56% 72% at 50% 46%,rgba(124,92,255,.13),transparent 66%),repeating-linear-gradient(115deg,rgba(244,244,242,.04) 0 1px,transparent 1px 10px),#0A0A0B}
.host-panel{background:radial-gradient(130% 90% at 82% -12%,rgba(124,92,255,.10),transparent 56%),repeating-linear-gradient(115deg,rgba(244,244,242,.03) 0 1px,transparent 1px 9px),var(--bg-elev)}

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

@media (max-width:680px){
  .nav-text-link{display:none}
}