/* base.css — ADAMA
   Reinicio, tipografia, grade e as peças que toda página usa.
   Importa depois de tokens.css, que só declara variável e não estiliza nada. */

/* ---------------------------------------------------------------- Fontes
   Duas famílias, quatro arquivos. Archivo entra como fonte variável,
   o que cobre os pesos 700 e 800 sem custar dois arquivos. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fontes/archivo-variavel.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fontes/barlow-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fontes/barlow-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fontes/barlow-condensed-400.woff2') format('woff2');
}

/* ------------------------------------------- Reserva de métrica ajustada
   O Arial ocupa espaço diferente do Archivo e do Barlow. Enquanto a fonte da
   marca não chegava, o texto tinha outra altura, e tudo que vinha abaixo dele
   pulava quando ela chegava. Medido: 0,122 de deslocamento de layout no
   celular em rede lenta, quase todo na foto de abertura sendo empurrada.

   Os quatro ajustes abaixo foram calculados arquivo a arquivo, comparando a
   largura média e as métricas verticais de cada .woff2 com as do Arial. Com
   eles a reserva ocupa o mesmo espaço, e a troca não mexe no layout.

   Refazer o cálculo se alguma das famílias for trocada. Em sistema sem Arial,
   o navegador simplesmente ignora estas regras e segue a pilha normal. */

@font-face {
  font-family: 'Archivo reserva';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
  size-adjust: 105.53%;
  ascent-override: 83.20%;
  descent-override: 19.90%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow reserva';
  font-weight: 400;
  src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
  size-adjust: 98.85%;
  ascent-override: 101.17%;
  descent-override: 20.23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow reserva';
  font-weight: 600;
  src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Roboto Medium'), local('Liberation Sans Bold');
  size-adjust: 92.52%;
  ascent-override: 108.09%;
  descent-override: 21.62%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Condensed reserva';
  src: local('Arial Narrow'), local('Roboto Condensed'), local('Liberation Sans Narrow');
  size-adjust: 94.82%;
  ascent-override: 105.46%;
  descent-override: 21.09%;
  line-gap-override: 0%;
}

/* O tokens.css continua mandando nos valores, e não deve ser editado à mão.
   Aqui a pilha só ganha a reserva ajustada no meio, entre a fonte da marca e
   o Arial cru, que continua como último recurso. */
:root {
  --fonte-display: 'Archivo', 'Archivo reserva', 'Arial Narrow', Arial, sans-serif;
  --fonte-texto: 'Barlow', 'Barlow reserva', 'Helvetica Neue', Arial, sans-serif;
  --fonte-dado: 'Barlow Condensed', 'Barlow Condensed reserva', 'Arial Narrow', Arial, sans-serif;
}

/* ------------------------------------------------------------- Reinicio */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecalho-celular) + var(--espaco-md));
}

body {
  margin: 0;
  background: var(--cor-gi-puro);
  color: var(--cor-preto-dojo);
  font-family: var(--fonte-texto);
  font-size: var(--corpo-corpo);
  font-weight: 400;
  line-height: var(--altura-linha-corpo);
  -webkit-font-smoothing: antialiased;
}

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

img { height: auto; }

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

/* Raio zero em tudo, e isso não é provisório. Vale inclusive contra o
   arredondamento que o navegador aplica sozinho em campo e em botão. */
* { border-radius: var(--raio); }

/* Nada anima na entrada da página. Movimento só em hover, foco e abertura. */
a,
button,
summary,
input,
textarea,
.cartao {
  transition:
    background-color var(--duracao) var(--curva),
    border-color var(--duracao) var(--curva),
    color var(--duracao) var(--curva);
}

@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;
  }
}

/* ----------------------------------------------------------------- Foco
   Contorno de 3 px em Tatame, deslocado 2 px. Visível em tudo que recebe
   teclado, e nunca removido. */

:focus-visible {
  outline: var(--foco-espessura) solid var(--cor-tatame);
  outline-offset: var(--foco-deslocamento);
}

/* ---------------------------------------------------------- Tipografia */

h1, h2, h3, h4 {
  margin: 0 0 var(--espaco-sm);
  font-family: var(--fonte-display);
  line-height: var(--altura-linha-titulo);
  /* Evita palavra órfã na última linha sem encurtar as linhas de cima. */
  text-wrap: pretty;
}

/* O equilíbrio de linhas fica no título de seção, que é curto e se beneficia.
   No título longo e no título dentro de coluna estreita ele faz o contrário
   do que promete: encolhe toda linha para igualar com a última, e o bloco
   quebra bem antes da borda. */
h2 { text-wrap: balance; }

h1 {
  font-size: var(--corpo-h1);
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--corpo-h2);
  font-weight: 700;
  font-stretch: 85%;
}

h3 {
  font-size: var(--corpo-h3);
  font-weight: 700;
}

p { margin: 0 0 var(--espaco-sm); }

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

strong { font-weight: 600; }

a { color: var(--cor-terracota); }

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

ul, ol { padding-left: var(--espaco-md); }

/* A marca em texto corrido nunca é deformada nem recolorida. */
abbr[title] { text-decoration: none; }

.hero {
  font-size: var(--corpo-hero);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

.rotulo {
  display: block;
  margin: 0 0 var(--espaco-xs);
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
  color: var(--cor-terracota);
}

.rotulo--claro { color: var(--cor-dourado); }

.apoio {
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

.dado {
  font-family: var(--fonte-dado);
  font-size: var(--corpo-apoio);
  font-variant-numeric: tabular-nums;
}

/* Frase curta que acompanha toda idade mostrada no site.
   A idade orienta e não restringe: decisão da ADAMA em 31/08/2026. */
.nota-idade {
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

/* ---------------------------------------------------------- Grade e respiro */

.pagina {
  width: 100%;
  max-width: calc(var(--largura-pagina) + 2 * var(--margem-celular));
  margin-inline: auto;
  padding-inline: var(--margem-celular);
}

.texto { max-width: var(--largura-texto); }

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

.secao--clara { background: var(--cor-gi); }

.secao--escura {
  background: var(--cor-preto-dojo);
  color: var(--cor-gi);
}

.secao--escura h2,
.secao--escura h3 { color: var(--cor-gi); }

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

.secao__cabecalho { margin-bottom: var(--espaco-lg); }

.secao__cabecalho h2 { margin-bottom: 0; }

.secao__cabecalho p { margin-top: var(--espaco-sm); }

/* A faixa. Barra sólida de 8 px, largura inteira, sem texto e sem degradê. */
.faixa {
  height: var(--faixa-altura);
  background: var(--cor-terracota);
}

.faixa--dourada { background: var(--cor-dourado); }

/* Pula para o conteúdo, primeiro alvo de tabulação da página. */
.pular {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--espaco-sm) var(--espaco-md);
  background: var(--cor-preto-dojo);
  color: var(--cor-gi);
  text-decoration: none;
}

.pular:focus {
  left: var(--espaco-sm);
  top: var(--espaco-sm);
  color: var(--cor-gi);
}

/* --------------------------------------------------------------- Botão */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--botao-altura);
  padding: 0 var(--botao-padding-h);
  border: none;
  background: var(--cor-terracota);
  color: var(--cor-gi);
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: var(--botao-peso);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  background: #9a2c00; /* Terracota escurecido em 8% */
  color: var(--cor-gi);
}

.botao:active { background: #8f2900; } /* escurecido em 14% */

.botao[disabled],
.botao[aria-disabled='true'] {
  opacity: 0.4;
  cursor: default;
}

.botao--secundario {
  background: transparent;
  border: 2px solid var(--cor-preto-dojo);
  color: var(--cor-preto-dojo);
}

.botao--secundario:hover {
  background: var(--cor-preto-dojo);
  color: var(--cor-gi);
}

.botao--claro {
  background: transparent;
  border: 2px solid var(--cor-gi);
  color: var(--cor-gi);
}

.botao--claro:hover {
  background: var(--cor-gi);
  color: var(--cor-preto-dojo);
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
}

/* Link de texto dentro de parágrafo e de cartão. */
.ligacao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  min-height: var(--alvo-toque);
  color: var(--cor-terracota);
  font-weight: 600;
  text-decoration: none;
}

.ligacao:hover {
  color: var(--cor-terracota);
  text-decoration: underline;
}

.ligacao::after {
  content: '\2192';
  font-family: var(--fonte-texto);
}

/* ------------------------------------------------------------- Cabeçalho */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cor-gi);
  border-bottom: var(--fio) solid var(--cor-risco);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  min-height: var(--cabecalho-celular);
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cabecalho__marca img { height: var(--marca-celular); width: auto; }

.menu__botao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-xs);
  margin-right: calc(-1 * var(--espaco-xs));
  border: none;
  background: none;
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
  cursor: pointer;
}

.menu__barras {
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--cor-preto-dojo);
}

.menu__barras::before,
.menu__barras::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--cor-preto-dojo);
}

.menu__barras::before { top: -6px; }
.menu__barras::after { top: 6px; }

.menu__botao[aria-expanded='true'] .menu__barras { background: transparent; }

.menu__botao[aria-expanded='true'] .menu__barras::before { top: 0; transform: rotate(45deg); }

.menu__botao[aria-expanded='true'] .menu__barras::after { top: 0; transform: rotate(-45deg); }

/* No celular o menu abre em painel de tela inteira, com item de 48 px. */
.menu {
  display: none;
  position: fixed;
  inset: var(--cabecalho-celular) 0 0;
  padding: var(--espaco-md) var(--margem-celular) var(--espaco-xl);
  background: var(--cor-gi);
  overflow-y: auto;
}

.menu[data-aberto='sim'] { display: block; }

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

.menu__lista a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: var(--fio) solid var(--cor-risco);
  color: var(--cor-preto-dojo);
  font-family: var(--fonte-display);
  font-size: var(--corpo-h3);
  font-weight: 700;
  text-decoration: none;
}

.menu__lista a[aria-current='page'] { color: var(--cor-terracota); }

.menu__lista a:hover { color: var(--cor-terracota); }

/* --------------------------------------------------------------- Rodapé */

.rodape {
  background: var(--cor-preto-dojo);
  color: var(--cor-gi);
  padding-block: var(--espaco-xl) var(--espaco-lg);
}

.rodape a {
  color: var(--cor-gi);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--cor-gi);
  text-decoration: underline;
}

.rodape__grade {
  display: grid;
  gap: var(--espaco-lg);
}

.rodape__marca img {
  height: 44px;
  width: auto;
  margin-bottom: var(--espaco-md);
}

.rodape__razao {
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: var(--espaco-xs);
}

/* O CNPJ no rodapé é a primeira coisa que um analista procura. */
.rodape__dados {
  font-size: var(--corpo-apoio);
  color: var(--cor-gi);
}

.rodape__dados p { margin-bottom: var(--espaco-xs); }

.rodape__navegacao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-md);
}

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

.rodape__navegacao li + li { margin-top: var(--espaco-xs); }

.rodape__navegacao a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  font-size: var(--corpo-apoio);
}

.rodape__fim {
  margin-top: var(--espaco-lg);
  padding-top: var(--espaco-md);
  border-top: var(--fio) solid #2a2a2a;
  font-size: var(--corpo-micro);
  color: var(--cor-risco);
}

/* ------------------------------------------------------- Pontos de quebra */

@media (min-width: 768px) {
  .pagina {
    max-width: calc(var(--largura-pagina) + 2 * var(--margem-tablet));
    padding-inline: var(--margem-tablet);
  }

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

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

  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--cabecalho-desktop) + var(--espaco-md)); }

  .pagina {
    max-width: calc(var(--largura-pagina) + 2 * var(--margem-desktop));
    padding-inline: var(--margem-desktop);
  }

  .cabecalho__interno { min-height: var(--cabecalho-desktop); }

  .cabecalho__marca img { height: var(--marca-desktop); }

  .menu__botao { display: none; }

  .menu {
    display: block;
    position: static;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .menu__lista {
    display: flex;
    align-items: center;
    gap: var(--espaco-md);
  }

  .menu__lista a {
    min-height: var(--cabecalho-desktop);
    /* O fio nasce transparente para o item atual não empurrar o vizinho. */
    border-bottom: 2px solid transparent;
    font-family: var(--fonte-texto);
    font-size: var(--corpo-apoio);
    font-weight: 400;
  }

  /* A página atual recebe fio de 2 px em Terracota sob o item. */
  .menu__lista a[aria-current='page'] {
    border-bottom-color: var(--cor-terracota);
    color: var(--cor-preto-dojo);
    font-weight: 600;
  }

  .rodape__grade { grid-template-columns: 1.2fr 1fr; }
}