/* Luz ambiental y cristal: portada y álbumes. */
body{isolation:isolate;background:#080c12}
body::before{content:"";position:fixed;inset:-15%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 15% 18%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 43%),radial-gradient(ellipse at 85% 55%,#8c72da16,transparent 40%),radial-gradient(ellipse at 40% 95%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 40%);animation:ambient-drift 24s ease-in-out infinite alternate}
#network{opacity:.16}
/* Una sombra difusa levanta las letras sin dibujar un contorno. */
.hero h1{filter:drop-shadow(0 2px 2px #0003) drop-shadow(0 9px 16px #0005)}
.hero .eyebrow,.hero-intro,.hero-note,.hero-foot,.explore,.brand,header nav>a,.section-top h2,.album-card h3{text-shadow:0 2px 3px #0004,0 6px 14px #0004}
header{height:76px;max-width:calc(1440px - 100px);margin:24px auto 0;padding:0 30px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(115deg,#ffffff09,#ffffff02);backdrop-filter:blur(24px);box-shadow:0 12px 40px #0002}
header nav>a{color:#b7c3cc;transition:color .2s}header nav>a:hover{color:var(--accent)}
.hero{min-height:410px;margin:22px 0 38px;padding:32px 48px 62px;border:1px solid #ffffff1c;border-radius:26px;background:linear-gradient(120deg,#ffffff09,#ffffff02 60%,#ffffff05);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffff0c,0 30px 70px #0002;isolation:isolate;display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff07,transparent 40%);z-index:-1}
.hero-glow{position:absolute;width:520px;height:520px;right:-120px;top:-150px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 65%);pointer-events:none}
.hero-copy{position:relative;z-index:2;width:60%}
.hero .eyebrow{font-size:9px;letter-spacing:2.4px;color:#b9cbd4}
.hero h1{font-size:clamp(52px,6vw,78px);line-height:1.02;font-weight:400;letter-spacing:-3.5px;margin:18px 0}
.hero h1 em{background:linear-gradient(100deg,#f4fbff,var(--accent) 70%);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero .hero-intro{font-size:13px;line-height:1.75;color:#aebdc8;margin:0 0 20px}
.hero-bottom{gap:24px;align-items:center}
.explore{display:inline-flex;gap:35px;align-items:center;padding:12px 18px;border:1px solid #ffffff30;border-radius:10px;background:linear-gradient(120deg,#ffffff0e,#ffffff04);backdrop-filter:blur(12px);transition:border-color .2s,background .2s;white-space:nowrap}
.explore:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.explore span{margin:0;font-size:18px}.hero-note{color:#8495a2;font-size:10px;line-height:1.8}
.hero-foot{position:absolute;bottom:17px;left:48px;right:48px;display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1.8px;color:#7b8e9b;border-top:1px solid #ffffff0e;padding-top:12px}
.glass-sculpture{position:absolute;right:30px;top:24px;width:41%;height:300px;perspective:900px;pointer-events:none}
.sculpture-halo{position:absolute;inset:0;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 20%,transparent),transparent 65%);filter:blur(28px);animation:halo-breathe 10s ease-in-out infinite alternate}
.glass-sheet{position:absolute;top:55px;left:21%;width:65%;height:205px;border-radius:48px;border:1px solid #ffffff45;background:linear-gradient(145deg,#ffffff20,#ffffff02 40%,color-mix(in srgb,var(--accent) 13%,transparent));backdrop-filter:blur(8px);box-shadow:inset 1px 1px 0 #ffffff30,inset -1px -1px 0 #ffffff0b,20px 24px 50px #0003;transform:rotateY(-32deg) rotateZ(-22deg);animation:glass-float 12s ease-in-out infinite alternate}
.sheet-one{top:30px;left:8%;opacity:.4;animation-delay:-8s}.sheet-two{top:65px;left:21%;opacity:.65;animation-delay:-4s}.sheet-three{top:85px;left:34%;border-color:color-mix(in srgb,var(--accent) 50%,#ffffff20)}
.sculpture-caption{position:absolute;left:14%;right:0;bottom:-10px;display:flex;justify-content:space-between;gap:12px;font-size:7px;letter-spacing:1.7px;color:#9cb4c0}
.album-card{position:relative;isolation:isolate;border-radius:16px;border-color:#ffffff20;background:linear-gradient(145deg,#ffffff0a,#ffffff03);box-shadow:0 8px 28px #0002,inset 0 1px 0 #ffffff0b;transition:transform .3s,border-color .3s,box-shadow .3s}
.album-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(330px circle at var(--spot-x,50%) var(--spot-y,30%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%);opacity:0;transition:opacity .3s}
.album-card::after{content:"";position:absolute;inset:-50% -80%;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffffff12 50%,transparent 60%);transform:translateX(-60%) rotate(-10deg);transition:transform .85s ease}
.album-card:hover,.album-card:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 15px 45px #0005,0 0 25px color-mix(in srgb,var(--accent) 8%,transparent)}
.album-card:hover::before,.album-card:focus-visible::before{opacity:1}.album-card:hover::after,.album-card:focus-visible::after{transform:translateX(60%) rotate(-10deg)}
.album-art{background:radial-gradient(ellipse at 25% 20%,color-mix(in srgb,var(--accent) 13%,#101922),#0a111a 75%)}
.album-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,#070e17a6)}
.album-art .badge{z-index:1;border-color:#ffffff25;background:#10192385;backdrop-filter:blur(14px);border-radius:6px}
.album-card .card-copy{position:relative;background:linear-gradient(120deg,#ffffff07,#ffffff02);backdrop-filter:blur(14px);padding:20px 23px;border-color:#ffffff12}
.album-card .card-copy h3{margin:0 0 10px;font-size:22px;letter-spacing:-.5px}.album-card .card-copy p{color:#97a8b5;font-size:10px;line-height:1.7}
.folder-icon{filter:drop-shadow(0 0 30px color-mix(in srgb,var(--accent) 25%,transparent));opacity:.8}
@keyframes ambient-drift{to{transform:translate3d(4%,-3%,0) scale(1.06)}}
@keyframes glass-float{to{transform:translateY(-14px) rotateY(-22deg) rotateZ(-16deg)}}
@keyframes halo-breathe{to{opacity:.55;transform:scale(.85)}}
@media(min-width:1440px){header{max-width:1268px}}
@media(max-width:1000px){header{margin-left:6%;margin-right:6%}.hero{padding:30px 32px 60px}.hero-copy{width:65%}.glass-sculpture{right:-20px;top:35px;opacity:.65}.glass-sheet{height:195px}.hero-foot{left:32px;right:32px}.hero h1{font-size:66px}.hero-bottom{gap:16px}.hero-note{font-size:9px}}
@media(max-width:600px){header{height:66px;margin-top:14px;padding:0 20px;border-radius:14px}header nav>a{display:block;font-size:10px}header nav>a:last-of-type{display:none}.hero{margin:18px 0 30px;min-height:390px;padding:28px 24px 65px;align-items:flex-start;border-radius:20px}.hero-copy{width:100%}.hero h1{font-size:58px;letter-spacing:-3px;margin-top:18px}.hero .eyebrow{font-size:8px;letter-spacing:1.5px}.hero .hero-intro{font-size:12px}.hero-bottom{flex-direction:row;gap:14px}.explore{font-size:11px;padding:12px 14px;gap:20px}.hero-note{font-size:8px}.glass-sculpture{top:auto;bottom:46px;right:-12px;width:140px;height:130px;opacity:.2}.glass-sheet{top:10px;width:65%;height:100px;border-radius:20px}.sheet-one{left:5%;top:0}.sheet-two{left:22%;top:16px}.sheet-three{left:39%;top:32px}.sculpture-caption{display:none}.hero-foot{bottom:18px;left:24px;right:24px;font-size:7px;letter-spacing:1px}.hero-foot span:last-child{display:none}}
@media(max-width:360px){.hero h1{font-size:50px}.hero-note{display:none}}
@media(prefers-reduced-motion:reduce){body::before,.glass-sheet,.sculpture-halo{animation:none}.album-card::before,.album-card::after{transition:none}.album-card::after{display:none}}

