/* =========================================================
   RAVR Music · estilos compartidos
   ========================================================= */
:root{
  --ink:#0C0E1F;
  --ink-2:#15183A;
  --paper:#EEEBF5;
  --muted:#9A9EC0;
  --line:rgba(238,235,245,.13);
  --falcon:#6FB8FF;
  --falcon-2:#D9ECFF;
  --velazium:#E9C77B;
  --velazium-deep:#15122E;
  --ravr:#B7FF5C;
  --ravr-2:#FF3EA5;
  --c:var(--paper);
  --ease:cubic-bezier(.2,.7,.1,1);
  --display:Unbounded,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:Manrope,system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
canvas.fx{position:absolute;inset:0;width:100%;height:100%;display:block}

.w-falcon{font-family:Unbounded,sans-serif;font-weight:900;letter-spacing:-.045em}
.w-velazium{font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;letter-spacing:-.01em}
.w-ravr{font-family:"Space Mono",monospace;font-weight:700;letter-spacing:-.04em}

/* ---------- Cabecera común ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-head.solid{background:rgba(12,14,31,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Unbounded,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.02em;color:#fff}
.site-head.solid .brand{color:var(--paper)}
.brand img{height:46px;width:auto}
.brand small{font-weight:400;opacity:.6;font-size:.8em;letter-spacing:0}
.site-head nav{display:flex;gap:26px}
.site-head nav a{text-decoration:none;font-weight:500;font-size:15px;color:rgba(255,255,255,.7);transition:color .2s}
.site-head.solid nav a{color:var(--muted)}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--c)}

/* =========================================================
   PORTADA
   ========================================================= */
.hub{display:flex;height:100svh;min-height:620px;background:#000}
.panel{position:relative;flex:1;overflow:hidden;text-decoration:none;isolation:isolate;transition:flex .8s var(--ease);border-right:1px solid rgba(255,255,255,.08)}
.panel:last-child{border-right:0}
.hub:hover .panel{flex:.75}
.hub .panel:hover,.hub .panel:focus-visible{flex:1.9}
.panel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 28%,transparent 48%,rgba(0,0,0,.8) 100%);pointer-events:none}
.panel-in{position:absolute;inset:auto 0 0;z-index:2;padding:0 32px 40px;display:flex;flex-direction:column;gap:14px}
.panel .mark{display:flex;align-items:flex-end;height:min(30vh,250px)}
.panel .mark img{max-height:100%;width:auto;max-width:min(100%,400px);object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));transition:transform .8s var(--ease)}
.panel:hover .mark img{transform:scale(1.04)}
.panel .mark.wide{height:min(18vh,150px)}
.panel .word{display:block;color:var(--c);font-size:clamp(34px,4.4vw,68px);line-height:.92;white-space:nowrap}
.panel .w-velazium{font-size:clamp(40px,5vw,80px)}
.panel-desc{color:rgba(255,255,255,.8);max-width:24em;opacity:0;transform:translateY(10px);transition:opacity .5s .1s,transform .5s .1s var(--ease)}
.panel-go{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--c);opacity:0;transform:translateY(10px);transition:opacity .5s .18s,transform .5s .18s var(--ease)}
.panel-go::before{content:"";width:28px;height:2px;background:currentColor;transition:width .4s var(--ease)}
.panel:hover .panel-desc,.panel:hover .panel-go,.panel:focus-visible .panel-desc,.panel:focus-visible .panel-go{opacity:1;transform:none}
.panel:hover .panel-go::before{width:48px}

.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--ink);padding:18px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee span{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(22px,3vw,36px);letter-spacing:-.02em;padding-right:48px;white-space:nowrap;color:var(--muted)}
.marquee span b{font-weight:inherit;color:var(--k)}
@keyframes marquee{to{transform:translateX(-50%)}}

.statement{padding:140px 0 120px}
.statement h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(36px,6.4vw,92px);line-height:1.02;letter-spacing:-.045em;max-width:13em}
.statement h2 .f{color:var(--falcon)}
.statement h2 .v{color:var(--velazium);font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;letter-spacing:-.01em}
.statement h2 .r{color:var(--ravr);font-family:"Space Mono",monospace;letter-spacing:-.06em}

.label-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding-bottom:140px}
.label-grid p{color:var(--muted);max-width:34em;margin-bottom:1.1em}
.label-grid p.lead{color:var(--paper);font-size:clamp(20px,2vw,24px);line-height:1.5}
.services{list-style:none;border-top:1px solid var(--line)}
.services li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.services strong{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}
.services span{color:var(--muted);text-align:right;font-size:15px}

.contact{position:relative;overflow:hidden;padding:140px 0;background:var(--ink-2)}
.contact h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(18px,1.6vw,22px);color:var(--muted);margin-bottom:24px;letter-spacing:-.01em}
.contact a.mail{position:relative;display:inline-block;font-family:Unbounded,sans-serif;font-weight:900;font-size:clamp(30px,7.4vw,112px);line-height:1;letter-spacing:-.05em;text-decoration:none;word-break:break-all;background:linear-gradient(90deg,var(--falcon),var(--velazium),var(--ravr)) left bottom/0% 6px no-repeat;padding-bottom:12px;transition:background-size .6s var(--ease)}
.contact a.mail:hover{background-size:100% 6px}
.contact p{color:var(--muted);margin-top:28px;max-width:30em}

footer{padding:32px 0;color:var(--muted);font-size:14px;border-top:1px solid var(--line);background:var(--ink)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}

/* =========================================================
   PÁGINAS DE ARTISTA
   ========================================================= */
.a-hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000;isolation:isolate}
.a-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 25%,transparent 50%,var(--hero-fade,rgba(0,0,0,.85)) 100%);pointer-events:none}
.a-hero-in{position:absolute;inset:auto 0 0;z-index:2;padding-bottom:56px}
.a-hero .mark img{max-height:min(46vh,420px);max-width:min(100%,760px);width:auto;filter:drop-shadow(0 20px 50px rgba(0,0,0,.7))}
.a-hero .mark.wide img{max-height:min(30vh,300px)}
.a-hero .word{display:block;color:var(--c);font-size:clamp(64px,15vw,240px);line-height:.85}
.a-hero .w-velazium{font-size:clamp(72px,15vw,250px);line-height:.82}
.a-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:28px}
.tagline{font-size:clamp(18px,1.9vw,23px);max-width:28em;color:#fff}
.btn{display:inline-flex;align-items:center;gap:12px;font-weight:700;text-decoration:none;padding:15px 26px;border-radius:999px;background:var(--c);color:var(--on-c,#0C0E1F);transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--c)}
.btn svg{width:16px;height:16px}

.a-sec{padding:120px 0}
.a-sec+.a-sec{border-top:1px solid var(--line)}
.sec-title{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,54px);letter-spacing:-.035em;line-height:1;margin-bottom:56px;color:var(--c)}

.story-grid{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:start}
.pull{position:sticky;top:110px;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,42px);line-height:1.12;letter-spacing:-.03em}
.pull::before{content:"";display:block;width:56px;height:4px;background:var(--c);margin-bottom:28px}
.story p{margin-bottom:1.2em;color:var(--muted)}
.story p:first-child{color:var(--paper);font-size:1.12em}

.listen{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.player{border-radius:16px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.player iframe{display:block;width:100%;height:352px;border:0}
.player-empty{height:352px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:32px;position:relative;overflow:hidden}
.player-empty .bars{position:absolute;inset:32px 32px auto;display:flex;align-items:flex-end;gap:4px;height:170px}
.player-empty .bars i{flex:1;background:var(--c);opacity:.85;border-radius:2px;height:var(--h);transform-origin:bottom;animation:eq var(--d) ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.player-empty strong{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.player-empty span{color:var(--muted);font-size:15px}
.platforms{list-style:none;border-top:1px solid var(--line)}
.platforms a{display:flex;justify-content:space-between;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;transition:color .25s,padding .35s var(--ease)}
.platforms a:hover{color:var(--c);padding-left:14px}
.platforms svg{width:22px;height:22px;flex:none;transition:transform .35s var(--ease)}
.platforms a:hover svg{transform:translate(4px,-4px)}
.platforms-note{color:var(--muted);font-size:15px;padding-top:18px}

.gallery{columns:3;column-gap:14px}
.gallery button{all:unset;cursor:zoom-in;display:block;width:100%;margin-bottom:14px;break-inside:avoid;border-radius:10px;overflow:hidden;position:relative;background:var(--ink-2)}
.gallery button:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.gallery img{width:100%;height:auto;transition:transform .7s var(--ease)}
.gallery button:hover img{transform:scale(1.04)}
.gallery .ph{display:grid;place-items:center;margin-bottom:14px;break-inside:avoid;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:10px;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--c) 7%,transparent) 14px 15px)}
.gallery .ph:nth-child(3n+1){aspect-ratio:4/5}
.gallery .ph:nth-child(3n+2){aspect-ratio:1}
.gallery .ph:nth-child(3n){aspect-ratio:3/4}

.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0}
.lightbox::backdrop{background:rgba(5,6,14,.92);backdrop-filter:blur(6px)}
.lightbox[open]{display:grid;place-items:center}
.lightbox img{max-width:min(92vw,1400px);max-height:86vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox button{position:fixed;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:24px;cursor:pointer}

.others{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.other{position:relative;height:340px;border-radius:18px;overflow:hidden;text-decoration:none;isolation:isolate;background:#000}
.other::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.8))}
.other-in{position:absolute;inset:auto 0 0;z-index:2;padding:28px}
.other .mark img{max-height:150px;max-width:70%;width:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.other .mark.wide img{max-height:90px}
.other p{color:rgba(255,255,255,.78);margin-top:10px}

/* ---------- Tema Falcon V ---------- */
body.falcon{--ink:#070B16;--ink-2:#0F1830;--c:var(--falcon);--on-c:#06101F}
body.falcon .site-head.solid{background:rgba(7,11,22,.85)}

/* ---------- Tema Plan VELAZIUM: héroe nocturno, cuerpo claro ---------- */
body.velazium{--ink:#F5EFE2;--ink-2:#ECE3CF;--paper:#251F14;--muted:#6F6450;--line:rgba(37,31,20,.15);--c:#94691A;--on-c:#FFF8E8}
body.velazium .a-hero{background:var(--velazium-deep);--hero-fade:rgba(21,18,46,.92)}
body.velazium .a-hero .word{color:var(--velazium)}
body.velazium .a-hero .btn{background:var(--velazium);color:#15122E}
body.velazium .site-head:not(.solid) nav a[aria-current]{color:var(--velazium)}
body.velazium .site-head.solid{background:rgba(245,239,226,.88)}
body.velazium .sec-title,body.velazium .pull{font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;letter-spacing:-.01em}
body.velazium .sec-title{font-size:clamp(42px,5vw,70px)}
body.velazium .pull{font-size:clamp(32px,3.6vw,52px);line-height:1.08}
body.velazium .story{font-family:"Cormorant Garamond",serif;font-size:22px;line-height:1.65}
body.velazium .platforms a{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(24px,2.4vw,32px)}
body.velazium .player-empty strong{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:28px}

/* ---------- Tema THE RAVR ---------- */
body.ravr{--ink:#070707;--ink-2:#121212;--muted:#8C8C8C;--line:rgba(255,255,255,.12);--c:var(--ravr);--on-c:#070707;--display:"Space Mono",monospace;font-family:"Space Mono",monospace;font-size:16px}
body.ravr .site-head.solid{background:rgba(7,7,7,.85)}
body.ravr .a-hero .word{animation:jitter 5s steps(1) infinite}
body.ravr .sec-title::before{content:"> ";color:var(--ravr-2)}
@keyframes jitter{0%,90%,100%{transform:none;text-shadow:none;clip-path:none}91%{transform:translate(-4px,1px);text-shadow:4px 0 var(--ravr-2),-4px 0 #3EE6FF}93%{transform:translate(3px,-1px);clip-path:inset(20% 0 35% 0)}95%{transform:none;clip-path:none;text-shadow:-2px 0 var(--ravr-2)}97%{text-shadow:none}}

/* ---------- Entrada al cargar ---------- */
.reveal{animation:rise 1.1s var(--ease) both}
.reveal-2{animation:rise 1.1s .15s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hub{flex-direction:column;height:auto;min-height:0}
  .panel{flex:none!important;height:62svh;min-height:380px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .panel-in{padding:0 20px 28px}
  .panel-desc,.panel-go{opacity:1;transform:none}
  .statement{padding:96px 0 72px}
  .label-grid,.story-grid,.listen{grid-template-columns:1fr;gap:40px}
  .label-grid{padding-bottom:96px}
  .pull{position:static}
  .a-sec{padding:88px 0}
  .gallery{columns:2}
  .others{grid-template-columns:1fr}
  .other{height:260px}
  .contact{padding:96px 0}
  .site-head nav{gap:16px}
}
@media (max-width:560px){
  .site-head nav a.opt{display:none}
  .gallery{columns:1}
  .services li{flex-direction:column;gap:4px}
  .services span{text-align:left}
  .player-empty .bars{height:120px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}