/* ON DRIVE V55 — acabamento visual profissional para mobile
   Somente HTML/CSS. Não altera .htaccess, DNS, SSL ou redirecionamentos. */
@media (max-width: 768px) {
  :root {
    --od-red:#e31b36;
    --od-dark:#0b0c0f;
    --od-soft:#f5f6f8;
  }

  html,body{max-width:100%!important;overflow-x:hidden!important}
  *,*::before,*::after{box-sizing:border-box!important}
  img{max-width:100%;image-rendering:auto!important}
  .wrap{width:calc(100% - 28px)!important;max-width:none!important;margin-inline:auto!important}

  /* Cabeçalho mais leve e alinhado */
  header{position:sticky!important;top:0!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(0,0,0,.07)!important}
  header nav,nav{min-height:68px!important;height:auto!important;padding-block:8px!important}
  header .logo img,nav .logo img{width:138px!important;height:auto!important;object-fit:contain!important}
  header .download,nav .download{border-radius:999px!important;padding:10px 14px!important;box-shadow:0 8px 18px rgba(227,27,54,.2)!important}

  /* Hero: enquadramento e leitura */
  .hero{position:relative!important;isolation:isolate!important;min-height:590px!important;padding:42px 0 44px!important;align-items:flex-end!important;background-size:cover!important;background-position:64% center!important;border-radius:0!important;overflow:hidden!important}
  .hero::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.88) 78%,rgba(0,0,0,.98) 100%)!important;z-index:0!important}
  .hero>.wrap,.hero-copy,.hero-content{position:relative!important;z-index:1!important}
  .hero h1{font-size:clamp(39px,11vw,52px)!important;line-height:1!important;letter-spacing:-.045em!important;margin-bottom:16px!important;text-wrap:balance!important}
  .hero p{font-size:16.5px!important;line-height:1.55!important;color:#fff!important;max-width:34rem!important;text-shadow:0 2px 12px rgba(0,0,0,.55)!important}
  .hero .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:22px!important}
  .hero .btn,.hero .actions a{width:100%!important;min-height:50px!important;border-radius:12px!important;font-weight:800!important;box-shadow:0 10px 24px rgba(0,0,0,.22)!important}

  /* Seções */
  section{padding-block:52px!important}
  .section-head{margin-bottom:24px!important}
  .section-head h2,.driver h2,.app h2{font-size:clamp(30px,8.5vw,39px)!important;line-height:1.08!important;letter-spacing:-.035em!important;text-wrap:balance!important}
  .section-head p{font-size:16px!important;line-height:1.55!important;color:#5f6368!important}

  /* Cards de categoria com acabamento uniforme */
  .cards,.grid,.benefits{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  .cards .card,article.card{
    display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;
    overflow:hidden!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:22px!important;
    background:linear-gradient(180deg,#111318 0%,#08090c 100%)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.16)!important;transform:none!important
  }
  .cards .card::after,article.card::after{display:none!important;content:none!important}
  .cards .card>img,article.card>img{
    position:static!important;display:block!important;width:100%!important;height:auto!important;
    aspect-ratio:4/3!important;object-fit:cover!important;object-position:center 42%!important;
    background:#111!important;transform:none!important;filter:none!important;border-radius:0!important
  }
  /* pequenos ajustes de foco por ordem dos cards */
  .cards .card:nth-child(1)>img{object-position:center 48%!important}
  .cards .card:nth-child(2)>img{object-position:center 43%!important}
  .cards .card:nth-child(3)>img{object-position:center 38%!important}
  .cards .card:nth-child(4)>img{object-position:center 45%!important}

  .cards .card .card-content,article.card .card-content{
    position:static!important;display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
    width:100%!important;padding:22px 20px 20px!important;background:transparent!important;color:#fff!important
  }
  .card-content h3,.card h3{margin:0 0 9px!important;color:#fff!important;font-size:25px!important;line-height:1.12!important;letter-spacing:-.025em!important}
  .card-content p,.card p{margin:0 0 19px!important;color:#e8e9ed!important;font-size:15.8px!important;line-height:1.55!important;opacity:1!important}
  .card-content a,.card a{position:static!important;margin-top:auto!important;width:100%!important;min-height:48px!important;padding:12px 16px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:12px!important;background:linear-gradient(135deg,#ef2947,#cf102d)!important;color:#fff!important;font-weight:850!important;box-shadow:0 10px 24px rgba(227,27,54,.22)!important}

  /* Seção motorista: sem sobreposição e com imagem editorial */
  .driver{background:#090a0d!important;overflow:hidden!important}
  .driver-grid{display:flex!important;flex-direction:column!important;gap:0!important;width:calc(100% - 28px)!important;margin-inline:auto!important;padding:0!important;border-radius:24px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 20px 52px rgba(0,0,0,.24)!important}
  .driver-grid>img,.driver .driver-image,.driver-grid .driver-photo{
    position:static!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;
    object-fit:cover!important;object-position:center center!important;background:#111!important;border-radius:0!important
  }
  .driver-copy{position:static!important;width:100%!important;max-width:none!important;padding:27px 22px 25px!important;background:#fff!important;color:#17191d!important}
  .driver-copy h2,.driver-copy h3{color:#111318!important;text-shadow:none!important}
  .driver-copy p,.driver-copy li,.driver-list div{color:#474b52!important;text-shadow:none!important;opacity:1!important;line-height:1.5!important}
  .driver-list{display:grid!important;grid-template-columns:1fr!important;gap:11px!important;margin-block:20px!important}
  .driver-list div{padding:11px 12px!important;border-radius:12px!important;background:#f4f5f7!important}
  .driver-copy .btn,.driver-copy a.btn{width:100%!important;min-height:49px!important;border-radius:12px!important;box-shadow:0 10px 24px rgba(227,27,54,.18)!important}

  /* Aplicativos */
  .app{background:#f3f4f6!important}
  .app-grid,.download-grid{grid-template-columns:1fr!important;gap:24px!important}
  .app-copy,.download-copy{text-align:left!important}
  .app-visual img,.download-visual img,.app-card img,.download-card img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:20px!important;box-shadow:0 18px 42px rgba(0,0,0,.12)!important}
  .store-buttons,.stores,.app-store-actions{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important}
  .store-badge,.store-buttons a,.stores a{width:100%!important;max-width:none!important;min-height:60px!important;border-radius:14px!important;box-shadow:0 12px 26px rgba(0,0,0,.14)!important}

  /* Rodapé */
  footer{padding:46px 0 24px!important}
  footer .footer-grid,footer .grid{grid-template-columns:1fr!important;gap:28px!important}
  footer .footer-grid>div{min-width:0!important}
  footer img{max-width:165px!important;height:auto!important;object-fit:contain!important}
  footer p,footer a{line-height:1.55!important;overflow-wrap:anywhere!important}
}

@media (max-width:380px){
  .wrap{width:calc(100% - 20px)!important}
  .driver-grid{width:calc(100% - 20px)!important}
  .hero{min-height:555px!important;background-position:67% center!important}
  .hero h1{font-size:39px!important}
  .cards .card .card-content,article.card .card-content,.driver-copy{padding-left:17px!important;padding-right:17px!important}
}