/* Estilos de texto corrido para as páginas de guia.
 *
 * Carregada DEPOIS de css/style.css, de onde herda os tokens (--tinta,
 * --fonte-marca, --raio-md...). O style.css tem apenas classes de componente
 * e um reset `*, *::before, *::after { margin: 0 }` -- então uma página de
 * texto precisa definir o próprio ritmo vertical, senão parágrafos, títulos
 * e listas saem colados uns nos outros.
 *
 * Escopo preso em .guia para não vazar para o index.html, que carrega as
 * duas folhas na mesma página.
 */

.guia {
  max-width: 760px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: 0 72px;
  color: var(--tinta2);
  font-size: 16.5px;
  line-height: 1.7;
}

.guia-trilha {
  padding-block: 22px 0;
  font-size: 13px;
  color: var(--tinta3);
}
.guia-trilha a { color: var(--tinta3); text-decoration: none; }
.guia-trilha a:hover { text-decoration: underline; }
.guia-trilha span[aria-current] { color: var(--tinta); }

.guia h1 {
  font-family: var(--fonte-marca);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.13;
  color: var(--tinta);
  margin-block: 18px 16px;
  text-wrap: balance;
}

.guia-resumo {
  font-size: 18px;
  line-height: 1.65;
  color: var(--tinta2);
  margin-bottom: 10px;
}

.guia-atualizado {
  font-size: 12.5px;
  color: var(--tinta3);
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}

.guia h2 {
  font-family: var(--fonte-marca);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--tinta);
  margin-block: 46px 14px;
  text-wrap: balance;
}

.guia h3 {
  font-family: var(--fonte-marca);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
  margin-block: 30px 8px;
}

.guia p { margin-bottom: 16px; }
.guia strong { color: var(--tinta); font-weight: 600; }
.guia a { color: var(--acento); }

.guia ul, .guia ol { margin-bottom: 18px; padding-left: 22px; }
.guia li { margin-bottom: 9px; }
.guia li::marker { color: var(--tinta3); }

/* Caixa de destaque: usada para o que vale guardar de cada passo. */
.guia-destaque {
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-md);
  padding: 16px 20px;
  margin-block: 22px;
  font-size: 15.5px;
}
.guia-destaque p:last-child { margin-bottom: 0; }

/* Exemplo concreto: fundo discreto, sem virar "cartão" de componente. */
.guia-exemplo {
  background: var(--card-subtle);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: 16px 20px;
  margin-block: 20px;
  font-size: 15px;
}
.guia-exemplo p:last-child { margin-bottom: 0; }
.guia-exemplo-rotulo {
  display: block;
  font-family: var(--fonte-marca);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta3);
  margin-bottom: 7px;
}

/* Perguntas frequentes */
.guia-faq { margin-top: 10px; }
.guia-faq h3 { margin-block: 26px 6px; }

/* Chamada final */
.guia-cta {
  margin-top: 52px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.guia-cta h2 { margin-top: 0; }
.guia-cta p:last-of-type { margin-bottom: 20px; }
.guia-botao {
  display: inline-block;
  background: var(--acento);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: var(--raio-sm);
}
.guia-botao:hover { background: var(--acento-hover); color: #ffffff; }

@media (max-width: 560px) {
  .guia { font-size: 16px; }
  .guia-resumo { font-size: 16.5px; }
  .guia h2 { font-size: 20px; margin-block: 38px 12px; }
}