/* v14 · efectos tipo escena cinematográfica (dorado sobre negro) */
#pfx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.reveal{filter:blur(14px);transform:translateY(46px) scale(.94);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{filter:none;transform:none}
/* ESCENA: círculo + CAVIARGES x3 */
.scene{height:620px}
.ghost span{will-change:translate;animation:glint 5s ease-in-out infinite}
.ghost span:nth-child(2){animation-delay:-1.6s}.ghost span:nth-child(3){animation-delay:-3.2s}
@keyframes glint{50%{-webkit-text-stroke-color:#f0d6a9;text-shadow:0 0 90px #d6b17a66}}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;z-index:1;border:1px solid #d6b17a55;translate:-50% -56%;animation:spin 18s linear infinite}
.r1{width:min(440px,78vw);aspect-ratio:1;border-style:dashed}
.r2{width:min(580px,92vw);aspect-ratio:1;border-color:#f0d6a933;animation-duration:30s;animation-direction:reverse;box-shadow:0 0 80px #c99a5a1f,inset 0 0 80px #c99a5a14}
.r1:before,.r2:before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:#f0d6a9;box-shadow:0 0 18px 4px #f0d6a9}
@keyframes spin{to{rotate:360deg}}
.orb{will-change:scale;filter:drop-shadow(0 0 60px #d6b17acc) brightness(1.3)}
.podium i:nth-child(2){animation:pulse 3.4s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 60px #f0d6a9,inset 0 0 40px #f0d6a9aa}}
/* DEMOS */
.dm-frame{transition:transform .25s ease-out,border-color .4s,box-shadow .4s;will-change:transform}
.project-card.on .dm-frame{border-color:#b58b4d;box-shadow:0 40px 80px -24px #000,0 0 60px #c99a5a33}
.dm-frame:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 40%,#ffffff2e 50%,transparent 60%);translate:-130% 0;animation:sweep 5s ease-in-out infinite}
@keyframes sweep{55%,100%{translate:130% 0}}
.dm-frame:after{content:"";position:absolute;z-index:5;width:16px;height:16px;border-radius:50%;border:2px solid #d6b17a;background:#f0d6a955;box-shadow:0 0 18px #d6b17a;left:80%;top:75%;opacity:0;pointer-events:none}
.project-card.on .dm-frame:after{animation:cur 9s ease-in-out infinite}
@keyframes cur{0%{opacity:0;left:82%;top:78%}8%{opacity:1}16%,24%{left:22%;top:46%;scale:1}20%{scale:.6}45%{left:62%;top:60%}70%{left:30%;top:72%;opacity:1}92%,100%{opacity:0;left:82%;top:78%}}
.project-card.on .dm-page{animation:dmplay 9s ease-in-out infinite}
@keyframes dmplay{0%,14%{transform:none}48%,62%{transform:translateY(-330px)}96%,100%{transform:none}}
.dm-hero{background-size:170% 170%;animation:drift 6s ease-in-out infinite alternate}@keyframes drift{to{background-position:100% 100%}}
.dm-bar:after{content:"● EN VIVO";color:#d6b17a;font-size:8px;animation:blink 1.6s steps(2) infinite}@keyframes blink{50%{opacity:.25}}
.dm-btn{animation:btn 3s ease-in-out infinite}@keyframes btn{50%{box-shadow:0 0 22px #d6b17a99}}
.dm-hero svg.ecg-s{position:absolute;inset:0;width:100%;height:100%}
.ecg{stroke-dasharray:320;stroke-dashoffset:320;animation:ecg 2.4s linear infinite}@keyframes ecg{to{stroke-dashoffset:-320}}
.flow{animation:flow 1s linear infinite}@keyframes flow{to{stroke-dashoffset:-14}}
.t-consul{background:linear-gradient(160deg,#0c1a20,#12303a);color:#e8f3f4}.t-consul .dm-btn{background:#8fd6d0;color:#0c1a20}.t-consul .dm-h em{color:#8fd6d0}.t-consul .dm-hero{position:relative;background:radial-gradient(circle at 70% 40%,#2c6d73,#0f2a31 70%)}.t-consul .dm-tiles div{background:#ffffff12;border:1px solid #ffffff22}
.t-auto{background:radial-gradient(circle at 80% 0,#3d2d16,#0a0908 65%);color:#f1ebe0}.t-auto .dm-btn{background:#f0d6a9;color:#1b1409}.t-auto .dm-hero{position:relative;background:#ffffff08;border:1px solid #d6b17a44}.t-auto .dm-hero svg{position:absolute;inset:0;width:100%;height:100%}.t-auto .dm-tiles div{background:#ffffff0d;border:1px solid #d6b17a33}
@media(min-width:1100px){.portfolio-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.scene{height:480px}}
/* botón de música */
.snd{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:#0a0907cc;backdrop-filter:blur(8px);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:13px 0;margin-right:14px;transition:box-shadow .3s}
.snd:hover,.snd.on{box-shadow:0 0 24px #d6b17a66}
.snd i{width:3px;height:4px;background:var(--gold-light);border-radius:2px}
.snd.on i{animation:eq .9s ease-in-out infinite alternate}.snd.on i:nth-child(2){animation-delay:-.3s}.snd.on i:nth-child(3){animation-delay:-.6s}.snd.on i:nth-child(4){animation-delay:-.15s}
@keyframes eq{to{height:18px}}
.snd:not(.on):after{content:"";position:absolute;width:20px;height:1px;background:var(--gold-light);rotate:-45deg;pointer-events:none}.snd{position:relative}
@media(max-width:680px){.snd{margin-right:8px;width:38px;height:38px;padding:11px 0}}

/* v19 · rendimiento: solo propiedades baratas (transform/opacity), sin desenfoques ni sombras animadas */
*,*:before,*:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header{background:rgba(8,8,7,.96)!important}
h1 em,h2 em,.hero2 h1 em{animation:none!important}
.reveal{filter:none!important;transform:translateY(34px) scale(.97);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)!important}
.reveal.visible{transform:none}
.orb{filter:none!important}
.scene:after{content:"";position:absolute;left:50%;top:50%;width:min(520px,90vw);aspect-ratio:1;translate:-50% -56%;border-radius:50%;background:radial-gradient(circle,#d6b17a55,transparent 65%);pointer-events:none;z-index:1}
.r2{box-shadow:none!important}
.ghost span{text-shadow:none!important;animation:glow2 5s ease-in-out infinite!important}
@keyframes glow2{50%{opacity:.55}}
.podium i:nth-child(2){animation:none!important}
.dm-hero,.dm-btn,.dm-bar:after{animation:none!important}
.dm-frame{will-change:auto!important;container-type:size}
.dm-frame:before{animation:none!important}
.project-card.on .dm-frame:before{animation:sweep 5s ease-in-out infinite!important}
.dm-frame:after{left:0!important;top:0!important}
@keyframes cur{0%{opacity:0;translate:82cqw 78cqh}8%{opacity:1}16%,24%{translate:22cqw 46cqh;scale:1}20%{scale:.6}45%{translate:62cqw 60cqh}70%{translate:30cqw 72cqh;opacity:1}92%,100%{opacity:0;translate:82cqw 78cqh}}
.ecg,.flow{animation:none!important}
.project-card.on .ecg{animation:ecg 2.4s linear infinite!important}
.project-card.on .flow{animation:flow 1s linear infinite!important}
.lite .dm-frame:before,.lite .dm-frame:after,.lite .scene:after{display:none!important}

/* v20 · tarjetas giratorias (prisma de 3 caras) y titular más contenido */
.hero2 h1{font-size:clamp(34px,5vw,68px)!important}
.screen{--w:clamp(150px,26vw,300px);width:var(--w)!important;aspect-ratio:5/4!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:block!important;perspective:800px;transform:rotateY(var(--ry));animation:fl2 7s ease-in-out infinite!important}
.s-l{--ry:16deg}.s-r{--ry:-16deg;animation-delay:-3s!important}
@keyframes fl2{0%,100%{transform:rotateY(var(--ry)) translateY(0)}50%{transform:rotateY(var(--ry)) translateY(-16px)}}
.spin{position:absolute;inset:0;transform-style:preserve-3d;animation:spin3 15s cubic-bezier(.65,0,.25,1) infinite}
.s-r .spin{animation-delay:-7.5s}
@keyframes spin3{0%,28%{transform:rotateY(0)}33%,61%{transform:rotateY(-120deg)}66%,94%{transform:rotateY(-240deg)}100%{transform:rotateY(-360deg)}}
.face{position:absolute;inset:0;border-radius:16px;border:1px solid #d6b17a99;background:linear-gradient(145deg,#2a2112f2,#0b0a08f5);box-shadow:inset 0 0 40px #d6b17a1f,0 0 50px #c99a5a33;padding:clamp(10px,1.4vw,16px);display:flex;flex-direction:column;justify-content:space-between;gap:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:left;overflow:hidden}
.f1{transform:translateZ(calc(var(--w)*.2887))}.f2{transform:rotateY(120deg) translateZ(calc(var(--w)*.2887))}.f3{transform:rotateY(240deg) translateZ(calc(var(--w)*.2887))}
.face small{font-size:clamp(8px,1vw,11px);letter-spacing:2px;color:#d6b17a;font-weight:600}
.face b{font-size:clamp(14px,2.1vw,25px);line-height:1.08;letter-spacing:-.03em;font-weight:600;color:#f4f0e9}
.face u{flex:1;min-height:20px;border-radius:9px;text-decoration:none;background:radial-gradient(circle at 70% 30%,#fbe9c6,#c99a5a 55%,#5b4427)}
.ppl{width:72%;height:auto;align-self:flex-start}

/* v21 · sistema solar: traslación orbital con profundidad 3D real (solo transform: fluido y barato) */
.scene{transform-style:preserve-3d;--R:clamp(90px,28vw,380px);--e:clamp(14px,3vw,40px)}
.scene:before{content:"";position:absolute;left:50%;top:calc(50% - 26px);width:calc(var(--R)*2);height:calc(var(--e)*2.4);translate:-50% -50%;border:1px solid #d6b17a3a;border-radius:50%;pointer-events:none}
.screen{position:absolute!important;left:50%!important;right:auto!important;top:calc(50% - 26px)!important;margin:calc(var(--w)*-.4) 0 0 calc(var(--w)/-2)!important;transform:none;animation:ox 5s cubic-bezier(.37,0,.63,1) infinite alternate,oz 5s cubic-bezier(.37,0,.63,1) -2.5s infinite alternate!important}
.s-r{animation-delay:-5s,-7.5s!important}
@keyframes ox{from{translate:calc(var(--R)*-1) 0}to{translate:var(--R) 0}}
@keyframes oz{from{transform:translate3d(0,calc(var(--e)*-1),calc(var(--R)*-.8))}to{transform:translate3d(0,var(--e),calc(var(--R)*.8))}}
/* mismo movimiento en "No se trata solo de verse bien" */
.feature-art{--R:clamp(100px,17vw,180px);--e:clamp(16px,3vw,40px);perspective:900px;transform-style:preserve-3d}
.feature-art:after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--R)*2);height:calc(var(--e)*2.4);translate:-50% -50%;border:1px solid #d6b17a3a;border-radius:50%;pointer-events:none}
.feature-ring:before{animation:spin 16s linear infinite}
.feature-label{position:absolute!important;inset:0!important;margin:auto!important;width:max-content;height:max-content;animation:ox 6s cubic-bezier(.37,0,.63,1) infinite alternate,oz 6s cubic-bezier(.37,0,.63,1) -3s infinite alternate!important}
.label-two{animation-delay:-4s,-7s!important}
.label-three{animation-delay:-8s,-11s!important}