/* La puerta (/): rótulo, una línea y dos botones grandes. Mismos tokens que el resto
   (base.css) — el reestilado al universo del panel es otra fase, ver el plan.
   (Hasta el 17/09/2026 este fichero era entrada.css, de la portada que preguntaba la
   audiencia; esa pregunta vive ahora en el primer paso de /auditoria.) */
body.puerta {
  min-height: 100vh;
  display: flex; justify-content: center; align-items: center;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0));
}
.puerta .wrap { max-width: 560px; width: 100%; }

.puerta .puerta-linea {
  color: var(--muted); font-size: 1.05rem; text-align: center; margin: 0 0 26px; font-weight: 400;
}

.puerta .puertas { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) {
  .puerta .puertas { flex-direction: row; justify-content: center; align-items: stretch; }
  .puerta .puerta-btn { flex: 0 1 240px; }
}
.puerta .puerta-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--card3); border: 1px solid var(--line2); border-radius: 10px;
  padding: 26px 20px; min-height: 100px; text-decoration: none; text-align: center;
  transition: border-color .15s, background .15s, transform .12s;
}
.puerta .puerta-btn .ico { font-size: 1.5rem; line-height: 1; color: var(--gold); }
.puerta .puerta-btn .lbl { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--cream); }
@media (hover: hover) {
  .puerta .puerta-btn:hover { border-color: var(--gold); background: rgba(var(--gr), .08); transform: translateY(-1px); }
}
.puerta .puerta-btn:active { transform: scale(.99); }

.puerta .pie { font-size: .78rem; color: var(--muted); text-align: center; margin: 26px 0 0; }