/* ═══════════════════════════════════════════════════════
   WARM UP 2026 — Black Friday · Grupo W
   Identidade: preto profundo + limbo incandescente vermelho→laranja
   ═══════════════════════════════════════════════════════ */

:root {
  --bg: #050404;
  --surface: #0d0a09;
  --card: #14100e;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f5f2ef;
  --muted: #a8a29e;
  /* Rampa da marca: o evento é Wicomm + Wigoo, então a rampa parte do
     rosa da Wicomm (#ff0f66), passa pelo vermelho e termina no laranja da
     Wigoo (#fb6b01). O rosa segura a primeira metade para as duas marcas
     pesarem igual — antes o vermelho começava a rampa e a página inteira
     lia como laranja. --amber continua existindo porque 6 regras a
     referenciam, mas aponta para o fim da própria rampa. */
  --pink: #ff0f66;
  --red: #ff003e;
  --orange: #fb6b01;
  --amber: #fb6b01;
  --grad: linear-gradient(92deg, #ff0f66, #ff003e 42%, #fb6b01);
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1140px;
  /* Linguagem híbrida: o que é AÇÃO fica redondo (pílula), o que é
     ESTRUTURA fica reto com canto apenas suavizado, e as marcas pequenas
     ficam quadradas. Assim o deck aparece nas caixas sem que a página
     inteira vire uma folha de retângulos. */
  /* Superfícies: cinza escuro chapado + borda um grau mais clara. Sem
     gradiente e sem glow — o brilho quente fica reservado ao eclipse, ao
     CTA e à marca, não espalhado por toda caixa da página. */
  --box-bg: #131211;
  --box-line: #2b2825;
  --box-line-hover: #4d4741;
  --r-btn: 999px;   /* botões, chips, nav — a metade arredondada */
  --r-box: 10px;    /* cards, inputs, imagens — reto, canto suavizado */
  --r-bar: 4px;     /* barras e réguas — quase reto */
  --r-mark: 2px;    /* bullets e pontos — quadrado */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(255, 15, 102, 0.55); color: #fff; }

/* ── Botões ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.8rem;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), box-shadow 220ms var(--ease-out),
    background-color 180ms var(--ease-out), filter 180ms var(--ease-out);
  will-change: transform;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(251, 107, 1, 0.25);
}
/* o hover acendia um halo difuso em volta do botão; agora responde só com
   um passo de brilho e um milímetro de elevação */
.btn--primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(251, 107, 1, 0.6); }
.btn--sm { min-height: 44px; padding: 0.55rem 1.25rem; font-size: 0.85rem; }
.btn--full { width: 100%; }
/* GSAP controla o transform dos botões magnéticos — sem transition CSS concorrente */
.js-magnetic { transition: box-shadow 220ms var(--ease-out), background-color 180ms var(--ease-out); }
.js-magnetic:active { transform: none; }

/* ── Nav ───────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  transition: padding 400ms var(--ease-out), background-color 400ms, backdrop-filter 400ms;
}
/* A nav só aparece depois da abertura. `html.js` vem de um inline
   no topo do body (antes da primeira pintura, sem flash); `is-ready` vem do
   fim da abertura — ou do failsafe de 10s no mesmo inline, se main.js não
   carregar. Sem JS nenhuma regra pega e a nav está lá desde o início. */
html.js .nav:not(.is-ready) {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.nav.is-ready {
  transition: padding 400ms var(--ease-out), background-color 400ms, backdrop-filter 400ms,
              opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 4, 4, 0.9), rgba(5, 4, 4, 0.55) 60%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
}
.nav.is-scrolled { padding-block: 0.6rem; }
.nav.is-scrolled::after { opacity: 1; }
.nav__inner > * { position: relative; z-index: 1; }
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  /* nunca comprimir: sem isso o "2026" vaza por baixo do CTA no mobile */
  flex: none;
}
/* eclipse em miniatura — mesmo anel em gradiente do hero */
.nav__brand-mark {
  position: relative;
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 10px 1px rgba(255, 15, 102, 0.45);
  transition: box-shadow 220ms var(--ease-out);
}
.nav__brand-mark::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 50%;
  background: var(--bg);
}
.nav__brand:hover .nav__brand-mark { box-shadow: 0 0 16px 2px rgba(255, 15, 102, 0.75); }
.nav__brand-logo {
  height: 24px;
  width: auto;
}
.nav__brand-year {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--orange);
  /* assenta na mesma baseline do wordmark */
  transform: translateY(4px);
}
/* pill de navegação com indicador que desliza para a seção ativa */
.nav__links {
  position: relative;
  display: flex;
  gap: 0.15rem;
  margin-left: auto;
  padding: 0.28rem;
  border-radius: var(--r-btn);
  background: var(--box-bg);
  border: 1px solid var(--box-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav__links a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-btn);
  white-space: nowrap;
  transition: color 220ms var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--text); }
.nav__indicator {
  position: absolute;
  top: 0.28rem;
  bottom: 0.28rem;
  left: 0;
  width: 0;
  border-radius: var(--r-btn);
  background: #1e1b18;
  box-shadow: inset 0 0 0 1px var(--box-line-hover);
  opacity: 0;
  pointer-events: none;
}
.nav__cta { box-shadow: 0 0 0 1px rgba(251, 107, 1, 0.25); }
@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; gap: 0.75rem; }
  /* sem a nav, o espaço é disputado com o CTA: o ano sai (já está no hero) */
  .nav__brand-year { display: none; }
  .nav__brand-logo { height: 22px; }
}
@media (max-width: 380px) {
  .nav { padding-inline: 0.9rem; }
  .nav__brand-logo { height: 20px; }
  .btn--sm { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
}

/* ── Hero ───────────────────────────────────────────────────────────────
   O hero é o key visual e mais nada. Dois candidatos ocupam a mesma
   posição: a cena Three.js (.hero__scene, abertura + hero vivo) e a imagem
   parada (.hero__still, fallback). Só a tagline e a data são DOM. */
.hero {
  position: relative;
  /* height, não min-height: o key visual é dimensionado em dvh, então a
     caixa do hero tem de ser exatamente a viewport. A tagline é encaixada
     por flex, não por medida derivada do anel. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* a tagline encosta na base da tela; o anel vive na metade de cima */
  justify-content: flex-end;
  text-align: center;
  padding: 0 1.25rem clamp(2rem, 7dvh, 4.5rem);
  overflow: hidden;
  /* Diâmetro do anel: manda a altura em telas largas e a largura em telas
     estreitas, então o anel nunca é cortado nem fica minúsculo. Todo o
     posicionamento do frame deriva daqui. */
  /* 58dvh (era 66): em monitores de 768–800px de altura a data e a linha de
     patrocínio ficavam encavaladas na base do hero. */
  --ring: min(58dvh, 86vw);
  /* Altura do quadro 16:9 a partir do anel. Cada candidato tem a própria
     razão anel/quadro (a cena é 580/720; a imagem foi medida em 0.781),
     então o cálculo fica em cada elemento, não aqui. */
  /* Onde o centro do anel fica na tela, medido do topo do hero. Acima do
     meio, para sobrar faixa preta embaixo para a tagline. */
  --ring-y: 45%;
}
.hero__key {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* poeira de profundidade: fica atrás da cena (que é `screen`, então o preto
   dela deixa a poeira passar) e só acende quando o hero está pronto */
.hero__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease-out;
}
.hero__dust.is-on { opacity: 1; }
/* Imagem e quadro do lockup são caixas 16:9 dimensionadas para o anel de
   uma cair exatamente sobre o da outra: mesmo diâmetro (--ring), mesmo
   centro (--ring-y). O centro do anel não é o centro do quadro, por isso o
   translate não é -50%: na imagem ele está em 0.4991/0.4815; na cena, o
   shader desenha o anel em (640, 350) de 1280x720, r=290. */
.hero__still,
.hero__frame {
  position: absolute;
  left: 50%;
  top: var(--ring-y);
  width: var(--frame-w);
  height: var(--frame-h);
  display: block;
}
.hero__still {
  --frame-h: calc(var(--ring) / 0.781);
  --frame-w: calc(var(--frame-h) * 1.7778);
  transform: translate(calc(-0.4991 * var(--frame-w)), calc(-0.4815 * var(--frame-h)));
  /* a proporção da caixa já é a do arquivo: nada a cortar ou deformar */
  object-fit: fill;
}
.hero__frame {
  --frame-h: calc(var(--ring) / 0.80556);
  --frame-w: calc(var(--frame-h) * 1.7778);
  transform: translate(-50%, calc(-0.48611 * var(--frame-h)));
  pointer-events: none;
}
/* A cena cobre o hero inteiro: o canvas é do tamanho do viewport e o
   shader recebe, por uniform, onde o quadro virtual 1280x720 está — a luz
   é calculada em todo pixel, inclusive fora do quadro. Sem borda. */
.hero__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.hero__scene > svg,
.hero__scene > canvas,
.hero__frame > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__scene .composition {
  pointer-events: none;
  font-family: var(--font-display, Poppins), Poppins, Arial, sans-serif;
  text-rendering: geometricPrecision;
}
.hero__scene #intro,
.hero__scene .brand { opacity: 0; }
/* A cena é o estado excepcional: só aparece depois de desenhar o primeiro
   quadro, e nesse caso a imagem SAI. Não é redundância: a cena usa
   mix-blend-mode: screen, que soma com o que está atrás em vez de cobrir —
   com a imagem no lugar, o lockup dela apareceria por baixo da luz. */
.hero__scene { opacity: 0; }
.hero__key.is-live .hero__scene { opacity: 1; }
/* Com JS, a imagem só entra se a cena falhar (is-fallback). Sem JS, a regra
   não pega e ela está lá desde o início. */
html.js .hero__still { opacity: 0; transition: opacity 600ms ease-out; }
html.js .hero__key.is-fallback .hero__still { opacity: 1; }
/* loader: um ponto pulsando no centro do anel enquanto o bundle chega */
.hero__loader {
  position: absolute;
  left: 50%;
  top: var(--ring-y);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.hero__loader span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px 4px rgba(251, 107, 1, 0.45);
  animation: heroPulse 1.4s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50% { transform: scale(1); opacity: 1; }
}
html.js .hero__key:not(.is-live):not(.is-fallback) + .hero__loader { opacity: 1; }
/* o fade da base dissolve a moldura do frame da IMAGEM no preto da página.
   Com a cena viva não há moldura — o canvas cobre o hero — e no pico
   branco da abertura a vinheta viraria duas faixas cinzas; então ela só
   existe para a imagem. */
html.js .hero__key:not(.is-fallback) .hero__vignette { display: none; }
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 130% 105% at 50% var(--ring-y), transparent 62%, rgba(5, 4, 4, 0.62) 100%),
    linear-gradient(180deg, rgba(5, 4, 4, 0.4) 0%, transparent 14%, transparent 78%, var(--bg) 100%);
}

/* Tagline: logo abaixo da base do anel, empurrada pelo próprio raio em vez
   de por um valor chutado. */
/* Data e local pendurados logo abaixo do anel. `top` em % resolve pela
   altura do contêiner (ao contrário de margin), então a conta com --ring-y
   e --ring aqui é segura. */
.hero__foot {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: calc(var(--ring-y) + var(--ring) / 2 + clamp(1.1rem, 3dvh, 2.2rem));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* distância data → patrocínio: sempre a mesma proporção da tela */
  gap: clamp(1.4rem, 4.5dvh, 3rem);
}
.hero__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
  text-shadow: 0 2px 14px rgba(5, 4, 4, 0.75);
}
/* patrocínio na base do hero: todos os logos numa linha, fora da bola */
.hero__sponsors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem 3.5rem;
}
/* dois grupos lado a lado: Oferecimento | Patrocinadores; um fio separa */
.hero__sponsors-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.hero__sponsors-group + .hero__sponsors-group {
  position: relative;
  padding-left: 3.5rem;
  margin-left: -3.5rem;
}
.hero__sponsors-group + .hero__sponsors-group::before {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--box-line-hover);
}
@media (max-width: 760px) {
  /* a data e o patrocínio disputavam a base do hero e se atravessavam: o
     anel encolhe e sobe, a data desce logo abaixo dele, e o patrocínio vira
     uma linha única de logos pequenos, sem rótulos. O Apoio fica só na
     seção de patrocinadores (pedido do cliente). */
  .hero { --ring: min(44dvh, 86vw); --ring-y: 42%; }
  /* os grupos ficam separados e com rótulo (Oferecimento / Patrocinadores),
     um abaixo do outro */
  .hero__foot { gap: clamp(1.1rem, 3.5dvh, 2rem); }
  .hero__sponsors { flex-direction: column; align-items: center; gap: 1.4rem; } /* respiro entre Oferecimento e Patrocinadores */
  .hero__sponsors-group { flex-direction: column; gap: 0.4rem; }
  .hero__sponsors-group + .hero__sponsors-group { padding-left: 0; margin-left: 0; }
  .hero__sponsors-group + .hero__sponsors-group::before { display: none; }
  .hero__sponsors-label { font-size: 0.56rem; letter-spacing: 0.22em; }
  .hero__sponsors ul { gap: 0.4rem 1.1rem; }
  .hero__sponsors img { height: 16px; }
  .hero__sponsors img[alt="Wake"] { height: 15px; }
  .hero__sponsors img[alt="OPL"] { height: 15px; }
  .hero__sponsors img[alt="Blip"] { height: 17px; }
  .hero__sponsors img[alt="After Click"] { height: 21px; }
}
.form__opt { color: var(--muted); font-weight: 400; font-size: 0.8em; margin-left: 0.3em; }
.form__note--error { color: var(--red); }
.hero__sponsors-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__sponsors ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.8rem;
}
.hero__sponsors img { display: block; height: 20px; width: auto; opacity: 0.9; }
.hero__sponsors img[alt="Wake"] { height: 19px; } /* wordmark sem margem interna: altura menor que os logos com caixa */
.hero__sponsors img[alt="OPL"] { height: 18px; }
.hero__sponsors img[alt="Blip"] { height: 22px; }
/* a tagline embaixo do After Click encolhe o wordmark: compensa na altura */
.hero__sponsors img[alt="After Click"] { height: 26px; }
.sponsor img[alt="After Click"] { max-height: 56px; max-width: 80%; }
.hero__meta li strong { color: var(--text); font-weight: 600; }
.hero__meta li + li::before { content: "·"; margin-right: 1.1rem; color: var(--orange); }
html.has-gsap .js-hero-meta { opacity: 0; }

/* Nada de margem em % aqui: margin-top percentual resolve pela LARGURA do
   contêiner, não pela altura, e a frase ia para fora da tela. O lugar dela
   é dado pelo flex do .hero (justify-content: flex-end + padding-bottom). */
.hero__tagline {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  text-shadow: 0 2px 18px rgba(5, 4, 4, 0.8);
  color: var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero__tagline em { font-style: normal; }

.hero__tagline em,
/* depois do SplitText o texto do <em> vive num filho, e o recorte precisa
   estar onde o glifo é pintado */
.hero__tagline em .tag__word {
  background: linear-gradient(100deg, #ff0f66, #ff003e 26%, #fb6b01 42%, #ffd9ad 52%, #fb6b01 62%, #ff003e 78%, #ff0f66);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* a sombra do bloco de texto reapareceria por baixo do glifo recortado */
  text-shadow: none;
  animation: gradRun 7s linear infinite;
}
@keyframes gradRun {
  to { background-position: -160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__tagline em,
  .hero__tagline em .tag__word { animation: none; background-position: 26% 0; }
}


.countdown__cell { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.countdown__cell span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.countdown__cell small {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 239, 0.7);
}


@media (max-width: 640px) {
  /* em retrato a largura é que limita o anel, então sobra altura: o centro
     desce para 46% para a folga se dividir entre topo e base */
  /* o anel encosta nas laterais: sem faixa preta sobrando dos dois lados */
  .hero__tagline { font-size: 0.95rem; letter-spacing: 0.1em; max-width: 22ch; }
  .hero__meta { font-size: 0.85rem; gap: 0.2rem 0.8rem; }
  .hero__meta li + li::before { margin-right: 0.8rem; }
  /* o local quebra para a 2ª linha: sem isso o separador abre a linha */
  .hero__meta li:nth-child(3) { flex-basis: 100%; }
  .hero__meta li:nth-child(3)::before { content: none; }
  .countdown__cell { min-width: 46px; }
}

/* Conteúdo só para leitor de tela: o título visual do hero está dentro da
   imagem, mas a página precisa de um h1 real. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Barra de progresso de scroll ───────────── */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(251, 107, 1, 0.6);
}

/* ── Seções ───────────────────────────────── */
.section { position: relative; padding: 6.5rem 1.25rem; overflow: hidden; overflow: clip; }
.section--alt { background: var(--surface); }

/* glows ambientes por seção */
#speakers::before,
#local::before {
  content: "";
  position: absolute;
  width: 56vw;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
#speakers::before {
  bottom: -24%; left: -16%;
  background: radial-gradient(circle, rgba(255, 15, 102, 0.11), transparent 65%);
}
#local::before {
  top: -14%; right: -18%;
  background: radial-gradient(circle, rgba(251, 107, 1, 0.08), transparent 65%);
}
.section__inner { max-width: var(--container); margin: 0 auto; }
.section__inner--narrow { max-width: 760px; }

/* ── Split editorial ────────────────────────────────────────────────────
   As seções 02 e 03 viviam numa coluna de ~720px com metade da largura
   morta à direita — o que fazia a página ler como slide, não como landing.
   O split dá ao cabeçalho um papel de âncora fixa e devolve a largura
   inteira ao conteúdo. */
.split {
  display: grid;
  grid-template-columns: minmax(280px, 370px) minmax(0, 1fr);
  gap: 3rem 5rem;
  align-items: start;
}
.split__aside { position: sticky; top: 6.5rem; }
/* sem a timeline, a coluna da esquerda vira o conteúdo inteiro */
.split--solo { grid-template-columns: minmax(0, 720px); }
.split--solo .split__aside { position: static; }
.section__head--flush { max-width: none; margin-bottom: 2rem; }

/* ficha do evento sob o cabeçalho: informação real ocupando o espaço que
   antes era vazio, em vez de decoração */
.factlist {
  display: grid;
  gap: 1.15rem;
  border-top: 1px solid var(--border);
  padding-top: 1.6rem;
}
.factlist dt {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.35rem;
}
.factlist dd { margin: 0; font-size: 0.95rem; line-height: 1.55; }


@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.75rem; }
  .split__aside { position: static; }
}
/* 680px deixava "…encontra no / Warm Up" e "…aquecer as / conversas" com
   órfã na segunda linha; 830px cabe os títulos longos em uma linha só */
.section__head { max-width: 830px; margin-bottom: 3.5rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--orange);
  margin-bottom: 1rem;
}
.section__num::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 1px;
  background: var(--grad);
  vertical-align: middle;
  margin-left: 0.9rem;
  box-shadow: 0 0 10px rgba(251, 107, 1, 0.8);
}
.section__head h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.section__lead { color: var(--muted); font-size: 1.05rem; }
.section__lead strong { color: var(--text); }

/* ── 01 Contexto ───────────────────────────────── */

/* ── 03 Agenda · índice em três atos ───────────────────────────────────
   O programa é parcial: cinco dos sete momentos ainda não têm horário.
   Caixa vazia denuncia o furo; linha tipográfica não. Os momentos viram
   um sumário sob uma régua de luz única, agrupados em três atos, e o
   momento em foco abre a descrição no próprio lugar. */
.agenda { position: relative; padding-left: 2rem; --line-scale: 1; }
.agenda::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 15, 102, 0.7), rgba(251, 107, 1, 0.3) 70%, transparent);
  transform: scaleY(var(--line-scale));
  transform-origin: top center;
}
.acts { list-style: none; display: grid; gap: 3.25rem; }
.act { position: relative; }
/* marca quadrada do ato sobre a régua */
.act::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: var(--r-mark);
  background: var(--bg);
  border: 1px solid var(--orange);
}
.act__head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.act__idx {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.act__name { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.act__meta { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; }
.moments { list-style: none; }
.moment { border-top: 1px solid var(--box-line); }
.moment:last-child { border-bottom: 1px solid var(--box-line); }
.moment__row {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  width: 100%;
  padding: 1.05rem 0.4rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: opacity 260ms var(--ease-out), background-color 260ms var(--ease-out);
}
.moment__row:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.moment__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.moment__time--soon {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.moment__title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  transition: color 220ms var(--ease-out);
}
.moment__place {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* a descrição vive fechada; o foco a abre (altura animada pelo JS) */
.moment__panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding-left: calc(88px + 1.65rem);
}
.moment__panel p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 62ch;
  padding-bottom: 0.9rem;
}
.moment__todo { font-style: italic; opacity: 0.75; }
/* ponto de luz que segue a mão na régua; o momento mais próximo abre */
.agenda__spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--grad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
  will-change: transform;
}
.agenda.is-live .agenda__spot { opacity: 1; }
.agenda.is-live .moment:not(.is-focus) .moment__row { opacity: 0.5; }
.moment.is-focus .moment__row { background: linear-gradient(90deg, rgba(255, 15, 102, 0.07), transparent 65%); }
.moment.is-focus .moment__title,
.moment__row:hover .moment__title { color: #fff; }

@media (max-width: 620px) {
  .agenda { padding-left: 1.5rem; }
  .act::before { left: -1.5rem; }
  .moment__row {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.9rem;
    padding: 0.95rem 0.25rem;
  }
  .moment__time { grid-column: 1 / -1; }
  .moment__panel { padding-left: 0.25rem; }
}

/* ── 04 Marcas ─────────────────────────────────────────────────────────
   Era um marquee em loop. Virou grade: 25 logos passando na horizontal
   obrigam a esperar para ver todas, e num evento B2B a lista completa é o
   argumento — não o movimento. */
.logos {
  list-style: none;
  display: grid;
  /* são 25 marcas: 5 colunas fecham 5 linhas exatas e nenhuma sobra sozinha
     na última fila, o que acontecia com auto-fill */
  /* 24 marcas (FOM saiu): 6 colunas fecham 4 linhas exatas */
  grid-template-columns: repeat(6, 1fr);
  gap: 2.6rem 1.5rem;
  align-items: center;
  justify-items: center;
}
@media (max-width: 900px) { .logos { grid-template-columns: repeat(3, 1fr); } }
.logos img {
  /* duas travas em vez de altura fixa: o logo largo (Mondial, Trousseau)
     para na largura, o quadrado (VW, FOM) para na altura — peso visual
     parecido entre eles */
  width: auto;
  height: auto;
  max-height: 46px;
  max-width: 132px;
  opacity: 0.55;
  filter: grayscale(100%) brightness(1.6);
  transition: opacity 220ms var(--ease-out);
}
.logos img:hover { opacity: 1; }
@media (max-width: 560px) {
  .logos { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .logos img { max-height: 36px; max-width: 110px; }
}

/* ── 05 Apoiadores ─────────────────────────────────────────────────────
   Slots vazios com borda tracejada: deixa explícito que a cota está aberta
   em vez de fingir que a seção já tem conteúdo. Conforme os patrocinadores
   fecharem, cada <li> vira um <img>. */
.sponsors {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 720px;
  margin-inline: auto;
}
.sponsor {
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 1rem;
  border-radius: var(--r-box);
  text-align: center;
}
/* as marcas têm proporções bem diferentes (OPL 2.3:1, FFX 3.3:1); limitar
   pela altura E pela largura evita que as largas dominem a fileira */
.sponsor img {
  max-height: 44px;
  max-width: 72%;
  width: auto;
  /* height: auto obrigatório: o atributo height do <img> fixava a altura e,
     com max-width cortando a largura, o logo distorcia */
  height: auto;
  opacity: 0.92;
  transition: opacity 200ms var(--ease-out);
}
.sponsor:hover img { opacity: 1; }

/* ── 07 Cadastro ───────────────────────────────── */
.section--cta {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  padding: 8rem 1.25rem 12rem;
}
/* Era um círculo geométrico de 90vmin com anel de 2px que cortava o
   formulário ao meio. Agora fecha a página com o mesmo limbo do hero:
   a mesma imagem, nascendo na borda inferior da seção. */
.cta__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  overflow: hidden;
  pointer-events: none;
  /* dissolve no topo: sem a máscara a imagem faz borda dura contra o fundo */
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4) 48%, #000 82%);
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4) 48%, #000 82%);
}
.cta__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.9;
}
.section--cta .section__inner { position: relative; z-index: 1; }
/* o form vivia num bloco de 760px centrado, com margens que não batiam com
   as do menu nem com as do rodapé. Em duas colunas dentro do container de
   1140px, as bordas da página voltam a se alinhar de cima a baixo. */
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 3rem 4.5rem;
  align-items: start;
}
.cta__grid .section__head { margin-bottom: 0; max-width: none; }
/* a coluna é mais estreita que a largura cheia da seção: o título desce
   um degrau para não quebrar em três linhas */
.cta__grid .section__head h2 { font-size: clamp(1.8rem, 2.5vw, 2.25rem); }
.cta__grid .form,
.cta__grid .form__success { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) {
  .cta__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cta__grid .section__head { max-width: none; }
  .cta__grid .form,
  .cta__grid .form__success { grid-column: 1; grid-row: 2; }
}
.form { display: flex; flex-direction: column; gap: 1.4rem; position: relative; z-index: 1; }
/* display:flex acima vence o [hidden] do navegador: sem isto o formulário
   continuava aparecendo atrás da mensagem de sucesso */
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__field { display: flex; flex-direction: column; gap: 0.45rem; }
.form__field label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; }
/* só o asterisco de obrigatório. Sem o :not(), esta regra (0-1-2) vencia
   .check__text (0-1-0) e pintava todo o texto do aceite de laranja */
.form__field label > span:not([class]) { color: var(--orange); }
.form__field input,
.form__field select {
  min-height: 50px;
  padding: 0.7rem 1rem;
  border-radius: var(--r-box);
  border: 1px solid var(--box-line);
  background: var(--box-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 180ms, background-color 180ms;
}
.form__field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.75rem;
  /* chevron próprio: appearance none apaga o nativo */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
/* sem escolha ainda: lê como placeholder, igual aos inputs vazios */
.form__field select:invalid { color: var(--muted); }
/* a lista nativa herda o branco do select em fundo claro no desktop */
.form__field select option { color: #111; background: #fff; }
.form__field input:focus,
.form__field select:focus {
  outline: none;
  /* foco continua inequívoco (requisito de acessibilidade), mas por stroke
     de 2px em vez de bloom */
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.form__field.is-invalid input,
.form__field.is-invalid select { border-color: var(--red); }
.form__error { color: #ff8d7a; font-size: 0.8rem; }
.form__note {
  color: rgba(245, 242, 239, 0.78);
  font-size: 0.8rem;
  text-align: center;
  /* a nota pousa perto do brilho do limbo: cor mais clara + halo escuro */
  text-shadow: 0 2px 16px rgba(5, 4, 4, 0.95);
}
.btn__loading {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(22, 9, 5, 0.35);
  border-top-color: #160905;
}
@media (prefers-reduced-motion: no-preference) {
  .btn__loading { animation: spin 700ms linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
.form__success { text-align: center; padding: 3rem 1rem; }
.form__success-ring {
  width: 74px; height: 74px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: #050404;
  box-shadow: 0 0 0 2px var(--orange), 0 0 34px 4px rgba(255, 15, 102, 0.55);
  display: grid;
  place-items: center;
}
.form__success-ring::after {
  content: "✓";
  font-size: 1.7rem;
  color: var(--amber);
  font-weight: 700;
}
.form__success h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.form__success p { color: var(--muted); max-width: 42ch; margin-inline: auto; }

/* ── Footer ───────────────────────────────── */
/* ── Footer ─────────────────────────────────────────────────────────────
   Era três linhas centralizadas — leitura de slide final, não de rodapé.
   Agora: quatro colunas com marca, navegação, dados do evento e um último
   CTA, mais uma barra legal separada. */
.footer {
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 4.5rem 1.25rem 0;
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.25fr 1.15fr;
  gap: 3rem 2.5rem;
  align-items: start;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}
.footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer__logo img { height: 24px; width: auto; }
/* mesmo anel da nav: mantém a marca do eclipse viva no fim da página */
.footer__mark {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
}
.footer__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--surface);
}
.footer__pitch {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 34ch;
}
.footer__lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0.82;
}
.footer__lockup img { width: auto; }
.footer__lockup img[alt="Wigoo"] { height: 28px; }
.footer__lockup img[alt="Wicomm"] { height: 21px; }
.footer__lockup-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.28);
}
.footer__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.15rem;
}
.footer__col ul { list-style: none; display: grid; gap: 0.7rem; }
.footer__col li,
.footer__col p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
/* :not(.btn) — sem isso a especificidade (0,2,0) atropela a cor do
   .btn--primary e o sublinhado corta o texto do botão */
.footer__col a:not(.btn) {
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.footer__col a:not(.btn):hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer__logo { text-decoration: none; }

.footer__bar {
  max-width: var(--container);
  margin: 3.5rem auto 0;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer { padding-top: 3.5rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__bar { flex-direction: column; }
}

/* número-âncora (+200 executivos) — as regras tinham sido removidas junto
   com a antiga seção "Quem estará na sala" e voltaram com o briefing */
.figure {
  display: flex;
  /* baseline alinhava a 1ª linha da legenda com a base de um número de 70px,
     empurrando a 2ª linha para fora do bloco. flex-end mantém as duas
     linhas ancoradas embaixo, junto do número. */
  align-items: flex-end;
  gap: 0.9rem;
  margin-top: 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--box-line);
}
.figure__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.figure__unit { color: var(--muted); font-size: 0.9rem; line-height: 1.45; padding-bottom: 0.4rem; }

/* ── 01 O que é o Warm Up ───────────────────────────────────────────── */
/* ── 01 O evento · abertura tipográfica ───────────────────────────────
   As três fotos daqui eram as mesmas do Local (07): a seção que devia
   provar a edição de 2025 mostrava o prédio de 2026. Sem elas, o peso
   visual vem da escala do tipo e do limbo — o mesmo gesto do key visual —
   atrás do número da primeira edição. O slot do vídeo de 2025 continua
   reservado no HTML. */
.evento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem 2rem;
  align-items: start;
}
.evento__head { grid-column: 1 / 11; margin-bottom: 0; max-width: none; }
.evento__head h2 {
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* o lead sai do corpo de apoio e vira declaração de abertura */
.evento__lead {
  grid-column: 1 / 6;
  border-top: 1px solid var(--box-line);
  padding-top: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}
.evento__cols {
  grid-column: 7 / -1;
  display: grid;
  gap: 1.2rem;
  border-top: 1px solid var(--box-line);
  padding-top: 1.6rem;
}
.evento__cols p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* selo de fechamento: o número da primeira edição nascendo do limbo */
.evento__figure {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* a legenda ao lado da base do número deixava o bloco torto: agora ela
     desce para debaixo dele, os dois centrados no mesmo eixo */
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  /* o selo sangra até as bordas da tela: assim o disco é cortado fora do
     campo de visão e a calota lê como horizonte, não como caixa */
  margin: 2rem calc(560px - 50vw) 0;
  padding: 5.5rem 1.25rem 2.5rem;
  border-top: 0;
  /* corta a base do disco: sobra a calota superior — o limbo do hero */
  overflow: hidden;
}
.evento__figure .figure__value {
  font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
}
.evento__figure .figure__unit {
  font-size: 0.95rem;
  padding-bottom: 0;
  text-align: center;
  letter-spacing: 0.04em;
}
/* o limbo: disco escuro com a borda superior incandescente, como no hero */
.evento__arc {
  --glow: 0;
  position: absolute;
  left: 50%;
  top: 16%;
  z-index: -1;
  width: min(1400px, 94vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 6%, rgba(255, 15, 102, 0.2), rgba(251, 107, 1, 0.07) 26%, transparent 46%);
  transform: translateX(-50%);
  will-change: transform;
}
.evento__arc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 176, 128, calc(0.4 + var(--glow) * 0.4));
  box-shadow: 0 -10px calc(40px + var(--glow) * 34px) rgba(255, 74, 16, calc(0.28 + var(--glow) * 0.3));
  transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
/* o corte do overflow morre num fade em vez de virar uma linha reta */
.evento__figure::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg) 82%);
  pointer-events: none;
}

@media (max-width: 980px) {
  .evento { grid-template-columns: 1fr; gap: 2rem; }
  .evento__head,
  .evento__lead,
  .evento__cols,
  .evento__figure { grid-column: 1 / -1; }
  .evento__figure {
    justify-content: flex-start;
    padding-top: 3.5rem;
    margin-top: 1rem;
  }
  .evento__figure { margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .evento__arc { top: 12%; width: 138%; }
}
@media (max-width: 520px) {
  .evento__figure { flex-wrap: wrap; gap: 0.75rem; }
  .evento__figure .figure__unit { padding-bottom: 0; }
}

/* o slot do vídeo highlight de 2025 (comentado no HTML) entra no lugar da
   foto de abertura */
.reel__video {
  width: 100%;
  border-radius: var(--r-box);
  border: 1px solid var(--box-line);
  display: block;
}
.prose p { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 62ch; }
.prose p + p { margin-top: 1rem; }

/* ── 02 A experiência (pilares) ───────────────────────────────────────
   Duas tentativas antes desta: a palavra numa coluna de 52% deixava ~30% da
   largura morta à direita; encaixar a palavra na largura inteira resolvia o
   vazio mas jogava o corpo para ~270px, e cada faixa passava a ocupar uma
   tela. A saída é usar as duas BORDAS: palavra numa ponta, descrição na
   outra, alternando o lado a cada faixa. Nada fica no meio sobrando. */
.pillars { list-style: none; margin-top: 3rem; }
.pillar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  /* center e não baseline: alinhar pela base de uma palavra de 86px afundava
     o parágrafo e abria um vazio acima dele */
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.1rem clamp(1.25rem, 4vw, 3rem) 1.6rem;
  border-top: 1px solid var(--box-line);
  transition: border-color 200ms var(--ease-out), padding 520ms var(--ease-out);
}
.pillar:last-child { border-bottom: 1px solid var(--box-line); }
/* no hover a faixa cresce um pouco na vertical (só ela; as vizinhas apenas
   deslizam no fluxo) para a foto ter mais altura visível — a fatia de 9:1
   virava um rasgo. Crescimento contido: ~20px em cima e embaixo. */
.pillar:hover { border-color: var(--box-line-hover); padding-block: 3.35rem 2.85rem; }
.pillar:hover .pillar__desc { color: var(--text); }

/* ── Foto de fundo no hover ────────────────────────────────────────────
   Cada pilar revela a foto do ambiente que o representa: salão de
   palestras em Conteúdo, espaço de eventos em Conexões, a cidade em
   Negócios, o bar em Experiências. z-index negativo com `isolation` no
   pai mantém a foto atrás do texto sem precisar empilhar o conteúdo. */
.pillar__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.09);
  /* a foto é revelada por uma cortina que abre a partir do lado da palavra,
     não por fade puro: o movimento passa a ter direção e amarra a imagem ao
     elemento que a nomeia */
  clip-path: inset(0 0 0 100%);
  transition:
    clip-path 620ms var(--ease-out),
    transform 760ms var(--ease-out),
    opacity 300ms var(--ease-out);
  pointer-events: none;
}
/* faixas pares têm a palavra à esquerda, então a cortina abre do outro lado */
.pillar:nth-child(even) .pillar__bg { clip-path: inset(0 100% 0 0); }
.pillar:hover .pillar__bg {
  opacity: 0.34;
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}
.pillar:hover .pillar__bg { opacity: 0.4; }

/* scrim: sem ele o parágrafo em cinza perde contraste sobre a foto */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(5, 4, 4, 0.94), rgba(5, 4, 4, 0.5) 52%, rgba(5, 4, 4, 0.94));
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}
.pillar:hover::before { opacity: 1; }

/* sem ponteiro não há hover: a foto nunca apareceria, então nem carrega */
@media (hover: none) {
  .pillar__bg, .pillar::before { display: none; }
}
/* o zoom é o que incomoda em reduced-motion; o fade pode ficar */
/* em reduced-motion o que incomoda é o zoom e a cortina; o fade fica */
@media (prefers-reduced-motion: reduce) {
  /* a faixa ainda cresce no hover, mas sem animar */
  .pillar { transition: border-color 200ms var(--ease-out); }
  .pillar__bg,
  .pillar:nth-child(even) .pillar__bg,
  .pillar:hover .pillar__bg {
    transform: none;
    clip-path: none;
    transition: opacity 200ms linear;
  }
}
/* faixas pares espelham: a palavra vai para a direita e o texto para a
   esquerda, criando o ziguezague que ocupa as duas margens */
.pillar:nth-child(even) { flex-direction: row-reverse; }

/* número acima do texto, e o bloco encostado na borda EXTERNA da faixa:
   alinhado ao centro ele deixava justamente a margem que devia ocupar */
.pillar__meta { display: flex; flex-direction: column; gap: 0.45rem; }
.pillar:nth-child(even) .pillar__meta { align-items: flex-end; text-align: right; }
.pillar__num {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--orange);
  transition: color 200ms var(--ease-out);
}
.pillar:hover .pillar__num { color: var(--amber); }
.pillar__desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 38ch;
  transition: color 200ms var(--ease-out);
}

/* máscara: a palavra sobe de dentro dela na entrada. line-height 1.2 dá
   folga para o til do "Õ" e o acento do "Ê" não serem cortados pelo
   overflow. */
.pillar__word { margin: 0; overflow: hidden; line-height: 1.2; }
.pillar__fit {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 5.4rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: transform;
}

@media (max-width: 860px) {
  .pillar,
  .pillar:nth-child(even) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  /* empilhado, o ziguezague não faz sentido: tudo volta a alinhar à esquerda */
  .pillar:nth-child(even) .pillar__meta { align-items: flex-start; text-align: left; }
  .pillar__desc { font-size: 0.88rem; }
}

/* ── 04 Speakers · cartaz de line-up ──────────────────────────────────
   Dois nomes confirmados de quatro slots: em grid de cards, os dois
   vazios pesavam metade da seção. Em cartaz, o nome é o objeto e o
   retrato é a recompensa — no desktop ele aparece no palco à direita,
   no mobile abre dentro da própria linha. O mesmo markup serve os dois:
   `.lineup__info` é coluna da linha no desktop e gaveta no mobile. */
.lineup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3.5rem;
  align-items: start;
}
.lineup__list { list-style: none; border-top: 1px solid var(--box-line); }
.lineup__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 1.5rem;
  border-bottom: 1px solid var(--box-line);
}
.lineup__btn {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 0.35rem;
  width: 100%;
  padding: 1.4rem 0.4rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.lineup__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lineup__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.lineup__row.is-on .lineup__name {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lineup__org {
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* cargo e tema: ficha da linha no desktop */
.lineup__info {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.4rem 0.4rem;
  text-align: right;
}
.lineup__thumb { display: none; }
.lineup__role { color: var(--muted); font-size: 0.8rem; }
.lineup__topic { color: var(--muted); font-size: 0.8rem; font-style: italic; white-space: nowrap; }
/* slot ainda vago: presença tipográfica, sem caixa e sem interrogação */
.lineup__row--soon {
  display: grid;
  /* sem isto as duas colunas da linha padrão jogam a marca para a direita */
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 0.35rem;
  padding: 1.4rem 0.4rem;
}
.lineup__row--soon .lineup__name {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: #48423d;
}
.lineup__row--soon .lineup__org { color: var(--muted); }

.lineup__stage { position: sticky; top: 7rem; display: grid; }
.lineup__card {
  position: relative;
  grid-area: 1 / 1;
  border-radius: var(--r-box);
  overflow: hidden;
  border: 1px solid var(--box-line);
  aspect-ratio: 4 / 5;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.lineup__card.is-on { opacity: 1; transform: none; border-color: var(--box-line-hover); }
.lineup__card img { width: 100%; height: 100%; object-fit: cover; }
/* card com a arte do Figma (nome, cargo e logo já desenhados): sem legenda duplicada */
.lineup__card--art figcaption { display: none; }

/* ── Speakers, versão mobile própria: pilha de cards ─────────────────
   Cada card gruda logo abaixo da nav (--stack-top medido em JS) e o
   próximo sobe por cima, com degrau de 8px para a pilha aparecer. Só o
   card: nome e cargo já vêm na arte; o tema entra embaixo quando houver. */
.lineup-m { display: none; }
@media (max-width: 900px) {
  #speakers { overflow-x: clip; overflow-y: visible; }
  .lineup-m { display: block; list-style: none; margin: 1.5rem 0 0; padding: 0 0 14vh; }
  .lineup-m__card {
    position: sticky;
    top: var(--stack-top, 4.5rem);
    margin: 0 0 1.25rem;
    border-radius: var(--r-box);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 -22px 48px -22px rgba(0, 0, 0, 0.95);
    transform-origin: 50% 0;
    will-change: transform;
  }
  .lineup-m__card:nth-child(2) { top: calc(var(--stack-top, 4.5rem) + 8px); }
  .lineup-m__card:nth-child(3) { top: calc(var(--stack-top, 4.5rem) + 16px); }
  .lineup-m__card:nth-child(4) { top: calc(var(--stack-top, 4.5rem) + 24px); }
  .lineup-m__card:nth-child(5) { top: calc(var(--stack-top, 4.5rem) + 32px); }
  .lineup-m__card:nth-child(6) { top: calc(var(--stack-top, 4.5rem) + 40px); }
  .lineup-m__card:nth-child(7) { top: calc(var(--stack-top, 4.5rem) + 48px); }
  .lineup-m__card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .lineup-m__topic {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
    border-top: 1px solid var(--box-line);
  }
}
.lineup__card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.1rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(180deg, transparent, rgba(5, 4, 4, 0.9));
}
.lineup__card figcaption span {
  display: block;
  color: var(--orange);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── mobile: sem palco lateral; o nome abre a ficha com o retrato ─────── */
@media (max-width: 900px) {
  .lineup { grid-template-columns: 1fr; gap: 0; }
  .lineup__stage { display: none; }
  .lineup__row { display: block; }
  .lineup__btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.2rem 1rem;
    padding: 1.25rem 0.25rem;
  }
  .lineup__btn .lineup__name { grid-column: 1; }
  .lineup__btn .lineup__org { grid-column: 1; }
  /* sinal de gaveta: cruz que vira traço quando aberta */
  .lineup__btn::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 14px;
    height: 14px;
    background:
      linear-gradient(var(--orange), var(--orange)) center / 14px 1.5px no-repeat,
      linear-gradient(var(--orange), var(--orange)) center / 1.5px 14px no-repeat;
    transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
  }
  .lineup__row.is-open .lineup__btn::after { transform: rotate(90deg); opacity: 0.5; }
  /* a ficha vive fechada; a altura é animada pelo JS na troca de estado */
  .lineup__info {
    display: block;
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 0.25rem;
    text-align: left;
  }
  /* a ficha mostra o card inteiro (arte 4:5 do Figma): mesma proporção da
     imagem, sem max-height e sem cover — nada é cortado */
  .lineup__thumb {
    display: block;
    /* largura derivada da altura da tela: nome + card + tema precisam caber
       entre a nav e a barra fixa (~23rem de sobra) para o card empilhado
       nunca sair cortado. Em telas altas trava nos 100% da coluna. */
    width: min(100%, calc((100dvh - 23rem) * 0.8));
    height: auto; /* sem isto o height="1350" do HTML vence o aspect-ratio */
    max-width: 440px;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    border-radius: var(--r-box);
    border: 1px solid var(--box-line);
    margin: 0.2rem auto 0.9rem;
  }
  /* nome e cargo já estão na arte; na ficha fica só o tema */
  .lineup__info .lineup__role { display: none; }
  .lineup__role,
  .lineup__topic { white-space: normal; font-size: 0.88rem; }
  .lineup__topic { margin-top: 0.3rem; padding-bottom: 1.4rem; }

  /* a lista desktop (.lineup) some; entra a versão mobile própria */
  .lineup { display: none; }
  .lineup__row--soon {
    display: grid;
    gap: 0.3rem;
    padding: 1.25rem 0.25rem;
  }
}

/* ── 07 Local · corte do edifício ─────────────────────────────────────
   O Itália é um prédio vertical e a noite sobe e desce por ele. Os três
   ambientes viram andares numa régua vertical; o palco à direita troca a
   foto do andar ativo, em vez de espalhar quatro fotos soltas num grid. */
.floors {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 2.5rem 3.5rem;
  align-items: start;
}
.floors__nav { list-style: none; position: relative; padding-left: 1.9rem; }
.floors__nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(251, 107, 1, 0.55), rgba(255, 15, 102, 0.5));
}
.floor { position: relative; border-top: 1px solid var(--box-line); }
.floor:last-child { border-bottom: 1px solid var(--box-line); }
.floor::before {
  content: "";
  position: absolute;
  left: -1.9rem;
  top: 1.5rem;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: var(--r-mark);
  background: var(--bg);
  border: 1px solid var(--box-line-hover);
  transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.floor.is-on::before { border-color: var(--orange); background: var(--orange); }
.floor__btn {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: 1.15rem 0.3rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.floor__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.floor__lvl {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.floor__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.floor.is-on .floor__name {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.floor__note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

.floors__stage { display: grid; aspect-ratio: 16 / 10; }
.stage__panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
  pointer-events: none;
}
.stage__panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stage__panel { height: 100%; min-height: 0; }
.stage__panel--pair { grid-template-rows: 1.4fr 1fr; }
.stage__shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-box);
  border: 1px solid var(--box-line);
  min-height: 0;
}
.stage__shot img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

@media (max-width: 860px) {
  .floors { grid-template-columns: 1fr; }
  .floors__stage { aspect-ratio: 4 / 3; }
  .stage__panel--pair { grid-template-rows: 1fr 1fr; }
}

.venue__map { margin-top: 2.5rem; }


/* ── 06 Patrocinadores por cota ──────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
.tier:first-child { grid-column: 1 / -1; }
.tier__label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--box-line);
}
/* Duas marcas por cota; oferecimento fica mais próximo e a hierarquia
   continua nos tamanhos dos logos e na altura dos espaços. */
.sponsors--lead { max-width: 520px; }
.sponsors--lead .sponsor { min-height: 148px; }
.sponsors--lead .sponsor img { max-height: 58px; }
.sponsors--lead .sponsor--opl img { max-height: 40px; }
/* o Wake é raster 3x: altura explícita para liderar o tier */
.sponsors--lead .sponsor img[alt="Wake"] { height: 34px; width: auto; max-width: none; }
.tier:not(:first-child) .sponsors { max-width: none; }
.sponsors--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .sponsors--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sponsors--small .sponsor { min-height: 96px; font-size: 0.65rem; }
.sponsors--small .sponsor img { max-height: 30px; }
@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; }
  .tier:first-child { grid-column: auto; }
}
@media (max-width: 620px) {
  .sponsors { gap: 0.75rem; }
  .sponsor { padding: 0.75rem 0.5rem; }
  .sponsors--lead .sponsor { min-height: 116px; }
}


/* ── 08 Inscrição ────────────────────────────────────────────────────── */
.cta__stamp {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}
.form__field--check { margin-top: 0.4rem; }
/* checkbox custom: o input real fica sob a caixa, não removido do fluxo —
   sr-only quebraria o foco por teclado no Safari */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
}
.check input {
  position: absolute;
  width: 20px; height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: var(--r-mark);
  border: 1px solid var(--box-line-hover);
  background: var(--box-bg);
  display: grid;
  place-items: center;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.check__box::after {
  content: "✓";
  font-size: 0.78rem;
  font-weight: 700;
  color: #160905;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.check input:checked + .check__box { background: var(--grad); border-color: transparent; }
.check input:checked + .check__box::after { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--orange); outline-offset: 3px; }
.check__text { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.check__text a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.form__field--check.is-invalid .check__box { border-color: var(--red); }

/* ── Footer: linha legal ─────────────────────────────────────────────── */
.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__legal a { color: var(--muted); text-decoration: none; }
.footer__legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* ═══ Interações por seção (assets/js/interactions.js) ═══════════════════
   Regra comum: toda resposta ao ponteiro revela informação ou estado; sem
   ponteiro, o mesmo dado aparece por scroll ou tap. Só transform, opacity e
   clip-path no que roda por frame. Sem glow em caixas — a "luz" vive na
   foto, no logo e no anel, nunca na superfície. Texto marcado com
   [data-placeholder] é provisório e vem em itálico até ser preenchido. */
[data-placeholder] { font-style: italic; opacity: 0.78; }




/* ── 05 Conexões: o cursor carrega um raio de luz; logos dentro dele
   acendem com falloff, e o hover mostra nome + segmento ───────────── */
#conexoes .section__inner { position: relative; }
.logos li { position: relative; }
.logos li:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; border-radius: 4px; }
.logos img { will-change: opacity, transform; }
.logo-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-box);
  background: var(--box-bg);
  border: 1px solid var(--box-line-hover);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.logo-tip.is-on { opacity: 1; }
.logo-tip__name { display: block; color: var(--text); font-weight: 600; }
.logo-tip__seg { color: var(--muted); }



/* ── 08 Inscrição: a seção abre como íris com o scroll; campos
   preenchidos acendem um traço na base ─────────────────────────────── */
.js-iris { clip-path: circle(150% at 50% 38%); }
html.has-gsap .js-iris { clip-path: circle(0% at 50% 38%); }
.form__field input,
.form__field select { transition: border-color 180ms, background-color 180ms, box-shadow 180ms; }
.form__field.is-filled input,
.form__field.is-filled select { border-bottom-color: var(--orange); }

/* reduced-motion: estados finais, sem transições nas peças que se mexem */
@media (prefers-reduced-motion: reduce) {
  .js-iris, html.has-gsap .js-iris { clip-path: none; }
  .evento__arc, .logos img, .stage__panel, .stage__shot img,
  .lineup__card, .moment__row, .agenda__spot, .floor::before { transition: none; }
}

/* ── Estados de animação (JS aplica) ───────────── */
/* o selo da seção 01 tem animação própria: o limbo cresce com o scroll e o
   número sobe de dentro dele, então parte cortado pelo horizonte */
html.has-gsap .evento__arc { opacity: 0; }
html.has-gsap .evento__figure .figure__value { clip-path: inset(100% 0 0 0); }
html.has-gsap .evento__figure .figure__unit { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.has-gsap .evento__arc { opacity: 1; }
  html.has-gsap .evento__figure .figure__value { clip-path: none; }
  html.has-gsap .evento__figure .figure__unit { opacity: 1; }
  .evento__arc::before { transition: none; }
}
.js-reveal { opacity: 1; }
html.has-gsap .js-reveal { opacity: 0; }


/* ── Transições entre seções: bleed suave em vez de corte seco ───────── */
.section--alt { position: relative; }
.section--alt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  background: linear-gradient(180deg, var(--bg), transparent);
  pointer-events: none;
}
.section--alt > * { position: relative; z-index: 1; }

/* ── Polish premium: superfícies com luz de borda ────────────────────────
   Uma linha de luz no topo e um wash interno dão volume às superfícies
   escuras — sem isso os cards leem como retângulos chapados. */
.lineup__card,
.stage__shot,
.form__field input,
.form__field select {
  position: relative;
}


/* seções: o lead respira melhor com medida de leitura controlada */
.section__lead { max-width: 62ch; }

/* ═══════════════════════════════════════════════════════════════════════
   ABERTURA EM THREE.JS
   A cena (.hero__scene) cobre o hero inteiro; o lockup em SVG fica num
   quadro 16:9 (.hero__frame) posicionado por --ring / --ring-y, irmão da
   caixa da imagem do key visual. A imagem, essa sim, é um retângulo com
   preto que não é o preto da página: leva `screen` (preto some, só a luz
   passa) e uma máscara radial centrada no anel, que dissolve as sobras
   antes da borda. */
.hero__still {
  -webkit-mask-image: radial-gradient(ellipse 42% 74% at 49.91% 48.15%, #000 0 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 42% 74% at 49.91% 48.15%, #000 0 76%, transparent 100%);
}
/* a cena não precisa de máscara: cobre o hero todo. `screen` faz o preto do
   canvas sumir no preto da página, para não haver caixa nem na borda do
   viewport nem sob a vinheta. */
.hero__still,
.hero__scene { mix-blend-mode: screen; }

/* A calha da barra de rolagem fica reservada sempre: sem isso a largura do
   viewport muda quando a página trava e destrava, e o key visual dá um
   pulinho lateral no fim da abertura. */
html { scrollbar-gutter: stable; }

/* Enquanto a abertura roda, a página não rola. A classe é posta por JS
   DEPOIS de a cena desenhar de verdade — nunca vem no HTML. A versão
   anterior trazia is-intro no markup e escondia nav/main/footer: qualquer
   script que falhasse em carregar deixava a página preta para sempre.
   Aqui nada é escondido — o hero é o próprio conteúdo — e o que se perde
   numa falha é só a rolagem travada por alguns segundos, que o failsafe
   devolve. */
body.is-intro { overflow: hidden; }
/* o resto da página não deve ser clicável por trás da abertura */
body.is-intro .nav,
body.is-intro .footer { pointer-events: none; }
body.is-intro .dock { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   BARRA FIXA — contagem + CTA
   Entra depois do primeiro scroll; recolhe ao chegar no formulário.
   ═════════════════════════════════════════════════════════════════════ */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(9, 7, 6, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--border);
  /* estado de repouso: fora da tela; quem traz é o GSAP */
  transform: translateY(101%);
}
html:not(.has-gsap) .dock { transform: none; }
.dock__inner {
  width: min(var(--container), 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
/* Data, hora e local vivem aqui, não no hero (que é só o key visual) nem
   na seção 01: a barra acompanha o scroll, então a informação está sempre
   à mão. */
.dock__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.86rem;
}
.dock__meta li strong { color: var(--text); font-weight: 600; }
.dock__meta li + li::before {
  content: "·";
  margin-right: 0.9rem;
  color: var(--orange);
}
/* Countdown numa linha só, número colado na unidade (22d 05h 54m 12s):
   sem rótulo embaixo, mais silencioso ao lado dos dados do evento. */
.dock__countdown {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.dock__faltam {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.25rem;
}
.dock__countdown .countdown__cell {
  flex-direction: row;
  align-items: baseline;
  gap: 0.08em;
  min-width: 0;
}
.dock__countdown .countdown__cell span {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1;
}
.dock__countdown .countdown__cell small {
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--muted);
}
.dock__cta { flex: none; }

@media (max-width: 640px) {
  .dock { padding-inline: 1rem; }
  /* duas linhas: dados em cima, contagem + CTA embaixo. Numa linha só não
     cabe, e cortar o botão não é opção. */
  .dock__inner { flex-wrap: wrap; gap: 0.45rem 0.75rem; }
  .dock__meta { flex-basis: 100%; font-size: 0.78rem; gap: 0.15rem 0.7rem; }
  .dock__meta li + li::before { margin-right: 0.7rem; }
  .dock__meta-local { display: none; }
  .dock__faltam { display: none; }
  .dock__countdown { gap: 0.45rem; margin-left: 0; margin-right: auto; }
  .dock__countdown .countdown__cell span { font-size: 1.05rem; }
}

/* ── Tagline: cada palavra sobe de dentro de uma máscara ──────────────
   A tagline entra depois da abertura, palavra por palavra, e "movimentar"
   fecha com skew + gradiente correndo. */
html.has-gsap .js-hero-tagline { opacity: 0; }
/* inline-block, não block: com block cada palavra viraria uma linha e a
   frase quebraria em quatro. O overflow é a máscara de onde a palavra sobe. */
.hero__tagline .tag__line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* sem o respiro, a máscara corta as descidas do g/q/p */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hero__tagline .tag__word { display: inline-block; }
/* O SplitText move o texto do <em> para um filho, e a máscara .tag__line
   entra entre os dois: `background: inherit` no filho pegaria o fundo da
   máscara (nenhum), não o do <em>, e a palavra sumia. Por isso o gradiente
   é declarado direto no .tag__word, junto do <em>, lá na regra do recorte.
   O filho também é o alvo do skew: <em> é inline e transform não se
   aplica a elemento inline. */