/* ── hero seda + celular (padrão da Home do site Tiix: silk-phone) ──
   Wrap 100vh SEM overflow:hidden — o vídeo da mão pode ultrapassar a base.
   O .join-phone-hero interno tem overflow:hidden p/ o shader não vazar. */
.join .page-header{position:absolute;inset:0 0 auto;z-index:10}
/* nav escura sobre o hero claro em qualquer largura (era só desktop) */
.join .page-header--light{color:var(--red)}
.join .page-header--light .page-logo{filter:none}
.join-hero-wrap{
  position:relative;
  height:100vh;
  height:100svh;
  /* dvh por último (pedido do Lucas 2026-07-28): no Safari iOS a barra de
     endereço soma/some sozinha (autoplay, primeiro scroll) — com só svh
     (fixo no tamanho "com barra"), assim que a barra some o viewport real
     fica maior que o hero, e a seção seguinte "vaza" por baixo dele bem
     no começo do scroll (parecia o celular encolhendo pra debaixo do
     texto). dvh acompanha o viewport visível em tempo real. */
  height:100dvh;
}
/* linha fina visível entre o fim do hero pinado (190vh no desktop) e a
   seção seguinte (pedido do Lucas 2026-07-28) — arredondamento de
   sub-pixel no fim do pin/sticky deixa uma fresta de 1px. Como as duas
   áreas são vermelho da mesma família, um overlap negativo cobre a
   fresta sem gerar diferença visível. */
.join .strategy{margin-top:-2px}
/* Mesma fresta, agora entre as seções de baixo (pedido do Lucas 2026-08-06:
   "uma linha entre as sessões quando tem responsividade menor").
   Por que só em largura menor: o `body` é VERMELHO — é ele que pinta o hero e a
   jornada, que têm fundo transparente. Acima de 768px as seções são 100svh e
   caem em pixel inteiro; abaixo disso passam a ter altura de CONTEÚDO e caem em
   fracionário (medi a .tx com 757,328px). O arredondamento abre 1px entre duas
   seções BRANCAS e o vermelho do body vaza por ali, virando um risco.
   O overlap negativo tapa a fresta; 1px não muda nada visualmente porque a
   seção de cima termina em área chapada. */
.join .tx,
.join .jornada{margin-top:-1px}
/* uma seção = uma tela, igual às de baixo. Só no desktop: no mobile os cards
   empilham e a altura fixa deixaria vão morto. O hero fica de fora — ele é a
   pista de 190vh do scroll pinado. */
@media (min-width:768px){
  .join .strategy{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}
.join-phone-hero{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#fbf6f5;
}
/* seda/overlay escuros ficam fora em qualquer largura (pedido do Lucas
   2026-07-28: hero claro igual ao desktop também no mobile) — quem pinta
   o fundo agora é a camada .jp-grad logo abaixo. */
.jp-silk,.jp-overlay{display:none}
/* camada de fundo claro, sempre visível (antes só existia no desktop):
   no desktop o JS reescreve seu background a cada tick de scroll (ver
   timeline() em junte-se.html); no mobile fica parado nesse tom claro. */
.jp-grad-zone{position:absolute;inset:0;z-index:1;pointer-events:none}
.jp-grad{position:sticky;top:0;height:100%;background:#fbf6f5}
.jp-content{
  position:absolute;
  top:0;right:0;bottom:0;left:46%;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:24px;
  text-align:center;
  padding:0 clamp(24px,5vw,76px) 0 0;
  color:#fff;
}
.jp-content h1{
  margin:0;
  max-width:14ch;
  font-size:clamp(38px,4.2vw,64px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.02em;
}
.jp-content p{
  margin:0;
  max-width:30rem;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.6;
  font-weight:300;
  color:rgba(255,255,255,.7);
}
.jp-content h1,.jp-content p{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.jp-content p{transition-delay:140ms}
.jp-content.is-ready h1,.jp-content.is-ready p{opacity:1;transform:translateY(0)}
.jp-content.is-ready p{opacity:1}
.jp-scroll-cue{display:none}
.jp-scroll-target{display:block;position:relative;top:-2px}
/* ── celulares 3D (three.js, js/tiix-phones-3d.js) dentro do hero ──
   Full-bleed: a cena pinta o fundo light (silk próprio) e a sombra dos
   celulares tem espaço sem cortar; a câmera é deslocada no init p/ os
   celulares ficarem à esquerda. !important porque o script aplica
   position:relative e height:100vh inline no host. */
.tiix-phones-3d{
  position:absolute !important;
  height:auto !important;
  inset:0;
  z-index:2;
  /* ligada também no mobile (pedido do Lucas 2026-07-28) — antes era
     display:none abaixo de 768px e o fallback plano em CSS assumia; a cena
     3D roda em qualquer largura (o script já define a altura do host via
     JS), então o gate por viewport saiu daqui. */
  display:block;
  pointer-events:none;
}
/* .tiix-phones dobrado p/ vencer o display:flex do bloco base abaixo — a
   cena 3D substitui esse fallback em qualquer largura agora. */
.tiix-phones.tiix-phones--hero{display:none}
@media (min-width:768px){
  /* animação amarrada ao scroll: o wrap vira a pista e o visual do hero
     fica pinado; o host 3D cobre a pista inteira (inset:0) — é da altura
     dele que o script tira o progresso 0→1. Era 260vh; reduzido a pedido
     do Lucas 2026-07-29 — saída do texto/celulares/seção estava lenta
     (a pista mais curta acelera toda a coreografia proporcionalmente,
     já que os cortes em timeline() no HTML são frações 0→1 desse valor). */
  .join .join-hero-wrap{height:190vh}
  /* sticky cria stacking context: o hero (texto) sobe p/ z3 acima do canvas
     (host z2) e fica transparente — quem pinta o fundo light é a cena */
  .join .join-phone-hero{position:sticky;top:0;height:100svh;z-index:3;background:transparent}
  /* overflow-x:hidden global (pages.css) quebra position:sticky; clip
     corta igual sem criar scroll container — escopado só a esta página */
  html:has(body.join){overflow-x:clip}
  body.join{overflow-x:clip}
  /* tempo 2 (scroll): degradê da home sobe do rodapé; texto e botão
     entram por cima dele, guiados pela timeline (opacity/transform inline) */
  /* texto ENTRA vermelho (sobre o fundo claro); o JS interpola p/ branco
     conforme o degradê vermelho o alcança */
  .join .jp-content{
    left:0;
    color:var(--red);
    justify-content:flex-end;
    align-items:flex-start;
    text-align:left;
    gap:14px;
    padding:0 clamp(40px,8vw,120px) clamp(28px,4vh,48px);
  }
  .join .jp-content h1{
    width:min(100%,742px);
    max-width:none;
    font-size:54px;
  }
  @media (min-width:840px){
    .join .jp-content h1{white-space:nowrap}
  }
  @media (min-width:840px) and (max-width:1024px){
    .join .jp-content{padding-right:40px;padding-left:40px}
    .join .jp-content h1{width:100%}
  }
  .join .jp-content p{max-width:42rem}
  .join .jp-content p{color:rgba(135,19,18,.75)}
  .join .jp-cta{display:inline-flex;margin-top:10px;pointer-events:auto}
  /* correção rápida (pedido do Lucas 2026-07-28): a timeline de scroll que
     ia interpolar cor do texto + subir o degradê vermelho (ver comentários
     acima) nunca foi implementada — a regra antiga deixava h1/p/cta em
     opacity:0 pra sempre, um bug visível (nada aparecia no desktop). Por
     ora título/descrição/botão só ficam visíveis de imediato, igual ao
     fallback de reduced-motion logo abaixo. A timeline completa (gradiente
     + interpolação de cor) fica pendente como tarefa maior à parte. */
  .join .jp-content h1,.join .jp-content p,.join .jp-cta{opacity:0}
}
/* botão do hero só existe no desktop */
.jp-cta{display:none}
/* reduced-motion: sem timeline de scroll — scrim estático + texto visível */
@media (prefers-reduced-motion:reduce){
  .join .jp-content h1,.join .jp-content p,.join .jp-cta{opacity:1 !important;transform:none !important}
  .join .jp-grad{background:#fbf6f5 !important}
}
/* ── 3 celulares (animação estilo C6) dentro do hero ──
   Central sobe → laterais saem de trás dele girando e abrem pros lados.
   No desktop foi substituído pela cena 3D acima; segue ativo no mobile. */
.tiix-phones--hero{
  position:absolute;
  top:0;bottom:0;left:0;
  width:54%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 0 24px;
  pointer-events:none;
}
.tiix-phones__stage{
  position:relative;
  width:min(560px,46vw);
  height:clamp(400px,66vh,640px);
  perspective:2400px;
  transform-style:preserve-3d;
}
.tph{
  position:absolute;top:50%;left:50%;
  width:clamp(150px,13.5vw,220px);
  aspect-ratio:300/640;
  background:linear-gradient(145deg,#54545b 0%,#2a2a2e 42%,#17171a 100%);
  border-radius:14%/6.6%;
  padding:2.6%;
  box-shadow:0 34px 70px -24px rgba(20,20,25,.45),0 0 0 1.4px rgba(0,0,0,.18) inset;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.tph__island{
  position:absolute;top:3.1%;left:50%;transform:translateX(-50%);
  width:30%;height:3.3%;min-height:15px;background:#000;
  border-radius:40px;z-index:5;
}
.tph__screen{
  width:100%;height:100%;
  border-radius:11.5%/5.4%;
  overflow:hidden;background:#fff;position:relative;
}

/* ---- tela recriada (Meus pagamentos) ---- */
.tscr{position:absolute;inset:0;display:flex;flex-direction:column;
  background:#fff;color:#1c1c1e;container-type:inline-size;
  font-family:'Outfit',system-ui,sans-serif}
.tscr__status{display:flex;justify-content:space-between;align-items:center;
  padding:6% 8% 2%;font-size:3.6cqw;font-weight:700;color:#000}
.tscr__icons{display:inline-flex;align-items:center;gap:1.5cqw;color:#000}
.tscr__icons svg{height:3cqw;width:auto;display:block;fill:#000}
.tscr__head{display:flex;align-items:center;justify-content:center;position:relative;
  padding:1% 8% 3%;font-size:5cqw;font-weight:700}
.tscr__chev{position:absolute;left:8%;font-size:6cqw;font-weight:400}
.tscr__body{flex:1;background:#F5F5F8;padding:5% 6%;overflow:hidden}
.tscr__title{font-size:5.4cqw;font-weight:900}
.tscr__sub{font-size:2.9cqw;color:#8a8f98;margin:1.2% 0 5%}
.tscr__cards{display:grid;grid-template-columns:1fr 1fr;gap:3.5%}
.tcard{background:#fff;border-radius:4cqw;padding:4.5% 5%}
.tcard__label{font-size:2.7cqw;color:#9aa0a8}
.tcard__row{display:flex;align-items:center;justify-content:space-between;margin-top:3%}
.tcard__num{font-size:6cqw;font-weight:900;letter-spacing:-.02em}
.tcard__badge{font-size:2.3cqw;font-weight:700;padding:1% 2.4%;border-radius:10cqw}
.tbadge--down{color:#e0453d;background:#fde6e5}
.tbadge--up{color:#17a866;background:#dff5ea}
.tchart{background:#fff;border-radius:5cqw;margin-top:4%;padding:7% 5% 5%;
  display:flex;flex-direction:column;align-items:center}
.tdonut{position:relative;width:46cqw;height:46cqw;border-radius:50%;
  background:conic-gradient(#2f6bff 0 43%,#e23b3b 43% 57%,#29c17f 57% 77%,
    #f2b53b 77% 85%,#7c4dff 85% 92%,#4db6ff 92% 100%);
  -webkit-mask:radial-gradient(circle 14.5cqw at 50% 50%,transparent 98%,#000 100%);
          mask:radial-gradient(circle 14.5cqw at 50% 50%,transparent 98%,#000 100%)}
.tdonut__c{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.tdonut__n{font-size:6.5cqw;font-weight:900}
.tdonut__t{font-size:2.8cqw;color:#9aa0a8}
.tlegend{width:100%;margin-top:6%;display:grid;grid-template-columns:1fr 1fr;
  gap:3.5% 5%;font-size:3cqw}
.tlg{display:flex;align-items:center;gap:4%;color:#4a4f57}
.tlg i{width:3cqw;height:3cqw;border-radius:50%;flex:0 0 auto}

/* ===== camadas 3D + coreografia ===== */
.tph--center{z-index:3;width:clamp(160px,14.5vw,236px)}
.tph--left,.tph--right{z-index:1}
.tph--center{transform:translate(-50%,-50%) translateZ(40px) translateY(155px);opacity:0;
  transition:transform 1.25s cubic-bezier(.19,1,.22,1),opacity .9s ease}
.tph--left{transform:translate(-50%,-50%) translateZ(-130px) rotateY(-152deg) scale(.9);opacity:0;
  transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.tph--right{transform:translate(-50%,-50%) translateZ(-130px) rotateY(152deg) scale(.9);opacity:0;
  transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.is-in .tph--center{
  transform:translate(-50%,-50%) translateZ(40px) translateY(0);opacity:1;transition-delay:.15s}
.is-in .tph--left{
  transform:translate(-50%,-50%) translateZ(-130px) translateX(-98%) rotateY(28deg) scale(.94);
  opacity:1;transition-delay:1.35s}
.is-in .tph--right{
  transform:translate(-50%,-50%) translateZ(-130px) translateX(98%) rotateY(-28deg) scale(.94);
  opacity:1;transition-delay:1.35s}
@media (prefers-reduced-motion:reduce){
  .tph--center,.tph--left,.tph--right{transition:none}
  .is-in .tph--center,.is-in .tph--left,.is-in .tph--right{transition-delay:0s}
}
/* a seção seguinte (silk zone clara) precisa cobrir os 64px de overflow do vídeo */
.join-silk-zone{z-index:3}
@media (prefers-reduced-motion:reduce){
  .jp-content h1,.jp-content p{opacity:1;transform:none;transition:none}
  .jp-scroll-cue{animation:none}
}
@media (max-width:767px){
  /* mesmo esquema claro do desktop (pedido do Lucas 2026-07-28): fundo
     claro (.jp-grad acima) + texto vermelho, não branco */
  /* faixa vermelha no fim do hero (pedido do Lucas 2026-07-28): a .strategy
     não tem cor própria (herda o vermelho do body.join só onde nada mais
     pinta por cima) — no trecho em que ela sobrepõe o hero (margin-top
     negativo, abaixo), o que estava atrás era o creme claro do hero, e o
     título branco da .strategy perdia contraste. Aqui a própria .jp-grad
     já nasce vermelha nesse trecho final, então o título já entra sobre
     vermelho antes mesmo da sobreposição — sem precisar mexer no palco 3D
     nem na .strategy. Fica bem acima do chevron (que some do jeito dele). */
  .join-hero-wrap{
    min-height:780px;
    --jp-mobile-top:clamp(168px,22svh,210px);
    --jp-mobile-bottom:clamp(150px,21svh,190px);
  }
  .jp-grad{background:#fbf6f5}
  .jp-content{
    left:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    align-content:stretch;
    justify-items:center;
    padding:max(98px,calc(env(safe-area-inset-top) + 82px)) 24px
      max(76px,calc(env(safe-area-inset-bottom) + 62px));
    text-align:center;
    color:var(--red);
    pointer-events:none;
  }
  .jp-content h1{
    grid-row:1;
    align-self:start;
    max-width:17ch;
    font-size:clamp(30px,8.2vw,42px);
    text-wrap:balance;
  }
  .jp-content p{
    position:static;
    grid-row:3;
    align-self:end;
    width:auto;
    max-width:36ch;
    margin:0 auto;
    font-size:clamp(15px,4.35vw,17px);
    line-height:1.48;
    color:rgba(135,19,18,.82);
    text-wrap:pretty;
  }
  /* O canvas deixa de ocupar a mesma área dos textos. A câmera continua
     animando normalmente, mas dentro de um palco central dedicado. */
  .tiix-phones-3d{
    top:var(--jp-mobile-top);
    right:0;
    bottom:var(--jp-mobile-bottom);
    left:0;
  }
  /* o script monta um wrapper sticky de 100vh dentro do host — correto no
     desktop, onde o host cobre a pista pinada de 190vh. No mobile o host é
     uma caixa recortada entre título e descrição, então esses 100vh jogavam
     a cena ~200px abaixo do palco: os celulares caíam em cima da descrição
     e sobrava um vazio embaixo do título. Aqui o wrapper preenche
     exatamente o palco. */
  .tiix-phones-3d>div{
    position:absolute !important;
    inset:0;
    height:100% !important;
  }
  .tiix-phones--hero{
    width:100%;
    top:auto;
    bottom:0;
    height:56%;
    padding:0 0 16px;
  }
  .tiix-phones__stage{width:92vw;height:clamp(300px,48vh,460px)}
  .tph{width:clamp(108px,26vw,170px)}
  .tph--center{width:clamp(120px,29vw,184px)}
  .is-in .tph--left{
    transform:translate(-50%,-50%) translateZ(-90px) translateX(-62%) rotateY(26deg) scale(.9)}
  .is-in .tph--right{
    transform:translate(-50%,-50%) translateZ(-90px) translateX(62%) rotateY(-26deg) scale(.9)}
  /* Aproxima a próxima seção sem alterar o palco usado pela câmera 3D
     (pedido do Lucas 2026-07-28: diminuir ainda mais o vazio entre a
     descrição e a seta — chevron e puxão da próxima seção sobem juntos,
     mesma distância entre eles, só mais perto do texto). */
  .join .strategy{
    position:relative;
    z-index:4;
    margin-top:0;
  }
  .jp-scroll-cue{
    position:absolute;
    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom));
    z-index:5;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--red);
    opacity:.58;
    transform:translateX(-50%);
    animation:jp-cue-breathe 1.9s ease-in-out infinite;
  }
  .jp-scroll-cue svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .jp-scroll-cue:focus-visible{outline:2px solid var(--red);outline-offset:2px;opacity:1}
}
@keyframes jp-cue-breathe{
  0%,100%{transform:translate(-50%,0);opacity:.42}
  50%{transform:translate(-50%,5px);opacity:.72}
}
@media (max-width:359px){
  /* O título passa a três linhas nas telas mais estreitas. O subtítulo
     acompanha a compensação vertical aplicada à câmera dos celulares. */
  .join-hero-wrap{min-height:820px}
  .jp-content{
    padding-inline:18px;
  }
  .jp-content h1{font-size:clamp(28px,8.5vw,34px)}
}
.join-silk-zone{
  position:relative;
  overflow:hidden;
  background:#fbf6f5;
}
.join-silk-zone>canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.dashboard--silk-story{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(32px,5vw,84px);
  padding:clamp(90px,10vh,132px) clamp(24px,5vw,76px);
  text-align:left;
}
.dashboard__copy h1,
.dashboard__copy h2{
  margin:0;
  font-size:clamp(40px,4.6vw,72px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.02em;
  max-width:12ch;
}
.hl-word{display:inline-block;white-space:nowrap}
.hl-ch{
  display:inline-block;
  opacity:0;
  filter:blur(12px);
  transform:translateY(.4em);
  will-change:transform,opacity,filter;
}
.dashboard--silk-story.is-revealed .hl-ch{
  animation:join-ch-in 1.1s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes join-ch-in{
  to{opacity:1;filter:blur(0);transform:translateY(0)}
}
.dashboard__copy p{
  margin:26px 0 0;
  max-width:31rem;
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.55;
  font-weight:300;
  color:rgba(41,52,61,.72);
  opacity:0;
  transform:translateY(16px);
}
.dashboard--silk-story.is-revealed .dashboard__copy p{
  animation:join-sub-in .9s ease .55s both;
}
@keyframes join-sub-in{
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .hl-ch{opacity:1;filter:none;transform:none;animation:none}
  .dashboard__copy p{opacity:1;transform:none;animation:none}
  .dashboard--silk-story .dashboard-showcase{opacity:1;transform:none;transition:none}
}

.join-silk-zone .dashboard{
  position:relative;
  z-index:2;
  background:transparent;
}
.dashboard--silk-story .dashboard-showcase{
  width:100%;
  min-width:0;
  opacity:0;
  transform:translate3d(56px,32px,0) scale(.97);
  transition:opacity 1.15s ease .2s,transform 1.35s cubic-bezier(.22,.9,.3,1) .2s;
}
.dashboard--silk-story.is-revealed .dashboard-showcase{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.dashboard{padding-top:72px;padding-bottom:72px}
.dashboard h2{margin-bottom:54px;font-size:clamp(40px,3.4vw,54px);line-height:1.08}
.dashboard-showcase{
  width:min(1160px,94vw);
  margin-inline:auto;
  display:block;
}
.dashboard-screen{
  width:100%;
  margin-inline:auto;
  aspect-ratio:1.82;
  overflow:hidden;
  border:18px solid #1d1d20;
  border-radius:18px;
  background:#f7f7fb;
  box-shadow:0 24px 34px rgba(25,33,61,.2),0 -18px 30px rgba(25,33,61,.13);
}

@media(min-width:768px) and (max-width:1199px){
  .dashboard--silk-story{
    grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
    gap:32px;
    padding-inline:36px;
  }
  .dashboard__copy h1,
  .dashboard__copy h2{font-size:clamp(42px,5.2vw,60px)}
  .dashboard-screen{border-width:12px}
}
.dashboard .dashboard__preview{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
}
.dashboard h3{margin-top:50px;font-size:30px}
.dashboard>p{margin:14px auto 0;max-width:820px;font-size:clamp(20px,2vw,29px);line-height:1.45}
/* ── services-list + iMac interativo ─────────────────────────────────
   No desktop, o palco ocupa exatamente uma viewport: título no topo,
   iMac à esquerda e a descrição da tela ativa à direita. */
.laptop--services{
  position:relative;
  /* O iMac é limitado pela ALTURA (sobra largura de sobra), então a altura da
     seção é o que define o tamanho dele. 104svh basta para ele chegar ao
     tamanho nativo da arte (1092px de largura) — acima disso sobra espaço
     morto e ampliar só borraria a imagem. O título saiu da linha de cima e
     foi para a coluna do texto, o que devolveu essa altura ao mockup. */
  height:100svh;
  min-height:100svh;
  /* O título voltou para a linha de cima, centralizado sobre o Mac, então a
     altura dele sai do orçamento do mockup. Uma linha basta: são 23 caracteres,
     que a 52px medem ~570px e cabem inteiros em qualquer largura de desktop. */
  /* mesmo corpo do título da seção anterior (.strategy h2, 64px fixo), a pedido
     do Lucas. Cabe em uma linha em todo o desktop: o texto mede 705px a 64px e
     o espaço livre a 768px (a menor largura desta grade) é 729px. Se o texto
     mudar, refazer essa conta — --titulo-h assume UMA linha, e duas estouram o
     orçamento de altura do Mac. */
  --titulo-fs:64px;
  /* precisa ser maior que o respiro antigo: o scale(1.1) do parallax estica o
     palco ~5% da altura para CIMA, então a borda visual do Mac sobe acima da
     caixa e comia o vão até o título (sobravam 2,9px a 1440x900) */
  --titulo-gap:clamp(16px,2.6vh,30px);
  --titulo-h:calc(var(--titulo-fs) * 1.12 + var(--titulo-gap));
  /* Respiro do topo DOBRADO a pedido do Lucas (2026-08-06): era
     clamp(16px,2.6vh,32px). Empurra título e Mac para baixo, afastando a seção
     da faixa vermelha anterior. */
  --pad-t:clamp(32px,5.2vh,64px);
  --pad-b:clamp(8px,1.4vh,18px);
  /* folga que sobra em volta do Mac dentro da linha 2 */
  --folga:9px;
  /* Altura VISUAL do Mac. É a régua da seção inteira: dela saem o max-width do
     palco e a altura e o deslocamento do bloco de texto. Estava repetida inline
     em quatro lugares; nomeá-la evita que uma mude sem as outras.
     O orçamento era um `45px` mágico que embutia os dois paddings mais a folga
     — com o topo dobrado ele passaria do total e o Mac estouraria a base da
     seção, então agora cada parcela é explícita. */
  --mac-h:min(1047px,100svh - var(--pad-t) - var(--pad-b) - var(--folga) - var(--titulo-h));
  --mac-gap:66px;
  overflow:hidden;
  background:var(--white);
  display:grid;
  grid-template-columns:auto minmax(300px,28vw);
  justify-content:center;
  /* linha 1 = título em largura total; linha 2 = Mac + descritivo */
  grid-template-rows:auto minmax(0,1fr);
  /* vão pedido entre a borda do iMac e o texto; como o parallax
     escala o palco em 1.1 a partir do centro, a borda visual avança ~5% da
     largura além da caixa, e o gap de layout compensa isso */
  column-gap:var(--mac-gap);
  align-items:center;
  justify-items:center;
  /* respiro assimétrico: o scale(1.1) do parallax avança ~5% da largura do
     palco para cada lado, e com justify-self:end o excesso da esquerda saía
     da seção e era cortado pelo overflow:hidden — a esquerda reserva espaço
     para ele, a direita fica enxuta. */
  --pad-l:clamp(24px,4vw,72px);
  --pad-r:clamp(8px,1vw,20px);
  padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
}
/* Coluna da direita, alinhada à direita e do tamanho exato do DISPLAY do Mac:
   a área útil vai de y=37 a y=689 de 952, ou seja começa a 3,89% e mede 68,49%
   da altura do chassi. Com essa altura, o título encosta no topo da tela e o
   descritivo é centrado na metade dela (posicionado em 50% do bloco).
   O deslocamento usa 50% da própria caixa menos 46,11% da altura do Mac, então
   o topo cai no lugar certo qualquer que seja a altura do bloco. */
.laptop-services{
  grid-column:2;
  grid-row:2;
  align-self:center;
  justify-self:stretch;
  text-align:right;
  height:calc(0.6849 * var(--mac-h));
  transform:translateY(calc(50% - 0.4611 * var(--mac-h)));
}
/* ── Conector: uma linha do Mac até o nome do descritivo ─────────────
   Sai da borda do CHASSI do mockup e corre até o bloco de texto, terminando
   numa bolinha na altura do nome da funcionalidade. Desenha no sentido
   Mac → nome e só na primeira vez que a seção entra em cena: a classe
   is-in é adicionada uma vez e nunca removida, então voltar à seção não
   reinicia o traço.
   --linha-y é medido em JS (centro do nome dentro do bloco), porque o
   descritivo é centrado na tela do Mac e sua altura muda com o conteúdo. */
.laptop-link{
  position:absolute;
  background:var(--red);
  opacity:.5;
  pointer-events:none;
}
.laptop-link--h{
  top:var(--linha-y,calc(50% - 30px));
  /* Começa na borda VISUAL do chassi — encosta no Mac sem invadir. Antes mirava
     a borda da TELA, que fica 3,66% para dentro do chassi, e por isso o traço
     corria por cima do bezel.
     A conta: o palco tem justify-self:end, então a borda direita da CAIXA cai
     no fim da coluna 1, e o scale(1.1) do parallax joga a borda visual mais 5%
     da largura da caixa para a direita. Como a caixa mede --mac-h*1.1471/1.1,
     esses 5% viram 0.05214*--mac-h. O que sobra até o bloco de texto é o gap
     menos esse avanço. */
  left:calc(0.05214 * var(--mac-h) - var(--mac-gap));
  right:var(--linha-fim,calc(100% + 14px));
  height:2px;
  transition:transform .85s cubic-bezier(.22,1,.36,1),right .32s ease;
  transform-origin:left center;
  transform:scaleX(0);
}
.laptop-link--dot{
  top:var(--linha-y,calc(50% - 30px));
  right:calc(var(--linha-fim,100%) - 4px);
  width:9px;height:9px;
  transition-property:opacity,transform,right;margin-top:-3.5px;
  border-radius:50%;
  opacity:0;
  transform:scale(.4);
  transition:opacity .3s ease .72s,transform .42s cubic-bezier(.34,1.56,.64,1) .72s;
}
.laptop--services.is-in .laptop-link--h{transform:scaleX(1)}
.laptop--services.is-in .laptop-link--dot{opacity:.85;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .laptop-link{transition:none}
}
@media (max-width:900px){
  .laptop-link{display:none}
}

/* Chassi fixo e tela intercambiável em duas imagens empilhadas: somente o
   conteúdo do display faz crossfade quando o serviço ativo muda. */
.laptop-stage{
  position:relative;
  grid-column:1;
  grid-row:2;
  /* A arte do chassi foi recortada nas margens transparentes (eram 200px de
     cada lado), então a caixa AGORA É o iMac visível — antes ela era 37%
     maior que ele, o que fazia o mockup parecer pequeno e distante do texto.
     Proporção 1092/952 = 1.1471. A largura sai da altura livre da viewport
     (menos os 110px do título e respiros), e o /1.1 desconta o scale do
     parallax, que cresce a partir do centro e estouraria a base. */
  height:auto;
  width:auto;
  max-width:min(1600px,calc(var(--mac-h) * 1.1471 / 1.1));
  aspect-ratio:1092/952;
  height:auto;
  /* encostado na direita: a sobra da coluna vira respiro à esquerda, e o vão
     até o texto fica sendo o column-gap */
  justify-self:end;
}
.laptop-stage__chassis{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.laptop-stage__screen{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;transition:opacity .18s ease,transform .18s ease}
/* entrada da tela nova: mesma direção e mesma curva do descritivo ao lado */
.laptop-stage__screen.is-entering{animation:laptopScreenIn .46s cubic-bezier(.22,1,.36,1) both}
@keyframes laptopScreenIn{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:none}
}
/* As telas do preview (imac-screen-tiix-NN.webp) usam o mesmo enquadramento dos
   arquivos recortados: 1092×952 com a área útil da tela em (42,37) 1010×652. */
.laptop-services{
  /* relative: o descritivo é ancorado em 50% desta caixa, que tem a altura
     exata do display do Mac */
  position:relative;
  /* sem width fixa: o bloco é a coluna da direita da grade e se ajusta a ela
     (a antiga width:min(1060px,92vw) vinha de quando o texto ficava embaixo,
     centralizado em largura total) */
  color:var(--red);
}
.laptop-title{
  /* Linha de cima da grade, em largura total e centralizado sobre o conjunto
     Mac + descritivo. Já morou aqui antes e foi movido para a coluna da direita
     porque a 64px o texto media 705px e alcançava para trás por cima do
     mockup — com o corpo menor abaixo isso não acontece mais, e a linha
     própria remove de vez a chance de sobreposição. */
  grid-column:1 / -1;
  grid-row:1;
  color:var(--red);
  margin:0 0 var(--titulo-gap);
  text-align:center;
  /* O padding da seção é assimétrico (a esquerda reserva o transbordo do
     parallax), então o centro da caixa de conteúdo não é o centro da SEÇÃO — o
     título nascia 21,6px à direita a 1440px. Metade da diferença traz de volta.
     `relative` não mexe no layout, só desenha deslocado. */
  position:relative;
  left:calc((var(--pad-r) - var(--pad-l)) / 2);
  /* Menor que o título da seção anterior (.strategy h2, 64px) de propósito: ali
     o h2 tem a largura da página; aqui ele divide a seção com o mockup, e cada
     pixel de corpo sai da altura do Mac (ver --titulo-h). */
  font-size:var(--titulo-fs);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.01em;
  /* halo claro (não sombra escura): o texto cai sobre a vinheta escura
     do mockup — sombra escura some, precisa de luz atrás das letras */
  text-shadow:0 1px 3px rgba(255,255,255,.9),0 2px 18px rgba(255,255,255,.6);
}
/* Coluna da direita: só a funcionalidade ativa aparece, acompanhando a
   tela que está no iMac. */
#laptopServicos{
  /* centrado na metade da tela do Mac; o título fica no topo, em fluxo */
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  width:auto;
  min-height:0;
  margin:0;
  padding:0;
  list-style:none;
  display:block;
}
.laptop-services li{display:none;border:0}
.laptop-services li.is-active{display:block}
.laptop-services button{
  appearance:none;
  background:none;
  border:0;
  width:100%;
  text-align:right;
  cursor:default;
  font:inherit;
  padding:0;
  position:relative;
  font-size:inherit;
  font-weight:300;
  color:rgba(135,19,18,.82);
  text-shadow:0 1px 3px rgba(255,255,255,.9),0 2px 14px rgba(255,255,255,.55);
  transition:color .18s ease;
}
.laptop-service__name{
  display:block;
  font-size:clamp(26px,2.3vw,38px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}
.laptop-service__desc{
  display:block;
  max-width:34ch;
  margin:14px 0 0 auto;
  color:rgba(135,19,18,.72);
  font-size:clamp(16px,1.25vw,21px);
  font-weight:300;
  line-height:1.55;
  transition:color .18s ease;
}
.laptop-services button:hover .laptop-service__desc,
.laptop-services button.is-active .laptop-service__desc{color:rgba(135,19,18,.82)}
/* Entrada do descritivo: como o bloco é alinhado à direita, o movimento é
   horizontal (entra da direita, na direção do mockup) em vez de vertical.
   Nome e descrição entram em dois tempos — o nome puxa a leitura, a
   descrição chega 90ms depois. */
.laptop-services li.is-active .laptop-service__name{
  animation:laptopServiceIn .5s cubic-bezier(.22,1,.36,1) .18s both;
}
.laptop-services li.is-active .laptop-service__desc{
  animation:laptopServiceIn .5s cubic-bezier(.22,1,.36,1) .27s both;
}
@keyframes laptopServiceIn{
  from{opacity:0;transform:translateX(26px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .laptop-services li.is-active .laptop-service__name,
  .laptop-services li.is-active .laptop-service__desc,
  .laptop-stage__screen.is-entering{animation:none}
  .laptop-stage__screen{transition:opacity .18s ease}
}
.laptop-services button::before{display:none}
.laptop-services button:hover{color:var(--red)}
.laptop-services button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.laptop-services button.is-active{color:var(--red);font-weight:500}
.laptop-service-dots{
  position:absolute;
  left:50%;
  bottom:clamp(28px,4vh,48px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transform:translateX(-50%);
}
.laptop-service-dots button{
  width:10px;
  height:10px;
  padding:0;
  border:1px solid rgba(135,19,18,.75);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:width .24s ease,background .24s ease,border-color .24s ease;
}
.laptop-service-dots button.is-active{
  width:28px;
  border-color:var(--red);
  border-radius:999px;
  background:var(--red);
}
.laptop-service-dots button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.strategy-card>span,
.capabilities .quote>span{
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
}

/* Estratégia: quatro módulos com a mesma geometria, independentemente da
   quantidade de linhas do título ou do texto. */
.strategy-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  align-items:stretch;
}
.strategy-card{
  width:100%;
  height:100%;
  min-height:380px;
  display:grid;
  grid-template-rows:auto minmax(108px,auto) 1fr;
  align-content:start;
}
.strategy-card h3{
  margin:34px 0 22px;
  font-size:clamp(25px,2vw,28px);
}
.strategy-card p{margin:0}
.strategy-dots{display:none}
.capabilities .quote{
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:center;
}
.capabilities .quote>span.quote__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:120px;
  height:120px;
  margin-bottom:auto;
  color:var(--red);
}
.capabilities .quote__icon svg{width:120px;height:120px;stroke-width:1.1}
.capabilities .quote h3{
  margin:18px 0 8px;
  color:#29343d;
  font-size:23px;
  font-weight:500;
}
.capabilities .quote p{
  margin:0;
  color:#5f6872;
  font-size:16px;
  line-height:1.5;
}

@media(max-width:767px){
  .join-hero-video__stage{height:520px}
  .jv-copy{min-height:0;padding:40px 24px 48px}
  /* empilhado: título, iMac e descrição — desfaz a grade de duas colunas */
  .laptop--services{height:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 20px 34px}
  /* o bloco do descritivo é a coluna direita da grade do desktop: altura
     amarrada ao display do Mac (--mac-h), deslocada por transform, com a
     lista centrada em position:absolute dentro dela. Empilhado no mobile
     isso virava ~180px de vazio acima e abaixo do texto — aqui tudo volta
     ao fluxo normal. */
  .laptop-services{
    display:block;
    position:static;
    grid-column:auto;
    grid-row:auto;
    align-self:auto;
    justify-self:auto;
    height:auto;
    transform:none;
    text-align:center;
  }
  #laptopServicos{
    position:static;
    width:100%;
    justify-self:auto;
    transform:none;
  }
  .laptop-services button{text-align:center}
  .laptop-service__desc{max-width:30ch;margin-inline:auto}
  /* o iMac cabia inteiro só sangrando 42px de cada lado, o que cortava as
     bordas da tela e ainda inflava a altura do pedestal. Em largura de
     celular ele passa a caber por completo. */
  .laptop-stage{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:auto;
    margin:0;
  }
  .laptop-stage__chassis{height:auto}
  .laptop-services{width:100%;text-align:center}
  /* Era `.laptop-services h2`: o título saiu de dentro do bloco de texto e
     virou filho direto da seção, então o seletor descendente parou de casar e
     o mobile caía no corpo do desktop. */
  .laptop-title{
    position:static;
    width:auto;
    transform:none;
    margin:0 auto 24px;
    text-align:center;
    font-size:clamp(30px,10vw,38px);
  }
  .laptop-services ul{min-height:104px;margin:0;display:block}
  .laptop-services li{display:none;border:0}
  .laptop-services li:first-child{border:0}
  .laptop-services li.is-active{display:block}
  .laptop-services button{
    padding:10px 8px;
    text-align:center;
    font-size:19px;
    font-weight:500;
    pointer-events:none;
  }
  .laptop-service__name{font-size:22px;line-height:1.2}
  .laptop-service__desc{max-width:30ch;margin:7px auto 0;font-size:14px;line-height:1.4}
  .laptop-services button::before{display:none}
  .laptop-service-dots{
    position:static;
    gap:10px;
    transform:none;
    margin-top:18px;
  }
  .laptop-service-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:1px solid var(--red);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    pointer-events:auto;
    transition:width .24s ease,background .24s ease,border-color .24s ease;
  }
  .laptop-service-dots button.is-active{
    width:24px;
    border-color:var(--red);
    border-radius:999px;
    background:var(--red);
  }
  .laptop-service-dots button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
  .dashboard--silk-story{
    min-height:100svh;
    grid-template-columns:1fr;
    gap:34px;
    padding:88px 20px 56px;
    text-align:center;
  }
  .dashboard__copy h1,
  .dashboard__copy h2{max-width:14ch;margin-inline:auto;font-size:clamp(36px,10vw,48px)}
  .dashboard__copy p{margin:18px auto 0;font-size:16px}
  .strategy-grid{
    overflow-y:hidden;
    scrollbar-width:none;
    scrollbar-color:transparent transparent;
    -ms-overflow-style:none;
  }
  /* no desktop os 380px + a última faixa 1fr igualam as quatro colunas; no
     carrossel só um card aparece por vez, então isso virava ~150px de vazio
     embaixo do texto. Aqui o card acompanha o conteúdo — o stretch do flex
     continua igualando a altura entre eles. */
  .strategy-card{
    min-height:0;
    grid-template-rows:auto auto auto;
    padding:26px 24px 30px;
  }
  .strategy-card h3{margin:22px 0 16px}
  .strategy-grid::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .strategy-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:24px;
  }
  .strategy-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:1px solid rgba(255,255,255,.82);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:width .24s ease,background .24s ease,border-color .24s ease;
  }
  .strategy-dots button.is-active{
    width:24px;
    border-color:#fff;
    border-radius:999px;
    background:#fff;
  }
  .strategy-dots button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
  .dashboard{padding-block:50px}
  .dashboard h2{margin-bottom:34px}
  .dashboard-showcase{width:100%}
  .dashboard-screen{grid-row:1;border-width:9px;border-radius:10px}
  .dashboard h3{margin-top:30px;font-size:25px}
  .dashboard>p{font-size:18px}
  .dashboard>p br{display:none}
}

/* ==================== Seção: Mapa mental de módulos (mm) ==================== */
.tx{
  --red:#871312; --red-deep:#5f0d0c; --red-mid:#a5312f; --red-ink:#3a0a09;
  --red-100:#fbe9e8; --red-50:#fdf4f3; --muted:#8a5a58; --white:#fff; --line:#f0dcda;
  --shadow:0 2px 4px rgba(95,13,12,.05), 0 20px 44px -22px rgba(135,19,18,.28);
  --shadow-lg:0 30px 70px -30px rgba(135,19,18,.4);
  color:var(--red-ink);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;
  position:relative;overflow:hidden;
  /* fundo chapado: o degradê radial competia com os cards (a mancha rosa
     passava por trás deles e sujava a borda branca) — pedido do Lucas
     2026-08-06. */
  background:var(--white);
  height:100svh;min-height:680px;
  /* ritmo vertical: um passo só, usado em toda a seção, para o espaçamento
     crescer junto e as relações de proximidade se manterem em qualquer
     altura de tela. */
  --tx-passo:clamp(14px,2vh,22px);
  padding:calc(var(--tx-passo) * 2) 0;
}
.tx *{box-sizing:border-box}
.tx h2,.tx h3{font-family:"Outfit",sans-serif}
.tx-wrap{width:100%;height:100%;min-height:0;margin:0 auto;display:flex;flex-direction:column}
/* a barra vermelha de 4px no topo virava um risco solto entre a seção do iMac
   e esta — removida a pedido do Lucas 2026-08-06. */
.tx-head{max-width:70ch;margin:0 auto;padding:0 22px;text-align:center;flex:0 0 auto}
/* Barras esticadas até 100px das margens (pedido do Lucas 2026-08-06). Para
   isso o span saiu do .tx-head no HTML: ali ele herdava o limite de 70ch da
   coluna de leitura. Agora é filho direto do .tx-wrap, que tem a largura da
   seção. O 100px é o TETO — abaixo de ~1250px o clamp encolhe, senão em tela
   estreita as barras comeriam a linha inteira e o texto ficaria espremido. */
.tx-eyebrow{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);
  padding-inline:clamp(20px,8vw,100px);
  font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--red);text-align:center}
/* flex:1 divide a sobra igualmente entre as duas barras, então elas continuam
   simétricas em qualquer largura sem ninguém medir nada em JS. */
.tx-eyebrow::before,.tx-eyebrow::after{content:"";flex:1 1 0;min-width:24px;height:1.5px;
  background:var(--red);opacity:.5}
/* Espaços abertos a pedido do Lucas 2026-08-06 — as três linhas estavam
   apertadas demais para o corpo do título. A escada continua crescente
   (olho-de-boi → título → apoio → cards), só que com passos maiores.
   1.08 dá respiro à descida do "p" de "ponta" sem soltar as duas linhas. */
.tx-head h2{font-size:clamp(28px,4.4vw,50px);line-height:1.08;letter-spacing:-.025em;
  margin:calc(var(--tx-passo) * 1.75) 0 0;font-weight:800;color:var(--red-ink);text-wrap:balance}
.tx-head h2 em{font-style:normal;color:var(--red)}
.tx-head p{color:var(--muted);font-size:clamp(15px,1.8vw,18px);line-height:1.6;
  margin:calc(var(--tx-passo) * 2.5) auto 0;max-width:56ch;text-wrap:pretty}
.tx-stage{margin-top:clamp(30px,4vw,52px);position:relative}
.tx-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:6px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--red-100) transparent}
.tx-scroll::-webkit-scrollbar{height:8px}
.tx-scroll::-webkit-scrollbar-thumb{background:var(--red-100);border-radius:99px}
.tx-stage svg{display:block;margin:0 auto;min-width:1080px;width:100%;max-width:1140px;height:auto}
.tx-stage::after{content:"";position:absolute;top:0;bottom:14px;right:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--white));opacity:0;transition:.3s}
@media (max-width:1080px){.tx-stage::after{opacity:1}}
.tx-hint{display:none;text-align:center;color:var(--muted);font-size:12.5px;margin-top:6px}
@media (max-width:1080px){.tx-hint{display:block}}
.tx-node{opacity:0;transform:translateX(-8px)}
.tx-stage.in .tx-node{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
.tx-link{transition:stroke-dashoffset .7s ease}
@media (prefers-reduced-motion:reduce){
  .tx-node{opacity:1!important;transform:none!important;transition:none!important}
  .tx-link{stroke-dashoffset:0!important;transition:none!important}
}

/* ---- efeito de luz / glow (mm) ---- */
.tx-stage::before{content:"";position:absolute;left:7%;top:50%;width:min(560px,46%);aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(135,19,18,.20), rgba(165,49,47,.08) 42%, transparent 70%);
  filter:blur(8px);animation:txbloom 6s ease-in-out infinite}
.tx-scroll{position:relative;z-index:1}
@keyframes txbloom{0%,100%{opacity:.5;transform:translateY(-50%) scale(1)}50%{opacity:.9;transform:translateY(-50%) scale(1.07)}}
.tx-mod{filter:drop-shadow(0 6px 14px rgba(95,13,12,.30)) drop-shadow(0 0 9px rgba(165,49,47,.42))}
.tx-root{filter:drop-shadow(0 8px 22px rgba(135,19,18,.42))}
.tx-halo{opacity:.42;filter:blur(22px);transform-box:fill-box;transform-origin:center;animation:txpulse 3.6s ease-in-out infinite}
@keyframes txpulse{0%,100%{opacity:.32;transform:scale(.94)}50%{opacity:.68;transform:scale(1.08)}}
.tx-flow{opacity:0;filter:drop-shadow(0 0 4px #ff8f8b) drop-shadow(0 0 9px rgba(255,120,116,.55));
  animation:txflow 2.8s linear infinite}
.tx-stage.in .tx-flow{opacity:.95}
@keyframes txflow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .tx-flow{display:none}
  .tx-halo,.tx-stage::before{animation:none}
}

.tx-logo{filter:brightness(0) invert(1)}

/* ---- mapa interativo (auto-fit no viewport) ---- */
.tx-stage{height:min(76vh,720px);margin-top:clamp(22px,3vw,40px);overflow:visible}
.tx-stage svg{min-width:0;width:100%;height:100%;display:block;position:relative;z-index:1}
.tx-stage::after{display:none}
.tx-hint{display:none!important}
.tx-node{opacity:1;transform:none}
.tx-flow{opacity:.95}
.tx-hit{cursor:pointer}
.tx-hit:focus{outline:none}
.tx-hit:focus-visible .tx-modrect,.tx-hit:focus-visible rect{outline:2px solid #c23a34}
.tx-hit .tx-tog{transition:transform .15s ease}
.tx-hit:hover{filter:brightness(1.04)}
.tx-hit:hover .tx-tog{transform:scale(1.12)}
@keyframes txin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.tx-appear{animation:txin .34s ease both}
@media (prefers-reduced-motion:reduce){.tx-appear{animation:none}}
/* tudo aberto: largura-fit legível (altura acompanha o conteúdo) */
.tx-stage{height:auto}
.tx-stage svg{height:auto}

/* radial: centralizado, altura próxima do viewport */
.tx-stage{height:auto;max-width:1100px;margin-left:auto;margin-right:auto}
.tx-stage svg{height:auto;max-height:82vh}

/* profundidade de campo (foco) durante a animação */
.tx-blur{filter:blur(2.6px);opacity:.48}
.tx-stage svg{transition:filter .18s linear}

/* ── versão D: carrossel de cards ──────────────────────────────────
   Mesma fonte de dados do mapa (DATA em mindmap.js), renderizada em DOM em
   vez de SVG. Rolagem horizontal com scroll-snap; o primeiro card é a
   abertura em vermelho e os 14 seguintes são as funcionalidades. */
/* padding-bottom: os pontos encostavam na borda da seção e, com o
   overflow:hidden dela, o scale do ponto ativo e o anel de foco eram
   cortados. */
/* o salto para os cards é o maior da seção (4 passos): separa o bloco de
   leitura da faixa navegável, em vez de deixar tudo com o mesmo vão. Subiu de
   3 para 4 junto com a abertura do bloco de texto, senão o último vão do texto
   (2,5 passos) chegava perto demais deste e a hierarquia achatava. */
.tx-cards{display:none;width:100%;margin-top:calc(var(--tx-passo) * 4)}
.tx-cards.is-on{display:block}
.tx-cards__track{
  display:flex;
  gap:clamp(12px,1.4vw,20px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  /* O trilho é container de rolagem, e `overflow-x:auto` força `overflow-y` a
     computar `auto` também — ou seja, ele CORTA na vertical. O padding aqui não
     é espaçamento: é a folga que a sombra dos cards precisa para ser desenhada
     inteira. Alcance de `--shadow` (0 20px 44px -22px): 42px para baixo, 22px
     para os lados, 2px para cima. Daí 46 / 24 / 10.
     A margem negativa devolve ao layout parte da folga de baixo, senão a
     sombra empurraria os pontos para longe — ela é pintura, não espaço. O vão
     final até os pontos é 46 − 12 = 34px, e ele mora SÓ aqui: o bloco de
     controle não tem margem própria, senão as duas colapsam entre irmãos e a
     conta deixa de ser previsível (foi o que derrubou o vão para 18px). */
  padding:10px clamp(24px,4vw,72px) 46px;
  margin-bottom:-12px;
  scrollbar-width:none;
}
.tx-cards__track::-webkit-scrollbar{display:none}
.tx-cards__track:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.tx-card{
  cursor:pointer;
  scroll-snap-align:center;
  flex:0 0 clamp(240px,20vw,286px);
  min-height:clamp(330px,42vh,392px);
  display:flex;
  flex-direction:column;
  padding:clamp(20px,1.6vw,28px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:var(--shadow);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
/* ── vermelho = ponteiro em cima ─────────────────────────────────────
   Revisto em 2026-08-06: o vermelho era o card ATIVO e acompanhava a
   rolagem, o que deixava um card qualquer (o mais perto do centro) travado
   em vermelho sem ninguém ter apontado para ele. Agora é só hover.
   focus-visible entra junto por garantia (busca na página, leitor de tela),
   mas os cards NÃO são pontos de tabulação: 15 paradas dentro de um carrossel
   é anti-padrão. O caminho de teclado é o trilho (uma parada, role=region) e
   os pontos de paginação — e o vermelho não carrega informação nenhuma que já
   não esteja no texto, então quem navega sem mouse não perde nada. */
.tx-card:hover,
.tx-card:focus-visible{
  color:#fff;
  border-color:transparent;
  /* invertido: o tom escuro sobe de baixo para cima */
  background:linear-gradient(160deg,#a5211f 0%,#6c0f0e 54%,#3a0a09 100%);
}
.tx-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tx-card:hover h3,.tx-card:focus-visible h3{color:#fff}
/* .82 e não .74: sobre o topo do degradê (#a5211f) o texto a 74% dava 4.67:1,
   raspando no mínimo de 4.5:1 da WCAG. A .82 sobe para ~5.6:1. */
.tx-card:hover li,.tx-card:focus-visible li{color:rgba(255,255,255,.82)}
.tx-card:hover li::before,.tx-card:focus-visible li::before{background:#fff;opacity:.62}
.tx-card:hover .tx-card__icon,.tx-card:focus-visible .tx-card__icon{stroke:#fff;opacity:.85}
.tx-card:hover .tx-card__num,.tx-card:hover .tx-card__cue,
.tx-card:focus-visible .tx-card__num,
.tx-card:focus-visible .tx-card__cue{color:#fff}
.tx-card:hover p,.tx-card:focus-visible p{color:rgba(255,255,255,.82)}
.tx-card__num{font-size:26px;font-weight:700;letter-spacing:-.02em;opacity:.9;color:var(--red)}
.tx-card--intro h3{margin:clamp(22px,3vh,38px) 0 0;font-size:clamp(20px,1.5vw,25px);line-height:1.25;font-weight:700}
.tx-card--intro p{margin:14px 0 0;font-size:13.5px;line-height:1.6;font-weight:300;color:var(--muted)}
.tx-card__cue{margin-top:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--red)}
.tx-card__cue svg{display:block;margin-top:10px;width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.tx-card__icon{width:30px;height:30px;stroke:var(--red);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.62}
.tx-card h3{margin:clamp(16px,2.4vh,26px) 0 0;font-size:clamp(19px,1.45vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--red-ink)}
.tx-card ul{margin:clamp(14px,2vh,22px) 0 0;padding:0;list-style:none;display:grid;gap:9px}
.tx-card li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.45;font-weight:300;color:var(--muted)}
.tx-card li::before{content:"";position:absolute;left:0;top:.52em;width:4px;height:4px;border-radius:50%;background:var(--red);opacity:.5}
/* margin-top:0 de propósito — ver nota no .tx-cards__track: o vão até aqui
   vive lá, senão as duas margens colapsam e a conta vira loteria. */
.tx-cards__dots{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin-top:0;padding-inline:16px;
}
/* alvo de 24×24 (WCAG 2.2 SC 2.5.8): o ponto visível continua com 8px, mas a
   área clicável é a do botão. Antes o botão inteiro tinha 8px — impossível de
   acertar no toque e reprovado no critério. */
.tx-cards__dots button{
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.tx-cards__dots button::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--red);opacity:.22;transition:opacity .2s,transform .2s;
}
.tx-cards__dots button[aria-current="true"]::before{opacity:1;transform:scale(1.32)}
.tx-cards__dots button:hover::before{opacity:.55}
.tx-cards__dots button:focus-visible{outline:3px solid var(--gold);outline-offset:-1px;border-radius:50%}
/* botão de pausa: exigido pela WCAG 2.2.2 (conteúdo que se move sozinho por
   mais de 5s precisa de um jeito de parar). Hover/foco também pausam, mas isso
   sozinho não atende — precisa de um controle explícito e persistente. */
/* O botão Pausar/Reproduzir e as regras da entrada em leque (.is-entrando,
   .is-auto) saíram junto com o movimento automático — Lucas 2026-08-06.
   Sem nada se mexendo sozinho, não há o que pausar. */
@media (max-width:700px){
  .tx-card{flex-basis:min(78vw,300px)}
  .tx-cards__track{padding-inline:16px}
  /* 15 alvos de 24px + o padding lateral passavam de 375px e a fileira
     quebrava, deixando uma bolinha órfã na segunda linha. Sem padding os
     360px cabem; abaixo disso os botões encolhem em largura (a altura de
     24px do alvo é mantida) em vez de quebrar a linha. */
  .tx-cards__dots{flex-wrap:nowrap;padding-inline:0}
  .tx-cards__dots button{flex:0 1 24px;min-width:17px}
}

/* modelo de câmera: janela fixa (a câmera panoramiza; B desce, C anda pro lado) */
/* uma seção = uma tela: com os cards no lugar do mapa (que trazia um palco de
   100svh), a seção passou a medir só o conteúdo. */
/* quem centraliza é a SEÇÃO, não o wrap: com height:auto o wrap mede só o
   conteúdo, então o justify-content dele não tinha folga para distribuir e o
   bloco ficava colado no topo (33px em cima × 185px embaixo). Mesmo padrão
   já usado em .strategy e .jornada. */
.tx{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.tx-wrap{justify-content:center}
.tx-wrap{height:auto}
/* O palco ocupa uma viewport inteira: é a premissa da seção, e a árvore
   precisa dessa altura quando os ramos abrem (encurtar a caixa cortava os
   rótulos de baixo). O respiro superior é enxuto para o mapa não ficar
   distante do título. */
.tx-stage{flex:0 0 100svh;min-height:620px;height:100svh!important;width:100vw;max-width:none;margin:clamp(10px,1.6vh,18px) 0 0;overflow:hidden}
.tx-stage svg{height:100%!important;max-height:none!important;width:100%!important;max-width:1340px}

@media (max-width:700px){
  .tx{min-height:0;padding-top:30px}
  .tx-head{padding-inline:16px}
  .tx-stage{margin-top:14px}
}

/* ── Jornada do dia (seção vermelha) ────────────────────────────────
   Substitui os três cards de "operação conectada" por uma linha do tempo:
   a plataforma acompanhando o profissional ao longo do dia. Fundo vermelho
   mantido; os discos são claros para contrastar, e o último é sólido,
   fechando a sequência. */
.capabilities.jornada{
  /* respiro simétrico: com o justify-content:center abaixo, é isso que
     deixa o bloco inteiro (título + lead + trilha) centrado na viewport.
     Já foi assimétrico (26vh embaixo) para empurrar o texto para cima,
     mas aquilo abria um vazio de 362px no pé da seção. */
  padding-block:clamp(56px,8vh,92px);
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;

  /* relógio da cascata de entrada — um lugar só para regular o ritmo inteiro */
  --jr-inicio:120ms;   /* respiro antes do primeiro ícone           */
  --jr-passo:500ms;    /* cadência de um ícone para o seguinte      */
  --jr-onda:260ms;     /* atraso da onda depois que o ícone estoura */
  --jr-dot:60ms;       /* defasagem de uma bolinha para a próxima   */
}
/* pareado com o "Da operação à estratégia": mesmos 64px do .strategy h2
   no pages.css, com line-height normal igual ao dele — e não os 40px que
   vinham de .testimonials h2. O passo para 43px abaixo de 768px espelha
   o que o pages.css já faz com o .strategy h2, para os dois títulos
   continuarem do mesmo tamanho em qualquer largura. */
/* 56px, e não os 64px do .strategy h2: o título daqui é bem mais longo
   ("Nosso sistema aplicado no seu dia a dia" mede 1143px a 64px, contra
   1068px disponíveis em 1280) e quebrava deixando "dia" sozinho embaixo.
   A 56px ele mede 1000px e entra em uma linha de 1200px para baixo. */
.jornada h2{text-align:center;margin:0;font-size:56px}
/* "no seu dia a dia" anda como bloco: enquanto couber fica na mesma
   linha, e quando não couber desce inteira. É isso que garante a quebra
   sempre nesse ponto, em vez de sobrar uma palavra solta na segunda
   linha em alguma largura intermediária. */
.jornada h2 .jr-h2-fim{display:inline-block}
@media (max-width:767px){
  .jornada h2{font-size:43px}
}
.jr-lead{
  max-width:52ch;margin:14px auto 0;text-align:center;
  font-size:clamp(17px,1.5vw,22px);font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.76);
}
.jr-track{
  --disco:clamp(64px,6.2vw,92px);
  --vao:clamp(8px,1.2vw,20px);   /* mesmo valor do gap: o conector usa na conta */
  --hora-h:18px;                 /* altura FIXA: o conector deriva o centro daqui */
  --dot:7px;
  list-style:none;margin:clamp(38px,6vh,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--vao);
  align-items:start;
  /* desce 1cm sem mexer no layout: com o bloco centrado, aumentar a
     margem faria a trilha descer só meio centímetro e o título subir o
     outro meio. O deslocamento relativo move só a trilha e preserva o
     centro do conjunto. */
  position:relative;top:1cm;
}
.jr-step{position:relative;text-align:center;color:#fff}
.jr-step:nth-child(1){--i:0}
.jr-step:nth-child(2){--i:1}
.jr-step:nth-child(3){--i:2}
.jr-step:nth-child(4){--i:3}
.jr-step:nth-child(5){--i:4}
.jr-step:nth-child(6){--i:5}

/* ── conector: bolinhas ligando um passo ao seguinte ───────────────
   Geometria derivada, sem número mágico. O topo cai exatamente no
   centro do disco (--hora-h + margem 14px + metade do disco) e a
   largura atravessa o vão inteiro — inclusive o gap do grid — com
   12px de folga de cada lado. O tracejado antigo usava 28px chutado
   (o real é 30,5) e ignorava o gap, então corria 2,5px acima do
   centro e cobria só 67% do vão, encostado no disco da esquerda. */
.jr-dots{
  position:absolute;z-index:0;
  top:calc(var(--hora-h) + 14px + var(--disco) / 2);
  left:calc(50% + var(--disco) / 2 + 12px);
  width:calc(100% + var(--vao) - var(--disco) - 24px);
  height:var(--dot);margin-top:calc(var(--dot) / -2);
  display:flex;align-items:center;justify-content:space-between;
}
.jr-step:last-child .jr-dots{display:none}
.jr-dots i{
  display:block;width:var(--dot);height:var(--dot);border-radius:50%;
  background:rgba(255,255,255,.34);
}
.jr-dots i:nth-child(1){--d:0}
.jr-dots i:nth-child(2){--d:1}
.jr-dots i:nth-child(3){--d:2}
.jr-dots i:nth-child(4){--d:3}
.jr-dots i:nth-child(5){--d:4}
.jr-hora{
  display:block;height:var(--hora-h);line-height:var(--hora-h);
  font-size:13px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.8);
}
.jr-disco{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:var(--disco);height:var(--disco);margin:14px auto 0;
  border-radius:50%;background:#fff;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45);
}
/* aro que dispara junto com o ícone */
.jr-disco::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);opacity:0;
}
.jr-disco svg{width:44%;height:44%;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jr-disco--fim{background:var(--red-deep);border:2px solid rgba(255,255,255,.85)}
.jr-disco--fim svg{stroke:#fff;stroke-width:2.2}
.jornada .jr-step h3{margin:16px 0 0;font-size:clamp(14px,1.15vw,17px);font-weight:700;line-height:1.25;color:#fff;text-align:center}
.jornada .jr-step p{margin:8px auto 0;max-width:22ch;font-size:clamp(12px,.95vw,14px);font-weight:300;line-height:1.45;color:rgba(255,255,255,.72)}
/* ── estado inicial da cascata ─────────────────────────────────────
   Preso a .jr-armada, que o JS põe. Sem JS a classe não entra e nada
   é escondido: a seção aparece inteira e parada, em vez de invisível. */
.jr-armada .jr-hora,
.jr-armada .jr-disco,
.jr-armada .jr-step h3,
.jr-armada .jr-step p,
.jr-armada .jr-dots i{opacity:0}

/* ── a cascata ─────────────────────────────────────────────────────
   Base de cada passo = --jr-inicio + i × --jr-passo. O ícone estoura,
   a onda percorre as bolinhas do vão e entrega o bastão ao ícone
   seguinte: onda(260) + 4 × dot(60) = 500 = --jr-passo, ou seja, a
   última bolinha acende no mesmo quadro em que o próximo ícone parte.
   Sem buraco e sem sobreposição. */
.jornada.is-in .jr-hora{
  animation:jr-surge 460ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo));
}
.jornada.is-in .jr-disco{
  animation:jr-pop 620ms cubic-bezier(.34,1.4,.5,1) both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo));
}
.jornada.is-in .jr-disco::before{
  animation:jr-aro 760ms ease-out both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo));
}
.jornada.is-in .jr-step h3{
  animation:jr-surge 460ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo) + 140ms);
}
.jornada.is-in .jr-step p{
  animation:jr-surge 460ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo) + 210ms);
}
.jornada.is-in .jr-dots i{
  animation:jr-onda 460ms ease-out both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo) + var(--jr-onda) + var(--d) * var(--jr-dot));
}

@keyframes jr-surge{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}
/* cresce se destacando, depois volta */
@keyframes jr-pop{
  0%  {opacity:0;transform:scale(.70)}
  40% {opacity:1;transform:scale(1.18)}
  68% {opacity:1;transform:scale(.96)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes jr-aro{
  from{opacity:.55;transform:scale(1)}
  to  {opacity:0;transform:scale(1.9)}
}
/* a "ola": a bolinha acende forte de passagem e assenta apagada */
@keyframes jr-onda{
  0%  {opacity:0;transform:scale(.5);background:rgba(255,255,255,.34);box-shadow:0 0 0 rgba(255,255,255,0)}
  38% {opacity:1;transform:scale(2.05);background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9)}
  100%{opacity:1;transform:scale(1);background:rgba(255,255,255,.34);box-shadow:0 0 0 rgba(255,255,255,0)}
}

/* ── fecho: só o "Integrações automáticas" ─────────────────────────
   Não é o pop dos outros. Entra como carimbo (torto, estoura, assenta
   reto), solta dois halos em vez de um aro, e o check se desenha em
   vez de aparecer pronto. */
.jornada.is-in .jr-step--fim .jr-disco{
  animation:jr-fim 820ms cubic-bezier(.3,1.5,.45,1) both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo));
}
.jr-step--fim .jr-disco::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);opacity:0;
}
.jornada.is-in .jr-step--fim .jr-disco::before,
.jornada.is-in .jr-step--fim .jr-disco::after{
  animation:jr-halo 1100ms cubic-bezier(.22,1,.36,1) both;
}
.jornada.is-in .jr-step--fim .jr-disco::before{
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo) + 180ms);
}
.jornada.is-in .jr-step--fim .jr-disco::after{
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo) + 380ms);
}
/* pathLength="1" no <path> normaliza o traço: dá para animar o desenho
   sem depender do comprimento real do caminho */
.jr-armada .jr-step--fim .jr-disco svg path{stroke-dasharray:1;stroke-dashoffset:1}
.jornada.is-in .jr-step--fim .jr-disco svg path{
  animation:jr-check 560ms cubic-bezier(.65,0,.35,1) both;
  animation-delay:calc(var(--jr-inicio) + var(--i) * var(--jr-passo) + 300ms);
}
@keyframes jr-fim{
  0%  {opacity:0;transform:scale(.45) rotate(-14deg)}
  45% {opacity:1;transform:scale(1.26) rotate(4deg)}
  70% {opacity:1;transform:scale(.94) rotate(-1deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes jr-halo{
  0%  {opacity:.7;transform:scale(.85)}
  70% {opacity:0;transform:scale(2.3)}
  100%{opacity:0;transform:scale(2.3)}
}
@keyframes jr-check{
  from{stroke-dashoffset:1}
  to  {stroke-dashoffset:0}
}

@media (max-width:900px){
  /* volta ao respiro simétrico: o viés para cima existe só enquanto a
     trilha é uma fileira. Aqui ela vira 2×3 e fica ~600px de altura —
     mantendo os 26vh de baixo, a seção passava de 1000px e estourava
     a viewport (medido: 1013px contra 900). */
  .capabilities.jornada{padding-block:clamp(48px,7vh,80px)}
  .jr-track{grid-template-columns:repeat(2,1fr);row-gap:clamp(26px,5vh,40px)}
  .jr-dots{display:none}
}
@media (max-width:520px){
  .jr-track{grid-template-columns:1fr}
}

/* quem pediu menos movimento vê tudo pronto, sem cascata */
@media (prefers-reduced-motion:reduce){
  .jornada.is-in *,
  .jornada.is-in *::before,
  .jornada.is-in *::after{animation:none!important}
  .jr-armada .jr-hora,
  .jr-armada .jr-disco,
  .jr-armada .jr-step h3,
  .jr-armada .jr-step p,
  .jr-armada .jr-dots i{opacity:1}
  .jr-armada .jr-step--fim .jr-disco svg path{stroke-dashoffset:0}
}

/* logo no lugar do nome dentro do texto corrido: alinhada pela baseline e
   um pouco maior que a altura da fonte, senão some no meio da frase. O alt
   mantém "TIIX PRO" para leitor de tela e para quando a imagem não carrega. */
.tx-logo-inline{
  display:inline-block;
  height:1.95em;
  width:auto;
  /* Ajuste fino 2026-08-06: `vertical-align:baseline` assenta a borda INFERIOR
     DA CAIXA na linha de base — mas o SVG tem 37,1px de vazio embaixo da arte
     (viewBox 268), então as letras flutuavam ~4,9px acima da linha do texto.
     O deslocamento devolve exatamente essa folga: 1.95em × 37.1/268 = .27em.
     A base é 230,9 (onde param as seis formas retas), NÃO 232 — 232 é só o "O"
     de PRO, que tem o transbordo óptico normal de letra redonda e não deve
     definir a linha. Se a arte ou a altura mudarem, refazer a conta. */
  vertical-align:-.27em;
  /* margem negativa só EM CIMA: a de baixo deslocava a base da logo para
     abaixo da linha do texto (com vertical-align:baseline é a borda inferior
     da margem que assenta na baseline). A de cima segue negativa para a logo,
     sendo mais alta que a fonte, não estufar a caixa daquela linha. */
  margin:-1.15em .16em 0;
}