/* ====================================================================
   ARTEN — CAMADA DE CONVERSÃO
   Só aditivo: nada aqui redefine o visual das seções existentes, só
   acrescenta CTA, prova e captação de emergência. Convenções herdadas
   de tokens.css e sections.css/fim.css/lp-extras.css — nada de hex
   solto, nada de px mágico fora do sistema de --space-*.
   ==================================================================== */

/* --------------------------------------------------------------------
   1 · CTA no hero
   Vive dentro de .hero__palco, absoluto como os outros blocos do hero
   (.hero__sub, .hero__titulo, .hero__lado). É um <a href="#captacao">:
   sem JS nenhum ele já pula pra seção de captação — o JS só melhora
   (scroll suave + foco no campo). Pílula clara (.botao-primario já
   resolve preto-sobre-claro / branco-sobre-escuro do checklist §2).
   -------------------------------------------------------------------- */
.hero__oferta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-8);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.hero__oferta-cta { margin-top: 0; }
.hero__oferta-nota {
  margin: 0;
  max-width: 32ch;
  font-size: var(--text-caption);
  color: var(--text-muted-inverse);
}

@media (max-width: 767.98px) {
  .hero__oferta { align-items: flex-start; text-align: left; bottom: var(--space-6); }
  .hero__oferta-nota { max-width: 28ch; }
}

/* Rede de segurança: mesmas regras que o resto do hero usa pra sair do
   modo "câmera" e virar layout em fluxo quando o motion é reduzido. */
html.sem-motion .hero__oferta,
:root.sem-motion .hero__oferta {
  position: static;
  margin: var(--space-6) var(--gutter) 0;
  align-items: flex-start;
  text-align: left;
  width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .hero__oferta {
    position: static;
    margin: var(--space-6) var(--gutter) 0;
    align-items: flex-start;
    text-align: left;
    width: auto;
  }
}

/* --------------------------------------------------------------------
   2 · Bloco da oferta — "Sua peça, reservada."
   Seção curta, a oferta antes do pedido, imediatamente antes de
   .captacao. Fundo escuro coerente com as seções vizinhas (mesmo par
   surface-inverse/text-inverse que .malha e .manifesto usam). Filete
   camelo como régua acima do bloco, único uso do camelo aqui, 1,5px,
   nunca fundo/área/texto.
   -------------------------------------------------------------------- */
.oferta {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.oferta__interno {
  max-width: var(--measure);
  padding-block: var(--space-16);
  border-top: var(--rule-camelo) solid var(--camelo);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.oferta__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  color: var(--paper);
}
.oferta__corpo {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-subtitle);
  line-height: var(--leading-body);
  color: var(--text-muted-inverse);
}
.oferta__corpo em { font-style: italic; color: var(--paper); }

@media (max-width: 767.98px) {
  .oferta__interno { padding-block: var(--space-12); }
}

/* --------------------------------------------------------------------
   4 · Sticky mini-captura
   Barra fina, fundo ink SÓLIDO (checklist §2: nunca vidro/blur), filete
   camelo como única borda, no topo da barra. Nasce escondida por CSS
   (visibility, não display: none — mantém a transição e sai da árvore
   de foco/leitura enquanto oculta, mesmo truque de .waitlist__ok em
   fim.css). Some sozinha se o JS não rodar: nunca bloqueia o formulário
   real, que continua acessível por scroll normal.
   -------------------------------------------------------------------- */
.sticky-captura {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--layer-nav);
  background: var(--ink);
  border-top: var(--rule-camelo) solid var(--camelo);
  visibility: hidden;
  opacity: 0;
  translate: 0 100%;
  transition:
    opacity var(--duration-hover) var(--ease-editorial),
    translate var(--duration-hover) var(--ease-editorial),
    visibility 0s var(--duration-hover);
}
.sticky-captura.is-visivel {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-hover) var(--ease-editorial),
    translate var(--duration-hover) var(--ease-editorial);
}
.sticky-captura__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.sticky-captura__texto {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  color: var(--paper);
}
.sticky-captura__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--duration-hover) var(--ease-editorial);
}
.sticky-captura__cta:hover { opacity: .78; }

/* motion reduzido: ela ainda pode aparecer, só não desliza (checklist:
   "não precisa esconder, só não anima o deslize") */
html.sem-motion .sticky-captura,
:root.sem-motion .sticky-captura {
  translate: 0 0;
  transition: opacity var(--duration-fast) linear, visibility 0s;
}
html.sem-motion .sticky-captura.is-visivel,
:root.sem-motion .sticky-captura.is-visivel {
  translate: 0 0;
  transition: opacity var(--duration-fast) linear;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-captura { translate: 0 0; transition: opacity var(--duration-fast) linear, visibility 0s; }
  .sticky-captura.is-visivel { translate: 0 0; transition: opacity var(--duration-fast) linear; }
}

/* esconde no mobile: o breakpoint de 809.98px é o divisor de águas do projeto */
@media (max-width: 809.98px) {
  .sticky-captura { display: none; }
}
/* iPad/tablet de toque passa de 810px e a barra continua nascendo — sem
   cursor ela só polui a tela (pedido do Fernando, 11/08). hover:none
   pega qualquer dispositivo sem ponteiro de verdade, largura nenhuma. */
@media (hover: none) {
  .sticky-captura { display: none; }
}

/* --------------------------------------------------------------------
   5 · Mobile — proposta de valor maior no primeiro viewport.
   Só neste breakpoint, só estes dois blocos do hero. Desktop intocado.
   -------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero__sub {
    font-size: var(--text-body);
    line-height: 1.35;
    font-weight: var(--weight-medium);
    color: var(--text-inverse);
  }
  .hero__lado--dir {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: var(--leading-title);
  }
}

/* --------------------------------------------------------------------
   6 · Nav — conserta o glitch da pílula "Entrar na lista".
   O mix-blend-mode: difference estava no PAI (.nav), então blenda o
   grupo inteiro contra o fundo — isolar só o filho não resolve (o blend
   do pai envolve a pílula do mesmo jeito, e sobre o tricô claro ela
   invertia pra azul quebrado). Correção: tira o blend do nav inteiro e
   reaplica SÓ no wordmark (texto fino inverte limpo, sem glitch); a
   pílula passa a adaptar por estado, não por blend. O toggle .is-escuro
   já existe e é dirigido por motion.js conforme a seção sob o nav. -----*/
.nav { mix-blend-mode: normal; }
.nav .wordmark { mix-blend-mode: difference; }

/* Pílula sobre CLARO (estado padrão): caixa ink, texto claro. */
.nav__wpp {
  mix-blend-mode: normal;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
}
/* Pílula sobre ESCURO (.nav.is-escuro): caixa clara, texto ink —
   é o visual do checklist §2, agora sólido em vez de blendado. */
.nav.is-escuro .nav__wpp {
  background: var(--paper);
  color: var(--ink);
}

/* --------------------------------------------------------------------
   7 · FAQ enxuto (#faq) — mesma família escura da .oferta. dl sempre
   aberta; a pergunta em display, a resposta em Inter apagado. Filete
   camelo separando cada par, uso canônico do acento (só régua).
   -------------------------------------------------------------------- */
.faq {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.faq__interno {
  max-width: var(--measure);
  padding-block: var(--space-16);
}
.faq__titulo {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-title);
  color: var(--paper);
}
.faq__lista { margin: 0; }
.faq__item { border-top: var(--hairline) solid #ffffff1f; }
.faq__item:last-child { border-bottom: var(--hairline) solid #ffffff1f; }
/* summary = a pergunta clicável. Tira o triângulo nativo e vira uma
   linha editorial com marcador +/− à direita. Fecha/abre nativo, sem JS. */
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  color: var(--paper);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-sans);
  color: var(--text-muted-inverse);
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--paper); }
.faq__a {
  margin: 0;
  padding-bottom: var(--space-6);
  max-width: 52ch;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted-inverse);
}

/* --------------------------------------------------------------------
   8 · Indicação pós-cadastro (#indicacao) — nasce escondida; a classe
   .is-ok que motion.js põe em .waitlist no sucesso é o que a revela.
   Some junto se o form não for enviado. Sobre superfície clara da
   .captacao, então texto ink/muted, não invertido.
   -------------------------------------------------------------------- */
.indicacao { display: none; margin-top: var(--space-8); text-align: center; }
.waitlist.is-ok .indicacao { display: block; }
.waitlist.is-ok .waitlist__beneficio { display: none; }
.indicacao__txt {
  margin: 0 auto var(--space-4);
  max-width: 40ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.indicacao__txt em { font-style: italic; color: var(--text); }
.indicacao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
/* WhatsApp: pílula sólida ink, mesmo peso do CTA primário. */
.indicacao__wpp {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-decoration: none;
  min-height: 44px;
  transition: opacity var(--duration-hover) var(--ease-editorial);
}
.indicacao__wpp:hover { opacity: .8; }
/* Copiar: secundário, texto sublinhado, degrau abaixo do primário. */
.indicacao__copiar {
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-caption);
  color: var(--text-muted);
  border-bottom: 1px solid var(--text-muted);
  min-height: 44px;
  transition: color var(--duration-fast) var(--ease-editorial);
}
.indicacao__copiar:hover { color: var(--text); }
.indicacao__copiar.is-copiado { color: var(--text); border-bottom-color: var(--text); }

/* Campo-armadilha da waitlist: some da tela sem usar display:none nem
   visibility:hidden, que alguns robôs checam justamente pra pular. */
.waitlist__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------
   Correções de celular (medidas em iPhone SE/13/Pixel 7)
   -------------------------------------------------------------------- */

/* O checkbox do consentimento é item de flex sem largura própria: estava
   esticando pra 192px e abrindo um vão entre ele e o texto. Quadrado
   fixo, sem encolher, mantendo os 44px de alvo de toque com o padding
   do próprio label. */
.waitlist__consentimento input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-block: 11px;   /* 22 + 11 + 11 = 44px de alvo */
}

/* Link do rodapé tinha 16px de altura de alvo: abaixo do mínimo de
   toque. Vira inline-block com respiro, sem mudar o desenho da linha. */
.rodape__privacidade a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}