:root{--blue:#2374e8;--blue-2:#1a5fd0;--navy:#0f2240;--navy-2:#16315a;--ink:#182c48;--text:#3a4b63;--muted:#7d8ba0;--line:#e3e9f2;--pale:#f5f8fd;--green:#26b78b;--red:#d4384a;--amber:#e39a1b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.su{display:grid;grid-template-columns:minmax(380px,46%) 1fr;min-height:100vh}

/* ---------- lado da marca ---------- */
.su-side{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:40px;padding:44px clamp(32px,4.5vw,64px);color:#dbe6f7;background:radial-gradient(120% 80% at 0% 0%,#1d3e70 0%,transparent 60%),linear-gradient(160deg,var(--navy-2),var(--navy) 70%)}
.su-glow{position:absolute;width:520px;height:520px;right:-180px;bottom:-160px;border-radius:50%;background:radial-gradient(circle,#2374e888,transparent 65%);filter:blur(10px);pointer-events:none}
.su-side::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.su-logo{position:relative;display:inline-flex;align-items:center;gap:10px;font:800 25px/1 Manrope,sans-serif;letter-spacing:-.04em;color:#fff}
.su-logo i{font-style:normal;color:#5aa0ff}
.su-logo-dark{color:var(--ink)}
.su-logo-dark i{color:var(--blue)}
.su-pitch{position:relative;max-width:470px;margin-top:auto}
.su-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;background:#ffffff12;border:1px solid #ffffff1f;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#bcd3f5}
.su-pill b{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #26b78b33}
.su-pitch h2{margin:20px 0 14px;font:800 clamp(32px,3.3vw,46px)/1.06 Manrope,sans-serif;letter-spacing:-.045em;color:#fff}
.su-pitch h2 em{font-style:normal;background:linear-gradient(90deg,#5aa0ff,#8cc2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.su-pitch p{margin:0;font-size:16.5px;line-height:1.6;color:#aebfd8}
.su-perks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.su-perks li{display:flex;align-items:center;gap:12px;font-size:15px;color:#e3ecf9}
.su-perks svg,.su-trust svg{width:20px;height:20px;padding:3px;border-radius:50%;flex:none;stroke-width:2.6}
.su-perks svg{color:#7fe0bf;background:#26b78b26}

.su-demo{position:relative;width:min(340px,100%);margin-left:auto;padding:14px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -20px #00000080,0 0 0 1px #ffffff14;transform:rotate(-1.5deg);animation:float 7s ease-in-out infinite}
.su-demo-head{display:flex;align-items:center;gap:10px;margin:-14px -14px 12px;padding:12px 14px;border-radius:18px 18px 0 0;background:var(--blue);color:#fff}
.su-demo-head strong{display:block;font-size:13.5px}
.su-demo-head small{display:flex;align-items:center;gap:6px;font-size:11.5px;opacity:.85}
.su-demo-head small b{width:6px;height:6px;border-radius:50%;background:#7fe0bf}
.su-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff2e;font-weight:700;font-size:13px}
.su-msg{max-width:82%;margin-top:8px;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;opacity:0;animation:pop .45s ease forwards}
.su-msg.in{background:#eef3fb;border-bottom-left-radius:4px}
.su-msg.out{margin-left:auto;background:var(--blue);color:#fff;border-bottom-right-radius:4px;animation-delay:.6s}
.su-msg.typing{display:inline-flex;gap:4px;animation-delay:1.3s}
.su-msg.typing span{width:6px;height:6px;border-radius:50%;background:#8a9ab0;animation:blink 1.2s infinite}
.su-msg.typing span:nth-child(2){animation-delay:.15s}.su-msg.typing span:nth-child(3){animation-delay:.3s}
.su-foot{position:relative;margin:0;font-size:13px;color:#8ea3c2}

/* ---------- formulário ---------- */
.su-main{display:flex;flex-direction:column;align-items:center;padding:28px clamp(20px,4vw,56px) 36px;background:radial-gradient(70% 50% at 100% 0%,#eaf2ff,transparent 70%),var(--pale)}
.su-top{display:flex;align-items:center;justify-content:flex-end;gap:16px;width:100%;max-width:560px;margin-bottom:22px;font-size:14.5px;color:var(--muted)}
.su-top a:not(.su-logo){font-weight:700;margin-left:4px}
.su-top .su-logo{display:none;margin-right:auto}
.su-card{width:100%;max-width:560px;margin:auto 0;padding:clamp(26px,4vw,42px);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px -28px #16315440,0 2px 6px #1631540a;animation:rise .5s ease both}
.su-card header{margin-bottom:26px}
.su-eyebrow{display:inline-block;padding:5px 11px;border-radius:99px;background:#eaf2fe;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.su-card h1{margin:14px 0 8px;font:800 clamp(25px,2.4vw,31px)/1.15 Manrope,sans-serif;letter-spacing:-.035em;color:var(--ink)}
.su-card header p{margin:0;font-size:15.5px;color:var(--muted)}
.su-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.su-field{display:block;margin-bottom:17px}
.su-field>span{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px;font-size:14px;font-weight:600;color:var(--ink)}
.su-field>span em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--muted)}
.su-input{position:relative;display:flex;align-items:center}
.su-input>svg{position:absolute;left:14px;width:19px;height:19px;color:#9aa8bb;pointer-events:none;transition:color .2s}
.su-input input{width:100%;height:50px;padding:0 14px 0 44px;border:1.5px solid var(--line);border-radius:13px;background:#fbfcfe;font:inherit;font-size:15.5px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.su-input input::placeholder{color:#a9b4c3}
.su-input input:hover{border-color:#cdd8e7}
.su-input input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px #2374e81f}
.su-input:focus-within>svg{color:var(--blue)}
.su-field.invalid input{border-color:var(--red);box-shadow:0 0 0 4px #d4384a14}
.su-input input[name=password]{padding-right:50px}
.su-eye{position:absolute;right:6px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:none;color:#8d9bb0;cursor:pointer}
.su-eye:hover{background:var(--pale);color:var(--ink)}
.su-eye svg{width:20px;height:20px}
.su-eye[aria-pressed=true]{color:var(--blue)}
.su-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.su-meter i{height:4px;border-radius:4px;background:#e8edf4;transition:background .3s}
.su-meter[data-s="1"] i:nth-child(-n+1){background:var(--red)}
.su-meter[data-s="2"] i:nth-child(-n+2){background:var(--amber)}
.su-meter[data-s="3"] i:nth-child(-n+3){background:#58b3e8}
.su-meter[data-s="4"] i{background:var(--green)}
.su-hint{display:block;margin-top:7px;font-size:12.5px;color:var(--muted)}
.su-error{display:flex;gap:9px;align-items:flex-start;margin:4px 0 16px;padding:12px 14px;border-radius:12px;background:#fdecee;color:#a3202f;font-size:14px;line-height:1.45}
.su-error::before{content:"!";display:grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;font-weight:800}
.su-error[hidden]{display:none}

.su-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;margin-top:6px;border:0;border-radius:14px;background:linear-gradient(180deg,#2d7ff0,var(--blue));color:#fff;font:700 16px/1 "DM Sans",sans-serif;cursor:pointer;box-shadow:0 12px 24px -10px #2374e8b3,inset 0 1px 0 #ffffff33;transition:transform .15s,box-shadow .2s,filter .2s}
.su-submit:hover{filter:brightness(1.05);box-shadow:0 16px 30px -10px #2374e8cc,inset 0 1px 0 #ffffff33}
.su-submit:active{transform:translateY(1px)}
.su-submit:focus-visible{outline:3px solid #2374e855;outline-offset:3px}
.su-arrow{width:19px;height:19px;stroke-width:2.4;transition:transform .2s}
.su-submit:hover .su-arrow{transform:translateX(3px)}
.su-spin{display:none;width:20px;height:20px;border:2.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.su-submit.loading{pointer-events:none;filter:saturate(.8)}
.su-submit.loading .su-arrow{display:none}
.su-submit.loading .su-spin{display:block}
.su-legal{margin:16px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted)}

.su-done{text-align:center;padding:18px 0 6px;animation:rise .45s ease both}
.su-done[hidden]{display:none}
.su-done h1{margin-top:20px}
.su-done p{margin:0 0 24px;color:var(--muted);font-size:15.5px}
.su-check{display:grid;place-items:center;width:78px;height:78px;margin:0 auto;border-radius:50%;background:#e4f7f0;color:var(--green);box-shadow:0 0 0 10px #26b78b14}
.su-check svg{width:38px;height:38px;stroke-width:2.6;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .15s ease forwards}
.su-alt{display:inline-block;margin-top:16px;font-size:14px;color:var(--muted)}

.su-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;list-style:none;margin:22px 0 0;padding:0;font-size:13.5px;color:#5f6f86}
.su-trust li{display:flex;align-items:center;gap:7px}
.su-trust svg{color:var(--blue);background:#e5effd;width:18px;height:18px}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-8px)}}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.su-msg{opacity:1}.su-check svg{stroke-dashoffset:0}}

@media (max-width:980px){
  .su{grid-template-columns:1fr}
  .su-side{display:none}
  .su-top{justify-content:space-between}
  .su-top .su-logo{display:inline-flex}
  .su-card{margin:28px 0 0}
}
@media (max-width:560px){
  .su-main{padding:18px 16px 28px}
  .su-grid{grid-template-columns:1fr}
  .su-card{border-radius:20px;padding:24px 20px}
  .su-top{font-size:13.5px}
  .su-top .su-logo{font-size:21px}
  .su-top .su-logo img{width:26px;height:26px}
}

/* ---------- login ---------- */
.su-card-narrow{max-width:470px}
.su-top:has(+ .su-card-narrow){max-width:470px}
.su-view[hidden]{display:none}
.su-inline{font-size:13px;font-weight:600}
.su-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.su-back:hover{color:var(--ink)}
.su-back svg{width:17px;height:17px}
.su-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px;font-size:12.5px;color:#a3afc0;text-transform:uppercase;letter-spacing:.06em}
.su-divider::before,.su-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.su-ghost{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;transition:border-color .2s,background .2s,color .2s}
.su-ghost:hover{border-color:#bcd0ee;background:#f7faff;color:var(--blue)}
.su-done .su-ghost,.su-done .su-submit{margin-top:4px}
.su-mail{background:#e8f1fe;color:var(--blue);box-shadow:0 0 0 10px #2374e812}
.su-mail svg{stroke-dasharray:none;stroke-dashoffset:0;animation:none;width:34px;height:34px;stroke-width:2}

.su-inbox{position:relative;width:min(360px,100%);margin-left:auto;padding:8px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -20px #00000080,0 0 0 1px #ffffff14;transform:rotate(1.2deg);animation:float2 7s ease-in-out infinite}
.su-inbox-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 10px}
.su-inbox-head strong{font:800 15px Manrope,sans-serif;letter-spacing:-.02em}
.su-inbox-head span{padding:3px 9px;border-radius:99px;background:#eaf2fe;color:var(--blue);font-size:11.5px;font-weight:700}
.su-row{position:relative;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;opacity:0;animation:pop .45s ease forwards}
.su-row:nth-of-type(2){background:#f1f6fe;animation-delay:.15s}
.su-row:nth-of-type(3){animation-delay:.35s}
.su-row:nth-of-type(4){animation-delay:.55s}
.su-row b{display:block;font-size:13.5px}
.su-row small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-row time{align-self:start;font-size:11px;color:#a3afc0}
.su-row .dot{position:absolute;right:12px;bottom:14px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.su-row .su-av{width:36px;height:36px;font-size:12px}
.su-av.c1{background:#dceaff;color:#1f5fc4}.su-av.c2{background:#e3f5ee;color:#1d8a68}.su-av.c3{background:#efe6fb;color:#7a4bc0}
@keyframes float2{0%,100%{transform:rotate(1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-8px)}}
@media (max-width:560px){.su-q{display:none}}

/* ---------- mascote ---------- */
.su-card{position:relative}
.su-peek{position:absolute;top:-58px;right:26px;height:104px;pointer-events:none;filter:drop-shadow(0 10px 14px #12305a33);animation:peek .7s .2s cubic-bezier(.3,1.5,.5,1) both}
.su-done .su-peek,.su-card:has(.su-done:not([hidden])) .su-peek{display:none}
.su-stage{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;min-height:270px}
.su-stage .su-mascot{position:absolute;left:-6px;bottom:-14px;height:290px;z-index:1;filter:drop-shadow(0 24px 30px #0008);animation:mascotFloat 6s ease-in-out infinite;pointer-events:none}
.su-stage .su-demo,.su-stage .su-inbox{z-index:2;margin-left:0;width:min(300px,62%)}
.su-stage-login .su-inbox{width:min(320px,64%)}
.su-hero-mascot{display:block;height:170px;margin:0 auto -4px;filter:drop-shadow(0 16px 20px #12305a2e);animation:rise .5s ease both,mascotFloat 5s .5s ease-in-out infinite}
@keyframes peek{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:1200px){.su-stage .su-mascot{height:240px}}
@media (max-width:560px){.su-peek{height:84px;top:-46px;right:16px}.su-hero-mascot{height:140px}.su-main{padding-top:18px}.su-card{margin-top:52px}}
@media (prefers-reduced-motion:reduce){.su-peek,.su-stage .su-mascot,.su-hero-mascot{animation:none!important}}
.su-top{margin-bottom:62px}
@media (max-width:560px){.su-top{margin-bottom:22px}}