/* ═══════════════════════════════════════════════════════
   FX.CSS — Capa global de efectos e interactividad
   Inspirado en Stripe · Linear · Vercel · Apple
   Se carga en TODAS las páginas. Auto-realza componentes
   ya existentes (.icard, .work-card, .plan, .cta-band…).
   Todo respeta prefers-reduced-motion.
   WebClic Studio
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1) BARRA DE PROGRESO DE SCROLL (top)
   ───────────────────────────────────────────── */
.fx-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    z-index:1000;
    background:linear-gradient(90deg,var(--acc,#E0121B),color-mix(in srgb,var(--acc,#E0121B) 55%,#fff));
    box-shadow:0 0 12px color-mix(in srgb,var(--acc,#E0121B) 60%,transparent);
    transition:width .08s linear;
    pointer-events:none;
}

/* ─────────────────────────────────────────────
   2) BOTÓN "VOLVER ARRIBA"
   ───────────────────────────────────────────── */
.fx-top{
    position:fixed; bottom:24px; left:24px;
    width:46px; height:46px; border-radius:14px;
    background:var(--acc,#E0121B); color:#fff;
    display:flex; align-items:center; justify-content:center;
    border:none; cursor:pointer; z-index:780;
    box-shadow:0 10px 28px -8px color-mix(in srgb,var(--acc,#E0121B) 70%,transparent);
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.85);
    transition:opacity .3s, transform .3s, visibility .3s, background .2s;
}
.fx-top.show{ opacity:1; visibility:visible; transform:none; }
.fx-top:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.fx-top svg{ width:20px; height:20px; }
@media (max-width:600px){ .fx-top{ bottom:18px; left:18px; width:42px; height:42px; } }

/* ─────────────────────────────────────────────
   3) REVEALS ENRIQUECIDOS (variantes por data-fx)
   Compatibles con el .reveal existente.
   ───────────────────────────────────────────── */
[data-fx]{ opacity:0; will-change:transform,opacity; transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-fx="up"]    { transform:translateY(34px); }
[data-fx="down"]  { transform:translateY(-34px); }
[data-fx="left"]  { transform:translateX(-40px); }
[data-fx="right"] { transform:translateX(40px); }
[data-fx="zoom"]  { transform:scale(.9); }
[data-fx="blur"]  { filter:blur(14px); }
[data-fx="rotate"]{ transform:rotate(-4deg) scale(.95); }
[data-fx].fx-in{ opacity:1; transform:none; filter:none; }

/* ─────────────────────────────────────────────
   4) TILT 3D (se aplica por JS a tarjetas)
   ───────────────────────────────────────────── */
.fx-tilt{ transform-style:preserve-3d; transition:transform .25s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.fx-tilt > *{ transform:translateZ(0); }

/* ─────────────────────────────────────────────
   5) SPOTLIGHT (glow que sigue el mouse)
   Aplica a .cta-band y .fx-spot
   ───────────────────────────────────────────── */
.fx-spot{ position:relative; overflow:hidden; }
.fx-spot::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%);
    opacity:0; transition:opacity .3s;
}
.fx-spot:hover::before{ opacity:1; }
.fx-spot > *{ position:relative; z-index:1; }

/* ─────────────────────────────────────────────
   6) FONDO AURORA / MESH ANIMADO
   .aurora envuelve un hero; pinta blobs animados.
   ───────────────────────────────────────────── */
.aurora{ position:relative; overflow:hidden; isolation:isolate; }
.aurora__layer{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(60px); opacity:.7; }
.aurora__layer span{
    position:absolute; width:46%; height:46%; border-radius:50%;
    mix-blend-mode:screen; animation:auroraFloat 16s ease-in-out infinite;
}
.aurora__layer span:nth-child(1){ top:2%;  left:8%;  background:var(--a1,#E0121B); }
.aurora__layer span:nth-child(2){ top:30%; left:60%; background:var(--a2,#1D4ED8); animation-delay:-4s; animation-duration:20s; }
.aurora__layer span:nth-child(3){ top:55%; left:20%; background:var(--a3,#9333EA); animation-delay:-8s; animation-duration:24s; }
.aurora > *:not(.aurora__layer){ position:relative; z-index:1; }
@keyframes auroraFloat{
    0%,100%{ transform:translate(0,0) scale(1); }
    33%    { transform:translate(18%,12%) scale(1.15); }
    66%    { transform:translate(-12%,8%) scale(.9); }
}

/* malla de puntos / grid sutil reutilizable como capa */
.fx-grid-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000,transparent 75%);
            mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000,transparent 75%); }
.fx-dot-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
    background-image:radial-gradient(currentColor 1.3px,transparent 1.3px); background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 10%,#000,transparent 70%);
            mask-image:radial-gradient(ellipse 60% 50% at 50% 10%,#000,transparent 70%); }

/* ─────────────────────────────────────────────
   7) SECCIÓN CON IMAGEN DE FONDO + overlay
   <section class="bg-section" style="--bg:url(img/..)">
   ───────────────────────────────────────────── */
.bg-section{ position:relative; overflow:hidden; }
.bg-section::before{
    content:''; position:absolute; inset:0; z-index:0;
    background-image:var(--bg); background-size:cover; background-position:center;
    transform:scale(1.05);
}
.bg-section::after{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--bg-ov, linear-gradient(180deg,rgba(11,11,15,.82),rgba(11,11,15,.92)));
}
.bg-section > *{ position:relative; z-index:1; }
.bg-section--fixed::before{ background-attachment:fixed; }

/* ─────────────────────────────────────────────
   8) TEXTO CON GRADIENTE (animado opcional)
   ───────────────────────────────────────────── */
.grad-text{
    background:linear-gradient(90deg,var(--acc,#E0121B),color-mix(in srgb,var(--acc,#E0121B) 40%,#7C3AED));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-text--flow{ background-size:220% 100%; animation:gradFlow 6s ease infinite; }
@keyframes gradFlow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* ─────────────────────────────────────────────
   9) SUBRAYADO ANIMADO EN ENLACES DE TEXTO
   ───────────────────────────────────────────── */
.fx-underline{ position:relative; }
.fx-underline::after{
    content:''; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
    background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .3s;
}
.fx-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ─────────────────────────────────────────────
   10) BORDE CON GRADIENTE ANIMADO (tarjetas premium)
   ───────────────────────────────────────────── */
.fx-border{ position:relative; }
.fx-border::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
    background:linear-gradient(130deg,var(--acc,#E0121B),transparent 40%,transparent 60%,var(--acc,#E0121B));
    background-size:300% 300%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .3s; animation:borderFlow 5s linear infinite;
}
.fx-border:hover::before{ opacity:1; }
@keyframes borderFlow{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }

/* ─────────────────────────────────────────────
   11) MARQUEE GENÉRICO (logos / tecnologías)
   ───────────────────────────────────────────── */
.fx-marquee{ overflow:hidden; position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.fx-marquee__track{ display:flex; gap:0; width:max-content; animation:fxScroll 32s linear infinite; }
.fx-marquee:hover .fx-marquee__track{ animation-play-state:paused; }
.fx-marquee__item{ display:inline-flex; align-items:center; gap:10px; padding:0 34px; white-space:nowrap;
    font-size:15px; font-weight:700; color:var(--muted,#64748B); }
.fx-marquee__item i{ color:var(--acc,#E0121B); font-size:18px; }
@keyframes fxScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Grano/textura premium sobre los CTA (banda con gradiente) */
.cta-band::after{
    content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
    background-image:url('../img/bg/noise.svg'); background-size:200px;
    opacity:.05; mix-blend-mode:overlay; pointer-events:none;
}

/* ─────────────────────────────────────────────
   12) SHIMMER / BRILLO al pasar (badges, botones)
   ───────────────────────────────────────────── */
.fx-shine{ position:relative; overflow:hidden; }
.fx-shine::after{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-18deg); transition:none;
}
.fx-shine:hover::after{ animation:shine .9s ease; }
@keyframes shine{ to{ left:130%; } }

/* ─────────────────────────────────────────────
   13) FLOTACIÓN SUAVE (badges, mockups)
   ───────────────────────────────────────────── */
.fx-float{ animation:fxFloat 6s ease-in-out infinite; }
@keyframes fxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ─────────────────────────────────────────────
   14) PARALLAX (data-parallax="0.2")
   ───────────────────────────────────────────── */
[data-parallax]{ will-change:transform; }

/* ─────────────────────────────────────────────
   15) CURSOR-DOT (punto que sigue el mouse, desktop)
   ───────────────────────────────────────────── */
.fx-cursor{ position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
    background:var(--acc,#E0121B); pointer-events:none; z-index:1200; transform:translate(-50%,-50%);
    transition:width .2s, height .2s, background .2s; mix-blend-mode:multiply; }
.fx-cursor.big{ width:46px; height:46px; background:color-mix(in srgb,var(--acc,#E0121B) 22%,transparent); }
@media (hover:none){ .fx-cursor{ display:none; } }

/* ─────────────────────────────────────────────
   ACCESIBILIDAD — desactivar movimiento
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .fx-progress{ display:none; }
    [data-fx]{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
    .aurora__layer span,.grad-text--flow,.fx-border::before,.fx-marquee__track,.fx-float{ animation:none !important; }
    .fx-tilt{ transform:none !important; }
    .fx-cursor{ display:none; }
}