/* ══════════════════════════════════════════════════════════════
   Método CIS 252  ·  Goiânia e Santo André

   Direção: a página é uma casa de espetáculo com a luz baixa. O
   preto azulado é a plateia, o azul CIS é o facho que vem do
   palco e o amarelo é a luz de serviço, aquela que marca corredor
   e primeira fileira. Por isso o amarelo aparece pouco: se ele
   estiver em tudo, deixa de indicar caminho.

   Tipografia: Big Shoulders Display nos títulos, que é letra de
   letreiro, e Barlow no texto. As duas vêm da mesma linhagem de
   gótica americana de sinalização, então convivem sem briga.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. TOKENS ═══════════════ */

:root {
  --plateia:    #04060D;
  --casa:       #0A0F1F;
  --casa-alta:  #0E1428;
  --fosso:      #0E1A3C;
  --refletor:   #1F63D6;
  --refletor-cl:#5B9BFF;
  --brasa:      #F5B41C;
  --brasa-cl:   #FFD86B;
  --giz:        #EDF1F9;
  --giz-2:      rgba(237, 241, 249, .70);
  /* estava em .46, que dá 4,3:1 sobre a superfície das seções e
     reprova no AA para texto pequeno. .58 sobe para 5,7:1 sem
     perder o papel de terceiro nível. */
  --giz-3:      rgba(237, 241, 249, .58);
  --fio:        rgba(237, 241, 249, .11);
  --fio-forte:  rgba(237, 241, 249, .20);

  --display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
  --texto:   'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Escala tipográfica ──────────────────────────────────────
     Fechada em cinco degraus de texto e seis de display. Antes
     havia 25 tamanhos soltos na página, com 13, 13,5, 14, 14,5,
     15, 16 e 17 convivendo. Diferença de meio ponto ninguém lê
     como hierarquia, lê como desalinho. */
  --t-1: 12px;   /* micro-rótulo: olho, tag, legenda de foto     */
  --t-2: 14px;   /* apoio: lista densa, nota de rodapé           */
  --t-3: 16px;   /* corpo de card                                */
  --t-4: 18px;   /* corpo                                        */
  --t-5: 20px;   /* lead                                         */

  --d-1: 20px;
  --d-2: 26px;
  --d-3: 34px;
  --d-4: clamp(30px, 4.4vw, 52px);
  --d-5: clamp(38px, 6.4vw, 74px);
  --d-6: clamp(52px, 8.6vw, 104px);

  /* Entrelinha também é escala. Havia 26 valores diferentes, e é
     isso que faz dois cards vizinhos com o mesmo tamanho de letra
     parecerem desalinhados sem que se saiba dizer por quê. */
  /* 0,92 vinha de hábito de display, e display de uma linha aguenta.
     Aqui vinte e um títulos quebram em duas ou três linhas, e a Big
     Shoulders é condensada de caixa alta: a maiúscula ocupa quase toda
     a caixa, então sobravam dez pixels de folga num título de 52. Em
     1,06 a folga passa de 0,20em para 0,34em, que é onde caixa alta
     para de parecer empilhada. */
  --lh-0: 1.06;   /* display grande e numerais                    */
  --lh-1: 1.18;   /* título de card                               */
  --lh-2: 1.35;   /* rótulo, legenda, lista curta                 */
  --lh-3: 1.58;   /* texto corrido                                */

  /* quatro valores de tracking, não dez */
  --tr--:  -.012em;   /* display grande, fecha o rio entre letras */
  --tr-0:  0;
  --tr-1:  .06em;     /* botão                                    */
  --tr-2:  .2em;      /* caixa alta pequena                       */

  /* altura do bloco fixo do topo, fita mais barra. É constante porque as
     duas têm altura declarada, e o hero do celular subtrai isto da tela
     para saber quanto sobra para a foto. */
  --topo-h: 100px;

  /* Margem lateral, num lugar só. Ela estava escrita à mão em três
     contêineres diferentes, e o da caixa normal encolhia no celular
     enquanto o das grades largas e o do rodapé não: dava quatro pixels
     de diferença de cada lado, o bastante para o olho perceber que os
     blocos não começam na mesma linha ao rolar a página. */
  --gutter: 20px;

  --wrap: 1160px;
  --wrap-largo: 1320px;   /* grades respiram mais que parágrafos  */
  --r: 4px;

  /* ── Ritmo vertical em três tempos ───────────────────────────
     Quinze seções com o mesmo respiro viram metrônomo. Aqui a
     seção declara se é curta, normal ou de fôlego, e a página
     ganha cadência sem que nada saia do lugar. */
  --y-curto:  clamp(52px, 6vw, 84px);
  --y-normal: clamp(72px, 9vw, 128px);
  --y-longo:  clamp(96px, 12vw, 176px);
  --secao-y: var(--y-normal);
}

/* ═══════════════ 2. BASE ═══════════════ */

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

/* `hidden` é atributo, e a regra que o navegador aplica para ele é fraca:
   qualquer `display:` declarado na página vence, e o elemento continua na
   tela mesmo marcado como escondido. Foi o que aconteceu com o botão
   "Falar agora no WhatsApp" da tela de sucesso, que é um `.btn` com
   `display: inline-flex`: aqui, sem número cadastrado, ele aparecia
   apontando para lugar nenhum, bem no ponto do funil em que mais se
   perde gente. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Isto é o que resolve a lista do select. O popup de um select nativo
     não é desenhado pela página, é desenhado pelo navegador, e sem esta
     declaração ele assume tema claro: fundo branco, barra de rolagem
     branca e realce azul do sistema, tudo cravado no meio de uma página
     preta. Com color-scheme: dark o navegador desenha o mesmo popup na
     variante escura, e junto vêm a barra de rolagem e o realce certos. */
  color-scheme: dark;
}

/* A barra de rolagem da página e a de qualquer caixa que role por dentro,
   como o corpo dos documentos legais. A nativa escura já melhora muito,
   mas continua mais grossa e mais clara do que esta página pede. */
* { scrollbar-width: thin; scrollbar-color: rgba(237, 241, 249, .26) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--plateia); }
::-webkit-scrollbar-thumb {
  background: rgba(237, 241, 249, .22);
  border: 2px solid var(--plateia);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(237, 241, 249, .40); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--plateia);
  color: var(--giz);
  font-family: var(--texto);
  font-size: var(--t-4);
  line-height: var(--lh-3);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

::selection { background: var(--brasa); color: #1A1200; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  /* o atalho de teclado é um <a> sem href estilizado, então herdava
     o azul de link padrão do navegador, único valor fora da paleta
     na página inteira */
  color: var(--giz);
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 16px; background: var(--brasa); color: #14100A;
  font-weight: 600; border-radius: var(--r);
}
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
@media (max-width: 560px) { :root { --gutter: 16px; } }

/* ═══════════════ 3. TIPOGRAFIA ═══════════════ */

.h2, .hero__h1, .final__h, .modal__t, .gente__nome {
  font-family: var(--display);
  font-weight: 800;
  line-height: var(--lh-0);
  letter-spacing: var(--tr--);
  text-transform: uppercase;
  margin: 0;
}

/* Um degrau abaixo do topo da escala, e de propósito. Agora que a foto
   ocupa a largura inteira, ela é que carrega o impacto, e o título não
   precisa disputar. No tamanho anterior "máximo potencial" quebrava em
   duas linhas dentro da metade esquerda, o que dava três linhas de
   título e jogava o botão para fora da dobra. Neste degrau a frase cabe
   inteira, o título fica em duas linhas e o botão volta para dentro. */
.hero__h1 {
  font-size: var(--d-5);
  letter-spacing: var(--tr--);
}
.hero__h1 em {
  font-style: normal;
  color: var(--brasa);
}

.h2 { font-size: var(--d-4); }

.olho {
  margin: 0 0 18px;
  font-family: var(--texto);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: var(--tr-2);
  text-transform: uppercase;
  color: var(--brasa);
}
.olho__pt { color: var(--giz-3); margin-inline: 4px; }

/* ── Regra de alinhamento ────────────────────────────────────
   Havia dez cabeçalhos centralizados e três à esquerda, sem
   critério visível, e o olho ficava reancorando a cada seção.
   A regra agora é uma só: seção de grade simétrica anuncia no
   centro, seção de duas colunas anuncia à esquerda, junto da
   coluna que ela abre. */
.sec-head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.sec-head--esq { margin-inline: 0; text-align: left; }
.sec-head--esq .sec-head__sub { max-width: 52ch; }
.sec-head__sub {
  margin: 22px 0 0;
  font-size: var(--t-4);
  color: var(--giz-2);
}

.sec { padding-block: var(--secao-y); position: relative; }

/* ── Cadência ────────────────────────────────────────────────
   As quinze seções tinham exatamente o mesmo respiro, e o efeito
   era de metrônomo: bloco, pausa, bloco, pausa, por dezessete mil
   pixels. Aqui cada seção declara o seu tempo.

   Fôlego vai para os quatro momentos que a página precisa que
   sejam lembrados: o vídeo de abertura, o formato teatro, a
   escolha da modalidade e quem conduz. Tempo curto vai para as
   seções que continuam o assunto da anterior, e a proximidade é
   o que diz ao leitor que ainda é o mesmo bloco de argumento. */
.sec--metodo, .sec--teatro, .sec--modos, .sec--gente { --secao-y: var(--y-longo); }
.sec--quem, .sec--edicao, .sec--depos, .sec--gala, .sec--garantia { --secao-y: var(--y-curto); }

/* ── Friso de palco ──────────────────────────────────────────
   A ideia de casa de espetáculo estava só na copy. Este é o
   único motivo estrutural que a carrega: o filete duplo, grosso
   por cima e fino embaixo, que é como se marca a boca de cena.
   Abre exatamente as quatro seções de fôlego, e é justamente
   por serem quatro que ele continua significando alguma coisa. */
.sec--metodo::before, .sec--teatro::before,
.sec--modos::before, .sec--gente::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background:
    linear-gradient(90deg, transparent, var(--brasa) 24%, var(--brasa) 76%, transparent) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--fio-forte) 14%, var(--fio-forte) 86%, transparent) bottom / 100% 1px no-repeat;
  z-index: 2;
  pointer-events: none;
}
.sec--modos::before { background-image:
    linear-gradient(90deg, transparent, var(--refletor-cl) 24%, var(--refletor-cl) 76%, transparent),
    linear-gradient(90deg, transparent, var(--fio-forte) 14%, var(--fio-forte) 86%, transparent); }

/* ── Largura ─────────────────────────────────────────────────
   Parágrafo continua estreito, porque linha longa cansa. Quem
   ganha largura é a grade, que estava espremida na mesma medida
   do texto e por isso a página inteira parecia uma fita no meio
   da tela. */
.sec--ganhos > .wrap,
.sec--ciencia > .wrap,
.sec--depos > .wrap,
.sec--jornada > .wrap,
.sec--mapa > .wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap-largo));
}

/* ═══════════════ 4. BOTÕES ═══════════════ */

.btn {
  --bg: var(--brasa);
  --fg: #14100A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texto);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: var(--tr-1);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 0 0 0 rgba(245, 180, 28, .45);
}
.btn:hover {
  background: var(--brasa-cl);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -12px rgba(245, 180, 28, .7);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn--sm { padding: 11px 18px; font-size: var(--t-1); }
.btn--lg { padding: 19px 34px; font-size: var(--t-3); }
.btn--full { width: 100%; }

.btn--alt { --bg: var(--refletor); --fg: var(--giz); }
.btn--alt:hover { background: var(--refletor-cl); box-shadow: 0 10px 30px -12px rgba(31, 99, 214, .8); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--giz);
  border: 1px solid var(--fio-forte);
}
.btn--ghost:hover { background: rgba(237, 241, 249, .06); box-shadow: none; }

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--brasa);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--brasa-cl); }

/* ═══════════════ 5. PLACEHOLDERS DE IMAGEM ═══════════════ */

/* Enquanto as fotos não chegam, o espaço fica reservado com a
   medida escrita dentro. É proposital que seja feio: assim
   ninguém publica achando que já está pronto. */
.ph, .bg-ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(237,241,249,.035) 0 10px,
      transparent 10px 20px),
    var(--casa-alta);
  border: 1px dashed var(--fio-forte);
  border-radius: var(--r);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.ph::after, .bg-ph::after {
  content: attr(data-ph);
  padding: 12px 18px;
  max-width: 90%;
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: var(--tr-2);
  text-transform: uppercase;
  color: var(--giz-3);
  line-height: var(--lh-3);
}
.ph--retrato { aspect-ratio: 3 / 4; }
.ph--16x10   { aspect-ratio: 16 / 10; }
.ph--4x5     { aspect-ratio: 4 / 5; }

/* ── Fundo de seção ──────────────────────────────────────────
   O .fundo é a caixa que carrega a foto e o véu que segura o
   contraste do texto por cima. Trocar o provisório pelo definitivo
   é substituir a div de dentro por <img>, sem mexer no véu.

   O véu não é uma cor chapada: escurece mais em cima e embaixo,
   onde as seções se encostam, para a foto não aparecer com corte
   reto na emenda. */
.fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fundo > img, .fundo > .bg-ph {
  width: 100%; height: 100%;
  object-fit: cover;
}
.fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--plateia) 0%, transparent 22%, transparent 78%, var(--plateia) 100%),
    rgba(4, 6, 13, .74);
}
/* na seção das modalidades o véu é azul, porque ali o fundo é o
   fosso e não a plateia */
.fundo--fosso::after {
  background:
    linear-gradient(180deg, var(--fosso) 0%, transparent 24%, transparent 76%, var(--fosso) 100%),
    rgba(14, 26, 60, .76);
}

/* O provisório não pode roubar a leitura da copy que fica por cima,
   então a listra some quase toda e a etiqueta vai para um canto,
   presa ali como aviso de obra. */
.bg-ph {
  border-radius: 0;
  border-width: 0;
  opacity: .5;
  place-items: start;
}
.bg-ph::after {
  position: absolute;
  top: 14px; left: 14px;
  padding: 7px 12px;
  background: rgba(4, 6, 13, .8);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  font-size: var(--t-1);
  letter-spacing: var(--tr-2);
}

/* tudo que é conteúdo fica acima do fundo */
.sec > .wrap, .final__in, .teatro__in { position: relative; z-index: 1; }

/* ═══════════════ 6. FITA DE GARANTIA ═══════════════ */

/* Fita e barra são um bloco só, e é o bloco que gruda no topo. Antes só
   a barra era sticky, então a fita subia e desaparecia, e a página
   ficava com um topo diferente do que tinha no carregamento. */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
}

.fita {
  position: relative;
  overflow: hidden;
  background: var(--brasa);
  color: #14100A;
  padding: 7px 0;
}
.fita__trilho {
  display: flex;
  gap: 26px;
  width: max-content;
  white-space: nowrap;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: var(--tr-2);
  text-transform: uppercase;
  animation: fita 24s linear infinite;
}
.fita__sep { opacity: .5; }
@keyframes fita { to { transform: translateX(-50%); } }

/* ═══════════════ 7. BARRA DO TOPO ═══════════════ */

.topbar {
  position: relative;   /* quem gruda no topo é o .topo, que a contém */
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.topbar.is-stuck {
  background: rgba(4, 6, 13, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--fio);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 66px;
}

/* Régua de leitura. Numa página de dezessete mil pixels a pessoa
   perde a noção de quanto falta, e quem não sabe quanto falta
   desiste no meio. É um filete de dois pixels que só existe
   depois que a barra encosta, então não compete com o hero. */
.topbar__regua {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--refletor), var(--brasa));
  opacity: 0;
  transition: opacity .3s ease;
}
.topbar.is-stuck .topbar__regua { opacity: 1; }
/* a logomarca original do CIS já diz o nome do produto, então ao lado
   dela só entra de quem é a unidade, num filete discreto */
.marca {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.marca__logo { width: auto; height: 42px; }
.topbar__quando {
  margin: 0 0 0 auto;
  font-size: var(--t-2); font-weight: 500;
  color: var(--giz-2);
}
.topbar__quando span { color: var(--brasa); margin-inline: 4px; }
@media (max-width: 820px) { .topbar__quando { display: none; } .topbar__in .btn { margin-left: auto; } }
@media (max-width: 460px) { .topbar__in .btn { display: none; } }

/* ═══════════════ 8. HERO ═══════════════ */

/* ── Hero em largura de página ───────────────────────────────
   O material chega em duas camadas 16:9 do mesmo tamanho: o público
   e o par recortado, este com alfa de verdade. Como têm a mesma
   medida e o mesmo object-fit, elas se alinham sozinhas, e o véu
   entre as duas escurece só o fundo. O par fica limpo por cima.

   A copy não é uma coluna ao lado da foto: ela flutua sobre a
   metade esquerda, que é justamente a metade que o recorte deixou
   vazia, com as figuras começando em 49% da largura. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--plateia) 0%, #060B18 55%, var(--casa) 100%);
}

.hero__cena {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* em monitor muito largo o 16:9 passaria da tela inteira e jogaria
     o botão para fora da dobra; daí o teto */
  max-height: 84vh;
  overflow: hidden;

  /* A base da cena se dissolve no fundo da página. O véu já apagava o
     público por ali, mas ele mora por baixo da camada do par, então as
     figuras continuavam terminando em corte reto e a foto lia como um
     retângulo colado. A máscara vale para a cena inteira, fundo e par
     juntos, e é o que faz a emenda sumir. */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.hero__fundo, .hero__figura {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 20% no eixo vertical: quando o teto de altura corta, o corte sai
     de baixo, e as cabeças ficam */
  object-position: center 20%;
}
.hero__figura { z-index: 2; }

/* o véu vive entre as duas camadas: escurece o público, não as pessoas */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--plateia) 4%, rgba(4, 6, 13, .82) 30%, rgba(4, 6, 13, .18) 58%, transparent 72%),
    linear-gradient(180deg, rgba(4, 6, 13, .55), transparent 26%, transparent 72%, var(--plateia));
}

.hero__in {
  grid-area: 1 / 1;
  align-self: center;
  position: relative;
  z-index: 3;
}
.hero__copy { max-width: min(52%, 620px); }

@media (max-width: 900px) {
  /* No retrato o 16:9 viraria uma tira de duzentos pixels, então a cena
     fica quase quadrada e a janela desliza para a direita, onde estão os
     dois, centrados no quadro.

     A proporção e o alinhamento não são gosto, saem de conta. O recorte
     põe as figuras entre 55% e 96% da largura, ou seja, uma faixa de
     41%. Em 7/8 a janela abre 49% da imagem, e encostando em 100% ela
     mostra de 51% a 100%: a faixa das figuras cai no meio, com 8% de
     folga de cada lado. Em 1/1 a janela abria 56% e, mesmo encostada à
     direita, sobrava plateia à esquerda e faltava borda à direita, que
     é o que empurrava os dois para fora do centro.

     A copy desce para o fluxo, embaixo da imagem. */
  /* No retrato a foto encosta na copy logo abaixo, então a dissolução
     começa bem antes e é mais longa: sem isso fica um quadrado sobre um
     bloco de texto, com a costura à mostra.

     A altura é o que decide se o botão aparece no carregamento ou se a
     pessoa precisa rolar para achá-lo. Com o recorte de celular o par
     já vem centrado no arquivo, então dá para encolher a cena sem
     empurrar ninguém para fora do quadro. */
  /* A cena deixa de ter altura própria e passa a ser o elemento
     elástico: ela fica com a sobra depois que a copy ocupa o que
     precisa. Numa tela alta a foto cresce, numa baixa ela encolhe até o
     piso de 190px, e o botão continua na primeira dobra nas duas. Altura
     fixa em vh não faz isso: o que cabe muda conforme o texto quebra.

     svh, e não vh, porque no celular a barra do navegador entra e sai, e
     vh mede a tela sem ela: o botão ficaria escondido atrás da barra
     justamente no carregamento, que é quando ele mais precisa aparecer. */
  .hero {
    grid-template-rows: clamp(190px, 32svh, 330px) auto auto;
  }
  /* celular baixo, do tipo 667 de altura: a copy acima do botão não
     encolhe, então quem cede é a foto. Sem isto o botão ficava cinquenta
     pixels abaixo da dobra justamente no aparelho mais apertado. */
  @media (max-height: 730px) {
    .hero { grid-template-rows: clamp(150px, 25svh, 260px) auto auto; }
  }
  .hero__cena {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,.5) 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,.5) 88%, transparent 100%);
  }
  .hero__fundo, .hero__figura { object-position: center 14%; }
  .hero__in { grid-area: 2 / 1; align-self: start; padding-top: 10px; }

  /* ── Ordem na primeira dobra ──────────────────────────────
     No celular o parágrafo de apoio desce para depois do botão. Ele
     explica, mas quem já rolou até aqui não precisa de explicação
     antes de poder agir: o que decide é a data, o formato e o botão.
     A ordem visual muda, a do documento não, então leitor de tela e
     navegação por teclado continuam encontrando o texto no lugar em
     que ele foi escrito. */
  .hero__copy { max-width: none; display: flex; flex-direction: column; }
  .hero__copy .olho      { order: 1; margin-bottom: 10px; }
  .hero__copy .hero__h1  { order: 2; }
  .hero__copy .marquise  { order: 3; margin: 14px 0 16px; }
  /* menos folga lateral e um degrau a menos de corpo: com 34px de cada
     lado e 16px de letra o rótulo quebrava em duas linhas em tela de
     375, e sozinho custava quase trinta pixels de altura */
  .hero__copy .btn       { order: 4; padding-inline: 18px; font-size: var(--t-2); }
  .hero__copy .hero__nota{ order: 5; margin-top: 12px; }
  .hero__copy .hero__lead{ order: 6; margin: 20px 0 0; }

  /* as duas portas ficam lado a lado até bem estreito: empilhadas
     custavam a altura que o botão precisa para caber na dobra */
  .marquise__portas { grid-template-columns: 1fr 1fr; gap: 14px; }
  /* o véu perde a parada escura do rodapé: quem faz a transição agora é
     a máscara, e os dois juntos escureciam duas vezes */
  .hero__veu {
    background: linear-gradient(180deg, rgba(4, 6, 13, .45), transparent 24%);
  }
}

.hero__lead {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: var(--t-5);
  color: var(--giz-2);
}

.hero__nota {
  margin: 16px 0 0;
  font-size: var(--t-2);
  color: var(--giz-3);
}

/* ── marquise: o letreiro da casa ── */

.marquise {
  margin: clamp(22px, 2.6vw, 30px) 0 26px;
  max-width: 560px;
}
.marquise__filete {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--brasa), rgba(245,180,28,.15));
  border-radius: var(--r);
}
.marquise__data {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: var(--lh-0);
}
/* O <b> herda "bolder" do navegador e, sobre o 800 do pai, resolvia
   em 900. Os numerais da data, que são a assinatura da página,
   saíam mais pesados que qualquer outro título. Fixar o peso é o
   que devolve a página ao mesmo eixo. */
/* um degrau abaixo do título. Com o título neste tamanho, a data no
   mesmo degrau passou a disputar a primeira leitura com ele */
.marquise__data b { font-size: var(--d-4); font-weight: 800; }
.marquise__data i {
  font-style: normal;
  font-size: var(--d-2);
  color: var(--brasa);
  transform: translateY(-.14em);
}
/* o mês e o ano sobem de degrau: eram apoio da data e ficavam pequenos
   demais ao lado de numerais de cinquenta pixels */
.marquise__mes {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  font-family: var(--display);
  font-size: var(--d-2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: var(--lh-1);
  text-align: right;
}
.marquise__mes em { font-style: normal; color: var(--brasa); }

/* As duas portas não são coisa que se clica, são informação, então
   saem do nível placa e passam para régua, igual aos setores do
   mapa. O filete de cada uma já carrega a cor do seu território:
   amarelo no presencial, azul na transmissão. */
.marquise__portas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
}
/* as portas ficam lado a lado até bem estreito. Empilhadas custavam
   oitenta pixels, que é justamente o que o botão precisa para caber na
   primeira dobra do celular. */
@media (max-width: 330px) { .marquise__portas { grid-template-columns: 1fr; } }
.porta {
  display: block;
  padding: 12px 0 0;
  border-top: 2px solid var(--brasa);
  font-size: var(--t-1);
  line-height: var(--lh-3);
  color: var(--giz-3);
}
.porta--alt { border-top-color: var(--refletor-cl); }
/* as duas versões do local usam a mesma especificidade de propósito:
   com .porta i o seletor ficava mais forte que .porta__longo e as duas
   apareciam juntas */
.porta__curto, .porta__longo { font-style: normal; display: block; }
.porta__curto { display: none; }
/* a troca mora aqui, ao lado da regra base, e não lá em cima no bloco do
   hero: as duas têm a mesma especificidade, e quem vier depois no arquivo
   é quem vale. No bloco do hero esta regra vinha antes e perdia. */
@media (max-width: 900px) {
  .porta__curto { display: block; }
  .porta__longo { display: none; }
}
.porta b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--display);
  font-size: var(--d-1);
  font-weight: 700;
  letter-spacing: var(--tr-1);
  text-transform: uppercase;
  color: var(--brasa);
}
.porta--alt b { color: var(--refletor-cl); }

/* ── contagem ── */

/* Abaixo da cena no desktop, e abaixo da copy no celular, onde a copy
   deixa de ser sobreposição e vira a segunda linha da grade. A regra do
   celular mora aqui, junto da base, e não lá em cima no bloco do hero:
   as duas têm a mesma especificidade, e no bloco do hero ela vinha
   antes, então perdia e a contagem caía por cima do título. */
.hero__contagem {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin: clamp(36px, 5vw, 60px) auto 0;
  /* A contagem fecha o hero, e o hero perdeu o respiro de baixo quando
     virou grade: ela terminava exatamente onde a faixa de números
     começa. Somado ao respiro da seção seguinte isto dá 88px no celular
     e 126px no desktop, que é a mesma família das outras emendas da
     página, entre 104 e 168. */
  padding-top: 26px;
  padding-bottom: clamp(48px, 6vw, 64px);
  border-top: 1px solid var(--fio);
}
.countdown__label {
  font-size: var(--t-1); font-weight: 600;
  letter-spacing: var(--tr-2); text-transform: uppercase;
  color: var(--giz-3);
}
.cd { display: flex; align-items: baseline; gap: 6px; }
.cd b {
  font-family: var(--display);
  font-size: var(--d-3);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cd i {
  font-style: normal; font-size: var(--t-1); font-weight: 600;
  letter-spacing: var(--tr-2); text-transform: uppercase; color: var(--giz-3);
}
/* no celular a linha única quebrava e deixava "seg" sozinho embaixo.
   Vira grade de quatro colunas com o rótulo por cima. */
@media (max-width: 900px) { .hero__contagem { grid-row: 3; } }
@media (max-width: 620px) {
  .hero__contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .countdown__label { grid-column: 1 / -1; text-align: center; }
  .cd { flex-direction: column; align-items: center; gap: 2px; }
}

/* ═══════════════ 9. NÚMEROS ═══════════════ */

.numeros {
  background: var(--casa);
  border-block: 1px solid var(--fio);
  padding-block: clamp(40px, 5vw, 62px);
}
.numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--fio);
}
@media (max-width: 780px) { .numeros__grade { grid-template-columns: repeat(2, 1fr); } }
.num {
  margin: 0;
  padding: 8px clamp(12px, 2vw, 28px);
  background: var(--casa);
  text-align: center;
}
.num b {
  display: block;
  font-family: var(--display);
  font-size: var(--d-5);
  font-weight: 800;
  line-height: var(--lh-0);
  color: var(--brasa);
}
.num i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--display);
  font-size: var(--d-1); font-weight: 700;
  letter-spacing: var(--tr-1); text-transform: uppercase;
}
.num span {
  display: block;
  margin-top: 8px;
  font-size: var(--t-2);
  line-height: var(--lh-3);
  color: var(--giz-3);
}

/* ═══════════════ 10. VÍDEO ═══════════════ */

/* fachada: nenhum byte de vídeo carrega antes do clique. O que aparece
   é a capa, e o <video> só é criado quando a pessoa decide assistir.
   Numa landing de tráfego pago isso vale meio segundo de LCP e um
   punhado de requisições que não acontecem. */
.video {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  overflow: hidden;
  background: #05070E;
  /* altura da barra de controles do navegador. A capa recua isto depois
     que o vídeo existe, senão ela taparia justamente os controles. */
  --barra: 48px;
}
.video--largo { max-width: 1000px; }
/* o institucional é vertical na origem: a caixa acompanha em vez de
   encaixar um 9:16 dentro de um 16:9 e sobrar tarja dos dois lados */
.video--retrato { aspect-ratio: 9 / 16; max-width: min(380px, 78vw); }
/* card é menor, e o navegador desenha a barra de controles mais baixa.
   Precisa vir depois de .video, que tem a mesma especificidade. */
.video--card { max-width: none; margin: 0; aspect-ratio: 16 / 9; flex: 0 1 clamp(240px, 31%, 360px); --barra: 38px; }
/* No celular o piso de 240px da base era maior que um terço da caixa,
   então cada depoimento parava em 240 e ficava centrado, com cinquenta e
   quatro pixels de vazio de cada lado. Um por linha, ocupando a largura
   toda, é a maior miniatura possível e alinha com o resto da página. */
@media (max-width: 620px) { .video--card { flex-basis: 100%; } }

.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity .25s ease;
}
/* depois que o vídeo existe, a capa deixa a barra de controles livre.
   A imagem passa a ser ancorada pela base, senão o recorte dos quarenta e
   oito pixels sairia de baixo e comeria justamente o gancho, que é a
   única coisa ali dizendo do que o vídeo trata. */
.video.is-armado .video__play { inset: 0 0 var(--barra) 0; }
.video.is-armado .video__play img { object-position: center bottom; }
/* e some enquanto toca */
.video.is-tocando .video__play { opacity: 0; pointer-events: none; }
/* o rótulo era um convite para o primeiro play; em cima de um vídeo
   pausado no meio ele passaria a mentir */
.video.is-armado .video__rot { display: none; }
.video__play img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .78;
  transition: opacity .3s ease, transform .5s ease;
}
.video__play:hover img { opacity: .95; transform: scale(1.02); }

.video__ico {
  position: relative;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brasa);
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.8);
  transition: transform .2s ease;
}
.video__play:hover .video__ico { transform: scale(1.07); }
.video__ico svg { width: 30px; height: 30px; fill: #14100A; margin-left: 3px; }
/* nos depoimentos o botão sai do centro e vai para o alto, à direita: a
   capa agora carrega o gancho na base, e no centro os dois se encostavam */
.video--card .video__play { place-items: start end; padding: 14px; }
.video--card .video__ico { width: 48px; height: 48px; }
.video--card .video__ico svg { width: 20px; height: 20px; }
/* a capa já tem véu próprio, então o escurecimento extra sai e o gancho
   fica com o contraste que foi desenhado nele */
.video--card .video__play img { opacity: 1; }
.video--card .video__play:hover img { opacity: 1; transform: scale(1.03); }

.video__rot {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  font-size: var(--t-1); font-weight: 700;
  letter-spacing: var(--tr-2); text-transform: uppercase;
  color: var(--giz);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.video iframe, .video > video { width: 100%; height: 100%; border: 0; display: block; background: #05070E; }

/* flex centralizado em vez de grade: são cinco depoimentos, então
   qualquer grade de 2, 3 ou 4 colunas deixa órfão na última linha.
   Assim a sobra fica centrada e parece intenção. */
.depos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ═══════════════ 11. CICLO DA IE ═══════════════ */

.sec--ie { background: var(--casa); border-block: 1px solid var(--fio); }

.ciclo__titulo {
  margin: 0 0 20px;
  font-size: var(--t-1); font-weight: 600;
  letter-spacing: var(--tr-2); text-transform: uppercase;
  color: var(--giz-3);
}
.ciclo {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: ciclo;
}
@media (max-width: 880px) { .ciclo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ciclo { grid-template-columns: 1fr; } }

/* Nível RÉGUA do sistema de superfície. A página tinha oito seções
   diferentes usando a mesma placa de hairline com raio de 4px, e
   consistência nessa dose vira monotonia. Agora existem três
   níveis, escolhidos pelo que a coisa é:

     placa  = o que você abre ou escolhe   (modalidade, pergunta, card de foto)
     bloco  = exposição em conjunto        (ganhos, áreas)
     régua  = enumeração                   (ciclo, jornada, selos, setores)

   A régua não tem caixa. Tem um filete em cima e o texto solto
   embaixo, que é como lista se comporta em material impresso. */
.ciclo__item {
  position: relative;
  padding: 20px 0 0;
  border-top: 2px solid var(--refletor);
}
/* a seta que liga um passo ao outro: existe porque o conteúdo é
   mesmo um ciclo, não porque enfeita. Sobe para a altura do filete,
   que agora é a linha que organiza a sequência. */
.ciclo__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -4px; right: -12px;
  width: 7px; height: 7px;
  border-top: 2px solid var(--refletor);
  border-right: 2px solid var(--refletor);
  transform: rotate(45deg);
}
@media (max-width: 880px) { .ciclo__item::after { display: none; } }

.ciclo__n {
  display: block;
  font-family: var(--display);
  font-size: var(--d-3); font-weight: 800; line-height: var(--lh-1);
  color: var(--refletor-cl);
}
.ciclo__item h3 {
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: var(--d-2); font-weight: 700;
  letter-spacing: var(--tr-0); text-transform: uppercase;
}
.ciclo__item p { margin: 0; font-size: var(--t-2); line-height: var(--lh-3); color: var(--giz-2); }

/* ═══════════════ 12. FORMATO TEATRO ═══════════════ */

.sec--teatro { overflow: hidden; }
.teatro__luz {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 80% 30%, rgba(31, 99, 214, .16), transparent 70%);
  pointer-events: none;
}
.teatro__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}
@media (max-width: 900px) { .teatro__in { grid-template-columns: 1fr; } }

.teatro__copy p { color: var(--giz-2); }
.teatro__copy .h2 { margin-bottom: 22px; }

.marcas {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.marcas li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-3);
  color: var(--giz);
}
.marcas li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 12px; height: 2px;
  background: var(--refletor-cl);
}

/* mosaico em vez de pilha: três fotos empilhadas ficavam bem mais
   altas que a coluna de texto ao lado */
.teatro__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.teatro__fotos img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--fio);
}
.teatro__fotos > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* 4:3 e não 4:5: as três fotos do mídia kit são paisagem, e forçar
   retrato nelas cortaria metade da plateia */
.teatro__fotos > :nth-child(n+2) { aspect-ratio: 4 / 3; }
@media (max-width: 480px) {
  .teatro__fotos { grid-template-columns: 1fr; }
  .teatro__fotos > * { aspect-ratio: 16 / 10 !important; }
}

/* ═══════════════ 13. GANHOS ═══════════════ */

.sec--ganhos { background: var(--casa); border-block: 1px solid var(--fio); }
/* três colunas fixas porque são seis cards: auto-fit deixaria uma
   célula vazia sobrando na última linha em telas largas */
.ganhos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
  border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 900px) { .ganhos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ganhos { grid-template-columns: 1fr; } }
.ganho {
  padding: 32px 28px 34px;
  background: var(--casa);
  transition: background-color .25s ease;
}
.ganho:hover { background: var(--casa-alta); }
.ganho h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: var(--d-2); font-weight: 700; line-height: var(--lh-1);
  letter-spacing: var(--tr-0); text-transform: uppercase;
}
.ganho p { margin: 0; font-size: var(--t-3); color: var(--giz-2); }

/* ═══════════════ 14. PARA QUEM ═══════════════ */

.quem__in {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
@media (max-width: 880px) { .quem__in { grid-template-columns: 1fr; } }
/* o cabeçalho grudava no topo e a lista ao lado terminava bem antes,
   deixando um vão à esquerda; centrar na altura fecha o buraco */
.quem__in { align-items: center; }
.quem__in .sec-head { margin-bottom: 0; }

.quem { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--fio); }
.quem li {
  padding: 22px 4px 22px 34px;
  position: relative;
  background: var(--plateia);
  font-size: var(--t-4);
  color: var(--giz);
}
.quem li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.5em;
  width: 18px; height: 1px;
  background: var(--brasa);
}

/* ═══════════════ 15. MODALIDADES ═══════════════ */

.sec--modos {
  background: var(--fosso);
  border-block: 1px solid var(--fio);
  overflow: hidden;
}
.modos__luz {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 20% 0%, rgba(31, 99, 214, .35), transparent 65%),
    radial-gradient(50% 60% at 82% 100%, rgba(245, 180, 28, .10), transparent 65%);
  pointer-events: none;
}
.sec--modos .wrap { position: relative; }

.modos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 840px) { .modos { grid-template-columns: 1fr; } }

.modo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 28px 32px;
  background: rgba(4, 6, 13, .58);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  backdrop-filter: blur(6px);
}
.modo__tag {
  align-self: flex-start;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brasa);
  color: #14100A;
  font-size: var(--t-1); font-weight: 700;
  letter-spacing: var(--tr-2); text-transform: uppercase;
}
.modo__tag--alt { background: var(--refletor); color: var(--giz); }
.modo__t {
  margin: 0;
  font-family: var(--display);
  font-size: var(--d-4);
  font-weight: 800; line-height: var(--lh-0);
  text-transform: uppercase;
}
.modo__local { margin: -8px 0 0; font-size: var(--t-2); color: var(--giz-2); }

/* o laço do card: mesma caixa que o espaço reservado ocupava, com a
   moldura e o raio da página */
.modo__filme {
  width: 100%;
  /* sem isto o atributo height="600" do HTML vira dica de estilo e vence
     o aspect-ratio, porque largura e altura ficam as duas definidas */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  background: var(--plateia);
}
.modo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; flex: 1; }
.modo__lista li {
  position: relative;
  padding-left: 24px;
  font-size: var(--t-2);
  color: var(--giz-2);
}
.modo__lista li::before {
  content: '';
  position: absolute;
  left: 2px; top: .58em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--brasa);
}
.modo--global .modo__lista li::before { border-color: var(--refletor-cl); }

/* ═══════════════ 16. CIÊNCIA ═══════════════ */

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--fio);
  border-block: 1px solid var(--fio);
}
.area { padding: 30px 24px 32px; background: var(--plateia); }
/* Dois territórios de cor, e não um amarelo único espalhado.
   O azul marca o que é MÉTODO, aquilo que se aprende: ciclo da
   inteligência emocional, as cinco áreas da ciência, a jornada dos
   três dias, o que muda no formato teatro. O amarelo marca o que é
   OFERTA, aquilo que se decide: data, modalidade, setor, garantia,
   botão. Antes o azul existia em cinco elementos de oitocentos,
   ou seja, era uma intenção declarada no CSS que não chegava à
   tela. */
.area h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: var(--d-1); font-weight: 700; line-height: var(--lh-1);
  letter-spacing: var(--tr-1); text-transform: uppercase;
  color: var(--refletor-cl);
}
.area p { margin: 0; font-size: var(--t-2); color: var(--giz-2); }

.selos {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
/* régua: credencial é enumeração, e as quatro em caixa disputavam
   atenção com os cinco cards de área logo acima */
.selos li {
  position: relative;
  padding: 16px 0 0 30px;
  border-top: 1px solid var(--fio-forte);
  font-size: var(--t-2);
  color: var(--giz-2);
}
/* o tique se prende à primeira linha do texto, não ao centro da
   caixa: com duas ou três linhas ele ficava boiando no meio */
.selos li::before {
  content: '';
  position: absolute;
  left: 2px; top: 22px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--brasa);
  border-bottom: 2px solid var(--brasa);
  transform: rotate(-45deg);
}

/* ═══════════════ 17. JORNADA ═══════════════ */

.sec--jornada { background: var(--casa); border-block: 1px solid var(--fio); }
.jornada {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 820px) { .jornada { grid-template-columns: 1fr; } }
/* régua, mesma lógica do ciclo: jornada é enumeração, não card */
.etapa {
  padding: 22px 0 0;
  border-top: 2px solid var(--refletor);
}
.etapa__n {
  display: block;
  font-family: var(--display);
  font-size: var(--d-3); font-weight: 800; line-height: var(--lh-1);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--refletor-cl);
}
.etapa h3 {
  margin: 14px 0 10px;
  font-family: var(--display);
  font-size: var(--d-2); font-weight: 700;
  letter-spacing: var(--tr-0); text-transform: uppercase;
}
.etapa p { margin: 0; font-size: var(--t-3); color: var(--giz-2); }

/* ═══════════════ 18. PALESTRANTES ═══════════════ */

.gente {
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--fio);
}
/* alterna o lado do retrato sem trocar a largura das colunas: o
   texto sempre fica na coluna larga, o retrato sempre na estreita */
.gente--inv { grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); }
/* A coluna de .6fr é medida de quando ali morava uma foto emoldurada.
   Recorte sem moldura rende menos figura no mesmo espaço, porque parte
   da caixa é transparência, e o retrato ficava pequeno. Onde o
   contêiner já chegou na largura máxima existe folga para o retrato
   passar de 414 para 557px sem espremer o texto: em 1.02fr a linha
   fecha perto de 54 caracteres, dentro da faixa que se lê bem. Abaixo
   disso a proporção antiga se mantém, senão a linha desabaria para 37
   caracteres logo acima do ponto em que a página vira uma coluna. */
@media (min-width: 1200px) {
  .gente { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  .gente--inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
.gente--inv > .gente__foto { order: 2; }
@media (max-width: 780px) {
  .gente, .gente--inv { grid-template-columns: 1fr; }
  .gente--inv > .gente__foto { order: 0; }
}
.gente__foto {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--fio);
}
/* Os dois retratos são recorte, sem fundo. Aqui não existe quadro: a
   moldura, o arredondamento e o fundo saem, e as figuras ficam direto
   sobre a plateia.

   A caixa 7:6 não é moldura, é régua. As duas artes vêm em proporções
   diferentes, a do Paulo deitada e a da Camila em pé, e cada uma na
   largura inteira da coluna deixaria a cabeça dela quase 30% maior que
   a dele. Com a mesma caixa e object-fit: contain, as duas fecham na
   mesma altura, que é o que faz os dois lerem como um par. Sobra
   transparência nas laterais dela, e transparência não desenha nada. */
.gente__foto--recorte {
  aspect-ratio: 7 / 6;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  /* o recorte termina na cintura, num corte reto que denuncia a
     montagem. A base dissolve na plateia, o mesmo que a cena do hero
     faz no celular, e aí a figura parece emergir do escuro. */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,.45) 89%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,.45) 89%, transparent 100%);
}
/* Numa coluna só, os dois retratos ficam longe um do outro, com um
   bloco de texto inteiro no meio, e a comparação de escala que a régua
   protege deixa de acontecer. Aí ela só custa largura: a arte em pé da
   Camila ficaria com 38px de transparência de cada lado numa tela que
   não tem largura para desperdiçar. Cada uma volta à própria proporção
   e ocupa a linha toda. */
@media (max-width: 780px) {
  .gente__foto--recorte { aspect-ratio: auto; }
}

.gente__nome {
  font-size: var(--d-4);
  margin-bottom: 18px;
}
.gente__nome span { color: var(--giz-3); font-weight: 600; }
/* um em de corpo entre parágrafos, igual ao resto da página. Aqui
   estava em 0,78em, o único fora do padrão na varredura. */
.gente__copy p { margin: 0 0 1em; color: var(--giz-2); }
.gente__copy p:last-child { margin-bottom: 0; }

/* ═══════════════ 19. MAPA ═══════════════ */

.sec--mapa { background: var(--casa); border-block: 1px solid var(--fio); overflow: hidden; }
.mapa__luz {
  position: absolute; inset: 0;
  background: radial-gradient(55% 55% at 50% 78%, rgba(245, 180, 28, .12), transparent 68%);
  pointer-events: none;
}
.sec--mapa .wrap { position: relative; }

/* O mapa é quase quadrado, então na largura do contêiner largo ele
   passava de mil pixels de altura e não cabia numa tela de uma vez.
   Quem chega aqui quer entender onde ficam os setores, e para isso
   precisa ver a planta inteira sem rolar. Na metade da largura ele
   cabe com a legenda junto, que é o que dá sentido às cores. */
.mapa {
  margin: 0 auto;
  max-width: 660px;
  border: 1px solid var(--fio);
  border-radius: var(--r);
  background: #05070E;
  overflow: hidden;
}
.mapa img { width: 100%; height: auto; }

/* cinco setores, cinco colunas: com auto-fit sobrava um sozinho na
   segunda linha */
.setores {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .setores { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .setores { grid-template-columns: repeat(2, 1fr); } }

.setores li {
  padding: 14px 0 0;
  border-top: 2px solid var(--c, var(--fio-forte));
  font-size: var(--t-2);
  color: var(--giz-3);
  line-height: var(--lh-3);
}
/* o filete dos camarotes reparte nas cinco cores que o mapa usa para
   os tamanhos, em vez de eleger uma e perder a chave */
.setor--camarote {
  border-top-color: transparent !important;
  background:
    linear-gradient(90deg,
      #F0A82E 0 20%, #2438C8 20% 40%, #D8412A 40% 60%,
      #2FB6DE 60% 80%, #3FA046 80% 100%) top / 100% 2px no-repeat;
}
.setores b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--display);
  font-size: var(--d-1); font-weight: 700;
  letter-spacing: var(--tr-1); text-transform: uppercase;
  color: var(--giz);
}

/* ═══════════════ 20. CELEBRIDADES ═══════════════ */

/* Duas esteiras em sentidos opostos, sangrando de borda a borda.
   O movimento contrário é o que dá a sensação de plateia passando:
   com as duas indo para o mesmo lado a seção vira um banner.

   A animação anda no .gala__trilho, que tem dois grupos idênticos
   lado a lado, então deslocar metade da largura volta exatamente ao
   ponto de partida e o laço não tem emenda. O clone quem faz é o
   app.js, e é ele que liga a classe .is-loop. */
.gala {
  display: grid;
  gap: 16px;
  margin-top: clamp(36px, 4vw, 56px);
  /* as pontas somem no fundo em vez de terminarem em corte reto */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.gala__fila { overflow: hidden; }
.gala__trilho { display: flex; width: max-content; }
.gala__grupo { display: flex; gap: 16px; padding-right: 16px; }

.gala__fila.is-loop .gala__trilho {
  animation: esteira 66s linear infinite;
}
.gala__fila--volta.is-loop .gala__trilho {
  animation-direction: reverse;
  animation-duration: 78s;
}
/* Isto parava as duas esteiras com o mouse em cima, para dar tempo de ler
   o nome. Só que `.gala` é uma faixa de 820px de altura sangrando de
   borda a borda: basta o ponteiro estar parado em qualquer ponto dela, e
   é exatamente onde ele fica enquanto a pessoa rola a página, para as
   duas congelarem e continuarem congeladas até o mouse sair. Era isso
   que parecia travamento.
   Ler o nome não dependia disso: a legenda de cada foto está sempre
   visível, não é revelada no hover. Então a pausa por mouse saiu, e
   ficou só a de teclado, restrita à fila que recebeu o foco. */
.gala__fila:focus-within .gala__trilho { animation-play-state: paused; }
@keyframes esteira { to { transform: translateX(-50%); } }

/* sem script, ou com movimento reduzido, a esteira vira uma faixa
   que a pessoa rola com o dedo */
.gala__fila:not(.is-loop) { overflow-x: auto; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
  .gala__fila.is-loop { overflow-x: auto; }
  .gala__fila.is-loop .gala__trilho { animation: none; }
}

.astro {
  position: relative;
  flex: none;
  width: clamp(148px, 16vw, 208px);
  margin: 0;
  border: 1px solid var(--fio);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--casa-alta);
}
.astro img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.86);
  transition: filter .3s ease, transform .5s ease;
}
.astro:hover img { filter: saturate(1.05); transform: scale(1.03); }
.astro figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 13, .93) 55%);
}
.astro b {
  display: block;
  font-family: var(--display);
  font-size: var(--d-1); font-weight: 700; line-height: var(--lh-1);
  letter-spacing: var(--tr-0); text-transform: uppercase;
}
.astro i {
  font-style: normal;
  font-size: var(--t-1); font-weight: 600;
  letter-spacing: var(--tr-2); text-transform: uppercase;
  color: var(--brasa);
}

/* ═══════════════ 21. GARANTIA ═══════════════ */

.sec--garantia { background: var(--casa); border-block: 1px solid var(--fio); overflow: hidden; }
/* o fundo desta seção é uma faixa larga e baixa, então ela ancora embaixo
   e o véu escurece mais no topo, onde o texto começa */
.fundo--garantia::after {
  background:
    /* a copy fica na metade direita, e é justamente ali que a foto tem o
       rosto em close e o fundo mais claro */
    linear-gradient(90deg, transparent 30%, rgba(10, 15, 31, .72) 62%, rgba(10, 15, 31, .86) 100%),
    linear-gradient(180deg, var(--casa) 4%, rgba(10, 15, 31, .60) 40%, rgba(10, 15, 31, .48) 100%);
}
@media (max-width: 820px) {
  .fundo--garantia::after {
    background: linear-gradient(180deg, var(--casa) 4%, rgba(10, 15, 31, .82) 34%, rgba(10, 15, 31, .88) 100%);
  }
}
.fundo--garantia > img { object-position: center bottom; }
.garantia__in {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 820px) { .garantia__in { grid-template-columns: 1fr; } }
.garantia__fig { margin: 0; }
.garantia__fig img { width: 100%; height: auto; border-radius: var(--r); }
.garantia__copy p { color: var(--giz-2); }
.garantia__copy .h2 { margin-bottom: 20px; }

/* ═══════════════ 22. FAQ ═══════════════ */

.faq__in {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 880px) { .faq__in { grid-template-columns: 1fr; } }
.faq__in .sec-head { margin-bottom: 0; position: sticky; top: 96px; }
@media (max-width: 880px) { .faq__in .sec-head { position: static; } }

.faq { display: grid; gap: 10px; }
.qa {
  border: 1px solid var(--fio);
  border-radius: var(--r);
  background: var(--casa);
  overflow: hidden;
}
.qa[open] { border-color: var(--fio-forte); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  font-size: var(--t-3);
  font-weight: 600;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--brasa);
  border-bottom: 2px solid var(--brasa);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s ease;
}
.qa[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.qa__c { padding: 0 22px 22px; }
.qa__c p { margin: 0; font-size: var(--t-3); color: var(--giz-2); }

/* ═══════════════ 23. CHAMADA FINAL ═══════════════ */

.final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 10vw, 140px);
  background: linear-gradient(180deg, var(--plateia), #060C1C);
  text-align: center;
}
.final__luz {
  position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 50% 110%, rgba(31, 99, 214, .38), transparent 70%);
  pointer-events: none;
}
.final__in { position: relative; }
.final__h {
  font-size: var(--d-5);
  margin-bottom: 22px;
}
.final__sub {
  max-width: 56ch;
  margin: 0 auto;
  font-size: var(--t-4);
  color: var(--giz-2);
}
.marquise--final { margin-inline: auto; margin-block: 38px 34px; }
.marquise--final .marquise__data { justify-content: center; }
.marquise--final .marquise__mes { margin-left: 18px; }

/* ═══════════════ 24. RODAPÉ ═══════════════ */

.rodape {
  padding-block: clamp(44px, 6vw, 70px) 40px;
  background: var(--plateia);
  border-top: 1px solid var(--fio);
}
/* O rodapé sai da caixa de 1160px e ocupa a largura toda, centralizado.
   É o fecho da página, e depois de uma sequência inteira de blocos
   alinhados à esquerda o centro funciona como ponto final. */
.rodape__in {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 22px;
  width: min(100% - var(--gutter) * 2, 1000px);
  margin-inline: auto;
}
.rodape__marcas { display: flex; align-items: center; justify-content: center; gap: 22px; }
/* alturas diferentes de propósito: a marca da Febracis tem folga
   interna e a assinatura embaixo, então precisa de mais altura para
   pesar o mesmo que a do CIS ao lado */
.rodape__cis { width: auto; height: 56px; }
.rodape__febracis { width: auto; height: 66px; }
.rodape__risco { width: 1px; height: 46px; background: var(--fio-forte); }
/* As duas marcas continuam lado a lado no celular. Empilhadas elas
   viravam duas assinaturas soltas, e não uma; juntas somam 269px numa
   caixa de 348, então cabem com folga e o filete entre elas segue
   fazendo o que precisa. */
@media (max-width: 460px) {
  .rodape__marcas { gap: 16px; }
  .rodape__cis { height: 46px; }
  .rodape__febracis { height: 54px; }
  .rodape__risco { height: 38px; }
}

.rodape__legal { margin: 0; max-width: 66ch; font-size: var(--t-2); color: var(--giz-2); }

/* Discretos e por último: o corpo cai para o menor degrau, a cor vai
   para o terceiro nível e o sublinhado some até o cursor chegar. O
   amarelo aqui puxava o olho para o que menos importa na página. */
.rodape__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 6px;
}
.rodape__links .linkish {
  font-size: var(--t-1);
  color: var(--giz-3);
  text-decoration: none;
}
.rodape__links .linkish:hover,
.rodape__links .linkish:focus-visible {
  color: var(--giz-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rodape__ponto { font-size: var(--t-1); color: var(--fio-forte); }
.rodape__nota { margin: 0; max-width: 74ch; font-size: var(--t-1); color: var(--giz-3); }
.rodape__ano { margin: 0; font-size: var(--t-1); color: var(--giz-3); }

/* A barra fixa de rodapé saiu. Ela existia para levar o CTA junto na
   rolagem, e o motivo era o botão do hero ficar longe no celular. Com a
   primeira dobra reorganizada o botão já aparece no carregamento, então
   a barra virou uma faixa a mais tampando conteúdo o tempo todo. */

/* ═══════════════ 26. MODAL ═══════════════ */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(2, 4, 9, .86); backdrop-filter: blur(4px); }
/* O formulário tem seis campos mais a escolha da modalidade, contra
   os três da primeira etapa do BHP, e depois da revisão tipográfica o
   conteúdo passou de mil trezentos pixels numa caixa de oitocentos:
   o botão de enviar caía abaixo da dobra do próprio modal, que é o
   pior lugar possível para ele estar. A caixa alargou, e-mail e
   WhatsApp foram para a mesma linha, as duas modalidades viraram
   pastilhas lado a lado e todo o respiro interno encolheu. */
.modal__box {
  position: relative;
  width: min(100%, 580px);
  max-height: min(92vh, 900px);
  overflow-y: auto;
  padding: 26px clamp(18px, 3.2vw, 30px) 26px;
  background: var(--casa);
  border: 1px solid var(--fio-forte);
  border-radius: 6px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
}
/* no celular a caixa usa quase toda a altura e aperta o respiro
   interno, para o botão de enviar caber sem rolagem */
@media (max-width: 560px) {
  .modal { padding: 10px; }
  .modal__box { max-height: 95vh; padding: 20px 16px 20px; }
}
.modal__box--doc { width: min(100%, 720px); }

.modal__x {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--fio);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
}
.modal__x:hover { background: rgba(237,241,249,.07); }
.modal__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* a data saiu do cabeçalho com logotipo e passou para a linha de
   apoio: a mesma informação, setenta pixels a menos */
.modal__t { font-size: var(--d-2); }
.modal__sub { margin: 6px 0 18px; font-size: var(--t-2); color: var(--giz-2); }
.modal__sub span { color: var(--brasa); margin-inline: 3px; }

.step { border: 0; padding: 0; margin: 0; display: none; }
.step.is-on { display: block; }
.step--ok { text-align: center; }

.field { display: block; margin-bottom: 12px; }
.field__lb {
  display: block;
  margin-bottom: 5px;
  font-size: var(--t-1); font-weight: 600;
  letter-spacing: var(--tr-2); text-transform: uppercase;
  color: var(--giz-2);
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select {
  width: 100%;
  padding: 11px 13px;
  background: var(--plateia);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  color: var(--giz);
  font: inherit;
  font-size: var(--t-3);
}
/* seta desenhada em CSS, sem arquivo externo, senão o select fica
   parecendo campo de texto e ninguém percebe que abre lista */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brasa) 50%),
    linear-gradient(135deg, var(--brasa) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* O que dá para pintar dentro do popup varia por navegador, então isto é
   reforço em cima do color-scheme, não substituto dele. */
.field select { scrollbar-color: var(--fio-forte) var(--plateia); }
.field select option,
.field select optgroup { background: var(--plateia); color: var(--giz); }
.field select optgroup {
  font-style: normal;
  font-size: var(--t-1);
  letter-spacing: var(--tr-2);
  text-transform: uppercase;
  color: var(--giz-3);
}
.field select option:checked { background: var(--brasa); color: #14100A; }
.field input::placeholder { color: rgba(237,241,249,.3); }
.field input:focus, .field select:focus { border-color: var(--brasa); outline: none; }
.field.is-bad input, .field.is-bad select { border-color: #FF6B5E; }

.field__err { display: block; margin-top: 6px; font-size: var(--t-1); font-style: normal; color: #FF8B80; }

/* a coluna do UF ganhou fôlego: em 104px o popup do select virava uma
   tira estreita e alta, e o rótulo dos grupos não cabia */
.dupla { display: grid; grid-template-columns: 1fr 132px; gap: 12px; }
.dupla--meio { grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { .dupla--meio { grid-template-columns: 1fr; } }

/* as duas modalidades lado a lado em vez de empilhadas: eram duzentos
   pixels de altura para uma escolha entre dois itens */
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* as pastilhas continuam lado a lado até bem estreito: "Presencial /
   Goiânia" cabe em metade de uma tela de 360, e empilhar custava
   cinquenta pixels que jogavam o botão de enviar para fora da tela */
@media (max-width: 330px) { .opcoes { grid-template-columns: 1fr; } }
.opcao { display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao__box {
  display: block;
  padding: 11px 12px 11px 38px;
  position: relative;
  background: var(--plateia);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  transition: border-color .18s ease, background-color .18s ease;
}
.opcao__box::before {
  content: '';
  position: absolute;
  left: 13px; top: 15px;
  width: 15px; height: 15px;
  border: 2px solid var(--fio-forte);
  border-radius: 50%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.opcao input:checked + .opcao__box { border-color: var(--brasa); background: rgba(245,180,28,.07); }
.opcao input:checked + .opcao__box::before { border-color: var(--brasa); box-shadow: inset 0 0 0 3px var(--brasa); }
.opcao input:focus-visible + .opcao__box { outline: 2px solid var(--brasa); outline-offset: 2px; }
.opcao__box b { display: block; font-size: var(--t-3); font-weight: 700; }
.opcao__box i { font-style: normal; font-size: var(--t-1); color: var(--giz-3); }
.field--modo.is-bad .opcao__box { border-color: #FF6B5E; }

.check { display: block; position: relative; padding-left: 28px; margin: 14px 0 16px; font-size: var(--t-1); line-height: var(--lh-2); color: var(--giz-2); }
.check input { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; accent-color: var(--brasa); }
.check.is-bad span { color: #FF8B80; }

.modal__err {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,107,94,.4);
  border-radius: var(--r);
  background: rgba(255,107,94,.08);
  font-size: var(--t-2);
  color: #FF8B80;
}

.ok__ico {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(245,180,28,.14);
  border: 1px solid var(--brasa);
}
.ok__ico svg { width: 28px; height: 28px; fill: none; stroke: var(--brasa); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.step--ok .btn { margin-top: 10px; }

.doc { font-size: var(--t-2); color: var(--giz-2); }
.doc h3 {
  margin: 26px 0 10px;
  font-family: var(--display);
  font-size: var(--d-1); font-weight: 700;
  letter-spacing: var(--tr-0); text-transform: uppercase;
  color: var(--giz);
}
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 5px; }
.doc a { color: var(--brasa); }

/* ═══════════════ 27. REVELAÇÃO NO SCROLL ═══════════════ */

.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }