@charset "utf-8";
/* CSS Document */

#contenedorsuperior {
    margin-bottom: var(--separacionsubsecciones);
    background-image: url("../imagenes/otrosrecursos/recursos-01.png");
    background-position: right top;
    background-size: auto 100% ;
    background-repeat: no-repeat;
    margin-top: var(--rellenovertical);
}
#contenedorsuperior h1 {
    color: var(--ui400);
    font-weight: 500;
    font-size: 1.25rem;
}
#contenedorsuperior p {
    color: var(--id400);
    font-weight: 500;
    font-size: 3.25rem;
    margin-top: 2rem;
    margin-bottom: 0rem;
}
#contenedorsuperior > div {
    padding-top: var(--rellenovertical);
    max-width: 900px;
}


#descripcionpagina {
    margin-bottom: var(--rellenohorizontal);
}
#contenedorrecursos {
    padding-bottom: var(--rellenovertical);
}
#contenedorrecursos > * {
    flex-shrink: 0;
}
.recurso {
    display: flex;
    align-items: flex-start;
    background-color: var(--blanco);    
    padding: var(--rellenovertical) 0px;
}
.recurso:not(:last-of-type) {
    margin-bottom: var(--separacionsubsecciones);
}
.recurso:nth-of-type(2n) {
    flex-direction: row-reverse;
}
.recurso > img {
    width: 33%;
}

.datosrecurso {
    flex-grow: 1;
    padding: 0px var(--rellenovertical);
}
.datosrecurso > * {
    padding-right: var(--separacionsubsecciones);
}
.recurso h2 {
    color: var(--id300);
    font-size: 2.375rem;
    margin: 0px;
    display: flex;
}
.elementos {
    margin-top: var(--separaccionsubsecciones);
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: var(--separacionsecciones);
}


.elementos h2 {
    color: var(--id400);
    margin: 0px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: flex-start;
}
.elementos h2 span{
    flex-grow: 1;
}
.elementos h2 img {
    height: 1em;
    width: auto;
    transform: rotateZ(-45deg);
    transition: transform .2s ease-in 0s;
}
.elementos hr {
    margin-top: .75rem;
}
.elementos h2:hover img{
    transform: rotateZ(0deg);
}
.elementos h2.abierta img {
    transform: rotateZ(45deg);
}
.elementos .parrafoenlace {
    text-align: right;
}
@media (max-width: 950px) {
    #contenedorsuperior {
        background-size: auto 75%;
        padding-top: var(--rellenohorizontal);
        margin-top: var(--rellenohorizontal);
    }
    #contenedorsuperior p {
        font-size: 2.25rem;
    }
}
@media (max-width: 750px) {
    #contenedorsuperior {
    }
    #contenedorsuperior p {
        font-size: 1.5rem;
    }
    
    .datosrecurso > h2 {
        font-size: 2rem;
    }
}
@media (max-width: 650px) {
    #cuerpo .recurso {
        flex-direction: column;
        padding-top: var(--separacionsubsecciones);
    }
    .datosrecurso {
        width: 100%;
    }
    .recurso > img {
        width: 60%;
        align-self: center;
    }
}
@media (max-width: 600px) {
    #contenedorsuperior {
        background-size: auto 50%;
    }
    .datosrecurso {
        padding: var(--separacionsubsecciones) var(--separacionsecciones);
    }
}