/* ==========================================================================
   COMPOSIÇÃO DA PÁGINA
   --------------------------------------------------------------------------
   Este arquivo NÃO altera o design system. Ele só organiza a página:
   ritmo entre dobras, cabeçalho, hero, galeria, mapa e rodapé.
   Todo valor vem dos tokens. Componentes vêm de components.css e patterns.css,
   carregados antes deste arquivo e intocados.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RITMO DA PÁGINA
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}

.section--tight {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.section--raised {
  background: var(--bg-raised);
  border-block: 1px solid var(--border-subtle);
}

.section--flush-top {
  padding-top: 0;
}

/* .section-head é flex-column sem align-items: o badge herdava stretch e
   esticava por toda a largura da coluna. Em .context__text, que não é flex,
   ele já saía na medida certa — é esse o comportamento correto. */
.section-head > .badge {
  align-self: flex-start;
}

.section-head--center > .badge {
  align-self: center;
}

/* --------------------------------------------------------------------------
   PULAR PARA O CONTEÚDO
   Fora da tela até receber foco. Não usa .sr-only porque .btn sobrescreveria
   as medidas de 1px.
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--action-gradient);
  color: var(--text-on-action);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  box-shadow: var(--glow-magenta), var(--sheen);
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
  color: var(--text-on-action);
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--action-gradient);
  box-shadow: var(--glow-magenta-soft), var(--sheen);
  color: #fff;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--text-hi);
}

.brand__sub {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-low);
}

/* A barra atravessa a tela inteira, mas o conteúdo dela segue a mesma coluna
   do hero e das dobras. Antes a marca colava na borda enquanto o texto do
   hero começava 113px adentro. */
.topbar { padding-inline: 0; }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Só ganha sombra depois que a página sai do topo. */
.topbar.is-scrolled {
  box-shadow: var(--shadow-3);
  border-bottom-color: var(--border-strong);
}

@media (max-width: 860px) {
  .brand__sub { display: none; }
  .brand__name { font-size: var(--fs-xs); }

  /* No celular a barra inferior fixa já carrega o CTA. Repetir aqui
     custaria um terço da tela logo na chegada. */
  /* Com o trilho fora, o CTA persistente passa a ser o da barra. Ele e a
     marca cabem numa linha; o contador não — e o rodapé já traz um grande.
     Duas linhas de barra fixa custariam um terço da tela na chegada. */
  .topbar { padding: var(--space-2) 0; }
  .topbar__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }
  .topbar__right { width: auto; }
  .topbar .countdown { display: none; }
}

/* ==========================================================================
   HERO
   O fundo é uma fotografia de ambiente empresarial. Entra como background de
   .hero__aurora porque universe.js já move esse elemento junto com o campo de
   estrelas — assim foto, estrelas, brilho e texto respondem ao mesmo cursor,
   com a mesma suavização, sem duplicar lógica e sem tocar no design system.
   ========================================================================== */

.hero--foto {
  border-radius: 0;
  min-height: min(50rem, 100vh);
  background: var(--bg-void);
}

/* Camada 1 — a cena. O background é o quadro parado (fallback e poster);
   o vídeo, quando carrega, cobre por cima. */
.hero--foto .hero__aurora {
  inset: -4%;
  background-image: url("../img/hero-orbita.webp");
  background-size: cover;
  background-position: 64% 50%;
  filter: none;
  opacity: 1;
  scale: 1.08;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out);
}

/* Só aparece depois que há quadro de verdade, senão pisca preto na entrada. */
.hero__video.is-playing {
  opacity: 1;
}

/* Camada 2 — tinta de marca sobre a foto, para ela conversar com a paleta. */
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 78% 40%, rgba(130, 87, 230, 0.34), transparent 70%),
    radial-gradient(50% 70% at 96% 78%, rgba(52, 216, 245, 0.18), transparent 70%);
  mix-blend-mode: screen;
}

/* Camada 3 — brilho que acompanha o cursor. Posição vem de lp.js. */
.hero__spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    24rem 24rem at var(--spot-x, 70%) var(--spot-y, 45%),
    rgba(232, 56, 240, 0.18),
    rgba(52, 216, 245, 0.07) 45%,
    transparent 70%
  );
  mix-blend-mode: screen;
}

/* Camada 4 — véu de leitura, denso onde fica o texto. */
.hero--foto .hero__veil {
  background:
    linear-gradient(100deg, var(--bg-void) 2%, rgba(7, 3, 18, 0.94) 30%, rgba(7, 3, 18, 0.55) 62%, rgba(7, 3, 18, 0.3) 100%),
    linear-gradient(180deg, rgba(7, 3, 18, 0.75) 0%, transparent 24%, transparent 62%, var(--bg-base) 100%);
}

/* O bloco do hero segue a mesma coluna das outras dobras: largura de
   container, centralizado. Antes ele colava na borda da tela. */
.hero--foto .hero__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
  min-width: 0;
}

.hero__copy {
  /* 46rem porque "além do Universo" precisa caber numa linha só a 76px.
     Em 38rem o balanceamento quebrava o título em três linhas. */
  max-width: 46rem;
  transform: perspective(1000px)
    rotateY(calc(var(--tilt-x, 0) * 1.4deg))
    rotateX(calc(var(--tilt-y, 0) * -0.9deg));
  transform-style: preserve-3d;
}

/* A entrada escalonada do design system mira .hero__inner > *. Como o
   conteúdo agora vive dentro de .hero__copy, ela é reposta aqui. */
.hero__copy > * {
  animation: hero-in var(--dur-slower) var(--ease-out) both;
}
.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 140ms; }
.hero__copy > *:nth-child(3) { animation-delay: 220ms; }
.hero__copy > *:nth-child(4) { animation-delay: 300ms; }
.hero__copy > *:nth-child(5) { animation-delay: 380ms; }
.hero__copy > *:nth-child(6) { animation-delay: 460ms; }
.hero__copy > *:nth-child(7) { animation-delay: 540ms; }

/* Título em duas linhas: "Conexões" em cima, "além do Universo" embaixo.
   text-wrap:balance da biblioteca reequilibrava e jogava para três linhas —
   aqui a quebra é decidida, não calculada. */
.hero__title {
  text-wrap: normal;
}

.hero__title-l1,
.hero__title em {
  display: block;
}

.hero__title em {
  white-space: nowrap;
}

/* A linha travada precisa caber na tela estreita: a escala da biblioteca
   trava em 2.5rem e "além do Universo" estourava 14px num iPhone de 375. */
@media (max-width: 560px) {
  .hero__title {
    font-size: clamp(1.85rem, 8.9vw, 2.4rem);
  }
}

/* Subtítulo em duas linhas (a biblioteca limita em 34rem, que dava três). */
.hero__sub {
  max-width: 41rem;
}

/* O texto do olho é longo; em tela estreita quebra em vez de forçar a linha.
   Vale só aqui, não no componente .badge. */
.hero__eyebrow {
  white-space: normal;
  text-align: left;
}

/* Caixa de data e local, no espírito da peça do evento. */
.hero--foto .hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  /* Data e local são a informação que o convidado procura primeiro: entram
     um degrau acima do corpo de texto. A caixa sobe junto — fonte maior em
     contorno antigo fica apertada. */
  font-size: clamp(var(--fs-lg), 1.4vw, var(--fs-xl));
  padding: var(--space-5) var(--space-8);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: rgba(7, 3, 18, 0.5);
  backdrop-filter: blur(6px);
}

.hero--foto .hero__meta-item + .hero__meta-item {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border);
}

.hero__moments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-mid);
}

.hero__moments span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__moments span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--magenta-400);
}

/* Selo com a informação da peça: natureza do convite e assinatura. */
.hero__seal {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.hero__seal-lines {
  display: flex;
  /* Lado a lado: são duas condições do convite, não uma lista. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-mid);
}

.hero__seal-lines span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__seal-lines .icon {
  color: var(--cyan-400);
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------------------------------------------------------------
   ASSINATURA DO HERO
   Fica sobre o planeta, do lado denso da imagem, e entra depois — como quem
   assina a peça no fim. Aparece uma vez só: o vídeo roda em loop, e uma
   assinatura que reaparece a cada volta vira piscada.
   -------------------------------------------------------------------------- */

.hero__signature {
  position: absolute;
  z-index: 3;
  /* Mais para dentro: encostada na borda ela lia como canto, não como
     assinatura da peça. */
  right: clamp(var(--space-8), 8vw, var(--space-20));
  /* Centro vertical, não rodapé do hero: embaixo ela batia no botão
     flutuante do WhatsApp e, em tela de 720px, caía abaixo da dobra. */
  top: 50%;
  display: flex;
  flex-direction: column;
  /* Rótulo centralizado sobre o logo, sem caixa. A moldura com vidro e borda
     competia com a caixa de data e local do outro lado do hero. */
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(-50%);
  animation: assinar 900ms var(--ease-out) 3.4s forwards;
}

.hero__signature-label {
  font-size: clamp(var(--fs-base), 1.3vw, var(--fs-lg));
  color: var(--text-hi);
  /* Sem a caixa por trás, o texto encosta no vídeo: a sombra o segura quando
     o planeta passa numa parte clara. Sombra, não moldura. */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

/* Vetor: nítido em qualquer densidade. Mesma sombra do rótulo, pela mesma
   razão — o logo passou a apoiar direto no vídeo. */
.hero__signature img {
  display: block;
  /* Acompanha a largura da tela: em 1440 chega aos 340px do desenho, e
     encolhe antes de chegar perto da coluna de texto do hero. */
  width: clamp(180px, 24vw, 340px);
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
}

/* O deslocamento de entrada soma ao -50% da centralização; sem isso a
   assinatura pularia para o lugar certo no fim da animação. */
@keyframes assinar {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 12px));
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

/* No fluxo não há -50% para compensar: a entrada é só o deslocamento. Dois
   conjuntos de quadros em vez de redefinir "assinar" dentro da media query,
   que é legal mas esconde o que está acontecendo. */
@keyframes assinar-fluxo {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* O atraso de 3,4s não é afetado pelo token de duração; sem isto, quem pediu
   menos movimento esperaria a assinatura aparecer do mesmo jeito. */
@media (prefers-reduced-motion: reduce) {
  .hero__signature {
    animation: none;
    opacity: 1;
  }
}

/* A assinatura sai do canto e entra no fluxo em 1080px, não em 900: entre
   900 e 1000 ela já encostava no texto do hero, que tem 46rem de largura.
   Subiu de 1080 para 1150 quando o logo passou de 170 para até 340px. Aqui
   não há "lado denso" da imagem sobrando para ela flutuar. */
@media (max-width: 1150px) {
  .hero__signature {
    position: static;
    align-items: flex-start;
    width: fit-content;
    margin-top: var(--space-8);
    margin-inline: var(--space-6);
    transform: none;
    animation-name: assinar-fluxo;
  }
  .hero__signature img { width: 190px; }
}

@media (max-width: 900px) {
  .hero--foto { min-height: auto; }
  .hero--foto .hero__aurora { background-position: 70% 38%; }
  .hero--foto .hero__veil {
    background:
      linear-gradient(180deg, rgba(7, 3, 18, 0.72) 0%, rgba(7, 3, 18, 0.5) 28%, rgba(7, 3, 18, 0.92) 68%, var(--bg-base) 100%);
  }
  .hero__copy { transform: none; }
  .hero--foto .hero__meta { width: 100%; }

}

@media (max-width: 560px) {
  .hero--foto .hero__meta { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero--foto .hero__meta-item + .hero__meta-item { padding-left: 0; border-left: 0; }
  .hero__seal { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .hero__seal-by { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   CONTEXTUALIZAÇÃO
   -------------------------------------------------------------------------- */

/* O título saiu da coluna da esquerda e virou cabeçalho da dobra inteira:
   antes ele ocupava meia largura e deixava o canto superior direito vazio.
   Agora as duas colunas começam na mesma linha. */
#evento > .container > .section-head {
  max-width: 52rem;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.context {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}

.context__text > * + * {
  margin-top: var(--space-5);
}

/* Degrau suave entre o parágrafo de abertura e o de apoio. Antes a queda era
   de 22px para 16px e o segundo bloco parecia nota de rodapé. */
.context__body {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

.context__lead {
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
  line-height: var(--lh-relaxed);
  color: var(--text);
  text-wrap: pretty;
}

.context__moments {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.moment {
  position: relative;
  display: flex;
  gap: var(--space-5);
  padding-left: var(--space-2);
}

.moment::before {
  content: "";
  position: absolute;
  left: calc(1.5rem + var(--space-2));
  top: 3.25rem;
  bottom: -1rem;
  width: 1px;
  background: linear-gradient(180deg, var(--border-strong), transparent);
}

.moment:last-child::before { display: none; }

.moment__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--cyan-300);
}

.moment__body { padding-top: var(--space-1); }

.moment__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  line-height: var(--lh-snug);
}

.moment__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .context { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   CARTÃO DE LOCAL
   -------------------------------------------------------------------------- */

.venue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface-glass);
}

.venue__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.venue__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-low);
}

.venue__label .icon { color: var(--magenta-400); }

.venue__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  line-height: var(--lh-snug);
}

.venue__detail {
  font-size: var(--fs-xs);
  color: var(--text-mid);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   COMO CHEGAR
   -------------------------------------------------------------------------- */

.map {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface-glass);
}

.map__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}

.map__address {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
}

.map__address strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text-hi);
  margin-bottom: var(--space-1);
}

.map__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.map__step {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
}

.map__step .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--cyan-400);
}

.map__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.map__frame {
  position: relative;
  min-height: 26rem;
  background: var(--bg-sunken);
}

/* Leaflet com tiles escuros do CARTO. Tentamos antes um iframe do
   OpenStreetMap com filtro de inversão: o filtro não se aplica ao conteúdo
   de um iframe de outro domínio, e o mapa saía claro no meio da página
   escura. Tile escuro de verdade resolve e ainda deixa marcar os dois pontos. */
.map__canvas {
  position: absolute;
  inset: 0;
  background: var(--bg-sunken);
}

/* Tinta de marca por cima dos tiles, sem cobrir marcadores nem controles. */
.map__canvas .leaflet-tile-pane {
  filter: saturate(0.9);
}

.map__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(130, 87, 230, 0.18), rgba(52, 216, 245, 0.08));
  mix-blend-mode: overlay;
}

/* Controles e atribuição no tom da página */
.map__canvas .leaflet-control-zoom a {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.map__canvas .leaflet-control-zoom a:hover {
  background: var(--surface-3);
  color: var(--text-hi);
}

.map__canvas .leaflet-control-attribution {
  background: rgba(7, 3, 18, 0.72);
  color: var(--text-low);
  font-size: 10px;
}

.map__canvas .leaflet-control-attribution a {
  color: var(--text-mid);
}

/* Marcadores próprios, no lugar do pino azul padrão do Leaflet */
.pin {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transform: translate(-0.5rem, -50%);
  white-space: nowrap;
}

.pin__dot {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--bg-void);
}

.pin__label {
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-xs);
  background: rgba(7, 3, 18, 0.82);
  border: 1px solid var(--border-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
}

.pin--destino .pin__dot {
  background: var(--magenta-400);
  box-shadow: 0 0 0 4px rgba(232, 56, 240, 0.28), var(--glow-magenta-soft);
}

.pin--destino .pin__label {
  border-color: var(--border-magenta);
}

.pin--origem .pin__dot {
  background: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(52, 216, 245, 0.22);
}

@media (max-width: 860px) {
  .map { grid-template-columns: 1fr; }
  .map__frame { min-height: 18rem; order: -1; }
}

/* --------------------------------------------------------------------------
   PARTICIPANTES — prova social
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   TRILHO LATERAL
   --------------------------------------------------------------------------
   Duas correções em relação ao padrão da biblioteca, decididas para esta
   página: o cartão fica sempre aberto (um CTA escondido atrás de hover não
   serve ao único objetivo da página) e só entra depois que o hero sai da
   tela, para não competir com o CTA principal.
   -------------------------------------------------------------------------- */

.rail {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(1.5rem);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.rail.is-docked {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s;
}

/* Sem aba: o cartão já está aberto. */
.rail__tab { display: none; }

.rail .rail__card {
  transform: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* No celular o trilho virava uma barra fixa que comia a base da tela e
   repetia um CTA que a barra do topo já carrega. Sai; o CTA do topo volta. */
@media (max-width: 860px) {
  .rail { display: none; }
  .topbar__right > .btn { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

.footer {
  padding-top: clamp(var(--space-16), 8vw, var(--space-24));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
  background: var(--bg-void);
  border-top: 1px solid var(--border);
}

.footer__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-16));
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-8), 5vw, var(--space-16));
}

.footer__about {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  max-width: 32rem;
}

.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--space-4);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-mid);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__link:hover { color: var(--text-hi); }
.footer__link .icon { color: var(--text-low); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-2xs);
  color: var(--text-low);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  /* Espaço para o botão flutuante do WhatsApp não cobrir a assinatura. */
  .footer { padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   DOBRA DO SYNC
   Cabeçalho no mesmo desenho do syncfiscal.com.br: logo, promessa e apoio.
   O destaque do site é verde; aqui usa o gradiente da própria LP, porque o
   verde não existe na paleta desta página.
   -------------------------------------------------------------------------- */

.sync-head__logo {
  display: block;
  width: clamp(8rem, 12vw, 10.5rem);
  height: auto;
  margin-bottom: var(--space-2);
}

.sync-head .section-head__title {
  max-width: 34rem;
}

.sync-head .section-head__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan-300) 0%, var(--magenta-300) 58%, var(--violet-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sync-head .section-head__sub strong {
  color: var(--text-hi);
  font-weight: var(--fw-semibold);
}

/* Linha de números: apoio do subtítulo, acima dos benefícios. Só contador e
   rótulo — o <p> que Render.stat emite fica vazio e sai de cena. */
.features--numeros {
  margin-block: clamp(var(--space-8), 4vw, var(--space-10))
                clamp(var(--space-10), 5vw, var(--space-12));
}

.features--numeros .feature__text {
  display: none;
}

/* Sem card: os números não são conteúdo clicável nem bloco à parte, são
   uma faixa de apoio. Fora a borda, o fundo, o brilho de cursor e o padding;
   número e rótulo ficam centralizados. */
.features--numeros .feature--stat {
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  align-items: center;
  text-align: center;
}

.features--numeros .feature--stat::before,
.features--numeros .feature--stat::after {
  display: none;
}

/* O card levantava no hover; sem moldura, levantar não significa nada. */
.features--numeros .feature--stat:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Os três ficam lado a lado em qualquer largura. O auto-fit da biblioteca
   quebrava em 2+1 no tablet e deixava um card sozinho. */
.features--numeros {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Encolher é melhor que quebrar: abaixo de 800px o "50 mil+" ia para duas
   linhas e desalinhava a altura dos três cards. */
.features--numeros .feature__num {
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  white-space: nowrap;
}

/* No celular não cabe mais: empilha e o número volta ao tamanho cheio.
   O corte é em 560px porque abaixo disso o clamp já bateu no mínimo de
   1.75rem e o card continua encolhendo — o número passaria a estourar. */
@media (max-width: 560px) {
  .features--numeros {
    grid-template-columns: 1fr;
  }
  .features--numeros .feature__num {
    font-size: 3rem;
  }
}

/* --------------------------------------------------------------------------
   CARROSSEL
   Trilho com scroll-snap: no celular o dedo arrasta sozinho, no desktop os
   botões fazem o passo. A largura do card vem do número de cards por tela,
   então o passo é sempre uma tela cheia — nunca meio card.
   -------------------------------------------------------------------------- */

.carousel {
  --carousel-por-tela: 4;
  --carousel-gap: var(--space-5);
}

.carousel__viewport {
  /* A sangria devolve o espaço do anel de foco, que senão sai cortado. */
  margin-inline: calc(var(--space-1) * -1);
  padding-inline: var(--space-1);
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - var(--carousel-gap) * (var(--carousel-por-tela) - 1)) /
    var(--carousel-por-tela)
  );
  gap: var(--carousel-gap);
  padding-block: var(--space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track > * {
  scroll-snap-align: start;
  height: 100%;
}

.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.carousel.is-single .carousel__nav { display: none; }

.carousel__btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-hi);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.carousel__btn:hover:not(:disabled) {
  border-color: var(--cyan-300);
  color: var(--cyan-300);
}

.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition:
    width var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.carousel__dot.is-on {
  width: 1.5rem;
  border-radius: 999px;
  background: var(--action-gradient);
}

@media (max-width: 1100px) { .carousel { --carousel-por-tela: 3; } }
@media (max-width: 860px)  { .carousel { --carousel-por-tela: 2; } }
@media (max-width: 560px)  { .carousel { --carousel-por-tela: 1; } }

/* --------------------------------------------------------------------------
   RODAPÉ — REDES E ASSINATURA
   Mesmos perfis e mesmo par de logos do syncfiscal.com.br.
   -------------------------------------------------------------------------- */

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer__social-link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-mid);
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.footer__social-link:hover {
  color: var(--text-hi);
  border-color: var(--cyan-300);
  background: var(--surface-1);
}

.footer__partners {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.footer__partners-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-low);
}

.footer__partners-logos {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.footer__partner {
  display: inline-flex;
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-out);
}

.footer__partner:hover { opacity: 1; }

.footer__partner-img {
  display: block;
  width: auto;
  object-fit: contain;
}

/* A arte da Atma ocupa metade da altura do PNG (292 de 595), por isso a caixa
   dela é mais alta que a da Amplo para as duas saírem do mesmo tamanho. */
.footer__partner-img--atma  { height: 2.75rem; }
.footer__partner-img--amplo { height: 0.95rem; }

/* Em coluna, o resto do rodape esta alinhado a esquerda — centralizar aqui
   pareceria erro. Esta media query precisa vir DEPOIS da regra base: mesma
   especificidade, quem vem por ultimo ganha. */
@media (max-width: 860px) {
  .footer__partners {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* O CTA fecha a dobra "A noite"; precisa de respiro para não colar na
   programação. */
#programacao .cta {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
}

/* --------------------------------------------------------------------------
   BOTÃO DO CTA PRINCIPAL — pulso com movimento
   O .btn--pulse da biblioteca anima só o box-shadow. Num fundo escuro o
   brilho quase não se lê: de longe o botão parece parado. Aqui entra escala
   junto, sem tocar na biblioteca.

   Vale só neste botão — é o único com .btn--pulse na página, e dois
   pulsando na mesma tela anulam um ao outro.
   -------------------------------------------------------------------------- */

.cta .btn--pulse {
  animation:
    btn-pulse 2.8s var(--ease-in-out) infinite,
    btn-pulse-escala 2.8s var(--ease-in-out) infinite;
}

@keyframes btn-pulse-escala {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Animação ganha de declaração normal: enquanto a escala roda, o
   translateY(1px) do :active não apareceria. Com o cursor em cima fica só o
   brilho, e o botão volta a responder ao toque. */
.cta .btn--pulse:hover,
.cta .btn--pulse:focus-visible,
.cta .btn--pulse:active {
  animation: btn-pulse 2.8s var(--ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   WHATSAPP FLUTUANTE
   -------------------------------------------------------------------------- */

.whats {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 3.25rem;
  padding-inline: var(--space-5);
  border-radius: 999px;
  background: #25d366;
  color: #04130a;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    bottom var(--dur-slow) var(--ease-out);
}

.whats:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
  color: #04130a;
}

.whats .icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.6;
}

/* No celular vira botão redondo: o rótulo brigaria com o conteúdo. */
@media (max-width: 560px) {
  .whats {
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    width: 3.25rem;
    padding-inline: 0;
    justify-content: center;
  }
  .whats__label { display: none; }
}

/* --------------------------------------------------------------------------
   MOVIMENTO
   Camada montada em cima do .reveal da biblioteca. O escalonamento e o
   atraso por palavra entram por JS (transition-delay inline); aqui ficam só
   os estados. Em prefers-reduced-motion os tokens de duração já caem para
   1ms e o JS não escreve atraso nenhum.
   -------------------------------------------------------------------------- */

/* O título inteiro para de se mover: quem entra são as palavras. */
.reveal--palavras {
  opacity: 1;
  transform: none;
}

.reveal--palavras .palavra {
  display: inline-block;
  opacity: 0;
  /* Curso maior e tempo mais longo que o .reveal padrão: aqui o movimento é
     para ser notado, não para passar despercebido. */
  transform: translateY(26px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.reveal--palavras.is-visible .palavra {
  opacity: 1;
  transform: none;
}

/* Fatia com gradiente recortado: sem inline-block e sem transform, senão o
   recorte quebra junto com a linha. Só opacidade. */
.reveal--palavras .palavra--bloco {
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out);
}

.reveal--palavras.is-visible .palavra--bloco {
  opacity: 1;
}

/* O ícone do card assenta um instante depois do card, com um leve avanço de
   escala. Sem bounce: são seis cards na tela, saltar vira ruído. */
.feature.reveal .feature__icon,
.moment.reveal .moment__icon {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--dur-base) var(--ease-out) 120ms,
    transform var(--dur-slow) var(--ease-out) 120ms;
}

.feature.reveal.is-visible .feature__icon,
.moment.reveal.is-visible .moment__icon {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Fica a opacidade, sai o deslocamento — e nada espera atraso. */
  .reveal--palavras .palavra,
  .reveal--palavras .palavra--bloco,
  .feature.reveal .feature__icon,
  .moment.reveal .moment__icon {
    transform: none;
    transition-delay: 0ms;
  }
}

/* --------------------------------------------------------------------------
   CONVIDADO EM DESTAQUE
   Abre a dobra da programação. Segue o desenho do .agenda__card — mesma
   borda, mesmo raio, mesmo vidro —, mas com o retrato à esquerda, para ler
   como "quem" antes da lista de "quando".
   -------------------------------------------------------------------------- */

.convidado {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(209, 45, 224, 0.12), transparent 60%),
    var(--surface-glass);
}

.convidado__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
}

.convidado__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Sem foto, o espaço continua reservado: quando a imagem chegar, nada na
   dobra muda de lugar. */
.convidado__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-low);
}

.convidado__placeholder .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.convidado__placeholder-txt {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.convidado__corpo {
  min-width: 0;
}

.convidado__tag {
  margin-bottom: var(--space-4);
}

.convidado__nome {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-2xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--text-hi);
}

.convidado__cargo {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.convidado__tema {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(7, 3, 18, 0.35);
}

.convidado__tema-rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-low);
}

.convidado__tema-valor {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--cyan-300);
}

.convidado__texto {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .convidado {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* O retrato deixa de ser coluna e vira faixa: em pé, comeria a tela. */
  .convidado__media {
    aspect-ratio: 16 / 10;
    max-height: 15rem;
  }
}

/* --------------------------------------------------------------------------
   AVISO DE PRIVACIDADE
   Faixa presa ao rodapé da janela. Não bloqueia a página: a LGPD pede
   informação e escolha, não sequestro da tela.
   -------------------------------------------------------------------------- */

.privacidade {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  width: min(var(--container), calc(100vw - var(--space-8)));
  margin-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-3);
  transform: translate(-50%, calc(100% + var(--space-8)));
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.privacidade.is-on {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out),
    visibility 0s;
}

.privacidade__texto {
  flex: 1 1 22rem;
  min-width: 0;
}

.privacidade__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
}

.privacidade__desc {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

.privacidade__link {
  color: var(--cyan-300);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacidade__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* O botão flutuante do WhatsApp sobe a altura da faixa enquanto ela está na
   tela — os dois são fixos no mesmo canto. Sobe em vez de sumir: quem não
   responder ao aviso continua com o botão à mão. */
body.com-aviso .whats {
  bottom: calc(
    var(--aviso-altura, 7rem) + var(--space-8) + env(safe-area-inset-bottom)
  );
}

@media (max-width: 640px) {
  .privacidade {
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
  }
  .privacidade__acoes { width: 100%; }
  .privacidade__acoes .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   PÁGINA DE DOCUMENTO (política de privacidade)
   -------------------------------------------------------------------------- */

.doc {
  max-width: 48rem;
  margin-inline: auto;
}

.doc__meta {
  margin-bottom: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-low);
}

.doc .t-h3 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--text-hi);
}

.doc .t-body + .t-body,
.doc .doc__lista + .t-body {
  margin-top: var(--space-4);
}

.doc__lista {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
}

.doc__lista strong { color: var(--text-hi); }

.doc__link {
  color: var(--cyan-300);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc__voltar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

/* Botão que se comporta como link no rodapé — abre o aviso de novo. */
.footer__link--botao {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* --------------------------------------------------------------------------
   AJUSTES DE PÁGINA
   -------------------------------------------------------------------------- */

/* O trilho lateral é fixo: reserva espaço para ele não cobrir conteúdo. */
@media (min-width: 861px) {
  .section > .container { padding-right: var(--space-12); }
}

/* Âncora não pode ficar embaixo da barra fixa do topo. */
[id] {
  scroll-margin-top: 6rem;
}