/* /beta y /en/beta. Aparte de web.css porque solo las usan ellas: en la común lo descargaría todo el mundo. */
/* ── /beta: LA PRUEBA DE ANDROID (8-10-2026) ──────────────────────────────
   En móvil, el formulario justo debajo de las dos líneas que dicen qué es y
   qué se pide: quien llega desde un enlace viene a apuntarse. En escritorio va
   a la derecha, a la altura del titular. Sin borde en la caja: dentro van el
   aviso y los campos, que ya llevan el suyo. */
.beta {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--section);
}

.beta__rejilla {
  display: grid;
  gap: 2rem;
  grid-template-areas: "cabeza" "caja" "detalle";
}

.beta__cabeza { grid-area: cabeza; display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }
/* En rem y no en ch: el ch de .fv-linea cambia con la fuente, y al llegar la de la marca la línea partía en una menos (CLS 0,0049 con la fuente tarde). */
.beta__cabeza .fv-linea { max-width: 36rem; }
.beta__caja { grid-area: caja; display: flex; flex-direction: column; gap: 0.875rem; padding: 1.25rem; background: var(--fv-surface); border-radius: var(--radius-l); }
.beta__detalle { grid-area: detalle; display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }

@media (min-width: 60rem) {
  .beta__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-template-areas: "cabeza caja" "detalle caja";
    column-gap: 4rem;
    row-gap: 2.5rem;
    align-items: start;
  }
}

/* El punto del titular, pegado: el margen lateral del punto en la fuente se lee como un espacio. */
.beta__punto { margin-left: -0.07em; }

.beta__titulo {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.beta__pasos {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--fv-ink-2);
}

.beta__pasos li::marker { color: var(--fv-action); font-weight: 700; }
.beta__pasos strong { color: var(--fv-ink); font-weight: 600; }