

.caja-entrar {
  min-height: calc(100vh - 60px);
  display: grid; place-items: center;
  padding: 30px 20px 70px;
}
.tarjeta-entrar {
  width: 100%; max-width: 420px;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px 22px 22px;
}
.tarjeta-entrar h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1; margin: 20px 0 6px; text-transform: none; }
.sub-entrar { color: var(--gris); font-size: 15px; margin: 0 0 20px; }

.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--negro); padding: 4px; border-radius: 8px; }
.pestana {
  background: transparent; border: 0; cursor: pointer; color: var(--gris);
  font: 700 14px/1 inherit; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 8px; border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.pestana:hover { color: var(--hueso); }
.pestana.activa { background: var(--sup-2); color: var(--hueso); }

.tarjeta-entrar label { margin-top: 14px; }
.tarjeta-entrar input[type="email"], .tarjeta-entrar input[type="password"], .tarjeta-entrar input[type="text"] {
  background: var(--negro); border-radius: 8px;
}

.campo-clave { position: relative; }
.campo-clave input { padding-right: 62px; }
.ver-clave {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: var(--sup-2); border: 1px solid var(--linea); color: var(--gris);
  font: 700 11px/1 inherit; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.ver-clave:hover { color: var(--hueso); border-color: #4a463c; }
.ver-clave[aria-pressed="true"] { color: var(--amarillo); border-color: var(--amarillo); }
.pista { color: var(--gris); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }

.ancho-total { width: 100%; text-align: center; display: block; }
#btn-enviar { margin-top: 20px; }

.aviso-entrar {
  background: #2b2416; color: var(--amarillo);
  border: 1px solid #4a3d15; border-radius: 8px;
  font-size: 14px; line-height: 1.45; padding: 11px 13px; margin: 16px 0 0;
}

.separador { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--gris); font-size: 12px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.otras-vias { display: grid; gap: 9px; }
.otras-vias .btn { text-decoration: none; font-size: 14px; padding: 13px 16px; }
.pie-tarjeta { margin: 20px 0 0; text-align: center; line-height: 1.5; }
.pie-tarjeta a { color: var(--amarillo); }
