﻿@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/Manrope-Variable.ttf') format('truetype')}
:root{--tinta:#20202b;--tinta2:#686775;--azul:#5b55d9;--azul2:#3d3a9e}
*{box-sizing:border-box}
body{margin:0;position:relative;isolation:isolate;background:#f8fbff;color:var(--tinta);font:15px/1.55 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:'';position:fixed;inset:-70px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 8% 24%,rgba(97,220,233,.24),transparent 55%),radial-gradient(ellipse at 50% 0%,rgba(130,157,231,.18),transparent 55%),radial-gradient(ellipse at 64% 100%,rgba(172,152,238,.24),transparent 60%),radial-gradient(ellipse at 96% 60%,rgba(110,224,223,.18),transparent 52%);filter:blur(75px)}
.loginTopo{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;padding:64px 24px;display:grid;align-items:center}
.loginTopo:before{content:'';position:absolute;z-index:-1;inset:-65px;pointer-events:none;background:radial-gradient(ellipse at 8% 24%,#61dce9 0%,transparent 45%),radial-gradient(ellipse at 50% 0%,#829de7 0%,transparent 48%),radial-gradient(ellipse at 64% 100%,#ac98ee 0%,transparent 52%),radial-gradient(ellipse at 96% 60%,#6ee0df 0%,transparent 42%);filter:blur(75px) saturate(1.25);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent calc(100% - 65px))}
.loginWrap{width:100%;max-width:1152px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
.identidade{min-width:0;padding:12px 0 12px 24px}
.rede{font-size:13px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:#53627f;margin-bottom:24px}
h1{font-size:clamp(52px,6.5vw,92px);max-width:560px;font-weight:500;letter-spacing:-2.8px;line-height:1.06;margin:0}
.descricao{max-width:430px;margin:26px 0 0;font-size:18px;line-height:1.65;color:#586178}
.loginCaixa{padding:12px;border-radius:26px;background:rgba(255,255,255,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 20px 60px rgba(53,51,87,.06)}
.loginConteudo{border:0;border-radius:14px;padding:32px;background:rgba(255,255,255,.8);box-shadow:0 7px 18px rgba(53,51,87,.06)}
.etiqueta{display:inline-block;background:#f0efff;color:var(--azul2);font-size:11px;font-weight:650;padding:5px 11px;border-radius:999px}
h2{font-size:25px;font-weight:650;letter-spacing:-.6px;margin:18px 0 8px}.apoio{color:var(--tinta2);margin:0 0 26px;font-size:14px}
label{display:block;font-size:13px;font-weight:650;margin:18px 0 7px}
input{width:100%;min-height:48px;padding:12px 14px;border:1px solid #d4d3e3;border-radius:9px;background:rgba(255,255,255,.85);color:var(--tinta);font:inherit}
input::placeholder{color:#777585;font-size:14px}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #3d3a9e;outline-offset:3px}
button,.botao{display:block;text-align:center;width:100%;border:0;border-radius:9px;background:var(--azul);color:white;padding:14px;font:600 14px/1.5 Manrope,sans-serif;margin-top:26px;cursor:pointer;text-decoration:none;transition:background .15s}
button:hover,.botao:hover{background:var(--azul2)}button span{margin-left:12px}.secundario{background:#f0efff;color:var(--azul2);margin-top:12px}.secundario:hover{background:#e4e2ff}
.erro{color:#a52623;background:#fdecea;border-radius:8px;padding:12px;font-size:14px}.rodape{font-size:11px;text-align:center;color:#686775;margin:16px 4px 5px}
@media(max-width:760px){.loginTopo{padding:40px 20px}.loginWrap{grid-template-columns:1fr;gap:32px;max-width:480px}.identidade{padding:0}.rede{margin-bottom:16px}h1{font-size:54px;letter-spacing:-2px}.descricao{font-size:16px;margin-top:18px}.loginConteudo{padding:26px}}
@media(max-width:360px){h1{font-size:46px}.loginTopo{padding:28px 14px}.loginConteudo{padding:20px}}

/* Caixa central, radar de fundo e indicadores laterais. */
.loginTopo{padding:64px 24px}
.loginWrap{display:grid;grid-template-columns:1fr;grid-template-areas:'formulario';max-width:none;gap:0;place-items:center}
.loginCaixa{grid-area:formulario;position:relative;z-index:3;width:min(100%,460px)}
.loginTopo .heroArte{grid-area:auto;position:absolute;inset:0;height:auto;margin:0;z-index:0;pointer-events:none}
/* Cérebro 40% maior (23/10/2026); o limite pela altura (211vh) mantém o cérebro inteiro em telas baixas (768 px). */
.loginTopo .radar{width:clamp(1100px,min(126vw,211vh),2100px);left:50%;top:50%}
.loginTopo .arteChip{font-size:15px;padding:14px 19px;border-radius:24px}
.loginTopo .chipA{left:auto;right:calc(50% + 285px);top:30%;bottom:auto}
.loginTopo .chipB{right:auto;left:calc(50% + 285px);top:38%;bottom:auto}
.loginTopo .chipC{left:auto;right:calc(50% + 255px);top:65%;bottom:auto}
.loginTopo .chipD{right:auto;left:calc(50% + 255px);top:70%;bottom:auto}
@media(max-width:1050px){
 .loginTopo .chipA,.loginTopo .chipC{right:calc(50% + 235px)}
 .loginTopo .chipB,.loginTopo .chipD{left:calc(50% + 235px)}
 .loginTopo .arteChip{font-size:12px;padding:10px 12px}
}
@media(max-width:760px){
 .loginTopo{padding:105px 20px;min-height:100svh}
 .loginTopo .radar{width:950px}
 .loginTopo .chipA{left:5%;right:auto;top:24px}
 .loginTopo .chipB{right:5%;left:auto;top:44px}
 .loginTopo .chipC{left:5%;right:auto;top:auto;bottom:42px}
 .loginTopo .chipD{right:5%;left:auto;top:auto;bottom:22px}
}

