@charset "utf-8";

/* *********************************** */
/*      RESETS E ESTILOS PADRAO        */
/* *********************************** */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; }
ul { list-style-type: disc; list-style-position: inside; }
ol { list-style-type: decimal; list-style-position: inside; }
button, input, select, textarea{ margin: 0; }
img, embed, iframe, object, video{ height: auto; max-width: 100%; border: 0; margin: 0; padding: 0; }
audio { max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; text-align: left; }
html { font-size: 62.5%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; text-rendering: optimizeLegibility; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
article, aside, figure, footer, header, hgroup, section{ display: block; }
body, button, input, select, textarea{ font-family: var(--font-1); }
code, pre{ -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; }
body { color: var(--black); background-color: white; font-size: 1.5rem; font-weight: 400; line-height: 1.5; -webkit-overflow-scrolling: touch; margin: 0;  }
a { cursor: pointer; text-decoration: none; color: inherit; }
a strong { color: currentColor; }
a:hover{ color: inherit; }
/* code { background-color: whitesmoke; color: #ff3860; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; } */
hr { background-color: whitesmoke; border: none; display: block; height: .2rem; margin: 1.5rem 0; }
input[type="checkbox"], input[type="radio"] { vertical-align: baseline; }
small { font-size: 0.875em; }
span { font-style: inherit; font-weight: inherit; }
strong { font-weight: bolder; }
fieldset { border: none; }
/* pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; } */
pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; }
table td, table th { text-align: left; vertical-align: middle; }

::-moz-selection { background: cornflowerblue; }
::selection { background: cornflowerblue; }

.centralizador { margin: 0 auto; }
/* Extra large screens (desktops, 4K, etc.) */
@media screen and (min-width: 1440px) {
    /* .centralizador { width: 128rem; } */
    .centralizador { width: 90%; }
}
/* Large screens (laptops, tablets grandes) */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .centralizador { width: 92%; max-width: 120rem; }
}
/* Medium screens (tablets, alguns laptops menores) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .centralizador { width: 90%; max-width: 96rem; }
}
/* Small screens (smartphones, dispositivos móveis) */
@media screen and (min-width: 0px) and (max-width: 767px) {
    .centralizador { width: 90%; max-width: 64rem; }
}

/* CSS PROJETO */
body{ background-color: var(--white); margin-top: var(--height-header); letter-spacing: .06em; }

.swiper{ height: 100%; width: 100%; }
.swiper .swiper-button-next,
.swiper .swiper-button-prev{ width: 4.2rem; height: 4.2rem; border-radius: 50%; background-color: transparent; transition: var(--smooth); }
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after{ content: none; }
.swiper .swiper-button-next svg,
.swiper .swiper-button-prev svg{ font-size: 4rem; color: var(--apoio-500); transition: var(--smooth); }
.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover{ background-color: var(--apoio-500); }
.swiper .swiper-button-next:hover svg,
.swiper .swiper-button-prev:hover svg{ color: var(--white); }

.final-tiles-gallery .tile{ border-radius: var(--radius); }
.final-tiles-gallery .tile img.item{ padding: 0; }

.title{
    h1{ 
        font-size: var(--clamp-text-lg); line-height: 1; font-weight: 400;  font-family: var(--font-2);
        
        &:has(+ h2){ margin-bottom: 2rem; }
    }
    h2{ 
        font-size: var(--clamp-text-xs); line-height: 1.3; font-weight: 400; 
        
        &:has(+ h3, + h1){ margin-bottom: 2rem; }
    }
}
.text{
    p{ 
        font-size: var(--clamp-text-xs); font-weight: 300;

        b, strong{ font-weight: 600; }
    }
}
.text-edit{
    --border-color: var(--base-300);

    h1 { font-size: 3.2rem; font-weight: 700; margin: 2rem 0 1rem; line-height: 1.2; }
    h2 { font-size: 2.4rem; font-weight: 700; margin: 2.14em 0 0; line-height: 1.3; font-family: var(--font-1); }
    h3 { font-size: 2.0rem; font-weight: 700; margin: 2.14em 0 0; line-height: 1.4; font-family: var(--font-1); }
    h4 { font-size: 1.8rem; font-weight: 700; margin: 2.14em 0 0; line-height: 1.4; font-family: var(--font-1); }
    h5 { font-size: 1.6rem; font-weight: 700; margin: 2.14em 0 0; line-height: 1.5; font-family: var(--font-1); }
    h6 { font-size: 1.4rem; font-weight: 700; margin: 2.14em 0 0; text-transform: uppercase; line-height: 1.5; font-family: var(--font-1); }
    p  { font-size: 2.1rem; line-height: 1.5; margin: 1.95em 0 0; padding: 0 !important; }
    hr { border: none; border-top: 0.1rem solid var(--border-color); margin: 2.14em 0; }
    time { font-size: var(--clamp-text-xx); color: var(--base-500); display: block; margin: 0.5rem 0; }
    .share-title{ font-size: 1.1rem; font-family: var(--font-1); color: var(--base-950); margin: 1rem 0 0; text-transform: uppercase; }
    .share-list{ margin-top: .5rem; padding-left: 0; gap: calc(var(--gap) / 2); }
    .author { font-size: var(--clamp-text-xx); font-family: var(--font-1); color: var(--base-500); margin: 0.5rem 0; }
    a {
        color: var(--link-color); text-decoration: underline; transition: var(--smooth);

        &:hover { color: var(--base-950); }
    }
    strong { font-weight: 700; }
    em { font-style: italic; }
    ul, ol {
        font-size: 2.1rem; margin: 1.95em 0; padding-left: 2rem;

        li { margin-bottom: 0.5rem; }
    }
    ol { list-style: decimal; }
    ul { list-style: disc; }
    blockquote {
        font-size: 2.1rem; font-style: italic; margin: 1.95em 0 0; padding-left: 1.5rem; border-left: 0.4rem solid var(--border-color); 

        p { margin: 0; }
        cite { display: block; font-size: 1.8rem; font-family: var(--font-1); font-style: normal; margin-top: 0.5rem; color: var(--base-500); }
    }    
    table { 
        width: 100%; border-collapse: collapse; margin: 1.95em 0 0; font-size: var(--clamp-text-xx); 
    
        caption { font-size: var(--clamp-text-xx); font-family: var(--font-1); font-weight: 600; margin-bottom: 1.5rem; text-align: left; }
        th, td { padding: 0.8rem; border: 0.1rem solid var(--border-color); font-size: 1.8rem; font-family: var(--font-1); text-align: left; }
        th { background: var(--base-100); font-weight: 600; }
    }
    pre { background: var(--base-100); padding: 1.5rem; border-radius: var(--radius); overflow-x: auto; margin: 1.5rem 0; font-size: var(--clamp-text-xx); }
    code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: var(--clamp-text-xx); }
    figure { 
        margin: 2rem 0; 

        img { max-width: 100%; height: auto; border-radius: var(--radius); }
        figcaption { font-size: var(--clamp-text-xx); color: var(--base-500); font-family: var(--font-1); margin-top: 0.5rem; text-align: center; }
    }
}

.glass{
    background: rgba(var(--white-rgb), .5);
    border: .1rem solid rgba(var(--white-rgb), .1);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}


/* HEADER ************************************************************** */
header.w3-header{
    position: fixed; top: 0; left: 0; width: 100%; padding: 2.5rem 0; transition: var(--smooth); z-index: 10;

    .content{ 
        display: flex; justify-content: space-between; align-items: center; gap: 4rem;
    
        .logo a{
            font-size: 0;

            img{ height: 8rem; }
        }
        nav{
            flex-grow: 1;

            .btn-menu{ display: none; }
            ul.menu{
                display: flex; justify-content: flex-end; align-items: center; list-style: none;

                li{
                    &:is(.featured){ 
                        margin-left: 1rem;

                        a{ border: .3rem solid var(--black); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 1rem; &:hover{ background-color: var(--black); color: var(--white); } }
                    }
                    a{ 
                        color: var(--base-700); font-size: 1.7rem; font-weight: 500; padding: .5rem 1rem; transition: var(--smooth); text-transform: uppercase;
                        
                        &:hover{ color: var(--apoio-green); }
                    }
                } 
            }
        }
    }
}
header.topo-float{
    background-color: var(--white); padding: 1.5rem 0;

    .content{
        .logo a{
            img{ height: 6rem; }
        }
    }
}


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

}
@media screen and (min-width: 1024px) and (max-width: 1439px) {

}
@media screen and (min-width: 1024px) and (max-width: 1120px) {
    header.w3-header{
        .content{
            .logo a{
                img{ height: 2.4rem; }
            }
            nav{
                ul.menu{
                    li a{ font-size: 1.5rem; }
                }
            }
        }
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

}
@media screen and (min-width: 0px) and (max-width: 767px) {
    header.w3-header{

        .content{ 
            gap: 2rem;
        
            
            .logo a{
                img{ height: 4.4rem; }
            }
            nav{
                position: relative; order: 1; max-width: 5rem;

                .btn-menu{ display: flex; justify-content: center; align-items: center; height: 5rem; width: 5rem; min-width: 5rem; border-radius: var(--radius); border: .2rem solid var(--base-400); }

                ul.menu{
                    flex-direction: column; justify-content: center; align-items: flex-end; position: fixed; top: 0; right: -100%; width: 90%; height: 100dvh; background-color: var(--white); padding: 4rem; box-shadow: none; transition: var(--smooth);

                    .btn-menu{ position: absolute; top: 3rem; right: 5rem; }
                    li{ transform: translateX(1.5rem); opacity: 0; transition: var(--smooth); }
                    li a{ font-size: 3rem; padding: 1rem; text-align: right; line-height: 1.1; display: inline-block; }
                }
                ul.menu.open{ 
                    right: 0; box-shadow: var(--shadow-lg); 
                    
                    li{ transform: translateX(0); opacity: 1; }
                    li:nth-of-type(1){ transition-delay: 200ms; }
                    li:nth-of-type(2){ transition-delay: 300ms; }
                    li:nth-of-type(3){ transition-delay: 400ms; }
                    li:nth-of-type(4){ transition-delay: 500ms; }
                    li:nth-of-type(5){ transition-delay: 600ms; }
                    li:nth-of-type(6){ transition-delay: 700ms; }
                }
            }
            .cta{ display: none; }
        }
    }
}

/* HEADER ************************************************************** */


/* HOME ************************************************************** */
section.w3-home-hero{
    

    &::before{
        content: ''; display: block; width: 100%; height: auto; aspect-ratio: 16/9; position: absolute; top: 0; left: 0; background: url('../img/bg_pattern_1.svg') no-repeat center; background-size: contain; z-index: -1; opacity: .3;
        /* content: ''; display: block; width: 100%; height: auto; aspect-ratio: 16/9; position: absolute; top: 0; left: 0; background: url('../img/bg_aqua_1.svg') no-repeat center; background-size: cover; z-index: -1; opacity: .5; */
    }

    .content{
        margin: var(--gap) 0;

        .txt{ 
            border-radius: var(--radius); padding: 4rem; flex: 1 1 100%;
            
            .title{
                h1, h2{ 
                    color: var(--black); 
                
                    &:is(h2){ margin-top: 4rem; }
                }
            }
        }
        .midia{
            aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; font-size: 0; position: relative; flex-grow: 1;

            &::before{ content: ''; display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: url('../img/pattern_dot.png') repeat; z-index: 1; }
            img,
            video{ height: 100%; width: 100%; object-fit: cover; }
        }
    }

    @media screen and (min-width: 1440px) {
        
    }
    @media screen and (min-width: 1024px) and (max-width: 1439px) {
        
    }
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            flex-direction: column;
            
            .txt{
                .title{ margin-bottom: 4rem; }
            }
            .midia{ aspect-ratio: 4/3; }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        &::before{
            aspect-ratio: 3/5;
        }
        .content{
            flex-direction: column;
            
            .txt{
                .title{ margin-bottom: 4rem; }
            }
            .midia{ aspect-ratio: 4/3; }
        }
    }
}

section.w3-home-categories{
    .content{
        .item-box{
            border-radius: var(--radius); padding: 2rem; aspect-ratio: 1/1; position: relative; transition: var(--smooth);

            &#bass{ background-color: var(--apoio-cyan); }
            &#drums{ background-color: var(--apoio-orange); }
            &#guitar{ background-color: var(--apoio-blue); }
            &#piano{ background-color: var(--apoio-hopbush); }
            &#singing{ background-color: var(--apoio-green); }
            &#ukulele{ background-color: var(--apoio-yellow); }
            &#saxophone{ background-color: var(--apoio-purple); }
            &#violin{ background-color: var(--apoio-lime); }
            &#cello{ background-color: var(--apoio-coral); }
            &:is(#bass, #drums, #guitar, #piano, #singing, #ukulele, #saxophone, #violin, #cello){ &:has(a:hover){ background-color: var(--black); } }
            .icon svg{ font-size: var(--clamp-text-lg); color: var(--white); }
            h3, a > svg{ 
                color: var(--white); 
                
                &:is(h3){ font-size: var(--clamp-text-sm); font-weight: 600; text-transform: uppercase; }
                &:is(svg){ font-size: var(--clamp-text-xl); position: absolute; bottom: 2rem; right: 2rem; transform: rotate(-35deg); transition: var(--smooth); }
            }
            a:hover svg{ transform: rotate(0deg); }
        }
    }
    .txt{ 
        padding: var(--gap) 0; 
        
        .button{ justify-self: end; }
    }
    @media screen and (min-width: 1440px) and (max-width: 1639px) {
        .content{
            .item-box{
                h3, a > svg{
                    &:is(h3){ font-size: var(--clamp-text-xs); }
                }
            }
        }
    }
}

section.w3-home-classes{
    margin: var(--gap) 0;

    .content{
        .item-box{
            display: grid; align-items: stretch;

            .img{
                aspect-ratio: 3/5; max-width: 30rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; margin-bottom: -10rem; margin-left: 5rem; z-index: 1;

                img{ height: 100%; width: 100%; object-fit: cover; }
            }
            .txt{
                background-color: var(--white); border: .3rem solid var(--black); padding: 13rem 3rem 3rem; border-radius: var(--radius); display: flex; height: auto; flex-direction: column; justify-content: stretch; align-items: baseline; min-height: 65.5rem;

                .title h2{ text-transform: uppercase; font-weight: 700; }
                .text{ margin: var(--gap) 0; flex-grow: 1; }
                a.btn{ margin-top: 4rem; }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            .item-box{
                .img{ aspect-ratio: 3/3.5; }
                .txt{ min-height: auto; }
            }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            .item-box{
                .img{ aspect-ratio: 3/3.5; }
                .txt{ min-height: auto; }
            }
        }
    }
}

section.w3-home-curriculum{
    padding: 6rem 0; background: url('../img/bg_pattern_2.svg') no-repeat center bottom; background-size: contain;
    /* padding: 6rem 0; background: url('../img/bg_aqua_4.svg') no-repeat center bottom; background-size: contain; */

    .content{
        .img{
            ul{
                li{
                    --height-img: 30rem; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; background-color: var(--white);

                    &:nth-child(1),
                    &:nth-child(5){ height: calc(var(--height-img) / 1.4); z-index: 0; }
                    &:nth-child(2),
                    &:nth-child(4){ height: calc(var(--height-img) / 1.2); z-index: 1; }
                    &:nth-child(3){ height: var(--height-img); z-index: 2; }

                    &:nth-child(1){ right: -4rem; }
                    &:nth-child(2){ right: -2rem; }
                    &:nth-child(4){ left: -2rem; }
                    &:nth-child(5){ left: -4rem; }

                    img{ height: 100%; width: 100%; object-fit: cover; }
                }
            }
        }
        .txt{
            border-radius: var(--radius); padding: 4rem; margin-top: 4rem;

            .title{ margin: 0 0 4rem 0; }
        }
    }

    @media screen and (min-width: 0px) and (max-width: 767px) {
        padding-top: 0; background-size: cover;

        .content{
            .img{
                ul{
                    flex-direction: column; align-items: center;

                    li{
                        --height-img: 20rem; aspect-ratio: 5/3;

                        &:nth-child(1),
                        &:nth-child(5){ height: calc(var(--height-img) / 1.4); z-index: 0; }
                        &:nth-child(2),
                        &:nth-child(4){ height: calc(var(--height-img) / 1.2); z-index: 1; }
                        &:nth-child(3){ height: var(--height-img); z-index: 2; }

                        &:nth-child(1){ right: 0; bottom: -8rem; }
                        &:nth-child(2){ right: 0; bottom: -4rem; }
                        &:nth-child(4){ left: 0; top: -4rem; }
                        &:nth-child(5){ left: 0; top: -8rem; }
                    }
                }
            }
            .txt{ 
                .title{ margin-top: 0; }
            }
        }
    }
}

section.w3-home-facilities{
    background-color: var(--black); padding: 6rem 0; margin: 0 0 6rem;

    .content{
        align-items: center;

        .title{
            h1, h2{ color: var(--white); }
            a{ margin-top: 3rem; }
        }
        .img{
            align-items: center;

            .pic{ 
                font-size: 0; border-radius: var(--radius); max-width: 30rem; overflow: hidden; justify-self: end;
                
                img{ height: 100%; width: 100%; object-fit: cover; }
            }
        }
    }
}

section.w3-home-teachers{
    margin: 6rem 0; background: url('../img/bg_pattern_3.svg') no-repeat center right; background-size: contain;
    /* margin: 6rem 0; background: url('../img/bg_aqua_2.png') no-repeat center right; background-size: contain; */

    .content{
        .list{
            .list-item{
                display: flex; flex-direction: column; align-items: center;

                &:first-of-type{ justify-content: center; }
                .title a{ margin-top: 3rem; }
                .img{ 
                    width: 70%; max-width: 30rem; aspect-ratio: 3/4.5; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; margin-bottom: -10rem; z-index: 1;

                    img{ width: 100%; height: 100%; object-fit: cover; } 
                }
                .txt{ 
                    border-radius: var(--radius); padding: 13rem 3rem 3rem; text-align: center;
                
                    h2{ font-size: var(--clamp-text-xs); font-weight: 600; }
                    ul.tags{
                        display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--gap) / 2); margin: 2rem 0;

                        li{ 
                            color: var(--white); font-size: 1.4rem; text-transform: uppercase; font-weight: 600; line-height: 1; text-align: center; padding: 1rem 1.4rem; border-radius: var(--radius); 
                        
                            &#bass{ background-color: var(--apoio-cyan); }
                            &#drums{ background-color: var(--apoio-orange); }
                            &#guitar{ background-color: var(--apoio-blue); }
                            &#piano{ background-color: var(--apoio-hopbush); }
                            &#singing{ background-color: var(--apoio-green); }
                            &#saxophone{ background-color: var(--apoio-purple); }
                            &#violin{ background-color: var(--apoio-lime); }
                            &#cello{ background-color: var(--apoio-coral); }
                        }
                    }
                    p{ font-size: var(--clamp-text-xx); }
                }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            .list{
                .list-item{
                    .img{ aspect-ratio: 3/4; }
                }
            }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        background: url('../img/bg_aqua_2_mobile.png') no-repeat center right; background-size: cover;
        .content{
            .list{
                .list-item{
                    &:first-of-type{ margin-bottom: 6rem; }
                    .img{ aspect-ratio: 3/3.5; }
                }
            }
        }
    }
}

section.w3-home-about{
    .content{
        margin: var(--gap) 0;

        .txt{ 
            background-color: var(--black); border-radius: var(--radius); padding: 4rem; flex: 1 1 100%; width: 60%;
            
            .img{ height: 20rem; margin-bottom: 10rem; img{ height: 100%; } }
            .title{
                h1, h2{ 
                    color: var(--white); 
                
                    &:is(h2){ margin-top: 4rem; }
                }
                a{ margin-top: 3rem; }
            }
        }
        .midia{
            border-radius: var(--radius); overflow: hidden; font-size: 0; position: relative; flex-grow: 1; width: 40%; aspect-ratio: 1/1;

            &::before{ content: ''; display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: url('../img/pattern_dot.png') repeat; z-index: 1; }
            img,
            video{ height: 100%; width: 100%; object-fit: cover; }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            flex-direction: column;
            
            .txt{
                width: 100%;
                
                .title{ margin-bottom: 4rem; }
            }
            .midia{ aspect-ratio: 4/3; width: 100%; }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            flex-direction: column;
            
            .txt{
                width: 100%;
                
                .title{ margin-bottom: 4rem; }
            }
            .midia{ aspect-ratio: 4/3; width: 100%; }
        }
    }
}

section.w3-home-applications.marquee { 
    margin: var(--gap) 0; display: flex; overflow: hidden;
    /* -webkit-mask-image: linear-gradient(90deg, transparent, var(--white) 20%, var(--white) 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--white) 20%, var(--white) 80%, transparent); */

    --marquee-speed: 40s;
    
    .marquee:hover .scroller{ animation-play-state: running; }
    .scroller{ display: flex; padding-right: var(--gap); gap: var(--gap); }
    .scroller.toLeft{ animation: scrollToLeft var(--marquee-speed) linear infinite; animation-delay: calc(var(--marquee-speed) / -1); }
    .scroller.toLeft:nth-child(2){ animation: scrollToLeft2 var(--marquee-speed) linear infinite; animation-delay: calc(var(--marquee-speed) / -2); }
    .marquee-list{ min-width: 288rem; }
    .marquee-item{ 
        display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--gap); background-color: var(--white); min-width: 30rem; width: 30rem; aspect-ratio: 1/1; padding: 3rem; border: .3rem solid var(--black); border-radius: var(--radius);

        .icon{
            height: 8rem; width: 8rem; min-width: 8rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--black); color: var(--white);

            svg{ font-size: 4rem; }
        }
        h4{ font-size: var(--clamp-text-xs); font-weight: 600; color: var(--black); text-align: left; line-height: 1; text-wrap-style: balance; }
    }
}
@keyframes scrollToLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes scrollToLeft2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

section.w3-home-cta{
    margin: var(--gap) 0;

    .content{
        border-radius: var(--radius); padding: 6rem;

        background: linear-gradient(68deg,var(--apoio-green),var(--apoio-cyan),var(--apoio-blue));
        background-size: 240% 240%;
        animation: gradient-animation 20s ease infinite;

        .title{
            color: var(--white); max-width: 96rem;

            a{ margin-top: 4rem; }
        }
    }
}
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* HOME ************************************************************** */


/* ABOUT ************************************************************** */
section.w3-about-school{
    margin: var(--gap) 0;

    .content{
        display: flex; gap: var(--gap); align-items: stretch;

        .txt{ 
            background-color: var(--white); width: 60%; padding: 4rem; display: grid; align-content: center; border: .3rem solid var(--black); border-radius: var(--radius);
        
            .title{ margin-bottom: 2rem; }
            .text{ 
                margin-top: 4rem; 
            
                h2{ 
                    font-size: var(--clamp-text-xs); margin-bottom: 1rem;
                
                    &:not(:first-of-type){ margin-top: 4rem; }
                }
            }
        }
        .img{ width: 40%; background-color: var(--black); border-radius: var(--radius); padding: 4rem; }
    }

    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            flex-direction: column;

            .txt, .img{ width: 100%; }
        }
    }
}

section.w3-about-features{
    .content{
        .item-box{
            padding: 3rem; border-radius: var(--radius); background-color: var(--white); text-align: center;

            &:nth-child(1){ background-color: var(--apoio-green); }
            &:nth-child(2){ background-color: var(--apoio-orange); }
            &:nth-child(3){ background-color: var(--apoio-blue); }

            .icon{
                width: 100%; max-width: 20rem; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--white); margin: 0 auto; display: grid; place-content: center;

                .lottie-icon{ width: 100%; max-width: 15rem; }
            }
            .txt{
                color: var(--white);

                h2{ font-weight: 600; text-transform: uppercase; margin-top: 3rem; font-size: var(--clamp-text-xs); }
                p{ margin-top: 2rem; font-size: var(--clamp-text-xx); }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            .item-box{
                .icon{
                    .lottie-icon{ max-width: 10rem; }
                }
            }
        }
    }
}

section.w3-about-more{
    .content{
        background-color: var(--apoio-yellow); border-radius: var(--radius); padding: 4rem;

        .img{ 
            width: 100%; max-width: 30rem; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;

            img{ height: 100%; width: 100%; object-fit: cover; }
        }
        .txt{
            color: var(--black);

            h2{ 
                font-weight: 600; text-transform: uppercase; font-size: var(--clamp-text-sm); margin-bottom: 4rem;
                
                &::after{ content: ''; display: block; width: 5rem; height: 1.3rem; background: url('../img/marker-1.svg') no-repeat center; background-size: contain; margin: 1rem 0; }
            }
            p{ margin-top: 2rem; font-size: var(--clamp-text-xs); }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            flex-direction: column; text-align: center;

            .txt{
                h2{
                    &::after{ margin: 1rem auto; }
                }
            }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            flex-direction: column; text-align: center;

            .txt{
                h2{
                    &::after{ margin: 1rem auto; }
                }
            }
        }
    }
}

section.w3-about-founders{
    margin: var(--gap) 0; padding: 6rem 0; position: relative;

    &::before{
        content: ''; display: block; width: 100%; height: auto; aspect-ratio: 16/9; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url('../img/bg_pattern_4.svg') no-repeat center; background-size: cover; z-index: -1; opacity: .3;
        /* content: ''; display: block; width: 100%; height: auto; aspect-ratio: 16/9; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url('../img/bg_aqua_3.svg') no-repeat center; background-size: cover; z-index: -1; */
    }

    .content{
        &>.title{ margin-bottom: 4rem; }
        .item-box{
            .img{
                aspect-ratio: 3/5; max-width: 30rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; margin-bottom: -10rem; margin-left: 5rem; z-index: 1;

                img{ height: 100%; width: 100%; object-fit: cover; }
            }
            .txt{
                color: var(--black); padding: 13rem 3rem 3rem; border-radius: var(--radius);

                .title h2{ text-transform: uppercase; font-weight: 700; }
                .text{ margin: var(--gap) 0; }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            .item-box{
                .img{ aspect-ratio: 3/3.5; }
            }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        &::before{
            aspect-ratio: 9/16; background-size: cover;
        }
        .content{
            .item-box{
                .img{ aspect-ratio: 3/3.5; }
            }
        }
    }
}

section.w3-about-facilities{
    margin: 6rem 0;

    .content{
        .title{
            margin-bottom: 4rem;
        }
        .text{ margin-bottom: 4rem; }
        .spaces{
            margin-bottom: var(--gap);

            .item-box{
                display: flex; align-items: center; gap: var(--gap); border: .3rem solid var(--black); border-radius: var(--radius); padding: 2rem;

                .img{ border-radius: calc(var(--radius) - 2rem); aspect-ratio: 3/4; min-width: 25rem; overflow: hidden; img{ height: 100%; width: 100%; object-fit: cover; } }
                .txt{
                    h3{ color: var(--black); font-size: var(--clamp-text-xs); font-weight: 600; text-transform: uppercase; line-height: 1; }
                    p{ margin-top: 2rem; font-size: var(--clamp-text-xx); }
                }
            }
        }
    }

    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            .spaces{
                .item-box{
                    flex-direction: column; margin-bottom: 4rem;
                    .txt{ padding: 0 2rem; }
                }
            }
        }
    }
}
/* ABOUT ************************************************************** */


/* COURSES ************************************************************** */
section.w3-courses-hero{ margin: 6rem 0; }

section.w3-courses-classes{
    .content{
        .item-box{
            display: flex; flex-direction: column; gap: var(--gap); border-radius: var(--radius); padding: 3rem;

            &#bass{ background-color: var(--apoio-cyan); }
            &#drums{ background-color: var(--apoio-orange); }
            &#guitar{ background-color: var(--apoio-blue); }
            &#piano{ background-color: var(--apoio-hopbush); }
            &#singing{ background-color: var(--apoio-green); }
            &#ukulele{ background-color: var(--apoio-yellow); }
            &#saxophone{ background-color: var(--apoio-purple); }
            &#violin{ background-color: var(--apoio-lime); }
            &#cello{ background-color: var(--apoio-coral); }            
            &#bass,
            &#ukulele{ .txt{ color: var(--black); } }

            .img{ 
                width: 100%; aspect-ratio: 4/3; border-radius: calc(var(--radius) - 2rem); overflow: hidden; 
            
                img{ height: 100%; width: 100%; object-fit: cover; }
            }
            .txt{
                display: grid; place-content: center; justify-items: baseline; color: var(--white);

                .title{
                    h1{ display: flex; align-items: center; gap: var(--gap); text-transform: capitalize; }
                }
                .text{
                    margin-top: 4rem;
                }
                a.btn{ margin-top: 4rem; }
            }
        }
    }

    @media screen and (min-width: 1024px) and (max-width: 1439px) {
        .content{
            .item-box{
                .img{ min-width: 33rem; }
            }
        }
    }
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .content{
            .item-box{
                .img,
                .txt{ width: 100%; }
            }
        }
    }
    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            .item-box{
                flex-direction: column;

                .img,
                .txt{ width: 100%; }
            }
        }
    }
}

section.w3-courses-levels{
    background-color: var(--black); margin: var(--gap) 0; padding: 6rem 0;

    .content{
        &>.title{ color: var(--white); margin-bottom: 4rem; }
        .item-box{
            background-color: var(--white); padding: 3rem; border-radius: var(--radius);

            &:nth-child(1){ background-color: var(--apoio-green); color: var(--black); }
            &:nth-child(2){ background-color: var(--apoio-orange); color: var(--black); }
            &:nth-child(3){ background-color: var(--apoio-blue); color: var(--black); }
            &:nth-child(4){ background-color: var(--apoio-hopbush); color: var(--black); }
            .icon{ 
                width: 14rem; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--white); margin: 0 auto 2rem; display: grid; place-content: center; 

                .lottie-icon{ height: 10rem; }
            }
            .title{
                h2{ text-align: center; font-size: var(--clamp-text-sm); font-family: var(--font-2); text-transform: uppercase; font-weight: 600; padding: 1rem; border-radius: var(--radius); background-color: var(--white); border: .3rem solid var(--black); }
            }
            .text{
                h3{ 
                    font-size: var(--clamp-text-xs); font-weight: 600; margin-top: 2rem; text-align: center; 
                
                    &::after{ content: ''; display: block; width: 5rem; height: 1.3rem; background: url('../img/marker-1.svg') no-repeat center; background-size: contain; margin: 0 auto 1rem; }
                }
                p{ margin-top: 1rem; font-size: var(--clamp-text-xx); font-weight: 500; line-height: 1.5; text-align: center; color: var(--white); }
            }
        }
    }
}
/* COURSES ************************************************************** */


/* PROGRAMS ************************************************************** */
section.w3-programs-title{ margin: 6rem 0; }

section.w3-programs-table{
    margin: 6rem 0 0;

    .item-box{
        display: flex; flex-direction: column; gap: var(--gap); justify-content: stretch; padding: 1rem; border-radius: var(--radius);

        &:nth-child(1){ background-color: var(--apoio-cyan); }
        &:nth-child(2){ background-color: var(--apoio-orange); }
        &:nth-child(3){ background-color: var(--apoio-blue); }
        &:nth-child(4){ background-color: var(--apoio-hopbush); }
        &:nth-child(5){ background-color: var(--apoio-coral); }
        &:nth-child(6){ background-color: var(--apoio-purple); }
        &:nth-child(7){ background-color: var(--apoio-yellow); }

        .title{
            h2{ font-size: var(--clamp-text-xs); text-align: center; font-weight: 600; text-transform: uppercase; padding: 1rem; background-color: var(--white); border: .3rem solid var(--black); border-radius: calc(var(--radius) - 1rem)}
        }
        .inner-box{
            border-radius: calc(var(--radius) - 1rem); padding: 2rem; flex-grow: 1; background-color: var(--white); border: .3rem solid var(--black);

            .method{
                h3{ font-size: var(--clamp-text-xs); font-weight: 600; padding: 1rem 2rem; border-radius: calc(var(--radius) - 2rem); background-color: var(--apoio-yellow); }
            }
            .txt{
                ul li{ 
                    font-size: var(--clamp-text-xx); margin-top: 2rem; 
                
                    &::before{ content: '✓'; color: var(--white); display: inline-block; margin-right: 1rem; font-size: 2.1rem; line-height: 1; height: 2.4rem; width: 2.4rem; border-radius: 50%; padding-left: .5rem; position: relative; top: .1rem; background-color: var(--apoio-green); }
                }
            }
        }
    }
}
/* PROGRAMS ************************************************************** */


/* CONTACT ************************************************************** */
section.w3-contact-header{ margin: 6rem 0 0; }

section.w3-contact-body{
    padding: 6rem 0; position: relative;

    &::before{
        content: ''; display: block; width: auto; height: 100%; max-height: 100dvh; aspect-ratio: 4/3.4; position: absolute; top: 0; left: 0; background: url('../img/bg_pattern_5.svg') no-repeat center; background-size: cover; z-index: -1; opacity: .3;
        /* content: ''; display: block; width: auto; height: 100%; max-height: 100dvh; aspect-ratio: 4/3.4; position: absolute; top: 0; left: 0; background: url('../img/bg_aqua_4.png') no-repeat center; background-size: cover; z-index: -1; */
    }

    .content{
        .address{
            display: flex; flex-direction: column;

            .address-info{
                border-radius: var(--radius); padding: 3rem;

                ul li:not(.w3-social li){ 
                    display: flex; align-items: center; font-size: var(--clamp-text-xs);
                
                    &:not(:last-of-type){ margin-bottom: var(--gap); }
                    .icon{ margin-right: var(--gap); }
                    .w3-social{ margin-top: 4rem; }
                    &>a{ transition: var(--smooth); &:hover{ color: var(--apoio-green); } }
                }
            }
            .address-map{ 
                margin-top: var(--gap); font-size: 0; flex-grow: 1;

                iframe{ border-radius: var(--radius); width: 100%; height: 100%; }
            }
        }
        .contact{
            background-color: var(--black); border-radius: 3rem; padding: 3rem;

            .contact-info{
                color: var(--white); margin-bottom: 3rem;

                h2{ font-size: var(--clamp-text-sm); }
                p{ font-size: var(--clamp-text-xs); }
            }
            #contact-form .item{
                label{ font-size: var(--clamp-text-xx); color: var(--white); margin-bottom: .6rem; }
                .item-field{
                    border: 0;
                
                    & :is(input, select){ padding: 0 2rem; }
                    & :is(textarea){ padding: 2rem; }
                }
            }
        }
    }
}
/* CONTACT ************************************************************** */


/* GENERIC PAGES ************************************************************** */
section.w3-inter-body{
    .content{ margin: 6rem auto; max-width: 96rem; }
}
/* GENERIC PAGES ************************************************************** */


/* RODAPÉ ************************************************************** */
footer.w3-footer{
    padding: 0 0 var(--gap);

    .content{
        padding: 4rem; margin-bottom: var(--gap); background-color: var(--black); border-radius: var(--radius);

        .item-box{
            color: var(--base-400);

            .logo{ font-size: 0; margin-bottom: 2rem; img{ height: 8rem; } }
            h1{ font-size: var(--clamp-text-xx); font-weight: 600; color: var(--white); text-align: left; line-height: 1.2; text-transform: uppercase; margin-bottom: 2rem; }
            h2{ font-size: var(--clamp-text-xs); font-weight: 500; color: var(--white); font-family: var(--font-2); margin-bottom: 3rem; }
            ul li{ margin: 1rem 0; } 
            ul li a:not(.btn){ transition: var(--smooth); font-size: var(--clamp-text-xx); font-weight: 500; color: var(--white); display: flex; align-items: center; &:hover{ color: var(--apoio-green); } svg{ color: inherit; margin-right: .5rem; } }
            ul.menu .btn-menu{ display: none; }
        }
    }
    .w3-footer-bottom{
        padding: 0 var(--gap);
        .signature{
            text-align: right;
            
            p{
                font-size: var(--clamp-text-xx); color: var(--black);
                svg{
                    height: 1rem;

                    .w3r, .letters{ fill:var(--black); transition: var(--smooth); }
                    &:hover .w3r{ fill:#404041; }
                    &:hover .letters{ fill:#006eb9; }
                }
            }
        }
        .copyright, .address{
            p{ font-size: var(--clamp-text-xx); color: var(--black); font-weight: 400; line-height: 1.5; a{ transition: var(--smooth); &:hover{ color: var(--apoio-green); } } }
        }
    }

    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{
            .item-box{
                text-align: center;

                h1{ text-align: center; }
                .w3-social{ justify-content: center; }
                ul li a:not(.btn){ justify-content: center; }
            }
        }
        .w3-footer-bottom{
            .signature,
            .copyright, .address{
                p{ text-align: center; }
            }
        }
    }
}
/* RODAPÉ ************************************************************** */


/* CSS PROJETO */