/* --- CONFIGURAÇÃO DE LAYOUT --- */
.header-principal {
    width: 100%;
    padding: 0px 0;
    background: transparent;
}

.container-header {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 0px;
}

/* --- LOGO --- */
.logo-wrapper {
    display: flex;
    justify-content: var(--logo-align);
}

.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    padding: 10px 20px;
    box-sizing: border-box;
    text-align: center;
    
    /* Variáveis vindas do PHP */
    color: var(--logo-cor);
    background-color: var(--logo-bg);
    font-size: var(--logo-tamanho);
    font-family: var(--logo-familia), sans-serif;
    font-weight: var(--logo-peso);
    width: var(--logo-width);
    height: var(--logo-height);
    border-radius: var(--logo-radius);
    border: var(--logo-border-width) solid var(--logo-border-color);
}

/* --- MENU --- */
.nav-menu {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-menu-custom {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.3s ease;
    
    border-radius: var(--menu-radius);
    font-size: var(--menu-tamanho);
    font-family: var(--menu-familia), sans-serif;
    font-weight: var(--menu-peso);
    width: var(--menu-width);
    height: var(--menu-height);
    border: var(--menu-border-width) solid var(--menu-border-color);
}

/* --- CAIXA DE INFORMAÇÕES --- */
.info-wrapper {
    display: flex;
    justify-content: center;
}

.info-box {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: var(--info-bg);
    border: var(--info-border-width) solid var(--info-border-color);
    border-radius: var(--info-radius);
    width: var(--info-width);
    min-height: var(--info-height);
    font-family: var(--info-familia), sans-serif;
}

.frase-estilo-dinamica {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: var(--cat-cor);
    font-size: var(--cat-tamanho);
    font-family: var(--cat-familia), sans-serif;
    text-align: var(--cat-align);
}

/* --- RESPONSIVIDADE (MOBILE) --- */
.quebra-celular { display: none; }

@media (max-width: 600px) {
    .header-principal { 
        padding: 0px 0 !important; 
    }
    
    .container-header {
        gap: 20px !important;
        padding: 0 5px !important;
    }

    .quebra-celular { 
        display: block; 
    }
    
    .logo-box { 
        width: 100% !important; 
        max-width: 100% !important; 
        font-size: 1.7rem !important; 
        height: auto !important;
        line-height: 1.2 !important;
        padding: 15px !important;
    }
    
    .nav-menu {
        gap: 10px !important;
    }

    .btn-menu-custom { 
        width: 47% !important; 
        height: 45px !important; 
        font-size: 13px !important; 
    }
    
    .info-box { 
        width: 100% !important; 
        min-height: auto !important;
        padding: 15px !important;
    }

    .frase-estilo-dinamica {
        font-size: 0.9rem !important;
    }
}