
:root{
  --navy:#061d45;--blue:#0754b8;--blue2:#0874df;--sky:#eaf4ff;
  --white:#fff;--text:#0c2449;--muted:#65738b;--line:#dce8f7;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.5}a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 5px 22px rgba(6,29,69,.06)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-size:22px;font-weight:900;color:var(--navy)}.brand span{font-weight:400}
.links{display:flex;align-items:center;gap:24px;font-size:14px}.links a:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:13px;padding:15px 23px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-weight:800;box-shadow:0 9px 24px rgba(7,84,184,.20);transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,84,184,.28)}.btn.outline{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.hero{overflow:hidden;background:linear-gradient(145deg,#0754b8 0%,#0754b8 46%,#0a69cf 100%);color:#fff;position:relative}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.03),transparent 45%,rgba(255,255,255,.08));pointer-events:none}
.hero-grid{min-height:650px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:18px;position:relative;z-index:2;padding:56px 0}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--blue);font-weight:800;border-radius:999px;padding:9px 14px;font-size:14px}
.hero h1{font-size:62px;line-height:.98;margin:18px 0 8px;letter-spacing:-2px}.only{font-size:19px;font-weight:800;margin:0 0 20px}.hero-copy{font-size:19px;max-width:590px;color:#e5efff}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero .btn{background:#fff;color:var(--blue)}.hero .btn.outline{color:#fff;border-color:#fff;background:transparent}
.trust{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;font-weight:700}.trust span{display:flex;gap:8px;align-items:center}
.car-side{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center}.car-side img{width:112%;max-width:700px;filter:drop-shadow(0 22px 24px rgba(0,0,0,.22));transform:translateY(10px)}
.car-message{position:absolute;top:30px;right:0;border-left:3px solid #fff;padding-left:18px;font-size:20px;line-height:1.25;max-width:210px}.car-message b{font-size:25px}
.quick-wrap{margin-top:-1px;background:#fff}.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:25px 0}.quick a{min-height:125px;border:1px solid var(--line);border-radius:17px;padding:19px;background:#fff;box-shadow:0 8px 26px rgba(6,29,69,.07);transition:.2s}.quick a:hover{transform:translateY(-4px);border-color:#9bc1ee}.qicon{font-size:26px;color:var(--blue)}.quick b{display:block;margin:9px 0 4px}.quick small{color:var(--muted)}
section{padding:78px 0}.head{text-align:center;max-width:760px;margin:0 auto 40px}.eyebrow{text-transform:uppercase;color:var(--blue2);font-weight:900;font-size:12px;letter-spacing:1.4px}.head h2{font-size:38px;line-height:1.12;margin:9px 0}.head p{color:var(--muted);font-size:17px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{border:1px solid var(--line);border-radius:19px;padding:27px;background:#fff;box-shadow:0 8px 28px rgba(6,29,69,.06);transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(6,29,69,.11)}.card p{color:var(--muted)}.card a{font-weight:800;color:var(--blue)}
.soft{background:#f5f9ff}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.num{font-size:31px;font-weight:900;color:#a9c8ee}
.safe{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.safe h2{font-size:39px;line-height:1.12}.safe p{color:var(--muted)}.safe-list{display:grid;gap:12px;margin-top:20px}.safe-item{padding:15px 16px;background:#f8fbff;border:1px solid var(--line);border-radius:13px}.safe-item b{color:var(--navy)}
.safe-box{background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;border-radius:24px;padding:36px;box-shadow:0 22px 55px rgba(6,29,69,.2)}.safe-box p{color:#d9e9ff}.safe-box .btn{background:#fff;color:var(--blue)}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}.quote p{color:var(--muted)}
.cta{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;text-align:center}.cta h2{font-size:39px;margin:0 0 10px}.cta p{color:#d8e8ff}.cta .btn{background:#fff;color:var(--blue)}
footer{background:#04142f;color:#c9d8ee;padding:48px 0 26px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}.foot h3{color:#fff}.foot a{display:block;margin:9px 0}.fine{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:19px;font-size:13px;color:#9fb1cb}
.float{position:fixed;right:18px;bottom:18px;z-index:60;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:14px 18px;border-radius:999px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.legal{max-width:900px;margin:auto;padding:65px 22px}.legal h1{color:var(--navy)}.legal h2{margin-top:28px}.legal p{color:#52617a}

/* Mobile version: designed to match the approved visual direction */
@media(max-width:820px){
 .wrap{width:min(100% - 28px,680px)}.nav{height:68px}.brand{font-size:21px}.links a:not(.topbtn){display:none}.topbtn{padding:11px 13px;font-size:12px}
 .hero{background:linear-gradient(155deg,#0754b8,#0874df)}.hero-grid{min-height:auto;display:flex;flex-direction:column;padding:27px 0 0;gap:0}
 .hero-copy-side{width:100%}.badge{font-size:13px;padding:8px 12px}.hero h1{font-size:48px;line-height:.98;letter-spacing:-1.5px;margin:18px 0 7px}.only{font-size:18px}.hero-copy{font-size:17px;max-width:420px}
 .actions{display:grid;grid-template-columns:1fr;margin-top:22px}.actions .btn{width:100%}.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;font-size:12px;margin-top:22px}.trust span{justify-content:center;text-align:center}
 .car-side{width:100%;height:285px;margin-top:-20px;overflow:hidden;align-items:flex-end}.car-side img{width:125%;max-width:610px;transform:translate(11%,35px)}.car-message{top:28px;right:5px;font-size:14px;max-width:145px}.car-message b{font-size:17px}
 .quick{grid-template-columns:1fr 1fr;padding:18px 0}.quick a{min-height:112px;padding:16px}.quick a:last-child{grid-column:1/-1}
 section{padding:58px 0}.head h2,.safe h2,.cta h2{font-size:31px}.services,.steps,.safe,.testimonials,.foot{grid-template-columns:1fr}.card{padding:22px}.float{right:12px;bottom:12px}
}
@media(max-width:420px){.hero h1{font-size:42px}.hero-copy{font-size:16px}.trust{font-size:11px}.car-side{height:250px}.quick{gap:10px}.quick a{padding:14px}.topbtn{display:none}}


/* ===== CORREÇÃO MOBILE FINAL ===== */
@media (max-width:820px){
  body{overflow-x:hidden}
  .wrap{width:calc(100% - 32px);max-width:680px}

  header{position:relative}
  .nav{height:72px}
  .brand{font-size:20px;white-space:nowrap}
  .links{gap:0}
  .links a:not(.topbtn){display:none}
  .topbtn{display:inline-flex!important;padding:11px 14px!important;font-size:12px!important;border-radius:12px!important}

  .hero{background:linear-gradient(150deg,#0754b8 0%,#0874df 100%)}
  .hero-grid{
    display:block;
    min-height:0;
    padding:30px 0 0;
  }
  .hero-copy-side{width:100%}
  .badge{
    font-size:12px;
    padding:8px 12px;
    margin-bottom:4px;
  }
  .hero h1{
    font-size:44px;
    line-height:1;
    letter-spacing:-1.2px;
    margin:18px 0 8px;
  }
  .only{font-size:17px;margin:0 0 17px}
  .hero-copy{
    font-size:16px;
    line-height:1.55;
    max-width:100%;
    margin:0;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:22px;
  }
  .actions .btn{
    width:100%;
    min-height:54px;
    font-size:16px;
    border-radius:14px;
  }

  /* Carro compacto, inteiro e sem cortar */
  .car-side{
    width:100%;
    height:270px;
    margin:12px 0 0;
    overflow:visible;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .car-side img{
    width:112%;
    max-width:520px;
    height:auto;
    object-fit:contain;
    transform:none;
    margin:0 auto -4px;
    filter:drop-shadow(0 18px 18px rgba(0,0,0,.22));
  }
  .car-message{
    top:15px;
    right:0;
    max-width:130px;
    font-size:12px;
    line-height:1.2;
    z-index:3;
  }
  .car-message b{font-size:14px}

  /* Selos ficam alinhados abaixo do carro */
  .trust{
    position:absolute;
    left:16px;
    right:16px;
    bottom:8px;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin:0;
    font-size:10px;
  }
  .trust span{
    justify-content:center;
    text-align:center;
    padding:7px 3px;
    background:rgba(255,255,255,.10);
    border-radius:9px;
  }
  .hero-grid{padding-bottom:52px}

  .quick-wrap{margin:0}
  .quick{
    grid-template-columns:1fr 1fr;
    gap:11px;
    padding:18px 0 22px;
  }
  .quick a{
    min-height:118px;
    padding:15px;
    border-radius:15px;
  }
  .quick a:last-child{grid-column:1/-1}
  .qicon{font-size:23px}
  .quick b{font-size:14px;line-height:1.2}
  .quick small{font-size:12px;line-height:1.3}

  section{padding:55px 0}
  .head{margin-bottom:28px}
  .head h2,.safe h2,.cta h2{font-size:29px}
  .services,.steps,.safe,.testimonials,.foot{grid-template-columns:1fr}
  .card,.step,.quote{padding:21px}
  .safe{gap:22px}

  /* botão flutuante menor e sem cobrir o conteúdo */
  .float{
    right:12px;
    bottom:12px;
    padding:12px 15px;
    font-size:12px;
    max-width:190px;
  }
}

@media (max-width:430px){
  .wrap{width:calc(100% - 28px)}
  .brand{font-size:19px}
  .topbtn{font-size:11px!important;padding:10px 11px!important}
  .hero h1{font-size:41px}
  .hero-copy{font-size:15px}
  .car-side{height:245px}
  .car-side img{width:116%;max-width:470px}
  .car-message{font-size:10px;max-width:110px}
  .car-message b{font-size:12px}
}

/* ===== MOBILE LIMPO: carro menor, sem sobreposição ===== */
@media (max-width:820px){
  .hero-grid{
    display:flex!important;
    flex-direction:column!important;
    padding:30px 0 22px!important;
  }

  .hero-copy-side{order:1;width:100%}

  .hero .actions{
    position:relative!important;
    z-index:10!important;
    margin-bottom:18px!important;
  }

  .car-side{
    order:2!important;
    position:relative!important;
    width:100%!important;
    height:235px!important;
    min-height:235px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }

  .car-side img{
    position:relative!important;
    width:auto!important;
    height:auto!important;
    max-width:88%!important;
    max-height:220px!important;
    object-fit:contain!important;
    transform:none!important;
    margin:0 auto!important;
    filter:drop-shadow(0 14px 15px rgba(0,0,0,.20))!important;
  }

  .car-message{
    position:absolute!important;
    top:18px!important;
    right:8px!important;
    max-width:118px!important;
    font-size:10px!important;
    line-height:1.18!important;
    z-index:4!important;
  }
  .car-message b{font-size:12px!important}

  .trust{
    order:3!important;
    position:static!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
    margin:14px 0 0!important;
    font-size:10px!important;
  }
  .trust span{
    min-height:44px!important;
    padding:7px 4px!important;
    background:rgba(255,255,255,.10)!important;
    border-radius:9px!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .hero-grid{padding-bottom:24px!important}
  .quick-wrap{position:relative!important;z-index:2!important}
  .float{font-size:11px!important;padding:11px 14px!important}
}

@media (max-width:430px){
  .car-side{
    height:215px!important;
    min-height:215px!important;
  }
  .car-side img{
    max-width:86%!important;
    max-height:200px!important;
  }
  .car-message{
    top:14px!important;
    right:3px!important;
    max-width:105px!important;
    font-size:9px!important;
  }
}
