.h2-t2{
    color: var(--gris5);
    text-transform: uppercase;
    padding: 2rem 0;
}

/* apartado de variantes */
.variantes{
    padding-bottom: 1.5rem;
}
.lista-variantes{
    list-style: none;
}
.lista-variantes li{
    width: 100%;
}
.lista-cont {
    list-style: none;
    counter-reset: listStyle;
    padding: 0 0 2rem 0;
}
.lista-cont li::before{
    margin: 1rem 0 auto 0;
    counter-increment: listStyle;
    content:counter(listStyle) ". ";
    color: var(--gris2);
}
.lista-cont li{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1rem;
}
.lista-cont li:hover {
    background-color: var(--color2);
    border-radius: 4px;
}
.li-t1:hover .a-contenido, .li-t1::before{
    color: var(--blanco);
}
.li-t1:hover::before {
    color: var(--blanco) !important;
}

.border-left{
    /* border-left: solid 5px var(--gris0); */
    /* padding-left: 1.5rem; */
}

.a-variante, .a-contenido{
    font: 1.6rem / 2.4rem var(--fuente);
    color: var(--gris2);
    display: block;
    text-decoration: none;
}
.a-variante{
    padding: 1rem;
    width: 100%;
    position: relative;
    border-radius: 0.4rem;
}
.a-variante:hover{
    background-color: var(--negro);
    color: var(--blanco);
}

/* apartado de contendido */
.a-contenido{
    padding: 1rem 0;
    width: 100%; 
    /* margin-left: 2rem; */
}
.a-contenido:hover .a-contenido::before{
    color: var(--blanco);
    /* text-shadow: .3px .3px 5px rgb(238, 238, 238); */
}
summary{
    color: var(--gris1);
    font-weight: bold;
    padding-bottom: 1.5rem;
    list-style: none;
    font-weight: bold;
    transition: .25s ease-out;
    /* margin-left: 1.5rem; */
    display: flex;
    /* align-items: top; */
    gap: 1rem;
    align-items: flex-start;
}   
summary::before{
    /* content: "";
    border-color: transparent var(--gris1);
    border-style: solid;
    display: block;
    position: relative;
    border-width: 0.35em 0 0.35em 0.45em;
    height: 0;
    width: 0;
    margin: .7rem 0 auto 0; */
    content: '';
    background-image: url('../../img/next.svg');
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 1.6rem;
    min-height: 1.6rem;
    padding-top: .6rem;
    transition: .25s ease-out;
    filter: invert(71%) sepia(4%) saturate(16%) hue-rotate(348deg) brightness(94%) contrast(84%);
}
summary:hover {
    cursor: pointer;
}
details[open] summary{
    color: var(--negro);
    transition: .25s ease;
}
details[open] summary::before{
    border-color: transparent var(--negro);
    transform: rotate(90deg);
    transition: .25s ease-out;
    filter: invert(0%) sepia(54%) saturate(25%) hue-rotate(3deg) brightness(112%) contrast(105%);
}
.header-wrapper{
    padding-bottom: 2rem;
}
.contenido{
    /* display: none; */
}
@media (min-width: 768px){
    .header-wrapper{
        position: relative;
        display:unset;
        /* padding-bottom: 4rem; */
    }
    .contenido{
        display: block;
    }
    .header {
        max-width: 28rem;
        position: sticky;
        top: -320px;
        align-self: flex-start;
    }
}
@media (min-width: 1024px){
    .header {
        top: -324px;
    }
}