/* ==========================================================================
   Klix Link v5 (5 nov 2026) — ruleta de diseños, efectos «tech», formulario y páginas legales
   ========================================================================== */

/* ---------- Barra de avance ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 120; background: transparent; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), #b36bff 55%, var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 70%, transparent); }

/* ---------- Hero con magia ---------- */
.hero { isolation: isolate; overflow-x: clip; }
.hero__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__fx .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.hero__fx .o1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -12vw; top: -10vw; background: radial-gradient(circle at 40% 40%, #8f78ff, transparent 68%); animation: orb1 16s ease-in-out infinite alternate; }
.hero__fx .o2 { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -10vw; top: 4vw; background: radial-gradient(circle at 50% 50%, #c6ff3d, transparent 66%); opacity: .42; animation: orb2 19s ease-in-out infinite alternate; }
.hero__fx .o3 { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: 34vw; bottom: -14vw; background: radial-gradient(circle, #ff9ad5, transparent 66%); opacity: .28; animation: orb1 22s ease-in-out infinite alternate-reverse; }
.hero__fx .grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(12,10,31,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(12,10,31,.07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 78%); animation: gridMove 24s linear infinite; }
@keyframes orb1 { to { transform: translate3d(7vw, 4vw, 0) scale(1.12); } }
@keyframes orb2 { to { transform: translate3d(-6vw, 5vw, 0) scale(.9); } }
@keyframes gridMove { to { background-position: 56px 56px; } }

.kicker--chip { padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(106,77,255,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 1.2rem; }
.hero__title em { font-style: normal; background: linear-gradient(100deg, #5a3cff 0%, #b36bff 40%, #5a3cff 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.typed { display: inline-flex; align-items: center; margin: -0.4rem 0 1.6rem; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #f4f2ff; font-family: var(--font-mono); font-size: clamp(.82rem, .76rem + .3vw, 1rem); max-width: 100%; box-shadow: 0 18px 40px -22px rgba(12,10,31,.8), inset 0 0 0 1px rgba(255,255,255,.08); }
.typed__pre { color: #9d98c4; }
.typed__t { color: var(--accent); min-width: 1ch; overflow-wrap: anywhere; }
.typed__c { width: 2px; height: 1.15em; margin-left: 3px; background: var(--accent); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Resplandor que sigue al cursor */
.glow { position: relative; }
.glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%); }
.glow:hover::before { opacity: 1; }
.glow > * { position: relative; z-index: 1; }
.plan.glow::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(198,255,61,.16), transparent 60%); }
.inc__card { transition: transform .45s var(--ease-out), box-shadow .45s; }
.inc__card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--line), 0 30px 50px -30px rgba(106,77,255,.55); }
.inc__note { background: linear-gradient(120deg, var(--ink), #1d1648 60%, var(--ink)); box-shadow: inset 0 0 0 1px rgba(198,255,61,.18); }

/* ---------- Ruleta de diseños ---------- */
.gal { overflow: hidden; padding-bottom: clamp(56px, 8vw, 110px); background:
  radial-gradient(60% 40% at 50% 62%, rgba(106,77,255,.28), transparent 70%), var(--night); }
.wheel { --w: clamp(150px, 18.5vw, 250px); position: relative; margin-top: clamp(0px, 1vw, 12px); }
.wheel__stage { position: relative; height: calc(var(--w) * 2.2 + 250px); perspective: 2300px; perspective-origin: 50% 36%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -6px; }
.wheel__stage.is-drag { cursor: grabbing; }
.wheel__stage:focus-visible { outline: 2px solid var(--accent); border-radius: 18px; }
.wheel__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; will-change: transform; }
/* plato giratorio */
.wheel__stage::after { content: ""; position: absolute; left: 50%; top: calc(var(--w) * 2.133 + 34px); width: min(1060px, 96vw); height: 150px; transform: translateX(-50%) perspective(900px) rotateX(72deg); border-radius: 50%; background: radial-gradient(closest-side, rgba(106,77,255,.38), rgba(106,77,255,.08) 60%, transparent 72%); box-shadow: inset 0 0 0 1px rgba(198,255,61,.18); pointer-events: none; z-index: 0; }
.wheel .arq { position: absolute; left: 50%; top: 0; width: var(--w); margin-left: calc(var(--w) / -2); min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: filter .4s; }
.wheel .arq__btn { display: block; width: 100%; height: auto; padding: 0; background: none; border-radius: 0; overflow: visible; cursor: pointer; filter: brightness(calc(1.04 - var(--a, 0) * .17)); transition: filter .3s; }
.wheel .arq__btn::after { display: none; }
.wheel .arq__btn:hover .phone, .wheel .arq__btn:focus-visible .phone { transform: translateY(-8px); }
.wheel .arq__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 28px; }
.wheel .phone { box-shadow: inset 0 0 0 1.5px #3a3a44, 0 0 0 1px #000, 0 40px 50px -26px rgba(0,0,0,.75), 0 0 60px -10px rgba(106,77,255,calc(.5 - var(--a, 0) * .2)); }
.wheel .arq__meta { padding: 20px 2px 0; text-align: center; opacity: clamp(.28, 1.25 - var(--a, 0) * .5, 1); transition: opacity .25s; }
.wheel .arq__n { margin: 0 0 4px; }
.wheel .arq__meta h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); margin: 0 0 6px; }
.wheel .arq__para { margin: 0 0 10px; font-size: .86rem; line-height: 1.38; color: #b9b4d6; }
.wheel .arq__fx { justify-content: center; gap: 5px; margin-bottom: 12px; }
.wheel .arq__fx li { font-size: .68rem; padding: 4px 9px; }
.arq__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 800; font-size: .86rem; cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s; }
.arq__more span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: .85rem; line-height: 1; }
.arq__more:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(198,255,61,.7); }
.arq__more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.wheel__ctrl { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 6px; }
.wbtn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.3rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease-out); }
.wbtn:hover { background: var(--accent); color: var(--ink); transform: scale(1.08); }
.wbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wbtn--play { width: 44px; height: 44px; }
.wbtn .i-pause { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.wbtn .i-play { display: none; width: 0; height: 0; border-block: 7px solid transparent; border-left: 12px solid currentColor; margin-left: 3px; }
.wbtn--play[aria-pressed="true"] .i-pause { display: none; }
.wbtn--play[aria-pressed="true"] .i-play { display: block; }

/* sin JavaScript la ruleta es una tira que se desliza */
.wheel:not(.is-on) .wheel__stage { height: auto; perspective: none; overflow-x: auto; padding: 0 var(--gutter) 20px; }
.wheel:not(.is-on) .wheel__stage::after, .wheel:not(.is-on) .wheel__ctrl { display: none; }
.wheel:not(.is-on) .wheel__ring { position: static; display: flex; gap: 22px; }
.wheel:not(.is-on) .arq { position: relative; left: auto; margin: 0; flex: none; }

@media (max-width: 760px) {
  .wheel { --w: 42vw; }
  .wheel__stage { height: calc(var(--w) * 2.2 + 270px); }
  .wheel .arq__para { font-size: .78rem; }
  .wheel .arq__fx li { font-size: .62rem; padding: 3px 7px; }
  .wheel .arq__fx li:nth-child(3) { display: none; }
}

/* ---------- Precio: portamenú en 4 paquetes ---------- */
.plan__fine a, .addon__fine a { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
.addon__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.addon__tiers b { font-size: clamp(1.7rem, 1.4rem + .8vw, 2.1rem); }
.addon__tiers small { font-size: .78rem; }
.addon__tiers .is-best { box-shadow: 0 0 0 2px var(--accent-2); }
.addon__tiers .is-best::after { content: "Mejor precio por pieza"; margin-top: 6px; font-size: .68rem; font-family: var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.addon__fine { font-size: .86rem; color: var(--muted); }
@media (max-width: 600px) { .addon__tiers b { font-size: 1.6rem; } }

/* ---------- Formulario ---------- */
.fld-hint, .fld-help { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--muted); font-weight: 500; }
.fld-help { font-size: .9rem; color: var(--ink-2); }
.fld-help a, .done__fine a, .chk a { text-decoration: underline; text-underline-offset: 3px; font-weight: 800; color: var(--accent-2); }
.slug { display: flex; align-items: stretch; border-radius: 14px; border: 1.5px solid #dedce8; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.slug:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 16%, transparent); }
.slug i { display: grid; align-items: center; padding: 0 4px 0 14px; background: #f1effa; font-style: normal; font-family: var(--font-mono); font-size: .84rem; color: var(--muted); white-space: nowrap; font-weight: 400; }
.fld .slug input { border: 0; border-radius: 0; box-shadow: none !important; min-width: 0; }
.fld.is-bad .slug { border-color: #d6336c; }
.fld > span.slug { font-weight: 500; }
.chk--inline { margin: 2px 0 0; font-size: .88rem; }
.seg--tiers span { min-height: 44px; }
.ship { margin: 0 0 6px; padding: 16px 16px 2px; border-radius: 18px; background: #f6f5fb; }
.ship[hidden] { display: none; }
.brief__need { margin: 22px 0 0; padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.brief__need p { margin: 0 0 10px; }
.brief__need ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: .95rem; color: var(--ink-2); line-height: 1.4; }
.brief__need .brief__clock { margin: 0; font-size: .9rem; font-weight: 700; color: var(--ink); padding-top: 12px; border-top: 1px dashed var(--line); }
.done__send { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px; border-radius: 18px; background: #f6f5fb; justify-items: stretch; }
.done__send .btn--sm { justify-self: start; }
.done__note { margin: 0; font-size: .86rem; color: #1a7a3a; font-weight: 700; }
.done__fine { margin: 16px 0 0; font-size: .88rem; color: var(--muted); text-align: center; }
.done__steps strong { color: var(--ink); }
.brief__intro .sec-lead { margin-bottom: 0; }

/* ---------- Páginas legales ---------- */
.legal { padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0 clamp(64px, 9vw, 120px); }
.legal__wrap { max-width: 820px; }
.legal h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); line-height: .98; letter-spacing: -.045em; margin: 0 0 14px; text-wrap: balance; }
.legal__lead { font-size: 1.12rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 8px; }
.legal__date { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin: 0 0 34px; }
.legal h2 { font-weight: 900; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.03em; line-height: 1.1; margin: 38px 0 10px; }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.legal ul, .legal ol { padding-left: 22px; display: grid; gap: 6px; margin: 8px 0 14px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; color: var(--accent-2); }
.legal__box { margin: 26px 0 0; padding: 18px 22px; border-radius: 18px; background: var(--ink); color: #f4f2ff; }
.legal__box p { color: #e7e4f7; margin: 0; }
.legal__box b { color: var(--accent); }
.legal__back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 18px; font-weight: 700; text-decoration: none !important; color: var(--ink) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero__fx .orb, .hero__fx .grid, .hero__title em, .typed__c { animation: none !important; }
}

/* ---------- Ajustes de la sección «Recibes todo» ---------- */
.kit__vis--pdf { display: grid; place-items: center; padding: 12px 0; overflow: hidden; }
.kit__vis--pdf { grid-template-rows: minmax(0, 1fr); }
.kit__vis--pdf img { height: 100%; max-height: 100%; width: auto; max-width: 70%; min-height: 0; object-fit: contain; border-radius: 6px; }
.kit .lnk { display: flex; width: fit-content; margin-top: 2px; }

/* Botón fijo: oculto de verdad (no solo fuera de pantalla) mientras no aplica */
.mcta:not(.show) { visibility: hidden; pointer-events: none; }


/* ==========================================================================
   Klix Link v6 (5 nov 2026)
   1) letras cortadas (g, q, p, y) · 2) ruleta fija que gira con el scroll
   3) movimiento rápido y vistoso en todo lo que no es el hero
   ========================================================================== */

/* ---------- 1 · Letras con cola que se cortaban (g, q, p, y) ---------- */
.ae-js [data-split] .ae-w,
.ae-js [data-split="chars"] .ae-w,
.ae-js [data-split="words"][data-split-anim="rise"] .ae-w { overflow: clip; overflow-clip-margin: 0.14em; padding-bottom: 0.24em; margin-bottom: -0.24em; padding-right: 0.04em; margin-right: -0.04em; }
.ae-l { overflow-clip-margin: 0.3em; padding-bottom: 0.2em; }
.ae-js [data-split]:not(.is-in) .ae-li,
.ae-js [data-split][data-split-anim="rise"]:not(.is-in) .ae-wi,
.ae-js [data-split="chars"]:not(.is-in) .ae-c { transform: translate3d(0, 170%, 0); }
.sec-head h2, .how h2, .brief h2, .faq h2, .final h2, .legal h1 { padding-bottom: .04em; }

/* ---------- 2 · Ruleta fija que gira con el scroll ---------- */
.gal { padding: 0; overflow: visible; }
.gal__pin { --head: 72px; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.2vh, 16px); padding: calc(var(--head) + clamp(8px, 1.6vh, 22px)) 0 clamp(10px, 1.6vh, 20px); }
.gal.is-pinned .gal__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.gal__head { display: grid; gap: 6px; }
.gal__head .kicker { margin: 0; }
.gal__head h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem); margin: 0; max-width: none; }
.gal__head .sec-lead { margin: 0; max-width: 62ch; font-size: clamp(.9rem, .85rem + .25vw, 1.05rem); line-height: 1.45; }
.gal .wheel { --sh: clamp(250px, calc(100svh - 450px), 560px); --w: clamp(118px, calc(var(--sh) / 2.12), 250px); margin-top: 0; }
.gal .wheel__stage { height: var(--sh); perspective: 2400px; perspective-origin: 50% 40%; }
.gal .wheel__stage::after { top: calc(var(--sh) - 22px); height: 120px; }
.wheel__ctrl { margin-top: 4px; }
.wheel__count { margin: 0; min-width: 76px; text-align: center; font-family: var(--font-mono); font-size: .95rem; color: #c9c4e4; letter-spacing: .04em; }
.wheel__count b { color: var(--accent); font-size: 1.15rem; }
.wheel__info { position: relative; z-index: 2; width: min(920px, calc(100% - 2 * var(--gutter))); margin: 8px auto 0; padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 28px); border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -36px rgba(0,0,0,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; grid-template-areas: "n fx btn" "h fx btn" "para fx btn" "hace fx btn" "anim fx btn"; column-gap: 24px; align-items: start; min-height: 150px; }
.wheel__info > * { margin: 0; }
.wheel__info .pn-n { grid-area: n; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .05em; color: var(--accent); }
.wheel__info .pn-h { grid-area: h; font-weight: 900; font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); letter-spacing: -.04em; line-height: 1.05; color: #fff; }
.wheel__info .pn-para { grid-area: para; margin-top: 4px; font-size: .94rem; line-height: 1.35; color: #e4e0f7; font-weight: 700; }
.wheel__info .pn-hace { grid-area: hace; margin-top: 4px; font-size: .88rem; line-height: 1.42; color: #c9c4e4; }
.wheel__info .pn-anim { grid-area: anim; margin-top: 6px; font-size: .82rem; line-height: 1.4; color: #b9b4d6; }
.wheel__info .pn-anim b { color: var(--accent); font-weight: 700; }
.wheel__info .pn-fx { grid-area: fx; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
.wheel__info .pn-fx li { font-size: .82rem; line-height: 1.2; padding: 7px 12px; border-radius: 999px; background: rgba(198,255,61,.12); color: #f1ffd0; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(198,255,61,.28); }
.wheel__info .arq__more { grid-area: btn; align-self: center; justify-self: end; }
.wheel__info.is-in > * { animation: infoIn .5s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both; }
.wheel__info.is-in .pn-fx li { animation: infoIn .45s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both; }
.wheel__info.is-in .pn-fx li:nth-child(2) { animation-delay: .06s; } .wheel__info.is-in .pn-fx li:nth-child(3) { animation-delay: .12s; } .wheel__info.is-in .pn-fx li:nth-child(4) { animation-delay: .18s; } .wheel__info.is-in .pn-fx li:nth-child(5) { animation-delay: .24s; }
@keyframes infoIn { from { opacity: 0; transform: translateY(10px); } }
.gal .gal__note { margin: 0 auto; padding-inline: var(--gutter); max-width: var(--maxw); width: 100%; font-size: .78rem; color: #8f8ab0; text-align: center; }
.wheel .arq__btn { filter: brightness(calc(1.05 - var(--a, 0) * .2)); }
.gal:not(.is-pinned) { padding: clamp(40px, 6vw, 90px) 0; }
@media (max-height: 900px) { .gal__head .sec-lead { display: none; } .wheel__info .pn-anim { display: none; } }
@media (max-height: 740px) { .wheel__info .pn-hace { display: none; } }
@media (max-width: 860px) {
  .gal .wheel { --sh: clamp(240px, calc(100svh - 470px), 420px); --w: clamp(100px, calc(var(--sh) / 2.12), 170px); }
  .wheel__info { grid-template-columns: 1fr auto; grid-template-areas: "n n" "h btn" "para btn" "fx fx" "hace hace"; row-gap: 3px; min-height: 0; padding: 12px 14px; }
  .wheel__info .pn-hace, .wheel__info .pn-anim { display: none; }
  .wheel__info .pn-fx { margin-top: 8px; gap: 5px; }
  .wheel__info .pn-fx li { font-size: .7rem; padding: 5px 9px; }
  .wheel__info .pn-fx li:nth-child(n+4) { display: none; }
  .wheel__info .pn-para { font-size: .84rem; }
  .gal__head .sec-lead { display: none; }
  .gal__head h2 { font-size: 1.75rem; }
}
@media (max-height: 640px) and (max-width: 860px) { .wheel__info .pn-fx { display: none; } .gal .wheel { --sh: clamp(200px, calc(100svh - 400px), 300px); } }
@media (prefers-reduced-motion: reduce) { .wheel__info.is-in > *, .wheel__info.is-in .pn-fx li { animation: none; } }

/* ---------- 3 · Movimiento: rápido, vistoso y en toda la página (el hero queda como está) ---------- */
:root { --dur: .55s; --stagger: .02s; --reveal-distance: 28px; }
html.fx [data-rv]:not(.in) { opacity: 0; transform: var(--from, translateY(30px)) scale(var(--sc, .97)); }
html.fx [data-rv] { transition: opacity .55s ease, transform .7s cubic-bezier(.2, .9, .25, 1.12); transition-delay: var(--d, 0s); will-change: opacity, transform; }
html.fx [data-rv="left"] { --from: translateX(-48px); }
html.fx [data-rv="right"] { --from: translateX(48px); }
html.fx [data-rv="pop"] { --from: translateY(24px); --sc: .86; }
html.fx [data-rv="up"] { --from: translateY(36px); }
html.fx [data-rv="tick"] { --from: translateX(-18px); --sc: .94; }

/* fondos ambientales con paralaje */
.vs, .inc, .how, .price, .faq, .brief, .final { position: relative; isolation: isolate; }
.fxbg { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.fxbg i { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.fxbg i:nth-child(1) { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; left: -8vw; top: 6%; background: radial-gradient(circle, rgba(143,120,255,.42), transparent 66%); animation: fxDrift 11s ease-in-out infinite alternate; }
.fxbg i:nth-child(2) { width: 28vw; height: 28vw; max-width: 400px; max-height: 400px; right: -6vw; top: 38%; background: radial-gradient(circle, rgba(198,255,61,.34), transparent 66%); animation: fxDrift 13s ease-in-out infinite alternate-reverse; }
.fxbg i:nth-child(3) { width: 22vw; height: 22vw; max-width: 320px; max-height: 320px; left: 40%; bottom: -6%; background: radial-gradient(circle, rgba(255,154,213,.3), transparent 66%); animation: fxDrift 9s ease-in-out infinite alternate; }
.price .fxbg i, .final .fxbg i, .faq .fxbg i { opacity: .7; }
@keyframes fxDrift { to { transform: translate3d(5vw, -4vw, 0) scale(1.18); } }
.fxbg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(106,77,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(106,77,255,.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%); animation: gridMove 18s linear infinite; }

/* resplandor del cursor */
.cursor-glow { position: fixed; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none; z-index: 70; background: radial-gradient(circle, rgba(143,120,255,.2), rgba(198,255,61,.07) 45%, transparent 70%); mix-blend-mode: plus-lighter; opacity: 0; transition: opacity .4s; will-change: transform; }
.cursor-glow.on { opacity: 1; }

/* inclusiones: todo se mueve más rápido */
.fxv .s-chat .out { animation-duration: 4.6s; } .fxv .s-chat .m2 { animation-duration: 4.6s; } .fxv .s-chat .typing { animation-duration: 4.6s; }
.fxv .s-seq > * { animation-duration: 3.2s; } .fxv .s-seq > :nth-child(2) { animation-delay: .8s; } .fxv .s-seq > :nth-child(3) { animation-delay: 1.6s; } .fxv .s-seq > :nth-child(4) { animation-delay: 2.4s; }
.fxv .s-list .s-row { animation: fxRow 3.6s cubic-bezier(.2,.9,.25,1) infinite; }
.fxv .s-list .s-row:nth-child(2) { animation-delay: .25s; } .fxv .s-list .s-row:nth-child(3) { animation-delay: .5s; }
.fxv .s-list .s-row em { animation: fxPrice 3.6s ease-in-out infinite; display: inline-block; }
.fxv .s-list .s-row:nth-child(2) em { animation-delay: .25s; } .fxv .s-list .s-row:nth-child(3) em { animation-delay: .5s; }
@keyframes fxRow { 0% { opacity: 0; transform: translateX(-22px); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes fxPrice { 0%, 14%, 100% { transform: scale(1); color: inherit; } 22% { transform: scale(1.35); color: #6a4dff; } 32% { transform: scale(1); } }
.fxv .s-hours li { animation: fxHour 3.2s ease-in-out infinite; border-radius: .5em; }
.fxv .s-hours li:nth-child(2) { animation-delay: .5s; } .fxv .s-hours li:nth-child(3) { animation-delay: 1s; }
@keyframes fxHour { 0%, 60%, 100% { background: transparent; } 25% { background: rgba(106,77,255,.14); } }
.fxv .s-open i { animation-duration: .9s; }
.fxv .s-pin { animation-duration: 2.2s; }
.fxv .s-map { position: relative; }
.fxv .s-map::after { content: ""; position: absolute; left: 50%; top: 40%; width: 4.4em; height: 4.4em; margin: -2.2em 0 0 -2.2em; border-radius: 50%; border: 2px solid #6a4dff; opacity: 0; animation: fxRipple 2.2s ease-out infinite; animation-delay: 1s; pointer-events: none; }
@keyframes fxRipple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.fxv .s-book__btn { animation: fxBtn 2s ease-in-out infinite; }
@keyframes fxBtn { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(106,77,255,.5); } 50% { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(106,77,255,0); } }
.fxv--gal img { animation-duration: 3.6s; }
.fxv--gal { position: relative; }
.fxv--gal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); animation: fxSweep 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes fxSweep { 55%, 100% { transform: translateX(120%); } }
.fxv .s-share span { animation: fxBounce 2.4s ease-in-out infinite; } .fxv .s-share span:nth-child(2) { animation-duration: 2.4s; animation-delay: .25s; } .fxv .s-share span:nth-child(3) { animation-delay: .5s; }
@keyframes fxBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-.5em) scale(1.06); } }
.fxv .s-save, .fxv [class*="s-save"] { animation: fxDash 1.6s ease-in-out infinite; }
@keyframes fxDash { 50% { background: rgba(106,77,255,.16); } }
.inc__card { overflow: hidden; }
.inc__card::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(106,77,255,.14), transparent); transform: skewX(-18deg); transition: left .8s ease; pointer-events: none; z-index: 0; }
.inc__card:hover::after { left: 130%; }
.inc__card h3 { transition: color .3s, letter-spacing .3s; } .inc__card:hover h3 { color: var(--accent-2); }
.inc__note { background-size: 220% 100%; animation: fxGrad 7s ease-in-out infinite alternate; }
@keyframes fxGrad { to { background-position: 100% 0; } }

/* tilt 3D al pasar el cursor */
.tilt { transition: transform .25s ease, box-shadow .45s; transform-style: flat; }
.tilt.is-tilt { transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* comparación: la columna de Klix Link se enciende */
.vs__row .is-us { transition: background .4s, transform .4s; }
.vs__row.seen .is-us { animation: usFlash 1.4s ease-out both; animation-delay: var(--fd, 0s); }
@keyframes usFlash { 0% { box-shadow: inset 0 0 0 0 rgba(198,255,61,0); } 30% { box-shadow: inset 0 0 0 3px rgba(198,255,61,.95); } 100% { box-shadow: inset 0 0 0 0 rgba(198,255,61,0); } }
.vs__row:hover .is-us { transform: translateX(6px); }

/* pasos: barra que se llena y número que late */
.steps li { position: relative; transition: transform .35s var(--ease-out, ease); }
.steps li:hover { transform: translateY(-6px); }
.steps li::before { content: ""; position: absolute; left: 0; top: -3px; height: 4px; width: calc(100% - 26px); border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--fd, 0s); }
.steps li.seen::before { transform: scaleX(1); }
.steps li.seen .steps__n { animation: fxN .9s var(--fd, 0s) both; }
@keyframes fxN { 0% { transform: translateX(-14px); opacity: 0; } 60% { transform: translateX(4px); opacity: 1; } 100% { transform: none; } }

/* kit: link, QR y PDF cobran vida */
.kit__item { transition: transform .4s var(--ease-out, ease), box-shadow .4s; }
.kit__item:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(106,77,255,.5); }
.kit__vis--link .url { animation: fxGlowText 2.4s ease-in-out infinite; }
@keyframes fxGlowText { 50% { text-shadow: 0 0 14px rgba(198,255,61,.9); } }
.kit__vis--qr { position: relative; }
.kit__vis--qr::after { content: ""; position: absolute; left: 14%; right: 14%; top: 18%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #0c0a1f, transparent); box-shadow: 0 0 14px rgba(12,10,31,.6); animation: fxScan 2s ease-in-out infinite alternate; }
@keyframes fxScan { to { transform: translateY(125px); } }
.kit__vis--pdf { position: relative; }
.kit__vis--pdf img { animation: fxFloat 3.4s ease-in-out infinite; }
.kit__vis--pdf .pdf-tag { animation: fxWiggle 2.4s ease-in-out infinite; }
@keyframes fxFloat { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes fxWiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-8deg); } 86% { transform: rotate(7deg); } 94% { transform: rotate(-4deg); } }

/* precio: borde que gira, lista que se marca y botón con brillo */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan { position: relative; }
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang), transparent 0 62%, var(--accent) 82%, #b36bff 92%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude; animation: fxAng 4.5s linear infinite; pointer-events: none; z-index: 2; }
@keyframes fxAng { to { --ang: 360deg; } }
.plan__amount { font-variant-numeric: tabular-nums; }
.plan__list li.seen::before { animation: fxTick .6s var(--fd, 0s) both; }
@keyframes fxTick { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.btn--lg, .btn--lime { position: relative; overflow: hidden; isolation: isolate; }
.btn--lg::after, .btn--lime::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); animation: fxBtnSweep 3.4s ease-in-out infinite; pointer-events: none; z-index: 1; }
@keyframes fxBtnSweep { 0%, 55% { left: -80%; } 100% { left: 160%; } }
.addon__tiers > div { transition: transform .35s var(--ease-out, ease), box-shadow .35s, background .35s; }
.addon__tiers > div:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 34px -18px rgba(198,255,61,.55); }
.addon__tiers .is-best { animation: fxBest 2.2s ease-in-out infinite; }
@keyframes fxBest { 50% { box-shadow: 0 0 0 2px var(--accent-2), 0 0 28px rgba(106,77,255,.7); } }
.addon__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
.addon__facts li { padding: 7px 13px; border-radius: 999px; font-size: .84rem; font-weight: 800; background: var(--ink); color: var(--accent); }
.stand { animation: fxStand 6s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes fxStand { 0%, 100% { transform: perspective(900px) rotateY(-14deg) translateY(0); } 50% { transform: perspective(900px) rotateY(14deg) translateY(-8px); } }
.stand__face { position: relative; overflow: hidden; }
.stand__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); transform: translateX(-130%); animation: fxSweep 4s ease-in-out infinite; pointer-events: none; }

/* dudas y formulario */
.faq__list details { transition: transform .3s var(--ease-out, ease), box-shadow .3s; }
.faq__list details:hover { transform: translateX(6px); }
.form__progress span { background-image: linear-gradient(90deg, var(--accent-2), #b36bff, var(--accent-2)); background-size: 200% 100%; animation: fxGrad 2s linear infinite; }
.opt:hover, .seg label:hover span { transform: translateY(-2px); }
.final__fan .phone { animation: fxLift 5s ease-in-out infinite; }
.final__fan .phone:nth-child(2) { animation-delay: -1.6s; } .final__fan .phone:nth-child(3) { animation-delay: -3.2s; }
@keyframes fxLift { 50% { translate: 0 -16px; } }
.niches span { transition: color .25s, transform .25s; } .niches span:hover { color: var(--accent-2); transform: scale(1.1); }

@media (hover: none) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fxbg i, .fxbg::after, .inc__note, .plan::after, .btn--lg::after, .btn--lime::after, .stand, .stand__face::after, .final__fan .phone, .kit__vis--qr::after, .kit__vis--pdf img, .kit__vis--pdf .pdf-tag, .kit__vis--link .url, .form__progress span, .addon__tiers .is-best { animation: none !important; }
  html.fx [data-rv]:not(.in) { opacity: 1; transform: none; }
}
.gal__head h2 { font-family: var(--font-display); font-weight: 900; line-height: 1; letter-spacing: -0.048em; text-wrap: balance; }

@media (max-width: 900px) {
  html.fx [data-rv="left"], html.fx [data-rv="right"], html.fx [data-rv="tick"] { --from: translateY(26px); }
  .faq__list details:hover { transform: none; }
  .gal__note { display: none; }
}

.brief .fxbg i, .how .fxbg i, .vs .fxbg i, .inc .fxbg i { opacity: .55; }