/* ============================================================
   THE OCEAN TOWER × THE OCEAN RACE × ITAJAÍ
   Proposta de Parceria & Legado — sistema visual

   Modo A · blueprint editorial, na identidade Host City.
   Tokens herdados de comercial/naming-torre (verificar-gosto 10/10).

   O palco é 16:9 fixo. TODA medida é em cqw (1cqw = 1% da largura
   do palco), então o deck escala com fidelidade absoluta de um
   notebook a um projetor 1920×1080 sem uma linha de JS de layout.
   A 1920px de largura, 1cqw = 19.2px.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  color-scheme: light;

  /* tema claro */
  --fundo:    #F7F6F3;
  --fundo-2:  #FFFFFF;
  --tinta:    #0B1B33;
  --tinta-2:  #4E5A70;
  --tinta-3:  #6B7488;
  --linha:    #DCD9D2;
  --realce:   #0A58CA;
  --amarelo:  #FFC600;

  /* superfícies escuras fixas — foto e navy pintam o próprio fundo
     e NÃO respondem ao tema. Sem isto, a regra genérica de p pinta
     texto cinza-claro sobre navy e a frase some. */
  --navy:        #0B1B33;
  --navy-2:      #122744;
  --sobre:       #F4F6FA;
  --sobre-2:     rgba(244, 246, 250, .78);
  --sobre-3:     rgba(244, 246, 250, .52);
  --sobre-linha: rgba(244, 246, 250, .16);
  --amarelo-fixo:#FFC600;

  --f: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif;
  --m: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica — 8 degraus, a régua da casa deslocada UM
     DEGRAU ACIMA para contexto de projeção.
     13·15·20·26·32·44·72·120 na base 1920, em cqw.

     Por quê: a escala 12·13·16·20·24·32·56·96 é calibrada para
     DOCUMENTO — página lida a 50cm. Aplicada a um palco de 1920,
     o título a 58px ocupava um terço da tela e deixava a metade
     inferior vazia: o deck lia como relatório projetado, não como
     apresentação. Medido no render de 15/09/2026. */
  --t1: 0.677cqw;   /*  13px — mono, eyebrow, rótulo */
  --t2: 0.781cqw;   /*  15px — mono, meta, nota */
  --t3: 1.042cqw;   /*  20px — corpo */
  --t4: 1.354cqw;   /*  26px — lede */
  --t5: 1.667cqw;   /*  32px — H3 */
  --t6: 2.292cqw;   /*  44px — H2 pequeno, numeral */
  --t7: 3.750cqw;   /*  72px — H2 */
  --t8: 6.250cqw;   /* 120px — H1, número-prova */

  /* módulo de espaçamento base 8 */
  --e1: 0.417cqw;   /*  8px */
  --e2: 0.833cqw;   /* 16px */
  --e3: 1.250cqw;   /* 24px */
  --e4: 2.083cqw;   /* 40px */
  --e5: 3.333cqw;   /* 64px */
  --e6: 5.000cqw;   /* 96px */

  --marg: 5.833cqw; /* 112px — margem viva do slide */
  --rail: 64px;     /* régua lateral, em px: é cromo, não conteúdo */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #0A0E16; --fundo-2: #111725;
    --tinta: #EDEFF3; --tinta-2: #A6AEBE; --tinta-3: #8792A6;
    --linha: #222937; --realce: #FFD23F; --amarelo: #FFD23F;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #0A0E16; --fundo-2: #111725;
  --tinta: #EDEFF3; --tinta-2: #A6AEBE; --tinta-3: #8792A6;
  --linha: #222937; --realce: #FFD23F; --amarelo: #FFD23F;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fundo: #F7F6F3; --fundo-2: #FFFFFF;
  --tinta: #0B1B33; --tinta-2: #4E5A70; --tinta-3: #6B7488;
  --linha: #DCD9D2; --realce: #0A58CA; --amarelo: #FFC600;
}

/* ---------- 1b. IDIOMA ----------
   Cada texto é emitido duas vezes pelo montar.py, com lang="pt" e
   lang="en"; aqui só se esconde o que não está ativo. Sem JS para trocar
   texto: a escolha é aplicada antes da pintura e a troca é instantânea.
   O padrão é PT — a peça vai primeiro à mesa da WERK. */
:root:not([data-lang="en"]) [lang="en"] { display: none !important; }
:root[data-lang="en"] [lang="pt"] { display: none !important; }

/* ---------- 2. PALCO ---------- */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* O palco encaixa o maior 16:9 possível na JANELA INTEIRA e centra.
   A régua flutua por cima, dentro da margem viva do slide (112px a
   1920) — se ela empurrasse o palco, toda a escala tipográfica
   rodaria 3,4% menor e a eyebrow cairia abaixo do piso de 12px. */
.palco {
  position: relative;
  width:  min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  container-type: size;
  container-name: palco;
  overflow: hidden;
  background: var(--fundo);
}

.s {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: var(--marg);
  background: var(--fundo);
  color: var(--tinta);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .38s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear .38s;
}
.s.ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity .42s cubic-bezier(.22, .61, .36, 1),
              visibility 0s;
  z-index: 2;
}

/* variantes de superfície */
.s.alt    { background: var(--fundo-2); }
.s.escuro { background: var(--navy); color: var(--sobre); }
.s.foto   {
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--sobre);
}
/* véu: a foto precisa ficar legível sob texto sem virar cinza */
.s.foto::before {
  content: "";
  position: absolute;
  inset: 0;
  /* o véu tem de segurar até ~62% da largura, que é onde a coluna de
     texto termina — a 34% ele já entregava o texto à multidão da foto */
  background: linear-gradient(100deg,
    rgba(11, 27, 51, .95) 0%,
    rgba(11, 27, 51, .90) 42%,
    rgba(11, 27, 51, .62) 66%,
    rgba(11, 27, 51, .16) 100%);
}
.s.foto.veu-base::before {
  background: linear-gradient(to top,
    rgba(11, 27, 51, .94) 0%,
    rgba(11, 27, 51, .72) 38%,
    rgba(11, 27, 51, .18) 100%);
}
.s.foto.veu-cheio::before { background: rgba(11, 27, 51, .78); }
/* capa: gradiente diagonal deixa a proa respirar no alto e segura o texto
   embaixo — o véu chapado lavava a foto inteira */
.s.foto.capa::before {
  background: linear-gradient(170deg,
    rgba(11, 27, 51, .42) 0%,
    rgba(11, 27, 51, .72) 42%,
    rgba(11, 27, 51, .93) 100%);
}
/* foto de primeiro plano ocupado (multidão): o gradiente padrão ainda
   entregava as legendas em mono aos rostos — este segura até 70% */
.s.foto.veu-denso::before {
  background: linear-gradient(100deg,
    rgba(11, 27, 51, .97) 0%,
    rgba(11, 27, 51, .94) 52%,
    rgba(11, 27, 51, .74) 72%,
    rgba(11, 27, 51, .22) 100%);
}
.s.foto > * { position: relative; z-index: 1; }

/* entrada escalonada do conteúdo do slide ativo */
.s > .miolo > * { opacity: 0; transform: translateY(0.6cqw); }
.s.ativo > .miolo > * {
  animation: sobe .52s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 90ms);
}
@keyframes sobe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .s, .s.ativo { transition: none; }
  .s > .miolo > *, .s.ativo > .miolo > * {
    animation: none; opacity: 1; transform: none;
  }
}

.miolo {
  width: 100%;
  display: grid;
  gap: var(--e3);
  justify-items: start;
  align-content: center;
}

/* Ocupar a altura, em vez de centrar um bloco curto no meio de um palco
   de 1080. Onze das 22 telas deixavam 35–45% de vazio inferior e liam
   como slide inacabado. `space-between` ancora o título no topo, o
   corpo no meio e a nota no pé — a estrutura editorial de um deck.

   O `align-content: stretch` no .s é obrigatório: o padrão é `center`,
   que dá ao track a altura do conteúdo, e aí `height: 100%` no miolo
   resolve para a altura dele mesmo e nada estica. */
.s:has(> .miolo.preencher) { align-content: stretch; }
/* Flex, não grid com `space-between`: com space-between a sobra virava
   GAP e o vazio só mudava de lugar — saía do rodapé e reaparecia entre o
   título e o conteúdo. Em flex a sobra é absorvida pelo bloco marcado
   `.estica`, e título e rodapé ficam onde devem. */
.miolo.preencher {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: var(--e4);
}
.miolo.preencher > * { width: 100%; }
/* a grade principal do slide absorve a sobra e estica as próprias colunas */
.miolo.preencher > .estica { flex: 1 1 auto; align-content: center; }
/* o roadmap distribui eixo, trilho e faixas pela própria altura — o
   `center` acima anularia o `space-between` dele, por vir depois */
.miolo.preencher > .road.estica { align-content: space-between; }
.miolo > * { margin: 0; max-width: 100%; }
/* O alinhamento ao pé mora no .s, não no miolo: com height:100% o
   grid comprimia os tracks e o texto colidia (slides 02 e 10). */
.s:has(> .miolo.base) { align-content: end; }
.miolo.base { align-content: end; }

/* ---------- 3. TIPOGRAFIA ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625cqw;
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--realce);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 1.458cqw;
  height: 0.156cqw;
  background: var(--amarelo);
}
.escuro .eyebrow, .foto .eyebrow { color: var(--amarelo-fixo); }
.escuro .eyebrow::before, .foto .eyebrow::before { background: var(--amarelo-fixo); }

h1 {
  font-size: var(--t8);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 14ch;
}
h2 {
  font-size: var(--t7);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 22ch;
}
h2.largo { max-width: 26ch; }
/* o turning point do deck pede o maior corpo da peça */
h1.gigante { font-size: 7.6cqw; line-height: .92; letter-spacing: -.035em; max-width: 13ch; }
h3 {
  font-size: var(--t5);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
}
/* ênfase por TINTA, nunca por peso */
.q { color: var(--tinta-2); }
.escuro .q, .foto .q { color: var(--amarelo-fixo); }

.lede {
  font-size: var(--t4);
  font-weight: 400;
  line-height: 1.48;
  color: var(--tinta-2);
  max-width: 52ch;
}
.lede .i { color: var(--tinta); font-weight: 500; }
.escuro .lede, .foto .lede { color: var(--sobre-2); }
.escuro .lede .i, .foto .lede .i { color: var(--sobre); }

p {
  font-size: var(--t3);
  line-height: 1.62;
  color: var(--tinta-2);
  max-width: 62ch;
}
p .i { color: var(--tinta); font-weight: 500; }
.escuro p, .foto p { color: var(--sobre-2); }
.escuro p .i, .foto p .i { color: var(--sobre); }

.nota {
  font-family: var(--m);
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--tinta-3);
  max-width: 78ch;
}
.escuro .nota, .foto .nota { color: var(--sobre-3); }
.nota a { color: inherit; text-underline-offset: .2em; }

/* ---------- 4. CHIP DE STATUS ----------
   A distinção jurídica mais importante do deck: o que está
   confirmado, o que é proposta e o que se define em conjunto. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.417cqw;
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.26cqw 0.729cqw;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 0.365cqw;
  height: 0.365cqw;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip.confirmado { color: var(--realce); border-color: color-mix(in srgb, var(--realce) 40%, transparent); }
.chip.proposto   { color: #8A5210; border-color: color-mix(in srgb, #8A5210 40%, transparent); }
:root[data-theme="dark"] .chip.proposto,
:root:not([data-theme="light"]) .chip.proposto { color: #E5A53A; border-color: rgba(229,165,58,.4); }
.escuro .chip, .foto .chip { color: var(--sobre-3); border-color: var(--sobre-linha); }
.escuro .chip.confirmado, .foto .chip.confirmado { color: var(--amarelo-fixo); border-color: rgba(255,198,0,.42); }
.escuro .chip.proposto, .foto .chip.proposto { color: var(--sobre-2); border-color: var(--sobre-linha); }

.chips { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ---------- 5. GRADES E COMPONENTES ---------- */

.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); width: 100%; align-items: start; }
.col3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); width: 100%; align-items: start; }
.col4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); width: 100%; align-items: start; }
.col5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e3); width: 100%; align-items: stretch; }

/* divisão 1/3 + 2/3 para slide com foto à direita */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--e6); width: 100%; align-items: center; }

/* bloco com filete superior — a unidade de leitura do deck */
.bloco {
  display: grid;
  gap: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--linha);
  align-content: start;
}
.escuro .bloco, .foto .bloco { border-top-color: var(--sobre-linha); }
.bloco .rot {
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--realce);
}
.escuro .bloco .rot, .foto .bloco .rot { color: var(--amarelo-fixo); }
.bloco h3 { color: var(--tinta); }
.escuro .bloco h3, .foto .bloco h3 { color: var(--sobre); }
.bloco p { font-size: var(--t3); max-width: 42ch; }

/* Bloco com numeral: o numeral encabeça a COLUNA, não a lateral.
   Com `grid-template-columns: auto 1fr` + `grid-row: 1/-1` o rótulo
   caía na coluna 2 e, sendo mono com tracking .16em, quebrava em
   três linhas encostadas na borda — ilegível nos slides 17 e 21. */
.bloco.num { gap: var(--e1); }
.bloco.num .n {
  font-family: var(--m);
  font-size: var(--t6);
  font-weight: 400;
  line-height: 1;
  color: var(--linha);
  margin-bottom: var(--e1);
}
.escuro .bloco.num .n, .foto .bloco.num .n { color: var(--sobre-linha); }
.bloco.num > .rot, .bloco.num > h3 { margin-bottom: var(--e1); }

/* número-prova */
.prova { display: grid; gap: var(--e1); }
.prova .v {
  font-size: var(--t8);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.escuro .prova .v, .foto .prova .v { color: var(--sobre); }
.prova .v small { font-size: .42em; letter-spacing: -.01em; color: var(--tinta-3); }
.escuro .prova .v small, .foto .prova .v small { color: var(--sobre-3); }
.prova .k {
  font-family: var(--m);
  font-size: var(--t2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  max-width: 24ch;
  line-height: 1.45;
}
.escuro .prova .k, .foto .prova .k { color: var(--sobre-3); }

/* lista com marcador / — o dispositivo gráfico da casa */
ul.barra { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
/* O marcador é ::before ABSOLUTO, não coluna de grid.
   Com `display:grid; grid-template-columns:auto 1fr`, um <span> no
   meio do item virava célula própria e empurrava o texto seguinte
   para a linha de baixo, recuado — o defeito visto no slide 04. */
ul.barra li {
  display: block;
  position: relative;
  padding-left: 1.458cqw;
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 54ch;
}
/* dentro de coluna de grade a medida é a coluna, não a linha ideal:
   o max-width fazia o item quebrar em 425px numa coluna de 700 */
.col2 ul.barra li, .col3 ul.barra li, .col4 ul.barra li,
.split ul.barra li, .legados ul.barra li, .kpis ul.barra li,
.road ul.barra li, .fluxo ul.barra li { max-width: none; }
ul.barra li::before {
  content: "/";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--m);
  color: var(--amarelo);
  font-size: var(--t3);
  line-height: 1.5;
}
.escuro ul.barra li, .foto ul.barra li { color: var(--sobre-2); }
.escuro ul.barra li::before, .foto ul.barra li::before { color: var(--amarelo-fixo); }
ul.barra li .i { color: var(--tinta); font-weight: 500; }
.escuro ul.barra li .i, .foto ul.barra li .i { color: var(--sobre); }

/* caixa de destaque — a frase que a sala tem que levar */
.aspa {
  border-left: 0.208cqw solid var(--amarelo);
  padding-left: var(--e3);
  font-size: var(--t6);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--tinta);
  max-width: 30ch;
  text-wrap: balance;
}
.escuro .aspa, .foto .aspa { color: var(--sobre); border-left-color: var(--amarelo-fixo); }

/* lista de passos numerados — cabeçalho e descrição em linha própria */
ol.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); width: 100%; }
ol.passos li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--e3);
  row-gap: 0.26cqw;
  align-items: baseline;
  padding-top: var(--e2);
  border-top: 1px solid var(--linha);
}
.escuro ol.passos li, .foto ol.passos li { border-top-color: var(--sobre-linha); }
ol.passos .n {
  font-family: var(--m);
  font-size: var(--t3);
  color: var(--amarelo);
  grid-row: 1;
}
.escuro ol.passos .n, .foto ol.passos .n { color: var(--amarelo-fixo); }
ol.passos .t {
  font-size: var(--t5);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.1;
  color: var(--tinta);
  grid-row: 1;
}
.escuro ol.passos .t, .foto ol.passos .t { color: var(--sobre); }
ol.passos .d {
  grid-column: 2;
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--tinta-2);
}
.escuro ol.passos .d, .foto ol.passos .d { color: var(--sobre-2); }

/* A grade estica em altura E deixa as próprias colunas esticarem, para o
   `space-between` de dentro delas ter espaço onde distribuir. Um
   `align-self: start` nos filhos anulava justamente isso. */
.estica { align-items: stretch; }

/* camadas (slide 08) — três blocos com afirmação em manchete.
   Substituem nove bullets de peso idêntico: dentro de cada bloco existe
   agora um elemento dominante e dois de apoio. */
.camadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); width: 100%; }
.camadas .cm {
  display: grid;
  align-content: space-between;
  gap: var(--e3);
  padding-top: var(--e3);
  border-top: 0.208cqw solid var(--amarelo);
}
.escuro .camadas .cm, .foto .camadas .cm { border-top-color: var(--amarelo-fixo); }
.camadas .cm .rot {
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.escuro .camadas .cm .rot, .foto .camadas .cm .rot { color: var(--sobre-3); }
.camadas .cm .af {
  font-size: var(--t6);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.02;
  color: var(--tinta);
  text-wrap: balance;
}
.escuro .camadas .cm .af, .foto .camadas .cm .af { color: var(--sobre); }
.camadas .cm .af em { font-style: normal; color: var(--tinta-2); }
.escuro .camadas .cm .af em, .foto .camadas .cm .af em { color: var(--amarelo-fixo); }
.camadas .cm ul.barra { gap: var(--e1); }
.camadas .cm ul.barra li { font-size: var(--t3); max-width: none; }

/* verbos (slide 09) — MEET · CONNECT · EXHIBIT · INSPIRE em manchete.
   São a ideia do espaço e estavam em corpo de 32px com numeral #1. */
.verbos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); width: 100%; }
.verbos .vb {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--sobre-linha);
}
.verbos .vb .w {
  font-size: var(--t7);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .98;
  color: var(--sobre);
}
.verbos .vb p { font-size: var(--t3); line-height: 1.5; max-width: none; }

/* ---------- 6. VISUALIZAÇÕES ---------- */

/* 6.1 arco temporal — MOMENTO · CONSTRUÇÃO · RETORNO.
   Os três atos eram colunas iguais com bolinha e linha: nada dizia que o
   meio é o trecho longo (três anos) nem que a coisa cresce. A barra de
   topo agora engrossa a cada ato e o meio recebe a coluna mais larga. */
.arco {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: var(--e5);
  width: 100%;
  align-items: stretch;
}
.arco .ato {
  display: grid;
  align-content: start;
  gap: var(--e2);
  position: relative;
  padding-top: var(--e3);
}
.arco .ato::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--amarelo);
}
.arco .ato:nth-child(1)::before { height: 0.156cqw; opacity: .40; }
.arco .ato:nth-child(2)::before { height: 0.468cqw; opacity: .72; }
.arco .ato:nth-child(3)::before { height: 0.833cqw; opacity: 1; }
.escuro .arco .ato::before, .foto .arco .ato::before { background: var(--amarelo-fixo); }
.arco .ato .ano {
  font-family: var(--m);
  font-size: var(--t2);
  letter-spacing: .14em;
  color: var(--tinta-3);
}
.escuro .arco .ato .ano, .foto .arco .ato .ano { color: var(--sobre-3); }
.arco .ato .tit {
  font-size: var(--t7);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: .98;
  color: var(--tinta);
}
.escuro .arco .ato .tit, .foto .arco .ato .tit { color: var(--sobre); }
.arco .ato .dur {
  font-family: var(--m);
  font-size: var(--t3);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.escuro .arco .ato .dur, .foto .arco .ato .dur { color: var(--amarelo-fixo); }
:root[data-theme="light"] .arco .ato .dur, :root:not([data-theme="dark"]) .s:not(.escuro):not(.foto) .arco .ato .dur { color: #8A5210; }
.arco .ato p { font-size: var(--t3); max-width: 34ch; }

/* 6.2 territórios de legado — cinco colunas de altura cheia.
   Eram rótulo de 32px com micro-texto e 40% de vazio embaixo: o núcleo da
   proposta lido como nota de rodapé. O numeral vira marca d'água e o
   conteúdo se distribui do topo ao pé da coluna. */
.terr { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e4); width: 100%; }
.terr .t {
  display: grid;
  align-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0 0;
  border-top: 0.208cqw solid var(--amarelo);
  position: relative;
}
.escuro .terr .t, .foto .terr .t { border-top-color: var(--amarelo-fixo); }
.terr .t .n {
  font-family: var(--m);
  font-size: var(--t6);
  line-height: 1;
  color: var(--linha);
}
.escuro .terr .t .n, .foto .terr .t .n { color: var(--sobre-linha); }
.terr .t .tit {
  font-size: var(--t6);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1;
  color: var(--tinta);
}
.escuro .terr .t .tit, .foto .terr .t .tit { color: var(--sobre); }
.terr .t p { font-size: var(--t3); line-height: 1.5; max-width: none; }

/* 6.3 trilha de anos — jornada de pessoas / narrativa */
.trilha { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); width: 100%; position: relative; }
.trilha::before {
  content: "";
  position: absolute;
  top: 1.77cqw; left: 0; right: 0;
  height: 1px;
  background: var(--linha);
}
.escuro .trilha::before, .foto .trilha::before { background: var(--sobre-linha); }
.trilha .p { display: grid; gap: var(--e2); align-content: start; padding-right: var(--e4); position: relative; }
.trilha .p .ano {
  font-family: var(--m);
  font-size: var(--t4);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--tinta);
  line-height: 1.2;
}
.escuro .trilha .p .ano, .foto .trilha .p .ano { color: var(--sobre); }
.trilha .p .mk {
  width: 0.833cqw; height: 0.833cqw;
  border-radius: 50%;
  background: var(--amarelo);
  margin: 0.26cqw 0 var(--e2);
}
.trilha .p .verbo {
  font-size: var(--t5);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--tinta);
  line-height: 1.1;
}
/* variante de campanha (slide 14): WE RACE / WE BUILD… é a melhor copy do
   deck e estava no mesmo corpo da trilha de Pessoas — duas telas idênticas.
   Aqui o verbo vira manchete e o ano recua para marcador. */
.trilha.campanha .p .verbo { font-size: var(--t6); letter-spacing: -.028em; line-height: .98; }
.trilha.campanha .p .ano { font-size: var(--t2); color: var(--tinta-3); letter-spacing: .14em; }
.escuro .trilha.campanha .p .ano, .foto .trilha.campanha .p .ano { color: var(--sobre-3); }
.escuro .trilha .p .verbo, .foto .trilha .p .verbo { color: var(--sobre); }
.trilha .p .gl {
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.escuro .trilha .p .gl, .foto .trilha .p .gl { color: var(--sobre-3); }
.trilha .p p { font-size: var(--t3); line-height: 1.5; max-width: 26ch; }

/* 6.4 destinos do compromisso — para onde o investimento aponta.
   Os seletores viviam sob `.ramos`, o wrapper que segurava o número ao
   lado. Com o valor fora do deck o wrapper saiu e a lista virou texto
   corrido: agora as regras são do próprio `.destinos`. */
.destinos { display: grid; align-content: center; gap: 0; width: 100%; }
.destinos .d {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-top: 1px solid var(--linha);
}
.escuro .destinos .d, .foto .destinos .d { border-top-color: var(--sobre-linha); }
.destinos .d:last-child { border-bottom: 1px solid var(--linha); }
.escuro .destinos .d:last-child, .foto .destinos .d:last-child { border-bottom-color: var(--sobre-linha); }
.destinos .d .bar { width: 2.083cqw; height: 0.208cqw; background: var(--amarelo); align-self: center; }
.escuro .destinos .d .bar, .foto .destinos .d .bar { background: var(--amarelo-fixo); }
.destinos .d .nm {
  font-size: var(--t5);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--tinta);
}
.escuro .destinos .d .nm, .foto .destinos .d .nm { color: var(--sobre); }
.destinos .d .ds { font-size: var(--t3); color: var(--tinta-2); text-align: right; max-width: 38ch; }
.escuro .destinos .d .ds, .foto .destinos .d .ds { color: var(--sobre-2); }

/* 6.5 três legados — a tese central da proposta.
   Eram três caixas de borda fina com 15 bullets somados, lidas como tabela
   comparativa. Viram três colunas de altura cheia, com o nome de cada parte
   em manchete e o ganho principal destacado acima dos demais. */
.legados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); width: 100%; }
.legados .lg {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e3) 0 0;
  border-top: 0.208cqw solid var(--amarelo);
}
.escuro .legados .lg, .foto .legados .lg { border-top-color: var(--amarelo-fixo); }
.legados .lg .quem {
  font-size: var(--t5);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--tinta);
  text-transform: none;
  font-family: var(--f);
}
.escuro .legados .lg .quem, .foto .legados .lg .quem { color: var(--sobre); }
/* o ganho que importa, dito em manchete — os demais viram apoio */
.legados .lg .ganho {
  font-size: var(--t6);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.02;
  color: var(--tinta);
  text-wrap: balance;
}
.escuro .legados .lg .ganho, .foto .legados .lg .ganho { color: var(--sobre); }
.legados .lg .ganho em { font-style: normal; color: var(--amarelo); }
.escuro .legados .lg .ganho em, .foto .legados .lg .ganho em { color: var(--amarelo-fixo); }
.legados .lg ul.barra { gap: var(--e1); }
.legados .lg ul.barra li { font-size: var(--t3); max-width: none; }

/* 6.6 fluxo de governança — é uma CADEIA, e cinco caixas iguais lado a
   lado não diziam isso. Cada etapa ganha seta de continuidade e o numeral
   passa a marcar a posição na sequência. */
.fluxo { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e3); width: 100%; }
.fluxo .et {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding: var(--e3) var(--e3) 0 0;
  border-top: 1px solid var(--linha);
  position: relative;
}
.escuro .fluxo .et, .foto .fluxo .et { border-top-color: var(--sobre-linha); }
.fluxo .et:first-child { border-top-color: var(--amarelo); border-top-width: 0.208cqw; }
.escuro .fluxo .et:first-child, .foto .fluxo .et:first-child { border-top-color: var(--amarelo-fixo); }
/* a seta que emenda uma etapa na seguinte */
.fluxo .et:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: var(--e2); right: 0;
  font-family: var(--m);
  font-size: var(--t3);
  line-height: 1;
  color: var(--amarelo);
}
.escuro .fluxo .et::after, .foto .fluxo .et::after { color: var(--amarelo-fixo); }
.fluxo .et .n {
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .16em;
  color: var(--tinta-3);
}
.escuro .fluxo .et .n, .foto .fluxo .et .n { color: var(--sobre-3); }
.fluxo .et .tit {
  font-size: var(--t5);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--tinta);
}
.escuro .fluxo .et .tit, .foto .fluxo .et .tit { color: var(--sobre); }
.fluxo .et p { font-size: var(--t3); line-height: 1.5; max-width: none; }

/* 6.7 roadmap — a peça que precisa ser a mais forte do deck.
   Era uma fileira de cinco colunas de bullets com filete em cima, sem
   progressão nem marco: nada dizia onde estamos, onde é o pico nem que a
   coisa avança. Agora tem eixo contínuo, nó por fase, a fase corrente
   marcada, e o nó do retorno em destaque. */
.road { width: 100%; display: grid; gap: 0; height: 100%; align-content: space-between; }

.road .eixo { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e3); }
.road .eixo .ano {
  font-family: var(--m);
  font-size: var(--t2);
  letter-spacing: .14em;
  color: var(--tinta-3);
}
.escuro .road .eixo .ano, .foto .road .eixo .ano { color: var(--sobre-3); }

/* a linha do tempo: trilho contínuo com um nó por fase */
.road .trilho {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e3);
  position: relative;
  margin: var(--e2) 0 var(--e3);
}
.road .trilho::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0.104cqw;
  transform: translateY(-50%);
  background: var(--linha);
}
.escuro .road .trilho::before, .foto .road .trilho::before { background: var(--sobre-linha); }
.road .trilho .no {
  position: relative;
  height: 1.042cqw;
  display: grid;
  align-items: center;
  justify-items: start;
}
.road .trilho .no::before {
  content: "";
  width: 0.833cqw; height: 0.833cqw;
  border-radius: 50%;
  background: var(--amarelo);
  position: relative;
}
.escuro .road .trilho .no::before, .foto .road .trilho .no::before { background: var(--amarelo-fixo); }
/* onde estamos hoje: anel em volta do nó */
.road .trilho .no.agora::after {
  content: "";
  position: absolute;
  left: -0.417cqw; top: 50%;
  width: 1.667cqw; height: 1.667cqw;
  transform: translateY(-50%);
  border: 0.104cqw solid var(--amarelo);
  border-radius: 50%;
}
.escuro .road .trilho .no.agora::after, .foto .road .trilho .no.agora::after { border-color: var(--amarelo-fixo); }
/* o retorno de 2031 é o destino da narrativa — nó cheio e maior */
.road .trilho .no.destino::before { width: 1.354cqw; height: 1.354cqw; }

.road .faixas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e3); }
.road .fase { display: grid; align-content: start; gap: var(--e2); padding-right: var(--e2); }
.road .fase .rot {
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.escuro .road .fase .rot, .foto .road .fase .rot { color: var(--amarelo-fixo); }
.road .fase .tit {
  font-size: var(--t6);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: .98;
  color: var(--tinta);
}
.escuro .road .fase .tit, .foto .road .fase .tit { color: var(--sobre); }
.road .fase ul.barra { gap: var(--e1); }
.road .fase ul.barra li { font-size: var(--t3); line-height: 1.45; max-width: none; }

/* 6.8 confronto — o que termina × o que permanece.
   Os dois lados tinham peso idêntico, mas só um é o argumento: o que fica
   recebe mais largura e corpo maior; o que passa recua para cinza. */
.confronto { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: var(--e5); width: 100%; align-items: stretch; }
.confronto .lado.fica ul.grosso {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2);
}
.confronto .lado.fica ul.grosso li {
  position: relative;
  padding-left: 1.458cqw;
  font-size: var(--t5);
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--tinta-2);
}
.confronto .lado.fica ul.grosso li::before {
  content: "/";
  position: absolute; left: 0; top: 0;
  font-family: var(--m);
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--amarelo);
}
.escuro .confronto .lado.fica ul.grosso li, .foto .confronto .lado.fica ul.grosso li { color: var(--sobre-2); }
.confronto .lado.fica ul.grosso li .i { color: var(--tinta); font-weight: 500; }
.escuro .confronto .lado.fica ul.grosso li .i, .foto .confronto .lado.fica ul.grosso li .i { color: var(--sobre); }
.confronto .lado { display: grid; gap: var(--e3); align-content: start; }
.confronto .divisa { width: 1px; background: var(--linha); justify-self: center; }
.escuro .confronto .divisa, .foto .confronto .divisa { background: var(--sobre-linha); }
.confronto .lado .cab {
  font-family: var(--m);
  font-size: var(--t2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.escuro .confronto .lado .cab, .foto .confronto .lado .cab { color: var(--sobre-3); }
.confronto .lado.fica .cab { color: var(--amarelo); }
.escuro .confronto .lado.fica .cab, .foto .confronto .lado.fica .cab { color: var(--amarelo-fixo); }
.confronto .lado.passa ul.barra li { color: var(--tinta-3); }
.escuro .confronto .lado.passa ul.barra li, .foto .confronto .lado.passa ul.barra li { color: var(--sobre-3); }
.confronto .lado.passa ul.barra li::before { color: var(--linha); }
.escuro .confronto .lado.passa ul.barra li::before,
.foto  .confronto .lado.passa ul.barra li::before { color: var(--sobre-linha); }

/* 6.9 quadro de indicadores */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3) var(--e6); width: 100%; }
.kpis .fam { display: grid; gap: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--linha); align-content: start; }
.escuro .kpis .fam, .foto .kpis .fam { border-top-color: var(--sobre-linha); }
.kpis .fam .rot {
  font-family: var(--m);
  font-size: var(--t1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--realce);
}
.escuro .kpis .fam .rot, .foto .kpis .fam .rot { color: var(--amarelo-fixo); }
.kpis .fam ul.barra li { font-size: var(--t3); max-width: none; }

/* ---------- 7. CAPA ----------
   As três marcas estavam a 72px encolhidas no canto inferior esquerdo, com
   60% da tela vazia: capa de documento, não de apresentação de parceria. */

.capa .marcas {
  display: grid;
  gap: 0;
  font-size: 5.4cqw;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -.035em;
  color: var(--sobre);
}
.capa .marcas .x {
  font-family: var(--m);
  font-size: var(--t4);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--amarelo-fixo);
  line-height: 1.9;
}
.capa .horizonte {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--m);
  font-size: var(--t4);
  letter-spacing: .18em;
  color: var(--sobre);
}
.capa .horizonte .seta { color: var(--amarelo-fixo); }
.capa .pe {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--sobre-linha);
}
.capa .pe > div:first-child { display: grid; gap: var(--e3); }
.capa .pe img { height: 2.6cqw; width: auto; opacity: .92; }
.capa .pe .lg { display: flex; align-items: center; gap: var(--e4); flex: none; }

/* ---------- 8. RÉGUA LATERAL ---------- */

.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  /* Colapsada a régua NÃO tem fundo: ela flutua sobre a margem viva do
     slide e um fundo sólido cortaria a foto full-bleed na borda. Os
     elementos usam um cinza médio fixo, legível tanto sobre o papel
     claro quanto sobre o navy. O fundo só entra ao expandir. */
  background: transparent;
  border-right: 1px solid transparent;
  transition: width .24s cubic-bezier(.22,.61,.36,1),
              background .24s, border-color .24s;
  overflow: hidden;
}
.rail:hover, .rail:has(:focus-visible) {
  width: 264px;
  align-items: stretch;
  padding-left: 14px; padding-right: 14px;
  background: var(--fundo-2);
  border-right-color: var(--linha);
}

.rail .marca {
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8792A6;
  writing-mode: vertical-rl;
  white-space: nowrap;
  margin: 4px auto 0;
  opacity: 0;
  transition: opacity .2s;
}
.rail:hover .marca, .rail:has(:focus-visible) .marca {
  writing-mode: horizontal-tb;
  margin: 0;
  line-height: 1.5;
  opacity: 1;
  color: var(--tinta-3);
}

.rail ol {
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.rail ol::-webkit-scrollbar { display: none; }
.rail li { display: block; }
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta-3);
  padding: 2px 0;
  border-radius: 3px;
}
.rail a .tr {
  flex: none;
  width: 22px; height: 2px;
  background: rgba(135, 146, 166, .62);
  transition: background .2s, width .2s;
}
.rail:hover a .tr, .rail:has(:focus-visible) a .tr {
  width: 18px;
  background: var(--linha);
}
.rail a .lb {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .2s;
}
.rail:hover a .lb, .rail:has(:focus-visible) a .lb { opacity: 1; }
.rail a:hover .tr { background: #8792A6; }
.rail:hover a:hover { color: var(--tinta); }
.rail a.ativo .tr { background: var(--amarelo-fixo); width: 30px; }
.rail:hover a.ativo .tr, .rail:has(:focus-visible) a.ativo .tr { width: 24px; }
.rail:hover a.ativo, .rail:has(:focus-visible) a.ativo { color: var(--tinta); }

.rail .bts { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; }
.rail:hover .bts, .rail:has(:focus-visible) .bts { align-items: stretch; }
.rail button, .rail .bt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 34px; height: 34px;
  margin: 0 auto;
  padding: 0;
  /* fundo translúcido + blur: o botão se lê sobre foto, navy ou papel */
  border: 1px solid rgba(135, 146, 166, .34);
  border-radius: 4px;
  background: rgba(135, 146, 166, .16);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: #8792A6;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  flex: none;
  justify-content: center;
  transition: border-color .18s, color .18s, background .18s;
}
.rail:hover button, .rail:hover .bt,
.rail:has(:focus-visible) button, .rail:has(:focus-visible) .bt {
  width: 100%; margin: 0; padding: 0 10px; justify-content: flex-start;
  background: var(--fundo);
  border-color: var(--linha);
  color: var(--tinta-2);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.rail button:hover, .rail .bt:hover { border-color: #8792A6; color: var(--tinta); }
.rail:hover button:hover, .rail:hover .bt:hover { border-color: var(--tinta-3); color: var(--tinta); }
.rail button svg, .rail .bt svg { width: 15px; height: 15px; flex: none; }
/* o botão de idioma mostra a sigla da língua para a qual troca */
.rail .sig {
  font-family: var(--m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  flex: none;
  width: 15px;
  text-align: center;
}
.rail .rot {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.rail:hover .rot, .rail:has(:focus-visible) .rot { opacity: 1; }

.rail .conta {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: #8792A6;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rail:hover .conta, .rail:has(:focus-visible) .conta { color: var(--tinta-3); }

/* ---------- 9. PROGRESSO ---------- */

.progresso {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: transparent;
  z-index: 45;
}
.progresso i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amarelo);
  transition: width .42s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 10. AVISO DE TELA ESTREITA ---------- */

.gire {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--navy);
  color: var(--sobre);
  place-content: center;
  text-align: center;
  padding: 32px;
  font-family: var(--m);
  font-size: 13px;
  letter-spacing: .1em;
  line-height: 1.8;
}
@media (max-width: 680px) and (orientation: portrait) {
  .gire { display: grid; }
}

/* ---------- 11. IMPRESSÃO / PDF ----------
   Uma folha 16:9 por slide, tema claro forçado, cromo fora.
   Não substitui /pdf-diagramado — é a saída de emergência. */

@media print {
  @page { size: 1280px 720px; margin: 0; }
  :root { --rail: 0px; }
  html, body { height: auto; overflow: visible; background: #fff; }
  body { padding-left: 0; }
  .rail, .progresso, .gire { display: none !important; }
  /* container-type: inline-size mantém o cqw resolvendo (1cqw = 12.8px
     a 1280 de largura) mesmo com altura automática — `size` exigiria
     altura fixa no container e derrubaria a escala inteira na folha. */
  .palco {
    width: 1280px; height: auto;
    top: 0; transform: none;
    container-type: inline-size;
    overflow: visible;
  }
  .s {
    position: relative;
    inset: auto;
    width: 1280px; height: 720px;
    opacity: 1 !important;
    visibility: visible !important;
    page-break-after: always;
    break-after: page;
    animation: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .s > .miolo > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}