body{margin:0}
a{color:#5B21E6}a:hover{color:#3F12B0}
html{scroll-behavior:smooth}
@keyframes up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes wa{from{opacity:0;transform:translateY(60%) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes wb{from{opacity:0;transform:translateY(60%) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.8) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,33,230,.5)}100%{box-shadow:0 0 0 20px rgba(91,33,230,0)}}
@keyframes pulseW{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.in{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.12s}.d2{animation-delay:.26s}.d3{animation-delay:.4s}.d4{animation-delay:.54s}.d5{animation-delay:.7s}
.photo{animation:pop 1.1s cubic-bezier(.2,.7,.2,1) .25s both}
.chip{animation:pop .7s cubic-bezier(.2,.7,.2,1) both,floaty 5s ease-in-out infinite}
.ring{animation:spin 26s linear infinite}
.dot{animation:blink 1.6s ease-in-out infinite}
.cta{animation:pulse 2s ease-out 1.6s infinite;transition:transform .2s}
.cta:hover{transform:scale(1.05)}
.ctaw{animation:pulseW 2s ease-out infinite;transition:transform .2s}
.ctaw:hover{transform:scale(1.05)}
.arrow{display:inline-block;animation:nudge 1.2s ease-in-out infinite}
.track{display:flex;gap:24px;width:max-content;animation:slide 56s linear infinite}
.track:hover{animation-play-state:paused}
.band{display:flex;gap:48px;width:max-content;animation:slideR 28s linear infinite}
.nav a.nl{position:relative}
.nav a.nl::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:#5B21E6;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a.nl:hover::after{transform:scaleX(1)}
.lift{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.lift:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:0 22px 44px rgba(20,19,43,.18)}
.zoom{overflow:hidden}
.zoom .ph{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.zoom:hover .ph{transform:scale(1.08)}
.tab{transition:background .25s,color .25s,transform .25s}
.tab:hover{transform:translateX(6px)}
.panel{animation:up .5s cubic-bezier(.2,.7,.2,1) both}
.row{transition:background .3s,padding .3s}
.row:hover{background:rgba(255,255,255,.06);padding-left:20px}
.bar{position:fixed;transition:transform .1s linear;top:0;left:0;right:0;height:4px;background:#5B21E6;transform-origin:left;transform:scaleX(0);z-index:30}
.rv{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.rv.on{opacity:1;transform:none}
.rv.on.lift:hover{transform:translateY(-10px) rotate(-.6deg)}
.line{transform-origin:top;transform:scaleY(0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.line.on{transform:scaleY(1)}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:18px;padding:20px 24px;min-height:44px;border-radius:18px;font-size:21px;font-weight:700;background:#FFFFFF;color:#14132B;transition:background .25s,color .25s,transform .25s}
.tab[aria-pressed="true"]{background:#5B21E6;color:#FFFFFF}
.tab:focus-visible,.fchip:focus-visible{outline:3px solid #14132B;outline-offset:3px}
.fchip{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:10px 22px;border-radius:999px;font-weight:700;background:#F3F0FF;color:#14132B;transition:background .25s,color .25s}
.fchip[aria-pressed="true"]{background:#14132B;color:#FFFFFF}
.pt{border:1.5px solid #6E5BD6;border-radius:999px;padding:8px 16px;font-weight:500}
.hasimg{background-size:cover;background-position:center;color:transparent!important}
@media (prefers-reduced-motion:reduce){
.in,.photo,.chip,.ring,.dot,.cta,.ctaw,.arrow,.track,.band,.panel,.line,.bar{animation:none}
html{scroll-behavior:auto}
.rv,.line{opacity:1;transform:none;transition:none}
}

/* ---- Interacciones ---- */
.logos{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);display:flex;flex-direction:column;gap:16px}
.track.rev{animation-name:slideR;animation-duration:52s}
.track>div{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.track>div:hover{transform:translateY(-6px) scale(1.08);box-shadow:0 12px 26px rgba(20,19,43,.16)}
#word::after{content:"";display:inline-block;width:.05em;height:.85em;margin-left:.08em;background:currentColor;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.sw>span{display:inline-block;transform:translateY(115%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.split.on .sw>span{transform:none}
.nav a.nl.active::after{transform:scaleX(1)}
.tab{position:relative;overflow:hidden}
.tab.auto[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#FFFFFF;opacity:.6;transform-origin:left;animation:grow 5s linear both}
.glow{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:#7C5CFF;filter:blur(90px);opacity:0;pointer-events:none;transition:opacity .5s;z-index:0;will-change:transform}
.tilt{transition:transform .25s ease-out,box-shadow .35s;will-change:transform}
.fab{position:fixed;right:22px;bottom:22px;z-index:25;width:60px;height:60px;border-radius:50%;background:#128C4B;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(20,19,43,.3);transform:translateY(120px) scale(.6);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.2,1.2),opacity .3s}
.fab.show{transform:none;opacity:1}
.fab.show:hover{transform:scale(1.1) rotate(-6deg)}
.cur{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid #5B21E6;border-radius:50%;pointer-events:none;z-index:40;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;will-change:transform}
.cur.on{opacity:1}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(91,33,230,.14)}
.row>span{transition:transform .5s cubic-bezier(.2,.9,.2,1.4) .3s,box-shadow .3s}
.rv.row>span{transform:scale(0)}
.rv.row.on>span{transform:scale(1)}
.row:hover>span{box-shadow:0 0 0 8px rgba(124,92,255,.3)}
@media (hover:none),(pointer:coarse){.cur,.glow{display:none}}
@media (prefers-reduced-motion:reduce){
.track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;padding:0 16px}
.track [aria-hidden="true"],.track.rev,.cur,.glow{display:none!important}
.logos{-webkit-mask-image:none;mask-image:none}
#word::after,.tab.auto::after{animation:none}
.rv.row>span{transform:none}
}

/* Franja violeta */
.band span{display:inline-block;transition:color .3s,transform .3s cubic-bezier(.2,.9,.2,1.4)}
.band span:nth-child(14n+1),.band span:nth-child(14n+5),.band span:nth-child(14n+9){color:transparent;-webkit-text-stroke:1.5px #FFFFFF}
.band span:nth-child(14n+1):hover,.band span:nth-child(14n+5):hover,.band span:nth-child(14n+9):hover{color:#FFFFFF}
.band span:nth-child(odd):hover{transform:scale(1.12) rotate(-3deg)}
.band span:nth-child(even){animation:spin 5s linear infinite}
.band:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.band span:nth-child(even){animation:none}}

/* ---- Detalles finales ---- */
@view-transition{navigation:auto}
::selection{background:#5B21E6;color:#FFFFFF}
html{scrollbar-color:#5B21E6 #F3F0FF}
a:focus-visible,button:focus-visible{outline:3px solid #5B21E6;outline-offset:3px;border-radius:6px}
@keyframes introUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes introOut{to{transform:translateY(-101%)}}
.intro{position:fixed;inset:0;z-index:100;background:#5B21E6;color:#FFFFFF;display:flex;align-items:center;justify-content:center;gap:.28em;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(34px,7vw,84px);pointer-events:none;animation:introOut .7s cubic-bezier(.7,0,.2,1) 1s forwards}
.intro span{display:inline-block;overflow:hidden;padding-bottom:.12em}
.intro b{display:inline-block;font-weight:800;animation:introUp .6s cubic-bezier(.2,.7,.2,1) both}
.intro span:nth-child(2) b{animation-delay:.12s;font-style:italic}
.seen .intro{display:none}
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.28),transparent 70%)}
.spot:hover::after{opacity:1}
.star{position:fixed;left:0;top:0;z-index:60;pointer-events:none;color:#7C5CFF;font-size:18px;line-height:1;will-change:transform,opacity}
.lb{position:fixed;inset:0;z-index:90;background:rgba(20,19,43,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(92vw,900px);max-height:86vh;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.92);transition:transform .35s cubic-bezier(.2,.9,.2,1.2)}
.lb.open img{transform:none}
.lb button{all:unset;cursor:pointer;position:absolute;width:52px;height:52px;border-radius:50%;background:#FFFFFF;color:#14132B;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;transition:transform .2s}
.lb button:hover{transform:scale(1.1)}
.lb button:focus-visible{outline:3px solid #B9A6FF;outline-offset:3px}
.lb .x{top:20px;right:20px}.lb .p{left:20px;top:50%;margin-top:-26px}.lb .n{right:20px;top:50%;margin-top:-26px}
.lb .cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#FFFFFF;font-weight:700}
figure.zoomable{cursor:zoom-in}
@keyframes introFade{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.intro{animation:introFade .5s ease 1s forwards}.intro b{animation:none}.lb,.lb img{transition:none}}
@keyframes vtOut{to{opacity:0;transform:translateY(-28px) scale(.98)}}
@keyframes vtIn{from{opacity:0;transform:translateY(48px)}}
@media (prefers-reduced-motion:no-preference){
::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .5s cubic-bezier(.2,.7,.2,1) .12s both}
}