*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--font); -webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.stage{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; min-height:100vh}
/* ---------- LEFT ---------- */
.left{
position:relative; display:flex; flex-direction:column;
padding:clamp(28px,4.4vw,64px) clamp(28px,8vw,116px); background:var(--bg);
border-right:1px solid var(--border); /* régua vertical */
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:clamp(40px,7vh,88px)}
.mark{
width:28px; height:28px; border-radius:var(--radius-sm); background:var(--ink);
color:var(--bg); display:grid; place-items:center;
font-weight:600; font-size: var(--pf-fs-15); letter-spacing:-.02em;
}
.brand b{font-weight:600; font-size: var(--pf-fs-20); letter-spacing:-.01em}
.form-wrap{max-width:460px; width:100%}
h1{
margin:0; font-size:clamp(26px,3vw,31px); font-weight:600;
letter-spacing:-.025em; line-height:1.12; text-wrap:balance;
}
.sub{margin:10px 0 0; color:var(--muted); font-size: var(--pf-fs-15)}
form{margin-top:34px}
label{display:block; font-size: var(--pf-fs-13); font-weight:500; margin-bottom:10px}
.field-row{display:flex; gap:10px}
input[type=email]{
flex:1; min-width:0; height:46px; padding:0 14px;
border:1px solid var(--field); border-radius:var(--radius-md);
background:var(--card); color:var(--ink); font:inherit; font-size: var(--pf-fs-15);
transition:border-color .15s, box-shadow .15s;
}
input[type=email]::placeholder{color:var(--btn-ink)}
input[type=email]:focus{outline:none; border-color:var(--focus); box-shadow:var(--ring-focus)}
.continue{
height:46px; padding:0 22px; border:0; border-radius:var(--radius-md);
background:var(--btn); color:var(--btn-ink); font:inherit; font-size: var(--pf-fs-13); font-weight:500;
cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;
}
.continue:hover{background:var(--ink); color:var(--bg)}
.continue:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.done{
max-width:460px; margin-top:34px; padding:16px 18px; border:1px solid var(--border);
border-radius:var(--radius-md); background:var(--panel); font-size: var(--pf-fs-13); line-height:1.5;
display:none;
}
.done b{font-weight:600}
.spacer{flex:1; min-height:24px}
.demo{
max-width:460px; width:100%; border:1px solid var(--border); border-radius:var(--radius-lg);
background:var(--card); padding:20px; margin-bottom:26px;
}
.demo-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.demo-top strong{display:block; font-size: var(--pf-fs-15); font-weight:600}
.demo-top span{display:block; margin-top:4px; color:var(--muted); font-size: var(--pf-fs-13); max-width:230px}
.avatars{display:flex; padding-left:8px}
.avatars img{
width:32px; height:32px; border-radius:50%; margin-left:-10px;
border:2px solid var(--card); object-fit:cover; display:block; background:var(--field);
}
.ghost{
margin-top:16px; display:inline-flex; align-items:center; gap:8px;
height:38px; padding:0 16px; border:1px solid var(--border); border-radius:var(--radius-md);
background:var(--card); color:var(--ink); font:inherit; font-size: var(--pf-fs-13); font-weight:500; cursor:pointer;
box-shadow:var(--shadow-sm);
transition:background .15s, border-color .15s, box-shadow .15s;
}
.ghost:hover{background:var(--panel); border-color:var(--muted)}
/* ---------- FOOTER (barra full-width) ---------- */
.footbar{
grid-column:1 / -1; border-top:1px solid var(--border); /* régua horizontal */
display:flex; align-items:center; justify-content:space-between;
min-height:68px; padding:0 clamp(24px,3.3vw,44px);
color:var(--muted); font-size: var(--pf-fs-13);
}
.foot-right{display:flex; align-items:center; gap:20px}
/* ---------- RIGHT ---------- */
.right{position:relative; background:var(--panel); overflow:hidden}
#twinkle{position:absolute; inset:0; width:100%; height:100%; display:block}
/* ---------- testimonials coverflow carousel ---------- */
.carousel{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.tcard{
position:absolute; left:50%; top:50%; box-sizing:border-box; pointer-events:auto;
width:min(530px,82%); padding:42px 34px;
border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--card-border);
box-shadow:var(--shadow-md); opacity:0;
transform:translate(-50%,-50%); transform-origin:center center;
transition:transform .9s cubic-bezier(.37,0,.16,1), opacity .8s ease;
will-change:transform,opacity;
}
.tcard p{
margin:0; font-size: var(--pf-fs-20); font-weight:500; line-height:1.44;
letter-spacing:-.014em; text-wrap:pretty; min-height:112px;
}
.tcard .by{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:24px}
.who{display:flex; align-items:center; gap:11px; min-width:0}
.ava{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--field); }
.who b{display:block; font-size: var(--pf-fs-13); font-weight:600}
.who span{display:block; color:var(--muted); font-size: var(--pf-fs-12); margin-top:1px}
.brandmark{display:flex; align-items:center; gap:7px; font-size: var(--pf-fs-13); font-weight:600; color:var(--ink); flex:0 0 auto}
.brandmark i{width:16px; height:16px; border-radius:var(--radius-sm); background:var(--ink); display:block}
@media (prefers-reduced-motion:reduce){ .tcard{transition:opacity .3s ease} }
.toggle{
position:absolute; right:20px; top:20px; z-index:5;
width:34px; height:34px; border-radius:var(--radius-md); border:1px solid var(--card-border);
background:var(--card); color:var(--ink); cursor:pointer; font-size: var(--pf-fs-15);
display:grid; place-items:center; transition:transform .15s;
}
.toggle:hover{transform:rotate(20deg)}
.toggle:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
/* ---------- responsive ---------- */
@media (max-width:900px){
.stage{grid-template-columns:1fr; grid-template-rows:none}
.right{order:-1; min-height:360px}
.tcard{width:min(340px,86%); padding:22px 24px}
.tcard p{font-size: var(--pf-fs-15); min-height:72px}
.left{border-right:0; padding:32px 24px 40px}
.footbar{flex-wrap:wrap; gap:10px 18px; min-height:0; padding:18px 24px}
.brand{margin-bottom:36px}
.spacer{min-height:40px}
}
@media (prefers-reduced-motion:reduce){
.toggle{transition:none}
}
/* ---------- login email + senha (demo) ---------- */
.form-wrap input[type=email],
.form-wrap input[type=password]{
width:100%; display:block; height:46px; padding:0 14px;
border:1px solid var(--field); border-radius:var(--radius-md);
background:var(--card); color:var(--ink); font:inherit; font-size: var(--pf-fs-15);
transition:border-color .15s, box-shadow .15s;
}
.form-wrap input::placeholder{color:var(--btn-ink)}
.form-wrap input:focus{outline:none; border-color:var(--focus); box-shadow:var(--ring-focus)}
.form-wrap .lbl2{margin-top:16px}
.entrar{
width:100%; height:46px; margin-top:22px; border:0; border-radius:var(--radius-md);
background:var(--ink); color:var(--bg); font:inherit; font-size: var(--pf-fs-13); font-weight:600;
cursor:pointer; transition:opacity .15s;
}
.entrar:hover{opacity:.9}
.entrar:disabled{opacity:.6; cursor:default}
.loginerr{color:var(--neg); font-size: var(--pf-fs-13); margin-top:14px; min-height:18px}
.auth-switch{margin-top:16px; color:var(--muted); font-size: var(--pf-fs-13)}
.auth-switch button{
border:0; background:transparent; color:var(--ink); font:inherit; font-weight:600;
padding:0; cursor:pointer;
}
.auth-switch button:hover{text-decoration:underline}
/* ── RESPONSIVIDADE — as faixas que faltavam (2026-08-12) ──────────────────
O login não carrega o `profound-ds.css`, então as faixas escritas lá não
valem aqui: esta folha precisa das suas. A tipografia já escala sozinha pelos
tokens `--pf-fs-*` do `tokens.css`, que o login carrega.
Havia UM breakpoint (900px, que empilha as duas colunas). O que faltava é
onde a tela de entrada mais dói — a altura. */
/* CELULAR DEITADO — largura de tablet, ~390px de ALTURA.
O painel visual tem `min-height: 360px` na faixa de 900; deitado, isso é
QUASE A TELA INTEIRA, e o formulário — a única razão de a página existir —
ficava empurrado para fora do campo de visão. Aqui ele sai de cena: numa
tela desta altura, a marca cede lugar ao campo de senha. */
@media (max-height:500px) and (orientation:landscape){
.stage{grid-template-columns:1fr; grid-template-rows:auto; min-height:0}
.right{display:none}
.left{padding:20px 24px 24px; border-right:0}
.spacer{display:none}
.footbar{min-height:0; padding:12px 24px}
}
/* CELULAR EM PÉ ESTREITO — o painel encolhe para o formulário aparecer sem
rolagem, e o cartão de citação para de disputar espaço com ele. */
@media (max-width:480px){
.right{min-height:220px}
.tcard{width:min(300px,92%); padding:18px 20px}
.tcard p{min-height:0}
.left{padding:24px 20px 32px}
.footbar{padding:14px 20px; gap:8px 14px}
.form-wrap{max-width:100%}
}
/* MONITOR GRANDE — o formulário não precisa crescer (linha de leitura tem um
limite útil), mas a coluna dele para de ser metade exata da tela: num 2560px
isso deixava 1280px de respiro para um campo de 460. */
@media (min-width:1920px){
.stage{grid-template-columns:minmax(0,720px) 1fr}
}