/* Lara Seleciona — tela de acesso */
:root{--ink:#070d1c;--ink-2:#0d1730;--brand:#ff7a1a;--brand-2:#ff4f6d;--blue:#3563f0;--text:#1b2438;--muted:#65708a;--line:#e1e6ef;--font:"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.5 var(--font);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
svg.i{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.login{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);min-height:100vh}

/* ---------- stage (lado esquerdo) ---------- */
.stage{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:40px 52px;color:#fff;background:var(--ink)}
.aurora{position:absolute;inset:-20%;pointer-events:none;filter:blur(60px);opacity:.9}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:55%;height:55%;left:5%;top:10%;background:radial-gradient(circle,rgba(255,122,26,.55),transparent 65%);animation:drift1 18s ease-in-out infinite}
.aurora i:nth-child(2){width:60%;height:60%;right:0;top:25%;background:radial-gradient(circle,rgba(53,99,240,.6),transparent 65%);animation:drift2 22s ease-in-out infinite}
.aurora i:nth-child(3){width:45%;height:45%;left:30%;bottom:0;background:radial-gradient(circle,rgba(255,79,109,.45),transparent 65%);animation:drift3 26s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(18%,12%) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-15%,-10%) scale(.9)}}
@keyframes drift3{50%{transform:translate(-10%,-18%) scale(1.2)}}
.gridbg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 75%)}
.stage>*{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 10px 30px rgba(255,122,26,.4)}
.brand strong{display:block;font-size:16px}
.brand small{display:block;color:#8e9bbb;font-size:12px}
.stage-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:30px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#ffc59a}
.kicker .live{width:7px;height:7px;border-radius:50%;background:#35d07f;box-shadow:0 0 0 0 rgba(53,208,127,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(53,208,127,0)}100%{box-shadow:0 0 0 0 rgba(53,208,127,0)}}
.stage h1{margin:18px 0 0;font-size:clamp(30px,3.4vw,46px);line-height:1.08;font-weight:800;letter-spacing:-.025em}
.rotator{display:inline-grid;vertical-align:bottom;height:1.1em;overflow:hidden}
.rotator span{grid-area:1/1;background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(100%);animation:rot 9s infinite}
.rotator span:nth-child(2){animation-delay:3s}
.rotator span:nth-child(3){animation-delay:6s}
@keyframes rot{0%{opacity:0;transform:translateY(100%)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-100%)}}
.stage p.lead{margin:18px 0 0;max-width:520px;color:#a7b3d0;font-size:15.5px}
.stats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
.stats div b{display:block;font-size:24px;font-weight:800}
.stats div span{font-size:12px;color:#8190b3}

/* phone mockup */
.phone-wrap{position:relative;width:270px}
.phone{position:relative;width:270px;aspect-ratio:9/19;border-radius:40px;padding:10px;background:linear-gradient(145deg,#2a3550,#0b1222);box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(-.6deg)}}
.screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#0c1220}
.screen .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:#05080f;z-index:5}
.bars{position:absolute;top:38px;left:12px;right:12px;display:flex;gap:4px;z-index:4}
.bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.bars i::after{content:"";display:block;height:100%;width:0;background:#fff;animation:bar 12s linear infinite}
.bars i:nth-child(2)::after{animation-delay:3s}.bars i:nth-child(3)::after{animation-delay:6s}.bars i:nth-child(4)::after{animation-delay:9s}
@keyframes bar{0%{width:0}25%,100%{width:100%}}
.bars i:nth-child(1)::after{animation-name:bar1}.bars i:nth-child(2)::after{animation-name:bar1}.bars i:nth-child(3)::after{animation-name:bar1}.bars i:nth-child(4)::after{animation-name:bar1}
@keyframes bar1{0%{width:0}25%{width:100%}99.9%{width:100%}100%{width:0}}
.lara{position:absolute;inset:0;background-size:cover;background-position:center 25%;animation:kb 12s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.18) translate(-3%,2%)}}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,.35) 0%,transparent 30%,transparent 45%,rgba(5,10,20,.92) 100%);z-index:1}
.handle{position:absolute;top:52px;left:14px;z-index:4;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700}
.handle img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid var(--brand)}
.handle em{font-style:normal;font-weight:600;color:#cfd7ea;font-size:10px;padding:1px 6px;border:1px solid rgba(255,255,255,.35);border-radius:4px}
.product-card{position:absolute;left:14px;right:14px;bottom:108px;z-index:3;display:flex;gap:10px;align-items:center;padding:9px;border-radius:14px;background:rgba(255,255,255,.95);color:var(--text);box-shadow:0 12px 30px rgba(0,0,0,.35);animation:cardIn 12s infinite}
.product-card .pimg{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#eef2ff,#ffe9da);color:var(--brand)}
.product-card .pimg svg{width:24px;height:24px}
.product-card b{display:block;font-size:11.5px;line-height:1.25}
.product-card span{display:block;font-size:14px;font-weight:800;color:var(--brand)}
@keyframes cardIn{0%,8%{opacity:0;transform:translateY(20px)}14%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
.cta{position:absolute;left:14px;right:14px;bottom:56px;z-index:3;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:800;background:linear-gradient(135deg,var(--brand),var(--brand-2));animation:ctaPulse 2.4s ease-in-out infinite}
@keyframes ctaPulse{50%{transform:scale(1.04);box-shadow:0 0 0 8px rgba(255,122,26,.15)}}
.caption{position:absolute;left:14px;right:60px;bottom:18px;z-index:3;font-size:10.5px;color:#c7d0e4;line-height:1.35}
.rail{position:absolute;right:10px;bottom:110px;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center;font-size:9.5px;font-weight:700;color:#e6ecf8}
.rail div{display:flex;flex-direction:column;align-items:center;gap:2px}
.rail svg{width:22px;height:22px}
.rail .heart svg{fill:#ff4f6d;stroke:#ff4f6d;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{15%{transform:scale(1.25)}30%{transform:none}}

/* notificações flutuantes */
.notif{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;min-width:196px;background-color:rgba(12,20,40,.55);padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.35);font-size:12px;opacity:0;animation:notif 12s infinite}
.notif .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 32px}
.notif .ico svg{width:17px;height:17px}
.notif b{display:block;font-size:12.5px}
.notif span{color:#aeb9d4;font-size:11px}
.n1{left:-34px;top:84px}.n1 .ico{background:rgba(53,208,127,.2);color:#52e39a}
.n2{right:-28px;top:230px;animation-delay:3s}.n2 .ico{background:rgba(255,122,26,.22);color:#ffab6b}
.n3{left:-34px;bottom:190px;animation-delay:6s}.n3 .ico{background:rgba(53,99,240,.25);color:#8ea8ff}
.n4{right:-28px;bottom:96px;animation-delay:9s}.n4 .ico{background:rgba(255,79,109,.22);color:#ff8ea3}
@keyframes notif{0%{opacity:0;transform:translateY(14px) scale(.95)}5%,24%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(-10px) scale(.97)}}
.stage-foot{display:flex;gap:22px;flex-wrap:wrap;color:#6f7da0;font-size:12px}
.stage-foot span{display:inline-flex;align-items:center;gap:6px}
.stage-foot svg{width:15px;height:15px}

/* ---------- formulário (lado direito) ---------- */
.panel{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(28px,5vw,72px);background:radial-gradient(600px 300px at 100% 0%,#fff4ec,transparent 60%),#fff}
.card{width:100%;max-width:400px;margin:0 auto;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.card .brand-mark.sm{width:48px;height:48px;border-radius:14px;font-size:17px;color:#fff}
.card h2{margin:22px 0 6px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.card .sub{margin:0;color:var(--muted)}
.error{display:flex;gap:10px;align-items:center;margin-top:20px;padding:12px 14px;border-radius:12px;background:#fdecee;border:1px solid #f6c6cc;color:#a1202e;font-weight:600;font-size:13px;animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.fl{position:relative}
.fl input{width:100%;height:56px;padding:22px 46px 8px 44px;font:15px var(--font);color:var(--text);background:#f7f8fb;border:1.5px solid var(--line);border-radius:14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.fl input:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 5px rgba(255,122,26,.12)}
.fl label{position:absolute;left:44px;top:18px;color:#8993a8;font-size:14.5px;pointer-events:none;transition:all .18s ease}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label{top:9px;font-size:11px;font-weight:700;color:var(--brand)}
.fl .lead-ic{position:absolute;left:15px;top:19px;color:#98a1b5}
.fl input:focus~.lead-ic{color:var(--brand)}
.fl .toggle{position:absolute;right:8px;top:10px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#8993a8;cursor:pointer;display:grid;place-items:center}
.fl .toggle:hover{background:#eef0f5;color:var(--text)}
.caps{display:none;margin-top:6px;font-size:12px;font-weight:600;color:#c9780a}
.caps.on{display:block}
.row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.row span{display:inline-flex;align-items:center;gap:6px}
.row svg{width:15px;height:15px;color:#12a150}
.submit{position:relative;overflow:hidden;height:54px;border:0;border-radius:14px;cursor:pointer;font:700 15px var(--font);color:#fff;background:linear-gradient(135deg,var(--brand),#ff5e3a 60%,var(--brand-2));background-size:200% 100%;box-shadow:0 12px 28px rgba(255,106,40,.35);display:flex;align-items:center;justify-content:center;gap:10px;transition:background-position .5s,transform .15s,box-shadow .2s}
.submit:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 16px 34px rgba(255,106,40,.42)}
.submit::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.submit .spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid #fff;border-right-color:transparent;animation:spin .7s linear infinite}
.submit.loading{pointer-events:none;opacity:.9}
.submit.loading .spin{display:block}
.submit.loading .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:#98a1b5}

@media (max-width:1180px){.stage-body{grid-template-columns:1fr}.phone-wrap{display:none}}
@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .stage{padding:28px 24px 30px;min-height:auto}
  .stage-body{padding:22px 0 6px}
  .stage h1{font-size:28px}
  .stats,.stage-foot{display:none}
  .panel{padding:32px 22px 44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rotator span:first-child,.notif.n1,.product-card{opacity:1;transform:none}}

/* Desktop: tudo cabe na altura da janela, sem barra de rolagem */
@media (min-width:901px){
  .login{height:100vh;min-height:0}
  .stage-body{min-height:0}
  .panel{overflow-y:auto}
  .phone-wrap{width:auto}
  .phone{width:auto;height:min(570px,calc(100vh - 180px))}
}
@media (min-width:901px) and (max-height:780px){
  .stage{padding:26px 44px}
  .stage-body{padding:14px 0}
  .stats,.stage-foot{display:none}
  .stage h1{font-size:clamp(28px,3vw,40px)}
  .stage p.lead{font-size:14.5px}
  .panel{padding-top:20px;padding-bottom:20px}
  .card h2{margin-top:14px;font-size:26px}
  form{margin-top:18px;gap:12px}
  .foot{margin-top:14px;padding-top:12px}
}