/* =====================================================================
   Allora · Biblioteca de efectos (elegidos por Pedro, adaptados a vanilla)
   Paleta SIEMPRE azul Allora. Todos opt-in por data-attr / clase.
   Respetan prefers-reduced-motion y son responsive.
   ===================================================================== */

/* ---------- 1) BackgroundPaths: trazos SVG curvos que fluyen ---------- */
.bg-paths{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}
.bg-paths svg{position:absolute;inset:0;width:100%;height:100%}
.bg-paths path{fill:none;stroke:currentColor;stroke-linecap:round}
.bg-paths--azul{color:#1B5EF7}
.bg-paths--claro{color:#6EA8FF}
@keyframes bgp-flow{
  0%{stroke-dashoffset:1;opacity:.25}
  50%{opacity:.6}
  100%{stroke-dashoffset:0;opacity:.25}
}
.bg-paths path{stroke-dasharray:.42 .58;animation:bgp-flow var(--bgp-dur,22s) linear infinite;animation-delay:var(--bgp-delay,0s)}
@media (prefers-reduced-motion: reduce){
  .bg-paths path{animation:none;stroke-dasharray:none;opacity:.28}
}

/* ---------- 2) Tilt-scroll 3D: mock que se endereza al hacer scroll ---- */
.tilt-scroll{perspective:1400px;perspective-origin:50% 30%}
.tilt-scroll__inner{transform-style:preserve-3d;transform:perspective(1400px) rotateX(18deg) scale(.94);transition:transform .1s linear;will-change:transform;transform-origin:50% 100%}
@media (prefers-reduced-motion: reduce){
  .tilt-scroll__inner{transform:none!important}
}
@media (max-width:760px){
  .tilt-scroll{perspective:none}
  .tilt-scroll__inner{transform:none!important}
}

/* ---------- 3) SilkAurora: aurora de seda WebGL (azul) + fallback ------ */
.silk{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}
.silk canvas{display:block;width:100%;height:100%}
/* Fallback estático (y base mientras carga / si no hay WebGL / móvil) */
.silk::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 78% 28%, rgba(27,94,247,.34), transparent 60%),
    radial-gradient(50% 60% at 16% 82%, rgba(110,168,255,.20), transparent 62%),
    linear-gradient(180deg,#0A0F1E,#0F172A);}
.silk.silk--on::before{opacity:0;transition:opacity 1.1s ease}
/* velo de legibilidad para heros con texto a la izquierda (por debajo del contenido) */
.silk--hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,15,30,.78) 0%, rgba(10,15,30,.34) 34%, transparent 60%),
    linear-gradient(0deg, rgba(10,15,30,.55), transparent 42%);}
@media (max-width:760px){ .silk canvas{display:none} }

/* ---------- 3b) Rejilla cibernética WebGL (azul, sutil, warp de ratón) - */
.cyber-grid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 38%, #000 100%);}
.cyber-grid canvas{display:block;width:100%;height:100%;mix-blend-mode:screen;opacity:.2}
@media (max-width:760px){ .cyber-grid canvas{display:none} }

/* ---------- 3c) Onda neón WebGL (azul, para hero de diseño web) -------- */
.wave-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wave-bg canvas{display:block;width:100%;height:100%;opacity:.42;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 38%,#000 64%,transparent 92%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 38%,#000 64%,transparent 92%)}
@media (max-width:760px){
  .wave-bg canvas{display:none}
  .wave-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 42% at 50% 55%,rgba(27,94,247,.22),transparent 70%)}
}

/* ---------- 4) Malla animada (mesh) para bandas CTA y modal ----------- */
.mesh-cta{position:relative;overflow:hidden;isolation:isolate}
.mesh-cta::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 28%, #2f6bff 0%, transparent 55%),
    radial-gradient(42% 46% at 82% 22%, #1746c9 0%, transparent 58%),
    radial-gradient(46% 50% at 72% 82%, #0b3ad6 0%, transparent 60%),
    radial-gradient(40% 44% at 18% 78%, #3f78ff 0%, transparent 58%);
  filter:blur(24px) saturate(115%);
  animation:mesh-move 18s ease-in-out infinite alternate}
@keyframes mesh-move{
  0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.12) rotate(4deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.06) rotate(-3deg)}
}
@media (prefers-reduced-motion: reduce){ .mesh-cta::before{animation:none} }

/* ---------- 5) Titular que aparece letra a letra (spring) ------------- */
/* Se apoya en el reveal palabra-a-palabra de main.js; aquí solo el gradiente */
.grad-title{background:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.78) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.section-dark .grad-title,.page-hero--dark .grad-title,[class*="--dark"] .grad-title{
  background:linear-gradient(100deg,#fff 0%,#9BC2FF 120%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 7) TypewriterLoop: texto que muta en bucle (azul Allora) --- */
.typeloop{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.28em;
  font-weight:900;letter-spacing:-.02em;line-height:1.08}
.typeloop__slot{position:relative;display:inline-flex;align-items:center;
  overflow:hidden;vertical-align:bottom}
.typeloop__word{display:inline-block;white-space:nowrap;padding-right:.06em;will-change:opacity,transform;
  background:linear-gradient(100deg,#1B5EF7 0%,#6EA8FF 55%,#2D6BFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero--dark .typeloop__word,.section-dark .typeloop__word,[class*="--dark"] .typeloop__word{
  background:linear-gradient(100deg,#6EA8FF 0%,#BBD4FF 60%,#6EA8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.typeloop__cursor{flex:none;width:.06em;min-width:3px;height:1em;margin-left:.06em;border-radius:2px;
  background:#1B5EF7;animation:tlBlink .9s steps(1) infinite}
.page-hero--dark .typeloop__cursor,.section-dark .typeloop__cursor{background:#6EA8FF}
@keyframes tlBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.typeloop__cursor{animation:none;opacity:.6}}

/* ---------- 9) Red de partículas azul (AetherFlow adaptado) ------------ */
/* Host absoluto dentro de una sección position:relative; el JS crea el canvas. */
.part-net{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.part-net canvas{width:100%;height:100%;display:block;opacity:.5}
@media (max-width:760px){.part-net{display:none}}

/* ---------- 11) TextEffect / word-appear: palabras que aparecen con blur ---
   (TextEffect + DigitalSerenity que mandó Pedro, unificados). data-textfx en
   el elemento; el JS trocea en palabras y el IO dispara la cascada. */
[data-textfx] .tfx-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(16px) scale(.96);
  transition:opacity .65s ease var(--d,0s),filter .65s ease var(--d,0s),transform .65s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
[data-textfx].tfx-on .tfx-w{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){[data-textfx] .tfx-w{opacity:1;filter:none;transform:none;transition:none}}

/* ---------- 10) Superficie de puntos ondulante (DottedSurface) --------- */
.dot-surface{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 100%)}
.dot-surface canvas{width:100%;height:100%;display:block;opacity:.6}
@media (max-width:760px){.dot-surface{display:none}}

/* ---------- 8) Pill-nav: icono que se expande a etiqueta al hover (azul Allora) --------
   Adaptado del GradientMenu que mandó Pedro, recoloreado a azul (nada de arcoíris).
   CSS puro. Uso: <div class="pill-nav"><a href><span class="pn-ico">SVG</span><span class="pn-lbl">Texto</span></a>…</div> */
.pill-nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}
.pill-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;
  background:#fff;border-radius:999px;box-shadow:0 8px 22px -12px rgba(15,23,42,.4);text-decoration:none;
  transition:width .5s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
.pill-nav a:hover,.pill-nav a:focus-visible{width:158px;box-shadow:0 16px 34px -12px rgba(27,94,247,.6)}
.pill-nav a::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(45deg,var(--blue,#1B5EF7),var(--blue-light,#6EA8FF));opacity:0;transition:opacity .5s}
.pill-nav a:hover::before,.pill-nav a:focus-visible::before{opacity:1}
.pill-nav a::after{content:"";position:absolute;left:0;right:0;top:10px;height:100%;border-radius:999px;background:linear-gradient(45deg,var(--blue,#1B5EF7),var(--blue-light,#6EA8FF));filter:blur(15px);opacity:0;z-index:-1;transition:opacity .5s}
.pill-nav a:hover::after,.pill-nav a:focus-visible::after{opacity:.5}
.pill-nav .pn-ico{position:relative;z-index:1;display:flex;color:var(--blue,#1B5EF7);transition:transform .45s,color .3s}
.pill-nav .pn-ico svg{width:22px;height:22px;display:block;fill:currentColor}
.pill-nav a:hover .pn-ico,.pill-nav a:focus-visible .pn-ico{transform:scale(0);color:#fff}
.pill-nav .pn-lbl{position:absolute;z-index:1;color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em;white-space:nowrap;transform:scale(0);transition:transform .45s .12s}
.pill-nav a:hover .pn-lbl,.pill-nav a:focus-visible .pn-lbl{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.pill-nav a,.pill-nav a::before,.pill-nav a::after,.pill-nav .pn-ico,.pill-nav .pn-lbl{transition:none}}

/* ---------- 12) CategoryList: filas que se expanden al hover (azul) ------ */
.cat-list{display:grid;gap:12px;max-width:940px;margin:0 auto}
.cat-row{position:relative;background:var(--white,#fff);border:1px solid var(--gray-200,#E2E8F0);border-radius:14px;
  padding:20px 28px;transition:border-color .3s,box-shadow .3s,background .3s;cursor:default}
.cat-row h3{margin:0;font-size:clamp(18px,2vw,23px);transition:color .3s}
.cat-row .cat-sub{margin:3px 0 0;font-size:13.5px;color:var(--gray-500,#64748B);font-weight:600}
.cat-row .cat-body{max-height:0;opacity:0;overflow:hidden;margin:0;font-size:15px;line-height:1.6;color:var(--gray-600,#475569);
  transition:max-height .45s cubic-bezier(.23,1,.32,1),opacity .35s,margin .3s}
.cat-row:hover{border-color:var(--blue,#1B5EF7);background:#F5F9FF;box-shadow:0 16px 38px -18px rgba(27,94,247,.35)}
.cat-row:hover h3{color:var(--blue,#1B5EF7)}
.cat-row:hover .cat-body{max-height:220px;opacity:1;margin-top:10px}
.cat-row::before,.cat-row::after{content:"";position:absolute;width:16px;height:16px;opacity:0;transition:opacity .3s}
.cat-row::before{top:10px;left:10px;border-top:2px solid var(--blue,#1B5EF7);border-left:2px solid var(--blue,#1B5EF7)}
.cat-row::after{bottom:10px;right:10px;border-bottom:2px solid var(--blue,#1B5EF7);border-right:2px solid var(--blue,#1B5EF7)}
.cat-row:hover::before,.cat-row:hover::after{opacity:1}
@media (hover:none){.cat-row .cat-body{max-height:none;opacity:1;margin-top:10px}}