/* =========================================================================
   24K IMPORTADOS: complemento das páginas de SEO local.
   Carrega depois de /nova.css e só usa os tokens dele. Nenhuma cor, fonte ou
   raio novo: aqui ficam só o que a home não tem (migalha, texto corrido, FAQ)
   e o ajuste da hero, que nessas páginas não tem o celular saindo por baixo.
   ========================================================================= */

/* hero interna: mesmo fundo da home, sem o mockup sobreposto */
body.v3 .seo-hero { padding-bottom: 4rem; }
.seo-hero .o-hero__txt { padding-bottom: 0; }
body.v3 .seo-hero .o-hero__vis { margin: 0; align-self: center; }

.seo-hero__card {
  width: 100%; max-width: 24rem; margin-inline: auto;
  border-radius: var(--radius-card); background: var(--page); padding: 1rem;
  box-shadow: 0 2rem 4rem rgb(10 10 10 / .25);
}
.seo-hero__card .prod3__img img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.seo-hero__card figcaption { margin-top: .75rem; font-size: .75rem; line-height: 1.5; color: var(--ink-soft); text-align: center; }

/* migalha de pão */
.seo-crumb { margin-bottom: 1.25rem; font-size: .8rem; color: rgb(255 255 255 / .9); }
.seo-crumb ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.seo-crumb li { display: flex; gap: .4rem; }
.seo-crumb li + li::before { content: "/"; opacity: .6; }
.seo-crumb a { text-decoration: underline; text-underline-offset: .2em; }
.seo-crumb a:hover { color: var(--brand-deep); }
@media (max-width: 899px) { .seo-crumb ol { justify-content: center; } }

/* títulos de seção mais longos que os da home */
.seo-h2 { font-size: 2.5rem; line-height: 1.02; max-width: 22em; }
@media (max-width: 899px) { .h-display.seo-h2 { font-size: 1.7rem; line-height: 1.1; } }

/* texto corrido */
.seo-txt { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.seo-txt p { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.seo-txt a, .seo-lnk { color: var(--accent-warm); text-decoration: underline; text-underline-offset: .2em; }
.seo-txt strong { color: var(--ink); font-weight: 600; }
.band--dark .seo-txt p { color: rgb(255 255 255 / .65); }
.two .seo-txt { max-width: none; }

/* cartões de pergunta: mesma pele dos cartões de etapa da home */
.seo-cards { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .seo-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .seo-cards { grid-template-columns: repeat(3, 1fr); } }
.seo-cards li { border-radius: var(--radius-card); background: var(--page); border: 1px solid var(--hairline); padding: 1.5rem; }
.seo-cards b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.seo-cards p { margin-top: .5rem; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }

/* dois produtos lado a lado, sem esticar até a largura de três colunas */
.seo-prod2 { margin-top: 0; grid-template-columns: 1fr 1fr; gap: .75rem; }
.seo-prod2 .prod3__card { padding: 1rem; }
.seo-prod2 .prod3__img img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.seo-sec .two > *, .seo-prod2 > * { min-width: 0; }
@media (max-width: 479px) { .seo-prod2 .pill { align-self: stretch; justify-content: center; padding-inline: .5rem; } }

/* seis cartões de assunto: duas fileiras de três, sem sobrar cartão solto */
@media (min-width: 1024px) { .wa4--temas { grid-template-columns: repeat(3, 1fr); } }

/* FAQ */
.seo-faq { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .75rem; max-width: 52rem; }
.seo-faq details { border-radius: var(--radius-card); background: var(--page); border: 1px solid var(--hairline); padding: 1.25rem 1.5rem; }
.seo-faq details[open] { border-color: var(--brand-light); }
.seo-faq summary { cursor: pointer; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.seo-faq p { margin-top: .75rem; font-size: .95rem; line-height: 1.65; color: var(--ink-soft); }

/* aviso de loja independente no rodapé */
.seo-indep { margin-top: 1.5rem; font-size: .75rem; line-height: 1.6; color: rgb(255 255 255 / .5); }

/* no celular, a caixa de links e o CTA final seguem alinhados como na home */
@media (max-width: 899px) {
  .seo-sec .wrap { text-align: left; }
  .seo-cta .wrap { text-align: center; }
}
.seo-cta { border-radius: var(--radius-card-lg); }
.seo-cta .pill { margin-top: 2rem; }

/* ---- variações usadas pelas demais páginas (tudo com a mesma pele da home) ---- */
.band--dark .seo-h2 { color: var(--on-brand); }
.band--dark .seo-txt a { color: var(--brand-light); }
@media (min-width: 640px) { .seo-cards.seo-cards--2 { grid-template-columns: repeat(2, 1fr); } }
.band--page .seo-cards li { background: var(--surface); border-color: transparent; }
.seo-hero__bol { width: 100%; max-width: 24rem; margin-inline: auto; }
.seo-passos { max-width: 46rem; }
.seo-prod1 { margin-top: 0; max-width: 20rem; margin-inline: auto; width: 100%; grid-template-columns: 1fr; }
.seo-prod1 .prod3__img img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.seo-prod1 > * { min-width: 0; }
.wa4--links .wa4__card { background: var(--page); }
.band--page .wa4--links .wa4__card { background: var(--surface); }
@media (min-width: 1024px) { .wa4--links { grid-template-columns: repeat(3, 1fr); } }