
.redes-container {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0px auto;
gap: 20px;
max-width: 1140px;
}

.redes__title {
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    font-family: 'Sora', sans-serif;
}

.redes__title_box h2 {
    font-weight: bold;
    font-size: 35px;
}

.row__redes-content {
height: 250px;
/* width: 100%; */
display: flex;
gap: 20px;/*gap añade espacios en blanco, para que ya no sea necesario usar el margin y afectara a los que no lo necesitan.*/
opacity: 0;
transform: translateX(-10%);
transition: opacity 1s ease, transform 1s ease;
}

.animar-redes {
opacity: 1;
transform: translateX(0);
}

.redes__square-box,
.redes__rectangle-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* border: 1px solid black; */
border-radius: 5px;

width: 100%;
}
.redes__square-box {
width: 400px;
/* background-color: var(--yellow-secbyte); */
/* border-bottom-left-radius: 10%;
border-bottom-right-radius: 50%; */
/* border: 5px solid var(--blue1-secbyte); */
}

/* .redes-container .row__redes-content:nth-child(2) .redes__square-box { */
    /* border-bottom-left-radius: 50%;
    border-bottom-right-radius: 5px; */
/* } */

.redes__rectangle-box {
width: calc(100% - 400px); /*cal para la cantidad obtenida de el total cuando restamos*/
background-color: var(--blue1-secbyte);
padding: 20px;
}

/* .redes-container .row__redes-content:nth-child(2) .redes__rectangle-box {
background-color: var(--blue1-secbyte);
}
.redes-container .row__redes-content:nth-child(3) .redes__rectangle-box {
background-color:var(--blue1-secbyte);
} */

.redes__square-box img {
width: 100%;
height: 100%;
object-fit: cover; /* ajustando la imagen para que cubra todo el contenedor */
border-radius: 10px;
}

.content__redes {
/* position: relative; */
margin: 20px;
width: 100%;
}

.redes__rectangle-text h2 {
margin: 0;
color: var(--yellow-secbyte);
font-size: 20px;
font-family: 'Sora', sans-serif;

}

.redes__rectangle-text p {
margin: 0;
color: white;
font-size: 15px;
font-family: 'Onest', sans-serif;
}

@media (max-width: 780px) {

        .row__redes-content {
            flex-direction: column;
            width: 100%;
            height: 500px;/*cantidad de px del padre */
        }
        .redes__square-box {
            order: 1;
            width: 100%;
            /* border-bottom-right-radius: 50%;     */
            overflow: hidden;
            height: 50%;/*porcentaje de la cantidad de px tomados del padre.*/

        }
        .redes__rectangle-box {
            order: 2;
            width: 100%;
            height: 50%;/*porcentaje de la cantidad de px tomados del padre.*/
            padding: 30px;
        }
        .redes__square-box img {
        height: 100%;
        width: 100%;
        border-radius: 10px;
        /* object-fit: contain; esto ajusta la imagen para que cubra todo el contenedor */
        }

        /* .content__redes {
            height: 100%;
        } */
        
        .redes__rectangle-text p {
        color: white;
        font-size: 15px;
        }

        .redes__rectangle-text h2 {
        color: white;
        font-size: 1rem;
        margin-bottom: 5px;
        }   

        .redes__title_box h2 {
            font-size: 25px;
        }
    }