/* ==================================================
   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;
}

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

@media (max-width: 768px) {

    /* BOTÕES DE CTA */
    .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;
    }

    /* BOTÃO FLUTUANTE DO WHATSAPP */
    .whatsapp-floating-btn {
        background: #25D366 !important;
        color: #ffffff !important;
    }
    /* BOTÃO FLUTUANTE DO WHATSAPP */
    .whatsapp-floating-btn:hover {
        background: #25D366 !important;
        color: #ffffff !important;
    }

    /* BOTÃO DE VOLTAR AO TOPO DA PÁGINA */
    .back-to-top {
        background: #2C2C2C !important;
        color: #FFFFFF !important;
    }

    .back-to-top:hover {
        background: #2C2C2C !important;
    }
}

@media (max-width: 576px) {  
    /* BOTÕES DE CTA */
    .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;
    }
    /* BOTÃO FLUTUANTE DO WHATSAPP */
    .whatsapp-floating-btn {
        background: #25D366 !important;
        color: #ffffff !important;
    }
    /* BOTÃO FLUTUANTE DO WHATSAPP */
    .whatsapp-floating-btn:hover {
        background: #25D366 !important;
        color: #ffffff !important;
    }
    /* BOTÃO DE VOLTAR AO TOPO DA PÁGINA */
    .back-to-top {
        background: #2C2C2C !important;
        color: #FFFFFF !important;
    }

    .back-to-top:hover {
        background: #2C2C2C !important;
    }
}