@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{ /*margin-top: var(--height-header);*/ height: 100dvh; width: 100dvw; }
section.w3-main-content{ height: inherit; width: inherit; }

.title h1{ font-size: var(--clamp-title); color: var(--apoio-dark); text-align: center; line-height: 1.2; }
.title h1 b{ color: var(--primary); }
.title h2{ font-size: var(--clamp-subtitle); color: var(--primary); text-align: center; line-height: 1.2; margin-top: 1rem; }

.swiper{ height: 100%; width: 100%; }
.swiper .swiper-button-next,
.swiper .swiper-button-prev{ width: 5rem; height: 5rem; background-color: rgba(var(--white-rgb), .5); border-radius: 50%; }
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after{ font-size: 2rem; }

.btn{ text-transform: uppercase; }



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

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


/* HOME ************************************************************** */
section.w3-home-form{ 
    width: 100%; height: 100%; padding: 2rem; /* background-color: var(--base-100); */
    
    background: linear-gradient(68deg,#38c4a7,#7cd4e8,#015a9e,#ffb4c9);
    background-size: 240% 240%;
    animation: gradient-animation 20s ease infinite;
    
    .content{ 
        width: 100%; height: 100%;

        form{ 
            width: inherit; height: inherit; display: grid; place-items: center; 
        
            section.w3-form-step{
                background-color: var(--white); height: 100%; width: 100%; max-width: 42rem; min-height: 80%; display: flex; flex-direction: column; border-radius: var(--radius); box-shadow: var(--shadow-lg); 
    
                header{
                    text-align: center; padding: 3rem;
    
                    img{ height: 8rem; margin-bottom: 2rem; }
                }
                .w3-form-content{ 
                    padding: 0 2rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; max-height: calc(100% - (16.85rem + 8.2rem));
                    
                    h1{ font-size: var(--clamp-text-sm); color: var(--base-color); line-height: .8; text-align: center; margin-bottom: 2rem; }
                    h2{ font-size: clamp(1.4rem, var(--clamp-sm), 1.8rem); color: var(--base-500); line-height: .8;  text-align: center; margin-bottom: 2rem; }
                    h1:has(+ h2){ margin-bottom: .5rem; }
                    .icone-lottie{ margin: 0 auto; height: 15rem; width: 15rem; }
                    .grid{ 
                        width: 100%; overflow-y: auto;
                    
                        .item label svg{ color: var(--primary); }

                        @media screen and (max-width: 768px) {
                            /* max-height: calc(100% - (16.85rem + 8.2rem)); */
                        }
                    }
                }
                footer{ padding: 2rem; }
            }
    
        }
    }
    .box-popup{
        position: fixed; top: 1rem; right: 1rem; width: 29rem; height: auto; z-index: 9999; display: none;

        .content{ 
            width: 100%; padding: 1.5rem; background-color: var(--engage-100); border-radius: calc(var(--radius) / 2); box-shadow: var(--shadow);

            p{ font-size: clamp(1.8rem, var(--clamp-sm), 2.4rem); color: var(--engage-600); text-align: center; line-height: 1; }
        }
    }
}
section.w3-home-form.obrigado{ 
    width: 100%; height: 100%; padding: 2rem; /* background-color: var(--base-100); */

    background: linear-gradient(68deg,#38c4a7,#7cd4e8,#015a9e,#ffb4c9);
    background-size: 240% 240%;
    animation: gradient-animation 20s ease infinite;
    
    .content{ 
        width: 100%; height: 100%; display: grid; place-items: center; 
        
        section.w3-form-step{
            background-color: var(--white); height: 100%; width: 100%; max-width: 42rem; min-height: 80%; display: flex; flex-direction: column; border-radius: var(--radius); box-shadow: var(--shadow-lg); 

            header{
                text-align: center; padding: 3rem;

                img{ height: 20rem; }
            }
            .w3-form-content{ 
                padding: 0 2rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;
                
                h1{ font-size: var(--clamp-text-sm); color: var(--base-color); line-height: .8; text-align: center; }
                .icone-lottie{ margin: 3rem auto; height: 15rem; width: 15rem; }
            }
            footer{ padding: 2rem; }
        }
    }
}
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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


/* CSS PROJETO */