/* css/header.css - Estilos do cabeçalho do SinteFramo - Esquema Claro */
/* Versão otimizada para imagens de logo e melhor contraste visual */

/* ============================================
   VARIÁVEIS CSS - CONFIGURAÇÕES CENTRALIZADAS
   ============================================ */
:root {
    /* PALETA DE CORES - Esquema claro profissional */
    --cor-principal-roxo: #b65db9;               /* Roxo principal vibrante */
    --cor-principal-roxo-escuro: #6a1eb9;        /* Roxo escuro para hover */
    --cor-fundo-claro: #f8f9fa;                  /* Fundo cinza muito claro */
    --cor-fundo-header: #ffffff;                 /* Branco puro para header */
    --cor-fundo-nav: #ffffff;                    /* Branco para navegação */
    --cor-texto-escuro: #2c3e50;                 /* Azul escuro para textos */
    --cor-texto-cinza: #5a6c7d;                  /* Cinza para textos secundários */
    --cor-texto-claro: #ffffff;                  /* Branco para contraste */
    --cor-borda-clara: #e1e5e9;                  /* Cinza claro para bordas */
    --cor-fundo-hover: rgba(138, 43, 226, 0.1);  /* Roxo claro para hover */
    --cor-sombra-sutil: rgba(44, 62, 80, 0.08);  /* Sombra sutil azulada */
    
    /* SOMBRAS - Leves para design moderno */
    --sombra-header: 0 2px 8px var(--cor-sombra-sutil);
    --sombra-nav: 0 2px 6px rgba(44, 62, 80, 0.05);
    --sombra-logo: 0 3px 8px rgba(0, 0, 0, 0.1);
    --sombra-card: 0 2px 6px rgba(0, 0, 0, 0.05);
    
    /* ESPAÇAMENTOS - Sistema consistente */
    --espacamento-xl: 25px;                      /* Espaçamento extra grande */
    --espacamento-lg: 20px;                      /* Espaçamento grande */
    --espacamento-md: 15px;                      /* Espaçamento médio */
    --espacamento-sm: 10px;                      /* Espaçamento pequeno */
    --espacamento-xs: 5px;                       /* Espaçamento mínimo */
    
    /* BORDAS E RAIO */
    --borda-grossa: 4px;                         /* Borda principal */
    --borda-media: 3px;                          /* Borda média */
    --borda-fina: 2px;                           /* Borda fina */
    --borda-ultrafina: 1px;                      /* Borda muito fina */
    --raio-borda-md: 8px;                        /* Raio médio */
    --raio-borda-sm: 6px;                        /* Raio pequeno */
    --raio-borda-xs: 4px;                        /* Raio mínimo */
    
    /* TIPOGRAFIA - Hierarquia clara */
    --fonte-xxl: 26px;                           /* Título extra grande */
    --fonte-xl: 22px;                            /* Título grande */
    --fonte-lg: 18px;                            /* Texto grande */
    --fonte-md: 16px;                            /* Texto médio */
    --fonte-sm: 14px;                            /* Texto pequeno */
    --fonte-xs: 12px;                            /* Texto muito pequeno */
    
    /* PESOS DE FONTE */
    --peso-black: 900;                           /* Extra negrito */
    --peso-bold: 700;                            /* Negrito */
    --peso-semi-bold: 600;                       /* Semi negrito */
    --peso-medium: 500;                          /* Médio */
    
    /* ALTURAS DE LINHA */
    --altura-linha-normal: 1.4;                  /* Espaçamento normal */
    --altura-linha-titulo: 1.2;                  /* Títulos mais compactos */
    
    /* DIMENSÕES DE LOGO */
    --largura-logo-desktop: 120px;               /* Logo desktop */
    --altura-logo-desktop: auto;                 /* Altura automática */
    --largura-logo-mobile: 80px;                 /* Logo mobile */
    
    /* OUTRAS DIMENSÕES */
    --largura-maxima-texto: 400px;               /* Limite de texto */
    --largura-input-busca: 200px;                /* Input busca desktop */
    
    /* TRANSFORMAÇÕES E TRANSIÇÕES */
    --transicao-padrao: all 0.3s ease;           /* Transição suave */
    --transicao-rapida: all 0.2s ease;           /* Transição rápida */
    
    /* Z-INDEX - Camadas */
    --z-index-nav: 1000;                         /* Navegação acima */
    --z-index-menu-toggle: 1001;                 /* Botão menu acima */
    --z-index-menu-mobile: 1000;                 /* Menu mobile */
    
    /* BREAKPOINTS - Responsividade */
    --breakpoint-desktop: 1024px;                /* Desktop */
    --breakpoint-tablet: 768px;                  /* Tablet */
    --breakpoint-mobile: 480px;                  /* Mobile */
}

/* ============================================
   RESET E ESTILOS GERAIS DO HEADER
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;                      /* Inclui padding/border no cálculo de largura */
}

/* ============================================
   HEADER SUPERIOR - ÁREA DE LOGO
   ============================================ */
.header-superior {
    background: var(--cor-fundo-header);          /* Fundo branco puro */
    padding: var(--espacamento-lg) 0;             /* Espaçamento vertical */
    border-bottom: var(--borda-grossa) solid var(--cor-principal-roxo); /* Linha roxa */
    box-shadow: var(--sombra-header);             /* Sombra sutil */
}

/* Container do conteúdo do header */
.header-content {
    display: flex;                                /* Layout flexível */
    align-items: center;                          /* Alinha verticalmente */
    justify-content: space-between;               /* Distribui espaço */
    flex-wrap: wrap;                              /* Quebra linha em mobile */
    gap: var(--espacamento-lg);                   /* Espaço entre elementos */
}

/* ============================================
   SEÇÃO DA LOGO
   ============================================ */
.logo-section {
    display: flex;                                /* Layout flexível */
    align-items: center;                          /* Alinha verticalmente */
    gap: var(--espacamento-lg);                   /* Espaço entre logo e texto */
    text-decoration: none;                        /* Remove sublinhado do link */
    color: inherit;                               /* Herda cor do texto */
}

/* Container da logo (mantém estrutura HTML existente) */
.logo {
    display: block;                               /* Remove espaços indesejados */
    line-height: 0;                               /* Remove espaço abaixo da imagem */
}

/* Imagem da logo */
.logo img {
    width: var(--largura-logo-desktop);           /* Largura fixa desktop */
    height: var(--altura-logo-desktop);           /* Altura automática */
    display: block;                               /* Remove espaço abaixo */
    object-fit: contain;                          /* Mantém proporção da imagem */
}

/* Container do texto da logo */
.logo-texto {
    display: flex;                                /* Layout flexível */
    flex-direction: column;                       /* Textos em coluna */
    justify-content: center;                      /* Centraliza verticalmente */
}

/* Título principal da logo */
.logo-titulo {
    font-size: var(--fonte-xxl);                  /* Tamanho grande */
    font-weight: var(--peso-black);               /* Negrito forte */
    color: var(--cor-texto-escuro);               /* Texto escuro */
    text-transform: uppercase;                    /* Tudo maiúsculo */
    margin-bottom: var(--espacamento-xs);         /* Espaço abaixo */
    line-height: var(--altura-linha-titulo);      /* Linha compacta */
    letter-spacing: 0.5px;                        /* Espaçamento entre letras */
}

/* Subtítulo da logo */
.logo-subtitulo {
    font-size: var(--fonte-md);                   /* Tamanho médio */
    color: var(--cor-texto-cinza);                /* Cinza para contraste */
    font-weight: var(--peso-medium);              /* Peso médio */
    max-width: var(--largura-maxima-texto);       /* Limite de largura */
    line-height: var(--altura-linha-normal);      /* Espaçamento normal */
}

/* ============================================
   NAVEGAÇÃO PRINCIPAL
   ============================================ */
.nav-principal {
    background-color: var(--cor-fundo-nav);       /* Fundo branco */
    box-shadow: var(--sombra-nav);                /* Sombra leve */
    border-bottom: var(--borda-fina) solid var(--cor-principal-roxo); /* Linha fina roxa */
    position: sticky;                             /* Fixa ao rolar */
    top: 0;                                       /* No topo da viewport */
    z-index: var(--z-index-nav);                  /* Acima de outros elementos */
}

/* Container interno da navegação */
.nav-container {
    display: flex;                                /* Layout flexível */
    justify-content: space-between;               /* Menu e busca separados */
    align-items: center;                          /* Centraliza verticalmente */
    padding: 0 var(--espacamento-lg);             /* Padding lateral */
    position: relative;                           /* Para posicionamento absoluto */
}

/* ============================================
   MENU PRINCIPAL
   ============================================ */
/* Lista do menu */
.menu {
    display: flex;                                /* Itens lado a lado */
    list-style: none;                             /* Remove marcadores */
    margin: 0;                                    /* Remove margem padrão */
    padding: 0;                                   /* Remove padding padrão */
}

/* Item individual do menu */
.menu-item {
    position: relative;                           /* Para submenus (se houver) */
}

/* Links do menu */
.menu-link {
    display: flex;                                /* Layout flex para ícone e texto */
    align-items: center;                          /* Centraliza verticalmente */
    gap: var(--espacamento-sm);                   /* Espaço entre ícone e texto */
    padding: 18px var(--espacamento-lg);          /* Espaçamento interno */
    font-weight: var(--peso-semi-bold);           /* Semi negrito */
    color: var(--cor-texto-escuro);               /* Texto escuro */
    text-decoration: none;                        /* Remove sublinhado */
    text-transform: uppercase;                    /* Texto maiúsculo */
    font-size: var(--fonte-md);                   /* Tamanho médio */
    transition: var(--transicao-padrao);          /* Transição suave */
    position: relative;                           /* Para linha decorativa */
}

/* Ícones dentro dos links do menu */
.menu-link i {
    font-size: var(--fonte-lg);                   /* Ícones um pouco maiores */
    width: 20px;                                  /* Largura fixa para alinhamento */
    text-align: center;                           /* Centraliza ícone */
}

/* Efeito hover nos links */
.menu-link:hover {
    background-color: var(---cor-principal-roxo);     /* Fundo roxo claro */
    color: var(--cor-texto-roxo);             /* Texto roxo */
}

/* Link ativo (página atual) */
.menu-link.active {
    background-color: var(--cor-principal-roxo);  /* Fundo roxo */
    color: var(--cor-texto-claro);                /* Texto branco */
}

/* Linha decorativa animada abaixo dos links */
.menu-link::after {
    content: '';                                  /* Conteúdo vazio */
    position: absolute;                           /* Posição absoluta */
    bottom: 0;                                    /* Na base do link */
    left: 50%;                                    /* Centralizada horizontalmente */
    transform: translateX(-50%);                  /* Ajuste de centralização */
    width: 0;                                     /* Inicialmente invisível */
    height: var(--borda-fina);                    /* Altura da linha */
    background-color: var(--cor-principal-roxo);  /* Cor roxa */
    transition: var(--transicao-rapida);          /* Animação rápida */
}

/* Expandir linha no hover */
.menu-link:hover::after {
    width: 80%;                                   /* 80% da largura do link */
}

/* ============================================
   BOTÃO MENU MOBILE (HAMBURGUER)
   ============================================ */
.menu-toggle {
    display: none;                                /* Oculto por padrão (desktop) */
    background: var(--cor-principal-roxo);        /* Fundo roxo */
    color: var(--cor-texto-claro);                /* Ícone branco */
    border: none;                                 /* Remove borda padrão */
    padding: var(--espacamento-sm) var(--espacamento-md); /* Espaçamento interno */
    border-radius: var(--raio-borda-sm);          /* Bordas arredondadas */
    cursor: pointer;                              /* Cursor de mão */
    font-size: var(--fonte-lg);                   /* Tamanho do ícone */
    position: absolute;                           /* Posicionamento fixo no mobile */
    right: var(--espacamento-lg);                 /* Alinhado à direita */
    top: 50%;                                     /* Centralizado verticalmente */
    transform: translateY(-50%);                  /* Ajuste de centralização */
    z-index: var(--z-index-menu-toggle);          /* Acima do menu */
}

/* ============================================
   CAIXA DE BUSCA
   ============================================ */
.search-box {
    display: flex;                                /* Input e botão lado a lado */
    align-items: center;                          /* Centralizados verticalmente */
    margin-left: var(--espacamento-lg);           /* Espaço do menu */
}

/* Campo de input da busca */
.search-input {
    padding: var(--espacamento-sm) 12px;          /* Espaçamento interno */
    border: var(--borda-ultrafina) solid var(--cor-borda-clara); /* Borda clara */
    border-radius: var(--raio-borda-xs) 0 0 var(--raio-borda-xs); /* Arredondado esquerda */
    width: var(--largura-input-busca);            /* Largura fixa desktop */
    background: var(--cor-fundo-claro);           /* Fundo cinza claro */
    color: var(--cor-texto-escuro);               /* Texto escuro */
    font-size: var(--fonte-md);                   /* Tamanho médio */
    transition: var(--transicao-rapida);          /* Transição rápida */
}

/* Foco no campo de busca */
.search-input:focus {
    outline: none;                                /* Remove contorno padrão */
    border-color: var(--cor-principal-roxo);      /* Borda roxa */
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.2); /* Sombra de foco */
}

/* Botão de busca */
.search-button {
    background: var(--cor-principal-roxo);        /* Fundo roxo */
    color: var(--cor-texto-claro);                /* Ícone branco */
    border: none;                                 /* Remove borda */
    padding: var(--espacamento-sm) var(--espacamento-md); /* Espaçamento */
    border-radius: 0 var(--raio-borda-xs) var(--raio-borda-xs) 0; /* Arredondado direita */
    cursor: pointer;                              /* Cursor de mão */
    font-size: var(--fonte-md);                   /* Tamanho do ícone */
    transition: var(--transicao-rapida);          /* Transição rápida */
}

/* Hover no botão de busca */
.search-button:hover {
    background: var(--cor-principal-roxo-escuro); /* Roxo mais escuro */
}

/* ============================================
   BREADCRUMB (NAVEGAÇÃO SECUNDÁRIA)
   ============================================ */
.breadcrumb {
    background: var(--cor-fundo-claro);           /* Fundo cinza claro */
    padding: var(--espacamento-sm) var(--espacamento-lg); /* Espaçamento */
    font-size: var(--fonte-md);                   /* Tamanho médio */
    color: var(--cor-texto-cinza);                /* Texto cinza */
    border-bottom: var(--borda-ultrafina) solid var(--cor-borda-clara); /* Linha divisória */
}

/* Links do breadcrumb */
.breadcrumb a {
    color: var(--cor-principal-roxo);             /* Roxo para links */
    text-decoration: none;                        /* Remove sublinhado */
    font-weight: var(--peso-semi-bold);           /* Semi negrito */
}

/* Hover nos links do breadcrumb */
.breadcrumb a:hover {
    text-decoration: underline;                   /* Sublinhado no hover */
    color: var(--cor-principal-roxo-escuro);      /* Roxo mais escuro */
}

/* Separador do breadcrumb */
.breadcrumb span {
    margin: 0 var(--espacamento-xs);              /* Espaço entre itens */
    color: var(--cor-texto-cinza);                /* Cinza para separadores */
}

/* ============================================
   RESPONSIVIDADE - TABLET (até 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Header superior em coluna */
    .header-content {
        flex-direction: column;                   /* Elementos em coluna */
        text-align: center;                       /* Texto centralizado */
        gap: var(--espacamento-md);               /* Espaço reduzido */
    }
    
    /* Seção da logo em coluna */
    .logo-section {
        flex-direction: column;                   /* Logo acima, texto abaixo */
        gap: var(--espacamento-md);               /* Espaço reduzido */
        width: 100%;                              /* Largura total */
        text-align: center;                       /* Centralizado */
    }
    
    /* Ajuste da imagem da logo */
    .logo img {
        width: var(--largura-logo-mobile);        /* Logo menor em mobile */
        margin: 0 auto;                           /* Centralizada */
    }
    
    /* Texto da logo ajustado */
    .logo-titulo {
        font-size: var(--fonte-xl);               /* Tamanho reduzido */
        margin-bottom: var(--espacamento-xs);     /* Espaço mínimo */
    }
    
    .logo-subtitulo {
        font-size: var(--fonte-sm);               /* Tamanho reduzido */
        max-width: 100%;                          /* Largura total */
    }
    
    /* Container da navegação */
    .nav-container {
        padding: var(--espacamento-sm);           /* Padding reduzido */
        padding-right: 70px;                      /* Espaço para botão hamburguer */
    }
    
    /* Botão menu mobile visível */
    .menu-toggle {
        display: block;                           /* Visível em mobile */
        right: var(--espacamento-md);             /* Posicionamento ajustado */
    }
    
    /* Menu oculto por padrão em mobile */
    .menu {
        display: none;                            /* Oculto inicialmente */
        flex-direction: column;                   /* Itens em coluna */
        position: absolute;                       /* Posicionamento absoluto */
        top: 100%;                                /* Abaixo da barra de navegação */
        left: 0;                                  /* Alinhado à esquerda */
        right: 0;                                 /* Alinhado à direita */
        background: var(--cor-fundo-header);      /* Fundo branco */
        box-shadow: var(--sombra-nav);            /* Sombra para destaque */
        z-index: var(--z-index-menu-mobile);      /* Acima do conteúdo */
        border-top: var(--borda-fina) solid var(--cor-borda-clara); /* Linha divisória */
    }
    
    /* Menu quando ativo (aberto) */
    .menu.show {
        display: flex;                            /* Visível quando aberto */
    }
    
    /* Itens do menu ocupam largura total */
    .menu-item {
        width: 100%;                              /* Largura completa */
    }
    
    /* Links do menu em mobile */
    .menu-link {
        padding: var(--espacamento-md) var(--espacamento-lg); /* Padding ajustado */
        border-bottom: var(--borda-ultrafina) solid var(--cor-borda-clara); /* Divisórias */
        width: 100%;                              /* Largura completa */
        justify-content: flex-start;              /* Alinhamento à esquerda */
    }
    
    /* Remove borda do último item */
    .menu-item:last-child .menu-link {
        border-bottom: none;                      /* Sem borda no último */
    }
    
    /* Remove linha decorativa em mobile */
    .menu-link::after {
        display: none;                            /* Não mostra animação em mobile */
    }
    
    /* Caixa de busca abaixo do menu */
    .search-box {
        margin-left: 0;                           /* Remove margem esquerda */
        margin-top: var(--espacamento-md);        /* Espaço acima */
        width: 100%;                              /* Largura completa */
    }
    
    /* Input de busca ocupa largura total */
    .search-input {
        width: 100%;                              /* Largura completa */
        flex: 1;                                  /* Expande para preencher espaço */
    }
}

/* ============================================
   RESPONSIVIDADE - MOBILE PEQUENO (até 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Título da logo menor */
    .logo-titulo {
        font-size: var(--fonte-lg);               /* Tamanho ainda menor */
    }
    
    /* Subtítulo menor */
    .logo-subtitulo {
        font-size: var(--fonte-xs);               /* Tamanho muito pequeno */
    }
    
    /* Links do menu ajustados */
    .menu-link {
        padding: var(--espacamento-sm) var(--espacamento-md); /* Padding reduzido */
        font-size: var(--fonte-sm);               /* Texto menor */
    }
    
    /* Ícones dentro dos links menores */
    .menu-link i {
        font-size: var(--fonte-md);               /* Ícones menores */
    }
    
    /* Botão menu mobile ajustado */
    .menu-toggle {
        padding: 8px 12px;                        /* Padding reduzido */
        font-size: var(--fonte-md);               /* Ícone menor */
    }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */
/* Remover animações para preferência reduzida */
@media (prefers-reduced-motion: reduce) {
    .menu-link,
    .menu-link::after,
    .search-button,
    .search-input {
        transition: none;                         /* Sem transições */
    }
}

/* Modo de alto contraste */
@media (prefers-contrast: high) {
    :root {
        --cor-principal-roxo: #5a00b5;            /* Roxo mais escuro */
        --cor-texto-escuro: #000000;              /* Preto puro */
        --cor-texto-cinza: #000000;               /* Preto para melhor contraste */
        --cor-borda-clara: #000000;               /* Bordas pretas */
    }
    
    /* Contorno para itens ativos */
    .menu-link.active {
        outline: 2px solid #000000;               /* Contorno preto */
    }
}

/* Foco visível para navegação por teclado */
.menu-link:focus,
.search-input:focus,
.search-button:focus,
.menu-toggle:focus {
    outline: 2px solid var(--cor-principal-roxo);  /* Contorno roxo */
    outline-offset: 2px;                           /* Espaçamento do contorno */
}

/* Remover estilos de foco para mouse/touch */
.menu-link:focus:not(:focus-visible),
.search-input:focus:not(:focus-visible),
.search-button:focus:not(:focus-visible),
.menu-toggle:focus:not(:focus-visible) {
    outline: none;                                 /* Sem contorno */
}
/* Adicione temporariamente para verificar */
.menu-link:hover {
    background-color: var(--cor-principal-roxo)!important; /* Teste com vermelho */
    color: white !important;
}

/* ============================================
   ESPAÇO DAS LOGOS DAS FILIAÇÕES
   ============================================ */

/* Container das logos das filiações */
.espaco-logos {
    display: flex;                                /* Layout flexível */
    align-items: center;                          /* Alinha verticalmente no centro */
    justify-content: flex-end;                    /* Alinha à direita no desktop */
    gap: var(--espacamento-md);                   /* Espaço entre as logos */
    flex-wrap: nowrap;                           /* Não quebra linha no desktop */
    margin-left: auto;                           /* Empurra para a direita no desktop */
    padding: var(--espacamento-sm);              /* Espaçamento interno */
    background: var(--cor-fundo-claro);          /* Fundo cinza claro */
    border-radius: var(--raio-borda-sm);         /* Bordas arredondadas */
    border: var(--borda-ultrafina) solid var(--cor-borda-clara); /* Borda sutil */
    box-shadow: var(--sombra-card);              /* Sombra suave */
    min-height: 70px;                            /* Altura mínima para alinhamento */
}

/* Container individual para cada logo (para melhor controle) */
.logo-filiacao-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;                                /* Largura fixa para todas */
    height: 60px;                               /* Altura fixa para todas */
    position: relative;
}

/* Imagens das logos de filiação - TAMANHO PADRONIZADO */
.espaco-logos img {
    width: auto;                                  /* Mantém proporção original */
    height: 50px;                                /* ALTURA FIXA PARA TODAS */
    max-width: 100px;                            /* Largura máxima */
    object-fit: contain;                         /* Mantém proporção da imagem */
    transition: var(--transicao-rapida);         /* Transição suave para hover */
    filter: grayscale(20%);                      /* Leve tom de cinza para uniformidade */
    opacity: 0.9;                                /* Leve transparência */
}

/* Logos específicas - ajustes individuais se necessário */
.espaco-logos img[alt*="CNTE"] {
    /* Ajuste específico para logo CNTE */
    height: 45px;                               /* Ligeiramente menor se necessário */
}

.espaco-logos img[alt*="CUT"] {
    /* Ajuste específico para logo CUT */
    height: 50px;                               /* Altura padrão */
}

.espaco-logos img[alt*="FETE"] {
    /* Ajuste específico para logo FETE */
    height: 48px;                               /* Altura ajustada */
    filter: grayscale(10%);                     /* Menos cinza para melhor contraste */
}

/* Hover nas logos */
.espaco-logos img:hover {
    transform: translateY(-2px) scale(1.05);    /* Leve elevação e aumento no hover */
    filter: grayscale(0%);                       /* Remove filtro cinza */
    opacity: 1;                                  /* Aumenta opacidade */
}

/* ============================================
   RESPONSIVIDADE PARA O ESPAÇO DE LOGOS
   ============================================ */

/* Tablet (até 768px) */
@media (max-width: 768px) {
    .espaco-logos {
        justify-content: center;                 /* Centraliza as logos */
        margin-left: 0;                         /* Remove margem esquerda */
        margin-top: var(--espacamento-md);      /* Espaço acima */
        width: 100%;                            /* Ocupa largura total */
        order: 3;                               /* Posiciona após o texto */
        flex-wrap: wrap;                        /* Permite quebra de linha */
        gap: var(--espacamento-sm);             /* Espaço reduzido */
        padding: var(--espacamento-sm);         /* Padding reduzido */
        min-height: 60px;                       /* Altura mínima reduzida */
    }
    
    .espaco-logos img {
        height: 40px;                           /* Altura menor para tablet */
        max-width: 85px;                        /* Largura máxima ajustada */
        margin: 0 var(--espacamento-xs);        /* Margem lateral pequena */
    }
    
    /* Ajustes específicos para tablet */
    .espaco-logos img[alt*="CNTE"],
    .espaco-logos img[alt*="CUT"],
    .espaco-logos img[alt*="FETE"] {
        height: 38px;                           /* Altura uniforme em tablet */
    }
}

/* Mobile pequeno (até 480px) */
@media (max-width: 480px) {
    .espaco-logos {
        gap: var(--espacamento-sm);             /* Espaço ainda menor */
        padding: var(--espacamento-xs);         /* Padding mínimo */
        min-height: 50px;                       /* Altura mínima menor */
    }
    
    .espaco-logos img {
        height: 35px;                           /* Altura ainda menor para mobile */
        max-width: 75px;                        /* Largura máxima reduzida */
        margin: 0 5px;                          /* Margem lateral muito pequena */
    }
    
    /* Ajustes específicos para mobile */
    .espaco-logos img[alt*="CNTE"],
    .espaco-logos img[alt*="CUT"],
    .espaco-logos img[alt*="FETE"] {
        height: 33px;                           /* Altura uniforme em mobile */
    }
    
    /* Remove tooltip em mobile */
    .espaco-logos img:hover::after {
        display: none;                          /* Não mostra tooltip em mobile */
    }
}

/* Mobile muito pequeno (até 360px) */
@media (max-width: 360px) {
    .espaco-logos img {
        height: 30px;                           /* Altura mínima */
        max-width: 65px;                        /* Largura mínima */
    }
    
    /* Ajustes específicos para mobile muito pequeno */
    .espaco-logos img[alt*="CNTE"],
    .espaco-logos img[alt*="CUT"],
    .espaco-logos img[alt*="FETE"] {
        height: 28px;                           /* Altura uniforme mínima */
    }
    
    .espaco-logos {
        gap: var(--espacamento-xs);             /* Espaço mínimo */
    }
}

/* Desktop grande (acima de 1200px) */
@media (min-width: 1200px) {
    .espaco-logos {
        gap: var(--espacamento-lg);             /* Espaço maior entre logos */
        padding: var(--espacamento-md);         /* Padding maior */
        min-height: 80px;                       /* Altura mínima maior */
    }
    
    .espaco-logos img {
        height: 55px;                           /* Altura maior para desktop grande */
        max-width: 110px;                       /* Largura máxima maior */
    }
    
    /* Ajustes específicos para desktop grande */
    .espaco-logos img[alt*="CNTE"] {
        height: 52px;
    }
    
    .espaco-logos img[alt*="CUT"] {
        height: 55px;
    }
    
    .espaco-logos img[alt*="FETE"] {
        height: 53px;
    }
}

/* ============================================
   ALTERNATIVA: USANDO BACKGROUND PARA LOGOS COM DIMENSÕES DIFÍCEIS
   ============================================ */
/* Se as logos tiverem proporções muito diferentes, use este método */

/*
.espaco-logos {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-filiacao {
    width: 100px;
    height: 60px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.logo-cnte {
    background-image: url('<?php echo $root_path; ?>uploads/img/cnte.png');
    background-color: white; /* Fundo branco para logos transparentes 
}

.logo-cut {
    background-image: url('<?php echo $root_path; ?>uploads/img/cut.png');
    background-color: white;
}

.logo-fete {
    background-image: url('<?php echo $root_path; ?>uploads/img/fete.jpg');
    background-color: white;
}
*/

/* ============================================
   SOLUÇÃO DE FALLBACK PARA LOGOS MUITO DIFERENTES
   ============================================ */
/* Se as logos tiverem formatos muito diferentes, use container com padding */

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 60px;
    padding: 5px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.logo-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}