@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;

    --dark: #0f172a;
    --text: #1e293b;
    --muted: #64748b;

    --background: #f8fafc;
    --white: #ffffff;
    --border: #e2e8f0;

    --danger: #dc2626;
    --danger-background: #fef2f2;

    --success: #16a34a;

    --shadow:
        0 20px 50px rgba(15, 23, 42, 0.10);
}


html,
body {
    min-height: 100%;
}


body {
    min-height: 100vh;

    font-family:
        'Inter',
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);
}


button,
input {
    font-family:
        inherit;
}


/* =====================================================
   CONTENEDOR GENERAL
===================================================== */

.login-container {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        1.08fr 0.92fr;
}


/* =====================================================
   LADO IZQUIERDO
===================================================== */

.login-hero {
    position: relative;

    min-height: 100vh;

    padding:
        48px 65px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.96),
            rgba(30, 64, 175, 0.88)
        ),
        url('../img/login-bg.jpg');

    background-size:
        cover;

    background-position:
        center;
}


.login-hero::before {
    content: "";

    position: absolute;

    width:
        420px;

    height:
        420px;

    top:
        -150px;

    right:
        -130px;

    border-radius:
        50%;

    background:
        rgba(59, 130, 246, 0.28);

    filter:
        blur(10px);
}


.login-hero::after {
    content: "";

    position: absolute;

    width:
        330px;

    height:
        330px;

    left:
        -80px;

    bottom:
        -130px;

    border-radius:
        50%;

    border:
        1px solid rgba(255, 255, 255, 0.10);
}


.brand,
.hero-content,
.hero-footer {
    position:
        relative;

    z-index:
        2;
}


/* =====================================================
   MARCA ESCRITORIO
===================================================== */

.brand {
    display: flex;

    align-items:
        center;

    gap:
        14px;
}


.brand-icon {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--primary);

    color:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.30);
}


.brand-icon svg {
    width:
        25px;

    height:
        25px;
}


.brand h1 {
    font-size:
        25px;

    font-weight:
        800;

    letter-spacing:
        -0.8px;
}


.brand p {
    margin-top:
        3px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size:
        12px;
}


/* =====================================================
   HERO
===================================================== */

.hero-content {
    max-width:
        610px;
}


.hero-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius:
        50px;

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

    backdrop-filter:
        blur(10px);

    font-size:
        12px;

    font-weight:
        600;
}


.hero-badge svg {
    width:
        15px;
}


.hero-content h2 {
    margin-top:
        22px;

    font-size:
        clamp(
            39px,
            4vw,
            62px
        );

    line-height:
        1.05;

    letter-spacing:
        -2.8px;

    font-weight:
        800;
}


.hero-content h2 span {
    color:
        #93c5fd;
}


.hero-content > p {
    max-width:
        520px;

    margin-top:
        22px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        15px;

    line-height:
        1.8;
}


/* =====================================================
   FEATURES
===================================================== */

.hero-features {
    max-width:
        480px;

    margin-top:
        38px;

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        13px;
}


.feature {
    padding:
        14px 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        15px;

    background:
        rgba(255, 255, 255, 0.07);
}


.feature > svg {
    width:
        21px;

    min-width:
        21px;

    color:
        #93c5fd;
}


.feature div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.feature strong {
    font-size:
        13px;

    font-weight:
        600;
}


.feature span {
    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        11px;
}


.hero-footer {
    color:
        rgba(255, 255, 255, 0.45);

    font-size:
        11px;
}


/* =====================================================
   PANEL LOGIN ESCRITORIO
===================================================== */

.login-panel {
    min-height:
        100vh;

    padding:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);
}


.login-box {
    width:
        100%;

    max-width:
        430px;
}


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

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


.small-title {
    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.7px;
}


.login-header h2 {
    color:
        var(--dark);

    font-size:
        34px;

    font-weight:
        800;

    letter-spacing:
        -1.2px;
}


.login-header p {
    margin-top:
        9px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;
}


/* =====================================================
   FORMULARIO
===================================================== */

.form-group {
    margin-bottom:
        20px;
}


.form-group label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #334155;

    font-size:
        12px;

    font-weight:
        600;
}


.input-box {
    position:
        relative;

    display:
        flex;

    align-items:
        center;
}


.input-box > svg {
    position:
        absolute;

    left:
        15px;

    z-index:
        2;

    width:
        18px;

    height:
        18px;

    color:
        #94a3b8;

    pointer-events:
        none;
}


.input-box input {
    width:
        100%;

    height:
        52px;

    padding:
        0 48px 0 46px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--dark);

    font-size:
        13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.input-box input::placeholder {
    color:
        #94a3b8;
}


.input-box input:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, 0.08);
}


.input-box:focus-within > svg {
    color:
        var(--primary);
}


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

.btn-eye {
    position:
        absolute;

    right:
        9px;

    z-index:
        3;

    width:
        36px;

    height:
        36px;

    border:
        none;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent;

    color:
        #64748b;

    cursor:
        pointer;
}


.btn-eye:hover {
    background:
        #f1f5f9;
}


.btn-eye svg {
    width:
        18px;

    height:
        18px;
}


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

.btn-login {
    width:
        100%;

    height:
        53px;

    margin-top:
        5px;

    border:
        none;

    border-radius:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 9px 24px
        rgba(37, 99, 235, 0.23);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.btn-login:hover {
    background:
        var(--primary-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 30px
        rgba(37, 99, 235, 0.28);
}


.btn-login:disabled {
    opacity:
        .75;

    cursor:
        not-allowed;

    transform:
        none;
}


.btn-login svg {
    width:
        18px;

    height:
        18px;
}


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

.mensaje {
    display:
        none;

    margin-bottom:
        14px;

    padding:
        11px 13px;

    border-radius:
        10px;

    font-size:
        12px;

    line-height:
        1.5;
}


.mensaje.error {
    display:
        block;

    border:
        1px solid #fecaca;

    background:
        var(--danger-background);

    color:
        var(--danger);
}


.mensaje.success {
    display:
        block;

    border:
        1px solid #bbf7d0;

    background:
        #f0fdf4;

    color:
        var(--success);
}


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

.secure-info {
    margin-top:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        #94a3b8;

    font-size:
        10px;
}


.secure-info svg {
    width:
        14px;

    height:
        14px;
}


/* =====================================================
   LOGO MOBILE
===================================================== */

.mobile-logo {
    display:
        none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) and (min-width: 801px) {

    .login-container {
        grid-template-columns:
            .9fr 1.1fr;
    }


    .login-hero {
        padding:
            40px;
    }


    .hero-content h2 {
        font-size:
            43px;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 800px) {

    html,
    body {
        width:
            100%;

        min-height:
            100%;

        overflow-x:
            hidden;
    }


    body {
        min-height:
            100vh;

        padding:
            16px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            linear-gradient(
                rgba(6, 18, 43, .28),
                rgba(6, 18, 43, .42)
            ),
            url('../img/expositor_premium_de_tecnología_móvil.png');

        background-size:
            cover;

        background-position:
            center center;

        background-repeat:
            no-repeat;

        background-attachment:
            scroll;
    }


    /* Ocultar totalmente escritorio */

    .login-hero {
        display:
            none;
    }


    .login-container {
        width:
            100%;

        min-height:
            calc(100vh - 32px);

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            transparent;
    }


    .login-panel {
        width:
            100%;

        max-width:
            410px;

        min-height:
            auto;

        padding:
            24px 18px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid
            rgba(255, 255, 255, .16);

        border-radius:
            24px;

        background:
            rgba(5, 17, 38, .15);

        backdrop-filter:
            blur(4px);

        -webkit-backdrop-filter:
            blur(4px);

        box-shadow:
            0 20px 55px
            rgba(0, 0, 0, .26);
    }


    /* =================================================
       MARCA LAURACELL
    ================================================= */

    .mobile-logo {
        width:
            100%;

        max-width:
            340px;

        margin:
            0 auto 26px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            9px;

        text-align:
            center;
    }


    .mobile-logo .brand-icon {
        width:
            56px;

        height:
            56px;

        margin:
            0 auto;

        border-radius:
            17px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        color:
            #ffffff;

        box-shadow:
            0 10px 27px
            rgba(37, 99, 235, .38);
    }


    .mobile-logo .brand-icon svg {
        width:
            27px;

        height:
            27px;
    }


    .mobile-logo > div:last-child {
        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        text-align:
            center;
    }


    .mobile-logo h2 {
        margin:
            0;

        color:
            #ffffff;

        font-size:
            28px;

        font-weight:
            800;

        line-height:
            1.05;

        letter-spacing:
            -.8px;

        text-align:
            center;

        text-shadow:
            0 3px 10px
            rgba(0, 0, 0, .85);
    }


    .mobile-logo span {
        display:
            block;

        margin-top:
            5px;

        color:
            rgba(255, 255, 255, .94);

        font-size:
            10px;

        font-weight:
            500;

        text-align:
            center;

        text-shadow:
            0 2px 7px
            rgba(0, 0, 0, .78);
    }


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

    .login-box {
        width:
            100%;

        max-width:
            340px;

        margin:
            0 auto;
    }


    .login-header {
        width:
            100%;

        margin-bottom:
            23px;

        text-align:
            center;
    }


    .small-title {
        display:
            block;

        margin-bottom:
            7px;

        color:
            #ffffff;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            2px;

        text-align:
            center;

        text-shadow:
            0 2px 7px
            rgba(0, 0, 0, .85);
    }


    .login-header h2 {
        margin:
            0;

        color:
            #ffffff;

        font-size:
            27px;

        font-weight:
            800;

        line-height:
            1.1;

        letter-spacing:
            -.8px;

        text-align:
            center;

        text-shadow:
            0 3px 11px
            rgba(0, 0, 0, .90);
    }


    .login-header p {
        max-width:
            300px;

        margin:
            8px auto 0;

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

        font-size:
            11px;

        font-weight:
            500;

        line-height:
            1.5;

        text-align:
            center;

        text-shadow:
            0 2px 7px
            rgba(0, 0, 0, .86);
    }


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

    .form-group {
        margin-bottom:
            15px;
    }


    .form-group label {
        margin-bottom:
            7px;

        color:
            #ffffff;

        font-size:
            11px;

        font-weight:
            700;

        text-shadow:
            0 2px 6px
            rgba(0, 0, 0, .90);
    }


    .input-box {
        width:
            100%;
    }


    .input-box input {
        width:
            100%;

        height:
            51px;

        padding:
            0 47px 0 45px;

        border:
            1px solid
            rgba(255, 255, 255, .72);

        border-radius:
            14px;

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

        color:
            #0f172a;

        font-size:
            13px;

        box-shadow:
            0 7px 19px
            rgba(0, 0, 0, .12);
    }


    .input-box input::placeholder {
        color:
            #94a3b8;
    }


    .input-box > svg {
        color:
            #94a3b8;
    }


    .input-box input:focus {
        border-color:
            #60a5fa;

        background:
            #ffffff;

        box-shadow:
            0 0 0 4px
            rgba(37, 99, 235, .16),
            0 7px 19px
            rgba(0, 0, 0, .10);
    }


    .btn-eye {
        color:
            #64748b;
    }


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

    .btn-login {
        width:
            100%;

        height:
            52px;

        margin-top:
            5px;

        border-radius:
            14px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        color:
            #ffffff;

        font-size:
            13px;

        font-weight:
            800;

        box-shadow:
            0 10px 25px
            rgba(37, 99, 235, .34);
    }


    .btn-login:hover {
        background:
            linear-gradient(
                135deg,
                #1d4ed8,
                #1e40af
            );
    }


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

    .secure-info {
        margin-top:
            20px;

        color:
            rgba(255, 255, 255, .88);

        font-size:
            9px;

        line-height:
            1.4;

        text-align:
            center;

        text-shadow:
            0 2px 6px
            rgba(0, 0, 0, .75);
    }


    .secure-info svg {
        color:
            #ffffff;
    }


    /* Mensajes */

    .mensaje.error,
    .mensaje.success {
        font-size:
            11px;
    }

}


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

@media (max-width: 420px) {

    body {
        padding:
            10px;
    }


    .login-container {
        min-height:
            calc(100vh - 20px);
    }


    .login-panel {
        max-width:
            380px;

        padding:
            20px 15px;

        border-radius:
            20px;
    }


    .mobile-logo {
        margin-bottom:
            22px;
    }


    .mobile-logo .brand-icon {
        width:
            52px;

        height:
            52px;
    }


    .mobile-logo h2 {
        font-size:
            25px;
    }


    .login-box {
        max-width:
            330px;
    }


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


    .login-header h2 {
        font-size:
            24px;
    }


    .input-box input,
    .btn-login {
        height:
            50px;
    }

}


/* =====================================================
   CELULARES MUY PEQUEÑOS / POCA ALTURA
===================================================== */

@media (
    max-width: 380px
) {

    .login-panel {
        padding:
            17px 13px;
    }


    .mobile-logo {
        margin-bottom:
            18px;
    }


    .mobile-logo .brand-icon {
        width:
            48px;

        height:
            48px;
    }


    .mobile-logo h2 {
        font-size:
            23px;
    }


    .login-header h2 {
        font-size:
            22px;
    }


    .login-header p {
        font-size:
            10px;
    }

}


@media (
    max-width: 800px
) and (
    max-height: 700px
) {

    body {
        align-items:
            flex-start;
    }


    .login-container {
        min-height:
            auto;
    }


    .login-panel {
        margin:
            10px auto;

        padding:
            17px 15px;
    }


    .mobile-logo {
        margin-bottom:
            17px;
    }


    .mobile-logo .brand-icon {
        width:
            47px;

        height:
            47px;
    }


    .mobile-logo h2 {
        font-size:
            23px;
    }


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


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


    .secure-info {
        margin-top:
            14px;
    }

}