/* Pantallas de acceso (equipo y Marcela) — piel "Glovo adulto".
   Tarjeta blanca con borde de 1px y sin sombra, marca en Cormorant espaciada,
   titular Cormorant y todo lo demás en Manrope.
   Base compartida: marcela.css la amplía con letra más grande. */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(28px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.gate-card {
  width: min(460px, 100%);
  padding: 30px 20px 24px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: none;
  animation: card-in var(--dur-3) var(--ease-out) both;
}
/* Marca dentro de la tarjeta: <p class="wordmark gate-brand"><b>JOLIE</b><i>Beauty by Marcela</i></p> */
.gate-brand { align-items: center; margin: 0 auto 22px; }
.gate-brand b { font-size: 30px; }
/* Logo redondo (si alguna pantalla aún lo pinta): pequeño y sin adornos */
.gate-card > img, .gate-card .logo-round { width: 72px; height: 72px; margin: 0 auto 14px; box-shadow: none; }
.gate-card .eyebrow { margin-bottom: 6px; }
.gate-card h1 { font-size: clamp(32px, 9vw, 38px); color: var(--ink); line-height: 1.08; }
.gate-card .lead { font-size: var(--fs-body); font-weight: 400; color: var(--ink-2); margin: 10px 0 22px; line-height: 1.5; }
.gate-card .error-banner { margin-bottom: 14px; text-align: left; }
.gate-card .form { display: grid; gap: 12px; text-align: left; }
.gate-card .form > label, .gate-card .field label { font-size: var(--fs-min); font-weight: 600; color: var(--ink); }
.gate-card .btn + .btn { margin-top: 10px; }

/* Separador "o con tu correo" */
.gate-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--ink-2);
}
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gate-note { margin-top: 10px; text-align: center; }
.gate-exit { margin: 12px auto 0; }

/* Clave numérica de Marcela */
.pin {
  font-size: 2rem;
  text-align: center;
  letter-spacing: .28em;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Otra forma de entrar (plegable) */
.alt {
  margin-top: 8px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.alt summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--plum);
  min-height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: var(--r-btn);
}
.hint { font-size: var(--fs-min); font-weight: 400; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 359px) {
  .gate-card { padding: 24px 16px 20px; }
  .gate-brand b { font-size: 26px; }
}