/* ============================================================
   Alvesmaia — folha principal (handoff v2)
   Página única com seções ancoradas.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--fonte);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--estreito { max-width: 860px; }

/* ---------- Tipografia ---------- */
h1 {
  font-size: clamp(38px, 5.2vw, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--ink);
}
h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.14;
  text-wrap: balance;
  color: var(--ink);
}
h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }

.lead { font-size: 17px; line-height: 1.65; max-width: 64ch; color: var(--muted); }
.lead--hero { font-size: 18.5px; max-width: 56ch; }

/* Rótulo em caixa alta: Nunito Sans com entreletra larga, nunca monoespaçada. */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link);
}
.micro { font-size: 13px; color: var(--faint); }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.cabecalho__interno {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.cabecalho__logo img { height: 26px; width: auto; }

/* O checkbox comanda o menu no mobile e nunca é visto em largura nenhuma.
   Ele fica sob o rótulo, e não transparente fora de tela: assim o anel de
   foco aparece no hambúrguer, que é o controle que a pessoa enxerga. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.nav-hamburguer:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
}
.nav { flex: 1; display: flex; gap: 22px; flex-wrap: wrap; }
.nav a { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.nav a:hover { color: var(--ink); }

.tema-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-forte);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tema-btn:hover { color: var(--ink); border-color: var(--ink); }
.tema-btn svg { width: 17px; height: 17px; }
/* Um ícone por tema, alternado por CSS — sem trocar src por script. */
.tema-btn [data-icone="escuro"] { display: none; }
[data-tema="escuro"] .tema-btn [data-icone="escuro"] { display: block; }
[data-tema="escuro"] .tema-btn [data-icone="claro"] { display: none; }

/* Logo por tema: os dois no HTML, alternados por CSS — evita 404 e flash. */
img[data-logo="escuro"] { display: none; }
[data-tema="escuro"] img[data-logo="escuro"] { display: block; }
[data-tema="escuro"] img[data-logo="claro"] { display: none; }

/* ---------- Botões ---------- */
.botao {
  display: inline-block;
  font-weight: 800;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.botao--primario { background: var(--cta); color: var(--cta-ink); }
.botao--primario:hover { background: var(--cta-hover); color: var(--cta-ink); }
.botao--secundario { border-color: var(--rule-forte); color: var(--text); }
.botao--secundario:hover { border-color: var(--muted); color: var(--ink); }
.botao--cabecalho { font-size: 14px; padding: 9px 16px; }
.botao--grande { font-size: 15.5px; font-weight: 700; padding: 14px 24px; border-radius: 7px; }
.botao--bloco { display: block; width: 100%; padding: 12px; border-radius: 7px; margin-top: 24px; font-size: 15px; }
.botao--bloco.botao--primario { padding: 13px; }

/* ---------- Seções ---------- */
.secao { padding: 84px 0; border-bottom: 1px solid var(--rule); }
.secao--alt { background: var(--bg-alt); }
.secao--sem-borda { border-bottom: 0; }
/* Cabeçalho fixo de 64px: sem a folga a âncora para atrás dele. */
.secao[id], .aviso[id] { scroll-margin-top: 80px; }
.secao__cabeca { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Herói ---------- */
.hero {
  background: var(--hero);
  padding: 76px 0 68px;
  border-bottom: 1px solid var(--rule);
}
.hero__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 52px;
  align-items: center;
}
.pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link);
  border: 1px solid var(--rule-2);
  background: var(--chip);
  padding: 6px 11px;
  border-radius: 100px;
}
.hero h1 { margin: 18px 0 16px; }
.hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Grades de cartão ---------- */
.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-top: 38px;
}
.card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
  padding: 24px;
}
.card:hover { border-color: var(--rule-2); }
.card__num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--chip);
  border: 1px solid var(--rule);
  font-size: 14px;
  font-weight: 700;
  color: var(--link);
}
.card h3 { margin: 16px 0 8px; }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Grade "colada": os vãos de 1px sobre o fundo de linha viram os divisores,
   o que mantém as divisórias corretas em qualquer número de colunas. */
.grade-colada {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 38px;
}
.grade-colada--4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grade-colada--etapas { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.celula { background: var(--card); padding: 24px; }
.grade-colada--etapas .celula { padding: 26px; }
.celula h3 { font-size: 16.5px; }
.celula p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }

.etapa__num { font-size: 11px; letter-spacing: 0.14em; color: var(--link); }
.grade-colada--etapas h3 { font-size: 17px; margin: 12px 0 8px; }

/* ---------- Planos ---------- */
.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 18px;
  align-items: start;
  margin-top: 38px;
}
.plano {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  padding: 28px;
}
.plano--destaque {
  border-color: var(--cta);
  background: var(--card-2);
  box-shadow: var(--shadow);
}
.plano__badge {
  position: absolute;
  top: -11px;
  left: 28px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--cta);
  color: var(--cta-ink);
  padding: 5px 9px;
  border-radius: 100px;
  font-weight: 700;
}
.plano h3 { font-size: 19px; }
.plano__desc { font-size: 14px; color: var(--muted); margin-top: 8px; }
.plano__itens {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.plano__itens li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.plano__itens li::before { content: "✓"; color: var(--ok); font-weight: 800; flex: none; }

/* ---------- Sobre ---------- */
.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
/* Lista com divisorias, nao grade de celulas: em 2x2 os titulos quebravam
   e o texto era cortado na largura da coluna. */
.compromissos { border-top: 1px solid var(--rule); }
.compromissos li {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr;
  gap: 24px;
  align-items: baseline;
}
.compromissos strong { font-size: 17px; font-weight: 800; color: var(--ink); }
.compromissos span { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink); }
.faq summary::after { content: "+"; color: var(--link); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq p { font-size: 15px; line-height: 1.65; color: var(--muted); margin-top: 12px; max-width: 70ch; }

/* ---------- Contato ---------- */
.contato-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.contato h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; }
.form {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
}
.form__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}
.campo input, .campo textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-forte);
  border-radius: 7px;
  padding: 11px 13px;
}
.campo textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.campo input:focus, .campo textarea:focus { border-color: var(--cta); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--muted); opacity: 1; }
.form button { padding: 14px; font-size: 15.5px; border-radius: 7px; }

/* Avisos de estado, revelados por âncora — funcionam sem JavaScript. */
.aviso {
  display: none;
  border: 1px solid;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.aviso:target { display: block; }
.aviso--ok { border-color: var(--ok); color: var(--ok); }
.aviso--erro { border-color: var(--danger); color: var(--danger); }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--rule); background: var(--bg-alt); }
.rodape__grade {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 40px;
  padding: 56px 24px 28px;
}
.rodape__marca img { height: 24px; width: auto; }
.rodape__marca p { font-size: 14px; color: var(--faint); max-width: 34ch; margin-top: 14px; }
.rodape__coluna { display: flex; flex-direction: column; gap: 10px; }
.rodape__coluna h3 {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  margin-bottom: 2px;
}
.rodape__coluna a, .rodape__coluna span { font-size: 14px; color: var(--text); }
.rodape__coluna a:hover { color: var(--link); }
.rodape__barra {
  border-top: 1px solid var(--rule);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--faint);
}

/* ---------- Acessibilidade ---------- */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cta);
  color: var(--cta-ink);
  padding: 12px 20px;
  font-weight: 700;
}
.pular:focus { left: 0; }

/* ============================================================
   Cartão de fluxos — carrossel do herói
   Toda a animação é dirigida por CSS a partir de data-etapa/data-ativo
   no cartão; o script só avança os dois números.
   ============================================================ */

.fluxos {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.fluxos__barra {
  display: flex;
  gap: 6px;
  padding: 11px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
  border-radius: 12px 12px 0 0;
}
.fluxos__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }

/* Sem overflow aqui: o selo e o spinner ficam fora da borda. */
.fluxos__caixa {
  position: relative;
  margin: 24px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.fluxos__legenda {
  position: absolute;
  top: -9px;
  left: 14px;
  background: var(--card);
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  display: none;
}
.fluxos__palco { overflow: hidden; }

.fluxo { display: none; flex-direction: column; }
.fluxo__passo {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  opacity: 0.2;
  transition: opacity 0.4s ease;
}
.fluxo__passo--destaque { background: var(--card-2); border-color: var(--rule-2); }
/* :not(.contorno) e essencial: sem ele a regra de icone alcanca o SVG do
   contorno, que vira um retangulo de 17x17 — com rx=8, um circulo preso no
   canto superior esquerdo do passo. */
.fluxo__passo > svg:not(.contorno) { width: 17px; height: 17px; flex: none; color: var(--muted); }
.fluxo__passo--inicio > svg:not(.contorno) { color: var(--link); }
.fluxo__passo--fim > svg:not(.contorno) { color: var(--ok); }

.conector { margin-left: 31px; opacity: 0.2; transition: opacity 0.4s ease; }

/* Contorno tracejado correndo na etapa em execução. border não anima dash,
   então cada passo carrega um SVG sobreposto. */
.contorno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@keyframes girar { to { stroke-dashoffset: -28; } }
.contorno rect { animation: girar 1.2s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -16; } }

/* Spinner e selo ocupam o mesmo canto, em etapas diferentes. */
.fluxos__load, .fluxos__check { position: absolute; display: grid; place-items: center; }
.fluxos__load {
  top: -13px; right: -13px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--rule);
  opacity: 0;
  transition: opacity 0.3s ease;
}
@keyframes rodar { to { transform: rotate(360deg); } }
.fluxos__load svg { width: 16px; height: 16px; animation: rodar 0.9s linear infinite; }
.fluxos__check {
  top: -16px; right: -16px;
  width: 38px; height: 38px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 1.4, 0.5, 1);
}
@keyframes raiar {
  0% { opacity: 0; transform: scale(0.55); }
  55% { opacity: 1; }
  100% { opacity: 0.55; transform: scale(1); }
}
.fluxos__check [data-raios] { transform-origin: 12px 12px; opacity: 0; }

.fluxos__rodape {
  border-top: 1px solid var(--rule);
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.fluxos__seta {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-forte);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.fluxos__seta:hover { color: var(--ink); border-color: var(--ink); }
.fluxos__seta svg { width: 14px; height: 14px; }
.fluxos__progresso { width: 26px; height: 4px; background: var(--rule); border-radius: 100px; overflow: hidden; }
.fluxos__progresso i { display: block; height: 100%; background: var(--cta); width: 4%; transition: width 1.4s linear; }

/* ---- Estados dirigidos por data-ativo / data-etapa ---- */
.fluxos[data-ativo="0"] .fluxo[data-fluxo="0"],
.fluxos[data-ativo="1"] .fluxo[data-fluxo="1"],
.fluxos[data-ativo="2"] .fluxo[data-fluxo="2"],
.fluxos[data-ativo="3"] .fluxo[data-fluxo="3"],
.fluxos[data-ativo="4"] .fluxo[data-fluxo="4"] { display: flex; }

.fluxos[data-ativo="0"] .fluxos__legenda[data-rotulo="0"],
.fluxos[data-ativo="1"] .fluxos__legenda[data-rotulo="1"],
.fluxos[data-ativo="2"] .fluxos__legenda[data-rotulo="2"],
.fluxos[data-ativo="3"] .fluxos__legenda[data-rotulo="3"],
.fluxos[data-ativo="4"] .fluxos__legenda[data-rotulo="4"] { display: block; }

/* Revelação progressiva: até a etapa corrente, tudo opaco. */
.fluxos[data-etapa="1"] [data-passo="1"],
.fluxos[data-etapa="2"] [data-passo="1"], .fluxos[data-etapa="2"] [data-passo="2"],
.fluxos[data-etapa="3"] [data-passo="1"], .fluxos[data-etapa="3"] [data-passo="2"], .fluxos[data-etapa="3"] [data-passo="3"],
.fluxos[data-etapa="4"] [data-passo], .fluxos[data-etapa="5"] [data-passo], .fluxos[data-etapa="6"] [data-passo] { opacity: 1; }

.fluxos[data-etapa="1"] .fluxo__passo[data-passo="1"] .contorno,
.fluxos[data-etapa="2"] .fluxo__passo[data-passo="2"] .contorno,
.fluxos[data-etapa="3"] .fluxo__passo[data-passo="3"] .contorno,
.fluxos[data-etapa="4"] .fluxo__passo[data-passo="4"] .contorno { opacity: 1; }

/* Conector já percorrido fica sólido; o da etapa corrente corre. */
.fluxos[data-etapa="2"] .conector[data-passo="2"] line,
.fluxos[data-etapa="3"] .conector[data-passo="3"] line,
.fluxos[data-etapa="4"] .conector[data-passo="4"] line { animation: fluir 1s linear infinite; }
.fluxos[data-etapa="3"] .conector[data-passo="2"] line,
.fluxos[data-etapa="4"] .conector[data-passo="2"] line,
.fluxos[data-etapa="4"] .conector[data-passo="3"] line,
.fluxos[data-etapa="5"] .conector line,
.fluxos[data-etapa="6"] .conector line { stroke-dasharray: none; }

@keyframes entrar {
  from { transform: translateX(22%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.fluxo { transition: transform 0.45s ease, opacity 0.45s ease; }
.fluxos[data-etapa="0"] .fluxo, .fluxos[data-etapa="1"] .fluxo { animation: entrar 0.5s ease both; }
.fluxos[data-etapa="6"] .fluxo { transform: translateX(-22%); opacity: 0; }

.fluxos[data-etapa="1"] .fluxos__load,
.fluxos[data-etapa="2"] .fluxos__load,
.fluxos[data-etapa="3"] .fluxos__load,
.fluxos[data-etapa="4"] .fluxos__load { opacity: 1; }

.fluxos[data-etapa="5"] .fluxos__check,
.fluxos[data-etapa="6"] .fluxos__check { opacity: 1; transform: scale(1); }
.fluxos[data-etapa="5"] [data-raios],
.fluxos[data-etapa="6"] [data-raios] { animation: raiar 0.5s ease-out 0.1s both; }

.fluxos[data-etapa="5"] .fluxos__caixa,
.fluxos[data-etapa="6"] .fluxos__caixa {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px var(--halo-ok);
}

.fluxos[data-etapa="0"] .fluxos__progresso i { width: 4%; transition: width 0.22s ease; }
.fluxos[data-etapa="1"] .fluxos__progresso i { width: 18%; }
.fluxos[data-etapa="2"] .fluxos__progresso i { width: 42%; }
.fluxos[data-etapa="3"] .fluxos__progresso i { width: 66%; }
.fluxos[data-etapa="4"] .fluxos__progresso i { width: 86%; }
.fluxos[data-etapa="5"] .fluxos__progresso i,
.fluxos[data-etapa="6"] .fluxos__progresso i { width: 100%; }

/* Sem animação para quem pediu movimento reduzido: o cartão mostra o
   fluxo completo e parado, em vez de piscar. */
@media (prefers-reduced-motion: reduce) {
  .fluxo__passo, .conector { opacity: 1 !important; }
  .contorno, .fluxos__load { display: none; }
  .fluxo { animation: none !important; transform: none !important; opacity: 1 !important; }
  .fluxos__check { opacity: 1; transform: scale(1); }
  .fluxos__check [data-raios] { opacity: 0.55; animation: none; }
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 900px) {
  .secao { padding: 56px 0; }
  .hero { padding: 56px 0 48px; }
  .hero__grade { gap: 36px; }
  .duas-colunas, .contato-grade { gap: 32px; }
}

@media (max-width: 860px) {
  /* A nav quebraria em duas linhas: vira menu, aberto por checkbox. */
  .nav-hamburguer {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    flex: none;
  }
  .nav-hamburguer i {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .cabecalho__interno { flex-wrap: wrap; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
  .cabecalho__logo { flex: 1; }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
    padding-top: 6px;
  }
  .nav a { padding: 10px 0; }
  .nav-toggle:checked ~ .nav { display: flex; }
  .tema-btn { order: 4; }
  .botao--cabecalho { order: 5; }
}

@media (min-width: 861px) {
  .nav-hamburguer { display: none; }
}

@media (max-width: 520px) {
  .compromissos li { grid-template-columns: 1fr; gap: 6px; }
  .hero__acoes .botao { width: 100%; }
}

/* Botão de pausa do carrossel — exigência de WCAG 2.2.2, nível A: as setas
   avançam e reiniciam o timer; nenhuma delas para o movimento. */
#fluxos-pausa [data-icone="retomar"] { display: none; }
#fluxos-pausa[aria-pressed="true"] [data-icone="pausar"] { display: none; }
#fluxos-pausa[aria-pressed="true"] [data-icone="retomar"] { display: block; }
#fluxos-pausa[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }

/* Congelar as animações CSS junto com o timer. O IntersectionObserver
   parava o loop JS, mas `girar`, `fluir` e `rodar` continuavam rodando fora
   da tela — o comentário sobre devolver CPU só valia para metade do
   trabalho. Com a pausa explícita, vale para as duas. */
.fluxos[data-pausado="true"] *,
.fluxos[data-visivel="false"] * {
  animation-play-state: paused;
}

/* Larguras muito estreitas.

   O widget do Turnstile tem 300px de piso — abaixo disso ele empurra a
   página inteira de lado. `data-size="flexible"` faz ele acompanhar o
   container até esse piso; daí para baixo, rolar dentro da própria caixa é
   melhor que arrastar o site todo. O mesmo vale para o conteúdo do cartão
   de fluxos, cujos passos têm largura mínima própria. */
.cf-turnstile { max-width: 100%; overflow-x: auto; }

@media (max-width: 380px) {
  .fluxos__caixa { margin-left: 14px; margin-right: 14px; padding: 12px; overflow-x: auto; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* Região viva para leitor de tela. Fora do fluxo e sem altura: anunciar o
   resultado do envio não pode custar layout. A tentativa anterior reinseria
   o texto do próprio aviso visível — o elemento colapsava, tudo abaixo
   subia, e 120ms depois descia de volta. Com scroll-behavior: smooth os
   dois saltos viravam animação, e a página parecia rolar sozinha. */
.anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}