/* =========================================================================
   Billions Creative — Landing Page v2
   Linguagem visual inspirada na família de páginas de produto da Apple:
   tipografia editorial em grande escala, paleta neutra + azul de ação,
   ritmo de seções em preto/branco/cinza, componentes em pílula, interações
   contidas (fade + leve deslocamento, sem efeitos de partícula).
   ========================================================================= */

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

/* ---------- Design tokens ---------- */
:root {
  /* Tipografia — pilha de sistema Apple, cai para Helvetica/Arial fora do ecossistema */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Cor — neutros da Apple (preto, branco, cinza claro/escuro) como base
     dominante; verde Billions como único acento de ação, no espírito
     disciplinado do azul único da Apple: uma cor, sempre a mesma, em
     todo lugar — nunca uma cor por seção. */
  --c-black: #000000;
  --c-ink: #1d1d1f;           /* cinza escuro (texto principal) */
  --c-ink-80: rgba(29,29,31,.8);
  --c-ink-60: rgba(29,29,31,.64);
  --c-gray: #6e6e73;          /* cinza médio */
  --c-gray-soft: #86868b;     /* cinza suave (texto secundário) */
  --c-hairline: #d2d2d7;      /* cinza claro (linhas/bordas) */
  --c-hairline-dark: rgba(255,255,255,.16);
  --c-surface: #ffffff;       /* branco */
  --c-surface-alt: #f5f5f7;   /* cinza muito claro (fundo de seção) */
  --c-surface-alt-2: #fbfbfd;
  --c-paper: #f5f1ed;         /* neutro quente opcional — já usado no confete da marca, aqui vira fundo alternativo pontual */
  --c-surface-dark: #000000;  /* preto */
  --c-surface-dark-2: #0a0a0c;
  --c-panel-dark: #1d1d1f;    /* cinza-carvão da Apple — usado tanto em cards sobre
                                 preto quanto como fundo de seção inteira (o tom que
                                 faltava: a Apple intercala preto puro com este
                                 carvão nas seções de conteúdo, reservando o
                                 branco/cinza claro só para o fechamento da página) */

  /* Billions Green — acento único de ação. Versão sólida para fundos
     claros (texto, ícones, bordas, links) e versão "mint" mais clara
     para fundos escuros, igual a Apple troca o azul de #0071e3 (claro)
     para #2997ff (escuro) mantendo a mesma cor conceitual. */
  --c-blue: #12b76a;
  --c-blue-hover: #17c976;
  --c-blue-active: #0e9a5a;
  --c-on-dark: #f5f5f7;
  --c-on-dark-soft: rgba(245,245,247,.68);
  --c-wa: #25D366;

  /* Gradiente Billions (mint → lima) — reservado para os poucos momentos
     "premium" da página: o CTA primário (o mesmo botão se repete no
     hero, no plano em destaque e no CTA final — é uma única ação, não
     vários botões diferentes) e o selo "Mais escolhido". Em todo o
     resto, usa-se a cor sólida acima. */
  --brand-grad: linear-gradient(135deg, #5be79b 0%, #bdfc6b 100%);
  --brand-grad-hover: linear-gradient(135deg, #6ff0a8 0%, #cbff85 100%);
  --brand-grad-active: linear-gradient(135deg, #46d488 0%, #a9e857 100%);
  --c-on-brand: #0b2e1c;
  --c-mint-dark-bg: #00D959;  /* Billions Mint — acento sólido sobre preto */

  /* Cor de contraponto (dourado) — segunda cor da marca, usada com a
     mesma disciplina do verde: poucos pontos fixos e sempre os mesmos
     (estrelas de avaliação + o plano Sob Medida), nunca espalhada por
     ícone/seção. Par claro/escuro no mesmo princípio do verde/mint. */
  --c-gold: #c8963e;         /* dourado sólido — fundo claro (estrelas) */
  --c-gold-dark: #e8b75c;    /* dourado sólido — fundo preto (plano Sob Medida) */

  /* Acentos vibrantes — camada extra sobre a base neutra (preto/grafite/
     branco/cinza), não uma paleta nova de fundo. Ação em azul (a mesma
     referência #0071e3 já citada no comentário do verde/mint acima, só
     que agora com token próprio), identidade em verde, energia em lima,
     e um trio editorial (amarelo/ciano/magenta) reservado a microdetalhes
     — nunca fundo de seção, nunca cor de card inteiro. */
  --color-action: #0071e3;        /* CTA primário — ação, não decoração */
  --color-action-hover: #0077ed;
  --color-action-active: #0068cc;
  --color-accent-green: #50ec83;  /* identidade — tom próprio, distinto do --c-mint-dark-bg (#5be79b) já em uso */
  --color-accent-lime: #8aff00;   /* energia/impacto — usar com menos frequência que o verde */
  --color-accent-yellow: #ffd500; /* editorial — ícones, números, microelementos */
  --color-accent-cyan: #00fcff;   /* editorial */
  --color-accent-purple: #fc00ff; /* editorial */

  /* Espaçamento / raio / sombra */
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 980px;
  --shadow-card: 0 20px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-card-dark: 0 24px 60px rgba(0,0,0,.45);
  /* Container idêntico ao da Apple: 87.5% de largura (gutter de 6.25% de
     cada lado) até o teto de 1260px — medido diretamente em
     apple.com/br/iphone-18-pro/ (.viewport-content), consistente em
     mobile, tablet e desktop. */
  --container: 1260px;
  --container-narrow: 820px;
  --container-width: 87.5%;
  /* Borda real do .container em qualquer largura de tela — 6.25vw até
     ~1440px, e a partir daí a metade do espaço sobrando pelo teto de
     1260px (a mesma conta que .container já faz com width+max-width).
     Usado para alinhar o primeiro item de carrosséis full-bleed com a
     borda do container, sem a aproximação fixa de 6.25vw "quebrar" em
     telas largas. */
  --container-edge: max(6.25vw, calc((100vw - var(--container)) / 2));

  /* Easing Apple — usado em quase toda transição/reveal da página */
  --ease: cubic-bezier(.28,.11,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-text);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.container {
  width: var(--container-width);
  max-width: var(--container);
  margin: 0 auto;
}
.container-narrow { width: var(--container-width); max-width: var(--container-narrow); margin: 0 auto; }

/* ---------- Tipografia editorial ---------- */
/* Medido direto em apple.com/br/iphone-18-pro/ (.ric-type-lockup-eyebrow,
   testado em "Vídeo Pro", "Sistema de câmera Pro", "Design" etc.): 21px,
   peso 600, cinza neutro #6e6e73 — sem cor de destaque, mesmo tom em
   toda a página (não muda por seção clara/escura). */
.eyebrow {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .011em;
  color: var(--c-gray);
  margin-bottom: 20px;
}
[data-theme="dark"] .eyebrow { color: var(--c-gray); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-ink); letter-spacing: -.015em; font-weight: 600; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--c-on-dark); }

h1 { font-size: clamp(40px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.015em; }
h3 { font-size: clamp(21px, 2vw, 28px); line-height: 1.2; letter-spacing: -.008em; font-weight: 600; }
h4 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.005em; }

p { font-size: 17px; line-height: 1.52; color: var(--c-gray); }
[data-theme="dark"] p { color: var(--c-on-dark-soft); }

.lead {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-ink-60);
  letter-spacing: -.005em;
  max-width: 640px;
}
[data-theme="dark"] .lead { color: var(--c-on-dark-soft); }

em { font-style: normal; color: inherit; }
/* Destaque de texto: cor sólida da marca em fundo claro; gradiente de
   texto (branco → lima) em fundo escuro, a pedido. */
.green-gradient { color: var(--c-blue); }
[data-theme="dark"] .green-gradient {
  background-image: radial-gradient(ellipse 160% 100%, #00d959 0, #fff 36%, #fff 100%);
  background-size: 140% 370%;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* mesma técnica do .green-gradient acima, cor de acento = azul de ação */
[data-theme="dark"] .green-gradient-azul {
  background-image: radial-gradient(ellipse 160% 100%, #0071e3 0, #fff 36%, #fff 100%);
  background-size: 140% 370%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  color: transparent;
}

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 18px; font-size: 19px; }

.c-blue { color: var(--c-blue); }
.c-orange { color: #d17d19; }
.c-teal { color: #0071a8; }
.c-lime { color: #1fae5f; }
[data-theme="dark"] .c-blue,
[data-theme="dark"] .c-orange,
[data-theme="dark"] .c-teal,
[data-theme="dark"] .c-lime { color: var(--c-mint-dark-bg); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.17;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease-out);
}
.btn:active { transform: scale(.98); }

/* CTA primário: azul de ação sólido (não mais o gradiente mint→lima) —
   "Explorar experiências", "Começar com o Express" (planos + CTA final).
   Sólido, sem gradiente, sem glow, sem sombra chamativa — estados de
   hover/active/foco consistentes. */
.btn-primary {
  background: var(--color-action);
  color: #fff;
  font-weight: 590;
}
.btn-primary:hover { background: var(--color-action-hover); }
.btn-primary:active { background: var(--color-action-active); }
.btn-primary:focus-visible { outline: 2px solid var(--color-action); outline-offset: 3px; }
[data-theme="dark"] .btn-primary:focus-visible { outline-color: #fff; }
.btn-icon-play { width: 14px; height: 14px; filter: brightness(0); opacity: .82; }

.btn-ghost-dark {
  background: transparent;
  color: var(--c-blue);
  padding: 13px 22px;
}
/* Link secundário de CTA: sempre a mesma cor do botão primário ao lado
   (--color-action, o azul de ação) — não mais o verde/mint. */
[data-theme="dark"] .btn-ghost-dark { color: var(--color-action); }
.btn-ghost-dark:hover { text-decoration: underline; }

.btn-header-contact {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 13px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.22);
}
.btn-header-contact:hover { background: rgba(255,255,255,.2); }
/* ponto de status do CTA: mesma anatomia do .scarcity .dot (6px + halo
   de 3px a 22%), na cor de acento sobre fundo escuro */
.header-cta-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-mint-dark-bg);
  box-shadow: 0 0 0 3px rgba(0,217,89,.22);
  flex-shrink: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  height: 52px;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.42);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background-color .4s var(--ease);
}
.site-header.scrolled { background: rgba(0,0,0,.62); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo-mark { width: 35px; height: 35px; flex-shrink: 0; }
.logo-wordmark { height: 15px; width: auto; display: block; }
/* a escrita some suavemente ao rolar (fica só o símbolo) e volta perto do
   topo — mesmo limiar do .scrolled (scrollTop > 24), sem estado novo */
.logo-text {
  max-width: 160px;
  opacity: 1;
  overflow: hidden;
  transition: max-width .4s var(--ease), opacity .3s var(--ease), margin-left .4s var(--ease);
}
.site-header.scrolled .logo-text { max-width: 0; opacity: 0; margin-left: -8px; }

.nav-pill { display: flex; }
.nav-links { display: flex; align-items: center; gap: 28px; position: relative; }
/* inativo = texto secundário sobre escuro (--c-on-dark-soft); ativo/hover =
   texto principal (--c-on-dark) */
.nav-links a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--c-on-dark-soft);
  transition: color .25s var(--ease);
  padding-bottom: 2px;
}
.nav-links a:hover { color: var(--c-on-dark); }
.nav-links a.is-active { color: var(--c-on-dark); }
/* indicador: fio de 1px (a mesma espessura das bordas hairline do sistema)
   na cor de texto secundário — sem acento verde, sem peso de underline */
.nav-indicator {
  position: absolute; bottom: -9px; left: 0; height: 1px; width: 0;
  background: var(--c-on-dark-soft);
  opacity: 0;
  transition: left .38s var(--ease), width .38s var(--ease), opacity .3s var(--ease);
}
.nav-indicator.is-visible { opacity: 1; }

/* foco: outline 2px + offset 3px (designSystemBillionsApple.md, seção 5) */
.site-header a:focus-visible,
.nav-toggle:focus-visible,
.nav-sheet a:focus-visible {
  outline: 2px solid var(--c-on-dark);
  outline-offset: 3px;
}

/* ---------- Menu mobile ---------- */
/* Botão: 44×44px = alvo de toque mínimo das HIG da Apple. As barras têm a
   largura do .logo-mark (20px), espessura hairline (1px) e ficam a 8px uma
   da outra (o gap do .logo). margin-right = (44 − 20) / 2, para as barras
   alinharem com a borda do .container. */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -12px;
}
.nav-toggle-bar {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 1px;
  background: var(--c-on-dark);
  transition: transform .4s var(--ease);
}
.nav-toggle-bar:first-child { transform: translateY(-4px); }
.nav-toggle-bar:last-child { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: rotate(-45deg); }

/* Folha em tela cheia: fundo sólido (--c-surface-dark) para contraste máximo
   sobre qualquer seção; fade de .4s var(--ease), o mesmo tempo/curva da
   transição do header. Fica logo abaixo do header (z-index 500) e acima do
   .wa-float (400). */
.nav-sheet {
  position: fixed; inset: 0; z-index: 499;
  display: none;
  background: var(--c-surface-dark);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
  overscroll-behavior: contain;
}
.nav-sheet.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
/* laterais = .container (classe no HTML). Topo = 68px, o mesmo recuo que as
   âncoras já usam para compensar a nav fixa (scroll-margin-top). Base = 22px,
   o afastamento da borda do .wa-float. Ambos somados à safe area. */
.nav-sheet-inner {
  height: 100%;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding-top: calc(68px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
/* Itens: tipografia do h3 do projeto no teto do clamp (28px / 1.2 / -.008em
   / 600), altura mínima de 44px (HIG). Entrada = "link-in" da Apple
   (designSystemBillionsApple.md, 8.1): opacity + translateY(-4px), 320ms,
   stagger de 40ms (--motion-delay-short). */
.nav-sheet-links li,
.nav-sheet-cta {
  opacity: 0; transform: translateY(-4px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.nav-sheet-links a {
  display: flex; align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.008em;
  color: var(--c-on-dark-soft);
  transition: color .25s var(--ease);
}
.nav-sheet-links a:hover, .nav-sheet-links a.is-active { color: var(--c-on-dark); }
/* CTA: tamanho do .btn base (17px, padding 13px 24px) com o material do
   .btn-header-contact */
.nav-sheet-cta {
  margin-top: auto;
  width: 100%;
  font-size: 17px;
  padding: 13px 24px;
  transition: background-color .3s var(--ease), opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.nav-sheet.is-open .nav-sheet-links li,
.nav-sheet.is-open .nav-sheet-cta { opacity: 1; transform: none; }
.nav-sheet.is-open .nav-sheet-links li:nth-child(2) { transition-delay: 40ms; }
.nav-sheet.is-open .nav-sheet-links li:nth-child(3) { transition-delay: 80ms; }
.nav-sheet.is-open .nav-sheet-links li:nth-child(4) { transition-delay: 120ms; }
.nav-sheet.is-open .nav-sheet-cta { transition-delay: 0s, 160ms, 160ms; }

/* com o menu aberto o header vira parte da folha: sem segunda camada de vidro */
.site-header.menu-open { background: transparent; }
html.nav-locked, html.nav-locked body { overflow: hidden; }

@media (max-width: 900px) {
  .nav-pill, .header-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-sheet { display: block; }
}

/* âncoras compensam a altura da nav fixa ao rolar suavemente até a seção */
main [id] { scroll-margin-top: 68px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-stagger.visible > * { opacity: 1; transform: none; }

/* leve profundidade no scroll da hero e da vitrine — desligado com prefers-reduced-motion via JS */
.hero-title-stage, .hero-showcase-frame { will-change: transform; }
body.has-motion .hero-title-stage { transition: transform .1s linear; }
body.has-motion .hero-showcase-frame { transition: transform .1s linear; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }

/* ---------- Barra de progresso de leitura ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--c-blue); z-index: 600; transition: width .1s linear;
}

/* =========================================================================
   HERO
   ========================================================================= */
/* A hero ocupa a primeira viewport: texto no topo e a composição de
   experiências preenchendo o restante, cortada pela base da seção (sem
   padding-bottom — o corte faz parte do recorte das interfaces). */
.hero {
  position: relative;
  background: linear-gradient(180deg, #000 0%, #060607 60%, #0c0c0e 100%);
  padding: 168px 0 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
}
/* grade sutil sobre o fundo — a mesma textura de "grid de estúdio" da
   versão anterior, mascarada para sumir antes de 72% da altura do hero */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
/* holofotes: mesmo efeito da versão anterior — um "foco de luz" que
   respira no topo e 5 fachos cônicos (conic-gradient) balançando de
   forma independente, mix-blend-mode:screen para clarear sem esbranquiçar
   o fundo, mascarados verticalmente para sumir nas pontas. */
.hero-light-waves { position: absolute; inset: 0; top: -150px; z-index: 1; overflow: hidden; pointer-events: none; isolation: isolate; opacity: .7; }
.hero-light-waves::before {
  content: "";
  position: absolute; left: 50%; top: -240px; width: min(42vw, 560px); height: 210px;
  transform: translateX(-50%); border-radius: 50%; opacity: .5;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 34%, transparent 72%);
  filter: blur(34px);
  animation: light-source-breathe 6s ease-in-out infinite;
}
.light-beam {
  position: absolute; top: -22%; left: -15%; width: 130%; height: 130%;
  transform-origin: 50% 0; opacity: .72; mix-blend-mode: screen; filter: blur(26px);
  background: conic-gradient(at 50% 0%,
    transparent 0deg 166deg,
    rgba(255,255,255,.025) 170deg,
    rgba(255,255,255,.16) 174deg,
    rgba(255,255,255,.52) 180deg,
    rgba(255,255,255,.16) 186deg,
    rgba(255,255,255,.025) 190deg,
    transparent 194deg 360deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, rgba(0,0,0,.94) 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, rgba(0,0,0,.94) 64%, transparent 100%);
  /* ângulo/esticamento vêm de assets/js/index-v2.js (updateHeroBeams) —
     soma de senoides fora de fase por facho + leve resposta ao cursor,
     interpolada quadro a quadro (lerp), em vez do sway CSS linear
     anterior (que oscilava só entre dois ângulos fixos). Sem JS/motion,
     os valores abaixo por variante ficam como ângulo estático. */
  transform: rotate(var(--beam-rotation, 0deg)) scaleX(var(--beam-stretch, 1));
  will-change: transform, opacity;
}
.light-beam--1 { --beam-rotation: -34deg; opacity: .62; }
.light-beam--2 { --beam-rotation: -17deg; opacity: .75; }
.light-beam--3 { --beam-rotation: 0deg; opacity: .86; }
.light-beam--4 { --beam-rotation: 17deg; opacity: .75; }
.light-beam--5 { --beam-rotation: 34deg; opacity: .62; }
@keyframes light-source-breathe {
  0%, 100% { opacity: .36; transform: translateX(-50%) scale(.94); }
  50% { opacity: .56; transform: translateX(-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .light-beam, .hero-light-waves::before { animation: none !important; }
}
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
/* eyebrow discreto: texto secundário sobre escuro em vez do acento mint
   (mesmo tratamento na abertura do manifesto — início de novo capítulo) */
.hero .eyebrow,
.manifesto-open .eyebrow,
.experiences-intro .eyebrow,
.how-head .eyebrow,
.speed-head .eyebrow,
.custom-head .eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-on-dark-soft);
  margin-bottom: 20px;
}
.hero-title-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* sem max-width: com o h1 do projeto (clamp até 88px) a linha mais longa
   ("para parecer igual aos outros.") mede ≈12.4em, sempre dentro dos 87.5%
   do .container — a quebra depois de "nasceu" se mantém no desktop */
.hero h1 { text-align: center; }
.hero h1 br { display: block; }

.scarcity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(245,245,247,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 7px 14px 7px 10px;
  border-radius: var(--radius-pill);
}
.scarcity strong { color: #fff; font-weight: 600; }
.scarcity .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5f56; box-shadow: 0 0 0 3px rgba(255,95,86,.22);
  flex-shrink: 0;
}
.scarcity-mobile { display: none; margin-top: 4px; }

.hero .lead {
  text-align: center;
  max-width: 620px;
  margin: 22px auto 0;
  color: rgba(245,245,247,.72);
}

.hero-ctas { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.hero-ctas .btn-primary { padding: 15px 28px; font-size: 17px; }
/* Link secundário sempre na mesma cor do CTA primário ao lado — azul de
   ação, não mais neutro-com-hover-mint. */
.hero-ctas .btn-ghost-dark { color: var(--color-action); font-size: 17px; }
.hero-ctas .btn-ghost-dark:hover,
.hero-ctas .btn-ghost-dark:focus-visible { color: var(--color-action-hover); }

/* Composição: o palco ocupa a largura toda (full-bleed, design system 4.2)
   para as telas de trás poderem sangrar pelas laterais; a tela principal
   tem a largura de --container-narrow (820px), limitada à do .container.
   Distância do texto = 56px, o margin-bottom do .section-head (cabeçalho →
   conteúdo), + 38px = o espaço que a microcopy removida ocupava (22px de
   margem + 1 linha Caption de 16px), preservado como respiro para a
   composição não subir em direção aos CTAs. Piso de altura = ¼ da tela
   principal (820 × 1025/1640 ÷ 4), para a experiência nunca sumir em telas
   baixas. A base some num fade que começa em 60%, a mesma parada do
   gradiente de fundo da .hero. */
.hero-stage {
  position: relative;
  flex: 1 0 auto;
  min-height: calc(var(--container-narrow) * .15625);
  margin-top: calc(56px + 38px - 16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
/* a máscara recorta tudo fora da caixa do palco: as camadas descem os
   mesmos 16px que as telas de trás sobem (e o palco sobe 16px acima), para
   nenhuma borda ser cortada — a tela principal continua a 56px do texto */
.hero-layer { position: absolute; inset: 16px 0 0; }
.hero-layer--main { z-index: 1; }
/* superfície: raio de card (--radius-l), borda hairline e sombra de card
   escuro já usadas no projeto */
.hero-screen {
  position: absolute; top: 0; left: 50%;
  width: min(var(--container-narrow), var(--container-width));
  transform: translateX(-50%);
  border-radius: var(--radius-l);
  border: 1px solid var(--c-hairline-dark);
  box-shadow: var(--shadow-card-dark);
  background: var(--c-panel-dark);
  overflow: hidden;
}
.hero-screen img { width: 100%; height: auto; }
/* Planos de fundo: a mesma linguagem de profundidade dos .stack-card (card
   de trás: scale .94, translateY -16px, opacity .55 — ver updateStackCards
   no JS), deslocados ¼ da largura da tela principal para cada lado: só
   uma faixa de ¼ aparece, com o canto arredondado visível — lê-se como um
   objeto atrás, não como uma faixa contínua até a borda da tela.
   --hero-depth é o parallax (JS, mesmo fator e limite do .hero-title-stage). */
.hero-screen--back {
  opacity: .55;
  transform-origin: 50% 0;
  transform: translate(calc(-50% + var(--hero-shift)), calc(-16px + var(--hero-depth, 0px))) scale(.94);
}
.hero-layer--left .hero-screen--back { --hero-shift: -25%; }
.hero-layer--right .hero-screen--back { --hero-shift: 25%; }

/* Transição hero → próxima seção: faixa própria abaixo da composição (a
   composição termina no fade antes dela, então o texto nunca fica sobre as
   imagens). Tipografia = papel "Caption" do design system (seção 1.2 —
   12px / 1.3334 / -0.01em) em texto secundário; "Continue" com o mesmo
   caixa-alta/tracking do eyebrow da hero. Itens a 8px (gap do .logo); base
   a 22px da borda (afastamento do .wa-float) + safe area. */
.hero-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* margin-top:auto: com a .hero-stage removida, é o .hero-hint quem
     agora preenche o espaço flex restante do .hero (min-height:100vh) e
     fica no rodapé da tela — o mesmo papel que .hero-stage tinha antes. */
  margin-top: auto;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  line-height: 1.3334;
  letter-spacing: -.01em;
  color: var(--c-on-dark-soft);
}
.hero-hint p { margin-top: 20px; font-size: inherit; line-height: inherit; color: inherit; }
/* fade-out ligado ao scroll (updateHeroExit, index-v2.js) — mesmo
   tratamento .1s linear do .hero-title-stage: suaviza entre os frames do
   rAF sem competir com a atualização por scroll. */
.hero-hint { will-change: opacity, transform; }
body.has-motion .hero-hint { transition: opacity .1s linear, transform .1s linear; }

/* Indicador de scroll: cápsula (pill) com um chevron subindo em loop —
   substitui o antigo par "Continue" + "↓". Geometria e cor extraídas por
   amostragem de pixel direto da imagem de referência do usuário:
   32×86px (proporção ~1:2.7, medida na referência), borda 2px na cor
   exata da amostra (rgb(253,79,2) ≈ #fd4f02), chevron branco. overflow:
   hidden recorta o chevron nas bordas da cápsula enquanto ele sobe,
   criando o efeito de "entra por baixo, sai por cima". */
.hero-hint-scroll {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 32px;
  height: 86px;
  border: 1px solid #444;
  border-radius: var(--radius-pill);
  padding-bottom: 14px;
  overflow: hidden;
}
.hero-hint-scroll-arrow {
  width: 14px;
  height: 14px;
  color: var(--c-on-dark);
  animation: hero-hint-scroll-rise 1.8s var(--ease) infinite;
}
/* sobe de dentro da cápsula (baixo) para fora (cima), com fade nas duas
   pontas — sinaliza "role a tela" sem depender de texto. Distância de
   viagem proporcional à altura nova da cápsula (86px). Respeita
   prefers-reduced-motion via a regra global do topo do arquivo
   (animation-duration: .001ms !important). */
@keyframes hero-hint-scroll-rise {
  0% { transform: translateY(28px); opacity: 0; }
  35% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}

/* ---------- Destaques (seção própria — separada do hero) ---------- */
/* Sem overflow-x aqui: a seção não tem mais carrossel horizontal (virou
   pilha vertical de cards), e overflow em qualquer eixo num ancestral
   quebra position:sticky dos .stack-card (cria um novo contexto de
   rolagem, e o sticky para de "ver" o scroll da página). */
/* Continuidade com o fundo da hero: começa exatamente no --0c0c0e da
   base do gradiente da hero (mesmo tom, sem corte de cor) e só then aquece
   até o carvão --1d1d1f em ~640px — bem mais gradual que a transição
   antiga (só os últimos 3% de uma seção com milhares de px de altura,
   praticamente um corte). O glow abaixo ecoa o holofote da hero por cima
   dessa transição, para a luz também "continuar", não só a cor. */
.highlights {
  position: relative;
  background: linear-gradient(180deg, #0c0c0e 0, #151517 260px, #1d1d1f 640px);
  padding: 128px 0 0; /* mesmo ritmo vertical de 128px/88px (desktop/mobile) usado em todas as seções da página */
}
.highlights::before {
  content: "";
  position: absolute; left: 50%; top: -60px; z-index: -1;
  width: min(62vw, 780px); height: 520px;
  /* opacity/scale ligados a --hero-exit-glow (updateHeroExit, index-v2.js,
     0→1 conforme a Hero termina) — padrão 1 preserva a aparência estática
     de sempre sem JS/motion reduzido. Escala .85→1: "nascer e crescer",
     nunca some do zero (pedido: "scale muito pequeno"). */
  opacity: var(--hero-exit-glow, 1);
  transform: translateX(-50%) scale(calc(.85 + .15 * var(--hero-exit-glow, 1)));
  background: radial-gradient(ellipse at center, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 45%, transparent 76%);
  filter: blur(48px);
  pointer-events: none;
}
body.has-motion .highlights::before { transition: opacity .1s linear, transform .1s linear; }

/* ---------- Pilha sticky: cada `.chapter` é UM CARD completo (imagem +
   legenda na mesma superfície) que gruda (position:sticky) num `top`
   ESCALONADO por índice — o card seguinte sobe e cobre o anterior,
   deixando uma tira visível dele no topo (efeito de pilha/deck). Só um
   leve scale no card sendo coberto é calculado em updateStackCards(),
   no JS — o resto do movimento é 100% CSS (sticky nativo). */
/* Mesmo valor do padding-top de .highlights (128px): a seção fica
   simétrica consigo mesma, em vez de usar um número solto. */
.stack-wrap { position: relative; padding-bottom: 128px; margin-top: 40px; } /* 40px: respiro extra entre a abertura e o 1º card — 32px (o "grande respiro" do projeto) + 8px, o incremento do passo de radius (--radius-m − --radius-s) */
.chapter {
  position: sticky;
  width: min(90vw, 1050px); /* teto ajustado a pedido */
  max-width: 100%;
  margin: 0 auto 140px; /* orçamento de rolagem entre cards — valor próprio, também usado por updateStackCards() (index-v2.js) */
  /* 18–22px pedido = --radius-m (18px), já o token do sistema — sem
     inventar valor novo (design system, princípio 0). */
  border-radius: var(--radius-m);
  overflow: hidden; /* recorta imagem + legenda como UMA peça só, cantos únicos */
  /* Sem borda, sem sombra de card: a sofisticação vem de imagem, escala,
     tipografia e espaço — não de "chrome" de UI. A separação entre os
     cards empilhados já é legível pela própria tira/peek + z-index. */
  transform-origin: 50% 0%;
  will-change: transform;
  /* Card = coluna flex (imagem + legenda). A legenda pede sua altura de
     conteúdo (flex: 0 0 auto) e a imagem preenche o resto (flex: 1 1 auto),
     dentro de um teto de altura (abaixo) — assim os dois SEMPRE cabem
     juntos na tela visível, nunca a legenda fica abaixo da dobra. */
  display: flex;
  flex-direction: column;
}
.chapter:last-child { margin-bottom: 0; }
/* `top` escalonado: 14px por card (metade de --radius-l/28px — dentro da
   faixa de 10–16px pedida para a tira visível do card anterior). Base
   96px = a mesma folga de header já usada no projeto. */
.chapter[data-index="1"] { top: 96px; z-index: 1; }
.chapter[data-index="2"] { top: 110px; z-index: 2; }
.chapter[data-index="3"] { top: 124px; z-index: 3; }
.chapter[data-index="4"] { top: 138px; z-index: 4; }
/* Teto de altura = 100vh − (o próprio `top` × 2): mesmo respiro embaixo
   que o card já tem em cima, então ele sempre cabe inteiro (imagem +
   legenda) na tela visível, com folga simétrica — sem valor novo, só o
   `top` de cada card reaproveitado no cálculo. */
.chapter[data-index="1"] { max-height: calc(100vh - 192px); }
.chapter[data-index="2"] { max-height: calc(100vh - 220px); }
.chapter[data-index="3"] { max-height: calc(100vh - 248px); }
.chapter[data-index="4"] { max-height: calc(100vh - 276px); }

@media (prefers-reduced-motion: reduce) {
  .chapter { position: relative !important; top: auto !important; max-height: none !important; }
}
@media (max-width: 900px) {
  /* ≤900px: teste mantendo o sticky também no mobile (antes virava fluxo
     normal aqui) — top/max-height por índice seguem os do desktop acima,
     já calculados a partir de 100vh; margin-bottom = 140px, o mesmo
     "orçamento de rolagem" que updateStackCards() (index-v2.js) já espera
     para telas >640px, então o JS e o CSS concordam sem valor novo.
     Fora do .container agora, então a largura vem de margin (32px — a
     mesma margem lateral que .chapter-visual usava neste breakpoint
     antes). */
  .chapter { width: auto; margin: 0 32px 140px; }
  .chapter:last-child { margin-bottom: 0; }
  .highlights { padding-top: 88px; } /* mesmo ritmo mobile (88px) das demais seções */
  .manifesto-open { margin-bottom: 88px; } /* = padding-top de .highlights neste breakpoint */
  .stack-wrap { padding-bottom: 88px; } /* = padding-top de .highlights neste breakpoint */
}

/* =========================================================================
   MANIFESTO / A DIFERENÇA — pilha de 4 cards (imagem + legenda)
   ========================================================================= */
/* Abertura: sem caixa, só tipografia. O respiro até o 1º card é igual
   ao padding-top da própria seção (128px / 88px em ≤900px) — silêncio
   antes da primeira mensagem, simétrico com a entrada da seção.
   position:relative + z-index:0 cria um contexto de empilhamento próprio
   — o glow (::before, z-index:-1) fica preso aqui atrás do texto, sem
   vazar para trás do fundo da própria seção. overflow:hidden clipa o
   glow nas bordas da caixa em qualquer largura de tela. */
.manifesto-open { margin-bottom: 128px; }

/* Imagem: topo do card, ocupa 100% da largura interna, dominante — ela é
   o que o usuário percebe primeiro. 16:9 é só a proporção PREFERIDA: como
   o card tem um teto de altura (acima) e a legenda agora é uma faixa
   compacta (abaixo, ~25–30% da peça), a imagem acaba ocupando a maior
   parte da altura visível sem precisar esticar o card. object-fit cobre,
   focal point por card via --focal (custom property no HTML). */
.chapter-visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 1 1 auto;
  min-height: 0; /* permite encolher abaixo do 16:9 se o teto de altura exigir */
  background: var(--c-surface-dark-2);
  /* raio próprio nos 4 cantos (não só o clip herdado do .chapter): o de
     cima já ficava arredondado pelo overflow:hidden do card, mas o de
     baixo ficava reto contra a legenda — agora a imagem "flutua" com
     cantos arredondados também embaixo, mostrando um filete da legenda
     por trás nos dois cantos inferiores. */
  border-radius: var(--radius-m);
}
.chapter-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
/* entrada do 1º card: a imagem "cresce" discretamente ao aparecer na tela
   (.94 → 1, a mesma escala de profundidade dos planos de trás da hero),
   via o observador de .reveal já existente — sem JS novo. */
.chapter-visual.reveal { opacity: 0; transform: none; transition: opacity .8s var(--ease-out); }
.chapter-visual.reveal img { transform: scale(.94); transition: transform .8s var(--ease-out); }
.chapter-visual.reveal.visible { opacity: 1; }
.chapter-visual.reveal.visible img { transform: scale(1); }

/* Legenda: faixa editorial compacta, mesma superfície do card (o
   overflow:hidden do .chapter une os dois numa peça só — sem "imagem +
   caixa de texto"). Grid de 2 colunas no desktop: label empilhado sobre
   a headline (coluna 1) → legenda de apoio (coluna 2), alinhados ao
   centro vertical da faixa — o contador não aparece mais aqui (a pedido,
   ver referência visual), continua no DOM só por semântica/leitura.
   --c-surface-dark-2: mesmo tom já usado no placeholder da imagem,
   levemente diferente do --c-panel-dark da seção. */
.chapter-caption {
  background: var(--c-surface-dark-2);
  flex: 0 0 auto; /* pede sua altura de conteúdo — nunca encolhe (só a imagem cede espaço) */
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
  grid-template-areas: "label body" "title body";
  align-items: center;
  column-gap: 32px;
  padding: 40px; /* uniforme nos 4 lados, a pedido */
}
.chapter-meta { display: contents; }
.chapter-label, .chapter-count { display: none; } /* fora da composição visual — seguem no DOM por semântica */
/* headline: elemento dominante da legenda — escala de campanha (mesma
   usada em .xp-title/.how-step--final h3, o "h2 grande" do sistema),
   bem maior que o supporting text ao lado, não um tamanho de card de UI. */
.chapter-title {
  grid-area: title;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.chapter-body {
  grid-area: body;
  font-size: 15px; /* discretamente menor que o --font-text padrão — legenda editorial, não corpo de texto */
  color: var(--c-on-dark-soft);
}

/* Sem JS (ou com movimento reduzido) o conteúdo não pode depender do
   .reveal: body.has-motion só existe quando o JS roda sem reduced-motion. */
body:not(.has-motion) .manifesto .reveal,
body:not(.has-motion) .manifesto .reveal-stagger > * { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .chapter-visual.reveal,
  .chapter-visual.reveal img { opacity: 1; transform: none; }
  /* Sem grid no mobile: pilha vertical simples — imagem já veio antes
     (ordem do DOM); aqui só a legenda: label → headline → texto de
     apoio (o contador segue oculto, como no desktop). */
  .chapter-caption { display: block; padding: 24px; }
  .chapter-meta { display: block; }
  .chapter-title { margin-top: 16px; font-size: clamp(26px, 5.4vw, 36px); } /* mesmo ajuste do desktop, proporcional */
  .chapter-body { margin-top: 10px; }
}
@media (max-width: 640px) {
  /* a quebra da headline é entre frases (fica); a do texto de apoio some */
  .manifesto-open p br { display: none; }
  .chapter-title br { display: none; }
  /* a 4/5 (retrato) exigia ampliar a imagem-fonte (1050×568, paisagem)
     bem além da resolução real — ficava borrada/pixelada em telas de alta
     densidade. Mantendo 16/9 (a mesma do desktop, mais perto da proporção
     nativa do arquivo) a altura fica bem menor e o corte usa a imagem
     praticamente na resolução original, sem esticar. */
  .chapter-caption { padding: 20px; }
  .chapter { margin: 0 24px 88px; } /* 88px = o "orçamento de rolagem" que updateStackCards() já usa para ≤640px */
  .chapter:last-child { margin-bottom: 0; }
}

/* =========================================================================
   TRANSIÇÃO → EXPERIÊNCIAS — pausa tipográfica logo após o Manifesto
   ========================================================================= */
/* Mesmo fundo do Manifesto (--c-panel-dark), sem divisor: continua a
   seção anterior. Padding = o mesmo ritmo de 128px/88px (desktop/mobile)
   do resto da página; somado ao respiro final do .stack-wrap, cria a
   pausa antes da coleção. */
.experiences-intro { background: var(--c-panel-dark); padding: 0 0 128px; }
.experiences-intro-head { margin-bottom: 0; }
/* uma frase por bloco, com linhas equilibradas: nenhuma palavra sozinha
   no fim do texto de apoio */
.experiences-intro-head p,
.experiences-intro-head p span { text-wrap: balance; }
.experiences-intro-head p span { display: block; }

/* "Agora imagine a sua." aparece (fade) depois que toda a cabeça já
   apareceu (4 itens × 80ms do .reveal-stagger = 320ms), com a mesma
   duração/curva do reveal — a 2ª frase "abre" o próximo capítulo. O texto
   já nasce no gradiente (herdado de [data-theme="dark"] .green-gradient);
   só a opacidade anima, não mais a cor. */
.experiences-intro .green-gradient { opacity: 0; transition: opacity .8s var(--ease-out) 320ms; }
.experiences-intro .reveal-stagger.visible .green-gradient { opacity: 1; }

/* Indicador final: mesma anatomia da transição da hero (.hero-hint —
   Caption 12px / 1.3334 / -.01em em texto secundário, itens a 8px), mas é
   um link para a área de Experiências: alvo de toque de 44px (HIG), a 56px
   do texto (margin-bottom do .section-head) e mint só em hover/foco. */
.transition-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 56px;
  font-size: 12px;
  line-height: 1.3334;
  letter-spacing: -.01em;
  color: var(--c-on-dark-soft);
  transition: color .3s var(--ease);
}
.transition-cue:hover,
.transition-cue:focus-visible { color: var(--c-mint-dark-bg); }
.transition-cue:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }

/* sem JS (ou com movimento reduzido) nada depende do reveal */
body:not(.has-motion) .experiences-intro .reveal-stagger > * { opacity: 1; transform: none; }
body:not(.has-motion) .experiences-intro .green-gradient { opacity: 1; }

@media (max-width: 900px) {
  .transition-cue { margin-top: 40px; } /* = margin-bottom do .section-head em ≤900px */
  .experiences-intro { padding: 0 0 88px; } /* mesmo ritmo mobile (88px) das demais seções */
}
@media (max-width: 640px) {
  /* quebra entre frases da headline fica; no texto de apoio as frases fluem juntas */
  .experiences-intro-head p span { display: inline; }
}

/* Ícone de check reaproveitado noutros lugares (mantido para compatibilidade) */
.icon-check { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.icon-check path:first-child { display: none; }
.icon-check path:last-child { fill: none; stroke: var(--c-blue); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .icon-check path:last-child { stroke: var(--c-mint-dark-bg); }
.why-closer {
  margin-top: 36px; font-family: var(--font-display); font-size: 21px;
  font-style: normal; color: var(--c-ink); font-weight: 500; letter-spacing: -.01em;
  border-left: 2px solid var(--c-blue); padding-left: 18px;
}
.why-closer small {
  display: block; margin-top: 8px;
  font-family: var(--font-text); font-size: 14px; font-weight: 400; letter-spacing: normal;
  color: var(--c-gray-soft);
}
[data-theme="dark"] .why-closer small { color: rgba(245,245,247,.55); }
/* Uso em .highlights (fechamento da jornada Clareza→Ação): container é
   largo e o resto da seção é centralizado — restringe a largura do
   fechamento em vez de deixar a borda esticar a seção inteira. */
.highlights .why-closer { max-width: 640px; margin-left: auto; margin-right: auto; }
[data-theme="dark"] .why-closer { color: var(--c-on-dark); border-left-color: var(--c-mint-dark-bg); }

/* =========================================================================
   EXPERIÊNCIAS BILLIONS — coleção em dois níveis (descoberta → produto)
   ========================================================================= */
/* Experiências Billions: fundo preto (--c-surface-dark), a pedido — a
   seção agora segue o mesmo visual dark do resto da página, não mais a
   "área clara" que marcava a mudança de capítulo. padding 128px simétrico
   (mesmo ritmo do resto da página — era 96px embaixo, assimétrico). */
.templates { background: linear-gradient(180deg, #000 80%, #111111 100%); padding: 128px 0; overflow-x: hidden; }

/* abertura: eyebrow discreto — mesmo tratamento das demais seções dark
   (--c-on-dark-soft); respiro até a 1ª experiência = padding-top da
   própria seção (128px) */
.xp-head { padding-bottom: 80px; margin-bottom: 0px; }
.xp-head .eyebrow { font-size: 13px; font-weight: 590; letter-spacing: .04em; text-transform: uppercase; color: var(--c-mint-dark-bg); margin-bottom: 20px; }
.xp-head p span { display: block; text-wrap: balance; }
.xp-head-accent { color: var(--c-on-dark); font-weight: 500; } /* destaque sutil, sem verde */

/* ---------- Nível 1 — descoberta: filtros + galeria de categorias ---------- */
/* Filtros = .tag-row/.tag-chip. Não existia estilo base pra esse
   componente no projeto (rodava sem fundo/borda/raio) — criado agora,
   no mesmo padrão pill dos outros controles (--radius-pill, alvo de
   toque 44px/HIG, mint como estado ativo/hover, igual ao resto do dark). */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-hairline-dark);
  background: transparent;
  color: var(--c-on-dark-soft);
  font-size: 14px;
  font-weight: 400;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tag-chip:hover { border-color: var(--c-mint-dark-bg); color: var(--c-on-dark); }
.tag-chip:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }
.tag-chip.is-accent { background: var(--c-mint-dark-bg); border-color: var(--c-mint-dark-bg); color: var(--c-on-brand); }
/* Filtros: centralizados, com respiro até a galeria. Selecionado/hover
   em branco, não mais mint. */
.xp-filters { justify-content: center; margin-bottom: 32px; } /* 32px = o "grande respiro" já usado no projeto */
.xp-filters .tag-chip { min-height: 44px; }
.xp-filters .tag-chip:hover { border-color: #fff; color: var(--c-on-dark); }
.xp-filters .tag-chip.is-accent { background: #fff; border-color: #fff; color: var(--c-panel-dark); }

/* ≤900px: os mesmos filtros como campo de seleção nativo — só aparece
   nesse breakpoint (ver media query abaixo); no desktop segue oculto,
   as pills continuam sendo a UI. Visual = pill escura do design system
   (--radius-pill, --c-hairline-dark), com uma seta própria por cima do
   arrow nativo (appearance:none), para ficar igual em qualquer navegador. */
.xp-filter-select-wrap { display: none; margin-bottom: 32px; }
.xp-filter-select {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  min-height: 52px;
  padding: 0 44px 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-hairline-dark);
  background-color: var(--c-panel-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  color: var(--c-on-dark);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 590;
  transition: border-color .3s var(--ease);
}
.xp-filter-select:hover, .xp-filter-select:focus-visible { border-color: var(--c-mint-dark-bg); }
.xp-filter-select:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 2px; }
.xp-filter-select option { background: var(--c-panel-dark); color: var(--c-on-dark); }

/* Galeria: 4 colunas do grid de 12 com o gutter de 24px (design system
   4.1) — várias categorias na mesma viewport. Entre linhas, 56px
   (.section-head). A capa de cada card é a versão mobile real da
   experiência, na proporção da própria captura (780/1200). */
.xp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 24px; }
.xp-grid.is-entering { animation: card-in .5s var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xp-card.is-filtered-out { display: none; } /* filtro de tema (nível 1) — mesmo padrão do card de referência */
/* Card "padrão antigo" (referência do usuário): objeto único em caixa —
   fundo --c-panel-dark, borda hairline-dark, raio --radius-m — em vez de
   mídia + texto soltos sobre o fundo da seção. Capa em paisagem (4/5,
   pedido mais próximo do quadrado da referência que o 780/1200 anterior)
   com o selo hexagonal da marca sobreposto, colorido por categoria via a
   custom property --accent (definida inline por card). */
/* Reprodução exata do card de referência (site-billions/assets/css/index.css
   .template-card/.tc-*) — valores literais do original, não os tokens do
   projeto, por pedido explícito de fidelidade pixel a pixel. */
.xp-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--c-on-dark);
  background: var(--c-panel-dark); /* equivalente ao --bg-dark-2 (#151517) do original */
  border: 1px solid var(--c-hairline-dark);
  border-radius: 22px; /* desktop; 16px em ≤900px (regra responsiva abaixo) */
  overflow: hidden;
  padding: 0;
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.xp-card:hover { transform: translateY(-10px); border-color: #333; box-shadow: 0 36px 90px rgba(0,0,0,.3); }
/* mídia com legenda sobreposta (label + título), como no original — não
   mais abaixo da foto */
.xp-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; }
.xp-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .6s ease; }
.xp-card:hover .xp-card-media img { transform: scale(1.055); filter: saturate(1.08); }
.xp-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.5) 0%, rgba(11,11,12,0) 24%, rgba(11,11,12,0) 48%, rgba(11,11,12,.94) 100%);
}
.xp-card-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 32px; height: 32px;
}
.xp-card-badge img { width: 100%; height: 100%; display: block; object-fit: contain; }
.xp-card-media-text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
/* rótulo sempre verde-menta — a cor NÃO acompanha o selo (o original
   também dissocia as duas: selo roxo, rótulo verde, no card de academia) */
.xp-card-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-mint-dark-bg);
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.xp-card-title { font-size: 24px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.xp-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.xp-card-count, .xp-card-cta { display: inline-flex; align-items: center; gap: 7px; }
.xp-card-count { font-size: 12px; font-weight: 600; color: rgba(245,245,245,.65); }
.xp-card-count svg, .xp-card-cta svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.xp-card-cta { font-size: 12px; font-weight: 600; color: var(--c-on-dark); transition: color .2s ease; }
.xp-card:hover .xp-card-cta { color: var(--c-mint-dark-bg); }
.xp-card:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; border-radius: 16px; }

/* sem JS (ou com movimento reduzido) nada depende do reveal */
body:not(.has-motion) .templates .reveal,
body:not(.has-motion) .templates .reveal-stagger > * { opacity: 1; transform: none; }

/* ≤900px: filtros e galeria viram fileiras horizontais de app, rompendo o
   container até a borda da tela (como a antiga galeria: padding =
   --container-edge). Cabem 2½ cards (≤640px: 1½) — o seguinte aparece
   cortado, convidando a arrastar. O nível 2 vira uma coluna. */
@media (max-width: 900px) {
  .section-head.xp-head { margin-bottom: 0; } /* padding-bottom (80px) já cobre o respiro — este margin somava e dobrava o espaço */
  .xp-filters { display: none; }
  .xp-filter-select-wrap { display: block; width: 87.5%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .xp-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: var(--container-edge);
    padding-right: var(--container-edge);
    scroll-padding-left: var(--container-edge);
    scroll-padding-right: var(--container-edge);
  }
  .xp-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 24px) / 2.5);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .xp-grid::-webkit-scrollbar { display: none; }
  .xp-card { scroll-snap-align: start; border-radius: 16px; box-shadow: none; } /* raio menor do original em telas estreitas */
  .xp-card:hover { transform: translateY(-6px); box-shadow: none; }
  .xp-card-media { border-radius: 10px; }
  .xp-card:focus-visible { border-radius: 16px; }
}
@media (max-width: 640px) {
  .xp-head p span { display: inline; }
  .xp-head p { text-wrap: balance; }
  .xp-grid { grid-auto-columns: calc((100% - 24px) / 1.5); }
}

/* =========================================================================
   PERSONALIZAÇÃO EXPRESS — o que muda depois de escolher a Experiência
   ========================================================================= */
/* Fundo quase preto (rgb(17,17,17), pouco acima do preto puro de
   Experiências Billions logo acima — continuidade, não corte), com o
   painel em preto puro por cima: o mesmo contraste sutil de card-sobre-
   preto do resto do projeto, aqui como painel único, não vários cards. */
.customization { background: rgb(17,17,17); padding: 128px 0; }
.custom-panel {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px 64px;
  border-radius: var(--radius-l);
  background: #000;
}
.custom-head { margin-bottom: 44px; }
.custom-head .lead { margin: 18px auto 0; }

/* Grade de 6 itens dentro do MESMO painel — sem cards, sem sombra própria;
   só hairlines internas entre células (nada de moldura ao redor: a borda
   externa é a do próprio .custom-panel). Ícone com uma cor de acento por
   item (as já existentes no design system, nunca inventadas), o resto em
   neutro — a cor fica restrita ao detalhe, como pedido. */
.custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; }
.custom-item {
  padding: 36px 32px;
  border-right: 1px solid var(--c-hairline-dark);
  border-bottom: 1px solid var(--c-hairline-dark);
}
.custom-item:nth-child(3n) { border-right: none; }
.custom-item:nth-child(n+4) { border-bottom: none; }
.custom-item-icon { width: 30px; height: 30px; margin-bottom: 20px; }
.custom-item:nth-child(1) .custom-item-icon { color: var(--color-accent-purple); }
.custom-item:nth-child(2) .custom-item-icon { color: var(--color-accent-yellow); }
.custom-item:nth-child(3) .custom-item-icon { color: var(--color-accent-cyan); }
.custom-item:nth-child(4) .custom-item-icon { color: var(--c-mint-dark-bg); }
.custom-item:nth-child(5) .custom-item-icon { color: var(--color-action); }
.custom-item:nth-child(6) .custom-item-icon { color: var(--color-accent-lime); }
.custom-item h3 { font-size: 17px; line-height: 1.25; margin-bottom: 6px; }
.custom-item p { font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; color: rgba(245,245,247,.8); }

/* Fechamento: a mensagem central da seção, maior destaque tipográfico que
   os itens da grade — separado por uma hairline (não mais uma célula da
   grade). O prazo fica discreto, papel "Caption", de propósito. */
.custom-close {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--c-hairline-dark);
  text-align: center;
}
.custom-close-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-on-dark);
}
.custom-close-note { margin-top: 14px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; color: var(--c-on-dark-soft); }

/* sem JS (ou com movimento reduzido) nada depende do reveal */
body:not(.has-motion) .customization .reveal,
body:not(.has-motion) .customization .reveal-stagger > * { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .custom-panel { padding: 56px 32px; border-radius: var(--radius-m); }
  .custom-head { margin-bottom: 36px; }
  .custom-grid { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  .custom-item:nth-child(3n) { border-right: 1px solid var(--c-hairline-dark); }
  .custom-item:nth-child(2n) { border-right: none; }
  .custom-item:nth-child(n+4) { border-bottom: 1px solid var(--c-hairline-dark); }
  .custom-item:nth-child(n+5) { border-bottom: none; }
  .custom-item { padding: 28px 20px; }
  .custom-close { margin-top: 32px; padding-top: 32px; }
}
@media (max-width: 560px) {
  .custom-panel { padding: 40px 20px; }
  .custom-grid { grid-template-columns: 1fr; }
  .custom-item:nth-child(2n) { border-right: none; }
  .custom-item {
    border-right: none !important; border-bottom: 1px solid var(--c-hairline-dark); padding: 28px 4px;
    text-align: center; /* uma coluna só: ícone + título + descrição centralizados, não mais alinhados à esquerda */
  }
  .custom-item:last-child { border-bottom: none; }
  .custom-item-icon { display: block; margin-left: auto; margin-right: auto; }
}

/* =========================================================================
   COMO FUNCIONA — jornada do cliente
   ========================================================================= */
/* Jornada do cliente como acompanhamento de pedido: "eu sei onde estou, o
   que acontece agora, o que vem depois e quando termina". Timeline vertical
   de 6 etapas conectadas + painel "Sua página" (desktop). Estados:
   ○ pendente · ● atual · ✓ concluída — por forma, não só por cor. */
.how { background: var(--c-panel-dark); padding: 128px 0; --how-gap: 96px; }
/* painel 4 / timeline 8 colunas do grid de 12 — gap reduzido (32px) para o
   painel "Sua página" ficar visualmente colado à timeline, como parte da
   mesma experiência, não um componente à parte */
.how-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; }

/* marcador de status: 20px (largura do .logo-mark), borda de 2px (a
   espessura da antiga .how-progress-track); troca de estado em .4s, o
   tempo do antigo preenchimento da barra */
.how-dot {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-hairline-dark);
  background: transparent center / 12px no-repeat;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* atual: anel mint com ponto interno e o halo do .header-cta-dot (3px a 22%) */
.is-current > .how-dot {
  border-color: var(--c-mint-dark-bg);
  background-image: radial-gradient(circle, var(--c-mint-dark-bg) 0 4px, transparent 4.5px);
  background-size: auto;
  box-shadow: 0 0 0 3px rgba(0,217,89,.22);
}
/* concluída: preenchida em mint com ✓ na cor do texto sobre a marca */
.is-done > .how-dot {
  border-color: var(--c-mint-dark-bg);
  background-color: var(--c-mint-dark-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2e1c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- painel "Sua página" (desktop) ---------- */
/* sticky no mesmo topo do antigo .how-sticky (120px); superfície escura
   com o raio de card (--radius-l), borda hairline e padding de 32px (o
   horizontal da antiga .blade-caption) */
.how-tracker {
  position: sticky; top: 120px; align-self: start;
  padding: 32px;
  border-radius: var(--radius-l);
  border: 1px solid var(--c-hairline-dark);
  background: var(--c-surface-dark-2);
}
.how-tracker-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 590; color: var(--c-on-dark-soft); }
/* status atual em destaque: papel do h4 (19px / 600) */
.how-tracker-status {
  margin-top: 10px;
  font-family: var(--font-display); font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.005em;
  color: var(--c-on-dark);
  transition: color .4s var(--ease);
}
/* verde só quando o status atual é uma confirmação (✓) — reforça a
   sensação de acompanhamento em tempo real sem virar decoração fixa */
.how-tracker-status.is-confirmed,
.how-tracker.is-complete .how-tracker-status { color: var(--c-mint-dark-bg); }
/* lista: a 24px do status (gutter), itens a 16px (legenda da coleção),
   marcador → texto a 10px (gap da .tag-row) */
.how-tracker-list { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.how-track {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.4286; letter-spacing: -.016em;
  color: var(--c-on-dark-soft);
  transition: color .4s var(--ease);
}
.how-track.is-current { color: var(--c-on-dark); font-weight: 590; }

/* ---------- timeline das etapas ---------- */
/* marcador a 24px do texto (gutter); linha de 2px entre um marcador e o
   próximo, preenchida em mint quando a etapa é concluída */
.how-steps { display: flex; flex-direction: column; gap: var(--how-gap); }
.how-step { position: relative; max-width: 620px; padding-left: calc(20px + 24px); transition: opacity .5s var(--ease); }
.how-step > .how-dot { position: absolute; left: 0; top: -2px; }
.how-step::before {
  content: "";
  position: absolute; left: 9px; top: 18px; bottom: calc(-1 * var(--how-gap) - 2px);
  width: 2px;
  background: var(--c-hairline-dark);
  transition: background-color .4s var(--ease);
}
.how-step:last-child::before { content: none; }
.how-step.is-done::before { background: var(--c-mint-dark-bg); }
/* com JS/movimento: a linha some a ser preenchida ponto a ponto conforme
   a posição do scroll (--how-line-fill, 0%→100%, atualizado a cada frame
   em updateHowLines()) — não de uma vez ao cruzar o threshold acima, que
   agora só decide o estado dos marcadores. */
body.has-motion .how-step::before {
  background: linear-gradient(to bottom, var(--c-mint-dark-bg) var(--how-line-fill, 0%), var(--c-hairline-dark) var(--how-line-fill, 0%));
  transition: none;
}
/* só com JS e movimento: a etapa atual ganha protagonismo, as outras
   recuam sem sumir (.55 — legível mesmo apagada). Sem JS/reduced-motion,
   tudo legível. */
body.has-motion .how-step { opacity: .55; }
body.has-motion .how-step.active { opacity: 1; }
/* label: mesmos valores de antes, em texto secundário (verde = estado) */
.how-step .how-step-tag { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-on-dark-soft); margin-bottom: 10px; font-weight: 590; }
.how-step h3 { margin-bottom: 12px; }
.how-step p { font-size: 17px; }
/* status conceitual: papel "Body Reduced", a 18px do texto (.section-head p) */
.how-step .how-step-status { margin-top: 18px; font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; color: var(--c-on-dark-soft); }
/* 06 / No ar — a recompensa: headline na escala do h2 e o status em mint */
.how-step--final h3 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.015em; }
.how-step--final .how-step-status { color: var(--c-mint-dark-bg); font-weight: 590; }

/* ≤900px: só a timeline vertical — tracking nativo de app, uma etapa por
   vez; o painel resumo sai. 64px entre etapas (o valor de antes). */
@media (max-width: 900px) {
  .how { --how-gap: 64px; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-tracker { display: none; }
}


/* =========================================================================
   VELOCIDADE / ATÉ 48 HORAS — revelação tipográfica: pouco elemento, muito
   espaço, o "48" como objeto gráfico. Velocidade para entregar, não pressa
   para vender: o movimento continua lento e controlado.
   ========================================================================= */
.speed { background: var(--c-panel-dark); padding: 128px 0; text-align: center; } /* mesmo ritmo vertical (128px/88px) do resto da página — era 120px */
/* abertura: 72px até a revelação (valor da antiga .speed-head). Sem
   max-width: como no h1 da hero, a 1ª linha do h2 ("Você não precisa esperar
   semanas") cabe inteira na largura do .container. */
.speed-head { margin: 0 auto 72px; }
/* linhas equilibradas: nenhuma palavra sozinha no fim dos textos */
.speed p { text-wrap: balance; }

/* "Até / 48 / horas úteis." — um único <p> (lido como frase), com as
   partes empilhadas. O "48" ocupa metade da largura do .container: os
   dígitos medem 1,225em nesta fonte, então font-size = ½ × container ÷
   1,225 (≈514px no desktop largo). line-height .92 e tracking -.02em = a
   antiga .speed-number. */
.speed-reveal > span { display: block; }
.speed-until,
.speed-unit {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px); /* escala da antiga .speed-quote */
  font-weight: 590;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-on-dark-soft);
}
.speed-unit { color: var(--c-on-dark); }
.speed-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(min(87.5vw, var(--container)) * .5 / 1.225); /* 87.5vw = --container-width */
  line-height: .92;
  letter-spacing: -.02em;
}
.speed-number:not(.green-gradient) { color: var(--c-on-dark); }
.speed-mark { margin-left: 2px; color: var(--c-on-dark-soft); }
/* "Plano EXPRESS": o contexto da promessa, identificado como produto —
   pill discreta com a anatomia do antigo selo da hero (.scarcity: 13px,
   fundo .08 / borda .14 translúcidos, padding 7/14, pill), em caixa-alta
   .04em como os eyebrows; 20px até o "Até" (margin do eyebrow) */
.speed-reveal > .speed-plan { margin-bottom: 20px; } /* estilo da pill: bloco PLANOS (.plan-pill, compartilhado) */

/* Revelação em etapas: cada parte começa quando a anterior está na metade
   da entrada (metade de .8s = 400ms), com a duração/curva do .reveal. O
   "48" sobe da escala de profundidade .94 (a dos cards de trás). */
.speed-reveal.reveal-stagger > .speed-number { transform: translateY(22px) scale(.94); }
.speed-reveal.reveal-stagger.visible > .speed-number { transform: none; }
/* "Plano EXPRESS" (1º) entra junto com o "Até" (2º): contexto e início da
   frase chegam juntos; depois o 48 e a unidade, no mesmo ritmo de 400ms */
.speed-reveal.reveal-stagger.visible > :nth-child(3) { transition-delay: 400ms; }
.speed-reveal.reveal-stagger.visible > :nth-child(4) { transition-delay: 800ms; }

/* apoio + condição real do prazo: logo abaixo do número, legível e
   discreta (papel "Caption"); nada escondido */
.speed-support { max-width: 620px; margin: 36px auto 0; }
.speed-support .lead { margin: 0 auto; }
.speed-note { margin-top: 18px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; color: var(--c-on-dark-soft); }

/* "Como?" — a explicação chega depois de um respiro de seção inteiro
   (128px = o padding da própria .speed), para a revelação respirar */
.speed-why { max-width: 620px; margin: 128px auto 0; }
.speed-why h3 { margin-bottom: 18px; }
.speed-why p + p { margin-top: 18px; } /* = .section-head p */
/* linha editorial de confiança: tratamento do eyebrow, a 36px (CTAs da hero) */
.speed-why .speed-proof {
  margin-top: 36px;
  font-size: 12px; font-weight: 590; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-on-dark-soft);
}

/* sem JS (ou com movimento reduzido) nada depende do reveal */
body:not(.has-motion) .speed .reveal,
body:not(.has-motion) .speed .reveal-stagger > * { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .speed-why { margin-top: 88px; } /* = padding da .speed em ≤900px (regra geral) */
}
/* ≤640px: o "48" ocupa ¾ da largura do container (mesma conta) */
@media (max-width: 640px) {
  .speed-number { font-size: calc(87.5vw * .75 / 1.225); }
  .speed-head h2 br { display: none; }
}

/* =========================================================================
   PLANOS / DECISÃO — uma ferramenta de decisão, não uma tabela de preços.
   Express em destaque (continuidade com a seção 48h), Start e Sob Medida
   ao lado, comparação recolhida e uma saída para quem ainda não sabe.
   Fundo escuro mantido: entre Soluções e FAQ (claras), marca a decisão.
   ========================================================================= */
.plans { background: var(--c-surface-dark); padding: 128px 0; position: relative; }
.plans-head .eyebrow { font-size: 13px; font-weight: 590; letter-spacing: .04em; text-transform: uppercase; color: var(--c-mint-dark-bg); margin-bottom: 20px; }
.plans-head p { text-wrap: balance; }

/* ---------- três caminhos: Start | Express | Sob Medida ---------- */
/* Mesma importância estrutural: 3 colunas iguais, mesma estrutura de card.
   As 7 linhas de conteúdo (cabeça, posicionamento, preço, prazo, entregas,
   "ver tudo", CTA) são compartilhadas via subgrid — nome, preço, prazo e
   CTA ficam na mesma altura nos três cards, sem altura forçada. Gap de
   20px = o da antiga .plans-grid. */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* colunas sempre iguais */
  grid-template-rows: repeat(7, auto);
  gap: 20px;
}
.plan-card {
  grid-row: span 7;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  background: var(--c-panel-dark);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-l);
  padding: 36px 32px 32px;
  text-align: left;
}
/* Express: mesma forma, identidade própria — borda mint de 1px (a do
   antigo .featured), sem glow, sem escala, sem selo */
.plan-card--express { border-color: var(--c-mint-dark-bg); }

/* identificação idêntica à da seção 48h: a pill "Plano EXPRESS" */
.speed-reveal > .speed-plan,
.plan-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 590;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-on-dark);
}
/* .speed-plan (só aqui, não o .plan-pill compartilhado acima): borda e
   texto no verde padrão da marca — vale em qualquer largura de tela, não
   é um ajuste responsivo. */
.speed-reveal > .speed-plan {
  border-color: var(--c-mint-dark-bg);
  color: var(--c-mint-dark-bg);
}
/* cabeça alinhada pela base: os nomes ficam na mesma linha e a pill do
   Express aparece acima do nome, a 10px (.chapter-meta) */
.plan-head { align-self: end; }
.plan-head .plan-pill { margin-bottom: 10px; }
.plan-name { color: var(--c-on-dark); }
.plan-audience { font-size: 15px; color: var(--c-on-dark-soft); margin-top: 6px; }
.plan-price-block { margin-top: 22px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price-num { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.plan-price-quote { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.62; color: var(--c-on-dark); }
.plan-price small { font-size: 13px; color: var(--c-on-dark-soft); }
.plan-installment { font-size: 13px; color: var(--c-on-dark-soft); margin-top: 4px; }
/* prazo: a linha comparável entre os três (até 5 dias · até 48h úteis ·
   definido na conversa). No Express, em destaque: a tipografia caixa-alta
   do "horas úteis." da seção 48h, em texto principal */
.plan-meta { font-size: 13px; color: var(--c-on-dark-soft); margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.plan-card--express .plan-meta { font-size: 15px; font-weight: 590; letter-spacing: .04em; text-transform: uppercase; color: var(--c-on-dark); }
/* Sob Medida mantém o dourado como detalhe (cor de contraponto da marca
   reservada a este plano — design system), sem borda/sombra dourada */
.plan-card.premium .plan-meta { color: var(--c-gold-dark); }
.plan-card.premium .plan-features li svg { color: var(--c-gold-dark); }
.plan-features { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(245,245,247,.72); }
.plan-features li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--c-mint-dark-bg); }

/* toggle "Ver o que está incluso" / "Comparar planos" (acordeão existente) */
.plan-features-toggle {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px;
  margin-top: 8px; font-size: 14px; font-weight: 590;
  color: var(--c-mint-dark-bg);
}
.plan-card.premium .plan-features-toggle { color: var(--c-gold-dark); }
.plan-features-toggle-icon {
  position: relative; width: 15px; height: 15px; flex-shrink: 0;
  border: 1px solid currentColor; border-radius: 50%;
}
.plan-features-toggle-icon::before, .plan-features-toggle-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor;
  transition: transform .25s var(--ease);
}
.plan-features-toggle-icon::before { width: 7px; height: 1px; transform: translate(-50%, -50%); }
.plan-features-toggle-icon::after { width: 1px; height: 7px; transform: translate(-50%, -50%); }
.plan-features-toggle[aria-expanded="true"] .plan-features-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }
.plan-features-toggle:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; border-radius: 6px; }
/* grid-template-rows (mesmo padrão do .why-point-body) */
.plan-features-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.plan-features-toggle[aria-expanded="true"] + .plan-features-wrap { grid-template-rows: 1fr; }
.plan-features-wrap > div { overflow: hidden; }
.plan-features-wrap .plan-features { min-height: 0; flex: none; margin-top: 4px; }
.plan-features-wrap .plan-features li:first-child { margin-top: 12px; }

/* CTA na última linha do subgrid (alinhado nos três), a 28px do conteúdo
   (valor do antigo .plan-card .btn) */
.plan-card .btn { align-self: end; margin-top: 28px; width: 100%; }
.plan-card .btn-ghost-dark,
.plans-help .btn-ghost-dark { border: 1px solid rgba(255,255,255,.22); color: #fff; }
.plan-card .btn-ghost-dark:hover,
.plans-help .btn-ghost-dark:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.plans .btn:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }

/* condição dos prazos (asterisco): Caption, visível logo abaixo dos planos */
.plans-note { max-width: 720px; margin: 24px auto 0; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; color: var(--c-on-dark-soft); text-wrap: balance; }

.plans-guarantee {
  margin-top: 40px; display: flex; gap: 16px; align-items: flex-start;
  max-width: 640px; margin-left: auto; margin-right: auto; text-align: left;
  padding: 24px 28px; border-radius: var(--radius-m); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.plans-guarantee-icon { width: 22px; height: 22px; color: var(--c-mint-dark-bg); flex-shrink: 0; margin-top: 2px; }
.plans-guarantee strong { color: #fff; font-size: 15px; }
.plans-guarantee p { font-size: 13.5px; color: var(--c-on-dark-soft); margin-top: 4px; }

/* ---------- comparação (secundária, recolhida) ---------- */
.plans-compare { margin-top: 56px; display: flex; flex-direction: column; align-items: center; }
.plans-compare .plan-features-wrap { width: 100%; }
.plans-table-scroll { overflow-x: auto; margin-top: 24px; }
.plans-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; font-size: 14px; }
.plans-table-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plans-table th, .plans-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--c-hairline-dark); vertical-align: top; color: var(--c-on-dark-soft); }
.plans-table thead th { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--c-on-dark); }
.plans-table-corner { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 590; color: var(--c-on-dark-soft); font-family: var(--font-text); }
.plans-table tbody th { font-weight: 590; color: var(--c-on-dark); width: 22%; }
/* rótulos das linhas fixos ao rolar a tabela na horizontal (mobile) */
.plans-table tbody th, .plans-table thead th:first-child { position: sticky; left: 0; background: var(--c-surface-dark); }
.plans-table td svg { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--c-mint-dark-bg); }

/* ---------- "Não sabe qual escolher?" ---------- */
.plans-help { max-width: 620px; margin: 88px auto 0; text-align: center; }
.plans-help h3 { margin-bottom: 12px; }
.plans-help p { font-size: 17px; color: var(--c-on-dark-soft); text-wrap: balance; }
.plans-help .btn { margin-top: 28px; }

/* sem JS (ou com movimento reduzido) nada depende do reveal */
body:not(.has-motion) .plans .reveal { opacity: 1; transform: none; }

/* ≤1068px (breakpoint canônico do design system 4.3): três colunas
   apertariam preço e prazo — sequência vertical (Start → Express → Sob
   Medida) na largura de leitura (--container-narrow), sem subgrid */
@media (max-width: 1068px) {
  .plans-grid { grid-template-columns: 1fr; grid-template-rows: none; max-width: var(--container-narrow); margin: 0 auto; }
  .plan-card { grid-row: auto; display: flex; flex-direction: column; }
  .plan-head { align-self: auto; }
}
@media (max-width: 640px) {
  .plans-head h2 br, .plans-head p br, .plans-help p br { display: none; }
}

/* =========================================================================
   PROVA SOCIAL
   ========================================================================= */
.social { background: var(--c-surface); padding: 128px 0; } /* mesmo ritmo vertical (128px/88px) do resto da página — era 120px */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; text-align: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 600; color: var(--c-ink); letter-spacing: -.02em; }
.stat-label { font-size: 14px; color: var(--c-gray); margin-top: 6px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.testimonial-card { background: var(--c-surface-alt); border-radius: var(--radius-m); padding: 28px 24px; }
.stars { color: var(--c-gold); font-size: 13px; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-card p { font-size: 14.5px; color: var(--c-ink-80); margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--c-blue); }
.author-name { font-size: 14px; font-weight: 590; }
.author-role { font-size: 12.5px; color: var(--c-gray); }
@media (max-width: 900px) { .testimonials-grid, .stats-row { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   FAQ
   ========================================================================= */
/* Transição escuro → claro: até aqui (Hero…Planos) a página é só preto/
   grafite; o FAQ é a 1ª seção clara. Sem gradiente, o corte é seco demais
   para parecer proposital (Planos termina em --c-surface-dark #000 puro).
   ::before cobre só a metade superior do próprio padding-top da seção
   (128px ÷ 2 = 64px — mesma regra de derivação já usada no projeto, ex.:
   "Como?" a 120px = padding da própria .speed) com um fade #000 → o tom
   claro da seção, terminando bem antes do primeiro conteúdo (.section-head). */
.faq { background: var(--c-surface-alt); padding: 128px 0; position: relative; overflow: hidden; } /* mesmo ritmo vertical (128px/88px) do resto da página — era 120px */
.faq::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none;
  height: 64px;
  background: linear-gradient(180deg, #000 0%, var(--c-surface-alt) 100%);
}
.faq > .container { position: relative; z-index: 1; }
.faq-list { max-width: var(--container-narrow); margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--c-hairline); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 24px 0; text-align: left;
  font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--c-ink);
}
.faq-q .plus { font-size: 22px; font-weight: 300; color: var(--c-gray); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); color: var(--c-blue); }
/* grid-template-rows (mesmo padrão do .why-point-body): não depende de
   JS calcular scrollHeight, funciona com conteúdo de altura variável. */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 0 24px; font-size: 15.5px; max-width: 680px; }

/* =========================================================================
   CTA FINAL
   ========================================================================= */
.final-cta { background: var(--c-surface-dark); padding: 128px 0; text-align: center; } /* mesmo ritmo vertical (128px/88px) do resto da página — era 140px */
.final-cta-inner { max-width: 720px; margin: 0 auto; }
.final-cta h2 { color: #fff; }
.final-cta p { margin-top: 18px; font-size: 19px; color: rgba(245,245,247,.62); }
.final-cta-ctas { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.final-cta .btn-ghost-dark { color: var(--color-action); }
/* condição real do prazo: papel "Caption" (design system 1.2), a 18px dos CTAs */
.final-cta-note { margin-top: 18px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; color: var(--c-on-dark-soft); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--c-surface-dark); border-top: 1px solid rgba(255,255,255,.1); padding: 88px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; padding-bottom: 64px; }
.footer-intro .logo { margin-bottom: 28px; }
.footer-kicker { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-mint-dark-bg); margin-bottom: 14px; }
.footer-title { color: #fff; font-size: clamp(24px, 2.6vw, 32px); max-width: 480px; }
.footer-copy { margin-top: 16px; max-width: 440px; font-size: 15px; color: rgba(245,245,247,.55); }
.footer-contact-row { margin-top: 26px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-contact-link { font-size: 15px; font-weight: 590; color: var(--c-mint-dark-bg); }
.footer-contact-link:hover { text-decoration: underline; }
.footer-location { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(245,245,247,.45); }
.footer-location svg { width: 16px; height: 16px; }

.footer-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgba(245,245,247,.4); font-weight: 590; margin-bottom: 4px; }
.footer-col a { font-size: 14px; color: rgba(245,245,247,.72); }
.footer-col a:hover { color: #fff; }
.footer-email { word-break: break-all; }

.footer-signature { text-align: center; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.footer-word { font-family: var(--font-display); font-size: clamp(48px, 12vw, 160px); font-weight: 700; letter-spacing: -.03em; color: rgba(255,255,255,.06); line-height: 1; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: rgba(245,245,247,.4);
}
.footer-bottom strong { color: rgba(245,245,247,.6); font-weight: 590; }
.footer-backtop { color: rgba(245,245,247,.6); }
.footer-backtop:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-directory { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 560px) {
  .footer-directory { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================= */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 400; display: flex; align-items: center; gap: 12px; }
.wa-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition: transform .25s var(--ease-out);
}
.wa-btn:hover { transform: scale(1.06); }
.wa-tooltip {
  background: #fff; border-radius: var(--radius-s);
  padding: 10px 14px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.wa-float:hover .wa-tooltip { opacity: 1; transform: none; }
.wa-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 590; color: #1f9d55; }
.wa-status.offline { color: var(--c-gray); }
.wa-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wa-tooltip-text { font-size: 12.5px; color: var(--c-ink); white-space: nowrap; }

@media (max-width: 560px) {
  .wa-float { right: 16px; bottom: 16px; }
  .wa-btn { width: 50px; height: 50px; }
  .wa-tooltip { display: none; }
}

/* =========================================================================
   AJUSTES RESPONSIVOS GERAIS
   ========================================================================= */
@media (max-width: 900px) {
  .how, .templates, .customization, .speed, .plans, .social, .faq, .final-cta {
    padding-top: 88px; padding-bottom: 88px;
  }
  .section-head { margin-bottom: 40px; }
}
@media (max-width: 560px) {
  .site-header { height: 48px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .final-cta-ctas { flex-direction: column; align-items: stretch; }
  .final-cta-ctas .btn { width: 100%; }
}