/* ==========================================================================
   AGC Digital — folha de estilo única
   Conceito: catálogo editorial impresso. Margens generosas, fios finos,
   hierarquia tipográfica clara, zero ruído decorativo.
   Sumário:
     01. Tokens
     02. Reset e base
     03. Tipografia
     04. Utilitários
     05. Layout: container e seções (margem de página)
     06. Cabeçalho e navegação
     07. Botões
     08. Hero
     09. Pilares numerados
     10. Cards (linhas editoriais)
     11. Etapas (como funciona)
     12. Motivos
     13. Ficha da editora
     14. FAQ
     15. Contato
     16. Formulário
     17. Páginas de documento (legais)
     18. 404
     19. Rodapé
     20. Banner LGPD
     21. Movimento
   ========================================================================== */

/* 01. TOKENS ============================================================== */

:root {
  /* Paleta — vocabulário do material escolar impresso */
  --tinta:      #1B2A4A;  /* azul-caneta escuro — títulos, header, rodapé */
  --papel:      #FBFAF7;  /* fundo geral, branco offset levemente quente */
  --superficie: #FFFFFF;  /* cards e blocos elevados */
  --pauta:      #D9E1EC;  /* fios, bordas, divisórias, grid */
  --grafite:    #59627A;  /* texto secundário, legendas */
  --correcao:   #C0402C;  /* acento único — máx. 4 usos por página */

  /* Derivados (não são novas cores, são estados) */
  --correcao-escuro: #A33726;      /* hover do botão primário (-8% de luz) */
  --papel-sobre-tinta: rgba(251, 250, 247, 0.74);
  --pauta-sobre-tinta: rgba(217, 225, 236, 0.20);

  /* Tipografia */
  --fonte-display: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte-corpo:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fonte-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Escala tipográfica (mobile → desktop) */
  --t-h1:      clamp(2.125rem, 1.30rem + 3.55vw, 3.5rem);    /* 34 → 56 */
  --t-h2:      clamp(1.625rem, 1.32rem + 1.30vw, 2.25rem);   /* 26 → 36 */
  --t-h3:      clamp(1.1875rem, 1.15rem + 0.16vw, 1.3125rem);/* 19 → 21 */
  --t-corpo:   clamp(1rem, 0.976rem + 0.10vw, 1.0625rem);    /* 16 → 17 */
  --t-mono:    0.75rem;    /* 12px — rótulos */
  --t-mono-sm: 0.6875rem;  /* 11px — ficha, rodapé */
  --t-mono-md: 0.8125rem;  /* 13px — ficha da editora */

  /* Espaçamento */
  --espaco-secao: 64px;
  --container-max: 1140px;
  --container-pad: 24px;
  --margem-col: 0px;   /* largura da margem de página; ganha valor em ≥1024px */

  /* Formas e tempos */
  --raio: 4px;
  --transicao: 180ms ease;
  --duracao-revelar: 420ms;
}

@media (min-width: 768px) {
  :root { --container-pad: 40px; }
}

@media (min-width: 1024px) {
  :root {
    --espaco-secao: 112px;
    --margem-col: 168px;
  }
}

/* 02. RESET E BASE ======================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

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

hr {
  border: 0;
  border-top: 1px solid var(--pauta);
  margin: 0;
}

/* Foco visível e customizado — nunca outline:none sem substituto */
:focus-visible {
  outline: 2px solid var(--correcao);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--pauta); color: var(--tinta); }

/* Pular para o conteúdo */
.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinta);
  color: var(--papel);
  padding: 12px 20px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  text-decoration: none;
}
.pular-link:focus { left: 0; }

/* 03. TIPOGRAFIA ========================================================== */

h1, h2 {
  font-family: var(--fonte-display);
  font-weight: 600;
  color: var(--tinta);
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--tinta);
}

h4 { font-size: 1rem; }

p { max-width: 68ch; }

.texto-secundario { color: var(--grafite); }

.subtitulo {
  font-size: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  line-height: 1.6;
  color: var(--grafite);
  max-width: 62ch;
}

/* Eyebrow / rótulo em mono — é ela que dá o ar documental */
.rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
  margin: 0;
}

.rotulo--tinta { color: var(--tinta); }
.rotulo--acento { color: var(--correcao); }

/* Link de texto corrido: sublinhado fino que vira acento no hover */
.link {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--pauta);
  padding-bottom: 1px;
  transition: border-color var(--transicao), color var(--transicao);
}
.link:hover { border-bottom-color: var(--correcao); }

.prosa > * + * { margin-top: 20px; }
.prosa a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pauta); }
.prosa a:hover { text-decoration-color: var(--correcao); }

/* 04. UTILITÁRIOS ========================================================= */

.visualmente-oculto {
  position: absolute !important;
  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;
}

.sem-quebra { white-space: nowrap; }

/* 05. LAYOUT: CONTAINER E SEÇÕES ========================================= */

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

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

/* A regra é única: só .secao define o espaço vertical entre blocos.
   Modificadores ajustam, nenhum outro seletor sobrescreve. */
.secao--compacta { padding-block: calc(var(--espaco-secao) * 0.6); }
.secao--topo-zero { padding-top: 0; }
.secao--fio { border-top: 1px solid var(--pauta); }
.secao--superficie { background: var(--superficie); border-block: 1px solid var(--pauta); }

/* Margem de página: fio vertical de 1px à esquerda do conteúdo, com o
   rótulo da seção no topo dessa margem. Só existe em ≥1024px. */
.secao__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.secao__margem { display: block; }

.secao__corpo > * + * { margin-top: 24px; }
.secao__corpo > .rotulo + * { margin-top: 12px; }

@media (min-width: 1024px) {
  .secao__grade {
    grid-template-columns: var(--margem-col) minmax(0, 1fr);
    gap: 0;
  }
  .secao__margem {
    border-right: 1px solid var(--pauta);
    padding-right: 24px;
    padding-top: 6px;
  }
  .secao__corpo { padding-left: 48px; }
}

/* Cabeçalho de seção (dentro de .secao__corpo) */
.secao__titulo { margin: 0; }
.secao__intro {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--grafite);
  max-width: 60ch;
}

/* 06. CABEÇALHO E NAVEGAÇÃO ============================================== */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao);
}
.cabecalho.esta-rolado { border-bottom-color: var(--pauta); }

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.marca img, .marca svg { height: 26px; width: auto; }

.nav { display: none; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transicao);
}
.nav__link:hover { border-bottom-color: var(--correcao); }
.nav__link[aria-current="page"] { border-bottom-color: var(--tinta); }

.cabecalho__acao { display: none; }

/* Botão hambúrguer — abaixo de 900px */
.menu-alternar {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--pauta);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao);
}
.menu-alternar:hover { border-color: var(--tinta); }
.menu-alternar span {
  display: block;
  height: 1px;
  background: var(--tinta);
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-alternar[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-alternar[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-alternar[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Painel do menu mobile */
.menu-movel {
  display: none;
  border-top: 1px solid var(--pauta);
  background: var(--papel);
}
.menu-movel.esta-aberto { display: block; }

.menu-movel__lista {
  display: flex;
  flex-direction: column;
  padding-block: 12px 24px;
}
.menu-movel__lista a {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--pauta);
}
.menu-movel__lista a:last-child { border-bottom: 0; }
.menu-movel .btn { margin-top: 20px; width: 100%; }

@media (min-width: 900px) {
  .nav { display: block; }
  .cabecalho__acao { display: inline-flex; }
  .menu-alternar { display: none; }
  .menu-movel, .menu-movel.esta-aberto { display: none; }
}

/* 07. BOTÕES ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  font-family: var(--fonte-corpo);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.btn--primario {
  background: var(--correcao);
  color: #FFFFFF;
}
.btn--primario:hover { background: var(--correcao-escuro); }

.btn--secundario {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.btn--secundario:hover { background: var(--tinta); color: var(--papel); }

.btn--compacto { padding: 11px 20px; font-size: 0.875rem; }

.btn--claro {
  background: transparent;
  border-color: var(--papel-sobre-tinta);
  color: var(--papel);
}
.btn--claro:hover { background: var(--papel); color: var(--tinta); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.acoes--espaco { margin-top: 32px; }

/* 08. HERO =============================================================== */

.hero { padding-block: 56px calc(var(--espaco-secao) * 0.85); }

@media (min-width: 1024px) {
  .hero { padding-block: 88px var(--espaco-secao); }
}

.hero__titulo { margin-top: 16px; }

.hero__sub {
  margin-top: 24px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--grafite);
  max-width: 60ch;
}

.hero__acoes { margin-top: 36px; }

.hero__meta {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--pauta);
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* 09. PILARES NUMERADOS ================================================== */

.pilares {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--pauta);
}

.pilar {
  padding: 28px 0;
  border-bottom: 1px solid var(--pauta);
}

/* Cinza, não vermelho: cinco números em --correcao estourariam sozinhos
   o teto de 4 usos do acento por página. */
.pilar__num {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--grafite);
}

.pilar__titulo { margin-top: 10px; }
.pilar__texto { margin-top: 8px; color: var(--grafite); max-width: 44ch; }

@media (min-width: 768px) {
  /* Sem gap: os fios são compartilhados e formam uma grade contínua,
     como a paginação de um catálogo impresso. O respiro vem do padding. */
  .pilares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid var(--pauta);
  }
  .pilar {
    padding: 26px 28px 32px;
    border-right: 1px solid var(--pauta);
  }
  /* 3 + 2 no desktop: o quarto e o quinto ocupam a primeira e a segunda coluna */
  .pilar:nth-child(4), .pilar:nth-child(5) { border-bottom: 1px solid var(--pauta); }
}

/* 10. CARDS — LINHAS EDITORIAIS ========================================= */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 40px;
}

@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--pauta);
  border-radius: var(--raio);
  padding: 28px 24px;
  transition: border-color var(--transicao);
}
.card:hover { border-color: var(--tinta); }

.card__titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card__texto {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grafite);
  flex: 1 1 auto;
}

.card__formato {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--pauta);
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* Rótulo de formato solto (fora de card), usado em materiais.html */
.formato {
  display: inline-block;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--pauta);
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* 11. ETAPAS — COMO FUNCIONA ============================================ */

.etapas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 40px;
}

.etapa {
  position: relative;
  padding: 0 0 32px 32px;
  border-left: 1px solid var(--pauta);
}
.etapa:last-child { padding-bottom: 0; border-left-color: transparent; }

.etapa__num {
  position: absolute;
  left: 0;
  top: 2px;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--papel);
  border: 1px solid var(--pauta);
  border-radius: 50%;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  color: var(--tinta);
}

.etapa__titulo { margin-bottom: 8px; }
.etapa__texto { color: var(--grafite); font-size: 0.9375rem; max-width: 40ch; }

@media (min-width: 900px) {
  .etapas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
  }
  .etapa {
    padding: 46px 0 0 0;
    border-left: 0;
    border-top: 1px solid var(--pauta);
  }
  .etapa:last-child { border-top-color: var(--pauta); }
  .etapa__num {
    top: -13px;
    left: 0;
    transform: none;
  }
}

/* 12. MOTIVOS ============================================================ */

.motivos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .motivos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
}

.motivo__titulo { padding-top: 16px; border-top: 1px solid var(--tinta); }
.motivo__texto { margin-top: 10px; color: var(--grafite); font-size: 0.9375rem; max-width: 46ch; }

/* 13. FICHA DA EDITORA — elemento-assinatura ============================= */

.sobre-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}

@media (min-width: 1000px) {
  .sobre-grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
  }
}

.ficha {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--tinta);
  border-radius: 0;
  padding: 32px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-md);
  line-height: 1.5;
  color: var(--tinta);
}

/* Fio de 1px em --correcao, 40px, no canto superior esquerdo:
   a marca de revisão. Decorativo. */
.ficha::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 1px;
  background: var(--correcao);
}

/* Ficha isolada (topo de sobre.html), fora da grade de duas colunas. */
.ficha--destaque { margin-top: 40px; max-width: 520px; }

.ficha__titulo {
  margin: 12px 0 22px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

.ficha__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}

.ficha__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

@media (min-width: 420px) {
  .ficha__linha {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
  /* A ficha em destaque é mais larga: cabe a coluna de rótulos que
     comporta "NOME FANTASIA" em uma linha só. */
  .ficha--destaque .ficha__linha { grid-template-columns: 132px minmax(0, 1fr); }
}

.ficha__rotulo {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
  margin: 0;
}

.ficha__valor {
  margin: 0;
  max-width: none;
  word-break: break-word;
}

.ficha__valor a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--pauta); }
.ficha__valor a:hover { border-bottom-color: var(--correcao); }

/* 14. FAQ ================================================================ */

.faq {
  margin-top: 40px;
  border-top: 1px solid var(--pauta);
  max-width: 76ch;
}

.faq__item { border-bottom: 1px solid var(--pauta); }

.faq__pergunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  list-style: none;
  transition: color var(--transicao);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--correcao); }

.faq__pergunta::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--fonte-mono);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--grafite);
}
.faq__item[open] .faq__pergunta::after { content: "–"; }

.faq__resposta {
  padding-bottom: 24px;
  color: var(--grafite);
  font-size: 0.9375rem;
}
.faq__resposta > * + * { margin-top: 12px; }

/* 15. CONTATO ============================================================ */

.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 40px;
  border-top: 1px solid var(--pauta);
  padding-top: 32px;
}

@media (min-width: 800px) {
  .contato-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

.contato-bloco__rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

.contato-bloco__valor {
  margin-top: 10px;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.contato-bloco__valor a {
  text-decoration: none;
  border-bottom: 1px solid var(--pauta);
  word-break: break-word;
  transition: border-color var(--transicao);
}
.contato-bloco__valor a:hover { border-bottom-color: var(--correcao); }

.contato-bloco__nota { margin-top: 8px; font-size: 0.875rem; color: var(--grafite); }

.contato-horario {
  margin-top: 28px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* 16. FORMULÁRIO ========================================================= */

.form-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  margin-top: 40px;
  align-items: start;
}

@media (min-width: 1000px) {
  .form-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 64px; }
}

.form {
  display: grid;
  gap: 22px;
  max-width: 620px;
}

.campo { display: grid; gap: 7px; }

.campo__label {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

.campo__controle {
  width: 100%;
  padding: 13px 14px;
  background: var(--superficie);
  border: 1px solid var(--pauta);
  border-radius: var(--raio);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--transicao);
}
.campo__controle:hover { border-color: var(--grafite); }
.campo__controle:focus-visible { border-color: var(--tinta); }

textarea.campo__controle { min-height: 148px; resize: vertical; }

select.campo__controle {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--grafite) 50%),
                    linear-gradient(135deg, var(--grafite) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.campo--invalido .campo__controle { border-color: var(--correcao); }

.campo__erro {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--correcao);
  min-height: 0;
}
.campo__erro:empty { display: none; }

.campo__dica { font-size: 0.8125rem; color: var(--grafite); }

/* Honeypot anti-spam */
.campo--armadilha {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  padding: 14px 16px;
  border: 1px solid var(--pauta);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.form__status:empty { display: none; }
.form__status--ok { border-color: var(--tinta); }
.form__status--erro { border-color: var(--correcao); color: var(--correcao); }

/* 17. PÁGINAS DE DOCUMENTO (legais) ====================================== */

.doc__cabecalho { padding-block: 48px 32px; border-bottom: 1px solid var(--pauta); }

.doc__atualizacao {
  margin-top: 20px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
}

.doc__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: 48px var(--espaco-secao);
  align-items: start;
}

@media (min-width: 1024px) {
  .doc__corpo { grid-template-columns: 232px minmax(0, 1fr); gap: 64px; }
  .doc__indice { position: sticky; top: 96px; }
}

.doc__indice-titulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pauta);
}

.doc__indice-lista { margin-top: 14px; display: grid; gap: 9px; }
.doc__indice-lista a {
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--grafite);
  border-bottom: 1px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.doc__indice-lista a:hover { color: var(--tinta); border-bottom-color: var(--correcao); }

.doc__secao + .doc__secao { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--pauta); }
.doc__secao { scroll-margin-top: 96px; }

.doc__num {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--grafite);
}

.doc__secao h2 {
  font-size: clamp(1.25rem, 1.15rem + 0.42vw, 1.5rem);
  margin-top: 8px;
}

.doc__secao > * + * { margin-top: 16px; }
.doc__secao h3 { margin-top: 28px; }

.lista-marcada { display: grid; gap: 10px; max-width: 68ch; }
.lista-marcada li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grafite);
}
/* Traço em --grafite, não em --correcao: uma página legal tem dezenas de
   itens de lista e o acento estouraria o teto de 4 usos por página. */
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--grafite);
}
.lista-marcada li strong { color: var(--tinta); font-weight: 500; }

.rotulo + .lista-marcada { margin-top: 16px; }

.lista-numerada { counter-reset: item; display: grid; gap: 10px; max-width: 68ch; }
.lista-numerada li {
  counter-increment: item;
  position: relative;
  padding-left: 34px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grafite);
}
.lista-numerada li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  color: var(--grafite);
}

code {
  font-family: var(--fonte-mono);
  font-size: 0.875em;
  background: var(--superficie);
  border: 1px solid var(--pauta);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--tinta);
}

.nota {
  padding: 20px 22px;
  background: var(--superficie);
  border: 1px solid var(--pauta);
  border-left: 2px solid var(--correcao);
  border-radius: 0;
  font-size: 0.9375rem;
  color: var(--grafite);
}

/* 18. 404 ================================================================ */

.erro {
  display: grid;
  align-content: center;
  min-height: 62vh;
  padding-block: var(--espaco-secao);
}
.erro__codigo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--correcao);
}
.erro__titulo { margin-top: 16px; }
.erro__texto { margin-top: 20px; color: var(--grafite); max-width: 52ch; }
.erro__acoes { margin-top: 32px; }

/* 19. RODAPÉ ============================================================= */

.rodape {
  background: var(--tinta);
  color: var(--papel);
  padding-block: 56px 0;
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 44px;
}

@media (min-width: 800px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 48px;
  }
}

.rodape__marca img, .rodape__marca svg { height: 24px; width: auto; }
.rodape__descricao {
  margin-top: 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--papel-sobre-tinta);
  max-width: 38ch;
}

.rodape__titulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-sobre-tinta);
  margin-bottom: 16px;
}

.rodape__lista { display: grid; gap: 11px; }
.rodape__lista a, .rodape__contato a {
  color: var(--papel);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao);
  word-break: break-word;
}
.rodape__lista a:hover, .rodape__contato a:hover { border-bottom-color: var(--correcao); }
.rodape__contato { display: grid; gap: 11px; font-size: 0.9375rem; line-height: 1.6; }
.rodape__contato span { color: var(--papel-sobre-tinta); }

.rodape :focus-visible { outline-color: var(--papel); }

/* Faixa institucional — o bloco que o revisor da Meta procura */
.rodape__institucional {
  border-top: 1px solid var(--pauta-sobre-tinta);
  padding-block: 28px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.rodape__institucional p { max-width: none; margin: 0; }
.rodape__razao { color: var(--papel); }
.rodape__dados { color: var(--papel-sobre-tinta); }
.rodape__dados a { color: var(--papel-sobre-tinta); text-decoration: none; border-bottom: 1px solid var(--pauta-sobre-tinta); }
.rodape__dados a:hover { color: var(--papel); border-bottom-color: var(--correcao); }

.rodape__base {
  border-top: 1px solid var(--pauta-sobre-tinta);
  padding-block: 22px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.04em;
  color: var(--papel-sobre-tinta);
}

.rodape__legais {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.rodape__legais a {
  color: var(--papel-sobre-tinta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.rodape__legais a:hover { color: var(--papel); border-bottom-color: var(--correcao); }

/* 20. BANNER LGPD ======================================================== */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--superficie);
  border-top: 1px solid var(--tinta);
  padding: 18px 0;
}
.cookies[hidden] { display: none; }

.cookies__interno {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 800px) {
  .cookies__interno { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}

.cookies__texto {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--grafite);
  max-width: 76ch;
  margin: 0;
}
.cookies__texto a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.cookies__acoes { flex: 0 0 auto; }

/* 21. MOVIMENTO ========================================================== */

.revelar {
  opacity: 0;
  transform: translateY(8px);
}

.revelar--pronto {
  transition: opacity var(--duracao-revelar) ease, transform var(--duracao-revelar) ease;
  transition-delay: var(--atraso, 0ms);
}

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

/* Sem JS, nada fica invisível */
.sem-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* Impressão ============================================================== */

@media print {
  .cabecalho, .menu-movel, .cookies, .pular-link { display: none !important; }
  body { background: #fff; }
  .revelar { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}