@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(--base-color); 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(--base-100); 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); }




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

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

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

            .btn-menu{ display: none; }
            ul.menu{
                display: flex; justify-content: flex-start; align-items: center; list-style: none;
                li a{ 
                    color: var(--base-700); font-size: 1.7rem; font-weight: 500; padding: .5rem 1rem; transition: var(--smooth); 
                    
                    &:hover{ color: var(--primary); }
                }
            }
        }
    }
}
header.topo-float{
    background-color: var(--white); padding: 1.5rem 0;
}


@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: 2.5rem; }
            }
            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{
    /* height: calc(100vh - var(--height-header)); */
    .centralizador{ height: 100%; }

    .content{
        height: calc(100% - var(--gap)); background: var(--white); background: linear-gradient(0deg,rgba(var(--white-rgb), 1) 0%, rgba(var(--base-100-rgb), 1) 50%, rgba(var(--base-100-rgb), 1) 100%); border-radius: 0 0 calc(var(--radius) * 3) calc(var(--radius) * 3); padding: var(--gap);

        .txt{
            h1{ 
                font-size: var(--clamp-text-lg); color: var(--base-700); font-weight: 800; text-wrap-style: balance;

                strong{
                    &:first-child{ color: var(--user-500); }
                    &:last-child{ color: var(--apoio-500); }
                }
            }
            h2{ font-size: var(--clamp-text-xs); color: var(--base-700); margin-top: 3rem; color: var(--base-500); line-height: 1.6; text-wrap-style: balance; }

            .hero-buttons{ margin-top: 4rem; }
        }
        .vid{ 
            text-align: center; font-size: 0; 
            
            img{ max-width: 64rem; } 
            .hero-video{ 
                aspect-ratio: 1/1; max-width: 64rem; position: relative;
                
                .gif{ position: absolute; filter: drop-shadow(-5px 2px 6px rgba(var(--base-800-rgb), 0.3)); height: 18rem; right: 0; top: 0; }
                img{ position: absolute; filter: drop-shadow(-5px 2px 6px rgba(var(--base-800-rgb), 0.3)); }
                img.card{ height: 10rem; right: 5%; bottom: 17%; }
                .icon{
                    position: absolute; box-shadow: var(--shadow); border-radius: var(--radius); background-color: var(--white); height: 6.4rem; width: 6.4rem; display: flex; justify-content: center; align-items: center; z-index: 1;
                    svg{ font-size: 3.2rem; color: var(--primary); }

                    &#icon1{ top: 4rem; left: 10rem; }
                    &#icon2{ top: 36%; left: -1rem; }
                    &#icon3{ bottom: 25%; left: 5rem; }
                }
                .video{
                    border-radius: 50%; height: 100%; width: 100%; overflow: hidden; box-shadow: var(--shadow);

                    video{ width: 100%; height: 100%; object-fit: cover; }
                }
            
            }
        }
        /* footer{ margin-top: 4rem; } */
    }
}

section.w3-home-aplicacoes{
    .content{
        margin: 6rem 0;

        .title{
            p{ font-size: var(--clamp-text-xs); text-transform: uppercase; font-weight: 500; color: var(--primary); text-align: left; line-height: 1; margin-bottom: 1rem; }
            h1{ font-size: var(--clamp-text-lg); font-weight: 700; text-align: left; line-height: 1; min-height: 11rem;

                span{ font-style: italic; color: var(--apoio-500); }
            }
        }
        .txt{
            h2{ font-size: var(--clamp-text-xs); color: var(--base-500); line-height: 1.4; margin-bottom: 2rem; text-wrap-style: balance; }
        }
    }
}

section.w3-home-ecommerce{
    /* background: linear-gradient(135deg, rgba(var(--apoio-100-rgb), 1) 0%, rgba(var(--user-100-rgb), 1) 100%); */ background-color: var(--user-600); padding: 8rem 0;

    .content{
        border-radius: var(--radius); overflow: hidden; margin: 0 auto; box-shadow: var(--shadow);

        .item-box{
            .icon{ height: 6.4rem; width: 6.4rem; border-radius: 50%; background-color: var(--user-200); display: flex; justify-content: center; align-items: center; margin-bottom: 2.4rem; svg{ font-size: 3.2rem; color: var(--user-500); } }
            .img{ height: 6.4rem; margin-bottom: 2.4rem; img{ height: 100%; } }
            .txt{
                h2{ font-size: var(--clamp-text-xs); font-weight: 700; text-align: left; line-height: 1.3; margin-bottom: 2rem; }
                p{ text-align: left; line-height: 1.7; margin-bottom: 2.4rem; font-size: 1.6rem; font-weight: 500; }
                ul li{
                    font-size: 1.6rem; font-weight: 500;

                    svg{ font-size: 2.4rem; color: var(--engage-500); margin-right: 1rem; }
                    &:not(:last-child){ margin-bottom: 1.5rem; }
                }
                .btn{ margin-top: 2.5rem; }
            }
            &:first-child{ background-color: var(--white); padding: 5rem; }
            &:last-child{ 
                background: linear-gradient(315deg, rgba(var(--apoio-500-rgb), 1) 0%, rgba(var(--user-500-rgb), 1) 100%); padding: 5rem; color: var(--white); 
                
                .txt li svg{ color: var(--white); }
            }
        }
    }
}

.bg-home{ background: url('../img/bg-lines.svg') repeat-y center; background-size: cover; }

section.w3-home-recursos{
    padding: 6rem 0;

    .content{
        .img{ text-align: center; font-size: 0; img{ width: 100%; max-width: 64rem; } }
        .list{
            display: flex; flex-direction: column; gap: var(--gap);
            
            .item-box{
                display: flex; align-items: center; gap: var(--gap); padding: 2rem; border: .1rem solid rgba(var(--base-200-rgb), .9); background-color: var(--white); border-radius: var(--radius) calc(var(--radius) * 4) var(--radius) calc(var(--radius) * 4);

                .icon{ min-width: 6.4rem; height: 6.4rem; width: 6.4rem; border-radius: 50%; background-color: var(--user-200); display: flex; justify-content: center; align-items: center; svg{ font-size: 3.2rem; color: var(--user-500); } }
                .txt{
                    h2{ font-size: var(--clamp-text-xs); font-weight: 700; text-align: left; line-height: 1.3; margin-bottom: 1rem; }
                    p{ text-align: left; line-height: 1.7; font-size: 1.6rem; font-weight: 500; }
                }
            }
        }
    }
}

section.w3-home-cases{
    padding: 6rem 0;

    header{
        text-align: center;

        h1{ font-size: var(--clamp-text-xl); font-weight: 700; text-align: center; line-height: 1; strong{ color: var(--apoio-500); } }
        p{ font-size: var(--clamp-text-xs); text-transform: uppercase; font-weight: 700; color: var(--base-500); text-align: center; line-height: 1.5; text-wrap-style: balance; max-width: 50%; margin: 4rem auto 0; strong{ color: var(--base-color); } }
        a{ margin-top: 2rem; }
    }
    .w3-cases{ 
        display: grid; gap: var(--gap); margin-top: 10rem; 
    
        .w3-case:nth-child(n+5){ display: none; }
        .w3-case{
            .txt{
                p:not(.case-type){ display: none; }
            }
        }
    }
}

section.w3-home-servicos{
    padding: 12rem 0; background-color: var(--white);

    header{
        h1{ font-size: var(--clamp-text-lg); font-weight: 700; text-align: left; line-height: 1; b{ font-weight: inherit; color: var(--apoio-500); } }
        p{ font-size: var(--clamp-text-xs); font-weight: 500; text-align: left; line-height: 1.5; text-wrap-style: balance; }
    }
    .content{
        margin-top: 6rem;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* flexível até 400px */
        gap: var(--gap); /* mantém o roxo (gap) */
        --max-width: calc(3 * 40rem + 2 * var(--gap)); /* 3 colunas + 2 gaps */
        max-width: var(--max-width);
        margin-left: calc(100% - var(--max-width));

        .item-box{
            padding: 3rem; max-width: 40rem; background-color: var(--white); border-radius: var(--radius); display: flex; flex-direction: column; gap: 2rem; border: .2rem solid var(--user-500); position: relative; overflow: hidden; cursor: default;

            .icon{ height: 6.4rem; width: 6.4rem; border-radius: 50%; background-color: var(--primary); display: flex; justify-content: center; align-items: center; z-index: 1; transition: var(--smooth); svg{ font-size: 3.2rem; color: var(--white); transition: var(--smooth); } }
            .txt{
                z-index: 1;

                h2{ font-size: var(--clamp-text-xs); font-weight: 700; text-align: left; line-height: 1.3; margin-bottom: 1rem; transition: var(--smooth); }
                p{ text-align: left; line-height: 1.7; font-size: 1.6rem; font-weight: 500; transition: var(--smooth); }
            }
            &::before{ content: ''; position: absolute; top: 3rem; left: 3rem; width: 6.4rem; height: 6.4rem; background-color: var(--primary); z-index: 0; transition: 250ms ease-in; border-radius: 50%; }
            
            &:hover{
                &::before{ top: 0; left: 0; transform: scale(15); }
                .icon{ transition-delay: .2s; background-color: var(--white); svg{ color: var(--primary); } }
                .txt{
                    h2{ transition-delay: .25s; color: var(--white); }
                    p{ transition-delay: .3s; color: var(--white); }
                }
            }
                
        }
    }

    @media screen and (min-width: 1024px) and (max-width: 1439px) {
        .content{ margin-left: 0; width: 100%; }
    }
}

section.w3-home-depoimentos{
    padding: 8rem; height: 70rem; position: relative;

    .content{
        position: relative; border-radius: calc(var(--radius) * 4); padding: 6rem; overflow: hidden; height: 100%; place-items: center;
         
        header{
            padding-left: 15%;

            h1{ font-size: var(--clamp-text-xl); font-weight: 700; line-height: 1; color: var(--white); }
            p{ margin: 4rem 0 0; color: var(--white); font-size: var(--clamp-text-xs); font-weight: 500; line-height: 1.5; text-wrap-style: balance; max-width: 80%; }
        }

        /* Background */
        .area{ background: var(--base-100); background: linear-gradient(45deg, var(--primary), var(--apoio-500)); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
        .circles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
        .circles li{ position: absolute; display: block; list-style: none; width: 2rem; height: 2rem; background: rgba(var(--white-rgb), 0.15); animation: animate 25s linear infinite; bottom: -15rem; }
        .circles li:nth-child(1){ left: 25%; width: 8rem; height: 8rem; animation-delay: 0s; }
        .circles li:nth-child(2){ left: 10%; width: 2rem; height: 2rem; animation-delay: 2s; animation-duration: 12s; }
        .circles li:nth-child(3){ left: 70%; width: 2rem; height: 2rem; animation-delay: 4s; }
        .circles li:nth-child(4){ left: 40%; width: 6rem; height: 6rem; animation-delay: 0s; animation-duration: 18s; }
        .circles li:nth-child(5){ left: 65%; width: 2rem; height: 2rem; animation-delay: 0s; }
        .circles li:nth-child(6){ left: 75%; width: 11rem; height: 11rem; animation-delay: 3s; }
        .circles li:nth-child(7){ left: 35%; width: 15rem; height: 15rem; animation-delay: 7s; }
        .circles li:nth-child(8){ left: 50%; width: 2.5rem; height: 2.5rem; animation-delay: 15s; animation-duration: 45s; }
        .circles li:nth-child(9){ left: 20%; width: 1.5rem; height: 1.5rem; animation-delay: 2s; animation-duration: 35s; }
        .circles li:nth-child(10){ left: 85%; width: 15rem; height: 15rem; animation-delay: 0s; animation-duration: 11s; }
    }
    .w3-depoimentos{
        position: absolute; top: 50%; right: 0; margin-right: calc(6rem + 10%); transform: translateY(-50%);

        .w3-depoimento{
            padding: 4rem; width: 100%; max-width: 40rem; height: 48rem; background-color: var(--white); border-radius: var(--radius); border: .1rem solid rgba(var(--base-200-rgb), .9); display: flex; flex-direction: column; justify-content: space-between; cursor: default;

            h4{ font-size: var(--clamp-text-xs); color: var(--base-400); font-weight: 500; text-align: left; line-height: 1; }
            blockquote p{ font-size: var(--clamp-text-xs); text-wrap-style: balance; color: var(--base-400); text-transform: uppercase; text-align: left; line-height: 1.3; font-weight: 700; b{ font-weight: inherit; color: var(--base-color); } }
            cite{
                display: block;
                
                h5{ font-size: var(--clamp-text-xs); font-style: normal; opacity: 1; font-weight: 600; text-align: left; line-height: 1.2; color: var(--base-color); }
                p{ font-size: clamp(1.4rem, var(--clamp-xs), 2rem); font-style: normal; font-weight: 500; text-align: left; line-height: 1; color: var(--base-400); }
            }
        }
    }

    @media screen and (min-width: 1024px) and (max-width: 1300px) {
        .content{
            header{ 
                padding-left: 0; padding-right: 15%; 
                
                p{ max-width: 100%; }
            }
        }
    }
}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-100rem) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

section.w3-home-blog{
    padding: 12rem 0 6rem;

    header{
        h1{ font-size: var(--clamp-text-lg); font-weight: 700; line-height: 1; b{ font-weight: inherit; color: var(--apoio-500); } }
        p{ font-size: var(--clamp-text-xs); font-weight: 500; line-height: 1.5; text-wrap-style: balance; margin-top: 2rem; }
    }
    .content{
        margin-top: 6rem;
        
        .item-box{
            background-color: var(--white); border-radius: var(--radius); display: flex; flex-direction: column; border: .1rem solid rgba(var(--base-200-rgb), .9); transition: var(--smooth);

            .img{ height: auto; width: 100%; aspect-ratio: 2/1; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; img{ width: 100%; height: 100%; object-fit: cover; place-items: center; transition: var(--smooth); } }
            .txt{
                padding: 3rem; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;

                .tag{ display: inline-flex; background-color: var(--primary); font-size: 1.2rem; font-weight: 500; text-transform: uppercase; text-align: center; line-height: 1; color: var(--white); border-radius: 3rem; padding: .7rem 1.2rem .6rem; }
                h2{ font-size: var(--clamp-text-xs); font-weight: 700; text-align: left; color: var(--base-500); line-height: 1.3; transition: var(--smooth); }
                p{ font-size: var(--clamp-text-xx); letter-spacing: .09em; font-weight: 300; text-align: left; line-height: 1.5; color: var(--base-500); flex-grow: 1; }
                .btn{ margin-top: 1rem; }
            }
            &:hover{
                .img img{ transform: scale(1.2); }
                .txt h2{ color: var(--base-color); }
            }
        }
    }
    footer{ margin-top: 4rem; }
}

section.w3-home-contato{
    padding: 6rem 0 0;
    background: linear-gradient(300deg,var(--primary), var(--apoio-500), var(--engage-500));
    background-size: 180% 180%;
    animation: gradient-animation 18s ease infinite;

    header{
        h1{ font-size: var(--clamp-text-lg); font-weight: 700; line-height: 1; color: var(--white); }
        .btn{ margin-top: 2rem; }
        p{ font-size: var(--clamp-text-xs); font-weight: 500; line-height: 1.5; text-wrap-style: balance; color: var(--white); margin-top: 6rem; }
    }
}
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@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) {

}
@media screen and (min-width: 0px) and (max-width: 767px) {
    section.w3-home-hero{
        .content{
            height: calc(100% - var(--gap)); background: var(--white); background: linear-gradient(0deg,rgba(var(--white-rgb), 1) 0%, rgba(var(--base-100-rgb), 1) 50%, rgba(var(--base-100-rgb), 1) 100%); border-radius: 0 0 calc(var(--radius) * 3) calc(var(--radius) * 3); padding: var(--gap);

            .txt{
                h1{ text-align: center; }
                h2{ text-align: center; }

                .hero-buttons{ margin-top: 3rem; justify-content: center; gap: 1rem; }
            }
            .vid{
                .hero-video{ 
                    .gif{ height: 9rem; }
                    img.card{ height: 6rem; right: 3%; bottom: 5%; }
                    .icon{
                        height: 5rem; width: 5rem;

                        svg{ font-size: 2.2rem; }
                        &#icon1{ top: 2rem; left: 2rem; }
                        &#icon3{ bottom: 20%; }
                    }
                
                }
            }
        }
    }

    section.w3-home-aplicacoes{
        .content{
            .title{
                p{ text-align: center; }
                h1{ text-align: center; min-height: 9rem; }
            }
            .txt{ text-align: center; }
        }
    }

    section.w3-home-recursos{
        .content{
            .list{
                .item-box{ align-items: flex-start; }
            }
        }
    }

    section.w3-home-cases{
        padding: 6rem 0;

        header{
            p{ max-width: 100%; }
        }
        .w3-cases{ margin-top: 6rem; }
    }

    section.w3-home-servicos{
        header{ gap: 1.5rem; }
        .content{
            grid-template-columns: repeat(1, 1fr);
            max-width: none;
            margin-left: 0;

            .item-box{ max-width: 100%; }
        }
    }

    section.w3-home-depoimentos{
        padding: 6rem 3rem; height: 100rem; position: relative;

        .content{
            padding: 4rem; place-items: flex-start;
            
            header{
                padding-left: 0%;

                h1{ font-size: var(--clamp-text-xl); font-weight: 700; line-height: 1; color: var(--white); }
                p{ margin: 4rem 0 0; color: var(--white); font-size: var(--clamp-text-xs); font-weight: 500; line-height: 1.5; text-wrap-style: balance; max-width: 80%; }
            }
        }
        .w3-depoimentos{
            top: auto; bottom: 0; right: 50%; margin-right:0; transform: translateY(0) translateX(50%); --height: 60rem;

            .w3-depoimento{
                width: 30rem;

                h4{ font-size: var(--clamp-text-xs); color: var(--base-400); font-weight: 500; text-align: left; line-height: 1; }
                blockquote p{ font-size: var(--clamp-text-xs); text-wrap-style: balance; color: var(--base-400); text-transform: uppercase; text-align: left; line-height: 1.3; font-weight: 700; b{ font-weight: inherit; color: var(--base-color); } }
                cite{
                    display: block;
                    
                    h5{ font-size: var(--clamp-text-xs); font-style: normal; opacity: 1; font-weight: 600; text-align: left; line-height: 1.2; color: var(--base-color); }
                    p{ font-size: clamp(1.4rem, var(--clamp-xs), 2rem); font-style: normal; font-weight: 500; text-align: left; line-height: 1; color: var(--base-400); }
                }
            }
        }
    }
}

/* HOME ************************************************************** */



/* CSS PADRÃO PARA PÁGINAS INTERNAS ************************************************************** */
section.w3-pages-header,
section.w3-inter-header,
section.w3-inter-body{
    padding: 4rem 0;

    .content{
        .title{
            h1{ font-size: var(--clamp-text-lg); font-weight: 700; line-height: 1.2; strong{ color: var(--apoio-500); } }
            h2{ font-size: var(--clamp-text-xs); text-transform: uppercase; font-weight: 500; color: var(--primary); line-height: 1; margin-bottom: 1rem; }
        }
        .title > p,
        .text{
            ul li,
            p{ font-size: var(--clamp-text-xs); font-weight: 500; color: var(--base-500); line-height: 1.5; text-wrap-style: balance; margin-bottom: 2rem; }
        }
    }
}

section.w3-cta-contato{
    margin: 4rem 0;
    
    .content{
        background: linear-gradient(300deg,var(--primary), var(--apoio-500), var(--engage-500)); background-size: 180% 180%; animation: gradient-animation 18s ease infinite; border-radius: calc(var(--radius) * 2);

        header{
            padding: 6rem 6rem 0;

            h1{ font-size: var(--clamp-text-lg); font-weight: 700; line-height: 1; color: var(--white); }
            .btn{ margin-top: 2rem; }
            p{ font-size: var(--clamp-text-xs); font-weight: 500; line-height: 1.5; text-wrap-style: balance; color: var(--white); margin-top: 6rem; }
        }
    }

    @media screen and (min-width: 0px) and (max-width: 767px) {
        .content{ header{ padding: 4rem 4rem 0; } }
    }
}

.w3-case{
    --d: 0s; /* default para o 1º do grupo (5n+1) */

    &:nth-child(5n + 2) { --d: calc(var(--step) * 1); }
    &:nth-child(5n + 3) { --d: calc(var(--step) * 2); }
    &:nth-child(5n + 4) { --d: calc(var(--step) * 3); }
    &:nth-child(5n + 5) { --d: calc(var(--step) * 4); }
    
    .img{ 
        aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; position: relative;
        
        img.cover{ 
            width: 100%; height: auto; display: block; filter: brightness(0.9) contrast(1.3); position: absolute; top: 0; left: 0;
        
            /* NÃO use shorthand animation aqui, para não zerar o delay */
            animation-name: floatY;
            animation-duration: 10s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: var(--d); /* cada card herda seu delay */
            will-change: transform;

        }
        .logo{ 
            height: 5rem; max-width: 26rem; position: absolute; left: 2rem; bottom: 2rem; background-color: var(--white); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow-sm);
            
            img{ height: 100%; width: auto; }
        }
    }

    .txt{
        padding: 2rem 0;

        h3{ font-size: var(--clamp-text-xs); color: var(--base-color); font-weight: 700; text-align: left; line-height: 1; text-transform: uppercase; font-style: italic; }
        p{ 
            text-align: left; line-height: 1.7; font-size: clamp(1.2rem, var(--clamp-xs), 1.6rem); font-weight: 500; margin-top: .5rem; color: var(--base-color);
            
            a{ 
                text-decoration: underline; transition: var(--smooth); 
            
                &:first-of-type:has(+ a)::after{ content: '|'; font-size: inherit; color: inherit; margin: 0 .4rem 0 .7rem; text-decoration: none; }
                &:hover{ color: var(--primary); }
            } 
        }
        .case-type{ display: inline-flex; background-color: transparent; font-size: 1.2rem; font-weight: 500; text-transform: uppercase; text-align: center; line-height: 1; color: var(--base-color); border: .1rem solid var(--base-300); border-radius: 3rem; padding: .7rem 1.2rem .6rem; }
    }

    @media screen and (min-width: 0px) and (max-width: 767px) {
        .img{
            img.logo{ height: 4rem; left: 2rem; bottom: 2rem; }
        }
    }
}
@keyframes floatY {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-40%); }
}
/* CSS PADRÃO PARA PÁGINAS INTERNAS ************************************************************** */



/* SOBRE ************************************************************** */
section.w3-sobre-header{
    margin: 4rem 0 4rem;

    .content{
        align-items: center;

        .txt{
            h1{ font-size: var(--clamp-text-lg); color: var(--base-700); font-weight: 800; text-wrap-style: balance; strong{ color: var(--user-500); } }
            h2{ font-size: var(--clamp-text-xs); color: var(--base-700); margin-top: 3rem; color: var(--base-500); line-height: 1.6; text-wrap-style: balance; }
        }
        .vid{ 
            text-align: center; font-size: 0; 
            
            img{ max-width: 64rem; } 
            .header-video{ 
                aspect-ratio: 1/1; max-width: 64rem; position: relative;
                
                .gif{ position: absolute; filter: drop-shadow(-5px 2px 6px rgba(var(--base-800-rgb), 0.3)); height: 18rem; right: 0; top: 0; }
                img{ position: absolute; filter: drop-shadow(-5px 2px 6px rgba(var(--base-800-rgb), 0.3)); }
                img.card{ height: 11rem; right: 5%; bottom: 17%; }
                .icon{
                    position: absolute; box-shadow: var(--shadow); border-radius: var(--radius); background-color: var(--white); height: 6.4rem; width: 6.4rem; display: flex; justify-content: center; align-items: center; z-index: 1;
                    svg{ font-size: 3.2rem; color: var(--primary); }

                    &#icon1{ top: 4rem; left: 10rem; }
                    &#icon2{ top: 36%; left: -1rem; }
                    &#icon3{ bottom: 25%; left: 5rem; }
                }
                .video{
                    border-radius: 50%; height: 100%; width: 100%; overflow: hidden; box-shadow: var(--shadow);

                    video{ width: 100%; height: 100%; object-fit: cover; }
                }
            
            }
        }
    }
}

section.w3-sobre-features{
    margin: 4rem 0; padding: 8rem 0; background: var(--white);

    .content{
        .item-box{
            padding: 4rem; background-color: var(--apoio-500); border-radius: calc(var(--radius) * 4); display: flex; flex-direction: column; gap: 2rem; text-align: center; background: linear-gradient(315deg, rgba(var(--apoio-400-rgb), 1) 0%, rgba(var(--apoio-500-rgb), 1) 100%);

            .icon{ height: 10rem; width: 10rem; margin: 0 auto 3rem; display: flex; justify-content: center; align-items: center; svg{ font-size: 10rem; color: var(--white); } }
            h3{ font-size: var(--clamp-text-xs); color: var(--white); font-weight: 700; line-height: 1.3; margin-bottom: 1rem; transition: var(--smooth); }
            p{ line-height: 1.7; font-size: 1.6rem; color: var(--white); font-weight: 500; transition: var(--smooth); }
                
        }
    }
}

section.w3-sobre-empresa{
    margin: 4rem 0; padding: 8rem 0;

    .content{
        .text{
            p{ margin-top: 4rem; }
        }
    }
}

section.w3-sobre-acessibilidade{
    margin-bottom: 8rem;

    .content{
        background-color: var(--white); padding: 6rem; border-radius: calc(var(--radius) * 2); text-align: center;

        .img{ position: relative; margin-top: -20rem; margin-bottom: 4rem; }
        .txt{
            .text{ margin-top: 4rem; }
        }
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    section.w3-sobre-header{
        .content{
            .txt{
                h1{ text-align: center; }
                h2{ text-align: center; }
            }
            .vid{
                .hero-video{
                    .gif{ height: 9rem; }
                    img.card{ height: 6rem; right: 3%; bottom: 5%; }
                    .icon{
                        height: 5rem; width: 5rem;

                        svg{ font-size: 2.2rem; }
                        &#icon1{ top: 2rem; left: 2rem; }
                        &#icon3{ bottom: 20%; }
                    }
                
                }
            }
        }
    }

    section.w3-sobre-acessibilidade{
        .content{ padding: 4rem; }
    }


}
/* SOBRE ************************************************************** */



/* PORTFÓLIO ************************************************************** */
div:has(.w3-case){
    --step: 2s; /* ajuste aqui o espaçamento entre inícios */
}
/* PORTFÓLIO ************************************************************** */



/* SOLUÇÕES ************************************************************** */
section.w3-solucoes-header{
    .content{
        .img{ 
            text-align: center; font-size: 0; 

            .header-solucoes{ 
                aspect-ratio: 5/3; max-width: 64rem; position: relative; margin: 4rem auto 0;
                
                .gif{ position: absolute; filter: drop-shadow(-5px 2px 6px rgba(var(--base-800-rgb), 0.3)); height: 18rem; right: -5rem; top: -5rem; }
                img.card{ position: absolute; height: 10rem; right: -15%; bottom: 17%; filter: drop-shadow(-5px 2px 6px rgba(var(--base-800-rgb), 0.3)); }
                .icon{
                    position: absolute; box-shadow: var(--shadow); border-radius: var(--radius); background-color: var(--white); height: 6.4rem; width: 6.4rem; display: flex; justify-content: center; align-items: center; z-index: 1;
                    svg{ font-size: 3.2rem; color: var(--primary); }

                    &#icon1{ top: 4rem; left: 10rem; }
                    &#icon2{ top: 36%; left: -3rem; }
                    &#icon3{ bottom: 25%; left: 5rem; }
                }
                .bg{
                    width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; font-size: 0;

                    img{ width: 100%; height: 100%; object-fit: cover; }
                }
            
            }
        }
        .text{
            margin: 2rem auto 0; max-width: 96rem;
        }
    }
}

section.w3-solucoes-body{
    background: var(--white); padding-top: 8rem;

    .content{
        .item-box{
            margin: 10rem 0;
            
            .txt{
                .title{ margin-bottom: 2rem; }
            }
            .img{
                font-size: 0; padding: 6rem; border-radius: calc(var(--radius) * 4); aspect-ratio: 5/3; position: relative;

                .icon{
                    position: absolute; box-shadow: var(--shadow); border-radius: var(--radius); background-color: var(--white); height: 6.4rem; width: 6.4rem; display: flex; justify-content: center; align-items: center; z-index: 1;

                    svg{ font-size: 3.2rem; color: var(--primary); }
                }
                img{ object-fit: contain; border-radius: var(--radius); }
            }

            &:nth-of-type(even){
                .txt{ order: 2; }
                .img{
                    .icon{
                        &#icon1{ top: 4rem; right: 10rem; }
                        &#icon2{ top: 36%; right: -3rem; }
                        &#icon3{ bottom: 25%; right: 5rem; }
                    }
                }
            }
            &:nth-of-type(odd){
                .img{
                    .icon{
                        &#icon1{ top: 4rem; left: 10rem; }
                        &#icon2{ top: 36%; left: -3rem; }
                        &#icon3{ bottom: 25%; left: 5rem; }
                    }
                }
            }
            &:nth-of-type(4n + 1){ .img{ background-color: var(--user-400); } }
            &:nth-of-type(4n + 2){ .img{ background-color: var(--engage-400); } }
            &:nth-of-type(4n + 3){ .img{ background-color: var(--primary); } }
            &:nth-of-type(4n + 4){ .img{ background-color: var(--apoio-400); } }

            &:first-of-type{ margin-top: 0; }
            &:last-of-type{ margin-bottom: 0; }
        }
    }
    & + section.w3-cta-contato{ background-color: var(--white); margin-top: 0; padding: 6rem 0; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.w3-solucoes-body{
        .content{
            .item-box{
                .img{ padding: 3rem; }
            }
        }
    }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    section.w3-solucoes-header{
        .content{
            .img{ 
                .header-solucoes{
                    .gif{ height: 12rem; right: 0; }
                    img.card{ height: 8rem; right: -4%; bottom: 1%; }
                    .icon{
                        &#icon1{ top: -2rem; left: 6rem; }
                        &#icon2{ left: -1rem; }
                        &#icon3{ bottom: -4%; left: 4rem; }
                    }
                }
            }
        }
    }

    section.w3-solucoes-body{
        .content{
            .item-box{
                gap: var(--gap);

                .txt{ padding: 0 2rem; }
                .img{ padding: 4rem; }
                &:nth-of-type(even){
                    .img{
                        .icon{
                            &#icon1{ top: 3rem; }
                            &#icon2{ right: -1rem; }
                            &#icon3{ bottom: 15%; }
                        }
                    }
                }
                &:nth-of-type(odd){
                    .txt{ order: 2; }
                    .img{
                        .icon{
                            &#icon1{ top: 3rem; }
                            &#icon2{ left: -1rem; }
                            &#icon3{ bottom: 15%; }
                        }
                    }
                }
            }
        }
    }
}
/* SOLUÇÕES ************************************************************** */



/* LOJA ************************************************************** */
section.w3-loja-header{
    .content{
        .title{
            h1 strong:first-of-type{ color: var(--primary); }
        }
    }
}

section.w3-loja-hero{
    padding-bottom: 8rem;

    .content{
        .vid{
            font-size: 0; height: 40rem; border-radius: calc(var(--radius) * 3); overflow: hidden;

            video{ height: 100%; width: 100%; object-fit: cover; }
        }
        .features{
            position: relative; margin: -6rem auto 0; background-color: var(--white); box-shadow: var(--shadow-lg); padding: 3rem; border-radius: var(--radius); max-width: 80%;

            ul li{
                h2{ font-size: var(--clamp-text-xx); font-weight: 600; color: var(--base-400); svg{ font-size: var(--clamp-text-sm); margin-right: 1rem; color: inherit; } }
                h3{ font-size: var(--clamp-text-xx); font-weight: 500; margin-top: 1rem; }
            }
        }
    }
}

section.w3-loja-sobre{
    padding: 0 0 8rem 0;

    .content{
        .item-box{
            background-color: var(--white); margin: 4rem 0; padding: 2rem; border: .1rem solid var(--base-200); border-radius: calc(var(--radius) * 3);

            .img{ 
                aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; justify-self: end;
            
                img{ height: 100%; width: 100%; object-fit: cover; }
            }
            &:last-of-type{ margin-bottom: 0; }
        }
    }
}

section.w3-loja-features{
    background-color: var(--white); padding: 8rem 0;

    .content{
        .recursos{
            padding: 4rem 1rem; overflow-y: hidden; position: relative;

            .mask{ display: flex; align-items: flex-end; justify-content: center; font-size: var(--clamp-text-xx); font-weight: 600; text-transform: uppercase; color: var(--base-500); position: absolute; bottom: 0; left: 0; width: 100%; height: 8rem; z-index: 1; background-color: transparent; }
            &:is(.box-recursos){
                .mask{ background: #ffffff; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%); }
            }

            ul{
                .lista{ 
                    background-color: var(--base-100); padding: 3rem 2rem 2rem; border-radius: calc(var(--radius) * 2); 
                    &:is(.destaque){ display: none; }
                    h2:not(li h2){ color: var(--white); font-weight: 500; background-color: var(--apoio-500); padding: 1rem; line-height: 1; border-radius: var(--radius); }
                }
                li.recurso{
                    background-color: var(--white); border-radius: calc(var(--radius) * 2); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--smooth); cursor: pointer;

                    &:hover{ 
                        background-color: var(--primary); 
                    
                        .txt{
                            .text{
                                h2{ color: var(--white); }
                            }
                        }
                    }
                    .img{ display: none; }
                    .txt{
                        padding: 2rem; display: flex; align-items: center; gap: var(--gap); height: 100%;

                        .icon{ 
                            display: inline-block; border-radius: var(--radius); background-color: var(--white); border: .2rem solid var(--user-400); aspect-ratio: 1/1; display: grid; place-items: center; height: 5rem;  position: relative;
                            
                            .lancamento{
                                height: 2rem; width: 2rem; border-radius: 50%; background-color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); font-size: 0; position: absolute; top: -1rem; right: -1rem;

                                svg{ color: var(--apoio-500); font-size: 2rem; }
                            }
                            svg{ font-size: var(--clamp-text-xs); color: var(--primary); }
                        }
                        .text{
                            h2{ font-size: var(--clamp-text-xs); color: var(--user-800); font-weight: 500; line-height: 1; margin-bottom: 0; transition: var(--smooth); }
                            p{ display: none; }
                        }
                    }
                    
                    &:is(.destaque){
                        .img{ 
                            display: block; aspect-ratio: 5/3; overflow: hidden; position: relative;
                            
                            .lancamento{ position: absolute; top: 2rem; left: 2rem; display: inline-flex; gap: .5rem; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; text-transform: uppercase; color: var(--white); background-color: var(--apoio-500); height: 2rem; border-radius: 1rem; padding: 0 1rem; border: .2rem solid var(--white); box-shadow: var(--shadow-sm); }
                            img{ width: 100%; height: 100%; object-fit: cover; } 
                        }
                        .txt{ 
                            height: auto;

                            .icon{ display: none; } 
                            .text{
                                h2{ font-size: var(--clamp-text-sm); color: var(--user-800); font-weight: 500; margin-bottom: 1rem; }
                                p{ display: initial; margin: 0; }
                            }
                        }
                    }
                }
            }

            .w3-popup{
                position: fixed; top: 0; left: 0; height: 100dvh; width: 100dvw; background-color: red; z-index: 999999;
                background: rgba(var(--white-rgb), 0.2);
                backdrop-filter: blur(.5rem);
                -webkit-backdrop-filter: blur(.5rem);

                .popup-content{
                    position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 76.8rem; background-color: var(--white); box-shadow: var(--shadow-lg); z-index: 1; padding: 3rem; border-radius: var(--radius);

                    .btn{ position: absolute; top: -2rem; right: -2rem; border-radius: 50%; box-shadow: var(--shadow-sm); }
                    .popup-img{
                        width: 100%; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem;
    
                        img{ width: 100%; height: 100%; object-fit: cover; }
                    }
                    .popup-txt{
                        text-align: center;
    
                        h2{ font-size: var(--clamp-text-xs); margin-bottom: 2rem; font-weight: 500; }
                        p{ font-size: var(--clamp-text-xx); }
                    }
                }
            }
        }
    }
}

section.w3-loja-cta{
    background: linear-gradient(315deg, rgba(var(--apoio-500-rgb), 1) 0%, rgba(var(--user-500-rgb), 1) 100%);

    .content{
        .title{
            h1, h2{ color: var(--white); }
        }
    }
}

section.w3-loja-faq{
    padding: 8rem 0;
    
    .content{
        .faq{
            background-color: var(--white); padding: 1rem; border-radius: calc(var(--radius) * 3); margin: 4rem auto 0; max-width: 120rem;

            ul li{
                padding: 3rem;

                &:not(:last-of-type){ border-bottom: .1rem solid var(--base-300); }
                h3{ font-size: var(--clamp-text-sm); font-weight: 500; color: var(--base-500); cursor: pointer; display: flex; justify-content: space-between; align-items: center; svg{ min-width: 2rem; transition: var(--smooth); } }
                p{  padding: 2rem 0; font-size: var(--clamp-text-xs); }
                &:first-of-type h3 svg{ transform: rotate(135deg); }
                &:not(:first-of-type) p{ display: none; }
            }
        }
    }
}

section.w3-loja-tray{
    background-color: var(--white);
    .content{
        .title{
            h1 strong{ color: var(--primary); }
            h2{ color: var(--base-500); }
        }
        .txt{
            margin-bottom: 2rem;

            .logo-tray{ margin-top: 2rem; height: 10rem; img{ height: 100%; } }
            .text{ margin-top: 2rem; }
        }
        .img{
            border-radius: calc(var(--radius) * 3); height: 100%; width: 100%; overflow: hidden;

            img{ width: 100%; height: 100%; object-fit: cover; }
        }
    }
}

section.w3-loja-cases{
    padding: 8rem 0;

    .content{
        .swiper-loja-cases{
            margin-top: 4rem;

            .swiper-slide{
                text-align: center;
                img{ height: 6rem; width: auto; }
            }
        }
    }
}

@media screen and (min-width: 1440px) {
    section.w3-loja-features{
        .content{
            .recursos.box-recursos{ max-height: 105rem; }
        }
    }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    section.w3-loja-features{
        .content{
            .recursos.box-recursos{ max-height: 90rem; }
        }
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.w3-loja-features{
        .content{
            .recursos.box-recursos{ max-height: 130rem; }
        }
    }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    section.w3-loja-hero{
        .content{
            .features{
                max-width: 90%;

                ul li{
                    text-align: center;

                    h3{ margin-top: 0; margin-bottom: 1rem; }
                }
            }
        }
    }

    section.w3-loja-features{
        .content{
            .recursos.box-recursos{ max-height: 170rem; }
        }
    }

    section.w3-loja-sobre{
        .content{
            .item-box{
                flex-wrap: wrap;

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

    section.w3-loja-faq{
        .content{
            .faq{
                ul li{ padding: 2rem; }
            }
        }
    }

}
/* LOJA ************************************************************** */



/* CONTATO ************************************************************** */
section.w3-contact-body{
    margin: 4rem 0 8rem;

    .address{
        .address-info{
            padding: 3rem 0;

            ul li:not(.w3-social li){ 
                display: flex; align-items: center; gap: var(--gap); font-size: var(--clamp-text-xs); font-weight: 500; line-height: 1; padding: 1rem 3rem; border-bottom: .1rem solid var(--base-300);

                .icon{
                    display: flex; justify-content: center; align-items: center; width: 4rem; min-width: 4rem; height: 4rem; border-radius: 50%; background-color: var(--user-200); font-size: 0; line-height: 1;

                    svg{ font-size: 2.4rem; color: var(--primary); }
                }
                a{ 
                    transition: var(--smooth); 
                    &:hover{ color: var(--primary); }
                }
            }
        }
        .address-map{
            font-size: 0;

            iframe{
                width: 100%; height: 20rem; border: none; border-radius: calc(var(--radius) * 2);
            }
        }
    }
    .contact{
        padding: 3rem; background-color: var(--white); border-radius: calc(var(--radius) * 2);

        .contact-info{
            h2{ font-size: var(--clamp-text-xs); font-weight: 500; text-transform: uppercase; color: var(--base-color); margin-bottom: 1rem; }
            p{ font-weight: 500; color: var(--base-500); line-height: 1.5; margin-bottom: 2rem; }
        }
    }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    section.w3-contact-body{
        margin: 0rem 0 4rem 0;

        .address{
            .address-info{
                padding: 0 0 3rem;

                ul li:not(.w3-social li){ padding: 1rem; }
            }
        }
        .contact{
            padding: 3rem; background-color: var(--white); border-radius: calc(var(--radius) * 2);

            .contact-info{
                h2{ font-size: var(--clamp-text-xs); font-weight: 500; text-transform: uppercase; color: var(--base-color); margin-bottom: 1rem; }
                p{ font-weight: 500; color: var(--base-500); line-height: 1.5; margin-bottom: 2rem; }
            }
        }
    }
}
/* CONTATO ************************************************************** */



/* RODAPÉ ************************************************************** */
footer.w3-footer{
    padding: 0 0 4rem; background-color: var(--base-100);
    .content{
        padding: 6rem 0 3rem; margin-bottom: 3rem; border-bottom: .1rem solid rgba(var(--base-200-rgb), .1);

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

            .logo{ font-size: 0; margin-bottom: 2rem; img{ height: 3rem; } }
            h1{ font-size: clamp(1.4rem, var(--clamp-xs), 1.6rem); font-weight: 600; color: var(--base-800); text-align: left; line-height: 1.2; text-transform: uppercase; margin-bottom: 2rem; }
            h2{ font-size: var(--clamp-text-xs); font-weight: 500; text-transform: uppercase; color: var(--base-color); margin-bottom: 1rem; }
            ul li{ margin: 1rem 0; } 
            ul li a:not(.btn){ display: flex; align-items: center; transition: var(--smooth); font-size: 1.4rem; font-weight: 500; color: inherit; &:hover{ color: var(--base-color); } svg{ color: inherit; margin-right: .6rem; } }
            ul.menu .btn-menu{ display: none; }
        }
    }
    .w3-footer-bottom{
        border-top: .1rem solid rgba(var(--base-300-rgb), .9); padding-top: 3rem;
        .copyright, .empresa{
            p{ font-size: 1.4rem; color: var(--base-400); font-weight: 400; line-height: 1.5; a{ transition: var(--smooth); &:hover{ color: var(--base-400); } } }
        }
    }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    footer.w3-footer{
        .content{
            .item-box{
                text-align: center;

                h1{ text-align: center; }
                .w3-social{ justify-content: center; }
            }
        }
    }
}
/* RODAPÉ ************************************************************** */


/* CSS PROJETO */