/* =====================================================
   MERULI · LOGIN
   Diseño exclusivo para acceso PC + celular
===================================================== */

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

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

body{
    font-family:Arial, Helvetica, sans-serif;
    color:#334034;
    background:#f5f5f1;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

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

.login-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:58% 42%;
}

/* =====================================================
   LADO VISUAL
===================================================== */

.login-visual{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    color:#fff;
    isolation:isolate;
}

.visual-image{
    position:absolute;
    inset:-3%;
    background-image:url('../assets/meruli-hero-mujer.jpg');
    background-size:cover;
    background-position:center;
    filter:saturate(.45) contrast(.94) brightness(.76);
    transform:scale(1.03);
    z-index:-3;
}

.visual-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(30,45,32,.82) 0%,rgba(48,65,49,.67) 48%,rgba(48,65,49,.80) 100%),
        linear-gradient(180deg,rgba(31,45,32,.28),rgba(31,45,32,.76));
    z-index:-2;
}

/* formas decorativas */
.login-visual::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-300px;
    bottom:-250px;
    border:1px solid rgba(239,244,232,.16);
    border-radius:50%;
    box-shadow:0 0 0 80px rgba(239,244,232,.035),0 0 0 160px rgba(239,244,232,.025);
    z-index:-1;
}

.leaf{
    position:absolute;
    width:190px;
    height:350px;
    border:1px solid rgba(230,241,225,.13);
    border-radius:100% 0 100% 0;
    transform:rotate(35deg);
    z-index:-1;
}

.leaf-1{
    right:-75px;
    top:75px;
}

.leaf-2{
    left:-155px;
    bottom:-125px;
    transform:rotate(-28deg);
}

.leaf-3{
    width:100px;
    height:190px;
    right:16%;
    bottom:-90px;
    transform:rotate(22deg);
    opacity:.7;
}

.visual-content{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:52px clamp(45px,7vw,105px) 48px;
}

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

.brand-main{
    display:inline-flex;
    align-items:center;
    width:max-content;
    gap:12px;
    color:#fff;
}

.brand-leaf{
    width:42px;
    height:42px;
    object-fit:contain;
    filter:brightness(0) invert(1) opacity(.92);
}

.brand-main > span{
    font-size:34px;
    font-weight:400;
    letter-spacing:-1.8px;
}

.visual-copy{
    max-width:620px;
    margin:auto 0;
    padding:70px 0 45px;
}

.eyebrow{
    display:inline-block;
    margin-bottom:22px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.23);
    border-radius:30px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(8px);
    font-size:9px;
    font-weight:700;
    letter-spacing:1.8px;
}

.visual-copy h1{
    margin-bottom:24px;
    font-size:clamp(42px,4.5vw,67px);
    line-height:1.02;
    letter-spacing:-2.5px;
    font-weight:300;
}

.visual-copy h1 strong{
    font-weight:600;
    color:#eef3e7;
}

.visual-copy p{
    max-width:510px;
    color:rgba(255,255,255,.78);
    font-size:15px;
    line-height:1.8;
}

.visual-points{
    display:flex;
    flex-wrap:wrap;
    gap:18px 30px;
    color:rgba(255,255,255,.76);
    font-size:11px;
}

.visual-points div{
    display:flex;
    align-items:center;
    gap:8px;
}

.visual-points span{
    width:21px;
    height:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(221,235,215,.25);
    border-radius:50%;
    color:#dfead8;
    font-size:10px;
}

/* =====================================================
   ÁREA LOGIN
===================================================== */

.login-area{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:55px clamp(32px,5vw,85px);
    background:#f7f7f3;
}

.login-box{
    width:min(430px,100%);
    margin:auto;
}

.mobile-brand{
    display:none;
}

.login-heading{
    margin-bottom:32px;
}

.heading-kicker{
    display:block;
    margin-bottom:12px;
    color:#6d7d65;
    font-size:9px;
    font-weight:700;
    letter-spacing:1.8px;
}

.login-heading h2{
    margin-bottom:10px;
    color:#263329;
    font-size:31px;
    line-height:1.12;
    letter-spacing:-1px;
    font-weight:600;
}

.login-heading p{
    color:#7b837c;
    font-size:12px;
    line-height:1.7;
}

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

.login-form{
    display:flex;
    flex-direction:column;
    gap:19px;
}

.login-field{
    display:flex;
    flex-direction:column;
}

.login-field label,
.password-label label{
    color:#465149;
    font-size:9px;
    font-weight:700;
}

.login-field label{
    margin-bottom:8px;
}

.password-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.password-label label{
    margin-bottom:0;
}

.password-label a{
    color:#6d7d65;
    font-size:8px;
    font-weight:600;
}

.password-label a:hover{
    color:#4f6049;
}

.input-wrap{
    position:relative;
}

.input-icon{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-52%);
    width:16px;
    height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7b8876;
    font-size:18px;
    line-height:1;
    pointer-events:none;
}

.login-field input[type="email"],
.login-field input[type="password"]{
    width:100%;
    height:50px;
    padding:0 15px 0 43px;
    border:1px solid #d8ddd5;
    border-radius:11px;
    outline:none;
    background:#fff;
    color:#344038;
    font-family:inherit;
    font-size:11px;
    box-shadow:0 4px 16px rgba(46,61,48,.025);
    transition:.2s ease;
}

.login-field input:focus{
    border-color:#7d8e74;
    box-shadow:0 0 0 4px rgba(109,125,101,.10);
}

.login-field input::placeholder{
    color:#b1b7b1;
}

/* =====================================================
   RECORDAR
===================================================== */

.remember{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:-3px;
    cursor:pointer;
}

.remember input{
    width:14px;
    height:14px;
    accent-color:#6d7d65;
}

.remember span{
    color:#7b837c;
    font-size:9px;
}

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

.login-form button{
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:2px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#71816a,#5e7057);
    color:#fff;
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(82,101,75,.20);
    transition:.25s ease;
}

.login-form button:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 28px rgba(82,101,75,.26);
}

.login-form button b{
    font-size:17px;
    font-weight:400;
    transition:.2s;
}

.login-form button:hover b{
    transform:translateX(3px);
}

/* =====================================================
   REGISTRO
===================================================== */

.login-register{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:25px;
    padding-top:22px;
    border-top:1px solid #e2e5df;
}

.login-register span{
    color:#929a93;
    font-size:9px;
}

.login-register a{
    color:#617258;
    font-size:9px;
    font-weight:700;
}

/* =====================================================
   FRASE FINAL
===================================================== */

.login-slogan{
    margin-top:27px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.slogan-line{
    width:70px;
    height:1px;
    background:#dfe3dc;
}

.slogan-leaf{
    color:#70816b;
    font-size:19px;
    transform:rotate(-18deg);
}

.login-slogan p{
    width:100%;
    text-align:center;
    color:#747d75;
    font-size:9px;
    margin-top:2px;
}

/* =====================================================
   FOOTER
===================================================== */

.login-footer{
    width:min(430px,100%);
    margin:30px auto 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.login-footer span,
.login-footer a{
    color:#a0a69f;
    font-size:8px;
}

.login-footer a:hover{
    color:#63735b;
}

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

@media(max-width:850px){

    .login-page{
        display:block;
        min-height:100vh;
        background:#f7f7f3;
    }

    .login-visual{
        min-height:390px;
        height:44vh;
        max-height:470px;
    }

    .visual-image{
        background-position:center 38%;
    }

    .visual-overlay{
        background:
            linear-gradient(180deg,rgba(40,57,42,.45),rgba(40,57,42,.86)),
            linear-gradient(90deg,rgba(40,57,42,.28),rgba(40,57,42,.28));
    }

    .visual-content{
        min-height:100%;
        padding:25px 24px 30px;
    }

    .brand-main > span{
        font-size:30px;
    }

    .brand-leaf{
        width:38px;
        height:38px;
    }

    .visual-copy{
        margin:auto 0 0;
        padding:40px 0 12px;
        max-width:620px;
    }

    .eyebrow{
        margin-bottom:13px;
        padding:7px 11px;
        font-size:8px;
    }

    .visual-copy h1{
        margin-bottom:13px;
        font-size:34px;
        letter-spacing:-1.2px;
    }

    .visual-copy p{
        max-width:560px;
        font-size:11px;
        line-height:1.65;
    }

    .visual-points{
        display:none;
    }

    .login-area{
        position:relative;
        z-index:5;
        min-height:auto;
        margin-top:-38px;
        padding:0 20px 30px;
        background:transparent;
    }

    .login-box{
        width:min(500px,100%);
        margin:0 auto;
        padding:28px 24px 26px;
        border:1px solid rgba(225,229,222,.9);
        border-radius:20px;
        background:#fff;
        box-shadow:0 18px 45px rgba(35,49,38,.14);
    }

    .mobile-brand{
        display:flex;
        flex-direction:column;
        align-items:center;
        margin-bottom:25px;
    }

    .mobile-brand .brand-main{
        gap:9px;
    }

    .mobile-brand .brand-leaf{
        width:35px;
        height:35px;
        filter:none;
    }

    .brand-dark{
        color:#4f6049;
    }

    .mobile-brand .brand-main > span{
        font-size:31px;
        letter-spacing:-1.5px;
    }

    .mobile-brand small{
        margin-top:5px;
        color:#899188;
        font-size:9px;
    }

    .login-heading{
        text-align:center;
        margin-bottom:27px;
    }

    .login-heading h2{
        font-size:27px;
    }

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

    .heading-kicker{
        font-size:8px;
    }

    .login-footer{
        width:min(500px,100%);
        margin:19px auto 0;
        padding:0 5px;
    }
}

@media(max-width:500px){

    .login-visual{
        min-height:350px;
        height:43vh;
    }

    .visual-content{
        padding:22px 19px 28px;
    }

    .brand-main > span{
        font-size:27px;
    }

    .brand-leaf{
        width:34px;
        height:34px;
    }

    .visual-copy{
        padding-bottom:5px;
    }

    .visual-copy h1{
        font-size:29px;
        letter-spacing:-1px;
    }

    .visual-copy p{
        font-size:10px;
        max-width:340px;
    }

    .login-area{
        margin-top:-30px;
        padding:0 13px 25px;
    }

    .login-box{
        padding:25px 19px 23px;
        border-radius:18px;
    }

    .mobile-brand{
        margin-bottom:23px;
    }

    .login-form{
        gap:17px;
    }

    .login-field input[type="email"],
    .login-field input[type="password"],
    .login-form button{
        height:48px;
    }

    .password-label a{
        font-size:7px;
    }

    .login-register{
        flex-direction:column;
        align-items:center;
        gap:5px;
    }

    .login-footer{
        flex-direction:column;
        align-items:center;
        gap:7px;
    }

    .slogan-line{
        width:55px;
    }
}

/* El asistente de ayuda pertenece al panel interno; no se muestra en acceso público. */
.mt-help-fab,
.mt-help-panel{
    display:none !important;
}

/* =====================================================
   AJUSTE DEFINITIVO CELULAR · TODO VISIBLE
   Solo afecta pantallas de hasta 500px.
===================================================== */
@media (max-width:500px){
    html, body{
        min-height:100%;
        overflow-x:hidden;
    }

    .login-page{
        min-height:100svh;
    }

    /* La imagen queda más baja para que el formulario entre completo. */
    .login-visual{
        min-height:205px;
        height:31svh;
        max-height:235px;
    }

    .visual-content{
        min-height:100%;
        padding:15px 17px 16px;
    }

    .brand-leaf{
        width:29px;
        height:29px;
    }

    .brand-main > span{
        font-size:25px;
    }

    .visual-copy{
        margin:auto 0 0;
        padding:10px 0 4px;
    }

    .eyebrow{
        margin-bottom:7px;
        padding:5px 9px;
        font-size:6.5px;
    }

    .visual-copy h1{
        margin-bottom:7px;
        font-size:24px;
        line-height:1.02;
        letter-spacing:-.8px;
    }

    .visual-copy p{
        max-width:315px;
        font-size:8px;
        line-height:1.4;
    }

    .visual-points{
        display:none;
    }

    .login-area{
        min-height:auto;
        margin-top:-18px;
        padding:0 10px 8px;
    }

    .login-box{
        width:100%;
        padding:16px 16px 14px;
        border-radius:16px;
        box-shadow:0 10px 28px rgba(45,58,47,.13);
    }

    .mobile-brand{
        margin-bottom:10px;
    }

    .mobile-brand .brand-leaf{
        width:29px;
        height:29px;
    }

    .mobile-brand .brand-main > span{
        font-size:24px;
    }

    .mobile-brand small{
        margin-top:2px;
        font-size:7px;
    }

    .login-heading{
        margin-bottom:12px;
    }

    .heading-kicker{
        margin-bottom:5px;
        font-size:6.5px;
    }

    .login-heading h2{
        margin-bottom:4px;
        font-size:20px;
        letter-spacing:-.5px;
    }

    .login-heading p{
        font-size:8px;
        line-height:1.35;
    }

    .login-form{
        gap:9px;
    }

    .login-field label,
    .password-label label{
        font-size:7.5px;
    }

    .login-field label{
        margin-bottom:4px;
    }

    .password-label{
        margin-bottom:4px;
    }

    .password-label a{
        font-size:6.5px;
    }

    .login-field input[type="email"],
    .login-field input[type="password"]{
        height:41px;
        padding-left:38px;
        border-radius:9px;
        font-size:10px;
    }

    .input-icon{
        left:12px;
        font-size:15px;
    }

    .remember{
        gap:5px;
        margin-top:-1px;
    }

    .remember input{
        width:12px;
        height:12px;
    }

    .remember span{
        font-size:7px;
    }

    .login-form button{
        height:43px;
        margin-top:0;
        border-radius:9px;
        font-size:10px;
    }

    .login-form button b{
        font-size:14px;
    }

    .login-register{
        margin-top:11px;
        padding-top:10px;
        gap:3px;
    }

    .login-register span,
    .login-register a{
        font-size:7px;
    }

    /* Estos elementos son decorativos/secundarios en celular;
       se ocultan para que el botón de ingreso quede siempre visible. */
    .login-slogan,
    .login-footer{
        display:none;
    }
}

/* Pantallas muy bajas: compactación extra. */
@media (max-width:500px) and (max-height:700px){
    .login-visual{
        min-height:190px;
        height:29svh;
        max-height:215px;
    }

    .visual-content{
        padding-top:13px;
        padding-bottom:14px;
    }

    .visual-copy h1{
        font-size:22px;
    }

    .visual-copy p{
        font-size:7.5px;
    }

    .login-area{
        margin-top:-16px;
        padding-left:9px;
        padding-right:9px;
    }

    .login-box{
        padding-top:14px;
        padding-bottom:12px;
    }

    .mobile-brand{
        margin-bottom:8px;
    }

    .login-heading{
        margin-bottom:10px;
    }

    .login-form{
        gap:8px;
    }

    .login-field input[type="email"],
    .login-field input[type="password"]{
        height:39px;
    }

    .login-form button{
        height:41px;
    }

    .login-register{
        margin-top:9px;
        padding-top:8px;
    }
}