/* ============================================================
   8sa Campinas - TEMA CLARO "Azul suave" (modelo B)
   Carregado por ultimo em todas as paginas. Usa !important
   porque precisa vencer os estilos escritos direto na tag.
   ============================================================ */

/* ------------------------------------------------------------
   INDICE
   1  Topo, hero, cartoes e formularios (base do tema claro)
   2  Profundidade (o claro tinha ficado lavado)
   3  Restos da paleta bege antiga
   4  Regua tipografica e de espaco
   5  Hero sem buraco no topo
   6  Icone em cada cartao
   7  Telefone e WhatsApp no topo
   8  Cartao com resumo + "ver detalhe"
   9  Fotos novas (claras)
   10 Hero igual em todas as paginas
   11 Acerto final do hero (home x quem-somos)
   12 Menu colado no logo
   13 Rodape enxuto
   14 Rotulo nos campos do formulario da home
   15 Links para terceirizacao e diagnostico
   16 Varredura final: rodape mobile, chapeu do hero, estrelas

   Limpeza de 04/09/2026: 71 regras que nunca venciam a cascata
   foram removidas (45,0 KB -> 38,6 KB) apos conferir, pagina a
   pagina e em 390/768/1440, que nenhum estilo computado mudou.
   ------------------------------------------------------------ */

/* ---------------- PALETA ---------------- */
:root{
  --bg:#EFF2FA;      /* base um pouco mais fechada */
  --soft:#E3EAFA;    /* bloco azulado com mais cor */
  --deep:#D7E0F7;    /* faixa mais forte quando precisa contraste */
  --card:#FFFFFF;
  --ink:#0C1020;
  --muted:#4E5470;
  --line:#CDD8F0;
  --ac:#2438F5;
  --acd:#1B2ACC;
  --dark:#E3EAFA;
}

html,body{background:var(--bg) !important;color:var(--ink) !important}

/* ---------------- TOPO ---------------- */

header .hnav a{color:var(--muted) !important}
header .hnav a:hover{color:var(--ink) !important}
header .hnav a.atual{color:var(--ink) !important;border-bottom-color:var(--ac) !important}

header .cta:hover{background:var(--acd) !important}
.mnav-btn span{background:var(--ink) !important}

/* ---------------- HERO ---------------- */
.hero{background:var(--soft) !important;color:var(--ink) !important}

.hero .eyebrow{color:var(--ac) !important}
.hero-proof span{background:rgba(255,255,255,.92) !important;
  border:1px solid var(--line) !important;color:var(--ink) !important}
.hero-proof span strong{color:var(--ink) !important}

/* ---------------- BLOCOS QUE ERAM ESCUROS ---------------- */
.lt-dark,section.dark{background:var(--soft) !important;color:var(--ink) !important}
.lt-dark h1,.lt-dark h2,.lt-dark h3,.lt-dark h4,
section.dark h2,section.dark h3,section.dark h4{color:var(--ink) !important}
.lt-dark p,.lt-dark li,section.dark p,section.dark li{color:var(--muted) !important}

section.dark .card p{color:var(--muted) !important}
section.dark .checks li{color:var(--ink) !important}

section.dark .tbl th,section.dark .tbl td{border-color:var(--line) !important;color:var(--ink) !important}
section.dark .tbl th{color:var(--muted) !important}
section.dark .tbl tr{background:var(--card) !important;border-color:var(--line) !important}
section.dark .tbl td[data-l]::before{color:var(--muted) !important}

/* texto branco escrito direto na tag, dentro dos blocos que clarearam */
.lt-dark [style*="color: rgb(255, 255, 255)"],
.lt-dark [style*="color:#fff"],
.lt-dark [style*="color: #fff"]{color:var(--ink) !important}
.lt-dark [style*="color: rgba(255, 255, 255"]{color:var(--muted) !important}

.lt-dark [style*="border: 2px solid rgba(255, 255, 255"],
.lt-dark [style*="border:2px solid rgba(255,255,255"]{border-color:var(--ink) !important;color:var(--ink) !important}
.lt-dark [style*="background: rgba(255, 255, 255, 0.0"],
.lt-dark [style*="background: rgba(255, 255, 255, 0.1"]{background:var(--card) !important;border-color:var(--line) !important}

/* botao escuro solto vira azul da marca */
button.scp5,.lt-dark button{background:var(--ac) !important;color:#fff !important}

/* ---------------- FAIXA DE CHAMADA ---------------- */
.cta-band{background:var(--ac) !important;color:#fff !important}
.cta-band h2{color:#fff !important}
.cta-band p{color:rgba(255,255,255,.86) !important}

.cta-band .btn-o:hover{background:#fff !important;color:var(--ac) !important}

/* ---------------- BOTOES GERAIS ---------------- */
.btn-p{background:var(--ac) !important;color:#fff !important}
.btn-p:hover{background:var(--acd) !important}

.btn-o:hover{background:var(--ink) !important;color:#fff !important}

/* botao de telefone do hero (era contorno branco) */
.hero .btn-tel,.btn-tel{border-color:var(--ink) !important;color:var(--ink) !important;background:transparent !important}
.hero .btn-tel:hover,.btn-tel:hover{background:var(--ink) !important;color:#fff !important}
.hero .btn-tel svg,.btn-tel svg{stroke:currentColor !important}
/* botoes de contorno branco fora da faixa azul */
.hero .btn-o{border-color:var(--ink) !important;color:var(--ink) !important}
.hero .btn-o:hover{background:var(--ink) !important;color:#fff !important}

/* ---------------- RODAPE ---------------- */

footer.f8 a:hover{color:var(--ac) !important}

/* ---------------- MENU MOBILE ---------------- */
.mnav-overlay{background:rgba(244,246,252,.985) !important;
  -webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important}
.mnav-links a{color:var(--ink) !important}
.mnav-links a:active,.mnav-links a.atual{color:var(--ac) !important}

/* ---------------- BARRA FIXA MOBILE ---------------- */
.cta-fix{background:rgba(255,255,255,.96) !important;
  border-top:1px solid var(--line) !important}
.cta-fix .cf-main{background:var(--ac) !important;color:#fff !important}
.cta-fix .cf-tel{border:1px solid var(--line) !important;color:var(--ink) !important;background:#fff !important}

/* ---------------- DETALHES ---------------- */
::selection{background:var(--ac);color:#fff}

/* ---------------- AJUSTES DE LEITURA NO CLARO ---------------- */
/* qualquer texto solto dentro dos blocos que clarearam */
section.dark div,section.dark span,section.dark b,section.dark strong,
section.dark td,section.dark th,section.dark small,section.dark em,
.lt-dark div,.lt-dark span,.lt-dark b,.lt-dark strong,.lt-dark small,.lt-dark em{
  color:var(--ink) !important}
/* excecoes: destaques ficam no azul da marca */
section.dark .eyebrow,section.dark .num,section.dark .checks li b,
section.dark .tag,.lt-dark .eyebrow,.lt-dark .num,.lt-dark .checks li b{color:var(--ac) !important}
/* excecao: o que esta em cima do azul continua branco */
section.dark .btn-p,section.dark .btn-p *,.lt-dark .btn-p,.lt-dark .btn-p *,
.cta-band *,.cta-band{color:#fff !important}

/* estrelas: dourado escuro para ler no fundo claro */

/* cartoes e caixas que eram translucidos no escuro */

section.dark .rl,.lt-dark .rl{color:var(--ink) !important}

/* linhas e divisorias que eram brancas translucidas */

/* ---------------- BLOCO AZUL DA PROPOSTA (continua azul) ---------------- */
#proposta{background:var(--ac) !important;color:#fff !important}
#proposta h2,#proposta h3,#proposta p,#proposta li,#proposta div,
#proposta span,#proposta b,#proposta strong,#proposta .rating{color:#fff !important}
#proposta .checks li b{color:#fff !important}
#proposta .stars,#proposta .st{color:#FFC53D !important}
#proposta .btn-o{border-color:rgba(255,255,255,.9) !important;color:#fff !important}
#proposta .btn-o:hover{background:#fff !important;color:var(--ac) !important}

/* ---------------- BOTOES DE CONTORNO NO CLARO ---------------- */
.btn-o{border:2px solid var(--ink) !important;color:var(--ink) !important;background:transparent !important}
.btn-o:hover{background:var(--ink) !important;color:#fff !important}

.cta-band .btn-o:hover{background:#fff !important;color:var(--ac) !important}

/* ---------------- AVALIACAO E DEPOIMENTOS ---------------- */
.rating,.rating b{color:var(--muted) !important}

.quote,.quote p{color:var(--ink) !important}

/* ---------------- PAGINA OBRIGADO (tinha fundo escuro proprio) ---------------- */
body{background:var(--bg) !important;color:var(--ink) !important}
header img,footer img{filter:none !important}
.eyebrow{color:var(--ac) !important}
p.lead{color:var(--muted) !important}
p.lead strong{color:var(--ink) !important}
.btn-mail{background:#fff !important;color:var(--ink) !important;border:1.5px solid var(--line) !important}
.btn-wa{background:#25D366 !important;color:#062611 !important}
.hint,.back{color:var(--muted) !important}
.back:hover{color:var(--ac) !important}
.wa-fab{box-shadow:0 10px 30px rgba(16,20,39,.18) !important}
.badge{background:rgba(45,212,145,.16) !important}

/* ---------------- FORMULARIO DENTRO DO BLOCO AZUL ---------------- */
/* o cartao do formulario e branco, entao o texto dele volta a ser escuro */
#proposta .form,#proposta .form *,
#proposta form,#proposta form *{color:var(--ink) !important}
#proposta .form label,#proposta form label,
#proposta .chip,#proposta .chip *,#proposta .chip-label{color:var(--ink) !important}
#proposta .form input,#proposta .form select,#proposta .form textarea,
#proposta form input,#proposta form select,#proposta form textarea{
  color:var(--ink) !important;background:#fff !important;border-color:var(--line) !important}
#proposta .form input::placeholder,#proposta form input::placeholder{color:#9AA0B4 !important}
#proposta .form .btn-p,#proposta form button,#proposta form .btn-p,
#proposta form button *,#proposta form .btn-p *{background:var(--ac) !important;color:#fff !important}
#proposta .chip input:checked + span,#proposta .chip.on,#proposta .chip.on *{
  background:var(--ac) !important;color:#fff !important;border-color:var(--ac) !important}
#proposta .form b,#proposta form b{color:var(--ac) !important}

/* numeros e marcadores claros demais no fundo claro */
.num,span.num,[class*="passo"] span,[class*="step"] span{color:var(--ac) !important}

/* ---------------- CORRECOES FINAIS ---------------- */
/* botao de envio do formulario (o cartao branco nao pode clarear o botao) */
#proposta .form button,#proposta .form button *,
#proposta .form .btn-p,#proposta .form .btn-p *,
#proposta .form [type="submit"]{background:var(--ac) !important;color:#fff !important;
  border-color:var(--ac) !important}
#proposta .form button:hover{background:var(--acd) !important}
/* link do rodape na pagina obrigado */

/* tons claros de texto que vinham do tema escuro */
[style*="rgb(154, 157, 168)"],[style*="#9A9DA8"]{color:#5C6070 !important}
[style*="rgb(142, 154, 255)"],[style*="#8E9AFF"],
[style*="rgb(140, 152, 255)"],[style*="#8C98FF"],
[style*="rgb(210, 215, 255)"],[style*="#D2D7FF"]{color:var(--ac) !important}
[style*="rgb(255, 197, 61)"],[style*="#FFC53D"]{color:#C77A00 !important}

/* botao do menu mobile precisa vencer a regra dos links */
.mnav-links a.mnav-cta,nav.mnav-links a.mnav-cta{background:var(--ac) !important;color:#fff !important}

/* ============================================================
   AJUSTE 2 - o claro estava lavado demais.
   Mais profundidade: tons um pouco mais fechados, separacao
   entre secoes, cartoes com relevo e rodape escuro de ancora.
   ============================================================ */

/* separacao entre secoes: cada bloco ganha uma linha no topo */
body > section,main > section,section.rv,section.dark,.lt-dark{
  border-top:1px solid var(--line)}
section.cta-band,#proposta{border-top:0 !important}

/* alterna claro/branco para o olho perceber onde um bloco termina */
section.dark,.lt-dark{background:var(--soft) !important}

/* topo com mais presenca */
header{background:#FFFFFF !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 2px 16px rgba(12,16,32,.08) !important}

/* hero: menos lavagem, a foto volta a aparecer do lado direito */

/* cartoes com relevo de verdade */
.card,section.dark .card,.lt-dark .card,.box{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 2px 10px rgba(12,16,32,.06) !important}

/* campos de formulario com borda visivel */

input:focus,select:focus,textarea:focus{border-color:var(--ac) !important;
  box-shadow:0 0 0 3px rgba(36,56,245,.15) !important;outline:none !important}

/* chips do formulario */
.chip{border:1px solid var(--line) !important}

/* ---------------- RODAPE ESCURO (ancora da pagina) ---------------- */
footer.f8{background:#0C1020 !important;color:#FFFFFF !important;border-top:0 !important}
footer.f8 img{filter:brightness(0) invert(1) !important}
footer.f8 h3,footer.f8 h4{color:#FFFFFF !important}
footer.f8 p,footer.f8 .f8-area{color:rgba(255,255,255,.62) !important}

footer.f8 a:hover,footer.f8 .f8-menu a:hover{color:#FFFFFF !important}
footer.f8 .f8-lnk{color:#8E9AFF !important}
footer.f8 .f8-tel{color:#FFFFFF !important}
footer.f8 .f8-cols{border-bottom-color:rgba(255,255,255,.14) !important}
footer.f8 .f8-bot{color:rgba(255,255,255,.6) !important}
footer.f8 .f8-bot a,footer.f8 .f8-bot span a{color:rgba(255,255,255,.8) !important}

/* ============================================================
   AJUSTE 3 - restos da paleta antiga (bege) brigando com o azul
   #F7F7F4 / #F2F2EE / #D8D9D1 eram tons quentes do tema escuro.
   Em cima do fundo azulado eles davam aspecto sujo/encardido.
   ============================================================ */
[style*="rgb(247, 247, 244)"],[style*="#F7F7F4"],[style*="#f7f7f4"],
[style*="rgb(242, 242, 238)"],[style*="#F2F2EE"],[style*="#f2f2ee"]{
  background-color:#FFFFFF !important}
/* so a cor da borda: esse tom aparecia tambem dentro de border, e pintar
   o fundo com ele enchia os campos do formulario */
[style*="rgb(216, 217, 209)"],[style*="#D8D9D1"],[style*="#d8d9d1"]{
  border-color:var(--line) !important}
.rec-item,.card,.box,.sol-item{background:#FFFFFF !important;
  border:1px solid var(--line) !important;box-shadow:0 1px 3px rgba(12,16,32,.05) !important}
.sol-grid{background:var(--line) !important}
/* qualquer secao que ainda esteja no bege vira branco */
section[style*="247, 247, 244"],section[style*="242, 242, 238"]{background:#FFFFFF !important}
#tecnologias{background:var(--soft) !important;
  border-top:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important}

/* ============================================================
   AJUSTE 4 - REGUA TIPOGRAFICA E DE ESPACO
   O layout foi composto para fundo escuro: titulo enorme,
   muito respiro e texto solto numa coluna larga. No claro isso
   vira pagina vazia. Aqui a regua e apertada.
   ============================================================ */

/* ---- titulos ---- */
h1{font-size:clamp(29px,3.6vw,50px) !important;line-height:1.06 !important;
   letter-spacing:-.028em !important;max-width:20ch !important}

h2{font-size:clamp(23px,2.6vw,36px) !important;line-height:1.14 !important;
   letter-spacing:-.022em !important;max-width:24ch !important;margin-bottom:14px !important}
h3{font-size:19px !important;line-height:1.28 !important;letter-spacing:-.012em !important}

/* ---- texto corrido: linha mais curta le melhor ---- */
p{font-size:16.5px !important;line-height:1.58 !important}
p.lead,.hero p,section > p,section > div > p{max-width:62ch !important}
.eyebrow{font-size:12px !important;letter-spacing:.18em !important;margin-bottom:12px !important}

/* ---- respiro das secoes: cerca de 30% a menos ---- */
section,body > section,main > section,section.rv,section.dark,.lt-dark,#tecnologias{
  padding-top:62px !important;padding-bottom:62px !important}
section.cta-band{padding-top:52px !important;padding-bottom:52px !important}
#proposta{padding-top:58px !important;padding-bottom:58px !important}

/* ---- container um pouco mais estreito ---- */
.in,.band-in,.wrap,section > div[style*="max-width: 1280px"],
div[style*="max-width: 1280px"]{max-width:1180px !important}

/* ---- cartoes mais compactos ---- */
.rec-item,.card,.box,.sol-item{padding:22px 22px !important;border-radius:14px !important}
.rec-item h3,.card h3{margin-bottom:8px !important}
.rec-item p,.card p{font-size:15.5px !important;line-height:1.52 !important;margin:0 !important}

/* ---- grades menos espacadas ---- */
[style*="gap: 56px"]{gap:34px !important}
[style*="gap: 40px"]{gap:26px !important}
[style*="gap: 32px"]{gap:22px !important}

/* ---- distancia entre titulo e texto de apoio ---- */
h1 + p,h2 + p,h3 + p,.eyebrow + h1,.eyebrow + h2{margin-top:10px !important}

/* ---- listas mais juntas ---- */
.checks li,ul li{line-height:1.5 !important}

/* ---- mobile: nada de titulo gigante em tela pequena ---- */
@media(max-width:820px){
  section,body > section,main > section,section.rv,section.dark,.lt-dark,#tecnologias{
    padding-top:44px !important;padding-bottom:44px !important}
  h1,.hero h1{font-size:clamp(27px,7.4vw,34px) !important;max-width:100% !important}
  h2{font-size:clamp(22px,6.2vw,28px) !important;max-width:100% !important}
  p{font-size:16px !important}
  
}

/* campos do formulario sempre brancos */
input,select,textarea,input[style],select[style],textarea[style]{
  background:#FFFFFF !important;background-color:#FFFFFF !important;
  border:1px solid var(--line) !important;color:var(--ink) !important}

/* ============================================================
   AJUSTE 5 - HERO SEM BURACO NO TOPO
   O hero tinha 100vh com o conteudo grudado embaixo. No escuro
   o vazio de cima nao aparecia. No claro vira um buraco logo
   na primeira tela, que e justamente onde o clique do anuncio cai.
   ============================================================ */

/* home (hero com formulario). O :not(.hero) e obrigatorio: nas paginas
   internas a mesma secao e #topo E .hero, e o id venceria as regras
   do hero de foto cheia logo abaixo. */

/* o conteudo do hero da home era todo posicionado por cima de uma caixa
   absoluta. Tirando a altura fixa a secao colapsava. Aqui o conteudo
   volta para o fluxo e passa a ser ele que define a altura. */
#topo:not(.hero) > .hero-wrap{position:static !important}
#topo:not(.hero) .hero-img{position:absolute !important;inset:0 !important}

#topo:not(.hero) .hero-strip{position:relative !important;z-index:2 !important;
  left:auto !important;right:auto !important;bottom:auto !important}

/* paginas internas (hero de foto cheia) */

.hero > .bg,.hero > .grad{position:absolute !important;inset:0 !important}

@media(max-width:820px){
  
  
  
}

/* o topo e fixo e cobre 76px: o hero precisa comecar abaixo dele */

@media(max-width:820px){}

/* hero de foto cheia das paginas internas: id + classe para vencer o #topo */

@media(max-width:820px){
  }

/* o hero-content era absoluto com deslocamento proprio; ao virar relative
   esses valores viravam empurrao negativo e escondiam o titulo atras do topo */
#topo:not(.hero) .hero-content,#topo:not(.hero) .hero-strip{
  top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
  inset:auto !important}
#topo:not(.hero) .hero-content{position:relative !important;z-index:2 !important;
  align-items:center !important;padding:104px 40px 84px !important;
  max-width:1180px !important;margin:0 auto !important}

/* botoes de contorno que ficaram com borda clara demais */
a[style*="border: 2px solid #DFE4F2"],a[style*="border: 2px solid #CDD8F0"],
a[style*="border: 2px solid rgb(223, 228, 242)"],a[style*="border: 2px solid rgb(205, 216, 240)"],
.scp3,.scp8,a.scp3,a.scp8{border-color:var(--ink) !important;color:var(--ink) !important}
.scp3:hover,.scp8:hover{background:var(--ink) !important;color:#fff !important}
/* dentro do bloco azul continuam brancos */
#proposta .scp3,#proposta .scp8,.cta-band .scp3,.cta-band .scp8{
  border-color:rgba(255,255,255,.9) !important;color:#fff !important}

/* ---------------- MOBILE: evitar estouro lateral ---------------- */
@media(max-width:820px){
  /* botao com texto longo estava esticando a coluna da grade */
  .btn,.btn-p,.btn-o,.btn-d,.btn-tel,a.cta,.mnav-cta{
    white-space:normal !important;text-align:center !important;
    max-width:100% !important;line-height:1.25 !important}
  .g2,.g3,.g4,[class*="grid"]{grid-template-columns:1fr !important}
  .in,.wrap,.band-in,section > div{max-width:100% !important}
  /* palavras e trechos longos podem quebrar */
  h1,h2,h3,p,li,b,strong,td,th{overflow-wrap:anywhere !important;word-break:normal !important}
  /* nada pode ser mais largo que a tela */
  img,table,pre,iframe{max-width:100% !important}
}
@media(max-width:820px){
  /* item de lista com marcador: o texto em negrito nao encolhia e estourava */
  .checks li,ul li{flex-wrap:wrap !important}
  .checks li > b,ul li > b,li > b,li > span,li > div{min-width:0 !important;flex-shrink:1 !important}
}

/* ============================================================
   AJUSTE 6 - ICONE EM CADA CARTAO
   Os cartoes eram so titulo e paragrafo. E o que mais pesava
   na sensacao de "muito texto e nenhuma imagem".
   ============================================================ */
.ic8{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,#E3EAFA 0%,#CFDAF7 100%);color:var(--ac);
  margin:0 0 15px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(36,56,245,.10)}
.ic8 svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* dentro do bloco azul e da faixa azul o ladrilho inverte */

/* cartao que ja tinha numero: numero e icone na mesma linha */
.card .num{margin-bottom:10px !important}
.card .ic8 + .num{margin-top:-4px !important}
@media(max-width:820px){.ic8{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
  .ic8 svg{width:21px;height:21px}}

/* ============================================================
   AJUSTE 7 - TELEFONE E WHATSAPP NO TOPO
   Antes o telefone so aparecia bem embaixo da pagina.
   ============================================================ */

.hcontato{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.hc-tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:6px 12px 6px 8px;border-radius:999px;transition:background .18s ease}
.hc-tel:hover{background:var(--soft)}
.hc-ic{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--soft);color:var(--ac);flex:0 0 auto}
.hc-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.hc-txt{display:flex;flex-direction:column;line-height:1.15}
.hc-txt b{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.hc-txt i{font-size:11px;font-style:normal;color:var(--muted);white-space:nowrap}
.hc-wa{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;flex:0 0 auto;transition:transform .18s ease}
.hc-wa:hover{transform:scale(1.06)}
.hc-wa svg{width:21px;height:21px;fill:currentColor}
/* some junto com o menu: no celular ja existe a barra fixa embaixo */
@media(max-width:1100px){.hcontato{display:none !important}}
@media(max-width:1280px){.hc-txt i{display:none}}

/* ============================================================
   AJUSTE 8 - CARTAO COM RESUMO + "VER DETALHE"
   O texto longo nao foi apagado: as duas primeiras frases ficam
   visiveis e o resto abre dentro do proprio cartao.
   ============================================================ */
details.mais{margin-top:10px}
details.mais > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--ac);padding:2px 0}
details.mais > summary::-webkit-details-marker{display:none}
details.mais > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease}
details.mais[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
details.mais > summary:hover{color:var(--acd)}
details.mais > p{margin:9px 0 0 !important;font-size:15px !important;line-height:1.55 !important;
  color:var(--muted) !important;padding-top:9px;border-top:1px solid var(--line)}

/* ============================================================
   AJUSTE 9 - FOTOS NOVAS (claras)
   Antes as fotos eram escuras e precisavam de uma lavagem forte
   para o texto escuro ler por cima. As novas ja sao claras, entao
   a lavagem cai muito e a foto volta a aparecer de verdade.
   ============================================================ */
.hero>.grad,.lt-wash{background:
  linear-gradient(90deg,rgba(247,249,254,.92) 0%,rgba(247,249,254,.72) 34%,rgba(247,249,254,.22) 62%,rgba(247,249,254,0) 86%),
  linear-gradient(180deg,rgba(247,249,254,.30) 0%,rgba(247,249,254,0) 34%,rgba(239,242,250,.34) 100%)
  !important}
/* a foto e clara: o texto do hero fica mais escuro para garantir leitura */
.hero h1,#topo h1{color:#080B18 !important}
.hero p,#topo .hero-content p{color:#3B4157 !important}
.hero-proof span{background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(12,16,32,.10) !important}
@media(max-width:820px){
  /* no celular a coluna de texto ocupa a largura toda, entao a lavagem sobe */
  .hero>.grad,.lt-wash{background:
    linear-gradient(180deg,rgba(247,249,254,.93) 0%,rgba(247,249,254,.86) 56%,rgba(247,249,254,.62) 100%)
    !important}
}

/* Home: o texto ocupa 3-51% e o formulario 57-86%, entao sobra muito pouco
   espaco livre. Foto com uma pessoa em destaque sempre ia ficar cortada pelo
   card. A solucao foi de conteudo, nao de CSS: a home usa uma foto de ambiente
   amplo, que continua fazendo sentido mesmo com parte coberta, e a foto das
   duas pessoas foi para quem-somos, que nao tem formulario. Sem zoom nem
   deslocamento, a imagem entra inteira. */
#topo:not(.hero) .hero-img img{width:100%;height:100%;object-fit:cover;
  object-position:50% 22% !important;transform:none !important}

/* ============================================================
   AJUSTE 10 - HERO IGUAL EM TODAS AS PAGINAS
   Antes cada pagina tinha o texto do hero num lugar: margem
   esquerda de 40, 122 e 162px, titulo de 50 e de 56px e altura
   de 635, 702 e 1025px. Agora todas usam .hero8 com a mesma regua.
   ============================================================ */
.hero8{position:relative !important;display:flex !important;flex-direction:column !important;
  justify-content:center !important;height:auto !important;min-height:74svh !important;
  padding:126px 0 64px !important;overflow:hidden !important}

/* camadas de fundo continuam cobrindo a secao inteira */
.hero8 > .bg,.hero8 > .grad,.hero8 > .hero-wrap,
.hero8 > div:not(.hero8-wrap):not(.hero8-rating){position:absolute;inset:0}
.hero8 .hero-img,.hero8 .lt-wash{position:absolute !important;inset:0 !important}
.hero8 .hero-wrap{position:absolute !important;inset:0 !important;max-width:none !important;
  padding:0 !important;margin:0 !important}

/* o texto: mesma caixa, mesma margem, em todas as paginas */
.hero8 .hero8-wrap,.hero8 .hero8-rating{
  position:relative !important;top:auto !important;right:auto !important;
  bottom:auto !important;left:auto !important;inset:auto !important;
  z-index:2 !important;width:100% !important;max-width:1180px !important;
  margin:0 auto !important;padding:0 40px !important}
.hero8 .hero8-rating{margin-top:20px !important;display:flex !important;
  align-items:center !important;gap:8px !important}

/* mesma regua tipografica no hero de todas as paginas */

.hero8 h1{font-size:clamp(30px,3.7vw,52px) !important;line-height:1.05 !important;
  letter-spacing:-.03em !important;max-width:19ch !important;margin:0 !important}
.hero8 h1 + p,.hero8 p{margin-top:16px !important;max-width:56ch !important;
  font-size:17px !important;line-height:1.55 !important}
.hero8 .btns,.hero8 .hero-cta{margin-top:24px !important}
.hero8 .hero-proof,.hero8 .pills{margin-top:20px !important}

/* Na home a coluna de texto ja e estreita por causa do formulario ao lado.
   Limitar o h1 em ch alem disso quebrava o titulo em 5 linhas e esticava o
   hero. Aqui a coluna manda, o titulo usa a largura que ela tem. */
.hero8 .hero-content h1{max-width:100% !important}
.hero8 .hero-content p{max-width:100% !important}

@media(max-width:820px){
  
  .hero8 .hero8-wrap,.hero8 .hero8-rating{padding:0 20px !important}
  .hero8 h1,.hero8 .hero-content h1{max-width:100% !important}
  .hero8 .hero-content p{max-width:100% !important}
}
/* home, quem-somos e contato nao tinham box-sizing border-box: a caixa do hero
   ficava 1260px (1180 + 80 de padding) e o texto comecava 40px mais a esquerda
   que nas outras paginas */
.hero8 .hero8-wrap,.hero8 .hero8-rating{box-sizing:border-box !important}
/* nao zerar a caixa do .hero-content da home: nessa pagina ele E o hero8-wrap */

/* As paginas internas tem a secao do hero com id (#topo), e regra em id vence
   regra em classe. Sem repetir o id aqui, o .hero8 nao pegava nelas e a altura
   ficava 702 numas e 857 noutras. */
#topo.hero8,#topo.hero.hero8,section.hero8{
  display:flex !important;flex-direction:column !important;justify-content:center !important;
  height:auto !important;min-height:640px !important;padding:126px 0 64px !important}
@media(max-width:820px){
  
}
/* home, quem-somos e contato tambem nao tinham border-box na secao do hero:
   o min-height somava com o padding e a altura estourava */
#topo.hero8,#topo.hero.hero8,section.hero8{box-sizing:border-box !important}
/* a nota do Google no hero estava empurrada para a direita por estilo na tag.
   Alinha com o texto, igual em todas as paginas */
.hero8 .hero8-rating{justify-content:flex-start !important;padding-right:40px !important;
  flex-wrap:wrap !important}
@media(max-width:820px){
  /* na home a coluna de texto tinha um padding proprio e o texto comecava
     20px mais para dentro que nas outras paginas */
  .hero8 .hero-content > *{padding-left:0 !important;padding-right:0 !important}
}
@media(max-width:820px){
  /* a regra antiga com id (#topo ...) vencia o padding do hero8 no celular */
  #topo:not(.hero) .hero-content,#topo.hero8 .hero8-wrap,#topo.hero8 .hero8-rating{
    padding-left:20px !important;padding-right:20px !important}
}
/* mesma medida para todas, inclusive a home */

/* ============================================================
   AJUSTE 11 - ACERTO FINAL DO HERO
   Achado comparando home e quem-somos lado a lado: na home a
   caixa do texto ainda carregava padding-top de 104px de uma
   regra antiga, somando com os 88px da secao. Dava 192px contra
   os 126px das outras paginas. O respiro vertical do hero e da
   SECAO. A caixa do texto so tem margem lateral.
   ============================================================ */
.hero8 .hero8-wrap,.hero8 .hero8-rating,
#topo:not(.hero) .hero-content,#topo.hero8 .hero8-wrap{
  padding-top:0 !important;padding-bottom:0 !important}

/* O texto do hero comeca sempre na mesma altura em todas as paginas.
   Com o conteudo centralizado, pagina de titulo curto empurrava o texto
   para baixo (contato comecava em 212px e suporte em 127px). Alinhado no
   topo, todas comecam exatamente no padding da secao. */
#topo.hero8,#topo.hero.hero8,section.hero8{
  justify-content:flex-start !important;
  padding:120px 0 60px !important;min-height:560px !important}
@media(max-width:820px){
  #topo.hero8,#topo.hero.hero8,section.hero8{
    padding:100px 0 44px !important;min-height:auto !important}
}
/* na home as duas colunas (texto e formulario) estavam centralizadas entre si,
   entao o texto comecava 17px abaixo do das outras paginas */

/* precisa do id: a regra antiga #topo:not(.hero) .hero-content vencia */
#topo.hero8 .hero-content,#topo:not(.hero).hero8 .hero-content{
  align-items:flex-start !important}
/* o "chapeu" acima do titulo tinha altura de linha e margem diferentes entre
   as paginas, o que deslocava o titulo em ate 5px */
/* ATENCAO: nao usar .hero8-wrap > div:first-child aqui. Na home o primeiro
   filho do wrap e a COLUNA de texto inteira, e a regra vazava letter-spacing
   e font-size para o paragrafo e os botoes. */
.hero8 .eyebrow,.hero8 .hero-txt > div:first-child{
  font-size:12px !important;line-height:17px !important;
  margin:0 0 16px !important;letter-spacing:.18em !important}
/* quem-somos e contato tem o chapeu como primeiro filho do wrap e sem classe.
   O :not(.hero-content) evita pegar a coluna inteira na home. */
.hero8 .hero8-wrap:not(.hero-content) > div:first-child{
  font-size:12px !important;line-height:17px !important;
  margin:0 0 16px !important;letter-spacing:.18em !important}

/* ============================================================
   AJUSTE 12 - MENU COLADO NO LOGO
   Quando o telefone e o WhatsApp entraram no topo, eles usaram
   margin-left:auto e comeram todo o espaco livre, empurrando o
   menu para junto do logo (sobrava 18px entre os dois).
   Agora o menu e que fica centralizado e o contato vai para a
   direita junto do botao.
   ============================================================ */
header .hnav{margin:0 auto !important;padding:0 24px !important}
.hcontato{margin-left:0 !important}
header{gap:24px !important}
@media(max-width:1240px){header .hnav{padding:0 12px !important}}
/* o botao do topo tem texto diferente em diagnostico ("Agendar diagnostico"),
   o que deslocava o menu 9px so naquela pagina. Largura minima igual para todos */
header .cta,header a.cta,header a[class^="scp1"]{min-width:218px !important;
  justify-content:center !important;text-align:center !important}
@media(max-width:1240px){}
/* o botao do topo tinha padding e altura diferentes entre as duas familias de
   pagina (262px numas, 218 noutras). Mesma medida para todos */
header > a.cta,header > a[class*="scp1"],header > a:last-child{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:44px !important;min-height:44px !important;padding:0 24px !important;
  min-width:218px !important;font-size:13px !important;font-weight:700 !important;
  letter-spacing:.06em !important;border-radius:999px !important;
  background:var(--ac) !important;color:#fff !important;white-space:nowrap !important}
@media(max-width:1240px){
  header > a.cta,header > a[class*="scp1"],header > a:last-child{
    min-width:0 !important;padding:0 18px !important}}
/* largura fixa no botao do topo: e a unica forma de o menu cair exatamente no
   mesmo ponto em todas as paginas, ja que o texto do botao muda em diagnostico */
@media(min-width:1241px){
  header > a.cta,header > a[class*="scp1"],header > a:last-child{
    width:232px !important;min-width:232px !important;max-width:232px !important;
    padding:0 12px !important;gap:6px !important;overflow:hidden !important}
}
/* de novo o box-sizing: em home, quem-somos e contato o botao somava o padding
   por fora da largura, dando 256px em vez de 232 */
header > a.cta,header > a[class*="scp1"],header > a:last-child,
header .hcontato,header .hcontato *{box-sizing:border-box !important}

/* ============================================================
   AJUSTE 13 - RODAPE ENXUTO
   Saiu a lista das 20 cidades da RMC (era sinal de organico e o
   site e so trafego pago) e saiu o menu repetido, que ja esta
   fixo no topo. Ficou o essencial: quem somos, onde estamos e
   como falar com a 8sa.
   ============================================================ */
footer.f8{padding:52px 40px 26px !important}
footer.f8 .f8-cols{grid-template-columns:1.4fr 1fr 1fr !important;
  gap:40px !important;padding-bottom:26px !important;align-items:start !important}
footer.f8 img{height:34px !important;margin-bottom:16px !important}
footer.f8 h3{font-size:12px !important;letter-spacing:.1em !important;margin-bottom:12px !important}
footer.f8 p{font-size:14px !important;line-height:1.55 !important;margin:0 0 8px !important}
footer.f8 .f8-tel{display:block !important;font-size:20px !important;margin-bottom:10px !important}
footer.f8 .f8-lnk{display:block !important;font-size:14px !important;margin-bottom:5px !important}
footer.f8 .f8-bot{padding-top:16px !important;font-size:12.5px !important}
@media(max-width:820px){
  footer.f8{padding:40px 20px 22px !important}
  footer.f8 .f8-cols{grid-template-columns:1fr !important;gap:26px !important}
}

/* ============================================================
   AJUSTE 14 - ROTULO NOS CAMPOS DO FORMULARIO DA HOME
   Os campos so tinham o texto cinza dentro (placeholder), que
   some quando a pessoa comeca a digitar. No celular ela perde a
   referencia do que estava preenchendo.
   ============================================================ */
.f8-rot{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:2px 0 -3px}
.hero-form .f8-rot{color:#6B7089}
.hero-form{gap:7px !important}

/* ============================================================
   AJUSTE 15 - PAGINAS QUE NINGUEM ALCANCAVA
   terceirizacao e diagnostico existiam mas nenhuma pagina
   linkava para elas. Entraram na secao de modelos da home.
   ============================================================ */
.lk8{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.lk8 a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  color:var(--ac);text-decoration:none;line-height:1.35}
.lk8 a:hover{color:var(--acd);text-decoration:underline}
@media(max-width:820px){.lk8{margin-top:14px}.lk8 a{font-size:14.5px}}

/* ============================================================
   AJUSTE 16 - varredura final (9 paginas, 390 e 1440)
   1) rodape mobile: alvos de toque de 44px em TODAS as paginas
      (so a home tinha; internas ficavam com rodape 82px menor)
   2) chapeu da hero em quem-somos/contato: div sem classe, 17px,
      enquanto index/internas usam .eyebrow com 34px -> h1 subia
      17px no mobile. Igualado.
   3) estrelas com contraste < 3.0 (home inline e um bloco em
      terceirizacao) -> mesmo dourado escuro ja usado em .stars
   ============================================================ */

/* 1 - rodape: telefone, whatsapp e e-mail como alvo de toque */
@media (max-width:820px){
  .f8 .f8-tel,.f8 .f8-lnk,
  .f8 a[href^="tel:"],.f8 a[href^="mailto:"],.f8 a[href^="https://wa.me"]{
    display:flex !important;align-items:center !important;min-height:44px !important}
}

/* 2 - chapeu da hero sem classe (quem-somos, contato) */
/* ATENCAO: :not([class]) e essencial. Na home o primeiro filho do
   wrap e .hero-txt (coluna inteira) e nas internas e .eyebrow.
   So no mobile: no desktop esses chapeus ja alinhavam o h1 em 154. */
/* O chapeu aparece em tres formas: div sem classe filho do wrap
   (quem-somos, contato), div sem classe dentro de .hero-txt (home)
   e .eyebrow (paginas de servico). Ate 768px o texto mais longo
   quebra em duas linhas (34px) e o curto fica em uma (17px), o que
   deslocava o h1 em 17px entre paginas. Reserva duas linhas. */
@media (max-width:768px){
  .hero8 .hero8-wrap > div:first-child:not([class]),
  .hero8 .hero-txt > div:first-child:not([class]),
  .hero8 .eyebrow{
    display:flex !important;align-items:center !important;min-height:34px !important}
}

/* 3 - estrelas: contraste minimo 3.0 tambem sobre o azul suave
   (#E3EAFA), que era onde o dourado antigo reprovava */
/* precisa repetir .rating/.quote: as regras dos AJUSTES 3 e 5 usam
   dois niveis de classe e ganhariam de um seletor simples.
   #proposta (estrelas sobre o azul) fica de fora por id. */
[style*="rgb(196, 146, 0)"],.stars,.st,
.rating .stars,.quote .st,.rating .st,.quote .stars{color:#B36E00 !important}

/* ============================================================
   AJUSTE 17 - e-mail como terceiro canal + WhatsApp no numero
   fixo (19) 3085-1111
   - .hc-mail: bolinha ao lado do WhatsApp no topo, em azul da
     marca para nao competir com o verde
   - .ct-mail: botao "Enviar e-mail" nas secoes de CTA. Herda a
     classe e o style do botao de WhatsApp que fica ao lado, so
     precisa de ajuste de fonte quando o vizinho e um botao com
     icone.
   ============================================================ */
.hc-mail{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--soft);color:var(--ac);flex:0 0 auto;
  text-decoration:none;transition:transform .18s ease,background .18s ease}
.hc-mail:hover{transform:scale(1.06);background:var(--deep)}
.hc-mail svg{width:19px;height:19px;fill:none;stroke:currentColor}
.ct-mail{white-space:nowrap}
@media(max-width:820px){
  .ct-mail{width:100% !important;justify-content:center !important}
}

/* ============================================================
   AJUSTE 18 - ALTURA DO HERO IGUAL EM TODAS AS PAGINAS
   Referencia: a home. De 1024px para cima ela mede exatamente
   705px (quem manda e a coluna do formulario). As internas
   variavam de 560 (contato) a 693 (servicos-de-ti), porque so
   existia um piso de 560 e cada uma crescia conforme o texto.
   Agora o piso e 705 em todo o desktop.
   Abaixo de 901px a home passa de 1000px porque o formulario
   desce para baixo do texto; ali nao da para igualar sem
   empurrar o CTA para fora da primeira tela. No celular fica um
   piso de 620px e as paginas de texto mais longo crescem.
   ============================================================ */
@media(min-width:821px){
  #topo.hero8,#topo.hero.hero8,section.hero8{min-height:715px !important}
}
@media(max-width:820px){
  #topo.hero8,#topo.hero.hero8,section.hero8{min-height:620px !important}
}

/* ============================================================
   AJUSTE 19 - o mesmo estouro do item de lista aparecia entre
   821 e 1023px (visto em diagnostico a 860 e 900). A correcao
   do AJUSTE 4 so valia ate 820px. Vale para qualquer largura.
   ============================================================ */
.checks li,ul li{flex-wrap:wrap !important}
.checks li > b,ul li > b,li > b,li > span,li > div{min-width:0 !important;flex-shrink:1 !important}

/* ============================================================
   AJUSTE 20 - bloco de avaliacao do hero e chapeu, um modelo so
   Antes home, quem-somos e contato usavam um bloco absoluto com
   cor escrita na tag e as paginas de servico usavam .rating.
   Agora as 7 usam <div class="rating hero8-rating">.
   O chapeu tambem: era azul nas internas e quase preto nas
   outras tres. Azul da marca em todas, que e o que marca o
   assunto da pagina.
   ============================================================ */
.hero8 .hero8-rating,.hero8 .rating.hero8-rating{
  display:flex !important;align-items:center !important;gap:8px !important;
  margin-top:30px !important;font-size:14px !important;font-weight:600 !important;
  color:var(--muted) !important;justify-content:flex-start !important}
.hero8 .hero8-rating .stars{color:#B36E00 !important;letter-spacing:2px !important;font-weight:400 !important}
.hero8 .hero8-wrap > div:first-child:not([class]),
.hero8 .hero-txt > div:first-child:not([class]){color:var(--ac) !important}

/* ============================================================
   AJUSTE 21 - SECOES "ATENDIMENTO PRESENCIAL" E "MODELOS DE
   SUPORTE" refeitas
   As duas eram secoes escuras convertidas por gambiarra: fundo
   escuro escrito na tag, texto tambem escuro, e o tema so
   clareava o fundo. Dava contraste ruim e distribuicao torta
   (uma coluna de texto comprida e um cartao solto do lado).
   Agora sao secoes claras de verdade, com classes proprias.
   Saiu tambem a lista de 20 cidades em pilulas: virou uma
   frase. Era o mesmo sinal de organico que ele mandou tirar do
   rodape e comia altura da home.
   ============================================================ */
.sec8{padding:88px 40px;border-top:1px solid var(--line)}
.sec8-cob{background:var(--soft)}
.sec8-pln{background:var(--bg)}
.sec8-in{max-width:1180px;margin:0 auto}
.eyebrow8{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac);margin-bottom:16px}
.sec8 .h8{margin:0;font-size:clamp(28px,3.2vw,42px);font-weight:900;letter-spacing:-.03em;
  line-height:1.06;max-width:20ch;text-wrap:balance;color:var(--ink)}
.sec8 .p8{margin:18px 0 0;max-width:60ch;font-size:16.5px;line-height:1.6;color:var(--muted)}

/* --- Atendimento presencial --- */
.cob-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.cob-cid{margin:22px 0 0;max-width:60ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
.cob-cid b{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px}
.cob-num{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cob-num > div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px}
.cob-num b{display:block;font-size:clamp(30px,3vw,40px);font-weight:900;letter-spacing:-.03em;
  line-height:1;color:var(--ac)}
.cob-num i.stars{font-style:normal;color:#B36E00}
.cob-num span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}

/* --- Modelos de suporte --- */
.pln-head{max-width:64ch}
.pln-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.pln-c{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 28px}
.pln-c h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pln-p{margin:10px 0 18px;font-size:15px;line-height:1.55;color:var(--muted)}
.pln-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pln-ul li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.pln-ul li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;
  background:var(--ac)}
.pln-sla{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 24px}
.pln-sla span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;color:var(--muted)}
.pln-sla b{font-family:inherit;font-size:15px;font-weight:800;color:var(--ink);margin-right:8px}
.pln-sla em{font-style:normal;font-size:13px;color:var(--muted);margin-left:auto}
.pln-acoes{margin-top:28px}
.pln-cta{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border-radius:999px;
  background:var(--ac);color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;transition:background .18s ease}
.pln-cta:hover{background:var(--acd)}

@media(max-width:900px){
  .sec8{padding:60px 20px}
  .cob-grid{grid-template-columns:1fr;gap:34px}
  .pln-cards{grid-template-columns:1fr}
  .pln-sla em{margin-left:0;width:100%}
}
@media(max-width:420px){
  .cob-num{grid-template-columns:1fr}
}

/* ============================================================
   AJUSTE 22 - a secao "Por que as empresas nos procuram" saiu
   da home e foi para quem-somos, que estava curta (2819px
   contra 5015px da home). Com sitelinks no Ads cada pagina
   carrega o proprio argumento. O CSS dela morava dentro do
   index.html, entao veio para ca, que e onde as duas paginas
   enxergam. Cores atualizadas para a paleta clara (o bege
   antigo #F7F7F4 / #D8D9D1 ainda estava aqui).
   ============================================================ */
.rec-in{max-width:1180px;margin:0 auto}
.rec-eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac);margin:0 0 16px}
.rec-lead{margin:0 0 40px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rec-item{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  display:flex;flex-direction:column;gap:12px}
.rec-fala{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.rec-resp{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);padding-top:14px;
  border-top:2px solid var(--ac)}
.rec-cta{margin:40px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
@media(max-width:900px){
  .rec-grid{grid-template-columns:1fr;gap:14px}
  .rec-item{padding:20px 18px;gap:10px}
  .rec-fala{font-size:17px}
  .rec-resp{font-size:14.5px;padding-top:10px}
  .rec-cta{margin-top:28px}
}

/* ============================================================
   AJUSTE 23 - MOVIMENTO NA HOME (discreto)
   O site ja tinha o reveal por rolagem (.rv + IntersectionObserver)
   mas so em metade das secoes. Agora todas entram, e foram
   acrescentados: entrada do hero ao carregar e um leve
   levantar nos cartoes e nos logos ao passar o mouse.
   Nada pisca, nada gira, nada fica em loop. Tudo desligado
   para quem pede menos movimento no sistema.
   ============================================================ */
@keyframes h8-sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero8 .hero-txt,.hero8 .hero8-wrap > h1,
.hero8 .hero8-wrap > div:first-child:not([class]),
.hero8 .hero-form,.hero8 .hero8-rating{
  animation:h8-sobe .65s cubic-bezier(.2,.6,.2,1) both}
.hero8 .hero-form{animation-delay:.12s}
.hero8 .hero8-rating{animation-delay:.2s}

.cob-num > div,.pln-c,.rec-item,.scp5,.card,.g-logos img{
  transition:transform .22s cubic-bezier(.2,.6,.2,1),box-shadow .22s ease,border-color .22s ease}
.cob-num > div:hover,.pln-c:hover,.rec-item:hover{
  transform:translateY(-3px);box-shadow:0 10px 26px rgba(12,16,32,.07);border-color:#B9C8EC}
a.scp5:hover,a.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(12,16,32,.07)}
.g-logos img{opacity:.78}
.g-logos img:hover{opacity:1;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .hero8 .hero-txt,.hero8 .hero8-wrap > h1,
  .hero8 .hero8-wrap > div:first-child:not([class]),
  .hero8 .hero-form,.hero8 .hero8-rating{animation:none}
  .cob-num > div,.pln-c,.rec-item,.scp5,.card,.g-logos img{transition:none}
  .cob-num > div:hover,.pln-c:hover,.rec-item:hover,
  a.scp5:hover,a.card:hover,.g-logos img:hover{transform:none}
}

/* ============================================================
   AJUSTE 24 - REVISAO DO CELULAR
   Problemas medidos em 390px: paginas internas passando de
   15.000px de altura, respiro de secao diferente em cada
   pagina (44/18, 44/20, 56/18, 58/18), letra abaixo de 13px em
   rotulo de formulario e no rodape, botao do hero com largura
   irregular, alvo de toque menor que 44px em links soltos e
   estrela de avaliacao reprovando contraste AA.
   ============================================================ */
@media(max-width:820px){

  /* respiro igual em todas as secoes */
  section:not(#topo):not(.hero8){padding:44px 20px !important}
  .sec8{padding:44px 20px !important}

  /* nada de letra abaixo de 13px */
  .f8 h3,.f8-bot span,.f8-bot a,.f8-mono,.f8-rot,
  label,.eyebrow,.eyebrow8,.rec-eyebrow,
  .hero8 .hero8-wrap > div:first-child:not([class]),
  .hero8 .hero-txt > div:first-child:not([class]){font-size:13px !important}
  .hero8 .hero8-rating,.rating{font-size:13.5px !important}

  /* botoes do hero com a mesma largura */
  .hero8 .hero-cta,.hero8 .btns{flex-direction:column !important;gap:12px !important;
    align-items:stretch !important}
  .hero8 .hero-cta > a,.hero8 .btns > a,
  .hero8 .hero8-wrap a.scp2,.hero8 .hero8-wrap a.scp3,.hero8 a.btn{
    width:100% !important;justify-content:center !important;text-align:center !important;
    min-height:52px !important;padding-top:0 !important;padding-bottom:0 !important;
    align-items:center !important;box-sizing:border-box !important}

  /* alvo de toque em link solto */
  .lk8 a,.f8-bot a,.pln-cta,a.scp5,a.card{min-height:44px !important;
    display:flex !important;align-items:center !important}
  .f8-bot a{display:inline-flex !important}

  /* botao "ver mais" das secoes compridas */
  .mob-col > .mob-esc{display:none !important}
  .mob-col.mob-aberto > .mob-esc{display:block !important}
  table.mob-col tbody > tr.mob-esc{display:none !important}
  table.mob-col.mob-aberto tbody > tr.mob-esc{display:table-row !important}
  .mob-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    min-height:48px;margin:16px 0 0;padding:0 20px;border:1.5px solid var(--line);
    border-radius:999px;background:var(--card);color:var(--ac);
    font:700 14.5px/1 inherit;font-family:inherit;letter-spacing:.02em;cursor:pointer;
    -webkit-appearance:none;appearance:none}
  .mob-btn:active{background:var(--soft)}
}

/* estrela: contraste AA tambem sobre o azul suave */
[style*="rgb(196, 146, 0)"],.stars,.st,
.rating .stars,.quote .st,.rating .st,.quote .stars{color:#8F5900 !important}

/* ============================================================
   AJUSTE 25 - CONTRASTE QUE AINDA ESTAVA REPROVANDO
   Achados varrendo TODOS os elementos (a varredura anterior
   olhava so uma lista de tags e deixou passar o blockquote):
   - depoimento em <blockquote> com texto BRANCO sobre fundo
     claro: contraste 1,21. Estava praticamente invisivel em
     suporte-de-ti, terceirizacao e diagnostico
   - .sol-nota em #7A7D8C sobre o azul suave: 3,39
   - estrela do hero: a regra do AJUSTE 20 tinha especificidade
     maior e segurava o dourado claro
   - letra de 11 e 12px em .sol-cat, .num e .eyebrow no celular
   ============================================================ */
blockquote,.quote blockquote,section blockquote{color:var(--ink) !important}
.lt-dark blockquote,section.dark blockquote{color:var(--ink) !important}
.sol-nota{color:var(--muted) !important}
.hero8 .hero8-rating .stars,.hero8 .rating .stars,
.rating .stars,.quote .st,.stars,.st{color:#8F5900 !important}
#proposta .stars,#proposta .st,.cta-band .stars,.cta-band .st{color:#FFD166 !important}

@media(max-width:820px){
  .hero8 .eyebrow,.eyebrow,.sol-cat,.num,.rec-eyebrow,.eyebrow8{font-size:13px !important}
  .sol-cat{letter-spacing:.12em !important}
}

/* ============================================================
   AJUSTE 26 - o cartao do formulario do hero estourava 40px
   para fora da tela no celular. Mesma armadilha de sempre nesta
   home: box-sizing content-box. Ele tinha width 334,667 mais
   40px de padding e virava 374,667 dentro de uma area de 335.
   Forcando border-box no cartao e no que esta dentro dele.
   ============================================================ */
#topo .hero-form,#topo .hero-form *,
.hero8 .hero-form,.hero8 .hero-form *{box-sizing:border-box !important}
@media(max-width:820px){
  #topo .hero-form,.hero8 .hero-form{width:100% !important;max-width:100% !important}
}

/* mesmo caso do cartao do hero: os botoes da coluna de CTA da
   home sao content-box e o "Enviar e-mail" com largura cheia
   estourava 40px no celular */
.scp6,.scp8,.ct-mail,.scp2,.scp3,.scp5{box-sizing:border-box !important}

/* ============================================================
   AJUSTE 27 - REGRAS DE ESTADO, COPIA DE SEGURANCA
   NUNCA REMOVER. Estas regras so valem depois que o JS troca
   uma classe (menu aberto, barra fixa visivel, secao revelada).
   Em pagina parada nenhum elemento casa com elas, e foi por isso
   que a limpeza de CSS morto de 04/09 as apagou das paginas e o
   menu do celular parou de abrir. Cada pagina tem a sua copia
   em <style id="estado-css">; esta aqui e a rede de seguranca.
   ============================================================ */
@media(max-width:1100px){
  body.mnav-open .mnav-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.mnav-open .mnav-btn span:nth-child(2){opacity:0}
  body.mnav-open .mnav-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.mnav-open .mnav-overlay{opacity:1 !important;pointer-events:auto !important}
  body.mnav-open .wa-fab,body.mnav-open .cta-fix{display:none !important}
}
@media(max-width:820px){
  body.cta-on .cta-fix,body.cta-always .cta-fix,.no-js .cta-fix{
    transform:none !important;opacity:1 !important;pointer-events:auto !important;visibility:visible !important}
  body.mnav-open .cta-fix{display:none !important}
}
.rv-in{opacity:1 !important;transform:none !important}

/* ============================================================
   AJUSTE 28 - SUPORTE DE TI ENXUTA (04/09/2026)
   Os depoimentos sairam da secao escura e entraram na secao de
   clientes, clara. O nome e o cargo estavam em branco.
   ============================================================ */
.quote .nm{color:var(--ink) !important}
.quote .rl{color:var(--muted) !important}
.quote{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:18px !important;padding:26px 24px !important;margin:0 !important}

/* ============================================================
   AJUSTE 29 - REVISAO FINAL (04/09/2026)
   - faixa de foto + texto "Tecnico na sua empresa" em suporte-de-ti
     (a pagina nao tinha nenhuma foto depois do hero)
   ============================================================ */
.sec8-foto{background:var(--card)}
.foto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.foto-img{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.foto-img img{width:100%;height:100%;object-fit:cover;display:block}
.sec8-foto .pln-ul{margin-top:20px}
@media(max-width:900px){
  .foto-grid{grid-template-columns:1fr;gap:26px}
  .foto-img{aspect-ratio:16/10}
}

/* ============================================================
   AJUSTE 30 - MOVIMENTO NA NAVEGACAO (discreto)
   [stated] "sem muito carnaval". Quatro coisas, todas curtas:
   1. topo limpo sobre o hero (sem sombra) e compacto ao rolar
      (76 -> 64px, sombra e fundo levemente translucido). Estado
      body.hdr-rolou vem do mob.js. NUNCA REMOVER estas regras.
   2. sublinhado dos itens do menu desliza da esquerda no hover
   3. botao do topo levanta 1px no hover
   4. itens do menu do celular entram em cascata de 40ms
   Rolagem suave com folga do topo em todas as paginas.
   Tudo desligado em prefers-reduced-motion.
   ============================================================ */
html{scroll-behavior:smooth;scroll-padding-top:92px}

header{transition:height .22s ease,box-shadow .22s ease,background-color .22s ease,
  border-color .22s ease !important;
  box-shadow:none !important;border-bottom-color:transparent !important}
body.hdr-rolou header{height:64px !important;background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--line) !important;
  box-shadow:0 2px 16px rgba(12,16,32,.08) !important}
/* o topo fica menor, entao o botao e o menu do celular acompanham */
body.hdr-rolou .mnav-btn{top:10px}

header .hnav a{position:relative !important;border-bottom:0 !important;padding-bottom:6px !important;
  margin-bottom:0 !important;transition:color .18s ease !important}
header .hnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ac);border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform .2s cubic-bezier(.2,.6,.2,1)}
header .hnav a:hover::after,header .hnav a.atual::after{transform:scaleX(1)}

header .cta,header a.cta,header a[class^="scp1"]{
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease !important}
header .cta:hover,header a.cta:hover,header a[class^="scp1"]:hover{
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(36,56,245,.22)}
.hc-tel,.hc-wa,.hc-mail{transition:transform .18s ease,background-color .18s ease !important}
.hc-wa:hover,.hc-mail:hover{transform:translateY(-1px) scale(1.04)}

.mnav-links a{opacity:0;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.6,.2,1)}
body.mnav-open .mnav-links a{opacity:1;transform:none}
body.mnav-open .mnav-links a:nth-child(1){transition-delay:.05s}
body.mnav-open .mnav-links a:nth-child(2){transition-delay:.09s}
body.mnav-open .mnav-links a:nth-child(3){transition-delay:.13s}
body.mnav-open .mnav-links a:nth-child(4){transition-delay:.17s}
body.mnav-open .mnav-links a:nth-child(5){transition-delay:.22s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  header,header .hnav a,header .hnav a::after,header .cta,.hc-tel,.hc-wa,.hc-mail,.mnav-links a{
    transition:none !important}
  header .cta:hover,.hc-wa:hover,.hc-mail:hover{transform:none}
  .mnav-links a{opacity:1;transform:none}
}
/* com o topo em 64px o botao de 52px ficava colado nas bordas */
body.hdr-rolou header .cta,body.hdr-rolou header a.cta,body.hdr-rolou header a[class^="scp1"]{
  height:44px !important;min-height:44px !important;padding-top:0 !important;padding-bottom:0 !important}
body.hdr-rolou .hc-wa,body.hdr-rolou .hc-mail{width:36px;height:36px}

/* ============================================================
   AJUSTE 31 - botao da faixa azul e logo maior
   1. .band-p (botao "Solicitar proposta" da faixa .cta-band) era
      azul sobre a faixa azul: virava texto solto, sem parecer
      botao, em TODAS as paginas. A regra antiga do tema mirava
      .btn-p, que nao existe ali. Agora: branco com texto azul,
      igual ao padrao de primario sobre fundo azul do formulario.
   2. [stated] logo pequeno: 34 -> 40px no topo, em todas as
      paginas (o topo tem que ser igual em todas).
   ============================================================ */
.cta-band .band-p,.cta-band a.band-p{
  background:#FFFFFF !important;color:var(--ac) !important;border:2px solid #FFFFFF !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  min-height:52px !important;padding:0 28px !important;border-radius:999px !important;
  font-weight:800 !important;text-decoration:none !important;
  transition:transform .18s ease,box-shadow .18s ease !important}
.cta-band .band-p:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.cta-band a:not(.band-p){border:2px solid rgba(255,255,255,.9) !important;color:#fff !important;
  background:transparent !important;min-height:52px !important;display:inline-flex !important;
  align-items:center !important;border-radius:999px !important}

header img,header .logo img{height:54px !important;width:auto !important}
@media(max-width:820px){header img,header .logo img{height:44px !important}}
/* os botoes esticavam na altura da coluna de texto (align-items stretch da faixa) */
.cta-band .band-p,.cta-band a:not(.band-p){align-self:center !important;height:52px !important;
  padding-top:0 !important;padding-bottom:0 !important;box-sizing:border-box !important}
.cta-band .band-wrap,.cta-band > div{align-items:center !important}
body.hdr-rolou header img,body.hdr-rolou header .logo img{height:44px !important}

/* ============================================================
   AJUSTE 32 - FORMULARIO NO FIM DA HOME
   [stated] "o botao solicitar proposta da home nao aponta para o
   formulario". A secao #proposta da home era so texto e botoes:
   o formulario da home ficava apenas no hero. Agora #proposta
   tem o mesmo formulario (copia do hero, _subject "formulario
   final"), e todo "Solicitar proposta" da home aponta para la,
   igual as outras paginas.
   ============================================================ */
.fim-form{width:100% !important;max-width:440px !important;justify-self:end;box-sizing:border-box !important}
.fim-form *{box-sizing:border-box !important}
.fim-contatos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fim-lnk{display:inline-flex !important;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 20px;border:2px solid rgba(255,255,255,.85) !important;border-radius:999px;
  color:#fff !important;background:transparent !important;font-size:14px;font-weight:700;text-decoration:none;
  box-sizing:border-box !important}
.fim-lnk:hover{background:rgba(255,255,255,.12) !important}
#proposta .fim-grid{align-items:start !important}
@media(max-width:900px){
  .fim-form{max-width:none !important;justify-self:stretch}
  .fim-lnk{width:100%}
}

/* ============================================================
   AJUSTE 33 - titulos das internas ficaram mais concretos (e mais
   longos). Nas paginas sem formulario no hero ha espaco: o h1
   pode ir a 23ch em vez de 19ch, e volta a caber em 4 linhas,
   mantendo o hero em 715px. A home continua em 19ch por causa do
   card do formulario ao lado.
   ============================================================ */
@media(min-width:1024px){
  .hero8 .hero8-wrap:not(.hero-content) h1{max-width:23ch !important}
}

/* ============================================================
   AJUSTE 34 - FORMULARIO DA PAGINA CONTATO CABENDO NUMA TELA
   [stated] "tem que ser um pouco menor para caber em uma rolagem".
   Media: viewport dele e 1280x631. O formulario tinha 724px e a
   secao 840. Mudancas: computadores e servidores viraram dois
   selects lado a lado (igual a home) no lugar de 11 pilulas em
   3 linhas; padding do card 48/44 -> 28/28; espacamento 22 -> 14;
   titulo da esquerda menor. E um bug: o botao de enviar tinha a
   classe lt-dark (marca do tema escuro) e herdava o padding de
   SECAO, ficando com 141px de altura.
   ============================================================ */
#proposta form.ct-form{padding:28px 28px !important;gap:14px !important;border-radius:20px !important}
#proposta form.ct-form label{gap:6px !important;font-size:12.5px !important}
#proposta form.ct-form input[type=text],#proposta form.ct-form input[type=email],
#proposta form.ct-form input[type=tel]{padding:12px 14px !important;font-size:15.5px !important}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-lab{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.ct-sel{width:100%;min-width:0;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:15.5px;font-family:inherit;color:var(--ink);background:#fff;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ct-sel:focus{outline:2px solid var(--ac);outline-offset:1px}
.ct-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;border-radius:999px;
  background:var(--ac);color:#fff;font:700 15px/1 inherit;font-family:inherit;letter-spacing:.04em;cursor:pointer;
  transition:background-color .18s ease,transform .18s ease}
.ct-btn:hover{background:var(--acd);transform:translateY(-1px)}
/* coluna da esquerda proporcional ao card */
#proposta form.ct-form ~ *,body:has(form.ct-form) #proposta h2{font-size:clamp(30px,3vw,42px) !important;margin-bottom:22px !important}
body:has(form.ct-form) #proposta{padding-top:48px !important;padding-bottom:48px !important}
body:has(form.ct-form) #proposta > div{gap:56px !important}
@media(max-width:820px){.ct-row{grid-template-columns:1fr}}

/* AJUSTE 34b - mesma compactacao nas paginas de servico
   (suporte-de-ti, terceirizacao, diagnostico). Os selects e o
   botao ja vem das regras acima; aqui so o card .form. */
#proposta form.form.ct-form{padding:28px 28px !important;gap:14px !important}
#proposta form.ct-form .field,#proposta form.ct-form label{gap:6px !important}
#proposta form.ct-form input:not([type=hidden]):not([type=radio]){padding:12px 14px !important;font-size:15.5px !important}
#proposta form.ct-form .g2,#proposta form.ct-form .row{gap:14px !important}
body:has(form.ct-form) #proposta .checks{gap:8px !important;margin-top:16px !important}
body:has(form.ct-form) #proposta .checks li{font-size:15px !important}
body:has(form.ct-form) #proposta .rating{margin-top:18px !important}
.ct-btn{text-transform:none !important;letter-spacing:.02em !important;font-size:15.5px !important}
.ct-lab{align-self:end}
body:has(form.ct-form) #proposta h2{font-size:clamp(28px,2.7vw,36px) !important;margin-bottom:18px !important}
body:has(form.ct-form) #proposta{padding-top:40px !important;padding-bottom:40px !important}

/* ==========================================================
   AJUSTE 35 - HOME, SECAO SERVICOS: icone maior com o titulo
   ao lado (saiu o "6 frentes de atuacao" e a numeracao 01-06)
   ========================================================== */
#servicos .svc-head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
#servicos .svc-ico{flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:#E3EAFA;
  display:inline-flex;align-items:center;justify-content:center}
#servicos .svc-ico svg{width:30px;height:30px;stroke:var(--ac)}
#servicos .svc-h3{margin:0;font-size:22px !important;line-height:1.15 !important;font-weight:800;letter-spacing:-.02em;line-height:1.15}
#servicos a.scp5 p{margin:0 0 14px}
@media(max-width:820px){
  #servicos .svc-ico{flex-basis:48px;width:48px;height:48px;border-radius:12px}
  #servicos .svc-ico svg{width:26px;height:26px}
  #servicos .svc-h3{font-size:19px !important}
}
@media(max-width:820px){
  /* o alvo de toque do AJUSTE 24 punha o cartao em linha (icone, titulo e texto lado a lado) */
  #servicos a.scp5{flex-direction:column !important;align-items:stretch !important}
}

/* ==========================================================
   AJUSTE 36 - REVISAO GERAL 04/09: letra abaixo de 13px no celular
   que escapou do AJUSTE 24 por especificidade (chapeu do hero,
   rotulo .ct-lab, pilulas do hero, "ou ligue" e cidades)
   ========================================================== */
@media(max-width:820px){
  .hero8 .eyebrow,.hero8 .hero-txt > div:first-child,
  .hero8 .hero8-wrap:not(.hero-content) > div:first-child,
  .eyebrow,.eyebrow8,.rec-eyebrow,.cob-cid b,
  #proposta form.ct-form label,#proposta form.ct-form .ct-lab,.ct-lab,
  .hero-proof span,.hero8 .hero-proof span,
  section [style*="font-size: 12px"],section [style*="font-size:12px"],
  section [style*="font-size: 12.5px"],section [style*="font-size:12.5px"]{font-size:13px !important}
}
/* contato: o bloco azul ao lado do formulario tem a classe lt-dark e herdava o
   respiro de SECAO (62px). Volta ao padding de cartao */
div.lt-dark{padding-top:40px !important;padding-bottom:40px !important}