/* Estilos do site do Trio Remelexo Bom Demais.
   Extraido do index.html para ser compartilhado com as outras paginas.
   Os caminhos aqui sao relativos a ESTE arquivo (assets/css/), nao a raiz. */

/* ---------- CS Ristara — display oficial da marca ---------- */
@font-face{
  font-family:"CS Ristara";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/CSRistara-Regular.woff2") format("woff2"),
      url("../fonts/CSRistara-Regular.woff") format("woff");
}
@font-face{
  font-family:"CS Ristara";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/CSRistara-Italic.woff2") format("woff2"),
      url("../fonts/CSRistara-Italic.woff") format("woff");
}
@font-face{
  font-family:"Alifira";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Alifira.otf") format("opentype");
}
@font-face{
  font-family:"Alifira";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/Alifira-Italic.otf") format("opentype");
}
@font-face{ /* italico reverso: nao existe font-style para ele, vira familia propria */
  font-family:"CS Ristara Rev";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/CSRistara-ReverseItalic.woff2") format("woff2"),
      url("../fonts/CSRistara-ReverseItalic.woff") format("woff");
}
/* ==========================================================================
   TRIO REMELEXO BOM DEMAIS — SISTEMA "ALBUM DE RECORDACAO"
   Colagem de papel rasgado, fita crepe, meio-tom, polaroides e script retro.
   Paleta terrosa: creme de papel, areia, barro, cacau, cafe.
   ========================================================================== */
:root{
  --cream:    #F8EFE4;   /* papel claro */
  --cream-2:  #FDF7EF;   /* papel da polaroide */
  --sand:     #EBD9C6;
  --tan:      #BE9E85;   /* painel medio */
  --clay:     #A57F5F;
  --cocoa:    #4B392C;   /* painel escuro */
  --espresso: #2C211A;
  --night:    #1D1611;
  --ink:      #3B2C22;   /* texto sobre creme */
  --ink-2:    rgba(59,44,34,.74);
  --ink-3:    rgba(59,44,34,.5);
  --milk:     #F6EADC;   /* texto sobre escuro */
  --milk-2:   rgba(246,234,220,.76);
  --milk-3:   rgba(246,234,220,.48);
  --star:     #F2DCB0;
  --wrap:  1240px;
  --pad:   clamp(18px,4.6vw,64px);
  --gap:   clamp(56px,8vw,128px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:118px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:17px;line-height:1.68;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--clay);color:var(--cream)}

/* granulado de papel sobre a pagina inteira */
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipografia ---------- */
.script{
  font-family:"CS Ristara",Georgia,serif;font-style:italic;font-weight:400;
  line-height:1.0;letter-spacing:-.012em;text-transform:none;margin:0;
}
.script.reta{font-style:normal}
.label{
  font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;margin:0;
}
.sans{font-family:Archivo,sans-serif}
.lead{font-size:16.5px;line-height:1.78;color:var(--ink-2);max-width:56ch;margin:0}
.on-dark .lead{color:var(--milk-2)}
h2,h3,h4{margin:0}

/* ---------- estrutura ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);position:relative}
section{position:relative}
.band{padding-block:var(--gap)}

/* ---------- texturas ---------- */
/* fibra vertical do papel — aplicada a tudo que "e" papel */
.note,.tix,.tk,.net,.snap,.about,.disco,.agenda,.nets{
  background-image:repeating-linear-gradient(90deg,
    rgba(59,44,34,.032) 0 1px, rgba(59,44,34,0) 1px 3px);
}
.release{
  background-image:repeating-linear-gradient(90deg,
    rgba(44,33,26,.04) 0 1px, rgba(44,33,26,0) 1px 3px);
}
.story,.book{
  background-image:repeating-linear-gradient(90deg,
    rgba(246,234,220,.03) 0 1px, rgba(246,234,220,0) 1px 3px);
}
.halftone{
  background-image:radial-gradient(currentColor 1.15px,transparent 1.35px);
  background-size:7px 7px;
}
.deco{position:absolute;pointer-events:none;z-index:3}

/* fita crepe */
.tape{
  position:absolute;z-index:6;width:clamp(78px,9vw,124px);height:clamp(24px,2.6vw,34px);
  background:rgba(44,33,26,.8);
  clip-path:polygon(0 12%,5% 0,100% 5%,95% 100%,2% 92%);
}
.tape.light{background:rgba(248,239,228,.9)}
.tape.clay{background:rgba(165,127,95,.85)}

/* borda rasgada entre faixas */
.tear{position:relative;z-index:5;line-height:0;margin-block:-1px}
.tear svg{display:block;width:100%;height:clamp(34px,4.6vw,70px);overflow:visible}
/* divisor da hero: sem faixa de cor propria e puxado para cima,
   para o papel rasgado cobrir o corte reto da foto */
.tear-hero{background:transparent;z-index:6;
  margin-top:calc(-1 * clamp(34px,4.6vw,70px))}

/* corda de sisal — objeto de cena */
.rope{position:absolute;z-index:0;pointer-events:none;user-select:none;
  filter:sepia(.14) saturate(.96) brightness(.97)}
.rope-release{z-index:8;left:-27%;bottom:-19%;width:58%;transform:rotate(-13deg)}

/* estrelas */
.star{color:var(--star)}
.star svg{width:100%;height:100%;display:block}

/* fotos */
.snap{position:relative;display:block;background:var(--cream-2);padding:9px 9px 9px;}
.snap.polar{padding-bottom:clamp(30px,4vw,44px)}
.snap img{width:100%;height:100%;object-fit:cover;display:block}
.snap figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;
  font-family:"CS Ristara",Georgia,serif;font-style:italic;font-size:15px;color:var(--clay)}
.tilt-l{transform:rotate(-2.6deg)}
.tilt-r{transform:rotate(2.2deg)}
.tilt-s{transform:rotate(-1.2deg)}

/* botoes */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:14px 26px;border:1.5px solid currentColor;transition:.25s}
.btn svg{width:14px;height:14px;flex:none}
.btn-fill{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-fill:hover{background:var(--clay);border-color:var(--clay)}
.on-dark .btn-fill{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.on-dark .btn-fill:hover{background:var(--star);border-color:var(--star)}
.btn-line{color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.on-dark .btn-line{color:var(--milk)}
.on-dark .btn-line:hover{background:var(--milk);color:var(--ink)}
.link-script{font-family:"CS Ristara",Georgia,serif;font-style:italic;font-size:clamp(20px,2.1vw,27px);
  color:var(--clay);display:inline-flex;align-items:center;gap:10px;transition:.25s}
.link-script:hover{color:var(--ink)}
.on-dark .link-script{color:var(--star)}
.on-dark .link-script:hover{color:var(--cream)}

/* ---------- NAV — folha de papel esticada no topo ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;pointer-events:none}
.nav-sheet{pointer-events:auto;background:var(--cream);position:relative;
  padding-bottom:clamp(14px,1.8vw,22px);
  background-image:repeating-linear-gradient(90deg,
    rgba(59,44,34,.032) 0 1px, rgba(59,44,34,0) 1px 3px);
  clip-path:polygon(0% 0%,100% 0%,100.00% 92.94%,99.33% 92.41%,98.67% 91.72%,98.00% 91.51%,97.33% 91.22%,96.67% 91.33%,96.00% 91.88%,95.33% 91.53%,94.67% 90.47%,94.00% 89.87%,93.33% 89.40%,92.67% 89.21%,92.00% 89.62%,91.33% 89.86%,90.67% 89.35%,90.00% 88.89%,89.33% 89.37%,88.67% 89.85%,88.00% 89.41%,87.33% 88.95%,86.67% 88.69%,86.00% 88.53%,85.33% 88.01%,84.67% 86.54%,84.00% 86.24%,83.33% 87.19%,82.67% 87.43%,82.00% 86.61%,81.33% 85.96%,80.67% 86.63%,80.00% 87.10%,79.33% 85.66%,78.67% 84.04%,78.00% 84.19%,77.33% 84.83%,76.67% 84.91%,76.00% 85.17%,75.33% 84.98%,74.67% 84.32%,74.00% 83.83%,73.33% 82.85%,72.67% 82.38%,72.00% 83.21%,71.33% 83.70%,70.67% 83.93%,70.00% 84.21%,69.33% 83.68%,68.67% 83.04%,68.00% 82.77%,67.33% 82.29%,66.67% 82.63%,66.00% 83.46%,65.33% 83.33%,64.67% 82.25%,64.00% 82.12%,63.33% 82.72%,62.67% 83.13%,62.00% 83.18%,61.33% 83.37%,60.67% 84.66%,60.00% 85.72%,59.33% 85.59%,58.67% 85.33%,58.00% 85.23%,57.33% 85.03%,56.67% 85.40%,56.00% 86.10%,55.33% 86.40%,54.67% 86.44%,54.00% 86.63%,53.33% 86.44%,52.67% 86.62%,52.00% 87.31%,51.33% 88.01%,50.67% 89.82%,50.00% 91.46%,49.33% 91.53%,48.67% 91.48%,48.00% 91.54%,47.33% 91.20%,46.67% 91.63%,46.00% 92.18%,45.33% 92.66%,44.67% 93.88%,44.00% 94.17%,43.33% 94.11%,42.67% 94.00%,42.00% 93.38%,41.33% 93.05%,40.67% 92.98%,40.00% 93.10%,39.33% 93.25%,38.67% 93.40%,38.00% 93.77%,37.33% 94.05%,36.67% 94.77%,36.00% 96.06%,35.33% 96.01%,34.67% 95.36%,34.00% 94.67%,33.33% 93.40%,32.67% 92.47%,32.00% 91.87%,31.33% 91.21%,30.67% 89.91%,30.00% 88.78%,29.33% 88.38%,28.67% 88.10%,28.00% 88.48%,27.33% 89.41%,26.67% 89.24%,26.00% 88.95%,25.33% 88.59%,24.67% 87.78%,24.00% 87.45%,23.33% 87.57%,22.67% 87.40%,22.00% 86.77%,21.33% 86.31%,20.67% 86.77%,20.00% 87.17%,19.33% 86.39%,18.67% 85.51%,18.00% 85.39%,17.33% 85.31%,16.67% 85.60%,16.00% 86.44%,15.33% 85.79%,14.67% 83.69%,14.00% 82.84%,13.33% 82.62%,12.67% 82.51%,12.00% 83.69%,11.33% 84.50%,10.67% 84.28%,10.00% 84.29%,9.33% 84.45%,8.67% 84.60%,8.00% 85.49%,7.33% 86.58%,6.67% 86.55%,6.00% 85.68%,5.33% 85.39%,4.67% 84.93%,4.00% 84.33%,3.33% 83.64%,2.67% 82.91%,2.00% 82.38%,1.33% 81.87%,0.67% 81.21%,0.00% 80.85%);transition:background .3s}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(11px,1.4vw,16px) var(--pad) 0;
  display:flex;align-items:center;gap:clamp(12px,2.2vw,34px)}
/* a logo oficial no lugar da palavra 'menu'. Pintada por 'mask', entao o SVG
   fica como arquivo e a cor vem do CSS — e muda no hover como o texto mudava.
   Sem texto dentro, o link depende do 'aria-label' para ser anunciado. */
.nav-mark{display:block;flex:none;width:clamp(108px,12vw,164px);
  aspect-ratio:666.31/164.52;background:var(--clay);transition:background .25s}
.nav-mark:hover{background:var(--ink)}
.nav-mark{-webkit-mask:url("../img/logo-trio-horizontal.svg") no-repeat center/contain;
          mask:url("../img/logo-trio-horizontal.svg") no-repeat center/contain}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);flex:1;flex-wrap:wrap}
.nav-links a{font-family:Archivo,sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);position:relative;
  padding:4px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.4px;
  background:var(--clay);transition:right .28s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-cta{flex:none;background:var(--clay);color:var(--cream);
  font-family:Archivo,sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;padding:12px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;transition:.25s}
.nav-cta:hover{background:var(--ink)}
.nav-cta svg{width:15px;height:15px}
.nav-burger{display:none;margin-left:auto;background:transparent;border:0;cursor:pointer;
  font-family:"CS Ristara",Georgia,serif;font-style:italic;font-size:19px;color:var(--ink)}

/* ---------- HERO ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a hero so da o fundo e a altura; a composicao vive no palco */
.hero{position:relative;width:100%;height:100svh;
  overflow:hidden;background:#000;isolation:isolate}
/* PALCO — proporcao fixa. circulo e recorte sao medidos em % dele, nunca da janela,
   entao a relacao entre os dois e a mesma em qualquer tela */
/* o palco encaixa pela ALTURA: espacamento de cima e de baixo sempre igual.
   a largura vem da proporcao e pode passar da tela — as laterais sangram, sem problema */
.hero-stage{position:absolute;left:50%;top:0;translate:-50% 0;
  --palco:1874/1198;aspect-ratio:var(--palco);height:100%;width:auto;max-width:none;
  container-type:size}
/* camada 1 — video de fundo em preto e branco */
/* camada 2 — recorte dos integrantes, ancorado na base e centralizado */
/* recorte em % do palco: cresce e diminui junto com o circulo */
/* PALAVRA DE FUNDO — 'cqh' e 1% da altura do palco, entao ela escala
   junto com a composicao em qualquer tela, sem media query */
/* TRIPTICO — o fundo da hero. Medido na referencia: a primeira divisoria fica
   a 29,8% da largura, a segunda a 68,7%, e a inclinacao e quase nada (0,6 grau),
   entao do topo ao pe a divisoria anda so ~1% da largura.
   A fenda entre os paineis deixa a areia do fundo aparecer. */
.hero-fundo{position:absolute;z-index:0;inset:0;pointer-events:none;
  user-select:none;overflow:hidden;background:#000}
/* o filme entra rebaixado sobre o preto do '.hero-fundo': assim ele vira
   ambiente e a logo fica sendo o elemento que salta */
.hero-fundo video{display:block;width:100%;height:100%;object-fit:cover;opacity:.38}
/* a foto entra como fundo do painel: assim '--zoom' e a altura da imagem em
   relacao ao painel e '--foco' aponta que ponto da foto fica no centro do
   enquadramento. E o controle mais direto para fechar cada retrato. */
/* no palco quadrado do tablet/celular, 'cover' cortaria quase tudo das
   laterais. Encaixando pela LARGURA o quadro inteiro aparece e o preto do
   fundo fecha o resto, emendando com o degrade do pe */
@media (max-width:900px){
  .hero-fundo video{object-fit:contain;object-position:50% 0}
}
/* ENTRADA DA HERO — o fundo abre, a foto sobe e o pe assenta, nessa ordem.
   Mesmo embalo do componente de referencia: cubic-bezier(.22,1,.36,1).
   'both' segura o estado inicial, entao nada pisca antes de comecar. */
@keyframes hero-fundo-entra{
  from{opacity:0;transform:scale(1.06)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes hero-pe-entra{
  from{opacity:0;transform:translateY(24px)}
  to  {opacity:1;transform:translateY(0)}
}
.hero-fundo{animation:hero-fundo-entra .9s cubic-bezier(.22,1,.36,1) .15s both}
/* o recorte ja usa 'translate' para centralizar; animar 'transform' nao
   briga com isso, porque as duas propriedades se somam */
.hero-base{animation:hero-pe-entra .7s cubic-bezier(.22,1,.36,1) .75s both}
/* a logo entra deslizando pela esquerda, como no componente de referencia.
   La o deslocamento e 20px para um texto pequeno; aqui a logo passa de
   1200px, entao 20px nao se percebe — subi para 36px na mesma proporcao.
   Ela e filha da faixa, que tambem anima: as duas transformacoes se somam. */
@keyframes hero-logo-entra{
  from{opacity:0;transform:translateX(-36px)}
  to  {opacity:1;transform:translateX(0)}
}
.hero-base-logo{animation:hero-logo-entra .5s cubic-bezier(.22,1,.36,1) 1s both}
@media (prefers-reduced-motion:reduce){
  .hero-fundo,.hero-base,.hero-base-logo{animation:none}
}

/* A LOGO — centrada na hero. Antes era uma faixa presa no pe; agora a camada
   cobre a secao inteira e so centraliza o conteudo.
   A logo e pintada por 'mask', entao o SVG fica como arquivo e a cor vem do CSS */
.hero-base{position:absolute;z-index:4;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(16px,2.4vw,30px);
  pointer-events:none;background:none}
/* a frase herda a fonte de display da marca. Sem sombra de proposito:
   o video ja entra rebaixado, entao o creme tem contraste de sobra */
.hero-frase{margin:0;color:var(--cream);text-align:center;
  font-size:clamp(19px,2.2vw,34px);line-height:1.2;padding-inline:20px;
  text-wrap:balance}
/* a camada ignora o mouse para nao atrapalhar o resto da hero; os botoes
   precisam voltar a receber clique */
.hero-acoes{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(9px,1vw,14px);pointer-events:auto;padding-inline:16px}
.hero-acoes .btn{backdrop-filter:blur(4px)}
/* no dark o contorno some sobre o video: reforca a borda */
.hero-acoes .btn-line{border-color:rgba(248,239,228,.6);color:var(--cream)}
.hero-acoes .btn-line:hover{background:var(--cream);color:var(--ink)}
.hero-base-logo{display:block;width:min(84svh,80vw);
  aspect-ratio:666.31/164.52;overflow:hidden;
  /* o branco fica por baixo do video: se ele nao tocar, a logo continua
     branca em vez de sumir */
  background:#fff;
  -webkit-mask:url("../img/logo-trio-horizontal.svg") no-repeat center/contain;
          mask:url("../img/logo-trio-horizontal.svg") no-repeat center/contain}
/* a mascara fica no contorno da logo e o video corre por dentro dele.
   O filme e 16/9 e a logo e 4/1, entao 'cover' corta bastante em cima e
   embaixo — e o que faz a imagem preencher as letras */
/* o video nao cobre o branco por inteiro: na parte translucida o branco de
   baixo aparece e garante um piso de luz. Sem isso, os trechos escuros do
   filme apagavam as letras contra a foto do fundo. */
.hero-base-logo video{display:block;width:100%;height:100%;object-fit:cover;
  opacity:.72;filter:grayscale(1) contrast(.9) brightness(1.7)}
@media (prefers-reduced-motion:reduce){
  .hero-base-logo video{display:none}   /* sobra o branco de baixo */
}
/* circulo medido na referencia, em % do palco */
/* retangulo arredondado, medido na referencia:
   laterais 5,8%/93,8% · topo 6,3% · base 84% · raio 6,5% da largura
   (o raio vertical e 7,4% porque a caixa e mais larga que alta, e assim o canto sai redondo) */

/* RESPONSIVO — a proporcao do palco acompanha a tela.
   As porcentagens internas nao mudam, entao o retangulo e o trio
   guardam a mesma relacao: o cartao so vai ficando mais alto e estreito.
   O encaixe e sempre pela ALTURA, entao a secao nunca fica com faixa vazia. */
@media (max-width:1180px){
  .hero-stage{--palco:1400/1120}            /* 1,25 — notebook */
  /* o palco ficou mais estreito, o trio junto: as medidas acompanham */
  .hero-base-logo{width:min(56svh,86vw)}
}
/* TABLET E CELULAR — a hero toma a tela inteira, igual ao desktop.
   O filme preenche por 'cover': antes ele encaixava pela largura e sobrava
   preto embaixo, que so fazia sentido quando a secao era quadrada. */
@media (max-width:900px){
  .hero-fundo video{object-fit:cover}
  /* a logo medida em 'vw' para manter a mesma proporcao do tablet ao celular */
  .hero-base-logo{width:76%}
}
.hero-core .label{color:var(--star);margin-bottom:clamp(16px,2.4vw,26px)}
.hero-logo{margin:0 0 clamp(10px,1.6vw,18px)}
.hero-logo img{width:min(80vw,clamp(270px,44vw,620px));height:auto;margin-inline:auto;
  filter:brightness(0) invert(1)}
.swash{display:block;margin:6px auto clamp(18px,2.6vw,30px);width:min(360px,64vw);color:var(--star)}
/* o paragrafo ganha sua propria folha: legibilidade sem escurecer o video */
.hero-sub{position:relative;font-size:clamp(15px,1.45vw,18px);line-height:1.72;
  color:var(--ink);background:var(--cream);max-width:46ch;
  margin:0 auto clamp(26px,3.4vw,38px);padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,38px);
  clip-path:polygon(0.00% 3.21%,0.77% 3.70%,1.54% 4.21%,2.31% 3.99%,3.08% 3.74%,3.85% 3.64%,4.62% 3.53%,5.38% 3.60%,6.15% 3.68%,6.92% 3.92%,7.69% 4.27%,8.46% 4.02%,9.23% 3.59%,10.00% 3.74%,10.77% 4.01%,11.54% 3.86%,12.31% 3.50%,13.08% 3.77%,13.85% 4.35%,14.62% 4.15%,15.38% 3.59%,16.15% 3.52%,16.92% 3.48%,17.69% 3.64%,18.46% 4.10%,19.23% 4.04%,20.00% 3.68%,20.77% 3.63%,21.54% 3.65%,22.31% 3.77%,23.08% 4.12%,23.85% 4.27%,24.62% 4.49%,25.38% 4.45%,26.15% 3.94%,26.92% 3.88%,27.69% 3.99%,28.46% 4.10%,29.23% 4.29%,30.00% 4.43%,30.77% 4.66%,31.54% 4.77%,32.31% 4.86%,33.08% 5.07%,33.85% 5.67%,34.62% 5.99%,35.38% 5.55%,36.15% 5.45%,36.92% 5.65%,37.69% 5.76%,38.46% 6.05%,39.23% 6.07%,40.00% 5.92%,40.77% 5.70%,41.54% 5.43%,42.31% 5.17%,43.08% 4.55%,43.85% 4.16%,44.62% 4.24%,45.38% 4.42%,46.15% 4.70%,46.92% 5.00%,47.69% 5.33%,48.46% 5.60%,49.23% 5.61%,50.00% 5.51%,50.77% 5.31%,51.54% 5.10%,52.31% 5.19%,53.08% 5.31%,53.85% 5.21%,54.62% 5.10%,55.38% 4.91%,56.15% 4.68%,56.92% 4.94%,57.69% 5.31%,58.46% 4.78%,59.23% 4.01%,60.00% 4.01%,60.77% 4.19%,61.54% 3.92%,62.31% 3.55%,63.08% 3.67%,63.85% 3.98%,64.62% 3.97%,65.38% 4.02%,66.15% 3.82%,66.92% 3.51%,67.69% 3.29%,68.46% 3.03%,69.23% 2.79%,70.00% 2.34%,70.77% 2.29%,71.54% 2.39%,72.31% 2.46%,73.08% 2.61%,73.85% 2.75%,74.62% 3.15%,75.38% 3.09%,76.15% 2.57%,76.92% 2.37%,77.69% 2.40%,78.46% 2.30%,79.23% 2.13%,80.00% 2.07%,80.77% 2.25%,81.54% 2.27%,82.31% 1.71%,83.08% 1.66%,83.85% 2.44%,84.62% 2.84%,85.38% 2.86%,86.15% 2.94%,86.92% 2.91%,87.69% 2.96%,88.46% 3.06%,89.23% 3.19%,90.00% 3.18%,90.77% 3.25%,91.54% 3.48%,92.31% 3.66%,93.08% 3.61%,93.85% 3.60%,94.62% 3.77%,95.38% 3.92%,96.15% 4.33%,96.92% 4.67%,97.69% 4.90%,98.46% 5.08%,99.23% 4.58%,100.00% 4.09%,100.00% 93.61%,99.23% 93.99%,98.46% 94.43%,97.69% 94.58%,96.92% 94.74%,96.15% 94.78%,95.38% 94.79%,94.62% 94.55%,93.85% 94.15%,93.08% 94.50%,92.31% 95.10%,91.54% 94.80%,90.77% 94.24%,90.00% 94.57%,89.23% 95.09%,88.46% 94.99%,87.69% 94.64%,86.92% 94.83%,86.15% 95.23%,85.38% 94.97%,84.62% 94.54%,83.85% 94.12%,83.08% 93.58%,82.31% 93.46%,81.54% 93.66%,80.77% 93.55%,80.00% 93.18%,79.23% 93.54%,78.46% 94.48%,77.69% 94.86%,76.92% 94.99%,76.15% 95.14%,75.38% 95.05%,74.62% 94.98%,73.85% 94.83%,73.08% 94.78%,72.31% 94.77%,71.54% 94.81%,70.77% 95.14%,70.00% 95.16%,69.23% 94.76%,68.46% 94.66%,67.69% 94.99%,66.92% 95.08%,66.15% 94.90%,65.38% 94.85%,64.62% 95.13%,63.85% 95.25%,63.08% 95.24%,62.31% 95.23%,61.54% 95.16%,60.77% 95.05%,60.00% 94.99%,59.23% 94.92%,58.46% 94.91%,57.69% 94.91%,56.92% 94.69%,56.15% 94.63%,55.38% 94.99%,54.62% 95.38%,53.85% 95.51%,53.08% 95.71%,52.31% 96.25%,51.54% 96.75%,50.77% 96.97%,50.00% 97.15%,49.23% 97.46%,48.46% 97.76%,47.69% 97.71%,46.92% 97.62%,46.15% 98.07%,45.38% 98.58%,44.62% 98.58%,43.85% 98.54%,43.08% 98.56%,42.31% 98.47%,41.54% 98.32%,40.77% 98.05%,40.00% 98.07%,39.23% 98.20%,38.46% 98.06%,37.69% 97.92%,36.92% 97.71%,36.15% 97.36%,35.38% 97.21%,34.62% 97.07%,33.85% 97.06%,33.08% 97.25%,32.31% 96.90%,31.54% 96.13%,30.77% 96.00%,30.00% 96.25%,29.23% 96.25%,28.46% 96.18%,27.69% 96.13%,26.92% 95.91%,26.15% 96.01%,25.38% 96.57%,24.62% 96.57%,23.85% 96.32%,23.08% 95.96%,22.31% 95.36%,21.54% 94.87%,20.77% 94.19%,20.00% 93.94%,19.23% 94.44%,18.46% 94.59%,17.69% 94.15%,16.92% 94.14%,16.15% 94.40%,15.38% 94.69%,14.62% 95.11%,13.85% 95.45%,13.08% 95.75%,12.31% 95.95%,11.54% 96.09%,10.77% 96.32%,10.00% 96.80%,9.23% 97.21%,8.46% 97.45%,7.69% 97.69%,6.92% 98.08%,6.15% 98.34%,5.38% 98.11%,4.62% 97.80%,3.85% 97.71%,3.08% 97.54%,2.31% 97.36%,1.54% 97.19%,0.77% 97.00%,0.00% 96.92%);rotate:-.7deg;
  background-image:repeating-linear-gradient(90deg,
    rgba(59,44,34,.035) 0 1px, rgba(59,44,34,0) 1px 3px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* colagem do hero */
.hero-snap{position:absolute;z-index:3}
.hero-snap.a{left:clamp(8px,3vw,70px);top:clamp(128px,20vh,220px);width:clamp(140px,17vw,242px)}
.hero-snap.b{right:clamp(10px,3.4vw,78px);top:clamp(118px,17vh,190px);width:clamp(112px,13vw,178px)}
.hero-snap.c{right:clamp(16px,8vw,150px);bottom:clamp(64px,10vh,124px);width:clamp(100px,11vw,154px)}
.hero-dots{position:absolute;z-index:2;color:rgba(248,239,228,.34)}
.hero-dots.one{left:0;top:38%;width:clamp(90px,12vw,180px);height:clamp(90px,12vw,180px)}
.hero-dots.two{right:6%;bottom:12%;width:clamp(70px,9vw,140px);height:clamp(70px,9vw,140px)}
.hero-scroll{position:absolute;z-index:5;left:50%;bottom:clamp(16px,3vh,34px);transform:translateX(-50%);
  font-family:"CS Ristara",Georgia,serif;font-style:italic;font-size:18px;color:var(--milk-3);display:flex;flex-direction:column;
  align-items:center;gap:6px}
.hero-scroll i{display:block;width:1px;height:26px;background:var(--milk-3)}

/* ---------- selo circular ---------- */
.seal{width:clamp(108px,13vw,168px);aspect-ratio:1;position:relative;color:var(--star)}
.seal svg{width:100%;height:100%;animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal-core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-family:Archivo,sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.75;color:var(--star)}

/* ---------- SOBRE ---------- */
.about{background:var(--cream);overflow:hidden}
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.6vw,72px);align-items:center}
.about-script{font-size:clamp(46px,7.4vw,102px);color:var(--clay);
  transform:rotate(-7deg);transform-origin:left center;
  margin:0 0 clamp(6px,1.4vw,14px);opacity:.92}
.about h2.sans{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(18px,2.1vw,26px);
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px}
.note{background:var(--cream-2);padding:16px 18px;position:relative;font-family:Archivo,sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;line-height:1.85;
  text-transform:uppercase;color:var(--ink-2);
  clip-path:polygon(0% 4.04%,3.8% 2.63%,12% 3.85%,15.2% 2.89%,21.4% 3.24%,30.2% 4.53%,35.2% 6.61%,41.5% 2.39%,45.6% 2.65%,47.7% 2.84%,54.8% 1.19%,62.7% 4.4%,68.5% 4.16%,71.2% 1.39%,80% 3.3%,83.4% 6.27%,90.6% 1.11%,94.7% 0.98%,98.4% -0.77%,100% 1.98%,100% 95.61%,98.6% 98.42%,92.2% 100.15%,88.1% 99.07%,81% 98.39%,78.9% 96.58%,71.2% 96.68%,69% 94.31%,65.4% 93.98%,57% 96.43%,52.4% 94.95%,43.6% 99.05%,41% 100.81%,38.6% 96.06%,36% 98.65%,28.1% 94.53%,24% 97.07%,19.2% 94.99%,12.4% 98.35%,6.9% 94.79%,5.1% 94.91%,3.1% 95.84%,0% 99.66%)}
.about-collage{position:relative;padding:38px 0 clamp(54px,7vw,86px)}
.about-collage .snap.main{width:80%;margin-left:auto}
.about-collage .snap.sub{position:absolute;left:0;bottom:0;width:50%;z-index:5}
.about-collage .note{position:absolute;right:2%;top:0;z-index:6;max-width:260px}

/* ---------- FAIXA DE FOTOS — os tres integrantes ---------- */
/* o rasgo e o proprio recorte da faixa: sem faixa solida antes das fotos */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;
  background:var(--espresso);clip-path:polygon(0.00% 4.07%,0.62% 4.09%,1.25% 4.12%,1.88% 4.16%,2.50% 4.28%,3.12% 4.19%,3.75% 3.81%,4.38% 3.67%,5.00% 3.81%,5.62% 3.86%,6.25% 3.83%,6.88% 3.76%,7.50% 3.43%,8.12% 2.95%,8.75% 2.76%,9.38% 2.65%,10.00% 2.53%,10.62% 2.60%,11.25% 2.55%,11.88% 2.12%,12.50% 1.81%,13.12% 2.04%,13.75% 2.38%,14.37% 2.28%,15.00% 2.03%,15.62% 2.08%,16.25% 2.38%,16.88% 2.45%,17.50% 2.20%,18.12% 2.00%,18.75% 1.92%,19.38% 1.82%,20.00% 1.75%,20.62% 1.70%,21.25% 1.56%,21.88% 1.36%,22.50% 1.28%,23.12% 1.30%,23.75% 1.35%,24.38% 1.46%,25.00% 1.54%,25.62% 1.59%,26.25% 1.66%,26.88% 1.63%,27.50% 1.56%,28.12% 1.53%,28.75% 1.40%,29.38% 1.42%,30.00% 1.74%,30.63% 1.95%,31.25% 1.73%,31.87% 1.51%,32.50% 1.73%,33.12% 2.09%,33.75% 2.09%,34.38% 1.96%,35.00% 1.98%,35.62% 2.19%,36.25% 2.34%,36.88% 2.44%,37.50% 2.55%,38.12% 2.43%,38.75% 2.25%,39.38% 2.35%,40.00% 2.49%,40.62% 2.54%,41.25% 2.55%,41.88% 2.55%,42.50% 2.66%,43.12% 2.73%,43.75% 2.57%,44.38% 2.41%,45.00% 2.46%,45.62% 2.53%,46.25% 2.50%,46.88% 2.41%,47.50% 2.32%,48.12% 2.09%,48.75% 1.95%,49.38% 2.20%,50.00% 2.36%,50.62% 1.98%,51.25% 1.52%,51.88% 1.45%,52.50% 1.48%,53.12% 1.44%,53.75% 1.38%,54.37% 1.32%,55.00% 1.48%,55.62% 1.53%,56.25% 1.17%,56.88% 0.82%,57.50% 0.80%,58.13% 0.85%,58.75% 0.79%,59.38% 0.69%,60.00% 0.64%,60.62% 0.55%,61.25% 0.52%,61.88% 0.74%,62.50% 0.93%,63.12% 1.01%,63.75% 1.12%,64.38% 1.03%,65.00% 0.79%,65.62% 0.90%,66.25% 1.31%,66.88% 1.53%,67.50% 1.57%,68.12% 1.64%,68.75% 1.63%,69.38% 1.61%,70.00% 1.87%,70.62% 2.21%,71.25% 2.19%,71.88% 1.94%,72.50% 1.94%,73.12% 2.24%,73.75% 2.38%,74.38% 2.34%,75.00% 2.31%,75.62% 2.24%,76.25% 2.15%,76.88% 2.14%,77.50% 2.11%,78.12% 2.19%,78.75% 2.26%,79.38% 2.37%,80.00% 2.46%,80.62% 2.55%,81.25% 2.82%,81.88% 3.06%,82.50% 3.04%,83.12% 2.99%,83.75% 2.86%,84.38% 2.59%,85.00% 2.51%,85.62% 2.71%,86.25% 2.75%,86.88% 2.58%,87.50% 2.44%,88.12% 2.38%,88.75% 2.34%,89.38% 2.32%,90.00% 2.31%,90.62% 2.31%,91.25% 2.27%,91.88% 2.28%,92.50% 2.39%,93.12% 2.45%,93.75% 2.54%,94.38% 2.61%,95.00% 2.37%,95.62% 2.00%,96.25% 1.91%,96.88% 1.87%,97.50% 1.87%,98.12% 2.10%,98.75% 2.19%,99.38% 2.17%,100.00% 2.17%,100.00% 100%,0.00% 100%);
  /* base reta: o rasgo de baixo saiu, a faixa encosta direto no filme.
     A margem negativa foi junto, senao o video subia e comia os nomes */
  margin-top:clamp(-26px,-2.4vw,-14px);margin-bottom:0}
.strip{position:relative}
/* o pe da faixa fecha em preto para emendar com a secao de baixo sem degrau.
   z-index 1: fica na frente das fotos e atras dos nomes */
.strip::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;
  height:15%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0),#000)}
.strip-cell{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4}
/* as tres fotos vem em 1080x1350 (0,8) e a celula e 3/4 (0,75): a imagem
   encaixa pela ALTURA e so ~6% some nas laterais. Por isso basta centrar;
   o eixo vertical nem entra na conta */
.strip-cell:nth-child(1) img{object-position:50% 50%}
.strip-cell:nth-child(2) img{object-position:50% 50%}
.strip-cell:nth-child(3) img{object-position:50% 50%}
.strip-cell img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.94);
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .65s ease}
/* preto e branco permanente: so o zoom responde ao hover */
.strip-cell:hover img{transform:scale(1.045);filter:grayscale(1) contrast(1.08) brightness(1)}
/* o nome assenta no pe de cada foto, sobre um veu que sobe do escuro:
   assim ele le mesmo onde a foto clareia. O recuo de baixo tem que passar
   dos ~4% que o rasgo da faixa come, senao o nome sai cortado */
.strip-nome{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(40px,5vw,90px) clamp(10px,1.6vw,26px) max(2.6vw,18px);
  font-size:clamp(13px,2.4vw,56px);color:var(--star);text-align:center;
  text-wrap:balance;pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 100%)}

/* ---------- LANCAMENTO ---------- */
.release{color:var(--milk);overflow:hidden}
.release-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,4.6vw,70px);align-items:center}
.release-script{font-size:clamp(46px,7.8vw,108px);color:var(--cream);margin:0 0 4px}
.release-script .l2{display:block;margin-top:-.2em}
/* a coluna de texto fica centrada: o recuo da segunda linha do titulo saiu
   junto, porque so fazia sentido com o texto alinhado a esquerda */
.release-info{text-align:center}
.release-info .lead{margin-inline:auto}
.release-info .plats{justify-content:center}
.release-info > div[style*="flex"]{justify-content:center}
/* clipe: capa estatica que vira player no clique */
/* sangra para fora do 'wrap' e ocupa a largura inteira da janela.
   O recuo de baixo some junto: o clipe encosta no rasgo que fecha a secao */
/* o filme passa a ser o fundo da secao e as informacoes assentam no meio dele.
   O fundo base e escuro de proposito: se o video nao carregar, o texto claro
   continua legivel */
.release{position:relative;isolation:isolate;background:#0C0C0C;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(92svh,900px)}
.release > .wrap{position:relative;z-index:2;width:100%}
.release-filme{position:absolute;z-index:0;inset:0;width:100%;height:100%;
  object-fit:cover;filter:contrast(1.06)}
/* veu: sem ele o texto briga com os claros do video. Chapado de proposito —
   em degrade ele marcava uma faixa de luz no meio da secao */
.release-veu{position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.82) 9%,rgba(0,0,0,.82) 100%)}
/* o que o '.on-dark' ainda nao cobria */
.release-info .label{color:var(--star)}
.release .pill{border-color:rgba(248,239,228,.38);color:var(--milk)}
.release .plats{border-top-color:rgba(248,239,228,.24)}
.release .plats span{color:rgba(248,239,228,.6)}
.release .plats a{color:rgba(248,239,228,.8)}
.release .plats a:hover{color:var(--cream)}
/* rasgo que assenta sobre o que vem antes: sem faixa de cor propria */
/* sobe bem mais que a propria altura para tapar a legenda queimada no fim
   do clipe. Em 'vw' o avanco acompanha a escala do video, que e dimensionado
   para cobrir a secao — um valor fixo so funcionaria numa largura de tela.
   A medida vira variavel porque o botao de som tambem depende dela. */
:root{--sobe-rasgo:clamp(96px,11vw,200px)}
.tear-sobre{background:transparent;z-index:6;
  margin-top:calc(-1 * var(--sobe-rasgo))}
/* o clipe entra mudo, entao o convite para ligar o som precisa estar a vista */
.yt-som{position:absolute;z-index:3;right:clamp(14px,2vw,30px);
  /* acima do rasgo, senao o papel passa por cima e engole o botao */
  bottom:calc(clamp(34px,4.6vw,70px) + clamp(14px,2vw,30px));
  background:rgba(0,0,0,.6);color:var(--cream);border:1px solid rgba(248,239,228,.45);
  padding:11px 18px;border-radius:999px;cursor:pointer;font-size:10.5px;
  backdrop-filter:blur(6px);transition:.22s}
.yt-som:hover{background:#000;color:#fff}
.yt-som[hidden]{display:none}
/* ---------- CLIPE EM TELA CHEIA ---------- */
/* o iframe e 16/9 e a secao nao e: para cobrir sem deformar, a largura vira
   o MAIOR entre a largura da secao e 16/9 da altura dela. As unidades 'cq'
   medem a propria caixa, entao isso vale em qualquer tela. */
/* ---------- PILHA DE VIDEOS ---------- */
/* cada secao gruda no topo e a seguinte sobe por cima dela. Todas sao
   'sticky' e nenhuma tem z-index proprio, entao a ordem de pintura e a do
   HTML: a que vem depois no codigo cobre a anterior. A ultima se solta
   sozinha quando o contêiner acaba. */
.pilha{position:relative}
.pilha > section{position:sticky;top:0;min-height:100svh}
/* o rasgo e a agenda sobem POR CIMA do ultimo video e fecham a pilha: sem
   posicao e z-index proprios, a secao travada (que e 'sticky') passaria na
   frente deles. 'position:relative' tambem cancela o 'sticky' herdado. */
.pilha > .tear,
.pilha > #agenda{position:relative;z-index:2}
.pilha > #agenda{min-height:0}
/* titulo de uma linha so, entao cabe bem maior que o das outras secoes */
#musicas .release-script{font-size:clamp(62px,11vw,170px);line-height:.95}
/* todo clipe fecha em preto no pe: e ali que aparece a legenda queimada no
   video. Em 'svh' a medida acompanha a altura da secao, que agora e a da
   janela inteira — foi ao crescer que a legenda passou a escapar. */
:root{--tapa-legenda:clamp(150px,19svh,360px)}
.clipe-fundo::after{content:"";position:absolute;z-index:2;
  left:0;right:0;bottom:0;height:var(--tapa-legenda);
  background:linear-gradient(to top,#000 48%,rgba(0,0,0,0))}
/* o rasgo deste trecho sobe bem alto, entao o botao acompanha a mesma medida */
#aovivo .yt-som{bottom:calc(var(--sobe-rasgo) + clamp(10px,1.6vw,22px))}
.clipe-fundo{position:absolute;z-index:0;inset:0;overflow:hidden;
  pointer-events:none;container-type:size}
.clipe-fundo iframe{position:absolute;top:50%;left:50%;translate:-50% -50%;
  border:0;aspect-ratio:16/9;width:max(100cqw,calc(100cqh * 16 / 9))}
.pill{display:inline-block;font-family:Archivo,sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;border:1.5px solid rgba(59,44,34,.42);
  padding:6px 13px;margin:0 7px 7px 0;color:var(--ink-2)}

/* faixa de plataformas de streaming */
.plats{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid rgba(59,44,34,.22)}
.plats span{font-family:Archivo,sans-serif;font-weight:700;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(59,44,34,.62);margin-right:4px}
.plats a{color:rgba(59,44,34,.72);transition:.2s;display:grid;place-items:center}
.plats a:hover{color:var(--ink);transform:translateY(-2px)}
.plats svg{width:clamp(24px,2.4vw,30px);height:clamp(24px,2.4vw,30px)}

/* ---------- DISCOGRAFIA — ingressos ---------- */
.disco{background:var(--cream)}
/* ---------- TOCADOR DO DVD (porte do MusicPlayer para JS puro) ---------- */
/* disco e controles em cima, faixas embaixo */
.player{grid-template-columns:1fr;gap:0}
.player .tkbig-art{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3.4vw,52px);align-items:center;text-align:left;
  padding:4px 4px clamp(22px,2.8vw,32px)}
.player-meta{min-width:0}
/* a coluna do grid e 'auto': largura em % aqui colapsaria para zero */
.player .disc{width:clamp(160px,19vw,248px);margin:0}
.player .disc.is-zoomed{width:clamp(190px,23vw,300px)}
.player-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.player .tkbig-desc{margin-bottom:20px}
.player .tk-when{margin-top:0}
.player .tk-name{text-align:left;min-height:0;display:block;margin-left:3px}
/* a linha de destaque vira horizontal, com os recortes nas pontas */
.player .tkbig-side{border-left:0;border-top:1.6px dashed rgba(59,44,34,.34);
  padding:clamp(20px,2.6vw,30px) 4px 4px}
.player .tkbig-side::before,.player .tkbig-side::after{top:-23px;bottom:auto}
.player .tkbig-side::before{left:-23px}
.player .tkbig-side::after{left:auto;right:-23px}
/* a lista ocupa a largura toda, em duas colunas */
.player .tkbig-list{columns:2;column-gap:clamp(26px,3.4vw,52px);margin-bottom:6px}
.player .tkbig-list li{break-inside:avoid}

/* disco */
.disc{position:relative;width:min(100%,300px);aspect-ratio:1;margin:0 auto 20px;
  border-radius:999px;overflow:hidden;cursor:pointer;
  background:#1D1611;isolation:isolate;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.disc.is-zoomed{width:min(100%,360px)}
.disc-spin{position:absolute;inset:0;will-change:transform}
.disc-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:999px;user-select:none;-webkit-user-drag:none}
.disc-cover.enter{animation:cover-in .62s cubic-bezier(.2,.7,.2,1) both}
.disc-cover.exit{animation:cover-out .62s cubic-bezier(.2,.7,.2,1) both}
.disc::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.16) 0 1px, rgba(255,255,255,.04) 1px 2px, transparent 2px 5px);
  mix-blend-mode:overlay}

@keyframes cover-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes cover-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}
@keyframes ti-in{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:translateX(0)}}
@keyframes ti-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(var(--dx))}}

/* visualizador */
.scales{width:clamp(58px,6vw,84px);height:auto;flex:none;
  fill:rgba(59,44,34,.42);overflow:visible}

/* faixa atual */
.np{position:relative;min-height:3.4em;margin-bottom:14px}
.np-layer{position:absolute;inset:0}
.np-layer.abs{pointer-events:none}
.np-artist{margin:0 0 3px;font-family:Archivo,sans-serif;font-weight:700;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.np-title{margin:0;font-family:"CS Ristara",Georgia,serif;font-size:clamp(21px,2vw,29px);
  line-height:1.08;text-transform:uppercase;letter-spacing:.01em}
.np .enter{animation:ti-in .5s cubic-bezier(.2,.7,.2,1) both}
.np .exit{animation:ti-out .5s cubic-bezier(.2,.7,.2,1) both}

/* progresso */
.pbar{height:5px;border-radius:99px;background:rgba(59,44,34,.2);cursor:pointer;overflow:hidden}
.pbar-fill{display:block;height:100%;width:0;background:var(--ink);border-radius:99px;
  transition:width .12s linear}
.ptime{display:flex;gap:7px;margin:8px 0 16px;font-family:Archivo,sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--ink-3)}
.ptime b{font-weight:600;color:var(--ink-2)}

/* controles */
.pctrl{display:flex;align-items:center;gap:clamp(8px,1.4vw,14px);margin-bottom:20px}
.pbtn{display:grid;place-items:center;width:34px;aspect-ratio:1;border:0;padding:0;cursor:pointer;
  border-radius:999px;background:transparent;color:var(--ink-2);transition:.2s}
.pbtn:hover{background:rgba(59,44,34,.1);color:var(--ink)}
.pbtn.play{width:46px;background:var(--ink);color:var(--paper)}
.pbtn.play:hover{background:var(--clay);color:var(--cream)}
.pbtn.on{color:var(--clay)}
.pbtn.on::after{content:"";position:absolute;margin-top:26px;width:4px;height:4px;
  border-radius:999px;background:var(--clay)}
.pbtn{position:relative}
.pbtn .one{position:absolute;right:4px;top:3px;font-family:Archivo,sans-serif;
  font-size:8px;font-weight:800;opacity:0}
.pbtn.mode-one .one{opacity:1}

/* playlist */
.tkbig-list li.on a{color:var(--clay);padding-left:8px}
.tkbig-list li.on b::after{content:"▸";margin-left:5px}
.pl-note{margin:14px 0 0;font-family:Archivo,sans-serif;font-size:9.5px;line-height:1.6;
  letter-spacing:.02em;color:var(--ink-3)}
.pl-note a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){
  .player .tkbig-art{grid-template-columns:1fr;justify-items:center;text-align:center}
  .player .tk-name{text-align:center}
  .player .tkbig-desc{text-align:center}
  .player-row{flex-direction:column-reverse;gap:14px}
  .player .tkbig-list{columns:1}
  .player .disc{width:min(72vw,230px)}
}
@media (prefers-reduced-motion:reduce){
  .disc-spin{transform:none !important}
  .disc-cover.enter,.disc-cover.exit,.np .enter,.np .exit{animation:none}
}

/* ---------- HISTORIA ---------- */
.story{background:var(--cocoa);color:var(--milk);overflow:hidden}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(30px,5vw,76px);align-items:start}
.story-script{font-size:clamp(40px,6.6vw,92px);color:var(--star);margin:0 0 clamp(14px,2vw,22px)}
.story-script .l2{display:block;margin-top:-.2em;padding-left:.2em}
.story-body p{color:var(--milk-2);margin:0 0 17px;font-size:16.5px;line-height:1.8}
.story-body p strong{color:var(--cream);font-weight:500}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vw,42px)}
.trio div{border-top:1.5px solid rgba(242,220,176,.4);padding-top:14px}
.trio b{display:block;font-family:"CS Ristara",Georgia,serif;font-style:italic;font-weight:400;font-size:27px;
  color:var(--star);margin-bottom:4px}
.trio p{margin:0;font-family:Archivo,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--milk-3);line-height:1.7}
.story-collage{position:relative}
.story-collage .snap.main{width:84%}
.story-collage .snap.sub{position:absolute;right:-4%;bottom:-8%;width:50%}

/* ---------- AGENDA (canhotos de ingresso) ---------- */
.agenda{background:var(--cream)}
.tix{display:grid;grid-template-columns:clamp(84px,9vw,118px) minmax(0,1fr) auto;
  gap:clamp(14px,2.6vw,38px);align-items:center;background:var(--cream-2);
  padding:clamp(16px,2.2vw,24px) clamp(18px,2.6vw,30px);margin-bottom:14px;position:relative;
  clip-path:polygon(0% 1.59%,9.7% 4.71%,19.4% 1.07%,25.5% 2.19%,37.2% 3.29%,45.1% 3.05%,51.8% 3.91%,58.6% 2.03%,67.3% 1.88%,70.7% 0.58%,80% 3.43%,90.6% 1.33%,95.6% 2.3%,100% 1.18%,100% 96.83%,98.9% 96.32%,94.1% 98.53%,84.8% 97.54%,73.9% 97.43%,62.1% 100.06%,54.3% 98.17%,47.2% 98.18%,42.7% 96.24%,39.1% 97.69%,34.9% 96.39%,27.5% 98.76%,17.8% 98.48%,7% 97.67%,0% 97.06%);transition:transform .3s}
.tix:nth-child(even){clip-path:polygon(0% 0.31%,10.4% 0.71%,17.7% 3.3%,26.2% 2.08%,34.9% 3.05%,45.5% -0.04%,57.1% 0.02%,67.5% 2.17%,78% 1.99%,83.9% 1.85%,93.9% 3.08%,98.7% 1.16%,100% 1.2%,100% 95.7%,95.9% 98.65%,87% 98.4%,75.1% 98.88%,70.2% 99.24%,64.9% 99.85%,61.4% 99.95%,54.2% 97.35%,50% 99.24%,43.3% 96.74%,39% 96.09%,27.1% 95.14%,17.9% 98.03%,8.6% 97.49%,0% 99.87%)}
.tix:hover{transform:translateY(-3px)}
.tix::before{content:"";position:absolute;left:clamp(84px,9vw,118px);top:14%;bottom:14%;
  width:1px;border-left:1.5px dashed rgba(59,44,34,.26);
  margin-left:calc(clamp(14px,2.6vw,38px) / 2 * -1)}
.tix-date{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,40px);
  line-height:.94;letter-spacing:-.02em;color:var(--clay)}
.tix-date small{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;
  color:var(--ink-3);margin-top:7px}
.tix-city{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(16px,2vw,23px);
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.tix-city sup{font-size:.48em;color:var(--clay);margin-left:7px;letter-spacing:.14em;top:-.75em}
.tix-what{margin:0;font-size:15px;color:var(--ink-3)}
.tix-what b{color:var(--ink-2);font-weight:500}
.tix-act{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tiny{font-family:Archivo,sans-serif;font-weight:700;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:10px 15px;border:1.4px solid rgba(59,44,34,.32);
  color:var(--ink-2);transition:.22s;white-space:nowrap}
.tiny:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tiny.on{background:var(--clay);border-color:var(--clay);color:var(--cream)}
.tiny.on:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- MIDIA KIT ---------- */
/* ---------- DEPOIMENTO ---------- */
.quote{background:var(--night);color:var(--milk);overflow:hidden}
.quote-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.6vw,72px);align-items:center}
.quote p.quote-script{font-size:clamp(28px,4.4vw,58px);line-height:1.12;color:var(--cream);
  margin:0 0 clamp(18px,2.4vw,28px)}
.quote p{color:var(--milk-2);font-size:16.5px;line-height:1.8;margin:0 0 22px;max-width:52ch}
.quote cite{font-style:normal;font-family:Archivo,sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--star)}

/* ---------- REDES ---------- */
.nets{background:var(--cream)}
.nets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr));
  gap:clamp(12px,1.8vw,20px)}
.net{background:var(--cream-2);padding:clamp(20px,2.6vw,28px) clamp(16px,2vw,22px);
  display:flex;flex-direction:column;gap:13px;
  transition:.3s;clip-path:polygon(0% 1.44%,5.9% 2.91%,11.7% 1.12%,21.7% 1.2%,34.2% 1.6%,41.7% 2.7%,47.2% 4.09%,54.3% 2.55%,64.3% 1.34%,74% 2.85%,80.8% 2.72%,89.3% 2.04%,97.2% 1.22%,100% 0.33%,100% 99.3%,91.1% 98.95%,83.3% 99.3%,70.9% 100.59%,62.6% 97.9%,56.5% 98.28%,47.4% 96.84%,38.8% 97.75%,33.9% 99.13%,22.7% 97.22%,16.2% 98.64%,12% 98.9%,5.9% 98.17%,0% 98.72%)}
.net:hover{background:var(--sand);transform:translateY(-4px)}
.net svg{width:22px;height:22px;color:var(--clay)}
.net b{font-family:Archivo,sans-serif;font-weight:800;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase}
.net span{font-family:Archivo,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- CONTATO ---------- */
.book{background:var(--cocoa);color:var(--milk);text-align:center;overflow:hidden}
.book-script{font-size:clamp(38px,6.8vw,96px);color:var(--star);margin:0 0 8px}
.book-script .l2{display:block;margin-top:-.2em}
.book .lead{margin-inline:auto}
.book-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(24px,3.4vw,38px)}
.prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(18px,2.6vw,32px);margin-top:clamp(40px,5.4vw,72px);text-align:left}
.prod div{border-top:1.5px solid rgba(242,220,176,.36);padding-top:15px}
.prod b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--star);margin-bottom:8px}
.prod p{margin:0;font-size:16px;color:var(--milk)}
.prod small{display:block;font-size:13.5px;color:var(--milk-3);margin-top:3px}

/* ---------- RODAPE ---------- */
footer{background:var(--espresso);color:var(--milk);padding-block:clamp(44px,6vw,76px) clamp(26px,3.4vw,40px)}
.foot-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,56px);
  align-items:center}
.foot-menu{display:grid;grid-template-columns:repeat(2,auto);gap:5px 26px;justify-content:start}
.foot-menu .script{font-size:27px;color:var(--star);grid-column:1/-1;margin-bottom:6px}
.foot-menu a{font-family:Archivo,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--milk-2);transition:.2s}
.foot-menu a:hover{color:var(--star)}
.foot-seal{display:grid;place-items:center}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;justify-self:end;width:min(100%,280px)}
.ig .cap{grid-column:1/-1;font-family:Archivo,sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--star);background:rgba(242,220,176,.13);
  padding:7px 11px;margin-bottom:2px}
.ig a{overflow:hidden;aspect-ratio:1}
.ig img{width:100%;height:100%;object-fit:cover;filter:sepia(.4) brightness(.84);transition:.4s}
.ig a:hover img{filter:sepia(0) brightness(1);transform:scale(1.07)}
.foot-social{display:flex;gap:14px;margin-top:18px}
.foot-social a{color:var(--milk-2);transition:.2s}
.foot-social a:hover{color:var(--star)}
.foot-social svg{width:17px;height:17px}
.foot-base{margin-top:clamp(34px,4.4vw,56px);padding-top:22px;
  border-top:1px solid rgba(246,234,220,.14);text-align:center}
.foot-logo{width:min(70%,220px);height:auto;margin:0 auto clamp(16px,2vw,22px);
  filter:brightness(0) invert(1);opacity:.92}
.foot-base p{margin:0 0 5px;font-family:Archivo,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--milk-3)}

/* ---------- animacao de entrada ---------- */
.fx{transform:translateY(18px);
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fx.in{transform:none}
.fx.tilt-l.in{transform:rotate(-2.6deg)}
.fx.tilt-r.in{transform:rotate(2.2deg)}
.fx.tilt-s.in{transform:rotate(-1.2deg)}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .tkbig{grid-template-columns:1fr;gap:20px}
  .tkbig-art .tk-img{aspect-ratio:16/10}
  .tkbig-side{border-left:0;border-top:1.6px dashed rgba(59,44,34,.34);
    padding:20px 3px 4px}
  .tkbig-side::before,.tkbig-side::after{left:auto;top:-10px;bottom:auto}
  .tkbig-side::before{left:-23px}
  .tkbig-side::after{right:-23px}
  .tkbig-cta{margin-top:18px}
  .about-grid,.release-grid,.story-grid,.quote-grid{grid-template-columns:1fr}
  .about-collage,.story-collage{max-width:460px;margin-inline:auto}
  .about-collage .snap.main{width:82%}
  .foot-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .foot-menu{justify-content:center}
  .ig{justify-self:center}
  .prod{text-align:center}
}
@media (max-width:860px){
  .nav-inner{flex-wrap:wrap;gap:12px}
  .nav-burger{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:2px;order:3;padding-bottom:6px}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:8px 0;font-size:12px}
  .nav-cta{order:2;padding:10px 16px;font-size:10px;letter-spacing:.14em}
  .hero-snap.b,.hero-snap.c{display:none}
  .hero-snap.a{left:-34px;top:auto;bottom:16vh;width:150px}
  /* os tres continuam lado a lado: cada celula e um integrante */
  .tix{grid-template-columns:1fr;gap:12px}
  .tix::before{display:none}
  .tix-date{display:flex;align-items:baseline;gap:12px}
  .tix-date small{margin-top:0}
  .tix-act{justify-content:flex-start}
}
@media (max-width:700px){
  .rope-release{left:-21%;bottom:-6%;width:46%} /* sangra menos: nao encosta no rotulo abaixo */
  .about-collage{padding-top:0}
  .about-collage .note{position:static;max-width:none;margin-bottom:18px}
  .about-collage .snap.main{width:88%}
  .about-collage .snap.sub{width:54%;bottom:-4%}
}
@media (max-width:520px){
  .hero-core .label{font-size:9.5px;letter-spacing:.18em}
  .label{letter-spacing:.2em}
  .about-script{font-size:clamp(48px,17vw,72px)}
  .btn{padding:13px 20px;font-size:10.5px;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .fx{transform:none}
}
/* ---------- PAGINA DE HISTORIA ---------- */
/* o rotulo "Sobre" em destaque: maior e mais aberto que os outros rotulos */
.sobre-rotulo{color:var(--star);margin-bottom:14px;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.42em}

/* ---------- CAPITULOS DA TRAJETORIA ---------- */
.capitulos{background:var(--cream);color:var(--ink)}
.trj-titulo{font-size:clamp(38px,6.4vw,86px);color:var(--ink);margin:0 0 clamp(34px,4.6vw,64px)}
.trj-lista{list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(34px,4.6vw,66px);max-width:62ch}
.trj{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.6vw,34px);
  align-items:start}
/* o numero e so marcacao visual, nao e lido: fica em tom baixo e grande */
.trj-num{font-family:"CS Ristara",Georgia,serif;font-style:italic;
  font-size:clamp(34px,4.6vw,62px);line-height:.9;color:var(--clay);opacity:.55;
  user-select:none}
.trj-corpo h3{font-size:clamp(25px,3vw,42px);color:var(--ink);
  margin:0 0 clamp(10px,1.2vw,16px);line-height:1.05}
.trj-corpo p{margin:0 0 clamp(12px,1.4vw,18px);font-size:16.5px;line-height:1.78;
  color:var(--ink-2)}
.trj-corpo p:last-child{margin-bottom:0}
/* uma linha separa um capitulo do seguinte, menos no ultimo */
.trj:not(:last-child){border-bottom:1px solid rgba(59,44,34,.16);
  padding-bottom:clamp(34px,4.6vw,66px)}
@media (max-width:640px){
  .trj{grid-template-columns:1fr;gap:6px}
  .trj-num{font-size:clamp(28px,9vw,40px)}
}

/* ---------- SOBRE (abertura da pagina de historia) ---------- */
.sobre{background:var(--cream);color:var(--ink);position:relative;overflow:hidden;
  /* respiro extra no topo: a barra fixa passa por cima */
  padding-top:clamp(96px,11vw,170px)}
.sobre-titulo{font-size:clamp(44px,8.4vw,128px);color:var(--ink);margin:0;
  line-height:.96}
/* '.l2' so e bloco dentro de '.release-script'; aqui precisa da propria regra */
.sobre-titulo .l2{display:block}
.sobre-texto{margin:clamp(22px,2.8vw,38px) 0 0;max-width:58ch;font-size:17.5px}
.sobre-marcos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(18px,2.4vw,34px);margin-top:clamp(34px,4.4vw,60px);max-width:62ch}
.sobre-marcos div{border-top:1.5px solid rgba(59,44,34,.3);padding-top:13px}
.sobre-marcos b{display:block;font-family:"CS Ristara",Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(23px,2.6vw,34px);color:var(--clay);line-height:1}
.sobre-marcos p{margin:5px 0 0;font-family:Archivo,sans-serif;font-size:10px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- NOTA SOBRE A EMENDA DA HERO COM "NOSSA RAIZ" ---------- */
/* a faixa sobe e fica transparente: assim a nota atravessa o corte do papel,
   metade sobre a hero e metade sobre o creme. z-index acima do rasgo (6),
   senao o papel passaria por cima dela. */
.nota-faixa{position:relative;z-index:7;background:transparent;
  margin-top:calc(-1 * clamp(44px,5.4vw,78px));
  padding-bottom:clamp(20px,2.6vw,40px);pointer-events:none}
/* maior e deslocada para a direita: 'auto' na esquerda empurra, e a margem
   da direita segura ela longe da borda */
.nota-faixa .note{width:min(100%,62ch);margin-left:auto;margin-right:clamp(0px,6vw,110px);
  padding:22px 26px;font-size:12.5px}
@media (max-width:860px){
  .nota-faixa .note{margin-inline:auto;font-size:11px;padding:18px 20px}
}

/* ---------- CONTATO ---------- */
.ct-topo{text-align:center;margin-bottom:clamp(36px,4.6vw,66px)}
.ct-realce{color:var(--star)}
/* o cartao grande ocupa duas linhas da grade; os menores empilham ao lado */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);align-items:start}

/* --- cartao do palco: foto com texto por cima --- */
.ct-palco{position:relative;display:block;overflow:hidden;border-radius:20px;
  min-height:clamp(380px,46vw,560px);background:var(--night);text-decoration:none}
.ct-palco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.5)}
/* veu so no pe: o texto fica legivel sem apagar a foto inteira */
.ct-palco::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 8%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.15))}
.ct-palco-corpo{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(10px,1.2vw,16px);height:100%;
  padding:clamp(22px,2.8vw,40px)}
.ct-selo{display:inline-flex;align-items:center;gap:9px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cream)}
.ct-selo svg{width:26px;height:26px;padding:6px;border-radius:999px;
  background:var(--star);color:var(--ink);box-sizing:content-box}
.ct-palco h3{margin:auto 0 0;font-size:clamp(28px,3.6vw,52px);line-height:1.04;
  color:var(--cream)}
.ct-palco p{margin:0;max-width:40ch;font-size:15.5px;line-height:1.7;color:var(--milk-2)}
.ct-quem{font-size:14px !important}
.ct-quem b{color:var(--cream);font-weight:600}
.ct-botao{display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  background:var(--star);color:var(--ink);border-radius:10px;
  padding:14px 22px;font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.12em;transition:.22s}
.ct-botao svg{width:17px;height:17px}
.ct-palco:hover .ct-botao{background:var(--cream)}
.ct-palco:hover img{filter:grayscale(1) brightness(.58)}

/* --- cartao menor e cartao das redes --- */
.ct-card,.ct-redes{border:1px solid rgba(248,239,228,.18);border-radius:18px;
  padding:clamp(20px,2.4vw,30px);text-decoration:none;display:block;
  background:rgba(248,239,228,.03);transition:.22s}
.ct-card:hover{border-color:rgba(242,220,176,.5);background:rgba(248,239,228,.06)}
.ct-card-topo{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:clamp(18px,2.4vw,30px)}
.ct-icone svg{width:19px;height:19px;padding:9px;border-radius:999px;
  border:1px solid rgba(242,220,176,.4);color:var(--star);box-sizing:content-box}
.ct-seta{color:var(--star);font-size:17px}
.ct-card .label{color:var(--star);margin:0 0 10px}
.ct-card-nome{margin:0 0 10px;font-family:"CS Ristara",Georgia,serif;font-style:italic;
  font-size:clamp(21px,2.2vw,29px);color:var(--cream);line-height:1.1}
.ct-card-dado{margin:0;font-family:Archivo,sans-serif;font-size:12.5px;
  line-height:1.9;color:var(--milk-2);letter-spacing:.04em}

.ct-redes{grid-column:1/-1}
.ct-redes .label{color:var(--star);margin:0 0 8px}
.ct-redes h3{margin:0 0 clamp(16px,2vw,24px);font-size:clamp(22px,2.4vw,32px);
  color:var(--cream)}
.ct-redes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(9px,1.1vw,14px)}
.ct-redes-grid a{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:4px 12px;padding:13px 16px;border:1px solid rgba(248,239,228,.16);
  border-radius:11px;text-decoration:none;transition:.2s}
.ct-redes-grid a:hover{border-color:rgba(242,220,176,.5);background:rgba(248,239,228,.05)}
.ct-redes-grid span{grid-column:1;font-family:Archivo,sans-serif;font-weight:700;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--milk-2)}
.ct-redes-grid b{grid-column:1;font-family:Archivo,sans-serif;font-weight:500;
  font-size:13.5px;color:var(--cream);overflow-wrap:anywhere}
.ct-redes-grid i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--star);font-size:15px}

@media (max-width:860px){
  .ct-grid{grid-template-columns:1fr}
  .ct-palco{min-height:clamp(340px,86vw,470px)}
}

/* ---------- FORMULARIO DE CONTRATACAO ---------- */
.ct-form{grid-column:1/-1;border:1px solid rgba(248,239,228,.18);border-radius:18px;
  padding:clamp(22px,2.6vw,34px);background:rgba(248,239,228,.03)}
.ct-form .label{color:var(--star);margin:0 0 8px}
.ct-form h3{margin:0 0 6px;font-size:clamp(22px,2.4vw,32px);color:var(--cream)}
.ct-form-sub{margin:0 0 clamp(18px,2.2vw,26px);font-size:14.5px;color:var(--milk-2);max-width:52ch}
.ct-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(12px,1.4vw,18px)}
.cp{margin:0}
.cp-uf{max-width:110px}
.cp-larga{grid-column:1/-1}
.ct-form label{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--milk-2);margin-bottom:6px}
.ct-form input,.ct-form select,.ct-form textarea{width:100%;padding:12px 14px;
  border:1px solid rgba(248,239,228,.22);border-radius:10px;background:rgba(0,0,0,.25);
  color:var(--cream);font:400 14.5px Archivo,sans-serif;resize:vertical}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
  outline:2px solid var(--star);outline-offset:1px}
/* o navegador pinta o campo invalido so depois da primeira tentativa de envio */
.ct-form.tentou :invalid{border-color:#C96A58}
.ct-form option{background:var(--espresso);color:var(--cream)}
.ct-aceite{display:flex;align-items:flex-start;gap:10px;margin:clamp(16px,2vw,22px) 0;
  text-transform:none !important;letter-spacing:0 !important;font-size:13px !important;
  font-weight:400 !important;color:var(--milk-2) !important;cursor:pointer}
.ct-aceite input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--star)}
.ct-retorno{margin:14px 0 0;font-size:13.5px;min-height:1.2em}
.ct-retorno.ok{color:var(--star)}
.ct-retorno.erro{color:#E39B8B}

/* [hidden] precisa vencer display vindo de classe (ja mordeu uma vez no painel) */
[hidden]{display:none !important}

/* ---------- agenda vinda do painel ---------- */
.agenda-vazia{margin:0;padding:clamp(26px,3.6vw,44px) 0;text-align:center;
  color:var(--ink2);font-size:clamp(14px,1.5vw,17px)}