body.noScroll{ overflow: hidden; }


.promoLunes{
  position: fixed;
  top: 0; left: 0;
  min-height: 100dvh; 
  width: 100%; 
  height: 100%;
  background: rgba(89,122,134,.5);
  backdrop-filter: blur(10px);
  z-index: 200;
  display: flex;                 /* ya visible como flex */
  opacity: 0;                    /* oculto inicialmente */
  visibility: hidden;
  pointer-events: none;
  transform: translateY(150px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .25s;
}
.promoLunes.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .4s ease, transform .4s ease;
}


.promoLunes.mini{
    position: static;
    background: #fff;
    min-height: 20vh ;
}


.promoLunes .containerProm{
    display: flex;
    flex-direction: column;
    gap: .3rem;
    border-radius: 1rem;
    border-top: 3px solid #ebfeff;
    border-bottom: 2px solid #c0c7ca;
    padding: 1rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(0, #758997 5%, #c6d8e0 70%);
    box-shadow: 0 5px 18px rgba(0,0,0, .5);
    
}
.promoLunes .containerProm.mini{
    background:linear-gradient(0, #000, #222) ;
    border-top: transparent;
    border-bottom: transparent;
    box-shadow: 0 5px 18px rgba(0,0,0, .080);
}




.promoLunes.mini .containerProm{
  height: auto;
}



.promoLunes .containerProm .btnCont{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 1rem;
}

.promoLunes .containerProm .btnCont .minimize{
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 5px;
    font-size: 1.5rem;
    color: #c4cfd8 ;
    cursor: pointer;
    background: #00304e ;
}

.promoLunes .containerProm .btnCont .minimize.hide{
    display: none;
}



.promoLunes .containerProm .btnCont .expand{
    padding: .5rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: #00304e;
    margin-left: auto;
    border-radius: 5px;
    font-size: 1.5rem;
    color: #c4cfd8 ;
    cursor: pointer;
}
.promoLunes .containerProm .btnCont .expand.show{
    display: flex;
}

.promoLunes .containerProm .heading{
    padding: .5rem;
    background: #0f202c;
    border-radius: 1rem;
    box-shadow: 0 5px 10px rgba(0,0,0, .4);
    border-bottom: 1px solid #9ba6ad;
    position: relative;
    overflow: hidden;
    background-image: url(/images/resources/cookiesflying.png);
    background-repeat:no-repeat ;
    background-size: 50%;
    background-position: 110% 50%;
}

@media(max-width:1200px){
    .promoLunes .containerProm .heading{
        background-size: 70%;
        background-position: 190% 50%;
    }
}

.promoLunes .containerProm .heading img{
    position: absolute;
    height: 110%;
    right: -2rem;
    top: 0;
    z-index: 3;
}

.promoLunes .containerProm .heading h1{
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
    width: max-content;
    z-index: 10000;
}
.promoLunes .containerProm .heading h2{
    color: #00eeff;
    font-size: clamp(1.8rem, 3vw, 2.1rem);
    text-shadow: 1px 2px 2px #000;
}
.promoLunes .containerProm .heading h3{
    padding: .5rem;
    margin-block: 1rem;
    border-radius: 15rem;
    background: linear-gradient(45deg, #13e200, rgb(30, 255, 0));
    width: max-content;
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
}
.promoLunes .containerProm .heading h3 span{
    font-weight: 900;
    color: #ffee00;
    font-size: clamp(3rem, 5vw, 4rem);
    background: #1d4777;
    margin-left: .5rem;
    border-radius: 50%;
    padding: .7rem;
    border: 3px solid #fff;
}
.promoLunes .containerProm .heading h3 span strong{
    font-weight: 500;
    font-size: 2rem;
}
.promoLunes .containerProm .longDescPromo{
    margin-block: 1rem;
    margin-bottom: auto;
}
.promoLunes .containerProm .longDescPromo p{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: #303030;
    font-weight: 600;
}

.promoLunes .containerProm .longDescPromo span{
    font-size: clamp(2rem, 3vw, 3rem);
    color: #333;
    font-weight: 900;
}

.promoLunes .containerProm .longDescPromo.hide{
    display: none;
}

.promoLunes .containerProm .link{
    margin-top: 1rem;
}

.promoLunes .containerProm .link a{
    padding: .5rem 1rem;
    border-radius: 10rem;
    background: #ffc609;
    color: #000000;
    font-weight: 900;
    font-size: 1.2rem;
}