/* Visual da área de membros (protótipo aprovado, tela 1). Fontes locais (OFL). Nada inline nas páginas: o CSP bloqueia. */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Geist-500.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --papel: #fbfbfa; --branco: #fff; --tinta: #0b0b0c; --t2: #55575c; --t3: #8a8c91;
  --linha: #e9e9e6; --linha-forte: #d9d9d5; --cinza: #f2f2f0; --preto: #08090a;
  --azul: #2a5cf0; --azul-claro: #5aa2ff; --erro: #b3261e;
  --glow: 0 0 0 1px rgba(90,162,255,.35), 0 0 24px -2px rgba(42,92,240,.55);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r1: 14px; --r2: 22px;
  --sai: cubic-bezier(.23, 1, .32, 1);
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }

.topo { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 28px; border-bottom: 1px solid var(--linha); background: rgba(251,251,250,.8); }
.marca { font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--azul), var(--azul-claro)); box-shadow: 0 0 14px rgba(90,162,255,.85); }

.titulo { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.sub { color: var(--t2); font-size: 16px; margin-top: 12px; max-width: 52ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; white-space: nowrap; transition: transform .14s var(--sai), background-color .14s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-preto { background: var(--preto); color: #fff; }
.btn-preto:hover:not(:disabled) { background: #111318; box-shadow: var(--glow); }
.btn:focus-visible, .link:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.link { color: var(--t2); font-size: 14.5px; border-bottom: 1px solid var(--linha-forte); padding-bottom: 1px; }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r2); box-shadow: var(--sombra); }
.entrar { display: grid; place-items: center; padding: 96px 24px 110px; }
.entrar .cartao { width: min(100%, 420px); padding: 36px 32px 30px; }
.campo { display: block; width: 100%; height: 50px; margin: 22px 0 12px; padding: 0 16px; border: 1px solid var(--linha-forte); border-radius: var(--r1); font: inherit; background: var(--branco); color: var(--tinta); }
.campo:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(11,11,12,.06); }
.entrar .btn { width: 100%; }
.miudo { color: var(--t3); font-size: 13.5px; margin-top: 14px; }
.aviso { color: var(--t2); font-size: 15px; margin-top: 16px; }
.aviso.erro { color: var(--erro); }
.aviso.ok { color: var(--tinta); }
.turnstile { margin: 0 0 12px; min-height: 0; }
.outro { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }

@media (max-width: 480px) {
  .topo { padding: 0 20px; }
  .entrar { padding: 40px 16px 64px; }
  .entrar .cartao { padding: 28px 22px 24px; }
  .titulo { font-size: 38px; }
}
#entrar { margin-top: 24px; width: 100%; }