@import url("https://use.typekit.net/rta2bhv.css");
@import url("../css/tokens.css");


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: 'mr-eaves-xl-sans', sans-serif;
    font-size: 14px;
    color: var(--gray-90);
    text-decoration: none;
    line-height: 1.2rem;
}



html, body{
    height: 100vh;
    height: var(--doc-height);
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body.capa{
    background: var(--gray-90);
}

p{
    font-size: 1rem;
    color: var(--gray-90);
}

h1{ font-size: 3.4rem; line-height: 3.4rem;}
h2{ font-size: 3.0rem; line-height: 3.0rem;}
h3{ font-size: 2.6rem; line-height: 2.6rem;}
h4{ font-size: 2.2rem; line-height: 2.2rem;}
h5{ font-size: 1.8rem; line-height: 1.8rem;}
h6{ font-size: 1.4rem; line-height: 1.4rem;}




/* CAPA */

.bg-city{
    width: 100vw;
    height: -webkit-fill-available;
    background: var(--gray-90) url('../riodasostras/img/bg-capa.jpg');
    background-position: center center;
    background-size: cover;
    opacity: 0.6;
    position: absolute;
    top: 0;
    
}

.main-content-capa{
    max-width: 752px;
    min-height: -webkit-fill-available;
    height: -webkit-fill-available;
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-around;
}

.title-city{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

    .title-city p.gt-presents{
        color: var(--white);
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.6rem;
    }

    .title-city h1.name-city{
        font-size: 7rem;
        font-weight: var(--bolder);
        color: var(--white);
        text-align: center;
    }

    .title-city h6.state-country{
        color: var(--white);
        border-radius: var(--rounded);
        background: rgba(255, 255, 255, 0.2);
        font-weight: var(--light);
        padding: var(--p-sml);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    }

.info-options-city{
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
  gap: 16px;
}

    .info-weather-city{
        display: flex;
        flex-direction: row;
        gap: var(--s-mid);
        flex-shrink: 1;
    }

        .info-city{
            grid-area: info-city;
            background: var(--white);
            border-radius: var(--r-mid);
            padding: var(--p-uni-big);
            flex-grow: 1;
            flex-shrink: 3;
            
        }

            .info-city p.about-city{
                font-size: 1.2rem;
                line-height: 1.2;
                color: var(--gray-70);
            }

        .weather-city{
            grid-area: weather-city;
            flex-shrink: 0;
            flex-grow: 0;
            flex-basis: 197px;
            background: rgba(103, 103, 103, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: var(--r-mid);
            padding: var(--p-uni-big);
        }

    .options-city{
        display: grid;
        column-gap: 16px;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-flow: row;   
    }

        .options-city a{
            background: red;
            background: var(--white);
            padding: var(--p-uni-mid);
            display: flex;
            gap: 24px;
            flex-direction: column;
            font-weight: var(--bold);
            font-size: 1.2rem;
            border-radius: var(--r-mid);
        }

            .options-city a.atracoes{background: var(--blue-05);}
            .options-city a.hoteis{background: var(--salmon-05);}
            .options-city a.restaurantes{background: var(--orange-05);}
            .options-city a.bares{background: var(--purple-05);}
            .options-city img{
            width: 1.8rem; 
            }



/* MENU-INSIDE 
   Menu que fica fixo ao topo das páginas internas.         

*/


.menu-inside{
    background: var(--brand-90);
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
    
}

    .menu-inside > div{
        max-width: 1135px;
        margin: 0 auto;
        padding:8px 0;
        display: flex;
    flex-direction: row;
    justify-content: space-between;
    }

    ul.options-guide , ul.more-options-menu{
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 24px;
    }

    ul.options-guide > li a  , ul.more-options-menu > li a{
        padding: 8px 12px;
        color: var(--white);
        font-size: 1.2rem;
        font-weight: var(--bold);
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        border-radius: var(--rounded);
        transition: background 200ms ease;
    }

    ul.options-guide > li a.active{
        background: var(--brand-20);
        
    }

    ul.options-guide li a.active path {
        fill: var(--white);
        
    }

    ul.options-guide > li a:hover  , ul.more-options-menu > li a:hover{
        background: rgba(0, 0, 0, 0.3);
    }

    ul.options-guide li a svg , ul.more-options-menu > li a svg{
        width: 24px;
        height: 24px;
    }

    ul.options-guide li a svg path , ul.more-options-menu > li a path{
        fill: var(--brand-20);
    }

    ul.options-guide > li a.m-mais{
        display: none;
    }

    .close-more-menu{
        display: none;
    }


/* CONTENT ATRACOES 


*/


.main-content-inside{
 display: flex;
 height: 4000px;
 background: rgb(228, 228, 228);
 margin-top: var(--menu-height);
}

/* HERO CONTENT INSIDE

    */

.hero-big-atracoes{
    margin-top: var(--menu-height);
    width: 100%;
    background: url('../riodasostras/img/bg-capa.jpg');
    height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    background-size: cover;
    background-position: center center;
    
}

.hero-big-atracoes.after-scroll{
    position: fixed;
    z-index: 10;
    top: 0;
    height: 96px;
}


.hero-big-atracoes::before{
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 4.69%, rgba(0, 0, 0, 0.69) 62.50%);

    position: absolute;
    bottom: 0;
}


    .wrap-hero-big{
        max-width: var(--content-width);
        width: 100%;
        margin: var(--s-big) auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 3;
        flex-grow: 1;
        justify-content: space-around;
        padding: var(--s-big);
        
    }

    .wrap-hero-big.after-scroll{
        flex-direction: row;
        
        gap: 24px;
    }

    .wrap-hero-big > h1{
        font-size: 3.4rem;
        color: var(--white);
        text-align: center;
    }

    .wrap-hero-big > h1.after-scroll{
        font-size: 1.8rem;
        text-align: left;
        line-height: 1.1;
    }

    .nav-content{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--s-mid);
    }

    .nav-content li{
        flex-shrink: 0;
    }

    .nav-content > li a{
        border: 1px solid rgba(255, 255, 255, 0.50);
        background: rgba(255, 255, 255, 0.30);
        backdrop-filter: blur(7.5px);
        -webkit-backdrop-filter: blur(7.5px);
        padding: var(--s-mid);
        border-radius: var(--s-mid);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--white);
        font-size: 1.2rem;
        font-weight: var(--bold);
        min-height: 100px;
    }

    .nav-content li a.active , .nav-content > li a.active.after-scroll-nav{
        border: 1px solid rgba(255, 255, 255, 0.50);
        background: var(--white);
        color: var(--gray-90);
        
    }

    .nav-content > li a.active svg path{
        fill: var(--gray-90);
    }

    .nav-content > li a.after-scroll-nav{
        border-radius: var(--r-sml);
        min-height: auto;
        flex-direction: row;
        gap: 16px;
        align-items: center;
        width: auto;
        padding: 8px 16px;
        justify-content: center;
        font-size: 1rem;
    }

    .nav-content li a:hover{
        background: rgba(255, 255, 255, 0.2);
        transition: background 250ms ease;
        border: 1px solid rgba(255, 255, 255, 0.736);
    }




    /* SECTION

    */

    section{
        margin: 64px auto;
        max-width: var(--content-width);
        display: flex;
        flex-direction: column;
        gap: var(--s-big);
    }

    section:first-child{
        margin-top: 40px;
    }

    .title-section{
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

        .title-section > h4{
            color: var(--gray-90);
            font-size: 2rem;
            text-align: center;
        }

        .title-section > p{
            color: var(--gray-70);
            font-size: 1.2rem;
        }

    .itens-list{
        width: 100%;
        display: grid;
        gap: var(--s-mid);
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

        .itens-list .card-atracoes{
            max-width: 272px;
            height: 266px;
            border-radius: var(--r-mid);
            display: flex;
            align-items: end;
            position: relative;
            padding: var(--s-mid);
            overflow: hidden;
            background-position: center center;
            background-size: cover;
        }

        .itens-list .card-atracoes img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            object-fit: cover;
        }

        .itens-list .card-atracoes::before{
            position: absolute;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 4.69%, rgba(0, 0, 0, 0.69) 62.50%);
            content: "";
            min-height: 106px;
            width: 100%;
            bottom: 0;
            left: 0;
            z-index: 2;
        }

        .itens-list .card-atracoes h6{
            color: var(--white);
            position: relative;
            z-index: 6;
        }
    






        /*  
############################################################################
############################################################################
##############################  Até width 1170px#  #########################
############################################################################
############################################################################
############################################################################
*/

@media (max-width: 1170px)
{

    section{
        padding: 0 var(--s-mid);
    }

}








/*  
############################################################################
############################################################################
##############################  Até 800px#  ################################
############################################################################
############################################################################
############################################################################
*/

@media (max-width: 800px)
{

    /* CAPA */ 

    .main-content-capa{
        max-width: 100%;
        justify-content: space-between;
        padding: var(--s-mid);
    }

    .title-city h1.name-city{
        font-size: 5rem;
    }

    .info-weather-city{
        gap: var(--s-sml);
    }

    .info-options-city{
        gap: var(--s-sml);
    }

    .options-city{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-sml);
    }

    .options-city a{
        flex-grow: 1;
        flex-shrink: 1;
    }

    .info-city{
        padding: var(--p-uni-mid);

    }
    .weather-city{
        padding: var(--p-uni-mid);
        flex-basis: 114px;
        min-height: 200px;
    }
        .info-city p.about-city{
            font-size: 1rem;
        }

    /* MENU INSIDE */

    .menu-inside{
        bottom: 0;
        top: unset;
        padding: 8px;
    }

    .menu-inside > div{
        width: 100%;
        padding: unset;
    }

    ul.options-guide{
        gap: unset;
        justify-content: space-between;
        width: 100%;
    }

    ul.options-guide > li a {
        padding: 8px 8px;
        font-size: 1rem;
        flex-direction: column;
        gap: 8px;
        border-radius: var(--rounded);
        
    }

    ul.options-guide > li a.active{
        border-radius: var(--r-sml);
        
    }

    ul.more-options-menu{
        display: none;
        width: auto;
        position: absolute;
        background: var(--brand-90);
        padding: var(--s-mid);
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%);
        gap: 8px;
        border-radius: var(--r-sml);
        box-shadow: 0px 14px 16px -4px rgba(0, 0, 0, 0.5);
    }

    ul.options-guide > li a.m-mais{
        display: flex;
    }

    .close-more-menu{
        display: block;
    }

    .opened-menu-more{
        display: flex !important;
    }

   


    /* CONTENT ATRACOES */
    .hero-big-atracoes{
        margin-top: unset;
    }

    .hero-big-atracoes.after-scroll{
        height: 86px;
    }

    .wrap-hero-big.after-scroll{
        flex-direction: column;
        padding: 0;
        gap: 24px;
    }

    .wrap-hero-big > h1{
        font-size: 2.7rem;
        line-height: 1;
    }

    .wrap-hero-big > h1.after-scroll{
        display: none;
    }

    .wrap-hero-big.after-scroll{
        gap: 8px;
        width: 100%;
    }

    .nav-content{
       
    }

    .nav-content.after-scroll{
        overflow-y: scroll;
        overflow-x: visible;
        width: 100%;
        padding:0 var(--s-mid);
    }

    .nav-content.after-scroll::-webkit-scrollbar{
        width: 0px;
        height: 0px;
    }


    .nav-content li{
        flex-shrink: 1;
        flex-grow: 0;
    }

    .nav-content li a{
        border: 1px solid rgba(255, 255, 255, 0.50);
        background: rgba(255, 255, 255, 0.30);
        backdrop-filter: blur(7.5px);
        -webkit-backdrop-filter: blur(7.5px);
        padding: var(--s-mid);
        border-radius: var(--s-mid);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--white);
        font-size: 1.2rem;
        font-weight: var(--bold);
        min-height: 130px;
    }

    .nav-content  li a.after-scroll-nav{
        width: max-content;
        border-radius: var(--r-sml);
    }

    .nav-content li a.active , .nav-content > li a.active.after-scroll-nav{
        border: 1px solid rgba(255, 255, 255, 0.50);
        background: var(--white);
        color: var(--gray-90);
        
    }


    .main-content-inside{
        margin-top: unset;
        margin-bottom: var(--menu-height)
    }


    /* SECTION 

    */

    section{
        margin-bottom: var(--menu-height);
        width: 100%;
        margin-top: 40px;
        padding: var(--s-mid) ;
    }

    section:last-of-type{
        padding: var(--s-mid) var(--s-mid) calc(var(--menu-height) + 60px) var(--s-mid);
    }

    .title-section{
        gap: 2px;
    }

    .title-section > h4{
        font-size: 1.7rem;
        text-align: center;
    }

    .title-section > p{
        font-size: 1rem;
        text-align: center;
    }


    .itens-list{
        width: 100%;
        display: grid;
        gap: var(--s-mid);
        grid-template-columns: 1fr 1fr;
    }

    /* Card Atrações 

    */
        .itens-list .card-atracoes{
            width: 100%;
            height: 266px;
            border-radius: var(--r-mid);
            display: flex;
            align-items: end;
            position: relative;
            padding: var(--s-mid);
            overflow: hidden;
            background-position: center center;
            background-size: cover;
        }

        .itens-list .card-atracoes img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
        }

    

}


/*  
############################################################################
############################################################################
##############################  Até Height 710px#  #########################
############################################################################
############################################################################
############################################################################
*/

@media (max-height: 710px)
{

    .main-content-capa{
    }

    .title-city h1.name-city{
        font-size: 3.5rem;
    }

    .options-city a{
        gap: var(--s-sml);
    }

}