/* Página de início de sessão (desenho do protótipo I).
   Página própria, sem o dashboard.css: faixa preta com linhas finas à esquerda,
   logo do cliente por cima do formulário à direita. Cópia da página antiga em backups/. */
:root{
  --vermelho:#C9251C;--rosa:#F6E4E3;--preto:#101010;--branco:#FFFFFF;
  --c2:#D9D9D9;--c3:#BDBDBD;--c4:#6E6E6E;
  --display:'Cormorant Garamond',Georgia,serif;--corpo:'Roboto',-apple-system,'Segoe UI',sans-serif;
  --curva:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--branco);color:var(--preto);font-family:var(--corpo);font-weight:300;font-size:15px;line-height:1.55}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--vermelho);outline-offset:2px}
.rot{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--vermelho)}
.titulo{font-family:var(--display);font-style:italic;font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0}
.regua{display:block;width:44px;height:2px;background:var(--vermelho)}

.pagina{display:grid;grid-template-columns:minmax(340px,34%) 1fr;min-height:100vh}

/* ---------- faixa preta ---------- */
.faixa{background:var(--preto);color:var(--branco);display:flex;flex-direction:column;padding:48px 56px 40px;position:relative;isolation:isolate;overflow:hidden}
/* linhas diagonais muito finas e um leve brilho no canto superior */
.faixa::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px)}
/* fio vermelho vertical a separar a faixa da área branca */
.faixa::after{content:'';position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--vermelho)}
.faixa .meio{margin:auto 0;max-width:420px}
.faixa .rot{color:var(--c3)}
.faixa .titulo{font-size:58px;margin:18px 0 26px}
.faixa .titulo em{color:var(--c3)}
.faixa p{color:#cfcfcf;font-size:14px;margin:22px 0 0;max-width:360px}
.faixa .pe{font-size:11px;letter-spacing:.04em;color:#cfcfcf;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}

/* ---------- área branca ---------- */
.lado{display:grid;grid-template-rows:auto 1fr;padding:40px 64px}
.topo{display:flex;justify-content:flex-end}
.topo .rot{color:var(--c4)}
.centro{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:400px;margin:0 auto}
.marca{margin:0 0 30px}
/* a imagem tem 25 px de margem transparente à esquerda (em 400): desloca-se essa proporção para as letras alinharem com o formulário */
.marca img{width:200px;height:auto;display:block;transform:translateX(-6.25%)}
form{display:flex;flex-direction:column;gap:22px;width:100%}
form .titulo{font-size:42px;margin-top:8px}
.aviso{border:1px solid var(--rosa);border-left:2px solid var(--vermelho);background:var(--rosa);padding:12px 14px;font-size:13px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{color:var(--c4)}
.campo input{border:1px solid var(--c2);padding:12px 14px;font:inherit;font-size:14px;font-weight:300;border-radius:0;outline:none;transition:border-color .2s var(--curva)}
.campo input:focus{border-color:var(--preto);outline:2px solid var(--vermelho);outline-offset:-2px}
.btn{align-self:flex-start;margin-top:4px;display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--preto);
  background:var(--preto);color:var(--branco);padding:14px 22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  transition:background .18s var(--curva),border-color .18s var(--curva)}
.btn:hover{background:var(--vermelho);border-color:var(--vermelho)}
.btn .seta{transition:transform .2s var(--curva)}
.btn:hover .seta{transform:translateX(4px)}
.ajuda{font-size:12px;color:var(--c4);margin:0}

@media (max-width:1250px){ .lado{padding:40px 48px} }
/* telemóvel: faixa por cima, compacta */
@media (max-width:820px){
  .pagina{grid-template-columns:1fr}
  .faixa{padding:28px 20px 22px}
  .faixa .meio{margin:0 0 24px}
  .faixa .titulo{font-size:38px;margin:12px 0 18px}
  .faixa p{display:none}
  .faixa .pe{margin-top:4px}
  .faixa::after{top:auto;left:0;height:2px;width:auto}
  .lado{padding:24px 20px}
  .marca img{width:170px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }