/* ============================================================================
   GIANTS — fundação visual das páginas públicas.

   ESCOPO EM DOIS ANÉIS, e o motivo é concreto:

   `.site`      — SÓ declaração de custom property. Vive em `body.public`, que
                  é o mesmo body de /precos, /admin/accounts/new e do modal de
                  lead. Custom property não pinta nada sozinha: declarar aqui
                  deixa o token disponível pra quem quiser sem repintar uma
                  linha de tela existente.
   `.site-page` — o corpo desta landing. É onde tipografia, componente e ritmo
                  entram. Assim a página nova pode ter corpo 17px e botão de
                  48px sem que a nav, o rodapé e a /precos mudem de altura num
                  deploy que ninguém pediu.

   NUNCA `:root`: app/views/pricing/index.html.erb injeta public.css também no
   layout "application" (usuário logado). Token global redefinido aqui vazaria
   pro dashboard inteiro.

   AS TRÊS REGRAS QUE GOVERNAM O RESTO
   1. COR É SEMÂNTICA, NÃO DECORAÇÃO. Superfície é cinza-tinta; cor entra em
      ação do dono, número verificável, estado no ar, estado pausado.
   2. UM GRADIENTE NA PÁGINA INTEIRA — a marca. Fundo chapado + 1px de borda em
      todo o resto. Superfície chapada lê "sistema"; gradiente roxo lê "landing
      de IA", que é o registro que o comprador desconfiado rejeita.
   3. RITMO 3:1. dentro-do-grupo < entre-grupos < entre-seções, com salto de
      ~3x. É isso que faz a página parecer editada.
   ============================================================================ */

.site {
  /* ---- TINTA E SUPERFÍCIE ---------------------------------------------- */
  --bg:           #0A0A1A;
  --surface-1:    #101026;
  --surface-2:    #16162E;
  --surface-3:    #1D1D3A;

  --line:         #23234A;
  --line-strong:  #33335E;

  /* ---- TEXTO -----------------------------------------------------------
     O --color-text-muted #6E6E8A do design antigo dá ~3.5:1 sobre o fundo —
     reprova em AA e é justamente onde mora a letra pequena de preço. Aqui ele
     está reclassificado: virou cor de LINHA, não de texto. */
  --ink-1:        #FFFFFF;   /* título, número de preço            ~19.5:1 */
  --ink-2:        #C6C6E0;   /* corpo de texto                     ~11:1   */
  --ink-3:        #8C8CAB;   /* legenda, rótulo, nota de rodapé    ~5.2:1  */
  --ink-on-act:   #FFFFFF;   /* texto sobre preenchimento roxo     ~5.1:1  */

  /* ---- COR COM FUNÇÃO --------------------------------------------------
     ACT  (roxo)  = ação do dono. Só CTA primário, foco e estado selecionado.
     EVID (ciano) = evidência verificável: dinheiro em dólar, teto, medição.
                    Nunca vira botão — ciano que é ação e prova ao mesmo tempo
                    deixa de ser lido como número medido.
     OK   (verde) = "está no ar / autorizado".
     WAIT (âmbar) = "pausado, esperando você". É VIRTUDE na narrativa, então
                    nunca usa vermelho. Vermelho só existe pra erro de campo. */
  --act:          #6C5CE7;
  --act-hover:    #7C6DF0;
  --act-text:     #A29BFE;
  --act-soft:     rgba(108, 92, 231, 0.12);
  --act-edge:     rgba(108, 92, 231, 0.35);

  --evid:         #00D4FF;
  --evid-soft:    rgba(0, 212, 255, 0.10);
  --evid-edge:    rgba(0, 212, 255, 0.30);

  --ok:           #00B894;
  --ok-soft:      rgba(0, 184, 148, 0.12);
  --wait:         #FDCB6E;
  --wait-soft:    rgba(253, 203, 110, 0.12);
  --wait-edge:    rgba(253, 203, 110, 0.32);

  /* ---- TIPOGRAFIA ------------------------------------------------------
     Corpo em 17px: o leitor tem 40-60 anos e lê no celular. Escala fluida com
     clamp, um valor por papel, zero font-size inline no HTML. */
  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-display:  clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);
  --t-h2:       clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  --t-h3:       clamp(1.1875rem, 1.12rem + 0.4vw, 1.5rem);
  --t-h4:       1.125rem;
  --t-lead:     clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-micro:    0.8125rem;   /* piso. Nada abaixo disso. */
  --t-money:    clamp(1.875rem, 1.4rem + 2vw, 3rem);

  --lh-display: 1.08;
  --lh-title:   1.2;
  --lh-body:    1.6;

  --tracking-display: -0.022em;
  --tracking-title:   -0.012em;
  --tracking-label:    0.08em;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;   /* teto. 800/900 em display vira promoção de varejo. */

  /* ---- ESPAÇO (base 4px) ----------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;

  /* Ritmo 3:1 — os três únicos espaços verticais que a página usa */
  --gap-in:      var(--s-3);
  --gap-between: var(--s-5);
  --gap-section: clamp(3.5rem, 8vw, 7rem);
  --pad-section: clamp(3.5rem, 8vw, 7rem) clamp(1.125rem, 4vw, 2rem);

  /* ---- LARGURA ---------------------------------------------------------- */
  --w-prose:   62ch;
  --w-content: 1080px;
  --w-narrow:  760px;

  /* ---- FORMA ------------------------------------------------------------ */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 9999px;
  --border: 1px solid var(--line);

  /* ---- MOVIMENTO --------------------------------------------------------
     Dois movimentos na página inteira: 140ms de cor/borda no hover e um reveal
     de 220ms. ZERO animação infinita. */
  --dur-fast: 140ms;
  --dur-move: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Pular pro conteúdo. Mora no layout, fora de `.site-page`, então precisa de
   estilo neste anel. Invisível até receber foco de teclado. */
.site .skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
}
.site .skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  background: var(--surface-2);
  color: var(--ink-1);
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  outline: 2px solid var(--evid);
  outline-offset: 3px;
}
.site #conteudo:focus { outline: none; }

/* Pulso eterno de FAB é assinatura de agência, e é ruído pra quem já
   desconfia. O widget é renderizado pelo layout, não pela view — a única
   forma de calá-lo na página pública é daqui. */
.site .sw__fab-pulse,
.site .sw__avatar-status { animation: none; }
.site .sw__fab-pulse { opacity: 0; }

/* ============================================================================
   A PÁGINA
   ============================================================================ */

.site-page {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A página nunca rola na horizontal. O que é largo rola dentro de si. */
  overflow-x: clip;
}

.site-page h1, .site-page h2, .site-page h3, .site-page h4 {
  color: var(--ink-1);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.site-page h1 {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.site-page h2 { font-size: var(--t-h2); }
.site-page h3 { font-size: var(--t-h3); }
.site-page h4 { font-size: var(--t-h4); font-weight: var(--w-semi); }

.site-page p { max-width: var(--w-prose); text-wrap: pretty; }
.site-page strong { color: var(--ink-1); font-weight: var(--w-semi); }
.site-page ul { list-style: none; padding: 0; margin: 0; }

/* Todo dinheiro da página usa isto. Algarismo de largura fixa alinha a coluna
   e faz o número parecer medido, não escrito. */
.site-page .num,
.site-page .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.site-page .num--evid { color: var(--evid); }
.site-page .num--wait { color: var(--wait); }

.site-page .label {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--gap-in);
}

.site-page .g-sec { padding: var(--pad-section); }
.site-page .g-sec--alt {
  background: var(--surface-1);
  border-block: var(--border);
}
.site-page .g-wrap { width: 100%; max-width: var(--w-content); margin-inline: auto; }
.site-page .g-wrap--narrow { max-width: var(--w-narrow); }
.site-page .g-stack > * + * { margin-top: var(--gap-between); }
.site-page .g-stack-in > * + * { margin-top: var(--gap-in); }

.site-page .g-lead {
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: 1.5;
}
.site-page .g-note {
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.55;
}

/* RITMO 3:1 na prática. Estes três são os únicos espaços verticais que a
   página usa, e existem como classe (e não como style inline) justamente pra
   que ninguém consiga inventar um quarto valor no meio do HTML. */
.site-page .g-mt   { margin-top: var(--gap-in); }
.site-page .g-mt-b { margin-top: var(--gap-between); }
.site-page .g-mt-g { margin-top: var(--s-6); }

/* O par cabeçalho + linha de apoio é o mesmo em toda seção: em vez de repetir
   a margem em nove lugares, a relação é declarada uma vez. */
.site-page h2 + .g-lead,
.site-page h2 + .g-anchor,
.site-page .g-lead + p { margin-top: var(--gap-in); }

.site-page .g-card {
  background: var(--surface-1);
  border: var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.site-page .g-card:hover { border-color: var(--line-strong); }

/* Qualquer coisa larga rola dentro de si mesma. */
.site-page .g-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- BOTÃO --------------------------------------------------------------
   Só os modificadores novos são definidos aqui. O `.btn` base de
   application.css continua valendo pra nav, rodapé e /precos — repintar a
   classe base a partir da folha da landing mudaria a altura de botão em tela
   que ninguém revisou. */
.site-page .btn--act,
.site-page .btn--quiet {
  min-height: 48px;                /* alvo de toque: o comprador lê no celular */
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  line-height: 1.3;
  border: 1px solid transparent;
  box-shadow: none;
  /* O `.btn` base é nowrap. Em 320px "Quero um na minha operação" mede mais
     que a largura útil e era o CTA da página que saía cortado pela borda da
     tela — o botão inteiro existe pra ser clicado, então ele quebra. */
  white-space: normal;
  text-align: center;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

/* Abaixo disso dois botões lado a lado não cabem sem apertar o alvo de toque:
   viram uma coluna, cada um com a largura inteira. */
@media (max-width: 430px) {
  .site-page .g-hero__cta { flex-direction: column; align-items: stretch; }
  .site-page .g-hero__cta .btn,
  .site-page .g-end__cta .btn { width: 100%; }
}
.site-page .btn--act { background: var(--act); color: var(--ink-on-act); }
.site-page .btn--act:hover { background: var(--act-hover); transform: none; box-shadow: none; }
.site-page .btn--quiet {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--line-strong);
}
.site-page .btn--quiet:hover { background: var(--surface-2); border-color: var(--act-edge); }

/* Ação de terceiro nível: parece link, mas é botão de verdade (abre o chat). */
.site-page .g-textlink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  background: none; border: none; padding: 0;
  font: inherit; font-weight: var(--w-semi);
  color: var(--act-text);
  cursor: pointer;
  text-align: left;
}
.site-page .g-textlink:hover { color: var(--ink-1); }
.site-page .g-textlink svg { flex-shrink: 0; }

/* FOCO — ciano (10:1 sobre o fundo), visível, nunca removido, com deslocamento
   pra não se confundir com a borda do próprio componente. */
.site-page :focus-visible {
  outline: 2px solid var(--evid);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.site-page :focus:not(:focus-visible) { outline: none; }

/* Reveal único da página. Sem stagger, sem parallax.
   O estado escondido é CSS; sem JS o <noscript> da view devolve tudo. */
.site-page .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-move) var(--ease),
              transform var(--dur-move) var(--ease);
}
.site-page .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   1. DOBRA
   ============================================================================ */
.site-page .g-hero { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.125rem, 4vw, 2rem) clamp(3rem, 6vw, 4.5rem); }
.site-page .g-hero__title { max-width: 18ch; }
.site-page .g-hero__lead { margin-top: var(--gap-between); max-width: 54ch; }
.site-page .g-hero__anchor {
  margin-top: var(--gap-in);
  font-size: var(--t-small);
  color: var(--ink-3);
  max-width: 54ch;
}
.site-page .g-hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
}
.site-page .g-hero__third { margin-top: var(--s-2); }

/* ============================================================================
   2. A CONTA QUE ELE JÁ ESTÁ FAZENDO
   ============================================================================ */
.site-page .g-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap-between);
  margin-top: var(--s-6);
  align-items: start;
}
.site-page .g-scale__col { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-lg); }
.site-page .g-scale__col--clt { background: var(--surface-1); border: var(--border); }
.site-page .g-scale__col--agent { background: var(--surface-1); border: 1px solid var(--act-edge); }
.site-page .g-scale__role {
  font-size: var(--t-micro); font-weight: var(--w-semi);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
}
.site-page .g-scale__total {
  font-size: var(--t-money); font-weight: var(--w-bold);
  line-height: 1.05; margin-top: var(--s-3);
}
.site-page .g-scale__unit { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink-3); }

.site-page .g-breakdown { margin-top: var(--s-5); border-top: var(--border); }
.site-page .g-breakdown li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: var(--border);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.site-page .g-breakdown li span:last-child { color: var(--ink-1); white-space: nowrap; }
.site-page .g-breakdown li.is-total { font-weight: var(--w-semi); border-bottom: none; }

.site-page .g-facts { margin-top: var(--s-5); }
.site-page .g-facts li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-small);
  line-height: 1.55;
}
.site-page .g-facts li + li { margin-top: var(--s-2); }
.site-page .g-facts li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong);
}
.site-page .g-facts--ok li::before { background: var(--ok); }

.site-page .g-defuse {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-left: 2px solid var(--act);
  background: var(--act-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: none;
}

/* ============================================================================
   3. OS TRÊS ATOS — coluna, não três cards. A progressão É o argumento.
   ============================================================================ */
.site-page .g-acts { margin-top: var(--s-6); }
.site-page .g-act {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-top: var(--border);
}
.site-page .g-act:last-child { border-bottom: var(--border); }
.site-page .g-act__num {
  font-size: var(--t-h3); font-weight: var(--w-bold);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.site-page .g-act--lead .g-act__num { color: var(--act-text); }
.site-page .g-act__body > * + * { margin-top: var(--gap-in); }
.site-page .g-act__lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.site-page .g-act__why {
  margin-top: var(--gap-between);
  padding: var(--s-4);
  background: var(--surface-2);
  border: var(--border);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: none;
}
.site-page .g-act__why b { color: var(--ink-1); font-weight: var(--w-semi); }

/* ============================================================================
   4. O QUE ELE NÃO FAZ — neutro. São promessas, não modos de falha.
   ============================================================================ */
.site-page .g-nots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gap-between);
  margin-top: var(--s-6);
}
.site-page .g-not__title { margin-bottom: var(--gap-in); }
.site-page .g-not p { font-size: var(--t-small); color: var(--ink-2); max-width: none; }

/* ============================================================================
   5. CENA — personalização por pessoa
   ============================================================================ */
.site-page .g-scene {
  margin-top: var(--s-6);
  padding: clamp(1.125rem, 3vw, 1.75rem);
  background: var(--surface-1);
  border: var(--border);
  border-radius: var(--r-lg);
}
.site-page .g-scene__list > * + * { margin-top: var(--s-3); }
.site-page .g-bubble {
  max-width: min(34rem, 88%);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  line-height: 1.5;
}
.site-page .g-bubble--owner {
  margin-left: auto;
  background: var(--act-soft);
  border: 1px solid var(--act-edge);
  color: var(--ink-1);
  border-bottom-right-radius: var(--r-sm);
}
.site-page .g-bubble--agent {
  background: var(--surface-2);
  border: var(--border);
  border-bottom-left-radius: var(--r-sm);
}
.site-page .g-bubble__who {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-bottom: var(--s-1);
}
.site-page .g-scene__saved {
  display: flex; align-items: flex-start; gap: var(--s-3);
  max-width: none;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--border);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.site-page .g-dot {
  flex-shrink: 0; margin-top: 0.45em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
}

/* ============================================================================
   6. CUSTO VISÍVEL
   ============================================================================ */
.site-page .g-cost {
  margin-top: var(--s-6);
  background: var(--surface-1);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.site-page .g-cost__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-4) clamp(1rem, 3vw, 1.5rem);
  border-bottom: var(--border);
  background: var(--surface-2);
}
.site-page .g-cost__title { font-size: var(--t-small); font-weight: var(--w-semi); color: var(--ink-1); }
.site-page .g-cost__when { font-size: var(--t-micro); color: var(--ink-3); }
.site-page .g-cost__rows { padding: var(--s-2) clamp(1rem, 3vw, 1.5rem); }
.site-page .g-cost__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: var(--t-small);
}
.site-page .g-cost__row + .g-cost__row { border-top: var(--border); }
.site-page .g-cost__row dt { color: var(--ink-2); }
.site-page .g-cost__row dd { margin: 0; font-weight: var(--w-semi); white-space: nowrap; }
.site-page .g-cost__meter {
  padding: var(--s-4) clamp(1rem, 3vw, 1.5rem) var(--s-5);
  border-top: var(--border);
}
.site-page .g-cost__track {
  height: 8px; border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.site-page .g-cost__fill { height: 100%; background: var(--evid); border-radius: var(--r-pill); }
.site-page .g-cost__legend {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-3);
  max-width: none;
  font-size: var(--t-micro); color: var(--ink-3);
}

/* Bater o teto é VIRTUDE na narrativa: âmbar de "pausado, esperando você",
   nunca vermelho de erro. */
.site-page .g-rule {
  display: flex; gap: var(--s-3);
  margin-top: var(--gap-between);
  padding: var(--s-4);
  border: 1px solid var(--wait-edge);
  background: var(--wait-soft);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.site-page .g-rule p { max-width: none; }
.site-page .g-rule__mark {
  flex-shrink: 0; margin-top: 0.35em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--wait);
}

/* ============================================================================
   8. PREÇO EM RESUMO
   ============================================================================ */
.site-page .g-anchor {
  margin-top: var(--gap-in);
  font-size: var(--t-small);
  color: var(--ink-3);
}
.site-page .g-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.site-page .g-plan {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: var(--surface-1);
  border: var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease);
}
.site-page .g-plan:hover { border-color: var(--line-strong); }
.site-page .g-plan--pick { border-color: var(--act-edge); }
.site-page .g-plan__badge {
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 0.2rem var(--s-3);
  border-radius: var(--r-pill);
  background: var(--act-soft);
  border: 1px solid var(--act-edge);
  color: var(--act-text);
  font-size: var(--t-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.site-page .g-plan__name { font-size: var(--t-h4); font-weight: var(--w-semi); color: var(--ink-1); }
.site-page .g-plan__price {
  margin-top: var(--s-2);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-weight: var(--w-bold);
  line-height: 1.1;
}
.site-page .g-plan__per { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink-3); }
.site-page .g-plan__desc {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: none;
  flex: 1;
}

.site-page .g-fronts { margin-top: var(--s-7); }
.site-page .g-fronts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.site-page .g-front {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.site-page .g-front__plus {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--ink-3);
  line-height: 1.1;
}
.site-page .g-front__name { font-size: var(--t-h4); font-weight: var(--w-semi); color: var(--ink-1); }
.site-page .g-front__price { margin-top: var(--s-1); font-size: var(--t-small); font-weight: var(--w-semi); }
.site-page .g-front__desc { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-2); max-width: none; }

/* ============================================================================
   9. QUEM RESPONDE
   ============================================================================ */
.site-page .g-who {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
  margin-top: var(--s-6);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface-1);
  border: var(--border);
  border-radius: var(--r-lg);
}
.site-page .g-who__mark {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 1.5rem;
  /* O ÚNICO gradiente autorizado no documento: a marca. */
  background: linear-gradient(135deg, var(--act), var(--evid));
  color: #0A0A1A;
  font-weight: var(--w-bold);
}
.site-page .g-who__name { font-size: var(--t-h4); color: var(--ink-1); font-weight: var(--w-semi); }
.site-page .g-who__body > * + * { margin-top: var(--gap-in); }
.site-page .g-who__channels {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  max-width: none;
  margin-top: var(--gap-between);
  font-size: var(--t-small);
}
/* Alvo de toque: dois links colados numa linha, num celular, sem altura
   própria, é o par que o polegar erra. */
.site-page .g-who__channels a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--act-text); font-weight: var(--w-semi);
}
.site-page .g-who__channels a:hover { color: var(--ink-1); }

/* ============================================================================
   10. FAQ — <details> nativo. Sem JS, com teclado de graça.
   ============================================================================ */
.site-page .g-faq { margin-top: var(--s-6); }
.site-page .g-faq__item {
  border-bottom: var(--border);
}
.site-page .g-faq__item:first-child { border-top: var(--border); }
.site-page .g-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h4);
  font-weight: var(--w-semi);
  color: var(--ink-1);
  transition: color var(--dur-fast) var(--ease);
}
.site-page .g-faq__q::-webkit-details-marker { display: none; }
.site-page .g-faq__q:hover { color: var(--act-text); }
.site-page .g-faq__sign {
  flex-shrink: 0;
  width: 1.25rem; height: 1.25rem;
  position: relative;
}
.site-page .g-faq__sign::before,
.site-page .g-faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--ink-3);
  transition: transform var(--dur-fast) var(--ease);
}
.site-page .g-faq__sign::after { transform: rotate(90deg); }
.site-page .g-faq__item[open] .g-faq__sign::after { transform: rotate(0deg); }
.site-page .g-faq__a {
  padding-bottom: var(--s-5);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: var(--w-prose);
}

/* ============================================================================
   11. FECHAMENTO — uma ação só
   ============================================================================ */
.site-page .g-end { text-align: left; }
.site-page .g-end__cta { margin-top: var(--s-6); }
.site-page .g-end__note { margin-top: var(--gap-in); font-size: var(--t-small); color: var(--ink-3); }

/* ============================================================================
   MOVIMENTO REDUZIDO — desliga tudo, inclusive o reveal.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .site-page *, .site-page *::before, .site-page *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .site-page .reveal { opacity: 1; transform: none; }
}