/* Footer.css */

/* Estilos generales del footer */
footer {
  background-color: #2C3E85;
  color: white;
  padding: 20px 0;
}

/* Contenedor principal del footer */
footer .footer-container {
  display: flex;
  justify-content: center; /* Centra el contenido en la fila */
  align-items: flex-start;
  text-align: left;
  flex-wrap: wrap;
  gap: 30px; /* Añade un espacio entre los elementos */
}

/* Logo y lema */
.logo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.logo2 img {
  height: 200px;
  border-radius: 20px;
}

.logo2 h1 {
  font-weight: 900;  /* Black */
  margin-top: 5px;
  font-size: 20px;
  color: #2C3E85;
  font-style: italic;  /* Cursiva */
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 40px;
}

/* Nuestras Tiendas */
footer .stores-container h4,
footer .contact-container h4,
footer .social-container h4 {
  color: #FAD02E;
  margin-top: 20px;
  font-size: 25px;
  position: relative;
  right: 50px;
}

/* Nuestras Tiendas: Enlace con icono */
.google-maps-link {
  margin-top: -20px;
  position: relative;
  right: 50px;
  display: flex;
  align-items: center; /* Alinea el icono y el texto */
  color: white;
  text-decoration: none;
}

.google-maps-icon {
  width: 30px; /* Ajusta el tamaño del icono */
  vertical-align: middle;
  margin-right: 2px; /* Espacio entre el icono y el texto */  
}

/* Contacto */
footer .contact-container {
  color: white;
}

footer .contact-container p {
  margin: 25px 0;
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-top: -30px;
  right: 50px;
}

footer .contact-container img.contact-icon {
  width: 30px;
  padding: 5px;
  margin-right: 10px;
}

footer .contact-container span {
  color: white;
  line-height: 1.5;
}

footer .contact-container span strong {
  color: #FAD02E;
  font-weight: bold;
}

footer .contact-container a {
  color: white;
  text-decoration: none;
}

footer .contact-container a:hover {
  text-decoration: underline;
}

/* Horario */
footer .contact-container .highlight-day {
  color: #FAD02E;
  font-weight: bold;
}

/* Redes Sociales */
footer .social-container p {
  margin: 25px 0; /* Añadir margen superior e inferior para separar los párrafos */
  display: block; /* Asegura que cada párrafo esté en su propia línea */
  margin-top: -20px;
  position: relative;
  right: 50px;
}

footer .social-container img {
  width: 30px;
  padding: 5px;
  vertical-align: middle;
  margin-right: 10px; /* Espacio entre el icono y el texto */
}

.social-container a {
  color: white; /* Cambia el color del enlace a blanco */
  text-decoration: none; /* Elimina el subrayado del enlace */
}

.social-container a:hover {
  text-decoration: underline; /* Agrega subrayado al pasar el cursor */
  color: #f0f0f0; /* Cambia el color al pasar el cursor, opcional */
}

/* Información adicional */
.footer-info {
  text-align: center;
  font-size: 14px;
  color: #2C3E85;
  font-family: 'Inter', sans-serif; /* Aplica la fuente Inter */
  font-weight: 600; /* Semi-bold */
  font-style: italic; /* Itálico */
}

.footer-info p {
  margin: 0;
}

/* Media Queries para dispositivos pequeños */
@media (max-width: 768px) {
  footer .footer-container {
    flex-direction: column; /* Organiza los elementos en columna */
    align-items: center; /* Centra los elementos en el eje horizontal */
  }

  footer .stores-container h4,
  footer .contact-container h4,
  footer .social-container h4 {
    position: relative;
    right: 0; /* Elimina la posición a la derecha */
    text-align: center; /* Centra los encabezados */
  }

  .google-maps-link,
  footer .contact-container p,
  footer .social-container p {
    right: 0; /* Elimina el margen de la derecha */
  }

  footer .contact-container img.contact-icon,
  footer .social-container img {
    width: 25px; /* Ajusta el tamaño de los iconos para pantallas pequeñas */
  }
}