@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&display=swap');

:root {
	/* Colores Igualdad */
    --lila: #ECDDED;
    --morado:#5B197B;
    --morado_60: #5B197B99;
    --rojo-igualdad: #FF0013;
    --blanco-igualdad: #FFFFFF;
    --verde:#6EE091;
}

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

.fondo_morado {
    background: var(--Morado, #5B197B);
}

.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 .fondo_morado p {
    color: var(--lila, #ECDDED);
    text-align: center;
    font-family: "Fira Mono";
    font-size: var(--size-32);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    
}

.boton {
    border-radius: 10px;
    color: var(--morado);
    font-family: "Fira Mono";
    font-size: var(--size-21);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: inherit;
}

.boton.lila {
     color: var(--morado);
    background: var(--Morado-claro, #ECDDED);
}

.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(--morado);
    font-family: "Fira Mono";
    font-size: var(--size-21);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

.introduccion .logo_introduccion {
    padding: 0;
    margin-bottom: 0;
    margin-top: auto;
    width: 100%;
}

.informe_igualdad p strong{
    font-weight: 700;
    font-family: "Fira Mono";
}

.explicacion {
    margin-top: 0;
    padding: 0;
}

.explicacion .container {
    padding: var(--margin-bloques);
    background-repeat: no-repeat;
    background-size: cover;
}

.explicacion .contenido {
    border-radius: 20px;
    border: 2px solid #6D7475;
    background: rgba(109, 116, 117, 0.70);
    box-shadow: 0 5px 10.4px 0 rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(16.5px);
    padding: var(--margin-bloques);
}

.explicacion .contenido .textos {
    display: flex;
    gap: var(--margin-elementos);

}

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

.explicacion .contenido p {
    color: var(--second-color, white);
    font-family: "Fira Code";
    font-size: var(--size-24);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: var(--margin-elementos);
}

.explicacion .row-texto-final {
    margin-top: var(--margin-elementos);
    margin-bottom: var(--margin-elementos);
    padding-bottom: var(--margin-elementos);
    border-bottom: 1px solid var(--second-color);
}

.explicacion .row-texto-final p{
    color: var(--second-color, white);
    font-family: "Fira Code";
    font-size: var(--size-40);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.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;
    gap: calc(100% / 12 * 2);
}

.datos .dato-item {
    padding-bottom: calc(100% / 12 * 2);
}

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

.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);
    text-align: right;
    font-family: "Fira Mono";
    font-size: var(--size-40);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

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

.texto_llyc p {
    color: var(--morado);
    text-align: center;
    font-family: "Fira Code";
    font-size: var(--size-36);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

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

    
@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;
    }
}


@media (max-width: 980px) {
    .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: 40%;
        margin-left: auto;
        margin-right: 0;
        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: 0;
    }

    .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(--margin-bloques);
    }

    .datos .col-datos-der .dato-item:nth-child(odd) p,
    .datos .col-datos-izq .dato-item:nth-child(odd) p{
        text-align: left !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);
    }
}