/* ================================================
   Leva Mobile — estilo do site
   Azul-marinho #0E0165 · Verde #00A653
   ================================================ */

:root{
  --azul:#0E0165;
  --azul-claro:#231a7e;
  --verde:#00A653;
  --verde-escuro:#008643;
  --tinta:#14142b;
  --tinta-fraca:#5b5b76;
  --linha:#e4e4ee;
  --fundo:#ffffff;
  --fundo-suave:#f6f6fb;
  --raio:14px;
  --largura:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  color:var(--tinta);
  background:var(--fundo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

.container{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- botões ---------- */
.botao{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.botao:hover{transform:translateY(-2px)}
.botao-verde{background:var(--verde);color:#fff}
.botao-verde:hover{background:var(--verde-escuro)}
.botao-azul{background:var(--azul);color:#fff}
.botao-azul:hover{background:var(--azul-claro)}
.botao-vazado{background:transparent;color:var(--azul);border-color:var(--azul)}
.botao-vazado:hover{background:var(--azul);color:#fff}
.botao.grande{padding:17px 34px;font-size:16px}
.botao.bloco{display:block;text-align:center;width:100%}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo-linha{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:14px;padding-bottom:14px;
}
.marca img{height:44px;width:auto}
.menu{display:flex;gap:28px}
.menu a{
  color:var(--tinta);text-decoration:none;font-weight:600;font-size:15px;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--azul);border-bottom-color:var(--verde)}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(0,166,83,.14), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--fundo-suave) 100%);
  padding:76px 0 88px;
}
.hero-grade{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
}
.hero h1{
  font-size:clamp(38px,5vw,60px);
  line-height:1.08;letter-spacing:-1px;color:var(--azul);
  font-weight:800;
}
.hero h1 span{color:var(--verde)}
.chamada{
  margin-top:20px;font-size:19px;color:var(--tinta-fraca);max-width:33em;
}
.chamada strong{color:var(--tinta)}
.acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.selos{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin-top:32px}
.selos li{
  font-size:14px;font-weight:600;color:var(--tinta-fraca);
  padding-left:24px;position:relative;
}
.selos li::before{
  content:"";position:absolute;left:0;top:7px;
  width:13px;height:7px;border-left:2.5px solid var(--verde);
  border-bottom:2.5px solid var(--verde);transform:rotate(-45deg);
}

/* ---------- celular ---------- */
.hero-fone{display:flex;justify-content:center}
.fone{
  width:300px;height:600px;background:var(--azul);
  border-radius:40px;padding:12px;
  box-shadow:0 30px 60px rgba(14,1,101,.28);
}
.fone-tela{
  position:relative;width:100%;height:100%;
  background:#eef0f7;border-radius:30px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.mapa{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,#e8ecf5 0%,#dfe5f1 100%);
}
.mapa::before,.mapa::after{
  content:"";position:absolute;background:#fff;
}
.mapa::before{left:-10%;top:32%;width:120%;height:16px;transform:rotate(-14deg)}
.mapa::after{left:-10%;top:58%;width:120%;height:10px;transform:rotate(9deg)}
.cartao-corrida{
  position:relative;background:#fff;margin:10px;padding:18px;
  border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.linha-rota{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--tinta-fraca);
  padding:9px 0;border-bottom:1px solid var(--linha);
}
.ponto{width:10px;height:10px;border-radius:50%;flex:none}
.ponto.verde{background:var(--verde)}
.ponto.azul{background:var(--azul)}
.preco{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0 16px;font-size:13.5px;color:var(--tinta-fraca);
}
.preco strong{font-size:22px;color:var(--azul)}

/* ---------- blocos gerais ---------- */
section{padding:82px 0}
h2{
  font-size:clamp(28px,3.4vw,40px);color:var(--azul);
  letter-spacing:-.5px;font-weight:800;
}
.sub{margin-top:10px;font-size:18px;color:var(--tinta-fraca);max-width:44em}
.sub.claro{color:rgba(255,255,255,.82)}
.etiqueta{
  display:inline-block;background:rgba(255,255,255,.14);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;
  padding:6px 14px;border-radius:999px;margin-bottom:14px;
}

/* ---------- como funciona ---------- */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.passo{
  background:var(--fundo-suave);border:1px solid var(--linha);
  border-radius:var(--raio);padding:30px 26px;
}
.numero{
  width:44px;height:44px;border-radius:50%;
  background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;margin-bottom:16px;
}
.passo h3{font-size:19px;color:var(--azul);margin-bottom:8px}
.passo p{color:var(--tinta-fraca);font-size:15.5px}

/* ---------- motorista ---------- */
.motorista{background:var(--azul);color:#fff}
.motorista h2{color:#fff}
.motorista-grade{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.lista-check{list-style:none;margin:26px 0 32px}
.lista-check li{
  padding-left:30px;position:relative;margin-bottom:13px;
  color:rgba(255,255,255,.9);font-size:16px;
}
.lista-check li::before{
  content:"";position:absolute;left:0;top:8px;
  width:14px;height:8px;border-left:2.5px solid var(--verde);
  border-bottom:2.5px solid var(--verde);transform:rotate(-45deg);
}
.requisitos{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--raio);padding:30px;
}
.requisitos h3{font-size:19px;margin-bottom:16px}
.requisitos ul{list-style:none}
.requisitos li{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);font-size:15.5px;
}
.requisitos li:last-child{border-bottom:none}
.requisitos strong{color:#fff}
.nota{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.6)}

/* ---------- segurança ---------- */
.cartoes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.cartao{
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:26px 22px;background:#fff;
  border-top:4px solid var(--verde);
}
.cartao h3{font-size:17.5px;color:var(--azul);margin-bottom:8px}
.cartao p{font-size:15px;color:var(--tinta-fraca)}

/* ---------- baixar ---------- */
.baixar{
  background:linear-gradient(135deg,var(--azul) 0%,#1d1090 100%);
  color:#fff;text-align:center;
}
.baixar h2{color:#fff}
.baixar .sub{margin:12px auto 0}
.form-aviso{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;
}
.form-aviso input{
  width:290px;padding:15px 20px;border-radius:999px;border:none;
  font-size:16px;font-family:inherit;
}
.form-aviso input:focus{outline:3px solid var(--verde)}
.retorno{margin-top:16px;font-size:15px;font-weight:600;min-height:22px}
.retorno.ok{color:#6ef0aa}
.retorno.erro{color:#ffb3b3}

/* ---------- faq ---------- */
.faq details{
  border-bottom:1px solid var(--linha);padding:20px 0;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:17px;color:var(--azul);
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq summary::after{content:"+";font-size:24px;color:var(--verde);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:12px;color:var(--tinta-fraca);font-size:15.5px}
.faq h2{margin-bottom:14px}

/* ---------- rodapé ---------- */
.rodape{background:#0a0140;color:rgba(255,255,255,.75);padding:56px 0 26px}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.logo-rodape{height:46px;width:auto;background:#fff;border-radius:10px;padding:6px}
.rodape h4{color:#fff;font-size:15px;margin-bottom:12px}
.rodape nav a{
  display:block;color:rgba(255,255,255,.75);text-decoration:none;
  font-size:15px;padding:5px 0;
}
.rodape nav a:hover{color:var(--verde)}
.mini{font-size:13.5px;color:rgba(255,255,255,.55)}
.rodape-fim{
  margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);text-align:center;
}

/* ---------- celular / tablet ---------- */
@media (max-width:960px){
  .hero-grade{grid-template-columns:1fr;gap:44px}
  .hero-fone{order:-1}
  .motorista-grade{grid-template-columns:1fr;gap:34px}
  .passos{grid-template-columns:1fr}
  .cartoes{grid-template-columns:repeat(2,1fr)}
  .menu{display:none}
  .rodape-grade{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  section{padding:58px 0}
  .cartoes{grid-template-columns:1fr}
  .acoes .botao{width:100%;text-align:center}
  .fone{width:260px;height:520px}
  .form-aviso input{width:100%}
}

/* ---------- cidade (hero) ---------- */
.cidade{
  display:inline-block;background:rgba(0,166,83,.12);color:var(--verde-escuro);
  font-size:14px;font-weight:700;padding:7px 16px;border-radius:999px;margin-bottom:18px;
}

/* ---------- motorista: 5 vagas ---------- */
.motorista-topo{max-width:760px;margin-bottom:44px}
.etiqueta.destaque{background:var(--verde);color:#fff}
.motorista-grade{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.motorista .requisitos{margin-top:26px}

/* ---------- fichas de cadastro ---------- */
.ficha{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--raio);padding:32px;
}
.ficha h3{font-size:21px;margin-bottom:20px;color:#fff}
.ficha label{display:block;margin-bottom:16px;font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.ficha input,.ficha select{
  width:100%;margin-top:7px;padding:14px 16px;border-radius:10px;border:none;
  font-size:15.5px;font-family:inherit;background:#fff;color:var(--tinta);
}
.ficha input:focus,.ficha select:focus{outline:3px solid var(--verde)}
.ficha .botao{margin-top:8px}
.ficha .nota{margin-top:14px;text-align:center}

.ficha.clara{background:#fff;border:1px solid var(--linha);box-shadow:0 14px 40px rgba(14,1,101,.10)}
.ficha.clara h3{color:var(--azul)}
.ficha.clara label{color:var(--tinta-fraca)}
.ficha.clara input{background:var(--fundo-suave);border:1px solid var(--linha)}

/* ---------- passageiro ---------- */
.passageiro{background:linear-gradient(135deg,var(--azul) 0%,#1d1090 100%);color:#fff}
.passageiro h2{color:#fff}
.passageiro-grade{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.passageiro .lista-check{margin-top:24px}

@media (max-width:960px){
  .motorista-grade,.passageiro-grade{grid-template-columns:1fr;gap:34px}
}