/* Ouvidoria Ruediger — identidade: branco dominante, estrutura petróleo,
   ações verdes, texto grafite, títulos Cormorant Garamond, corpo Lora. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* Cores exatas do Manual da Marca (v1.0): Petróleo #1F5A65, Verde #276F5B,
   Grafite #3C3C3B. Os valores anteriores eram aproximações. */
:root {
  --petroleo: var(--rha-color-petroleum);
  --petroleo-escuro: var(--rha-color-petroleum-dark);
  --verde: var(--rha-color-green);
  --verde-claro: #f2f8f4;
  --grafite: var(--rha-color-graphite);
  --linha: var(--rha-color-line);
  --controle-borda: #7b8c90;
  --fundo: #f7fafa;
  --erro: #7c352e;
  --erro-fundo: #faf3f2;
  --erro-borda: #e4c8c4;
  /* Um contêiner para vínculo, cabeçalho, conteúdo e rodapé. Os blocos
     preenchem sua área útil; o recuo dos campos vem apenas do cartão. */
  --largura-pagina: 55rem;
  --margem-pagina: 1.25rem;
  /* Limite de leitura dos documentos longos, independente do formulário. */
  --medida: 51.875rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--grafite);
  background: var(--fundo);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  /* O manual veda bold em Cormorant e só a face 600 é carregada; sem declarar
     o peso, o padrão bold do navegador sintetizaria a fonte onde ela faltasse. */
  font-weight: 600;
  color: var(--petroleo);
  line-height: 1.2;
  margin: 0 0 12px;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: 1.2rem; }

a { color: var(--petroleo); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

.pular-conteudo {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 6px;
  background: var(--petroleo);
  color: #ffffff;
}

.pular-conteudo:focus {
  transform: translateY(0);
}

code {
  background: var(--verde-claro);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.ambiente-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  min-height: 44px;
  padding: 8px 20px;
  border-bottom: 1px solid #d6a84b;
  background: #fff3cd;
  color: #5b4214;
  font-size: 0.84rem;
  text-align: center;
}

.ambiente-aviso strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 560px) {
  .ambiente-aviso {
    flex-direction: column;
    gap: 0;
  }
}

/* Porta de volta ao site institucional (achado P3-2 da auditoria de UX de
   2026-08-17: nenhum link da home saía do canal). Barra fina em petróleo, o
   mesmo padrão do Portal do Cliente — e o único uso de fundo escuro fora dos
   botões, coerente com a hierarquia do manual (petróleo em bloco, pouco). */
.topo__vinculo {
  background: var(--petroleo);
}

.topo__vinculo-inner,
.topo__inner,
.conteudo,
.rodape__inner {
  width: 100%;
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding-inline: var(--margem-pagina);
}

.topo__vinculo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #ffffff;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.topo__vinculo a:hover,
.topo__vinculo a:focus-visible {
  text-decoration: underline;
}

.topo {
  background: #ffffff;
  border-bottom: 3px solid var(--petroleo);
}

.topo__inner {
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* A assinatura recortada tem proporção 4,05:1 — 40px de altura dão 162px de
   largura, acima da redução mínima de 140px fixada pelo manual da marca. */
.topo__marca img {
  height: 40px;
  width: auto;
  display: block;
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

.topo__nav {
  display: flex;
  gap: 8px;
}

.topo__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: 0.86rem;
  color: var(--grafite);
  padding: 6px 4px 4px;
  border-bottom: 2px solid transparent;
}

.topo__nav a[aria-current="page"] {
  color: var(--petroleo);
  font-weight: 600;
  border-bottom-color: var(--verde);
}

.conteudo {
  padding-block: 20px 40px;
  display: grid;
  gap: 16px;
}

.conteudo > * {
  min-width: 0;
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--verde);
  font-weight: 600;
  margin: 0 0 4px;
}

.hero__lead {
  font-size: 1rem;
  margin: 6px 0 0;
}

.hero__garantias {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hero__garantias li {
  border-left: 3px solid var(--verde);
  background: #ffffff;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.hero__garantias strong,
.hero__garantias span {
  display: block;
}

.hero__garantias strong {
  margin-bottom: 2px;
}

.cartao {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 24px;
}

.cartao--estreito {
  max-width: 460px;
}

.cartao--confirmacao {
  text-align: center;
}

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

.formulario__introducao {
  margin: -4px 0 0;
  font-size: 0.82rem;
}

/* Rótulo, ajuda, controle e contador compartilham toda a largura interna. */
.formulario__campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.formulario label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--petroleo);
  margin: 0;
}

/* 1rem (16px) é o piso: abaixo disso o Safari no iOS aplica zoom automático
   ao focar o campo e obriga o usuário a voltar com pinça. */
.formulario input[type="text"],
.formulario input[type="password"],
.formulario select,
.formulario textarea {
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--controle-borda);
  border-radius: 6px;
  width: 100%;
  min-width: 0;
  background: #ffffff;
  color: var(--grafite);
  transition: border-color 120ms ease-in-out;
}

.formulario input[type="text"]:hover,
.formulario input[type="password"]:hover,
.formulario select:hover,
.formulario textarea:hover {
  border-color: var(--petroleo);
}

.formulario input::placeholder,
.formulario textarea::placeholder {
  color: #5c6a6c;
  opacity: 1;
}

.formulario input[type="text"],
.formulario input[type="password"],
.formulario select {
  min-height: 48px;
}

.formulario textarea {
  resize: vertical;
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
}

.formulario [aria-invalid="true"] {
  border-color: var(--erro);
  border-width: 2px;
}

/* Consulta por protocolo: campo e botão compartilham a largura do cartão. */
.formulario--linha {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.formulario--linha label + input {
  margin: 0;
}

.campo-ajuda {
  margin: 0;
  color: #526166;
  font-size: 0.86rem;
  line-height: 1.45;
}

.campo-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 1.25rem;
}

.campo-erro {
  margin: 0;
  color: var(--erro);
  font-size: 0.8rem;
  font-weight: 600;
}

.contador {
  margin-left: auto;
  color: #526166;
  font-size: 0.8rem;
  white-space: nowrap;
}

.obrigatorio { color: var(--erro); }

.opcional {
  font-weight: 400;
  color: var(--grafite);
  font-size: 0.78rem;
}

.campo-oculto {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.aviso-lgpd {
  font-size: 0.86rem;
  color: var(--grafite);
  background: var(--verde-claro);
  border-left: 3px solid var(--verde);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 14px 0 4px;
}

/* O protocolo é irrecuperável: o aviso precisa aparecer ANTES do envio, não só
   na tela de confirmação. */
.aviso-protocolo {
  font-size: 0.92rem;
  color: var(--grafite);
  background: #f4f8f9;
  border-left: 3px solid var(--petroleo);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  margin: 18px 0 4px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  /* O manual reserva o verde para traço (filetes, marcadores, anel de foco);
     preenchimentos sólidos usam petróleo. */
  background: var(--petroleo);
  color: #ffffff;
  border: 1px solid var(--petroleo);
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  justify-self: start;
  min-height: 46px;
  text-decoration: none;
  text-align: center;
  transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

.botao:hover {
  background: var(--petroleo-escuro);
  border-color: var(--petroleo-escuro);
}

.botao--secundario {
  background: transparent;
  color: var(--petroleo);
  border-color: var(--petroleo);
}

.botao--secundario:hover {
  background: var(--verde-claro);
  color: var(--petroleo);
}

.alerta {
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.9rem;
}

.alerta--erro {
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  color: var(--erro);
}

.resumo-erros {
  margin: 16px 0;
}

.resumo-erros:focus {
  outline: 3px solid var(--erro);
  outline-offset: 3px;
}

.resumo-erros h3 {
  color: var(--erro);
  font-size: 1.15rem;
}

.resumo-erros ul {
  margin: 6px 0 0;
  padding-left: 22px;
}

.resumo-erros a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
}

.protocolo-rotulo {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--verde);
  margin: 16px 0 0;
}

.protocolo {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--petroleo);
  background: var(--verde-claro);
  border: 2px dashed var(--verde);
  border-radius: 8px;
  padding: 18px 24px;
  display: inline-block;
  margin: 12px 0;
  user-select: all;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.confirmacao__acoes {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.feedback-copia {
  min-height: 1.6em;
  margin: 4px 0;
  color: var(--petroleo);
  font-size: 0.85rem;
}

.resultado {
  margin-top: 24px;
  border-top: 1px solid var(--linha);
  padding-top: 18px;
}

.resultado__dados {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.resultado__dados dt {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--verde);
  font-weight: 600;
}

.resultado__dados dd {
  margin: 2px 0 0;
  font-size: 0.95rem;
}

.resultado__resposta {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 14px 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.situacao {
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

.situacao--recebida {
  background: var(--fundo);
  border: 1px solid var(--linha);
  color: var(--grafite);
}

.situacao--em_analise {
  background: #f4f8f9;
  border: 1px solid var(--petroleo);
  color: var(--petroleo);
}

.situacao--concluida {
  background: var(--verde-claro);
  border: 1px solid var(--verde);
  color: #275f42;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tabela-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.tabela-container:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

.tabela th {
  text-align: left;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--verde);
  border-bottom: 2px solid var(--linha);
  padding: 8px 10px;
}

.tabela td {
  border-bottom: 1px solid var(--linha);
  padding: 10px;
  vertical-align: top;
}

.tabela a:not(.botao) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.gestao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.rodape {
  background: var(--petroleo);
  color: #dbe8ea;
}

.rodape__inner {
  padding-block: 22px;
  font-size: 0.78rem;
}

.rodape p {
  margin: 0 0 6px;
}

/* Branco, não petróleo: o rodapé tem fundo petróleo, e a cor herdada da marca
   deixava estes links com contraste 1:1 — invisíveis sobre o próprio fundo. */
/* Filtros e paginação da lista de gestão. */
.formulario--filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin: 0 0 20px;
}

.formulario--filtros > div {
  display: grid;
  gap: 4px;
}

.formulario--filtros label {
  margin: 0;
}

.formulario--filtros select {
  min-width: 12rem;
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}

.rodape__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.rodape__links li {
  margin: 0;
}

.topo__vinculo a,
.gestao-topo a,
details > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

details > summary {
  color: var(--petroleo);
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}

.link-retorno {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.estado-pagina {
  display: grid;
  gap: 12px;
}

.estado-pagina > * {
  margin-block: 0;
}

.gestao-identidade {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0;
}

.gestao-identidade p {
  margin: 0;
}

/* Documento longo (aviso de privacidade): coluna estreita para leitura corrida
   e hierarquia de seções apoiada em filete verde. */
.documento > p,
.documento > ul {
  max-width: var(--medida);
}

/* O filete do título fica pendurado na margem do cartão. Com o padding sem a
   margem negativa compensatória, o texto do h2 começava 15px (3 de filete + 12
   de recuo) à direita do texto dos parágrafos: numa peça de 15 seções, cada
   título saltava para fora da coluna de leitura. A margem devolve esses 15px e
   deixa toda a coluna — h1, títulos, parágrafos e listas — com a mesma origem. */
.documento h2 {
  font-size: 1.2rem;
  margin: 28px 0 8px -15px;
  padding-left: 12px;
  border-left: 3px solid var(--verde);
  /* Alvo de âncora: sem a margem de rolagem o título encostava na borda de cima
     da janela, escondendo o filete e o respiro que separam a seção da anterior. */
  scroll-margin-top: 24px;
}

/* O h2 recebe tabindex="-1" para o salto mover o foco junto com a rolagem. Isso
   torna o título focável e o navegador desenharia o anel também no clique de
   mouse; :focus-visible reserva o anel a quem chegou pelo teclado. */
.documento h2:focus {
  outline: none;
}

.documento h2:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 4px;
}

/* Confirma qual seção foi alcançada. O filete engrossa 3px e o padding recua os
   mesmos 3px: sem essa compensação o texto do título saltava para a direita. */
.documento h2:target {
  border-left-width: 6px;
  padding-left: 9px;
}

/* Sumário de documento longo. Fundo cinza-claro e filete verde seguem o manual:
   o verde é traço, nunca preenchimento de bloco. */
.sumario {
  /* Pendurado nos mesmos 15px do filete dos títulos: os dois filetes verdes da
     página passam a descer sobre uma única vertical. A largura recupera os 15px
     para que a borda direita continue coincidindo com a dos parágrafos. */
  max-width: calc(var(--medida) + 15px);
  margin: 20px 0 4px -15px;
  padding: 14px 16px 16px;
  background: var(--fundo);
  border-left: 3px solid var(--verde);
  border-radius: 0 6px 6px 0;
}

.sumario__rotulo {
  margin: 0 0 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--verde);
}

/* Os títulos já carregam o número no texto; a numeração automática do <ol>
   duplicaria ("1. 1. Para que serve"). A semântica de lista ordenada fica.

   Multicolunas, e não grid: o grid preenche por linha, então o sumário lia
   1-2 / 3-4 / 5-6 na horizontal enquanto a numeração pede leitura vertical.
   O fluxo de coluna equilibrada devolve 1…8 na primeira coluna e 9…15 na
   segunda, e cai sozinho para uma coluna quando não cabem duas de 15rem. */
.sumario__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 15rem 2;
  column-gap: 24px;
}

.sumario__lista li {
  break-inside: avoid;
}

.sumario__lista a {
  display: flex;
  align-items: center;
  /* Alvo de toque de 44px do manual: em 13 itens a linha natural ficaria em
     ~26px e dois destinos vizinhos se tocariam no celular. */
  min-height: 44px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--grafite);
  text-decoration-color: var(--linha);
  text-underline-offset: 3px;
}

.sumario__lista a:hover {
  color: var(--petroleo);
  background: #ffffff;
  text-decoration-color: currentColor;
}

/* Saída do documento: os dois links irmãos ficam lado a lado, cada um com alvo
   de toque próprio. */
.documento__saida {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}

.documento__saida a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.documento ul {
  margin: 8px 0 12px;
  padding-left: 22px;
}

.documento li {
  margin-bottom: 6px;
}

.documento__versao {
  font-size: 0.86rem;
  color: #526166;
  margin-top: 24px;
}

/* ---------------------------------------------------------------------------
   Justificação do texto corrido.

   O canal publica peças de leitura contínua (aviso de privacidade, política) e
   a convenção da peça jurídica é a coluna justificada. Justificar sem hifenizar
   é o erro clássico: o navegador estica só os espaços e abre rios brancos numa
   coluna de 68ch. `hyphens: auto` depende do idioma declarado — o <html> já sai
   com lang="pt-BR" em View::header(), então o dicionário certo é carregado.

   Por decisão do usuário em 2026-08-17, TODO texto entra na justificação —
   inclusive a ajuda de campo e as garantias do topo, que antes ficavam de fora.
   Seguem em bandeira apenas rótulos, botões, contadores e a tela de
   confirmação, que é centrada por eixo próprio: ali não há linha corrida para
   justificar.
   --------------------------------------------------------------------------- */
.hero__lead,
.hero__garantias li span,
.aviso-lgpd,
.aviso-protocolo,
.cartao > p,
.campo-ajuda,
.formulario__introducao,
.documento > p,
.documento li,
.rodape p:not(.rodape__links) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Sem limites o navegador hifeniza palavra de 4 letras e deixa sílaba órfã:
     mínimo de 6 caracteres na palavra, 3 antes e 3 depois do hífen. */
  hyphenate-limit-chars: 6 3 3;
  /* A última linha não é justificada; `pretty` evita que ela fique com uma
     palavra sozinha embaixo do parágrafo. */
  text-wrap: pretty;
}

/* Depois da regra acima, e não antes: a confirmação é uma frase por bloco em
   torno de um eixo central, e justificar brigaria com esse eixo. */
.cartao--confirmacao > p {
  text-align: center;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Havia aqui um revert para bandeira abaixo de 560px (coluna de ~33
   caracteres, onde a justificação abre rios). Removido em 2026-08-17 por
   decisão explícita do usuário: texto justificado em TODAS as larguras.
   A hifenização automática acima fica ainda mais importante no celular —
   é ela que absorve parte da folga que os espaços esticados deixariam. */

@media (max-width: 640px) {
  :root {
    --margem-pagina: 1rem;
  }

  .topo__inner {
    padding-block: 8px;
    gap: 6px;
  }

  /* Faixa 481–640px: a navegação ainda divide a linha com a marca. 36px de
     altura = 146px de largura, ainda acima do mínimo de 140px. */
  .topo__marca img { height: 36px; }

  .topo__nav {
    gap: 2px;
    margin-left: auto;
  }

  .topo__nav a {
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
    padding-inline: 3px;
  }

  .conteudo {
    padding-block: 14px 32px;
    gap: 14px;
  }

  .hero__garantias {
    gap: 6px;
  }

  .hero__garantias li {
    padding: 7px 9px;
    font-size: 0.76rem;
  }

  .cartao { padding: 18px; }

  /* Os 18px do cartão não comportam os 15px do filete pendurado — sobrariam
     3px e o verde encostaria na borda. O recuo à esquerda abre a margem onde
     o filete mora; a assimetria de 6px contra a direita não é perceptível,
     e o alinhamento da coluna de texto é. */
  .documento { padding-left: 24px; }

  .sumario { padding: 12px 12px 14px; }
  .formulario--linha { grid-template-columns: 1fr; }
  .formulario--linha .botao { width: 100%; }
  .confirmacao__acoes { flex-direction: column; }
  .confirmacao__acoes .botao { width: 100%; }
  .tabela { font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .topo__inner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* Abaixo de 480px a navegação desce para a própria linha e a marca fica
     sozinha: cabe folgadamente em 178px, bem acima do mínimo de 140px. */
  .topo__marca img { height: 44px; }

  .topo__nav {
    width: 100%;
  }

  .topo__nav a {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .hero__garantias {
    grid-template-columns: 1fr;
  }
}