/* =========================================
   FOOTER PERSONALIZADO
   ========================================= */

.custom-footer {
  background-color: #1a1a1a; /* Gris muy oscuro / casi negro */
  color: #e0e0e0; /* Texto claro */
  font-family: var(
    --font-sans
  ); /* Asume que tienes una variable global, o usa sans-serif */
}

/* --- Parte Superior (Columnas) --- */
.custom-footer .footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 80px;
  padding-bottom: 60px;
}

.footer-col h4 {
  color: var(
    --color-primary
  ); /* Naranja (Ajusta al valor hexadecimal exacto de tu diseño) */
  font-size: var(--text-md, 18px);
  font-family: var(
    --font-serif
  ); /* Manteniendo el serif que veo en la imagen */
  margin-top: 0;
  margin-bottom: 25px;
  font-weight: var(--fw-regular);
}

/* Listas de enlaces (WP Nav Menu o manuales) */
.footer-col .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-col .footer-links li {
  font-size: var(--text-sm, 15px);
  line-height: 1.4;
  font-weight: var(--fw-light) !important;
}

.footer-col .footer-links a {
  color: #fcfcfc;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: var(--fw-light) !important;
}

.footer-col .footer-links a:hover {
  color: #a0a0a0; /* Naranja al hacer hover */
}

/* --- Parte Inferior (Copyright y Créditos) --- */
.custom-footer .footer-bottom {
  background-color: #0f0f0f; /* Un poco más oscuro que el fondo principal */
  padding: 25px 0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #e2e2e2;
}

.footer-bottom-inner .credits {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-bottom-inner .credits a {
  color: #ffffffcb; /* Color blanco para el logo */
  display: flex;
  align-items: center;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.footer-bottom-inner .credits a:hover {
  color: #ffffff; /* Se vuelve naranja al hover (gracias a fill="currentColor" en el SVG) */
  transform: scale(1.01);
}

/* --- MEDIA QUERIES --- */

/* Tablet (2 columnas) */
@media (max-width: 900px) {
  .custom-footer .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
  }
}

/* Mobile (1 columna) */
@media (max-width: 500px) {
  .custom-footer .footer-top {
    grid-template-columns: 1fr;
    padding-top: 50px;
    padding-bottom: 40px;
    text-align: center; /* En móviles suele verse mejor centrado, quítalo si lo prefieres alineado a la izq */
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}