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

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

© 2026 SmartQuik. Todos os direitos reservados.
*/
:root{
  --ink:#150c07;         /* fundo base (quase preto, puxado pro marrom-café) */
  --paper:#f6efe2;       /* claro, papel kraft levemente amarelado */
  --flame:#ff5a1f;       /* laranja principal */
  --ember:#c8380c;       /* laranja-vermelho, mais fechado */
  --rust:#5c1c04;        /* laranja bem escuro, quase marrom */
  --gold:#ffb648;        /* accent secundário, usado com moderação */
  --line: rgba(246,239,226,0.16);
  --line-dark: rgba(21,12,7,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:'Archivo',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.01em; line-height:0.9;}
.tag-font{font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:0.06em;}
.mono{font-family:'IBM Plex Mono',monospace; 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(--flame);
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid rgba(0,0,0,0.15);
}
.spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Bebas Neue',sans-serif; letter-spacing:0.28em;
  font-size:13px; color:var(--ink); white-space:nowrap;
  display:flex; align-items:center; gap:14px;
}
.spine span::before, .spine span::after{content:"●"; font-size:6px;}
@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 ---------- */
header{
  position:fixed; top:0; left:var(--spine-w); right:0; z-index:50;
  background:linear-gradient(to bottom, rgba(21,12,7,0.75), transparent);
}
@media(max-width:760px){ header{left:0;} }
.header-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px var(--pad); max-width:var(--maxw); margin:0 auto;
}
.logo-mark{ height:26px; width:auto; display:block; }

.wordmark{display:flex; align-items:center; gap:10px;}
.wordmark .mark{
  width:30px; height:30px; background:var(--flame); flex:none;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-6deg);
}
.wordmark .mark span{font-family:'Anton',sans-serif; font-size:15px; color:var(--ink); transform:rotate(6deg);}
.wordmark .word{font-family:'Anton',sans-serif; font-size:18px; letter-spacing:0.02em;}
.navlinks{display:flex; align-items:center; gap:26px; font-size:12px; text-transform:uppercase; letter-spacing:0.12em;}
.navlinks a{opacity:0.75; transition:opacity .2s;}
.navlinks a:hover{opacity:1;}
.nav-cta{background:var(--flame); color:var(--ink); padding:10px 18px; font-size:11px; font-weight:700;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--paper); display:block;}
@media(max-width:760px){
  .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);}
  .nav-toggle{display:flex;}
  .navlinks a{opacity:1;}
}

  /* ---------- 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:'Anton',sans-serif;
    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(--red-bright); 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 ----------
   SEM FOTO DE PROPÓSITO. Fundo é um padrão diagonal em CSS.
   Pra colocar sua própria arte de fundo depois, é só adicionar em .hero:
   background-image:url('images/hero-bg.jpg'); background-size:cover; background-position:center;
   (e pode remover o repeating-linear-gradient abaixo se quiser) */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background-color:var(--ink);
  background-image:
    repeating-linear-gradient(-8deg, rgba(255,90,31,0.09) 0 2px, transparent 2px 46px);
  isolation:isolate; overflow:hidden;
  padding-top:90px;
}
.hero::before{
  content:""; position:absolute; right:-8vw; top:-6vh; width:60vw; height:60vw; max-width:640px; max-height:640px;
  border:1px solid rgba(255,90,31,0.25); border-radius:50%; z-index:0;
}
.hero::after{
  content:""; position:absolute; right:6vw; top:10vh; width:38vw; height:38vw; max-width:420px; max-height:420px;
  border:1px solid rgba(255,182,72,0.18); border-radius:50%; z-index:0;
}
.hero .container{position:relative; z-index:2; width:100%; padding-top:40px; padding-bottom:56px;}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(246,239,226,0.35); padding:8px 16px;
  font-family:'Bebas Neue',sans-serif; letter-spacing:0.2em; font-size:13px;
  margin-bottom:30px;
}
.eyebrow-pill .dot{width:7px; height:7px; background:var(--flame); border-radius:50%;}

.hero-title{font-size:clamp(58px, 11vw, 150px); margin-bottom:8px;}
.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;}
.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;
  cursor:pointer; border:1px solid var(--paper); white-space:nowrap;
}
.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);}
.btn-ghost{background:transparent; color:var(--paper);}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,0.08);}

.hero-chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:52px;}
.hero-chip{border:1px solid var(--line); padding:14px 20px; min-width:150px;}
.hero-chip .num{font-family:'Anton',sans-serif; font-size:clamp(22px,2.6vw,30px); color:var(--flame);}
.hero-chip .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.8; margin-top:4px;}

.hero-photo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url('images/marks-top.png');
  background-repeat:no-repeat;
  background-position: right 15% bottom -100px;
  background-size: auto 108%;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, transparent 42%);
}

@media(max-width:900px){
  .hero-photo{
    background-position: center bottom;
    background-size: auto 95%;
    opacity:0.85;
  }
  .hero-photo::after{
    background:linear-gradient(180deg, rgba(21,12,7,0.35) 0%, rgba(21,12,7,0.65) 60%, var(--ink) 100%);
  }
}

/* ---------- 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:'Anton',sans-serif; 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;}
.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:'Anton',sans-serif; 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:'Bebas Neue',sans-serif; letter-spacing:0.08em; font-size:14px;
}
.pull-quote{
  font-family:'Anton',sans-serif; 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;
}

.sobre-photo-wrap{ position:relative; margin-top:28px; max-width:340px; }
.sobre-photo-wrap::before{
  content:""; position:absolute; inset:-10px -10px -10px -10px;
  background:repeating-linear-gradient(-45deg, rgba(200,56,12,0.12) 0 2px, transparent 2px 14px);
  border:1px solid var(--line-dark); transform:rotate(-2deg); z-index:0;
}
.sobre-photo{ position:relative; z-index:1; width:100%; height:auto; display:block; }

/* ---------- 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:'Anton',sans-serif; 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-size:9.5px; letter-spacing:0.04em;
  color:var(--ink); opacity:0.4; text-transform:uppercase; text-align:center;
}
.selo-item span{ font-family:'Bebas Neue',sans-serif; 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:'Bebas Neue',sans-serif; letter-spacing:0.1em; font-size:13px; opacity:0.75;}
.selos-caption span::before{content:"—  ";}

/* ---------- FAIXAS (ranking em gráfico de barras) ---------- */
.faixas{background:var(--paper); color:var(--ink);}
.rank-row{display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:center; padding:12px 0;}
.rank-row .pos{font-family:'Anton',sans-serif; font-size:16px; opacity:0.4;}
.rank-title-line{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:12px;}
.rank-title-line .t{font-family:'Anton',sans-serif; font-size:clamp(15px,1.7vw,19px); text-transform:uppercase;}
.rank-title-line .s{font-family:'IBM Plex Mono',monospace; font-size:11.5px; opacity:0.55; white-space:nowrap;}
.rank-track{height:10px; background:rgba(21,12,7,0.08); overflow:hidden;}
.rank-fill{height:100%; background:var(--ember); width:0%; transition:width 1.1s cubic-bezier(.2,.7,.2,1);}

/* ---------- 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(255,90,31,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-size:9.5px; letter-spacing:0.04em;
  opacity:0.4; text-transform:uppercase;
}
.disco-cover .play-overlay{
  position:absolute; inset:0; background:rgba(21,12,7,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:'Anton',sans-serif; 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-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 Marks 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:'Anton',sans-serif; font-size:clamp(40px,5vw,58px); color:var(--ember); line-height:1;}
.mapa-total .l{font-family:'Bebas Neue',sans-serif; 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(21,12,7,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:'Bebas Neue',sans-serif; 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-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-size:11px; font-weight:600;
}
.uf-row .nm{flex:1;}
.uf-row .qt{font-family:'IBM Plex Mono',monospace; 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(21,12,7,0.08); stroke:var(--paper); stroke-width:1; vector-effect:non-scaling-stroke;}
.wm-country-hl{fill:rgba(21,12,7,0.08); stroke:var(--paper); stroke-width:1; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill .2s ease;}
.wm-country-hl.is-visited{fill:var(--ember);}
.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:'Archivo',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(21,12,7,0.75); color:var(--paper);
  padding:6px 11px; border-radius:8px; font-family:'Bebas Neue',sans-serif; letter-spacing:0.06em; font-size:12px;
  pointer-events:none; opacity:1; transition:opacity .5s;
}
.wm-hint.is-hidden{opacity:0;}

/* ---------- PROJETO EM DESTAQUE -- */
.destaque{
  background-image:url('images/destaque-bg.png');
  background-size:cover;
  background-position:top;
  position:relative;
}
@media(max-width:760px){
  .destaque{
    background-image:url('images/destaque-bg.png');
    background-position:top center;
  }
}
.destaque::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(21,12,7,0.88) 0%, rgba(21,12,7,0.55) 45%, rgba(21,12,7,0.15) 75%);
  z-index:0;
}
.destaque .container{position:relative; z-index:1; max-width:840px;}
.destaque .tape{
  display:inline-block; background:var(--flame); color:var(--ink);
  font-family:'Bebas Neue',sans-serif; 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);}
.destaque p{font-size:16.5px; line-height:1.75; opacity:0.9; margin-top:22px; max-width:60ch;}

/* ---------- 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:'Archivo',sans-serif; font-size:15px; text-transform:none; letter-spacing:normal;
  background:transparent; border:1px solid rgba(246,239,226,0.3); color:var(--paper);
  padding:13px 14px; transition:border-color .2s, background .2s;
}
.fan-form input::placeholder{color:rgba(246,239,226,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(21,12,7,0.95) 0%, rgba(21,12,7,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-size:12px; letter-spacing:0.06em; opacity:0.9; margin-bottom:8px;}
.show-card .show-title{font-family:'Anton',sans-serif; 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:'Anton',sans-serif; font-size:min(19vw,210px); color:transparent;
  -webkit-text-stroke:1.5px rgba(21,12,7,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(21,12,7,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-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:18px;}
.footer-mark .word{font-family:'Anton',sans-serif; font-size:44px;}
.footer-mark .word .accent{color:var(--flame);}
.social-links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.social-links a{display:inline-flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; opacity:0.78; border:1px solid var(--line); padding:10px 16px; transition:.2s;}
.social-links a:hover{opacity:1; border-color:var(--paper);}
.copyright{margin-top:44px; font-size:11px; opacity:0.4; letter-spacing:0.06em;}

/* ---------- MUSIC PLAYER ---------- */
body{padding-bottom:74px;}
.player-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:rgba(21,12,7,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(246,239,226,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:'Anton',sans-serif;
  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(246,239,226,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-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(246,239,226,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;}
}