/* ============================================================
   KP MEDIA — folha de estilo única
   Tokens do Manual de Marca v1.0 (2026)
   Proporção alvo: 60% preto · 20% ciano · 15% rosa · 5% apoio
   ============================================================ */
:root{
  --preto:#0D0D0D;
  --grafite:#161616;
  --grafite-2:#1c1c1c;
  --ciano:#25F4EE;
  --rosa:#FF2B54;
  --off:#F2F1EC;
  --amarelo:#FFDE00;
  --violeta:#6C4CF5;
  --corpo-escuro:#C9C8C2;   /* corpo sobre fundo escuro — nunca branco puro */
  --linha:rgba(242,241,236,.14);

  --titulo:'Poppins','Ubuntu',system-ui,sans-serif;   /* fallback de All Round Gothic */
  --texto:'Ubuntu',system-ui,sans-serif;
  --mono:'Ubuntu Sans Mono',ui-monospace,monospace;

  --max:1200px;
  --gut:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.22,1,.36,1);      /* saída suave, entrada rápida */
  --ease-io:cubic-bezier(.76,0,.24,1);   /* cortinas e painéis */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.smooth{scroll-behavior:smooth}
body{
  margin:0;background:var(--preto);color:var(--corpo-escuro);
  font-family:var(--texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ciano);color:var(--preto)}

h1,h2,h3{font-family:var(--titulo);font-weight:600;letter-spacing:-.02em;line-height:.98;margin:0;font-style:normal}
p{margin:0;max-width:66ch}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.only-desk{display:block}

/* label mono — único lugar com caixa alta, junto de botões */
.label{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(242,241,236,.45);display:inline-block;
}
.label--ciano{color:var(--ciano)}
.label--rosa{color:var(--rosa)}
.label--amarelo{color:var(--amarelo)}

/* ---------- Logotipo (PLACEHOLDER) ----------
   O manual proíbe redesenhar o monograma em fonte.
   Trocar este bloco pelo SVG oficial de kp antes de publicar. */
.logo{
  font-family:var(--titulo);font-weight:700;font-size:30px;letter-spacing:-.06em;
  line-height:1;display:inline-block;text-decoration:none;
}
.logo .k{color:var(--ciano);display:inline-block;transition:transform .35s var(--ease)}
.logo .p{color:var(--rosa);margin-left:-.04em;display:inline-block;transition:transform .35s var(--ease)}
.logo:hover .k{transform:translateY(-3px)}
.logo:hover .p{transform:translateY(3px)}

/* ============================================================
   MOTOR DE TRANSIÇÕES (FX)
   O modo ativo fica em html[data-fx="..."]; o palco é o conteúdo
   da página e as camadas do efeito vivem em .fx (montadas por JS).
   ============================================================ */
#palco{transform-origin:50% 50%}
.fx{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden}
.fx__marca{
  position:fixed;inset:0;z-index:121;display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.fx__marca .logo{font-size:44px}
html[data-fx="portal"] .fx.is-out ~ .fx__marca,
html[data-fx="cortina"] .fx.is-out ~ .fx__marca{opacity:1}

/* ---- 1. Cortina: colunas com borda de marca ---- */
.fx .col{position:absolute;inset:0;display:flex}
.fx .col i{
  flex:1;background:var(--grafite);border-block:8px solid var(--ciano);
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease-io);
}
.fx .col i:nth-child(2){border-block-color:var(--rosa);transition-delay:45ms}
.fx .col i:nth-child(3){border-block-color:var(--amarelo);transition-delay:90ms}
.fx .col i:nth-child(4){border-block-color:var(--violeta);transition-delay:135ms}
.fx .col i:nth-child(5){transition-delay:180ms}
.fx.is-out .col i{transform:scaleY(1);transform-origin:bottom}
.fx.cobre .col i{transform:scaleY(1);transform-origin:top;transition:none}
.fx.is-in .col i{transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease-io)}

/* ---- 2. Portal: zoom + desfoque com flash ciano ---- */
.fx .flash{
  position:absolute;inset:0;opacity:0;transform:scale(.7);
  background:radial-gradient(circle at 50% 50%,rgba(37,244,238,.28),rgba(255,43,84,.1) 40%,rgba(13,13,13,0) 70%),var(--preto);
  transition:opacity .34s var(--ease),transform .45s var(--ease);
}
.fx.is-out .flash{opacity:1;transform:scale(1.25)}
.fx.cobre .flash{opacity:1;transform:scale(1.25);transition:none}
.fx.is-in .flash{opacity:0;transform:scale(1.6);transition:opacity .34s var(--ease),transform .45s var(--ease)}
html[data-fx="portal"] #palco.sai{animation:portalOut .42s var(--ease) both}
html[data-fx="portal"] #palco.entra{animation:portalIn .62s var(--ease) both}
@keyframes portalOut{to{transform:scale(1.04);filter:blur(9px);opacity:0}}
@keyframes portalIn{from{transform:scale(.975);filter:blur(10px);opacity:0}}

/* ---- 3. Glitch: fatias curtas, sem estrobo nem inversão de tela cheia ---- */
html[data-fx="glitch"] #palco.sai{animation:glitchOut .38s var(--ease-io) both}
html[data-fx="glitch"] #palco.entra{animation:glitchIn .42s var(--ease-io) both}
@keyframes glitchOut{
  0%{clip-path:inset(0 0 0 0);transform:none}
  30%{clip-path:inset(0 0 34% 0);transform:translate3d(-9px,0,0)}
  60%{clip-path:inset(26% 0 12% 0);transform:translate3d(11px,0,0)}
  100%{clip-path:inset(48% 0 48% 0);transform:none;opacity:0}
}
@keyframes glitchIn{
  0%{clip-path:inset(48% 0 48% 0);opacity:0}
  35%{clip-path:inset(18% 0 26% 0);opacity:1;transform:translate3d(8px,0,0)}
  70%{clip-path:inset(0 0 9% 0);transform:translate3d(-5px,0,0)}
  100%{clip-path:inset(0 0 0 0);transform:none}
}
.fx .ruido{
  position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(242,241,236,.05) 0 1px,transparent 1px 4px);
  transition:opacity .2s ease;
}
.fx.is-out .ruido,.fx.cobre .ruido,.fx.is-in .ruido{opacity:1}
/* duas fatias de cor que atravessam a tela uma única vez — sem loop piscando */
.fx .barra{position:absolute;left:0;right:0;height:3px;background:var(--ciano);opacity:0;top:38%}
.fx .barra + .barra{background:var(--rosa);top:62%}
.fx.is-out .barra,.fx.is-in .barra{animation:corta .38s var(--ease-io) both}
.fx.is-out .barra + .barra,.fx.is-in .barra + .barra{animation-delay:.08s}
@keyframes corta{
  0%{opacity:0;transform:translateX(-14%) scaleX(.2)}
  40%{opacity:.9;transform:none}
  100%{opacity:0;transform:translateX(12%) scaleX(.4)}
}

/* ---- 4. Mosaico: dissolve em pixels ---- */
.fx .celulas{position:absolute;inset:-1px;display:grid;grid-template-columns:repeat(var(--cols,16),1fr);grid-auto-rows:1fr}
.fx .celulas b{background:var(--grafite);transform:scale(0);transition:transform .26s var(--ease)}
.fx .celulas b.a1{background:var(--ciano)}
.fx .celulas b.a2{background:var(--rosa)}
.fx .celulas b.a3{background:var(--amarelo)}
.fx.is-out .celulas b{transform:scale(1.03)}
.fx.cobre .celulas b{transform:scale(1.03);transition:none}
.fx.is-in .celulas b{transform:scale(0);transition:transform .26s var(--ease)}

/* ---- 5. Lâminas 45°: o corte do k virando transição ---- */
.fx .laminas{position:absolute;inset:-45%;display:flex;flex-direction:column;transform:rotate(-45deg)}
.fx .laminas i{flex:1;background:var(--grafite);border-top:3px solid var(--ciano);transform:translateX(-125%);
  transition:transform .45s var(--ease-io)}
.fx .laminas i:nth-child(even){transform:translateX(125%);border-top-color:var(--rosa)}
.fx .laminas i:nth-child(3n){border-top-color:var(--amarelo)}
.fx .laminas i:nth-child(2){transition-delay:40ms}
.fx .laminas i:nth-child(3){transition-delay:80ms}
.fx .laminas i:nth-child(4){transition-delay:120ms}
.fx .laminas i:nth-child(5){transition-delay:160ms}
.fx .laminas i:nth-child(6){transition-delay:200ms}
.fx .laminas i:nth-child(7){transition-delay:240ms}
.fx .laminas i:nth-child(8){transition-delay:280ms}
.fx.is-out .laminas i,.fx.cobre .laminas i{transform:none}
.fx.cobre .laminas i{transition:none}
.fx.is-in .laminas i{transform:translateX(125%);transition:transform .45s var(--ease-io)}
.fx.is-in .laminas i:nth-child(even){transform:translateX(-125%);transition:transform .45s var(--ease-io)}

/* ---- 6. Scanline: colapso de tubo CRT ---- */
html[data-fx="scan"] #palco.sai{animation:scanOut .42s var(--ease-io) both}
html[data-fx="scan"] #palco.entra{animation:scanIn .58s var(--ease-io) both}
@keyframes scanOut{
  0%{transform:scaleY(1);filter:none}
  65%{transform:scaleY(.04) scaleX(1);filter:brightness(1.5) contrast(1.2)}
  100%{transform:scaleY(.006) scaleX(.45);filter:brightness(2);opacity:.9}
}
@keyframes scanIn{
  0%{transform:scaleY(.006) scaleX(.45);filter:brightness(2);opacity:.9}
  40%{transform:scaleY(.04) scaleX(1);filter:brightness(1.5) contrast(1.2);opacity:1}
  100%{transform:none;filter:none}
}
.fx .linha{
  position:absolute;left:50%;top:50%;height:2px;width:0;transform:translate(-50%,-50%);
  background:var(--ciano);box-shadow:0 0 18px 4px rgba(37,244,238,.5);opacity:0;
  transition:width .45s var(--ease-io),opacity .3s ease;
}
.fx.is-out .linha{width:100%;opacity:1}
.fx.cobre .linha{width:100%;opacity:1;transition:none}
.fx.is-in .linha{width:0;opacity:0;transition:width .45s var(--ease-io),opacity .3s ease}

/* ---- seletor de efeito (só aparece com ?fx na URL) ---- */
.fxpick{
  position:fixed;right:18px;bottom:18px;z-index:130;font-family:var(--mono);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.fxpick__btn{
  background:var(--rosa);color:#fff;border:0;cursor:pointer;padding:12px 18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
}
.fxpick__lista{
  display:none;flex-direction:column;gap:2px;background:var(--linha);border:1px solid var(--linha);
  max-width:min(300px,calc(100vw - 36px));
}
.fxpick.aberto .fxpick__lista{display:flex}
.fxpick__lista button{
  background:var(--preto);border:0;cursor:pointer;color:var(--corpo-escuro);text-align:left;
  padding:12px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  display:grid;gap:4px;transition:background .2s ease,color .2s ease;
}
.fxpick__lista button:hover{background:var(--grafite-2);color:var(--off)}
.fxpick__lista button[aria-pressed="true"]{background:var(--grafite);color:var(--ciano)}
.fxpick__lista button small{text-transform:none;letter-spacing:0;font-size:11px;color:rgba(242,241,236,.4)}
.fxpick__lista button[aria-pressed="true"] small{color:rgba(37,244,238,.55)}

/* ============================ PRELOADER ============================ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--preto);
  display:grid;place-items:center;gap:0;
  transition:opacity .5s ease,visibility .5s ease;
}
.loader.done{opacity:0;visibility:hidden}
.loader__in{display:grid;justify-items:center;gap:26px;padding-inline:var(--gut)}
.loader .logo{font-size:56px}
.loader__bar{width:min(280px,60vw);height:2px;background:var(--linha);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--ciano);transition:width .2s linear}
.loader__num{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:rgba(242,241,236,.45)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(13,13,13,0);backdrop-filter:blur(0);
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease,transform .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(13,13,13,.88);backdrop-filter:blur(14px);border-bottom-color:var(--linha)}
.nav.hide{transform:translateY(-100%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.nav__links{display:flex;gap:34px;align-items:center}
.nav__links a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--corpo-escuro);padding-block:6px;position:relative;
  transition:color .2s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ciano);
  transition:width .25s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
.nav__links a[aria-current="page"]{color:var(--off)}
.nav__links .btn::after{display:none}

/* barra de progresso de leitura */
.nav__prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--ciano),var(--rosa));transition:transform .1s linear}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 24px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--ease),color .25s ease,border-color .25s ease;
}
.btn > span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;transform:scaleY(0);transform-origin:bottom;
  transition:transform .32s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:scaleY(1);transform-origin:top}
.btn--rosa{background:var(--rosa);color:#fff}            /* rosa → texto branco */
.btn--rosa::before{background:var(--off)}
.btn--rosa:hover{color:var(--preto)}
.btn--ciano{background:var(--ciano);color:var(--preto)}   /* ciano → texto preto */
.btn--ciano::before{background:var(--off)}
.btn--ciano:hover{color:var(--preto)}
.btn--ghost{border-color:var(--linha);color:var(--corpo-escuro)}
.btn--ghost::before{background:var(--ciano)}
.btn--ghost:hover{color:var(--preto);border-color:var(--ciano)}
.btn--preto{background:var(--preto);color:var(--off)}
.btn--preto::before{background:var(--off)}
.btn--preto:hover{color:var(--preto)}
.btn--claro{border-color:rgba(13,13,13,.2);color:var(--preto)}
.btn--claro::before{background:var(--preto)}
.btn--claro:hover{color:var(--off);border-color:var(--preto)}
.nav__toggle{display:none;background:none;border:0;color:var(--off);cursor:pointer;padding:8px;width:44px;height:44px}
.nav__toggle i{display:block;height:2px;background:var(--off);margin:5px 0;transition:transform .3s var(--ease),opacity .2s ease}
.nav__toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ HERO ============================ */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.hero h1{
  font-size:clamp(44px,7.6vw,104px);letter-spacing:-.03em;color:var(--off);
  margin:26px 0 30px;
}
.hero h1 .dot-r{color:var(--rosa)}
.hero h1 .dot-c{color:var(--ciano)}
.hero p{font-size:clamp(17px,1.35vw,20px);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero--curto{padding:132px 0 64px}
.hero--curto h1{font-size:clamp(38px,6vw,80px);margin:22px 0 24px}

/* linhas de título com máscara (efeito de subida) */
/* A folga embaixo existe para as vírgulas, o "g" e o "p" caberem: com
   line-height .98 e overflow:hidden, o corte comia o rabo da pontuação.
   Ela vai só embaixo (margem negativa devolve o espaço) e o ponto de
   partida sobe para 126% para o texto continuar escondido no repouso:
   (.98 + .18) / .98 = 1.184, então 126% cobre em qualquer tamanho. */
.mask{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.mask > span{display:block;transform:translateY(126%);transition:transform .9s var(--ease)}
.is-ready .mask > span,.rise.in .mask > span{transform:none}
.mask:nth-child(2) > span{transition-delay:.08s}
.mask:nth-child(3) > span{transition-delay:.16s}

/* ============================ MARQUEE ============================ */
.marquee{
  border-block:1px solid var(--linha);padding:18px 0;overflow:hidden;
  display:flex;gap:0;user-select:none;
}
.marquee__track{display:flex;gap:0;flex:0 0 auto;animation:slide 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--titulo);font-weight:600;font-size:clamp(22px,3vw,38px);
  color:rgba(242,241,236,.16);padding-inline:26px;white-space:nowrap;letter-spacing:-.02em;
}
.marquee span b{color:var(--ciano);font-weight:600}
.marquee span i{color:var(--rosa);font-style:normal}
@keyframes slide{to{transform:translateX(-100%)}}

/* ============================ PILARES ============================ */
.pillars{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:56px 0}
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pillar{border-top:2px solid;padding-top:18px;transition:transform .3s var(--ease)}
.pillar:hover{transform:translateY(-4px)}
.pillar:nth-child(1){border-color:var(--ciano)}
.pillar:nth-child(2){border-color:var(--rosa)}
.pillar:nth-child(3){border-color:var(--amarelo)}
.pillar h3{font-size:19px;color:var(--off);margin-bottom:7px;letter-spacing:-.01em;line-height:1.2}
.pillar p{font-size:15.5px;color:rgba(201,200,194,.7)}

/* ============================ SEÇÃO GENÉRICA ============================ */
.sec{padding:110px 0 100px}
.sec--top{padding-top:0}
.sec__head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sec__head h2{font-size:clamp(34px,4.6vw,62px);color:var(--off)}
.sec__head h2 em{font-style:normal;color:var(--ciano)}
.sec__head h2 .r{color:var(--rosa)}

/* ============================ CARDS DE SERVIÇO ============================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--linha)}
.card{
  background:var(--grafite);padding:44px 34px 40px;position:relative;overflow:hidden;
  transition:background .25s ease;
}
.card::before{ /* corte diagonal 45°, sempre */
  content:"";position:absolute;top:0;right:0;width:74px;aspect-ratio:1;
  clip-path:polygon(100% 0,100% 100%,0 0);opacity:.9;transition:width .35s var(--ease);
}
.card:nth-child(1)::before{background:var(--ciano)}
.card:nth-child(2)::before{background:var(--rosa)}
.card:nth-child(3)::before{background:var(--amarelo)}
.card:nth-child(4)::before{background:var(--violeta)}
.card:nth-child(5)::before{background:var(--ciano)}
.card:nth-child(6)::before{background:var(--rosa)}
.card:hover{background:var(--grafite-2)}
.card:hover::before{width:110px}
.card h3{font-size:27px;color:var(--off);margin:20px 0 12px}
.card p{font-size:15.5px;color:rgba(201,200,194,.72)}
.card ul{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--linha)}
.card li{
  font-size:14.5px;padding:11px 0;border-bottom:1px solid var(--linha);
  display:flex;gap:12px;align-items:baseline;color:rgba(201,200,194,.85);
  transition:padding-left .25s var(--ease),color .25s ease;
}
.card li:hover{padding-left:8px;color:var(--off)}
.card li span{font-family:var(--mono);font-size:11px;color:rgba(242,241,236,.35)}

/* ============================ NÚMEROS ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--linha)}
.stat{background:var(--preto);padding:38px 26px}
.stat b{
  display:block;font-family:var(--titulo);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(38px,4.6vw,60px);color:var(--off);line-height:1;
}
.stat:nth-child(1) b{color:var(--ciano)}
.stat:nth-child(2) b{color:var(--rosa)}
.stat:nth-child(3) b{color:var(--amarelo)}
.stat:nth-child(4) b{color:var(--violeta)}
.stat p{font-size:14.5px;color:rgba(201,200,194,.62);margin-top:12px;max-width:24ch}

/* ============================ PASSOS / MÉTODO ============================ */
.steps{display:grid;gap:2px;background:var(--linha);border-block:1px solid var(--linha)}
.step{background:var(--preto);padding:34px 0;position:relative}
.step__in{display:grid;grid-template-columns:minmax(140px,.55fr) 1fr 1.15fr;gap:clamp(24px,3vw,40px);align-items:start}
.step__n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:rgba(242,241,236,.35);padding-top:6px}
.step h3{font-size:clamp(24px,2.8vw,34px);color:var(--off)}
.step p{font-size:15.5px;color:rgba(201,200,194,.7)}
.step::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--ciano);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.step.in::after{transform:scaleY(1)}
.step:nth-child(2)::after{background:var(--rosa)}
.step:nth-child(3)::after{background:var(--amarelo)}
.step:nth-child(4)::after{background:var(--violeta)}

/* ============================ ACORDEÃO ============================ */
.acc{border-top:1px solid var(--linha)}
.acc__item{border-bottom:1px solid var(--linha)}
.acc__btn{
  width:100%;background:none;border:0;color:var(--off);text-align:left;cursor:pointer;
  font-family:var(--titulo);font-weight:600;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;
  padding:26px 44px 26px 0;position:relative;transition:color .2s ease;
}
.acc__btn:hover{color:var(--ciano)}
.acc__btn::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;background:currentColor;
  transform:translateY(-50%);
}
.acc__btn::before{
  content:"";position:absolute;right:12px;top:50%;width:2px;height:14px;background:currentColor;
  transform:translateY(-50%) scaleY(1);transition:transform .3s var(--ease);
}
.acc__btn[aria-expanded="true"]::before{transform:translateY(-50%) scaleY(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc__panel > div{overflow:hidden}
.acc__item.open .acc__panel{grid-template-rows:1fr}
.acc__panel p{font-size:15.5px;color:rgba(201,200,194,.7);padding-bottom:26px;max-width:70ch}

/* ============================ CITAÇÃO ============================ */
.quote{padding:100px 0;border-top:1px solid var(--linha)}
.quote blockquote{margin:0;max-width:22ch}
.quote q{
  font-family:var(--titulo);font-weight:600;font-size:clamp(28px,4vw,54px);color:var(--off);
  letter-spacing:-.02em;line-height:1.04;quotes:none;display:block;max-width:20ch;
}
.quote q em{font-style:normal;color:var(--rosa)}
.quote figcaption{margin-top:28px}

/* ============================ FAIXA 45° ============================ */
.stripe{
  padding:52px 0;color:var(--preto);
  background:repeating-linear-gradient(45deg,var(--amarelo) 0 26px,var(--preto) 26px 52px);
}
.stripe__in{
  background:var(--amarelo);padding:34px var(--gut);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  max-width:var(--max);margin:0 auto;
}
.stripe h3{font-size:clamp(22px,2.6vw,32px);color:var(--preto);max-width:22ch}

/* ============================ CTA ============================ */
.cta{padding:110px 0;background:var(--off);color:var(--preto)}
.cta h2{font-size:clamp(34px,5vw,68px);color:var(--preto);max-width:14ch}
.cta h2 .dot-c{color:var(--ciano)}
.cta h2 .dot-r{color:var(--rosa)}
.cta p{color:rgba(13,13,13,.66);margin-top:22px;font-size:18px}
.cta__row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.cta .label{color:rgba(13,13,13,.5)}

/* ============================ FORMULÁRIO ============================ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;max-width:820px}
.field{display:grid;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,241,236,.45)}
.field input,.field textarea,.field select{
  background:var(--grafite);border:1px solid var(--linha);color:var(--off);
  font-family:var(--texto);font-size:16px;padding:15px 16px;width:100%;
  transition:border-color .25s ease,background .25s ease;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ciano);background:var(--grafite-2);
}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.form__msg{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ciano);opacity:0;transition:opacity .3s ease}
.form__msg.show{opacity:1}

/* lista de contato */
.contato__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.info{border-top:1px solid var(--linha);margin-top:44px}
.info__row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--linha);font-size:15.5px}
.info__row a{text-decoration:none;transition:color .2s ease}
.info__row a:hover{color:var(--ciano)}

/* ============================ FOOTER ============================ */
.ft{padding:64px 0 30px;border-top:1px solid var(--linha)}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}
.ft h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,241,236,.4);margin:0 0 16px;font-weight:400}
.ft a{display:block;text-decoration:none;font-size:15px;padding:6px 0;color:var(--corpo-escuro);
  transition:color .2s ease,transform .2s var(--ease)}
.ft a:hover{color:var(--ciano);transform:translateX(4px)}
.ft__bar{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--linha);padding-top:22px;
}
.ft__rule{display:flex;height:5px;margin-top:26px}
.ft__rule i{flex:1;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.ft__rule.in i{transform:scaleX(1)}
.ft__rule i:nth-child(1){background:var(--ciano);transition-delay:0s}
.ft__rule i:nth-child(2){background:var(--rosa);transition-delay:.1s}
.ft__rule i:nth-child(3){background:var(--amarelo);transition-delay:.2s}
.ft__rule i:nth-child(4){background:var(--violeta);transition-delay:.3s}

/* ============================ CURSOR ============================ */
.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid var(--ciano);border-radius:50%;
  z-index:150;pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s ease,width .25s var(--ease),height .25s var(--ease),background .25s ease;
  mix-blend-mode:difference;
}
.cursor.on{opacity:1}
.cursor.big{width:56px;height:56px;background:rgba(37,244,238,.16)}

/* ============================ MOTION ============================ */
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-delay="1"]{transition-delay:.09s}
.rise[data-delay="2"]{transition-delay:.18s}
.rise[data-delay="3"]{transition-delay:.27s}
.rise[data-delay="4"]{transition-delay:.36s}

/* ============================ RESPONSIVO ============================ */
@media (max-width:960px){
  .cards{grid-template-columns:1fr}
  .sec__head{grid-template-columns:1fr;gap:20px}
  .pillars__grid{grid-template-columns:1fr;gap:28px}
  .stats{grid-template-columns:1fr 1fr}
  .step__in{grid-template-columns:1fr;gap:14px}
  .contato__grid{grid-template-columns:1fr;gap:36px}
  .ft__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:720px){
  .only-desk{display:none}
  .nav__links{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:var(--preto);border-bottom:1px solid var(--linha);padding:8px var(--gut) 22px;
    display:none;
  }
  .nav__links.open{display:flex}
  .nav__links.open a{animation:navIn .4s var(--ease) both}
  .nav__links.open a:nth-child(1){animation-delay:.04s}
  .nav__links.open a:nth-child(2){animation-delay:.09s}
  .nav__links.open a:nth-child(3){animation-delay:.14s}
  .nav__links.open a:nth-child(4){animation-delay:.19s}
  .nav__links.open a:nth-child(5){animation-delay:.24s}
  @keyframes navIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .nav__links a{padding:15px 0;border-bottom:1px solid var(--linha)}
  .nav__links .btn{justify-content:center;margin-top:14px;border-bottom:0}
  .nav__toggle{display:block}
  .hero{padding-top:118px}
  .sec{padding:80px 0 70px}
  .stats{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .stripe__in{flex-direction:column;align-items:flex-start}
  .ft__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .mask > span{transform:none;transition:none}
  .fx,.fx__marca,.cursor{display:none}
  #palco.sai,#palco.entra{animation:none}
  .marquee__track{animation:none}
  .step::after,.ft__rule i{transform:none}
  html.smooth{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   EFEITOS DE SCROLL (linguagem dos "motion sites")
   Três peças: manifesto palavra a palavra, painéis empilhados
   e slot de mídia com zoom. Nenhuma depende de biblioteca.
   ============================================================ */

/* ---- 1. Manifesto: o texto acende palavra a palavra conforme rola ---- */
.manifesto{
  font-family:var(--titulo);font-weight:600;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(26px,3.6vw,50px);max-width:20ch;color:var(--off);
}
.manifesto .w{opacity:.14;transition:opacity .35s var(--ease);display:inline-block}
.manifesto .w.on{opacity:1}
.manifesto .w.ciano.on{color:var(--ciano)}
.manifesto .w.rosa.on{color:var(--rosa)}
.manifesto__sec{padding:120px 0 110px;border-top:1px solid var(--linha)}

/* ---- 2. Painéis empilhados: cada etapa gruda e a próxima cobre ---- */
@media (min-width:961px){
  /* o empilhamento precisa de bloco: dentro de grid cada item fica preso à própria linha */
  .pilha{display:block;background:none;position:relative}
  .pilha .step{
    position:sticky;top:calc(92px + var(--i,0) * 18px);
    min-height:46vh;display:flex;align-items:center;
    background:var(--preto);border-top:2px solid var(--ciano);
    box-shadow:0 -22px 44px rgba(0,0,0,.7);
    transform-origin:50% 0;transition:transform .45s var(--ease),opacity .45s var(--ease);
  }
  .pilha .step:nth-child(2){background:#101010;border-top-color:var(--rosa)}
  .pilha .step:nth-child(3){background:var(--grafite);border-top-color:var(--amarelo)}
  .pilha .step:nth-child(4){background:#191919;border-top-color:var(--violeta)}
  .pilha .step .step__in{width:100%;transition:opacity .45s var(--ease)}
  /* o painel recuado continua opaco (senão o texto de baixo vaza) — some só o conteúdo */
  .pilha .step.recuado{transform:scale(.975)}
  .pilha .step.recuado .step__in{opacity:.3}
}

/* ---- 3. Slot de mídia: vídeo ou imagem com zoom no scroll ---- */
.midia{
  position:relative;margin:0;overflow:hidden;background:var(--grafite);
  aspect-ratio:1/1.12;min-height:260px;
}
.midia--larga{aspect-ratio:16/9;width:100%}
.midia video,.midia img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--zoom,1));transition:transform .1s linear;will-change:transform;
}
.midia__legenda{
  position:absolute;left:0;bottom:0;padding:10px 14px;background:rgba(13,13,13,.72);
  backdrop-filter:blur(8px);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,241,236,.7);
}
/* filete de marca em cima da mídia, para não virar “foto de banco de imagem” */
.midia::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--ciano) 0 33%,var(--rosa) 33% 66%,var(--amarelo) 66% 100%);
}
.midia--sem::after{display:none}

@media (prefers-reduced-motion:reduce){
  .manifesto .w{opacity:1}
  .midia video,.midia img{transform:none}
  .pilha .step{position:static;transform:none;opacity:1}
}

/* ============================================================
   EFEITOS EXTRAS: fundo generativo, faixa horizontal e luz no cursor
   ============================================================ */

/* ---- Fundo generativo (canvas) ---- */
.fundo{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  pointer-events:none;opacity:.85;
  /* apaga nas bordas para não competir com o texto */
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 60% 40%,#000 35%,transparent 78%);
}
.hero{isolation:isolate}
.hero > .wrap{position:relative;z-index:1}

/* ---- Faixa horizontal travada no scroll ---- */
.horiz{position:relative}
.horiz__pin{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;
  gap:32px;overflow:clip;
}
.horiz__topo{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  max-width:var(--max);margin:0 auto;padding-inline:var(--gut);width:100%}
.horiz__topo h2{font-size:clamp(28px,3.6vw,48px);color:var(--off)}
.horiz__fita{display:flex;gap:2px;padding-inline:var(--gut);will-change:transform}
.horiz__card{
  flex:0 0 min(400px,74vw);background:var(--grafite);padding:34px 30px;position:relative;
  display:flex;flex-direction:column;gap:12px;min-height:340px;
}
.horiz__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ciano);
}
.horiz__card:nth-child(2)::before{background:var(--rosa)}
.horiz__card:nth-child(3)::before{background:var(--amarelo)}
.horiz__card:nth-child(4)::before{background:var(--violeta)}
.horiz__card:nth-child(5)::before{background:var(--ciano)}
.horiz__card h3{font-size:23px;color:var(--off);margin-top:6px}
.horiz__card p{font-size:15px;color:rgba(201,200,194,.7)}
.horiz__card b{margin-top:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,241,236,.4);font-weight:400}
.horiz__barra{height:2px;background:var(--linha);max-width:var(--max);width:100%;margin:0 auto;
  padding-inline:0;position:relative}
.horiz__barra i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--ciano);
  transform:scaleX(var(--p,0));transform-origin:left}

@media (max-width:960px){
  .horiz{height:auto !important}
  .horiz__pin{position:static;height:auto;padding-block:70px}
  .horiz__fita{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .horiz__card{scroll-snap-align:start;min-height:0}
  .horiz__barra{display:none}
}

/* ---- Luz seguindo o cursor nos cards ---- */
@media (pointer:fine){
  .card,.horiz__card,.entrega{--mx:50%;--my:50%}
  .card::after,.horiz__card::after,.entrega::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .3s ease;
    background:radial-gradient(240px circle at var(--mx) var(--my),rgba(37,244,238,.13),transparent 62%);
  }
  .card:hover::after,.horiz__card:hover::after,.entrega:hover::after{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .fundo{display:none}
  .horiz{height:auto !important}
  .horiz__pin{position:static;height:auto}
  .horiz__fita{transform:none !important;overflow-x:auto}
}

/* ============================================================
   SCRUB — efeitos guiados pelo progresso do scroll
   Mesma mecânica do estudo: track alto + palco sticky + 0→1.
   Desligam sozinhos em telas estreitas e sob reduced-motion.
   ============================================================ */
.scrub{position:relative}
.scrub__stage{position:sticky;top:0;height:100vh;overflow:hidden}

/* ---- Pilares em WIPE (02) + tipo subindo (06) + foco (11) ----
   O painel é tipografia de tela cheia: sem foto, o herói é a letra. ---- */
.wipes .scrub__track{height:360vh}
.wipe{position:absolute;inset:0;overflow:hidden;will-change:clip-path;display:grid;align-content:center}
.wipe .bg{position:absolute;inset:-6%;z-index:0;will-change:transform;transform-origin:50% 50%}
.wipe:nth-child(1) .bg{background:
  radial-gradient(90% 70% at 78% 22%,rgba(37,244,238,.28),transparent 58%),
  linear-gradient(165deg,#0e1b1a,var(--preto) 66%)}
.wipe:nth-child(2) .bg{background:
  radial-gradient(90% 70% at 22% 76%,rgba(255,43,84,.26),transparent 58%),
  linear-gradient(200deg,#1e0f13,var(--preto) 66%)}
.wipe:nth-child(3) .bg{background:
  radial-gradient(90% 70% at 64% 26%,rgba(255,222,0,.18),transparent 55%),
  linear-gradient(150deg,#1c1a0d,var(--preto) 64%)}

/* faixa 45° da marca entrando com o painel */
.wipe__corte{position:absolute;inset:-30% -10%;z-index:1;will-change:transform;
  background:repeating-linear-gradient(45deg,rgba(242,241,236,.05) 0 2px,transparent 2px 26px)}
.wipe__corte::after{content:"";position:absolute;right:-4%;top:0;bottom:0;width:19%;
  background:var(--tom,var(--ciano));opacity:.92;
  clip-path:polygon(58% 0,100% 0,100% 100%,0 100%)}
.wipe:nth-child(1){--tom:var(--ciano)}
.wipe:nth-child(2){--tom:var(--rosa)}
.wipe:nth-child(3){--tom:var(--amarelo)}

/* número fantasma gigante */
.wipe__n{position:absolute;z-index:1;left:calc(var(--gut) - .06em);top:5vh;
  font-family:var(--titulo);font-weight:700;font-size:clamp(140px,24vw,340px);line-height:.8;
  letter-spacing:-.05em;color:rgba(242,241,236,.045);will-change:transform;pointer-events:none}
.wipe .n{position:absolute;z-index:4;top:8vh;right:var(--gut);
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:rgba(242,241,236,.45)}

.wipe__in{position:relative;z-index:3;padding-inline:var(--gut);max-width:var(--max);
  margin:0 auto;width:100%}
.wipe h3{font-size:clamp(38px,8.6vw,132px);letter-spacing:-.04em;line-height:1;color:var(--off)}
.wipe h3 .l{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.wipe h3 .l i{display:block;font-style:normal;white-space:nowrap;transform:translateY(108%);will-change:transform}
.wipe p{margin-top:28px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,241,236,.62);max-width:44ch;will-change:opacity,transform}
.wipe__tag{display:inline-block;margin-top:30px;padding:9px 16px;border:1px solid var(--tom,var(--ciano));
  color:var(--tom,var(--ciano));font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;will-change:opacity}

/* ---- 22 — TRANSIÇÃO POR ZOOM: a câmera atravessa a marca ----
   A oclusão (07) saiu daqui: a receita dela exige recorte PNG de um
   objeto real, e o `kp` é tipografia. O halo preto que fazia as vezes
   do recorte manchava a palavra. Aqui o movimento tem quatro atos com
   um respiro no meio, e o ganho é a passagem para dentro do sistema. ---- */
.mergulho .scrub__track{height:420vh}
.mergulho .scrub__stage{display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(80% 65% at 50% 46%,var(--grafite),var(--preto) 78%)}

/* ---- Cena A ---- */
.mg__a{grid-area:1/1;display:grid;grid-template-rows:auto auto;justify-items:center;
  align-content:center;gap:clamp(26px,6vh,60px);width:100%;
  transform-origin:50% 50%;will-change:transform,opacity}
.mg__palavra{
  grid-area:1/1;margin:0;display:flex;justify-content:center;
  font-size:clamp(58px,15vw,220px);letter-spacing:.02em;line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(242,241,236,.5);
}
/* Cada letra sobe de dentro da própria máscara. Sem isso o atraso entre
   elas não lê como revelação: lê como letra solta no meio do nada. */
.mg__palavra i{display:block;font-style:normal;overflow:hidden;
  padding:0 .04em .08em;margin:0 -.04em -.08em}
.mg__palavra i span{display:block;will-change:transform}
.mg__marca{
  grid-area:1/1;z-index:2;font-family:var(--titulo);font-weight:700;
  /* mesma base em vw da palavra: no celular a marca vinha maior que o SISTEMA */
  letter-spacing:-.07em;line-height:1;font-size:clamp(58px,15vw,215px);
  will-change:transform,opacity;
}
.mg__marca .k{color:var(--ciano);font-style:normal}
.mg__marca .p{color:var(--rosa);font-style:normal;margin-left:-.06em}
.mg__cap{
  grid-area:2/1;margin:0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,241,236,.55);text-align:center;
}

/* ---- Cena B: as seis frentes em anel, ligadas ao centro ---- */
.mg__b{
  --r:clamp(118px,21vw,272px);
  grid-area:1/1;position:relative;width:min(100%,720px);aspect-ratio:1;
  display:grid;place-items:center;opacity:0;will-change:transform,opacity;
}
/* O SVG tem o mesmo raio do anel, então os fios param sempre no mesmo
   lugar em relação aos rótulos, em qualquer largura de tela. */
.mg__fios{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2);height:calc(var(--r) * 2);
  transform:translate(-50%,-50%);overflow:visible}
.mg__fios line{
  stroke:rgba(37,244,238,.32);stroke-width:.6;fill:none;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--emerge,0));
}
.mg__nucleo{
  font-family:var(--titulo);font-weight:700;letter-spacing:-.07em;line-height:1;
  font-size:clamp(46px,7vw,88px);z-index:2;
}
.mg__nucleo .k{color:var(--ciano);font-style:normal}
.mg__nucleo .p{color:var(--rosa);font-style:normal;margin-left:-.06em}
.mg__anel{list-style:none;margin:0;padding:0;position:absolute;inset:0;width:auto}
.mg__anel li{
  position:absolute;left:50%;top:50%;width:12ch;text-align:center;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(calc(var(--r) * var(--rx,1)))
            rotate(calc(-1 * var(--a)));
  display:grid;gap:3px;justify-items:center;
}
/* Os quatro das diagonais são caixas largas: sem esse empurrão, a ponta
   do rótulo chega mais perto do centro que a dos de cima e de baixo. */
.mg__anel li:nth-child(2),.mg__anel li:nth-child(3),
.mg__anel li:nth-child(5),.mg__anel li:nth-child(6){--rx:1.14}
.mg__anel b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;font-weight:400;
  color:var(--acento,var(--ciano))}
.mg__anel span{font-family:var(--titulo);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(15px,1.5vw,21px);color:var(--off);line-height:1.15}
.mg__anel [data-cor=ciano]{--acento:var(--ciano)}
.mg__anel [data-cor=rosa]{--acento:var(--rosa)}
.mg__anel [data-cor=amarelo]{--acento:var(--amarelo)}
.mg__anel [data-cor=violeta]{--acento:var(--violeta)}
.mg__nota{
  position:absolute;left:50%;top:100%;margin:10px 0 0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,241,236,.4);
}

/* Sem espaço para o anel: as seis viram grade e os fios saem de cena. */
@media (max-width:680px){
  .mg__b{aspect-ratio:auto;width:100%;padding:0 var(--gut);gap:26px;place-items:stretch}
  .mg__fios{display:none}
  .mg__nucleo{justify-self:center}
  .mg__anel{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;
    width:100%;inset:auto}
  .mg__anel li{position:static;transform:none;width:auto}
  .mg__nota{position:static;transform:none;white-space:normal;text-align:center}
}

/* ---- 12 — EXPLOSÃO COM CHAMADAS: o sistema aberto em camadas ----
   Em HTML, não em SVG: no celular o SVG escalava os rótulos para 4px. ---- */
.explode .scrub__track{height:440vh}
.explode .scrub__stage{display:grid;grid-template-rows:auto 1fr auto;align-items:center;
  justify-items:center;gap:clamp(12px,2vh,28px);padding:6vh var(--gut) 5vh;overflow:hidden;
  background:radial-gradient(75% 60% at 50% 42%,#12191c,var(--preto) 74%)}
.explode__cabeca{text-align:center;pointer-events:none}
.explode__cabeca h2{font-size:clamp(24px,3.2vw,44px);color:var(--off);margin-top:12px}
.explode__cta{z-index:4}

.ex{display:grid;gap:clamp(8px,1.4vh,18px);width:min(1120px,94vw);align-content:center}
.ex__peca{display:grid;grid-template-columns:1fr minmax(240px,500px) 1fr;align-items:center;
  gap:clamp(12px,2vw,30px);opacity:0;will-change:transform,opacity}
.ex__laje{grid-column:2;display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  background:#181a1c;border:1px solid var(--linha);border-left:5px solid var(--c);
  padding:clamp(13px,1.6vh,19px) clamp(16px,2vw,24px)}
.ex__laje .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(242,241,236,.4)}
.ex__laje h3{font-size:clamp(16px,1.8vw,23px);color:var(--off);letter-spacing:-.01em}
.ex__chamada{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(242,241,236,.45);
  opacity:0;transition:opacity .3s ease}
.ex__chamada b{color:var(--c);font-weight:400;flex:0 0 auto}
.ex__chamada .fio{flex:1;height:1px;background:rgba(242,241,236,.2);min-width:24px}
.ex__chamada .pt{width:6px;height:6px;border-radius:50%;background:var(--c);flex:0 0 auto}
.ex__peca[data-lado="esq"] .ex__chamada{grid-column:1;justify-content:flex-end;text-align:right}
.ex__peca[data-lado="dir"] .ex__chamada{grid-column:3}

@media (max-width:900px){
  .ex__peca{grid-template-columns:1fr;gap:5px}
  .ex__laje{grid-column:1}
  /* especificidade tem que bater a de [data-lado], senão a chamada "dir"
     cria uma coluna fantasma e encolhe metade das lajes */
  .ex__peca[data-lado="esq"] .ex__chamada,
  .ex__peca[data-lado="dir"] .ex__chamada{grid-column:1;justify-content:flex-start;
    text-align:left;font-size:10px;padding-left:2px}
  .ex__chamada .fio{display:none}
  .explode .scrub__stage{padding:5vh var(--gut) 4vh}
}

/* ---- Contador gigante em segmentos ---- */
.contador .scrub__track{height:300vh}
.contador .scrub__stage{display:grid;place-content:center;text-align:center;
  padding:0 var(--gut);background:var(--preto)}
.contador .item{grid-area:1/1;opacity:0;will-change:opacity,transform}
.contador .n{font-family:var(--titulo);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(80px,18vw,240px);line-height:.86;letter-spacing:-.04em;margin:0;color:var(--off)}
.contador .n u{text-decoration:none}
.contador .item:nth-child(1) .n u{color:var(--ciano)}
.contador .item:nth-child(2) .n u{color:var(--rosa)}
.contador .item:nth-child(3) .n u{color:var(--amarelo)}
.contador .item:nth-child(4) .n u{color:var(--violeta)}
.contador .lede{margin:44px auto 0;max-width:36ch;font-family:var(--mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(242,241,236,.5)}
.contador .eixo{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);
  display:flex;gap:8px}
.contador .eixo i{width:34px;height:2px;background:var(--linha);transition:background .3s ease}
.contador .eixo i.on{background:var(--ciano)}

/* ---- Tipo em scrub: a citação sobe linha a linha com o scroll ---- */
.tipo .scrub__track{height:260vh}
.tipo .scrub__stage{display:grid;align-content:center;padding:0 var(--gut);background:var(--grafite)}
.tipo .linha{overflow:hidden;display:block}
.tipo .linha i{display:block;font-style:normal;transform:translateY(108%);will-change:transform;
  font-family:var(--titulo);font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(34px,6.4vw,88px);color:var(--off)}
.tipo .linha i em{font-style:normal;color:var(--rosa)}
.tipo .linha i b{font-weight:600;color:var(--ciano)}
.tipo .ass{margin-top:34px;opacity:0;will-change:opacity}

/* ---- Tilt 3D nos cards (desktop) ---- */
@media (pointer:fine){
  .cards{perspective:1100px}
  .card{transform-style:preserve-3d;transition:background .25s ease,transform .14s ease-out}
  .card h3,.card > p{transform:translateZ(26px)}
  .card ul{transform:translateZ(14px)}
}

/* ---- fallbacks ----
   Os efeitos scrub rodam também no celular (sticky não é scroll-jacking);
   só prefers-reduced-motion desliga. As versões .so-mobile existem para esse caso. */
.so-mobile{display:none}
@media (max-width:960px){
  .wipe{padding-bottom:12vh}
}
@media (prefers-reduced-motion:reduce){
  .scrub__track{height:auto !important}
  .scrub__stage{position:relative;height:auto;min-height:60vh;overflow:visible}
  .wipe{position:relative;clip-path:none !important;min-height:70vh;padding-block:12vh}
  .wipe h3 .l i{transform:none !important}
  .wipe p,.wipe__tag{opacity:1 !important;transform:none !important}
  .wipe .bg,.wipe__corte,.wipe__n{transform:none !important}
  /* contador e tipo têm versão estática própria (.so-mobile) */
  .contador .scrub__track,.tipo .scrub__track{display:none}
  .so-mobile{display:block !important}
  /* Parado, a seção vira dois quadros empilhados: a marca dentro da palavra
     e, embaixo, as seis frentes em grade. Nenhum transform sobrevive. */
  .mergulho .scrub__stage{min-height:0;display:block;padding:13vh var(--gut)}
  .mg__a,.mg__b{grid-area:auto;transform:none !important;opacity:1 !important;margin:0 auto}
  .mg__a{width:100%;max-width:none;margin-bottom:11vh}
  .mg__palavra i span{transform:none !important}
  .mg__marca{transform:none !important}
  .mg__b{width:100%;max-width:660px;aspect-ratio:auto;display:block;text-align:center}
  .mg__fios{display:none}
  .mg__nucleo{display:inline-block}
  .mg__anel{position:static;inset:auto;display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px 16px;margin-top:30px;width:100%}
  .mg__anel li{position:static;transform:none;width:auto}
  .mg__nota{position:static;transform:none;margin-top:26px;text-align:center;white-space:normal}
  .explode .scrub__track{height:auto}
  .explode .scrub__stage{position:relative;height:auto;min-height:0}
  .ex__peca,.ex__chamada{opacity:1 !important;transform:none !important}
  .card{transform:none !important}
}

/* ============================================================
   TRÊS EFEITOS DO ESTUDO v2
   18 Portal · 08 Pipeline de processo · 21 Revelação por cursor
   ============================================================ */

/* ---- 18. Portal: o círculo abre do escuro para o claro ---- */
.portal .scrub__track{height:260vh}
.portal .fora,.portal .dentro{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--gut)}
.portal .fora{background:var(--preto)}
.portal .fora h2{font-size:clamp(30px,5vw,64px);color:var(--off);max-width:16ch}
.portal .fora .label{display:block;margin-top:20px}
.portal .dentro{
  background:var(--off);color:var(--preto);will-change:clip-path,transform;
  clip-path:circle(0px at 50% 50%);
}
.portal .dentro h2{font-size:clamp(34px,5.6vw,74px);color:var(--preto);max-width:14ch}
.portal .dentro h2 em{font-style:normal;color:var(--rosa)}
.portal .dentro .btn{margin-top:34px}
.portal .anel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:50%;border:2px solid rgba(37,244,238,.6);
  will-change:transform,opacity;pointer-events:none;
}

/* ---- 08. Pipeline de processo (SVG que se desenha) ---- */
.pipe .scrub__track{height:360vh}
.pipe .scrub__stage{display:grid;place-items:center;
  background:radial-gradient(85% 70% at 50% 42%,#101b1a,var(--preto) 72%)}
.pipe svg{width:min(1080px,94vw);height:auto;overflow:visible}
.pipe .conn{fill:none;stroke:var(--ciano);stroke-width:2.2;stroke-linecap:round}
.pipe .node circle{fill:rgba(37,244,238,.05);stroke:rgba(37,244,238,.45);stroke-width:1.6}
.pipe .node .idx{font-family:var(--mono);font-size:10px;fill:var(--ciano);text-anchor:middle;letter-spacing:.1em}
.pipe .node .ttl{font-family:var(--titulo);font-size:20px;fill:var(--off);text-anchor:middle;font-weight:600}
.pipe .chip rect{fill:rgba(13,13,13,.9);stroke:rgba(37,244,238,.4);stroke-width:1;rx:2}
.pipe .chip text{font-family:var(--mono);font-size:10.5px;fill:#bfece9;text-anchor:middle;letter-spacing:.08em}
.pipe .cabeca{position:absolute;top:11vh;left:var(--gut);max-width:22ch;pointer-events:none}
.pipe .cabeca h2{font-size:clamp(26px,3.6vw,46px);color:var(--off)}
.pipe .cabeca p{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(242,241,236,.45)}
@media (max-width:820px){.pipe .cabeca{position:static;margin:12vh var(--gut) 4vh;max-width:none}
  .pipe .scrub__stage{align-content:center;display:grid}}

/* ---- 21. Revelação por cursor: o raio-X do sistema ---- */
.raiox{position:relative;min-height:100vh;overflow:hidden;background:var(--grafite)}
.raiox__capa,.raiox__oculto{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--gut)}
.raiox__capa h2{font-size:clamp(38px,7vw,96px);color:var(--off);line-height:.96;max-width:14ch}
.raiox__capa .label{display:block;margin-top:22px}
.raiox__oculto{
  background:
    radial-gradient(60% 50% at 50% 50%,rgba(37,244,238,.12),transparent 70%),
    #0a0f0f;
  -webkit-mask-image:radial-gradient(circle var(--r,180px) at var(--x,50%) var(--y,50%),#000 58%,transparent 100%);
          mask-image:radial-gradient(circle var(--r,180px) at var(--x,50%) var(--y,50%),#000 58%,transparent 100%);
}
.raiox__oculto svg{width:min(900px,90vw);height:auto;overflow:visible}
.raiox__oculto .fio{fill:none;stroke:rgba(37,244,238,.55);stroke-width:1.4;stroke-dasharray:5 7}
.raiox__oculto .no rect{fill:rgba(13,13,13,.85);stroke:rgba(37,244,238,.5);stroke-width:1}
.raiox__oculto .no text{font-family:var(--mono);font-size:12px;fill:var(--ciano);text-anchor:middle;letter-spacing:.12em}
.raiox__oculto .centro text{fill:var(--rosa)}
.raiox__oculto .centro rect{stroke:rgba(255,43,84,.6)}
.raiox__dica{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,241,236,.4);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .portal .scrub__track{height:auto}
  .portal .fora{display:none}
  .portal .dentro{position:relative;clip-path:none !important;min-height:70vh}
  .portal .anel{display:none}
  .pipe .scrub__track{height:auto}
  .pipe .node,.pipe .chip{opacity:1 !important}
  .pipe .conn{stroke-dashoffset:0 !important}
  .raiox__oculto{mask-image:none;-webkit-mask-image:none;position:relative;min-height:70vh}
  .raiox__capa{display:none}
  .raiox__dica{display:none}
}

/* ============================================================
   13 — GRADE EDITORIAL ASSIMÉTRICA  ·  "O que sai daqui"
   Três colunas em velocidades diferentes, título por cima em
   mix-blend-mode. É a seção de prova: as peças que a KP entrega.
   ============================================================ */
.obra .scrub__track{height:330vh}
.obra .scrub__stage{background:var(--off);display:grid;place-items:center;overflow:hidden}
.obra__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);
  width:min(1180px,90vw);align-items:start}
.obra__col{display:grid;gap:clamp(12px,1.6vw,24px);will-change:transform}
.obra__peca{position:relative;overflow:hidden;background:var(--grafite);margin:0}
.obra__peca figcaption{
  position:absolute;left:12px;bottom:10px;z-index:3;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(242,241,236,.8);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.obra__peca i{position:absolute;inset:0;display:block}

/* peças — arte em CSS, dentro da paleta */
.t-reel{aspect-ratio:9/16}
.t-reel i{background:linear-gradient(170deg,#17201f,#0b0d0d 70%)}
.t-reel i::after{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:22%;aspect-ratio:1;background:var(--ciano);clip-path:polygon(12% 0,100% 50%,12% 100%)}
.t-reel i::before{content:"";position:absolute;left:10%;right:10%;bottom:14%;height:2px;
  background:linear-gradient(90deg,var(--ciano) 38%,rgba(242,241,236,.18) 38%)}

.t-carrossel{aspect-ratio:4/5}
.t-carrossel i{background:var(--grafite-2)}
.t-carrossel i::before{content:"";position:absolute;left:12%;top:16%;width:62%;height:60%;
  background:var(--rosa);box-shadow:14px 14px 0 rgba(242,241,236,.14),28px 28px 0 rgba(242,241,236,.07)}

.t-lp{aspect-ratio:16/11}
.t-lp i{background:var(--preto)}
.t-lp i::before{content:"";position:absolute;left:8%;right:8%;top:14%;height:8%;background:rgba(242,241,236,.16)}
.t-lp i::after{content:"";position:absolute;left:8%;top:30%;width:44%;height:34%;background:var(--ciano)}

.t-news{aspect-ratio:4/5}
.t-news i{background:repeating-linear-gradient(180deg,rgba(242,241,236,.13) 0 2px,transparent 2px 12px),
  var(--grafite-2);background-position:0 34%}
.t-news i::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:var(--violeta)}

.t-post{aspect-ratio:1}
.t-post i{background:var(--grafite)}
.t-post i::before{content:"";position:absolute;inset:0;background:var(--ciano);
  clip-path:polygon(100% 26%,100% 100%,0 100%)}
.t-post i::after{content:"";position:absolute;right:0;top:0;width:26%;aspect-ratio:1;background:var(--amarelo)}

.t-anuncio{aspect-ratio:4/5}
.t-anuncio i{background:linear-gradient(200deg,#241017,#0c0a0b 66%)}
.t-anuncio i::before{content:"";position:absolute;left:14%;bottom:18%;width:56%;height:9%;background:var(--rosa)}
.t-anuncio i::after{content:"";position:absolute;left:14%;top:18%;width:34%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(255,43,84,.55)}

.t-relatorio{aspect-ratio:16/11}
.t-relatorio i{background:var(--preto)}
.t-relatorio i::before{content:"";position:absolute;left:10%;right:10%;bottom:22%;height:1px;background:var(--linha)}
.t-relatorio i::after{content:"";position:absolute;left:12%;bottom:22%;width:64%;height:44%;
  background:
    linear-gradient(var(--ciano),var(--ciano)) 0 100%/12% 46% no-repeat,
    linear-gradient(var(--rosa),var(--rosa)) 25% 100%/12% 78% no-repeat,
    linear-gradient(var(--amarelo),var(--amarelo)) 50% 100%/12% 34% no-repeat,
    linear-gradient(var(--violeta),var(--violeta)) 75% 100%/12% 96% no-repeat}

.t-copy{aspect-ratio:1}
.t-copy i{background:var(--grafite-2)}
.t-copy i::before{content:"";position:absolute;left:14%;right:14%;top:26%;height:48%;
  background:repeating-linear-gradient(180deg,rgba(242,241,236,.22) 0 2px,transparent 2px 11px)}
.t-copy i::after{content:"";position:absolute;left:14%;top:16%;width:26%;height:4px;background:var(--ciano)}

.t-dash{aspect-ratio:16/11}
.t-dash i{background:linear-gradient(160deg,#0f1a1a,#090b0b 70%)}
.t-dash i::before{content:"";position:absolute;inset:22% 10% 24%;
  background:linear-gradient(var(--ciano),var(--ciano)) no-repeat;
  clip-path:polygon(0 78%,16% 54%,32% 66%,50% 28%,68% 44%,84% 14%,100% 26%,100% 100%,0 100%);opacity:.5}
.t-dash i::after{content:"";position:absolute;left:10%;right:10%;bottom:24%;height:1px;background:rgba(37,244,238,.3)}

.obra__titulo{
  position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;mix-blend-mode:difference;color:#fff;pointer-events:none;width:100%;
}
.obra__titulo h2{font-size:clamp(40px,8.4vw,124px);letter-spacing:-.04em;line-height:.9;color:#fff}
.obra__titulo p{margin:18px auto 0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;opacity:.75}
@media (max-width:820px){
  .obra__cols{grid-template-columns:repeat(2,1fr);width:94vw}
  .obra__col:nth-child(3){display:none}
}

/* ============================================================
   RESPIRO — a seção silenciosa entre dois efeitos altos
   ============================================================ */
.respiro{padding:clamp(90px,14vh,150px) 0;border-top:1px solid var(--linha)}
.respiro__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,6vw,80px);align-items:end}
.respiro q{
  font-family:var(--titulo);font-weight:600;font-size:clamp(28px,4.4vw,60px);color:var(--off);
  letter-spacing:-.025em;line-height:1.04;quotes:none;display:block;max-width:18ch;
}
.respiro q em{font-style:normal;color:var(--rosa)}
.respiro q b{font-weight:600;color:var(--ciano)}
.respiro figcaption{margin-top:28px}
.respiro__stack h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,241,236,.4);margin:0 0 14px;font-weight:400}
.respiro__stack ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.respiro__stack li{font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:11px 0;
  border-bottom:1px solid var(--linha);color:rgba(201,200,194,.72);
  display:flex;justify-content:space-between;gap:14px}
.respiro__stack li span{color:rgba(242,241,236,.35)}
@media (max-width:820px){.respiro__grid{grid-template-columns:1fr;gap:44px}}

@media (prefers-reduced-motion:reduce){
  .obra .scrub__track{height:auto}
  .obra .scrub__stage{position:relative;height:auto;min-height:0;padding:14vh 0}
  .obra__col{transform:none !important}
  .obra__titulo{position:static;transform:none;margin-bottom:34px;mix-blend-mode:normal}
}

/* ============================================================
   ESCOPO — fita horizontal travada (efeito 04)
   As seis frentes passam de lado enquanto a página fica presa.
   Parada, a seção continua legível: são seis cards em linha,
   roláveis pelo dedo, com um índice de teclado acima.
   ============================================================ */
.horiz--escopo .horiz__topo{align-items:flex-start}
.horiz--escopo .horiz__topo em{font-style:normal;color:var(--ciano)}
.horiz--escopo .horiz__topo h2{margin-top:14px;font-size:clamp(26px,3vw,42px);max-width:14ch}
/* a fita começa alinhada com o título, não na borda da tela */
.horiz--escopo .horiz__fita{padding-inline:calc(max(0px,(100% - var(--max))/2) + var(--gut))}
.horiz--escopo .horiz__barra{max-width:calc(var(--max) - var(--gut) * 2)}

.horiz__indice{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linha);
  border-left:1px solid var(--linha);flex:0 0 auto}
.horiz__indice button{
  background:var(--preto);border:0;border-top:2px solid transparent;cursor:pointer;
  color:rgba(201,200,194,.55);padding:11px 14px;text-align:left;display:flex;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.horiz__indice button i{font-style:normal;color:rgba(242,241,236,.28)}
.horiz__indice button:hover{background:var(--grafite);color:var(--off)}
.horiz__indice button:focus-visible{outline:2px solid var(--ciano);outline-offset:-2px}
.horiz__indice button[aria-current="true"]{background:var(--grafite);color:var(--off);
  border-top-color:var(--acento,var(--ciano))}
.horiz__indice button[aria-current="true"] i{color:var(--acento,var(--ciano))}

.horiz__card[data-cor=ciano]{--acento:var(--ciano)}
.horiz__card[data-cor=rosa]{--acento:var(--rosa)}
.horiz__card[data-cor=amarelo]{--acento:var(--amarelo)}
.horiz__card[data-cor=violeta]{--acento:var(--violeta)}
.horiz__card[data-cor]::before{background:var(--acento)}

.frente{flex:0 0 min(540px,84vw);min-height:0;overflow:hidden;padding:32px 30px 30px;gap:18px}
.frente header{display:block}
.frente h3{font-size:clamp(24px,2.6vw,34px);color:var(--off);margin:8px 0 10px;line-height:1.05}
.frente header p{font-size:15px;color:rgba(201,200,194,.72);margin:0;max-width:44ch}
.frente__lista{list-style:none;margin:0;padding:0}
.frente__lista li{
  display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--linha);
  font-size:14.5px;color:rgba(201,200,194,.88);
}
.frente__lista li:last-child{border-bottom:0}
.frente__lista li i{font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--acento,var(--ciano));flex:0 0 auto}
.frente__recebe{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--linha);
  font-size:14.5px;color:rgba(201,200,194,.92);position:relative;z-index:1;
}
.frente__recebe b{color:var(--acento,var(--ciano));font-weight:400;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:6px}
.frente__fantasma{
  position:absolute;right:-6px;bottom:-8%;z-index:0;pointer-events:none;
  font-family:var(--titulo);font-weight:700;font-size:clamp(120px,13vw,200px);line-height:.8;
  color:rgba(242,241,236,.04);letter-spacing:-.05em;
}
@media (max-width:960px){
  .horiz__indice{grid-template-columns:1fr 1fr;width:100%;border-left:0;margin-top:22px}
  .horiz--escopo .horiz__topo{flex-direction:column;align-items:stretch}
  .frente{flex-basis:min(420px,84vw)}
}
@media (max-width:560px){
  .horiz__indice{grid-template-columns:1fr}
  .frente__fantasma{display:none}
}

/* ============================================================
   ENTREGÁVEIS — grade estática
   A página só carrega uma fita horizontal (a do escopo);
   aqui a leitura é de relance, tudo visível de uma vez.
   ============================================================ */
.entregas{padding:110px 0 100px}
.entregas__topo{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  margin-bottom:38px;flex-wrap:wrap}
.entregas__topo h2{font-size:clamp(28px,3.6vw,48px);color:var(--off);margin-top:14px}
.entregas__topo > p{max-width:36ch;font-size:15px;color:rgba(201,200,194,.6);margin:0}
.entregas__grade{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--linha)}
.entrega{
  grid-column:span 2;background:var(--grafite);padding:30px 26px;position:relative;
  display:flex;flex-direction:column;gap:11px;
}
.entrega:nth-child(4),.entrega:nth-child(5){grid-column:span 3}
.entrega::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acento,var(--ciano))}
.entrega[data-cor=ciano]{--acento:var(--ciano)}
.entrega[data-cor=rosa]{--acento:var(--rosa)}
.entrega[data-cor=amarelo]{--acento:var(--amarelo)}
.entrega[data-cor=violeta]{--acento:var(--violeta)}
.entrega h3{font-size:22px;color:var(--off);margin-top:4px}
.entrega p{font-size:15px;color:rgba(201,200,194,.7);margin:0}
.entrega b{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,241,236,.4);font-weight:400}
@media (max-width:860px){
  .entregas__grade{grid-template-columns:1fr}
  .entrega,.entrega:nth-child(4),.entrega:nth-child(5){grid-column:auto}
}

/* ============================================================
   LINHA DO TEMPO — substitui os números soltos
   Cada marco responde "quando eu vejo o quê".
   ============================================================ */
.linha .scrub__track{height:300vh}
.linha .scrub__stage{display:grid;align-content:center;gap:clamp(30px,5vh,58px);
  padding:0 var(--gut);background:var(--preto)}
.linha__topo{max-width:var(--max);margin:0 auto;width:100%}
.linha__itens{display:grid;max-width:var(--max);margin:0 auto;width:100%}
.linha__item{grid-area:1/1;opacity:0;transform:translateY(20px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.linha__item.on{opacity:1;transform:none}
.linha__dia{display:flex;align-items:baseline;gap:16px}
.linha__dia b{font-family:var(--titulo);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(70px,13vw,170px);line-height:.82;letter-spacing:-.04em;color:var(--off)}
.linha__dia span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,241,236,.45)}
.linha__item:nth-child(1) b{color:var(--ciano)}
.linha__item:nth-child(2) b{color:var(--rosa)}
.linha__item:nth-child(3) b{color:var(--amarelo)}
.linha__item h3{font-size:clamp(24px,3.4vw,46px);color:var(--off);margin:18px 0 12px;max-width:20ch}
.linha__item p{font-size:16.5px;color:rgba(201,200,194,.7);max-width:52ch}
.linha__eixo{position:relative;max-width:var(--max);margin:0 auto;width:100%;padding-top:26px}
.linha__trilho{position:relative;height:2px;background:var(--linha)}
.linha__trilho i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ciano),var(--rosa),var(--amarelo));
  width:100%;transform:scaleX(var(--p,0));transform-origin:left}
.linha__marcos{display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,241,236,.3)}
.linha__marcos span.on{color:var(--off)}

/* ============================================================
   CICLO MENSAL — os painéis do método ganham as etapas
   ============================================================ */
.pilha .step__in{align-items:start}
.ciclo__etapas{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ciclo__etapas li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(201,200,194,.75);border:1px solid var(--linha);padding:8px 12px;
  display:flex;gap:8px;align-items:center;
}
.ciclo__etapas li b{color:var(--ciano);font-weight:400}
.pilha .step:nth-child(2) .ciclo__etapas li b{color:var(--rosa)}
.pilha .step:nth-child(3) .ciclo__etapas li b{color:var(--amarelo)}
.pilha .step:nth-child(4) .ciclo__etapas li b{color:var(--violeta)}

/* legenda que troca junto com o nó ativo do pipeline */
.pipe__legenda{position:absolute;left:var(--gut);right:var(--gut);bottom:12vh;
  max-width:52ch;display:grid}
.pipe__legenda p{grid-area:1/1;font-size:16px;color:rgba(201,200,194,.75);
  opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pipe__legenda p.on{opacity:1;transform:none}
.pipe__legenda b{color:var(--off);font-weight:400}
@media (max-width:820px){.pipe__legenda{position:static;margin:6vh var(--gut) 10vh}}

@media (prefers-reduced-motion:reduce){
  .linha .scrub__track{height:auto}
  .linha .scrub__stage{position:relative;height:auto;min-height:0;padding-block:12vh}
  .linha__item{position:static;opacity:1;transform:none;margin-bottom:52px}
  .linha__itens{display:block}
  .pipe__legenda p{opacity:1;position:static}
  .pipe__legenda{display:block}
}

/* ============================================================
   03 — MONTAGEM POR CAMADAS  ·  "A jornada"
   Mecanismo da receita: um único rect dentro de um clipPath sobe
   e revela as quatro faixas; o contorno se desenha por dashoffset.
   Curso: 420vh (contorno + 4 camadas + fecho ≈ 5,5 batidas de ~78vh).
   ============================================================ */
.jornada .scrub__track{height:420vh}
.jornada .scrub__stage{display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(78% 62% at 42% 44%,#141a18,var(--preto) 74%)}
.jornada__in{display:grid;grid-template-columns:minmax(240px,380px) 1fr;
  gap:clamp(28px,5vw,80px);align-items:center;width:min(1080px,92vw)}
.jornada svg{width:100%;height:auto;max-height:64vh;overflow:visible}
.j-vaso{fill:none;stroke:rgba(242,241,236,.5);stroke-width:2.4;stroke-linejoin:round}
.j-faixa--1{fill:var(--ciano)}
.j-faixa--2{fill:var(--rosa)}
.j-faixa--3{fill:var(--amarelo)}
.j-faixa--4{fill:var(--violeta)}
.j-corte{fill:none;stroke:rgba(13,13,13,.55);stroke-width:2}
.j-rot{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  fill:rgba(242,241,236,.32)}

.jornada__lado h2{font-size:clamp(28px,3.8vw,52px);color:var(--off);margin:14px 0 6px}
.jornada__lista{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--linha)}
.jornada__lista li{
  padding:15px 0;border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  opacity:.3;transition:opacity .4s var(--ease),color .4s var(--ease);
}
.jornada__lista li.on{opacity:1}
.jornada__lista b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:400;
  color:rgba(242,241,236,.4)}
.jornada__lista li.on b{color:var(--tomj)}
.jornada__lista strong{font-family:var(--titulo);font-weight:600;font-size:clamp(17px,1.9vw,24px);
  color:var(--off);letter-spacing:-.01em}
.jornada__lista span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(201,200,194,.5);text-align:right}
.jornada__lista li:nth-child(1){--tomj:var(--ciano)}
.jornada__lista li:nth-child(2){--tomj:var(--rosa)}
.jornada__lista li:nth-child(3){--tomj:var(--amarelo)}
.jornada__lista li:nth-child(4){--tomj:var(--violeta)}
.jornada__lista p{grid-column:1/-1;margin-top:6px;font-size:14.5px;color:rgba(201,200,194,.6);
  max-width:46ch}
.jornada__fecho{margin-top:28px;opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.jornada__fecho.on{opacity:1;transform:none}
.jornada__fecho q{quotes:none;font-family:var(--titulo);font-weight:600;
  font-size:clamp(19px,2.2vw,28px);color:var(--off);letter-spacing:-.015em}

@media (max-width:860px){
  .jornada__in{grid-template-columns:1fr;gap:24px}
  .jornada svg{max-height:34vh;justify-self:center;width:min(260px,64vw)}
  .jornada__lista li{grid-template-columns:auto 1fr;padding:12px 0}
  .jornada__lista span{grid-column:1/-1;text-align:left;margin-top:4px}
}

/* a seção precisa se sustentar parada */
@media (prefers-reduced-motion:reduce){
  .jornada .scrub__track{height:auto}
  .jornada .scrub__stage{position:relative;height:auto;min-height:0;padding:12vh 0}
  .jornada__lista li,.jornada__fecho{opacity:1 !important;transform:none !important}
  .j-vaso{stroke-dashoffset:0 !important}
  .j-nivel{y:20 !important}
}

/* ---- saída do hero: o topo entrega a página em vez de sumir seco ---- */
.hero__saida{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  .hero__saida{transform:none !important;opacity:1 !important}
}

/* ============================================================
   CELULAR — o que muda quando a tela é um polegar
   Três coisas: curso mais curto (a home tinha 25,6 telas e 82%
   disso era curso de animação), alvo de toque de 44px e piso de
   11px no texto. Os efeitos continuam rodando; só cabem em menos
   rolagem, porque no celular cada tela é um movimento de dedo.
   ============================================================ */
@media (max-width:700px){
  /* Cursos a ~70% do desktop. Continua acima do piso de ~55vh por
     batida, que é o que a composição de uma coluna pede. */
  .wipes .scrub__track{height:255vh}      /* 3 painéis × 85vh */
  .mergulho .scrub__track{height:300vh}
  .explode .scrub__track{height:320vh}
  .obra .scrub__track{height:240vh}
  .linha .scrub__track{height:225vh}
  .portal .scrub__track{height:190vh}
  .jornada .scrub__track{height:300vh}
  .pipe .scrub__track{height:260vh}

  /* A grade de peças: o título em mix-blend-mode atravessava os cards
     e ficava ilegível. Aqui ele sobe para cima da grade, em tinta
     escura, porque sem o blend o branco sumiria no fundo claro. */
  .obra .scrub__stage{grid-template-rows:auto 1fr;align-content:center;
    justify-items:center;gap:20px;padding:7vh 0}
  /* No HTML o título vem depois da grade (ele era sobreposto); parado,
     precisa de grid-row explícito para não cair embaixo dos cards. */
  .obra__titulo{position:static;transform:none !important;mix-blend-mode:normal;
    grid-row:1;margin:0;padding-inline:var(--gut)}
  .obra__cols{grid-row:2}
  .obra__titulo h2,.obra__titulo p{color:var(--preto)}
  .obra__titulo p{color:rgba(13,13,13,.55);margin-top:10px}

  /* Piso de leitura: nada de rótulo abaixo de 11px na mão de alguém. */
  .obra__peca figcaption{font-size:11px;left:10px;bottom:9px;letter-spacing:.12em}
  .ex__peca[data-lado="esq"] .ex__chamada,
  .ex__peca[data-lado="dir"] .ex__chamada{font-size:11px}
  .frente__recebe b,.raiox__dica,.mg__anel b,.mg__nota,.mg__cap,
  .jornada__lista span,.pipe .cabeca p,.pipe .chip text{font-size:11px}

  /* Alvo de toque: 44px é o mínimo confortável para o polegar. */
  .nav__links a{padding:19px 0}
  .logo{padding:7px 6px}
  .ft a{padding:12px 0}
  .info__row{padding:15px 0}
  .info__row a{display:inline-block;padding:10px 0}
  .horiz__indice button{padding:15px 14px}
}

/* ============================ SELETOR DE IDIOMA ============================ */
.lang{position:relative;display:inline-flex}
.lang__btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--linha);
  color:inherit;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 10px;cursor:pointer;transition:border-color .25s,color .25s}
.lang__btn i{font-style:normal;font-size:9px;opacity:.7;transition:transform .25s}
.lang__btn:hover{border-color:var(--ciano);color:var(--ciano)}
.lang.open .lang__btn{border-color:var(--ciano);color:var(--ciano)}
.lang.open .lang__btn i{transform:rotate(180deg)}
.lang__lista{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:168px;margin:0;padding:6px 0;
  list-style:none;background:#111;border:1px solid var(--linha);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s}
.lang.open .lang__lista{opacity:1;visibility:visible;transform:none}
.nav__links .lang__lista a{display:block;padding:9px 16px;font-size:13px;letter-spacing:.02em;
  text-transform:none;border-bottom:0;white-space:nowrap}
.nav__links .lang__lista a::after{display:none}
.nav__links .lang__lista a:hover{background:rgba(255,255,255,.06);color:var(--ciano)}
.nav__links .lang__lista a[aria-current="true"]{color:var(--ciano)}
@media (max-width:860px){
  .lang{width:100%;margin-top:14px;justify-content:center}
  .lang__btn{width:100%;justify-content:center;padding:12px}
  .lang__lista{position:static;min-width:0;width:100%;border-top:0;
    display:none;opacity:1;visibility:visible;transform:none}
  .lang.open .lang__lista{display:block}
  .nav__links .lang__lista a{text-align:center;padding:12px}
}