/* ═══ v3 fx: precarga, cursor, renders, curvas, 3D, módulos horizontales ═══ */
/* precarga */
.pre{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--bone);display:grid;place-items:center;gap:22px;grid-auto-flow:row;transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility .7s}
.pre.done{opacity:0;visibility:hidden}
.pre-mark{display:grid;place-items:center;gap:18px}
.pre svg{width:clamp(56px,7vw,86px);height:auto;overflow:visible}
.pre svg [data-draw]{stroke-dasharray:var(--l,120);stroke-dashoffset:var(--l,120);animation:draw 1.15s cubic-bezier(.65,0,.2,1) forwards}
.pre svg [data-draw="2"]{animation-delay:.28s}
.pre svg [data-draw="3"]{animation-delay:.52s}
@keyframes draw{to{stroke-dashoffset:0}}
.pre-name{font-family:var(--disp);font-size:14px;letter-spacing:.42em;text-transform:uppercase;color:var(--dim2);opacity:0;animation:fin .7s .8s forwards}
.pre-bar{width:clamp(120px,16vw,190px);height:1px;background:var(--line);overflow:hidden;border-radius:99px}
.pre-bar i{display:block;height:100%;width:0;background:var(--bone);animation:fill 1.5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes fill{to{width:100%}}
@keyframes fin{to{opacity:1}}
/* cursor magnético */
.cur{position:fixed;top:0;left:0;width:32px;height:32px;border:1px solid var(--line2);border-radius:50%;pointer-events:none;z-index:70;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.2,1,.3,1),height .3s cubic-bezier(.2,1,.3,1),background .3s,border-color .3s,opacity .3s;opacity:0}
.cur.vis{opacity:1}
.cur.on{width:70px;height:70px;background:rgba(242,239,234,.09);border-color:rgba(242,239,234,.34)}
.cur i{position:absolute;inset:50% auto auto 50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--bone);transition:opacity .3s}
.cur.on i{opacity:0}
@media (pointer:coarse){.cur{display:none}}
/* renders abstractos oscuros */
.render{position:absolute;inset:0;overflow:hidden;background:radial-gradient(115% 85% at 18% 8%,rgba(47,107,255,.42),transparent 58%),radial-gradient(85% 75% at 88% 82%,rgba(122,86,255,.26),transparent 62%),radial-gradient(60% 50% at 62% 46%,rgba(90,217,160,.1),transparent 70%),linear-gradient(158deg,#181A20,#0B0B0D 72%)}
.render::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(242,239,234,.07),transparent 26%,rgba(47,107,255,.16) 52%,transparent 74%,rgba(242,239,234,.05));filter:blur(34px);animation:spin 30s linear infinite;opacity:.9}
.render::after{content:"";position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(242,239,234,.09),inset 0 -60px 90px -50px rgba(0,0,0,.7)}
@keyframes spin{to{transform:rotate(1turn)}}
.render.b{background:radial-gradient(105% 80% at 78% 12%,rgba(90,217,160,.16),transparent 56%),radial-gradient(95% 85% at 12% 88%,rgba(47,107,255,.24),transparent 62%),linear-gradient(196deg,#15161A,#0B0B0D 72%)}
.render.b::before{animation-duration:44s;animation-direction:reverse}
.render.c{background:radial-gradient(110% 90% at 50% 0%,rgba(245,185,66,.11),transparent 52%),radial-gradient(90% 80% at 20% 90%,rgba(47,107,255,.2),transparent 60%),linear-gradient(140deg,#17171B,#0B0B0D 74%)}
.render.c::before{animation-duration:38s}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* hero a pantalla completa */
.hero{position:relative;z-index:1;padding-bottom:clamp(26px,5vw,60px)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg .render{inset:-18% -12%;opacity:.82;filter:blur(4px)}
.hero-bg .render.b{opacity:.55;animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
.hero-bg .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.26) 0%,rgba(10,10,11,.52) 44%,rgba(10,10,11,.93) 100%)}
/* todo lo que va tras el hero debe cubrirlo: fondo opaco y capa superior */
.mq,.merge,.hmod{position:relative;z-index:2;background:var(--ink)}
.hero-top,.hero .stage{position:relative;z-index:2}
/* cortina curva */
.over{position:relative;z-index:3;background:var(--ink);border-radius:clamp(30px,6vw,120px) clamp(30px,6vw,120px) 0 0;box-shadow:0 -40px 90px -34px rgba(0,0,0,.92);margin-top:calc(clamp(30px,6vw,120px)*-.5)}
.over.ink2{background:var(--ink2)}
.over-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;background:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);white-space:nowrap;z-index:4}
.arcs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.arcs i{position:absolute;left:50%;top:50%;border:1px solid var(--line);border-radius:50%;transform:translate(-50%,-50%)}
.arcs i:nth-child(1){width:min(660px,84vw);aspect-ratio:1}
.arcs i:nth-child(2){width:min(940px,120vw);aspect-ratio:1;opacity:.6}
.arcs i:nth-child(3){width:min(1260px,160vw);aspect-ratio:1;opacity:.35}
.stmt .wrap,.final .wrap{position:relative;z-index:2}
/* tablero 3D */
.stage{perspective:1700px;perspective-origin:50% 0}
.stage .lap{transform-origin:50% 0;will-change:transform}
.core{transform:translate(-50%,-50%) perspective(1400px) rotateX(calc((1 - var(--p2))*15deg)) scale(calc(.88 + .12*var(--p2)))}
/* módulos en scroll horizontal */
.hmod{position:relative}
.hmod-st{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px);overflow:hidden}
.hmod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}
.hmod-track{display:flex;gap:clamp(14px,1.8vw,26px);padding-inline:var(--pad);will-change:transform}
.mcard{flex:0 0 min(390px,78vw);height:min(520px,52vh);min-height:300px;border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.2vw,30px);border:1px solid var(--line);isolation:isolate}
.mcard .render{z-index:-2}
.mcard .grain{z-index:-1}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(10,10,11,.86) 100%);z-index:-1}
.mcard .n{position:absolute;top:clamp(18px,2vw,26px);left:clamp(18px,2vw,26px);width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,239,234,.28);background:rgba(10,10,11,.4);backdrop-filter:blur(8px);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--bone)}
.mcard h3{margin-bottom:10px}
.mcard p{font-size:14px;color:var(--dim);line-height:1.5;max-width:34ch}
.hmod-prog{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}
.hmod-prog .t{height:2px;background:var(--line);border-radius:99px;overflow:hidden}
.hmod-prog .t i{display:block;height:100%;width:22%;background:var(--bone);border-radius:99px;transform:translateX(0)}
@media (max-width:900px){.hmod{height:auto!important}.hmod-st{position:static;height:auto;padding-block:var(--sec)}.hmod-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none!important;padding-bottom:6px}.hmod-track::-webkit-scrollbar{display:none}.mcard{scroll-snap-align:start;height:min(460px,64vh)}.over{margin-top:0}}
@media (prefers-reduced-motion:reduce){.render::before,.hero-bg .render.b{animation:none}.pre{display:none}.stage .lap{transform:none}}
@media print{.pre,.cur{display:none}.hmod-st{position:static;height:auto}}