/* AM Club v688 - Login luxury / prestige
   Rediseño visual sobre la base v482/v493, sin cambiar lógica C#.
*/

html body.am-body .am-topbar{
    height:54px!important;
    min-height:54px!important;
    background:rgba(3,4,12,.82)!important;
    backdrop-filter:blur(18px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.05)!important;
    border-bottom:1px solid rgba(184,106,255,.22)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.42)!important;
}

html body.am-body .am-page-shell{
    min-height:calc(100svh - 54px)!important;
}

html body.am-body .am-login-v688{
    min-height:calc(100svh - 54px)!important;
    height:calc(100svh - 54px)!important;
    font-family:var(--am-font-body, "Segoe UI", Arial, sans-serif)!important;
    background:#02030b!important;
}

html body.am-body .am-login-v688 .am-login-v482__bg{
    background:
        radial-gradient(circle at 67% 28%, rgba(255,82,214,.18), transparent 28%),
        radial-gradient(circle at 24% 72%, rgba(64,220,255,.15), transparent 36%),
        linear-gradient(90deg, rgba(2,3,11,.96) 0%, rgba(2,3,11,.72) 38%, rgba(2,3,11,.84) 100%),
        linear-gradient(180deg, rgba(2,3,11,.08) 0%, rgba(2,3,11,.58) 58%, #02030b 100%),
        url('../Content/images/amclub-login-bg-v482.jpg') center center/cover no-repeat!important;
    filter:saturate(1.08) contrast(1.08) brightness(.78)!important;
    transform:scale(1.018)!important;
}

html body.am-body .am-login-v688::before{
    background:
        linear-gradient(115deg, rgba(220,110,255,.10), transparent 28%, transparent 70%, rgba(83,210,255,.09)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 120px)!important;
}

html body.am-body .am-login-v688__brand{
    margin-bottom:12px!important;
    padding:8px 10px 8px 8px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.26), 0 0 28px rgba(83,210,255,.07)!important;
}

html body.am-body .am-login-v688__wordmark{
    font-family:var(--am-font-display,"Segoe UI",Arial,sans-serif)!important;
    font-size:clamp(1.75rem,2.85vw,3.05rem)!important;
    line-height:.92!important;
    font-weight:260!important;
    letter-spacing:.035em!important;
}

html body.am-body .am-login-v688__wordmark span{
    font-weight:260!important;
    background:linear-gradient(135deg,#f8fbff 0%,#b8b6ff 35%,#ff54d8 62%,#53d2ff 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
}

html body.am-body .am-login-v688 .am-login-v482__brand-logo{
    width:58px!important;
    filter:drop-shadow(0 0 18px rgba(255,75,214,.22))!important;
}

html body.am-body .am-login-v688 .am-login-v482__brand-copy small{
    margin-top:2px!important;
    font-family:var(--am-font-display,"Segoe UI",Arial,sans-serif)!important;
    font-size:.58rem!important;
    font-weight:520!important;
    letter-spacing:.42em!important;
    color:rgba(238,244,255,.68)!important;
}

html body.am-body .am-login-v688 .am-login-v482__shell{
    width:min(1040px, calc(100% - 40px))!important;
    padding:18px 0!important;
    justify-content:center!important;
    align-items:flex-start!important;
}

html body.am-body .am-login-v688 .am-login-v482__card{
    width:min(410px,100%)!important;
    padding:22px 24px 21px!important;
    border-radius:26px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
        linear-gradient(145deg, rgba(9,13,30,.86), rgba(8,6,19,.82))!important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 0 1px rgba(215,82,255,.20),
        0 28px 90px rgba(0,0,0,.70),
        0 0 52px rgba(255,73,220,.13),
        0 0 42px rgba(83,210,255,.08)!important;
    backdrop-filter:blur(24px) saturate(1.10)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.10)!important;
}

html body.am-body .am-login-v688 .am-login-v482__card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(135deg,rgba(255,255,255,.12),transparent 27%),
        radial-gradient(circle at 84% 0%,rgba(83,210,255,.18),transparent 32%),
        radial-gradient(circle at 0% 100%,rgba(255,73,220,.12),transparent 34%);
    opacity:.78;
}

html body.am-body .am-login-v688__seal{
    position:absolute;
    top:16px;
    right:18px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#8cf1ff;
    border:1px solid rgba(83,210,255,.18);
    background:rgba(83,210,255,.07);
    box-shadow:0 0 20px rgba(83,210,255,.10);
    z-index:2;
}

html body.am-body .am-login-v688 .am-login-v482__eyebrow{
    margin-bottom:10px!important;
    color:rgba(239,244,255,.68)!important;
    font-size:.60rem!important;
    font-weight:680!important;
    letter-spacing:.23em!important;
}

html body.am-body .am-login-v688 .am-login-v482__card h1{
    font-family:var(--am-font-display,"Segoe UI",Arial,sans-serif)!important;
    font-size:clamp(2.15rem,4vw,3.15rem)!important;
    line-height:.90!important;
    font-weight:780!important;
    letter-spacing:-.055em!important;
    background:linear-gradient(120deg,#fff 4%,#f4f7ff 40%,#d9b8ff 58%,#ff59d8 74%,#59ddff 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
}

html body.am-body .am-login-v688 .am-login-v482__lead{
    max-width:320px!important;
    margin:10px 0 13px!important;
    color:rgba(239,244,255,.70)!important;
    font-size:.80rem!important;
    line-height:1.45!important;
    font-weight:520!important;
}

html body.am-body .am-login-v688__trust{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 13px;
}

html body.am-body .am-login-v688__trust span{
    min-height:24px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.045);
    color:rgba(242,247,255,.72);
    font-size:.62rem;
    line-height:1;
    font-weight:620;
    letter-spacing:-.005em;
}

html body.am-body .am-login-v688__trust i{
    color:#72eaff;
    font-size:.66rem;
}

html body.am-body .am-login-v688 .am-login-v482__label{
    color:rgba(238,245,255,.72)!important;
    font-size:.68rem!important;
    font-weight:620!important;
    letter-spacing:.03em!important;
}

html body.am-body .am-login-v688 .am-login-v482__input{
    height:46px!important;
    line-height:46px!important;
    border-radius:16px!important;
    border-color:rgba(255,255,255,.12)!important;
    background:rgba(3,6,20,.68)!important;
    font-size:.84rem!important;
    font-weight:520!important;
    letter-spacing:.01em!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 26px rgba(0,0,0,.22)!important;
}

html body.am-body .am-login-v688 .am-login-v482__input::placeholder{
    color:rgba(239,244,255,.36)!important;
    font-weight:520!important;
}

html body.am-body .am-login-v688 .am-login-v482__input:focus{
    border-color:rgba(116,235,255,.72)!important;
    box-shadow:
        0 0 0 3px rgba(83,210,255,.10),
        0 0 0 1px rgba(255,73,220,.14),
        0 0 32px rgba(83,210,255,.13)!important;
}

html body.am-body .am-login-v688 .am-login-v482__btn{
    min-height:45px!important;
    border-radius:16px!important;
    font-size:.78rem!important;
    font-weight:760!important;
    letter-spacing:.02em!important;
}

html body.am-body .am-login-v688 .am-login-v482__btn--primary{
    margin-top:8px!important;
    background:linear-gradient(105deg,#e61bd7 0%,#8e5cff 45%,#35d8ff 100%)!important;
    box-shadow:0 15px 36px rgba(255,73,220,.22), 0 12px 34px rgba(83,210,255,.16)!important;
}

html body.am-body .am-login-v688 .am-login-v482__btn--ghost{
    background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022))!important;
    border-color:rgba(255,255,255,.12)!important;
    color:rgba(255,255,255,.88)!important;
}

html body.am-body .am-login-v688 .am-login-v482__forgot{
    color:#ff8be8!important;
    font-size:.72rem!important;
    font-weight:620!important;
    text-shadow:none!important;
}

html body.am-body .am-login-v688__signature{
    margin-top:13px;
    display:grid;
    gap:2px;
    color:rgba(245,248,255,.72);
    text-shadow:0 14px 30px rgba(0,0,0,.45);
}

html body.am-body .am-login-v688__signature strong{
    font-family:var(--am-font-display,"Segoe UI",Arial,sans-serif);
    font-weight:520;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:.68rem;
}

html body.am-body .am-login-v688__signature span{
    font-size:.76rem;
    font-weight:420;
    color:rgba(235,240,255,.56);
}

@media(min-width:980px){
    html body.am-body .am-login-v688 .am-login-v482__shell::after{
        content:"AM CLUB";
        position:absolute;
        right:4vw;
        bottom:8vh;
        font-family:var(--am-font-display,"Segoe UI",Arial,sans-serif);
        font-size:clamp(3rem,7vw,7rem);
        line-height:1;
        letter-spacing:.16em;
        font-weight:220;
        color:rgba(255,255,255,.045);
        text-shadow:0 0 38px rgba(83,210,255,.05);
        pointer-events:none;
    }
}

@media(max-width:820px){
    html body.am-body .am-login-v688{
        height:auto!important;
        min-height:calc(100svh - 50px)!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__shell{
        width:min(100% - 20px, 405px)!important;
        min-height:calc(100svh - 50px)!important;
        padding:10px 0 14px!important;
        align-items:center!important;
    }

    html body.am-body .am-login-v688__brand{
        width:100%!important;
        margin-bottom:9px!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__brand-logo{
        width:48px!important;
    }

    html body.am-body .am-login-v688__wordmark{
        font-size:1.46rem!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__brand-copy small{
        font-size:.50rem!important;
        letter-spacing:.30em!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__card{
        width:100%!important;
        padding:18px 16px 17px!important;
        border-radius:22px!important;
    }

    html body.am-body .am-login-v688__seal{
        top:14px;
        right:14px;
        width:30px;
        height:30px;
        border-radius:12px;
    }

    html body.am-body .am-login-v688 .am-login-v482__card h1{
        font-size:2.06rem!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__lead{
        font-size:.76rem!important;
        margin:8px 0 10px!important;
    }

    html body.am-body .am-login-v688__trust{
        gap:5px!important;
        margin-bottom:10px!important;
    }

    html body.am-body .am-login-v688__trust span{
        min-height:22px!important;
        padding:0 7px!important;
        font-size:.58rem!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__input{
        height:41px!important;
        line-height:41px!important;
        border-radius:14px!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__btn{
        min-height:41px!important;
        border-radius:14px!important;
    }

    html body.am-body .am-login-v688__signature{
        width:100%;
        text-align:center;
    }

    html body.am-body .am-login-v688__signature strong{
        font-size:.60rem!important;
        letter-spacing:.14em!important;
    }

    html body.am-body .am-login-v688__signature span{
        font-size:.68rem!important;
    }
}

@media(max-width:380px){
    html body.am-body .am-login-v688 .am-login-v482__card{
        padding:16px 14px 15px!important;
    }

    html body.am-body .am-login-v688 .am-login-v482__card h1{
        font-size:1.88rem!important;
    }

    html body.am-body .am-login-v688__trust span{
        font-size:.55rem!important;
        padding:0 6px!important;
    }
}