/* ==========================================================================
   stand-04-pratica.css
   Estilos EXCLUSIVOS do Stand 04 — Cultura na Pratica.

   Todas as classes usam o prefixo s4-. Este arquivo nao altera a Home nem
   nenhum outro stand: reaproveita apenas os tokens, o cabecalho e o botao
   ja aprovados.

   Experiencia principal: desktop 1920 x 1080, sem rolagem durante a
   dinamica. As alturas usam vh para caber em uma tela; a legibilidade
   tem prioridade sobre encaixar conteudo.
   ========================================================================== */

/* ==========================================================================
   1. ESTRUTURA
   ========================================================================== */

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

.s4-conteudo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(10px, 1.6vh, 26px);
}

.s4-largura {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 40px);
}

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

.s4-tela {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 28px);
  text-align: center;
}

/* Modo atividade: durante a dinamica o cabecalho principal fica oculto */
.s4-modo-atividade .topo { display: none; }

.s4-revela { animation: s4-surgir 520ms cubic-bezier(0.22, 0.68, 0.24, 1) both; }
.s4-revela:nth-child(2) { animation-delay: 110ms; }
.s4-revela:nth-child(3) { animation-delay: 220ms; }
.s4-revela:nth-child(4) { animation-delay: 330ms; }
.s4-revela:nth-child(5) { animation-delay: 440ms; }
.s4-revela:nth-child(6) { animation-delay: 550ms; }

@keyframes s4-surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .s4-revela, .s4-momento, .s4-selo-final { animation: none !important; opacity: 1 !important; transform: none !important; }
  .s4-carrossel__imagem { transition: none; }
}

/* ==========================================================================
   2. TIPOGRAFIA
   ========================================================================== */

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

.s4-titulo {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: clamp(1.8rem, 2.2vw + 1.05rem, 3.2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--texto-forte);
}

.s4-frase {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--fonte-texto);
  font-size: clamp(1.9rem, 2.9vw + 1.1rem, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--texto-forte);
}

.s4-frase--media {
  max-width: 28ch;
  font-size: clamp(1.4rem, 1.7vw + 0.98rem, 2.6rem);
  line-height: 1.16;
}

.s4-frase--laranja { color: var(--cor-laranja); }
.s4-frase--marrom { color: var(--cor-marrom-medio); }

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

.s4-texto + .s4-texto { margin-top: 0.7em; }

.s4-apoio {
  font-family: var(--fonte-titulo);
  font-size: clamp(0.76rem, 0.26vw + 0.7rem, 0.94rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-apoio);
}

.s4-realce {
  padding: clamp(12px, 1.5vw, 24px) clamp(18px, 2.2vw, 36px);
  border-radius: var(--raio-pill);
  font-size: clamp(1rem, 0.7vw + 0.88rem, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
  box-shadow: var(--sombra-card);
}

.s4-caixa {
  width: 100%;
  padding: clamp(18px, 2.4vw, 38px);
  border-radius: var(--raio-card);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

/* ==========================================================================
   3. BARRA DE PROGRESSO E TIMER
   ========================================================================== */

.s4-barra {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 26px);
  flex-wrap: wrap;
}

.s4-contador {
  font-family: var(--fonte-titulo);
  font-size: clamp(0.82rem, 0.3vw + 0.74rem, 1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-apoio);
  white-space: nowrap;
}

.s4-progresso {
  width: min(520px, 42vw);
  height: 8px;
  border-radius: var(--raio-pill);
  background: var(--tint-marrom);
  overflow: hidden;
}

.s4-progresso__preenchimento {
  height: 100%;
  border-radius: var(--raio-pill);
  background: var(--cor-laranja);
  transition: width 360ms ease;
}

.s4-timer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--raio-pill);
  font-size: clamp(0.94rem, 0.32vw + 0.86rem, 1.12rem);
  font-weight: 700;
  color: var(--texto-forte);
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao), background-color var(--transicao);
}

.s4-timer svg { width: 20px; height: 20px; color: var(--cor-marrom-medio); }

.s4-timer[data-atencao="true"] {
  color: var(--cor-branco);
  background: var(--cor-marrom-medio);
}

.s4-timer[data-atencao="true"] svg { color: var(--cor-branco); }
.s4-timer[hidden] { display: none; }

/* ==========================================================================
   4. COMPOSICOES VISUAIS DAS ACOES
   ========================================================================== */

.s4-visual {
  --altura-visual: 30vh;
  display: grid;
  width: 100%;
  height: var(--altura-visual);
  flex: 0 0 auto;              /* nunca cresce nem encolhe no fluxo */
  place-items: center;
  overflow: hidden;            /* garantia: nada escapa da area da imagem */
  transition: height 340ms ease;
}

/* IMPORTANTE: os limites de altura sao sempre absolutos (vh), nunca em
   porcentagem. Porcentagem depende do calculo do navegador e foi o que
   fazia imagens grandes passarem por tras da pergunta e dos selos. */

.s4-visual img { display: block; }

/* --- imagem unica e carrossel --- */

.s4-imagem {
  max-width: 100%;
  max-height: var(--altura-visual);
  width: auto;
  height: auto;
  border-radius: var(--raio-card);
  object-fit: contain;         /* proporcao original preservada */
  box-shadow: var(--sombra-card);
}

.s4-carrossel {
  position: relative;
  display: grid;
  width: 100%;
  height: var(--altura-visual);
  place-items: center;
}

.s4-carrossel__palco {
  position: relative;
  display: grid;
  width: 100%;
  height: var(--altura-visual);
  place-items: center;
}

.s4-carrossel__imagem {
  position: absolute;
  max-width: 100%;
  max-height: var(--altura-visual);
  width: auto;
  height: auto;
  border-radius: var(--raio-card);
  object-fit: contain;
  opacity: 0;
  box-shadow: var(--sombra-card);
  transition: opacity 620ms ease;
}

.s4-carrossel__imagem[data-ativa="true"] { opacity: 1; }

.s4-carrossel__controle {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--texto-forte);
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  opacity: 0.85;
  transform: translateY(-50%);
  transition: opacity var(--transicao), transform var(--transicao);
}

.s4-carrossel__controle:hover { opacity: 1; }
.s4-carrossel__controle svg { width: 22px; height: 22px; }
.s4-carrossel__controle--anterior { left: 6px; }
.s4-carrossel__controle--proximo { right: 6px; }

.s4-carrossel__pontos {
  position: absolute;
  bottom: 6px;
  left: 50%;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.s4-carrossel__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tint-marrom);
  transition: background-color var(--transicao), width var(--transicao);
}

.s4-carrossel__ponto[data-ativa="true"] {
  width: 22px;
  border-radius: var(--raio-pill);
  background: var(--cor-laranja);
}

/* --- grade de logos: 3 x 2 --- */

.s4-logos {
  display: grid;
  width: 100%;
  height: var(--altura-visual);
  gap: clamp(10px, 1.4vw, 22px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.s4-logos__item {
  display: grid;
  place-items: center;
  padding: clamp(8px, 1vw, 16px);
  border-radius: var(--raio-caixa);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.s4-logos__item img {
  max-width: 100%;
  max-height: calc(var(--altura-visual) * 0.40);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- mosaico: 3 x 2, todos os boxes iguais --- */

.s4-mosaico {
  display: grid;
  width: 100%;
  height: var(--altura-visual);
  gap: clamp(8px, 0.9vw, 14px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.s4-mosaico__item {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: var(--raio-caixa);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.s4-mosaico__item img {
  max-width: 100%;
  max-height: calc(var(--altura-visual) * 0.38);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Voluntariado na TELA DE ESCOLHA: presenca semelhante nos seis boxes ---
   Os boxes, a grade 3 x 2, o raio, a sombra e o espacamento continuam
   exatamente os mesmos. O que muda e so a ocupacao da imagem DENTRO do box:
   todas passam a preencher integralmente a altura util e recebem um
   enquadramento proprio, porque os arquivos tem naturezas diferentes
   (foto, pecas graficas, peca vertical e logotipos).

   O corte e sempre leve e feito nas bordas, com object-position central:
   a assinatura "Acao do Coracao", a faixa de logos da Campanha do Agasalho,
   o texto do Arte na Lata, o nome das instituicoes na APAE e na Base Mirim e
   o topo e o rodape do cartaz da racao permanecem visiveis.
   Nenhuma imagem e distorcida, esticada ou ampliada em excesso. */

#visual-desafio .s4-mosaico__item img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* foto horizontal — corte discreto no topo e no rodape */
#visual-desafio .s4-mosaico__item[data-peca="voluntariado-acao-do-coracao.png"] img { aspect-ratio: 1.85; }
/* peca grafica horizontal — preserva o lettering e a faixa de logos */
#visual-desafio .s4-mosaico__item[data-peca="voluntariado-campanha-do-agasalho.png"] img { aspect-ratio: 1.44; }
/* peca com texto no topo e logo no rodape — corte minimo */
#visual-desafio .s4-mosaico__item[data-peca="voluntariado-arte-na-lata.jpg"] img { aspect-ratio: 1.21; }
/* logotipos com margem branca / fundo escuro — corte apenas na margem */
#visual-desafio .s4-mosaico__item[data-peca="voluntariado-logo-apae.webp"] img { aspect-ratio: 1.10; }
#visual-desafio .s4-mosaico__item[data-peca="voluntariado-logo-base-mirim.webp"] img { aspect-ratio: 1.11; }
/* peca vertical com informacao ate as bordas — praticamente sem corte */
#visual-desafio .s4-mosaico__item[data-peca="voluntariado-arrecadacao-de-racao.png"] img { aspect-ratio: 0.62; }

/* ==========================================================================
   5. SELOS DOS VALORES
   Efeitos apenas externos: contorno, sombra, escala e check.
   O interior do PNG nunca e alterado.
   ========================================================================== */

.s4-selos {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 1.3vw, 24px);
}

.s4-selo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border-radius: var(--raio-caixa);
  background: transparent;
  transition: transform 220ms ease, filter 220ms ease;
}

.s4-selo img {
  width: var(--tamanho-selo, clamp(74px, 7vw, 122px));
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: box-shadow 220ms ease;
}

.s4-selo__nome {
  max-width: 13ch;
  font-size: clamp(0.72rem, 0.24vw + 0.67rem, 0.88rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto-suave);
  transition: color var(--transicao);
}

.s4-selo:hover:not([disabled]) { transform: translateY(-3px); }

.s4-selo[aria-pressed="true"] { transform: translateY(-4px) scale(1.05); }

.s4-selo[aria-pressed="true"] img {
  box-shadow: 0 0 0 4px var(--cor-laranja), 0 12px 26px rgba(68, 13, 0, 0.20);
}

.s4-selo[aria-pressed="true"] .s4-selo__nome { color: var(--texto-forte); }

/* Check externo, fora da area do PNG */
.s4-selo__check {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--cor-fundo);
  border-radius: 50%;
  color: var(--cor-branco);
  background: var(--cor-laranja);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.s4-selo__check svg { width: 16px; height: 16px; }

.s4-selo[aria-pressed="true"] .s4-selo__check { opacity: 1; transform: scale(1); }

/* Selos apenas ilustrativos (abertura e descoberta final) */
.s4-selos--vitrine .s4-selo { pointer-events: none; }

.s4-selo-final { opacity: 0; animation: s4-surgir 520ms ease forwards; }

/* ==========================================================================
   6. MOMENTO 1 (DESAFIO) E MOMENTO 2 (DESCOBERTA)
   ========================================================================== */

.s4-momento[hidden] { display: none !important; }

.s4-momento {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 22px);
  animation: s4-abrir 360ms ease both;
}

@keyframes s4-abrir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.s4-pergunta {
  max-width: 30ch;
  margin: 0 auto;
  font-size: clamp(1.25rem, 1.15vw + 0.95rem, 2.1rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--texto-forte);
}

.s4-instrucao {
  max-width: 60ch;
  margin: 0 auto;
  font-size: clamp(0.94rem, 0.4vw + 0.86rem, 1.14rem);
  line-height: 1.45;
  color: var(--texto-suave);
}

.s4-acoes-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  flex-wrap: wrap;
}

.s4-aviso {
  min-height: 1.4em;
  font-size: clamp(0.94rem, 0.34vw + 0.86rem, 1.1rem);
  font-weight: 700;
  color: var(--cor-marrom-medio);
  opacity: 0;
  transition: opacity var(--transicao);
}

.s4-aviso[data-visivel="true"] { opacity: 1; }

/* --- Descoberta em duas colunas: cabe em uma tela --- */

.s4-descoberta {
  display: grid;
  width: 100%;
  gap: clamp(16px, 2vw, 34px);
  grid-template-columns: 1fr;
  align-items: start;
  text-align: left;
}

@media (min-width: 1100px) {
  .s4-descoberta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

.s4-descoberta__visual { width: 100%; }

/* --- Presenca das imagens na RESPOSTA/DESCOBERTA -------------------------
   Vale apenas para o momento da descoberta: as telas de escolha nao sao
   afetadas e a correcao que eliminou a sobreposicao continua intacta.
   A area da imagem continua com limite absoluto em vh e overflow: hidden,
   entao nada escapa nem passa por tras dos textos. */

.s4-descoberta__visual .s4-visual { --altura-visual: min(40vh, 460px); }

@media (min-width: 1100px) {
  .s4-descoberta__visual .s4-visual { --altura-visual: min(54vh, 600px); }

  /* Antes as imagens paravam no tamanho natural do arquivo — por isso as
     pecas menores ficavam pequenas demais. Agora ocupam a area disponivel,
     sempre contidas, na proporcao original e sem distorcao. */
  .s4-descoberta__visual .s4-imagem,
  .s4-descoberta__visual .s4-carrossel__imagem {
    width: 100%;
    height: auto;
  }
}

.s4-descoberta__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.1vh, 15px);
}

.s4-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s4-grupo__selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 0.9vw, 16px);
}

.s4-grupo__selos .s4-selo { --tamanho-selo: clamp(48px, 3.9vw, 68px); }
.s4-grupo__selos .s4-selo__nome { display: none; }

.s4-evidencia {
  padding: clamp(14px, 1.6vw, 24px);
  border-radius: var(--raio-caixa);
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

.s4-evidencia__titulo {
  margin: 0 0 10px;
  font-family: var(--fonte-titulo);
  font-size: clamp(0.76rem, 0.26vw + 0.7rem, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-apoio);
}

.s4-evidencia__destaque {
  font-size: clamp(1rem, 0.46vw + 0.9rem, 1.24rem);
  font-weight: 700;
  line-height: 1.32;
  color: var(--texto-forte);
}

.s4-evidencia__texto {
  margin-top: 6px;
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1.06rem);
  line-height: 1.5;
  color: var(--texto-suave);
}

.s4-dados { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 20px); }

.s4-dado {
  display: flex;
  flex: 1 1 130px;
  flex-direction: column;
  gap: 2px;
  padding: clamp(10px, 1.1vw, 16px);
  border-radius: var(--raio-caixa);
  background: var(--tint-marrom);
}

.s4-dado__rotulo {
  font-size: clamp(0.76rem, 0.26vw + 0.7rem, 0.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--texto-apoio);
}

.s4-dado__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.1rem, 0.6vw + 0.92rem, 1.44rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cor-marrom-medio);
  font-variant-numeric: tabular-nums;
}

.s4-dado--principal {
  background: var(--cor-laranja);
  box-shadow: var(--sombra-botao);
}

.s4-dado--principal .s4-dado__rotulo { color: rgba(255, 255, 255, 0.9); }

.s4-dado--principal .s4-dado__valor {
  font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
  color: var(--cor-branco);
}

.s4-lista { display: flex; flex-direction: column; gap: 7px; }

.s4-lista__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1.06rem);
  line-height: 1.42;
  color: var(--texto-suave);
}

.s4-lista__item svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--cor-laranja); }

.s4-mensagem {
  font-size: clamp(1.05rem, 0.6vw + 0.92rem, 1.36rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cor-marrom-medio);
}

/* Tipografia da descoberta: ajuste moderado e restrito ao titulo da acao,
   que era o texto que passou a dominar a composicao. Os textos de leitura —
   evidencia, mensagem e contextualizacao — ficam exatamente como estao,
   porque servem de apoio a fala dos Multiplicadores durante a Feira. */
#tela-acao[data-momento="descoberta"] .s4-titulo {
  font-size: clamp(1.55rem, 1.6vw + 0.95rem, 2.6rem);
}

.s4-contexto {
  padding: clamp(14px, 1.6vw, 24px);
  border-left: 4px solid var(--cor-laranja);
  border-radius: 0 var(--raio-caixa) var(--raio-caixa) 0;
  font-size: clamp(0.96rem, 0.36vw + 0.88rem, 1.14rem);
  line-height: 1.55;
  color: var(--texto-suave);
  background: var(--tint-laranja);
}

/* ==========================================================================
   7. BOTOES
   ========================================================================== */

.s4-botao {
  min-height: 60px;
  padding: 15px 34px;
  font-size: clamp(0.98rem, 0.36vw + 0.9rem, 1.18rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.s4-botao svg { width: 22px; height: 22px; }
.s4-botao[disabled] { opacity: 0.42; cursor: default; box-shadow: none; }
.s4-botao[disabled]:hover { filter: none; transform: none; box-shadow: none; }

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

.s4-botao-discreto:hover { color: var(--texto-forte); background: var(--tint-laranja); }
.s4-botao-discreto[hidden] { display: none; }

.s4-rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 26px);
  flex-wrap: wrap;
  padding-block: clamp(8px, 1.2vh, 18px);
}

/* ==========================================================================
   8. TELAS FINAIS
   ========================================================================== */

.s4-lista-vertical {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 12px);
}

.s4-lista-vertical li {
  font-size: clamp(1.15rem, 0.95vw + 0.95rem, 1.9rem);
  font-weight: 700;
  line-height: 1.24;
  color: var(--cor-marrom-medio);
  opacity: 0;
  animation: s4-surgir 520ms ease forwards;
}

.s4-lista-vertical li:nth-child(1) { animation-delay: 240ms; }
.s4-lista-vertical li:nth-child(2) { animation-delay: 480ms; }
.s4-lista-vertical li:nth-child(3) { animation-delay: 720ms; }
.s4-lista-vertical li:nth-child(4) { animation-delay: 960ms; }
.s4-lista-vertical li:nth-child(5) { animation-delay: 1200ms; }

/* ==========================================================================
   9. TELAS MENORES
   ========================================================================== */

@media (max-width: 900px) {
  .s4-visual { --altura-visual: 26vh; }
  .s4-logos { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .s4-logos__item img { max-height: calc(var(--altura-visual) * 0.26); }
  .s4-mosaico { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .s4-mosaico__item img { max-height: calc(var(--altura-visual) * 0.26); }
  .s4-progresso { width: min(320px, 60vw); }
  .s4-descoberta { text-align: center; }
  .s4-grupo__selos { justify-content: center; }
  .s4-contexto { text-align: left; }
}

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

.s4-navegacao {
  display: flex;
  width: 100%;
  max-width: 1560px;
  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);
}

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

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

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

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

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

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

/* ==========================================================================
   SAIDA DA ATIVIDADE — canto superior esquerdo da area da atividade,
   mesmo padrao usado nas atividades dos Stands 01 e 03.
   ========================================================================== */

.s4-saida {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: clamp(6px, 1vh, 14px);
}

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