/* ==========================================================================
   stand-03-valores.css
   Estilos EXCLUSIVOS do Stand 03 — Nossos Valores.

   Todas as classes usam o prefixo v3- para nao colidir com nenhuma regra
   existente. Este arquivo nao altera nada da Home: reaproveita apenas os
   tokens, o cabecalho e o botao ja aprovados.

   Prioridade de leitura: TELA VERTICAL.
   ========================================================================== */

/* ==========================================================================
   1. ESTRUTURA DA PAGINA
   ========================================================================== */

.v3-pagina {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.v3-conteudo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(16px, 2.4vh, 40px);
}

.v3-largura {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 44px);
}

.v3-tela[hidden] { display: none !important; }

.v3-tela {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.2vh, 30px);
  text-align: center;
}

/* Modo atividade: durante os jogos o cabecalho principal fica oculto */
.v3-modo-atividade .topo { display: none; }

/* ==========================================================================
   2. ELEMENTOS DE IDENTIFICACAO E TEXTO
   ========================================================================== */

.v3-etiqueta {
  padding: 6px 20px;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-titulo);
  font-size: clamp(0.78rem, 0.3vw + 0.7rem, 0.96rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-branco);
  background: var(--cor-laranja);
}

.v3-titulo {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: clamp(1.9rem, 2.4vw + 1.1rem, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--texto-forte);
}

.v3-subtitulo {
  margin: 0;
  font-size: clamp(1.15rem, 1vw + 0.85rem, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--cor-marrom-medio);
}

.v3-texto {
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.55vw + 0.88rem, 1.32rem);
  line-height: 1.55;
  color: var(--texto-suave);
}

.v3-texto + .v3-texto { margin-top: 0.9em; }

.v3-destaque {
  font-weight: 700;
  color: var(--texto-forte);
}

.v3-caixa {
  width: 100%;
  padding: clamp(22px, 3vw, 46px);
  border-radius: var(--raio-card);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

/* Card da TELA 1 (introducao).
   Com o texto reduzido, os paragrafos passam a ser distribuidos por um gap
   uniforme (no lugar das margens acumuladas) e o card ganha um respiro
   vertical proporcional ao novo volume de conteudo. Nada alem do
   espacamento interno muda: largura, fundo, sombra e raio seguem iguais. */
.v3-caixa--intro {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 24px);
  padding-block: clamp(30px, 3.6vw, 54px);
}

.v3-caixa--intro .v3-texto { margin-top: 0; }

/* ==========================================================================
   3. BOTOES (variacao local do botao global, sem alterar o componente)
   ========================================================================== */

.v3-botao {
  min-height: 64px;
  padding: 16px 38px;
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.22rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.v3-botao svg { width: 24px; height: 24px; }

.v3-botao-discreto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: var(--raio-pill);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--texto-suave);
  background: transparent;
  transition: background-color var(--transicao), color var(--transicao);
}

.v3-botao-discreto:hover {
  color: var(--texto-forte);
  background: var(--tint-laranja);
}

/* display: inline-flex sobrepoe o hidden padrao do navegador */
.v3-botao-discreto[hidden] { display: none; }

.v3-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   4. BARRA DE STATUS DOS JOGOS (tempo, chances, rodada)
   ========================================================================== */

.v3-barra {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
}

.v3-indicador {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 22px;
  border-radius: var(--raio-pill);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.24rem);
  font-weight: 700;
  color: var(--texto-forte);
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  font-variant-numeric: tabular-nums;
}

.v3-indicador svg { width: 24px; height: 24px; color: var(--cor-marrom-medio); }

.v3-indicador--alerta {
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
}

.v3-indicador--alerta svg { color: var(--cor-branco); }

.v3-instrucao {
  max-width: 70ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.28rem);
  line-height: 1.45;
  color: var(--texto-suave);
}

/* ==========================================================================
   5. JOGO 1 — LIGUE OS VALORES
   ========================================================================== */

.v3-tabuleiro {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(12px, 2.4vw, 40px);
  text-align: left;
}

.v3-coluna {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
}

/* Camada das linhas de ligacao */
.v3-linhas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.v3-item {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 18px);
  border: 2px solid transparent;
  border-radius: var(--raio-caixa);
  text-align: left;
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao), opacity var(--transicao);
}

.v3-item:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: var(--sombra-card-hover);
}

.v3-item[data-estado="selecionado"] {
  border-color: var(--cor-laranja);
  box-shadow: var(--sombra-card-hover);
}

.v3-item[data-estado="concluido"] {
  border-color: var(--cor-marrom-medio);
  opacity: 0.72;
  cursor: default;
  box-shadow: none;
}

.v3-item[data-estado="erro"] {
  border-color: var(--cor-marrom-medio);
  animation: v3-tremer 320ms ease;
}

@keyframes v3-tremer {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Selo oficial: ativo protegido, apenas dimensionado */
.v3-selo {
  width: clamp(46px, 5vw, 76px);
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 1;
}

.v3-item__nome {
  font-size: clamp(0.94rem, 0.5vw + 0.82rem, 1.22rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto-forte);
}

.v3-item__descricao {
  font-size: clamp(0.86rem, 0.42vw + 0.78rem, 1.1rem);
  line-height: 1.4;
  color: var(--texto-suave);
}

/* Aviso rapido de erro */
.v3-aviso {
  position: fixed;
  z-index: 90;
  bottom: clamp(20px, 4vh, 56px);
  left: 50%;
  padding: 16px 30px;
  border-radius: var(--raio-pill);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.2rem);
  font-weight: 700;
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
  box-shadow: var(--sombra-menu);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--transicao), transform var(--transicao);
  pointer-events: none;
}

.v3-aviso[data-visivel="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --- Gabarito (revelacao das associacoes corretas) --- */

.v3-gabarito {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  text-align: left;
}

.v3-gabarito__linha {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(12px, 1.4vw, 20px);
  border-radius: var(--raio-caixa);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

.v3-gabarito__texto { min-width: 0; }

/* ==========================================================================
   6. JOGO 2 — ROLETA DOS VALORES
   ========================================================================== */

.v3-roleta {
  position: relative;
  width: min(560px, 88vw);
  margin-inline: auto;
  aspect-ratio: 1;
}

.v3-roleta__disco {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 30px rgba(68, 13, 0, 0.18));
  transition: transform 4.4s cubic-bezier(0.16, 0.72, 0.14, 1);
  /* O disco e um SVG QUADRADO que gira. Ao girar, os cantos do quadrado
     avancam para fora da area circular visivel e passam por cima do botao
     GIRAR, interceptando o clique mesmo sem nada pintado ali. Como o disco
     nao tem nenhuma interacao propria (o giro parte apenas do botao), ele
     deixa de capturar ponteiro. Nada da animacao ou da logica muda. */
  pointer-events: none;
}

.v3-roleta__ponteiro {
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 3;
  width: clamp(34px, 5vw, 52px);
  height: auto;
  transform: translateX(-50%);
  color: var(--cor-marrom-escuro);
}

.v3-roleta__centro {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 22%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.v3-roleta__centro svg { width: 54%; height: 54%; color: var(--cor-laranja); }

/* Reforco: o botao GIRAR fica em um nivel de empilhamento proprio, acima de
   qualquer sobra visual da roleta, com toda a sua area visivel clicavel. */
#botao-girar {
  position: relative;
  z-index: 4;
}

.v3-fatia--usada { opacity: 0.24; }
.v3-rotulo--usado { opacity: 0.55; }

/* --- Situacao e alternativas --- */

.v3-sorteado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
}

.v3-sorteado .v3-selo { width: clamp(72px, 8vw, 118px); }

.v3-sorteado__nome {
  font-family: var(--fonte-texto);
  font-size: clamp(1.5rem, 1.8vw + 0.9rem, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto-forte);
}

.v3-situacao {
  max-width: 68ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.5rem);
  line-height: 1.42;
  font-weight: 500;
  color: var(--texto-forte);
}

.v3-alternativas {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
}

.v3-alternativa {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(12px, 1.4vw, 20px);
  border: 2px solid transparent;
  border-radius: var(--raio-caixa);
  text-align: left;
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao), opacity var(--transicao);
}

.v3-alternativa:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: var(--sombra-card-hover);
}

.v3-alternativa__letra {
  display: grid;
  flex: 0 0 auto;
  width: clamp(40px, 3.4vw, 52px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.24rem);
  font-weight: 700;
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
}

.v3-alternativa__texto {
  font-size: clamp(0.98rem, 0.45vw + 0.88rem, 1.22rem);
  line-height: 1.4;
  color: var(--texto-forte);
}

.v3-alternativa[data-estado="correta"] {
  border-color: var(--cor-laranja);
  background: var(--cor-branco);
}

.v3-alternativa[data-estado="correta"] .v3-alternativa__letra {
  background: var(--cor-laranja);
}

.v3-alternativa[data-estado="incorreta"] { opacity: 0.55; }

.v3-alternativa[data-estado="apagada"] { opacity: 0.45; }

/* --- Reflexao --- */

.v3-reflexao {
  width: 100%;
  padding: clamp(18px, 2.2vw, 32px);
  border-radius: var(--raio-card);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

.v3-reflexao__titulo {
  margin: 0 0 8px;
  font-family: var(--fonte-texto);
  font-size: clamp(1.2rem, 0.9vw + 0.95rem, 1.8rem);
  font-weight: 700;
  color: var(--cor-laranja);
}

.v3-reflexao__texto {
  font-size: clamp(0.98rem, 0.45vw + 0.88rem, 1.24rem);
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ==========================================================================
   7. TELA FINAL
   ========================================================================== */

.v3-mensagem-final {
  width: 100%;
  padding: clamp(22px, 3vw, 42px);
  border-radius: var(--raio-card);
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
  box-shadow: var(--sombra-card);
}

/* ==========================================================================
   8. ADAPTACOES POR LARGURA
   ========================================================================== */

/* Telas estreitas: o tabuleiro mantem as duas colunas (a ligacao depende
   disso), com proporcao ajustada e textos ainda legiveis. */
@media (max-width: 700px) {
  .v3-tabuleiro { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .v3-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v3-coluna--valores .v3-item { align-items: center; text-align: center; }
  .v3-gabarito__linha { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-roleta__disco { transition-duration: 900ms; }
  .v3-item[data-estado="erro"] { animation: none; }
}

/* ==========================================================================
   9. SAIDA DA ATIVIDADE (Regra-Mae, Modo Atividade)
   ========================================================================== */

.v3-saida {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: clamp(8px, 1.2vh, 18px);
}

.v3-saida[hidden] { display: none; }

/* ==========================================================================
   NAVEGACAO DISCRETA DO PERCURSO
   Mesmo padrao visual ja aprovado nos demais stands. Secundaria: nunca
   compete com o CTA principal de cada tela.
   ========================================================================== */

.v3-navegacao {
  display: flex;
  width: 100%;
  max-width: 1180px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.6vw, 22px);
  margin-inline: auto;
  padding: clamp(10px, 1.4vh, 18px) clamp(16px, 3vw, 44px);
}

.v3-nav-botao {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border-radius: var(--raio-pill);
  font-size: clamp(0.92rem, 0.28vw + 0.86rem, 1.04rem);
  font-weight: 700;
  color: var(--texto-forte);
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.v3-nav-botao svg { width: 20px; height: 20px; flex: 0 0 auto; }

.v3-nav-botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-card-hover); }

/* display: inline-flex sobrepoe o hidden padrao do navegador */
.v3-nav-botao[hidden] { display: none; }

.v3-nav-botao--fim {
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
  box-shadow: var(--sombra-botao);
}

.v3-nav-espacador { min-width: 1px; }