/* ═══════════════════════════════════════════════════════════
   TOP 1833 — RISE
   legendariosbraveheart.com
   Build conforme TOP_1833_RISE_LP_BUILD_BRIEF_v2.md (10 secoes)
   Excecao registrada: o §2.5 (movimento) foi revogado por
   instrucao direta do cliente — a pagina tem scroll dinamico.
   ═══════════════════════════════════════════════════════════ */

/* fonts/fonts.css e carregado via <link> no HTML — @import bloquearia
   a renderizacao e o brief exige LCP < 2.5s (§2.6). */

/* ─────────────────────────────────────────────
   TOKENS — Brief §2.1. Nada fora desta paleta.
   ───────────────────────────────────────────── */
:root {
  --flag-red:      #A63244;  /* acento principal — palavra de impacto, CTA */
  --flag-navy:     #253677;  /* estrutura, blocos, profundidade */
  --ice-white:     #FEFDFC;  /* texto principal sobre escuro */
  --brushed-steel: #746370;  /* divisores, bordas, estados desativados */
  --gold-ray:      #E1B870;  /* SOMENTE luz. Nunca preenchimento. */
  --base-dark:     #080402;  /* fundo padrao da pagina */

  /* Derivado. §2.6 exige contraste minimo AA; --brushed-steel sobre
     --base-dark mede 3,66:1, insuficiente para texto de 18px (precisa
     4,5:1). Mesmo matiz, lightness elevada -> 4,55:1. Usado apenas em
     TEXTO secundario; bordas e divisores seguem --brushed-steel. */
  --steel-text:    #83727F;

  /* Desfoque unico de todas as fotos de fundo (§ hero, 04, 06, 08, 09) */
  --bg-blur:       3px;

  --red-hover:     #992E3F;  /* --flag-red escurecido 8% (§4) */

  /* Derivado. --flag-red vive bem sobre campo escuro, mas convive mal
     com foto clara: sobre a mata da §09 mede 1,37:1, e escurecer o
     veu nao resolve (o teto, sobre preto puro, e 3,16:1 -- vermelho
     escuro converge com fundo escuro). Mesmo matiz, lightness alta.
     Usado no acento sobre foto e no fim quente do trilho da §04. */
  --flag-red-lit:  #C54F5D;

  /* Tipografia — familias extraidas do site atual (§2.2) */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  /* Escala §2.2 (v2) — subiu um degrau: sao 10 secoes, cada uma
     carrega mais peso. Interpolada entre 375px e 1440px. */
  --t-h1:   clamp(3.25rem,   1.93rem + 5.63vw, 7rem);      /*  52 → 112 */
  --t-h2:   clamp(2.375rem,  1.45rem + 3.94vw, 5rem);      /*  38 →  80 */
  --t-lead: clamp(1.25rem,   1.12rem + 0.56vw, 1.625rem);  /*  20 →  26 */
  --t-body: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /*  17 →  19 */
  --t-meta: clamp(0.8125rem, 0.80rem + 0.07vw, 0.875rem);  /*  13 →  14 */

  /* Layout §2.3 (v2) — respiro maior: nao ha secao de transicao */
  --gap-section: clamp(7.5rem, 15vh, 13.75rem);  /* 120 → 220 */
  --measure:     62ch;
  --shell:       1240px;
  --pad-x:       clamp(1.25rem, 5vw, 5rem);

  /* Arco DOWN → RISE. Default = escuro total. Cada secao redefine.
     §2.1: a luz cresce pela sobreposicao da imagem, nao pelo background. */
  --veil: 0.86;
  --ray:  0;
}

/* ─────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Contencao lateral nos DOIS elementos de raiz. So no body nao
   basta: o que escapa do bloco de contencao do body ainda entra na
   largura de rolagem da raiz. clip, nunca hidden -- hidden cria
   container de scroll e mata o position:sticky do countdown; clip
   nao cria, e com overflow-y em visible o eixo vertical segue
   rolando normalmente. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--base-dark);
  color: var(--ice-white);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  /* clip, nao hidden: hidden transforma o body em container de
     scroll e quebra o position:sticky do countdown. */
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

/* §2.6 — foco de teclado visivel em todo elemento interativo */
:focus-visible {
  outline: 2px solid var(--flag-red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--flag-red); color: var(--ice-white);
  padding: 0.75rem 1.25rem; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.skip-link:focus { left: 0; }

/* ═════════════════════════════════════════════
   COUNTDOWN — topo do site
   Duas vidas num componente so: nasce como banda
   pesada e cinematografica, e ao rolar colapsa numa
   barra fina que acompanha o visitante.
   ═════════════════════════════════════════════ */
.cd {
  position: sticky;
  top: 0;
  z-index: 120;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(37, 54, 119, 0.30) 0%, rgba(8, 4, 2, 0.96) 100%),
    var(--base-dark);
  border-bottom: 1px solid rgba(116, 99, 112, 0.30);
  --cd-size: clamp(2.75rem, 8vw, 6rem);
  --cd-pad:  clamp(1.5rem, 4vh, 2.75rem);
}

/* Marcacoes de canto — mesma linguagem das caixas de imagem */
.cd::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --sf-c: var(--brushed-steel);
  --sf-t: 1px;
  --sf-l: clamp(0.85rem, 2.5vw, 1.5rem);
  background:
    linear-gradient(var(--sf-c), var(--sf-c))   0     0    / var(--sf-l) var(--sf-t) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c))   0     0    / var(--sf-t) var(--sf-l) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c)) 100%    0    / var(--sf-l) var(--sf-t) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c)) 100%    0    / var(--sf-t) var(--sf-l) no-repeat;
}

.cd__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  /* Valor literal, nao var(): font-size e padding atraves de custom
     property nao-registrada nao re-resolvem quando ha transition.
     O var --cd-size segue existindo, mas so para o separador. */
  padding-block: clamp(1.5rem, 4vh, 2.75rem);
  transition: padding-block 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── A luz. §2.1 so autoriza --gold-ray como fonte de luz:
   aqui ela e um feixe que varre a banda a cada segundo. ── */
.cd__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.cd__sweep::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -30%;
  width: 34%;
  height: 200%;
  transform: rotate(14deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(225, 184, 112, 0.10) 35%,
    rgba(255, 246, 222, 0.30) 50%,
    rgba(225, 184, 112, 0.10) 65%,
    transparent 100%
  );
}
.cd.is-tick .cd__sweep {
  animation: cd-sweep 1s cubic-bezier(0.33, 0, 0.15, 1);
}
@keyframes cd-sweep {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(340%); }
}

.cd__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.cd__mark {
  font-weight: 900;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
}
.cd__when {
  font-weight: 600;
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  color: var(--steel-text);
}

.cd__clock {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
}

.cd__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* ── Os digitos. Cada um e um carretel de 0–9 que desliza:
   so o digito que muda se move. ── */
.cd__reels {
  display: flex;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ice-white);
  transition: font-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cd__d {
  display: block;
  height: 1em;
  overflow: hidden;
}
.cd__reel {
  display: block;
  will-change: transform;
  transform: translateY(calc(var(--n, 0) * -10%));
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.cd__reel span { display: block; height: 1em; }

.cd__name {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel-text);
}

/* Separador — a mesma marca vermelha das divisorias de secao */
.cd__sep {
  width: 1px;
  height: calc(var(--cd-size) * 0.62);
  margin-top: calc(var(--cd-size) * 0.2);
  background: var(--flag-red);
  flex-shrink: 0;
}

/* ── Estado colapsado: barra fina que acompanha o scroll ── */
.cd.is-slim { --cd-size: clamp(1.05rem, 2.6vw, 1.5rem); }
.cd.is-slim .cd__reels { font-size: clamp(1.05rem, 2.6vw, 1.5rem); }
.cd.is-slim .cd__inner { padding-block: 0.65rem; align-items: center; }
.cd.is-slim .cd__when,
.cd.is-slim .cd__name { display: none; }
.cd.is-slim .cd__mark { font-size: clamp(0.9rem, 1.8vw, 1.05rem); }
.cd.is-slim .cd__unit { flex-direction: row; gap: 0; }
.cd.is-slim .cd__clock { gap: clamp(0.4rem, 1.2vw, 0.8rem); }

/* O CTA nunca encolhe nem quebra: e o elemento de conversao da barra */
.cd__cta {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 700px) {
  /* Rotulo e CTA dividem a primeira linha; o relogio ocupa a segunda.
     O rotulo nao cresce (0 1 auto): com "1 1 auto" ele tomava a
     largura toda e jogava o botao para uma terceira linha. */
  .cd__label { flex: 0 1 auto; order: 1; }
  /* O CTA sobe na ordem visual para dividir a linha com o rotulo.
     No DOM ele vem depois do relogio, e o relogio ocupa 100% — sem
     reordenar, o botao cairia numa terceira linha. */
  .cd__cta   { order: 2; }
  .cd__clock { flex: 1 1 100%; justify-content: space-between; order: 3; }

  /* Colapsada: relogio e botao lado a lado numa unica linha. O
     relogio para de esticar para o botao caber ao lado dele. */
  .cd.is-slim .cd__inner { flex-wrap: nowrap; gap: 0.6rem; }
  .cd.is-slim .cd__clock {
    flex: 0 1 auto;
    justify-content: flex-start;
    min-width: 0;
  }
}


/* ── Desktop: a banda inteira numa linha so ──
   Ate 959px o rotulo, o relogio e o CTA se acomodam quebrando linha,
   e esta certo assim. A partir de 960px cabe tudo numa faixa: marca a
   esquerda, relogio no centro optico, CTA a direita.

   Sem o teto de tamanho abaixo o digito ia a 8vw (115px em 1440), a
   soma das larguras naturais estourava os 1240px do shell e o flex
   quebrava: o CTA caia sozinho numa segunda linha, orfao embaixo do
   rotulo, e a banda chegava a 285px — quase um terco da tela antes
   do hero comecar. */
@media (min-width: 960px) {
  .cd { --cd-size: clamp(2.75rem, 4.4vw, 4.25rem); }
  .cd__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-block: clamp(1.25rem, 2.8vh, 2rem);
  }
  /* O rotulo cede largura antes de qualquer um: ele e o unico
     elemento da barra que pode encolher sem perder funcao. */
  .cd__label { flex: 0 1 auto; min-width: 0; }
  /* Centro optico, nao centro geometrico: as duas pontas tem pesos
     diferentes, entao o auto de cada lado acomoda a diferenca. */
  .cd:not(.is-slim) .cd__clock { margin-inline: auto; }
  .cd__reels { font-size: clamp(2.75rem, 4.4vw, 4.25rem); }
  .cd__sep { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .cd, .cd__reel { transition: none; }
  .cd.is-tick .cd__sweep { animation: none; }
}

/* ─────────────────────────────────────────────
   LAYOUT — coluna unica, alinhada a esquerda (§2.3)
   ───────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--gap-section);
  position: relative;
}

/* ═════════════════════════════════════════════
   FUNDO FOTOGRAFICO DE SECAO
   O §2.1 define isto como o mecanismo do arco:
   "as secoes mais claras usam sobreposicao de imagem
   mais aberta, nao troca de background token".
   O veu vem do --veil de cada secao, entao o fundo
   abre sozinho conforme a pagina caminha para o RISE.
   ═════════════════════════════════════════════ */
.section--bg { isolation: isolate; }
.section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.section__bg img {
  /* max-width: none derruba o teto do reset (img {max-width:100%}),
     que zerava justamente a folga lateral: a altura crescia e a
     largura ficava presa em 100%. */
  max-width: none;
  width: calc(100% + var(--bg-blur) * 8);
  height: calc(100% + var(--bg-blur) * 8);
  margin: calc(var(--bg-blur) * -4);
  object-fit: cover;
  /* Fundo e profundidade, nao conteudo. O blur esconde o
     reescalonamento (uma foto de 1280 de largura cobre uma caixa de
     3000 quando a secao e alta) e tira o fundo da disputa com o
     texto. A caixa cresce em funcao do proprio blur, nao numa
     porcentagem: o desfoque puxa transparencia das bordas para
     dentro, e a franja macia precisa cair fora do quadro em qualquer
     largura de tela -- 5% dava 35px no desktop mas so 9px em 375px.
     O .section__bg ja tem overflow hidden. */
  filter: blur(var(--bg-blur));
}
/* As pontas fecham em preto para a foto nascer e morrer dentro da
   secao — sem costura visivel contra o --base-dark do intervalo. */
.section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 4, 2, 0.99) 0%,
    rgba(8, 4, 2, var(--bg-veil, var(--veil))) 22%,
    rgba(8, 4, 2, var(--bg-veil, var(--veil))) 74%,
    rgba(8, 4, 2, 0.99) 100%
  );
}
.section--bg > .shell { position: relative; z-index: 1; }
.section--bg > .ray   { z-index: 1; }

/* ═════════════════════════════════════════════
   CAMPOS DE COR
   Nem toda secao leva foto: se todas levam, nenhuma
   se destaca. O ritmo alterna foto / fundo limpo /
   campo de cor, e nunca repete o mesmo tratamento em
   secoes vizinhas.
   ═════════════════════════════════════════════ */
.section--field { isolation: isolate; }
.section--field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.section--field > .shell,
.section--field > .ray { position: relative; z-index: 1; }

/* ═════════════════════════════════════════════
   GRADIENTE EM MOVIMENTO
   Para as secoes sem fotografia de fundo. Duas massas
   radiais — uma navy, uma vermelho profundo — derivando
   em ritmos diferentes. Le como luz atras do aco, nao
   como mesh gradient generico.

   Animacao so em transform (§6.A). Sem blur: o gradiente
   radial ja nasce suave, e blur em container que rola
   destroi o FPS em mobile (§6.E).
   ═════════════════════════════════════════════ */
.flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Quanto mais fechada a secao no arco, mais discreto o brilho */
  opacity: calc(1.05 - var(--veil));
}
.flow::before,
.flow::after {
  content: '';
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
/* Massa navy — entra pela esquerda, sobe devagar */
.flow::before {
  top: -18%;
  left: -14%;
  background: radial-gradient(
    circle,
    rgba(37, 54, 119, 0.55) 0%,
    rgba(37, 54, 119, 0.22) 38%,
    transparent 68%
  );
  animation: flow-navy 34s ease-in-out infinite;
}
/* Massa vermelha — contraponto pela direita, mais lenta */
.flow::after {
  bottom: -22%;
  right: -16%;
  background: radial-gradient(
    circle,
    rgba(166, 50, 68, 0.40) 0%,
    rgba(166, 50, 68, 0.15) 40%,
    transparent 70%
  );
  animation: flow-red 46s ease-in-out infinite;
}

@keyframes flow-navy {
  0%,  100% { transform: translate3d(0, 0, 0)         scale(1); }
  33%       { transform: translate3d(14%, 9%, 0)      scale(1.18); }
  66%       { transform: translate3d(-6%, 16%, 0)     scale(0.94); }
}
@keyframes flow-red {
  0%,  100% { transform: translate3d(0, 0, 0)         scale(1.06); }
  40%       { transform: translate3d(-16%, -11%, 0)   scale(0.9); }
  75%       { transform: translate3d(8%, -5%, 0)      scale(1.22); }
}

/* Secoes com gradiente colocam o conteudo acima dele */
.section--flow > .shell,
.section--flow > .ray { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .flow::before, .flow::after { animation: none; }
}

/* Navy — o §2.1 define --flag-navy como "estrutura, blocos,
   profundidade". O campo e literalmente esse uso. */
/* Navy mais fechado que o --flag-navy do bloco de citacao: se os
   dois tivessem o mesmo tom o bloco desapareceria dentro do campo.
   O campo e a profundidade; a citacao e o objeto sobre ela. */
.section--navy::before {
  background: linear-gradient(
    180deg,
    var(--base-dark) 0%,
    #0C1330 18%,
    #131D45 50%,
    #0C1330 82%,
    var(--base-dark) 100%
  );
}
/* A citacao ganha borda para separar do campo mesmo de longe */
.section--navy .scripture {
  box-shadow: 0 0 0 1px rgba(254, 253, 252, 0.14);
}

/* Oferta — vermelho profundo. Nao e um campo vermelho: e escuro
   com temperatura vermelha. Vermelho chapado inverteria a
   hierarquia (o acento viraria dominante) e apagaria o CTA. */
.section--offer::before {
  background: linear-gradient(
    180deg,
    var(--base-dark) 0%,
    #1E070B 18%,
    #26090D 50%,
    #1E070B 82%,
    var(--base-dark) 100%
  );
}

/* Sobre campo de cor o botao perde a borda: 1,69:1 no navy e
   2,75:1 no vermelho, contra o minimo de 3:1. O anel de ice-white
   devolve o limite — 11:1 e 19:1 respectivamente. */
.section--field .btn {
  box-shadow: 0 0 0 1px rgba(254, 253, 252, 0.62);
}
/* --steel-text tambem nao aguenta campo colorido (2,50:1 no navy).
   Sobe para o tom ja validado em 4,50:1. */
.section--field .meta,
.section--field .fact__k,
.section--field .ph__note,
.section--field .slot__note { color: var(--steel-on-navy); }

/* Centralizado apenas em 03 (Efesios) e 09 (CTA final) —
   os dois momentos de voz alta (v2 §2.3) */
.section--center { text-align: center; }
/* text-align centraliza o texto DENTRO da caixa, mas a caixa em si
   tem max-width e ficaria colada a esquerda. Todo bloco limitado
   dentro de uma secao centralizada precisa se centrar tambem. */
.section--center .measure,
.section--center .lead,
.section--center .body-copy p,
.section--center .rhythm,
.section--center .scripture,
.section--center .figure { margin-inline: auto; }

.measure { max-width: var(--measure); }

/* Alvo de ancora — compensa para o titulo nao colar no topo */
.anchor {
  display: block;
  position: absolute;
  top: calc(var(--gap-section) * -0.35);
  left: 0;
  width: 1px;
  height: 1px;
}

/* ─────────────────────────────────────────────
   TIPOGRAFIA
   O 1833 usa a letra maior, mais apertada e mais
   caixa-alta que o 1802 (§2.2.4)
   ───────────────────────────────────────────── */
.h1, .h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: none;
}

.h1 {
  font-size: var(--t-h1);
  font-weight: 900;
  line-height: 0.90;
  margin-bottom: 2rem;
}

.h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 0.94;
  margin-bottom: 2rem;
}

/* Headlines podem estourar a largura da coluna de corpo — intencional (§2.2) */
.h1, .h2 { max-width: 18ch; }
.section--center .h1, .section--center .h2 { max-width: 22ch; margin-inline: auto; }

/* §2.1 — --flag-red e a unica cor de acento de texto.
   Uma palavra ou uma linha por headline, no maximo. */
.accent { color: var(--flag-red); }

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.45;
  max-width: var(--measure);
}

.body-copy > p + p { margin-top: 1.5rem; }
.body-copy p { max-width: var(--measure); }

/* A linha que define o que e um TOP. Com a pagina enxuta ela e a
   unica explicacao antes do preco, entao ganha peso e um fio de aco
   a esquerda para nao ler como corpo comum. (v2 §5.04) */
.defines {
  margin-top: 2.5rem;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--flag-red);
  font-weight: 400;
  color: var(--ice-white);
}

.meta {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel-text);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ─────────────────────────────────────────────
   LISTAS — secoes 02, 05 e 07 (v2 §2.3)
   Listas verdadeiras, uma linha por vez, sem marcador.
   O ritmo da lista e o efeito.
   ───────────────────────────────────────────── */
.rhythm {
  max-width: var(--measure);
  margin-block: 2.5rem;
}
.rhythm li {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.35;
  padding-block: 0.7rem;
  /* Fio como imagem de fundo, nao border: assim ele nasce forte onde
     o texto comeca e dissolve para a direita, na mesma linguagem das
     divisorias de secao. A 0.22 de alfa ele sumia no fundo. */
  background-image: linear-gradient(
    90deg,
    rgba(131, 114, 127, 0.62) 0%,
    rgba(131, 114, 127, 0.40) 48%,
    rgba(131, 114, 127, 0.10) 82%,
    transparent 100%
  );
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.rhythm li:last-child { background-image: none; }
.rhythm li.is-turn { color: var(--ice-white); font-weight: 500; }

/* ─────────────────────────────────────────────
   BOTOES — §4
   Sem border-radius (0px, coerente com o aco). Sem seta.
   ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--flag-red);
  color: var(--ice-white);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* Os rotulos variam de 15 a 37 caracteres. line-height 1 fazia as
     linhas se tocarem quando o rotulo longo quebrava. Sem max-width:
     o botao acompanha o texto e so quebra quando precisa mesmo — no
     mobile, onde ele ocupa 100% da coluna. */
  line-height: 1.15;
  text-wrap: balance;
  padding: 1.05em 2.2em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.18s ease;
}
.section--center .btn { margin-inline: auto; }
.btn:hover { background: var(--red-hover); }

.btn-row { margin-top: 3rem; }

/* ─────────────────────────────────────────────
   LUZ — --gold-ray so como fonte de luz (§2.1)
   Nunca preenche botao, texto ou borda.
   Halo cresce com o arco: --ray e definido por secao.
   ───────────────────────────────────────────── */
.ray {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ray::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(120vw, 1500px);
  aspect-ratio: 1;
  transform: translate(-50%, -30%);
  background: radial-gradient(
    circle,
    rgba(225, 184, 112, calc(var(--ray) * 0.20)) 0%,
    rgba(225, 184, 112, calc(var(--ray) * 0.07)) 34%,
    transparent 68%
  );
}

/* ─────────────────────────────────────────────
   PLACEHOLDERS DE IMAGEM
   Todos os slots visuais estao pendentes de definicao.
   Estilizados como parte da linguagem da pagina, nao
   como caixa cinza — e rotulados com o que falta.
   ───────────────────────────────────────────── */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  /* Fio de cabelo quase invisivel — quem desenha a caixa sao os
     cantos tecnicos abaixo, nao a borda. */
  border: 1px solid rgba(116, 99, 112, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(37, 54, 119, 0.10) 0%,
      rgba(8, 4, 2, 0.55) 100%
    );
  overflow: hidden;
}

/* ── MOLDURA DE ACO ──
   Marcacoes de canto tipo mira de equipamento. Oito filetes
   posicionados nos quatro cantos, sem markup extra. */
.ph, .vsl, .slot {
  --sf-c: var(--brushed-steel);
  --sf-t: 1px;
  --sf-l: clamp(0.85rem, 2.5vw, 1.5rem);
}
.ph::before, .vsl::before, .slot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Animado pelo GSAP atraves da variavel — pseudo-elemento
     nao aceita tween direto. */
  opacity: var(--sf-o, 1);
  background:
    linear-gradient(var(--sf-c), var(--sf-c))   0     0    / var(--sf-l) var(--sf-t) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c))   0     0    / var(--sf-t) var(--sf-l) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c)) 100%    0    / var(--sf-l) var(--sf-t) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c)) 100%    0    / var(--sf-t) var(--sf-l) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c))   0   100%   / var(--sf-l) var(--sf-t) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c))   0   100%   / var(--sf-t) var(--sf-l) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c)) 100% 100%    / var(--sf-l) var(--sf-t) no-repeat,
    linear-gradient(var(--sf-c), var(--sf-c)) 100% 100%    / var(--sf-t) var(--sf-l) no-repeat;
}
/* Cantos em vermelho onde a marcacao e um slot pendente.
   Gold nunca entra aqui: canto e borda, e o §2.1 proibe. */
.slot { --sf-c: var(--flag-red); --sf-l: clamp(1rem, 3vw, 1.75rem); }
.vsl  { --sf-c: var(--flag-red); }
/* Feixe de luz dentro do placeholder — cresce com o arco */
.ph::after {
  content: '';
  position: absolute;
  right: -10%;
  top: -40%;
  width: 55%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(225, 184, 112, calc(0.05 + var(--ray) * 0.16)),
    transparent
  );
  pointer-events: none;
}
.ph__tag {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--flag-red);
}
.ph__note {
  position: relative;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--steel-text);
  max-width: 46ch;
}

/* Formatos — variados de proposito, para dar ritmo a pagina */
.ph--cinema   { aspect-ratio: 21 / 9; }
.ph--wide     { aspect-ratio: 16 / 9; }
.ph--square   { aspect-ratio: 1 / 1; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--tall     { aspect-ratio: 3 / 4; }
.ph--band     { aspect-ratio: 3 / 1; }

.ph--bleed {
  margin-inline: calc(var(--pad-x) * -1);
  border-inline: 0;
}

.figure { margin-top: 3.5rem; }
/* Retrato pequeno, para quando a imagem entra como respiro e nao
   como protagonista (§03). */
.figure--slim { max-width: min(100%, 15rem); margin-top: 2.5rem; }

/* Tira de tres retratos — a repeticao da cena e o argumento */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── §02 — lista + retrato fixo ──
   A lista fica na coluna da esquerda com o ritmo intacto; o retrato
   ocupa a direita, que antes era vazio morto, e gruda enquanto as
   dez linhas passam. */
.s02 {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: 2.5rem;
}
.s02 .rhythm { margin-block: 0; }
.s02__fig { max-width: min(100%, 24rem); }

@media (min-width: 900px) {
  .s02 {
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 26vw, 23rem);
    align-items: start;
  }
  .s02__fig {
    position: sticky;
    /* Desconta a banda do countdown, que tambem e sticky no topo */
    top: calc(var(--cd-h, 0px) + 2.5rem);
    max-width: none;
  }
}

/* Split — imagem + texto lado a lado */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > .split__media { order: 2; }
}

/* Galeria — §08 (5 frames) e §14 (3 videos) */
.gallery {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}
/* Cinco quadros sao uma sequencia: quebrar em 2 colunas deixaria um
   orfao e destruiria a leitura. Abaixo de 1040px viram uma tira que
   rola na horizontal, preservando a ordem. */
.gallery--5 {
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brushed-steel) transparent;
}
.gallery--5 > * { scroll-snap-align: start; }
@media (min-width: 1040px) {
  .gallery--5 {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: visible;
  }
}
@media (min-width: 700px) { .gallery--3 { grid-template-columns: repeat(3, 1fr); } }

/* "Cada frame clareia progressivamente" (v2 §5.04). A ordem narrativa
   CONFRONT→RISE manda; quem cria a progressao de luz e o veu, nao a
   reordenacao das fotos. */
.gallery--5 .ph:nth-child(1) { --veil: 0.88; }
.gallery--5 .ph:nth-child(2) { --veil: 0.74; }
.gallery--5 .ph:nth-child(3) { --veil: 0.58; }
.gallery--5 .ph:nth-child(4) { --veil: 0.42; }
.gallery--5 .ph:nth-child(5) { --veil: 0.24; }

/* ─────────────────────────────────────────────
   FRISOS — Summit e Cadence (§2.4)
   Gerados em SVG a partir da descricao do brief.
   Substituir pelos PNG oficiais 3000x100 quando chegarem.
   ───────────────────────────────────────────── */
.friso { width: 100%; height: auto; display: block; }

.friso--summit { color: var(--flag-red); margin-bottom: clamp(3rem, 7vh, 6rem); }
.friso--cadence { color: var(--brushed-steel); opacity: 0.32; }

.friso-v {
  position: absolute;
  top: 50%;
  width: clamp(2.25rem, 4vw, 3.5rem);
  height: auto;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  color: var(--brushed-steel);
  opacity: 0.28;
  pointer-events: none;
}
.friso-v--left  { left: 0; }
.friso-v--right { right: 0; }
@media (max-width: 1100px) { .friso-v { display: none; } }

/* ─────────────────────────────────────────────
   §05 — BLOCO DE ESCRITURA sobre --flag-navy
   ───────────────────────────────────────────── */
.scripture {
  background: var(--flag-navy);
  padding: clamp(2.25rem, 5vw, 4rem);
  margin-top: 3rem;
  max-width: 58ch;
  margin-inline: auto;
  text-align: left;
}
.scripture blockquote {
  font-size: var(--t-lead);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
}
.scripture cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--t-meta);
  font-weight: 600;
  /* Caixa normal, nao alta: e referencia biblica, nao rotulo de
     interface. O tracking cai junto — 0.14em so funciona em caixa
     alta e abriria demais em caixa mista. */
  letter-spacing: 0.04em;
  /* ice-white sobre navy = 11,04:1 */
  color: rgba(254, 253, 252, 0.72);
}

/* ─────────────────────────────────────────────
   §08 — A SEQUENCIA
   Unica secao que pode ser numerada (§2.3)
   ───────────────────────────────────────────── */
.steps { margin-top: 3.5rem; max-width: var(--measure); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: 1.5rem;
  /* Mesmo fio das listas: forte onde comeca, dissolvendo a direita */
  border-top: 0;
  background-image: linear-gradient(
    90deg,
    rgba(131, 114, 127, 0.62) 0%,
    rgba(131, 114, 127, 0.40) 48%,
    rgba(131, 114, 127, 0.10) 82%,
    transparent 100%
  );
  background-size: 100% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.step__n {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--flag-red);
  font-variant-numeric: tabular-nums;
}
.step__k {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.step__t { font-weight: 300; }

/* ─────────────────────────────────────────────
   §14 — SLOTS DE DEPOIMENTO
   FTC §7.2 — slot vazio, rotulo visivel. Nada fabricado.
   ───────────────────────────────────────────── */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  aspect-ratio: 9 / 14;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--flag-red);
  background: rgba(37, 54, 119, 0.10);
}
.slot__label {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--flag-red);
}
.slot__note { font-size: var(--t-meta); color: var(--steel-text); }

/* ─────────────────────────────────────────────
   §19 — DADOS DO EVENTO
   ───────────────────────────────────────────── */
.facts { margin-top: 3rem; max-width: var(--measure); }
.fact {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.75rem 2rem;
  padding-block: 1.1rem;
  border-bottom: 0;
  background-image: linear-gradient(
    90deg,
    rgba(131, 114, 127, 0.62) 0%,
    rgba(131, 114, 127, 0.40) 48%,
    rgba(131, 114, 127, 0.10) 82%,
    transparent 100%
  );
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.fact__k {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel-text);
  padding-top: 0.25em;
}
.fact__v { font-weight: 500; }


/* ─────────────────────────────────────────────
   HERO — §01
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  /* Desconta a banda do countdown, publicada em --cd-h pelo JS,
     para que o hero ainda ocupe uma tela cheia junto com ela.
     O max() e a trava: em tela baixa a subtracao ficaria negativa
     e o hero colapsaria para zero. */
  min-height: max(32rem, calc(100svh - var(--cd-h, 0px)));
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 16vh, 12rem) clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__img {
  /* Mesma folga proporcional ao blur da .section__bg. Nao uso scale
     nem transform aqui: o parallax do GSAP escreve em transform. */
  max-width: none;
  width: calc(100% + var(--bg-blur) * 8);
  height: calc(100% + var(--bg-blur) * 8);
  margin: calc(var(--bg-blur) * -4);
  object-fit: cover;
  filter: blur(var(--bg-blur));
  /* O nascer do sol fica a esquerda da foto; ancorar ao centro-direita
     mantem a luz e os homens no enquadramento quando a tela estreita. */
  object-position: 62% center;
}
/* bg_hero.jpg ja vem pre-escurecida — o veu aqui e leve, so o
   suficiente para firmar o texto. Escurece na base, onde ficam o
   gancho e o CTA. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(8, 4, 2, 0.28) 0%,
      rgba(8, 4, 2, 0.42) 48%,
      rgba(8, 4, 2, 0.90) 100%
    ),
    linear-gradient(
      90deg,
      rgba(8, 4, 2, 0.55) 0%,
      rgba(8, 4, 2, 0.15) 55%,
      transparent 100%
    );
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Mobile: a tipografia lidera, a VSL entra depois do gancho
   e antes do CTA. O botao fecha o bloco. */
.hero__text  { order: 1; }
.hero__aside { order: 2; margin-top: 2.5rem; max-width: 17rem; }
.hero .btn-row { order: 3; }

.hero .h1 { max-width: 15ch; }
.hero__sub { margin-top: 2rem; }
.hero__sub p { max-width: 52ch; }
.hero__echo {
  margin-top: 1.5rem;
  font-size: var(--t-lead);
  font-weight: 500;
}

/* Desktop: duas colunas. A headline continua sendo o maior
   elemento da tela — a VSL fica contida ao lado (§1). */
@media (min-width: 960px) {
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr clamp(15rem, 24vw, 21rem);
    grid-template-areas:
      "text vsl"
      "cta  vsl";
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .hero__text  { grid-area: text; }
  .hero .btn-row { grid-area: cta; }
  .hero__aside {
    grid-area: vsl;
    align-self: center;
    margin-top: 0;
    max-width: none;
  }
}

/* ─────────────────────────────────────────────
   FOOTER — §23
   ───────────────────────────────────────────── */
.footer {
  padding-block: clamp(4rem, 9vh, 7rem) 3rem;
  border-top: 1px solid rgba(116, 99, 112, 0.28);
}
.footer__brand { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); margin-bottom: 1.5rem; }
.footer__meta { color: var(--steel-text); font-size: var(--t-meta); line-height: 1.9; }
/* Nav do rodape fora do ar (About / TOP 1833 / Contact / Privacy /
   Terms). O CSS fica: basta devolver o <nav class="footer__nav"> ao
   index.html para ele voltar a valer. */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.footer__nav a { color: var(--steel-text); }
.footer__nav a:hover { color: var(--ice-white); }

/* ─────────────────────────────────────────────
   CONSENTIMENTO — §6, antes de disparar pixel
   ───────────────────────────────────────────── */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem var(--pad-x);
  background: rgba(8, 4, 2, 0.97);
  border-top: 1px solid var(--brushed-steel);
}
.consent p { font-size: var(--t-meta); color: var(--steel-text); flex: 1 1 22rem; }
.consent a { color: var(--ice-white); text-decoration: underline; }
.consent__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn--ghost {
  background: none;
  border: 1px solid var(--brushed-steel);
  color: var(--ice-white);
}
.btn--ghost:hover { background: none; border-color: var(--ice-white); }
.btn--sm { font-size: var(--t-meta); padding: 0.8em 1.5em; }
.consent[hidden] { display: none; }

/* ─────────────────────────────────────────────
   LOGO DO EVENTO
   logo_top1833.png ja traz "TOP 1833 / RISE" e a
   montanha em navy/vermelho/branco — dentro da paleta.
   ───────────────────────────────────────────── */
.logo-event {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(15rem, 32vw, 27rem);
  height: auto;
}
.section--center .logo-event { margin-inline: auto; }

/* Flare dourado atras da marca.
   §2.1 permite --gold-ray como "halo sutil atras de um elemento" —
   e a unica excecao aberta pelo brief. Nao preenche nada: fica atras. */
.logo-flare {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}
.section--center .logo-flare { display: block; width: fit-content; margin-inline: auto; }

/* Nucleo — brilho quente e claro saindo de tras da montanha */
.logo-flare::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 56%;
  width: 175%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      rgba(255, 253, 246, 0.92) 0%,
      rgba(255, 244, 206, 0.78) 7%,
      rgba(255, 226, 160, 0.52) 15%,
      rgba(225, 184, 112, 0.34) 27%,
      rgba(225, 184, 112, 0.15) 44%,
      transparent 68%
    );
}

/* Rastro anamorfico — a linha horizontal que da leitura de flare */
.logo-flare::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 56%;
  width: 240%;
  height: 16%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  filter: blur(9px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(225, 184, 112, 0.30) 18%,
    rgba(255, 240, 200, 0.72) 38%,
    rgba(255, 253, 246, 0.95) 50%,
    rgba(255, 240, 200, 0.72) 62%,
    rgba(225, 184, 112, 0.30) 82%,
    transparent 100%
  );
}

/* ─────────────────────────────────────────────
   LOCKUP DOS ORGANIZADORES — §23
   ───────────────────────────────────────────── */
.lockup {
  display: grid;
  /* Colunas ao tamanho do conteudo, agrupadas ao centro — com 1fr
     elas se espalhavam pela largura toda e ficavam distantes. */
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-block: 3rem;
  padding-block: 2.5rem;
  border-block: 1px solid rgba(116, 99, 112, 0.28);
}
.lockup__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dimensionado pela altura para equilibrio otico — as tres marcas
   tem proporcoes diferentes. O badge, por ser uma forma cheia e
   colorida, pesa mais e entra um pouco menor que as duas de traco. */
.lockup__img {
  height: clamp(4.5rem, 9vw, 7rem);
  width: auto;
  object-fit: contain;
}
.lockup__img--badge { height: clamp(5.25rem, 10.5vw, 8.25rem); }

/* Variante compacta — no hero, imediatamente acima da VSL.
   Sem bordas e sem respiro de banda: e um credito, nao uma secao.
   Tres colunas iguais ocupando exatamente a largura da VSL. */
.lockup--compact {
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0.75rem;
}
/* Altura uniforme + object-fit: contain — cada marca preenche a
   largura da sua coluna sem distorcer, e a linha fica alinhada. */
.lockup--compact .lockup__item { width: 100%; }
.lockup--compact .lockup__img {
  width: 100%;
  height: clamp(3rem, 11vw, 4.25rem);
  object-fit: contain;
}
.lockup--compact .lockup__img--badge {
  height: clamp(3.5rem, 13vw, 5rem);
}

/* ─────────────────────────────────────────────
   VSL — vertical 9:16 (formato reels)
   ───────────────────────────────────────────── */
.vsl {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(116, 99, 112, 0.55);
  background:
    linear-gradient(180deg, rgba(37, 54, 119, 0.16) 0%, rgba(8, 4, 2, 0.72) 100%);
  overflow: hidden;
}
.vsl::after {
  content: '';
  position: absolute;
  right: -20%;
  top: -30%;
  width: 70%;
  height: 160%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(225, 184, 112, calc(0.06 + var(--ray) * 0.14)),
    transparent
  );
  pointer-events: none;
}
/* ── CONTROLES DA VSL ──
   Deliberadamente NAO vermelhos: o vermelho e reservado a conversao.
   Um controle de midia com a mesma cara de um CTA competiria com os
   botoes de registro. Aqui e escuro translucido com borda ice-white.
   Sem icone — o §1 do brief manda "zero icones". */
.vsl__ctl {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: rgba(8, 4, 2, 0.74);
  border: 1px solid rgba(254, 253, 252, 0.55);
  border-radius: 0;
  color: var(--ice-white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: opacity 0.28s ease, background 0.18s ease, border-color 0.18s ease;
}
.vsl__ctl:hover { background: rgba(8, 4, 2, 0.9); border-color: var(--ice-white); }

/* Som — centralizado e grande enquanto o video esta mudo */
.vsl__sound {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9em 1.5em;
  font-size: var(--t-meta);
}
/* Depois de ligar o som ele encolhe e desce para o canto */
.vsl__sound.is-on {
  top: auto;
  bottom: 0.85rem;
  left: 0.85rem;
  transform: none;
  padding: 0.55em 0.9em;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* Pausa — sempre no canto. Sem ele o video toca sozinho sem
   mecanismo de parada, o que reprova na WCAG 2.2.2. */
.vsl__pause {
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.55em 0.9em;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  opacity: 0;
}
.vsl:hover .vsl__pause,
.vsl__pause:focus-visible,
.vsl__pause.is-paused { opacity: 1; }

/* Sem JS ou sem a API do Vimeo, os controles nao funcionariam:
   o script os revela so depois de conectar ao player. */
.vsl__ctl { visibility: hidden; }
.vsl.is-live .vsl__ctl { visibility: visible; }
.vsl video, .vsl iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* ═════════════════════════════════════════════
   DIVISAO ENTRE SECOES
   Um fio de aco com marcacao tecnica a esquerda.
   Desenha-se da esquerda para a direita na entrada.
   ═════════════════════════════════════════════ */
.section + .section::before,
.section--rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: var(--pad-x);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(116, 99, 112, 0.55) 0%,
    rgba(116, 99, 112, 0.34) 22%,
    rgba(116, 99, 112, 0.10) 62%,
    transparent 100%
  );
  transform: scaleX(var(--rule-x, 1));
  transform-origin: left center;
}
/* Marcacao vertical no inicio do fio — a "tick" do instrumento */
.section + .section::after,
.section--rule::after {
  content: '';
  position: absolute;
  top: -4px;
  left: var(--pad-x);
  width: 1px;
  height: 9px;
  background: var(--flag-red);
  transform: scaleY(var(--rule-y, 1));
  transform-origin: center top;
}

/* ═════════════════════════════════════════════
   MOVIMENTO
   Estados iniciais so existem quando o JS confirma
   GSAP + ausencia de prefers-reduced-motion. Sem JS,
   sem GSAP ou com reduced-motion, tudo nasce visivel.
   ═════════════════════════════════════════════ */
/* O hero tem sequencia propria em CSS e fica de fora — ele e
   .hero, nao .section. Tudo abaixo pertence ao corpo da pagina. */
html.motion .section .h2,
html.motion .section > .shell > .lead,
html.motion .section .body-copy > p,
html.motion .section .rhythm li,
html.motion .section .btn-row,
html.motion .section .wordmark,
html.motion .section .step,
html.motion .section .fact,
html.motion .section .meta,
html.motion .section .logo-flare,
html.motion .section .scripture { opacity: 0; }

/* Imagens abrem por mascara, nao por fade — o corte revela */
html.motion .section .ph,
html.motion .section .slot { clip-path: inset(0 0 100% 0); }

/* Valores iniciais das variaveis que o GSAP conduz */
html.motion .section + .section,
html.motion .section--rule { --rule-x: 0; --rule-y: 0; }
html.motion .section .ph,
html.motion .section .slot { --sf-o: 0; }

/* A imagem respira dentro da moldura no parallax */
.ph__inner {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  pointer-events: none;
}
.ph__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caixa com foto real: o fundo de placeholder sai, a moldura de
   aco e o veu do arco ficam. */
.ph--filled {
  background: var(--base-dark);
  padding: 0;
}
.ph--filled::after {
  /* O feixe do placeholder some — a luz agora vem da propria foto */
  opacity: 0.35;
}
/* Veu do arco por cima da foto: a primeira metade da pagina fica
   fechada, a segunda abre. Mesma variavel que ja conduz o arco. */
.ph--filled .ph__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 2, calc(var(--veil) * 0.62));
}

/* ─────────────────────────────────────────────
   ARCO DOWN → WAKE → RISE  (§1)
   A pagina escurece na primeira metade e clareia na
   segunda. 01–07 vivem no escuro. A luz entra em 08
   e cresce ate 22. Sem trocar o token de fundo (§2.1).
   ───────────────────────────────────────────── */
/* v2 §1: "As secoes 01–02 vivem no --base-dark fechado. A luz entra
   em 03 (Efesios), cresce em 04 e 05, e a pagina termina no seu
   ponto mais claro." */
#s01, #s02 { --veil: 0.90; --ray: 0.00; }  /* escuro fechado */
#s03       { --veil: 0.84; --ray: 0.12; }  /* a luz entra */
#s04       { --veil: 0.74; --ray: 0.30; }  /* a virada — friso Summit */
#s05       { --veil: 0.62; --ray: 0.48; }
#s06       { --veil: 0.54; --ray: 0.60; }
#s07       { --veil: 0.48; --ray: 0.70; }
#s08       { --veil: 0.40; --ray: 0.80; }
#s09       { --veil: 0.25; --ray: 1.00; }  /* momento mais claro */

/* O veu aplicado — sobreposicao sobre a imagem, nao troca de background */
.ph { background-color: rgba(8, 4, 2, var(--veil)); }

/* ═════════════════════════════════════════════
   FOTOS REAIS — veus proprios
   As fotos do ultimo TOP entram sem tratamento de cor: sao de dia,
   claras e com muito laranja. O veu do arco (--veil) foi calibrado
   para imagens ja escuras, entao fundo e primeiro plano precisam de
   controles separados — senao ou o texto perde contraste, ou a
   pagina para de clarear no fim.
   ═════════════════════════════════════════════ */

/* Fundos: valor do mapa de fotos. So afeta .section__bg, nunca a
   foto de primeiro plano da mesma secao. */
#s06 { --bg-veil: 0.78; }
#s08 { --bg-veil: 0.70; }
#s09 { --bg-veil: 0.60; }

/* §03 e o ponto onde a luz entra. O mapa pede overlay zero (ou 15%
   se o versiculo cair sobre a agua) — aqui ele nao cai, entao 12%
   so para o fio de aco da moldura nao sumir no ceu. */
.ph--lit .ph__inner::after { background: rgba(8, 4, 2, 0.12); }
.ph--lit { background-color: rgba(8, 4, 2, 0.12); }

/* A 09 e a unica secao onde o acento vermelho cai sobre foto clara.
   Medido: #A63244 sobre a mata da real-group-formation da 1,37:1, e
   nenhum veu resolve -- quanto mais escuro o fundo, mais o vermelho
   escuro converge com ele (o teto, sobre preto puro, e 3,16:1). Por
   isso aqui o acento sobe para o tom ja derivado --flag-red-lit e
   ganha um halo colado no glifo: 4,2:1, sem clarear o bloco inteiro
   nem inventar cor nova. */
#s09 .accent {
  color: var(--flag-red-lit);
  text-shadow:
    0 0 0.05em rgba(8, 4, 2, 0.95),
    0 0 0.16em rgba(8, 4, 2, 0.90),
    0 0.02em 0.40em rgba(8, 4, 2, 0.75);
}

/* <picture> nao pode virar uma caixa entre .ph__inner e a imagem:
   o height:100% da .ph__img resolveria contra um pai sem altura. */
.ph__inner picture { display: contents; }

/* No mobile a foto da §03 troca de recorte junto com o arquivo —
   21:9 numa coluna de 320px vira um filete de 137px. */
@media (max-width: 700px) {
  #s03 .ph--cinema { aspect-ratio: 4 / 5; }
}

/* ─────────────────────────────────────────────
   MOVIMENTO — §2.5
   Um unico momento orquestrado: a entrada do hero.
   A headline aparece linha por linha. O resto da
   pagina e estatico no load.
   ───────────────────────────────────────────── */
/* A headline nao aparece: ela sobe por tras de uma mascara, uma
   linha de cada vez. O padding negativo poe a borda da mascara
   fora dos glifos — com line-height 0.90 os descendentes de "stay"
   passariam do content box e seriam cortados. */
.hero .line {
  display: block;
  overflow: hidden;
  padding-block: 0.10em 0.16em;
  margin-block: -0.10em -0.16em;
}
.hero .line__i {
  display: block;
  transform: translateY(108%);
  animation: line-rise 0.92s cubic-bezier(0.16, 0.84, 0.30, 1) forwards;
}
.hero .line:nth-child(1) .line__i { animation-delay: 0.16s; }
.hero .line:nth-child(2) .line__i { animation-delay: 0.34s; }

@keyframes line-rise { to { transform: translateY(0); } }

.hero .logo-event, .hero__sub, .hero__echo,
.hero .btn-row, .hero__aside {
  opacity: 0;
  animation: line-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero .logo-event { animation-delay: 0.05s; }
.hero__sub        { animation-delay: 0.72s; }
.hero__echo       { animation-delay: 0.88s; }
.hero__aside      { animation-delay: 0.98s; }
.hero .btn-row    { animation-delay: 1.12s; }

@keyframes line-in {
  to { opacity: 1; transform: translateY(0); }
}

/* §2.5 — reduced-motion desliga a sequencia e entrega tudo estatico */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover::after, .btn:focus-visible::after { animation: none; }
  .hero .line__i,
  .hero .logo-event, .hero__sub, .hero__echo,
  .hero .btn-row, .hero__aside {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ═════════════════════════════════════════════
   FX — CAMADAS ATMOSFERICAS (fx.js)
   Dois canvas, os dois abaixo do .shell e acima
   do fundo da secao. Nenhum recebe ponteiro.
   ═════════════════════════════════════════════ */
.fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* A bandeira e presenca de fundo, nao estampa: a opacidade baixa
   e o modo de mistura mantem os dados do evento com contraste.
   soft-light preserva o preto do campo e so acende o tecido. */
.fx--flag {
  opacity: 0.11;
  mix-blend-mode: soft-light;
}
@media (max-width: 900px) {
  .fx--flag { opacity: 0.085; }
}

/* As brasas sao luz somada — screen para nao escurecer a foto */
.fx--embers {
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* ═════════════════════════════════════════════
   VARREDURA DOURADA NO CTA
   O ouro so pode ser fonte de luz (§2.1) — por isso a faixa
   entra em screen, acendendo o botao em vez de o pintar.
   Nao ha z-index disputando com o rotulo: a mistura passa
   por cima sem cobrir.
   ═════════════════════════════════════════════ */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(255, 231, 168, 0.58) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Animacao, nao transicao: assim a luz sempre atravessa no mesmo
   sentido em vez de voltar quando o ponteiro sai. */
.btn:hover::after,
.btn:focus-visible::after {
  animation: btn-sweep 0.72s cubic-bezier(0.33, 0, 0.15, 1);
}
@keyframes btn-sweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* ═════════════════════════════════════════════
   §04 — TRILHO DA SEQUENCIA
   A unica animacao da pagina que carrega informacao: o fio
   se desenha conforme voce desce e acende cada passo ao chegar,
   mostrando que aquilo e uma sequencia e nao uma lista.
   --rail vai de 0 a 1 pelo scroll (GSAP).
   ═════════════════════════════════════════════ */
.steps {
  position: relative;
  padding-left: clamp(1.15rem, 3vw, 2rem);
}
/* Leito: o caminho inteiro, apagado */
.steps::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(131, 114, 127, 0.30);
}
/* Trilho: a parte ja percorrida, do vermelho ao dourado —
   o mesmo arco de luz que a pagina inteira faz, em miniatura */
.steps::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-image: linear-gradient(
    180deg,
    var(--flag-red-lit) 0%,
    #D9705E 46%,
    var(--gold-ray) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% calc(var(--rail, 1) * 100%);
}
/* O numero acende quando o trilho o alcanca */
.step__n { transition: color 0.45s ease; }
html.motion .steps { --rail: 0; }
html.motion .steps .step__n { color: var(--steel-text); }
html.motion .steps .step.is-lit .step__n { color: var(--flag-red); }

/* ═════════════════════════════════════════════
   §03 — A ESCRITURA EM GRUPOS DE SENTIDO
   O versiculo entra na cadencia de quem le em voz alta.
   O texto continua inteiro no DOM — os spans nao quebram
   a leitura por leitor de tela.
   ═════════════════════════════════════════════ */
.kinetic .kin { display: inline; }
html.motion .kinetic .kin { opacity: 0; }

/* ─────────────────────────────────────────────
   RESPONSIVO — ate 320px (§2.6)
   ───────────────────────────────────────────── */
@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: 0.25rem; }
  .btn { width: 100%; text-align: center; padding-inline: 1rem; }
  /* Os dois do consentimento ficam lado a lado: empilhados, o banner
     dobrava de altura e cobria o CTA do hero. */
  .consent .btn--sm { width: auto; flex: 1 1 0; padding-inline: 0.5rem; }
  /* O CTA da barra acompanha o texto, nunca a largura da coluna */
  .cd__cta { width: auto; }
}

/* ═════════════════════════════════════════════
   MOBILE — passe dedicado
   Medido a 300px: o countdown ocupava 241px (30% da
   tela) e o hero 1585px, quase duas telas. A escala
   tipografica da v2 fica intacta; o que encolhe e o
   cromo em volta.
   ═════════════════════════════════════════════ */

/* ═════════════════════════════════════════════
   HERO EM UMA COLUNA — ate 959px
   O grid de duas colunas so entra em 960px. Abaixo disso o hero e
   uma coluna so, e ai o max-width de 17rem do aside encosta a VSL e
   as marcas na esquerda com meia tela vazia ao lado. Isso estava
   corrigido so ate 640px; entre 641 e 959 ficava uma terra de
   ninguem — foi o que apareceu no aparelho do Farid.
   Regra: o intervalo de uma coluna e um so, e a regra tambem.
   ═════════════════════════════════════════════ */
@media (max-width: 959px) {
  /* min-height + align-items:flex-end transformava a sobra em vazio.
     Numa coluna so o conteudo ja passa da tela sozinho. O padding de
     topo do desktop (ate 12rem) vira 225px de nada acima da marca. */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-block: clamp(1.5rem, 4vh, 3rem) clamp(2.5rem, 6vh, 4.5rem);
  }

  /* O CTA sobe na frente da VSL: ele fecha o argumento do gancho, e
     o video vira aprofundamento para quem quer mais. */
  .hero .btn-row { order: 2; }

  /* A coluna ocupa a largura toda; quem se centraliza e o conteudo
     dentro dela. */
  .hero__aside {
    order: 3;
    max-width: none;
    width: 100%;
    margin-top: 2rem;
  }

  /* Num 9:16 quem manda e a altura, nao a largura -- por isso o teto
     e uma fracao da tela, nao um valor fixo em rem. Com teto fixo a
     VSL ficava com 89% da largura em 375px e so 43% em 900px: quanto
     maior a tela, menor o video. Amarrada a 68svh ela ocupa sempre a
     mesma fatia vertical, e a largura acompanha o formato do
     aparelho. A linha em vh fica de reserva para quem nao tem svh. */
  .vsl {
    width: min(100%, calc(68vh * 9 / 16));
    width: min(100%, calc(68svh * 9 / 16));
    margin-inline: auto;
  }

  /* 75% da coluna, mas nunca mais larga que a VSL que ela encima. */
  .lockup--compact {
    width: min(75%, calc(68vh * 9 / 16));
    width: min(75%, calc(68svh * 9 / 16));
    margin-inline: auto;
    margin-bottom: 1rem;
  }
}
@media (max-width: 640px) {

  /* ── Countdown: 241px → ~110px ── */
  .cd__inner { padding-block: 0.7rem; gap: 0.45rem; }
  .cd__mark  { font-size: 0.95rem; }
  .cd__when  { font-size: 0.6875rem; letter-spacing: 0.07em; }
  /* A cidade sai: ja aparece no hero, na §08 e no rodape.
     A data fica — e ela que sustenta o countdown perante a FTC. */
  .cd__city  { display: none; }
  .cd__reels { font-size: 2rem; }
  .cd__name  { font-size: 0.625rem; letter-spacing: 0.07em; }
  .cd__clock { width: 100%; justify-content: space-between; gap: 0.25rem; }
  .cd__sep   { height: 1.5rem; margin-top: 0.3rem; }
  .cd::before { --sf-l: 0.7rem; }
  .cd.is-slim .cd__inner { padding-block: 0.5rem; }
  .cd.is-slim .cd__reels { font-size: 1.05rem; }
  /* Colapsada no mobile a barra fica so com o essencial: relogio e
     botao numa linha. A marca sai — ela ja esta no hero logo acima. */
  .cd.is-slim .cd__label { display: none; }
  .cd__cta { font-size: 0.6875rem; padding: 0.75em 1.1em; }

  /* ── Hero ──
     min-height + align-items:flex-end fazia a sobra virar vazio no
     TOPO, empurrando o logo para baixo. No mobile o conteudo ja e
     alto o bastante: altura pelo conteudo, ancorado no inicio. */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-block: 1.1rem clamp(1.75rem, 5vh, 3rem);
  }
  .hero .logo-event { width: min(70vw, 14rem); }
  .logo-flare { margin-bottom: 0.9rem; }
  .hero .h1 { margin-bottom: 1.1rem; }
  .hero__sub { margin-top: 1.1rem; }
  .hero__echo { margin-top: 0.9rem; }
  .hero .btn-row { margin-top: 1.6rem; }

  /* Layout, centralizacao e tamanho da VSL moram no bloco de 959px. */
  .lockup--compact .lockup__img { height: clamp(2.4rem, 9vw, 3rem); }
  .lockup--compact .lockup__img--badge { height: clamp(2.9rem, 11vw, 3.6rem); }

  /* ── Respiro entre secoes ──
     O brief pede clamp(120px, 15vh, 220px), pensado para desktop.
     Em 375px isso soma mais de 2000px so de padding ao longo das
     nove secoes. Reduzido aqui, mantido no desktop. */
  .section { padding-block: clamp(3.5rem, 8vh, 5rem); }

  /* ── Blocos ── */
  .figure { margin-top: 2.25rem; }
  .s02 { margin-top: 1.75rem; gap: 2rem; }
  .lockup { margin-block: 2rem; padding-block: 1.75rem; gap: 1.25rem; }
  .lockup__img { height: 3.25rem; }
  .lockup__img--badge { height: 3.9rem; }
  .btn-row { margin-top: 2rem; }
  .scripture { padding: 1.5rem 1.25rem; }
  .step { grid-template-columns: 1fr; gap: 0.35rem; padding-block: 1.1rem; }

  /* ── §06: 1902px → tira rolavel ──
     Tres slots verticais empilhados faziam a secao mais alta da
     pagina. Viram tira horizontal, como a galeria da §04, e o
     formato vertical do depoimento se mantem. */
  .gallery--3 {
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--brushed-steel) transparent;
  }
  .gallery--3 > * { scroll-snap-align: center; }

  /* §2.6 — alvo de toque minimo de 44px */
  .btn--sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .consent { padding-block: 1rem; }
}