/* Estilo para la sección de la portada */

.portada {
    width: 100%; /* Ocupar todo el ancho de la página */
    height: 95vh; /* Altura específica para la portada */
    display: flex; /* Usar flexbox para el diseño */
    gap: 5px; /* Espacio entre los elementos */
    align-items: center; /* Centrar verticalmente el contenido */
    padding: 0px 75px 30px 200px; /* Top Right Bottom Left */
    overflow: hidden; /* Para ocultar las estrellas que se salen del contenedor */
    position: relative; /* Asegura que las estrellas se posicionen correctamente */
    background-image: url(/static/images/home/4.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scaleX(-1); /* Invertir la imagen horizontalmente */

}


/* Esto invierte el contenido dentro del .portada, así que necesitas invertirlo nuevamente */
.portada > * {
    transform: scaleX(-1);
}

/* Especificar que los elementos h2 y h3 dentro de .portada no se inviertan */
.portada h2, .portada h4 {
    letter-spacing: 0.1em; /* Ajusta el espaciado entre letras según sea necesario */
    transform: scaleX(1);
}

.portada .text {
    flex: 1; /* Ocupa una parte del contenedor flex */
    color: rgb(255, 255, 255); /* Color del texto */
    z-index: 2; /* Asegura que el texto esté sobre el fondo */
}



h2 {
    font-size: 3vw; /* Ajusta el tamaño según sea necesario */
    margin-right: 5px; /* Ajusta el espacio según sea necesario */
}

h4 {
    font-size: 2.5vw; /* Unidades relativas para hacer el texto responsive */
}
.text h4 {
    text-align: justify;
}


.portada .photo {
    flex: 2; /* Ocupa 2/3 del contenedor flex */
    position: relative; /* Para posicionar las imágenes absolutas dentro de este contenedor */
    width: 100%;
    height: 100%;
    overflow: hidden; /* Oculta cualquier parte de las imágenes que sobresalga del contenedor */

}

.portada .collage {
    position: relative; /* Permite que las imágenes se posicionen absolutas dentro de él */
    width: 100%;
    height: 100%;
    clip-path: polygon(0 100%, 40% 0, 100% 0, 60% 100%); /* Forma de paralelogramo */
    display: flex;
    flex-wrap: wrap; /* Permite que las fotos se envuelvan en múltiples filas */
    justify-content: space-around; /* Espaciado uniforme entre las fotos */
    align-items: center; /* Centra las fotos verticalmente */
    padding: 10px; /* Espaciado interior opcional */
}

.portada .collage-photo {
    position: absolute;
    object-fit: cover; /* Asegura que las imágenes cubran el área sin distorsionarse */
    border-radius: 8px; /* Bordes redondeados opcionales */
    border: 4px solid white; /* Borde blanco alrededor de las imágenes */

}

.photo1 {
    top: -5%;
    right: 0%;
    width: 33%; 
    height: 33%;
}

.photo2 {
    top: -5%;
    right: 37%;
    width: 33%; 
    height: 33%;
}

.photo3 {
    top: 32%;
    right: 10%;
    width: 40%; 
    height: 33%;
}

.photo4 {
    top: 32%;
    right: 54%;
    width: 33%; 
    height: 33%;
}

.photo5 {
    top: 69%;
    right: 23%;
    width: 40%; 
    height: 33%;
}

.photo6 {
    top: 69%;
    right: 68%;
    width: 33%; 
    height: 33%;
}


/* Estilo para las estrellas */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: moveStar 10s linear infinite;
    opacity: 0.8;
    pointer-events: none;
    background: #2d86af; /* Color base de las estrellas */
}

/* Animación para las estrellas */
@keyframes moveStar {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(100vw - 2px), calc(100vh - 2px));
    }
}




/* Media query para pantallas medianas */
@media (max-width: 768px) {
    h4 {
        font-size: 8vw; /* Ajusta el tamaño según sea necesario */
    }

    h2 {
        font-size: 12vw; /* Ajusta el tamaño según sea necesario */
    }
}

/* Media query para pantallas pequeñas */
@media (max-width: 480px) {
    .portada .text {
        flex: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h4 {
        font-size: 8vw; /* Ajusta el tamaño según sea necesario */
    }

    h2 {
        font-size: 12vw; /* Ajusta el tamaño según sea necesario */
    }
}