@font-face {
    font-family: 'Barnola';
    src: url('../css/fonts/fonts/Barnola-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Master';
    src: url('../css/fonts/fonts/Master_File.otf') format('opentype');
}

@font-face {
    font-family: 'BebaB';
    src: url('../css/fonts/fonts/BebasNeue-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'BebaL';
    src: url('../css/fonts/fonts/BebasNeue-Light.otf') format('opentype');
}

/********HEADER**************/

#header {
    border-bottom: 0px solid rgba(12, 11, 9, 0.8);
    transition: all 0.5s;
    z-index: 997;
    padding: 0px;
    top: 0px;
}

.headerSuperior {
    background-color: rgb(255,255,255,0.7);
}
  
#header.header-scrolled .mobile-nav-toggle {
    color: rgb(0, 0, 0);
    
}
  
.navbar a, .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    color: rgb(0, 0, 0);
    white-space: nowrap;
    transition: 0.3s;
    font-size: 20px;
    font-weight: 700;
    color: #060607;
}

.mobile-nav-toggle {
    color: rgb(0, 0, 0);
    font-size: 28px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
        margin-right: 20px;
  }

#topbar .contact-info i span {
    padding-left: 5px;
    color: rgb(0, 0, 0);
}

/***********************Banner***********************/
.bann2,
.bann3,
.bann4 {
    display: none;
}

.dGenTB {
    display: flex;
    justify-content: center;
}
.imgBack {
    overflow: hidden;
}

@media screen and (min-width: 757px) {
    .imgBack {
        background-image: url('../../img/home/fondo-banner-prosa-natural.webp');
        padding: 100px 0px 0px;
        background-repeat: no-repeat;
        background-size: cover;
        height: 90vh;
    }
}

@media screen and (max-width: 756px) {
    .imgBack {
        background-image: url('../../img/home/fondo-banner-prosa-natural-movil.webp');
        padding: 130px 0px 0px;
        height: 95vh;
    }
}
.dfleChi {
    position: relative;
}
.chic-1B1 {
    content: url('../../img/home/chica-banner.png');
position: absolute;
    top: 0%;
}

.man-B1 {
    content: url('../../img/home/mano.png');
    animation: mano 1s ease-in-out infinite;
}

@keyframes mano {
    0% {
        transform: translatex(0);
    }

    50% {
        transform: translatex(10px);
    }

    100% {
        transform: translatex(0);
    }
}

.dfBan {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}

.titleRP {
    /* font: normal normal normal 60px/76px Barnola; */
    text-align: left;
    font-family: 'Barnola';
    font-size: 60px;
    letter-spacing: 0px;
    color: #FC5095;
}

.contRP {
    text-align: left;
    font-size: 30px;
    font-family: 'Exo';
    /* font: normal normal normal 30px/40px Exo; */
    letter-spacing: 0px;
    color: #575757;
}

.cont-text3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.qscDi {
    text-align: left;
    font-size: 60px;
    font-family: 'Barnola';
    /* font: normal normal normal 60px / 76px Barnola; */
    letter-spacing: 0px;
    color: #CF50FC;
    width: 60%;
}

.dfBanC {
    display: flex;
    justify-content: center;
    align-items: end;
}

.btnTiendaBann {
    margin-bottom: 8rem;
    position: relative;
}

.btnTiendaBann a {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 63px;
    text-align: left;
    font-size: 25px;
    font-family: 'Exo';
    font-weight: bold;
    /* font: normal normal bold 30px / 40px Exo; */
    color: #575757;
    padding: 15px 25px;
}


/**2**/
.maRRL {
    margin: 0px 55px;
}

.cont-comen {
    margin: 1rem 0rem 0rem 0rem;
}

.com1 {
    content: url('../../img/home/comentario-annis-riv.png');
}

.com2 {
    content: url('../../img/home/comentario-doriita.png');
}

.com3 {
    content: url('../../img/home/comentario-cvz.png');
}

.com4 {
    content: url('../../img/home/comentario-antonella.png');
}

.com5 {
    content: url('../../img/home/comentario-karla-basuto9.png');
}

.com1,
.com2,
.com3,
.com4,
.com5 {
    margin: 20px 0px 20px 0px;
}

.com2,
.com4 {
    float: right;
}

.cont-text-B2 {
    text-align: center;
    font-size: 30px;
    font-family: 'Exo';
    letter-spacing: 0px;
    color: #575757;
}

.cont-text-B2 span {
    font-weight: bold;
}

.dfBanPr {
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: flex-end;
    position: relative;
}

.chic-2B2 {
    content: url('../../img/home/chica-con-miedo-prosa-natural.png');
    position: absolute;
    z-index: 0;
}

/**3**/
.chic-3B3 {
    content: url('../../img/home/mujer-joven-feliz-prosa-natural.png');
    position: absolute;
    z-index: 0;
}

.cont-text-B3 .text1 {
    text-align: left;
    font-size: 120px;
    font-family: 'Barnola';
    color: #FC5095;
    margin-bottom: 45px;
}

.cont-text-B3 .text2 {
    text-align: left;
    font-size: 30px;
    font-family: 'Exo';
    color: #575757;
}

.cont-text-B3 .text2 span {
    font-weight: bold;
}

/**4**/
.chic-4B4 {
    content: url('../../img/home/guarda-el-secreto-prosa-natural.png');
}

.titleB4 {
    text-align: left;
    font-size: 120px;
    font-family: 'Barnola';
    color: #FC5095;
}

.contB4 {
    text-align: center;
    font-size: 30px;
    font-family: 'Exo';
    font-weight: bold;
    color: #575757;
    margin-bottom: 10rem;

}

.contB4 span {
    font-size: 20px;
    font-weight: normal;
}

.cont1B4 {
    text-align: center;
    font-family: 'Exo';
    font-size: 30px;
    font-weight: bold;
    color: #CF50FC;
}

.dfsR {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: column;
}

.dfCE {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.carr-B4 {
    content: url('../../img/home/carrito-compras-prosa-natural.png');
}

@media screen and (max-width:1440px) {

    .qscDi {
        width: 75%;
    }

    /**3**/
    .cont-text-B3 .text1 {
        font-size: 100px;
    }
}

@media screen and (max-width:1366px) {

    .dno3 {
        display: none;
    }

    .dGenTB {
        align-items: flex-end;
    }
}

@media screen and (max-width:1280px) {

    /* .imgBack {
        height: 100vh;
    } */
    .chic-1B1 {
        width: 100%;
    }

    /**4**/
    .contB4 {
        margin-bottom: 5rem;
    }
}

@media screen and (max-width:1114px) {

    /**4**/
    .chic-4B4 {
        width: 100%;
    }

    .titleB4 {
        font-size: 90px;
    }

    .contB4 {
        font-size: 25px;
        margin-bottom: 2rem;
    }

    .cont1B4 {
        font-size: 23px;
    }

    .carr-B4 {
        width: 100%;
    }

    .btnTiendaBann a {
        font-size: 15px;
        padding: 10px 15px;
    }
}

@media screen and (max-width:1024px) {
    .imgBack {
        height: 50vh;
    }

    .dfleChi {
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .chic-1B1 {
        width: 100%;
    }

    .titleRP {
        font-size: 30px;
    }

    .contRP {
        font-size: 20px;
    }

    .btnTiendaBann a {
        font-size: 15px;
        padding: 10px 15px;
    }

    .qscDi {
        width: 100%;
        font-size: 29px;
    }

    .man-B1 {
        width: 30%;
    }

    .btnTiendaBann {
        margin-bottom: 4rem;
    }

    /**2**/
    .com1,
    .com2,
    .com3,
    .com4,
    .com5 {
        margin: 20px 0px 20px 0px;
        width: 135%;
    }

    .cont-text-B2 {
        font-size: 20px;
    }

    .chic-2B2 {
        width: 100%;
    }

    .maRRL {
        margin: 0px 0px 0px 60px;
    }

    /**3**/
    .cont-text-B3 .text1 {
        font-size: 80px;
        margin-bottom: 20px;
    }

    .cont-text-B3 .text2 {
        font-size: 25px;
    }

    .chic-3B3 {
        width: 142%;
    }

    /**4**/
    .titleB4 {
        font-size: 90px;
    }

    .contB4 {
        font-size: 20px;
        margin-bottom: 5rem;
    }

    .cont1B4 {
        font-size: 20px;
    }

    .chic-4B4 {
        width: 100%;
    }

    .carr-B4 {
        width: 100%;
    }
}

@media screen and (max-width:991px) {
    .imgBack {
        height: 65vh;
    }

    .btnTiendaBann a {
        font-size: 13px;
        padding: 10px 5px;
    }

    .chic-1B1 {
        display: none;
    }

    .dGenTB {
        align-items: center;
    }

    /**2**/
    .dfBanPr {
        justify-content: center;
    }

    .chic-2B2 {
        display: none;
    }

    /**3**/
    .chic-3B3 {
        display: none;
    }

    /**4**/
    .dnCh4 {
        display: none;
    }
    /*gap*/
    .gpMov{
        gap: 10px;   
    }
    .gpMov.mtMov {
        margin-top: 20px;
    }
}

@media screen and (max-width:768px) {
    .cont-text-B3 .text1 {
        font-size: 65px;
    }

    .cont-text-B3 .text2 {
        font-size: 20px;
    }
}

@media screen and (max-width:540px) {
    .imgBack {
        height: 70vh;
    }

    /**2**/
    .cont-comen {
        margin: 1rem 0rem 0rem 0rem;
        display: none;
    }

    .maRRL {
        margin: 0px 0px 0px 0px;
    }

    /**4**/
    .carr-B4 {
        display: none;
    }

    .titleB4 {
        font-size: 60px;
        margin-bottom: 0px;
    }

    .contB4 {
        font-size: 20px;
        margin-bottom: 2rem;
    }
}

@media screen and (max-width:468px) {
    .chic-1B1 {
        display: none;
    }

    .titleRP {
        text-align: center;
        font-size: 35px;
    }

    .contRP {
        font-size: 20px;
    }

    .cont-text3 {
        justify-content: center;
        align-items: center;
        flex-flow: column;
        width: 100%;
    }

    .qscDi {
        text-align: center;
        font-size: 40px;
        width: 100%;
    }

    .man-B1 {
        width: 35%;
        transform: rotate(90deg);
    }

    .btnTiendaBann a {
        font-size: 20px;
        padding: 10px 25px;
    }

    /**2**/
    .cont-comen,
    .chic-2B2 {
        display: none;
    }

    .maRRL {
        margin: 0px 0px;
    }

    .cont-text-B2 {
        margin-bottom: 5rem;
    }

    /**3**/
    .chic-3B3 {
        display: none;
    }

    .cont-text-B3 .text2 {
        text-align: center;
        font-size: 22px;
        margin-bottom: 5rem;
    }

    .cont-text-B3 .text1 {
        text-align: center;
        font-size: 60px;
        margin-bottom: 35px;
    }

    /**4**/
    .chic-4B4,
    .cont1B4 {
        display: none;
    }

    .titleB4 {
        text-align: center;
        font-size: 75px;
    }

    .contB4 {
        text-align: center;
        font-size: 22px;
        margin-bottom: 3rem;
    }
    /*gap*/
    .gpMov {
        gap:0px;
    }
    .gpMov.mtMov {
        margin-top: 0px;
    }
}

@media screen and (max-width:430px) {
    .imgBack {
        height: 95vh;
    }

    .cont-text3 {
        margin-bottom: 4rem;
    }
}
@media screen and (max-width:390px){
    .imgBack {
        height: 100vh;
    }
}
@media screen and (max-width:375px) {
    .imgBack {
        height: 125vh;
    }

    .cont-text3 {
        margin-bottom: 35px;
    }

}

@media screen and (max-width:320px) {
    .titleRP {
        text-align: center;
        font-size: 30px;
    }

    /**3**/
    .cont-text-B3 .text1 {
        font-size: 45px;
        margin-bottom: 25px;
    }

    .cont-text-B3 .text2 {
        font-size: 20px;
    }

    /**4**/
    .titleB4 {
        font-size: 60px;
    }

    .contB4 {
        font-size: 20px;
        margin-bottom: 3rem;
    }

}

@media screen and (max-width:280px) {
    .imgBack {
        height: 130vh;
    }

    .titleRP {
        font-size: 25px;
    }

    .qscDi {
        font-size: 30px;
    }

    .btnTiendaBann a {
        font-size: 18px;
        padding: 10px 15px;
    }
}
/* /-----------Mascaras---Cafe----------------- */
.carousel-captionC {
    position: absolute;
    right: 0%;
    bottom: 0;
    left: 0%;
    padding-top: 0rem;
    padding-bottom: 0rem;
    color: #fff;
    text-align: center;
    /* background: red; */
    top: 0%;
}

.choco-mas {
    position: absolute;
    top: 59%;
    left: 0%;
    width: 67%;
    transform: translate(50%, -50%);
    animation: choMo 1s ease-out;
}

.choco-mas-2 {
    position: absolute;
    top: 20%;
    left: 65%;
    transform: rotate(15deg);
    width: 7%;
    animation: mascMo 1.2s ease-out;
}

.text-mascara-cafe {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    animation: abajoUno 1s ease-out;
}

.text-mascara-cafe .uno {
    font-family: 'BebaL', sans-serif;
    font-size: 44px;
    color: #6c4630;
    line-height: 80px;
    margin-bottom: 0px;
}

.text-mascara-cafe .dos.esc {
    display: block;
}

.text-mascara-cafe .dos,
.tres {
    font-family: 'Master', sans-serif;
    font-size: 70px;
    color: #6c4630;
    line-height: 80px;
    margin-bottom: 0px;
}

.text-mascara-cafe .dos.mov {
    display: none;
}

.text-mascara-cafe .tres {
    font-size: 100px;
}

.imgTeC {
    position: absolute;
    top: 20%;
    left: 0;
    width: 35%;
    animation: cirTe 1s ease-out;
}


@keyframes cirTe {
    from {
        width: 0%;
    }

    to {
        width: 35%;
    }
}

@keyframes abajoUno {
    from {
        top: 0%;
    }

    to {
        top: 40%;
    }
}

@keyframes mascMo {
    0% {
        left: 107%;
        width: 0%;
    }

    100% {
        left: 65%;
        width: 7%;
    }
}

@keyframes choMo {
    0% {
        left: 70%;
    }

    100% {
        left: 0%;
    }
}

@media screen and (max-width:1440px) {
    .imgTeC {
        top: 22%;
        width: 31%;
        animation: cirTe 1s ease-out;
    }

    @keyframes cirTe {
        from {
            width: 0%;
        }

        to {
            width: 31%;
        }
    }

    .text-mascara-cafe .uno {
        line-height: 30px;
    }

    .text-mascara-cafe .dos,
    .tres {
        font-size: 62px;
    }

    .text-mascara-cafe .tres {
        font-size: 90px;
        line-height: 60px;
    }
}

@media screen and (max-width:1366px) {
    .text-mascara-cafe {
        left: 48%;
    }
}

@media screen and (max-width:1024px) {
    .imgTeC {
        top: 30%;
        width: 25%;
        animation: cirTe 1s ease-out;
    }

    @keyframes cirTe {
        from {
            width: 0%;
        }

        to {
            width: 25%;
        }
    }

    .text-mascara-cafe {
        left: 44%;
        top: 47%;
        animation: abajoUno 1s ease-out;
    }

    @keyframes abajoUno {
        from {
            top: 0%;
        }

        to {
            top: 47%;
        }
    }

    .text-mascara-cafe .uno {
        line-height: 0px;
        font-size: 30px;
    }

    .text-mascara-cafe .dos {
        font-size: 45px;
        line-height: 75px;
    }

    .text-mascara-cafe .tres {
        font-size: 65px;
        line-height: 25px;
    }

    .choco-mas-2 {
        top: 30%;
        width: 6%;
        animation: mascMo 1.2s ease-out;
    }

    @keyframes mascMo {
        0% {
            left: 107%;
            width: 0%;
        }

        100% {
            left: 65%;
            width: 6%;
        }
    }
}

@media screen and (max-width:768px) {
    .text-mascara-cafe .tres {
        font-size: 58px;
        line-height: 20px;
    }

    .text-mascara-cafe .dos {
        font-size: 38px;
    }
}

@media screen and (max-width:712px) {
    .choco-mas {
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-51%, 50%);
        animation: choMo 1s ease-out;
    }

    @keyframes choMo {
        0% {
            left: 150%;
        }

        100% {
            left: 50%;
        }
    }

    .choco-mas-2 {
        top: 55%;
        left: 61%;
        width: 15%;
        animation: mascMo 1.2s ease-out;
    }

    @keyframes mascMo {
        0% {
            left: 107%;
            width: 0%;
        }

        100% {
            left: 61%;
            width: 15%;
        }
    }

    .text-mascara-cafe {
        left: 35%;
        top: 68%;
        animation: abajoUno 1s ease-out;
    }

    @keyframes abajoUno {
        from {
            top: 0%;
        }

        to {
            top: 68%;
        }
    }

    .text-mascara-cafe .uno {
        font-size: 50px;
        line-height: 75%;
    }

    .text-mascara-cafe .dos.esc {
        display: none;
    }

    .text-mascara-cafe .dos.mov {
        display: block;
        line-height: 95%;
        font-size: 66px;
    }

    .text-mascara-cafe .tres {
        font-size: 100px;
        line-height: 85px;
    }

    .imgTeC {
        top: 15%;
        width: 65%;
        animation: cirTe 1s ease-out;
    }

    @keyframes cirTe {
        from {
            width: 0%;
        }

        to {
            width: 65%;
        }
    }
}

@media screen and (max-width:540px) {
    .imgTeC {
        top: 11%;
        width: 60%;
        animation: cirTe 1s ease-out;
    }

    @keyframes cirTe {
        from {
            width: 0%;
        }

        to {
            width: 60%;
        }
    }

    .text-mascara-cafe {
        left: 40%;
        top: 65%;
        width: 100%;
        animation: abajoUno 1s ease-out;
    }


    @keyframes abajoUno {
        from {
            top: 0%;
        }

        to {
            top: 65%;
        }
    }

    .text-mascara-cafe .uno {
        font-size: 40px;
    }

    .text-mascara-cafe .dos.mov {
        font-size: 55px;
    }

    .text-mascara-cafe .tres {
        font-size: 75px;
        line-height: 74px;
    }
}

@media screen and (max-width:468px) {
    .imgTeC {
        top: 12%;
        width: 65%;
    }

    @keyframes cirTe {
        from {
            width: 0%;
        }

        to {
            width: 65%;
        }
    }

    .text-mascara-cafe {
        left: 38%;
        top: 65%;
        width: 100%;
        animation: abajoUno 1s ease-out;
    }

    @keyframes abajoUno {
        from {
            top: 0%;
        }

        to {
            top: 65%;
        }
    }

    .text-mascara-cafe .uno {
        font-size: 30px;
        line-height: 85%;
    }

    .text-mascara-cafe .dos.mov {
        font-size: 43px;
    }


    .text-mascara-cafe .tres {
        font-size: 65px;
        line-height: 53px;
    }
}

@media screen and (max-width:390px) {
    .text-mascara-cafe {
        left: 35%;
        top: 70%;
        animation: abajoUno 1s ease-out;
    }

    @keyframes abajoUno {
        from {
            top: 0%;
        }

        to {
            top: 70%;
        }
    }
}

@media screen and (max-width:320px) {
    .imgTeC {
        top: 13%;
        width: 65%;
        animation: cirTe 1s ease-out;
    }

    @keyframes cirTe {
        from {
            width: 0%;
        }

        to {
            width: 65%;
        }
    }

    .text-mascara-cafe {
        left: 37%;
        top: 66%;
        animation: abajoUno 1s ease-out;
    }

    @keyframes abajoUno {
        from {
            top: 0%;
        }

        to {
            top: 66%;
        }
    }

    .text-mascara-cafe .uno {
        font-size: 25px;
        line-height: 85%;
    }

    .text-mascara-cafe .dos.mov {
        font-size: 35px;
    }

    .text-mascara-cafe .tres {
        font-size: 42px;
        line-height: 39px;
    }

}

/* -------------Mascara Aguacate---------------------- */
.agua-mas {
    position: absolute;
    top: 55%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 50%;
    animation: ondaAgua 1s ease-in-out;
}

@keyframes ondaAgua {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.agua-mas-2 {
    position: absolute;
    top: 30%;
    left: 20%;
    transform: rotate(-10deg);
    width: 7%;
    animation: flotar 2.5s ease-in-out;
}

@keyframes flotar {
    0% {
        transform: rotate(-0deg) scale(0);
    }

    100% {
        transform: rotate(-10deg) scale(1);
    }
}

.text-mascara-agua {
    position: absolute;
    top: 55%;
    left: 70%;
    width:100%;
    transform: translate(-50%, -50%);
    animation: aparecer 2s ease-in-out forwards;
}

@keyframes aparecer {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.text-mascara-agua .uno {
    font-family: 'BebaB', sans-serif;
    font-size: 70px;
    color: #c0a838;
    line-height: 25px;
    margin-bottom: 0px;
    animation: reboteVertical1 1.5s ease-in-out infinite;
}


.text-mascara-agua .dos {
    font-family: 'BebaL', sans-serif;
    font-size: 55px;
    color: #c0a838;
    line-height: 90px;
    margin-bottom: 0px;
    animation: reboteVertical1 1.5s ease-in-out infinite;
}



.text-mascara-agua .tres {
    font-family: 'Master', sans-serif;
    font-size: 80px;
    color: #819c23;
    line-height: 45px;
    margin-bottom: 0px;
    animation: reboteVertical1 1.5s ease-in-out infinite;
}


.text-mascara-agua .cuatro {
    font-family: 'Master', sans-serif;
    font-size: 125px;
    color: #819c23;
    line-height: 140px;
    margin-bottom: 0px;
    animation: reboteVertical1 1.5s ease-in-out infinite;
}



.text-mascara-agua .cinco {
    font-family: 'BebaB', sans-serif;
    font-size: 60px;
    color: #c0a838;
    line-height: 120px;
    margin-bottom: 0px;
    animation: reboteVertical1 1.5s ease-in-out infinite;
}


@keyframes reboteVertical1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.imgMaA {
    position: absolute;
    top: 45%;
    /* Inicia desde la parte superior */
    left: 85%;
    transform: rotate(-35deg);
    /* Rotación inicial */
    animation: hojaCa 2s ease-in-out;
    /* Duración más larga y repetición infinita */
}

@keyframes hojaCa {
    0% {
        top: 0%;
        /* Comienza desde arriba */
        transform: rotate(-35deg);
        /* Rotación inicial */
    }

    50% {
        top: 45%;
        /* Llega a la posición final en el 50% del tiempo */
        transform: rotate(35deg);
        /* Rotación intermedia */
    }

    100% {
        top: 45%;
        /* Se mantiene en la posición final */
        transform: rotate(-35deg);
        /* Vuelve a la rotación inicial */
    }
}

@media screen and (max-width:1440px) {
    .text-mascara-agua {
        width: 100%;
    }

    .text-mascara-agua {
        top: 61%;
        left: 67%;
    }
}

@media screen and (max-width:1024px) {
    .text-mascara-agua {
        top: 65%;
    }

    .text-mascara-agua .uno {
        font-size: 45px;
        line-height: 10px;
    }

    .text-mascara-agua .dos {
        font-size: 40px;
        line-height: 61px;
    }

    .text-mascara-agua .tres {
        font-size: 60px;
        line-height: 40px;
    }

    .text-mascara-agua .cuatro {
        font-size: 95px;
        line-height: 95px;
    }

    .text-mascara-agua .cinco {
        font-size: 45px;
        line-height: 85px;
    }

    .imgMaA {
        top: 50%;
        width: 10%;
        animation: hojaCa 2s ease-in-out;
    }

    @keyframes hojaCa {
        0% {
            top: 0%;
            transform: rotate(-35deg);
        }

        50% {
            top: 50%;
            transform: rotate(35deg);
        }

        100% {
            top: 50%;
            transform: rotate(-35deg);
        }
    }
}

@media screen and (max-width:991px) {
    .text-mascara-agua {
        top: 60%;
    }

    .text-mascara-agua .uno {
        font-size: 35px;
    }

    .text-mascara-agua .dos {
        font-size: 30px;
        line-height: 48px;
    }

    .text-mascara-agua .tres {
        font-size: 47px;
        line-height: 25px;
    }

    .text-mascara-agua .cuatro {
        font-size: 75px;
        line-height: 85px;
    }

    .text-mascara-agua .cinco {
        font-size: 35px;
        line-height: 60px;
    }
}

@media screen and (max-width:712px) {
    .agua-mas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -0%);
        width: 100%;
        animation: ondaAgua 1s ease-in-out;
    }

    @keyframes ondaAgua {
        0% {
            transform: translate(-50%, 0%) scale(0);
        }

        100% {
            transform: translate(-50%, 0%) scale(1);
        }
    }

    .text-mascara-agua {
        top: 30%;
        left: 50%;
    }

    .agua-mas-2 {
        top: 50%;
        left: 37%;
        width: 20%;
    }

    .text-mascara-agua .uno {
        font-size: 50px;
    }

    .text-mascara-agua .dos {
        font-size: 35px;
        line-height: 70px;
    }

    .text-mascara-agua .tres {
        font-size: 70px;
        line-height: 50px;
    }

    .text-mascara-agua .cuatro {
        font-size: 75px;
        line-height: 85px;
    }

    .text-mascara-agua .cinco {
        font-size: 50px;
        line-height: 78px;
    }
}

@media screen and (max-width:468px) {


    .text-mascara-agua {
        top: 35%;
        left: 50%;
    }

    .text-mascara-agua .uno {
        font-size: 35px;
    }

    .text-mascara-agua .dos {
        font-size: 25px;
        line-height: 45px;
    }

    .text-mascara-agua .tres {
        font-size: 50px;
        line-height: 30px;
    }

    .text-mascara-agua .cuatro {
        font-size: 60px;
        line-height: 70px;
    }

    .text-mascara-agua .cinco {
        font-size: 30px;
        line-height: 45px;
    }
}

@media screen and (max-width:320px) {
    .text-mascara-agua {
        top: 36%;
    }

    .text-mascara-agua .uno {
        font-size: 30px;
    }

    .text-mascara-agua .dos {
        font-size: 25px;
        line-height: 42px;
    }

    .text-mascara-agua .tres {
        font-size: 40px;
        line-height: 20px;
    }

    .text-mascara-agua .cuatro {
        font-size: 50px;
        line-height: 60px;
    }

    .text-mascara-agua .cinco {
        font-size: 25px;
        line-height: 35px;
    }

    .agua-mas-2 {
        top: 55%;
        width: 19%;
    }
}

/* -----------Mascara de Mamey----------------- */
.mam-mas {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 57%;
    transform: translate(80%, -50%);
    animation: desplazarHorizontal 2s ease-in-out;
}

@keyframes desplazarHorizontal {

    0% {
        top: 150%;
        /* left: 0%; */
        transform: translate(80%, -50%) scale(0);
    }

    100% {
        top: 50%;
        /* left: 100%; */
        transform: translate(80%, -50%) scale(1);
    }
}

.mam-mas-2 {
    position: absolute;
    width: 8%;
    top: 20%;
    left: 55%;
    transform: rotate(10deg);
    animation: rotarEscalar 3s ease-in-out;
}

@keyframes rotarEscalar {


    0% {
        left: -10%;
        transform: rotate(10deg) scale(0);
    }

    50% {

        transform: rotate(10deg) scale(0);
    }

    100% {
        left: 55%;
        transform: rotate(10deg) scale(1);
    }
}

.text-mascara-mamey {
    position: absolute;
    top: 55%;
    left: 26%;
    transform: translate(-50%, -50%);
    animation: aparecerDesvanecer 2.5s ease-in-out;
}

@keyframes aparecerDesvanecer {

    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
}

.text-mascara-mamey .uno {
    font-family: 'BebaB', sans-serif;
    font-size: 65px;
    color: #c0a838;
    line-height: 40px;
    margin-bottom: 0px;
    animation: reboteVertical 1.5s ease-in-out infinite;
}

.text-mascara-mamey .dos {
    font-family: 'BebaL', sans-serif;
    font-size: 55px;
    color: #c0a838;
    line-height: 75px;
    margin-bottom: 0px;
    animation: reboteVertical 1.5s ease-in-out infinite;
}

.text-mascara-mamey .tres {
    font-family: 'Master', sans-serif;
    font-size: 85px;
    color: #e58f72;
    /* line-height: 25px; */
    margin-bottom: 0px;
    animation: reboteVertical 1.5s ease-in-out infinite;
}

.text-mascara-mamey .cuatro {
    font-family: 'Master', sans-serif;
    font-size: 110px;
    color: #e58f72;
    line-height: 91px;
    margin-bottom: 0px;
    animation: reboteVertical 1.5s ease-in-out infinite;
}

@keyframes reboteVertical {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.imgMaM {
    position: absolute;
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50%);
    animation: flotarRotar 4s ease-in-out infinite;
}

@keyframes flotarRotar {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -55%) rotate(10deg);
    }
}


@media screen and (max-width:1024px) {
    .mam-mas-2 {
        width: 7%;
        top: 30%;
    }

    .text-mascara-mamey {
        top: 62%;
    }

    .text-mascara-mamey .uno {
        font-size: 50px;
    }

    .text-mascara-mamey .dos {
        font-size: 45px;
        line-height: 55px;
    }

    .text-mascara-mamey .tres {
        font-size: 70px;
    }

    .text-mascara-mamey .cuatro {
        font-size: 90px;
        line-height: 65px;
    }

    .imgMaM {
        top: 52%;
        left: 25%;
        width: 50%;
    }
}

@media screen and (max-width:768px) {
    .text-mascara-mamey .uno {
        font-size: 35px;
    }

    .text-mascara-mamey .dos {
        font-size: 35px;
        line-height: 30px;
    }

    .text-mascara-mamey .tres {
        font-size: 55px;
    }

    .text-mascara-mamey .cuatro {
        font-size: 70px;
        line-height: 25px;
    }
}

@media screen and (max-width:712px) {

    .mam-mas {
        position: absolute;
        top: 28%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -0%);
        z-index: 1;
        animation: desplazarHorizontal 2s ease-in-out;
    }

    @keyframes desplazarHorizontal {

        0% {
            top: 100%;
            transform: translate(-50%, -0%) scale(0);
        }

        100% {
            top: 28%;
            transform: translate(-50%, -0%) scale(1);
        }
    }

    .mam-mas-2 {
        width: 20%;
        top: 43%;
        left: 34%;
        z-index: 1;
        animation: rotarEscalar 3s ease-in-out;
    }

    @keyframes rotarEscalar {


        0% {
            left: -10%;
            transform: rotate(10deg) scale(0);
        }

        50% {

            transform: rotate(10deg) scale(0);
        }

        100% {
            left: 34%;
            transform: rotate(10deg) scale(1);
        }
    }

    .text-mascara-mamey {
        top: 25%;
        left: 40%;
    }

    .text-mascara-mamey .uno {
        font-size: 55px;
    }

    .text-mascara-mamey .dos {
        font-size: 50px;
        line-height: 65px;
    }

    .text-mascara-mamey .tres {
        font-size: 75px;
        line-height: 85%;
    }

    .text-mascara-mamey .cuatro {
        font-size: 85px;
        line-height: 75px;
    }

    .imgMaM {
        top: 30%;
        left: 50%;
        width: 90%;
        transform: translate(-50%, -50%) rotateZ(100deg) rotate(10deg);
        animation: flotarRotar 4s ease-in-out infinite;
    }

    @keyframes flotarRotar {

        0%,
        100% {
            transform: translate(-50%, -50%) rotateZ(100deg) rotate(0deg);
        }

        50% {
            transform: translate(-50%, -55%) rotateZ(100deg) rotate(10deg);
        }
    }
}

@media screen and (max-width:540px) {
    .mam-mas-2 {
        width: 18%;
        top: 50%;
    }

    .text-mascara-mamey {
        top: 25%;
        left: 40%;
        width: 100%;
        z-index: 1;
    }

    .text-mascara-mamey .uno {
        font-size: 50px;
    }

    .text-mascara-mamey .dos {
        font-size: 43px;
        line-height: 50px;
    }

    .text-mascara-mamey .tres {
        font-size: 65px;
        line-height: 100%;
    }

    .text-mascara-mamey .cuatro {
        font-size: 73px;
        line-height: 52px;
    }
}

@media screen and (max-width:468px) {
    .text-mascara-mamey {
        top: 30%;
    }

    .text-mascara-mamey .uno {
        font-size: 35px;
    }

    .text-mascara-mamey .dos {
        font-size: 32px;
        line-height: 30px;
    }

    .text-mascara-mamey .tres {
        font-size: 50px;
    }

    .text-mascara-mamey .cuatro {
        font-size: 55px;
        line-height: 33px;
    }
}

@media screen and (max-width:320px) {
    .text-mascara-mamey .uno {
        font-size: 30px;
    }

    .text-mascara-mamey .dos {
        font-size: 26px;
        line-height: 23px;
    }

    .text-mascara-mamey .tres {
        font-size: 40px;
    }

    .text-mascara-mamey .cuatro {
        font-size: 45px;
        line-height: 30px;
    }
}


/******************************CARROUSEL*****************************/

.slider-Imagenes{
    width: 100vh;
   /* height: 100vh;*/
}

.carousel-indicators [data-bs-target] {
    background-color: #c8c8c8;
}

@media screen and (min-width: 757px) {
    .carrouselMovil{
        display: none;
    }
    .imgP {
        content: url("../../img/home/mascara-para-pestanas-profesional-silicon-cafe-fondo.webp");
    }

    .img1 {
        content: url("../../img/home/mascara-para-pestanas-con-aceite-de-aguacate-fondo.webp");
    }

    .img2 {
        content: url("../../img/home/mascara-de-pestenas-con-aceite-de-mamey-fondo.webp");
    }

    .img3 {
        content: url("../../img/home/gracias-por-ser-parte-del-secreto-mejor-guardado-de-mexico.webp");
    }

    .img4 {
        content: url("../../img/home/Banner-Aloe-Escritorio.webp");
    }

    .mam-mas {
        content: url('../../img/home/mamey-mascara-de-mamey.png');
    }
    .imgDM1 {
        content: url('../../img/home/PROSA_Web_Banners_v2-01.webp');
    }
    .imgDM2 {
        content: url('../../img/home/PROSA_Web_Banners_v2-02.webp');
    }
    .imgDM3 {
        content: url('../../img/home/PROSA_Web_Banners_v2-03.webp');
    }
    
    .imgcero {
        content: url('../../img/home/banner-azul.webp');
    }

}

@media screen and (max-width: 756px) {
    .carrouselDesktop{
        display: none;
    }
    .imgP {
        content: url("../../img/home/mascara-para-pestanas-profesional-silicon-cafe-fondo-movil.webp");
    }

    .img1 {
        content: url("../../img/home/mascara-para-pestanas-con-aceite-de-aguacate-movil.webp");
    }

    .img2 {
        content: url("../../img/home/mascara-de-pestenas-con-aceite-de-mamey-movil.webp");
    }

    .img3 {
        content: url("../../img/home/gracias-por-ser-parte-del-secreto-mejor-guardado-de-mexico-movil.webp");
    }

    .img4 {
        content: url("../../img/home/Banner-Aloe-Movil.webp");
    }

    .mam-mas {
        content: url('../../img/home/mamey-mascara-de-mamey-movil.png');
    }
    
  
      .imgDM1 {
            content: url('../../img/home/PROSA_Web_Banners_Movil_v2-01.webp');
        }
        .imgDM2 {
            content: url('../../img/home/PROSA_Web_Banners_Movil_v2-02.webp');
        }
         .imgDM3 {
            content: url('../../img/home/PROSA_Web_Banners_Movil_v2-03.webp');
        }
        
            
    .imgcero {
        content: url('../../img/home/banner-azul-movil.webp');
    }
}














@media screen and (min-width: 601px) {
    .carousel-control-next, .carousel-control-prev {
    
        transition: opacity .15s ease;
        background-color: rgb(132,122,123);
        width: 3%;
    }

}

@media screen and (max-width: 600px) {
    .carousel-control-next, .carousel-control-prev {
    
        transition: opacity .15s ease;
        background-color: rgb(132,122,123);
        width: 10%;
    }
}

.carousel-caption1 {
    position: absolute;
    transform: translate(0%, -50%);
    top: 85%;
    left: 75%;
}

.btnTienda {
    border-radius: 10px;
    padding: 15px;
    color: #124734;
    font-size: 18px;
    border: 2px solid #3f3f3f;
    background-color: #ffffffa3;
    font-weight: bold;
    transition: .3s all ease-in;
}

.btnTienda:hover {
    box-shadow: 0px 0px 15px 6px #00000078;
}

.carousel-caption2 {
    position: absolute;
    left: 50%;
    top: 70%;
    padding-top: 1.25rem;
    padding-bottom: 30%;

}

.carousel-caption3 {
    position: absolute;
    left: 75%;
    top: 80%;
    padding-top: 1.25rem;
    padding-bottom: 30%;
    width: 25%;
}
.carousel-rimmels {
    position: absolute;
    padding-top: 1.25rem;
    padding-bottom: 30%;
    width: 50%;
    left: 20%;
    top: 25%;
    line-height: 65px;
}

.rimmels1{
    font-size: 5em;
    text-align: start;
     text-shadow: 2px 2px 2px black;
     font-weight: lighter;
}

.rimmels2{
    font-size: 3.2em;
    font-weight: bold;
    text-align: start;
     text-shadow: 2px 2px 2px black;
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 1s cubic-bezier(0.895, 0.030, 0.685, 0.220) 1.5s alternate both;
	        animation: tracking-in-expand 1s cubic-bezier(0.895, 0.030, 0.685, 0.220) .5s alternate both;
}


 @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }

.energia_movimiento{
    position: relative;
    font-weight: bold;
    font-size: 3vw;
    z-index: 1;
    color: white;
}

.flechas{
    color: rgb(140, 217, 41);
    font-weight: bold;
    font-size: 3vw;
}

.ponemos_empeno{
    position: relative;
    font-size: 3vw;
    z-index: 1;
    color: black;
    text-align: left;
}

.sabor-sabila1{
    position: relative;
    font-size: 2.2vw;
    z-index: 1;
    color: rgb(170,141,81);
    text-align: left;
    text-shadow: 2px 2px 2px black;
    left: 30%;
}

.sabor-sabila2{
    position: relative;
    line-height: 20px;
    font-weight: bold;
    font-size: 2.5vw;
    z-index: 1;
    color: rgb(170,141,81);
    text-align: left;
    text-shadow: 2px 2px 2px black;
    left: 30%;
}

/******************************RAPIDES EN ENTREGA- LOS MEJORES PRECIOS- GARANTIA EN CALIDAD - 21 ANOS EN EL MERCADO*****************************/

.check {
    width: 30px;
    fill: rgb(169,174,12);
}

svg {
    height: 30px;
}

/*****************************SECCI脫N DE BATERIAS (CIRCULOS)*******************************************/
.home-CAR {
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 20px;
    line-height: 35px;
    text-align: left;
}

.home-Bater {
    color: rgb(3, 55, 126);
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}
  
.numberCircle {
    border: 5px solid transparent;
    border-radius: 100%;
    margin-left: 5%;
    margin-right: 5%;
}
  
.batan {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
  
.numberCircle:hover {
    cursor: pointer;
    border-radius: 100%;
    border: 5px solid rgb(3, 55, 126);
} 
  
.green .circle {
    background: #f7f7f7;
    border-color: #f7f7f7;
}

.green:hover .circle {
    border-right-color: #d4d4d4;
}
  
.green:hover .icon {
    color: #d4d4d4;
}
  
figure {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
}
  
.circle {
    top: 0;
    left: 0;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: #dd0000;
    transition: red .5s linear;
    border: 2px solid #dd0000;
    backface-visibility: hidden;
    position: relative;
}
  
figure:hover .circle {
    border-color: transparent;
    background: #fff;
    animation: hoorai cubic-bezier(0.18, 0.14, 0.29, 1) 1s;
    animation-fill-mode: forwards;
    border-right-color: #dd0000;
}   

.icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    font-family: 'fontello';
    font-size: 32px;
    color: #fff;
    text-align: center;
    line-height: 84px;
    transition: color .5s linear;
}

.icon:hover {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

figure:hover .icon {
    color: #dd0000;
}

.carousel-cuachalate {
    position: absolute;
    left: 59%;
    top: 34%;
    padding-top: 1.25rem;
    padding-bottom: 30%;
    line-height: 46px;

}

.sabor-cuachalate1{
    position: relative;
    z-index: 1;
    left: 30%;
    font-family: 'Kaushan Script', cursive;
    text-align: end
}

.sabor-cuachalate2{
    position: relative;
    text-align: end;
    z-index: 1;
    left: 30%;
    font-weight: bold;
}

.cuachalate1{
    color: #915c00; 
    font-size: 66px;
    font-weight: bold;
}
.cuachalate2{
    color: #07331f; font-size: 54px;
}
.cuachalate3{
    color: #07331f; font-size: 54px;
}
.cuachalate4{
    color: #3a261a; font-size: 43px;
}
.cuachalate5{
    color: #330b01; font-size: 37px;
}
.cuachalate6{
    color: #330b01; font-size: 27px;
}


@media screen and (max-width: 1656px) {
    .carousel-rimmels {
        line-height: 44px;
    }
    .carousel-cuachalate{
        line-height: 35px;
        top: 29%;
    }
    .rimmels1{
        font-size:  3.5vw;
    }
    .rimmels2{
        font-size:  2.5vw;
    }
    .sabor-cuachalate1, .sabor-cuachalate2  {
        left: 12%;
    }
     .cuachalate1{
     font-size: 66px;
     font-size:  3.5vw;
    }
    .cuachalate2{
      font-size:  3.5vw;
    }
    .cuachalate3{
      font-size:  3.5vw;
    }
    .cuachalate4{
      font-size:  3.5vw;
    }
    .cuachalate5{
      font-size:  3.5vw;
    } 
    .carousel-cuachalate {
        left: 0;
    }
}

@media screen and (max-width: 1627px) {
    .carousel-cuachalate{
        top: 24%;
    }

}

@media screen and (max-width: 1416px) {
    .carousel-cuachalate{
        top: 23%;
    }
    .carousel-rimmels {
        line-height: 25px;
    }
    .carousel-caption1 {
        top: 90%;
        left: 65%;
    }

}
@media screen and (max-width:1366px){
    .carousel-caption1 {
        top: 90%;
        left: 70%;
    }
}
@media screen and (max-width: 1062px) {
    .carousel-cuachalate{
        top: 30%;
    }

}
@media screen and (max-width: 1030px) {
    .carousel-cuachalate{
        top: 30%;
    }
    .carousel-caption1 {
        left: 70%;
    }

    .btnTienda {
        padding: 10px;
        font-size: 15px;
    }
}

@media screen and (max-width: 875px) {
    .carousel-rimmels {
        line-height: 13px;
    }
    .carousel-caption1 {
        left: 63%;
        top: 90%;
    }
}
@media screen and (max-width: 756px) {
    .sabor-cuachalate1, .sabor-cuachalate2  {
        left: 7%;
        text-align: center;
    }
    .carousel-cuachalate {
        top: 10%;
    }
    .carousel-rimmels {
        left: 10%;
        top: 80%;
    }
}
@media screen and (max-width: 633px) {
    .sabor-cuachalate1 {
        font-size: 4vw;
    }

    .sabor-cuachalate2 {
        font-size: 4vw;
    }

    .carousel-cuachalate {
        line-height:10px;
        left: 5%;
    }
}

@media screen and (max-width: 633px) {
    .sabor-cuachalate1 {
        font-size: 4vw;
    }

    .sabor-cuachalate2 {
        font-size: 4vw;
    }

    .carousel-cuachalate {
        line-height:10px;
        left: 5%;
    }
}

@media screen and (max-width: 439px) {
    .sabor-cuachalate1 {
        font-size: 5vw;
    }

    .sabor-cuachalate2 {
        font-size: 5vw;
    }
    .carousel-caption1 {
        left: 50%;
        top: 85%;
    }

    .btnTienda {
        padding: 6px;
        font-size: 10px;
    }
}

@media screen and (max-width: 375px) {
    .sabor-cuachalate1 {
        font-size: 6vw;
    }

    .sabor-cuachalate2 {
        font-size: 6vw;
    }

}

@keyframes hoorai {
    0% {
        transform: rotate(-90deg);
        opacity: 1.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.0;
    }

}

@media screen and (max-width: 730px) {
    .sabor-sabila1 {
        font-size: 3vw;
    }

    .sabor-sabila2 {
        font-size: 3vw;
    }

    .carousel-caption3 {
        left: 40%;
        top: 80%;
    }
}

@media screen and (max-width: 633px) {
    .sabor-sabila1 {
        font-size: 4vw;
    }

    .sabor-sabila2 {
        font-size: 4vw;
    }

    .carousel-caption3 {
        left: 30%;
        top: 75%;
    }
}

@media screen and (max-width: 439px) {
    .sabor-sabila1 {
        font-size: 5vw;
    }

    .sabor-sabila2 {
        font-size: 5vw;
    }

    .carousel-caption3 {
        top: 75%;
        left: 60%;
    }
}

@media screen and (max-width: 375px) {
    .sabor-sabila1 {
        font-size: 6vw;
    }

    .sabor-sabila2 {
        font-size: 6vw;
    }

    .carousel-caption3 {
        left: 1%;
        top: 75%;
    }
}

@media screen and (max-width: 767px) {
    .icon-VITAMINAS{
        display: none;
    }
    
    .icon-COSMETICOS{
        display: none;
    }

    .text-letra{
        margin-right: 20px;
    }

    .text-letraB{
        margin-left: 20px;
    }
    /* .text-letraB{
        margin-top: 20px;
    } */

}

@media screen and (max-width: 593px) {
    .text-letraB{
        margin-top: 20px;
    } 

}




.p-3 {
    padding-right: 0rem! important;
}

@media screen and (min-width: 593px) {
    .p-5 {
        padding: 0rem!important;
    }
}



.boton-revolucion-mascaras {
    position: absolute;
    top: 90%;
    left: 80%;
    transform: translate(-50%, -50%);
    background-color: rgb(255,255,255,0.8);
    color: rgb(43,4388);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius:20px;
    box-shadow: 0 0 20px rgba(255,255,255, 0.7); /* Efecto de sombra al pasar el rat贸n por encima */

}
@media screen and (max-width:320px){
    .carousel-caption1 {
        left: 45%;
    }
}









.banners-home-video {
    display: none;
}
.banners-home-video:first-child {
    display: contents;
}



/* Efectos de entrada mejorados */

/* De izquierda a derecha */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-200%);
    }
    60% {
        opacity: 0.8;
        transform: translateX(30%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-left {
    animation: slideInFromLeft 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* De derecha a izquierda */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    60% {
        opacity: 0.8;
        transform: translateX(-30%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-right {
    animation: slideInFromRight 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* De arriba hacia abajo */
@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-200%);
    }
    60% {
        opacity: 0.8;
        transform: translateY(30%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-top {
    animation: slideInFromTop 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* De abajo hacia arriba */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(200%);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-30%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-bottom {
    animation: slideInFromBottom 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Zoom mejorado */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-zoom {
    animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Agregar un pequeño retardo para elementos individuales */
.animate-left,
.animate-right,
.animate-top,
.animate-bottom,
.animate-zoom {
    animation-fill-mode: forwards; /* Mantener el estado final */
    animation-delay: 0.2s; /* Retardo opcional */
}