/* ==========================================================================
   Ilux Flow · sections.css
   Estilos por seção, na ordem do documento.
   ========================================================================== */

/* ==========================================================================
   6.0  NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(251, 246, 242, 0);
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease;
}
.nav.is-stuck {
  background: rgba(251, 246, 242, 0.86);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
}
/* A altura da nav não muda ao grudar: ela é sticky e ocupa espaço no fluxo,
   então encolher empurraria a página 10px e daria um salto. O que muda é
   só cor, borda e uma escala mínima da marca, nada de layout. */
.nav.is-stuck .brand {
  transform: scale(0.94);
}
.brand {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
}

/* progresso de leitura, scaleX dirigido pelo scroll */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--flow);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.nav-in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.brand img {
  height: 25px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline: auto;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-70);
  transition: color 0.16s ease;
}
.nav-links a:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  /* 5 âncoras numa página única não pagam o custo de um menu hambúrguer */
  .nav-links {
    display: none;
  }
  .nav-in {
    justify-content: space-between;
  }
}

/* ==========================================================================
   6.1  HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: var(--sec);
  overflow: clip;
}

/* A arte vem em DUAS camadas de propósito. Entrada, flutuação contínua,
   parallax de ponteiro e deriva no scroll são quatro animações sobre o mesmo
   objeto; se todas escrevessem no mesmo elemento, brigariam pelas mesmas
   propriedades de transform a cada frame.
     .ribbon-wrap → parallax de ponteiro (x) + deriva no scroll (yPercent, scale)
     .ribbon      → entrada (scale, rotate) + flutuação (y, rotate) */
.ribbon-wrap {
  position: absolute;
  top: clamp(-180px, -12vw, -60px);
  right: clamp(-220px, -14vw, -80px);
  width: min(760px, 66vw);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.ribbon {
  width: 100%;
  height: auto;
  /* O PNG de origem foi cortado pelo limite do frame e a base do shape 3D
     termina numa reta, o que destoa numa forma orgânica. A máscara dissolve
     a base e a lateral esquerda. É estática, nunca animada. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 58%, transparent 96%),
    linear-gradient(to right, transparent 0, #000 22%);
  mask-image:
    linear-gradient(to bottom, #000 58%, transparent 96%),
    linear-gradient(to right, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* brilho difuso de apoio, o blur é ESTÁTICO, nunca animado */
.glow {
  position: absolute;
  top: -180px;
  right: -120px;
  width: 620px;
  height: 620px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 180, 61, 0.38),
    rgba(255, 77, 130, 0.22) 55%,
    transparent 78%
  );
  filter: blur(64px);
}

.hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  /* a coluna da direita ganhou alguns pixels (era 1.08/0.92, com vão de até
     72px): o que mora nela agora é uma captura com seis indicadores, e nao
     mais uma conversa de duas linhas. O título perde ~11px e quebra igual. */
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink-70);
  margin-bottom: 26px;
}
.tag img {
  height: 16px;
  width: auto;
}

.hero h1 {
  margin-bottom: 24px;
}
.hero .lede {
  margin-bottom: 34px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

/* --- painel de demonstração do hero (estado 1 da jornada) --------------- */
.demo {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 0 var(--line),
    0 30px 60px -32px rgba(19, 30, 43, 0.3);
  overflow: hidden;
}
/* O painel sangra para a direita, para dentro da margem da grade. É espaço que
   estava sobrando: a `.wrap` tem 1160px de teto, e numa tela larga sobram
   ~210px entre o fim do conteúdo e a borda da janela, ocupados só pela arte do
   hero, que é desfocada e está atrás.

   A conta é o espaço que sobra de verdade (`--pad` mais a metade do que passa
   dos 1160px da grade), menos 40px que ficam sempre de folga até a borda, com
   teto de 140px. Medir pela janela em vez de pelo espaço disponível deixava o
   painel a 17px da borda em 1180px, a um passo de parecer cortado.
   O texto não cede nada: a coluna da esquerda continua do mesmo tamanho. */
@media (min-width: 981px) {
  .demo {
    margin-right: calc(
      -1 * clamp(0px, var(--pad) + max(0px, (100vw - 1160px) / 2) - 40px, 140px)
    );
  }
}

/* a captura ocupa a largura do painel e mantem a propria proporcao, como na
   vitrine da seccao 6.5 */
.demo img {
  display: block;
  width: 100%;
  height: auto;
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
/* O seletor de descendente abaixo precisa excluir o avatar: `.demo-bar span`
   tem especificidade maior que `.avatar` e estava vencendo, trocando o
   `display: grid` por `block`, a sigla ficava encostada no canto do círculo,
   em 12px e cinza, em vez de centrada, em 13px e ink. */
.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--flow);
  display: grid;
  place-items: center;
  /* a caixa de linha da fonte é mais alta que as maiúsculas; sem isto o
     `place-items: center` centra a caixa, não o desenho das letras */
  line-height: 1;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  user-select: none;
}
.demo-bar b {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
/* o bloco de identificação: nome em cima, contexto embaixo */
.demo-bar > span:not(.avatar) {
  display: block;
  min-width: 0;
}
.demo-bar > span > span {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-50);
}

.demo-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

/* bolhas de conversa */
.bubble {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.bubble p {
  max-width: none;
  margin: 0;
}
.bubble time {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--ink-50);
}
.bubble-in {
  background: var(--cream-2);
  border-bottom-left-radius: 5px;
}
.bubble-out {
  margin-left: auto;
  background: var(--blush);
  border-bottom-right-radius: 5px;
}
.bubble-out time {
  text-align: right;
}

/* faixa de busca no ERP */
.probe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.87rem;
  color: var(--ink-70);
}
.dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coral);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 980px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo {
    max-width: 520px;
  }
  .ribbon-wrap {
    width: min(520px, 80vw);
    top: -90px;
    right: -90px;
  }
}

/* ==========================================================================
   6.2  O PROBLEMA
   ========================================================================== */
/* blocos separados por fio de 1px, não são cartões soltos com sombra */
/* --- indicador lateral ---------------------------------------------------
   A seção prende no meio da tela e os cinco sintomas acendem um a um, com um
   trilho marcando o avanço e uma arte que morfa à direita.

   Presa, SÓ A DESCRIÇÃO DO ITEM ATIVO fica aberta, as outras ficam com altura
   zero, logo abaixo do próprio título (sanfona). É o que faz a seção caber
   numa tela de notebook: com os cinco parágrafos abertos ela media 769px onde
   havia 699 disponíveis. A tentativa anterior, um espaço único no pé da
   coluna, cabia, mas deixava o texto longe do título que ele explica.
   ------------------------------------------------------------------------- */
.pain-stage {
  position: relative;
}
/* âncora do trilho: mede SÓ a coluna de texto. No palco ele acompanhava
   também a altura da arte, e no empilhado corria sozinho ao lado dela. */
.pain-col {
  position: relative;
}

.pain-list {
  display: grid;
  gap: clamp(10px, 2.6svh, 34px);
  margin: 0;
  padding: 0 0 0 clamp(20px, 2.6vw, 34px);
  list-style: none;
  align-content: start;
}
.pain-item {
  position: static;
}

.pain-n {
  display: block;
  font-size: clamp(0.74rem, 1.6svh, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pink-txt);
  margin-bottom: 2px;
}
.pain-item h3 {
  margin: 0;
  font-size: clamp(0.94rem, min(1.5vw, 2.6svh), 1.2rem);
  letter-spacing: -0.015em;
}
.pain-detail {
  color: var(--ink-70);
  font-size: clamp(0.88rem, min(1.1vw, 2.1svh), 1.05rem);
  line-height: 1.5;
  max-width: 46ch;
  margin: 6px 0 0;
}

/* o trilho: linha fina à esquerda, com a parte preenchida crescendo em scaleY */
.pain-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.pain-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--flow);
  transform-origin: top center;
  /* cheio por padrão: sem JavaScript não há quem o preencha. O estado
     recolhido é armado pelo .js, em layout.css. */
}

.pain-art {
  margin: 0;
}
.pain-art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- desktop: seção presa, sanfona à esquerda, arte à direita -------------
   901px é o MESMO limiar da §6.3 e da jornada: as três seções presas da página
   mudam de arranjo juntas, em vez de cada uma ter a sua regra.

   O limite de altura ficou em 520px, e não nos 700px de antes. 700 parecia
   modesto e não era: um notebook 1366×768 com a barra do Chrome entrega ~650px
   de viewport, ou seja, fora do pin, a seção virava lista comum justo na tela
   mais comum, enquanto no ultrawide prendia. O que faltava não era altura de
   tela, era o conteúdo encolher junto com ela: agora tipografia, vãos e arte
   são medidos em `svh` (com `min()` para obedecer à MENOR das restrições,
   largura da coluna ou altura da janela), como a §6.3 já fazia. Abaixo de
   520px, celular deitado, janela espremida, o empilhado assume, porque aí
   nem a lista sozinha caberia. */
@media (min-width: 901px) and (min-height: 520px) {
  .pain {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: calc(var(--nav-h) + clamp(8px, 2.6svh, 30px))
      clamp(8px, 2.6svh, 30px);
  }
  .pain .sec-head {
    margin-bottom: clamp(10px, 2.6svh, 44px);
  }
  .pain .sec-head h2 {
    font-size: clamp(1.18rem, min(2.9vw, 3.8svh), 2.3rem);
    margin-bottom: clamp(4px, 1.4svh, 18px);
  }
  .pain .sec-head .lede {
    font-size: clamp(0.86rem, min(1.1vw, 2svh), 1.08rem);
  }
  /* numa janela baixa a chamada é o que menos falta: sai e devolve ~40px para
     a lista, que é o conteúdo da seção */
  @media (max-height: 620px) {
    .pain .sec-head .lede {
      display: none;
    }
  }

  .pain-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
  }
  /* linha explícita nas DUAS colunas: a arte vem antes do texto no DOM (por
     causa do sticky no empilhado) e sem isto o autoposicionamento jogaria a
     coluna de texto para a linha de baixo. */
  .pain-col {
    grid-column: 1;
    grid-row: 1;
  }
  .pain-art {
    grid-column: 2;
    grid-row: 1;
  }

  /* a sanfona: fechada por padrão, o JS abre a do item ativo. A altura
     reservada (--pain-alt) é a da lista com o maior parágrafo aberto, medida
     pelo JS: com ela a lista não muda de altura ao trocar de item, e o bloco
     inteiro para de subir e descer no meio da tela. */
  /* fechada só quando há animação para abri-la. Com movimento reduzido o
     reveal.js sai antes de montar a sanfona, e esta folha carrega DEPOIS da
     layout.css, sem a condição aqui, o `height: 0` venceria o reset de lá e
     as cinco descrições sumiriam para quem pede menos movimento. */
  @media (prefers-reduced-motion: no-preference) {
    .js .pain-detail {
      overflow: hidden;
      margin-top: 0;
      height: 0;
    }
    .js .pain-list {
      min-height: var(--pain-alt, auto);
    }
  }

  .pain-art {
    /* teto pela altura da janela, senão a arte empurraria a seção para fora
       dela nas telas mais baixas. O desenho é mais largo que alto (924×787),
       então 58svh de largura dão ~49svh de altura, sobra para o cabeçalho. */
    width: min(100%, 58svh);
    justify-self: center;
  }
}

/* ---- empilhado: sem pin ------------------------------------------------
   Vale para telas estreitas E para as raras telas largas porém baixíssimas
   (menos de 520px), nos dois casos o indicador lateral não cabe. Aqui todos os parágrafos ficam abertos, cada
   um sob o seu título, e a arte vai para uma coluna estreita à direita,
   grudada no topo enquanto a lista passa. Antes ela ficava centrada SOBRE o
   texto, e os itens corriam por baixo do desenho. */
@media (max-width: 900px), (max-height: 519px) {
  .pain-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(120px, 26vw, 230px);
    gap: clamp(18px, 3vw, 40px);
  }
  .pain-col {
    grid-column: 1;
    grid-row: 1;
  }
  .pain-art {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--nav-h) + clamp(16px, 4vh, 40px));
    align-self: start;
    width: 100%;
  }
  .pain-list {
    gap: clamp(28px, 5vw, 44px);
  }
}

/* ---- celular: a coluna estreita não cabe; a arte sobe para o topo -------
   Estática de propósito: grudada, ela cobriria os títulos que passassem por
   baixo, era esse o defeito em tela cheia. */
@media (max-width: 620px) {
  .pain-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .pain-art {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: min(46%, 168px);
    justify-self: center;
    margin-bottom: clamp(18px, 4vw, 30px);
  }
  .pain-col {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ==========================================================================
   6.3  A VIRADA
   ========================================================================== */
.value {
  background: var(--cream-2);
}
.value-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 76px);
  /* stretch, não start: a coluna da esquerda precisa da altura da linha
     inteira para empurrar a marca até a base quando os pontos forem mais
     altos que a citação. */
  align-items: stretch;
}

/* citação + marca. O space-between é o que mantém a marca colada na base da
   coluna, seja a citação ou a lista quem dita a altura da linha. */
.value-lead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 68px);
}

.value blockquote {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.08;
}
/* As linhas são criadas pelo SplitText na largura real (ver split.js). A
   folga do recorte vem de .split-mask, em layout.css. */

/* --- a marca que ocupa a coluna da esquerda ------------------------------
   Duas camadas, pelo mesmo motivo da arte do hero: a deriva no scroll mora no
   <figure> e a flutuação contínua no <g> interno. Num elemento só as duas
   disputariam a matriz de transform a cada frame. */
.value-mark {
  margin: 0;
  /* maior que na primeira versão: a marca deixou de ser enfeite da coluna e
     virou o centro do momento, é nela que a cor chega. Abaixo de ~190px a
     frente de cor atravessa depressa demais para ser lida. */
  width: clamp(160px, 19vw, 264px);
  align-self: start;
}
.mk {
  display: block;
  width: 100%;
  height: auto;
  /* a flutuação e a rotação saem alguns pixels da viewBox, sem isto o SVG
     recortaria justamente a borda que se move */
  overflow: visible;
}

/* --- os quatro pontos ---------------------------------------------------
   Filete entre os itens em vez de só espaço: dá o mesmo ar que a marca ocupa
   do outro lado e transforma a lista em sequência de leitura.

   A coluna é esticada pela linha do grid, quem manda na altura é o lado da
   citação. Com as linhas do grid em `stretch`, a folga sobra dentro de cada
   item; sem o align-content abaixo ela se acumularia toda no rodapé do item,
   e cada filete ficaria colado no texto seguinte em vez de no meio do vão.
   Primeiro e último ancoram nas pontas, para as duas colunas fecharem no
   mesmo topo e na mesma base. */
.value-points {
  display: grid;
}
.value-points li {
  display: grid;
  align-content: center;
  padding-left: 22px;
  padding-block: clamp(16px, 1.9vw, 24px);
}
.value-points li + li {
  border-top: 1px solid var(--line);
}
.value-points li:first-child {
  align-content: start;
  padding-top: 0;
}
.value-points li:last-child {
  align-content: end;
  padding-bottom: 0;
}
.value-points b {
  position: relative;
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}
/* o ponto pendura no título, não no item: assim ele acompanha o texto
   qualquer que seja o alinhamento vertical do item dentro da linha.
   --dot-scale é dirigida pelo GSAP no mesmo relógio da frente de cor da
   marca; sem JS ela não existe e o fallback do var() deixa o ponto inteiro. */
.value-points b::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--flow);
  transform: scale(var(--dot-scale, 1));
}
.value-points p {
  color: var(--ink-70);
  font-size: 0.99rem;
}

/* --- a seção pinada ------------------------------------------------------
   A partir de 901px a §6.3 é PRENDIDA no meio da tela enquanto a marca se
   pinta. Para isso ela precisa caber na tela inteira, com a nav por cima,
   senão o pin cortaria conteúdo.

   Por isso o conteúdo passa a ser dimensionado também em `svh`: a citação, o
   vão e a marca encolhem junto com a altura da janela. `svh` e não `vh`: com
   `vh` a barra do navegador no celular mudaria a altura e o pin quebraria.
   (O pin em si não roda no celular, mas a unidade certa evita a armadilha se
   o ponto de corte mudar.)

   O padding de cima embute --nav-h porque a nav é sticky e passaria por cima
   da primeira linha da citação. */
@media (min-width: 901px) {
  .value {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: calc(var(--nav-h) + clamp(14px, 3svh, 36px))
      clamp(14px, 3svh, 36px);
  }
  /* o min() é o que faz a tipografia obedecer à MENOR das duas restrições:
     largura da coluna ou altura da janela */
  .value blockquote {
    font-size: clamp(1.5rem, min(3.4vw, 5svh), 2.7rem);
  }
  .value-lead {
    gap: clamp(22px, 4svh, 68px);
  }
  .value-mark {
    width: min(clamp(150px, 19vw, 264px), 26svh);
  }
}

@media (max-width: 900px) {
  .value-in {
    grid-template-columns: minmax(0, 1fr);
  }
  /* empilhado a marca vira separador entre a citação e a lista, centrada e
     menor, não pode competir com o texto numa coluna só */
  .value-lead {
    gap: clamp(30px, 6vw, 44px);
  }
  .value-mark {
    /* empilhada ela ganha presença: é o momento da seção, e a frente de cor
       precisa de percurso para ser lida. O teto de 200px é o que ainda não
       empurra a lista para fora da primeira tela no celular. */
    width: clamp(140px, 38vw, 200px);
    align-self: center;
  }
}

/* ==========================================================================
   6.4  A JORNADA  (clímax, única seção pinada)
   ========================================================================== */
.journey {
  /* svh, nunca vh: a barra do navegador mudaria a altura e quebraria o pin */
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* O padding do topo embute a altura da nav: com a seção pinada em
     'top top' e o conteúdo centralizado, em viewport baixa (~700px) a
     nav sticky passava por cima da etiqueta e do título. */
  padding-block: calc(var(--nav-h) + clamp(24px, 4vw, 56px))
    clamp(56px, 8vw, 96px);
  background: var(--cream);
}

.journey-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.journey-head h2 {
  font-size: clamp(1.65rem, 2.9vw, 2.3rem);
  max-width: 22ch;
}

/* indicadores/abas de estado */
.steps-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: relative;
}
.js .steps-nav {
  padding-bottom: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .js .steps-nav {
    padding-bottom: 0;
  }
}
/* Trilho que acompanha o scrub. Só existe onde existe scrub: sem JS ou com
   movimento reduzido ele ficaria como um traço cinza que nunca preenche,
   um elemento de interface quebrado. Por isso nasce oculto e só o .js o
   liga, e a consulta de movimento reduzido o desliga de novo. */
.steps-rail {
  display: none;
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.js .steps-rail {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .js .steps-rail {
    display: none;
  }
}
.steps-rail-fill {
  display: block;
  height: 100%;
  background: var(--flow);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (max-width: 980px) {
  /* sem scrub no mobile, o trilho não representa nada */
  .js .steps-nav {
    padding-bottom: 0;
  }
  .js .steps-rail {
    display: none;
  }
}
.step-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.89rem;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.step-btn .n {
  font-variant-numeric: tabular-nums;
  margin-right: 7px;
  color: var(--ink-50);
}
.step-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
}
.step-btn[aria-pressed="true"] .n {
  color: rgba(255, 255, 255, 0.55);
}

.journey-panel {
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  gap: clamp(14px, 1.6vw, 20px);
  /* stretch para as duas colunas terminarem na mesma altura */
  align-items: stretch;
}

.chat {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 0 var(--line),
    0 24px 50px -34px rgba(19, 30, 43, 0.28);
  overflow: hidden;
}
.chat-body {
  padding: 18px;
  display: grid;
  gap: 13px;
  align-content: start;
  min-height: 268px;
}

/* pilha de contexto. Sem JS os 4 estados descem em lista legível; só quando o
   JS assume eles passam a ocupar a MESMA célula de grid, a altura é a do
   estado mais alto, sem position:absolute e sem clip. */
.ctx-stack {
  display: grid;
  gap: 12px;
}
/* Todos os estados preenchem a coluna inteira, e nao so o vazio: com
   `align-content: start` os estados de um cartao so (02 e 04) paravam no fim
   do texto e deixavam um vao branco ate a base do chat ao lado. Como os quatro
   ocupam a MESMA celula do grid, a altura e sempre a do mais alto: o que muda
   e o cartao acompanhar essa altura em vez de encolher. */
.ctx {
  display: grid;
  gap: 12px;
  align-content: stretch;
}

.js .ctx-stack {
  gap: 0;
  grid-template-areas: "s";
}
.js .ctx {
  grid-area: s;
}

.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow:
    0 1px 0 var(--line),
    0 18px 40px -34px rgba(19, 30, 43, 0.28);
}
.card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pink-txt);
  margin-bottom: 14px;
}
.card-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flow);
}

/* linhas de dado rótulo/valor */
.rows {
  display: grid;
  gap: 9px;
}
.rows > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.93rem;
  line-height: 1.4;
}
.rows .k {
  color: var(--ink-50);
  flex: 0 0 auto;
}
.rows .v {
  font-weight: 500;
  text-align: right;
}
.rows .v em {
  font-style: normal;
  color: var(--coral);
  font-weight: 600;
}

/* selo */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blush);
  font-size: 0.8rem;
  font-weight: 600;
  /* blush é muito claro: o texto precisa ser bem escuro para passar em AA */
  color: #8a1038;
}
.pill svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.ctx-empty {
  display: grid;
  place-content: center;
  gap: 12px;
  min-height: 268px;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow:
    0 1px 0 var(--line),
    inset 0 0 0 1px var(--line);
  text-align: center;
  padding: 24px;
}
.ctx-empty .probe {
  justify-content: center;
}
.ctx-empty p {
  margin-inline: auto;
}

/* estreito: uma coluna só */
@media (max-width: 980px) {
  .journey {
    min-height: 0;
  }
  .journey-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .chat-body,
  .ctx-empty {
    min-height: 0;
  }
  /* alvo de toque maior que no desktop */
  .step-btn {
    padding: 12px 18px;
  }
}
/* sem pin por falta de ALTURA: as abas passam a ser clicadas em vez de
   dirigidas pelo scroll, mas o painel continua em duas colunas, foi a altura
   que faltou, não a largura. Só a amarração de 100svh sai.

   Os dois limites (540px em tela larga, 620px entre 981 e 1099px) estão
   escritos igual no `MQ.journey` do JS; a diferença entre eles é o cabeçalho,
   que quebra em duas linhas quando as abas não cabem ao lado do título. */
@media (max-height: 539px),
       (min-width: 981px) and (max-width: 1099px) and (max-height: 619px) {
  .journey {
    min-height: 0;
    padding-block: calc(var(--nav-h) + 20px) 40px;
  }
}

/* ---- telas baixas: tudo encolhe junto com a janela ----------------------
   A seção é presa e centrada, então o que não couber é cortado em cima e
   embaixo, e num notebook 1366×768 (viewport ~650px) ela media 669px onde
   havia 581. A conta de onde vinha o excesso: cabeçalho 223, painel 404, nota
   43. Aqui cada uma dessas três encolhe em `svh`, e a nota (uma linha de
   apoio) sai de cena, é o único pedaço que não faz falta. */
@media (min-width: 981px) and (max-height: 820px) {
  .journey {
    padding-block: calc(var(--nav-h) + clamp(10px, 2svh, 24px))
      clamp(14px, 3svh, 32px);
  }
  .journey-head {
    margin-bottom: clamp(10px, 2svh, 20px);
  }
  .journey-head h2 {
    font-size: clamp(1.2rem, min(2.4vw, 4svh), 2rem);
  }
  .chat-body,
  .ctx-empty {
    min-height: clamp(150px, 26svh, 230px);
  }
  .chat-body {
    padding: clamp(10px, 2svh, 18px);
    gap: clamp(8px, 1.6svh, 13px);
  }
  .journey .demo-bar {
    padding: clamp(9px, 1.8svh, 15px) clamp(12px, 2svh, 18px);
  }
  .journey .bubble {
    padding: clamp(7px, 1.4svh, 11px) clamp(10px, 1.6svh, 14px);
  }
  .journey .ctx-empty {
    padding: clamp(14px, 3svh, 24px);
  }
  .journey-panel {
    gap: clamp(10px, 1.2vw, 20px);
  }
}
@media (min-width: 981px) and (max-height: 720px) {
  /* a nota é rodapé da seção, não conteúdo dela */
  .journey > .wrap > .note {
    display: none;
  }
}
/* último aperto antes do piso: o painel tem um chão de conteúdo (as quatro
   bolhas da conversa), então aqui quem cede é o corpo de texto */
@media (min-width: 981px) and (max-height: 660px) {
  .journey .bubble {
    font-size: 0.89rem;
    line-height: 1.38;
  }
  .journey .bubble time {
    margin-top: 3px;
  }
  /* as quatro abas têm de caber na MESMA linha do título: quebrando para uma
     segunda linha o cabeçalho pula de 93px para 162px, e são esses 69px que
     decidem se a seção cabe presa numa janela de 560px */
  .journey .step-btn {
    padding: 7px 12px;
    font-size: 0.82rem;
  }
  .journey .steps-nav { gap: 7px; }
  .journey-head {
    gap: clamp(10px, 2svh, 18px);
  }
}
/* o último degrau, para a jornada alcançar o mesmo piso da §6.2 (520px) em
   tela larga: são ~20px de texto e respiro, e sem eles a seção estouraria por
   dois pixels, o que custaria o pin inteiro numa janela de 520px */
@media (min-width: 1100px) and (max-height: 570px) {
  .journey {
    padding-block: calc(var(--nav-h) + 8px) 12px;
  }
  .journey-head {
    margin-bottom: 8px;
  }
  .journey .bubble {
    font-size: 0.85rem;
  }
  .journey .chat-body {
    gap: 7px;
  }
  .journey .demo-bar {
    padding: 7px 12px;
  }
  .journey .avatar {
    width: 28px;
    height: 28px;
  }
  .journey .bubble time {
    margin-top: 2px;
    font-size: 0.68rem;
  }
}


/* ==========================================================================
   6.5  RECURSOS
   ========================================================================== */
.feats {
  background: var(--white);
}

/* --- vitrine do produto --------------------------------------------------
   A seção listava oito recursos sem nunca mostrar a tela de que fala. Duas
   capturas: a principal, larga, e uma menor que encosta na quina dela.

   A sobreposição é só do desktop. Abaixo de 981px a menor desce para o
   fluxo, porque encavalar duas imagens numa coluna estreita esconde
   justamente o que se quer mostrar. */
.shot {
  margin: 0 0 clamp(48px, 6vw, 84px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.shot-main,
.shot-aside {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream);
  box-shadow:
    0 1px 0 var(--line),
    0 34px 70px -38px rgba(19, 30, 43, 0.42);
}

/* barrinha de janela: dá escala de "isto é uma tela" sem desenhar um browser */
.shot-chrome {
  display: flex;
  gap: 6px;
  padding: 11px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.shot-chrome i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

/* As capturas ocupam a largura da moldura e mantêm a própria proporção, sem
   `aspect-ratio` e sem `object-fit`: a razão certa é a do arquivo, declarada
   nos atributos `width`/`height` da <img>. Fixar uma proporção aqui só
   serviria para cortar ou esticar a tela de alguém. */
.shot-main img,
.shot-aside img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 981px) {
  .shot {
    /* a coluna menor cresceu de 26% para 34%: com um bloco colorido de
       reserva 280px bastavam, mas a captura que entrou é um painel denso de
       dados, abaixo de ~400px ela vira textura em vez de informação */
    grid-template-columns: minmax(0, 1fr) clamp(260px, 34%, 430px);
    align-items: end;
    /* a coluna da direita existe só para reservar o espaço da sobreposição:
       a largura da principal encolhe, a menor cai por cima da quina */
    column-gap: clamp(20px, 3vw, 40px);
  }
  /* grid-row explícito nos DOIS. Sem ele a peça principal, que atravessa as
     duas colunas, não cabe na linha 1 (a coluna 2 já está ocupada) e o
     autoposicionamento a joga para a linha 2, a menor ia parar acima dela,
     em vez de na quina de baixo. */
  .shot-main {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .shot-aside {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    /* desce para fora da moldura principal; o margin-bottom negativo é o que
       cria a sobreposição sem tirar a peça do fluxo do grid */
    margin-bottom: clamp(-72px, -5vw, -40px);
    margin-right: clamp(-16px, -1.5vw, -8px);
  }
  /* a folga embaixo compensa o quanto a peça menor desceu */
  .shot {
    margin-bottom: clamp(96px, 9vw, 140px);
  }
}

/* Empilhado, a menor não pode ocupar a largura inteira: em 4:3 contra 16:10
   na mesma largura ela ficaria MAIS ALTA que a principal e inverteria a
   hierarquia. Encolhe e encosta à direita, mantendo a ideia de peça solta. */
@media (max-width: 980px) {
  .shot {
    gap: clamp(16px, 3vw, 28px);
  }
  .shot-aside {
    width: min(88%, 460px);
    justify-self: end;
  }
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.feat {
  position: relative;
  padding-top: 18px;
}
.feat .rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform-origin: left center;
}
.feat:nth-child(3n + 2) .rule {
  background: var(--coral);
}
.feat:nth-child(3n + 3) .rule {
  background: var(--pink);
}
.feat h3 {
  margin-bottom: 9px;
}
.feat p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-70);
}

@media (max-width: 1100px) {
  .feat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .feat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   6.6  PLANOS
   ========================================================================== */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plan.is-featured {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 30px 60px -34px rgba(19, 30, 43, 0.55);
}
.plan.is-featured > p,
.plan.is-featured .plan-list li {
  color: rgba(255, 255, 255, 0.74);
}
.plan.is-featured .plan-kicker {
  color: var(--amber);
}

.plan-badge {
  position: absolute;
  top: 0;
  right: clamp(26px, 2.6vw, 36px);
  transform: translateY(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--flow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.plan-kicker {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--pink-txt);
}
.plan h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.028em;
}
.plan > p {
  font-size: 0.97rem;
  color: var(--ink-70);
}

.plan-list {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  align-content: start;
}
.plan-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-70);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flow);
}
.plan .btn {
  width: 100%;
}

.plan-foot {
  margin-top: clamp(28px, 3vw, 42px);
  max-width: 80ch;
}

@media (max-width: 980px) {
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}

/* ==========================================================================
   6.7  IMPLANTAÇÃO
   ========================================================================== */
/* A arte de linhas (bg-lines.png) saiu: ela sangrava pela direita sem
   relacao com a grade das etapas e destoava do resto da pagina.
   O arquivo continua em assets/img/ caso o Design queira reposiciona-la. */
.steps {
  position: relative;
  background: var(--cream-2);
  overflow: clip;
}
.steps > .wrap {
  position: relative;
  z-index: 1;
}

.steps-track {
  position: relative;
}
.steps-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.steps-line {
  position: absolute;
  left: 22px;
  right: 0;
  top: 21px;
  height: 2px;
  background: var(--flow);
  z-index: 0;
  /* a faixa cobre as 5 colunas, então a cauda depois do último círculo
     dissolve em vez de terminar no vazio */
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}
.step {
  position: relative;
  z-index: 1;
}
.step .num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  /* fundo sólido para mascarar a linha que passa atrás */
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  margin-bottom: 8px;
}
.step p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-70);
}

@media (max-width: 900px) {
  .steps-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-left: 64px;
  }
  .steps-line {
    left: 21px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  }
  .step .num {
    position: absolute;
    left: -64px;
    top: -2px;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   6.8  OBJEÇÕES
   ========================================================================== */
/* A lista vai ate o limite da grade, como todas as outras secoes. Tinha um
   teto de 820px que a deixava curta em relacao ao resto da pagina, com o sinal
   de mais parando no meio do nada. Quem continua com medida de leitura e o
   texto da resposta (68ch, abaixo), que e o unico trecho longo aqui. */
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
/* O ícone é feito de DOIS pseudós: o ::after traz o disco e a barra deitada
   (que nunca gira), o ::before traz só a barra em pé, que gira 90° ao abrir e
   pousa sobre a outra, um menos reto.
   Antes o sinal inteiro girava 45° e a barra deitada ia junto, deixando o
   menos torto. Girar uma camada de background isolada não dá; daí os dois. */
.faq-item summary {
  position: relative;
}
.faq-item summary::after,
.faq-item summary::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  transition: transform 0.22s ease;
}
.faq-item summary::after {
  margin-left: auto;
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat,
    var(--cream-2);
}
.faq-item summary::before {
  position: absolute;
  right: 0;
  top: 22px; /* = padding-block do summary */
  background: linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px
    no-repeat;
  z-index: 1;
}
.faq-item[open] summary::before {
  transform: rotate(90deg);
}
.faq-item .ans {
  overflow: hidden;
}
.faq-item .ans p {
  padding-bottom: 24px;
  color: var(--ink-70);
  max-width: 68ch;
}

/* ==========================================================================
   6.9  CONVITE
   ========================================================================== */
.invite {
  position: relative;
  padding-block: clamp(80px, 10vw, 150px);
  background: var(--flow); /* base, caso a arte não carregue */
  overflow: clip;
}
.invite-art {
  position: absolute;
  top: -12%;
  left: -4%;
  width: 108%;
  /* sem isto o reset img{max-width:100%} trava a largura em 100% e sobra
     uma faixa do gradiente-base na direita */
  max-width: none;
  height: 124%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.invite > .wrap {
  position: relative;
  z-index: 2;
}

/* O gradiente da marca não sustenta texto corrido: branco reprova nos stops
   claros, ink reprova nos escuros. O conteúdo vive num cartão ink. */
.invite-card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--white);
  text-align: center;
  box-shadow: 0 40px 80px -40px rgba(19, 30, 43, 0.6);
}
.invite-card h2 {
  margin-bottom: 18px;
}
.invite-card p {
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.74);
  max-width: 48ch;
}
.invite-card .btn {
  margin-bottom: 30px;
}
.invite-close {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   6.10  RODAPÉ
   ========================================================================== */
.foot {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: calc(
    clamp(28px, 3vw, 40px) + env(safe-area-inset-bottom, 0px)
  );
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.foot-brand img {
  height: 38px;
  width: auto;
  margin-bottom: 14px;
}
.foot-brand p {
  font-size: 0.93rem;
  max-width: 34ch;
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
}
.foot-nav a {
  font-size: 0.93rem;
  font-weight: 500;
}
.foot-nav a:hover {
  color: var(--white);
}
.foot-legal {
  padding-top: 26px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  max-width: 96ch;
}