/* 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;
}
@font-face{
  font-family:'InterVar';
  src:url('./fontes/InterVariable-Italic.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:block;
}

: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,5vw,5.5rem)
}
*{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:74px;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;max-width:1050px;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;max-width:1050px}.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}
@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}.hero-content{justify-content:flex-end}.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}.controls button:nth-child(3),.controls button:nth-child(4){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}}
}