/* Guias do Manda (gerados por tools/gerar_paginas.py). Por cima do legal.css. */
.trail { font-family: 'Poppins', system-ui, sans-serif; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.trail a { color: var(--text-secondary); }
.guia h1 { margin-bottom: 20px; }
.guia .lead { font-size: 17px; color: var(--text-body); }
.steps { list-style: none; padding: 0; margin: 18px 0 8px; counter-reset: s; display: grid; gap: 12px; }
.steps li {
    counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; align-items: start;
    background: #f4eae9; border-radius: 16px; padding: 16px 18px; margin: 0;
}
.steps li::before {
    content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: #fff;
    display: grid; place-items: center; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 15px;
}
.steps strong { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; color: var(--ink); }
.steps span { font-size: 15px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0 8px; }
.cta span { font-size: 14px; color: var(--text-secondary); }
.btn {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
    background: var(--ink); color: #fff; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 16px; text-decoration: none;
}
.btn:hover { background: var(--blue); }
.faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq-item h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 4px; }
.faq-item p { margin: 0; }
.outros li { margin: 8px 0; }
/* Anúncio: o espaço só aparece quando o Google manda um anúncio de verdade (sem retângulo vazio) */
.ad:has(ins[data-ad-status="filled"]) { margin: 28px 0; }
.ad:has(ins[data-ad-status="filled"])::before { content: 'Publicidade'; display: block; font-family: 'Poppins', system-ui, sans-serif; font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.ad:has(ins[data-ad-status="unfilled"]), .ad[hidden] { display: none !important; }