/* Quarteto Brasil — estilo do site (gerado)

   ACESSIBILIDADE — o público do acervo é majoritariamente idoso. Três regras
   que valem para qualquer coisa nova que entrar aqui:
   1. Tamanho de texto SEMPRE em rem (nunca px), para acompanhar quem aumentou
      a fonte nas configurações do navegador. O piso é --t-xs (~14,6px);
      nada de texto abaixo disso. A ÚNICA exceção é --t-credito, explicada lá
      embaixo — não usar essa variável fora do crédito de foto.
   2. Cor de texto só sai de --ink / --ink-soft / --ink-faint / --accent-ink —
      os três primeiros passam 4,5:1 sobre os três fundos do conteúdo (--paper,
      --surface, --surface-2), nos dois temas. Exceção documentada: dentro da barra
      de navegação o fundo é --nav-bg, onde --ink-faint dá 3,96:1 e não pode entrar.
      Não inventar cinza novo sem medir.
   3. Tudo que se clica tem no mínimo --tap (44px) de altura e largura. */
/* TEMA — o modo CLARO é o padrão do site, e a preferência do sistema operacional
   (prefers-color-scheme) é ignorada de propósito: o acervo abria ora claro ora escuro
   conforme o aparelho de quem chegava, e o curador decidiu que ele tem um rosto só.
   Quem quiser o escuro clica no interruptor da barra, e a escolha fica gravada no
   navegador (localStorage 'tema'), aplicada antes da primeira pintura. Por isso a
   paleta escura mora num lugar SÓ — :root[data-theme="dark"], lá embaixo. */
:root{
  --paper:#F1EADC; --surface:#FBF6EC; --surface-2:#F5EEE0;
  --ink:#241F18; --ink-soft:#5E5647; --ink-faint:#6F6757;
  --line:#DDD2BE; --line-strong:#8B8270;
  --accent:#9C5A52; --accent-ink:#8F524B; --accent-bg:#EFE0DC; --focus:#8A4B44;
  --accent-strong:#8A4B44; --on-accent:#FFFFFF; /* fundo de estado ativo + texto sobre ele */
  /* barra de navegação: fundo PRÓPRIO, um degrau ABAIXO do papel (a barra é mais escura
     que a página, não mais clara como era com --surface-2). Consequência a respeitar:
     sobre este fundo só --ink e --ink-soft podem escrever (5,12:1); --ink-faint dá
     3,96:1 e NÃO entra na barra. --nav-line-strong existe porque --line-strong cai para
     2,69:1 aqui, abaixo do mínimo de 3:1 de borda de controle. */
  --nav-bg:#E3D8C0; --nav-line:#C7B99B; --nav-line-strong:#7A705C; /* 3,45:1 */
  /* interruptor de tema: trilha afundada + botão em relevo.
     A trilha é bem mais escura que a do desenho original (#B7A688→#DCD1B8), por duas
     medições: sobre --nav-bg a antiga dava 1,07:1 e o interruptor sumia dentro da barra;
     e o botão branco sobre ela dava 1,52:1, contra os 3:1 que o indicador de estado de
     um interruptor precisa ter. Com este par: trilha 2,21:1 sobre a barra e botão
     3,12:1 sobre a trilha. O gradiente (dois passos) e o afundado seguem intactos. */
  --sw-track-a:#8B7852; --sw-track-b:#A29069; --sw-edge:rgba(48,34,10,.50);
  --sw-thumb-a:#FFFFFF; --sw-thumb-b:#EDE4D1; --sw-ic:#7A5049;
  --shadow:0 1px 2px rgba(40,30,15,.06), 0 6px 20px rgba(40,30,15,.07);
  /* crédito sobre foto: tarja escura translúcida com texto claro, igual nos dois
     temas — a foto é o fundo, não o papel do site. */
  --overlay-bg:rgba(14,11,7,.52); --overlay-ink:rgba(255,255,255,.88);
  /* tarja do nome do grupo na capa do álbum: mais opaca que a de crédito porque
     ali o texto é LINK, e link precisa dos 4,5:1 até sobre a capa mais clara.
     Igual nos dois temas, pelo mesmo motivo do overlay: o fundo é a arte. */
  --tarja-bg:rgba(12,10,7,.78); --tarja-bg-forte:rgba(12,10,7,.9); --tarja-ink:#FFFFFF;
  --radius:14px;
  --radius-btn:9px; /* botões de ação: cantos suaves, nunca pílula (ver DECISOES.md) */
  /* relevo do botão. A LATERAL é o próprio material puxado para o escuro, nunca um preto
     translúcido: sobre o tema escuro o botão é claro e o fundo já é preto, então uma
     sombra preta desapareceria e o botão perderia a espessura em metade do site. */
  --btn-top:color-mix(in srgb, var(--ink) 88%, white);
  --btn-edge:color-mix(in srgb, var(--ink) 62%, black);
  --gut:clamp(26px,6vw,44px); /* recuo lateral do conteúdo */
  --tap:44px;                 /* alvo mínimo de toque (WCAG 2.5.5) */
  /* tipografia: uma só família sem-serifa em todo o site. A sem-serifa do sistema
     é a mais legível em tela para leitores idosos (traço uniforme, contraforma
     aberta) — decisão de 2026-07-25, substitui a serifada do corpo. */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:var(--font-sans); /* compatibilidade: quem ainda pedir serifada recebe a sans */
  /* escala tipográfica — base 18px (1rem) */
  --t-xs:.8125rem;   /* ~14,6px — piso absoluto: etiquetas de uma ou duas palavras */
  --t-sm:.875rem;    /* ~15,8px — metadados curtos */
  --t-md:.9375rem;   /* ~16,9px — metadados que se lê de fato */
  --t-base:1rem;     /* 18px — interface, listas, botões */
  --t-lg:1.0625rem;  /* ~19,1px — corpo */
  --t-xl:1.125rem;   /* ~20,3px — leitura corrida longa (bio, letra) */
  /* exceção ao piso: crédito de foto (~11px). É atribuição de proveniência, não
     conteúdo — existe por ética com quem fez a imagem, e deve poder ser ignorado
     por quem só quer ver a foto. Segue em rem, então ainda cresce com o zoom de
     fonte do navegador. Nada mais no site pode usar este tamanho. */
  --t-credito:.625rem;
}
/* modo escuro — só por escolha explícita no interruptor. Não há bloco
   @media (prefers-color-scheme:dark): ver a nota do :root acima. */
:root[data-theme="dark"]{
  --paper:#171410; --surface:#211C16; --surface-2:#1B1712; --ink:#ECE4D3; --ink-soft:#B5AA93;
  --ink-faint:#948B75; --line:#3A3226; --line-strong:#746B5E; --accent:#D39B93; --accent-ink:#D9A69E;
  --accent-bg:#33211F; --focus:#D39B93; --accent-strong:#D39B93; --on-accent:#171410;
  /* no escuro a barra é mais CLARA que a página. Espelhar o claro e deixá-la mais escura
     que o papel abriria um buraco no topo e apagaria a trilha do interruptor, que aqui
     já é quase preta.
     O DEGRAU AQUI É MAIOR QUE O DO CLARO, de propósito. A razão de contraste WCAG mente
     nesta faixa: ela comprime tudo perto do preto (barra e papel dão 1,3:1 e parecem
     "equivalentes" ao 1,18:1 do claro, mas o olho não vê nada). Quem manda é o L*: o
     claro separa dL* 6,3, e o curador não enxergava separação nenhuma com o dL* 4,6 de
     antes (#221D16). Este par dá dL* 10,3 — mais folgado que o claro, porque tela escura
     ainda perde contraste para o reflexo do ambiente. Ao mexer aqui, medir em L*. */
  --nav-bg:#302820; --nav-line:#453C2D; --nav-line-strong:#837A6B; /* 3,36:1 */
  /* base da trilha escurecida junto com a barra (era #2A241C): sobre a barra nova ela
     dava dL* 2,2 e a metade de baixo do interruptor se fundia com o fundo. Agora dL* 9,2. */
  --sw-track-a:#0F0D0A; --sw-track-b:#1A1611; --sw-edge:rgba(0,0,0,.65);
  --sw-thumb-a:#FBF6EC; --sw-thumb-b:#DCD2BC; --sw-ic:#2A231A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --btn-top:color-mix(in srgb, var(--ink) 92%, white);
  --btn-edge:color-mix(in srgb, var(--ink) 55%, black);
}

*{box-sizing:border-box}
/* base 18px em PORCENTAGEM (não px): assim quem já aumentou a fonte nas
   configurações do próprio navegador continua sendo respeitado — é por isso
   que nenhum tamanho neste arquivo é escrito em px. */
html{font-size:112.5%; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--t-lg); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* coluna flex + min-height garante o rodapé colado no fim mesmo em páginas curtas */
  min-height:100dvh; display:flex; flex-direction:column}
/* .page cresce para ocupar o espaço livre e empurrar o rodapé; por dentro é fluxo de
   bloco normal, então os .wrap voltam a centralizar em 1120px (sem encolher no flex) */
.page{flex:1 0 auto}
.page:focus{outline:none}
.tnum{font-variant-numeric:tabular-nums}

/* foco visível global e forte — quem navega por teclado precisa enxergar onde está */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}

/* atalho "pular para o conteúdo": some até receber o foco pelo Tab */
.skip{position:absolute; left:50%; top:-100px; transform:translateX(-50%); z-index:60;
  background:var(--ink); color:var(--paper); font-weight:600; font-size:var(--t-base);
  padding:12px 22px; border-radius:0 0 var(--radius-btn) var(--radius-btn); transition:top .15s}
.skip:focus{top:0; text-decoration:none; color:var(--paper)}

/* respiro lateral do conteúdo — nunca menos que 26px, mesmo no celular mais estreito.
   padding-inline (não o shorthand) para não zerar o padding vertical de quem combina
   .wrap com outra regra — ex.: main.wrap perdia os 60px de respiro antes do rodapé */
.wrap{max-width:1120px; margin:0 auto; padding-inline:var(--gut)}
h1,h2,h3,h4,h5,h6{line-height:1.2}
h1,h2,h3,.cn,.d-title{overflow-wrap:break-word}
a{color:var(--accent-ink); text-decoration:none}
a:hover{text-decoration:underline}
/* "a confirmar": sem itálico — itálico prejudica quem lê com dificuldade, e
   sublinhado/pontilhado seria confundido com link. Fica só a cor mais suave. */
.conf{color:var(--ink-faint); font-style:normal}

/* ============================================================
   INTERRUPTOR DE TEMA — mora na própria barra de navegação, à direita.
   Não tem texto visível: quem o anuncia é o aria-label/title, que o JS
   mantém atualizado a cada troca.

   Trilha AFUNDADA (sombra interna) e botão em RELEVO (sombra projetada +
   brilho no topo). Segue a referência aprovada pelo curador — sol à DIREITA
   no modo claro, lua à ESQUERDA no modo escuro. Medidas em px de propósito:
   é um objeto desenhado, não texto; se escalasse com a fonte, as sombras e o
   encaixe do botão na trilha se desfariam.
   ============================================================ */
.theme-toggle{--tt-w:74px; --tt-h:38px; --tt-t:30px; --tt-x:36px;
  border:0; background:none; margin:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; min-height:var(--tap);
  -webkit-tap-highlight-color:transparent}
.tt-track{position:relative; width:var(--tt-w); height:var(--tt-h); border-radius:999px; flex:none;
  background:linear-gradient(180deg,var(--sw-track-a),var(--sw-track-b));
  box-shadow:inset 0 2px 5px var(--sw-edge), inset 0 -1px 0 rgba(255,255,255,.28),
             0 1px 0 rgba(255,255,255,.5);
  transition:background .25s ease}
.tt-thumb{position:absolute; top:4px; left:4px; width:var(--tt-t); height:var(--tt-t); border-radius:50%;
  background:linear-gradient(160deg,var(--sw-thumb-a) 0%,var(--sw-thumb-b) 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.22),
             inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 2px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center; color:var(--sw-ic);
  transform:translateX(var(--tt-x)); transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
.theme-toggle:hover .tt-thumb{box-shadow:0 4px 9px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.24),
             inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.10)}
.theme-toggle:active .tt-thumb{box-shadow:0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.7)}
.tt-ic{width:17px; height:17px; display:block}
.tt-lua{display:none}
/* modo escuro (só por escolha no interruptor): botão à esquerda, lua */
:root[data-theme="dark"] .tt-thumb{transform:translateX(0)}
:root[data-theme="dark"] .tt-sol{display:none}
:root[data-theme="dark"] .tt-lua{display:block}

/* nav */
.nav{border-bottom:1px solid var(--nav-line); background:var(--nav-bg); position:sticky; top:0; z-index:30;
  backdrop-filter:blur(6px)}
/* padding-block (não o shorthand) para não zerar o recuo lateral do .wrap combinado */
/* flex-wrap é a rede de segurança: numa tela estreitíssima as ações caem para
   uma segunda linha em vez de o interruptor ser cortado fora da barra */
.nav-in{display:flex; align-items:center; gap:6px 28px;
  flex-wrap:wrap; padding-block:9px}
.nav .home{font-weight:700; color:var(--ink); letter-spacing:-.01em}
/* (havia aqui um `.nav .home .m{color:var(--accent-ink)}` sem markup correspondente há
   tempos. Removido junto com o escurecimento da barra: sobre --nav-bg o --accent-ink dá
   4,27:1 e reprovaria os 4,5:1 — a regra morta era uma armadilha esperando ressuscitar.
   Se um dia a marca voltar a ter letra destacada na barra, usar --ink, não o acento.) */
.crumb{display:flex; flex-wrap:wrap; align-items:center; row-gap:2px;
  font-size:var(--t-md); line-height:1.4; color:var(--ink-faint); padding:14px 0 0}
.crumb a{color:var(--ink-soft); padding:5px 0; display:inline-block}
.crumb a:hover{color:var(--accent-ink)}
.crumb [aria-current]{color:var(--ink); font-weight:700}
/* separador colado ao item seguinte — nunca fica órfão numa nova linha */
.crumb > * + *::before{content:"›"; margin:0 .55em; color:var(--ink-faint); font-weight:400}
/* a casa do Início só aparece no celular; aqui a trilha inteira é escrita por extenso */
.crumb .c-casa{display:none}
/* no celular a trilha deixa de ser enfeite e vira a saída principal da página: os
   links precisam do alvo de toque inteiro (--tap), e a trilha de 4 ou 5 níveis quebra
   em duas linhas — sem row-gap elas encostam e o dedo erra o degrau de cima */
@media (max-width:820px){
  .crumb{row-gap:6px}
  .crumb a{padding:12px 0}
}
/* ≤620px A TRILHA DEIXA DE SER CADEIA E VIRA SAÍDA. Numa ficha de álbum ela tem 6
   níveis e ~120 caracteres: quebrava em três ou quatro linhas, cortava nomes no meio
   ("Quarteto Vox → Ministério" numa linha, "Vox ›" na seguinte) e empurrava o <h1>
   para fora da primeira dobra. O problema nunca foi a quebra e sim a quantidade de
   informação — arrumar o espaçamento só deixaria o mesmo parágrafo mais bem-cuidado.
   Ficam duas peças: o degrau logo acima (alvo grande, à esquerda) e a casa do Início
   (canto direito). Os degraus do meio continuam a um toque, a partir do pai, e o item
   atual sai porque é o <h1> logo abaixo — era o rótulo mais longo da trilha.
   O 620 é próprio deste bloco: entre 620 e 820 a trilha completa ainda cabe em duas
   linhas e informa mais, e lá o 820 acima só cuida do alvo de toque. */
@media (max-width:620px){
  /* A FAIXA. As duas peças vivem dentro de um recipiente só, e é ele que resolve o
     desfalque: solto na linha, o Início ficava boiando num vazio à direita. A moldura
     é dos DOIS — dar contorno só ao Início destacaria o link errado, já que o alvo
     principal é o pai. Fundo e borda seguem os do protótipo aprovado. */
  .crumb{flex-wrap:nowrap; gap:0; row-gap:0; margin-top:14px; padding:0 14px;
    background:var(--surface-2); border:1px solid var(--line);
    border-radius:var(--radius-btn)}
  .crumb > * + *::before{content:none}      /* sem › : não há mais cadeia para separar */
  .crumb .c-meio, .crumb .c-atual{display:none}
  .crumb .c-pai{order:1; display:inline-flex; align-items:center; min-height:var(--tap);
    min-width:0; flex:0 1 auto; padding:0; font-weight:700; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* o ‹ é caractere e vem do CSS, como o › — nome longo trunca, nunca quebra a linha */
  .crumb .c-pai::before{content:"‹"; font-weight:400; font-size:1.35em; line-height:1;
    margin-right:.4em; color:var(--ink-soft); flex:none}
  .crumb .c-pai:hover, .crumb .c-pai:hover::before{color:var(--accent-ink)}
  /* o Início fica na outra ponta da faixa, com casa E rótulo: o ícone reforça, não
     substitui a palavra (regra "ícone nunca sozinho", DECISOES.md 2026-07-25) */
  .crumb .c-inicio{order:2; margin-left:auto; flex:none; gap:7px; padding:0 0 0 14px;
    min-height:var(--tap); display:inline-flex; align-items:center;
    font-size:var(--t-sm); color:var(--ink-soft); white-space:nowrap}
  .crumb .c-casa{display:block; width:19px; height:19px}
  /* trilha rasa (Início + página atual, caso do Acervo): o próprio Início é o pai, e a
     faixa fica com uma peça só. Ele assume a esquerda e o ‹, e a casa sai — o ícone
     era o que o distinguia do pai, e agora ele É o pai. */
  .crumb .c-inicio.c-pai{order:1; margin-left:0; padding:0; gap:0;
    font-size:var(--t-md); font-weight:700; color:var(--ink)}
  .crumb .c-inicio.c-pai .c-casa{display:none}
}
/* "Sugerir correção": botão no canto superior direito do cabeçalho da ficha.
   Retangular (comportamento de botão), nunca pílula — ver DECISOES.md. */
.corr-btn{position:absolute; top:14px; right:clamp(12px,3vw,18px); z-index:2;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px;
  min-height:var(--tap);
  border:1px solid var(--line-strong); border-radius:var(--radius-btn); background:var(--surface);
  color:var(--ink-soft); font-size:var(--t-sm); font-weight:600}
.corr-btn:hover{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-bg); text-decoration:none}
.corr-btn svg{width:17px; height:17px; flex:none}
/* no celular o botão sai do canto e vira uma linha própria abaixo do título:
   antes ele virava só um lápis, e ícone sem palavra não é reconhecido pelo
   nosso público — melhor ocupar uma linha e continuar dizendo o que faz */
/* as regras de empilhamento do cabeçalho no celular ficam junto de .d-head,
   mais abaixo — precisam vir DEPOIS da base para vencer na cascata */

/* hero (home) */
.hero{padding-block:clamp(28px,7vw,38px) 6px}
.eyebrow{font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
h1.brand{font-size:clamp(1.75rem,7vw,2.75rem); line-height:1.1; margin:.28em 0 .18em; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
.tag{color:var(--ink-soft); max-width:60ch; margin:0; font-size:clamp(1.0625rem,1.7vw,1.1875rem); line-height:1.6}

/* ============================================================
   PAINEL DE BUSCA E FILTROS (índices de músicas e pessoas)
   Um bloco só, alinhado ao mesmo eixo do conteúdo. A busca ocupa a linha
   inteira (é a ação principal) e os filtros vêm abaixo em colunas iguais —
   todos com rótulo POR CIMA e a MESMA altura, para a barra ler como uma
   fileira e não como três peças soltas de tamanhos diferentes.
   ============================================================ */
.buscador{padding-block:16px 4px; display:flex; flex-direction:column; gap:14px}
.fcampo{display:flex; flex-direction:column; gap:7px; min-width:0}
.fcampo-lab{font-size:var(--t-sm); font-weight:700; color:var(--ink-soft)}
/* --tracks vem do gerador, não é adivinhado por auto-fit: a busca leva a maior
   fatia (é a ação principal) e os seletores ficam estreitos. Assim a fileira
   nunca deixa coluna vazia nem joga o último campo sozinho para uma segunda
   linha. */
.bx-filtros{display:grid; grid-template-columns:var(--tracks,1fr); gap:16px}
@media (max-width:1040px){ .bx-filtros{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .bx-filtros{grid-template-columns:minmax(0,1fr)} }
/* contagem de resultados — muda sozinha conforme os filtros */
.bx-conta{margin:0; font-size:var(--t-md); font-weight:700; color:var(--ink-soft)}

/* campo de busca */
.search{display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius-btn); padding:0 16px; min-height:54px}
.search:focus-within{border-color:var(--accent); outline:3px solid var(--focus); outline-offset:1px}
.search input{border:0; outline:0; background:transparent; color:var(--ink);
  font-family:inherit; font-size:var(--t-base); width:100%; min-width:0; min-height:52px}
.search svg{flex:none; width:21px; height:21px; color:var(--ink-faint)}

/* seletores — mesma altura e mesma moldura do campo de busca.
   min-width:0 no .selbox é obrigatório: o <select> nativo reivindica a largura
   da opção mais longa (há títulos de álbum enormes) e, sem isso, estoura a
   grade e empurra a barra para fora da tela no celular. */
.selbox{position:relative; display:flex; min-width:0}
.selbox select{width:100%; min-width:0; min-height:54px; cursor:pointer;
  font-family:inherit; font-size:var(--t-base); color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-btn);
  padding:0 44px 0 16px; appearance:none; -webkit-appearance:none; text-overflow:ellipsis}
.selbox select:hover{border-color:var(--accent)}
.selbox::after{content:"▾"; position:absolute; right:17px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); pointer-events:none; font-size:var(--t-base)}

/* grid + cards */
main{padding-block:26px 64px}
/* min() evita que o card mínimo estoure a viewport em telas estreitas */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:18px}
/* card de /grupos: imagem no topo (proporção 8:5, casa com a logo — ver
   DECISOES.md 2026-07-25) + legenda embaixo, no estilo da galeria do painel */
.card{position:relative; display:block; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); overflow:hidden; color:inherit; box-shadow:var(--shadow);
  transition:border-color .16s ease, background .16s ease}
/* o realce do apontador não é só a borda: o fundo muda junto, para quem não
   percebe variação sutil de cor */
.card:hover{border-color:var(--accent); background:var(--surface-2); text-decoration:none}
/* aspect-ratio (não altura fixa) trava a caixa em 8:5 seja qual for a largura
   da coluna do grid — é a mesma proporção da logo, então o cover nunca corta */
.card-media{width:100%; aspect-ratio:8/5; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--ink-faint)}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-media.ph svg{width:36px; height:36px; opacity:.6}
.card-info{padding:14px 16px 4px; min-width:0}
.card .cn{font-size:var(--t-xl); line-height:1.2; font-weight:700; margin:0 0 3px; text-wrap:balance; color:var(--ink)}
.card .meta{color:var(--ink-soft); font-size:var(--t-md)}
.card .foot{display:flex; align-items:center; gap:8px; padding:8px 16px 16px}
.taglist{display:flex; gap:7px; flex-wrap:wrap}
.t{font-size:var(--t-xs); color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:6px; padding:3px 9px}
.empty{color:var(--ink-soft); font-size:var(--t-lg); padding:30px 4px}

/* section headings */
.section-h{display:flex; align-items:baseline; gap:12px; margin:44px 0 4px}
.section-h h2{font-size:var(--t-base); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:0}
.section-h .rule{flex:1; height:1px; background:var(--line)}
.section-note{color:var(--ink-soft); font-size:var(--t-lg); margin:8px 0 18px; max-width:65ch}

/* influence cards */
.infl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:18px}
.infl{display:block; background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:20px; color:inherit}
.infl:hover{border-color:var(--accent); background:var(--surface); text-decoration:none}
/* origem do grupo ("EUA, Chicago") — topônimo, então sem caixa-alta forçada */
.infl .flag{font-size:var(--t-xs); letter-spacing:.04em; color:var(--accent-ink); font-weight:700}
.infl .cn{font-size:var(--t-xl); font-weight:700; margin:7px 0 3px; color:var(--ink)}
.infl .who{color:var(--ink-soft); font-size:var(--t-md); margin-bottom:9px}
.infl p{margin:0; color:var(--ink-soft); font-size:var(--t-lg); line-height:1.6}

/* detail pages */
.detail{background:var(--surface); border:1px solid var(--line-strong); border-radius:18px; overflow:hidden; margin-top:14px; box-shadow:var(--shadow)}
.d-head{padding:26px clamp(16px,4vw,28px) 20px; border-bottom:1px solid var(--line); position:relative; background:linear-gradient(var(--surface-2),var(--surface))}
.d-head.with-media{display:flex; gap:clamp(14px,3vw,22px); align-items:center; flex-wrap:wrap}
.d-media{flex:none; width:clamp(92px,22vw,124px); height:clamp(92px,22vw,124px); border-radius:12px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center}
.d-media img{width:100%; height:100%; object-fit:cover; display:block}
/* logo do grupo é paisagem 8:5 desde 2026-07-25 (era quadrada) — width:auto +
   aspect-ratio (em vez de height fixa) trava a caixa exatamente na proporção
   da imagem, então cover preenche sem sobrar nem cortar; sem padding, senão
   volta a sobrar moldura em volta da arte */
.d-media.logo{width:auto; aspect-ratio:8/5; background:var(--surface)}
.d-media.logo img{object-fit:cover}
.d-media.ph{color:var(--ink-faint)}
.d-media.ph svg{width:56px; height:56px; opacity:.6}
.d-htext{min-width:0; flex:1 1 260px}

/* ---- cabeçalho do ÁLBUM: a capa como cartaz (decisão de 2026-07-26) ----
   A ficha do álbum é a única em que a arte é assunto, e não miniatura: capa
   grande, a bolacha do formato saindo pela diagonal do canto inferior direito e
   o nome do grupo em tarja sobre a arte. Grupo e pessoa seguem com .with-media.
   Por que a diagonal e não a saída lateral: a tarja já desenha uma linha
   horizontal forte na base da capa: um disco saindo na altura do meio cria uma
   segunda linha concorrente e joga o olho para um canto vazio à direita. Apoiado
   no canto de baixo, o percurso vira título → capa → disco.
   O custo assumido: no celular o cabeçalho gasta ~300px antes do título e leva a
   primeira faixa para uns 480px de rolagem. Foi escolha de curadoria — a página
   do álbum celebra a capa — e não deve ser "corrigida" sem o curador. */
.d-head.album{display:flex; gap:clamp(14px,3vw,22px); align-items:center}
.d-head.album .d-htext{flex:1 1 auto}
.d-head.album .d-title{margin:0}
/* no DESKTOP a capa é miniatura, do mesmo tamanho das outras fichas — o cartaz é
   coisa de celular. Consequência que manda no markup: numa capa de 124px a tarja
   do grupo cobriria de um terço a metade da arte (nome longo quebra em 3 linhas),
   então aqui ela some e quem leva o grupo é este link, na coluna de texto. O CSS
   mostra um OU outro, nunca os dois. */
.d-head.album .d-grupo{display:inline-flex; align-items:center; min-height:var(--tap);
  margin-top:6px; font-weight:700; color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--line-strong); text-underline-offset:3px}
.d-head.album .d-grupo:hover{color:var(--accent-ink)}
/* a linha de procedência (Álbum · CD · 2007 · gravadora) é dado, não etiqueta
   decorativa: sai do cinza mais claro do chapéu e ganha espaçamento menor */
.d-head.album .d-eyebrow{color:var(--ink-soft); letter-spacing:.08em; margin-bottom:9px}
.poster-fig{position:relative; flex:none; width:clamp(96px,15vw,124px); aspect-ratio:1/1;
  /* a bolacha sai 14% à direita e 12% abaixo da capa; a margem reserva esse espaço,
     senão ela invade o texto ao lado e é cortada pela borda arredondada do cartão.
     Como a folga é fração da capa, ela acompanha o tamanho: ~18px aqui, ~34px no
     cartaz do celular. */
  margin:0 20px 16px 0}
.poster-fig .capa{position:relative; z-index:1; width:100%; height:100%; border-radius:10px;
  overflow:hidden; background:var(--surface-2); border:1px solid var(--line-strong);
  box-shadow:0 2px 10px rgba(40,30,15,.18); display:flex; align-items:center; justify-content:center}
.poster-fig .capa img{width:100%; height:100%; object-fit:cover; display:block}
.poster-fig .capa .ph{display:flex; color:var(--ink-faint)}
.poster-fig .capa .ph svg{width:64px; height:64px; opacity:.6}
/* nome do grupo sobre a arte. A tarja é mais opaca que --overlay-bg (crédito de
   foto) de propósito: aqui é o único caminho do cabeçalho para a página do grupo,
   então é link e precisa dos 4,5:1 mesmo sobre a capa mais clara do acervo — no
   pior caso (arte branca) o branco sobre esta tarja dá ~10:1. Ocupa a largura
   inteira da capa porque nome longo no cantinho vira retângulo torto. */
.poster-fig .tarja{position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; align-items:center; min-height:var(--tap); padding:8px 12px;
  background:var(--tarja-bg); color:var(--tarja-ink); font-size:var(--t-sm);
  font-weight:600; line-height:1.3; text-decoration:none; border-radius:0 0 9px 9px}
.poster-fig .tarja:hover{background:var(--tarja-bg-forte); text-decoration:underline}
/* ...mas só no celular. No desktop a capa é miniatura e a tarja comeria a arte;
   lá quem leva o grupo é o .d-grupo da coluna de texto. Este display:none precisa
   vir DEPOIS do bloco acima: mesma especificidade, quem fecha por último vence. */
.poster-fig .tarja{display:none}
/* a bolacha é decorativa (aria-hidden no HTML) e desenhada só com gradientes:
   miolo → anel do miolo → brilho especular → base. */
.poster-fig .disco{position:absolute; z-index:0; bottom:-12%; right:-14%; width:84%;
  aspect-ratio:1/1; border-radius:50%; box-shadow:0 2px 8px rgba(40,30,15,.28)}
.poster-fig .d-vinil{background:
  radial-gradient(circle at 50% 50%, #E8E0CE 0 5.5%, #2A2622 5.5% 15%, transparent 15%),
  repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, transparent 1px 4px),
  radial-gradient(circle at 50% 50%, #23201C 0 100%)}
/* CD: prata com o arco-íris de leitura bem lavado — é o que faz o olho reconhecer
   o formato sem legenda. O contorno escuro (inset) não é enfeite: sem ele a
   bolacha clara boia no papel bege do cabeçalho. */
.poster-fig .d-cd{box-shadow:inset 0 0 0 1px rgba(35,26,12,.45), 0 2px 8px rgba(40,30,15,.28);
  background:
  radial-gradient(circle at 50% 50%, var(--paper) 0 6.5%, rgba(60,52,38,.55) 6.5% 7.6%, transparent 7.6%),
  radial-gradient(circle at 50% 50%, transparent 0 7.6%, #F2EEE4 7.6% 15%, rgba(90,80,62,.45) 15% 16.4%, transparent 16.4%),
  conic-gradient(from 205deg at 50% 50%, rgba(255,255,255,.5) 0deg 20deg, rgba(255,255,255,0) 58deg 150deg,
                 rgba(255,255,255,.38) 174deg 198deg, rgba(255,255,255,0) 238deg 360deg),
  conic-gradient(from 20deg at 50% 50%, rgba(226,120,170,.30), rgba(120,190,235,.30), rgba(140,220,170,.30),
                 rgba(235,205,120,.30), rgba(226,120,170,.30)),
  radial-gradient(circle at 34% 28%, #F4F1E9 0%, #D6CFBE 52%, #ADA38E 100%)}

/* no celular o cabeçalho empilha: capa, título, botão "Sugerir correção".
   order:99 porque no HTML o botão vem ANTES do título — em fluxo normal ele
   precisa cair por último. E flex:0 0 auto no .d-htext é indispensável: em
   coluna, o flex-basis de 260px viraria ALTURA e abriria um buraco embaixo
   do título. */
@media (max-width:620px){
  .corr-btn{position:static; display:flex; width:100%; margin-top:2px; order:99}
  .d-head,.d-head.with-media,.d-head.album{display:flex; flex-direction:column; align-items:stretch; gap:14px}
  .d-htext{flex:0 0 auto; width:100%}
  .d-media{align-self:flex-start}
  .d-title{margin-bottom:4px}
  /* álbum: a capa vira cartaz de 74% da largura — grande o bastante para a arte
     valer a rolagem, com folga à direita e embaixo para a bolacha da diagonal */
  .d-head.album{gap:12px}
  .d-head.album .d-title{margin:0}
  .poster-fig{width:74%; max-width:250px; margin:2px 0 22px}
  /* aqui a capa tem largura de sobra: o grupo volta para dentro da arte e o link
     da coluna de texto sai, para o nome não aparecer duas vezes */
  .poster-fig .tarja{display:flex}
  .d-head.album .d-grupo{display:none}
}
.d-head::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent)}
.d-eyebrow{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.d-title{font-size:clamp(1.5rem,4vw,2.125rem); line-height:1.15; font-weight:700; margin:7px 0 12px; text-wrap:balance; color:var(--ink)}
.d-badges{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.d-body{padding:6px clamp(16px,4vw,28px) 26px}
/* rótulo à esquerda, valor à direita. O rótulo ganhou tamanho de leitura: em
   caixa-alta miúda ele era decoração, não informação */
.row{display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:6px 20px; padding:16px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .k{font-size:var(--t-sm); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; padding-top:3px}
.row .v{color:var(--ink); font-size:var(--t-lg); line-height:1.6}
/* Símbolo de luto: discreto ao lado das datas, sem virar destaque da ficha. */
.luto{color:var(--ink-faint); margin-right:4px}
.voices{display:flex; flex-direction:column; gap:8px}
.voice{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px}
.voice .naipe{color:var(--accent-ink); font-size:var(--t-md); font-weight:700; white-space:nowrap}
.fgroup{margin-bottom:16px}
.fgroup .flab{font-size:var(--t-md); color:var(--ink-soft); margin-bottom:7px}
.fgroup .atual{color:var(--accent-ink); font-weight:700}
/* acordeão de formações anteriores — o cabeçalho é um alvo de toque cheio */
.facc-wrap{margin-top:12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-2); overflow:hidden}
.facc-wrap>summary{cursor:pointer; padding:14px 16px; font-size:var(--t-base); font-weight:700; color:var(--ink-soft); list-style:none; min-height:var(--tap); display:flex; align-items:center}
.facc-wrap>summary:hover{color:var(--accent-ink)}
.facc-wrap>summary::-webkit-details-marker{display:none}
.facc-wrap>summary::before{content:"▸"; display:inline-block; width:1.2em; color:var(--ink-faint)}
.facc-wrap[open]>summary::before{content:"▾"}
.facc-wrap[open]>summary{border-bottom:1px solid var(--line); color:var(--ink)}
.facc-list{padding:2px 14px 10px}
.facc{border-bottom:1px solid var(--line)}
.facc:last-child{border-bottom:0}
.facc>summary{cursor:pointer; list-style:none; padding:12px 2px; font-size:var(--t-base); display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-height:var(--tap)}
.facc>summary:hover{color:var(--accent-ink)}
.facc>summary::-webkit-details-marker{display:none}
.facc>summary::before{content:"+"; width:1em; color:var(--ink-faint); font-weight:700}
.facc[open]>summary::before{content:"–"}
.facc>summary .per{color:var(--ink-faint); font-size:var(--t-md)}
.facc .voices{padding:0 0 12px 1.5em}
/* mini-galeria de integrantes (foto + nome + naipe) */
.mini-gal{display:flex; flex-wrap:wrap; gap:16px; margin:6px 0 2px}
.facc .mini-gal{padding:2px 0 14px 1.5em}
.mini-p{display:block; width:100px; text-align:center; color:inherit}
.mini-p:hover{text-decoration:none}
.mini-p:hover .mini-nome{color:var(--accent-ink)}
.mini-ph{width:100px; height:100px; border-radius:12px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink-faint)}
.mini-ph img{width:100%; height:100%; object-fit:cover; display:block}
.mini-ph.ph svg{width:42px; height:42px; opacity:.6}
.mini-nome{font-size:var(--t-md); font-weight:700; margin-top:8px; line-height:1.3; color:var(--ink); word-wrap:break-word}
.mini-naipe{font-size:var(--t-sm); color:var(--accent-ink); margin-top:2px}
/* mini-galeria da discografia (capa + título + ano) */
.disco-gal{display:flex; flex-wrap:wrap; gap:18px; margin:6px 0 2px; justify-content:center}
.disco-card{display:block; width:138px; color:inherit}
.disco-card:hover{text-decoration:none}
.disco-card:hover .disco-tit{color:var(--accent-ink)}
.disco-cover{width:138px; height:138px; border-radius:10px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); box-shadow:var(--shadow)}
.disco-cover img{width:100%; height:100%; object-fit:cover; display:block}
.disco-cover.ph svg{width:48px; height:48px; opacity:.55}
.disco-tit{font-size:var(--t-md); font-weight:700; margin-top:8px; line-height:1.3; color:var(--ink)}
.disco-ano{font-size:var(--t-sm); color:var(--ink-faint); margin-top:2px}
.disco{display:flex; flex-direction:column; gap:2px}
.disco .d{display:flex; gap:16px; padding:10px 0; border-bottom:1px dotted var(--line-strong)}
.disco .d:last-child{border-bottom:0}
.disco .y{color:var(--ink-faint); width:60px; flex:none}
/* lista de faixas em colunas: nº · título · duração · streaming */
.faixas{display:flex; flex-direction:column}
.faixas .fx-l{display:grid; grid-template-columns:2.4rem minmax(0,1fr) 4rem auto;
  align-items:center; gap:14px; padding:6px 0; border-bottom:1px dotted var(--line-strong); min-height:var(--tap)}
.faixas .fx-l:last-child{border-bottom:0}
.faixas .fx-n{color:var(--ink-faint); text-align:right; font-size:var(--t-md)}
.faixas .fx-t{min-width:0; overflow-wrap:anywhere; font-size:var(--t-lg)}
.faixas .fx-d{color:var(--ink-faint); font-size:var(--t-md); text-align:right}
.fx-s{display:flex; gap:2px}
/* ícone de streaming é link: alvo de toque cheio, ícone grande dentro */
.st{width:var(--tap); height:var(--tap); flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--ink-faint)}
.st svg{width:22px; height:22px; display:block}
.st-off{visibility:hidden}
a.st:hover{background:var(--accent-bg); color:var(--accent-ink)}
@media (max-width:560px){
  .faixas .fx-l{grid-template-columns:2.2rem minmax(0,1fr) auto; gap:8px}
  .faixas .fx-d{grid-column:3; grid-row:1}
  .fx-s{grid-column:2/4; justify-content:flex-end; margin-top:-2px}
}
.ichips{display:flex; gap:8px; flex-wrap:wrap}
.ichip{font-size:var(--t-md); border:1px solid var(--line-strong); border-radius:999px; padding:7px 14px; color:var(--ink-soft); display:inline-flex; align-items:center; min-height:38px}
a.ichip:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none}
/* textos longos: linha curta (65 caracteres) e entrelinha larga — o par que mais
   pesa na leitura de quem tem vista cansada */
.bio{color:var(--ink); font-size:var(--t-xl); line-height:1.75; margin:0; max-width:65ch}
.src{margin-top:16px; font-size:var(--t-sm); color:var(--ink-faint)}
.links{display:flex; flex-wrap:wrap; gap:4px 18px}
.links a{font-size:var(--t-base); padding:8px 0; display:inline-block}
.letra{white-space:pre-wrap; color:var(--ink); font-size:var(--t-xl); line-height:1.85; max-width:60ch}
/* capa do grupo (capa_grupo): banner largo com crédito sobreposto, não a
   miniatura genérica da .media-strip — ver DECISOES.md */
.cover-banner{position:relative; width:100%; aspect-ratio:8/3; border-radius:var(--radius);
  overflow:hidden; margin:0 0 18px; background:var(--surface-2)}
.cover-banner img{width:100%; height:100%; object-fit:cover; display:block}
/* o crédito é atribuição de proveniência, não conteúdo de leitura: tarja mínima
   de uma linha, colada no canto, no tamanho de exceção --t-credito. Antes
   quebrava em várias linhas e no celular tomava quase toda a altura do banner. */
.cover-banner figcaption{position:absolute; right:7px; bottom:7px; max-width:min(60%,300px);
  padding:1px 6px; border-radius:5px; background:var(--overlay-bg);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:var(--overlay-ink); font-size:var(--t-credito); line-height:1.6; text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.media-strip{display:flex; gap:14px; flex-wrap:wrap; padding:8px 0 16px}
.media-strip figure{margin:0}
.media-strip img{height:190px; border-radius:10px; border:1px solid var(--line-strong); object-fit:cover; background:var(--surface-2); display:block}
.media-strip figcaption{font-size:var(--t-sm); color:var(--ink-faint); margin-top:6px; max-width:270px; line-height:1.45}

.cta{margin-top:44px; background:var(--accent-bg); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent);
  border-radius:var(--radius); padding:clamp(20px,3vw,26px); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta h3{margin:0 0 5px; font-size:var(--t-xl); font-weight:700; color:var(--ink)}
.cta p{margin:0; color:var(--ink-soft); font-size:var(--t-lg); max-width:60ch; line-height:1.6}
/* botões: altura de alvo de toque, texto em tamanho de leitura.
   RELEVO MÉDIO (escolhido pelo curador entre 4 alturas, protótipo em prototipo/botoes.html):
   gradiente vertical, lateral de 2px e sombra curta; no clique o botão desce os 2px e a
   lateral some — a peça encosta no papel. Meia altura da "tecla" de 3px de propósito: o
   único objeto com profundidade que o site já tinha é o interruptor de tema, e o botão
   precisa conversar com ele sem gritar mais alto. */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  border:1px solid var(--ink); color:var(--paper); border-radius:var(--radius-btn);
  background:linear-gradient(180deg, var(--btn-top), var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 0 var(--btn-edge), 0 4px 10px rgba(0,0,0,.16);
  padding:12px 26px; font-family:inherit; font-size:var(--t-base); font-weight:700; cursor:pointer;
  white-space:nowrap; transition:transform .1s ease, box-shadow .1s ease, filter .12s ease}
.btn:hover{filter:brightness(1.12); text-decoration:none; color:var(--paper)}
.btn:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 var(--btn-edge), 0 2px 5px rgba(0,0,0,.14)}
/* o secundário acompanha o relevo: chapado ao lado de um botão com espessura, o par do
   hero lia como duas peças de sistemas diferentes */
.btn-ghost{color:var(--ink); border:1px solid var(--line-strong);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:0 2px 0 var(--line-strong), 0 4px 10px rgba(0,0,0,.08)}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface-2); color:var(--ink); filter:none}
.btn-ghost:active{transform:translateY(2px); box-shadow:0 0 0 var(--line-strong), 0 2px 5px rgba(0,0,0,.10)}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:var(--t-md)}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend .dot{width:11px; height:11px; border-radius:50%}
/* o rodapé fica fora de .wrap, então precisa do próprio recuo lateral */
footer.foot{color:var(--ink-soft); font-size:var(--t-md); padding:20px var(--gut) 26px; text-align:center; border-top:1px solid var(--line); margin-top:auto; text-wrap:balance}

/* rótulo acima do valor: a coluna fixa espreme demais o conteúdo antes disso */
@media (max-width:760px){ .row{grid-template-columns:minmax(0,1fr); gap:5px; padding:14px 0} }
@media (max-width:560px){
  .cta{flex-direction:column; align-items:stretch}
  .cta .btn{width:100%}
  .media-strip img{height:120px}
  .media-strip figcaption{max-width:160px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ressalva de proveniência dentro de uma formação */
.fnota{font-size:var(--t-md); line-height:1.6; margin:4px 0 10px; padding-left:12px;
       border-left:3px solid var(--line-strong); color:var(--ink-soft)}

/* versões brasileiras irmãs (mesmo original internacional) */
.irmas{margin-top:12px; padding:12px 14px; border:1px solid var(--line-strong);
       border-radius:9px; background:var(--surface-2)}
.irmas-lab{font-size:var(--t-sm); letter-spacing:.04em; text-transform:uppercase;
           color:var(--ink-soft); font-weight:700; margin-bottom:7px}

/* ============================================================
   NAVEGAÇÃO GLOBAL, LOGO, HOME (capa) e LISTAS-ÍNDICE
   ============================================================ */

/* defs do logo ficam num svg escondido, injetado uma vez por página */
.logo-defs{position:absolute; width:0; height:0; overflow:hidden}

/* marca + menu no topo */
/* as duas margens auto (aqui e em .nav-actions) repartem o espaço livre em
   partes iguais: o menu fica com o mesmo respiro dos dois lados, em vez de
   colado na marca como ficava com justify-content:space-between */
.brandmark{display:flex; align-items:center; gap:10px; padding:4px 0; margin-right:auto}
.brandmark:hover{text-decoration:none}
.logo-sm{width:28px; height:36px; flex:none}
.nav .home{font-weight:700; font-size:var(--t-lg); color:var(--ink); letter-spacing:-.01em; white-space:nowrap}
.nav-menu{display:flex; align-items:center; gap:6px}
.nav-menu a{color:var(--ink-soft); font-size:var(--t-base); font-weight:700; letter-spacing:.01em;
  padding:10px 12px; white-space:nowrap; border-radius:var(--radius-btn);
  display:inline-flex; align-items:center; min-height:var(--tap); border-bottom:3px solid transparent}
.nav-menu a:hover{color:var(--ink); background:var(--surface); text-decoration:none}
/* [aria-current] sem valor: pega tanto "page" (a página exata) quanto "true" (a seção
   que a contém — Acervo, quando se está numa ficha). Sem isso o destaque sumiria em
   ~840 das 858 páginas, e a falha seria silenciosa. */
.nav-menu a[aria-current]{color:var(--ink); border-bottom-color:var(--accent); background:var(--surface)}
.nav-actions{display:flex; align-items:center; gap:10px; margin-left:auto}
/* o botão do menu leva a palavra "Menu" junto do desenho: ícone sozinho não é
   reconhecido por boa parte do nosso público */
.menu-btn{display:none; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--nav-line-strong); background:var(--surface); color:var(--ink);
  border-radius:var(--radius-btn); padding:10px 16px; min-height:var(--tap); cursor:pointer;
  font-family:inherit; font-size:var(--t-base); font-weight:700}
.menu-btn svg{width:22px; height:22px; flex:none}
.menu-btn:hover{color:var(--accent-ink); border-color:var(--accent)}
.menu-btn[aria-expanded="true"]{color:var(--on-accent); background:var(--accent-strong); border-color:var(--accent-strong)}
/* o X de fechar só existe com o painel empilhado (≤820px); na barra larga o #navMenu
   é a própria fileira de links e não há nada para fechar */
.menu-x{display:none}

/* ABA — na barra larga o menu vai para a DIREITA, encostado nas ações, e a página atual
   vira uma aba: pega o fundo do papel, fecha o contorno em três lados e cobre a linha de
   baixo da barra, como se a barra e o conteúdo fossem a mesma folha.
   Escolhida pelo curador entre 5 barras (protótipo em prototipo/menu-topo.html).

   Sem fio de acento no topo da aba — pedido explícito. A distinção não fica só na cor:
   a FORMA (cantos arredondados só em cima, contorno em três lados, ausência da linha
   inferior) é o sinal não-cromático, e o aria-current segue anunciando para quem não vê.

   Tudo dentro de min-width:821px, o complemento exato do bloco de celular abaixo: o
   painel empilhado não muda em nada. */
@media (min-width:821px){
  /* a aba precisa alcançar a base da barra, então o recuo de baixo sai do .nav-in e vai
     para os vizinhos — a altura total da barra fica idêntica à de antes */
  .nav-in{padding-bottom:0}
  .brandmark{padding-bottom:9px}
  .nav-actions{margin-left:0; padding-bottom:9px}
  .nav-menu{gap:4px; align-self:stretch; align-items:stretch}
  .nav-menu a{border-bottom:0; border-radius:10px 10px 0 0; padding:12px 16px 11px;
    margin-bottom:-1px; /* cobre a linha inferior da barra */
    transition:background .16s ease, color .16s ease}
  .nav-menu a:hover{background:color-mix(in srgb, var(--paper) 55%, transparent); color:var(--ink)}
  .nav-menu a[aria-current]{background:var(--paper); color:var(--ink); border-bottom:0;
    box-shadow:inset 0 1px 0 var(--nav-line), inset 1px 0 0 var(--nav-line),
               inset -1px 0 0 var(--nav-line)}
}
/* 820px, não 1020px: o limite antigo foi calibrado para os 6 itens do menu antigo.
   Com 3 itens curtos a barra cabe folgada, e manter 1020 faria o hambúrguer aparecer
   em tablet sem necessidade. */
@media (max-width:820px){
  .menu-btn{display:inline-flex}
  .nav-menu{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column;
    align-items:stretch; gap:0; background:var(--nav-bg); border-bottom:1px solid var(--nav-line);
    padding:6px var(--gut) 12px; box-shadow:var(--shadow)}
  .nav-menu.open{display:flex}
  /* véu de foco: com o painel aberto, a PÁGINA atrás recebe um desfoque bem leve.
     Não é enfeite — no teste de navegação o leitor abriu o menu e continuou
     desorientado, com o conteúdo inteiro competindo por atenção atrás de três itens.

     Mora no ::after do BODY, não do painel. Tentar ancorá-lo dentro do .nav não
     funciona: o .nav tem backdrop-filter, e backdrop-filter cria containing block para
     descendentes position:fixed — o inset:0 encolhia para a caixa da barra e o desfoque
     não alcançava a página. O body não tem filter nem transform, então o fixed cobre a
     viewport de verdade.

     z:20 é a faixa entre o conteúdo (auto) e o .nav (30): desfoca a página, deixa barra
     e painel nítidos por cima. Clicar no véu fecha o menu — o alvo é o body, que o JS
     já trata como "fora do menu". Sem suporte a backdrop-filter resta o véu de 16%,
     então degrada limpo. */
  body:has(.nav-menu.open)::after{content:""; position:fixed; inset:0; z-index:20;
    background:rgba(0,0,0,.16);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
  .nav-menu a{padding:15px 6px; border-radius:0; border-bottom:1px solid var(--nav-line)}
  /* barra de acento à ESQUERDA, não embaixo: no painel empilhado a borda inferior de
     acento se confunde com a linha que separa um item do outro, e o leitor abre o menu
     sem saber onde está (teste de navegação, jul/2026). A barra lateral não tem com o
     que ser confundida. O padding compensa a barra para o texto não pular. */
  .nav-menu a[aria-current]{background:var(--surface); border-bottom-color:var(--nav-line);
    border-left:4px solid var(--accent); padding-left:12px}
  /* :last-of-type, não :last-child — o último filho do painel agora é o botão do X,
     e com :last-child o último link voltaria a ganhar a linha divisória sobrando */
  .nav-menu a:last-of-type{border-bottom:0}

  /* X DE FECHAR — a saída visível do menu.
     Fica FORA do painel, pendurado no rodapé dele (top:100% do #navMenu, que é o
     containing block absoluto), sobre a página desfocada: é o único jeito de acertar
     a posição sem conhecer a altura do painel, que muda com o número de itens.
     Está dentro do .nav (z:30), então aparece nítido por cima do véu (z:20).
     Redondo de propósito — é a única forma no site que não é nem pílula-de-tag nem
     botão-retangular, e essa estranheza é o que faz o olho parar nele.
     Bolha CLARA com anel e traço de acento (não bolha cheia de acento): a bolha cheia
     lia como uma mancha vermelha pendurada na barra. O anel de 3px é o que garante o
     recorte sobre uma foto clara desfocada, papel que a cor cheia fazia sozinha. */
  .menu-x{display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:100%; left:50%; margin-top:16px;
    width:58px; height:58px; padding:0; border-radius:50%;
    border:3px solid var(--accent-strong); background:var(--surface); color:var(--accent-strong);
    cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.30);
    animation:menu-x-entra .18s ease-out both}
  .menu-x svg{width:28px; height:28px}
  /* o :focus-visible global impõe border-radius:4px e cortaria os cantos da bolha */
  .menu-x:focus-visible{border-radius:50%}
  @keyframes menu-x-entra{
    from{opacity:0; transform:translate(-50%,-8px) scale(.9)}
    to{opacity:1; transform:translate(-50%,0) scale(1)}}
  @media (prefers-reduced-motion:reduce){
    .menu-x{animation:none; transform:translate(-50%,0)}}
}

/* no celular a barra é UMA LINHA SÓ, com marca, "Menu" e interruptor inteiros.
   Cada folga abaixo foi cortada de um lugar que não custa clareza — a única forma de
   caber sem sacrificar nenhum dos três. Orçamento em 360px: 332px úteis (recuo 14+14),
   menos 144 das ações e 10 de gap, sobram 178 para a marca — 38 de símbolo e ~140 para
   o nome, que ocupa ~122. Ao mexer aqui, refazer essa conta. */
@media (max-width:460px){
  .theme-toggle{--tt-w:54px; --tt-h:32px; --tt-t:24px; --tt-x:24px}
  /* O DESENHO do hambúrguer sai; fica a PALAVRA. Não é exceção à regra do "ícone nunca
     sozinho" — é a mesma regra levada ao fim: a palavra é a parte que comunica, o
     desenho é a que enfeita. E o teste de navegação (jul/2026) pegou o desenho falhando
     justamente como pista: o leitor levou muito tempo até reconhecer aquele botão.
     São os ~27px que faltavam para o nome da marca caber numa linha. */
  .menu-btn{padding:10px 14px}
  .menu-btn svg{display:none}
  .nav-actions{gap:8px; flex:none}
  /* recuo lateral do header menor que o do conteúdo: a barra é uma fileira de controles,
     não texto corrido — não precisa da margem de leitura que o --gut dá ao conteúdo.
     nowrap é a trava: se algum dia faltar espaço, quem cede é o nome (que quebra ao lado
     do símbolo, dentro da altura dele) e nunca a barra, que já quebrou em duas linhas
     uma vez e foi rejeitada. .nav-actions{flex:none} impede que as ações encolham no
     lugar do nome. */
  .nav-in{gap:6px 10px; padding-inline:14px; flex-wrap:nowrap}
  /* O nome NÃO some mais aqui. Antes ele era escondido, com o argumento de que a regra
     do "ícone nunca sozinho" valeria só para controles de ação e que a marca já seria
     reconhecida como "voltar ao início". O teste desmentiu isso: no celular o leitor não
     identificou o símbolo mudo como link e ficou preso na página. Não voltar a escondê-lo.
     Sem largura fixa: o brandmark é flex item e tem o min-content ("Quarteto") como piso,
     então em telas abaixo de 340px o nome quebra sozinho em vez de transbordar. */
  .brandmark{gap:8px}
  .nav .home{font-size:var(--t-sm); line-height:1.15; white-space:normal}
  .logo-sm{width:30px; height:39px}
}

/* -------- HOME (capa) -------- */
.home-hero{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,5vw,56px);
  align-items:center; padding-block:clamp(28px,7vw,40px) clamp(18px,3vw,28px)}
/* No celular as duas colunas empilham (título+ação, DEPOIS placa+data) — a soma das
   duas alturas é que empurrava o CTA para fora da primeira dobra, exigindo rolagem
   antes mesmo de ver o resto da home. A placa (o maior bloco do stack, puramente
   decorativo) encolhe só aqui; o desktop não muda porque lá as colunas ficam
   lado a lado e a soma nunca acontece. */
@media (max-width:900px){
  .home-hero{grid-template-columns:1fr; gap:28px}
  .plate{padding:clamp(16px,5vw,26px)}
  .plate .logo-lg{width:min(150px,48%)}
  .plate-col .src{margin-top:8px}
}
.home-hero .eyebrow{display:inline-flex; align-items:center; gap:8px}
.home-hero .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.home-hero h1.brand{font-size:clamp(1.75rem,5vw,2.75rem); line-height:1.15; margin:.3em 0 .26em}
.lede{color:var(--ink-soft); margin:0 0 22px; max-width:60ch;
  font-size:clamp(1rem,1.5vw,1.125rem); line-height:1.65}
.actions{display:flex; gap:14px; flex-wrap:wrap}
/* no celular os dois botões dividem a mesma linha: em vez de encolher o texto
   (o piso de tamanho vale também para botão), deixamos o rótulo quebrar em duas
   linhas dentro de meia largura. */
@media (max-width:560px){
  .home-hero .actions{flex-wrap:nowrap; gap:10px}
  .home-hero .actions .btn{flex:1 1 0; min-width:0; padding-inline:14px;
    white-space:normal; text-align:center; text-wrap:balance; line-height:1.25}
}

/* a data da última atualização mora sob a PLACA, não sob os botões: ali ela vira a
   legenda da peça — o acervo é o objeto, a data é a etiqueta dele. Debaixo da dupla de
   botões ela competia com a chamada para ação, sendo a única linha que ninguém clica.
   Fica FORA da placa de propósito: a placa tem cores fixas claras nos dois temas, e o
   --ink-faint do modo escuro é claro — dentro dela o texto sumiria. */
.plate-col{display:flex; flex-direction:column}
.plate-col .src{margin-top:12px; text-align:center; text-wrap:balance}

/* placa que apresenta o logo — sempre legível, no claro e no escuro */
.plate{background:linear-gradient(155deg,#FAF8F4 0%,#EFEBE2 55%,#E4DFD4 100%);
  border:1px solid #C9C2B4; border-radius:20px; box-shadow:var(--shadow);
  padding:clamp(26px,4vw,40px); display:flex; justify-content:center}
.plate .logo-lg{width:min(210px,60%); height:auto; display:block; color:#241F18}

/* tiles (4 portas de entrada) — monocromáticos */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:860px){ .tiles{grid-template-columns:repeat(2,1fr)} }
.tile{display:block; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:22px; color:inherit; box-shadow:var(--shadow);
  transition:border-color .16s ease, background .16s ease}
.tile:hover{border-color:var(--accent); background:var(--surface-2); text-decoration:none}
.tile-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.tile .num{font-size:2rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1}
.tile .lab{margin-top:8px; font-size:var(--t-lg); font-weight:700; color:var(--ink-soft)}
.tile-ic{flex:none; width:28px; height:28px; color:var(--ink-faint); transition:color .16s ease}
.tile:hover .tile-ic{color:var(--accent-ink)}

/* cta sóbrio (só um fio de acento à esquerda) */
/* sem margin-top próprio: o padding-block do <main> já dá o respiro acima — as duas
   regras somadas abriam ~128px entre o hero e este bloco */
.home-cta{background:var(--surface);
  border:1px solid var(--line-strong); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:clamp(20px,3vw,28px);
  display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.home-cta h3{margin:0 0 5px; font-size:var(--t-xl); font-weight:700; color:var(--ink)}
.home-cta p{margin:0; color:var(--ink-soft); font-size:var(--t-lg); max-width:60ch; line-height:1.6}
@media (max-width:560px){ .home-cta{flex-direction:column; align-items:stretch} .home-cta .btn{width:100%} }

/* SELO "ACERVO VIVO" — carimbo do bloco de contribuição da home.
   Escolhido entre 5 tratamentos (prototipo/selo-acervo-vivo.html, rodada 3): dois fios
   concêntricos, sem picotado, o espaço que o tracejado ocuparia virou letra maior.

   As medidas do desenho ficam no viewBox 200 do próprio SVG (ver SELO_ACERVO_VIVO em
   gerar.py), não aqui: é um objeto desenhado, e escalar o traço junto com a fonte do
   leitor desfaria a razão entre letra, coroa e miolo — que é justamente o que faz o
   carimbo se ler. O que o CSS controla é só o tamanho da peça na página. */
.com-selo .cta-txt{display:flex; gap:22px; align-items:center; flex:1 1 340px; min-width:0}
.selo-vivo{flex:none; width:112px; height:112px; display:block; color:var(--accent-ink)}
.selo-fundo{fill:var(--surface)}
.selo-vivo text{font-family:var(--font-sans); font-weight:700; fill:currentColor}
.selo-cima{font-size:28px; letter-spacing:1.4px}
.selo-baixo{font-size:18px; letter-spacing:1.1px}
/* no celular o bloco já empilha; o selo vai para cima do texto e encolhe um pouco,
   mas não abaixo de 96px — daí para baixo "QUARTETO BRASIL" deixa de se decifrar */
@media (max-width:560px){
  .com-selo .cta-txt{flex-direction:column; align-items:flex-start; gap:16px}
  .selo-vivo{width:96px; height:96px}
}

/* -------- LISTAS-ÍNDICE (músicas, pessoas) -------- */
.idx-main{padding-block:10px 64px}


/* PESSOAS — grade de cartões */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:16px}
.pcard{display:flex; gap:16px; align-items:center; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:16px 18px; color:inherit;
  box-shadow:var(--shadow); transition:border-color .15s, background .15s; min-height:var(--tap)}
.pcard:hover{border-color:var(--accent); background:var(--surface-2); text-decoration:none}
/* avatar-monograma em tom neutro — placeholder até haver foto (aceita <img>) */
.pav{flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:var(--t-lg); letter-spacing:.02em;
  color:var(--accent-ink); background:var(--accent-bg);
  border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent); overflow:hidden}
.pav img{width:100%; height:100%; object-fit:cover}
.pinfo{display:flex; flex-direction:column; gap:3px; min-width:0}
.pname{font-weight:700; color:var(--ink); font-size:var(--t-lg); line-height:1.25}
.prole{color:var(--ink-soft); font-size:var(--t-md); text-transform:capitalize}
.pgrp{color:var(--ink-faint); font-size:var(--t-md)}

/* MÚSICAS — blocos alfabéticos + índice que filtra por letra ("teclado").
   As ~24 letras não cabem em uma linha com alvo de 44px, e não adianta insistir:
   antes elas quebravam com flex-wrap, em caixas de larguras diferentes, e a
   segunda linha começava num ponto arbitrário — era isso que parecia bagunça.
   Agora a quebra é DELIBERADA: grade de colunas iguais, cada letra uma tecla,
   segunda linha empilhada coluna sobre coluna. Duas linhas alinhadas leem como
   um bloco só. O número de colunas é fixo (12/8/6) porque todos dividem 24 sem
   deixar buraco; se o acervo ganhar letras novas, é só rever aqui.
   O rótulo saiu de perto das letras e virou legenda em linha própria — colado
   nelas, sem hierarquia, se confundia com o conteúdo da página.
   Não é grudado no topo, de propósito: fixo comeria um quinto da tela do
   celular. Clicar numa letra leva direto ao cabeçalho daquela seção — o leitor
   pediu o resultado, não o topo da página (ver MUSICAS_JS). */
/* o cartão vai DENTRO de um .wrap, nunca é o próprio .wrap: o recuo lateral do
   .wrap é padding, então um cartão com borda no lugar dele encostaria a moldura
   na borda da tela em vez de acompanhar a coluna do resto da página */
.rua{margin-top:20px; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:14px 16px 16px; box-shadow:var(--shadow)}
.rua-topo{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.rua-lab{font-size:var(--t-md); font-weight:700; color:var(--ink-soft)}
/* "Ver todas" é botão de ação, não tecla: fica fora da grade e leva --radius-btn */
.rua-todas{font-size:var(--t-sm); font-weight:700; color:var(--ink-soft); flex:none;
  border:1px solid var(--line-strong); border-radius:var(--radius-btn); padding:0 14px;
  min-height:var(--tap); display:inline-grid; place-items:center}
.rua-todas:hover{background:var(--surface-2); color:var(--accent-ink); text-decoration:none}
.rua-todas.active{background:var(--accent-strong); color:var(--on-accent); border-color:var(--accent-strong)}
.rua-grade{display:grid; grid-template-columns:repeat(12,1fr); gap:6px}
.rua .tecla{min-height:var(--tap); display:grid; place-items:center; line-height:1.1;
  font-size:var(--t-base); font-weight:700; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-btn)}
.rua .tecla:hover{background:var(--accent-bg); border-color:var(--accent-strong);
  color:var(--accent-ink); text-decoration:none}
.rua .tecla.active{background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent)}
@media (max-width:900px){ .rua-grade{grid-template-columns:repeat(8,1fr)} }
@media (max-width:520px){ .rua-grade{grid-template-columns:repeat(6,1fr)}
  .rua-topo{flex-direction:column; align-items:stretch; gap:8px} }
.msec{margin-top:44px}
.msec:first-of-type{margin-top:20px}
.msechead{display:flex; align-items:center; gap:16px; margin:0 0 12px}
.msechead .l{font-weight:700; font-size:1.5rem; color:var(--accent-ink); line-height:1; flex:none}
.msechead .rule{flex:1; height:1px; background:var(--line)}
.msechead .ct{font-weight:700; font-size:var(--t-sm); color:var(--ink-faint); flex:none}
.mrows{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr)); gap:0 32px}
/* cada linha é um link: altura de alvo de toque e separador visível */
.mrow{display:flex; align-items:center; gap:16px; padding:12px 8px; border-top:1px solid var(--line);
  color:inherit; min-height:var(--tap); border-radius:6px}
.mrow:hover{text-decoration:none; background:var(--surface-2)}
.mrow:hover .mtit{color:var(--accent-ink)}
.mtit{font-weight:700; color:var(--ink); font-size:var(--t-lg);
  min-width:0; display:flex; align-items:center; gap:9px}
.cover{font-size:var(--t-xs); font-weight:700; color:var(--accent-ink);
  background:var(--accent-bg); border-radius:999px; padding:2px 9px; flex:none}
.mgrp{font-size:var(--t-md); color:var(--ink-soft); margin-left:auto;
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; flex:none}
@media (max-width:620px){ .mgrp{max-width:44%} }

/* "Voltar ao topo" — a lista de músicas é longa demais para se subir no dedo.
   Retangular, nunca pílula: é botão de ação (ver DECISOES.md). Só entra em cena
   quando o leitor faz o gesto de subir (ver MUSICAS_JS); fora disso é
   `visibility:hidden`, que o tira do foco do teclado e do leitor de tela em vez de
   deixar um alvo invisível na frente do conteúdo. Abaixo do menu do celular
   (z-index 20) para não flutuar por cima do véu quando ele abre. */
.aotopo{position:fixed; right:clamp(12px,3vw,24px); bottom:clamp(12px,3vw,24px); z-index:15;
  display:inline-flex; align-items:center; gap:8px; padding:0 16px; min-height:var(--tap);
  font-family:inherit; font-size:var(--t-sm); font-weight:700; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-btn); box-shadow:var(--shadow); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s, transform .18s, visibility .18s}
.aotopo.on{opacity:1; visibility:visible; transform:none}
.aotopo:hover{background:var(--surface-2); color:var(--accent-ink); border-color:var(--accent-strong)}
.aotopo svg{width:18px; height:18px; flex:none}

/* -------- CONTRIBUIR (formulário) -------- */
/* página de formulário: um painel focado e centralizado, não um cartão largo com a
   coluna encostada à esquerda (sem breadcrumb — a página é um destino, não um nó da trilha). */
.contrib{max-width:800px; margin-inline:auto}
.contrib-intro{margin:0 0 24px; color:var(--ink); font-size:var(--t-xl); line-height:1.7; max-width:65ch}
.contrib-intro b{color:var(--ink); font-weight:700}
.cref{font-size:var(--t-lg); color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:10px; padding:14px 18px}
.cref b{color:var(--ink)}
.cform{display:flex; flex-direction:column; gap:24px; max-width:none}
.fld{display:flex; flex-direction:column; gap:9px}
.flab{font-size:var(--t-lg); font-weight:700; color:var(--ink); letter-spacing:.01em;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap}
/* etiqueta discreta obrigatório/opcional no lugar do "(opcional)" no meio da frase */
.opt,.req-tag{font-weight:700; font-size:var(--t-xs); letter-spacing:.04em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:5px; padding:2px 8px; color:var(--ink-faint)}
.req-tag{color:var(--accent-ink); border-color:var(--accent)}
/* campos grandes: alvo fácil de acertar e texto que não obriga a aproximar do rosto */
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{
  font-family:inherit; font-size:var(--t-lg); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line-strong); border-radius:10px;
  padding:14px 16px; min-height:54px; width:100%; min-width:0; appearance:none; -webkit-appearance:none}
.cform textarea{resize:vertical; line-height:1.65; min-height:150px}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:3px solid var(--focus); outline-offset:1px; border-color:transparent}
.cform ::placeholder{color:var(--ink-faint); opacity:1}
/* seletor com seta própria, coerente com os filtros do acervo */
.selwrap{position:relative; display:flex}
.selwrap select{padding-right:46px; cursor:pointer}
.sel-ic{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  color:var(--ink-soft); pointer-events:none}
/* upload: área clicável estilizada em vez do input de arquivo nativo (que transborda no celular) */
.drop{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
  border:2px dashed var(--line-strong); border-radius:12px; background:var(--surface-2);
  padding:26px 18px; cursor:pointer; transition:border-color .15s ease, background .15s ease}
.drop:hover{border-color:var(--accent); background:var(--surface)}
.drop:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.drop input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.drop-ic{width:30px; height:30px; color:var(--ink-faint)}
.drop-t{font-size:var(--t-lg); color:var(--ink-soft)}
.drop-t b{color:var(--accent-ink); font-weight:700}
.drop-h{font-size:var(--t-md); color:var(--ink-faint)}
.drop.has-file{border-style:solid; border-color:var(--accent); background:var(--accent-bg)}
.drop.has-file .drop-ic{color:var(--accent-ink)}
/* lista das imagens escolhidas: miniatura + nome + tamanho + remover */
.drop-list{display:flex; flex-direction:column; gap:9px}
.drop-list:not(:empty){margin-top:12px}
.dl-item{display:flex; align-items:center; gap:12px; padding:9px;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--surface)}
.dl-thumb{flex:0 0 auto; width:52px; height:52px; border-radius:8px; overflow:hidden;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center}
.dl-thumb img{width:100%; height:100%; object-fit:cover}
.dl-meta{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.dl-name{font-size:var(--t-md); font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dl-size{font-size:var(--t-sm); color:var(--ink-faint)}
.dl-rm{flex:0 0 auto; width:var(--tap); height:var(--tap); border-radius:var(--radius-btn);
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-soft);
  font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.dl-rm:hover{background:var(--accent-bg); color:var(--accent-ink); border-color:var(--accent)}
.drop-msg{font-size:var(--t-md); color:var(--accent-ink)}
.drop-msg:not(:empty){margin-top:10px}
/* divisor discreto entre a contribuição e os dados de quem envia */
.fdiv{display:flex; align-items:center; gap:12px; font-size:var(--t-sm);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:6px 0 0}
.fdiv::after{content:""; flex:1; height:1px; background:var(--line)}
.fld-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:620px){ .fld-2{grid-template-columns:1fr} }
/* consentimento: cartão inteiro clicável, marcador maior — a linha mais importante do formulário */
.fcheck{display:flex; gap:15px; align-items:flex-start; font-size:var(--t-lg); color:var(--ink); line-height:1.6;
  background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:12px; padding:17px 18px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease}
.fcheck:hover{border-color:var(--accent); background:var(--surface)}
.fcheck input{margin:2px 0 0; accent-color:var(--accent-strong); flex:none; width:26px; height:26px; cursor:pointer}
.fcheck b{color:var(--ink); font-weight:700}
/* ação primária à direita; a nota vai para a esquerda */
.fsend{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end; padding-top:6px}
.fnote{font-size:var(--t-md); color:var(--ink-faint); margin-right:auto}
@media (max-width:620px){
  .fsend{flex-direction:column-reverse; align-items:stretch}
  .fsend .btn{width:100%}
  .fnote{margin-right:0; text-align:center}
}
/* isca anti-robô: fora da tela, mas sem display:none (robô ignora o que está escondido assim) */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* caixas de retorno */
.cx{border-radius:12px; padding:18px 20px; margin:16px 0 4px; font-size:var(--t-lg); line-height:1.65}
.cx h3{margin:0 0 8px; font-size:var(--t-xl); font-weight:700; color:var(--ink)}
.cx p{margin:0 0 12px; color:var(--ink-soft)}
.cx p:last-child{margin-bottom:0}
.cx ul{margin:8px 0 0; padding-left:22px; color:var(--ink-soft)}
.cx li{margin-bottom:5px}
.cx-ok{background:var(--surface-2); border:1px solid var(--line-strong); border-left:4px solid var(--accent)}
.cx-erro{background:var(--accent-bg); border:1px solid color-mix(in srgb,var(--accent) 44%, transparent); color:var(--ink)}
.cx .proto{font-size:var(--t-md); color:var(--ink-faint)}

/* texto só para leitor de tela — some da tela sem sumir da árvore de acessibilidade.
   Usado no aviso "(abre em nova aba)" dos links externos. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ================= BOLETIM (camada editorial — Fase 2) =================
   O acervo é obra de referência: fichas, tabelas, dados. O boletim é o
   contrário — texto corrido, escrito por gente, com data. Por isso ele tem
   medida de leitura própria (65ch) em vez de ocupar a largura do .wrap: a
   linha longa demais é o jeito mais rápido de cansar o leitor idoso que este
   site tem como público. */
.bol-cards{display:grid; gap:16px}
/* o cartão inteiro é o link (título, chamada e etiquetas dentro dele), para o
   alvo de toque ser a caixa toda e não só a linha do título */
.bol-card{display:block; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--radius);
  padding:20px 22px; color:inherit; box-shadow:var(--shadow)}
.bol-card:hover{border-color:var(--accent); text-decoration:none}
.bol-card:hover .bol-tit{color:var(--accent-ink)}
.bol-card .cab{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.bol-tit{margin:0 0 4px; font-size:1.16rem; line-height:1.25; font-weight:700; letter-spacing:-.01em}
.bol-cham{margin:0; color:var(--ink-soft); font-size:var(--t-md); max-width:62ch}
.selo-ed{display:inline-flex; align-items:center; gap:7px; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.bol-card .data, .bol-artigo .data{font-size:var(--t-sm); color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
/* etiqueta de ficha: 999px porque é CATEGORIA, não botão — a pílula deste projeto
   é só para tag. Se um dia virar clicável, tem que passar a --radius-btn. */
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.tag-ficha{font-size:var(--t-xs); color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:3px 11px}

/* ---- a edição ---- */
.bol-artigo{padding-top:12px}
.bol-cabeca{border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:26px}
.bol-cabeca h1{font-size:clamp(1.5rem,4.4vw,2.1rem); line-height:1.15; margin:8px 0 10px;
  letter-spacing:-.015em; text-wrap:balance}
.bol-cabeca .bol-cham{font-size:var(--t-xl); color:var(--ink-soft); max-width:60ch; margin:0 0 10px}
.bol-corpo{max-width:65ch; font-size:var(--t-xl); line-height:1.7}
.bol-corpo h2{font-size:1.28rem; margin:32px 0 8px; letter-spacing:-.01em}
.bol-corpo p{margin:0 0 16px}
.bol-corpo a{color:var(--accent-ink); text-underline-offset:3px}
/* destaques: lista com fio, na largura do texto — a ponte de volta para o acervo */
.dest-lista{margin:10px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.dest-lista li{border-bottom:1px solid var(--line); padding:14px 0}
.dest-lista a{font-weight:700; color:var(--ink); text-decoration:none}
.dest-lista a:hover{color:var(--accent-ink); text-decoration:underline}
.dest-lista .k{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-right:8px}
.dest-lista p{margin:3px 0 0; font-size:var(--t-md); color:var(--ink-soft); max-width:62ch}

/* ---- convite do canal do WhatsApp (rodapé do índice e de cada edição) ---- */
.bol-convite{display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:18px 22px; margin:36px 0 10px}
.bol-convite p{margin:0; color:var(--ink-soft); font-size:var(--t-md); max-width:54ch}
.bol-convite b{color:var(--ink)}
@media (max-width:560px){
  .bol-convite{flex-direction:column; align-items:stretch}
  .bol-convite .btn{width:100%}
}

/* ---- chamada na home: mora sob a placa, junto da data de atualização ----
   Escolhida por caber onde já havia altura reservada: a home foi encolhida em
   2026-07-28 para o bloco de contribuição alcançar a primeira dobra no celular,
   e uma tira larga aqui desfaria aquilo. */
.bol-linhote{display:inline-flex; align-items:center; gap:10px; margin-top:10px;
  padding:9px 14px; min-height:var(--tap); border:1px solid var(--line-strong);
  border-radius:var(--radius-btn); background:var(--surface); color:var(--ink);
  font-size:var(--t-sm); text-align:left}
.bol-linhote:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none}
.bol-linhote .seta{color:var(--accent-ink); flex:none}

/* ---- vídeo da edição: miniatura agora, player só no clique ----
   Nada de <iframe> carregado de cara: o player do YouTube traz ~1 MB de script de
   terceiro para uma página que pesa dezenas de kB, e o leitor deste site está no
   celular. A caixa já nasce com a proporção 16:9 reservada, para o texto não pular
   quando a miniatura (ou depois o player) terminar de carregar. */
.bol-video{margin:0 0 30px; max-width:65ch}
.v-rot{margin:0 0 8px; font-size:var(--t-sm); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint)}
.v-min{font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-faint)}
.v-min::before{content:"· "}
.v-capa{display:block; position:relative; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; background:var(--surface-2); border:1px solid var(--line)}
.v-capa img{width:100%; height:100%; object-fit:cover; display:block}
.v-capa:hover .v-play-bg{fill:#f00}
.v-play{position:absolute; inset:0; display:grid; place-items:center}
.v-play svg{width:68px; height:48px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.v-play-bg{fill:rgba(20,16,10,.72); transition:fill .12s ease}
.bol-video iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius);
  display:block; background:#000}
.bol-video.sem-player{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.bol-video.sem-player .v-rot{margin:0}
/* marca no card do índice: promessa de que ali dá para assistir em vez de ler */
.v-marca{font-size:var(--t-xs); font-weight:700; color:var(--accent-ink);
  background:var(--accent-bg); border-radius:999px; padding:2px 10px; white-space:nowrap}