#containerPrincipalQuienesomos{
    width: 100%;
}
#contenidointeriorquienessomos{
    width: 90%;
    margin: 0px auto;
}
.informacionprimeraseccionquienessomos{
    width: 60%;
    text-align: center;
    margin: 0px auto;
}
#tituloquienessomos{
    font-weight: 600;
    text-align: center;
    font-style: normal;
    font-size: 45px;
    line-height: normal;
    letter-spacing: 0.18px;
}
#informacionquienessomos{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    width: 80%;
    color: var(--color-textdarkMenu);
    text-align: center;
    margin: 0px auto;
}
#informacionsegundaseccionquienessomos{
    width: 90%;
    margin-top: 3rem !important;
    margin: 0px auto;
    display: flex;
    gap: 2rem;
}
#seccioninformacioncard {
    width: 55%;
    min-height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
    position: relative; /* Necesario para el pseudo-elemento */
    background: var(--color-Body) !important;

    padding: 20px; /* Espaciado interno */
    border-radius: 25px; /* Bordes redondeados */
    z-index: 1; /* Asegura que el contenido quede encima del pseudo-elemento */
    overflow: hidden; /* Asegura que el pseudo-elemento no sobresalga */
}

#seccioninformacioncard::before {
    content: ''; /* Necesario para crear el pseudo-elemennto */
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 25px; /* Bordes redondeados */
    background: linear-gradient(45deg, #9D72A7, #D2916D, #C85572, #7177AB, #7BB2DA, #A8B49F);
    z-index: -1;
    box-sizing: border-box;
    padding: 4px; /* Espaciado interno para crear el borde */
}

#seccioninformacioncard::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 21px; /* Ajustar para que quede dentro del borde degradado */
    background: var(--color-Body) !important;
    z-index: 2;
}
#changepurpletext{
    color: var(--color-strongconfiar);
}
#informacionquienessomoscard {
    text-align: center;
    font-size: 1.2em;
}
#imagenseccionquienessomos{
    width: 28vw;
    color: var(--color-text-blackandwhite);
    min-height: 35vh;
}
#tituloinformacionquienessomoscard{
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    width: 58%;
    margin-top: 0px auto;
    z-index: 4 !important;
    color: var(--color-textoPodcast);
}
#informacionquienessomoscard{
    font-family: Outfit;
    font-size: 18px;
    width: 70%;
    text-align: center;
    margin: 0px auto;
    font-style: normal;
    font-weight: 400;
    z-index: 4 !important;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--color-grisclaroprim);
}
#imagenseccionquienessomos{
    background-image: url(../images/quienes-somos.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 25px;
}
#informacionterceraseccionquienessomos{
    margin-top: 3rem !important;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}
#concermasquienessomos{
    display: flex;
    margin: 0px auto;
    height: 43px;
    width: 10rem;
    padding: 7px 30px;
    border-radius: 25px;
    gap: 10px;
    align-self: stretch;
    margin-bottom: 5rem;
    background-color: var(--color-buttonredprimari);
    color: #fff;
    border: none;
}
#animacionquienessomos{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-textdarkMenu);
    letter-spacing: 0.5px;
}
@media(max-width:1240px){
    #tituloinformacionquienessomoscard{
        width: 80%;
    }
    #informacionquienessomoscard{
        width: 80%;
    }
}
@media(max-width:906px){
    #informacionquienessomos {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        width: 101%;
        text-align: center;
    }
    #tituloinformacionquienessomoscard{
        width:90%;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }
    #informacionquienessomoscard{
        width: 90%;
        margin-top: -1.5rem;
    }
    #informacionsegundaseccionquienessomos {
        width: 100% !important;
        margin-top: 3rem !important;
        margin: 0px auto;
        display: flex;
        gap: 2rem;
    }
    #imagenseccionquienessomos{
        width: 20rem;
        height: 16rem;
    }
    #seccioninformacioncard {
        width: 55%;
        height: 16rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        align-self: stretch;
        position: relative;
        background-color: white;
        padding: 20px;
        border-radius: 25px;
        z-index: 1;
    }
    #tituloquienessomos {
        text-align: center;
        font-style: normal;
        font-size: 40px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.18px;
    }
}
@media(max-width:703px){
    #informacionquienessomos {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        width: 101%;
        text-align: start;
    }
    .informacionprimeraseccionquienessomos {
        width: 100%;
        text-align: center;
        margin: 0px auto;
    }
    #imagenseccionquienessomos{
        width: 15rem;
        height: 19rem;
    }
    #seccioninformacioncard{
        height: 19rem;
    }
}
@media(max-width:601px){
    #informacionquienessomoscard{
        width: 86%;
    }
    #imagenseccionquienessomos{
        margin-left: -1rem;
    }
    #animacionquienessomos{
        width: 84%;
        margin: 0px auto;
        margin-bottom: 1.5rem;
    }

}
@media(max-width:580px){
    #tituloinformacionquienessomoscard{
        width: 94%;
    }
}
@media(max-width:570px){
    #tituloinformacionquienessomoscard{
        width: 98%;
    }
    #informacionquienessomoscard{
        width: 93%;
    }
}
@media(max-width:555px){
    #tituloinformacionquienessomoscard{
        width: 100%;
    }
    #informacionquienessomoscard{
        width: 96%;
    }
}
@media(max-width:555px){
    #tituloinformacionquienessomoscard{
        width: 110%;
    }
    #informacionquienessomoscard{
        width: 99%;
    }
}
@media(max-width:520px){
    #tituloinformacionquienessomoscard{
        width: 120%;
    }
    #informacionquienessomoscard{
        width: 106% !important;
    }
}
@media(max-width:500px){
    #informacionsegundaseccionquienessomos{
        display: flex;
        flex-direction: column;
    }
    #seccioninformacioncard{
        width: 100%;
        height: 16rem;
    }
    #informacionquienessomoscard{
        font-size: 16px;
        width: 95% !important;
    }
    #tituloinformacionquienessomoscard{
        font-size: 22px;
    }
    #imagenseccionquienessomos{
        width: 100%;
        margin-left: 0px;
        margin-top: -1rem;
    }
    #tituloinformacionquienessomoscard{
        width: 80%;
    }
}
@media(max-width:450px){
    #tituloquienessomos{
        font-size: 30px;
    }
    #informacionquienessomoscard{
        width: 100% !important;
    }
    #informacionquienessomos{
        font-size: 16px;
        text-align: center;
        width: 76%;
    }
    #imagenseccionquienessomos{
        height: 267px;
    }
}

@media(max-width:400px){
    #tituloquienessomos{
        font-size: 30px;
    }
    #informacionquienessomoscard{
        width: 100% !important;
    }
    #informacionquienessomos{
        font-size: 16px;
        text-align: center;
        width: 98% !important;
    }
    #imagenseccionquienessomos{
        height: 267px;
    }
}