/* Guias de SEO (artigos longos). Complementa site.css; não redefine o que já existe lá. */

.guia { max-width: 720px; padding-bottom: 40px; }
.guia h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); margin-top: 26px; letter-spacing: -0.02em; scroll-margin-top: 16px; }
.guia h3 { font-size: 1.2rem; margin-top: 10px; letter-spacing: -0.01em; }
.guia ol:not(.lista-passos) { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.guia ol li, .guia ul li { color: var(--tinta-2); }
.guia strong { color: var(--tinta); }
.guia code { font-family: var(--mono); font-size: .88em; background: var(--papel-2); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.guia pre { margin: 0; padding: 14px 16px; background: var(--noite); color: var(--noite-texto); border: 2px solid var(--linha); border-radius: var(--r-1); overflow-x: auto; font: 700 .9rem/1.5 var(--mono); }
.guia pre code { background: none; padding: 0; color: inherit; word-break: normal; }

.guia__migalha { font-size: .9rem; color: var(--fraco); }
.guia__migalha a { font-weight: 700; }
.guia__linha-fina { font-size: 1.12rem; color: var(--tinta-2); }

.resumo { background: var(--ouro); border: 2px solid var(--linha); border-radius: var(--r-3); padding: 20px 18px; box-shadow: var(--sombra); display: grid; gap: 12px; }
.resumo h2 { margin-top: 0; font-size: 1.3rem; }
.resumo .lista-passos li { color: var(--tinta); }

.sumario { border: 2px solid var(--linha); border-radius: var(--r-2); background: var(--cartao); padding: 16px 18px; }
.sumario p { font-weight: 800; color: var(--tinta); margin-bottom: 8px; }
.sumario ol { gap: 4px !important; }
.sumario a { font-weight: 700; }

.nota { padding: 12px 14px; background: #fff3cf; border: 2px solid var(--linha); border-radius: 12px; font-size: .95rem; color: var(--tinta); }
.nota p { color: var(--tinta); }

.chamada { background: var(--noite); color: var(--noite-texto); border: 2px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-g); padding: 22px 18px; display: grid; gap: 12px; margin: 10px 0; }
.chamada h2, .chamada p.chamada__titulo { margin: 0; font-size: 1.45rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: var(--noite-texto); }
.chamada p { color: var(--noite-fraco); }
.chamada .botao { width: 100%; }
@media (min-width: 520px) { .chamada .botao { width: auto; justify-self: start; } }
.chamada__fino { font-size: .88rem; }

.guia .faq { margin-top: 6px; }
.guia .dado { margin-top: 4px; }