/* Outros */
.btn-cta {
    padding: .5rem 1.3rem;
    font-size: 17px;
    font-weight: 500;
    font-family: var(--font-poppins);
    border-radius: 6px;
}

p {line-height: 22px;}

.title-heading {
    position: relative;
    padding-bottom: 12px;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 200px;
        height: 3px;
        background-color: var(--primary);
        transform: translateX(-50%);
    }
}

.form {
    padding: 1.5rem 1rem 1rem;

    .fields {
        justify-content: start;

        h4 {margin-top: 1rem;}

        .faixa-etaria-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;

            input {
                width: 100%;
                text-align: center;
            }

            button {
                position: absolute;
                top: 0;
                bottom: 0;
                border: none;
                background: rgba(0, 0, 0, .15);
                font-size: 20px;
                cursor: pointer;
                border-radius: 50%;
                padding: 0 .5rem;
                transition: all .2s;
                
                &:hover {
                    background: rgba(0, 0, 0, .25);
                }
            }

            .btn-remove {
                left: 0;
                border-radius: 5px 0 0 5px;
            }

            .btn-add {
                right: 0;
                border-radius: 0 5px 5px 0;
            }
        }
    }
}

/* Menu de Navegação */
#menu-nav {
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1);
    z-index: 99;

    .content {
        .logo img {
            /* height: 48px; */
            width: 7.5rem;
        }

        .menu-trigger svg {
            width: 28px;
            height: 28px;
            fill: var(--black);
        }

        .links li a {
            font-size: 16px;
            font-family: var(--font-poppins);
            font-weight: 500;
            padding: .4rem 1rem;
            border-radius: 6px;
            background-color: var(--white);
            transition: all .2s;

            &.highlight {background-color: var(--secundary);}

            &:hover {
                filter: brightness(.94);
            }
        }
    }
}

/* Principal */
#container {
    #header {
        padding-top: 5rem;

        .content {
            padding: 2rem 1rem;

            .text-content .title p {
                color: var(--clr-light-paragraph);
            }
        }
    }

    #about .content .main-content .image img {
        height: 400px;
        object-fit: cover;
    }

    #metrics .content .main-content {
        .big-numbers .big-number {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc((100% - (1.5rem)) / 2);
            background-color: var(--white);
            padding: 1rem 1.5rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 0 6px 2px rgba(0, 0, 0, .05);

            .count {
                display: flex;
                align-items: center;
                gap: .4rem;

                span, .value {
                    font-family: var(--font-poppins);
                    font-weight: 600;
                    color: var(--primary);
                }
                
                span {
                    font-size: 32px;
                }

                .value {
                    font-size: 48px;
                }
            }

            p {
                font-family: var(--font-poppins);
                font-size: 15px;
                font-weight: 500;
                text-align: center;
            }
        }
    }

    #comparison .content .part {
        &.negatives svg {fill: #df0000;}
        &.positives svg {fill: #00b800;}

        .title-heading::after {
            transform: translateX(0);
            left: 0;
        }

        .points .point {
            display: flex;
            align-items: center;
            gap: .9rem;
            padding:  .8rem;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 500;
            font-family: var(--font-poppins);
            height: 86px;
            
            &:nth-child(odd) {
                background-color: rgba(0, 0, 0, .1);
            }

            svg {
                width: 28px;
                height: 28px;
                flex-shrink: 0;
            }
        }
    }

    #operators .content .carousel {
        .swiper-slide {
            background-color: white;
            display: flex;
            justify-content: center;

            &, img {
                border-radius: 8px;
            }
        }
    }

    #contact h2 {
        color: var(--white);
    }

    #faq .content .items .item {
        --bg-item: rgba(0, 0, 0, .1);

        display: flex;
        flex-direction: column;
        border-radius: 10px;
        width: 100%;

        &.active {
            border: 2px solid var(--bg-item);

            .question svg {
                transform: rotateZ(180deg);
            }

            .answer {display: flex;}
        }

        .question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            background-color: var(--bg-item);
            padding: .9rem 1rem;
            border-radius: 8px;
            font-size: 16px;
            font-family: var(--font-poppins);
            cursor: pointer;

            svg {
                width: 20px;
                height: 20px;
                transition: all .2s;
            }
        }

        .answer {
            display: none;
            flex-direction: column;
            gap: .8rem;
            padding: 1rem;

            p {
                font-size: 16px;
                color: var(--clr-dark-paragraph);
            }
        }
    }
}

/* Form/Wpp Flutuante */
#wpp-flutuante, #wpp-form {
    z-index: 99;
}

#wpp-flutuante {
    bottom: 1.5rem;
    right: 1.5rem;

    .btn-whatsapp {
        padding: .8rem;
        border-radius: 50%;
        box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1);

        svg {
            display: flex;
            width: 40px;
            height: 40px;
            fill: var(--white);
        }
    }
}

#wpp-form {
    bottom: 7rem;
    right: -600px;
    width: 450px;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
    border-radius: 8px;
    transition: all .3s;

    &.active {
        right: 1.5rem;
    }

    .content {
        .title {
            padding: 1rem;
            background-color: var(--primary);
            border-radius: 8px 8px 0 0;

            .text {
                font-size: 15px;
                font-family: var(--font-poppins);
                color: var(--white);
            }

            .close-form svg {
                display: flex;
                width: 20px;
                height: 20px;
                fill: var(--white);
            }
        }

        form {
            padding: 1rem;
            background-color: var(--white);
            border-radius: 0 0 8px 8px;

            .fields .form-group.w-1_2 {
                width: 100%;
            }
        }
    }
}

#footer .content {
    padding: 2rem 1rem 1rem;

    a {
        transition: all .2s;

        &:hover {
            filter: brightness(.9);

            svg {
                filter: brightness(.9);
            }
        }
    }

    .infos {
        .links a {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-family: var(--font-poppins);
            color: var(--white);

            svg {
                width: 20px;
                height: 20px;
                fill: var(--white);
            }
        }

        .social-media a svg {
            width: 24px;
            height: 24px;
            fill: var(--white);
        }
    }

    .bottom .copyright p {
        font-family: var(--font-poppins);
        font-size: 14px;
        color: var(--white);
    }
}

/* Responsividade */
@media (max-width: 1024px) {
    .h1, .h2, .h3, p {
        text-align: center;
    }

    p {font-size: 15px;}

    #menu-nav .content {
        .menu-trigger {
            display: flex;
        }

        .links {
            position: fixed;
            flex-direction: column;
            gap: .4rem;
            top: 75px;
            left: 0;
            width: 100%;
            background-color: var(--light-grey);
            padding: .8rem;
            border-radius: 0 0 8px 8px;
            transform: rotateX(90deg);
            transform-origin: top;
            transition: all .4s;
            opacity: 0;

            &.active {
                opacity: 1;
                transform: rotateX(0);
            }

            li {
                width: 100%;

                a {
                    display: block;
                    text-align: center;
                }
            }
        }
    }

    #container {
        #header .content {
            padding: 3.5rem 1rem 1rem;
            flex-direction: column;
            gap: 2.5rem;

            .part {
                width: 100%;

                &.text-content {
                    align-items: center;
                    gap: 2rem;
                }
            }
        }

        #about .content .main-content {
            flex-direction: column;
            gap: 2.5rem;

            .image {
                width: 80%;

                img {
                    aspect-ratio: 1 / .6;
                    height: auto;
                }
            }

            .texts {
                width: 100%;
            }
        }

        #metrics .content .main-content {
            flex-direction: column;
            gap: 2rem;

            .texts, .big-numbers {
                width: 100%;
            }

            .big-numbers {
                gap: 1rem;

                .big-number .count .value {
                    font-size: 40px;
                }
            }
        }

        #comparison .content {
            flex-direction: column;
            gap: 3rem;

            .part {
                width: 100%;
                gap: 1.5rem;

                .title-heading::after {
                    left: 50%;
                    transform: translateX(-50%);
                }

                .points .point {
                    height: auto;
                }
            }
        }

        #faq .content .items .item .answer p {
            text-align: start;
        }
    }

    #footer .content {
        align-items: center;
        gap: 2rem;

        .infos {
            flex-direction: column-reverse;
            align-items: center;
            gap: 1.3rem;

            &, .links {
                width: 100%;
                align-items: center;
            }
        }

        .bottom {
            justify-content: center;
        }
    }
}

@media (max-width: 768px) {
    .form button[type="submit"], .btn-cta {
        font-size: 15px;
        padding: .4rem 1.3rem;
    }

    .form form .fields .form-group {
        &.w-1_2 {width: calc((100% - (var(--gap-fields))) / 2) !important;}
        &.w-1_3 {width: calc((100% - (var(--gap-fields) * 2)) / 3) !important;}
    }
}

@media (max-width: 550px) {
    .form form .fields .form-group {
        &.w-1_2 {width: 100% !important;}
        &.w-1_3 {width: calc((100% - (var(--gap-fields) * 1)) / 2) !important;}
    }

    #container {
        #header .content .part.text-content {
            gap: 1.3rem;
        }

        #about .content .main-content .image {
            width: 100%;
        }

        #metrics .content .main-content .big-numbers {
            flex-direction: column;
            gap: .7rem;
            
            .big-number {
                width: 100%;

                .count .value {
                    font-size: 32px;
                }
            }
        }

        #comparison .content .part .points .point {
            font-size: 14px;
        }

        #faq .content .items .item {
            .question {font-size: 14px;}

            .answer p {
                font-size: 14px;
            }
        }
    }

    #footer .content {
        .infos {
            .links a {
                font-size: 15px;
            }

            .social-media a svg {
                width: 20px;
                height: 20px;
            }
        }

        .bottom .copyright {
            gap: .1rem;

            p {font-size: 12px;}
        }
    }

    #wpp-flutuante {
        bottom: .8rem;
        right: .8rem;
    }
    #wpp-form {
        bottom: 6rem;
        width: 100%;
        padding: 0 1rem;
        box-shadow: none;

        &.active {right: 0;}

        .content {
            box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
            border-radius: 8px;

            &, .title, form {
                width: 100%;
            }
        }
    }
}