/* =========================================================
   GUELTUR — DIESEL SPECIALISTS
   TESTE — fundo claro. Variação sobre o sistema de marca do
   Painel de Design (etapa 2): mesma paleta, papéis invertidos.
   Teto de uso do torque: 10% da tela.

   Os seis tokens agora nomeiam PAPÉIS, não tons fixos:
   --bg / --bg-2 / --line / --torque / --muted / --ink.
   .mf, .diag, .sys, .sede, .onde e .foot reatribuem esses nomes para
   um conjunto escuro — viram "salas escuras" no meio da página
   clara, sem duplicar nenhuma regra interna.
   ========================================================= */

/* ---------- 00. TOKENS ---------- */
:root{
  --bg:     #FAF8F5;   /* base da página — off-white, não branco puro */
  --bg-2:   #F1EDE6;   /* superfície elevada: faixas, painéis, barras */
  --line:   #E3DDD2;   /* hairline sobre claro */
  --torque: #EE2C2C;   /* acento único, do logo — provisório até o vetor (B2) */
  --muted:  #5C6570;   /* texto secundário — 5,6:1 sobre --bg */
  --ink:    #0D1013;   /* texto principal / tinta escura — 4,6:1 sobre --torque, passa AA */

  /* tipografia — duas famílias, ambas variáveis */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;  /* 900 · wdth 125 · itálico */
  --f-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;  /* 400 · wdth 100 */
  --f-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* métrica */
  --pad:  clamp(20px, 5vw, 88px);
  --maxw: 1560px;
  --gut:  clamp(20px, 3.2vw, 56px);

  /* movimento */
  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 01. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* NÃO colocar overflow-x:hidden/clip aqui: o html é o scrollport dos palcos
   travados desta página e qualquer um dos dois mata o position:sticky deles.
   Sangramento decorativo se resolve no próprio elemento que sangra. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--torque); color:var(--ink); }

:focus-visible{ outline:2px solid var(--torque); outline-offset:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--torque); color:var(--ink); padding:12px 20px;
  font-family:var(--f-mono); font-size:12px;
}
.skip:focus{ left:0; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- 02. TIPOGRAFIA ---------- */
.display{
  font-family:var(--f-display);
  font-style:italic;          /* o itálico expandido rima com o letreiro do logo */
  font-weight:900;
  font-stretch:125%;
  text-transform:uppercase;
  /* .96 dá respiro para acentos e cedilhas do português sem perder densidade */
  line-height:.96;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:balance;
}
/* escalas recalibradas: a largura 125 ocupa ~1,5× a condensada anterior */
.display--l   { font-size:clamp(1.9rem, 4.2vw, 4.3rem); }
.display--xl  { font-size:clamp(2.2rem, 5.6vw, 6rem); }
.display--xxl { font-size:clamp(2.4rem, 7.2vw, 8rem); letter-spacing:-.02em; }

.o-50{ color:var(--muted); }
/* o mesmo papel de .o-50 — a segunda metade da headline — mas quando ela é o
   assunto da seção e não o eco dele, o acento carrega em vez de recuar */
.hl{ color:var(--torque); }

.idx{
  display:block;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.10em;
  color:var(--muted);
  margin-bottom:clamp(20px,2.6vw,38px);
}

.lead{
  font-size:clamp(1.15rem,1.9vw,1.6rem);
  line-height:1.4; font-weight:400;
  color:var(--ink);
  letter-spacing:-.012em;
}
.body{
  color:var(--muted);
  max-width:46ch;
  font-size:clamp(.98rem,1.12vw,1.08rem);
}
.body b{ color:var(--ink); font-weight:500; }
.body--wide{ max-width:52ch; }
.body--center{ margin-inline:auto; text-align:center; max-width:52ch; }

/* ---------- 03. BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.07em;
  padding:18px 26px;
  border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn span,.btn i{ position:relative; z-index:1; font-style:normal; }
.btn i{ transition:transform .5s var(--ease-out); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--torque);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover,.btn:focus-visible{ color:var(--ink); border-color:var(--torque); }
.btn:hover i{ transform:translateX(6px); }
.btn--solid{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn--ghost{ color:var(--ink); }
.btn--ghost:hover i{ transform:translateY(5px); }

/* ---------- 04. HEADER ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:var(--gut);
  padding:clamp(14px,1.6vw,24px) var(--pad);
  mix-blend-mode:normal;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:clamp(10px,1.1vw,14px);
}
.site-head.is-hidden{ transform:translateY(-102%); }
.site-head{ transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease); }

/* header nasce sobre a foto do hero: paleta clara até o scroll ativar is-stuck */
.site-head:not(.is-stuck){ color:var(--bg); }
.site-head:not(.is-stuck) .site-nav a{ color:color-mix(in srgb, var(--bg) 78%, transparent); }
.site-head:not(.is-stuck) .site-nav a:hover{ color:var(--bg); }
.site-head:not(.is-stuck) .head-cta{ border-color:color-mix(in srgb, var(--bg) 40%, transparent); }
.site-head:not(.is-stuck) .head-cta:hover{ color:var(--ink); }
.site-head:not(.is-stuck) .burger span{ background:var(--bg); }
/* com o menu (claro) aberto, o X precisa voltar à tinta escura */
body.menu-open .site-head .burger span{ background:var(--ink); }

/* ---- o logotipo no header ----
   As duas versões ocupam a MESMA caixa (mesmo desenho, mesma proporção), então
   a troca é um crossfade de opacidade: sem salto de layout e sem recarregar
   imagem. A altura é a única medida — a largura vem da proporção. */
.brand{
  position:relative; display:block; margin-right:auto;
  height:26px; flex:0 0 auto;
  transition:height .5s var(--ease);
}
.brand__logo{ display:block; height:100%; transition:opacity .45s var(--ease); }
.brand__logo img{ display:block; height:100%; width:auto; }
/* a escura fica empilhada por cima e só aparece quando o fundo pede */
.brand__logo--escuro{ position:absolute; inset:0; opacity:0; }
.site-head.is-stuck .brand__logo--claro{ opacity:0; }
.site-head.is-stuck .brand__logo--escuro{ opacity:1; }
/* o menu mobile é uma tela clara e passa POR BAIXO do header (z-index 99 vs
   100): sem isto o logo branco desapareceria sobre ele */
body.menu-open .brand__logo--claro{ opacity:0; }
body.menu-open .brand__logo--escuro{ opacity:1; }
/* travado, o header encolhe — o logo acompanha */
.site-head.is-stuck .brand{ height:22px; }

.site-nav{ display:flex; gap:clamp(18px,2vw,34px); }
.site-nav a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
  position:relative; padding-block:4px;
  transition:color .4s var(--ease);
}
.site-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--torque); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.head-cta{
  display:flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.07em;
  padding:11px 18px; border:1px solid var(--line);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.head-cta:hover{ background:var(--torque); color:var(--ink); border-color:var(--torque); }
.head-cta__arrow{ transition:transform .4s var(--ease-out); }
.head-cta:hover .head-cta__arrow{ transform:translateX(4px); }

.burger{ display:none; width:44px; height:44px; position:relative; margin-right:-10px; }
.burger span{
  position:absolute; left:11px; width:22px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease-out), opacity .3s;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* menu mobile */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--bg-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--pad) + 60px) var(--pad) var(--pad);
  opacity:0; transition:opacity .45s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.is-open{ opacity:1; }
.mobile-menu nav{ display:flex; flex-direction:column; }
/* escopado ao nav: sem isto o telefone do rodapé do menu, que também é <a>,
   herdava o display gigante e quebrava em duas linhas */
.mobile-menu nav a{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; font-size:clamp(1.5rem,7vw,2.4rem);
  line-height:1.06; padding:10px 0;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:16px;
  opacity:0; transform:translateY(16px);
}
.mobile-menu.is-open nav a{ animation:mmIn .6s var(--ease-out) forwards; }
.mobile-menu.is-open nav a:nth-child(1){ animation-delay:.06s }
.mobile-menu.is-open nav a:nth-child(2){ animation-delay:.11s }
.mobile-menu.is-open nav a:nth-child(3){ animation-delay:.16s }
.mobile-menu.is-open nav a:nth-child(4){ animation-delay:.21s }
.mobile-menu.is-open nav a:nth-child(5){ animation-delay:.26s }
.mobile-menu.is-open nav a:nth-child(6){ animation-delay:.31s }
.mobile-menu.is-open nav a:nth-child(7){ animation-delay:.36s }
@keyframes mmIn{ to{ opacity:1; transform:none; } }
.mobile-menu nav a i{
  font-family:var(--f-mono); font-style:normal; font-size:11px;
  color:var(--torque); letter-spacing:.1em;
}
.mobile-menu__foot{
  display:flex; justify-content:space-between; margin-top:auto; padding-top:32px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.07em; color:var(--muted);
}

/* ---------- 05. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--ink);
}

/* fundo fotográfico full-bleed */
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg picture{ display:block; width:100%; height:100%; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 52%;
  animation:frameZoom 1.8s var(--ease-out) .1s both;
}
@keyframes frameZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
/* mais leve: o texto ocupa só a coluna esquerda, então a foto pode aparecer.
   A esquerda mantém carga suficiente para o contraste do título e do lead. */
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,16,19,.08) 0%, rgba(13,16,19,.14) 42%, rgba(13,16,19,.60) 100%),
    linear-gradient(90deg, rgba(13,16,19,.62) 0%, rgba(13,16,19,.16) 48%, transparent 72%);
}

.hero__content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto; width:100%;
  padding:clamp(110px,15vh,190px) var(--pad) clamp(40px,5vw,72px);
  /* recuo próprio, menor que --pad: joga a coluna de texto para a esquerda
     sem mexer no recuo das demais seções. No mobile empata com --pad. */
  padding-left:clamp(20px,2.2vw,34px);
}

.hero__title{
  font-family:var(--f-display);
  font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase;
  font-size:clamp(2.3rem,5.8vw,5.8rem);
  line-height:.96;
  letter-spacing:-.015em;
  color:var(--bg);
  margin:clamp(16px,2vw,28px) 0 clamp(18px,2vw,28px);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line__in{
  display:block;
  transform:translateY(104%) skewY(3deg);
  animation:lineUp 1.15s var(--ease-out) var(--d,0s) forwards;
}
@keyframes lineUp{ to{ transform:none; } }

/* palavra dinâmica: as quatro variantes ocupam a MESMA célula de grid,
   então a caixa reserva sempre a largura da maior (CONFIÁVEL) e a troca
   não desloca uma única linha do layout. Herda toda a tipografia do H1 —
   a cor é a única diferença.

   O movimento é o mesmo do hover dos botões: varredura vertical de baixo
   para cima, no --ease-out, só que mais curta. Quem recorta é o .line,
   que já tem overflow:hidden. */
.swap{ display:inline-grid; vertical-align:top; }
/* 130% e não 104%: a caixa da linha é um pouco mais alta que a palavra,
   e um recuo justo deixaria escapar uma lasca da palavra estacionada. */
.swap__w{
  grid-area:1 / 1;
  white-space:nowrap;
  transform:translateY(130%);
  transition:transform .36s var(--ease-out);
}
.swap__w em{ font-style:inherit; font-weight:inherit; color:var(--torque); }
.swap__w.is-active{ transform:translateY(0); }
.swap__w.is-leaving{ transform:translateY(-130%); }
/* volta ao ponto de partida sem atravessar a área visível */
.swap__w.no-anim{ transition:none; }

.hero__lead{
  max-width:38ch;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  line-height:1.46; color:color-mix(in srgb, var(--bg) 82%, transparent);
  font-weight:400;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:clamp(22px,2.4vw,34px) 0 clamp(18px,2vw,28px); }
.hero .btn--ghost{ color:var(--bg); border-color:color-mix(in srgb, var(--bg) 35%, transparent); }
.hero .btn--ghost:hover,.hero .btn--ghost:focus-visible{ color:var(--ink); border-color:var(--torque); }
/* prova social */
.proof{ display:flex; align-items:center; gap:clamp(14px,1.4vw,22px); }
.proof__faces{ display:flex; }
.proof__faces li{
  flex:0 0 auto;              /* senão encolhem como item flex */
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  border:2px solid color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.02em;
  color:var(--bg);
}
.proof__faces li + li{ margin-left:-15px; }
.proof__stars{ width:108px; height:19px; display:block; fill:var(--bg); }
.proof__label{
  margin-top:10px;
  white-space:nowrap;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--bg) 70%, transparent);
}
.proof__label b{ color:var(--bg); font-weight:500; margin-right:4px; }

/* ticker */
.ticker{
  position:relative; z-index:2;
  border-block:1px solid var(--line);
  overflow:hidden; padding:14px 0;
  background:var(--bg-2);
}
.ticker__track{
  display:flex; gap:28px; width:max-content;
  animation:tick 42s linear infinite;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.11em; color:var(--muted);
}
.ticker__track b{ color:var(--muted); font-weight:400; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- 06. MANIFESTO ---------- */
/* Tela escura sobre a página clara: mesmo mecanismo do .scope — os seis tokens
   são reatribuídos localmente, nenhuma regra interna precisa ser duplicada. */
.mf{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;

  /* acento da rede e do fundo desta seção. Nasce no vermelho da marca e o JS
     o leva até o verde no ato "EM MOVIMENTO" — um token só, para que fios,
     molduras, pulsos, marcadores e fundo virem juntos, sem nenhuma regra
     duplicada. Sem JS (ou com movimento reduzido) fica no vermelho. */
  --flow:   var(--torque);   /* destino do giro: hsl(148,72%,67%) — ver setFlow() */

  position:relative;
  background:var(--bg);
  color:var(--ink);
  /* sem fio nas bordas: a passagem entre dobras é sempre uma rampa de cor,
     nunca uma linha — ver a seção 16, TRANSIÇÕES ENTRE DOBRAS */
}
/* o curso do scroll; a altura daqui é a linha do tempo inteira.
   Alto o bastante para dar leitura a cada ato, mas não tanto que o mouse de
   roda (que anda em degraus de ~100px) precise de dezenas de cliques para
   atravessar a seção — era esse o "travado". */
.mf__scroll{ height:720svh; }
.mf__stage{
  position:sticky; top:0; height:100svh;
  overflow:hidden;
  display:flex; align-items:center;
}
/* fundo em três camadas, todas sob o conteúdo:
   1) brasas de torque nos cantos — tira o preto chapado sem virar "glow";
   2) vinheta que devolve o foco ao centro;
   3) ::after com as diagonais de velocidade. */
/* a 1ª declaração é o fallback literal para quem não tem color-mix; a 2ª
   amarra as brasas ao --flow, então o fundo vira junto com a rede */
.mf__stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 8% 14%,  rgba(238,44,44,.20), transparent 68%),
    radial-gradient(52% 44% at 96% 82%, rgba(238,44,44,.16), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, rgba(238,44,44,.10), transparent 72%),
    radial-gradient(120% 85% at 50% 50%, transparent 40%, rgba(6,8,10,.55) 100%);
  background:
    radial-gradient(58% 46% at 8% 14%,  color-mix(in srgb, var(--flow) 20%, transparent), transparent 68%),
    radial-gradient(52% 44% at 96% 82%, color-mix(in srgb, var(--flow) 16%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, color-mix(in srgb, var(--flow) 10%, transparent), transparent 72%),
    radial-gradient(120% 85% at 50% 50%, transparent 40%, rgba(6,8,10,.55) 100%);
}
/* diagonais finas no ângulo do itálico da marca: a mesma inclinação do
   display, então a geometria lê como identidade e não como textura genérica */
.mf__stage::after{
  content:''; position:absolute; inset:-20% -30%; pointer-events:none;
  background:
    repeating-linear-gradient(102deg,
      transparent 0 78px,
      rgba(238,44,44,.16) 78px 79px,
      transparent 79px 132px),
    repeating-linear-gradient(102deg,
      transparent 0 240px,
      rgba(238,44,44,.30) 240px 242px,
      transparent 242px 470px);
  background:
    repeating-linear-gradient(102deg,
      transparent 0 78px,
      color-mix(in srgb, var(--flow) 16%, transparent) 78px 79px,
      transparent 79px 132px),
    repeating-linear-gradient(102deg,
      transparent 0 240px,
      color-mix(in srgb, var(--flow) 30%, transparent) 240px 242px,
      transparent 242px 470px);
  /* a máscara abre o miolo: os fios e o núcleo continuam sendo o assunto */
  -webkit-mask-image:radial-gradient(78% 62% at 50% 50%, transparent 18%, #000 92%);
          mask-image:radial-gradient(78% 62% at 50% 50%, transparent 18%, #000 92%);
}
/* README: as diagonais são estáticas de propósito. Esta seção já roda um scrub
   por frame; animar uma camada em tela cheia disputaria o mesmo orçamento. */

/* --- A FAIXA: a passagem que carrega as viradas da cena ---
   Duas vezes ela atravessa a tela. O que muda acontece embaixo dela, na linha
   de frente — antes as trocas eram um crossfade no lugar e o leitor via o
   estado piscar sem entender de onde veio. A cor é o próprio --flow, então a
   faixa entra vermelha e sai verde na 1ª passagem e faz o caminho de volta na
   2ª, devolvendo a seção ao vermelho da marca. Fora de .mf__frame de
   propósito: assim passa por cima de tudo, inclusive do índice. */
.mf__sweep{
  position:absolute; inset:0; z-index:2;
  overflow:hidden; pointer-events:none;
  opacity:0; visibility:hidden;
}
/* a barra é vertical de propósito: a linha de frente precisa cair no mesmo
   ponto para todos os itens, senão o que vira no topo desencontra do rodapé */
.mf__sweep i{
  position:absolute; top:0; bottom:0; left:0;
  width:38vw;
  transform:translate3d(-50vw,0,0);
  will-change:transform;
  /* o rastro fica à esquerda (a faixa anda para a direita) e o pico de luz
     em 66% — exatamente onde o JS põe a linha de corte */
  background:linear-gradient(90deg,
    transparent 0%, rgba(238,44,44,.10) 26%, rgba(238,44,44,.26) 54%,
    rgba(238,44,44,.46) 66%, rgba(238,44,44,.08) 76%, transparent 88%);
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--flow) 10%, transparent) 26%,
    color-mix(in srgb, var(--flow) 26%, transparent) 54%,
    color-mix(in srgb, var(--flow) 46%, transparent) 66%,
    color-mix(in srgb, var(--flow) 8%, transparent) 76%,
    transparent 88%);
}
/* as mesmas diagonais do fundo, agora só dentro da faixa: a passagem lê como
   velocidade e não como um flash genérico */
.mf__sweep i::after{
  content:''; position:absolute; inset:-30% -20%;
  background:repeating-linear-gradient(102deg,
    transparent 0 26px, rgba(242,244,246,.10) 26px 28px, transparent 28px 62px);
  -webkit-mask-image:linear-gradient(90deg, transparent 8%, #000 52%, transparent 84%);
          mask-image:linear-gradient(90deg, transparent 8%, #000 52%, transparent 84%);
}
/* a linha de frente: o corte nítido que o rastro carrega. É ela que o olho
   segue, e é ela que o JS usa como fronteira entre o antes e o depois. */
.mf__sweep i::before{
  content:''; position:absolute; top:0; bottom:0;
  left:66%; width:2px; margin-left:-1px;
  background:var(--flow);
  box-shadow:0 0 13px 1px var(--flow);
}

.mf__frame{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); height:100%;
  margin-inline:auto;
}

.mf__idx{
  position:absolute; top:clamp(24px,6vh,64px); left:var(--pad);
  margin:0; z-index:3;
}

/* camadas: as três ocupam o mesmo espaço e se revezam pelo progresso */
.mf__ask,
.mf__end{
  position:absolute; inset:0;
  padding-inline:var(--pad);
  display:flex; flex-direction:column; justify-content:center;
}

/* --- ATO 1: a pergunta --- */
.mf__q{
  font-family:var(--f-display);
  font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase;
  font-size:clamp(1.9rem,6.1vw,6.2rem);
  line-height:.96; letter-spacing:-.018em;
  margin:0;
}
/* mesma máscara de linha do H1 do hero */
.mf__ln{ display:block; overflow:hidden; }
.mf__ln i{ display:block; font-style:inherit; transform:translateY(105%); }
.mf__q em{ font-style:inherit; color:var(--torque); }

/* --- ATOS 2-5: a rede --- */
/* left/right em --pad (e não padding) para que as % dos nós resolvam
   exatamente contra a área de conteúdo */
.mf__net{
  position:absolute;
  left:var(--pad); right:var(--pad);
  top:clamp(74px,13vh,132px); bottom:clamp(44px,8vh,88px);
}
.mf__wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mf__wire{
  stroke:var(--flow); stroke-width:.75; fill:none;
  stroke-dasharray:1; stroke-dashoffset:1;   /* pathLength=1 normaliza o traço */
  opacity:0;
}
/* moldura arredondada: fecha em volta do rótulo quando o fio chega */
.mf__ring{
  stroke:var(--flow); stroke-width:1; fill:none;
  stroke-dasharray:1; stroke-dashoffset:1;
  opacity:0;
}
/* X grosso por cima do item quando o veículo para */
.mf__x{ opacity:0; }
/* o X é a marca do bloqueio: fica no vermelho mesmo enquanto a rede vira,
   senão o "parado" se despede em verde no meio do crossfade */
.mf__x line{
  stroke:var(--torque); stroke-width:5; fill:none;
  stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
/* pulso viajando do núcleo até cada item — só roda no estado "em movimento" */
.mf__pulse{
  stroke:var(--flow); stroke-width:1.7; fill:none;
  stroke-linecap:round;
  stroke-dasharray:.08 .92; stroke-dashoffset:1;
  opacity:0;
}
.mf__net.is-live .mf__pulse{ animation:mfPulse 1.9s linear infinite; }
@keyframes mfPulse{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* marcador à esquerda do rótulo: ponto → X (parado) → ✓ (em movimento) */
.mf__mk{
  position:relative; display:inline-block; vertical-align:middle;
  width:12px; height:12px; margin-right:9px; margin-top:-2px;
}
.mf__mk i{ position:absolute; left:4px; top:4px; width:4px; height:4px; background:var(--flow); }
.mf__mk svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0; overflow:visible; }
.mf__mk svg path{
  fill:none; stroke:var(--flow); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

.mf__node{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  margin:0; padding:5px 10px;
  background:var(--bg);            /* recorta o fio por trás do rótulo */
  font-family:var(--f-mono);
  font-size:clamp(10px,.92vw,12px); letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--muted);
  opacity:0;
}
.mf__node--core{
  padding:6px 14px;
  font-family:var(--f-display);
  font-style:italic; font-weight:900; font-stretch:125%;
  font-size:clamp(1.5rem,4.2vw,3.9rem);
  letter-spacing:-.015em; line-height:1;
  color:var(--ink);
}
.mf__node--core b{ font-weight:inherit; }
/* os dois estados moram fora do fluxo: trocar um pelo outro não mexe no layout */
.mf__state{
  position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  margin-top:.06em;
  font-size:.46em; letter-spacing:-.01em;
  color:var(--flow); white-space:nowrap;
  opacity:0;
}
/* PARADO pertence ao vermelho; só EM MOVIMENTO acompanha o --flow */
.mf__state--stop{ color:var(--torque); }

.mf__node--clientes    { --x:47; --y:8;  }
.mf__node--trabalho    { --x:15; --y:27; }
.mf__node--entregas    { --x:82; --y:21; }
.mf__node--core        { --x:50; --y:52; }
.mf__node--rotina      { --x:13; --y:76; }
.mf__node--renda       { --x:81; --y:71; }
.mf__node--compromissos{ --x:50; --y:93; }

/* --- ATO 6: o fecho --- */
/* centrado no eixo: o ato fecha a seção, então a coluna de texto sai da
   margem esquerda e assume o mesmo centro do núcleo da rede */
.mf__end{
  opacity:0; visibility:hidden;
  align-items:center; text-align:center;
}
/* a foto do motor cobre o palco inteiro por trás do fecho. Fica dentro de
   .mf__end (herda o fade do ato) mas sangra até as bordas com um inset
   negativo que anula o padding-inline da camada. */
.mf__endbg{
  position:absolute; z-index:-1;
  top:0; bottom:0;
  /* full-bleed de verdade: o antigo inset negativo só anulava o padding da
     camada, então em monitores mais largos que --maxw (1560px) a foto parava
     antes das bordas e sobrava a trama do palco nos cantos. Agora ela sangra
     até a viewport — o overflow:hidden de .mf__stage corta o excedente e a
     barra de rolagem não gera scroll horizontal. */
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  overflow:hidden; pointer-events:none;
}
.mf__endbg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  will-change:transform;   /* o scrub escreve translate+scale aqui (paralaxe) */
  /* a foto é só a base do fecho: escurecida e dessaturada, o texto branco
     mantém contraste em cima do motor e das faixas vermelhas */
  filter:saturate(.9) contrast(1.05) brightness(.66);
}
/* scrim em três camadas: uma mancha central que sustenta a coluna de texto
   (o "POR ISSO," é mono pequeno e caía justo sobre a tampa do motor, a área
   mais movimentada da foto), um radial que fecha as bordas e um vertical
   que apoia o CTA */
.mf__endbg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(46% 36% at 50% 42%, rgba(13,16,19,.58), transparent 76%),
    radial-gradient(80% 72% at 50% 48%, rgba(13,16,19,.50), rgba(13,16,19,.88) 100%),
    linear-gradient(to bottom, rgba(13,16,19,.45), transparent 32% 68%, rgba(13,16,19,.70));
}
.mf__kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em;
  color:var(--torque); margin:0 0 clamp(14px,1.8vw,22px);
}
.mf__final{
  font-family:var(--f-display);
  font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase;
  font-size:clamp(1.6rem,4.3vw,4.4rem);
  line-height:.98; letter-spacing:-.018em;
  margin:0;
}
.mf__final em{ font-style:inherit; color:var(--torque); }
.mf__sub{
  color:var(--muted); max-width:54ch;
  margin:clamp(20px,2.4vw,34px) auto 0;
  font-size:clamp(.98rem,1.12vw,1.08rem);
}
.mf__cta{ align-self:center; margin-top:clamp(24px,2.8vw,38px); }
/* README: legenda branca sobre torque reprova (4,0:1) — o preenchido mantém
   legenda escura mesmo com os tokens invertidos desta seção. */
.mf .btn:hover,
.mf .btn:focus-visible{ color:#0D1013; }

/* ---------- 07. SERVIÇOS ---------- */
.services{
  position:relative;
  padding-block:clamp(90px,13vw,190px) clamp(60px,8vw,120px);
  /* brasas de torque no fundo: a cor da marca também vive fora dos estados
     ativos. Peso baixo de propósito — o teto de 10% de torque é da tela toda. */
  background:
    radial-gradient(38% 22% at 4% 12%,  rgba(238,44,44,.07), transparent 70%),
    radial-gradient(34% 26% at 98% 72%, rgba(238,44,44,.06), transparent 72%),
    var(--bg);
}
/* o título agora é a primeira linha do próprio painel — atravessa as duas
   colunas e, no modo travado, fica sobre a foto */
.services__head{ position:relative; z-index:1; grid-column:1/-1; margin-bottom:clamp(48px,6vw,96px); }
/* travado, a dobra inteira cabe numa tela: o título encolhe e cede o espaço
   para a lista, e a faixa branca que sobrava antes dele deixa de existir */
.services:has(.srvscroll.is-scrub){ padding-block:0; }
/* travado, a foto cobre a seção inteira: a geometria de fundo fica atrás do
   painel sem nunca aparecer */
.services:has(.srvscroll.is-scrub) .services__geo{ display:none; }
.srvscroll.is-scrub .services__head{ margin-bottom:clamp(22px,3.4vh,46px); }
.srvscroll.is-scrub .services__head .idx{ margin-bottom:clamp(10px,1.4vh,18px); }
.srvscroll.is-scrub .services__head .display{
  font-size:clamp(1.4rem,2.6vw,2.5rem);
  text-shadow:0 1px 22px rgba(13,16,19,.85);
}

.panel{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--gut); align-items:start;
}

/* ---- modo scroll (desktop): o painel trava e a rolagem passa de um serviço
   para o outro. A classe entra pelo JS, então sem JS nada disso se aplica. ---- */
.srvscroll{ position:relative; }
/* meia tela por serviço: passa de um para o outro com poucos giros da roda */
.srvscroll.is-scrub{ height:calc(100svh + var(--srv-steps,4) * 50svh); }
.srvscroll.is-scrub .panel{
  /* a foto toma a tela: enquanto o painel está travado esta é uma "sala
     escura", como .mf e .diag — os MESMOS seis tokens são reatribuídos e
     nenhuma regra interna precisa ser duplicada. */
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   rgba(255,255,255,.18);
  --muted:  #A8B1BA;
  --ink:    #F2F4F6;
  color:var(--ink);

  position:sticky; top:0; min-height:100svh;
  align-content:center;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  padding-block:clamp(80px,11vh,130px) clamp(30px,5vh,60px);
}
/* ---- a foto de fundo ---- */
.panel__bg{ display:none; }
.srvscroll.is-scrub .panel__bg{
  display:block; position:absolute; z-index:0;
  top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw;
  overflow:hidden; background:var(--bg);
}
.panel__bg-layer{ position:absolute; inset:0; }
.panel__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  /* zoom lento conduzido pela própria rolagem (--kb vai de 0 a 1 dentro de
     cada serviço): a foto nunca fica parada enquanto o trecho corre */
  transform:scale(calc(1.04 + var(--kb,0) * .07)) translate3d(0,calc(var(--kb,0) * -1.4%),0);
  transition:opacity .85s var(--ease);
  filter:saturate(.8) contrast(1.06);
  will-change:transform,opacity;
}
.panel__bg img.is-on{ opacity:1; }
/* véu de leitura: pesado à esquerda, onde vive a lista; leve à direita, para
   a foto continuar sendo foto. Mesma trama de varredura do palco. */
.panel__bg-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(13,16,19,.95) 0%, rgba(13,16,19,.88) 42%, rgba(13,16,19,.62) 74%, rgba(13,16,19,.48) 100%),
    radial-gradient(52% 40% at 4% 8%, rgba(238,44,44,.14), transparent 70%),
    /* canto do texto de apoio: o bloco da direita cai sobre a parte mais
       viva da foto, então esse canto ganha um véu extra */
    radial-gradient(60% 46% at 88% 92%, rgba(13,16,19,.7), transparent 72%),
    linear-gradient(to top, rgba(13,16,19,.78), transparent 34%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 4px);
}
.srvscroll.is-scrub .panel__list,
.srvscroll.is-scrub .panel__view{ position:relative; z-index:1; }
/* sobre foto, o cinza de repouso do acordeão some em fundo claro: os nomes
   inativos sobem de peso e ganham um assento escuro atrás */
.srvscroll.is-scrub .panel.is-engaged .srv:not(.is-active) .srv__name{
  color:#DDE3E8; opacity:.6;
}
.srvscroll.is-scrub .srv__name,
.srvscroll.is-scrub .srv__num,
.srvscroll.is-scrub .panel__d{ text-shadow:0 1px 22px rgba(13,16,19,.85); }
/* No modo scroll o texto vive na coluna da direita: a lista não muda de
   altura, então o painel travado nunca pula. O original não sai do DOM —
   fica só fora da vista, para o leitor de tela continuar tendo a descrição
   junto do nome do serviço (a cópia da direita é aria-hidden). */
.srvscroll.is-scrub .srv__drop{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
/* tudo precisa caber numa tela: linhas mais justas e palco mais baixo */
.srvscroll.is-scrub .srv__hit{ padding-block:clamp(16px,2.1vh,30px); }
/* No modo scroll a lista NÃO é um controle: quem passa de um serviço para o
   outro é só a rolagem. O cursor e o "+" prometiam um clique que não existe
   mais, então os dois saem. O botão continua no DOM e focável pelo teclado —
   é a única forma de navegar a lista sem mouse. */
.srvscroll.is-scrub .srv__hit{ cursor:default; }
.srvscroll.is-scrub .srv__plus{ display:none; }
/* a coluna da foto sumiu como moldura: sobra largura, então o nome cresce —
   até onde ainda cabe em uma linha só, que é o que dá o ritmo da lista */
.srvscroll.is-scrub .srv__name{ font-size:clamp(1.4rem,2.9vw,2.75rem); text-wrap:nowrap; }
.srvscroll.is-scrub .panel__view{ position:static; align-self:end; }
/* no modo scroll a foto é o fundo — a moldura da coluna sai de cena */
.srvscroll.is-scrub .panel__stage{ display:none; }
.srvscroll.is-scrub .panel__meta{ padding-top:0; }
.srvscroll.is-scrub .panel__meta-num{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  font-size:clamp(2rem,4.4vw,4rem); line-height:.9; letter-spacing:-.02em;
}
/* a geometria do palco foi pensada para a coluna em fluxo; travada, ela
   sobra na saída da seção */
.srvscroll.is-scrub .panel__geo{ display:none; }
.panel__list{ border-top:1px solid var(--line); }

.srv{ border-bottom:1px solid var(--line); position:relative; }
.srv__hit{
  width:100%; position:relative; display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(18px,3vw,48px);
  padding:clamp(20px,2.4vw,34px) 0;
  text-align:left;
  transition:padding .5s var(--ease), opacity .45s var(--ease);
}
.srv__num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.07em;
  color:var(--muted); transition:color .4s var(--ease);
  align-self:start; padding-top:.6em;
}
.srv__name{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase;
  font-size:clamp(1.25rem,2.9vw,2.6rem);
  line-height:1; letter-spacing:-.026em;
  transition:transform .55s var(--ease-out), color .45s var(--ease), letter-spacing .55s var(--ease-out);
  transform-origin:left center;
  color:var(--ink);
}
.srv__name .mb{ display:none; }
.srv__plus{
  width:16px; height:16px; position:relative; flex:none;
  transition:transform .55s var(--ease-out);
}
.srv__plus::before,.srv__plus::after{
  content:''; position:absolute; background:var(--muted); transition:background .4s var(--ease);
}
.srv__plus::before{ left:0; top:50%; width:16px; height:1px; }
.srv__plus::after{ top:0; left:50%; width:1px; height:16px; }

/* estado ativo — o destaque é o torque, não o contraste de cinza */
.panel.is-engaged .srv:not(.is-active) .srv__name{ color:var(--muted); opacity:.42; }
.panel.is-engaged .srv:not(.is-active) .srv__num{ opacity:.4; }
.srv.is-active .srv__name{ color:var(--torque); letter-spacing:-.014em; transform:translateX(clamp(8px,1.4vw,26px)); }
.srv.is-active .srv__num{ color:var(--torque); }
.srv.is-active .srv__plus::before,.srv.is-active .srv__plus::after{ background:var(--torque); }
.srv.is-active .srv__plus{ transform:rotate(90deg); }

/* haste vermelha à esquerda + lavagem quente no fundo da linha ativa */
.srv__hit::before{
  content:''; position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  top:0; bottom:0; z-index:-1;
  background:linear-gradient(90deg, rgba(238,44,44,.10), rgba(238,44,44,0) 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.srv.is-active .srv__hit::before{ opacity:1; }
.srv::before{
  content:''; position:absolute; left:clamp(-26px,-1.4vw,-8px); top:14%; height:72%; width:3px;
  background:var(--torque);
  transform:scaleY(0); transform-origin:center;
  transition:transform .5s var(--ease-out);
}
.srv.is-active::before{ transform:scaleY(1); }

/* a linha de baixo é a barra de progresso do trecho: no modo scroll ela
   preenche conforme a rolagem atravessa aquele serviço */
.srv::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--torque); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.srv.is-active::after{ transform:scaleX(1); }
.srvscroll.is-scrub .srv.is-active::after{
  transform:scaleX(var(--fill,0)); transition:transform .12s linear;
}

/* drop (conteúdo complementar) */
.srv__drop{
  overflow:hidden; height:0;
  transition:height .55s var(--ease-out);
}
.srv__drop > *{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease) .08s, transform .5s var(--ease-out) .08s; }
.srv.is-active .srv__drop > *{ opacity:1; transform:none; }
.srv__drop p{
  color:var(--muted); max-width:52ch;
  padding-left:clamp(0px,1.4vw,26px);
  font-size:.98rem;
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 clamp(22px,2.4vw,32px); padding-left:clamp(0px,1.4vw,26px); }
.tags li{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.07em;
  color:var(--muted); border:1px solid var(--line); padding:6px 10px;
}

/* palco de imagem */
.panel__view{ position:sticky; top:120px; }
.panel__stage{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--line);
}
.panel__stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.07);
  transition:opacity .7s var(--ease), transform 1.2s var(--ease-out);
  filter:saturate(.85) contrast(1.05);
}
.panel__stage img.is-on{ opacity:1; transform:scale(1); }
.panel__stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(13,16,19,.55), transparent 45%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}
.panel__meta{
  display:flex; align-items:center; gap:14px; padding-top:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.09em; color:var(--muted);
}
.panel__meta-num{ color:var(--torque); }
.panel__meta-line{ flex:1; height:1px; background:var(--line); }

/* texto do serviço no modo scroll: as versões ficam empilhadas na mesma
   caixa e trocam por crossfade — altura constante, painel travado sem pulo */
.panel__detail{ display:none; }
.srvscroll.is-scrub .panel__detail{
  display:block; position:relative; margin-top:20px;
  min-height:9.5em;
}
.srvscroll.is-scrub .panel__meta{ align-items:flex-end; gap:18px; }
.srvscroll.is-scrub .panel__meta-line{ margin-bottom:.55em; }
.srvscroll.is-scrub .panel__meta-txt{ margin-bottom:.35em; }
.srvscroll.is-scrub .panel__d p{ font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.55; }
.panel__d{
  position:absolute; inset:0;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
  pointer-events:none;
}
.panel__d.is-on{ opacity:1; transform:none; }

/* CTA do canto direito: só existe no modo scroll, onde a coluna da direita
   é o único ponto de saída da dobra travada */
.panel__cta{ display:none; }
.srvscroll.is-scrub .panel__cta{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,2.6vh,30px);
}
.srvscroll.is-scrub .panel__cta .btn{ padding:14px 20px; }
/* sobre foto, o contorno de 1px some: o fantasma ganha um assento escuro */
.srvscroll.is-scrub .panel__cta .btn:not(.btn--solid){
  background:rgba(13,16,19,.55);
  backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.28);
}
.srvscroll.is-scrub .panel__cta .btn--solid{
  background:var(--ink); color:#0D1013; border-color:var(--ink);
}
/* README: legenda clara sobre torque reprova (4,0:1) — no preenchimento
   vermelho do hover a legenda vira escura, como em .mf */
.srvscroll.is-scrub .panel__cta .btn:hover,
.srvscroll.is-scrub .panel__cta .btn:focus-visible{ color:#0D1013; }
.panel__d p{ color:var(--muted); font-size:.95rem; }
.panel__d .tags{ padding-left:0; margin:14px 0 0; }

/* ---------- 08. DIAGNÓSTICO ---------- */
/* A seção inteira é a sala escura: os MESMOS seis nomes de token são
   reatribuídos aqui (mesmo mecanismo de .mf). Nenhuma regra interna precisa
   ser duplicada — o instrumento e o texto herdam o conjunto escuro. */
.diag{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;

  position:relative; overflow:hidden;   /* a geometria sangra até a borda, não para a seção seguinte */
  padding-block:clamp(90px,12vw,180px);
  color:var(--ink);
  background:
    radial-gradient(40% 26% at 6% 10%,  rgba(238,44,44,.13), transparent 70%),
    radial-gradient(38% 28% at 96% 84%, rgba(238,44,44,.10), transparent 72%),
    var(--bg);
}
.diag__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,90px); align-items:center;
}
/* a quebra do título é escrita à mão (os <br>): o corpo cede um pouco para
   que a linha mais longa caiba na coluna e o desenho não rearrume sozinho */
.diag__type .display{ margin-bottom:clamp(28px,3vw,44px); font-size:clamp(1.6rem,3.3vw,3.3rem); }
.diag__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 22px; margin-top:clamp(28px,3.4vw,44px); }
/* torque cheio desde o repouso: é o único CTA da seção e o preto ao redor
   aguenta o peso. Texto escuro sobre o vermelho — 4,6:1. */
.diag__cta .btn--solid{ background:var(--torque); border-color:var(--torque); color:#0D1013; }
.diag__cta .btn--solid::before{ background:var(--ink); }
.diag__cta .btn--solid:hover,.diag__cta .btn--solid:focus-visible{ color:#0D1013; border-color:var(--ink); }
/* instrumento: painel elevado dentro da sala escura */
.scope{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  padding:clamp(18px,2vw,30px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
/* fio de torque na borda de cima: marca o painel sem pintar a caixa toda */
.scope::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg, var(--torque), rgba(238,44,44,0) 68%);
}
.scope__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.10em; color:var(--muted);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.scope__live{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); }
.scope__id{ color:var(--muted); }
.scope__dot{ width:7px; height:7px; border-radius:50%; background:var(--torque); animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

.scope__wave{ width:100%; height:clamp(150px,20vw,240px); margin:20px 0 8px; }
.scope__grid path{ stroke:var(--line); stroke-width:.6; fill:none; }
/* varredura: uma faixa de torque atravessa a tela em loop. Em screen ela
   clareia o fundo escuro em vez de virar um bloco chapado. */
.scope__scan{
  fill:url(#scanGrad); opacity:.5; mix-blend-mode:screen;
  animation:scan 4.6s linear infinite;
}
@keyframes scan{ from{ transform:translateX(0); } to{ transform:translateX(516px); } }
.scope__trace{
  fill:none; stroke:var(--torque); stroke-width:1.6;
  stroke-linejoin:round; stroke-linecap:round;
  opacity:0;
  filter:drop-shadow(0 0 6px rgba(238,44,44,.35));
  transition:opacity .5s var(--ease);
}
.scope__trace.is-on{ opacity:1; }
/* na carga da seção, a primeira leitura "desenha"; trocas por hover/toque
   depois disso só fazem crossfade — reaparecer riscando de novo seria
   repetitivo a cada troca de etapa */
.is-in .scope__trace[data-trace="1"]{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.6s var(--ease-out) .2s forwards;
}

.scope__read{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 0 18px; border-top:1px solid var(--line); }
.scope__step{
  position:relative;
  display:flex; flex-direction:column; gap:4px; width:100%;
  text-align:left; padding:10px 8px 16px; margin:-10px -8px 0; border-radius:2px;
  transition:background .35s var(--ease), opacity .35s var(--ease);
}
/* barra de tempo da etapa: mostra que a leitura anda sozinha e quanto falta
   para a próxima. O JS escreve --t (0..1). */
.scope__step-bar{
  position:absolute; left:8px; right:8px; bottom:0; height:2px;
  background:var(--line); overflow:hidden;
}
.scope__step-bar::after{
  content:''; display:block; height:100%; width:100%;
  background:var(--torque); transform-origin:left;
  transform:scaleX(var(--t,0));
}
.scope__step.is-on .scope__step-bar::after{ transform:scaleX(var(--t,0)); }
.scope__step:not(.is-on) .scope__step-bar::after{ transform:scaleX(0); }
.scope__step b{ font-family:var(--f-mono); font-size:9px; letter-spacing:.09em; color:var(--muted); font-weight:400; }
.scope__step span{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  font-size:clamp(1rem,1.7vw,1.5rem); line-height:1; color:var(--ink);
  text-transform:uppercase; letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.scope__step i{ font-family:var(--f-mono); font-style:normal; font-size:9px; letter-spacing:.06em; color:var(--muted); }
.scope__read:hover .scope__step:not(:hover){ opacity:.45; }
.scope__step:hover,.scope__step:focus-visible{ background:color-mix(in srgb, var(--torque) 8%, transparent); }
.scope__step.is-on b{ color:var(--torque); }
.scope__step.is-on span{ color:var(--torque); }
.scope__step.is-on{ background:color-mix(in srgb, var(--torque) 9%, transparent); }

/* legenda da etapa: troca junto com o traçado */
.scope__say{
  min-height:3.2em; color:var(--muted); font-size:.92rem; line-height:1.6;
  padding-bottom:18px; max-width:46ch;
  transition:opacity .25s var(--ease);
}
.scope__say.is-swap{ opacity:0; }

.scope__foot{
  display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.09em; color:var(--muted);
}
.scope__foot b{ color:var(--torque); font-weight:400; transition:opacity .2s var(--ease); }
.scope__foot b.is-swap{ opacity:0; }
.scope__bar{ flex:1; height:2px; background:var(--line); overflow:hidden; }
.scope__bar i{ display:block; height:100%; width:0; background:var(--torque); transition:width 2s var(--ease-out); }
.is-in .scope__bar i{ width:100%; }

/* ---------- 08b. ESPECIALIDADES (leitura técnica do veículo) ---------- */
/* Terceira sala escura da página: os MESMOS seis tokens são reatribuídos,
   como em .mf e .diag. A dobra tem dois estados — em fluxo (sem JS, movimento
   reduzido) é uma lista editorial com o desenho do veículo no topo; travada
   (.is-scrub), vira uma leitura em camadas sobre o mesmo grid de uma célula. */
.sys{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;
  color:var(--ink);
  position:relative;
  padding-block:clamp(70px,10vw,140px);
  background:
    radial-gradient(56% 38% at 10% 2%,  rgba(238,44,44,.10), transparent 70%),
    radial-gradient(48% 38% at 94% 96%, rgba(238,44,44,.07), transparent 72%),
    var(--bg);
}
.sysscroll{ position:relative; }
.sys__stage{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(34px,5vw,68px);
}
.sys__hl{ color:var(--torque); }

/* ---- em fluxo: a ponte e a assinatura não têm função, o resto vira leitura
   corrida com o veículo no topo e os seis sistemas em lista ---- */
.sys__bridge,.sys__tag{ display:none; }
.sys__head .body{ margin-top:clamp(20px,2.4vw,32px); }
.sys__list{ display:grid; gap:clamp(22px,2.6vw,34px); border-top:1px solid var(--line); }
.sysd{ padding-top:clamp(18px,2.2vw,26px); border-bottom:1px solid var(--line); padding-bottom:clamp(18px,2.2vw,26px); }
.sysd__n{
  display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.09em;
  color:var(--torque); margin-bottom:clamp(10px,1.2vw,16px);
}
.sysd__h{ font-size:clamp(1.2rem,2.1vw,2rem); margin-bottom:clamp(10px,1.2vw,16px); }
.sysd .body{ max-width:46ch; }
.sys__end .body{ margin-top:clamp(18px,2.2vw,28px); }
.sys__cta{ margin-top:clamp(24px,3vw,38px); }
/* mesmo CTA da dobra do diagnóstico: torque cheio desde o repouso */
.sys__cta.btn--solid{ background:var(--torque); border-color:var(--torque); color:#0D1013; }
.sys__cta.btn--solid::before{ background:var(--ink); }
.sys__cta.btn--solid:hover,.sys__cta.btn--solid:focus-visible{ color:#0D1013; border-color:var(--ink); }
.sys__prog{ display:none; }

/* ---- o desenho do veículo ---- */
/* em fluxo o desenho é centralizado e limitado; travado, quem manda é o
   grid (margem auto aqui venceria o justify-self e centralizaria o veículo) */
.sysscroll:not(.is-scrub) .sys__rig{ width:100%; max-width:900px; justify-self:center; }
.rig{ width:100%; height:auto; overflow:visible; }
/* duas camadas no mesmo enquadramento: a caminhonete inteira, que é o estado
   padrão, e o raio-x — que só existe dentro da janela do feixe */
.rig__solid{ transition:opacity .9s var(--ease); }
.rig__xray{ transition:opacity .7s var(--ease); }
/* sem o modo travado não há feixe: o raio-x perde o recorte e vira um
   diagrama parado por cima do veículo, sem esconder nenhuma informação */
.sysscroll:not(.is-scrub) .rig__xray{ clip-path:none; filter:none; opacity:.5; }
.rig__beam{ opacity:0; transition:opacity .5s var(--ease); }
.rig__beam-ln{ fill:var(--torque); }
.rig__beam-glow{ fill:url(#rigGlow); }
.rig__win,.rig__beam{ transform:translateX(var(--sx,-200px)); }
/* em fluxo os pontos já estão todos acesos: sem JS, o diagrama continua
   completo. Travado, eles entram um a um conforme o feixe passa. */
.hot{
  color:#8A949E;
  transition:opacity .6s var(--ease), transform .6s var(--ease-out), color .5s var(--ease);
}
.hot.is-live{ color:var(--torque); }
.sysscroll.is-scrub .hot{ opacity:0; transform:translateY(7px); }
.sysscroll.is-scrub .hot.is-on{ opacity:1; transform:none; }
.sysscroll.is-scrub .sys__stage.is-clear .hot{ opacity:0; }
.hot__ln{ stroke:currentColor; stroke-opacity:.5; }
.hot__ring{ stroke:currentColor; stroke-opacity:.32; }
.hot__dot{ fill:currentColor; }
.hot__t{
  fill:currentColor; font-family:var(--f-mono); font-size:19px; letter-spacing:.09em;
}
/* a saída alternativa do ponto 01 só entra em cena no telefone */
.hot__ln--alt,.hot__t--alt{ display:none; }

/* ---- modo travado: o palco prende e a rolagem conduz a leitura ---- */
.sysscroll.is-scrub{ height:calc(100svh + 240svh); }
.sysscroll.is-scrub .sys__stage{
  position:sticky; top:0; height:100svh;
  padding-block:clamp(66px,10vh,112px) clamp(24px,4vh,52px);
  /* uma célula só: todas as camadas ocupam o mesmo espaço e cada uma se
     posiciona sozinha — nada empurra nada, então não existe layout shift */
  grid-template:1fr / 1fr; gap:0;
}
.sysscroll.is-scrub .sys__stage > *{ grid-area:1/1; }

/* camadas que entram e saem por classe (reversíveis por construção) */
.sysscroll.is-scrub .sys__bridge,
.sysscroll.is-scrub .sys__head,
.sysscroll.is-scrub .sys__rig,
.sysscroll.is-scrub .sys__end,
.sysscroll.is-scrub .sys__tag,
.sysscroll.is-scrub .sysd{
  opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease), transform .7s var(--ease-out);
}
.sysscroll.is-scrub .sys__stage > .is-on,
.sysscroll.is-scrub .sysd.is-on{ opacity:1; pointer-events:auto; transform:none; }

/* ponte com o diagnóstico */
.sysscroll.is-scrub .sys__bridge{
  display:grid; justify-self:center; align-self:center;
  grid-template-columns:auto minmax(120px,17vw) auto; align-items:center; gap:14px 16px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--muted);
  transform:translateY(10px);
}
.sys__bar{ height:1px; background:var(--line); position:relative; overflow:hidden; }
.sys__bar i{ position:absolute; inset:0 auto 0 0; width:calc(var(--bar,0) * 100%); background:var(--torque); }
.sys__bridge-n{ color:var(--torque); }
.sys__bridge-b{
  grid-column:1/-1; text-align:center; color:var(--ink);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.sys__bridge.is-mapped .sys__bridge-b{ opacity:1; transform:none; }

/* abertura */
.sysscroll.is-scrub .sys__head{
  justify-self:start; align-self:center; width:min(56%,760px);
  transform:translateY(26px);
}
.sysscroll.is-scrub .sys__tag{
  display:block; justify-self:start; align-self:start;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; color:var(--muted);
  transform:translateY(-8px);
}

/* o veículo: entra pela direita e depois só respira */
.sysscroll.is-scrub .sys__rig{
  justify-self:end; align-self:center; width:min(62%,940px);
  transform:translateX(38px);
}
.sysscroll.is-scrub .sys__rig .rig{
  transform:translate3d(var(--drift,0px),0,0) scale(var(--rigS,1));
  transition:opacity .6s var(--ease);
}
/* fecho: o raio-x se apaga e sobra o veículo inteiro, atrás da mensagem */
.sysscroll.is-scrub .sys__stage.is-clear .rig__xray{ opacity:0; }
.sysscroll.is-scrub .sys__stage.is-clear .rig__solid{ opacity:.3; }
.sysscroll.is-scrub .sys__stage.is-clear .rig__beam{ opacity:0; }

/* o sistema ativo: as versões empilhadas na mesma caixa */
.sysscroll.is-scrub .sys__list{
  justify-self:start; align-self:center;
  width:min(36%,440px); display:block; border:0; gap:0;
  position:relative; min-height:clamp(230px,32vh,330px);
}
.sysscroll.is-scrub .sysd{
  position:absolute; inset:0; border:0; padding:0;
  transform:translateY(14px);
  text-shadow:0 1px 22px rgba(13,16,19,.8);
}
.sysscroll.is-scrub .sysd__h{ font-size:clamp(1.3rem,2.3vw,2.15rem); }

/* fecho */
.sysscroll.is-scrub .sys__end{
  justify-self:center; align-self:center; text-align:center;
  max-width:min(74%,880px); transform:translateY(20px);
}
.sysscroll.is-scrub .sys__end .body{ margin-inline:auto; }
.sysscroll.is-scrub .sys__end .display{ font-size:clamp(1.5rem,3.1vw,3.1rem); }

/* régua de progresso */
.sysscroll.is-scrub .sys__prog{
  display:grid; gap:9px; justify-self:stretch; align-self:end;
}
.sys__prog-ln{ display:block; position:relative; height:1px; background:var(--line); }
.sys__prog-ln i{ position:absolute; inset:0 auto 0 0; width:calc(var(--p,0) * 100%); background:var(--torque); }
.sys__prog-t{
  display:grid; grid-template-columns:repeat(5,1fr);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--muted);
}
.sys__prog-t b{ font-weight:400; opacity:.3; transition:opacity .45s var(--ease), color .45s var(--ease); }
.sys__prog-t b.is-on{ opacity:1; color:var(--torque); }

/* ---- travado no mobile: o veículo ocupa a faixa de cima e o texto vive na
   faixa de baixo. Duas linhas em vez de uma célula só — a leitura continua
   sendo a mesma, mas empilhada. ---- */
@media (max-width:1024px){
  .sys__geo{ display:none; }
  /* na tela estreita a legenda dentro do desenho repetiria o nome que já
     aparece logo abaixo: fica só o ponto e a linha de chamada */
  /* AS LEGENDAS DOS PONTOS. Escondidas, as linhas-guia apontavam para o vazio:
     o desenho ficava com riscos sem destino. O corpo precisa crescer — as 1415
     unidades do desenho cabem em ~360px de tela, então as 19 do desktop dariam
     ~5px. Em troca, nesse corpo duas legendas não convivem na mesma faixa:
     aparece uma de cada vez, a do ponto que o feixe está lendo. Só no modo
     travado — em fluxo (movimento reduzido, sem JS) não existe "ponto lido" e
     quem dá os nomes é a lista logo abaixo, como antes. */
  .hot__t{ display:none; }            /* em fluxo seguem escondidas, como antes */
  .sysscroll.is-scrub .hot__t{
    display:block; font-size:44px; letter-spacing:.04em;
    opacity:0; transition:opacity .4s var(--ease);
  }
  .sysscroll.is-scrub .hot.is-live .hot__t{ opacity:1; }
  /* 01 sai por baixo em vez de por cima: no alto à esquerda sobram 232 unidades
     até a borda do quadro e a legenda nesse corpo pede ~326 (ver o par
     .hot__ln--alt / .hot__t--alt no index.html) */
  .sysscroll.is-scrub .hot[data-i="0"] .hot__ln:not(.hot__ln--alt),
  .sysscroll.is-scrub .hot[data-i="0"] .hot__t:not(.hot__t--alt){ display:none; }
  .sysscroll.is-scrub .hot__ln--alt{ display:block; }
  .sysscroll.is-scrub{ height:calc(100svh + 210svh); }
  .sysscroll.is-scrub .sys__stage{
    padding-block:clamp(84px,13vh,120px) clamp(56px,8vh,80px);
    /* linhas do tamanho do conteúdo e o par (veículo + texto) centralizado:
       sem vazio grande sobrando em cima */
    grid-template:auto auto / 1fr; align-content:center;
  }
  .sysscroll.is-scrub .sys__stage > *{ grid-area:2/1; }
  .sysscroll.is-scrub .sys__rig{
    grid-area:1/1; justify-self:stretch; align-self:end; width:100%;
    transform:translateY(-14px);
  }
  .sysscroll.is-scrub .sys__head{ width:100%; align-self:center; }
  .sysscroll.is-scrub .sys__list{ width:100%; align-self:start; min-height:clamp(200px,28vh,260px); }
  .sysscroll.is-scrub .sys__end{ max-width:100%; }
  .sysscroll.is-scrub .sys__end .display{ font-size:clamp(1.5rem,7.4vw,2.4rem); }
  /* a régua sai do fluxo do grid para ficar colada na base da tela */
  .sysscroll.is-scrub .sys__prog{
    position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(18px,3vh,32px);
  }
  .sysscroll.is-scrub .sys__tag{ display:none; }
  .sysscroll.is-scrub .sys__bridge{ align-self:center; }
}

/* ---------- 08c. A GUELTUR / SEDE ---------- */
/* Quarta sala escura: os MESMOS seis tokens são reatribuídos, como em .mf,
   .diag e .sys. A dobra tem dois estados — em fluxo (mobile, sem JS,
   movimento reduzido) é uma sequência editorial vertical; travada
   (.is-scrub), a fotografia vira o eixo central e o texto se organiza dos
   dois lados dela.

   A regra que governa tudo aqui: a foto é vertical e continua vertical. A
   moldura já nasce no tamanho final e quem abre é o RECORTE — então a
   imagem nunca é esticada, nem reenquadrada, nem vira fundo horizontal. */
.sede{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;
  color:var(--ink);
  position:relative;
  padding-block:clamp(70px,10vw,130px);
  background:
    radial-gradient(52% 34% at 6% 4%,  rgba(238,44,44,.09), transparent 70%),
    radial-gradient(46% 36% at 96% 94%, rgba(238,44,44,.07), transparent 72%),
    var(--bg);
  /* a passagem do raio-x (técnico) para a foto real não é mais marcada por um
     fio: as duas dobras têm o mesmo piso e agora encostam sem costura */
}
.sedescroll{ position:relative; }
.sede__stage{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(30px,4.4vw,58px);
}
.sede__hl{ color:var(--torque); }

/* ---- tipografia da dobra ---- */
.sede__ttl{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; line-height:.96; letter-spacing:-.018em;
  margin:0; text-wrap:balance;
}
.sede__ttl--a{ font-size:clamp(1.9rem,5.2vw,5.2rem); }
/* a linha em torque é a terceira da MESMA headline: herda corpo, peso,
   largura e itálico — só a cor muda. E entra um tempo depois das outras
   duas, sem mexer na caixa (ela já ocupa a linha desde o começo). */
.sede__ttl-hl{ font-style:inherit; color:var(--torque); }
.sedescroll.is-scrub .sede__ttl-hl{ opacity:0; transition:opacity .55s var(--ease); }
.sedescroll.is-scrub .sede__ttl-hl.is-on{ opacity:1; }

.sede__q,.sede__name{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; line-height:.96; letter-spacing:-.018em; margin:0;
}
.sede__q{ font-size:clamp(1.5rem,3.1vw,3.1rem); }
.sede__q em{ font-style:inherit; color:var(--torque); }
/* a resposta é o nome da marca: nunca quebra entre "A" e "GUELTUR" — o lockup
   escrito só faz sentido em uma linha, então a caixa cede antes do texto */
/* a linha não quebra, então o corpo é ditado pela largura: medido em 1280–2560,
   "A GUELTUR." cabe dentro da coluna de min(27%,430px) com ~15px de folga e
   nunca chega perto da foto do eixo central. Ao mexer aqui, medir de novo. */
.sede__name{ font-size:clamp(1.5rem,3vw,2.9rem); white-space:nowrap; }
.sede__name em{ font-style:inherit; color:var(--torque); }

.sede__copy h3{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; font-size:clamp(1rem,1.5vw,1.45rem);
  line-height:1.04; letter-spacing:-.014em; margin:0 0 clamp(10px,1.2vw,16px);
}
.sede__copy .body{ max-width:40ch; font-size:clamp(.92rem,1.02vw,1rem); }

/* ---- lado direito: só tipografia, linhas finas e indicadores ---- */
.sede__meta{ display:grid; gap:clamp(18px,2.2vw,30px); }
.sede__mi{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; gap:6px 12px;
}
.sede__mi-n{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--torque); }
.sede__mi-ln{
  display:block; height:1px; background:var(--line);
  transform:scaleX(1); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.sede__mi b{
  grid-column:1/-1;
  font-family:var(--f-mono); font-weight:400;
  font-size:clamp(10px,.86vw,12px); letter-spacing:.1em;
  color:var(--ink);
}
/* o endereço, abaixo de LONDRINA / PR. Único link da coluna: ganha o
   sublinhado no hover porque, sem ícone, é o que o marca como clicável. */
.sede__addr{
  grid-column:1/-1; display:block; margin-top:9px;
  font-family:var(--f-mono); font-size:clamp(9px,.74vw,10px);
  letter-spacing:.05em; line-height:1.7;
  color:var(--muted);
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color .4s var(--ease), text-decoration-color .4s var(--ease);
}
.sede__addr:hover,.sede__addr:focus-visible{
  color:var(--torque); text-decoration-color:var(--torque);
}

/* ---- a fotografia ---- */
/* a altura manda e o aspect-ratio devolve a largura: a proporção original
   (1240×2204) é a única fonte de verdade do tamanho da moldura */
.sede__ph{
  position:relative; margin:0;
  height:min(74svh,132vw); aspect-ratio:1240/2204;
  justify-self:center;
}
.sede__frame{ position:relative; width:100%; height:100%; overflow:hidden; background:var(--bg-2); }
.sede__frame picture{ display:block; width:100%; height:100%; }
.sede__frame img{
  width:100%; height:100%; object-fit:cover;
  transform:translate3d(0,var(--py,0%),0) scale(var(--ps,1));
  filter:saturate(.92) contrast(1.04) brightness(var(--pb,1));
  transition:filter .7s var(--ease);
  will-change:transform;
}
/* véu curto no topo e na base: o céu é a área mais clara da foto e as
   marcações mono precisam de assento quando caem perto dela */
.sede__frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(13,16,19,.34), transparent 22% 74%, rgba(13,16,19,.42)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 4px);
}
/* as bordas da janela: acompanham o recorte enquanto ele abre */
.sede__edge{
  position:absolute; top:-2%; bottom:-2%; width:1px; opacity:0;
  background:linear-gradient(to bottom, transparent, var(--torque) 22% 78%, transparent);
  transition:opacity .4s var(--ease);
}

/* marcações técnicas: mono pequeno nas calhas ao lado da foto */
.sede__mark{
  position:absolute; white-space:nowrap;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
/* em fluxo as marcações moram nos cantos da própria foto — não existe calha
   ao lado dela numa tela estreita */
.sede__mark--tl{ top:12px; left:12px; }
.sede__mark--tr{ top:12px; right:12px; }
.sede__mark--bl{ bottom:12px; left:12px; }
.sedescroll:not(.is-scrub) .sede__mark{
  color:var(--ink); text-shadow:0 1px 14px rgba(13,16,19,.9);
}
/* em fluxo a pergunta e a resposta são dois blocos em sequência, e não uma
   troca no mesmo lugar: precisam de respiro entre si */
.sedescroll:not(.is-scrub) .sede__name{ margin-top:clamp(14px,3vw,24px); }
.sedescroll:not(.is-scrub) .sede__copy{ margin-top:clamp(20px,3.4vw,30px); }

/* ---- fecho ---- */
.sede__fin .display{ font-size:clamp(1.6rem,3.6vw,3.6rem); }
.sede__cta{ margin-top:clamp(24px,3vw,38px); }
/* mesmo CTA das outras salas escuras: torque cheio desde o repouso */
.sede__cta.btn--solid{ background:var(--torque); border-color:var(--torque); color:#0D1013; }
.sede__cta.btn--solid::before{ background:var(--ink); }
.sede__cta.btn--solid:hover,.sede__cta.btn--solid:focus-visible{ color:#0D1013; border-color:var(--ink); }

/* =========== modo travado: o palco prende e a rolagem conduz =========== */
/* curso curto de propósito — a página já teve duas dobras longas antes desta */
.sedescroll.is-scrub{ height:calc(100svh + 118svh); }
.sedescroll.is-scrub .sede__stage{
  position:sticky; top:0; height:100svh;
  padding-block:clamp(66px,10vh,112px) clamp(24px,4vh,52px);
  /* uma célula só: cada camada se posiciona sozinha, nada empurra nada */
  grid-template:1fr / 1fr; gap:0;
}
.sedescroll.is-scrub .sede__stage > *{ grid-area:1/1; }

.sedescroll.is-scrub .sede__idx{
  justify-self:start; align-self:start; margin:0; z-index:3;
}

/* camadas que entram e saem por classe (reversíveis por construção) */
.sedescroll.is-scrub .sede__ttl,
.sedescroll.is-scrub .sede__q,
.sedescroll.is-scrub .sede__name,
.sedescroll.is-scrub .sede__copy,
.sedescroll.is-scrub .sede__mi,
.sedescroll.is-scrub .sede__mark,
.sedescroll.is-scrub .sede__fin{
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease), transform .7s var(--ease-out);
}
.sedescroll.is-scrub .is-on{ opacity:1; pointer-events:auto; }
/* o deslize de entrada é escrito por camada (cada uma vem de um lado), então
   o repouso precisa ser afirmado com a mesma especificidade */
.sedescroll.is-scrub .sede__ttl.is-on,
.sedescroll.is-scrub .sede__q.is-on,
.sedescroll.is-scrub .sede__name.is-on,
.sedescroll.is-scrub .sede__copy.is-on,
.sedescroll.is-scrub .sede__mi.is-on,
.sedescroll.is-scrub .sede__mark.is-on,
.sedescroll.is-scrub .sede__fin.is-on{ transform:none; }

/* abertura: centralizada, atrás da janela que começa a se abrir */
.sedescroll.is-scrub .sede__open{
  justify-self:center; align-self:center; z-index:2;
  text-align:center; pointer-events:none;
  text-shadow:0 2px 30px rgba(13,16,19,.9);
}
.sedescroll.is-scrub .sede__ttl{ transform:translateY(16px); }

/* a foto: eixo central da composição */
.sedescroll.is-scrub .sede__ph{ align-self:center; opacity:0; transition:opacity .6s var(--ease); }
.sedescroll.is-scrub .sede__ph.is-on{ opacity:1; }
.sedescroll.is-scrub .sede__frame{
  clip-path:inset(0 calc((1 - var(--open,1)) * 50%) 0 calc((1 - var(--open,1)) * 50%));
}
.sedescroll.is-scrub .sede__edge{ opacity:calc(1 - var(--open,1)); }
.sedescroll.is-scrub .sede__edge--l{ left:calc((1 - var(--open,1)) * 50%); }
.sedescroll.is-scrub .sede__edge--r{ right:calc((1 - var(--open,1)) * 50%); }

/* as calhas ao lado da foto */
.sedescroll.is-scrub .sede__mark--tl,
.sedescroll.is-scrub .sede__mark--bl{
  right:calc(100% + clamp(14px,1.4vw,26px)); text-align:right;
  transform:translateX(-10px);
}
.sedescroll.is-scrub .sede__mark--tr{
  left:calc(100% + clamp(14px,1.4vw,26px));
  transform:translateX(10px);
}
.sedescroll.is-scrub .sede__mark--tl{ top:3%;    bottom:auto; left:auto; }
.sedescroll.is-scrub .sede__mark--bl{ bottom:3%; top:auto;    left:auto; }
.sedescroll.is-scrub .sede__mark--tr{ top:3%;    bottom:auto; right:auto; }

/* lado esquerdo: a pergunta e a resposta dividem a mesma célula */
.sedescroll.is-scrub .sede__say{
  justify-self:start; align-self:center;
  width:min(27%,430px);
  display:grid; gap:clamp(20px,2.6vh,34px);
  text-shadow:0 1px 22px rgba(13,16,19,.8);
}
.sedescroll.is-scrub .sede__saybox{ position:relative; min-height:clamp(150px,20vh,230px); }
.sedescroll.is-scrub .sede__q,
.sedescroll.is-scrub .sede__name{ position:absolute; inset:0 0 auto 0; transform:translateY(14px); }
.sedescroll.is-scrub .sede__copy{ transform:translateY(14px); }

/* lado direito */
.sedescroll.is-scrub .sede__meta{
  justify-self:end; align-self:center;
  width:min(20%,300px); align-content:center;
  text-shadow:0 1px 22px rgba(13,16,19,.8);
}
.sedescroll.is-scrub .sede__mi{ transform:translateY(12px); }
.sedescroll.is-scrub .sede__mi .sede__mi-ln{ transform:scaleX(0); }
.sedescroll.is-scrub .sede__mi.is-on .sede__mi-ln{ transform:scaleX(1); }

/* fecho: o callback do hero, por cima da cena já apresentada */
.sedescroll.is-scrub .sede__fin{
  justify-self:center; align-self:center; z-index:3;
  text-align:center; transform:translateY(18px);
  text-shadow:0 2px 34px rgba(13,16,19,.95);
}
/* a foto não sai: ela escurece e devolve o palco para a frase */
.sedescroll.is-scrub .sede__stage.is-final .sede__frame img{ --pb:.34; }

/* calhas somem quando não há largura para elas: a composição continua de pé
   com as duas colunas e a foto no eixo */
@media (max-width:1400px){
  .sedescroll.is-scrub .sede__mark{ display:none; }
}

/* ---- em fluxo (mobile, sem JS, movimento reduzido): sequência vertical.
   Não é o desktop reduzido — a foto vertical cresce e vira o centro. ---- */
@media (max-width:1024px){
  .sede__ph{ height:auto; width:min(82vw,460px); }
  .sede__ttl--a{ font-size:clamp(1.9rem,8.4vw,3rem); }
  .sede__say{ display:grid; gap:clamp(22px,4vw,32px); }
  .sede__fin .display{ font-size:clamp(1.6rem,7.4vw,2.4rem); }
  .sede__meta{ border-top:1px solid var(--line); padding-top:clamp(20px,3vw,28px); }
}

/* ---------- 08d. QUEM FAZ ACONTECER (EQUIPE + FUNDADORES) ---------- */
/* Sala escura como .sede e .pv — os mesmos seis tokens reatribuídos. A dobra
   tem dois ritmos de propósito: a equipe ANDA (trilho horizontal preso à
   rolagem) e os fundadores PARAM (uma fotografia, entrada lenta, muito espaço
   negativo). Se os dois tiverem o mesmo ritmo, a seção vira uma galeria — e o
   que ela precisa contar é uma passagem de energia para origem. */
.ppl{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;
  color:var(--ink);
  position:relative;
  padding-block:clamp(80px,11vw,150px) clamp(80px,10vw,140px);
}
.ppl__hl{ color:var(--torque); }
.ppl__head{ position:relative; z-index:1; }
.ppl__ttl{ margin-bottom:clamp(22px,2.6vw,34px); }
.ppl__head .body{ color:var(--muted); }

/* ---- em fluxo (sem JS, mobile, movimento reduzido) ----
   O trilho vira leitura vertical: foto, frase, foto, frase. É a ordem que o
   prompt pede para o mobile e também o estado sem JS — não existe conteúdo
   que só apareça no modo travado. */
.pplscroll{ position:relative; }
.ppl__rail{
  display:grid; gap:clamp(34px,5vw,64px);
  margin-top:clamp(46px,6vw,84px);
  /* em fluxo o trilho não vive dentro de .wrap: o recuo é dele, senão as
     fotos e as frases encostam na borda da tela */
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
}
.ppl__item{ display:flex; flex-direction:column; }
.ppl__ph{ position:relative; overflow:hidden; }
.ppl__ph picture{ display:block; }
.ppl__ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* tratamento mínimo: as fotos são reais e precisam continuar parecendo
     reais. Só o suficiente para assentar na sala escura. */
  filter:saturate(.94) contrast(1.05) brightness(.96);
}
/* véu curto só na base, onde mora a legenda */
.ppl__ph::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(13,16,19,.78), transparent);
  pointer-events:none;
}
.ppl__ph figcaption{
  position:absolute; left:clamp(12px,1.2vw,20px); bottom:clamp(10px,1vw,16px);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.11em;
  color:var(--muted); text-transform:uppercase; z-index:1;
}
.ppl__say-k{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; line-height:.96; letter-spacing:-.015em;
  font-size:clamp(1.9rem,5.4vw,3.4rem); color:var(--ink);
}
.ppl__say-t{
  margin-top:clamp(8px,1vw,14px);
  font-size:clamp(.95rem,1.15vw,1.1rem); color:var(--muted); line-height:1.5;
}
.ppl__say-t em{ font-style:normal; color:var(--torque); }
/* o CTA de cada card: mesmo botão do resto do site, só encostado na foto */
.ppl__cta{
  margin-top:14px; align-self:flex-start;
  padding:13px 20px; font-size:11px;
  border-color:var(--line); color:var(--ink);
}
.ppl__cta:hover,.ppl__cta:focus-visible{ color:var(--ink); border-color:var(--torque); }
.ppl__prog{ display:none; }

/* ---- modo travado: o trilho anda na horizontal ----
   Mesmo mecanismo das outras dobras presas: o curso dá a altura, o palco fica
   sticky e TUDO deriva do progresso da rolagem — então subir de volta desfaz
   na mesma ordem. 210svh é o suficiente para as sete peças passarem sem
   pressa; mais do que isso e a dobra vira travessia. */
/* A VELOCIDADE DO TRILHO mora aqui, não no JS: a distância percorrida é fixa
   (largura do conteúdo menos a da tela), então quanto MAIOR este curso, mais
   devagar o trilho anda. 210svh entregava ~3,8px de trilho para cada 1px de
   rolagem — rápido demais para ler os cards. 320svh baixa para ~1,7:1. */
.pplscroll.is-scrub{ height:320svh; }
.pplscroll.is-scrub .ppl__stage{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center;
  overflow:hidden;   /* o trilho sangra pelos dois lados: é o corte editorial */
}
.pplscroll.is-scrub .ppl__rail{
  display:flex; align-items:center; gap:clamp(28px,3.4vw,64px);
  margin:0; max-width:none; padding-inline:var(--pad);
  width:max-content; height:82vh;
  transform:translate3d(var(--x,0px),0,0);
  will-change:transform;
}
/* as peças não moram em caixas idênticas: alturas e alinhamentos diferentes
   são o que dá ritmo à passagem */
/* o item é quem tem largura e altura; a fotografia ocupa o que sobra depois
   do CTA, então os botões de todos os cards ficam na base de cada peça */
.pplscroll.is-scrub .ppl__item{ height:100%; flex:none; }
.pplscroll.is-scrub .ppl__ph{ flex:1; min-height:0; }
.pplscroll.is-scrub .ppl__item--wide{ width:min(74vw,1080px); height:84%; }
.pplscroll.is-scrub .ppl__item--mid { width:min(46vw,660px); height:66%; }
.pplscroll.is-scrub .ppl__item--top{ align-self:flex-start; }
.pplscroll.is-scrub .ppl__item--low{ align-self:flex-end; }

/* a largura sai da palavra, não de um número fixo: em 420px "EXPERIÊNCIA"
   transbordava o bloco e ia parar atrás da fotografia seguinte */
.pplscroll.is-scrub .ppl__say{
  flex:none; width:auto; max-width:min(44vw,560px); align-self:center;
}
.pplscroll.is-scrub .ppl__say-k{ white-space:nowrap; }
.pplscroll.is-scrub .ppl__say--a{ align-self:flex-end; padding-bottom:6vh; }
.pplscroll.is-scrub .ppl__say--c{ align-self:flex-start; padding-top:6vh; }
/* as frases entram quando chegam ao centro da tela, não todas de uma vez */
.pplscroll.is-scrub .ppl__say{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .7s var(--ease-out);
}
.pplscroll.is-scrub .ppl__say.is-on{ opacity:1; transform:none; }

.pplscroll.is-scrub .ppl__prog{
  display:block; position:absolute; left:var(--pad); right:var(--pad);
  bottom:clamp(22px,4vh,44px);
}
.ppl__prog-ln{ display:block; position:relative; height:1px; background:var(--line); }
.ppl__prog-ln i{
  position:absolute; inset:0 auto 0 0; width:calc(var(--p,0) * 100%);
  background:var(--torque);
}

/* ---- a ponte ---- */
.ppl__bridge{
  position:relative; z-index:1;
  padding-block:clamp(90px,13vw,190px) clamp(70px,9vw,130px);
  text-align:center;
}

/* ---- 02 FUNDADORES: o ritmo para ----
   Grid editorial em vez de dois cards 50/50: a fotografia ocupa a coluna
   larga e o texto encosta nela, com a régua de marca na terceira coluna. */
.fnd{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) auto;
  gap:clamp(34px,4.4vw,72px);
  align-items:center;
}
/* o bloco de texto não flutua no meio da coluna: encosta no topo da
   fotografia, como legenda longa de matéria */
.fnd__type{ align-self:center; }
.fnd__ph{
  position:relative; overflow:hidden;
  /* entrada lenta: a foto abre verticalmente, cresce de 1.04 para 1 e PARA.
     Nada de paralaxe aqui — é o único ponto da página em que a imagem fica
     completamente estática depois de entrar. */
  clip-path:inset(14% 0 14% 0);
  opacity:0;
  transition:clip-path 1.5s var(--ease-out), opacity 1.1s var(--ease);
}
.fnd__ph img{
  width:100%; height:auto; display:block;
  filter:saturate(.94) contrast(1.05) brightness(.96);
  transform:scale(1.04);
  transition:transform 1.8s var(--ease-out);
}
.fnd__ph.is-in{ clip-path:inset(0 0 0 0); opacity:1; }
.fnd__ph.is-in img{ transform:none; }
.fnd__ph::after{
  content:''; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(to top, rgba(13,16,19,.72), transparent);
  pointer-events:none;
}
.fnd__ph figcaption{
  position:absolute; left:clamp(12px,1.2vw,20px); bottom:clamp(10px,1vw,16px);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.11em;
  color:var(--muted); text-transform:uppercase; z-index:1;
}

/* a headline da história tem quatro linhas escritas à mão, contra as três
   curtas da versão anterior: no corpo de .display--l a linha mais longa
   ("CUIDÁVAMOS") sozinha estoura a coluna e o texto quebra palavra por
   palavra. Um degrau a menos de corpo devolve as quebras escritas sem mexer
   no grid, na fotografia nem na entrada por clip-path. */
.fnd__ttl{
  margin-bottom:clamp(20px,2.4vw,32px);
  font-size:clamp(1.45rem,2.65vw,2.65rem);
  /* as quebras desta headline são escritas à mão: o balance herdado de
     .display redistribuía as linhas por conta própria e desmanchava a
     pontuação da frase */
  text-wrap:normal;
}
.fnd__type .body{ color:var(--muted); }
.fnd__who{
  display:grid; gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(30px,3.6vw,50px);
  padding-top:clamp(22px,2.6vw,32px); border-top:1px solid var(--line);
}
.fnd__who b{
  display:block;
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; font-size:clamp(1rem,1.5vw,1.35rem);
  letter-spacing:-.005em; line-height:1;
}
.fnd__who span{
  display:block; margin-top:7px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; color:var(--torque);
}

/* régua de marca: detalhe editorial, não infográfico */
.fnd__mark{
  display:grid; gap:12px; align-self:stretch; align-content:center;
  padding-left:clamp(20px,2.4vw,34px); border-left:1px solid var(--line);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; writing-mode:vertical-rl;
  grid-auto-flow:column; text-orientation:mixed;
}
.fnd__mark-h{ color:var(--torque); }

/* ---- fecho ---- */
.ppl__end{
  position:relative; z-index:1;
  padding-top:clamp(90px,13vw,190px);
  text-align:center;
}
/* o texto de apoio do fecho é a única linha de corpo desta área centralizada:
   sem a margem automática ele nasce colado à esquerda, porque .body--wide tem
   largura máxima própria */
.ppl__end .body{
  margin-inline:auto;
  margin-top:clamp(22px,2.6vw,34px);
  color:var(--muted);
}

/* ---------- 08e. QUEM RODA, CONFIRMA (PROVA SOCIAL) ---------- */
/* Quinta sala escura. Um grau mais clara que .sede: são duas dobras escuras
   seguidas e a mudança de piso é o que separa "onde a Gueltur trabalha" de
   "o que dizem de lá".

   O dispositivo aqui é uma PAUSA. As três dobras anteriores prendem a rolagem;
   esta devolve o controle: um carrossel horizontal de fichas grandes, cada uma
   com a fotografia de uma CATEGORIA de veículo ao lado da avaliação. A leitura
   anda no eixo X por scroll-snap nativo — o JS só arrasta, conta e acende
   (módulo 04e no main.js). Sem sticky, sem trava.

   A fotografia é catálogo de categoria, não o veículo do cliente: a legenda
   dentro da figura diz isso, e o modelo só aparece se a avaliação real citar. */
.pv{
  --bg:     #141A20;
  --bg-2:   #1A2129;
  --line:   #303842;
  --muted:  #97A1AB;
  --ink:    #F2F4F6;
  /* o piso da ficha: quase preto, um degrau ABAIXO da sala, para a ficha ler
     como um recorte de fundo infinito de estúdio e não como painel elevado */
  --card:   #0E1318;
  color:var(--ink);
  position:relative;
  padding-block:clamp(70px,10vw,130px);
  background:
    radial-gradient(50% 32% at 92% 6%,  rgba(238,44,44,.08), transparent 70%),
    radial-gradient(44% 34% at 4% 94%, rgba(238,44,44,.06), transparent 72%),
    var(--bg);
}
.pv__stage{ position:relative; z-index:1; }
.pv__hl{ color:var(--torque); }
.pv__head .body{ margin-top:clamp(18px,2.2vw,30px); }
.pv__head .display{ margin-top:0; }

/* ---- a pista ----
   Rola no eixo X com snap nativo: funciona sem JS, com teclado e com o gesto
   de trackpad. A largura da ficha é um token porque o espaçador do fim da
   pista (::after) precisa do MESMO valor para a última ficha poder encostar
   na margem esquerda. */
.pv__deck{
  --cardw: min(84vw, calc(var(--maxw) * .78));
  margin-top:clamp(40px,5.5vw,78px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--pad);
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pv__deck::-webkit-scrollbar{ display:none; }
/* is-drag tira o snap do caminho durante o arraste (ver 04e no main.js);
   is-grab é só o cursor, e sai no instante do solto */
.pv__deck.is-drag{ scroll-snap-type:none; }
.pv__deck.is-live{ cursor:grab; }
.pv__deck.is-grab,.pv__deck.is-grab .pv__card{ cursor:grabbing; }
.pv__cards{
  display:flex; align-items:stretch;
  gap:var(--gut);
  padding-inline:var(--pad);
  margin:0;
}
/* o espaçador que deixa a ÚLTIMA ficha encostar na margem esquerda em vez de
   parar colada na direita — sem ele o snap da última nunca fecha */
.pv__cards::after{
  content:''; flex:0 0 max(0px, calc(100% - var(--cardw)));
}

/* ---- uma ficha ---- */
.pv__card{
  position:relative;
  flex:0 0 var(--cardw);
  scroll-snap-align:start;
  display:grid;
  /* 43% para a foto: o recorte da coluna fica perto do 4/3 do arquivo, então o
     cover corta pouco e o veículo aparece inteiro — que é o ponto da imagem */
  grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  min-height:clamp(330px,30vw,440px);
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .6s var(--ease);
}
.pv__card.is-live{ border-color:color-mix(in srgb, var(--line) 55%, var(--ink)); }
/* a barra de torque na aresta esquerda: cresce quando a ficha é a viva.
   É o único vermelho grande da ficha — o resto é rótulo. */
.pv__edge{
  position:absolute; left:0; top:0; z-index:3;
  width:2px; height:0;
  background:var(--torque);
  transition:height .8s var(--ease-out);
}
.pv__card.is-live .pv__edge{ height:34%; }

/* ---- a fotografia ---- */
.pv__shot{
  position:relative; margin:0; overflow:hidden;
  background:var(--card);
}
.pv__shot img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 54%;
  /* o zoom de base fecha a margem morta que o estúdio deixa em volta do
     veículo; o passo a mais é o "acende" — a ficha vizinha fica mais fechada */
  transform:scale(1.1);
  transition:transform 1.1s var(--ease-out);
}
.pv__card.is-live .pv__shot img{ transform:scale(1.04); }
/* a costura entre foto e texto: o preto da ficha invade a imagem pela direita.
   Para em 46% para não comer o veículo. */
.pv__shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--card) 72%, transparent) 82%, var(--card) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--card) 55%, transparent), transparent 42%);
}
.pv__shot figcaption{
  position:absolute; left:clamp(14px,1.6vw,22px); bottom:clamp(12px,1.4vw,18px);
  z-index:2; max-width:72%;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.11em; line-height:1.6;
  text-transform:uppercase; color:var(--muted); opacity:.72;
}

/* ---- o conteúdo ---- */
.pv__body{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px,3vw,52px) clamp(24px,3.2vw,58px);
  opacity:.34;
  transition:opacity .7s var(--ease);
}
.pv__card.is-live .pv__body{ opacity:1; }

.pv__code{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--torque);
}
/* o selo: é esta linha que faz alguém reconhecer o próprio veículo na página,
   então ela ganha o corpo de display e não o de rótulo */
.pv__cat{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase;
  font-size:clamp(1.35rem,2.5vw,2.35rem);
  line-height:1; letter-spacing:-.018em;
  color:var(--ink);
  margin:clamp(14px,1.7vw,22px) 0 0;
  transform:translateY(7px);
  transition:transform .8s var(--ease-out);
}
.pv__card.is-live .pv__cat{ transform:none; }
.pv__veic{
  display:block; margin-top:9px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); line-height:1.7;
}
/* estrelas na paleta da casa: vazia é hairline, cheia é torque. A nota vem
   do atributo data-stars — trocar o número é trocar a avaliação. */
.pv__stars{ display:block; margin-top:clamp(16px,2vw,26px); }
.pv__stars svg{ width:78px; height:14px; }
.pv__stars use{ fill:var(--line); }
.pv__stars[data-stars="1"] use:nth-of-type(-n+1),
.pv__stars[data-stars="2"] use:nth-of-type(-n+2),
.pv__stars[data-stars="3"] use:nth-of-type(-n+3),
.pv__stars[data-stars="4"] use:nth-of-type(-n+4),
.pv__stars[data-stars="5"] use:nth-of-type(-n+5){ fill:var(--torque); }
.pv__quote{
  margin:clamp(16px,2vw,26px) 0 0;
  max-width:44ch;
  font-size:clamp(1rem,1.28vw,1.28rem); line-height:1.5;
  color:var(--ink); text-wrap:pretty;
}
.pv__who{
  margin-top:auto; padding-top:clamp(20px,2.4vw,32px);
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.pv__who b{ color:var(--ink); font-weight:400; font-size:10px; letter-spacing:.1em; }

/* ---- rodapé da pista: contador, linha de progresso, setas ---- */
.pv__foot{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(24px,3vw,40px);
}
.pv__count{
  flex:0 0 auto;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--muted);
}
.pv__count b{ color:var(--ink); font-weight:400; }
/* 2px e não 1: com hairline o trecho percorrido some, e ele é a única
   informação de posição que a dobra dá */
.pv__bar{
  position:relative; flex:1 1 auto; height:2px;
  background:var(--line);
}
.pv__bar i{
  position:absolute; inset:0 auto 0 0;
  width:calc(var(--p,.25) * 100%);
  background:var(--torque);
  transition:width .55s var(--ease-out);
}
/* sem JS não há o que clicar: as setas só existem quando o módulo assume */
.pv__nav{ flex:0 0 auto; display:none; gap:8px; }
.pv__deck.is-live ~ .pv__foot .pv__nav{ display:flex; }
.pv__arw{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  font-family:var(--f-mono); font-size:12px;
  color:var(--muted);
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.pv__arw:hover:not(:disabled),.pv__arw:focus-visible:not(:disabled){
  color:var(--ink); border-color:var(--torque);
  background:color-mix(in srgb, var(--torque) 14%, transparent);
}
.pv__arw i{ font-style:normal; }
.pv__arw:disabled{ opacity:.3; cursor:default; }

/* A dobra acaba no contador: sem fecho editorial, a folga de baixo da seção é
   o único respiro antes de ONDE ESTAMOS. */

/* ---- mobile: a ficha vira vertical. Não é o layout horizontal comprimido —
   é a mesma hierarquia empilhada, com a foto ocupando ~44% da altura. ---- */
@media (max-width:900px){
  .pv__deck{ --cardw:87vw; }
  .pv__card{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    min-height:0;
  }
  .pv__shot{ aspect-ratio:4/3; }
  .pv__shot::after{
    background:
      linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--card) 70%, transparent) 84%, var(--card) 100%);
  }
  /* no empilhado a ficha vizinha só aparece de raspão: manter o texto dela
     apagado atrapalharia mais do que ajudaria */
  .pv__body{ opacity:1; }
  .pv__cat{ transform:none; }
  .pv__quote{ max-width:none; }
}
@media (max-width:520px){
  .pv__deck{ --cardw:88vw; }
  .pv__arw{ width:34px; height:34px; }
}

@media (prefers-reduced-motion:reduce){
  .pv__shot img{ transform:none; }
  .pv__cat{ transform:none; }
  .pv__body{ opacity:1; }
  .pv__card,.pv__edge,.pv__bar i,.pv__shot img,.pv__cat,.pv__body{ transition:none; }
}

/* ---------- 09. ONDE ESTAMOS (fechamento comercial) ---------- */
/* Última sala escura da página, e a que fecha o arco: a home abre no preto
   da hero e termina no mesmo preto, agora atravessando o rodapé sem volta ao
   claro. Os mesmos seis tokens são reatribuídos, como em .mf, .diag, .sys e
   .sede — nenhuma regra interna é duplicada por causa disso.

   Ritmo NORMAL de propósito: sem sticky, sem curso longo. A dobra inteira
   cabe em pouco mais de uma tela, porque o usuário já atravessou cinco
   dobras travadas e aqui só precisa de um endereço e de dois botões. */
.onde{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;
  color:var(--ink);
  position:relative; overflow:hidden;
  padding-block:clamp(80px,11vw,150px) clamp(60px,8vw,110px);
}
.onde__head{ position:relative; z-index:1; }
.onde__hl{ color:var(--torque); }
.onde__ttl{ margin-bottom:clamp(22px,2.6vw,34px); }
.onde__head .body{ color:var(--muted); }

/* as duas quebras de linha alternadas da headline */
.br-mb{ display:none; }
.br-dk{ display:inline; }

/* ---- a moldura do mapa ----
   O iframe é do Google e o interior dele é intocável. Então a marca aparece
   ao redor: moldura fina, uma régua técnica no topo e o fio de torque que
   corre por ela quando a dobra entra. Largura própria (não é .wrap): o mapa
   é protagonista e ocupa quase toda a tela útil. */
.onde__map{
  position:relative; z-index:1;
  width:min(94vw, 1760px); margin:clamp(40px,5vw,72px) auto 0;
  border:1px solid var(--line); background:var(--bg-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);
}
.onde__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px clamp(14px,1.4vw,22px);
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase;
}
.onde__bar-l{ display:flex; align-items:center; gap:9px; color:var(--ink); white-space:nowrap; }
.onde__bar-r{ white-space:nowrap; }
.onde__bar-r b{ font-weight:400; }
.onde__bar-l i{ width:6px; height:6px; border-radius:50%; background:var(--torque); }

.onde__frame{
  position:relative;
  height:clamp(420px, 70vh, 820px);
  overflow:hidden;   /* segura o fio de varredura, não o mapa */
}
/* as dimensões do atributo (600×450) ficam no HTML só como dica de proporção:
   quem manda no tamanho final é esta regra */
.onde__frame iframe{
  display:block; width:100%; height:100%; border:0;
  /* o mapa do Google nasce claro; um filtro leve o aproxima da sala escura
     sem tocar em nada dentro do iframe — e sem prejudicar a leitura das ruas */
  filter:saturate(.88) contrast(1.02);
}

/* fio de torque que percorre a borda de cima quando o mapa aparece */
.onde__scan{
  position:absolute; top:0; left:0; z-index:2;
  height:2px; width:100%; background:var(--torque);
  transform:scaleX(0); transform-origin:left center;
  pointer-events:none;
}
.onde__map.is-in .onde__scan{ animation:ondeScan 1.5s var(--ease-out) .35s forwards; }
@keyframes ondeScan{
  0%   { transform:scaleX(0);   transform-origin:left center;  opacity:1; }
  55%  { transform:scaleX(1);   transform-origin:left center;  opacity:1; }
  56%  { transform:scaleX(1);   transform-origin:right center; opacity:1; }
  100% { transform:scaleX(0);   transform-origin:right center; opacity:.6; }
}

/* ---- a ficha da Gueltur, sobreposta ao mapa ----
   Ocupa SÓ o canto: o resto do mapa continua arrastável, com zoom e com o
   botão de tela cheia livres. Nada de camada transparente cobrindo tudo. */
.onde__card{
  position:absolute; z-index:3;
  right:clamp(14px,1.6vw,26px); bottom:clamp(14px,1.6vw,26px);
  width:min(340px, 42vw);
  padding:clamp(20px,1.7vw,28px);
  background:color-mix(in srgb, #0D1013 88%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.9);
}
.onde__card-n{
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; font-size:clamp(1.05rem,1.5vw,1.4rem);
  letter-spacing:.01em; line-height:1; color:var(--ink);
}
.onde__card-n em{ font-style:italic; color:var(--torque); }
.onde__card-city{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--torque); margin-top:10px;
}
.onde__card-d{
  color:var(--muted); font-size:.9rem; line-height:1.45;
  margin-top:clamp(14px,1.4vw,20px);
}
.onde__card-addr{
  font-family:var(--f-mono); font-size:10.5px; line-height:1.75; letter-spacing:.05em;
  color:var(--muted); margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line);
}
.onde__acts{ display:grid; gap:9px; margin-top:clamp(18px,1.8vw,24px); }
.onde__act{ justify-content:space-between; padding:14px 18px; }
.onde__act.btn--solid{ background:var(--torque); border-color:var(--torque); color:#0D1013; }
.onde__act.btn--solid::before{ background:var(--ink); }
.onde__act.btn--solid:hover,.onde__act.btn--solid:focus-visible{ color:#0D1013; border-color:var(--ink); }

.onde__geo .g--1{ top:clamp(70px,9vw,130px); right:0; width:min(22%,260px); height:1px; }
.onde__geo .g--2{ top:6%; left:-5%; width:min(20%,260px); height:min(34%,300px); }
.onde__geo .g--3{ top:22%; right:calc(var(--pad) * .6); }

/* ---------- 10. RODAPÉ ---------- */
/* Não é área administrativa: é o último ato. Abre repetindo a promessa da
   hero, para fechar o arco da página, e só depois entrega os dados. Mesma
   sala escura de .onde — as duas encostam sem costura. */
.foot{
  --bg:     #0D1013;
  --bg-2:   #141A20;
  --line:   #2A323B;
  --muted:  #8A949E;
  --ink:    #F2F4F6;
  color:var(--ink); background:var(--bg);
  /* a folga de baixo é maior do que parece necessário de propósito: o botão
     flutuante do WhatsApp é fixed e cairia sobre a última linha do rodapé */
  padding-block:clamp(90px,12vw,170px) clamp(80px,7vw,110px);
}

.foot__top{
  display:flex; flex-direction:column; gap:clamp(24px,3vw,42px);
  padding-bottom:clamp(60px,8vw,110px);
}
/* o logo por extenso: aqui há altura para o descritivo ser lido */
.foot__brand{ display:block; height:clamp(44px,5.4vw,68px); }
.foot__brand img{ display:block; height:100%; width:auto; }
/* o callback da hero: mesma frase, mesma palavra em torque */
.foot__promise{ max-width:16ch; }
.foot__hl{ color:var(--torque); }

/* ---- a linha de CTA ---- */
.foot__cta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(20px,4vw,60px); flex-wrap:wrap;
  padding-block:clamp(28px,3.4vw,48px);
  border-block:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
.foot__cta-q{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase;
  transition:color .4s var(--ease);
}
.foot__cta-a{
  display:inline-flex; align-items:baseline; gap:clamp(10px,1.2vw,20px);
  font-family:var(--f-display); font-style:italic; font-weight:900; font-stretch:125%;
  text-transform:uppercase; font-size:clamp(1.4rem,3.6vw,3.2rem);
  letter-spacing:-.015em; line-height:1;
  transition:color .45s var(--ease), transform .5s var(--ease-out);
}
.foot__cta-a i{ font-style:normal; transition:transform .5s var(--ease-out); }
.foot__cta:hover{ border-color:var(--torque); }
.foot__cta:hover .foot__cta-q{ color:var(--ink); }
.foot__cta:hover .foot__cta-a{ color:var(--torque); transform:translateX(6px); }
.foot__cta:hover .foot__cta-a i{ transform:translate(6px,-6px); }
.foot__cta:focus-visible{ outline-offset:8px; }

/* ---- as colunas ---- */
.foot__cols{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gut);
  padding-block:clamp(50px,6vw,90px);
}
.foot__col h3{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em;
  color:var(--torque); text-transform:uppercase; font-weight:400;
  margin-bottom:clamp(20px,2.2vw,30px);
}
.foot__col ul{ display:grid; gap:14px; }
.foot__col a{
  display:flex; flex-direction:column; gap:4px;
  font-size:.95rem; color:var(--ink);
  transition:color .35s var(--ease);
}
.foot__col a b{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  font-weight:400; color:var(--muted);
  transition:color .35s var(--ease);
  word-break:break-word;
}
.foot__col a:hover{ color:var(--torque); }
.foot__col a:hover b{ color:var(--ink); }
.foot__addr{
  font-family:var(--f-mono); font-size:10.5px; line-height:1.85; letter-spacing:.05em;
  color:var(--muted);
}
/* precisa vencer .foot__col a, que empilha rótulo e valor em coluna */
.foot__col a.foot__link{
  display:inline-flex; flex-direction:row; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.11em;
  color:var(--ink); text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--line);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.foot__link i{ font-style:normal; transition:transform .45s var(--ease-out); }
.foot__link:hover{ color:var(--torque); border-color:var(--torque); }
.foot__link:hover i{ transform:translate(4px,-4px); }

/* ---- a base ---- */
.foot__base{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding-top:clamp(26px,3vw,42px); border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.09em;
  color:var(--muted); text-transform:uppercase;
}

/* ---------- 15. WHATSAPP FLUTUANTE ---------- */
.float-wpp{
  position:fixed; right:clamp(16px,2vw,32px); bottom:clamp(16px,2vw,32px); z-index:90;
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--torque); color:var(--ink); border-radius:50%;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease-out), background .3s;
}
.float-wpp.is-on{ opacity:1; transform:none; pointer-events:auto; }
.float-wpp svg{ width:26px; }
.float-wpp:hover{ background:var(--bg); }

/* ---------- 15b. GEOMETRIA DECORATIVA ---------- */
/* Retângulos e linhas soltos atrás das fotos e nas áreas de respiro.
   Cada seção usa no máximo 3 formas — o objetivo é dar vida ao fundo
   claro sem competir com a tipografia. Movem-se em profundidades
   ligeiramente diferentes da rolagem via [data-parallax] (mesmo
   mecanismo já usado nas fotos). */
.geo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.g{ position:absolute; display:block; }
.g--line{ background:var(--line); }
.g--line-t{ background:var(--torque); opacity:.55; }
.g--rect{ border:1px solid var(--line); }
.g--rect-t{ border:1px solid var(--torque); opacity:.5; }
.g--fill{ background:var(--bg-2); }
.g--fill-t{ background:var(--torque); opacity:.08; }
.g--dot{ width:7px; height:7px; background:var(--torque); border-radius:50%; }

/* painel de serviços: atrás do palco de imagem */
/* acentos de torque da seção de serviços — moldura, réguas e ponto */
.services__geo .g--1{ top:clamp(90px,12vw,180px); left:0; width:min(22%,240px); height:1px; }
.services__geo .g--2{ top:22%; right:-6%; width:min(30%,380px); height:min(46%,420px); }
.services__geo .g--3{ bottom:14%; left:calc(var(--pad) * .5); }
.services__geo .g--4{ bottom:auto; top:16%; left:0; width:min(34%,460px); height:min(22%,300px); }
.services__geo .g--5{ top:0; left:calc(var(--pad) + 3vw); width:1px; height:min(26%,260px); }
/* nas telas estreitas a geometria cruzaria o texto: ficam só as brasas
   do fundo, que já dão a presença do vermelho */
@media (max-width:1024px){
  .services__geo{ display:none; }
  .diag__geo .g--3{ display:none; }
}

.diag__geo .g--1{ top:clamp(70px,9vw,130px); right:0; width:min(26%,300px); height:1px; }
/* o retângulo vazado do canto inferior esquerdo saiu: encostava na borda da
   seção e as duas linhas que sobravam dele liam como costura, não como
   geometria — exatamente o ruído que a passagem para as especialidades
   precisava não ter */
.diag__geo .g--2{ display:none; }
.diag__geo .g--3{ top:18%; left:calc(var(--pad) * .55); }

.sys__geo .g--1{ top:16%; left:0; width:min(16%,200px); height:1px; }
/* o retângulo vazado brigaria com as legendas do diagrama: nesta seção
   a geometria fica só na linha e no ponto */
.sys__geo .g--2{ display:none; }
.sys__geo .g--3{ top:auto; bottom:20%; left:calc(var(--pad) * .35); }

.panel__geo{ z-index:0; }
.panel__geo .g--1{ top:-8%; right:-10%; width:38%; height:32%; }
.panel__geo .g--2{ bottom:-9%; right:16%; width:20%; height:22%; }

@media (max-width:720px){
  .panel__geo{ display:none; }   /* colunas empilhadas: sem espaço de respiro ao redor */
  .onde__geo{ display:none; }
}

/* ---------- 16. REVEALS ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease) var(--rd,0ms), transform .9s var(--ease-out) var(--rd,0ms);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:1024px){
  .site-nav{ display:none; }
  .head-cta{ display:none; }
  .burger{ display:block; }
  .diag__grid,.panel{ grid-template-columns:minmax(0,1fr); }
  /* fundadores: a régua de marca sai do fluxo lateral e vira uma linha */
  .fnd{ grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vw,48px); }
  .fnd__mark{
    writing-mode:horizontal-tb; grid-auto-flow:row;
    display:flex; flex-wrap:wrap; gap:10px 22px;
    padding-left:0; padding-top:clamp(18px,2.4vw,26px);
    border-left:0; border-top:1px solid var(--line);
  }
  .panel__view{ display:none; }
  /* rodapé: quatro colunas viram duas antes de virarem uma */
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,5vw,56px); }
}

@media (max-width:720px){
  .hero__content{ padding-top:clamp(100px,26vh,160px); }
  .hero__title{ font-size:clamp(2rem,9.5vw,3.4rem); line-height:1.0; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:space-between; }

  /* aperta o bloco para "AVALIAÇÕES NO GOOGLE" caber em uma linha */
  .proof{ gap:12px; }
  .proof__faces li{ width:40px; height:40px; font-size:10px; border-width:1.5px; }
  .proof__faces li + li{ margin-left:-12px; }
  .proof__stars{ width:92px; height:16px; }
  .proof__label{ font-size:10px; letter-spacing:.04em; margin-top:8px; }

  /* no mobile o recorte joga a van clara atrás do texto: a coluna escura
     do desktop não existe aqui, então o overlay volta a carregar. */
  .hero__overlay{
    background:
      linear-gradient(180deg, rgba(13,16,19,.20) 0%, rgba(13,16,19,.44) 48%, rgba(13,16,19,.82) 100%),
      linear-gradient(90deg, rgba(13,16,19,.52) 0%, rgba(13,16,19,.34) 60%, rgba(13,16,19,.24) 100%);
  }

  /* a rede se reorganiza na vertical — não é a versão desktop reduzida */
  .mf__scroll{ height:610svh; }
  .mf__net{ top:clamp(66px,11vh,110px); bottom:clamp(30px,6vh,64px); }
  .mf__node{ font-size:10px; letter-spacing:.09em; padding:4px 8px; }
  .mf__mk{ width:10px; height:10px; margin-right:7px; }
  .mf__mk i{ left:3px; top:3px; width:3px; height:3px; }
  .mf__x line{ stroke-width:3.5; }
  /* o núcleo precisa dominar a composição também na tela estreita */
  .mf__node--core{ font-size:clamp(1.7rem,8vw,2.6rem); padding:6px 12px; }
  .mf__node--clientes    { --x:50; --y:5;  }
  .mf__node--trabalho    { --x:25; --y:24; }
  .mf__node--entregas    { --x:75; --y:24; }
  .mf__node--core        { --x:50; --y:51; }
  .mf__node--rotina      { --x:23; --y:78; }
  .mf__node--renda       { --x:77; --y:78; }
  .mf__node--compromissos{ --x:50; --y:95; }

  .srv__name .mb{ display:inline; }
  .srv__hit{ gap:14px; grid-template-columns:auto 1fr auto; }
  .srv.is-active .srv__name{ transform:none; }
  .srv__drop p,.tags{ padding-left:0; }

  .scope__read{ grid-template-columns:1fr 1fr; }
  .scope__read li:last-child{ grid-column:1 / -1; }
  .diag__cta{ flex-direction:column; align-items:stretch; }
  .diag__cta .btn{ justify-content:space-between; }

  /* QUEM FAZ ACONTECER — o trilho já é vertical aqui (o JS não liga o scrub
     abaixo de 1025px); só as proporções das fotos precisam de ajuste */
  .ppl__item img{ aspect-ratio:16/10; }
  .ppl__say-k{ font-size:clamp(1.8rem,9vw,2.6rem); }
  /* o CTA de cada card ocupa a largura toda: alvo de toque generoso */
  .ppl__cta{ align-self:stretch; justify-content:space-between; padding:16px 20px; }

  /* ONDE ESTAMOS — a headline troca de quebra e a ficha sai de cima do mapa */
  .br-dk{ display:none; }
  .br-mb{ display:inline; }
  .onde__map{ width:100%; }
  .onde__frame{ height:clamp(340px,58vh,520px); }
  /* a régua não cabe inteira na largura curta: as coordenadas saem e ficam a
     assinatura e a cidade, que é o que a régua precisa dizer */
  .onde__bar{ font-size:9.5px; letter-spacing:.08em; }
  .onde__bar-r b{ display:none; }
  /* em fluxo, abaixo do mapa: a área de toque do Google fica inteira livre */
  .onde__card{
    position:static; width:auto;
    border:0; border-top:1px solid var(--line);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:var(--bg-2); box-shadow:none;
    padding:clamp(22px,6vw,30px);
  }
  .onde__card-d{ max-width:34ch; }
  /* alvos de toque generosos nos dois CTAs */
  .onde__act{ padding:17px 20px; }

  .foot__cols{ grid-template-columns:minmax(0,1fr); gap:clamp(34px,8vw,48px); }
  .foot__cta{ flex-direction:column; align-items:flex-start; gap:14px; }
  .foot__base{ flex-direction:column; align-items:flex-start; gap:10px; }

  .float-wpp{ width:48px; height:48px; }
  .float-wpp svg{ width:23px; }
}

/* ---------- ACESSIBILIDADE / MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__title .line__in{ transform:none !important; }

  /* manifesto sem scrub: os três atos viram blocos em fluxo normal, com a
     rede já montada. Todo o texto continua no DOM e visível. */
  .mf__scroll{ height:auto; }
  .mf__stage{ position:static; height:auto; display:block; padding-block:clamp(70px,10vw,120px); overflow:visible; }
  /* sem sticky, o stage deixa de ser a caixa de referência: as diagonais
     sangrariam na horizontal e a vinheta esticaria pela seção inteira.
     Ficam só as brasas, agora medidas contra a própria .mf */
  .mf__stage::after{ display:none; }
  .mf__stage::before{
    background:
      radial-gradient(46% 26% at 8% 8%,   rgba(238,44,44,.16), transparent 70%),
      radial-gradient(42% 24% at 96% 88%, rgba(238,44,44,.13), transparent 72%);
  }
  .mf__frame{ height:auto; }
  .mf__idx{ position:static; display:block; padding-left:var(--pad); margin-bottom:clamp(28px,4vw,48px); }
  .mf__ask,.mf__end{ position:static; opacity:1 !important; visibility:visible !important; transform:none !important; }
  /* o fecho volta a ser caixa de referência: sem isso a foto de fundo mediria
     contra a seção inteira e cobriria todos os atos */
  .mf__end{ position:relative; margin-top:clamp(50px,7vw,90px); padding-block:clamp(60px,9vw,110px); }
  .mf__ln i{ transform:none !important; }
  .mf__net{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
    height:clamp(430px,64vw,600px);
    margin:clamp(50px,7vw,90px) var(--pad);
  }
  .mf__node{ opacity:1 !important; transform:translate(-50%,-50%) !important; }
  .mf__wire{ opacity:.45 !important; stroke-dashoffset:0 !important; }
  .mf__ring{ opacity:.6 !important; stroke-dashoffset:0 !important; }
  .mf__pulse{ display:none; }
  .mf__mk i{ display:none; }
  .mf__x{ display:none; }
  .mf__mk-v{ opacity:1 !important; }
  .mf__state--stop{ display:none; }
  .mf__state--go{ opacity:1 !important; }
  /* sem scrub não há passagem: os atos já chegam no estado final */
  .mf__sweep{ display:none; }
  .mf__endbg{ clip-path:none !important; }
  .mf__kicker,.mf__final,.mf__sub,.mf__cta{ opacity:1 !important; transform:none !important; visibility:visible !important; }
  .swap__w.is-active{ transform:none !important; }
  .hero__bg img{ transform:none !important; }
  .scope__trace{ stroke-dashoffset:0 !important; }
  /* sem ciclo automático: as três etapas ficam legíveis e paradas */
  .scope__scan{ display:none; }
  .scope__step.is-on .scope__step-bar::after{ transform:scaleX(1) !important; }
  /* serviços voltam ao acordeão em fluxo normal (o JS também não liga o scrub) */
  .srvscroll{ height:auto !important; }
  /* o trilho da equipe volta a ser leitura vertical, com todas as fotos e
     todas as frases presentes — nada de conteúdo some com movimento reduzido */
  .pplscroll{ height:auto !important; }
  .ppl__say{ opacity:1 !important; transform:none !important; }
  .fnd__ph{ clip-path:none !important; opacity:1 !important; }
  .fnd__ph img{ transform:none !important; }
  .srvscroll .panel{ position:static !important; min-height:0 !important; }
  .onde__scan{ display:none; }
  .scope__bar i{ width:100% !important; }
}

@media print{
  .site-head,.float-wpp,.ticker,.mobile-menu{ display:none; }
  body{ background:#fff; color:#000; }
}

/* =========================================================
   16. TRANSIÇÕES ENTRE DOBRAS
   Nenhuma dobra encosta na outra por um fio. Onde antes havia
   um hairline (--line) marcando a costura, agora há uma RAMPA:
   a seção que chega desenha, no topo do próprio fundo, a cor
   de quem vinha antes e a dissolve dentro da sua.

   Por que no `background` e não num pseudo-elemento: o fundo
   pinta SEMPRE atrás do conteúdo, sem depender de z-index nem
   de contexto de empilhamento — as dobras travadas (.panel,
   .sys__stage, .sede__stage) criam vários, e um ::before
   perderia a briga em alguma delas.

   --seam é a altura da rampa. As dobras cuja rampa cai sobre
   texto (dark → claro) ganham folga de topo do mesmo tamanho,
   para o primeiro elemento começar depois dela.
   ========================================================= */

/* ---- manifesto (escuro) → serviços (claro) ----
   A passagem mais dura da página: #0D1013 direto no off-white.
   A rampa é a mais longa de todas justamente por isso.
   No modo travado ela não aparece — o painel sticky cobre a
   seção inteira com a foto do serviço, que já entrega escuro
   contra escuro. */
.services{
  --seam:clamp(150px,24vh,330px);
  background:
    linear-gradient(180deg,
      rgb(13,16,19)      0,
      rgba(13,16,19,.92) calc(var(--seam) * .16),
      rgba(13,16,19,.72) calc(var(--seam) * .34),
      rgba(13,16,19,.42) calc(var(--seam) * .56),
      rgba(13,16,19,.16) calc(var(--seam) * .78),
      rgba(13,16,19,0)   var(--seam)),
    radial-gradient(38% 22% at 4% 12%,  rgba(238,44,44,.07), transparent 70%),
    radial-gradient(34% 26% at 98% 72%, rgba(238,44,44,.06), transparent 72%),
    var(--bg);
}
/* em fluxo o título vem logo abaixo da rampa: a folga é o que impede o
   texto escuro de cair dentro dela */
.services:not(:has(.srvscroll.is-scrub)){
  padding-top:calc(clamp(90px,13vw,190px) + var(--seam) * .8);
}

/* ---- serviços → diagnóstico ----
   A cor de origem muda com o modo: em fluxo a dobra anterior
   termina clara; travada, termina na foto escura do painel. */
.diag{
  --seam:clamp(90px,11vh,150px);
  --seam-from:250,248,245;
  background:
    linear-gradient(180deg,
      rgba(var(--seam-from),1)   0,
      rgba(var(--seam-from),.80) calc(var(--seam) * .22),
      rgba(var(--seam-from),.32) calc(var(--seam) * .56),
      rgba(var(--seam-from),0)   var(--seam)),
    radial-gradient(40% 26% at 6% 10%,  rgba(238,44,44,.13), transparent 70%),
    radial-gradient(38% 28% at 96% 84%, rgba(238,44,44,.10), transparent 72%),
    var(--bg);
  padding-top:calc(clamp(90px,12vw,180px) + var(--seam) * .6);
}
body:has(.srvscroll.is-scrub) .diag{ --seam-from:13,16,19; }

/* ---- a sede (#0D1013) → quem roda, confirma (#141A20) ----
   Mesmo escuro, um degrau de tom acima: era o degrau que
   aparecia como faixa na troca. A rampa cobre o salto. */
.pv{
  --seam:clamp(140px,20vh,280px);
  background:
    linear-gradient(180deg,
      rgb(13,16,19)      0,
      rgba(13,16,19,.88) calc(var(--seam) * .20),
      rgba(13,16,19,.58) calc(var(--seam) * .46),
      rgba(13,16,19,.22) calc(var(--seam) * .72),
      rgba(13,16,19,0)   var(--seam)),
    radial-gradient(50% 32% at 92% 6%, rgba(238,44,44,.08), transparent 70%),
    radial-gradient(44% 34% at 4% 94%, rgba(238,44,44,.06), transparent 72%),
    var(--bg);
}

/* ---- quem roda, confirma (#141A20) → onde estamos (#0D1013) ----
   As duas últimas dobras e o rodapé são escuros: a página termina no mesmo
   preto em que a hero começa, sem voltar ao claro. Aqui só resta o degrau de
   tom entre as duas salas, coberto por uma rampa curta. */
.onde{
  --seam:clamp(120px,16vh,220px);
  background:
    linear-gradient(180deg,
      rgb(20,26,32)      0,
      rgba(20,26,32,.82) calc(var(--seam) * .26),
      rgba(20,26,32,.38) calc(var(--seam) * .58),
      rgba(20,26,32,0)   var(--seam)),
    radial-gradient(46% 30% at 4% 6%,  rgba(238,44,44,.10), transparent 70%),
    radial-gradient(52% 34% at 96% 92%, rgba(238,44,44,.08), transparent 72%),
    var(--bg);
  padding-top:calc(clamp(80px,11vw,150px) + var(--seam) * .5);
}
/* .onde → .foot não precisa de rampa: mesmo piso, mesmo preto, e a moldura do
   mapa já dá a única aresta que a passagem precisa ter. */

/* ---- BORDAS DAS SALAS ESCURAS ----
   A causa real dos cortes que apareciam entre diagnóstico → especialidades,
   especialidades → a Gueltur e depoimentos → onde estamos: cada sala escura
   tem brasas de torque posicionadas EM CIMA das próprias bordas (`at 10% 2%`,
   `at 96% 94%`), e o navegador recorta o gradiente no limite da seção. O
   resultado é um degrau reto — a costura que se via.

   A correção é uma regra só, aplicada a todas elas: um linear em cima da
   pilha (primeiro layer = mais próximo do observador) que devolve a cor base
   CHAPADA nos primeiros e nos últimos --edge pixels. Assim toda sala escura
   começa e termina no mesmo tom, e duas salas vizinhas encostam preto contra
   preto — não há o que cortar. No meio o linear é transparente e as brasas
   continuam aparecendo normalmente. */
.diag,.sys,.sede,.ppl,.pv,.onde{ --edge:clamp(90px,13vh,180px); }

.ppl{
  background:
    linear-gradient(180deg,
      rgb(13,16,19) 0, rgba(13,16,19,0) var(--edge),
      rgba(13,16,19,0) calc(100% - var(--edge)), rgb(13,16,19) 100%),
    radial-gradient(50% 32% at 94% 6%, rgba(238,44,44,.09), transparent 70%),
    radial-gradient(46% 34% at 4% 92%, rgba(238,44,44,.07), transparent 72%),
    var(--bg);
}

.diag{
  background:
    linear-gradient(180deg,
      rgb(13,16,19) 0, rgba(13,16,19,0) var(--edge),
      rgba(13,16,19,0) calc(100% - var(--edge)), rgb(13,16,19) 100%),
    linear-gradient(180deg,
      rgba(var(--seam-from),1)   0,
      rgba(var(--seam-from),.80) calc(var(--seam) * .22),
      rgba(var(--seam-from),.32) calc(var(--seam) * .56),
      rgba(var(--seam-from),0)   var(--seam)),
    radial-gradient(40% 26% at 6% 10%,  rgba(238,44,44,.13), transparent 70%),
    radial-gradient(38% 28% at 96% 84%, rgba(238,44,44,.10), transparent 72%),
    var(--bg);
}
.sys{
  background:
    linear-gradient(180deg,
      rgb(13,16,19) 0, rgba(13,16,19,0) var(--edge),
      rgba(13,16,19,0) calc(100% - var(--edge)), rgb(13,16,19) 100%),
    radial-gradient(56% 38% at 10% 2%,  rgba(238,44,44,.10), transparent 70%),
    radial-gradient(48% 38% at 94% 96%, rgba(238,44,44,.07), transparent 72%),
    var(--bg);
}
.sede{
  background:
    linear-gradient(180deg,
      rgb(13,16,19) 0, rgba(13,16,19,0) var(--edge),
      rgba(13,16,19,0) calc(100% - var(--edge)), rgb(13,16,19) 100%),
    radial-gradient(52% 34% at 6% 4%,  rgba(238,44,44,.09), transparent 70%),
    radial-gradient(46% 36% at 96% 94%, rgba(238,44,44,.07), transparent 72%),
    var(--bg);
}
/* .pv e .onde já têm rampa de topo (mudam de tom de base): o fade de borda
   entra só na BASE delas, para não brigar com a rampa */
.pv{
  background:
    linear-gradient(180deg,
      rgba(20,26,32,0) calc(100% - var(--edge)), rgb(20,26,32) 100%),
    linear-gradient(180deg,
      rgb(13,16,19)      0,
      rgba(13,16,19,.88) calc(var(--seam) * .20),
      rgba(13,16,19,.58) calc(var(--seam) * .46),
      rgba(13,16,19,.22) calc(var(--seam) * .72),
      rgba(13,16,19,0)   var(--seam)),
    radial-gradient(50% 32% at 92% 6%, rgba(238,44,44,.08), transparent 70%),
    radial-gradient(44% 34% at 4% 94%, rgba(238,44,44,.06), transparent 72%),
    var(--bg);
}
.onde{
  background:
    linear-gradient(180deg,
      rgba(13,16,19,0) calc(100% - var(--edge)), rgb(13,16,19) 100%),
    linear-gradient(180deg,
      rgb(20,26,32)      0,
      rgba(20,26,32,.82) calc(var(--seam) * .26),
      rgba(20,26,32,.38) calc(var(--seam) * .58),
      rgba(20,26,32,0)   var(--seam)),
    radial-gradient(46% 30% at 4% 6%,  rgba(238,44,44,.10), transparent 70%),
    radial-gradient(52% 34% at 96% 92%, rgba(238,44,44,.08), transparent 72%),
    var(--bg);
}

/* =========================================================
   17. FECHO DAS ESPECIALIDADES — CORREÇÃO DE LEITURA
   No quadro final da dobra travada o veículo continua na tela
   (rig__solid, apagado) e a mensagem entra por cima. As duas
   camadas dividem a mesma célula do grid, e sem uma ordem
   declarada o desenho conseguia se sobrepor ao texto: a
   headline saía clara à esquerda e cinza à direita, seguindo
   a silhueta da caminhonete, como se a opacidade estivesse
   presa no meio da transição.

   Aqui o fecho é o topo declarado da pilha e carrega o próprio
   assento — um véu radial que apaga o que estiver atrás dele.
   O veículo desce mais um degrau: continua presente, mas como
   fundo, não como camada concorrente.
   ========================================================= */
.sysscroll.is-scrub .sys__end{ position:relative; z-index:3; }
.sysscroll.is-scrub .sys__end::before{
  content:''; position:absolute; inset:-18% -12%; z-index:0;
  pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%,
    rgba(13,16,19,.94) 0%, rgba(13,16,19,.78) 48%, rgba(13,16,19,0) 100%);
}
/* No mobile a caixa ocupa a largura toda (ver 08b), então esses -12% viravam
   ~42px fora da tela de cada lado e a PÁGINA INTEIRA ganhava rolagem lateral.
   O sangramento vertical continua; o horizontal para na borda da caixa — ali o
   gradiente já está quase transparente, o brilho não muda.
   Precisa vir DEPOIS da regra acima: mesma especificidade, ganha a ordem. */
@media (max-width:1024px){
  .sysscroll.is-scrub .sys__end::before{ inset:-18% 0; }
}
.sysscroll.is-scrub .sys__end > *{ position:relative; z-index:1; }
/* nenhuma das duas herda opacidade parcial de lugar nenhum */
.sysscroll.is-scrub .sys__end .display{ color:var(--ink); opacity:1; }
.sysscroll.is-scrub .sys__end .body{ color:var(--muted); opacity:1; }
/* o veículo vira fundo de verdade no quadro final */
.sysscroll.is-scrub .sys__stage.is-clear .rig__solid{ opacity:.16; }

/* ---- manifesto → serviços, no modo travado ----
   Aqui a rampa de .services não aparece: o painel sticky cobre a seção com a
   foto do serviço, e era a BORDA DE CIMA dessa foto que cortava o preto do
   manifesto em linha reta. O véu do painel ganha então um topo próprio — a
   foto nasce do mesmo preto de onde a dobra anterior termina. Depois que o
   painel trava, esse topo vira o assento do título, que já vivia sobre a
   foto. A borda de baixo fecha em preto cheio pelo mesmo motivo, para
   encostar no diagnóstico sem costura. */
.srvscroll.is-scrub .panel__bg-scrim{
  background:
    linear-gradient(to bottom,
      rgb(13,16,19) 0, rgba(13,16,19,.62) 90px, rgba(13,16,19,0) 270px),
    linear-gradient(to top,
      rgb(13,16,19) 0, rgba(13,16,19,0) 130px),
    linear-gradient(90deg, rgba(13,16,19,.95) 0%, rgba(13,16,19,.88) 42%, rgba(13,16,19,.62) 74%, rgba(13,16,19,.48) 100%),
    radial-gradient(52% 40% at 4% 8%, rgba(238,44,44,.14), transparent 70%),
    radial-gradient(60% 46% at 88% 92%, rgba(13,16,19,.7), transparent 72%),
    linear-gradient(to top, rgba(13,16,19,.78), transparent 34%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 4px);
}

/* a foto do motor terminava numa aresta reta na base do fecho — visível
   sobretudo em fluxo, onde .mf__end não ocupa a tela inteira. As duas bordas
   fecham em preto cheio: a foto passa a nascer e a morrer dentro do fundo da
   própria dobra, e a saída do manifesto encosta na rampa de .services sem
   nenhum degrau no meio */
.mf__endbg::after{
  background:
    linear-gradient(to bottom, rgb(13,16,19) 0, rgba(13,16,19,0) 100px),
    linear-gradient(to top,    rgb(13,16,19) 0, rgba(13,16,19,0) 100px),
    radial-gradient(46% 36% at 50% 42%, rgba(13,16,19,.58), transparent 76%),
    radial-gradient(80% 72% at 50% 48%, rgba(13,16,19,.50), rgba(13,16,19,.88) 100%),
    linear-gradient(to bottom, rgba(13,16,19,.45), transparent 32% 68%, rgba(13,16,19,.70));
}