/* Católicante, direção Missal, nas cores da logo do Jerre.

   ⚠️ AS CORES VÊM DA LOGO, E ISSO MUDOU EM 30/10/2026. A direção nasceu com o
   vermelho dos livros litúrgicos nos rótulos. Quando a logo dele chegou, preta,
   dourada e verde, o Luiz pediu o site "mais parecido com a imagem original
   dele". Então o destaque passou a ser o verde da faixa da logo, e o dourado
   ficou mais vivo, medido nela (#eaa21d no claro, #c18423 no meio, #146b17 no
   verde). Não volte o destaque para o vermelho.

   ⚠️ CLARO OU ESCURO: O LUIZ JÁ PEDIU OS DOIS, E A ORDEM IMPORTA.
   Em 28/10/2026 a primeira versão era só papel bege e ele derrubou: "tudo
   muito bege, tudo muito chapado". Veio então a capa preta, com a foto atrás
   do texto. Em 01/11/2026 ele pediu o contrário: abrir num site preto e rolar
   para um site claro dava um tranco, e as páginas de dentro, claras, eram mais
   agradáveis. "Acho que o site podia ser todo mais claro."
   O que resolve as duas queixas: fundo claro em tudo, menos no rodapé, e a
   foto GRANDE, sangrando até a borda da tela, AO LADO do texto e não atrás.
   Mais a pauta como textura. Claro, mas não chapado. Não volte a pôr a capa
   no preto, e não encolha as fotos para "limpar".

   Tudo sai deste domínio. Nenhuma fonte, imagem ou script de terceiro, porque
   a política em _headers bloqueia, e o bloqueio é silencioso. */

@font-face {
  font-family: Crimson;
  src: url(fonts/crimson.woff2) format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: Figtree;
  src: url(fonts/figtree.woff2) format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* papel */
  --papel:   #f7f4ec;
  --papel-2: #efe9dc;

  /* tinta, o campo escuro */
  --tinta:   #12100d;   /* perto do preto da logo, para o selo não ficar num quadrado */
  --tinta-2: #1d1914;

  --preto:   #221f1a;
  --verde:   #146b2a;   /* o verde da faixa da logo, escurecido para ler sobre o papel */
  --ouro:    #d4951f;
  --ouro-claro: #f0bb45;
  --ouro-escuro: #9a6a12;   /* dourado para LETRA sobre o papel: o --ouro some no claro */
  --suave:   #6a635a;
  --linha:   #d6cdba;

  /* seis tamanhos, com nome. Sem meio pixel. */
  --t1: 52px;   /* era 68; desceu quando a capa ficou clara e o título longo do Jerre foi para meia tela */
  --t2: 34px;
  --t3: 21px;
  --t4: 18px;
  --t5: 15px;
  --t6: 12px;

  /* régua de espaçamento */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 88px;

  /* dois raios: um para controle, um para superfície */
  --r-controle: 3px;
  --r-superficie: 3px;

  --largura: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--papel);
  color: var(--preto);
  font-family: Crimson, Georgia, serif;
  font-size: var(--t4);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.pular { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--preto); color: var(--papel); padding: var(--e2); }
.pular:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

.dentro { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e4); }

/* ---------- o ornamento da casa ----------
   A pauta de quatro linhas, bem apagada, atrás das seções de papel. É o que
   tira o chapado sem virar enfeite gritante. */
.pautado { position: relative; }
.pautado::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(193, 132, 35, .16) 0 1px, transparent 1px 15px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 72%);
}
.pautado > * { position: relative; }

/* ---------- tipografia ---------- */

h1, h2, h3 { font-weight: 400; line-height: 1.12; }
h1 { font-size: var(--t1); letter-spacing: -.012em; }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); font-weight: 600; }

.rub {
  font-family: Figtree, system-ui, sans-serif;
  font-size: var(--t6); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--verde);
}
p { max-width: 62ch; }
.sub { font-size: var(--t4); line-height: 1.6; color: var(--suave); margin-top: var(--e3); }

/* capitular, como em livro litúrgico */
.capitular::first-letter {
  float: left; font-size: 76px; line-height: .82;
  padding: 6px 12px 0 0; color: var(--verde);
}

/* ---------- topo ---------- */

.topo {
  display: flex; align-items: center; gap: var(--e4);
  max-width: var(--largura); margin: 0 auto;
  padding: var(--e3) var(--e4);
}
/* A logo horizontal que o Luiz mandou em 30/10/2026. A linha "Acervo aberto
   de música católica" vem na arte dele, mas no tamanho do topo ela teria 4px
   de altura. Por isso ela foi tirada da imagem e entra aqui como texto, verde
   e alinhada à direita, embaixo da palavra, como está na arte.
   Em 10/11/2026 chegou a versão com "Brasil" embaixo da palavra. O topo
   cresceu de 68 para 76px para o "Brasil" não ficar ilegível. No rodapé, que
   é escuro, entra a logo-fundo-escuro.png: a mesma arte com o verde clareado,
   porque o verde original some no preto. */
.marca { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; }
.marca img { width: auto; height: 76px; }
.marca .tag {
  display: block; font-family: Figtree, system-ui, sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--verde);
}
.topo nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--e3); }
.topo nav a {
  font-size: var(--t5); color: var(--suave); text-decoration: none;
  font-variant: small-caps; letter-spacing: .06em;
}
.topo nav a:hover { color: var(--preto); }
.topo nav a[aria-current="page"] { color: var(--verde); border-bottom: 1px solid var(--verde); }
/* o selo "em breve" do item Cifras, que entrou antes de existir cifra */
.topo nav .breve {
  font-family: Figtree, system-ui, sans-serif; font-variant: normal; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px;
  color: var(--tinta); background: var(--ouro); border-radius: var(--r-controle); padding: 2px 5px; margin-left: 3px;
}

/* topo sobre o campo escuro. Fica fora do <main> e carrega o fundo ele mesmo,
   em vez de um invólucro: assim o cabeçalho e a abertura ficam contínuos sem
   quebrar a semântica da página. */
.topo-escuro { background: var(--tinta); }
.topo-escuro .marca .tag { color: #5fae74; }   /* o verde da logo, aberto para ler no preto */
.topo-escuro nav a { color: rgba(247, 244, 236, .72); }
.topo-escuro nav a:hover { color: var(--papel); }
.topo-escuro nav a[aria-current="page"] { color: var(--ouro-claro); border-bottom-color: var(--ouro-claro); }

/* ---------- botão ---------- */

.botao {
  display: inline-block; background: var(--verde); color: var(--papel);
  padding: 14px 30px; border-radius: var(--r-controle);
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t5); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.botao:hover { background: #0f5221; }   /* era o vermelho de antes: sobrou da troca de cor */
.botao.ouro { background: var(--ouro); color: var(--tinta); }
.botao.ouro:hover { background: var(--ouro-claro); }
.botao.vazado { background: none; color: var(--verde); border: 1px solid var(--verde); }
.botao.vazado:hover { background: var(--verde); color: var(--papel); }
.botao.clara { background: none; color: var(--papel); border: 1px solid rgba(247, 244, 236, .45); }
.botao.clara:hover { background: rgba(247, 244, 236, .12); }

/* ---------- a abertura, campo escuro com a foto sangrando ---------- */

.heroi.escuro { background: var(--tinta); color: var(--papel); }
.heroi { position: relative; min-height: 600px; display: flex; align-items: center; padding: var(--e6) 0 var(--e5); }
.heroi .fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 46%; opacity: .62;
}
.heroi .veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--tinta) 4%, rgba(26, 21, 18, .82) 38%, rgba(26, 21, 18, .25) 100%),
    linear-gradient(to bottom, rgba(26, 21, 18, .7), transparent 28%, transparent 72%, rgba(26, 21, 18, .85));
}
.heroi .dentro { position: relative; width: 100%; }
.heroi.escuro .rub { color: var(--ouro-claro); }
.heroi h1 { max-width: 15ch; margin-top: var(--e3); }
/* O título da capa é o texto do Jerre (01/11/2026), com quase cem letras.
   Em 15ch ele virava sete linhas; em 23ch fica em quatro. */
.heroi.escuro h1 { color: var(--papel); max-width: 23ch; }
.heroi h1 em { font-style: italic; color: var(--ouro-claro); }
.heroi .sub { max-width: 52ch; }
.heroi .sub + .sub { margin-top: var(--e2); }
.heroi.escuro .sub { color: rgba(247, 244, 236, .8); }
.heroi.escuro .sub strong { color: var(--papel); font-weight: 600; }
.heroi .acoes { margin-top: var(--e4); display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Abertura menor, para as páginas de dentro. Ela fica sobre PAPEL, não sobre
   o campo escuro, então herda a cor normal do texto. As regras claras acima
   são todas presas em .heroi.escuro de propósito: quando não estavam, o título
   das páginas internas saiu da cor do papel e sumiu. */
.heroi.curta { min-height: 0; padding: var(--e6) 0 var(--e5); display: block; }
.heroi.curta h1 { max-width: 20ch; color: var(--preto); }
.heroi.curta .sub { color: var(--suave); }

/* ---------- faixa de imagem com frase ---------- */

/* Altura mínima, não fixa: o texto do "Por que é gratuito?" ficou maior que a
   frase de antes, e com altura fixa ele vazaria para fora da faixa. */
.banda { position: relative; min-height: 400px; display: grid; overflow: hidden; }
.banda > * { min-height: 0; }
/* A foto fica fora da grade (absoluta). Dentro dela, sem altura fixa na faixa,
   a altura natural da foto (900px) virava a altura da faixa. Assim quem manda
   na altura é o texto. */
.banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
/* O position: relative nas duas camadas não é enfeite. Sem ele o <img> pinta
   por cima, porque conteúdo de elemento substituído vem depois do fundo das
   divs seguintes na ordem de pintura do CSS. */
.banda .veu {
  grid-area: 1 / 1; position: relative;
  background: linear-gradient(to right, rgba(26, 21, 18, .95) 0%, rgba(26, 21, 18, .84) 42%, rgba(26, 21, 18, .42) 100%);
}
.banda .conteudo { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--e5) 0; }
/* sem o width, a margem automática do .dentro dentro do flex encolhe a coluna
   ao tamanho do texto e joga ela para o meio, em cima do guitarrista da foto */
.banda .dentro { width: 100%; }
.banda .rub { color: var(--ouro-claro); }
.banda .grande { color: var(--papel); font-size: var(--t2); line-height: 1.25; max-width: 24ch; margin-top: var(--e2); }
.banda .texto { color: rgba(247, 244, 236, .82); font-size: var(--t4); line-height: 1.6; max-width: 46ch; margin-top: var(--e2); }
/* os usos que o Jerre listou viram etiquetas, que é como ele escreveu: cada
   um com maiúscula, como nome de ocasião */
.usos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); max-width: 52ch; }
.usos li {
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro);
  border: 1px solid rgba(240, 187, 69, .45); border-radius: var(--r-controle); padding: 6px 12px;
}

/* ---------- capa e faixa claras (01/11/2026) ----------
   A foto sai de trás do texto e vai para a metade da tela, sangrando até a
   borda. O véu agora é um degradê do papel para a foto, que faz a emenda. */

.heroi.clara { background: var(--papel); color: var(--preto); min-height: 640px; }
.heroi.clara .fundo { left: 58%; width: 42%; opacity: 1; object-position: 42% 45%; }
/* transparente até a foto, para a pauta aparecer atrás do texto */
.heroi.clara .veu { background: linear-gradient(to right, transparent 57.9%, var(--papel) 58%, rgba(247, 244, 236, 0) 68%); }
.heroi.clara .dentro { padding-right: 42%; }
.heroi.clara h1 { color: var(--preto); max-width: 23ch; }
.heroi.clara h1 em { color: var(--ouro-escuro); }
.heroi.clara .sub { color: var(--suave); }
.heroi.clara .sub strong { color: var(--preto); font-weight: 600; }

.banda.clara { background: var(--papel-2); }
.banda.clara img { right: auto; width: 46%; filter: none; }
.banda.clara .veu { background: linear-gradient(to left, var(--papel-2) 54%, rgba(239, 233, 220, 0) 66%); }
.banda.clara .dentro { padding-left: 50%; }
.banda.clara .rub { color: var(--verde); }
.banda.clara .grande { color: var(--preto); }
.banda.clara .texto { color: var(--suave); }
.banda.clara .usos li { color: var(--ouro-escuro); border-color: rgba(154, 106, 18, .4); }

/* ---------- seções ---------- */

.secao { padding: var(--e5) 0; }
.secao.alt { background: var(--papel-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.secao > .dentro > h2 { margin-bottom: var(--e3); }
/* a regrinha dourada que abre cada seção */
.secao > .dentro > h2::after {
  content: ""; display: block; width: 64px; height: 7px; margin-top: var(--e2);
  background: repeating-linear-gradient(to bottom, var(--ouro) 0 1px, transparent 1px 3px);
}

/* ---------- índice de músicas ---------- */

.acervo { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--e5); align-items: start; }
.indice .tit {
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--verde);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--linha);
}
.indice ol { list-style: none; counter-reset: musica; }
.indice li { border-bottom: 1px dotted var(--linha); }
.indice a { display: flex; align-items: center; gap: var(--e2); padding: 14px 0; font-size: var(--t4); text-decoration: none; }
.indice a:hover .nome { color: var(--verde); }
.indice .num { counter-increment: musica; color: var(--ouro); width: 26px; font-variant-numeric: tabular-nums; }
.indice .num::before { content: counter(musica); }
.indice .toca {
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--ouro);
  display: grid; place-items: center; font-size: 9px; color: var(--verde); flex: 0 0 auto;
}
.indice .cred { margin-left: auto; font-size: var(--t6); color: var(--suave); font-variant: small-caps; letter-spacing: .06em; }
.acervo .lado { border-radius: var(--r-superficie); overflow: hidden; min-height: 320px; }
.acervo .lado img { width: 100%; height: 100%; object-fit: cover; }

.vazio { border: 1px dashed var(--ouro); border-radius: var(--r-superficie); padding: var(--e4); background: var(--papel); }
.vazio h3 { margin-bottom: var(--e1); }
.vazio p { color: var(--suave); font-size: var(--t5); }

/* ---------- o Projetor, na home (10/11/2026) ----------
   Um quadro de papel mais escuro, com o mesmo traço dourado do .vazio, para
   não emendar com "As músicas" logo acima. O print mostra só texto de exemplo:
   o Católicante não publica letra pelo Projetor. */
.projetor-bloco {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--e5); align-items: center;
  border: 1px solid var(--linha); border-radius: var(--r-superficie);
  background: var(--papel-2); padding: var(--e5) var(--e4);
}
.projetor-bloco h2 { margin-top: var(--e2); }
.projetor-bloco .sub { margin-top: var(--e2); }
.projetor-bloco .pontos { list-style: none; margin-top: var(--e3); font-size: var(--t5); color: var(--preto); }
.projetor-bloco .pontos li { position: relative; padding-left: var(--e3); margin-top: var(--e1); max-width: 52ch; }
.projetor-bloco .pontos li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--ouro);
}
.projetor-bloco .acoes { margin-top: var(--e3); }
.projetor-bloco .tela { border-radius: var(--r-superficie); overflow: hidden; border: 1px solid var(--linha); background: var(--tinta); }
.projetor-bloco .tela img { width: 100%; height: auto; }

/* ---------- como usar ---------- */

.usar { display: grid; grid-template-columns: .62fr 1.38fr; gap: var(--e5); align-items: start; }
.usar .desenho { border-radius: var(--r-superficie); overflow: hidden; height: 430px; background: #eadcc0; border: 1px solid var(--linha); }
.usar .desenho img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); transform-origin: center 38%; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.duas ul { list-style: none; }
.duas li { padding: 10px 0 10px 24px; border-bottom: 1px dotted var(--linha); font-size: var(--t5); position: relative; line-height: 1.5; }
.duas li::before { content: "✠"; position: absolute; left: 0; top: 9px; color: var(--verde); font-size: 15px; }
.duas .pede li::before { color: var(--ouro); }
.duas .cab {
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--e2);
}
.duas .pede .cab { color: var(--verde); }

/* ---------- quem faz ---------- */

.quem { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: center; }
.quem .foto { height: 400px; border-radius: var(--r-superficie); overflow: hidden; }
.quem .foto img { width: 100%; height: 100%; object-fit: cover; }
.pessoa { border-top: 2px solid var(--verde); padding-top: var(--e2); margin-top: var(--e3); }
.pessoa h3 { margin-bottom: 3px; }
.pessoa p { font-size: var(--t5); color: var(--suave); }
/* As fotos de verdade do Jerre e do Djoni, que chegaram em 30/10/2026 e
   tiraram a foto de banco do violão. Cada um com a sua, lado a lado: são dois
   amigos e o projeto é dos dois, então nenhum vem antes do outro. */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.dupla .pessoa { margin: 0; border-top: 0; padding-top: 0; }
.dupla img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-superficie); }
.dupla figcaption { border-top: 2px solid var(--verde); padding-top: var(--e2); margin-top: var(--e2); }
.dupla.grande { gap: var(--e4); max-width: 900px; }
/* os três de quem faz, na capa. Entrou quando o Luiz passou a fazer parte
   do texto (05/11/2026): o texto citava três pessoas e a foto mostrava duas. */
.quem-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.quem-topo > div { max-width: 60ch; }
.dupla.trio { grid-template-columns: repeat(3, 1fr); gap: var(--e4); margin-top: var(--e4); }
.dupla.grande h2 { font-size: var(--t3); font-weight: 600; margin-bottom: 3px; }
.nota { margin-top: var(--e4); font-size: var(--t5); font-style: italic; color: var(--suave); border-left: 3px solid var(--ouro); padding-left: var(--e2); }

/* ---------- textos longos do cliente (05/11/2026) ----------
   O texto do projeto e as biografias vieram revisados por uma advogada da
   família do Jerre. São longos de propósito: coluna de leitura estreita,
   a frase de missão grande ao lado, e o fecho em dourado. */

.projeto { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--e5); align-items: start; }
.missao { font-size: var(--t2); line-height: 1.3; color: var(--preto); margin-top: var(--e2); max-width: 18ch; }
.corrido p { max-width: 62ch; }
.corrido p + p { margin-top: var(--e2); }
.corrido strong { font-weight: 600; color: var(--preto); }
.fecho { font-size: var(--t3); font-style: italic; color: var(--ouro-escuro); margin-top: var(--e3) !important; }
.assina {
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde);
}
.direitos > * { max-width: 760px; }
.direitos h2 { margin-top: var(--e2); }
.direitos .acoes { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2); }

/* as biografias: retrato que acompanha a leitura, texto em coluna estreita */
.bio { display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--e5); align-items: start; }
.bio.sem-foto { grid-template-columns: minmax(0, 820px); }   /* sem foto: alinhada à esquerda como as outras, não centralizada */
.retrato { margin: 0; position: sticky; top: var(--e4); }
.retrato img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-superficie); }
.bio h2 { margin-bottom: var(--e1); }
.papel {
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 700; line-height: 1.7;
  letter-spacing: .12em; text-transform: uppercase; color: var(--verde);
  border-top: 2px solid var(--verde); padding-top: var(--e2); margin-bottom: var(--e3);
}
.bio blockquote {
  margin: var(--e4) 0 0; padding-left: var(--e3); border-left: 3px solid var(--ouro);
  font-size: var(--t3); line-height: 1.45; font-style: italic; color: var(--ouro-escuro); max-width: 52ch;
}
.assinatura { margin-top: var(--e3) !important; font-weight: 600; color: var(--preto); }
.assinatura span { display: block; font-weight: 400; font-size: var(--t5); color: var(--suave); }
.falar .endereco + .endereco, .falar p + p .endereco { margin-top: var(--e2); }

/* a licença: texto jurídico da advogada, numerado, sem mexer nas palavras.
   O que ela escreveu em caixa alta fica em caixa alta: em cláusula restritiva
   o destaque é de propósito. */
.clausulas > * { max-width: 780px; }   /* largura de leitura nos filhos: no contêiner, a coluna centralizava */
.clausulas h2 { font-size: var(--t3); font-weight: 600; margin-top: var(--e5); }
.clausulas h2:first-child { margin-top: 0; }
.clausulas p { margin-top: var(--e2); }
.destaque { font-weight: 700; color: var(--preto); border-left: 3px solid var(--verde); padding-left: var(--e2); }
.pedido { margin-top: var(--e3); }
.aviso { margin-top: var(--e5) !important; padding: var(--e3); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-superficie); font-size: var(--t5); }
.clausulas .assina { margin-top: var(--e3); }

/* ---------- caixas ---------- */

.caixa { margin-top: var(--e3); padding: var(--e3); border-left: 3px solid var(--verde); background: var(--papel-2); }
.caixa.calma { border-left-color: var(--ouro); }
.caixa .rub { margin-bottom: 6px; }
.caixa.calma .rub { color: var(--suave); }
.caixa p { font-size: var(--t5); color: var(--suave); }
.caixa b { color: var(--preto); }

/* ---------- página de uma música ---------- */

.musica { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--e6); align-items: start; padding: var(--e6) 0 var(--e5); }
.musica h1 { font-size: 50px; max-width: 16ch; }
.credito { font-variant: small-caps; letter-spacing: .08em; color: var(--verde); font-size: var(--t4); margin-top: var(--e1); }
.ouvir { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e4); padding: var(--e2) var(--e3);
  border: 1px solid var(--linha); background: var(--papel-2); border-radius: var(--r-superficie); }
.ouvir audio { width: 100%; }
.acoes a.baixa, .acoes span {
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--linha); border-radius: var(--r-controle); padding: 10px 18px; color: var(--suave);
}
.acoes a.baixa.forte { border-color: var(--verde); background: var(--verde); color: var(--papel); }
.letra { position: relative; padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r-superficie); overflow: hidden; background: var(--papel-2); }
.letra .fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1; }
.letra > *:not(.fundo) { position: relative; }
.letra pre { font-family: Crimson, Georgia, serif; font-size: var(--t4); line-height: 1.75; white-space: pre-wrap; margin-top: var(--e2); }

/* ---------- falar com a equipe ---------- */

/* a seção era escura quando nasceu; ficou clara em 01/11 e o dourado claro
   tinha sumido no papel */
.falar .endereco {
  display: inline-block; margin-top: var(--e3);
  font-size: var(--t3); color: var(--ouro-escuro); text-decoration: none;
  border-bottom: 1px solid var(--ouro); padding-bottom: 3px;
}
.falar .endereco:hover { color: var(--verde); }

/* ---------- redes (05/11/2026) ----------
   YouTube, Spotify, Instagram e WhatsApp, com ícone desenhado em img/redes.svg.
   Ficam no rodapé de todas as páginas e na seção de contato de Quem faz. */
.redes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); }
.redes a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(247, 244, 236, .25); color: var(--papel); text-decoration: none;
}
.redes a:hover { color: var(--ouro-claro); border-color: var(--ouro-claro); }
.redes svg { width: 20px; height: 20px; --fundo-icone: var(--tinta); }
.redes.grandes { gap: var(--e2); margin-top: var(--e4); }
.redes.grandes a { width: 52px; height: 52px; color: var(--verde); border-color: var(--linha); background: var(--papel); }
.redes.grandes a:hover { color: var(--papel); background: var(--verde); border-color: var(--verde); }
.redes.grandes svg { width: 24px; height: 24px; --fundo-icone: var(--papel); }
.redes.grandes a:hover svg { --fundo-icone: var(--verde); }

/* o botão fixo de chamar no WhatsApp, no canto de todas as páginas. O verde é
   o do WhatsApp, escurecido para o texto branco ler; sobe quando o tocador
   de música aparece, para não ficar por baixo da barra. */
.zap-fixo {
  position: fixed; right: var(--e3); bottom: var(--e3); z-index: 45;
  display: flex; align-items: center; gap: var(--e1);
  background: #168a49; color: #fff; text-decoration: none; border-radius: 999px;
  padding: 12px 20px 12px 14px; box-shadow: 0 8px 24px rgba(18, 16, 13, .22);
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t5); font-weight: 700;
}
.zap-fixo:hover { background: #12733c; }
.zap-fixo svg { width: 26px; height: 26px; }
body.com-tocador .zap-fixo { bottom: calc(74px + var(--e2)); }

/* ---------- rodapé ---------- */

.rodape { background: var(--tinta); color: var(--papel); padding: var(--e5) 0 var(--e4);
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t5); }
.rodape .dentro { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--e4); }
.rodape .marca-pe img { width: auto; height: 72px; }
.rodape h2 { font-family: Crimson, Georgia, serif; font-size: var(--t3); letter-spacing: .16em; text-transform: uppercase; }
.rodape p { color: rgba(247, 244, 236, .66); font-size: var(--t5); margin-top: var(--e2); }
.rodape .cab { font-size: var(--t6); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: var(--e2); }
.rodape ul { list-style: none; }
.rodape li { margin-bottom: var(--e1); }
.rodape a { color: rgba(247, 244, 236, .82); text-decoration: none; }
.rodape a:hover { color: var(--papel); }
.rodape .fim {
  max-width: var(--largura); margin: var(--e4) auto 0; padding: var(--e3) var(--e4) 0;
  border-top: 1px solid rgba(247, 244, 236, .16);
  font-size: var(--t6); color: rgba(247, 244, 236, .5);
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
}

/* ---------- telefone e tablet ---------- */

@media (max-width: 900px) {
  :root { --t1: 40px; --t2: 27px; --t3: 19px; --e5: 44px; --e6: 52px; }
  .topo { flex-wrap: wrap; gap: var(--e2); padding: var(--e3); }
  .topo nav { margin-left: 0; width: 100%; gap: var(--e2) var(--e3); }
  .dentro { padding: 0 var(--e3); }
  .heroi { min-height: 0; padding: var(--e5) 0; }
  .heroi .fundo { opacity: .4; }
  .heroi .veu { background: linear-gradient(to bottom, rgba(26, 21, 18, .82), rgba(26, 21, 18, .94)); }
  .banda { min-height: 320px; }
  /* no celular a foto clara vai para cima e o texto desce, em vez de dividir a largura */
  .heroi.clara { display: block; padding-top: 0; }
  .heroi.clara .fundo { position: relative; left: auto; width: 100%; height: 260px; display: block; }
  .heroi.clara .veu { inset: 0 0 auto 0; height: 260px; background: linear-gradient(to bottom, rgba(247, 244, 236, 0) 70%, var(--papel)); }
  .heroi.clara .dentro { padding-right: var(--e3); margin-top: var(--e4); }
  .banda.clara { display: block; }
  .banda.clara img { position: relative; width: 100%; height: 240px; display: block; }
  .banda.clara .veu { display: none; }
  .banda.clara .dentro { padding-left: var(--e3); }
  .acervo, .usar, .quem, .musica, .duas, .projeto, .bio, .projetor-bloco { grid-template-columns: 1fr; gap: var(--e4); }
  .projetor-bloco { padding: var(--e4) var(--e3); }
  .usar .desenho { height: 300px; }
  .retrato { position: static; max-width: 320px; }
  .quem .foto { height: 280px; }
  .musica h1 { font-size: 34px; }
  .capitular::first-letter { font-size: 56px; }
  .rodape .dentro { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dupla, .dupla.grande, .dupla.trio { grid-template-columns: 1fr; gap: var(--e4); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- o tocador fixo ----------
   A barra que não some quando a pessoa troca de página. É a razão de esta
   direção ter sido escolhida, então ela não é enfeite: some só quando não há
   nada tocando. O JavaScript que a move está em tocador.js. */

.tocador {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--tinta); color: var(--papel);
  border-top: 1px solid rgba(216, 162, 74, .35);
  font-family: Figtree, system-ui, sans-serif;
  box-shadow: 0 -10px 30px rgba(26, 21, 18, .25);
}
.tocador[hidden] { display: none; }
.tocador-dentro {
  max-width: var(--largura); margin: 0 auto;
  padding: 12px var(--e4);
  display: flex; align-items: center; gap: var(--e2);
}
.tc-bt {
  background: none; border: 0; cursor: pointer; color: var(--papel);
  font-size: 11px; line-height: 1; padding: 9px 10px; border-radius: 999px;
}
.tc-bt:hover { background: rgba(247, 244, 236, .12); }
.tc-play {
  background: var(--ouro); color: var(--tinta);
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 12px;
}
.tc-play:hover { background: var(--ouro-claro); }
.tc-txt { min-width: 170px; max-width: 240px; }
.tc-nome { display: block; font-size: var(--t5); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cred { display: block; font-size: 11px; color: rgba(247, 244, 236, .6); letter-spacing: .06em; text-transform: uppercase; }
.tc-onda {
  flex: 1; height: 30px; cursor: pointer; position: relative; overflow: hidden;
  background: repeating-linear-gradient(to right, rgba(247, 244, 236, .28) 0 2px, transparent 2px 5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.tc-progresso {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(to right, var(--ouro-claro) 0 2px, transparent 2px 5px);
}
.tc-tempo { font-size: var(--t6); color: rgba(247, 244, 236, .6); font-variant-numeric: tabular-nums; }
body.com-tocador { padding-bottom: 74px; }

/* a linha que está tocando, no índice */
.indice li.tocando .nome { color: var(--verde); font-weight: 600; }
.indice li.tocando .toca { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.indice [data-musica] { cursor: pointer; }

/* ---------- entrada suave ----------
   Só com JavaScript ligado, e desligada para quem pede menos movimento no
   sistema. Sem isso a página aparece inteira de uma vez, que é o certo quando
   a pessoa não quer animação. */
.com-js .entra { opacity: 0; transform: translateY(14px); }
.com-js .entra.entrou { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .com-js .entra { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .tocador-dentro { padding: 10px var(--e3); gap: var(--e1); }
  .tc-ant, .tc-prox { display: none; }
  .tc-txt { min-width: 0; flex: 1; max-width: none; }
  .tc-onda { display: none; }
  body.com-tocador { padding-bottom: 66px; }
  /* no celular o botão do WhatsApp vira só o ícone, para não cobrir o texto */
  .zap-fixo { right: var(--e2); bottom: var(--e2); padding: 14px; }
  .zap-fixo span { display: none; }
  body.com-tocador .zap-fixo { bottom: calc(66px + var(--e1)); }
}

/* O botão de pedir autorização.
   A coluna "Fale com a gente antes" listava três casos que dependem de
   autorização e não dava caminho nenhum para pedir. Virava beco sem saída. */
.duas .acao { margin-top: var(--e3); }
.pista { font-size: var(--t6); color: var(--suave); font-style: italic; margin-top: var(--e2); max-width: 34ch; }

/* ==========================================================================
   CAPA DE DISCO (10/11/2026)
   O Luiz não estava confortável com o layout e escolheu, entre quatro
   caminhos, a linha do modelo "The Moons" (Croma, IronTemplates), mas "mais
   parecido com o de hoje". A maquete aprovada está em
   https://claude.ai/artifact/AXVe6MNCirhU9VP4Z5nPDg
   Do The Moons vieram: a capa em tela cheia, o menu por cima da foto e a
   música tratada como lançamento. Do site de antes ficou o resto: papel,
   pauta, dourado e verde, as fontes e todos os textos.
   Este bloco vem por último de propósito: ele manda sobre as regras de cima.
   ========================================================================== */

/* ---------- o menu, por cima da foto em todas as páginas ---------- */
/* Fixo desde 10/11/2026: o Luiz pediu o menu sempre à vista ao rolar, mais
   fino. No alto da página ele fica transparente sobre a foto; depois de rolar,
   a classe "rolou" no <html> (posta pelo tocador.js) dá o fundo escuro e
   encolhe a logo. O fundo é um ::before da largura da tela, porque o próprio
   menu tem a largura do conteúdo. */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  max-width: var(--largura); margin: 0 auto; padding: var(--e3) var(--e4);
  transition: padding .25s ease;
}
.topo::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: rgba(18, 16, 13, .96); box-shadow: 0 6px 24px rgba(18, 16, 13, .25);
  opacity: 0; transition: opacity .25s ease;
}
.topo .marca img { transition: height .25s ease; }
html.rolou .topo { padding-top: 10px; padding-bottom: 10px; }
html.rolou .topo::before { opacity: 1; }
html.rolou .topo .marca img { height: 48px; }
html.rolou .topo .marca .tag { display: none; }
/* link para seção da página não para escondido atrás do menu fixo */
[id] { scroll-margin-top: 96px; }
.marca .tag { color: #5fae74; }   /* o verde da logo, aberto para ler no escuro */
.topo nav { gap: var(--e3); align-items: center; }
.topo nav a {
  font-family: Figtree, system-ui, sans-serif; font-variant: normal; font-size: var(--t6); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 244, 236, .82);
  padding-bottom: 4px;
}
.topo nav a:hover { color: var(--papel); }
.topo nav a[aria-current="page"] { color: var(--ouro-claro); border-bottom: 1px solid var(--ouro-claro); }
/* o Projetor por último, com contorno de botão: é ferramenta, não página, e
   abre numa aba nova, deixando o site aberto atrás */
.topo nav a.destaque {
  color: var(--ouro-claro); border: 1px solid var(--ouro); border-radius: var(--r-controle); padding: 8px 14px;
}
.topo nav a.destaque:hover { background: var(--ouro); color: var(--tinta); }

/* ---------- a capa da home ---------- */
.capa {
  position: relative; min-height: 92vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--papel);
}
.capa .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: sepia(.35) saturate(.85); }
/* três camadas: o pé desmanchando no papel, o escuro atrás do texto, e um
   véu quente por cima de tudo, que tira o azul frio da foto */
.capa .veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18, 16, 13, .55) 0, rgba(18, 16, 13, 0) 22%, rgba(18, 16, 13, 0) 76%, rgba(247, 244, 236, .75) 92%, var(--papel) 100%),
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(18, 16, 13, .55), rgba(18, 16, 13, .22) 70%),
    linear-gradient(rgba(120, 80, 20, .18), rgba(120, 80, 20, .18));
}
.capa .texto { position: relative; padding: 168px var(--e3) 168px; max-width: var(--largura); }
/* o p do site tem largura de leitura, e sem margem automática ficava preso à esquerda */
.capa .texto > p { margin-left: auto; margin-right: auto; }
.capa .rub { color: var(--ouro-claro); }
.capa h1 { max-width: none; font-size: clamp(44px, 6.4vw, 88px); line-height: 1; letter-spacing: -.015em; margin-top: var(--e3); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.capa h1 em { display: block; font-style: italic; color: var(--ouro-claro); font-size: .62em; margin-top: var(--e1); }
.capa .sub { color: rgba(247, 244, 236, .86); max-width: 52ch; margin: var(--e3) auto 0; }
.capa .acoes { margin-top: var(--e4); display: flex; gap: var(--e2); justify-content: center; flex-wrap: wrap; }
.capa .desce { position: absolute; bottom: 104px; left: 50%; width: 1px; height: 56px; background: var(--ouro); }

/* ---------- a faixa de foto no alto das páginas de dentro ----------
   Só para o menu ter onde ficar. O texto da página continua no papel, como
   antes: nas páginas legais ele está todo dentro da abertura. */
.capa-curta { position: relative; height: 200px; overflow: hidden; background: var(--tinta); }
.capa-curta img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: sepia(.35) saturate(.85); opacity: .55; }
.capa-curta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18, 16, 13, .6) 0, rgba(18, 16, 13, .2) 55%, rgba(247, 244, 236, .7) 88%, var(--papel) 100%);
}
.capa-curta + .heroi.curta { padding-top: var(--e4); }

/* ---------- a primeira canção, como página de álbum ---------- */
.lancamento { padding: var(--e4) 0 var(--e6); }
.disco { display: grid; grid-template-columns: 440px 1fr; gap: var(--e5); align-items: center; }
.capinha { position: relative; }
.capinha img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-superficie); box-shadow: 0 30px 60px rgba(40, 28, 8, .28); }
/* o disco saindo de trás da capa: diz lançamento sem precisar da palavra */
.capinha::after {
  content: ""; position: absolute; top: 6%; right: -14%; width: 88%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--ouro) 0 7%, var(--tinta) 7.5% 30%, #26211a 30.5% 31%, var(--tinta) 31.5% 100%);
}
.disco h2 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.05; margin-top: var(--e2); }
.autores { font-size: var(--t3); color: var(--suave); margin-top: var(--e1); }
.ficha {
  display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e3);
  font-family: Figtree, system-ui, sans-serif; font-size: var(--t6); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--suave);
}
.ficha b { color: var(--ouro-escuro); }
.breve-aqui { margin-top: var(--e3); font-style: italic; color: var(--ouro-escuro); }
.disco .acoes { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- celular e tablet ---------- */
@media (max-width: 900px) {
  /* no celular o menu não cabe por cima da foto: vira uma barra escura que
     emenda com a foto logo abaixo */
  .topo { position: sticky; max-width: none; background: var(--tinta); padding: var(--e3); }
  .topo::before { display: none; }
  .topo nav { gap: var(--e1) var(--e2); }
  .topo nav a { letter-spacing: .1em; }
  /* ao rolar, o menu vira uma linha só, que se arrasta para o lado */
  html.rolou .topo { padding: var(--e1) var(--e2); gap: var(--e1); }
  html.rolou .topo .marca img { height: 36px; }
  html.rolou .topo nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  html.rolou .topo nav::-webkit-scrollbar { display: none; }
  html.rolou .topo nav a { white-space: nowrap; flex: none; }
  [id] { scroll-margin-top: 120px; }
  .capa { min-height: 0; }
  .capa .texto { padding: var(--e5) var(--e3) 136px; }
  .capa .desce { display: none; }
  .capa-curta { height: 72px; }
  .disco { grid-template-columns: 1fr; gap: var(--e4); }
  .capinha { max-width: 340px; }
  .capinha::after { display: none; }
}