@import url('bloque_capability.css');

.text_content p,
.text_content h3 {
    margin-bottom: var(--margin-elementos-int);
    padding-right: calc(100% / 12);
}

/* video */
/*
.informe2024 .llyc-video::after{
    font-size: calc(var(--size-titulo) * 2);
}*/

/* introduccion */

.informe2024 .destacado h2{
    font-size: var(--size-32);
    font-weight: 600;
}

.informe2024 .introduccion h3{
    font-weight: 600;
}

/* capabilities */

.informe2024 .bloque-capabilities h3{
    font-size: var(--size-24);
}

.informe2024 .bloque-capabilities li{
    justify-content: flex-start;
    width: calc(100% / 4 - var(--margin-elementos-int));
    cursor: pointer;
}
/*
.informe2024 .bloque-capabilities ol {
  counter-reset: item 1; //Empieza en 1, sumamos 1 
}
*/

.informe2024 .bloque-capabilities li::before {
    content: "EP " counter(item, decimal-leading-zero) ". ";
    cursor: pointer;
}

.informe2024 .bloque-capabilities .btn_escuchar{
    margin-top: var(--margin-elementos-int);
    font-family: var(--header-family);
    color: var(--header-color);
    font-size: var(--size-21);
    text-decoration: underline;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.informe2024 .btn_escuchar::before{
    content: url(../images/play_arrow_filled.svg);
    margin-right: var(--margin-elementos-int);
    height: 27px;
    width: 27px;
}
.informe2024 .bloque-capabilities li:hover h3,
.informe2024 .bloque-capabilities li:hover .btn_escuchar{
    color: var(--rojo);
}
.informe2024 .bloque-capabilities li:hover .btn_escuchar::before{
    content: url(../images/play_arrow_filled_rojo.svg);
}


.informe2024 .bloque-capabilities .listado_capabilities:hover::before{
    color: var(--gris-claro);
    cursor: auto;
}


/* oferta */

.informe2024 .oferta h4{
    font-size: var(--size-28);
    text-transform: uppercase;
    font-weight: 600;
    margin: var(--margin-bloques);
    margin-top: calc(var(--margin-bloques) * 2);
}

.informe2024 .oferta .row_grid {
    grid-gap: 0 var(--margin-bloques);
}

.informe2024 .oferta .areas{
    height: 70vh;
    max-height: 600px;
}
.informe2024 .oferta .areas a{
    width: 100%;
    height: 100%;
    background-color: rgb(255,255,255,0.4);
    backdrop-filter: blur(3px);
}
.informe2024 .oferta .areas a:hover{
    background-color: transparent;
    backdrop-filter: blur(0px);
}

@media only screen and (max-width: 1280px) {
    
    .informe2024 .bloque-capabilities li{
        width: calc(100% / 3 - var(--margin-elementos-int));
    }
}


@media only screen and (max-width: 1024px) {
    
    .cta a{
        min-width: 90%;
    }

    .informe2024 .bloque-capabilities li{
        width: calc(100% / 2 - var(--margin-elementos-int));
    }

}


@media only screen and (max-width: 768px) {
    
    .text_content p {
        padding-right: 0;
    }

    .cta a{
        min-width: 100%;
    }

    .informe2024 .introduccion h3{
        font-size: var(--size-28);
    }

    .informe2024 .bloque-capabilities ol{
        flex-direction: row;
    }
    .informe2024 .oferta .areas {
        height: 50vh;
        margin-bottom: var(--padding-interior);
    }

    .informe2024 .bloque-capabilities li.listado_capabilities {
        border-bottom: none;
        border-left: 1px solid var(--color-line);
        padding-left: var(--margin-elementos);
    }
    .informe2024 .bloque-capabilities li::before{
        left: var(--margin-elementos);
    }

}

@media only screen and (max-width: 640px) {
    
    .informe2024 .bloque-capabilities li{
        width: 100%;
    }
    .spotify-popup .spotify-popup-titulo{
        font-size: var(--size-28);
    }

    .informe2024 .bloque-capabilities li.listado_capabilities {
        border-left: none;
        padding-left: 0;
        border-bottom: 1px solid var(--color-line);
    }
    .informe2024 .bloque-capabilities li::before{
        left: 0;
    }
}