/* ============================================================
   Componentes das landings de SEO — usa exclusivamente os
   tokens visuais do site (base.css / landing). Zero identidade nova.
   ============================================================ */

main.seo{padding:26px 0 64px}
main.seo .container{max-width:900px}

/* Hero compacto (mesmo card/gradiente do hero da home) */
.seo-hero{
  background:linear-gradient(115deg,#C6B5F9 0%,#B1B3FD 50%,#9FAFFC 100%);
  border-radius:28px;
  box-shadow:0 18px 44px rgba(150,90,215,.28);
  padding:clamp(34px,6vw,64px) clamp(22px,5vw,56px);
  text-align:center;
  margin-bottom:44px;
}
.seo-hero h1{
  font-size:clamp(1.8rem,4.4vw,3rem);
  font-weight:800;line-height:1.15;color:var(--indigo);
  margin-bottom:16px;
}
.seo-hero .sub{
  font-size:clamp(1rem,2vw,1.2rem);color:var(--preto);line-height:1.6;
  max-width:38em;margin:0 auto 26px;
}
.seo-hero .sub strong{color:var(--indigo)}
.seo-hero .btn{font-size:1.1rem;padding:0 40px;min-height:64px;display:inline-flex;align-items:center;justify-content:center}
.seo-hero .micro{
  font-size:clamp(.7rem,1.7vw,.9rem);font-weight:600;font-style:italic;
  color:var(--indigo);margin-top:12px;white-space:nowrap;
}
.seo-hero-img{display:block;width:100%;max-width:360px;height:auto;margin:26px auto 0;filter:drop-shadow(0 12px 24px rgba(90,50,150,.22))}

/* Secoes de conteudo */
.seo-secao{margin-bottom:42px}
.seo-secao h2{
  font-size:clamp(1.35rem,2.8vw,1.9rem);font-weight:800;color:var(--indigo);
  margin-bottom:14px;
}
.seo-secao p{font-size:1rem;line-height:1.75;margin-bottom:14px}
.seo-secao ul{padding-left:24px;margin-bottom:14px}
.seo-secao li{font-size:1rem;line-height:1.7;margin-bottom:6px}
.seo-secao a{color:var(--indigo);font-weight:700}

/* Exemplo de conversa (baloes com as cores do site) */
.chat-exemplo{
  max-width:480px;margin:22px auto;
  background:rgba(255,255,255,.45);
  border:2px solid var(--card-borda);
  border-radius:26px;padding:20px 18px;
  box-shadow:0 10px 24px rgba(150,80,215,.14), inset 0 3px 8px rgba(255,255,255,.6);
}
.balao{border-radius:18px;padding:11px 16px;margin:9px 0;max-width:88%;font-size:.93rem;line-height:1.55}
.balao-user{background:#FFFFFF;margin-left:auto;text-align:right;box-shadow:0 3px 8px rgba(150,80,215,.12)}
.balao-bot{background:var(--card-bg);border:1.5px solid var(--card-borda)}

/* FAQ (mesmo visual do accordion da home) */
.faq-seo .faq-item{
  background:var(--card-bg);
  border:2px solid var(--card-borda);
  border-radius:26px;
  box-shadow:0 10px 24px rgba(150,80,215,.16), inset 0 3px 8px rgba(255,255,255,.7);
  overflow:hidden;margin-bottom:14px;
}
.faq-seo .faq-pergunta{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 24px;cursor:pointer;text-align:left;
  background:none;border:none;font-family:inherit;
  font-size:1rem;font-weight:700;color:var(--indigo);
}
.faq-seo .faq-pergunta:focus-visible{outline:3px solid var(--indigo);outline-offset:-3px;border-radius:26px}
.faq-seo .faq-seta{font-size:1.4rem;font-weight:700;transition:transform .25s ease;flex:none}
.faq-seo .faq-pergunta[aria-expanded="true"] .faq-seta{transform:rotate(90deg)}
.faq-seo .faq-resposta{padding:0 24px 18px}
.faq-seo .faq-resposta p{font-size:.94rem;line-height:1.65;margin-bottom:0}

/* Planos resumidos */
.seo-planos{
  background:var(--card-bg);
  border:2px solid var(--card-borda);
  border-radius:26px;
  box-shadow:0 14px 32px rgba(150,80,215,.2), inset 0 3px 8px rgba(255,255,255,.7);
  padding:30px 32px;text-align:center;margin-bottom:42px;
}
.seo-planos h2{font-size:1.4rem;font-weight:800;color:var(--indigo);margin-bottom:16px}
.seo-planos ul{list-style:none;padding:0;margin:0 0 18px}
.seo-planos li{font-size:1rem;line-height:2;color:var(--preto)}
.seo-planos li strong{color:var(--indigo)}
.seo-planos .nota{font-size:.8rem;font-style:italic;color:var(--roxo-medio);margin-bottom:16px}

/* CTA final + paginas irmas */
.seo-final{text-align:center}
.seo-final .btn{font-size:1.05rem;padding:0 38px;min-height:62px;display:inline-flex;align-items:center;justify-content:center}
.seo-irmas{margin-top:26px;font-size:.9rem;color:var(--preto)}
.seo-irmas a{color:var(--indigo);font-weight:700}

@media (max-width:640px){
  .seo-hero .micro{white-space:normal}
}