/* =========================================
   PÁGINA DE CONTATO
========================================= */

.contato {

    min-height: 100vh;

    padding: 140px 20px 80px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    background:

        linear-gradient(
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.72)
        ),

        url("fundo.jpeg")

        center / cover no-repeat;

}







/* =========================================
   CAIXA PRINCIPAL
========================================= */

.formulario {

    width: 100%;

    max-width: 720px;

    padding: 45px;

    background:
        rgba(29, 29, 29, 0.96);

    border:
        1px solid
        rgba(95, 175, 29, 0.45);

    border-radius: 12px;

    box-shadow:

        0 25px 80px
        rgba(0, 0, 0, 0.60);

    backdrop-filter:
        blur(10px);

}


/* =========================================
   CABEÇALHO
========================================= */

.contact-form-header {

    text-align: center;

    margin-bottom: 35px;

}

.header {
    background-color: transparent;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: var(--spacing-sm) 0;

    transition: var(--transition-normal);
}

/* NAVBAR NORMAL */
.nav-menu {
    position: static;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 45px;

    box-shadow: none;
}

/* NAVBAR QUANDO ROLAR */
.header.scrolled {
    background-color: #1a2015;

    box-shadow: var(--shadow-sm);

    padding: var(--spacing-xs) 0;
}

.contact-subtitle {

    color:
        var(--secondary);

    font-size:
        0.95rem;

    font-weight:
        600;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    margin-bottom:
        10px;

}


.contact-form-header h1 {

    color:
        var(--white);

    font-size:
        2.6rem;

    font-weight:
        600;

    margin-bottom:
        15px;

}


.contact-description {

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        0.95rem;

    line-height:
        1.7;

    max-width:
        560px;

    margin:
        0 auto;

}


/* =========================================
   FORMULÁRIO
========================================= */

#contactForm {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.form-group label {

    color:
        var(--white);

    font-size:
        0.9rem;

    font-weight:
        500;

}


.form-group small {

    color:
        rgba(255, 255, 255, 0.45);

    font-size:
        0.75rem;

}


/* =========================================
   INPUTS
========================================= */

.form-group input,
.form-group select,
.form-group textarea {

    width:
        100%;

    padding:
        14px 16px;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        5px;

    color:
        var(--white);

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

    font-size:
        0.95rem;

    outline:
        none;

    transition:
        0.3s ease;

    box-sizing:
        border-box;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        rgba(255, 255, 255, 0.4);

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        var(--secondary);

    background:
        rgba(255, 255, 255, 0.10);

    box-shadow:
        0 0 0 3px
        rgba(95, 175, 29, 0.12);

}


/* =========================================
   SELECT
========================================= */

.form-group select {

    cursor:
        pointer;

}


.form-group select option {

    background:
        var(--dark);

    color:
        var(--white);

}


/* =========================================
   TEXTAREA
========================================= */

.form-group textarea {

    min-height:
        140px;

    resize:
        vertical;

}


/* =========================================
   BOTÃO ENVIAR
========================================= */

.btn-enviar {

    width:
        100%;

    margin-top:
        10px;

    padding:
        16px;

    border:
        none;

    border-radius:
        5px;

    background:
        var(--secondary);

    color:
        var(--dark);

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

    font-size:
        1rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        0.3s ease;

}


.btn-enviar:hover {

    background:
        var(--secondary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.35);

}


.btn-enviar i {

    margin-right:
        8px;

}


/* =========================================
   MENSAGEM DE SUCESSO
========================================= */

.mensagem-sucesso {

    display:
        none;

    text-align:
        center;

    padding:
        10px 0 5px;

}


.mensagem-sucesso.mostrar {

    display:
        block;

    animation:
        aparecer 0.6s ease;

}


/* =========================================
   ÍCONE DE SUCESSO
========================================= */

.sucesso-icone {

    width:
        82px;

    height:
        82px;

    margin:
        0 auto 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--secondary);

    color:
        var(--dark);

    font-size:
        2rem;

    box-shadow:

        0 0 0 10px
        rgba(95, 175, 29, 0.10),

        0 10px 35px
        rgba(95, 175, 29, 0.20);

    animation:
        sucessoPulse 1.8s infinite;

}


/* =========================================
   TÍTULO
========================================= */

.mensagem-sucesso h2 {

    color:
        var(--white);

    font-size:
        2rem;

    font-weight:
        600;

    margin-bottom:
        12px;

}


.sucesso-descricao {

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        0.95rem;

    line-height:
        1.8;

    margin-bottom:
        28px;

}


.mensagem-sucesso p strong {

    color:
        var(--secondary);

}


/* =========================================
   RESUMO DA SOLICITAÇÃO
========================================= */

.resumo-solicitacao {

    text-align:
        left;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        10px;

    overflow:
        hidden;

    margin-bottom:
        25px;

}


/* =========================================
   TÍTULO DO RESUMO
========================================= */

.resumo-titulo {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        17px 20px;

    background:
        rgba(95, 175, 29, 0.10);

    border-bottom:
        1px solid
        rgba(95, 175, 29, 0.18);

    color:
        var(--secondary);

    font-size:
        0.9rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

}


.resumo-titulo i {

    font-size:
        1rem;

}


/* =========================================
   ITENS DO RESUMO
========================================= */

.resumo-item {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        14px 20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);

}


.resumo-item span {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        0.82rem;

}


.resumo-item span i {

    width:
        16px;

    color:
        var(--secondary);

}


.resumo-item strong {

    color:
        var(--white);

    font-size:
        0.85rem;

    font-weight:
        500;

    text-align:
        right;

    word-break:
        break-word;

}


/* =========================================
   MENSAGEM DO RESUMO
========================================= */

.resumo-mensagem {

    padding:
        16px 20px;

}


.resumo-mensagem > span {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        0.82rem;

    margin-bottom:
        9px;

}


.resumo-mensagem > span i {

    color:
        var(--secondary);

}


.resumo-mensagem p {

    margin:
        0;

    padding:
        12px;

    background:
        rgba(0, 0, 0, 0.18);

    border-radius:
        5px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        0.84rem;

    line-height:
        1.6;

    word-break:
        break-word;

}


/* =========================================
   BOX WHATSAPP
========================================= */

.whatsapp-box {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    text-align:
        left;

    padding:
        17px;

    margin-bottom:
        15px;

    background:
        rgba(37, 211, 102, 0.08);

    border:
        1px solid
        rgba(37, 211, 102, 0.20);

    border-radius:
        8px;

}


/* ÍCONE */

.whatsapp-icon {

    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #25D366;

    color:
        #ffffff;

    font-size:
        1.5rem;

}


/* TEXTO */

.whatsapp-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.whatsapp-text strong {

    color:
        var(--white);

    font-size:
        0.9rem;

}


.whatsapp-text span {

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.78rem;

    line-height:
        1.5;

}


/* =========================================
   BOTÃO WHATSAPP
========================================= */

.btn-whatsapp {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    width:
        100%;

    padding:
        16px;

    box-sizing:
        border-box;

    border-radius:
        5px;

    background:
        #25D366;

    color:
        #071a0d;

    text-decoration:
        none;

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

    font-size:
        0.95rem;

    font-weight:
        700;

    transition:
        0.3s ease;

}


.btn-whatsapp:hover {

    background:
        #20bd5b;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(37, 211, 102, 0.20);

}


.btn-whatsapp i:last-child {

    font-size:
        0.8rem;

    transition:
        0.3s ease;

}


.btn-whatsapp:hover i:last-child {

    transform:
        translateX(4px);

}


/* =========================================
   BOTÃO VOLTAR
========================================= */

.btn-voltar {

    width:
        100%;

    margin-top:
        10px;

    padding:
        12px;

    background:
        transparent;

    border:
        none;

    color:
        rgba(255, 255, 255, 0.48);

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

    font-size:
        0.82rem;

    cursor:
        pointer;

    transition:
        0.3s ease;

}


.btn-voltar:hover {

    color:
        var(--white);

}


.btn-voltar i {

    margin-right:
        6px;

}


/* =========================================
   SEGURANÇA
========================================= */

.seguranca {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        12px;

    color:
        rgba(255, 255, 255, 0.35);

    font-size:
        0.72rem;

}


.seguranca i {

    color:
        var(--secondary);

}


/* =========================================
   ANIMAÇÕES
========================================= */

@keyframes aparecer {

    from {

        opacity:
            0;

        transform:
            translateY(25px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes sucessoPulse {

    0%,
    100% {

        box-shadow:

            0 0 0 10px
            rgba(95, 175, 29, 0.10),

            0 10px 35px
            rgba(95, 175, 29, 0.20);

    }

    50% {

        box-shadow:

            0 0 0 16px
            rgba(95, 175, 29, 0.04),

            0 10px 45px
            rgba(95, 175, 29, 0.30);

    }

}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 768px) {

    .contato {

        padding:
            120px 15px 50px;

    }


    .formulario {

        padding:
            32px 24px;

    }


    .contact-form-header h1 {

        font-size:
            2.1rem;

    }


    .resumo-item {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

    }


    .resumo-item strong {

        text-align:
            left;

        padding-left:
            25px;

    }

}


@media (max-width: 480px) {

    .contato {

        padding:
            110px 12px 40px;

    }


    .formulario {

        padding:
            25px 18px;

    }


    .contact-form-header h1 {

        font-size:
            1.8rem;

    }


    .contact-description {

        font-size:
            0.88rem;

    }


    .btn-enviar {

        padding:
            14px;

    }


    .mensagem-sucesso h2 {

        font-size:
            1.65rem;

    }


    .whatsapp-box {

        align-items:
            flex-start;

    }


    .whatsapp-icon {

        width:
            42px;

        height:
            42px;

        font-size:
            1.3rem;

    }


    .whatsapp-text span {

        font-size:
            0.74rem;

    }


    .seguranca {

        text-align:
            center;

        line-height:
            1.5;

    }

}