/* ════════════════════════════════════════════════════════════
   Dinetik Plantillas — FX (estilos)
   Biblioteca propia de efectos en CSS + JS puro, sin dependencias.
   Inspirada en la idea de componentes como los de React Bits
   (reactbits.dev); código escrito desde cero por Dinetik.
   Se activa con atributos data-fx="…" (ver fx.js).
════════════════════════════════════════════════════════════ */

:root{
  --fx-ease: cubic-bezier(.16,1,.3,1);
  --fx-ease-in: cubic-bezier(.4,0,.2,1);
  --fx-accent: #00A870;
  --fx-radius: 16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}   /* los reveal laterales no generan scroll horizontal */
img,svg,video,canvas{max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--fx-focus, rgba(0,135,90,.55));outline-offset:3px;border-radius:6px}
.fx-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Reveal al hacer scroll ─────────────────────────────────── */
[data-fx~="reveal"],[data-fx-item]{opacity:0;transition:opacity .8s var(--fx-ease),transform .9s var(--fx-ease),filter .8s var(--fx-ease);transition-delay:var(--fx-d,0ms);will-change:opacity,transform}
[data-fx~="reveal"]:not([data-fx-from]),[data-fx-from="up"],[data-fx-item]:not([data-fx-from]){transform:translate3d(0,34px,0)}
[data-fx-from="down"]{transform:translate3d(0,-34px,0)}
[data-fx-from="left"]{transform:translate3d(-48px,0,0)}
[data-fx-from="right"]{transform:translate3d(48px,0,0)}
[data-fx-from="scale"]{transform:scale(.92)}
[data-fx-from="blur"]{transform:translate3d(0,16px,0);filter:blur(14px)}
[data-fx~="reveal"].fx-in,[data-fx-item].fx-in{opacity:1;transform:none;filter:none}

/* ── Texto dividido (SplitText / BlurText) ──────────────────── */
.fx-w{display:inline-block;white-space:pre}
.fx-c{display:inline-block;opacity:0;transform:translate3d(0,.55em,0) rotate(3deg);transition:opacity .7s var(--fx-ease),transform .8s var(--fx-ease),filter .7s var(--fx-ease);transition-delay:calc(var(--i) * var(--fx-step,28ms) + var(--fx-d,0ms))}
.fx-split[data-blur] .fx-c{filter:blur(10px)}
.fx-split.fx-in .fx-c{opacity:1;transform:none;filter:none}

/* ── Texto con gradiente animado / brillo ───────────────────── */
[data-fx~="gradient-text"]{background:linear-gradient(110deg,var(--g1,#00A870),var(--g2,#3AA0FF),var(--g3,#9B6BFF),var(--g1,#00A870));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fx-grad 7s linear infinite}
@keyframes fx-grad{to{background-position:-300% 0}}
[data-fx~="shiny-text"]{color:var(--shiny-base,#8a94a6);background:linear-gradient(110deg,transparent 35%,var(--shiny-hl,#fff) 50%,transparent 65%) 150% 0/220% 100% no-repeat,var(--shiny-base,#8a94a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fx-shiny 3.2s linear infinite}
@keyframes fx-shiny{to{background-position:-50% 0}}

/* ── Typing (TextType) ──────────────────────────────────────── */
.fx-caret{display:inline-block;width:.08em;height:1em;margin-left:.06em;background:currentColor;vertical-align:-.12em;animation:fx-blink 1s steps(1) infinite}
@keyframes fx-blink{50%{opacity:0}}

/* ── Tarjeta con foco de luz (SpotlightCard) ────────────────── */
[data-fx~="spotlight"]{position:relative;isolation:isolate;overflow:hidden}
[data-fx~="spotlight"]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .4s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(255,255,255,.14)),transparent 60%)}
[data-fx~="spotlight"]:hover::before{opacity:1}
[data-fx~="spotlight"]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;opacity:0;transition:opacity .4s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot-line,rgba(255,255,255,.55)),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-fx~="spotlight"]:hover::after{opacity:1}

/* ── Inclinación 3D (TiltedCard) ────────────────────────────── */
[data-fx~="tilt"]{transform-style:preserve-3d;transition:transform .5s var(--fx-ease);will-change:transform;position:relative}
[data-fx~="tilt"].fx-tilting{transition:transform .08s linear}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%);mix-blend-mode:soft-light}
[data-fx~="tilt"]:hover .fx-glare{opacity:1}

/* ── Imán (Magnet) ──────────────────────────────────────────── */
[data-fx~="magnet"]{display:inline-flex;transition:transform .35s var(--fx-ease);will-change:transform}
[data-fx~="magnet"].fx-pulling{transition:transform .12s linear}

/* ── Marquesina infinita ────────────────────────────────────── */
[data-fx~="marquee"]{overflow:hidden;display:flex;--gap:2.2rem;-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;flex:none;gap:var(--gap);padding-right:var(--gap);min-width:100%;justify-content:space-around;animation:fx-marquee var(--dur,32s) linear infinite}
[data-fx~="marquee"][data-reverse] .fx-marquee__track{animation-direction:reverse}
[data-fx~="marquee"]:hover .fx-marquee__track{animation-play-state:paused}
@keyframes fx-marquee{to{transform:translateX(-100%)}}

/* ── Borde animado (StarBorder) ─────────────────────────────── */
[data-fx~="star-border"]{position:relative;display:inline-flex;padding:2px;border-radius:var(--sb-r,999px);overflow:hidden;isolation:isolate}
[data-fx~="star-border"]::before{content:"";position:absolute;inset:-150%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,var(--sb-c,#00D68F) 85%,transparent 100%);animation:fx-spin var(--sb-s,4s) linear infinite}
[data-fx~="star-border"]>*{border-radius:calc(var(--sb-r,999px) - 2px)}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* ── Dock (macOS) ───────────────────────────────────────────── */
[data-fx~="dock"]{display:inline-flex;align-items:flex-end;gap:10px;padding:10px 14px;border-radius:22px;background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2)}
[data-fx~="dock"]>*{transform-origin:50% 100%;transition:transform .18s var(--fx-ease)}

/* ── Cursor personalizado ───────────────────────────────────── */
.fx-cursor{position:fixed;left:0;top:0;z-index:99999;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--cur,#fff);mix-blend-mode:difference;transition:width .25s var(--fx-ease),height .25s var(--fx-ease),margin .25s var(--fx-ease),background .25s ease;will-change:transform}
.fx-cursor.is-hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.9)}
.fx-cursor-dot{position:fixed;left:0;top:0;z-index:99999;pointer-events:none;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cur,#fff);mix-blend-mode:difference}
@media (hover:none),(pointer:coarse){.fx-cursor,.fx-cursor-dot{display:none}}

/* ── Fondos ─────────────────────────────────────────────────── */
.fx-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;background:var(--c);width:var(--s,40vmax);height:var(--s,40vmax);left:var(--x);top:var(--y);animation:fx-orb var(--t,18s) ease-in-out infinite alternate}
@keyframes fx-orb{from{transform:translate3d(-6%,-4%,0) scale(.9)}to{transform:translate3d(8%,6%,0) scale(1.12)}}
.fx-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.fx-rays{position:absolute;inset:-30%;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 0%,transparent 0 7deg,var(--ray,rgba(255,255,255,.07)) 8deg 9deg);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);animation:fx-rays 22s linear infinite alternate}
@keyframes fx-rays{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* ── Barra de progreso de scroll ────────────────────────────── */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9998;transform-origin:0 50%;transform:scaleX(0);background:var(--fx-prog,linear-gradient(90deg,#00A870,#3AA0FF))}

/* ── Cortina de transición entre vistas ─────────────────────── */
.fx-curtain{position:fixed;inset:0;z-index:9990;pointer-events:none;display:grid;grid-template-columns:repeat(var(--cols,5),1fr)}
.fx-curtain i{background:var(--curtain,#0b0f19);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--fx-ease-in);transition-delay:calc(var(--k) * 55ms)}
.fx-curtain.is-on i{transform:scaleY(1)}
.fx-curtain.is-out i{transform-origin:50% 0}

/* ── Toasts ─────────────────────────────────────────────────── */
.fx-toasts{position:fixed;right:18px;bottom:18px;z-index:9995;display:flex;flex-direction:column;gap:10px;max-width:min(92vw,360px)}
.fx-toast{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:14px;background:var(--toast-bg,#111827);color:var(--toast-fg,#fff);font:500 14px/1.4 system-ui,sans-serif;box-shadow:0 18px 40px rgba(0,0,0,.28);transform:translate3d(0,20px,0) scale(.96);opacity:0;transition:transform .45s var(--fx-ease),opacity .3s ease}
.fx-toast.is-in{transform:none;opacity:1}
.fx-toast b{display:block;font-weight:700}

/* ── Modal genérico accesible ───────────────────────────────── */
.fx-modal{position:fixed;inset:0;z-index:9980;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,12,22,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.fx-modal.is-open{display:flex}
.fx-modal.is-vis{opacity:1}
.fx-modal>.fx-modal__panel{max-height:92vh;overflow:auto;transform:translate3d(0,24px,0) scale(.97);transition:transform .45s var(--fx-ease)}
.fx-modal.is-vis>.fx-modal__panel{transform:none}

/* ── Skeleton ───────────────────────────────────────────────── */
.fx-skel{background:linear-gradient(90deg,rgba(128,128,128,.12) 25%,rgba(128,128,128,.24) 37%,rgba(128,128,128,.12) 63%);background-size:400% 100%;animation:fx-skel 1.4s ease infinite;border-radius:8px}
@keyframes fx-skel{from{background-position:100% 50%}to{background-position:0 50%}}

/* ── Modo embed (vista previa dentro del catálogo) ─────────── */
html.fx-embed [data-fx~="reveal"],html.fx-embed [data-fx-item],html.fx-embed .fx-c{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
html.fx-embed .demo-bar,html.fx-embed .fx-cursor,html.fx-embed .fx-cursor-dot,html.fx-embed .fx-progress{display:none!important}

/* ── Vista previa en vivo dentro del catálogo (conserva animaciones) ── */
html.fx-preview .demo-bar{display:none!important}

/* ── Movimiento reducido ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  [data-fx~="reveal"],[data-fx-item],.fx-c{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  [data-fx~="gradient-text"],[data-fx~="shiny-text"],.fx-marquee__track,[data-fx~="star-border"]::before,.fx-orbs i,.fx-rays,.fx-caret{animation:none!important}
  [data-fx~="tilt"],[data-fx~="magnet"]{transform:none!important}
}