/* este arquivo assume que ../css/index.css já foi carregado */

/* utilidades */
.hint{ color: var(--muted); font-weight: 400; font-size: .85rem }
.meta{ color: var(--muted); font-size: .85rem; display:block; margin-top:6px }

/* grade 2 colunas que vira 1 no mobile */
.grid-2{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
@media (max-width:720px){
  .grid-2{ grid-template-columns: 1fr }
}

/* campo com botão de toggle de senha */
.field.with-toggle{ position:relative }
.toggle-pass{
  position:absolute; inset:0 8px 0 auto; margin:auto 0;
  height:34px; width:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  border-radius:8px; cursor:pointer; color:#e8edf6;
  transition:background .2s, border-color .2s, transform .08s;
}
.toggle-pass:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18) }
.toggle-pass:active{ transform: translateY(1px) }

/* linha do checkbox de aceite */
.checkline{
  display:flex; align-items:flex-start; gap:10px; margin-top:8px; color:var(--sub); font-size:.95rem;
}
.checkline input{ margin-top:4px; transform: translateY(1px) }
.checkline a{ color: var(--gold-1); text-decoration: none; border-bottom:1px dotted color-mix(in hsl, var(--gold-1), #000 35%) }
.checkline a:hover{ filter:brightness(1.06) }

/* alerta com a “voz” do Auren */
.alert{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  border:1px solid color-mix(in hsl, var(--gold-1), #000 55%);
  background: linear-gradient(180deg, rgba(230,197,114,.12), rgba(230,197,114,.06));
  color:#F4E8C4; font-size:.95rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ligeiro aumento para acomodar os campos confortavelmente */
.card{ width: min(560px, 92vw) }