/*Geral*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

.header {
  display: flex;
}

.logo_topo {
  display: flex;
  max-width: 300px;
  padding: 24px;
}

.container_geral {
  max-width: 100vw;
  min-width: 100vw;
  max-height: 100vh;
  min-height: 100vh;
}

.c_conteudo {
  height: 80vh;
  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;
}

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

@media screen and (max-width: 768px) {
  .container_geral {
    max-height: none;
  }

  .header {
    display: flex;
    justify-content: center;
  }

  .c_conteudo {
    height: auto;
    padding-bottom: 30px;
  }

  .conteudo {
    width: 70vw;
  }
}

/*Home*/
.home {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/fundo-site2.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(--vermelho, #ff0000);
  /* 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(--vermelho, #ff0000);

  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.3), rgba(0, 0, 0, 0.3)),
    url('../img/passport.jpg'),
    radial-gradient(38.62% 36.18% at 9.03% 55.37%,
      rgba(71, 170, 226, 0.2) 0%,
      rgba(71, 170, 226, 0) 100%),
    radial-gradient(41.73% 37.37% at 88.58% 78.61%,
      rgba(226, 196, 71, 0.08) 0%,
      rgba(226, 196, 71, 0) 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: #560f0f;
  /* Azul escuro */
  height: 8px;
  border-radius: 32px;
}

.progresso {
  background-color: #ff0000;
  /* 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(--vermelho, #ff0000);
  /* 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(--vermelho, #ff0000);
}

.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.3) 0.01%,
      rgba(46, 55, 65, 0.3) 100.01%);
}

.c_txt_alternativa_selecionado {
  border-radius: var(--Medium, 16px);
  border: 1px solid var(--vermelho, #ff0000);
  background: linear-gradient(97deg,
      rgba(22, 27, 32, 0.3) 0.01%,
      rgba(46, 55, 65, 0.3) 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(--ver, #ff0000);
  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(--vermelho, #ff0000);

  background: none;

  /* 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(--vermelho, #ff0000);

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

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

  min-width: auto;
  max-height: none;
}

.final .c_conteudo {
  height: auto;
  padding-bottom: 50px;
}

.conteudo_final {
  background: rgba(72, 72, 72, 0.2);
}

.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.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-nova-york.png');
}

.viagem-bariloche {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-bariloche.png');
}

.viagem-toronto {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-toronto.png');
}

.viagem-santiago {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-santiago.png');
}

.viagem-gramado {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-gramado.png');
}

.viagem-dubai {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-dubai.png');
}

.viagem-cancun {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-cancun.png');
}

.viagem-thailandia {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-thailandia.png');
}

.viagem-montevideu {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-montevideu.png');
}

.viagem-fernando-noronha {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-fernando-noronha.png');
}

.viagem-lisboa {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-lisboa.png');
}

.viagem-orlando {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-orlando.png');
}

.viagem-londres {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-londres.png');
}

.viagem-barcelona {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/cidades/img-barcelona.png');
}

.viagem-miami {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%),
    url('../img/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(--vermelho, #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;
  }
}