/* ============================================================
   FEMU — base compartilhada pelas duas páginas.

   A paleta saiu do próprio feed do festival: azul noturno com estrelas e
   dourado. Regra do plano: manter a cara do festival, não inventar outra.

   Três decisões que sustentam o visual:
   1. Escala tipográfica extrema. Título grande de verdade, corpo pequeno.
   2. Assimetria. Quase nada é centralizado, quase nada é 3 colunas iguais.
   3. Grão por cima de tudo. Tira o plástico do gradiente.
   ============================================================ */

:root {
  --noite:        #061330;
  --noite-fundo:  #030c20;
  --noite-carta:  #0b1f47;
  --noite-borda:  rgba(217, 180, 91, .22);

  --ouro:         #d9b45b;
  --ouro-claro:   #f2dda3;
  --ouro-fosco:   #8d7133;

  --tinta:        #f2f6ff;
  --tinta-suave:  #9fb0d0;

  --zap:          #25d366;
  --zap-fundo:    #1eb356;

  --titulo: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --marca:  "Cinzel", Georgia, serif;
  --corpo:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --largura: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* sombras tintadas do próprio azul do fundo, nunca preto puro */
  --sombra-baixa: 0 12px 30px -14px rgba(2, 8, 24, .85);
  --sombra-alta:  0 34px 70px -28px rgba(2, 8, 24, .95);

  /* escala de camadas, pra não sair espalhando 9999 por aí */
  --z-fundo:  -2;
  --z-veu:    -1;
  --z-corpo:   1;
  --z-barra:  40;
  --z-grao:   50;
  --z-pular:  60;
}

*, *::before, *::after { box-sizing: border-box; }

/* sem isso, qualquer display: flex/grid de classe passa por cima do
   atributo hidden e o JS perde o controle do que aparece */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--noite-fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* grão por cima da página inteira. É o detalhe que mais tira cara de template */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grao);
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; height: auto; display: block; }

/* ---------- blindagem: nada de selecionar, copiar ou arrastar ----------
   Pedido do cliente. Vale dizer o que isso e e o que nao e: e um
   desestimulo, nao protecao. Quem abrir o codigo-fonte, desligar o JS ou
   der print continua levando tudo. Serve pra evitar o copia-e-cola
   distraido, so isso.

   O que NAO pode quebrar junto: leitor de tela continua lendo (isto e
   selecao, nao visibilidade), o foco por teclado segue funcionando e o
   botao do WhatsApp segue clicavel. Se algum dia entrar campo de
   formulario na pagina, ele precisa voltar a ser selecionavel — a regra
   de input/textarea abaixo ja deixa isso pronto. */
body {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
          user-select: text;
}

img { -webkit-user-drag: none; user-drag: none; }
a { color: var(--ouro-claro); }

/* foco visível em tudo que recebe teclado. Não é opcional. */
:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
  border-radius: 3px;
}

/* pular pro conteúdo — primeiro tab da página */
.pular {
  position: absolute;
  left: 50%;
  top: -100px;
  z-index: var(--z-pular);
  transform: translateX(-50%);
  background: var(--ouro-claro);
  color: #2a1f00;
  font-weight: 600;
  padding: .8rem 1.4rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .2s ease;
}

.pular:focus { top: 0; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 600;
  line-height: 1.02;
  margin: 0 0 .45em;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 8.5vw, 5.6rem); }
h2 { font-size: clamp(2rem, 5.6vw, 3.6rem); }
h3 { font-family: var(--corpo); font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; line-height: 1.35; }

p { margin: 0 0 1.15em; max-width: 62ch; text-wrap: pretty; }

/* ---------- estrutura ---------- */

.faixa {
  /* padding óptico: o de baixo é maior que o de cima de propósito */
  padding: clamp(4rem, 11vw, 9rem) var(--gutter) clamp(4.75rem, 12.5vw, 10.5rem);
  position: relative;
}

.faixa--clara { background: var(--noite); }
.faixa--carta { background: var(--noite-carta); }

/* sobe por cima do bloco anterior, criando camada em vez de empilhar plano */
.faixa--sobe {
  margin-top: clamp(-5.5rem, -6vw, -3rem);
  border-radius: 22px 22px 0 0;
  z-index: var(--z-corpo);
  box-shadow: var(--sombra-alta);
}

/* fundo ambiente atrás de seção que seria só texto no vazio */
.faixa--ambiente { isolation: isolate; overflow: hidden; }

.faixa__fundo {
  position: absolute;
  inset: 0;
  z-index: var(--z-fundo);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

.faixa--ambiente::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-veu);
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(3,12,32,.55), rgba(3,12,32,.93) 70%),
    linear-gradient(180deg, rgba(3,12,32,.9), rgba(3,12,32,.82));
}

.limite { max-width: var(--largura); margin-inline: auto; }

/* o grid assimétrico que carrega quase todos os blocos */
.duas {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 880px) {
  .duas { grid-template-columns: 1.05fr 1fr; }
  .duas--invertida > :first-child { order: 2; }
}

.espaco-topo { margin-top: clamp(3rem, 7vw, 5rem); }
.espaco-base { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* faixa de imagem de ponta a ponta, entre dois blocos */
.sangra { margin: 0; }

.sangra img {
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
}

/* ---------- rótulo de seção ---------- */

.chapeu {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--marca);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 1.5rem;
  max-width: none;
}

.chapeu::before {
  content: "";
  width: clamp(28px, 5vw, 56px);
  height: 1px;
  background: var(--ouro-fosco);
  flex: none;
}

.leve { color: var(--tinta-suave); }
.destaque { color: var(--ouro-claro); }
.grande { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.55; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: var(--z-fundo);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-veu);
  background:
    radial-gradient(120% 85% at 75% 15%, rgba(3,12,32,.15) 0%, rgba(3,12,32,.82) 62%, rgba(3,12,32,.98) 100%),
    linear-gradient(180deg, rgba(3,12,32,.85) 0%, rgba(3,12,32,.25) 35%, rgba(3,12,32,.99) 92%);
}

.hero__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.marca {
  font-family: var(--marca);
  font-size: clamp(.85rem, 2.2vw, 1rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.4;
  margin: 0;
  max-width: none;
}

.marca span { display: block; font-size: .62em; letter-spacing: .3em; color: var(--ouro); }

.selo {
  font-family: var(--marca);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  border: 1px solid var(--noite-borda);
  border-radius: 999px;
  padding: .5rem 1rem;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  margin: 0;
  max-width: none;
}

.hero__conteudo { align-self: end; width: 100%; }
.hero h1 { max-width: 15ch; }

.hero__dados {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.75rem 0 2.25rem;
  padding: 0;
  list-style: none;
  max-width: 640px;
}

.hero__dados li {
  font-size: .9rem;
  letter-spacing: .02em;
  border: 1px solid var(--noite-borda);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  background: rgba(6, 19, 48, .5);
  backdrop-filter: blur(8px);
}

.hero__rodape {
  align-self: end;
  margin: 3rem 0 0;
  max-width: none;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  display: flex;
  align-items: center;
  gap: .7rem;
}

.hero__rodape::before {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ouro), transparent);
  animation: descer 2.4s ease-in-out infinite;
}

@keyframes descer {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* ---------- botão ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: var(--zap);
  color: #04220f;
  font-family: var(--corpo);
  font-size: 1.02rem;
  font-weight: 650;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(30, 179, 86, .26);
  transition: transform .18s cubic-bezier(.2,.8,.3,1),
              box-shadow .18s ease,
              background-color .18s ease;
}

.botao:hover, .botao:focus-visible {
  background: var(--zap-fundo);
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(30, 179, 86, .38);
}

/* resposta física ao clique */
.botao:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 6px 18px rgba(30, 179, 86, .3);
  transition-duration: .06s;
}

.botao svg { width: 21px; height: 21px; fill: currentColor; flex: none; }

.botao__nota {
  display: block;
  margin-top: .95rem;
  font-size: .86rem;
  color: var(--tinta-suave);
}

/* ---------- linha secundaria da agenda (so na pagina de visitante) ----------
   Deliberadamente discreta: o botao principal e o WhatsApp. Aqui so ficam
   as duas rotas de calendario, cada uma dizendo a quem serve, porque o
   .ics sozinho falha no Android e Android e a maioria do publico. */

.agenda-linha {
  margin-top: .7rem;
  font-size: .82rem;
  color: var(--tinta-suave);
}

.agenda-linha a {
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.agenda-linha a:hover,
.agenda-linha a:focus-visible { color: var(--ouro-claro); }

.agenda-linha span { margin: 0 .3em; opacity: .5; }

/* ---------- lista numerada (no lugar dos 3 cards iguais) ---------- */

.numerada { list-style: none; padding: 0; margin: 0; }

.numerada li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--noite-borda);
}

.numerada li:last-child { border-bottom: 1px solid var(--noite-borda); }

.numerada .n {
  font-family: var(--titulo);
  font-size: 1.15rem;
  color: var(--ouro);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.numerada h3 { margin-bottom: .3rem; color: var(--tinta); }
.numerada p { margin: 0; color: var(--tinta-suave); font-size: .96rem; }

/* programação: coluna de horário com largura fixa, pra todo título
   começar na mesma linha vertical ("14h" e "15h30" têm larguras
   diferentes). Quem conduz em uma linha, quem é na outra. */
.numerada--agenda .n { width: 3.6rem; }
.numerada--agenda h3 { margin-bottom: .55rem; }
.numerada--agenda .por { color: var(--ouro-claro); }
.numerada--agenda .por b { font-weight: 600; }
.numerada--agenda .cred { font-size: .9rem; margin-top: .15rem; }

/* aviso no pé da programação: vale pra todos os itens, então fica fora
   da lista, com a mesma marcação dourada do resto da página */
.programacao__nota {
  margin: 2rem 0 0;
  padding: 1.1rem 1.35rem;
  border-left: 2px solid var(--ouro);
  background: rgba(217, 180, 91, .07);
  border-radius: 0 10px 10px 0;
  color: var(--tinta-suave);
  max-width: 62ch;
}

.programacao__nota b { display: block; color: var(--ouro-claro); font-weight: 600; margin-bottom: .2rem; }

/* ---------- preço ---------- */

.preco {
  font-family: var(--titulo);
  font-size: clamp(3.6rem, 13vw, 6.5rem);
  color: var(--ouro-claro);
  line-height: .9;
  margin: 0;
  letter-spacing: -.045em;
  max-width: none;
  font-variant-numeric: tabular-nums;
}

.preco sup {
  font-size: .3em;
  vertical-align: super;
  letter-spacing: .1em;
  color: var(--ouro);
}

.preco-nota { margin-top: .9rem; }

.inclui { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 460px; }

.inclui li {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--noite-borda);
  font-size: .98rem;
}

.inclui li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ouro);
  transform: translateY(-3px);
}

/* duas colunas pra lista que ocupa a largura toda, sem foto ao lado.
   Uma coluna só no celular, sempre.

   Aqui o item NAO e flex como no .inclui normal: em pergunta e resposta,
   flex jogava a pergunta em negrito numa coluna estreita e a resposta do
   lado, quebrando "Tem / estacionamento?" no meio. Em bloco, as duas
   fluem como uma frase so, que e como se le um FAQ. */
.inclui--duas { max-width: none; }

.inclui--duas li {
  display: block;
  position: relative;
  padding-left: 1.05rem;
}

.inclui--duas li::before {
  position: absolute;
  left: 0;
  top: 1.35rem;
  transform: none;
}

.inclui--duas b { color: var(--tinta); }

@media (min-width: 760px) {
  .inclui--duas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

/* moldura deslocada — o detalhe que quebra a foto retangular padrão */
.moldura { position: relative; }

.moldura img {
  border-radius: 4px;
  position: relative;
  z-index: var(--z-corpo);
  box-shadow: var(--sombra-baixa);
}

.moldura::before {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--ouro-fosco);
  border-radius: 4px;
}

.legenda {
  font-size: .82rem;
  color: var(--tinta-suave);
  margin: 1.1rem 0 0;
  letter-spacing: .01em;
}

/* ---------- esteira de confirmados ---------- */

.esteira {
  --duracao: 68s;
  overflow: hidden;
  padding: .35rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.esteira + .esteira { margin-top: .85rem; }

.esteira__trilho {
  display: flex;
  width: max-content;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: correr var(--duracao) linear infinite;
  will-change: transform;
}

.esteira--volta .esteira__trilho { animation-direction: reverse; }

/* A esteira NAO pausa no hover nem no foco. Foi decisao do cliente:
   a lista de confirmados e prova de que o evento esta cheio, e prova
   que trava no meio da tela deixa de ser prova. Se um dia voltar a
   pausar, e aqui que a regra some ou volta. */

@keyframes correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ficha {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .85rem 1.4rem;
  border: 1px solid var(--noite-borda);
  border-radius: 999px;
  background: rgba(11, 31, 71, .55);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.ficha b { font-weight: 600; font-size: .98rem; color: var(--tinta); }
.ficha span { font-size: .8rem; color: var(--tinta-suave); }

.ficha::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ouro);
  flex: none;
  transform: translateY(-2px);
}

/* ---------- confirmados em grade, por categoria (visitante) ---------- */

.confirmados {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.grupo__titulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  font-family: var(--marca);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ouro);
}

.grupo__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--noite-borda);
}

.grupo__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Na grade (ao contrário da esteira, que rola sozinha), a pílula não pode
   ser mais larga que a linha. O .ficha herda flex:none, que a trava no
   max-content: ela não encolhe, e o fim do texto — junto com o selo VIP,
   que é o último filho — sai pela direita e some no overflow-x:hidden do
   body. Medido em 20/09: "Marcia Krupzak · Massoterapia e produtos
   terapêuticos" ocupava 454px numa viewport de 375px, com o selo em 456px.
   O min-width:0 é o que realmente destrava, porque item de flex nasce com
   min-width:auto e não encolhe abaixo do min-content sem isso. */
.grupo__lista .ficha {
  white-space: normal;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.confirmados__mais {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--titulo);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic;
  color: var(--ouro-claro);
}

/* ---------- saiu na imprensa (visitante) ---------- */

.imprensa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.imprensa a {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: 100%;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--noite-borda);
  border-radius: 14px;
  background: rgba(3, 12, 32, .45);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}

.imprensa a:hover,
.imprensa a:focus-visible { border-color: var(--ouro); transform: translateY(-2px); }

.imprensa__veiculo {
  font-family: var(--marca);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
}

.imprensa__titulo {
  font-family: var(--titulo);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.3;
  color: var(--tinta);
}

.imprensa__rodape {
  margin-top: auto;
  font-size: .82rem;
  color: var(--tinta-suave);
}

.imprensa__trecho {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* o print da matéria: papel claro no meio do azul-noite, então ganha a
   moldura deslocada e um giro leve pra ler como recorte de jornal */
.imprensa-duas { align-items: start; }

.imprensa-print { margin: 14px 14px 0 0; }

.imprensa-print .legenda { margin-top: 1.6rem; }

/* foto da TV por cima do canto do print, girada pro lado oposto:
   jornal e televisão na mesma mesa */
.imprensa-tv {
  position: relative;
  z-index: 2;
  display: block;
  width: 64%;
  height: auto;
  margin: -14% -6px 0 auto;
  border: 5px solid var(--tinta);
  border-radius: 4px;
  box-shadow: var(--sombra-alta);
  transform: rotate(2.2deg);
}

@media (max-width: 560px) {
  .imprensa-tv { width: 80%; margin-top: -10%; }
}

.imprensa-print a { display: block; }

.imprensa-print .moldura img {
  width: 100%;
  height: auto;
  transform: rotate(-1.2deg);
  transition: transform .3s ease;
}

.imprensa-print .moldura:hover img,
.imprensa-print .moldura:focus-visible img { transform: rotate(0deg) scale(1.01); }

.imprensa__antes {
  margin: 1.5rem 0 0;
  font-size: .9rem;
  color: var(--tinta-suave);
}

.imprensa__antes a,
.hero__imprensa {
  color: var(--ouro-claro);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

.imprensa__seguir {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--ouro);
  text-decoration: none;
}

.imprensa__seguir svg { width: 1.2em; height: 1.2em; fill: currentColor; }

.imprensa__seguir:hover,
.imprensa__seguir:focus-visible { color: var(--ouro-claro); }

/* linha de imprensa no hero, logo abaixo das pílulas de data e lugar */
.hero__imprensa {
  display: block;
  width: fit-content;
  margin: -1rem 0 1.75rem;
  font-size: .88rem;
  text-decoration-color: rgba(242, 221, 163, .45);
}

.hero__imprensa::before {
  content: "";
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-right: .6em;
  vertical-align: .12em;
  background: var(--ouro);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .imprensa a { transition: none; }
  .imprensa a:hover, .imprensa a:focus-visible { transform: none; }
  .imprensa-print .moldura img,
  .imprensa-print .moldura:hover img { transition: none; transform: none; }
}

.grupo__lista .ficha.tem-vip {
  background: rgba(217, 180, 91, .12);
  box-shadow: 0 0 0 1px var(--ouro) inset;
}

@media (max-width: 560px) {
  .grupo__lista { gap: .55rem; }
  .grupo__lista .ficha { padding: .65rem 1.05rem; gap: .5rem; flex-wrap: wrap; }
}

/* ---------- retratos de quem atende ---------- */

/* A esteira de nomes prova QUANTOS são. Ela não responde "o que eu vou
   encontrar lá", que é a única pergunta que o visitante faz. Estes
   quatro cards respondem, e é por isso que eles vêm antes dela.

   Regra da foto: sempre alguém trabalhando — mão na carta, mesa de
   búzios, xícara virada. NUNCA multidão. Multidão é prova de movimento,
   e movimento é o argumento da página de expositor, não desta.

   Vertical 2:3 (600×900). Cada card gira entre várias fotos da mesma
   expositora — é o que tira a cara de catálogo parado. Fonte: IMAGENS
   PARA TRÁFEGO no Drive da Gisele, uma subpasta por expositora. */

.retratos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 2vw, 1.4rem);
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  list-style: none;
}

@media (min-width: 880px) {
  .retratos { grid-template-columns: repeat(4, 1fr); }
}

.retrato {
  position: relative;
  border: 1px solid var(--noite-borda);
  border-radius: 8px;
  overflow: hidden;
  background: var(--noite-carta);
  box-shadow: var(--sombra-baixa);
}

/* pilha: todas as fotos ocupam o mesmo lugar, só a "ativa" aparece */
.retrato__fotos {
  position: relative;
  aspect-ratio: 2 / 3;
}

.retrato__fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

/* SEM JS a primeira foto fica de pé do mesmo jeito. A troca é enfeite,
   nunca requisito: se o script não rodar, o card continua inteiro. */
.retrato__fotos img:first-child { opacity: 1; }

/* com JS no ar, quem manda é a classe */
.retrato__fotos.rodando img { opacity: 0; }
.retrato__fotos.rodando img.ativa { opacity: 1; }

/* zoom lento só na foto visível: é o que dá vida a foto parada.
   Recomeça a cada troca, porque a classe entra e sai. */
.retrato__fotos.rodando img.ativa { animation: respira 9s ease-out forwards; }

@keyframes respira {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* o nome senta por cima do pé da foto, com véu do próprio azul do fundo */
.retrato__nome {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 3.25rem .95rem 1rem;
  background: linear-gradient(180deg, rgba(3,12,32,0), rgba(3,12,32,.94) 58%);
}

.retrato__nome b {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--tinta);
}

.retrato__nome span {
  display: block;
  margin-top: .15rem;
  font-size: .79rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}

/* ---------- números da casa ---------- */

.numeros {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--noite-borda);
  margin-top: 3rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

.numeros div {
  padding: 2rem 1.25rem;
  border-bottom: 1px solid var(--noite-borda);
  border-right: 1px solid var(--noite-borda);
}

.numeros div:nth-child(2n) { border-right: 0; }

@media (min-width: 760px) {
  .numeros div { border-bottom: 0; }
  .numeros div:nth-child(2n) { border-right: 1px solid var(--noite-borda); }
  .numeros div:last-child { border-right: 0; }
}

.numeros strong {
  display: block;
  font-family: var(--titulo);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--ouro-claro);
  line-height: 1;
  letter-spacing: -.035em;
  margin-bottom: .5rem;
}

.numeros sup { font-size: .4em; vertical-align: super; }
.numeros span { font-size: .82rem; color: var(--tinta-suave); letter-spacing: .04em; }

/* ---------- citação grande ---------- */

.citacao {
  font-family: var(--titulo);
  font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 0 0 1.5rem;
  max-width: 20ch;
}

.citacao em { font-style: normal; color: var(--ouro-claro); }

/* ---------- prazo ---------- */

.prazo {
  border: 1px solid var(--noite-borda);
  border-radius: 6px;
  padding: clamp(2rem, 5vw, 3.25rem);
  max-width: 660px;
  background: linear-gradient(160deg, rgba(217,180,91,.09), rgba(3,12,32,.6) 60%);
  backdrop-filter: blur(3px);
  box-shadow: var(--sombra-alta);
}

.prazo p:last-child { margin-bottom: 0; }

.pendente {
  background: var(--ouro);
  color: #2a1f00;
  padding: .2rem .6rem;
  border-radius: 4px;
  font-weight: 600;
}

/* ---------- CTA final ---------- */

.fechamento {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: clamp(4.5rem, 12vw, 9rem) var(--gutter) clamp(5rem, 13vw, 10rem);
}

.fechamento__fundo {
  position: absolute;
  inset: 0;
  z-index: var(--z-fundo);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fechamento::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-veu);
  background: linear-gradient(180deg, rgba(3,12,32,.94), rgba(3,12,32,.86));
}

.fechamento .chapeu { justify-content: center; }
.fechamento p { margin-inline: auto; }
.fechamento h2 { max-width: 16ch; margin-inline: auto; }
.fechamento .botao { margin-top: 1.25rem; }

/* ---------- rodapé ---------- */

.rodape {
  background: var(--noite-fundo);
  border-top: 1px solid var(--noite-borda);
  padding: 3rem var(--gutter) 3.5rem;
  font-size: .85rem;
  color: var(--tinta-suave);
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .rodape { grid-template-columns: 1fr auto; align-items: end; }
  .rodape > :last-child { text-align: right; }
}

.rodape p { margin: 0; max-width: none; }
.rodape .marca { margin-bottom: .6rem; }

/* ---------- barra fixa no celular ---------- */

.barra-zap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-barra);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(3, 12, 32, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--noite-borda);
  display: none;
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}

.barra-zap.aparece { transform: translateY(0); }
.barra-zap .botao { width: 100%; justify-content: center; padding: .95rem 1rem; }

/* some enquanto o cartao VIP esta na tela: o botao levaria pro mesmo
   lugar que ja esta aberto, e ele cobriria o rodape do cartao bem na
   hora que a pessoa vai tirar o print. */
.barra-zap.vip-escondida { display: none; }

@media (max-width: 880px) {
  .barra-zap { display: block; }
  /* espaço pra barra fixa não tapar o fim do rodapé (privacidade e a
     linha de marca do Avatar®) quando a pessoa rola até o final */
  body:has(.barra-zap) .rodape {
    padding-bottom: calc(3.5rem + 5.5rem + env(safe-area-inset-bottom));
  }
}

/* ---------- entrada suave no scroll ---------- */

.surge {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}

.surge.visivel { opacity: 1; transform: none; }

/* entrada escalonada: os filhos entram em cascata, não todos de uma vez */
.escalona > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.escalona.visivel > * { opacity: 1; transform: none; }

/* ---------- Cliente VIP: link secundario do hero ----------
   O botao principal virou o cadastro (#vip). O WhatsApp continua
   existindo pra quem prefere, mas discreto — nao compete com o CTA
   que a campanha esta otimizando agora. */

.vip-secundario {
  display: inline-block;
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

.vip-secundario:hover, .vip-secundario:focus-visible { color: var(--ouro-claro); }

/* ---------- Cliente VIP: benefício ao lado do formulário ----------
   O QUANTO de cada oferta não vai pro ar (Gisele, 19/09). Como o número
   não pode ser dito, quem carrega a conversão é esta coluna de texto:
   ela explica o que a pessoa ganha, e fica colada no formulário porque
   motivo longe da ação obriga a pessoa a lembrar do que leu. No celular
   vira uma coluna só e o benefício vem PRIMEIRO (ordem do HTML). */

.vip-duas {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: left;
}

@media (min-width: 900px) {
  .vip-duas {
    grid-template-columns: 1fr minmax(380px, 440px);
    align-items: start;
  }
}

/* dentro das colunas o texto é alinhado à esquerda, não centralizado
   como o resto do bloco de fechamento */
.vip-duas p { margin-inline: 0; }
.vip-duas .chapeu { justify-content: flex-start; }

.vip-ganha__lista {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}

.vip-ganha__lista li {
  border-left: 2px solid var(--ouro);
  padding-left: 1.1rem;
}

.vip-ganha__lista b {
  display: block;
  font-family: var(--titulo);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  margin-bottom: .3rem;
}

.vip-ganha__lista span {
  display: block;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* aqui o selo é citação dentro da frase — exemplo do que procurar na
   grade, não um selo marcando alguém */
.vip-ganha__lista .selo-vip {
  display: inline-block;
  margin: 0 .1rem;
}

.vip-ganha__nota {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--noite-borda);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ---------- aviso do selo, na secao de quem atende ---------- */

.vip-aviso-selo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  font-size: .9rem;
  color: var(--tinta-suave);
  max-width: var(--largura);
}

.vip-aviso-selo a { color: var(--ouro-claro); }

/* ---------- selo de quem tem oferta VIP ----------
   O JS poe este selo no card e na ficha de quem esta na planilha. E
   sinalizacao, e so isso: o que a oferta E nao aparece em lugar nenhum
   da pagina (Gisele, 19/09). O selo diz que existe, o estande diz qual. */

.selo-vip {
  font-family: var(--marca);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1200;
  background: var(--ouro);
  border-radius: 999px;
  padding: .2rem .5rem;
  line-height: 1.4;
  flex: none;
}

/* no card vertical o selo senta no canto de cima, por cima da foto */
.retrato .selo-vip {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: var(--z-corpo);
  box-shadow: var(--sombra-baixa);
}

/* na pilula da esteira ele entra no fim, depois do nome */
.ficha .selo-vip {
  margin-left: .1rem;
  align-self: center;
  font-size: .62rem;
  color: #1a1200;
}

/* borda dourada cheia separa quem tem oferta de quem so esta confirmado */
.retrato.tem-vip { border-color: var(--ouro); }
.ficha.tem-vip { border-color: var(--ouro); }

/* ---------- Cliente VIP: os 3 passos ---------- */

.vip-passos {
  list-style: none;
  margin: 1.75rem auto 2.25rem;
  padding: 0;
  display: grid;
  gap: .9rem;
  max-width: 460px;
  text-align: left;
}

.vip-passos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: .95rem;
  color: var(--tinta-suave);
}

.vip-passos b {
  font-family: var(--titulo);
  color: var(--ouro);
  font-size: 1.05rem;
}

/* ---------- Cliente VIP: formulario de cadastro ----------
   Campo minimo, so o que o plano pede. Erro aparece em texto do lado
   do campo, nunca so por cor — quem usa leitor de tela ou enxerga mal
   depende da palavra, nao da borda dourada. */

.vip-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.vip-campo { margin-bottom: 1.4rem; }

.vip-campo label {
  display: block;
  margin-bottom: .5rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}

.vip-campo input[type="text"],
.vip-campo input[type="tel"] {
  width: 100%;
  background: rgba(3, 12, 32, .55);
  border: 1px solid var(--noite-borda);
  border-radius: 6px;
  padding: .85rem 1rem;
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1rem;
}

.vip-campo input::placeholder { color: var(--tinta-suave); opacity: .55; }

.vip-campo input[aria-invalid="true"] { border-color: var(--ouro); }

.vip-campo-erro {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--ouro-claro);
}

.vip-dias {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vip-dias label {
  position: relative;
  display: inline-block;
  border: 1px solid var(--noite-borda);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-size: .88rem;
  cursor: pointer;
  color: var(--tinta-suave);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.vip-dias input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* :has() cobre os navegadores atuais; o JS troca a mesma classe pros
   raros que ainda nao tem, entao o estado nunca fica so no CSS. */
.vip-dias label:has(input:checked),
.vip-dias label.selecionada {
  border-color: var(--ouro);
  background: rgba(217, 180, 91, .12);
  color: var(--ouro-claro);
}

.vip-dias input:focus-visible + span {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
  border-radius: 3px;
}

.vip-aceite {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .85rem;
  color: var(--tinta-suave);
}

.vip-aceite input {
  margin-top: .2rem;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--ouro);
}

/* honeypot: existe pro robo preencher, nao pra gente ver.
   display:none e alguns leitores de tela ignoram junto — por isso
   escondido por posicao, e nao por display. */
.vip-armadilha {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vip-dados {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--noite-borda);
  font-size: .85rem;
  color: var(--tinta-suave);
}

.vip-dados summary {
  cursor: pointer;
  color: var(--ouro-claro);
  font-weight: 600;
}

.vip-dados p { margin: .8rem 0 0; max-width: none; }

.vip-erro {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--noite-borda);
  border-radius: 6px;
  background: rgba(217, 180, 91, .08);
  font-size: .9rem;
  color: var(--tinta);
}

.vip-erro p { margin: 0 0 .5rem; max-width: none; }
.vip-erro p:last-child { margin-bottom: 0; }
.vip-erro a { color: var(--ouro-claro); }

.botao[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ---------- Cliente VIP: o cartao ----------
   Mesmo visual do boton fisico que a pessoa ganha na entrada: circulo
   escuro com borda dourada. Precisa caber inteiro numa tela de 360px
   sem rolar — e daqui que sai o print — por isso o espacamento aqui e
   mais apertado que o resto do site. */

.vip-cartao {
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}

.vip-cartao__selo {
  width: clamp(148px, 40vw, 188px);
  aspect-ratio: 1;
  margin: 0 auto .9rem;
  border-radius: 50%;
  border: 3px solid var(--ouro);
  background: var(--noite-carta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-alta);
}

.vip-cartao__topo,
.vip-cartao__rodape {
  font-family: var(--marca);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin: 0;
  max-width: none;
}

.vip-cartao__vip {
  font-family: var(--titulo);
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  line-height: 1;
  color: var(--tinta);
  margin: .25rem 0;
  letter-spacing: .04em;
}

.vip-cartao__nome {
  font-family: var(--titulo);
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  color: var(--tinta);
  margin: 0 0 .1rem;
  max-width: none;
}

.vip-cartao__numero {
  font-family: var(--marca);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--ouro);
  margin: 0 0 .85rem;
  max-width: none;
}

.vip-cartao__info {
  font-size: .8rem;
  color: var(--tinta-suave);
  margin: 0 0 .45rem;
  max-width: none;
}

.vip-cartao__instrucao {
  font-size: .9rem;
  color: var(--ouro-claro);
  margin: 0 0 .35rem;
  max-width: none;
}

.vip-cartao__entrada {
  font-size: .78rem;
  color: var(--tinta-suave);
  margin: 0 0 1rem;
  max-width: none;
}

.vip-cartao__print {
  font-size: .78rem;
  color: var(--tinta-suave);
  margin: .55rem 0 0;
  max-width: none;
}

.vip-cartao__outra {
  margin-top: .9rem;
  font-size: .85rem;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .barra-zap, .pular { transition: none; }
  .botao:hover, .botao:active { transform: none; }
  .esteira__trilho, .hero__rodape::before { animation: none; }
  .esteira__trilho { transform: none; }
  .esteira {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
  }
  .surge, .escalona > * { opacity: 1; transform: none; transition: none; }
  /* a foto continua trocando (e informacao, nao enfeite), mas sem o zoom */
  .retrato__fotos.rodando img.ativa { animation: none; transform: none; }
}