.general {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banercabecera {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
    width: 100%;
    height: 60vh;
    gap: 15vw;
}

.redondo img {
    height: 50vh;
    width: auto;
}

.parrafo {
    width: 28vw;
    text-align: left;
    word-break: break-word;
    line-break: normal;
    hyphens: auto;
    overflow-wrap: break-word;
    font-family: 'Segoe';
    font-size: 3vh;
}


.cinta {
    display: flex;
    width: 100%;
    background-color: #26282D;
    height: 10vh;
    margin-bottom: 10vh;
    margin-top: 1vh;
    justify-content: center;
    align-items: center;
}

.cinta p {
    color: aliceblue;
    font-size: 5vh;
    font-family: 'Sifonn';
}

.personal {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 3vw;
    justify-content: center;
    align-items: center;
}

.setenta {
    width: 64vw;
}

.treinta {
    width: 29vw;
}


/* --------parte 3 galeria------------------------- */

.galeria {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15vh;
}

.gallery {
    --g: 8px;
    /* the gap */
    --s: 400px;
    /* the size */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--g);
    border-radius: 50%;
}

.gallery>img {
    grid-area: 1/1;
    width: 75vh;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    transform: translate(var(--_x, 0), var(--_y, 0));
    cursor: pointer;
    z-index: 0;
    transition: .3s, z-index 0s .3s;
}

.gallery img:hover {
    --_i: 1;
    z-index: 1;
    transition: transform .2s, clip-path .3s .2s, z-index 0s;
}

.gallery:hover img {
    transform: translate(0, 0);
}

.gallery>img:nth-child(1) {
    clip-path: polygon(50% 50%, calc(50%*var(--_i, 0)) calc(120%*var(--_i, 0)), 0 calc(100%*var(--_i, 0)), 0 0, 100% 0, 100% calc(100%*var(--_i, 0)), calc(100% - 50%*var(--_i, 0)) calc(120%*var(--_i, 0)));
    --_y: calc(-1*var(--g))
}

.gallery>img:nth-child(2) {
    clip-path: polygon(50% 50%, calc(100% - 120%*var(--_i, 0)) calc(50%*var(--_i, 0)), calc(100% - 100%*var(--_i, 0)) 0, 100% 0, 100% 100%, calc(100% - 100%*var(--_i, 0)) 100%, calc(100% - 120%*var(--_i, 0)) calc(100% - 50%*var(--_i, 0)));
    --_x: var(--g)
}

.gallery>img:nth-child(3) {
    clip-path: polygon(50% 50%, calc(100% - 50%*var(--_i, 0)) calc(100% - 120%*var(--_i, 0)), 100% calc(100% - 120%*var(--_i, 0)), 100% 100%, 0 100%, 0 calc(100% - 100%*var(--_i, 0)), calc(50%*var(--_i, 0)) calc(100% - 120%*var(--_i, 0)));
    --_y: var(--g)
}

.gallery>img:nth-child(4) {
    clip-path: polygon(50% 50%, calc(120%*var(--_i, 0)) calc(50%*var(--_i, 0)), calc(100%*var(--_i, 0)) 0, 0 0, 0 100%, calc(100%*var(--_i, 0)) 100%, calc(120%*var(--_i, 0)) calc(100% - 50%*var(--_i, 0)));
    --_x: calc(-1*var(--g))
}

.clientes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 95%;
}

.clientes img {
    padding: 5px;
    margin: 50px;
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 740px) and ( orientation: portrait) {
    .banercabecera {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: aliceblue;
        width: 100%;
        height: auto;
    }
    .redondo img {
        margin-top: 2vh;
        height: 40vh;
        width: auto;
    }
    .parrafo {
        width: 80vw;
        text-align: justify;
        word-break: break-word;
        line-break: normal;
        hyphens: auto;
        overflow-wrap: break-word;
        font-family: 'Segoe';
        font-size: 2vh;
        margin-bottom: 5vh;
    }
    .cinta {
        display: flex;
        background-color: #26282D;
        height: 10vh;
        margin-bottom: 5vh;
        margin-top: 1vh;
        justify-content: center;
        align-items: center;
    }
    .cinta p {
        color: aliceblue;
        font-size: 3vh;
        font-family: 'Sifonn';
    }
    .personal {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5vh;
    }
}