/* =========================================================
   CABEÇALHO E RODAPÉ (PC)
   ========================================================= */
.cabecalho {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 5%; background: white; position: fixed; 
    width: 100%; top: 0; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.logo-area-completa { display: flex; align-items: center; gap: 15px; } /* Ajustei o gap para dar mais espaço */
.logo-icone-efs { height: 85px; width: auto; display: block; }

/* Diminui a fonte de 24px para 21px para caber o SILVA */
.logo-area-completa h1 { font-size: 21px; color: var(--preto-suave); font-weight: 800; margin: 0; }
.destaque-vermelho { color: var(--vermelho-efs); }

.menu-hamburguer { display: none; } /* Escondido no PC */

/* Diminui o gap de 30px para 15px */
.menu ul { display: flex; list-style: none; gap: 15px; align-items: center; margin: 0; padding: 0; }

/* Diminui a fonte de 1.15rem para 1rem para os links caberem melhor */
.menu a { text-decoration: none; color: #1a1a2e; font-weight: 800; font-size: 1rem; text-transform: uppercase; transition: color 0.3s ease; }
.menu a:hover { color: var(--vermelho-efs); }

.btn-rastreio {
    background-color: var(--amarelo) !important; color: #1a1a2e !important; 
    padding: 12px 25px !important; border-radius: 8px; font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4); transition: all 0.3s ease;
    white-space: nowrap; /* <-- ISSO IMPEDE O TEXTO DE QUEBRAR */
}
.btn-rastreio:hover {
    background-color: var(--vermelho-efs) !important; color: white !important; 
    transform: translateY(-3px); box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4); 
}

.rodape { padding: 40px; background: #f4f4f4; text-align: center; border-top: 1px solid #ddd; }

/* =========================================================
   MENU HAMBÚRGUER E RODAPÉ (CELULAR)
   ========================================================= */
@media (max-width: 768px) {
    .cabecalho { 
        flex-direction: column !important; 
        padding: 15px !important; 
        position: fixed !important;
    }
    
    .logo-area-completa { 
        flex-direction: column !important; 
        text-align: center !important; 
        gap: 5px !important; 
    }
    .logo-icone-efs { height: 50px !important; }
    .logo-area-completa h1 { font-size: 1.1rem !important; }

    /* ESTILO DO BOTÃO HAMBÚRGUER */
    .menu-hamburguer {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 25px;
        right: 20px;
        z-index: 1001; /* Garante que fica por cima de tudo */
    }
    .menu-hamburguer span {
        display: block;
        width: 100%;
        height: 4px;
        background-color: var(--preto-suave);
        border-radius: 4px;
        transition: 0.4s ease; /* Animação suave */
    }

    /* ANIMAÇÃO DO "X" QUANDO O MENU ESTÁ ABERTO */
    .menu-hamburguer.ativo span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-hamburguer.ativo span:nth-child(2) {
        opacity: 0; /* Esconde a linha do meio */
    }
    .menu-hamburguer.ativo span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* MENU DE LINKS */
    .menu { 
        display: none !important; 
        width: 100% !important; 
        margin-top: 15px !important; 
    }
    .menu.ativo { display: block !important; }

    .menu ul { 
        flex-direction: column !important; 
        gap: 0 !important; 
        background: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding: 10px !important;
    }
    .menu a { 
        display: block !important; 
        padding: 12px !important; 
        font-size: 0.95rem !important; 
        border-bottom: 1px solid #ddd;
        text-align: center !important;
    }
    .menu ul li:last-child a { border-bottom: none; }

    .btn-rastreio { margin-top: 10px !important; }

    .rodape { padding: 25px 15px !important; }
    .logo-rodape h1 { font-size: 1.3rem !important; margin-bottom: 10px !important; }
    .rodape p { font-size: 0.85rem !important; }
}