/* Estilos generales */
.containerPodcasQuienessomos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
    width: 80%;
    flex-wrap: wrap; 
    gap: 8rem;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

#botonescarruseldonstivodonaciones {
    justify-content: center;
    align-items: center;
}

.informationQuienesSomosPodcas {
    width: 40%;
    margin-right: 20px; 
    color: var(--color-text-blackandwhite);
}
#titlequienessomosdonar{
    font-size: 45px;
    font-weight: 700;
}

#contenidoinformacionquienessomosdonar{
    font-size: 18px !important;
    width: 30rem;

}

.cardPodcasQuienessomos {
    position: relative;
    /*width: 40%;*/
    text-align: center;
    display: flex;
    height: 349px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-text-blackandwhite);
    border-radius: 20px;
    overflow: hidden; /* Para que el pseudo-elemento no sobresalga */
}



.cardPodcasQuienessomos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px; /* Esquinas redondeadas */
    background: linear-gradient(45deg, #9D72A7, #D2916D, #C85572, #7177AB, #7BB2DA, #A8B49F); /* Degradado */
    z-index: -1;
    padding: 4px; /* Tamaño del borde degradado */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.titlecardPodcasQuienessomos {
    width: 80%;
    color: var(--color-textoPodcast);
    font-size: 36px;
    font-weight: 700;
}

.informacioncardPodcasQuienessomos {
    width: 65%;
    font-size: 18px;
}

@media(max-width:1241px){
    .containerPodcasQuienessomos {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        width: 100%;
        gap: 3rem;
        flex-wrap: wrap;
        margin-top: 5rem;
        margin-bottom: 2rem;
    }
    .cardPodcasQuienessomos {
        position: relative;
        width: 31%;
        text-align: center;
        display: flex;
        height: 349px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--color-text-blackandwhite);
        border-radius: 20px;
        overflow: hidden;
    }
    .titlecardPodcasQuienessomos {
        width: 74%;
        color: var(--color-textoPodcast);
        font-size: 36px;
        font-weight: 700;
    }
    .informacioncardPodcasQuienessomos {
        width: 89%;
        font-size: 18px;
    }
}

@media(max-width:906px){
    .containerPodcasQuienessomos {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 5rem;
        margin-bottom: 2rem;
        gap: 0rem;
    }
    #contenidoinformacionquienessomosdonar {
        font-size: 18px !important;
        width: 21rem;
    }
    .cardPodcasQuienessomos {
        position: relative;
        width: 42%;
        text-align: center;
        display: flex;
        height: 349px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--color-text-blackandwhite);
        border-radius: 20px;
        overflow: hidden;
    }
   
}

  


@media(max-width:602px){
    .containerPodcasQuienessomos {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 5rem;
        margin-bottom: 2rem;
        margin-left:0rem !important;
}
.titlecardPodcasQuienessomos {
    width: 74%;
    color: var(--color-textoPodcast);
    font-size: 28px;
    font-weight: 700;
}
.informationQuienesSomosPodcas {
    width: 38%;
    margin-right: 20px;
    color: var(--color-text-blackandwhite);
}
.cardPodcasQuienessomos {
    position: relative;
    width: 44%;
    text-align: center;
    display: flex;
    height: 349px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-text-blackandwhite);
    border-radius: 20px;
    overflow: hidden;
}
#titlequienessomosdonar {
    font-size: 36px;
    font-weight: 700;
}
#contenidoinformacionquienessomosdonar {
    font-size: 18px !important;
    width: 15rem;
}
#botonescarruseldonstivodonaciones {
    margin-bottom: 2rem;
    margin-top: 2rem !important;
}
}



@media (max-width: 500px) {
    .containerPodcasQuienessomos{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .cardPodcasQuienessomos {
        width: 86%;
    }
    #informationQuienesSomosPodcas{
        font-size: 32px !important;
      }
      #contenidoinformacionquienessomosdonar {
        font-size: 16px !important;
    }
    .informationQuienesSomosPodcas p, .cardPodcasQuienessomos p {
        font-size: 1em;
        text-align: justify;
    }
    #titlequienessomosdonar{
        font-size: 32px;
        font-weight: 700;
    }
    .titlecardPodcasQuienessomos{
        font-size: 28px !important; 
    }
    .informationQuienesSomosPodcas {
        width: 82%;
        margin-right: 20px;
        color: var(--color-text-blackandwhite);
    }
    #btn-gray, #btn-yellow {
        width: 60%;
        text-align: center;
        margin-bottom: 5px;
    }
}

@media(max-width:380px){
    #btn-gray, #btn-yellow {
        width: 60%;
        text-align: center;
        margin-bottom: 5px;
    }
    #btn-gray, #btn-yellow {
        width: 60% !important;
        text-align: center;
        margin-bottom: 5px;
    }
    #btn-gray, #btn-yellow {
        width: 80% !important;
        text-align: center;
        margin-bottom: 5px;
    }
    #botonescarruseldonstivodonaciones {

        margin-top: 2rem !important;
    }
    #titlequienessomosdonar {
        font-size: 32px;
        font-weight: 700;
        margin-left: 2vh;
        width: 100%;
        text-align: center;
    }
}

@media(max-width:435px){
    #botonescarruseldonstivodonaciones {

        margin-bottom: 2rem;
        margin-top: 2rem !important;
    }
}