/* ==========================================================================
   IUKA — sites para o comércio local
   Mobile first. Tema único: tinta quase preta, papel quente e brasa.
   Nenhuma dependência além das fontes.

   Serve TODAS as páginas do iuka.com.br — a home, o `criar`, o `precos`, o
   `obrigado` e as páginas de conteúdo do PLANO-PAGINAS.md. A home usa
   `.hero-title` e a `.shell` larga; as páginas filhas herdam a seção 19 e não
   redefinem nada. O painel admin tem CSS próprio (`admin.css`).
   ========================================================================== */

:root {
  /* Tinta ------------------------------------------------------------------ */
  --ink:        #0A0A0C;
  --ink-1:      #101014;
  --ink-2:      #16161C;
  --ink-3:      #1F1F27;

  /* Papel ------------------------------------------------------------------ */
  --paper:      #F6F4F1;
  --paper-dim:  rgba(246, 244, 241, .74);
  --paper-soft: rgba(246, 244, 241, .52);
  --paper-faint:rgba(246, 244, 241, .34);   /* só ícone, borda e hover */
  --paper-mute: rgba(246, 244, 241, .56);   /* o mesmo cinza, mas legível: 5,8:1 */
  --line:       rgba(246, 244, 241, .10);
  --line-2:     rgba(246, 244, 241, .20);

  /* Brasa — a cor da marca. Verde só existe no botão do WhatsApp, para que
     o CTA nunca dispute atenção com a identidade. ------------------------- */
  --brasa:      #FF6A2B;
  --brasa-lit:  #FF8A45;
  --brasa-deep: #D94A12;
  --brasa-wash: rgba(255, 106, 43, .13);
  --brasa-edge: rgba(255, 138, 69, .40);

  --brasa-ink:  #1A0A02;   /* 6,7:1 sobre a brasa — branco daria só 2,9:1 */
  --wa:         #25D366;
  --wa-lit:     #2FE873;
  --wa-ink:     #04130A;

  /* Medidas ---------------------------------------------------------------- */
  --shell:      74rem;                        /* 1184px */
  --shell-pad:  clamp(1.15rem, 5vw, 2.5rem);
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  30px;
  --header-h:   4rem;

  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   1 · Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

p  { margin: 0; text-wrap: pretty; }
a  { color: inherit; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brasa-lit);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--brasa); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  transform: translateY(-180%);
  background: var(--paper); color: var(--ink);
  padding: .7rem 1.1rem; border-radius: 999px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell-narrow { max-width: 52rem; }

/* Números de dinheiro nunca dançam de largura quando trocam. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   2 · Kicker e cabeçalhos de seção
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78125rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brasa-lit);
  margin: 0 0 1rem;
}
.kicker::before {
  content: ""; width: 22px; height: 2px; flex: none;
  background: var(--brasa); border-radius: 2px;
}
.kicker-plain::before { display: none; }

.section { padding-block: clamp(4rem, 11vw, 7.5rem); position: relative; }
.section-tint { background: var(--ink-1); }
.section-line { border-top: 1px solid var(--line); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 6vw, 3.5rem); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .kicker { justify-content: center; }

.section-title {
  font-size: clamp(1.95rem, 6.4vw, 3.25rem);
  margin-bottom: 1rem;
}
.section-title em { font-style: normal; color: var(--brasa-lit); }

.section-lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  color: var(--paper-dim);
  max-width: 42rem;
}
.section-head-center .section-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3 · Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: .9rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              color .18s var(--ease);
}
.btn .ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-wa {
  background: var(--wa); color: var(--wa-ink);
  box-shadow: 0 12px 32px -14px rgba(37, 211, 102, .75);
}
.btn-wa:hover { background: var(--wa-lit); box-shadow: 0 16px 40px -14px rgba(37, 211, 102, .85); }

.btn-brasa {
  background: var(--brasa); color: var(--brasa-ink);
  box-shadow: 0 12px 32px -14px rgba(255, 106, 43, .8);
}
.btn-brasa:hover { background: var(--brasa-lit); box-shadow: 0 16px 40px -14px rgba(255, 106, 43, .9); }

.btn-solid { background: var(--paper); color: var(--ink); }
.btn-solid:hover { background: #fff; }

.btn-ghost {
  border-color: var(--line-2); color: var(--paper);
  background: rgba(246, 244, 241, .04);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--paper-faint); background: rgba(246, 244, 241, .1); }

.btn-lg { padding: 1.05rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .6rem 1.05rem; font-size: .875rem; }
.btn-block { width: 100%; }

@media (min-width: 40em) {
  .btn-lg { font-size: 1.0625rem; }
  .btn-block { width: auto; }
}

/* --------------------------------------------------------------------------
   4 · Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease),
              border-color .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(10, 10, 12, .84);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--paper);
}
.brand-mark { width: 1.95rem; height: 1.95rem; flex: none; border-radius: 8px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.1875rem; font-weight: 800;
  letter-spacing: .16em; line-height: 1;
}

.nav { display: none; gap: 1.6rem; font-size: .9375rem; font-weight: 500; }
.nav a {
  color: var(--paper-dim); text-decoration: none;
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--paper); }

.header-ctas { display: flex; align-items: center; gap: .5rem; }
.header-cta { display: none; }
/* "Ativar meu site" é o caminho de quem JÁ tem site: fica sempre visível no
   header (inclusive no celular). "Crie agora" já domina o hero, então no header
   ele só reaparece quando há largura para os dois lado a lado. */
.header-cta.cta-ativar { display: inline-flex; }

@media (min-width: 40em) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 56em) {
  .nav { display: flex; }
}

/* --------------------------------------------------------------------------
   5 · Hero com os dois vídeos de fundo
   Os dois <video> ficam empilhados. Quem entra sobe no z-index e faz o
   fade de 0 → 1 por cima de quem sai, que continua opaco embaixo: assim o
   poster nunca aparece no meio da troca.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: clamp(3.5rem, 12vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -3; background: var(--ink); }
.hero-media img,
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: none;
}
.hero-media img { z-index: 1; }
.hero-media video {
  z-index: 2; opacity: 0;
  transition: opacity .9s linear;
}
.hero-media video.is-on { opacity: 1; }

/* Duas camadas de escurecimento: uma vertical, que garante contraste do texto
   em qualquer frame, e uma quente, que amarra o vídeo à cor da marca. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.46) 26%,
                            rgba(10,10,12,.72) 62%, var(--ink) 100%),
    linear-gradient(96deg, rgba(10,10,12,.86) 0%, rgba(10,10,12,.30) 62%, transparent 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(58rem 32rem at 8% 92%, rgba(255,106,43,.16), transparent 68%);
}

.hero-body { position: relative; }

.hero-title {
  font-size: clamp(2.5rem, 10.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 15ch;
}
.hero-title em { font-style: normal; color: var(--brasa-lit); }

.hero-sub {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 3.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 34rem;
}

.hero-actions {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
}

.hero-facts {
  margin: 2.5rem 0 0;
  display: grid; gap: 1.15rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.hero-facts .fact dt {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: .3rem;
}
.hero-facts .fact dd {
  margin: 0; font-size: .9375rem; font-weight: 500; color: var(--paper-dim);
  line-height: 1.45;
}
.hero-facts .fact strong { color: var(--paper); font-weight: 600; }

@media (min-width: 44em) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* Aviso discreto de que o vídeo é decorativo e não tem som. */
.hero-note {
  position: absolute; right: var(--shell-pad); bottom: 1.15rem; z-index: 2;
  display: none; align-items: center; gap: .45rem;
  font-size: .75rem; color: var(--paper-mute);
  letter-spacing: .04em;
}
.hero-note .ico { width: .95em; height: .95em; fill: currentColor; }
@media (min-width: 62em) { .hero-note { display: inline-flex; } }

/* --------------------------------------------------------------------------
   6 · Cards (o que o site tem)

   ÓRFÃO desde o corte da home (as seções "O problema" e "O que vem no site"
   saíram quando a landing virou porta do assistente). Confirmado por varredura:
   `.card`, `.card-ico`, `.grid-cards` e `.grid-cards-quatro` não aparecem em
   index.html, precos.html nem criar.html. Não apaguei junto com o corte de
   propósito — CSS morto não custa render, e varrer no mesmo commit em que se
   move 300 linhas de HTML tira a chance de conferir o antes e o depois. Varra
   num commit próprio.
   -------------------------------------------------------------------------- */
.grid-cards {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
}
@media (min-width: 38em) { .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; } }
@media (min-width: 62em) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
/* Quatro cards em três colunas deixam um órfão na segunda fila. */
@media (min-width: 70em) { .grid-cards-quatro { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              background-color .25s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); background: var(--ink-3); }

.card-ico {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 11px;
  background: var(--brasa-wash);
  border: 1px solid var(--brasa-edge);
  color: var(--brasa-lit);
  margin-bottom: 1.1rem;
}
.card-ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.card h3 { font-size: 1.0625rem; margin-bottom: .5rem; letter-spacing: -.015em; }
.card p  { font-size: .9375rem; color: var(--paper-dim); line-height: 1.6; }

/* --------------------------------------------------------------------------
   7 · Faixa de lojas (o walkthrough em imagens)
   -------------------------------------------------------------------------- */
.strip { position: relative; overflow: hidden; padding-block: .5rem; }
.strip::before, .strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem);
  z-index: 2; pointer-events: none;
}
.strip::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.strip::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.section-tint .strip::before { background: linear-gradient(90deg, var(--ink-1), transparent); }
.section-tint .strip::after  { background: linear-gradient(270deg, var(--ink-1), transparent); }

/* Margem no item em vez de gap: o gap fica ENTRE os itens (21 vãos para 22
   itens) e o -50% erraria a emenda por meio vão a cada volta. Com margem, a
   largura do track é 22 × (item + margem) e a metade é uma volta exata. */
.strip-track {
  display: flex; width: max-content;
  animation: desliza 56s linear infinite;
}
.strip-track > .strip-item { margin-right: 1rem; }
.strip:hover .strip-track,
.strip:focus-within .strip-track,
.strip.esta-parada .strip-track { animation-play-state: paused; }

/* Movimento automático de mais de 5s precisa ter como parar (WCAG 2.2.2), e
   o :hover não serve para dedo nem para teclado. */
.strip-pausa {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 3;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: rgba(10, 10, 12, .72);
  backdrop-filter: blur(8px);
  color: var(--paper); cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.strip-pausa:hover { background: rgba(10, 10, 12, .9); border-color: var(--paper-faint); }
.strip-pausa svg { width: 1rem; height: 1rem; fill: currentColor; }
/* Passando: mostra as duas barras (pausar). Parado: mostra a seta (voltar). */
.strip-pausa .seta { display: none; }
.strip-pausa[aria-pressed="true"] .barra-1,
.strip-pausa[aria-pressed="true"] .barra-2 { display: none; }
.strip-pausa[aria-pressed="true"] .seta    { display: block; }

@keyframes desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.strip-item {
  position: relative; flex: none;
  width: clamp(13rem, 42vw, 19rem);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  list-style: none;
}
.strip-item figure { margin: 0; height: 100%; }
.strip-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: transform .6s var(--ease);
}
.strip-item:hover img { transform: scale(1.045); }
.strip-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem .95rem .85rem;
  background: linear-gradient(180deg, transparent, rgba(10,10,12,.9));
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
}

/* Quem tem "reduzir movimento" ligado recebe uma tira que rola no dedo. */
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .strip-track { animation: none; }
  .strip-item { scroll-snap-align: center; }
}

/* A mesma lista de comércios em texto de verdade: é o que o buscador lê e o
   que o dono usa para se reconhecer. A esteira acima é só a ilustração. */
.lojas-lista {
  list-style: none;
  display: grid; gap: .85rem;
  margin-top: clamp(2rem, 6vw, 3rem);
  font-size: .9375rem; line-height: 1.55;
  color: var(--paper-soft);
}
.lojas-lista li { padding-left: 1rem; border-left: 2px solid var(--line); }
.lojas-lista strong { color: var(--paper); font-weight: 600; }
@media (min-width: 44em) { .lojas-lista { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
@media (min-width: 70em) { .lojas-lista { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   8 · Passo a passo

   VIVA, e não é a home que a usa: a seção "Como funciona" saiu, mas o passo 0
   do criar.html reusa `.steps` e `.step-n` para listar o que a pessoa vai
   precisar. Não varra junto com as seções 6, 9 e 10.
   -------------------------------------------------------------------------- */
.steps { list-style: none; display: grid; gap: 0; counter-reset: passo; }
.step {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  counter-increment: passo;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--brasa-edge);
  background: var(--brasa-wash);
  color: var(--brasa-lit);
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
}
.step-n::before { content: counter(passo, decimal-leading-zero); }
.step h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.step p  { color: var(--paper-dim); font-size: .9688rem; }

@media (min-width: 52em) {
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
  .step:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   9 · Planos — o resumo que aparecia na landing

   ÓRFÃO desde o corte da home, com UMA exceção: `.plano-sub` continua viva,
   usada em quatro lugares de precos.html. Ao varrer, preserve essa regra.
   -------------------------------------------------------------------------- */
.planos { display: grid; gap: 1.15rem; list-style: none; }
@media (min-width: 50em) { .planos { grid-template-columns: repeat(2, 1fr); } }

.plano {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.85rem 1.6rem;
}
.plano-destaque {
  border-color: var(--brasa-edge);
  background:
    linear-gradient(180deg, rgba(255,106,43,.09), transparent 42%),
    var(--ink-2);
}
.plano-tag {
  position: absolute; top: -.7rem; left: 1.6rem;
  background: var(--brasa); color: var(--brasa-ink);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.plano h3 { font-size: 1.375rem; margin-bottom: .35rem; }
.plano-sub { font-size: .9375rem; color: var(--paper-soft); margin-bottom: 1.25rem; }
.plano-preco {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--font-display); letter-spacing: -.04em;
  margin-bottom: 1.35rem;
}
.plano-preco b { font-size: clamp(2.25rem, 7vw, 2.85rem); font-weight: 800; line-height: 1; }
.plano-preco span { font-size: .9375rem; font-weight: 500; color: var(--paper-soft); letter-spacing: 0; font-family: var(--font-body); }
.plano-destaque .plano-preco b { color: var(--brasa-lit); }

.plano-lista { list-style: none; display: grid; gap: .7rem; font-size: .9375rem; }
/* O ícone é posicionado, não é uma coluna: com grid ou flex, cada <strong> do
   texto viraria um item próprio e a frase quebraria palavra por palavra. */
.plano-lista li { position: relative; padding-left: 1.8rem; color: var(--paper-dim); line-height: 1.55; }
.plano-lista svg { position: absolute; left: 0; top: .28em; width: 1.15rem; height: 1.15rem; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.plano-lista .sim svg { stroke: var(--brasa-lit); }
.plano-lista .nao svg { stroke: var(--paper-faint); }
.plano-lista .nao { color: var(--paper-soft); }

/* --------------------------------------------------------------------------
   10 · Faixa de preço na landing (levava ao simulador)

   ÓRFÃO desde o corte da home. `precos.html` continua publicada e linkada no
   rodapé e no header, mas quem chega nela não passa mais por esta faixa.
   -------------------------------------------------------------------------- */
.preco-ancora {
  display: grid; gap: 1.75rem;
  background:
    radial-gradient(38rem 22rem at 88% 12%, rgba(255,106,43,.16), transparent 70%),
    var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5.5vw, 3rem);
  margin-top: clamp(2rem, 6vw, 3rem);
}
.preco-ancora .valor {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
}
.preco-ancora .valor small {
  display: block; margin-top: .65rem;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 500;
  letter-spacing: 0; color: var(--paper-soft);
}
.preco-ancora p { color: var(--paper-dim); }
@media (min-width: 52em) {
  .preco-ancora { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; }
}

/* --------------------------------------------------------------------------
   11 · FAQ

   VIVA por causa de precos.html, que tem a própria seção de dúvidas. A da home
   saiu no corte; esta regra não.
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .65rem; }
.faq details {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.015em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .7rem; height: .7rem;
  border-right: 2px solid var(--brasa-lit); border-bottom: 2px solid var(--brasa-lit);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .faq-body { padding: 0 1.25rem 1.25rem; color: var(--paper-dim); font-size: .9688rem; }
.faq .faq-body p + p { margin-top: .7rem; }

/* --------------------------------------------------------------------------
   12 · CTA final e rodapé
   -------------------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(46rem 26rem at 50% 0%, rgba(255,106,43,.20), transparent 70%),
    var(--ink-1);
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta-band .section-title { margin-inline: auto; }
.cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cta-nota { margin-top: 1.35rem; font-size: .875rem; color: var(--paper-mute); }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 2.5rem;
  background: var(--ink);
  font-size: .9375rem;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.footer-sobre p { color: var(--paper-soft); margin-top: 1rem; max-width: 34ch; }
.site-footer h3 {
  font-size: .75rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-mute); margin-bottom: .9rem; font-weight: 600;
}
.footer-links { list-style: none; display: grid; gap: .6rem; }
.footer-links a { color: var(--paper-dim); text-decoration: none; }
.footer-links a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-fim {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  color: var(--paper-mute); font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   13 · Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed; z-index: 90;
  right: clamp(.9rem, 4vw, 1.6rem);
  bottom: calc(clamp(.9rem, 4vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  background: var(--wa); color: var(--wa-ink);
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 14px 38px -12px rgba(37, 211, 102, .8), 0 2px 8px rgba(0, 0, 0, .4);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease);
}
.wa-fab .ico { width: 1.35em; height: 1.35em; fill: currentColor; flex: none; }
.wa-fab:hover { background: var(--wa-lit); }
/* visibility junto do opacity: escondido de verdade, sem virar parada de
   tabulação invisível. */
.js .wa-fab {
  opacity: 0; visibility: hidden;
  transform: translateY(140%) scale(.9); pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease), visibility 0s .3s;
}
.js .wa-fab.is-visible {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease), visibility 0s;
}
@media (max-width: 26em) {
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wa-fab { padding: .9rem; }
}

/* --------------------------------------------------------------------------
   14 · Reveal ao rolar
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .reveal-1.is-in { transition-delay: .06s; }
.js .reveal-2.is-in { transition-delay: .12s; }
.js .reveal-3.is-in { transition-delay: .18s; }
.js .reveal-4.is-in { transition-delay: .24s; }

/* --------------------------------------------------------------------------
   15 · Preferências do sistema

   Era a segunda seção numerada 18 do arquivo — havia DUAS, e a colisão só não
   confundia porque ninguém navega por número. Assumiu o 15, vago desde que o
   bloco do simulador saiu (2026-08-20). Os números 16 e 17 ficam VAZIOS de
   propósito: o CLAUDE.md cita "seção 18" (padrões do painel) e "seção 19" (o
   padrão de página) por número, e renumerá-las tornaria o CLAUDE.md falso.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .wa-fab, .hero-media, .hero-scrim, .hero-grain,
  .strip, .strip-pausa, .skip-link { display: none !important; }

  /* O IntersectionObserver não roda no layout de impressão: sem isto, tudo o
     que ainda não tinha sido revelado na tela sai invisível no papel. */
  .js .reveal { opacity: 1 !important; transform: none !important; }

  body { background: #fff; color: #111; }
  .card, .plano, .preco-ancora,
  .faq details, .cta-band, .section-tint, .site-footer {
    border-color: #ccc !important;
    background: #fff !important;
  }
  /* Os cinzas do tema são branco com alfa e sumiriam no papel. */
  .section-lead, .card p, .plano-sub, .plano-lista li,
  .faq .faq-body, .footer-fim,
  .cta-nota, .lojas-lista, .step p, .hero-facts .fact dd {
    color: #333 !important;
  }
  .site-footer h3 { color: #555 !important; }
  a { color: #111 !important; }
}

/* ==========================================================================
   18 · Correções do painel de especialistas (2026-08-17)

   Vieram do laudo de cinco especialistas sobre a primeira página de conteúdo
   (/como-funciona). Estão AQUI, e não no <style> da página, porque cada uma
   é um padrão que as outras ~107 páginas do PLANO-PAGINAS.md herdam — e três
   delas consertam defeito que já existe nas páginas publicadas.

   Todas são aditivas: vêm depois no arquivo, então vencem por ordem, sem
   inflar especificidade e sem editar as regras originais.
   ========================================================================== */

/* --- Nível de TÍTULO DE PÁGINA -------------------------------------------
   O sistema tinha .hero-title (80px, só a landing) e .section-title (52px), e
   NÃO tinha título de página: o <h1> e todos os <h2> saíam idênticos em corpo,
   peso, entrelinha e tracking. Medido: 52,00px nos dois. A página ficava sem
   nível 1 — cinco pôsteres de igual peso e nenhum documento.
   Em 390px o corpo não pode crescer (as duas linhas do h1 já medem 328px numa
   caixa de 351px), então ali a distinção vem de peso 800, entrelinha 1.02 e
   tracking mais fechado; o tamanho só assume o comando acima de ~640px. */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.038em;
  margin: 0 0 max(1rem, .38em);
  text-wrap: balance;
}
.page-title em { font-style: normal; color: var(--brasa-lit); }

/* --- Escala óptica: entrelinha e tracking em função do corpo --------------
   A regra original aplicava line-height 1.1 e letter-spacing -.025em de 17px a
   52px. As duas pontas saíam erradas em direções opostas: 1.1 é frouxo para
   display de duas linhas e apertado para h3 de duas linhas (as descendentes
   encostavam nas ascendentes); e -.025em fecha texto pequeno, que é onde se
   deve abrir. */
h1, h2 { line-height: 1.04; letter-spacing: -.03em; }
h3, h4 { line-height: 1.25; letter-spacing: -.015em; }

/* --- Nível 3 único --------------------------------------------------------
   Havia três valores de h3 na mesma página (17px no card, 18px no passo, 17px
   nas perguntas) e cada um ficava a apenas 1,10× do próprio parágrafo. Um
   título precisa limpar o corpo que governa em ~1,25× para ser lido como
   título antes de ser lido como frase. */
.card h3, .step h3, .franco h3 {
  font-size: clamp(1.1875rem, .6vw + .95rem, 1.3125rem);
}

/* --- Ritmo vertical: proximidade que agrupa -------------------------------
   kicker→título e título→lead tinham os MESMOS 16px, então rótulo, título e
   lead liam como três irmãos de mesmo grau. Mas kicker+título são uma unidade.
   E o 16px era fixo enquanto o tipo crescia: sob um título de 52px são 0,31em,
   e no desktop o título encostava no lead justamente onde havia espaço. */
.kicker { margin: 0 0 .7rem; }
.section-title { margin-bottom: max(1rem, .4em); }

/* --- O CTA do header não pode sumir no celular ---------------------------
   .header-cta é display:none abaixo de 40em, e só .cta-ativar revertia — o que
   fazia sentido na home, onde dois botões disputam a barra. Numa página de
   conteúdo com um botão só, isso apagava o ÚNICO alvo tocável do topo: barra
   fixa de 64px, 246px de vazio, e o primeiro botão da página abaixo da dobra.
   Cabe: 104px de marca + 141px de botão dentro dos 353px do shell em 390px. */
.header-ctas > .header-cta:only-child { display: inline-flex; }

/* --- Rodapé curto: dois filetes a 89px um do outro -----------------------
   Nas páginas de conteúdo o .footer-fim é filho único, mas a margem e o
   border-top dele existiam para separá-lo do .footer-grid, que ali não existe.
   Sobravam duas linhas horizontais com nada entre elas. Conserta esta página
   e a /precos. */
.footer-fim:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Faixa de CTA depois de seção tingida --------------------------------
   .cta-band e .section-tint compartilham --ink-1: quando o CTA vem logo depois
   de uma seção tingida ele deixa de ser superfície nova e a alternância morre
   exatamente no fecho. Sobre --ink-2 o contraste continua folgado (--paper
   15,5:1, --paper-mute 5,9:1). Não afeta a home, onde o CTA vem depois de
   uma seção --ink. */
.section-tint + .cta-band {
  background:
    radial-gradient(46rem 26rem at 50% 0%, rgba(255, 106, 43, .22), transparent 70%),
    var(--ink-2);
  border-top-color: var(--line-2);
}

/* Duas páginas remendavam o mesmo componente com o mesmo style inline. */
.cta-band .section-lead { margin-inline: auto; }

/* --- Card sem link não reage ao ponteiro ---------------------------------
   O lift de -3px + troca de fundo prometia um clique que não existe: os cards
   de texto são <li>. Quem passa o mouse tenta clicar. */
.card:not(:has(a)):hover {
  transform: none;
  background: var(--ink-2);
  border-color: var(--line);
}

/* --- Foco visível no botão da marca --------------------------------------
   O anel era --brasa-lit com offset 3px, caindo dentro do próprio box-shadow
   laranja do botão: na borda de baixo era laranja sobre laranja, no estado que
   mais importa acertar. --paper sobre --ink dá 17:1. */
.btn-brasa:focus-visible,
.btn-wa:focus-visible { outline-color: var(--paper); }

/* --- Sem JS o header ficava transparente para sempre ---------------------
   .site-header não declara background; ele só chega com .is-stuck, escrita
   pelo main.js. Com o JS desligado a marca passava por cima do texto durante
   toda a rolagem — a única regressão real de "JS off", e era de legibilidade.
   A classe .no-js já está no <html> e o script inline do <head> a remove. */
.no-js .site-header {
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

/* --- Quem é o dono do produto -------------------------------------------
   A atribuição mora DENTRO do .footer-fim, no lugar que era da assinatura de
   marca: ali ela herda os 13px e o --paper-mute da barra, sem inventar um
   quarto grau de cinza nem uma linha a mais de rodapé. O sublinhado é o
   padrão de link da barra, igual ao do telefone nas páginas curtas — só o
   hover é próprio, porque este é o único link do rodapé que sai do site. */
.footer-org a {
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.footer-org a:hover { color: var(--paper); text-decoration-color: var(--brasa); }

/* --- A barra do fim precisa ser coluna enquanto o rodapé for coluna -------
   .footer-fim é flex-wrap + space-between. Com DOIS itens isso se comporta:
   ou cabem na linha (um em cada ponta) ou empilham os dois à esquerda. Com
   TRÊS — que é o caso das páginas curtas desde que a atribuição entrou — a
   quebra produz meia-linha, e a meia-linha é espalhada:

     430–480px   © copyright                        (linha 1, à esquerda)
                 atribuição            telefone     (linha 2, PONTAS OPOSTAS)
     540–680px   © copyright          atribuição    (linha 1, pontas opostas)
                 telefone                           (linha 2, à esquerda)

   Nenhuma coluna, nenhum eixo: é o desalinhado que se vê no celular grande e
   na janela estreita. O rodapé inteiro já é uma coluna abaixo de 48em (é onde
   .footer-grid vira três colunas), então a barra segue a mesma regra: coluna
   alinhada à esquerda embaixo, linha espalhada em cima. */
.footer-fim { flex-direction: column; align-items: flex-start; gap: .5rem; }
@media (min-width: 48em) {
  .footer-fim { flex-direction: row; align-items: baseline; gap: .5rem 1.5rem; }
}

/* ==========================================================================
   19 · O PADRÃO DE PÁGINA FILHA — definido em 2026-08-19, a pedido do dono
   ==========================================================================
   Diagnóstico que originou esta seção: /como-funciona era CENTRALIZADA com
   blocos de 34rem, /fotos era à ESQUERDA usando os 52rem inteiros, e cada uma
   redefinia .page-title no próprio <style>. Duas páginas irmãs com duas
   linguagens — "o site todo parece feio", nas palavras do dono, que preferiu a
   largura da /fotos.

   Pior: a hierarquia estava INVERTIDA. Medido em px:

        viewport    h2 (.section-title)    h1 (.page-title, 5vw)
          640px            41,0                   32,0   ← h2 MAIOR que h1
          768px            49,2                   38,4   ← idem
         1024px            52,0                   51,2   ← idem
         1280px            52,0                   64,0

   Porque .section-title cresce a 6.4vw e .page-title crescia a 5vw: entre
   ~640px e ~1040px o subtítulo passava o título. E a /fotos ainda sobrescrevia
   o h1 para um teto de 3.1rem, ficando MENOR que o h2 em todo desktop.

   O PADRÃO, e ele mora AQUI para ser herdado — nenhuma página redefine estas
   classes no próprio <style>:

     invólucro    .shell.shell-narrow (52rem) em toda página de conteúdo
     alinhamento  À ESQUERDA. Centralizar só em .cta-band
     prosa        .prosa limita a MEDIDA (42rem ≈ 62 caracteres a 19px) sem
                  estreitar o invólucro — é o que conserta o argumento correto
                  do /como-funciona (52rem de prosa corrida dão ~99 caracteres,
                  contra um teto de conforto de 75) sem centralizar nada
     título       .page-title herdado, sempre acima do .section-title

   A HOME NÃO É AFETADA: ela não usa .page-title, .topo, .voltar nem .prosa
   (usa .hero-title e .shell largo). Confirmado por grep antes de escrever isto.
   -------------------------------------------------------------------------- */

/* 7.2vw supera os 6.4vw do .section-title em qualquer largura, então o h1 nunca
   mais é ultrapassado. O PISO de 2rem fica: em 390px as duas linhas do h1 já
   medem 328px numa caixa de 351px, e ali a distinção vem de peso 800 e tracking
   fechado, não de tamanho (ver a seção 16). O TETO de 4rem também fica — é
   menor que o .hero-title da home (5rem), que segue sendo o maior tipo do site. */
.page-title { font-size: clamp(2rem, 7.2vw, 4rem); }

/* O topo de página filha: respiro sob o header fixo, à esquerda. */
.topo {
  padding-block: calc(var(--header-h) + 2.5rem) clamp(2.5rem, 7vw, 4rem);
}

/* A volta para a home. Discreta, acima do kicker.
   O `font-weight` é declarado aqui de propósito: até 2026-08-20 ele vinha de um
   segundo `.voltar` que morava na seção "Miudezas" do bloco do simulador, e
   vazava para cá por herança de ordem. Removido o bloco, o peso caía a 400 sem
   ninguém pedir. Medido antes do corte: 500. */
.voltar {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: 1.4rem;
  font-size: .875rem; font-weight: 500;
  color: var(--paper-mute); text-decoration: none;
}
/* `linecap`/`linejoin` redondos: o chevron é um `M15 18l-6-6 6-6`, três pontas
   e um cotovelo. Com o padrão (butt/miter) as pontas saem cortadas retas e o
   cotovelo vira bico. Vinham do `.voltar svg` das "Miudezas" do simulador e
   sumiram com ele — o diff de pixels do corte de 2026-08-20 acusou 6 pixels
   exatamente aqui, e é só isso que eles eram. */
.voltar svg {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.voltar:hover { color: var(--paper); }

/* MEDIDA de prosa. Use em qualquer bloco de texto corrido dentro dos 52rem —
   é o substituto dos max-width improvisados (34rem centralizado, 46ch, 62ch)
   que cada página vinha inventando. Não centraliza: só limita a linha. */
.prosa { max-width: 42rem; }
/* O RITMO da prosa, e não só a medida. O `styles.css` zera `p{margin:0}` na
   base, então dois parágrafos seguidos sobem COLADOS — uma parede de texto que
   nenhum portão enxerga e que o olho vê na hora (visto no screenshot da página
   piloto, 12/09/2026). A `/vs/linktree` já declarava esta linha no próprio
   `<style>`; subiu para cá antes de existirem 152 cópias dela, que é justamente
   o tipo de coisa que a seção 19 existe para impedir. */
.prosa + .prosa { margin-top: 1.1rem; }

/* Lista de itens com ícone à esquerda: mesma medida da prosa. */
.lista-prosa { max-width: 42rem; }

/* Botões de ação seguem o alinhamento do bloco: à ESQUERDA por padrão, porque a
   página filha é alinhada à esquerda. Centralizar só na faixa de CTA — o único
   bloco centralizado do padrão. Antes o `.cta-actions` centralizava em todo
   lugar, e no topo da /como-funciona o botão ficava no meio de um bloco
   alinhado à esquerda. A home não muda: o `.cta-actions` dela vive dentro do
   `.cta-band`, e o hero usa `.hero-actions`, que é outra classe. */
.cta-actions { justify-content: flex-start; }
.cta-band .cta-actions { justify-content: center; }

/* A nota sob o CTA é PROSA, não legenda: duas ou três linhas centralizadas dentro
   de uma faixa centralizada deixam as duas margens irregulares e o olho sem
   âncora. Alinha à esquerda na medida da prosa, mas centrada no bloco — assim a
   faixa continua simétrica. Estava resolvido com `style="text-align:left"` inline
   só na /como-funciona, enquanto a /fotos herdava o centro: mesma faixa, dois
   comportamentos. É exatamente o tipo de divergência que a seção 19 existe para
   matar. */
.cta-band .cta-nota { text-align: left; max-width: 42rem; margin-inline: auto; }