footer {
   background-color: var(--primary-color); /* Cor de fundo primária */
   color: var(--white); /* Cor padrão do texto no footer */
   padding: 60px 0 20px 0; /* Padding superior e inferior */
    font-size: 0.95rem;
   position: relative; /* Necessário para pseudo-elementos */
   overflow: hidden; /* Esconde partes do pseudo-elemento que saem */
}

/* Pseudo-elemento gráfico no footer (combinando com a seção Contato) */
footer::before {
   content: '';
   position: absolute;
   /* DEVE CORRESPONDER AO TAMANHO E COR DO PSEUDO-ELEMENTO EM .contato-section::before */
   width: 500px; /* Tamanho */
   height: 500px; /* Tamanho */
   background-color: rgba(255, 255, 255, 0.05); /* Cor branca bem transparente */
   border-radius: 50%; /* Forma circular */
   /* Posição no topo-esquerda para continuar o semi-círculo */
   top: -250px; /* Metade do círculo para fora na parte superior (conectando com Contato) */
   left: -250px; /* Metade do círculo para fora na parte esquerda */
   z-index: 0; /* Garante que fique atrás do conteúdo */
   pointer-events: none; /* Garante que o pseudo-elemento não interfira com cliques/mouse */
}
/* css/footer.css */

footer .container {
    padding-bottom: 20px; /* Adiciona um padding extra para a linha de copyright */
}

/* Estilos para a Logo e Descrição */
.footer-info img {
    max-width: 180px; /* Tamanho da logo no rodapé */
    margin-bottom: 15px;
    filter: brightness(120%); /* Ilumina um pouco a logo branca se o fundo for muito escuro */
}

.footer-description {
    line-height: 1.6;
    opacity: 0.8; /* Torna a descrição um pouco mais sutil */
}

/* Estilos para os Títulos (Contato, Navegação, Siga-nos, Legal) */
footer h4 {
    color: var(--gold-accent); /* Cor dourada para os títulos do rodapé */
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative; /* Para o sublinhado animado */
}

/* Efeito de sublinhado animado para os títulos (opcional, para um toque extra) */
footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px; /* Posição do sublinhado abaixo do texto */
    width: 40px; /* Comprimento inicial */
    height: 3px;
    background-color: var(--white); /* Cor do sublinhado */
    border-radius: 5px;
    transition: width 0.3s ease; /* Animação na largura */
}

footer h4:hover::after {
    width: 70px; /* Aumenta o comprimento ao passar o mouse */
}


/* Estilos para as informações de contato */
.footer-contact-info p {
    margin-bottom: 15px;
    line-height: 1.5;
    opacity: 0.9;
}

.footer-contact-info i {
    margin-right: 10px;
    color: var(--gold-accent); /* Ícones em dourado */
    font-size: 1.1em;
}

/* Estilos para os links de navegação e legal */
.footer-links ul,
.footer-social-legal ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li,
.footer-social-legal ul li {
    margin-bottom: 10px;
}

.footer-links ul li a,
.footer-social-legal ul li a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
    opacity: 0.9;
    position: relative;
    padding-left: 0; /* Remove padding se houver */
}

.footer-links ul li a:hover,
.footer-social-legal ul li a:hover {
    color: var(--gold-accent); /* Destaque dourado no hover */
    opacity: 1;
}

/* Estilos para os ícones sociais (já deve ter alguns no seu CSS geral) */
.social-icons a {
    color: var(--white);
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
    opacity: 0.9;
}

.social-icons a:hover {
    color: var(--gold-accent);
    transform: translateY(-3px); /* Efeito de 'salto' no hover */
    opacity: 1;
}

/* Seção inferior do rodapé (copyright e voltar ao topo) */
.footer-bottom {
    display: flex;
    flex-direction: column; /* Colunas para mobile */
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória suave */
    padding-top: 20px;
    margin-top: 40px; /* Espaço do conteúdo principal do rodapé */
    text-align: center; /* Centraliza texto em mobile */
}

.footer-bottom .copyright {
    margin-bottom: 15px; /* Margem para o botão em mobile */
    opacity: 0.7;
}

.footer-bottom .copyright a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom .copyright a:hover {
    color: var(--gold-accent);
}

/* Botão Voltar ao Topo */
.back-to-top-button a {
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center;
    color: var(--white);
    text-decoration: none;
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top-button a i {
    background-color: var(--gold-accent); /* Fundo dourado para o ícone */
    color: var(--primary-color); /* Ícone na cor primária */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 0.9em;
}

.back-to-top-button a span {
    font-weight: 600;
}

.back-to-top-button a:hover {
    opacity: 1;
    transform: translateY(-3px); /* Efeito de 'salto' para o botão */
}

/* Media Queries para Responsividade */
@media (min-width: 768px) { /* Para tablets e desktops */
    .footer-bottom {
        flex-direction: row; /* Volta para linha em telas maiores */
        text-align: left;
    }
    .footer-bottom .copyright {
        margin-bottom: 0;
    }
}
@media (min-width: 992px) { /* Para desktops maiores, 4 colunas */
    .col-lg-3 {
        width: 25%; /* Garante que a coluna ocupe 25% em lg */
    }
}