/* ==========================================================================
   base.css — reset, tipografia base, acessibilidade
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* rolagem suave é papel do Lenis, não do CSS nativo */
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--creme);
  color: var(--marrom);
  font-family: var(--fonte-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 700;
  text-transform: none;
}

p {
  margin: 0;
  max-width: 62ch;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Container padrão */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Olho de seção (eyebrow) */
.olho {
  display: block;
  font-family: var(--fonte-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cor-olho);
}

/* Filete metálico — único ornamento permitido */
.filete {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--filete-gradiente);
  border: 0;
  margin: 0;
}

/* Contexto claro/escuro por custom property, não por seletor de ancestral.
   Isso importa porque a Áreas de Atuação encaixa um card CREME dentro de
   uma seção PRETA — com seletor de ancestral, a regra que "ganha" depende
   da ordem no arquivo CSS, não de qual container está mais perto no DOM.
   Custom property herda pela proximidade real, então um .secao--clara
   aninhado dentro de um .secao--escura sempre resolve certo. */
:root {
  --cor-secao-texto: var(--marrom);
  --cor-secao-texto-secundario: var(--marrom-medio);
  --cor-foco: var(--marrom);
  --cor-olho: var(--terracota);
  /* --linha-secao e --cor-indice alimentam os dispositivos de grade
     (régua vertical + numeração fantasma) que costuram todas as seções
     num sistema único — ver secoes.css. Mesma lógica de herança por
     proximidade real, não por seletor de ancestral. */
  --linha-secao: var(--linha-clara);
  --cor-indice: rgba(61, 29, 15, 0.05);
  /* Mais fraca que --linha-secao: são quatro linhas varrendo a seção
     inteira, não uma. Na opacidade da régua única elas viravam pauta de
     caderno e competiam com o texto (14/09/2026; baixada mais um pouco no
     mesmo dia, a pedido do cliente; cortada pela metade em 08/10/2026, a
     pedido do Amon). */
  --linha-grade-fundo: rgba(61, 29, 15, 0.025);
}

.secao--escura {
  --cor-secao-texto: var(--creme);
  --cor-secao-texto-secundario: var(--creme-secundario);
  --cor-foco: var(--creme);
  --cor-olho: var(--terracota-clara);
  --linha-secao: var(--linha-escura);
  --cor-indice: rgba(249, 246, 234, 0.06);
  --linha-grade-fundo: rgba(249, 246, 234, 0.02);
  --cor-secao-texto-apoio: rgba(249, 246, 234, 0.78);
}

.secao--terracota {
  --cor-secao-texto: var(--creme);
  --cor-secao-texto-secundario: rgba(249, 246, 234, 0.8);
  --cor-foco: var(--creme);
  --cor-olho: var(--creme);
  --linha-secao: rgba(249, 246, 234, 0.22);
  --cor-indice: rgba(249, 246, 234, 0.12);
  --linha-grade-fundo: rgba(249, 246, 234, 0.075);
}

.secao--clara {
  --cor-secao-texto: var(--marrom);
  --cor-secao-texto-secundario: var(--marrom-medio);
  --cor-foco: var(--marrom);
  --cor-olho: var(--terracota);
  --linha-secao: var(--linha-clara);
  --cor-indice: rgba(61, 29, 15, 0.05);
  --linha-grade-fundo: rgba(61, 29, 15, 0.025);
}

/* Foco visível — nunca depender só de cor */
:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}

/* Pular para o conteúdo — primeiro alvo de tabulação da página */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--preto);
  color: var(--creme);
  font-size: var(--fs-small);
}

.pular-conteudo:focus {
  left: var(--gutter);
  top: var(--sp-3);
}

/* sr-only: conteúdo só para leitor de tela (usado pelo SplitText) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fotografia em cor plena, sem filtro (design.md §6, revertido em 10/09/2026) */
.foto-hover {
  overflow: hidden;
}

.foto-hover img {
  transition: transform var(--dur-hover-img) ease-out;
}

.foto-hover:hover img,
.foto-hover:focus-within img {
  transform: scale(1.03);
}

/* prefers-reduced-motion: tudo desligado, conteúdo aparece no estado final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}