/* ==============================
   FOOTER.CSS
   Estilos do rodapé do site.
   4 colunas: marca, contato, horário/endereço, redes sociais
   + barra inferior com copyright e créditos
   ============================== */

/* ================================================================
   FOOTER: Rodapé principal
   ================================================================ */

.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro {
  background-color: var(--color-brand-dark-navy);
  color: var(--color-text-on-dark);
  padding: var(--spacing-3xl) 0 0;
}

/* Garante que todos os links do footer herdem a cor clara,
   sobrescrevendo o 'a { color: gold }' definido em base.css */
.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro a {
  color: var(--color-text-on-dark);
}

.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro a:hover {
  color: var(--color-brand-gold);
}

/* ---- Grid de 4 colunas ---- */
.marca-contato-horario-endereco-e-redes-sociais_quatro-colunas-do-rodape {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
  gap: var(--spacing-xl);
  padding-bottom: var(--spacing-3xl);
}

/* ---- Coluna genérica ---- */
.titulo-de-secao-do-rodape_texto-em-destaque-na-coluna {
  color: var(--color-text-white);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.titulo-de-secao-do-rodape_texto-em-destaque-na-coluna::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-brand-gold);
}

/* ================================================================
   COLUNA 1: Marca (logo + tagline)
   ================================================================ */

.marca-mp-tintas-epoxi_logo-pequeno-no-rodape {
  width: 60px;
  height: auto;
  margin-bottom: var(--spacing-md);
}

.primeira-loja-de-tintas-epoxi-do-brasil_frase-de-apresentacao-no-rodape {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-dark);
}

/* ================================================================
   COLUNA 2: Fale conosco (telefones + email)
   ================================================================ */

.telefone-whatsapp-e-email_lista-de-contatos-no-rodape {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dado-de-contato_link-clicavel-no-rodape {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-on-dark);
  transition: color var(--transition-fast);
}

.dado-de-contato_link-clicavel-no-rodape:hover {
  color: var(--color-brand-gold);
}

.dado-de-contato_link-clicavel-no-rodape i {
  width: 16px;
  text-align: center;
  color: var(--color-brand-gold);
  font-size: var(--font-size-small);
}

/* ================================================================
   COLUNA 3: Horário de atendimento + endereço físico
   ================================================================ */

.horario-de-funcionamento-segunda-a-sexta-8h-as-18h_texto-no-rodape {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-dark);
  margin-bottom: var(--spacing-lg);
}

.horario-de-funcionamento-segunda-a-sexta-8h-as-18h_texto-no-rodape i {
  color: var(--color-brand-gold);
  margin-right: var(--spacing-xs);
}

.endereco-rua-siqueira-bueno-1326-belenzinho-sao-paulo_texto-no-rodape {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-dark);
  font-style: normal;
}

.endereco-rua-siqueira-bueno-1326-belenzinho-sao-paulo_texto-no-rodape i {
  color: var(--color-brand-gold);
  margin-right: var(--spacing-xs);
}

/* ================================================================
   COLUNA 4: Redes sociais
   ================================================================ */

.redes-sociais_area-de-icones-no-rodape {
  display: flex;
  gap: var(--spacing-md);
}

.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro a.canal-youtube-da-empresa_icone-clicavel-no-rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-white);
  font-size: var(--font-size-medium);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro a.canal-youtube-da-empresa_icone-clicavel-no-rodape:hover {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  transform: translateY(-2px);
}

/* ================================================================
   BARRA INFERIOR: Copyright e créditos
   ================================================================ */

.direitos-autorais-mp-tintas-epoxi_barra-inferior-do-rodape {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--spacing-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xsmall);
  color: rgba(255, 255, 255, 0.5);
}

.copyright-mp-tintas-epoxi-2026_texto-de-direitos-autorais-no-rodape {
  margin: 0;
}

.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro__developer-credit a {
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

.informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro__developer-credit a:hover {
  color: var(--color-brand-gold);
}

/* ================================================================
   RESPONSIVIDADE DO FOOTER
   ================================================================ */

@media (max-width: 1024px) {
  .marca-contato-horario-endereco-e-redes-sociais_quatro-colunas-do-rodape {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .informacoes-da-empresa-contato-horario-endereco-e-youtube_rodape-escuro {
    padding: var(--spacing-2xl) 0 0;
  }

  .marca-contato-horario-endereco-e-redes-sociais_quatro-colunas-do-rodape {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    text-align: center;
  }

  .titulo-de-secao-do-rodape_texto-em-destaque-na-coluna::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .redes-sociais_area-de-icones-no-rodape {
    justify-content: center;
  }

  .direitos-autorais-mp-tintas-epoxi_barra-inferior-do-rodape {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }
}