/* Centrar todos los textos */
body {
  font-family: "Inter", sans-serif;
  color: #050505; /* Color del texto */
  background-color: #ffffff;
  justify-content: center; 
}

nav {
background-color: #000; /* Color negro para el fondo del menú */
display: flex; /* Alinear los elementos uno al lado del otro */
justify-content: flex-end;
padding: 10px;
position: absolute;
top: 0;
left: 0;
width: 100%; /* Asegurar que el menú ocupe todo el ancho */
}

nav a {
color: #f5f4f2; /* Color del texto en #e7e1da */
margin-right: 20px; /* Espacio entre los enlaces */
text-decoration: none; /* Eliminar subrayado */
transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

nav a:hover {
color: #d95529; /* Cambia a #d95529 al pasar el cursor */
}
  
  header {
    display: flex;
    align-items: center; /* Centra la imagen verticalmente */
    justify-content: center; /* Centra la imagen horizontalmente */
    margin-top: 50px;
    background-color: #ffffff; 
  }
  
  
  header img {
    display: block;
    max-width: 1400px; /* Ajusta el tamaño de la imagen */
    height: auto;
}

.logo-images {
display: grid;
grid-template-columns: auto auto;
gap: 20px;
justify-content: center;
margin-top: 20px;
}

.logo-images img {
  max-width: 680px; /* Ajusta el valor según prefieras */
  height: auto; /* Mantiene la proporción de la imagen */
}
.detalle-images {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  }
  
  .detalle-images img {
    max-width: 330px; /* Ajusta el valor según prefieras */
    height: auto; /* Mantiene la proporción de la imagen */
  }

  .requerimientos-images {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    }
    
    .requerimientos-images img {
      max-width: 330px; /* Ajusta el valor según prefieras */
      height: auto; /* Mantiene la proporción de la imagen */
    }

.proceso-images {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  }
  
  .proceso-images img {
    max-width: 200px; /* Ajusta el valor según prefieras */
    height: auto; /* Mantiene la proporción de la imagen */
  }

  .user1-images {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    }
    
    .user1-images img {
      max-width: 680px; /* Ajusta el valor según prefieras */
      height: auto; /* Mantiene la proporción de la imagen */
    }

    .user2-images {
      display: grid;
      grid-template-columns: auto auto;
      gap: 20px;
      justify-content: center;
      margin-top: 20px;
      }
      
      .user2-images img {
        max-width: 680px; /* Ajusta el valor según prefieras */
        height: auto; /* Mantiene la proporción de la imagen */
      }

  .uikit-images {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    }
    
    .uikit-images img {
      max-width: 680px; /* Ajusta el valor según prefieras */
      height: auto; /* Mantiene la proporción de la imagen */
    }

    .elemento-images {
      display: grid;
      grid-template-columns: auto auto;
      gap: 20px;
      justify-content: center;
      margin-top: 20px;
      }
      
      .elemento-images img {
        max-width: 680px; /* Ajusta el valor según prefieras */
        height: auto; /* Mantiene la proporción de la imagen */
      }

      .tipo-images {
        display: grid;
        grid-template-columns: auto auto;
        gap: 20px;
        justify-content: center;
        margin-top: 20px;
        }
        
        .tipo-images img {
          max-width: 680px; /* Ajusta el valor según prefieras */
          height: auto; /* Mantiene la proporción de la imagen */
        }

h2 {
  justify-content: left;
  padding: 30px;
  color: #303031;
  font-family: Arial, Helvetica, sans-serif;
}

iframe {
  height: 480px;
  width: 100%;
  border-radius: 20px;
  margin-top: 60px;
  margin-bottom: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.369);     
}

footer {
  margin-top: 60px; 
  background-color: #303031; /* Fondo negro */
  color: #ffffff; /* Texto en blanco para buen contraste */
  padding: 20px; /* Añade algo de espacio dentro del footer */
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

footer p {
  color: #ffffff; /* Asegura que los enlaces sean visibles en fondo negro */
}