/* Estilos para el carrusel de fondo */
.carousel-wrapper {
    position: relative; /* Cambiado a relative para asegurar que la sección de bienvenida se coloque encima */
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh; /* Ajusta la altura del carrusel para que ocupe toda la pantalla */
    overflow: hidden;
    z-index: 1; /* Coloca el carrusel detrás del contenido */
}

/* Estilos para las imágenes del carrusel */
.carousel-item img {
    object-fit: cover; /* Asegura que la imagen cubra el área del carrusel */
    height: 90vh; /* Ajusta la altura de la imagen para cubrir la pantalla */
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    bottom: 170px; /* Ajusta este valor según lo necesites */
    top: auto; /* Asegúrate de eliminar la alineación vertical superior */
    transform: translateY(0); /* Elimina cualquier desplazamiento vertical */
    z-index: 2; /* Mantén las flechas por encima del contenido */
}

.carousel-control-prev {
    left: 0%; /* Ajusta la posición horizontal de la flecha izquierda */
}

.carousel-control-next {
    right: 0%; /* Ajusta la posición horizontal de la flecha derecha */
}

/* Estilos para la sección de bienvenida */
.welcome-section {
    position: absolute; /* Cambiado a absolute para posicionar la sección sobre el carrusel */
    top: 55%; /* Ajusta la posición vertical para centrar la sección verticalmente */
    left: 50%; /* Alinea al centro horizontalmente */
    transform: translate(-50%, -50%); /* Centra horizontal y verticalmente */
    height: auto; /* Ajusta automáticamente la altura basada en el contenido */
    width: 100vw; /* Ajusta el ancho de la sección de bienvenida */
    max-width: none; /* Ancho máximo para pantallas grandes */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    text-align: center;
    padding: 0px;
    color: white; /* Asegura que el texto sea legible sobre el fondo */
    background: rgba(0, 0, 0, 0.185); /* Fondo semitransparente para el contenido */
    z-index: 2; /* Asegura que el contenido de bienvenida esté sobre el carrusel y controles */
}

.bienvenida-parrafo {
    font-size: 30px; /* Ajusta el tamaño de letra según tus necesidades */
    line-height: 1.2; /* Espaciado entre líneas para mejor legibilidad */ 
    margin: 40px; /* Centra el contenido horizontalmente dentro del contenedor */
    text-align: center;
    font-style: normal;
    text-shadow: none rgb(0, 0, 0); /* Sombra de texto */
}

/* Estilos para las secciones de pantalla completa */
.full-screen-section {
    position: relative; /* Asegura que las secciones posteriores estén en la capa correcta */
    z-index: 1; /* Asegura que las secciones estén detrás del contenido con z-index mayor */
}

/* Otros estilos para las secciones y tarjetas */
.lineas-section .card-transparent {
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-width: 250px; /* Ancho mínimo para mantener la legibilidad */
    padding: 15px;
    position: relative; /* Para utilizar posición relativa en las tarjetas */
    transition: transform 0.3s ease, filter 0.3s ease; /* Transiciones suaves para el efecto hover */
}

.lineas-section .card-transparent .card-img-top {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 50%; /* Hace que la imagen sea circular */
    margin-bottom: 10px; /* Espacio entre la imagen y el título */
}

.lineas-section .card-transparent:hover {
    transform: translateY(-5px); /* Efecto de elevación al hacer hover */
}

.lineas-section .card-transparent:hover .card-img-top {
    filter: brightness(80%); /* Ajusta el brillo para oscurecer la imagen */
}

.lineas-section .card-transparent .card-body {
    padding: 0; /* Elimina el padding interno si es necesario */
    text-align: center; /* Centra el contenido del cuerpo de la tarjeta */
}

.lineas-section .card-transparent .card-title {
    margin-top: 10px; /* Ajusta el margen superior del título */
}

.lineas-section .card-transparent .btn {
    margin-top: 10px; /* Ajusta el margen superior del botón */
    background-color: #00635b; /* Color de fondo del botón */
    color: #ffffff; /* Color del texto del botón */
    border-color: #00635b; /* Color del borde del botón */
    padding: 6px 12px; /* Ajusta el padding del botón */
    font-size: 14px; /* Tamaño de fuente del botón */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
}

.lineas-section .card-transparent .btn:hover {
    background-color: #00473e; /* Color de fondo del botón al hacer hover */
    border-color: #00473e; /* Color del borde del botón al hacer hover */
}

/* Ajuste para el título h2 de Líneas de Investigación */
.lineas-section h2 {
    margin-top: 30px !important; /* Ajusta el margen superior del h2 */
    margin-bottom: 30px !important; /* Ajusta el margen inferior del h2 */
    text-align: center !important; /* Asegura que el texto esté centrado */
}

/* Estilos para la sección de noticias */
.noticias-section {
    padding: 20px 0; /* Añade espacio superior e inferior a la sección de noticias */
}

.noticias-section .container {
    display: flex;
    flex-direction: column; /* Asegura que el contenido se apile verticalmente en pantallas pequeñas */
    align-items: center; /* Centra horizontalmente el contenido dentro del contenedor */
}

.noticias-section .row {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan si es necesario */
    justify-content: center; /* Centra horizontalmente las tarjetas en la fila */
}

/* Estilos para las tarjetas de noticias */
.noticias-section .card-transparent {
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que las tarjetas ocupen el mismo ancho */
    max-width: 600px; /* Ancho máximo para mantener uniformidad */
    height: 100%; /* Asegura que las tarjetas ocupen la misma altura */
    padding: 15px;
    transition: transform 0.3s ease, filter 0.3s ease; /* Transiciones suaves para el efecto hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra ligera para separar las tarjetas visualmente */
}

/* Estilos para las imágenes en las tarjetas de noticias */
.noticias-section .card-transparent .card-img-top {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho de la tarjeta */
    height: 200px; /* Ajusta la altura para que todas las imágenes tengan la misma altura */
    object-fit: cover; /* Ajusta la imagen para cubrir el área sin deformarla */
    margin-bottom: 10px; /* Espacio entre la imagen y el título */
    transition: filter 0.3s ease; /* Transición suave para el efecto hover */
    border-radius: 4px;
}

.noticias-section .card-transparent:hover {
    transform: translateY(-5px); /* Efecto de elevación al hacer hover */
}

.noticias-section .card-transparent:hover .card-img-top {
    filter: brightness(80%); /* Ajusta el brillo para oscurecer la imagen al hacer hover */
}

.noticias-section .card-transparent .card-body {
    text-align: center; /* Centra el contenido del cuerpo de la tarjeta */
}

.noticias-section .card-transparent .card-title {
    margin-top: 10px; /* Ajusta el margen superior del título */
}

/* Estilo del botón "Leer más" */
.noticias-section .card-transparent .btn-leer-mas {
    margin-top: 15px; /* Empuja el botón al fondo del contenedor */
    color: #fff; /* Color del texto */
    background-color: #00635b; /* Color de fondo del botón */
    border-color: #00635b; /* Borde con el mismo color */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Elimina el subrayado */
    display: inline-block; /* Asegura un comportamiento de botón */
    text-align: center; /* Centra el texto */
    font-size: 14px;
    padding: 7px 14px; /* Ajusta el padding del botón */
    font-weight: normal; /* Texto en negrita */
    transition: background-color 0.3s, border-color 0.3s; /* Transición para efectos */
}

/* Efecto hover para el botón */
.noticias-section .card-transparent .btn-leer-mas:hover {
    color: #fff; /* Color del texto */
    background-color: #00473e; /* Fondo más oscuro al pasar el mouse */
    border-color: #00473e; /* Borde del mismo color */    
}

/* Mobile: Pantallas menores a 768px */
@media (max-width: 767px) {
    
    .noticias-section .container {
        flex-direction: column; /* Asegura la dirección vertical */
        gap: 20px; /* Añade espacio entre las tarjetas */
    }

    .noticias-section .row {
        flex-direction: column; /* Fuerza la alineación vertical */
        gap: 20px; /* Espacio entre las filas */
    }

    .noticias-section .card-transparent {
        width: 90%; /* Ajusta el ancho de las tarjetas */
        max-width: 400px; /* Límite máximo para evitar que se vean demasiado grandes */
        margin: 0 auto; /* Centra horizontalmente las tarjetas */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Ajusta ligeramente la sombra */
    }
}

/* Responsive para Tablets: Pantallas entre 768px y 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .noticias-section .container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Mantiene las noticias centradas */
        padding: 20px;
    }

    .noticias-section .row {
        display: flex;
        flex-wrap: wrap; /* Permite que las tarjetas se acomoden en varias filas */
        justify-content: center; /* Centra las tarjetas */
        gap: 20px; /* Espacio entre las tarjetas */
    }

    .noticias-section .card-transparent {
        width: 45%; /* Dos tarjetas por fila en tablets */
        max-width: 350px; /* Limita el ancho máximo */
        height: auto; /* Permite altura dinámica */
        padding: 15px; /* Espaciado interno */
        margin: 10px; /* Espaciado entre las tarjetas */
    }

    .noticias-section img {
        width: 100%; /* Imagen ocupa todo el ancho de la tarjeta */
        height: 200px; /* Ajuste para tablets */
        object-fit: cover; /* Mantiene la proporción */
        border-radius: 8px;
    }

    .noticias-section h2 {
        font-size: 20px; /* Tamaño de texto para títulos */
        margin-top: 10px;
        text-align: center;
    }

    .noticias-section p {
        font-size: 16px; /* Texto más grande y legible */
        color: #555;
        text-align: justify; /* Alineación justificada para mejor legibilidad */
    }

    .noticias-section .btn-leer-mas {
        font-size: 16px; /* Botón más visible */
        padding: 10px 20px; /* Espaciado más amplio */
        display: block;
        margin: 10px auto 0; /* Centrado del botón */
        text-align: center;
    }
}