/* Acceso: tarjeta tranquila sobre el fondo, con la regla de tiempo de la marca al pie. */
/* Base, botones (.pub-btn) y letra: de publico.css, el mismo sistema que el panel y el portal. Aquí solo la tarjeta. */
body {
  display: grid; place-items: center; padding: var(--s-5);
  background:
    radial-gradient(70% 50% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.card {
  width: min(400px, 100%); padding: var(--s-8) var(--s-6) var(--s-6); display: grid; gap: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  animation: rise var(--dur-sheet) var(--resorte-suave) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.brand { color: inherit; text-decoration: none; width: fit-content; border-radius: var(--r-sm); display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xl); font-weight: 800; font-stretch: var(--wdth-wide); letter-spacing: -.02em; }
.brand img { border-radius: 10px; }
.brand b { font-weight: 800; color: var(--accent-text); }
h1 { margin: 0; font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 750; font-stretch: var(--wdth-wide); letter-spacing: -.025em; }
.lead { margin: var(--s-2) 0 0; color: var(--ink-2); }
form { display: grid; gap: var(--s-2); }
label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-top: var(--s-2); }
input {
  width: 100%; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
input:hover { border-color: var(--ink-3); }
input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--focus); }
form .pub-btn { margin-top: var(--s-4); }
/* Invitación para conectar una cuenta (/conectar/…): el enlace es un botón del sistema. */
.card > a.pub-btn { text-decoration: none; }
.card p { margin: 0; color: var(--ink-2); }
.error {
  margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-md);
  color: var(--bad); background: var(--bad-soft); border: 1px solid currentColor;
}
.legal { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }
.legal a { color: var(--ink-2); }
.ruler {
  position: fixed; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 80px) bottom / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 16px) bottom / 100% 7px no-repeat;
}