@font-face{font-family:"Clash Display";src:url(/fonts/clash-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --vermelho:oklch(0.53 0.21 25);       /* #c8102e, o vermelho das capas dele */
  --vermelho-escuro:oklch(0.38 0.15 25);
  --rosa:oklch(0.82 0.08 20);
  --tinta:oklch(0.17 0.012 25);         /* preto quente */
  --tinta-2:oklch(0.23 0.016 25);
  --papel:oklch(0.965 0.008 40);
  --papel-2:oklch(0.92 0.012 35);
  --cinza:oklch(0.48 0.012 25);
  --display:"Clash Display",ui-sans-serif,system-ui,sans-serif;
  --corpo:Satoshi,ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(18px,5vw,64px);
  --dms-cookies-bg:#1d1414;--dms-cookies-fg:#fff;--dms-cookies-accent:#c8102e;--dms-cookies-accent-fg:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:#fff;font:400 clamp(16px,1.05vw,18px)/1.6 var(--corpo)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--rosa);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;margin:0;letter-spacing:.005em;word-spacing:.12em}
h2{font-size:clamp(2rem,5vw,3.6rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pular{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:50}
.pular:focus{left:8px}

/* topo: marca + canhoto de ingresso */
.topo{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--gutter);padding-top:max(14px,env(safe-area-inset-top));background-color:rgba(18,12,12,0);transition:background-color .3s,box-shadow .3s}
.topo.rolou{background-color:#120c0c;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.marca{display:flex;flex-direction:column;text-decoration:none;line-height:.9}
.marca b{font:700 1.65rem/1 var(--display);letter-spacing:.01em}
.marca span{font:700 .62rem/1 var(--corpo);letter-spacing:.42em;margin-top:4px}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{text-decoration:none;font-weight:700;font-size:.95rem;opacity:.86;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--vermelho);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:hover{opacity:1}.menu a:hover::after{transform:scaleX(1)}
.ingresso{--n:9px;position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 22px 0 18px;background:var(--vermelho);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;
  -webkit-mask:radial-gradient(circle var(--n) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--n) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;transition:background .2s}
.ingresso::after{content:"";position:absolute;right:12px;top:8px;bottom:8px;border-left:2px dashed rgba(255,255,255,.55)}
.ingresso span{padding-right:14px}
.ingresso:hover{background:var(--vermelho-escuro)}
.abre-menu{display:none}

/* palco */
.palco{position:relative;padding:0;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#0c0808 url(/assets/v/palco.webp) center/cover no-repeat}
.palco-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,8,.88) 0%,rgba(12,8,8,.55) 45%,rgba(12,8,8,.1) 100%),linear-gradient(0deg,rgba(12,8,8,.9) 0%,transparent 40%)}
.palco-texto{position:relative;padding:120px var(--gutter) 40px;max-width:900px}
.rotulo{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--rosa);margin:0 0 14px}
h1{font-size:clamp(3.4rem,11vw,9rem);text-transform:uppercase;line-height:.88}
h1 .linha{display:block;overflow:hidden}
h1 .linha>span{display:inline-block;animation:sobe .9s var(--ease) both}
h1 .linha-2{font-size:.5em;letter-spacing:.12em;margin-top:.15em}
h1 .linha-2>span{animation-delay:.12s}
@keyframes sobe{from{transform:translateY(105%)}to{transform:none}}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:34em;margin:22px 0 28px;color:#f1e7e5}
.acoes{display:flex;gap:12px;flex-wrap:nowrap}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:2px solid var(--vermelho);background:var(--vermelho);color:#fff;font:700 1rem var(--corpo);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.botao:hover{background:var(--vermelho-escuro);border-color:var(--vermelho-escuro)}
.botao:active{transform:scale(.97)}
.botao.contorno{background:transparent;border-color:rgba(255,255,255,.7)}
.botao.contorno:hover{background:rgba(255,255,255,.1)}
.faixa{position:relative;border-top:1px solid rgba(255,255,255,.14);background:rgba(12,8,8,.6);overflow:hidden;padding:14px 0}
.faixa-trilho{display:flex;width:max-content;animation:corre 46s linear infinite}
.faixa-trilho span{font:700 clamp(1.1rem,2vw,1.5rem)/1 var(--display);text-transform:uppercase;white-space:nowrap;padding:0 22px;color:#fff}
.faixa-trilho span::after{content:"";display:inline-block;width:.42em;height:.42em;background:var(--vermelho);border-radius:50%;margin-left:44px;vertical-align:middle}
@keyframes corre{to{transform:translateX(-50%)}}

/* bandas */
section{padding:clamp(64px,9vw,128px) var(--gutter)}
.banda-papel{background:var(--papel);color:var(--tinta)}
.banda-vermelha{background:var(--vermelho);color:#fff}
.cabeca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(28px,4vw,48px)}
.cabeca p{max-width:30em;margin:0;font-size:1.08rem}

/* clipes */
.clipes{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.clipe{margin:0}
.clipe-capa{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.clipe-capa img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.clipe-capa:hover img{transform:scale(1.04)}
.clipe-capa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:var(--vermelho);box-shadow:0 0 0 0 rgba(200,16,46,.6);transition:transform .25s var(--ease)}
.play::after{content:"";position:absolute;left:21px;top:16px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.clipe-capa:hover .play{transform:scale(1.1)}
.fila .play{width:40px;height:40px;right:10px;bottom:10px}.fila .play::after{left:16px;top:12px;border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
figcaption{padding-top:10px;font-size:.92rem;color:var(--cinza)}
figcaption b{display:block;color:var(--tinta);font:700 1.05rem/1.2 var(--display)}
.destaque figcaption b{font-size:1.6rem}
.ouvir{margin:clamp(28px,4vw,44px) 0 0;font-weight:700}
.ouvir a{color:var(--vermelho-escuro)}

/* história */
.historia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;background:var(--tinta)}
.historia-foto{margin:0;position:relative}
.historia-foto::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--vermelho);z-index:0}
.historia-foto img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 50%}
.historia-texto h2{margin-bottom:22px}
.historia-texto p{color:#e9dedc;max-width:38em}

.interludio{height:clamp(260px,52vw,620px);overflow:hidden;background:#000}
.interludio img{width:100%;height:100%;object-fit:cover}
@supports (animation-timeline:view()){
  .interludio img{animation:parallax linear both;animation-timeline:view()}
  @keyframes parallax{from{transform:translateY(-10%) scale(1.2)}to{transform:translateY(10%) scale(1.2)}}
}

/* passaporte: a assinatura */
.passaporte{overflow:hidden} /* o carimbo começa em scale(1.5): sem isto a página fica mais larga que o celular */
.carimbos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,24px)}
.carimbo{aspect-ratio:1;border:3px double rgba(255,255,255,.9);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;transform:rotate(var(--r));opacity:.95}
.carimbo b{font:700 clamp(.95rem,1.5vw,1.25rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.03em}
.carimbo span{font-size:.78rem;margin-top:6px;opacity:.9}
.js .carimbo{opacity:0;transform:rotate(var(--r)) scale(1.5)}
.js .carimbo.in{opacity:.95;transform:rotate(var(--r)) scale(1);transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);margin-top:clamp(40px,6vw,72px);border-top:1px solid rgba(255,255,255,.35);padding-top:28px}
.formato h3{font-size:1.4rem;margin-bottom:8px}
.formato p{margin:0;color:#ffe9ea}

/* contratar */
.contratar{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.contratar-info h2{margin-bottom:18px}
.canal{margin:10px 0;font-weight:700;font-size:1.08rem}
.canal a{color:var(--vermelho-escuro);text-decoration-thickness:2px;text-underline-offset:4px}
.form{display:grid;gap:14px;background:#fff;padding:clamp(20px,3vw,36px);border-top:6px solid var(--vermelho)}
.form label{display:grid;gap:6px;font-weight:700;font-size:.92rem}
.form input,.form textarea{font:400 1rem var(--corpo);padding:12px 14px;border:1.5px solid #cdbfbc;background:#fff;color:var(--tinta);width:100%;min-height:46px}
.form input:focus,.form textarea:focus{border-color:var(--vermelho)}
.form [aria-invalid=true]{border-color:#b00020;background:#fff5f5}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.armadilha{position:absolute;left:-9999px}
.aviso{margin:0;min-height:1.4em;font-weight:700}
.aviso.ok{color:#126b2e}.aviso.erro{color:#b00020}
.nota{margin:0;font-size:.85rem;color:var(--cinza)}
.nota a{color:inherit}

/* perguntas */
.perguntas{background:var(--papel-2);color:var(--tinta)}
.perguntas h2{margin-bottom:24px}
details{border-top:1px solid #c9b9b6;max-width:60rem}
details:last-child{border-bottom:1px solid #c9b9b6}
summary{cursor:pointer;padding:18px 0;font:700 1.15rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--vermelho);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 18px;max-width:46em}
details a{color:var(--vermelho-escuro)}

.rodape{background:#0c0808;padding:48px var(--gutter) max(32px,env(safe-area-inset-bottom));display:grid;gap:22px}
.rodape-marca{display:flex;flex-direction:column;line-height:.9}
.rodape-marca b{font:700 2.4rem/1 var(--display)}.rodape-marca span{font-weight:700;letter-spacing:.42em;font-size:.8rem;margin-top:6px}
.redes{display:flex;flex-wrap:wrap;gap:10px 24px}
.redes a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--vermelho)}
.legal{margin:0;font-size:.85rem;color:#bfb0ad}
.dms-pref{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

@media (max-width:1024px){
  .carimbos{grid-template-columns:repeat(3,1fr)}
  .clipes{grid-template-columns:1fr}
}
@media (max-width:860px){
  .menu{position:fixed;inset:0 0 auto;top:0;flex-direction:column;gap:0;background:#120c0c;padding:84px var(--gutter) 24px;transform:translateY(-100%);transition:transform .35s var(--ease);margin:0}
  .menu.aberto{transform:none}
  .menu a{padding:14px 0;font-size:1.3rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .abre-menu{display:grid;place-content:center;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;z-index:2;margin-left:4px}
  .abre-menu span:not(.sr){display:block;width:24px;height:2px;background:#fff;transition:transform .3s}
  .abre-menu[aria-expanded=true] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .abre-menu[aria-expanded=true] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
  .marca,.ingresso{position:relative;z-index:2}
  .ingresso{margin-left:auto}
  .historia,.contratar{grid-template-columns:1fr}
  .historia-foto img{aspect-ratio:16/10}
  .formatos{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ingresso{display:none} /* no celular o "Contratar show" fica no palco e no menu; no topo empurrava o menu para fora */
  .abre-menu{margin-left:auto}
  .marca b{font-size:1.35rem}
  .dupla{grid-template-columns:1fr}
  .acoes .botao{flex:1 1 0;padding:0 12px}
  .fila{grid-template-columns:1fr 1fr}
  .carimbos{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .interludio img{animation:none}
  .faixa-trilho{animation:none}
}

/* páginas internas (privacidade, 404) */
.interna .topo{background-color:#120c0c}
.texto-pagina{background:var(--papel);color:var(--tinta);padding:140px var(--gutter) 80px;min-height:70vh}
.texto-pagina h1{font-size:clamp(2.2rem,6vw,4rem);text-transform:none;line-height:1.05;margin-bottom:24px}
.texto-pagina h2{font-size:1.5rem;margin:32px 0 10px}
.texto-pagina p{max-width:44em}
.texto-pagina a{color:var(--vermelho-escuro)}