/* =============================================================================
   FORMAÇÃO MÉTODO ANTIQUEDA CAPILAR — ENHANCEMENTS (camada editorial "casa")
   -----------------------------------------------------------------------------
   Camada ADITIVA — carregar SEMPRE por último (depois de tokens/base/components).
   Objetivo: puxar a assinatura editorial do template da casa (figueiredoneto.com)
   para mais perto — índice numérico de seção, header minimalista, réguas de 1px,
   ritmo de espaço negativo e polimento de craft — SEM tocar em copy, marca ou JS.

   Regras: só tokens var(--...); nenhum hook de JS (data-*, .reveal, .topbar,
   .is-visible, .progress, .faq__item, form.form-espera, #ano, .wa-float) é
   renomeado/removido. Todo elemento novo é decorativo e aria-hidden.

     A · Header minimalista fixo (logo + 1 CTA)      E · Depoimentos (filete rosê)
     B · Índice editorial de seção + hero opener      F · FAQ (marcador circular)
     C · Ritmo de seção / réguas de 1px               G · Lotes / flagship
     D · Contrato de card + comparação + stats        H · Micro-refinos + mobile
   ============================================================================= */


/* =============================================================================
   A · HEADER FIXO (logo + âncoras internas + 1 CTA) — ref. Merkil
   Funil-safe: as âncoras apontam SÓ para seções desta página (zero fuga) e o
   CTA segue único. Cede o topo à .topbar de oferta assim que ela surge no scroll.
   ============================================================================= */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-topbar) - 1);        /* sempre abaixo da .topbar (100) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: 10px var(--pad-x);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-light);
  transition: transform .4s var(--ease-expo), opacity .3s ease;
}
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: 1.05;
}
.site-nav__logo { width: 40px; height: 40px; flex: 0 0 auto; }
.site-nav__name { display: inline-flex; flex-direction: column; gap: 2px; }
.site-nav__brand small {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: .64rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Âncoras internas centrais (ref. Merkil) — navegação da própria página */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
  margin-inline: auto;
}
.site-nav__links a {
  position: relative;
  padding: 8px 2px;
  font-size: .9rem;
  font-weight: var(--weight-medium);
  letter-spacing: .01em;
  color: var(--text);
  transition: color .2s ease;
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  height: 1.5px;
  background: var(--bordo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-expo);
}
.site-nav__links a:hover,
.site-nav__links a:focus-visible { color: var(--bordo); }
.site-nav__links a:hover::after,
.site-nav__links a:focus-visible::after { transform: scaleX(1); }
/* Tablet/mobile: o funil fica só com marca + CTA (sem hambúrguer = menos fricção) */
@media (max-width: 1020px) { .site-nav__links { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-nav__links a::after { transition: none; } }
/* Quando a topbar de oferta assume o topo, o header sai de cena (um por vez). */
body:has(.topbar.is-visible) .site-nav {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .site-nav { transition: none; } }
@media (max-width: 400px) { .site-nav__brand small { display: none; } }
/* CTA do header nunca quebra em duas linhas (a marca pode; o botão não) */
.site-nav .btn--sm { white-space: nowrap; }


/* =============================================================================
   B · SECTION-HEAD EDITORIAL — régua fina de 1px + alinhamento à esquerda + respiro
   Variante OPT-IN de .section-head (as centralizadas seguem intactas).
   SEM marcadores numéricos: a cadência vem da régua + do kicker (.eyebrow) forte
   + do espaço negativo — mais distinto que o scaffold "01/02/03".
   ============================================================================= */
.section-head--index {
  max-width: 880px;
  margin-inline: 0;                 /* sobrepõe o auto → alinha à esquerda */
  text-align: left;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.section-head--index > * { margin-inline: 0; }
.section-head--index .lead { margin-inline: 0; max-width: 62ch; }
/* Kicker um pouco mais presente quando abre um capítulo editorial */
.section-head--index .eyebrow { margin-bottom: var(--space-5); }
/* Sobre fundos escuros (bordô/rosê), caso a variante seja usada lá */
.section--invert .section-head--index,
.section--empathy .section-head--index { border-top-color: rgba(255, 255, 255, .28); }

/* Régua fina abrindo as pills de confiança do hero (respiro editorial, sem HTML novo).
   align-self: stretch → a régua cruza a coluna inteira (o painel usa align-items:flex-start) */
.hero__trust { align-self: stretch; padding-top: var(--space-5); border-top: 1px solid var(--border-light); }


/* =============================================================================
   C · RITMO DE SEÇÃO / RÉGUAS DE 1px — espaço negativo como status
   ============================================================================= */
.section-head h2 { letter-spacing: var(--tracking-title); }
.section-head .lead { margin-top: var(--space-4); }

/* Divisor editorial: variante silenciosa (só hairline) do .separator com ✦ */
.separator__line, .separator__line--r { max-width: min(38vw, 300px); }
.separator--rule { padding: var(--space-5) 0; }
.separator--rule .separator__icon { display: none; }
.separator--rule .separator__line {
  max-width: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}


/* =============================================================================
   D · CONTRATO ÚNICO DE CARD + COMPARAÇÃO + STATS (harmonia de craft)
   ============================================================================= */
/* Um único gesto de hover para o conjunto (flagship segue como exceção). */
.card, .depoimento, .lote-card {
  transition: transform .28s var(--ease-expo), box-shadow .28s ease, border-color .28s ease;
}
.card:hover, .depoimento:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--bordo-200); }
.lote-card:not(.lote-card--flagship):not(.lote-card--futuro):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lote-card--futuro:hover { transform: none; box-shadow: none; border-color: var(--border); }
.card__icon { border-radius: var(--radius-sm); }

/* Quadro de Comparação (duelo): hover de linha reforça a coluna vencedora */
.duelo__mark--ok { transition: background .2s ease; }
@media (min-width: 641px) {
  .duelo__row:hover { background: var(--neutral-50); }
  .duelo__row:hover .duelo__mark--ok { background: var(--bordo-100); }
}

/* Faixa de números: réguas verticais mais finas + baseline de label alinhado */
.stat + .stat { border-left-color: var(--border-light); }
.stat__num { letter-spacing: var(--tracking-title); }
.stat__label { min-height: 2.6em; }
@media (max-width: 640px) { .stat__label { min-height: 0; } }


/* =============================================================================
   E · DEPOIMENTOS — filete de acento Rosê + aspas como marca d'água (padrão da casa)
   ============================================================================= */
.depoimento { border-color: var(--rose-200); overflow: hidden; }
.depoimento__aspas {
  position: absolute;
  top: var(--space-3); right: var(--space-5);
  margin: 0;
  font-size: 4.5rem;
  opacity: .14;
  pointer-events: none;
}
.depoimento__rating { margin-top: 0; }
.depoimento__quote { position: relative; z-index: 1; }


/* =============================================================================
   F · FAQ — marcador +/× dentro de alvo circular de 1px (ecoa os ícones da casa)
   ============================================================================= */
.faq__q::after {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .25s var(--ease-expo), border-color .2s ease, background .2s ease;
}
.faq__item[open] .faq__q::after { border-color: var(--bordo-200); background: var(--bordo-50); }
.faq__q:hover::after { border-color: var(--bordo-200); }


/* =============================================================================
   G · LOTES / FLAGSHIP — filete superior em gradiente de marca + ritmo do grid
   ============================================================================= */
.lote-card__features { flex: 1; }               /* iguala alturas → CTAs alinhados */
.lote-card--flagship {
  border-top: 3px solid transparent;
  background-image: linear-gradient(var(--bordo), var(--bordo)), var(--gradient-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.lote-card--flagship::after { box-shadow: var(--shadow-sm); letter-spacing: .16em; }
@media (min-width: 901px) {
  .lote-card--flagship { transform: translateY(-8px); }
  .lote-card--flagship:hover { transform: translateY(-14px) scale(1.01); }
}


/* =============================================================================
   H · MICRO-REFINOS + MOBILE (botões, chips, badges, alvos de toque, âncoras)
   ============================================================================= */
/* Botões: filete de 1px preciso + anel de foco alinhado ao token --ring */
.btn { border-width: 1px; }
.btn--outline, .btn--light { border-width: 1px; }
.btn:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; box-shadow: 0 0 0 4px var(--ring); }

/* Topbar de oferta: rótulo editorial + divisor fino antes do timer */
.topbar__label { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-eyebrow); }
.topbar__timer { font-variant-numeric: tabular-nums; padding-left: var(--space-4); border-left: 1px solid rgba(255,255,255,.28); white-space: nowrap; }
@media (max-width: 560px) { .topbar__timer { border-left: 0; padding-left: 0; } }

/* Deadline-chip e badges: hairline coeso + halo sutil no dot */
.deadline-chip { border-color: var(--border-light); }
.deadline-chip__time { font-variant-numeric: tabular-nums; }
.badge__dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }

/* Selo de garantia: halo hairline (fecha o vocabulário de círculos) */
.garantia__seal { box-shadow: 0 0 0 6px var(--bordo-50); }

/* Âncoras: folga coerente com header/topbar fixos */
section[id], header[id] { scroll-margin-top: 76px; }
@media (max-width: 640px) { section[id], header[id] { scroll-margin-top: 64px; } }

/* Alvos de toque confortáveis (público majoritariamente mobile C–D) */
@media (max-width: 640px) {
  .faq__q { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .section-head--index { padding-top: var(--space-5); }
}


/* =============================================================================
   I · ESTRUTURA — GRADE EDITORIAL COERENTE
   Problema corrigido: cabeçalhos alinhados à esquerda mas conteúdo centralizado
   (ou em container mais estreito) faziam a margem esquerda "pular" a cada seção.
   Solução: em toda seção editorial, o cabeçalho E o conteúdo compartilham a
   MESMA borda esquerda (a do container) e uma medida de leitura consistente.
   As grades de cards (módulos, depoimentos, lotes) seguem em largura cheia, mas
   começando na mesma borda. As seções de "momento" (virada, garantia, CTA final)
   continuam centradas de propósito, como pausa de ritmo.
   ============================================================================= */

/* Cabeçalhos editoriais na largura cheia do container (padrão da página toda) */
.section-head--index { max-width: none; }

/* Blocos de texto/lista: alinhados à esquerda, na largura cheia do container.
   (Anamnese e duelo são full-bleed — largura controlada em components.css.) */
#oferta .stack-valor { margin-inline: 0; max-width: none; }
#oferta .progress { margin-inline: 0; max-width: none; }
#faq .faq { margin-inline: 0; max-width: none; }

/* CTAs e notas de seção acompanham a coluna (esquerda), sem "flutuar" no centro */
#transformacao > .container > .text-center,
#modulos > .container > .text-center { text-align: left; }
#provas p.text-center,
#oferta p.text-center { text-align: left; margin-inline: 0; max-width: 72ch; }

/* Segundo cabeçalho da oferta (lotes) no mesmo padrão editorial */
#oferta .section-head--index + .stack-valor { margin-top: var(--space-6); }

/* No mobile a coluna ocupa a largura toda (sem medidas fixas apertando) */
@media (max-width: 720px) {
  #oferta .stack-valor,
  #faq .faq { max-width: 100%; }
  #transformacao > .container > .text-center,
  #modulos > .container > .text-center { text-align: center; }
}


/* =============================================================================
   J · LEDGER DE TRANSFORMAÇÃO ("o que você deixa para trás") — antes → depois
   Cada linha alinha 1 dor (riscada, rebaixada) → 1 ganho, num livro-razão de
   hairlines. Substitui a grade de 10 cards idênticos: a monotonia de card some
   e o pareamento 1:1 da copy vira a própria estrutura visual.
   ============================================================================= */
.swap-head,
.swap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) 24px minmax(0, 1.2fr);
  gap: var(--space-5);
}
.swap-head {
  padding: 0 var(--space-3) 10px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.swap-list { max-width: none; }   /* largura cheia do container, como o hero/anamnese */
.swap {
  align-items: baseline;
  padding: 18px var(--space-3);
  border-top: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: background .2s ease;
}
.swap:last-child { border-bottom: 1px solid var(--border-light); }
.swap:hover { background: var(--neutral-50); }
.swap__leave {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-decoration: line-through;
  text-decoration-color: var(--bordo-300);
  text-underline-offset: 2px;
}
.swap__arrow { color: var(--bordo-300); font-weight: 700; text-align: center; }
.swap__gain { font-weight: var(--weight-medium); line-height: 1.5; }
.swap__gain strong { color: var(--bordo); }
@media (max-width: 720px) {
  .swap-head { display: none; }         /* rótulos de coluna não fazem sentido empilhados */
  .swap { grid-template-columns: 1fr; gap: 6px; padding-inline: 0; border-radius: 0; }
  .swap:hover { background: transparent; }
  .swap__arrow { display: none; }
  .swap__gain { display: flex; gap: 10px; align-items: baseline; }
  .swap__gain::before { content: "→"; color: var(--bordo); font-weight: 700; flex: 0 0 auto; }
}