/* ==========================================================================
   Quiz Premiado - Mercado Livre
   Landing exclusiva do evento (pagina unica, sem navegacao de loja)
   ========================================================================== */

:root {
  --amarelo: #FFE600;
  --branco: #FFFFFF;
  --verde: #00A650;
  --azul: #2968C8;
  --azul-claro: #D9E7FA;
  --cinza-bg: #EDEDED;

  --azul-escuro: #1A3B7C;
  --azul-hover: #1F55A8;
  --texto: rgba(0, 0, 0, .9);
  --texto-medio: rgba(0, 0, 0, .55);
  --texto-fraco: rgba(0, 0, 0, .35);
  --linha: rgba(0, 0, 0, .1);
  --vermelho: #F23D4F;

  --sombra: 0 1px 2px 0 rgba(0, 0, 0, .12);
  --sombra-alta: 0 8px 24px 0 rgba(0, 0, 0, .12);
  --raio: 8px;
  --container: 1100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cinza-bg);
  color: var(--texto);
  font-family: "Proxima Nova", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

img { max-width: 100%; display: block; }

/* O display do navegador para [hidden] perde para qualquer classe que defina
   display (como .botao), então some com o elemento de uma vez. */
[hidden] { display: none !important; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-hover); }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* ============================ TOPO ====================================== */
/* Barra minima: so a marca e o selo da promocao. Sem menu, busca ou conta. */

.topo {
  background: var(--amarelo);
  padding: 12px 0;
}
.topo__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topo__logo { width: 124px; height: auto; }

/* Faixa do nome da campanha: atravessa a tela inteira, então cabe em uma
   linha no celular sem disputar espaço com a logo. */
.faixa-campanha {
  background: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 9px 0;
}

/* ============================ BANNER ==================================== */

.banner { background: var(--amarelo); padding: 0 0 24px; }
.banner__botao {
  display: block; width: 100%;
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra-alta);
  transition: transform .2s ease;
}
.banner__botao:hover { transform: translateY(-2px); }
.banner__botao img { width: 100%; height: auto; }

/* Cartao de chamada que sobe por cima do banner */
.chamada {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 24px;
  margin: -32px auto 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.chamada__texto h1 { font-size: 26px; margin: 0 0 6px; }
.chamada__texto p { margin: 0; color: var(--texto-medio); }
.chamada__acao { display: grid; gap: 10px; justify-items: center; }
.chamada__aviso { font-size: 12px; color: var(--texto-fraco); }

.contador { display: flex; gap: 8px; margin-top: 14px; }
.contador div {
  background: var(--cinza-bg); border-radius: 6px;
  padding: 8px 12px; min-width: 58px; text-align: center;
}
.contador b { display: block; font-size: 20px; line-height: 1.1; }
.contador span { font-size: 11px; color: var(--texto-medio); }

/* ============================ BOTOES ==================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--raio);
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
  text-align: center;
}
.botao--principal { background: var(--azul); color: var(--branco); }
.botao--principal:hover { background: var(--azul-hover); color: var(--branco); }
.botao--secundario { background: var(--azul-claro); color: var(--azul); }
.botao--secundario:hover { background: #C7DBF7; color: var(--azul); }
.botao--largo { width: 100%; }
.botao--grande { padding: 16px 36px; font-size: 18px; }
.botao--pequeno { padding: 7px 16px; font-size: 13px; border-radius: 6px; }
.botao:disabled { background: rgba(0, 0, 0, .1); color: var(--texto-fraco); cursor: not-allowed; }
/* Ícones dentro do botão (o cadeado, por exemplo) seguem o tamanho da letra. */
.botao svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ============================ SECOES ==================================== */

.cartao {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.secao { padding: 40px 0; }
.secao__titulo { font-size: 24px; font-weight: 700; margin: 0 0 4px; text-align: center; }
.secao__subtitulo { color: var(--texto-medio); margin: 0 0 28px; text-align: center; }
.secao__nota {
  text-align: center; color: var(--texto-medio); font-size: 14px;
  margin: 20px auto 0; max-width: 60ch;
}
.secao__nota strong { color: var(--texto); }

.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.premios-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* Premios ---------------------------------------------------------------- */
.premio {
  padding: 16px;
  display: flex; flex-direction: column;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.premio:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.premio__posicao {
  align-self: center;
  background: var(--amarelo); color: var(--azul-escuro);
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 40px;
  margin-bottom: 10px;
}
.premio__figura {
  height: 165px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.premio__figura img { max-height: 100%; width: auto; object-fit: contain; }
/* O nome é a última linha do cartão: o "margin-top: auto" encosta ele no fim e
   alinha a base de todos, mesmo com nomes de tamanhos bem diferentes. */
.premio h3 {
  font-size: 15px; line-height: 1.35; font-weight: 600;
  margin: auto 0 8px;
}

/* Carrossel (só no mobile) ------------------------------------------------ */
/* No desktop a grade fica como está; abaixo de 720px os cartões viram uma
   faixa horizontal com encaixe, e os pontos aparecem para indicar a posição. */

.carrossel__pontos { display: none; justify-content: center; gap: 8px; margin-top: 16px; }
.carrossel__ponto {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}
.carrossel__ponto--ativo { width: 22px; border-radius: 4px; background: var(--azul); }

@media (max-width: 720px) {
  .premios-grade.carrossel__trilho {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    /* sangra até a borda da tela para o próximo cartão aparecer espiando */
    margin: 0 -16px;
    padding: 8px 16px 10px;
    scroll-padding-left: 16px;
  }
  .premios-grade.carrossel__trilho::-webkit-scrollbar { display: none; }
  .premios-grade.carrossel__trilho > .premio {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }
  .carrossel__pontos { display: flex; }
}

/* Passos ----------------------------------------------------------------- */
.passo { padding: 24px; text-align: center; }
.passo__numero {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul);
  font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.passo h3 { font-size: 16px; margin: 0 0 6px; }
.passo p { color: var(--texto-medio); margin: 0; font-size: 14px; }

/* Regulamento e FAQ ------------------------------------------------------ */
.regras { padding: 24px 28px; }
.regras ol { margin: 0; padding-left: 20px; color: rgba(0, 0, 0, .75); }
.regras li { margin-bottom: 10px; }

.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item:last-child { border-bottom: 0; }
.faq__pergunta {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 16px 28px; font-size: 15px; font-weight: 600; color: var(--texto);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__pergunta:hover { color: var(--azul); }
.faq__pergunta::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--azul); }
.faq__pergunta[aria-expanded="true"]::after { content: "\2013"; }
.faq__resposta { padding: 0 28px 18px; color: var(--texto-medio); margin: 0; max-width: 80ch; }

/* ============================ QUIZ ====================================== */

.quiz { max-width: 720px; margin: 0 auto; }

.quiz__barra-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.quiz__contagem { font-size: 13px; color: var(--texto-medio); }
.quiz__contagem strong { color: var(--texto); font-size: 15px; }

.cronometro {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--branco); border-radius: 40px;
  padding: 6px 14px; font-weight: 700; font-size: 15px;
  box-shadow: var(--sombra);
}
.cronometro--alerta { color: var(--vermelho); }

.progresso {
  height: 6px; background: var(--branco); border-radius: 3px;
  overflow: hidden; margin-bottom: 20px; box-shadow: var(--sombra);
}
.progresso__preenchido {
  height: 100%; width: 0%;
  background: var(--verde);
  transition: width .3s ease;
}

.quiz__cartao { padding: 28px; }
.quiz__categoria {
  display: inline-block;
  background: var(--azul-claro); color: var(--azul);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px; margin-bottom: 14px;
}
.quiz__pergunta { font-size: 22px; line-height: 1.3; margin: 0 0 22px; font-weight: 700; }

.alternativas { display: grid; gap: 10px; margin-bottom: 20px; }
.alternativa {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  font-size: 15px; color: var(--texto);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.alternativa:hover:not(:disabled) { border-color: var(--azul); background: var(--azul-claro); }
.alternativa__letra {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cinza-bg); color: var(--texto-medio);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.alternativa:hover:not(:disabled) .alternativa__letra { background: var(--branco); color: var(--azul); }
.alternativa:disabled { cursor: default; }

.alternativa--certa { border-color: var(--verde); background: rgba(0, 166, 80, .08); }
.alternativa--certa .alternativa__letra { background: var(--verde); color: var(--branco); }
.alternativa--errada { border-color: var(--vermelho); background: rgba(242, 61, 79, .07); }
.alternativa--errada .alternativa__letra { background: var(--vermelho); color: var(--branco); }
.alternativa--apagada { opacity: .55; }

.feedback {
  border-radius: var(--raio);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  border-left: 4px solid;
}
.feedback--certo { background: rgba(0, 166, 80, .08); border-color: var(--verde); }
.feedback--errado { background: rgba(242, 61, 79, .07); border-color: var(--vermelho); }
.feedback strong { display: block; margin-bottom: 2px; }
.feedback .botao { margin-top: 12px; }

.quiz__rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quiz__giros { font-size: 14px; color: var(--texto-medio); }
.quiz__giros strong { color: var(--verde); font-size: 18px; }

/* Cadastro e resultado --------------------------------------------------- */
.painel { padding: 32px; text-align: center; }
.painel h2 { font-size: 24px; margin: 0 0 8px; }
.painel > p { color: var(--texto-medio); margin: 0 auto 24px; max-width: 52ch; }

.formulario { max-width: 380px; margin: 0 auto; text-align: left; }
.campo { display: block; margin-bottom: 16px; }
.campo > span:first-child { display: block; font-size: 13px; color: var(--texto-medio); margin-bottom: 4px; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"] {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1px solid rgba(0, 0, 0, .25); border-radius: var(--raio);
  outline: 0; background: var(--branco); color: var(--texto);
}
.campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.campo--erro input { border-color: var(--vermelho); }
.campo__erro { display: none; color: var(--vermelho); font-size: 12px; margin-top: 4px; }
.campo--erro .campo__erro { display: block; }
.campo__erro--visivel { display: block; }
#erro-aceite { margin: -12px 0 16px; }

.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texto-medio); margin-bottom: 20px; }
.aceite input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--azul); }

.lista-checagem {
  list-style: none; margin: 0 auto 24px; padding: 0;
  text-align: left; display: grid; gap: 10px; max-width: 380px;
}
.lista-checagem li { display: flex; gap: 10px; align-items: flex-start; color: rgba(0, 0, 0, .75); font-size: 14px; }
.lista-checagem li::before { content: "\2713"; color: var(--verde); font-weight: 700; flex: 0 0 auto; }

.medalha {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--amarelo);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700;
  margin: 0 auto 16px;
}
.resultado__placar { font-size: 15px; color: var(--texto-medio); margin-bottom: 8px; }
.resultado__rodadas { font-size: 13px; color: var(--texto-medio); margin: 0 0 20px; }
.resultado__placar b { color: var(--texto); font-size: 22px; }

.cupom {
  background: var(--azul-claro);
  border: 1px dashed var(--azul);
  border-radius: var(--raio);
  padding: 16px;
  margin: 0 0 20px;
}
.cupom small { color: var(--azul); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.cupom__codigo { font-size: 26px; font-weight: 700; letter-spacing: 3px; color: var(--azul); margin: 6px 0 2px; }
.cupom p { margin: 0; color: var(--texto-medio); font-size: 13px; }

.acoes-centro { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* No resultado o botão vem logo depois do convite para compartilhar. */
#tela-resultado .acoes-centro { margin-top: 22px; }

.resumo { text-align: left; margin-top: 28px; }
.resumo h3 { font-size: 16px; margin: 0 0 12px; }
.resumo__item { border-top: 1px solid var(--linha); padding: 12px 0; }
.resumo__item p { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.resumo__item small { color: var(--texto-medio); display: block; }
.resumo__marca { font-weight: 700; margin-right: 6px; }
.resumo__marca--certa { color: var(--verde); }
.resumo__marca--errada { color: var(--vermelho); }

/* ============================ ROLETA ==================================== */

.roleta__placar {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.roleta__placar div {
  background: var(--cinza-bg); border-radius: var(--raio);
  padding: 10px 20px; min-width: 130px;
}
.roleta__placar b { display: block; font-size: 24px; line-height: 1.1; color: var(--azul-escuro); }
.roleta__placar span { font-size: 12px; color: var(--texto-medio); }

.roleta__chamada {
  font-size: 17px; font-weight: 700; color: var(--azul);
  margin: 0 0 10px;
}
.roleta__chamada[hidden] { display: none; }

.roleta {
  position: relative;
  width: 320px; height: 320px;
  margin: 0 auto 16px;
}

/* Ponteiro fixo no topo: a fatia que parar embaixo dele é a premiada. */
.roleta__seta {
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid var(--azul-escuro);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  z-index: 3;
}

.roleta__disco {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 8px solid var(--amarelo);
  box-shadow: var(--sombra-alta), inset 0 0 0 2px rgba(0, 0, 0, .08);
  overflow: hidden;
  transition: transform 4.5s cubic-bezier(.16, .84, .28, 1);
}

/* O rótulo é escrito no sentido do raio: assim o texto usa o comprimento da
   fatia, e não a largura estreita perto do centro. A conta é: gira até o meio
   da fatia, empurra para fora e vira o texto 90 graus. */
.roleta__setor {
  --distancia: 100px;
  position: absolute;
  top: 50%; left: 50%;
  width: 100px;
  text-align: center;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(var(--angulo))
    translateY(calc(var(--distancia) * -1))
    rotate(-90deg);
}
.roleta__setor span {
  display: block;
  font-size: 10px; font-weight: 700; line-height: 1.15;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.roleta__centro {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 4px solid var(--amarelo);
  background: var(--branco);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding: 0;
  color: var(--azul);
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  z-index: 2;
  transition: transform .15s ease, background-color .15s ease;
}
.roleta__centro img { width: 64px; height: auto; }

.roleta__centro:hover:not(:disabled) {
  border-color: var(--azul);
  transform: translate(-50%, -50%) scale(1.05);
}
/* Sem giro o botão trava, mas a marca continua nítida: quem avisa é a borda
   apagada e a falta do destaque de toque. */
.roleta__centro:disabled {
  cursor: not-allowed;
  background: var(--branco);
  border-color: rgba(0, 0, 0, .15);
  box-shadow: none;
}

.roleta__aviso { font-size: 13px; color: var(--texto-medio); margin: 0 0 20px; }

.roleta__resultado {
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 20px;
  border: 1px solid var(--linha);
  background: var(--cinza-bg);
}
.roleta__resultado strong { display: block; font-size: 18px; margin-bottom: 4px; }
.roleta__resultado p { margin: 0; color: var(--texto-medio); font-size: 14px; }
.roleta__resultado--produto { background: rgba(41, 104, 200, .08); border-color: var(--azul); }
.roleta__resultado--cupom { background: var(--azul-claro); border-color: var(--azul-claro); }
.roleta__resultado--bonus { background: rgba(0, 166, 80, .1); border-color: var(--verde); }
.roleta__resultado--nada { background: var(--cinza-bg); border-color: rgba(0, 0, 0, .18); }
.roleta__resultado--perde { background: rgba(242, 61, 79, .08); border-color: var(--vermelho); }
.roleta__resultado-figura { height: 120px; margin-bottom: 10px; display: flex; justify-content: center; }
.roleta__resultado-figura img { max-height: 100%; width: auto; }
.roleta__resultado-contato { margin-top: 8px !important; font-size: 12px !important; }

.premios-ganhos { text-align: left; margin-top: 24px; }
.premios-ganhos h3 { font-size: 16px; margin: 0; }
.premios-ganhos__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 16px;
}
#botao-resgatar-tudo[hidden] { display: none; }
.premios-ganhos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.premios-ganhos li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cinza-bg); border-radius: var(--raio);
  padding: 10px 14px; font-size: 14px;
}
.premios-ganhos__grupo {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-medio);
  margin: 18px 0 8px;
}
.premios-ganhos__grupo:first-child { margin-top: 0; }
.premios-ganhos__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 14px;
}
/* O título já tem margem própria; aqui ela seria espaço repetido. */
.premios-ganhos__cabecalho .premios-ganhos__grupo { margin-bottom: 0; }
.premios-ganhos__cabecalho:first-child .premios-ganhos__grupo { margin-top: 0; }
.premios-ganhos__status {
  flex: 0 0 auto;
  color: var(--verde); font-weight: 600; font-size: 12px;
  background: var(--branco); border-radius: 4px; padding: 3px 8px;
}
.premios-ganhos__status--produto { color: var(--azul); }
.premios-ganhos__status--pendente { color: var(--texto-medio); }
.premios-ganhos__vazio { color: var(--texto-medio); font-size: 14px; margin: 0; }

/* Resgate e seguro -------------------------------------------------------- */

/* Um resgate pode levar vários prêmios: as linhas empilham no container. */
#resgate-produtos { display: grid; gap: 8px; margin-bottom: 20px; }
#seguro-alvos { display: grid; gap: 10px; margin-bottom: 18px; }
#checkout-produtos { display: grid; gap: 12px; }

.resgate__produto {
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  background: var(--cinza-bg);
  border-radius: var(--raio);
  padding: 12px 16px;
  margin: 0 auto;
  width: 100%;
  max-width: 380px;
}
.resgate__produto img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.resgate__produto small { display: block; color: var(--texto-medio); font-size: 12px; }
.resgate__produto strong { font-size: 14px; line-height: 1.3; }

/* A oferta de seguro segue a tela de garantia estendida da loja: página
   branca, sem cartão, tudo alinhado à esquerda, uma opção por linha e o
   preço na ponta direita. */

body.pagina-loja { background: var(--branco); }
body.pagina-loja .secao { padding: 32px 0 60px; }
body.pagina-loja .quiz { max-width: none; }
body.pagina-loja #resgate-checkout { text-align: left; }
body.pagina-loja #resgate-checkout > h2 { font-size: 26px; margin-bottom: 20px; }
body.pagina-loja #tela-resgate {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.seguro { text-align: left; }
.seguro h2 { font-size: 26px; margin-bottom: 14px; }
.seguro > p { color: var(--texto-medio); margin: 0 0 6px; max-width: none; font-size: 14px; }
.seguro__passo {
  font-size: 13px; font-weight: 600; color: var(--texto-medio);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 10px;
}
.seguro__passo[hidden] { display: none; }

.seguro__detalhes { margin: 0 0 26px !important; font-size: 14px; }

.seguro__alvo { display: flex; align-items: center; gap: 12px; }
.seguro__miniatura { position: relative; flex: 0 0 auto; width: 40px; height: 40px; }
.seguro__miniatura img {
  width: 40px; height: 40px;
  border-radius: 50%; object-fit: contain; padding: 4px;
  background: var(--branco); border: 1px solid var(--linha);
}
.seguro__conferido {
  position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px;
  fill: var(--verde);
  stroke: var(--branco); stroke-width: 1.5;
}
.seguro__alvo-texto small { display: block; color: var(--texto-medio); font-size: 14px; }
.seguro__alvo-texto strong { font-size: 15px; font-weight: 600; }

.seguro__opcoes { display: grid; gap: 12px; margin-bottom: 18px; }

.seguro__opcao {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: var(--raio);
  padding: 16px 24px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.seguro__opcao--recomendada { padding-top: 26px; }
.seguro__opcao:hover { border-color: var(--azul); }
.seguro__opcao--ativa { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.seguro__opcao input { width: 18px; height: 18px; accent-color: var(--azul); flex: 0 0 auto; }
.seguro__periodo { font-size: 16px; font-weight: 600; }

/* Coluna de preços, encostada na direita como na loja. */
.seguro__valores { margin-left: auto; display: grid; gap: 2px; justify-items: end; text-align: right; }
.seguro__total { font-size: 16px; }
.seguro__total s { margin-right: 8px; font-size: 14px; color: var(--texto-fraco); }
.seguro__economia { font-size: 13px; color: var(--verde); }

.seguro__selo {
  position: absolute; top: -1px; right: -1px;
  background: #000; color: var(--branco);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 0 var(--raio) 0 var(--raio);
}

.seguro__rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.seguro__termos {
  font-size: 13px; color: var(--texto-medio);
  margin: 0 !important;
}
.seguro__acoes { display: flex; gap: 12px; margin-left: auto; }
.seguro__acoes .botao { padding: 11px 24px; font-size: 15px; }

/* Checkout ---------------------------------------------------------------- */

.checkout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  text-align: left;
  margin-top: 20px;
}
.checkout__coluna { display: grid; gap: 16px; align-content: start; }

/* Linha do produto, solta acima dos blocos, como no checkout da loja. */
.checkout__produto {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px;
}
.checkout__produto img {
  width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto;
  border: 1px solid var(--linha); border-radius: 6px; padding: 4px;
}
.checkout__produto-texto strong { display: block; font-weight: 400; }
.checkout__produto-texto small { color: var(--texto-medio); font-size: 13px; }

.checkout__bloco {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
}
.checkout__bloco h3 { font-size: 17px; margin: 0 0 16px; }

.checkout__abas { display: flex; gap: 12px; margin-bottom: 16px; }
.checkout__aba {
  flex: 0 0 240px;
  background: var(--branco);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: var(--raio);
  padding: 8px 14px;
  text-align: center;
  display: grid; gap: 1px;
}
.checkout__aba b { font-size: 14px; font-weight: 600; }
.checkout__aba small { font-size: 13px; font-weight: 400; color: var(--texto-medio); }
.checkout__aba--ativa { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.checkout__gratis { color: var(--verde) !important; font-weight: 600; }

/* Endereço com o pino à esquerda e o atalho para trocar logo abaixo. */
.checkout__endereco {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.checkout__pino { width: 18px; height: 18px; flex: 0 0 auto; fill: var(--azul); margin-top: 1px; }
.checkout__endereco-texto { display: grid; gap: 4px; }

.checkout__link {
  justify-self: start;
  background: none; border: 0; padding: 0;
  color: var(--azul); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.checkout__link:hover { text-decoration: underline; }

.checkout__envio { font-size: 14px; }
.checkout__envio-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.checkout__envio-titulo strong { font-size: 15px; }
.checkout__selo-full {
  background: var(--verde); color: var(--branco);
  font-size: 11px; font-weight: 700; font-style: italic;
  padding: 1px 7px; border-radius: 3px;
}
.checkout__opcao-envio {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.checkout__opcao-envio input { width: 17px; height: 17px; accent-color: var(--azul); flex: 0 0 auto; }
.checkout__envio-preco { margin-left: auto; font-weight: 600; }
.checkout__envio-nota { display: block; color: var(--texto-medio); font-size: 13px; }

.checkout__pagamentos { display: grid; gap: 10px; }
.pagamento {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: var(--raio);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pagamento:hover { border-color: var(--azul); }
.pagamento--ativo { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.pagamento input { width: 18px; height: 18px; accent-color: var(--azul); flex: 0 0 auto; }
.pagamento__icone {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); border-radius: 6px;
}
.pagamento__icone svg { width: 20px; height: 20px; }
.pagamento__icone img { width: 28px; height: 28px; object-fit: contain; }
.pagamento strong { display: block; font-size: 15px; }
.pagamento small { color: var(--texto-medio); font-size: 13px; }
.pagamento__selo {
  margin-left: auto;
  background: rgba(0, 166, 80, .12); color: var(--verde);
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 40px;
}

.checkout__resumo {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 16px;
}
.checkout__resumo h3 { font-size: 19px; margin: 0 0 16px; }
.checkout__resumo dl {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px 12px; margin: 0 0 14px;
  font-size: 14px;
}
.checkout__resumo dt { color: var(--texto); }
.checkout__resumo dd { margin: 0; text-align: right; color: var(--texto); }
.checkout__resumo dd s { margin-right: 6px; color: var(--texto-fraco); }

.checkout__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--linha);
  padding-top: 14px;
  font-size: 17px;
}
.checkout__total strong { font-size: 24px; }
.checkout__economia { color: var(--verde); font-size: 13px; margin: 6px 0 18px; text-align: right; }

.checkout__voltar {
  width: 100%; margin-top: 10px;
  background: none; border: 0;
  color: var(--azul); font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 8px;
}
.checkout__voltar:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__resumo { position: static; }
}

/* Pagamento por Pix ------------------------------------------------------- */

.icone-pix { display: block; width: 100%; height: 100%; }

.pix__titulo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.pix__titulo .icone-pix { width: 28px; height: 28px; flex: 0 0 auto; }

.pix {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  text-align: left;
  margin: 20px 0;
}
.pix__qr {
  flex: 0 0 auto;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px; background: var(--branco);
}
.pix__qr img, .pix__qr canvas { max-width: 100%; height: auto; image-rendering: pixelated; }
.pix__qr--vazio { color: var(--texto-medio); font-size: 13px; text-align: center; }

.pix__dados { flex: 1 1 280px; max-width: 360px; display: grid; align-content: start; gap: 8px; }
.pix__valor { font-size: 26px; font-weight: 700; }
.pix__prazo { font-size: 13px; color: var(--texto-medio); }
.pix__codigo { display: grid; gap: 4px; margin-top: 8px; }
.pix__codigo span { font-size: 13px; color: var(--texto-medio); }
.pix__codigo textarea {
  width: 100%; resize: none;
  font-family: monospace; font-size: 12px; line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, .2); border-radius: var(--raio);
  padding: 10px; background: var(--cinza-bg); color: var(--texto);
}
.pix__aviso { font-size: 13px; margin: 4px 0 0; color: var(--texto-medio); }
.pix__aviso--erro { color: var(--vermelho); }
.pix__aviso--ok { color: var(--verde); font-weight: 600; }

/* Compartilhar ------------------------------------------------------------ */
/* Como o quiz é uma vez só, este bloco é a fonte de giros extras. */

.compartilhar {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}
.compartilhar h3 { font-size: 17px; margin: 0 0 4px; }
.compartilhar p { color: var(--texto-medio); font-size: 14px; margin: 0 0 14px; }

.compartilhar__botoes {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.compartilhar__botao {
  border: 1px solid rgba(0, 0, 0, .2);
  background: var(--branco);
  border-radius: 40px;
  padding: 9px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.compartilhar__botao--usado {
  opacity: .55;
  border-style: dashed;
}
.compartilhar__botao--usado::after { content: " ✓"; }

.compartilhar__botao:hover {
  border-color: var(--azul); background: var(--azul-claro); color: var(--azul);
}

.compartilhar__aviso {
  margin: 14px 0 0 !important;
  color: var(--verde); font-weight: 600; font-size: 14px;
}
.compartilhar__contador { margin: 8px 0 0 !important; font-size: 13px; }

/* Ranking ---------------------------------------------------------------- */
.ranking { margin-top: 28px; text-align: left; }
.ranking h3 { font-size: 16px; margin: 0 0 12px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 12px; text-align: left; border-bottom: 1px solid var(--linha); font-size: 14px; }
.tabela th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-medio); font-weight: 600; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td:last-child, .tabela th:last-child { text-align: right; }
.tabela tr.eu { background: var(--azul-claro); }
.tabela tr.eu td { font-weight: 600; }
.posicao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cinza-bg); font-weight: 700; font-size: 13px;
}
.posicao--1 { background: var(--amarelo); }
.posicao--2, .posicao--3 { background: var(--azul-claro); color: var(--azul); }

/* ============================ RODAPE ==================================== */

.rodape {
  background: var(--branco);
  border-top: 1px solid var(--linha);
  padding: 28px 0;
  margin-top: 40px;
  text-align: center;
}
.rodape img { width: 108px; margin: 0 auto 14px; }
.rodape__links {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
  list-style: none; margin: 0 0 14px; padding: 0;
}
.rodape__links a { font-size: 13px; color: var(--texto-medio); }
.rodape__links a:hover { color: var(--azul); }
.rodape p { color: var(--texto-fraco); font-size: 12px; margin: 0 0 4px; }

/* ============================ RESPONSIVO ================================ */

@media (max-width: 900px) {
  .premios-grade { grid-template-columns: repeat(2, 1fr); }
  .chamada { grid-template-columns: 1fr; text-align: center; }
  .contador { justify-content: center; }
  .chamada__acao { justify-items: stretch; }
}

@media (max-width: 620px) {
  .topo__logo { width: 110px; }
  .faixa-campanha { font-size: 10px; letter-spacing: .3px; padding: 8px 0; }
  .grade-3 { grid-template-columns: 1fr; }
  .banner { padding-bottom: 16px; }
  .chamada { margin-top: -16px; padding: 20px; }
  .chamada__texto h1 { font-size: 21px; }
  .quiz__pergunta { font-size: 19px; }
  .quiz__cartao, .painel { padding: 20px; }
  .seguro__opcao { flex-wrap: wrap; padding: 18px; }
  .seguro__valores { margin-left: 32px; justify-items: start; text-align: left; }
  .seguro__acoes { width: 100%; margin-left: 0; }
  .seguro__acoes .botao { flex: 1; }
  .quiz__rodape { flex-direction: column-reverse; align-items: stretch; }
  .premio__figura { height: 150px; }
  .secao { padding: 28px 0; }
  .roleta { width: 260px; height: 260px; }
  .roleta__setor { --distancia: 80px; width: 80px; }
  .roleta__setor span { font-size: 9px; }
  .roleta__centro { width: 84px; height: 84px; }
  .roleta__centro img { width: 52px; }
  .roleta__chamada { font-size: 15px; }
}

/* ========================= TELA DE CARREGAMENTO ========================== */
/* Fica sobre a página inteira enquanto o checkout é preparado. */

.carregando {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--branco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
}

body.sem-rolagem { overflow: hidden; }

.carregando__texto {
  margin: 0;
  max-width: 260px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.carregando__circulo {
  width: 34px;
  height: 34px;
  border: 3px solid var(--azul-claro);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar-carregando .8s linear infinite;
}

@keyframes girar-carregando {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .roleta__disco { transition-duration: .6s; }
  .carregando__circulo { animation-duration: 2s; }
}