/* ============================================================
   footer.css — Rodapé do Site
   ============================================================ */

/* ── 12. FOOTER (O Rodapé do Site) ── */
.footer {
  background: #111111; /* Quase preto absoluto pra dar contraste extremo com o fundo branco do site */
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem var(--section-padding-x) 2rem;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto; /* Centraliza a caixa principal do rodapé na tela */
  display: grid;
  grid-template-columns: 1fr; /* No mobile, empilha todas as 4 colunas em 1 só */
  gap: 3rem;
  text-align: left;
}

/* Centralização do logo e texto em relação um ao outro */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* No desktop (>= 768px), o rodapé se divide em 4 colunas. 
   A primeira (Logo + Texto) é maior (2fr), as outras dividem o espaço restante. */
@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

.footer__logo {
  border-radius: 8px; /* Dá uma "quebrada" nos cantos retos do logotipo */
  margin-bottom: 1rem;
  display: block;
}

/* Descrição curta da empresa debaixo do logo */
.footer__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Redes Sociais (Instagram, Facebook) */
.footer__socials {
  display: flex;
  gap: 12px;
}

/* Os botões de redes sociais são bolinhas de vidro sobre o fundo escuro */
.footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%; /* Faz virar um círculo perfeito */
  color: #fff;
  transition: background 0.3s, transform 0.3s;
}

.footer__socials a:hover {
  background: var(--color-primary); /* Acende em azul */
  transform: translateY(-3px); /* Dá um pulinho */
}

/* Títulos das coluninhas (ex: Navegação, Serviços, Contato) */
.footer__title {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* Removemos a "bolinha" nativa das listas de links */
.footer__links ul,
.footer__contact ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
  font-size: 0.9rem;
}

.footer__links a:hover {
  color: var(--color-primary);
  text-decoration: underline; /* Reforça onde o clique é válido */
}

/* Lista de contatos (ícone + texto) */
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

/* Pinta os ícones de contato de azul */
.footer__contact svg {
  color: var(--color-primary);
  flex-shrink: 0; /* Impede o ícone de ser amassado pelo texto grande */
}

/* Rodapé do Rodapé (Direitos Autorais e CNPJ) */
.footer__bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1); /* Linha divisória sutil */
  text-align: center;
}

.footer__bottom p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer__contact a {
  color: var(--color-primary);
  transition: color 0.2s;
}

.footer__contact a:hover {
  color: #3d9ee0; /* Um azul um pouco mais claro ao passar o mouse pra n sumir no fundo escuro */
}

.footer__legal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}

.footer__legal p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35); /* Textinho bem apagado só pra efeitos legais */
}

/* ── REGRAS ESPECÍFICAS PARA MOBILE ── */
@media (max-width: 767px) {
  /* Centraliza as colunas Navegação e Especialidades (títulos e links) */
  .footer__links {
    text-align: center;
  }
  .footer__links ul {
    align-items: center;
  }
  
  /* Centraliza APENAS o título da coluna Fale Conosco */
  .footer__contact .footer__title {
    text-align: center;
  }
}