/* ============================================================
   Rediseño (REDISENO): cupo agotado, /precios, «¡Ya eres Pro!», portada,
   crear cuenta, entrar y recuperar (§9 y §13 de la propuesta; vistas 24,
   25, 30j, 26, 19, 20 y 21). Lo visual sale de rediseno.css (generado de la
   propuesta); aquí va solo lo propio de la app:
   1. los márgenes que la maqueta escribía en línea (style="…");
   2. las reglas @container de la propuesta, que el generador deja dentro de
      «.rd-app @container …» (no es CSS válido y el navegador las descarta);
   3. lo que la maqueta no tiene (pantalla completa sin marco de teléfono).
   ============================================================ */

/* ---------- 1. Cupo agotado (vista 24) ---------- */
.rd-app .rd-cupo-pie .boton-texto { margin: -4px auto 0; }
.rd-app .modal-escritorio.rd-cupo .rd-cupo-pie .boton-texto { margin: 0 auto; }
.rd-app .modal-escritorio.rd-cupo .camino .l-rasgos li { font-size: 15px; }
/* Escritorio: centrada sobre la app, con un velo que deja ver la pantalla de atrás */
.rd-app .rd-cupo-velo {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; background: rgba(7, 8, 24, .72);
}
.rd-app .rd-cupo-velo .modal-escritorio { width: 100%; margin: auto; text-align: left; }
.rd-app .rd-cupo-velo .modal-escritorio .centro { text-align: center; }

/* ---------- 2. /precios ----------
   Desde el lote final (§35, vista 49) /precios es la página de siempre con los
   toques dorados en precios.css: el rediseño ya no la reemplaza. */

/* ---------- 3. «¡Ya eres Pro!» ----------
   Desde el lote final (vista 47) es la pantalla del Lenguaje Inicio a todo el
   ancho, encima de todo (estilos en rediseno-app.css → .yp-pantalla). */
#rdPro { z-index: 24; }
#rdPro:not([hidden]) { display: block; padding: 0; overflow-y: auto; }

/* ---------- 4. Portada pública (vista 19) ----------
   El mismo marcado en el celular y en el escritorio (container queries). */
#rdPortada { z-index: 12; }
#rdPortada .pantalla.rd-portada-scroll { padding: 0 0 env(safe-area-inset-bottom); }
#rdPortada.rd-sin-cifras .l-rasgos { visibility: hidden; }
#rdPortada .rd-ej-estrella { color: #f5b301; fill: currentColor; }
#rdPortada .rd-ej-bien { color: var(--exito); }
#rdPortada .l-ej-nota { margin-top: 12px; }
#rdPortada .rd-ej-cambio { margin-top: 10px; }
#rdPortada .rd-cierre-titulo { margin-top: 12px; }
/* El aviso de la cookie de afiliado (?ref=) queda encima de la portada nueva */
html.rd-publico-activo #refAviso { z-index: 40; }
/* Las reglas @container de la propuesta para la portada (ver el punto 2 de arriba) */
@container (min-width: 900px) {
  .rd-app .l-envoltura { padding: 0 40px; }
  .rd-app .l-cabecera { min-height: 76px; }
  .rd-app .l-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; text-align: left; padding: 40px 0 64px; }
  .rd-app .l-hero .orbi-escena { width: 320px; order: 2; }
  .rd-app .l-titular { font-size: 54.4px; margin-top: 0; }
  .rd-app .l-sub { margin: 18px 0 0; font-size: 19.2px; max-width: 40ch; }
  .rd-app .l-cta { align-items: flex-start; }
  .rd-app .l-seccion { padding: 56px 0; }
  .rd-app .l-h2 { font-size: 35.2px; }
  .rd-app .l-tres { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rd-app .l-cosa { grid-template-columns: 1fr; align-items: start; padding: 22px; }
  .rd-app .l-ejemplo { grid-template-columns: 1.3fr 1fr; gap: 16px; }
  .rd-app .l-planes { grid-template-columns: 1fr 1fr; max-width: 820px; margin-left: auto; margin-right: auto; gap: 18px; }
  .rd-app .l-pie { flex-direction: row; justify-content: space-between; }
}

/* ---------- 5. Crear cuenta, entrar y recuperar (vistas 20 y 21) ----------
   Una pantalla a la vez (.activa). En escritorio no tienen versión propia: la
   misma pantalla del teléfono, centrada como tarjeta sobre el cielo. */
#rdAcceso { z-index: 12; }
#rdAcceso .rd-acc { display: none; flex: 1; min-height: 0; flex-direction: column; }
#rdAcceso .rd-acc.activa { display: flex; }
#rdRegistro[data-paso="1"] [data-solo-paso="2"], #rdRegistro[data-paso="2"] [data-solo-paso="1"] { display: none !important; }
#rdAcceso .rd-acc[data-error="1"] [data-sin-error] { display: none !important; }
#rdAcceso .rd-acc:not([data-error="1"]) [data-con-error] { display: none !important; }
#rdAcceso .rd-acc-cabeza { margin-top: 4px; }
#rdAcceso .rd-acc-titulo-error { margin-top: 8px; }
#rdAcceso .rd-acc-campos { margin-top: 22px; gap: 16px; }
#rdEntrar .rd-acc-campos { margin-top: 20px; gap: 14px; }
#rdEntrar .rd-acc-olvide { align-self: flex-start; padding: 0; margin-top: -6px; }
#rdAcceso .rd-acc-otro { margin: -6px auto 0; }
#rdAcceso .rd-acc-aviso { margin-top: 72px; }
#rdAcceso .rd-acc-texto { margin: 10px auto 0; max-width: 30ch; }
#rdAcceso .rd-acc-texto b { color: var(--texto); }
#rdAcceso .rd-acc-correo { margin-top: 12px; }
#rdAcceso .rd-acc-correo .boton-texto { display: inline-flex; width: auto; padding: 0 6px; min-height: 0; }
#rdAcceso .rd-acc-listo { margin-top: 12px; justify-content: center; }
#rdAcceso [data-acc-error], #rdAcceso [data-acc-error2] { margin-top: 2px; }
#rdAcceso [data-acc-error2] { margin-top: 14px; }
#rdAcceso .boton[disabled] { opacity: .6; cursor: default; }
/* El widget del CAPTCHA (cuando Cloudflare pide un toque) dentro del pie */
#rdAcceso .pie-accion .captcha.visible { margin: 0; }
/* Sin pedir nada, no ocupa lugar: en su lugar va la línea «Comprobando que eres una persona…» */
#rdAcceso .captcha.reservado:not(.visible) { height: 0; margin: 0; border: 0; background: none; }
#rdAcceso .captcha.reservado:not(.visible)::before { content: none; }
@media (min-width: 900px) {
  #rdAcceso:not([hidden]) { align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
  #rdAcceso .rd-acc.activa { flex: none; width: 100%; max-width: 440px; margin: auto; border-radius: 28px; overflow: hidden; background: rgba(16, 18, 44, .85); border: 1px solid var(--borde); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
  #rdAcceso .rd-acc .pantalla { flex: none; overflow: visible; padding: 20px 28px 12px; }
  #rdAcceso .rd-acc .pie-accion { padding: 12px 28px 24px; border-top: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #rdAcceso .rd-acc-aviso { margin-top: 28px; }
}