/* Imagen de portada */
.img-portada {
    text-align: center; /* Centra el contenido */
    position: relative; /* Posición relativa para alinear elementos internos */
    max-width: 1600px; /* Ancho máximo de la imagen de portada */
    max-height: 500px; /* Altura máxima de la imagen de portada */
    overflow:hidden; /* Oculta el contenido que sobresale del contenedor */
    margin: auto; /* Margen automático para centrar horizontalmente */
}

/* Marco del slider */
.slider-frame {
    width: 100%; /* Ancho completo del contenedor */
    height: 200%; /* Altura automática */
    overflow: hidden; /* Oculta el contenido que sobresale del contenedor */
    position: relative; /* Posición relativa para alinear elementos internos */
}

/* Lista de elementos del slider */
.slider-frame ul {
    display: flex; /* Muestra los elementos en línea */
    padding: 0; /* Elimina el relleno */
    margin: 0; /* Elimina el margen */
    width: 700%; /* Ancho total de la lista  (7 veces el ancho del contenedor, "cantidad de fotos") */
    animation: slide 30s infinite alternate ease-in-out; /* Animación del deslizamiento */
}

/* Elementos individuales del slider */
.slider-frame li {
    width: 100%; /* Ancho completo del contenedor */
    list-style: none; /* Elimina los marcadores de lista */
}

/* Imágenes dentro del slider */
.slider-frame {
    width:auto; /* Ancho completo del contenedor */
    height: 600px; /* Altura automática */
    overflow: hidden; /* Oculta el contenido que sobresale del contenedor */
    position:relative; /* Posición relativa para alinear elementos internos */
}

/* Lista de elementos del slider */
.slider-frame ul {
    display: flex; /* Muestra los elementos en línea */
    padding: 0; /* Elimina el relleno */
    margin: 0; /* Elimina el margen */
    width: 600%; /* Ancho total de la lista (6 veces el ancho del contenedor) */
    animation: slide 30s infinite alternate ease-in-out; /* Animación del deslizamiento */
}

/* Elementos individuales del slider */
.slider-frame li {
    width: 100%; /* Ancho completo del contenedor */
    list-style: none; /* Elimina los marcadores de lista */
}

/* Imágenes dentro del slider */
.slider-frame img {
    width: 100%; /* Ancho completo del contenedor */
    height:auto; /* Altura automática */
}

@keyframes slide {
    0% { margin-left: 0; }
    14.28% { margin-left: 0; }

    16.66% { margin-left: -100%; }
    30% { margin-left: -100%; }

    33.33% { margin-left: -200%; }
    46.66% { margin-left: -200%; }

    50% { margin-left: -300%; }
    64.28% { margin-left: -300%; }

    66.66% { margin-left: -400%; }
    80% { margin-left: -400%; }

    83.33% { margin-left: -500%; }
    100% { margin-left: -500%; }

}

.logo {
    position: absolute; /* Posición absoluta para el logotipo */
    top: 50%; /* Sitúa el logotipo en el centro verticalmente */
    left: 49%; /* Sitúa el logotipo cerca del centro horizontalmente */
    transform: translate(-50%, -50%); /* Centra precisamente el logotipo */
    z-index: 1; /* Coloca el logotipo encima de otros elementos */
}
.logo img {
    width: 450px; /* Ancho del logotipo */
    height: auto; /* Altura automática */
    transition: all 0.5s; /* Transición suave para los cambios */
    cursor: pointer; /* Cambia el cursor al pasar sobre el logotipo */
}
.logo img:hover {
    transform: scale(1.2); /* Escala el logotipo al pasar el cursor */
}

/* Estilos para las noticias */
.noticia {
    margin: 10px auto; /* Margen exterior */
    max-width: 1400px; /* Ancho máximo del contenedor de noticias */
    padding: 10px; /* Relleno interior */
    display: flex; /* Muestra las noticias en fila */
    flex-wrap: wrap; /* Permite que las noticias se envuelvan */
    justify-content: flex-start; /* Justifica el contenido hacia el principio */
    position: relative; /* Posición relativa para alinear elementos internos */
}
.noticia h2 {
    text-align: center; /* Centra el título */
    font-size: 35px; /* Tamaño de fuente del título */
    color: #122746; /* Color del texto */
    margin-bottom: 10px; /* Margen inferior */
    width: 100%; /* Ancho completo */
}
.noticia-info {
    position: relative; /* Posición relativa para alinear elementos internos */
    display: flex; /* Muestra los elementos en fila */
    flex-direction: column; /* Coloca los elementos en columna */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    background-color: white; /* Color de fondo */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); /* Sombra */
    flex: 0 0 calc(33.33% - 20px); /* Ancho flexible para ocupar 1/3 del espacio */
    margin: 10px; /* Margen exterior */
}
.imagen-contenedor {
    height: 200px; /* Altura del contenedor de la imagen */
    overflow: hidden; /* Oculta el contenido que sobresale */
}
.imagen-contenedor img {
    width: 100%; /* Ancho completo de la imagen */
    height: auto; /* Altura automática */
    border-radius: 15px; /* Borde redondeado */
}
.noticia-info h3 {
    color: #122746; /* Color del texto */
    margin-bottom: 10px; /* Margen inferior */
    padding: 10px 10px; /* Relleno interior */
}
.noticia-info p {
    color: #555; /* Color del texto */
    padding: 10px 20px; /* Relleno interior */
    margin-bottom: 0; /* Elimina el margen inferior */
}

/* Estilos para el botón "ver más" */
.boton-contenedor {
    width: 100%; /* Ancho completo */
    display: flex; /* Muestra el botón como elemento en línea */
    justify-content: center; /* Centra horizontalmente el botón */
    margin-top: 15px; /* Margen superior */
}
.ver-mas {
    background-color: #122746; /* Color de fondo del botón */
    color: #eff9ff; /* Color del texto del botón */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Relleno interior */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cursor al pasar sobre el botón */
    border-radius: 5px; /* Borde redondeado */
    transition: background-color 0.4s ease; /* Transición suave */
}
.ver-mas:hover {
    background-color: #bee6ff; /* Color de fondo del botón al pasar el cursor */
    color: #122746; /* Cambio de color del texto del botón al pasar el cursor */
}
/* Enlaces de Interés */
.link-interes {
    margin: 20px auto; /* Margen exterior */
    max-width: 1400px; /* Ancho máximo del contenedor */
    text-align: center; /* Alineación del texto al centro */
}
.link-interes h2 {
    font-size: 35px; /* Tamaño de fuente del título */
    color: #122746; /* Color del texto */
    margin-bottom: 20px; /* Margen inferior */
}

/* Contenedor de columnas para los enlaces */
.link-columnas-contenedor {
    display: flex; /* Muestra las columnas en fila */
    justify-content: space-between; /* Distribuye el espacio entre las columnas */
    margin-top: 20px; /* Margen superior */
}

/* Estilos para cada columna de enlaces */
.link-columna {
    flex-basis: calc(33.33% - 20px); /* Ancho de cada columna */
    background-color: white; /* Color de fondo */
    padding: 20px; /* Relleno interior */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Estilos para las listas y elementos de lista de enlaces */
.link-lista, .link-item {
    margin: 0; /* Elimina el margen */
    padding: 0; /* Elimina el relleno */
    list-style: none; /* Elimina los marcadores de lista */
}
.link-item {
    margin-bottom: 15px; /* Margen inferior */
}
.link-item a {
    display: flex; /* Muestra los elementos en línea */
    align-items: center; /* Alinea verticalmente los elementos */
    text-decoration: none; /* Sin decoración de texto */
    color: #122746; /* Color del texto */
    text-transform: uppercase; /* Transforma el texto a mayúsculas */
}
.link-item img {
    width: 30px; /* Ancho de la imagen */
    height: auto; /* Altura automática */
    margin-right: 10px; /* Margen derecho */
}
.link-item:hover {
    text-decoration: underline; /* Subraya el enlace al pasar el cursor sobre él */
}

@media screen and (max-width: 1100px) {
    .img-portada {
        max-width: 100%;
        max-height: 400px;
    }
    .slider-frame ul {
        width: 300%;
    }
    .slider-frame li {
        width: 100%;
    }
    .logo {
        top: 40%; /* Ajusta la posición vertical del logo si es necesario */
        left: 50%;
    }
    .logo img {
        width: 320px; /* Ajusta el tamaño del logo */
        margin-top: 50px;
    }

    .imagen-contenedor {
        height: 200px; /* Mantiene una altura fija para las imágenes */
    }
    .imagen-contenedor img {
        width: 100%;
        height: 100%; /* Asegura que la imagen llene el contenedor */
        object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
    }
    .link-item a {
        font-size: 14px; /* Ajusta el tamaño del texto de los enlaces */
    }
    .link-item img {
        width: 20px; /* Ajusta el tamaño de las imágenes en los enlaces */
        height: auto;
    }
}

@media screen and (max-width: 900px) {
    .slider-frame {
        width: 100%;
        height: 165px;
    }
    .slider-frame ul {
        width: 300%;
    }
    .slider-frame li {
        width: 100%;
    }
    .slider-frame img {
        width: 100%;
        height: 100%;
    }
    .logo img {
        width: 150px;
        height: auto;
        transition: all 0.5s;
        cursor: pointer;
    }
    .noticia-info {
        flex: 0 0 calc(100% - 20px);
    }
    .link-columnas-contenedor {
        flex-direction: column;
        align-items: center;
    }
    .link-columna {
        flex-basis: 100%;
        margin-bottom: 20px;
    }
}