/* GuilarTech — capa "liquid glass" y texturas para todo el sitio.
   Va después de guilartech.css; no cambia la estructura, solo el material. */

/* Scroll suave (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- Fondo con luz y textura ---------- */
body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1200px 700px at 85% -10%,rgba(240,193,75,.13),transparent 60%),
    radial-gradient(900px 700px at -10% 30%,rgba(41,66,106,.10),transparent 60%),
    radial-gradient(1000px 800px at 110% 80%,rgba(41,66,106,.08),transparent 60%),
    #F4F5F8;
}

.block.alt{background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.45) 18%,rgba(255,255,255,.45) 82%,rgba(255,255,255,0))}

/* ---------- Menú flotante de cristal ---------- */
header{
  top:12px;margin:12px auto 0;width:min(1240px,calc(100% - 24px));border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
  backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(13,27,61,.05),0 18px 40px -22px rgba(13,27,61,.35);
}
header.stuck{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55));border-color:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 50px -24px rgba(13,27,61,.4)}
header .nav{height:62px;padding:0 10px 0 22px}
header.stuck .nav{height:58px}
.nav-links > a{border-radius:12px}
@media(max-width:900px){
  header{top:8px;margin-top:8px;width:calc(100% - 16px);border-radius:18px}
  .nav-links{top:78px!important;left:8px!important;right:8px!important;border-radius:20px;
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8))!important;
    backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
    border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 60px -30px rgba(13,27,61,.45)}
}

/* ---------- Botones de vidrio ---------- */
.btn{position:relative;isolation:isolate}
.btn-primary{background:linear-gradient(180deg,#22386a,#0D1B3D 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 14px 30px -14px rgba(13,27,61,.75)}
.btn-gold{background:linear-gradient(180deg,#F5CF63,#D4A017 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,85,0,.25),0 14px 30px -14px rgba(212,160,23,.85)}
.btn-outline{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.4));border-color:rgba(255,255,255,.85)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px -16px rgba(13,27,61,.35)}

/* ---------- Tarjetas de cristal ---------- */
.proj,.fx,.kase,.metric,.gear-item,.fact,.card,.plan,.prod-card,.cs-grid>*,.faq-item,.price-card{
  background:
    radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.7),transparent 55%),
    linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.34))!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(13,27,61,.04),0 30px 60px -36px rgba(13,27,61,.38)!important;
}
.proj-shot{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.tags li{background:rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.8)}

/* Tarjeta CTA de proyectos a todo lo ancho */
.proj-cta{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr}
.proj-cta .proj-ph{aspect-ratio:auto;min-height:220px}
@media(max-width:620px){.proj-cta{grid-template-columns:1fr}}

/* Botón flotante de WhatsApp con brillo de cristal */
.wa-float{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 34px -12px rgba(37,211,102,.7)!important}

/* El hook 3D ocupa la pantalla completa bajo el menú flotante */
.hero.hook{margin-top:-86px}
@media(max-width:900px){.hero.hook{margin-top:-78px}}

/* "La fórmula" animada conserva su diseño propio (sin tarjeta de cristal) */
#formula.scrub .fx{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}