/* ==================================================
   VARIÁVEIS
================================================== */

:root {

    /* COR PRINCIPAL DA LOGO */
    --primary: #F7931E;

    /* HOVER */
    --primary-dark: #E08B00;

    /* FUNDO ESCURO */
    --secondary: #1F1F1F;

    /* TÍTULOS */
    --title: #2A2A2A;

    /* TEXTO */
    --text: #5A5A5A;

    /* FUNDOS */
    --bg-light: #F8F9FB;

    /* BRANCO */
    --white: #FFFFFF;

    /* BORDAS */
    --border: #D9DDE4;

    /* SOMBRAS */
    --shadow: 0 15px 40px rgba(0,0,0,.08);

    --transition: all .3s ease;
}

/* ==================================================
   HERO PADRÃO DE PÁGINAS INTERNAS
================================================== */

.page-hero {

    background: var(--secondary);

    color: var(--white);

    min-height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;

}

.page-hero h1 {

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 700;

}

/* ==================================================
   SEÇÕES DE CONTEÚDO
================================================== */

.content-section {

    padding: 80px 0;

}

.content-section .container {

    max-width: 900px;

}

.content-section.text-center .container {

    text-align: center;

}

/* ==================================================
   CTA PADRÃO
================================================== */

.section-cta {
    background: var(--secondary);
    color: var(--white);
    text-align: center;
    padding: 100px 20px;
}

.section-cta h2 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 4vw, 3rem);
}

.section-cta p {
    max-width: 800px;
    margin: 0 auto 35px;
    opacity: .9;
}

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

@media (max-width: 992px) {
    .cta-btn,
    .cta-btn:visited {
        background: #F7931E !important;
        color: #fff !important;
    }

    .secondary-btn {
        border-color: #F7931E !important;
        color: #F7931E !important;
    }

    .secondary-btn:hover {
        background: #F7931E !important;
        color: #fff !important;
    }

    .whatsapp-floating-btn {
    background: #F7931E !important;;
    color: #ffffff !important;
    }

    .whatsapp-floating-btn:hover {
        background: #e5830f !important;
        color: #ffffff !important;
    }

    .whatsapp-floating-btn i {
        color: #ffffff !important;
    }
}

/* ==================================================
   FORÇA CORES DA MARCA NO MOBILE
================================================== */

@media (max-width: 768px) {

    .cta-btn,
    .cta-btn:visited {

        background: #F7931E !important;

        color: #FFFFFF !important;

    }

    .secondary-btn {

        border-color: #F7931E !important;

        color: #F7931E !important;

        background: transparent !important;

    }

    .secondary-btn:hover {

        background: #F7931E !important;

        color: #FFFFFF !important;

    }

    .whatsapp-floating-btn {

        background: #F7931E !important;

        color: #FFFFFF !important;

    }

    .whatsapp-floating-btn i {

        color: #FFFFFF !important;

    }

    .back-to-top {

        background: #2C2C2C !important;

        color: #FFFFFF !important;

    }

    .back-to-top:hover {

        background: #F7931E !important;

    }

}

@media (max-width: 576px) {  

    .cta-btn,
    .cta-btn:visited {
        background: #F7931E !important;
        color: #fff !important;
    }
    .secondary-btn {
        border-color: #F7931E !important;
        color: #F7931E !important;
    }
    .secondary-btn:hover {
        background: #F7931E !important;
        color: #fff !important;
    }

    .whatsapp-floating-btn {
    background: #F7931E !important;;
    color: #ffffff !important;
    }

    .whatsapp-floating-btn:hover {
        background: #e5830f !important;
        color: #ffffff !important;
    }
}