/* Blocos pretos e brancos alternados (a V4, teste de 15 e 16/10/2026, aprovada e levada para o site inteiro em 16/10/2026).
   Vale nas paginas com a classe hx-blocos no body, por cima de styles, site, home, vitrine e pages.css (nas internas, o blocos-paginas.css vem por cima deste).
   Um bloco fica branco com a classe hx-claro; os pretos ficam como sempre e viram cartoes (fim deste arquivo).
   Home: abertura com a vitrine e a faixa de numeros, Servicos e o formulario brancos; Do diagnostico a execucao, Cases e o rodape pretos.
   Cores da paleta da marca: #0D1117, #2B3A4B, #4A6B8A, #7FA3C4, #A9C2D9, #E6E8EB e branco. */

/* bloco branco: as variaveis de cor passam a valer para tudo o que esta dentro dele */
.hx-site .hx-claro{--hx-bg:#fff;--hx-card:#f5f7f9;--hx-card-2:#edf1f5;--hx-line:rgba(13,17,23,.1);--hx-text:#0d1117;--hx-dim:#4a5866;--hx-grad:linear-gradient(90deg,#4a6b8a 0%,#7fa3c4 100%);--hx-acc:#4a6b8a;--hx-acc-2:#7fa3c4;--hx-acc-rgb:74,107,138;background:var(--hx-bg);color:var(--hx-text);color-scheme:light}
.hx-claro :focus-visible{outline-color:#4a6b8a}
.hx-claro .hx-ridges{--ridge-bg:#fff;--ridge-line:#2b3a4b;--ridge-alpha:.8}
/* a troca de cor ja separa os blocos: sem a linha divisoria */
.hx-blocos .hx-sep{border-top:0}

/* menu fixo preto (pedido de 16/10/2026); solido, porque o fundo branco atras do menu transparente acinzentava o preto */
.hx-blocos .site-header,.hx-blocos .site-header.is-scrolled{background:#0d1117}
/* menu com quatro itens (Cases entrou em 17/10/2026): nada quebra linha e, em tela media (tablet), os itens ficam mais perto */
.hx-blocos :is(.desktop-nav a,.nav-services summary,.header-cta){white-space:nowrap}
@media(max-width:1000px){.hx-blocos .desktop-nav{gap:26px;margin-left:0}}

/* botoes no bloco branco: pilula preta, texto branco e setinha azul clara */
.hx-claro .hx-btn{background:#0d1117;color:#fff}
.hx-claro .hx-btn:hover{box-shadow:5px 5px 0 #7fa3c4}
.hx-claro .hx-btn>.hx-btn-dot{background:#7fa3c4}

/* abertura */
.hx-hero-vt.hx-claro:after{background:radial-gradient(ellipse 36% 54% at 73% 50%,rgba(255,255,255,.9),transparent 80%),radial-gradient(ellipse 34% 40% at 24% 50%,rgba(255,255,255,.78),transparent 80%),linear-gradient(transparent 70%,rgba(255,255,255,.92))}
.hx-claro .hx-hero-text{color:#2b3a4b;text-shadow:0 1px 14px rgba(255,255,255,.95)}

/* vitrine 3D: cards brancos com sombra suave, anel e luz em azul aco */
.hx-claro .vt-stage{color:#0d1117}
.hx-claro .vt-glow{background:radial-gradient(closest-side,rgba(127,163,196,.32),rgba(127,163,196,.09) 58%,transparent)}
.hx-claro .vt-ring{border-color:rgba(74,107,138,.26)}
.hx-claro .vt-ring:before{border-color:rgba(74,107,138,.16)}
.hx-claro .vt-comet:before{background:conic-gradient(rgba(74,107,138,0) 0deg 215deg,rgba(74,107,138,.85) 359.5deg,rgba(74,107,138,0) 360deg)}
.hx-claro .vt-comet:after{background:#4a6b8a;box-shadow:0 0 1em .25em rgba(127,163,196,.9),0 0 2.6em .9em rgba(127,163,196,.45)}
.hx-claro .vt-comet.is-soft:before{background:conic-gradient(rgba(74,107,138,0) 0deg 290deg,rgba(74,107,138,.4) 359.5deg,rgba(74,107,138,0) 360deg)}
.hx-claro .vt-comet.is-soft:after{box-shadow:0 0 .9em .2em rgba(127,163,196,.7)}
.hx-claro .vt-card{background:linear-gradient(155deg,#fff,#f4f7fa);border-color:rgba(13,17,23,.08);box-shadow:0 2.6em 5em -2em rgba(43,58,75,.32),0 .4em 1.2em -.4em rgba(43,58,75,.12),inset 0 1px 0 #fff}
.hx-claro .vt-lit{border-color:#7fa3c4;box-shadow:0 0 2.6em rgba(127,163,196,.6),inset 0 0 1.8em rgba(127,163,196,.18)}
.hx-claro .vt-head{color:#0d1117}
.hx-claro .vt-dots{background:radial-gradient(circle,rgba(13,17,23,.32) 45%,transparent 55%) 0 50%/.53em .4em repeat-x}
.hx-claro .vt-ad-copy small,.hx-claro .vt-kpi small,.hx-claro .vt-num small{color:#5b6878}
.hx-claro .vt-ad-copy i{background:linear-gradient(90deg,#7fa3c4,#4a6b8a)}
.hx-claro .vt-acts{color:#4a5866}
.hx-claro .vt-heart.is-on{fill:#7fa3c4;stroke:#4a6b8a}
.hx-claro .vt-likes{color:#0d1117}
.hx-claro .vt-delta{background:rgba(127,163,196,.2);color:#2b3a4b}
.hx-claro .vt-chart-dot{stroke:#4a6b8a}
.hx-claro .vt-tile{background:rgba(127,163,196,.16);border-color:rgba(74,107,138,.2)}
.hx-claro .vt-tile>svg{stroke:#4a6b8a}
.hx-claro .vt-mail svg{fill:#fff;stroke:#4a6b8a}
.hx-claro .vt-sent{color:#2b3a4b}
.hx-claro .vt-sent svg{stroke:#4a6b8a}
.hx-claro .vt-bars i{background:rgba(13,17,23,.08)}
.hx-claro .vt-bars b{background:linear-gradient(90deg,#2b3a4b,#7fa3c4)}
.hx-claro .vt-shop{box-shadow:0 4em 8em -2.8em rgba(43,58,75,.55),0 0 0 1px rgba(13,17,23,.07)}
.hx-claro .vt-toast{box-shadow:0 2.4em 4.6em -1.6em rgba(43,58,75,.45),0 0 0 1px rgba(13,17,23,.07)}
@container (max-width:520px){.hx-claro .vt-ad-copy:after{background:rgba(13,17,23,.08)}}

/* servicos: card branco com a ilustracao num painel cinza claro */
.hx-claro .hx-service{background:#fff;border-color:rgba(13,17,23,.09);box-shadow:0 1px 2px rgba(13,17,23,.04)}
.hx-claro .hx-service:hover{border-color:rgba(74,107,138,.4);box-shadow:0 30px 60px -30px rgba(43,58,75,.35)}
.hx-claro .hx-service-top{border-bottom-color:rgba(13,17,23,.08);background:radial-gradient(ellipse 58% 66% at 50% 56%,rgba(127,163,196,.24),transparent 72%),radial-gradient(circle,rgba(13,17,23,.11) 1px,transparent 1.4px) 0 0/22px 22px,#f5f7f9}
.hx-claro .a-panel{fill:#fff;stroke:rgba(13,17,23,.16)}
.hx-claro .a-line{stroke:rgba(13,17,23,.14)}
.hx-claro .a-dot{fill:rgba(13,17,23,.22)}
.hx-claro .a-node{fill:#4a6b8a}
.hx-claro .a-lens-fill{fill:rgba(127,163,196,.14)}
.hx-claro .a-bubble{fill:#fff;stroke:rgba(13,17,23,.14)}
.hx-claro .a-text{stroke:rgba(13,17,23,.22)}
.hx-claro .a-text.is-dark{stroke:rgba(43,58,75,.55)}
.hx-claro .a-text.is-light{stroke:rgba(43,58,75,.6)}
.hx-claro .a-typing circle{fill:rgba(13,17,23,.35)}
.hx-claro .a-orb{fill:#fff;stroke:rgba(13,17,23,.14)}
.hx-claro .a-url{fill:rgba(13,17,23,.06)}
.hx-claro .a-card{fill:#fff;stroke:rgba(13,17,23,.12)}
.hx-claro .a-img{fill:rgba(127,163,196,.28)}
.hx-claro .a-cursor{fill:#0d1117;stroke:#fff}

/* formulario */
.hx-contact.hx-claro:after{background:radial-gradient(ellipse 55% 40% at 50% 30%,rgba(255,255,255,.85),transparent 80%)}
.hx-contact.hx-claro .contact-form{background:rgba(255,255,255,.96);border-color:rgba(13,17,23,.08);box-shadow:0 40px 90px -50px rgba(43,58,75,.45)}
.hx-contact.hx-claro .field label{color:#2b3a4b}
.hx-contact.hx-claro .field input,.hx-contact.hx-claro .field select,.hx-contact.hx-claro .field textarea{background:#f5f7f9;border-color:rgba(13,17,23,.12);color:#0d1117}
.hx-contact.hx-claro .field input::placeholder,.hx-contact.hx-claro .field textarea::placeholder{color:#6b7785}
.hx-contact.hx-claro .field input:focus,.hx-contact.hx-claro .field select:focus,.hx-contact.hx-claro .field textarea:focus{background:#fff;border-color:#4a6b8a;outline-color:#4a6b8a;box-shadow:0 0 0 4px rgba(127,163,196,.25)}
.hx-contact.hx-claro .field select option{background:#fff;color:#0d1117}
.hx-contact.hx-claro .form-submit{background:#0d1117;color:#fff}
.hx-contact.hx-claro .form-submit:hover{background:#2b3a4b;color:#fff;box-shadow:0 14px 40px -14px rgba(43,58,75,.5)}
.hx-contact.hx-claro .form-feedback{background:rgba(13,17,23,.04);border-left-color:#4a6b8a;color:#2b3a4b}

/* transicao entre os blocos: os pretos viram cartoes de cantos arredondados, com margem branca dos lados, sobre a pagina branca
   (escolhida em 16/10/2026; a faixa de degrade foi descartada, e as opcoes Curva e Reto da barrinha de teste ficaram no Backup) */
.hx-blocos,.hx-blocos main{background:#fff}
.hx-blocos .hx-band{border-bottom-color:transparent}
.hx-blocos .hx-method,.hx-blocos .hx-cases,.hx-blocos .hx-escuro{margin-inline:16px;border-radius:40px;background:radial-gradient(ellipse 70% 180px at 50% 0,rgba(127,163,196,.1),transparent 70%),#0d1117;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hx-blocos .hx-method,.hx-blocos :is(.hx-band,.traffic-nav)+.hx-escuro{margin-top:16px}
/* paginas internas: bloco preto (hx-escuro) com o canto redondo cortando o que vai ate a borda (clip, e nao hidden, para o sumario do Termos continuar fixo) */
.hx-blocos .hx-escuro{overflow:clip}
.hx-blocos .site-footer{margin:0 16px 16px;border-radius:40px;border-top-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
@media(max-width:600px){.hx-blocos .hx-method,.hx-blocos .hx-cases,.hx-blocos .hx-escuro{margin-inline:8px;border-radius:28px}.hx-blocos .hx-method,.hx-blocos :is(.hx-band,.traffic-nav)+.hx-escuro{margin-top:8px}.hx-blocos .site-footer{margin:0 8px 8px;border-radius:28px}}