@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Hairline.otf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-HairlineItalic.otf');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Thin.otf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-ThinItalic.otf');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Light.otf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-LightItalic.otf');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Regular.otf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Italic.otf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Medium.otf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-MediumItalic.otf');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Bold.otf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-BoldItalic.otf');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-XBold.otf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-XBoldItalic.otf');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-Black.otf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/aktivgrotesk/AktivGrotesk-BlackItalic.otf');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
	/* Colores Igualdad */
    --marron:#353535;
    --marron-claro:#7d7161;
    --marron-texto:#5d5d5d;
    --gris-titulos: #293435;
    --naranja-claro:#FFAC4A;
    --naranja: #F28D77;
    --gris-oscuro:#353535;

    --size-96:96px;
    --size-64:64px;
    --size-48:48px;
}

.informe_rainbow_ghosting {
    overflow-x: hidden;
}

.cabecera video {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}

.fondo_marron {
    background-color: var(--marron);
    background-image:
        linear-gradient(rgba(53, 53, 53, 0.8), rgba(53, 53, 53, 0.8)),
        url("../images/fondo_rainbow_ghosting.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.cabecera .fondo_morado {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--margin-bloques);
    width: 100%;
    gap: var(--margin-elementos);
}

.cabecera .texto_cabecera h1 {
    font-family: 'Aktiv Grotesk';
    font-weight: 700;
    font-size: var(--size-32);
    line-height: 1.2;
    letter-spacing: 0%;
    color: var(--second-color);
    padding-bottom:var(--margin-elementos);
    text-transform: none;
}

.cabecera .texto_cabecera h1 p {
    line-height: 1.2;
    letter-spacing: 0%;
    font-family: 'Aktiv Grotesk';
    font-weight: 700;
    font-size: var(--size-32);
     line-height: 1.2;
    letter-spacing: 0%;
}


.cabecera .textos_cabecera p {
     font-family: 'Aktiv Grotesk';
    font-weight: 400;
    font-size: var(--size-21);
    line-height: 1.2;
    letter-spacing: 0%;
    color: var(--second-color);
    padding-bottom:var(--padding-interior);
}

.cabecera .textos p {
    font-family: 'Aktiv Grotesk';
    font-weight: 400;
    font-size: var(--size-21);
    leading-trim: NONE;
    line-height: 1.2;
    letter-spacing: 0%;

}

.cabecera .fondo_morado p {
    color: var(--lila, #ECDDED);
    text-align: center;
    font-family: 'Aktiv Grotesk';
    font-size: var(--size-32);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    
}

/* Introduccion */

.titulo_introduccion h2{
    font-family:'Aktiv Grotesk';
    font-weight: 700;
    font-style: italic;
    font-size: var(--line-titulo);
    line-height: 1.2;
    letter-spacing: 0%;
    text-transform: uppercase;
    color:var(--marron-claro);
    margin-bottom:var(--margin-bloques);
    margin-top:var(--margin-bloques);
}



.boton {
    width:100%;
    border-radius: 22px;
    color: var(--second-color);
    font-family: 'Aktiv Grotesk';
    font-size: var(--size-21);
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    padding: 21px 24px;
    text-transform: inherit;
    box-shadow: 0px 0px 10px 0px #353535;
    background-color: #3535354D;;
}

.boton.boton_imagen {
    background-image:
        linear-gradient(#3535354D, #3535354D),
        url("../images/fondo_rainbow_ghosting.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 0px 10px 0px #353535;
    color: var(--second-color);
}

.boton.boton_imagen:hover {
     background-image:
        linear-gradient(#35353599, #35353599),
        url("../images/fondo_rainbow_ghosting.png");
    box-shadow: 0px 0px 10px 0px #353535;
    color: var(--second-color);
}

.boton.morado {
    color: var(--blanco-igualdad);
    background: var(--morado);
}

.boton:hover {
    background: var(--Verde, #6EE091);
    color: var(--morado);
}

.introduccion.fondo_lila {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(2 * var(--margin-bloques));
}


.introduccion .texto p {
    color: var(--second-color);
    font-family: "Aktiv Grotesk";
    font-size: var(--size-21);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.introduccion .logo_introduccion {
    padding: 0;
    margin-bottom: 0;
    margin-top: auto;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    max-width: 336px;
}

.informe_igualdad p strong{
    font-weight: 700;
    font-family: "Aktiv Grotesk";
    line-height: 1.2;
}

.explicacion .texto_inicial h2 {
    font-family: "Aktiv Grotesk";
    font-weight: 700;
    font-style: italic;
    font-size: var(--line-titulo);
    line-height: 1.2;
    letter-spacing: 0%;
    text-transform: uppercase;
    margin-bottom:var(--margin-bloques);
    margin-top:var(--margin-bloques);
    color: var(--gris-titulos);
}

.explicacion .icono {
    width: auto;
    height: 123px;
    margin-bottom:var(--margin-bloques);
    display:flex;
    align-items: center;
    justify-content: center;
}

.explicacion .icono img {
    object-fit: contain;
    width: auto;
    height: 123px;
}

.explicacion .contenido .textos {
    display: flex;
    gap: calc(var(--margin-bloques) * 1.5);

}

.explicacion .contenido .texto_derecha, 
.explicacion .contenido .texto_izquierda,
.explicacion .contenido .texto_central {
    flex: 1;
}

.explicacion .contenido p {
    color: var(--marron-texto, black);
    font-family: 'Aktiv Grotesk';
    font-weight: 400;
    font-size: var(--size-21);
    line-height: 1.2;
    letter-spacing: 0%;
    padding-bottom: var(--margin-elementos);
}

.explicacion .row-texto-final {
    margin-top: var(--margin-bloques);
    margin-bottom: var(--margin-bloques);
}

.explicacion .row-texto-final p{
    color: var(--marron);
    font-family: 'Aktiv Grotesk';
    font-style: italic;
    font-size: var(--size-60);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    padding-bottom:0;
}

.explicacion .row-descarga .boton.lila {
    margin-left: auto !important;
}

.explicacion .row-descarga {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    gap: var(--margin-elementos)
}

.explicacion .row-descarga .texto_descarga {
    margin-right: auto; 
}

.datos.fondo_morado {
    position: relative;
    padding-top: calc(2 * var(--margin-bloques));
    padding-bottom: var(--margin-bloques);
    background: transparent;
    min-height: 760px;
    padding-top: calc(2 * var(--margin-bloques));
    padding-bottom: calc(2 * var(--margin-bloques));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                linear-gradient(0deg, rgba(91, 25, 123, 0.6), rgba(91, 25, 123, 0.6));
    /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                linear-gradient(0deg, rgba(91, 25, 123, 0.6), rgba(91, 25, 123, 0.6));*/
}

.datos .fondo_imagen {
    /* Mantenemos tus degradados */
    
    background-repeat: no-repeat;
    
    /* CAMBIO CLAVE: 'contain' para que la foto no se deforme y 'right' para las cajas */
    background-size: contain;
    background-position: right center;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Cambiado a 100% para que el fondo morado cubra todo y la imagen se apoye a la derecha */
    height: 100%;
    
    /* Esto elimina el blanco de la foto y deja ver el morado de fondo */
    mix-blend-mode: multiply;
}

.datos .fondo_imagen img {
    width: fit-content;
    height: 100%; /* La hacemos más alta como pedías */
    object-fit: contain; /* No se deforma */
    object-position: right center; /* Se pega a la derecha siempre */
    overflow: hidden;
    mix-blend-mode: multiply; 
    position: absolute;
    top: 0; 
    left: 50%;
    transform: translateX(-20%);
}

.row-datos-flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    padding-top:var(--padding-interior);
    padding-bottom:var(--padding-interior);
}

.row-datos-flex::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 100vw;
    height: 100%;
    background-color: var(--naranja);
    z-index: -1;
    pointer-events: none;
}

.titulo_datos h2 {
    font-family: 'Aktiv Grotesk';
    font-weight: 700;
    font-style: italic;
    font-size: var(--size-48);
    line-height: 1.2;
    letter-spacing: 0%;
    color:var(--second-color);
    margin-bottom: var(--padding-interior);
}

.row-datos-flex::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background-color: var(--naranja-claro);
    z-index: -1;
    pointer-events: none;
}

.col-datos-der, .col-datos-izq, .datos .imagen  {
    flex: 1;
}

.col-datos-der {
    
    display: flex;
    justify-content: center;
    flex-direction:column;
}

.col-datos-izq {
    display: flex;
    justify-content: center;
    flex-direction:column;
}

.col-datos-izq .dato-item, .col-datos-izq .titulo_datos {
    padding-right: var(--margin-bloques);
}

.col-datos-der .dato-item {
    padding-left: var(--margin-bloques);
}

.datos .imagen {
    margin-top:calc(-1 * var(--padding-interior));
    margin-bottom:calc(-1 * var(--padding-interior));
}

.datos .imagen img {
    object-fit: cover;
    height: 100%;

}

.col-datos-der .dato-item:last-of-type, 
.col-datos-izq .dato-item:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
}

.col-datos-der .dato-item p {
    text-align: right;
}

.col-datos-izq .dato-item p {
    text-align: left;
}

.datos p {
    color: var(--White, #FFF);
    font-family: 'Aktiv Grotesk';
    font-weight: 400;
    font-size: var(--size-36);
    line-height: 1.2;
    letter-spacing: 0%;
    text-align: right;
}

.datos p strong {
    line-height: 1.2;
}


.texto_llyc {
    padding-top: calc(2 * var(--margin-bloques));
}

.texto_llyc p {
    color: var(--morado);
    text-align: center;
    font-family: 'Aktiv Grotesk';
    font-size: var(--size-32);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}

.section-fixed {
    z-index: 99;
}

.textos_finales .textos {
    display:flex;
    flex-wrap: nowrap;
}

.textos_finales .col_1_2 {
    flex: 1;
}

.textos_finales .textos .texto_izquierda {
    margin-right: var(--margin-bloques);
}

.textos_finales .textos .texto_derecha {
    margin-left: var(--margin-bloques);
}

.textos_finales h3{
    font-family: 'Aktiv Grotesk';
    font-weight: 700;
    font-style: italic;
    font-size: var(--size-21);
    line-height: 1.2;
    letter-spacing: 0%;
    color:var(--marron);
    text-transform: uppercase;
    color:var(--marron-texto);
}

.textos_finales ul {
    padding-left: var(--margin-elementos);
}

.textos_finales p, .textos_finales li {
    font-family: 'Aktiv Grotesk';
    font-weight: 400;
    font-size: var(--size-21);
    line-height: 1.2;
    letter-spacing: 0%;
    color:var(--marron);
    padding-top: var(--margin-elementos);
    color:var(--marron-texto);
}

.textos_finales li  {
    padding-top: 0;
}

.textos_finales .texto_final p {
    font-family: 'Aktiv Grotesk';
    font-weight: 700;
    font-style:italic;
    font-size: var(--size-60);
    line-height: 1.2;
    letter-spacing: 0%;
    margin-bottom:calc(var(--margin-bloques) * 2);
    padding-top:calc(var(--margin-bloques) * 2);
    color:var(--gris-oscuro);
}

.textos_finales {
    margin-bottom:var(--margin-bloques);
    margin-top:var(--margin-bloques);
}

.cabecera.fondo_imagen {
    background-image: url(../images/fondo_rainbow_ghosting.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenido_cabecera.fondo_imagen {
    padding:var(--padding-interior);
    width:100%;
}
    
@media (max-width: 1024px) { 
    .cabecera video {
        width: auto;
        height: 100%;
    }

    .cabecera .gif {
        width: 100%;
        overflow: hidden;
        aspect-ratio: 1.6;
        display: flex;
        justify-content: center;
    }

    .cabecera .gif img, .cabecera .gif video {
        height: 100%;
        width: 100%;
        overflow: hidden;
        object-fit: cover;
    }

    :root {
        --size-96:40px;
        --size-64:36px;
        --size-48:32px;
    }

    .explicacion .icono, .explicacion .icono img {
        width: auto;
        height: 76px; 
    }
}


@media (max-width: 980px) {

    :root {
        --size-96:32px;
        --size-64:36px;
        --size-48:32px;
    }

    .col_1_3.col_1_3_introduccion {
        width: 100% !important;
    }

    .cabecera video {
        width: auto;
        height: 100%;
    }

    .cabecera .gif {
        width: 100%;
        overflow: hidden;
        aspect-ratio: 1.2;
        display: flex;
        justify-content: center;
    }

    .introduccion .logo_introduccion {
        width: 336px;
        margin-left: auto;
        margin-right: auto;
        margin-top: var(--margin-bloques);
    }

    .explicacion .row-descarga .boton.lila {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .explicacion .contenido .textos {
        flex-direction: column;
        gap: var(--margin-elementos);
    }

    .explicacion .container {
        background-position: center;
    }

    .explicacion .row-descarga {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .datos .fondo_imagen img {
        transform: translateX(-50%);
        bottom: 0;
        object-position: bottom center;
    }

    .datos .dato-item {
        padding-bottom: var(--padding-interior);
    }

    .datos .col-datos-der .dato-item:nth-child(odd) p,
    .datos .col-datos-izq .dato-item:nth-child(odd) p{
        text-align: left !important;
    }

    .textos_finales .col_1_2 {
        width: 100% !important;
    }

    .datos .col-datos-izq .dato-item:nth-child(even) p,
    .datos .col-datos-der .dato-item:nth-child(even)  p{
        text-align: right !important;
    }

    .row-datos-flex{
        flex-direction: column;
        gap: var(--margin-bloques);
        padding-top: calc(var(--margin-bloques) * 2);
        padding-bottom: calc(var(--margin-bloques) * 2);
    }

    .explicacion .contenido .texto_derecha, .explicacion .contenido .texto_izquierda, .explicacion .contenido .texto_central {
        width: 100% !important;
    }
    .explicacion .icono {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .explicacion .icono, .explicacion .icono img{
        height: 76px;
    }

    .row-datos-flex::before, .row-datos-flex::after {
        display: none;
    }


    .col-datos-der {
        padding-top: calc(2 * var(--margin-bloques));
    }



    .col-datos-izq, .col-datos-der {
        padding-right: 0;
        padding-left: 0;
        position: relative;
    }

    .col-datos-izq .dato-item, .col-datos-der .dato-item, .col-datos-izq .titulo_datos{
        padding-right: 0;
        padding-left: 0;
    }

    .col-datos-izq:after {
        content: "";
        position: absolute;
        top: calc(-1 * (var(--margin-bloques) * 2));
        right: calc((100vw - 100%) / -2);
        width: 100vw;
        height: calc(100% + (var(--margin-bloques) * 2));
        background-color: var(--naranja);
        z-index: -1;
        pointer-events: none;
    }

    .col-datos-der:after {
        content: "";
        position: absolute;
        top: 0;
        right: calc((100vw - 100%) / -2);
        width: 100vw;
        height: calc(100% + (var(--margin-bloques) * 2));
        background-color: var(--naranja-claro);
        z-index: -1;
        pointer-events: none;
    }

    .datos .col-datos-izq .dato-item:nth-child(even) p, .datos .col-datos-der .dato-item:nth-child(even) p {
        text-align: left !important;
    }
    
    .col-datos-der, .col-datos-izq, .datos .imagen {
        height:auto;
        flex:auto;
    }

    .datos .col-datos-izq .dato-item {
        padding-bottom: calc(2 * var(--margin-bloques));
    }

    .datos p {
        margin-bottom: 0;
    }

    .row-datos-flex {
        gap:0;
        align-items: flex-start;
    }

    .datos .imagen {
        margin-top:0;
        margin-bottom:0;
        width: 100vw;
        margin-left: calc(50% - 50vw);

    }

    .datos .imagen img {
        width: 100%;
        height: 100%;
        overflow: auto;
        aspect-ratio: 191 / 199;
    }

    .textos_finales .textos {
        flex-direction: column;
    }

    .textos_finales .textos .texto_izquierda, .textos_finales .textos .texto_derecha {
            margin-left: 0;
            margin-right: 0;
    }

    .textos_finales .textos .texto_derecha {
        padding-top:var(--padding-interior);
    }

    .boton {
        padding: 10px 24px;
        border-radius: 16px;
    }
}