/* Central de Ajuda Hostbraza: estilos próprios, só com as variáveis do kit (tokens.css) e as peças do componentes.css.
   Regras da marca que valem aqui: uma fonte só (var(--font)), cores só por variável, sem barra de rolagem desenhada e sem área
   rolável, texto leigo e curto, sete tamanhos de tela (o esqueleto do telas.css fica no fim, na ordem do kit). */

:root {
  --ajuda-largura: 1200px;
  --ajuda-leitura: 760px;
  --ajuda-gutter: 24px;
  --ajuda-topo: 72px;
  --ajuda-sombra: 0 8px 24px color-mix(in srgb, var(--obsidiana) 12%, transparent);
}

html {
  scroll-padding-top: calc(var(--ajuda-topo) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font);
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}

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

a {
  color: var(--azul-texto);
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ── Utilitários ────────────────────────────────────────────────────────── */
.ajuda-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden; /* sem isto o texto escondido passa do 1px e alarga a página quando o link fica perto da borda direita */
  clip-path: inset(50%);
  white-space: nowrap;
}

.ajuda-pular {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 100;
}

.ajuda-pular:focus {
  top: 12px;
}

.ajuda-sentinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* Sem JavaScript, o que só funciona com ele não aparece. */
html:not(.js) .ajuda-so-js {
  display: none;
}

.ajuda-container {
  width: 100%;
  max-width: calc(var(--ajuda-largura) + 2 * var(--ajuda-gutter));
  margin-inline: auto;
  padding-inline: var(--ajuda-gutter);
}

/* O kit põe `display: block` em todo `.ui-icon`; no meio do texto isso jogaria o ícone para outra linha. */
.ajuda-ext {
  display: inline-block;
  margin-left: 4px;
  vertical-align: -2px;
  opacity: 0.7;
}

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.ajuda-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: var(--nav-fundo);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
  transition: border-color 0.2s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ajuda-topo {
    background: var(--fundo);
  }
}

.ajuda-topo.is-rolado {
  border-bottom-color: var(--nav-linha);
}

.ajuda-topo__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: var(--ajuda-topo);
}

.ajuda-marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--texto);
  text-decoration: none;
}

.ajuda-logo {
  display: block;
  width: auto;
  height: 28px;
}

.ajuda-logo--escuro,
:root[data-theme='dark'] .ajuda-logo--claro {
  display: none;
}

:root[data-theme='dark'] .ajuda-logo--escuro {
  display: block;
}

.ajuda-marca__rotulo {
  padding-left: 12px;
  border-left: 1px solid var(--linha);
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-suave);
}

.ajuda-menu__lista {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ajuda-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  color: var(--texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.ajuda-menu__link:hover {
  background: var(--chip-fundo);
}

.ajuda-menu__extra,
.ajuda-topo__lupa,
.ajuda-topo__menu {
  display: none;
}

.ajuda-menu__titulo {
  margin-bottom: 8px;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ajuda-menu__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.ajuda-busca-topo {
  position: relative;
  flex: 0 1 300px;
  margin-left: auto;
}

.ajuda-busca-topo .ajuda-sugestoes {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: 420px;
  max-width: calc(100vw - 2 * var(--ajuda-gutter));
}

/* ── Estrutura da página ────────────────────────────────────────────────── */
.ajuda-layout {
  flex: 1 0 auto;
}

.ajuda-layout--lateral {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

main:focus {
  outline: none;
}

.ajuda-lateral {
  padding: 32px 0 48px var(--ajuda-gutter);
}

.ajuda-lateral__titulo {
  margin-bottom: 12px;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ajuda-assunto summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-btn);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ajuda-assunto summary::-webkit-details-marker {
  display: none;
}

.ajuda-assunto summary:hover {
  background: var(--chip-fundo);
}

.ajuda-assunto__seta {
  transition: rotate 0.2s var(--ease);
}

.ajuda-assunto[open] > summary .ajuda-assunto__seta {
  rotate: 180deg;
}

.ajuda-assunto ul {
  margin: 0 0 8px;
  padding: 0 0 0 12px;
  list-style: none;
}

.ajuda-assunto li a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}

.ajuda-assunto li a:hover {
  background: var(--chip-fundo);
  color: var(--texto);
}

.ajuda-assunto li a[aria-current='page'] {
  background: var(--suave-fundo);
  color: var(--suave-texto);
  font-weight: 600;
}

/* ── Títulos e textos ───────────────────────────────────────────────────── */
.ajuda-display,
.ajuda-hero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.ajuda-titulo {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.ajuda-titulo-secao {
  margin-bottom: 24px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.ajuda-titulo-bloco {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ajuda-lead {
  margin-top: 12px;
  color: var(--texto-suave);
  font-size: 19px;
  line-height: 1.55;
}

.ajuda-dados {
  color: var(--texto-suave);
  font-size: 14px;
}

.ajuda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 16px;
}

.ajuda-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Trilha, faixa e blocos ─────────────────────────────────────────────── */
.ajuda-trilha,
.ajuda-faixa,
.ajuda-bloco,
.ajuda-artigo {
  width: 100%;
  max-width: calc(var(--ajuda-largura) + 2 * var(--ajuda-gutter));
  margin-inline: auto;
  padding-inline: var(--ajuda-gutter);
}

.ajuda-trilha {
  padding-top: 24px;
  font-size: 14px;
}

.ajuda-trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--texto-suave);
}

.ajuda-trilha li + li::before {
  content: '/';
  content: '/' / '';
  margin-right: 8px;
}

.ajuda-trilha a {
  color: var(--texto-suave);
}

.ajuda-trilha [aria-current='page'] {
  color: var(--texto);
}

.ajuda-faixa {
  margin-top: 16px;
}

.ajuda-faixa__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 40px;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  background: var(--fundo-suave);
}

.ajuda-faixa__texto {
  display: grid;
  gap: 8px;
  max-width: 640px;
}

.ajuda-faixa__sub {
  color: var(--texto-suave-gelo);
  font-size: 18px;
}

.ajuda-bloco {
  margin-top: 48px;
}

/* ── Mascote ────────────────────────────────────────────────────────────── */
.ajuda-braz {
  display: grid;
  flex: none;
  place-items: center;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--gelo);
}

.ajuda-braz img {
  width: auto;
  height: auto;
  max-height: 150px;
}

/* ── Cartões e listas ───────────────────────────────────────────────────── */
.ajuda-grade {
  display: grid;
  gap: 16px;
}

.ajuda-grade--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ajuda-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  color: var(--texto);
  text-decoration: none;
  transition: translate 0.25s var(--ease), border-color 0.15s;
}

.ajuda-card:hover {
  border-color: var(--azul-texto);
  translate: 0 -2px;
}

.ajuda-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ajuda-card p {
  color: var(--texto-suave);
  font-size: 15px;
}

.ajuda-card__meta {
  margin-top: auto;
  color: var(--azul-texto);
  font-size: 14px;
  font-weight: 600;
}

.ajuda-ladrilho {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-btn);
  background: var(--suave-fundo);
  color: var(--suave-texto);
}

.ajuda-secao {
  padding: 56px 0 0;
}

.ajuda-secao--suave {
  margin-top: 56px;
  padding: 56px 0;
  background: var(--fundo-suave);
}

.ajuda-secao--fale {
  padding: 64px 0;
}

.ajuda-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ajuda-lista a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s;
}

.ajuda-lista a:hover {
  border-color: var(--azul-texto);
}

.ajuda-lista__n {
  color: var(--azul-texto);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ajuda-lista__t {
  font-size: 17px;
  font-weight: 600;
}

.ajuda-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
}

.ui-seg.ajuda-seg-quebra {
  flex-wrap: wrap;
}

.ajuda-grupo + .ajuda-grupo {
  margin-top: 32px;
}

.ajuda-sub {
  margin-bottom: 12px;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ajuda-linhas {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
}

.ajuda-linhas li + li {
  border-top: 1px solid var(--linha);
}

.ajuda-linha {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  color: var(--texto);
  text-decoration: none;
}

.ajuda-linha:hover {
  background: var(--chip-fundo);
}

.ajuda-linha__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-btn);
  background: var(--suave-fundo);
  color: var(--suave-texto);
}

.ajuda-linha__txt {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.ajuda-linha__txt strong {
  font-size: 17px;
  font-weight: 600;
}

.ajuda-linha__txt span {
  color: var(--texto-suave);
  font-size: 15px;
}

/* ── Home ───────────────────────────────────────────────────────────────── */
.ajuda-hero {
  padding: 72px 0 80px;
}

.ajuda-hero.fundo-gradiente {
  background: linear-gradient(var(--veu), var(--veu)), var(--gradiente);
}

.ajuda-hero--escuro {
  padding: 64px 0;
}

.ajuda-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  align-items: center;
  gap: 48px;
}

.ajuda-hero__texto {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.ajuda-hero__sub {
  font-size: 19px;
  max-width: 560px;
}

.ajuda-hero__braz {
  justify-self: end;
}

.ajuda-hero__braz .ajuda-braz img {
  max-height: 260px;
}

.ajuda-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  margin-top: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: var(--r-lg);
}

.ajuda-busca:focus-within {
  box-shadow: 0 0 0 3px var(--neve);
}

.ajuda-busca input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--neve);
  font: inherit;
  font-size: 17px;
}

.ajuda-busca input::placeholder {
  color: var(--neve);
  opacity: 0.85;
}

.ajuda-busca input:focus-visible {
  outline: none;
}

.ajuda-busca__botao {
  flex: none;
  background: var(--neve);
  color: var(--azul-profundo);
}

.ajuda-sugestoes {
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  box-shadow: var(--ajuda-sombra);
  color: var(--texto);
  list-style: none;
  text-align: left;
}

.ajuda-sugestoes a,
.ajuda-resultado {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--texto);
  text-decoration: none;
}

.ajuda-sugestoes a:hover,
.ajuda-resultado:hover {
  background: var(--chip-fundo);
}

.ajuda-sugestoes strong,
.ajuda-resultado strong {
  font-size: 16px;
  font-weight: 600;
}

.ajuda-sugestoes span,
.ajuda-resultado span {
  color: var(--texto-suave);
  font-size: 14px;
}

.ajuda-resultados {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ajuda-resultado {
  padding: 16px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
}

.ajuda-painel {
  padding: 56px;
  border-radius: var(--r-lg);
}

.ajuda-ia {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 560px;
  padding: 32px;
  border-radius: var(--r-lg);
}

.ajuda-ia h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ajuda-ia__botao {
  margin-top: 8px;
  background: var(--neve);
  color: var(--azul-profundo);
}

/* ── "Não encontrou o que procurava?" ───────────────────────────────────── */
.ajuda-fale {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 32px;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
}

/* Na home o fundo vem de `.fundo-brilho-horizonte` (do kit); um `background` aqui o cobriria e deixaria o texto branco sobre claro. */
.ajuda-fale:not(.ajuda-fale--home) {
  background: var(--fundo-suave);
}

.ajuda-fale--home {
  border-color: transparent;
}

.ajuda-fale__corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.ajuda-fale__texto {
  flex: 1 1 260px;
}

.ajuda-fale__texto h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ajuda-fale__texto p {
  margin-top: 4px;
  color: var(--texto-suave-gelo);
}

.ajuda-fale--home .ajuda-fale__texto p {
  color: var(--neve);
}

.ajuda-fale--home .ajuda-ladrilho {
  background: var(--vidro-escuro-borda);
  color: var(--neve);
}

.ajuda-fale--home .ui-btn--secundario {
  background: var(--vidro-escuro-borda);
  color: var(--neve);
}

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

.ajuda-fale__situacao {
  margin-top: 20px;
}

.ajuda-chama {
  position: absolute;
  right: -40px;
  bottom: -70px;
  z-index: -1;
  width: 320px;
  aspect-ratio: 1;
  opacity: 0.55;
  pointer-events: none;
}

.ajuda-situacao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
}

.ajuda-bloco .ajuda-situacao[data-estado='ok'] svg:first-child {
  color: var(--ok);
}

.ajuda-bloco .ajuda-situacao[data-estado='atencao'] svg:first-child {
  color: var(--atencao);
}

.ajuda-bloco .ajuda-situacao[data-estado='erro'] svg:first-child {
  color: var(--erro);
}

.ajuda-situacao-grupos {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ajuda-situacao-grupos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
}

/* ── Artigo ─────────────────────────────────────────────────────────────── */
.ajuda-artigo {
  margin-top: 24px;
}

.ajuda-artigo > * {
  max-width: var(--ajuda-leitura);
}

.ajuda-artigo > .ajuda-relacionados {
  max-width: none;
}

.ajuda-artigo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ajuda-artigo__tags .tag {
  gap: 6px;
  text-decoration: none;
}

.ajuda-toc {
  margin-top: 28px;
}

.ajuda-toc details {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--fundo-suave);
}

.ajuda-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ajuda-toc summary::-webkit-details-marker {
  display: none;
}

.ajuda-toc details[open] .ajuda-assunto__seta {
  rotate: 180deg;
}

.ajuda-toc ol {
  margin: 0;
  padding: 0 18px 12px 44px;
}

.ajuda-toc li a {
  display: inline-block;
  padding: 6px 0;
  color: var(--texto);
  text-decoration: none;
}

.ajuda-toc li a:hover {
  color: var(--azul-texto);
}

.ajuda-toc li a[aria-current='true'] {
  color: var(--azul-texto);
  font-weight: 600;
}

.ajuda-prosa {
  margin-top: 32px;
  font-size: 17px;
  line-height: 1.75;
}

.ajuda-prosa > * + * {
  margin-top: 1em;
}

.ajuda-prosa h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2em;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--ajuda-topo) + 16px);
}

.ajuda-prosa h3 {
  margin-top: 1.6em;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.ajuda-ancora {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--azul-texto);
  opacity: 0;
  transition: opacity 0.15s;
}

.ajuda-prosa h2:hover .ajuda-ancora,
.ajuda-ancora:focus-visible {
  opacity: 1;
}

.ajuda-prosa ul,
.ajuda-prosa ol {
  margin-bottom: 0;
  padding-left: 1.4em;
}

.ajuda-prosa li + li {
  margin-top: 0.4em;
}

.ajuda-prosa a {
  text-underline-offset: 3px;
}

.ajuda-prosa blockquote {
  margin-inline: 0;
  margin-bottom: 0;
  padding-left: 16px;
  border-left: 3px solid var(--azul-texto);
  color: var(--texto-suave);
}

.ajuda-prosa code {
  padding: 2px 6px;
  border-radius: var(--r-tag);
  background: var(--chip-fundo);
  font-family: var(--font);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.ajuda-figura {
  margin: 1.5em 0;
}

.ajuda-figura img {
  display: block;
  width: auto;
  height: auto;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
}

.ajuda-figura figcaption {
  margin-top: 8px;
  color: var(--texto-suave);
  font-size: 14px;
}

.ajuda-codigo {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--fundo-suave);
}

.ajuda-codigo pre {
  margin: 0;
  padding: 16px 112px 16px 16px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ajuda-prosa .ajuda-codigo code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.ajuda-codigo > button {
  position: absolute;
  top: 8px;
  right: 8px;
}

.ajuda-tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.5;
}

.ajuda-tabela th {
  padding: 12px 16px;
  background: var(--fundo-suave);
  color: var(--texto-suave-gelo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

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

.ajuda-aviso {
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--neutro-fundo);
  color: var(--texto);
}

.ajuda-aviso p + p {
  margin-top: 0.5em;
}

.ajuda-aviso__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--neutro);
  font-weight: 700;
}

.ajuda-aviso--dica {
  background: var(--suave-fundo);
}

.ajuda-aviso--dica .ajuda-aviso__titulo {
  color: var(--suave-texto);
}

.ajuda-aviso--atencao {
  background: var(--atencao-fundo);
}

.ajuda-aviso--atencao .ajuda-aviso__titulo {
  color: var(--atencao);
}

.ajuda-aviso--erro {
  background: var(--erro-fundo);
}

.ajuda-aviso--erro .ajuda-aviso__titulo {
  color: var(--erro);
}

.ajuda-aviso--ok {
  background: var(--ok-fundo);
}

.ajuda-aviso--ok .ajuda-aviso__titulo {
  color: var(--ok);
}

.ajuda-relacionados {
  margin-top: 56px;
}

.ajuda-prox-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}

.ajuda-prox {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}

.ajuda-prox:hover {
  border-color: var(--azul-texto);
}

.ajuda-prox small {
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 400;
}

.ajuda-prox--prev {
  grid-column: 1;
}

.ajuda-prox--next {
  grid-column: 2;
  text-align: right;
}

.ajuda-progresso {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  background: var(--gradiente);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

html:not(.js) .ajuda-progresso {
  display: none;
}

/* ── 404, conecte-sua-ia e contato ──────────────────────────────────────── */
.ajuda-404 {
  padding: 64px var(--ajuda-gutter);
}

.ajuda-404__in {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.ajuda-404 .ajuda-lead {
  margin-top: 0;
}

.ajuda-campo-busca {
  width: 100%;
  text-align: left;
}

.ajuda-rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.ajuda-404__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ajuda-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ajuda-endereco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
  max-width: 640px;
  margin-top: 12px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
}

.ajuda-endereco__rotulo {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ajuda-endereco__valor {
  flex: 1 1 260px;
  font-size: 18px;
}

.ajuda-endereco__valor code {
  font-family: var(--font);
  overflow-wrap: anywhere;
}

.ajuda-endereco__botao {
  background: var(--neve);
  color: var(--azul-profundo);
}

/* ── Rodapé (escuro nos dois temas) ─────────────────────────────────────── */
.ajuda-rodape {
  margin-top: auto;
  padding: 56px 0 32px;
  background: var(--obsidiana);
  color: color-mix(in srgb, var(--neve) 78%, transparent);
  font-size: 15px;
}

.ajuda-rodape a {
  color: var(--geada);
}

.ajuda-rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.ajuda-rodape__logo {
  display: block;
  width: auto;
  height: 30px;
  margin-bottom: 12px;
}

.ajuda-rodape h2 {
  margin-bottom: 12px;
  color: var(--neve);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ajuda-rodape ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ajuda-rodape nav a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
}

.ajuda-rodape nav a:hover {
  text-decoration: underline;
}

.ajuda-rodape ul.ajuda-rodape__redes {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.ajuda-rodape__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-btn);
  background: var(--vidro-escuro-borda);
}

.ajuda-rodape__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--vidro-escuro-borda);
  font-size: 14px;
}

.ajuda-rodape__selo img {
  display: block;
  width: auto;
  height: 40px;
}

.ajuda-hero :focus-visible,
.ajuda-rodape :focus-visible,
.ajuda-painel :focus-visible,
.ajuda-fale--home :focus-visible {
  outline-color: var(--neve);
}

/* ── Movimento reduzido e cores forçadas ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .ajuda-card:hover {
    translate: none;
  }
}

@media (forced-colors: active) {
  .ajuda-card,
  .ajuda-linhas,
  .ajuda-lista a,
  .ajuda-fale,
  .ajuda-aviso,
  .ajuda-tabela,
  .ajuda-codigo,
  .ajuda-braz,
  .ajuda-prox {
    border: 1px solid CanvasText;
  }

  .ajuda-progresso {
    background: Highlight;
  }
}

/* ── Os sete tamanhos de tela (ordem do telas.css do kit) ───────────────── */

/* 1. Desktop (1367 a 2399 px): é a base, as regras acima. */

/* 3. Laptop (1201 a 1366 px) */
@media (max-width: 1366px) {
  .ajuda-layout--lateral {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .ajuda-hero {
    padding: 56px 0 64px;
  }

  .ajuda-hero__in {
    gap: 32px;
  }

  .ajuda-rodape__grade {
    gap: 32px;
  }
}

/* 4. Tablet paisagem (1025 a 1200 px): sem a barra lateral */
@media (max-width: 1200px) {
  .ajuda-layout--lateral {
    display: block;
  }

  .ajuda-lateral {
    display: none;
  }

  .ajuda-painel {
    padding: 40px;
  }
}

/* 5. Tablet retrato (881 a 1024 px): o menu vira botão */
@media (max-width: 1024px) {
  .ajuda-topo__menu {
    display: inline-flex;
    margin-left: auto;
  }

  .ajuda-busca-topo {
    flex: 1 1 200px;
    margin-left: 0;
  }

  .ajuda-menu {
    order: 10;
    flex-basis: 100%;
    padding-bottom: 16px;
  }

  .js .ajuda-menu {
    display: none;
  }

  .js .ajuda-topo.is-aberto {
    position: relative;
  }

  .js .ajuda-topo.is-aberto .ajuda-menu {
    display: block;
  }

  .ajuda-menu__extra {
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--linha);
  }

  .ajuda-menu__lista--assuntos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 8px;
  }

  .ajuda-grade--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ajuda-rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 6. Celular paisagem (768 a 880 px) */
@media (max-width: 880px) {
  .ajuda-busca-topo,
  .ajuda-topo__suporte {
    display: none;
  }

  .ajuda-topo__lupa {
    display: inline-flex;
    margin-left: auto;
  }

  .ajuda-topo__menu {
    margin-left: 0;
  }

  .ajuda-hero__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .ajuda-hero__braz {
    display: none;
  }

  .ajuda-faixa__in {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .ajuda-lista a {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ajuda-lista a .tag {
    display: none;
  }

  /* A tabela vira uma lista de cartões, um por linha, com o nome da coluna em cada campo. */
  .ajuda-tabela,
  .ajuda-tabela tbody,
  .ajuda-tabela tr,
  .ajuda-tabela td {
    display: block;
  }

  .ajuda-tabela {
    border: 0;
  }

  .ajuda-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }

  .ajuda-tabela tr {
    margin-bottom: 12px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
  }

  .ajuda-tabela td {
    border-top: 0;
  }

  .ajuda-tabela td + td {
    border-top: 1px solid var(--linha);
  }

  .ajuda-tabela td::before {
    content: attr(data-rotulo);
    display: block;
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* 7. Celular retrato (até 767 px) */
@media (max-width: 767px) {
  :root {
    --ajuda-gutter: 16px;
    --ajuda-topo: 64px;
  }

  .ajuda-logo {
    height: 24px;
  }

  .ajuda-marca__rotulo {
    display: none;
  }

  .ajuda-hero {
    padding: 40px 0 48px;
  }

  .ajuda-busca {
    flex-wrap: wrap;
    padding: 12px;
  }

  .ajuda-busca input {
    flex-basis: calc(100% - 40px);
  }

  .ajuda-busca__botao {
    width: 100%;
  }

  .ajuda-grade--3,
  .ajuda-rodape__grade,
  .ajuda-menu__lista--assuntos {
    grid-template-columns: minmax(0, 1fr);
  }

  .ajuda-secao,
  .ajuda-secao--fale {
    padding-top: 40px;
  }

  .ajuda-secao--fale {
    padding-bottom: 40px;
  }

  .ajuda-bloco {
    margin-top: 40px;
  }

  .ajuda-painel {
    padding: 16px;
  }

  .ajuda-ia {
    padding: 24px;
  }

  .ajuda-fale {
    padding: 24px;
  }

  .ajuda-fale__acoes,
  .ajuda-fale__acoes .ui-btn,
  .ajuda-menu__botoes .ui-btn {
    width: 100%;
  }

  .ajuda-linha .tag {
    display: none;
  }

  .ajuda-codigo pre {
    padding: 16px 16px 60px;
  }

  .ajuda-codigo > button {
    top: auto;
    bottom: 8px;
  }

  .ajuda-prox-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .ajuda-prox--prev,
  .ajuda-prox--next {
    grid-column: 1;
    text-align: left;
  }

  .ajuda-prosa {
    font-size: 16px;
  }

  .ajuda-prosa h2 {
    font-size: 23px;
  }

  .ajuda-rodape__fim {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 2. Widescreen (2400 px ou mais): por último, para não ser desfeito pelas regras acima. */
@media (min-width: 2400px) {
  :root {
    --ajuda-largura: 1360px;
    --ajuda-leitura: 820px;
  }

  .ajuda-prosa {
    font-size: 18px;
  }

  .ajuda-layout--lateral {
    max-width: 1680px;
  }
}