.sleepBanner{
    position: fixed;
    inset: 0;
    min-height: 100svh;
    z-index: 400;
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: .3rem;
    font-family: system-ui, sans-serif !important;
    padding: .5rem 1rem;
    width: 100%;
    background: url(/images/resources/bgSleeping.png) no-repeat;
    background-position: 25% top;
    background-size: cover;
    visibility: hidden;
    pointer-events: none;
}

.sleepBanner.active{
    visibility: visible;
    pointer-events: all;
}

.sleepBanner .logoSleep{
    width: clamp(3.5rem, 5vw, 10rem);
    z-index: 3;
    filter: drop-shadow(0 5px 3px #000000);
    margin-left: 50%;
    transform: translateX(-50%);
}


.sleepBanner .textSleep001{
    color: #00ffff;
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    font-weight: 400;
    margin-left: 50%;
    transform: translateX(-50%);
    width: max-content;
    filter: drop-shadow(0 0 5px #0099ff);
}

.sleepBanner .textSleep002{
    color: #ff9900;
    font-size: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(45deg, #222, #333);
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: .3rem .5rem;
    border-radius: 5rem;
    border: 1px solid #444;
    box-shadow: 0 10px 12px rgba(0,0,0, .5);
}
.sleepBanner .textSleep003{
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 500;
    text-shadow: 0 2px 3px #000;
}

.sleepBanner .horarioSleep{
    display: flex;
    background:linear-gradient(45deg, rgba(0, 36, 41, 0.815), rgba(0, 156, 156, 0.2));
    border: 1px solid #4e7c7c;
    padding: .5rem;
    border-radius: .7rem;
    flex-direction: column;
    row-gap: .5rem;
    backdrop-filter: blur(3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.815);
    min-height: 12svh;
    width: 100%;
}

.sleepBanner .horarioSleep i{
    font-size: clamp(.9rem, 2vw, 1rem);
    color: #ff9900;
    text-shadow: 0 1px 2px #000;
}
.sleepBanner .horarioSleep .horarioDays{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .5rem;
    width: 100%;
    height: 100%;
}
.sleepBanner .horarioSleep .horarioDays .dayCont{
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    align-items: center;
    background: rgba(18, 19, 27, 0.671);
    padding: .5rem;
    border-radius:1rem;
    font-size: clamp(.7rem, 2vw, 1.1rem);
    border: 1px solid #1e4264;
}
.sleepBanner .horarioSleep .horarioDays .dayCont p{
    margin-bottom: auto;
    color: #ff9900;
}
.sleepBanner .horarioSleep .horarioDays .dayCont span{
    color: #fff;
}

.sleepBanner .textSleep004{
    color: #fff;
    font-weight: 800;
    font-size: clamp(.7rem, 2vw, 1rem);
}

.sleepBanner .linksSleep{
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
}
.sleepBanner .linksSleep a{
    color: #c2c2c2;
    padding: .2rem .5rem;
    border-radius: .5rem;
    background: #222;
    font-size: clamp(.7rem, 2vw, .9rem);
    border: 1px solid #666;
}
.sleepBanner .linksSleep a:hover{
    background: #444;
    color: #fff;
    border: 1px solid #fff;
}

.sleepBanner .btnSleep{
    width: max-content;
    margin-top: auto;
    margin-bottom: 1rem;
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: clamp(1.5rem, 2vw, 2rem);
    padding: 0 2rem;
    border-radius: 8rem;
    cursor: pointer;
    background: #ff4500;
    color: #ffffff;
    border: 1px solid #fff;
}

.stopScroll.active{
    overflow: hidden;
}