/**
 * AGÊNCIA 2E — FOOTER.CSS v1.0
 *
 * Componente global — carregado de forma assíncrona em TODAS as 5 páginas:
 *   index.html · local-presence.html · marketing-consult.html
 *   full-loop.html · contato.html
 *
 * Injetado via: <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
 *
 * CONTEÚDO:
 *   1. .footer — container principal
 *   2. .footer-grid — grid de colunas (1 col mobile → 2 tablet → 4 desktop)
 *   3. .footer-grid--3col — variante de 3 colunas (componentes/footer.html padrão)
 *   4. .footer-col — coluna base e variantes (--brand)
 *   5. .footer-col nav — links de navegação
 *   6. .footer-col address — NAP-W
 *   7. .footer-bottom — copyright e links legais
 *   8. Media queries (tablet 768px / desktop 1024px)
 */


/* ============================================================
   1. FOOTER — container principal
   NAP-W completo para SEO Local em todas as páginas
   ============================================================ */

.footer {
  background: var(--preto-secundario);
  border-top: 1px solid var(--borda-sutil);
  padding: 60px 0 0;
}


/* ============================================================
   2. FOOTER-GRID — grid de colunas padrão (4 colunas no desktop)
   ============================================================ */

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--borda-sutil);
}


/* ============================================================
   3. FOOTER-GRID--3COL — variante de 3 colunas
   Usada pelo components/footer.html padrão da Agência 2e
   (Sobre / Serviços / Entidade Local)
   ============================================================ */

.footer-grid--3col {
  grid-template-columns: 3 1fr;
}


/* ============================================================
   4. FOOTER-COL — coluna base e variante --brand
   ============================================================ */

/* Coluna da marca (logo + tagline) */
.footer-col--brand img {
  margin-bottom: 12px;
  display: block;
}

.footer-col--brand p {
  font-size: 13px;
  color: var(--cinza-medio);
  line-height: 1.55;
}

/* Títulos das colunas */
.footer-col h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--branco);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ============================================================
   5. FOOTER-COL NAV — links de navegação do footer
   ============================================================ */

.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col nav a,
.footer-col a {
  font-size: 13px;
  color: var(--cinza-medio);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.5;
}

.footer-col nav a:hover,
.footer-col a:hover {
  color: var(--roxo-neon);
}


/* ============================================================
   6. FOOTER-COL ADDRESS — NAP-W (Name, Address, Phone, Web)
   Dados de entidade local — idênticos em todas as páginas
   ============================================================ */

.footer-col address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col address p {
  font-size: 13px;
  color: var(--cinza-medio);
  line-height: 1.55;
}

.footer-col address strong {
  color: var(--branco);
  font-weight: 700;
}


/* ============================================================
   7. FOOTER-BOTTOM — copyright e links legais
   ============================================================ */

.footer-bottom {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.footer-bottom p {
  font-size: 11px;
  color: var(--cinza-medio);
  opacity: 0.6;
  line-height: 1.5;
}

.footer-legais {
  display: flex;
  gap: 16px;
}

.footer-legais a {
  font-size: 11px;
  color: var(--cinza-medio);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.footer-legais a:hover {
  opacity: 1;
  color: var(--roxo-neon);
}


/* ============================================================
   8. MEDIA QUERIES
   ============================================================ */

@media (min-width: 768px) {

  /* Grid padrão: 2 colunas no tablet */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grid 3 colunas no tablet+ */
  .footer-grid--3col {
    grid-template-columns: 1.4fr 1fr 1.2fr;
  }

  /* Footer bottom: em linha */
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

}

@media (min-width: 1024px) {

  /* Grid padrão: 4 colunas no desktop */
  .footer-grid {
    grid-template-columns: 3 1fr;
  }

}