/* CSS para o escritório carousel */

/* ================================== */
/* DESKTOP - Configuração base */
/* ================================== */

#escritorio-carousel {
    width: 100%;
    height: clamp(800px, 95vh, 1200px);
    min-height: clamp(700px, 85vh, 1000px);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.carousel-container {
    width: 100%;
    max-width: clamp(1400px, 95vw, 2200px);
    margin: 0 auto;
    position: relative;
    padding-left: clamp(40px, 8vw, 120px);
    padding-right: clamp(40px, 8vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: transparent;
}

.carousel-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: clamp(4px, 1vw, 8px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%; 
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background-color: transparent;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    background-color: transparent;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block !important;
    border-radius: clamp(4px, 1vw, 8px);
    max-width: 100%;
    max-height: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: #fff;
    border: 1px solid var(--preto-lavado);
    color: #222;
    cursor: pointer;
    padding: clamp(0.3rem, 1vw, 0.5rem);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.8s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    width: clamp(32px, 6vw, 60px);
    height: clamp(32px, 6vw, 60px);
}

.carousel-btn:hover {
    background-color: var(--amarelo-criativo);
    border-color: var(--amarelo-criativo);
    color: #fff;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.prev-btn {
    left: clamp(10px, 2vw, 30px);
}

.next-btn {
    right: clamp(10px, 2vw, 30px);
}

.carousel-btn svg {
    color: #222;
    width: clamp(12px, 2.5vw, 24px);
    height: clamp(12px, 2.5vw, 24px);
}

* {
    box-sizing: border-box;
}

#escritorio-carousel * {
    box-sizing: border-box;
}

#escritorio-carousel .carousel-slide {
    overflow: hidden;
}

#escritorio-carousel .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: clamp(4px, 1vw, 8px);
}

@media screen and (min-width: 820px){

     .prev-btn {
        left: clamp(-5px, -4vw, -10px);
    }
    
    .next-btn {
        right: clamp(-5px, -4vw, -10px);
    }
    
}

@media (min-width:2560px){
#escritorio-carousel{height:clamp(900px,90vh,1400px);min-height:clamp(800px,80vh,1200px)}
.carousel-container{max-width:min(90vw,2800px);padding-left:clamp(60px,6vw,150px);padding-right:clamp(60px,6vw,150px)}
.carousel-btn{width:clamp(50px,4vw,80px);height:clamp(50px,4vw,80px)}
.carousel-btn svg{width:clamp(18px,2vw,30px);height:clamp(18px,2vw,30px)}
.prev-btn{left:clamp(20px,3vw,40px)}
.next-btn{right:clamp(20px,3vw,40px)}
}

@media (min-width:769px) and (max-width:1024px){
#escritorio-carousel{height:clamp(350px,45vh,450px);min-height:clamp(330px,40vh,420px)}
.prev-btn{left:clamp(-8px,-2vw,-15px)}
.next-btn{right:clamp(-8px,-2vw,-15px)}
.carousel-btn{width:clamp(40px,4vw,50px);height:clamp(40px,4vw,50px)}
.carousel-btn svg{width:clamp(16px,2vw,20px);height:clamp(16px,2vw,20px)}
}

@media (max-width:768px){
#escritorio-carousel{height:clamp(280px,35vh,350px);min-height:clamp(250px,30vh,300px)}
.carousel-track{width:4700%}
.prev-btn{left:clamp(-5px,-1vw,-10px)}
.next-btn{right:clamp(-5px,-1vw,-10px)}
#escritorio-carousel .carousel-slide img{display:none!important}
#escritorio-carousel .carousel-slide:nth-child(1){background-image:url('../img/imagens_carrousssel_home_desktop/imagem1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(2){background-image:url('../img/imagens_carrousssel_home_desktop/imagem2.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(3){background-image:url('../img/imagens_carrousssel_home_desktop/imagem3.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(4){background-image:url('../img/imagens_carrousssel_home_desktop/imagem4.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(5){background-image:url('../img/imagens_carrousssel_home_desktop/imagem5.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(6){background-image:url('../img/imagens_carrousssel_home_desktop/imagem6.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(7){background-image:url('../img/imagens_carrousssel_home_desktop/imagem7.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(8){background-image:url('../img/imagens_carrousssel_home_desktop/imagem8.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(9){background-image:url('../img/imagens_carrousssel_home_desktop/imagem9.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(10){background-image:url('../img/imagens_carrousssel_home_desktop/imagem10.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(11){background-image:url('../img/imagens_carrousssel_home_desktop/imagem11.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(12){background-image:url('../img/imagens_carrousssel_home_desktop/imagem12.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(13){background-image:url('../img/imagens_carrousssel_home_desktop/imagem13.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
#escritorio-carousel .carousel-slide:nth-child(14){background-image:url('../img/imagens_carrousssel_home_desktop/imagem14.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:clamp(250px,30vh,300px);height:100%;opacity:1!important;visibility:visible!important}
}