/* =========================================================
   SOMAR — V2
   Referência: apple.com (valores medidos na página do iPhone 17 Pro)
   · SF Pro Display / Text, peso 600 nos títulos
   · Statement 80px / -1.2px / entrelinha 1.05, centralizado
   · Rótulo colorido de 24px semibold acima do título
   · Corpo 17px / 400 / -0.374px em cinza #6E6E73
   · Fundos: #FFF, #F5F5F7 e preto absoluto
   Sem dependências externas.
   ========================================================= */

:root{
  /* --- cor --- */
  --white:    #FFFFFF;
  --soft:     #F5F5F7;
  --black:    #000000;
  --ink:      #1D1D1F;
  --muted:    #6E6E73;
  --line:     #D2D2D7;
  --amber:     #F24100;   /* mesmo laranja da V1 */
  --amber-dim: #F24100;   /* idem sobre fundo escuro: 4,6:1 no preto */
  --amber-text:#CC3900;   /* variante escura: só onde há texto branco sobre laranja */

  --on-dark:       #F5F5F7;
  --on-dark-muted: #A1A1A6;
  --line-dark:     rgba(255,255,255,.14);
  --card-dark:     #1D1D1F;

  /* --- medida --- */
  --maxw:      980px;
  --maxw-wide: 1180px;
  --pad-x:     clamp(22px, 5vw, 48px);
  --radius:    18px;
  --radius-lg: 28px;

  /* --- tipografia --- */
  --sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-eyebrow:  clamp(18px, 1.7vw, 24px);
  --fs-body:     clamp(16px, 1.2vw, 17px);
  --fs-sub:      clamp(21px, 2vw, 28px);
  --fs-statement:clamp(38px, 5.6vw, 80px);
  --fs-h:        clamp(30px, 4vw, 56px);
  --fs-h-xs:     clamp(19px, 1.5vw, 21px);
}

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

html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  background:var(--white);
}
@media (max-width:820px), (max-height:640px){
  html{ scroll-snap-type:none }
  .slide{ min-height:0 }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.47;
  letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--amber); color:#fff }

/* salto para o conteúdo — visível apenas no foco de teclado */
.skip{
  position:fixed; top:8px; left:8px; z-index:100;
  transform:translateY(-160%);
  background:var(--amber-text); color:#fff; text-decoration:none;
  padding:12px 18px; border-radius:999px; font-size:14px; font-weight:600;
  transition:transform .25s ease;
}
.skip:focus-visible{ transform:none }

/* =========================================================
   1. Progresso, índice e contador
   ========================================================= */

.meter{
  position:fixed; top:0; left:0; height:2px; z-index:90;
  background:var(--amber); width:0; border-radius:0 2px 2px 0;
  transition:width .15s linear;
}
body.on-dark .meter{ background:var(--amber-dim) }

/* índice em pontos */
.spine{
  position:fixed; right:clamp(8px,1.4vw,18px); top:50%; transform:translateY(-50%);
  z-index:70; display:flex; flex-direction:column; gap:10px; align-items:center;
}
.spine button{
  appearance:none; border:0; padding:0; background:transparent; cursor:pointer;
  width:16px; height:16px; display:grid; place-items:center;
}
.spine i{
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(0,0,0,.2);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .35s ease;
}
body.on-dark .spine i{ background:rgba(255,255,255,.26) }
.spine button:hover i{ background:var(--muted) }
.spine button[aria-current="true"] i{ background:var(--amber); transform:scale(1.7) }
body.on-dark .spine button[aria-current="true"] i{ background:var(--amber-dim) }
@media (max-width:760px){ .spine{ display:none } }

.counter{
  position:fixed; left:clamp(16px,3vw,32px); bottom:clamp(16px,2.4vw,28px);
  z-index:70; margin:0; font-size:12px; color:var(--muted);
}
body.on-dark .counter{ color:var(--on-dark-muted) }
.counter b{ font-weight:600; color:var(--ink) }
body.on-dark .counter b{ color:var(--on-dark) }


/* =========================================================
   2. Tela
   ========================================================= */

.slide{
  position:relative;
  min-height:100svh;
  scroll-snap-align:start;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(34px,6vh,64px) var(--pad-x) clamp(26px,4vh,48px);
  text-align:center;
}
.slide--dark{ background:var(--black); color:var(--on-dark) }
.slide--tone{ background:var(--soft) }
/* tela de acento: fundo laranja, cartoes brancos */
.slide--accent{ background:var(--amber); color:#fff }
.slide--accent .enum li,
.slide--accent .letters li{ background:#fff; color:var(--ink) }
.slide--accent .enum p,
.slide--accent .letters p{ color:var(--muted) }
.slide--accent .letters .ch{ color:var(--ink) }
.slide--accent .slide-foot{ color:#000 }   /* preto puro sobre laranja: 5,53:1 */

.slide-head{ opacity:0; height:0; overflow:hidden } /* vive na barra fixa; volta na impressão */
/* o rodapé carrega uma frase de síntese; a numeração dele vive no contador */
.slide-foot{
  display:flex; justify-content:center; padding:16px 0 0;
  font-size:13px; color:var(--muted); text-align:center;
}
.slide-foot > span:first-child{ max-width:70ch }
.slide-foot > span:last-child:not(:first-child){ display:none }
.p-only{ display:none }   /* rótulo de arquivo: só na impressão */
/* rodape do fecho: assinatura e local juntos, centralizados */
.foot-split{ justify-content:center; gap:10px 26px; flex-wrap:wrap; text-align:center }
.foot-split > span{ display:inline !important; max-width:none }
.slide--dark .slide-foot{ color:var(--on-dark-muted) }

.slide-body{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,2.6vh,28px);
  width:100%; max-width:var(--maxw-wide); margin:0 auto;
  padding:clamp(18px,4vh,52px) 0;
}

/* =========================================================
   3. Tipografia
   ========================================================= */

h1,h2,h3{ margin:0 }

/* statement — o título grande e centralizado das páginas de produto */
.h-display{
  font-size:var(--fs-statement); font-weight:600;
  line-height:1.05; letter-spacing:-.015em;
  max-width:24ch; text-wrap:balance;
}
.h-mid{
  font-size:var(--fs-h); font-weight:600;
  line-height:1.07; letter-spacing:-.005em;
  max-width:23ch; text-wrap:balance;
}
.h-small{
  font-size:var(--fs-h-xs); font-weight:600;
  line-height:1.24; letter-spacing:-.018em;
}

/* linha de apoio grande, em peso semibold */
.lede{
  font-size:var(--fs-sub); font-weight:600;
  line-height:1.16; letter-spacing:.007em;
  max-width:34ch; margin:0;
}
.slide--dark .lede{ color:rgba(255,255,255,.92) }

.txt{
  font-size:var(--fs-body); line-height:1.47; letter-spacing:-.022em;
  color:var(--muted); max-width:52ch; margin:0;
}
.slide--dark .txt{ color:var(--on-dark-muted) }
.txt + .txt{ margin-top:1em }

/* titulo a esquerda e texto de apoio a direita, no meio da tela */
.row-mid{
  width:100%; margin-top:auto;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,84px); align-items:center;
}
.row-mid h2{ text-align:left; max-width:none }
@media (max-width:900px){
  .row-mid{ grid-template-columns:1fr; gap:24px; margin-top:0 }
}

/* tela 03: escala mais proxima entre os tres textos */
#visao .h-display{ font-size:clamp(34px,4.4vw,60px); color:var(--amber) }
#visao .lede{
  font-size:clamp(19px,1.7vw,23px);
  /* desce 5px na tela: com alinhamento centralizado, metade da margem
     e absorvida, entao o valor aplicado e o dobro */
  margin-top:10px;
}
#visao .txt{ font-size:clamp(17px,1.5vw,20px); max-width:none; width:100% }

/* exposicao: texto de apoio em peso leve, contrastando com o titulo */
/* exposicao: titulo e credito a esquerda; todo o texto reunido a direita */
#exposicao .h-display{ color:var(--amber); max-width:none; text-align:center }

/* ativacoes criativas: dois paragrafos lado a lado e quatro cartoes compactos,
   senao o conjunto nao cabe em uma tela */
#ativacoes .duo{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,44px); width:100%; text-align:left;
  margin-top:clamp(12px,1.8vh,20px);
}
#ativacoes .duo .txt{ max-width:none }
#ativacoes .duo b{ font-weight:600; color:var(--white) }
@media (max-width:820px){ #ativacoes .duo{ grid-template-columns:1fr } }
#ativacoes .enum li{ padding:clamp(16px,1.8vw,22px) }
#ativacoes .enum p{ font-size:13.5px; line-height:1.38 }
#ativacoes .enum .n{ margin-bottom:clamp(8px,1.2vh,14px) }
#ativacoes .enum h3{ margin-bottom:6px }

#exposicao .lede{
  font-weight:400; letter-spacing:-.012em; line-height:1.34;
  max-width:56ch; text-align:center; margin-top:clamp(18px,2.4vh,30px);
}
.credito{
  margin:clamp(16px,2vh,26px) 0 0;
  font-size:15px; color:var(--on-dark-muted); letter-spacing:-.01em;
  text-align:center;
}

/* quem realiza: o paragrafo de abertura usa a largura toda da tela */
#pao .lede{ max-width:none; width:100% }

/* marcas: apoio com a mesma medida do titulo, em peso leve */
#marcas .lede{
  /* a medida em "ch" acompanha o corpo da fonte, entao 23ch no texto de apoio
     da menos da metade da largura do titulo. o valor abaixo iguala os dois. */
  max-width:min(42.6vw, 644px);
  font-weight:400;
  text-align:left;             /* sem justificar: espacos normais entre palavras */
  line-height:1.3;
}

/* posicoes dentro da tela: borda esquerda, centro, pe */
.at-left{ align-self:flex-start; text-align:left; margin-right:auto }
.at-center{ align-self:center; margin-left:auto; margin-right:auto; text-align:center }
.one-line{ max-width:none; white-space:nowrap }
.at-middle{ margin-top:auto }   /* junto com .at-bottom, centra o bloco entre topo e pe */
.at-bottom{ margin-top:auto; align-self:center }
@media (max-width:820px){
  .at-left{ align-self:stretch; margin-right:0 }
  .at-bottom{ margin-top:0 }
}

/* link azul com chevron */
.link{
  display:inline-flex; align-items:baseline; gap:3px;
  color:var(--amber); text-decoration:none;
  font-size:clamp(17px,1.4vw,21px); letter-spacing:-.015em;
}
.slide--dark .link{ color:var(--amber-dim) }
.link:hover{ text-decoration:underline }
.link::after{ content:"\203A"; font-size:1.2em; line-height:0 }
.links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 32px }

/* =========================================================
   4. Capa
   ========================================================= */

.wordmark{
  font-size:clamp(56px,11.5vw,140px); font-weight:800;
  line-height:1; letter-spacing:-.035em; margin:0;
  width:100%;
}
/* a arte da marca vem com muita margem transparente em cima e embaixo:
   a caixa fica na proporcao do desenho e o object-fit recorta o vazio */
.wordmark img{
  display:block; margin:0 auto;
  width:min(84vw,900px); height:auto; aspect-ratio:1755/210;
  object-fit:cover; object-position:center 48.4%;
}
.acro{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 7px;
  font-size:clamp(15px,1.2vw,17px); color:var(--on-dark-muted);
}
/* vírgula colada na palavra anterior; antes da última, "e".
   nowrap impede que o "e" caia sozinho na linha de baixo. */
.acro li{ white-space:nowrap }
.acro li:not(:last-child)::after{ content:"," }
.acro li:nth-last-child(2)::after{ content:" e" }
.cover-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px;
  margin:0; font-size:13px; color:var(--on-dark-muted);
}
/* na capa, os dados do evento descem para o pé da tela */
.cover-foot{ padding-top:0 }
.cover-foot .cover-meta{ width:100% }

/* =========================================================
   5. Blocos
   ========================================================= */

.enum{
  list-style:none; margin:0; padding:0; width:100%;
  display:grid; gap:clamp(12px,1.3vw,20px);
}
.enum.c2{ grid-template-columns:repeat(2,1fr) }
.enum.c3{ grid-template-columns:repeat(3,1fr) }
.enum.c4{ grid-template-columns:repeat(4,1fr) }
.enum.c5{ grid-template-columns:repeat(5,1fr) }
@media (max-width:1180px){ .enum.c5{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:980px){ .enum.c4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:820px){ .enum.c3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:820px){ .enum.c5{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .enum.c2,.enum.c3,.enum.c4,.enum.c5{ grid-template-columns:1fr } }

.enum li{
  background:var(--soft); border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,36px); text-align:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.slide--tone .enum li{ background:var(--white) }
.slide--dark .enum li{ background:var(--card-dark) }
.enum li:hover{ transform:translateY(-5px) }

.enum .n{
  display:block; margin-bottom:16px;
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--amber);
}
.slide--dark .enum .n{ color:var(--amber-dim) }
.enum h3{ margin:0 0 8px }
.enum p{ margin:0; font-size:15px; line-height:1.45; color:var(--muted) }
.slide--dark .enum p{ color:var(--on-dark-muted) }

/* sumário: os cartões inteiros são clicáveis */
.index li{ padding:0 }
.index a{
  display:flex; flex-direction:column; height:100%;
  padding:clamp(24px,2.6vw,36px); gap:0;
  color:inherit; text-decoration:none; border-radius:var(--radius-lg);
}
.index a .n{ margin-bottom:16px }
.index a p{ margin:0 0 20px }
.index a .link{ margin-top:auto; font-size:17px }
.index a:hover .link{ text-decoration:underline }

/* triade: frases curtas, centradas dentro de cada cartao */
.enum.triade li{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; min-height:clamp(220px,30vh,300px);
}
.enum.triade .n{ margin-bottom:clamp(14px,1.8vh,22px) }
.enum.triade h3{
  font-size:clamp(24px,2.6vw,38px); line-height:1.12; letter-spacing:-.018em;
  max-width:15ch; text-wrap:balance;
}

/* letras do conceito */
.letters{
  list-style:none; margin:0; padding:0; width:100%;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.2vw,18px);
}
.letters li{
  background:var(--card-dark); border-radius:var(--radius-lg);
  padding:clamp(22px,2.2vw,32px); text-align:left;
}
.letters .ch{
  display:block; margin-bottom:20px;
  font-size:clamp(40px,4.6vw,64px); font-weight:600;
  line-height:1; letter-spacing:-.025em; color:var(--on-dark);
}
.letters .nm{ display:block; margin-bottom:6px; font-size:17px; font-weight:600 }
.letters p{ margin:0; font-size:14px; line-height:1.42; color:var(--on-dark-muted) }
@media (max-width:900px){ .letters{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .letters{ grid-template-columns:1fr } }

/* números */
.figs{
  width:100%; display:grid; gap:clamp(12px,1.3vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.fig{
  background:var(--soft); border-radius:var(--radius-lg);
  padding:clamp(26px,2.8vw,40px); text-align:left;
  display:flex; flex-direction:column;
}
.slide--tone .fig{ background:var(--white) }
.slide--dark .fig{ background:var(--card-dark) }
.fig b{
  display:block; margin-bottom:12px;
  font-size:clamp(28px,3.4vw,46px); font-weight:600;
  line-height:1.04; letter-spacing:-.02em;
  white-space:nowrap;   /* "600-1.000" nao pode quebrar em duas linhas */
}
.fig span{ display:block; font-size:14px; line-height:1.4; color:var(--muted) }
.slide--dark .fig span{ color:var(--on-dark-muted) }

/* listas */
.list{ list-style:none; margin:0; padding:0; width:100%; max-width:var(--maxw); text-align:left }
.list li{
  position:relative; padding:15px 0 15px 24px;
  border-bottom:1px solid var(--line); color:var(--muted); line-height:1.47;
}
.slide--dark .list li{ border-bottom-color:var(--line-dark); color:var(--on-dark-muted) }
.list li:last-child{ border-bottom:0 }
.list li::before{
  content:""; position:absolute; left:2px; top:23px;
  width:6px; height:6px; border-radius:50%; background:var(--amber);
}
.slide--dark .list li::before{ background:var(--amber-dim) }
.list b{ font-weight:600; color:var(--ink) }
.slide--dark .list b{ color:var(--on-dark) }
.list--2{ columns:2; column-gap:clamp(28px,4vw,60px); max-width:var(--maxw-wide) }
.list--2 li{ break-inside:avoid }
/* em duas colunas o ultimo item nao e o fim visual: mantem o filete */
.list--2 li:last-child{ border-bottom:1px solid var(--line) }
.slide--dark .list--2 li:last-child{ border-bottom-color:var(--line-dark) }
@media (max-width:760px){ .list--2{ columns:1 } }

/* linha do tempo */
.clock{ width:100%; max-width:var(--maxw-wide) }
.clock-bar{ height:8px; border-radius:99px; background:var(--ink) }
.slide--dark .clock-bar{ background:var(--on-dark) }
.clock-hours{
  list-style:none; margin:12px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(11,1fr);
  font-size:12px; color:var(--muted); text-align:left;
}
.slide--dark .clock-hours{ color:var(--on-dark-muted) }
@media (max-width:820px){
  .clock-hours{ grid-template-columns:repeat(6,1fr) }
  .clock-hours li:nth-child(2n){ display:none }
}

/* níveis */
.tiers{ width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.3vw,20px) }
.tier{
  background:var(--card-dark); border-radius:var(--radius-lg);
  padding:clamp(22px,2.2vw,30px); text-align:left;
}
.tier .lv{
  display:block; margin-bottom:16px;
  font-size:14px; font-weight:600; color:var(--amber-dim);
}
.tier ul{ list-style:none; margin:12px 0 0; padding:0 }
.tier li{
  padding:9px 0; border-top:1px solid var(--line-dark);
  font-size:14.5px; line-height:1.38; color:var(--on-dark-muted);
}
@media (max-width:880px){ .tiers{ grid-template-columns:1fr } }

/* duas colunas */
.duo{
  width:100%; max-width:var(--maxw-wide); text-align:left;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,56px);
}
.duo--wide{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
/* coluna da esquerda alinhada pelo centro da coluna da direita */
.duo--middle{ align-items:center }
@media (max-width:900px){ .duo,.duo--wide{ grid-template-columns:1fr } }

/* fecho */
.quote{
  font-size:clamp(42px,7vw,104px); font-weight:600;
  line-height:1.02; letter-spacing:-.018em; margin:0;
}
.sign{ margin:0; font-size:var(--fs-sub); font-weight:600; line-height:1.16; color:var(--on-dark-muted) }

.cards-contact{
  width:100%; display:grid; gap:clamp(12px,1.3vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.cards-contact div{
  background:var(--card-dark); border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,34px); text-align:left;
}
.cards-contact .k{ display:block; margin-bottom:8px; font-size:14px; color:var(--on-dark-muted) }
.cards-contact .v{ display:block; font-size:19px; font-weight:600 }

/* =========================================================
   6. Movimento
   ========================================================= */

.js .kin .w{ display:inline-block; overflow:hidden; vertical-align:bottom }
.js .kin .w > i{
  display:inline-block; font-style:normal; transform:translateY(102%);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--w,0) * 38ms);
}
.js .is-live .kin .w > i{ transform:none }
.kin .w > i.accent{ color:var(--amber) }
/* sobre fundo laranja o acento se perde: inverte para preto */
.slide--accent .kin .w > i.accent{ color:var(--ink) }

.js .up{
  opacity:0; transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.2,.8,.2,1), transform .95s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .is-live .up{ opacity:1; transform:none }

.js .draw{ transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .1s }
.js .is-live .draw{ transform:scaleX(1) }

@media (prefers-reduced-motion:reduce){
  .js .kin .w > i,.js .up,.js .draw{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .enum li:hover{ transform:none }
}

/* =========================================================
   7. Foco
   ========================================================= */

a:focus-visible, button:focus-visible{
  outline:4px solid var(--amber); outline-offset:2px; border-radius:8px;
}
body.on-dark a:focus-visible, body.on-dark button:focus-visible{ outline-color:var(--amber-dim) }

/* =========================================================
   8. Impressão — uma tela por página
   ========================================================= */

/* margem zero: quem controla o respiro e o proprio slide, para que
   os fundos possam sangrar ate a borda no modo colorido */
@page{ size: A4 landscape; margin: 0 }

@media print{
  html{ scroll-snap-type:none }
  .spine,.meter,.counter,.skip{ display:none !important }
  body{ font-size:10.5pt }

  .slide{
    min-height:0; height:100vh;
    page-break-after:always; break-after:page;
    padding:12mm 14mm; text-align:left;
    display:grid; grid-template-rows:auto 1fr auto;
  }
  .slide:last-child{ page-break-after:auto }

  .slide-head{ opacity:1; height:auto; overflow:visible; padding-bottom:6mm }
  .slide-foot{ justify-content:space-between; text-align:left }
  .slide-foot > span:last-child:not(:first-child){ display:inline }
  .p-only{ display:inline }
  .slide-body{ align-items:flex-start; padding:6mm 0 }
  .h-display,.h-mid,.quote,.wordmark,.lede{ max-width:none }

  .js .kin .w > i,.js .up{ opacity:1 !important; transform:none !important }
  .js .draw{ transform:none !important }

  /* ---- versao papel: sem fundos, para impressora comum ---- */
  html:not(.pdf) body{ background:#fff; color:#000 }
  html:not(.pdf) .slide{ background:#fff !important; color:#000 !important }
  html:not(.pdf) .slide *{ color:#000 !important }
  html:not(.pdf) .slide-head{ border-bottom:1px solid #ccc }
  html:not(.pdf) .enum li,
  html:not(.pdf) .fig,
  html:not(.pdf) .tier,
  html:not(.pdf) .letters li,
  html:not(.pdf) .cards-contact div{
    background:#fff !important; border:1px solid #ccc; border-radius:8pt;
  }
  html:not(.pdf) .list li{ border-bottom-color:#ccc !important }
  html:not(.pdf) .list li::before,
  html:not(.pdf) .acro li + li::before{ background:#000 !important }
  html:not(.pdf) .clock-bar{ background:#000 !important }
  /* a marca e branca: no papel sem fundo, inverte para preto */
  html:not(.pdf) .wordmark img{ filter:invert(1) }

  /* ---- versao tela: mantem a estetica do site ---- */
  html.pdf,
  html.pdf body,
  html.pdf .slide,
  html.pdf .slide *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  html.pdf .slide{ text-align:center }
  html.pdf .slide-head{ opacity:0; height:0; overflow:hidden; padding:0 }
  html.pdf .slide-foot{ justify-content:center; text-align:center }
  html.pdf .slide-foot > span:last-child:not(:first-child){ display:none }
  html.pdf .p-only{ display:none }
  html.pdf .slide-body{ align-items:center; padding:0 }
  html.pdf .foot-split{ justify-content:center }
}

/* =========================================================
   9. Ajustes de tela estreita (declarados por ultimo para
      vencer as regras especificas de cada tela)
   ========================================================= */

@media (max-width:900px){
  .one-line{ white-space:normal }
  #marcas .lede,
  #visao .txt,
  #pao .lede{ max-width:none; width:auto }
  #visao .lede{ margin-top:0 }
  .at-bottom{ margin-top:clamp(20px,3vh,32px) }
  .row-mid{ margin-top:0 }
}

/* =========================================================
   10. Peças acrescentadas na revisão de conteúdo
   ========================================================= */

/* rótulo de subgrupo dentro de uma tela */
.subtitulo{
  margin:0 0 12px;
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--amber);
}
.slide--dark .subtitulo{ color:var(--amber-dim) }

/* link de contato */
.contato{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor }
.contato:hover{ color:var(--amber-dim) }

/* botão de ação */
.acoes{
  margin:clamp(22px,3vh,34px) 0 0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.botao{
  display:inline-block; text-decoration:none;
  padding:13px 24px; border-radius:999px;
  background:var(--amber); color:#fff;
  font-size:16px; font-weight:600; letter-spacing:-.012em;
  transition:opacity .25s ease;
}
.botao:hover{ opacity:.85 }
/* segundo botão, secundário: vazado */
.botao--vazado{
  background:transparent; color:inherit;
  box-shadow:inset 0 0 0 1px currentColor;
}
.botao--vazado:hover{ opacity:.7 }

/* numeração por faixa de horário é mais larga que "01" */
.enum .n{ white-space:nowrap }

@media print{
  .acoes{ display:none }
  /* so na versao papel, que zera os fundos. no modo ?pdf=1 os fundos escuros
     permanecem, e forcar preto aqui apagava o rotulo contra o fundo preto */
  html:not(.pdf) .subtitulo{ color:#000 !important }
}

/* =========================================================
   11. Telas densas: cartões seguidos de lista
   Sem isto, elas passam da altura da janela e a navegação
   por tela deixa de funcionar naquele ponto.
   ========================================================= */

.enum + .list--2,
.team + .list--2{ margin-top:clamp(16px,2vh,24px) }

.enum:has(+ .list--2) li{ padding:clamp(18px,2vw,26px) }
.enum:has(+ .list--2) .n{ margin-bottom:clamp(10px,1.4vh,16px) }
.enum:has(+ .list--2) h3{ margin-bottom:6px }
.enum:has(+ .list--2) p{ font-size:14.5px; line-height:1.4 }

.list--2 li{ padding:11px 0 11px 24px }

/* =========================================================
   12. Tela de realização e apoio
   ========================================================= */

.creditos{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(38px,7vw,110px); width:100%;
}
.credito-bloco{ margin:0; text-align:center }
.credito-bloco figcaption{
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--muted);
  margin-bottom:clamp(16px,2.4vh,26px);
}
.slide--dark .credito-bloco figcaption{ color:var(--on-dark-muted) }
.credito-bloco img{
  display:block; margin:0 auto;
  width:auto; height:auto;
  max-width:min(38vw, 300px); max-height:clamp(90px,16vh,150px);
  object-fit:contain;
}
.credito-bloco .logo-menor{ max-height:clamp(52px,9vh,84px) }
/* marca da realizacao 30% menor que o limite anterior (210px / 105px) */
.credito-bloco .logo-realizacao{
  max-width:min(18.6vw, 147px); max-height:clamp(44px,7.8vh,74px);
}

@media (max-width:700px){
  .creditos{ gap:38px }
  .credito-bloco img{ max-width:70vw }
  .credito-bloco .logo-realizacao{ max-width:34.3vw }
}

/* =========================================================
   13. Método — cadeia e telas de processo (V3)
   ========================================================= */

/* cadeia do método: termos ligados por setas.
   a seta é marcador técnico, então é o único elemento em laranja */
.fluxo{
  list-style:none; margin:0; padding:0; width:100%;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:clamp(7px,.9vw,13px);
  font-size:clamp(11px,1vw,13.5px); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
}
/* baseline, e nao center: a seta e 1,15em, entao um termo sem seta ao lado
   ficava 1,4px mais baixo que os demais */
.fluxo li{ display:flex; align-items:baseline; gap:clamp(7px,.9vw,13px) }
/* a seta vem ANTES do termo, nunca depois: se a cadeia quebrar em telas
   estreitas, a linha termina num termo e a seguinte comeca com "-> termo",
   em vez de deixar uma seta pendurada no fim da linha */
.fluxo li:not(:first-child)::before{
  content:"\2192"; font-size:1.15em; font-weight:400; letter-spacing:0;
  color:var(--amber);
}
.slide--dark .fluxo li:not(:first-child)::before{ color:var(--amber-dim) }
.slide--accent .fluxo li:not(:first-child)::before{ color:var(--ink) }

/* legenda de formatos, logo abaixo da cadeia */
.fluxo-nota{
  margin:clamp(10px,1.4vh,16px) auto 0; max-width:66ch;
  font-size:14px; line-height:1.42; color:var(--muted); text-align:center;
}
.slide--dark .fluxo-nota{ color:var(--on-dark-muted) }

/* seis passos em duas fileiras de três, ou cinco linguagens em uma fileira:
   cartão mais baixo que o padrão, senão a tela passa da altura da janela
   e a paginação por tela deixa de funcionar naquele ponto */
.enum.passos li{ padding:clamp(15px,1.7vw,21px) }
.enum.passos .n{ margin-bottom:clamp(8px,1.1vh,12px) }
.enum.passos h3{ margin-bottom:6px }
.enum.passos p{ font-size:14px; line-height:1.38 }

/* o nome da etapa ocupa o lugar da numeração: pode quebrar em duas palavras */
.enum.passos .n.etapa{ white-space:normal }

/* quando o rotulo e o proprio titulo do cartao — nao ha h3 abaixo dele, so
   o paragrafo — ele precisa de corpo maior que o texto. Sem isto o rotulo
   e o corpo saem os dois em 14px e a hierarquia do cartao some. Onde existe
   h3 abaixo (o rotulo e so um chapeu), ele continua no tamanho pequeno. */
.enum.passos .n.etapa:has(+ p){ font-size:16.5px; letter-spacing:-.01em }

/* na impressao em papel o dossie inteiro alinha a esquerda; a cadeia e a
   sua legenda continuavam centralizadas, destoando da pagina */
@media print{
  html:not(.pdf) .fluxo{ justify-content:flex-start }
  html:not(.pdf) .fluxo-nota{ margin-left:0; text-align:left }
}

/* o título tem três frases; em 23ch elas quebravam no meio ("Várias /
   linguagens."). Em 32ch a quebra cai entre frases, como no texto original. */
#eixos .h-mid{ max-width:32ch }

/* esta era a unica tela do dossie mais alta que a janela: o titulo ocupava
   tres linhas (171px) e empurrava o conjunto 28px alem de 100svh. Em 32ch
   ele cai para duas linhas e a tela volta a caber, sem cortar conteudo. */
#ativacoes .h-mid{ max-width:32ch }

/* =========================================================
   14. Janela larga e baixa (V3)
   A escala tipografica inteira e definida em vw. Numa janela larga
   os titulos vao ao teto do clamp, mas a altura disponivel nao
   acompanha — e as telas mais densas passam de 100svh, quebrando a
   paginacao. Aqui a escala passa a responder tambem a altura.
   Medido em 1600x700: sem isto, tres telas estouravam.
   ========================================================= */

/* a segunda condicao pega o caso mais comum de todos: notebook 1366x768 com
   a barra do navegador, que deixa 660px de altura util. o piso de 821px de
   largura e o mesmo que o app.js usa para decidir se pagina (podePaginar). */
@media (min-width:1440px) and (max-height:760px),
       (min-width:821px)  and (max-height:700px){
  :root{
    --fs-statement: clamp(38px, 4.4vw, 60px);
    --fs-h:         clamp(30px, 3.2vw, 44px);
    --fs-sub:       clamp(20px, 1.7vw, 24px);
  }
  /* o respiro tambem cede um pouco: com pouca altura, o ritmo entre blocos
     custa mais do que vale */
  .slide-body{ gap:clamp(12px,2vh,22px); padding:clamp(12px,2.6vh,34px) 0 }
  .slide{ padding-top:clamp(22px,4vh,64px); padding-bottom:clamp(18px,3vh,48px) }
}

/* =========================================================
   15. Índice lateral em janela baixa (V3)
   Com 36 telas o indice mede 926px: em 1366x660 ele ia de -133 a 793 e
   12 dos 36 pontos ficavam fora da janela — sem como clicar, porque e
   position:fixed e nao rola. O ocultamento que existia era so por
   largura. Aqui ele encolhe para caber na altura disponivel.
   ========================================================= */

.spine{ max-height:94svh }
@media (max-height:920px){
  .spine{ gap:clamp(2px,.5vh,10px) }
  .spine button{ width:13px; height:13px }
}

/* =========================================================
   16. Impressão: restaura o layout largo (V3)

   A página impressa é A4 paisagem — 1123 x 793 px CSS, medidos no PDF.
   Mesmo assim o Chrome avalia os @media (max-width) contra a janela, e
   não contra a página: gerando o PDF ele aplicava os pontos de quebra de
   tablet, e as grades de 3, 4 e 5 colunas saíam com 2, com faixas vazias
   em cima e embaixo de cada tela.

   Como este bloco vem por último, ele vence os pontos de quebra e devolve
   à página impressa a mesma diagramação da tela larga. Os valores abaixo
   são exatamente os das regras base — não são um layout novo.
   ========================================================= */

@media print{
  .enum.c2{ grid-template-columns:repeat(2,1fr) }
  .enum.c3{ grid-template-columns:repeat(3,1fr) }
  .enum.c4{ grid-template-columns:repeat(4,1fr) }
  .enum.c5{ grid-template-columns:repeat(5,1fr) }

  .duo{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .duo--wide{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
  #ativacoes .duo{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .row-mid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }

  .letters{ grid-template-columns:repeat(5,1fr) }
  .tiers{ grid-template-columns:repeat(3,1fr) }
  .list--2{ columns:2 }
  .clock-hours{ grid-template-columns:repeat(11,1fr) }
  .clock-hours li:nth-child(2n){ display:list-item }

  .one-line{ white-space:nowrap }
  .credito-bloco img{ max-width:min(38vw,300px) }
  .credito-bloco .logo-realizacao{ max-width:min(18.6vw,147px) }

  /* o cabecalho so existe no papel, e la ele era um bloco: os dois <span>
     saiam colados — "SumarioDossie", "01 — Formato previstoProjeto" — em
     todas as paginas de conteudo. Recebe o mesmo tratamento do rodape:
     rotulo da secao a esquerda, nome da parte a direita. */
  .slide-head{ display:flex; justify-content:space-between; gap:16px }
}