/* ============================================================
   HOME — INVERSAO DE CORES, BLOCO A BLOCO.
   Cada faixa e liberada individualmente pelo Adriano.
   SO propriedades de cor. Nenhuma de tamanho, espaco ou posicao.
   Nao toca no footer nem no header.
   ============================================================ */
:root{
  --h-azul:#0E2A47;      /* titulo em fundo claro */
  --h-texto:#202124;     /* corpo em fundo claro  */
  --h-gold:#8A6A1F;      /* dourado legivel em branco */
  --h-gold-ico:#A67F2B;  /* icone decorativo */
  --h-branco:#FFFFFF;
}

/* ---- Faixa 3: "Seu site aparece para quem esta pronto para comprar?" ---- */
main>section.home-intro:nth-of-type(3){
  background:var(--h-branco)!important;
}
main>section.home-intro:nth-of-type(3),
main>section.home-intro:nth-of-type(3) p,
main>section.home-intro:nth-of-type(3) li,
main>section.home-intro:nth-of-type(3) .home-intro-text{
  color:var(--h-texto)!important;
}
main>section.home-intro:nth-of-type(3) h1,
main>section.home-intro:nth-of-type(3) h2,
main>section.home-intro:nth-of-type(3) h3,
main>section.home-intro:nth-of-type(3) h4,
main>section.home-intro:nth-of-type(3) .section-title,
main>section.home-intro:nth-of-type(3) strong,
main>section.home-intro:nth-of-type(3) b,
main>section.home-intro:nth-of-type(3) .lead-strong{
  color:var(--h-azul)!important;
}
main>section.home-intro:nth-of-type(3) .eyebrow{
  color:var(--h-gold)!important;
}
main>section.home-intro:nth-of-type(3) .check-list li::marker,
main>section.home-intro:nth-of-type(3) .check-list li::before,
main>section.home-intro:nth-of-type(3) .bene-list li::before{
  color:var(--h-gold-ico)!important;
}

/* ---- Faixa 5: "Criacao de Sites com Estrutura SEO" ----
   Fundo claro, MAS a tabela comparativa e os botoes ficam azuis. */
main>section:nth-of-type(5).sites-friendly-section{
  background:var(--h-branco)!important;
}
main>section:nth-of-type(5).sites-friendly-section,
main>section:nth-of-type(5).sites-friendly-section p,
main>section:nth-of-type(5).sites-friendly-section .sf-col-left{
  color:var(--h-texto)!important;
}
main>section:nth-of-type(5).sites-friendly-section h2,
main>section:nth-of-type(5).sites-friendly-section .section-title,
main>section:nth-of-type(5).sites-friendly-section strong,
main>section:nth-of-type(5).sites-friendly-section b{
  color:var(--h-azul)!important;
}
main>section:nth-of-type(5).sites-friendly-section .section-title .nowrap,
main>section:nth-of-type(5).sites-friendly-section .sf-highlight{
  color:var(--h-gold)!important;
}

/* tabela comparativa: permanece azul */
main>section:nth-of-type(5) .sf-compare{
  background:var(--h-azul)!important;
  border-color:var(--h-azul)!important;
}
main>section:nth-of-type(5) .sf-compare,
main>section:nth-of-type(5) .sf-compare td{
  color:#E8EAED!important;
}
main>section:nth-of-type(5) .sf-compare th{
  background:rgba(212,185,106,.14)!important;
  color:#E7D3A2!important;
}
main>section:nth-of-type(5) .sf-compare td strong,
main>section:nth-of-type(5) .sf-compare td b{
  color:#FFFFFF!important;
}
main>section:nth-of-type(5) .sf-compare .sf-win{
  color:#E7D3A2!important;
}

/* botoes de beneficio: permanecem azuis */
main>section:nth-of-type(5) .benefit-pills>*{
  background:var(--h-azul)!important;
  border-color:rgba(212,185,106,.45)!important;
  color:#E8EAED!important;
}

/* ---- Faixa 7: "Marketing de geolocalizacao" (mapas antes/depois) ---- */
main>section:nth-of-type(7).mkt-geo{
  background:var(--h-branco)!important;
}
main>section:nth-of-type(7).mkt-geo,
main>section:nth-of-type(7).mkt-geo p,
main>section:nth-of-type(7).mkt-geo li,
main>section:nth-of-type(7).mkt-geo figcaption,
main>section:nth-of-type(7).mkt-geo .ba-antes,
main>section:nth-of-type(7).mkt-geo .ba-depois{
  color:var(--h-texto)!important;
}
main>section:nth-of-type(7).mkt-geo h2,
main>section:nth-of-type(7).mkt-geo h3,
main>section:nth-of-type(7).mkt-geo h4,
main>section:nth-of-type(7).mkt-geo .section-title,
main>section:nth-of-type(7).mkt-geo strong,
main>section:nth-of-type(7).mkt-geo b{
  color:var(--h-azul)!important;
}
main>section:nth-of-type(7).mkt-geo .eyebrow{
  color:var(--h-gold)!important;
}
main>section:nth-of-type(7).mkt-geo .check-list li::marker,
main>section:nth-of-type(7).mkt-geo .check-list li::before{
  color:var(--h-gold-ico)!important;
}

/* ---- Faixa 9: "Seu site tem estrutura para competir no Google?" ---- */
main>section:nth-of-type(9).section-preparado{
  background:var(--h-branco)!important;
}
main>section:nth-of-type(9).section-preparado,
main>section:nth-of-type(9).section-preparado p,
main>section:nth-of-type(9).section-preparado li,
main>section:nth-of-type(9).section-preparado .preparado-text{
  color:var(--h-texto)!important;
}
main>section:nth-of-type(9).section-preparado h2,
main>section:nth-of-type(9).section-preparado h3,
main>section:nth-of-type(9).section-preparado .section-title,
main>section:nth-of-type(9).section-preparado strong,
main>section:nth-of-type(9).section-preparado b{
  color:var(--h-azul)!important;
}
main>section:nth-of-type(9).section-preparado .eyebrow{
  color:var(--h-gold)!important;
}

/* ---- ESPACAMENTO VERTICAL entre blocos (pedido do Adriano) ----
   home-intro/produtos: 80px -> 52px   |   cta-azul: 60px -> 48px
   O hero NAO entra: o padding-bottom de 360px dele e o que sustenta
   os trust-cards sobrepostos. Mexer ali quebraria a sobreposicao. */
main>section.home-intro,
main>section.produtos-section{
  padding-top:52px!important;
  padding-bottom:52px!important;
}
main>section.cta-azul{
  padding-top:48px!important;
  padding-bottom:48px!important;
}

/* ---- TRANSBORDO HORIZONTAL NO MOBILE (home) ----
   O bloco de CTA em 2 colunas nao colapsava e empurrava a pagina
   para 470px numa tela de 390px. */
@media (max-width:900px){
  .cta-2col,
  .cta-2col-text,
  .cta-2col-img{
    max-width:100%!important;
    width:100%!important;
  }
  main table{
    display:block!important;max-width:100%!important;overflow-x:auto!important;
  }
  html,body{ overflow-x:hidden!important; }
}

/* Miniaturas de certificação na home: só as imagens, lado a lado, com link.
   Caixa igual nas duas e arte contida por dentro, porque os dois certificados
   têm proporção diferente e esticar deformaria o documento. */
.cert-minis{display:flex;gap:14px;flex-wrap:nowrap;align-items:flex-start;justify-content:center;margin:22px 0 6px}
.cert-mini{display:block;flex:0 1 200px;min-width:0;line-height:0;text-decoration:none;opacity:.92;transition:opacity .2s ease,transform .2s ease}
a.cert-mini:hover,a.cert-mini:focus-visible{opacity:1;transform:translateY(-2px)}
.cert-mini picture{display:block;width:100%;aspect-ratio:4/3;background:#fff;border:1px solid rgba(128,128,128,.22);border-radius:6px;overflow:hidden}
.cert-mini img{display:block;width:100%;height:100%;object-fit:contain}