/* Enjoy Admin — a tela de entrada. Mesma linguagem do painel (papel claro, tinta azul, dourado). Só tema claro. */
:root{
  --papel:#f5f4f3; --superficie:#fbfbfa; --cartao:#fff;
  --tinta:#001f35; --tinta-media:color-mix(in oklab,#001f35 72%,#f5f4f3); --tinta-fraca:color-mix(in oklab,#001f35 54%,#f5f4f3);
  --linha:color-mix(in oklab,#001f35 10%,#f5f4f3); --linha-forte:color-mix(in oklab,#001f35 18%,#f5f4f3);
  --dourado:#b9915b; --ouro-claro:#f2d796; --ouro-escuro:#9a6e27;
  --entrada:#1f6b3a; --entrada-fraca:#e6f3ea; --saida:#842e20; --saida-fraca:#f6e7e3; --ambar:#a8681a; --ambar-fraco:#fbf0de;
  --fonte:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --suave:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--fonte);background:var(--papel);color:var(--tinta);-webkit-font-smoothing:antialiased;font-size:14px;overflow-x:hidden}
button,input{font:inherit;color:inherit}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tela{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(460px,.88fr);padding:14px}

/* ------------------------------------------------ marca */
.marca{display:flex;align-items:center;gap:11px}
.marca-selo{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#0d3350,var(--tinta) 62%);display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -10px rgba(0,31,53,.7)}
.marca-selo span{font:800 18px var(--fonte);color:#e9cf97}
.marca-nome b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.marca-nome small{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-fraca)}

/* ------------------------------------------------ vitrine (lado esquerdo) */
.vitrine{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;border:1px solid var(--linha);display:flex;flex-direction:column;padding:32px clamp(28px,4vw,60px) 26px;min-height:calc(100dvh - 28px);animation:aparece .8s var(--suave) both}
.vitrine-fundo{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 440px at 92% -8%,color-mix(in oklab,var(--dourado) 24%,transparent),transparent 70%),
             radial-gradient(560px 520px at -10% 110%,color-mix(in oklab,var(--tinta) 7%,transparent),transparent 70%),
             linear-gradient(180deg,#fff,var(--superficie) 55%,color-mix(in oklab,var(--papel) 60%,#fff))}
.vitrine-fundo::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(color-mix(in oklab,var(--tinta) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--tinta) 5%,transparent) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(62% 54% at 52% 66%,#000,transparent 78%);mask-image:radial-gradient(62% 54% at 52% 66%,#000,transparent 78%)}
.vitrine-texto{margin-top:clamp(32px,6.5vh,76px);max-width:580px}
.vitrine-texto > *{animation:subir .8s var(--suave) both}
.vitrine-texto > :nth-child(2){animation-delay:.08s}
.vitrine-texto > :nth-child(3){animation-delay:.16s}
.sobre{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-escuro)}
.vitrine h2{margin:14px 0 14px;font-size:clamp(34px,3.5vw,52px);line-height:1.04;letter-spacing:-.04em;font-weight:700}
.vitrine h2 em{font-style:normal;background:linear-gradient(120deg,var(--ouro-escuro),var(--dourado) 45%,var(--ouro-escuro));-webkit-background-clip:text;background-clip:text;color:transparent}
.vitrine-texto p{margin:0;max-width:470px;font-size:16px;line-height:1.55;color:var(--tinta-media)}
.vitrine-pe{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--tinta-fraca)}
.vivo{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--entrada);box-shadow:0 0 0 3px var(--entrada-fraca);margin-right:9px;vertical-align:1px;animation:vivo 2.4s ease-in-out infinite}

/* a órbita: o painel no centro e os sistemas em volta; um "passe" dourado corre até cada um */
.orbita{position:relative;flex:1;min-height:320px;margin:14px 0 12px}
.orbita-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:aparece 1.2s var(--suave) .35s both}
.fio{fill:none;stroke:color-mix(in oklab,var(--tinta) 24%,transparent);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1 7}
.luz{fill:none;stroke:var(--dourado);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 100;stroke-dashoffset:14;opacity:0;filter:drop-shadow(0 0 4px color-mix(in oklab,var(--dourado) 70%,transparent))}
.luz.ativa{animation:viajar .95s cubic-bezier(.45,.05,.35,1) both}
.nucleo{position:absolute;left:50%;top:50%;width:84px;height:84px;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:2;animation:nucleo-entra .9s var(--suave) .15s both}
.nucleo-selo{position:relative;width:78px;height:78px;border-radius:23px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 28% 18%,#1a4d72,var(--tinta) 55%,#00131f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 44px -18px rgba(0,31,53,.75),0 0 0 9px color-mix(in oklab,#fff 75%,transparent)}
.nucleo-selo span{font:800 36px var(--fonte);background:linear-gradient(160deg,#f6dc8c,#d6a650 55%,#9a6e27);-webkit-background-clip:text;background-clip:text;color:transparent}
.onda{position:absolute;inset:-3px;border-radius:27px;border:1.5px solid color-mix(in oklab,var(--dourado) 60%,transparent);animation:onda 3.4s var(--suave) infinite;pointer-events:none}
.onda.o2{animation-delay:1.7s}
.sis{position:absolute;left:var(--x);top:var(--y);z-index:1;transform:translate(-50%,-50%);animation:sis-entra .75s var(--suave) both;animation-delay:calc(.45s + var(--i) * 80ms)}
.sis-corpo{position:relative;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:15px;background:var(--cartao);border:1px solid var(--linha);white-space:nowrap;font-weight:700;font-size:13px;letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(0,31,53,.03),0 16px 30px -22px rgba(0,31,53,.55);animation:flutua var(--dur,6s) ease-in-out infinite;animation-delay:calc(var(--i) * -.9s);transition:border-color .4s,box-shadow .4s}
.sis-icone{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in oklab,var(--cor) 13%,var(--cartao));color:var(--cor);transition:background .4s,color .4s}
.sis-icone svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sis-icone svg.cash{width:19px;height:18px;stroke:none}
.sis-ok{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;background:var(--entrada);display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--suave);box-shadow:0 0 0 3px var(--cartao)}
.sis-ok svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sis.aceso .sis-corpo{border-color:color-mix(in oklab,var(--cor) 50%,var(--linha));box-shadow:0 0 0 4px color-mix(in oklab,var(--cor) 12%,transparent),0 20px 36px -20px color-mix(in oklab,var(--cor) 85%,transparent)}
.sis.aceso .sis-icone{background:var(--cor);color:#fff}
.sis.aceso[data-icone="cash"] .sis-icone{background:color-mix(in oklab,var(--cor) 24%,var(--cartao))}
.sis.aceso .sis-ok{transform:scale(1)}

/* ------------------------------------------------ o lado do formulário */
.lado{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px clamp(20px,4vw,60px);min-width:0}
.marca-topo,.mini{display:none}
.cartao{position:relative;width:min(424px,100%);background:var(--cartao);border:1px solid var(--linha);border-radius:24px;padding:34px 34px 30px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,31,53,.03),0 44px 90px -52px rgba(0,31,53,.5);transition:height .4s var(--suave);animation:subir .8s var(--suave) .1s both}
.cartao::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--dourado),transparent);opacity:.6}
.vistas.treme{animation:treme .45s cubic-bezier(.36,.07,.19,.97)}
.vista{display:flex;flex-direction:column}
.vista[hidden]{display:none}
.vista.entra{animation:vista-entra .45s var(--suave) both}
.vista.centro{align-items:center;text-align:center}
.rotulo{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-escuro)}
.vista h1{margin:8px 0 8px;font-size:28px;line-height:1.12;letter-spacing:-.03em;font-weight:700;outline:none}
.lead{margin:0 0 22px;color:var(--tinta-media);font-size:14.5px;line-height:1.55}
.lead b{color:var(--tinta);font-weight:700;word-break:break-all}

/* Google */
.botao-google{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;height:50px;border-radius:13px;border:1px solid var(--linha-forte);background:#fff;font-weight:700;font-size:15px;color:var(--tinta);text-decoration:none;
  transition:border-color .2s,box-shadow .3s var(--suave),transform .3s var(--suave)}
.botao-google:hover{border-color:color-mix(in oklab,var(--tinta) 30%,var(--papel));box-shadow:0 16px 30px -22px rgba(0,31,53,.65);transform:translateY(-1px)}
.botao-google:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
.botao-google[aria-busy="true"]{pointer-events:none;opacity:.75}
.botao-google[aria-busy="true"] svg{animation:gira 1s linear infinite}
.ultimo{margin-left:-2px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:color-mix(in oklab,var(--dourado) 15%,#fff);color:var(--ouro-escuro)}
.ultimo[hidden]{display:none}
.ou{display:flex;align-items:center;gap:12px;margin:20px 0 18px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-fraca);white-space:nowrap}
.ou::before,.ou::after{content:'';flex:1;height:1px;background:var(--linha)}
.ou[hidden],.botao-google[hidden]{display:none}

/* campos */
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.campo[hidden]{display:none}
.campo-rotulo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--tinta)}
.campo-caixa{position:relative;display:flex;align-items:center;height:50px;border-radius:13px;border:1px solid var(--linha-forte);background:#fff;transition:border-color .2s,box-shadow .25s}
.campo-caixa:hover{border-color:color-mix(in oklab,var(--tinta) 28%,var(--papel))}
.campo-caixa:focus-within{border-color:var(--dourado);box-shadow:0 0 0 4px color-mix(in oklab,var(--dourado) 18%,transparent)}
.campo-caixa.erro{border-color:var(--saida);box-shadow:0 0 0 4px color-mix(in oklab,var(--saida) 11%,transparent)}
.campo-icone{width:18px;height:18px;margin-left:15px;flex:none;fill:none;stroke:var(--tinta-fraca);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.campo-caixa:focus-within .campo-icone{stroke:var(--ouro-escuro)}
.campo-caixa.erro .campo-icone{stroke:var(--saida)}
.campo-caixa input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;padding:0 14px 0 11px;font-size:15px;font-weight:500;color:var(--tinta);border-radius:13px}
.campo-caixa input::placeholder{color:color-mix(in oklab,var(--tinta) 36%,var(--papel));font-weight:400}
.campo-caixa input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:var(--tinta);caret-color:var(--tinta)}
.olho{width:42px;height:42px;margin-right:4px;border:none;background:none;border-radius:10px;cursor:pointer;display:grid;place-items:center;color:var(--tinta-fraca);flex:none;transition:color .2s,background .2s}
.olho:hover{color:var(--tinta);background:color-mix(in oklab,var(--tinta) 5%,transparent)}
.olho:focus-visible{outline:2px solid var(--dourado);outline-offset:-2px}
.olho svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.caps{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ambar);animation:surge .25s var(--suave)}
.caps[hidden]{display:none}
.caps svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.completar{display:flex;flex-wrap:wrap;gap:6px;animation:surge .25s var(--suave)}
.completar[hidden]{display:none}
.completar button{border:1px dashed var(--linha-forte);background:var(--superficie);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--tinta-fraca);transition:border-color .2s,background .2s,color .2s}
.completar button b{color:var(--tinta);font-weight:700}
.completar button:hover,.completar button:focus-visible{border-style:solid;border-color:var(--dourado);color:var(--tinta-media);background:#fff;outline:none}

/* caixa de seleção */
.caixa{position:relative;display:flex;align-items:center;gap:10px;margin:2px 0 20px;font-size:13.5px;color:var(--tinta-media);cursor:pointer;user-select:none;-webkit-user-select:none}
.caixa input{position:absolute;opacity:0;width:1px;height:1px}
.caixa-marca{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--linha-forte);background:#fff;display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s}
.caixa-marca::after{content:'';width:9px;height:5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .25s var(--suave)}
.caixa:hover .caixa-marca{border-color:color-mix(in oklab,var(--tinta) 35%,var(--papel))}
.caixa input:checked + .caixa-marca{background:var(--tinta);border-color:var(--tinta)}
.caixa input:checked + .caixa-marca::after{transform:rotate(-45deg) scale(1)}
.caixa input:focus-visible + .caixa-marca{outline:2px solid var(--dourado);outline-offset:2px}

/* botões */
.botao-principal{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:none;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,#0c2f4b,var(--tinta));color:#fff;font-weight:700;font-size:15px;letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 30px -18px rgba(0,31,53,.85);transition:transform .25s var(--suave),box-shadow .25s var(--suave),background .4s}
.botao-principal::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--suave)}
.botao-principal:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 40px -20px rgba(0,31,53,.9)}
.botao-principal:hover::after{transform:translateX(120%)}
.botao-principal:active{transform:scale(.99)}
.botao-principal:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
.botao-principal .rot{display:inline-flex;align-items:center}
.seta{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--suave)}
.botao-principal:hover .seta{transform:translateX(3px)}
.botao-principal[aria-busy="true"]{pointer-events:none}
.botao-principal[aria-busy="true"] .seta{display:none}
.botao-principal[aria-busy="true"] .rot::before{content:'';width:15px;height:15px;margin-right:10px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
.botao-principal.ok{background:linear-gradient(180deg,#2c8550,var(--entrada))}
.botao-principal.ok .seta{display:none}
.vista.centro .botao-principal{margin:4px 0 16px}
.botao-secundario{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 20px;margin:2px 0 16px;border-radius:12px;border:1px solid var(--linha-forte);background:#fff;font-weight:700;font-size:14px;color:var(--tinta);text-decoration:none;transition:border-color .25s,box-shadow .25s var(--suave),transform .25s var(--suave)}
.botao-secundario:hover{border-color:var(--dourado);box-shadow:0 12px 26px -18px rgba(0,31,53,.55);transform:translateY(-1px)}
.botao-secundario:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
.botao-secundario svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.link{border:none;background:none;padding:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--ouro-escuro);text-decoration:none;border-radius:4px}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}
.link:disabled{color:var(--tinta-fraca);cursor:default;text-decoration:none}
.link.forte{font-weight:700}
.troca{margin:20px 0 0;text-align:center;font-size:13.5px;color:var(--tinta-fraca)}
.voltar{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:-8px 0 14px -8px;padding:6px 10px 6px 7px;border:none;background:none;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--tinta-media)}
.voltar:hover{background:color-mix(in oklab,var(--tinta) 5%,transparent);color:var(--tinta)}
.voltar:focus-visible{outline:2px solid var(--dourado);outline-offset:1px}
.voltar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--suave)}
.voltar:hover svg{transform:translateX(-2px)}

/* avisos */
.aviso{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.5;color:var(--saida);background:var(--saida-fraca);border:1px solid color-mix(in oklab,var(--saida) 16%,transparent);animation:surge .3s var(--suave)}
.aviso[hidden]{display:none}
.aviso.ok{color:var(--entrada);background:var(--entrada-fraca);border-color:color-mix(in oklab,var(--entrada) 16%,transparent)}
.aviso svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aviso .link{font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
form .aviso{margin:-2px 0 16px}

/* selo no alto das vistas */
.selo-vista{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;background:color-mix(in oklab,var(--dourado) 14%,#fff);color:var(--ouro-escuro);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--dourado) 28%,transparent);animation:pula .6s var(--suave) both .1s}
.selo-vista svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.selo-vista.alerta{background:var(--ambar-fraco);color:var(--ambar);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ambar) 22%,transparent)}
.vista.centro .selo-vista{margin:6px auto 14px}

/* e-mail enviado */
.envelope{position:relative;width:132px;height:106px;margin:4px auto 12px}
.envelope svg{width:100%;height:100%;overflow:visible}
.env-fundo{fill:color-mix(in oklab,var(--dourado) 16%,#fff);stroke:color-mix(in oklab,var(--dourado) 55%,var(--linha));stroke-width:1.5;stroke-linejoin:round}
.env-carta{animation:carta 2.8s var(--suave) infinite}
.env-carta rect{fill:#fff;stroke:var(--linha-forte);stroke-width:1.4}
.env-carta path{stroke:color-mix(in oklab,var(--tinta) 22%,transparent);stroke-width:3;stroke-linecap:round}
.env-frente{fill:#fff;stroke:color-mix(in oklab,var(--dourado) 55%,var(--linha));stroke-width:1.5;stroke-linejoin:round}
.env-dobra{fill:none;stroke:color-mix(in oklab,var(--dourado) 38%,var(--linha));stroke-width:1.4;stroke-linecap:round}
.faisca{position:absolute;width:7px;height:7px;border-radius:2px;background:var(--dourado);opacity:0;transform:rotate(45deg);animation:faisca 2.8s ease-in-out infinite}
.f1{left:6px;top:24px}
.f2{right:2px;top:8px;width:5px;height:5px;animation-delay:.5s}
.f3{right:16px;top:46px;width:4px;height:4px;animation-delay:1s}
.dica{margin:0 0 12px;font-size:12.5px;line-height:1.7;color:var(--tinta-fraca)}

/* link do e-mail: criar / redefinir */
.conferindo{display:flex;align-items:center;justify-content:center;gap:12px;padding:46px 0;color:var(--tinta-media);font-weight:600}
.conferindo[hidden]{display:none}
.giro{width:18px;height:18px;border-radius:50%;border:2px solid var(--linha-forte);border-top-color:var(--dourado);animation:gira .8s linear infinite}
.conta{display:flex;align-items:center;gap:11px;margin:4px 0 20px;padding:10px 12px;border-radius:14px;background:var(--superficie);border:1px solid var(--linha)}
.conta-av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#184560,var(--tinta));color:#fff;font-weight:700;font-size:13px}
.conta-txt{min-width:0}
.conta-txt b,.conta-txt small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-txt b{font-size:14px}
.conta-txt small{font-size:12.5px;color:var(--tinta-fraca)}
.medidor{display:flex;align-items:center;gap:10px;margin-top:2px}
.medidor-barras{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.medidor-barras i{position:relative;overflow:hidden;height:5px;border-radius:3px;background:var(--linha)}
.medidor-barras i::after{content:'';position:absolute;inset:0;background:var(--cor-medidor,var(--linha));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--suave),background .3s}
.medidor[data-nivel="1"]{--cor-medidor:var(--saida)}
.medidor[data-nivel="2"]{--cor-medidor:var(--ambar)}
.medidor[data-nivel="3"]{--cor-medidor:var(--dourado)}
.medidor[data-nivel="4"]{--cor-medidor:var(--entrada)}
.medidor[data-nivel="1"] i:nth-child(-n+1)::after,.medidor[data-nivel="2"] i:nth-child(-n+2)::after,.medidor[data-nivel="3"] i:nth-child(-n+3)::after,.medidor[data-nivel="4"] i::after{transform:scaleX(1)}
.medidor-barras i:nth-child(2)::after{transition-delay:.05s}.medidor-barras i:nth-child(3)::after{transition-delay:.1s}.medidor-barras i:nth-child(4)::after{transition-delay:.15s}
.medidor-rot{min-width:74px;text-align:right;font-size:12px;font-weight:700;color:var(--cor-medidor,var(--tinta-fraca))}
.requisitos{list-style:none;display:grid;gap:7px;margin:10px 0 2px;padding:0}
.requisitos li{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.35;color:var(--tinta-fraca);transition:color .25s}
.requisitos i{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--linha-forte);transition:background .3s,border-color .3s}
.requisitos i::after{content:'';width:7px;height:4px;margin-top:-1px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .3s var(--suave)}
.requisitos li.ok{color:var(--tinta)}
.requisitos li.ok i{background:var(--entrada);border-color:var(--entrada)}
.requisitos li.ok i::after{transform:rotate(-45deg) scale(1)}
.requisitos li.falha{color:var(--saida)}
.requisitos li.falha i{border-color:var(--saida)}
.confere{width:20px;height:20px;margin-right:14px;flex:none;border-radius:50%;display:grid;place-items:center;transform:scale(0);transition:transform .3s var(--suave),background .2s}
.confere.sim{transform:scale(1);background:var(--entrada)}
.confere.sim::after{content:'';width:8px;height:4px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.confere.nao{transform:scale(1);background:var(--saida-fraca)}
.confere.nao::after{content:'';width:9px;height:2px;border-radius:1px;background:var(--saida)}

/* senha salva */
.sucesso{position:relative;width:96px;height:96px;margin:8px auto 14px}
.sucesso svg{width:100%;height:100%;overflow:visible}
.suc-anel{fill:var(--entrada-fraca);stroke:var(--entrada);stroke-width:3;stroke-dasharray:214;stroke-dashoffset:214;transform:rotate(-90deg);transform-origin:40px 40px;animation:desenha .7s var(--suave) forwards}
.suc-check{fill:none;stroke:var(--entrada);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:46;stroke-dashoffset:46;animation:desenha .45s var(--suave) .55s forwards}
.sucesso i{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:2px;background:var(--dourado);opacity:0;animation:estoura 1s var(--suave) .65s forwards}
.sucesso i:nth-of-type(2n){width:5px;height:5px;background:var(--entrada)}
.sucesso i:nth-of-type(1){--a:0deg}.sucesso i:nth-of-type(2){--a:45deg}.sucesso i:nth-of-type(3){--a:90deg}.sucesso i:nth-of-type(4){--a:135deg}
.sucesso i:nth-of-type(5){--a:180deg}.sucesso i:nth-of-type(6){--a:225deg}.sucesso i:nth-of-type(7){--a:270deg}.sucesso i:nth-of-type(8){--a:315deg}
.progresso{width:170px;height:4px;margin:4px auto 6px;border-radius:2px;background:var(--linha);overflow:hidden}
.progresso i{display:block;height:100%;background:linear-gradient(90deg,var(--dourado),var(--ouro-escuro));transform:scaleX(0);transform-origin:left;animation:enche 1.6s var(--suave) .3s forwards}

.rodape{max-width:424px;margin:0;font-size:12px;line-height:1.6;color:var(--tinta-fraca);text-align:center;text-wrap:balance;animation:aparece 1s ease .5s both}
.rodape svg{width:13px;height:13px;margin-right:6px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}

/* ------------------------------------------------ movimento */
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes vista-entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes treme{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes vivo{0%,100%{box-shadow:0 0 0 3px var(--entrada-fraca)}50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--entrada-fraca) 40%,transparent)}}
@keyframes onda{0%{transform:scale(.92);opacity:.75}100%{transform:scale(2.15);opacity:0}}
@keyframes nucleo-entra{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes sis-entra{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes viajar{0%{stroke-dashoffset:14;opacity:0}12%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes pula{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes carta{0%,100%{transform:translateY(16px)}45%,72%{transform:translateY(-6px)}}
@keyframes faisca{0%,100%{opacity:0;transform:rotate(45deg) scale(.4)}40%{opacity:1;transform:rotate(45deg) scale(1)}70%{opacity:0;transform:rotate(45deg) scale(.6)}}
@keyframes desenha{to{stroke-dashoffset:0}}
@keyframes estoura{0%{opacity:1;transform:rotate(var(--a)) translateX(30px) scale(.4)}100%{opacity:0;transform:rotate(var(--a)) translateX(66px) scale(1)}}
@keyframes enche{to{transform:scaleX(1)}}

/* ------------------------------------------------ telas menores */
@media (max-width:1180px){.tela{grid-template-columns:minmax(0,1fr) minmax(440px,1fr)}.vitrine h2{font-size:clamp(30px,3.3vw,44px)}}
@media (max-width:980px){
  .tela{grid-template-columns:minmax(0,1fr);padding:0}
  .vitrine{display:none}
  .lado{justify-content:flex-start;min-height:100dvh;padding:26px 16px 30px;gap:16px;
    background:radial-gradient(520px 320px at 100% -4%,color-mix(in oklab,var(--dourado) 20%,transparent),transparent 70%),radial-gradient(420px 360px at -20% 100%,color-mix(in oklab,var(--tinta) 6%,transparent),transparent 70%)}
  .marca-topo{display:flex;margin-top:6px}
  .mini{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:424px}
  .mini-sis{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;background:color-mix(in oklab,#fff 80%,transparent);border:1px solid var(--linha);font-size:11.5px;font-weight:700;color:var(--tinta-media);animation:subir .6s var(--suave) both;animation-delay:calc(.2s + var(--i) * 60ms)}
  .mini-sis i{width:7px;height:7px;border-radius:50%;background:var(--cor)}
  .cartao{padding:28px 22px 24px;border-radius:22px}
}
@media (max-width:400px){.vista h1{font-size:25px}.cartao{padding:26px 18px 22px}.ultimo{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
}