/* Estilos generales */

body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    color: white;
    text-align: center;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

section {
    scroll-snap-align: start;
    min-height: 100vh; /* Sección al menos ocupa una pantalla */
    max-height: fit-content;
    padding: 5% 25%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Asegura que los elementos estén alineados correctamente */
}

/* Portada */
#portada {
    background-color: #264653;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.fullscreen-svg {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform 1s ease-in-out;
}

.fullscreen-svg embed {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* Sección 1 */
#seccion1 {
    background-color: #E76F51;
    padding: 5% 25%;
    position: relative;
}

/* Sección 2 */
#seccion2 {
    background-color: #F4A261;  /* Color de la segunda sección */
    padding: 5% 25%;
    position: relative;
    color: #264653;
}

/* Sección 3 */
#seccion3 {
    background-color: #E9C46A;  /* Color de la tercera sección */
    padding: 5% 25%;
    position: relative;
    color: #264653;
    text-align: left; /* Alinea el texto a la izquierda */
    /* font-size: 1.2rem;
    line-height: 1.6; */
}

/* Sección 4 */
#seccion4 {
    background-color: #2A9D8F;  /* Color de la tercera sección */
    padding: 5% 25%;
    position: relative;
    color: #264653;
}

/* Contenido */
.titulo {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 80%;
}

/* Estilos generales del contenido */
.contenido {
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: justify;
    overflow: hidden; /* Oculta el contenido excedente */
    max-height: 70vh; /* Limita la altura visible del texto */
    transition: max-height 0.3s ease-in-out; /* Para que el texto se expanda o colapse suavemente */
}

/* Cuando el contenido se expanda, quitamos el límite de altura */
.contenido.expandido {
    max-height: fit-content; /* Asegura que todo el texto sea visible */
}

/* Estilos generales del botón */
.leerMasBtn {
    background-color: #2A9D8F; /* Color del botón por defecto */
    border-radius: 25px;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}


/* Botón de la Sección 1 */
#leerMasBtn1 {
    background-color: #2A9D8F; /* Color específico */
}

/* Para cuando el botón está en su estado expandido (Leer menos) */
.leerMasBtn.expandido {
    background-color: #2A9D8F; /* Color cuando el contenido está expandido */
}

/* Botón de la Sección 2 */
#leerMasBtn2 {
    background-color: #E76F51; /* Color específico */
}
/* Para cuando el botón está en su estado expandido (Leer menos) */
.leerMasBtn.expandido {
    background-color: #2A9D8F; /* Color cuando el contenido está expandido */
}


/* Botón de la Sección 3 */
#leerMasBtn3 {
    background-color: #E76F51; /* Color específico */
}

#leerMasBtn3:hover {
    background-color: #2A9D8F; /* Hover de la Sección 3 */
}


/* Estilos del enlace */
.enlace-archivo {
    display: block; /* Esto asegura que el enlace ocupe toda la línea */
    margin-top: 20px; /* Asegura que el enlace esté debajo del botón */
    color: white; /* Color del enlace */
    text-decoration: none; /* Eliminar subrayado */
    padding: 10px;
    background-color: #757575;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover para cambiar el color del enlace */
.enlace-archivo:hover {
    background-color: #979797;
    color: white;
}


/* Logo */
.logo {
    position: absolute; /* Usa fixed para que no suba con el contenido */
    bottom: 5%;
    left: 5%;
    width: 15vw; /* Tamaño proporcional al ancho de la pantalla */
    height: auto; /* Mantiene la proporción del logo */
    z-index: 10; /* Asegura que el logo quede por encima de otros elementos */
}

/* Nuevo contenedor para el contenido de la sección */
.contenido-section {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(50px); /* Se mueve hacia abajo */
    transition: opacity 1s ease, transform 1s ease; /* Animación de opacidad y transformación */
}

/* Sección visible (cuando entra en el viewport) */
.second-section.visible .contenido-section {
    opacity: 1; /* Se hace visible */
    transform: translateY(0); /* Se mueve a su posición original */
}


/* Contenedor de los recuadros de los integrantes */
.integrantes-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    padding-bottom: 45px; /* Aumentamos el padding abajo para dar espacio a las sombras */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    z-index: 2; /* Aseguramos que el contenedor de los integrantes esté encima */
  }

  /* Contenedor principal del carrusel */
.integrantes-container-wrapper {
    position: relative;
    padding: 0 60px; /* Añadido espacio extra a los lados para las flechas */
    margin-left: -45px; /* Mueve el carrusel 20px hacia la izquierda */
}
  
  .integrantes-container::-webkit-scrollbar {
    display: none; /* Ocultar barra de desplazamiento en Webkit (Chrome, Safari) */
  }

/* Recúadros de los integrantes */
.integrante {
    flex: 0 0 calc(100% / 3.3);
    background: white;
    border-radius: 10px;
    box-shadow: 35px 35px 0px #264653; /* Sombra */
    text-align: center;
    /* padding: 20px; */
    scroll-snap-align: center;
    z-index: 3; /* Aseguramos que cada recuadro esté encima */
    overflow: hidden; /* Para asegurarnos de que la imagen no sobresalga */
  }
  
/* Recúadros de los integrantes */
.integrante img {
    width: 100%;
    height: auto;
    border-radius: 0; /* Quitamos esquinas redondeadas para alinearse con los bordes */
    object-fit: cover;
    display: block;
  }

  .integrante h3,
  .integrante .cargo,
  .integrante .bio {
    padding: 10px;
  }
  
  .cargo {
    font-size: 0.9em;
    color: gray;
  }
  
  .bio {
    font-size: 0.8em;
    color: darkgray;
  }
  
/* Específico para los íconos de correo */
.integrante a img.mail-icon {
    width: 20px; /* Tamaño deseado */
    height: 20px; /* Asegura que el ícono tenga las mismas dimensiones */
    margin-top: 10px;
    margin-bottom: 5%;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: inline-block; /* No se estira */
    border-radius: 0;      /* El icono no tiene bordes redondeados */
    object-fit: contain; /* Asegura que el ícono se ajuste sin distorsionarse */
  }
  
  .mail-icon:hover {
    transform: scale(1.1); /* Efecto al pasar el mouse */
  }

/* Contenedor de las flechas */
.flechas {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none;
    z-index: 1;
  }
  
  /* Flechas individualmente */
  .flechas .flecha {
    cursor: pointer;
    width: 40px; 
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }
  
/* Flecha izquierda */
.flechas .flecha.izquierda {
    position: absolute;
    left: -60px; /* Mueve la flecha hacia la izquierda fuera del carrusel */
    cursor: pointer;
    width: 40px;
    height: 40px;
  }
  
  /* Flecha derecha */
  .flechas .flecha.derecha {
    position: absolute;
    right: 15px; /* Mueve la flecha hacia la derecha fuera del carrusel */
    cursor: pointer;
    width: 40px;
    height: 40px;
  }
  
  /* Estilo para las imágenes de las flechas */
  .flechas img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* Círculos de paginación */
  .paginacion-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }
  
  .paginacion-container .circle {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  
  .paginacion-container .circle.active {
    background-color: #264653; /* Resaltar el círculo activo */
  }
  

  footer {
    background-color: #264653;  /* Fondo del footer */
    color: white;
    padding: 20px;
    text-align: center;
    position: relative; /* Asegura que se quede encima del contenido */
    z-index: 1000; /* Asegura que el footer esté por encima de otros elementos */
    width: 100%; /* Asegura que ocupe todo el ancho de la pantalla */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    overflow-x: hidden; /* Evita que el contenido se desborde hacia la derecha */
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.footer-images {
    display: flex;
    justify-content: center;
    align-items: center;  /* Alinea las imágenes verticalmente en el centro */
    gap: 30px;  /* Aumenta el espacio entre las imágenes */
    margin-bottom: 20px;
}

.footer-images img {
    width: 80px; /* Ajusta el tamaño de las imágenes */
    height: auto;
    transition: transform 0.3s ease;
}

.footer-images img:hover {
    transform: scale(1.1); /* Efecto de hover */
}

.footer-text {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-social-icons a img {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
}

.footer-social-icons a:hover img {
    transform: scale(1.1); /* Efecto de hover */
}

@media (max-width: 768px) {
    .footer-images {
        flex-direction: row;  /* Asegura que las imágenes estén en fila, no en columna */
        gap: 20px;  /* Reduce el espacio entre las imágenes en móviles */
    }

    .footer-images img {
        width: 60px; /* Ajusta el tamaño de las imágenes en móviles */
    }
}


/* Responsive */
@media (max-width: 768px) {
    

    #seccion1, #seccion2, #seccion3, #seccion4 {
        padding: 10% 10%;
    }

    .contenido {
        font-size: 1.0rem;
    }

    .integrantes-container-wrapper {
        position: relative;
        padding: 0 00px; /* Añadido espacio extra a los lados para las flechas */
        margin-left: -45px; /* Mueve el carrusel 20px hacia la izquierda */
    }
  

    .integrante {
        flex: 0 0 100%; /* 1 integrante visible */
    }

    .flechas {
        display: none;
    }

    .logo {
        position: static;
        display: block;
        margin: 20px auto 0 auto;
        width: 25vw; /* Tamaño proporcional al ancho de la pantalla */
        height: auto; /* Mantiene la proporción del logo */
    }
}

@media (min-width: 768px) and (max-width: 1350px) {
    .integrante {
        flex: 0 0 calc(100% / 2); /* 2 integrantes visibles */
    }
}

/* Pantallas intermedias */ /* 2 integrantes completos en vista */
/* @media (max-width: 1324px) { 
    .integrante {
        flex: 0 0 calc(100% / 2); 
    }
} */

/* @media (min-width: 1024px) {
    .integrantes-container {
        justify-content: flex-start; 
        overflow-x: hidden; 
    }
    
    .integrante {
        flex: 0 0 calc(100% / 3.3); 
    }
} */