/* Un lenguaje de profundidad compartido: CSS 3D, imágenes locales y luz. */
.depth-page{--aura-rgb:183,150,87;--depth-px:0;--depth-py:0;overflow-x:clip}
.depth-page[data-world="music"]{--aura-rgb:201,147,87}.depth-page[data-world="technology"]{--aura-rgb:113,172,156}.depth-page[data-world="history"]{--aura-rgb:181,126,87}.depth-page[data-world="travel"]{--aura-rgb:151,179,160}
.depth-intro{min-height:430px;padding-right:34%;overflow:visible}.depth-intro h1{font-size:clamp(44px,5vw,74px);position:relative;z-index:2}.depth-intro>p{position:relative;z-index:2}.depth-intro:after{content:'';position:absolute;inset:-40px -5vw -60px;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 79% 48%,rgba(var(--aura-rgb),.14),transparent 38%)}
.depth-art{position:absolute;right:-2%;top:8px;width:38%;height:395px;perspective:1000px;isolation:isolate;pointer-events:none;--dx:0;--dy:0}
.depth-system{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--dy)*-9deg)) rotateY(calc(var(--dx)*15deg));transition:transform .2s ease-out}
.depth-aura{position:absolute;inset:1%;border-radius:50%;background:radial-gradient(circle,rgba(var(--aura-rgb),.22),transparent 68%);filter:blur(8px);transform:translateZ(-70px);opacity:.8}
.depth-orbit{position:absolute;left:10%;top:10%;width:80%;height:80%;border:1px solid rgba(var(--aura-rgb),.53);border-radius:50%;transform-style:preserve-3d;box-shadow:inset 0 0 0 3px #c5a57408,0 0 0 4px #b79b690a;animation:depth-orbit-a 34s linear infinite;animation-play-state:paused}
.depth-orbit:after{content:'';position:absolute;left:50%;top:-3px;width:5px;height:5px;border-radius:50%;background:#edcf98;box-shadow:0 0 16px 3px rgba(var(--aura-rgb),.65)}
.depth-orbit.two{inset:17%;width:66%;height:66%;border-color:rgba(var(--aura-rgb),.3);animation-name:depth-orbit-b;animation-duration:42s;animation-direction:reverse}
.depth-orbit.three{inset:3%;width:94%;height:94%;border-style:dashed;border-color:rgba(var(--aura-rgb),.16);animation-name:depth-orbit-c;animation-duration:60s}
.depth-disc{position:absolute;left:24%;top:24%;width:52%;height:52%;border:1px solid #cdb58280;border-radius:50%;overflow:hidden;transform:translateZ(35px);box-shadow:0 0 0 6px #0d1818,0 0 0 7px #b59b694a,0 22px 40px #0008;background:#13211e}
.depth-disc img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.8);transform:scale(1.08) translate(calc(var(--dx)*-5px),calc(var(--dy)*-4px));transition:transform .3s}
.depth-disc:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#f8dea52a,transparent 40%,#06141773);border-radius:inherit;box-shadow:inset 0 0 20px #0005}
.depth-satellite{position:absolute;width:70px;height:88px;border:1px solid #bda87986;background:#14201e;border-radius:3px;padding:4px;box-shadow:0 10px 22px #0007;transform-style:preserve-3d;animation:depth-float 8s ease-in-out infinite;animation-play-state:paused}.depth-satellite img{border-radius:1px;filter:saturate(.7)}.depth-satellite.first{left:5%;top:45%;--float-z:58px;--float-rotation:-12deg}.depth-satellite.second{right:6%;top:5%;--float-z:10px;--float-rotation:13deg;animation-delay:-3s}.depth-satellite.third{right:4%;bottom:6%;--float-z:75px;--float-rotation:8deg;animation-delay:-5s}
.depth-spark{position:absolute;left:var(--star-x);top:var(--star-y);width:2px;height:2px;background:#d9c49e;border-radius:50%;box-shadow:0 0 7px rgba(var(--aura-rgb),.6);animation:depth-spark 6s ease-in-out infinite;animation-delay:var(--star-delay);animation-play-state:paused;opacity:.45}
.depth-caption{position:absolute;bottom:-4px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#b7aa8e}
.depth-art.is-portal{right:2%;top:45px;height:400px;width:43%;z-index:1}.is-portal .depth-disc{display:none}.is-portal .depth-aura{opacity:.3}.is-portal .depth-caption{color:#dbcbae}.depth-art.is-portal .depth-orbit{border-color:#dbcba455}
.depth-sound{position:absolute;inset:8%;transform:translateZ(9px)}.depth-sound i{position:absolute;left:50%;top:50%;width:2px;height:var(--bar-height);background:linear-gradient(#d7b477,#8d734542);transform-origin:50% 0;transform:rotate(var(--bar-angle)) translateY(-138px);opacity:.65;animation:depth-tone 3s ease-in-out infinite;animation-delay:var(--bar-delay);animation-play-state:paused}
.depth-light-button{margin-top:20px;position:relative;z-index:3;border:0;border-bottom:1px solid #c7aa7d4a;background:transparent;color:#c7aa7d;padding:6px 0;font-size:11px;letter-spacing:.4px;cursor:pointer}.depth-light-button span{margin-right:8px}
.depth-intro.is-illuminated .depth-aura{animation:depth-awaken 3s ease-out both}.depth-intro.is-illuminated .depth-disc{box-shadow:0 0 0 6px #0d1818,0 0 0 7px #d5bf8699,0 0 70px rgba(var(--aura-rgb),.5)}
.depth-surface{--tilt-x:0deg;--tilt-y:0deg;--shine-x:50%;--shine-y:50%;position:relative;transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .35s ease-out,box-shadow .35s,border-color .35s;transform-style:preserve-3d;isolation:isolate}
body:not(.admin) .depth-surface:hover{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);box-shadow:0 18px 38px #0006}
.depth-surface:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(var(--aura-rgb),.17),transparent 58%);opacity:0;transition:opacity .35s}
.depth-surface:hover:before,.depth-surface:focus-within:before{opacity:1}.depth-surface .storybody{transform:translateZ(15px)}.depth-surface>.caption{z-index:4}
.depth-picture{box-shadow:10px 13px 0 -1px #0b1414,10px 13px 0 0 #c7aa7d2d}.depth-picture>img{transform:scale(1.05);transition:transform .5s}.depth-picture:hover>img{transform:scale(1.09)}
.depth-veil{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.depth-veil:before,.depth-veil:after{content:'';position:absolute;width:50%;height:140%;top:-20%;left:40%;background:linear-gradient(105deg,transparent,rgba(var(--aura-rgb),.07),transparent);transform:rotate(-20deg);animation:depth-light 17s ease-in-out infinite alternate;animation-play-state:paused}.depth-veil:after{left:60%;animation-delay:-8s;opacity:.6}
.future.depth-landscape,.qoyllur.depth-landscape{position:relative;overflow:hidden;background-size:cover;background-position:calc(50% + var(--depth-px)*7px) calc(50% + var(--depth-py)*5px);transition:background-position .3s ease-out}.depth-landscape>.wrap{position:relative;z-index:2}.qoyllur.depth-landscape>img{transform:scale(1.04) translateX(calc(var(--depth-px)*-8px));transition:transform .3s}
.depth-motion-toggle{position:fixed;bottom:15px;right:18px;z-index:35;display:flex;align-items:center;gap:9px;border:1px solid #cab27d50;background:#0b1616ed;backdrop-filter:blur(12px);color:#d0c5ad;border-radius:30px;padding:8px 13px;font-size:10px;box-shadow:0 5px 24px #0004}.depth-motion-toggle:before{content:'';width:5px;height:5px;border-radius:50%;background:#8db2a1;box-shadow:0 0 7px #8db2a177}.depth-paused .depth-motion-toggle:before{background:#a99979;box-shadow:none}
.depth-ready [data-depth-visible="true"] .depth-orbit,.depth-ready [data-depth-visible="true"] .depth-satellite,.depth-ready [data-depth-visible="true"] .depth-spark,.depth-ready [data-depth-visible="true"] .depth-sound i,.depth-ready [data-depth-visible="true"] .depth-veil:before,.depth-ready [data-depth-visible="true"] .depth-veil:after{animation-play-state:running}
.depth-paused .depth-orbit,.depth-paused .depth-satellite,.depth-paused .depth-spark,.depth-paused .depth-sound i,.depth-paused .depth-veil:before,.depth-paused .depth-veil:after,.depth-hidden .depth-orbit,.depth-hidden .depth-satellite,.depth-hidden .depth-spark,.depth-hidden .depth-sound i,.depth-hidden .depth-veil:before,.depth-hidden .depth-veil:after{animation-play-state:paused!important}
.depth-paused .depth-system{transform:none}.depth-paused .depth-surface,.depth-paused .depth-surface:hover{transform:none}.depth-paused .depth-picture>img{transform:scale(1.05)}
@keyframes depth-orbit-a{from{transform:rotateX(58deg) rotateY(-17deg) rotateZ(0)}to{transform:rotateX(58deg) rotateY(-17deg) rotateZ(360deg)}}
@keyframes depth-orbit-b{from{transform:rotateY(64deg) rotateX(12deg) rotateZ(0)}to{transform:rotateY(64deg) rotateX(12deg) rotateZ(360deg)}}
@keyframes depth-orbit-c{from{transform:rotateX(14deg) rotateY(-13deg) rotateZ(0)}to{transform:rotateX(14deg) rotateY(-13deg) rotateZ(360deg)}}
@keyframes depth-float{0%,100%{transform:translate3d(0,0,var(--float-z)) rotateZ(var(--float-rotation))}50%{transform:translate3d(0,-11px,var(--float-z)) rotateZ(var(--float-rotation))}}
@keyframes depth-spark{0%,100%{opacity:.16;transform:translateY(2px)}50%{opacity:.75;transform:translateY(-7px)}}
@keyframes depth-tone{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes depth-awaken{0%{transform:scale(.75);opacity:.5}40%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:.8}}
@keyframes depth-light{from{transform:translateX(-30px) rotate(-20deg);opacity:.4}to{transform:translateX(40px) rotate(-13deg);opacity:.9}}
@media(min-width:1500px){.depth-art{height:430px}.depth-intro{min-height:470px}}
@media(max-width:1000px){.depth-intro{padding-right:30%}.depth-intro h1{font-size:53px}.depth-art{right:-3%;width:35%;height:300px;top:40px}.depth-caption{font-size:7px;letter-spacing:1.5px}.depth-satellite{width:50px;height:66px}.depth-sound i{transform:rotate(var(--bar-angle)) translateY(-103px)}}
@media(max-width:700px){.depth-intro{padding-right:0;padding-top:300px!important;min-height:0}.depth-intro h1{font-size:46px}.depth-intro>p:not(.eyebrow){font-size:14px}.depth-art{width:280px;height:280px;right:calc(50% - 140px);top:0}.depth-intro:after{background:radial-gradient(ellipse at 50% 20%,rgba(var(--aura-rgb),.15),transparent 50%)}.depth-caption{bottom:-3px}.depth-motion-toggle{font-size:9px;bottom:12px;right:12px;padding:7px 10px}.depth-picture{margin-right:10px}.depth-light-button{margin-top:15px}.depth-surface .storybody{transform:none}.depth-sound i{transform:rotate(var(--bar-angle)) translateY(-103px)}}
@media(prefers-reduced-motion:reduce){.depth-orbit,.depth-satellite,.depth-spark,.depth-sound i,.depth-veil:before,.depth-veil:after{animation:none!important}.depth-orbit{transform:rotateX(58deg) rotateY(-17deg)}.depth-orbit.two{transform:rotateY(64deg) rotateX(12deg)}.depth-orbit.three{transform:rotateX(14deg) rotateY(-13deg)}.depth-surface,.depth-surface:hover,.depth-system{transform:none!important}.depth-intro.is-illuminated .depth-aura{animation:none!important}.depth-picture>img{transition:none}}
@media(max-width:700px){.depth-art.is-portal{right:-18%;top:30px;width:80%;height:370px;opacity:.45}.is-portal .depth-caption{display:none}.depth-landscape .portal-copy{position:relative;z-index:2}}
