/*
Theme Name: Solutions Cobrança
Theme URI: https://solutionscobrancas.com.br
Author: Solutions Team
Author URI: https://solutionscobrancas.com.br
Description: Tema profissional customizado para Solutions Cobrança - Assessoria de cobrança & Empresarial. Versão 1.2 com recursos avançados: barra de certificações animada (letreiro digital em mobile), header personalizável com botão CTA responsivo, rodapé totalmente customizável (cores, widgets, layout de colunas), galeria de clientes, seções personalizáveis e muito mais. 100% responsivo e otimizado para performance.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solutions-theme
Tags: business, corporate, responsive, custom-colors, customizable-footer, certification-bar, animated-marquee, widget-ready, translation-ready

Solutions Cobrança v1.2 - Tema profissional sem dependência de page builders
Changelog v1.2:
- Barra de certificados com animação de letreiro digital no mobile
- Header mobile otimizado com botão CTA centralizado
- Rodapé totalmente personalizável (cores, textos, widgets, layout)
- 4 áreas de widgets no rodapé com layout flexível (1-4 colunas)
- Sistema completo de cores para footer (títulos, textos, links, ícones sociais)
- Copyright customizável com suporte a HTML
- Melhorias na centralização de logos de certificados
- Performance e responsividade aprimoradas
*/

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #0347A9;
    --color-secondary: #FDFE04;
    --color-dark: #1A1A1A;
    --color-light: #F9F9F9;
    --color-white: #FFFFFF;
    --color-text: #324059;
    --color-text-light: #94A0B6;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-fluid {
    max-width: 100%;
    padding: 0;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-white {
    color: var(--color-white);
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-50 {
    margin-bottom: 50px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

h1 {
    font-size: 4.5em;
    letter-spacing: 0.4px;
}

h2 {
    font-size: 2.8em;
}

h3 {
    font-size: 1.8em;
}

p {
    margin-bottom: 15px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 15px 40px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    border-color: var(--color-secondary);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-outline:hover {
    background-color: var(--color-secondary);
    color: var(--color-dark);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000;
}

.main-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo img {
    max-height: 60px;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-menu li {
    display: inline-block;
}

.nav-menu a {
    color: var(--color-white);
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s;
    display: block;
}

.nav-menu a:hover {
    color: var(--color-secondary);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 24px;
    cursor: pointer;
}

/* Header CTA Button */
.header-cta-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-cta-btn {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.header-cta-btn:hover {
    background-color: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}


/* Diagnostic Button - Animated Border */
@keyframes diagBorderAnim {
    0%, 100% {
        border-color: #FDFE04;
        box-shadow: 0 0 8px rgba(253, 254, 4, 0.4), inset 0 0 0 0 transparent;
    }
    50% {
        border-color: #0347A9;
        box-shadow: 0 0 8px rgba(3, 71, 169, 0.5), inset 0 0 0 0 transparent;
    }
}

.header-diag-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 5px;
    border: 2px solid #FDFE04;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-decoration: none;
    background: transparent;
    white-space: nowrap;
    animation: diagBorderAnim 2s ease-in-out infinite;
    transition: color 0.3s ease;
}

.header-diag-btn:hover {
    color: #FDFE04;
}

/* Mobile Menu */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .main-navigation {
        flex-direction: column;
        align-items: stretch;
        position: relative;
    }

    .header-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .header-cta-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        order: 3;
        margin-top: 15px;
        padding: 0 20px;
    }

    .header-cta-btn {
        display: inline-block;
        text-align: center;
        padding: 12px 24px;
        width: auto;
        min-width: 160px;
    }

    .header-diag-btn {
        font-size: 12px;
        padding: 10px 18px;
    }

    .nav-menu {
        left: auto;
        transform: none;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--color-dark);
        flex-direction: column;
        padding: 80px 30px 30px;
        transition: right 0.3s ease;
        z-index: 999;
        order: 2;
        gap: 0;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ==========================================================================
   This is just the foundation. Continue to next message for complete CSS...
   ========================================================================== */