/* Estilos para dispositivos móviles */
@media only screen and (max-width: 1000px) {
  .navbar-container {
        padding: 0 10px; /* Añade un poco de espacio a los lados */
      }

      .icons a {
        margin: 0 10px; /* Reduce el margen entre los íconos */
      }
	.header-image {
		width: 100%; /* Ajusta la imagen al ancho completo */
  }

  .icons {
    flex-wrap: wrap; /* Permite que los íconos se envuelvan en dispositivos pequeños */
    justify-content: space-around; /* Espacio uniforme entre los íconos */
  }

  .icons a {
    margin: 8px; /* Espacio entre los íconos */
  }

  .botones {
    margin-top: 20px; /* Espacio superior reducido */
  }

  .grupo {
    flex-direction: column; /* Coloca los botones en una sola columna */
    align-items: center; /* Centra los botones horizontalmente */
  }

  .boton {
    width: 80%; /* Reducir el ancho de los botones */
    margin: 10px 0; /* Espacio entre los botones */
  }
}




nav {
	background-color: #324366;
	color: white;
	padding: 6px;
	width: 100%;
}


.navbar-container {
  max-width: 1200px;
  margin: 0 auto ;
  display: flex;
  justify-content: center; /* Centra los íconos horizontalmente */
  align-items: center;

}
.centered-content {
  
	font-family: 'Roboto', sans-serif; 
   text-align: center;
   color: white; /* Color de texto blanco */
	text-shadow: 2px 2px 4px black; /* Sombra negra más marcada */
	font-weight: bold;
    padding: 20px 0; /* Espaciado interno */
	
    }

.icons {
  display: flex;
}

.icons a {
  margin-top: 8px;
  margin-left: 60px;
  width: 80px; /* Ajusta el ancho de los íconos */
  height: 40px; /* Ajusta la altura de los íconos */
}
.icons a:first-child,
.icons a:nth-child(2) {
  margin-top: 10px; /* Ajusta el margen superior para los primeros dos íconos */
}
.icons img {
  width: 100%; /* Ajusta el ancho de la imagen al 100% del contenedor */
  height: auto; /* Ajusta la altura de la imagen automáticamente */
  transition: transform 0.3s ease; /* Agrega una transición suave */
}
.icons img:hover {
    transform: scale(1.2); /* Aumenta el tamaño al 120% cuando el mouse pasa por encima */
}
.grupo {
  display: flex;
  justify-content: center;
}



.botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  height: auto; /* Ajuste automático de la altura */
}


.boton {
  margin: 10px;
  width: 200px; /* Anchura de 120px */
  height: 200px; /* Altura automática */
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column; /* Alineación en columna */
  justify-content: center; /* Centrado vertical */
  align-items: center; /* Centrado horizontal */
}

.boton i { 
	font-size: 5em; /* Tamaño del icono relativo a la altura del botón */
}
.boton span {
  font-size: 1.3em; /* Tamaño del texto */
  margin-top: 15px; /* Espacio entre el icono y el texto */
  color: #324366;
}

.boton:hover {
	transform: scale(1.1);
}
.header-image{
	width: 100%; /* Ancho máximo del contenedor */
    max-width: 600px; /* Ancho máximo de la imagen en pantallas grandes */
    height: auto; /* Altura automática para mantener la proporción */
	
}
.header-container {
	text-align: center; /* Para centrar horizontalmente */
    }
  /* Estilos adicionales para el footer */

  body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Organización en columna */
    min-height: 100vh; /* Altura mínima igual a la ventana del navegador */
    margin: 0; /* Quitar márgenes predeterminados */
  }
  
  .main-content {
    flex: 1; /* Hace que este contenedor ocupe el espacio disponible */
    display: flex;
    flex-direction: column; /* Organización en columna dentro del contenido principal */
  }

  .centro1 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
  }
  
  footer {
    margin-top: auto;
    background-color: #324366;
    color: white;
    padding: 15px 0;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .footer-content > .text-start {
    flex: 1;
    text-align: left;
  }

  .footer-content > .text-end {
    flex: 1;
    text-align: right;
  }

  footer h6 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  footer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.2px;
  }
  
  @media screen and (max-width: 1000px) {
    .footer-content {
      flex-direction: column; /* Cambiar a diseño en columna en pantallas pequeñas */
      text-align: center; /* Centrar el texto */
    }
  }