/* Pantallas de acceso del vestíbulo: entrar, registro y código de confirmación. */

.formulario-hoja {
  width: min(100%, 520px);
  margin: var(--e-4) auto var(--e-7);
  padding: var(--e-6) var(--e-5);
  background: color-mix(in srgb, var(--blanco) 92%, transparent);
  border: 2px solid var(--linea);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-m);
}
.formulario-hoja--centrado { text-align: center; }
.formulario-hoja--centrado p { margin-inline: auto; }
.formulario-hoja h1 { font-size: var(--t-28); }
.formulario-hoja__pie { margin: var(--e-5) 0 0; font-size: var(--t-14); }

/* Requisitos de contraseña: se marcan en turquesa al cumplirse */
.requisitos { list-style: none; margin: 0 0 var(--e-2); padding: 0; display: grid; gap: var(--e-1); }
.requisitos li { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-14); }
.requisitos__marca {
  position: relative;
  flex: none;
  width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--linea);
  border-radius: 50%;
  background: var(--blanco);
  transition: background-color var(--d-micro) var(--curva), border-color var(--d-micro) var(--curva);
}
.requisitos li.cumple .requisitos__marca { background: var(--turquesa); border-color: var(--turquesa); }
.requisitos li.cumple .requisitos__marca::after {
  content: '';
  position: absolute; left: 0.28rem; top: 0.1rem;
  width: 0.3rem; height: 0.55rem;
  border: solid var(--blanco); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.requisitos li.cumple { font-weight: 600; }

/* Código de 4 dígitos: casillas grandes con avance automático */
.codigo-4 {
  display: flex; justify-content: center; gap: var(--e-3);
  margin: var(--e-5) 0; padding: 0; border: 0;
}
.codigo-4__casilla {
  width: 64px; height: 76px;
  padding: 0;
  text-align: center;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--t-40);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta);
  background: var(--blanco);
  border: 2px solid var(--linea);
  border-radius: var(--radio-s);
  caret-color: var(--oro-well);
  transition: border-color var(--d-micro) var(--curva), background-color var(--d-micro) var(--curva);
}
.codigo-4__casilla:focus-visible { border-color: var(--negro-bee); }
.codigo-4__casilla.llena { border-color: var(--amarillo-bee); background: var(--panal-suave); }

@media (max-width: 380px) {
  .codigo-4 { gap: var(--e-2); }
  .codigo-4__casilla { width: 56px; height: 68px; }
  .formulario-hoja { padding-inline: var(--e-4); }
}

/* ---------- Suscripciones (diseño): tamaños y jerarquía distintos ---------- */
.suscripciones {
  width: min(100%, 920px);
  margin: 0 auto var(--e-7);
}
.suscripciones__intro { text-align: center; margin-bottom: var(--e-5); }
.suscripciones__intro p { margin-inline: auto; }

.suscripciones__lista {
  display: grid;
  gap: var(--e-4);
  align-items: end;
}

.suscripcion { position: relative; border-radius: var(--radio-m); }
.suscripcion__nombre { margin-bottom: var(--e-1); }
.suscripcion__precio { margin: 0 0 var(--e-2); display: flex; align-items: baseline; gap: var(--e-1); }
.suscripcion__monto {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
}
.suscripcion__moneda { font-size: var(--t-14); font-weight: 600; color: var(--tinta-suave); }
.suscripcion__resumen { color: var(--tinta-suave); }
.suscripcion__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.suscripcion__puntos li { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-14); }
.suscripcion__puntos svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; stroke-width: 3; }

/* Spot: compacta, discreta */
.suscripcion--spot { padding: var(--e-4); background: var(--gris-lectura); border-radius: var(--radio-s); }
.suscripcion--spot .suscripcion__nombre { font-size: var(--t-20); }
.suscripcion--spot .suscripcion__monto { font-size: var(--t-28); }

/* Asociado: mediana, con borde */
.suscripcion--asociado { padding: var(--e-5); background: var(--blanco); border: 2px solid var(--negro-bee); }
.suscripcion--asociado .suscripcion__nombre { font-size: var(--t-28); }
.suscripcion--asociado .suscripcion__monto { font-size: var(--t-40); }

/* Profesional: la más grande y destacada */
.suscripcion--profesional {
  padding: var(--e-6) var(--e-5);
  background: var(--panal-suave);
  border: 3px solid var(--amarillo-bee);
  border-bottom: 8px solid var(--oro-well);
  box-shadow: var(--sombra-m);
}
.suscripcion--profesional .etiqueta-estado { margin-bottom: var(--e-3); background: var(--amarillo-bee); border-color: var(--amarillo-bee); }
.suscripcion--profesional .suscripcion__nombre { font-size: var(--t-40); }
.suscripcion--profesional .suscripcion__monto { font-size: var(--t-64); }
.suscripcion--profesional .suscripcion__resumen { color: var(--tinta); }
.suscripcion--profesional .suscripcion__puntos li { font-size: var(--t-16); }
.suscripcion--profesional .suscripcion__puntos svg { color: var(--negro-bee); }

@media (min-width: 840px) {
  .suscripciones__lista { grid-template-columns: 0.8fr 1fr 1.45fr; }
}