/* Paginas internas com blocos pretos e brancos alternados (a V4, aprovada e levada para o site inteiro em 16/10/2026).
   Vale por cima dos CSS de sempre e do blocos.css (que ja traz as cores do bloco branco, o menu preto, o formulario branco e os cartoes).
   Abertura branca, depois um bloco preto, e assim alternando ate o formulario branco e o rodape preto.
   Blocos pretos seguidos ficam num <div class="hx-escuro hx-grupo"> so, para virar um cartao so. */

/* bloco branco: os tons antigos de texto (--navy, que o pages.css clareou, e --tint) voltam a ser escuros para dar leitura */
.hx-blocos .hx-claro{--navy:#4a5866;--tint:#4a6b8a}

/* a troca de cor ja separa os blocos: sem as linhas entre eles */
.hx-blocos main>section+section,.hx-blocos main>.hx-band+section,.hx-blocos main>*+.hx-escuro,.hx-blocos .legal-body{border-top:0}
/* dentro de um grupo preto, a linha fina entre os dois blocos continua */
.hx-blocos .hx-grupo>section{background:transparent}
.hx-blocos .hx-grupo>section+section{border-top:1px solid var(--hx-line)}

/* aberturas brancas: o veu atras do texto fica branco e o texto escuro, peso 500 */
.hx-blocos .hx-claro.service-hero-editorial:after{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.7) 42%,transparent 74%),linear-gradient(transparent 82%,#fff)}
.hx-blocos .hx-claro.services-opening:after{background:radial-gradient(ellipse 46% 40% at 50% 50%,rgba(255,255,255,.85),transparent 80%),linear-gradient(transparent 76%,#fff)}
.hx-blocos .hx-claro.about-hero:after{background:radial-gradient(ellipse 50% 32% at 50% 26%,rgba(255,255,255,.85),transparent 80%),linear-gradient(transparent 80%,#fff)}
.hx-blocos .hx-claro.legal-hero:after{background:radial-gradient(ellipse 62% 72% at 20% 55%,rgba(255,255,255,.92),transparent 76%),linear-gradient(transparent 72%,#fff)}
.hx-blocos .hx-claro :is(.service-description,.opening-copy,.legal-lead){color:#2b3a4b;text-shadow:0 1px 14px rgba(255,255,255,.95)}
.hx-blocos .hx-claro .intro-tags li{color:#2b3a4b}
.hx-blocos .hx-claro.service-hero-editorial :is(.service-name,.service-promise){color:#0d1117}
@media(max-width:900px){.hx-blocos .hx-claro.service-hero-editorial:after{background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.6)),linear-gradient(transparent 82%,#fff)}}

/* botoes no bloco branco: pilula preta, texto branco e setinha azul clara, como os da home V4 */
.hx-blocos .hx-claro :is(.button.service-primary,.media-cta),.hx-blocos .hx-claro :is(.button.service-primary,.media-cta):hover{background:#0d1117;color:#fff}
.hx-blocos .hx-claro :is(.button.service-primary,.media-cta):hover{box-shadow:5px 5px 0 #7fa3c4}
.hx-blocos .hx-claro :is(.button.service-primary,.media-cta):before{background:#7fa3c4}
.hx-blocos .hx-claro .crm-hero-actions .crm-watch{border-color:rgba(13,17,23,.18);color:#0d1117}

/* Sobre nos: o video continua escuro, entao o botao de reproduzir guarda o texto claro */
.hx-blocos .hx-claro .video-start{color:#fff}
.hx-blocos .hx-claro .about-film video{box-shadow:0 50px 120px -60px rgba(43,58,75,.55)}
.hx-blocos .hx-claro .about-film figcaption>span:first-child{color:#0d1117}

/* Trafego Pago: menu dos capitulos branco, preso logo abaixo do menu preto */
.hx-blocos .traffic-nav.hx-claro{background:rgba(255,255,255,.97);border-block-color:rgba(13,17,23,.08);box-shadow:0 7px 25px -22px #2b3a4b}
.hx-blocos .traffic-nav.hx-claro a:hover{background:#edf1f5}
.hx-blocos .traffic-nav.hx-claro a[aria-current]{background:#0d1117;color:#fff}

/* Ver todos: o catalogo virou cartao preto, com o mesmo respiro em cima e embaixo */
.hx-blocos .service-catalog.hx-escuro{padding-block:100px}
@media(max-width:600px){.hx-blocos .service-catalog.hx-escuro{padding-block:20px}}

/* Trafego Pago, capitulo do Google (branco): o quadro da busca vira cartao branco, como os da vitrine da home */
.hx-blocos .hx-claro .intent-board{border-color:rgba(13,17,23,.08);background:linear-gradient(155deg,#fff,#f4f7fa);box-shadow:0 2.6em 5em -2em rgba(43,58,75,.32),0 .4em 1.2em -.4em rgba(43,58,75,.12),inset 0 1px 0 #fff}
.hx-blocos .hx-claro .board-top>span:last-child{color:#2b3a4b}
.hx-blocos .hx-claro .intent-query{border:1px solid rgba(13,17,23,.08);box-shadow:0 8px 30px -16px rgba(43,58,75,.45)}
.hx-blocos .hx-claro .intent-path span{background:#0d1117;color:#fff;border-color:#0d1117}
.hx-blocos .hx-claro .format-tablist button{color:#4a5866}
.hx-blocos .hx-claro .format-tablist button:hover,.hx-blocos .hx-claro .format-tablist button[aria-selected=true]{color:#0d1117}