/* Fonte hospedada no projeto · NÃO usar Google Fonts.
   O Google serve 14 subconjuntos por faixa Unicode e escolhe pelo User-Agent:
   navegadores diferentes recebem arquivos com métricas diferentes, e o mesmo
   texto muda de largura. Servindo daqui, a apresentação também roda sem internet.

   `font-display:block` porque o texto medido com a fonte de reserva antes da
   troca dá layout errado no primeiro quadro. */
@font-face{
  font-family:'InterVar';
  src:url('./fontes/InterVariable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:block;
}
/* A itálica foi removida da folha em 05/set: nenhuma das quatro páginas usa
   itálico, e o arquivo tem 388KB. Se algum dia precisar, ele continua em
   comum/fontes/ — basta redeclarar aqui e tirar do .vercelignore. */

:root{
  --black:#050706;--ink:#101312;--teal:#0F766E;--teal-bright:#168c82;
  --white:#f6f8f7;--muted:#a8b0ad;--line:rgba(255,255,255,.14);
  --ease:cubic-bezier(.2,.75,.25,1);--pad:clamp(1.4rem,5.8vw,7rem)
}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;background:var(--black);color:var(--white);font-family:'InterVar',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-optical-sizing:none;font-variation-settings:'opsz' 32}
button,a{font:inherit}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.symbol-d{fill:var(--logo-d,currentColor)}.symbol-l{fill:var(--logo-l,var(--teal))}
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:clamp(66px,9.6vh,100px);padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{--logo-d:var(--white);--logo-l:var(--teal);--logo-m:var(--muted);display:flex;align-items:center;gap:.8rem;color:var(--white);text-decoration:none;pointer-events:auto}.brand svg{width:34px;height:28px}.brand .lockup{width:auto;height:28px}.brand span{font-size:.76rem;font-weight:700;letter-spacing:.24em}.topbar-actions{display:flex;align-items:center;gap:1.4rem}.pdf-download{pointer-events:auto;color:var(--white);border:1px solid rgba(255,255,255,.25);padding:.55rem .8rem;text-decoration:none;font-size:.62rem;font-weight:700;letter-spacing:.14em;transition:.2s}.pdf-download:hover{background:var(--teal);border-color:var(--teal)}.topbar-meta{display:flex;gap:1.5rem;color:var(--muted);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}.topbar.on-light .brand{--logo-d:var(--ink);--logo-l:var(--teal);--logo-m:#6b7280;color:var(--ink)}.topbar.on-light .pdf-download{color:var(--ink);border-color:rgba(16,19,18,.28)}.topbar.on-light .topbar-meta{color:#53605c}.topbar.on-teal .brand{--logo-d:#fff;--logo-l:#fff;--logo-m:rgba(255,255,255,.8);color:#fff}.topbar.on-teal .pdf-download{color:#fff;border-color:rgba(255,255,255,.4)}.topbar.on-teal .topbar-meta{color:rgba(255,255,255,.78)}
.deck{position:relative;width:100%;height:100%;overflow:hidden}.slide{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateX(3%);transition:opacity .42s var(--ease),transform .62s var(--ease),visibility .62s}.slide.is-active{visibility:visible;opacity:1;transform:none;z-index:2}.slide.is-past{transform:translateX(-3%)}
.slide-dark{background:var(--black);color:var(--white)}.slide-light{background:#f3f5f4;color:var(--ink)}.slide-teal{background:var(--teal);color:white}/* Título ancorado numa linha comum.
   Com `justify-content:center` cada slide centralizava o próprio bloco, e a
   altura do título variava 160px entre o slide mais cheio e o mais vazio —
   quase um quinto da tela. Num deck, o olho espera a mesma linha de partida
   a cada virada; o que muda embaixo pode variar à vontade.
   A capa e o fecho continuam com tratamento próprio. */
.slide-content{position:relative;z-index:3;width:100%;height:100%;padding:clamp(7.5rem,15vh,10rem) var(--pad) clamp(6.6rem,12vh,8.5rem);display:flex;flex-direction:column;justify-content:flex-start;max-width:1600px;margin:auto}
.eyebrow{margin:0 0 1.1rem;color:var(--teal-bright);font-size:clamp(.7rem,.9vw,.9rem);font-weight:700;letter-spacing:.24em}.slide-teal .eyebrow{color:rgba(255,255,255,.7)}h1,h2,h3,p{margin-top:0}h1,h2{font-kerning:normal;text-rendering:optimizeLegibility}h1{font-size:clamp(3rem,6.8vw,7.2rem);line-height:1;letter-spacing:-.028em;margin-bottom:2rem}h1 span,h2 span{color:var(--teal-bright)}h2{font-size:clamp(2.5rem,5vw,5.8rem);line-height:1.03;letter-spacing:-.024em;margin-bottom:2.1rem}.lead{max-width:760px;color:#c1c9c6;font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.55}.dark-copy{color:#53605c}.hero-content{justify-content:flex-end;padding-bottom:clamp(7.5rem,14vh,10rem)}
.hero-mark{--logo-d:#151a18;--logo-l:#0c514c;position:absolute;z-index:1;right:-3vw;top:4vh;width:min(55vw,760px);height:min(72vh,720px);color:#151a18;opacity:.9}.hero-mark svg{width:100%;height:100%}.route-grid{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(15,118,110,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(15,118,110,.16) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent,black 55%,black)}/* O colchete em L da "rota" caía na altura do pé do L da marca gigante, e o
   olho lia os dois como uma coisa só: um risco verde saindo da letra.
   A grade sozinha já dá a textura; o colchete só criava ruído. */
.route-grid-end{transform:scaleX(-1);opacity:.2}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);gap:clamp(3rem,8vw,8rem);align-items:center;flex:1;min-height:0}
/* A coluna do texto começa no topo, junto com os títulos dos outros slides.
   A da direita segue centralizada — hub, órbita e listas pedem o eixo no
   meio, e é isso que dá o equilíbrio da composição. */
.split>*:first-child{align-self:start}.pain-grid,.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(15,118,110,.25);border:1px solid rgba(15,118,110,.22);margin-top:2rem}.pain-grid article,.benefit-grid article{padding:clamp(1.4rem,2.4vw,2.7rem);background:#f3f5f4;min-height:220px}.pain-grid span,.benefit-grid b{display:block;color:var(--teal);font-size:.74rem;letter-spacing:.18em;margin-bottom:2.7rem}.pain-grid h3,.benefit-grid h3{font-size:1.45rem;margin-bottom:.75rem}.pain-grid p,.benefit-grid p{color:#59625f;line-height:1.55;margin:0}.benefit-grid{grid-template-columns:repeat(4,1fr)}
.hub-diagram{position:relative;min-height:460px}.hub-diagram:before,.hub-diagram:after{content:"";position:absolute;background:rgba(22,140,130,.4)}.hub-diagram:before{height:1px;left:15%;right:10%;top:50%}.hub-diagram:after{width:1px;top:14%;bottom:12%;left:50%}.hub-node{position:absolute;padding:1rem 1.2rem;border:1px solid var(--line);background:#0c100f;font-size:.72rem;font-weight:700;letter-spacing:.12em}.hub-node.core{left:50%;top:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;display:grid;place-items:center;text-align:center;color:white;background:var(--teal);font-size:1.1rem}.shipper{left:0;top:18%}.carrier{right:0;top:18%}.customer{left:5%;bottom:10%}.driver{right:5%;bottom:10%}
.process-line{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.2rem}.process-line article{position:relative;padding:2.2rem 2rem;border-top:2px solid #d2d9d6}.process-line article:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--teal);top:-7px;left:2rem}.process-line strong{color:var(--teal);font-size:.72rem;letter-spacing:.18em}.process-line h3{font-size:1.4rem;margin:2rem 0 .7rem}.process-line p{color:#59625f;line-height:1.55}
.check-list,.stack-list{display:grid;gap:.6rem}.check-list p,.stack-list p{display:flex;align-items:center;gap:1rem;margin:0;padding:1.05rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.24);font-size:clamp(1rem,1.35vw,1.25rem)}.check-list span,.stack-list span{font-size:.7rem;letter-spacing:.16em;opacity:.66}.stack-list p{border-color:var(--line)}
.journey{display:grid;grid-template-columns:repeat(6,1fr);margin:3rem 0}.journey article{min-height:180px;padding:1.4rem 1rem;border-top:1px solid var(--teal);border-right:1px solid var(--line)}.journey span{color:var(--teal-bright);font-size:.7rem;letter-spacing:.16em}.journey h3{font-size:clamp(1rem,1.3vw,1.3rem);margin-top:5rem}.statement{font-size:clamp(1.2rem,2vw,2rem);color:#c5cecb;margin:0}
.tech-orbit{position:relative;min-height:500px}.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;background:var(--black);display:grid;place-items:center;color:white}.orbit-center svg{--logo-d:#fff;--logo-l:var(--teal);width:90px}.tech-orbit:before,.tech-orbit:after{content:"";position:absolute;border:1px solid rgba(15,118,110,.28);border-radius:50%;inset:12%}.tech-orbit:after{inset:27%}.orbit-item{position:absolute;min-width:130px;padding:.9rem;border:1px solid rgba(15,118,110,.25);background:#f3f5f4;font-size:.82rem;font-weight:650;line-height:1.35;text-align:center}.item-a{top:3%;left:40%}.item-b{top:45%;right:0}.item-c{bottom:2%;left:38%}.item-d{top:44%;left:0}
.control-board{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}.control-board article{padding:2rem;border:1px solid var(--line);background:#0a0d0c;min-height:250px}.control-board small{color:var(--teal-bright);letter-spacing:.16em}.control-board strong{display:block;font-size:1.6rem;margin:3.4rem 0 .8rem}.control-board p{color:var(--muted);line-height:1.55}
.parts-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.parts-list article{padding:1.5rem;border:1px solid rgba(15,118,110,.22)}.parts-list span{font-size:.68rem;color:var(--teal);letter-spacing:.15em}.parts-list h3{font-size:1.25rem;margin:1.6rem 0 .6rem}.parts-list p{font-size:.95rem;line-height:1.45;color:#59625f;margin:0}
.ecosystem{position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;grid-template-rows:1fr 1fr .9fr;gap:1rem;max-width:1100px;margin:1rem auto 0;width:100%}.eco-node,.eco-core{min-height:118px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-align:center}.eco-node small,.eco-core small{color:var(--muted);font-size:.72rem;font-weight:400;letter-spacing:0}.eco-core{grid-column:2;grid-row:1/3;background:var(--teal);border-color:var(--teal)}.eco-core svg{--logo-d:#fff;--logo-l:#fff;width:88px;color:white;margin-bottom:.8rem}.eco-core small{color:rgba(255,255,255,.75)}.eco-shipper{grid-column:1;grid-row:1}.eco-carrier{grid-column:3;grid-row:1}.eco-customer{grid-column:1;grid-row:2}.eco-driver{grid-column:3;grid-row:2}.eco-parts{grid-column:2;grid-row:3}
.commitment h2{font-size:clamp(3rem,6.2vw,7rem);max-width:1250px}.commitment .lead{color:rgba(255,255,255,.78)}.contact-slide h2{font-size:clamp(3.5rem,7vw,7.5rem)}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin-top:1.5rem}.contact-grid a{display:flex;flex-direction:column;gap:.55rem;padding:1.4rem;border:1px solid var(--line);color:white;text-decoration:none;background:rgba(255,255,255,.03);transition:.25s}.contact-grid a:hover{border-color:var(--teal);background:rgba(15,118,110,.12);transform:translateY(-3px)}.contact-grid small{color:var(--teal-bright);letter-spacing:.14em}.contact-grid strong{font-size:1.05rem}.contact-grid span{color:var(--muted)}.email-link{display:inline-block;margin-top:1.2rem;color:white;text-underline-offset:5px}
.section-nav{position:fixed;z-index:30;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.25rem;padding:.35rem;border:1px solid var(--line);background:rgba(5,7,6,.7);backdrop-filter:blur(16px);border-radius:999px}.section-nav button{border:0;background:transparent;color:#7f8985;font-size:.68rem;padding:.55rem .68rem;cursor:pointer}.section-nav button.is-current{color:white;background:rgba(15,118,110,.28);border-radius:999px}.controls{position:fixed;z-index:31;right:var(--pad);bottom:24px;display:flex;gap:.5rem}.controls button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(5,7,6,.72);color:white;cursor:pointer;backdrop-filter:blur(16px);transition:.2s}.controls button:hover{border-color:var(--teal);background:var(--teal)}.controls button:disabled{opacity:.3;cursor:default}
dialog{max-width:520px;border:1px solid rgba(15,118,110,.35);background:#0a0d0c;color:white;padding:2.4rem;border-radius:2px;box-shadow:0 30px 100px rgba(0,0,0,.55)}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}dialog h2{font-size:2rem;letter-spacing:-.03em}dialog p,dialog li{color:#aeb6b3;line-height:1.6}dialog li{margin:.4rem 0}.dialog-close{position:absolute;right:1rem;top:1rem;border:0;background:none;color:white;font-size:1.5rem;cursor:pointer}kbd{display:inline-block;min-width:28px;text-align:center;padding:.15rem .35rem;border:1px solid #35413d;border-radius:4px;color:white}
/* A pílula "role para ver mais" existe no HTML das três apresentações, mas
   TODAS as regras dela vivem dentro do @media de 900px. Sem esta linha, acima
   de 900px ela não recebe estilo nenhum e renderiza como bloco solto no topo
   da página — foi assim que subiu em 03/set e ninguém viu.
   Esconder por padrão; o @media abaixo é quem decide mostrar. */
.rola-aviso{display:none}

@media(max-width:900px){.topbar{height:60px}.brand .lockup{height:24px}.topbar-meta #sectionLabel{display:none}.slide-content{justify-content:flex-start;overflow-y:auto;padding-top:6.3rem;padding-bottom:8rem}.split{grid-template-columns:1fr;gap:2rem}.hero-mark{width:80vw;right:-24vw;top:8vh}.pain-grid,.benefit-grid,.control-board,.contact-grid{grid-template-columns:1fr 1fr}.process-line{grid-template-columns:1fr 1fr}.journey{grid-template-columns:repeat(3,1fr)}.hub-diagram,.tech-orbit{min-height:380px}.section-nav{display:none}.controls{right:1rem;bottom:1rem}.btn-tela,.btn-ajuda{display:none}.ecosystem{grid-template-columns:1fr 1fr;grid-template-rows:auto}.eco-core{grid-column:1/3;grid-row:1}.eco-shipper,.eco-carrier,.eco-customer,.eco-driver{grid-column:auto;grid-row:auto}.eco-parts{grid-column:1/3;grid-row:auto}.topbar{padding:0 1rem}}
@media(max-width:600px){h1{font-size:clamp(2.8rem,14vw,4.6rem)}h2{font-size:clamp(2.25rem,11vw,3.6rem)}.lead{font-size:1rem}.pain-grid,.benefit-grid,.control-board,.contact-grid,.parts-list{grid-template-columns:1fr}.pain-grid article,.benefit-grid article{min-height:auto}.process-line{grid-template-columns:1fr}.journey{grid-template-columns:1fr 1fr}.journey article{min-height:115px}.journey h3{margin-top:2.7rem}.hub-diagram{min-height:330px}.hub-node.core{width:115px;height:115px}.hub-node{font-size:.62rem;padding:.7rem}.tech-orbit{transform:scale(.88);margin:-1rem}.contact-slide .slide-content{padding-bottom:6rem}.contact-grid a{padding:1rem}.brand span{font-size:.65rem}.pdf-download{padding:.48rem .6rem;font-size:.56rem}.topbar-meta{display:none}}
@media(prefers-reduced-motion:reduce){.slide,.contact-grid a{transition:none}}

/* ── Aviso de rolagem · só no celular ──────────────────────────────────────
   Cinco dos seis primeiros slides passam da altura da tela no celular, e o
   conteúdo corta no meio de uma frase sem nada indicar que há mais abaixo.
   Quem não sabe que rola aperta a seta e perde metade do slide.

   O degradê e a seta aparecem só quando `data-rola` está no conteúdo, e somem
   assim que a pessoa rola — não faz sentido continuar avisando depois disso. */
@media(max-width:900px){
  .slide-content{position:relative}
  .slide-content[data-rola]:after{
    content:"";position:fixed;left:0;right:0;bottom:0;height:120px;
    pointer-events:none;z-index:4;
    background:linear-gradient(transparent,var(--fade,#050706) 88%);
  }
  .slide-light .slide-content[data-rola]:after{--fade:#f3f5f4}
  .slide-teal  .slide-content[data-rola]:after{--fade:var(--teal)}

  .rola-aviso{
    position:fixed;left:50%;bottom:74px;z-index:5;translate:-50% 0;
    display:none;align-items:center;gap:.4rem;
    padding:.4rem .75rem;border-radius:999px;
    border:1px solid var(--line);background:rgba(5,7,6,.72);
    color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.14em;
    backdrop-filter:blur(12px);
    animation:respira 1.9s var(--ease) infinite;
  }
  .slide-content[data-rola] ~ .rola-aviso,
  .rola-aviso.on{display:flex}
  /* a pílula é irmã do deck, não filha do slide — o seletor descendente não
     casaria. A classe vem do script, espelhando o fundo do slide ativo. */
  .rola-aviso.claro{border-color:rgba(16,19,18,.2);background:rgba(243,245,244,.85);color:var(--ink)}
  .rola-aviso.teal {border-color:rgba(255,255,255,.4);background:rgba(15,118,110,.85);color:#fff}
  /* translate e não transform: o transform aqui já carrega a centralização,
     e animar ele apagaria o translateX(-50%) */
  @keyframes respira{0%,100%{translate:-50% 0}50%{translate:-50% 5px}}
  @media(prefers-reduced-motion:reduce){.rola-aviso{animation:none}}
}

/* ══════════════════════════════════════════════════════════════════════
   05/set · classes que o HTML usava e o CSS não tinha
   ──────────────────────────────────────────────────────────────────────
   .nota, .socios e .assinatura-log estavam em uso na LOG desde ontem sem
   uma linha de estilo. Texto sem estilo continua LEGÍVEL — por isso o
   conferidor passou e o olho não pegou. O slide de contato da Log estava
   com os três telefones como links crus.
   Mesma família do defeito do .rola-aviso: quem confere tem que comparar
   as classes usadas contra as definidas, não só olhar a tela. */

/* rodapé de ressalva · ancora no pé do slide, não logo abaixo do bloco */
.nota{
  margin:auto 0 0; padding-top:1.1rem;
  border-top:1px solid var(--line);
  color:var(--muted); font-size:clamp(.82rem,1vw,.95rem); line-height:1.5;
  max-width:900px;
}
.slide-light .nota{border-color:rgba(16,19,18,.14); color:#53605c}
.slide-teal  .nota{border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.82)}

/* três contatos do fecho · mesma caixa da .contact-grid */
.socios{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin-top:clamp(1.4rem,3.4vh,2.2rem)}
.socios a{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1rem,2.4vh,1.4rem);border:1px solid var(--line);color:inherit;text-decoration:none;background:rgba(255,255,255,.03);transition:.25s}
.socios a:hover{border-color:var(--teal);background:rgba(15,118,110,.14);transform:translateY(-3px)}
.socios strong{font-size:1.05rem}
.socios span{color:var(--muted);font-variant-numeric:tabular-nums}
.slide-light .socios a{background:rgba(16,19,18,.03)}

/* assinatura da capa */
.assinatura-log{margin:clamp(1.4rem,3.4vh,2.2rem) 0 0;font-size:.72rem;font-weight:700;letter-spacing:.22em;color:var(--white)}
.assinatura-log span{color:var(--teal-bright);font-weight:400;letter-spacing:.12em}

/* o número que carrega o slide sozinho */
.numerao{margin:0 0 clamp(1rem,2.6vh,1.8rem);font-size:clamp(2.4rem,5.2vw,4.6rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.numerao span{display:block;margin-top:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--teal-bright)}
.slide-teal .numerao span{color:rgba(255,255,255,.8)}

/* estatísticas da capa · caixa da control-board sem a altura de cartão */
.stat-board{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.4rem,3.4vh,2.2rem);max-width:1100px}
.stat-board article{padding:clamp(1rem,2.4vh,1.35rem);border:1px solid var(--line);background:#0a0d0c}
.stat-board small{display:block;color:var(--teal-bright);font-size:.68rem;font-weight:700;letter-spacing:.16em}
.stat-board strong{display:block;margin-top:.55rem;font-size:clamp(.95rem,1.2vw,1.1rem);font-weight:400;color:var(--muted)}

/* ── ritmo vertical que responde à ALTURA ────────────────────────────
   O deck foi desenhado em 1080p e tinha alturas fixas em px. Num notebook
   de 768 o conteúdo passava da tela sem rolagem — em desktop o
   .slide-content não rola de propósito. Cada clamp abaixo devolve o MESMO
   valor em 1080 e encolhe só abaixo disso. Conferido com o conferir.mjs
   nos três decks. */
@media(min-width:901px){
  h1{margin-bottom:clamp(1rem,3vh,2rem)}
  .control-board{margin-top:clamp(1.2rem,3.55vh,2.4rem)}
  .control-board article{min-height:clamp(160px,23vh,250px);padding:clamp(1.2rem,2.96vh,2rem)}
  .control-board strong{margin:clamp(1.6rem,5.05vh,3.4rem) 0 .8rem}
  .check-list{gap:clamp(.35rem,.9vh,.6rem)}
  .check-list p{padding:clamp(.62rem,1.56vh,1.05rem) 1.2rem}
  .journey{margin:clamp(1.4rem,4.45vh,3rem) 0}
  .journey article{min-height:clamp(112px,16.7vh,180px);padding:clamp(.9rem,2.1vh,1.4rem) 1rem}
  .journey h3{margin-top:clamp(2.2rem,7.4vh,5rem)}

  /* Sete etapas numa grade de seis deixavam a última sozinha na segunda
     linha e dobravam a altura. Fluxo em coluna põe qualquer quantidade
     numa faixa só — que é o que um processo pede. */
  .journey{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none}
}

/* ── 1366×768 é o MESMO 16:9 de 1920×1080 ────────────────────────────
   Se cabe em 1080 tem que caber em 768: muda o tamanho da moldura, não a
   proporção. O que quebrava eram os valores que NÃO acompanhavam —
   `rem` fixo e pisos de clamp altos demais, que param de encolher no meio
   do caminho e empurram o conteúdo para fora.
   Regra daqui pra frente: medida vertical neste deck é vh (com piso baixo
   só pra tela muito curta), nunca rem solto. */
@media(min-width:901px){
  .slide-content{padding-top:clamp(5.4rem,15vh,10rem);padding-bottom:clamp(4.6rem,12vh,8.5rem)}
  .hero-content{padding-bottom:clamp(5.4rem,14vh,10rem)}
  .eyebrow{margin-bottom:clamp(.6rem,1.5vh,1.1rem)}
  .nota{padding-top:clamp(.6rem,1.5vh,1.1rem)}
  .assinatura-log{margin-top:clamp(.9rem,3.4vh,2.2rem)}
}

/* ── quebra de título igual em qualquer resolução ────────────────────
   `max-width:1050px` fixo com fonte em vw: em 1920 o título cabia em 2
   linhas, em 1366 quebrava em 3 e crescia 93px — mais alto na tela MENOR.
   Em `em` a largura acompanha a própria fonte: mesma contagem de
   caracteres por linha, mesma quebra, sempre.
   1050px ÷ 115.2px (h1 em 1920) = 9.11em · ÷ 92.8px (h2) = 11.31em */
h1{max-width:9.11em}
h2{max-width:11.31em}

/* celular · o que eu criei hoje também precisa desmontar em coluna */
@media(max-width:600px){
  .socios,.stat-board{grid-template-columns:1fr}
  .numerao{font-size:clamp(2rem,10vw,2.8rem)}
}

/* ── o corpo do texto obedece à MENOR dimensão ───────────────────────
   Faltava a última peça. Acima de ~1694px de largura o h1 bate no teto de
   7.2rem e para de crescer: em 1920 ele ocupa 6.0vw, em 1366 ocupa 6.8vw.
   O tipo é proporcionalmente MAIOR na tela menor — por isso só ela
   estourava, com o mesmo conteúdo e a mesma proporção 16:9.
   `min(vw, vh)` faz o corpo respeitar a dimensão que está apertando.
   Os valores de 1920×1080 não mudam: lá quem manda continua sendo o teto. */
@media(min-width:901px){
  h1{font-size:clamp(3rem,min(6.8vw,10.7vh),7.2rem)}
  h2{font-size:clamp(2.5rem,min(5vw,8.6vh),5.8rem)}
  .check-list p,.stack-list p{font-size:clamp(1rem,min(1.35vw,1.8vh),1.25rem)}
}

/* celular · capa ancorada embaixo não rola quando o conteúdo passa da tela */

/* ── texto pequeno também escala com a moldura ───────────────────────
   Medido com sonda nas duas telas: em 1366×768 tudo tem de medir 0,711 do
   que mede em 1920×1080. Rótulo, número grande e rodapé davam 0,88 · 0,98 ·
   0,83 — cada um empurrando alguns pixels para fora.
   Conversão: `vh` = (px em 1080) ÷ 10,8. Assim 1080 não muda uma linha. */
@media(min-width:901px){
  .numerao             {font-size:clamp(1.8rem,min(5.2vw,6.815vh),4.6rem)}
  .journey span        {font-size:clamp(.56rem,1.037vh,.7rem)}
  .check-list span     {font-size:clamp(.56rem,1.037vh,.7rem)}
}

/* diagrama do hub · os nós já se posicionam em %, só a moldura e o círculo
   central estavam em px e não acompanhavam a tela */
@media(min-width:901px){
  .hub-diagram{min-height:clamp(280px,37vh,460px)}
  .hub-node{padding:clamp(.6rem,1.5vh,1rem) clamp(.7rem,1.8vh,1.2rem)}
  .hub-node.core{width:clamp(104px,13.4vh,160px);height:clamp(104px,13.4vh,160px)}
}

/* Títulos da LOG e da PARTS são mais longos que os da GROUP: com a caixa de
   11.31em cada metade do título quebrava de novo e virava 4 linhas — 382px
   de 1080 só de título. A GROUP fica como está: composição já aprovada. */
.deck-largo h2{max-width:14em}

/* ── barra de progresso ──────────────────────────────────────────────
   No celular o contador `01 / 14` some junto com a .topbar-meta, e a
   pessoa não sabe se falta muito. Dois pixels no topo resolvem em
   qualquer tela sem tirar espaço de nada. */
.progresso{position:fixed;z-index:40;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.12)}
.progresso span{display:block;height:100%;width:0;background:var(--teal-bright);
  transition:width .42s var(--ease)}
.progresso.on-light{background:rgba(16,19,18,.12)}
.progresso.on-light span{background:var(--teal)}
.progresso.on-teal{background:rgba(255,255,255,.26)}
.progresso.on-teal span{background:#fff}
@media(prefers-reduced-motion:reduce){.progresso span{transition:none}}

/* texto que só o leitor de tela recebe · anuncia a troca de slide, que os
   slides ficando todos no DOM não deixam perceber sozinho */
.anuncio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── capa no celular ─────────────────────────────────────────────────
   `justify-content:flex-end` ancorava embaixo, mas quando o conteúdo
   passava da tela o excesso saía por CIMA e ficava inalcançável. Trocar por
   flex-start resolveu o corte e criou um vazio embaixo. Margem automática
   no primeiro filho dá as duas coisas: encosta embaixo quando sobra espaço
   e rola normalmente quando falta. */
@media(max-width:900px){
  .hero-content{justify-content:flex-start}
  .hero-content > :first-child{margin-top:auto}
}

/* atalho para as outras duas apresentações, no slide de contato */
.ponte{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(1.1rem,2.6vh,1.7rem) 0 0}
.ponte a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;
  border:1px solid var(--line);color:inherit;text-decoration:none;
  font-size:clamp(.56rem,min(.72vw,1.05vh),.68rem);font-weight:700;letter-spacing:.14em;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.ponte a:hover{border-color:var(--teal);background:rgba(15,118,110,.14)}
.ponte svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
.slide-light .ponte a{border-color:rgba(16,19,18,.18)}

/* ══════════════════════════════════════════════════════════════════════
   ENTRADA DO CONTEÚDO · o que separa "slide" de "apresentação"
   ──────────────────────────────────────────────────────────────────────
   Antes, o slide inteiro aparecia de uma vez, como um bloco. Aqui o olho é
   conduzido: rótulo, título, corpo e depois os cartões, com 70ms entre um e
   outro. São 400 milissegundos que mudam a percepção inteira.

   Duas regras que valem mais que os valores:

   1 · Só na ENTRADA. Slide que sai não anima nada — animação de saída
       atrasa a próxima e quem apresenta sente o deck pesado.

   2 · Nada aqui pode encostar em `transform` que carregue LAYOUT. A
       transição de slide já usa translateX(3%) no .slide; estas animações
       vivem nos FILHOS, que são outros elementos. Se um dia alguém puser
       condensação de texto em scaleX, este bloco apaga — está no padrão
       [[padrao_apresentacao_web_agboost]]. */

@keyframes dld-entra{
  from{opacity:0; transform:translateY(16px)}
  to  {opacity:1; transform:none}
}
@keyframes dld-sobe{
  from{opacity:0; transform:translateY(12px)}
  to  {opacity:1; transform:none}
}
@keyframes dld-risca{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 0 0 0)}
}
@keyframes dld-respira{
  from{transform:scale(1);    opacity:.72}
  to  {transform:scale(1.05); opacity:1}
}

/* nível 1 · os blocos diretos do slide */
.slide.is-active .slide-content > *{animation:dld-entra .58s var(--ease) both}
.slide.is-active .slide-content > *:nth-child(1){animation-delay:.05s}
.slide.is-active .slide-content > *:nth-child(2){animation-delay:.12s}
.slide.is-active .slide-content > *:nth-child(3){animation-delay:.19s}
.slide.is-active .slide-content > *:nth-child(4){animation-delay:.26s}
.slide.is-active .slide-content > *:nth-child(5){animation-delay:.33s}
.slide.is-active .slide-content > *:nth-child(6){animation-delay:.40s}

/* nível 2 · os itens dentro de uma grade entram em sequência.
   Nos slides de processo isso conta a história: as etapas aparecem na ordem
   em que acontecem, da esquerda para a direita, em vez de surgir prontas. */
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *{
  animation:dld-sobe .5s var(--ease) both
}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(1){animation-delay:.30s}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(2){animation-delay:.37s}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(3){animation-delay:.44s}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(4){animation-delay:.51s}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(5){animation-delay:.58s}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(6){animation-delay:.65s}
.slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                     .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *:nth-child(n+7){animation-delay:.72s}

/* a linha de tempo do processo se desenha em vez de já estar lá */
.slide.is-active .journey article{animation:dld-sobe .5s var(--ease) both, dld-risca .6s var(--ease) both}

/* o número que carrega o slide sozinho merece meio segundo a mais de atenção */
.slide.is-active .numerao{animation:dld-entra .72s var(--ease) both; animation-delay:.16s}

/* capa · o símbolo respira devagar atrás do título.
   Muito sutil de propósito: mais que isto vira tela de proteção. */
.slide.is-active .hero-mark{animation:dld-respira 9s var(--ease) infinite alternate}

@media(prefers-reduced-motion:reduce){
  .slide.is-active .slide-content > *,
  .slide.is-active :is(.control-board,.stat-board,.journey,.check-list,.stack-list,
                       .socios,.contact-grid,.pain-grid,.benefit-grid,.ponte) > *,
  .slide.is-active .journey article,
  .slide.is-active .numerao,
  .slide.is-active .hero-mark{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   IMPRESSÃO · o PDF sai daqui
   ──────────────────────────────────────────────────────────────────────
   Gerado com a folha de impressão, não com foto de cada slide: o texto sai
   VETORIAL — selecionável, pesquisável, e o arquivo fica uma fração do
   tamanho. Cada slide vira uma página de 1920×1080.

   Na tela os slides ficam empilhados no mesmo lugar, invisíveis, e as
   animações têm `both` — que mantém o estado inicial (opacidade 0) em quem
   ainda não entrou. Sem desligar isso aqui, o PDF sai em branco. */
@media print{
  html,body{height:auto; overflow:visible; background:#fff}
  /* A marca FICA. Escondendo a .topbar inteira, so a capa saia com o
     simbolo grande e as outras 10 paginas saiam sem logo nenhum — um PDF
     comercial tem de levar a marca em toda pagina.
     O que sai e o que so faz sentido na tela: o botao de baixar (ja se
     esta com o arquivo na mao) e o contador, que o JS preenche com o slide
     ATIVO e sairia repetido igual em todas as paginas. */
  .section-nav,.controls,.progresso,.rola-aviso,.pdf-download,
  .topbar-meta,#helpDialog,.anuncio,.ponte{display:none !important}
  .topbar{position:fixed; height:clamp(66px,9.6vh,100px); background:none}

  .deck{overflow:visible; height:auto}
  .slide{
    position:relative; inset:auto; visibility:visible !important; opacity:1 !important;
    transform:none !important; width:1920px; height:1080px;
    break-after:page; page-break-after:always; overflow:hidden;
  }
  .slide:last-child{break-after:auto; page-break-after:auto}
  .slide-content{height:1080px; max-width:none}

  /* animação com `both` congela o quadro inicial em quem não está ativo */
  *,*::before,*::after{animation:none !important; transition:none !important}

  /* fundo escuro só sai se o navegador imprimir fundo · o gerador manda
     printBackground, mas deixo explícito para impressão manual também */
  .slide-dark{background:#050706 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .slide-light{background:#f3f5f4 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .slide-teal{background:#0F766E !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ── cartão escuro manda na cor do próprio texto ─────────────────────
   `.control-board article` tem fundo #0a0d0c SEMPRE, em slide claro ou
   escuro. Num slide claro o <strong> herdava o `color:var(--ink)` do slide
   e virava preto sobre preto — o título do cartão sumia. Estava assim na
   PARTS 02 e 09 e em toda light da LOG.
   Nenhum teste de layout pega isto: contraste não é posição. Só apareceu
   quando olhei o PDF com os olhos. */
.control-board article,.stat-board article{color:var(--white)}
.control-board article p,.stat-board article p{color:var(--muted)}

/* ── a grade acompanha quantos cartões existem ───────────────────────
   `repeat(4,1fr)` com três cartões deixava a quarta coluna vazia e a
   composição torta à direita. Fluxo em coluna distribui qualquer
   quantidade pela largura toda, como já é na .journey. */
@media(min-width:901px){
  .control-board{grid-auto-flow:column; grid-auto-columns:1fr; grid-template-columns:none}
}

/* ── cada fundo tem a sua paleta ─────────────────────────────────────
   Estas cores foram escolhidas para o slide ESCURO e vinham sendo usadas
   nos três fundos. Medido pelo conferidor:
     · `h2 span` teal-bright sobre fundo teal ...... 1,33:1 · sumia
     · `.lead` cinza-claro sobre fundo claro ....... 1,54:1 · sumia
     · `.socios span` cinza sobre teal ............. 2,33:1
   O piso do WCAG para texto grande é 3:1. Abaixo disso não é decisão de
   design, é acidente. O `.eyebrow` já tinha tratamento para o teal — só
   ninguém tinha estendido para o resto. */
.slide-teal h1 span,.slide-teal h2 span{color:#fff}
.slide-teal .lead{color:rgba(255,255,255,.88)}
.slide-teal .journey span,.slide-teal .check-list span,.slide-teal .stack-list span,
.slide-teal .socios span,.slide-teal .numerao span,.slide-teal .statement{color:rgba(255,255,255,.86)}

.slide-light .lead{color:#53605c}
.slide-light .socios span{color:#53605c}
.slide-light .statement{color:#53605c}

/* ══════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA · subida em 05/set
   ──────────────────────────────────────────────────────────────────────
   Medido antes, em 1920×1080: texto de cartão 16px (1,48% da altura),
   rótulo 14,4px, meta do topo 10,9px, logo com 28px de altura.

   Referência de apresentação: o mínimo recomendado do PowerPoint é 18pt
   num quadro de 7,5in — ou seja 3,3% da altura, que dá 36px em 1080. Um
   deck web não precisa chegar lá, porque é lido de perto, mas 1,5% é
   pequeno demais até para leitura em notebook.

   Alvo adotado: corpo em 1,76%, apoio em 2,4%, rótulo em 1,57%, logo em
   3,5%. Tudo em vh para continuar proporcional em qualquer tela — a régua
   é sempre (px desejado em 1080) ÷ 10,8. */
@media(min-width:901px){
  .brand .lockup      {height:clamp(24px,3.5vh,38px)}
  .brand svg          {width:clamp(30px,4.2vh,46px); height:auto}
  .topbar-meta        {font-size:clamp(.62rem,1.2vh,.82rem)}
  .pdf-download       {font-size:clamp(.56rem,1.1vh,.75rem)}

  .eyebrow            {font-size:clamp(.68rem,min(.9vw,1.57vh),1.06rem)}
  .lead               {font-size:clamp(1.05rem,min(1.6vw,2.4vh),1.63rem)}
  .nota               {font-size:clamp(.76rem,1.57vh,1.06rem)}

  .control-board strong{font-size:clamp(1.15rem,2.4vh,1.63rem)}
  .control-board small {font-size:clamp(.8rem,1.76vh,1.19rem)}
  .control-board p     {font-size:clamp(.86rem,1.76vh,1.19rem)}

  .check-list p,.stack-list p{font-size:clamp(1rem,min(1.35vw,2.13vh),1.44rem)}
  .check-list span,.stack-list span,.journey span{font-size:clamp(.62rem,1.3vh,.88rem)}
  .journey h3         {font-size:clamp(.9rem,min(1.3vw,2.13vh),1.44rem)}

  .socios strong      {font-size:clamp(.95rem,1.76vh,1.19rem)}
  .socios span        {font-size:clamp(.88rem,1.76vh,1.19rem)}
  .contact-grid strong{font-size:clamp(.95rem,1.76vh,1.19rem)}
  .contact-grid span,.contact-grid small{font-size:clamp(.82rem,1.6vh,1.08rem)}

  .stat-board small   {font-size:clamp(.62rem,1.3vh,.88rem)}
  .stat-board strong  {font-size:clamp(.88rem,min(1.2vw,1.94vh),1.31rem)}
  .assinatura-log     {font-size:clamp(.66rem,1.3vh,.88rem)}
  .numerao span       {font-size:clamp(.62rem,1.3vh,.88rem)}
  .hub-node           {font-size:clamp(.66rem,1.3vh,.88rem)}
  .hub-node.core      {font-size:clamp(.92rem,1.94vh,1.31rem)}
}

/* ── o vazio embaixo ─────────────────────────────────────────────────
   Medido: a sobra no pé variava de 86px a 375px entre os slides da mesma
   apresentação. Nos que não têm rodapé de ressalva, o conteúdo caía no
   topo e um terço da tela ficava vazio.
   O título continua ancorado na mesma linha em todos — isso é o que evita
   o título pular de slide para slide, e é decisão antiga do deck. O que
   muda é o bloco de baixo: ele passa a se distribuir na faixa que sobra em
   vez de se amontoar em cima.

   Por que padding e não margin: `margin-block:auto` SUBSTITUI a margem, e
   com isso a distância mínima depois do título ia embora quando o espaço
   apertava. Padding não é consumido pela distribuição automática. */
@media(min-width:901px){
  .control-board,.stat-board,.journey,.check-list,.stack-list,.socios,
  .contact-grid,.pain-grid,.benefit-grid,.process-line,.hub-diagram{
    margin-block:auto;
  }
  .control-board{padding-top:clamp(1.2rem,3.55vh,2.4rem)}
  .journey      {padding-top:clamp(1.4rem,4.45vh,3rem); padding-bottom:0}
  .stat-board,.socios{padding-top:clamp(1.4rem,3.4vh,2.2rem)}
  .check-list,.stack-list{padding-top:clamp(.8rem,2vh,1.4rem)}
}

/* slide de contato em notebook baixo · lead + três contatos + ponte + rodapé
   é o slide mais cheio das três apresentações */
@media(min-width:901px) and (max-height:820px){
  .socios{padding-top:1.8vh; gap:.7rem}
  .socios a{padding:1.5vh}
  .ponte{margin-top:1.6vh}
  .ponte a{padding:.5rem .75rem}
}

/* O título do fecho é a frase mais longa das apresentações — em 1366 ele
   quebrava em 5 linhas e empurrava os contatos para cima da navegação.
   Na última página ele pode usar a largura toda: é o desfecho, não compete
   com nada ao lado. Só na LOG e na PARTS; a GROUP fica como aprovada. */

/* O título do fecho é a frase mais longa das apresentações — em 1366 ele
   quebrava em 5 linhas e empurrava os contatos para cima da navegação.
   Na última página ele pode usar a largura toda: é o desfecho, não compete
   com nada ao lado. Só na LOG e na PARTS; a GROUP fica como aprovada. */
.deck-largo .slide:last-child h2{max-width:20em}

/* navegação e botões acompanham o fundo do slide, como a barra do topo */
.section-nav.on-light{background:rgba(243,245,244,.82);border-color:rgba(16,19,18,.16)}
.section-nav.on-light button{color:#6b7472}
.section-nav.on-light button.is-current{color:#fff;background:var(--teal)}
.section-nav.on-teal{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.section-nav.on-teal button{color:rgba(255,255,255,.78)}
.section-nav.on-teal button.is-current{color:var(--teal);background:#fff}
.controls.on-light button{background:rgba(243,245,244,.85);border-color:rgba(16,19,18,.18);color:var(--ink)}
.controls.on-light button:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.controls.on-teal button{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
.controls.on-teal button:hover{background:#fff;color:var(--teal)}

/* Estes dois vinham como atributo `style=` dentro do arquivo de símbolos, e
   a CSP `style-src 'self'` bloqueia atributo style vindo do HTML: davam duas
   violações no console em TODA página, em produção, desde sempre.
   As propriedades de fonte do "GROUP" eram letra morta — ele já é vetor. */
.lockup-barra{fill:var(--logo-barra,#111)}
.lockup-group{fill:var(--logo-m,#9ca3af)}



/* ══════════════════════════════════════════════════════════════════════
   REGRAS DO WEB INTERFACE GUIDELINES · auditado em 05/set
   fonte: vercel-labs/web-interface-guidelines
   ────────────────────────────────────────────────────────────────────── */

/* Sem isto o navegador espera 300ms a cada toque para ver se vem um duplo
   toque de zoom. Num deck que se navega deslizando, esse atraso e sentido
   em cada slide. */
html{touch-action:manipulation}

/* O realce cinza que o iOS pinta sozinho em cada toque nao combina com
   nada aqui. Definido de proposito, nao removido por acaso. */
html{-webkit-tap-highlight-color:rgba(22,140,130,.18)}

/* Diz ao navegador que a interface e escura: barra de rolagem, campos
   nativos e menus de contexto passam a nascer escuros em vez de brancos. */
:root{color-scheme:dark}

/* Rolar dentro do dialogo de ajuda nao pode continuar rolando a pagina
   atras dele. */
dialog{overscroll-behavior:contain}

/* O viewport ja declara viewport-fit=cover: sem estas margens o conteudo
   passa por baixo do entalhe e do indicador inferior num celular moderno,
   principalmente deitado. */
.topbar{padding-left:max(var(--pad),env(safe-area-inset-left));
        padding-right:max(var(--pad),env(safe-area-inset-right))}
.slide-content{padding-left:max(var(--pad),env(safe-area-inset-left));
               padding-right:max(var(--pad),env(safe-area-inset-right))}
.section-nav{bottom:max(24px,env(safe-area-inset-bottom))}
.controls{bottom:max(24px,env(safe-area-inset-bottom));
          right:max(var(--pad),env(safe-area-inset-right))}

/* ── voltar para as três apresentações ───────────────────────────────
   Fica no grupo de controles, não ao lado do logo: aqui lê como ação, e
   este canto já existe no desktop E no celular — que é por onde o link
   circula. Some sozinho em tela cheia junto com o resto da moldura.
   O ícone é uma grade de quatro, não uma casinha: o destino é a tela de
   escolher entre as apresentações, não uma home institucional.
   Separado do par de setas por uma linha, porque navegar ENTRE slides e
   sair PARA outra apresentação são coisas diferentes. */
/* classes explicitas nos controles · antes o @media escondia por POSICAO
   (nth-child 3 e 4) e qualquer botao novo desalinhava o que sumia */
.btn-anterior,.btn-proximo{}
.btn-home{margin-right:.35rem; position:relative}
.btn-home:after{content:"";position:absolute;right:-.35rem;top:22%;bottom:22%;
  width:1px;background:var(--line)}
.btn-home svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.controls.on-light .btn-home:after{background:rgba(16,19,18,.2)}
.controls.on-teal .btn-home:after{background:rgba(255,255,255,.32)}

/* ── tela cheia ──────────────────────────────────────────────────────
   O F limpa o pé da tela: navegação de seções e botões saem. O topo e a
   barra de progresso ficam — continuam dizendo onde a pessoa está, e não
   atrapalham quem projeta.
   Sem cronômetro. Sumiço por tempo ocioso foi testado e descartado: some
   enquanto se lê um slide e volta ao virar, e o resultado pisca. */
body.tela-cheia .section-nav,
body.tela-cheia .controls{opacity:0; pointer-events:none}
.section-nav,.controls{transition:opacity .35s var(--ease)}
@media(prefers-reduced-motion:reduce){.section-nav,.controls{transition:none}}

/* ── marca em cada página do PDF ─────────────────────────────────────
   Elemento invisível na tela, injetado em cada slide pelo gerar-pdf.mjs.
   Existe porque o Chrome imprime um `position:fixed` só na PRIMEIRA
   página: com a marca vivendo na .topbar, o PDF saía com o símbolo na capa
   e mais dez páginas sem logo nenhum. Um PDF comercial leva a marca em
   toda página. */
.marca-impressa{display:none}
@media print{
  .marca-impressa{
    display:block; position:absolute; z-index:9;
    top:clamp(30px,4.4vh,46px); left:var(--pad);
    height:clamp(22px,3.1vh,34px); width:auto;
    --logo-d:var(--white); --logo-l:var(--teal); --logo-m:var(--muted);
  }
  .slide-light .marca-impressa{--logo-d:var(--ink); --logo-l:var(--teal); --logo-m:#6b7280}
  .slide-teal  .marca-impressa{--logo-d:#fff; --logo-l:#fff; --logo-m:rgba(255,255,255,.85)}
}

/* Lema da capa da LOG · vem do pptx do Dener e tinha ficado de fora.
   Sem atributo `style` inline: a CSP `style-src 'self'` bloqueia. */
.lema{margin:clamp(.5rem,1.4vh,.9rem) 0 0;color:var(--muted);
  font-size:clamp(.58rem,1.15vh,.72rem);font-weight:700;letter-spacing:.24em}