/* SLJ-28.21.0 / 28.26.0 — tela de acesso com a cidade animada (moto para na pizzaria e entrega no cliente) */
:root{--nv:#0f1f4d;--nv2:#16296a;--az:#2056d8;--az2:#3d7bff;--am:#ffc928;--tx:#0b1533;--tx2:#46526b;--bd:#e3e8f2}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.lg{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);background:#f4f7fd;-webkit-font-smoothing:antialiased}
.lg-grid{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.cena{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b1740 0%,#16296a 55%,#2a3f8f 100%)}
.cena svg.cid{position:absolute;left:0;bottom:0;width:100%;height:100%}
.lg-logo{position:absolute;z-index:3;top:28px;left:32px;display:flex;align-items:center;gap:10px;color:#fff;font:800 22px/1 Sora,Inter,sans-serif;text-decoration:none}
.lg-logo i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff;color:var(--nv)}
.lg-logo i svg{width:25px;height:25px}
.lg-logo b{color:var(--am)}
.cena-txt{position:absolute;z-index:3;left:32px;right:32px;top:96px;color:#fff;max-width:460px}
.cena-txt h2{margin:0;font:800 clamp(26px,3vw,38px)/1.1 Sora,Inter,sans-serif;letter-spacing:-.02em}
.cena-txt h2 span{color:var(--am)}
.cena-txt p{margin:12px 0 0;color:#c9d4f2;font-size:16px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font:700 13px Inter,sans-serif}
.chips svg{width:15px;height:15px;color:var(--am)}

/* avisos que aparecem um de cada vez */
.avisos{position:absolute;z-index:3;right:26px;top:110px;width:250px;height:80px}
.aviso{position:absolute;inset:0 auto auto 0;display:flex;gap:10px;align-items:center;width:100%;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 18px 40px -14px rgba(0,0,0,.45);opacity:0;animation:aviso 12s infinite}
.aviso:nth-child(2){animation-delay:4s}
.aviso:nth-child(3){animation-delay:8s}
.aviso .ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:18px}
.aviso b{display:block;font-size:13.5px;color:var(--tx)}
.aviso small{color:#6b7489;font-size:12px}

/* cena animada */
.estrela{animation:brilho 3s ease-in-out infinite}
.estrela:nth-child(3n){animation-delay:1s}.estrela:nth-child(3n+1){animation-delay:2s}
.nuvem{animation:nuvem 46s linear infinite}
.nuvem.n2{animation-duration:64s;animation-delay:-20s}
.janela{animation:janela 5s steps(1) infinite}
.janela:nth-child(2n){animation-delay:1.7s}.janela:nth-child(3n){animation-delay:3.1s}
.moto{animation:anda 14s infinite}
.moto .corpo{animation:pula .3s ease-in-out infinite alternate}
.roda{transform-box:fill-box;transform-origin:center;animation:gira 14s infinite}
.rota{animation:rota 1.2s linear infinite}
.bal{opacity:0;transform-box:fill-box;transform-origin:center bottom}
.bal.b1{animation:bal1 14s infinite}
.bal.b2{animation:bal2 14s infinite}
.func,.cli,.cx1,.cx2{opacity:0}
.func{animation:func 14s infinite}
.cli{animation:cli 14s infinite}
.cx1{animation:cx1 14s infinite}
.cx2{animation:cx2 14s infinite}
.luz{animation:luz 14s infinite}
.pulso{transform-box:fill-box;transform-origin:center;animation:pulso 2.2s ease-out infinite}
.pulso.p2{animation-delay:1.1s}
.letreiro{animation:neon 2.4s ease-in-out infinite}

/* formulário */
.lado{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.caixa{width:min(420px,100%)}
.caixa h1{margin:0;font:800 32px/1.1 Sora,Inter,sans-serif;letter-spacing:-.02em}
.caixa .sub{margin:10px 0 28px;color:var(--tx2);font-size:15.5px;line-height:1.5}
.msg{display:flex;gap:10px;align-items:center;margin:0 0 18px;padding:12px 14px;border-radius:14px;font-size:14.5px;font-weight:600}
.msg-erro{background:#fdecec;color:#a51d1d}
.msg-ok{background:#e7f8ee;color:#137a3a}
.campo{margin-bottom:16px}
.campo label{display:block;margin-bottom:7px;font-weight:700;font-size:14px}
.inp{position:relative;display:flex;align-items:center}
.inp svg{position:absolute;left:14px;width:19px;height:19px;color:#8a93a8;pointer-events:none}
.inp input{width:100%;height:52px;padding:0 14px 0 44px;border-radius:14px;border:1.5px solid var(--bd);background:#fff;font:500 15.5px Inter,sans-serif;color:var(--tx);outline:0;transition:border-color .15s,box-shadow .15s}
.inp input:focus{border-color:var(--az);box-shadow:0 0 0 4px rgba(32,86,216,.12)}
.inp .mostrar{position:absolute;right:8px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--az);font:700 13px Inter,sans-serif;cursor:pointer}
.linha{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 22px;font-size:14px}
.linha label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--tx2);font-weight:600}
.linha input{width:18px;height:18px;accent-color:var(--az)}
.linha a{color:var(--az);font-weight:700;text-decoration:none}
.entrar{width:100%;height:54px;border:0;border-radius:15px;background:linear-gradient(120deg,#2056d8,#3d7bff 55%,#00a6ff);color:#fff;font:800 16.5px Inter,sans-serif;cursor:pointer;box-shadow:0 14px 28px -12px rgba(32,86,216,.8);transition:transform .15s}
.entrar:hover{transform:translateY(-2px)}
.novo{margin-top:26px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--bd);display:flex;align-items:center;gap:14px}
.novo .ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff4cc;font-size:21px}
.novo b{display:block;font-size:15px}
.novo a{color:var(--az);font-weight:700;font-size:14px;text-decoration:none}
.lg-rod{margin-top:22px;text-align:center;color:#8a93a8;font-size:13px}
.lg-rod a{color:inherit;text-decoration:none}

@keyframes aviso{0%{opacity:0;transform:translateY(12px) scale(.96)}4%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes neon{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes brilho{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes janela{0%,60%{opacity:1}61%,100%{opacity:.15}}
@keyframes faixa{to{transform:translateX(-80px)}}
@keyframes anda{0%{transform:translateX(-240px);animation-timing-function:ease-out}18%,33%{transform:translateX(150px);animation-timing-function:ease-in-out}55%,72%{transform:translateX(560px);animation-timing-function:ease-in}100%{transform:translateX(1140px)}}
@keyframes func{0%,19%{opacity:0;transform:translateX(0)}21%{opacity:1;transform:translateX(0)}25%,28%{opacity:1;transform:translateX(15px)}31%{opacity:1;transform:translateX(0)}32.5%,100%{opacity:0;transform:translateX(0)}}
@keyframes cx1{0%,19%{opacity:0;transform:translate(126px,496px)}21%{opacity:1;transform:translate(126px,496px)}25%{opacity:1;transform:translate(146px,496px)}27%{opacity:1;transform:translate(157px,464px)}28.5%{opacity:1;transform:translate(157px,478px) scale(.8)}29.5%,100%{opacity:0;transform:translate(157px,484px) scale(.6)}}
@keyframes cli{0%,56%{opacity:0;transform:translateX(0)}58%{opacity:1;transform:translateX(0)}61%,69%{opacity:1;transform:translateX(13px)}71.5%{opacity:1;transform:translateX(0)}72.5%,100%{opacity:0;transform:translateX(0)}}
@keyframes cx2{0%,57%{opacity:0;transform:translate(567px,484px) scale(.6)}58.5%{opacity:1;transform:translate(567px,474px) scale(.9)}60%{opacity:1;transform:translate(567px,460px)}63%,69%{opacity:1;transform:translate(680px,496px)}71.5%{opacity:1;transform:translate(698px,496px)}72.5%,100%{opacity:0;transform:translate(698px,496px)}}
@keyframes luz{0%,17%{opacity:1}19%,32%{opacity:0}34%,54%{opacity:1}56%,71%{opacity:0}73%,100%{opacity:1}}
@keyframes rota{to{stroke-dashoffset:-28}}
@keyframes bal1{0%,19%{opacity:0;transform:translateY(8px) scale(.9)}21%,32%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes bal2{0%,63%{opacity:0;transform:translateY(8px) scale(.9)}65%,71%{opacity:1;transform:none}73%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes pula{to{transform:translateY(-2.5px)}}
@keyframes gira{0%{transform:rotate(0);animation-timing-function:ease-out}18%,33%{transform:rotate(1800deg);animation-timing-function:ease-in-out}55%,72%{transform:rotate(3692deg);animation-timing-function:ease-in}100%{transform:rotate(6369deg)}}
@keyframes pulso{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes nuvem{from{transform:translateX(-300px)}to{transform:translateX(1200px)}}

@media (max-width:900px){
  .lg-grid{grid-template-columns:1fr;min-height:0}
  .cena{height:min(360px,calc(100vw * .667 + 90px))}
  .cena-txt{display:none}
  .lg-logo{top:18px;left:18px;font-size:19px}
  .lg-logo i{width:36px;height:36px}
  .avisos{top:64px;bottom:auto;right:14px;width:220px}
  .lado{position:relative;margin-top:-8px;padding:0 0 30px}
  .caixa{width:100%;padding:28px 20px;border-radius:26px 26px 0 0;background:#f4f7fd}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.aviso:first-child{opacity:1}.moto{transform:translateX(560px)}}