/* ============================================================
   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; }

/* Seletor de idioma — gatilho discreto (globo + código) e painel ao passar.

   Sem caixa e sem os dois idiomas à mostra: o visitante já está lendo no
   idioma dele, então o controle não precisa competir por atenção. Ele só
   precisa ser encontrável por quem está no idioma errado.

   ABRE EM TRÊS SITUAÇÕES, e não só no hover: `:hover` para o mouse,
   `:focus-within` para o teclado, e `[data-aberto]` para o toque, onde hover
   não existe. Um menu só de hover é invisível no celular e intransponível por
   teclado — e este é o controle de quem não consegue ler a página.

   As opções são ÂNCORAS com o nome do idioma por extenso. "Português" e
   "English" cada um escrito na própria língua: quem procura o seletor não lê
   o idioma corrente, procura o nome do seu. */
.idioma {
  position: relative;
  display: inline-flex;
  flex: none;
}

.idioma__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}

.idioma__gatilho svg { width: 16px; height: 16px; }

.idioma:hover .idioma__gatilho,
.idioma:focus-within .idioma__gatilho { color: var(--ink); }

.idioma__gatilho:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* O painel encosta no gatilho por um `padding-top` no próprio menu, e não por
   `margin`: um vão real entre os dois faz o menu fechar quando o cursor o
   atravessa, e o clique se torna uma questão de pontaria. */
.idioma__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  min-width: 150px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule-forte);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.idioma:hover .idioma__menu,
.idioma:focus-within .idioma__menu,
.idioma[data-aberto] .idioma__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.idioma__item {
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.idioma__item:hover { background: var(--rule); }

/* O idioma corrente fica marcado e continua clicável: escondê-lo deixaria um
   menu de um item só, sem dizer de onde para onde se está indo. */
.idioma__item--ativo {
  color: var(--muted);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .idioma__menu { transition: none; }
}

/* 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;
  /* Sem borda: ícone solto, como no cabeçalho do ailair — com borda ele
     parecia mais um botão de ação ao lado do Entrar. */
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tema-btn:hover { color: var(--ink); background: var(--rule-3); }
.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; }
/* Entrar e o CTA nao competem: quem ja e cliente procura a porta, quem
   nao e procura o contato. O secundario diz isso sem precisar de rotulo. */
.botao--entrar { margin-right: 8px; }
.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 {
  position: relative;
  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;
}
.hero h1 { margin: 0 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); }


/* ---------- 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, .campo select {
  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, .campo select: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; }
}

/* ============================================================
   Painel — prévia interativa do automation-portal, no herói
   ============================================================ */

/* perspective vive no pai, não em quem gira: é o que dá profundidade ao
   rotateY/rotateX abaixo em vez de simplesmente distorcer o retângulo. */
/* line-height 1.3, não o 1.6 do body: o painel é UI compacta, não prosa —
   com 1.6 cada rótulo de uma linha só inflava ~50% mais alto que o
   necessário, e foi metade do motivo do conteúdo não caber nos 350px. */
.painel { perspective: 1000px; line-height: 1.3; }

/* Paleta PRÓPRIA, fixa — o painel é a "captura de tela" de um produto real,
   e não deve trocar de cor com o tema do SITE (fica branco tanto no hero
   claro quanto no escuro, de propósito, para sempre destacar por contraste).
   O botão .painel__tema é um toggle À PARTE, só deste componente — não lê
   nem escreve data-tema do <html>. Valores copiados literalmente dos tokens
   claro/escuro de tokens.css, não reduzidos a variável global porque aqui
   precisam ficar fixos mesmo quando o restante do tema muda. */
.painel {
  --p-bg: #FFFFFF;
  --p-bg-alt: #F6F9FC;
  --p-rule: #D7E2EC;
  --p-rule-2: #B9C8D6;
  --p-rule-3: #EAF1F7;
  --p-ink: #102A43;
  --p-text: #0F1E2B;
  --p-muted: #5A7189;
  --p-faint: #4E6478;
  --p-acento: #4F6BFF;
  --p-chip: #EEF1FF;
  --p-ok: #0E7A54;
  --p-halo-ok: rgba(14, 122, 84, 0.10);
}
/* Cinza médio, não quase-preto: um #202020 ficava perto demais do
   --hero escuro do SITE (que também tende a preto) — as duas superfícies
   quase se fundiam, sobrando só a sombra pra separar uma da outra.
   Acinzentado dá contraste contra o hero tanto claro quanto escuro. */
.painel[data-tema-painel="escuro"] {
  --p-bg: #35353A;
  --p-bg-alt: #2B2B2F;
  --p-rule: #46464C;
  --p-rule-2: #57575E;
  --p-rule-3: #3C3C41;
  --p-ink: #FFFFFF;
  --p-text: #EDEDED;
  --p-muted: #AEAEB4;
  --p-faint: #9F9FA6;
  --p-acento: #7C93FF;
  --p-chip: #2E3040;
  --p-ok: #4FC79A;
  --p-halo-ok: rgba(79, 199, 154, 0.16);
}

.painel__janela {
  border: 1px solid var(--p-rule);
  border-radius: 12px;
  background: var(--p-bg);
  /* Mais forte que --shadow do site: o painel precisa se destacar tanto
     sobre o gradiente claro quanto sobre o escuro do herói, sozinho. */
  box-shadow: 0 30px 70px rgba(8, 20, 33, 0.28), 0 0 0 1px rgba(16, 42, 67, 0.04);
  overflow: hidden;
  transform: rotateY(-4deg) rotateX(2deg);
}
@media (prefers-reduced-motion: reduce) {
  .painel__janela { transform: none; }
}
.painel__barra {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
  background: var(--p-bg-alt);
  border-bottom: 1px solid var(--p-rule);
}
.painel__barra > span { width: 8px; height: 8px; border-radius: 50%; background: var(--p-rule-2); }
.painel__barra small { margin-right: auto; margin-left: 8px; font-size: 10px; letter-spacing: 0.04em; color: var(--p-faint); }
.painel__tema {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--p-faint);
  cursor: pointer;
}
.painel__tema:hover, .painel__tema:focus-visible { background: var(--p-rule-3); color: var(--p-ink); outline: none; }
.painel__tema svg { width: 13px; height: 13px; }
.painel__tema [data-icone="escuro"] { display: none; }
.painel[data-tema-painel="escuro"] .painel__tema [data-icone="claro"] { display: none; }
.painel[data-tema-painel="escuro"] .painel__tema [data-icone="escuro"] { display: block; }
/* Altura FIXA (não min-height): as 5 vistas trocam texto/números, nunca a
   quantidade de linhas — sem isto o painel "respirava" um pouco a cada
   clique na barra lateral, o que lia como instável, não como produto real. */
.painel__corpo { display: flex; height: 378px; }

.painel__lateral {
  width: 168px;
  flex: none;
  padding: 20px 14px 14px;
  background: var(--p-bg-alt);
  border-right: 1px solid var(--p-rule);
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
}
.painel__marca { display: flex; align-items: center; margin-bottom: 22px; }
.painel__marca img { height: 18px; width: auto; display: block; }
.painel__marca img[data-logo-painel="escuro"] { display: none; }
.painel[data-tema-painel="escuro"] .painel__marca img[data-logo-painel="claro"] { display: none; }
.painel[data-tema-painel="escuro"] .painel__marca img[data-logo-painel="escuro"] { display: block; }
.painel__grupo { display: grid; gap: 4px; margin-bottom: 18px; }
.painel__grupo > small {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--p-faint);
  font-weight: 700;
  margin: 2px 0 4px;
}
.painel__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.painel__item svg { width: 14px; height: 14px; flex: none; }
.painel__item:hover, .painel__item:focus-visible { background: var(--p-rule-3); color: var(--p-ink); outline: none; }
.painel__item.is-ativo { background: var(--p-bg); color: var(--p-ink); box-shadow: 0 1px 3px rgba(16, 42, 67, 0.08); }
.painel__item i {
  margin-left: auto;
  font-style: normal;
  background: var(--p-acento);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
}
.painel__conta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--p-rule);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--p-muted);
  font-weight: 600;
}
.painel__avatar {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-chip);
  color: var(--p-acento);
  font-size: 9px;
  font-weight: 800;
}

.painel__principal { flex: 1; min-width: 0; padding: 16px 24px; overflow: hidden; }
.painel__topo small { font-size: 10px; letter-spacing: 0.1em; color: var(--p-faint); font-weight: 700; }
.painel__titulo { font-size: 19px; margin: 4px 0 16px; color: var(--p-ink); }
.painel__resumo {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border: 1px solid var(--p-rule);
  border-radius: 8px;
  background: var(--p-bg-alt);
}
.painel__resumo-rotulo { display: block; font-size: 10px; letter-spacing: 0.08em; color: var(--p-faint); font-weight: 700; }
.painel__resumo-valor { display: block; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--p-ink); margin-top: 4px; }
.painel__resumo p { font-size: 11px; color: var(--p-faint); margin: 6px 0 0; }
.painel__resumo p b { color: var(--p-ok); }
.painel__grafico { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.painel__grafico i { display: block; width: 8px; border-radius: 2px 2px 0 0; background: var(--p-chip); height: 30%; }
.painel__grafico i:nth-child(2) { height: 45%; }
.painel__grafico i:nth-child(3) { height: 38%; }
.painel__grafico i:nth-child(4) { height: 66%; }
.painel__grafico i:nth-child(5) { height: 52%; }
.painel__grafico i:nth-child(6) { height: 78%; }
.painel__grafico i:nth-child(7) { height: 100%; background: var(--p-acento); }

.painel__colunas { display: grid; grid-template-columns: 1.3fr 0.8fr; gap: 12px; margin-top: 8px; }
.painel__cartao, .painel__foco {
  border: 1px solid var(--p-rule);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--p-bg);
}
.painel__cartao-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
/* white-space: nowrap, não wrap: os rótulos das vistas são propositalmente
   curtos (ver VISTAS em app.js) — quebrar em duas linhas ao lado do link
   "Ver tudo" parece bug, não conteúdo comprido demais para caber. */
.painel__cartao-titulo { font-size: 12px; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel__cartao-cabeca span { font-size: 11px; color: var(--p-acento); font-weight: 700; flex: none; white-space: nowrap; }
.painel__tarefa {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid var(--p-rule-3);
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--p-text);
  text-align: left;
  cursor: pointer;
}
.painel__tarefa:hover { color: var(--p-acento); }
/* Coluna do meio é 1fr numa carta estreita: sem nowrap, um nome de
   processo um pouco mais longo quebrava em 2 linhas e dobrava a altura
   da linha inteira — foi metade do overflow medido (144px) que estourava
   os 350px fixos do corpo. */
.painel__tarefa > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel__tarefa small { color: var(--p-faint); font-size: 10.5px; white-space: nowrap; }
.painel__check {
  width: 14px;
  height: 14px;
  border: 1px solid var(--p-rule-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 9px;
}
.painel__tarefa.is-concluida { color: var(--p-faint); text-decoration: line-through; }
.painel__tarefa.is-concluida .painel__check { background: var(--p-ok); border-color: var(--p-ok); color: #fff; }
.painel__foco { background: var(--p-halo-ok); border-color: transparent; text-align: center; }
.painel__foco > small { font-size: 10px; letter-spacing: 0.08em; color: var(--p-faint); font-weight: 700; }
.painel__anel {
  width: 58px;
  height: 58px;
  margin: 10px auto 8px;
  border-radius: 50%;
  border: 4px solid var(--p-ok);
  border-right-color: var(--p-acento);
  display: grid;
  place-items: center;
  line-height: 1.1;
}
.painel__anel b { font-size: 14px; color: var(--p-ink); }
.painel__anel span { font-size: 8px; color: var(--p-faint); }
.painel__foco p { font-size: 11px; color: var(--p-muted); margin: 0; }

/* ============================================================
   Seção "Na prática" — carrossel de fluxos, realocado do herói
   ============================================================ */

.secao--fluxos .fluxos { max-width: 760px; margin: 0 auto; }

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

@media (max-width: 900px) {
  .secao { padding: 56px 0; }
  /* 88px, nao 56: a pílula agora vive dentro deste espaço, de 22 a 53px.
     Com 56 sobravam 3px até o título. */
  .hero { padding: 88px 0 48px; }
  .hero__grade { gap: 36px; }
  .duas-colunas, .contato-grade { gap: 32px; }
  /* A barra lateral vira ruído numa janela que já encolheu para uma
     coluna — o mesmo motivo do fluxos__rodape sumir no fluxo original. */
  .painel__lateral { display: none; }
  /* Sem a lateral e sem o cartão de foco, o conteúdo restante é mais baixo
     que os 350px fixos do desktop — altura automática aqui, não a mesma
     trava, ou sobraria vão vazio embaixo da lista de tarefas. */
  .painel__corpo { height: auto; }
  /* A largura já encolheu pra 1 coluna: a inclinação 3D só cortava
     quina, sem espaço de sobra pra "flutuar" como no desktop. */
  .painel__janela { transform: none; }
  .painel__colunas { grid-template-columns: 1fr; }
  .painel__foco { display: none; }
}

@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;
    /* --rule-forte, como Entrar, tema e idioma: é borda de CONTROLE (3:1).
       Com --rule o hambúrguer destoava dos botões vizinhos no cabeçalho. */
    border: 1px solid var(--rule-forte);
    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; }
  /* O logo nao encolhe. Com `flex: 1` ele tinha base zero e cedia espaco
     para o CTA de 208px, chegando a 5px de largura — ilegivel. Com
     `flex: none` ele mantem a largura natural e e o CTA que quebra para a
     linha de baixo, que e o comportamento certo num cabecalho estreito. */
  .cabecalho__logo { flex: none; }
  /* 30px em vez de 26: ao lado de controles de 36px, o logo em 26 parecia
     rebaixado. Continua cabendo com folga depois que o CTA passou a quebrar
     para a linha de baixo. */
  .cabecalho__logo img { height: 30px; }
  .cabecalho__interno > .nav-hamburguer { margin-left: auto; }
  .nav {
    display: none;
    order: 3;
    /* `flex: 0 0 100%`, nao `width: 100%`: a regra base define `flex: 1`,
       cujo flex-basis de 0 vence a largura no calculo do flex. O menu
       ficava com a largura do conteudo e o botao de tema subia para a
       mesma linha, flutuando ao lado. */
    flex: 0 0 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; }
  /* Barra fechada no celular: logo e hamburguer, nada mais.
     O CTA sai porque a mesma pagina tem outros cinco caminhos ate o
     contato, o primeiro deles logo abaixo, no hero. O botao de tema entra
     no menu: e uma preferencia, nao uma acao — e o tema ja segue o do
     sistema quando ninguem escolhe. */
  .botao--cabecalho { display: none; }
  /* Uma linha só: logo | Entrar · idioma · hambúrguer. Com o Entrar no fim
     do DOM e o padding do desktop, a soma passava de 375px e ele caía para
     uma segunda linha solta. `order` o traz para antes do idioma e o
     hambúrguer fecha a linha; o gap menor e o padding menor fazem caber. */
  .cabecalho__interno { gap: 10px; }
  .botao--entrar {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    font-size: 13.5px;
    margin: 0;
    order: 2;
  }
  /* Idioma abre o grupo da direita; Entrar e hambúrguer ficam lado a lado,
     os dois controles de ação juntos no canto. */
  .idioma { order: 1; margin-left: auto; }
  .cabecalho__interno > .nav-hamburguer { margin-left: 0; order: 3; }
  .tema-btn { display: none; order: 4; }
  .nav-toggle:checked ~ .tema-btn { display: grid; margin-right: auto; }
}

@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. */
/* 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; }

/* Celular comum (360–430px): logo | Entrar · idioma · hambúrguer precisam
   caber em uma linha. Com logo de 30px e gaps de 10px a soma passava de
   ~326px úteis e o hambúrguer quebrava para baixo. */
@media (max-width: 440px) {
  .cabecalho__interno { gap: 6px; }
  .cabecalho__logo img { height: 24px; }
  .botao--entrar { padding: 0 10px; }
  .idioma__gatilho { padding: 0 4px; }
}

@media (max-width: 380px) {
  .fluxos__caixa { margin-left: 14px; margin-right: 14px; padding: 12px; overflow-x: auto; }
  .container { padding-left: 16px; padding-right: 16px; }
  /* 360px com "Sign in" ainda estourava: logo menor e sem o globo, que o
     rótulo PT/EN dispensa nessa largura. */
  .cabecalho__logo img { height: 21px; }
  .idioma__gatilho svg { display: none; }
}

/* 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;
}

/* Campo opcional. A marca fica no rótulo, não no placeholder: quem usa
   leitor de tela ouve o rótulo, não o texto de exemplo — e quem preenche
   rápido precisa saber o que pode pular antes de clicar. */
.campo__opcional {
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  margin-left: 6px;
}

/* A seta nativa do select some quando a cor de fundo é definida em alguns
   navegadores; esta é desenhada e acompanha o tema. */
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}

/* O aviso aparece por :target no caminho sem JavaScript, e por esta classe
   quando o envio acontece sem recarregar a página. */
.aviso--visivel { display: block; }

/* ---------- Botão flutuante com mascote ---------- */
.flutuante { display: none; }

@media (max-width: 860px) {
  .flutuante {
    display: flex;
    /* Balão acima do círculo, os dois alinhados à direita. */
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    position: fixed;
    /* Ancorado à direita, não esticado: é um botão, não uma barra. */
    right: 16px;
    /* env() protege a barra de gestos do iPhone; o fallback cobre o resto. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    text-decoration: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .flutuante__balao {
    background: var(--card);
    color: var(--ink);
    /* --rule, nao --rule-forte: aquele token existe para borda de CONTROLE,
       que precisa de 3:1. Isto e superficie flutuante — ja se separa do
       fundo pela sombra, e com a borda escura destoava de todos os cartoes
       da pagina, que usam --rule. */
    --balao-fundo: var(--card);
    --balao-linha: var(--rule);
    background: var(--balao-fundo);
    border: 1px solid var(--balao-linha);
    border-radius: 100px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow);
    /* O bico do balão, apontando para o círculo. Dois triângulos: o de
       baixo faz a borda, o de cima tampa com a cor do fundo. */
    position: relative;
  }
  .flutuante__balao::before,
  .flutuante__balao::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Alinhado ao centro do círculo, que tem 58px e fica encostado à
       direita: 29px da borda. */
    right: 29px;
    transform: translateX(50%);
  }
  /* O de fora e 1px maior e faz a linha; o de dentro tampa com a cor do
     balao. A diferenca de tamanho e o que desenha o contorno da ponta —
     mais estavel que sobrepor dois triangulos iguais com recuo. */
  .flutuante__balao::before {
    border: 8px solid transparent;
    border-top-color: var(--balao-linha);
  }
  .flutuante__balao::after {
    border: 7px solid transparent;
    border-top-color: var(--balao-fundo);
    margin-top: -1px;
  }

  .flutuante__circulo {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 50%;
    background: var(--cta);
    color: var(--cta-ink);
    box-shadow: 0 10px 26px rgba(16, 42, 67, 0.32);
  }
  .flutuante__circulo svg { display: block; }

  .flutuante:active .flutuante__circulo { transform: scale(0.95); }

  /* Sem isto o botão cobre o fim do rodapé. */
  body { padding-bottom: 92px; }

  .flutuante[data-oculto="sim"] {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .flutuante { transition: none; }
}

/* No tema escuro, sombra escura sobre fundo escuro nao separa nada — a
   elevacao tem que vir da superficie. Com --card o balao rendia 1.08:1
   contra o fundo da pagina e deixava de ler como forma. */
@media (max-width: 860px) {
  [data-tema="escuro"] .flutuante__balao {
    --balao-fundo: #2C2F35;
    --balao-linha: #454A52;
  }
}

/* Empilhado, o balão não disputa mais a largura com o círculo — por isso
   ele fica visível também nas telas estreitas, ao contrário do arranjo
   lado a lado. */

/* ============================================================
   Revelação ao rolar — itens aparecem conforme entram na viewport
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* 320px (iPhone SE 1ª geração): último aperto para a linha única do
   cabeçalho — sem isso o hambúrguer quebrava para baixo. */
@media (max-width: 340px) {
  .cabecalho__interno { gap: 4px; }
  .cabecalho__logo img { height: 18px; }
  .botao--entrar { padding: 0 8px; font-size: 13px; }
}