body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Bahnschrift SemiCondensed', sans-serif;
    background-color: #dfe9e7;
}

a{
    text-decoration: none;
    color: white;
}

/*----------------------------------------------------------*/
/* Estilos para la franja roja */
header{
    display: flex; 
    background-color: rgba(11, 34, 89, 0.974);
    height: 62px; /* Ajusta la altura según tus preferencias */
    width: 100%;
    justify-content: center;
    align-items: center;
}

.Logo-Container {
    display: flex;
    align-items: center;
}

.Logo{
    display: flex;
    align-items: center;
}

.Logo img {
    height: 50px;
    margin-right: 20px;
    transition: transform 0.3s ease; /* Agrega la transición de transformación */
}

.Logo:hover img {
    transform: rotateY(360deg); /* Giro completo (360 grados) al hacer hover */
}

.span{
    display: flex;
    align-items: center;
}

.span h2{
    margin-right: 30px;
    color: white;
    font-weight: 600;
    font-size: 30px;
}

.nav-link{   
    font-weight: 600;
    padding-right: 40px;
    font-size: 20px;
}

.nav-link:hover{
    color: black;
}

.menu-icon {
    display: none; /* Oculta el icono de menú en tamaños de pantalla grandes */
    cursor: pointer;
    font-size: 32px;
    color: whitesmoke;
    display: none;
}

.menu-icon:hover{
    color: rgb(0, 153, 255);
}

.mobile-menu .nav-link{
    display: none;
}

/* Estilos para la imagen dentro del contenedor principal */
.Imagen-Principal img {
    width: 100%; /* Ocupa el 100% del ancho del contenedor principal */
    max-height: 100%; /* La altura máxima de la imagen es el 100% del contenedor */
}

/*---------------------------------------------------------*/
/*Estilos para las imagenes de enlaces a informacion*/
.Imagenes-Enlaces{
    display: flex; /* Usa flexbox para distribuir las imágenes en fila */
    justify-content: space-around; /* Espacia las imágenes uniformemente */
    align-items: center; /* Alinea las imágenes al centro verticalmente */
    width: 100%; /* Ocupa el 100% del ancho del contenedor principal */
    height: auto; /* La altura se ajusta automáticamente */
    margin-top: 40px; /* Mantiene una distancia de 2% del ancho de la ventana con la imagen principal */
    text-align: center;
}

.Imagenes-Enlaces img{
    width: 21.5vw; /* Cada imagen ocupa el 25% del ancho de la ventana */
    height: auto; /* Mantiene la proporción original de cada imagen */
    box-shadow: 0 4px 8px rgba(8, 6, 8, 0.867); 
    transition: transform 0.3s ease; 
    max-height: 100%; /* La altura máxima de cada imagen es el 100% del contenedor */
}

.Imagenes-Enlaces img:hover{
    transform: scale(0.9);
}

.galeria-imagenes {
    display: flex;
    overflow: hidden; /* Oculta las partes de las imágenes que se desplazan fuera del contenedor */
    margin-top: 35px;
}

.galeria-imagenes img {
    width: 100%;
    max-width: 100%; /* Ajusta el tamaño máximo de las imágenes */
    transition: transform 1s ease; /* Agrega una transición suave de transformación */
}

.galeria-imagenes img:not(:first-child) {
    margin-left: -100%; /* Coloca las imágenes fuera del contenedor a la izquierda */
}

/*----------------------------------------------------------------------------*/
.Imagen-Final {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.Imagen-Final img {
    width: 100%;
    max-height: 100%;
    height: auto;
}

.redes {
    position: absolute;
    top: 50%; /* Ajustamos la posición vertical */
    left: 88%; /* Ajustamos la posición horizontal */
    transform: translate(-50%, -50%); /* Centramos los enlaces */
    display: flex;
    flex-direction: column; /* Cambiamos la dirección del flexbox a columna */
    justify-content: space-between; /* Espacio uniformemente entre los enlaces */
    align-items: center;
    width: 10%; /* Ancho relativo al contenedor padre */
    height: 245px;
}

.redes img {
    width: 53px; /* Permitimos que las imágenes se redimensionen automáticamente */
    height: auto; /* Altura fija para mantener la proporción */
}

.redes img:hover {
    transform: scale(1.1);
}


/* Estilos celular modo compu */
@media only screen and (max-width: 1130px){
    body {
      font-size: 14px;
    } 
    
    .redes {
        height: 190px;
    }
    
    .redes img {
        width: 40px; /* Permitimos que las imágenes se redimensionen automáticamente */
    }
}



/* Estilos para tablets en modo paisaje */
@media (max-width: 900px) and (orientation: landscape) {
    body {
      font-size: 14px;
    }  

    .redes {
        height: 160px;
    }
    
    .redes img {
        width: 32px; /* Permitimos que las imágenes se redimensionen automáticamente */
    }
}

/* Estilos para tablets en modo retrato */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }  

    /* Estilos para la franja azul */
    header{ 
        height: 50px; /* Ajusta la altura según tus preferencias */
    }

    .Logo img {
        height: 40px;
        margin-right: 15px;
    }

    .span h2{
        font-size: 28px;
    }

    .nav-link{   
        padding-right: 30px;
        font-size:17px;
    }
    
    /*Estilos para las imagenes de enlaces a informacion*/
    .Imagenes-Enlaces {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        width: 85%;
        margin: 0 auto;
        text-align: center;
        margin-top: 30px;
    }

    .Imagenes-Enlaces img {
        width: 100%;
        max-height: 100%;
        height: auto;
    }

    .galeria-imagenes {
        margin-top: 30px;
    }

    .Imagen-Final{
         margin-top: 20px;
    }

    /*------------------------------------------*/  
    .redes {
        height: 130px;
    }
      
    .redes img {
        width: 27px; /* Permitimos que las imágenes se redimensionen automáticamente */
    }
}

@media (max-width: 620px) {
    .redes {
        height: 105px;
    }
      
    .redes img {
        width: 20px; /* Permitimos que las imágenes se redimensionen automáticamente */
    }
}

  
/* Estilos para teléfonos móviles en modo retrato */
@media (max-width: 550px) {
    body {
      font-size: 14px;
    } 
    
    header{
        justify-content: space-between;
    }

    .Logo{
        width: 110px;
        margin-left: 30px;
    }

    .menu-icon{
        margin-right: 30px;
    }

    .Logo img {
        height: 40px;
        margin-right: 10px;
    }

    .span{
        display: none;
    }
    
    .nav-link {
        display: none; /* Oculta los enlaces en tamaños de pantalla pequeños */
    }

    .menu-icon {
        display: flex; /* Muestra el icono de menú en tamaños de pantalla pequeños */
        width: 28px;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px; /* Altura de la franja roja */
        left: 0;
        width: 100%;
        background-color: rgba(69, 83, 156, 0.932);
        text-align: center;
        z-index: 1;
    }

    .mobile-menu .nav-link {
        display: block;
        padding: 9px;
    }

    /*Estilos para las imagenes de enlaces a informacion*/
    .Imagenes-Enlaces {
        margin-top: 25px;
    }

    .galeria-imagenes {
        margin-top: 25px;
    }

    /*----------------------------------*/
    .Imagen-Final{
         margin-top: 10px;
    }

    .redes {
        top: 43%; /* Ajustamos la posición vertical */
        height: 65px;
    }
      
    .redes img {
        width: 17px; /* Permitimos que las imágenes se redimensionen automáticamente */
    }
}

@media (max-width: 395px) {
    .Imagen-Final{
        margin-top: 10px;
   }

   .redes {
       top:43%; /* Ajustamos la posición vertical */
       height: 57px;
   }
     
   .redes img {
       width: 14px; /* Permitimos que las imágenes se redimensionen automáticamente */
   }
}

@media (max-width: 350px) {
   .redes img {
       width: 12px; /* Permitimos que las imágenes se redimensionen automáticamente */
   }
}

@media (max-width: 300px) {
    .redes img {
        width: 10px; /* Permitimos que las imágenes se redimensionen automáticamente */
    }
 }