/* =========================================================
   REFERÊNCIA MÁXIMA · Robson Souza
   Landing page · CSS único

   Direção visual: preto e marinho profundo, informações em branco.
   O marinho aparece em dois papéis, e só nesses dois: campo de fundo das
   seções alternadas e cor dos botões. Em fio, borda ou texto ele vira
   ruído. O botão é sempre o marinho mais claro da tela.
   Separação se faz por espaço e por faixa, não por linha: quase não há bordas.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN TOKENS: única fonte de verdade da identidade.
   Para retematizar a página inteira, altere só este bloco:
   nenhuma cor, fonte ou medida crua aparece daqui para baixo.
   --------------------------------------------------------- */
:root{
  /* Primitivas: canais RGB, para derivar transparências da mesma cor */
  --c-black-rgb: 10 11 14;
  --c-navy-rgb:  30 58 107;
  --c-white-rgb: 255 255 255;

  /* Fundos: preto e um marinho profundo nas seções alternadas.
     Antes era um grafite a 5 pontos do preto, imperceptível de propósito.
     A página inteira lia como uma massa escura contínua, e o texto longo
     não ganhava nenhuma divisão visível. O marinho dá a faixa. */
  --black:    rgb(var(--c-black-rgb));
  --graphite: #101A2B;

  /* Azul marinho: exclusivo dos botões */
  --navy:       rgb(var(--c-navy-rgb));
  --navy-hover: #27508F;

  /* Texto, em escala de branco. Subiu de 82/55/38 a pedido do cliente: os
     rótulos a 38% ficavam em 3,6:1 de contraste, abaixo do mínimo de 4,5:1,
     e o corpo secundário a 55% lia como cinza. Os três degraus subiram
     juntos para preservar a hierarquia por tom, que é o que organiza a
     leitura sem usar cor. */
  --white:      #FFFFFF;
  --text:       rgb(var(--c-white-rgb) / .88);
  --text-muted: rgb(var(--c-white-rgb) / .68);
  --text-faint: rgb(var(--c-white-rgb) / .48);

  /* Fios: uma única espessura, usada com parcimônia */
  --hairline: rgb(var(--c-white-rgb) / .10);

  /* Efeitos */
  --halo:       rgb(var(--c-white-rgb) / .07);  /* separa o recorte do preto */
  --scrim:      rgb(var(--c-black-rgb) / .92);
  --progress:   var(--navy-hover);              /* barra de leitura no topo */
  --shadow-btn: 0 16px 40px -16px rgb(var(--c-navy-rgb) / .9);

  /* Tipografia */
  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display-xl: clamp(3rem,    1.7rem + 4.6vw, 4.8rem);   /* preço */
  --fs-evento:     clamp(2.9rem,  1.2rem + 6.4vw, 5.6rem);   /* nome do evento, o maior da página */
  --fs-headline:   clamp(1.35rem, 1rem + 1.5vw,   2.15rem);  /* headline do hero */
  --fs-display-md: clamp(2.1rem,  1.2rem + 3.6vw, 3.6rem);   /* frase-manifesto */
  --fs-display-sm: clamp(1.9rem,  1.2rem + 3vw,   3.15rem);  /* títulos de seção */
  --fs-display-xs: clamp(1.25rem, 1rem + .9vw,    1.75rem);  /* fechamento e citação */
  --fs-passo:        clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); /* número do passo */
  --fs-passo-titulo: clamp(1.5rem,  1.25rem + 1vw,  2rem);   /* título do passo */
  --fs-body:       clamp(1rem,    .96rem + .2vw,  1.08rem);
  --fs-lead:       clamp(1.05rem, .98rem + .35vw, 1.22rem);
  --fs-counter:    clamp(2rem,    1.3rem + 2.2vw, 2.9rem);

  --tracking-label: .34em;
  --leading-display: 1.12;

  /* Medidas e ritmo (o espaço é o que sustenta o luxo) */
  --wrap: 1200px;
  --wrap-narrow: 720px;
  --pad: clamp(1.5rem, 5vw, 3.5rem);
  /* Era clamp(6rem, 14vw, 12rem): 192px em cada ponta num monitor comum, ou
     384px de vazio entre uma seção e a seguinte. Como o celular passou a ter
     regra própria, este token governa só o desktop. */
  --space-section: clamp(4.5rem, 8vw, 8rem);
  --space-block:   clamp(3rem, 6vw, 5rem);
  /* Entre um passo e o próximo. Era clamp(4.5rem, 10vw, 8rem): 128px por
     vão, 640px somados nos seis pilares. Só os pilares usam este token. */
  --space-passo:   clamp(2.5rem, 4.5vw, 4.5rem);
  /* Arredondamento mínimo: o suficiente para o canto não parecer corte seco,
     pouco o bastante para não virar botão de aplicativo. */
  --radius: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.75;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* Rede de proteção contra transbordo lateral. 'clip' em vez de 'hidden'
     porque 'hidden' transforma o body em contexto de rolagem e quebra o
     scroll suave das âncoras. A primeira linha é o fallback. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,picture{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; line-height:var(--leading-display); }
p{ margin:0 0 1.2em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

/* Fora da tela por transform, não por left:-9999px, que alargava o documento. */
.skip-link{
  position:absolute; top:0; left:0; z-index:200;
  background:var(--navy); color:var(--white); padding:.75rem 1.25rem;
  transform:translateY(-120%);
}
.skip-link:focus{ transform:none; }
:focus-visible{ outline:1px solid var(--white); outline-offset:4px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:var(--wrap-narrow); }

.section{ padding-block:var(--space-section); position:relative; }
section[id]{ scroll-margin-top:2rem; } /* respiro; a nav não é mais fixa */
/* A seção de inscrição tem um respiro grande no topo. Parar na borda dela
   deixava o visitante olhando para o vazio. A margem negativa desconta esse
   respiro, de modo que o conteúdo chegue a 72px do topo em qualquer tela. */
#inscricao{ scroll-margin-top:calc(72px - var(--space-section)); }
.section--flush{ padding-block:0; }
.section--black{ background:var(--black); }
.section--graphite{ background:var(--graphite); }

/* No celular o respiro do desktop (96px, o piso do --space-section) era
   grande demais nas duas pontas: 192px de vazio entre uma seção e a
   seguinte, somando rodapé de uma com topo da outra.

   Esse respiro existia para separar blocos quando o fundo era grafite
   quase invisível. Com a faixa de marinho marcando onde cada seção começa,
   a separação deixou de depender do vazio, e ele pôde cair para 56px.

   padding-block, e não só padding-top: mexer numa ponta só deixaria a
   seção assimétrica e cortaria o vão pela metade em vez de por inteiro.
   O desktop segue governado pelo token. */
@media (max-width:860px){
  .section{ padding-block:clamp(3.5rem, 9vw, 6rem); }
  .section--flush{ padding-block:0; }
}

/* ---------- Tipografia comum ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.68rem; font-weight:400;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  /* Branco cheio: são os rótulos que anunciam cada seção. Em tom apagado
     eles liam como legenda técnica, não como abertura de bloco. */
  color:var(--white); margin:0 0 1.8rem;
}
/* Os rótulos centralizados são os que ABREM os blocos-chave da página — "A
   imersão", "O que será trabalhado", "Para quem é". A 11px eles anunciavam
   uma seção inteira com o corpo de uma nota de rodapé.

   Aqui ganham corpo, peso 500 e vêm mais perto do título, para que rótulo e
   frase sejam lidos como uma unidade em vez de dois elementos soltos. O
   tracking cede um pouco: no corpo maior, .34em espalharia demais e o
   conjunto perderia densidade.

   Vale nos dois tamanhos, por isso fora de media query. Só esta classe: o
   rótulo do hero usa .eyebrow puro e segue com regra própria. */
.eyebrow--center{
  text-align:center;
  font-size:clamp(.9rem, .78rem + .55vw, 1.15rem);
  font-weight:500;
  letter-spacing:.24em;
  margin-bottom:clamp(1rem, 2.5vw, 1.5rem);
}

/* A marca do evento escrita por extenso NÃO é rótulo de seção. Ela usava
   .eyebrow, a mesma classe de "A IMERSÃO" e "PARA QUEM É", e ficava
   indistinguível de uma legenda de campo: Inter, 11px, branco a 38%. Ao lado
   de DATA e LOCAL, na seção de oferta, o nome do evento tinha o mesmo peso
   visual do rótulo "FORMATO".

   Aqui ela assina: Playfair, corpo maior, branco cheio e tracking curto —
   nome, não categoria. Continua abaixo do título da seção na hierarquia,
   porque quem fecha a venda é a frase, não a marca. */
.brandmark{
  font-family:var(--display);
  font-size:clamp(1.2rem, .9rem + 1.2vw, 1.75rem);
  font-weight:400; line-height:1.15;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
  margin:0 0 clamp(1.2rem, 3vw, 1.8rem);
}
.brandmark--center{ text-align:center; }
/* Em telas estreitas o tracking largo faz o rótulo quebrar com uma palavra
   sozinha na segunda linha. Vale mais apertar um pouco do que quebrar. */
@media (max-width:520px){
  .eyebrow{ letter-spacing:.2em; }

  /* "Imersão presencial com Robson Souza" é o rótulo mais longo da página:
     35 caracteres em caixa alta. Ele deve ficar SEMPRE em uma linha e
     SEMPRE ocupando a largura disponível — não é um rótulo que encolhe até
     caber, é a apresentação do evento.

     Por isso o corpo é em vw puro, sem clamp: assim ele acompanha a janela
     em vez de travar num piso e virar letra miúda. O nowrap garante a linha
     única, e o tracking curto devolve a largura que a caixa alta consome. */
  .hero__inner > .eyebrow{
    white-space:nowrap;
    text-align:center;
    font-size:3.3vw;
    letter-spacing:.08em;
  }
}

.h2{
  font-family:var(--display); font-size:var(--fs-display-sm);
  font-weight:400; line-height:var(--leading-display);
  color:var(--white); text-wrap:balance;
}
.h2--center{ text-align:center; margin-inline:auto; max-width:20ch; }
/* Ênfase em itálico, não em cor: mantém o conjunto monocromático */
.h2 em, .statement em, .hero__headline em, .offer__title em, .offer__closing em, .pullquote em{
  font-style:italic; color:var(--text-muted);
}

.prose{ max-width:60ch; }
.prose--center{ margin-inline:auto; text-align:center; }
.prose p{ color:var(--text-muted); }
.prose strong{ color:var(--white); font-weight:400; }
.h2 + .prose, .h2 + .bio__lead{ margin-top:clamp(1.75rem, 3vw, 2.5rem); }
.prose__kicker{
  margin-top:2.5rem;
  font-family:var(--display); font-size:1.35rem; font-style:italic;
  line-height:1.5; color:var(--white) !important;
}

/* ---------- Botões: o único lugar com azul marinho ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--white);
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 2rem; border:0; border-radius:var(--radius);
  transition:background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  cursor:pointer; text-align:center; white-space:nowrap;
}
.btn:hover{ background:var(--navy-hover); transform:translateY(-2px); box-shadow:var(--shadow-btn); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:.62rem 1.1rem; font-size:.66rem; letter-spacing:.14em; }
.btn--lg{ padding:1rem 2.4rem; }
.btn--xl{ padding:1.1rem 2.4rem; font-size:.78rem; width:100%; max-width:500px; }
/* No celular o respiro lateral do desktop deixa o botão largo demais para o
   texto que carrega. O respiro vertical fica, porque é ele que dá a área de
   toque. */
@media (max-width:520px){
  .btn{ padding-inline:1.35rem; }
  .btn--sm{ padding-inline:1rem; }
  .btn--lg{ padding-inline:1.5rem; }
}

/* =========================================================
   BARRA DE PROGRESSO: o único elemento fixo
   ========================================================= */
.progress{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:2px; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:100%;
  background:var(--progress);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* =========================================================
   NAV: no fluxo normal, rola junto com a página
   ========================================================= */
.nav{ position:relative; z-index:100; background:var(--black); }

/* No desktop ela reaparece ao subir o scroll e some ao descer.
   Sticky em vez de fixed: continua ocupando espaço no topo, então a
   troca não provoca salto de layout. No mobile nada disso se aplica,
   porque lá quem sustenta o CTA é a barra fixa de baixo. */
@media (min-width:861px){
  .nav{
    position:sticky; top:0;
    transition:transform .45s var(--ease), background .45s var(--ease);
  }
  .nav.is-hidden{ transform:translateY(-100%); }
  .nav.is-floating{
    background:var(--scrim);
    backdrop-filter:blur(16px);
  }
}
@media (prefers-reduced-motion: reduce){
  .nav{ transition:none; }
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{
  font-family:var(--display); font-size:1rem; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none; color:var(--white);
}
.nav__right{ display:flex; align-items:center; gap:1.6rem; }
.nav__date{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-faint);
}
@media (max-width:640px){
  .nav__date{ display:none; }
  /* cabe ao lado da assinatura sem quebrar linha */
  .nav__brand{ font-size:.88rem; letter-spacing:.16em; }
  .nav .btn--sm{ padding:.7rem 1rem; font-size:.6rem; letter-spacing:.1em; }
}
/* o CTA da oferta é longo: permite quebrar em telas estreitas */
.btn--xl{ white-space:normal; }

/* =========================================================
   1. HERO: retrato recortado sobre o preto
   ========================================================= */
.hero{
  position:relative; background:var(--black);
  padding-block:clamp(3rem, 7vw, 5.5rem) 0; overflow:hidden;
}
.hero__inner{
  position:relative; z-index:1;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr; gap:clamp(1rem, 4vw, 3rem);
  align-items:end;
}
/* O bloco é alinhado pela base, junto com a foto. O recuo de baixo é o que
   define a altura dele na coluna: quanto maior, mais o texto sobe. */
.hero__text{ padding-bottom:clamp(3rem, 11vw, 11rem); max-width:42rem; }
/* O nome do evento é o elemento dominante da página: tratado como
   assinatura, em caixa alta e empilhado em duas linhas. */
.hero__evento{
  font-family:var(--display);
  font-size:var(--fs-evento);
  font-weight:400; line-height:.97; letter-spacing:.01em;
  text-transform:uppercase; color:var(--white);
  margin:0 0 1.6rem;
}
/* A pergunta vem logo abaixo, como headline: forte, mas subordinada. */
.hero__headline{
  font-family:var(--display);
  font-size:var(--fs-headline);
  font-weight:400; line-height:1.28; color:var(--white);
  margin-bottom:1.7rem; max-width:26ch; text-wrap:balance;
}
.hero__lead{ color:var(--text-muted); max-width:44ch; font-size:var(--fs-lead); margin-bottom:2.4rem; }
.hero__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.9rem;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--white); margin-bottom:2.6rem;
}
.hero__meta .dot{ opacity:.5; }
.hero__note{
  margin:1.3rem 0 0; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--white);
}
/* halo suave atrás do recorte: separa o terno preto do fundo preto */
.hero__media{ position:relative; align-self:end; }
.hero__media::before{
  /* sem sangria lateral: alargava o documento no mobile */
  content:""; position:absolute; inset:-8% 0 -2% 0; z-index:0;
  background:radial-gradient(58% 52% at 52% 42%, var(--halo), transparent 72%);
}
/* dissolve a base do recorte no preto, em vez de cortar reto na borda da seção */
.hero__media img{
  position:relative; z-index:1; width:100%; height:auto;
  mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}
/* Véu sobre os 80% de baixo do retrato. A máscara acima só apaga os últimos
   22%, e a faixa das mãos, logo acima disso, continuava clara o bastante
   para disputar atenção com o texto que vem em seguida. O véu escurece essa
   transição sem recortar nada.
   z-index 2 para ficar acima da imagem (1) e do halo (0). */
.hero__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:80%; z-index:2;
  background:linear-gradient(to top, var(--black), transparent);
  pointer-events:none;
}

@media (min-width:861px){
  /* O nome atravessa a página inteira, acima da divisão texto/imagem.
     Dentro da coluna ele caberia em uma linha só com 55px; ocupando toda a
     largura, cabe com 104px. O tamanho é calculado para a linha nunca
     quebrar: o texto mede 10,42em, então 8,4vw sempre sobra folga. */
  .hero__inner{
    grid-template-columns:1fr .8fr;
    column-gap:clamp(1rem, 4vw, 3rem);
    row-gap:0;
  }
  .hero__inner > .eyebrow{ display:none; }
  .hero__evento{
    grid-column:1 / -1;
    font-size:min(8.4vw, 6.35rem);
    margin-bottom:clamp(1.5rem, 3vw, 2.5rem);
  }
  .hero__text{ grid-column:1; }
  .hero__media{ grid-column:2; }
}
@media (max-width:860px){
  /* O nome do evento abre a página, como no desktop, e a foto vem depois.
     Antes o retrato ocupava a primeira dobra sozinho e o visitante rolava
     sem saber do que se tratava.
     Centralizado só aqui: no desktop o nome é dimensionado para atravessar
     a página em uma linha, e centralizar não teria efeito além de quebrar
     o alinhamento com o texto da coluna. */
  /* O respiro entre a nav e o retrato veio do desktop, onde a foto divide a
     linha com o texto e precisa dessa folga. No celular ela abre a página
     sozinha, e o espaço só empurrava a dobra para baixo. */
  .hero{ padding-top:clamp(1rem, 3vw, 2rem); }
  .hero__inner{ gap:0; }
  /* O nome do evento assina a foto: título e retrato dividem a MESMA célula
     da grade, com o título ancorado no pé dela e acima na pilha (z-index 3,
     sobre a imagem em 1 e o véu em 2).

     Sobreposto por grade, e não por position:absolute, a altura da linha
     continua governada pela foto — o rótulo e o texto abaixo seguem fluindo
     normalmente, sem precisar de altura fixa em lugar nenhum.

     O recuo de baixo tira o título da faixa onde a máscara já apagou a
     imagem, de modo que ele caia sobre retrato de verdade e não sobre fundo. */
  .hero__evento{
    grid-row:1; grid-column:1;
    align-self:end; z-index:3; position:relative;
    text-align:center; margin:0;
    padding-bottom:clamp(2.5rem, 14vw, 6rem);
  }
  /* 17rem no lugar de 26rem: como o retrato é exibido inteiro, a largura é
     o que governa a altura dele. Reduzir aqui encolhe a foto por escala,
     sem cortar nada — o gesto das mãos continua visível. */
  .hero__media{ grid-row:1; grid-column:1; max-width:17rem; margin-inline:auto; }
  /* Margem NEGATIVA de propósito: a máscara do retrato deixa o pé dele
     transparente, mas esses pixels invisíveis continuam ocupando altura no
     layout. O vão acima do rótulo não era espaçamento, era imagem que não
     se vê. A margem reclama essa faixa em vez de somar respiro a ela. */
  .hero__inner > .eyebrow{
    grid-row:2; margin-top:-3vh;
    /* Ao subir para dentro da área da foto, o rótulo passava POR BAIXO do
       véu: ele é estático e o véu é posicionado com z-index 2. Precisa de
       position + z-index para participar da mesma pilha, junto do título. */
    position:relative; z-index:3;
  }
  .hero__text{ grid-row:3; padding-bottom:clamp(3.5rem, 10vw, 5rem); }

  /* Data e formato viram duas linhas empilhadas no celular, sem o bullet.
     Ele existe para separar dois itens na MESMA linha; quebrado em duas, a
     própria quebra já faz essa separação e o ponto sobra pendurado no fim
     da primeira.

     column em vez de deixar o wrap decidir: assim são sempre duas linhas,
     em vez de uma ou duas conforme a largura da tela. O gap encolhe porque
     agora ele é vertical, entre linhas, e não mais entre itens lado a lado.

     Some só visualmente — o span já era aria-hidden, então nada muda para
     leitor de tela. */
  .hero__meta{
    flex-direction:column;
    align-items:center;
    gap:.3rem;
    text-align:center;
  }
  .hero__meta .dot{ display:none; }
  /* margin-inline:auto junto com o text-align: a headline tem max-width em
     ch, então sem centrar a caixa ela ficaria com o texto centralizado
     dentro de um bloco encostado à esquerda. */
  .hero__headline{ text-align:center; margin-inline:auto; }
  /* O botão é inline-flex, então não obedece a text-align do pai como um
     texto obedeceria: centrar exige dar largura de conteúdo a ele e empurrar
     as margens. Feito assim, e não com text-align no .hero__text, para não
     arrastar o parágrafo junto. */
  .hero__text .btn{ display:flex; width:fit-content; margin-inline:auto; }
  .hero__note{ text-align:center; }
}
.br-lg{ display:none; }
@media (min-width:861px){ .br-lg{ display:inline; } }

/* =========================================================
   2. PREMISSA
   ========================================================= */
.statement{
  font-family:var(--display); font-size:var(--fs-display-md);
  font-weight:400; line-height:1.14; color:var(--white);
  margin-bottom:2.8rem; max-width:17ch; text-wrap:balance;
}
/* Como a frase tem max-width em ch, centrar o texto sem centrar a caixa
   deixaria tudo alinhado dentro de um bloco encostado à esquerda. */
@media (max-width:860px){
  .statement{ text-align:center; margin-inline:auto; }
}

/* =========================================================
   4. PILARES: sem caixas e sem grade, só espaço
   ========================================================= */
/* Coluna única e centralizada, igual no mobile e no desktop: cada pilar
   entra sozinho na tela, então a leitura vira uma sequência de passos
   conforme o scroll avança. O respiro largo é o que garante que só um
   apareça de cada vez. */
.pillars{
  display:grid; gap:var(--space-passo);
  /* Recuo próprio em vez de --space-block: aquele token também governa a
     lista de "para quem é" e a página de obrigado, que não pediram corte. */
  max-width:34rem; margin:clamp(1.5rem, 3vw, 2.75rem) auto 0;
  text-align:center;
}
/* No celular o vão de 72px entre passos somava 360px só de espaço vazio nos
   seis pilares, e a lista virava rolagem. O respiro largo fazia sentido
   quando o fundo não separava nada; com a faixa de marinho marcando a seção,
   os passos podem ficar próximos sem se confundirem com o bloco anterior. */
@media (max-width:860px){
  .pillars{
    gap:clamp(1.75rem, 5vw, 2.75rem);
    margin-top:clamp(1.5rem, 5vw, 2.5rem);
  }
}
.pillar__num{
  display:block; font-family:var(--display); font-style:italic;
  font-size:var(--fs-passo); line-height:1;
  color:var(--text-faint); margin-bottom:1rem;
}
.pillar__title{
  font-family:var(--display); font-size:var(--fs-passo-titulo); font-weight:400;
  color:var(--white); margin-bottom:.85rem; line-height:1.2;
}
.pillar p{
  color:var(--text-muted); font-size:1.02rem;
  margin:0 auto; max-width:36ch;
}

.mid-cta{ text-align:center; margin-top:clamp(2rem, 4vw, 3.25rem); }

/* =========================================================
   5. BIO: recorte sobre o preto, sem moldura
   ========================================================= */
.bio{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center; padding-inline:var(--pad); padding-block:var(--space-section);
}
@media (min-width:861px){ .bio{ grid-template-columns:.9fr 1fr; } }
.bio__media{ position:relative; }
.bio__media::before{
  /* sem sangria lateral: era a origem do transbordo horizontal */
  content:""; position:absolute; inset:-6% 0; z-index:0;
  background:radial-gradient(56% 50% at 50% 45%, var(--halo), transparent 72%);
}
.bio__media img{
  position:relative; z-index:1; width:100%; height:auto;
  mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
}
/* Mesmo véu do retrato do hero, aqui na metade de baixo. Este retrato não
   tinha nenhum: só a máscara acima, que apaga os últimos 20% mas não
   escurece nada do que fica visível. */
.bio__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:50%; z-index:2;
  background:linear-gradient(to top, var(--black), transparent);
  pointer-events:none;
}
.bio__lead{ color:var(--text-muted); max-width:46ch; font-size:var(--fs-lead); }
/* fatos: espaçamento no lugar de bordas */
.facts{ display:grid; gap:.85rem; margin:2.6rem 0; }
.facts li{
  padding-left:1.6rem; position:relative;
  color:var(--text-muted); font-size:.97rem; line-height:1.6;
}
.facts li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:6px; height:1px; background:var(--text-faint);
}
.facts strong{ color:var(--white); font-weight:400; }
.bio__close{
  margin:0; max-width:50ch; color:var(--text-muted);
  font-family:var(--display); font-style:italic; font-size:1.2rem; line-height:1.6;
}

/* =========================================================
   6. PARA QUEM É: lista limpa, sem cartões
   ========================================================= */
.checks{
  display:grid; gap:1.5rem; max-width:52ch;
  margin:var(--space-block) auto 0;
}
.checks li{
  position:relative; padding-left:2.2rem;
  color:var(--text-muted); font-size:1.05rem; line-height:1.65;
}
.checks li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:5px;
  border-left:1px solid var(--white); border-bottom:1px solid var(--white);
  transform:rotate(-45deg); opacity:.65;
}
.pullquote{ margin:clamp(4rem, 8vw, 6rem) auto 0; max-width:52ch; text-align:center; }
.pullquote p:first-child{
  font-family:var(--display); font-size:var(--fs-display-xs);
  line-height:1.4; color:var(--white); text-wrap:balance;
}
.pullquote p:last-child{ margin-bottom:0; color:var(--text-muted); font-size:1.02rem; }

/* =========================================================
   7. OFERTA
   ========================================================= */
.section--offer{ background:var(--black); position:relative; overflow:hidden; text-align:center; }
.offer__bg{ position:absolute; inset:0; z-index:0; }
.offer__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 12%;
  opacity:.10; filter:grayscale(1);
}
.offer__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--black) 0%, rgb(var(--c-black-rgb) / .82) 40%, var(--black) 100%);
}
.offer{ position:relative; z-index:1; }
.offer__title{
  font-family:var(--display); font-size:var(--fs-display-sm);
  line-height:var(--leading-display); color:var(--white);
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem); text-wrap:balance;
}
/* No celular o nome do evento ganha presença e o título cede espaço:
   numa tela estreita o título longo estava abafando a marca. */
@media (max-width:640px){
  #inscricao .eyebrow{
    font-size:1rem; letter-spacing:.16em;
    color:var(--text-muted); margin-bottom:1.1rem;
  }
  .offer__title{ font-size:1.6rem; }
}
/* dados do evento: três colunas de ar, sem moldura */
.offer__facts{
  display:grid; gap:2rem clamp(1.5rem, 4vw, 3rem);
  margin:0 0 clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.offer__facts dt{
  font-size:.62rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-faint); margin-bottom:.7rem;
}
.offer__facts dd{ margin:0; font-size:1rem; color:var(--white); font-weight:300; }

.countdown{ margin:0 0 clamp(2.5rem, 5vw, 3.5rem); }
.countdown__label{
  font-size:.62rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-faint); margin-bottom:1.1rem;
}
/* Quatro colunas iguais que nunca quebram linha. Com flex + wrap, a largura
   mínima dos itens somada aos gaps passava de 284px, e abaixo de ~332px de
   tela o "seg" caía sozinho para a segunda linha. Em grade as colunas
   dividem o que existe, então o relógio se aperta em vez de se partir.
   O max-width mantém o agrupamento do desktop: sem ele as quatro colunas
   se espalhariam pelos 720px da coluna estreita. */
.countdown__grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(.75rem, 3vw, 2.75rem);
  max-width:23rem; margin-inline:auto;
}
.countdown__grid > div{ min-width:0; }
.countdown__grid span{
  display:block; font-family:var(--display); font-size:var(--fs-counter);
  line-height:1; color:var(--white); font-variant-numeric:tabular-nums;
}
.countdown__grid small{
  display:block; margin-top:.7rem; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint);
}

.price{ margin-bottom:clamp(2.5rem, 5vw, 3.25rem); }
.price__label{
  font-size:.62rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-faint); margin-bottom:.8rem;
}
.price__value{
  font-family:var(--display); font-size:var(--fs-display-xl);
  line-height:1; margin:0; color:var(--white); font-weight:400;
}
.offer__scarcity{ margin:1.8rem auto 0; max-width:40ch; font-size:.88rem; color:var(--text-faint); }
.offer__closing{
  margin:clamp(4rem, 8vw, 6rem) auto 0; max-width:40ch;
  font-family:var(--display); font-size:var(--fs-display-xs);
  line-height:1.45; color:var(--white); text-wrap:balance;
}

/* =========================================================
   FOOTER: o único fio da página
   ========================================================= */
.footer{ background:var(--black); color:var(--text-faint); padding-block:3rem 7rem; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  align-items:center; justify-content:space-between;
  border-top:1px solid var(--hairline); padding-top:2.5rem;
}
.footer p{ margin:0; }
/* Assinatura do rodapé: sobe de .85rem/muted para 1.05rem/branco. Era a
   marca do evento fechando a página com menos presença que o aviso legal
   logo abaixo. */
.footer__brand{
  font-family:var(--display); letter-spacing:.16em; text-transform:uppercase;
  font-size:1.05rem; color:var(--white);
}
.footer__legal{ font-size:.75rem; }
@media (min-width:861px){ .footer{ padding-bottom:3rem; } }

/* =========================================================
   STICKY BAR (mobile)
   ========================================================= */
.stickybar{
  position:fixed; inset:auto 0 0 0; z-index:99;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.15rem calc(.8rem + env(safe-area-inset-bottom));
  background:var(--scrim); backdrop-filter:blur(16px);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.stickybar.is-visible{ transform:none; }
.stickybar__info{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.stickybar__info strong{
  font-family:var(--display); font-weight:400; font-size:1.05rem; color:var(--white);
  letter-spacing:.04em;
}
.stickybar__info span{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint);
}
.stickybar .btn{ flex:none; }
@media (min-width:861px){ .stickybar{ display:none; } }

/* =========================================================
   REVEAL
   ========================================================= */
/* Só esconde se o JS estiver ativo (classe .js vem de um inline script no <head>).
   Sem JS, ou se main.js falhar, o conteúdo aparece normalmente. */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.no-reveal .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  .reveal, .js .reveal{ opacity:1 !important; transform:none !important; }
  .btn:hover{ transform:none; }
  .stickybar{ transition:none; }
}

/* =========================================================
   PÁGINA /inscricao: formulário do Google em tela cheia
   ========================================================= */
/* dvh acompanha a barra do navegador no celular; vh é o fallback de quem
   não conhece dvh e ficaria com a página alta demais, cortando o rodapé
   do formulário atrás da barra de endereço. */
/* height, e não min-height: com min-height a página podia crescer além da
   viewport e ganhar barra de rolagem própria. Aí o iframe, dimensionado antes
   da barra existir, ficava mais largo que a área visível, e o overflow-x:clip
   do body cortava a direita do formulário. Travando a altura, a página nunca
   rola: quem rola é só o formulário, por dentro. */
.formpage{
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--black);
}
/* Sem fio embaixo, de propósito: a página inteira tem um só, o do rodapé.
   Aqui a separação é o espaço, como no resto do projeto. */
.formpage__bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.1rem var(--pad);
}
.formpage__brand{
  font-family:var(--display); font-size:1.15rem;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--white); text-decoration:none;
}
.formpage__date{
  font-size:.66rem; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-faint);
}
/* min-height:0 é o que permite o iframe encolher dentro do flex. Sem ele o
   item assume a altura do conteúdo e estoura a viewport, empurrando a barra
   para fora da tela. */
.formpage__frame{ flex:1 1 auto; display:flex; min-height:0; }
.formpage__frame iframe{
  flex:1 1 auto; width:100%; border:0; min-height:0;
  /* O formulário do Google é claro e não dá para retematizar. Pintar a
     moldura de branco desde já evita o piscar preto→branco no carregamento. */
  background:var(--white);
}
@media (max-width:520px){
  .formpage__date{ display:none; }  /* a data já está na home; aqui rouba a linha */
}

/* =========================================================
   PÁGINA /obrigado: confirmação de inscrição
   ========================================================= */
.thanks{
  min-height:100vh;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  background:var(--black);
  padding:var(--space-block) var(--pad);
}
.thanks__inner{ max-width:40rem; text-align:center; }
/* Aqui a marca abre a página, como o nome do evento abre a home: mesmo token
   de corpo (--fs-evento), mesma entrelinha e mesmo tracking do hero. Numa
   página que existe sozinha, tratá-la como rótulo fazia o conjunto parecer
   mensagem de sistema em vez de parte do evento. */
.thanks .brandmark{
  font-size:var(--fs-evento);
  letter-spacing:.01em;
  line-height:.97;
  margin-bottom:clamp(1.4rem, 3.5vw, 2.2rem);
}
.thanks__title{
  font-family:var(--display); font-size:var(--fs-display-sm);
  font-weight:400; line-height:var(--leading-display);
  color:var(--white); margin:0 0 clamp(1.5rem, 3vw, 2.2rem);
  text-wrap:balance;
}
.thanks__title em{ font-style:italic; color:var(--text-muted); }
.thanks__lead{
  color:var(--text-muted); font-size:var(--fs-lead);
  margin-bottom:1.6rem;
}
/* Sem margem inferior: é o último elemento da página, e o respiro de baixo
   já vem do padding do .thanks. */
.thanks__note{
  color:var(--text-faint); font-size:.82rem;
  margin-bottom:0;
}

/* Impressão */
@media print{
  .nav,.stickybar,.offer__bg{ display:none !important; }
  body,.section--black,.section--graphite,.section--offer,.hero,.footer{
    background:#fff !important; color:#000 !important;
  }
  .h2,.hero__evento,.hero__headline,.statement,.offer__title,.price__value,.pillar__title{ color:#000 !important; }
}