/*****************************************

*************** VARIABLES ****************

*****************************************/



:root {



    /*FONTE*/

    --theme-font: 'Poppins', sans-serif;



    /*COLORS*/

    --primary-50-color: #EA861B;

    --primary-100-color: #C57117;





    --neutral-50-color: #242424;

    --neutral-100-color: #646464;

    --neutral-150-color: #7D7D7D;

    --neutral-200-color: #E5E5E5;

    --neutral-250-color: #FBFBFB;



    --whatsapp-50-color: #028916;

    --whatsapp-100-color: #036110;



    --black-color: #000000;

    --white-color: #FFFFFF;



}







/*****************************************

*************** CSS RESET ****************

*****************************************/



html,

body,

div,

span,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

a,

button,

small,

strike,

strong,

sub,

sup,

ol,

ul,

li,

form,

input,

select,

textarea,

label,

table,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

footer,

header,

nav,

section,

picture,

img {

    box-sizing: border-box;

    vertical-align: baseline;

    color: var(--neutral-100-color);

    font-family: var(--theme-font);

    font-size: 100%;

    text-rendering: geometricPrecision;

    border: 0;

    margin: 0;

    padding: 0

}



article,

aside,

footer,

header,

nav,

section {

    display: block

}



body {

    line-height: 1

}



ol,

ul {

    list-style: none

}



a,

button {

    cursor: pointer;

    background-color: transparent;

    color: inherit;

    text-decoration: none;

    border: none;

    outline: none;

    padding: 0;

}



img {

    width: 100%;

    height: unset

}



span,

strike {

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    letter-spacing: inherit;

    line-height: inherit;

}



strong {

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: 600;

    letter-spacing: inherit;

    line-height: inherit;

}







/*****************************************

*************** CONTAINER ****************

*****************************************/



.container {

    width: 100%;

    max-width: 1384px;

    padding: 0 15px;

    margin: 0 auto;

}



@media (max-width: 1384px) {



    .container {

        max-width: 1140px;

    }



}



@media (max-width: 1140px) {



    .container {

        max-width: 768px;

    }



}



@media (max-width: 768px) {



    .container {

        max-width: 100%;

    }



}







/*****************************************

**************** SECTION *****************

*****************************************/



section {

    position: relative;

    overflow: hidden;

    padding: 132px 0;

    z-index: 1;

}



@media (max-width: 1384px) {



    section {

        padding: 104px 0;

    }



}



@media (max-width: 1140px) {



    section {

        padding: 88px 0;

    }



}



@media (max-width: 768px) {



    section {

        padding: 72px 0;

    }



}







/*****************************************

************** TYPOGRAPHY ****************

*****************************************/



h2,

.h2,

h3,

.h3,

h4,

.h4 {

    color: var(--neutral-50-color);

    line-height: 1.2;

    letter-spacing: -.02em;

}



h2,

.h2 {

    font-size: 36px;

    font-weight: 700;

}



h3,

.h3 {

    font-size: 23px;

    font-weight: 600;

}



h4,

.h4 {

    font-size: 17px;

    font-weight: 600;

}



p,

ul,

li {

    font-size: 16px;

    font-weight: 400;

    line-height: 1.56;

    letter-spacing: .01em;

}



.accent {

    color: var(--primary-50-color);

}



@media (max-width: 1384px) {



    h2,

    .h2 {

        font-size: 28px;

    }



    h3,

    .h3 {

        font-size: 20px;

    }



    h4,

    .h4 {

        font-size: 17px;

    }



    p,

    ul,

    li {

        font-size: 15px;

    }



}



@media (max-width: 1140px) {



    h2,

    .h2 {

        font-size: 24px;

    }



    h3,

    .h3 {

        font-size: 18px;

    }



    h4,

    .h4 {

        font-size: 16px;

    }



    p,

    ul,

    li {

        font-size: 15px;

    }



}



@media (max-width: 768px) {



    h2,

    .h2 {

        font-size: 24px;

    }



    h3,

    .h3 {

        font-size: 19px;

    }



    h4,

    .h4 {

        font-size: 15px;

    }



    p,

    ul,

    li {

        font-size: 14px;

    }



}







/*****************************************

*************** TITLES *******************

*****************************************/



.ttl-line,

.ttl-center {

    margin: 0 0 96px;

}



.ttl-left {

    margin: 0 0 36px;

}



.ttl-line {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



.ttl-center {

    text-align: center;

}



.ttl-center p,

.ttl-left p {

    margin: 14px 0 0;

}



@media (max-width: 1384px) {



    .ttl-line,

    .ttl-center {

        margin: 0 0 88px;

    }



    .ttl-left {

        margin: 0 0 28px;

    }



}



@media (max-width: 1140px) {



    .ttl-line,

    .ttl-left {

        display: block;

        text-align: center;

    }



    .ttl-left {

        margin: 0 0 88px;

    }



    .ttl-line h2,

    .ttl-line .h2,

    .ttl-line p,

    .ttl-center h2,

    .ttl-center .h2,

    .ttl-center p,

    .ttl-left h2,

    .ttl-left .h2,

    .ttl-left p {

        text-wrap: balance;

    }



    .ttl-line p {

        margin: 14px 0 0;

    }



    .ttl-line br,

    .ttl-center br,

    .ttl-left br {

        display: none;

    }



}



@media (max-width: 768px) {



    .ttl-line,

    .ttl-center,

    .ttl-left {

        margin: 0 0 64px;

    }



}







/*****************************************

*************** BUTTONS ******************

*****************************************/



.btn {

    display: inline-flex;

    align-items: center;

    background-color: var(--primary-50-color);

    color: var(--white-color);

    text-align: center;

    text-transform: uppercase;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .02em;

    line-height: normal;

    border-radius: 8px;

    padding: 12px 24px;

    transition: .5s ease;

}



.btn.wpp {

    background-color: var(--whatsapp-50-color);

}



.btn-ic {

    fill: currentColor;

    width: 22px;

    height: 22px;

    margin: 0 8px 0 0;

}



.btn-center {

    text-align: center;

    margin: 96px 0 0;

}



.btn-left {

    margin: 36px 0 0;

}



form .btn {

    display: block;

    width: 100%;

}



@media (min-width: 1141px) {



    .btn:hover {

        background-color: var(--primary-100-color);

    }



    .btn.wpp:hover {

        background-color: var(--whatsapp-100-color);

    }



}



@media (max-width: 1384px) {



    .btn {

        font-size: 16px;

        padding: 10px 20px;

    }



    .btn-left {

        margin: 28px 0 0;

    }



    .btn-center {

        margin: 88px 0 0;

    }



}



@media (max-width: 1140px) {



    .btn-left {

        text-align: center;

        margin: 88px 0 0;

    }



}



@media (max-width: 768px) {



    .btn {

        font-size: 15px;

    }



    .btn-ic {

        width: 18px;

        height: 18px;

    }



    .btn-center,

    .btn-left {

        margin: 64px 0 0;

    }



}







/*****************************************

**************** FORM ********************

*****************************************/



.form_field-area {

    position: relative;

}



.form_field-area+.form_field-area {

    margin: 8px 0 0;

}



.form_field-select::before {

    content: '';

    position: absolute;

    top: 12px;

    right: 12px;

    width: 6px;

    height: 6px;

    border: 2px var(--neutral-150-color);

    border-top-style: solid;

    border-left-style: solid;

    transform: rotate(225deg);

}



.form_field-select label {

    display: none;

}



.form_field {

    display: block;

    width: 100%;

    background-color: transparent;

    color: var(--neutral-50-color);

    font-size: 12.25px;

    line-height: 1.4;

    border: 1px solid var(--neutral-200-color);

    border-radius: 4px;

    outline: none;

    padding: 15px 15px 15px 36px;

    transition: .4s;

}



.form_field:focus {

    border-color: var(--whatsapp-50-color);

}



.form_input,

.form_select {

    height: 36px;

}



.form_select {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-color: transparent;

    background-image: none;

    padding: 0 15px 0 36px;

}



.form_textarea {

    height: 80px;

}



.form_label {

    cursor: text;

    position: absolute;

    top: 13px;

    left: 27px;

    background-color: var(--white-color);

    font-size: 12.25px;

    font-weight: 400;

    transform-origin: left;

    padding: 0 8px;

    transition: .4s;

}



.form_label,

.form_select {

    color: var(--neutral-100-color);

    font-size: 12.25px;

}



.form_field:focus~.form_label,

.form_field.valid~.form_label {

    color: var(--whatsapp-50-color);

    transform: scale(0.78) translate(4px, -24px);

}



.form_select.valid {

    color: var(--neutral-50-color);

}



.form_icon {

    position: absolute;

    left: 12px;

    top: 12px;

    width: 12px;

    fill: var(--neutral-150-color);

    transition: .5s ease;

}



.form_field:focus~.form_icon,

.form_field.valid~.form_icon {

    fill: var(--whatsapp-50-color);

}







/*****************************************

************ WHATSAPP FIXO ***************

*****************************************/



.fixed-whatsapp_area {

    position: fixed;

    bottom: 15px;

    right: 15px;

    z-index: 998;

}



.fixed-whatsapp {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    background-color: var(--whatsapp-50-color);

    fill: var(--white-color);

    border: 2px solid var(--whatsapp-50-color);

    border-radius: 100%;

    transition: .5s ease;

}



.fixed-whatsapp::before,

.fixed-whatsapp::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background-color: var(--whatsapp-50-color);

    opacity: 0.5;

    transform: scale(1);

    z-index: -1;

}



.fixed-whatsapp.pulse::before {

    animation: wppPulse 2.5s infinite;

}



.fixed-whatsapp.pulse::after {

    animation: wppPulse 2.5s infinite .6s;

}



.fixed-whatsapp_icon {

    position: relative;

    top: -2px;

    width: 35px;

    height: 35px;

}



.fixed-whatsapp_icon.shake {

    animation: wppShake 1.5s infinite;

}



.fixed-whatsapp_badge {

    position: absolute;

    top: 4px;

    right: 2px;

    width: 12px;

    height: 12px;

    background: #fb0707;

    border-radius: 50%;

    animation: wppGrow 0.4s ease-out;

}





@keyframes wppPulse {

    0% {

        transform: scale(1);

        opacity: 0.4;

    }



    70% {

        transform: scale(1.8);

        opacity: 0;

    }



    100% {

        opacity: 0;

    }

}



@keyframes wppShake {



    0%,

    100% {

        transform: rotate(0deg) translateX(0);

    }



    25% {

        transform: rotate(-3deg) translateX(-1px);

    }



    50% {

        transform: rotate(3deg) translateX(1px);

    }



    75% {

        transform: rotate(-2deg) translateX(-1px);

    }

}



@keyframes wppGrow {

    from {

        transform: scale(0);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}





@media (min-width: 1141px) {



    .fixed-whatsapp:hover {

        background-color: var(--white-color);

        fill: var(--whatsapp-50-color);

    }



}



@media (max-width: 1384px) {



    .fixed-whatsapp {

        width: 58px;

        height: 58px;

    }



    .fixed-whatsapp_icon {

        width: 29px;

        height: 29px;

    }



}



@media (max-width: 768px) {



    .fixed-whatsapp_area {

        bottom: 10px;

        right: 10px;

    }



    .fixed-whatsapp {

        width: 50px;

        height: 50px;

    }



    .fixed-whatsapp_icon {

        width: 26px;

        height: 26px;

    }



    .fixed-whatsapp_badge {

        top: 1px;

        right: 0;

        width: 10px;

        height: 10px;

    }



}


/*****************************************
********** HERO TOP (LOGO + TEL) *********
*****************************************/

.hero_top {
	position: absolute;
	top: 16px;
	left: 15px;
	right: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero_brand-link {
	display: block;
}

.hero_brand {
	width: 144px;
}

.hero_tel-btn {
	display: inline-flex;
	font-size: 14px;
}

.hero_tel-btn .btn-ic {
	width: 16px;
	height: 16px;
}

@media (max-width: 1140px) {
	
.hero_top {
    justify-content: center;
}

.hero_brand {
    width: 144px;
}

.hero_tel-btn {
	display: none;
}	
	
}


/*****************************************

**************** HERO ********************

*****************************************/



.hero {

    position: relative;

    overflow: hidden;

    background-color: var(--black-color);

    z-index: 1;

}



.hero::before,

.hero::after {

    content: '';

    position: absolute;

    width: 440px;

    height: 440px;

    background-color: var(--primary-50-color);

    border-radius: 50%;

    filter: blur(112px);

    opacity: 0.6;

    z-index: 2;

}



.hero::before {

    left: -12%;

    bottom: -18%;

}



.hero::after {

    top: -48%;

    right: -12%;

}



.hero_img-area {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.hero_img-area::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to right, var(--black-color) 18%, transparent 104%);

    opacity: .56;

}



.hero_img {

    object-fit: cover;

    width: 100%;

    height: 100%;

}



.hero_container {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 632px;

    z-index: 9;

}



.hero_logo {

    position: absolute;

    top: 16px;

    left: 15px;

    width: 144px;

}



.hero_ttl {

    color: var(--white-color);

    font-size: 46px;

    font-weight: 700;

    line-height: 1.16;

    text-shadow: 0 0 8px #00000056;

}



.hero_ttl::after {

    content: '';

    display: block;

    width: 72px;

    height: 2px;

    background-color: var(--primary-50-color);

    margin: 12px 0 32px;

}



.hero_ttl strong {

    color: var(--primary-50-color);

    font-weight: inherit;

}



.hero_txt {

    color: var(--white-color);

    font-size: 17px;

    text-shadow: 0 0 8px #00000056;

}



.hero_btn {

    display: none;

}



.hero_form-area {

    background-color: var(--white-color);

    width: 30.5%;

    border-radius: 16px;

    box-shadow: 0 0 32px #00000024;

    padding: 28px;

}



.hero_form-head {

    display: flex;

    margin: 0 0 20px;

}



.hero_form-head-ic {

    fill: var(--whatsapp-50-color);

    width: 36px;

    margin: 0 14px 0 0;

}



.hero_form-head-txt-area {

    width: calc(100% - 36px - 14px);

}



.hero_form-head-ttl {

    color: var(--neutral-50-color);

    font-size: 18px;

    font-weight: 600;

    margin: 0 0 6px;

}



.hero_form-head-txt {

    font-size: 14px;

}



.hero_div-area {

    position: absolute;

    left: 0;

    bottom: -1px;

    right: 0;

    width: calc(100% + 2px);

    height: 630px;

    overflow: hidden;

    margin: 0 auto;

    z-index: 3;

}



.hero_div {

    width: 100%;

    height: 100%;

}



@media (max-width: 1384px) {



    .hero_ttl {

        font-size: 44px;

    }



    .hero_txt {

        font-size: 16px;

    }



    .hero_form-area {

        width: 36%;

    }



}



@media (max-width: 1140px) {



    .hero_container {

        justify-content: center;

    }



    .hero_logo {

        left: 0;

        right: 0;

        margin: 0 auto;

    }



    .hero_txt-area {

        text-align: center;

    }



    .hero_ttl::after {

        margin: 12px auto 32px;

    }



    .hero_btn {

        display: inline-flex;

        margin: 32px 0 0;

    }



    .hero_form-area {

        display: none;

    }



    .hero_div-area {

        width: 112%;

    }



}



@media (max-width: 768px) {



    .hero::before,

    .hero::after {

        display: none;

    }



    .hero_img-area::before {

        background: linear-gradient(to top, var(--black-color) 32%, transparent 82%);

        opacity: 0.56;

    }



    .hero_container {

        align-items: flex-end;

        height: 600px;

        padding-bottom: 40px;

    }



    .hero_logo {

        width: 104px;

    }



    .hero_txt-area br {

        display: none;

    }



    .hero_ttl {

        text-wrap: balance;

        font-size: 6.2vw;

    }



    .hero_ttl::after {

        margin: 6px auto 12px;

    }



    .hero_txt {

        font-size: 3.1vw;

    }



    .hero_btn {

        margin: 24px 0 0;

    }



    .hero_div-area {

        display: none;

    }



}







/*****************************************

***************** WHY ********************

*****************************************/



.why {

    padding: 28px 0 0;

}



.why_container {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

}



.why_box {

    display: flex;

    align-items: center;

}



.why_ic {

    fill: var(--primary-50-color);

    width: 52px;

    height: auto;

    margin: 0 14px 0 0;

}



.why_ic.adj {

    transform-origin: right;

    transform: scale(1.24);

}



.why_txt {

    width: calc(100% - 52px - 14px);

    color: var(--neutral-50-color);

    line-height: 1.4;

}



.why_txt span {

    font-weight: 600;

}



.why_div {

    display: block;

    width: 1.5px;

    height: 50px;

    background-color: var(--neutral-200-color);

    border: none;

    opacity: .64;

}



@media (max-width: 1140px) {



    .why_container {

        row-gap: 24px;

        padding: 0 80px;

    }



    .why_div {

        display: none;

    }



}



@media (max-width: 768px) {



    .why_container {

        padding: 0 28px;

    }



    .why_ic {

        width: 30px;

        margin: 0 10px 0 0;

    }



    .why_txt {

        width: calc(100% - 30px - 10px);

        font-size: 13px;

    }





}







/*****************************************

**************** INTRO *******************

*****************************************/



.intro_container {

    display: grid;

    align-items: center;

    grid-template-columns: 1fr 1fr;

    grid-gap: 138px;

}



.intro_img-area {

    position: relative;

    z-index: 1;

}



.intro_img-link {

    position: relative;

    display: block;

    width: 100%;

    mask-image: url("../svg/intro.svg");

    -webkit-mask-image: url("../svg/intro.svg");

    mask-repeat: no-repeat;

    -webkit-mask-repeat: no-repeat;

    mask-size: cover;

    -webkit-mask-size: cover;

    mask-position: center;

    -webkit-mask-position: center;

    z-index: 2;

    transition: .5s ease;

}



.intro_img-link::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--black-color);

    opacity: .04;

    transition: .5s;

}



.intro_img-area::before {

    content: url(../svg/intro-b.svg);

    position: absolute;

    top: 8px;

    left: 8px;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.intro_play-box {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 88px;

    height: 88px;

    fill: var(--white-color);

    background-color: #00000056;

    border: 2px solid var(--white-color);

    border-radius: 50%;

    padding: 0 0 0 4px;

    margin: auto;

    z-index: 2;

    transition: .5s;

}



.intro_play-box::before,

.intro_play-box::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    border: 1px solid var(--white-color);

    border-radius: 50%;

    margin: auto;

    animation: pulsePlay 2.5s linear infinite;

}



.intro_play-box::before {

    animation-delay: .5s;

}



.intro_play-ic {

    width: 34px;

    height: 34px;

}



.intro_img {

    display: block;

}



.intro_txt+.intro_txt {

    margin: 12px 0 0;

}



.mfp-iframe-holder .mfp-content {

    max-width: 1080px !important;

}



@keyframes pulsePlay {



    70%,

    100% {

        transform: scale(4);

        opacity: 0;

    }

}



@media (min-width: 1141px) {



    .intro_img-link:hover::before {

        opacity: .48;

    }



    .intro_img-link:hover .intro_play-box {

        background-color: var(--primary-50-color);

        fill: var(--white-color);

        border-color: var(--primary-50-color);

    }



}



@media (max-width: 1140px) {



    .intro_container {

        grid-template-columns: 1fr;

        grid-gap: 0;

    }



    .intro_img-area {

        width: 72%;

        margin: 0 auto 36px;

    }



}



@media (max-width: 768px) {



    .intro_img-area {

        width: 88%;

    }



    .intro_play-box {

        width: 64px;

        height: 64px;

        padding: 0 0 0 2px;

    }



    .intro_play-ic {

        width: 24px;

        height: 24px;

    }



}







/*****************************************

**************** PRODS *******************

*****************************************/



.prods-ttl {

    background-color: var(--black-color);

}



.prods-ttl h2,

.prods-ttl p {

    color: var(--white-color);

}



.prods-ttl strong {

    font-weight: 700;

}



.prods {

    padding-top: 0;

    margin: -132px 0 0;

}



.prods_container {

    display: grid;

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

    gap: 40px;

}



.prods_box {

    display: flex;

    align-items: center;

    overflow: hidden;

    background-color: var(--white-color);

    border: 1px solid var(--neutral-200-color);

    border-radius: 16px;

}



.prods_box picture {

    display: contents;

}



.prods_box-img {

    object-fit: cover;

    display: block;

    width: 42%;

    height: 100%;

}



.prods_box-txt-area {

    padding: 40px;

}



.prods_box-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-50-color);

    font-size: 13px;

    font-weight: 500;

    line-height: 1;

    border: 1px solid var(--primary-50-color);

    border-radius: 99px;

    padding: 6px 12px;

    margin: 12px 0 28px;

}



.prods_box-label-ic {

    fill: currentColor;

    width: 16px;

    height: 16px;

    margin: 0 8px 0 0;

}



.prods_box-item {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 15px;

}



.prods_box-item+.prods_box-item {

    margin: 8px 0 0;

}



.prods_box-item-ic {

    fill: var(--primary-50-color);

    width: 15px;

    height: 15px;

    margin: 0 6px 0 0;

}



.prods_box-item span {

    color: var(--neutral-50-color);

    font-weight: 500;

}



.prods_box-btn {

    font-size: 14px;

    margin: 28px 0 0;

}



.prods .btn-center {

    padding: 0 15px;

}



.prods_cta {

    margin: 0 0 16px;

}



@media (min-width: 1141px) {



    .prods-ttl p {

        width: 61%;

        margin-left: auto;

        margin-right: auto;

    }



}



@media (min-width: 1141px) and (max-width: 1384px) {



    .prods {

        margin: -104px 0 0;

    }



    .prods_container {

        gap: 20px;

    }



    .prods_box-txt-area {

        padding: 0 24px;

    }



    .prods_box-label {

        font-size: 11px;

        margin: 10px 0 16px;

    }



    .prods_box-label-ic {

        width: 13px;

        height: 13px;

    }



    .prods_box-item {

        font-size: 13px;

    }



    .prods_box-item-ic {

        width: 13px;

        height: 13px;

    }



    .prods_box-btn {

        font-size: 13px;

        margin: 20px 0 0;

    }



}



@media (max-width: 1140px) {



    .prods {

        margin: -88px 0 0;

    }



    .prods_container {

        grid-template-columns: 1fr;

    }



}



@media (max-width: 768px) {



    .prods {

        margin: -72px 0 0;

    }



    .prods_box {

        flex-wrap: wrap;

        border-radius: 8px;

    }



    .prods_box-img {

        width: 100%;

        height: auto;

    }



    .prods_box-txt-area {

        width: 100%;

        padding: 32px;

    }



    .prods_box-label {

        font-size: 11px;

        padding: 5px 10px;

        margin: 10px 0 16px;

    }



    .prods_box-label-ic {

        width: 14px;

        height: 14px;

    }



    .prods_box-item {

        font-size: 13.5px;

    }



    .prods_box-item+.prods_box-item {

        margin: 6px 0 0;

    }



    .prods_box-item-ic {

        width: 13px;

        height: 13px;

    }



    .prods_box-btn {

        font-size: 13px;

        margin: 18px 0 0;

    }



    .prods_cta {

        margin: 0 0 12px;

    }



}







/*****************************************

**************** TESTI *******************

*****************************************/



.testi {

    background-color: var(--neutral-250-color);

}



.testi .ttl-line {

    align-items: center;

}



.testi_ttl-label {

    display: block;

    color: var(--primary-50-color);

    text-transform: uppercase;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: .18em;

    margin: 0 0 12px;

}



.testi_navigation {

    display: flex;

    align-items: center;

}



.testi_bar-area {

    position: relative;

    width: 472px;

    margin: 0 24px 0 0;

}



.testi_bar,

.testi_progress {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    height: 3px;

    border-radius: 99px;

}



.testi_bar {

    background-color: var(--neutral-200-color);

    width: 100%;

}



.testi_progress {

    background-color: var(--primary-50-color);

    transition: .5s ease;

}



.testi_nav-box {

    display: flex;

    gap: 8px;

}



.testi_prev,

.testi_next {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    background-color: var(--white-color);

    fill: var(--primary-50-color);

    border: 1px solid #f0f0f0;

    border-radius: 50%;

    transition: .5s ease;

}



.testi_slider-area {

    width: 100%;

}



.testi_slide.swiper-slide {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background-color: var(--white-color);

    border: 1px solid #f0f0f0;

    border-radius: 16px;

    padding: 40px;

}



.testi_slide-txt {

    font-size: 17px;

}



.testi_slide-txt span {

    color: var(--neutral-50-color);

    font-weight: 500;

}



.testi_slide-txt::before {

    content: url(../svg/quotes.svg);

    display: block;

    width: 48px;

    height: auto;

    margin: 0 0 8px;

}



.testi_client-box {

    display: flex;

    align-items: center;

    margin: 24px 0 0;

}



.testi_client-img {

    display: block;

    width: 76px;

    height: 76px;

    border: 4px solid var(--white-color);

    box-shadow: 0 0 16px #00000010;

    border-radius: 50%;

    margin: 0 20px 0 0;

}



.testi_client-name::after {

    content: "";

    display: block;

    width: 80px;

    height: 20px;

    background-image: url(../svg/stars.svg);

    background-size: 80px;

    background-repeat: no-repeat;

    background-position: center;

    margin: 6px 0 0;

}



.clients_swiper {

    margin: 96px 0 0;

}



.clients_swiper .swiper-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.clients_logo {

    max-width: 106px;

    max-height: 58px;

}



.clients_logo.adj {

    max-width: 126px;

}



.clients_slide.swiper-slide {

    width: fit-content;

}



@media (min-width: 1141px) {



    .testi_prev:hover,

    .testi_next:hover {

        background-color: var(--primary-50-color);

        fill: var(--white-color);

        border-color: var(--primary-50-color);

    }



    .testi_warn {

        display: none;

    }



}



@media (max-width: 1384px) {



    .testi_bar-area {

        width: 380px;

    }



}



@media (max-width: 1140px) {



    .testi_warn {

        display: flex;

        justify-content: center;

        align-items: center;

        margin: 16px 0 0;

    }



    .testi_warn-ic {

        fill: var(--primary-50-color);

        width: 28px;

        height: 28px;

        margin: 0 12px 0 0;

    }



    .testi_warn-txt {

        width: fit-content;

        text-align: left;

        line-height: 1.32;

        margin: 0 !important;

    }



    .testi_warn-txt br {

        display: block;

    }



    .testi_navigation {

        display: none;

    }



    .clients_slide.swiper-slide,

    .testi_slide.swiper-slide {

        text-align: center;

    }



    .testi_client-box {

        justify-content: center;

    }



    .testi_slide-txt::before {

        margin: 0 auto 8px;

    }



}



@media (max-width: 768px) {



    .testi_ttl-label {

        font-size: 13px;

    }



    .testi_slide.swiper-slide {

        border-radius: 8px;

        padding: 32px 24px;

    }



    .testi_slide-txt {

        font-size: 14px;

    }



    .testi_slide-txt::before {

        width: 40px;

    }



    .testi_client-img {

        width: 56px;

        height: 56px;

        border-width: 2px;

    }



    .testi_client-name::after {

        width: 64px;

        height: 14px;

        background-size: 64px;

        margin: 4px 0 0;

    }



    .clients_swiper {

        margin: 48px 0 0;

    }



    .clients_logo {

        max-width: 96px;

        max-height: 48px;

    }



    .clients_logo.adj {

        max-width: 104px;

    }



}







/*****************************************

**************** ABOUT *******************

*****************************************/



.about_container {

    display: grid;

    align-items: center;

    grid-template-columns: .8fr 1fr;

    grid-gap: 120px;

}



.about_txt:first-of-type {

    color: var(--neutral-50-color);

    font-weight: 600;

    border-left: 3px solid var(--primary-50-color);

    padding: 0 0 0 16px;

}



.about_txt+.about_txt {

    margin: 12px 0 0;

}



.about_img-area {

    position: relative;

    display: grid;

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

    grid-gap: 24px;

}



.about_img-area::before {

    content: '';

    position: absolute;

    top: -4%;

    left: -5.25%;

    width: 88px;

    height: 88px;

    border: 14px solid var(--primary-50-color);

    border-radius: 50%;

    z-index: -1;

}



.about_img-area::after {

    content: '';

    position: absolute;

    bottom: 3%;

    right: 0;

    width: 112px;

    height: 196px;

    background-image: radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%), radial-gradient(circle, #00000010 50%, transparent 51%);

    background-size: 6px 11px;

    background-position: 0 0, 14px 0, 28px 0, 42px 0, 56px 0, 70px 0, 84px 0, 98px 0;

    background-repeat: repeat-y;

    transform: rotate(90deg);

    z-index: -1;

}



.about_img {

    border-radius: 16px;

}



.about_img:nth-child(1) {

    grid-area: 1 / 1 / 2 / 3;

    width: 88%;

}



.about_img:nth-child(2) {

    position: relative;

    top: -10%;

    right: -9.5%;

    grid-area: 2 / 1 / 3 / 2;

    transform: scale(.8);

}



.about_img:nth-child(3) {

    grid-area: 2 / 2 / 3 / 3;

}



@media (max-width: 1140px) {



    .about_container {

        grid-template-columns: 1fr;

        grid-gap: 0;

    }



    .about_ttl-area {

        order: 1;

    }



    .about_img-area {

        order: 2;

        width: 80%;

        margin: 0 auto;

    }



    .about_txt-area {

        order: 3;

    }



}



@media (max-width: 768px) {



    .about_img-area {

        width: 96%;

        grid-gap: 16px;

    }



    .about_img-area::before {

        left: -3.5%;

        width: 48px;

        height: 48px;

        border-width: 8px;

    }



    .about_img-area::after {

        right: 3%;

        width: 64px;

        height: 108px;

    }



    .about_img {

        border-radius: 8px;

    }



}





/*****************************************

*************** FOOTER *******************

*****************************************/



.footer {

    background-color: var(--black-color);

    padding: 32px 0;

}



.footer_grid {

    display: grid;

    align-items: center;

    grid-template-columns: 1fr 3.3fr 1fr;

}



.footer_lgpd-link,

.footer_copyright-title,

.footer_copyright-disclaimer,

.footer_author-text {

    color: var(--white-color);

    font-size: 13px;

}



.footer_lgpd-link {

    transition: .5s ease;

}



.footer_lgpd-link::before {

    content: '';

    display: inline-block;

    width: 5px;

    height: 5px;

    border: solid var(--primary-50-color);

    border-width: 2px 2px 0 0;

    transform: rotate(45deg);

    margin: 0 10px 2px 0;

}



.footer_copyright-area {

    text-align: center;

}



.footer_copyright-title {

    color: var(--primary-50-color);

    font-size: 14px;

    font-weight: 600;

    margin: 0 0 5px;

}



.footer_copyright-disclaimer {

    text-wrap: balance;

    line-height: 1.4;

}



.footer_author-area {

    text-align: right;

}



.footer_author-link {

    transition: .5s ease;

}



.footer_author-logo {

    width: 55px;

    margin: 0 0 -1px 5px;

}



@media (min-width: 1141px) {



    .footer_lgpd-link:hover,

    .footer_author-link:hover {

        opacity: .64;

    }



}



@media (max-width: 1384px) {



    .footer_lgpd-link,

    .footer_copyright-title,

    .footer_copyright-disclaimer,

    .footer_author-text {

        font-size: 11px;

    }



    .footer_copyright-title {

        text-wrap: balance;

        font-size: 12px;

        line-height: 1.42;

    }



}





@media (max-width: 1140px) {



    .footer_grid {

        grid-template-columns: 1fr;

        grid-gap: 20px;

    }



    .footer_copyright-area {

        order: 1;

    }



    .footer_lgpd-area {

        order: 2;

    }



    .footer_author-area {

        order: 3;

    }



    .footer_lgpd-area,

    .footer_author-area {

        text-align: center;

    }



}



@media (max-width: 575px) {



    .footer {

        padding: 28px 0;

    }



    .footer_author-logo {

        width: 48px;

    }



    .footer_lgpd-list {

        display: flex;

        justify-content: center;

        gap: 4vw;

    }



    .footer_lgpd-link::before {

        width: 4px;

        height: 4px;

        margin: 0 8px 1px 0;

    }



}







/*****************************************

**************** MODAL *******************

*****************************************/



.modal {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    vertical-align: middle;

    text-align: center;

    overflow: auto;

    z-index: 999;

}



.modal::before {

    content: '';

    box-sizing: border-box;

    display: inline-block;

    height: 100%;

    vertical-align: middle;

    margin: 0 -0.05em 0 0

}



.modal_overlay {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background-color: var(--black-color);

    opacity: .8;

}



.modal_holder {

    position: relative;

    display: inline-block;

    width: 580px;

    max-width: 95%;

    vertical-align: middle;

    text-align: left;

    overflow: hidden;

    padding: 32px 0;

}



.modal_box {

    overflow: hidden;

    border-radius: 8px;

}



.modal_header {

    display: flex;

    background-color: var(--whatsapp-50-color);

    padding: 22px 28px;

}



.modal_header-icon {

    width: 48px;

    height: 48px;

    fill: var(--white-color);

    margin: 0 16px 0 0;

}



.modal_header-title-area {

    width: calc(100% - 48px - 16px - 20px - 16px);

}



.modal_header-title {

    color: var(--white-color);

    font-size: 24.2px;

    font-weight: 600;

    line-height: 1.16;

    margin: 0 0 6px;

}



.modal_close {

    cursor: pointer;

    position: relative;

    background-color: transparent;

    border: none;

    width: 20px;

    height: 20px;

    margin: 0 0 0 16px;

    opacity: .4;

    transition: .5s ease;

}



.modal_close:before,

.modal_close:after {

    position: absolute;

    content: '';

    top: 50%;

    left: 50%;

    width: 100%;

    height: 2px;

    background-color: var(--white-color);

}



.modal_close:before {

    transform: translate(-50%, -50%) rotate(45deg);

}



.modal_close:after {

    transform: translate(-50%, -50%) rotate(-45deg);

}



.modal_header-description {

    color: var(--white-color);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.16;

}



.modal_body {

    background-color: var(--white-color);

    padding: 28px;

}



@media (min-width: 1141px) {



    .modal_close:hover {

        opacity: .8;

    }



}



@media (max-width: 768px) {



    .modal_header,

    .modal_body {

        padding: 20px;

    }



    .modal_header-icon {

        width: 9.8vw;

        height: auto;

        margin: 0 3.5vw 0 0;

    }



    .modal_header-title-area {

        width: calc(100% - 23.3vw);

    }



    .modal_header-title {

        font-size: 5vw;

    }



    .modal_header-description {

        font-size: 2.9vw;

    }



    .modal_close {

        width: 5vw;

        height: 5vw;

        margin: 0 0 0 5vw;

    }



}







/*****************************************

************** LGPD POPUP ****************

*****************************************/



.warning {

    position: fixed;

    left: 0;

    bottom: 15px;

    right: 0;

    margin: 0 auto;

    z-index: 997;

}



.warning-wrapper {

    background-color: var(--white-color);

    border: 1px solid var(--neutral-200-color);

    border-radius: 8px;

    padding: 12px 16px;

}



.warning_box {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

}



.warning_text-area {

    width: 88%;

}



.warning_text {

    display: block;

    font-size: 12.5px;

    line-height: 1.4;

}



.warning_link {

    color: var(--primary-50-color);

    font-weight: 600;

    transition: .5s ease;

}



.warning_button-area {

    width: 9%;

}



.warning_button {

    display: block;

    width: 100%;

    background-color: var(--primary-50-color);

    color: var(--white-color);

    font-size: 14px;

    font-weight: 600;

    border-radius: 4px;

    padding: 8px;

    transition: .5s ease;

}



@media (min-width: 1141px) {



    .warning_link:hover,

    .warning_button:hover {

        opacity: .64;

    }



}



@media (max-width: 1384px) {



    .warning_text-area {

        width: 90%;

    }



    .warning_text {

        font-size: 12px;

    }



    .warning_button {

        font-size: 12px;

    }



    .warning_button-area {

        width: 9%;

    }



}



@media (max-width: 768px) {



    .warning_box {

        justify-content: center;

    }



    .warning_text-area {

        width: 100%;

    }



    .warning_text {

        text-align: center;

        font-size: 11px;

    }



    .warning_button-area {

        width: 25%;

        text-align: center;

        margin: 10px 0 0;

    }



    .warning_button {

        font-size: 11px;

    }



}







/*****************************************

************** LGPD PAGE *****************

*****************************************/



.lgpd-header {

    background-color: var(--black-color);

    padding: 16px 0;

}



.lgpd-header_container {

    display: flex;

    justify-content: center;

}



.lgpd-header_link {

    display: block;

}



.lgpd_header-logo {

    width: 120px;

}



.lgpd {

    min-height: 100vh;

}



.lgpd_text-area p:not(:last-child) {

    margin: 0 0 15px;

}



.lgpd_text-area h3 {

    margin: 40px 0 16px;

}



@media (max-width: 768px) {



    .lgpd-header {

        padding: 12px 0;

    }



    .lgpd_header-logo {

        width: 80px;

    }



    .lgpd_text-area h3 {

        margin: 32px 0 12px;

    }



}



/******************************************

**************** SPIN FORM ****************

*************************** **************/



.form-loading {

    display: none;

    text-align: center;

    margin-top: 15px;

    margin-bottom: 15px;

}



.form-loading::after {

    content: "";

    display: inline-block;

    width: 20px;

    height: 20px;

    border: 4px solid #ccc;

    border-top: 4px solid #4D863F; /* Cor do destaque */

    border-radius: 50%;

    animation: spin 1s linear infinite;

    vertical-align: middle;

}



@keyframes spin {

    0%   { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}