/* General */
body {
    background-color: #f0f8fa; /* Fondo general de la página */
    color: #333; /* Color del texto principal */
    font-family: Arial, sans-serif; /* Fuente por defecto */
    margin: 0; /* Quitar márgenes del body */
    padding: 0; /* Quitar padding del body */
}

/* Header */
header {
    background-color: #04738e; /* Fondo azul del encabezado */
    border-radius: 5px; /* Bordes redondeados para el encabezado */
    display: flex; /* Flexbox para alinear contenido */
    align-items: center; /* Centrar contenido verticalmente */
    justify-content: center; /* Centrar contenido horizontalmente */
    position: relative; /* Posición relativa para el logo */
    height: 50px; /* Altura fija del encabezado */
}

/* Barra de menú */
.menu-bar {
    background-color: #045a6e; /* Fondo azul fuerte para la barra */
    height: 40px; /* Reducir la altura a la mitad */
    display: flex; /* Usar flexbox para centrar contenido */
    justify-content: center; /* Centrar elementos horizontalmente */
    align-items: center; /* Centrar elementos verticalmente */
    width: 100%; /* Hacer que la barra ocupe todo el ancho de la pantalla */
    margin: 0 auto; /* Centrar visualmente */
}

/* Menú principal */
.main-menu {
    display: flex; /* Usar flexbox para alinear las opciones del menú */
    justify-content: center; /* Centrar horizontalmente los elementos */
    list-style: none; /* Eliminar los puntos de las listas */
    padding: 0; /* Sin padding interno */
    margin: 0; /* Sin márgenes externos */
    gap: 2rem; /* Espaciado entre las opciones del menú */
}

.main-menu li {
    margin: 0; /* Eliminar márgenes internos de cada elemento */
}

.main-menu a {
    text-decoration: none; /* Eliminar subrayado del texto */
    font-weight: bold; /* Hacer las letras del menú en negrita */
    font-size: 1rem; /* Tamaño de la fuente de las opciones */
    color: white; /* Color blanco para el texto */
    position: relative; /* Necesario para el efecto de subrayado */
    padding: 0.5rem; /* Espaciado interno de las opciones */
    /*transition: color 0.3s; /* Transición suave en color */
    line-height: 0.5; /* Ajustar la altura de línea para evitar espacio adicional */
}  

.main-menu a:hover {
    color: #e0f7fa; /* Cambiar el color al pasar el cursor */
}

.main-menu a::after {
    content: ''; /* Crear una línea para el subrayado */
    display: block; /* Mostrar el subrayado como un bloque */
    width: 0; /* Ancho inicial del subrayado */
    height: 1px; /* Altura de la línea del subrayado */
    background-color: #e0f7fa; /* Color del subrayado */
    transition: width 0.3s; /* Transición suave para el ancho del subrayado */
    position: absolute; /* Posición absoluta para alinear el subrayado */
    bottom: 0; /* Reducir la distancia entre el texto y el subrayado */
    left: 0; /* Alineación inicial del subrayado */
}

.main-menu a:hover::after {
    width: 100%; /* El subrayado ocupa todo el ancho del texto al pasar el cursor */
}

/* Nueva sección de descripción */
.descripcion {
    max-width: 1000px; /* Más ancha que los grids de artículos destacados */
    margin: 2rem auto; /* Centrar horizontalmente y dar espacio superior/inferior */
    text-align: justify; /* Justificar el texto */
    padding: 1rem; /* Espaciado interno */
    background-color: #f9f9f9; /* Fondo claro */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.descripcion h2 {
    font-size: 1.8rem; /* Tamaño del título */
    color: #04738e; /* Color del título */
    margin-bottom: 1rem; /* Espaciado inferior */
    text-align: center; /* Centrar el título */
}

.descripcion p {
    font-size: 1rem; /* Tamaño del texto */
    color: #333; /* Color del texto */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
}


/* Publicaciones */
h2 {
    font-weight: bold;
    color: black;
}

/* Folder and PDFs */
.folder {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 1rem;
}

.folder-icon {
    width: 60px;
    margin-right: 10px;
    transition: transform 0.2s;
}

.folder-icon:hover {
    transform: scale(1.1);
}

.pdf-list {
    display: none;
    margin-left: 2rem;
}

.pdf-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pdf-item img {
    width: 20px;
    margin-right: 10px;
}

/* Figura centrada en la página */
figure {
    flex: 1; /* Permite que la imagen ocupe un espacio proporcional */
    max-width: 600px; /* Limita el ancho máximo de la figura */
    margin: 0 auto; /* Centra horizontalmente la figura */
    text-align: center; /* Alinea el texto debajo de la imagen */
    overflow: hidden;
}

img {
    width: 100%;
    max-width: 100%; /* Asegura que la imagen no se desborde */
    border-radius: 5px; /* Bordes redondeados */
}

/* Imagen de la portada - efecto de zoom */
figure img.portada {
    transition: transform 0.3s ease-in-out; /* Transición suave al agrandar */
}

figure img.portada:hover {
    transform: scale(1.05); /* Aumentar el tamaño un 5% al pasar el cursor */
}

main.container {
    overflow: hidden; /* Evita cualquier scroll innecesario en el contenido principal */
}

section {
    flex: 1; /* Permite que las publicaciones ocupen un espacio proporcional */
    max-width: 400px; /* Limita el ancho máximo */
    text-align: left; /* Alinea el texto a la izquierda */
}

/* Contenedor principal */
main.container {
    display: flex; /* Flexbox para organizar el contenido */
    flex-direction: column; /* Coloca los elementos en columna */
    align-items: center; /* Centra los elementos horizontalmente */
    min-height: 80vh; /* Asegura que esté centrado incluso con poca información */
    gap: 2rem; /* Mantén el espaciado entre elementos internos */
    margin-top: 1rem; /* Reduce el espacio superior */
}

.grid {
    display: flex; /* Flexbox para organizar imagen y publicaciones */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: flex-start; /* Alinea los elementos verticalmente */
    gap: 2rem; /* Espaciado uniforme entre imagen y publicaciones */
    max-width: 1000px; /* Limita el ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor en la página */
    padding: 0 1rem; /* Espaciado lateral para evitar desbordamientos */
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    color: white;
    border-radius: 5px;
    background-color: #04738e;
}

.social-icons img {
    width: 30px;
    margin: 0 5px;
    vertical-align: middle;
    transition: transform 0.3s ease-in-out; /* Animación suave al pasar el cursor */
}
.social-icons img:hover {
    transform: scale(1.4); /* Aumentar tamaño al pasar el cursor */
}

/* Contenedor principal de artículos */
.articulos {
    max-width: 100%; /* Permitir que la sección ocupe todo el ancho disponible */
    padding: 0 2rem; /* Agregar un margen interno para evitar que se pegue a los bordes */
}

/* Configuración de la grilla */
.articulos-grid {
    display: flex;
    flex-wrap: wrap; /* Permitir que los artículos se ajusten a la siguiente fila si no caben */
    gap: 2rem; /* Espacio entre los artículos */
    justify-content: center; /* Centrar los artículos */
}

/* Artículos */
.articulos article {
    flex: 0 0 calc(48% - 2rem); /* Ocupa aproximadamente el 48% del ancho */
    max-width: calc(48% - 2rem); /* Limita el ancho máximo a la mitad menos el espacio */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    background-color: #fff;
    transition: transform 0.2s;
    margin-bottom: 2rem; /* Espacio inferior entre filas */
}

/* Efectos al pasar el cursor */
.articulos article:hover {
    transform: scale(1.02);
}

/* Configuración de las imágenes */
.articulos img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.articulos h2 {
    font-size: 1.8rem;
    color: #045a6e;
    margin-bottom: 0rem;
    text-align: center; /* Centra el texto */
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
}

/* Títulos y textos */
.articulos h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 0.5rem;
    text-align: left;
}

.articulos p {
    font-size: 0.9rem;
    color: #555;
    text-align: justify;
}



/* Sección de Equipo Editorial */
.equipo-editorial {
    margin: 2rem auto; /* Espaciado superior e inferior */
    text-align: left; /* Texto alineado a la izquierda */
    max-width: 800px; /* Ancho máximo de la sección */
}

/* Título de la sección */
.equipo-editorial h2 {
    font-size: 1.5rem; /* Tamaño del título */
    color: #04738e; /* Color azul para el título */
    margin-bottom: 1rem; /* Espaciado inferior */
    text-align: center; /* Título centrado */
}

/* Lista de miembros */
.equipo-editorial ul {
    list-style-type: none; /* Quitar viñetas */
    padding: 0; /* Eliminar relleno */
    margin: 0; /* Eliminar margen */
}

/* Elementos individuales de la lista */
.equipo-editorial li {
    margin-bottom: 0.5rem; /* Espaciado entre elementos */
    line-height: 1.6; /* Mejorar legibilidad */
}

/* Nombre del miembro */
.equipo-editorial li strong {
    font-size: 1rem; /* Tamaño del nombre */
    color: #333; /* Color oscuro para el nombre */
    display: inline; /* Mantener en línea con el texto del cargo */
    margin-right: 0.5rem; /* Espaciado entre nombre y cargo */
}

/* Cargo del miembro */
.equipo-editorial li span {
    font-size: 0.9rem; /* Tamaño del cargo */
    color: #555; /* Color más claro para el cargo */
    display: inline; /* Mantener en línea con el nombre */
}

/* Responsive Fixes */

/* Adjustments for small screens */
@media (max-width: 768px) {
    /* Header adjustments: Hide logo on small screens */
    header img {
        display: none; /* Hide the logo */
    }

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 1rem;
        text-align: center;
    }

    header h1 {
        font-size: 1.5rem;
        margin: 0;
        line-height: 1.2;
    }

    /* Articles adjustments */
    .articulos-grid {
        display: flex;
        flex-direction: column; /* Stack articles vertically */
        gap: 1rem; /* Add spacing between articles */
        width: 100%; /* Ensure it takes full screen width */
        padding: 0;
    }

    .articulos article {
        flex: 1 1 auto;
        width: 100%; /* Make each article occupy full width */
        max-width: 100%;
        padding: 1rem;
        box-sizing: border-box;
    }

    .articulos img {
        max-width: 100%; /* Ensure images don’t overflow */
        height: auto;
    }

    /* Publications section adjustments */
    .grid {
        display: flex;
        flex-direction: column; /* Stack content vertically */
        gap: 1rem;
        width: 100%;
        padding: 0 1rem;
    }

    figure,
    section {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
}

/* Very small screens (mobile) */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.2rem;
    }

    .articulos h3 {
        font-size: 1rem;
        text-align: center;
    }

   /* Responsivo */
@media (max-width: 768px) {
    .equipo-editorial {
        max-width: 100%; /* Ajustar ancho al 100% */
        padding: 0 1rem; /* Espaciado interno lateral */
    }

    .equipo-editorial h2 {
        font-size: 1.3rem; /* Reducir tamaño del título */
    }

    .equipo-editorial li {
        line-height: 1.4; /* Ajustar la altura de línea */
    }

    .equipo-editorial li strong {
        font-size: 0.9rem; /* Reducir tamaño del nombre */
    }

    .equipo-editorial li span {
        font-size: 0.85rem; /* Reducir tamaño del cargo */
    }
}
}