/* ═══════════════════════════════════════════════════════════════════════════
   login.css — tela de entrada no padrão split-screen da casa
   ═══════════════════════════════════════════════════════════════════════════
   Definido em `.claude/login-page-standard.md`: painel de marca escuro à
   esquerda, formulário à direita, e abaixo de `lg` só o formulário.
   Paleta marsala, a mesma do painel e do /convites.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --marsala:      #5a1a2a;
  --marsala-esc:  #2a1518;
  --dourado:      #b08745;
  --fundo:        #fbf8f3;
  --superficie:   #ffffff;
  --texto:        #241417;
  --texto-fraco:  #574740;
  --texto-tenue:  #6e5c53;
  --borda:        #e2d6c4;
  --borda-forte:  #d3c1a9;
  --ok:#0f6d3e;     --ok-fundo:#e8f6ee;     --ok-borda:#b6e2c8;
  --perigo:#c0322b; --perigo-fundo:#fdecea; --perigo-borda:#f3c4bf;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 10px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px; line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }

:where(a, button, input):focus-visible {
  outline: 3px solid var(--marsala);
  outline-offset: 2px;
  border-radius: 6px;
}

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* nunca `1fr` solto */
  /* `dvh`: no celular a barra do navegador entra e sai, e `vh` congela na altura
     maior — o rodapé fica fora da tela e o botão de entrar some sob o teclado. */
  min-height: 100dvh;
}
@media (min-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ── Painel de marca ────────────────────────────────────────────────────── */
.marca {
  display: none;
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px);
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  color: #f3e7e0;
  background:
    radial-gradient(120% 100% at 15% 0%, #7c2839 0%, transparent 55%),
    linear-gradient(155deg, #5a1a2a 0%, #2a1518 70%);
}
@media (min-width: 900px) { .marca { display: flex; } }

/* Anéis de decoração — baixa opacidade, sem competir com o texto. */
.marca-aneis {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 8% 18%, transparent 38%, rgb(255 255 255 / .05) 38.4%, transparent 39%),
    radial-gradient(circle at 8% 18%, transparent 58%, rgb(255 255 255 / .04) 58.4%, transparent 59%),
    radial-gradient(circle at 92% 88%, transparent 30%, rgb(176 135 69 / .10) 30.5%, transparent 31.5%);
  pointer-events: none;
}
.marca > *:not(.marca-aneis) { position: relative; }

.marca-topo { display: flex; align-items: center; gap: 14px; }
.marca-logo {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgb(255 255 255 / .1); padding: 5px;
  object-fit: contain;
}
.marca-topo b {
  display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; color: #fff;
}
.marca-topo small {
  display: block; margin-top: 2px;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(243 231 224 / .6);
}

.marca-meio h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: #fff;
}
.marca-risco {
  display: block; width: 64px; height: 3px; border-radius: 2px;
  background: var(--dourado);
  margin: 20px 0 18px;
}
.marca-meio p {
  margin: 0; max-width: 30rem;
  font-size: 1.02rem;
  /* 6,2:1 sobre o gradiente escuro — medido. Opacidade baixa demais aqui é o
     jeito clássico de a tela "ficar bonita" e reprovar na leitura. */
  color: rgb(243 231 224 / .82);
}

.marca-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.marca-itens li {
  display: flex; align-items: center; gap: 13px;
  font-size: .93rem;
  color: rgb(243 231 224 / .9);
}
.chip {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgb(255 255 255 / .09);
  border: 1px solid rgb(255 255 255 / .08);
}
.chip svg { width: 17px; height: 17px; color: var(--dourado); }

.marca-pe { margin: 0; font-size: .74rem; color: rgb(243 231 224 / .45); }

/* ── Formulário ─────────────────────────────────────────────────────────── */
.acesso {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 5vw, 48px) 20px;
  background: var(--fundo);
}
.acesso-caixa { width: 100%; max-width: 392px; }

/* A logo aparece no celular, onde o painel de marca não existe: sem ela a tela
   não diz de quem é. */
.acesso-logo { width: 52px; height: 52px; object-fit: contain; margin: 0 auto 20px; }
@media (min-width: 900px) { .acesso-logo { display: none; } }

.acesso h1 {
  margin: 0 0 4px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.15;
  color: var(--texto);
  text-align: center;
}
@media (min-width: 900px) { .acesso h1 { text-align: left; } }

.acesso-sub {
  margin: 0 0 26px;
  font-size: .93rem; color: var(--texto-tenue);
  text-align: center;
}
@media (min-width: 900px) { .acesso-sub { text-align: left; } }

.alerta {
  margin: 0 0 18px; padding: 11px 14px;
  border: 1px solid; border-radius: var(--raio);
  font-size: .88rem;
}
.alerta--erro { color: var(--perigo); background: var(--perigo-fundo); border-color: var(--perigo-borda); }
.alerta--ok   { color: var(--ok);     background: var(--ok-fundo);     border-color: var(--ok-borda); }

.campo { margin-bottom: 16px; }
.campo label {
  display: block; margin-bottom: 6px;
  font-size: .85rem; font-weight: 600; color: var(--texto-fraco);
}
.campo-caixa {
  position: relative;
  display: flex; align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  transition: border-color .15s, box-shadow .15s;
}
.campo-caixa:focus-within {
  border-color: var(--marsala);
  box-shadow: 0 0 0 3px rgb(90 26 42 / .14);
}
.campo-icone {
  flex: 0 0 42px; display: grid; place-items: center;
  color: var(--texto-tenue);
}
.campo-icone svg { width: 18px; height: 18px; }

/* Filho direto: `.campo input` pegaria também a caixa de marcar de qualquer
   coisa aninhada, e `width:100%` num checkbox empurra o texto ao lado para zero. */
.campo-caixa > input {
  flex: 1; min-width: 0;
  min-height: 48px; padding: 12px 12px 12px 0;
  background: none; border: 0; outline: none;
  font: inherit; color: var(--texto);
}
.campo-caixa > input[aria-invalid="true"] { color: var(--perigo); }
.campo-caixa:has(> input[aria-invalid="true"]) { border-color: var(--perigo-borda); }

.campo-olho {
  flex: 0 0 44px;
  width: 44px; height: 44px; margin-right: 2px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--texto-tenue); cursor: pointer;
}
.campo-olho:hover { background: var(--fundo); color: var(--texto); }
.campo-olho svg { width: 18px; height: 18px; }
.campo-olho [hidden] { display: none !important; }

.botao-entrar {
  width: 100%; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 20px;
  background: var(--marsala); color: #fff;
  border: 0; border-radius: var(--raio);
  font: 600 1rem/1 var(--sans); cursor: pointer;
  transition: filter .15s, transform .12s;
}
.botao-entrar:hover { filter: brightness(1.14); }
.botao-entrar:active { transform: scale(.995); }
.botao-entrar[disabled] { opacity: .65; cursor: progress; filter: none; }
.botao-entrar svg { width: 18px; height: 18px; }

.acesso-esqueci {
  display: block; margin-top: 18px;
  min-height: 44px; line-height: 44px;
  text-align: center;
  font-size: .88rem; color: var(--marsala); text-decoration: none;
}
.acesso-esqueci:hover { text-decoration: underline; }

.acesso-pe {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid var(--borda);
  font-size: .78rem; color: var(--texto-tenue); text-align: center;
}