/* style.css – unificado para index (logo carregado) + área do motorista + demais páginas */
:root{
  --v:#1daa5d;             /* verde CTA */
  --b:#fff;                 /* branco */
  --c:#f4f4f7;              /* cinza fundo */
  --p:#111;                 /* texto */
  --g:#767676;              /* textos secundários */
  --r:.4rem;                /* raio base */
  --i:1rem;                 /* gutter */
  --max:32rem               /* largura máx. formulários/cards */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--c);color:var(--p);line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button,input,select{font:inherit;border:none;background:none}
small{font-size:.75em}

/* componentes reutilizáveis */
.btn{
  background:var(--v);
  color:var(--b);
  padding:.9rem 1.6rem;
  border-radius:var(--r);
  font-weight:600;
  text-align:center;
  cursor:pointer;
  display:inline-block;
  touch-action:manipulation;
  transition:background .2s
}
.btn:hover{background:#158042}

/* layout navegação – sticky */
#wrap{min-height:100vh;display:flex;flex-direction:column}
nav.sticky{
  position:-webkit-sticky;position:sticky;
  top:0;
  background:var(--b);
  padding:1rem var(--i);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 6px #0001
}
.nav__logo{height:28px}
.nav__toggle{display:none}
.nav__list{list-style:none;display:flex;gap:1rem;align-items:center}

/* para >640px desktop */
@media(min-width:641px){
  .nav__toggle{display:none}
}

/* para ≤640px mobile */
@media(max-width:640px){
  .nav__list{
    position:absolute;
    right:var(--i);
    top:calc(100% + .5rem);
    background:var(--b);
    flex-direction:column;
    box-shadow:0 4px 10px #0002;
    border-radius:var(--r);
    padding:.75rem 1.25rem;
    gap:.75rem;
    transform-origin:top right;
    transform:scale(0);
transition:transform .15s;
z-index:11
  }
  .nav__list.aberto{transform:scale(1)}
  .nav__toggle{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;background:#0000;border-radius:50%;cursor:pointer}
}

/* seções comuns */
.sec{padding:2.5rem var(--i)}
.sec-title{font-size:clamp(1.4rem,4vw,2rem);text-align:center;margin-bottom:2rem}
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--b);border-radius:var(--r);padding:1.2rem;box-shadow:0 2px 6px #0003}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;text-align:center}
.stat{flex:1 1 140px;min-width:130px}
.stat h3{font-size:2rem;color:var(--v)}
.stat p{opacity:.8}

/* formulário area-do-motorista */
.form{
  max-width:var(--max);
  margin:auto;
  background:var(--b);
  border-radius:var(--r);
  padding:1.5rem var(--i)
}
.form h1{margin-bottom:1rem}
.form label{display:block;margin-bottom0 .3rem;font-size:.9rem}
.form input,
.form select,
.form textarea{
  width:100%;
  padding:.8rem 1rem;
  border:1px solid #ddd;
  border-radius:var(--r);
  margin-bottom:.9rem
}
.form button{width:100%;margin-top:.5rem}
.form small{display:block;text-align:center;opacity:.7;margin-top:.7rem}

/* parceiros flexbox */
.partners{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;align-items:center}
.partners img{height:26px;filter:grayscale(100%);opacity:.75}

/* footer geral */
.footer{
  padding:1.5rem var(--i);
  text-align:center;
  font-size:.8rem;
  opacity:.7;
  margin-top:auto   /* cola ao fundo com #wrap flex */
}

/* WhatsApp fixo – style gerado em JS; aqui só base */
.whatsapp-btn{
  position:fixed;
  bottom:clamp(1rem,3vw,1.5rem);
  right:clamp(1rem,3vw,1.5rem);
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--v);
  color:var(--b);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  box-shadow:0 4px 12px #0004;
  z-index:999;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .2s
}
.whatsapp-btn:hover{transform:scale(1.08)}

/* pulse animation – respeitando prefer-reduced-motion */
@media(prefers-reduced-motion:no-preference){
  .whatsapp-btn{animation:pulse 2s infinite}
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* micro-utility */
.assistive{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}