/* ═══════════════════════════════════════════════════════════════════
   PowerUP — /explorar
   Só esta página carrega este arquivo.

   Direção: bancada de diagnóstico. Papel milimetrado, cantoneiras de
   instrumento, leituras em monoespaçada e títulos em Archivo aberto.
   A paleta é a mesma do resto do site — muda a régua, não a marca.
   ═══════════════════════════════════════════════════════════════════ */

.pagina-explorar {
  /* Tipografia própria desta página. Como as variáveis vêm do :root, redefinir
     aqui alcança também a nav e o rodapé — que é o que queremos. */
  /* O eixo de largura do Archivo foi abandonado em 27/08: medido, deixava o
     título 8,5% mais largo e custava 106 KB de fonte. Não vale. */
  --font-display: 'Archivo', 'DM Sans', sans-serif;
  --font-body: 'Archivo', 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --tinta: #041020;
  --carta: #06182e;          /* fundo dos quadros */
  --carta-alta: #0a2440;
  --linha: rgba(91,192,235,0.11);
  --linha-forte: rgba(91,192,235,0.34);
  --marca: rgba(91,192,235,0.40);   /* cantoneiras */
  --chanfro: 14px;

  background: var(--bg);
}

/* aba ativa na nav — a nav é um arquivo só, quem marca é a classe do body */
.pagina-explorar .nav-explorar { color: var(--accent); }

/* ─── PAPEL MILIMETRADO ────────────────────────────────────────────
   Quatro camadas em um elemento fixo: malha fina, malha grossa, brilho de
   cima e vinheta. O grão vem no ::after, em multiply, para não clarear. */
.folha {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(91,192,235,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,192,235,0.045) 1px, transparent 1px),
    linear-gradient(rgba(91,192,235,0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,192,235,0.075) 1px, transparent 1px),
    radial-gradient(90% 55% at 50% -10%, rgba(91,192,235,0.15), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 35%, rgba(2,12,27,0.92) 100%);
  background-size: 32px 32px, 32px 32px, 192px 192px, 192px 192px, 100% 100%, 100% 100%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
.folha::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ─── CANTONEIRAS ──────────────────────────────────────────────────
   Oito faixas de 1px desenhadas no ::after: quatro Ls, um em cada canto.
   Sem markup extra e sem clip-path, que comeria a borda na diagonal. */
.moldura { position: relative; }
.moldura::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--marca) 0 0), linear-gradient(var(--marca) 0 0),
    linear-gradient(var(--marca) 0 0), linear-gradient(var(--marca) 0 0),
    linear-gradient(var(--marca) 0 0), linear-gradient(var(--marca) 0 0),
    linear-gradient(var(--marca) 0 0), linear-gradient(var(--marca) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--chanfro) 1px, 1px var(--chanfro),
    var(--chanfro) 1px, 1px var(--chanfro),
    var(--chanfro) 1px, 1px var(--chanfro),
    var(--chanfro) 1px, 1px var(--chanfro);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  transition: opacity 0.35s ease;
}

/* ─── ETIQUETA DE SEÇÃO ─── */
.etiqueta-secao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.pisca {
  width: 6px; height: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  flex: none;
}

/* ─── CABEÇALHO ─── */
.cabecalho {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8.5rem 3rem 0;
}
.cabecalho-grade {
  display: grid;
  gap: 1.8rem 3rem;
  grid-template-columns: 1fr;
  align-items: end;
  margin-top: 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 900px) {
  .cabecalho-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

.titulo-gigante {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9.5vw, 6.4rem);
  font-weight: 800;
  line-height: 0.87;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin: 0;
}
/* A segunda linha é vazada. Sem suporte a text-stroke ela continua sólida em
   vez de sumir. */
.titulo-gigante em { font-style: normal; color: var(--accent); }
@supports (-webkit-text-stroke: 1px red) {
  .titulo-gigante em {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.22vw, 2px) var(--accent);
  }
}

.cabecalho-lado { display: flex; flex-direction: column; gap: 1.6rem; }
.lead {
  color: var(--text-muted);
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.85;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--linha-forte);
}

/* ─── SELETOR DE MODO ─── */
.seletor-modo {
  display: inline-flex;
  align-self: flex-start;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--linha);
  background: rgba(4,16,32,0.7);
}
.botao-modo {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  padding: 0.7rem 1.15rem;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.botao-modo:hover { color: var(--text-bright); background: rgba(91,192,235,0.06); }
.botao-modo[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent);
  font-weight: 600;
}

/* ─── BANCADA ─── */
.bancada {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 3rem 4rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}
/* Sem JS a coluna do visor sai inteira — e com ela a segunda coluna da grade,
   senão sobrava meia tela vazia ao lado do texto. */
.coluna-visor { display: none; }
.js .coluna-visor { display: block; }
@media (min-width: 1000px) {
  .js .bancada { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 2.5rem; }
  /* O visor acompanha a leitura: o texto rola, a máquina fica. */
  .js .coluna-visor { position: sticky; top: 6.5rem; }
}

/* ─── VISOR ────────────────────────────────────────────────────────
   Sem JS não existe tela nem portão, e a moldura vazia seria pior que
   nada: a coluna inteira sai e o painel ocupa a largura toda. */
.visor { display: none; }
.js .visor {
  display: block;
  background: linear-gradient(180deg, var(--carta) 0%, #030d1c 100%);
  border: 1px solid var(--linha);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,0.8);
}

.visor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--linha);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.visor-id { color: var(--text-muted); }
.visor-id::before { content: '▚ '; color: var(--accent); opacity: 0.6; }
.visor-leitura {
  color: var(--accent);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palco-explorar { display: none; }
.js .palco-explorar {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
@media (min-width: 1000px) {
  .js .palco-explorar {
    aspect-ratio: auto;
    height: clamp(430px, calc(100vh - 16rem), 620px);
  }
}

.tela3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* O OrbitControls precisa do gesto de um dedo para girar; fora da tela a
     página rola normalmente. */
  touch-action: none;
}

/* ─── PORTÃO ───────────────────────────────────────────────────────
   O 1,4 MB do modelo e os ~300 KB da biblioteca só saem daqui para o
   navegador depois deste ponto. O cartaz é um quadro do próprio modelo,
   gerado pelo three.js e salvo como imagem. */
.portao {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.portao[hidden] { display: none; }

.portao-arte { position: absolute; inset: 0; }
.portao-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.06) saturate(0.72);
}
/* Véu + linhas de varredura: o cartaz vira leitura de instrumento em vez de
   foto de banco de imagem. */
.portao::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(rgba(2,12,27,0.22) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, rgba(4,16,32,0.35) 0%, rgba(4,16,32,0.86) 58%, rgba(3,13,28,0.97) 100%);
}
.portao-conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.6rem 1.4rem 1.5rem;
  width: 100%;
}
.portao-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin: 0;
}
.portao-texto {
  margin: 0;
  max-width: 34ch;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.portao-aviso {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── BOTÕES DO PALCO ─── */
.botao-palco {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10,36,64,0.85);
  border: 1px solid var(--linha-forte);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.botao-palco:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--text-bright); }
.botao-palco[aria-pressed="true"] { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); }
.botao-palco:disabled { opacity: 0.5; cursor: default; }
.botao-palco[hidden] { display: none; }
.botao-palco.forte {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.75rem 1.3rem;
}
.botao-palco.forte:hover { background: var(--accent-bright); color: var(--bg); }

.palco-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem;
  border-top: 1px solid var(--linha);
  background: rgba(3,13,28,0.6);
}
.palco-controles[hidden] { display: none; }
.palco-dica {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.85;
}
@media (max-width: 520px) { .palco-dica { display: none; } }

/* ─── PAINEL ─── */
.painel { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.painel-modo { display: flex; flex-direction: column; gap: 1.2rem; }
/* Sem isto o `display: flex` acima ganha do [hidden] do navegador e o painel
   escondido continua na tela. */
.painel-modo[hidden] { display: none; }

/* ─── ÍNDICE DE PEÇAS ─── */
.indice { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.indice-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(6,24,46,0.75);
  border: 1px solid var(--linha);
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.indice-item b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  opacity: 0.5;
  transition: opacity 0.22s ease;
}
.indice-item:hover { color: var(--text-bright); border-color: var(--linha-forte); }
.indice-item:hover b { opacity: 0.9; }
.indice-item[aria-pressed="true"] {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.indice-item[aria-pressed="true"] b { opacity: 1; }
/* Sem JS o índice não leva a lugar nenhum: os sete blocos já estão abertos. */
.indice { display: none; }
.js .indice { display: flex; }

/* ─── QUADROS ─── */
.servico-bloco,
.fluxo {
  --marca: rgba(91,192,235,0.34);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: linear-gradient(180deg, var(--carta) 0%, #04122400 140%), var(--tinta);
  border: 1px solid var(--linha);
}
/* Com JS, um bloco por vez; sem JS, todos ficam — é o que o Google lê. */
.js .servico-bloco { display: none; }
.js .servico-bloco.ativo { display: flex; }

.bloco-topo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--linha);
}
.bloco-num {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}
.servico-etiqueta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.servico-bloco h2,
.fluxo-pergunta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-bright);
  margin: 0;
  text-wrap: balance;
}
.servico-bloco p { color: var(--text-muted); line-height: 1.85; margin: 0; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
}
.tags li {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(91,192,235,0.06);
  border: 1px solid var(--linha);
  padding: 0.26rem 0.55rem;
}
.tags li::before { content: '+ '; opacity: 0.5; }

/* ─── DIAGNÓSTICO GUIADO ─── */
.fluxo-trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 1em;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fluxo-trilha:not(:empty)::before { content: '›'; color: var(--accent); }
.fluxo-trilha i { font-style: normal; color: var(--accent); opacity: 0.6; }

.fluxo-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  counter-reset: opcao;
}
.fluxo-opcoes p { color: var(--text-muted); margin: 0; line-height: 1.8; }
.fluxo-opcoes a { color: var(--accent); }

.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  background: rgba(10,36,64,0.5);
  border: 1px solid var(--linha);
  border-left: 2px solid var(--linha-forte);
  padding: 0.85rem 2.2rem 0.85rem 0.9rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* A numeração é do CSS: o JS monta as opções sem saber quantas são. */
.opcao::before {
  counter-increment: opcao;
  content: counter(opcao, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.55;
  flex: none;
}
.opcao::after {
  content: '→';
  position: absolute;
  right: 0.9rem;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.opcao:hover {
  color: var(--text-bright);
  background: var(--accent-dim);
  border-color: var(--linha-forte);
  border-left-color: var(--accent);
}
.opcao:hover::before { opacity: 1; }
.opcao:hover::after { opacity: 1; transform: translateX(0); }

.previa {
  background: rgba(2,12,27,0.75);
  border: 1px dashed var(--linha-forte);
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text);
}
.previa b {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.63rem;
}

.fluxo-zap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  align-self: flex-start;
  background: var(--success);
  color: #04160b;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.3rem;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.fluxo-zap::after { content: '→'; }
.fluxo-zap:hover { filter: brightness(1.1); transform: translateX(3px); }

.fluxo-recomeco {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--linha-forte);
}
.fluxo-recomeco:hover { color: var(--accent); }

/* ─── SAÍDA ─── */
.explorar-saida {
  --marca: rgba(91,192,235,0.34);
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto 3rem;
  padding: 2rem 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background:
    repeating-linear-gradient(-45deg, rgba(91,192,235,0.035) 0 1px, transparent 1px 9px);
}
.saida-texto { display: flex; flex-direction: column; gap: 0.6rem; }
.saida-frase {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin: 0;
}
.explorar-saida .btn-primary {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── CRÉDITO DO MODELO ─── */
/* A licença CC-BY do modelo exige atribuição visível; é obrigação, não enfeite. */
.credito-modelo {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 3rem 3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 2;
  color: var(--text-muted);
  opacity: 0.75;
}
.credito-modelo span { color: var(--accent); margin-right: 0.4rem; }
.credito-modelo a { color: var(--accent); text-decoration: none; }
.credito-modelo a:hover { text-decoration: underline; }

/* ─── FOCO VISÍVEL ─── */
.pagina-explorar :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── TELAS ESTREITAS ─── */
@media (max-width: 768px) {
  .cabecalho { padding: 7rem 1.25rem 0; }
  .bancada { padding: 1.8rem 1.25rem 3rem; }
  .explorar-saida { padding: 1.6rem 1.25rem; margin-bottom: 2rem; }
  .explorar-saida .btn-primary { width: 100%; justify-content: center; }
  .credito-modelo { padding: 0 1.25rem 2.5rem; }
  .servico-bloco, .fluxo { padding: 1.2rem; }
  .lead { padding-left: 0.9rem; }
  .seletor-modo { width: 100%; }
  .botao-modo { flex: 1; padding: 0.7rem 0.5rem; font-size: 0.68rem; }
}
@media (max-width: 400px) {
  .cabecalho { padding: 6.5rem 1rem 0; }
  .bancada { padding: 1.5rem 1rem 2.5rem; }
  .explorar-saida, .credito-modelo { padding-left: 1rem; padding-right: 1rem; }
}

/* ─── MOVIMENTO ────────────────────────────────────────────────────
   Tudo o que se mexe mora aqui dentro. Quem pediu menos movimento no
   sistema recebe a página inteira parada, sem estado quebrado. */
/* Com o GSAP no ar, quem conduz a entrada e a troca de peça é o
   explorar.js: aqui só desligo o par em CSS para os dois não animarem a
   mesma coisa ao mesmo tempo. Sem GSAP, o bloco abaixo continua valendo. */
html.gsap .cabecalho,
html.gsap .coluna-visor,
html.gsap .painel,
html.gsap .explorar-saida,
html.gsap .servico-bloco.ativo,
html.gsap .servico-bloco.ativo > *,
html.gsap .opcao { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .pisca { animation: pulsar 2.6s ease-in-out infinite; }
  @keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

  /* Entrada da página: três tempos, de cima para baixo. */
  .cabecalho, .coluna-visor, .painel, .explorar-saida {
    animation: chegar 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .coluna-visor { animation-delay: 0.1s; }
  .painel { animation-delay: 0.18s; }
  .explorar-saida { animation-delay: 0.26s; }
  @keyframes chegar {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Troca de peça: o quadro é revelado de cima para baixo e o conteúdo sobe
     em cascata. Como o JS troca display, a animação recomeça a cada peça. */
  .js .servico-bloco.ativo { animation: revelar 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes revelar {
    from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(8px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  }
  .js .servico-bloco.ativo > * { animation: subir 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .js .servico-bloco.ativo > *:nth-child(2) { animation-delay: 0.06s; }
  .js .servico-bloco.ativo > *:nth-child(3) { animation-delay: 0.11s; }
  .js .servico-bloco.ativo > *:nth-child(4) { animation-delay: 0.16s; }
  @keyframes subir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  .opcao { animation: subir 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .opcao:nth-child(2) { animation-delay: 0.05s; }
  .opcao:nth-child(3) { animation-delay: 0.1s; }
  .opcao:nth-child(4) { animation-delay: 0.15s; }
  .opcao:nth-child(5) { animation-delay: 0.2s; }

  /* Varredura no cartaz enquanto o modelo não chegou. */
  .portao::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    height: 28%;
    background: linear-gradient(to bottom, transparent, rgba(91,192,235,0.13), transparent);
    animation: varrer 4.5s ease-in-out infinite;
  }
  @keyframes varrer {
    0%   { transform: translateY(-30%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(370%); opacity: 0; }
  }
}