/* 
███████╗███╗   ███╗ █████╗ ██████╗ ████████╗ ██████╗ ██╗   ██╗██╗██╗  ██╗
██╔════╝████╗ ████║██╔══██╗██╔══██╗╚══██╔══╝██╔═══██╗██║   ██║██║██║ ██╔╝
███████╗██╔████╔██║███████║██████╔╝   ██║   ██║   ██║██║   ██║██║█████╔╝
╚════██║██║╚██╔╝██║██╔══██║██╔══██╗   ██║   ██║▄▄ ██║██║   ██║██║██╔═██╗
███████║██║ ╚═╝ ██║██║  ██║██║  ██║   ██║   ╚██████╔╝╚██████╔╝██║██║  ██╗
╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚══▀▀═╝  ╚═════╝ ╚═╝╚═╝  ╚═╝

Website desenvolvido por SmartQuik
https://smartquik.com.br

© 2026 SmartQuik. Todos os direitos reservados.
*/
:root{
  --ink:#0a0a12;         /* fundo base (quase preto, puxado pro marrom-café) */
  --paper:#eef1f6;       /* claro, papel kraft levemente amarelado */
  --flame:#00e6c8;       /* laranja principal */
  --ember:#ff2ec4;       /* laranja-vermelho, mais fechado */
  --rust:#241a3d;        /* laranja bem escuro, quase marrom */
  --gold:#8a7bff;        /* accent secundário, usado com moderação */
  --line: rgba(238,241,246,0.16);
  --line-dark: rgba(10,10,18,0.14);
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --spine-w: 46px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Chakra Petch',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; line-height:0.9;}
.tag-font{font-family:'IBM Plex Mono',monospace; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;}
.mono{font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.03em;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}
a{color:inherit;}
img,svg{display:block;}
:focus-visible{outline:2px solid var(--flame); outline-offset:3px;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.icon{width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.icon-sm{width:14px; height:14px;}

/* ---------- LOMBADA LATERAL (elemento de assinatura) ----------
   Faixa fixa na borda esquerda com o texto girado, tipo lombada de
   livro/revista. É o elemento que dá identidade única a essa página. */
.spine{
  position:fixed; left:0; top:0; bottom:0; width:var(--spine-w);
  z-index:60; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--flame);
  box-shadow:inset -6px 0 18px -12px var(--flame);
}
.spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.28em;
  font-size:12px; color:var(--flame); white-space:nowrap;
  display:flex; align-items:center; gap:14px;
}
.spine span::before{content:"● REC"; font-size:10px; color:var(--ember); letter-spacing:0.1em; animation:rec-blink 1.6s ease-in-out infinite;}
.spine span::after{content:"●"; font-size:6px;}
@keyframes rec-blink{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }
@media(max-width:760px){ .spine{display:none;} }
body{ margin-left:var(--spine-w); }
@media(max-width:760px){ body{margin-left:0;} }
header, .marquee-wrap, footer, section { /* keep full width within margin */ }

/* ---------- NAV ----------
   Barra flutuante em cápsula (logo à esquerda, menu com pílula no item ativo,
   CTA sólida à direita) — o logo fica sempre visível, sem depender de scroll. */
header{
  position:fixed; top:0; left:var(--spine-w); right:0; z-index:50;
  padding:14px var(--pad) 0;
}
@media(max-width:760px){ header{left:0; padding:12px 16px 0;} }
.header-row{
  display:flex; align-items:center; gap:22px;
  max-width:var(--maxw); margin:0 auto;
  background:rgba(14,14,24,0.72); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px;
  padding:10px 10px 10px 22px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,0.6);
}
.logo-mark{ height:26px; width:auto; display:block; }
.wordmark{display:flex; align-items:center; flex:none;}

.navlinks{display:flex; align-items:center; gap:4px; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; margin:0 auto;}
.navlinks a{
  opacity:0.75; transition:opacity .2s, background .2s, color .2s;
  padding:9px 15px; border-radius:999px;
}
.navlinks a:hover{opacity:1;}
.navlinks a.is-active{opacity:1; background:var(--paper); color:var(--ink);}
.nav-cta{background:var(--flame); color:var(--ink); padding:12px 22px; font-size:11px; font-weight:700; border-radius:999px; flex:none;}
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
  position:relative; z-index:75; /* acima do .navlinks em tela cheia no mobile, senão o botão fica "por baixo" e não dá pra fechar o menu clicando nele de novo */
}
.nav-toggle span{width:22px; height:2px; background:var(--paper); display:block; transition:transform .25s ease, opacity .25s ease;}
@media(max-width:760px){
  /* backdrop-filter no .header-row (o pai direto do .navlinks) faz esse pai
     virar o "containing block" do menu, que é position:fixed — no Chrome/Safari
     isso trava o inset:0 do menu dentro da pilulazinha do header em vez da tela
     inteira, e o menu abre cortado/só até a altura do header, com o fundo do
     vídeo aparecendo em volta. Por isso desliga o blur (só no mobile) e deixa o
     fundo da pilula mais opaco pra compensar visualmente a falta do blur. */
  .header-row{padding:8px 8px 8px 18px; backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(12,12,20,0.94);}
  .navlinks{
    position:fixed; inset:0; top:0; background:var(--ink);
    flex-direction:column; justify-content:center; align-items:center;
    gap:26px; font-size:16px; opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease;
  }
  .navlinks.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .navlinks a.is-active{background:none; color:inherit;}
  /* Contratar sai do header no mobile (fica só o CTA lá embaixo, na section
     #contratar) — sobra espaço e o hambúrguer vai sozinho pro canto direito. */
  .nav-cta{display:none;}
  .nav-toggle{display:flex; margin-left:auto;}
  .navlinks a{opacity:1;}
  /* Hambúrguer vira "X" quando o menu tá aberto */
  .nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-active span:nth-child(2){opacity:0;}
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

  /* ---------- MARQUEE ---------- */
  .marquee-wrap{
    background:var(--ink);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    padding:14px 0;
  }
  .marquee{display:flex; width:max-content; animation:scroll 30s linear infinite;}
  .marquee span{
    font-family:'Chakra Petch',sans-serif; font-weight:700;
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:0.03em;
    padding:0 24px;
    display:flex; align-items:center; gap:24px;
    color:var(--flame);
    opacity:0.9;
    white-space:nowrap;
  }
  .marquee span::after{content:"★"; color:var(--ember); font-size:11px;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media(max-width:600px){ .marquee span{font-size:14px; padding:0 16px; gap:16px;} }

/* ---------- HERO ----------
   Agora com o efeito de vídeo em scroll (ver bloco VIDEO-FX mais abaixo).
   .hero só define o fundo de base; o layout sticky vem de .video-fx. */
.hero{
  background-color:var(--ink);
}
.hero .container{position:relative; z-index:1; width:100%; padding-top:130px; padding-bottom:56px;}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--flame); padding:8px 16px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.2em; font-size:12px;
  margin-bottom:30px; color:var(--flame); background:rgba(0,230,200,0.06);
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}
.eyebrow-pill .dot{width:7px; height:7px; background:var(--ember); border-radius:50%; animation:rec-blink 1.6s ease-in-out infinite;}

/* A logo real substitui o título "MC. VJ." em texto tanto no mobile quanto
   no desktop agora (antes só entrava no mobile). */
.hero-logo-mobile{display:block; height:clamp(64px,9vw,130px); width:auto; margin-bottom:16px; filter:drop-shadow(0 4px 22px rgba(0,0,0,0.65));}
.hero-title{display:none;}
.hero-title .line1{-webkit-text-stroke:2px var(--paper); color:transparent; display:block;}
.hero-title .line2{color:var(--flame); display:block; margin-top:-0.12em;}

.hero .sub{margin-top:26px; max-width:50ch; font-size:16.5px; line-height:1.65; opacity:0.92; text-shadow:0 2px 14px rgba(0,0,0,0.75);}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 26px;
  font-size:12px; text-transform:uppercase; letter-spacing:0.12em; font-weight:700;
  transition:transform .18s ease, background .18s ease, color .18s ease, clip-path .18s ease;
  cursor:pointer; border:1px solid var(--paper); white-space:nowrap;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.btn-solid{background:var(--flame); color:var(--ink); border-color:var(--flame);}
.btn-solid:hover{transform:translateY(-2px); background:var(--paper); color:var(--ink); border-color:var(--paper); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.btn-ghost{background:transparent; color:var(--paper);}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,0.08); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}

.hero-chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:52px;}
.hero-chip{
  position:relative; border:1px solid var(--line); padding:14px 20px; min-width:150px;
}
.hero-chip::before, .hero-chip::after{
  content:""; position:absolute; width:9px; height:9px; border:1.5px solid var(--flame); opacity:0.85;
}
.hero-chip::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.hero-chip::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
.hero-chip .num{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,30px); color:var(--flame); text-shadow:0 2px 10px rgba(0,0,0,0.8);}
.hero-chip .lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.8; margin-top:4px; text-shadow:0 1px 8px rgba(0,0,0,0.8);}

/* ---------- VIDEO-FX (efeito de vídeo em scroll — Hero e Destaque) ----------
   Sequência de imagens (frames) tocada via canvas + GSAP ScrollTrigger
   conforme a página rola, no estilo dos sites de trailer/cinemático.
   .video-fx = wrapper alto (a "pista" de scroll); .video-fx-stage fica
   sticky ocupando 100% da tela enquanto o usuário rola pelo wrapper. */
.video-fx{
  position:relative;
  height:260vh; /* quanto maior, mais "devagar" o vídeo passa ao rolar */
}
.video-fx .video-fx-stage{
  position:sticky; top:0; height:100svh; width:100%;
  overflow:hidden; display:flex; align-items:center;
  isolation:isolate;
}
.video-fx-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; background:var(--ink); display:block;
}
.video-fx-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
}
.video-fx-overlay.video-fx-fade-bottom{
  background:linear-gradient(to top, var(--ink) 0%, var(--ink) 40%, transparent 100%);
}
.video-fx-overlay.video-fx-fade-top{
  background:linear-gradient(to bottom, var(--ink) 0%, var(--ink) 40%, transparent 100%);
}
.video-fx-loading{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.12em; font-size:14px;
  transition:opacity .5s;
}
.video-fx-loading.is-hidden{opacity:0; pointer-events:none;}
/* Sem véu escuro cobrindo o vídeo — a legibilidade do texto vem de
   text-shadow/drop-shadow nos próprios elementos (título, subtítulo, chips),
   então o vídeo aparece inteiro, sem barra/faixa preta por cima. */
/* Fallback sem JS/GSAP ou com "reduzir movimento" ativado: sem canvas animado */
.video-fx.video-fx-static .video-fx-canvas,
.video-fx.video-fx-static .video-fx-overlay{display:none;}
.video-fx.video-fx-static .video-fx-stage{background:var(--ink);}
@media(max-width:760px){
  .video-fx{height:220vh;}
  /* No mobile o conteúdo do hero (logo, texto, chips) cabe inteiro na tela,
     então centralizar verticalmente (padrão do desktop) deixava pouco respiro
     entre o header e a pilula "Mídia Kit..." — alinhando pelo topo, o
     padding-top do .hero .container vira uma distância fixa e previsível.
     Só que daí, alinhado pelo topo, o espaçamento generoso feito pro desktop
     (pensado pra ficar centralizado, com sobra em cima E embaixo) passava da
     altura da tela e cortava os últimos chips (a section tem overflow:hidden)
     — por isso os respiros abaixo ficam bem mais enxutos só no mobile. */
  .hero .video-fx-stage{align-items:flex-start;}
  .hero .container{padding-top:100px; padding-bottom:24px;}
  .eyebrow-pill{margin-bottom:18px;}
  .hero-logo-mobile{margin-bottom:10px;}
  .hero .sub{margin-top:14px;}
  .hero-cta{margin-top:20px;}
  .hero-chips{margin-top:24px;}
  .hero-chip{padding:10px 14px; min-width:130px;}
}

/* ---------- FAIXA DIAGONAL (assinatura visual) ---------- */
.slash-wrap{position:relative; z-index:5; margin:-34px 0; overflow:hidden;}
.slash{
  background:var(--flame); color:var(--ink);
  transform:rotate(-1.6deg); padding:16px 0;
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}
.slash-track{display:flex; width:max-content; animation:scroll 26s linear infinite;}
.slash-track span{
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:19px; text-transform:uppercase;
  padding:0 22px; display:flex; align-items:center; gap:22px; white-space:nowrap;
}
.slash-track span::after{content:"✦"; font-size:12px;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- SECTION FRAME ---------- */
section{padding:clamp(72px,10vw,120px) 0;}
/* .hero e .destaque (video-fx) não podem herdar esse padding: como o
   .video-fx-stage é sticky/top:0 dentro da section, um padding-top aqui
   empurrava o vídeo pra baixo — sobrava uma faixa vazia da cor de fundo
   entre o header flutuante e o vídeo (era essa a "margem" e também a
   causa real da barra preta que aparecia no topo do Destaque). O
   espaçamento do texto por cima do vídeo já é resolvido pelo
   .hero .container / .destaque .container, então zerar aqui é seguro. */
section.video-fx{padding:0;}
.kicker{font-size:12px; text-transform:uppercase; letter-spacing:0.28em; color:var(--flame); margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.kicker::before{content:""; width:22px; height:2px; background:var(--flame);}
h2.display{font-size:clamp(34px,5.2vw,72px); margin-bottom:24px;}

/* ---------- SOBRE (editorial, letra capitular + citação grande) ---------- */
.sobre{background:var(--paper); color:var(--ink); position:relative;}
.sobre .container{display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:start;}
@media(max-width:820px){ .sobre .container{grid-template-columns:1fr; gap:30px;} }
.sobre-head{ top:110px;}
.sobre .dropcap{
  font-family:'Chakra Petch',sans-serif; font-weight:700; float:left; font-size:76px; line-height:0.78;
  padding:6px 10px 0 0; color:var(--ember);
}
.sobre p{font-size:16.5px; line-height:1.72; margin-bottom:18px; max-width:60ch;}
.hits-list{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 26px;}
.hits-list span{
  border:1.5px solid var(--ink); padding:7px 14px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.08em; font-size:14px;
}
.pull-quote{
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,32px); line-height:1.28;
  text-transform:uppercase; border-left:5px solid var(--flame); padding:4px 0 4px 22px; margin-top:8px;
}

/* A rotação fica aqui no wrap (e não só na moldura tracejada do ::before) —
   assim a foto de verdade gira JUNTO com a moldura, os dois como uma coisa
   só. Antes só a moldura girava -2deg e a foto ficava reta, então elas
   pareciam "desencontradas" (a moldura num ângulo, a foto em outro). */
.sobre-photo-wrap{ position:relative; margin-top:28px; max-width:340px; transform:rotate(-2deg); }
.sobre-photo-wrap::before{
  content:""; position:absolute; inset:-10px -10px -10px -10px;
  background:repeating-linear-gradient(-45deg, rgba(255,46,196,0.12) 0 2px, transparent 2px 14px);
  border:1px solid var(--line-dark); z-index:0;
}
.sobre-photo{ position:relative; z-index:1; width:100%; height:auto; display:block; }
.sobre-photo-placeholder{
  aspect-ratio:4/5; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(10,10,18,0.06); border:1px dashed var(--line-dark);
  color:var(--ink); opacity:0.7;
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.1em; font-size:13px; text-transform:uppercase;
}

/* ---------- NÚMEROS (barras horizontais proporcionais) ---------- */
.numeros{background:var(--ink);}
.bar-row{display:grid; grid-template-columns:200px 1fr 110px; align-items:center; gap:18px; padding:15px 0; border-bottom:1px solid var(--line);}
.bar-row:first-of-type{border-top:1px solid var(--line);}
.bar-row .lbl{font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.88;}
.bar-track{height:14px; background:rgba(255,255,255,0.06); position:relative; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--ember), var(--flame)); width:0%; transition:width 1.2s cubic-bezier(.2,.7,.2,1);}
.bar-row .val{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:19px; text-align:right; color:var(--flame);}
@media(max-width:640px){
  .bar-row{grid-template-columns:1fr; gap:6px;}
  .bar-row .val{text-align:left;}
}

/* ---------- SELOS & PARCEIROS (logos reais extraídos do mídia kit) ---------- */
.selos{background:var(--rust); position:relative; overflow:hidden;}
.selos::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:6px 6px; opacity:0.5;
}
.selos .container{position:relative; z-index:1;}
.selos-panel{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:16px;
}
.selo-item{
  flex:1 1 220px; max-width:280px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.selo-logo{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(209, 209, 209, 0.05) 0 2px, transparent 2px 14px),
    var(--paper);
  border:1px solid rgba(255, 255, 255, 0.12);
  display:flex; align-items:center; justify-content:center;
}
.selo-logo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:22px; box-sizing:border-box;
}
.selo-logo .ph-icon{ color:var(--ink); opacity:0.28; width:26%; height:26%; }
.selo-logo .ph-label{
  position:absolute; bottom:8px; left:8px; right:8px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:9.5px; letter-spacing:0.04em;
  color:var(--ink); opacity:0.4; text-transform:uppercase; text-align:center;
}
.selo-item span{ font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.1em; font-size:13px; color:var(--paper); opacity:0.65; text-align:center; }
.selos-caption{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;}
.selos-caption span{font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.1em; font-size:13px; opacity:0.75;}
.selos-caption span::before{content:"—  ";}

/* ---------- FAIXAS (tracklist com link direto pro Spotify) ---------- */
.faixas{background:var(--paper); color:var(--ink);}
.track-list{margin-top:8px; border-top:1px solid var(--line-dark);}
.track-row{
  display:flex; align-items:center; gap:18px; padding:18px 6px;
  border-bottom:1px solid var(--line-dark);
  position:relative; overflow:hidden; text-decoration:none; color:inherit;
  transition:padding-left .2s ease;
}
.track-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--flame), var(--ember));
  transform:scaleY(0); transform-origin:bottom; transition:transform .25s ease;
}
.track-row:hover{padding-left:16px;}
.track-row:hover::before{transform:scaleY(1);}
.track-row .idx{font-size:13px; opacity:0.4; width:26px; flex:none;}
.track-row .info{flex:1; min-width:0;}
.track-row .t{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:clamp(15px,1.8vw,20px); text-transform:uppercase; line-height:1.15;}
.track-row .tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; opacity:0.55; margin-top:4px; letter-spacing:0.02em;}
.track-row .play{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  border:1px solid var(--ink); padding:8px 13px; opacity:0.7; transition:opacity .2s, background .2s, color .2s;
}
.track-row .play svg{width:10px; height:10px;}
.track-row:hover .play{opacity:1; background:var(--ink); color:var(--paper);}
@media(max-width:560px){
  .track-row .tag{display:none;}
  .track-row .play span{display:none;}
}

/* ---------- DISCOGRAFIA (grid de capas — placeholders até você subir a arte) ----------
   Cada capa é um placeholder com textura diagonal + nota musical.
   Pra colocar a capa de verdade, edite o array ALBUMS no JS (campo "capa": "images/capas/nome.jpg").
   Sem precisar mexer aqui no CSS. */
.discografia{background:var(--ink); position:relative; overflow:hidden;}
.disco-carousel-wrap{position:relative; margin-top:36px; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding:0 var(--pad);}
.disco-carousel{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 22px; scrollbar-width:none; -ms-overflow-style:none;
}
.disco-carousel::-webkit-scrollbar{display:none;}
.disco-card{
  scroll-snap-align:start; flex:0 0 clamp(150px, 21vw, 210px); position:relative; cursor:pointer;
}
.disco-arrow{position:absolute; top:calc(50% - 14px); transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--flame); color:var(--ink); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; z-index:3; opacity:0.92; transition:opacity .2s, transform .2s;}
.disco-arrow:hover{opacity:1; transform:translateY(-50%) scale(1.06);}
.disco-prev{left:-6px;} .disco-next{right:-6px;}
@media(max-width:680px){.disco-arrow{display:none;}}
.disco-cover{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(0,230,200,0.14) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, var(--rust), var(--ink));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, border-color .3s ease;
}
.disco-card:hover .disco-cover{transform:translateY(-4px) rotate(-1deg); border-color:var(--flame);}
.disco-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.disco-cover .ph-icon{opacity:0.35; width:30%; height:30%;}
.disco-cover .ph-label{
  position:absolute; bottom:8px; left:8px; right:8px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:9.5px; letter-spacing:0.04em;
  opacity:0.4; text-transform:uppercase;
}
.disco-cover .play-overlay{
  position:absolute; inset:0; background:rgba(10,10,18,0.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease;
}
.disco-card:hover .play-overlay{opacity:1;}
.play-overlay .play-btn{
  width:44px; height:44px; border-radius:50%; background:var(--flame);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.play-overlay .play-btn svg{width:16px; height:16px; margin-left:2px;}
.disco-meta{margin-top:10px;}
.disco-meta .t{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase; line-height:1.15; letter-spacing:0.01em;}
.disco-meta .y{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:10.5px; opacity:0.55; margin-top:3px;}

/* ---------- MAPA DE SHOWS (mapa do Brasil interativo — SVG real, não é imagem) ----------
   Pra marcar por onde o MC Brenninho VJ já passou, edite o array VISITED no JS:
   cada item é a sigla do estado (UF) + quantidade de shows (opcional, só decorativo).
   O mapa e os pinos são desenhados automaticamente a partir dessa lista. */
.mapa-shows{background:var(--paper); color:var(--ink); overflow:hidden;}
.mapa-grid{display:grid; grid-template-columns:1.4fr 0.6fr; gap:40px; align-items:center; margin-top:20px;}

@media(max-width:900px){ .mapa-grid{grid-template-columns:1fr; gap:32px;} }
.mapa-total{
  display:inline-flex; flex-direction:column; margin-bottom:26px;
}
.mapa-total .n{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:clamp(40px,5vw,58px); color:var(--ember); line-height:1;}
.mapa-total .l{font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.14em; font-size:14px; opacity:0.7; margin-top:4px;}
.mapa-svg-wrap{position:relative; width:100%; max-width:760px; margin:0 auto; overflow:hidden; border-radius:14px;}
.mapa-svg-wrap svg{width:100%; height:auto; display:block; touch-action:none; cursor:grab;}
.mapa-svg-wrap svg:active{cursor:grabbing;}
.uf-shape{fill:rgba(10,10,18,0.08); stroke:var(--paper); stroke-width:1.5; vector-effect:non-scaling-stroke; transition:fill .25s ease;}
.uf-shape.visited{fill:var(--ember);}
.uf-shape:hover{fill:var(--flame);}
.map-pin{transform-origin:center; animation:pin-pop .4s ease backwards;}
.map-pin circle{fill:var(--ink);}
.map-pin path{fill:var(--paper);}
@keyframes pin-pop{ from{transform:scale(0);} to{transform:scale(1);} }
.mapa-tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background:var(--ink); color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.08em; font-size:13px;
  padding:6px 12px; white-space:nowrap; opacity:0; transition:opacity .15s ease;
  transform:translate(-50%,-130%);
}
.mapa-tooltip.show{opacity:1;}
.mapa-list-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;}
.mapa-list-head .cnt{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; opacity:0.55;}
.uf-list{display:flex; flex-direction:column; max-height:420px; overflow-y:auto; border-top:1px solid var(--line-dark);}
.uf-list::-webkit-scrollbar{width:5px;}
.uf-list::-webkit-scrollbar-thumb{background:var(--line-dark);}
.uf-row{
  display:flex; align-items:center; gap:14px; padding:11px 2px;
  border-bottom:1px solid var(--line-dark);
  font-size:14px;
}
.uf-row .badge{
  flex:none; width:34px; height:26px; display:flex; align-items:center; justify-content:center;
  background:var(--ember); color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px; font-weight:600;
}
.uf-row .nm{flex:1;}
.uf-row .qt{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11.5px; opacity:0.55;}

/* ---------- MAPA MUNDIAL (Internacional) — adicionado junto ao mapa do Brasil ---------- */
.wm-bg{opacity:1;}
.wm-country-bg{fill:rgba(10,10,18,0.08); stroke:var(--paper); stroke-width:1; vector-effect:non-scaling-stroke;}
.wm-country-hl{fill:var(--ember); stroke:var(--paper); stroke-width:1; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill .2s ease;}
.wm-country-hl:hover{fill:var(--flame);}
.wm-arc{fill:none; stroke:var(--ember); stroke-width:1.1; vector-effect:non-scaling-stroke; stroke-dasharray:4 5; opacity:0.5;}
.wm-pins .map-pin{transform-origin:0 0;}
.wm-reset-btn{
  position:absolute; top:10px; left:10px; z-index:6; display:none; align-items:center; gap:7px;
  background:var(--ink); color:var(--paper); border:none; padding:8px 14px; border-radius:999px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; cursor:pointer; letter-spacing:0.02em;
}
.wm-reset-btn svg{width:13px; height:13px;}
.mapa-svg-wrap.is-zoomed .wm-reset-btn{display:inline-flex;}
.wm-zoom-controls{position:absolute; top:10px; right:10px; z-index:6; display:flex; flex-direction:column; gap:6px;}
.wm-zoom-btn{
  width:30px; height:30px; border-radius:50%; border:none; background:var(--ink); color:var(--paper);
  font-size:17px; font-weight:700; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center;
}
.wm-hint{
  position:absolute; bottom:10px; left:10px; z-index:6; background:rgba(10,10,18,0.75); color:var(--paper);
  padding:6px 11px; border-radius:8px; font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.06em; font-size:12px;
  pointer-events:none; opacity:1; transition:opacity .5s;
}
.wm-hint.is-hidden{opacity:0;}

/* ---------- PROJETO EM DESTAQUE ----------
   Fundo agora é o efeito de vídeo em scroll (ver bloco VIDEO-FX). */
.destaque .container{position:relative; z-index:1; max-width:840px;}
.destaque .tape{
  display:inline-block; background:var(--flame); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0.15em; font-size:13px;
  padding:8px 16px; transform:rotate(-2deg); margin-bottom:26px;
}
.destaque h2{font-size:clamp(32px,5.4vw,64px); text-shadow:0 4px 20px rgba(0,0,0,0.7);}
.destaque p{font-size:16.5px; line-height:1.75; opacity:0.9; margin-top:22px; max-width:60ch; text-shadow:0 2px 14px rgba(0,0,0,0.75);}

/* ---------- FÃS ---------- */
.fans{background:var(--paper); color:var(--ink); position:relative; overflow:hidden;}
.fans-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:860px){ .fans-grid{grid-template-columns:1fr; gap:34px;} }
.fans-copy .sub-copy{margin-top:16px; max-width:44ch; font-size:16px; line-height:1.6; opacity:0.82;}
.fan-form{
  display:flex; flex-direction:column; gap:16px;
  background:var(--ink); color:var(--paper);
  padding:34px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
@media(max-width:520px){ .fan-form{padding:24px;} }
.fan-form label{display:flex; flex-direction:column; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; opacity:0.85;}
.fan-form input[type="text"], .fan-form input[type="tel"]{
  font-family:'Space Grotesk',sans-serif; font-size:15px; text-transform:none; letter-spacing:normal;
  background:transparent; border:1px solid rgba(238,241,246,0.3); color:var(--paper);
  padding:13px 14px; transition:border-color .2s, background .2s;
}
.fan-form input::placeholder{color:rgba(238,241,246,0.4);}
.fan-form input:focus{outline:none; border-color:var(--flame); background:rgba(255,255,255,0.04);}
.fan-consent{flex-direction:row !important; align-items:flex-start; gap:10px !important; font-size:12px; text-transform:none !important; letter-spacing:normal !important; opacity:0.75; line-height:1.5;}
.fan-consent input[type="checkbox"]{margin-top:3px; width:16px; height:16px; accent-color:var(--flame); flex:none;}
.fan-submit{justify-content:center; margin-top:6px;}
.fan-submit:disabled{opacity:0.6; cursor:not-allowed; transform:none !important;}
.fan-status{font-size:12px; min-height:16px; opacity:0.85;}
.fan-status.is-error{color:var(--ember); opacity:1;}

/* ---------- PRÓXIMOS SHOWS ----------
   As imagens aqui são flyers de cada evento (SHOWS[].imagem no JS) —
   troque pelos flyers reais de cada data quando tiver. */
.shows2{background:var(--ink); overflow:hidden;}
.shows2 > .container{padding-bottom:0;}
.shows-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.shows-carousel-wrap{position:relative; margin-top:28px; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding:0 var(--pad);}
.shows-carousel{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 30px; scrollbar-width:none; -ms-overflow-style:none;}
.shows-carousel::-webkit-scrollbar{display:none;}
.show-card{
  scroll-snap-align:start; flex:0 0 clamp(240px, 30vw, 320px); position:relative;
  aspect-ratio:4/5; overflow:hidden; background:var(--rust); border:1px solid var(--line);
}
.show-card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.show-card:hover img{transform:scale(1.06);}
.show-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,18,0.95) 0%, rgba(10,10,18,0.2) 52%, transparent 78%);}
.show-card .show-tag{position:absolute; top:16px; left:16px; z-index:2; background:var(--flame); color:var(--ink); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; padding:5px 10px; font-weight:700;}
.show-card .show-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; color:var(--paper);}
.show-card .show-date{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; letter-spacing:0.06em; opacity:0.9; margin-bottom:8px;}
.show-card .show-title{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:21px; text-transform:uppercase; line-height:1.08; margin-bottom:6px;}
.show-card .show-local{font-size:12.5px; opacity:0.82; margin-bottom:16px;}
.show-card .show-link{display:inline-flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; border:1px solid var(--paper); padding:9px 15px; transition:background .18s ease, color .18s ease;}
.show-card .show-link:hover{background:var(--paper); color:var(--ink);}
.shows-arrow{position:absolute; top:38%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--flame); color:var(--ink); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; z-index:3; opacity:0.92; transition:opacity .2s, transform .2s;}
.shows-arrow:hover{opacity:1; transform:translateY(-50%) scale(1.06);}
.shows-prev{left:6px;} .shows-next{right:6px;}
@media(max-width:680px){.shows-arrow{display:none;}}
.shows-dots{display:flex; gap:8px; justify-content:center; margin-top:2px; padding-bottom:6px;}
.show-dot{width:7px; height:7px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; transition:width .2s, background .2s;}
.show-dot.active{background:var(--flame); width:22px; border-radius:4px;}

/* ---------- CONTRATAR ---------- */
.booking{background:var(--flame); color:var(--ink); position:relative; overflow:hidden;}
.booking::after{
  content:"RESERVAS"; position:absolute; right:-2vw; bottom:-7vh;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:min(19vw,210px); color:transparent;
  -webkit-text-stroke:1.5px rgba(10,10,18,0.18); pointer-events:none; z-index:0; white-space:nowrap;
}
.booking .container{position:relative; z-index:1;}
.booking-lead{max-width:640px;}
.booking h2{font-size:clamp(34px,5.2vw,66px); margin-bottom:20px;}
.booking-lead p{max-width:46ch; font-size:16px; line-height:1.6; opacity:0.85;}
.contact-grid{margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
.contact-card{border:1.5px solid var(--ink); padding:20px 22px; display:flex; align-items:center; gap:16px; transition:background .2s, transform .2s; text-decoration:none;}
.contact-card:hover{background:rgba(10,10,18,0.08); transform:translateY(-2px);}
.contact-card .ico-wrap{flex:none; width:38px; height:38px; border:1.5px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.contact-card .info{min-width:0; flex:1;}
.contact-card .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:0.12em; opacity:0.75; margin-bottom:6px;}
.contact-card .val{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); padding:64px 0 36px; text-align:center;}
.footer-mark{display:flex; flex-direction:column; align-items:center; gap:26px;}
.footer-mark .word{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:44px;}
.footer-mark .word .accent{color:var(--flame);}
/* Selos & parceiros: 3 logos pequenas, sem caixa/fundo (as artes já vêm em
   PNG com fundo transparente). Enquanto não tiver a arte real, mostra só o
   nome em texto discreto no lugar. */
.footer-logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:34px 40px;}
/* A imagem já começa visível (display:block) — antes ela só aparecia depois
   que o onload disparava escondendo o texto, e como as imagens tinham
   loading="lazy", isso podia demorar (ou nunca disparar a tempo) e o texto
   ficava preso na tela mesmo com a logo carregando/carregada certinha. Agora
   o texto (.fl-placeholder) é que começa escondido, e só aparece de verdade
   se a imagem der erro (onerror). */
.footer-logo-item img{height:100px; width:auto; max-width:170px; object-fit:contain; display:block; opacity:0.85; transition:opacity .2s;}
.footer-logo-item img:hover{opacity:1;}
.footer-logo-item .fl-placeholder{
  display:none; font-family:'IBM Plex Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.08em; opacity:0.4;
}
.social-links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.social-links a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--paper); border:1px solid var(--flame); border-radius:999px; padding:10px 18px;
  transition:background .2s, color .2s, transform .2s;
}
.social-links a svg{color:var(--flame); transition:color .2s;}
.social-links a:hover{background:var(--flame); color:var(--ink); transform:translateY(-2px);}
.social-links a:hover svg{color:var(--ink);}
.copyright{margin-top:44px; font-size:11px; opacity:0.55; letter-spacing:0.06em;}
.copyright a{color:var(--flame); font-weight:600; border-bottom:1px solid rgba(0,230,200,0.4); transition:opacity .2s, border-color .2s;}
.copyright a:hover{opacity:0.8; border-color:transparent;}

/* ---------- MUSIC PLAYER ---------- */
body{padding-bottom:74px;}
.player-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:rgba(10,10,18,0.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(0);
  transition:transform .35s ease;
  color:var(--paper);
}
.player-bar.is-hidden{transform:translateY(110%);}
.player-inner{
  display:flex;
  align-items:center;
  gap:20px;
  padding-top:12px;
  padding-bottom:12px;
}
.player-track{
  display:flex; align-items:center; gap:12px;
  min-width:0;
  flex:0 0 auto;
  width:200px;
}
.player-art{
  flex:none;
  width:42px; height:42px;
  border:1px solid rgba(238,241,246,0.3);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--flame), var(--rust));
  position:relative;
  overflow:hidden;
}
.player-art .icon{width:18px; height:18px;}
.player-art.is-spinning svg{animation:player-spin 3s linear infinite;}
@keyframes player-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.player-meta{min-width:0;}
.player-title{
  font-family:'Chakra Petch',sans-serif; font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player-artist{font-size:11px; opacity:0.6; text-transform:uppercase; letter-spacing:0.08em; margin-top:2px;}

.player-controls{display:flex; align-items:center; gap:6px; flex:none;}
.player-btn{
  background:none; border:none; color:var(--paper); cursor:pointer;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0.85; transition:opacity .2s, background .2s;
}
.player-btn:hover{opacity:1; background:rgba(238,241,246,0.08);}
.player-btn .icon{width:16px; height:16px;}
.player-btn-main{
  background:var(--flame); color:var(--ink);
  width:38px; height:38px;
  opacity:1;
  position:relative;
}
.player-btn-main:hover{background:var(--paper); transform:scale(1.05);}
.player-btn-main .icon{width:16px; height:16px;}
.player-btn-main.is-inviting::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1.5px solid var(--flame);
  animation:player-invite-pulse 1.8s ease-out infinite;
}
@keyframes player-invite-pulse{
  0%{ transform:scale(0.85); opacity:0.9; }
  100%{ transform:scale(1.4); opacity:0; }
}

.player-progress-wrap{
  flex:1;
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.player-time{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px; opacity:0.6; flex:none; width:36px;}
.player-time.player-time-end{text-align:right;}
.player-progress{
  -webkit-appearance:none; appearance:none;
  flex:1; height:3px; border-radius:2px;
  background:rgba(238,241,246,0.22);
  cursor:pointer;
  outline:none;
}
.player-progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:var(--flame);
  box-shadow:0 0 0 3px rgba(0,0,0,0.25);
  opacity:0; transition:opacity .15s;
}
.player-progress:hover::-webkit-slider-thumb{opacity:1;}
.player-progress::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; border:none;
  background:var(--flame); opacity:0; transition:opacity .15s;
}
.player-progress:hover::-moz-range-thumb{opacity:1;}

.player-extra{display:flex; align-items:center; gap:4px; flex:none;}

.player-reopen{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background:var(--flame); color:var(--ink);
  border:none; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.player-reopen.is-visible{display:flex;}
.player-reopen .icon{width:20px; height:20px;}

@media(max-width:760px){
  .player-track{width:auto; flex:1;}
  .player-artist{display:none;}
  .player-inner{gap:12px; flex-wrap:wrap;}
  .player-progress-wrap{order:3; flex:0 0 100%; margin-top:2px;}
  .player-time{display:none;}
}

a{text-decoration:none}