/* -----------Configurações padrões---------- */

:root {
    --font-family-defult-primary: "Montserrat", sans-serif;
    --font-family-default-secundary: "Roboto", sans-serif;

    --font-size-defult-content: 15px;
    --font-size-default-title: 15px;
    --font-size-default-link: 15px;
    --font-size-default-button: 15px;

    --font-color-default-content: #787878;
    --font-color-default-title: #005EAA;
    --font-color-default-link: #ffffff;
    --font-color-default-button: #000;

    --background-color-button-primary: #22228C;
    --background-color-button-secundary: #005EAA;

    --position-padding-default: 75px;
    --position-padding-default-mobile: 26px;
}

body{
    font-family: var(--font-family-defult-primary);
    box-sizing: border-box;
    margin: 0;   
}

/* ---------Animações--------- */

@keyframes pulsewhatsapp {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(1, 170, 23, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(1, 170, 23, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(1, 170, 23, 0);
    }
}

.text-block-1 button, .email-mercado-pago button {
    transition: all 0.3s;
}

.text-block-1 button:hover, .email-mercado-pago button:hover {    
    width: 347px !important;
}

/* ------------Whatsapp Flutuante-------------- */

.whatsapp-flutuante {
    position: fixed;
    right: 2%;
    bottom: 8%;
    z-index: 100;
}

.whatsapp-flutuante a {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;
}

.whatsapp-flutuante i {
    animation: pulsewhatsapp 1s infinite;
    font-size: 32px;
    background: #25d366;
    color: #fff;
    padding: 13px;
    border-radius: 104px;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.whatsapp-flutuante a span {
    color: #fff;
    font-size: 14px;
}

/* -----------Conteúdo---------- */

.block-1 {
    display: flex;
    justify-content: space-around;    
    align-items: center;

    padding: var(--position-padding-default);
}

.img-logo {
    width: 306px;
}

.img-logo img:nth-child(1) {
    width: 217px;
}

.text-block-1, .img-logo {
    display: flex;
    flex-direction: column;
}

.text-block-1 {
    gap: 41px;
}

.text-block-1 .title-description {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.block-1 .title {
    font-size: 49px;
    font-weight: 800;
    color: var(--font-color-default-title);
    line-height: 1;
}

.block-1 .description {
    color: var(--font-color-default-content);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.5;

    width: 354px;
}

.text-block-1 button, .email-mercado-pago .text button {
    background: linear-gradient(45deg, var(--background-color-button-primary), var(--background-color-button-secundary));
    border: 0;
    padding: 15px;
    border-radius: 35px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    width: 289px;
}

.text-block-1 button a, .email-mercado-pago .text button a {
    color: var(--font-color-default-link);
    font-size: 20px;
    text-decoration: none;
}

.text-block-1 button i, .email-mercado-pago .text button i {
    font-size: 26px;
    color: var(--font-color-default-link);
}

.vantagens {
    background: var(--background-color-button-secundary);

    padding: 46px 127px;
    margin-top: 192px;
    margin-bottom: 208px;

    position: relative;
}

.vantagens .text {    
    color: var(--font-color-default-link);
    font-size: 35px;
    font-weight: bold;
    border-left: 8px solid #ffff;
    padding-left: 26px;
}

.vantagens img {
    position: absolute;
    top: -254px;
    right: 210px;
    width: 572px; 
}

.desconto-parcelamento {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    margin-bottom: 50px;
    padding: var(--position-padding-default);
}

.desconto-parcelamento img {
    border-bottom-right-radius: 172px;
    width: 50%;
    height: 533px;
    object-fit: cover;
}

.text-desconto-parcelamento, .text-desconto-parcelamento span {
    display: flex;
    flex-direction: column;
    gap: 22px;

    width: 50%;
}

.text-desconto-parcelamento span:nth-child(1), .text-desconto-parcelamento span b:nth-child(1) {
    font-size: 49px;
    font-weight: 800;
    line-height: 1;
    width: auto;
}

.text-desconto-parcelamento span:nth-child(1) {
    color: var(--font-color-default-title);    
}

.text-desconto-parcelamento span b:nth-child(1) {
    color: var(--font-color-default-link);
    background: var(--background-color-button-secundary);
    padding: 9px;
    width: fit-content;
    border-radius: 4px;
}

.text-desconto-parcelamento span {
    color: var(--font-color-default-content);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.5;
    width: 407px;
}

.text-desconto-parcelamento .icons, .seguro-facil .icons {
    display: flex;
    gap: 35px;
}

.super-desconto, .parcelamento {
    border: 3px solid #005eaa;
    border-radius: 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 187px;
    padding: 15px
}

.super-desconto i, .parcelamento i {
    font-size: 22px;
    color: #ffff;
    background: var(--background-color-button-secundary);
    padding: 19px;
    border-radius: 42px;
}

.super-desconto span:nth-child(2), .parcelamento span:nth-child(2) {
    color: var(--font-color-default-title);
    font-size: 19px;
    font-weight: bold;

    border-bottom: 1px solid #005eaa30;
    width: 100%;
}

.super-desconto span, .parcelamento span {
    font-size: 16px;
    text-align: center;

    width: auto;
}

.seguro-facil {
    background: #005eaa;
    color: var(--font-color-default-link);

    display: flex;

    padding: var(--position-padding-default);
}

.seguro-facil .text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.seguro-facil .text span:nth-child(1) {
    font-size: 49px;
    font-weight: 800;
    line-height: 1.30;
    width: 591px;
}

.seguro-facil .text span {
    font-size: 23px;
    font-weight: 200;
    line-height: 1.5;
    width: 407px;
}

.seguro-facil img {
    width: 50%;
}

.ambiente-seguro, .facil-rapido {
    border: 3px solid #ffffff;
    border-radius: 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 187px;
    padding: 15px;
}

.ambiente-seguro i, .facil-rapido i {
    font-size: 22px;
    color: var(--font-color-default-title);
    background: #ffffff;
    padding: 19px;
    border-radius: 42px;
}

.ambiente-seguro .title:nth-child(2), .facil-rapido .title:nth-child(2) {    
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    border-bottom: 1px solid #ffffff4f;
    width: 100%;
}

.ambiente-seguro .description, .facil-rapido .description {    
    font-size: 16px !important;
    text-align: center;
    width: auto !important;
}

.email-mercado-pago {
    display: flex;
    align-items: center;
    gap: 137px;

    background: #E6F6FE;
    padding: var(--position-padding-default);
}

.image-mercado-pago {
    background-image: url(/content/img/email-mercado-pago.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 37%;
    height: 450px;
    border-bottom-left-radius: 157px;
    border-top-left-radius: 157px;

    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.image-mercado-pago img {
    background: #DEDEDE;
    border-radius: 96px;
    padding: 18px;
    width: 215px;
    border: 20px solid #E6F6FE;
    margin-right: -133px;
}

.email-mercado-pago .text {
    display: flex;
    flex-direction: column;
    gap: 22px;

    width: 49%;
}

.email-mercado-pago .text .title {
    color: var(--font-color-default-title);
    font-size: 49px;
    font-weight: 800;
    line-height: 1;
    width: 591px;
}

.email-mercado-pago .text .description {
    color: var(--font-color-default-content);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.5;
    width: 407px;
}

.aplicativo {
    display: flex;
    align-items: center;

    padding: 61px 94px;
    background: var(--background-color-button-secundary);
    color: var(--font-color-default-link);
}

.aplicativo .text {
    display: flex;
    flex-direction: column;
    gap: 22px;

    width: 50%;
}

.aplicativo .title {
    font-size: 49px;
    font-weight: 800;
    line-height: 1.30;
    width: 569px;
}

.aplicativo .description {
    font-size: 23px;
    font-weight: 200;
    line-height: 1.5;
    width: 407px;
}

.aplicativo .phones {
    width: 42%;
}

.image-plataform {
    display: flex;
    width: 403px;
    gap: 16px;
}

.image-plataform img {
    width: 100%;
    height: 100%;
}

/* --------------Rodapé--------------*/

.rodape {
    background: #000;
    color: #fff;
    font-family: var(--font-family-default-secundary);
    font-size: 15px;
    font-weight: 200;
    letter-spacing: 1px;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;

    padding: 15px;
}

/* -----------Versão Mobile---------- */

@media only screen and (max-width: 600px) {
    .block-1, .desconto-parcelamento, .seguro-facil, .email-mercado-pago {
        flex-direction: column;
        padding: var(--position-padding-default-mobile);
    }

    .block-1 {              
       gap: 40px;
    }
    
    .block-1 img {
        width: 100%;
    }

    .block-1 .title, .text-desconto-parcelamento span:nth-child(1), .seguro-facil .text span:nth-child(1), .email-mercado-pago .text .title, .aplicativo .title {
        font-size: 37px;
    }

    .vantagens {
        height: 158px;
        display: flex;
        align-items: flex-end;
        align-content: stretch;
        flex-wrap: wrap;

        margin-top: 218px;
        margin-bottom: 64px;
        padding: 37px 14px;
    }

    .vantagens img {
        top: -187px;
        right: 15px;
        width: 360px;
    }


    .super-desconto, .parcelamento {
        width: auto;
        padding: 35px;
    }

    .desconto-parcelamento img {
        width: 100%;
        height: 330px;
        object-position: -141px;
    }

    .seguro-facil .icons, .aplicativo {
        flex-direction: column;
    }

    .text-desconto-parcelamento span b:nth-child(1) {
        font-size: 30px;
    }

    .text-desconto-parcelamento, .text-desconto-parcelamento span {
        width: 100%;
    }

    .text-desconto-parcelamento .icons {
        flex-direction: column;
        gap: 31px;
    }

    .seguro-facil img, .image-mercado-pago  {
        width: 100%;
    }

    .image-mercado-pago img {
        margin-right: 0;
    }

    .seguro-facil .text span:nth-child(1) {       
        width: 100%;
    }

    .seguro-facil .text span {
        width: 100%;
    }

    .ambiente-seguro, .facil-rapido {
        width: auto;
        padding: 28px;
        padding-top: 35px;
    }

    .ambiente-seguro .description, .facil-rapido .description {
       padding: 8px;
    }

    .image-mercado-pago {        
        border-radius: 29px; 
        justify-content: center;    
    }   

    .email-mercado-pago {
        gap: 24px;
    }

    .email-mercado-pago .text {        
        width: 100%;
    }


    .email-mercado-pago .text .title {
       width: 100%;
    }

    .email-mercado-pago .text .description {
        width: 100%;
    }

    .text-block-1 button, .email-mercado-pago .text button {      
        justify-content: space-around;        
        width: 100%;
    }

    .aplicativo {       
        padding: var(--position-padding-default-mobile);            
    }

    .aplicativo .title, .aplicativo .text, .aplicativo .description {        
        width: 100%;
    }

    .aplicativo .phones {
        width: 100%;
        margin-top: 38px;
    }

    .image-plataform {      
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .image-plataform a {
        width: 95%;
    }

    .image-plataform img {
        width: 100%;
    }

    .rodape {
        text-align: center;
        line-height: 1.50;
    }

}