/* ======= COLORES CORPORATIVOS ======= */
:root {
  --verde: #009975;       /* Crecimiento */
  --naranja: #ff7a00;     /* Creatividad */
  --morado: #7b2cbf;      /* Inclusión */
  --turquesa: #00b4d8;    /* Confianza */
  --gris: #5a5a5a;        /* Responsabilidad */
}

/* ===========================
   FOOTER - bloque seguro (NO toca navbar)
   Pegar AL FINAL de style.css
   =========================== */

footer[role="contentinfo"] {
  /* mantenemos el fondo global .bg-dark del HTML, no lo tocamos */
  color: rgba(255,255,255,0.92);
  font-family: inherit;
}

/* Caja interior: ligero overlay para mejorar legibilidad (opcional: cambia a --crema si quieres fondo claro) */
footer[role="contentinfo"] > .container.py-4 {
  background: rgba(255,255,255,0.03); /* sutil, mantiene tema oscuro */
  border-radius: 10px;
  padding: 1.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

/* Titulares en verde (variable exacta) */
footer[role="contentinfo"] h5 {
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 0.9rem;
  letter-spacing: 0.4px;
}

/* Lista contacto / redes */
footer[role="contentinfo"] .list-unstyled { margin: 0; padding: 0; }
footer[role="contentinfo"] .list-unstyled li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
  color: rgba(255,255,255,0.92);
  font-size: 0.98rem;
}

/* Iconos: por defecto turquesa (confianza) sobre fondo oscuro */
footer[role="contentinfo"] i {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--turquesa);
  font-size: 18px;
  flex-shrink: 0;
}

/* Opciones para acentos por icono: añade la clase en el HTML si quieres
   <i class="fa-solid fa-phone icon-tel"></i> para teléfono naranja, etc. */
footer[role="contentinfo"] .icon-tel  { background: var(--naranja); color:#fff; }
footer[role="contentinfo"] .icon-mail { background: var(--morado);  color:#fff; }
footer[role="contentinfo"] .icon-red  { background: var(--verde);   color:#fff; }

/* Enlaces: claros, hover en verde */
footer[role="contentinfo"] a {
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
  transition: color .16s ease, transform .06s ease;
}
footer[role="contentinfo"] a:hover,
footer[role="contentinfo"] a:focus {
  color: var(--verde) !important;
  transform: translateX(2px);
  text-decoration: underline;
}

/* Pequeño CTA en footer (si lo añades) */
footer[role="contentinfo"] .footer-cta {
  background: var(--morado);
  color: #fff;
  padding: .45rem .9rem;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
}
footer[role="contentinfo"] .footer-cta:hover { background: var(--naranja); }

/* Barra inferior (zona bg-secondary) */
footer[role="contentinfo"] .bg-secondary {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 12px;
}
footer[role="contentinfo"] .bg-secondary .small {
  color: rgba(255,255,255,0.7);
}

/* Responsive */
@media (max-width: 767px) {
  footer[role="contentinfo"] > .container.py-4 { padding: 1rem; border-radius: 8px; }
  footer[role="contentinfo"] i { width: 40px; height: 40px; font-size: 16px; }
  footer[role="contentinfo"] .list-unstyled li { font-size: .95rem; gap: .7rem; }
}