.footer {
	/* background: linear-gradient(135deg, #f7f8fb, #eaf3fd); */
	/* color: #133a7a; */
	font-family: 'Poppins', sans-serif;
 
	padding: 0.4rem 0.4rem 0.6rem 0.5rem;
	text-align: center;
	border-top: 1px solid #dbdbdb;
	font-size: 0.85rem;
  
  background: rgba(0, 77, 153, 0.9); /* azul con transparencia */
  color: #fff; /* texto claro para contraste */

}

.footer .container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.footer-top p,
.footer-socials p,
.footer-attributions p,
.footer-bottom p {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.footer-socials p a.social-link {
  color: #004d99;
  color: #fff;
  text-decoration: none;
  margin: 0 0.3rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: color 0.3s ease;
}

.footer-socials p a.social-link:hover,
.footer-socials p a.social-link:focus {
  color: #f15a24;
  color: #fff;
  text-decoration: underline;
}

.footer-attributions p a.designer-link,
.footer-attributions p a.responsibilities-link {
  color: #004d99;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer-attributions p a.designer-link:hover,
.footer-attributions p a.responsibilities-link:hover,
.footer-attributions p a.designer-link:focus,
.footer-attributions p a.responsibilities-link:focus {
	color: #f15a24;
	/* text-decoration: underline; */
}

.footer hr {
  border: none;
  height: 2px;
  background-color: #dcdcdc; /* gris claro */
  width: 90%;
  margin: 0.5rem auto;
}

.footer-bottom .copyright {
  color: white; /* texto blanco */
  background-color: #00aaff; /* azul brillante tipo marcador */
  padding: 0.3rem 0.1rem; /* espacio horizontal para efecto marcador */
  border-radius: 4px; /* ligeramente redondeado para estilo */
  font-weight: 500;
  display: inline-block; /* para que el padding se ajuste al texto */
  max-width: 100%;
   white-space: nowrap;
}

/* Opcional: para pantallas medianas en adelante, mantener centrado y pequeño */

@media (min-width: 600px) {
  .footer {
    font-size: 0.9rem;
    padding: 1rem 2rem 1rem 2rem;
  }

  .footer .container {
    max-width: 720px;
	max-width: 90%;
  }
}

.designer-link {
  text-decoration: underline !important;
  text-decoration-color: #fff; !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  color: #004d99;
  font-weight: 600;
}

.designer-link:hover,
.designer-link:focus {
  color: #f15a24;
  text-decoration-color: #f15a24;
}