@charset "utf-8";
@import url("./NaturaAndCo.css"); 


.contenedor-login {
    width: 100%;
    display: block;
    margin: 0;
}
.contenedor-login .content-logo {display: block;width: 100%;}
.contenedor-login .content-logo img {display: block;width: 100%;max-width: 100px;margin: 22px 5px;}
.contenedor-login .content-text {display: flex;position: relative;margin-bottom: 20px;}
.contenedor-login .content-text .content-left {display: block;width: 100%;z-index: 1;max-width: 1000px;margin: 0 auto;}
.contenedor-login .content-text .content-left .titulo {display: block;width: 100%;/* max-width: 500px; */z-index: 1;/* padding-bottom: 187px; */}
.contenedor-login .content-text .content-right {position: absolute;left: 50%;width: 30%;background-color: #8260a4;height: 100%;z-index: 0;display: flex;align-items: flex-end;padding: 7% 10%;}
.contenedor-login .content-text .content-right span {color: #fff;font-size: 26px;line-height: 1;}
.contenedor-login .content-text .content-left .agenda {list-style: none;width: 100%;display: block;background-color: #f8e552;width: 412px;padding: 8px 22px;}
.contenedor-login .content-text .content-left .agenda li.actividad {color: #fff;font-size: 20px;}
.contenedor-login .content-text .content-left .agenda li.dia {color: #fff;font-size: 20px;padding: 5px 0;border-bottom: 2px solid #fff;width: 317px;font-weight: 700;}
.contenedor-login .footer {display: flex;justify-content: end;}
.contenedor-login .footer .logo_natura {display: block;width: 100%;max-width: 320px;padding: 40px 0;}

.content-video{
    position: relative;
    padding-bottom: 34.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 900px;
    margin: 0 auto;
}

    video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
.proximamente{
    color: #fff;
    margin: auto;
    text-align: center;
}




/* hot sale 2023 */

body {
    font-family: 'NaturaAndCo';
    font-weight: 400;
}

.bg-wave{
    width: 100%;
    height: 100vh;
    position: relative;
}

.bg-wave::before {
    content: '';
    background-image: url('../images/dia_cn_2025/bg_wave.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 130vh;
    position: absolute;
    top: -35vh;
    left: 0;
    z-index: 100;
    pointer-events: none;
}

.contenedor-login {
    height: 100vh;
    background-image: url("../images/navidad_2025/fondo-navidad-desktop.jpg");
    width: 100%;
    display: flex;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    align-items: flex-start;
    justify-content: end;
    flex-direction: column;
    z-index: 10;
    position: relative;
}

.contenedor-login .logo-natura {
    position: absolute;
    left: .5rem;
    top: .5rem;
    z-index: 20;
    max-width: 250px;
}
.contenedor-login .login-box{
    max-height: 200px !important;
    height: 100%;
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: center;
    padding: 3rem;
}
.contenedor-login .titulo {
    
    margin: 3rem 0 0 1.7rem;

}

.contenedor-login .titulo img {
    display: block;
    width: 100%;
    max-width: 210px;
    margin-bottom: 15px;
}
.contenedor-login .content-padres {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 50px;
}
.contenedor-login .content-padres p{
    /* background-color:  #EE7530; */
    padding: 0.1rem 2rem;
    /* border-radius: 7px; */
    width: 100vw;
    line-height: 120%;
    margin-bottom: 6rem;
}

.contenedor-login .content-padres img{
    position: absolute;
    right: 2rem;
    width: 210px;
}

@media all and (max-width: 1760px){
    .contenedor-login .content-padres {
        font-size: 45px;
    }
    .contenedor-login .content-padres img {
        width: 180px;
    }
    .contenedor-login .login-box{
        max-height: 230px !important;
    }
}
@media all and (max-width: 1560px){
   .contenedor-login .content-padres {
        font-size: 40px;
    }
    .contenedor-login .login-box{
        max-height: 210px !important;
    }
}

@media all and (max-width: 1366px){
    .contenedor-login .content-padres {
        font-size: 32px;
    }
    .contenedor-login .content-padres img {
        width: 150px;
    }
    .contenedor-login .content-padres p {
        padding: 0.1rem 3rem;
    }
    .contenedor-login .login-box{
        max-height: 180px !important;
    }
}

@media all and (max-width: 1024px){
    .bg-wave::before {
    display: none;
}
    .contenedor-login .content-padres {
        font-size: 32px;
    }
    .contenedor-login .content-padres img {
        width: 140px;
    }
    .contenedor-login .titulo img {
        max-width: 180px;
    }
    .contenedor-login .login-box{
        max-height: 280px !important;
    }
}

@media all and (max-width: 678px){

    .contenedor-login {
        background-image: url('../images/navidad_2025/fondo-navidad-mobile.jpg');
        background-position: top;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .contenedor-login .titulo{
        padding: 2rem;
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-left: 0;
        margin-top: 0;
    }

    .contenedor-login .content-padres{
        flex-direction: column;
        text-align: center;
        margin: 0;
        align-items: center;
    }
    .contenedor-login .content-padres p{
        font-size: 30px;
        padding: 0rem 0rem 16rem;
    }
    .contenedor-login .content-padres img{
        position: absolute;
        right: 2rem;
        bottom: 2rem;
        width: 130px;
        margin-bottom: 0;
    }
    .contenedor-login .login-box{
        max-height: 280px !important;
    }
}

