*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#070506;color:#eee8e5;font-family:Inter,Arial,sans-serif;line-height:1.6}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background:radial-gradient(circle at 15% 10%,#53151e 0,transparent 27%),radial-gradient(circle at 85% 80%,#25101a 0,transparent 35%);z-index:-1}
a{color:inherit;text-decoration:none}
.site-header{height:62px;position:sticky;top:0;z-index:20;background:rgba(7,5,6,.94);backdrop-filter:blur(12px);border-bottom:1px solid #251b1e;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,68px)}
.brand{display:flex;align-items:center;width:118px;height:54px}.brand img{display:block;width:100%;height:50px;object-fit:contain;object-position:center}.footer-logo img{width:min(300px,70vw);height:auto;max-height:115px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.8))}
.desktop-nav{display:flex;gap:28px;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#b8aca9}
.desktop-nav a:hover{color:#fff}
.menu-button{display:none;background:transparent;border:1px solid #51474a;color:#fff;font-size:24px;padding:5px 12px}
.mobile-nav{display:none}
.hero{min-height:82vh;position:relative;display:grid;place-items:center;text-align:center;padding:90px 20px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url("assets/fondo-encaje-ecos-de-sal.png");background-size:cover;background-position:center;filter:brightness(.28) saturate(.8)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(70,12,23,.48),rgba(5,4,5,.9) 72%),linear-gradient(180deg,rgba(0,0,0,.18),#070506)}
.hero-content{position:relative;z-index:2;max-width:900px}
.hero-logo{width:min(210px,45vw);height:auto;max-height:210px;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.9));margin-bottom:8px}
.eyebrow,.kicker{font-size:10px;letter-spacing:.27em;color:#a9999a;text-transform:uppercase}
.hero h1{font:700 clamp(46px,10vw,110px)/.95 Cinzel,serif;letter-spacing:.15em;margin:16px 0 18px}
.tagline{color:#c4b9b7;font-size:14px}
.social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px 0 18px}
.social-row a{border:1px solid #40373a;padding:9px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:#0c090a}
.social-row a:hover{border-color:#a71b24}
.visit-counter{margin:16px auto 0;display:inline-flex;align-items:center;gap:14px;border:1px solid #3a3033;background:rgba(0,0,0,.3);padding:10px 16px;color:#a99d9e;font-size:9px;letter-spacing:.16em}
.visit-counter .counterapi{color:#eee;font-size:12px;letter-spacing:.08em}
.scroll-cue{position:absolute;bottom:30px;z-index:2;font-size:9px;letter-spacing:.25em;color:#9d9191}
.section{max-width:1080px;margin:auto;padding:100px 28px}
.section-alt{max-width:none;padding-left:max(28px,calc((100vw - 1080px)/2));padding-right:max(28px,calc((100vw - 1080px)/2));background:linear-gradient(90deg,#0d080a,#11090c,#0b0709)}
.section-heading{margin-bottom:38px}
.section-heading h2{font:600 clamp(34px,5vw,58px)/1.1 Cinzel,serif;margin:10px 0 14px}
.section-heading>p:last-child{max-width:700px;color:#a99f9e;margin:0}
.feature-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid #3b3033;background:rgba(5,4,5,.7);overflow:hidden}
.art-wrap,.painted-panel{min-height:490px}
.art-wrap img,.painted-panel img{display:block;width:100%;height:100%;object-fit:cover}
.copy{padding:54px;display:flex;flex-direction:column;justify-content:center}
.copy h3,.album-info h3{font:600 clamp(32px,4vw,50px)/1.1 Cinzel,serif;margin:14px 0 24px}
.copy p,.album-info p,.obsidian-copy p{color:#b7aeac;font-size:15px}
.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.button{border:1px solid #4c4043;padding:11px 16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.button.primary{background:#a61720;border-color:#a61720}
.button:hover{filter:brightness(1.15)}
.painted-placeholder{height:100%;min-height:490px;display:grid;place-items:center;text-align:center;padding:30px;background:radial-gradient(circle at 50% 35%,#122536,#05080b 68%),url("assets/fondo-encaje-ecos-de-sal.png");background-size:cover;color:#e8eef4}
.painted-placeholder span{font:600 clamp(34px,5vw,62px)/1.05 Cinzel,serif;letter-spacing:.06em;text-shadow:0 4px 20px #000}
.painted-placeholder small{display:block;max-width:300px;margin-top:20px;color:#aaa;font:12px Inter,sans-serif}
.album-layout{display:grid;grid-template-columns:46% 54%;border:1px solid #30282b;background:#0c090a;overflow:hidden}
.album-cover{min-height:500px}
.album-cover img{display:block;width:100%;height:100%;object-fit:cover}
.album-info{padding:60px;display:flex;flex-direction:column;justify-content:center}
.obsidian{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;background:linear-gradient(135deg,#0a090c,#16101a)}
.obsidian-art{min-height:500px;border:1px solid #342b3d;overflow:hidden}
.obsidian-art img{display:block;width:100%;height:100%;object-fit:cover}
.opera-tag{font-family:Cinzel,serif;color:#ddd1d2!important}
.release-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.release-card{border:1px solid #332a2d;background:#0d090a;min-height:310px;overflow:hidden}
.release-card>img{width:100%;height:220px;object-fit:cover;display:block}
.release-card>div{padding:18px}
.release-card h3{font:600 23px Cinzel,serif;margin:8px 0 14px}
.release-card a{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#c9bfc0}
.network-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.network-card{border:1px solid #332b2d;background:#0d090a;padding:24px;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;column-gap:16px;min-height:120px;align-items:center}
.network-card img{grid-row:1 / 3;width:54px;height:54px;object-fit:contain}
.network-card strong{font:600 22px Cinzel,serif}
.network-card span{color:#988d8e;font-size:12px}
.network-card:hover{border-color:#9b1b25;transform:translateY(-2px)}
.disabled{opacity:.65}
.merch-box{border:1px solid #3a3033;padding:55px;display:flex;justify-content:space-between;align-items:center;gap:40px;background:linear-gradient(100deg,#160c10,#0b0809);position:relative;overflow:hidden}.merch-copy{position:relative;z-index:2;max-width:760px}.merch-copy p:not(.eyebrow){color:#bdb1b0;max-width:650px;line-height:1.7}.shop-button{display:inline-block;margin-top:22px;border:1px solid #8f2028;background:#18090c;padding:14px 22px;color:#f1e8e7;font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:.2s}.shop-button:hover{background:#7f1820;border-color:#b8333d}.merch-mark{font:700 30px/.85 Cinzel,serif;letter-spacing:.12em;text-align:center;color:#d7ceca;opacity:.55;min-width:170px}.merch-mark span{font-size:20px}
.merch-box h2{font:600 38px Cinzel,serif;margin:10px 0}
.merch-box>span{border:1px solid #4b3d41;padding:13px 18px;font-size:9px;letter-spacing:.18em;white-space:nowrap;color:#a99d9e}
footer{text-align:center;padding:70px 24px 45px;border-top:1px solid #241c1f;color:#8f8585}
.footer-logo{color:#e7dedd;margin-bottom:14px}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:24px 0;font-size:11px}
footer small{font-size:10px}
code{color:#d7bfc3}
@media(max-width:800px){
 .desktop-nav{display:none}.menu-button{display:block}.mobile-nav{position:fixed;top:62px;right:0;left:0;z-index:19;background:#0a0809;border-bottom:1px solid #302629;padding:15px 24px;flex-direction:column;gap:14px;text-transform:uppercase;letter-spacing:.16em;font-size:10px}.mobile-nav.open{display:flex}
 .hero{min-height:76vh}.hero h1{letter-spacing:.08em}.section{padding:72px 20px}.section-alt{padding-left:20px;padding-right:20px}
 .feature-card,.album-layout,.obsidian{grid-template-columns:1fr}.art-wrap,.painted-panel,.painted-placeholder{min-height:auto;aspect-ratio:1}.copy,.album-info{padding:34px 24px}
 .release-grid,.network-grid{grid-template-columns:1fr}.merch-box{padding:34px 24px;display:block}.merch-box>span{display:inline-block;margin-top:22px}
}

@media(max-width:800px){
 .site-header{padding:0 18px}
 .brand{width:92px;height:54px}.brand img{height:48px}
 .merch-box{padding:34px 24px;display:block}
 .merch-box h2{font-size:29px}
 .merch-mark{display:none}
 .shop-button{width:100%;text-align:center;box-sizing:border-box}
}