/* ============================================================
   CONSULTOR GEO — paleta da marca
   Carregada por último. Cor, mais o tamanho do logo no cabeçalho.
   Não mexe em espaçamento nem em posição. Tirar o <link> desfaz tudo.

   Base branca, blocos invertidos no escuro da marca.

   Ciano #00B7E5 sobre branco dá contraste 2,4:1, abaixo do
   mínimo legível. Por isso ele fica para superfície, borda e
   ícone; texto e link usam --ciano-txt, que passa em AA.
   ============================================================ */

:root{
  /* identidade */
  --marca-ciano:#00B7E5;
  --marca-turquesa:#00CED1;
  --marca-ciano-txt:#00718F;   /* ciano legível sobre branco */
  --marca-escuro:#233747;
  --marca-escuro-2:#1a2a36;
  --marca-cinza:#526878;
  --marca-fundo:#F3F6F8;
  --marca-branco:#FFFFFF;
  --marca-linha:rgba(35,55,71,.14);
  --marca-linha-clara:rgba(255,255,255,.16);

  /* redefine os tokens que as folhas antigas já usam */
  --void:#FFFFFF;
  --void2:#F3F6F8;
  --void3:#E8EDF1;
  --grey-premium:#F3F6F8;
  --grey-premium2:#E8EDF1;
  --gold1:#00718F;
  --gold2:#00B7E5;
  --gold3:#005E77;
  --gold-claro:#00B7E5;
  --txt:#233747;
  --texto:#233747;
  --texto-forte:#16242f;
  --texto-suave:#526878;
  --muted:#526878;
  --line:rgba(35,55,71,.14);
  --g-borda:rgba(35,55,71,.14);
  --g-cinza:#526878;
  --branco:#FFFFFF;
  --azul:#233747;
  --azul2:#1a2a36;
  --card-accent:#00B7E5;
}

/* ---------------- base clara ---------------- */
html,body{background:var(--marca-branco)!important;color:var(--marca-escuro)!important}
main{background:var(--marca-branco)!important}
main section{background:var(--marca-branco)!important}
main p,main li,main td,main dd,main figcaption{color:#3c4e5c!important}
main h1,main h2,main h3,main h4,main h5,main h6,
main strong,main b,main .section-title,main .lead-strong{color:var(--marca-escuro)!important}
main a{color:var(--marca-ciano-txt)!important}
main a:hover{color:#005E77!important}
.lede,.breadcrumb{color:var(--marca-cinza)!important}
.breadcrumb a{color:var(--marca-ciano-txt)!important}
.eyebrow,.cta-eyebrow{color:var(--marca-ciano-txt)!important}
hr,.article-body hr{border-color:var(--marca-linha)!important}

/* ---------------- cabeçalho escuro ---------------- */
header{background:var(--marca-escuro)!important;border-bottom:1px solid rgba(0,183,229,.22)!important}
header .navbar{background:transparent!important}
/* o logo novo tem o monograma ao lado do nome, então precisa de mais altura
   que o antigo para o texto continuar legível. A barra cresce junto, senão
   o logo encosta nas bordas. */
/* especificidade: existe body>header .navbar-brand img com !important nas
   folhas antigas, que vence .navbar-brand img. Tem que ser igual ou maior. */
body>header .container{min-height:98px!important}
body>header .navbar-brand img{height:72px!important;width:auto!important;max-width:none!important}
@media(max-width:900px){
  body>header .container{min-height:72px!important}
  body>header .navbar-brand img{height:52px!important}
}
.nav-menu>li>a{color:#e8eef2!important}
.nav-menu>li>a:hover{color:var(--marca-ciano)!important}
.nav-menu .dropdown{background:var(--marca-escuro-2)!important;border:1px solid rgba(0,183,229,.24)!important}
.nav-menu .dropdown a{color:#d7e2e9!important}
.nav-menu .dropdown a:hover{color:var(--marca-ciano)!important;background:rgba(0,183,229,.1)!important}
.menu-toggle{color:#e8eef2!important}
.skip{background:var(--marca-ciano)!important;color:#06222d!important}
.scroll-progress{background:linear-gradient(90deg,var(--marca-ciano),var(--marca-turquesa))!important}

/* ---------------- blocos invertidos, no escuro da marca ---------------- */
main section.cta-azul,
main section.cta-block,
main section.cluster-relacionado{
  background:var(--marca-escuro)!important;
  background-image:linear-gradient(180deg,#2a4152 0%,var(--marca-escuro) 100%)!important;
}

/* o hero é mais escuro que os outros blocos invertidos: é a área de impacto
   da marca e o fundo da caixa de conversa precisa de contraste */
main section.hero-static{
  background:#111d26!important;
  background-image:linear-gradient(180deg,#1b2c39 0%,#0d161d 100%)!important;
}
main section.cta-block.cta-inline{background-image:none!important;background:var(--marca-escuro)!important}

.hero-static *,.cta-azul *,.cta-block *,.cluster-relacionado *{border-color:var(--marca-linha-clara)}
.hero-static h1,.hero-static h2,.hero-static h3,
.cta-azul h1,.cta-azul h2,.cta-azul h3,
.cta-block h2,.cta-block h3,
.cluster-relacionado h2{color:#ffffff!important}
.hero-static p,.hero-static li,
.cta-azul p,.cta-azul li,
.cta-block p,.cta-block li,
.cluster-relacionado li,.cluster-relacionado a{color:#cddbe4!important}
.hero-static p strong,.cta-azul p strong,.cta-block p strong{color:#ffffff!important}
.hero-static .hero-h2,.hero-static h2{color:var(--marca-turquesa)!important}
.section-title-light,.cta-highlight{color:#ffffff!important}
.section-sub-light{color:#cddbe4!important}
.cta-eyebrow-light,.cluster-rotulo{color:var(--marca-turquesa)!important}
.cluster-relacionado a{color:#e4edf2!important}
.cluster-relacionado a:hover{color:var(--marca-ciano)!important}
.check-list-light li{color:#cddbe4!important}
.check-list-light li strong{color:#ffffff!important}
.cta-azul-nora,.cta-azul-urgencia{background:rgba(255,255,255,.05)!important;border-color:rgba(0,183,229,.4)!important}
.cta-azul-nora::before,.cta-azul-urgencia::before{background:linear-gradient(90deg,transparent,var(--marca-ciano),transparent)!important}

/* ---------------- cartões sobre fundo branco ---------------- */
.trust-card,.produto-card,.solucao-card,.equipe-card,.autor-box,.caso-real,
.side-produtos,.faq-item,.info-gain,.sf-compare,.nora-card,.nora-step{
  background:var(--marca-branco)!important;
  border-color:var(--marca-linha)!important;
  color:#3c4e5c!important;
}
.trust-card h3,.produto-card h3,.solucao-card h3,.equipe-text h3,
.nora-card-title,.nora-step-title{color:var(--marca-escuro)!important}
.trust-card p,.produto-card p,.solucao-card p,.nora-card p,.nora-step-desc{color:#3c4e5c!important}
.trust-ico,.trust-ico svg{color:var(--marca-ciano)!important}
.trust-ico{background:rgba(0,183,229,.1)!important;border-color:rgba(0,183,229,.3)!important}
.nora-icon{background:rgba(0,183,229,.12)!important;border-color:rgba(0,183,229,.45)!important;color:var(--marca-ciano-txt)!important;box-shadow:none!important;text-shadow:none!important}
.nora-card{background:linear-gradient(135deg,rgba(0,183,229,.06),rgba(0,183,229,.02))!important}
.nora-card-subtitle,.nora-card-objetivo{color:var(--marca-cinza)!important}
.nora-card-objetivo strong{color:var(--marca-escuro)!important}
.nora-card a.nora-link,.nora-card-title{color:var(--marca-ciano-txt)!important;text-shadow:none!important}
.produto-card.border-azul{border-left-color:#00B7E5!important}
.produto-card.border-verde{border-left-color:#00CED1!important}
.produto-card.border-amarelo{border-left-color:#0091B8!important}
.produto-card.border-vermelho{border-left-color:#24506b!important}
.produto-card.border-roxo{border-left-color:#3a7f96!important}
.produto-card.border-ciano{border-left-color:#00B7E5!important}

/* ---------------- listas, tabelas e FAQ ---------------- */
.check-list li{color:#3c4e5c!important}
.check-list li::before,.check-list li::marker,.bene-list li::before{color:var(--marca-ciano)!important}
.benefit-pills li{background:rgba(0,183,229,.09)!important;border-color:rgba(0,183,229,.28)!important;color:var(--marca-escuro)!important}
.info-gain th,.sf-compare th{background:var(--marca-fundo)!important;color:var(--marca-escuro)!important;border-color:var(--marca-linha)!important}
.info-gain td,.sf-compare td{border-color:var(--marca-linha)!important;color:#3c4e5c!important}
.info-gain .sf-win,.sf-compare .sf-win{color:var(--marca-ciano-txt)!important;font-weight:600}
.tabela-legenda,caption{color:var(--marca-cinza)!important}
.faq-item{border-color:var(--marca-linha)!important}
.faq-item summary,.faq-item summary h3{color:var(--marca-escuro)!important}
.faq-item summary::marker,.faq-item summary::-webkit-details-marker{color:var(--marca-ciano)!important}
.faq-resposta p{color:#3c4e5c!important}
.silo-links a{background:var(--marca-fundo)!important;border-color:var(--marca-linha)!important;color:var(--marca-ciano-txt)!important}
.silo-links a:hover{border-color:var(--marca-ciano)!important;background:rgba(0,183,229,.08)!important}
.side-produtos .side-label{color:var(--marca-ciano-txt)!important}
.side-produtos a{color:#3c4e5c!important}
.side-produtos a:hover{color:var(--marca-ciano-txt)!important}
.autor-box,.autor-datas{color:var(--marca-cinza)!important}

/* ---------------- botões ----------------
   Padrão único do site, o mesmo de antes: azul-marinho, borda dourada,
   ícone verde e texto branco. Fica em valores literais para não depender
   dos tokens, que a paleta nova redefiniu. */
.wpp-cta,.wpp-cta:hover,.btn-wpp,.btn-wpp:hover,
form button[type=submit],form input[type=submit],
.lead-modal-box button[type=submit]{
  background:linear-gradient(160deg,#0d1f4e,#071030)!important;
  color:#ffffff!important;
  border:2px solid #c9a84c!important;
  box-shadow:none!important;   /* sem halo atrás do botão */
  filter:none!important;
  text-decoration:none!important;
}
.wpp-cta svg,.btn-wpp svg{fill:#25D366!important}
/* os outros botões do site herdaram o mesmo halo dourado; todos sem glow */
.btn-enviar,.btn-enviar:hover,.btn-laranja,.btn-laranja:hover,
.btn-navy,.btn-navy:hover,.btn-ler,.btn-ler:hover,
.cta-block .btn-wpp,.cta-azul .btn-wpp,.hero-static .wpp-cta,
.nav-cta,.nav-cta:hover,.back-to-top{box-shadow:none!important}
.btn-nav,.btn-secondary{color:#fff!important;border-color:rgba(255,255,255,.45)!important;background:transparent!important}
.back-to-top{background:linear-gradient(135deg,#d4b96a,#c9a84c)!important;color:#0a1525!important;border:0!important}

/* ---------------- rodapé ---------------- */
footer.footer{background:var(--marca-escuro-2)!important}
footer.footer p,footer.footer li,footer.footer a,footer.footer address{color:#b9c8d2!important}
footer.footer a:hover{color:var(--marca-ciano)!important}
footer .footer-h,footer .side-label,footer .footer-grid>div>p:first-child{color:var(--marca-turquesa)!important}
footer .nap-loc strong{color:#ffffff!important}
footer .footer-social svg{fill:#b9c8d2!important}
footer .footer-social a:hover svg{fill:var(--marca-ciano)!important}
.footer-bottom{color:#8fa3b0!important;border-top-color:rgba(255,255,255,.1)!important}

/* ---------------- caixa de conversa com IA, no hero escuro ---------------- */
.iachat-chamada{color:var(--marca-turquesa)!important}
.iachat-box{background:rgba(255,255,255,.05)!important;border-color:rgba(0,183,229,.3)!important}
.iachat-top{background:rgba(255,255,255,.05)!important;border-bottom-color:rgba(0,183,229,.2)!important}
.iachat-nome{color:#cddbe4!important}
.iachat-tag{color:var(--marca-turquesa)!important;border-color:rgba(0,206,209,.45)!important}
.iachat-q{background:rgba(0,183,229,.16)!important;border-color:rgba(0,183,229,.42)!important;color:#ffffff!important}
.iachat-cursor{background:var(--marca-turquesa)!important}
.iachat-a{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important}
.iachat-a p{color:#cddbe4!important}
.iachat-lista li{color:#a9bcc8!important}
.iachat-falta{border-color:rgba(0,206,209,.55)!important;color:#bdeef0!important}
.iachat-falta::before{border-color:rgba(0,206,209,.55)!important;color:var(--marca-turquesa)!important}
.iachat-legenda{color:#a9bcc8!important}
.iachat-legenda strong{color:#ffffff!important}

/* ---------------- modal de contato ---------------- */
.kq-modal,.lead-modal,.lead-modal-box{background:var(--marca-branco)!important;color:var(--marca-escuro)!important}
.lead-modal-box h2,.lead-modal-box h3,.lead-modal-box label{color:var(--marca-escuro)!important}
.lead-modal-box input,.lead-modal-box textarea,.lead-modal-box select{
  background:var(--marca-fundo)!important;border-color:var(--marca-linha)!important;color:var(--marca-escuro)!important}

/* ---------------- formulário na página de contato ---------------- */
form input,form textarea,form select{
  background:var(--marca-fundo)!important;border-color:var(--marca-linha)!important;color:var(--marca-escuro)!important}
form label{color:var(--marca-escuro)!important}

/* ---------------- imagens que tinham sombra para fundo escuro ---------------- */
.hero-img-card img{box-shadow:0 18px 40px rgba(35,55,71,.28)!important}
.page-hero-media img,.cta-block-media img{filter:none!important}

/* ---------------- foto na proporção real ----------------
   .page-hero-media img tinha width e height fixos mais object-fit:cover,
   o que recortava a foto no navegador mesmo com o arquivo inteiro. */
/* só os dois containers de hero. O bloco de equipe e os cartões de CTA
   ficam exatamente como eram: não foi pedido para mexer neles. */
.page-hero-media img,.hero-img-card img{
  height:auto!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
}
.page-hero-media img{width:auto!important;max-width:200px!important}

/* ---------------- contexto escuro: tokens voltam a ser claros ----------------
   As folhas antigas pintam muita coisa com var(--txt), var(--gold1) e afins,
   contando que sejam cores claras sobre fundo escuro. Como a paleta nova
   redefiniu esses tokens para o fundo branco, tudo que está dentro de um bloco
   escuro passou a escrever escuro sobre escuro.

   Em vez de caçar regra por regra, os tokens são redeclarados dentro dos
   blocos escuros. Variável de CSS herda, então toda regra antiga que usa
   var(--txt) ali dentro volta a receber a cor clara sozinha. */
header,
footer.footer,
main section.hero-static,
main section.cta-azul,
main section.cta-block,
main section.cluster-relacionado{
  --txt:#F3F4F6;
  --texto:#F3F4F6;
  --texto-forte:#FFFFFF;
  --texto-suave:#CDDBE4;
  --muted:#A9BCC8;
  --g-cinza:#CDDBE4;
  --branco:#FFFFFF;
  --gold1:#00CED1;
  --gold2:#00B7E5;
  --gold3:#7FE3E5;
  --gold-claro:#7FE3E5;
  --line:rgba(255,255,255,.16);
  --g-borda:rgba(255,255,255,.16);
  --card-accent:#00CED1;
}

/* cabeçalho de tabela: o fundo vinha de var(--g-cinza) e ficava cinza-azulado
   com texto escuro em cima */
.info-gain thead th,.sf-compare thead th{
  background:#E8EDF1!important;color:#233747!important;
}
.info-gain tbody th,.sf-compare tbody th{background:#F3F6F8!important;color:#233747!important}
.info-gain .sf-win,.sf-compare .sf-win{color:#00566E!important;background:rgba(0,183,229,.07)!important}

/* nomes e cargos do bloco de equipe, sobre fundo branco */
.equipe-nome,.equipe-nome strong,.equipe-text .cargo,.equipe-card .cargo{color:#233747!important}
.equipe-text p,.equipe-card figcaption p{color:#3c4e5c!important}
.caso-real p,.caso-real-text p{color:#3c4e5c!important}

/* a bolha da pergunta na caixa de IA ficou ciano cheio com texto claro */
.iachat-q{background:rgba(0,183,229,.18)!important;border-color:rgba(0,183,229,.45)!important;color:#FFFFFF!important}

/* ---------------- ajustes de especificidade ----------------
   Estas três regras existem porque as folhas antigas vencem com seletores
   mais específicos. Os seletores abaixo têm a mesma forma da regra que
   vencia, para não depender de ordem de carregamento. */

/* tabela: o cabeçalho vinha com background:var(--g-cinza), um cinza-azulado
   médio, e texto escuro em cima */
main .article-body table thead th,main table thead th,
main .article-body .info-gain thead th,main .article-body .sf-compare thead th{
  background:#E8EDF1!important;color:#233747!important;
}
main .article-body table tbody th,main table tbody th{background:#F3F6F8!important;color:#233747!important}
main .article-body table td,main table td{background:transparent!important;color:#3c4e5c!important}
main .article-body table td.sf-win,main table td.sf-win{color:#00566E!important;background:rgba(0,183,229,.08)!important}

/* rótulo pequeno acima dos títulos: teal escuro sobre bloco escuro */
.hero-static .cta-eyebrow,.hero-static .eyebrow,
.cta-azul .cta-eyebrow,.cta-azul .eyebrow,
.cta-block .cta-eyebrow,.cta-block .eyebrow,
.cluster-relacionado .cta-eyebrow,.cluster-relacionado .eyebrow{color:#00CED1!important}

/* título de CTA dentro de bloco escuro */
.cta-block .cta-titulo,.cta-azul .cta-titulo,.hero-static .cta-titulo,
.cta-block p.cta-titulo{color:#FFFFFF!important}

/* listra das linhas pares: usava var(--g-cinza), que na paleta nova virou um
   cinza-azulado escuro. Em tabela sobre fundo branco tem que ser clara.
   A especificidade precisa empatar com a regra original, que tem pseudo-classe. */
main .article-body table tbody tr:nth-child(2n) td,
main .article-body table tbody tr:nth-child(2n) th,
main table tbody tr:nth-child(2n) td,
main table tbody tr:nth-child(2n) th{background:#F3F6F8!important}
main .article-body table tbody tr:nth-child(2n) td.sf-win,
main table tbody tr:nth-child(2n) td.sf-win{background:rgba(0,183,229,.12)!important}
main .article-body table tbody tr:hover td,
main .article-body table tbody tr:hover th{background:#E8EDF1!important}

/* título de CTA: o seletor original tem duas classes, então precisa de três */
main section .cta-block .cta-titulo,main section .cta-azul .cta-titulo,
main section.cta-block .cta-block-text .cta-titulo{color:#FFFFFF!important}

/* tabela comparativa da home: os td estavam com texto quase branco, herdado
   do tema escuro, agora sobre listra clara */
main section .sf-compare tbody td,main section .sf-compare tbody th,
main section.home-intro .sf-compare td{color:#3c4e5c!important}
main section .sf-compare tbody td.sf-win{color:#00566E!important}
main section .sf-compare thead th{background:#E8EDF1!important;color:#233747!important}

/* a tabela comparativa da faixa 5 era uma caixa azul-escura sobre fundo claro,
   desenhada no tema antigo. Na paleta nova ela vira uma tabela clara como as
   outras. Os seletores repetem a forma do home-claro.css, que usa
   nth-of-type e por isso vence os seletores simples. */
main>section:nth-of-type(5) .sf-compare{
  background:#FFFFFF!important;border-color:rgba(35,55,71,.14)!important;
}
main>section:nth-of-type(5) .sf-compare td,
main>section:nth-of-type(5) .sf-compare tbody th{color:#3c4e5c!important;border-color:rgba(35,55,71,.14)!important}
main>section:nth-of-type(5) .sf-compare thead th{background:#E8EDF1!important;color:#233747!important;border-color:rgba(35,55,71,.14)!important}
main>section:nth-of-type(5) .sf-compare td strong,
main>section:nth-of-type(5) .sf-compare td b{color:#233747!important}
main>section:nth-of-type(5) .sf-compare .sf-win{color:#00566E!important;background:rgba(0,183,229,.10)!important}

/* ---------------- faixas escuras no meio da home ----------------
   O style-home-dark.css pinta .home-intro com gradiente escuro, e esse
   seletor de classe vence o meu "main section". O home-claro.css clareia
   só as faixas 3, 5, 7 e 9; as outras continuam escuras.

   Regra pedida pelo Adriano: em bloco escuro, texto branco e título no azul
   claro da marca. O h1 fica branco de propósito, por ser o título da página
   e aparecer uma vez só. */
main>section:nth-of-type(8),
main>section:nth-of-type(10),
main>section:nth-of-type(13),
main>section:nth-of-type(15){
  --txt:#F3F4F6;
  --texto:#F3F4F6;
  --texto-forte:#FFFFFF;
  --texto-suave:#CDDBE4;
  --muted:#A9BCC8;
  --g-cinza:#CDDBE4;
  --gold1:#00CED1;
  --gold2:#00B7E5;
  --line:rgba(255,255,255,.16);
  --g-borda:rgba(255,255,255,.16);
}

/* a faixa da equipe recebe o cinza escuro da paleta */
main>section:nth-of-type(15).equipe,
main>section:nth-of-type(15){
  background:#303030!important;
  background-image:none!important;
}

/* texto branco */
main>section:nth-of-type(8) p,
main>section:nth-of-type(10) p,
main>section:nth-of-type(13) p,
main>section:nth-of-type(15) p,
main>section:nth-of-type(8) li,
main>section:nth-of-type(10) li,
main>section:nth-of-type(13) li,
main>section:nth-of-type(15) li,
main>section:nth-of-type(8) span,
main>section:nth-of-type(10) span,
main>section:nth-of-type(13) span,
main>section:nth-of-type(15) span,
main>section:nth-of-type(8) td,
main>section:nth-of-type(10) td,
main>section:nth-of-type(13) td,
main>section:nth-of-type(15) td,
main>section:nth-of-type(8) figcaption,
main>section:nth-of-type(10) figcaption,
main>section:nth-of-type(13) figcaption,
main>section:nth-of-type(15) figcaption,
main>section:nth-of-type(8) .cargo,
main>section:nth-of-type(10) .cargo,
main>section:nth-of-type(13) .cargo,
main>section:nth-of-type(15) .cargo,
main>section:nth-of-type(8) summary,
main>section:nth-of-type(10) summary,
main>section:nth-of-type(13) summary,
main>section:nth-of-type(15) summary{color:#FFFFFF!important}

/* título no azul claro da marca */
main>section:nth-of-type(8) h2,
main>section:nth-of-type(10) h2,
main>section:nth-of-type(13) h2,
main>section:nth-of-type(15) h2,
main>section:nth-of-type(8) h3,
main>section:nth-of-type(10) h3,
main>section:nth-of-type(13) h3,
main>section:nth-of-type(15) h3,
main>section:nth-of-type(8) h4,
main>section:nth-of-type(10) h4,
main>section:nth-of-type(13) h4,
main>section:nth-of-type(15) h4,
main>section:nth-of-type(8) .section-title,
main>section:nth-of-type(10) .section-title,
main>section:nth-of-type(13) .section-title,
main>section:nth-of-type(15) .section-title,
main>section:nth-of-type(8) summary h3,
main>section:nth-of-type(10) summary h3,
main>section:nth-of-type(13) summary h3,
main>section:nth-of-type(15) summary h3{color:#00B7E5!important}

main>section:nth-of-type(8) strong,
main>section:nth-of-type(10) strong,
main>section:nth-of-type(13) strong,
main>section:nth-of-type(15) strong,
main>section:nth-of-type(8) b,
main>section:nth-of-type(10) b,
main>section:nth-of-type(13) b,
main>section:nth-of-type(15) b{color:#FFFFFF!important}

/* cartões dentro dessas faixas ficam translúcidos, não brancos */
main>section:nth-of-type(8) .produto-card,
main>section:nth-of-type(10) .produto-card,
main>section:nth-of-type(13) .produto-card,
main>section:nth-of-type(15) .produto-card,
main>section:nth-of-type(8) .faq-item,
main>section:nth-of-type(10) .faq-item,
main>section:nth-of-type(13) .faq-item,
main>section:nth-of-type(15) .faq-item,
main>section:nth-of-type(8) .equipe-card,
main>section:nth-of-type(10) .equipe-card,
main>section:nth-of-type(13) .equipe-card,
main>section:nth-of-type(15) .equipe-card,
main>section:nth-of-type(8) .caso-real,
main>section:nth-of-type(10) .caso-real,
main>section:nth-of-type(13) .caso-real,
main>section:nth-of-type(15) .caso-real{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.14)!important;
}

/* links dentro de qualquer bloco escuro */
.hero-static a,.cta-azul a,.cta-block a,.cluster-relacionado a,
main>section:nth-of-type(8) a,
main>section:nth-of-type(10) a,
main>section:nth-of-type(13) a,
main>section:nth-of-type(15) a{color:#7FE3E5!important}
.hero-static a:hover,.cta-azul a:hover,.cta-block a:hover{color:#00CED1!important}
.hero-static a.wpp-cta,.hero-static a.btn-wpp,.cta-azul a.wpp-cta,.cta-azul a.btn-wpp,.cta-block a.btn-wpp,.cluster-relacionado a.btn-wpp,
main>section:nth-of-type(8) a.btn-wpp,
main>section:nth-of-type(10) a.btn-wpp,
main>section:nth-of-type(13) a.btn-wpp,
main>section:nth-of-type(15) a.btn-wpp{color:#FFFFFF!important}
/* fim de pagina: nome, cargo, cobertura e data, em corpo 8 */
.autor-box p,.autor-box a,.autor-box .autor-datas,main .autor-box p,main .autor-box a{font-size:8px!important;line-height:1.5!important}

/* ---------------------------------------------------------------------------
   Certificação: certificado oficial com link de verificação.
   Cores pelos tokens da marca, que são de base clara. Classes novas, nenhuma
   regra existente alterada. A tipografia repete o que o projeto exige:
   palavra não quebra sozinha e não fica viúva.
   --------------------------------------------------------------------------- */
.certificacoes{margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--g-borda,rgba(35,55,71,.14))}
.cert-item{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.cert-selo{flex:0 0 auto;display:block;line-height:0;border-radius:50%;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.cert-selo:hover,.cert-selo:focus-visible{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.cert-selo img{display:block;width:160px;height:auto;max-width:100%;border-radius:50%}
.cert-texto{flex:1 1 320px;min-width:0}
.cert-texto h3{margin:0 0 10px;color:var(--texto-forte,#16242f);word-break:keep-all;hyphens:none;text-wrap:balance}
.cert-texto p{margin:0 0 10px;hyphens:none;text-wrap:pretty}
.cert-texto .cert-emissor{color:var(--marca-cinza,#526878);font-size:.875rem}
.cert-verificar{display:inline-block;font-weight:600;color:var(--marca-ciano-txt,#00718F);text-decoration:none;border-bottom:1px solid rgba(0,113,143,.35)}
.cert-verificar:hover,.cert-verificar:focus-visible{border-bottom-color:var(--marca-ciano-txt,#00718F)}
@media (max-width:640px){
 .cert-item{gap:16px}
 .cert-selo img{display:block;width:160px;height:auto;max-width:100%;border-radius:50%}
}
/* Selo no rodapé: discreto, uma linha. */

/* ---------------------------------------------------------------------------
   Miniaturas de certificação: só as imagens, lado a lado, cada uma com link.
   A caixa é igual nas duas e a arte fica 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;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}

/* submenu legivel */
/* O site-home.css pinta o submenu com `body>header .nav-menu .dropdown`, que
   tem especificidade maior que `header .nav-menu .dropdown`, entao a regra da
   marca perdia e o menu abria branco com texto quase branco. O seletor abaixo
   desce ate `li.has-sub` para ganhar sem depender de ordem de arquivo. */
body > header .navbar .nav-menu li.has-sub .dropdown{
  background:var(--marca-escuro-2,#1a2a36)!important;
  border:1px solid rgba(0,183,229,.28)!important;
  border-top:3px solid var(--marca-ciano,#00B7E5)!important;
  box-shadow:0 14px 40px rgba(16,36,47,.28)!important;
  border-radius:0 0 10px 10px!important;
  backdrop-filter:none!important;
}
body > header .navbar .nav-menu li.has-sub .dropdown a{
  color:#e8eef2!important;
  background:transparent!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body > header .navbar .nav-menu li.has-sub .dropdown a:last-child{border-bottom:0!important}
body > header .navbar .nav-menu li.has-sub .dropdown a:hover,
body > header .navbar .nav-menu li.has-sub .dropdown a:focus-visible{
  background:rgba(0,183,229,.14)!important;
  color:var(--marca-ciano,#00B7E5)!important;
}
body > header .navbar .nav-menu li.has-sub .dropdown a::before{
  color:var(--marca-ciano,#00B7E5)!important;opacity:.8!important;
}
@media(max-width:900px){
  body > header .navbar .nav-menu li.has-sub .dropdown{
    background:transparent!important;border:0!important;box-shadow:none!important;
    border-left:1px solid rgba(0,183,229,.28)!important;border-radius:0!important;
  }
  body > header .navbar .nav-menu li.has-sub .dropdown a{border-bottom:0!important}
}

/* ---------------------------------------------------------------------------
   Índice do blog em cards. Antes eram pílulas só com o título, que não davam
   ao leitor como escolher o que ler. Cada card traz a descrição declarada pela
   própria página, então os dois nunca divergem.
   --------------------------------------------------------------------------- */
.blog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:16px;margin:16px 0 36px}
.blog-card{display:flex;flex-direction:column;gap:9px;min-width:0;padding:18px 18px 16px;border:1px solid var(--g-borda,rgba(35,55,71,.14));border-radius:10px;background:var(--marca-branco,#fff);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.blog-card:hover{border-color:var(--marca-ciano,#00B7E5);box-shadow:0 10px 26px rgba(16,36,47,.10);transform:translateY(-2px)}
.blog-card h3{margin:0;font-size:1rem;line-height:1.35;word-break:keep-all;hyphens:none;text-wrap:balance}
.blog-card h3 a{color:var(--texto-forte,#16242f);text-decoration:none}
.blog-card h3 a:hover{color:var(--marca-ciano-txt,#00718F)}
.blog-card p{margin:0;font-size:.875rem;line-height:1.55;color:var(--marca-cinza,#526878);hyphens:none;text-wrap:pretty;flex:1 1 auto}
.blog-card-btn{align-self:flex-start;margin-top:4px;font-size:.8125rem;font-weight:600;color:var(--marca-ciano-txt,#00718F);text-decoration:none;border-bottom:1px solid rgba(0,113,143,.35);padding-bottom:1px}
.blog-card-btn:hover,.blog-card-btn:focus-visible{border-bottom-color:var(--marca-ciano-txt,#00718F)}
@media (max-width:480px){.blog-cards{grid-template-columns:1fr}}

/* rodape compacto */
/* O rodapé vinha alto e arejado demais: coluna de links com espaço de parágrafo
   entre um item e outro. Aqui o espaçamento vira gap da lista, que é previsível,
   e as margens soltas são zeradas para não somarem por cima. */
.footer{padding:30px 0 0!important}
.footer .footer-grid{gap:20px 26px!important;margin-bottom:20px!important}
.footer ul{display:flex!important;flex-direction:column!important;gap:3px!important;margin:0!important;padding:0!important}
.footer ul li{margin:0!important;padding:0!important}
.footer ul li a{display:inline-block;font-size:12px!important;line-height:1.45!important;padding:1px 0!important}
.footer .footer-logo p{margin:10px 0 0!important;font-size:12px!important;line-height:1.5!important}
.footer .footer-social{margin-top:12px!important;display:flex;gap:8px}
.footer .footer-social a{width:32px!important;height:32px!important}
.footer .footer-nap p{margin:0 0 8px!important;font-size:11px!important;line-height:1.45!important}
.footer .footer-bottom{padding:10px 0!important;margin-top:4px!important;font-size:11px!important}
@media(max-width:900px){
  .footer{padding:24px 0 0!important}
  .footer .footer-grid{gap:18px!important}
}

/* espacamento do topo */
/* O vão entre o fim do hero e a primeira seção somava 88px: 40 de padding
   embaixo do hero mais 48 em cima do conteúdo. Fica o mínimo que ainda separa
   as duas faixas. Vale para todas as páginas. */
.page-hero{padding:38px 0 22px!important}
section.content{padding-top:26px!important}
section.content>.container>.content-grid{margin-top:0!important}
@media(max-width:900px){
  .page-hero{padding:26px 0 16px!important}
  section.content{padding-top:20px!important}
}

/* foto do sobre mim */
/* A foto é retrato 3:4 e ficava alta demais ao lado do texto. A coluna da
   direita encolhe junto, e a imagem encosta à esquerda dela, para fechar o
   vão que sobrava entre o texto e a foto. */
/* O hero usava container de 1180px e o conteúdo 1200px: as duas fotos da
   direita caíam em margens diferentes. Mesma largura nos dois, mesma coluna
   de 240px, e as duas imagens encostam na mesma linha vertical. */
.page-hero .container{max-width:1200px!important}
.page-hero .container,.sobre-mim-grid{grid-template-columns:minmax(0,1fr) 240px!important;gap:32px!important}
.page-hero .container{align-items:center!important}
/* .article-boxed tem 16px de recuo dos dois lados, e era so isso que fazia a
   foto do Sobre Mim parar 16px antes da foto do hero. Cancelo o recuo neste
   bloco: as duas fotos passam a terminar na mesma linha, e o texto tambem. */
.sobre-mim-grid{margin-left:-16px!important;margin-right:-16px!important;align-items:start!important}
.page-hero-media,.sobre-mim-foto{margin:0!important}
/* a foto do hero volta ao tamanho de antes, 200px, encostada na direita da
   coluna, para terminar na mesma linha da foto do Sobre Mim */
.page-hero-media img{width:auto!important;max-width:200px!important;height:auto!important;
  margin:0 0 0 auto!important;display:block}
/* proporcao original da foto, sem recorte nenhum */
.sobre-mim-foto img{width:240px!important;max-width:100%!important;height:auto!important;
  object-fit:contain!important;margin:0!important;display:block}
@media(max-width:900px){
  .page-hero .container,.sobre-mim-grid{grid-template-columns:1fr!important;gap:20px!important}
  .sobre-mim-grid{margin-left:0!important;margin-right:0!important}
  .page-hero-media img{width:200px!important;max-width:200px!important;margin:0 auto!important}
  .sobre-mim-foto img{width:200px!important;height:auto!important;margin:0 auto!important}
}

/* ---------------------------------------------------------------------------
   cards do indice do blog, altura livre
   O site-home.css define .blog-card com height:280px e overflow:hidden, porque
   foi escrito para card com imagem de fundo na home. No indice do blog os cards
   sao de texto, entao a altura fixa cortava titulo e escondia o "Leia mais".
   Aqui a altura volta a seguir o conteudo e o grid fica em tres colunas.
   --------------------------------------------------------------------------- */
.blog-cards{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;align-items:stretch!important;margin:18px 0 40px!important;
}
.blog-card{
  position:relative!important;display:flex!important;flex-direction:column!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  overflow:visible!important;justify-content:flex-start!important;
  gap:10px!important;padding:26px 22px 20px!important;min-width:0!important;
  background:var(--marca-branco,#fff)!important;
  border:1px solid var(--g-borda,rgba(35,55,71,.14))!important;border-radius:10px!important;
}
/* duas folhas desenhavam uma barrinha no topo, uma por ::before e outra por
   ::after, e as duas juntas davam o risco torto. Fica so a de cima. */
.blog-card::after{display:none!important}
.blog-card::before{
  content:""!important;position:absolute!important;top:0!important;left:0!important;
  right:0!important;height:3px!important;z-index:1!important;
  background:var(--marca-ciano,#00B7E5)!important;opacity:1!important;
  border-radius:10px 10px 0 0!important;
}
main .blog-card h3{
  margin:0!important;font-size:1rem!important;line-height:1.35!important;
  font-weight:700!important;color:var(--texto-forte,#16242f)!important;
  border-left:0!important;padding-left:0!important;
  word-break:keep-all!important;hyphens:none!important;text-wrap:balance!important;
}
main .blog-card h3 a{color:inherit!important;text-decoration:none!important}
main .blog-card h3 a:hover{color:var(--marca-ciano-txt,#00718F)!important}
main .blog-card p{
  margin:0!important;flex:1 1 auto!important;font-size:.875rem!important;
  line-height:1.55!important;color:var(--marca-cinza,#526878)!important;
  hyphens:none!important;text-wrap:pretty!important;
}
.blog-card .blog-card-btn{
  align-self:flex-start!important;margin-top:6px!important;font-size:.8125rem!important;
  font-weight:600!important;color:var(--marca-ciano-txt,#00718F)!important;
  text-decoration:none!important;border-bottom:1px solid rgba(0,113,143,.35)!important;
  padding-bottom:1px!important;
}
.blog-card .blog-card-btn:hover{border-bottom-color:var(--marca-ciano-txt,#00718F)!important}
@media(max-width:1000px){.blog-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){.blog-cards{grid-template-columns:1fr!important}}

/* ---------------------------------------------------------------------------
   Capa dos cards do blog. O título fica sobre a imagem, dentro de um gradiente
   escuro que nasce do pé da foto, então a foto pode ser clara. A descrição vem
   abaixo da imagem e o botão fecha o card. Enquanto um artigo não tem foto, a
   capa vira bloco da marca com a mesma proporção, para o grid não desalinhar.
   --------------------------------------------------------------------------- */
.blog-card{padding:0!important;overflow:hidden!important}
.blog-card::before{display:none!important}
.blog-capa{
  position:relative!important;display:block!important;width:100%!important;
  aspect-ratio:16/9!important;overflow:hidden!important;text-decoration:none!important;
  background:linear-gradient(140deg,#0E2A47 0%,#16242f 60%,#0b1a28 100%)!important;
  border-radius:10px 10px 0 0!important;
}
.blog-capa img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;
  transition:transform .5s ease!important;
}
.blog-card:hover .blog-capa img{transform:scale(1.04)!important}
.blog-capa::after{
  content:""!important;position:absolute!important;inset:0!important;
  background:linear-gradient(180deg,rgba(7,20,32,.10) 0%,rgba(7,20,32,.45) 46%,rgba(7,20,32,.88) 100%)!important;
}
.blog-capa .blog-capa-faixa{
  position:absolute!important;left:0!important;right:0!important;top:0!important;
  height:3px!important;background:var(--marca-ciano,#00B7E5)!important;z-index:2!important;
}
main .blog-capa h3{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:2!important;
  margin:0!important;padding:14px 16px 14px!important;
  font-size:.98rem!important;line-height:1.3!important;font-weight:700!important;
  color:#fff!important;border-left:0!important;
  word-break:keep-all!important;hyphens:none!important;text-wrap:balance!important;
  text-shadow:0 1px 2px rgba(0,0,0,.5)!important;
}
.blog-card-corpo{
  display:flex!important;flex-direction:column!important;flex:1 1 auto!important;
  gap:10px!important;padding:16px 18px 18px!important;min-width:0!important;
}
main .blog-card-corpo p{
  margin:0!important;flex:1 1 auto!important;font-size:.875rem!important;
  line-height:1.55!important;color:var(--marca-cinza,#526878)!important;
  hyphens:none!important;text-wrap:pretty!important;
}
@media (max-width:620px){
  main .blog-capa h3{font-size:1rem!important}
}

/* ---------------------------------------------------------------------------
   Coluna lateral do blog, com categorias e serviços. O .side-produtos das
   páginas de serviço está escondido por !important no site-home.css, então a
   coluna do blog tem classe própria em vez de herdar aquela.
   --------------------------------------------------------------------------- */
.content-grid.com-lateral{
  display:grid!important;grid-template-columns:minmax(0,1fr) 260px!important;
  gap:34px!important;align-items:start!important;
}
.col-lateral{min-width:0!important;position:sticky!important;top:88px!important}
/* o site-home.css manda .content-grid>.article-body ocupar 1/-1, o que jogava
   a coluna para a linha de baixo. Aqui o artigo volta a ocupar so a coluna 1. */
.content-grid.com-lateral>.article-body{grid-column:1!important;width:auto!important}
.content-grid.com-lateral>.col-lateral{grid-column:2!important}
.col-lateral .bloco-lateral{
  background:var(--marca-branco,#fff)!important;
  border:1px solid var(--g-borda,rgba(35,55,71,.14))!important;
  border-radius:10px!important;padding:18px 18px 14px!important;margin-bottom:18px!important;
}
.col-lateral .titulo-lateral{
  margin:0 0 12px!important;font-size:.72rem!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--marca-ciano-txt,#00718F)!important;
}
.col-lateral ul{list-style:none!important;margin:0!important;padding:0!important}
.col-lateral li{margin:0!important;border-bottom:1px solid rgba(35,55,71,.08)!important}
.col-lateral li:last-child{border-bottom:0!important}
.col-lateral a{
  display:block!important;padding:9px 0!important;font-size:.875rem!important;
  line-height:1.4!important;color:var(--texto-forte,#16242f)!important;
  text-decoration:none!important;transition:color .2s ease,padding-left .2s ease!important;
}
.col-lateral a:hover,.col-lateral a:focus-visible{
  color:var(--marca-ciano-txt,#00718F)!important;padding-left:5px!important;
}
.col-lateral .n{
  float:right!important;font-size:.75rem!important;font-weight:600!important;
  color:var(--marca-cinza,#526878)!important;
}
@media (max-width:1000px){
  .content-grid.com-lateral{grid-template-columns:1fr!important;gap:24px!important}
  .col-lateral{position:static!important}
}

/* ---------------------------------------------------------------------------
   legenda de tabela sem italico
   A legenda abaixo das tabelas era a unica coisa em italico na maioria das
   paginas, e sozinha obrigava o navegador a baixar montserrat-400i, 39 KB, em
   toda visita. Em peso normal a legenda continua legivel e some a fonte extra.
   --------------------------------------------------------------------------- */
.article-body .info-gain caption,.gain-table caption,.tabela-legenda{
  font-style:normal!important;
}