@font-face {
    font-family: 'Gill Sans';
    src: url('/OBSANO-UNSIS-UANL/public/data/Gill Sans.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Sección Principal */
.hero {
    display: flex; /* Flexbox para el layout */
    justify-content: flex-start; /* Alinea el contenido hacia la izquierda */
    align-items: center; /* Alineación vertical */
    background-image: url('/OBSANO-UNSIS-UANL/public/img/prueba.jpg');  /* Aquí defines la ruta de tu imagen de fondo */
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center center; /* Centra la imagen */
    height: 100vh; /* Hace que ocupe toda la altura de la pantalla */
    color: white; /* Asegura que el texto sea visible sobre el fondo */
    padding: 50px; /* Padding para el texto */
    opacity: 0.4;
    transition: opacity 1.5s ease-in-out; /* Transición suave de opacidad */

}


.hero.visible {
    opacity: 1; /* Aparece al agregar la clase 'visible' */
}

.hero header h1, .hero p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra de texto para mejor contraste */
}

.hero .text-left {
    position: relative;
    background-color: rgba(6, 41, 13, 0.726); /* Fondo oscuro semitransparente */
    padding: 20px;
    max-width: 600px;
    z-index: 2;
}

/* Contenedor de texto (izquierda) */
.text-left {
    position: relative;
    z-index: 2;
    border-radius: 15px; /* Bordes redondeados */
    max-width: 600px;
    padding: 40px;  /* Puedes aumentar este valor para darle más espacio */
    margin-top: 120px;  /* Añadido para bajar el texto más */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil para dar profundidad */
}

.text-left header h1 {
    font-size: 2em; /* Tamaño grande para el encabezado */
    font-family: 'Gill Sans', sans-serif;
    margin-bottom: 10px;
    text-align: center;
}

.text-left header h2 {
    font-size: 1.5em; /* Más pequeño que el h1 */
    font-family: 'Gill Sans', sans-serif;
    text-align: center; /* Alineado igual que el h1 */
    margin-bottom: 20px; /* Espaciado inferior */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Misma sombra que el h1 */
}

.text-left p {
    font-size: 1.2em;
    line-height: 1.6;
    max-width: 500px; /* Limita el tamaño del párrafo */
    text-align: center;
    margin: 0 auto; /* Esto asegura que el párrafo se centre en su contenedor */
}



/* Responsividad */
@media screen and (max-width: 768px) {
    .hero {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        text-align: center; /* Centra el texto */
    }

    .text-left {
        max-width: 100%; /* Deja que ocupe todo el ancho disponible */
    }

    .text-left header h1 {
        font-size: 2em; /* Ajusta el tamaño del encabezado */
    }

    .text-left p {
        font-size: 1em; /* Ajusta el tamaño del párrafo */
    }
}



/* Estilo para el contenedor principal */
.section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 20px 140px;
    opacity: 1;  /* Mantiene la opacidad para que no se desvanezca */
    transform: translateY(100px); /* Se coloca más abajo */
    transition: transform 1.5s ease-in-out; /* Solo afecta el desplazamiento */
}

.section.visible {
    transform: translateY(0); /* Se mueve a su posición original */
}

ul {
    list-style-type: disc;  /* Esto cambia las viñetas a puntos negros */
    padding-left: 20px;  /* Añade espacio para que las viñetas no se peguen al borde */
}

li {
    font-size: 1.2em;  /* Ajusta el tamaño de los elementos de lista si es necesario */
    margin-left: 40px;

}

/* Estilo para la imagen a la izquierda */
.left-side img {
    width: 100%;
    max-width: 320px; /* Ajusta el tamaño máximo de la imagen */
    height: auto;
    border-radius: 10px; /* Opcional, para bordes redondeados */
}

/* Estilo para el texto a la derecha */
.right-side {
    max-width: 600px; /* Limita el tamaño del texto */
    padding-left: 0px; /* Espacio entre la imagen y el texto */
}

/* Título y párrafo */
.right-side h2 {
    font-size: 2em;
    font-family: 'Gill Sans', sans-serif;
    margin-bottom: 15px;
}

.green-text .right-side p {
    color: #33691e;  /* Cambia el color del texto a verde solo en esta sección */
    font-weight: 600; /* Esto aplica negrita */

}
.right-side p {
    font-size: 1.2em;
    line-height: 1.6;
}

/* La clase para activar la animación */
.section.animate {
    animation: sectionSlideUp 1.5s ease-out forwards; /* Aparece con el slide */
}

.section-map {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 40px;
    background-color: #f0f0f0;
    max-width: 100%;
    margin: 40px 0;
    border-radius: 10px;
}

.map-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
}

.map-container img {
    width: 400px;
    max-width: 100%;
}

.info-container {
    background-color: white;
    padding: 20px;
    color: #33691e;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
}

.info-text {
    font-size: 18px;
    color: #555;
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
}


/* Estilo para la sección de Producción Científica */
.section-science {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    background-color: #4caf50; /* Fondo verde sólido */
    background: linear-gradient(135deg, #4caf50, #388e3c); /* Gradiente verde */
    color: white; /* Texto blanco para el contenido */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.section-science .left-side img {
    width: 100%;
    max-width: 600px; /* Ajustar tamaño máximo de la imagen */
    height: auto;
    border-radius: 12px; /* Bordes redondeados en la imagen */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Sombra sutil alrededor de la imagen */
    transition: transform 0.3s ease; /* Efecto de hover */
}

/* Efecto al pasar el ratón sobre la imagen */
.section-science .left-side img:hover {
    transform: scale(1.05); /* Hace que la imagen se agrande un poco */
}

/* Estilo para el texto a la derecha */
.section-science .right-side {
    max-width: 600px;
    color: white; /* Aseguramos que el texto en la sección también sea blanco */
}

.section-science .right-side h2 {
    font-size: 2em;
    margin-bottom: 15px;
    font-weight: bold;
    color: white; /* Aseguramos que el h2 sea blanco */
}

.section-science .right-side h3 {
    font-size: 1.7em;
    margin-bottom: 10px;
    font-weight: normal;
    color: white; /* Aseguramos que el h3 sea blanco */
}

.section-science .right-side p {
    font-size: 1.2em;
    line-height: 1.6;
    text-align: justify; /* Justifica el texto */
    margin-bottom: 20px;
}

/* Sección iconos */
.section-icons {
    position: relative; /* Para colocar elementos encima de la imagen de fondo */
    text-align: center;
    padding: 40px 20px;
    background: url('/OBSANO-UNSIS-UANL/public/img/fondoicono.jpg') center/cover no-repeat; /* Imagen de fondo */
    height: 53vh; /* Ajusta la altura de la sección */
}

.section-icons::before {
    content: ""; /* Necesario para crear el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.233); /* Capa semitransparente */
    backdrop-filter: blur(3px); /* Difumina el fondo */
    z-index: 1; /* Asegura que el fondo se quede atrás */
}


.section-title {
    font-size: 2.5em;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    color: #408326;
    z-index: 2; /* Asegura que el título esté por encima del fondo difuminado */
    position: relative;

}

.icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Se ajusta en pantallas pequeñas */
    gap: 20px;
    z-index: 2; /* Asegura que los iconos estén por encima del fondo difuminado */
    position: relative;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px; /* Tamaño uniforme del contenedor */
    height: 150px;
    text-align: center;
    background-color: white; /* Fondo del contenedor */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    padding: 15px;
    transition: transform 0.3s ease-in-out;
    z-index: 2; /* Asegura que los iconos estén sobre el fondo */
}

.icon:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
}

.icon img {
    width: 60px; /* Tamaño del icono */
    height: 60px;
    object-fit: contain;
}

.icon p {
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: #33691e;
}

/*sección perspectiva*/
.section-perspectives {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px;
    background-color: #4caf50; /* Fondo verde sólido */
    background: linear-gradient(135deg, #4caf50, #388e3c); /* Gradiente verde */
}

.btn-container {
    text-align: right; /* Alinea el botón a la derecha */
    margin-top: 15px; /* Espacio entre el párrafo y el botón */
}

.more-info {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffffff;
    color: #388e3c;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.more-info:hover {
    background-color: #388e3c;
    color: #232255;
}


.section-perspectives .left-side {
    width: 60%; /* El texto ocupa el 60% del espacio */
    padding: 20px;
}

.section-perspectives .right-side {
    width: 35%; /* La imagen ocupa el 35% del espacio */
    padding: 20px;
}

.section-perspectives header h2 {
    font-size: 2em;
    margin-bottom: 15px;
    font-weight: bold;
    color: white; /* Aseguramos que el h2 sea blanco */
}

.section-perspectives header p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: white; /* Aseguramos que el h3 sea blanco */
    text-align: justify; /* Justifica el texto */


}

.section-perspectives header2 h3 {
    font-size: 1.7em;
    margin-bottom: 10px;
    font-weight: normal;
    color: white; /* Aseguramos que el h3 sea blanco */
}

.section-perspectives header2 p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: white; /* Aseguramos que el h3 sea blanco */
    text-align: justify; /* Justifica el texto */

}

.section-perspectives .right-side img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil alrededor de la imagen */
    transform: translateX(100%); /* La imagen empieza fuera de la vista */
    opacity: 0; /* Inicia con opacidad 0 */
    transition: transform 1s ease-out, opacity 1s ease-out; /* Transición suave */
}
/* Cuando la imagen se vuelve visible */
.section-perspectives.visible .right-side img {
    transform: translateX(0); /* Desplazamiento hacia la posición original */
    opacity: 1; /* Hacer visible la imagen */
}

/*evitar desplazamiento a derecha*/
body, html {
    overflow-x: hidden;
    font-family: 'Gill Sans', sans-serif;
}

/*sección equipo*/
/* Estilo para la sección del equipo */
.section-team {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9; /* Fondo claro */
}

.section-team .section-title {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #33691e;
    font-weight: bold;
}

/* Contenedor de los miembros del equipo */
/* Estilos para los miembros del equipo */
.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Estilo para cada miembro del equipo */
.team-member {
    width: calc(33.333% - 20px); 
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añadimos transición para suavizar el efecto */
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    border: 2px solid #388e3c; /* Borde sólido alrededor del círculo */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil para resaltar */
}

/* Nombre y rol */
.team-member .name {
    font-size: 1.2em;
    font-weight: bold;
    color: #0eaa16;
}

.team-member .role {
    font-size: 1em;
    color: #000000;
}

/* Efecto hover para destacar el miembro */
.team-member:hover {
    transform: scale(1.1); /* Aumentamos el tamaño */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .team-member {
        width: calc(50% - 20px); /* Dos miembros por fila en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .team-member {
        width: 100%; /* Un miembro por fila en pantallas pequeñas */
    }
}


/* Sección decisiones */
.section-decisiones {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: white;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Ocultar inicialmente */
.hidden {
    opacity: 0;
    transform: translateY(50px);
}

/* Cuando entra en pantalla */
.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Contenido */
.decisiones-content {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
}

/* Título */
.decisiones-content h2 {
    font-size: 2.5em;
    font-family: 'Gill Sans', sans-serif;
    font-weight: bold;
    color: white;
}

/* Descripción */
.decisiones-content p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Botón */
.btn-unete {
    display: inline-block;
    padding: 12px 25px;
    background-color: white;
    color: #388e3c;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-unete:hover {
    background-color: #388e3c;
    color: white;
}

/* Efecto hover en imágenes */
.container .logo img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container .logo img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}