*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Helvetica Neue",sans-serif;color:#00245b;background:#fff}.wrap{width:min(1440px,92%);margin:auto}header{height:126px;background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 3px 22px #00245b12}.nav{height:100%;display:flex;align-items:center;gap:30px}.brand{width:520px;max-width:37vw}.brand img{width:100%;display:block}nav{display:flex;gap:30px;margin-left:auto}nav a{font-size:14px;color:#00245b;text-decoration:none;font-weight:600}.whatsapp{background:linear-gradient(135deg,#00c98b,#009b9d);color:#fff;text-decoration:none;border-radius:14px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 28px #00a98d32}.topwa{padding:12px 17px;min-width:205px}.whatsapp span{font-size:28px}.whatsapp b{font-size:15px}.whatsapp small{display:block;font-weight:400}.whatsapp i{margin-left:auto;font-size:27px}.hamb{display:none}.hero{background:linear-gradient(115deg,#fff 0 50%,#eaf8ff 50% 100%);overflow:hidden}.hero-grid{min-height:610px;display:grid;grid-template-columns:1fr 1.06fr;align-items:center}.copy{padding:48px 20px 38px 0}.kicker{letter-spacing:7px;font-size:12px;font-weight:700;margin-bottom:16px}.copy h1{font-size:66px;line-height:.95;letter-spacing:-3px;margin:0 0 22px;font-weight:800}.copy h1 em,.dark h2 em{font-style:normal;color:#00ad8c}.copy>p{font-size:20px;line-height:1.4;max-width:650px;color:#24496e}.actions{display:flex;align-items:center;gap:30px;margin:28px 0}.primary{padding:18px 24px;background:linear-gradient(135deg,#00d89c,#00a69c);color:#fff;border-radius:13px;text-decoration:none;display:flex;gap:14px;align-items:center;box-shadow:0 13px 28px #00b89935}.primary span{font-size:28px}.learn{text-decoration:none;color:#00245b;display:flex;align-items:center;gap:12px}.learn i{width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:0 5px 20px #00245b20;display:grid;place-items:center;color:#0d4c87}.learn span{display:flex;flex-direction:column}.learn small{color:#64809c;margin-top:4px}.micro{display:flex;gap:28px;margin-top:30px}.micro>div{display:flex;align-items:center;gap:10px;padding-right:25px;border-right:1px solid #cfe1ec}.micro b{font-size:28px;color:#079fec}.micro span{display:flex;flex-direction:column;font-size:12px}.micro small{margin-top:3px}.visual{position:relative;height:610px;background:linear-gradient(135deg,#083a70,#0078b9);clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);display:flex;align-items:center;justify-content:center}.glow{position:absolute;width:500px;height:500px;border-radius:50%;background:#00d89c30;filter:blur(50px)}.main-art{width:73%;max-height:530px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 28px 24px #001f4b66)}.tile{position:absolute;z-index:3;background:#fff;border-radius:18px;padding:10px;box-shadow:0 14px 30px #001a4366;text-align:center}.tile img{width:85px;height:85px;object-fit:contain}.tile b{display:block;font-size:12px}.t1{left:13%;top:29%}.t2{left:19%;top:56%}.side-cards{position:absolute;right:3%;top:13%;z-index:3;display:grid;gap:10px}.side-cards div{width:118px;background:#ffffffed;border-radius:15px;padding:15px 8px;text-align:center;box-shadow:0 10px 22px #001a4330}.side-cards b{display:block;font-size:27px;color:#00b9ac}.side-cards span{font-size:12px;font-weight:700}.control{position:absolute;right:1%;bottom:6%;z-index:4;background:linear-gradient(135deg,#00b898,#004c83);color:white;border-radius:15px;padding:12px 17px;display:flex;align-items:center;gap:12px}.control b{font-size:24px}.control span{display:flex;flex-direction:column}.control small{margin-top:3px}.featurebar{padding:28px 0;background:#fff}.feature-grid{display:grid;grid-template-columns:repeat(8,1fr)}.feature-grid>div{text-align:center;padding:5px 12px;border-right:1px solid #dceaf2}.feature-grid>div:last-child{border:0}.feature-grid img{height:68px;width:80px;object-fit:contain;margin:0 auto 7px}.feature-grid b{font-size:13px;line-height:1.25}.dark{background:linear-gradient(125deg,#00245b,#00457c);color:#fff;padding:44px 0}.dark-grid{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:70px}.dark h2{font-size:28px;line-height:1.25}.metrics{display:grid;grid-template-columns:repeat(3,1fr)}.metrics div{text-align:center;border-left:1px solid #ffffff44}.metrics b{display:block;color:#22d6b4;font-size:30px}.metrics strong,.metrics span{display:block;margin-top:6px}.metrics span{font-size:12px}.how{padding:90px 0;background:#f5f9fc}.section-title{text-align:center;max-width:760px;margin:auto}.section-title small,.contact small{letter-spacing:4px;color:#008f8d;font-weight:700}.section-title h2,.contact h2{font-size:42px;margin:12px 0}.section-title p,.contact p{color:#617b94;line-height:1.6}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:45px}.steps article{background:#fff;border:1px solid #e0ebf2;border-radius:24px;padding:25px;text-align:center;box-shadow:0 15px 35px #00245b0c}.steps article>span{float:left;color:#00aa91;font-weight:800}.steps img{height:190px;object-fit:contain;margin:auto}.steps h3{font-size:20px}.steps p{color:#6e8499}.contact{padding:90px 0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.bigwa{width:max-content;padding:15px 22px;margin-top:25px}.contact form{background:#f8fbfd;border:1px solid #dfeaf1;border-radius:24px;padding:28px;display:grid;gap:15px}.contact label{font-size:12px;font-weight:700;display:grid;gap:7px}.contact input,.contact textarea{border:1px solid #d7e5ed;border-radius:11px;padding:13px;background:#fff}.contact textarea{min-height:110px}.contact button{border:0;border-radius:12px;padding:15px;background:linear-gradient(135deg,#00c98b,#009fef);color:#fff;font-weight:800}.contact form>small{letter-spacing:0;color:#7a8fa2;font-weight:400}.foot{padding:45px 0;text-align:center}.foot img{width:420px;max-width:90%;margin:auto}.foot p{color:#647d94}.foot span{font-size:11px;color:#8799aa}
@media(max-width:1050px){.brand{width:360px}.nav nav{display:none}.hamb{display:block;margin-left:auto;border:0;background:none;font-size:24px}.hero-grid{grid-template-columns:1fr}.visual{clip-path:none}.copy{text-align:center;padding-right:0}.actions,.micro{justify-content:center}.feature-grid{grid-template-columns:repeat(4,1fr);gap:20px}.dark-grid,.contact-grid{grid-template-columns:1fr}.dark{text-align:center}.steps{grid-template-columns:1fr}.topwa{min-width:auto}.topwa b{display:none}}
@media(max-width:620px){header{height:96px}.brand{width:260px;max-width:62vw}.topwa{padding:9px}.topwa span{font-size:22px}.topwa i{display:none}.copy h1{font-size:44px}.copy>p{font-size:16px}.actions{flex-direction:column}.micro{display:grid;grid-template-columns:1fr}.micro>div{border:0;justify-content:center}.visual{height:480px}.main-art{width:90%}.tile,.side-cards,.control{display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.dark-grid{gap:30px}.metrics{grid-template-columns:1fr;gap:20px}.metrics div{border:0}.section-title h2,.contact h2{font-size:34px}}
/* Identidade aprovada: marca sem .com.br e com protagonismo no cabeçalho */
.brand{width:560px!important;max-width:40vw!important}
.brand img{width:100%!important;height:auto!important;display:block!important}
@media(max-width:1050px){.brand{width:410px!important;max-width:48vw!important}}
@media(max-width:620px){.brand{width:285px!important;max-width:68vw!important}}
/* Logo final aprovada pelo cliente */
.brand{
width: 560px !important;
max-width: 40vw !important;
}
.brand img{
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
.foot img{
width: 500px !important;
max-width: 92% !important;
}
@media(max-width:1050px){
.brand{width:420px !important;max-width:50vw !important}
}
@media(max-width:620px){
.brand{width:290px !important;max-width:69vw !important}
.foot img{width:340px !important}
}
/* AJUSTE FINAL APROVADO — nuvem integralmente visível */
header{
overflow: visible !important;
}
.nav{
overflow: visible !important;
}
.brand{
width: 560px !important;
max-width: 40vw !important;
padding: 12px 14px 12px 18px !important;
margin-left: 8px !important;
overflow: visible !important;
flex-shrink: 0 !important;
}
.brand img{
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
object-position: center !important;
transform: scale(.96) !important;
transform-origin: center center !important;
}
@media(max-width:1050px){
.brand{
width: 420px !important;
max-width: 50vw !important;
padding-left: 14px !important;
}
}
@media(max-width:620px){
.brand{
width: 290px !important;
max-width: 69vw !important;
padding: 8px 8px 8px 12px !important;
margin-left: 2px !important;
}
.brand img{transform:scale(.95) !important}
}
/* ===== CORREÇÃO APROVADA — LOGO COMPLETA, SEM CORTE SUPERIOR ===== */
header{
height: 152px !important;
overflow: visible !important;
}
.nav{
height: 152px !important;
min-height: 152px !important;
align-items: center !important;
overflow: visible !important;
}
.brand{
width: 500px !important;
max-width: 38vw !important;
height: 138px !important;
padding: 10px 12px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
flex-shrink: 0 !important;
}
.brand img{
width: 100% !important;
height: 122px !important;
max-height: 122px !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
display: block !important;
}
@media(max-width:1050px){
header,.nav{height:132px !important;min-height:132px !important}
.brand{
width:390px !important;
max-width:48vw !important;
height:120px !important;
padding:8px !important;
}
.brand img{height:106px !important;max-height:106px !important}
}
@media(max-width:620px){
header,.nav{height:106px !important;min-height:106px !important}
.brand{
width:275px !important;
max-width:67vw !important;
height:96px !important;
padding:7px !important;
}
.brand img{height:84px !important;max-height:84px !important}
}
/* ===== AJUSTE FINAL APROVADO: CABEÇALHO E LOGO MAIORES ===== */
header{
height: 182px !important;
overflow: visible !important;
}
.nav{
height: 182px !important;
min-height: 182px !important;
align-items: center !important;
overflow: visible !important;
}
.brand{
width: 610px !important;
max-width: 42vw !important;
height: 166px !important;
padding: 10px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
flex-shrink: 0 !important;
}
.brand img{
width: 100% !important;
height: 148px !important;
max-height: 148px !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
transform: none !important;
}
.hero{
padding-top: 0 !important;
}
@media(max-width:1050px){
header,.nav{
height:150px !important;
min-height:150px !important;
}
.brand{
width:460px !important;
max-width:52vw !important;
height:136px !important;
}
.brand img{
height:120px !important;
max-height:120px !important;
}
}
@media(max-width:620px){
header,.nav{
height:118px !important;
min-height:118px !important;
}
.brand{
width:320px !important;
max-width:72vw !important;
height:106px !important;
padding:6px 8px !important;
}
.brand img{
height:94px !important;
max-height:94px !important;
}
}
/* ===== VERSÃO APROVADA — CABEÇALHO FINAL ===== */
.utility-bar{
height:38px;
background:linear-gradient(90deg,#00245B,#064d86);
color:#fff;
}
.utility-inner{
height:38px;
display:flex;
align-items:center;
}
.utility-inner a{
color:#fff;
text-decoration:none;
font-size:14px;
font-weight:600;
}
header{
height:220px !important;
overflow:visible !important;
}
.nav{
height:182px !important;
min-height:182px !important;
align-items:center !important;
overflow:visible !important;
}
.brand{
width:650px !important;
max-width:45vw !important;
height:172px !important;
padding:7px 10px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
flex-shrink:0 !important;
}
.brand img{
width:100% !important;
height:158px !important;
max-height:158px !important;
object-fit:contain !important;
object-position:center !important;
transform:none !important;
}
nav{
gap:28px !important;
}
nav a{
font-size:15px !important;
font-weight:700 !important;
}
.topwa{
padding:14px 20px !important;
}
@media(max-width:1050px){
.utility-bar,.utility-inner{height:34px}
header{height:184px !important}
.nav{height:150px !important;min-height:150px !important}
.brand{
width:470px !important;
max-width:54vw !important;
height:140px !important;
}
.brand img{height:126px !important;max-height:126px !important}
}
@media(max-width:620px){
.utility-bar,.utility-inner{height:32px}
.utility-inner a{font-size:11px}
header{height:150px !important}
.nav{height:118px !important;min-height:118px !important}
.brand{
width:315px !important;
max-width:70vw !important;
height:108px !important;
padding:5px !important;
}
.brand img{height:96px !important;max-height:96px !important}
}
/* ===== VERSÃO FINAL APROVADA: LOGO COM DESTAQUE MÁXIMO ===== */
.utility-bar{display:none !important}
header{
height:220px !important;
min-height:220px !important;
overflow:visible !important;
background:#fff !important;
}
.nav{
height:220px !important;
min-height:220px !important;
align-items:center !important;
gap:24px !important;
overflow:visible !important;
}
.brand{
width:720px !important;
max-width:49vw !important;
height:204px !important;
padding:4px 6px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-shrink:0 !important;
overflow:visible !important;
}
.brand img{
width:100% !important;
height:192px !important;
max-height:192px !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
transform:none !important;
}
nav{
margin-left:auto !important;
gap:24px !important;
}
nav a{
font-size:15px !important;
font-weight:700 !important;
}
.topwa{
min-width:190px !important;
padding:14px 18px !important;
}
.footer-contact{
border-top:1px solid rgba(255,255,255,.14);
margin-top:24px;
padding:20px 0 26px;
display:flex;
justify-content:center;
gap:36px;
flex-wrap:wrap;
}
.footer-contact a{
color:inherit;
text-decoration:none;
font-size:14px;
}
@media(max-width:1200px){
header,.nav{height:185px !important;min-height:185px !important}
.brand{
width:560px !important;
max-width:48vw !important;
height:170px !important;
}
.brand img{height:158px !important;max-height:158px !important}
nav{gap:16px !important}
nav a{font-size:13px !important}
}
@media(max-width:1050px){
header,.nav{height:160px !important;min-height:160px !important}
.brand{
width:470px !important;
max-width:58vw !important;
height:148px !important;
}
.brand img{height:136px !important;max-height:136px !important}
}
@media(max-width:620px){
header,.nav{height:125px !important;min-height:125px !important}
.brand{
width:325px !important;
max-width:73vw !important;
height:114px !important;
padding:3px !important;
}
.brand img{height:104px !important;max-height:104px !important}
.footer-contact{gap:12px;padding:16px 12px 22px}
.footer-contact a{font-size:12px}
}
/* =========================================================
CORREÇÃO VISUAL FINAL
Estrutura, textos, seções, menu e funcionamento preservados.
Somente as imagens aprovadas foram substituídas.
========================================================= */
/* Hero: usa o visual aprovado inteiro no mesmo container já existente */
.visual .main-art{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-height:none !important;
object-fit:cover !important;
object-position:center center !important;
filter:none !important;
z-index:2 !important;
}
/* Os elementos abaixo já estão incorporados no novo visual aprovado.
O HTML continua preservado; apenas evitamos duplicidade visual. */
.visual .glow,
.visual .tile,
.visual .side-cards,
.visual .control{
visibility:hidden !important;
}
/* Faixa: mantém os 8 itens originais e substitui somente os ícones */
.feature-grid img{
width:84px !important;
height:68px !important;
object-fit:contain !important;
display:block !important;
margin:0 auto 7px !important;
}
/* Garante que nada seja cortado */
.brand,
.brand img,
.feature-grid img,
.steps img{
overflow:visible !important;
}
/* Rodapé já definido anteriormente: e-mail e WhatsApp permanecem no rodapé */
.footer-contact{
display:flex !important;
}
/* ÚNICA CORREÇÃO DESTA VERSÃO: computador inteiro, sem corte */
.visual{
overflow:hidden !important;
}
.visual .main-art{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
}
/* CORREÇÃO: redimensionamento do computador para não cortar */
.visual{
overflow:hidden !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.visual .main-art{
position:absolute !important;
inset:auto !important;
width:92% !important;
height:92% !important;
max-width:92% !important;
max-height:92% !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
}
@media(max-width:1100px){
.visual .main-art{
width:88% !important;
height:88% !important;
max-width:88% !important;
max-height:88% !important;
}
}
/* =========================================================
AJUSTE FINAL DE DESTAQUE
Mantém estrutura e funcionalidades; amplia logo e presença
visual do site em telas desktop.
========================================================= */
@media (min-width:1201px){
.container{
width:min(1420px, 96%) !important;
max-width:1420px !important;
}
header{
min-height:220px !important;
height:220px !important;
overflow:visible !important;
}
.nav{
min-height:220px !important;
height:220px !important;
width:min(1450px, 97%) !important;
max-width:1450px !important;
overflow:visible !important;
}
.brand{
width:790px !important;
max-width:54vw !important;
height:212px !important;
flex:0 0 auto !important;
overflow:visible !important;
}
.brand img{
width:100% !important;
height:206px !important;
max-height:206px !important;
object-fit:contain !important;
object-position:left center !important;
content:normal !important;
transform:none !important;
}
nav{
gap:24px !important;
}
nav a{
font-size:15px !important;
}
.hero{
width:min(1450px, 96%) !important;
max-width:1450px !important;
min-height:610px !important;
}
.hero h1{
font-size:clamp(54px, 4.2vw, 72px) !important;
line-height:1.03 !important;
}
.hero p{
font-size:18px !important;
line-height:1.55 !important;
}
.visual{
transform:scale(1.04);
transform-origin:center center;
}
.feature-grid{
width:min(1420px, 96%) !important;
max-width:1420px !important;
}
}
/* Em telas grandes, aproveita melhor a área sem alterar a versão mobile */
@media (min-width:1600px){
.container,.feature-grid{
max-width:1500px !important;
}
.nav,.hero{
max-width:1520px !important;
}
.brand{
width:830px !important;
}
.brand img{
height:214px !important;
max-height:214px !important;
}
}
/* AJUSTE FINAL — HERO CENTRALIZADO */
@media (min-width:901px){
.hero{
margin-left:auto !important;
margin-right:auto !important;
padding-left:clamp(28px,3vw,54px) !important;
padding-right:clamp(28px,3vw,54px) !important;
box-sizing:border-box !important;
align-items:center !important;
}
.hero-copy{
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
.visual{
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
transform:none !important;
}
.visual .main-art{
left:50% !important;
top:50% !important;
right:auto !important;
bottom:auto !important;
width:88% !important;
height:88% !important;
max-width:88% !important;
max-height:88% !important;
object-fit:contain !important;
object-position:center center !important;
transform:translate(-50%,-50%) !important;
}
}
/* =========================================================
AJUSTE RESPONSIVO PARA MONITORES GRANDES (ex.: 1920x1080)
Preserva estrutura e funcionalidades.
========================================================= */
html, body{
width:100% !important;
max-width:none !important;
overflow-x:hidden !important;
}
/* A partir de desktop, o site acompanha melhor a largura da tela */
@media (min-width:1200px){
.container{
width:94vw !important;
max-width:1800px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.nav{
width:94vw !important;
max-width:1800px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.hero{
width:94vw !important;
max-width:1800px !important;
margin-left:auto !important;
margin-right:auto !important;
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
gap:clamp(24px, 3vw, 64px) !important;
}
.hero-copy{
max-width:none !important;
}
.visual{
width:100% !important;
max-width:none !important;
}
.feature-grid{
width:94vw !important;
max-width:1800px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.security .container,
.steps .container,
.contact .container,
footer .container{
width:94vw !important;
max-width:1800px !important;
}
}
/* Em 1600–1920px, usa ainda mais espaço útil sem encostar nas bordas */
@media (min-width:1600px){
.container,
.nav,
.hero,
.feature-grid,
.security .container,
.steps .container,
.contact .container,
footer .container{
width:96vw !important;
max-width:1840px !important;
}
header{
width:100% !important;
}
.hero{
min-height:650px !important;
padding-left:clamp(34px, 2.4vw, 56px) !important;
padding-right:clamp(34px, 2.4vw, 56px) !important;
}
.brand{
width:clamp(720px, 42vw, 860px) !important;
max-width:46vw !important;
}
.brand img{
width:100% !important;
height:auto !important;
max-height:210px !important;
object-fit:contain !important;
}
.hero h1{
font-size:clamp(60px, 3.7vw, 76px) !important;
}
.hero p{
font-size:clamp(18px, 1.05vw, 21px) !important;
}
.visual .main-art{
width:92% !important;
height:92% !important;
max-width:92% !important;
max-height:92% !important;
}
}
/* Em telas ultra-wide, limita apenas o suficiente para não distorcer */
@media (min-width:2000px){
.container,
.nav,
.hero,
.feature-grid,
.security .container,
.steps .container,
.contact .container,
footer .container{
max-width:1900px !important;
}
}
/* =========================================================
VERSÃO 1920x1080 — MAIS IMPACTO VISUAL
Mantém o layout aprovado e amplia proporcionalmente
tipografia, botões, ícones e espaçamentos em telas grandes.
========================================================= */
@media (min-width:1600px) and (max-width:1999px){
html{
font-size:18px !important;
}
body{
zoom:1.06;
}
/* Cabeçalho e logo */
header{
min-height:235px !important;
height:235px !important;
}
.nav{
min-height:235px !important;
height:235px !important;
width:96vw !important;
max-width:1840px !important;
}
.brand{
width:900px !important;
max-width:46vw !important;
height:225px !important;
}
.brand img{
height:220px !important;
max-height:220px !important;
}
nav{
gap:28px !important;
}
nav a{
font-size:17px !important;
font-weight:700 !important;
}
.topwa{
min-width:205px !important;
padding:18px 24px !important;
font-size:17px !important;
}
/* Hero */
.hero{
width:96vw !important;
max-width:1840px !important;
min-height:700px !important;
gap:clamp(42px,4vw,80px) !important;
}
.hero-grid{
align-items:center !important;
}
.kicker{
font-size:18px !important;
letter-spacing:.28em !important;
margin-bottom:20px !important;
}
.hero h1{
font-size:clamp(68px,4.2vw,82px) !important;
line-height:1.02 !important;
letter-spacing:-1.8px !important;
}
.hero p{
font-size:22px !important;
line-height:1.55 !important;
max-width:760px !important;
margin-top:22px !important;
}
.actions{
margin-top:30px !important;
gap:22px !important;
}
.primary{
font-size:18px !important;
padding:20px 28px !important;
min-height:62px !important;
}
.learn{
font-size:17px !important;
}
.learn i{
width:56px !important;
height:56px !important;
}
.micro{
margin-top:34px !important;
gap:28px !important;
}
.micro div{
font-size:14px !important;
}
.micro b{
font-size:28px !important;
}
/* Visual principal */
.visual{
min-height:610px !important;
}
.visual .main-art{
width:96% !important;
height:96% !important;
max-width:96% !important;
max-height:96% !important;
}
/* Faixa de funcionalidades */
.featurebar{
padding:28px 0 30px !important;
}
.feature-grid{
width:96vw !important;
max-width:1840px !important;
gap:10px !important;
}
.feature-grid > div{
padding:10px 16px !important;
}
.feature-grid img{
width:96px !important;
height:78px !important;
margin-bottom:10px !important;
}
.feature-grid strong,
.feature-grid span{
font-size:15px !important;
line-height:1.35 !important;
}
/* Seções internas */
.security,
.steps,
.contact{
padding-top:72px !important;
padding-bottom:72px !important;
}
.security h2,
.steps h2,
.contact h2{
font-size:48px !important;
}
.security p,
.steps p,
.contact p,
.contact label,
.contact input,
.contact textarea{
font-size:18px !important;
}
.contact input,
.contact textarea{
padding:16px 18px !important;
}
.contact button{
font-size:18px !important;
padding:18px 28px !important;
}
/* Rodapé */
footer{
font-size:15px !important;
}
footer .container{
width:96vw !important;
max-width:1840px !important;
}
}
/* Para telas maiores que 2000px, mantém presença sem exagerar */
@media (min-width:2000px){
html{font-size:18px !important;}
body{zoom:1.03;}
}
/* =========================================================
CORREÇÃO RESPONSIVA REAL PARA 1920x1080
Usa unidades fluidas (vw/clamp), em vez de apenas aumentar
limites fixos. Assim os elementos crescem de fato com a tela.
========================================================= */
@media (min-width:1440px){
html{
font-size:clamp(17px, 0.95vw, 20px) !important;
}
body{
zoom:1 !important;
}
.container,
.nav,
.hero,
.feature-grid,
.security .container,
.steps .container,
.contact .container,
footer .container{
width:96vw !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Cabeçalho */
header{
min-height:clamp(220px, 13vw, 260px) !important;
height:auto !important;
}
.nav{
min-height:clamp(220px, 13vw, 260px) !important;
height:auto !important;
padding-left:1.5vw !important;
padding-right:1.5vw !important;
}
.brand{
width:clamp(720px, 44vw, 920px) !important;
max-width:48vw !important;
height:clamp(205px, 12vw, 245px) !important;
}
.brand img{
width:100% !important;
height:100% !important;
max-height:none !important;
object-fit:contain !important;
}
nav{
gap:clamp(20px, 1.6vw, 34px) !important;
}
nav a{
font-size:clamp(16px, 1.05vw, 21px) !important;
font-weight:700 !important;
}
.topwa{
min-width:clamp(180px, 11vw, 235px) !important;
min-height:clamp(58px, 3.8vw, 76px) !important;
padding:clamp(14px, .9vw, 20px) clamp(22px, 1.4vw, 30px) !important;
font-size:clamp(17px, 1.05vw, 21px) !important;
border-radius:14px !important;
}
/* Hero principal */
.hero{
min-height:clamp(650px, 39vw, 780px) !important;
grid-template-columns:minmax(0, 1.03fr) minmax(0, .97fr) !important;
gap:clamp(36px, 3.2vw, 72px) !important;
padding-left:2.2vw !important;
padding-right:2.2vw !important;
}
.hero-grid{
width:100% !important;
max-width:none !important;
align-items:center !important;
}
.copy,
.hero-copy{
max-width:none !important;
width:100% !important;
}
.kicker{
font-size:clamp(18px, 1.15vw, 23px) !important;
letter-spacing:.22em !important;
margin-bottom:clamp(18px, 1.2vw, 26px) !important;
}
.hero h1{
font-size:clamp(72px, 5.15vw, 102px) !important;
line-height:.98 !important;
letter-spacing:-.045em !important;
max-width:900px !important;
}
.hero p{
font-size:clamp(21px, 1.4vw, 28px) !important;
line-height:1.48 !important;
max-width:850px !important;
margin-top:clamp(22px, 1.5vw, 30px) !important;
}
.actions{
margin-top:clamp(28px, 1.9vw, 40px) !important;
gap:clamp(18px, 1.4vw, 28px) !important;
align-items:center !important;
}
.primary{
min-height:clamp(66px, 4.3vw, 86px) !important;
padding:clamp(18px, 1.15vw, 24px) clamp(28px, 1.8vw, 38px) !important;
font-size:clamp(19px, 1.25vw, 25px) !important;
border-radius:14px !important;
}
.primary span{
font-size:1.15em !important;
}
.learn{
font-size:clamp(17px, 1.08vw, 22px) !important;
}
.learn i{
width:clamp(56px, 3.6vw, 72px) !important;
height:clamp(56px, 3.6vw, 72px) !important;
font-size:clamp(18px, 1.2vw, 24px) !important;
}
.micro{
margin-top:clamp(30px, 2.1vw, 44px) !important;
gap:clamp(24px, 2vw, 40px) !important;
}
.micro div{
font-size:clamp(14px, .95vw, 19px) !important;
}
.micro b{
font-size:clamp(27px, 1.8vw, 36px) !important;
}
/* Imagem principal realmente acompanha a tela */
.visual{
min-height:clamp(590px, 36vw, 720px) !important;
width:100% !important;
max-width:none !important;
}
.visual .main-art{
width:96% !important;
height:96% !important;
max-width:96% !important;
max-height:96% !important;
}
/* Faixa de funcionalidades */
.featurebar{
padding:clamp(28px, 2vw, 42px) 0 !important;
}
.feature-grid{
grid-template-columns:repeat(8, minmax(0,1fr)) !important;
gap:clamp(8px, .9vw, 18px) !important;
}
.feature-grid > div{
padding:clamp(10px, .9vw, 18px) !important;
}
.feature-grid img{
width:clamp(92px, 6vw, 120px) !important;
height:clamp(76px, 5vw, 100px) !important;
margin-bottom:clamp(8px, .7vw, 14px) !important;
}
.feature-grid strong,
.feature-grid span{
font-size:clamp(15px, 1vw, 20px) !important;
line-height:1.28 !important;
}
/* Demais seções também crescem proporcionalmente */
.security,
.steps,
.contact{
padding-top:clamp(72px, 5vw, 100px) !important;
padding-bottom:clamp(72px, 5vw, 100px) !important;
}
.security h2,
.steps h2,
.contact h2{
font-size:clamp(46px, 3vw, 60px) !important;
}
.security p,
.steps p,
.contact p,
.contact label{
font-size:clamp(17px, 1.1vw, 22px) !important;
}
.contact input,
.contact textarea{
font-size:clamp(17px, 1.05vw, 21px) !important;
padding:clamp(15px, 1vw, 20px) !important;
}
.contact button{
min-height:clamp(58px, 3.8vw, 76px) !important;
padding:clamp(16px, 1vw, 20px) clamp(26px, 1.7vw, 34px) !important;
font-size:clamp(18px, 1.15vw, 23px) !important;
}
footer{
font-size:clamp(14px, .95vw, 19px) !important;
}
}
/* Em 1920px especificamente, garante ocupação forte da tela */
@media (min-width:1800px) and (max-width:1999px){
.hero h1{
font-size:96px !important;
}
.hero p{
font-size:25px !important;
}
nav a{
font-size:19px !important;
}
.topwa{
font-size:20px !important;
min-height:72px !important;
}
.primary{
font-size:23px !important;
min-height:78px !important;
}
.feature-grid img{
width:112px !important;
height:94px !important;
}
.feature-grid strong,
.feature-grid span{
font-size:18px !important;
}
}
/* =========================================================
RODAPÉ PREMIUM — corrigido para 1920x1080
========================================================= */
.footer-premium{
background:linear-gradient(135deg,#06366f 0%,#002657 100%) !important;
color:#fff !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.footer-main{
width:94vw !important;
max-width:1800px !important;
margin:0 auto !important;
min-height:210px !important;
padding:36px 2vw !important;
display:grid !important;
grid-template-columns:1.05fr 1.15fr 1.8fr !important;
gap:38px !important;
align-items:center !important;
}
.footer-brand{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
border-right:1px solid rgba(255,255,255,.20) !important;
padding-right:34px !important;
}
.footer-brand img{
width:min(430px,100%) !important;
height:auto !important;
max-width:100% !important;
filter:brightness(0) invert(1) saturate(.2) brightness(1.65) !important;
}
.footer-message{
border-right:1px solid rgba(255,255,255,.20) !important;
padding-right:34px !important;
}
.footer-message p{
margin:0 !important;
color:#fff !important;
font-size:clamp(19px,1.18vw,24px) !important;
line-height:1.4 !important;
}
.footer-message strong{
color:#00d1b2 !important;
}
.footer-benefits{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:22px !important;
}
.footer-benefits > div{
min-height:90px !important;
padding:12px 18px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.footer-benefits b{
font-size:clamp(18px,1.05vw,22px) !important;
color:#fff !important;
margin-bottom:6px !important;
}
.footer-benefits span{
font-size:clamp(15px,.9vw,18px) !important;
color:#d9e8f5 !important;
}
.footer-bottom{
width:94vw !important;
max-width:1800px !important;
margin:0 auto !important;
min-height:72px !important;
padding:16px 2vw !important;
border-top:1px solid rgba(255,255,255,.18) !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:28px !important;
}
.footer-bottom > span{
font-size:clamp(13px,.82vw,16px) !important;
color:#d7e4f0 !important;
}
.footer-contact-links{
display:flex !important;
align-items:center !important;
gap:32px !important;
flex-wrap:wrap !important;
}
.footer-contact-links a{
color:#fff !important;
text-decoration:none !important;
font-size:clamp(14px,.9vw,18px) !important;
font-weight:600 !important;
}
.footer-contact-links a:hover{
color:#00d1b2 !important;
}
@media(max-width:1100px){
.footer-main{
grid-template-columns:1fr !important;
text-align:center !important;
}
.footer-brand,
.footer-message{
border-right:0 !important;
padding-right:0 !important;
justify-content:center !important;
}
.footer-benefits{
grid-template-columns:repeat(3,1fr) !important;
}
.footer-bottom{
flex-direction:column !important;
justify-content:center !important;
text-align:center !important;
}
}
@media(max-width:680px){
.footer-benefits{
grid-template-columns:1fr !important;
}
.footer-contact-links{
flex-direction:column !important;
gap:10px !important;
}
}
/* CORREÇÃO FINAL DO LOGO NO RODAPÉ:
mostra a logomarca inteira, sem filtro e sem corte */
.footer-brand{
overflow:visible !important;
min-width:0 !important;
}
.footer-brand img{
display:block !important;
width:100% !important;
max-width:470px !important;
height:auto !important;
max-height:150px !important;
object-fit:contain !important;
object-position:center center !important;
filter:none !important;
transform:none !important;
clip-path:none !important;
background:#fff !important;
padding:8px 12px !important;
border-radius:10px !important;
box-sizing:border-box !important;
}
@media(min-width:1600px){
.footer-brand img{
max-width:520px !important;
max-height:165px !important;
}
}
@media(max-width:1100px){
.footer-brand img{
max-width:460px !important;
margin:0 auto !important;
}
}
/* CORREÇÃO DOS 3 BENEFÍCIOS ABAIXO DO HERO
Aumenta ícones, títulos e descrições para leitura confortável em 1920x1080 */
@media (min-width:1440px){
.micro{
margin-top:clamp(34px,2.2vw,46px) !important;
gap:clamp(28px,2.2vw,44px) !important;
align-items:center !important;
}
.micro > div{
min-width:0 !important;
padding-right:clamp(20px,1.8vw,34px) !important;
display:flex !important;
align-items:center !important;
gap:clamp(14px,1vw,20px) !important;
}
.micro b{
font-size:clamp(34px,2vw,42px) !important;
line-height:1 !important;
flex:0 0 auto !important;
}
.micro span{
font-size:clamp(17px,1.05vw,21px) !important;
line-height:1.25 !important;
}
.micro strong{
display:block !important;
font-size:clamp(18px,1.1vw,22px) !important;
line-height:1.15 !important;
margin-bottom:3px !important;
font-weight:800 !important;
}
}
/* ajuste específico para 1920 */
@media (min-width:1800px) and (max-width:1999px){
.micro b{
font-size:40px !important;
}
.micro strong{
font-size:21px !important;
}
.micro span{
font-size:19px !important;
}
}
/* ==========================================================
FAIXAS REDIMENSIONADAS — versão aprovada
Não altera hero, formulário, Login ou WhatsApp.
========================================================== */
/* 8 funcionalidades */
.featurebar{
width:100% !important;
padding:clamp(38px,3vw,58px) 0 !important;
background:#fff !important;
}
.feature-grid{
width:96vw !important;
max-width:none !important;
margin:0 auto !important;
grid-template-columns:repeat(8,minmax(0,1fr)) !important;
align-items:stretch !important;
gap:0 !important;
}
.feature-grid > div{
min-height:clamp(190px,12vw,235px) !important;
padding:clamp(18px,1.4vw,28px) clamp(12px,1vw,20px) !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
}
.feature-grid > div:not(:last-child){
border-right:1px solid #d9e4ed !important;
}
.feature-grid img{
width:clamp(96px,6.4vw,128px) !important;
height:clamp(82px,5.5vw,110px) !important;
object-fit:contain !important;
margin:0 auto clamp(16px,1.1vw,22px) !important;
}
.feature-grid strong,
.feature-grid span{
font-size:clamp(18px,1.12vw,23px) !important;
line-height:1.28 !important;
font-weight:800 !important;
color:#052b68 !important;
}
/* Faixa azul de benefícios */
.security{
width:100% !important;
min-height:clamp(250px,16vw,315px) !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
background:linear-gradient(105deg,#052f69 0%,#064985 55%,#0872a7 100%) !important;
}
.security .container,
.security .wrap{
width:94vw !important;
max-width:none !important;
margin:0 auto !important;
}
.security h2{
font-size:clamp(38px,2.5vw,50px) !important;
line-height:1.18 !important;
}
.security p{
font-size:clamp(19px,1.2vw,24px) !important;
line-height:1.4 !important;
}
.security strong,
.security b{
font-size:clamp(21px,1.35vw,27px) !important;
}
.security img{
width:clamp(58px,3.8vw,76px) !important;
height:clamp(58px,3.8vw,76px) !important;
object-fit:contain !important;
}
/* Rodapé premium: benefícios também maiores */
.footer-main{
min-height:clamp(245px,15vw,300px) !important;
}
.footer-message p{
font-size:clamp(22px,1.4vw,28px) !important;
}
.footer-benefits > div{
min-height:125px !important;
}
.footer-benefits b{
font-size:clamp(22px,1.4vw,28px) !important;
}
.footer-benefits span{
font-size:clamp(17px,1.05vw,21px) !important;
}
.footer-benefits > div::before{
font-size:clamp(34px,2.2vw,44px) !important;
margin-bottom:8px !important;
}
/* 1920 x 1080: presença visual forte */
@media (min-width:1800px) and (max-width:1999px){
.featurebar{padding:48px 0 !important}
.feature-grid > div{min-height:220px !important}
.feature-grid img{width:120px !important;height:102px !important}
.feature-grid strong,.feature-grid span{font-size:21px !important}
.footer-main{min-height:285px !important}
.footer-message p{font-size:27px !important}
.footer-benefits b{font-size:26px !important}
.footer-benefits span{font-size:20px !important}
}
/* Tablets */
@media (max-width:1100px){
.feature-grid{
grid-template-columns:repeat(4,1fr) !important;
}
.feature-grid > div{
border-right:0 !important;
border-bottom:1px solid #e2ebf2 !important;
}
}
/* Celulares */
@media (max-width:620px){
.feature-grid{
grid-template-columns:repeat(2,1fr) !important;
}
.feature-grid > div{
min-height:165px !important;
}
.feature-grid img{
width:82px !important;
height:70px !important;
}
.feature-grid strong,.feature-grid span{
font-size:16px !important;
}
}
/* =========================================================
CORREÇÃO FINAL — LOGIN VISÍVEL EM TABLETS E SMARTPHONES
Evita que o botão seja empurrado para fora da tela pelo
conjunto logo + menu hambúrguer + botão de acesso.
========================================================= */
@media (max-width:1050px){
.nav{
width:94% !important;
max-width:94% !important;
gap:12px !important;
overflow:visible !important;
}
.brand{
width:auto !important;
max-width:none !important;
min-width:0 !important;
flex:1 1 auto !important;
}
.brand img{
width:100% !important;
height:auto !important;
max-width:360px !important;
object-fit:contain !important;
object-position:left center !important;
}
.hamb{
margin-left:0 !important;
flex:0 0 auto !important;
width:38px !important;
min-width:38px !important;
padding:6px !important;
}
.topwa{
flex:0 0 auto !important;
min-width:76px !important;
max-width:none !important;
padding:10px 14px !important;
justify-content:center !important;
gap:0 !important;
white-space:nowrap !important;
overflow:visible !important;
}
.topwa b{
display:block !important;
font-size:14px !important;
line-height:1 !important;
}
.topwa span,
.topwa i{
display:none !important;
}
}
@media (max-width:620px){
.nav{
width:94% !important;
max-width:94% !important;
gap:9px !important;
}
.brand img{
max-width:260px !important;
}
.hamb{
width:34px !important;
min-width:34px !important;
font-size:24px !important;
padding:4px !important;
}
.topwa{
min-width:68px !important;
padding:10px 11px !important;
border-radius:12px !important;
}
.topwa b{
font-size:13px !important;
}
}
@media (max-width:390px){
.nav{
gap:7px !important;
}
.topwa{
min-width:62px !important;
padding:9px 9px !important;
}
.topwa b{
font-size:12px !important;
}
}
/* =========================================================
AJUSTE MOBILE FINAL — 05/09/2026
Logo maior e legível + ícones móveis com melhor presença.
Mantém intactos desktop/1920 e o comportamento do Login.
========================================================= */
/* Tablet: devolve presença à marca sem empurrar Menu/Login */
@media (min-width:621px) and (max-width:1050px){
.nav{
position:relative !important;
gap:14px !important;
}
.brand img{
max-width:420px !important;
}
.nav > nav{
top:100% !important;
left:0 !important;
right:0 !important;
z-index:60 !important;
}
}
/* Smartphone: marca em uma linha própria; Menu + Login abaixo.
Assim a frase da logomarca volta a ficar legível sem cortar o Login. */
@media (max-width:620px){
header{
height:166px !important;
min-height:166px !important;
}
.nav{
width:94% !important;
max-width:94% !important;
height:166px !important;
min-height:166px !important;
display:grid !important;
grid-template-columns:1fr auto auto 1fr !important;
grid-template-rows:108px 46px !important;
column-gap:10px !important;
row-gap:4px !important;
align-content:center !important;
align-items:center !important;
position:relative !important;
overflow:visible !important;
}
.brand{
grid-column:1 / -1 !important;
grid-row:1 !important;
justify-self:center !important;
width:min(360px,90vw) !important;
max-width:none !important;
height:104px !important;
padding:0 !important;
margin:0 !important;
flex:none !important;
}
.brand img{
width:100% !important;
max-width:360px !important;
height:auto !important;
max-height:100px !important;
object-fit:contain !important;
object-position:center center !important;
}
.hamb{
grid-column:2 !important;
grid-row:2 !important;
justify-self:end !important;
margin:0 !important;
width:38px !important;
min-width:38px !important;
height:40px !important;
padding:3px !important;
font-size:27px !important;
line-height:1 !important;
}
.topwa{
grid-column:3 !important;
grid-row:2 !important;
justify-self:start !important;
min-width:78px !important;
height:42px !important;
padding:10px 14px !important;
border-radius:13px !important;
}
.topwa b{
display:block !important;
font-size:14px !important;
line-height:1 !important;
}
.nav > nav{
top:100% !important;
left:0 !important;
right:0 !important;
z-index:60 !important;
}
/* Benefícios logo abaixo do botão principal */
.micro{
width:min(330px,92%) !important;
margin:36px auto 0 !important;
gap:12px !important;
}
.micro > div{
min-height:64px !important;
width:100% !important;
padding:4px 8px !important;
gap:14px !important;
justify-content:flex-start !important;
border:0 !important;
}
.micro b{
width:44px !important;
min-width:44px !important;
text-align:center !important;
font-size:35px !important;
line-height:1 !important;
}
.micro span{
font-size:16px !important;
line-height:1.25 !important;
text-align:left !important;
}
.micro strong{
display:block !important;
font-size:18px !important;
line-height:1.15 !important;
margin-bottom:3px !important;
}
.micro small{
font-size:15px !important;
line-height:1.2 !important;
}
/* Faixa das 8 funcionalidades: imagens maiores e leitura confortável */
.feature-grid > div{
min-height:188px !important;
padding:18px 10px !important;
}
.feature-grid img{
width:104px !important;
height:88px !important;
margin-bottom:13px !important;
}
.feature-grid strong,
.feature-grid span,
.feature-grid b{
font-size:17px !important;
line-height:1.28 !important;
}
}
/* Telefones estreitos: preserva a ampliação sem criar rolagem lateral */
@media (max-width:390px){
header,
.nav{
height:158px !important;
min-height:158px !important;
}
.nav{
grid-template-rows:102px 44px !important;
column-gap:8px !important;
}
.brand{
width:min(338px,91vw) !important;
height:98px !important;
}
.brand img{
max-width:338px !important;
max-height:94px !important;
}
.topwa{
min-width:74px !important;
height:40px !important;
padding:9px 12px !important;
}
.topwa b{
font-size:13px !important;
}
}
/* =========================================================
AJUSTE FINAL APROVADO — LOGOMARCA MAIOR NO SMARTPHONE
Dá protagonismo à marca e melhora a leitura da assinatura.
========================================================= */
@media (max-width:620px){
header{
height:188px !important;
min-height:188px !important;
}
.nav{
height:188px !important;
min-height:188px !important;
grid-template-rows:128px 48px !important;
row-gap:4px !important;
}
.brand{
width:min(430px,96vw) !important;
height:124px !important;
max-width:none !important;
}
.brand img{
width:100% !important;
max-width:430px !important;
max-height:120px !important;
}
}
@media (max-width:390px){
header,
.nav{
height:180px !important;
min-height:180px !important;
}
.nav{
grid-template-rows:122px 46px !important;
}
.brand{
width:min(370px,96vw) !important;
height:118px !important;
}
.brand img{
max-width:370px !important;
max-height:114px !important;
}
}
/* AJUSTE DEFINITIVO — LOGOMARCA MOBILE APROVADA */
@media (max-width:620px){
header{
height:205px !important;
min-height:205px !important;
}
.nav{
height:205px !important;
min-height:205px !important;
grid-template-rows:145px 50px !important;
row-gap:4px !important;
}
.brand{
width:98vw !important;
max-width:500px !important;
height:142px !important;
margin:0 auto !important;
padding:0 !important;
justify-self:center !important;
}
.brand img{
content:url("../images/logo-horizontal-mobile.png") !important;
width:100% !important;
max-width:500px !important;
max-height:140px !important;
object-fit:contain !important;
object-position:center center !important;
}
}
@media (max-width:390px){
header,.nav{
height:198px !important;
min-height:198px !important;
}
.nav{grid-template-rows:140px 48px !important;}
.brand{
width:98vw !important;
height:137px !important;
}
.brand img{max-height:135px !important;}
}
/* AJUSTE FINAL DEFINITIVO — LOGO MOBILE SEM MARGENS INTERNAS
A imagem móvel foi recortada apenas nas áreas brancas externas.
A arte da logomarca permanece intacta; agora ocupa efetivamente
quase toda a largura disponível no smartphone. */
@media (max-width:620px){
header{
height:196px !important;
min-height:196px !important;
}
.nav{
width:96% !important;
max-width:96% !important;
height:196px !important;
min-height:196px !important;
grid-template-rows:132px 52px !important;
row-gap:4px !important;
}
.brand{
grid-column:1 / -1 !important;
grid-row:1 !important;
justify-self:center !important;
width:96vw !important;
max-width:520px !important;
height:auto !important;
padding:0 !important;
margin:0 !important;
overflow:visible !important;
}
.brand img{
content:url("../images/logo-horizontal-mobile.png") !important;
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center !important;
}
.hamb{
grid-row:2 !important;
align-self:center !important;
}
.topwa{
grid-row:2 !important;
align-self:center !important;
}
}
@media (max-width:390px){
header,
.nav{
height:190px !important;
min-height:190px !important;
}
.nav{
grid-template-rows:128px 50px !important;
}
.brand{
width:97vw !important;
max-width:none !important;
}
}
/* =========================================================
REFINAMENTO VISUAL REAL — 07/09/2026
Marca com arte recortada + ícones HD + textos maiores
========================================================= */
/* DESKTOP: marca com presença real, sem margens brancas internas */
@media (min-width:1051px){
header{height:150px !important; min-height:150px !important;}
.nav{height:150px !important; min-height:150px !important; gap:24px !important;}
.brand{
width:690px !important;
max-width:47vw !important;
height:126px !important;
display:flex !important;
align-items:center !important;
overflow:visible !important;
flex:0 0 auto !important;
}
.brand img{
content:url("../images/logo-horizontal-sem-com-br-destaque.png") !important;
width:100% !important;
height:auto !important;
max-width:none !important;
max-height:126px !important;
object-fit:contain !important;
}
nav{gap:24px !important;}
nav a{font-size:15px !important;}
}
/* Faixa de funcionalidades: ícones de alta resolução e tipografia de leitura */
.featurebar{padding:38px 0 !important;}
.feature-grid{gap:8px !important; align-items:stretch !important;}
.feature-grid>div{
min-height:190px !important;
padding:20px 10px 16px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.feature-grid img{
width:126px !important;
height:108px !important;
object-fit:contain !important;
margin:0 auto 14px !important;
image-rendering:auto !important;
}
.feature-grid b{
font-size:18px !important;
line-height:1.28 !important;
font-weight:800 !important;
letter-spacing:-.15px !important;
color:#00245b !important;
}
/* Tablet */
@media (min-width:621px) and (max-width:1050px){
header{height:138px !important; min-height:138px !important;}
.nav{height:138px !important; min-height:138px !important;}
.brand{width:min(610px,66vw) !important; max-width:66vw !important; height:112px !important;}
.brand img{
content:url("../images/logo-horizontal-sem-com-br-destaque.png") !important;
width:100% !important; height:auto !important; max-height:112px !important;
}
.feature-grid{grid-template-columns:repeat(4,1fr) !important;}
.feature-grid>div{min-height:200px !important;}
.feature-grid img{width:132px !important;height:112px !important;}
.feature-grid b{font-size:19px !important;}
}
/* Smartphone: arte específica, recortada e realmente grande */
@media (max-width:620px){
header{height:184px !important;min-height:184px !important;}
.nav{
height:184px !important;min-height:184px !important;
width:98% !important;max-width:98% !important;
grid-template-rows:126px 48px !important;
}
.brand{
width:98vw !important;max-width:560px !important;
height:122px !important;margin:0 auto !important;
overflow:visible !important;
}
.brand img{
content:url("../images/logo-horizontal-mobile-destaque.png") !important;
width:100% !important;height:auto !important;
max-width:none !important;max-height:122px !important;
object-fit:contain !important;
}
.featurebar{padding:30px 0 !important;}
.feature-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:12px !important;
}
.feature-grid>div{
min-height:218px !important;
padding:18px 8px !important;
border-right:0 !important;
border-bottom:1px solid #dceaf2 !important;
}
.feature-grid img{
width:150px !important;
height:126px !important;
margin-bottom:14px !important;
}
.feature-grid b{
font-size:19px !important;
line-height:1.22 !important;
}
}
@media (max-width:390px){
header,.nav{height:176px !important;min-height:176px !important;}
.nav{grid-template-rows:120px 46px !important;}
.brand{height:116px !important;width:99vw !important;}
.brand img{max-height:116px !important;}
.feature-grid>div{min-height:204px !important;}
.feature-grid img{width:138px !important;height:116px !important;}
.feature-grid b{font-size:18px !important;}
}
/* ============================================================
AJUSTE APROVADO 07/09/2026 — FOCO EM MARCA + PASSOS
Mantém hero e faixa principal de funcionalidades já aprovados.
============================================================ */
/* LOGOMARCA — aumento realmente perceptível no desktop */
@media (min-width:1201px){
header{height:176px !important;min-height:176px !important;}
.nav{height:176px !important;min-height:176px !important;gap:18px !important;}
.brand{
width:820px !important;
max-width:49vw !important;
height:150px !important;
flex:0 0 auto !important;
display:flex !important;
align-items:center !important;
overflow:visible !important;
}
.brand img{
content:url("../images/logo-horizontal-sem-com-br-destaque.png") !important;
width:100% !important;
height:auto !important;
max-width:none !important;
max-height:150px !important;
object-fit:contain !important;
transform:scale(1.08) !important;
transform-origin:left center !important;
}
nav{gap:18px !important;}
nav a{font-size:15px !important;white-space:nowrap !important;}
.topwa{min-width:160px !important;padding:12px 14px !important;}
}
@media (min-width:1051px) and (max-width:1200px){
header{height:164px !important;min-height:164px !important;}
.nav{height:164px !important;min-height:164px !important;gap:16px !important;}
.brand{width:690px !important;max-width:55vw !important;height:138px !important;}
.brand img{max-height:138px !important;transform:scale(1.07) !important;transform-origin:left center !important;}
nav{gap:14px !important;}
nav a{font-size:14px !important;}
.topwa{min-width:145px !important;padding:11px 12px !important;}
}
/* Tablet — marca ocupa o protagonismo da primeira linha */
@media (min-width:621px) and (max-width:1050px){
header{height:152px !important;min-height:152px !important;}
.nav{height:152px !important;min-height:152px !important;}
.brand{width:min(700px,72vw) !important;max-width:72vw !important;height:126px !important;}
.brand img{max-height:126px !important;transform:scale(1.08) !important;transform-origin:left center !important;}
}
/* Smartphone — usar praticamente toda a largura útil da tela */
@media (max-width:620px){
header{height:198px !important;min-height:198px !important;}
.nav{
height:198px !important;min-height:198px !important;
width:100% !important;max-width:100% !important;
grid-template-rows:140px 50px !important;
}
.brand{
width:100vw !important;max-width:100vw !important;
height:136px !important;
margin-left:0 !important;margin-right:0 !important;
padding:0 4px !important;
}
.brand img{
content:url("../images/logo-horizontal-mobile-destaque.png") !important;
width:100% !important;height:auto !important;
max-height:136px !important;
transform:scale(1.13) !important;
transform-origin:center center !important;
}
}
@media (max-width:390px){
header{height:190px !important;min-height:190px !important;}
.nav{height:190px !important;min-height:190px !important;grid-template-rows:134px 48px !important;}
.brand{height:130px !important;}
.brand img{max-height:130px !important;transform:scale(1.12) !important;}
}
/* COMO FUNCIONA — mais peso visual para ícones, títulos e descrições */
.how{padding:104px 0 110px !important;}
.how .section-title{max-width:920px !important;}
.how .section-title small{font-size:14px !important;font-weight:800 !important;letter-spacing:4.5px !important;}
.how .section-title h2{font-size:50px !important;line-height:1.08 !important;font-weight:850 !important;letter-spacing:-1.5px !important;margin:14px 0 18px !important;}
.how .section-title p{font-size:20px !important;line-height:1.55 !important;max-width:840px !important;margin-left:auto !important;margin-right:auto !important;}
.steps{gap:30px !important;margin-top:56px !important;}
.steps article{
min-height:500px !important;
padding:30px 28px 34px !important;
border-radius:28px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
box-shadow:0 18px 42px #00245b14 !important;
}
.steps article>span{
align-self:flex-start !important;
float:none !important;
font-size:18px !important;
font-weight:900 !important;
letter-spacing:.5px !important;
}
.steps img{
width:270px !important;
height:270px !important;
max-width:88% !important;
object-fit:contain !important;
margin:8px auto 10px !important;
}
.steps h3{
font-size:31px !important;
line-height:1.05 !important;
font-weight:900 !important;
letter-spacing:-.6px !important;
color:#00245b !important;
margin:8px 0 12px !important;
}
.steps p{
font-size:19px !important;
line-height:1.52 !important;
font-weight:600 !important;
color:#536f89 !important;
max-width:330px !important;
margin:0 auto !important;
}
@media (min-width:621px) and (max-width:1050px){
.how{padding:82px 0 90px !important;}
.how .section-title h2{font-size:44px !important;}
.how .section-title p{font-size:19px !important;}
.steps{grid-template-columns:1fr !important;max-width:720px !important;margin-left:auto !important;margin-right:auto !important;}
.steps article{min-height:460px !important;}
.steps img{width:250px !important;height:250px !important;}
.steps h3{font-size:30px !important;}
.steps p{font-size:19px !important;max-width:520px !important;}
}
@media (max-width:620px){
.how{padding:68px 0 76px !important;}
.how .section-title small{font-size:12px !important;letter-spacing:3.2px !important;}
.how .section-title h2{font-size:38px !important;line-height:1.08 !important;margin:12px 0 16px !important;}
.how .section-title p{font-size:17px !important;line-height:1.55 !important;padding:0 4px !important;}
.steps{gap:20px !important;margin-top:36px !important;}
.steps article{min-height:420px !important;padding:24px 18px 28px !important;border-radius:24px !important;}
.steps article>span{font-size:17px !important;}
.steps img{width:230px !important;height:230px !important;max-width:92% !important;margin:4px auto 8px !important;}
.steps h3{font-size:30px !important;margin:4px 0 10px !important;}
.steps p{font-size:18px !important;line-height:1.48 !important;font-weight:600 !important;max-width:310px !important;}
}
/* =========================================================
AJUSTE 07/09/2026 — MENU LIMPO + BENEFÍCIOS EM DESTAQUE
Mantém hero, logo, featurebar e passos aprovados.
========================================================= */
/* Menu: somente Início | Segurança | Contato */
@media (min-width:1051px){
.nav > nav{
gap:34px !important;
align-items:center !important;
}
.nav > nav a{
font-size:17px !important;
font-weight:750 !important;
letter-spacing:.1px !important;
padding:10px 2px !important;
position:relative !important;
}
.nav > nav a::after{
content:"";
position:absolute;
left:2px;
right:2px;
bottom:4px;
height:2px;
background:#00ad8c;
transform:scaleX(0);
transform-origin:center;
transition:transform .2s ease;
}
.nav > nav a:hover::after{transform:scaleX(1);}
}
/* Segurança / Eficiência / Tranquilidade — presença equivalente às demais áreas */
.dark{padding:62px 0 !important;}
.dark-grid{gap:56px !important;}
.dark h2{
font-size:34px !important;
line-height:1.22 !important;
font-weight:850 !important;
letter-spacing:-.5px !important;
margin:0 !important;
}
.metrics{
gap:18px !important;
align-items:stretch !important;
}
.metrics div{
min-height:220px !important;
padding:18px 14px 16px !important;
border-left:0 !important;
border-radius:22px !important;
background:rgba(255,255,255,.07) !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.metrics img{
width:112px !important;
height:112px !important;
object-fit:contain !important;
display:block !important;
margin:0 auto 8px !important;
filter:drop-shadow(0 8px 12px rgba(0,15,45,.25)) !important;
}
.metrics strong{
display:block !important;
margin-top:4px !important;
font-size:22px !important;
line-height:1.1 !important;
font-weight:900 !important;
color:#ffffff !important;
letter-spacing:-.2px !important;
}
.metrics span{
display:block !important;
margin-top:8px !important;
font-size:16px !important;
line-height:1.3 !important;
font-weight:650 !important;
color:#dceeff !important;
}
@media (min-width:1600px){
.dark{padding:72px 0 !important;}
.dark h2{font-size:39px !important;}
.metrics div{min-height:242px !important;}
.metrics img{width:126px !important;height:126px !important;}
.metrics strong{font-size:24px !important;}
.metrics span{font-size:17px !important;}
}
@media (max-width:1050px){
.dark{padding:58px 0 64px !important;}
.dark-grid{gap:38px !important;}
.dark h2{font-size:32px !important;max-width:700px !important;margin:0 auto !important;}
.metrics{gap:16px !important;}
.metrics div{min-height:205px !important;}
.metrics img{width:104px !important;height:104px !important;}
.metrics strong{font-size:21px !important;}
.metrics span{font-size:15px !important;}
}
@media (max-width:620px){
.dark{padding:50px 0 58px !important;}
.dark-grid{gap:30px !important;}
.dark h2{font-size:29px !important;line-height:1.22 !important;padding:0 4px !important;}
.metrics{grid-template-columns:1fr !important;gap:14px !important;max-width:360px !important;margin:0 auto !important;}
.metrics div{min-height:185px !important;padding:14px 12px 16px !important;}
.metrics img{width:104px !important;height:104px !important;margin-bottom:2px !important;}
.metrics strong{font-size:22px !important;}
.metrics span{font-size:16px !important;margin-top:6px !important;}
}
/* =========================================================
AJUSTE 07/09/2026 — CABEÇALHO FIXO DURANTE A ROLAGEM
Mantém integralmente o visual aprovado e apenas fixa o header.
========================================================= */
header{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:9999 !important;
background:#fff !important;
box-shadow:0 4px 22px rgba(0,36,91,.10) !important;
}
/* Reserva no documento o mesmo espaço ocupado pelo cabeçalho fixo. */
body{padding-top:176px !important;}
/* Ao navegar pelas âncoras, mantém o título da seção visível abaixo do header. */
#inicio,#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:196px !important;
}
@media (min-width:1051px) and (max-width:1200px){
body{padding-top:164px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:184px !important;}
}
@media (min-width:621px) and (max-width:1050px){
body{padding-top:152px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:172px !important;}
}
@media (max-width:620px){
body{padding-top:198px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:214px !important;}
header .nav{position:relative !important;}
}
@media (max-width:390px){
body{padding-top:190px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:206px !important;}
}
/* =========================================================
AJUSTE 07/09/2026 — DESTAQUE DA CHAMADA "FALE CONOSCO"
Reforço apenas da hierarquia tipográfica da área de contato.
========================================================= */
.contact-grid > div:first-child > small{
display:block !important;
font-size:16px !important;
line-height:1.2 !important;
letter-spacing:5px !important;
font-weight:800 !important;
color:#008f8d !important;
margin-bottom:16px !important;
}
.contact-grid > div:first-child > h2{
font-size:52px !important;
line-height:1.08 !important;
letter-spacing:-1.4px !important;
font-weight:800 !important;
color:#00245b !important;
max-width:680px !important;
margin:0 0 22px !important;
}
.contact-grid > div:first-child > p{
font-size:20px !important;
line-height:1.55 !important;
font-weight:500 !important;
color:#496a88 !important;
max-width:650px !important;
margin:0 0 28px !important;
}
@media (min-width:1600px){
.contact-grid > div:first-child > small{
font-size:17px !important;
}
.contact-grid > div:first-child > h2{
font-size:58px !important;
max-width:760px !important;
}
.contact-grid > div:first-child > p{
font-size:22px !important;
max-width:720px !important;
}
}
@media (max-width:1050px){
.contact-grid > div:first-child{
text-align:center !important;
}
.contact-grid > div:first-child > small{
font-size:15px !important;
}
.contact-grid > div:first-child > h2{
font-size:46px !important;
max-width:760px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.contact-grid > div:first-child > p{
font-size:19px !important;
max-width:680px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.contact-grid > div:first-child > .bigwa{
margin-left:auto !important;
margin-right:auto !important;
}
}
@media (max-width:620px){
.contact{
padding-top:64px !important;
padding-bottom:68px !important;
}
.contact-grid > div:first-child > small{
font-size:13px !important;
letter-spacing:3.5px !important;
margin-bottom:13px !important;
}
.contact-grid > div:first-child > h2{
font-size:37px !important;
line-height:1.12 !important;
letter-spacing:-.7px !important;
margin-bottom:18px !important;
}
.contact-grid > div:first-child > p{
font-size:17px !important;
line-height:1.55 !important;
margin-bottom:23px !important;
}
}
/* =========================================================
AJUSTES 07/09/2026 — CONTATO DIRETO + CORES MAIS VIVAS +
REFINAMENTO DO CABEÇALHO
========================================================= */
/* Mantém a paleta original, mas aumenta contraste/saturação percebida */
:root{
--brand-navy-vivid:#002b6f;
--brand-blue-vivid:#005fbd;
--brand-teal-vivid:#009f9a;
--brand-teal-deep:#007f7b;
--brand-text-vivid:#0b315f;
}
/* Âncora do WhatsApp não fica escondida sob o cabeçalho fixo */
#whatsapp-contato{
scroll-margin-top:220px !important;
}
/* Cabeçalho: mais presença sem competir com a logomarca */
header nav a{
font-size:17px !important;
font-weight:700 !important;
letter-spacing:.15px !important;
color:var(--brand-navy-vivid) !important;
padding:11px 14px !important;
border-radius:10px !important;
transition:background-color .2s ease, color .2s ease, transform .2s ease !important;
}
header nav a:hover{
background:rgba(0,159,154,.10) !important;
color:var(--brand-teal-deep) !important;
}
header nav{
gap:14px !important;
align-items:center !important;
}
/* Botão Login mais forte, mantendo a linguagem visual atual */
header .login,
header a.login,
header .btn-login,
header a[href*="login"]{
font-size:17px !important;
font-weight:800 !important;
min-height:46px !important;
padding:11px 22px !important;
border-radius:12px !important;
}
/* Títulos e destaques com mais vida, sem troca de paleta */
h1, h2, h3, .section-title{
color:var(--brand-navy-vivid) !important;
}
.eyebrow,
.kicker,
.section-kicker,
.contact-grid > div:first-child > small{
color:var(--brand-teal-deep) !important;
}
/* CTAs e elementos verdes/azulados com mais saturação */
.btn-primary,
.bigwa,
a.bigwa,
button[type="submit"],
.cta,
.cta-primary{
background:var(--brand-teal-vivid) !important;
border-color:var(--brand-teal-vivid) !important;
box-shadow:0 10px 24px rgba(0,159,154,.22) !important;
}
.btn-primary:hover,
.bigwa:hover,
a.bigwa:hover,
button[type="submit"]:hover,
.cta:hover,
.cta-primary:hover{
background:var(--brand-teal-deep) !important;
border-color:var(--brand-teal-deep) !important;
}
/* Cartões/ícones: mais contraste nos títulos, mantendo fundos */
.feature-card h3,
.benefit h3,
.step h3,
.card h3{
color:var(--brand-navy-vivid) !important;
}
.feature-card p,
.benefit p,
.step p,
.card p{
color:#365f82 !important;
}
/* Pequeno ganho de contraste visual em ícones/imagens sem alterar arte */
.features img,
.benefits img,
.steps img,
.feature-card img,
.benefit img,
.step img{
filter:saturate(1.08) contrast(1.04) !important;
}
@media (min-width:1600px){
header nav a{
font-size:18px !important;
padding:12px 16px !important;
}
header nav{
gap:18px !important;
}
header .login,
header a.login,
header .btn-login,
header a[href*="login"]{
font-size:18px !important;
padding:12px 24px !important;
}
}
@media (max-width:1050px){
#whatsapp-contato{
scroll-margin-top:190px !important;
}
header nav a{
font-size:16px !important;
padding:10px 12px !important;
}
}
@media (max-width:620px){
#whatsapp-contato{
scroll-margin-top:155px !important;
}
header nav a{
font-size:17px !important;
font-weight:750 !important;
}
header .login,
header a.login,
header .btn-login,
header a[href*="login"]{
font-size:16px !important;
min-height:44px !important;
padding:10px 18px !important;
}
}
/* =========================================================
CORREÇÃO PONTUAL — contraste do título Tecnologia e Segurança
========================================================= */
.tech h2,
.tech .section-title,
#seguranca h2,
#seguranca .section-title{
color:#002b6f !important;
opacity:1 !important;
}
.tech h2 em,
.tech h2 strong,
.tech .section-title em,
.tech .section-title strong,
#seguranca h2 em,
#seguranca h2 strong{
color:#009f9a !important;
opacity:1 !important;
}
/* =========================================================
CORREÇÃO DEFINITIVA — título da seção Segurança
Fundo escuro exige texto principal claro.
========================================================= */
section.dark#seguranca h2,
#seguranca.dark h2,
.dark#seguranca h2{
color:#ffffff !important;
opacity:1 !important;
text-shadow:0 1px 1px rgba(0,0,0,.10) !important;
}
section.dark#seguranca h2 em,
section.dark#seguranca h2 strong,
#seguranca.dark h2 em,
#seguranca.dark h2 strong,
.dark#seguranca h2 em,
.dark#seguranca h2 strong{
color:#23e0bd !important;
opacity:1 !important;
}
/* =========================================================
CORREÇÃO MOBILE/TABLET 07/09/2026
- nova logo específica com nome novo (evita cache)
- sem corte lateral
- menu hambúrguer funcional por classe mobile-open
========================================================= */
.brand picture{display:block;width:100%;height:100%;}
.brand picture img{display:block;}
@media (min-width:621px) and (max-width:1050px){
.brand{
width:min(680px,70vw) !important;
max-width:70vw !important;
overflow:visible !important;
}
.brand picture,
.brand img{
width:100% !important;
max-width:100% !important;
height:100% !important;
max-height:126px !important;
object-fit:contain !important;
object-position:left center !important;
content:normal !important;
transform:none !important;
}
.nav > nav.mobile-open{
display:flex !important;
position:fixed !important;
left:4% !important;
right:4% !important;
top:var(--mobile-menu-top, 152px) !important;
z-index:10001 !important;
flex-direction:column !important;
gap:4px !important;
padding:16px !important;
background:#fff !important;
border:1px solid rgba(0,36,91,.10) !important;
border-radius:16px !important;
box-shadow:0 16px 38px rgba(0,36,91,.18) !important;
}
.nav > nav.mobile-open a{
display:block !important;
width:100% !important;
min-height:48px !important;
padding:13px 16px !important;
font-size:17px !important;
line-height:1.2 !important;
border-radius:10px !important;
}
}
@media (max-width:620px){
.brand{
width:94vw !important;
max-width:94vw !important;
height:136px !important;
padding:0 10px !important;
margin:0 auto !important;
overflow:visible !important;
}
.brand picture,
.brand img{
width:100% !important;
max-width:100% !important;
height:100% !important;
max-height:132px !important;
object-fit:contain !important;
object-position:center center !important;
content:normal !important;
transform:none !important;
}
.nav > nav.mobile-open{
display:flex !important;
position:fixed !important;
left:4% !important;
right:4% !important;
top:var(--mobile-menu-top, 198px) !important;
z-index:10001 !important;
flex-direction:column !important;
gap:3px !important;
padding:14px !important;
background:#fff !important;
border:1px solid rgba(0,36,91,.10) !important;
border-radius:15px !important;
box-shadow:0 16px 38px rgba(0,36,91,.20) !important;
}
.nav > nav.mobile-open a{
display:block !important;
width:100% !important;
min-height:48px !important;
padding:13px 15px !important;
font-size:17px !important;
font-weight:750 !important;
line-height:1.2 !important;
border-radius:10px !important;
}
}
@media (max-width:390px){
.brand{width:93vw !important;max-width:93vw !important;height:130px !important;}
.brand picture,.brand img{max-height:126px !important;}
}
/* =========================================================
CORREÇÃO MOBILE DEFINITIVA 07/09/2026 — 09:48
Corrige o Hero cortado/bloco azul e amplia a logo.
Mantém menu hambúrguer e Login.
========================================================= */
.hero-picture{display:contents;}
@media (max-width:620px){
/* Cabeçalho: logo um pouco maior, em linha própria */
header{
height:174px !important;
min-height:174px !important;
}
header .nav{
width:96% !important;
max-width:96% !important;
height:174px !important;
min-height:174px !important;
display:grid !important;
grid-template-columns:1fr auto auto 1fr !important;
grid-template-rows:116px 48px !important;
column-gap:12px !important;
row-gap:4px !important;
align-content:center !important;
align-items:center !important;
overflow:visible !important;
}
.brand{
grid-column:1 / -1 !important;
grid-row:1 !important;
justify-self:center !important;
width:100% !important;
max-width:430px !important;
height:112px !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
.brand picture,
.brand picture img,
.brand img{
display:block !important;
width:100% !important;
max-width:430px !important;
height:112px !important;
max-height:112px !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
}
.hamb{
grid-column:2 !important;
grid-row:2 !important;
justify-self:end !important;
margin:0 !important;
}
.topwa{
grid-column:3 !important;
grid-row:2 !important;
justify-self:start !important;
margin:0 !important;
}
/* Cabeçalho fixo: reserva exata para não cobrir o conteúdo */
body{padding-top:174px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:190px !important;
}
/* Hero: sem retângulo azul, sem corte e sem posicionamento absoluto herdado */
.hero{
background:#fff !important;
overflow:visible !important;
}
.hero-grid{
width:100% !important;
max-width:100% !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:0 !important;
}
.copy{
display:block !important;
width:92% !important;
margin:0 auto !important;
padding:34px 0 30px !important;
text-align:center !important;
}
.visual{
position:relative !important;
display:block !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
background:#fff !important;
clip-path:none !important;
overflow:hidden !important;
transform:none !important;
}
.visual .glow,
.visual .tile,
.visual .side-cards,
.visual .control{
display:none !important;
}
.hero-picture{
display:block !important;
width:100% !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
}
.visual .main-art,
.hero-picture .main-art{
position:static !important;
inset:auto !important;
left:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
filter:none !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
.nav > nav.mobile-open{
top:174px !important;
}
}
@media (max-width:390px){
header,
header .nav{
height:166px !important;
min-height:166px !important;
}
header .nav{
grid-template-rows:110px 46px !important;
}
.brand{
max-width:400px !important;
height:106px !important;
}
.brand picture,
.brand picture img,
.brand img{
max-width:400px !important;
height:106px !important;
max-height:106px !important;
}
body{padding-top:166px !important;}
.nav > nav.mobile-open{top:166px !important;}
}
/* =========================================================
AJUSTE MOBILE/TABLET V5 — 07/09/2026
1) Hero limpo também no tablet (sem resíduos na borda esquerda)
2) Menu hambúrguer robusto em tablets Samsung
3) Bloco Segurança/Eficiência/Tranquilidade compacto no smartphone
========================================================= */
/* Tablet: remove sobreposições antigas do hero e usa somente a arte limpa. */
@media (min-width:621px) and (max-width:1050px){
.visual .glow,
.visual .tile,
.visual .side-cards,
.visual .control{
display:none !important;
visibility:hidden !important;
}
.hero-picture{
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
.visual .main-art,
.hero-picture .main-art{
position:absolute !important;
inset:4% !important;
width:92% !important;
height:92% !important;
max-width:92% !important;
max-height:92% !important;
object-fit:contain !important;
object-position:center !important;
border:0 !important;
box-shadow:none !important;
filter:none !important;
}
/* Garante clique e abertura do menu mesmo em navegadores Samsung/Chrome tablet. */
.hamb{
display:block !important;
position:relative !important;
z-index:10005 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
cursor:pointer !important;
}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
position:fixed !important;
left:4% !important;
right:4% !important;
top:var(--mobile-menu-top, 160px) !important;
z-index:10004 !important;
flex-direction:column !important;
gap:4px !important;
padding:16px !important;
background:#fff !important;
border:1px solid rgba(0,36,91,.12) !important;
border-radius:16px !important;
box-shadow:0 16px 38px rgba(0,36,91,.22) !important;
}
}
@media (max-width:620px){
/* Segundo caminho de abertura do menu, além da classe mobile-open. */
.hamb{
position:relative !important;
z-index:10005 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
z-index:10004 !important;
}
/* Segurança: elimina os grandes vazios e cria três cartões compactos e harmônicos. */
#seguranca.dark{
padding:38px 0 42px !important;
}
#seguranca .dark-grid{
gap:22px !important;
}
#seguranca .dark-grid h2{
font-size:27px !important;
line-height:1.28 !important;
max-width:94% !important;
margin:0 auto !important;
}
#seguranca .metrics{
width:min(94%,420px) !important;
max-width:420px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
#seguranca .metrics > div{
width:100% !important;
min-height:0 !important;
height:auto !important;
padding:12px 16px !important;
display:grid !important;
grid-template-columns:62px 1fr !important;
grid-template-rows:auto auto !important;
column-gap:14px !important;
row-gap:2px !important;
align-items:center !important;
justify-content:stretch !important;
text-align:left !important;
border-radius:16px !important;
background:rgba(255,255,255,.075) !important;
}
#seguranca .metrics img{
grid-column:1 !important;
grid-row:1 / 3 !important;
width:58px !important;
height:58px !important;
margin:0 !important;
object-fit:contain !important;
}
#seguranca .metrics strong{
grid-column:2 !important;
grid-row:1 !important;
margin:0 !important;
font-size:20px !important;
line-height:1.1 !important;
text-align:left !important;
}
#seguranca .metrics span{
grid-column:2 !important;
grid-row:2 !important;
margin:2px 0 0 !important;
font-size:15px !important;
line-height:1.2 !important;
text-align:left !important;
}
}
/* =========================================================
V6 — AJUSTE DO RODAPÉ/CABEÇALHO AZUL NO SMARTPHONE
Corrige o espaçamento excessivo entre +Segurança,
+Eficiência e +Tranquilidade.
========================================================= */
@media (max-width:620px){
.footer-premium{
padding:0 !important;
}
.footer-main{
width:100% !important;
max-width:100% !important;
min-height:0 !important;
padding:28px 18px 24px !important;
gap:18px !important;
grid-template-columns:1fr !important;
align-items:start !important;
}
.footer-brand{
padding:0 !important;
margin:0 auto !important;
border:0 !important;
width:min(88%,360px) !important;
justify-content:center !important;
}
.footer-brand img{
width:100% !important;
max-width:360px !important;
max-height:none !important;
}
.footer-message{
padding:0 !important;
margin:0 auto !important;
border:0 !important;
width:min(94%,430px) !important;
text-align:center !important;
}
.footer-message p{
margin:0 !important;
font-size:20px !important;
line-height:1.34 !important;
text-align:center !important;
}
.footer-benefits{
width:min(94%,430px) !important;
max-width:430px !important;
margin:2px auto 0 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
}
.footer-benefits > div{
min-height:0 !important;
height:auto !important;
margin:0 !important;
padding:11px 14px !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:14px !important;
background:rgba(255,255,255,.055) !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:3px !important;
}
.footer-benefits > div::before{
margin:0 !important;
font-size:0 !important;
line-height:0 !important;
}
.footer-benefits b{
margin:0 !important;
font-size:19px !important;
line-height:1.15 !important;
}
.footer-benefits span{
margin:0 !important;
font-size:15px !important;
line-height:1.2 !important;
}
.footer-bottom{
width:100% !important;
min-height:0 !important;
padding:16px 18px 20px !important;
gap:10px !important;
}
}
/* =========================================================
V7 — POSICIONAMENTO FINAL APROVADO DO MENU NO SMARTPHONE
Login à direita e menu hambúrguer logo abaixo, com respiro.
Tablet e desktop permanecem inalterados.
========================================================= */
@media (max-width:620px){
header{
height:206px !important;
min-height:206px !important;
}
header .nav{
width:96% !important;
max-width:96% !important;
height:206px !important;
min-height:206px !important;
display:grid !important;
grid-template-columns:1fr auto !important;
grid-template-rows:116px 48px 34px !important;
column-gap:12px !important;
row-gap:4px !important;
align-content:start !important;
align-items:center !important;
overflow:visible !important;
}
.brand{
grid-column:1 / -1 !important;
grid-row:1 !important;
justify-self:center !important;
}
.topwa{
grid-column:2 !important;
grid-row:2 !important;
justify-self:center !important;
align-self:center !important;
margin:0 8px 0 0 !important;
}
.hamb{
grid-column:2 !important;
grid-row:3 !important;
justify-self:center !important;
align-self:start !important;
margin:2px 8px 0 0 !important;
padding:0 !important;
line-height:1 !important;
}
body{padding-top:206px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:222px !important;
}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:206px !important;
}
}
@media (max-width:390px){
header,
header .nav{
height:198px !important;
min-height:198px !important;
}
header .nav{
grid-template-rows:110px 46px 32px !important;
row-gap:3px !important;
}
.topwa,
.hamb{
margin-right:6px !important;
}
body{padding-top:198px !important;}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:198px !important;
}
}
/* =========================================================
V8 — CABEÇALHO MOBILE CONFORME ESBOÇO APROVADO
Logo ocupa a faixa esquerda; Login à direita; hamburger logo
abaixo do Login, com pequeno respiro. Sem aumentar o cabeçalho.
Tablet e desktop permanecem inalterados.
========================================================= */
@media (max-width:620px){
header,
header .nav{
height:154px !important;
min-height:154px !important;
}
header .nav{
width:96% !important;
max-width:96% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 108px !important;
grid-template-rows:82px 58px !important;
column-gap:8px !important;
row-gap:0 !important;
align-content:center !important;
align-items:center !important;
overflow:visible !important;
}
.brand{
grid-column:1 !important;
grid-row:1 / 3 !important;
justify-self:start !important;
align-self:center !important;
width:min(100%,305px) !important;
max-width:74vw !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
.brand picture,
.brand picture img,
.brand img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:138px !important;
object-fit:contain !important;
object-position:left center !important;
transform:none !important;
}
.topwa{
grid-column:2 !important;
grid-row:1 !important;
justify-self:center !important;
align-self:end !important;
min-width:96px !important;
height:48px !important;
margin:0 0 5px 0 !important;
padding:0 17px !important;
border-radius:15px !important;
}
.topwa b{
display:block !important;
font-size:17px !important;
}
.topwa span,
.topwa i{display:none !important;}
.hamb{
grid-column:2 !important;
grid-row:2 !important;
justify-self:center !important;
align-self:start !important;
margin:7px 0 0 0 !important;
padding:0 !important;
width:54px !important;
height:38px !important;
line-height:38px !important;
font-size:34px !important;
text-align:center !important;
}
body{padding-top:154px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:170px !important;
}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:154px !important;
}
}
@media (max-width:390px){
header,
header .nav{
height:148px !important;
min-height:148px !important;
}
header .nav{
grid-template-columns:minmax(0,1fr) 102px !important;
grid-template-rows:78px 56px !important;
}
.brand{
width:min(100%,292px) !important;
max-width:73vw !important;
}
.topwa{
min-width:92px !important;
height:46px !important;
}
.hamb{
margin-top:6px !important;
font-size:32px !important;
}
body{padding-top:148px !important;}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:148px !important;
}
}
/* =========================================================
V9 — SMARTPHONE FINAL APROVADO — 07/09/2026
- Logo com mais presença/legibilidade no smartphone
- Login + hamburger ligeiramente mais baixos, preservando harmonia
- Hero sem repetição do slogan da marca
- Tablet e desktop inalterados
========================================================= */
@media (max-width:620px){
header,
header .nav{
height:166px !important;
min-height:166px !important;
}
header .nav{
width:98% !important;
max-width:98% !important;
grid-template-columns:minmax(0,1fr) 104px !important;
grid-template-rows:88px 64px !important;
column-gap:4px !important;
align-content:center !important;
}
.brand{
width:100% !important;
max-width:none !important;
align-self:center !important;
transform:scale(1.07) !important;
transform-origin:left center !important;
}
.brand picture,
.brand picture img,
.brand img{
width:100% !important;
max-width:100% !important;
max-height:148px !important;
object-fit:contain !important;
object-position:left center !important;
}
.topwa{
min-width:92px !important;
height:44px !important;
padding:0 14px !important;
align-self:end !important;
margin:0 0 0 0 !important;
border-radius:14px !important;
}
.topwa b{font-size:16px !important;}
.hamb{
width:50px !important;
height:36px !important;
line-height:36px !important;
font-size:32px !important;
align-self:start !important;
margin:12px 0 0 0 !important;
}
body{padding-top:166px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:182px !important;}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{top:166px !important;}
.copy h1{
font-size:42px !important;
line-height:1.02 !important;
letter-spacing:-1.8px !important;
margin-bottom:24px !important;
}
.copy h1 em{
display:block !important;
margin-top:4px !important;
}
}
@media (max-width:390px){
header,
header .nav{
height:160px !important;
min-height:160px !important;
}
header .nav{
grid-template-columns:minmax(0,1fr) 98px !important;
grid-template-rows:84px 62px !important;
}
.brand{transform:scale(1.055) !important;}
.topwa{min-width:88px !important;height:42px !important;}
.hamb{margin-top:11px !important;font-size:31px !important;}
body{padding-top:160px !important;}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{top:160px !important;}
.copy h1{font-size:39px !important;}
}
/* =========================================================
V10 — CORREÇÃO DE ESCOPO E CABEÇALHO SMARTPHONE
- Desktop/tablet mantêm o Hero original.
- Novo título aparece apenas em smartphone (<=620px).
- Logo, Login e hamburger passam a ocupar colunas próprias,
sem sobreposição/corte do botão Login.
========================================================= */
.hero-title-mobile{display:none;}
@media (max-width:620px){
/* títulos por dispositivo */
.hero-title-desktop{display:none !important;}
.hero-title-mobile{display:block !important;}
/* cabeçalho smartphone: reserva real para controles à direita */
header,
header .nav{
height:166px !important;
min-height:166px !important;
}
header .nav{
width:96% !important;
max-width:96% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 112px !important;
grid-template-rows:92px 60px !important;
column-gap:10px !important;
row-gap:0 !important;
align-content:center !important;
align-items:center !important;
overflow:visible !important;
}
.brand{
grid-column:1 !important;
grid-row:1 / 3 !important;
justify-self:start !important;
align-self:center !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
overflow:visible !important;
}
.brand picture,
.brand picture img,
.brand img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:148px !important;
object-fit:contain !important;
object-position:left center !important;
transform:none !important;
}
.topwa{
grid-column:2 !important;
grid-row:1 !important;
justify-self:end !important;
align-self:end !important;
box-sizing:border-box !important;
width:98px !important;
min-width:98px !important;
max-width:98px !important;
height:44px !important;
margin:0 0 3px 0 !important;
padding:0 12px !important;
border-radius:14px !important;
overflow:hidden !important;
}
.topwa b{
display:block !important;
font-size:16px !important;
white-space:nowrap !important;
}
.topwa span,
.topwa i{display:none !important;}
.hamb{
grid-column:2 !important;
grid-row:2 !important;
justify-self:center !important;
align-self:start !important;
width:50px !important;
height:36px !important;
margin:12px 0 0 0 !important;
padding:0 !important;
line-height:36px !important;
font-size:32px !important;
text-align:center !important;
}
body{padding-top:166px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:182px !important;
}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:166px !important;
}
.copy .hero-title-mobile{
font-size:42px !important;
line-height:1.02 !important;
letter-spacing:-1.8px !important;
margin-bottom:24px !important;
}
.copy .hero-title-mobile em{
display:block !important;
margin-top:4px !important;
}
}
@media (max-width:390px){
header,
header .nav{
height:160px !important;
min-height:160px !important;
}
header .nav{
width:96% !important;
max-width:96% !important;
grid-template-columns:minmax(0,1fr) 104px !important;
grid-template-rows:88px 58px !important;
column-gap:8px !important;
}
.topwa{
width:92px !important;
min-width:92px !important;
max-width:92px !important;
height:42px !important;
padding:0 10px !important;
}
.topwa b{font-size:15px !important;}
.hamb{
margin-top:11px !important;
font-size:31px !important;
}
body{padding-top:160px !important;}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:160px !important;
}
.copy .hero-title-mobile{font-size:39px !important;}
}
/* =========================================================
V11 — AJUSTE FINAL APROVADO NO SMARTPHONE — 07/09/2026
Escopo: SOMENTE smartphone (<=620px).
- Desktop e tablet preservados.
- Mantém o Hero mobile aprovado.
- Recupera presença/legibilidade da logomarca e slogan.
- Desce discretamente Login + hamburger, sem corte.
========================================================= */
@media (max-width:620px){
header,
header .nav{
height:176px !important;
min-height:176px !important;
}
header .nav{
width:97% !important;
max-width:97% !important;
grid-template-columns:minmax(0,1fr) 108px !important;
grid-template-rows:100px 62px !important;
column-gap:8px !important;
align-content:center !important;
}
.brand{
grid-column:1 !important;
grid-row:1 / 3 !important;
justify-self:start !important;
align-self:center !important;
width:100% !important;
max-width:100% !important;
transform:none !important;
}
.brand picture,
.brand picture img,
.brand img{
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:165px !important;
object-fit:contain !important;
object-position:left center !important;
}
.topwa{
grid-column:2 !important;
grid-row:1 !important;
justify-self:end !important;
align-self:end !important;
box-sizing:border-box !important;
width:96px !important;
min-width:96px !important;
max-width:96px !important;
height:44px !important;
margin:0 0 -4px 0 !important;
padding:0 11px !important;
border-radius:14px !important;
overflow:visible !important;
}
.topwa b{
font-size:16px !important;
white-space:nowrap !important;
}
.hamb{
grid-column:2 !important;
grid-row:2 !important;
justify-self:center !important;
align-self:start !important;
width:50px !important;
height:36px !important;
margin:16px 0 0 0 !important;
line-height:36px !important;
font-size:32px !important;
}
body{padding-top:176px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:192px !important;
}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:176px !important;
}
}
@media (max-width:390px){
header,
header .nav{
height:170px !important;
min-height:170px !important;
}
header .nav{
width:97% !important;
max-width:97% !important;
grid-template-columns:minmax(0,1fr) 100px !important;
grid-template-rows:96px 60px !important;
column-gap:6px !important;
}
.brand picture,
.brand picture img,
.brand img{
max-height:155px !important;
}
.topwa{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:42px !important;
padding:0 9px !important;
}
.topwa b{font-size:15px !important;}
.hamb{
margin-top:15px !important;
font-size:31px !important;
}
body{padding-top:170px !important;}
.nav > nav.mobile-open,
.hamb[aria-expanded="true"] ~ nav#menu-principal{
top:170px !important;
}
}
/* =========================================================
V13 — DESKTOP PROFISSIONAL APROVADO — 07/09/2026
Escopo: SOMENTE desktop (>1050px).
Smartphone V12 e tablet permanecem preservados.
========================================================= */
.desktop-benefit{display:none;}
@media (min-width:1051px){
header, header .nav{
height:132px !important;
min-height:132px !important;
}
body{padding-top:132px !important;}
#inicio,#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:152px !important;}
header .nav{
width:min(1480px,94%) !important;
gap:28px !important;
}
.brand{
width:390px !important;
max-width:28vw !important;
height:116px !important;
padding:5px 8px !important;
}
.brand img{
height:104px !important;
max-height:104px !important;
object-fit:contain !important;
}
header nav{gap:34px !important;}
header nav a{font-size:15px !important;}
.topwa{
min-width:180px !important;
padding:13px 18px !important;
}
.topwa b{font-size:16px !important;}
.hero{background:linear-gradient(115deg,#fff 0 55%,#eef9ff 55% 100%) !important;}
.hero-grid{
min-height:650px !important;
grid-template-columns:.92fr 1.08fr !important;
width:min(1480px,94%) !important;
}
.copy{padding:55px 24px 42px 0 !important;}
.kicker{font-size:13px !important;letter-spacing:7px !important;margin-bottom:22px !important;}
.copy .hero-title-desktop{
display:block !important;
font-size:58px !important;
line-height:1.02 !important;
letter-spacing:-2.6px !important;
margin:0 0 24px !important;
max-width:720px !important;
}
.copy .hero-title-mobile{display:none !important;}
.copy>p{font-size:20px !important;line-height:1.48 !important;max-width:610px !important;}
.actions{margin:30px 0 34px !important;gap:30px !important;}
.primary{padding:19px 28px !important;min-width:300px !important;justify-content:space-between !important;}
.learn i{width:58px !important;height:58px !important;}
.learn b{font-size:18px !important;}
.learn small{font-size:15px !important;}
.micro{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0 !important;margin-top:48px !important;width:100% !important;}
.micro>div{padding:0 18px !important;min-height:58px !important;border-right:1px solid #d7e5ed !important;justify-content:flex-start !important;}
.micro>div:first-child{padding-left:0 !important;}
.micro>div:last-child{border-right:0 !important;}
.micro .desktop-benefit{display:flex !important;}
.micro b{font-size:31px !important;}
.micro strong{font-size:13px !important;}
.micro small{font-size:12px !important;line-height:1.25 !important;}
.visual{
height:650px !important;
clip-path:none !important;
background:linear-gradient(135deg,#eef9ff,#dff4ff) !important;
overflow:hidden !important;
}
.visual .glow{display:block !important;width:560px !important;height:560px !important;background:#00d89c1c !important;}
.hero-picture{display:block !important;width:94% !important;position:relative !important;z-index:2 !important;overflow:hidden !important;border-radius:24px !important;}
.main-art{
width:104% !important;
max-height:560px !important;
margin-left:-2.5% !important;
object-fit:contain !important;
filter:drop-shadow(0 26px 22px #001f4b38) !important;
}
/* A arte principal já contém os cartões; evita duplicidade visual no desktop. */
.visual>.tile,.visual>.side-cards,.visual>.control{display:none !important;}
}
/* =========================================================
V14 — DESKTOP EXATAMENTE CONFORME IMAGEM APROVADA
Referência: desktop-home-aprovado-v1-20260907.png
Escopo: SOMENTE desktop (>1050px).
Tablet e smartphone V12/V13 permanecem inalterados.
========================================================= */
.desktop-approved-home{display:none;}
@media (min-width:1051px){
/* A primeira dobra do desktop é a própria composição visual aprovada. */
body{padding-top:0 !important;}
body > header{display:none !important;}
main#inicio > .hero,
main#inicio > .featurebar{display:none !important;}
.desktop-approved-home{
display:block !important;
position:relative;
width:100%;
max-width:none;
margin:0;
padding:0;
background:#fff;
overflow:hidden;
line-height:0;
}
.desktop-approved-home > img{
display:block;
width:100%;
height:auto;
margin:0;
padding:0;
user-select:none;
-webkit-user-drag:none;
}
.desktop-approved-home .hotspot{
position:absolute;
z-index:5;
display:block;
text-indent:-9999px;
overflow:hidden;
background:transparent;
border:0;
line-height:1;
}
/* Áreas clicáveis calibradas sobre a imagem 1536 x 1024. */
.desktop-approved-home .hs-logo{left:2.5%;top:1.5%;width:34%;height:13%;}
.desktop-approved-home .hs-inicio{left:45.7%;top:4.6%;width:5.3%;height:6.4%;}
.desktop-approved-home .hs-servicos{left:53.6%;top:4.6%;width:6.5%;height:6.4%;}
.desktop-approved-home .hs-seguranca{left:62.2%;top:4.6%;width:7.5%;height:6.4%;}
.desktop-approved-home .hs-contato{left:72.2%;top:4.6%;width:6.5%;height:6.4%;}
.desktop-approved-home .hs-login{left:83.6%;top:4.0%;width:13.2%;height:8.4%;}
.desktop-approved-home .hs-entrar{left:3.4%;top:63.4%;width:20.4%;height:8.4%;}
.desktop-approved-home .hs-conheca{left:24.6%;top:63.1%;width:18.5%;height:8.8%;}
/* As âncoras seguintes começam abaixo da primeira dobra aprovada. */
#seguranca,#contato,#como,#funcionalidades{scroll-margin-top:20px !important;}
}
/* =========================================================
V15 — AJUSTES EXCLUSIVOS DO DESKTOP
- Menu sem "Serviços"
- Frase do rodapé alinhada
Smartphone e tablet permanecem V14.
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .hs-inicio{left:46.7% !important;top:4.6% !important;width:5.5% !important;height:6.4% !important;}
.desktop-approved-home .hs-seguranca{left:55.4% !important;top:4.6% !important;width:8.0% !important;height:6.4% !important;}
.desktop-approved-home .hs-contato{left:65.5% !important;top:4.6% !important;width:7.0% !important;height:6.4% !important;}
.footer-message{
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.footer-message p{
max-width:560px !important;
margin:0 auto !important;
line-height:1.28 !important;
text-wrap:balance;
}
}
/* =========================================================
V16 — AJUSTES EXCLUSIVOS DO DESKTOP
- Cabeçalho/logomarca fixos ao rolar
- Frase do rodapé com alinhamento justificado
Smartphone e tablet permanecem como na V15/V14.
========================================================= */
@media (min-width:1051px){
/* Mantém o cabeçalho completo visível durante a rolagem */
.desktop-approved-home{
position:relative;
}
.desktop-approved-home .desktop-approved-image{
display:block;
}
/* Cria uma faixa fixa sobre a área do cabeçalho da composição desktop */
.desktop-approved-home::before{
content:"";
position:fixed;
top:0;
left:0;
right:0;
height:164px;
background:#fff;
z-index:980;
box-shadow:0 2px 14px rgba(14,50,95,.08);
pointer-events:none;
}
/* Reexibe somente a faixa superior da arte aprovada sobre o fundo fixo */
.desktop-approved-home::after{
content:"";
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
width:min(100vw,1600px);
height:164px;
background-image:url("../images/desktop-home-aprovado-sem-servicos-v2-20260907.png");
background-repeat:no-repeat;
background-position:top center;
background-size:1600px auto;
z-index:981;
pointer-events:none;
}
/* Hotspots de navegação do topo ficam funcionais sobre a faixa fixa */
.desktop-approved-home .hs-inicio,
.desktop-approved-home .hs-seguranca,
.desktop-approved-home .hs-contato,
.desktop-approved-home .hs-login{
position:fixed !important;
z-index:990 !important;
}
.desktop-approved-home .hs-inicio{
left:calc(50% - 53px) !important;
top:74px !important;
width:88px !important;
height:42px !important;
}
.desktop-approved-home .hs-seguranca{
left:calc(50% + 82px) !important;
top:74px !important;
width:128px !important;
height:42px !important;
}
.desktop-approved-home .hs-contato{
left:calc(50% + 240px) !important;
top:74px !important;
width:110px !important;
height:42px !important;
}
.desktop-approved-home .hs-login{
right:4.4vw !important;
left:auto !important;
top:47px !important;
width:155px !important;
height:72px !important;
}
/* Frase do rodapé: bloco alinhado e justificado */
.footer-message{
display:block !important;
text-align:left !important;
}
.footer-message p{
max-width:520px !important;
width:100% !important;
margin:0 !important;
line-height:1.34 !important;
text-align:justify !important;
text-justify:inter-word !important;
}
.footer-message p strong{
white-space:normal !important;
}
}
/* =========================================================
V17 — REFINAMENTO EXCLUSIVO DO DESKTOP
- Login reposicionado dentro da grade visual
- Rodapé sem espaçamento artificial entre palavras
- Hero enquadrado, com respiro lateral
- Menor vazio entre as seções
Smartphone e tablet permanecem inalterados.
========================================================= */
@media (min-width:1051px){
:root{
--desktop-frame:min(1536px,94vw);
--desktop-header-h:min(164px,10vw);
}
/* Enquadra a primeira dobra em vez de deixá-la correr de ponta a ponta. */
.desktop-approved-home{
width:var(--desktop-frame) !important;
max-width:1536px !important;
margin:0 auto !important;
overflow:hidden !important;
background:#fff !important;
border-radius:0 0 22px 22px !important;
box-shadow:0 18px 44px rgba(0,36,91,.055) !important;
}
.desktop-approved-home > img{
width:100% !important;
height:auto !important;
}
/* Cabeçalho fixo: fundo integral + arte aprovada centralizada na mesma grade do Hero. */
.desktop-approved-home::before{
height:var(--desktop-header-h) !important;
background:#fff !important;
box-shadow:0 3px 18px rgba(0,36,91,.09) !important;
}
.desktop-approved-home::after{
width:var(--desktop-frame) !important;
height:var(--desktop-header-h) !important;
background-size:100% auto !important;
background-position:top center !important;
}
/* Menus e Login acompanham a composição centralizada do cabeçalho. */
.desktop-approved-home .hs-inicio{
left:47.0vw !important;
top:min(78px,4.8vw) !important;
width:74px !important;
height:40px !important;
}
.desktop-approved-home .hs-seguranca{
left:54.7vw !important;
top:min(78px,4.8vw) !important;
width:118px !important;
height:40px !important;
}
.desktop-approved-home .hs-contato{
left:65.3vw !important;
top:min(78px,4.8vw) !important;
width:96px !important;
height:40px !important;
}
.desktop-approved-home .hs-login{
left:auto !important;
right:calc(max(3vw, (100vw - 1536px)/2) + 3.1vw) !important;
top:min(48px,3vw) !important;
width:min(184px,12vw) !important;
height:min(72px,4.7vw) !important;
}
/* Frase institucional: alinhamento à esquerda e quebra natural.
Evita o efeito de palavras excessivamente espaçadas do justify. */
.footer-message{
display:block !important;
text-align:left !important;
}
.footer-message p{
max-width:455px !important;
width:100% !important;
margin:0 !important;
line-height:1.38 !important;
text-align:left !important;
text-justify:auto !important;
text-wrap:pretty !important;
}
.footer-message p br{display:none !important;}
/* Aproxima as seções para uma passagem visual mais contínua. */
.dark#seguranca{
padding:48px 0 !important;
margin-top:0 !important;
}
.how{
padding:64px 0 68px !important;
}
.how .steps{
margin-top:32px !important;
}
.contact{
padding:64px 0 !important;
}
.footer-main{
padding-top:28px !important;
padding-bottom:28px !important;
}
#seguranca,#contato,#como,#funcionalidades{
scroll-margin-top:calc(var(--desktop-header-h) + 14px) !important;
}
}
/* =========================================================
V18 — ACABAMENTO EXCLUSIVO DO DESKTOP
- Suavização azul-clara na borda esquerda do Hero
- Menor espaço branco entre a primeira dobra e Segurança
- Contato posiciona o bloco FALE CONOSCO + WhatsApp
Mantém smartphone e tablet inalterados.
========================================================= */
@media (min-width:1051px){
/* Recorta somente a sobra branca inferior da arte aprovada,
preservando integralmente benefícios e composição principal. */
.desktop-approved-home{
aspect-ratio:1536 / 982 !important;
height:auto !important;
}
.desktop-approved-home > img{
position:relative !important;
z-index:1 !important;
}
/* Degradê extremamente suave na extremidade esquerda do Hero.
Não encobre o conteúdo; apenas fecha visualmente a borda. */
.desktop-approved-home .hero-left-gradient{
display:block !important;
position:absolute !important;
z-index:3 !important;
pointer-events:none !important;
left:0 !important;
top:16% !important;
bottom:8.5% !important;
width:7.2% !important;
background:linear-gradient(90deg,
rgba(220,241,255,.62) 0%,
rgba(235,248,255,.34) 42%,
rgba(246,252,255,.12) 72%,
rgba(255,255,255,0) 100%) !important;
}
/* Hotspots continuam acima do acabamento visual. */
.desktop-approved-home .hotspot{z-index:6 !important;}
.desktop-approved-home .hs-inicio,
.desktop-approved-home .hs-seguranca,
.desktop-approved-home .hs-contato,
.desktop-approved-home .hs-login{z-index:990 !important;}
/* Aproxima ainda mais as transições sem comprimir o conteúdo interno. */
.dark#seguranca{
padding:38px 0 !important;
}
.how{
padding:50px 0 54px !important;
}
.how .steps{
margin-top:24px !important;
}
.contact{
padding:50px 0 52px !important;
}
/* O menu Contato cai no início do bloco, deixando FALE CONOSCO e
o botão do WhatsApp simultaneamente visíveis abaixo do cabeçalho fixo. */
#contato{
scroll-margin-top:calc(var(--desktop-header-h) + 18px) !important;
}
#whatsapp-contato{
scroll-margin-top:calc(var(--desktop-header-h) + 138px) !important;
}
}
/* =========================================================
V19 — REFINOS EXCLUSIVOS DO DESKTOP
- Início retorna ao topo absoluto
- Login mais próximo do conjunto de menus
- Contato enquadra FALE CONOSCO + WhatsApp completos
- Degradê azul levemente mais presente
Smartphone e tablet permanecem inalterados.
========================================================= */
@media (min-width:1051px){
/* Login ligeiramente mais à esquerda, mantendo respiro e equilíbrio. */
.desktop-approved-home .hs-login{
right:calc(max(3vw, (100vw - 1536px)/2) + 5.0vw) !important;
}
/* Degradê com um pouco mais de presença, ainda suave. */
.desktop-approved-home .hero-left-gradient{
width:8.2% !important;
background:linear-gradient(90deg,
rgba(195,228,250,.78) 0%,
rgba(218,239,253,.52) 40%,
rgba(239,249,255,.22) 72%,
rgba(255,255,255,0) 100%) !important;
}
/* Mantém a seção de contato compacta e com o botão totalmente visível. */
.contact{
padding:44px 0 46px !important;
}
#contato{
scroll-margin-top:calc(var(--desktop-header-h) + 12px) !important;
}
}
/* =========================================================
V20 — AJUSTE ÚNICO DO DESKTOP
- Degradê do Hero em intensidade intermediária entre V18 e V19
- Nenhum outro elemento foi alterado.
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .hero-left-gradient{
width:7.7% !important;
background:linear-gradient(90deg,
rgba(208,235,252,.70) 0%,
rgba(227,244,254,.43) 40%,
rgba(243,250,255,.17) 72%,
rgba(255,255,255,0) 100%) !important;
}
}
/* =========================================================
V21 — EFEITO DE INFINITUDE NO HERO (SOMENTE DESKTOP)
Preserva todo o restante da V20.
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
overflow:visible !important;
}
/* Dissolve suavemente as extremidades do Hero no fundo da página */
.desktop-approved-home .hero-infinity-fade{
display:none;
}
.desktop-approved-home::marker{
display:none;
}
/* Fade lateral esquerdo */
.desktop-approved-home .hotspot.hs-logo::before{
content:"";
position:fixed;
pointer-events:none;
}
.desktop-approved-home{
--hero-fade-width: 11vw;
}
.desktop-approved-home > img{
-webkit-mask-image:
linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.35) 3%,
rgba(0,0,0,.82) 7%,
rgba(0,0,0,1) 12%,
rgba(0,0,0,1) 88%,
rgba(0,0,0,.82) 93%,
rgba(0,0,0,.35) 97%,
rgba(0,0,0,0) 100%
);
mask-image:
linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.35) 3%,
rgba(0,0,0,.82) 7%,
rgba(0,0,0,1) 12%,
rgba(0,0,0,1) 88%,
rgba(0,0,0,.82) 93%,
rgba(0,0,0,.35) 97%,
rgba(0,0,0,0) 100%
);
}
/* Fundo branco para o fade "sumir" naturalmente nas bordas */
.desktop-approved-home{
background:#fff !important;
}
/* Mantém o cabeçalho fixo sem sofrer o fade */
.desktop-approved-home::after{
-webkit-mask-image:none !important;
mask-image:none !important;
}
}
/* =========================================================
V22 — CORREÇÃO DO EFEITO DE INFINITUDE (SOMENTE DESKTOP)
- Remove a máscara lateral da V21
- Aplica uma camada azul-clara independente na lateral esquerda
- Preserva o lado direito e todo o restante do site
========================================================= */
@media (min-width:1051px){
/* Neutraliza a máscara da V21 */
.desktop-approved-home > img{
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* Mantém a composição como referência para a sobreposição */
.desktop-approved-home{
position:relative !important;
overflow:hidden !important;
background:#fff !important;
}
/* Camada de "infinitude" azul-clara apenas na lateral esquerda do Hero */
.desktop-approved-home .left-infinity-overlay{
display:none !important;
}
.desktop-approved-home::before{
content:"";
position:absolute !important;
top:164px !important; /* abaixo do cabeçalho fixo */
left:0 !important;
width:18vw !important;
min-width:170px !important;
max-width:330px !important;
height:calc(100% - 164px) !important;
z-index:4 !important;
pointer-events:none !important;
background:
linear-gradient(
to right,
rgba(212,232,250,.78) 0%,
rgba(220,237,251,.62) 18%,
rgba(232,244,253,.42) 42%,
rgba(244,249,254,.20) 68%,
rgba(255,255,255,0) 100%
) !important;
box-shadow:none !important;
}
/* Cabeçalho fixo permanece acima da sobreposição */
.desktop-approved-home::after{
z-index:981 !important;
}
.desktop-approved-home .hotspot{
z-index:990 !important;
}
}
/* =========================================================
V23 — HERO APROVADO: AZUL-NEVOA MUITO CLARO (DESKTOP)
Neutraliza V21/V22 e preserva todos os demais ajustes.
========================================================= */
@media (min-width:1051px){
/* Sem máscara escura ou dissolução agressiva */
.desktop-approved-home > img{
-webkit-mask-image:none !important;
mask-image:none !important;
}
.desktop-approved-home{
position:relative !important;
overflow:hidden !important;
background:#fff !important;
}
/*
Sobreposição branca/translúcida sobre a faixa do Hero:
clareia o azul existente sem apagar computador, texto e ondas.
A presença azul fica apenas como uma névoa muito suave.
*/
.desktop-approved-home::before{
content:"" !important;
position:absolute !important;
top:164px !important;
left:0 !important;
right:0 !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
height:calc(100% - 164px) !important;
z-index:4 !important;
pointer-events:none !important;
background:
linear-gradient(
90deg,
rgba(255,255,255,.78) 0%,
rgba(255,255,255,.64) 9%,
rgba(255,255,255,.34) 24%,
rgba(255,255,255,.10) 43%,
rgba(255,255,255,.08) 70%,
rgba(255,255,255,.36) 88%,
rgba(255,255,255,.72) 100%
) !important;
box-shadow:none !important;
}
/* Mantém textos/botões clicáveis e cabeçalho fixo acima da névoa */
.desktop-approved-home::after{
z-index:981 !important;
}
.desktop-approved-home .hotspot{
z-index:990 !important;
}
}
/* =========================================================
V24 — HERO SEM AZUL ADICIONAL (SOMENTE DESKTOP)
Remove completamente máscaras, névoas e degradês adicionados
nas versões V18–V23. Preserva a arte original e todo o restante.
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
background:#fff !important;
}
.desktop-approved-home > img{
-webkit-mask-image:none !important;
mask-image:none !important;
filter:none !important;
}
/* Elimina qualquer camada de degradê/névoa sobre o Hero */
.desktop-approved-home::before{
content:none !important;
display:none !important;
background:none !important;
}
/* Mantém somente o cabeçalho fixo já aprovado */
.desktop-approved-home::after{
-webkit-mask-image:none !important;
mask-image:none !important;
}
}
/* =========================================================
V25 — HERO FULL-BLEED / EFEITO DE INFINITUDE (DESKTOP)
- Amplia a primeira composição até as bordas da viewport
- Não adiciona degradê ou névoa azul
- Preserva smartphone e tablet
========================================================= */
@media (min-width:1051px){
:root{
--desktop-frame:100vw !important;
}
/* A primeira dobra deixa de parecer uma caixa centralizada e passa
a ocupar toda a largura da tela, como a seção Segurança. */
.desktop-approved-home{
width:100vw !important;
max-width:none !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
border-radius:0 !important;
box-shadow:none !important;
background:#fff !important;
overflow:hidden !important;
}
.desktop-approved-home > img{
display:block !important;
width:100vw !important;
max-width:none !important;
height:auto !important;
margin:0 !important;
-webkit-mask-image:none !important;
mask-image:none !important;
filter:none !important;
}
/* Remove definitivamente o antigo degradê lateral das V18–V20. */
.desktop-approved-home .hero-left-gradient{
display:none !important;
background:none !important;
}
/* O cabeçalho fixo acompanha a mesma largura total da composição. */
.desktop-approved-home::after{
width:100vw !important;
max-width:none !important;
background-size:100vw auto !important;
background-position:top center !important;
}
/* Mantém o Login na posição harmonizada já aprovada. */
.desktop-approved-home .hs-login{
right:5vw !important;
}
}
/* =========================================================
V26 — RESPIRO ENTRE CABEÇALHO E HERO (SOMENTE DESKTOP)
Pequeno aumento de espaçamento, preservando a V25.
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
padding-top:18px !important;
box-sizing:border-box !important;
}
/* Cabeçalho fixo permanece no topo, sem alteração */
.desktop-approved-home::after{
top:0 !important;
}
}
/* =========================================================
V27 — CORREÇÃO DO RESPIRO SEM DUPLICAR A LOGOMARCA
SOMENTE DESKTOP
- Mantém o espaçamento aprovado entre cabeçalho e Hero
- Remove o deslocamento da imagem que revelava parte da logo original
- Cria o respiro com uma faixa branca independente
========================================================= */
@media (min-width:1051px){
/* A imagem volta à posição original: nada do cabeçalho interno vaza para baixo */
.desktop-approved-home{
padding-top:0 !important;
position:relative !important;
}
/* O respiro é criado sem mover a imagem inteira */
.desktop-approved-home::before{
content:"" !important;
display:block !important;
position:absolute !important;
top:164px !important;
left:0 !important;
right:0 !important;
width:100% !important;
height:18px !important;
min-width:0 !important;
max-width:none !important;
background:#fff !important;
z-index:7 !important;
pointer-events:none !important;
box-shadow:none !important;
}
/* Cabeçalho fixo permanece exatamente como aprovado */
.desktop-approved-home::after{
top:0 !important;
z-index:981 !important;
}
.desktop-approved-home .hotspot{
z-index:990 !important;
}
}
/* =========================================================
V28 — LOGOMARCA +10% NO CABEÇALHO (SOMENTE DESKTOP)
- Preserva integralmente a V27
- Amplia apenas a área visual da marca
- Mantém menu, Login, altura do cabeçalho e respiro do Hero
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-enlarged{
display:block !important;
position:fixed !important;
top:0 !important;
left:0 !important;
width:39vw !important;
max-width:690px !important;
height:var(--desktop-header-h) !important;
z-index:985 !important;
pointer-events:none !important;
overflow:hidden !important;
background:#fff url("../images/desktop-home-aprovado-sem-servicos-v2-20260907.png") top left / 110vw auto no-repeat !important;
}
}
/* =========================================================
V29 — CORREÇÃO DO RECORTE DA LOGOMARCA DESKTOP
- Mantém o aumento de aproximadamente 10% da V28
- Amplia somente a janela de exibição da marca para não cortar "XML"
- Não altera menu, Login, Hero, smartphone ou tablet
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-enlarged{
width:44vw !important;
max-width:760px !important;
}
}
/* =========================================================
V30 — LOGOMARCA DESKTOP MAIOR SEM RECORTE INFERIOR
- Mantém o tamanho aprovado da V29
- Aumenta somente a altura da janela da logomarca
- Preserva menu, Login, Hero, espaçamento, tablet e smartphone
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-enlarged{
height:calc(var(--desktop-header-h) + 24px) !important;
overflow:hidden !important;
}
}
/* =========================================================
V34 — LOGO V30 PRESERVADA / LINHA ORIGINAL ATRÁS DA MARCA
Base: V30
- Não cria nenhuma linha nova
- A linha original permanece a única linha
- Remove o fundo branco da camada ampliada da logo
- Apaga a logo pequena original somente ACIMA da linha
- A logo ampliada fica acima da linha, sem ser atravessada
========================================================= */
@media (min-width:1051px){
/* Apaga a marca original da arte do cabeçalho, mas termina
imediatamente antes da linha original da composição. */
.desktop-approved-home .desktop-logo-original-mask{
display:block !important;
position:fixed !important;
top:0 !important;
left:0 !important;
width:44vw !important;
max-width:760px !important;
height:calc(10.612vw - 2px) !important;
background:#fff !important;
z-index:984 !important;
pointer-events:none !important;
}
/* A mesma marca da V30 passa a ser uma imagem transparente:
a linha original fica atrás dela e não corta a logomarca. */
.desktop-approved-home .desktop-logo-enlarged{
display:block !important;
position:fixed !important;
top:0 !important;
left:0 !important;
width:44vw !important;
max-width:760px !important;
height:calc(var(--desktop-header-h) + 24px) !important;
background-color:transparent !important;
background-image:url("../images/logo-desktop-v30-transparente-v34.png") !important;
background-repeat:no-repeat !important;
background-position:top left !important;
background-size:auto 100% !important;
z-index:985 !important;
pointer-events:none !important;
overflow:visible !important;
}
}
/* =========================================================
V35 — LOGOMARCA DO RODAPÉ COM SLOGAN MAIS NÍTIDO
- Mantém integralmente a V34 aprovada
- Troca somente a arte do rodapé pela versão "destaque"
- Sem filtros, sem redução de opacidade e sem alteração do cabeçalho
========================================================= */
.footer-brand img{
filter:none !important;
opacity:1 !important;
image-rendering:auto !important;
}
/* =========================================================
V36 — SEGUNDA SEÇÃO: NOVA MENSAGEM + ALINHAMENTO
- Substitui somente a frase duplicada da seção Segurança
- Mantém a V35 integralmente no restante do site
========================================================= */
@media (min-width:1051px){
#seguranca.dark .dark-grid > h2{
margin:0 !important;
width:100% !important;
max-width:620px !important;
text-align:left !important;
align-self:center !important;
}
}
/* =========================================================
V37 — CABEÇALHO REFINADO (SOMENTE DESKTOP)
Base: V36
- Usa a logo fornecida pelo usuário, sem esticar
- Desce discretamente a linha inferior
- Move Início / Segurança / Contato um pouco para a direita
- Login, Hero, rodapé, tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
/* Oculta somente a arte antiga da marca no cabeçalho fixo. */
.desktop-approved-home .desktop-logo-original-mask{
display:block !important;
position:fixed !important;
top:0 !important;
left:0 !important;
width:610px !important;
max-width:44vw !important;
height:150px !important;
background:#fff !important;
z-index:984 !important;
pointer-events:none !important;
}
/* Logo publicada: proporção original preservada (sem deformação). */
.desktop-approved-home .desktop-logo-enlarged{
display:block !important;
position:fixed !important;
top:14px !important;
left:34px !important;
width:min(535px,39vw) !important;
height:132px !important;
background:#fff url("../images/logo-principal-publicada-v37.png") center left / contain no-repeat !important;
z-index:985 !important;
pointer-events:none !important;
overflow:visible !important;
}
/* Apaga apenas os textos antigos do menu que estão incorporados à imagem. */
.desktop-approved-home .desktop-nav-original-mask{
display:block !important;
position:fixed !important;
top:38px !important;
left:44vw !important;
width:31vw !important;
height:94px !important;
background:#fff !important;
z-index:984 !important;
pointer-events:none !important;
}
/* Faixa branca cobre a linha antiga; a borda inferior é a única linha visível,
agora alguns pixels mais abaixo e atrás da logo. */
.desktop-approved-home .desktop-header-line-lowered{
display:block !important;
position:fixed !important;
top:134px !important;
left:0 !important;
right:0 !important;
height:38px !important;
background:#fff !important;
border-bottom:1px solid rgba(177,220,245,.72) !important;
z-index:983 !important;
pointer-events:none !important;
}
/* Os próprios hotspots passam a exibir os textos, ligeiramente à direita. */
.desktop-approved-home .hs-inicio,
.desktop-approved-home .hs-seguranca,
.desktop-approved-home .hs-contato{
text-indent:0 !important;
overflow:visible !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
top:61px !important;
height:48px !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:18px !important;
font-weight:700 !important;
color:#002b6f !important;
text-decoration:none !important;
background:transparent !important;
z-index:990 !important;
}
.desktop-approved-home .hs-inicio{
left:49.0vw !important;
width:82px !important;
color:#00aa91 !important;
}
.desktop-approved-home .hs-inicio::after{
content:"" !important;
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:2px !important;
height:3px !important;
border-radius:3px !important;
background:#00aa91 !important;
}
.desktop-approved-home .hs-seguranca{
left:57.7vw !important;
width:122px !important;
}
.desktop-approved-home .hs-contato{
left:68.1vw !important;
width:102px !important;
}
}
/* =========================================================
V38 — CABEÇALHO DESKTOP: LOGO MAIS PRESENTE
Base: V37
- Aumenta significativamente a logo, preservando proporção
- Mantém a linha suave um pouco mais baixa
- Mantém Início / Segurança / Contato deslocados à direita
- Login, Hero, rodapé, tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-original-mask{
width:720px !important;
max-width:49vw !important;
height:164px !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:6px !important;
left:24px !important;
width:min(665px,45.5vw) !important;
height:150px !important;
background-size:contain !important;
background-position:left center !important;
}
.desktop-approved-home .desktop-header-line-lowered{
top:142px !important;
height:36px !important;
}
.desktop-approved-home .desktop-nav-original-mask{
left:47vw !important;
width:30vw !important;
}
.desktop-approved-home .hs-inicio{
left:51.2vw !important;
}
.desktop-approved-home .hs-seguranca{
left:59.9vw !important;
}
.desktop-approved-home .hs-contato{
left:70.2vw !important;
}
}
/* =========================================================
V39 — LOGO DESKTOP DIMENSIONADA PELA LARGURA REAL
Base: V38
- Remove a limitação de altura que reduzia a logo
- Preserva a proporção original da imagem enviada
- Mantém linha inferior mais baixa
- Mantém menus deslocados à direita
- Login, Hero, rodapé, tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-original-mask{
width:min(820px,53vw) !important;
height:176px !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:5px !important;
left:24px !important;
/* O tamanho passa a ser controlado pela largura.
A altura não limita mais a renderização da imagem. */
width:min(760px,49.5vw) !important;
height:160px !important;
background-image:url("../images/logo-principal-publicada-v37.png") !important;
background-repeat:no-repeat !important;
background-position:left center !important;
background-size:100% auto !important;
overflow:visible !important;
}
/* Linha suave ligeiramente abaixo da composição da marca. */
.desktop-approved-home .desktop-header-line-lowered{
top:150px !important;
height:32px !important;
}
/* Mantém a navegação mais à direita, como solicitado. */
.desktop-approved-home .desktop-nav-original-mask{
left:49vw !important;
width:29vw !important;
}
.desktop-approved-home .hs-inicio{
left:52.5vw !important;
}
.desktop-approved-home .hs-seguranca{
left:61.0vw !important;
}
.desktop-approved-home .hs-contato{
left:71.0vw !important;
}
}
/* =========================================================
V41 — CORREÇÃO DEFINITIVA DO CABEÇALHO DESKTOP
Base limpa: V39
- Remove o fundo branco retangular da imagem da logo
- Mantém a logo grande
- Mostra integralmente o topo da nuvem
- Não invade nem cobre o Hero
- Tablet e smartphone permanecem inalterados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-original-mask{
width:min(820px,53vw) !important;
height:160px !important;
background:#fff !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:0 !important;
left:24px !important;
width:min(760px,49.5vw) !important;
height:160px !important;
background-color:transparent !important;
background-image:url("../images/logo-desktop-v41-sem-fundo.png") !important;
background-repeat:no-repeat !important;
background-position:left top !important;
background-size:100% auto !important;
overflow:hidden !important;
}
.desktop-approved-home .desktop-header-line-lowered{
top:150px !important;
height:32px !important;
}
}
/* =========================================================
V42 — CORREÇÃO DO CORTE INFERIOR DA LOGO (DESKTOP)
Base: V41
- Mantém o mesmo tamanho visual horizontal aprovado
- Usa a mesma logo, apenas sem margens transparentes excedentes
- Exibe integralmente ícone e slogan
- Não cria fundo branco sobre o Hero
- Menus, linha, Hero, tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home .desktop-logo-enlarged{
top:10px !important;
left:24px !important;
width:min(760px,49.5vw) !important;
height:150px !important;
background-color:transparent !important;
background-image:url("../images/logo-desktop-v42-recortada.png") !important;
background-repeat:no-repeat !important;
background-position:left center !important;
background-size:100% auto !important;
overflow:visible !important;
}
}
/* =========================================================
V43 — MAIS ESPAÇO ENTRE CABEÇALHO E HERO (DESKTOP)
Base: V42
- Mantém a logo no tamanho atual
- Aumenta a altura útil do cabeçalho
- Desce a linha divisória
- Empurra o Hero para baixo
- Menus, Login, tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
padding-top:26px !important;
}
.desktop-approved-home::before{
top:176px !important;
height:26px !important;
background:#fff !important;
z-index:7 !important;
}
.desktop-approved-home .desktop-header-line-lowered{
top:176px !important;
height:26px !important;
background:#fff !important;
border-bottom:1px solid rgba(177,220,245,.72) !important;
}
.desktop-approved-home .desktop-logo-original-mask{
height:176px !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:6px !important;
height:164px !important;
background-position:left center !important;
overflow:visible !important;
}
}
/* =========================================================
V44 — ESPAÇO VERTICAL SUFICIENTE PARA A LOGO (DESKTOP)
Base: V43
- Mantém a largura/tamanho visual da logo
- Aumenta a área vertical real da imagem para exibir topo,
ícone e slogan completos
- Aumenta a altura do cabeçalho e afasta o Hero
- Menus, Login, tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
padding-top:64px !important;
}
.desktop-approved-home::before{
top:214px !important;
height:28px !important;
background:#fff !important;
z-index:7 !important;
}
.desktop-approved-home .desktop-header-line-lowered{
top:214px !important;
height:28px !important;
background:#fff !important;
border-bottom:1px solid rgba(177,220,245,.72) !important;
}
.desktop-approved-home .desktop-logo-original-mask{
height:214px !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:4px !important;
left:24px !important;
width:min(760px,49.5vw) !important;
height:204px !important;
background-position:left top !important;
background-size:100% auto !important;
overflow:visible !important;
}
}
/* =========================================================
V45 — CORREÇÃO DA DUPLICAÇÃO DO CABEÇALHO (DESKTOP)
Base: V44
- Não desloca mais a imagem inteira com padding
- O cabeçalho incorporado à imagem permanece no topo
- O Hero é que foi deslocado para baixo dentro de uma nova imagem
- Mantém a logo grande e inteira
- Elimina a duplicação de menu e Login
- Tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
/* Essencial: impede que o cabeçalho original da imagem desça e reapareça. */
.desktop-approved-home{
padding-top:0 !important;
}
/* Faixa de respiro real entre cabeçalho e Hero, sem mover o cabeçalho. */
.desktop-approved-home::before{
top:164px !important;
height:64px !important;
left:0 !important;
right:0 !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
background:#fff !important;
z-index:7 !important;
}
/* Linha inferior acompanha o novo limite do cabeçalho/respiro. */
.desktop-approved-home .desktop-header-line-lowered{
top:210px !important;
height:18px !important;
background:#fff !important;
border-bottom:1px solid rgba(177,220,245,.72) !important;
}
/* Mantém a área de proteção da marca sem invadir o Hero. */
.desktop-approved-home .desktop-logo-original-mask{
height:210px !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:4px !important;
left:24px !important;
width:min(760px,49.5vw) !important;
height:204px !important;
background-position:left top !important;
background-size:100% auto !important;
overflow:visible !important;
}
/* Os botões do Hero acompanham o deslocamento visual de 64px. */
.desktop-approved-home .hs-entrar{
top:69.65% !important;
}
.desktop-approved-home .hs-conheca{
top:69.35% !important;
}
}
/* =========================================================
V46 — CABEÇALHO FIXO ISOLADO DO HERO (DESKTOP)
Base: V45
- O cabeçalho fixo usa uma imagem própria, sem qualquer pedaço do Hero
- Elimina o vazamento de imagens durante a rolagem
- Dá margem superior real à nuvem da logo
- Mantém a logo grande e integral
- Mantém menus e Login
- Tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
/* O cabeçalho fixo deixa de usar a imagem completa da página. */
.desktop-approved-home::after{
content:"" !important;
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
transform:none !important;
width:100vw !important;
max-width:none !important;
height:220px !important;
background-color:#fff !important;
background-image:url("../images/desktop-header-v46-sem-vazamento-hero.png") !important;
background-repeat:no-repeat !important;
background-position:top center !important;
background-size:100vw auto !important;
z-index:981 !important;
pointer-events:none !important;
box-shadow:0 2px 14px rgba(14,50,95,.06) !important;
}
/* Mantém o respiro entre o cabeçalho e o Hero sem mover a imagem toda. */
.desktop-approved-home{
padding-top:0 !important;
}
.desktop-approved-home::before{
top:164px !important;
height:64px !important;
background:#fff !important;
}
/* Máscara apenas da logo pequena original incorporada ao cabeçalho. */
.desktop-approved-home .desktop-logo-original-mask{
display:block !important;
position:fixed !important;
top:0 !important;
left:0 !important;
width:min(820px,53vw) !important;
height:220px !important;
background:#fff !important;
z-index:984 !important;
pointer-events:none !important;
}
/* Logo grande: margem superior para a nuvem não tocar/cortar no topo. */
.desktop-approved-home .desktop-logo-enlarged{
display:block !important;
position:fixed !important;
top:12px !important;
left:24px !important;
width:min(760px,49.5vw) !important;
height:200px !important;
background-color:transparent !important;
background-image:url("../images/logo-desktop-v42-recortada.png") !important;
background-repeat:no-repeat !important;
background-position:left top !important;
background-size:100% auto !important;
overflow:visible !important;
z-index:985 !important;
pointer-events:none !important;
}
/* A linha fica no final do novo cabeçalho e atrás da marca. */
.desktop-approved-home .desktop-header-line-lowered{
display:block !important;
position:fixed !important;
top:202px !important;
left:0 !important;
right:0 !important;
height:18px !important;
background:#fff !important;
border-bottom:1px solid rgba(177,220,245,.72) !important;
z-index:983 !important;
pointer-events:none !important;
}
/* Continua apagando apenas os textos antigos do menu da imagem-base. */
.desktop-approved-home .desktop-nav-original-mask{
top:38px !important;
height:100px !important;
background:#fff !important;
z-index:984 !important;
}
/* Menus permanecem acima da faixa fixa. */
.desktop-approved-home .hs-inicio,
.desktop-approved-home .hs-seguranca,
.desktop-approved-home .hs-contato,
.desktop-approved-home .hs-login{
z-index:990 !important;
}
}
/* =========================================================
V47 — CORREÇÃO DO CORTE ABAIXO DO HERO (DESKTOP)
Base: V46
- Mantém o cabeçalho aprovado da V46
- A primeira dobra agora ganhou 64px reais de altura
- Nenhuma parte inferior do Hero/benefícios é descartada
- Elimina o corte visto antes da seção azul
- Tablet e smartphone preservados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
padding-top:0 !important;
overflow:hidden !important;
}
.desktop-approved-home > img{
display:block !important;
width:100% !important;
height:auto !important;
}
/* Reposiciona somente os hotspots do Hero para acompanhar
os 64px inseridos na imagem, sem alterar o cabeçalho. */
.desktop-approved-home .hs-entrar{
top:67.65% !important;
}
.desktop-approved-home .hs-conheca{
top:67.35% !important;
}
}
/* =========================================================
V48 — RESPIRO INFERIOR REAL DA PRIMEIRA DOBRA (DESKTOP)
Base: V47
- Cabeçalho V46/V47 preservado
- Hero e faixa de benefícios preservados integralmente
- Cria espaço branco real após a imagem, antes da seção Segurança
- Evita que a seção azul encoste/corte visualmente os benefícios
- Tablet e smartphone inalterados
========================================================= */
@media (min-width:1051px){
.desktop-approved-home{
padding-bottom:56px !important;
background:#fff !important;
overflow:visible !important;
}
.desktop-approved-home > img{
display:block !important;
width:100vw !important;
height:auto !important;
margin:0 !important;
}
.dark#seguranca{
margin-top:0 !important;
clear:both !important;
position:relative !important;
z-index:1 !important;
}
}
/* V49 — ajuste aprovado: menor respiro abaixo do Hero (desktop) */
@media (min-width:1051px){
.desktop-approved-home{
padding-bottom:30px !important;
}
}
/* V50 — ajuste fino: menor respiro abaixo do Hero (desktop) */
@media (min-width:1051px){
.desktop-approved-home{
padding-bottom:18px !important;
}
}
/* V51 — ajuste aprovado: respiro mínimo abaixo do Hero (desktop) */
@media (min-width:1051px){
.desktop-approved-home{
padding-bottom:6px !important;
}
}
/* V52 — remove somente a linha divisória do cabeçalho no desktop */
@media (min-width:1051px){
.desktop-approved-home .desktop-header-line-lowered{
border-bottom:0 !important;
box-shadow:none !important;
}
}
/* V53 — corrige fragmento "In" do menu original em 1920x1080 (desktop)
Amplia somente a máscara dos textos incorporados à imagem do cabeçalho.
Navegação recriada, logo, Login, Hero, tablet e mobile permanecem inalterados. */
@media (min-width:1051px){
.desktop-approved-home .desktop-nav-original-mask{
left:43vw !important;
width:35vw !important;
}
}
/* V54 — remove o pequeno traço verde remanescente do menu original em desktop
A máscara vertical é ampliada apenas o suficiente para cobrir o sublinhado
incorporado à imagem-base. O menu recriado permanece acima da máscara. */
@media (min-width:1051px){
.desktop-approved-home .desktop-nav-original-mask{
height:122px !important;
}
}
/* =========================================================
V55 — CORREÇÃO ESTRUTURAL DO CABEÇALHO DUPLICADO (DESKTOP)
- Remove a imagem de cabeçalho usada como camada fixa.
- O cabeçalho fixo passa a ser composto apenas por fundo branco,
logo real, navegação real e botão Login real.
- Impede que a imagem da primeira dobra ultrapasse o container
e volte a exibir o cabeçalho incorporado quando o zoom é reduzido.
- Elimina definitivamente os fragmentos verdes/"In" e a duplicação.
- Tablet e smartphone permanecem inalterados.
========================================================= */
@media (min-width:1051px){
/* A imagem-base não pode mais crescer além da largura do container
(1536px). Isso impede que o cabeçalho incorporado à arte fique
proporcionalmente mais alto que a faixa fixa quando há zoom-out. */
.desktop-approved-home > img{
width:100% !important;
max-width:1536px !important;
margin:0 auto !important;
}
/* Cabeçalho fixo sem nenhuma arte de fundo contendo logo/menu/Login. */
.desktop-approved-home::after{
background-image:none !important;
background-color:#fff !important;
background:#fff !important;
width:100vw !important;
max-width:none !important;
height:220px !important;
left:0 !important;
right:0 !important;
transform:none !important;
}
/* As máscaras antigas deixam de ser necessárias, pois não existe mais
conteúdo duplicado na camada fixa. */
.desktop-approved-home .desktop-logo-original-mask,
.desktop-approved-home .desktop-nav-original-mask{
display:none !important;
}
/* Mantém a logomarca aprovada como elemento independente. */
.desktop-approved-home .desktop-logo-enlarged{
display:block !important;
position:fixed !important;
top:12px !important;
left:max(24px, calc((100vw - 1536px)/2 + 24px)) !important;
width:min(535px,39vw) !important;
height:132px !important;
background:#fff url("../images/logo-principal-publicada-v37.png") left center / contain no-repeat !important;
z-index:985 !important;
pointer-events:none !important;
overflow:visible !important;
}
/* Navegação verdadeira, sem depender de texto incorporado em imagem. */
.desktop-approved-home .hs-inicio,
.desktop-approved-home .hs-seguranca,
.desktop-approved-home .hs-contato{
position:fixed !important;
top:61px !important;
height:48px !important;
text-indent:0 !important;
overflow:visible !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:18px !important;
font-weight:700 !important;
color:#002b6f !important;
text-decoration:none !important;
background:transparent !important;
z-index:990 !important;
}
.desktop-approved-home .hs-inicio{
left:calc(50% - 95px) !important;
width:82px !important;
color:#00aa91 !important;
}
.desktop-approved-home .hs-inicio::after{
content:"" !important;
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:2px !important;
height:3px !important;
border-radius:3px !important;
background:#00aa91 !important;
}
.desktop-approved-home .hs-seguranca{
left:calc(50% + 35px) !important;
width:122px !important;
}
.desktop-approved-home .hs-contato{
left:calc(50% + 200px) !important;
width:102px !important;
}
/* Botão Login real. Não existe mais Login incorporado a uma imagem. */
.desktop-approved-home .hs-login{
position:fixed !important;
top:46px !important;
right:max(28px, calc((100vw - 1536px)/2 + 28px)) !important;
left:auto !important;
width:176px !important;
height:66px !important;
padding:0 24px !important;
border-radius:14px !important;
background:linear-gradient(135deg,#00c98b,#009b9d) !important;
box-shadow:0 12px 28px rgba(0,169,141,.20) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:14px !important;
color:#fff !important;
text-decoration:none !important;
text-indent:0 !important;
overflow:visible !important;
z-index:990 !important;
}
.desktop-approved-home .hs-login b{
display:block !important;
font:700 21px/1 Arial, Helvetica, sans-serif !important;
color:#fff !important;
}
.desktop-approved-home .desktop-login-lock{
position:relative !important;
display:block !important;
width:20px !important;
height:17px !important;
border-radius:3px !important;
background:#fff !important;
flex:0 0 auto !important;
}
.desktop-approved-home .desktop-login-lock::before{
content:"" !important;
position:absolute !important;
left:4px !important;
top:-10px !important;
width:12px !important;
height:12px !important;
border:3px solid #fff !important;
border-bottom:0 !important;
border-radius:9px 9px 0 0 !important;
}
.desktop-approved-home .desktop-login-lock::after{
content:"" !important;
position:absolute !important;
left:9px !important;
top:6px !important;
width:3px !important;
height:6px !important;
border-radius:2px !important;
background:#00a89a !important;
}
}
/* =========================================================
V56 — LOGOMARCA DESKTOP COM MAIS PRESENÇA
Mantém a correção estrutural V55 e amplia somente a logo em
telas desktop largas, sem reintroduzir a arte duplicada.
========================================================= */
@media (min-width:1600px){
.desktop-approved-home .desktop-logo-enlarged{
top:8px !important;
width:620px !important;
height:148px !important;
}
}
/* =========================================================
V57 — LOGOMARCA DESKTOP SIGNIFICATIVAMENTE MAIOR
Mantém integralmente a correção estrutural V55/V56.
========================================================= */
@media (min-width:1200px){
.desktop-approved-home .desktop-logo-original-mask{
width:min(900px,58vw) !important;
height:220px !important;
}
.desktop-approved-home .desktop-logo-enlarged{
top:4px !important;
left:8px !important;
width:min(850px,55vw) !important;
height:210px !important;
background-size:100% auto !important;
}
}
@media (min-width:1600px){
.desktop-approved-home .desktop-logo-enlarged{
top:2px !important;
left:8px !important;
width:850px !important;
height:215px !important;
}
}
/* =========================================================
V58 — NAVEGAÇÃO DESLOCADA À DIREITA APÓS AMPLIAÇÃO DA LOGO
- Mantém o tamanho aprovado da logomarca V57.
- Reposiciona Início, Segurança e Contato para fora da área da logo.
- Preserva o botão Login e a correção do cabeçalho duplicado.
========================================================= */
@media (min-width:1400px){
.desktop-approved-home .hs-inicio{
left:calc(55vw + 22px) !important;
width:82px !important;
}
.desktop-approved-home .hs-seguranca{
left:calc(55vw + 130px) !important;
width:122px !important;
}
.desktop-approved-home .hs-contato{
left:calc(55vw + 278px) !important;
width:102px !important;
}
}
/* Em desktops intermediários, mantém a mesma lógica com espaçamento
mais compacto para preservar distância segura do botão Login. */
@media (min-width:1200px) and (max-width:1399px){
.desktop-approved-home .hs-inicio{
left:calc(55vw + 12px) !important;
width:68px !important;
font-size:16px !important;
}
.desktop-approved-home .hs-seguranca{
left:calc(55vw + 86px) !important;
width:100px !important;
font-size:16px !important;
}
.desktop-approved-home .hs-contato{
left:calc(55vw + 192px) !important;
width:82px !important;
font-size:16px !important;
}
}