/* =========================================================================
   base.css — reset, tipografia e utilitários
   Depende de tokens.css. Carregar sempre depois dele.
   ========================================================================= */

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncoras não podem parar embaixo do header fixo. */
  scroll-padding-top: calc(var(--header-altura) + var(--esp-5));
}

body {
  margin: 0;
  background: var(--cor-clara);
  color: var(--texto-corpo);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  line-height: var(--entrelinha-base);
  font-weight: var(--peso-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nenhum scroll horizontal em nenhuma largura (§11 do site.md). */
  overflow-x: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--esp-4);
  font-family: var(--fonte-titulo);
  color: var(--texto-forte);
  text-wrap: balance;
}

h1 { font-size: var(--txt-h1); line-height: var(--entrelinha-h1); font-weight: var(--peso-forte); }
h2 { font-size: var(--txt-h2); line-height: var(--entrelinha-h2); font-weight: var(--peso-forte); max-width: var(--medida-h2); }
h3 { font-size: var(--txt-h3); line-height: var(--entrelinha-h3); font-weight: var(--peso-medio); }
h4 { font-size: var(--txt-h4); line-height: var(--entrelinha-h4); font-weight: var(--peso-medio); }

p {
  margin: 0 0 var(--esp-4);
  max-width: var(--medida-texto);
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

/* Itálico só em nome de obra musical e citação. */
cite, em { font-style: italic; }
cite { font-style: italic; font-weight: inherit; }

strong, b { font-weight: var(--peso-medio); }

ul, ol {
  margin: 0 0 var(--esp-4);
  padding-left: var(--esp-5);
  max-width: var(--medida-texto);
}

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

a {
  color: var(--cor-primaria-escura);
  text-underline-offset: 0.2em;
  transition: color var(--transicao-rapida);
}

a:hover { color: var(--cor-escura); }

/* Texto grande da abertura de seção. */
.lead {
  font-size: var(--txt-lead);
  line-height: var(--entrelinha-lead);
  color: var(--texto-corpo);
}

/* Etiqueta em caixa alta — a única situação em que caixa alta é permitida. */
.etiqueta {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-primaria-escura);
}

/* Etiqueta sobre fundo escuro. `--cor-primaria-escura` sobre `--cor-escura`
   daria 1,7:1 e sumiria; `--texto-claro` sobre `--cor-escura` dá 14,9:1. */
.etiqueta--clara {
  color: var(--texto-claro);
  margin-bottom: var(--esp-3);
}

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

/* ------------------------------------------------------------------ foco */

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

.secao--escura :focus-visible,
.rodape :focus-visible {
  outline-color: var(--texto-claro);
}

/* ---------------------------------------------------------------- layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.secao {
  padding-block: var(--secao-padding);
}

.secao--destaque { padding-block: var(--secao-destaque); }
.secao--alt      { background: var(--cor-clara-alt); }
.secao--branca   { background: var(--cor-branco); }

/* Fundo escuro é ferramenta de ritmo: no máximo duas seções por página (§3). */
.secao--escura {
  background: var(--cor-escura);
  color: var(--texto-claro-suave);
}

.secao--escura h1,
.secao--escura h2,
.secao--escura h3,
.secao--escura h4 { color: var(--texto-claro); }

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

/* O `.lead` fixa `--texto-corpo` na própria classe, e declaração de autor
   vence a herança da seção — sem esta regra ele fica escuro sobre escuro
   (medido em 1,62:1). O `.hero` e a `.faixa-cta` já tinham a contra-regra
   desde o P29; a `.secao--escura` não tinha porque nenhuma seção escura
   usava lead até agora. Mesmo token das outras duas. */
.secao--escura .lead { color: var(--texto-claro-suave); }

/* Cabeçalho de seção: título centralizado + subtítulo curto. */
.secao__cabecalho {
  margin-bottom: var(--secao-cabecalho);
  text-align: center;
}

.secao__cabecalho h2 { margin-inline: auto; }

.secao__cabecalho .lead {
  margin-inline: auto;
  max-width: 52ch;
}

/* Título-declaração: frase longa que abre a seção. Recebe mais largura que os
   28ch da §4, senão vira uma coluna estreita de seis linhas. */
.titulo-declaracao { max-width: 34ch; }

/* Texto de apoio longo, centralizado e em corpo menor por decisão de
   24/08/2026 (D94). Contraria a §4, que limita parágrafo centralizado a 2
   linhas — este tem ~6. O corpo menor e a medida um pouco mais larga reduzem
   o número de linhas, que é o que mais pesa em texto centralizado.

   O seletor não depende mais do `.secao__cabecalho`: em 28/08/2026 o
   parágrafo desceu para baixo do carrossel (D130) e passou a viver solto na
   seção. `margin-inline: auto` é o que o mantém no eixo — sem ele a caixa
   encostaria à esquerda, que é o defeito do P30 e do P44. */
.lead--longo {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--txt-base);
  text-align: center;
}

/* Ênfase por cor no título. A §4 pede ênfase por peso e tamanho, não por cor;
   revogado em 24/08/2026 (D92) para este uso. Usa `--cor-primaria-escura`
   (4,97:1 sobre o creme), nunca `--cor-primaria`, que daria 3,61:1. */
.destaque { color: var(--cor-primaria-escura); }

/* Grades. Máximo de 3 colunas no desktop, 2 em tablet, 1 no celular (§8). */
.grade {
  display: grid;
  gap: var(--grade-gap);
  align-items: stretch;
}

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

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

/* Quatro por linha só a partir de 1280px. Em 1024px cada card cairia para
   ~208px, estreito demais para o texto respirar. Revoga o máximo de 3 da §8
   apenas nesta grade — ver D88. */
@media (min-width: 80em) {
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Bloco de texto corrido, centralizado a pedido do cliente em 28/08/2026
   (D123). Revoga, para este bloco, a regra da §4 que limita parágrafo
   centralizado a 2 linhas — aqui há parágrafos de até 4.

   A medida vai a 68ch, não fica nos 65ch da §4: em texto centralizado o que
   mais pesa é o número de linhas, porque as duas bordas ficam irregulares, e
   medida mais larga produz menos linhas. É a mesma mitigação da D94. */
.prosa {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}

.prosa p + p { margin-top: var(--esp-4); }

/* Lista de itens com título e descrição. Não é card de propósito: sem fundo
   nem borda, não compete com as grades de card da mesma página.

   Em grade a partir de 768px: empilhados, cinco itens curtos esticavam a
   seção sem necessidade. Fica em 3 colunas no desktop, o teto da §8 — cinco
   por linha dariam ~214px por coluna, a mesma largura que a D88 já havia
   recusado por apertar demais o texto. */
.lista-itens {
  display: grid;
  gap: var(--grade-gap);
  /* A medida de leitura só precisa de trava enquanto é coluna única: em
     grade, a própria coluna já limita a linha. */
  max-width: 65ch;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .lista-itens {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

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

/* Regra acima de cada item, não entre eles: em coluna única lê como lista
   dividida, e em grade as regras alinham e desenham a linha da fileira.

   O `margin: 0` desfaz o `li + li` global: empilhado ele era o espaçamento
   entre itens, mas em grade cada item tem área própria e a margem empurrava
   todos menos o primeiro 12px para baixo, desalinhando as regras da fileira.
   Aqui quem separa é o `gap`. */
.lista-itens > li {
  margin: 0;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda-sutil);
}

.secao--escura .lista-itens > li { border-top-color: var(--borda-escura); }

.lista-itens h3 { margin-bottom: var(--esp-2); }
.lista-itens p  { margin: 0; }

/* Retrato de pessoa. 1:1 e circular, como a §10 define para retrato.
   `max-width: none` não é preciso aqui: não há sangria, e o teto global de
   100% nunca chega a valer numa caixa de 7rem. */
.retrato {
  width: 7rem;
  height: 7rem;
  margin-bottom: var(--esp-4);
  border-radius: var(--raio-full);
  object-fit: cover;
}

/* Frase que liga um bloco ao próximo dentro da mesma seção. */
.secao__fecho {
  max-width: 65ch;
  margin: var(--esp-7) auto var(--esp-6);
}

/* Bloco de texto + imagem em duas colunas. */
.duas-colunas {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

@media (min-width: 64em) {
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: var(--esp-8); }
  /* Blocos alternam o lado a cada ocorrência (§12). */
  .duas-colunas--invertida > :first-child { order: 2; }
}

.empilhado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

@media (min-width: 30em) {
  .empilhado--acoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ------------------------------------------------------------ utilitários */

/* Esconde visualmente sem esconder do leitor de tela.
   NUNCA troque por display:none — some para a tecnologia assistiva também. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Primeiro elemento focável da página. */
.pular-para-conteudo {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-escura);
  color: var(--texto-claro);
  border-radius: var(--raio-md);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transicao-rapida);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
  color: var(--texto-claro);
}

/* Conteúdo largo rola dentro do próprio container, nunca a página (§11). */
.rolagem-interna {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Revelação ao rolar. Aplicada por JS; sem JS o conteúdo já nasce visível. */
.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transicao-lenta), transform var(--transicao-lenta);
}

.revelar.visivel {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* Zerar a duração não basta: um `animation-delay` sobrevive ao reset e
       seguraria o elemento invisível pelo tempo do atraso. */
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* O conteúdo nasce visível: nada de esperar uma animação que não virá. */
  .revelar {
    opacity: 1;
    transform: none;
  }
}