/* Motion DiscoVer: entradas 0.5s power3.out, micro 0.2s, secuencias atadas al scroll. Todo lo oculto vive bajo .motion (solo si cargó la librería). */
@keyframes logoLetters{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes logoV{0%{opacity:0;transform:translateY(-70%)}60%{opacity:1;transform:translateY(6%)}100%{opacity:1;transform:none}}
/* pantalla de carga: el logo se arma y un disquito gira */
.loader{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .5s,visibility .5s;animation:ldOut .5s 4.5s forwards}
.loaded .loader{opacity:0;visibility:hidden}
.loader .logo{font-size:clamp(38px,7vw,64px)}
.loader .logo::before{animation:logoLetters .8s cubic-bezier(.2,.7,.2,1) .15s both}
.loader .logo::after{animation:logoV .7s cubic-bezier(.2,.7,.2,1) .6s both}
.ld-disc{width:30px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0E0E10 0 7%,#0842FC 8% 36%,rgba(0,0,0,0) 37%),conic-gradient(#2A2A31 0 20%,#4A4A55 28%,#2A2A31 36% 70%,#4A4A55 78%,#2A2A31 86%);animation:spin .9s linear infinite}
@keyframes ldOut{to{opacity:0;visibility:hidden}}
h1{font-size:clamp(36px,6.4vw,100px)}
.nav .btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #3A3A44;height:38px;padding:0 16px;font-size:13.5px;font-weight:600}
.nav .btn:hover{box-shadow:inset 0 0 0 1px var(--blue-t);color:#fff}
.fan-btn{align-self:flex-start;margin-top:8px}

/* letras */
.l{display:inline-block;will-change:transform,opacity}
.motion [data-words] .w{overflow:visible}
.motion.js [data-words] .w>i{transform:none;transition:none}

/* bordes suaves entre secciones */
.gesto::before,.night::before,.night::after,.gesto::after{content:'';position:absolute;left:0;right:0;height:140px;pointer-events:none;z-index:1}
.gesto::before{bottom:100%;background:linear-gradient(to bottom,rgba(23,23,27,0),var(--white))}
.gesto::after{top:100%;background:linear-gradient(to bottom,var(--white),rgba(23,23,27,0))}
.night::before{top:0;background:linear-gradient(to bottom,var(--white),rgba(5,5,6,0))}
.night::after{bottom:0;background:linear-gradient(to top,var(--paper),rgba(5,5,6,0))}
.bleed::before{content:'';position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(to bottom,var(--paper),rgba(14,14,16,0));z-index:1;pointer-events:none}

/* secuencia: el toque */
.tap{height:460vh;--ph:min(78vh,720px);--pw:calc(var(--ph)*.4875);--sx:-.35;--sy:.3;--ss:.9}
.tap-scene{position:relative}
.tap-sleeve{position:absolute;width:calc(var(--ph)*var(--ss));aspect-ratio:1;left:calc(var(--pw)*var(--sx) - var(--ph)*var(--ss)*.833);top:calc(var(--ph)*var(--sy) - var(--ph)*var(--ss)*.185);border-radius:5px;background:linear-gradient(135deg,#F4F4F1 0%,#E2E2DE 55%,#EDEDE9 100%);box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.5)}
.tap-sleeve::after{content:'';position:absolute;inset:0;border-radius:5px;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 52%);mix-blend-mode:screen}
.tap-sticker,.sl i{position:absolute;left:83.3%;top:18.5%;width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#0E0E10 0 5%,#0842FC 6% 34%,rgba(0,0,0,0) 35%),repeating-radial-gradient(circle,#101014 0 1px,#26262C 1px 2px);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tw{position:absolute;left:83.3%;top:18.5%;width:9%;aspect-ratio:1;border-radius:50%;border:2px solid var(--blue-soft);transform:translate(-50%,-50%);opacity:0}
.tap.hit .tw{animation:wave 1.5s ease-out infinite}
.tap.hit .tw:nth-child(3){animation-delay:.5s}.tap.hit .tw:nth-child(4){animation-delay:1s}
.rig{position:relative;height:var(--ph);aspect-ratio:428/924;z-index:2}
.tap .rig .phone{height:100%;width:100%;aspect-ratio:auto;border:0;border-radius:9.5%/4.4%;box-shadow:none}
.rig-frame{position:absolute;inset:-7px;border:7px solid #26262C;border-radius:calc(var(--ph)*.052);box-shadow:0 60px 160px rgba(8,66,252,.35),0 0 0 1px #000;opacity:0;pointer-events:none}
.hand{position:absolute;left:-24.77%;top:-2.27%;width:202.34%;max-width:none;height:auto;pointer-events:none;z-index:3;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.ph-off{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050506}
.tap .head{transition:opacity .5s}
.motion .tap .head:not(.on){opacity:0}
.tap .f.tc .eyebrow{color:var(--blue-soft)}
.tap .f:not(.on){pointer-events:none}
.motion .tap .feat{position:relative;min-height:16em}
.motion .tap .feat .f{position:absolute;left:0;top:50%;transform:translateY(calc(-50% + 16px));opacity:0;transition:opacity .45s,transform .45s}
.motion .tap .feat .f.on{opacity:1;transform:translateY(-50%)}
@media (max-width:860px){
  .tap{--ph:min(52vh,460px);--sx:.3;--sy:.22;--ss:.78}
  .motion .tap .feat{position:absolute;min-height:0;z-index:6}
  .motion .tap .feat .f{top:auto;bottom:0;transform:translateY(12px)}
  .motion .tap .feat .f.on{transform:none}
  .motion .tap .head:not(.on){opacity:1}
}

/* abanico */
.fan-sec{padding-block:clamp(40px,7vw,110px) clamp(72px,11vw,180px);overflow:hidden}
.fan{position:relative;height:clamp(250px,38vw,560px);margin-bottom:clamp(28px,4vw,56px);--w:clamp(130px,21vw,310px)}
.sl{position:absolute;left:50%;bottom:6%;width:var(--w);aspect-ratio:1;margin-left:calc(var(--w)/-2);transform-origin:50% 135%;background:var(--c);border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14)}
.sl b{position:absolute;left:50%;top:50%;width:35%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#0E0E10 0 4.5%,rgba(0,0,0,0) 5%),radial-gradient(circle,rgba(0,0,0,0) 0 58%,rgba(0,0,0,.18) 59% 61%,rgba(0,0,0,0) 62%),var(--g);box-shadow:inset 0 4px 10px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.3)}
.sl::after{content:'';position:absolute;inset:0;border-radius:4px;background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.22) 44%,rgba(255,255,255,0) 54%)}
.sl:nth-child(1){transform:rotate(-33deg) translateX(-102%)}.sl:nth-child(2){transform:rotate(-22deg) translateX(-68%)}.sl:nth-child(3){transform:rotate(-11deg) translateX(-34%)}
.sl:nth-child(5){transform:rotate(11deg) translateX(34%)}.sl:nth-child(6){transform:rotate(22deg) translateX(68%)}.sl:nth-child(7){transform:rotate(33deg) translateX(102%)}

/* linea de pasos */
.motion .list{position:relative;border-top:0;padding-left:28px}
.motion .list::before{content:'';position:absolute;left:5px;top:26px;bottom:26px;width:2px;background:var(--blue-t);transform-origin:50% 0;transform:scaleY(var(--l,1))}
.motion .list div{position:relative}
.motion .list div::before{content:'';position:absolute;left:-28px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--blue-t)}

/* cortina */
.curtain{position:relative;height:clamp(260px,62vh,620px);overflow:hidden;background:var(--paper)}
.curtain i{position:absolute;inset:0;transform-origin:50% 100%}
.curtain i:nth-child(1){background:#0A1650}.curtain i:nth-child(2){background:#0A2CA6}.curtain i:nth-child(3){background:var(--blue)}

/* bandeja en el cierre */
.cta{overflow:hidden}
.cta .inner{position:relative;z-index:1}
.cta h2{font-size:clamp(28px,4.3vw,70px)}
.cta-deck{position:absolute;right:clamp(16px,5vw,90px);bottom:clamp(-150px,-9vw,-60px);width:clamp(200px,24vw,360px);aspect-ratio:1;opacity:.95}
.deck-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#0E0E10 0 2.5%,#F3F3F0 3% 26%,rgba(0,0,0,0) 26.5%),repeating-radial-gradient(circle,#0B0B0D 0 2px,#1D1D22 2px 3px);box-shadow:0 30px 80px rgba(0,0,0,.35);animation:spin 3.2s linear infinite;animation-play-state:paused}
.deck-disc::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,rgba(255,255,255,0) 0 6%,rgba(255,255,255,.2) 11%,rgba(255,255,255,0) 17% 50%,rgba(255,255,255,.14) 58%,rgba(255,255,255,0) 65%);animation:spin 3.2s linear infinite reverse;animation-play-state:paused}
.deck-arm{position:absolute;right:6%;top:-4%;width:5%;height:62%;transform-origin:50% 8%;transform:rotate(-26deg);transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.deck-arm::before{content:'';position:absolute;left:50%;top:0;width:340%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#C9CBD1 0 22%,#2A2B31 24% 100%)}
.deck-arm::after{content:'';position:absolute;left:32%;top:8%;width:36%;bottom:0;border-radius:6px;background:linear-gradient(90deg,#8A8C94,#F2F3F5 45%,#8A8C94);box-shadow:0 34px 0 22px #1B1C21 inset}
.cta.play .deck-disc,.cta.play .deck-disc::after{animation-play-state:running}
.cta.play .deck-arm{transform:rotate(14deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){.cta-deck{opacity:.5;right:-12%;bottom:-70px;width:54vw}}

/* al pasar el mouse o tocar */
.btn{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background-color .2s}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn:active{transform:scale(.97)}
.btn.b:hover{box-shadow:0 10px 30px rgba(8,66,252,.45)}
.pic img,.hero-img img{transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.pic:hover img{scale:1.05}
.trio>div{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.trio>div:hover{transform:translateY(-6px)}
.trio>div:hover .n{color:var(--blue-t)}
.trio .n{transition:color .25s}
.list div{transition:background-color .2s}
.list div:hover{background:rgba(127,152,255,.06)}
.nav nav a.sec{transition:color .2s}
.nav nav a.sec:hover{color:var(--ink)}

html:not(.motion) .ph-off,html:not(.motion) .tap-sleeve,html:not(.motion) .hand{display:none}html:not(.motion) .rig-frame{opacity:1}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}.hand{display:none}.rig-frame{opacity:1}
  .deck-disc,.deck-disc::after,.tap.hit .tw{animation:none}
  .tap{height:auto}.ph-off{display:none}.tap-sleeve{display:none}
  .btn,.pic img,.trio>div{transition:none}
}