/* La pantalla de acceso.
 *
 * Es la misma pagina que la portada, no una pantalla aparte: misma cabecera,
 * mismo degradado de fondo, misma tipografia de titular y mismas tarjetas. Los
 * valores estan copiados de `portada.css` a proposito —prefijo `ax-` para no
 * chocar con `pz-`, `cc-` ni `pub-`— porque las dos pantallas describen la
 * misma referencia visual y deben moverse juntas si esa referencia cambia.
 *
 * Lo que NO se copia de la portada es la ilustracion del heroe: aqui el peso
 * visual tiene que caer en el formulario, y una imagen a sangre al lado de dos
 * campos los convierte en el segundo elemento de la pantalla.
 */

[class^="ax-"], [class*=" ax-"] { box-sizing: border-box; }

/* Ocupa la ventana entera: el acceso no tiene el armazon de la aplicacion
 * —ni menu lateral ni barra superior—, asi que el degradado es el fondo de
 * todo y no de una franja. */
.ax-pagina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(105deg, #f6faff 0%, #f4fbff 48%, #e8f6ff 100%);
}

.ax-cont { width: min(1180px, calc(100% - 64px)); margin: auto; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.ax-nav {
  background: #fffffff5;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #edf0f6;
  flex: none;
}
.ax-navinner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.ax-volver {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.ax-volver:hover { color: var(--marca-violeta); }

/* ── El cuerpo, a dos columnas ────────────────────────────────────────────── */

.ax-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(380px, 470px);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(40px, 6vh, 88px) 0;
  /* Un elemento flexible no baja por si solo de su ancho minimo, y en una
   * columna flexible los hermanos se estiran al ancho del mas ancho: si algun
   * dia entra en la tarjeta algo que no se pueda cortar —un correo largo, un
   * identificador—, sin esta linea ensancharia la pagina entera y se llevaria
   * la cabecera por delante. */
  min-width: 0;
}

.ax-copy { max-width: 580px; justify-self: end; }
.ax-copy h2 {
  font: 800 clamp(34px, 3.1vw, 50px)/1.08 var(--font-display);
  letter-spacing: -1.8px;
  margin: 0 0 18px;
  color: var(--ink);
}
/* El mismo degradado de texto que parte el titular de la portada en dos. */
.ax-grad {
  background: var(--marca-grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ax-intro { font-size: 18px; color: var(--ink-muted); line-height: 1.55; margin: 0; }

.ax-value { display: flex; gap: 22px; margin: 30px 0 0; flex-wrap: wrap; }
.ax-value > span { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; line-height: 1.45; }

/* ── La tarjeta ───────────────────────────────────────────────────────────── */

/* Misma receta que el buscador del heroe —borde, sombra, radio— subida de
 * escala: es la pieza con la que se interactua y tiene que pesar mas que el
 * texto que la acompana. */
.ax-card {
  background: #fff;
  border: 1px solid #dbe5f4;
  box-shadow: 0 18px 48px #192e5814;
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr`: por omision una celda de rejilla no baja del
   * ancho minimo de su contenido, y basta un correo largo o una palabra sin
   * cortes para que la tarjeta crezca y saque barra horizontal al telefono. */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.ax-card h1 {
  font: 800 30px/1.15 var(--font-display);
  letter-spacing: -1px;
  margin: 0;
  color: var(--ink);
}

/* ── Una sola columna ─────────────────────────────────────────────────────── */

/* Por debajo del corte la columna de la izquierda desaparece y queda la
 * tarjeta sola. El titular no se encoge hasta caber: se va, porque en un
 * telefono lo que se vino a hacer es entrar. */
@media (max-width: 860px) {
  .ax-cont { width: calc(100% - 36px); }
  .ax-navinner { gap: 12px; }
  .ax-volver { font-size: 12px; }
  .ax-grid { grid-template-columns: minmax(0, 1fr); padding: 28px 0 44px; }
  .ax-copy { display: none; }
  .ax-card { max-width: 440px; margin-inline: auto; width: 100%; }
}