:root {
    --font-rubik: 'Rubik', sans-serif;
    --font-roboto: 'Roboto', sans-serif;

    --primary-color: #FF541C;
    --primary-color-dark:#E2410C;
    --primary-color-light: rgba(255, 85, 28, 0.75);
    --light-orange: #FB8B4C;
    --light-green: #ACC394;
    --light-grey: #666666;

    --size-title: clamp(1.75rem, 4vw, 2.25rem);
    --size-subtitle: clamp(1.125rem, 3vw, 1.25rem);
    --size-text: 1rem;
    --size-button-orange: clamp(1rem, 2vw, 1.125rem);
    /* --size-title: 28px;
    --size-subtitle: 18px;
    --size-text: 16px;
    --size-button-orange: 18px; */
}

@media screen and (min-width: 520px) {
    :root {
        /* --size-title: 30px;
        --size-subtitle: 20px;
        --size-text: 16px;
        --size-button-orange: 16px; */
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-rubik);
}

button {
    border: none;
}

.quiz-container {



    & .question-container {
        display: none;
        position: relative;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;


        & .intro {

            & .greenpeace-logo {
                position: absolute;
                z-index: 10;
                padding: 0px;
                margin: clamp(15px, 5vw, 20px);
                right: 0;
                width: clamp(131px, 15vw, 190px);

            }
            
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 70%; /* Altura del degradado hasta el 30% del contenedor */
                background: none;
                z-index: 2; /* Asegurarse que está sobre el fondo pero debajo de otros contenidos */
            }


            & .cont-info-intro {
                padding: 58px 20px 0 20px;

                & .title {
                    position: relative;
                    z-index: 3;
                    padding-bottom: 20px;
                    min-width: 270px;
                    max-width: 50vw;
    
                    & p {
                        font-size: var(--size-title);
                        background-color: var(--primary-color-light);
                        color: #fff;
                        text-transform: uppercase;
                        font-weight: 500;
                        display: inline;
                        padding-inline: 5px;

                    }
                }
    
                & .subtitle {
                    position: relative;
                    z-index: 3;
                    min-width: 270px;
                    max-width: 50vw;

                    & p {
                        font-size: var(--size-subtitle);
                        font-family: var(--font-roboto);
                        color: #fff;
                        font-weight: 600;
                        display: inline;
                    }
                }
    
                & .text {
                    position: relative;
                    padding-bottom: 60px;

                    & p {
                        font-size: var(--size-text);
                        font-family: var(--font-roboto);
                        font-weight: 400;
                        display: inline;  
                    }
                }


            }

            & .img-questions-intro-ppal,
            & .img-questions-intro {
                position: absolute;
                height: 100vh;
                width: 100%;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                overflow: hidden;
                & video{
                    height: 100vh;
                    width: 100%;
                    object-fit: cover;
                    position:relative;
                    right:0px;
                }
                & .flare1{
                    height: 100vh;
                    width: 100%;
                    object-fit: cover;
                    position:absolute;
                    left:-100px;
                    top:-100px;
                    display:none;
                    transform-origin: top left;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: top left;
                    background-position-x: -100px;
                    background-position-y: -100px;
                    mix-blend-mode: hard-light;
                    animation: rotateAndFade 10s linear infinite;
                }
                & .flare2{
                    height: 100vh;
                    width: 110%;
                    object-fit: cover;
                    position:relative;
                    left:-3rem;
                    top:-2rem;
                    transform-origin: top left;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: top left;
                    background-position-x: -100px;
                    background-position-y: -100px;
                    mix-blend-mode:plus-lighter;
                    animation: scaleAndFade 5s ease-in-out infinite;
                }
            }

            & .video-container {
                position: absolute;
                height: 100vh;
                width: 100%;
                z-index: 10;
             
            }

            & .cont-swipe-img {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                animation: swipe 8s ease infinite;
                height: 100vh;
                top: 30vh;
                & p{
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    letter-spacing: 0.429px;
                    text-shadow: rgba(255, 255, 255, .5) 0px 0px 20px;
                }
            }
        }

        & .question {
            & .img-questions {
                height: 51vh;
                width: 100%;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
            }

            & .cont-text-btns {
                display: flex;
                flex-direction: column;
                gap: 10px;
                height: 100%;
                justify-content: center;

                & .text {
                    font-size: var(--size-subtitle);
                    padding: 20px 20px;
                    font-weight: 500;
                    font-family: var(--font-roboto);
                }

                & .answers.type1 {
                    display: flex;
                    gap: 60px;
                    justify-content: center;
    
                    & .btn-no,
                    & .btn-si {
                        border-radius: 50%;
                        border: none;
                        width: 55px;
                        height: 55px;
                        color: #fff;
                        font-size: 20px;
                        font-family: var(--font-roboto);
                        transition: all 0.2s ease-in-out;
                    }

                    & .btn-no {
                        background-color: var(--light-orange);
                    }

                    & .btn-si {
                        background-color: var(--light-green);
                    }

                    & .btn-no[data-selected="true"],
                    & .btn-no:hover {
                        box-shadow: 0px 0px 0px 7px #D2540D30, 2px 2px 3px 0px rgba(88, 47, 24, 0.45) inset;
                    }
                    
                    & .btn-si[data-selected="true"],
                    & .btn-si:hover {
                        box-shadow: 0px 0px 0px 7px #2F721F30, 2px 2px 3px 0px rgba(26, 61, 29, 0.45) inset;
                    }
                }

                & .answers.type2 {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                    padding-inline: 20px;
                    margin-bottom: 100px;

                    & .cont-radio-btn {
                        display: flex;
                        gap: 16px;
                        align-items: baseline;
                        font-family: var(--font-roboto);
                        font-size: var(--size-text);

                        & input,
                        & label {
                            cursor: pointer;
                            width: 80%;
                        }
                    }
                }

                & .options {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    padding-inline: 20px;
                    margin-bottom: 20px;

                    & div {
                        display: flex;
                        gap: 16px;
                        align-items: baseline;

                        & input {
                            cursor: pointer;
                        }

                        & label {
                            font-family: var(--font-roboto);
                            font-size: var(--size-text);
                            cursor: pointer;
                        }
                    }
                }

                & .btn-continue-naranja {
                    background-color: var(--primary-color);
                    color: white;
                    text-transform: uppercase;
                    padding: 14px 16px;
                    font-size: var(--size-button-orange);
                    font-weight: 600;
                    border: none;
                    cursor: pointer;
                    transition: all 0.2s ease-in-out;
                    width: 100%;
                    margin-bottom: 100px;

                }
                & .btn-continue-naranja:hover {
                    background-color: var(--primary-color-dark);
                }
                & .btn-continue-naranja:disabled {
                    opacity: 0.4;
                    cursor: not-allowed;
                }
            }
        }
    }

    & .cont-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;

        & .navigation-buttons {
            text-align: center;
            margin-top: 20px;

            & .cont-btn-next-prev {
                display: flex;
                justify-content: space-between;
                margin: 0 20px 20px 20px;
                align-items: center;

                button {
                    cursor: pointer;
                    background: none;
                    border: none;
                }

                button:disabled {
                    opacity: 0.4;
                    cursor: not-allowed;
                }

                & .prev-btn,
                & .next-btn {

                    & img {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 60px;
                    }
                }

                & p {
                    font-family: var(--font-roboto);
                    font-weight: 700;
                    font-size: var(--size-text);
                    color: var(--light-grey);
                    width: max-content;
                }
            }

            & .continue-btn {
                background-color: var(--primary-color);
                color: white;
                width: 100%;
                margin: 0;
                font-size: var(--size-button-orange);
                text-transform: uppercase;
                padding: 14px 20px;
                font-weight: 600;
                transition: background-color 0.4s ease-in-out;
            }
            & .continue-btn:hover {
                transition: background-color 0.4s ease-in-out;
                background-color: var(--primary-color-dark);
            }
        }
    }
}

.result-container {
    margin-top: 40px;

    & .greenpeace-logo {
        position: absolute;
        z-index: 10;
        padding: 0px;
        margin: 0px 20px;
        right: 0;
        top: 20px;
        width: clamp(131px, 15vw, 140px);

    }

    & .sub-cont-results {
    
        & .cont-info-results {
            margin-inline: 20px;
            margin-bottom: 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
    
            & .result-title {
                color: #fff;
                text-transform: uppercase;
                font-size: var(--size-title);
        
        
                & h2 {
                    background-color: hwb(0 0% 100% / 0.75);
                    display: inline;
                    font-weight: 500;
                    font-size: var(--size-title);
                }
            }
        
            & .result-image {
                width: 100%;
            }
        }

        & .cont-recommendations {
            margin-inline: 20px;
            margin-bottom: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;

            & p {
                font-size: var(--size-subtitle);
                padding-bottom: 20px;
                font-weight: 500;
            }
    
            & ul {
                list-style: none; /* Elimina el bullet point por defecto */
                padding-left: 0; /* Opcional: Elimina el padding izquierdo por defecto */
                display: flex;
                flex-direction: column;
                gap: 16px;
                font-size: var(--size-text);
                
                & li {
                    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="5" fill="%23FF541C"/></svg>');
                    background-repeat: no-repeat;
                    background-position: 0 0.5em; /* Ajusta la posición del bullet point */
                    padding-left: 1.2em; /* Añade espacio para el bullet point */
                }
            }
        }
    
        & .cont-comparte {
            display: flex;
            flex-direction: column;
            gap: 28px;
            border-top: 1px solid #DDDDDE;
            text-align: center;
            padding-block: 20px;
    
            & .cont-texto-logos {
                display: flex;
                flex-direction: column;
                gap: 16px;
    
                & p {
                    margin-inline: 20px;
                    color: #333;
                    font-size: var(--size-text);
                }
        
                & .cont-redes {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 32px;
                }
            }           
        }

        & .cont-descarga {

            border-top: 1px solid #DDDDDE;

            & p {
                color: #333;
                padding: 20px;
                font-size: var(--size-text);
            }

            & .btn-descarga {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--primary-color);
                color: white;
                text-decoration: none;
                padding: 14px 20px;
                font-size: var(--size-button-orange);
                text-transform: uppercase;
                font-weight: 600;
                position: fixed;
                bottom: 0;
                width: 100%;
                z-index: 1;
            }

            & .cont-img-descarga {
                display: flex;
                align-items: center;
                justify-content: center;
                animation: upSlide 1000ms forwards;
                & .img-guia-descarga {
                    width: 60vw;
                    transform: rotateZ(20deg);
                }
            }
        }
    }
}

.progress-bar {
    width: 100%;
    background-color: #f3f3f3;
    position: fixed;
    bottom: 0;
    left: 0;

    & .progress {
        height: 5px;
        width: 0;
        background-color: var(--primary-color);
        transition: width 0.3s ease;
    }
}

@media screen and (min-width: 900px) {
    .quiz-container {
        & .quiz-sub-container {
            display: flex;
            flex-direction: column;
        }

        & .question-container {
            & .intro {
                & .cont-info-intro {
                    & .cont-navigation {
                        display: flex;
                    }
                }
            }

            & .intro,
            & .question {
                display: grid;
                grid-template-columns: 3fr 2fr;

                & .greenpeace-logo {
                    left: 0;
                    padding: 0px;
                    margin: 40px;
                    &.logo-negro{
                        display:block;
                    }
                    &.logo-blanco{
                            display:none;
                    }
                }

                & .cont-info-intro {

                    & .title {
                        padding-bottom: 0;
                        min-width: unset;
                        max-width: unset;
                    }

                    & .subtitle {
                        
                        
                        & p {
                            color: #000;
                        }
                    }
                            
                    & .text {
                        top: initial;
                        padding-bottom: 0;
                    }

                    & .text.text-intro-ppal {
                        top: initial;
                    }

                    & .text.text-introbloque {
                        padding-top: 0;
                    }     

                    & .cont-navigation {
                        & .navigation-buttons {
                            margin-top: 0;
                        }
                    }
                }

                & .cont-info-question {
                    & .cont-text-btns {
                        & .answers.type2 {
                            margin-bottom: 0;
                        }

                        & .options {
                            
                        }

                        & .btn-continue-naranja {
                            background-color: var(--primary-color);
                            color: white;
                            text-transform: uppercase;
                            font-size: var(--size-button-orange);
                            font-weight: 600;
                            border: none;
                            cursor: pointer;
                            transition: all 0.2s ease-in-out;
                            width: fit-content;
                            margin-bottom: 0px;
                            margin-inline: 20px;
                            transition: background-color 0.4s ease-in-out;
                        }
                        
                        & .btn-continue-naranja:hover {
                            transition: background-color 0.4s ease-in-out;
                            background-color: var(--primary-color-dark);
                        }
                    }
                }

                & .cont-info-intro,
                & .cont-info-question {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 32px;
                    padding: 0 4vw;

                    & .cont-navigation {
                        background-image: none;
                    }

                    .progress-bar {
                        width: 100%;
                        background-color: #f3f3f3;
                        position: static;
                        bottom: initial;
                        left: initial;
                        padding-bottom: 20px;
                    }
                }

                & .title {
                    position: relative;
                    z-index: 1;
                    padding-top: 0;
                    padding-inline: 0;

                    & p {
                        background-color: var(--primary-color-light);
                        color: #fff;
                        text-transform: uppercase;
                        display: inline;
                    }
                }

                & .subtitle {
                    position: relative;
                    z-index: 1;
                    padding-inline: 0;

                    & p {
                        font-family: var(--font-roboto);
                        color: #fff;
                        font-weight: 600;
                        display: inline;
                    }
                }

                & .text {
                    position: relative;
                    top: initial;
                    padding-inline: 0;
                    padding-bottom: 0;
                    font-family: var(--font-roboto);

                    & p {
                        font-family: var(--font-roboto);
                        display: inline;  
                    }
                }

                & .continue-btn-desktop {
                    background-color: var(--primary-color);
                    color: white;
                    text-transform: uppercase;
                    margin: 0;
                    border: none;
                }

                & .img-questions-intro-ppal,
                & .img-questions-intro,
                & .img-questions {
                    position: initial;
                    height: 100vh;
                    width: 100%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: right;
                }

                & .cont-swipe-img {
                    display: none !important;
                }
            }
        }
    }

    & .cont-navigation {
        position: initial !important;
        width: 100%;

        & .navigation-buttons {
            text-align: center;
            margin-top: 20px;

            & .cont-btn-next-prev {
                display: flex;
                justify-content: space-between;
                margin: 0 20px 20px 20px;


            }
        }

        .navigation-buttons button {
            margin: 0 10px;
            cursor: pointer;
            background: none;
            border: none;
            font-weight: bold;
        }

        .navigation-buttons button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    .result-container {
        margin: 48px 0 170px 0;

        & .greenpeace-logo {
            left: 0;
            top: 20px;
            margin: 20px 40px;

        }

        & .sub-cont-results {
            display: flex;
            flex-direction: column;
            align-items: center;

            & .cont-info-results {
                margin: 0;
                margin-bottom: 28px;
                max-width: 600px;

                & .result-title {
                    text-align: center;
                }

                & .result-image {
                    width: 290px;
                    margin: 0 auto;
                }
            }

            & .cont-recommendations {
                max-width: 600px;

                & p {
                    text-align: center;
                    font-size: var(--size-subtitle);
                }
            }

            & .cont-comparte {
                width: 600px;

                & .cont-texto-logos {
                    & p {
                        margin: 0;
                    }
                }
            }

            & .cont-descarga {
                display: flex;
                gap: 20px;
                background-color: #fff;
                box-shadow: -3px -3px 3px 0px rgba(0, 0, 0, 0.10);
                padding: 30px 40px;
                position: fixed;
                bottom: 0;

                & .cont-btn-descarga {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & .btn-descarga {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: var(--primary-color);
                        color: white;
                        text-decoration: none;
                        padding: 14px 20px;
                        text-transform: uppercase;
                        position: static;
                        width: max-content;
                    }
                }

                & .cont-img-descarga {
                    position: relative;
                    width: 350px;

                    & .img-guia-descarga {
                        max-width: 16vw;
                        transform: rotateZ(20deg);
                        position: absolute;
                        bottom: 0;
                        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.45));
                    }
                }
            }
        }
    }
}

@keyframes scaleAndFade {
    0% {
        transform:scale(1.2) rotate(0deg);
        opacity: 0.1;
        filter: brightness(0.5);
    }
    50% {
        transform:scale(1.2) rotate(-2deg);
        opacity: 0.6;
        filter: brightness(1);
    }
    65% {
        transform:scale(1.4) rotate(-3deg);
        opacity: 1;
        filter: brightness(0.9);
    }
    100% {
        transform:scale(1.2) rotate(0deg);
        opacity: 0.1;
        filter: brightness(0.5);
    }
}

@keyframes rotateAndFade {
    0% {
        transform: rotate(0deg);
        transform:scale(0.7);
        opacity: 0;
        filter: brightness(1);
    }
    35% {
        transform: rotate(8.5deg);
        transform:scale(0.8);
        opacity: 0.4;
        filter: brightness(0.9);
    }
    50% {
        transform: rotate(10deg);
        transform:scale(1);
        opacity: 1;
        filter: brightness(0.8);
    }
    65% {
        transform: rotate(8.5deg);
        transform:scale(0.8);
        opacity: 0.4;
        filter: brightness(0.9);
    }
    100% {
        transform: rotate(0deg);
        transform:scale(0.7);
        opacity: 0;
        filter: brightness(1);
    }
}


@keyframes swipe {
    0% {
        transform: translateY(-70px);
        opacity: 0;
    }
    20% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(25px);
        opacity: 0;
    }
    100% {
        transform: translateY(-70px);
        opacity: 0;
    }
}

/* Estilo contenedor para alinear verticalmente los elementos */
.cont-radio-btn {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Ocultar los botones de radio originales */
.cont-radio-btn input[type="radio"] {
    display: none;
}

/* Estilos para las etiquetas que contienen los botones de radio personalizados */
.cont-radio-btn label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: var(--size-text);
    user-select: none;
}

/* Estilos para el círculo externo del botón de radio */
.cont-radio-btn label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #ACC394;
    border-radius: 50%;
    /* background-color: #fff; */
    transition: background-color 0.3s, border-color 0.3s;
    box-sizing: border-box;
}

/* Estilos para el círculo externo cuando el botón de radio está seleccionado */
.cont-radio-btn input[type="radio"]:checked + label::before,
.cont-radio-btn input[type="radio"]:hover + label::before {
    background-color: #2ab20b25;
}

/* Estilos para el círculo interno del botón de radio */
.cont-radio-btn label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ACC394;
    transition: transform 0.3s;
    box-sizing: border-box;
}

/* Estilos para el círculo interno cuando el botón de radio está seleccionado */
.cont-radio-btn input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1);
}



/* Estilo contenedor para alinear verticalmente los elementos */
.options div {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}

/* Ocultar los checkboxes originales */
.options input[type="checkbox"] {
    display: none;
}

/* Estilos para las etiquetas que contienen los checkboxes personalizados */
.options label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: var(--size-text);
    user-select: none;
}

/* Estilos para el cuadrado externo del checkbox */
.options label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #999999;
    /* background-color: #fff; */
    transition: background-color 0.3s, border-color 0.3s;
    box-sizing: border-box;
}

/* Estilos para el cuadrado externo cuando el checkbox está seleccionado */
.options input[type="checkbox"]:hover + label::before {
    background-color: #ACC39425;
    border-color: #ACC394;
}

.options input[type="checkbox"]:checked + label::before {
    background-color: #ACC394;
    border-color: #ACC394;
}

/* Estilos para la marca de verificación del checkbox */
.options label::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 48%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s;
    box-sizing: border-box;
}

/* Estilos para la marca de verificación cuando el checkbox está seleccionado */
.options input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

/* COOKIE BANNER */

.modal {
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: var(--font-roboto);
}
.modal h2{
    font-family: var(--font-roboto);
    color:white;
    font-size: 23px;
}
.modal-visible-overflow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    z-index: 300;
}

.modal-inside {
    z-index: 105;
    background-color: #B4B05F;
    width: 80%;
    text-align: left;
    padding: 2rem;
    box-shadow: 3px 3px 3px 0px rgba(26, 61, 29, 0.40);
    margin-left: 50px;
}

.modal-inside a {
    color: var(--links-color);
    font-weight: 700;
    text-decoration: underline;
}

.modal-inside label {
    color: var(--links-color);
    font-weight: 700;
    margin-top:10px;
}

.popup-yes:focus{
    outline: none;
    border:none;
    }
.modal-inside p {
    margin:10px 0;
    color:#333;
    font-weight: 400;
    line-height: normal;
}

.modal-inside form p {
    margin:3px 1.1rem;
    color:#333;
    font-weight: 400;
    line-height: normal;
}

.modal-inside label {
    font-weight: var(--bold-font-weight);
}

.modal-bt-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.modal-bt-row button {
    color: #5E6F3B;
    font-weight: 700;
    font-family: var(--headers-font);
    font-size: 1.05rem;
    cursor: pointer;
    padding:.75em;

}

.modal-bt-row button.popup-yes{
    margin-top:1rem;
    text-transform: uppercase;
}

.modal-bt-row button popup-yes:hover{
    background-color: #5E6F3B;
    color: #fff;
    display:block;

}

.modal-bt-row .popup-no {
    color: var(--light-text-color);
    font-weight: 400;
    font-size: 1rem;
    margin:1rem 0;
    color:white;
    margin-left:0.5rem;
    text-transform: uppercase;
    background-color: #FFFFFF33;
}

.modal-bt-row .popup-no:hover {
    color: var(--text-color);
}

@media (min-width: 480px) {
    .modal-inside {
        max-width: 450px;
    }
    .greenpeace-logo .logo-negro{
        display:block;
}
    .greenpeace-logo .logo-blanco{
            display:none;
    }
}
@media (max-width: 480px) {
    .cont-info-question {
        padding: 10px 5px;
    }
 
    .greenpeace-logo .logo-negro{
            display:none;
    }
    .greenpeace-logo .logo-blanco{
            display:block;
    }
    .result-container {
        & .sub-cont-results {
            padding-top: 25px;
            & .cont-descarga {
                & .cont-img-descarga {
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    overflow: hidden;
                }
            }
        }
    }
    .cont-info-intro{
        & .text.text-introbloque {
            top: calc(100vh - 135px);
        }

        & .text.text-intro-ppal {
            top: calc(100vh - 160px);
        }

    }
    .intro::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 70%;  
        background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%) !important;
        z-index: 2;  
    }
}


/* ESTILOS PARA LA ANIMACIÓN INTRO BLOQUES */

.cont-info-intro {
    position: absolute;
    inset: 0;
}

.mask {
    max-width: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: absolute;
    z-index: -1;
    inset: 0;
}

.mask-container {
    position: relative;
    }

.color-image {
    background-size: cover;
    background-position: center;
    height: 100vh;
    -webkit-mask-size: cover;
    -webkit-mask-position: 0% 0%;
    mask-size: cover;
    mask-position: 0% 0%;
    transition: -webkit-mask-position;
}

.mask-animation {
    animation: 
    addColor 1800ms steps(24) forwards;
}

@keyframes upSlide {
    0% {
        top:170px;
    }
    100% {
        top:0px;
    }
}

@keyframes addColor {
    0% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    }
    100% {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
    }
}

@media screen and (min-width: 900px) {

    .cont-info-intro {
        position: initial;
    }

    .mask {
        max-width: 100%;
        display: block;
        height: 100vh;
        background-size: cover;
        background-position: right;
        height: 100vh;
        position: initial;
        z-index: 0;
        inset: 0;
    }

    .mask-container {
        position: relative;
        height: 100vh;
    }

    .color-image {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: right;
        height: 100vh;
        -webkit-mask-size: cover;
        -webkit-mask-position: 0% 0%;
        mask-size: cover;
        mask-position: 0% 0%;
        transition: -webkit-mask-position;
    }
}