/* Conta Lab · porte do "Conta Lab.dc.html" e do "Ajustes da Conta.dc.html" (pacote Inovaccio8).
   Colunas do desenho mudam em 1000 px (W) e 700 px (M), como no script do protótipo. */
@keyframes clIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes clDots{from{opacity:0}to{opacity:1}}
@keyframes clBorder{to{transform:rotate(360deg)}}
@keyframes clSpin{to{transform:rotate(360deg)}}

.cl-pg{position:relative;min-height:100vh;background:#FAFAF8;color:#09090B;overflow-x:hidden}
.cl-pg a{color:inherit;text-decoration:none}
.cl-pg a:hover{opacity:.92}
.cl-pg input::placeholder,.cl-pg textarea::placeholder{color:#A4A4AA}
.cl-pg :focus-visible:not(input):not(textarea){outline:2px solid #09090B;outline-offset:3px;border-radius:12px}
.cl-pontos{position:absolute;left:0;top:0;width:min(560px,70vw);height:420px;background-image:radial-gradient(rgba(9,9,11,.16) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask:radial-gradient(ellipse at 0 0,#000 10%,transparent 70%);mask:radial-gradient(ellipse at 0 0,#000 10%,transparent 70%);animation:clDots 2.4s ease both;pointer-events:none}

/* Entrar */
.cl-entrar{position:relative;padding:clamp(120px,14vw,170px) clamp(20px,4vw,48px) clamp(72px,9vw,120px)}
.cl-entrar-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
@media (min-width:1000px){.cl-entrar-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.cl-entrar-tx{display:flex;flex-direction:column;gap:22px;animation:clIn .9s cubic-bezier(.22,1,.36,1) both}
.cl-k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6E6E74}
.cl-k-orb{width:22px;height:22px;display:flex}
.cl-entrar-tx h1{margin:0;font-size:clamp(40px,5.4vw,76px);font-weight:300;letter-spacing:-0.055em;line-height:.96;text-wrap:balance}
.cl-entrar-tx p{margin:0;max-width:480px;font-size:17px;line-height:1.6;font-weight:300;color:#55555B}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px}
.cl-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:999px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(9,9,11,.07);font-size:13.5px;font-weight:500}
.cl-vant{display:flex;flex-wrap:wrap;gap:18px;margin-top:4px}
.cl-vant span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:300;color:#33333B}
.cl-entrar-caixa{position:relative;animation:clIn 1s .12s cubic-bezier(.22,1,.36,1) both}
.cl-entrar-luz{position:absolute;inset:10% -8% -10% 8%;border-radius:40px;background:radial-gradient(circle at 80% 90%,rgba(204,6,1,.16),transparent 60%);filter:blur(30px);pointer-events:none}
.cl-form{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,36px);border-radius:32px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(9,9,11,.06),0 40px 80px -48px rgba(9,9,11,.35)}
.cl-form-t{font-size:22px;font-weight:700;letter-spacing:-0.03em}
.cl-form-s{margin-top:-8px;font-size:14px;font-weight:300;line-height:1.5;color:#6E6E74}
.cl-campo{display:flex;flex-direction:column;gap:8px}
.cl-campo>span{font-size:13px;font-weight:500;color:#33333B}
.cl-campo input{height:54px;padding:0 20px;border:none;outline:none;border-radius:999px;background:#F4F3F1;box-shadow:inset 0 0 0 1px rgba(9,9,11,.06);font-family:'Ubuntu',sans-serif;font-size:16px;font-weight:500;color:#09090B}
.cl-campo input:disabled{color:#09090B;opacity:1;-webkit-text-fill-color:#09090B}
.cl-cod{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1)}
.cl-cod.on{grid-template-rows:1fr}
.cl-cod-in{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.cl-cod-k{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:500;color:#33333B}
.cl-cod-k span{font-weight:300;color:#8A8A90}
.cl-caixas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cl-caixas span{height:54px;border-radius:16px;background:#F4F3F1;box-shadow:inset 0 0 0 1px rgba(9,9,11,.06);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;transition:box-shadow .4s}
.cl-caixas span.atual{box-shadow:inset 0 0 0 1.5px #09090B}
.cl-cx{position:relative}
.cl-cx input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;outline:none;background:transparent;opacity:0;font-size:16px;caret-color:transparent;cursor:text}
.cl-erro{font-size:13px;font-weight:500;color:#CC0601;line-height:1.45}
.cl-bt{display:flex;justify-content:center;align-items:center;gap:10px;height:54px;border:none;border-radius:999px;background:#09090B;color:#FFFFFF;font-family:'Ubuntu',sans-serif;font-size:15.5px;font-weight:500;cursor:pointer;transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.cl-bt:hover:not(:disabled){transform:translateY(-2px)}
.cl-bt:disabled{opacity:.45;cursor:not-allowed}
.cl-bt.carregando{opacity:1;cursor:wait}
.cl-spin{display:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#FFFFFF;animation:clSpin .8s linear infinite}
.cl-bt.carregando .cl-spin{display:block}
.cl-ou{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:300;color:#8A8A90}
.cl-ou span{flex:1;height:1px;background:rgba(9,9,11,.08)}
.cl-google{display:flex;justify-content:center;align-items:center;gap:10px;height:52px;border:none;border-radius:999px;background:#F4F3F1;color:#09090B;font-family:'Ubuntu',sans-serif;font-size:15px;font-weight:500;cursor:pointer;transition:background .4s}
.cl-google:hover{background:#ECEAE6}
.cl-sem{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:300;color:#8A8A90}

@media (prefers-reduced-motion:reduce){.cl-pg *{animation:none!important;transition:none!important}}