/* ==========================================
   KFITNESS — THE ARENA
   Diseño exclusivo de registro.html
   ========================================== */

.pagina-registro-arena {
    --arena-rojo: #ed1c2e;
    --arena-texto: #f5f5f5;
    --arena-borde: rgba(255,255,255,.13);
    background: #08090b;
    color: var(--arena-texto);
}

    /* FONDO CINEMATOGRÁFICO */

    .pagina-registro-arena .arena-principal {
        position: relative;
        isolation: isolate;
        min-height: 100vh;
        padding: 105px 24px 80px;
        overflow: hidden;
        background: linear-gradient(90deg, rgba(5,6,9,.83) 0%, rgba(5,6,9,.65) 46%, rgba(5,6,9,.78) 100%), radial-gradient(ellipse at 30% 50%, rgba(237,28,46,.16), transparent 65%), #090a0d;
    }

        /* Efectos de iluminación */

        .pagina-registro-arena .arena-principal::before {
            content: "";
            position: absolute;
            z-index: -1;
            inset: 0;
            background: radial-gradient(circle at 15% 40%, rgba(237,28,46,.18), transparent 38%), radial-gradient(circle at 85% 70%, rgba(237,28,46,.12), transparent 35%);
            pointer-events: none;
        }

        .pagina-registro-arena .arena-principal::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 180px;
            background: linear-gradient( transparent, rgba(0,0,0,.55) );
            pointer-events: none;
        }

    /* CONTENEDOR PRINCIPAL */

    .pagina-registro-arena .arena-contenedor {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 570px);
        align-items: center;
        gap: clamp(32px, 5vw, 100px);
        width: min(1320px, 100%);
        margin: 0 auto;
    }

    /* PRESENTACIÓN IZQUIERDA */

    .pagina-registro-arena .arena-presentacion {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 600px;
    }

    .pagina-registro-arena .arena-presentacion-contenido {
        max-width: 650px;
        animation: arena-entrada-izquierda .9s ease both;
    }

    .pagina-registro-arena .arena-etiqueta {
        display: inline-block;
        margin-bottom: 25px;
        color: #ff5260;
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .28em;
    }

    .pagina-registro-arena .arena-titulo {
        margin: 0 0 26px;
        color: #fff;
        font-size: clamp(3.3rem, 5.8vw, 6.5rem);
        font-weight: 900;
        line-height: .98;
        letter-spacing: -.055em;
        text-transform: uppercase;
        text-shadow: 0 5px 35px rgba(0,0,0,.65);
    }

        .pagina-registro-arena .arena-titulo span {
            display: block;
            color: var(--arena-rojo);
            text-shadow: 0 0 30px rgba(237,28,46,.35), 0 0 70px rgba(237,28,46,.13);
        }

    .pagina-registro-arena .arena-descripcion {
        max-width: 480px;
        margin: 0;
        color: #d1d1d5;
        font-size: 1.05rem;
        line-height: 1.8;
    }

    /* BENEFICIOS */

    .pagina-registro-arena .arena-beneficios {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 40px;
    }

    .pagina-registro-arena .arena-beneficio {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 125px;
        padding: 18px 22px;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 12px;
        background: rgba(255,255,255,.055);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-size: .83rem;
        font-weight: 800;
        letter-spacing: .07em;
        transition: transform .3s ease, border-color .3s ease, background .3s ease;
    }

        .pagina-registro-arena .arena-beneficio:hover {
            transform: translateY(-6px);
            border-color: rgba(237,28,46,.65);
            background: rgba(237,28,46,.12);
        }

    .pagina-registro-arena .arena-beneficio-numero {
        color: #ff5260;
        font-size: .75rem;
        letter-spacing: .12em;
    }

    /* FORMULARIO DE CRISTAL */

    .pagina-registro-arena .arena-formulario {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: clamp(22px, 3vw, 38px);
        border: 1px solid rgba(237,28,46,.45);
        border-radius: 22px;
        background: rgba(12,13,18,.78);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 0 25px 80px rgba(0,0,0,.55), 0 0 35px rgba(237,28,46,.12), inset 0 1px 0 rgba(255,255,255,.08);
        animation: arena-entrada-derecha .9s ease both;
    }

    .pagina-registro-arena .arena-formulario-encabezado {
        margin-bottom: 26px;
        text-align: center;
    }

    .pagina-registro-arena .arena-formulario .auth-logo {
        width: 130px;
        max-width: 45%;
        margin: -12px auto 6px;
        object-fit: contain;
    }

    .pagina-registro-arena .arena-formulario-etiqueta {
        display: block;
        margin-bottom: 10px;
        color: #ff5260;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .2em;
    }

    .pagina-registro-arena .arena-formulario h1 {
        margin: 0 0 8px;
        color: #fff;
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        font-weight: 800;
        text-align: center;
    }

    .pagina-registro-arena .arena-formulario-descripcion {
        margin: 0;
        color: #aeb0b8;
        font-size: .88rem;
        line-height: 1.6;
    }

    /* DISTRIBUCIÓN DE CAMPOS */

    .pagina-registro-arena .arena-formulario-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .pagina-registro-arena .arena-seccion-titulo {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

        .pagina-registro-arena .arena-seccion-titulo span {
            color: #ff5260;
            font-size: .75rem;
            font-weight: 800;
        }

        .pagina-registro-arena .arena-seccion-titulo h2 {
            margin: 0;
            color: #f1f1f3;
            font-size: .85rem;
            font-weight: 700;
            letter-spacing: .035em;
        }

    .pagina-registro-arena .arena-campo {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 7px;
    }

        .pagina-registro-arena .arena-campo label {
            color: #e3e3e7;
            font-size: .8rem;
            font-weight: 600;
        }

        .pagina-registro-arena .arena-campo input {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            height: 44px;
            padding: 10px 13px;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 9px;
            outline: none;
            background: rgba(255,255,255,.055);
            color: #fff;
            font: inherit;
            font-size: .9rem;
            color-scheme: dark;
            transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
        }

            .pagina-registro-arena .arena-campo input:hover {
                border-color: rgba(255,255,255,.32);
            }

            .pagina-registro-arena .arena-campo input:focus {
                outline: none;
                border-color: var(--arena-rojo);
                background: rgba(255,255,255,.075);
                box-shadow: 0 0 0 3px rgba(237,28,46,.15);
            }

        .pagina-registro-arena .arena-campo .texto-ayuda {
            color: #aeb0b8;
            font-size: .7rem;
            line-height: 1.5;
        }

    /* TÉRMINOS Y BOTÓN */

    .pagina-registro-arena .arena-terminos {
        grid-column: 1 / -1;
        margin: 8px 0 0;
        color: #d5d5d9;
        font-size: .82rem;
    }

        .pagina-registro-arena .arena-terminos input {
            accent-color: var(--arena-rojo);
        }

    .pagina-registro-arena .arena-boton {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: 100%;
        min-height: 50px;
        border-radius: 10px;
        background: linear-gradient(135deg, #ed1c2e, #b70c20);
        color: #fff;
        font-weight: 800;
        letter-spacing: .09em;
        box-shadow: 0 8px 28px rgba(237,28,46,.24);
        transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }

        .pagina-registro-arena .arena-boton:hover {
            transform: translateY(-3px);
            filter: brightness(1.12);
            box-shadow: 0 12px 35px rgba(237,28,46,.4);
        }

        .pagina-registro-arena .arena-boton span {
            font-size: 1.3rem;
        }

    .pagina-registro-arena #registro-mensaje {
        grid-column: 1 / -1;
        margin: 0;
    }

    .pagina-registro-arena .arena-login-enlace {
        margin-top: 22px;
        text-align: center;
    }

        .pagina-registro-arena .arena-login-enlace p {
            margin: 0;
            color: #bfc0c6;
            font-size: .85rem;
        }

        .pagina-registro-arena .arena-login-enlace a {
            color: #ff5260;
            font-weight: 700;
            text-decoration: none;
        }

            .pagina-registro-arena .arena-login-enlace a:hover {
                text-decoration: underline;
            }

    /* NAVBAR Y FOOTER DE CRISTAL */

    .pagina-registro-arena .site-header {
        position: relative;
        z-index: 10;
        background: rgba(9,10,14,.8);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .pagina-registro-arena .site-footer {
        position: relative;
        z-index: 1;
        background: rgba(10,11,15,.9);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(255,255,255,.1);
    }

/* ANIMACIONES */

@keyframes arena-entrada-izquierda {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes arena-entrada-derecha {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .pagina-registro-arena .arena-contenedor {
        grid-template-columns: 1fr;
        max-width: 680px;
        gap: 35px;
    }

    .pagina-registro-arena .arena-presentacion {
        min-height: auto;
        text-align: center;
        justify-content: center;
    }

    .pagina-registro-arena .arena-presentacion-contenido {
        max-width: 100%;
    }

    .pagina-registro-arena .arena-titulo {
        font-size: clamp(3rem, 8vw, 5rem);
    }

    .pagina-registro-arena .arena-descripcion {
        margin-inline: auto;
    }

    .pagina-registro-arena .arena-beneficios {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .pagina-registro-arena .arena-principal {
        padding: 45px 15px 55px;
    }

    .pagina-registro-arena .arena-titulo {
        font-size: clamp(2.6rem, 11vw, 4rem);
    }

    .pagina-registro-arena .arena-descripcion {
        font-size: .92rem;
    }

    .pagina-registro-arena .arena-beneficio {
        min-width: 0;
        flex: 1 1 90px;
        padding: 13px 10px;
        text-align: center;
    }

    .pagina-registro-arena .arena-formulario {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .pagina-registro-arena .arena-formulario-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .pagina-registro-arena .arena-seccion-titulo,
    .pagina-registro-arena .arena-terminos,
    .pagina-registro-arena .arena-boton,
    .pagina-registro-arena #registro-mensaje {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-registro-arena *,
    .pagina-registro-arena *::before,
    .pagina-registro-arena *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================
   THE ARENA — FONDO CINEMATOGRÁFICO
   Imagen continua: navbar, contenido y footer
   ========================================== */

/* Imagen principal para toda la página */
body.pagina-registro-arena {
    background-image: linear-gradient( 90deg, rgba(5, 6, 9, 0.72) 0%, rgba(5, 6, 9, 0.48) 48%, rgba(5, 6, 9, 0.72) 100% ), url("../img/arena-fondo.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.kf-global-bg.pagina-registro-arena {
    background-image: none;
}


/* Dejar visible el fondo detrás del contenido */
.pagina-registro-arena .arena-principal {
    background: transparent;
}

    /* Iluminación ambiental */
    .pagina-registro-arena .arena-principal::before {
        background: radial-gradient( circle at 15% 45%, rgba(237, 28, 46, 0.13), transparent 45% ), radial-gradient( circle at 85% 70%, rgba(0, 0, 0, 0.28), transparent 55% );
    }

.kf-global-bg.pagina-registro-arena .arena-principal::before,
.kf-global-bg.pagina-registro-arena .arena-principal::after {
    content: none;
}

/* Navbar de cristal */
.pagina-registro-arena .site-header {
    background: rgba(8, 9, 13, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Footer de cristal con el mismo fondo */
.pagina-registro-arena .site-footer {
    background: rgba(8, 9, 13, 0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Adaptación para celulares */
@media (max-width: 768px) {
    body.pagina-registro-arena {
        background-attachment: scroll;
        background-position: center top;
    }
}