/* ============================================================
   INPRÓS v2-premium — Home (só o que é da home)
   "Cada ponto é um homem": a mesma matéria (partículas WebGL)
   conta a história; a página é uma sequência de capítulos.
   O que é comum ao site está em base.css (carregado antes).

   Camadas
   - Estado BASE (sem JS, sem GSAP, movimento reduzido): página
     estática e completa, cada capítulo com o seu fundo.
   - .cena-ok  : WebGL rodando; o fundo vem do canvas (cor por
     capítulo em scrub), as seções ficam transparentes.
   - .cinema   : GSAP + movimento; palcos fixos (sticky), rolagem
     horizontal da linha do tempo, máscaras e revelações.

   Leitura: texto sempre sobre cor lisa conhecida ou bloco opaco;
   as partículas atrás do texto são apagadas no shader (data-veu).
   ============================================================ */

/* tokens próprios da home */
:root {
  --marca-assistir: 46vh;
}

/* sem WebGL: a marca em imagem, com a cor da luz */
.marca-estatica {
  position: fixed;
  z-index: var(--z-cena);
  height: 76vh;
  width: auto;
  right: 10vw;
  top: 13vh;
  opacity: 0.2;
  filter: invert(62%) sepia(40%) saturate(600%) hue-rotate(175deg);
  pointer-events: none;
}

/* desktop: formações à direita, texto à esquerda */
[data-ancora="ceu"] {
  left: 0;
  width: 100%;
  top: 80vh;
  height: 16vh;
}
[data-ancora="topo"] {
  left: 57vw;
  width: 39vw;
  top: 11vh;
  height: 80vh;
}
[data-ancora="pilares"] {
  left: 50vw;
  width: 46vw;
  top: 16vh;
  height: 70vh;
}
[data-ancora="baixo"] {
  left: 0;
  width: 100%;
  top: 83vh;
  height: 12vh;
}
[data-ancora="papel"] {
  left: 0;
  width: 100%;
  top: 86vh;
  height: 10vh;
}
[data-ancora="linha"] {
  /* rio baixo e fino: os textos e as legendas da trajetória terminam acima dele */
  left: 0;
  width: 100%;
  top: 87vh;
  height: 7vh;
}
[data-ancora="mapa"] {
  left: 54vw;
  width: 40vw;
  top: 15vh;
  height: 74vh;
}
[data-ancora="assistir"] {
  /* mesmo tamanho e lugar do início da máscara do Programa Assistir */
  left: calc(50% - var(--marca-assistir) * 0.3412);
  width: calc(var(--marca-assistir) * 0.6825);
  top: calc(50% - var(--marca-assistir) * 0.5);
  height: var(--marca-assistir);
}
[data-ancora="final"] {
  left: 58vw;
  width: 36vw;
  top: 14vh;
  height: 74vh;
}
[data-ancora="rodape"] {
  left: 0;
  width: 100%;
  top: 78vh;
  height: 20vh;
}
/* fora de quadro: no fim dos pilares as partículas sobem e saem por cima
   (o mesmo sentido do conteúdo), e as fotos entram por baixo numa tela limpa;
   no papel, o rio volta por baixo */
[data-ancora="fora"] {
  left: 0;
  width: 100%;
  top: -34vh;
  height: 12vh;
}
[data-ancora="entra"] {
  left: 0;
  width: 100%;
  top: 116vh;
  height: 12vh;
}

/* ============================================================
   Introdução
   ============================================================ */
.intro,
.intro__pular {
  display: none;
}
.intro-ativa .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) 9vh;
  pointer-events: none;
}
.intro__pe {
  display: grid;
  gap: 10px;
}
/* o slogan da copy se constrói palavra por palavra (peso 100 → 800, home.js) */
.intro__slogan {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 100;
  font-size: clamp(2.6rem, 1rem + 5.4vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  max-width: 11em;
  color: var(--branco);
  text-wrap: balance;
}
.intro__slogan span {
  display: inline-block;
}
/* o progresso é uma linha de horizonte que se completa */
.intro__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha) 15%, var(--linha) 85%, transparent);
}
.intro__barra i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--luz) 12%, var(--luz-forte) 50%, var(--luz) 88%, transparent);
  box-shadow: 0 0 14px rgba(124, 192, 238, 0.7);
  transform-origin: 50% 50%; /* abre do centro para as bordas, como um horizonte */
  transform: scaleX(0);
}
.intro-ativa .intro__pular {
  display: inline-flex;
  position: fixed;
  right: var(--gutter);
  bottom: calc(5vh + 18px);
  z-index: calc(var(--z-intro) + 1);
  min-height: 44px;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(3, 17, 32, 0.6);
  color: var(--branco);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.intro-ativa .intro__pular:hover {
  border-color: var(--branco);
}
/* enquanto a introdução roda, o resto espera */
.intro-ativa .topo,
.intro-ativa .hud,
.intro-ativa .inicio__corpo,
.intro-ativa .rolar {
  opacity: 0;
}

/* tipografia dos capítulos da home */
.pilar__nome,
.marco__ano,
.faixa__item,
.motivo dt,
.numero b,
.fundador__nome {
  font-family: var(--f-display);
  font-optical-sizing: auto;
}

/* ============================================================
   1. Início
   ============================================================ */
.inicio {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--topo-h) + 4vh);
  padding-bottom: clamp(56px, 10vh, 120px);
}
.inicio__corpo {
  display: grid;
  gap: clamp(20px, 3.2vh, 34px);
}
.inicio__pe {
  display: grid;
  grid-template-columns: minmax(0, 40ch) max-content;
  justify-content: start;
  align-items: end;
  gap: 28px clamp(32px, 4vw, 64px);
}
.inicio .acoes {
  flex-direction: column;
  align-items: flex-start;
}
.rolar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--branco-2);
}
.cinema .rolar {
  display: flex;
}
.rolar i {
  width: 1.5px;
  height: 34px;
  background: linear-gradient(var(--luz), transparent);
  animation: rolar 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes rolar {
  0% {
    transform: scaleY(0);
  }
  55% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
.mergulho {
  height: 0;
}
.cinema .mergulho {
  height: 18vh;
}

/* ============================================================
   2. Pilares
   ============================================================ */
.pilares {
  position: relative;
  padding-block: clamp(80px, 14vh, 160px);
}
.pilares__grade {
  display: grid;
}
.pilares__texto {
  max-width: 640px;
  container-type: inline-size;
}
.pilares a,
.registros a {
  color: var(--branco);
}
.pilares__passo--intro .h2 {
  font-size: min(7.6rem, 22cqi);
}
.pilares__passos {
  display: grid;
  gap: 56px;
}
.pilares__passo--intro .h2 {
  margin-bottom: 30px;
}
.pilar__nome {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1rem + 5vw, 6rem);
  font-size: min(9.8rem, 15.4cqi);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  white-space: nowrap;
}
.pilar__texto {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 34ch;
}
.pilares__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 40px;
}
.pilares__indice {
  display: none;
}

/* ============================================================
   Registros (fotos reais). Os originais têm 420 px: nenhuma foto
   passa de 420 px na tela. Mural compacto em quatro colunas
   desencontradas, com as fotos na proporção original; a legenda
   (só o nome do local) é uma etiqueta de arquivo sobre a foto.
   ============================================================ */
.registros {
  padding-block: clamp(48px, 9vh, 110px);
}
.registros__colunas {
  --reg-gap: clamp(10px, 1.15vw, 18px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 420px));
  justify-content: center;
  gap: var(--reg-gap);
  align-items: start;
  width: min(1480px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.registros__coluna {
  display: grid;
  gap: var(--reg-gap);
}
.registros__coluna:nth-child(2) {
  margin-top: 12vh;
}
.registros__coluna:nth-child(4) {
  margin-top: 17vh;
}
.registro {
  position: relative;
}
.registro__ver {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--noite-2);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
}
.registro__ver img {
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--ease);
}
.registro__ver:hover img {
  transform: scale(1.04);
}
.registro__legenda {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: calc(100% - 20px);
  padding: 7px 12px 6px 10px;
  background: var(--noite);
  border-radius: 0 3px 0 3px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.85rem + 0.45vw, 1.35rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--branco);
  pointer-events: none;
}

/* ============================================================
   Faixa do slogan
   ============================================================ */
.faixa {
  overflow: clip;
  padding-block: clamp(36px, 10vh, 110px);
  color: var(--tinta-viva);
}
.faixa__trilho {
  display: flex;
  align-items: center;
  gap: 0.35em;
  width: max-content;
  font-size: clamp(3rem, 1rem + 7vw, 8.5rem);
  will-change: transform;
}
.faixa__item {
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.faixa__marca {
  width: 0.5em;
  height: 0.72em;
  flex: none;
  color: var(--luz);
}
/* sem movimento a faixa vira uma frase só, que quebra linha */
html:not(.cinema) .faixa__trilho {
  width: auto;
  justify-content: center;
  padding-inline: var(--gutter);
  font-size: clamp(2.2rem, 1rem + 5vw, 6rem);
}
html:not(.cinema) .faixa__item {
  white-space: normal;
  text-align: center;
}
html:not(.cinema) .faixa__item ~ .faixa__item,
html:not(.cinema) .faixa__marca {
  display: none;
}

/* ============================================================
   3. Por que apoiar (capítulo claro)
   ============================================================ */
.apoio {
  --foco: #0b3d7a;
  overflow-x: clip;
  color: var(--tinta);
  padding-block: clamp(56px, 13vh, 150px) clamp(64px, 14vh, 160px);
}
.apoio .h2 {
  max-width: 5.8em;
  margin-bottom: clamp(48px, 10vh, 120px);
}
.motivos {
  display: grid;
}
.motivo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 20px clamp(24px, 4vw, 72px);
  padding-block: clamp(28px, 6vh, 64px);
  border-top: 1px solid rgba(8, 34, 58, 0.2);
}
.motivo dt {
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem);
  line-height: 0.92;
  color: var(--tinta);
}
.motivo dd {
  font-size: clamp(1.3rem, 0.95rem + 1.25vw, 2.15rem);
  line-height: 1.38;
  font-weight: 400;
  color: var(--tinta);
  max-width: 34ch;
  text-wrap: pretty;
}
.motivo--selo dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: start;
  max-width: none;
}
.motivo--selo dd > span {
  max-width: 30ch;
}
.selo {
  transform-origin: 100% 50%; /* o carimbo cresce para dentro da página */
  width: clamp(120px, 12vw, 176px);
  height: auto;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(8, 34, 58, 0.18);
}

/* ============================================================
   4. Linha do tempo
   ============================================================ */
.linha {
  position: relative;
  padding-block: clamp(80px, 14vh, 160px);
}
.linha__trilho {
  width: min(var(--moldura), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.linha__abertura .h2 {
  max-width: 6.4em;
}
.linha__sub {
  margin-top: 22px;
  margin-bottom: 48px;
  max-width: 30ch;
  font-size: var(--t-lead);
  line-height: 1.45;
}
.marco__texto p + p {
  margin-top: 0.8em;
}
.linha__marcos {
  display: grid;
  gap: 0;
}
.marco {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px 40px;
  padding-block: 26px;
  border-top: 1px solid var(--linha);
}
.marco__ano {
  position: relative;
  font-weight: 800;
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--luz);
}
.marco__cheio {
  display: none;
}
.marco__texto {
  color: var(--branco-2);
  max-width: 58ch;
}
.marco--chave .marco__texto {
  color: var(--branco);
}
.arquivo figure {
  padding-block: 26px;
  border-top: 1px solid var(--linha);
}
.arquivo__ver {
  display: block;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
  max-width: 560px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.arquivo figcaption {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--branco-2);
}
.linha__horizonte,
.linha__dica {
  display: none;
}

/* ============================================================
   5. Onde atuamos
   ============================================================ */
.onde {
  padding-block: clamp(80px, 18vh, 200px);
}
.onde__texto {
  max-width: 600px;
}
.onde .h2 {
  margin-bottom: 32px;
}
.onde .link-seta {
  margin-top: 30px;
}
.onde__faq {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}
.onde__pergunta {
  font-family: var(--f-display);
  font-weight: 750;
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem);
  line-height: 1;
  margin-bottom: 14px;
}
.onde__sede {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}
.onde__sede a {
  font-weight: 700;
}

/* ============================================================
   6. Programa Assistir. Não há foto real do programa: o capítulo é
   tipográfico e numérico, sobre o azul do Novembro Azul.
   ============================================================ */
.assistir {
  position: relative;
  background: var(--novembro);
  padding-block: clamp(80px, 16vh, 180px);
}
.assistir__fundo {
  display: none;
}
.assistir__conteudo {
  position: relative;
}
.assistir__bloco {
  max-width: 1200px;
}
.assistir .h2 {
  max-width: 15ch;
  margin-bottom: clamp(36px, 7vh, 72px);
  color: var(--branco);
}
.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 4vw, 64px);
  padding-top: 26px;
  margin-bottom: clamp(40px, 8vh, 80px);
  border-top: 1px solid rgba(243, 247, 250, 0.35);
}
.numero {
  display: grid;
  grid-template-rows: 1.7rem auto auto;
  align-content: start;
  gap: 8px;
}
.numero__pre {
  grid-row: 1;
  align-self: end;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--branco-azul);
}
.numero b {
  grid-row: 2;
  font-weight: 800;
  font-size: clamp(4.2rem, 1.8rem + 6.4vw, 9.6rem);
  line-height: 0.84;
  letter-spacing: -0.01em;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.numero__rotulo {
  grid-row: 3;
  max-width: 24ch;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--branco);
}
.assistir__texto {
  max-width: none;
  columns: 2 26rem;
  column-gap: clamp(32px, 4vw, 64px);
}
.assistir__texto p {
  color: var(--branco);
  break-inside: avoid;
}
.assistir .acoes {
  margin-top: clamp(32px, 6vh, 56px);
}
.assistir .link-seta {
  color: var(--branco);
}

/* ============================================================
   7. Fundador
   ============================================================ */
.fundador {
  padding-block: clamp(80px, 16vh, 180px);
}
.fundador__grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.fundador__retrato {
  position: relative;
  width: 100%;
  max-width: 380px; /* a foto tem 895 px e é pequena de propósito */
  justify-self: end;
  border-radius: 4px;
  overflow: hidden;
  background: var(--noite-2);
}
.fundador__retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 76% 30%;
  filter: grayscale(1) contrast(1.05);
}
.fundador__retrato canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fundador__titulo {
  display: grid;
  gap: 10px;
  margin-bottom: 34px;
}
.fundador__nome {
  font-weight: 800;
}
.fundador__cargo {
  font-family: var(--f-texto);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.3;
  color: var(--luz);
  letter-spacing: 0;
}
.fundador__grande {
  font-size: clamp(1.3rem, 0.95rem + 1.15vw, 2.05rem);
  line-height: 1.4;
  max-width: 36ch;
  text-wrap: pretty;
}
.fundador__bio {
  margin-top: 26px;
  color: var(--branco-2);
  max-width: 58ch;
}
.fundador .link-seta {
  margin-top: 28px;
}

/* ============================================================
   Fundos estáticos (sem WebGL ou antes de a cena ficar pronta)
   ============================================================ */
/* também com movimento reduzido: cada capítulo com fundo próprio e liso,
   o texto nunca depende da cor que a cena está mostrando */
html:not(.cena-ok) .pilares,
html:not(.cena-ok) .registros,
html:not(.cena-ok) .faixa,
html.quieto .pilares,
html.quieto .registros,
html.quieto .faixa {
  background: var(--novembro);
}
html:not(.cena-ok) .faixa,
html.quieto .faixa,
html:not(.cena-ok) .linha .tinta-viva,
html.quieto .linha .tinta-viva {
  --tinta-viva: var(--branco);
}
html:not(.cena-ok) .apoio,
html.quieto .apoio {
  background: var(--papel);
}
html:not(.cena-ok) .apoio .tinta-viva,
html.quieto .apoio .tinta-viva {
  --tinta-viva: var(--tinta);
}
/* no capítulo claro, sem cena, os textos claros viram tinta */
.pilares .pilar__texto,
.pilares .texto {
  color: var(--branco);
}

/* ============================================================
   MODO CINEMA (GSAP + movimento): palcos fixos e coreografia
   ============================================================ */
.cinema .inicio {
  padding-bottom: clamp(64px, 12vh, 140px);
}

/* pilares: palco fixo com passos sobrepostos */
@media (min-width: 900px) {
  .cinema .pilares {
    height: 440vh;
    padding: 0;
  }
  .cinema .pilares__palco {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
  }
  .cinema .pilares__grade {
    width: min(var(--moldura), 100% - 2 * var(--gutter));
  }
  .cinema .pilares__texto {
    width: min(44vw, 640px);
    padding-top: var(--topo-h);
  }
  .cinema .pilares__passos {
    display: grid;
    gap: 0;
  }
  .cinema .pilares__passo {
    grid-area: 1 / 1;
    align-self: center;
  }
  .cinema .pilares__passo:not([data-passo="0"]) {
    opacity: 0;
    visibility: hidden;
  }
  .cinema .pilares__indice {
    position: absolute;
    left: 50vw;
    right: 4vw;
    bottom: 12vh;
    display: flex;
    justify-content: space-around;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--branco-azul);
  }
  .cinema .pilares__indice li {
    position: relative;
    padding-top: 16px;
    font-weight: 500;
    transition: color 0.4s;
  }
  .cinema .pilares__indice li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0.25);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
  }
  .cinema .pilares__indice li.ativo {
    color: var(--branco);
    font-weight: 700;
  }
  .cinema .pilares__indice li.ativo::before {
    transform: scaleX(1);
  }
}

/* registros: revelação por máscara feita pelo GSAP (estado base visível);
   no desktop o mural fica fixo por um instante, inteiro na tela */
.cinema .registro__ver {
  will-change: clip-path;
}
@media (min-width: 900px) {
  .cinema .registros {
    /* sobe sobre o pé do palco dos pilares (vazio depois que o índice some):
       as fotos chegam por baixo enquanto as partículas saem por cima */
    position: relative;
    margin-top: -14vh;
    height: 175vh;
    padding: 0;
  }
  .cinema .registros__palco {
    /* o mural encosta no alto do palco: entra logo atrás do palco dos pilares */
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: flex-start;
    padding-top: calc(var(--topo-h) + 6vh);
  }
  .cinema .registros__colunas {
    /* a coluna mais alta (16:9 + 16:9 + 4:3 ≈ 1,88 × a largura) sempre cabe na altura da tela */
    grid-template-columns: repeat(4, min(calc((100% - 3 * var(--reg-gap)) / 4), calc((100svh - var(--topo-h) - 12vh) / 1.9), 420px));
  }
}

/* faixa: o respiro entre o mural e o papel (o fundo troca de cor aqui) */
.cinema .faixa {
  padding-block: clamp(40px, 9vh, 100px);
}
@media (min-width: 900px) {
  /* sobe sobre a parte de baixo do palco do mural, que fica vazia: o slogan
     chega logo depois da última foto */
  .cinema .faixa {
    position: relative;
    margin-top: -13vh;
  }
}

/* linha do tempo horizontal */
.cinema .linha {
  height: calc(100vh + var(--linha-distancia, 500vw));
  padding: 0;
}
.cinema .linha__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cinema .linha__janela {
  position: relative;
  height: 100%;
}
.cinema .linha__trilho {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: max-content;
  margin: 0;
  display: flex;
  align-items: stretch;
  padding-left: var(--gutter);
  padding-right: 22vw;
  will-change: transform;
}
.cinema .linha__abertura {
  flex: none;
  width: min(62vw, 980px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--topo-h);
}
.cinema .linha__sub {
  margin-bottom: 0;
}
.cinema .marco--largo {
  width: clamp(380px, 40vw, 660px);
}
.cinema .marco--largo .marco__texto {
  width: min(36vw, 560px);
}
.cinema .linha__abertura .h2 {
  margin: 0;
  max-width: 6.4em;
}
.cinema .linha__marcos {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.cinema .marco {
  position: relative;
  flex: none;
  width: clamp(320px, 36vw, 600px);
  display: block;
  padding: calc(var(--topo-h) + 4vh) 4vw 0 0;
  border: 0;
}
.cinema .marco__ano {
  font-size: clamp(7rem, 2rem + 15vw, 19rem);
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: transparent;
  height: 0.84em;
}
.cinema .marco__contorno {
  -webkit-text-stroke: 1.5px var(--tinta-viva);
  color: transparent;
}
.cinema .marco__cheio {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--luz);
  clip-path: inset(0 100% 0 0);
}
.cinema .marco--chave .marco__cheio {
  color: var(--branco);
}
.cinema .marco__texto {
  position: absolute;
  top: calc(var(--topo-h) + 4vh + clamp(7rem, 2rem + 15vw, 19rem) * 0.84 + 10vh);
  width: min(30vw, 440px);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.cinema .marco::before {
  /* ponto sobre o horizonte */
  content: "";
  position: absolute;
  left: 0.3rem;
  top: calc(var(--topo-h) + 4vh + clamp(7rem, 2rem + 15vw, 19rem) * 0.84 + 5vh - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--noite);
  border: 1.5px solid var(--luz);
}
.cinema .marco--chave::before {
  background: var(--luz);
  box-shadow: 0 0 18px var(--luz);
}
.cinema .arquivo {
  flex: none;
  display: flex;
  align-items: center;
  padding: var(--topo-h) 4vw 0 1vw;
}
.cinema .arquivo figure {
  border: 0;
  padding: 0;
  width: clamp(260px, 26vw, 440px);
}
/* os cartazes sobem e descem em torno do horizonte, mas a legenda
   sempre termina acima do rio de partículas (que corre a 87–94% da altura) */
.cinema .arquivo--a figure {
  margin-top: -16vh;
}
.cinema .arquivo--b figure {
  margin-top: 6vh;
  width: clamp(240px, 22vw, 380px);
}
.cinema .arquivo--c figure {
  margin-top: -14vh;
}
.cinema .arquivo--d figure {
  margin-top: 8vh;
  width: clamp(220px, 20vw, 340px);
}
/* legenda em área limpa: uma placa da cor do capítulo, invisível sobre o fundo,
   que só aparece se alguma partícula passar por trás */
.cinema .arquivo figcaption {
  position: relative;
  padding: 8px 12px 9px;
  margin-inline: -12px;
  background: var(--cor-fundo);
  border-radius: 6px;
}
.cinema .arquivo__ver {
  transform-origin: 50% 60%;
  will-change: transform;
}
.cinema .linha__horizonte {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--topo-h) + 4vh + clamp(7rem, 2rem + 15vw, 19rem) * 0.84 + 5vh);
  width: 100%;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}
.cinema .linha__horizonte path {
  stroke: var(--luz);
  stroke-width: 1.5;
  fill: none;
}
.cinema .linha__dica {
  display: block;
  position: absolute;
  left: var(--gutter);
  bottom: 22px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--branco-2);
}
.cinema .linha__janela {
  cursor: grab;
}
.cinema .linha__janela.arrastando {
  cursor: grabbing;
}

/* onde atuamos: o mapa se forma à direita enquanto o texto entra à esquerda */
.cinema .onde {
  padding-block: clamp(80px, 15vh, 170px) clamp(80px, 20vh, 220px);
}

/* programa assistir: a marca se abre e o azul toma a tela */
.cinema .assistir {
  padding: 0;
  background: transparent;
}
.cinema .assistir__fundo {
  display: block;
  position: absolute;
  inset: 0;
}
.cinema .assistir__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cinema .assistir__campo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 50% 58%, #1b6fd2 0%, var(--novembro) 48%, #0a4b9c 100%);
  /* o Y com o ♂ vazado, como na marca; as duas máscaras crescem juntas */
  -webkit-mask-image: url("../img/marca/inpros-marca-mascara.svg"), url("../img/marca/inpros-masculino-limpo.svg");
  mask-image: url("../img/marca/inpros-marca-mascara.svg"), url("../img/marca/inpros-masculino-limpo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--mascara-l, 23vh) var(--mascara-a, 34vh);
  mask-size: var(--mascara-l, 23vh) var(--mascara-a, 34vh);
  -webkit-mask-position: var(--mascara-x, 50%) var(--mascara-y, 50%);
  mask-position: var(--mascara-x, 50%) var(--mascara-y, 50%);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.cinema .assistir__campo.sem-mascara {
  -webkit-mask-image: none;
  mask-image: none;
}
.assistir__simbolo {
  display: none;
}
.cinema .assistir__conteudo {
  /* o título sobe enquanto a câmera entra no anel do ♂; o azul acaba logo depois do conteúdo */
  padding-top: 112vh;
  padding-bottom: 12vh;
}

/* fundador: começa logo abaixo do fim do azul (sem faixa vazia entre os dois) */
.cinema .fundador {
  padding-block: clamp(56px, 9vh, 110px) clamp(56px, 10vh, 120px);
}
.cinema .fundador__retrato img {
  transition: opacity 0.6s;
}
.retrato-gl .fundador__retrato img {
  opacity: 0;
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1100px) {
  .inicio__pe {
    grid-template-columns: 1fr;
  }
  .inicio .acoes {
    flex-direction: row;
  }
}

@media (max-width: 899px) {
  :root {
    --marca-assistir: 40vh;
  }
  /* âncoras no celular: formações no alto, texto embaixo */
  [data-ancora="topo"] {
    left: 14vw;
    width: 72vw;
    top: calc(var(--topo-h) + 2vh);
    height: 36vh;
  }
  [data-ancora="pilares"] {
    left: 4vw;
    width: 92vw;
    top: calc(var(--topo-h) + 2vh);
    height: 34vh;
  }
  [data-ancora="mapa"] {
    left: 8vw;
    width: 84vw;
    top: calc(var(--topo-h) + 2vh);
    height: 36vh;
  }
  [data-ancora="final"] {
    left: 20vw;
    width: 60vw;
    top: calc(var(--topo-h) + 2vh);
    height: 34vh;
  }
  [data-ancora="linha"] {
    top: 80vh;
    height: 10vh;
  }
  .marca-estatica {
    height: 32vh;
    right: 50%;
    transform: translateX(50%);
    top: calc(var(--topo-h) + 3vh);
  }

  .inicio {
    padding-top: calc(var(--topo-h) + 40vh);
    align-items: flex-start;
  }
  .rolar {
    display: none !important;
  }
  .h1 {
    max-width: 12ch;
  }
  .inicio .acoes {
    flex-direction: column;
    align-items: stretch;
  }

  /* pilares no celular: cada passo é uma tela, as partículas ficam no alto */
  .cinema .pilares {
    padding: 0;
  }
  .cinema .pilares__passos {
    gap: 0;
  }
  .cinema .pilares__passo {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--topo-h) + 40vh);
    padding-bottom: 10vh;
  }
  .cinema .pilares__links {
    margin-top: 0;
    padding-bottom: 12vh;
  }

  /* celular: as dez fotos em duas colunas corridas (mosaico), sem palco fixo */
  .registros__colunas {
    display: block;
    columns: 2;
    column-gap: var(--reg-gap);
  }
  .registros__coluna {
    display: contents;
  }
  .registro {
    break-inside: avoid;
    margin-bottom: var(--reg-gap);
  }
  .registro__legenda {
    max-width: calc(100% - 10px);
    padding: 4px 8px 3px 7px;
    font-size: 0.9rem;
  }

  .motivo {
    grid-template-columns: 1fr;
  }
  .motivo--selo dd {
    grid-template-columns: 1fr;
  }

  .marco {
    grid-template-columns: 1fr;
  }
  .cinema .linha__abertura {
    width: 86vw;
  }
  .cinema .marco {
    width: 84vw;
    padding-right: 8vw;
  }
  .cinema .marco__ano {
    font-size: clamp(6.5rem, 30vw, 10rem);
  }
  .cinema .marco__texto,
  .cinema .marco::before,
  .cinema .linha__horizonte {
    --ano-a: clamp(6.5rem, 30vw, 10rem);
  }
  .cinema .marco__texto {
    top: calc(var(--topo-h) + 4vh + var(--ano-a) * 0.84 + 8vh);
    width: 74vw;
    font-size: 1rem;
  }
  .cinema .marco::before {
    top: calc(var(--topo-h) + 4vh + var(--ano-a) * 0.84 + 4vh - 5px);
  }
  .cinema .linha__horizonte {
    top: calc(var(--topo-h) + 4vh + var(--ano-a) * 0.84 + 4vh);
  }
  .cinema .arquivo figure,
  .cinema .arquivo--b figure,
  .cinema .arquivo--d figure {
    width: 72vw;
    margin-top: 0;
  }
  .cinema .arquivo {
    padding-right: 10vw;
  }

  .cinema .onde {
    padding-top: calc(var(--topo-h) + 44vh);
  }

  .fundador__grade {
    grid-template-columns: 1fr;
  }
  .fundador__retrato {
    max-width: 300px;
    justify-self: start;
  }
  .numeros {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .numero {
    grid-template-rows: auto auto auto;
  }
  .cinema .assistir__conteudo {
    padding-top: 104vh;
  }
  .cinema .apoiar {
    padding-top: calc(var(--topo-h) + 40vh);
  }

  .linha__dica {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .inicio .acoes .btn,
  .assistir .acoes .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rolar {
    display: none !important;
  }
}

/* ============================================================
   Abertura (entre os registros e a faixa): uma foto real se abre
   de dentro da marca e vira retícula de pontos ("cada ponto é um
   homem"). O original tem 420 px: sem movimento, sem JS ou sem
   GSAP ela aparece pequena (≤ 480 px), em duotom.
   ============================================================ */
.abertura {
  padding-block: clamp(40px, 8vh, 96px);
}
html:not(.cena-ok) .abertura,
html.quieto .abertura {
  background: var(--novembro);
}
.abertura__figura {
  width: min(1100px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  position: relative;
}
.abertura__campo {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--noite);
}
.abertura__foto {
  width: 100%;
  height: auto;
}
.abertura__pontos {
  display: none;
}
.abertura__legenda {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 12px 6px 10px;
  background: var(--noite);
  border-radius: 0 3px 0 3px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.85rem + 0.45vw, 1.35rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--branco);
}

/* com movimento: palco fixo; a máscara da marca cresce até abrir a foto em pontos */
.cinema .abertura {
  padding: 0;
}
.cinema .abertura__trilho {
  height: 380vh; /* ~1,3 tela abrindo + ~1,5 tela de respiro com a foto aberta */
}
.cinema .abertura__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cinema .abertura__figura {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
}
.cinema .abertura__campo {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--noite);
  -webkit-mask-image: url("../img/marca/inpros-marca-mascara.svg");
  mask-image: url("../img/marca/inpros-marca-mascara.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--ab-l, 25vh) var(--ab-a, 36vh);
  mask-size: var(--ab-l, 25vh) var(--ab-a, 36vh);
  -webkit-mask-position: var(--ab-x, 50%) var(--ab-y, 50%);
  mask-position: var(--ab-x, 50%) var(--ab-y, 50%);
}
.cinema .abertura__campo.sem-mascara {
  -webkit-mask-image: none;
  mask-image: none;
}
.cinema .abertura__foto {
  /* a FOTO de verdade, visível desde o primeiro instante dentro do Y; os pontos
     passam por cima só durante a abertura e se dissolvem (home.js) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  mix-blend-mode: normal;
  /* fotografia de verdade: cor natural, só um toque de contraste */
  filter: contrast(1.04);
  object-position: 42% 40%; /* o rosto fica no quadro em telas largas e no celular */
  transform-origin: 50% 45%;
  will-change: transform;
}
/* grão sutil: disfarça os 420 px do original ampliado */
.cinema .abertura__campo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07; /* grão quase imperceptível: a foto tem boa resolução */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23g)%27/%3E%3C/svg%3E");
}
/* uma sombra leve no pé, só para a legenda */
.cinema .abertura__campo::before {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3, 17, 32, 0.45));
  opacity: var(--ab-legenda, 0);
}
.cinema .abertura__pontos {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 45%;
  will-change: transform;
}
.cinema .abertura__legenda {
  z-index: 2;
  left: var(--gutter);
  box-shadow: 0 0 0 1px rgba(243, 247, 250, 0.25);
  bottom: clamp(56px, 10vh, 110px);
  opacity: var(--ab-legenda, 0);
}
@media (min-width: 900px) {
  /* a faixa do slogan sobe 13vh sobre o fim desta seção: esse trecho fica vazio */
  .cinema .abertura {
    padding-bottom: 15vh;
  }
}
@media (max-width: 899px) {
  .cinema .abertura__trilho {
    height: 300vh;
  }
}

/* ============================================================
   Notebooks de altura baixa (1366×768, 1280×720): o topo cabe
   inteiro na tela (título, texto e botões), sem corte
   ============================================================ */
@media (min-width: 900px) and (max-height: 820px) {
  .inicio {
    padding-top: calc(var(--topo-h) + 2vh);
  }
  .cinema .inicio {
    padding-bottom: clamp(40px, 7vh, 64px);
  }
  .inicio__corpo {
    gap: clamp(14px, 2.2vh, 22px);
  }
  .h1 {
    font-size: min(var(--t-h1), 9.6vh);
  }
  .inicio .lead {
    font-size: clamp(1.05rem, 0.9rem + 0.5vh, 1.25rem);
    line-height: 1.5;
  }
  .inicio .acoes .btn {
    min-height: 50px;
    padding-block: 12px;
  }
}

/* notebooks de altura baixa: os anos gigantes da trajetória cabem com o texto acima do rio */
@media (min-width: 900px) and (max-height: 820px) {
  .cinema .linha__trilho {
    --ano-d: min(clamp(7rem, 2rem + 15vw, 19rem), 25vh);
  }
  .cinema .marco__ano {
    font-size: var(--ano-d);
  }
  .cinema .marco__texto {
    top: calc(var(--topo-h) + 3vh + var(--ano-d) * 0.84 + 8vh);
    font-size: 1rem;
  }
  .cinema .marco::before {
    top: calc(var(--topo-h) + 3vh + var(--ano-d) * 0.84 + 4vh - 5px);
  }
  .cinema .linha__horizonte {
    --ano-d: min(clamp(7rem, 2rem + 15vw, 19rem), 25vh);
    top: calc(var(--topo-h) + 3vh + var(--ano-d) * 0.84 + 4vh);
  }
  .cinema .marco {
    padding-top: calc(var(--topo-h) + 3vh);
  }
  .numero b {
    font-size: min(clamp(4.2rem, 1.8rem + 6.4vw, 9.6rem), 15vh);
  }
}

/* celular/tablet de pé: o marco de 2007 (texto longo) herdava a largura do desktop
   (.marco--largo, 36vw = 130 px a 360) e o texto descia por cima do rio e saía pela
   borda de baixo. No trilho horizontal ele ganha duas colunas da largura dos outros marcos. */
@media (max-width: 899px) {
  .cinema .marco--largo {
    width: 168vw;
  }
  .cinema .marco--largo .marco__texto {
    width: 158vw;
    max-width: none;
    columns: 2;
    column-gap: 10vw;
  }
}

/* celular deitado (paisagem, até 520 px de altura): o topo volta ao arranjo do desktop
   (texto à esquerda, marca à direita); de pé, a marca ocupava o alto e o título ficava
   abaixo da dobra. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  [data-ancora="topo"],
  [data-ancora="pilares"],
  [data-ancora="mapa"] {
    left: 60vw;
    width: 34vw;
    top: calc(var(--topo-h) + 2vh);
    height: calc(94vh - var(--topo-h));
  }
  /* o contorno do RS é mais largo que alto: um pouco mais à esquerda e mais baixo */
  [data-ancora="mapa"] {
    left: 52vw;
    width: 36vw;
    top: calc(var(--topo-h) + 8vh);
    height: calc(80vh - var(--topo-h));
  }
  /* pilares e "onde atuamos": texto na coluna da esquerda (antes passava sob os globos
     e sob os rótulos do mapa) */
  .cinema .pilares__texto {
    max-width: 54vw; /* os nomes gigantes seguem a largura (cqi) */
  }
  .cinema .pilares__passo {
    padding-top: calc(var(--topo-h) + 4vh);
  }
  .cinema .onde {
    padding-top: clamp(80px, 15vh, 170px);
    padding-right: 40vw;
  }
  .marca-estatica {
    height: 66vh;
    right: 10vw;
    transform: none;
    top: calc(var(--topo-h) + 4vh);
  }
  .inicio {
    padding-top: calc(var(--topo-h) + 4vh);
    padding-bottom: 36px;
    align-items: flex-end;
  }
  .inicio__corpo {
    padding-right: 38vw; /* a coluna da marca */
  }
  .h1 {
    font-size: min(var(--t-h1), 11.5vh);
    max-width: none;
  }
  /* trajetória: anos limitados pela altura e textos mais largos, acima do rio */
  .cinema .marco {
    width: 52vw;
    padding-top: calc(var(--topo-h) + 2vh);
  }
  .cinema .marco__ano {
    font-size: min(clamp(6.5rem, 30vw, 10rem), 22vh);
  }
  .cinema .marco__texto,
  .cinema .marco::before,
  .cinema .linha__horizonte {
    --ano-a: min(clamp(6.5rem, 30vw, 10rem), 22vh);
  }
  .cinema .marco__texto {
    top: calc(var(--topo-h) + 2vh + var(--ano-a) * 0.84 + 6vh);
    width: 46vw;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .cinema .marco::before {
    top: calc(var(--topo-h) + 2vh + var(--ano-a) * 0.84 + 3vh - 5px);
  }
  .cinema .linha__horizonte {
    top: calc(var(--topo-h) + 2vh + var(--ano-a) * 0.84 + 3vh);
  }
  .cinema .marco--largo {
    width: 150vw;
  }
  .cinema .marco--largo .marco__texto {
    width: 144vw;
    max-width: none;
    columns: 3;
    column-gap: 5vw;
  }
}