/* ==========================================================================
   InsightsLabs — Design System v1.0 (tema escuro)
   Base: DESIGN.md · Setembro 2026
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Paleta da marca */
  --petroleo:#004B57;
  --teal:#008B8B;
  --lima:#A4D43C;
  --lima-hover:#B8E356;
  --lima-ativo:#8FBC2E;
  --sage:#82AB70;

  /* Neutros do tema escuro */
  --bg:#041E22;
  --surface:#082A2F;
  --borda:#12454B;
  --borda-ativa:#17565C;
  --borda-forte:#2C7A80;
  --txt:#EAF2F1;
  --txt-2:#B6CBC9;
  --txt-3:#7E9A99;
  --acento:#6FC2B4;

  /* Tintas escuras para uso sobre cor */
  --tinta-lima:#17280A;
  --tinta-teal:#06222A;

  /* Estados */
  --erro-borda:#D96B5A;
  --erro-txt:#EFA79A;
  --disabled-bg:#14383C;

  /* Hairlines derivadas */
  --hair:rgba(18,69,75,.62);
  --hair-soft:rgba(18,69,75,.36);

  /* Tipografia */
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* Espacamento (escala de 4) */
  --s-1:4px;  --s-2:8px;  --s-3:16px; --s-4:24px;
  --s-5:40px; --s-6:64px; --s-7:120px;

  /* Layout */
  --wrap:1180px;
  --gutter:28px;
  --header-h:72px;

  /* Movimento */
  --ease:cubic-bezier(.22,.68,.16,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur:.35s;

  /* Camadas */
  --z-grid:0;
  --z-base:1;
  --z-band:2;
  --z-header:20;
  --z-scrollbar:24;
  --z-overlay:40;
  --z-boot:60;

  /* Estado dinamico (JS) */
  --band-x:60%;
  --band-w:1px;
  --scroll-p:0;
}

@media (max-width:768px){ :root{ --gutter:16px; --header-h:64px; } }

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{ min-width:320px; -webkit-text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:clip; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--lima);color:var(--tinta-lima)}

/* Foco: anel teal de 2px com offset de 2px */
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:2px; }

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- 3. Primitivas tipograficas ------------------------------------------ */
.display{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.95rem,6.4vw,5.5rem);
  line-height:1.04;
  letter-spacing:-.032em;
}
.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.85rem,4.3vw,3.3rem);
  line-height:1.08;
  letter-spacing:-.024em;
}
.h3{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.12rem,1.6vw,1.5rem);
  line-height:1.25;
}
.lead{
  font-size:clamp(1rem,1.35vw,1.125rem);
  line-height:1.6;
  color:var(--txt-2);
  max-width:60ch;
}
.body-2{font-size:15px;line-height:1.6;color:var(--txt-2)}
.label{
  font-family:var(--f-mono);
  font-weight:500;
  font-size:12px;
  line-height:1.1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--txt-3);
}
.label--acento{color:var(--acento)}
.metric-num{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.1rem,3.6vw,2.875rem);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.tint-lima{color:var(--lima)}
.tint-acento{color:var(--acento)}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  position:relative;
  z-index:var(--z-base);
  padding-block:clamp(64px,8.5vw,100px);
}
/* o conteudo e a referencia de posicao das camadas internas */
.section > .wrap,
.journey__stage > .wrap{position:relative}
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(40px,6vw,64px);
}

/* --- 5. Camadas de fundo (profundidade) ---------------------------------- */
.stage-bg{
  position:fixed;
  inset:0;
  z-index:var(--z-grid);
  pointer-events:none;
  overflow:clip;
}
/* Camada 1 — colunas hairline (mais distante) */
.stage-bg__grid{
  position:absolute;
  inset:-12% 0;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  opacity:.55;
  will-change:transform;
  transform:translate3d(0,var(--par-y,0px),0);
}
.stage-bg__grid span{border-left:1px solid var(--hair-soft)}
.stage-bg__grid span:last-child{border-right:1px solid var(--hair-soft)}
@media (max-width:768px){ .stage-bg__grid{grid-template-columns:repeat(2,1fr);opacity:.35} }

/* Camada 2 — campo luminoso: um unico plano com tres focos.
   Uma camada so evita costura de rasterizacao entre gradientes. */
.stage-bg__field{
  position:absolute;
  inset:-25% -10%;
  will-change:transform;
  transform:translate3d(0,var(--par-y,0px),0);
  background-color:transparent;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(38% 30% at 8% 14%, rgba(0,139,139,.30), rgba(0,139,139,.10) 46%, rgba(0,139,139,0) 74%),
    radial-gradient(34% 26% at 96% 54%, rgba(164,212,60,.10), rgba(164,212,60,.035) 46%, rgba(164,212,60,0) 76%),
    radial-gradient(46% 34% at 34% 92%, rgba(0,75,87,.46), rgba(0,75,87,.16) 48%, rgba(0,75,87,0) 78%);
}

/* Camada 3 — grao fino, unifica as camadas */
.stage-bg__grain{
  position:absolute;inset:0;
  opacity:.06;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* Vinheta — sela as bordas */
.stage-bg__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,30,34,.88) 0%,rgba(4,30,34,0) 24%,rgba(4,30,34,0) 76%,rgba(4,30,34,.9) 100%);
}

/* Numeral fantasma por secao — profundidade dentro da secao */
.ghost-num{
  position:absolute;
  top:0;
  right:var(--gutter);
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(8rem,22vw,19rem);
  line-height:.72;
  letter-spacing:-.06em;
  color:rgba(111,194,180,.05);
  pointer-events:none;
  user-select:none;
  z-index:-1;
  /* 2D de proposito: uma camada composta aqui deixa um retangulo
     visivel por cima do gradiente de fundo */
  transform:translateY(var(--par-y,0px));
}

/* --- 6. Header ----------------------------------------------------------- */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:var(--z-header);
  height:var(--header-h);
  display:flex;
  align-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header[data-stuck="true"]{
  background:rgba(4,30,34,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
}
.header__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  width:100%;
}
/* Assinatura */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.02em;
  color:var(--txt);
  white-space:nowrap;
}
.brand__mark{
  width:34px;height:34px;
  flex:0 0 34px;
}
.brand__mark img{width:100%;height:100%}
.brand__labs{color:var(--acento)}

.header__meta{ display:none; gap:10px; align-items:center; }
@media (min-width:1000px){ .header__meta{display:inline-flex} }
.header__meta .dot{
  width:5px;height:5px;border-radius:50%;background:var(--lima);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.menu-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--txt);
  padding:8px 2px;
  position:relative;
}
.menu-btn__words{position:relative;display:inline-block;height:1.2em;overflow:hidden;min-width:5.2em;text-align:left}
.menu-btn__words span{
  display:block;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.menu-btn__words span:last-child{position:absolute;inset:0;opacity:0;transform:translateY(100%)}
body[data-menu="open"] .menu-btn__words span:first-child{opacity:0;transform:translateY(-100%)}
body[data-menu="open"] .menu-btn__words span:last-child{opacity:1;transform:translateY(0)}
.menu-btn__glyph{ width:16px;height:16px;position:relative;display:block;color:var(--lima); }
.menu-btn__glyph::before,.menu-btn__glyph::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease);
}
.menu-btn__glyph::before{transform:translate(-50%,-4px)}
.menu-btn__glyph::after{transform:translate(-50%,3px)}
body[data-menu="open"] .menu-btn__glyph::before{transform:translate(-50%,-50%) rotate(45deg)}
body[data-menu="open"] .menu-btn__glyph::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Com o menu aberto o header sobe junto: a marca e o botao Fechar
   precisam ficar acima do overlay, sem a barra de fundo. */
body[data-menu="open"] .header{
  z-index:calc(var(--z-overlay) + 1);
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
body[data-menu="open"] .header__meta,
body[data-menu="open"] .header__progress{
  opacity:0;
  transition:opacity .25s var(--ease);
}

/* Barra de progresso do scroll */
.header__progress{
  position:absolute;
  left:0;bottom:-1px;
  height:1px;
  width:100%;
  transform-origin:0 50%;
  transform:scaleX(var(--scroll-p));
  background:var(--lima);
  opacity:.9;
}

/* --- 7. Botoes ----------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 24px;
  border-radius:4px;
  font-family:var(--f-body);
  font-weight:500;
  font-size:15px;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .4s var(--ease);
  will-change:transform;
}
.btn--primary{background:var(--lima);color:var(--tinta-lima)}
.btn--primary:hover{background:var(--lima-hover)}
.btn--primary:active{background:var(--lima-ativo)}
.btn--secondary{border:1px solid var(--borda-forte);color:var(--txt)}
.btn--secondary:hover{border-color:var(--lima);color:var(--lima)}
.btn[disabled]{background:var(--disabled-bg);color:var(--txt-3);cursor:not-allowed}

/* CTA em colchetes */
.bracket{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1rem,1.4vw,1.2rem);
  color:var(--txt);
  line-height:1.1;
  transition:color .3s var(--ease);
}
.bracket i{
  font-style:normal;
  color:var(--lima);
  transition:transform .45s var(--ease);
  display:inline-block;
}
.bracket:hover{color:var(--lima)}
.bracket:hover i:first-child{transform:translateX(-5px)}
.bracket:hover i:last-child{transform:translateX(5px)}
.bracket__text{display:flex;flex-direction:column;line-height:1.05;text-align:left}

/* --- 8. Hero + banda de revelacao ---------------------------------------- */
.reveal{
  position:relative;
  display:grid;
  isolation:isolate;
  --exit:0;
}
/* O hero recua e apaga conforme a proxima camada sobe: da o degrau de
   profundidade entre a primeira e a segunda dobra. */
.reveal .hero{
  transform:translate3d(0,calc(var(--exit) * -5vh),0) scale(calc(1 - var(--exit) * .045));
  transform-origin:50% 26%;
  opacity:calc(1 - var(--exit) * .92);
  will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){
  .reveal .hero{transform:none;opacity:1}
}
.reveal__layer{grid-area:1/1;min-width:0}
.reveal__layer--base{z-index:var(--z-base)}
.reveal__layer--band{
  z-index:var(--z-band);
  overflow:hidden;
  background:var(--teal);
  color:var(--tinta-teal);
  pointer-events:none;
  clip-path:inset(0 calc(100% - var(--band-x) - var(--band-w) / 2) 0 calc(var(--band-x) - var(--band-w) / 2));
  transition:clip-path var(--dur) var(--ease-out);
  display:none;
}
.reveal[data-band="on"] .reveal__layer--band{display:block}
.reveal[data-band-active="true"]{--band-w:min(120px,15vw)}
.reveal__layer--band .label,
.reveal__layer--band .lead,
.reveal__layer--band .hero__status,
.reveal__layer--band .hero__scroll,
.reveal__layer--band .brand__labs,
.reveal__layer--band .bracket i{color:var(--tinta-teal)}
.reveal__layer--band .hero__rule,
.reveal__layer--band .hero__foot{border-color:rgba(6,34,42,.3)}
.reveal__layer--band .hero__rule{background:rgba(6,34,42,.35)}
.reveal__layer--band .hero__scroll b{background:rgba(6,34,42,.4)}
.reveal__layer--band .hero__scroll b::after{background:var(--tinta-teal)}

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--header-h) + clamp(20px,5vh,56px));
  padding-bottom:clamp(20px,3vh,32px);
}
.hero__in{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(18px,3vh,36px);
}
.hero__eyebrow{ display:flex;align-items:center;gap:14px; }
.hero__rule{height:1px;flex:1;max-width:120px;background:var(--hair)}
.hero__sub{max-width:46ch}
.hero__foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  padding-top:clamp(18px,2.6vh,28px);
  border-top:1px solid var(--hair);
}
.hero__status{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--txt-3);
}
.hero__scroll{
  display:none;
  align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);
}
@media (min-width:720px){ .hero__scroll{display:inline-flex} }
.hero__scroll b{
  display:block;width:1px;height:26px;background:var(--borda-forte);
  position:relative;overflow:hidden;
}
.hero__scroll b::after{
  content:"";position:absolute;inset:0;background:var(--lima);
  animation:trace 2.2s var(--ease) infinite;
}
@keyframes trace{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* --- 9. Revelacao de texto (linhas) -------------------------------------- */
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line__in{display:block;will-change:transform}
.js [data-anim] .line__in{transform:translate3d(0,110%,0)}
.js [data-anim="in"] .line__in{
  transform:translate3d(0,0,0);
  transition:transform 1.05s var(--ease);
}
.js [data-anim="in"] .line:nth-child(1) .line__in{transition-delay:.02s}
.js [data-anim="in"] .line:nth-child(2) .line__in{transition-delay:.10s}
.js [data-anim="in"] .line:nth-child(3) .line__in{transition-delay:.18s}
.js [data-anim="in"] .line:nth-child(4) .line__in{transition-delay:.26s}
.js [data-anim="in"] .line:nth-child(5) .line__in{transition-delay:.34s}

/* Fade + rise generico */
.js [data-rise]{opacity:0;transform:translate3d(0,calc(26px + var(--par-y,0px)),0)}
.js [data-rise="in"]{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
/* Hairline que se desenha */
.js [data-draw]{transform:scaleX(0);transform-origin:0 50%}
.js [data-draw="in"]{transform:scaleX(1);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}

/* --- 10. Metricas -------------------------------------------------------- */
.metrics{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:760px){ .metrics{grid-template-columns:repeat(3,1fr)} }
.metric{
  border-left:1px solid var(--borda-forte);
  padding:var(--s-2) 0 var(--s-2) var(--s-4);
}
.metric__label{margin-top:10px;max-width:30ch;font-size:15px;line-height:1.55;color:var(--txt-2)}

/* --- 11. Lista eixo (servicos) ------------------------------------------- */
.axis{position:relative}
.axis__list{border-top:1px solid var(--hair);position:relative}
.axis__item{position:relative;border-bottom:1px solid var(--hair)}
.axis__link{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:var(--s-2) var(--s-4);
  padding:clamp(22px,3vw,32px) 0;
  position:relative;
  z-index:2;
  transition:padding-left .5s var(--ease);
}
@media (max-width:899px){
  .axis__link{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:10px;
  }
  .axis__title{text-align:left}
}
@media (min-width:900px){
  .axis__link{grid-template-columns:40px minmax(0,1fr) minmax(0,1.2fr) 168px}
  .axis__item:hover .axis__link{padding-left:20px}
}
.axis__idx{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  color:var(--txt-3);transition:color .35s var(--ease);
}
.axis__title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.3rem,2.5vw,2rem);
  line-height:1.15;letter-spacing:-.02em;
  transition:color .35s var(--ease);
}
.axis__desc{
  font-size:15px;line-height:1.55;color:var(--txt-2);max-width:46ch;
  grid-column:1 / -1;
}
@media (min-width:900px){ .axis__desc{grid-column:auto} .axis__tag{justify-self:end} }
.axis__tag{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);
  border:1px solid var(--borda);border-radius:999px;
  padding:6px 12px;white-space:nowrap;justify-self:start;text-align:center;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
@media (min-width:900px){ .axis__tag{justify-self:end} }
.axis__item:hover .axis__idx{color:var(--lima)}
.axis__item:hover .axis__tag{border-color:var(--borda-forte);color:var(--acento)}
/* Fundo deslizante — camada sob o texto */
.axis__wash{
  position:absolute;
  top:0;bottom:0;left:calc(var(--gutter) * -.6);right:calc(var(--gutter) * -.6);
  background:linear-gradient(90deg,rgba(0,139,139,.18),rgba(0,139,139,.03) 68%,rgba(0,139,139,0));
  opacity:0;
  transform:translate3d(-22px,0,0);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
  z-index:1;
}
.axis__item:hover .axis__wash{opacity:1;transform:none}
/* Marcador tipo lava-lamp */
.axis__marker{
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:var(--lima);
  opacity:0;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
  pointer-events:none;
  z-index:3;
}
.axis__list[data-hot="true"] .axis__marker{opacity:1}

/* Painel processo/dado */
.duo{
  display:grid;gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  margin-top:clamp(40px,6vw,64px);
}
@media (min-width:820px){ .duo{grid-template-columns:1fr 1fr} }
.duo__cell{
  background:var(--surface);
  padding:clamp(28px,4vw,40px);
  transition:background .5s var(--ease);
}
.duo__cell:hover{background:#0A343A}
.duo__k{display:block;margin-bottom:14px}
.duo__t{margin-bottom:10px}

/* --- 12. Jornada (sticky, camadas) --------------------------------------- */
.journey{position:relative}
.journey__track{height:340vh}
.journey__stage{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:clip;
  padding-block:clamp(64px,10vh,96px);
}
@media (max-width:820px){
  .journey__track{height:auto}
  .journey__stage{position:static;min-height:0;padding-block:64px}
}
.journey__head{margin-bottom:clamp(28px,5vh,56px)}
.journey__rail{
  position:relative;
  --rail-pad:clamp(32px,6vh,64px);
  --dot:11px;
  padding-block:var(--rail-pad);
}
.journey__wire{
  position:absolute;
  left:0;right:0;
  top:calc(var(--rail-pad) + var(--dot) / 2);
  height:1px;
  background:var(--borda);
}
.journey__wire::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--teal),var(--lima));
  transform:scaleX(var(--jp,0));
  transform-origin:0 50%;
}
.journey__nodes{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s-3);
}
@media (max-width:820px){
  .journey__wire{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .journey__wire::after{transform:scaleY(var(--jp,0));transform-origin:50% 0}
  .journey__nodes{grid-template-columns:1fr;gap:30px;padding-left:34px}
}
.node{position:relative}
.node__dot{
  display:block;
  flex:0 0 auto;
  width:11px;height:11px;border-radius:50%;
  border:1px solid var(--borda-forte);
  background:var(--bg);
  position:relative;
  margin-bottom:18px;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
@media (max-width:820px){ .node__dot{position:absolute;left:-34px;top:5px;margin:0} }
.node__dot::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid var(--lima);
  opacity:0;transform:scale(.5);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.node__k{display:block;margin-bottom:8px;transition:color .45s var(--ease)}
.node__t{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.95rem,1.3vw,1.1rem);
  line-height:1.3;letter-spacing:-.01em;
  color:var(--txt-3);
  transition:color .45s var(--ease);
  max-width:24ch;
}
.node[data-on="true"] .node__dot{background:var(--lima);border-color:var(--lima);transform:scale(1.1)}
.node[data-on="true"] .node__dot::after{opacity:.5;transform:scale(1)}
.node[data-on="true"] .node__k{color:var(--acento)}
.node[data-on="true"] .node__t{color:var(--txt)}

.journey__caption{
  margin-top:clamp(24px,4vh,40px);
  display:flex;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;align-items:baseline;
}
@media (max-width:820px){
  .journey__caption{flex-direction:column;gap:var(--s-3)}
}

/* --- 13. Prova ----------------------------------------------------------- */
.proof{ display:grid;gap:1px;background:var(--hair); border:1px solid var(--hair); }
@media (min-width:820px){ .proof{grid-template-columns:repeat(3,1fr)} }
.proof__cell{
  background:var(--surface);
  padding:clamp(28px,4vw,40px);
  display:flex;flex-direction:column;gap:12px;
  transition:background .5s var(--ease);
}
.proof__cell:hover{background:#0A343A}

/* --- 14. Contato --------------------------------------------------------- */
.contact{ display:grid;gap:clamp(40px,6vw,64px); }
@media (min-width:900px){ .contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} }
.field{display:block;margin-bottom:var(--s-4)}
.field__label{display:block;margin-bottom:8px}
.field__input{
  width:100%;
  background:var(--surface);
  border:1px solid var(--borda-ativa);
  border-radius:4px;
  padding:14px 16px;
  font-size:16px;
  line-height:1.4;
  font-family:var(--f-body);
  color:var(--txt);
  transition:border-color .2s var(--ease);
}
.field__input::placeholder{color:var(--txt-3)}
.field__input:focus,.field__input:focus-visible{border-color:var(--lima);outline:none}
textarea.field__input{min-height:132px;resize:vertical}
.field[data-invalid="true"] .field__input{border-color:var(--erro-borda)}
.field__error{ display:none;margin-top:8px;font-size:13px;color:var(--erro-txt); }
.field[data-invalid="true"] .field__error{display:block}
.form__aviso{
  margin-bottom:var(--s-4);
  padding:12px 16px;
  border:1px solid var(--erro-borda);
  border-radius:4px;
  background:var(--surface);
  color:var(--erro-txt);
  font-size:14px;
  line-height:1.5;
}
.form__foot{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.form__note{font-size:13px;color:var(--txt-3);max-width:32ch;overflow-wrap:normal}
.form__ok{
  display:none;border:1px solid var(--borda-forte);border-radius:4px;
  padding:var(--s-4);background:var(--surface);
}
form[data-sent="true"] .form__ok{display:block}
form[data-sent="true"] .form__body{display:none}

.direct{border-top:1px solid var(--hair);padding-top:var(--s-3);margin-top:var(--s-5)}
.direct__row{
  display:flex;justify-content:space-between;gap:var(--s-3);
  padding-block:14px;border-bottom:1px solid var(--hair-soft);
  align-items:baseline;flex-wrap:wrap;
}
@media (max-width:560px){
  .direct__row{flex-direction:column;gap:6px;align-items:flex-start}
}
.direct__val{
  font-family:var(--f-display);font-weight:500;font-size:clamp(1rem,1.55vw,1.2rem);
  letter-spacing:-.01em;transition:color .3s var(--ease);
  overflow-wrap:anywhere;
}
a.direct__val:hover{color:var(--lima)}

/* --- 15. Footer ---------------------------------------------------------- */
.footer{
  position:relative;
  z-index:var(--z-base);
  background:var(--surface);
  border-top:1px solid var(--borda);
  padding:48px 0 24px;
}
.footer__grid{ display:grid;gap:var(--s-5) var(--s-4); grid-template-columns:1fr; }
@media (min-width:720px){ .footer__grid{grid-template-columns:1.5fr 1fr 1fr} }
.footer__nav li{margin-bottom:10px}
.footer__nav a{color:var(--txt-2);transition:color .25s var(--ease)}
.footer__nav a:hover{color:var(--lima)}
.footer__bar{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--borda);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
}

/* --- 16. Overlay de menu ------------------------------------------------- */
.overlay{
  position:fixed;inset:0;
  z-index:var(--z-overlay);
  background:var(--bg);
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .78s var(--ease);
  pointer-events:none;
}
body[data-menu="open"] .overlay{clip-path:inset(0 0 0 0);pointer-events:auto}
.overlay__in{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--header-h);
  overflow-y:auto;
}
.overlay__nav li{ border-bottom:1px solid var(--hair); overflow:hidden; }
.overlay__nav a{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-block:clamp(12px,2.2vh,22px);
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,5.2vw,3.2rem);
  line-height:1.05;letter-spacing:-.028em;
  color:var(--txt);
  transform:translate3d(0,110%,0);
  transition:transform .8s var(--ease),color .3s var(--ease);
}
.overlay__nav a:hover{color:var(--lima)}
.overlay__nav a span{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;
  color:var(--txt-3);flex:0 0 auto;
}
body[data-menu="open"] .overlay__nav a{transform:none;transition-delay:calc(.16s + var(--i,0) * .07s)}
.overlay__foot{
  padding-block:var(--s-4);
  border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
}

/* --- 17. Boot (abertura) ------------------------------------------------- */
.boot{
  display:none;
  position:fixed;inset:0;
  z-index:var(--z-boot);
  background:var(--bg);
  align-items:flex-end;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease);
}
body[data-boot="running"] .boot,
body[data-boot="done"] .boot{display:flex}
.boot__in{
  width:100%;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s-4);
  padding-bottom:clamp(28px,6vh,56px);
  transition:opacity .35s var(--ease);
}
.boot__bar{ position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair); }
.boot__bar i{
  display:block;height:100%;background:var(--lima);
  transform:scaleX(var(--bp,0));transform-origin:0 50%;
  transition:transform .25s linear;
}
.boot__num{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(3rem,11vw,6.5rem);line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
body[data-boot="done"] .boot{clip-path:inset(0 0 100% 0);pointer-events:none}
body[data-boot="done"] .boot__in{opacity:0}
body[data-boot="running"]{overflow:hidden}

/* --- 18. Barra de rolagem personalizada ---------------------------------- */
.railbar{
  position:fixed;top:0;right:0;bottom:0;
  width:10px;z-index:var(--z-scrollbar);
  pointer-events:none;
  display:none;
}
@media (min-width:1024px){ .railbar{display:block} }
.railbar i{
  position:absolute;right:3px;top:0;
  width:2px;border-radius:2px;
  background:rgba(111,194,180,.5);
  height:var(--th,60px);
  transform:translateY(var(--ty,0px));
}

/* --- 19. Utilidades ------------------------------------------------------ */
.stack-24 > * + *{margin-top:var(--s-4)}
.stack-16 > * + *{margin-top:var(--s-3)}
.stack-40 > * + *{margin-top:var(--s-5)}
.split{display:grid;gap:clamp(28px,5vw,64px)}
@media (min-width:760px){
  .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* --- 20. Movimento reduzido ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-anim] .line__in{transform:none !important}
  .js [data-rise]{opacity:1 !important;transform:none !important}
  .js [data-draw]{transform:none !important}
  .journey__track{height:auto}
  .journey__stage{position:static;min-height:0}
  .boot{display:none}
}