:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--margem:var(--sp-6);--bloco:var(--sp-6);--item:var(--sp-3);--acao:var(--sp-4);--interno:var(--sp-5);--linha:var(--sp-3)} /* mesma escala do app e do motorista: mexa so aqui */
/* ============================================================
   LOGIN do app de emissão em "Liquid Glass" ASC (azul-marinho + vermelho).
   Carregado DEPOIS do <style> do login.html: só troca cor/forma, não a estrutura.
   ============================================================ */
:root{--indigo:#8DB4F2;--ok:#4ADE80}
body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  background:radial-gradient(120% 80% at 50% -10%,#163A6B 0%,#07182D 62%) fixed}
body::before{background-image:none}
body::after{background:radial-gradient(circle at 25% 40%,rgba(237,28,36,.30),transparent 55%),radial-gradient(circle at 78% 62%,rgba(120,170,255,.26),transparent 55%);filter:blur(60px);opacity:1}

.card{border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:0 45px 90px -35px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.card::before{background:linear-gradient(to bottom right,rgba(255,255,255,.22),transparent 45%)}

.iconbox{border-radius:22px;background:linear-gradient(160deg,#163A6B,#07182D);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 34px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.3)}
h1{font-weight:800;letter-spacing:-.03em;text-transform:none;font-size:34px}
.lede{color:rgba(255,255,255,.7)}

.ctrl input{border-radius:16px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ctrl input:focus{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 4px rgba(255,255,255,.14);background:rgba(255,255,255,.16)}
.check input:checked + .box{background:#ED1C24;border-color:#ED1C24}
.submit{border-radius:999px;color:#fff;font-weight:700;min-height:54px;background:linear-gradient(135deg,#F0343B,#C9151C);box-shadow:0 16px 34px rgba(237,28,36,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.submit:hover{box-shadow:0 22px 44px rgba(237,28,36,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.signup a{color:#fff}

.side{background:rgba(7,24,45,.35)}
.bigicon{border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(22,58,107,.5));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bigicon svg{color:#fff}
.side h2{font-weight:800;letter-spacing:-.03em}
.proof{border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.stats .v{font-weight:800}
.flash{border-radius:var(--acao)}
@media (prefers-reduced-motion:reduce){body::after{display:none}}

/* ---- faixa de caminhões da ASC que vai passando (sem parar de olhar pra tela) ---- */
.marq{overflow:hidden;border-radius:var(--bloco);margin-bottom:var(--bloco);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-track{display:flex;gap:var(--item);width:max-content;animation:marq 52s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq img{flex:none;width:250px;height:170px;object-fit:cover;border-radius:22px;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 36px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.marq img:nth-child(even){margin-top:var(--item)}
@keyframes marq{to{transform:translateX(calc(-50% - var(--item) / 2))}}
@media (min-width:1024px){.marq img{width:270px;height:190px}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}.marq{overflow-x:auto}}
/* a faixa nao pode alargar a coluna: cada metade do cartao fica com a mesma largura */
.form-side,.side{min-width:0}
@media (min-width:1024px){.form-side,.side{flex:1 1 0}} /* em coluna (celular) flex-basis 0 espremia o painel de baixo */
@media (max-width:1023px){.form-side,.side{flex:none}}
.side{overflow:hidden}
.marq{width:100%;max-width:100%}
.side .txt{overflow-wrap:break-word}

/* ================================================================
   LOGIN NO CELULAR: "cabine". Foto da frota em tela cheia (passa uma a uma),
   marca no topo, frase grande e o formulário numa folha de vidro que sobe de baixo,
   com um caminhão andando na estrada da borda. O desktop continua igual.
   ================================================================ */
.m-hero,.m-title,.m-road{display:none}
@media (max-width:1023px){
  html,body{height:100%}
  body{padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;overflow:hidden;background:#07182D}
  body::before,body::after{display:none}
  .m-hero{display:block;position:fixed;left:0;right:0;top:0;height:64dvh;z-index:0;overflow:hidden;background:#07182D}
  .m-hero .sl{position:absolute;inset:0;background-size:cover;background-position:50% 55%;opacity:0;transform:scale(1);animation:m-passa 30s linear infinite;will-change:opacity,transform}
  .m-hero .sl:nth-child(2){background-position:30% 55%}
  .m-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,24,45,.7) 0%,rgba(7,24,45,.05) 32%,rgba(7,24,45,.35) 62%,#07182D 100%)}
  @keyframes m-passa{0%{opacity:0;transform:scale(1)}4%{opacity:1}19%{opacity:1}24%{opacity:0;transform:scale(1.1)}100%{opacity:0;transform:scale(1.1)}}
  .m-hero .sl:first-child{animation-name:m-passa0}
  @keyframes m-passa0{0%{opacity:1;transform:scale(1)}19%{opacity:1}24%{opacity:0;transform:scale(1.1)}100%{opacity:0;transform:scale(1.1)}}
  .m-brand{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + var(--margem));left:var(--margem);display:flex;align-items:center;gap:var(--item);color:#fff}
  .m-brand img{width:38px;height:38px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
  .m-brand b{display:block;font-size:17px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
  .m-brand span{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;opacity:.78;margin-top:2px}

  .m-title{display:block;position:relative;z-index:2;padding:0 var(--margem) var(--acao);color:#fff}
  .m-title h2{margin:0;font-size:27px;line-height:1.12;font-weight:900;letter-spacing:-.035em;text-shadow:0 6px 24px rgba(0,0,0,.5)}
  .m-chips{display:flex;gap:var(--sp-2);margin-top:var(--item)}
  .m-chips span{padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  .card{position:relative;z-index:2;max-width:none;width:100%;max-height:68dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:32px 32px 0 0;border-width:1px 0 0;
    background:rgba(8,26,49,.66);backdrop-filter:blur(34px) saturate(1.4);-webkit-backdrop-filter:blur(34px) saturate(1.4);
    box-shadow:0 -24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3)}
  .divider,.side,.iconbox,.form-side .lede{display:none}
  .form-side{padding:0 var(--margem) calc(var(--bloco) + env(safe-area-inset-bottom,0px))}
  .form-side h1{font-size:23px;letter-spacing:-.03em;margin:var(--sp-1) 0 var(--acao)}
  .form-side h1 br{display:none}
  .form-side .field{margin-bottom:var(--item)}
  .signup{margin-top:var(--acao)}
  /* a estrada da borda da folha */
  .m-road{display:block;position:relative;height:42px;margin:0 calc(-1 * var(--margem)) var(--sp-2);overflow:hidden}
  .m-road::after{content:"";position:absolute;left:var(--margem);right:var(--margem);bottom:8px;border-top:2px dashed rgba(255,255,255,.3)}
  .m-road svg{position:absolute;bottom:11px;left:0;width:64px;height:27px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:m-anda 9s linear infinite}
  @keyframes m-anda{from{transform:translateX(-80px)}to{transform:translateX(110vw)}}
}
@media (max-width:1023px) and (max-height:640px){
  .m-hero{height:46dvh}.m-title h2{font-size:22px}.m-chips{display:none}.card{max-height:78dvh}
}
@media (prefers-reduced-motion:reduce){.m-hero .sl,.m-road svg{animation:none}.m-hero .sl:first-child{opacity:1}.m-road svg{left:calc(50% - 32px)}}
@media (min-width:600px) and (max-width:1023px){.card{max-width:560px;margin:0 auto}.m-title{max-width:560px;width:100%;margin:0 auto}}