/* ═══════════════════════════════════════════════════════════════
   GRÄNDRØ — grandro.css — Full-screen SPA stylesheet
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bpm-speed:0.96s; /* 125 BPM default — updated live by JS to match the playing track */
  --c:#00C8E8;--c2:#00E8B4;
  --j1:#39FF14;--gold:#E8981E;--violet:#7B4FFF;
  --bg:#06060D;--bg2:#0C0C1A;--card:#111122;
  --w:#FFF;--l1:#C8D8E8;--l2:#608090;--l3:#2A3A4A;
  --fh:'Unbounded',sans-serif;
  --fb:'Space Grotesk',sans-serif;
  --dock-h:60px; /* mobile nav dock height — used by player and chat to sit above it */
  --fm:'DM Mono',monospace;
  --nav-h:58px;
}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--l1);font-family:var(--fb)}
a{text-decoration:none;color:inherit} button{cursor:pointer;font-family:var(--fb)}
img{display:block;max-width:100%}
::selection{background:var(--c);color:#000}

/* ── CURSOR TRAIL ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.h-deck:focus-visible,.h-planet:focus-visible,#chat-btn:focus-visible,.dock-btn:focus-visible,.nbtn:focus-visible{
  outline:2px solid var(--c);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .h-aura1,.h-aura2,.hm-jog-ring,.h-orbit-dot,.holo-scan,.chat-dot,#chat-btn,
  .gnote,#m-dock .dock-btn span,.hfc,.hf-live{animation:none !important}
  .h-aura2{animation:auraDrift 40s ease-in-out infinite !important}
  .hm-jog-ring{animation:moonSpin 14s linear infinite !important}
}
#cur-trail{position:fixed;inset:0;pointer-events:none;z-index:9990}
/* ── CURSOR PERSONALIZADO ÄØ ── */
body.gr-custom-cursor,body.gr-custom-cursor *{cursor:none !important}
#gr-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  font-family:var(--fh);font-weight:800;font-size:13px;color:var(--c);
  transform:translate(-100px,-100px);text-shadow:0 0 8px rgba(0,200,232,.7);
  margin-left:-4px;margin-top:-8px}
.gr-cursor-trail{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  font-family:var(--fh);font-weight:700;font-size:10px;color:rgba(0,200,232,.5);
  transform:translate(-100px,-100px);opacity:0;transition:transform .35s ease-out,opacity .3s;
  margin-left:-3px;margin-top:-6px}
.gr-click-ring{position:fixed;z-index:9997;width:6px;height:6px;margin:-3px;border-radius:50%;
  border:1.5px solid var(--c);pointer-events:none;animation:grClickRing .6s ease-out forwards}
@keyframes grClickRing{0%{width:6px;height:6px;margin:-3px;opacity:.9;border-width:2px}
  100%{width:90px;height:90px;margin:-45px;opacity:0;border-width:.5px}}
.gr-click-word{position:fixed;z-index:9997;pointer-events:none;font-family:var(--fh);
  font-weight:800;font-size:11px;color:var(--c);letter-spacing:.04em;margin:-22px 0 0 8px;
  text-shadow:0 0 8px rgba(0,200,232,.7);animation:grClickWord .7s ease-out forwards}
@keyframes grClickWord{0%{opacity:0;transform:translateY(4px) scale(.7)}
  25%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-14px) scale(1.05)}}
@media(max-width:768px){body.gr-custom-cursor,body.gr-custom-cursor *{cursor:auto !important}
  #gr-cursor,.gr-cursor-trail{display:none}}

/* ── COOKIE ── */
#ck{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(10px);z-index:3000;
    background:rgba(10,10,20,.92);backdrop-filter:blur(10px);
    border:1px solid rgba(0,200,232,.16);border-radius:30px;
    padding:9px 10px 9px 18px;display:none;opacity:0;transition:opacity .35s,transform .35s;
    max-width:min(92vw,520px);box-shadow:0 6px 24px rgba(0,0,0,.4)}
#ck.show{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
#ck.hide{opacity:0;transform:translateX(-50%) translateY(10px)}
.ck-r{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.ck-t{flex:1;min-width:0;font-size:11px;color:var(--l2);line-height:1.35}
.ck-b{display:flex;gap:6px;flex-shrink:0}
.ckb{padding:6px 13px;font-size:10px;font-weight:600;letter-spacing:.04em;border:none;border-radius:16px}
.ckb.y{background:var(--c);color:#000}
.ckb.n{background:transparent;color:var(--l2);border:1px solid rgba(255,255,255,.12)}
@media(max-width:600px){#ck{left:12px;right:12px;transform:translateY(10px);max-width:none;bottom:78px}
  #ck.show{transform:translateY(0)}#ck.hide{transform:translateY(10px)}
  .ck-t{font-size:10px}}

/* ── OVERLAY PLAYER ── */
#overlay{position:fixed;inset:0;z-index:6000;background:rgba(4,4,12,.97);
         display:none;align-items:center;justify-content:center;flex-direction:column}
#overlay.on{display:flex}
#ov-close{position:absolute;top:18px;right:22px;background:none;
          border:1px solid rgba(255,255,255,.12);color:var(--w);
          font-size:18px;width:38px;height:38px;border-radius:50%;cursor:pointer}
#ov-close:hover{border-color:var(--c);color:var(--c)}
#ov-lbl{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--l2);
        margin-bottom:12px;text-transform:uppercase}
#ov-content{width:min(900px,95vw)}
#ov-content iframe{width:100%;height:min(520px,72vh);border:none;display:block}

/* ── MINI PLAYER ── */
#mini-player{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:2900;
             width:min(560px,92vw);height:54px;background:rgba(8,8,18,.96);
             border:1px solid rgba(0,200,232,.28);border-radius:30px;
             display:flex;align-items:center;padding:0;
             backdrop-filter:blur(20px);box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 24px rgba(0,200,232,.12);
             transition:border-color .3s,box-shadow .3s,transform .4s cubic-bezier(.25,1,.5,1),bottom .4s}
/* Colapso suave — translateY saca el player de la vista dejando solo 12px de pestaña */
#mini-player.player-collapsed{transform:translateX(-50%) translateY(calc(100% - 12px))}
@media(max-width:768px){#mini-player.player-collapsed{transform:translateX(-50%) translateY(calc(100% - 12px))}}
/* Estado invitación — siempre visible por defecto, pulsa para llamar la atención */
.mp-invite{display:none;align-items:center;gap:12px;width:100%;height:100%;padding:0 20px;
           cursor:pointer;border-radius:30px}
/* #mini-player.invite-mode .mp-invite display:flex eliminado — #mp-invite removido del DOM */
#mini-player.invite-mode .mp-active{display:none}
#mini-player.invite-mode{animation:mpInvitePulse 3.4s ease-in-out infinite}
@keyframes mpInvitePulse{0%,100%{box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 24px rgba(0,200,232,.12)}
  50%{box-shadow:0 20px 44px rgba(0,0,0,.7),0 0 38px rgba(0,200,232,.32)}}
.mp-invite-icon{width:28px;height:28px;border-radius:50%;background:var(--c);color:#000;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;
  animation:mpIconPulse 2.2s ease-in-out infinite}
@keyframes mpIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.mp-invite-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.mp-invite-txt b{font-size:13px;font-weight:700;color:var(--w);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-invite-txt span{font-size:10px;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s}
.mp-invite-wave{display:flex;align-items:center;gap:2px;height:16px;flex-shrink:0}
.mp-invite-wave i{display:block;width:2.5px;background:var(--c);border-radius:1px;opacity:.7;
  animation:mpWaveBar 1.1s ease-in-out infinite}
.mp-invite-wave i:nth-child(1){height:6px;animation-delay:0s}
.mp-invite-wave i:nth-child(2){height:14px;animation-delay:.15s}
.mp-invite-wave i:nth-child(3){height:9px;animation-delay:.3s}
.mp-invite-wave i:nth-child(4){height:12px;animation-delay:.45s}
.mp-invite-queue{background:none;border:none;color:var(--l3);font-size:13px;padding:4px 6px;
  flex-shrink:0;transition:color .2s}
.mp-invite-queue:hover{color:var(--w)}
@keyframes mpWaveBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
#mini-player:hover.invite-mode{border-color:rgba(0,200,232,.5)}
/* Estado activo — track sonando */
.mp-active{display:none;align-items:center;gap:12px;width:100%;height:100%;padding:0 20px}
#mini-player:not(.invite-mode) .mp-active{display:flex}
.p-emoji{font-size:17px;flex-shrink:0}
.p-info{flex:1;min-width:0}
.p-name{font-size:13px;font-weight:700;color:var(--w);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-album{font-size:9px;color:var(--l2)}
.p-ctrl{display:flex;align-items:center;gap:6px;flex-shrink:0}
.p-btn{background:none;border:none;color:var(--l2);padding:6px;display:flex;align-items:center;
  justify-content:center;border-radius:4px;transition:color .2s,filter .2s}
.p-btn:hover{color:var(--w);filter:drop-shadow(0 0 5px var(--c))}
.p-btn:active{color:var(--c)}
.p-btn:hover{color:var(--w)}
.p-play-btn{background:var(--c);color:#000;border:none;border-radius:50%;
            width:28px;height:28px;display:flex;align-items:center;justify-content:center;
            font-size:11px;transition:background .2s}
.p-play-btn:hover{background:var(--c2)}
.p-bar-wrap{flex:1;max-width:180px;height:3px;background:rgba(255,255,255,.1);
            border-radius:3px;cursor:pointer}
.p-bar{height:100%;background:var(--c);border-radius:3px;width:0;transition:width .3s linear}
.p-x{background:none;border:none;color:var(--l3);font-size:13px;padding:3px;flex-shrink:0}
.p-collapse-btn{background:none;border:none;color:var(--l3);font-size:14px;
  padding:4px 6px;flex-shrink:0;transition:transform .25s,color .2s;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.p-collapse-btn:hover{color:var(--w)}
/* Floating peek-tab visible when player is collapsed — lets user know it's there */
#mini-player.player-collapsed:not(.invite-mode)::before{
  content:attr(data-dp-label) !important;
  font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:#000;background:var(--c);
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  border:1px solid var(--c);padding:4px 16px;
  border-radius:20px 20px 0 0;white-space:nowrap;
  box-shadow:0 -4px 12px rgba(0,200,232,.3);cursor:pointer}
@media(max-width:768px){
  #mini-player.player-collapsed{
    height:12px !important;
    border-color:rgba(0,200,232,.15);
    background:rgba(8,8,18,.98)}}
@media(max-width:768px){
  .mp-active.collapsed .p-info,.mp-active.collapsed .p-bar-wrap,
  .mp-active.collapsed .p-queue-btn,.mp-active.collapsed .p-x,.mp-active.collapsed .p-emoji{
    display:none}
  .mp-active.collapsed{justify-content:center;gap:14px}
  .mp-active.collapsed .p-collapse-btn{transform:rotate(180deg)}
  #mini-player.player-collapsed{padding:0 8px}
}
.p-x:hover{color:var(--w)}
.p-queue-btn{font-size:12px}
#mp-queue{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:min(320px,90vw);max-height:340px;overflow-y:auto;background:rgba(8,8,18,.98);
  border:1px solid rgba(0,200,232,.22);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.6);
  padding:8px;scrollbar-width:thin;scrollbar-color:rgba(0,200,232,.2) transparent}
#mp-queue.on{display:block}
.mpq-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  cursor:pointer;transition:background .15s}
.mpq-row:hover{background:rgba(0,200,232,.08)}
.mpq-row.playing{background:rgba(0,200,232,.12)}
.mpq-num{font-family:var(--fm);font-size:10px;color:var(--l3);width:16px;flex-shrink:0}
.mpq-row.playing .mpq-num{color:var(--c)}
.mpq-emoji{font-size:15px;flex-shrink:0}
.mpq-info{flex:1;min-width:0}
.mpq-name{font-size:12px;font-weight:700;color:var(--w);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpq-meta{font-size:9px;color:var(--l2)}
.mpq-socials{display:flex;justify-content:center;gap:14px;padding:14px 10px 6px;
  margin-top:6px;border-top:1px solid rgba(255,255,255,.08)}
.mpq-socials a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.04);transition:transform .2s,background .2s}
.mpq-socials a:hover,.mpq-socials a:active{background:rgba(255,255,255,.1);transform:scale(1.1)}
@media(max-width:768px){#mp-queue{max-height:280px}}
@media (prefers-reduced-motion:reduce){#mini-player.invite-mode{animation:none}.mp-invite-icon{animation:none}.mp-invite-wave i{animation:none}}

/* ── CHAT ── */
#chat-btn{position:fixed;bottom:16px;right:20px;z-index:2800;
          height:46px;padding:0 16px 0 13px;background:var(--card);
          border:1px solid rgba(0,200,232,.25);border-radius:30px;
          display:flex;align-items:center;gap:9px;
          cursor:pointer;transition:all .3s;
          box-shadow:0 0 0 0 rgba(0,200,232,.25);animation:chatPulseRing 2.6s ease-out infinite}
#chat-btn:hover{border-color:var(--c);box-shadow:0 0 20px rgba(0,200,232,.25)}
#chat-btn.has-msg{border-color:var(--c);animation:chatPulseRing 1.1s ease-out infinite}
#chat-btn.has-msg .chat-dot{animation:chatBlink .9s ease-in-out infinite;width:11px;height:11px}
.chat-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;
             border:1px solid rgba(0,200,232,.4);box-shadow:0 0 8px rgba(0,200,232,.3)}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-cta{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--l1);white-space:nowrap;display:flex;align-items:center;gap:5px;
  transition:opacity .22s;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.chat-cta.swap{opacity:0}
@media (prefers-reduced-motion:reduce){.chat-cta{transition:none}}
.chat-iso{font-family:var(--fh);color:var(--w);font-size:10px;letter-spacing:0;font-weight:800}
.chat-eq{display:flex;align-items:flex-end;gap:2px;height:12px;flex-shrink:0}
.chat-eq i{width:2.5px;background:var(--c);border-radius:1px;display:block;
           animation:chatEqBar .9s ease-in-out infinite}
.chat-eq i:nth-child(1){height:5px;animation-delay:0s}
.chat-eq i:nth-child(2){height:10px;animation-delay:.15s}
.chat-eq i:nth-child(3){height:7px;animation-delay:.3s}
@keyframes chatEqBar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes chatPulseRing{0%{box-shadow:0 0 0 0 rgba(0,200,232,.22)}70%{box-shadow:0 0 0 9px rgba(0,200,232,0)}100%{box-shadow:0 0 0 0 rgba(0,200,232,0)}}
@media(max-width:600px){.chat-cta{display:none}#chat-btn{width:46px;height:46px;padding:0;border-radius:50%;justify-content:center}.chat-eq{display:none}}
.chat-dot{position:absolute;top:-1px;right:-1px;width:9px;height:9px;
          background:var(--c);border-radius:50%;border:2px solid var(--bg);
          animation:chatBlink 2.5s ease-in-out infinite}
@keyframes chatBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
#chat-box{position:fixed;bottom:75px;right:20px;z-index:2800;
          width:min(340px,calc(100vw - 40px));background:rgba(8,8,22,.98);
          border:1px solid rgba(0,200,232,.14);display:none;flex-direction:column;
          max-height:min(560px,72vh);box-shadow:0 8px 40px rgba(0,0,0,.5)}
#chat-box.on{display:flex}
@media(max-width:768px){#chat-box{max-height:min(460px,62vh)}}
.ch{background:rgba(0,200,232,.05);border-bottom:1px solid rgba(0,200,232,.07);
    padding:10px 13px;display:flex;justify-content:space-between;align-items:center}
.ch h4{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--c);text-transform:uppercase}
.ch-actions{display:flex;align-items:center;gap:10px}
.ch-anim-toggle{background:none;border:1px solid rgba(255,255,255,.12);border-radius:5px;
  color:var(--l2);font-size:12px;padding:3px 6px;cursor:pointer;transition:all .2s}
.ch-anim-toggle:hover{border-color:var(--c);color:var(--w)}
.ch-anim-toggle[aria-checked="true"]{border-color:var(--cardboard);background:rgba(154,107,60,.15)}
.ch-anim-toggle.tapped{animation:chToggleTap .35s ease-out}
@keyframes chToggleTap{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ch-anim-toggle.tapped{animation:none}}
.ch-x{background:none;border:none;color:var(--l2);font-size:15px;cursor:pointer}
.ch-x:hover{color:var(--w)}
#chat-msgs{padding:11px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1}
.cm{font-size:12px;line-height:1.5;padding:7px 10px;max-width:94%}
.cm.bot{background:rgba(0,200,232,.04);border:1px solid rgba(0,200,232,.07);
        color:var(--l1);align-self:flex-start;border-radius:0 7px 7px 7px}
.cm.usr{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
        color:var(--w);align-self:flex-end;border-radius:7px 0 7px 7px}
#chat-opts{padding:0 11px 11px;display:flex;flex-direction:column;gap:4px}
.co{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
    padding:7px 10px;font-size:11px;color:var(--l1);cursor:pointer;text-align:left;transition:all .2s}
.co:hover{border-color:rgba(0,200,232,.22);color:var(--w);background:rgba(0,200,232,.03)}
.co-play-cta{width:100%;text-align:center !important;border-color:rgba(0,200,232,.4) !important;
  color:var(--c) !important;font-family:var(--fm);font-weight:700;letter-spacing:.08em;
  background:rgba(0,200,232,.04) !important;margin-top:6px;
  box-shadow:0 0 8px rgba(0,200,232,.1)}
.co-play-cta:hover{background:var(--c) !important;color:#000 !important;
  box-shadow:0 0 16px rgba(0,200,232,.4)}
.cm.bot[data-typing="true"]::after{content:'▋';font-family:var(--fm);color:var(--c);margin-left:2px;animation:hmLed .6s infinite}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:300;height:var(--nav-h);
     background:rgba(6,6,13,.94);backdrop-filter:blur(20px);
     border-bottom:1px solid rgba(255,255,255,.045);
     display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;gap:10px}
.nav-left{display:flex;align-items:center;justify-self:start;min-width:0}
.nav-right{display:flex;align-items:center;gap:10px;justify-self:end;min-width:0}
.nlogo{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:-.02em;
       color:var(--w);flex-shrink:0;white-space:nowrap;display:inline-flex}
/* ── GPU-DRIVEN KICK ANIMATION (spec §2.1) ──
   La transformación la maneja el motor CSS desde las vars que inyecta el rAF.
   will-change crea una capa compositeada en GPU → 0 recalculos de layout. */
.lg-l{display:inline-block;
  transform:scale(var(--gr-kick-scale,1));
  opacity:calc(0.7 + var(--gr-kick-opacity,0) * 0.3);
  will-change:transform,opacity;
  transition:color .2s,transform 0.08s cubic-bezier(.25,1,.5,1),opacity 0.12s ease-out}
.lg-l.lg-a,.lg-l.lg-o{color:var(--c)}

/* ── COLOR ASIMÉTRICO LOGO ─────────────────────────────────────────────────
   Selector corregido: .lg-l.letter-w / .lg-l.letter-c
   Cubre NAV logo (.nlogo .lg-l) y HERO h1 (.h-name .lg-l) con !important
   para sobrevivir cualquier override de JS de color de track. */
.lg-l.letter-w{color:#FFFFFF !important}
.lg-l.letter-c{color:var(--c) !important}
/* Fuerza extra en contexto nav para anular herencia de track-color */
.nlogo .lg-l{color:#FFFFFF !important}
.nlogo .lg-l.lg-a,
.nlogo .lg-l.lg-o,
.nlogo .lg-l.letter-c{color:var(--c) !important}

/* Scattered: subtle vertical displacement + opacity fade, no horizontal to prevent line breaks */
.h-name.letters-scattered .lg-l:nth-child(1){transform:translateY(-6px) scale(.92);opacity:.25}
.h-name.letters-scattered .lg-l:nth-child(2){transform:translateY(8px) scale(.94);opacity:.25}
.h-name.letters-scattered .lg-l:nth-child(3){transform:translateY(-10px) scale(.9);opacity:.35;color:var(--c)}
.h-name.letters-scattered .lg-l:nth-child(4){transform:translateY(6px) scale(.92);opacity:.25}
.h-name.letters-scattered .lg-l:nth-child(5){transform:translateY(-8px) scale(.94);opacity:.25}
.h-name.letters-scattered .lg-l:nth-child(6){transform:translateY(10px) scale(.92);opacity:.25}
.h-name.letters-scattered .lg-l:nth-child(7){transform:translateY(-6px) scale(.9);opacity:.35;color:var(--c)}

/* Converged state — fully assembled, glowing */
.h-name .lg-l{transform:translate(0,0) rotate(0deg);opacity:1}

/* Hover: individual letter magnetic repulsion — desktop only */
@media(min-width:769px){
  .lg-l:hover{transform:translateY(-6px) scale(1.18);color:var(--c);
    text-shadow:0 0 20px rgba(0,200,232,.8),0 0 40px rgba(0,200,232,.4)}
  .h-name:hover .lg-l:not(:hover){transform:translateY(3px) scale(.96);
    filter:brightness(.7)}
}
@media (prefers-reduced-motion:reduce){.lg-l,.h-name.letters-scattered .lg-l{transform:none !important;opacity:1 !important}}
.nlinks{display:flex;gap:2px;align-items:center;justify-content:center;
  min-width:0;overflow:hidden}
.nav-socials-mobile{display:none} /* desktop: hidden, social dock handles it */
@media(max-width:768px){
  .nav-socials-mobile{display:flex;align-items:center;gap:12px;margin-left:4px}
  .nsm-link{display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;color:rgba(255,255,255,.65);transition:color .2s}
  .nsm-link:active,.nsm-link:hover{color:var(--c)}
}
.nbtn{padding:5px 11px;font-size:10px;font-weight:600;letter-spacing:.06em;
      text-transform:uppercase;background:transparent;
      border:1px solid transparent;color:var(--l2);border-radius:2px;
      transition:all .2s;white-space:nowrap}
.nbtn:hover{color:var(--w);border-color:rgba(255,255,255,.09)}
.nbtn.active{background:rgba(0,200,232,.09);border-color:rgba(0,200,232,.25);color:var(--c)}
.lang-panel{position:relative;flex-shrink:0}
#lang-toggle-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:5px;padding:4px;cursor:pointer;display:flex;align-items:center;transition:all .2s}
#lang-toggle-btn:hover{border-color:var(--c);background:rgba(0,200,232,.08)}
.lang-pop{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:600;min-width:150px;
  background:rgba(10,9,12,.98);border:1px solid rgba(0,200,232,.18);border-radius:8px;
  padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.55);flex-direction:column;gap:2px}
.lang-pop.on{display:flex}
.lf-btn{background:none;border:1px solid transparent;border-radius:5px;
  padding:7px 9px;cursor:pointer;opacity:.7;transition:all .15s;display:flex;align-items:center;gap:9px;width:100%}
.lf-btn:hover{opacity:1;background:rgba(255,255,255,.06)}
.lf-btn.active{opacity:1;background:rgba(0,200,232,.1)}
.lf-name{font-family:var(--fb);font-size:12px;color:var(--l1);font-weight:500}
.lf-btn.active .lf-name{color:var(--w);font-weight:700}
.flag{display:inline-block;width:24px;height:17px;border-radius:2px;flex-shrink:0;
  box-shadow:0 0 0 .5px rgba(255,255,255,.25);position:relative;overflow:hidden}
/* Argentina — celeste/blanco/celeste con sol */
.flag-es{background:linear-gradient(to bottom,#6CACE4 0%,#6CACE4 33.3%,#fff 33.3%,#fff 66.6%,#6CACE4 66.6%,#6CACE4 100%);position:relative}
.flag-es::after{content:'';position:absolute;top:50%;left:50%;width:26%;height:26%;
  transform:translate(-50%,-50%);border-radius:50%;background:#F6B40E}
/* Catalunya — señera, 9 franjas amarillo/rojo */
.flag-ca{background:linear-gradient(to bottom,
    #FCDD09 0%,#FCDD09 11.11%, #DA121A 11.11%,#DA121A 22.22%, #FCDD09 22.22%,#FCDD09 33.33%, #DA121A 33.33%,#DA121A 44.44%,
    #FCDD09 44.44%,#FCDD09 55.55%, #DA121A 55.55%,#DA121A 66.66%, #FCDD09 66.66%,#FCDD09 77.77%, #DA121A 77.77%,#DA121A 88.88%,
    #FCDD09 88.88%,#FCDD09 100%)}
/* USA — 7 franjas roja/blanca + cantón azul */
.flag-en{background:#fff}
.flag-en::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
  background-image:linear-gradient(#3C3B6E,#3C3B6E),
    linear-gradient(to bottom,#B22234 0%,#B22234 14.3%,#fff 14.3%,#fff 28.6%,#B22234 28.6%,#B22234 42.9%,#fff 42.9%,#fff 57.1%,
      #B22234 57.1%,#B22234 71.4%,#fff 71.4%,#fff 85.7%,#B22234 85.7%,#B22234 100%);
  background-size:42% 58%,100% 100%;background-position:top left,center;background-repeat:no-repeat,no-repeat}
/* Serbia — rojo/azul/blanco horizontal */
.flag-sr{background:linear-gradient(to bottom,#C6363C 0%,#C6363C 33.3%,#0C4076 33.3%,#0C4076 66.6%,#fff 66.6%,#fff 100%)}
/* Deutsch (mezcla Alemania + Austria, diagonal) */
.flag-de{background:#fff}
.flag-de::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
  clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(to bottom,#000 0%,#000 33.3%,#DD0000 33.3%,#DD0000 66.6%,#FFCE00 66.6%,#FFCE00 100%)}
.flag-de::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,#ED2939 0%,#ED2939 33.3%,#fff 33.3%,#fff 66.6%,#ED2939 66.6%,#ED2939 100%)}
@media(max-width:600px){.flag{width:20px;height:14px}}
/* ── ACCESIBILIDAD Y PRIVACIDAD — un solo control, igual en todas las páginas ── */
.a11y-panel{position:relative;flex-shrink:0}
#safe-mode-btn{font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:.06em;
  color:var(--l2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  padding:6px 12px;border-radius:3px;cursor:pointer;transition:all .2s}
#safe-mode-btn:hover{color:var(--c);border-color:var(--c);background:rgba(0,200,232,.08)}
.a11y-pop{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:600;width:270px;
  background:rgba(10,9,12,.98);border:1px solid rgba(0,200,232,.18);border-radius:8px;
  padding:14px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.a11y-pop.on{display:block}
.a11y-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--pink,#FF3B6B);background:linear-gradient(135deg,#FF3B6B,#E0245E);
  border:none;border-radius:6px;padding:13px 10px;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 14px rgba(255,59,107,.3)}
.a11y-action-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,59,107,.45)}
.a11y-action-icon{font-size:16px}
.a11y-action-txt{font-family:var(--fh);font-size:11.5px;font-weight:800;color:#fff;letter-spacing:.04em}
.a11y-action-btn[aria-checked="true"]{background:linear-gradient(135deg,var(--c),var(--c2));
  box-shadow:0 4px 14px rgba(0,200,232,.35)}
.a11y-action-btn[aria-checked="true"]:hover{box-shadow:0 6px 18px rgba(0,200,232,.5)}
.a11y-action-btn[aria-checked="true"] .a11y-action-txt{color:#000}
.a11y-divider{height:1px;background:rgba(255,255,255,.08);margin:12px 0}
.a11y-privacy{font-family:var(--fb);font-size:10.5px;color:var(--l2);line-height:1.55;max-width:240px}
.a11y-privacy a{color:var(--c);text-decoration:none}
.a11y-privacy a:hover{text-decoration:underline}
@media(max-width:600px){.a11y-pop{width:230px}}
.nbtn.book-btn{background:var(--c);color:#000;border-color:var(--c);font-weight:800;
  animation:bookBtnPulse 2.4s ease-in-out infinite}
@keyframes bookBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,200,232,.4)}50%{box-shadow:0 0 0 5px rgba(0,200,232,0)}}
@media (prefers-reduced-motion:reduce){.nbtn.book-btn{animation:none}}
.nbtn.book-btn:hover{background:var(--c2)}
@media(max-width:900px){.nbtn.hide-m{display:none}}
@media(max-width:768px){
  /* El header queda liviano: logo + Álbum Debut + Reservar + idioma + accesibilidad */
  :root{--nav-h:46px}
  #safe-mode-btn{padding:5px 8px;font-size:13px}
  #lang-toggle-btn{padding:3px}
  .nlinks{gap:6px}
  .nlinks .nbtn{font-size:9px;padding:5px 8px;color:rgba(255,255,255,.75)}
  .nlinks .nbtn.active{color:var(--c)}
}
@media(max-width:600px){#nav{padding:0 14px}.nlogo{font-size:13px}}

/* ── SECTION SYSTEM ── */
.section{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
         overflow:hidden;opacity:0;pointer-events:none;
         transition:opacity .55s ease, transform .5s cubic-bezier(.25,1,.5,1);
         display:flex;z-index:10}
.section.active{opacity:1;pointer-events:all;z-index:20}
.section canvas.bg{position:absolute;inset:0;width:100%;height:100%}
.sec-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.4) saturate(.85);
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(0,200,232,.12),transparent 60%),
    linear-gradient(160deg,#0a0a14,#050507 70%)}
.section canvas.bg{z-index:1}
.section-inner{position:relative;z-index:2;width:100%;height:100%;
               display:flex;overflow:hidden}
@media(max-width:768px){
  /* CRÍTICO: en mobile el contenido suele ser más alto que la pantalla disponible —
     sin esto, todo lo que no entra en el primer pantallazo queda inalcanzable */
  .section{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .section-inner{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100%;
    -webkit-overflow-scrolling:touch;padding-bottom:max(180px,env(safe-area-inset-bottom,0px))}
  /* El mismo bug que encontramos en CARTØN: contenido centrado verticalmente + overflow
     hace que la parte de ARRIBA quede matemáticamente fuera del scroll alcanzable.
     En mobile, todo arranca arriba y crece hacia abajo — nunca centrado. */
  .albs-gate,#s-press .section-inner,#s-connect .section-inner{align-items:flex-start !important;
    padding-top:calc(var(--nav-h) + 20px)}
  #s-connect .section-inner{padding-bottom:max(220px,env(safe-area-inset-bottom,0px)) !important}
}

/* ── SHARED TYPOGRAPHY ── */
.s-lbl{font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
       display:flex;align-items:center;gap:8px}
.s-lbl::before{content:'';width:13px;height:1.5px;flex-shrink:0}
.s-ttl{font-family:var(--fh);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--w)}

/* ── LEGAL BAR ── */
.legal-bar{position:fixed;bottom:0;left:0;right:0;z-index:1800;
           background:rgba(4,4,10,.98);border-top:1px solid rgba(255,255,255,.04);
           padding:6px 22px;display:flex;flex-wrap:wrap;gap:2px 12px;
           align-items:center;justify-content:center}
@media(max-width:768px){.legal-bar{display:none}}
.legal-bar a{font-size:8px;font-weight:500;letter-spacing:.08em;
             text-transform:uppercase;color:#8A9AB0;transition:color .2s}
.legal-bar a:hover{color:var(--c)}
.legal-bar .lsp{width:1px;height:6px;background:rgba(255,255,255,.12)}

/* ── FLOAT BOOK ── */
/* ── MOBILE DOCK NAV — thumb-friendly bottom bar ── */
#m-dock{display:none}
@media(max-width:768px){
  #m-dock{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9999;
          background:rgba(8,8,18,.96);backdrop-filter:blur(16px);
          border-top:1px solid rgba(0,200,232,.12);padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));
          justify-content:space-around;align-items:center}
  .dock-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;
            gap:2px;color:rgba(255,255,255,.7);padding:4px 6px;flex:1;transition:color .2s,opacity .2s;
            min-height:44px;justify-content:center}
  .dock-btn svg{width:22px;height:22px;stroke:currentColor;opacity:.7;
    transition:filter .2s,transform .2s,opacity .2s}
  .dock-carton-icon{opacity:.7;transition:filter .2s,transform .2s,opacity .2s;display:flex}
  .dock-btn i{font-style:normal;font-size:8px;font-weight:600;letter-spacing:.03em;font-family:var(--fm)}
  .dock-btn.active{color:var(--c)}
  .dock-btn.active svg,.dock-btn.active .dock-carton-icon{opacity:1;transform:translateY(-2px) scale(1.1);
    filter:drop-shadow(0 0 5px var(--c))}
  /* Bandas verticales separadas — el reproductor ocupa casi todo el ancho, así que todo lo demás
     vive en una franja MÁS ALTA, nunca a la misma altura, para que nunca se toquen */
  /* FIX POSICIONAMIENTO REPRODUCTOR — se eleva sobre el dock con calc(--dock-h)
     74% ancho izquierda + 18% chat derecha = sin colisión, sin caerse detrás del nav */
  #mini-player{position:fixed !important;
    left:4% !important;right:auto !important;
    width:74% !important;
    height:var(--dock-h,60px) !important;
    bottom:calc(var(--dock-h) + 16px) !important;
    transform:none !important;
    border-radius:8px;
    border:1px solid rgba(0,200,232,.18);
    box-shadow:0 4px 24px rgba(0,0,0,.65);
    background:rgba(13,11,8,.95);backdrop-filter:blur(10px);
    z-index:2900 !important;
    transition:opacity .3s}
  /* Invite-mode: compact 32px strip, always visible above dock */
  #mini-player.invite-mode{height:32px;background:rgba(13,11,8,.92);cursor:pointer;
    border-color:rgba(0,200,232,.28);border-radius:8px;
    bottom:calc(var(--dock-h) + 16px) !important}
  /* mp-invite removido del DOM — reglas limpiadas */
  #mini-player.invite-mode #mp-active{display:none}
  /* Collapsed: slides below the dock edge, shows just the peek tab above it */
  #mini-player.player-collapsed{transform:translateY(calc(100% - 12px))}
/* ── DESKTOP: restaurar posicionamiento original (sin dock inferior) ── */
@media(min-width:769px){
  #mini-player{position:fixed !important;left:50% !important;right:auto !important;
    transform:translateX(-50%) !important;width:min(560px,92vw) !important;
    bottom:36px !important;height:52px !important;border-radius:12px !important;z-index:2900 !important}
  #chat-btn{position:fixed !important;right:20px !important;bottom:16px !important;
    width:auto !important;min-width:0 !important;max-width:none !important;z-index:2900 !important}
  #chat-box{bottom:75px !important;right:20px !important;z-index:3000 !important}
}
  /* Chat btn: columna derecha, perfectamente alineado con el player */
  #chat-btn{position:fixed !important;
    right:4% !important;bottom:calc(var(--dock-h) + 20px) !important;
    width:18% !important;min-width:50px !important;max-width:80px !important;
    z-index:2900 !important}
  #chat-box{bottom:calc(var(--dock-h) + 75px) !important;right:4% !important;z-index:3000 !important;max-height:min(50vh,380px)}
  .mp-invite-tap-label{display:none}
  #mini-player.invite-mode .mp-invite-tap-label{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:32px;font-family:var(--fm);font-size:8.5px;font-weight:700;
    letter-spacing:.14em;color:rgba(0,200,232,.75);pointer-events:none;
    position:absolute;left:0;top:0;white-space:nowrap}
}
#social-dock{position:fixed;bottom:16px;left:16px;z-index:2700;display:flex;
  flex-direction:column;align-items:flex-start;gap:7px}
@media(min-width:861px){
  #social-dock{left:24px;bottom:16px}
}
#listen-now-btn{background:var(--c);color:#000;border:none;padding:10px 18px;font-size:11px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  clip-path:polygon(7px 0%,100% 0%,100% calc(100% - 7px),calc(100% - 7px) 100%,0% 100%,0% 7px);
  box-shadow:0 0 16px rgba(0,200,232,.3);transition:all .2s;animation:listenPulse 2.8s ease-in-out infinite;
  min-height:44px}
#listen-now-btn:hover{background:var(--c2);transform:translateY(-2px)}
@keyframes listenPulse{0%,100%{box-shadow:0 0 16px rgba(0,200,232,.3)}50%{box-shadow:0 0 26px rgba(0,200,232,.5)}}
.sd-socials{display:flex;gap:6px;background:rgba(8,8,18,.85);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:6px 9px}
.sd-socials a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  opacity:.75;transition:opacity .2s,transform .2s}
.sd-socials a:hover{opacity:1;transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){#listen-now-btn{animation:none}}
@media(max-width:768px){
  /* Redes ahora viven en el nav top — social-dock solo en desktop */
  #social-dock{display:none}
  #listen-now-btn{display:none}
}

/* ── MODALS (shared) ── */
.modal{position:fixed;inset:0;z-index:5000;background:rgba(4,4,12,.97);
       display:none;align-items:center;justify-content:center;padding:18px}
.modal.on{display:flex}
.modal-box{background:var(--card);border:1px solid rgba(0,200,232,.09);
           max-width:580px;width:100%;max-height:88vh;overflow-y:auto;position:relative}
.modal-x{position:absolute;top:11px;right:11px;background:none;
          border:1px solid rgba(255,255,255,.09);color:var(--w);
          font-size:15px;width:30px;height:30px;border-radius:50%;cursor:pointer;z-index:2}
.modal-x:hover{border-color:var(--c);color:var(--c)}
.modal-hd{padding:22px 22px 15px;border-bottom:1px solid rgba(255,255,255,.05)}
.modal-num{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:5px}
.modal-name{font-family:var(--fh);font-size:clamp(26px,5vw,44px);font-weight:800;
            letter-spacing:-.03em;line-height:.9;margin-bottom:6px}
.modal-meta{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.modal-bd{padding:18px 22px}
.modal-feel{font-family:'Cormorant Garamond',serif;font-style:italic;
            font-size:clamp(14px,2vw,19px);color:rgba(255,255,255,.28);
            line-height:1.55;border-left:2px solid;padding-left:13px;margin-bottom:14px}
.modal-story{font-size:14px;color:var(--l1);line-height:1.8;font-weight:300}
.modal-ft{padding:0 22px 18px;display:flex;gap:7px}
.modal-btn{flex:1;padding:10px;font-size:11px;font-weight:700;letter-spacing:.06em;
           text-transform:uppercase;border:none;cursor:pointer;transition:.2s;text-align:center;display:block}
.modal-btn.p{background:var(--c);color:#000}.modal-btn.p:hover{background:var(--c2)}
.modal-btn.s{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--l1)}
.modal-btn.s:hover{border-color:var(--c);color:var(--c)}

/* Interview */
.iv-lbl{font-size:9px;font-weight:600;letter-spacing:.24em;color:var(--c);text-transform:uppercase;margin-bottom:7px}
.iv-ttl{font-family:var(--fh);font-size:clamp(20px,4vw,36px);font-weight:800;color:var(--w);letter-spacing:-.02em;margin-bottom:22px}
.iv-q{margin-bottom:20px;border-left:2px solid var(--c);padding-left:13px}
.iv-q .q{font-size:13px;font-weight:700;color:var(--w);margin-bottom:6px}
.iv-q .a{font-size:13px;color:var(--l1);line-height:1.75;font-weight:300}
.mf-p{font-size:14px;color:var(--l1);line-height:1.85;font-weight:300;margin-bottom:16px}
.mf-sign{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--c);margin-top:6px;letter-spacing:.04em}

/* ── EL VIAJE COMPLETO — easter egg al escuchar las 10 canciones de CARTØN ── */
.journey-modal{background:rgba(4,3,2,.97)}
.journey-box{max-width:480px;border:1px solid rgba(232,152,30,.25);position:relative;z-index:2;
  background:radial-gradient(ellipse 120% 100% at 50% 0%,rgba(232,152,30,.08),var(--card) 60%);
  box-shadow:0 0 60px -10px rgba(232,152,30,.25)}
.journey-icon{font-size:30px;color:var(--gold);margin-bottom:10px;
  animation:journeyIconSpin 6s linear infinite,journeyIconGlow 2.4s ease-in-out infinite}
@keyframes journeyIconSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes journeyIconGlow{0%,100%{text-shadow:0 0 10px rgba(232,152,30,.4)}50%{text-shadow:0 0 24px rgba(232,152,30,.9)}}
.journey-ttl{font-family:var(--fh);font-size:clamp(22px,5vw,30px);font-weight:800;color:var(--w);
  letter-spacing:-.02em;line-height:1.15;margin:6px 0}
#journey-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.jp{position:absolute;top:-12px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px 1px rgba(232,152,30,.7);
  animation:jpFall linear forwards;opacity:0}
@keyframes jpFall{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  8%{opacity:1}
  100%{opacity:0;transform:translate(var(--jx),112vh) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .journey-icon{animation:none}
  .jp{display:none}
}
.journey-name-row{margin-top:8px}
#journey-name-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:10px 13px;font-family:var(--fb);font-size:13px;color:var(--w);
  text-align:center;transition:border-color .2s}
#journey-name-input::placeholder{color:var(--l3)}
#journey-name-input:focus{outline:none;border-color:rgba(232,152,30,.5);background:rgba(255,255,255,.06)}
.journey-dl-btn{display:block;width:100%;margin-top:12px;background:linear-gradient(135deg,#E8981E,#c97c10);
  color:#000;border:none;border-radius:6px;padding:13px 10px;font-family:var(--fh);font-size:13px;
  font-weight:800;letter-spacing:.03em;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 16px rgba(232,152,30,.3)}
.journey-dl-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(232,152,30,.45)}
/* ── GRÄNDRØ HYPNOTIC PORTAL — wormhole transition between sections ── */
#gr-hypnotic-portal{position:fixed;inset:0;z-index:99000;pointer-events:none;
  opacity:0;will-change:opacity;mix-blend-mode:screen;
  transition:opacity .15s cubic-bezier(.16,1,.3,1)}
#gr-hypnotic-portal.portal-active{opacity:1}
#gr-hypnotic-portal.portal-peak{
  background:radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(0,200,232,.22) 0%, rgba(123,79,255,.12) 40%, transparent 70%)}
.portal-core-glow{position:absolute;top:50%;left:50%;
  width:120vmax;height:120vmax;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);will-change:transform;
  background:radial-gradient(circle,rgba(0,200,232,.35) 0%,rgba(0,200,232,.08) 30%,transparent 65%);
  transition:transform .45s cubic-bezier(.25,1,.5,1)}
#gr-hypnotic-portal.portal-active .portal-core-glow{transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){
  #gr-hypnotic-portal,#gr-hypnotic-portal .portal-core-glow{transition:none;display:none}}

.journey-fine{font-size:9.5px;color:var(--l3);margin-top:12px;line-height:1.5}

/* ── DIÁLOGO PROACTIVO — el mensaje de privacidad que se presenta solo, y se retira solo ── */
#gr-proactive-dialog{position:fixed;top:calc(var(--nav-h) + 12px);left:50%;transform:translateX(-50%) translateY(-10px);
  z-index:1100;width:min(420px,90vw);background:rgba(10,9,12,.97);border:1px solid rgba(0,200,232,.22);
  border-radius:10px;padding:0;box-shadow:0 16px 40px rgba(0,0,0,.5);
  max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .4s,padding .5s}
#gr-proactive-dialog.visible{max-height:260px;opacity:1;transform:translateX(-50%) translateY(0);
  pointer-events:auto;padding:16px 38px 16px 18px}
#gr-proactive-dialog.collapsed{max-height:0;opacity:0;padding:0 38px 0 18px;transform:translateX(-50%) translateY(-10px)}
#gr-proactive-txt{font-size:12.5px;line-height:1.55;color:var(--l1);margin:0}
.gpd-x{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--l3);
  font-size:13px;cursor:pointer;padding:4px;transition:color .2s}
.gpd-x:hover{color:var(--w)}
@media (prefers-reduced-motion:reduce){#gr-proactive-dialog{transition:opacity .3s}}
@media(max-width:600px){#gr-proactive-dialog{top:calc(var(--nav-h) + 8px);width:92vw}
  #gr-proactive-txt{font-size:11.5px}}

/* ── KEYFRAMES (global) ── */
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes breathBig{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.9;transform:scale(1.02)}}
@keyframes jRot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes jRot2{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes goldGl{0%,100%{box-shadow:0 0 20px rgba(232,152,30,.07)}50%{box-shadow:0 0 55px rgba(232,152,30,.22)}}
@keyframes neonG{0%,100%{text-shadow:0 0 8px #39FF14}50%{text-shadow:0 0 22px #39FF14,0 0 44px rgba(57,255,20,.25)}}
@keyframes breathCk{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes scanD{0%{top:-2px;opacity:0}3%{opacity:.7}97%{opacity:.3}100%{top:100%;opacity:0}}

/* ════════════════════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════════════════════ */
#s-hero .section-inner{align-items:center;padding:0 58px}
/* Artist photo — floating planet in the starfield, with 2 orbiting vinyl moons */
/* Reserved zone for the DJ booth (right half of hero) — photo+decks center INSIDE this, not pinned to viewport edge */
.h-deck-zone{position:absolute;right:0;top:0;bottom:0;width:46%;
             display:flex;align-items:center;justify-content:center;pointer-events:none}
.h-console-base{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
  width:min(46vh,440px);height:10px;border-radius:6px;
  background:linear-gradient(180deg,#1a1b22,#0a0a10);
  border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 14px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;gap:8px;z-index:1}
.hcb-led{width:3px;height:3px;border-radius:50%;background:var(--c);box-shadow:0 0 5px var(--c);
  animation:hmLed var(--bpm-speed) ease-in-out infinite}
.hcb-led:nth-child(2){animation-delay:.2s}.hcb-led:nth-child(3){animation-delay:.4s;background:var(--gold);box-shadow:0 0 5px var(--gold)}
.hcb-led:nth-child(4){animation-delay:.6s}.hcb-led:nth-child(5){animation-delay:.8s}
.h-photo{position:relative;right:auto;top:auto;transform:none;
          width:min(54vh,500px);height:min(54vh,500px);pointer-events:none}
          /* no float animation — GRÄNDRØ stays still, only the aura/waves move */
.h-planet{position:relative;width:100%;height:100%;border-radius:50%;overflow:visible;
          box-shadow:inset -20px -20px 50px rgba(0,0,0,.85),inset 10px 10px 30px rgba(0,200,232,.22)}
.h-photo img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;
             filter:contrast(1.04) saturate(1.05);
             -webkit-mask-image:radial-gradient(circle,#000 88%,transparent 100%);
             mask-image:radial-gradient(circle,#000 88%,transparent 100%)}
/* Aurora aura — northern-lights style halo, pulses with the kick (driven by JS) */
.h-aura{position:absolute;inset:-12%;border-radius:50%;z-index:1;pointer-events:none;will-change:transform,opacity}
.h-aura1{background:radial-gradient(circle,rgba(0,200,232,.22) 0%,rgba(0,200,232,.08) 45%,transparent 72%);
  filter:blur(2px)}
.h-aura2{background:radial-gradient(circle at 60% 35%,rgba(170,80,255,.16) 0%,transparent 60%);
  mix-blend-mode:screen;animation:auraDrift 11s ease-in-out infinite}
@keyframes auraDrift{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.06) rotate(6deg)}}
.holo-scan{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:50%;
  background:repeating-linear-gradient(to bottom,
    rgba(0,200,232,0) 0px, rgba(0,200,232,.035) 1px,
    rgba(0,200,232,0) 2px, rgba(0,200,232,0) 3px);
  mix-blend-mode:screen;opacity:.5}
/* Turntables — static DJ controller decks (DDJ-style) flanking the planet */
.h-deck{position:absolute;top:50%;pointer-events:all;cursor:pointer;
        transform:translateY(-50%);z-index:4;transition:transform .25s;
        display:flex;flex-direction:column;align-items:center;gap:4px}
/* Insignia de play persistente — antes solo se entendía que era clickeable
   pasando el mouse por encima, lo que no es nada intuitivo. Ahora hay una
   señal visible todo el tiempo. */
.h-deck .hd-play-badge{position:absolute;top:-5px;right:-5px;z-index:5;
  width:16px;height:16px;border-radius:50%;background:var(--c);color:#000;
  display:flex;align-items:center;justify-content:center;font-size:8px;
  box-shadow:0 0 8px rgba(0,200,232,.7);animation:hdBadgePulse 2.4s ease-in-out infinite;
  pointer-events:none}
@keyframes hdBadgePulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.18);opacity:1}
}
body.safe-mode .h-deck .hd-play-badge{animation:none}
@media(prefers-reduced-motion:reduce){.h-deck .hd-play-badge{animation:none}}
.h-deck.d1{left:-78px}
.h-deck.d2{right:-78px}
.h-deck.d3{top:-44px;left:50%;transform:translateX(-50%);flex-direction:row}
.h-deck.d3:hover{transform:translateX(-50%) scale(1.1)}
/* Este deck está pegado arriba del todo — su tooltip por defecto (arriba) queda
   tapado por el nav o el diálogo de bienvenida. Lo mostramos abajo en su lugar. */
.h-deck.d3::after{bottom:auto !important;top:100% !important;margin-bottom:0 !important;margin-top:6px !important}
.h-deck.d3:hover::after{transform:translateX(-50%) translateY(0) !important}
.h-deck.d4{bottom:-44px;top:auto;left:50%;transform:translateX(-50%);flex-direction:row-reverse}
.h-deck.d4:hover{transform:translateX(-50%) scale(1.1)}
.h-deck:hover{transform:translateY(-50%) scale(1.1)}
/* Mixer panel body */
.h-mixer{position:relative;width:66px;height:66px;border-radius:8px;
         background:linear-gradient(155deg,#1b1c24,#0a0a10 70%);
         border:1px solid rgba(255,255,255,.08);
         box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06),
                    0 0 16px rgba(0,200,232,.18);
         display:flex;align-items:center;justify-content:center}
/* Blinking LEDs (top row, like a real controller) */
.hm-led{position:absolute;top:5px;width:3px;height:3px;border-radius:50%;
        background:var(--c);box-shadow:0 0 4px var(--c);animation:hmLed var(--bpm-speed) ease-in-out infinite}
.hm-led1{left:8px;animation-delay:0s}
.hm-led2{left:50%;transform:translateX(-50%);animation-delay:.35s;background:#ff5050;box-shadow:0 0 4px #ff5050}
.hm-led3{right:8px;animation-delay:.7s;background:var(--gold);box-shadow:0 0 4px var(--gold)}
@keyframes hmLed{0%,100%{opacity:.25}50%{opacity:1}}
/* Jog wheel — spinning platter */
.hm-jog{position:relative;width:38px;height:38px;border-radius:50%;
        background:radial-gradient(circle at 35% 30%,#2a2c36,#0c0c12 75%);
        border:1px solid rgba(0,200,232,.3);
        box-shadow:inset 0 0 6px rgba(0,0,0,.6),0 0 8px rgba(0,200,232,.15)}
.hm-jog-ring{position:absolute;inset:3px;border-radius:50%;
  background:repeating-conic-gradient(rgba(0,200,232,.18) 0deg 4deg,transparent 4deg 12deg);
  animation:moonSpin 3.2s linear infinite}
.hm-jog-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:6px;font-weight:800;color:rgba(150,220,240,.85);
  text-shadow:0 0 4px rgba(0,200,232,.6);z-index:2}
/* Faders below jog wheel */
.hm-faders{position:absolute;bottom:4px;display:flex;gap:3px}
.hm-faders span{width:2px;height:8px;background:rgba(0,200,232,.35);border-radius:1px;
  animation:hmFader calc(var(--bpm-speed) * 0.7) ease-in-out infinite}
.hm-faders span:nth-child(1){animation-delay:0s}
.hm-faders span:nth-child(2){animation-delay:.25s}
.hm-faders span:nth-child(3){animation-delay:.5s}
@keyframes hmFader{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.3)}}
/* Speaker — emits musical notes that drift toward the galaxy */
.hm-speaker{position:relative;width:34px;height:14px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#15161c 0 2px,#0a0a0e 2px 4px);
  border:1px solid rgba(255,255,255,.06);overflow:visible}
.hms-note{position:absolute;bottom:2px;left:6px;font-size:9px;color:rgba(0,200,232,.6);
  animation:hmNoteOut 2.4s ease-out infinite;opacity:0}
.hm-speaker .hms-note:nth-child(2){left:18px;animation-delay:1.1s;color:rgba(232,152,30,.5);font-size:7px}
@keyframes hmNoteOut{0%{opacity:0;transform:translateY(0) scale(.6)}
  15%{opacity:.9}70%{opacity:.4}
  100%{opacity:0;transform:translateY(-26px) translateX(8px) scale(1.2)}}
/* Hover tooltip on decks */
.h-deck::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;
  transform:translateX(-50%) translateY(4px);white-space:nowrap;
  background:rgba(6,6,13,.95);border:1px solid rgba(0,200,232,.25);
  padding:5px 10px;font-size:10px;font-weight:600;color:var(--c);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;margin-bottom:6px}
.h-deck:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* Small orbiting light dot (decorative, keeps galaxy feel) */
.h-orbit-dot{position:absolute;inset:-30px;border-radius:50%;pointer-events:none;z-index:1;
             animation:orbitSpin 8s linear infinite}
.h-orbit-dot::before{content:'';position:absolute;top:0;left:50%;width:4px;height:4px;
             margin-left:-2px;border-radius:50%;background:var(--c);
             box-shadow:0 0 10px var(--c),0 0 20px var(--c)}
/* Headphones — symbolic gesture: slides up/away on hover */
.h-headphones{position:absolute;top:6%;left:50%;transform:translateX(-50%) translateY(0);
  font-size:26px;z-index:5;pointer-events:none;filter:drop-shadow(0 0 6px rgba(0,200,232,.4));
  transition:transform .4s ease,opacity .4s ease;animation:headphoneIdle 4s ease-in-out infinite}
.h-photo:hover .h-headphones{transform:translateX(-50%) translateY(-22px) rotate(-12deg);opacity:.35}
@keyframes headphoneIdle{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-2px)}}
/* Speech bubble — appears on hover, click opens chat */
.h-speech{position:absolute;top:-8%;left:50%;transform:translateX(-50%) translateY(6px) scale(.94);
  width:max(220px,60%);background:rgba(8,10,20,.95);border:1px solid rgba(0,200,232,.28);
  padding:10px 14px;border-radius:4px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;z-index:6;text-align:center}
.h-speech::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:rgba(8,10,20,.95);border-right:1px solid rgba(0,200,232,.28);
  border-bottom:1px solid rgba(0,200,232,.28)}
.h-speech-txt{font-size:11px;color:var(--l1);line-height:1.4;font-weight:500}
.h-photo:hover .h-speech{opacity:1;pointer-events:all;cursor:pointer;
  transform:translateX(-50%) translateY(-8px) scale(1)}
.h-speech.auto-show{opacity:1;pointer-events:all;cursor:pointer;
  transform:translateX(-50%) translateY(-8px) scale(1)}
.h-speech-txt{transition:opacity .25s}
.h-speech-txt.fading{opacity:0}
/* Galaxy — musical notes drifting outward like sound traveling through the Milky Way */
.h-galaxy-notes{position:absolute;inset:-120px;pointer-events:none;z-index:-1}
.gnote{position:absolute;font-size:11px;color:rgba(0,200,232,.4);
       animation:noteDrift 7s linear infinite;opacity:0}
.gnote:nth-child(1){top:10%;left:-10px;animation-delay:0s}
.gnote:nth-child(2){top:55%;left:-10px;animation-delay:2.3s;color:rgba(232,152,30,.4);font-size:9px}
.gnote:nth-child(3){top:80%;left:-10px;animation-delay:4.6s}
.gnote:nth-child(4){top:35%;left:-10px;animation-delay:1.5s;font-size:8px;color:rgba(57,255,20,.3)}
@keyframes planetFloat{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-12px) translateX(-4px)}}
@keyframes planetBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.025)}45%{transform:scale(1)}}
@keyframes orbitSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes moonSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes holoFlicker{0%,92%,100%{opacity:1}93%{opacity:.85}94%{opacity:1}96%{opacity:.92}97%{opacity:1}}
@keyframes holoScanMove{0%{background-position:0 0}100%{background-position:0 40px}}
@keyframes beatGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes noteDrift{0%{opacity:0;transform:translateX(0) translateY(0) scale(.6)}
  10%{opacity:.8}70%{opacity:.4}
  100%{opacity:0;transform:translateX(340px) translateY(-40px) scale(1.3)}}
/* Content */
.h-content{max-width:580px;position:relative;z-index:5}
.h-ey{font-size:10px;font-weight:600;letter-spacing:.28em;color:var(--c);
      text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:11px;position:relative;z-index:6}
.h-ey::before{content:'';width:20px;height:1.5px;background:var(--c);flex-shrink:0}
.gr-typing::after{content:'';display:inline-block;width:.5em;height:.85em;background:var(--c);
  margin-left:2px;vertical-align:-0.1em;animation:grCursorBlink .8s steps(1) infinite}
@keyframes grCursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gr-typing::after{display:none}}

.h-name{font-family:var(--fh);font-size:clamp(52px,9vw,126px);font-weight:800;
        letter-spacing:-.04em;line-height:1;color:var(--w);margin-bottom:13px;padding-top:4px;
        position:relative;z-index:5;white-space:nowrap}
.h-name span{color:var(--c)} /* keep for the original <span>Ä</span> fallback */
/* Individual letter spans from wrapBrandText */
/* ── GPU-DRIVEN KICK ANIMATION — contexto h-name (spec §2.1) ── */
.lg-l{display:inline-block;
  transform:scale(var(--gr-kick-scale,1));
  opacity:calc(0.7 + var(--gr-kick-opacity,0) * 0.3);
  will-change:transform,opacity;
  transition:color .2s,transform 0.08s cubic-bezier(.25,1,.5,1),opacity 0.12s ease-out;
  color:var(--w)}
.lg-l.lg-a,.lg-l.lg-o{color:var(--c)}
.h-tag{font-size:clamp(14px,1.7vw,17px);color:rgba(255,255,255,.3);
       font-weight:300;margin-bottom:19px;line-height:1.5}
.h-flags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px}
.hfc{display:flex;flex-direction:column;overflow:hidden;position:relative;
     border:1px solid rgba(255,255,255,.07);min-width:88px;transition:all .3s;
     animation:flagBob 4s ease-in-out infinite}
.hfc:nth-child(1){animation-delay:0s}
.hfc:nth-child(2){animation-delay:.6s}
.hfc:nth-child(3){animation-delay:1.2s}
.hfc:nth-child(4){animation-delay:1.8s}
.hfc::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.18) 48%,transparent 60%);
  background-size:220% 100%;background-position:120% 0;
  animation:flagShine 5s ease-in-out infinite}
.hfc:nth-child(2)::after{animation-delay:1s}
.hfc:nth-child(3)::after{animation-delay:2s}
.hfc:nth-child(4)::after{animation-delay:3s}
.hfc:hover{border-color:rgba(0,200,232,.3);transform:translateY(-3px) scale(1.03)}
.hff{height:22px;display:flex;flex-direction:column}.hff span{flex:1}
.hfb{padding:5px 9px;background:rgba(6,6,13,.7);position:relative;z-index:1}
.hf-live{position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;
         background:var(--c);box-shadow:0 0 6px var(--c);z-index:3;
         animation:hfLivePulse 2s ease-in-out infinite}
@keyframes flagBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes flagShine{0%,40%{background-position:120% 0}55%,100%{background-position:-20% 0}}
@keyframes hfLivePulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.hfcode{font-size:8px;font-weight:600;letter-spacing:.1em;margin-bottom:1px}
.hfcity{font-size:10px;font-weight:600;color:var(--w)}
.h-btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.hb-p{background:var(--c);color:#000;padding:11px 26px;font-size:12px;font-weight:700;
      letter-spacing:.06em;text-transform:uppercase;border:none;display:inline-block;
      transition:all .2s;clip-path:polygon(7px 0%,100% 0%,100% calc(100% - 7px),calc(100% - 7px) 100%,0% 100%,0% 7px)}
.hb-p:hover{background:var(--w);transform:translateY(-2px)}
.hb-s{border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.68);
      padding:11px 26px;font-size:12px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;background:transparent;display:inline-block;transition:all .2s}
.hb-s:hover{border-color:var(--c);color:var(--c)}
/* Contacto button — mobile-only, matches hb-s aesthetic */
.hb-c{border:1px solid rgba(0,200,232,.3);color:var(--c);
      padding:11px 22px;font-size:12px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;background:transparent;display:inline-block;transition:all .2s}
.hb-c:hover{background:rgba(0,200,232,.1);border-color:var(--c)}
@media(min-width:769px){.hide-d{display:none}} /* desktop hide */
/* Marquee */
.mqw{position:absolute;bottom:0;left:0;right:0;overflow:hidden;
     border-top:1px solid rgba(0,200,232,.09);background:rgba(6,6,13,.88);padding:9px 0;z-index:6}
.mq{display:flex;animation:mqs 44s linear infinite;width:max-content}
.mq:hover{animation-play-state:paused;cursor:default}
.mi{font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.72);
    padding:0 24px;display:inline-flex;align-items:center;gap:8px;
    text-transform:uppercase;white-space:nowrap;transition:color .2s}
.mi:hover{color:var(--c)}
.ms{width:3px;height:3px;background:var(--c);border-radius:50%;flex-shrink:0;box-shadow:0 0 5px var(--c)}
.mf{font-size:10px;color:rgba(255,255,255,.25);font-style:italic;letter-spacing:.03em}

@media(max-width:768px){
  /* ── HERO MOBILE (spec §1.1) ────────────────────────────────────────────
     El artista ocupa el tercio superior (deck-zone top:5% h:52%).
     El bloque de título se ancla al TERCIO INFERIOR mediante flex-end,
     con padding-bottom que suma dock + safe-area para nunca tapar controles. */
  /* Fix §2: padding-bottom ampliado (dock + 80px) para despejar rostro del artista */
  #s-hero .section-inner{padding:0 18px calc(var(--dock-h,60px) + 80px + env(safe-area-inset-bottom,0px)) !important;
    align-items:center;justify-content:flex-end;text-align:center;
    display:flex;flex-direction:column;height:100vh}

  /* hero-title-container pattern (spec §1.1): el .h-content empuja el logo
     hacia abajo, liberando la zona central superior donde vive el artista. */
  .h-content{
    display:flex;flex-direction:column;
    justify-content:flex-end;
    padding-bottom:8vh;
    width:100%}

  .h-deck-zone{position:absolute;right:0;left:0;width:100%;top:5%;bottom:auto;height:52%}
  .h-photo{width:min(75vw,340px);height:min(75vw,340px);opacity:.95}
  .h-console-base{display:none}
  /* Name and tags compact at the bottom */
  .h-name{font-size:clamp(36px,10vw,62px);margin-bottom:4px;margin-top:auto}
  .h-tag{margin-bottom:8px;font-size:9.5px}
  .hb-p{display:none}
  /* Flags even smaller and tighter — just indicators, not the focus */
  /* Fix §2: banderas centradas con margin auto per informe */
  .h-flags{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin:12px auto 0 auto;max-width:200px}
  .hfc{min-width:0;width:100%;max-width:none;animation:none}
  .hfc::after{animation:none;display:none}
  .hff{height:7px}
  .hfb{padding:2px 5px;overflow:hidden}
  .hfcode{font-size:6px;white-space:nowrap;margin-bottom:0}
  .hfcity{font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hf-live{transform:scale(.55)}
  .h-deck.d1{left:-36px}
  .h-deck.d2{right:-36px}
  .h-deck.d3,.h-deck.d4{display:none}
  .h-mixer{width:42px;height:42px}
  .hm-jog{width:24px;height:24px}
  .hm-speaker{width:26px}
  .h-speech{width:170px;font-size:10px}
  .h-photo:hover .h-speech,.h-photo:hover .h-headphones{opacity:0} /* no hover on touch; tap uses onclick */
}

/* ════════════════════════════════════════════════════════════════
   ARTIST SECTION — video de fondo a pantalla completa, texto encima
   ════════════════════════════════════════════════════════════════ */
#s-artist .section-inner{display:block;position:relative;height:100%;overflow:hidden}
.art-vid-col{position:absolute;inset:0;overflow:hidden;border:none;z-index:0}
#cv-artist-sp{position:absolute;inset:0;pointer-events:none;z-index:3}
.art-vid{width:100%;height:100%;background:#000;
         display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.art-vid iframe,.art-vid video{position:absolute;inset:0;width:100%;height:100%;border:none;object-fit:cover}
.art-vid::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,6,13,.94) 0%,rgba(6,6,13,.75) 32%,rgba(6,6,13,.25) 58%,transparent 78%),
    linear-gradient(to top,rgba(6,6,13,.7) 0%,transparent 30%)}
.art-vid-ph{text-align:center;color:var(--l2);padding:16px;position:relative;z-index:2}
.art-vid-ph svg{margin:0 auto 10px}
.art-vid-ph p{font-size:12px;font-weight:600;color:var(--l1);margin-bottom:3px}
.art-vid-ph span{font-size:10px}
.art-glitch{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(0,200,232,0) 0px,rgba(0,200,232,.05) 1px,
    rgba(0,200,232,0) 2px,rgba(0,200,232,0) 4px);
  mix-blend-mode:screen;animation:artGlitchPulse 3.2s ease-in-out infinite}
@keyframes artGlitchPulse{0%,100%{opacity:.4}45%{opacity:.4}50%{opacity:.9}55%{opacity:.4}}
/* ── IDENTIDAD VISUAL GRANADEROS — efectos tipográficos en la sección Artista ── */
.brand-highlight{font-family:var(--fh);font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  color:var(--c);text-shadow:0 0 10px rgba(0,200,232,.55);font-size:1.05em}
.granaderos-text{font-weight:700;color:var(--w);border-bottom:1.5px solid rgba(0,200,232,.6);
  padding-bottom:1px}
.arg-flag-text{font-weight:700;display:inline-block;
  background:linear-gradient(to right,#74ACDF 0%,#74ACDF 14%,#FFF 14%,#FFF 28%,
    #74ACDF 28%,#74ACDF 42%,#FFF 42%,#FFF 56%,
    #74ACDF 56%,#74ACDF 70%,#FFF 70%,#FFF 84%,#74ACDF 84%,#74ACDF 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not (-webkit-background-clip:text){.arg-flag-text{color:#74ACDF;background:none}}

.art-name{font-family:var(--fh);font-size:clamp(26px,3.8vw,46px);font-weight:800;
          color:var(--w);letter-spacing:-.03em;margin:9px 0 13px;line-height:1}
.art-hitos{display:flex;gap:14px;flex-wrap:wrap;list-style:none;margin-bottom:22px}
.art-hitos li{font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--l2)}
.art-hitos b{display:block;font-family:var(--fh);font-size:18px;font-weight:800;color:var(--c)}
.art-blocks{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
@media(min-width:1025px){
  .art-blocks{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;align-items:start}
  /* First block (Somos Uno with manifesto button) spans both columns — it's the hero statement */
  .art-block.art-block-mf{grid-column:1 / -1}
}
.art-block{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;
           border-left:2px solid rgba(0,200,232,.18);padding-left:14px}
.art-block.in-view{opacity:1;transform:translateY(0)}
.art-block h3{font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.06em;
              color:var(--c);margin-bottom:7px}
.art-block p{font-size:14px;color:var(--l1);line-height:1.78;font-weight:300}
.art-block p em{color:var(--violet);font-style:normal;font-weight:600}
.art-block-mf{border-left-color:var(--c);background:linear-gradient(90deg,rgba(0,200,232,.06),transparent);
              padding:16px 14px 16px 16px;border-radius:0 4px 4px 0}
.art-block-mf h3{font-size:15px;letter-spacing:.08em}
.art-block:nth-child(2) p em{color:var(--c)}
.art-block:nth-child(4) p em{color:var(--gold)}
.art-block:nth-child(4){border-left-color:rgba(232,152,30,.25)}
.art-accordion{margin-bottom:18px}
.aa-lbl{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--c);margin-bottom:10px}
.aa-item{border-bottom:1px solid rgba(255,255,255,.06)}
.aa-q{width:100%;text-align:left;background:none;border:none;padding:12px 0;cursor:pointer;
      display:flex;justify-content:space-between;align-items:center;gap:10px;
      font-size:13px;color:var(--l1);font-weight:500;line-height:1.4}
.aa-q:hover{color:var(--w)}
.aa-arrow{flex-shrink:0;color:var(--c);font-size:16px;font-weight:300;transition:transform .25s}
.aa-q[aria-expanded="true"] .aa-arrow{transform:rotate(45deg)}
.aa-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.aa-a p{font-size:13px;color:var(--l2);font-weight:300;line-height:1.7;padding:0 0 14px}
@media (prefers-reduced-motion:reduce){.aa-a{transition:none}.aa-arrow{transition:none}}
.art-more{background:transparent;border:1px solid rgba(0,200,232,.25);color:var(--c);
          padding:9px 18px;font-size:11px;font-weight:700;letter-spacing:.08em;
          text-transform:uppercase;cursor:pointer;transition:all .2s;align-self:flex-start}
.art-more:hover{background:rgba(0,200,232,.09)}
.art-interview-cta{display:flex;justify-content:center;margin-top:28px;
  grid-column:1 / -1}
.art-more.art-more-pill{border-radius:40px;padding:13px 36px;font-size:12px;
  letter-spacing:.12em;border-color:var(--c);
  box-shadow:0 0 0 0 rgba(0,200,232,.2);align-self:auto;
  transition:all .3s cubic-bezier(.4,0,.2,1)}
.art-more.art-more-pill:hover{background:var(--c);color:#000;
  box-shadow:0 0 20px rgba(0,200,232,.4);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .art-glitch{animation:none;opacity:.3}
  .art-block{opacity:1;transform:none;transition:none}
}
@media(max-width:768px){
  #s-artist .section-inner{display:block;overflow-y:auto;position:relative;height:100%}
  .art-vid-col{position:absolute;inset:0;width:100%;height:100%;z-index:0;
    pointer-events:none;border:none;
    animation:artNeonPulse 3.4s ease-in-out infinite}
  .art-vid{width:100%;height:100%}
  .art-vid::after{background:linear-gradient(to bottom,rgba(6,6,13,.55) 0%,rgba(6,6,13,.88) 38%,var(--bg) 70%)}
  .art-info{position:relative;z-index:1;padding:20px !important;max-width:none !important;
    min-height:100%;box-sizing:border-box;justify-content:flex-start !important}
}
@keyframes artNeonPulse{
  0%,100%{box-shadow:inset 0 0 40px -10px rgba(0,200,232,.18)}
  50%{box-shadow:inset 0 0 60px -8px rgba(0,200,232,.32)}
}
@media (prefers-reduced-motion:reduce){.art-vid-col{animation:none}}

/* ════════════════════════════════════════════════════════════════
   ALBUMS SECTION
   ════════════════════════════════════════════════════════════════ */
.albs-gate{display:flex;align-items:flex-start;justify-content:center;
  padding:calc(var(--nav-h,46px) + 40px) 40px 40px}
.albs-gate-inner{display:grid;grid-template-columns:280px 1fr;gap:50px;align-items:center;max-width:880px;width:100%}
.ag-cover-wrap{position:relative;width:100%}
.ag-cover{width:100%;border-radius:6px;border:2px solid rgba(57,255,20,.2);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ag-info{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ag-title{font-family:var(--fh);font-size:clamp(42px,6vw,68px);font-weight:800;color:var(--w);
  letter-spacing:-.03em;line-height:.95;margin:8px 0 10px;animation:neonG 6s ease-in-out infinite}
.ag-desc{font-size:15px;color:var(--l1);font-weight:300;line-height:1.6;max-width:460px;margin-bottom:6px}
.ag-quote{font-size:13px;color:rgba(120,255,90,.85);font-style:italic;font-weight:500;margin-bottom:16px;
  text-shadow:0 2px 6px rgba(0,0,0,.7)}
.ag-stats{display:flex;gap:18px;margin-bottom:14px}
.ag-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--j1);color:#000;
  font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:.04em;padding:14px 26px;
  border-radius:3px;text-decoration:none;transition:all .25s;box-shadow:0 0 0 0 rgba(57,255,20,.4)}
.ag-cta:hover{background:#5dff3f;transform:translateY(-2px);box-shadow:0 8px 24px rgba(57,255,20,.3)}
.ag-cta-sub{font-size:11px;color:var(--l2);margin-top:8px}
@media(max-width:768px){
  .albs-gate{padding-left:20px;padding-right:20px;padding-bottom:16px}
  .albs-gate-inner{grid-template-columns:1fr;gap:16px;text-align:center}
  .ag-info{align-items:center}
  .ag-cover-wrap{display:none}
  .ag-stats{justify-content:center}
  .alb-plats.alb-ct{justify-content:center}
}

.albs-wrap{display:flex;flex-direction:column;height:100%;width:100%}
.albs-split{display:flex;flex-direction:row;flex:1;min-height:0;width:100%}
.albs-player{display:flex;align-items:center;gap:12px;height:56px;flex-shrink:0;
  padding:0 20px;background:rgba(6,6,13,.95);border-top:1px solid rgba(0,200,232,.15);
  position:relative;z-index:5}
.ap-emoji{font-size:18px;flex-shrink:0;transition:transform .3s}
.ap-info{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-name{font-size:13px;color:var(--w);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-meta{font-size:9px;color:var(--l2)}
.ap-wave{display:flex;align-items:center;gap:2px;height:18px;flex-shrink:0}
.ap-wave span{width:2.5px;background:var(--c);border-radius:1px;opacity:.3;height:5px;transition:height .15s,opacity .3s}
.albs-player.playing .ap-wave span{opacity:.9;animation:apWaveBar 1s ease-in-out infinite}
.ap-wave span:nth-child(1){animation-delay:0s}.ap-wave span:nth-child(2){animation-delay:.1s}
.ap-wave span:nth-child(3){animation-delay:.2s}.ap-wave span:nth-child(4){animation-delay:.3s}
.ap-wave span:nth-child(5){animation-delay:.4s}
@keyframes apWaveBar{0%,100%{height:4px}50%{height:16px}}
.ap-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,200,232,.3);
  background:rgba(0,200,232,.08);color:var(--c);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ap-btn:hover{background:rgba(0,200,232,.18)}
.ap-next{width:28px;height:28px;font-size:11px;border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--l1)}
/* Ghost dot that "travels" from a clicked track down to the player */
.ap-ghost{position:fixed;width:7px;height:7px;border-radius:50%;z-index:9500;
  pointer-events:none;box-shadow:0 0 10px currentColor;transition:all .55s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.ap-ghost{display:none}.albs-player.playing .ap-wave span{animation:none;height:10px}}
@media(max-width:768px){
  .albs-player{height:50px;padding:0 12px;gap:8px}
  .ap-name{font-size:11px}.ap-meta{font-size:8px}
  .ap-wave{display:none}
  .ap-btn{width:30px;height:30px}
}
.alb-block{position:relative;width:50%;height:100%;overflow:hidden;
           transition:opacity .45s cubic-bezier(.4,0,.2,1),filter .45s cubic-bezier(.4,0,.2,1);
           border-right:1px solid rgba(255,255,255,.06)}
.albs-split.dim-ct .alb-block-ag,.albs-split.dim-ag .alb-block-ct{filter:brightness(.78) saturate(.7)}
.alb-block-ag{border-right:none}
.albs-split.dim-ct .alb-block-ct,.albs-split.dim-ag .alb-block-ag{opacity:1}
.albs-split.dim-ct .alb-block-ag,.albs-split.dim-ag .alb-block-ct{opacity:.5}
.alb-block-ct::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,rgba(57,255,20,.05),transparent 60%)}
.alb-block-ag::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 20%,rgba(232,152,30,.05),transparent 60%)}
.alb-block-inner{position:relative;z-index:2;display:flex;flex-direction:column;
                  height:100%;overflow:hidden}
.alb-left{display:flex;flex-direction:column;gap:8px;padding:14px 16px;
           border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.alb-head-row{display:flex;gap:14px;align-items:flex-start}
.alb-head-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.alb-mood{margin-top:6px;height:64px;border-radius:5px;display:flex;align-items:center;justify-content:center;
          overflow:hidden;position:relative;background-size:cover;background-position:center}
.alb-mood-ct{background:linear-gradient(135deg,rgba(57,255,20,.06),rgba(0,0,0,.3));border:1px dashed rgba(57,255,20,.18)}
.alb-mood-ag{background:linear-gradient(135deg,rgba(120,174,224,.08),rgba(0,0,0,.3));border:1px dashed rgba(232,152,30,.18)}
.alb-mood-ph{font-size:10px;color:rgba(255,255,255,.3);font-style:italic;text-align:center;padding:0 12px}
.alb-right{flex:1;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:rgba(0,200,232,.12) transparent}
.alb-cvr-wrap{position:relative;width:80px;flex-shrink:0}
.alb-cvr-wrap img{width:100%;border:2px solid rgba(57,255,20,.2)}
.alb-fr1{position:absolute;inset:-9px;border:1px solid rgba(57,255,20,.1);animation:jRot 14s linear infinite;pointer-events:none}
.alb-fr2{position:absolute;inset:-18px;border:1px solid rgba(255,0,160,.06);animation:jRot2 22s linear infinite;pointer-events:none}
.alb-ag-cvr{width:80px;height:80px;aspect-ratio:1;flex-shrink:0;background:radial-gradient(ellipse at 48% 38%,#0C1828,#060810);
             border:1px solid rgba(232,152,30,.14);display:flex;align-items:center;justify-content:center;
             flex-direction:column;animation:goldGl 7s ease-in-out infinite}
.alb-ag-ep{font-size:7px;letter-spacing:.26em;text-transform:uppercase;color:rgba(120,174,224,.3);margin-bottom:3px}
.alb-ag-nm{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1.6rem;color:var(--w)}
.alb-ag-by{font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:rgba(253,250,244,.1);margin-top:3px}
.alb-title{font-family:var(--fh);font-size:clamp(20px,2.2vw,30px);font-weight:800;letter-spacing:-.04em;line-height:.95}
.alb-ct .alb-title{color:var(--j1);animation:neonG 6s ease-in-out infinite}
.alb-ag-t .alb-title{color:var(--gold)}
.alb-desc{font-size:12px;color:var(--l1);font-weight:300;line-height:1.6;border-left:2px solid;padding-left:10px}
.alb-ct .alb-desc{border-color:var(--j1)} .alb-ag-t .alb-desc{border-color:var(--gold)}
.alb-stats{display:flex;gap:12px;flex-wrap:wrap}
.alb-stat{font-size:9px;font-weight:600;letter-spacing:.05em;color:var(--l2)}
.alb-stat b{display:block;font-size:15px;font-weight:700;margin-bottom:1px}
.alb-ct .alb-stat b{color:var(--j1)} .alb-ag-t .alb-stat b{color:var(--gold)}
.alb-plats{display:flex;flex-wrap:wrap;gap:6px}
.alb-pill{padding:5px 11px;border:1px solid;font-size:10px;font-weight:600;letter-spacing:.05em;transition:all .2s;white-space:nowrap;text-decoration:none;cursor:pointer;display:inline-block}
.alb-ct .alb-pill{border-color:rgba(57,255,20,.35);color:rgba(200,255,190,.85)}
.alb-ct .alb-pill:hover{background:rgba(57,255,20,.15);border-color:rgba(57,255,20,.7);transform:translateY(-1px)}
.alb-ct .alb-pill:hover{border-color:var(--j1);color:var(--j1)}
.alb-ag-t .alb-pill{border-color:rgba(232,152,30,.35);color:rgba(255,220,170,.85)}
.alb-ag-t .alb-pill:hover{border-color:var(--gold);color:var(--gold)}
.cd-mini{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cdmi .n{display:block;font-family:var(--fh);font-size:20px;font-weight:700;color:var(--gold);letter-spacing:-.02em}
.cdmi .l{display:block;font-size:7px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,152,30,.32)}
.cd-sep{font-size:14px;color:rgba(232,152,30,.15)}
/* Tracklist */
/* alb-right ya definido arriba (split-screen) */
.tl-hd{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--l3);margin-bottom:8px;padding:0 8px}
.tlist{display:flex;flex-direction:column;gap:2px}
.tr{display:grid;grid-template-columns:26px 20px 1fr 26px auto;gap:0 8px;align-items:center;
    padding:9px 10px;border:1px solid rgba(255,255,255,.04);background:rgba(10,5,0,.8);
    cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.tr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
            background:var(--c);transform:scaleY(0);transition:transform .22s;transform-origin:center}
.tr:hover{border-color:rgba(255,255,255,.07);transform:translateX(3px)}
.tr:hover::before,.tr.playing::before{transform:scaleY(1)}
.tr.playing{background:rgba(0,200,232,.06);border-color:rgba(0,200,232,.15)}
.tr-n{font-family:var(--fm);font-size:11px;color:rgba(255,255,255,.07);transition:color .2s}
.tr:hover .tr-n,.tr.playing .tr-n{color:var(--c)}
.tr-e{font-size:14px}
.tr-nm{font-size:12px;font-weight:700;color:var(--w);display:block;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-mt{font-size:8px;color:var(--l2);display:block;margin-top:1px}
.tr-play{width:24px;height:24px;border:1px solid;border-radius:50%;background:transparent;
         font-size:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
.tr-play:hover{background:rgba(0,200,232,.1)}
/* YouTube-style "OFFICIAL VIDEO" badge */
.tr-vid{display:flex;align-items:center;gap:4px;flex-shrink:0;padding:4px 8px;
        border:1px solid;border-radius:3px;opacity:.55;transition:all .2s;background:rgba(255,0,0,.06)}
.tr-vid:hover{opacity:1;background:rgba(255,0,0,.14)}
.tr-vid span{font-size:7px;font-weight:700;letter-spacing:.06em;color:var(--w);white-space:nowrap}
@media(max-width:768px){
  .albs-split{flex-direction:column;overflow-y:auto}
  .alb-block{width:100%;height:auto;min-height:50%;border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
  .alb-block-inner{min-height:auto}
  .alb-left{border-bottom:1px solid rgba(255,255,255,.05)}
  .alb-mood{display:none}
  .alb-cvr-wrap,.alb-ag-cvr{width:56px;height:56px}
  .tr{grid-template-columns:22px 18px 1fr 24px}
  .tr-vid span{display:none}
  .tr-vid{padding:4px 6px}
}
.mus-r{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;gap:9px;overflow-y:auto}
.sc-wrap iframe{display:block;border:none;width:100%;height:300px}
.mlink{display:flex;align-items:center;gap:12px;padding:11px 15px;
       border:1px solid rgba(255,255,255,.05);background:var(--card);
       transition:all .2s;cursor:pointer;position:relative;overflow:hidden}
.mlink:hover{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);transform:translateX(3px)}
.micon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mlbl{font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1px}
.mname{font-size:12px;font-weight:600;color:var(--w)}
.marr{margin-left:auto;font-size:15px;color:var(--l2)}.mlink:hover .marr{color:var(--w)}
.mus-title{font-family:var(--fh);font-size:clamp(20px,2.8vw,36px);font-weight:700;
           color:var(--w);letter-spacing:-.02em}
.mus-sub{font-size:13px;color:var(--l2);font-weight:300;line-height:1.55}
@media(max-width:768px){
  #s-music .section-inner{grid-template-columns:1fr;overflow-y:auto}
  .mus-l{border-right:none;border-bottom:1px solid rgba(255,255,255,.05)}
  .sc-wrap iframe{height:230px}
}

/* ════════════════════════════════════════════════════════════════
   BOOKING SECTION
   ════════════════════════════════════════════════════════════════ */
.booking-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;height:100%;
              width:100%;padding:20px 32px;overflow:auto}
.bk-left-content{display:flex;flex-direction:column;gap:11px;min-height:0;overflow:visible;justify-content:flex-start}
.bk-main-title{font-family:var(--fh);font-size:clamp(20px,2.6vw,30px);color:var(--w);
               font-weight:700;letter-spacing:-.02em;margin:3px 0 2px}
.bk-intro-text{font-size:11.5px;color:var(--l1);font-weight:300;line-height:1.5}
.bk-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.bk-flag{display:flex;align-items:center;gap:5px;padding:4px 8px 4px 4px;
         border:1px solid rgba(255,255,255,.08);border-radius:3px;background:rgba(255,255,255,.02)}
.bkf-img{display:flex;flex-direction:column;width:18px;height:12px;flex-shrink:0;overflow:hidden;border-radius:1px}
.bkf-img span{flex:1}
.bkf-city{font-size:9px;color:var(--l1);font-weight:600;white-space:nowrap}
.bk-module{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
           border-radius:5px;padding:12px 15px}
.bk-mod-title{font-family:var(--fh);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
              color:var(--c);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.bk-mod-desc{font-size:10px;color:var(--l2);font-weight:300;margin-bottom:7px}
.bk-shows-list{display:flex;flex-direction:column;gap:6px}
.bk-show-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
              padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.04);
              text-decoration:none;color:inherit;transition:all .2s}
a.bk-show-item:hover{border-bottom-color:var(--c);transform:translateX(3px)}
a.bk-show-item:hover h4{color:var(--c)}
.bk-show-item:last-child{border-bottom:none;padding-bottom:0}
.show-det h4{font-size:11.5px;color:var(--w);font-weight:600;margin-bottom:0}
.show-det p{font-size:9px;color:var(--l2);font-weight:300;line-height:1.3}
.show-dur{font-family:var(--fm);font-size:8px;background:rgba(255,255,255,.07);
          padding:3px 6px;border-radius:3px;color:var(--c);white-space:nowrap;flex-shrink:0}
.asset-download-grid{display:flex;flex-direction:column;gap:5px}
.asset-card{display:flex;align-items:center;background:rgba(255,255,255,.02);
            border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:7px 11px;
            text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}
.asset-card:hover{background:rgba(0,200,232,.05);border-color:var(--c);transform:translateX(5px)}
.asset-icon{font-size:14px;margin-right:9px;flex-shrink:0}
.asset-info{flex-grow:1;min-width:0}
.asset-info h5{font-size:10.5px;color:var(--w);margin-bottom:0;font-weight:600}
.asset-info span{font-size:8.5px;color:var(--l2)}
.download-arrow{font-size:12px;color:var(--l3);transition:color .3s;flex-shrink:0}
.asset-card:hover .download-arrow{color:var(--c)}
.bk-right-action-hub{position:relative;display:flex;align-items:center;height:100%}
.bk-photo{position:absolute;top:50%;left:50%;width:70%;max-width:220px;
  transform:translate(-50%,-50%);object-fit:contain;opacity:.07;pointer-events:none;z-index:0;filter:saturate(.6)}
.action-card-sticky{position:relative;z-index:1;background:linear-gradient(145deg,rgba(10,10,15,.9),rgba(0,200,232,.03));
  border:1px solid rgba(0,200,232,.16);box-shadow:0 10px 30px rgba(0,0,0,.5);
  border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:12px;width:100%}
.action-card-sticky h3{font-family:var(--fh);font-size:15px;color:var(--w);font-weight:700}
.action-card-sticky p{font-size:11px;color:var(--l2);font-weight:300;line-height:1.5}
.direct-channels{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.btn-channel{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;
  border-radius:4px;font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1)}
.icon-ch{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.btn-whatsapp{background:#25D366;color:#000}
.btn-whatsapp:hover{background:#20ba5a;transform:scale(1.02)}
.btn-instagram{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.btn-instagram:hover{filter:brightness(1.12);transform:scale(1.02)}
.btn-mail{background:transparent;color:var(--w);border:1px solid rgba(255,255,255,.2)}
.btn-mail:hover{background:rgba(255,255,255,.08);border-color:var(--w);transform:scale(1.02)}
@media(max-width:768px){
  .booking-grid{grid-template-columns:1fr;gap:12px;padding-left:14px;padding-right:14px;padding-top:14px;overflow-y:auto;height:auto}
  .bk-left-content{justify-content:flex-start;order:2;gap:10px}
  .bk-right-action-hub{height:auto;align-items:flex-start;order:1;padding-top:0;margin-top:0}
  .action-card-sticky{padding-top:0;padding-bottom:0}
  /* Padding only on the last element (presskit) for safe scrolling above the player */
  .bk-module-presskit{padding-bottom:max(220px, env(safe-area-inset-bottom,0px))}
  .btn-channel{padding:14px;font-size:11.5px;min-height:48px}
  .direct-channels{gap:10px}
}

/* ════════════════════════════════════════════════════════════════
   PRESS SECTION
   ════════════════════════════════════════════════════════════════ */
#s-press .section-inner{justify-content:center;align-items:center;
                         flex-direction:column;padding:24px;overflow-y:auto}
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;width:100%}
.press-txt .bk-ttl{font-size:clamp(22px,3.2vw,42px)}
.press-txt p{font-size:13px;color:var(--l1);font-weight:300;line-height:1.7;
             margin-top:11px;margin-bottom:16px}
.press-tags{display:flex;flex-wrap:wrap;gap:5px}
.ptag{font-size:9px;font-weight:600;letter-spacing:.08em;padding:3px 9px;border:1px solid}
.pds{display:flex;flex-direction:column;gap:6px}
.pd{display:flex;align-items:center;gap:11px;padding:12px 14px;
    border:1px solid rgba(255,255,255,.05);background:var(--card);transition:all .2s}
.pd:hover{border-color:rgba(0,200,232,.16);background:rgba(0,200,232,.03);transform:translateX(3px)}
.pd.main{background:rgba(0,200,232,.05);border-color:rgba(0,200,232,.14)}
.pd-i{font-size:17px;flex-shrink:0;width:24px;text-align:center}
.pd-n{font-size:12px;font-weight:700;color:var(--w);margin-bottom:1px}
.pd-d{font-size:9px;color:var(--l2)}
.pd-a{font-size:13px;color:var(--l2);margin-left:auto}.pd:hover .pd-a{color:var(--c)}
@media(max-width:600px){.press-grid{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════
   CONNECT SECTION
   ════════════════════════════════════════════════════════════════ */
#s-connect .section-inner{justify-content:center;align-items:center;
                           flex-direction:column;gap:18px;overflow-y:auto;padding:24px}
.cn-bg{position:absolute;font-family:var(--fh);font-size:clamp(48px,12vw,170px);
       font-weight:800;color:rgba(0,200,232,.02);white-space:nowrap;pointer-events:none;
       letter-spacing:-.03em;animation:breathBig 22s ease-in-out infinite}
.cn-bg .lg-l,.cn-bg .lg-l.lg-a,.cn-bg .lg-l.lg-o{color:inherit}
.cn-photo{position:absolute;top:50%;left:50%;width:min(38vh,340px);height:min(38vh,340px);
  transform:translate(-50%,-50%);object-fit:contain;opacity:.1;pointer-events:none;z-index:1;
  filter:saturate(.7);animation:cnPhotoFloat 14s ease-in-out infinite}
@keyframes cnPhotoFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-52%) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.cn-photo{animation:none}}
@media(max-width:768px){.cn-photo{width:min(50vw,240px);height:min(50vw,240px);opacity:.08}}
.cn-title{font-family:var(--fh);font-size:clamp(28px,5vw,62px);font-weight:800;
          color:var(--w);letter-spacing:-.03em;line-height:.95;text-align:center;position:relative;z-index:2}
.cn-sub{font-size:14px;color:var(--l2);font-weight:300;text-align:center;position:relative;z-index:2}
.cn-btn{background:var(--c);color:#000;padding:13px 40px;font-size:12px;font-weight:700;
        letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;
        clip-path:polygon(9px 0%,100% 0%,100% calc(100% - 9px),calc(100% - 9px) 100%,0% 100%,0% 9px);
        transition:all .25s;position:relative;z-index:2}
.cn-btn:hover{background:var(--w);transform:translateY(-2px)}
.cn-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.cnl{display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .2s}
.cnl:hover{opacity:.7}
.cnll{font-size:8px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--l3)}
.cnlh{font-size:12px;font-weight:700;color:var(--w)}

/* ════════════════════════════════════════════════════════════════
   LEGAL PAGES (sober, no animation)
   ════════════════════════════════════════════════════════════════ */
.legal-page{width:100%;height:100%;overflow-y:auto;padding:36px min(56px,6vw) 80px}
.legal-back{background:transparent;border:1px solid rgba(0,200,232,.22);color:var(--c);
            padding:7px 16px;font-size:10px;font-weight:600;letter-spacing:.08em;
            text-transform:uppercase;cursor:pointer;margin-bottom:24px;
            display:inline-block;transition:all .2s}
.legal-back:hover{background:rgba(0,200,232,.07)}
.legal-page h1{font-family:var(--fh);font-size:clamp(22px,3.5vw,36px);font-weight:700;
               color:var(--w);letter-spacing:-.02em;margin-bottom:5px}
.legal-page .lp-date{font-size:10px;color:var(--l3);margin-bottom:22px;letter-spacing:.06em}
.legal-page h2{font-size:15px;font-weight:700;color:var(--l1);margin:20px 0 7px}
.legal-page p{font-size:13px;color:var(--l2);line-height:1.78;margin-bottom:9px}
.legal-page ul{margin:7px 0 9px 18px;display:flex;flex-direction:column;gap:4px}
.legal-page li{font-size:13px;color:var(--l2);line-height:1.6}
.legal-page a{color:var(--c)}

/* ════════════════════════════════════════════════════════════════
   ARTIST — timeline + origin + improved layout
   ════════════════════════════════════════════════════════════════ */
.art-origin{background:rgba(0,200,232,.04);border:1px solid rgba(0,200,232,.1);
            padding:12px 14px;margin-bottom:16px}
.art-origin-ttl{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
                color:var(--c);margin-bottom:6px}
.art-origin p{font-size:13px;color:var(--l1);line-height:1.6;font-weight:300}
.art-origin strong{color:var(--c)}

.art-timeline{display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.atl{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:14px}
.atl:last-child{padding-bottom:0}
.atl::before{content:'';position:absolute;left:18px;top:28px;bottom:0;
             width:1px;background:linear-gradient(to bottom,rgba(0,200,232,.2),rgba(0,200,232,.04))}
.atl:last-child::before{display:none}
.atl-dot{width:37px;height:37px;border-radius:50%;border:1.5px solid;
         display:flex;align-items:center;justify-content:center;font-size:16px;
         flex-shrink:0;background:var(--bg);z-index:1;transition:all .3s}
.atl:hover .atl-dot{transform:scale(1.1)}
.atl-body{flex:1;padding-top:6px}
.atl-year{font-family:var(--fh);font-size:14px;font-weight:700;margin-bottom:2px}
.atl-place{font-size:12px;font-weight:600;color:var(--w);margin-bottom:3px}
.atl-desc{font-size:11px;color:var(--l2);line-height:1.5;font-weight:300}

/* Artist info column — scrollable, full-bleed video lives behind it */
.art-info{position:absolute;inset:0;z-index:1;
  padding:80px 0 90px;
  overflow-y:auto;display:flex;flex-direction:column;
  justify-content:flex-start;gap:12px;box-sizing:border-box;
  max-width:none;align-items:center}

@media(max-width:768px){
  .art-info{padding-bottom:max(200px, env(safe-area-inset-bottom,0px)) !important}
}

/* Desktop only: inner wrapper limits reading width, equal margins both sides */
@media(min-width:769px){
  .art-info > *{width:100%;max-width:min(1780px,96vw);padding-left:max(2vw,28px);padding-right:max(2vw,28px);box-sizing:border-box}
}
@media(min-width:1400px){
  .art-info > *{max-width:1500px}
}

/* ════════════════════════════════════════════════════════════════
   ALBUMS — jungle/cosmic improved
   ════════════════════════════════════════════════════════════════ */
.alb-track-vibe{position:absolute;top:10px;right:10px;display:flex;align-items:center;
                gap:6px;padding:4px 10px;background:rgba(6,6,13,.8);
                border:1px solid rgba(255,255,255,.08);font-size:10px;
                color:var(--l2);z-index:5;pointer-events:none;transition:all .3s}
.atv-emoji{font-size:14px}
.atv-name{font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--l1)}
.atv-bar{width:40px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:2px}
.atv-bar-fill{height:100%;animation:trackPulse 1.2s ease-in-out infinite;width:60%}
@keyframes trackPulse{0%,100%{width:30%}50%{width:100%}}

/* ════════════════════════════════════════════════════════════════
   CONTACT UNIFIED (Press + Booking + Connect)
   ════════════════════════════════════════════════════════════════ */
#s-contact .section-inner{display:grid;grid-template-columns:1fr 1fr;height:100%}
.ctt-left{display:flex;flex-direction:column;border-right:1px solid rgba(0,200,232,.06);overflow-y:auto}
.ctt-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.ctt-tab{flex:1;padding:11px 10px;font-size:10px;font-weight:700;letter-spacing:.07em;
         text-transform:uppercase;background:transparent;border:none;cursor:pointer;
         color:var(--l2);border-bottom:2px solid transparent;transition:all .2s}
.ctt-tab.active{color:var(--w);border-bottom-color:var(--c);background:rgba(0,200,232,.04)}
.ctt-panel{display:none;padding:20px 22px;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.ctt-panel.active{display:flex}
/* Booking panel */
.bk-ttl2{font-family:var(--fh);font-size:clamp(20px,2.8vw,34px);font-weight:700;
          color:var(--w);letter-spacing:-.02em;margin-bottom:8px}
.bk-sub2{font-size:12px;color:var(--l1);font-weight:300;line-height:1.6;margin-bottom:14px}
.fmt2{display:grid;grid-template-columns:26px 1fr auto;gap:0 10px;align-items:center;
      padding:9px 10px;border:1px solid rgba(0,200,232,.06);background:rgba(0,200,232,.02);
      transition:all .2s;margin-bottom:5px}
.fmt2:hover{border-color:rgba(0,200,232,.18);background:rgba(0,200,232,.04)}
.fi2{font-size:13px;text-align:center}
.fi2h h4{font-size:12px;font-weight:600;color:var(--w);margin-bottom:1px}
.fi2h p{font-size:9px;color:var(--l2)}
.fdur2{font-size:9px;font-weight:600;letter-spacing:.05em;color:var(--c);white-space:nowrap}
/* Press downloads */
/* Connect social */
.cn-social-grid{display:flex;flex-direction:column;gap:7px}
.cn-slink{display:flex;align-items:center;gap:12px;padding:10px 12px;
          border:1px solid rgba(255,255,255,.04);background:var(--card);transition:all .2s}
.cn-slink:hover{border-color:rgba(0,200,232,.15);background:rgba(0,200,232,.03);transform:translateX(3px)}
/* Contact form — right side */
.ctt-right{padding:22px 24px;display:flex;flex-direction:column;overflow-y:auto}
.ctt-form-hd{font-family:var(--fh);font-size:clamp(18px,2.5vw,28px);font-weight:700;
             color:var(--w);letter-spacing:-.02em;margin-bottom:6px}
.ctt-form-sub{font-size:12px;color:var(--l2);margin-bottom:18px;font-weight:300;line-height:1.55}
.ctt-email-cta{display:flex;align-items:center;gap:10px;padding:12px 14px;
               background:rgba(0,200,232,.06);border:1px solid rgba(0,200,232,.15);margin-top:12px}
.ctt-email-cta a{font-size:13px;font-weight:700;color:var(--c)}
.ctt-email-cta span{font-size:11px;color:var(--l2)}

@media(max-width:768px){
  #s-contact .section-inner{grid-template-columns:1fr;overflow-y:auto}
  .ctt-left{border-right:none;border-bottom:1px solid rgba(0,200,232,.06)}
  .art-timeline{display:none}
}

/* ════════════════════════════════════════════════════════════════
   MUSIC — viral/crowd
   ════════════════════════════════════════════════════════════════ */
.mus-viral-counter{position:absolute;bottom:60px;right:24px;
                   display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:4}
.mvc{display:flex;align-items:center;gap:6px;background:rgba(6,6,13,.7);
     border:1px solid rgba(255,255,255,.06);padding:5px 10px}
.mvc-ico{font-size:11px}
.mvc-n{font-size:11px;font-weight:700;color:var(--c);font-family:var(--fm)}
.mvc-l{font-size:8px;color:var(--l3);letter-spacing:.06em}

/* ════════════════════════════════════════════════════════════════
   HERO — vinyl element
   ════════════════════════════════════════════════════════════════ */
.h-vinyl-hint{position:absolute;bottom:52px;right:24px;
              font-family:var(--fm);font-size:9px;color:rgba(0,200,232,.25);
              letter-spacing:.12em;text-transform:uppercase;pointer-events:none;z-index:4;
              animation:breathBig 4s ease-in-out infinite}


/* ══════════════════════════════════════════════════════════════════════════════
   BLINDAJE CROMÁTICO TOTAL — PUNTO 3 del informe
   Máxima especificidad: cubre todos los contextos donde aparecen .lg-l
   Estas reglas son las ÚLTIMAS del archivo → ganan cualquier herencia anterior
   ══════════════════════════════════════════════════════════════════════════════ */

/* Consonantes: blanco puro en TODOS los contextos */
.nlogo .lg-l.letter-w,
.h-name .lg-l.letter-w,
.s-ttl .lg-l.letter-w,
.gr-dale-play-btn .lg-l.letter-w,
#global-dale-play .lg-l.letter-w,
.lg-l.letter-w {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.08);
}

/* Ä y Ø: celeste de marca en TODOS los contextos */
.nlogo .lg-l.letter-c,
.nlogo .lg-l.lg-a,
.nlogo .lg-l.lg-o,
.h-name .lg-l.letter-c,
.h-name .lg-l.lg-a,
.h-name .lg-l.lg-o,
.s-ttl .lg-l.letter-c,
.gr-dale-play-btn .letter-c,
#global-dale-play .letter-c,
.lg-l.letter-c,
.lg-l.lg-a,
.lg-l.lg-o {
  color: var(--c) !important;
  text-shadow: 0 0 12px rgba(0,200,232,0.35);
}

/* DALE PLAY button styling */
.gr-dale-play-btn {
  background: transparent;
  border: 1px solid rgba(0,200,232,.4);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  color: #FFFFFF;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.gr-dale-play-btn:hover,
.gr-dale-play-btn:active {
  background: rgba(0,200,232,.12);
  border-color: var(--c);
}
.gr-dale-play-btn .dp-play { margin-left: 4px; }


/* ── PUNTO 2: Barras ecualizador colgando del nav en mobile ── */
@media(max-width:768px){
  .hm-faders{
    position:absolute !important;
    top:var(--nav-h,60px) !important;
    left:0;width:100%;
    height:12px !important;
    display:flex !important;
    justify-content:space-around;
    align-items:flex-start;
    z-index:999;
    pointer-events:none}
  .hm-faders span{
    width:2px !important;
    background:var(--c);
    transform-origin:top center !important;
    animation:hmFaderMobile calc(var(--bpm-speed,0.48s) * 0.7) ease-in-out infinite alternate !important}
}
@keyframes hmFaderMobile{
  0%  {transform:scaleY(0.2) translateZ(0);opacity:.4}
  100%{transform:scaleY(1.2) translateZ(0);opacity:1}
}


/* ══════════════════════════════════════════════════════════════════════════════
   DOCUMENTO REQUERIMIENTOS v2 — TODOS LOS PUNTOS CSS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── PUNTO 1: Proactive dialog neuro-greeting ─────────────────────────────── */
.welcome-text-container{display:block}
.premium-notice{
  color:var(--w);font-size:13px;line-height:1.65;
  font-weight:300;font-family:var(--fb, sans-serif);
  letter-spacing:.01em}
.dialog-subtext{
  display:block;margin-top:8px;
  font-size:11px;color:rgba(0,200,232,.7);
  font-weight:300;letter-spacing:.03em}

/* ── PUNTO 2: Hero subtitle centrado + línea eliminada + kick sync ─────────── */
.h-ey{
  text-align:center !important;
  justify-content:center !important;
  display:flex;align-items:center;
  transform:scale(calc(0.98 + var(--gr-kick-scale,1) * 0.02));
  opacity:calc(0.35 + var(--gr-kick-opacity,0) * 0.45);
  transition:transform .12s,opacity .3s;
  will-change:transform,opacity}
.h-ey::before{display:none !important}

/* ── PUNTO 3: Logo vibrack via CSS vars ──────────────────────────────────── */
.nlogo{
  transform:translate(
    calc((var(--gr-kick-scale,1) - 1) * -3px),
    calc((var(--gr-kick-scale,1) - 1) *  1.5px)
  );
  filter:drop-shadow(0 0 calc((var(--gr-kick-scale,1) - 1) * 28px) var(--c));
  will-change:transform,filter;
  transition:transform .05s,filter .1s}
/* Clase adicional para kick intenso */
.nlogo.logo-vibrack{
  animation:logoVibrack calc(var(--bpm-speed,.48s)) infinite steps(2)}
@keyframes logoVibrack{
  0%,100%{transform:translate(0,0) scale(1);filter:drop-shadow(0 0 2px var(--c))}
  50%{transform:translate(-1px,1px) scale(1.03);filter:drop-shadow(2px 0 10px var(--c))}}

/* ── PUNTO 4: DALE PLAY CTA breathe pulse ────────────────────────────────── */
.gr-dale-play-btn,
#global-dale-play{
  background:transparent;
  border:2px solid var(--c);
  box-shadow:0 0 15px rgba(0,229,255,.2);
  animation:ctaPulse 2s infinite ease-in-out}
@keyframes ctaPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(0,229,255,.3)}
  50%{transform:scale(1.05);box-shadow:0 0 30px var(--c);background:rgba(0,229,255,.1)}}

/* ── PUNTO 5: Ocultar logo watermark cn-bg en sección contacto ───────────── */
#s-connect .cn-bg{display:none !important}

/* ── PARTÍCULAS flotantes atmosféricas CARTØN ─────────────────────────────── */
@keyframes particleFloat{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  15%{opacity:var(--p-max-opacity,.6)}
  85%{opacity:var(--p-max-opacity,.6)}
  100%{transform:translate3d(var(--p-x,40px),var(--p-y,-120px),0) rotate(var(--p-rotate,45deg));opacity:0}}
.carton-particle{
  position:absolute;pointer-events:none;
  animation:particleFloat 8s ease-in-out infinite;
  animation-delay:var(--p-delay,0s)}
/* Freeze partículas en modo seguro/accesibilidad */
.safe-mode .carton-particle{animation-play-state:paused !important}

/* ── VIDEO BG ATMOSFÉRICO CARTØN ─────────────────────────────────────────── */
.video-bg-container{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:1;overflow:hidden;
  pointer-events:none;
  opacity:.08;
  filter:grayscale(30%) contrast(120%)}
.hypnotic-video{
  width:100%;height:100%;
  object-fit:cover}
/* Pausar en modo seguro */
.safe-mode .hypnotic-video{filter:none;opacity:0}

/* ── PUNTO 3/2: kick-active para .h-ey si se desea via clase JS ─────────── */
.h-ey.kick-active{
  animation:subtitlePulse calc(var(--bpm-speed,.48s) * .5) ease-in-out infinite alternate}
@keyframes subtitlePulse{
  0%{transform:scale(.98);opacity:.7}
  100%{transform:scale(1.02);opacity:1;text-shadow:0 0 8px var(--c)}}


/* ══════════════════════════════════════════════════════════════════════════════
   DOC 9 & DOC 10 — REFACTORIZACIÓN FINAL
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. DALE PLAY estados compacto / expandido ────────────────────────────── */
#mini-player.initial-cta{
  width:140px !important;height:42px !important;
  margin:0 auto;border-radius:20px;
  left:50% !important;right:auto !important;transform:translateX(-50%) !important;
  transition:all .4s cubic-bezier(.4,0,.2,1)}
#mini-player.player-expanded{
  width:92% !important;height:60px !important;border-radius:8px;
  left:4% !important;transform:none !important;
  transition:all .4s cubic-bezier(.4,0,.2,1)}

/* ── 3. Marquee del track name en el reproductor ─────────────────────────── */
.p-name-wrap{overflow:hidden;max-width:100%}
.player-track-title{
  display:inline-block;white-space:nowrap;
  animation:marquee 10s linear infinite}
@keyframes marquee{
  0%{transform:translate3d(100%,0,0)}
  100%{transform:translate3d(-100%,0,0)}}
/* Sin marquee si el texto cabe (se aplica solo cuando el contenido desborda) */
.p-name-wrap:not(:has(.player-track-title.overflow)) .player-track-title{
  animation-play-state:paused}
/* Pausar en safe-mode */
.safe-mode .player-track-title{animation-play-state:paused !important}

/* ── 4. WARRIOR color CSS — actualizar el color del tk-visual data-color ─── */
/* El color está en el atributo JS PLAYLIST, el CSS actúa como fallback */
.tk[data-track="WARRIOR"] .tk-title{color:#8A9A86 !important;text-shadow:0 0 20px #8A9A8644}

/* ── 6. Active state Escuchar en dock ────────────────────────────────────── */
.dock-btn.active svg,
.dock-btn.active i,
.dock-btn.active span{
  color:var(--c) !important;
  filter:drop-shadow(0 0 5px var(--c))}
.dock-btn.active .dock-carton-icon img{
  box-shadow:0 0 8px var(--c);border-radius:3px}

/* ── 8. Artista section: logo GRÄNDRØ como heading principal ─────────────── */
.art-name.art-logo{
  font-family:var(--fh);font-size:clamp(32px,7vw,72px);
  letter-spacing:.05em;line-height:1;
  font-weight:800;color:var(--w);
  text-align:center}
.art-name.art-logo .lg-l{
  transform:scale(var(--gr-kick-scale,1));
  filter:drop-shadow(0 0 calc((var(--gr-kick-scale,1) - 1) * 20px) var(--c));
  will-change:transform,filter;
  transition:transform .05s,filter .1s}
.art-civil-name{
  font-size:10px;letter-spacing:.2em;
  color:rgba(255,255,255,.3);text-transform:uppercase;
  margin-top:4px;font-family:var(--fm, sans-serif);
  text-align:center}

/* ── Doc10: reduce-motion global ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .player-track-title,.carton-particle,.logo-vibrack,
  .h-ey,.nlogo,.lg-l{animation:none !important;transition:none !important}
}
.reduce-motion .player-track-title,
.reduce-motion .carton-particle,
.safe-mode .logo-vibrack{animation:none !important}

/* ══════════════════════════════════════════════════════════════════════════════
   DIRECTIVAS v3 — 7 PUNTOS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 2. Logo kick sync: transición más snappy, logoIntro en nav ─────────────── */
@keyframes logoIntro{
  0%{transform:translateY(-20px) scale(0.8);opacity:0;filter:blur(5px)}
  100%{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}}
.nlogo .lg-l{animation:logoIntro 1.2s cubic-bezier(.16,1,.3,1) backwards}
.nlogo .lg-l:nth-child(2){animation-delay:.05s}
.nlogo .lg-l:nth-child(3){animation-delay:.1s}
.nlogo .lg-l:nth-child(4){animation-delay:.15s}
.nlogo .lg-l:nth-child(5){animation-delay:.2s}
.nlogo .lg-l:nth-child(6){animation-delay:.25s}
.nlogo .lg-l:nth-child(7){animation-delay:.3s}
/* reduce-motion: sin intro */
@media(prefers-reduced-motion:reduce){.nlogo .lg-l{animation:none}}

/* ── 3. Artista: pulso celeste en Ä y Ø del heading art-logo ────────────────── */
@keyframes artistPulseCeleste{
  0%{filter:brightness(1);text-shadow:0 0 8px rgba(0,200,232,.4)}
  100%{filter:brightness(1.3);text-shadow:0 0 20px rgba(0,200,232,.9)}}
.art-name.art-logo .letter-c,
.art-name.art-logo .lg-a,
.art-name.art-logo .lg-o{
  animation:artistPulseCeleste 2s ease-in-out infinite alternate}
.safe-mode .art-name.art-logo .letter-c,
.safe-mode .art-name.art-logo .lg-a{animation:none}

/* ── 6. Dock active: Escuchar activo hereda de sección anterior ─────────────── */
/* (ya cubierto) */

/* ── 7. Forzar animaciones fuera de safe-mode (no afecta safe-mode activo) ──── */
body:not(.safe-mode) .player-track-title,
body:not(.safe-mode) .carton-particle,
body:not(.safe-mode) .gr-dale-play-btn{animation-play-state:running}


/* ══════════════════════════════════════════════════════════════════════════════
   HOMOGENEIZACIÓN FINAL — LOGO + REPRODUCTOR
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── gr-brand-container: wrapper semántico del logo en TODOS los contextos ── */
.gr-brand-container{display:inline-flex;align-items:baseline;gap:0;line-height:1}
.gr-brand-container .letter-w{color:var(--w) !important}
.gr-brand-container .letter-c{color:var(--c) !important}
/* Contexto CARTØN: Ä y Ø en verde --c2 */
.carton-context .gr-brand-container .letter-c{color:var(--c2) !important}

/* ── 2. Títulos dinámicos con acento A/O ─────────────────────────────────── */
.title-accent-carton{color:var(--c2) !important;text-shadow:0 0 10px rgba(0,232,180,.3)}
.title-accent-grandro{color:var(--c) !important;text-shadow:0 0 10px rgba(0,200,232,.25)}
.title-accent-track{color:var(--current-track-color,var(--c)) !important}

/* ── 3. DALE PLAY invite-mode: fondo celeste + texto oscuro ─────────────── */
/* regla mp-invite limpiada */
#mini-player.invite-mode .mp-invite:hover{
  background:rgba(0,200,232,.85);transform:scale(1.01)}
#mini-player.invite-mode .mp-invite-icon{
  background:#000;color:var(--c)}
#mini-player.invite-mode .mp-invite-txt b{
  color:#000 !important;font-weight:800}
#mini-player.invite-mode .mp-invite-txt span{color:rgba(0,0,0,.7) !important}
#mini-player.invite-mode .mp-invite-wave i{background:#000;opacity:.6}

/* Texto del CTA: DALE PLAY en mayúsculas fijas */
/* #mp-invite-main::before eliminado — duplicado resuelto por DOM removal en JS */

/* player-trigger-pulse: compatible con la nueva nomenclatura del spec */
.player-trigger-pulse,
#mini-player.invite-mode{
  animation:playerDalePulse calc(var(--bpm-speed,.96s) * 2) infinite ease-in-out}
@keyframes playerDalePulse{
  0%,100%{box-shadow:0 0 0px rgba(0,200,232,0),0 20px 40px rgba(0,0,0,.7)}
  50%{box-shadow:0 0 20px rgba(0,200,232,.5),0 20px 40px rgba(0,0,0,.7)}}

/* Estado expandido / reproduciendo: fondo oscuro, controles al frente */
#mini-player:not(.invite-mode) .mp-active{
  animation:none}
#mini-player.player-expanded{
  transition:all .4s cubic-bezier(.4,0,.2,1)}

/* ── Mobile: DALE PLAY siempre visible, fondo celeste compacto ───────────── */
@media(max-width:768px){
  #mini-player.invite-mode{
    background:var(--c) !important;border-color:var(--c) !important;height:44px !important}
  #mini-player.invite-mode .mp-invite-txt b{font-size:12px !important}
  #mini-player.invite-mode .mp-invite-wave{display:none}
}


/* ══════════════════════════════════════════════════════════════════════════════
   CAPA DE COMPATIBILIDAD — spec doc §14
   Aliases CSS que mapean la nueva nomenclatura al sistema existente.
   NO reemplaza nada — solo añade nombres alternativos que producen el mismo
   resultado visual. El #mini-player y .lg-l siguen siendo el motor.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. REPRODUCTOR: fondo negro absoluto + reset visual ─────────────────── */
/* El #mini-player ya tiene fondo oscuro, lo llevamos a negro puro */
#mini-player{background:#000000 !important;border-top:2px solid #222 !important}
/* Invite-mode (estado DALE PLAY): override de la capa anterior */
#mini-player.invite-mode{
  background:#000000 !important;
  border-top:2px solid #222 !important;
  border-color:#222 !important}

/* El botón DALE PLAY (mp-invite + gr-dale-play-btn) → celeste sobre negro */
.mp-invite{background:transparent !important}
.mp-invite-icon{background:var(--c) !important;color:#000 !important}
.mp-invite-txt b{color:var(--w) !important}
/* DALE PLAY prominent en el centro */
#mp-invite-main{
  font-family:var(--fm),monospace;font-weight:900;
  font-size:1.1rem;letter-spacing:2px;color:var(--w) !important}

/* Alias .btn-dale-play → igual que el bloque invite animado */
.btn-dale-play{
  background:var(--c) !important;color:#000 !important;
  font-family:var(--fm),monospace;font-weight:900;
  font-size:1.1rem;padding:10px 30px;border:none;cursor:pointer;
  letter-spacing:2px;
  animation:playPulse calc(var(--bpm-speed,.96s) * 2) infinite ease-in-out}

/* Alias .player-black-block → #mini-player */
.player-black-block{
  position:fixed;bottom:0;left:0;width:100%;
  background:#000000 !important;border-top:2px solid #222;
  padding:15px 20px;z-index:9999;
  display:flex;justify-content:center;align-items:center}

/* Alias .player-active-layout → .mp-active */
.player-active-layout,.mp-active{
  display:flex;width:100%;max-width:1200px;
  justify-content:space-between;align-items:center}
.gr-hidden{display:none !important}

/* player-ctrl-btn → alias de .p-btn */
.player-ctrl-btn{
  background:transparent;border:1px solid #333;
  color:var(--w);padding:8px 16px;cursor:pointer;font-family:monospace}
.player-ctrl-btn:hover{background:var(--w);color:#000}

/* ── 2. LOGO: alias .gr-kick-letter / .accent-cyan ──────────────────────── */
/* .gr-kick-letter = alias de .lg-l (misma animación GPU ya activa) */
.gr-kick-letter{
  display:inline-block;
  transform:scale(var(--gr-kick-scale,1)) scale(var(--gr-kick-trigger,1));
  will-change:transform;
  transition:transform .04s cubic-bezier(0,0,.2,1)}
/* .accent-cyan = alias de .letter-c */
.accent-cyan,.gr-home-logo-container .accent-cyan{
  color:var(--c) !important;text-shadow:0 0 12px rgba(0,200,232,.35)}
/* .gr-home-logo-container = alias de .nlogo / .h-name */
.gr-home-logo-container{
  font-family:var(--fh),sans-serif;font-weight:900;
  font-size:3.5rem;letter-spacing:4px;color:var(--w)}

/* title-accent aliases ya existentes se mantienen */


/* ══════════════════════════════════════════════════════════════════════════════
   REPRODUCTOR FINAL — ÓVALO DALE PLAY + ACTIVE-MODE EXPANDIDO
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── INTERIOR SIEMPRE OCULTO — selectores ID (especificidad 100) ─────────── */
#mp-invite{display:none !important}
#mp-active{display:none !important}
#mini-player.active-mode #mp-active{display:flex !important}
#mp-queue{display:none !important}

/* ── ESTADO BASE / ÓVALO DALE PLAY ──────────────────────────────────────── */
#mini-player:not(.active-mode){
  position:fixed !important;left:50% !important;bottom:36px !important;
  transform:translateX(-50%) !important;
  width:180px !important;height:50px !important;
  background:#000 !important;border:2px solid var(--c) !important;border-radius:25px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:0 !important;cursor:pointer !important;
  box-shadow:0 0 22px rgba(0,200,232,.4) !important;
  z-index:9999 !important;
  animation:ovalPulse calc(var(--bpm-speed,.96s) * 2) infinite ease-in-out !important;
  transition:all .4s cubic-bezier(.25,1,.5,1) !important}

@keyframes ovalPulse{
  0%,100%{box-shadow:0 0 16px rgba(0,200,232,.3)}
  50%{box-shadow:0 0 36px rgba(0,200,232,.7),0 0 60px rgba(0,200,232,.2)}}

#mini-player:not(.active-mode)::before{
  content:attr(data-dp-label) !important;
  font-family:var(--fh) !important;font-size:11px !important;
  font-weight:800 !important;letter-spacing:.14em !important;
  color:var(--c) !important;background:transparent !important;
  position:static !important;transform:none !important;
  border:none !important;box-shadow:none !important;padding:0 !important}

/* ── ESTADO ACTIVO: Pill expandida ──────────────────────────────────────── */
#mini-player.active-mode{
  position:fixed !important;left:50% !important;bottom:36px !important;
  transform:translateX(-50%) !important;
  width:min(560px,94vw) !important;height:68px !important;
  background:#000 !important;border:1px solid rgba(0,200,232,.35) !important;
  border-radius:34px !important;padding:0 18px !important;
  display:flex !important;align-items:center !important;
  animation:none !important;z-index:9999 !important;
  box-shadow:0 4px 28px rgba(0,0,0,.7) !important;
  transition:all .4s cubic-bezier(.25,1,.5,1) !important}

#mini-player.active-mode::before{display:none !important}

/* Layout interno del active */
#mini-player.active-mode #mp-active{
  display:flex !important;align-items:center !important;
  gap:12px !important;width:100% !important;height:100% !important}

/* Ocultar metadata innecesaria */
#mini-player.active-mode .p-emoji,
#mini-player.active-mode .p-album,
#mini-player.active-mode .mp-invite-wave,
#mini-player.active-mode .p-queue-btn,
#mini-player.active-mode .mp-invite-tap-label,
#mini-player.active-mode .p-x{display:none !important}

/* ── Botón MINIMIZAR ⌄ — siempre visible ─────────────────────────────────── */
#mini-player.active-mode .p-collapse-btn{
  display:flex !important;align-items:center;justify-content:center;
  flex-shrink:0;width:24px;height:24px;
  background:transparent;border:none;color:rgba(255,255,255,.45);
  font-size:14px;cursor:pointer;transition:color .2s}
#mini-player.active-mode .p-collapse-btn:hover{color:var(--c)}

/* Nombre del track */
#mini-player.active-mode .p-info{flex-shrink:0;max-width:100px;overflow:hidden}
#mini-player.active-mode #p-name{
  font-family:var(--fh) !important;font-size:12px !important;font-weight:700 !important;
  color:#fff !important;white-space:nowrap !important;
  overflow:hidden !important;text-overflow:ellipsis !important;
  display:block !important;animation:none !important}

/* ── Barra de progreso + tiempos ─────────────────────────────────────────── */
#mini-player.active-mode .p-bar-wrap{
  flex:1;min-width:0;
  display:flex !important;flex-direction:column;gap:4px;cursor:pointer}
#mini-player.active-mode .p-bar-track{
  height:5px;border-radius:3px;
  background:rgba(255,255,255,.16);position:relative;overflow:visible}
#mini-player.active-mode .p-bar{
  position:absolute;left:0;top:0;height:5px;
  background:var(--c);border-radius:3px;
  box-shadow:0 0 8px rgba(0,200,232,.65);
  transition:width .25s linear}
#mini-player.active-mode .p-bar::after{
  content:'';position:absolute;right:-4px;top:50%;
  width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 6px rgba(0,200,232,.9);
  transform:translate(50%,-50%);
  opacity:0;transition:opacity .2s}
#mini-player.active-mode .p-bar-wrap:hover .p-bar::after{opacity:1}
#mini-player.active-mode .p-times{
  display:flex !important;justify-content:space-between}
#mini-player.active-mode .p-time-cur,
#mini-player.active-mode .p-time-dur{
  font-family:var(--fm),monospace;font-size:10px;
  color:rgba(255,255,255,.65);letter-spacing:.04em}

/* ── Controles ─────────────────────────────────────────────────────────────── */
#mini-player.active-mode .p-ctrl{
  display:flex !important;align-items:center !important;gap:8px !important;flex-shrink:0}
#mini-player.active-mode .p-btn{
  color:#fff !important;background:transparent;border:none;cursor:pointer;
  opacity:.8;transition:opacity .2s}
#mini-player.active-mode .p-btn:hover{opacity:1;color:var(--c) !important}
#mini-player.active-mode .p-play-btn{
  background:var(--c) !important;color:#000 !important;
  width:34px !important;height:34px !important;border-radius:50% !important;
  border:none;cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  #mini-player:not(.active-mode){bottom:calc(var(--dock-h,60px) + 14px) !important}
  #mini-player.active-mode{
    left:3% !important;right:3% !important;
    transform:none !important;width:94% !important;
    bottom:calc(var(--dock-h,60px) + 12px) !important;
    border-radius:16px !important;padding:0 12px !important;
    gap:8px !important}
  /* El volumen se maneja con los botones físicos del teléfono — sacarlo libera
     el espacio que la barra de progreso necesita para no verse amontonada */
  #mini-player.active-mode .p-vol-slider,
  #mini-player.active-mode #p-vol-icon{display:none !important}
  #mini-player.active-mode .p-info{max-width:64px}
  #mini-player.active-mode .p-collapse-btn{width:20px;flex-shrink:0}
  #mini-player.active-mode .p-ctrl{gap:4px !important}
  #mini-player.active-mode .p-btn{padding:4px !important}
  #mini-player.active-mode .p-play-btn{
    width:30px !important;height:30px !important;font-size:11px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRANDROVIBE — Animación orgánica en todas las letras .lg-l
   ══════════════════════════════════════════════════════════════════════════════ */
@keyframes grandroVibe{
  0%{transform:translateY(0) scale(1);text-shadow:0 0 4px rgba(0,200,232,.2)}
  50%{transform:translateY(-3px) scale(1.06);text-shadow:0 0 12px rgba(0,200,232,.6)}
  100%{transform:translateY(1px) scale(.97);text-shadow:0 0 2px rgba(0,200,232,.1)}}

.lg-l{display:inline-block !important;will-change:transform,text-shadow !important;
  animation:grandroVibe calc(var(--bpm-speed,.96s) * 2) ease-in-out infinite alternate !important}
.lg-l:nth-child(1){animation-delay:0s !important}
.lg-l:nth-child(2){animation-delay:calc(var(--bpm-speed,.96s)*.14) !important}
.lg-l:nth-child(3){animation-delay:calc(var(--bpm-speed,.96s)*.28) !important}
.lg-l:nth-child(4){animation-delay:calc(var(--bpm-speed,.96s)*.42) !important}
.lg-l:nth-child(5){animation-delay:calc(var(--bpm-speed,.96s)*.56) !important}
.lg-l:nth-child(6){animation-delay:calc(var(--bpm-speed,.96s)*.70) !important}
.lg-l:nth-child(7){animation-delay:calc(var(--bpm-speed,.96s)*.84) !important}
.lg-l.letter-w{color:#FFFFFF}
.lg-l.letter-c,.lg-l.lg-a,.lg-l.lg-o{color:var(--c)}
@media(prefers-reduced-motion:reduce){.lg-l{animation:none !important}}
.safe-mode .lg-l,.reduce-motion .lg-l{animation:none !important}


/* ══════════════════════════════════════════════════════════════════════════════
   PLAYER CLEARANCE — evita que el reproductor tape contenido
   El player tiene height:54px + bottom:36px = 90px desde el fondo.
   Todas las secciones scrollables necesitan padding-bottom para que el usuario
   pueda scrollar hasta ver el último elemento sin que el player lo tape.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Desktop: clearance = 54px player + 36px bottom + 24px margen visual = 114px */
#s-connect .section-inner,
#s-connect .cn-links,
#s-connect .cn-booking-module{
  padding-bottom: 114px}

/* Cualquier section-inner que sea scrollable en desktop */
.section-inner{
  scroll-padding-bottom: 114px}

/* Mobile: clearance = dock-h + 54px player + 12px gap + 24px margen */
@media(max-width:768px){
  #s-connect .section-inner,
  #s-connect .cn-links,
  #s-connect .cn-booking-module{
    padding-bottom: calc(var(--dock-h, 60px) + 90px) !important}
  
  /* En mobile las sections son overflow-y:auto — el padding hace el trabajo */
  .section{padding-bottom: calc(var(--dock-h, 60px) + 70px)}
}

/* La sección de contacto necesita overflow-y:auto en desktop para poder scrollear */
#s-connect .section-inner{
  overflow-y: auto;
  /* sin overflow:hidden que bloquee el scroll */
}

/* ══ FIX DEFINITIVO DALE PLAY DUPLICADO ════════════════════════════════════════
   Oculta TODOS los hijos directos de #mini-player cuando no está en active-mode.
   El ::before (el óvalo DALE PLAY) NO es un hijo — sobrevive y muestra el CTA.
   Ninguna regla que apunte al hijo puede ganar contra el padre con !important.
   ══════════════════════════════════════════════════════════════════════════════ */
#mini-player:not(.active-mode) > *{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important}

/* Cuando SÍ está active-mode: solo mostramos #mp-active */
#mini-player.active-mode > #mp-active{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important}

/* ══════════════════════════════════════════════════════════════════════════════
   AJUSTES FINALES — doc §16
   ══════════════════════════════════════════════════════════════════════════════ */

/* §1 — Seguro adicional contra duplicados mp-invite */
#mp-invite,.mp-invite,
iframe[src*="generic-player"],
[id*="player-generic"]{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important}

/* §2 — player-collapsed: texto dinámico desde --player-status-text */
#mini-player.player-collapsed:not(.active-mode)::before{
  content:var(--player-status-text,'▶  DALE  PLAY') !important}

/* §3 — Artista: identidad visual homogénea con hero */
#s-artist .art-name{
  font-family:var(--fh);font-weight:800;
  letter-spacing:-.04em;line-height:1;
  text-shadow:0 0 12px rgba(0,200,232,.4)}
#s-artist .art-name .lg-l{
  display:inline-block;
  transform:scale(var(--gr-kick-scale,1));
  opacity:calc(0.7 + var(--gr-kick-opacity,0) * 0.3);
  will-change:transform,opacity;
  transition:color .2s,transform .08s cubic-bezier(.25,1,.5,1),opacity .12s ease-out}
#s-artist .art-name .lg-l.letter-c,
#s-artist .art-name .lg-l.lg-a,
#s-artist .art-name .lg-l.lg-o{color:var(--c) !important}

/* §5 — Sección Contacto: título dinámico multi-línea */
#s-connect .contacto-head{margin-bottom:32px}
.contacto-title{
  font-family:var(--fh);font-size:clamp(32px,6vw,76px);
  font-weight:900;line-height:.95;letter-spacing:-.03em;
  color:var(--w);text-transform:uppercase;text-align:center}
.contacto-title .line-top{
  display:block;color:var(--w);
  animation:textGlitchIntro 1s cubic-bezier(.2,.8,.2,1) forwards}
.contacto-title .line-bottom{
  display:block;color:var(--c);
  text-shadow:0 0 20px rgba(0,200,232,.6);
  font-size:.85em;margin-top:4px}
@keyframes textGlitchIntro{
  0%{transform:translateY(20px);opacity:0}
  100%{transform:translateY(0);opacity:1}}

/* §6 — sr-only para accesibilidad/crawlers */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══ CONTACT SECTION FIXES ══════════════════════════════════════════════════ */

/* Fix desktop: anular align-items:flex-start que venía de la regla compartida */
@media(min-width:769px){
  #s-connect .section-inner{
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding-top:calc(var(--nav-h,46px) + 24px) !important;
    padding-bottom:130px !important}
  /* Hacer visible el título contacto en desktop */
  #s-connect .contacto-head,
  #s-connect .contacto-title{display:block !important;opacity:1 !important}
  #s-connect .cn-subtitle{
    font-family:var(--fb,sans-serif);font-size:clamp(14px,2vw,18px);
    color:rgba(255,255,255,.65);margin-top:16px;
    max-width:480px;text-align:center;line-height:1.5}
}

/* Fix mobile: reducir el padding-bottom excesivo (220px → mucho más razonable) */
@media(max-width:768px){
  #s-connect .section-inner{
    padding-bottom:calc(var(--dock-h,60px) + 90px) !important}
}

/* ══ FIX FINAL — 3 PUNTOS ═══════════════════════════════════════════════════ */

/* §1 — Minimizar reproductor: desliza hacia abajo, visible solo el borde */
#mini-player{transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .3s, width .4s, height .4s, border-radius .4s !important}

/* Desktop active: base es translateX(-50%), minimized añade translateY */
#mini-player.active-mode.minimized{
  transform:translateX(-50%) translateY(calc(100% + 16px)) !important;
  opacity:.9 !important}
/* Desktop oval (no active): */
#mini-player:not(.active-mode).minimized{
  transform:translateX(-50%) translateY(calc(100% + 16px)) !important;
  opacity:.9 !important}
/* Mobile: sin translateX */
@media(max-width:768px){
  #mini-player.minimized{
    transform:translateY(calc(100% + 16px)) !important;
    opacity:.9 !important}
}
/* Hover sobre minimizado → sube un poco para indicar que es clickeable */
#mini-player.minimized:hover{
  transform:translateX(-50%) translateY(calc(100% - 2px)) !important;
  opacity:1 !important}
@media(max-width:768px){
  #mini-player.minimized:hover{
    transform:translateY(calc(100% - 2px)) !important}}

/* §2 — Contacto título: z-index y visibilidad garantizada */
.contacto-head{position:relative;z-index:20 !important}
.contacto-title{
  display:block !important;visibility:visible !important;
  opacity:1 !important;z-index:20;position:relative}
.contacto-title .line-top,.contacto-title .line-bottom{
  display:block !important;visibility:visible !important;opacity:1 !important}
/* Asegurar que el cn-bg watermark quede detrás */
#s-connect .cn-bg.gr-brand{z-index:0 !important;pointer-events:none}
#s-connect .section-inner{z-index:2;position:relative}

/* ══ FIX CONTACTO DEFINITIVO ════════════════════════════════════════════════ */

/* El section-inner hereda flex-direction:row por defecto.
   Sin column los items van en FILA y el título sale fuera de pantalla. */
#s-connect .section-inner{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow-y:auto;
  padding-top:calc(var(--nav-h,46px) + 20px) !important;
  padding-bottom:130px !important}

/* Asegurar z-index y visibilidad del título */
#s-connect .contacto-head{
  position:relative;z-index:15;
  display:block !important;flex-shrink:0}
#s-connect .contacto-title{
  display:block !important;visibility:visible !important;opacity:1 !important;
  font-family:var(--fh);font-size:clamp(32px,6vw,76px);
  font-weight:900;line-height:.95;letter-spacing:-.03em;
  color:var(--w);text-transform:uppercase;text-align:center}
#s-connect .contacto-title .line-top{display:block !important;color:var(--w)}
#s-connect .contacto-title .line-bottom{
  display:block !important;color:var(--c) !important;
  text-shadow:0 0 20px rgba(0,200,232,.6);font-size:.85em;margin-top:4px}
#s-connect .cn-subtitle{
  color:rgba(255,255,255,.65);font-size:clamp(13px,1.8vw,16px);
  margin-top:14px;line-height:1.5;max-width:480px;
  position:relative;z-index:15}

/* El watermark cn-bg detrás y pequeño */
#s-connect .cn-bg{
  position:absolute !important;z-index:0 !important;
  opacity:.07 !important;pointer-events:none !important;
  font-size:clamp(60px,14vw,180px) !important;
  top:50%;left:50%;
  transform:translate(-50%,-50%) !important;
  white-space:nowrap;user-select:none}

/* Track name: más espacio en el player activo */
#mini-player.active-mode .p-info{flex-shrink:0;max-width:140px !important;overflow:hidden}
@media(max-width:768px){
  #mini-player.active-mode .p-info{max-width:100px !important}}

/* ══ FIXES DEFINITIVOS ══════════════════════════════════════════════════════ */

/* Fix 2: dialog z-index sobre el reproductor */
#gr-proactive-dialog{z-index:10200 !important}

/* Fix 3: CONTACTO — section-inner en columna, título visible */
/* Usando specificity máxima para ganar sobre cualquier regla anterior */
html body #s-connect .section-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  overflow-y:auto !important;
  padding-top:calc(var(--nav-h,46px) + 32px) !important;
  padding-bottom:140px !important;
  gap:0}

/* cn-bg watermark: absolutamente fuera del flujo y detrás */
html body #s-connect .cn-bg{
  display:none !important}

/* cn-photo: absolute, no toma espacio en el flujo flex */
html body #s-connect .cn-photo{
  position:absolute !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:.15 !important}

/* contacto-head: primer elemento visible */
html body #s-connect .contacto-head{
  position:relative !important;
  z-index:10 !important;
  display:block !important;
  margin-bottom:20px !important}

/* título visible siempre */
html body #s-connect .contacto-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  font-family:var(--fh);
  font-size:clamp(28px,5vw,68px) !important;
  font-weight:900 !important;
  line-height:.95 !important;
  letter-spacing:-.03em !important;
  color:var(--w) !important;
  text-transform:uppercase !important}

html body #s-connect .contacto-title .line-top{
  display:block !important;
  color:var(--w) !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important}

html body #s-connect .contacto-title .line-bottom{
  display:block !important;
  color:var(--c) !important;
  text-shadow:0 0 16px rgba(0,200,232,.5) !important;
  font-size:.8em !important;
  margin-top:4px !important;
  opacity:1 !important;
  animation:none !important}

/* Fix 4: reducir espacio entre elementos de contacto */
html body #s-connect .cn-sub{margin:8px 0 !important;font-size:11px !important}
html body #s-connect .press-tags{margin:10px 0 !important;gap:6px !important}
html body #s-connect .cn-actions{margin:12px 0 !important;gap:8px !important}
html body #s-connect .cn-links{margin-top:12px !important}
html body #s-connect .cn-links .ft-link{padding:8px 0 !important;font-size:11px !important}
html body #s-connect .cn-booking-module{margin-top:16px !important}
html body #s-connect .cn-subtitle{margin-top:10px !important;font-size:13px !important;color:rgba(255,255,255,.6)}

/* ══ CONTACTO: reordenar elementos con flex order para que los links sean visibles ══
   El cn-booking-module quedó al final (orden natural del HTML) pero empuja
   los links sociales fuera del viewport. Con flex order los mostramos antes. */

html body #s-connect .contacto-head     { order: 1 }
html body #s-connect .cn-subtitle       { order: 2 }
html body #s-connect .cn-sub            { order: 3; font-size:11px !important; margin:6px 0 !important }
html body #s-connect .cn-actions        { order: 4; margin:10px 0 !important; gap:8px !important }
html body #s-connect .cn-links          { order: 5; margin:14px 0 !important }
html body #s-connect .press-tags        { order: 6; margin:8px 0 !important }
html body #s-connect .cn-booking-module { order: 7; margin-top:14px !important }

/* Links sociales: visibles, bien espaciados */
html body #s-connect .cn-links {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:16px 28px !important;
  position:relative !important;
  z-index:10 !important}

html body #s-connect .cnl {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
  text-decoration:none !important;
  opacity:1 !important}

html body #s-connect .cnll {
  font-size:8px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.45) !important;
  display:block !important}

html body #s-connect .cnlh {
  font-size:12px !important;
  font-weight:700 !important;
  color:#ffffff !important;
  display:block !important}

/* Booking module: compacto para no empujar */
html body #s-connect .cn-booking-module {
  max-width:480px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important}

html body #s-connect .cn-booking-module > div[style] {
  gap:6px !important}

html body #s-connect .bk-show-item,
html body #s-connect .cn-show-item {
  padding:8px 12px !important}

/* ══ TASK 1: CONTACTO COMPACTO ══════════════════════════════════════════════ */

/* Eliminar el gap excesivo entre elementos */
html body #s-connect .section-inner{gap:0 !important}

html body #s-connect .contacto-head    {margin-bottom:10px !important}
html body #s-connect .cn-subtitle      {margin-top:8px !important;margin-bottom:0 !important}
html body #s-connect .cn-sub           {margin:4px 0 !important}
html body #s-connect .cn-actions       {margin:10px 0 8px !important}
html body #s-connect .cn-links         {margin:6px 0 10px !important}
html body #s-connect .press-tags       {margin:6px 0 !important}
html body #s-connect .cn-booking-module{margin-top:10px !important}

/* Watermark GRÄNDRØ: absolutamente invisible (no ocupa espacio flex) */
html body #s-connect .cn-bg,
html body #s-connect .gr-brand.cn-bg  {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important}

/* TASK 2: p-meta en el player — debajo del nombre del track */
#mini-player.active-mode .p-meta{
  font-size:9px;
  color:rgba(0,200,232,.65);
  font-family:var(--fm),monospace;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:0;
  max-width:130px}
@media(max-width:768px){
  #mini-player.active-mode .p-meta{max-width:90px}}

/* p-info ahora contiene nombre + meta */
#mini-player.active-mode .p-info{
  flex-shrink:0;
  max-width:150px !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:1px}
@media(max-width:768px){
  #mini-player.active-mode .p-info{max-width:100px !important}}

/* ══════════════════════════════════════════════════════════════════════════════
   DOCUMENTO CR — PUNTOS CSS (5, 6, 7)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── PUNTO 2: Artist background video visible ──────────────────────────────── */
#s-artist .sec-bg-video{
  position:absolute !important;top:0;left:0;
  width:100% !important;height:100% !important;
  object-fit:cover;z-index:0;
  opacity:.75 !important;pointer-events:none;display:block !important}


/* ── PUNTO 6: BPM animation sync — animation-duration compartido ────────── */
.gr-brand-container .lg-l,
.nlogo .lg-l,
.h-name .lg-l{animation-duration:calc(var(--bpm-speed,.96s) * 2) !important}

/* ── PUNTO 7: Contacto typography premium ──────────────────────────────────── */
html body #s-connect .contacto-title .line-top{
  font-family:'Unbounded',var(--fh),sans-serif !important;
  font-size:clamp(28px,4.5vw,64px) !important;
  color:#FFFFFF !important;
  font-weight:900 !important;
  animation:none !important;
  /* Fade-in con desplazamiento suave al activarse la sección */
  opacity:1 !important;transform:none !important}

html body #s-connect .contacto-title .line-bottom{
  font-family:'Unbounded',var(--fh),sans-serif !important;
  font-size:clamp(18px,3.5vw,52px) !important;
  color:var(--c) !important;font-weight:700 !important}

html body #s-connect .cn-subtitle{
  font-family:'Space Grotesk',var(--fb),sans-serif !important;
  font-size:clamp(14px,2vw,18px) !important;
  color:var(--c) !important;line-height:1.5;
  max-width:520px !important;text-align:center}

/* Pie de página / textos legales */
.footer-legal,.cn-legal,footer .legal,#s-connect .cn-footnote{
  font-family:'DM Mono',var(--fm),monospace !important;
  font-size:10px !important;
  color:rgba(200,216,232,.4) !important;
  letter-spacing:.04em}

/* ── PUNTO 9: DALE PLAY button en dialog ─────────────────────────────────── */
.dp-dialog-btn:hover{
  background:rgba(0,200,232,.85) !important;
  transform:scale(1.04)}

/* ══════════════════════════════════════════════════════════════════════════════
   ENTREGA FINAL CSS — AUDIT TÉCNICO GRÄNDRØ
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── PUNTO 1: Sticky close button en modals ──────────────────────────────── */
.manifesto-close,.interview-close,.modal-close,
.cx-lightbox .close-btn,
#overlay .ov-close{
  position:sticky !important;
  top:16px !important;float:right !important;
  z-index:9000 !important;
  background:rgba(0,0,0,.6) !important;
  border:1px solid rgba(0,200,232,.3) !important;
  border-radius:50% !important;
  width:36px !important;height:36px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  cursor:pointer;transition:background .2s}
.manifesto-close:hover,.interview-close:hover,.modal-close:hover{background:rgba(0,200,232,.2) !important}

/* ── PUNTO 2: Souvenir notification toast ─────────────────────────────────── */
.souvenir-notif{
  position:fixed;bottom:calc(var(--dock-h,60px) + 80px);right:20px;
  background:#070710;border:1px solid rgba(0,200,232,.5);border-radius:12px;
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  z-index:10500;
  box-shadow:0 8px 32px rgba(0,200,232,.2);
  transform:translateY(20px);opacity:0;
  transition:all .4s cubic-bezier(.25,1,.5,1);
  max-width:320px}
.souvenir-notif.sv-on{transform:translateY(0);opacity:1}
.sv-icon{font-size:24px;flex-shrink:0}
.sv-txt{display:flex;flex-direction:column;gap:2px;flex:1}
.sv-txt b{font-family:var(--fh);font-size:9px;letter-spacing:.14em;color:var(--c);text-transform:uppercase}
.sv-txt span{font-size:12px;color:var(--w);font-weight:500}
.sv-dl{
  background:var(--c);color:#000;border:none;border-radius:6px;
  padding:6px 10px;font-family:var(--fh);font-size:9px;font-weight:800;
  letter-spacing:.1em;cursor:pointer;white-space:nowrap;flex-shrink:0}
.sv-dl:hover{opacity:.85}

/* ── PUNTO 4c: font-display:swap (ya en Google Fonts URL) + preconnect mejorado ──── */
/* Asegurar que las fuentes en uso tengan fallback correcto mientras cargan */
body{font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

/* ══════════════════════════════════════════════════════════════════════════════
   FIXES FINALES — LAYOUT ARTISTA + CONTACTO 2 COLS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fix 3: Artista — tipografía fluida, sin scroll, sin recortes ─────────── */
#s-artist .art-bio p,
#s-artist .art-bio div,
#s-artist .art-bio .art-mf-body{
  font-size:clamp(11px,1.15vw,14px) !important;
  line-height:1.55 !important}

#s-artist .art-bio h2,
#s-artist .art-bio .art-name{
  font-size:clamp(28px,4vw,56px) !important}

#s-artist .art-bio h3{
  font-size:clamp(13px,1.4vw,17px) !important}

#s-artist .art-bio .art-tag,
#s-artist .art-tags .tag{
  font-size:clamp(8px,.9vw,11px) !important;padding:3px 8px !important}


/* ── Fix 4: Contacto — 2 columnas en desktop, sin scroll excesivo ─────────── */
@media(min-width:769px){
  html body #s-connect .section-inner{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    align-items:start !important;
    justify-content:center !important;
    gap:0 48px !important;
    padding-top:calc(var(--nav-h,46px) + 28px) !important;
    padding-bottom:80px !important;
    padding-left:4vw !important;
    padding-right:4vw !important;
    text-align:left !important;
    overflow-y:auto !important}

  /* Columna IZQUIERDA: título + subtítulo + acciones de contacto */
  html body #s-connect .contacto-head  {grid-column:1;grid-row:1}
  html body #s-connect .cn-subtitle    {grid-column:1;grid-row:2;margin-top:8px !important}
  html body #s-connect .cn-sub         {grid-column:1;grid-row:3}
  html body #s-connect .cn-actions     {grid-column:1;grid-row:4;justify-content:flex-start !important}
  html body #s-connect .cn-links       {grid-column:1;grid-row:5;justify-content:flex-start !important}

  /* Columna DERECHA: tipos de show + presskit */
  html body #s-connect .press-tags     {grid-column:2;grid-row:1;margin-top:0 !important}
  html body #s-connect .cn-booking-module{grid-column:2;grid-row:2 / span 4;margin-top:0 !important}

  /* Reset de text-align para la columna izquierda */
  html body #s-connect .contacto-title{text-align:left !important}
  html body #s-connect .cn-subtitle{text-align:left !important}
  html body #s-connect .cn-sub{text-align:left !important}
}

@media(max-width:768px){
  /* Mobile: columna única, mantener flow vertical */
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    text-align:center !important}
}

/* ══ Fix 1: CONTACTO — tarjetas con guía visual y jerarquía tipográfica ══════ */

/* Tarjeta izquierda: CTA principal de contacto */
@media(min-width:769px){
  html body #s-connect .contacto-head {
    background:rgba(0,200,232,.04);
    border:1px solid rgba(0,200,232,.12);
    border-radius:16px;
    padding:24px 28px;
    margin-bottom:10px !important}

  html body #s-connect .cn-actions {
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    padding:16px 18px;
    margin-top:14px !important}

  html body #s-connect .cn-links {
    background:rgba(0,0,0,.2);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    padding:14px 18px;
    margin-top:8px !important}

  /* Tarjeta derecha: tipos de show */
  html body #s-connect .cn-booking-module{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(0,200,232,.1);
    border-radius:16px;
    padding:20px 22px}

  html body #s-connect .press-tags{
    background:rgba(0,200,232,.05);
    border:1px solid rgba(0,200,232,.1);
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:10px !important}

  /* Etiqueta de sección para cada tarjeta */
  html body #s-connect .cn-section-label{
    font-family:var(--fm),monospace;
    font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(0,200,232,.55);
    margin-bottom:10px;display:block}

  /* Acción directa — destacar email/WA */
  html body #s-connect .cn-btn,
  html body #s-connect .btn-channel{
    font-size:12px !important;padding:9px 16px !important}

  /* Titulo Unbounded con contorno definido */
  html body #s-connect .line-top{
    font-size:clamp(24px,3.5vw,52px) !important;
    letter-spacing:-.02em !important}

  /* Links sociales: iconos + labels claros */
  html body #s-connect .cnll{
    font-size:7px !important;letter-spacing:.2em !important}
  html body #s-connect .cnlh{
    font-size:13px !important;font-weight:600 !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   PULIDO FINAL — CONTACTO + ARTISTA
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fix 3: CONTACTO — diseño contundente inspirado en el cierre de CARTØN ─ */
/* Reset del grid anterior y rediseño completo */
@media(min-width:769px){

  html body #s-connect .section-inner{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:0 36px !important;
    align-items:start !important;
    padding:calc(var(--nav-h,46px) + 32px) 5vw 60px !important;
    text-align:left !important;
    overflow-y:auto !important}

  /* COLUMNA IZQUIERDA: título + acción directa */
  html body #s-connect .contacto-head   {grid-column:1;grid-row:1;margin-bottom:0 !important;
    background:rgba(0,200,232,.06);border:1px solid rgba(0,200,232,.2);border-radius:16px;padding:28px 28px 20px !important}
  html body #s-connect .cn-subtitle     {grid-column:1;grid-row:2;margin-top:10px !important;
    font-size:clamp(13px,1.6vw,16px) !important}
  html body #s-connect .cn-sub          {grid-column:1;grid-row:3;margin:6px 0 !important;
    font-size:10px !important;opacity:.55}
  html body #s-connect .cn-actions      {grid-column:1;grid-row:4;margin-top:14px !important;
    display:flex !important;flex-direction:column !important;gap:10px !important}
  html body #s-connect .cn-links        {grid-column:1;grid-row:5;margin-top:12px !important;
    background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
    border-radius:12px;padding:16px 18px !important}

  /* BOTONES DE ACCIÓN principales — estilo CARTØN */
  html body #s-connect .cn-btn{
    display:flex !important;align-items:center;justify-content:center;
    padding:13px 20px !important;border-radius:8px !important;
    font-family:var(--fh) !important;font-size:12px !important;
    font-weight:800 !important;letter-spacing:.1em !important;
    text-decoration:none;width:100%;box-sizing:border-box;
    background:transparent !important;
    border:2px solid var(--c) !important;
    color:var(--c) !important;
    transition:background .2s,color .2s !important}
  html body #s-connect .cn-btn:hover{
    background:var(--c) !important;color:#000 !important}

  html body #s-connect .btn-whatsapp{
    background:#25D366 !important;border-color:#25D366 !important;
    color:#fff !important;font-size:12px !important;
    font-family:var(--fh) !important;font-weight:800 !important;
    letter-spacing:.1em !important;padding:13px 20px !important;
    border-radius:8px !important;width:100%;box-sizing:border-box}
  html body #s-connect .btn-whatsapp:hover{background:#128C7E !important;border-color:#128C7E !important}

  /* COLUMNA DERECHA: tipos de show + presskit */
  html body #s-connect .press-tags{grid-column:2;grid-row:1;margin:0 !important;
    background:rgba(0,0,0,.4);border:1px solid rgba(0,200,232,.15);
    border-radius:12px;padding:12px 16px !important}
  html body #s-connect .cn-booking-module{grid-column:2;grid-row:2 / span 5;
    background:rgba(5,5,15,.6);border:1px solid rgba(0,200,232,.12);
    border-radius:16px;padding:20px !important;margin-top:10px !important}

  /* TÍTULO de booking en derecha */
  html body #s-connect .cn-booking-module h3{
    font-family:var(--fh) !important;font-size:10px !important;
    letter-spacing:.18em !important;color:var(--c) !important;
    text-transform:uppercase;margin-bottom:14px;text-align:center}

  /* Filas de show — estilo card minimalista */
  html body #s-connect .cn-show-item,
  html body #s-connect .bk-show-item{
    border:1px solid rgba(0,200,232,.18) !important;
    background:rgba(0,200,232,.04) !important;
    border-radius:8px !important;padding:10px 14px !important;
    transition:border-color .2s,background .2s}
  html body #s-connect .cn-show-item:hover,
  html body #s-connect .bk-show-item:hover{
    border-color:rgba(0,200,232,.5) !important;
    background:rgba(0,200,232,.1) !important}

  /* Presskit: botones estilo CARTØN */
  html body #s-connect .cn-btn.presskit,
  html body #s-connect .cn-booking-module a.cn-btn{
    background:rgba(0,200,232,.08) !important;
    border-color:rgba(0,200,232,.3) !important;
    color:var(--c) !important;font-size:11px !important;
    padding:10px 14px !important;border-radius:8px}
}


/* ══════════════════════════════════════════════════════════════════════════════
   ENTREGA FINAL: ARTISTA + CONTACTO — 100×100 CURADO
   ══════════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────────
   CONTACTO — grid 2 columnas, cards sólidas, paleta agresiva estilo CARTØN
   ──────────────────────────────────────────────────────────────────────────── */
@media(min-width:769px){
  html body #s-connect .section-inner{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:0 28px !important;
    align-items:start !important;
    padding:calc(var(--nav-h,46px) + 24px) 5vw 24px !important;
    height:100vh !important;
    overflow:hidden !important;
    box-sizing:border-box;
    text-align:left !important}

  /* ── COLUMNA IZQUIERDA: título + CTAs principales ── */
  html body #s-connect .contacto-head{
    grid-column:1;grid-row:1;
    margin-bottom:0 !important;padding:0 !important;
    background:transparent !important;border:none !important}

  html body #s-connect .contacto-title .line-top{
    font-size:clamp(26px,3.5vw,52px) !important;color:#fff !important}
  html body #s-connect .contacto-title .line-bottom{
    font-size:clamp(18px,2.5vw,36px) !important;color:var(--c) !important;margin-top:2px !important}

  html body #s-connect .cn-subtitle{
    grid-column:1;grid-row:2;
    font-size:clamp(12px,1.3vw,14px) !important;color:rgba(255,255,255,.65) !important;
    margin:8px 0 12px !important;line-height:1.4;max-width:420px !important}

  html body #s-connect .cn-sub{
    grid-column:1;grid-row:3;
    font-size:10px !important;opacity:.4;margin:0 0 10px !important}

  /* Botones de acción en columna */
  html body #s-connect .cn-actions{
    grid-column:1;grid-row:4;
    display:flex !important;flex-direction:column !important;gap:8px !important;
    margin:0 0 12px !important;padding:0 !important;
    background:transparent !important;border:none !important}

  /* Email — borde celeste */
  html body #s-connect .cn-btn:not(.btn-whatsapp){
    display:flex !important;align-items:center;justify-content:center;
    padding:12px 16px !important;border-radius:6px !important;
    border:2px solid var(--c) !important;
    background:rgba(0,200,232,.06) !important;
    color:var(--c) !important;font-family:var(--fh) !important;
    font-size:11px !important;font-weight:700 !important;letter-spacing:.1em !important;
    width:100%;box-sizing:border-box;text-decoration:none;
    transition:background .2s,color .2s}
  html body #s-connect .cn-btn:not(.btn-whatsapp):hover{
    background:var(--c) !important;color:#000 !important}

  /* WhatsApp — verde sólido */
  html body #s-connect .btn-whatsapp,
  html body #s-connect .cn-btn.btn-channel-wa{
    display:flex !important;align-items:center;justify-content:center;gap:8px;
    padding:12px 16px !important;border-radius:6px !important;
    background:#128C7E !important;border:none !important;
    color:#fff !important;font-family:var(--fh) !important;
    font-size:11px !important;font-weight:700 !important;letter-spacing:.1em !important;
    width:100%;box-sizing:border-box;cursor:pointer;
    transition:background .2s}
  html body #s-connect .btn-whatsapp:hover{background:#075E54 !important}

  /* Redes sociales en fila compacta */
  html body #s-connect .cn-links{
    grid-column:1;grid-row:5;
    margin:0 !important;padding:10px 0 !important;
    background:transparent !important;border:none !important;
    display:flex !important;flex-wrap:wrap !important;gap:10px 20px !important;
    justify-content:flex-start !important}

  /* ── COLUMNA DERECHA: show types + presskit ── */
  html body #s-connect .press-tags{
    grid-column:2;grid-row:1;
    background:rgba(0,200,232,.06);
    border:1px solid rgba(0,200,232,.18);
    border-radius:10px;padding:12px 16px !important;
    margin:0 !important;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}

  html body #s-connect .cn-booking-module{
    grid-column:2;grid-row:2 / span 4;
    background:rgba(5,5,18,.7);
    border:1px solid rgba(0,200,232,.15);
    border-radius:12px;padding:18px 20px !important;
    margin-top:10px !important;
    overflow:hidden}

  /* Filas de show — card hover */
  html body #s-connect .cn-show-item,
  html body #s-connect .bk-show-item{
    border:1px solid rgba(0,200,232,.15) !important;
    background:rgba(0,200,232,.03) !important;
    border-radius:6px !important;padding:9px 12px !important;
    transition:border-color .2s,background .2s !important;margin-bottom:6px !important}
  html body #s-connect .cn-show-item:hover,
  html body #s-connect .bk-show-item:hover{
    border-color:rgba(0,200,232,.45) !important;
    background:rgba(0,200,232,.09) !important}
  html body #s-connect .cn-show-item h4{font-size:12px !important;color:#fff}
  html body #s-connect .cn-show-item p{font-size:10px !important;color:rgba(255,255,255,.45)}

  /* Presskit — botones en fila */
  html body #s-connect .cn-booking-module > div:last-child{
    margin-top:12px;padding-top:12px;
    border-top:1px solid rgba(0,200,232,.12)}
  html body #s-connect .cn-booking-module a.cn-btn{
    background:rgba(0,200,232,.08) !important;
    border:1px solid rgba(0,200,232,.25) !important;
    color:var(--c) !important;font-size:10px !important;
    padding:8px 12px !important;border-radius:6px !important;
    display:inline-flex !important;align-items:center;gap:6px;
    text-decoration:none;transition:background .2s}
  html body #s-connect .cn-booking-module a.cn-btn:hover{
    background:rgba(0,200,232,.2) !important}

  /* cnl links — compactos, en fila */
  html body #s-connect .cnl{text-decoration:none;transition:opacity .2s}
  html body #s-connect .cnl:hover{opacity:.75}
  html body #s-connect .cnll{font-size:7px !important;letter-spacing:.15em;
    color:rgba(255,255,255,.35);display:block;text-transform:uppercase}
  html body #s-connect .cnlh{font-size:11px !important;font-weight:600;
    color:#fff;display:block}
}

@media(max-width:768px){
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    overflow-y:auto !important;height:auto !important;
    padding:calc(var(--nav-h,46px) + 16px) 5vw calc(var(--dock-h,60px) + 60px) !important;
    text-align:center !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM FINAL — ARTISTA + CONTACTO 100×100
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── CONTACTO: glassmorphism contundente ─────────────────────────────────── */
@media(min-width:769px){
  html body #s-connect .section-inner{
    display:grid !important;
    grid-template-columns:40fr 60fr !important;
    gap:0 !important;
    align-items:stretch !important;
    padding:0 !important;
    height:100vh !important;
    overflow:hidden !important;
    text-align:left !important}

  /* COLUMNA IZQUIERDA 40%: Human Hub */
  html body #s-connect .cn-left-hub{
    grid-column:1;
    display:flex;flex-direction:column;
    padding:calc(var(--nav-h,46px) + 28px) 40px 28px !important;
    background:rgba(4,4,12,.72) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    border-right:1px solid rgba(0,200,232,.1)}

  /* COLUMNA DERECHA 60%: Propuestas & Recursos */
  html body #s-connect .cn-right-hub{
    grid-column:2;
    display:flex;flex-direction:column;gap:0;
    padding:calc(var(--nav-h,46px) + 28px) 40px 28px !important;
    background:rgba(4,4,16,.55) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important}

  /* Todos los bloques de grilla del section-inner → dentro de los hubs */
  html body #s-connect .contacto-head{margin-bottom:12px !important;padding:0 !important;background:transparent !important;border:none !important}
  html body #s-connect .cn-subtitle{margin:6px 0 8px !important;font-size:clamp(12px,1.3vw,15px) !important;max-width:100% !important}
  html body #s-connect .cn-sub{font-size:10px !important;opacity:.4;margin:0 0 18px !important}

  /* Tarjeta Eléctrica de Conexión Directa */
  html body #s-connect .cn-card-direct{
    margin-top:auto;
    border:1px solid var(--c);
    border-radius:10px;
    padding:18px 20px;
    background:rgba(0,0,0,.7)}
  html body #s-connect .cn-actions{
    flex-direction:column !important;gap:8px !important;
    margin:0 0 12px !important;padding:0 !important;
    background:transparent !important;border:none !important;
    border-radius:0 !important}
  html body #s-connect .cn-btn:not(.btn-whatsapp){
    width:100% !important;border-radius:6px !important;
    border:2px solid var(--c) !important;
    background:rgba(0,200,232,.06) !important;color:var(--c) !important;
    font-family:var(--fh) !important;font-size:11px !important;font-weight:700 !important;
    letter-spacing:.1em !important;padding:12px 16px !important;
    box-sizing:border-box;transition:background .2s,color .2s;
    text-align:center;display:flex;align-items:center;justify-content:center}
  html body #s-connect .cn-btn:not(.btn-whatsapp):hover{background:var(--c) !important;color:#000 !important}
  html body #s-connect .btn-whatsapp{
    width:100% !important;padding:12px 16px !important;
    border-radius:6px !important;background:#128C7E !important;border:none !important;
    font-family:var(--fh) !important;font-size:11px !important;font-weight:700 !important;
    letter-spacing:.1em !important;color:#fff !important;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;gap:8px}

  /* Email + IG en mono estilo terminal */
  html body #s-connect .cn-terminal{
    margin-top:10px;
    font-family:'DM Mono',var(--fm),monospace;font-size:10px;
    color:rgba(0,200,232,.7);letter-spacing:.08em;
    display:flex;flex-direction:column;gap:3px}

  /* COLUMNA DERECHA: show categories */
  html body #s-connect .cn-right-hub h3.cn-right-ttl{
    font-family:var(--fh) !important;
    font-size:10px !important;letter-spacing:.18em;
    color:rgba(255,255,255,.5);text-transform:uppercase;
    margin-bottom:10px !important;margin-top:0 !important}

  html body #s-connect .cn-booking-module{
    flex:1;background:transparent !important;
    border:none !important;padding:0 !important;
    margin:0 !important;overflow:hidden}

  html body #s-connect .cn-show-item,
  html body #s-connect .bk-show-item{
    border:1px solid rgba(0,200,232,.15) !important;
    background:rgba(0,200,232,.03) !important;
    border-radius:8px !important;padding:10px 14px !important;
    margin-bottom:6px !important;transition:all .2s}
  html body #s-connect .cn-show-item:hover,
  html body #s-connect .bk-show-item:hover{
    border-color:var(--c) !important;background:rgba(0,200,232,.09) !important}
  html body #s-connect .cn-show-item h4{font-size:12px !important;color:#fff;font-weight:600}
  html body #s-connect .cn-show-item p{font-size:9px !important;color:rgba(255,255,255,.4)}

  /* Press Kit: barra industrial bottom */
  html body #s-connect .cn-presskit-bar{
    margin-top:12px;padding-top:12px;
    border-top:1px solid rgba(0,200,232,.12);
    display:flex;gap:8px;flex-wrap:wrap}
  html body #s-connect .cn-booking-module a.cn-btn,
  html body #s-connect .presskit-btn{
    background:rgba(0,200,232,.07) !important;
    border:1px solid rgba(0,200,232,.22) !important;
    color:var(--c) !important;font-size:10px !important;
    font-family:var(--fh) !important;font-weight:700 !important;
    padding:8px 14px !important;border-radius:6px !important;
    letter-spacing:.08em;text-decoration:none;
    display:inline-flex;align-items:center;gap:5px;
    transition:background .2s;white-space:nowrap}
  html body #s-connect .cn-booking-module a.cn-btn:hover,
  html body #s-connect .presskit-btn:hover{background:rgba(0,200,232,.18) !important}

  /* Redes sociales: fila compacta en la base */
  html body #s-connect .cn-links{
    margin-top:8px !important;padding:10px 0 0 !important;
    background:transparent !important;border:none !important;
    display:flex !important;flex-wrap:wrap !important;gap:10px 18px !important}
  html body #s-connect .cnll{font-size:7px !important;letter-spacing:.15em;color:rgba(255,255,255,.3);display:block;text-transform:uppercase}
  html body #s-connect .cnlh{font-size:11px !important;font-weight:600;color:#fff;display:block}
  html body #s-connect .press-tags{display:none !important}

  /* Títulos contacto */
  html body #s-connect .line-top{font-size:clamp(24px,3.2vw,48px) !important;color:#fff !important}
  html body #s-connect .line-bottom{font-size:clamp(16px,2.2vw,32px) !important;color:var(--c) !important}
}

@media(max-width:768px){
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    height:auto !important;overflow-y:auto !important;
    padding:calc(var(--nav-h,46px) + 16px) 5vw calc(var(--dock-h,60px) + 80px) !important;
    text-align:center !important}
  html body #s-connect .press-tags{display:flex !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX FINAL: A11Y BOX + ARTISTA DERECHA + CONTACTO REESTRUCTURADO
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── FIX: Caja de accesibilidad → esquina inferior izquierda ──────────────── */
#safe-mode-btn{
  position:fixed !important;
  bottom:calc(var(--dock-h,60px) + 68px) !important;
  left:20px !important;
  top:auto !important;
  right:auto !important;
  z-index:5000 !important}
#a11y-pop{
  position:fixed !important;
  bottom:calc(var(--dock-h,60px) + 112px) !important;
  left:20px !important;
  top:auto !important;right:auto !important;
  z-index:5001 !important}

/* ── CONTACTO: layout open-left + right-panel ────────────────────────────── */
@media(min-width:769px){
  html body #s-connect .section-inner{
    display:grid !important;
    grid-template-columns:4fr 6fr !important;
    height:100vh !important;overflow:hidden !important;
    padding:0 !important;gap:0 !important;text-align:left !important}

  /* LEFT: abierto, video respira */
  html body #s-connect .cn-left-open{
    grid-column:1;height:100%;
    background:transparent;pointer-events:none}

  /* RIGHT PANEL: glassmorphism */
  html body #s-connect .cn-right-panel{
    grid-column:2;
    display:flex;flex-direction:column;gap:10px;
    padding:calc(var(--nav-h,46px) + 20px) 36px 20px !important;
    background:rgba(4,4,14,.82);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-left:1px solid rgba(0,200,232,.1);
    overflow:hidden}

  /* Cabecera */
  html body #s-connect .cn-panel-header{margin-bottom:4px}
  html body #s-connect .cn-panel-header .line-top{
    font-family:var(--fh);font-size:clamp(20px,2.8vw,40px);
    font-weight:900;color:#fff;display:block;line-height:.95}
  html body #s-connect .cn-panel-header .line-bottom{
    font-family:var(--fh);font-size:clamp(14px,1.9vw,28px);
    color:var(--c);font-weight:700;display:block;margin-top:2px}
  html body #s-connect .cn-subtitle{
    font-size:clamp(11px,1.1vw,13px);color:rgba(255,255,255,.55);
    margin:4px 0 8px;line-height:1.4;max-width:100%}

  /* GRID 2 cards */
  html body #s-connect .cn-grid-2col{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0;overflow:hidden}

  /* Card base */
  html body #s-connect .cn-card{
    background:rgba(0,0,0,.45);
    border:1px solid rgba(0,200,232,.14);
    border-radius:10px;padding:14px;
    display:flex;flex-direction:column;gap:6px;overflow:hidden}

  html body #s-connect .cn-card-ttl{
    font-family:var(--fh);font-size:9px;letter-spacing:.16em;
    color:rgba(0,200,232,.7);text-transform:uppercase;
    padding-bottom:6px;border-bottom:1px solid rgba(0,200,232,.12)}

  /* Shows list */
  html body #s-connect .cn-shows-list{display:flex;flex-direction:column;gap:5px;flex:1}
  html body #s-connect .cn-show-row{
    text-decoration:none;display:flex;align-items:center;
    justify-content:space-between;padding:7px 10px;
    border-radius:6px;border:1px solid rgba(0,200,232,.1);
    background:rgba(0,200,232,.03);transition:all .2s}
  html body #s-connect .cn-show-row:hover{
    border-color:rgba(0,200,232,.4);background:rgba(0,200,232,.08)}
  html body #s-connect .cn-show-row strong{
    display:block;font-size:11px;color:#fff;font-weight:600;line-height:1.2}
  html body #s-connect .cn-show-row span{
    display:block;font-size:9px;color:rgba(255,255,255,.4)}
  html body #s-connect .cn-show-row em{
    font-size:10px;color:var(--c);font-style:normal;flex-shrink:0;margin-left:8px}

  /* Collaboraciones */
  html body #s-connect .cn-collab-sep{
    border-top:1px dashed rgba(0,200,232,.2);padding-top:6px;margin-top:2px}
  html body #s-connect .cn-collab-desc{font-size:9px;color:rgba(255,255,255,.4);margin:3px 0}
  html body #s-connect .cn-collab-link{
    font-size:10px;color:var(--c);text-decoration:none;font-family:var(--fh);font-weight:700}

  /* Downloads */
  html body #s-connect .cn-dl-list{display:flex;flex-direction:column;gap:5px}
  html body #s-connect .cn-dl-btn{
    display:flex;align-items:center;gap:8px;padding:8px 12px;
    border-radius:6px;border:1px solid rgba(0,200,232,.2);
    background:rgba(0,200,232,.06);color:var(--c);
    text-decoration:none;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.08em;
    transition:all .2s;text-transform:uppercase}
  html body #s-connect .cn-dl-btn:hover{background:rgba(0,200,232,.18);border-color:var(--c)}

  /* Redes grid 5 botones */
  html body #s-connect .cn-socials-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:auto}
  html body #s-connect .cn-soc{
    display:flex;align-items:center;gap:6px;padding:7px 10px;
    border-radius:6px;text-decoration:none;font-size:10px;font-weight:700;
    font-family:var(--fh);letter-spacing:.05em;transition:opacity .2s;
    white-space:nowrap}
  html body #s-connect .cn-soc:hover{opacity:.8}
  html body #s-connect .cn-soc-spotify{background:#1DB954;color:#000}
  html body #s-connect .cn-soc-sc{background:#FF5500;color:#fff}
  html body #s-connect .cn-soc-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366);color:#fff}
  html body #s-connect .cn-soc-yt{background:#FF0000;color:#fff}
  html body #s-connect .cn-soc-tk{background:#010101;color:#fff;border:1px solid rgba(255,255,255,.15)}
  /* TikTok ocupa columna completa */
  html body #s-connect .cn-soc-tk{grid-column:1 / span 2}

  /* CTA Bar — email + WA full width en base del panel */
  html body #s-connect .cn-cta-bar{
    display:flex;gap:10px;padding-top:10px;
    border-top:1px solid rgba(0,200,232,.12);flex-shrink:0}
  html body #s-connect .cn-cta-email{
    flex:1;padding:11px 16px;border-radius:6px;
    border:2px solid var(--c);background:rgba(0,200,232,.07);
    color:var(--c);font-family:'DM Mono',var(--fm),monospace;
    font-size:11px;font-weight:700;letter-spacing:.08em;
    text-decoration:none;text-align:center;
    transition:background .2s,color .2s}
  html body #s-connect .cn-cta-email:hover{background:var(--c);color:#000}
  html body #s-connect .cn-cta-wa{
    flex:1;padding:11px 16px;border-radius:6px;
    background:#128C7E;border:none;cursor:pointer;
    color:#fff;font-family:var(--fh);
    font-size:11px;font-weight:800;letter-spacing:.1em;
    text-decoration:none;text-align:center;
    transition:background .2s;display:flex;align-items:center;justify-content:center;gap:6px}
  html body #s-connect .cn-cta-wa:hover{background:#075E54}

  /* cn-bg + cn-photo: absolutamente en el fondo */
  html body #s-connect .cn-bg{display:none !important}
  html body #s-connect .cn-photo{
    position:absolute;left:3%;top:50%;transform:translateY(-50%);
    width:clamp(220px,35%,480px);opacity:.18;pointer-events:none;z-index:0;
    filter:grayscale(20%)}
}

@media(max-width:768px){
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    height:auto !important;overflow-y:auto !important;
    padding:calc(var(--nav-h,46px) + 12px) 5vw calc(var(--dock-h,60px) + 80px) !important}
  html body #s-connect .cn-left-open{display:none}
  html body #s-connect .cn-right-panel{
    padding:0 !important;background:transparent !important;backdrop-filter:none !important;border:none !important}
  html body #s-connect .cn-grid-2col{grid-template-columns:1fr !important}
  html body #s-connect .cn-cta-bar{flex-direction:column}
  html body #s-connect .cn-socials-grid{grid-template-columns:1fr 1fr !important}
  html body #s-connect .cn-soc-tk{grid-column:auto !important}
}

/* ══ FIXES FINALES — 6 PUNTOS ═══════════════════════════════════════════════ */

/* ── Fix 1: safe-mode-btn VUELVE al nav top-right (anular el bottom-left) ─── */
#safe-mode-btn{
  position:static !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  z-index:auto !important}
#a11y-pop{
  position:absolute !important;
  bottom:auto !important;
  top:calc(100% + 8px) !important;
  left:auto !important;
  right:0 !important;
  z-index:600 !important}
/* Privacy panel: mismo estilo que a11y-pop */
#privacy-panel{
  display:none;
  position:absolute !important;
  top:calc(100% + 8px) !important;
  right:0 !important;bottom:auto !important;left:auto !important;
  z-index:600;width:260px;
  background:rgba(8,8,20,.97);
  border:1px solid rgba(0,200,232,.25);border-radius:10px;
  padding:16px !important;
  box-shadow:0 8px 32px rgba(0,0,0,.6)}
#privacy-panel.on{display:block}

/* ── Fix 2: Marquee más lento y estilo manifiesto ──────────────────────────── */
.mi.mf-phrase{
  font-family:var(--fh);font-size:11px !important;
  font-weight:700 !important;letter-spacing:.1em !important;
  color:rgba(255,255,255,.6) !important;
  white-space:nowrap;padding:0 28px !important;
  transition:color .2s;cursor:pointer !important}
.mi.mf-phrase:hover{color:var(--c) !important}
.mi.mf-phrase .ms{display:none}
/* Velocidad del marquee: más lento (era ~30s, ahora 55s) */
.mq{animation-duration:55s !important}


/* ── Fix 4: cursor visible en el dialog ────────────────────────────────────── */
#gr-proactive-dialog,
#gr-proactive-dialog *,
#gr-proactive-dialog button,
#gr-proactive-dialog a{cursor:auto !important}
#gr-proactive-dialog .dp-dialog-btn,
#gr-proactive-dialog .gpd-x{cursor:pointer !important}
/* El dialog no hereda cursor:none del canvas */
#gr-proactive-dialog{cursor:auto !important}

/* ── Fix 5: Reubicar dialog para no tapar los decks ────────────────────────── */
/* El d3 deck está en top-center del deck-zone. Mover el dialog a la izquierda */
#gr-proactive-dialog{
  left:20px !important;
  transform:none !important;
  top:calc(var(--nav-h,46px) + 14px) !important;
  max-width:300px !important}

/* ── Fix 6: Contact — centrado + columnas balanceadas ──────────────────────── */
@media(min-width:769px){
  html body #s-connect .section-inner{
    grid-template-columns:4fr 6fr !important;
    text-align:left !important}
  /* El panel derecho: más centrado, con padding simétrico */
  html body #s-connect .cn-right-panel{
    padding:calc(var(--nav-h,46px)+28px) 48px 28px !important;
    justify-content:center}
  /* Panel header centrado */
  html body #s-connect .cn-panel-header{text-align:left}
  /* Foto del artista visible en lado izquierdo */
  html body #s-connect .cn-photo{
    display:block !important;
    opacity:.22 !important;
    width:clamp(200px,32vw,440px) !important}
}

/* ══ FIXES FINALES: DIALOG CENTRADO + ARTISTA + CONTACTO PNL ════════════════ */

/* ── Fix 2: Restaurar dialog centrado — anular left:20px anterior ─────────── */
#gr-proactive-dialog{
  left:50% !important;
  transform:translateX(-50%) translateY(-10px) !important;
  max-width:320px !important}
#gr-proactive-dialog.on,
#gr-proactive-dialog:not(.collapsed){
  transform:translateX(-50%) translateY(0) !important}


/* ── Fix 6: CONTACTO — centrado, PNL, minimal ────────────────────────────── */
@media(min-width:769px){
  /* Reset position del section-inner para centrar todo */
  html body #s-connect .section-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    height:100vh !important;overflow:hidden !important;
    padding:calc(var(--nav-h,46px) + 24px) 6vw 40px !important;
    gap:0 !important}

  /* Esconder los hubs del layout anterior */
  html body #s-connect .cn-left-open{display:none !important}
  html body #s-connect .cn-right-panel{
    display:contents !important;
    background:transparent !important;
    backdrop-filter:none !important;
    border:none !important;padding:0 !important}

  /* Cabecera centrada */
  html body #s-connect .cn-panel-header{
    margin-bottom:12px;max-width:560px;width:100%}
  html body #s-connect .contacto-head{
    margin-bottom:6px !important;padding:0 !important;background:transparent !important;border:none !important}
  html body #s-connect .line-top{font-size:clamp(28px,4vw,60px) !important;color:#fff !important}
  html body #s-connect .line-bottom{font-size:clamp(20px,2.8vw,42px) !important;color:var(--c) !important}

  /* Copy PNL: frase de apertura emotiva + subtítulo directo */
  html body #s-connect .cn-subtitle{
    font-size:clamp(13px,1.4vw,16px) !important;
    color:rgba(255,255,255,.7) !important;
    line-height:1.5;margin:6px auto 16px !important;max-width:480px}

  /* Grid 2 tarjetas horizontales centradas */
  html body #s-connect .cn-grid-2col{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    width:100%;max-width:760px;
    flex:0;margin-bottom:14px}

  /* Tarjetas rediseñadas con fondo sólido */
  html body #s-connect .cn-card{
    background:rgba(0,0,0,.55);
    border:1px solid rgba(0,200,232,.18);
    border-radius:12px;padding:18px !important;
    text-align:left;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

  /* CTA bar centrada */
  html body #s-connect .cn-cta-bar{
    width:100%;max-width:760px;
    display:flex;gap:10px;
    border-top:1px solid rgba(0,200,232,.12);
    padding-top:12px}
  html body #s-connect .cn-cta-email{
    flex:1;text-align:center;font-family:'DM Mono',var(--fm),monospace}
  html body #s-connect .cn-cta-wa{flex:1;justify-content:center}

  /* Redes centradas */
  html body #s-connect .cn-socials-grid{grid-template-columns:1fr 1fr 1fr 1fr !important}
  html body #s-connect .cn-soc-tk{grid-column:auto !important;justify-content:center}
  html body #s-connect .cn-socials-grid .cn-soc{justify-content:center}

  /* Ocultar elementos que quedan huérfanos */
  html body #s-connect .cn-sub,
  html body #s-connect .press-tags,
  html body #s-connect .cn-bg{display:none !important}
  html body #s-connect .cn-photo{
    position:absolute;right:3%;top:50%;transform:translateY(-50%);
    opacity:.15;width:clamp(180px,28%,380px);pointer-events:none;z-index:0}
}

@media(max-width:768px){
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    height:auto !important;overflow-y:auto !important;
    align-items:stretch !important;
    padding:calc(var(--nav-h,46px) + 16px) 5vw calc(var(--dock-h,60px) + 80px) !important}
  html body #s-connect .cn-right-panel{
    display:flex !important;flex-direction:column;gap:10px;
    background:transparent !important;border:none !important;padding:0 !important}
  html body #s-connect .cn-grid-2col{grid-template-columns:1fr !important}
}

/* ════════════════════════════════════════════════════════════════════════════════
   ██ FINAL OVERRIDE — máxima especificidad, anula TODOS los conflictos previos ██
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── DIALOG: centrado, texto neurogreeting, sin repetición ─────────────────── */
#gr-proactive-dialog{
  position:fixed !important;
  top:calc(var(--nav-h,46px) + 14px) !important;
  left:50% !important;
  transform:translateX(-50%) translateY(-10px) !important;
  opacity:0;pointer-events:none;
  max-width:310px !important;width:calc(100% - 40px) !important;
  z-index:700 !important}


/* ── CONTACTO: centrado, PNL, minimalista de verdad ─────────────────────────── */
@media(min-width:769px){
  html body #s-connect .section-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    height:100vh !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    padding:calc(var(--nav-h,46px) + 28px) 5vw 36px !important;
    gap:16px !important;position:relative !important}

  /* Limpiar divs de layouts anteriores */
  html body #s-connect .cn-left-open{display:none !important}
  html body #s-connect .cn-bg{display:none !important}
  html body #s-connect .press-tags{display:none !important}
  html body #s-connect .cn-sub{display:none !important}
  html body #s-connect .cn-right-panel{
    display:contents !important;background:none !important;
    backdrop-filter:none !important;border:none !important;padding:0 !important}

  /* Cabecera PNL: impacta en 3 segundos */
  html body #s-connect .cn-panel-header{
    margin:0 !important;padding:0 !important;
    background:transparent !important;border:none !important;
    max-width:580px;width:100%}
  html body #s-connect .line-top{
    font-family:var(--fh) !important;
    font-size:clamp(26px,3.8vw,56px) !important;
    color:#fff !important;font-weight:900 !important;
    display:block !important;line-height:.92 !important}
  html body #s-connect .line-bottom{
    font-size:clamp(18px,2.5vw,38px) !important;
    color:var(--c) !important;font-weight:700 !important;
    display:block !important;margin-top:4px !important}
  /* Subtítulo: neurociencia + invitación directa */
  html body #s-connect .cn-subtitle{
    font-size:clamp(12px,1.3vw,15px) !important;
    color:rgba(255,255,255,.62) !important;
    line-height:1.55 !important;
    margin:8px auto 0 !important;max-width:460px !important;
    font-style:italic}

  /* Grid 2 tarjetas */
  html body #s-connect .cn-grid-2col{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:100%;max-width:720px;
    margin:0 auto}
  html body #s-connect .cn-card{
    background:rgba(0,0,0,.52) !important;
    border:1px solid rgba(0,200,232,.16) !important;
    border-radius:10px !important;padding:16px !important;
    text-align:left !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important}
  html body #s-connect .cn-card-ttl{
    font-family:var(--fh) !important;font-size:9px !important;
    letter-spacing:.16em !important;color:rgba(0,200,232,.7) !important;
    text-transform:uppercase !important;
    padding-bottom:8px !important;
    border-bottom:1px solid rgba(0,200,232,.1) !important;
    margin-bottom:8px !important}

  /* CTA bar centrada */
  html body #s-connect .cn-cta-bar{
    display:flex !important;gap:10px !important;
    width:100%;max-width:720px;margin:0 auto;
    border-top:1px solid rgba(0,200,232,.1) !important;
    padding-top:12px !important}
  html body #s-connect .cn-cta-email,
  html body #s-connect .cn-cta-wa{
    flex:1 !important;justify-content:center !important}

  /* Foto artista como fantasma de fondo */
  html body #s-connect .cn-photo{
    position:absolute !important;right:2% !important;
    top:50% !important;transform:translateY(-50%) !important;
    opacity:.14 !important;
    width:clamp(160px,26vw,360px) !important;
    pointer-events:none !important;z-index:0 !important}
}

@media(max-width:768px){
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    height:auto !important;overflow-y:auto !important;
    align-items:stretch !important;text-align:center !important;
    padding:calc(var(--nav-h,46px)+16px) 5vw calc(var(--dock-h,60px)+80px) !important}
  html body #s-connect .cn-right-panel{
    display:flex !important;flex-direction:column;gap:10px;
    background:transparent !important;border:none !important;padding:0 !important}
  html body #s-connect .cn-grid-2col{grid-template-columns:1fr !important}
  html body #s-connect .cn-cta-bar{flex-direction:column}
}

/* ══ PULIDO FINAL — X BUTTONS + ARTISTA FONT + CONTACTO ════════════════════ */

/* ── Item 2: X buttons — grandes, claros, accesibles ──────────────────────── */
.modal-x,.gpd-x,.ov-close,.lbx-close,.cx-close,.close-btn{
  position:absolute !important;top:12px !important;right:14px !important;
  width:36px !important;height:36px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:rgba(0,0,0,.6) !important;
  border:1.5px solid rgba(255,255,255,.18) !important;
  border-radius:50% !important;
  font-size:16px !important;font-weight:700 !important;
  color:#fff !important;cursor:pointer !important;
  transition:background .2s,border-color .2s !important;
  z-index:9999 !important;line-height:1 !important}
.modal-x:hover,.gpd-x:hover,.ov-close:hover{
  background:rgba(0,200,232,.2) !important;
  border-color:var(--c) !important;color:var(--c) !important}
/* Overlay close: top right */
#ov-close{position:fixed !important;top:16px !important;right:16px !important}

/* ── Item 3: Artist section — fonts más grandes, mejor lectura ──────────────── */
@media(min-width:769px){
  html body #s-artist .art-block p[data-type-target],
  html body #s-artist .art-block p{
    font-size:clamp(11px,1.1vw,13.5px) !important;
    line-height:1.6 !important}
  html body #s-artist .art-block h3{font-size:10px !important}
  html body #s-artist .art-name,html body #s-artist .art-logo{
    font-size:clamp(26px,3.5vw,46px) !important}
  /* Typing effect on blocks: texto aparece progresivamente */
  html body #s-artist .art-block[data-i18n-html] p{
    opacity:1 !important}
}

/* ── Item 4: Contact CTA Instagram gradient ──────────────────────────────────── */
html body #s-connect .cn-cta-wa{
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important;
  color:#fff !important;border:none !important;font-size:11px !important}
html body #s-connect .cn-cta-wa:hover{opacity:.85 !important}

/* ── Item 5: Copy PNL — subtítulo contacto con peso visual ─────────────────── */
html body #s-connect .cn-subtitle br{display:block;margin-top:2px}
html body #s-connect .cn-subtitle strong,
html body #s-connect .cn-subtitle em{color:var(--c) !important}

/* ── Dialog: mejorar legibilidad + subtext visible ─────────────────────────── */
#gr-proactive-dialog .dialog-welcome-lead{
  font-size:12.5px !important;line-height:1.6 !important;
  margin-bottom:6px !important}
#gr-proactive-dialog .dialog-subtext{
  display:block !important;
  font-size:10px !important;
  color:rgba(0,200,232,.55) !important;
  margin-bottom:0 !important;
  font-family:'DM Mono',var(--fm),monospace !important;
  letter-spacing:.04em !important}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTISTA: 2 COLUMNAS GRANDES + IMMERSIVE CONNECTION
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── ARTISTA: layout 2 cols dentro del chronicle block ──────────────────────── */
@media(min-width:769px){
  html body #s-artist .art-blocks.art-2col{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    flex:1 !important;min-height:0 !important;overflow:hidden !important}
  html body #s-artist .art-col{
    display:flex !important;flex-direction:column !important;gap:8px !important}
  html body #s-artist .art-block{
    flex:1 !important;min-height:0 !important;
    overflow:hidden !important}
  /* Aumentar font size para legibilidad */
  html body #s-artist .art-block p{
    font-size:clamp(10.5px,1.1vw,13px) !important;
    line-height:1.6 !important}
  html body #s-artist .art-block h3{
    font-size:10px !important;margin-bottom:5px !important}
}

/* ── IC: IMMERSIVE CONNECTION ──────────────────────────────────────────────── */
@media(min-width:769px){
  html body #s-connect .ic-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    height:100vh !important;
    overflow:hidden !important;
    padding:calc(var(--nav-h,46px) + 18px) 5vw 24px !important;
    gap:14px !important;
    text-align:center !important;
    position:relative !important}}

/* Overlay radial dinámico */
.ic-overlay{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 50%, transparent 20%, rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:0}
.ic-ghost{
  position:absolute;right:2%;top:50%;transform:translateY(-50%);
  opacity:.13;width:clamp(140px,22vw,300px);pointer-events:none;z-index:0;
  filter:grayscale(30%)}

/* Header escalonado */
.ic-direct-channels{width:100%;max-width:340px;margin:8px auto 0;position:relative;z-index:2}
.ic-direct-channels .ic-privacy-tip{text-align:center;margin-top:8px}
.ic-info-tags{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  width:100%;max-width:560px;margin:18px auto 0;
  position:relative;z-index:2}
.ic-info-tag{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 8px;text-align:center;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;transition:transform .25s cubic-bezier(.25,1,.5,1),border-color .25s,background .25s}
.ic-info-tag:hover{transform:translateY(-3px);border-color:rgba(0,200,232,.3);background:rgba(0,200,232,.06)}
@media(prefers-reduced-motion:reduce){.ic-info-tag{transition:none}}
body.safe-mode .ic-info-tag{transition:none}
@media(max-width:600px){
  .ic-info-tags{grid-template-columns:1fr;max-width:280px}
}
.ic-header{position:relative;z-index:2;text-align:center;max-width:540px;width:100%}
.ic-connect-logo{
  font-family:var(--fh);font-size:clamp(24px,3.4vw,40px);
  font-weight:800;letter-spacing:.05em;line-height:1;
  margin:0 0 14px;color:var(--w);
  opacity:0;animation:icStaggerIn .6s 0s cubic-bezier(.25,1,.5,1) forwards}
.ic-connect-logo .lg-l.letter-c,
.ic-connect-logo .lg-l.lg-a,
.ic-connect-logo .lg-l.lg-o{
  animation:artistPulseCeleste 2s ease-in-out infinite alternate}
.safe-mode .ic-connect-logo .lg-l{animation:none !important}
.ic-eyebrow{
  font-family:'DM Mono',var(--fm),monospace;
  font-size:10px;letter-spacing:.2em;color:rgba(0,200,232,.6);
  text-transform:uppercase;margin-bottom:8px;
  opacity:0;animation:icStaggerIn .6s .1s cubic-bezier(.25,1,.5,1) forwards}
.ic-title{
  font-family:var(--fh);font-size:clamp(26px,3.8vw,54px);
  font-weight:900;color:#fff;line-height:.95;margin:0 0 10px;
  opacity:0;animation:icStaggerIn .6s .25s cubic-bezier(.25,1,.5,1) forwards}
.ic-subtitle{
  font-size:clamp(12px,1.3vw,15px);color:rgba(255,255,255,.6);
  line-height:1.5;margin:0;
  opacity:0;animation:icStaggerIn .6s .4s cubic-bezier(.25,1,.5,1) forwards}

@keyframes icStaggerIn{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}}

/* Gateway 3 botones */
.ic-gateway{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  width:100%;max-width:660px;
  position:relative;z-index:2;
  opacity:0;animation:icStaggerIn .6s .55s cubic-bezier(.25,1,.5,1) forwards}
.ic-type-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 12px;
  background:rgba(0,0,0,.5);
  border:1.5px solid rgba(0,200,232,.2);
  border-radius:10px;
  cursor:pointer;transition:all .25s cubic-bezier(.25,1,.5,1);
  color:#fff;font-family:inherit}
.ic-type-btn:hover,.ic-type-btn.active{
  border-color:var(--c);
  background:rgba(0,200,232,.1);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,200,232,.2)}
.ic-type-btn.active{box-shadow:0 0 0 2px var(--c),0 8px 24px rgba(0,200,232,.25)}
.ict-icon{font-size:20px}
.ict-label{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff}
.ict-desc{font-size:9px;color:rgba(255,255,255,.4);font-family:var(--fm),monospace}

/* Formulario mágico */
.ic-form{
  width:100%;max-width:660px;position:relative;z-index:2;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .5s cubic-bezier(.25,1,.5,1),max-height .5s cubic-bezier(.25,1,.5,1)}
.ic-form.ic-form-visible{opacity:1;max-height:400px}
.ic-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.ic-field{display:flex;flex-direction:column;gap:4px}
.ic-field-full{grid-column:1/span 2}
.ic-field label{
  font-family:'DM Mono',var(--fm),monospace;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(0,200,232,.6)}
.ic-field input,.ic-field textarea{
  background:rgba(0,0,0,.5);
  border:1px solid rgba(0,200,232,.2);border-radius:6px;
  color:#fff;font-family:var(--fb),sans-serif;font-size:12px;
  padding:9px 12px;transition:border-color .2s;outline:none;resize:none}
.ic-field input:focus,.ic-field textarea:focus{border-color:var(--c)}
.ic-field input::placeholder,.ic-field textarea::placeholder{color:rgba(255,255,255,.25)}

/* CTA */
.ic-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.ic-submit{
  width:100%;max-width:320px;padding:14px 20px;
  background:var(--c);border:none;border-radius:8px;
  font-family:var(--fh);font-size:12px;font-weight:900;
  letter-spacing:.12em;color:#000;cursor:pointer;
  position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.25,1,.5,1)}
.ic-submit:hover{transform:scale(1.02);box-shadow:0 0 28px rgba(0,200,232,.4)}
.ic-submit-text{position:relative;z-index:1}
.ic-submit-loader{
  display:none;width:18px;height:18px;
  border:2px solid rgba(0,0,0,.3);border-top-color:#000;
  border-radius:50%;animation:icSpin .6s linear infinite}
.ic-submit.loading .ic-submit-text{display:none}
.ic-submit.loading .ic-submit-loader{display:block}
.ic-submit.loading{background:rgba(0,200,232,.6);cursor:wait}
@keyframes icSpin{to{transform:rotate(360deg)}}

.ic-privacy-tip{
  font-family:'DM Mono',var(--fm),monospace;font-size:9px;
  color:rgba(255,255,255,.3);letter-spacing:.04em}

/* Éxito */
.ic-success{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;z-index:2;text-align:center;
  opacity:0;transition:opacity .5s}
.ic-success[hidden]{display:none !important}
.ic-success.ic-success-visible{display:flex;opacity:1}
.ic-success-icon{
  font-size:36px;color:var(--c);
  animation:icPulseIn .6s cubic-bezier(.25,1,.5,1)}
@keyframes icPulseIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.ic-success-msg{font-size:16px;color:#fff;line-height:1.5}
.ic-success-link{
  font-family:var(--fh);font-size:11px;font-weight:700;
  color:var(--c);text-decoration:none;border-bottom:1px solid currentColor}

/* Canales + socials */
.ic-channels{
  display:flex;gap:24px;justify-content:center;
  position:relative;z-index:2}
.ic-channel{
  font-family:'DM Mono',var(--fm),monospace;font-size:10px;
  color:rgba(255,255,255,.5);text-decoration:none;
  transition:color .2s;letter-spacing:.06em}
.ic-channel:hover{color:var(--c)}
.ic-socials{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  position:relative;z-index:2}
.ic-soc{
  display:flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:20px;text-decoration:none;font-size:10px;
  font-weight:700;font-family:var(--fh);letter-spacing:.05em;
  transition:opacity .2s}
.ic-soc:hover{opacity:.82}
.ic-soc-spotify{background:#1DB954;color:#000}
.ic-soc-sc{background:#FF5500;color:#fff}
.ic-soc-yt{background:#FF0000;color:#fff}
.ic-soc-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366);color:#fff}
.ic-soc-tk{background:#010101;color:#fff;border:1px solid rgba(255,255,255,.15)}

/* MOBILE */
@media(max-width:768px){
  html body #s-connect .ic-section{
    height:auto !important;overflow-y:auto !important;
    padding:calc(var(--nav-h,46px)+14px) 20px calc(var(--dock-h,60px)+80px) !important;
    gap:16px !important}
  .ic-gateway{grid-template-columns:1fr !important}
  .ic-fields{grid-template-columns:1fr !important}
  .ic-field-full{grid-column:1 !important}
  .ic-submit{max-width:100% !important;min-height:48px}
  .ic-channels,.ic-socials{flex-wrap:wrap}
  html body #s-artist .art-blocks.art-2col{
    grid-template-columns:1fr !important}
}

/* ── PUNTO 2: Video artista visible como fondo de sección ────────────────── */
#s-artist .sec-bg-video{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;z-index:0 !important;
  opacity:.8 !important;display:block !important;pointer-events:none !important}

/* ── PUNTO 4: Volumen slider en el mini-player ───────────────────────────── */
#mini-player.active-mode .p-vol-slider{
  display:block !important;
  width:55px !important;flex-shrink:0 !important;
  opacity:.7;transition:opacity .2s}
#mini-player.active-mode .p-vol-slider:hover{opacity:1}
#mini-player:not(.active-mode) .p-vol-slider,
#mini-player:not(.active-mode) #p-vol-icon{display:none !important}

/* ── PUNTO 1: innectia.com en footer ─────────────────────────────────────── */
.lg-footer .lg-l{
  font-size:8px !important;
  animation:grandroVibe calc(var(--bpm-speed,.96s) * 2) ease-in-out infinite alternate !important}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTISTA — REDISEÑO FINAL: video 100% de fondo, texto siempre arriba, 3 columnas
   Este bloque va al final del archivo a propósito: gana por orden de cascada
   sobre cualquier regla anterior en conflicto para #s-artist en desktop.
   ══════════════════════════════════════════════════════════════════════════════ */
@media(min-width:769px){
  html body #s-artist .section-inner{
    display:block !important;
    height:100% !important;width:100% !important;
    padding:0 !important;overflow:hidden !important}

  /* Video: 100% del fondo, siempre detrás del texto, nunca captura clicks */
  html body #s-artist .art-vid-col{
    position:absolute !important;inset:0 !important;
    grid-column:auto !important;grid-row:auto !important;
    width:100% !important;height:100% !important;
    z-index:0 !important;padding:0 !important;
    background:transparent !important;backdrop-filter:none !important;
    display:block !important;pointer-events:none !important}
  html body #s-artist .art-vid{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    border-radius:0 !important;pointer-events:none !important}
  html body #s-artist .art-vid video,
  html body #s-artist .art-vid .sec-bg-video{
    width:100% !important;height:100% !important;object-fit:cover !important;
    pointer-events:none !important}

  /* Texto: overlay completo por encima del video, con ancho amplio real */
  html body #s-artist .art-info{
    position:absolute !important;inset:0 !important;
    grid-column:auto !important;grid-row:auto !important;
    height:100% !important;width:100% !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(0,200,232,.25) transparent !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;
    padding:calc(var(--nav-h,46px) + 16px) 0 170px !important;
    background:linear-gradient(180deg,rgba(5,5,15,.32) 0%,rgba(5,5,15,.48) 40%,rgba(5,5,15,.7) 100%) !important;
    backdrop-filter:blur(9px) !important;-webkit-backdrop-filter:blur(9px) !important;
    box-sizing:border-box !important}
  html body #s-artist .art-info::-webkit-scrollbar{width:3px}
  html body #s-artist .art-info::-webkit-scrollbar-thumb{background:rgba(0,200,232,.25)}
  html body #s-artist .art-info > *{width:100%;max-width:min(1780px,96vw);margin-left:auto !important;margin-right:auto !important;box-sizing:border-box}

  html body #s-artist .art-name,
  html body #s-artist .art-logo{margin-bottom:4px !important}

  /* Botones de lectura completa: fila compacta bajo los datos clave, siempre visibles */
  html body #s-artist .art-vid-actions-inline{
    display:flex !important;flex-direction:row !important;gap:10px !important;margin-top:14px !important;
    flex-wrap:wrap !important;justify-content:center !important}
  html body #s-artist .art-vid-actions-inline .art-vid-action-btn,
  html body #s-artist .art-vid-actions-inline.art-vid-actions .art-btn-manifesto,
  html body #s-artist .art-vid-actions-inline.art-vid-actions .art-btn-interview{
    width:auto !important;flex:0 0 auto !important;
    padding:9px 16px !important;font-size:9.5px !important}

  /* Bio: 3 columnas en pantallas anchas, 2 en medianas */
  html body #s-artist .art-blocks.art-3col{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:14px 20px !important;margin-top:18px !important}
  html body #s-artist .art-block-mf{grid-column:1 / -1 !important}
}
@media(min-width:769px) and (max-width:1180px){
  html body #s-artist .art-blocks.art-3col{
    grid-template-columns:repeat(2,1fr) !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTISTA — Efecto BPM en TODO el borde inferior de la sección.
   CSS puro, sin JS: se ve siempre, sin depender de que el video/canvas hayan
   cargado. Va por encima del panel de texto (que tiene z-index más bajo acá).
   ══════════════════════════════════════════════════════════════════════════════ */
#s-artist .art-bpm-edge{
  position:absolute;left:0;right:0;bottom:0;
  height:38px;z-index:4;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2px;padding:0 2px;
  background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 100%)}
#s-artist .art-bpm-edge span{
  flex:1 1 0;min-width:1px;height:15%;border-radius:1px 1px 0 0;
  background:linear-gradient(0deg,var(--c) 0%,rgba(0,200,232,.15) 100%);
  animation:artBpmEdgePulse 1.15s ease-in-out infinite alternate}
@keyframes artBpmEdgePulse{
  0%{height:12%;opacity:.55}
  50%{height:70%;opacity:.9}
  100%{height:30%;opacity:.65}
}
@media(prefers-reduced-motion:reduce){
  #s-artist .art-bpm-edge span{animation:none;height:24%;opacity:.6}
}
@media(max-width:768px){
  #s-artist .art-bpm-edge{height:22px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   MINI PLAYER MOBILE — el volumen se maneja con botones físicos del teléfono.
   Esta regla va al final a propósito: hay una regla anterior que fuerza el
   volumen visible siempre; acá la pisamos solo en mobile para no amontonar
   el reproductor.
   ══════════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  #mini-player.active-mode .p-vol-slider,
  #mini-player.active-mode #p-vol-icon{display:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTISTA — Botones Manifiesto/Entrevista con estilo real (antes no tenían
   NINGÚN estilo base, se veían como botones nativos del navegador sin diseño).
   ══════════════════════════════════════════════════════════════════════════════ */
.art-vid-action-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:30px;
  background:rgba(0,200,232,.05);
  border:1px solid rgba(0,200,232,.32);
  color:rgba(255,255,255,.92);
  font-family:var(--fh);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .3s cubic-bezier(.4,0,.2,1)}
.avab-ico{font-size:13px}
.art-btn-manifesto:hover{
  background:var(--gold);border-color:var(--gold);color:#000;
  box-shadow:0 6px 24px rgba(232,152,30,.35);transform:translateY(-2px)}
.art-btn-interview:hover{
  background:var(--c);border-color:var(--c);color:#000;
  box-shadow:0 6px 24px rgba(0,200,232,.4);transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTISTA MOBILE — compactar el header para que el primer bloque de texto
   aparezca sin necesidad de scrollear, y mejorar el diseño/accesibilidad de
   los botones Manifiesto/Entrevista (antes se apilaban en 2 filas enteras).
   ══════════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  html body #s-artist .art-info{padding-top:calc(var(--nav-h,46px) + 6px) !important}
  html body #s-artist .s-lbl{margin-bottom:3px !important}
  html body #s-artist .art-name.art-logo{margin-bottom:0 !important}
  html body #s-artist .art-civil-name{margin-top:2px !important;margin-bottom:2px}

  /* Botones lado a lado, tamaño de toque accesible (44px), texto que entra en 2 líneas */
  html body #s-artist .art-vid-actions-inline{
    display:grid !important;grid-template-columns:1fr 1fr !important;
    gap:8px !important;margin-top:8px !important;width:100%}
  html body #s-artist .art-vid-action-btn{
    width:100% !important;min-height:44px;
    justify-content:center !important;text-align:center;
    padding:8px 6px !important;font-size:9px !important;line-height:1.25;
    white-space:normal !important}
  html body #s-artist .avab-ico{font-size:14px;display:block;margin:0 auto 2px}

  html body #s-artist .art-blocks.art-3col{margin-top:10px !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   FLECHAS LATERALES — señal permanente de que se puede navegar entre secciones
   con scroll/swipe. Antes no había ninguna pista visual salvo un hint que
   aparecía una vez y se iba, fácil de perderse.
   ══════════════════════════════════════════════════════════════════════════════ */
.gr-side-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(10,10,20,.5);border:1px solid rgba(0,200,232,.3);
  color:rgba(255,255,255,.7);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:850;backdrop-filter:blur(6px);
  transition:opacity .3s,transform .3s,background .2s,border-color .2s;
  animation:grSideNavPulse 2.6s ease-in-out infinite}
.gr-side-nav:hover{background:rgba(0,200,232,.18);border-color:var(--c);color:#fff}
.gr-side-prev{left:10px}
.gr-side-next{right:10px}
.gr-nav-hidden{opacity:0 !important;pointer-events:none;animation:none !important}
@keyframes grSideNavPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,200,232,.25)}
  50%{box-shadow:0 0 0 6px rgba(0,200,232,0)}
}
@media(max-width:768px){
  .gr-side-nav{width:32px;height:32px;font-size:16px;top:auto;bottom:calc(var(--dock-h,60px) + 90px);transform:none}
  .gr-side-prev{left:8px}
  .gr-side-next{right:8px}
}
@media(prefers-reduced-motion:reduce){.gr-side-nav{animation:none}}
body.safe-mode .gr-side-nav{animation:none}

/* ══════════════════════════════════════════════════════════════════════════════
   BOTÓN "ESCUCHAR EN VEZ DE LEER" — lee el manifiesto/entrevista en voz alta
   usando la síntesis de voz nativa del navegador (sin backend, sin costo).
   ══════════════════════════════════════════════════════════════════════════════ */
.tts-btn{
  position:sticky;top:0;z-index:5;margin:14px auto 0;display:flex;
  align-items:center;gap:8px;padding:10px 20px;border-radius:30px;
  background:rgba(0,200,232,.08);border:1px solid rgba(0,200,232,.35);
  color:var(--c);font-family:var(--fh);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;cursor:pointer;transition:all .25s;
  backdrop-filter:blur(8px);width:max-content}
.tts-btn:hover{background:var(--c);color:#000;box-shadow:0 4px 18px rgba(0,200,232,.35)}
.tts-btn.tts-playing{background:var(--c);color:#000;animation:ttsPlayingPulse 1.4s ease-in-out infinite}
@keyframes ttsPlayingPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,200,232,.4)}
  50%{box-shadow:0 0 0 8px rgba(0,200,232,0)}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ÁLBUM DEBUT Y CONTACTO — centrados de verdad en el medio de la pantalla,
   ancho y alto. El intento anterior de anclarlos arriba (para igualar la
   altura del logo de Artista) los dejó con demasiado aire abajo y se veían
   "subidos". Esto tiene prioridad: gana por cascada sobre cualquier
   padding-top/align-items anterior en conflicto.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
   ÁLBUM DEBUT Y CONTACTO — versión final y completa. Encontramos 25 reglas
   distintas para #s-connect .section-inner acumuladas de sesiones anteriores,
   todas con la misma especificidad, peleando entre sí por distintas
   propiedades sueltas. En vez de sumar otro fragmento más, este bloque fija
   TODAS las propiedades relevantes de una — así no queda ningún resquicio
   para que se cuele un valor de alguna regla vieja.
   ══════════════════════════════════════════════════════════════════════════════ */
@media(min-width:769px){
  html body #s-albums .albs-gate{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:40px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important}
  html body #s-albums .albs-gate-inner{
    margin:0 auto !important}

  html body #s-connect .section-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:40px 5vw !important;
    gap:16px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important}
  html body #s-connect .ic-header,
  html body #s-connect .ic-direct-channels,
  html body #s-connect .ic-info-tags,
  html body #s-connect .ic-socials{
    margin-left:auto !important;margin-right:auto !important}
}
@media(max-width:768px){
  html body #s-albums .albs-gate{
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    width:100% !important;height:100% !important;margin:0 !important;
    padding:calc(var(--nav-h,46px) + 16px) 20px calc(var(--dock-h,60px) + 20px) !important;
    box-sizing:border-box !important;overflow-y:auto !important;text-align:center !important}
  html body #s-albums .albs-gate-inner{margin:0 auto !important;width:100% !important}
  html body #s-connect .section-inner{
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    text-align:center !important;width:100% !important;height:100% !important;margin:0 !important;
    padding:calc(var(--nav-h,46px) + 16px) 5vw calc(var(--dock-h,60px) + 20px) !important;
    gap:14px !important;box-sizing:border-box !important;overflow-y:auto !important}
  html body #s-connect .ic-header,
  html body #s-connect .ic-direct-channels,
  html body #s-connect .ic-info-tags,
  html body #s-connect .ic-socials{
    margin-left:auto !important;margin-right:auto !important}
}

/* Colita del globo de diálogo del resultado del juego (loader inicial) */
.gr-arcade-bubble .gab-tail{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:7px solid rgba(8,8,16,.94)}

/* ══════════════════════════════════════════════════════════════════════════════
   DECORACIÓN ESPACIAL ADICIONAL DEL HERO — estrellas fugaces, satélite orbitando,
   nave lejana. Todo aria-hidden, todo pointer-events:none, no interfiere con
   nada de lo que ya existía (decks, chat, headphones, etc).
   ══════════════════════════════════════════════════════════════════════════════ */
.h-space-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

/* Estrellas fugaces — cruzan la pantalla de vez en cuando, con estela que se apaga */
.h-shooting-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:0 0 6px 1px rgba(255,255,255,.8);opacity:0;
  top:var(--hss-top,10%);left:var(--hss-left,-5%)}
.h-shooting-star::before{content:'';position:absolute;top:50%;right:0;width:80px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));
  transform:translateY(-50%) rotate(180deg);transform-origin:right center}
.hss1{--hss-top:14%;animation:hShootingStar 7s ease-in 1.2s infinite}
.hss2{--hss-top:32%;animation:hShootingStar 9s ease-in 4.5s infinite}
.hss3{--hss-top:58%;animation:hShootingStar 8s ease-in 8s infinite}
@keyframes hShootingStar{
  0%{opacity:0;transform:translate(0,0)}
  2%{opacity:1}
  16%{opacity:0;transform:translate(46vw,26vh)}
  100%{opacity:0;transform:translate(46vw,26vh)}
}

/* Satélite — órbita lenta y amplia alrededor de todo el hero */
.h-satellite{position:absolute;top:50%;left:50%;width:20px;height:8px;z-index:2;
  animation:hSatOrbit 34s linear infinite;opacity:.55}
.h-sat-body{position:absolute;left:8px;top:1px;width:6px;height:6px;background:#c8d2da;
  border-radius:1px;box-shadow:0 0 4px rgba(200,210,218,.6)}
.h-sat-panel{position:absolute;top:2px;width:7px;height:4px;background:rgba(0,200,232,.55);
  border:.5px solid rgba(0,200,232,.8)}
.h-sat-panel-l{left:0}
.h-sat-panel-r{right:0}
.h-sat-blink{position:absolute;left:9.5px;top:-1.5px;width:2px;height:2px;border-radius:50%;
  background:#ff5050;box-shadow:0 0 3px #ff5050;animation:hSatBlink 1.6s ease-in-out infinite}
@keyframes hSatBlink{0%,80%,100%{opacity:.15}90%{opacity:1}}
@keyframes hSatOrbit{
  0%{transform:translate(-46vw,-4vh) rotate(0deg)}
  25%{transform:translate(0,-24vh) rotate(90deg)}
  50%{transform:translate(46vw,-4vh) rotate(180deg)}
  75%{transform:translate(0,16vh) rotate(270deg)}
  100%{transform:translate(-46vw,-4vh) rotate(360deg)}
}

/* Nave lejana — cruza despacio de un lado al otro, muy tenue */
.h-spaceship{position:absolute;top:22%;left:-8%;font-size:16px;opacity:0;
  filter:drop-shadow(0 0 6px rgba(0,200,232,.4));
  animation:hSpaceshipDrift 22s ease-in-out 3s infinite}
@keyframes hSpaceshipDrift{
  0%{opacity:0;transform:translate(0,0) rotate(-6deg)}
  8%{opacity:.5}
  46%{opacity:.5;transform:translate(120vw,6vh) rotate(4deg)}
  54%{opacity:0}
  100%{opacity:0;transform:translate(120vw,6vh) rotate(4deg)}
}

@media(max-width:768px){
  .h-satellite{animation-duration:26s}
  .h-spaceship{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .h-shooting-star,.h-satellite,.h-spaceship{animation:none !important;opacity:0 !important}
}
body.safe-mode .h-shooting-star,
body.safe-mode .h-satellite,
body.safe-mode .h-spaceship{animation:none !important;opacity:0 !important}