/* =========================================================
   CONTRATA FÁCIL
   LOGIN
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --blue: #063b78;
    --blue-dark: #032e61;
    --blue-soft: #54759d;

    --red: #ff111b;
    --red-dark: #dc0710;
    --red-light: #fff0f1;

    --green: #16b77a;
    --yellow: #ffbd3b;

    --text: #103f77;

    --white: #ffffff;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text);

    overflow: hidden;

}


/* =========================================================
   PÁGINA
========================================================= */

.login-page {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 100vh;

    overflow: hidden;


    /*
       IMAGEN COMPLETA DE FONDO
    */

    background-image:
        url("../img/fondo-login.9230fd1981d4.png");

    background-repeat: no-repeat;

    background-position:
        center center;

    background-size:
        cover;

}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.login-main {

    position: relative;

    z-index: 5;

    width: 100%;

    height: 100vh;

    min-height: 100vh;

}


.login-container {

    position: relative;

    width: 94%;

    max-width: 1480px;

    height: 100vh;

    min-height: 100vh;

    margin: 0 auto;

}


/* =========================================================
   CONTENIDO IZQUIERDO
========================================================= */

.hero-content {

    position: absolute;

    z-index: 10;

    top: 50%;

    left: 0;

    width: 56%;

    transform:
        translateY(-50%);

}


/* =========================================================
   BADGE
========================================================= */

.member-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 20px;

    margin-bottom: 15px;

    border:
        1px solid
        rgba(
            255,
            17,
            27,
            .10
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            240,
            241,
            .92
        );

    color: var(--red);

    font-size: .76rem;

    font-weight: 800;

}


.member-badge i {

    font-size: 1rem;

}


/* =========================================================
   TÍTULO
========================================================= */

.brand-title {

    margin: 0;

    color: var(--blue);

    font-size:
        clamp(
            3.8rem,
            5.3vw,
            6rem
        );

    line-height: .88;

    letter-spacing: -4px;

    font-weight: 900;

}


.brand-title span {

    color: var(--red);

}


/* =========================================================
   SUBTÍTULO
========================================================= */

.brand-subtitle {

    margin:
        18px 0 13px;

    color: var(--blue);

    font-size:
        clamp(
            1.45rem,
            2.2vw,
            2.35rem
        );

    line-height: 1.05;

    letter-spacing: -1px;

    font-weight: 800;

}


/* =========================================================
   TEMAS
========================================================= */

.topics {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 13px;

    color: var(--blue);

    font-size: .78rem;

    font-weight: 800;

}


.topics b {

    color: var(--red);

}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.brand-description {

    max-width: 620px;

    margin-bottom: 20px;

    color: #486d99;

    font-size: .90rem;

    line-height: 1.48;

}


/* =========================================================
   BENEFICIOS
========================================================= */

.benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 11px;

    width: 100%;

    max-width: 900px;

}


.benefit-card {

    min-height: 91px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        11px 13px;

    border:
        1px solid
        rgba(
            205,
            222,
            239,
            .95
        );

    border-radius: 16px;

    background:
        rgba(
            255,
            255,
            255,
            .91
        );

    box-shadow:
        0 8px 25px
        rgba(
            25,
            72,
            115,
            .07
        );

    backdrop-filter:
        blur(7px);

}


/* =========================================================
   ICONOS
========================================================= */

.benefit-icon {

    flex:
        0 0 47px;

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    font-size: 1.35rem;

}


.benefit-icon.red {

    color: var(--red);

    background:
        #fff0f1;

}


.benefit-icon.blue {

    color: #087bdc;

    background:
        #e7f3ff;

}


.benefit-icon.green {

    color: #13a86f;

    background:
        #e3f8ef;

}


.benefit-icon.yellow {

    color: #f2a900;

    background:
        #fff3d8;

}


/* =========================================================
   TEXTO BENEFICIOS
========================================================= */

.benefit-body {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.benefit-body strong {

    color: var(--blue);

    font-size: .82rem;

    line-height: 1.2;

    font-weight: 800;

}


.benefit-body span {

    color: #55769b;

    font-size: .68rem;

    line-height: 1.3;

}


/* =========================================================
   FLECHA
========================================================= */

.benefit-arrow {

    flex:
        0 0 32px;

    width: 32px;

    height: 32px;

    margin-left: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #f1f6fb;

    color: #12609b;

    font-size: .9rem;

}


/* =========================================================
   SLOGAN
========================================================= */

.hero-slogan {

    margin-top: 15px;

}


.hero-slogan strong {

    display: block;

    color: var(--blue);

    font-size:
        clamp(
            1.45rem,
            2vw,
            2rem
        );

    line-height: 1.02;

    letter-spacing: -.7px;

    font-weight: 900;

}


.hero-slogan .red-text {

    margin-top: 3px;

    color: var(--red);

}


.slogan-line {

    width: 65px;

    height: 5px;

    margin-top: 8px;

    border-radius: 999px;

    background:
        var(--red);

}


/* =========================================================
   ELEMENTOS DE CONFIANZA
========================================================= */

.trust-items {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    width: 100%;

    max-width: 900px;

    margin-top: 10px;

}


.trust-item {

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 12px;

    border-right:
        1px solid
        rgba(
            20,
            72,
            120,
            .14
        );

    color: #55769a;

    font-size: .60rem;

    line-height: 1.25;

}


.trust-item:first-child {

    padding-left: 0;

}


.trust-item:last-child {

    border-right: 0;

}


.trust-item i {

    flex:
        0 0 auto;

    color: var(--blue);

    font-size: 1.65rem;

}


.trust-item b {

    color: var(--blue);

}


/* =========================================================
   LOGIN
========================================================= */

.login-column {

    position: absolute;

    z-index: 20;

    top: 50%;

    right: 0;

    width:
        min(
            410px,
            29vw
        );

    transform:
        translateY(-50%);

}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {

    position: relative;

    padding:
        29px 31px 21px;

    border:
        1px solid
        rgba(
            205,
            220,
            235,
            .90
        );

    border-radius: 20px;

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    box-shadow:
        0 20px 55px
        rgba(
            20,
            66,
            108,
            .14
        );

    backdrop-filter:
        blur(12px);

}


/* =========================================================
   LINHA VERMELHA
========================================================= */

.login-card-top {

    position: absolute;

    top: 0;

    left: 11%;

    width: 78%;

    height: 4px;

    border-radius:
        0 0 10px 10px;

    background:
        var(--red);

}


/* =========================================================
   HEADER LOGIN
========================================================= */

.login-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

}


.login-icon {

    flex:
        0 0 58px;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        #fff0f1;

    color:
        var(--red);

    font-size: 1.35rem;

}


.login-header h3 {

    margin: 0;

    color: var(--blue);

    font-size: 1.35rem;

    font-weight: 900;

}


.login-header p {

    margin:
        4px 0 0;

    color: #6b85a5;

    font-size: .70rem;

    line-height: 1.35;

}


/* =========================================================
   CAMPOS
========================================================= */

.form-field {

    margin-bottom: 16px;

}


.form-label {

    display: block;

    margin-bottom: 7px;

    color: var(--blue);

    font-size: .75rem;

    font-weight: 800;

}


.input-wrapper {

    position: relative;

}


.input-icon {

    position: absolute;

    z-index: 3;

    top: 50%;

    left: 16px;

    transform:
        translateY(-50%);

    color: #7190b1;

    font-size: .95rem;

}


.custom-input {

    width: 100%;

    height: 56px;

    padding:
        0 44px !important;

    border:
        1px solid
        #cbdced !important;

    border-radius:
        12px !important;

    background:
        rgba(
            245,
            249,
            255,
            .92
        ) !important;

    color:
        var(--blue) !important;

    font-size: .80rem;

    box-shadow:
        none !important;

}


.custom-input::placeholder {

    color:
        #829ab5;

}


.custom-input:focus {

    border-color:
        #8daed1 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(
            27,
            92,
            147,
            .08
        ) !important;

}


/* =========================================================
   MOSTRAR CONTRASEÑA
========================================================= */

.btn-password {

    position: absolute;

    z-index: 5;

    top: 50%;

    right: 7px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 8px;

    background:
        transparent;

    color:
        #6d88a7;

    cursor: pointer;

}


.btn-password:hover {

    background:
        #eaf2fa;

    color:
        var(--blue);

}


/* =========================================================
   BOTÓN LOGIN
========================================================= */

.btn-login {

    width: 100%;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 4px;

    border: 0;

    border-radius: 12px;

    background:
        var(--red);

    color:
        #ffffff;

    font-size: .88rem;

    font-weight: 800;

    box-shadow:
        0 10px 24px
        rgba(
            255,
            17,
            27,
            .20
        );

    cursor: pointer;

    transition:
        .2s ease;

}


.btn-login:hover {

    background:
        var(--red-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 28px
        rgba(
            255,
            17,
            27,
            .25
        );

}


.btn-login:disabled {

    cursor:
        not-allowed;

    opacity:
        .85;

}


.login-arrow {

    font-size:
        1rem;

}


/* =========================================================
   RECUPERAR CONTRASEÑA
========================================================= */

.forgot-password {

    text-align:
        center;

    margin-top:
        13px;

}


.forgot-password a {

    color:
        #6984a2;

    font-size:
        .68rem;

    text-decoration:
        none;

}


.forgot-password a:hover {

    color:
        var(--red);

}


/* =========================================================
   MENSAJES
========================================================= */

.messages-container {

    margin-top:
        13px;

}


.login-alert {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(
            227,
            6,
            19,
            .15
        );

    border-radius:
        8px;

    background:
        #fff4f4;

    color:
        #b4232f;

    font-size:
        .68rem;

    line-height:
        1.35;

}


/* =========================================================
   SEGURIDAD
========================================================= */

.login-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        15px;

    padding-top:
        11px;

    border-top:
        1px solid
        #edf1f5;

    color:
        #7188a4;

    font-size:
        .62rem;

}


.login-card-footer i {

    color:
        var(--green);

    font-size:
        .90rem;

}


/* =========================================================
   MEMBRESÍA
========================================================= */

.membership-card {

    margin-top:
        14px;

    padding:
        15px 19px 17px;

    border:
        1px solid
        #ffd9dc;

    border-radius:
        18px;

    background:
        rgba(
            255,
            248,
            249,
            .94
        );

    box-shadow:
        0 10px 30px
        rgba(
            35,
            72,
            110,
            .07
        );

    backdrop-filter:
        blur(10px);

}


.membership-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        7px;

    border-radius:
        11px;

    background:
        #ffebed;

    color:
        var(--red);

    font-size:
        1.1rem;

}


.membership-content strong {

    display:
        block;

    color:
        var(--blue);

    font-size:
        .78rem;

    font-weight:
        900;

}


.membership-content p {

    margin:
        4px 0 10px;

    color:
        #6680a0;

    font-size:
        .63rem;

    line-height:
        1.35;

}


/* =========================================================
   BOTÓN PLANES
========================================================= */

.membership-button {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1.4px solid
        var(--red);

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .80
        );

    color:
        var(--red);

    font-size:
        .70rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .2s ease;

}


.membership-button:hover {

    background:
        var(--red);

    color:
        #ffffff;

}


/* =========================================================
   PANTALLAS GRANDES
========================================================= */

@media (min-width: 1600px) {

    .login-container {

        width:
            94%;

    }


    .hero-content {

        width:
            57%;

    }


    .brand-title {

        font-size:
            6rem;

    }


    .brand-subtitle {

        font-size:
            2.3rem;

    }


    .brand-description {

        font-size:
            .96rem;

    }


    .benefit-card {

        min-height:
            98px;

    }


    .benefit-body strong {

        font-size:
            .88rem;

    }


    .benefit-body span {

        font-size:
            .72rem;

    }


    .login-column {

        width:
            410px;

    }

}


/* =========================================================
   ALTURA REDUCIDA
   1366x768 / 1440x800
========================================================= */

@media (
    min-width: 992px
) and (
    max-height: 850px
) {

    .hero-content {

        width:
            55%;

    }


    .member-badge {

        margin-bottom:
            10px;

        padding:
            8px 16px;

        font-size:
            .68rem;

    }


    .brand-title {

        font-size:
            clamp(
                3.4rem,
                5vw,
                5.1rem
            );

    }


    .brand-subtitle {

        margin:
            12px 0 9px;

        font-size:
            clamp(
                1.25rem,
                2vw,
                1.85rem
            );

    }


    .topics {

        margin-bottom:
            8px;

        font-size:
            .68rem;

    }


    .brand-description {

        margin-bottom:
            13px;

        font-size:
            .76rem;

    }


    .benefits-grid {

        gap:
            8px;

    }


    .benefit-card {

        min-height:
            76px;

        padding:
            8px 10px;

    }


    .benefit-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        font-size:
            1.1rem;

    }


    .benefit-body strong {

        font-size:
            .72rem;

    }


    .benefit-body span {

        font-size:
            .59rem;

    }


    .benefit-arrow {

        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;

    }


    .hero-slogan {

        margin-top:
            9px;

    }


    .hero-slogan strong {

        font-size:
            1.35rem;

    }


    .trust-items {

        margin-top:
            6px;

    }


    .trust-item {

        font-size:
            .54rem;

    }


    .trust-item i {

        font-size:
            1.35rem;

    }


    /* LOGIN */

    .login-column {

        width:
            min(
                380px,
                29vw
            );

    }


    .login-card {

        padding:
            23px 25px 17px;

    }


    .login-header {

        margin-bottom:
            17px;

    }


    .login-icon {

        width:
            48px;

        height:
            48px;

        flex-basis:
            48px;

    }


    .login-header h3 {

        font-size:
            1.12rem;

    }


    .login-header p {

        font-size:
            .61rem;

    }


    .form-field {

        margin-bottom:
            11px;

    }


    .form-label {

        margin-bottom:
            5px;

        font-size:
            .67rem;

    }


    .custom-input {

        height:
            47px;

        font-size:
            .72rem;

    }


    .btn-login {

        height:
            48px;

        font-size:
            .78rem;

    }


    .forgot-password {

        margin-top:
            9px;

    }


    .login-card-footer {

        margin-top:
            10px;

        padding-top:
            8px;

        font-size:
            .56rem;

    }


    .membership-card {

        margin-top:
            8px;

        padding:
            10px 14px 11px;

    }


    .membership-icon {

        width:
            34px;

        height:
            34px;

        margin-bottom:
            5px;

    }


    .membership-content strong {

        font-size:
            .68rem;

    }


    .membership-content p {

        margin:
            3px 0 7px;

        font-size:
            .54rem;

    }


    .membership-button {

        min-height:
            34px;

        font-size:
            .61rem;

    }

}






/* =========================================================
   MÓVIL / TABLET
   FONDO MÁS CLARO PARA MEJORAR LEGIBILIDAD
========================================================= */

@media (max-width: 991px) {

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .login-page {
        position: relative;

        height: auto;
        min-height: 100vh;

        overflow: visible;

        background-position: 70% center;
        background-size: cover;
    }

    /* Capa clara sobre la imagen */
    .login-page::before {
        content: "";

        position: fixed;

        inset: 0;

        z-index: 1;

        background:
            rgba(
                255,
                255,
                255,
                0.78
            );

        pointer-events: none;
    }

    .login-main {
        position: relative;

        z-index: 2;

        height: auto;

        min-height: 100vh;
    }

    .login-container {
        position: relative;

        z-index: 3;

        width: 92%;

        height: auto;

        min-height: 100vh;

        padding: 35px 0 40px;
    }

    .hero-content {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;

        transform: none;

        text-align: center;
    }

    .member-badge {
        margin-bottom: 15px;
    }

    .brand-title {
        font-size:
            clamp(
                3rem,
                12vw,
                4.8rem
            );
    }

    .brand-subtitle {
        font-size: 1.45rem;
    }

    .topics {
        justify-content: center;
    }

    .brand-description {
        margin-left: auto;
        margin-right: auto;

        color: #365d8b;

        font-weight: 500;
    }

    .benefits-grid {
        width: 100%;

        max-width: 650px;

        margin: 0 auto;

        text-align: left;
    }

    .hero-slogan {
        text-align: left;

        max-width: 650px;

        margin-left: auto;
        margin-right: auto;
    }

    .trust-items {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .login-column {
        position: relative;

        top: auto;
        right: auto;

        width:
            min(
                430px,
                100%
            );

        margin:
            35px auto 0;

        transform: none;
    }

    .login-card {
        padding:
            28px 24px 22px;

        /*
           El formulario permanece blanco
           para máxima legibilidad.
        */
        background:
            rgba(
                255,
                255,
                255,
                0.97
            );
    }

    .membership-card {
        background:
            rgba(
                255,
                248,
                249,
                0.97
            );
    }
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .login-container {

        width:
            92%;

        padding:
            25px 0 35px;

    }


    .brand-title {

        font-size:
            3rem;

    }


    .brand-subtitle {

        font-size:
            1.18rem;

    }


    .topics {

        gap:
            5px;

        font-size:
            .64rem;

    }


    .brand-description {

        font-size:
            .76rem;

    }


    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    .benefit-card {

        min-height:
            86px;

    }


    .trust-items {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .trust-item {

        border-right:
            1px solid
            rgba(
                20,
                72,
                120,
                .14
            );

    }


    .trust-item:nth-child(
        2n
    ) {

        border-right:
            0;

    }


    .login-column {

        margin-top:
            28px;

    }


    .membership-card {

        margin-top:
            12px;

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 400px) {

    .brand-title {

        font-size:
            2.7rem;

    }


    .brand-subtitle {

        font-size:
            1.05rem;

    }


    .trust-items {

        grid-template-columns:
            1fr;

    }


    .trust-item,
    .trust-item:nth-child(2n) {

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                20,
                72,
                120,
                .14
            );

    }


    .trust-item:last-child {

        border-bottom:
            0;

    }

}









/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}




/* =========================================================
   AJUSTE FINAL DESKTOP
   APROVECHAR ESPACIO BLANCO
   90% Y 100%
========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       CONTENEDOR
    ----------------------------------------------------- */

    .login-container {
        width: 96%;
        max-width: 1580px;
    }


    /* -----------------------------------------------------
       CONTENIDO IZQUIERDO
    ----------------------------------------------------- */

    .hero-content {
        width: 58%;
    }


    /* -----------------------------------------------------
       BADGE
    ----------------------------------------------------- */

    .member-badge {
        padding: 11px 21px;
        margin-bottom: 17px;

        font-size: .80rem;
    }


    /* -----------------------------------------------------
       TÍTULO PRINCIPAL
    ----------------------------------------------------- */

    .brand-title {
        font-size: clamp(
            4.5rem,
            5.7vw,
            6.4rem
        );

        letter-spacing: -4.5px;
    }


    /* -----------------------------------------------------
       SUBTÍTULO
    ----------------------------------------------------- */

    .brand-subtitle {
        margin-top: 20px;
        margin-bottom: 15px;

        font-size: clamp(
            1.65rem,
            2.35vw,
            2.45rem
        );

        line-height: 1.06;
    }


    /* -----------------------------------------------------
       TEMAS
    ----------------------------------------------------- */

    .topics {
        margin-bottom: 15px;

        gap: 9px;

        font-size: .82rem;
    }


    /* -----------------------------------------------------
       DESCRIPCIÓN
    ----------------------------------------------------- */

    .brand-description {
        max-width: 680px;

        margin-bottom: 22px;

        font-size: .96rem;

        line-height: 1.5;
    }


    /* -----------------------------------------------------
       TARJETAS
    ----------------------------------------------------- */

    .benefits-grid {
        max-width: 950px;

        gap: 13px;
    }


    .benefit-card {
        min-height: 104px;

        padding: 13px 15px;

        border-radius: 17px;
    }


    .benefit-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 1.45rem;
    }


    .benefit-body strong {
        font-size: .90rem;
    }


    .benefit-body span {
        font-size: .73rem;

        line-height: 1.35;
    }


    .benefit-arrow {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }


    /* -----------------------------------------------------
       SLOGAN
    ----------------------------------------------------- */

    .hero-slogan {
        margin-top: 18px;
    }


    .hero-slogan strong {
        font-size: clamp(
            1.65rem,
            2.15vw,
            2.15rem
        );
    }


    .slogan-line {
        width: 70px;
        height: 5px;

        margin-top: 9px;
    }


    /* -----------------------------------------------------
       INFORMACIÓN INFERIOR
    ----------------------------------------------------- */

    .trust-items {
        max-width: 950px;

        margin-top: 12px;
    }


    .trust-item {
        font-size: .66rem;

        gap: 9px;
    }


    .trust-item i {
        font-size: 1.8rem;
    }


    /* =====================================================
       LOGIN
    ===================================================== */

    .login-column {
        width: min(
            430px,
            30vw
        );
    }


    .login-card {
        padding:
            32px 33px 23px;

        border-radius: 21px;
    }


    .login-header {
        gap: 15px;

        margin-bottom: 25px;
    }


    .login-icon {
        width: 61px;
        height: 61px;

        flex-basis: 61px;

        border-radius: 15px;

        font-size: 1.45rem;
    }


    .login-header h3 {
        font-size: 1.42rem;
    }


    .login-header p {
        font-size: .75rem;
    }


    /* -----------------------------------------------------
       CAMPOS
    ----------------------------------------------------- */

    .form-field {
        margin-bottom: 17px;
    }


    .form-label {
        margin-bottom: 8px;

        font-size: .78rem;
    }


    .custom-input {
        height: 59px;

        font-size: .84rem;

        border-radius: 13px !important;
    }


    .input-icon {
        left: 17px;

        font-size: 1rem;
    }


    /* -----------------------------------------------------
       BOTÓN
    ----------------------------------------------------- */

    .btn-login {
        height: 59px;

        border-radius: 13px;

        font-size: .92rem;
    }


    /* -----------------------------------------------------
       RECUPERACIÓN
    ----------------------------------------------------- */

    .forgot-password {
        margin-top: 14px;
    }


    .forgot-password a {
        font-size: .72rem;
    }


    /* -----------------------------------------------------
       SEGURIDAD
    ----------------------------------------------------- */

    .login-card-footer {
        margin-top: 17px;

        padding-top: 13px;

        font-size: .66rem;
    }


    /* -----------------------------------------------------
       MEMBRESÍA
    ----------------------------------------------------- */

    .membership-card {
        margin-top: 16px;

        padding:
            17px 20px 19px;

        border-radius: 19px;
    }


    .membership-icon {
        width: 45px;
        height: 45px;

        margin-bottom: 8px;

        font-size: 1.2rem;
    }


    .membership-content strong {
        font-size: .82rem;
    }


    .membership-content p {
        margin:
            5px 0 11px;

        font-size: .67rem;

        line-height: 1.4;
    }


    .membership-button {
        min-height: 44px;

        font-size: .73rem;
    }

}


/* =========================================================
   PANTALLAS DE ALTURA REDUCIDA
   1366x768 / 1440x800
========================================================= */

@media (
    min-width: 992px
) and (
    max-height: 850px
) {

    .login-container {
        width: 96%;
    }


    /* -----------------------------------------------------
       IZQUIERDA
    ----------------------------------------------------- */

    .hero-content {
        width: 58%;
    }


    .member-badge {
        margin-bottom: 11px;

        padding:
            8px 17px;

        font-size: .70rem;
    }


    .brand-title {
        font-size: clamp(
            3.8rem,
            5.4vw,
            5.5rem
        );

        letter-spacing: -3.5px;
    }


    .brand-subtitle {
        margin:
            13px 0 10px;

        font-size: clamp(
            1.35rem,
            2.15vw,
            2rem
        );
    }


    .topics {
        margin-bottom: 9px;

        font-size: .70rem;
    }


    .brand-description {
        max-width: 650px;

        margin-bottom: 15px;

        font-size: .80rem;
    }


    /* -----------------------------------------------------
       TARJETAS
    ----------------------------------------------------- */

    .benefits-grid {
        max-width: 920px;

        gap: 9px;
    }


    .benefit-card {
        min-height: 82px;

        padding:
            9px 12px;
    }


    .benefit-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;

        font-size: 1.15rem;
    }


    .benefit-body strong {
        font-size: .76rem;
    }


    .benefit-body span {
        font-size: .63rem;

        line-height: 1.3;
    }


    .benefit-arrow {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }


    /* -----------------------------------------------------
       SLOGAN
    ----------------------------------------------------- */

    .hero-slogan {
        margin-top: 11px;
    }


    .hero-slogan strong {
        font-size: 1.50rem;
    }


    .slogan-line {
        width: 62px;

        margin-top: 7px;
    }


    .trust-items {
        margin-top: 7px;
    }


    .trust-item {
        font-size: .56rem;
    }


    .trust-item i {
        font-size: 1.45rem;
    }


    /* =====================================================
       LOGIN
    ===================================================== */

    .login-column {
        width: min(
            400px,
            30vw
        );
    }


    .login-card {
        padding:
            25px 28px 18px;

        border-radius: 19px;
    }


    .login-header {
        margin-bottom: 18px;
    }


    .login-icon {
        width: 51px;
        height: 51px;

        flex-basis: 51px;

        font-size: 1.25rem;
    }


    .login-header h3 {
        font-size: 1.18rem;
    }


    .login-header p {
        font-size: .64rem;
    }


    .form-field {
        margin-bottom: 12px;
    }


    .form-label {
        margin-bottom: 6px;

        font-size: .69rem;
    }


    .custom-input {
        height: 50px;

        font-size: .75rem;
    }


    .btn-login {
        height: 51px;

        font-size: .81rem;
    }


    .forgot-password {
        margin-top: 10px;
    }


    .forgot-password a {
        font-size: .64rem;
    }


    .login-card-footer {
        margin-top: 11px;

        padding-top: 9px;

        font-size: .58rem;
    }


    .membership-card {
        margin-top: 9px;

        padding:
            11px 15px 13px;
    }


    .membership-icon {
        width: 36px;
        height: 36px;

        margin-bottom: 5px;

        font-size: 1rem;
    }


    .membership-content strong {
        font-size: .70rem;
    }


    .membership-content p {
        margin:
            3px 0 8px;

        font-size: .56rem;
    }


    .membership-button {
        min-height: 36px;

        font-size: .63rem;
    }

}




/* =========================================================
   AJUSTE DE TEXTOS PEQUEÑOS Y MEDIANOS
========================================================= */

@media (min-width: 992px) {

    /* Descripción principal */
    .brand-description {
        font-size: 1rem;
        line-height: 1.55;
    }

    /* Temas */
    .topics {
        font-size: .86rem;
    }

    /* Títulos de las tarjetas */
    .benefit-body strong {
        font-size: .94rem;
    }

    /* Descripción de las tarjetas */
    .benefit-body span {
        font-size: .76rem;
        line-height: 1.38;
    }

    /* Texto del slogan */
    .hero-slogan strong {
        font-size: 2.05rem;
    }

    /* Información inferior */
    .trust-item {
        font-size: .70rem;
        line-height: 1.3;
    }

    /* Login */
    .login-header p {
        font-size: .78rem;
    }

    .form-label {
        font-size: .80rem;
    }

    .custom-input {
        font-size: .86rem;
    }

    .forgot-password a {
        font-size: .74rem;
    }

    .login-card-footer {
        font-size: .68rem;
    }

    /* Membresía */
    .membership-content strong {
        font-size: .84rem;
    }

    .membership-content p {
        font-size: .70rem;
        line-height: 1.4;
    }

    .membership-button {
        font-size: .76rem;
    }
}


/* =========================================================
   ALTURA REDUCIDA - 90% / PANTALLAS 768-850px
========================================================= */

@media (
    min-width: 992px
) and (
    max-height: 850px
) {

    .brand-description {
        font-size: .86rem;
        line-height: 1.45;
    }

    .topics {
        font-size: .76rem;
    }

    .benefit-body strong {
        font-size: .82rem;
    }

    .benefit-body span {
        font-size: .68rem;
        line-height: 1.32;
    }

    .hero-slogan strong {
        font-size: 1.65rem;
    }

    .trust-item {
        font-size: .62rem;
    }

    .login-header p {
        font-size: .68rem;
    }

    .form-label {
        font-size: .73rem;
    }

    .custom-input {
        font-size: .79rem;
    }

    .forgot-password a {
        font-size: .68rem;
    }

    .login-card-footer {
        font-size: .62rem;
    }

    .membership-content strong {
        font-size: .76rem;
    }

    .membership-content p {
        font-size: .62rem;
    }

    .membership-button {
        font-size: .68rem;
    }
}


/* =========================================================
   TEXTOS PEQUEÑOS Y MEDIANOS — AJUSTE 2
========================================================= */

@media (min-width: 992px) {

    /* Temas */
    .topics {
        font-size: .90rem;
    }

    /* Descripción principal */
    .brand-description {
        font-size: 1.05rem;
        line-height: 1.55;
    }

    /* Tarjetas */
    .benefit-body strong {
        font-size: 1rem;
    }

    .benefit-body span {
        font-size: .82rem;
        line-height: 1.4;
    }

    /* Slogan */
    .hero-slogan strong {
        font-size: 2.15rem;
    }

    /* Información inferior */
    .trust-item {
        font-size: .74rem;
        line-height: 1.35;
    }

    /* LOGIN */

    .login-header h3 {
        font-size: 1.48rem;
    }

    .login-header p {
        font-size: .82rem;
    }

    .form-label {
        font-size: .84rem;
    }

    .custom-input {
        font-size: .90rem;
    }

    .forgot-password a {
        font-size: .78rem;
    }

    .login-card-footer {
        font-size: .72rem;
    }

    /* MEMBRESÍA */

    .membership-content strong {
        font-size: .88rem;
    }

    .membership-content p {
        font-size: .74rem;
        line-height: 1.45;
    }

    .membership-button {
        font-size: .80rem;
    }
}


/* =========================================================
   90% / ALTURA REDUCIDA
   Mantener todo dentro de la pantalla
========================================================= */

@media (
    min-width: 992px
) and (
    max-height: 850px
) {

    .topics {
        font-size: .80rem;
    }

    .brand-description {
        font-size: .90rem;
        line-height: 1.48;
    }

    .benefit-body strong {
        font-size: .86rem;
    }

    .benefit-body span {
        font-size: .72rem;
        line-height: 1.35;
    }

    .hero-slogan strong {
        font-size: 1.75rem;
    }

    .trust-item {
        font-size: .66rem;
    }

    .login-header h3 {
        font-size: 1.25rem;
    }

    .login-header p {
        font-size: .72rem;
    }

    .form-label {
        font-size: .76rem;
    }

    .custom-input {
        font-size: .82rem;
    }

    .forgot-password a {
        font-size: .71rem;
    }

    .login-card-footer {
        font-size: .65rem;
    }

    .membership-content strong {
        font-size: .80rem;
    }

    .membership-content p {
        font-size: .67rem;
    }

    .membership-button {
        font-size: .72rem;
    }
}



/* =========================================================
   TRUST ITEMS — ICONOS Y TEXTO MÁS GRANDES
========================================================= */

@media (min-width: 992px) {

    .trust-items {
        max-width: 980px;
    }

    .trust-item {
        min-height: 48px;

        gap: 10px;

        padding: 0 15px;

        font-size: .78rem;

        line-height: 1.35;
    }

    .trust-item i {
        font-size: 2rem;
    }

    .trust-item b {
        font-weight: 800;
    }
}


/* =========================================================
   90% / PANTALLAS DE ALTURA REDUCIDA
========================================================= */

@media (
    min-width: 992px
) and (
    max-height: 850px
) {

    .trust-items {
        max-width: 970px;

        margin-top: 8px;
    }

    .trust-item {
        min-height: 45px;

        gap: 9px;

        padding: 0 13px;

        font-size: .70rem;
    }

    .trust-item i {
        font-size: 1.75rem;
    }
}



/* =========================================================
   ZOOM GENERAL SUAVE
========================================================= */

@media (min-width: 992px) {

    .login-container {
        transform: scale(1.03);
        transform-origin: center center;
    }

}



/* =========================================================
   CELULAR — TEXTOS PEQUEÑOS Y MEDIANOS MÁS GRANDES
========================================================= */

@media (max-width: 991px) {

    /* Temas */
    .topics {
        font-size: .78rem;
        line-height: 1.5;
    }

    /* Descripción principal */
    .brand-description {
        font-size: .90rem;
        line-height: 1.55;
    }

    /* Títulos de las tarjetas */
    .benefit-body strong {
        font-size: .92rem;
    }

    /* Descripción de las tarjetas */
    .benefit-body span {
        font-size: .76rem;
        line-height: 1.4;
    }

    /* Flechas */
    .benefit-arrow {
        font-size: 1rem;
    }

    /* Slogan */
    .hero-slogan strong {
        font-size: 1.55rem;
        line-height: 1.15;
    }

    /* Texto inferior */
    .trust-item {
        font-size: .76rem;
        line-height: 1.4;
    }

    /* Iconos inferiores */
    .trust-item i {
        font-size: 1.85rem;
    }

    /* LOGIN */

    .login-header h3 {
        font-size: 1.30rem;
    }

    .login-header p {
        font-size: .78rem;
        line-height: 1.4;
    }

    .form-label {
        font-size: .80rem;
    }

    .custom-input {
        font-size: .86rem;
    }

    .forgot-password a {
        font-size: .76rem;
    }

    .login-card-footer {
        font-size: .70rem;
    }

    /* MEMBRESÍA */

    .membership-content strong {
        font-size: .84rem;
    }

    .membership-content p {
        font-size: .72rem;
        line-height: 1.45;
    }

    .membership-button {
        font-size: .78rem;
    }
}


/* =========================================================
   CELULAR — TEXTOS PEQUEÑOS Y MEDIANOS
   AJUSTE FINAL
========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------------------
       TEMAS
    ----------------------------------------------------- */

    .topics {
        font-size: .84rem;
        line-height: 1.55;
        gap: 6px;
    }


    /* -----------------------------------------------------
       DESCRIPCIÓN PRINCIPAL
    ----------------------------------------------------- */

    .brand-description {
        font-size: .98rem;
        line-height: 1.58;
    }


    /* -----------------------------------------------------
       TARJETAS
    ----------------------------------------------------- */

    .benefit-body strong {
        font-size: 1rem;
        line-height: 1.25;
    }

    .benefit-body span {
        font-size: .82rem;
        line-height: 1.45;
    }


    .benefit-arrow {
        font-size: 1.05rem;
    }


    /* -----------------------------------------------------
       SLOGAN
    ----------------------------------------------------- */

    .hero-slogan strong {
        font-size: 1.68rem;
        line-height: 1.18;
    }


    /* -----------------------------------------------------
       INFORMACIÓN INFERIOR
    ----------------------------------------------------- */

    .trust-item {
        font-size: .82rem;
        line-height: 1.45;
    }

    .trust-item i {
        font-size: 2rem;
    }


    /* -----------------------------------------------------
       LOGIN
    ----------------------------------------------------- */

    .login-header h3 {
        font-size: 1.38rem;
    }

    .login-header p {
        font-size: .82rem;
        line-height: 1.45;
    }


    /* Etiquetas */

    .form-label {
        font-size: .84rem;
    }


    /* Texto dentro de los campos */

    .custom-input {
        font-size: .90rem;
    }


    /* Recuperar contraseña */

    .forgot-password a {
        font-size: .80rem;
    }


    /* Acceso seguro */

    .login-card-footer {
        font-size: .74rem;
    }


    /* -----------------------------------------------------
       MEMBRESÍA
    ----------------------------------------------------- */

    .membership-content strong {
        font-size: .90rem;
    }

    .membership-content p {
        font-size: .76rem;
        line-height: 1.5;
    }

    .membership-button {
        font-size: .82rem;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 400px) {

    .topics {
        font-size: .78rem;
    }

    .brand-description {
        font-size: .92rem;
    }

    .benefit-body strong {
        font-size: .94rem;
    }

    .benefit-body span {
        font-size: .78rem;
    }

    .hero-slogan strong {
        font-size: 1.52rem;
    }

    .trust-item {
        font-size: .76rem;
    }

    .login-header h3 {
        font-size: 1.28rem;
    }

    .login-header p {
        font-size: .76rem;
    }

    .form-label {
        font-size: .80rem;
    }

    .custom-input {
        font-size: .86rem;
    }

    .membership-content strong {
        font-size: .86rem;
    }

    .membership-content p {
        font-size: .72rem;
    }

}