/* ============================================================================
   REGISTRO PÚBLICO — la primera pantalla que ve alguien que aún no es cliente
   ============================================================================

   Se diseña aparte del panel a propósito: aquí no hay menú, ni sesión, ni datos
   que mirar. Solo hay que responder tres cosas —qué me llevo, cuánto cuesta y
   cómo empiezo— y todo lo demás sobra.

   La paleta es la de NEXO (el azul del logo y del botón de entrar), no la del
   panel: esta página se comparte por WhatsApp y por redes, y tiene que
   reconocerse como la marca de un vistazo.
   ========================================================================== */

/*
 * EL REGISTRO NECESITA PODER DESPLAZARSE.
 *
 * Esta página comparte el armazón del login, y ese está hecho para una pantalla
 * exacta: `.auth-body` centra su tarjeta con grid y lleva `overflow: hidden`
 * para que los círculos de colores del fondo no saquen barras de desplazamiento.
 *
 * Aquí eso estorba: el registro mide casi dos pantallas —planes, formulario y
 * resumen— y con el desbordamiento oculto la parte de abajo quedaba recortada.
 *
 * Se corrige SOLO en esta página, con `:has`, en vez de tocar `.auth-body`: el
 * login sigue exactamente igual, sin barras y con su tarjeta centrada. Y el
 * contenido se alinea arriba, porque centrar verticalmente algo más alto que la
 * ventana lo empuja hacia fuera por los dos lados.
 */
body:has(.nx-reg) {
    /*
     * `visible` y no `auto`: con `auto` el desplazamiento se queda DENTRO del
     * body y la rueda del ratón no llega al final de la página. Devolviéndole
     * el desbordamiento normal, scrollea el documento como cualquier página.
     * Los círculos del fondo no sacan barra lateral porque viven en `.auth-bg`,
     * que es fija y ya recorta lo suyo.
     */
    overflow: visible;

    /*
     * Y alineado ARRIBA, no centrado.
     *
     * `.auth-body` usa `place-items: center` para dejar la tarjeta del login en
     * mitad de la pantalla. Con un contenido MÁS ALTO que la ventana, centrarlo
     * lo desborda por los dos lados a la vez: la mitad de arriba queda por
     * encima del borde superior y no hay forma de llegar a ella, porque no se
     * puede desplazar hacia arriba desde el inicio del documento.
     *
     * Es justo lo que se veía: el logo y el título cortados por arriba.
     */
    align-items: start;
    align-content: start;

    /*
     * Y que ocupe TODO el ancho.
     *
     * `place-items: center` también trae `justify-items: center`, y con eso el
     * bloque toma el ancho de su contenido en vez del de la pantalla: medía 529
     * px en una ventana de 1366 y las tarjetas, que van en rejilla automática,
     * se apilaban en una sola columna. La página parecía kilométrica sin motivo.
     */
    justify-items: stretch;
}
.nx-reg { width: 100%; }

.nx-reg {
    --az-a: #011b77;   /* azul profundo, el del botón de entrar */
    --az-b: #0147bc;   /* azul medio */
    --az-c: #2f7bff;   /* azul claro, para brillos y acentos */
    --tinta: #e8edf7;
    --tinta-suave: #9aa6bf;
    --panel: #121a30;
    --panel-2: #0d1424;
    --linea: rgba(148, 163, 184, .16);

    max-width: 1140px;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
    position: relative;
}

/* Un resplandor detrás del título. Da profundidad sin cargar la página con
   imágenes que tarden en bajar. */
.nx-reg::before {
    content: "";
    position: absolute;
    top: -120px; left: 50%;
    width: min(900px, 120vw); height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
                rgba(47, 123, 255, .22) 0%,
                rgba(1, 71, 188, .10) 42%,
                transparent 70%);
    pointer-events: none;
    /*
     * El resplandor va DETRÁS, con z-index negativo.
     *
     * Antes se conseguía al revés: dejando el pseudo-elemento en 0 y subiendo
     * todos los hijos a `z-index: 1`. Funcionaba para el fondo, pero cada hijo
     * pasaba a crear su propio contexto de apilamiento, y la ventana de
     * contratación quedaba atrapada dentro del formulario —por debajo del velo
     * oscuro de Bootstrap, que se cuelga del body—. Se veía apagada al fondo y
     * no se podía escribir en ella.
     *
     * Mandando el resplandor hacia atrás, los hijos no necesitan z-index y la
     * ventana sube donde tiene que subir.
     */
    z-index: -1;
}

/* ── Portada ─────────────────────────────────────────────────────── */
.nx-reg__hero { text-align: center; margin-bottom: 2rem; }
.nx-reg__logo { height: 62px; margin-bottom: 1rem; }

.nx-reg__titulo {
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    color: var(--tinta);
}
.nx-reg__marca {
    background: linear-gradient(100deg, var(--az-c), #7db3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nx-reg__sub {
    color: var(--tinta-suave);
    font-size: clamp(.92rem, 2vw, 1.05rem);
    margin: 0;
}

/* ── Mandos: ciclo de pago y gama ────────────────────────────────── */
.nx-reg__mandos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.75rem;
}

/* Interruptor mes / año. Los radios están ocultos y mandan las etiquetas. */
.nx-ciclo {
    display: inline-flex;
    background: var(--panel-2);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: .25rem;
}
.nx-ciclo input { position: absolute; opacity: 0; pointer-events: none; }
.nx-ciclo label {
    padding: .42rem 1.1rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color .18s, background .18s;
    margin: 0;
}
.nx-ciclo input:checked + label {
    background: linear-gradient(135deg, var(--az-a), var(--az-b));
    color: #fff;
}

/* Pestañas de gama */
.nx-gamas { display: inline-flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.nx-gamas button {
    border: 1px solid var(--linea);
    background: var(--panel-2);
    color: var(--tinta-suave);
    border-radius: 999px;
    padding: .45rem 1.05rem;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.nx-gamas button i { margin-right: .35rem; opacity: .85; }
.nx-gamas button:hover { color: var(--tinta); border-color: rgba(47,123,255,.5); }
.nx-gamas button.is-on {
    background: linear-gradient(135deg, var(--az-a), var(--az-b));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(1, 71, 188, .35);
}

/* ── Las tarjetas ────────────────────────────────────────────────── */
.nx-planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 1.1rem;
    align-items: stretch;      /* todas la misma altura, pase lo que pase */
    margin-bottom: 1rem;
}
/* Con una o dos, que no se estiren a lo ancho de la pantalla. */
.nx-planes:has(.nx-plan:nth-child(2):last-child) { max-width: 640px; margin-inline: auto; }
.nx-planes:has(.nx-plan:only-child)              { max-width: 340px; margin-inline: auto; }

.nx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.35rem 1.35rem;
    border: 1.5px solid var(--linea);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.nx-plan input { position: absolute; opacity: 0; pointer-events: none; }
.nx-plan:hover { transform: translateY(-4px); border-color: rgba(47, 123, 255, .55); }

/* El elegido. El aro va por fuera para no mover ni un píxel del contenido. */
.nx-plan:has(input:checked) {
    border-color: var(--az-c);
    box-shadow: 0 0 0 3px rgba(47, 123, 255, .22), 0 18px 40px -18px rgba(1, 71, 188, .8);
}

/* El recomendado se distingue en reposo, sin depender de estar elegido. */
.nx-plan--top { border-color: rgba(47, 123, 255, .45); }
.nx-plan__cinta {
    position: absolute;
    top: -.7rem; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--az-b), var(--az-c));
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .22rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(1, 71, 188, .45);
}

.nx-plan__ico {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--az-a), var(--az-b));
    color: #fff;
    font-size: 1.05rem;
    margin: 0 auto .9rem;
    box-shadow: 0 8px 20px -8px rgba(1, 71, 188, .9);
}
.nx-plan--top .nx-plan__ico { background: linear-gradient(135deg, var(--az-b), var(--az-c)); }

.nx-plan__nombre {
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
    color: var(--tinta);
}
.nx-plan__lema {
    text-align: center;
    font-size: .8rem;
    color: var(--tinta-suave);
    margin-top: .2rem;
    min-height: 2.4em;          /* dos líneas: mantiene los precios alineados */
    display: flex; align-items: center; justify-content: center;
}

.nx-plan__precio {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .18rem;
    margin: .5rem 0 .1rem;
}
.nx-plan__moneda { font-size: .95rem; font-weight: 600; color: var(--tinta-suave); }
.nx-plan__valor {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    background: linear-gradient(100deg, #fff, #b9d2ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nx-plan__periodo { font-size: .82rem; color: var(--tinta-suave); }
.nx-plan__anual {
    text-align: center;
    font-size: .72rem;
    color: var(--tinta-suave);
    opacity: .8;
    margin-bottom: 1rem;
}

/* La lista crece para empujar el botón: así los botones de todas las tarjetas
   quedan a la misma altura por muchas líneas que tenga cada una. */
.nx-plan__lista {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .83rem;
    color: var(--tinta);
}
.nx-plan__lista li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.35; }
.nx-plan__lista i  { color: var(--az-c); font-size: .95rem; margin-top: .08rem; flex: 0 0 auto; }

/* Lo que el plan NO trae se enseña apagado, no se esconde: comparar dos planes
   es más fácil leyendo la misma lista en los dos. */
.nx-plan__lista .is-no   { color: var(--tinta-suave); opacity: .5; }
.nx-plan__lista .is-no i { color: var(--tinta-suave); }

.nx-plan__btn {
    display: block;
    text-align: center;
    padding: .68rem 1rem;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 700;
    border: 1.5px solid var(--linea);
    background: rgba(255, 255, 255, .04);
    color: var(--tinta);
    transition: all .18s;
}
.nx-plan:hover .nx-plan__btn { border-color: rgba(47, 123, 255, .5); }
.nx-plan:has(input:checked) .nx-plan__btn,
.nx-plan--top .nx-plan__btn {
    background: linear-gradient(135deg, var(--az-a), var(--az-b));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(1, 71, 188, .95);
}
.nx-plan:has(input:checked) .nx-plan__btn .js-txt::before {
    content: "\f058";                       /* check en círculo */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: .4rem;
}

.nx-reg__legal {
    text-align: center;
    font-size: .78rem;
    color: var(--tinta-suave);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 1.4rem 0 2.2rem;
}

/* ── El formulario ───────────────────────────────────────────────── */
.nx-form { display: grid; gap: 1rem; }
.nx-form__caja {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: 18px;
    padding: 1.4rem;
}
.nx-form__t {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--tinta);
    margin: 0 0 1.1rem;
}
.nx-form__t span {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--az-a), var(--az-b));
    color: #fff;
    font-size: .78rem;
}
.nx-form .form-label   { color: var(--tinta); }
.nx-form .form-text    { color: var(--tinta-suave); }
.nx-form .form-control,
.nx-form .form-select {
    background: var(--panel-2);
    border-color: var(--linea);
    color: var(--tinta);
}
.nx-form .form-control:focus,
.nx-form .form-select:focus {
    background: var(--panel-2);
    color: var(--tinta);
    border-color: var(--az-c);
    box-shadow: 0 0 0 .2rem rgba(47, 123, 255, .18);
}
.nx-form .form-control::placeholder { color: rgba(154, 166, 191, .55); }

/* ── La ventana de contratación ──────────────────────────────────── */
.nx-modal {
    background: var(--panel-2);
    border: 1px solid var(--linea);
    border-radius: 20px;
    color: var(--tinta);
}
.nx-modal__head {
    border-bottom: 1px solid var(--linea);
    padding: 1rem 1.25rem;
}
.nx-modal__head h6 { font-weight: 700; font-size: .95rem; }
.nx-modal__head .btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: .55; }
.nx-modal__body { padding: 1.25rem; }

/* El resumen de la compra: lo primero que se ve y lo que no se pierde de
   vista mientras se llenan los datos. */
.nx-resumen {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.1rem;
    border-radius: 14px;
    border: 1.5px solid rgba(47, 123, 255, .35);
    background: linear-gradient(120deg, rgba(1, 27, 119, .5), rgba(1, 71, 188, .22));
}
.nx-resumen__ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--az-b), var(--az-c));
    color: #fff; font-size: 1rem;
    flex: 0 0 auto;
}
.nx-resumen__txt  { flex: 1 1 auto; min-width: 0; }
.nx-resumen__plan { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.nx-resumen__det  { font-size: .78rem; color: var(--tinta-suave); margin-top: .1rem; }
.nx-resumen__precio { text-align: right; flex: 0 0 auto; }
.nx-resumen__precio span { display: block; font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.1; }
.nx-resumen__precio small { font-size: .72rem; color: var(--tinta-suave); }

.nx-resumen__lista {
    list-style: none;
    margin: .8rem 0 1.3rem;
    padding: 0 .2rem;
    display: flex; flex-wrap: wrap; gap: .35rem .9rem;
    font-size: .79rem;
    color: var(--tinta-suave);
}
.nx-resumen__lista li { display: flex; align-items: center; gap: .35rem; }
.nx-resumen__lista i  { color: var(--az-c); font-size: .8rem; }

.nx-modal__legal {
    font-size: .76rem;
    color: var(--tinta-suave);
    text-align: center;
    margin: 1.1rem 0 0;
    line-height: 1.55;
}
.nx-modal__legal i { color: var(--az-c); margin-right: .25rem; }

.nx-modal__pie {
    border-top: 1px solid var(--linea);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(1, 27, 119, .22);
}

/* Dentro de la ventana las cajas no necesitan su propio marco: ya están
   dentro de uno. Sin esto se ven cajas dentro de cajas. */
.nx-modal .nx-form__caja {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--linea);
    border-radius: 0;
    padding: 1.25rem 0 .25rem;
}
.nx-modal .nx-form { gap: 0; }

/* ── El cierre ───────────────────────────────────────────────────── */
.nx-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 1.2rem;
    padding: 1.4rem;
    border-radius: 18px;
    border: 1.5px solid rgba(47, 123, 255, .35);
    background: linear-gradient(120deg, rgba(1, 27, 119, .55), rgba(1, 71, 188, .28));
}
.nx-total__et  { font-size: .78rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.nx-total__val { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #fff; }
.nx-total__det { font-size: .8rem; color: var(--tinta-suave); }

.nx-total__btn {
    border: 0;
    border-radius: 14px;
    padding: .95rem 1.8rem;
    font-size: .98rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--az-b), var(--az-c));
    box-shadow: 0 14px 32px -12px rgba(47, 123, 255, .9);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.nx-total__btn:hover:not(:disabled) { transform: translateY(-2px); }
.nx-total__btn:disabled { opacity: .75; cursor: default; }
.nx-total__btn i { margin-right: .4rem; }

.nx-reg__pie {
    text-align: center;
    font-size: .8rem;
    color: var(--tinta-suave);
    margin: 1.4rem auto 0;
    max-width: 560px;
    line-height: 1.6;
}
.nx-reg__pie i { color: var(--az-c); margin-right: .3rem; }

.nx-reg__login { text-align: center; font-size: .88rem; color: var(--tinta-suave); margin-top: 1.6rem; }
.nx-reg__login a { color: var(--az-c); font-weight: 600; }

.nx-reg__aviso {
    max-width: 620px;
    margin: 0 auto;
    padding: 1.2rem;
    border-radius: 16px;
    border: 1px solid rgba(234, 179, 8, .35);
    background: rgba(234, 179, 8, .08);
    color: var(--tinta);
    text-align: center;
}
.nx-reg__aviso i { color: #eab308; margin-right: .4rem; }
.nx-reg__aviso a { color: var(--az-c); font-weight: 600; }

/* ── Pantallas pequeñas ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .nx-reg      { padding: 1.75rem .9rem 3rem; }
    .nx-reg__logo{ height: 52px; }
    .nx-plan     { padding: 1.45rem 1.15rem 1.2rem; }
    .nx-plan__valor { font-size: 1.95rem; }
    .nx-plan__lema  { min-height: 0; margin-bottom: .3rem; }
    .nx-total    { flex-direction: column; align-items: stretch; text-align: center; }
    .nx-total__btn { width: 100%; }
}

/* Quien prefiere el tema claro no tiene por qué ver una página oscura y otra
   clara al pasar del registro al panel: aquí se mantiene el mismo lenguaje,
   solo que sobre fondo claro. */
[data-theme="light"] .nx-reg {
    --tinta: #0b1c47;
    --tinta-suave: #5a6485;
    --panel: #ffffff;
    --panel-2: #f4f7fd;
    --linea: #dae1f5;
}
[data-theme="light"] .nx-plan__valor {
    background: linear-gradient(100deg, var(--az-a), var(--az-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-theme="light"] .nx-plan__btn { background: #f4f7fd; }
[data-theme="light"] .nx-total {
    background: linear-gradient(120deg, rgba(1, 71, 188, .10), rgba(47, 123, 255, .07));
}
[data-theme="light"] .nx-total__val { color: var(--az-a); }