/* =========================================================================
   components.css — botões, cards, formulários, acordeão, header e rodapé
   Depende de tokens.css e base.css. Carregar por último.
   ========================================================================= */

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 3rem;                 /* 48px no celular */
  padding: 0.875rem 1.75rem;        /* 14px 28px */
  border: 2px solid transparent;
  border-radius: var(--raio-md);    /* nunca pill em ação de texto (§6) */
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao-rapida),
              border-color var(--transicao-rapida),
              color var(--transicao-rapida),
              transform var(--transicao-rapida);
}

.botao:hover  { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao[disabled],
.botao[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.botao__icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

@media (min-width: 64em) {
  .botao { min-height: var(--alvo-toque); }   /* 44px no desktop */
}

/* Primário — só "Doe agora" e envio de formulário. Um por seção (§7).
   O rótulo branco sobre --cor-primaria fica em 3,8:1: é a exceção E01,
   registrada e aprovada em design.md §3.1. Não replique em outro lugar. */
.botao--primario {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

.botao--primario:hover,
.botao--primario:focus-visible {
  background: var(--cor-primaria-escura);   /* 5,2:1 — passa em AA */
  color: var(--cor-branco);
}

/* Secundário — ação alternativa ao lado do primário. */
.botao--secundario {
  background: transparent;
  border-color: var(--texto-forte);
  color: var(--texto-forte);
}

.botao--secundario:hover,
.botao--secundario:focus-visible {
  background: var(--texto-forte);
  color: var(--cor-clara);
}

/* Todo contexto de fundo escuro inverte o botão secundário. O `.hero` entra
   aqui desde que virou vídeo: sem ele, a borda e o rótulo ficavam em
   `--texto-forte` sobre azul-escuro, algo em torno de 1,1:1. */
.secao--escura .botao--secundario,
.faixa-cta .botao--secundario,
.hero .botao--secundario {
  border-color: var(--texto-claro);
  color: var(--texto-claro);
}

.secao--escura .botao--secundario:hover,
.secao--escura .botao--secundario:focus-visible,
.faixa-cta .botao--secundario:hover,
.faixa-cta .botao--secundario:focus-visible,
.hero .botao--secundario:hover,
.hero .botao--secundario:focus-visible {
  background: var(--texto-claro);
  color: var(--cor-escura);
}

/* A faixa clara é a exceção dentro da exceção: fundo claro, então volta ao
   botão secundário escuro. */
.faixa-cta--clara .botao--secundario {
  border-color: var(--texto-forte);
  color: var(--texto-forte);
}

.faixa-cta--clara .botao--secundario:hover,
.faixa-cta--clara .botao--secundario:focus-visible {
  background: var(--texto-forte);
  color: var(--cor-clara);
}

/* Terciário — navegação dentro de card, "veja mais". */
/* Mesmo sem fundo, continua sendo alvo de toque: 44px de altura mínima,
   com padding só na vertical para o texto não deslocar (§11 do site.md). */
.botao--terciario {
  min-height: var(--alvo-toque);
  padding: var(--esp-3) 0;
  border: 0;
  background: none;
  color: var(--cor-primaria-escura);
  font-weight: var(--peso-medio);
  justify-content: flex-start;
  align-self: flex-start;
}

.botao--terciario:hover {
  text-decoration: underline;
  transform: none;
}

.botao--terciario:hover .botao__icone { transform: translateX(3px); }
.botao__icone { transition: transform var(--transicao-rapida); }

.secao--escura .botao--terciario { color: var(--texto-claro); }

/* Largura total só no celular, e só no CTA principal da seção (§7). */
.botao--largo { width: 100%; }

@media (min-width: 30em) {
  .botao--largo { width: auto; }
}

/* ----------------------------------------------------------------- cards */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--esp-5);
  background: var(--cor-branco);
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sutil);
  transition: box-shadow var(--transicao-media),
              transform var(--transicao-media);
}

.card:hover {
  transform: translateY(-4px);      /* sem escala, sem rotação (§8) */
  box-shadow: var(--sombra-card);
}

.card h3 { margin-bottom: var(--esp-3); }

.card p { margin-bottom: var(--esp-4); }

/* Empurra o link para a base: cards da mesma grade terminam alinhados. */
.card__acao { margin-top: auto; }

/* Imagem sangrada até a borda do card.

   O `max-width: none` não é detalhe: a base.css põe `max-width: 100%` em toda
   imagem, como a §11 do site.md exige, e esse teto corta justamente o
   excedente que o `width` abaixo cria para vencer o padding. Sem ele a
   imagem para na largura do conteúdo, e como as margens negativas continuam
   valendo ela encosta num lado e deixa faixa vazia no outro. */
.card__imagem {
  margin: calc(var(--esp-5) * -1) calc(var(--esp-5) * -1) var(--esp-5);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  max-width: none;
  width: calc(100% + var(--esp-5) * 2);
}

.card__icone {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--esp-4);
  color: var(--cor-primaria);       /* sem círculo colorido atrás (§8) */
}

/* Variante com a mídia no rodapé do card, invertendo a ordem da §8
   (imagem → título → texto → link). Decidido em 24/08/2026 (D89).
   A imagem é quem recebe `margin-top: auto`, então ela encosta na base e as
   imagens da mesma linha alinham entre si mesmo com textos de tamanhos
   diferentes. */
.card--midia-base .card__acao { margin-top: 0; }

/* Enquanto a foto não chega, o link volta a ser empurrado para a base: sem
   isso o card termina num vazio esperando a imagem. Quando o `<img>` entrar,
   esta regra deixa de valer sozinha. */
.card--midia-base:not(:has(.card__imagem--base)) .card__acao { margin-top: auto; }

/* A `<picture>` existe só para oferecer o WebP com fallback JPG — ela não pode
   criar caixa nenhuma, senão o `margin-top: auto` e a margem negativa da
   imagem passariam a medir contra ela em vez de contra o card. Com
   `display: contents` o `<img>` volta a ser filho direto do flex do card. */
.card picture { display: contents; }

/* Mesma sangria da `.card__imagem`, e mesmo motivo para o `max-width: none`. */
.card__imagem--base {
  margin: auto calc(var(--esp-5) * -1) calc(var(--esp-5) * -1);
  margin-top: auto;
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  max-width: none;
  width: calc(100% + var(--esp-5) * 2);
}

@media (min-width: 64em) {
  .card__imagem--base {
    margin: auto calc(var(--esp-6) * -1) calc(var(--esp-6) * -1);
    margin-top: auto;
    width: calc(100% + var(--esp-6) * 2);
  }
}

.secao--escura .card {
  background: var(--cor-escura-suave);
  border-color: var(--borda-escura);
  color: var(--texto-claro-suave);
}

/* Card inteiro clicável, mantendo o texto do link descritivo. */
.card--clicavel { position: relative; }

.card--clicavel .card__acao a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--raio-lg);
}

@media (min-width: 64em) {
  .card { padding: var(--esp-6); }
  .card__imagem {
    margin: calc(var(--esp-6) * -1) calc(var(--esp-6) * -1) var(--esp-6);
    width: calc(100% + var(--esp-6) * 2);
  }
}

/* ------------------------------------------------------ números de impacto */

/* auto-fit em vez de contagem fixa: serve 3 ou 4 números sem deixar buraco. */
.numeros {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  text-align: center;
}

.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-numero);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--cor-primaria);
}

.secao--escura .numero__valor { color: var(--cor-branco); }

.numero__rotulo {
  display: block;
  margin-top: var(--esp-3);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.secao--escura .numero__rotulo { color: var(--texto-claro-suave); }

/* ------------------------------------------------------------------ hero */

/* Hero em vídeo de concerto, com texto branco sobre camada de escurecimento.
   A opacidade do véu não foi escolhida no olho: o quadro mais claro do vídeo
   tem luminância 0,46 na área do texto, o que daria 2,05:1 no branco puro.
   A 75% de `--cor-escura` o par sobe para 9,3:1, e mesmo contra um pixel
   totalmente branco fica em 6,5:1. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--secao-destaque);
  background: var(--cor-escura);
  color: var(--texto-claro);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu em gradiente vertical, não mais denso à esquerda: com o texto
   centralizado (D97), a densidade tem que seguir a faixa horizontal onde ele
   fica. Mais leve em cima e embaixo deixa mais vídeo à vista sem custar
   contraste — medido no quadro mais claro, 62% dá 6,2:1 e 82% dá 10,4:1. */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(10, 37, 64, .62) 0%,
    rgba(10, 37, 64, .82) 32%,
    rgba(10, 37, 64, .82) 74%,
    rgba(10, 37, 64, .62) 100%);
}

.hero h1,
.hero .lead { color: var(--texto-claro); }

.hero__interno {
  display: grid;
  gap: var(--esp-6);
  justify-items: center;
  text-align: center;
}

/* `margin-inline: auto` é o que centraliza de verdade até 1024px: sem ele a
   caixa limitada por `max-width` encosta à esquerda e só o texto dentro dela
   fica centralizado, deixando os botões fora de prumo com o título. */
.hero h1 {
  max-width: var(--medida-display);
  margin-inline: auto;
  font-size: var(--txt-display);
  line-height: var(--entrelinha-display);
}

.hero .lead {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--esp-7);
  color: var(--texto-claro-suave);
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
}

@media (min-width: 30em) {
  .hero__acoes { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* Abertura do hero: por um instante só o vídeo, depois título, subtítulo e
   botões entrando em cascata. Aprovado em 24/08/2026 (D101) como exceção
   estreita à §11, que proíbe animação atrasando o acesso ao CTA — a cascata
   inteira fecha em 0,8s, curto demais para custar clique ou LCP.

   Só CSS, de propósito: sem JS o texto aparece do mesmo jeito, e `backwards`
   faz o elemento nascer invisível sem precisar de estado inicial no HTML —
   que, se o CSS falhasse, deixaria o texto escondido para sempre.
   O leitor de tela não espera nada: o texto está no documento desde o
   início, e opacidade não o remove da árvore de acessibilidade. Sob
   `prefers-reduced-motion`, a regra global da base.css zera duração e
   atraso, e tudo aparece de uma vez. */
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Duração média (250ms) e não lenta (400ms): com a lenta a conta fecharia em
   950ms e estouraria o teto de 0,8s. Assim 300 + 2×125 + 250 = 800ms exatos. */
.hero:not(.hero--pagina) .hero__texto > * {
  animation: hero-entra var(--transicao-media) backwards;
}

.hero:not(.hero--pagina) .hero__texto > :nth-child(1) {
  animation-delay: var(--hero-entrada-atraso);
}

.hero:not(.hero--pagina) .hero__texto > :nth-child(2) {
  animation-delay: calc(var(--hero-entrada-atraso) + var(--hero-entrada-passo));
}

.hero:not(.hero--pagina) .hero__texto > :nth-child(3) {
  animation-delay: calc(var(--hero-entrada-atraso) + 2 * var(--hero-entrada-passo));
}

/* Altura mínima só a partir de 768px: dá respiro ao vídeo sem empurrar o CTA
   para fora da primeira dobra no celular, que a §13 proíbe. */
@media (min-width: 48em) {
  .hero {
    min-height: 72vh;
    display: grid;
    align-items: center;
  }
}

@media (min-width: 64em) {
  .hero { min-height: 78vh; }
  .hero__interno { max-width: var(--container); }
  .hero__texto { max-width: 44rem; }
}

/* ------------------------------------------- hero das páginas internas */

/* Mesma âncora escura do hero da home, sem vídeo, sem véu e sem cascata — a
   exceção da D101 vale só para a home. O `h1` cai para `--txt-h1`, porque
   `--txt-display` é exclusivo do título da home (§4).

   Vem **depois** das media queries acima de propósito: `.hero--pagina` tem a
   mesma especificidade de `.hero`, então só vence o `min-height` de 72/78vh
   se estiver embaixo. É a lição do P27. */
.hero--pagina {
  min-height: 0;
  padding-block: var(--secao-destaque);
}

.hero--pagina h1 {
  max-width: 24ch;
  font-size: var(--txt-h1);
  line-height: var(--entrelinha-h1);
}

/* ------------------------------- hero de página com foto de fundo */

.hero--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Puxa o enquadramento para a metade de baixo, onde estão as mãos e os
     rostos; o topo do quadro é a janela em contraluz. */
  object-position: center 60%;
}

/* Véu medido, não escolhido no olho. O quadro tem **pixels estourados**
   (luminância 1,0) na janela em contraluz — sem véu, branco daria 1:1.
   Medido sobre esse pior pixel: 82% ainda reprova (4,3:1) e 90% resolve
   (6,33:1). A faixa densa vai de 10% a 90% da altura. O texto mais extremo
   medido ocupa de 15,2% a 84,8% em 320px, então sobra folga dos dois lados;
   nas pontas o véu afrouxa para 70%, e ali não há texto nenhum. */
.hero--foto .hero__veu {
  background: linear-gradient(to bottom,
    rgba(10, 37, 64, .70) 0%,
    rgba(10, 37, 64, .90) 10%,
    rgba(10, 37, 64, .90) 90%,
    rgba(10, 37, 64, .70) 100%);
}

@media (min-width: 48em) {
  .hero--foto { min-height: 58vh; display: grid; align-items: center; }
}

/* ----------------------------------------------- percurso do aluno */

.percurso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-6);
  max-width: none;
}

.percurso__etapa {
  position: relative;
  margin: 0;
  padding-left: 3.75rem;
}

/* Linha que liga as etapas. A §3 reserva a cor principal justamente para
   detalhe fino como este. */
.percurso__etapa:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.75rem;
  bottom: calc(var(--esp-6) * -1);
  width: 2px;
  background: var(--cor-primaria);
  opacity: .35;
}

/* Marcador em fundo escuro com texto creme dá 14,9:1. Branco sobre a cor
   principal daria 3,8:1 e abriria uma segunda exceção de contraste, o que a
   §3.1 proíbe expressamente. */
.percurso__marcador {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-full);
  background: var(--cor-escura);
  color: var(--texto-claro);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h4);
  font-weight: var(--peso-forte);
  line-height: 1;
}

.percurso h3 { margin-bottom: var(--esp-2); }

.percurso p {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

/* A trilha vira horizontal já no tablet, a pedido do cliente em 28/08/2026
   (D135). A §12 pedia a linha na horizontal no desktop; aqui ela desce para
   768px. Em cinco colunas de ~112px o título de etapa precisa cair de
   `--txt-h3` para `--txt-h4`, senão "Musicalização Infantil" quebra em três
   linhas e desalinha as etapas entre si. */
@media (min-width: 48em) {
  .percurso {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--esp-4);
    align-items: start;
  }

  .percurso__etapa { padding-left: 0; padding-top: 3.5rem; }

  .percurso h3 { font-size: var(--txt-h4); }

  /* A linha que conecta passa a ser horizontal, na altura do marcador. */
  .percurso__etapa:not(:last-child)::before {
    left: 2.75rem;
    right: calc(var(--esp-4) * -1);
    top: 1.25rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

@media (min-width: 64em) {
  .percurso { gap: var(--esp-6); }
  .percurso h3 { font-size: var(--txt-h3); }
  .percurso__etapa:not(:last-child)::before { right: calc(var(--esp-6) * -1); }
}

/* ------------------------------------------------------ bloco de patrocínio */

.patrocinio {
  text-align: center;
}

/* O `h2` também precisa do `margin-inline: auto`. Sem ele a caixa limitada
   pelo `max-width` encosta à esquerda e o título sai do eixo dos parágrafos —
   era o que acontecia na Formação Musical, onde a home disfarçava o defeito
   com um `style` inline. */
.patrocinio h2 {
  max-width: var(--medida-h2);
  margin-inline: auto;
}

/* Vale para todo parágrafo do bloco, não só o `lead`. Mesmo motivo. */
.patrocinio p {
  max-width: 60ch;
  margin-inline: auto;
}

/* Respiro antes do botão. */
.patrocinio p:last-of-type { margin-bottom: var(--esp-6); }

/* ----------------------------------------------------------- depoimentos */

.depoimentos {
  display: grid;
  gap: var(--grade-gap);
  align-items: stretch;
}

@media (min-width: 48em) { .depoimentos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .depoimentos { grid-template-columns: repeat(3, 1fr); } }

.depoimento blockquote {
  margin: 0 0 var(--esp-5);
  font-size: var(--txt-lead);
  line-height: var(--entrelinha-lead);
  color: var(--texto-corpo);
  text-wrap: pretty;
}

.depoimento__autor {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-top: auto;
}

/* Sem foto do autor, a inicial faz o papel do retrato. */
.depoimento__inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h3);
  font-weight: var(--peso-forte);
  line-height: 1;
}

.depoimento__nome {
  display: block;
  font-style: normal;              /* <cite> vem em itálico por padrão */
  font-weight: var(--peso-medio);
  color: var(--texto-forte);
}

.depoimento__papel {
  display: block;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.depoimento__origem {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--txt-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ----------------------------------------------------------- formulários */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  max-width: 34rem;
}

.formulario__obrigatorios {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.campo > label {
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-forte);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea {
  min-height: 3.25rem;              /* 52px */
  padding: 0.875rem 1rem;           /* 14px 16px */
  background: var(--cor-branco);
  border: 1px solid var(--borda-media);
  border-radius: var(--raio-md);
  color: var(--texto-forte);
  transition: border-color var(--transicao-rapida),
              box-shadow var(--transicao-rapida);
}

.campo textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: var(--entrelinha-base);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border: 2px solid var(--cor-primaria);
  box-shadow: 0 0 0 4px rgba(18, 135, 224, .18);
}

/* Erro sinalizado por borda, ícone E texto. Nunca só por cor (§9). */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--cor-erro);
  border-width: 2px;
}

.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--cor-erro);
}

/* O `display: flex` acima vence o `[hidden] { display: none }` do navegador,
   que é regra de UA e perde para qualquer declaração de autor. Sem esta
   linha, o bloco de erro fica visível — com o ícone `!` do `::before` — num
   campo que ninguém tocou ainda. A §9 manda o erro aparecer **depois** da
   validação, nunca antes. */
.campo__erro[hidden] { display: none; }

.campo__erro::before {
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid currentColor;
  border-radius: var(--raio-full);
  font-size: 0.75rem;
  font-weight: var(--peso-forte);
  line-height: 1;
}

/* A linha do aceite é um filho do .campo, não o próprio .campo — assim a
   mensagem de erro continua sendo irmã do campo e o forms.js a encontra. */
.campo__aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-height: var(--alvo-toque);
}

.campo__aceite input[type="checkbox"] {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.125rem;
  accent-color: var(--cor-primaria);
}

/* O label é o alvo real: está associado ao input pelo `for`, então clicar em
   qualquer palavra marca a caixa. É ele que garante área de toque confortável. */
.campo__aceite label {
  padding-block: var(--esp-2);
  font-weight: var(--peso-regular);
  color: var(--texto-corpo);
  cursor: pointer;
}

.formulario__status {
  margin: 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
}

.formulario__status[data-estado="erro"]    { color: var(--cor-erro); }
.formulario__status[data-estado="sucesso"] { color: var(--cor-sucesso); }
.formulario__status[data-estado="enviando"]{ color: var(--texto-suave); }

/* Armadilha antispam: gente não vê, robô preenche. */
.formulario__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- acordeão */

.acordeao {
  border-top: 1px solid var(--borda-sutil);
  max-width: var(--medida-texto);
}

.acordeao__item { border-bottom: 1px solid var(--borda-sutil); }

.acordeao__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--esp-4) 0;
  background: none;
  border: 0;
  font-family: var(--fonte-texto);
  font-size: var(--txt-h4);
  font-weight: var(--peso-medio);
  line-height: var(--entrelinha-h4);
  color: var(--texto-forte);
  text-align: left;
}

.acordeao__gatilho:hover { color: var(--cor-primaria-escura); }

.acordeao__sinal {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--transicao-media);
}

.acordeao__gatilho[aria-expanded="true"] .acordeao__sinal {
  transform: rotate(180deg);
}

.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicao-media);
}

.acordeao__painel[data-aberto="true"] { grid-template-rows: 1fr; }

.acordeao__conteudo {
  overflow: hidden;
}

.acordeao__painel[data-aberto="true"] .acordeao__conteudo {
  padding-bottom: var(--esp-5);
}

/* ---------------------------------------------------------------- header */

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-altura);
  background: var(--cor-clara);
  transition: box-shadow var(--transicao-media),
              background-color var(--transicao-media);
}

/* Fundo translúcido com desfoque após 100px de rolagem (§12). */
.cabecalho[data-rolado="true"] {
  background: rgba(255, 249, 244, .88);
  box-shadow: var(--sombra-sutil);
}

@supports (backdrop-filter: blur(12px)) {
  .cabecalho[data-rolado="true"] { backdrop-filter: blur(12px); }
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  height: 100%;
}

/* Compensa o header fixo para o conteúdo não nascer escondido. */
.conteudo { padding-top: var(--header-altura); }

/* O logo entrou no header em 31/08/2026 (D167), no lugar da marca tipográfica
   da §2.2. O custo fica registrado aqui porque é medido:

   O traço fino do script "P" tem 1,52% da altura da marca. A 44px de altura
   isso dá 0,67px, e a 34px dá 0,52px — abaixo de um pixel de CSS. Em tela 2x
   e 3x, que é o caso de todo celular moderno e da maioria dos notebooks, isso
   vira 1,03 a 2,01 pixels de dispositivo e o traço aparece. Em tela 1x ele
   fica pálido. Por isso o srcset sobe até 407px de largura para um logo
   exibido a 89px: dá ao navegador o máximo de pixels possível.

   O nome por extenso saiu do header e vive no alt, no rodapé e no title.
   A versão reduzida com hairlines engrossadas (P09) continua sendo o que
   resolve isso de verdade. */
.marca {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.marca__logo {
  height: 2.125rem;
  width: auto;
}

.marca:hover .marca__logo { opacity: .78; }

.marca:focus-visible {
  outline: 3px solid var(--cor-escura);
  outline-offset: 4px;
  border-radius: var(--raio-sm);
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

/* "Doe agora" fica visível no celular, em versão compacta (D15). */
.botao--compacto {
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--txt-sm);
  /* Só aqui, e não em `.botao`: o header espremido quebrava "Doe agora" em
     duas linhas (mesma família do P24, que tratou os links da navegação e
     deixou o botão de fora). No `.botao` genérico o `nowrap` seria pior que
     o defeito — um rótulo longo como "Entender cotas de patrocínio" passaria
     da largura da tela em 320px e criaria scroll horizontal. */
  white-space: nowrap;
}

.menu-gatilho {
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto-forte);
}

.nav-desktop { display: none; }

@media (min-width: 64em) {
  /* Header de 80px no desktop comporta o logo um pouco maior — e cada pixel
     a mais é pixel a mais no traço fino do "P". */
  .marca__logo { height: 2.75rem; }
  .menu-gatilho    { display: none; }

  /* `flex: none` impede o flex de espremer a navegação: sem isso os rótulos
     longos quebram em duas linhas dentro do header. A marca é quem cede
     espaço, porque tem `min-width: 0`. */
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    flex: none;
  }

  .marca { min-width: 0; }

  .nav-desktop a {
    position: relative;
    padding-block: var(--esp-2);
    color: var(--texto-corpo);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    text-decoration: none;
    white-space: nowrap;
  }

  .nav-desktop a:hover { color: var(--texto-forte); }

  /* Página ativa sinalizada por marcador, não só por cor (§12 do site.md). */
  .nav-desktop a[aria-current="page"] { color: var(--texto-forte); }

  .nav-desktop a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--cor-primaria);
    border-radius: var(--raio-full);
  }

  .botao--compacto { font-size: var(--txt-base); padding: var(--esp-3) var(--esp-5); }
}

/* A partir de 1280px sobra espaço: a navegação volta a respirar. */
@media (min-width: 80em) {
  .nav-desktop { gap: var(--esp-5); }
}

/* ---------------------------------------------------------- menu no celular */

.menu-painel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: var(--esp-5) var(--margem-lateral) var(--esp-8);
  background: var(--cor-escura);
  color: var(--texto-claro);
  transform: translateX(100%);
  visibility: hidden;
  /* `visibility` não é interpolada, é adiada: ao fechar, espera o painel
     terminar de deslizar; ao abrir, muda na hora. Transicionar `visibility`
     junto com o transform faria o valor só virar `visible` no quadro seguinte,
     e aí a chamada de foco falharia em silêncio. */
  transition: transform var(--transicao-media),
              visibility 0s linear 250ms;
}

.menu-painel[data-aberto="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transicao-media),
              visibility 0s linear 0s;
}

.menu-painel__topo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--alvo-toque);
  margin-bottom: var(--esp-7);
}

.menu-fechar {
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto-claro);
}

.menu-painel nav {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.menu-painel nav a {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h3);
  font-weight: var(--peso-medio);
  color: var(--texto-claro);
  text-decoration: none;
}

.menu-painel nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--cor-primaria);
  text-decoration-thickness: 3px;
}

@media (min-width: 64em) {
  .menu-painel { display: none; }
}

/* Trava a rolagem do fundo enquanto o painel está aberto. */
body[data-menu-aberto="true"] { overflow: hidden; }

/* -------------------------------------------------------- faixa de CTA */

.faixa-cta {
  background: var(--cor-escura);
  color: var(--texto-claro-suave);
  padding-block: var(--secao-destaque);
  text-align: center;
}


.faixa-cta h2 {
  max-width: var(--medida-h2);
  margin-inline: auto;
  color: var(--texto-claro);
}

/* `margin-inline: auto`, e não `auto var(--esp-6)`: com um `auto` de um lado
   só, ele absorve toda a folga e empurra o parágrafo para a direita. O valor
   de baixo tinha vazado para o atalho horizontal. */
.faixa-cta .lead {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--esp-6);
  color: var(--texto-claro-suave);
}

.faixa-cta__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  align-items: center;
}

@media (min-width: 30em) {
  .faixa-cta__acoes { flex-direction: row; justify-content: center; }
}

/* Variante clara. Existe porque o hero em vídeo é escuro: uma faixa escura
   logo abaixo dele viraria uma mancha só, e a §3 admite no máximo duas seções
   escuras por página, sempre separadas por claras.
   Precisa vir DEPOIS das regras base: `.faixa-cta h2` e `.faixa-cta--clara h2`
   têm a mesma especificidade, então quem decide é a ordem no arquivo. */
.faixa-cta--clara {
  background: var(--cor-clara-alt);
  color: var(--texto-corpo);
}

.faixa-cta--clara h2    { color: var(--texto-forte); }
.faixa-cta--clara .lead { color: var(--texto-corpo); }

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

.rodape {
  background: var(--cor-escura);
  color: var(--texto-claro-suave);
  padding-block: var(--esp-8) var(--esp-6);
  border-top: 1px solid var(--borda-escura);
}

.rodape__grade {
  display: grid;
  gap: var(--esp-7);
  margin-bottom: var(--esp-7);
}

/* No máximo quatro colunas de links (§14). */
@media (min-width: 48em) { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.rodape__marca {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h4);
  font-weight: var(--peso-forte);
  color: var(--texto-claro);
  text-decoration: none;
}

/* Os grupos do rodapé são h2 na home e h3 na página de referência; os dois
   recebem o mesmo tratamento de etiqueta. */
.rodape h2,
.rodape h3 {
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
  margin-bottom: var(--esp-4);
}

.rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape li + li { margin-top: var(--esp-3); }

.rodape a {
  color: var(--texto-claro);
  font-size: var(--txt-sm);
  text-decoration: none;
}

.rodape a:hover { text-decoration: underline; }

/* Créditos de patrocínio, apoio e realização. Ficam no próprio rodapé por
   decisão D69, que revogou o limite de quatro colunas da §14: Rouanet e
   PROMAC exigem exibir os financiadores. */
.rodape__creditos {
  display: grid;
  gap: var(--esp-6);
  padding-block: var(--esp-6);
  border-top: 1px solid var(--borda-escura);
}

.rodape__creditos > div { min-width: 0; }

.creditos__marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--txt-sm);
  color: var(--texto-claro);
}

.creditos__marcas li { margin: 0; }

/* `height` fixa, não `max-height`. Dois motivos, os dois medidos:

   1. `max-height` limita mas não define, então logo de origem pequena aparecia
      pequeno — o GastroFavela saía com 22px e o Alef Peretz com 32px ao lado
      de vizinhos de 40px, e a fileira ficava irregular.
   2. Os três SVGs declaram só `viewBox`, sem `width`/`height` próprios. Com
      as duas dimensões em `auto` eles não têm tamanho intrínseco nenhum e
      colapsavam para **0×0** — invisíveis. Uma altura definida resolve: a
      largura sai da proporção do `viewBox`.

   `object-fit: contain` protege a faixa larga da FUNARTE: se o `max-width`
   cortar a largura no celular, ela encolhe em vez de distorcer. */
.creditos__marcas img {
  height: 2.25rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-5);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--borda-escura);
  font-size: var(--txt-sm);
}

/* ------------------------------------------------- popup de doação */

/* Pop-up de entrada. A §14 proibia; revogado em 22/08/2026 (D80) a pedido do
   cliente. Custo aceito: interrompe quem chegou buscando aula gratuita antes
   de a pessoa ler qualquer coisa. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--margem-lateral);
  background: rgba(10, 37, 64, .78);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao-media),
              visibility 0s linear 250ms;
}

.modal[data-aberto="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transicao-media),
              visibility 0s linear 0s;
}

@supports (backdrop-filter: blur(4px)) {
  .modal { backdrop-filter: blur(4px); }
}

/* Fundo azul, como a arte de doação do cliente — mas em
   `--cor-primaria-escura`, não em `--cor-primaria`. Medido: branco sobre
   `#1287E0` dá **3,77:1** e reprovaria em AA para todo o texto da caixa; a
   §3.1 restringe esse par à exceção E01, que vale só para o rótulo do botão
   primário. Sobre `#0F70BA` o branco dá **5,19:1** e passa.
   Pelo mesmo motivo o texto é `--cor-branco`, e não `--texto-claro-suave`,
   que sobre este azul cairia para 3,01:1. */
.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--esp-7) var(--esp-5) var(--esp-6);
  background: var(--cor-primaria-escura);
  color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-elevada);
  text-align: center;
}

/* --------------------------------------- grafismo de notas musicais */

/* Exceção nomeada à §10.1 e à §14, que proíbem nota musical como decoração.
   Aprovada em 28/08/2026 para este pop-up, com três condições que a mantêm
   inofensiva: é `aria-hidden`, fica atrás do conteúdo e vive **apenas na
   faixa da foto**, a única do pop-up sem texto. Ancorar na caixa inteira foi
   testado e descartado — as notas cruzavam o `h2` em 375px e a linha do Pix
   em toda largura, e branco sobre branco apaga a leitura. */
.modal__figura {
  position: relative;
  margin-bottom: var(--esp-6);
}

.modal__notas {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--cor-branco);
  pointer-events: none;
}

.modal__nota {
  position: absolute;
  top: 50%;
  width: 3.25rem;
  opacity: .18;
}

.modal__nota--esq { left: 0;  transform: translateY(-62%) rotate(-12deg); }
.modal__nota--dir { right: 0; transform: translateY(-38%) rotate(10deg); }

/* A foto sobe acima do grafismo. */
.modal__figura picture { position: relative; z-index: 1; }

.modal__fechar {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto-claro);
  border-radius: var(--raio-md);
}

.modal__fechar:hover { background: rgba(255, 255, 255, .18); }

.modal__caixa h2 {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--esp-6);
  color: var(--cor-branco);
}

/* Botões sobre o azul: o preenchido inverte para branco com rótulo azul
   (5,19:1) e o de contorno fica branco (5,19:1 no rótulo e na borda, contra o
   mínimo de 3:1 que a WCAG 1.4.11 pede para elemento de interface). Um
   `--cor-primaria` cheio aqui daria ~1,4:1 contra o fundo e sumiria. */
.modal .botao--primario {
  background: var(--cor-branco);
  color: var(--cor-primaria-escura);
}

.modal .botao--primario:hover,
.modal .botao--primario:focus-visible {
  background: var(--cor-clara);
  color: var(--cor-primaria-escura);
}

.modal .botao--secundario {
  border-color: var(--cor-branco);
  color: var(--cor-branco);
}

.modal .botao--secundario:hover,
.modal .botao--secundario:focus-visible {
  background: var(--cor-branco);
  color: var(--cor-primaria-escura);
}

.modal .botao:focus-visible {
  outline: 3px solid var(--cor-branco);
  outline-offset: 2px;
}

/* O recorte já vem enquadrado na menina e no teclado, então `object-fit: cover`
   num círculo não corta rosto. `min()` protege a tela de 320px. */
.modal__retrato {
  width: min(60vw, 14rem);
  height: min(60vw, 14rem);
  margin: 0 auto;
  border-radius: var(--raio-full);
  object-fit: cover;
  display: block;
}

/* Dois caminhos de doação, cada um com o rótulo acima do botão — a estrutura
   da arte do cliente. Empilhados no celular. */
.modal__acoes {
  display: grid;
  gap: var(--esp-5);
  margin-bottom: var(--esp-6);
}

.modal__acao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

/* `margin-top: auto` alinha os botões pela base quando um rótulo ocupa duas
   linhas e o outro só uma. */
.modal__acao .botao { margin-top: auto; }

.modal__rotulo {
  margin: 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-branco);
}

.modal__pix {
  margin: 0 0 var(--esp-3);
  padding-top: var(--esp-5);
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: var(--txt-sm);
}

/* ------------------------------------------------- copiar chave Pix */

/* Funcionalidade da §7. É um `<button>` de verdade, não um texto com
   `onclick`: precisa ser alcançável por teclado e ter nome acessível. */
.pix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  max-width: 100%;
  padding: var(--esp-2) var(--esp-4);
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--cor-branco);
  border-radius: var(--raio-md);
  color: var(--cor-branco);
  font-family: var(--fonte-texto);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--transicao-rapida);
}

.pix:hover { background: rgba(255, 255, 255, .22); }

.pix:focus-visible {
  outline: 3px solid var(--cor-branco);
  outline-offset: 2px;
}

/* A chave é longa: em 320px ela precisa poder quebrar em vez de esticar a
   caixa e criar scroll horizontal, que a §11 proíbe. */
.pix__chave {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pix__icone { flex: none; width: 1.25rem; height: 1.25rem; }

/* Confirmação visual exigida pela §7. Sem `display: none` quando vazio: o
   `role="status"` precisa existir na árvore antes de receber o texto, senão
   o leitor de tela não anuncia a mudança. */
.pix__aviso {
  margin: var(--esp-3) 0 0;
  min-height: 1.25rem;
  font-size: var(--txt-sm);
  color: var(--cor-branco);
}

@media (min-width: 30em) {
  .modal__caixa { padding: var(--esp-8) var(--esp-7) var(--esp-7); }
  .modal__acoes { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

/* --------------------------------------------------- carrossel */

/* Avanço automático. Exceção nomeada à proibição de animação em laço da §11,
   ao lado do vídeo do hero. O botão de pausa saiu em 24/08/2026 (D85); o que
   mantém o WCAG 2.2.2 atendido são as setas, que param o avanço e são
   visíveis, operáveis por teclado e com nome acessível. */
.carrossel { position: relative; }

/* A janela recorta a pista. O deslocamento acontece DENTRO dela, então nunca
   vira scroll horizontal de página, que a §11 do site.md proíbe. */
.carrossel__janela {
  overflow: hidden;
  /* respiro para a sombra do card não ser cortada na borda */
  padding-block: var(--esp-2);
}

.carrossel__pista {
  display: flex;
  gap: var(--grade-gap);
  transition: transform var(--transicao-media);
}

/* Os vizinhos ficam parcialmente à vista e esmaecidos: dá para enxergar que
   há mais depoimentos adiante sem competir com o que está em foco. */
.carrossel__item {
  flex: 0 0 auto;
  width: 84%;
  opacity: .4;
  transition: opacity var(--transicao-media);
}

.carrossel__item[data-ativo='true'] { opacity: 1; }

/* O item estica sozinho (flex), mas quem o preenche precisa dizer que quer a
   altura toda — senão cards de textos diferentes terminam desalinhados, que é
   justamente o que a §8 proíbe. */
.carrossel__item .depoimento,
.carrossel__item .card { height: 100%; }

@media (min-width: 48em) { .carrossel__item { width: 58%; } }
@media (min-width: 64em) { .carrossel__item { width: 42%; } }

.carrossel__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

.carrossel__botao {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  padding: 0;
  background: none;
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-full);
  color: var(--texto-forte);
}


.carrossel__botao:hover {
  background: var(--cor-branco);
  border-color: var(--borda-media);
}

.carrossel__marcadores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carrossel__marcadores li { margin: 0; }

/* O marcador tem 44px de alvo de toque; o ponto visível fica dentro dele. */
.carrossel__ponto {
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  padding: 0;
  background: none;
  border: 0;
}

.carrossel__ponto::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--raio-full);
  background: var(--borda-media);
  transition: background-color var(--transicao-rapida);
}

.carrossel__ponto[aria-current="true"]::before {
  background: var(--cor-primaria);
  transform: scale(1.3);
}

/* --------------------------------------------- botão flutuante WhatsApp */

.whatsapp-flutuante {
  position: fixed;
  right: var(--margem-lateral);
  bottom: var(--margem-lateral);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--cor-sucesso);
  color: var(--cor-branco);
  border-radius: var(--raio-full);
  box-shadow: var(--sombra-elevada);
  transition: transform var(--transicao-rapida);
}

.whatsapp-flutuante:hover {
  transform: translateY(-2px);
  color: var(--cor-branco);
}

/* ------------------------------------------------------- marcação pendente */

/* Realce visível de tudo que ainda não foi confirmado pelo cliente.
   A regra do CLAUDE.md manda deixar `[A DEFINIR]` visível no HTML —
   isto garante que ninguém publique sem perceber. */
.a-definir {
  background: #FFF3CD;
  color: var(--cor-atencao);
  padding: 0 var(--esp-2);
  border-radius: var(--raio-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* ------------------------------------------------ vaga de imagem */

/* Espaço reservado para foto que ainda não chegou. A proporção é declarada
   por `aspect-ratio`, então quando a imagem real entrar o layout não pula —
   o espaço já é o mesmo. */
.imagem-vaga {
  display: grid;
  place-content: center;
  gap: var(--esp-2);
  justify-items: center;
  padding: var(--esp-4);
  background: var(--cor-clara-alt);
  border: 1px dashed var(--borda-media);
  border-radius: var(--raio-lg);
  color: var(--texto-suave);
  text-align: center;
}

.secao--alt .imagem-vaga { background: var(--cor-branco); }

/* Vaga da foto de fundo do hero, marcada no canto para não competir com o
   texto — ela some assim que a imagem entrar. */
.hero__vaga-foto {
  position: absolute;
  right: var(--esp-5);
  bottom: var(--esp-5);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  color: var(--texto-claro-suave);
}

/* --------------------------------------------- mosaico e pilha */

/* Mosaico de quatro fotos ao lado do texto, como na referência.

   `minmax(0, 1fr)` e não `1fr`: o `1fr` puro equivale a
   `minmax(auto, 1fr)`, e o mínimo `auto` impede a coluna de encolher abaixo
   do conteúdo. Com o rótulo "[A DEFINIR]" dentro da vaga, cada coluna travava
   em 139,7px e as duas somavam 291px numa faixa de 265px — 6px de scroll
   horizontal em 320px, que a §11 proíbe. Mesma lição do P42 e do P47. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  align-items: start;
}

/* Uma foto principal e duas de apoio embaixo. */
.pilha-fotos { display: grid; gap: var(--esp-3); }

.pilha-fotos__dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}

/* ----------------------------------------- marco da linha do tempo */

/* Cada marco é um item da pista. A largura fixa em porcentagem deixa os
   vizinhos parcialmente à vista, que é o que sinaliza que há mais adiante. */
.carrossel--tempo .carrossel__item { width: 78%; opacity: 1; }

@media (min-width: 48em) { .carrossel--tempo .carrossel__item { width: 42%; } }
@media (min-width: 64em) { .carrossel--tempo .carrossel__item { width: 26%; } }

.marco {
  height: 100%;
  padding-top: var(--esp-4);
  border-top: 2px solid var(--borda-sutil);
}

.marco p { margin: 0; }

.marco__ano {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h2);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  color: var(--cor-primaria-escura);
  margin-bottom: var(--esp-3) !important;
}

/* ---------------------------------------------------- linha do tempo */

/* Vertical sempre, com a régua à esquerda. A §11 do site.md proíbe scroll
   horizontal em qualquer largura, e uma régua horizontal com oito marcos
   ou rolaria ou espremeria o texto a ponto de não se ler. Em duas colunas
   no desktop ela ganha densidade sem perder a leitura de cima para baixo. */
.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-6);
}

@media (min-width: 64em) {
  .linha-tempo { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6) var(--esp-8); }
}

.linha-tempo > li {
  margin: 0;
  padding-left: var(--esp-6);
  border-left: 2px solid var(--borda-sutil);
}

.linha-tempo > li p { margin: 0; }

.linha-tempo__ano {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h3);
  font-weight: var(--peso-forte);
  color: var(--cor-primaria-escura);
  margin-bottom: var(--esp-2) !important;
}

/* ---------------------------------------------------------- citação */

.citacao {
  max-width: 52ch;
  margin: var(--esp-8) auto 0;
  padding-left: var(--esp-6);
  border-left: 3px solid var(--cor-primaria);
}

.citacao p {
  margin: 0 0 var(--esp-3);
  font-size: var(--txt-lead);
  line-height: var(--entrelinha-lead);
  color: var(--texto-forte);
}

.citacao cite {
  font-style: normal;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

/* Primeiro parágrafo de um bloco de prosa, com mais presença. Serve ao
   bloco do fundador, onde o gesto de origem abre em vez de fechar. */
.prosa__abertura {
  font-size: var(--txt-lead);
  line-height: var(--entrelinha-lead);
  color: var(--texto-forte);
}

/* Card com realce leve, sem sair da paleta: fundo `--cor-primaria-suave`
   e borda na cor de ação. Sem gradiente e sem barra colorida à esquerda,
   que a §14 proíbe. */
.card--destaque {
  background: var(--cor-primaria-suave);
  border-color: var(--cor-primaria);
}

/* Número e sufixo na mesma linha. O `.numero__valor` é bloco, então sem
   este envoltório o "%" cairia para a linha de baixo. */
.numero__linha {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* Sufixo do contador (`%`, `+`). Fica fora do elemento animado, senão
   sumiria e voltaria a cada quadro. */
.numero__sufixo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-numero);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--cor-primaria);
}

/* ------------------------------------------- painel de conteúdo */

/* Container azul-suave que agrupa um bloco inteiro, como na referência.
   `--cor-primaria-suave` já existe na paleta para "fundo de badge e realce
   sutil" (§3), que é exatamente este papel — nenhuma cor nova entrou. */
.painel {
  padding: var(--esp-5);
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-xl);
}

@media (min-width: 48em) { .painel { padding: var(--esp-7); } }

/* Dentro do painel, os itens do acordeão viram cartões brancos soltos. */
.painel .acordeao {
  max-width: none;
  border-top: 0;
  display: grid;
  gap: var(--esp-3);
}

.painel .acordeao__item {
  background: var(--cor-branco);
  border: 0;
  border-radius: var(--raio-md);
  padding-inline: var(--esp-5);
}

/* ---------------------------------- central de atendimento: abas */

/* Lista de assuntos à esquerda, conteúdo à direita. No celular a lista vira
   uma fileira que quebra, porque coluna vertical de oito itens empurraria o
   conteúdo para muito abaixo da dobra. */
.abas { display: grid; gap: var(--esp-6); }

@media (min-width: 64em) {
  .abas { grid-template-columns: 15rem 1fr; gap: var(--esp-8); align-items: start; }
}

/* `min-width: 0` não é enfeite: item de grade nasce com `min-width: auto` e
   se alarga para caber o conteúdo mais largo em vez de espremer. Sem isto o
   formulário mantinha 407px numa janela de 305px e criava 179px de scroll
   horizontal, que a §11 proíbe. */
.abas__conteudo,
.abas__lista { min-width: 0; }

.abas__lista { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

@media (min-width: 64em) {
  .abas__lista { flex-direction: column; flex-wrap: nowrap; gap: 0; }
}

.abas__aba {
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-branco);
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-full);
  color: var(--texto-corpo);
  font-family: var(--fonte-texto);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
}

.abas__aba:hover { color: var(--cor-primaria-escura); }

.abas__aba[aria-selected="true"] {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  color: var(--cor-branco);
}

.abas__aba:focus-visible {
  outline: 3px solid var(--cor-escura);
  outline-offset: 2px;
}

/* No desktop a lista vira coluna e o estado ativo passa a ser uma barra à
   esquerda, como na referência — a pílula cheia ali brigaria com o painel. */
@media (min-width: 64em) {
  .abas__aba {
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    padding: var(--esp-3) var(--esp-4);
    font-size: var(--txt-base);
  }

  /* O fundo branco não é enfeite: o rótulo da aba ativa usa
     `--cor-primaria-escura`, que mede 4,47:1 sobre o `--cor-primaria-suave`
     do painel e reprova em AA. Sobre branco mede 5,19:1. De quebra, a aba
     ativa passa a emendar visualmente no painel de conteúdo, que é branco. */
  .abas__aba[aria-selected="true"] {
    background: var(--cor-branco);
    border-left-color: var(--cor-primaria-escura);
    border-radius: var(--raio-md) 0 0 var(--raio-md);
    color: var(--cor-primaria-escura);
    font-weight: var(--peso-medio);
  }
}

.abas__painel {
  background: var(--cor-branco);
  border-radius: var(--raio-lg);
  padding: var(--esp-5);
}

@media (min-width: 48em) { .abas__painel { padding: var(--esp-6); } }

.abas__painel > h3 { margin-top: 0; margin-bottom: var(--esp-4); }

/* -------------------------------------- cabeçalho em duas colunas */

/* Título à esquerda, texto de apoio à direita. Empilha no celular, com o
   título primeiro. */
.cabecalho-duplo {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-7);
}

@media (min-width: 64em) {
  .cabecalho-duplo {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-8);
    align-items: end;
  }
}

.cabecalho-duplo h2 { margin: 0; max-width: var(--medida-h2); }
.cabecalho-duplo__apoio { margin: 0; max-width: 52ch; }

.acordeao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: var(--esp-5) 0 0;
}

/* Grupo de rádio dentro de formulário. `<fieldset>` e `<legend>` de verdade:
   é o que amarra as opções a uma pergunta para o leitor de tela. */
.campo--grupo { border: 0; padding: 0; margin-inline: 0; }

.campo--grupo legend {
  padding: 0;
  margin-bottom: var(--esp-2);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-forte);
}

.campo__opcoes { display: grid; gap: var(--esp-2); }

.campo__opcoes label {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  font-weight: var(--peso-normal);
}

/* Lista de contatos diretos, sem formulário. */
.contatos { margin: var(--esp-5) 0 0; }

.contatos > div {
  padding-block: var(--esp-3);
  border-top: 1px solid var(--borda-sutil);
}

.contatos > div:first-child { border-top: 0; padding-top: 0; }

.contatos dt {
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
}

.contatos dd { margin: var(--esp-1) 0 0; }

/* ------------------------------------- transparência: duas colunas */

/* Texto de apoio à esquerda, painel de documentos à direita. Em coluna
   única o texto vem primeiro, que é a ordem de leitura correta e a mesma
   regra que a §13 aplica ao hero. */
.transparencia { display: grid; gap: var(--esp-7); }

@media (min-width: 64em) {
  .transparencia {
    grid-template-columns: 5fr 7fr;
    gap: var(--esp-8);
    align-items: start;
  }
}

/* Numa coluna estreita, texto centralizado fica ilegível: as duas bordas
   irregulares somadas à medida curta quebram a leitura. Aqui a prosa volta
   à esquerda, desfazendo a D123 só neste bloco. */
.prosa--esquerda {
  max-width: none;
  text-align: left;
}

/* ------------------------------------------ lista de documentos */

/* Dentro do acordeão da Transparência. Cada item é um link para o arquivo,
   com alvo de 44px — a §11 vale aqui como em qualquer lista tocável. */
.documentos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.documentos > li {
  margin: 0;
  border-top: 1px solid var(--borda-sutil);
}

.documentos > li:first-child { border-top: 0; }

.documentos a,
.documentos > li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-toque);
  padding-block: var(--esp-2);
}

.documentos a { text-decoration: none; }
.documentos a:hover { text-decoration: underline; }

/* Seta de saída, indicando que o arquivo abre fora da página. */
.documentos a::after {
  content: '↗';
  margin-left: auto;
  flex: none;
  color: var(--texto-suave);
}

/* --------------------------------------- ficha do termo de fomento */

.ficha {
  max-width: 48rem;
  margin-inline: auto;
  padding: var(--esp-6);
  background: var(--cor-branco);
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sutil);
}

/* `<dl>` e não `<table>`: são pares campo/valor, não uma matriz de dados.
   Em coluna única no celular e em duas a partir de 768px. */
.ficha__dados { margin: 0; }

.ficha__dados > div {
  padding-block: var(--esp-4);
  border-top: 1px solid var(--borda-sutil);
}

.ficha__dados > div:first-child { border-top: 0; padding-top: 0; }

.ficha__dados dt {
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
}

.ficha__dados dd {
  margin: var(--esp-1) 0 0;
  color: var(--texto-forte);
}

.ficha__acao { margin: var(--esp-6) 0 0; }

.ficha__tecnicos {
  display: grid;
  gap: var(--esp-3) var(--esp-6);
  margin: var(--esp-6) 0 0;
  padding-top: var(--esp-5);
  border-top: 1px solid var(--borda-sutil);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.ficha__tecnicos dt { font-weight: var(--peso-medio); }
.ficha__tecnicos dd { margin: 0; }

@media (min-width: 48em) {
  .ficha { padding: var(--esp-7); }

  /* Rótulo à esquerda, valor à direita: leitura de ficha, não de parágrafo. */
  .ficha__dados > div {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--esp-5);
  }
  .ficha__dados dd { margin-top: 0; }

  .ficha__tecnicos { grid-template-columns: repeat(2, 1fr); }
  .ficha__tecnicos > div { display: flex; gap: var(--esp-2); }
}

/* --------------------------------------------------- vídeo em fachada */

/* Exceção nomeada à §9 (D105): o YouTube só é chamado depois do clique.
   Enquanto isso, o que existe é uma miniatura nossa e um botão. */

.video {
  max-width: 52rem;
  margin: 0 auto;
}

/* `aspect-ratio` em vez de altura fixa, como a §11 do site.md pede: a
   moldura acompanha a largura em qualquer tela. */
.video__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cor-escura-suave);
  border-radius: var(--raio-lg);
}

.video__gatilho,
.video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__gatilho {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  cursor: pointer;
}

.video__gatilho[disabled] { cursor: not-allowed; }

/* Os marcadores de pendência descem para a base da moldura: no centro eles
   ficariam por baixo do botão de play, que ocupa o mesmo lugar. Quando a
   miniatura real chegar, a imagem cobre a moldura inteira e este texto sai. */
.video__miniatura {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: end center;
  gap: var(--esp-2);
  justify-items: center;
  padding: var(--esp-5);
  color: var(--texto-claro-suave);
  text-align: center;
}

.video__miniatura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Botão de play no desenho do YouTube, a pedido do cliente em 28/08/2026
   (D118). O vermelho `#FF0000` é marca de terceiro, não cor do sistema —
   entra pelo mesmo princípio da §2.1, que deixa o logotipo fora da paleta.
   Não vira token e não pode ser reusado em nenhum outro lugar do site. */
.video__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 3rem;
  background: #F00;
  border-radius: 0.75rem;
  transition: background var(--transicao-rapida), transform var(--transicao-rapida);
}

.video__play svg {
  width: 1.75rem;
  height: 1.75rem;
  /* A seta puxa para a esquerda por ser um triângulo; o deslocamento
     devolve o centro óptico. */
  margin-left: 0.15rem;
  color: var(--cor-branco);
}

.video__gatilho:hover .video__play,
.video__gatilho:focus-visible .video__play { transform: scale(1.06); }

.video__gatilho[disabled] .video__play { opacity: .45; }

/* Escurecimento nas bordas, como o player real. Serve a dois propósitos:
   dá o registro visual do YouTube e garante o contraste da faixa "Assista
   no YouTube" sobre qualquer miniatura, que a WCAG 1.4.11 exige. */
.video__moldura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .45) 0%,
    rgba(0, 0, 0, 0) 22%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, .55) 100%);
}

/* O gatilho e a faixa sobem acima do escurecimento. */
.video__gatilho { z-index: 2; }

/* Link real para o vídeo no YouTube, no canto, como no player. É um `<a>`
   irmão do `<button>`, não filho: link dentro de botão é HTML inválido. */
.video__yt {
  position: absolute;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-4);
  background: rgba(0, 0, 0, .72);
  border-radius: var(--raio-md);
  color: var(--cor-branco);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.video__yt:hover { background: rgba(0, 0, 0, .86); }

.video__yt:focus-visible {
  outline: 3px solid var(--cor-branco);
  outline-offset: 2px;
}

.video__yt-marca {
  width: 1.25rem;
  height: 1.25rem;
  color: #F00;
}

/* O crédito sob o vídeo e o bloco de transcrição saíram em 28/08/2026 (D108),
   a pedido do cliente. O CSS foi removido junto para não seguir viajando em
   toda visita — se a transcrição voltar, volta com estilo próprio. */

/* Dentro de um número de impacto, o placeholder não pode herdar os 76px:
   `nowrap` nesse tamanho estoura a largura da tela e cria scroll horizontal,
   que a §11 do site.md proíbe. Quando o número real chegar, isto some. */
.numero__valor .a-definir {
  font-size: var(--txt-h3);
  white-space: normal;
}

/* ============================================================ formas de ajudar */

/* Variante do botão de copiar Pix para fundo claro. O `.pix` original nasceu
   dentro do pop-up, que é azul, então borda e rótulo são brancos — sobre o
   painel claro desta página eles sumiriam. Aqui os dois vêm dos tokens de
   texto sobre fundo claro. Medido: rótulo `--texto-forte` sobre
   `--cor-primaria-suave` e borda em `--cor-primaria`. */
.pix--claro {
  background: var(--cor-branco);
  border-color: var(--cor-primaria);
  color: var(--texto-forte);
}

.pix--claro:hover { background: var(--cor-primaria-suave); }

.pix--claro:focus-visible { outline-color: var(--cor-escura); }

/* O aviso do `role="status"` acompanha o contexto do botão. */
.pix--claro ~ .pix__aviso,
.painel .pix__aviso { color: var(--cor-sucesso); }

/* Lista de marcas em texto. Vira lista de logos quando os arquivos e as
   autorizações chegarem (D70) — a estrutura já é a mesma. */
.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-6);
  margin: 0 0 var(--esp-7);
  padding: 0;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-h4);
  font-weight: var(--peso-medio);
  color: var(--texto-forte);
}

.marcas > li { margin: 0; }

/* Dentro de meia coluna, a grade de 2 ou 3 da `.lista-itens` deixaria cada
   item com largura de legenda. Aqui ela volta a ser coluna única em todas as
   larguras. */
.lista-itens--coluna { grid-template-columns: 1fr !important; max-width: none; }

/* O `h4` recebe o mesmo tratamento do `h3`: dentro da lista o nível depende
   de onde a lista está na página, não da aparência. */
.lista-itens h4 { margin-bottom: var(--esp-2); }

/* Blocos de altura muito diferente não devem centralizar entre si: um
   formulário curto ao lado de uma coluna longa ficaria boiando no meio. */
@media (min-width: 64em) {
  .duas-colunas--topo { align-items: start; }
}

/* Item de grade nasce com `min-width: auto` e se alarga para caber o conteúdo
   mais largo em vez de espremer — foi o que criou 179px de scroll horizontal
   nas abas da Central de Atendimento (P45/P47). Formulário dentro de coluna
   precisa do zero explícito. */
.duas-colunas > * { min-width: 0; }

/* Aviso antifraude. Não é card: sem sombra, sem fundo branco, corpo menor.
   É informação de segurança, não oferta. */
.aviso {
  max-width: 65ch;
  margin-inline: auto;
  padding: var(--esp-5);
  background: var(--cor-clara-alt);
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-lg);
  font-size: var(--txt-sm);
}

@media (min-width: 48em) { .aviso { padding: var(--esp-6); } }

.aviso h2 {
  margin: 0 0 var(--esp-4);
  font-size: var(--txt-h3);
}

.aviso p { margin: 0 0 var(--esp-3); }
.aviso p:last-of-type { margin-bottom: var(--esp-5); }

.aviso .contatos { margin: 0; }

/* Formulário posto direto sobre o painel azul-suave vira cartão branco, do
   mesmo jeito que os itens de acordeão já viram. Não é estética: o link
   "Política de Privacidade" da caixa de consentimento usa
   `--cor-primaria-escura`, que mede 4,47:1 sobre `--cor-primaria-suave` e
   reprova em AA — sobre branco mede 5,19:1 e passa.

   O combinador de filho é deliberado: na Central de Atendimento o formulário
   vive dentro de `.abas__painel`, que já é branco, e a regra não deve
   alcançá-lo para não empilhar duas caixas. */
.painel > .formulario {
  padding: var(--esp-5);
  background: var(--cor-branco);
  border-radius: var(--raio-md);
}

@media (min-width: 48em) { .painel > .formulario { padding: var(--esp-6); } }

/* ---------------- texto de marca sobre superfície `--cor-primaria-suave` */

/* `--cor-primaria-escura` (#0F70BA) mede **4,47:1** sobre `--cor-primaria-suave`
   (#E2F0FB) e reprova no mínimo de 4,5:1 da §3.1. O par nunca havia aparecido
   porque essa superfície só existia como fundo de etiqueta pequena; com o
   `.painel` (D126) e o `.card--destaque` (D134) ela passou a receber texto.

   A correção usa `--cor-escura-suave`, que já está na paleta, continua na
   família azul da marca e mede **11,13:1** sobre a mesma superfície. Nenhuma
   cor nova entrou no sistema. */
.painel .etiqueta,
.card--destaque .etiqueta,
.painel > .botao--terciario,
.painel > * > .botao--terciario,
.card--destaque .botao--terciario {
  color: var(--cor-escura-suave);
}

.painel .botao--terciario:hover,
.card--destaque .botao--terciario:hover {
  color: var(--cor-escura);
}

/* --------------------------------------- fotos em bloco (Quem Somos) */

/* Imagem que ocupa a vaga inteira com a proporção declarada no HTML. Substitui
   a `.imagem-vaga` quando a foto real chega, e por isso repete o raio e a
   proporção — o layout não pula na troca.

   `max-width: none` pela mesma razão do P39: o teto global de 100% cortaria a
   imagem antes de ela preencher a célula da grade. */
.foto {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: var(--raio-lg);
  object-fit: cover;
}

/* `display: contents` aqui era um erro: ele promove **os dois** filhos do
   `<picture>` a itens de grade — o `<img>` e também o `<source>`, que passa a
   ocupar uma célula. Cada foto consumia uma linha inteira: o mosaico media
   1073px em vez de 605px, e no bloco de concerto as duas fotos de apoio
   caíam em linhas diferentes em vez de ficarem lado a lado.

   `<picture>` já é `display: block` pelo reset da base.css, então basta não
   tirá-lo da grade. A regra da D120 no `.card` continua com `contents`, onde
   o pai não é grade e a sangria depende disso. */
.mosaico picture,
.pilha-fotos picture,
.pilha-fotos__dupla picture { display: block; }

/* Véu uniforme, para foto que não tem nenhuma faixa segura.

   O gradiente padrão da `.hero--foto` afrouxa para 70% nas pontas porque o
   banner da Formação só tinha contraluz no miolo. A foto da Quem Somos tem
   pixels estourados (luminância 1,000) em **todas** as faixas de 0% a 90%:
   medido, 70% deixaria o branco em 2,88:1 e 90% leva a 6,23:1. Aqui a
   densidade não cai. */
.hero__veu--denso {
  background: rgba(10, 37, 64, .90);
}

/* Os rostos desta foto ficam entre 32% e 49% da altura — o padrão de 60%,
   pensado para o banner da Formação, cortaria as cabeças. */
.hero--foto .hero__fundo[src*="sobre-hero"] { object-position: center 40%; }

/* Faixa composta de marcas institucionais. Os arquivos do PROMAC e da FUNARTE
   trazem três marcas cada um, com letra miúda de identidade oficial; na altura
   dos logos simples elas ficariam ilegíveis. Um pouco mais de altura e um teto
   de largura, para a faixa não dominar a fileira nem estourar no celular. */
/* Dois nomes de classe para vencer `.creditos__marcas img`, que tem
   especificidade maior que `.creditos__faixa` sozinha e fixava 36px. */
.creditos__marcas .creditos__faixa { height: 2.75rem; }

/* --------------------------------------------- logo no rodapé */

/* O monograma entra só aqui, e só nesta altura. Medido no arquivo real (P51):
   o traço fino do "P" tem 1,52% da altura da marca, o que dá **1,22px a 80px**
   de altura — sustenta — e **0,61px a 40px**, a altura que ele teria no
   header, onde some. Por isso a §2.1 continua valendo para o header e para o
   favicon, e o logo não vai a nenhum dos dois.

   A versão é a negativa (branca), como a D24 exige sobre fundo escuro. Ela foi
   gerada invertendo o arquivo original, o que é legítimo aqui: 100% dos pixels
   opacos da marca são preto puro, então a inversão não perde informação. */
.rodape__marca {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
}

.rodape__logo {
  height: 5rem;
  width: auto;
  max-width: 100%;
}

/* Área de proteção da §2.1: margem livre em volta, sem nada invadindo. */
.rodape__marca picture { display: block; padding-right: var(--esp-5); }