/* Entrar. Móvil: la marca arriba en una franja corta y el formulario debajo. Escritorio: dos columnas. */
.entrar { display: grid; align-content: start; min-height: 100vh; }
.entrar .marca { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px var(--margen); background: var(--obsidiana); color: var(--marfil); }
.entrar .marca .logotipo { width: 160px; height: auto; }
.entrar .marca h1 { max-width: 14ch; margin-bottom: 12px; font-size: 32px; color: var(--marfil); }
.entrar .marca .raya { width: 48px; height: 3px; margin-bottom: 16px; background: var(--electrico); }
.entrar .marca p { max-width: 40ch; margin: 0; color: var(--lateral-texto); }
.entrar .marca .lema { display: none; font-size: 13px; color: var(--lateral-gris); }
.entrar .formulario { display: grid; place-items: start center; padding: 24px var(--margen); }
.entrar .formulario .tarjeta { width: 100%; max-width: 420px; }
.entrar .formulario h2 { margin-bottom: 6px; font: 400 30px/1.15 var(--titulos); }
.entrar .boton { width: 100%; }

@media (min-width: 950px) {
  .entrar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: stretch; }
  .entrar .marca { padding: 48px; }
  .entrar .marca .logotipo { width: 200px; }
  .entrar .marca h1 { font-size: 48px; margin-bottom: 16px; }
  .entrar .marca .lema { display: block; }
  .entrar .formulario { place-items: center; padding: 32px; }
  .entrar .formulario .tarjeta { padding: 32px; }
  .entrar .formulario h2 { font-size: 32px; }
}