/*Geral*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
.header{
    display: flex;
    justify-content: center;
    padding-top: 5vh;
}
.logo_topo{
    width: 120px;
    flex-shrink: 0;
    padding: 24px;
}
.container_geral{
    min-height: 100vh;

}
    .c_conteudo{
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .conteudo{
            width: 800px;
            padding: var(--Extra-large, 48px);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--Large, 24px);
            
            border-radius: var(--Large, 24px);
            border: 1px solid var(--Branco, #FFF);
            background: rgba(72, 72, 72, 0.64);

            backdrop-filter: blur(12px);

            transition: opacity 0.5s ease;
            
            margin-bottom: 10vh;
        }  

.a_btn{
    color: inherit; /* Herda a cor do texto do elemento pai, removendo o azul padrão */
    text-decoration: none; /* Remove o sublinhado padrão */
    background-color: transparent; /* Garante que o fundo seja transparente */
    font: inherit; /* Herda a fonte do elemento pai */
    cursor: pointer; /* Mantém o cursor como pointer para indicar que é clicável */
    outline: none; 
}

.c_txt_domine_suas_milhas{
    display: flex;
    justify-content: center;
    padding: 2vh 0vh;
}
    .txt_domine_suas_milhas{
        color: #FFF;
        font-family: Poppins;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

@media screen and (max-width: 768px) {
    .container_geral{
        max-height: none;
        padding-top: 20px;
    }
        .header {
            display: flex;
            justify-content: center;
        }
        .c_conteudo {
            height: auto;
            padding-bottom: 30px;
        }
            .conteudo {
                width: 70vw;
            }
}


/*Home*/
.home{
    background: url("background-home.jpg"), lightgray 50% / cover no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
}
    .l1_conteudo_home{
        display: flex;
        align-items: center;
        gap: 8px;
    }
        .titulo_home{
            color: #FFF;
            /* Text/h5 */
            font-family: Poppins;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
        .subtitulo_home{ 
            color: #FFF;

            /* Text/paragraph-large */
            font-family: Poppins;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
        .txt_home{
            align-self: stretch;
            color: var(--Branco, #FFF);
            /* Text/paragraph */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            padding-top: 24px;
        }
            .img_txt_home{
                vertical-align: middle;
            }
        .txt_home_destacado{
            color: var(--Amarelo, #E2C447);
            /* Text/paragraph */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
        .c_btn_comecar_home{
            display: flex;
            justify-content: center;
            padding-top: 30px;
        }
            .btn_comecar_home{
                display: flex;
                padding: var(--Medium, 16px) var(--Large, 24px);
                justify-content: center;
                align-items: center;
                gap: var(--Medium, 16px);

                border-radius: var(--Radius, 1000px);
                background: var(--Azul, #47AAE2);

                color: var(--Branco, #FFF);

                font-family: Poppins;
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;

                border: none;
                cursor: pointer;
            }
            .btn_comecar_home:hover{
                scale: 105%;
            }



/*Responder*/
.responder{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("background-responder.jpg"), radial-gradient(38.62% 36.18% at 9.03% 55.37%, rgba(71, 170, 226, 0.20) 0%, rgba(71, 170, 226, 0.00) 100%), radial-gradient(41.73% 37.37% at 88.58% 78.61%, rgba(226, 196, 71, 0.08) 0%, rgba(226, 196, 71, 0.00) 100%), linear-gradient(117deg, #161B20 0%, #1E242B 100%);
    background-size: cover;
    background-repeat: no-repeat;
}   
    .c_aba_progresso{
        display: flex;
        justify-content: center;
        padding: 24px 0px;
    }
        .aba_progresso{
            width: 400px;
            background-color: #245571; /* Azul escuro */
            height: 8px;
            border-radius: 32px;
        }
            .progresso{
                background-color: #47AAE2; /* Azul claro */
                height: 100%;
                transition: width 0.4s ease-in-out;
                border-radius: 32px;
            }
    
    .n_pergunta{
        color: var(--Branco, #FFF);
        /* Text/paragraph */
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
        .pergunta{
            color: var(--Branco, #FFF);
            /* Text/Paragraph-bold */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
            .destaque_pergunta{
                color: var(--Amarelo, #E2C447);
                /* Text/Paragraph-bold */
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }

    .alternativas{
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px 0px;
    }
        .alternativa{
            display: flex;
            align-items: center;
            gap: var(--Small, 8px);
            cursor: pointer;
        }  
            .icon_alternativa{
                display: flex;
                width: 20px;
                height: 20px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: var(--Radius, 1000px);
                border: 1px solid var(--Branco, #FFF);
            }
            .hover-icon_alternativa{
                display: none;
            }
            .icon_alternativa_selecionado{
                border-radius: var(--Radius, 1000px);
                border: 1px solid var(--Amarelo, #E2C447);
            }
            .c_txt_alternativa{
                display: flex;
                width: 320px;
                padding: var(--Medium, 16px);
                align-items: center;
                gap: 10px;

                border-radius: var(--Medium, 16px);
                border: 1px solid var(--Branco, #FFF);
                background: linear-gradient(97deg, rgba(22, 27, 32, 0.30) 0.01%, rgba(46, 55, 65, 0.30) 100.01%);
            }
            .c_txt_alternativa_selecionado{
                border-radius: var(--Medium, 16px);
                border: 1px solid var(--Amarelo, #E2C447);
                background: linear-gradient(97deg, rgba(22, 27, 32, 0.30) 0.01%, rgba(46, 55, 65, 0.30) 100.01%);
            }
                .txt_alternativa{
                    color: var(--Branco, #FFF);
                    font-family: Poppins;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }
                .txt_alternativa_selecionado{
                    color: var(--Amarelo, #E2C447);
                    font-family: Poppins;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }
        .alternativa:hover .hover-icon_alternativa{
            display: block;
        }
        .input{
            display: flex;
            width: 320px;
            padding: var(--Extra-small, 4px) var(--Extra-small, 4px) var(--Extra-small, 4px) 0px;
            align-items: center;
            gap: var(--Small, 8px);

            border: none;
            background: none;

            border-bottom: 1px solid var(--Branco, #FFF);

            margin: 33px 0px;

            color: var(--Branco, #FFF);
            /* Text/paragraph */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    .c_navegacao{
        display: flex;
        padding-top: var(--Large, 24px);
        justify-content: center;
        align-items: flex-end;
        gap: var(--Large, 24px);
        
        align-self: stretch;

        border-top: 1px solid var(--Cinza-claro, #90ADCC);
    }
        .btn_voltar{
            display: flex;
            padding: var(--Small, 8px) var(--Medium, 16px);
            justify-content: center;
            align-items: center;
            gap: var(--Medium, 16px);

            border-radius: var(--Radius, 1000px);
            border: 1px solid var(--Azul, #47AAE2);

            background: none;


            color: var(--Azul, #47AAE2);
            /* Text/Paragraph-bold */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;

            
            cursor: pointer;
        }
        .btn_avancar{
            display: flex;
            padding: var(--Small, 8px) var(--Medium, 16px);
            justify-content: center;
            align-items: center;
            gap: var(--Medium, 16px);

            border-radius: var(--Radius, 1000px);
            background: var(--Azul, #47AAE2);

            text-decoration: none;
            cursor: pointer;
            outline: none;

            border: none;

            color: var(--Branco, #FFF);
            /* Text/Paragraph-bold */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
        .btn_voltar:hover, .btn_avancar:hover{
            scale: 105%;
        }
@media screen and (max-width: 768px) {
    .input{
        width: 260px;
    }
}




/* Final */
.final{
    background: radial-gradient(38.62% 36.18% at 9.03% 55.37%, rgba(71, 170, 226, 0.20) 0%, rgba(71, 170, 226, 0.00) 100%), radial-gradient(41.73% 37.37% at 88.58% 78.61%, rgba(226, 196, 71, 0.08) 0%, rgba(226, 196, 71, 0.00) 100%), linear-gradient(117deg, #161B20 0%, #1E242B 100%), rgba(0, 0, 0, 0.30);
    background-size: cover;
    background-repeat: no-repeat;

    min-width: auto;
    max-height: none;
}
.final .c_conteudo{
    height: auto;
    padding: 50px 0px;
}
    .conteudo_final{
        background: rgba(72, 72, 72, 0.20);
    }
        .li_conteudo_resultado{
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 16px;
        }
            .titulo_parabens{
                color: var(--Branco, #FFF);
                /* Text/h5 */
                font-family: Poppins;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
        .txt_resultado{
            align-self: stretch;

            color: var(--Branco, #FFF);
            /* Text/paragraph */
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .c_viagens{
            padding: 16px 0px;
            position:relative
        }   
            .viagens{
                display: flex;
                align-items: flex-start;
                gap: var(--Large, 24px);
                align-self: stretch;
                justify-content: center;
            }
                .viagem{
                    display: flex;
                    height: 160px;
                    max-width: 123px;
                    padding: var(--Medium, 16px) 0px;
                    justify-content: center;
                    align-items: flex-end;
                    gap: 10px;
                    flex: 1 0 0;

                    border-radius: var(--Medium, 16px);

                    color: #FFF;

                    text-align: center;
                    /* Text/Paragraph-bold */
                    font-family: Poppins;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }
                .viagem-nova-york{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-nova-york.png");
                }
                .viagem-bariloche{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-bariloche.png");
                }
                .viagem-toronto{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-toronto.png");
                }
                .viagem-santiago{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-santiago.png");
                }
                .viagem-gramado{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-gramado.png");
                }
                .viagem-dubai{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-dubai.png");
                }
                .viagem-cancun{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-cancun.png");
                }
                .viagem-thailandia{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-thailandia.png");
                }
                .viagem-montevideu{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-montevideu.png");
                }
                .viagem-fernando-noronha{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-fernando-noronha.png");
                }
                .viagem-lisboa{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-lisboa.png");
                }
                .viagem-orlando{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-orlando.png");
                }
                .viagem-londres{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-londres.png");
                }
                .viagem-barcelona{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-barcelona.png");
                }
                .viagem-miami{
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url("imgs-cidades/img-miami.png");
                }
            .btn_seta_esquerda{
                width: var(--Large, 24px);
                height: var(--Large, 24px);

                position: absolute;
                left: 4px;
                top: 40%;
            }
            .btn_seta_direita{
                width: var(--Large, 24px);
                height: var(--Large, 24px);

                position: absolute;
                right: 4px;
                top: 40%;
            }
            .btn_seta_esquerda:hover, .btn_seta_direita:hover{
                scale: 120%;
            }

    .secao_copy{
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .txt_copy{
        color: var(--Branco, #FFF);
        /* Text/Paragraph-bold */
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .strong_copy{
        font-weight: 700;
    }
        .negativo_copy{
            color: var(--Vermelho, #E21724);
        }
        .positivo_copy{
            color: var(--Verde, #47E269);
        }

    .c_btn_quero_descobrir{
        display: flex;
        justify-content: center;
        padding-top: 30px;
    }
        .btn_quero_descobrir{
            display: flex;
            padding: var(--Medium, 16px) var(--Large, 24px);
            justify-content: center;
            align-items: center;
            gap: var(--Medium, 16px);
            border-radius: var(--Radius, 1000px);
            background: var(--Azul, #47AAE2);

            border: none;

            color: var(--Branco, #FFF);
            /* Text/h6 */
            font-family: Poppins;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
        .btn_quero_descobrir:hover{
            scale: 105%;
        }
/*so para ter o scroll lateral das viagens*/
@media screen and (max-width: 768px) {
    .c_viagens {
        overflow-x: auto;
        width: 100%;
    }
    .viagens {
        display: flex;
        justify-content: flex-start;
    }
    .viagem {
        min-width: 123px;
    }
}