/* Prevent horizontal scroll on all devices */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all elements stay within viewport */
* {
    box-sizing: border-box;
}

@media (max-width: 1590px) {
    .img-quien img{
        height: 80%;
        z-index: 0;
    }
    .quien{
        z-index: 1;
    }
}
@media (max-width: 1200px) {
 .text-header {
    width: 50%;
    font-size: 5rem;
 }
 .text-header h2{
    font-size: 5rem;
 }
 .quien h2{
    font-size: 2.5rem;
}
.quien p{
    font-size: 1.5rem;
}
.all{
    display: none;
}
}




@media(max-width: 1100px){
    .quien{
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 840px) {
    .img-header img{
        height: 100vh;
        width: 100vw;
    }
    .text-header {
        width: 100%;
        font-size: 3rem;
    }
    .text-header h2 {
        font-size: 5rem;
    }
    .quien{
        left: 30%;
    }
    .quien p{
        width: 180%;
        font-size: 1.5rem;
    }
}
@media (max-width: 768px) {
    .img-header img{
        height: 100vh;
        width: 100vw;
    }
    .text-header {
        width: 100%;
        font-size: 2rem;
    }
    .text-header h2 {
        font-size: 4rem;
    }
}
@media (max-width: 600px) {
    .img-header img{
        display: none;
    }
    .text-header {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        font-size: 2rem;
    }
    .text-header h2 {
        font-size: 3rem;
    }
    .quien h2{
        font-size: 2rem;
    }   
    .quien p{
        font-size: 1rem;
    }
    .img-quien img{
        mask-image:linear-gradient(black 10%, transparent 100%);
    }
}
@media (max-width: 480px) {
    .text-header h1{
        font-size: 1rem;
    }
    .text-header h2 {
        font-size: 2rem;
    }
    .quien h2{
        font-size: 1.5rem;
    }   
    .quien p{
        font-size: 1rem;
    }
    .img-quien img{
        mask-image:linear-gradient(black 10%, transparent 100%);
    }
    .main-quien{
        flex-direction: column;
        gap: 5rem;
    }
    .img-quien img{
        height: 100vh;
        width: 100vw;
    }
    .quien{
        left: 25%;
    }
}