/* ============================================================================
   TaskFlow — sistema de design v2
   ----------------------------------------------------------------------------
   Paleta: PRETO + BRANCO + TEAL. Só isso.
   O teal #62b6aa sai do ARQUIVO da logo oficial; --signal é o mesmo teal levado
   ao brilho, usado exclusivamente no que está ACONTECENDO naquele instante
   (pacote em trânsito, nó recém-aceso, passo recém-concluído).
   Uma versão intermediária expandiu isto para um espectro teal→violeta. Foi
   revertido por direção do cliente: a estética pedida é preto, branco e teal com
   iluminação sutil e muito espaço negativo. O violeta sobrevive apenas como
   --accent-2, reservado a um único uso (o estado "processando" do núcleo), onde
   precisa se distinguir do teal sem virar segunda cor de marca.

   Tema único escuro, assumido: toda cor é pintada explicitamente, nada herda do
   navegador.
   ========================================================================== */

/* @property permite animar o ângulo do gradiente — sem isso o navegador
   interpola o gradiente inteiro como imagem e o resultado engasga. */
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --ground: #06060c;
  --ground-2: #090a12;
  --surface: #0d0f1a;
  --elevated: #141826;
  --glass: rgba(20, 24, 38, .55);

  --ink: #eef0f6;
  --ink-2: #98a0b5;
  --ink-3: #5c6479;
  --ink-4: #363d4f;

  /* Marca e espectro */
  --teal: #62b6aa;
  --signal: #7cecd4;          /* o mesmo teal, no brilho — só para o "agora" */
  /* Uso único: o estado "processando". Não é cor de marca e não deve se espalhar. */
  --accent-2: #8f86c9;

  --hair: rgba(255, 255, 255, .06);
  --hair-2: rgba(255, 255, 255, .12);

  --display: "Bricolage Grotesque", "Poppins", ui-sans-serif, system-ui, sans-serif;
  --body: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --t-mega: clamp(3rem, 11vw, 9.5rem);
  --t-hero: clamp(2.7rem, 7.6vw, 6.4rem);
  --t-h2: clamp(2rem, 5.2vw, 4rem);
  --t-h3: clamp(1.1rem, 1.9vw, 1.35rem);
  --t-lead: clamp(1rem, 1.35vw, 1.15rem);
  --t-sm: .875rem;
  --t-xs: .75rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(5.5rem, 14vh, 11rem);
  --max: 1280px;

  --e: cubic-bezier(.22, .61, .36, 1);
  --e-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
svg, img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--signal); color: #04100e; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: .8rem 1.2rem; background: var(--signal); color: #04100e; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Granulação global: quebra banding do gradiente e dá textura de filme. Um SVG
   inline em data URI — sem requisição extra. */
.grain {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: granula 8s steps(6) infinite;
}
@keyframes granula {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%, 2%) }
  40% { transform: translate(2%, -3%) }
  60% { transform: translate(-2%, -2%) }
  80% { transform: translate(3%, 1%) }
}

/* ─── Cursor ──────────────────────────────────────────────────────────────── */
/* Só aparece em ponteiro fino. Em toque, o cursor nativo não existe e desenhar um
   seria um elemento fantasma perseguindo o dedo. */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid var(--hair-2);
    border-radius: 50%;
    z-index: 250; pointer-events: none;
    transition: width .35s var(--e-out), height .35s var(--e-out),
                margin .35s var(--e-out), border-color .35s, background .35s;
    will-change: transform;
  }
  .cursor[data-ativo="true"] {
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
  }
  .cursor-dot {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 4px; height: 4px; margin: -2px 0 0 -2px;
    background: var(--signal); border-radius: 50%;
    z-index: 251; pointer-events: none; will-change: transform;
  }
  a, button, .magnet { cursor: none; }
}

/* ─── Barra de progresso do scroll ────────────────────────────────────────── */
.progresso {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--teal), var(--signal));
  transform-origin: left; transform: scaleX(0);
}
/* CSS scroll-driven quando o navegador suporta — sem JS, roda no compositor. */
@supports (animation-timeline: scroll()) {
  .progresso {
    animation: preencher linear;
    animation-timeline: scroll(root block);
  }
  @keyframes preencher { to { transform: scaleX(1); } }
}

/* ─── Navegação ───────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 2px 0 auto; z-index: 150;
  height: 4.75rem; display: flex; align-items: center;
  transition: background .5s var(--e), backdrop-filter .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav[data-scrolled="true"] {
  background: rgba(6, 6, 12, .7);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: var(--hair);
}
/* Três colunas com a marca no eixo central da página: links à esquerda,
   assinatura no meio, CTA à direita. A coluna do meio é `auto` e as laterais
   são `1fr` iguais, então a marca fica centrada na viewport de verdade — e não
   no espaço que sobrou entre os dois blocos, que é o erro comum aqui. */
.nav__inner {
  position: relative;
  display: flex; align-items: center; gap: 1.5rem; width: 100%;
}
/* A marca sai do fluxo e é fixada no meio exato da página. Em grid, qualquer
   assimetria entre os lados (aqui, o CTA só à direita) desloca a coluna do
   meio — e o "centralizado" fica visivelmente torto. */
.nav__inner > .brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  min-width: max-content;
}
.nav__inner > .nav__links--dir { margin-left: auto; }
/* `.nav__links .nav__link--mob` e não só a classe: `.btn` tem a mesma
   especificidade e aparece depois no arquivo, então venceria com
   `display: inline-flex` e o CTA duplicado do celular vazaria no desktop. */
.nav__links .nav__link--mob { display: none; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark { width: 1.4rem; height: 1.45rem; flex: none; }
/* A assinatura tem tipografia própria: a Unbounded tem construção geométrica
   com letras de desenho marcante, o que a faz ler como LOGOTIPO e não como
   texto de interface — e o corte reto conversa com o ângulo da seta da marca.
   Vem com peso ótico alto, então pede corpo menor e entrelinha própria para
   não pesar mais que o menu ao lado. */
.brand__name {
  font-family: "Unbounded", var(--display), sans-serif;
  font-weight: 700; font-size: .95rem; letter-spacing: -.03em; line-height: 1;
}

.nav__links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.nav__link { font-size: var(--t-sm); color: var(--ink-2); position: relative; padding: .35rem 0; transition: color .3s; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--signal));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--e-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__toggle { display: none; width: 2.75rem; height: 2.75rem; background: none; border: 0; padding: 0; color: var(--ink); }
.nav__toggle span { display: block; width: 1.35rem; height: 1.5px; margin: 0 auto; background: currentColor; transition: transform .4s var(--e), opacity .25s; }
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Botões ──────────────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.6rem; font-family: var(--body); font-size: var(--t-sm); font-weight: 500;
  border: 1px solid transparent; border-radius: 100px; overflow: hidden; isolation: isolate;
  transition: color .35s, border-color .35s, transform .2s var(--e-out);
}
.btn--primary { color: #04100e; font-weight: 600; }
/* Fundo em gradiente animado. O ângulo é animável por causa do @property acima. */
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--ang), var(--signal), var(--teal) 45%, var(--signal));
  animation: gira 6s linear infinite;
}
@keyframes gira { to { --ang: 360deg; } }
.btn--primary:hover { transform: translateY(-2px); }

.btn--ghost { border-color: var(--hair-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }

.btn__arrow { transition: transform .4s var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ─── Hero ────────────────────────────────────────────────────────────────── */
/* ── Palco: a jornada sozinha, dobra inteira ──────────────────────────────
   Primeira coisa que a página mostra. Sem texto competindo — quem chega vê o
   sistema operando antes de ler o que ele é. */
.palco {
  position: relative; height: 100svh; min-height: 34rem;
  isolation: isolate; overflow: hidden;
}
/* `.palco .palco__visual` e não `.palco__visual`: a regra genérica
   `.nucleo-wrap { position: relative }` aparece depois no arquivo e, com a
   mesma especificidade, venceria — deixando o canvas sem altura definida. */
.palco .palco__visual { position: absolute; inset: 0; pointer-events: none; }
.palco__visual .nucleo { height: 100%; }
.palco__visual .anim-optin { pointer-events: auto; }

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

.palco__cue {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3);
  text-decoration: none; transition: color .4s var(--e);
}
.palco__cue:hover, .palco__cue:focus-visible { color: var(--signal); }
.palco__seta {
  width: 1px; height: 2.4rem;
  background: linear-gradient(180deg, transparent, currentColor);
}
@media (prefers-reduced-motion: no-preference) {
  .palco__seta { animation: descer 2.4s var(--e) infinite; transform-origin: top; }
}
@keyframes descer {
  0%, 100% { transform: scaleY(.45); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 8rem 0 5rem; isolation: isolate; }
/* O shader mora no palco agora; aqui fica só um rastro estático de atmosfera
   para a seção não cair num preto chapado logo depois da abertura. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 55% at 78% 45%,
              color-mix(in srgb, var(--teal) 9%, transparent), transparent 72%);
}
#signal {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  opacity: 0; transition: opacity 2s var(--e);
  /* Reserva estática: se WebGL e canvas 2D falharem, ainda existe atmosfera. */
  background:
    radial-gradient(70% 60% at 78% 50%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%),
    radial-gradient(50% 50% at 92% 68%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 70%);
}
#signal[data-ready="true"] { opacity: 1; }

.hero__eyebrow { margin-bottom: 1.6rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--signal));
}

.hero__title { font-size: var(--t-hero); max-width: 15ch; margin-bottom: 1.8rem; }
/* Cada palavra é revelada por trás de uma máscara. O <span> interno é o que se
   move; o externo corta. */
.palavra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.palavra > span {
  display: inline-block;
  transform: translateY(105%);
  animation: sobe .95s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 75ms + 250ms);
}
@keyframes sobe { to { transform: translateY(0); } }

/* Gradiente contínuo atravessando palavras separadas.
   A chave é background-attachment: fixed — o gradiente passa a ser posicionado
   em relação à JANELA, não a cada elemento. Assim cada palavra amostra o trecho
   do gradiente que corresponde à sua posição na tela, e o conjunto lê como um
   gradiente só.
   A tentativa anterior (gradiente no H1 com background-clip:text) falhou porque
   os .palavra têm overflow:hidden para a máscara de revelação: eles criam
   contexto de pintura próprio, o fundo do pai não os atravessa, e o texto
   transparente simplesmente sumia. */
.grad {
  background-image: linear-gradient(104deg, var(--signal) 8%, var(--teal) 38%, var(--signal) 72%);
  background-attachment: fixed;
  background-size: 100vw 100vh;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Sem suporte a background-clip:text o texto ficaria invisível. Aqui ele volta
   a ser sólido em vez de sumir. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { -webkit-text-fill-color: var(--signal); color: var(--signal); background: none; }
}

.hero__lead { font-size: var(--t-lead); color: var(--ink-2); max-width: 46ch; margin-bottom: 2.5rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__base {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.75rem;
  margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--hair);
}
.hero__k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: .2rem; }
.hero__v { font-size: var(--t-sm); font-weight: 500; }

/* ─── Marquee ─────────────────────────────────────────────────────────────── */
.faixa {
  border-block: 1px solid var(--hair);
  padding-block: 1.1rem; overflow: hidden;
  /* Máscara nas pontas: o texto entra e sai em fade, sem corte seco. */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.faixa__trilho { display: flex; gap: 3.5rem; width: max-content; animation: desliza 42s linear infinite; user-select: none; }
/* Sem JS, hover ainda pausa — é o único jeito de controlar a rolagem nesse
   caso. Com JS, o clique/arraste em .faixa__arraste assume esse papel: hover
   sozinho travava a faixa sempre que o mouse só passava perto, sem o usuário
   pedir. */
html:not(.js) .faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes desliza { to { transform: translateX(-50%); } }
.faixa__arraste { cursor: grab; touch-action: pan-y; }
.faixa__arraste:active { cursor: grabbing; }
.faixa__arraste[data-pausado="true"] .faixa__trilho { animation-play-state: paused; }
.faixa__item {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: var(--t-sm); letter-spacing: .06em;
  color: var(--ink-3); white-space: nowrap;
}
.faixa__item::before { content: ""; width: .32rem; height: .32rem; background: var(--teal); transform: rotate(45deg); }

/* ─── Seções ──────────────────────────────────────────────────────────────── */
.sec { padding-block: var(--sec); position: relative; }
.sec__head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); max-width: 60ch; }
.sec__title { font-size: var(--t-h2); margin: 1.2rem 0 1.2rem; }
.lead { font-size: var(--t-lead); color: var(--ink-2); max-width: 58ch; }

/* ─── Problema: números gigantes ──────────────────────────────────────────── */
.dores { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
@media (min-width: 800px) { .dores { grid-template-columns: repeat(2, 1fr); } }
.dor {
  background: var(--ground); padding: 2.25rem clamp(1.25rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start;
  position: relative; overflow: hidden;
  transition: background .5s var(--e);
}
.dor::after {
  /* Luz que segue o cursor dentro do card — variáveis alimentadas pelo JS. */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--teal) 13%, transparent), transparent 70%);
  transition: opacity .45s;
}
.dor:hover { background: var(--ground-2); }
.dor:hover::after { opacity: 1; }
.dor__n {
  font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--teal);
  transition: -webkit-text-stroke-color .5s;
}
.dor:hover .dor__n { -webkit-text-stroke-color: var(--signal); }
.dor__t { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.02em; margin-bottom: .5rem; }
.dor__d { font-size: var(--t-sm); color: var(--ink-2); }

.impacto { margin-top: clamp(3rem, 8vh, 5rem); }
.impacto p {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 4.4vw, 3.1rem); line-height: 1.12; letter-spacing: -.03em;
  max-width: 24ch;
}
.impacto p + p { margin-top: 1.5rem; color: var(--ink-3); }

/* ─── Como funciona: passos ───────────────────────────────────────────────── */
.passos { display: grid; gap: clamp(1.5rem, 3vw, 2rem); counter-reset: passo; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passo {
  position: relative; padding: 2rem 1.75rem 2.25rem;
  background: linear-gradient(180deg, var(--surface), var(--ground-2));
  border: 1px solid var(--hair); border-radius: 4px;
  overflow: hidden;
  transition: border-color .5s, transform .5s var(--e-out);
}
.passo:hover { border-color: var(--hair-2); transform: translateY(-4px); }
.passo::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--signal));
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--e-out);
}
.passo[data-vis="true"]::before { transform: scaleX(1); }
.passo__n {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  color: var(--teal); margin-bottom: 1.75rem; display: block;
}
.passo__t { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.025em; margin-bottom: .65rem; }
.passo__d { font-size: var(--t-sm); color: var(--ink-2); }

/* ─── Split / demo ────────────────────────────────────────────────────────── */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }

.capacidades { display: grid; gap: 1px; background: var(--hair); }
.cap {
  background: var(--ground); padding: 1.15rem 0 1.15rem 1.5rem; position: relative;
  font-size: var(--t-sm); color: var(--ink-2);
  transition: color .35s, padding-left .4s var(--e-out);
}
.cap::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; width: .34rem; height: .34rem;
  background: linear-gradient(135deg, var(--teal), var(--signal));
  transform: rotate(45deg); transition: transform .4s var(--e-out), box-shadow .4s;
}
.cap:hover { color: var(--ink); padding-left: 1.85rem; }
.cap:hover::before { transform: rotate(45deg) scale(1.4); box-shadow: 0 0 14px var(--teal); }
.cap strong { color: var(--ink); font-weight: 600; }

.demo {
  background: var(--glass); backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--hair-2); border-radius: 6px; overflow: hidden;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.demo__bar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--hair); }
.demo__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-4); }
.demo__dot--live { background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulsa 2.4s var(--e) infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.demo__t { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; color: var(--ink-3); margin-left: .4rem; }
.demo__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; min-height: 19rem; }

.bolha { max-width: 84%; padding: .7rem .95rem; border-radius: 4px; font-size: .8125rem; line-height: 1.5; opacity: 1; }
.js .bolha { opacity: 0; transform: translateY(8px); }
.bolha[data-vis="true"] { animation: entra .55s var(--e-out) forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }
.bolha--cli { align-self: flex-start; background: var(--elevated); }
.bolha--ia { align-self: flex-end; background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); }
.bolha--act {
  align-self: flex-end; background: none; max-width: 100%;
  border: 1px dashed color-mix(in srgb, var(--teal) 35%, transparent);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; color: var(--signal);
}

/* ─── Canais ──────────────────────────────────────────────────────────────── */
.canais { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; }
@media (min-width: 720px) { .canais { grid-template-columns: repeat(4, 1fr); } }
.canal { background: var(--ground); padding: 1.75rem 1.4rem; transition: background .45s; }
.canal:hover { background: var(--surface); }
.canal__n { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: .35rem; }
.canal__s { font-size: .8125rem; color: var(--ink-3); }
.canal--soon .canal__n { color: var(--ink-3); }

/* ─── Módulos ─────────────────────────────────────────────────────────────── */
.mods { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; }
@media (min-width: 880px) { .mods { grid-template-columns: repeat(2, 1fr); } }
.mod { background: var(--surface); padding: clamp(1.75rem, 3vw, 2.4rem); position: relative; overflow: hidden; transition: background .5s; }
.mod::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%);
  transition: opacity .5s;
}
.mod:hover { background: var(--elevated); }
.mod:hover::after { opacity: 1; }
.mod__k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 1.1rem; }
.mod__t { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.025em; margin-bottom: .6rem; }
.mod__d { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 1.2rem; }
.mod__li { font-size: .8125rem; color: var(--ink-3); padding-left: 1.2rem; position: relative; margin-bottom: .45rem; }
.mod__li::before { content: ""; position: absolute; left: 0; top: .62rem; width: .4rem; height: 1px; background: var(--teal); }

/* ─── Placeholders honestos ───────────────────────────────────────────────── */
.vazio { border: 1px dashed var(--hair-2); border-radius: 4px; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--ground-2); }
.vazio__k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }
.vazio p { font-size: var(--t-sm); color: var(--ink-2); max-width: 62ch; }
.vazio p + p { margin-top: .65rem; }

/* ─── Fecho ───────────────────────────────────────────────────────────────── */
.fecho { position: relative; padding-block: clamp(6.5rem, 18vh, 12rem); text-align: center; overflow: hidden; border-top: 1px solid var(--hair); }
.fecho::before {
  content: ""; position: absolute; left: 50%; top: -30%; transform: translateX(-50%);
  width: min(65rem, 130vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--teal) 16%, transparent) 0%,
    color-mix(in srgb, var(--teal) 9%, transparent) 38%, transparent 66%);
}
.fecho__t { font-size: var(--t-h2); max-width: 20ch; margin: 1.3rem auto; }
.fecho .lead { margin-inline: auto; }
.fecho__ctas { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.5rem; }

/* ─── Rodapé ──────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hair); background: #04040a; padding-block: 3.5rem 2rem; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot__k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; }
.foot__li { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: .6rem; }
.foot__li a:hover { color: var(--signal); }
.foot__bot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; font-size: var(--t-xs); color: var(--ink-3); }

/* ─── Revelação ───────────────────────────────────────────────────────────── */
/* Só sob .js: sem JavaScript o conteúdo nasce visível, em vez de a página ficar
   em branco por depender de script que pode falhar. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--e-out), transform .9s var(--e-out); }
.js [data-reveal][data-vis="true"] { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .09s; }
[data-delay="2"] { transition-delay: .18s; }
[data-delay="3"] { transition-delay: .27s; }

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .nav__links {
    position: fixed; inset: 4.75rem 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(6,6,12,.97); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hair);
    transform: translateY(-120%); transition: transform .5s var(--e-out);
  }
  .nav__links[data-open="true"] { transform: none; }
  .nav__links .nav__link { padding: 1.05rem 0; border-bottom: 1px solid var(--hair); font-size: 1.05rem; }
  .nav__toggle { display: block; }
  /* No estreito não há espaço para três colunas: volta a marca à esquerda e o
     botão do menu à direita, com o CTA escondido (ele está dentro do menu). */
  .nav__inner { gap: .6rem; justify-content: space-between; }
  .nav__inner > .brand { position: static; transform: none; order: -1; }
  .nav__inner > .nav__links--dir, .nav__inner > .nav__cta { display: none; }
  .nav__links .nav__link--mob { display: block; }
  .nav__links--esq .btn.nav__link--mob { display: inline-flex; }
  .nav__links .btn { margin-top: 1.25rem; justify-content: center; }
  .hero { min-height: auto; padding: 9rem 0 5rem; }
  .hero__title { max-width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .dor { grid-template-columns: 1fr; gap: .75rem; }
  .dor__n { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .palavra > span { transform: none; }
  .grain { display: none; }
}

@media print {
  #signal, .grain, .cursor, .cursor-dot, .progresso, .nav { display: none; }
  body { background: #fff; color: #000; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ASSINATURA VISUAL — "Fluxo de Inteligência"
   Uma linha fina percorre a página inteira ligando as seções, e um pulso de luz
   a preenche conforme a leitura avança. É o que faz o site parecer um sistema
   único em vez de blocos empilhados — e ecoa a seta da logo.
   ══════════════════════════════════════════════════════════════════════════ */
.espinha {
  position: absolute;
  left: max(calc(var(--gutter) / 2), calc((100vw - var(--max)) / 2 + var(--gutter) / 2));
  top: 0; bottom: 0; width: 1px;
  background: var(--hair);
  pointer-events: none;
  overflow: hidden;
}
.espinha::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--teal), var(--signal));
  transform-origin: top; transform: scaleY(0);
}
/* Preenche conforme a seção passa pela tela — CSS scroll-driven, sem JS. */
@supports (animation-timeline: view()) {
  .espinha::after {
    animation: enche linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 60%;
  }
  @keyframes enche { to { transform: scaleY(1); } }
}
/* Sem scroll-driven: a linha entra estática quando a seção é revelada. */
@supports not (animation-timeline: view()) {
  [data-vis="true"] > .espinha::after { transform: scaleY(1); transition: transform 1.4s var(--e-out); }
}
@media (max-width: 880px) { .espinha { left: calc(var(--gutter) / 2); } }

/* ── Nó marcador: onde a espinha encontra uma seção ─────────────────────────*/
.no-marca {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  width: .45rem; height: .45rem; margin-left: -.22rem;
  background: var(--ground); border: 1px solid var(--teal);
  transform: rotate(45deg); pointer-events: none;
}
@media (max-width: 880px) { .no-marca { left: calc(var(--gutter) / 2); } }

/* ════════════════════════════════════════════════════════════════════════════
   AI OPERATING SYSTEM — a demonstração viva
   ══════════════════════════════════════════════════════════════════════════ */
.aios {
  position: relative;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--ground-2));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
}
.aios::before {
  content: "";
  position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: .5;
}

.aios__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hair);
}
.aios__marca {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.aios__live { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: var(--t-xs); color: var(--signal); letter-spacing: .1em; }
.aios__live::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 10px var(--signal);
  animation: pulsa 2s var(--e) infinite;
}

/* Três colunas com conectores entre elas. No mobile vira coluna única e os
   conectores giram — mesma marcação, sem recálculo. */
.aios__grid {
  display: grid; gap: .9rem;
  grid-template-columns: 1fr;
  /* center, não stretch: as três colunas têm alturas naturais diferentes
     (mensagem curta x painel do núcleo x lista de efeitos). Esticando, o
     conector nascia desalinhado do conteúdo que ele deveria ligar. */
  align-items: center;
}
@media (min-width: 940px) {
  .aios__grid { grid-template-columns: minmax(0,1fr) 2.5rem minmax(0,1.05fr) 2.5rem minmax(0,1fr); }
}

.aios__col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

/* ── Conector com pulso ─────────────────────────────────────────────────────*/
.link {
  position: relative; align-self: center;
  width: 100%; height: 2.25rem;
  display: grid; place-items: center;
}
@media (min-width: 940px) { .link { height: 2.5rem; } }
.link__trilho {
  position: relative; overflow: hidden;
  width: 2px; height: 100%;
  background: var(--hair-2); border-radius: 2px;
}
@media (min-width: 940px) { .link__trilho { width: 100%; height: 2px; } }
.link__trilho::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--signal), var(--teal));
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--e-out);
}
@media (min-width: 940px) {
  .link__trilho::after {
    background: linear-gradient(90deg, var(--signal), var(--teal));
    transform: scaleX(0); transform-origin: left;
  }
}
.link[data-on="true"] .link__trilho::after { transform: scale(1); }
.link__seta {
  position: absolute; color: var(--ink-4); font-size: .7rem;
  transition: color .5s;
}
.link[data-on="true"] .link__seta { color: var(--signal); }

/* ── Nó de canal ────────────────────────────────────────────────────────────*/
.node {
  border: 1px solid var(--hair); border-radius: 5px;
  background: var(--ground-2); padding: .85rem 1rem;
  transition: border-color .5s, background .5s, box-shadow .5s;
}
.node[data-on="true"] {
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
  box-shadow: 0 0 24px -8px var(--teal);
}
.node__k { display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem; }
.node__v { font-weight: 600; font-size: .95rem; }

/* ── Mensagens ──────────────────────────────────────────────────────────────*/
.msg {
  border-radius: 5px; padding: .8rem .95rem; font-size: .8125rem; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
.msg[data-on="true"] { opacity: 1; transform: none; }
.msg--in { background: var(--elevated); border: 1px solid var(--hair); }
.msg--out {
  background: color-mix(in srgb, var(--teal) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
}
.msg__k { display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; }

/* ── Núcleo ─────────────────────────────────────────────────────────────────*/
.core {
  border: 1px solid var(--hair-2); border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, var(--elevated), var(--surface));
  transition: border-color .5s, box-shadow .6s;
}
.core[data-on="true"] {
  border-color: color-mix(in srgb, var(--accent-2) 42%, transparent);
  box-shadow: 0 0 44px -14px var(--accent-2);
}
.core__bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .95rem; border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.core__bar svg { width: .85rem; height: .88rem; flex: none; }
.core__estado { margin-left: auto; color: var(--ink-4); text-transform: none; letter-spacing: .04em; }
.core[data-pensando="true"] .core__estado { color: var(--signal); }
.core[data-pensando="true"] .core__estado::after {
  content: ""; display: inline-block; width: 1.5ch; text-align: left;
  animation: reticencias 1.2s steps(4) infinite;
}
@keyframes reticencias { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }
.core__steps { padding: 1rem .95rem 1.1rem; display: grid; gap: .65rem; min-height: 6.5rem; align-content: start; }

.passo-ia {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  font-size: .8125rem; color: var(--ink-3);
  opacity: .35; transition: opacity .45s var(--e), color .45s;
}
.passo-ia[data-on="true"] { opacity: 1; color: var(--ink-2); }
.passo-ia__check {
  width: .95rem; height: .95rem; margin-top: .18rem; flex: none;
  border: 1px solid var(--ink-4); border-radius: 50%;
  position: relative; transition: border-color .45s, background .45s;
}
.passo-ia[data-on="true"] .passo-ia__check { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 20%, transparent); }
.passo-ia[data-on="true"] .passo-ia__check::after {
  content: ""; position: absolute; left: .27rem; top: .1rem;
  width: .22rem; height: .45rem;
  border: solid var(--signal); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ── Efeitos no sistema ─────────────────────────────────────────────────────*/
.efeitos { display: grid; gap: .55rem; min-height: 9.5rem; align-content: start; }
.efeito {
  border: 1px solid var(--hair); border-radius: 5px; background: var(--ground-2);
  padding: .65rem .8rem;
  opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out), border-color .45s;
}
.efeito[data-on="true"] { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--teal) 26%, transparent); }
.efeito__k { display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin-bottom: .15rem; }
.efeito__v { font-size: .8125rem; color: var(--ink-2); }

/* ── Canais convergindo (seção Problema) ────────────────────────────────────*/
.canais-in { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.canal-chip {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  padding: .5rem .85rem; border: 1px solid var(--hair-2); border-radius: 100px;
  color: var(--ink-2); position: relative; overflow: hidden;
}
.canal-chip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 30%, transparent), transparent);
  transform: translateX(-120%);
  animation: varre 3.4s var(--e) infinite;
  animation-delay: calc(var(--d, 0) * .45s);
}
@keyframes varre { 0%{transform:translateX(-120%)} 45%,100%{transform:translateX(120%)} }

/* ── Fluxo compacto (Como funciona) ─────────────────────────────────────────*/
.fluxo5 { display: grid; gap: .75rem; }
@media (min-width: 900px) { .fluxo5 { grid-template-columns: repeat(5, 1fr); align-items: stretch; } }
.f5 {
  border: 1px solid var(--hair); border-radius: 5px; background: var(--ground-2);
  padding: 1.15rem 1rem 1.3rem; position: relative;
  transition: border-color .5s, transform .5s var(--e-out);
}
.f5:hover { border-color: color-mix(in srgb, var(--teal) 40%, transparent); transform: translateY(-3px); }
.f5__i { font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; color: var(--teal); display: block; margin-bottom: .9rem; }
.f5__t { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.f5__d { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* ── Ecossistema ────────────────────────────────────────────────────────────*/
.eco { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 5px; overflow: hidden; }
@media (min-width: 620px) { .eco { grid-template-columns: repeat(3, 1fr); } }
.eco__i { background: var(--ground); padding: 1.5rem 1.25rem; transition: background .45s; }
.eco__i:hover { background: var(--surface); }
.eco__n { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.eco__d { font-size: .8125rem; color: var(--ink-3); }

/* ── Chamada do Lab ─────────────────────────────────────────────────────────*/
.lab {
  display: grid; gap: 1.5rem; align-items: center;
  border: 1px solid var(--hair-2); border-radius: 6px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(120deg, var(--surface), var(--ground-2));
}
@media (min-width: 780px) { .lab { grid-template-columns: 1fr auto; } }
.lab__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; margin-bottom: .5rem; }
.lab__d { font-size: var(--t-sm); color: var(--ink-2); max-width: 52ch; }

/* ════════════════════════════════════════════════════════════════════════════
   NÚCLEO — grafo de inteligência (hero e fecho)
   ══════════════════════════════════════════════════════════════════════════ */
.nucleo-wrap { position: relative; width: 100%; }
.nucleo {
  display: block; width: 100%;
  height: clamp(22rem, 52vh, 34rem);
  opacity: 0; transition: opacity 1.8s var(--e);
}

.nucleo[data-ready="true"] { opacity: 1; }
.nucleo-wrap__k {
  position: absolute; left: 50%; bottom: -.25rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}

/* O hero virou só texto: a composição da jornada agora abre a página sozinha,
   na seção anterior. Aqui a coluna é única e limitada em largura para a frase
   manter a mesma medida de leitura em qualquer viewport. */
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 34rem); } }

/* ── Scanner: a faixa que varre a conversa sendo analisada ─────────────────*/
.scan { position: relative; overflow: hidden; }
.scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40%;
  top: -40%; pointer-events: none;
  background: linear-gradient(180deg, transparent,
              color-mix(in srgb, var(--signal) 9%, transparent) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
}
.scan[data-varrendo="true"]::after { animation: varredura 1.7s var(--e) ; }
@keyframes varredura { from { top: -40% } to { top: 100% } }

/* ── Revelação encadeada de frases (entende → decide → executa) ────────────*/
.cadeia { display: grid; gap: .35rem; }
.cadeia__l {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em;
  color: var(--ink-4); transition: color .7s var(--e);
}
.cadeia__l[data-on="true"] { color: var(--ink); }
.cadeia__l[data-on="true"] em { font-style: normal; color: var(--signal); }

/* ── Ajustes finos ────────────────────────────────────────────────────────*/
.aios__legenda {
  margin-top: 1.25rem; font-size: .78rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
}
.aios__legenda span { display: inline-flex; align-items: center; gap: .45rem; }
.aios__legenda span::before { content: ""; width: .3rem; height: .3rem; background: var(--teal); transform: rotate(45deg); }

/* Oferta de animação para quem tem "reduzir movimento" ligado no sistema.
   A preferência é respeitada por padrão — isto é escolha explícita, não
   override silencioso. */
.anim-optin {
  /* Centrado, logo acima do indicador de rolagem. O palco tem altura de dobra
     exata, então "embaixo" aqui continua dentro da tela — e no canto superior
     direito o botão disputava espaço com o CTA do menu. */
  position: absolute; left: 50%; bottom: 8.5rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2); background: rgba(6, 6, 12, .8);
  border: 1px solid var(--hair-2); border-radius: 100px;
  cursor: pointer; pointer-events: auto;
  transition: color .3s, border-color .3s;
}
.anim-optin::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--teal);
}
.anim-optin:hover { color: var(--ink); border-color: var(--teal); }
/* O wrapper do hero é pointer-events:none para não bloquear o texto; o botão
   precisa reativar o próprio. */


/* ══ Página /esteira ═══════════════════════════════════════════════════════
   Variação linear do palco: um título curto no topo e a esteira ocupando o
   resto da dobra. Reaproveita .palco (altura de dobra, cue, opt-in). */
.esteira-palco { display: flex; flex-direction: column; }

.esteira__topo { padding-top: 7.5rem; flex: 0 0 auto; position: relative; z-index: 1; }
.esteira__titulo {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.08; letter-spacing: -.02em; font-weight: 800;
  max-width: 22ch; margin-top: 1.1rem; text-wrap: balance;
}

/* `.esteira-palco .esteira__visual` e não só a classe: `.nucleo-wrap` define
   `position: relative` mais adiante no arquivo e, com a mesma especificidade,
   venceria — o mesmo tropeço que já deixou o canvas do palco sem altura. */
.esteira-palco .esteira__visual { position: relative; flex: 1 1 auto; min-height: 0; }
.esteira-palco .esteira__visual .nucleo { height: 100%; }

@media (max-width: 759px) {
  .esteira__topo { padding-top: 6rem; }
  /* No estreito a esteira desce em coluna e precisa de altura própria: deixá-la
     dividir a dobra com o título espremeria as seis estações. */
  .esteira-palco { height: auto; min-height: 100svh; }
  .esteira-palco .esteira__visual { height: 76svh; flex: 0 0 auto; }
  .esteira-palco .palco__cue { display: none; }
}

.esteira__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  background: var(--hair); border: 1px solid var(--hair); border-radius: 18px;
  overflow: hidden;
}
.esteira__item { background: var(--surface); padding: 1.9rem 1.6rem; }
.esteira__item p { color: var(--ink-2); font-size: var(--t-sm); margin-top: .5rem; }
.esteira__n {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .18em;
  color: var(--ink-4); display: block; margin-bottom: .7rem;
}
.esteira__h { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.esteira__item--fim { background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.esteira__item--fim .esteira__h { color: var(--signal); }

.esteira__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }

/* ══ 03.1 · Painel de gestão ═══════════════════════════════════════════════
   Mesmo chassi da demonstração da IA (.aios): a seção é a outra metade da
   mesma história, e a continuidade visual é o que diz isso. O que muda é o
   miolo — em vez de uma conversa, uma pilha de telas com profundidade. */
.painel {
  position: relative;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--ground-2));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
}
.painel::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: .5;
}

.painel__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .painel__grid { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
}

.painel__abas { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 900px) { .painel__abas { flex-direction: column; gap: .25rem; } }
.painel__aba {
  appearance: none; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--t-sm);
  background: transparent; color: var(--ink-3);
  border: 1px solid transparent; border-radius: 8px;
  padding: .55rem .8rem;
  transition: color .3s var(--e), background .3s var(--e), border-color .3s var(--e);
}
.painel__aba:hover { color: var(--ink); background: var(--hair); }
.painel__aba[aria-pressed="true"] {
  color: var(--signal);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border-color: color-mix(in srgb, var(--teal) 30%, transparent);
}

/* A pilha. Cada camada ocupa a mesma célula do grid; só a profundidade muda.
   `perspective` no contêiner, transform nas camadas — nada de reposicionar
   nada em JS. */
.painel__deck {
  position: relative; display: grid; perspective: 1400px;
  min-height: 21rem;
  /* Espaço para as bordas das camadas de trás aparecerem acima da da frente. */
  padding-top: 3.2rem;
}
.painel__deck > .camada { grid-area: 1 / 1; }

.camada {
  /* `position: relative` para o z-index abaixo valer de verdade: sem ele as
     camadas de trás, que vêm depois no DOM, pintavam por cima da da frente.
     O fundo precisa ser opaco pelo mesmo motivo — é ele que esconde a pilha. */
  position: relative;
  border: 1px solid var(--hair-2); border-radius: 10px;
  background: linear-gradient(180deg, var(--elevated), var(--surface));
  padding: 1.1rem 1.15rem 1.25rem;
  transform-origin: 50% 100%;
  transition: transform .7s var(--e), opacity .7s var(--e), filter .7s var(--e);
  will-change: transform, opacity;
}
/* pos 0 = a da frente; as demais recuam, encolhem e desfocam.
   Com `transform-origin` embaixo, o `scale` já empurra o topo para BAIXO em
   (1-escala)x altura. O translate precisa cobrir isso e ainda sobrar, ou as
   duas transformações se anulam e a pilha vira uma carta só — foi o que
   aconteceu na primeira versão. */
.camada[data-pos="0"] { transform: none; opacity: 1; filter: none; z-index: 4; }
.camada[data-pos="1"] { transform: translateY(-2.6rem) scale(.955); opacity: .62; filter: blur(.6px); z-index: 3; }
.camada[data-pos="2"] { transform: translateY(-4.6rem) scale(.912); opacity: .34; filter: blur(1.4px); z-index: 2; }
.camada[data-pos="3"] { transform: translateY(-6.3rem) scale(.87);  opacity: .16; filter: blur(2.2px); z-index: 1; }

.camada__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .55rem;
}
.camada__nome { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.camada__tag {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-4);
}
.camada__pergunta { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: 1.1rem; }

.camada__itens {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.camada__itens li {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: .3rem .65rem;
}

/* ── Gráficos: forma, escala e eixo de tempo. Nenhum valor de resultado. ── */
.pg { --alt: 8.5rem; }
.pg__eixo {
  display: flex; justify-content: space-between; margin-top: .5rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; color: var(--ink-4);
}

.pg--barras { display: flex; align-items: flex-end; gap: .3rem; height: var(--alt); margin-top: 1.4rem; }
.pg--barras > i {
  flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px;
  background: var(--cor, var(--teal));
}
.pg--barras > i::before {
  content: attr(data-v);
  position: absolute; bottom: calc(100% + .3rem); left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .5625rem; color: var(--ink-3);
  white-space: nowrap;
}
.pg--barras + .pg__eixo, .pg--barras .pg__eixo { width: 100%; }
.pg--barras { flex-wrap: wrap; }
.pg--barras .pg__eixo { flex-basis: 100%; }

.pg--mapa { display: block; }
.pg__dias {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; margin-bottom: .3rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; color: var(--ink-4);
  text-align: center;
}
.pg__grade {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem;
  grid-auto-rows: calc(var(--alt) / 12 - .25rem);
}
.pg__grade > i {
  border-radius: 2px;
  background: color-mix(in srgb, var(--cor, var(--signal)) calc(var(--o) * 100%), transparent);
  outline: 1px solid var(--hair);
  outline-offset: -1px;
}

.pg--funil, .pg--lista { display: flex; flex-direction: column; gap: .45rem; }
.pg__et, .pg__lin { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.pg__et b, .pg__lin b {
  font-weight: 500; font-size: var(--t-xs); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg__et i, .pg__lin i {
  display: block; height: .7rem; width: var(--w); border-radius: 3px;
  background: var(--cor, var(--teal));
}
.pg__et i.fim { background: var(--cor, var(--signal)); }
@media (max-width: 480px) {
  .pg__et, .pg__lin { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* Entrada escalonada dos elementos do gráfico da camada da frente. Só ali:
   animar as de trás seria trabalho invisível. */
@media (prefers-reduced-motion: no-preference) {
  .camada[data-pos="0"] .pg--barras > i { animation: pgSobe .6s var(--e) backwards; animation-delay: var(--d); }
  .camada[data-pos="0"] .pg__grade > i  { animation: pgAcende .5s var(--e) backwards; animation-delay: var(--d); }
  .camada[data-pos="0"] .pg__et,
  .camada[data-pos="0"] .pg__lin        { animation: pgEntra .5s var(--e) backwards; animation-delay: var(--d); }
}
@keyframes pgSobe   { from { height: 0; opacity: 0 } }
@keyframes pgAcende { from { opacity: 0 } }
@keyframes pgEntra  { from { opacity: 0; transform: translateX(-.6rem) } }

/* ══ 03.2 · Funil no CRM ═══════════════════════════════════════════════════ */
.kb {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 860px) {
  /* Cinco colunas não cabem: vira rolagem horizontal com largura mínima por
     coluna, que é como um quadro de CRM se comporta no celular de verdade. */
  .kb {
    grid-template-columns: repeat(5, 11.5rem);
    overflow-x: auto; padding-bottom: .6rem;
    scroll-snap-type: x proximity;
  }
  .kb__col { scroll-snap-align: start; }
}
.kb__col {
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  border: 1px solid var(--hair); border-radius: 10px;
  padding: .7rem .55rem .55rem;
  min-height: 15rem;
}
.kb__col--fim {
  background: color-mix(in srgb, var(--teal) 8%, var(--ground));
  border-color: color-mix(in srgb, var(--teal) 26%, transparent);
}
.kb__h {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 .3rem .6rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--hair);
}
.kb__h b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kb__col--fim .kb__h { color: var(--signal); }

.kb__pilha { display: flex; flex-direction: column; gap: .45rem; }
.kb__card {
  display: flex; flex-direction: column; gap: .18rem;
  background: linear-gradient(180deg, var(--elevated), var(--surface));
  border: 1px solid var(--hair-2); border-radius: 8px;
  padding: .6rem .65rem;
  /* Sobe no eixo Z durante o movimento para passar por cima das outras colunas. */
  position: relative;
}
.kb__card[data-movendo="true"] { z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.kb__card[data-fim="true"] { border-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.kb__nome { font-size: .8125rem; font-weight: 600; }
.kb__nota { font-size: .6875rem; color: var(--ink-2); }
.kb__canal {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); margin-top: .15rem;
}

/* ══ Faixa de clientes ═════════════════════════════════════════════════════
   Seção "curta" de propósito (é uma faixa de confiança, não um bloco de
   conteúdo), mas com peso reforçado a pedido — maior que o padrão de uma
   seção curta comum, pra carregar a importância de mostrar quem usa a
   TaskFlow. */
.sec--curta { padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.faixa--clientes { margin-top: 2rem; }
.faixa--clientes .faixa__item {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 600;
  color: var(--ink-3); letter-spacing: -.01em; text-transform: none;
  font-family: var(--display);
}

/* ══ Números ═══════════════════════════════════════════════════════════════ */
.nums {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: 18px; overflow: hidden;
}
.num { background: var(--surface); padding: 2rem 1.5rem; }
.num__v {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1;
  letter-spacing: -.03em; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.num__v--fixo { color: var(--ink); }
.num__k {
  display: block; margin-top: .6rem;
  font-size: var(--t-sm); color: var(--ink-2); max-width: 22ch;
}
.nums__nota {
  margin-top: 1rem; font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .06em; color: var(--ink-4);
}

/* Título de seção em escala menor: usado onde a frase é longa e, no tamanho
   padrão, sozinha empurraria todo o resto para fora da dobra. */
.sec__title--medio { font-size: clamp(1.6rem, 3.2vw, 2.5rem); max-width: 26ch; }

/* Selo do painel 3.1: os valores ali são de exemplo, e isso precisa estar na
   tela — não só no código. */
.painel__selo {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
  border: 1px solid var(--hair); border-radius: 999px; padding: .2rem .55rem;
}

/* Valor numérico ao lado da barra, nos gráficos do painel. */
.pg__et, .pg__lin { grid-template-columns: 9.5rem minmax(0, 1fr) 4rem; }
.pg__et u, .pg__lin u {
  text-decoration: none; text-align: right;
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .pg__et, .pg__lin { grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; }
}
.pg--barras > i { position: relative; }
.pg__eixo b + b + b { text-align: right; }

/* Logos de clientes na faixa. Dessaturadas por padrão: marcas de cores muito
   diferentes, lado a lado e em tamanho cheio, viram um mosaico que rouba a
   atenção do resto da página. No hover cada uma volta ao normal. */
/* Silhueta branca uniforme: `brightness(0)` achata qualquer cor para preto e
   `invert(1)` devolve branco, preservando o alfa. É o que permite pôr lado a
   lado uma logo branca (Moments) e uma azul-marinho (Regen) sem que a segunda
   desapareça no fundo escuro nem a faixa vire um mosaico de cores. */
.faixa__logo {
  height: clamp(2.6rem, 4.4vw, 3.7rem); width: auto; display: block;
  filter: brightness(0) invert(1); opacity: .55;
  transition: opacity .4s var(--e);
}
.faixa__item:hover .faixa__logo { opacity: 1; }

/* Moments Paris e Belô: marcas mais compactas/quadradas que as demais — na
   mesma altura da faixa ocupam menos largura e leem como menores. Compensado
   com uma altura maior só pra elas. */
.faixa__logo--grande { height: clamp(3.4rem, 5.7vw, 4.8rem); }

/* Cliente sem arquivo de logo: assinatura tipográfica no mesmo peso visual, para
   a faixa não parecer que faltou carregar alguma imagem. */
.faixa__item--texto {
  font-family: "Unbounded", var(--display), sans-serif; font-weight: 600;
  font-size: clamp(.9rem, 1.7vw, 1.1rem); letter-spacing: -.01em;
  color: rgba(238, 240, 246, .45); text-transform: none;
  transition: color .4s var(--e);
}
.faixa__item--texto:hover { color: var(--ink); }
.faixa__item--texto::before { display: none; }

/* ══ Blog ══════════════════════════════════════════════════════════════════
   O blog herda os tokens do site. O que muda aqui é a medida de leitura: um
   artigo longo precisa de coluna estreita (~68 caracteres) para o olho achar o
   começo da linha seguinte sem esforço. */
.sec--topo { padding-top: clamp(7rem, 12vw, 9.5rem); }
.wrap--artigo { max-width: 46rem; }

.migalha {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4);
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem;
}
.migalha a { color: var(--ink-3); text-decoration: none; }
.migalha a:hover { color: var(--signal); }

/* ── Listagem ── */
.cat { display: flex; flex-wrap: wrap; gap: .45rem; margin: 2rem 0 2.5rem; }
.cat__chip {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  color: var(--ink-3); text-decoration: none;
  border: 1px solid var(--hair); border-radius: 999px; padding: .4rem .85rem;
  transition: color .3s var(--e), border-color .3s var(--e), background .3s var(--e);
}
.cat__chip:hover {
  color: var(--signal); border-color: color-mix(in srgb, var(--teal) 35%, transparent);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
}

.posts {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: 18px; overflow: hidden;
}
.post { background: var(--surface); }
.post__link {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: 1.9rem 1.6rem; text-decoration: none; color: inherit;
  transition: background .35s var(--e);
}
.post__link:hover { background: var(--elevated); }
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4);
}
.post__cat { color: var(--signal); }
.post__titulo { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.post__sub { font-size: var(--t-sm); color: var(--ink-2); flex: 1; }
.post__ler { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); margin-top: .35rem; }
.post__link:hover .post__ler { color: var(--signal); }

/* ── Artigo ── */
.art__topo { margin-bottom: 2.5rem; }
.art__h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08; margin: 1rem 0 .9rem;
  text-wrap: balance;
}
.art__sub { font-size: var(--t-lead); color: var(--ink-2); }

.sumario {
  border: 1px solid var(--hair); border-radius: 12px;
  padding: 1.1rem 1.3rem; margin-bottom: 2.5rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.sumario__k {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .6rem;
}
.sumario ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.sumario a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.sumario a:hover { color: var(--signal); }

.art__corpo { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); }
.art__corpo > * + * { margin-top: 1.15rem; }
.art__corpo h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--hair); line-height: 1.2;
}
.art__corpo h3 {
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  margin-top: 2rem; letter-spacing: -.01em;
}
.art__corpo strong { color: var(--ink); font-weight: 600; }
.art__corpo a { color: var(--signal); text-underline-offset: .18em; }
.art__corpo ul, .art__corpo ol { padding-left: 1.3rem; display: grid; gap: .5rem; }
.art__corpo li::marker { color: var(--ink-4); }
.art__corpo code {
  font-family: var(--mono); font-size: .875em; color: var(--ink);
  background: var(--elevated); border: 1px solid var(--hair);
  border-radius: 5px; padding: .1rem .35rem;
}
.art__corpo blockquote {
  border-left: 2px solid color-mix(in srgb, var(--teal) 50%, transparent);
  padding-left: 1.1rem; color: var(--ink-2); font-style: italic;
}
/* Tabela larga rola dentro do próprio contêiner: o corpo da página nunca
   ganha rolagem horizontal por causa dela. */
.art__corpo table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.art__corpo thead th {
  text-align: left; color: var(--ink); font-weight: 600;
  border-bottom: 1px solid var(--hair-2); padding: .7rem .6rem;
}
.art__corpo td { padding: .7rem .6rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.art__corpo tbody tr:hover { background: color-mix(in srgb, var(--elevated) 60%, transparent); }
@media (max-width: 640px) {
  .art__corpo table { display: block; overflow-x: auto; white-space: nowrap; }
  .art__corpo td, .art__corpo th { white-space: normal; min-width: 8rem; }
}

/* ── FAQ, fontes, relacionados, CTA ── */
.faq { margin-top: 3rem; }
.faq h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; color: var(--ink);
  padding-top: 1.6rem; border-top: 1px solid var(--hair); margin-bottom: 1rem;
}
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  cursor: pointer; padding: .95rem 0; font-weight: 500; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--ink-4); font-family: var(--mono); }
.faq__item[open] summary::after { content: "–"; color: var(--signal); }
.faq__item p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; padding-bottom: 1.1rem; }

.fontes { margin-top: 2.5rem; }
.fontes__t {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .7rem;
}
.fontes ol { padding-left: 1.2rem; display: grid; gap: .45rem; font-size: var(--t-xs); color: var(--ink-3); }
.fontes a { color: var(--ink-2); }

.art__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.art__tag {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
  color: var(--ink-4); border: 1px solid var(--hair); border-radius: 999px;
  padding: .25rem .6rem;
}

.cta-art {
  margin-top: 3rem; padding: 2rem 1.8rem; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
  background: radial-gradient(120% 140% at 0% 0%,
              color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%), var(--surface);
}
.cta-art__k { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.cta-art p { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: 1.2rem; }

.rel { margin-top: 3rem; }
.rel__h {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .9rem;
}
.rel__grid { display: grid; gap: .6rem; }
.rel__item {
  display: grid; gap: .25rem; text-decoration: none;
  border: 1px solid var(--hair); border-radius: 10px; padding: .9rem 1rem;
  transition: border-color .3s var(--e), background .3s var(--e);
}
.rel__item:hover { border-color: var(--hair-2); background: var(--elevated); }
.rel__cat { font-family: var(--mono); font-size: var(--t-xs); color: var(--signal); }
.rel__t { color: var(--ink); font-weight: 500; font-size: var(--t-sm); }

/* ══ Relatório do blog (/gestao-blog/) ═════════════════════════════════════ */
.rb-bloco {
  margin-top: 2rem; padding: 1.6rem;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--surface);
}
.rb-h {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 1rem;
}
.rb-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.rb-grid .rb-bloco { margin-top: 0; }

.rb-barras { display: flex; align-items: flex-end; gap: 3px; height: 8rem; }
.rb-barras > i {
  flex: 1; height: var(--h); min-height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--teal), color-mix(in srgb, var(--teal) 25%, transparent));
}
.rb-eixo {
  display: flex; justify-content: space-between; margin-top: .5rem;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4);
}

.rb-lin {
  display: grid; grid-template-columns: minmax(0, 1fr) 6rem 3rem;
  gap: .7rem; align-items: center; padding: .4rem 0;
}
.rb-lin b {
  font-weight: 500; font-size: var(--t-sm); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-lin i {
  display: block; height: .55rem; width: var(--w); border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 30%, transparent));
}
.rb-lin u {
  text-decoration: none; text-align: right; font-family: var(--mono);
  font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.rb-vazio { color: var(--ink-4); font-size: var(--t-sm); }

.rb-aviso { border-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.rb-aviso ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.rb-aviso li { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; }
.rb-aviso b { color: var(--ink); }

/* Na esteira a venda ocupa o centro inferior e é o clímax da composição — o
   indicador de rolagem sai do meio para não disputar aquele ponto com ela. */
.esteira-palco .palco__cue {
  left: auto; right: 2.5rem; transform: none; opacity: .65;
}
.esteira-palco .palco__seta { height: 1.8rem; }
/* O botão de ativar animação também sai do centro inferior: ali ele cobria
   exatamente o nó da venda, que é o ponto que a composição existe para mostrar. */
.esteira-palco .anim-optin { bottom: auto; top: 1rem; left: 2.5rem; transform: none; }

/* A home usa a composição da esteira em tela cheia, sem o título que ela tem na
   página própria. Herda da .esteira-palco só os ajustes de convivência: o
   indicador de rolagem e o botão de animação saem do centro inferior, que é
   onde fica o nó da venda. */
.palco--esteira .palco__cue { left: auto; right: 2.5rem; transform: none; opacity: .65; }
.palco--esteira .palco__seta { height: 1.8rem; }
.palco--esteira .anim-optin { bottom: auto; top: 1rem; left: 2.5rem; transform: none; }