/* ==========================================
                HERO
========================================== */

.hero{
    position:relative;
    height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

/* ==========================================
            HERO SLIDER
========================================== */

.hero-slider{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.slide{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity:0;
    transition:opacity 1.8s ease-in-out;
}

.slide.active{
    opacity:1;
}

.slide:nth-child(1){
    background-image:url("../assets/Fotos/Home/Banner 1.webp");
}

.slide:nth-child(2){
    background-image:url("../assets/Fotos/Home/Banner 2.webp");
}

.slide:nth-child(3){
    background-image:url("../assets/Fotos/Home/Banner 3.webp");
}

/* ==========================================
                OVERLAY
========================================== */

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.72) 38%,
        rgba(70,44,18,.45) 100%
    );

    z-index:1;
}

/* ==========================================
                CONTEÚDO
========================================== */

.hero-content{
    position:relative;
    z-index:5;

    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ==========================================
                TEXTO
========================================== */

.hero-text{
    width:520px;
}

.hero-text span{
    display:block;

    margin-bottom:25px;

    color:#B89661;

    font-size:15px;

    letter-spacing:5px;
}

.hero-text h1{
    margin-bottom:35px;

    font-family:"Parode",serif;

    font-size:68px;

    font-weight:300;

    line-height:1.05;

    color:#fff;
}

.hero-text p{
    max-width:470px;

    margin-bottom:40px;

    font-size:18px;

    line-height:1.8;

    color:#D4B98B;
}

/* ==========================================
            BAILARINO
========================================== */

.hero-dancer{
    position:absolute;

    bottom:-10px;
    left:53%;

    width:690px;

    transform:translateX(-50%);

    z-index:3;

    pointer-events:none;
}

/* ==========================================
                VÍDEO
========================================== */

.hero-video{
    position:relative;

    width:620px;

    z-index:2;
}

.hero-video iframe{
    width:100%;

    aspect-ratio:16 / 9;

    border:none;

    display:block;

    box-shadow:0 20px 50px rgba(0,0,0,.35);
}
/* ==========================================
            SOBRE (HOME)
========================================== */

.sobre{
    position:relative;
    padding:140px 0;
    background:#fff;
    overflow:hidden;
}

.sobre::before{
    content:"";
    position:absolute;
    inset:0;

    background:url("../assets/Fotos/Global/Pattern.webp") repeat;
    background-size:1500px;

    opacity:.08;

    z-index:0;
}

.sobre .container{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sobre-img{
    width:45%;
    position:relative;
}

.sobre-img img{
    width:100%;
    max-width:450px;
}

.sobre-text{
    width:50%;
}

.sobre-text span{
    display:block;

    margin-bottom:20px;

    font-size:14px;

    letter-spacing:4px;

    color:#666;
}

.sobre-text h2{
    margin-bottom:35px;

    font-family:"Parode",serif;

    font-size:78px;

    font-weight:300;

    line-height:1;

    color:#555;
}

.sobre-text .btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:50px;

}


.sobre-text strong{
    color:#444;
}
/* ==========================================
            PREMIAÇÃO
========================================== */

.premiacao{
    padding:120px 0;
    background:#fff;
    text-align:center;
}

.premiacao span{
    display:block;

    margin-bottom:20px;

    font-size:15px;

    letter-spacing:4px;

    color:#666;
}

.premiacao h2{

    margin-bottom:70px;

    font-family:"Parode",serif;

    font-size:72px;

    font-weight:300;

    color:#5a5a5a;
}

/* ==========================================
                GALERIA
========================================== */

.gallery{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-bottom:60px;

}

.gallery img{

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    border:1px solid #e5e5e5;

    cursor:pointer;

    transition:.35s;

}

.gallery img:hover{

    transform:scale(1.04);

}

.premiacao .btn-outline{

    margin-top:10px;

}/* ==========================================
                LIGHTBOX
========================================== */

.lightbox{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.88);

    z-index:9999;

    animation:fadeIn .35s ease;

}

.lightbox.ativo{

    display:flex;

}

.lightbox img{

    max-width:85vw;
    max-height:85vh;

    object-fit:contain;

    border-radius:4px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

/* ==========================================
            BOTÃO FECHAR
========================================== */

.close{

    position:absolute;

    top:30px;
    right:40px;

    width:45px;
    height:45px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:none;

    background:none;

    cursor:pointer;

    font-size:50px;

    color:#fff;

    transition:transform .3s,color .3s;

    transform-origin:center;

}

.close:hover{

    color:#B89661;

    transform:rotate(90deg);

}

/* ==========================================
                SETAS
========================================== */

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:#fff;

    font-size:60px;

    cursor:pointer;

    padding:20px;

    transition:.3s;

}

.prev:hover,
.next:hover{

    color:#B89661;

}

.prev{

    left:40px;

}

.next{

    right:40px;

}

/* ==========================================
            ANIMAÇÃO
========================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}