/* ==========================================================================
   Programe Studio · página de vendas
   Composição sobre tokens.css e components.css. Aqui entra só o que a LP
   não tem: player da VSL, mapa do problema, fluxo do mecanismo, provas,
   planos e placeholder de mídia. Tudo lê os tokens.

   Estrutura em atos, não em seções iguais:
   gancho (claro) · problema (escuro) · virada (claro) ·
   Ely e provas (escuro) · oferta (escuro) · objeções (claro) ·
   fechamento (escuro).
   Dentro de cada ato, --beat separa os momentos e --beat-sm aproxima o
   que pertence ao mesmo momento.
   ========================================================================== */

:root {
  /* Grid da página: 1280px (o DS usa 1136px na LP) */
  --container: 1280px;
  --beat: clamp(var(--space-20), 6vw + 32px, var(--space-32));
  --beat-sm: clamp(var(--space-10), 3vw + 24px, var(--space-16));
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Quebra de linha editorial: só vale onde a linha inteira cabe.
   Abaixo disso o texto quebra sozinho. */
.br-wide { display: none; }

@media (min-width: 1100px) {
  .br-wide { display: inline; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.cta-row--center { justify-content: center; }

/* ---------- Navegação ----------
   Só a marca, centralizada. A aba fica sobre a hero e, depois da primeira
   rolagem, vira pílula solta do topo (mesmo comportamento da LP). */

.nav--sales { margin-bottom: -72px; }

/* Fechada (na hero): aba do tamanho do logo. Aberta (depois da hero): a
   barra cresce até a largura da LP e mostra os pontos de controle. O
   conteúdo mora em .nav__inner, que corta o que ainda não cabe; as curvas
   da aba ficam em .nav__bar e não são cortadas. */
.nav--sales .nav__bar {
  --nav-closed: 284px;
  width: var(--nav-closed);
  padding: 0;
  transition:
    width 600ms var(--ease-out),
    transform var(--dur-switch) var(--ease-out),
    border-radius var(--dur-switch) var(--ease-out);
}

.nav--sales.is-open .nav__bar {
  width: min(100% - 2 * var(--fillet) - 2 * var(--gutter), 1100px);
}

.nav__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding: 0 var(--space-4) 0 40px;
  overflow: hidden;
  border-radius: inherit;
  transition: padding 600ms var(--ease-out);
}

.nav--sales.is-open .nav__inner { padding-left: var(--space-8); }

.nav--sales .nav__logo img { height: 34px; }

.nav--sales .nav__links { gap: var(--space-6); }
.nav--sales .nav__link { white-space: nowrap; }

/* Hover dos pontos: o mesmo do crédito BROUD no rodapé (.credit__label).
   O nome e uma cópia clara ficam empilhados numa janela de uma linha; no
   hover os dois sobem juntos e a cópia toma o lugar. A cópia é conteúdo
   gerado com texto alternativo vazio, para o leitor de tela não ler duas
   vezes. */
.nav__roll {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
}

.nav__roll > span,
.nav__roll::after {
  display: block;
  transition: translate 500ms var(--ease-out);
}

.nav__roll::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--text-primary);
}

@media (hover: hover) {
  .nav__link:is(:hover, :focus-visible) .nav__roll > span,
  .nav__link:is(:hover, :focus-visible) .nav__roll::after {
    translate: 0 -100%;
    transition-delay: 40ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__roll > span,
  .nav__roll::after { transition-duration: 0.01ms; transition-delay: 0s !important; }
}

/* Capítulo da vez: o mesmo filete dourado da LP, colado na base da barra.
   O DS só pinta [aria-current="page"]; aqui o script marca "true", porque
   são seções da mesma página. O filete abre do centro ao mudar de ponto. */
.nav--sales .nav__link[aria-current="true"] { color: var(--text-primary); }

.nav--sales .nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  box-shadow: 0 -2px 10px rgb(255 215 0 / 0.45);
  transform: translateX(-50%);
  animation: nav-mark 420ms var(--ease-out);
}

@keyframes nav-mark {
  from { scale: 0 1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav--sales .nav__link[aria-current="true"]::after { animation: none; }
}

.nav--sales [data-nav-hide] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 240ms var(--ease-out),
    visibility 0s 240ms;
}

.nav--sales.is-open [data-nav-hide] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms var(--ease-out) 220ms,
    visibility 0s;
}

.nav--sales .nav__bar::before,
.nav--sales .nav__bar::after {
  transition: opacity var(--dur-press) var(--ease-out);
}

.nav--sales[data-scrolled] .nav__bar {
  border-radius: var(--fillet);
  transform: translateY(10px);
}

.nav--sales[data-scrolled] .nav__bar::before,
.nav--sales[data-scrolled] .nav__bar::after {
  opacity: 0;
}

/* Entre 960 e 1100 a barra aberta não comporta logo + seis pontos + botão
   (pede ~916px): aperta logo, espaços e texto em vez de cortar o botão */
@media (min-width: 960px) and (max-width: 1099px) {
  .nav--sales .nav__bar { --nav-closed: 232px; }
  .nav__inner { gap: var(--space-4); padding-left: var(--space-8); }
  .nav--sales .nav__logo img { height: 28px; }
  .nav--sales .nav__links { gap: var(--space-4); }
  .nav--sales .nav__link { font-size: 13px; }
}

@media (max-width: 959px) {
  .nav--sales { margin-bottom: -60px; }
  .nav--sales .nav__bar { --nav-closed: 232px; }
  .nav__inner { padding-left: var(--space-8); }
  .nav--sales .nav__logo img { height: 28px; }
}

/* No celular a aba não abre: o logo basta e não há espaço para mais */
@media (max-width: 559px) {
  .nav--sales.is-open .nav__bar { width: var(--nav-closed); }
  .nav--sales [data-nav-hide] { display: none; }
}

/* ---------- Botões: hover que troca a cor ----------
   Uma tinta sobe de baixo e cobre o botão (referência: lpage.stayai.space).
   A tinta é o inverso do fundo, para o botão saltar: no escuro ele fica
   branco, no claro (.theme-light) fica preto. Texto e círculo invertem junto.
   Fica nesta página porque a LP principal está congelada; por isso repete
   as camadas do .btn do DS (borda gleam) com a tinta por cima. */
.btn--primary,
.btn--ghost {
  background-image:
    var(--wipe-fill),
    var(--gleam-fill),
    conic-gradient(
      from calc(var(--gleam-angle) - var(--gleam-offset)),
      transparent,
      var(--gleam-accent) var(--gleam-arc),
      var(--gleam-shine) calc(var(--gleam-arc) * 2),
      var(--gleam-accent) calc(var(--gleam-arc) * 3),
      transparent calc(var(--gleam-arc) * 4)
    ),
    linear-gradient(var(--gleam-edge), var(--gleam-edge));
  background-origin: padding-box, padding-box, border-box, border-box;
  background-clip: padding-box, padding-box, border-box, border-box;
  background-position: 50% 100%, 0 0, 0 0, 0 0;
  background-size: 100% 0%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-size 450ms cubic-bezier(0.65, 0, 0.35, 1),
    color 300ms ease 100ms,
    --gleam-offset var(--gleam-ease),
    --gleam-arc var(--gleam-ease),
    --gleam-shine var(--gleam-ease),
    --gleam-glow var(--gleam-ease);
}

/* No escuro: tinta branca, texto e círculo pretos */
.btn--primary,
.btn--ghost {
  --wipe-fill: linear-gradient(180deg, var(--porcelain-0), var(--porcelain-150));
  --wipe-ink: var(--ink-950);
  --wipe-icon-bg: var(--ink-950);
  --wipe-icon-fg: var(--gold-500);
  --gleam-glow-color: rgb(255 199 0 / 0.3);
}

/* No claro: tinta preta, texto branco e círculo dourado */
.theme-light .btn--primary,
.theme-light .btn--ghost {
  --wipe-fill: linear-gradient(180deg, var(--ink-700), var(--ink-950));
  --wipe-ink: var(--porcelain-0);
  --wipe-icon-bg: var(--gold-500);
  --wipe-icon-fg: var(--gold-ink);
  --gleam-glow-color: rgb(255 199 0 / 0.4);
}

.btn--primary .btn__icon,
.btn--ghost .btn__icon {
  transition:
    transform var(--dur-switch) var(--ease-out),
    background-color 300ms ease 100ms,
    color 300ms ease 100ms;
}

.btn:is(.btn--primary, .btn--ghost):focus-visible {
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  color: var(--wipe-ink);
}

.btn:is(.btn--primary, .btn--ghost):focus-visible .btn__icon {
  background-color: var(--wipe-icon-bg);
  color: var(--wipe-icon-fg);
}

@media (hover: hover) {
  .btn:is(.btn--primary, .btn--ghost):hover {
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    color: var(--wipe-ink);
  }

  .btn:is(.btn--primary, .btn--ghost):hover .btn__icon {
    background-color: var(--wipe-icon-bg);
    color: var(--wipe-icon-fg);
  }

  /* O reflexo branco do gleam acinzentava o preto */
  .theme-light .btn:is(.btn--primary, .btn--ghost):hover {
    --gleam-sheen-opacity: 0.12;
  }
}

/* ---------- Painéis claros ----------
   As seções claras viram painéis arredondados, recuados das bordas, sobre o
   fundo escuro da página (mesmo gesto do site da Alliance). Ao entrar na
   tela o painel cresce de 92% para 100%, preso pelo topo: um zoom-in guiado
   pela rolagem. Sem suporte a scroll-driven animation, fica parado e inteiro. */

:root {
  --panel-gap: clamp(8px, 0.8vw + 4px, 16px);
  --panel-radius: clamp(20px, 0.8vw + 16px, 28px);
}

body { background: var(--ink-950); }

.section.theme-light {
  margin-inline: var(--panel-gap);
  border-radius: var(--panel-radius);
}

/* A hero também é um painel recortado do fundo da página */
.hero {
  margin: var(--panel-gap) var(--panel-gap) 0;
  border-radius: var(--panel-radius);
  isolation: isolate;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section.theme-light:not(.hero) {
      transform-origin: 50% 0;
      animation: panel-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes panel-zoom {
  from { scale: 0.92; }
  to { scale: 1; }
}

/* A hero já nasce na tela: o zoom acontece no carregamento */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    transform-origin: 50% 0;
    animation: panel-intro 1.6s var(--ease-out) both;
  }
}

@keyframes panel-intro {
  from { scale: 0.94; opacity: 0.6; }
}

/* ---------- Gancho ---------- */

.hero {
  padding-top: calc(72px + clamp(var(--space-12), 4vw + 32px, var(--space-24)));
  text-align: center;
}

/* Uns 15% abaixo do .h1 do DS: a frase é longa e o .h1 cheio pesava. */
.hero__title {
  max-width: 920px;
  margin-inline: auto;
  font-size: clamp(34px, 1.95vw + 26.35px, 54px);
}

.hero__lead {
  max-width: 620px;
  margin: var(--space-6) auto 0;
}

/* Desktop: título e lead em duas linhas, quebradas nos .br-wide. O título
   passa um pouco do container e a fonte cede só o necessário para a linha
   mais longa (~18.8em) caber. */
@media (min-width: 1100px) {
  .hero__title {
    --hero-title-w: min(1240px, 100vw - 2 * var(--panel-gap) - 2 * var(--gutter));
    width: var(--hero-title-w);
    max-width: none;
    margin-inline: calc((100% - var(--hero-title-w)) / 2);
    font-size: min(54px, var(--hero-title-w) / 19.4);
  }

  .hero__lead { max-width: 860px; }
}

.hero__vsl {
  max-width: 960px;
  margin: var(--space-12) auto 0;
}

/* O player cresce de leve conforme a página desce e para no tamanho maior
   quando chega perto do meio da tela. Fica no invólucro porque a entrada
   do .reveal (reveal.js) troca a animation do próprio player. */
.hero__stage { --vsl-zoom: 1.08; }

/* Abaixo disso o player já ocupa o container todo: cresce menos para não
   encostar na borda do painel */
@media (max-width: 1099px) {
  .hero__stage { --vsl-zoom: 1.03; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__stage {
      animation: vsl-zoom linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
  }
}

@keyframes vsl-zoom {
  to { scale: var(--vsl-zoom); }
}

/* Faixa de código do Figma atrás do player: centrada nele e da largura do
   painel, com o brilho dourado das elipses correndo por trás */
.hero__stage { position: relative; }

.hero__stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vw - 2 * var(--panel-gap));
  height: 180px;
  translate: -50% -50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(255 215 0 / 0.2), transparent);
  pointer-events: none;
}

.glyph-field.hero__code {
  --glyph-gold: var(--gold-700);
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(100vw - 2 * var(--panel-gap));
  height: 144px;
  translate: -50% -50%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__stage::before,
  .hero__code { animation: fade-in 1.2s var(--ease-out) 0.6s both; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* VSL vertical (9:16) dentro de um mockup de iPhone, de pé sobre a faixa
   de código, que engrossa para acompanhar a altura dele. Aro de titânio
   na borda, moldura preta no padding e a tela é o próprio .vsl. */
.phone {
  --phone-w: clamp(280px, 18vw + 120px, 360px);
  --phone-rim: 4px;
  --phone-bezel: calc(var(--phone-w) * 0.032);
  --phone-r: calc(var(--phone-w) * 0.16);
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--phone-w);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  padding: var(--phone-bezel);
  border: var(--phone-rim) solid transparent;
  border-radius: var(--phone-r);
  background:
    linear-gradient(#050506, #050506) padding-box,
    linear-gradient(145deg, #9c9ca2, #2a2a2e 22%, #6e6e74 48%, #1f1f22 72%, #a4a4aa) border-box;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 0 1px rgb(0 0 0 / 0.55),
    var(--fx-surface-float);
}

/* Botões laterais: ação e volume à esquerda, power à direita */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4a4a4f, #8d8d93);
}

.phone::before {
  left: calc(-1 * var(--phone-rim) - 3px);
  top: 16%;
  height: 5%;
  border-radius: 2px 0 0 2px;
  box-shadow:
    0 calc(var(--phone-w) * 0.2) 0 0 #6a6a70,
    0 calc(var(--phone-w) * 0.35) 0 0 #6a6a70;
}

.phone::after {
  right: calc(-1 * var(--phone-rim) - 3px);
  top: 26%;
  height: 12%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #4a4a4f, #8d8d93);
}

/* Dynamic Island: por cima do vídeo, mas sem pegar o clique */
.phone__island {
  position: absolute;
  z-index: 2;
  top: calc(var(--phone-bezel) + var(--phone-w) * 0.03);
  left: 50%;
  width: 31%;
  height: calc(var(--phone-w) * 0.085);
  translate: -50% 0;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 82% 50%, #1b2440 0 9%, #0c0f1a 13%, transparent 15%),
    #000;
  pointer-events: none;
}

/* Com .vsl junto para vencer o 16:9 e o raio do player, que vêm depois.
   O aparelho inteiro é 9:16 e a tela ocupa o que sobra dentro da moldura. */
.vsl.phone__screen {
  flex: 1;
  width: 100%;
  aspect-ratio: auto;
  border-radius: calc(var(--phone-r) - var(--phone-rim) - var(--phone-bezel));
  box-shadow: none;
}

/* No celular, proporção de iPhone de verdade (tela ~19.5:9) em vez do 9:16 */
@media (max-width: 639px) {
  .phone { aspect-ratio: auto; }
  .vsl.phone__screen { flex: none; aspect-ratio: 9 / 18.5; }
}

.hero__stage { --vsl-zoom: 1.04; }

.hero__stage::before { height: 320px; }
.glyph-field.hero__code { height: 260px; }

.hero__vsl .vsl__label { max-width: 18ch; }

/* O player cresce até 8% com a rolagem e come parte desse respiro */
.hero__cta {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  margin-top: clamp(var(--space-12), 4vw + 24px, var(--space-20));
}

/* Selos: uma cápsula de vidro baixa sob o CTA, por cima dos raios. Texto
   pequeno e cinza, só a palavra-chave em tinta: lê de passagem sem
   disputar com o título. Os ícones acendem uma vez, em fila, depois da
   entrada. */
.trust {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--bevel-top), var(--stroke-in-light), var(--elev-1);
}

.trust li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 18px 2px 2px;
  font: var(--weight-medium) 13px/1.35 var(--font-sans);
  color: var(--text-secondary);
}

.trust li + li { padding-left: 18px; }

.trust li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 16px;
  translate: 0 -50%;
  background: var(--border-divider);
}

.trust strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.trust__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-accent);
  box-shadow: var(--fx-accent);
  color: var(--icon-accent);
}

.trust__icon svg {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .trust__icon { animation: trust-lit 1s var(--ease-out) both; }
  .trust li:nth-child(1) .trust__icon { animation-delay: 1.5s; }
  .trust li:nth-child(2) .trust__icon { animation-delay: 1.68s; }
  .trust li:nth-child(3) .trust__icon { animation-delay: 1.86s; }
}

@keyframes trust-lit {
  0% { box-shadow: var(--fx-accent), 0 0 0 0 rgb(255 215 0 / 0.55); }
  30% { background: var(--gold-200); }
  100% { box-shadow: var(--fx-accent), 0 0 0 8px rgb(255 215 0 / 0); }
}

/* Os três não cabem numa linha: viram uma lista curta, com divisória deitada */
@media (max-width: 879px) {
  .trust {
    flex-direction: column;
    align-items: stretch;
    padding: 4px var(--space-4);
    border-radius: var(--radius-lg);
    text-align: left;
  }

  .trust li,
  .trust li + li { padding: 10px 0; }

  .trust li + li::before {
    top: 0;
    left: 36px;
    right: 0;
    width: auto;
    height: 1px;
    translate: none;
  }
}

/* ---------- Player de vídeo ----------
   Sempre escuro. O iframe só entra no clique (ver script da página). */

.vsl {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gradient-forge);
  box-shadow: var(--fx-surface-float);
}

.vsl.has-poster {
  background: #000 var(--poster) center / cover no-repeat;
}

.vsl.has-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.38);
  pointer-events: none;
}

.vsl--demo {
  max-width: 960px;
  margin: var(--beat-sm) auto 0;
}

.vsl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  mask: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  pointer-events: none;
}

.vsl.has-poster::before {
  opacity: 0.35;
}

.vsl iframe,
.vsl video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

.vsl__play {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.vsl__btn {
  display: grid;
  place-items: center;
  width: clamp(64px, 4vw + 48px, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--on-brand);
  box-shadow:
    0 0 0 1px rgb(255 215 0 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.62),
    inset 0 -1px 0 rgb(122 90 0 / 0.38),
    var(--glow-brand);
  transition: transform var(--dur-switch) var(--ease-out);
}

.vsl__btn svg {
  width: 36%;
  height: 36%;
  margin-left: 6%;
  fill: currentColor;
}

.vsl__label {
  max-width: 32ch;
  font: var(--weight-medium) 13px/1.4 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.vsl__play:active .vsl__btn { transform: scale(0.96); }

@media (hover: hover) {
  .vsl__play:hover .vsl__btn { transform: scale(1.05); }
  .vsl__play:hover { color: var(--text-primary); }
}

/* ---------- Placeholder de mídia ----------
   Marca o lugar de print e foto que o cliente ainda vai enviar. */

.ph {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  aspect-ratio: var(--ratio, 16 / 10);
  padding: var(--space-6);
  border: 1px dashed var(--border-dashed);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-tertiary);
  text-align: center;
}

.ph svg {
  width: 24px;
  height: 24px;
}

.ph__label {
  font: var(--weight-medium) 12px/1.4 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ph--fill {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

/* Hexágono com ícone no lugar do número (passos do mecanismo) */
.badge-hex--icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* ---------- Fundo da hero ----------
   O fundo do Figma (2068:59) passado para o claro: molduras chanfradas em
   tinta no topo, raios dourados descendo até um astro que nasce no pé do
   painel. Tudo mede em --u, um pixel do quadro de 1920 do Figma, que não
   encolhe abaixo de 1000px para o desenho não virar miniatura no celular.
   O astro fica preso ao pé da hero e aparece --dome acima dele. */

.hero {
  --u: calc(max(100vw - 2 * var(--panel-gap), 1000px) / 1920);
  --dome: calc(150 * var(--u));
  padding-bottom: calc(var(--dome) + var(--space-16));
}

.halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.halo__frames,
.halo__rays {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  background: center / 100% 100% no-repeat;
}

/* O eixo das molduras (y=1100 do desenho) passa no meio do título. O script
   mede esse meio em --hero-axis, porque o título cresce em px e o desenho em
   --u; sem script fica na altura do Figma (238u). */
.halo__frames {
  top: calc(var(--hero-axis, 238 * var(--u)) - 1100 * var(--u));
  width: calc(4610 * var(--u));
  height: calc(2200 * var(--u));
  background-image: url("assets/hero-frames.svg");
}

/* No celular só os lados retos das molduras cabem: viram riscos cortando o texto */
@media (max-width: 639px) {
  .halo__frames { display: none; }
}

/* O topo do astro fica em y=1609 do desenho (2279.5 de altura) */
.halo__rays {
  bottom: calc(var(--dome) - 670.5 * var(--u));
  width: calc(2154 * var(--u));
  height: calc(2279.5 * var(--u));
  background-image: url("assets/hero-rays.svg");
}

/* Luz correndo pela borda (tag da hero e plano recomendado) */
@property --streak-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.streak { position: relative; isolation: isolate; }

.streak::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--streak-angle), transparent 0deg, transparent 250deg, var(--gold-600) 320deg, var(--gold-100) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: streak-spin 3.2s linear infinite;
}

@keyframes streak-spin {
  to { --streak-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .streak::before { animation: none; }
}

/* ---------- Picos ----------
   Três frases carregam a página: memória como infraestrutura, saber o
   negócio vale mais que código, o custo que você já paga. Tamanho e
   espaço fazem o destaque; nada de moldura. */

/* Escala da página: três títulos (64 só no hero e na resposta, 44 em todo
   título de seção e pico, 24 em card) e dois textos (18 fora de card, 15
   dentro). Os títulos soltos repetem as medidas do .h1/.h2 do design system. */
:root {
  --title-display: var(--weight-medium) clamp(40px, 2.29vw + 31px, 64px) / 1.04 var(--font-display);
  --title-section: var(--weight-medium) clamp(34px, 0.95vw + 30.3px, 44px) / 1.06 var(--font-display);
  --text-lead: var(--weight-regular) clamp(16px, 0.19vw + 15.3px, 18px) / 1.6 var(--font-sans);
}

.statement {
  max-width: 900px;
  margin-top: var(--beat);
}

.statement--center {
  margin-inline: auto;
  text-align: center;
}

.statement__lead {
  font: var(--text-lead);
  color: var(--text-tertiary);
  text-wrap: balance;
}

.statement__punch {
  margin-top: var(--space-4);
  font: var(--title-section);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}

.statement__punch:first-child { margin-top: 0; }

/* Trecho de abertura em tom apagado, dentro da mesma frase */
.statement__punch span { color: var(--text-tertiary); }

/* Preenchimento no scroll ([data-fill], script da página): a abertura fica
   acesa e o resto nasce apagado, acendendo palavra por palavra (--f vai de
   0 a 1). Sem script ou com movimento reduzido, tudo aceso. */
[data-fill] .fill__lead { color: var(--text-primary); }
[data-fill] [data-fill-run] { color: var(--text-primary); }
[data-fill] .fill__w:not(.mark, .grad) { color: inherit; }

.is-filling .fill__w {
  opacity: calc(0.28 + 0.72 * var(--f, 0));
}

/* Pico em par: o contexto em lead e a virada logo abaixo, centrados e
   próximos. */
.statement--pair {
  max-width: 900px;
  margin-top: var(--beat-sm);
}

.statement--pair .lead {
  max-width: 700px;
  margin-inline: auto;
  text-wrap: balance;
}

/* Palavra-chave dentro de subtexto: semibold na cor principal
   (branco nos atos escuros, tinta nos painéis claros) */
:is(.lead, .body, .plan__for, .statement__lead, .faq__a) strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.statement--pair .statement__punch { margin-top: var(--space-8); }

/* Pico em nota: um parágrafo só, um tom acima do texto dos cards, perto
   deles e do botão que vem logo depois. Tem a largura da grade dos dois
   cards logo acima (.assure__grid, 960px) e a linha corre até as bordas
   deles: sem balance, que encurtaria as linhas; o pretty só evita viúva. */
.statement--note {
  max-width: 960px;
  margin-top: var(--space-12);
}

.statement--note .statement__lead { text-wrap: pretty; }

.statement--note + .cta-row { margin-top: var(--space-8); }

/* Desktop: o lead quebra uma frase por linha nos .br-wide; a virada fica
   em 900px e o balance divide. */
@media (min-width: 1100px) {
  .statement--pair { max-width: none; }
  .statement--pair .lead { max-width: none; }
  .statement--pair .statement__punch {
    max-width: 900px;
    margin-inline: auto;
  }
}

.act__break {
  display: block;
  margin-block: var(--beat);
}

.act__break .divider { width: 100%; }

/* Entrada do divisor: o selo surge girando e acende, um anel sai dele, e a
   luz corre para os dois lados desenhando o trilho até sumir nas pontas.
   Roda uma vez, quando ele chega na tela ([data-play]); o reveal.js pula
   o .act__break. --reach é quanto do trilho, a partir do meio, já foi
   desenhado: o cometa vai na frente e o recorte acompanha. */
@property --reach {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 62%;
}

.act__break .divider::before {
  background:
    linear-gradient(90deg,
      transparent calc(50% - var(--reach)),
      var(--gold-100) calc(50% - var(--reach)),
      transparent calc(50% - var(--reach) + 180px),
      transparent calc(50% + var(--reach) - 180px),
      var(--gold-100) calc(50% + var(--reach)),
      transparent calc(50% + var(--reach))),
    var(--divider-track);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  clip-path: inset(0 max(0%, 50% - var(--reach)));
  animation: divider-reach 1.5s cubic-bezier(0.5, 0, 0.2, 1) 0.35s backwards;
}

.act__break .divider::after {
  transform: none;
  translate: -50% 0;
  animation: divider-segment 1.1s var(--ease-out) 0.3s backwards;
}

.act__break .divider__orb {
  animation:
    divider-orb 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    divider-fade 0.5s var(--ease-out) backwards,
    divider-bloom 1.8s var(--ease-out) 0.15s backwards;
}

.act__break .divider__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.6);
  opacity: 0;
  pointer-events: none;
  animation: divider-ping 1.2s var(--ease-out) 0.35s;
}

.act__break .divider__orb img {
  animation: divider-mark 1.1s var(--ease-out) 0.1s backwards;
}

/* Anel em volta do selo: um aro fino e apagado com um arco de luz que
   gira sem parar. Entra depois do estalo do selo. */
@property --orb-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.act__break .divider__orb::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background:
    conic-gradient(from var(--orb-a), transparent 0deg, rgb(255 215 0 / 0.95) 70deg, transparent 110deg),
    rgb(255 215 0 / 0.16);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 4px rgb(255 215 0 / 0.6));
  pointer-events: none;
  animation:
    orb-ring-in 0.8s var(--ease-out) 1s backwards,
    orb-ring-spin 3.2s linear infinite;
}

.act__break--enter .divider__orb::before { animation-delay: 1.45s, 0s; }

/* No painel claro o amarelo puro some no porcelana: anel, arco e trilho
   descem para o ouro escuro */
.theme-light .act__break .divider__orb::before {
  background:
    conic-gradient(from var(--orb-a), transparent 0deg, var(--gold-700) 70deg, transparent 110deg),
    rgb(204 154 0 / 0.3);
  filter: drop-shadow(0 0 3px rgb(204 154 0 / 0.4));
}

.theme-light .act__break .divider::after { background: var(--gold-700); }

.theme-light .act__break .divider::before {
  background:
    linear-gradient(90deg,
      transparent calc(50% - var(--reach)),
      var(--gold-700) calc(50% - var(--reach)),
      transparent calc(50% - var(--reach) + 180px),
      transparent calc(50% + var(--reach) - 180px),
      var(--gold-700) calc(50% + var(--reach)),
      transparent calc(50% + var(--reach))),
    var(--divider-track);
}

.theme-light .act__break .divider__orb::after { box-shadow: 0 0 0 1px var(--gold-700); }

@keyframes orb-ring-in {
  from { opacity: 0; scale: 0.6; }
}

@keyframes orb-ring-spin {
  to { --orb-a: 360deg; }
}

.act__break:not(.is-playing) .divider::before,
.act__break:not(.is-playing) .divider::after,
.act__break:not(.is-playing) .divider__orb::after {
  animation-play-state: paused;
}

@keyframes divider-reach {
  from { --reach: 0%; }
}

@keyframes divider-segment {
  from { scale: 0 1; box-shadow: 0 0 14px 1px rgb(255 215 0 / 0.8); }
  50% { box-shadow: 0 0 14px 1px rgb(255 215 0 / 0.8); }
}

@keyframes divider-orb {
  from { scale: 0.3; }
}

@keyframes divider-fade {
  from { opacity: 0; filter: blur(6px); }
}

@keyframes divider-bloom {
  from { box-shadow: 0 12px 48px rgb(255 199 0 / 0), var(--stroke-in-dark); }
  35% { box-shadow: 0 8px 96px 8px rgb(255 199 0 / 0.6), var(--stroke-in-dark); }
}

@keyframes divider-ping {
  from { opacity: 1; scale: 1; }
  to { opacity: 0; scale: 2.8; }
}

@keyframes divider-mark {
  from { opacity: 0; scale: 0.4; rotate: -180deg; }
}

@media (prefers-reduced-motion: reduce) {
  .act__break .divider::before,
  .act__break .divider::after,
  .act__break .divider__orb::after,
  .act__break .divider__orb::before {
    animation: none;
  }
}

/* Variante de entrada (topo do Problema): antes do selo, um fio de luz cai
   do alto até ele; o selo acende quando a luz chega, o trilho abre para os
   lados e um fio mais curto desce até a pergunta. Mesmas peças do
   .act__break, com os tempos empurrados para depois da queda. */
.act__break--enter {
  display: grid;
  justify-items: center;
  margin-block: calc(-1 * var(--space-8)) var(--space-10);
}

.divider__drop,
.divider__stem {
  width: 2px;
  transform-origin: top;
}

.divider__drop {
  position: relative;
  height: clamp(72px, 6vw + 40px, 128px);
  margin-bottom: -12px;
  background: linear-gradient(to bottom, transparent, rgb(255 215 0 / 0.35) 45%, var(--gold-300));
  animation: drop-fall 0.6s cubic-bezier(0.55, 0, 0.8, 0.2) both;
}

/* A cabeça da luz: um ponto brilhante que desce na frente do fio */
.divider__drop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--gold-50);
  box-shadow: 0 0 12px 3px rgb(255 215 0 / 0.8);
  animation: drop-head 0.75s ease-out both;
}

.divider__stem {
  width: 1px;
  height: 48px;
  margin-top: -12px;
  background: linear-gradient(to bottom, var(--gold-500), transparent);
  animation: drop-fall 0.7s var(--ease-out) 1.25s both;
}

@keyframes drop-fall {
  from { scale: 1 0; }
}

@keyframes drop-head {
  0% { opacity: 0; translate: 0 -100%; }
  20% { opacity: 1; }
  80% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}

.act__break--enter .divider__orb {
  animation-delay: 0.55s, 0.55s, 0.7s;
}

.act__break--enter .divider__orb img { animation-delay: 0.65s; }
.act__break--enter .divider__orb::after { animation-delay: 0.85s; }
.act__break--enter .divider::before { animation-delay: 0.85s; }
.act__break--enter .divider::after { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .divider__drop,
  .divider__drop::after,
  .divider__stem { animation: none; }
  .divider__drop::after { opacity: 0; }
}

/* ---------- Ato 1 · Problema ---------- */

/* A pergunta, as três condições e a resposta, tudo centralizado.
   Cada condição é um card com imagem de IA em cima (4:3) e a frase com
   quebra fixa embaixo (o que acontece / porque você...). Os cards acendem
   um a um e, depois do terceiro, a seleção cai em "cabeça.". */

.reveal-q { text-align: center; }

.reveal-q > .h2 {
  max-width: 22ch;
  margin-inline: auto;
}

.ifs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
  text-align: left;
}

/* Foto ocupando o card todo e o texto por cima, no pé, sobre um degradê
   escuro; o fio fino do card fica por cima da foto */
.ifs-card {
  position: relative;
  isolation: isolate;
  display: grid;
  /* clip e não hidden: hidden vira contêiner de rolagem e trava o view() da foto */
  overflow: clip;
  border-radius: var(--radius-xl);
  background: var(--surface-1);
}

.ifs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: var(--fx-surface);
  pointer-events: none;
}

.ifs-card__media {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 3.4;
  background: var(--surface-2);
}

.ifs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ifs-card__media .ph { border-radius: inherit; }

/* Zoom out: a foto chega ampliada e assenta no tamanho certo conforme o
   card entra na tela */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ifs-card__media img {
      animation: ifs-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }
  }
}

@keyframes ifs-zoom {
  from { scale: 1.28; }
  to { scale: 1; }
}

.ifs-card__text {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  padding: var(--space-16) var(--space-5) var(--space-6);
  text-align: center;
  background: linear-gradient(to top, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0.55) 55%, transparent);
  font: var(--weight-medium) clamp(18px, 0.38vw + 16.5px, 22px) / 1.3 var(--font-display);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

.ifs__what {
  display: block;
  color: var(--text-primary);
}

.ifs__why {
  display: block;
  color: var(--text-tertiary);
  transition: color var(--dur-enter) var(--ease-out);
}

.ifs-card.is-on .ifs__why { color: var(--text-marker); }

.reveal-q__then {
  margin-top: var(--space-16);
  font: var(--text-lead);
  color: var(--text-tertiary);
}

.reveal-q__answer {
  margin-top: var(--space-2);
  font: var(--title-display);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Com o script ligado, a seleção só cai em "cabeça." depois do terceiro
   card. Sem script (ou com movimento reduzido) ela já nasce no lugar. */
.reveal-q__answer .mark::before,
.reveal-q__answer .mark::after {
  transition:
    opacity var(--dur-switch) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}

.reveal-q.is-armed:not(.is-answered) .mark::before,
.reveal-q.is-armed:not(.is-answered) .mark::after {
  opacity: 0;
  transform: scale(1.08);
}

@media (max-width: 799px) {
  .ifs {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin: var(--space-10) auto 0;
  }

  .reveal-q__then { margin-top: var(--space-10); }
}

/* Mapa "tudo passa por você": fragmentos → sua cabeça → operação.
   Os fios ficam atrás dos cards (SVG absoluto, cards em position: relative). */
.flowmap-lead {
  max-width: 780px;
  margin: var(--beat-sm) auto 0;
  text-align: center;
  text-wrap: balance;
}

/* Palavra com hífen que não pode quebrar no meio (ex.: e-commerce) */
.nowrap { white-space: nowrap; }

/* Trecho da frase que corresponde à pílula acesa no mapa */
.frag {
  font-weight: var(--weight-semibold);
  background: linear-gradient(var(--brand), var(--brand)) left bottom / 0% 1px no-repeat;
  transition:
    color var(--dur-switch) var(--ease-out),
    background-size var(--dur-enter) var(--ease-out);
}

.frag.is-on,
.frag.is-sent {
  color: var(--text-primary);
  background-size: 100% 1px;
}

.frag.is-sent { background-image: linear-gradient(var(--marker-line), var(--marker-line)); }

.flowmap {
  --row-gap: clamp(var(--space-12), 4vw + 16px, var(--space-20));
  position: relative;
  display: grid;
  gap: var(--row-gap);
  margin-top: var(--space-12);
}

.flowmap__wires,
.flow__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

:is(.flowmap__wires, .flow__wires) .wire {
  fill: none;
  stroke: var(--border-dashed);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  transition: stroke var(--dur-enter) var(--ease-out);
}

:is(.flowmap__wires, .flow__wires) .wire.is-live {
  stroke: var(--marker-line);
  stroke-dasharray: none;
}

:is(.flowmap__wires, .flow__wires) .pulse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 100;
  stroke-dashoffset: 8;
  opacity: 0;
}

.flowmap__in,
.flowmap__out {
  position: relative;
  display: grid;
  gap: var(--space-3);
}

.flowmap__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flowmap__out { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.flow-in {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
  font: var(--weight-medium) 14px/1.3 var(--font-sans);
  animation: flow-float 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    box-shadow var(--dur-switch) var(--ease-out);
}

.flow-in .icon-tile,
.turn-decide__list .icon-tile {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--dur-switch) var(--ease-out),
    color var(--dur-switch) var(--ease-out);
}

.flow-in .icon-tile svg,
.turn-decide__list .icon-tile svg {
  width: 18px;
  height: 18px;
}

.flow-in.is-on { box-shadow: var(--fx-accent), var(--fx-surface); }

.flow-in.is-on .icon-tile,
.flow-out.is-lit .icon-tile,
.turn-decide__list .is-on .icon-tile {
  background: var(--brand);
  color: var(--on-brand);
}

/* Entregue à memória: o fragmento sai do mundo e fica só na sua cabeça */
.flow-in.is-sent { opacity: 0.45; }

@keyframes flow-float {
  50% { transform: translateY(-4px); }
}

.flow-hub {
  position: relative;
  justify-self: center;
  display: grid;
  gap: var(--space-4);
  width: min(100%, 400px);
  transition: box-shadow var(--dur-enter) var(--ease-out);
}

.flow-hub__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.flow-hub__name {
  display: grid;
  flex: 1;
}

.flow-hub__pct {
  font: var(--weight-medium) 24px/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-marker);
}

.flow-hub .progress__bar { transition: width var(--dur-enter) var(--ease-out); }

.flow-hub.is-full { box-shadow: var(--fx-accent), var(--fx-surface-float); }

/* Chegada do pulso: um anel que se abre e some */
.flow-hub::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--brand);
  opacity: 0;
  pointer-events: none;
}

.flow-hub.is-hit::after { animation: hub-hit 640ms var(--ease-out); }

@keyframes hub-hit {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.06, 1.18); }
}

.flow-out {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
  transition: box-shadow var(--dur-enter) var(--ease-out);
}

/* A cor entra em onda a partir do ícone */
.flow-out::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 0% 0%, rgb(255 215 0 / 0.14), transparent 62%);
  clip-path: circle(0% at 46px 46px);
  transition: clip-path 1.2s var(--ease-out);
}

.flow-out.is-lit::before { clip-path: circle(150% at 46px 46px); }
.flow-out.is-lit { box-shadow: var(--fx-accent), var(--fx-surface); }

.flow-out .icon-tile {
  margin-bottom: var(--space-3);
  transition:
    background-color var(--dur-switch) var(--ease-out),
    color var(--dur-switch) var(--ease-out);
}

.flow-out.is-lit .icon-tile { animation: icon-pop 480ms var(--ease-out); }

@keyframes icon-pop {
  40% { transform: scale(1.14) rotate(-4deg); }
}

.flow-out__what {
  font: var(--weight-semibold) clamp(20px, 0.38vw + 18.5px, 24px) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.flow-out__why {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.flow-in,
.flow-out__why { text-wrap: balance; }

/* Com espaço, cada pílula cabe numa linha só e a fileira se distribui */
@media (min-width: 1180px) {
  .flowmap__in {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }

  .flow-in { white-space: nowrap; }
}

/* Tablet: as quatro pílulas continuam lado a lado, com o ícone em cima,
   então todas quebram do mesmo jeito em duas linhas */
@media (min-width: 800px) and (max-width: 1179px) {
  .flow-in {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }
}

/* Celular: tudo em uma coluna, recuado. O fio vira um tronco que corre no
   recuo da esquerda: cada pílula entra nele por um ramo, ele desce até a
   sua cabeça e, de lá, desce de novo e sai por um ramo para cada card.
   O desenho dos caminhos está no script (modo "empilhado"). */
@media (max-width: 799px) {
  .flowmap {
    --row-gap: var(--space-8);
    --indent: var(--space-10);
    margin-top: var(--space-10);
  }

  .flowmap__in,
  .flowmap__out {
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--indent);
  }

  .flowmap__in { gap: var(--space-2); }

  .flow-in {
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    animation: none;
  }

  .flow-hub {
    justify-self: stretch;
    width: auto;
    margin-left: var(--indent);
  }

  .flow-out {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: 2px;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .flow-out .icon-tile {
    grid-row: span 2;
    align-self: center;
    margin-bottom: 0;
  }

  .flow-out__what { font-size: 18px; }
  .flow-out__why { font-size: 15px; }

  .flow-out::before { clip-path: circle(0% at 38px 50%); }
  .flow-out.is-lit::before { clip-path: circle(150% at 38px 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-in { animation: none; }
}


/* Os caminhos de sempre: pergunta, ponte e explicação num eixo central.
   Desktop quebra cada frase no .br-wide; abaixo de 1100px o balance assume. */
.paths-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* A pergunta começa apagada no mesmo tamanho do título, como nos picos */
.paths-head__kicker {
  font: var(--title-section);
  letter-spacing: -0.03em;
  color: var(--text-tertiary);
  text-wrap: balance;
}

.gap-map {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  text-align: center;
}

.gap-map > p {
  max-width: 60ch;
  text-wrap: balance;
}

@media (min-width: 1100px) {
  .paths-head,
  .gap-map > p { max-width: none; }
}

.gap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: min(100%, 640px);
  padding-block: var(--space-4);
}

.gap__end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
  font: var(--weight-medium) 15px/1.3 var(--font-sans);
  white-space: nowrap;
}

.gap__end svg {
  width: 16px;
  height: 16px;
  color: var(--icon-accent);
}

.gap__line {
  position: relative;
  flex: 1;
  min-width: var(--space-8);
  border-top: 1px dashed var(--border-dashed);
}

/* O recado sai de quem conhece o negócio e se perde no meio do caminho */
.gap__line::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: gap-lost 3s var(--ease-out) infinite;
}

.gap:not(.is-playing) .gap__line::after { animation-play-state: paused; }

@keyframes gap-lost {
  0% { left: 0; opacity: 1; scale: 1; }
  55% { opacity: 1; scale: 1; }
  80%, 100% { left: 68%; opacity: 0; scale: 0.3; }
}

.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--beat-sm);
}

/* ---------- Card com cena ----------
   Cada argumento ganha uma cena curta em loop no topo do card; o texto
   fica embaixo. As cenas só rodam com o card na tela ([data-play]). */

.vcard {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
}

.vcard > :not(.vcard__scene) { padding-inline: var(--space-2); }

.vcard__scene {
  position: relative;
  display: grid;
  place-content: center;
  height: 184px;
  margin-bottom: var(--space-3);
  padding: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

[data-play]:not(.is-playing),
[data-play]:not(.is-playing) * {
  animation-play-state: paused !important;
}

.vcard__scene .icon-tile {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.vcard__scene .icon-tile svg {
  width: 16px;
  height: 16px;
}

/* ---------- Os três caminhos: cenas em mini janelas ----------
   Cada cena é um pedaço de painel (barra com pontos, linhas, selos e
   barras de progresso do .app), com luz dourada fraca vindo do topo. */
.vcard__scene:is(.scene-loop, .scene-fit, .scene-err) {
  justify-content: stretch;
  justify-items: center;
  height: 212px;
  padding: var(--space-4);
  background:
    radial-gradient(90% 70% at 50% 0%, rgb(255 215 0 / 0.07), transparent 70%),
    radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--surface-2);
}

.mini {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 10px 12px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--fx-tile), 0 16px 32px -16px rgb(0 0 0 / 0.7);
  font: var(--weight-medium) 12px/1.2 var(--font-sans);
  color: var(--text-secondary);
  text-align: left;
}

.mini svg { flex: none; }

.mini__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 9px;
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}

.mini__bar > b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini__dots { display: flex; gap: 4px; }
.mini__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-600); }

.mini__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nos três caminhos o texto vem primeiro, centralizado, e a cena fecha
   o card; a linha do texto estica para as cenas alinharem na base */
.paths .vcard {
  grid-template-rows: auto 1fr auto;
  padding: var(--space-6) var(--space-4) var(--space-4);
  text-align: center;
}

.paths .vcard .h3 { text-wrap: balance; }
.paths .vcard .body { text-wrap: pretty; }

.paths .vcard__scene {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* Mandar fazer: conversa, prazo, orçamento; a entrega volta para trás e
   o contador de ajustes sobe a cada volta */
.loop__round {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  line-height: 1.2;
  color: var(--brand);
  font-weight: var(--weight-semibold);
}

.loop__round > span {
  display: block;
  animation: loop-round 18s var(--ease-out) infinite;
}

@keyframes loop-round {
  0%, 18% { translate: 0 0; }
  20%, 38% { translate: 0 -1.2em; }
  40%, 58% { translate: 0 -2.4em; }
  60%, 78% { translate: 0 -3.6em; }
  80%, 100% { translate: 0 -4.8em; }
}

.loop__rows { display: grid; gap: 3px; }

.loop__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px 0 4px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  animation: loop-row 3.6s var(--ease-out) infinite both;
  animation-delay: calc(var(--i) * 1.2s);
}

.loop__row > b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loop__row > :last-child { flex: none; }

/* Entre 900 e ~1100px a janela fica estreita: aperta a linha para o
   "Novo orçamento" não cortar */
.scene-loop .mini { container-type: inline-size; }

@container (max-width: 260px) {
  .loop__row { gap: 6px; padding-right: 6px; font-size: 11.5px; }
  .loop__faces i { width: 18px; height: 18px; }
  .loop__row .kpi__trend { padding: 0 5px; }
}

.vcard__scene .loop__row .icon-tile {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  animation: loop-icon 3.6s var(--ease-out) infinite both;
  animation-delay: calc(var(--i) * 1.2s);
}

.vcard__scene .loop__row .icon-tile svg { width: 13px; height: 13px; }

.loop__faces { display: flex; }

.loop__faces i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--gold-100);
  box-shadow: 0 0 0 2px var(--surface-1);
  color: var(--gold-900);
  font: var(--weight-semibold) 9px/1 var(--font-sans);
  font-style: normal;
}

.loop__faces i + i { background: var(--ink-600); color: var(--text-secondary); }

.loop__value {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

@keyframes loop-row {
  0%, 30% { background: rgb(255 215 0 / 0.06); box-shadow: var(--fx-accent); color: var(--text-primary); }
  38%, 100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; color: var(--text-tertiary); }
}

@keyframes loop-icon {
  0%, 30% { background: var(--brand); color: var(--on-brand); }
  38%, 100% { background: var(--surface-2); color: var(--text-tertiary); }
}

.loop__eta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--text-tertiary);
}

.loop__eta i {
  position: relative;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.loop__eta i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
  transform-origin: left;
  animation: loop-eta 3.6s var(--ease-out) infinite;
}

/* Quase chega; aí vem o próximo ajuste e a entrega volta */
@keyframes loop-eta {
  0% { scale: 0.18 1; }
  82% { scale: 0.86 1; }
  92%, 100% { scale: 0.18 1; background: var(--danger-400); }
}

/* Sistema pronto: o modelo é igual para todo mundo, a sua regra não encaixa */
.fit__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.fit__mod,
.fit__slot {
  height: 44px;
  border-radius: 9px;
}

.fit__mod {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

.fit__mod i {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.fit__mod i:last-child { width: 55%; opacity: 0.6; }

.fit__mod--chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 9px 10px;
}

.fit__mod--chart i,
.fit__mod--chart i:last-child {
  flex: 1;
  width: auto;
  height: var(--h);
  border-radius: 2px;
  background: var(--border-strong);
  opacity: 1;
}

/* O encaixe é do tamanho do modelo: estreito demais para a sua regra */
.fit__slot {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-dashed);
}

.fit__slot::before {
  content: "";
  width: 22px;
  height: 14px;
  border-radius: 4px;
  border: 1px dashed var(--icon-accent);
  animation: fit-hole 3.4s var(--ease-out) infinite;
}

@keyframes fit-hole {
  0%, 34%, 62%, 100% { border-color: var(--icon-accent); background: transparent; }
  38%, 56% { border-color: var(--danger-400); background: var(--danger-tint); }
}

.scene-fit__piece {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font: var(--weight-semibold) 12px/1 var(--font-sans);
  /* largura do texto: com left 50%, o Safari só dava a ela a metade do encaixe */
  width: max-content;
  white-space: nowrap;
  translate: -50% -50%;
  box-shadow: 0 10px 20px -6px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.5);
  animation: fit-try 3.4s var(--ease-out) infinite;
}

.scene-fit__piece svg {
  width: 14px;
  height: 14px;
}

@keyframes fit-try {
  0% { transform: translateY(-40px) rotate(-5deg); opacity: 0; }
  10% { transform: translateY(-34px) rotate(-4deg); opacity: 1; }
  32% { transform: translateY(0) rotate(0); }
  36% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  44% { transform: translateX(-3px); }
  48%, 56% { transform: none; }
  74% { transform: translateY(-34px) rotate(-4deg); opacity: 1; }
  84%, 100% { transform: translateY(-40px) rotate(-5deg); opacity: 0; }
}

/* Celular: o encaixe fica estreito, então a peça encolhe para caber no
   desenho dele e desce de pouco acima, sem passar por cima do gráfico */
@media (max-width: 479px) {
  .scene-fit__piece {
    gap: 4px;
    padding: 6px 9px;
    font-size: 11px;
    animation-name: fit-try-sm;
  }

  .scene-fit__piece svg {
    width: 12px;
    height: 12px;
  }
}

@keyframes fit-try-sm {
  0% { transform: translateY(-14px) scale(0.92); opacity: 0; }
  12% { transform: translateY(-10px) scale(0.96); opacity: 1; }
  32% { transform: none; }
  36% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  44% { transform: translateX(-3px); }
  48%, 56% { transform: none; }
  74% { transform: translateY(-10px) scale(0.96); opacity: 1; }
  84%, 100% { transform: translateY(-14px) scale(0.92); opacity: 0; }
}

.fit__toast {
  position: absolute;
  width: max-content;
  top: 26px;
  right: max(var(--space-5), calc(50% - 160px + 8px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-pill);
  background: rgb(13 13 16 / 0.92);
  box-shadow: var(--fx-surface-float), inset 0 0 0 1px rgb(240 86 74 / 0.35);
  color: var(--danger-text);
  font: var(--weight-semibold) 11.5px/1 var(--font-sans);
  white-space: nowrap;
  animation: fit-toast 3.4s var(--ease-out) infinite;
}

.fit__toast svg { width: 13px; height: 13px; stroke-width: 2.4; }

@keyframes fit-toast {
  0%, 34% { opacity: 0; transform: translateY(-8px) scale(0.96); }
  40%, 66% { opacity: 1; transform: none; }
  74%, 100% { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* IA sozinho: tudo certo, a barra anda, até o primeiro erro técnico */
@property --err-p {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.scene-err .mini { animation: err-run 4.8s var(--ease-out) infinite; }

@keyframes err-run {
  0% { --err-p: 0; }
  9% { --err-p: 34; }
  24% { --err-p: 67; }
  36%, 88% { --err-p: 72; box-shadow: var(--fx-tile), 0 16px 32px -16px rgb(0 0 0 / 0.7); }
  38% { box-shadow: inset 0 0 0 1px rgb(240 86 74 / 0.5), 0 16px 32px -16px rgb(0 0 0 / 0.7), 0 0 28px -6px rgb(240 86 74 / 0.45); }
  94%, 100% { --err-p: 0; }
}

.err__spin {
  position: relative;
  width: 18px;
  height: 18px;
}

.err__spin i,
.err__spin svg {
  position: absolute;
  inset: 0;
}

.err__spin i {
  border: 2px solid rgb(255 215 0 / 0.22);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: forge-spin 0.8s linear infinite, err-hide 4.8s var(--ease-out) infinite;
}

.err__spin svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--danger-tint);
  color: var(--danger-text);
  stroke-width: 2.6;
  animation: err-show 4.8s var(--ease-out) infinite;
}

@keyframes err-hide {
  0%, 35%, 94%, 100% { opacity: 1; }
  37%, 90% { opacity: 0; }
}

@keyframes err-show {
  0%, 35%, 92%, 100% { opacity: 0; scale: 0.5; }
  38%, 88% { opacity: 1; scale: 1; }
}

.err__pct {
  min-width: 4ch;
  font: var(--weight-medium) 11px/1 var(--font-mono);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  text-align: right;
  counter-reset: p var(--err-p);
  animation: err-tint 4.8s var(--ease-out) infinite;
}

.err__pct::after { content: counter(p) "%"; }

.err__track {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.err__track i {
  display: block;
  width: calc(var(--err-p) * 1%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  color: var(--brand);
  animation: err-tint 4.8s var(--ease-out) infinite;
}

@keyframes err-tint {
  0%, 35%, 92%, 100% { color: var(--brand); }
  38%, 88% { color: var(--danger-400); }
}

.err__rows { display: grid; gap: 5px; justify-items: start; }

.scene-err__row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--success-tint);
  color: var(--success-text);
  font: var(--weight-medium) 12px/1 var(--font-sans);
  animation: err-in-0 4.8s var(--ease-out) infinite both;
}

.scene-err__row:nth-child(2) { animation-name: err-in-1; }

.scene-err__row svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.scene-err__row--bad {
  background: var(--danger-tint);
  color: var(--danger-text);
  animation-name: err-in-2;
}

@keyframes err-in-0 {
  0% { opacity: 0; transform: translateY(6px); }
  6%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes err-in-1 {
  0%, 16% { opacity: 0; transform: translateY(6px); }
  22%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes err-in-2 {
  0%, 33% { opacity: 0; transform: translateY(6px); }
  37% { opacity: 1; transform: none; }
  40% { transform: translateX(-4px); }
  43% { transform: translateX(4px); }
  46% { transform: translateX(-2px); }
  49%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

.err__log {
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.35);
  font: 10.5px/1.2 var(--font-mono);
  color: rgb(240 86 74 / 0.8);
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: err-log 4.8s var(--ease-out) infinite both;
}

@keyframes err-log {
  0%, 42% { opacity: 0; }
  48%, 88% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mini *,
  .mini,
  .fit__toast { animation: none !important; }
}

/* Fecho dos cards no tamanho de .h3, como a frase do loop */
.verdict {
  max-width: 820px;
  margin: var(--beat-sm) auto 0;
  font: var(--weight-semibold) clamp(20px, 0.38vw + 18.5px, 24px) / 1.3 var(--font-display);
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text-primary);
  text-wrap: balance;
}

.verdict span { color: var(--text-tertiary); }

@media (max-width: 899px) {
  .paths { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* Celular: as duas pontas empilham com a mesma largura e a ponte desce
   pelo meio delas. A linha tem um vão no centro: o ponto dourado sai de
   quem conhece o negócio, desce e some ali, sem chegar do outro lado. */
@media (max-width: 599px) {
  .gap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100%, 300px);
  }
  .gap__end { justify-content: center; }
  .gap__line {
    flex: none;
    align-self: center;
    width: 1px;
    min-width: 0;
    height: 64px;
    border-top: 0;
  }
  /* O tracejado com o vão fica no ::before, mascarado; o ponto, no
     ::after, segue fora da máscara */
  .gap__line::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--border-dashed) 50%, transparent 0) 0 0 / 1px 6px repeat-y;
    -webkit-mask: linear-gradient(#000 0 36%, transparent 36% 64%, #000 64%);
    mask: linear-gradient(#000 0 36%, transparent 36% 64%, #000 64%);
  }
  .gap__line::after {
    top: 0;
    left: -3.5px;
    animation-name: gap-lost-down;
  }
}

@keyframes gap-lost-down {
  0% { top: -4px; opacity: 1; scale: 1; }
  45% { opacity: 1; scale: 1; }
  70%, 100% { top: calc(50% - 4px); opacity: 0; scale: 0.3; }
}

/* ---------- Ato 2 · Virada ---------- */

/* Texto à esquerda, decisões à direita. Abaixo de 1024px empilha. */
.turn {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .turn {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-16);
  }
}

.turn__copy {
  display: grid;
  gap: var(--space-5);
  max-width: 640px;
}

.turn__copy .lead { text-wrap: pretty; }

/* A conclusão do texto, que puxa a lista ao lado: um traço curto dourado
   separa do parágrafo */
.turn__next {
  position: relative;
  max-width: 30ch;
  margin-top: var(--space-3);
  padding-top: var(--space-6);
}

.turn__next::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}

/* Subtexto da conclusão: colado no título, no tamanho de corpo */
.turn__sub {
  max-width: 46ch;
  margin-top: calc(var(--space-2) * -1);
}

.turn__sub strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Celular: o texto da virada centralizado, com o traço dourado no meio */
@media (max-width: 767px) {
  .turn__copy {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .turn__copy :is(.h2, .lead, .turn__next, .turn__sub) { text-wrap: balance; }

  .turn__next::before {
    left: 50%;
    translate: -50% 0;
  }
}

/* As decisões em linhas: ícone à esquerda, texto ao lado */
.turn-decide {
  display: grid;
  gap: var(--space-5);
}

.turn-decide__list {
  display: grid;
  gap: var(--space-3);
}

.turn-decide__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
  font: var(--weight-medium) 15px/1.3 var(--font-sans);
}

/* Campo de código vivo (ver script): fica atrás do conteúdo */
.glyph-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Pico 2: card escuro com o código da marca trocando por trás */
.thesis {
  position: relative;
  isolation: isolate;
  background: var(--gradient-glow-radial), var(--bg-page);
  margin-top: var(--beat);
  padding: clamp(var(--space-12), 5vw + 24px, var(--space-24)) clamp(var(--space-6), 6vw, var(--space-20));
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--stroke-in-dark), var(--elev-3);
  text-align: center;
}

.thesis .glyph-field,
.closing .glyph-field { z-index: -1; }

.thesis .statement__punch {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}

/* Mecanismo: frase, sistema, o que sai */
.mechanism { margin-top: var(--beat); }

/* Como funciona: tudo no eixo central, do título ao painel */
.mechanism__head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.mechanism__head .lead { max-width: 48ch; }

/* Um parágrafo só: no desktop uma frase por linha (.br-wide), abaixo de
   1100px o balance assume. */
.mechanism .loop {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.mechanism .loop .lead { text-wrap: balance; }

/* Pedido em cima, resultado embaixo: o painel ocupa a largura toda.
   Os vãos abrem espaço para os fios (tronco até "A Programe constrói",
   três ramos dali até o sistema). */
.flow {
  position: relative;
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-12);
}

.flow__wires { z-index: 0; }

.flow__step--ask {
  justify-self: center;
  width: min(100%, 640px);
}

.flow__step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
}

.flow__step--build { gap: var(--space-16); }

/* entre "Você escreve" e o campo fica um vão para o fio que liga os dois */
.flow__step--ask { gap: var(--space-10); }

/* Etapa: pílula centralizada com o hexágono do ícone e o título. É nela
   que o fio do pedido chega e de onde saem os ramos. A etapa em curso
   acende durante a animação do mecanismo. */
.flow__label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--stroke-in-light), var(--elev-1);
  transition: box-shadow var(--dur-switch) var(--ease-out);
}

.flow__label .badge-hex {
  min-width: 40px;
  height: 28px;
  transition:
    background-color var(--dur-switch) var(--ease-out),
    color var(--dur-switch) var(--ease-out);
}

.flow__label-text {
  font: var(--weight-semibold) 15px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  transition: color var(--dur-switch) var(--ease-out);
}

.mechanism.is-armed .flow__label:not(.is-active) .badge-hex {
  background: var(--surface-3);
  color: var(--text-tertiary);
}

.mechanism.is-armed .flow__label:not(.is-active) .flow__label-text { color: var(--text-secondary); }

.mechanism.is-armed .flow__label.is-active { box-shadow: inset 0 0 0 1px var(--marker-line), var(--elev-2); }

.mechanism.is-armed .flow__label.is-active .badge-hex { animation: icon-pop 480ms var(--ease-out); }


/* Campo de digitação: cópia do composer da home do programe.studio
   (.home-prompt-shell). Casca escura com borda de luz, linha dourada no
   topo, barra com "+", modo Construir e botão de enviar. */
.composer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #0e0e14 0%, #0a0a0f 58%, #08080c 100%);
  box-shadow: 0 44px 96px -42px rgb(0 0 0 / 0.95);
}

/* borda de 1px que some de cima para baixo */
.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.05) 34%, rgb(255 255 255 / 0.02) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.composer__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.055) 0.12%, transparent 0.12%),
    linear-gradient(180deg, rgb(255 255 255 / 0.055) 0.49%, transparent 0.49%);
  opacity: 0.35;
  pointer-events: none;
}

.composer__accent {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: min(734px, 85%);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, rgb(255 215 0 / 0) 0%, rgb(255 215 0 / 0.5) 50%, rgb(255 215 0 / 0) 100%);
  pointer-events: none;
}

.composer__field {
  position: relative;
  z-index: 4;
  min-height: 84px;
  margin: 0;
  padding: 20px 24px 8px;
  color: #f6f6f5;
  font: var(--weight-regular) 17.5px/28px var(--font-sans);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.composer__bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgb(255 255 255 / 0.012);
  border-top: 1px solid rgb(255 255 255 / 0.055);
}

.composer__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.composer__chip,
.composer__mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 999px;
  color: #a8a8b0;
  background: rgb(255 255 255 / 0.035);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.06), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.composer__chip { width: 38px; }

.composer__chip svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.25;
}

.composer__mode {
  gap: 0.45rem;
  padding: 0 0.6rem 0 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  font: var(--weight-medium) 14px/1 var(--font-sans);
}

.composer__mode svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.composer__mode .composer__tail {
  width: 14px;
  height: 14px;
}

/* Enviar: apagado enquanto o campo está vazio, acende com a frase e
   afunda quando a frase "vai" para a Programe */
.composer__send {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: #1e1e1e;
  background: var(--gradient-brand);
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.42), inset 0 1px rgb(255 255 255 / 0.62), inset 0 -1px rgb(122 90 0 / 0.38);
  transition:
    opacity var(--dur-switch) var(--ease-out),
    box-shadow var(--dur-switch) var(--ease-out),
    scale 140ms var(--ease-out);
}

.composer__send svg {
  width: 1.375rem;
  height: 1.375rem;
}

.composer__send.is-empty {
  opacity: 0.45;
  box-shadow: none;
}

.composer__send.is-sent { scale: 0.9; }

/* Cursor que vem pela barra até a setinha e clica no "enter" */
.composer__send { position: relative; }

.composer__cursor {
  position: absolute;
  top: 46%;
  left: 46%;
  z-index: 1;
  width: 22px;
  height: 22px;
  opacity: 0;
  translate: -64px 10px;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.55));
  transition:
    opacity 200ms var(--ease-out),
    translate 520ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 160ms var(--ease-out);
}

.composer__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
  stroke: #111;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.composer__send.is-aim .composer__cursor {
  opacity: 1;
  translate: 0 0;
}

/* no clique o cursor afunda junto com o botão; depois some devagar */
.composer__send.is-sent .composer__cursor { scale: 0.82; transition: scale 90ms var(--ease-out); }

.composer__send:not(.is-aim) .composer__cursor {
  transition: opacity 260ms var(--ease-out), translate 0s 260ms;
}

@media (max-width: 480px) {
  .composer__field { padding: 18px 20px 8px; font-size: 16px; line-height: 26px; }
  .composer__chip, .composer__mode { height: 34px; }
  .composer__chip { width: 34px; }
  .composer__mode { font-size: 13px; }
  .composer__send { width: 2.5rem; height: 2.5rem; }
}

/* Digitação: o fantasma reserva a altura, a frase viva fica por cima */
.type-ghost { visibility: hidden; }

.type-live {
  position: absolute;
  inset: 20px 24px 8px;
}

@media (max-width: 480px) {
  .type-live { inset: 18px 20px 8px; }
}

.type-live.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: var(--brand);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

/* Antes de cada etapa acontecer, ela fica recolhida (só com JS ligado) */
.mechanism.is-armed [data-build] {
  transition:
    opacity 300ms var(--ease-out),
    translate 300ms var(--ease-out);
}

.mechanism.is-armed [data-build]:not(.is-in) {
  opacity: 0;
  translate: 0 8px;
}

/* inline-flex (não inline-block): com overflow hidden, o inline-block
   joga a linha de base para a borda de baixo e o selo sobe na linha */
.mechanism.is-armed .app .status {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* Entregas: cards pretos no padrão da barra lateral do app, ícone num
   tile dourado. Na animação cada card acende: o tile ganha o ouro e o
   filete fica dourado. */
.mechanism.is-armed .deliverables li,
.mechanism.is-armed .deliverables__icon {
  transition:
    color var(--dur-enter) var(--ease-out),
    box-shadow var(--dur-enter) var(--ease-out);
}

.mechanism.is-armed .deliverables li::before,
.mechanism.is-armed .deliverables__icon::before {
  transition: opacity var(--dur-enter) var(--ease-out);
}

.mechanism.is-armed .deliverables li:not(.is-on) {
  color: var(--text-tertiary);
  box-shadow: var(--fx-tile), inset 0 1px 0 rgb(255 255 255 / 0.05), var(--lift);
}

.mechanism.is-armed .deliverables li:not(.is-on)::before,
.mechanism.is-armed .deliverables li:not(.is-on) .deliverables__icon::before { opacity: 0; }

.mechanism.is-armed .deliverables li:not(.is-on) .deliverables__icon { color: var(--text-muted); }

.mechanism.is-armed .deliverables li.is-on .deliverables__icon { animation: icon-pop 480ms var(--ease-out); }

.deliverables {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.deliverables li {
  --lift: 0 1px 2px rgb(11 11 15 / 0.3), 0 16px 32px -16px rgb(11 11 15 / 0.6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: var(--space-6);
  min-height: 132px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  box-shadow: inset 0 0 0 1px rgb(255 215 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.07), var(--lift);
  color: var(--text-primary);
  font: var(--weight-semibold) 16px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
}

/* brilho dourado vindo do canto do ícone */
.deliverables li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 90% at 0% 0%, rgb(255 215 0 / 0.14), transparent 62%);
}

.deliverables__icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  box-shadow: var(--fx-tile);
  color: var(--on-brand);
}

.deliverables__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--brand-fill);
  box-shadow:
    0 0 0 1px rgb(255 215 0 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 8px 20px -8px rgb(255 215 0 / 0.6);
}

.deliverables svg {
  width: 20px;
  height: 20px;
}

.loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-16);
  align-items: start;
  margin-top: var(--beat-sm);
}

.loop b,
.founder__body b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

@media (max-width: 1023px) {
  .deliverables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .mechanism__head,
  .loop { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Quem está por trás */
/* Foto e história cabem juntas numa tela de 850px de altura: coluna da
   foto mais estreita, texto mais largo e respiro curto entre parágrafos. */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-12);
  align-items: center;
}

.founder__media {
  position: sticky;
  top: 112px;
}

.founder__photo { --ratio: 4 / 5; }

/* Credenciais flutuando na borda da foto */
.founder__creds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cred {
  position: absolute;
  width: max-content;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  box-shadow: var(--fx-surface-float);
  font: var(--weight-medium) 12px/1.3 var(--font-sans);
  color: var(--text-secondary);
  white-space: nowrap;
  animation: flow-float 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.cred b {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.cred .icon-tile {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.cred .icon-tile svg {
  width: 14px;
  height: 14px;
}

/* Só um pouco para fora da foto: o espaço entre as colunas é de 48px e as
   etiquetas não podem encostar no título ao lado. */
.cred:nth-child(1) { top: 10%; right: -6%; }
.cred:nth-child(2) { top: 60%; left: -8%; }
.cred:nth-child(3) { bottom: 9%; right: -6%; }

.founder__story {
  display: grid;
  gap: var(--space-5);
}

.founder__story > .h2 { margin-bottom: var(--space-1); }

.founder__story > .lead {
  font-size: 17px;
  line-height: 1.55;
}

/* Do jeito tradicional: um trilho fino com seis pontos, sem caixa e sem
   ícones, para não competir com o texto. A linha dourada corre da Reunião
   ao Ajuste e cada etapa acende quando ela passa. */
.pipeline {
  --pipe-dur: 7s;
  container-type: inline-size;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.pipeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.pipeline__title {
  font: var(--weight-medium) 14px/1.3 var(--font-sans);
  color: var(--text-secondary);
}

.pipeline__months {
  font-size: 13px;
  color: var(--text-tertiary);
}

.pipeline__months b {
  font: var(--weight-medium) 20px/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* O trilho é desenhado por máscara (pontos no centro de cada coluna + a
   linha entre o primeiro e o último): ::before em cinza e ::after em ouro,
   revelado da esquerda para a direita. */
.pipeline__steps {
  --pipe-shape:
    radial-gradient(circle, #000 3.5px, transparent 4px) 0 0 / calc(100% / 6) 100% repeat-x,
    linear-gradient(#000, #000) center / calc(100% - 100% / 6) 2px no-repeat;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-top: var(--space-6);
}

.pipeline__steps::before,
.pipeline__steps::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  -webkit-mask: var(--pipe-shape);
  mask: var(--pipe-shape);
}

.pipeline__steps::before { background: var(--border-strong); }

.pipeline__steps::after {
  background: var(--brand);
  animation: pipe-run var(--pipe-dur) linear infinite;
}

.pipeline:not(.is-playing) .pipeline__steps::after { animation-play-state: paused; }

@keyframes pipe-run {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  62%, 84% { clip-path: inset(0); opacity: 1; }
  96% { clip-path: inset(0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}

/* Cada etapa acende quando a linha chega no seu ponto (62% do ciclo para
   cruzar o trilho, ponto no meio da coluna). */
.pipeline__steps li {
  font: var(--weight-medium) 12px/1.3 var(--font-sans);
  color: var(--text-tertiary);
  text-align: center;
  white-space: nowrap;
  animation: pipe-step var(--pipe-dur) var(--ease-out) infinite both;
  animation-delay: calc((var(--i) + 0.5) * var(--pipe-dur) * 0.62 / 6);
}

@keyframes pipe-step {
  0% { color: var(--text-tertiary); }
  3% { color: var(--text-primary); }
  22%, 100% { color: var(--text-tertiary); }
}

/* Coluna média: letra menor para "Desenvolvimento" não encostar nos vizinhos */
@container (max-width: 679px) {
  .pipeline__steps li { font-size: 11px; }
}

/* Coluna estreita: o trilho continua deitado, a pedido; os nomes alternam
   em duas alturas para cada um ganhar o espaço de duas colunas. */
@container (max-width: 559px) {
  .pipeline__steps li { font-size: 11px; }
  .pipeline__steps li:nth-child(even) { padding-top: 16px; }
}

@keyframes pipe-run-down {
  0% { clip-path: inset(0 0 100% 0); opacity: 1; }
  62%, 84% { clip-path: inset(0); opacity: 1; }
  96% { clip-path: inset(0); opacity: 0; }
  100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}

.founder__close b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

@media (max-width: 899px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__media {
    position: relative;
    top: auto;
    width: min(100% - 64px, 360px);
    margin-inline: auto;
  }
}

@media (max-width: 599px) {
  .cred:nth-child(1) { right: -12%; }
  .cred:nth-child(2) { left: -12%; }
}

/* Ely com foto (Figma 2070:1886), espelhado: a foto nova olha para a
   direita, então ela vai para a esquerda sobre o "</>" amarelo gigante
   (do qual só aparece o canto de baixo) e o texto fica à direita, para
   onde ele olha. As credenciais empilham dentro da foto.
   O desenho mede em unidades do Figma presas à foto: 715 de largura =
   100cqw do .ely-photo. */
/* Medidas do Figma num container de 1280: texto com 640 a partir da
   borda, foto com 715 começando em 618 (passa 53 da borda direita), topo
   da foto 127 acima do título e o pé dela entrando 122 no painel de
   baixo. Margens em % da coluna da foto (662), para escalar junto. */
.founder {
  grid-template-columns: minmax(0, 662fr) minmax(0, 618fr);
  gap: 0;
  align-items: start;
}

/* A foto passa 53 da borda esquerda, como passava da direita */
.founder__media {
  order: 0;
  position: relative;
  top: auto;
  width: calc(100% * 715 / 662);
  margin-block: calc(-100% * 127 / 662) calc(-100% * 122 / 662);
  margin-inline-start: calc(-100% * 53 / 662);
}

/* Mais estreito que os 640 do Figma, a pedido: 560 num container de 1280,
   com mais respiro antes da foto */
.founder__story {
  position: relative;
  z-index: 1;
  /* Coluna inteira (618 num container de 1280): o título fecha em 4
     linhas no tamanho cheio, alinhado com os parágrafos */
  width: 100%;
  max-width: none;
  justify-self: end;
}

.ely-photo {
  position: relative;
  isolation: isolate;
  margin: 0;
  container-type: inline-size;
}

.ely-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Foto um pouco maior e descida só 85 (em 715 de largura): a cabeça
     fica perto do topo e as mãos entram por baixo do painel cinza
     (.split-panel, que fica por cima dela). */
  translate: 0 calc(85 * 100cqw / 715);
  scale: 1;
  transform-origin: 50% 0;
  /* Sombra leve no pé: escurece até ~55% antes do painel cinza cortar */
  -webkit-mask-image: linear-gradient(#000 58%, rgb(0 0 0 / 0.45) 84%);
  mask-image: linear-gradient(#000 58%, rgb(0 0 0 / 0.45) 84%);
}

/* O amarelo vai além da coluna e encostava na borda da tela, enquanto o
   painel claro de cima fica recuado e arredondado: o canto ficava cortado
   seco. A seção vira um painel escuro com o mesmo recuo e raio, e o
   overflow: clip dela recorta o desenho junto. */
.act--founder {
  margin: var(--panel-gap) var(--panel-gap) 0;
  border-radius: var(--panel-radius);
  /* A seção acaba junto com o painel cinza (que desce 64px abaixo do
     conteúdo): sem isso sobrava uma faixa mais clara entre ele e os planos.
     O respiro até os planos fica fora dela, no fundo da página. */
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-16);
  /* Recorte em duas partes: em cima, onde está o amarelo, o painel
     arredondado da seção; embaixo as laterais abrem até a borda da tela,
     para o painel cinza das provas ir de ponta a ponta como o dos planos.
     A seção não recorta (overflow-clip-margin não existe no Safari e o
     painel cortava 16px nas laterais); quem recorta é o polígono (cantos
     de cima arredondados em 5 pontos), e o main segura a sobra lateral. */
  --r: var(--panel-radius);
  --g: var(--panel-gap);
  --y: min(660px, 47vw);
  overflow: visible;
  clip-path: polygon(
    0 var(--r),
    calc(var(--r) * 0.076) calc(var(--r) * 0.617),
    calc(var(--r) * 0.293) calc(var(--r) * 0.293),
    calc(var(--r) * 0.617) calc(var(--r) * 0.076),
    var(--r) 0,
    calc(100% - var(--r)) 0,
    calc(100% - var(--r) * 0.617) calc(var(--r) * 0.076),
    calc(100% - var(--r) * 0.293) calc(var(--r) * 0.293),
    calc(100% - var(--r) * 0.076) calc(var(--r) * 0.617),
    100% var(--r),
    100% var(--y),
    calc(100% + var(--g)) var(--y),
    calc(100% + var(--g)) 100%,
    calc(-1 * var(--g)) 100%,
    calc(-1 * var(--g)) var(--y),
    0 var(--y)
  );
}

.ely-photo__shape {
  position: absolute;
  z-index: -1;
  top: calc(-886 * 100cqw / 715);
  /* Espelhado em torno da foto: 715 - (2900 - 938) = -1247, e mais 70
     para a esquerda para a diagonal não encostar no título */
  left: calc(-1317 * 100cqw / 715);
  width: calc(2900 * 100cqw / 715);
  height: calc(1460 * 100cqw / 715);
  background: url(assets/ely-shape.svg) 0 0 / 100% 100% no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

/* À esquerda do corpo, na altura do peito, longe do rosto */
.founder__creds {
  inset: auto;
  top: 48%;
  left: 3%;
  display: grid;
  justify-items: start;
  gap: 11px;
}

.founder__creds .cred {
  position: relative;
  inset: auto;
}

/* Credenciais do Ely maiores e com vida: entram da esquerda uma a uma
   quando a foto chega na tela (preso ao scroll), e depois se revezam num
   destaque dourado, uma de cada vez a cada 2s, no lugar da flutuação. */
@media (min-width: 900px) {
  .founder__creds { gap: 14px; }

  .founder__creds .cred {
    gap: var(--space-3);
    padding: 6px var(--space-5) 6px 6px;
    font-size: 15px;
    background: rgb(17 17 22 / 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--fx-surface-float), inset 0 0 0 1px rgb(255 255 255 / 0.06);
    animation: cred-turn 6s ease-in-out infinite;
    animation-delay: calc(var(--n) * 2s);
  }

  .founder__creds .cred:nth-child(1) { --n: 0; }
  .founder__creds .cred:nth-child(2) { --n: 1; }
  .founder__creds .cred:nth-child(3) { --n: 2; }

  .founder__creds .cred .icon-tile {
    width: 40px;
    height: 40px;
    animation: cred-icon 6s ease-in-out infinite;
    animation-delay: calc(var(--n) * 2s);
  }

  .founder__creds .cred .icon-tile svg {
    width: 20px;
    height: 20px;
  }

  .founder__creds .cred b { transition: color 0.3s; }

  @supports (animation-timeline: view()) {
    .founder__creds .cred {
      animation: cred-in linear both, cred-turn 6s ease-in-out infinite;
      animation-timeline: view(), auto;
      animation-range: entry 10% cover calc(25% + var(--n) * 6%), normal;
      animation-delay: 0s, calc(var(--n) * 2s);
    }
  }
}

@keyframes cred-in {
  from { opacity: 0; translate: -48px 0; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* Destaque: a pílula avança um pouco e acende a borda dourada */
@keyframes cred-turn {
  0%, 30%, 100% { transform: none; box-shadow: var(--fx-surface-float), inset 0 0 0 1px rgb(255 255 255 / 0.06); }
  8%, 22% {
    transform: translateX(10px);
    box-shadow: var(--fx-surface-float), inset 0 0 0 1px rgb(255 215 0 / 0.45), 0 0 24px rgb(255 215 0 / 0.18);
  }
}

/* ...e o ícone pulsa junto */
@keyframes cred-icon {
  0%, 30%, 100% { scale: 1; box-shadow: none; }
  8% { scale: 1.14; box-shadow: 0 0 0 6px rgb(255 215 0 / 0.12), 0 0 18px rgb(255 215 0 / 0.35); }
  22% { scale: 1; box-shadow: 0 0 0 0 rgb(255 215 0 / 0); }
}

@media (max-width: 899px) {
  .founder { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .founder__media { order: 2; width: min(100%, 440px); margin-block: 0; margin-inline-start: 0; }
  .founder__story { width: auto; justify-self: stretch; }

  /* No celular o amarelo encostava no topo da seção e virava um bloco
     chapado. A foto vira um card arredondado que recorta o desenho: só o
     canto amarelo com a diagonal fica dentro dele. As credenciais saem de
     cima do corpo e empilham logo abaixo da foto. */
  .ely-photo {
    aspect-ratio: 1 / 1;
    margin-top: 20%;
    border-radius: var(--radius-2xl);
    background: var(--surface-1);
    box-shadow: var(--fx-surface);
  }

  /* Símbolo da Programe no canto de cima à esquerda, sobre o amarelo
     (o desenho está espelhado): hexágono preto com o </> em amarelo
     (assets/logo-mark-dark.svg). Mesmo recuo do topo e da lateral. */
  .ely-photo::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 52px;
    aspect-ratio: 1;
    background: url(assets/logo-mark-dark.svg) center / contain no-repeat;
    pointer-events: none;
  }

  /* O card não corta mais tudo (a cabeça vaza pelo topo): o desenho
     amarelo é que se recorta no retângulo arredondado do card. Medidas em
     unidades do Figma (715 = 100cqw) a partir da caixa do desenho. */
  .ely-photo__shape {
    clip-path: inset(
      calc(886 * 100cqw / 715) calc(1247 * 100cqw / 715)
      calc(-141 * 100cqw / 715) calc(938 * 100cqw / 715)
      round var(--radius-2xl)
    );
  }

  /* Card mais baixo: quadrado, cortando a foto do peito para baixo. Sem o
     esmaecido do desktop: aqui ele caía no meio da camiseta e deixava ver o
     amarelo e o fio através do corpo. O card já corta o pé. */
  .ely-photo img {
    height: 120%;
    margin-top: -20%;
    object-fit: cover;
    object-position: 50% 0;
    translate: none;
    scale: none;
    -webkit-mask-image: none;
    mask-image: none;
    /* Corta embaixo e nos lados como o card; em cima fica livre */
    clip-path: inset(-30% 0 0 0 round 0 0 var(--radius-2xl) var(--radius-2xl));
  }

  /* Credenciais à esquerda do corpo, como no desktop, um pouco menores
     para não cobrir o rosto nem as mãos */
  .founder__creds {
    top: 52%;
    left: 4%;
    gap: 8px;
  }

  .founder__creds .cred {
    gap: 6px;
    padding-right: var(--space-2);
    font-size: 11px;
  }

  .founder__creds .cred .icon-tile {
    width: 24px;
    height: 24px;
  }

  .founder__creds .cred .icon-tile svg {
    width: 12px;
    height: 12px;
  }
}

/* Virada entre a história e as provas: as seis etapas do jeito tradicional
   acendem uma a uma na linha, são puxadas para a marca no centro e dali um
   fio desce até o título das provas. Tudo num ciclo só de 6s. */
.shift {
  position: relative;
  isolation: isolate;
  height: clamp(200px, 10vw + 120px, 260px);
  margin-top: var(--beat-sm);
}

.shift__line {
  position: absolute;
  inset: 38% 0 auto;
  height: 2px;
  container-type: inline-size;
  background: linear-gradient(90deg, transparent, var(--surface-3) 12%, var(--marker-line) 50%, var(--surface-3) 88%, transparent);
}

.shift__stage {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 1%);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-tertiary);
  transform: translate(-50%, -50%);
  animation:
    shift-lit 6s var(--ease-out) infinite both,
    shift-pull 6s var(--ease-out) infinite both;
  animation-delay: calc(var(--i) * 0.22s), 0s;
}

.shift__stage svg {
  width: 16px;
  height: 16px;
}

@keyframes shift-lit {
  0%, 4% { background: var(--surface-1); color: var(--text-tertiary); }
  8%, 60% { background: var(--brand); color: var(--on-brand); }
  64%, 100% { background: var(--surface-1); color: var(--text-tertiary); }
}

@keyframes shift-pull {
  0% { translate: 0; scale: 0.6; opacity: 0; }
  6% { translate: 0; scale: 1; opacity: 1; }
  34% { translate: 0; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  46%, 100% { translate: calc((50 - var(--x)) * 1cqw) 0; scale: 0.3; opacity: 0; }
}

/* Luz dourada que corre do centro para as pontas depois do encontro */
.shift__flare {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--brand) 50%, transparent);
  scale: 0 1;
  opacity: 0;
  animation: shift-flare 6s var(--ease-out) infinite both;
}

@keyframes shift-flare {
  0%, 46% { scale: 0 1; opacity: 0; }
  49% { opacity: 1; }
  72% { scale: 1 1; opacity: 0.7; }
  88%, 100% { scale: 1 1; opacity: 0; }
}

.shift__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #4a3c10 0%, #30270c 24%, #151107 48%, var(--ink-950) 100%);
  box-shadow: 0 12px 48px rgb(255 199 0 / 0.22), var(--stroke-in-dark);
  transform: translate(-50%, -50%);
  animation: shift-hit 6s var(--ease-out) infinite both;
}

.shift__orb img {
  width: 22px;
  height: 22px;
}

@keyframes shift-hit {
  0%, 44% { scale: 1; box-shadow: 0 12px 48px rgb(255 199 0 / 0.22), var(--stroke-in-dark); }
  48% { scale: 1.16; box-shadow: 0 0 0 1px rgb(255 215 0 / 0.55), 0 12px 64px rgb(255 199 0 / 0.6); }
  58%, 84% { scale: 1; box-shadow: 0 0 0 1px rgb(255 215 0 / 0.35), 0 12px 56px rgb(255 199 0 / 0.45); }
  100% { scale: 1; box-shadow: 0 12px 48px rgb(255 199 0 / 0.22), var(--stroke-in-dark); }
}

/* Fio que desce do centro até o título, com um pulso dourado */
.shift__wire {
  position: absolute;
  top: calc(38% + 30px);
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  overflow: hidden;
  background: linear-gradient(var(--marker-line), transparent);
}

.shift__wire span {
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  background: linear-gradient(transparent, var(--brand));
  translate: 0 -100%;
  animation: shift-drop 6s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

@keyframes shift-drop {
  0%, 50% { translate: 0 -100%; opacity: 1; }
  76% { translate: 0 230%; opacity: 1; }
  80%, 100% { translate: 0 230%; opacity: 0; }
}

@media (max-width: 599px) {
  .shift__stage { width: 28px; height: 28px; }
  .shift__stage svg { width: 14px; height: 14px; }
  .shift__orb { width: 48px; height: 48px; }
}

/* Provas */
.proofs { margin-top: var(--beat); }
.shift + .proofs { margin-top: var(--space-6); }

.proofs__title {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 1100px) {
  .proofs__title { max-width: none; }
}

.proof-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-12);
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
}

.proof-feature__copy {
  display: grid;
  gap: var(--space-8);
  padding-right: var(--space-4);
}

.timeline {
  display: grid;
  gap: var(--space-6);
}

.timeline__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}

.timeline__label {
  font: var(--weight-medium) 14px/1.3 var(--font-sans);
  color: var(--text-tertiary);
}

.timeline__value {
  font: var(--weight-semibold) 15px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.timeline__value--new { color: var(--text-marker); }

/* Prazo. A figura é um [data-play]: só toca com ela na tela e toca uma vez.
   Do jeito antigo: as seis etapas enchem em sequência linear (parecem uma
   barra só), cada uma acende o ícone e o nome logo embaixo dela, e o "cerca
   de 7 meses" entra no fim. Com a Programe: a barra inteira enche num
   estalo dourado, o check entra e o "1 dia" acende.
   O estado final é o estilo base: sem animação, a comparação já está pronta. */
.timeline {
  --step: 0.16s;
  --lead: 0.05s;
  --done: calc(var(--lead) + 6 * var(--step));
}

.timeline__bar {
  grid-column: 1 / -1;
  display: flex;
  gap: 3px;
  height: 36px;
}

/* Cada etapa é uma coluna: o segmento com o ícone e o nome centrado embaixo.
   O nome e o ícone herdam a mesma cor, então acendem juntos. */
.timeline__bar--old {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: auto;
}

.timeline__bar--old > span {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-width: 0;
  font: var(--weight-medium) 12px/1.2 var(--font-sans);
  white-space: nowrap;
  color: var(--text-tertiary);
  animation: stage-ink calc(var(--step) * 3) ease-out calc(var(--lead) + var(--i) * var(--step)) both;
}

.timeline__bar--old b {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 36px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

/* Hachura: tempo gasto, cinza de propósito, mas forte o bastante para
   ver cada etapa encher. Uma frente clara (::after) corre na ponta do
   preenchimento. */
.timeline__bar--old b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.2) 0 5px, rgb(255 255 255 / 0.08) 5px 10px),
    rgb(255 255 255 / 0.06);
  transform-origin: left;
  animation: stage-fill var(--step) linear calc(var(--lead) + var(--i) * var(--step)) both;
}

/* O ícone dá um pulo quando a etapa termina de encher: marca cada passo. */
.timeline__bar--old svg {
  width: 14px;
  height: 14px;
  animation: stage-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--lead) + (var(--i) + 0.6) * var(--step)) both;
}

/* Celular estreito: as colunas ficam com uns 40px e os nomes encostam.
   Eles passam a alternar em duas alturas, então cada um ganha o espaço de
   duas colunas. */
.timeline { container-type: inline-size; }

@container (max-width: 399px) {
  .timeline__bar--old > span { align-content: start; gap: 6px; font-size: 11px; }
  .timeline__bar--old > span:nth-child(even) { gap: 22px; }
  .timeline__label { font-size: 13px; white-space: nowrap; }
  .timeline__value { font-size: 14px; white-space: nowrap; }
}

.timeline__value:not(.timeline__value--new) {
  animation: value-in 0.35s var(--ease-out) calc(var(--done) - 0.1s) both;
}

/* Com a Programe a barra enche inteira de uma vez: o mesmo projeto pronto,
   num estalo, contra as seis etapas lentas de cima. Ao encher, ela pisca
   mais clara e o check entra no fim; depois fica pulsando o brilho, e um
   reflexo passa por ela de tempos em tempos. */
.timeline__bar--new {
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

.timeline__bar--new > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding-inline: var(--space-3);
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-650), var(--gold-500) 60%, var(--gold-400));
  box-shadow: 0 0 18px rgb(255 215 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.35);
  color: var(--gold-ink);
  transform-origin: left;
  animation:
    day-fill 0.25s cubic-bezier(0.5, 0, 0.1, 1) calc(var(--done) + 0.1s) both,
    day-flash 0.6s ease-out calc(var(--done) + 0.35s) both,
    day-pulse 2.4s ease-in-out calc(var(--done) + 1s) infinite;
}

.timeline__bar--new > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%) no-repeat;
  background-size: 50% 100%;
  animation: day-sheen 4s ease-in-out calc(var(--done) + 0.35s) infinite both;
}

.timeline__bar--new svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
  animation: day-check 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--done) + 0.3s) both;
}

.timeline__value--new {
  display: inline-block;
  transform-origin: right center;
  animation: day-value 0.5s var(--ease-out) calc(var(--done) + 0.15s) both;
}

@keyframes stage-fill {
  from { scale: 0 1; }
}

.timeline__bar--old b::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: 0 0 10px 2px rgb(255 255 255 / 0.45);
  opacity: 0;
  animation: stage-edge var(--step) linear calc(var(--lead) + var(--i) * var(--step)) both;
}

@keyframes stage-edge {
  0% { left: 0; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { left: calc(100% - 2px); opacity: 0; }
}

@keyframes stage-ink {
  0% { color: var(--text-muted); opacity: 0.45; }
  30% { color: var(--text-primary); opacity: 1; }
}

@keyframes stage-pop {
  0% { scale: 0.6; opacity: 0.4; }
  60% { scale: 1.3; opacity: 1; color: var(--text-primary); }
}

@keyframes value-in {
  from { opacity: 0; filter: blur(4px); }
}

@keyframes day-fill {
  from { scale: 0 1; }
}

@keyframes day-flash {
  0% { filter: brightness(1.2); box-shadow: 0 0 30px rgb(255 215 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.35); }
}

@keyframes day-pulse {
  50% { filter: brightness(1.08); box-shadow: 0 0 30px rgb(255 215 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.35); }
}

@keyframes day-sheen {
  0% { background-position: -100% 0; }
  30%, 100% { background-position: 200% 0; }
}

@keyframes day-check {
  from { opacity: 0; scale: 0.3; rotate: -20deg; }
}

@keyframes day-value {
  0% { opacity: 0; scale: 0.8; }
  50% { opacity: 1; scale: 1.12; text-shadow: 0 0 18px rgb(255 215 0 / 0.7); }
}

.proof-feature + .proof-feature { margin-top: var(--space-6); }

/* Print do sistema numa janela de app. Com a janela na tela ([data-play])
   o print desce devagar até o fim e volta; a .window--pan corre de lado,
   para prints mais largos que o quadro. Para no hover para dar leitura. */
.window {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  box-shadow: var(--fx-tile);
}

.window__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
}

.window__dots {
  display: flex;
  gap: 6px;
}

.window__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.window__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font: var(--weight-medium) 12px/1 var(--font-sans);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s, box-shadow 0.2s;
}

.window__url svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.window__go {
  margin-right: -2px;
  color: var(--text-marker);
  opacity: 0;
  translate: -3px 3px;
  transition: opacity 0.2s, translate 0.2s;
}

a.window__url:hover,
a.window__url:focus-visible {
  color: var(--text-primary);
  box-shadow: var(--fx-tile);
}

a.window__url:hover .window__go,
a.window__url:focus-visible .window__go {
  opacity: 1;
  translate: 0 0;
}

.window__view {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: size;
}

.window__view img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  animation: shot-scroll var(--dur, 18s) ease-in-out infinite alternate;
}

/* max-width: none: o reset do DS (img max-width 100%) achatava o print */
.window--pan .window__view img {
  width: auto;
  max-width: none;
  height: 100%;
  animation-name: shot-pan;
}

.window:hover .window__view img { animation-play-state: paused; }

@keyframes shot-scroll {
  0%, 8% { translate: 0 0; }
  92%, 100% { translate: 0 calc(-100% + 100cqh); }
}

@keyframes shot-pan {
  0%, 10% { translate: 0 0; }
  90%, 100% { translate: calc(-100% + 100cqw) 0; }
}

/* Prêmio: card largo com o "1º" grande à esquerda e um pódio à direita.
   Ao entrar na tela os degraus sobem (3, 2, 1), a marca pousa no topo do
   1º, os raios acendem e giram devagar, faíscas sobem em loop e um brilho
   passa pelo "1º" a cada 6s. */
.award {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  column-gap: var(--space-12);
  margin-top: var(--space-10);
  padding-inline: clamp(var(--space-8), 4vw, var(--space-16)) var(--space-12);
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(42% 70% at 80% 34%, rgb(255 215 0 / 0.16), transparent 70%),
    var(--surface-1);
  box-shadow: var(--fx-surface);
}

/* Fio dourado no topo, mais forte sobre o pódio */
.award::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--marker-line) 72%, transparent);
}

.award__copy {
  align-self: center;
  padding-block: var(--space-12);
}

/* Selo do prêmio: etiqueta do evento em cima, o "1º" entre dois ramos de
   louro dourados e "LUGAR" em versalete embaixo dele. As folhas brotam
   em sequência de baixo para cima quando o card entra. */
.award__event {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 14px 0 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 215 0 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 215 0 / 0.22);
  font: var(--weight-medium) 12px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-200);
  animation: award-in 0.9s 0.05s var(--ease-out) both;
}

/* No celular a etiqueta fica só com o evento: a frase logo abaixo já
   diz que foi uma competição de startups */
@media (max-width: 479px) {
  .award__event-long { display: none; }
}

.award__event { white-space: nowrap; }

.award__event svg {
  width: 14px;
  height: 14px;
  color: var(--gold-400);
}

.award__rank {
  --num: clamp(100px, 5vw + 48px, 144px);
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin-top: var(--space-6);
  font-family: var(--font-display);
  animation: award-in 0.9s 0.15s var(--ease-out) both;
}

.laurel {
  flex: none;
  width: calc(var(--num) * 0.58);
  height: calc(var(--num) * 1.16);
  overflow: visible;
  filter: drop-shadow(0 0 14px rgb(255 215 0 / 0.25));
}

.laurel--r { scale: -1 1; }

.laurel__stem {
  fill: none;
  stroke: var(--gold-600);
  stroke-width: 2;
  stroke-linecap: round;
}

.laurel ellipse {
  fill: var(--gold-400);
  transform-box: fill-box;
  transform-origin: center;
  animation: leaf-in 0.5s calc(0.4s + var(--i) * 0.045s) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.laurel g:nth-of-type(even) ellipse { fill: var(--gold-600); }

@keyframes leaf-in {
  from { scale: 0; opacity: 0; }
}

.award__medal {
  display: grid;
  justify-items: center;
  line-height: 0.85;
}

.award__num {
  font-size: var(--num);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.06em;
  /* Folga para o recorte do degradê não cortar o "1" nem o "º" */
  padding-inline: 0.1em;
  margin-inline: -0.1em;
  background: linear-gradient(100deg, var(--gold-300) 0%, var(--gold-500) 38%, var(--gold-50) 50%, var(--gold-500) 62%, var(--gold-650) 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: award-gleam 6s 1.4s var(--ease-out) infinite both;
}

/* Versalete com um fio de cada lado */
.award__place {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-3);
  font: var(--weight-semibold) 13px/1 var(--font-sans);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-200);
}

.award__place::before,
.award__place::after {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}

.award__place::after {
  /* o tracking deixa sobra depois da última letra */
  margin-left: -0.42em;
  background: linear-gradient(270deg, transparent, var(--gold-500));
}

.award__text {
  max-width: 24em;
  margin-top: var(--space-5);
  font-size: clamp(17px, 0.3vw + 15.5px, 19px);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: balance;
  animation: award-in 0.9s 0.3s var(--ease-out) both;
}

.award__text strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

@keyframes award-in {
  from { opacity: 0; translate: 0 14px; filter: blur(8px); }
}

@keyframes award-gleam {
  0% { background-position: 100% 0; }
  24%, 100% { background-position: 0 0; }
}

/* Pódio: três degraus encostados na base do card, que some num degradê */
.award__podium {
  --top: 58%;
  position: relative;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-2);
  height: 380px;
  /* Gira o ângulo dos raios; raios e código leem o mesmo valor */
  animation: award-spin 48s linear infinite;
}

.award__step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-850) 85%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), var(--stroke-in-dark);
  font: var(--weight-semibold) 22px/1 var(--font-display);
  color: var(--text-tertiary);
  mask-image: linear-gradient(#000 45%, transparent);
  animation: award-rise 0.9s calc(var(--i) * 0.14s) var(--ease-out) both;
}

.award__step--2 { height: 38%; }
.award__step--3 { height: 24%; }

.award__step--1 {
  height: var(--top);
  padding-top: var(--space-5);
  background: var(--brand-fill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 -12px 48px -12px rgb(255 199 0 / 0.55);
  font-size: 34px;
  font-weight: var(--weight-heavy);
  color: var(--on-brand);
  animation:
    award-rise 0.9s calc(var(--i) * 0.14s) var(--ease-out) both,
    award-hit 0.7s 1.1s var(--ease-out);
}

@keyframes award-rise {
  from { translate: 0 100%; }
}

/* O 1º acende no impacto da marca */
@keyframes award-hit {
  0% { filter: brightness(1.35); }
}

/* A marca cai no topo do 1º com um quique curto */
.award__orb {
  position: absolute;
  bottom: calc(var(--top) + var(--space-4));
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(circle, #4a3c10 0%, #30270c 24%, #151107 48%, var(--ink-950) 100%);
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.4), 0 12px 56px rgb(255 199 0 / 0.5);
  transform-origin: 50% 100%;
  animation:
    award-land 0.7s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    award-float 4s 1.6s ease-in-out infinite,
    award-squash 0.5s 1.1s var(--ease-out);
}

.award__orb img {
  width: 26px;
  height: 26px;
}

@keyframes award-land {
  from { opacity: 0; translate: 0 -48px; scale: 0.7; }
}

@keyframes award-float {
  50% { translate: 0 -5px; }
}

/* Achata no impacto e volta */
@keyframes award-squash {
  25% { scale: 1.16 0.86; }
  60% { scale: 0.96 1.05; }
}

/* Estouro no impacto (1.1s): um clarão atrás da marca e duas ondas de
   choque. O script solta o confete quando o clarão começa. */
.award__burst {
  position: absolute;
  bottom: calc(var(--top) + var(--space-4));
  left: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 240 170 / 0.95), rgb(255 199 0 / 0.4) 45%, transparent 70%);
  opacity: 0;
  animation: award-flash 0.9s 1.1s var(--ease-out);
}

.award__burst i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--gold-300), 0 0 24px 2px rgb(255 215 0 / 0.5);
  opacity: 0;
  animation: award-wave 1.1s calc(1.1s + var(--d, 0s)) var(--ease-out);
}

@keyframes award-flash {
  0% { opacity: 1; scale: 0.8; }
  100% { opacity: 0; scale: 4; }
}

@keyframes award-wave {
  0% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 6; }
}

/* Ângulo dos raios. Gira no pódio e desce para os raios e para o código,
   assim só a luz gira e os glifos ficam em pé. */
@property --award-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes award-spin {
  to { --award-a: 360deg; }
}

/* Raios atrás da marca: acendem no impacto e giram devagar */
.award__rays {
  position: absolute;
  bottom: calc(var(--top) + var(--space-4) + 32px);
  left: 50%;
  width: 380px;
  aspect-ratio: 1;
  margin-left: -190px;
  translate: 0 50%;
  background: repeating-conic-gradient(from var(--award-a), rgb(255 215 0 / 0.22) 0deg 2deg, transparent 2deg 15deg);
  mask-image: radial-gradient(closest-side, #000 12%, transparent);
  animation: award-glow 0.9s 1.1s var(--ease-out) both;
}

@keyframes award-glow {
  from { opacity: 0; scale: 0.5; }
}

/* Código dentro dos raios: campo de glifos dourados (modo "raio") recortado
   por um leque com o desenho dos raios, um pouco mais largo que o fio de
   luz, e que some para as pontas. Acende junto com os raios. */
.award__code {
  --glyph-gold: var(--gold-300);
  position: absolute;
  bottom: calc(var(--top) + var(--space-4) + 32px);
  left: 50%;
  width: 560px;
  height: 560px;
  margin-left: -280px;
  translate: 0 50%;
  pointer-events: none;
  mask-image:
    repeating-conic-gradient(from calc(var(--award-a) - 4deg), transparent 0deg, #000 4deg 6deg, transparent 10deg 15deg),
    radial-gradient(closest-side, #000 18%, transparent);
  mask-composite: intersect;
  animation: award-light 0.9s 1.1s var(--ease-out) both;
}

@keyframes award-light {
  from { opacity: 0; }
}

/* Confete do estouro (criado pelo script), por cima de tudo no card */
.award__confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Faíscas douradas que sobem da marca */
.award__sparks {
  position: absolute;
  bottom: calc(var(--top) + var(--space-4) + 32px);
  left: 50%;
}

.award__sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 8px rgb(255 215 0 / 0.8);
  opacity: 0;
  animation: award-spark 3.2s calc(1.6s + var(--d)) ease-out infinite;
}

@keyframes award-spark {
  0% { opacity: 0; translate: 0 0; scale: 1; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: var(--x) -110px; scale: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .award *,
  .award *::before { animation: none !important; }
  .award__sparks,
  .award__burst { display: none; }
}

.proofs__note {
  max-width: 62ch;
  margin: var(--beat-sm) auto 0;
  text-align: center;
  text-wrap: balance;
}

/* Duas linhas: a segunda começa no trecho em destaque */
@media (min-width: 1100px) {
  .proofs__note { max-width: none; }
}

@media (max-width: 899px) {
  .proof-feature { grid-template-columns: minmax(0, 1fr); }
  .proof-feature { padding: var(--space-4); }
  .proof-feature__copy { padding: 0 var(--space-2) var(--space-2); }
}

@media (max-width: 899px) {
  .award {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-6);
    background:
      radial-gradient(80% 40% at 50% 66%, rgb(255 215 0 / 0.16), transparent 70%),
      var(--surface-1);
    text-align: center;
  }
  .award__copy { padding-block: var(--space-10) 0; }
  .award__rank { margin-inline: auto; }
  .award__text { margin-inline: auto; }
  .award__podium {
    width: min(100%, 380px);
    height: 300px;
    margin: var(--space-6) auto 0;
  }
  .award__rays { width: 320px; margin-left: -160px; }
  /* Empilhado, a frase fica logo acima da marca: o leque some antes dela */
  .award__code {
    width: 320px;
    height: 320px;
    margin-left: -160px;
    mask-image:
      repeating-conic-gradient(from calc(var(--award-a) - 4deg), transparent 0deg, #000 4deg 6deg, transparent 10deg 15deg),
      radial-gradient(closest-side, #000 18%, transparent),
      linear-gradient(transparent 14%, #000 42%);
  }
}

/* ---------- Oferta ---------- */

.offer__head {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.offer__head .lead {
  max-width: 60ch;
  margin: var(--space-6) auto 0;
}

/* Fundo do Figma (80:1740), em .bg-panel: painel chanfrado um tom acima do
   preto, do topo da seção até 80px abaixo do bloco, com o filete dourado no
   topo. A forma é a do Figma, em tampas que escalam pela largura (split-panel-*.svg).
   O bloco precisa ser o primeiro da seção: o painel sobe até o topo dela. */

/* Painéis de 100vw (mais largos que a área útil quando há barra de
   rolagem) não geram rolagem lateral */
main { overflow-x: clip; }

.section:has(.bg-panel) { isolation: isolate; }

.bg-panel {
  position: relative;
  padding-bottom: var(--space-20);
}

/* Logo depois de um painel claro, o painel escuro desce um pouco: assim o
   filete não encosta na borda clara e as duas seções respiram. */
.section.theme-light + .section .bg-panel { margin-top: var(--beat-sm); }

.bg-panel::before,
.bg-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--section-y));
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
}

.bg-panel::before {
  bottom: 0;
  width: 100vw;
  background:
    linear-gradient(var(--divider-track), var(--divider-track)) 50% 0 / min(580px, 50%) 2px no-repeat,
    var(--ink-900);
  /* A forma não estica com a altura da caixa (distorcia nas seções altas,
     sobretudo no MacBook): os chanfros de cima e de baixo escalam só pela
     largura (585.5 de 1920, como no Figma) e o meio é reto. */
  --cap: calc(100vw * 585.5 / 1920);
  -webkit-mask:
    url(assets/split-panel-top.svg) 0 0 / 100% var(--cap) no-repeat,
    url(assets/split-panel-bottom.svg) 0 100% / 100% var(--cap) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--cap) - 1px) / 100% calc(100% - 2 * var(--cap) + 2px) no-repeat;
  mask:
    url(assets/split-panel-top.svg) 0 0 / 100% var(--cap) no-repeat,
    url(assets/split-panel-bottom.svg) 0 100% / 100% var(--cap) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--cap) - 1px) / 100% calc(100% - 2 * var(--cap) + 2px) no-repeat;
}

.bg-panel::after {
  width: 100px;
  height: 2px;
  background: var(--marker);
  box-shadow:
    0 1px 3px rgb(255 215 0 / 0.49),
    0 5px 5px rgb(255 215 0 / 0.43),
    0 12px 7px rgb(255 215 0 / 0.25),
    0 21px 8px rgb(255 215 0 / 0.07),
    0 33px 9px rgb(255 215 0 / 0.01);
}

/* Ao rolar até os planos, o filete dourado corre da ponta esquerda do
   trilho até o centro, crescendo no caminho. Preso ao scroll (view()),
   onde o navegador suporta; nos outros fica parado no centro. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bg-panel::after {
      animation: panel-marker linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes panel-marker {
  from { transform: translateX(-240%) scaleX(0.2); opacity: 0.3; }
  to   { transform: none; opacity: 1; }
}

/* Painel que divide a seção do Ely das provas (Figma 2070:2072): a mesma
   forma chanfrada do .bg-panel, só a metade de cima, esticada na largura
   da tela e com a altura acompanhando (585.5 de 1920); o meio é reto e o
   pé fecha com o chanfro espelhado. Começa um pouco acima da linha da virada. */
/* Por cima da foto do Ely, que desce para dentro dele */
.split-panel { position: relative; z-index: 1; }

.split-panel::before {
  /* Fecha com o chanfro de baixo 64px abaixo do conteúdo, antes do pé da
     seção: assim não gruda no painel dos planos logo depois. */
  --cap: calc(100vw * 585.5 / 1920);
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-8));
  bottom: calc(-1 * var(--space-16));
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  background: var(--ink-900);
  -webkit-mask:
    url(assets/split-panel-top.svg) 0 0 / 100% var(--cap) no-repeat,
    url(assets/split-panel-bottom.svg) 0 100% / 100% var(--cap) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--cap) - 1px) / 100% calc(100% - 2 * var(--cap) + 2px) no-repeat;
  mask:
    url(assets/split-panel-top.svg) 0 0 / 100% var(--cap) no-repeat,
    url(assets/split-panel-bottom.svg) 0 100% / 100% var(--cap) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--cap) - 1px) / 100% calc(100% - 2 * var(--cap) + 2px) no-repeat;
  pointer-events: none;
}

.billing-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-10) 0 var(--space-12);
}

.billing {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

.billing .tab {
  height: 40px;
  padding-inline: var(--space-5);
  background: transparent;
  box-shadow: none;
}

.billing .tab[aria-checked="true"] {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--elev-1);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
}

.plan--featured {
  padding-block: var(--space-12);
  background: var(--surface-accent);
  box-shadow: var(--fx-accent), var(--fx-surface-float);
}

.plan__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plan__top {
  display: grid;
  gap: var(--space-2);
}

.plan__mode {
  font: var(--weight-medium) 13px/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-marker);
}

.plan__name {
  font: var(--weight-semibold) clamp(22px, 0.38vw + 20.5px, 26px) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.plan--featured .plan__name { color: var(--text-accent); }

.plan__for {
  color: var(--text-secondary);
  text-wrap: pretty;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-height: 56px;
}

.plan__currency {
  align-self: flex-start;
  margin-top: 6px;
  font: var(--weight-medium) 18px/1 var(--font-display);
  color: var(--text-secondary);
}

.plan__amount {
  font: var(--weight-medium) clamp(44px, 0.76vw + 41px, 52px) / 1 var(--font-display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan__amount--text {
  align-self: flex-end;
  font-size: clamp(26px, 0.38vw + 24.5px, 30px);
  letter-spacing: -0.03em;
}

.plan__per {
  font-size: 15px;
  color: var(--text-secondary);
}

.plan__cta {
  justify-content: space-between;
  width: 100%;
}

/* Três colunas estreitas (960–1200): o botão de 56px com "Escolher plano
   Empresa" não cabia e empurrava o círculo para fora. Aperta o card e o
   botão só nessa faixa. */
@media (min-width: 960px) and (max-width: 1199px) {
  .plan { padding-inline: var(--space-6); }

  .plan__cta {
    --btn-pad-left: var(--space-4);
    gap: var(--space-2);
    font-size: 14px;
  }
}

.plan__list {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-6);
  box-shadow: inset 0 1px 0 var(--border-divider);
}

.plan__list li {
  display: flex;
  gap: var(--space-3);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Check dos planos: um hexágono (a forma do selo da marca) que gira para
   o lugar, desenha o traço e recebe um brilho, um item depois do outro,
   quando a lista chega na tela ([data-play]). No Empresa ele é dourado
   cheio. O estado de repouso é o final, então sem animação ele já aparece. */
.tick {
  --tick-ring: rgb(255 215 0 / 0.4);
  --tick-fill: color-mix(in srgb, var(--gold-500) 10%, var(--surface-1));
  --tick-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --tick-d: calc(0.3s + var(--n, 0) * 0.14s);
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 22px;
  color: var(--icon-accent);
  background: var(--tick-ring);
  clip-path: var(--tick-hex);
  animation: tick-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--tick-d) backwards;
}

.tick::before,
.tick::after {
  content: "";
  position: absolute;
}

.tick::before {
  inset: 1px;
  background: var(--tick-fill);
  clip-path: var(--tick-hex);
}

.tick::after {
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.6) 50%, transparent 70%);
  translate: 120% 0;
  animation: tick-glint 0.8s var(--ease-out) calc(var(--tick-d) + 0.5s) backwards;
}

.tick svg {
  position: relative;
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  /* o traço do #tick mede ~17,3 no viewBox de 24; medida real em vez de
     pathLength="1", que o Safari ignora dentro do sprite (o check sumia) */
  stroke-dasharray: 18 20;
  stroke-dashoffset: 0;
  animation: tick-draw 0.45s var(--ease-out) calc(var(--tick-d) + 0.2s) backwards;
}

.plan__list li:nth-child(2) { --n: 1; }
.plan__list li:nth-child(3) { --n: 2; }
.plan__list li:nth-child(4) { --n: 3; }

.plan--featured .tick {
  --tick-ring: var(--gold-200);
  --tick-fill: linear-gradient(var(--gold-400), var(--gold-650));
  color: var(--gold-ink);
}

.plan__list:not(.is-playing) .tick::after { animation-play-state: paused; }

@keyframes tick-in {
  from { opacity: 0; scale: 0.4; rotate: -60deg; }
}

@keyframes tick-draw {
  from { stroke-dashoffset: 19; }
}

@keyframes tick-glint {
  from { translate: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tick::after { animation: none; }
}

/* Nota dos créditos: um medidor de créditos ao lado da frase. Em loop de
   8s, as células se apagam uma a uma (você usa conforme constrói), o +
   acende quando sobram duas (só compra se precisar) e elas voltam. Quem
   conta as células gastas é --spent, um inteiro: ele anda em degraus. */
@property --spent {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.plans__foot {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: fit-content;
  max-width: 100%;
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
}

.plans__meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  padding: 12px 12px 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

.plans__cells {
  display: flex;
  gap: 3px;
  animation: credits-use 8s linear infinite;
}

.plans__cells i {
  /* apagada se estiver entre as --spent últimas */
  --off: clamp(0, var(--c) + var(--spent) - 7, 1);
  position: relative;
  width: 16px;
  height: 14px;
  background: rgb(255 255 255 / 0.08);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.plans__cells i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gold-300), var(--gold-650));
  opacity: calc(1 - var(--off));
  transition: opacity 0.35s var(--ease-out);
}

.plans__plus {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: var(--space-1);
  border-radius: 50%;
  color: var(--text-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-divider);
  animation: credits-plus 8s var(--ease-out) infinite;
}

.plans__plus svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}

.plans__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: balance;
}

.plans__note b {
  display: block;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

@keyframes credits-use {
  0%, 12% { --spent: 0; }
  58%, 64% { --spent: 6; }
  76%, 100% { --spent: 0; }
}

@keyframes credits-plus {
  0%, 54%, 82%, 100% { scale: 1; color: var(--text-tertiary); background: transparent; box-shadow: inset 0 0 0 1px var(--border-divider), 0 0 0 0 rgb(255 215 0 / 0); }
  60% { scale: 1.15; color: var(--gold-ink); background: var(--marker); box-shadow: inset 0 0 0 1px var(--gold-300), 0 0 0 0 rgb(255 215 0 / 0.5); }
  70% { scale: 1; color: var(--gold-ink); background: var(--marker); box-shadow: inset 0 0 0 1px var(--gold-300), 0 0 0 10px rgb(255 215 0 / 0); }
}

@media (max-width: 639px) {
  .plans__foot {
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5);
    text-align: center;
  }
}

.assure { margin-top: var(--beat); }

.assure__title {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.assure__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 960px;
  margin: var(--space-12) auto 0;
}

/* Os dois cards de garantia: luz dourada vindo do topo e fio dourado na
   borda, no mesmo tom do card do prêmio */
.vcard--assure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 0%, rgb(255 215 0 / 0.1), transparent 70%),
    var(--surface-1);
}

.vcard--assure::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 12%, var(--marker-line) 50%, transparent 88%);
}

/* Cena em vidro escuro: grade de pontos que some para as bordas e um
   halo dourado atrás do que se mexe */
.vcard--assure .vcard__scene {
  height: 200px;
  background:
    radial-gradient(50% 60% at var(--glow-x, 50%) 50%, rgb(255 215 0 / 0.14), transparent 72%),
    radial-gradient(circle, rgb(255 255 255 / 0.09) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.1));
  box-shadow: var(--fx-tile), inset 0 1px 0 rgb(255 255 255 / 0.05);
}

/* O sistema é seu: sai da Programe e vai para outro lugar */
.scene-own {
  --tile: 52px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* tudo pelo topo: o trilho desce metade do ícone e cai no centro dele */
  align-items: start;
  gap: var(--space-3);
  width: 100%;
}

.scene-own__slot {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font: var(--weight-medium) 12px/1.2 var(--font-sans);
  color: var(--text-tertiary);
}

.scene-own__slot .icon-tile {
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02));
  box-shadow: var(--fx-tile), 0 8px 20px rgb(0 0 0 / 0.4);
}

.scene-own__slot img {
  width: 24px;
  height: 24px;
}

/* Destino acende quando o sistema chega */
.scene-own__slot:last-child .icon-tile {
  animation: own-arrive 5s var(--ease-out) infinite;
}

.scene-own__slot:last-child {
  animation: own-arrive-label 5s var(--ease-out) infinite;
}

@keyframes own-arrive {
  0%, 40%, 80%, 100% { color: var(--text-secondary); box-shadow: var(--fx-tile), 0 8px 20px rgb(0 0 0 / 0.4); }
  48%, 68% {
    color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--marker-line), 0 0 0 6px rgb(255 215 0 / 0.08), 0 0 28px rgb(255 215 0 / 0.3);
  }
}

@keyframes own-arrive-label {
  0%, 40%, 80%, 100% { color: var(--text-tertiary); }
  48%, 68% { color: var(--text-primary); }
}

/* Trilho: tracejado de base e um feixe dourado que corre junto com o
   sistema e volta com ele */
.scene-own__track {
  position: relative;
  /* o sistema anda em cqw: a largura do trilho, sem mexer em left */
  container-type: inline-size;
  height: 0;
  margin-top: calc(var(--tile) / 2);
  border-top: 1px dashed var(--border-dashed);
}

.scene-own__track::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  translate: 0 -0.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(255 215 0 / 0), var(--brand));
  box-shadow: 0 0 10px rgb(255 215 0 / 0.5);
  transform-origin: left;
  animation: own-beam 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes own-beam {
  0%, 14% { scale: 0 1; opacity: 1; }
  46%, 66% { scale: 1 1; opacity: 1; }
  80%, 100% { scale: 1 1; opacity: 0; }
}

.scene-own__item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--on-brand);
  font: var(--weight-semibold) 12px/1 var(--font-sans);
  width: max-content;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    0 6px 18px rgb(255 215 0 / 0.28);
  translate: 0 -50%;
  will-change: translate;
  animation: own-move 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.scene-own__item svg {
  width: 14px;
  height: 14px;
}

/* Só translate, que o navegador anima fora do layout: fica liso no iPhone */
@keyframes own-move {
  0%, 14% { translate: 0 -50%; }
  46%, 66% { translate: calc(100cqw - 100%) -50%; }
  94%, 100% { translate: 0 -50%; }
}

/* Celular: o trilho fica curto e, no iPhone, o "Seu sistema" chegava a
   encostar nos ícones. Tudo um pouco menor para sobrar trilho. */
@media (max-width: 479px) {
  .vcard--assure .scene-own {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .scene-own__slot { font-size: 11px; }

  .vcard--assure .scene-own { --tile: 44px; }

  .scene-own__slot img {
    width: 20px;
    height: 20px;
  }

  .scene-own__item {
    gap: 5px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .scene-own__item svg {
    width: 12px;
    height: 12px;
  }
}

/* Segurança: escudo com ondas de radar e varredura; os checks acendem
   um por um */
.scene-shield {
  --glow-x: 26%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.scene-shield__emblem {
  position: relative;
  display: grid;
  place-items: center;
}

/* Ondas que saem do escudo */
.scene-shield__emblem b {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px rgb(255 215 0 / 0.5);
  animation: shield-wave 2.4s var(--d, 0s) ease-out infinite;
}

@keyframes shield-wave {
  from { opacity: 0.9; scale: 1; }
  to { opacity: 0; scale: 1.7; }
}

.scene-shield__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(160deg, #1d1b12, #0c0c0d) padding-box,
    linear-gradient(150deg, var(--gold-300), rgb(255 215 0 / 0.1) 45%, rgb(255 215 0 / 0.55)) border-box;
  color: var(--brand);
  box-shadow: 0 0 32px rgb(255 215 0 / 0.22), 0 10px 24px rgb(0 0 0 / 0.5);
}

.scene-shield__icon svg {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 8px rgb(255 215 0 / 0.55));
}

/* Varredura: faixa de luz que desce e sobe pelo escudo */
.scene-shield__icon i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgb(255 215 0 / 0.22) 85%, var(--brand) 100%);
  translate: 0 -100%;
  animation: shield-scan 2.4s ease-in-out infinite alternate;
}

@keyframes shield-scan {
  to { translate: 0 150%; }
}

.scene-shield__checks {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.scene-shield__checks > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
  box-shadow: var(--fx-tile);
  font: var(--weight-medium) 13px/1.2 var(--font-sans);
  color: var(--text-secondary);
  animation: check-row 4.5s var(--ease-out) infinite both;
  animation-delay: calc(var(--i) * 0.5s);
}

/* Check num selo redondo que enche de dourado */
.scene-shield__checks svg {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  animation: check-on 4.5s var(--ease-out) infinite both;
  animation-delay: calc(var(--i) * 0.5s);
}

@keyframes check-on {
  0% { opacity: 0.25; scale: 0.6; filter: grayscale(1); }
  8%, 84% { opacity: 1; scale: 1; filter: none; }
  96%, 100% { opacity: 0.25; scale: 0.6; filter: grayscale(1); }
}

@keyframes check-row {
  0%, 96%, 100% { color: var(--text-tertiary); }
  8%, 84% { color: var(--text-primary); }
}

@media (max-width: 479px) {
  .scene-shield { gap: var(--space-4); }
  .scene-shield__icon { width: 68px; height: 68px; }
  .scene-shield__icon svg { width: 30px; height: 30px; }
  .scene-shield__checks > span { font-size: 12px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-play] *,
  .gap__line::after,
  .cred,
  .cred .icon-tile {
    animation: none !important;
  }
}

@media (max-width: 959px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    max-width: 520px;
    margin-inline: auto;
  }

  .plan--featured {
    order: -1; /* no celular o recomendado vem primeiro */
    padding-block: var(--space-10) var(--space-8);
  }
}

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

/* ---------- Objeções ---------- */

/* Título à esquerda, preso no topo enquanto as perguntas rolam à direita.
   Abaixo de 1000px vira uma coluna: título em cima, perguntas embaixo. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12) var(--space-16);
  align-items: start;
}

.faq-layout__intro {
  position: sticky;
  top: calc(72px + var(--space-8));
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}

.faq-layout__intro .br-wide { display: none; }

/* Dúvida no WhatsApp: card branco com um toque da luz verde do canal, preso
   no topo junto com o título. O ícone pulsa como contato online. O verde é
   do WhatsApp e fica só aqui. */
.wa-card {
  --wa: #25d366;
  --wa-deep: #128c4a; /* o verde do canal em ícone sobre branco (4,3:1) */
  --wa-ink: #04210f;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: start;
  width: min(100%, 400px);
  margin-top: var(--space-4);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(85% 65% at 0% 0%, rgb(37 211 102 / 0.1), transparent 62%),
    var(--surface-1);
  box-shadow: var(--fx-card);
}

/* filete verde no topo, mais forte no canto do brilho */
.wa-card::before {
  content: "";
  position: absolute;
  inset: 0 30% auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(37 211 102 / 0), rgb(37 211 102 / 0.7) 35%, transparent);
  pointer-events: none;
}

.wa-card__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgb(37 211 102 / 0.1);
  color: var(--wa-deep);
  box-shadow: inset 0 0 0 1px rgb(37 211 102 / 0.3);
}

.wa-card__ico svg { width: 22px; height: 22px; }

.wa-card__ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgb(37 211 102 / 0.55);
  opacity: 0;
  pointer-events: none;
}

.wa-card__title {
  margin-top: var(--space-6);
  font: var(--weight-semibold) 24px/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.wa-card__text {
  margin-top: var(--space-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* círculo da seta à esquerda, como no WhatsApp: a seta aponta para baixo */
.wa-card__btn {
  margin-top: var(--space-6);
  padding: 0 var(--btn-pad-left) 0 calc((var(--btn-h) - var(--btn-icon)) / 2);
  background: linear-gradient(180deg, #13803f, #0a4f25);
  color: #fff;
  box-shadow:
    0 0 0 1px rgb(37 211 102 / 0.7),
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    inset 0 -1px 0 rgb(0 40 16 / 0.5),
    0 10px 24px -12px rgb(19 128 63 / 0.55);
}

.wa-card__btn .btn__icon {
  background: var(--wa-ink);
  color: var(--wa);
}

.wa-card__btn .btn__icon svg { rotate: 45deg; }

@media (hover: hover) {
  .wa-card__btn:hover {
    box-shadow:
      0 0 0 1px rgb(37 211 102 / 0.9),
      inset 0 1px 0 rgb(255 255 255 / 0.3),
      inset 0 -1px 0 rgb(0 40 16 / 0.5),
      0 14px 30px -12px rgb(19 128 63 / 0.7);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wa-card__ico::after { animation: wa-ping 2.4s var(--ease-out) infinite; }
}

@keyframes wa-ping {
  0% { opacity: 0.9; scale: 1; }
  70%, 100% { opacity: 0; scale: 1.45; }
}

/* Cada pergunta é um card. Aberta, o ícone acende em dourado, o "+" vira um
   "×" escuro e um filete dourado corre no topo. Uma aberta por vez
   (name="faq" no <details>). */
.faq--cards {
  display: grid;
  gap: var(--space-3);
  box-shadow: none;
}

.faq--cards .faq__item {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--fx-card);
  scroll-margin-top: calc(72px + var(--space-8));
  transition: box-shadow var(--dur-switch) var(--ease-out);
}

.faq--cards .faq__item::before {
  content: "";
  position: absolute;
  inset: 0 var(--space-10) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-650), transparent);
  opacity: 0;
  transition: opacity var(--dur-switch) var(--ease-out);
}

.faq--cards .faq__item[open] { box-shadow: var(--fx-card-float); }

/* Com o script, quem anima é a altura do card; o ::details-content do
   design system sai do caminho para não animar duas vezes */
.faq--cards.is-js .faq__item::details-content {
  block-size: auto;
  transition: none;
}
.faq--cards .faq__item[open]::before { opacity: 1; }

.faq--cards .faq__item > summary {
  grid-template-columns: 44px minmax(0, 1fr) 32px;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
}

.faq__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-tertiary);
  box-shadow: var(--fx-tile);
  transition:
    color var(--dur-switch) var(--ease-out),
    box-shadow var(--dur-switch) var(--ease-out);
}

.faq__ico svg { width: 20px; height: 20px; }

/* o anel que se espalha quando o ícone acende */
.faq__ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.faq--cards .faq__item[open] .faq__ico {
  background: var(--brand-fill);
  color: var(--on-brand);
  box-shadow: var(--bevel-top), inset 0 -1.5px 0 rgb(107 79 0 / 0.18), var(--glow-brand);
}

.faq--cards .faq__q { font-size: 18px; }
.faq--cards .faq__item[open] .faq__q { color: var(--text-primary); }

.faq__toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
  box-shadow: var(--fx-tile);
  transition:
    color var(--dur-switch) var(--ease-out),
    background-color var(--dur-switch) var(--ease-out);
}

.faq--cards .faq__toggle .faq__icon { width: 14px; height: 14px; color: inherit; }

.faq--cards .faq__item[open] .faq__toggle {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.faq--cards .faq__a {
  max-width: calc(var(--measure) + 44px + var(--space-20)); /* texto na medida, fora o recuo */
  padding: 0 var(--space-12) var(--space-6) calc(var(--space-4) + 44px + var(--space-4));
  text-wrap: pretty;
}

@media (hover: hover) {
  .faq--cards .faq__item:not([open]):hover { box-shadow: var(--fx-card-float); }
  .faq--cards .faq__item:not([open]):hover .faq__ico { color: var(--icon-accent); }
  .faq--cards .faq__item:not([open]):hover .faq__toggle { background: var(--surface-3); color: var(--text-primary); }
}

@media (prefers-reduced-motion: no-preference) {
  .faq--cards .faq__item[open] .faq__ico { animation: faq-lit var(--dur-enter) var(--ease-out); }
  .faq--cards .faq__item[open] .faq__ico::after { animation: faq-ring 700ms var(--ease-out); }
  .faq--cards .faq__item[open] .faq__a { animation: faq-answer var(--dur-enter) var(--ease-out) 60ms both; }
}

@keyframes faq-lit {
  0% { scale: 0.86; }
  55% { scale: 1.06; }
}

@keyframes faq-ring {
  from { opacity: 1; box-shadow: 0 0 0 0 rgb(255 215 0 / 0.55); }
  to { opacity: 1; box-shadow: 0 0 0 12px rgb(255 215 0 / 0); }
}

@keyframes faq-answer {
  from { opacity: 0; translate: 0 -6px; filter: blur(4px); }
}

/* Uma coluna: o título fica em cima e o card do WhatsApp desce para depois
   das perguntas (o invólucro some e os dois viram itens da grade). */
@media (max-width: 999px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-layout__intro { display: contents; }
  .faq-layout__intro .h2 { max-width: 760px; }
  .wa-card { order: 1; width: min(100%, 520px); margin-top: 0; }
}

@media (max-width: 599px) {
  .wa-card { padding: var(--space-6); }
  .wa-card__title { font-size: 22px; }
}

@media (max-width: 599px) {
  .faq--cards { gap: var(--space-2); }
  .faq--cards .faq__item { border-radius: var(--radius-lg); }
  .faq--cards .faq__item > summary {
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
  }
  .faq__ico { width: 40px; height: 40px; }
  .faq__toggle { width: 28px; height: 28px; }
  .faq--cards .faq__q { font-size: 16px; }
  .faq--cards .faq__a { padding: 0 var(--space-4) var(--space-5) calc(var(--space-3) + 40px + var(--space-3)); }
}

/* ---------- Fechamento ---------- */

.closing { isolation: isolate; }

/* O código só aparece dentro do ponto de luz do topo (.bg-glow-top) */
.closing .glyph-field {
  -webkit-mask: radial-gradient(34% 30% at 50% 0%, #000, rgb(0 0 0 / 0.45) 50%, transparent);
  mask: radial-gradient(34% 30% at 50% 0%, #000, rgb(0 0 0 / 0.45) 50%, transparent);
}

.closing__body {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  max-width: 820px;
  text-align: center;
}

.closing__body .lead { max-width: 44ch; }
.closing__body .btn { margin-top: var(--space-4); }

.closing { padding-bottom: 0; }

/* logo mais perto do título: o gap do grid (24px) menos 8px */
.closing__logo {
  width: 232px;
  height: auto;
  margin-bottom: calc(-1 * var(--space-2));
  filter: drop-shadow(0 10px 28px rgb(255 199 0 / 0.22));
}

/* ---------- Fechamento: o CRM que se monta ----------
   App de largura fixa, reto, que encolhe inteiro para caber (--k, ver
   script) e some embaixo. Por cima, o selo do que a Programe está fazendo
   naquele instante. */

.forge {
  --k: 1;
  position: relative;
  height: calc(var(--space-16) + 600px * var(--k));
  margin-top: var(--space-16);
}

/* luz dourada por baixo do plano */
.forge::before {
  content: "";
  position: absolute;
  inset: 8% 4% 0;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 40%, rgb(255 215 0 / 0.1), transparent 70%);
  pointer-events: none;
}

.forge__plane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 58%, transparent 98%);
  mask: linear-gradient(#000 58%, transparent 98%);
}

.forge__status {
  position: absolute;
  width: max-content;
  top: 0;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-5) 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: rgb(13 13 16 / 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--fx-surface-float), 0 0 0 1px rgb(255 215 0 / 0.14);
  font: var(--weight-medium) 15px/1 var(--font-sans);
  color: var(--text-secondary);
  white-space: nowrap;
}

.forge__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--warning-tint);
  transition: background-color var(--dur-switch) var(--ease-out);
}

.forge__spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 215 0 / 0.22);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: forge-spin 0.8s linear infinite;
}

@keyframes forge-spin {
  to { rotate: 1turn; }
}

@keyframes forge-check {
  from { opacity: 0; scale: 0.5; }
}

.forge__icon svg {
  display: none;
  width: 16px;
  height: 16px;
  color: var(--success-400);
  stroke-width: 2.6;
}

.forge__pct {
  min-width: 4ch;
  font: var(--weight-medium) 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  text-align: right;
}

.forge.is-done .forge__icon { background: var(--success-tint); }
.forge.is-done .forge__spin { display: none; }
.forge.is-done .forge__icon svg { display: block; animation: forge-check 0.4s var(--ease-out); }
.forge.is-done .forge__log { color: var(--text-primary); }
.forge.is-done .forge__pct { color: var(--success-400); }

/* O app em si: largura fixa, escalado por inteiro */
.crm {
  position: absolute;
  top: var(--space-16);
  left: 50%;
  width: 1240px;
  translate: -50% 0;
  transform-origin: 50% 0;
  scale: var(--k);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-950) 46%);
  box-shadow:
    var(--fx-surface-float),
    0 0 0 1px rgb(255 215 0 / 0.07),
    0 60px 120px -40px rgb(0 0 0 / 0.95);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: left;
}

.crm svg { flex: none; }

.crm__bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-4);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}

.crm__dots { display: flex; gap: 6px; }
.crm__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-600); }

.crm__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline: auto;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
  color: var(--text-secondary);
  font-size: 12px;
}

.crm__tab img { width: 14px; height: 14px; }

.crm__body {
  position: relative;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 640px;
  padding: var(--space-4);
  overflow: hidden;
}

/* varredura: desce pelo app e cada peça vira sólida quando ela passa */
.crm__scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-300) 20%, var(--gold-500) 50%, var(--gold-300) 80%, transparent);
  box-shadow: 0 0 22px 3px rgb(255 215 0 / 0.35);
  opacity: 0;
  pointer-events: none;
}

.crm__scan::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(transparent, rgb(255 215 0 / 0.07));
}

/* Barra lateral */
.crm__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--ink-900);
  box-shadow: var(--fx-tile);
}

.crm__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font: var(--weight-semibold) 15px/1 var(--font-display);
}

.crm__brand img { width: 22px; height: 22px; }

.crm__nav { display: grid; gap: 2px; }

.crm__nav span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.crm__nav svg { width: 16px; height: 16px; }

.crm__nav em {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font: var(--weight-medium) 11px/1.4 var(--font-sans);
  font-style: normal;
  color: var(--text-tertiary);
}

.crm__nav .is-on {
  background: var(--brand-fill);
  color: var(--on-brand);
  font-weight: var(--weight-semibold);
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.crm__made {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
  font-size: 11px;
  color: var(--text-tertiary);
}

.crm__made img { width: 20px; height: 20px; }
.crm__made span { display: grid; }
.crm__made b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Área principal */
.crm__main {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.crm__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-1) 0;
  border-radius: var(--radius-md);
}

.crm__title { display: grid; gap: 2px; }
.crm__title b { font: var(--weight-semibold) 20px/1.1 var(--font-display); letter-spacing: -0.02em; }
.crm__title small { color: var(--text-tertiary); font-size: 12px; }

.crm__actions { display: flex; align-items: center; gap: var(--space-2); }

.crm__search,
.crm__add {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
}

.crm__search { min-width: 200px; background: var(--surface-2); box-shadow: var(--fx-tile); color: var(--text-tertiary); }
.crm__add { background: var(--brand-fill); color: var(--on-brand); font-weight: var(--weight-semibold); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }
.crm__search svg,
.crm__add svg { width: 14px; height: 14px; }

.crm__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.crm__kpi {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background-color: var(--ink-900);
  box-shadow: var(--fx-tile);
}

.crm__kpi b {
  font: var(--weight-medium) 24px/1.1 var(--font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.crm__kpi small {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

.crm__kpi--hi { background-color: var(--gold-deep); box-shadow: var(--fx-accent); }

/* Rótulo + ícone no mesmo padrão do painel de pedidos (.kpi__head) */
.crm__kpi .kpi__icon { background: var(--surface-3); }

.crm__kpi--hi .kpi__label { color: var(--gold-200); }

.crm__kpi--hi .kpi__icon {
  background: rgb(255 215 0 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 215 0 / 0.3);
  color: var(--gold-400);
}

.crm__meter {
  height: 4px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.crm__meter i {
  display: block;
  width: 69%;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  transition: width 0.9s var(--ease-out);
}

/* Quadro do funil */
.crm__board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.crm__col {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 380px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.015);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.crm__list { display: grid; gap: 10px; }

.crm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 2px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

.crm__head span { display: flex; align-items: center; gap: var(--space-2); }
.crm__head i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }

.crm__head em {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font: var(--weight-medium) 11px/1.5 var(--font-sans);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.crm__card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background-color: var(--ink-800);
  box-shadow: var(--fx-tile), 0 1px 2px rgb(0 0 0 / 0.5);
  transition: box-shadow var(--dur-switch) var(--ease-out), scale var(--dur-switch) var(--ease-out);
}

.crm__who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.crm__who i {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: var(--fx-tile);
  font: var(--weight-semibold) 11px/1 var(--font-sans);
  font-style: normal;
  color: var(--text-secondary);
}

.crm__who b { overflow: hidden; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }

.crm__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.crm__meta b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.crm__meta small { color: var(--text-tertiary); font-size: 11px; }

.crm__card.is-won small { color: var(--success-text); }
.crm__card.is-won small::before { content: "✓ "; }

/* o card que vira negócio fechado sai do lugar levantado e com o filete dourado */
.crm__card.is-lifted {
  z-index: 2;
  scale: 1.04;
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.55), 0 18px 40px -12px rgb(0 0 0 / 0.9), 0 0 32px rgb(255 215 0 / 0.18);
}

/* lead que chega depois de pronto */
.crm__card--new:not(.is-arrived) { display: none; }
.crm__card--new { box-shadow: 0 0 0 1px rgb(255 215 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.5); }

.crm__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand) !important;
}

.crm__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgb(255 215 0 / 0.2);
}

/* Estados da montagem (só com JS): nada → esqueleto hachurado → sólido */
.crm [data-piece] {
  position: relative;
  transition:
    opacity 0.35s var(--ease-out),
    background-color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    scale var(--dur-switch) var(--ease-out);
}

.crm [data-piece] > * {
  transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
}

.crm [data-piece]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--marker-line);
  border-radius: inherit;
  background: var(--hatch-pending);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.forge.is-armed .crm [data-piece]:not(.is-sketch, .is-in) { opacity: 0; }

.forge.is-armed .crm [data-piece]:not(.is-in) {
  background-color: transparent;
  box-shadow: none;
}

.forge.is-armed .crm [data-piece]:not(.is-in) > * {
  opacity: 0;
  translate: 0 6px;
}

.forge.is-armed .crm [data-piece].is-sketch:not(.is-in)::after { opacity: 0.5; }

/* sem JS, a escala vem em degraus */
@media (max-width: 1199px) {
  .forge { --k: 0.8; }
}

@media (max-width: 899px) {
  .forge { --k: 0.6; margin-top: var(--space-12); }
}

@media (max-width: 599px) {
  .forge { --k: 0.27; }
  .forge__status { height: 42px; font-size: 13px; }
  .forge__icon { width: 28px; height: 28px; }
}

/* Texto por cima do CRM: os dois dividem a mesma célula do palco. O CRM
   vem primeiro e o texto sobe sobre a parte de baixo dele, onde a tela já
   some; o véu escuro atrás do texto segura o contraste.
   Abaixo de 900px o CRM fica pequeno demais e volta a vir depois do texto. */
@media (min-width: 900px) {
  .closing__stage {
    display: grid;
    padding-bottom: var(--space-20);
  }

  .closing__stage > * { grid-area: 1 / 1; }

  .closing__body {
    position: relative;
    z-index: 2;
    align-self: end;
  }

  .closing__body::before {
    content: "";
    position: absolute;
    inset: -24% -24% -12%;
    z-index: -1;
    background: rgb(7 7 10 / 0.86);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask: radial-gradient(closest-side, #000 52%, transparent);
    mask: radial-gradient(closest-side, #000 52%, transparent);
    pointer-events: none;
  }

  /* o espaço abaixo do CRM é onde o texto termina; cresce quando o CRM
     encolhe, para o texto não engolir mais da tela */
  .forge {
    align-self: start;
    margin-top: 0;
    margin-bottom: calc(var(--space-24) + 200px * (1 - var(--k)));
  }
}

/* ---------- Rodapé ---------- */

.footer--sales { padding: var(--space-12) 0; }

.footer--sales .footer__legal {
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
}

/* ---------- Painel do resultado ----------
   Layout do CRM do Figma (2056:16020) aplicado ao exemplo de pedidos:
   barra lateral escura, abas, indicadores com etiqueta mono, tabela e
   coluna lateral. O roxo do CRM vira o dourado da marca. */

.app {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
  background: var(--porcelain-150);
  box-shadow: var(--stroke-in-light), var(--elev-3);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: left;
}

.app svg { flex: none; }

/* Barra lateral */
.app__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  box-shadow: var(--fx-surface);
}

.app__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  font: var(--weight-semibold) 16px/1 var(--font-display);
  letter-spacing: -0.01em;
}

.app__brand img { width: 24px; height: 24px; }

.app__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
  color: var(--text-tertiary);
}

.app__search svg { width: 14px; height: 14px; }
.app__search .kbd { margin-left: auto; }

.app__nav {
  display: grid;
  gap: 2px;
}

.app__nav span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.app__nav svg { width: 16px; height: 16px; }

.app__nav em {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font: var(--weight-medium) 11px/1.4 var(--font-sans);
  font-style: normal;
  color: var(--text-tertiary);
}

.app__nav .is-on {
  background: var(--brand-fill);
  color: var(--on-brand);
  font-weight: var(--weight-semibold);
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.app__made {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
  font-size: 11px;
  color: var(--text-tertiary);
}

.app__made img { width: 20px; height: 20px; }
.app__made span { display: grid; }
.app__made b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Área principal */
.app__main {
  display: grid;
  /* minmax(0): sem ele o conteúdo mais largo empurra o painel para fora
     da borda direita no celular estreito */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--fx-surface);
}

.app__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app__tabs,
.app__seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.app__tabs span,
.app__seg span {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.app__tabs .is-on,
.app__seg .is-on {
  background: var(--ink-950);
  color: var(--porcelain-0);
}

.app__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app__user > span:last-child { display: grid; }
.app__user b { font-weight: var(--weight-semibold); }
.app__user small { font-size: 11px; color: var(--text-tertiary); }

.app__avatar,
.app__who i {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-900);
  font: var(--weight-semibold) 11px/1 var(--font-sans);
  font-style: normal;
}

.app__hello { display: grid; gap: 2px; }

.app__hello b {
  font: var(--weight-medium) 24px/1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.app__hello small { color: var(--text-tertiary); }

/* Indicadores */
.app__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.kpi {
  display: grid;
  gap: 4px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--fx-tile);
}

.kpi__label { color: var(--text-secondary); }

/* Painel de pedidos e CRM do fechamento: rótulo à esquerda, ícone num
   tile à direita */
.kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.kpi__head .kpi__label { font-weight: var(--weight-medium); white-space: nowrap; }

/* Card estreito demais para rótulo + ícone numa linha: fica só o rótulo */
.app__kpis .kpi { container-type: inline-size; }

@container (max-width: 180px) {
  .kpi .kpi__icon { display: none; }
}

.kpi__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--surface-1);
  box-shadow: var(--fx-tile);
  color: var(--icon-accent);
  font-size: 15px;
}

.kpi__value {
  font: var(--weight-medium) 26px/1.1 var(--font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kpi__delta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--text-tertiary);
}

.kpi__delta > .i { font-size: 12px; color: var(--success-text); }

.kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success-text);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.kpi__trend .i { font-size: 11px; stroke-width: 2.25; }

.kpi__trend--warn { background: var(--warning-tint); color: var(--warning-text); }

.kpi--hi {
  background: var(--brand-fill);
  color: var(--on-brand);
  box-shadow: 0 0 0 1px rgb(255 215 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.6), var(--glow-brand);
}

.kpi--hi .kpi__label,
.kpi--hi .kpi__delta { color: var(--gold-ink); opacity: 0.75; }

.kpi--hi .kpi__head .kpi__label { opacity: 0.85; }

.kpi--hi .kpi__icon {
  background: rgb(255 255 255 / 0.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55);
  color: var(--gold-ink);
}

.kpi--hi .kpi__delta { opacity: 1; color: rgb(23 19 10 / 0.7); }

.kpi--hi .kpi__trend {
  background: var(--gold-ink);
  color: var(--gold-200);
}

/* Na montagem, o tile do ícone entra um instante depois do card */
.mechanism.is-armed .kpi__icon {
  transition:
    opacity 300ms var(--ease-out) 80ms,
    scale 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms;
}

.mechanism.is-armed .kpi:not(.is-in) .kpi__icon {
  opacity: 0;
  scale: 0.5;
}

/* Pedidos e coluna lateral */
.app__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.app__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--fx-tile);
}

.app__card > b {
  font: var(--weight-semibold) 15px/1.2 var(--font-sans);
}

.app__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.app__card-head b { font: var(--weight-semibold) 15px/1.2 var(--font-sans); }

.app__seg { font-size: 12px; }

.app__table {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--fx-tile);
}

/* Pagamento, etapa e valor têm largura do conteúdo maior ("Aguardando",
   "Pronto · avisado"); só o nome do cliente encolhe (com reticências) */
.app__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 124px 64px;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}

.app__row:last-child { box-shadow: none; }

.app__row--head {
  background: var(--surface-2);
  font: var(--weight-medium) 10px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.app__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.app__who > span { display: grid; min-width: 0; }
.app__who b { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__who small { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app__stage {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.app__stage i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}

.app__value {
  justify-self: end;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Coluna do pagamento centraliza o selo na altura da linha */
.app__row > :nth-child(2) { display: flex; align-items: center; }

/* Selo de pagamento: pílula com ponto, sem caixa alta (o .status do DS
   continua igual fora do painel) */
.app .status {
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
  font: var(--weight-semibold) 11.5px/1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

.app .status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.app .status--success::before { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }

/* Selo "Automático" no card do aviso e rótulo com ícone do card da semana */
.app__auto,
.app__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.app__auto {
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  box-shadow: var(--fx-tile);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.app__auto .i { font-size: 13px; color: var(--icon-accent); }

.app__label { color: var(--text-secondary); }
.app__label .i { font-size: 15px; color: var(--icon-accent); }

.app__aside {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.app__notify { background: var(--surface-accent); box-shadow: var(--fx-accent); }

.app__msg {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  background: var(--surface-1);
  box-shadow: var(--fx-tile);
  color: var(--text-secondary);
}

.app__msg svg { width: 16px; height: 16px; margin-top: 1px; color: var(--success-text); }

.app__sent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app__sent small { font-size: 11px; color: var(--text-tertiary); }

.app__week > b {
  font: var(--weight-medium) 22px/1.1 var(--font-display);
  letter-spacing: -0.02em;
}

/* Sólido é recebido, hachurado é o que ainda falta receber (regra do DS) */
.app__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 76px;
}

.app__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: var(--ink-950);
}

.app__bars i.is-open { background: var(--hatch-build); }

.app__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.app__legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ink-950);
}

.app__legend i.is-open { margin-left: var(--space-2); background: var(--hatch-build); }

/* Até 1279px a tabela não cabe ao lado da coluna lateral: os dois cards
   da lateral descem para baixo dela, lado a lado */
@media (max-width: 1279px) {
  .app__grid { grid-template-columns: minmax(0, 1fr); }
  .app__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { display: none; }
}

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

@media (max-width: 699px) {
  .app { padding: var(--space-2); }
  .app__main { padding: var(--space-4); gap: var(--space-3); }
  .app__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__user > span:last-child { display: none; }
  .kpi__value { font-size: 20px; }
  .app__row { grid-template-columns: minmax(0, 1fr) auto; }
  .app__row > :nth-child(2) { justify-content: flex-end; }
  .app__row > :nth-child(3),
  .app__row > :nth-child(4) { display: none; }
  .app__card-head { flex-wrap: wrap; }
}

/* Abaixo de 360px um .grad de três palavras ("sabe o que precisa,") não
   cabe numa linha: ali ele pode quebrar */
@media (max-width: 359px) {
  .grad { white-space: normal; }
}

/* Celular estreito (até 399px): os cards dos indicadores ficam com uns
   100px. O rótulo quebra em duas linhas, o valor encolhe e o "vs. ontem"
   desce; as abas e os cards perdem um pouco de respiro. */
@media (max-width: 399px) {
  .app__main { padding: var(--space-3); }
  .kpi { padding: var(--space-3); }
  .kpi__head .kpi__label { white-space: normal; }
  .kpi__value { font-size: 18px; white-space: nowrap; }
  .kpi__delta { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .app__card { padding: var(--space-3); }
  .app__tabs span { padding: 5px 9px; }
}

/* ---------- Fundo das seções escuras ----------
   Do Figma "esfera" (2056:3725): luz suave entrando pela direita, para o
   preto não ficar chapado sem disputar com o conteúdo. */

.bg-orb { isolation: isolate; }

.bg-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 34% at 100% 56%, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.025) 55%, transparent 78%),
    radial-gradient(26% 30% at 0% 82%, rgb(255 255 255 / 0.04), transparent 75%);
}

/* Na seção do Ely os brilhos caíam nos cantos que sobram ao lado dos
   chanfros do painel cinza e desenhavam um retângulo claro ali. Sem
   brilho, o fundo fica igual ao dos planos. */
.act--founder.bg-orb::before { content: none; }

/* Chuva de código nas laterais (ver script, [data-rain]): só nas bordas,
   sumindo no alto e no pé da seção. Fica atrás de tudo, inclusive do brilho
   da esfera e do painel dos planos. */
.code-rain {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  --rain-lado: 30%;
  -webkit-mask:
    linear-gradient(90deg, #000, transparent var(--rain-lado), transparent calc(100% - var(--rain-lado)), #000),
    linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, #000, transparent var(--rain-lado), transparent calc(100% - var(--rain-lado)), #000),
    linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent);
  mask-composite: intersect;
}

.code-rain canvas {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
}

/* No celular o texto ocupa quase a largura toda: a chuva fica só na beirada */
@media (max-width: 700px) {
  .code-rain { --rain-lado: 16%; }
}

/* ---------- Cursor da marca ----------
   Desenhado e movido por cursor.js, só com mouse ou trackpad. Uma seta
   dourada com contorno de tinta, visível em fundo escuro, claro e sobre o
   botão dourado. Sobre link ou botão o logo salta ao lado da seta. Campo
   de formulário mantém o cursor do sistema. */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}

.has-cursor :is(input, textarea, select, [contenteditable=""], [contenteditable="true"]) {
  cursor: auto !important;
}

.cursor {
  --arrow-s: 1;
  --badge-s: 0;
  --badge-r: -14deg;
  --press: 1;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-switch) ease;
}

.cursor.is-on { opacity: 1; }
.cursor[data-mode="nativo"] { opacity: 0; }

.cursor[data-mode="link"] {
  --arrow-s: 0.9;
  --badge-s: 1;
  --badge-r: 0deg;
}

.cursor.is-down { --press: 0.82; }

.cursor__trail,
.cursor__tip {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* As caixas que seguem o ponteiro não têm largura: sem isso o reset de
   img/svg do DS (max-width: 100%) zera os desenhos */
.cursor svg { max-width: none; }

/* A ponta da seta (4.3, 4.3 no desenho) fica exatamente no ponteiro */
.cursor__arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  overflow: visible;
  translate: -4.3px -4.3px;
  transform-origin: 4.3px 4.3px;
  scale: calc(var(--arrow-s) * var(--press));
  fill: var(--gold-500);
  stroke: var(--ink-950);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
  transition: scale 260ms var(--spring);
}

/* O logo, embaixo e à direita da seta, longe do corpo dela */
.cursor__badge {
  position: absolute;
  top: 26px;
  left: 30px;
  width: 28px;
  height: auto;
  aspect-ratio: 28.24 / 19.45;
  overflow: visible;
  translate: -50% -50%;
  rotate: var(--badge-r);
  scale: calc(var(--badge-s) * var(--press));
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.3));
  transition:
    scale 380ms var(--spring),
    rotate 380ms var(--spring);
}

.cursor__hex {
  fill: var(--gold-500);
  stroke: var(--ink-950);
  stroke-width: 1;
}

.cursor__hex path,
.cursor__ping path { vector-effect: non-scaling-stroke; }

.cursor__code { fill: var(--ink-950); }

.cursor__ping {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: auto;
  aspect-ratio: 28.24 / 19.45;
  overflow: visible;
  fill: transparent;
  stroke: var(--gold-600);
  stroke-width: 1.5;
  opacity: 0;
}