/* ============================================================
   O SITE DO EMBARQUE — o saguão como página.
   Mundo herdado do CRM (DESIGN.md do produto): chão, placa preta
   que orienta, placa branca que lista com cabeçalho preto 13/600
   caixa alta, âmbar só como sinal, vinho só como texto, raio 3,
   nenhuma sombra, fonte do sistema. O que o site acrescenta é UM
   degrau de display (a placa de portão, que dentro do produto só
   o login tem) e o registro de marketing: mais respiro, placas
   maiores, o mesmo alfabeto.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- o chão e as superfícies (tokens do CRM) ---- */
  --chao: #EDECE8;
  --cartao: #FFFFFF;
  --afundado: #E7E6E1;
  --texto: #141414;
  --texto-apoio: #5C5C58;
  --texto-fraco: #63635F;
  --fio: #D9D8D2;
  --fio-forte: #C4C3BD;

  /* ---- a placa que orienta (igual nos dois temas: placa de
         saguão não muda de cor à noite) ---- */
  --placa: #141414;
  --placa-2: #242424;
  --placa-texto: #FFFFFF;
  --placa-texto-fraco: rgba(255, 255, 255, .72);
  --placa-fio: rgba(255, 255, 255, .14);
  --placa-tinta: rgba(255, 255, 255, .08);
  --placa-borda: #141414;

  /* ---- o sinal e as tintas de estado ---- */
  --sinal: #E3B83A;
  --sinal-fundo: #FBF3D9;
  --sinal-texto: #7A5B0B;
  --vinho: #A8323A;
  --ok-fundo: #E9F2EC;
  --ok-tinta: #235340;
  --alerta-na-placa: #F0B6B9;
  --ok-texto: #235340;

  /* ---- medidas ---- */
  --raio: 3px;
  --raio-bt: 3px;
  --medida: 1280px;
  --folga: clamp(20px, 4vw, 48px);
  --alt-toque: 44px;

  /* ---- a escala ---- */
  --fonte: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.1rem + 4vw, 4rem);
  --fs-titulo: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  --fs-lede: 1.125rem;
  --fs-corpo: 1rem;
  --fs-13: 0.8125rem;
  --fs-12: 0.75rem;
  --fs-11: 0.6875rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* O SAGUÃO À NOITE, como no produto: o chão escurece e a placa
       CONTINUA preta — o que muda é a aresta, que sai da própria cor
       do preenchimento e vira fio, senão placa e chão se colam. */
    --chao: #171614;
    --cartao: #1F1E1B;
    --afundado: #2A2825;
    --texto: #F0EEE9;
    --texto-apoio: #A8A59D;
    --texto-fraco: #918F89;
    --fio: #302E2A;
    --fio-forte: #3A3833;
    --placa-borda: #35332E;
    --sinal-fundo: #3A2F12;
    --sinal-texto: #F2D27A;
    --vinho: #F09595;
    --ok-fundo: rgba(46, 107, 79, .22);
    --ok-tinta: #A9CDBA;
    --ok-texto: #A9CDBA;
  }
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; background: var(--chao); color: var(--texto);
  font-family: var(--fonte); font-size: var(--fs-corpo); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--sinal); color: #141414; }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; border-radius: var(--raio-bt); }
.pular {
  position: absolute; left: -9999px; top: 0; background: var(--placa);
  color: var(--placa-texto); padding: 10px 16px; z-index: 99;
}
.pular:focus { left: 12px; top: 12px; }

.miolo { max-width: var(--medida); margin: 0 auto; padding-inline: var(--folga); }

/* ============================================================
   A NAV — placa preta fina, de borda a borda
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--placa); color: var(--placa-texto);
  border-bottom: 1px solid var(--placa-borda);
}
.nav .miolo {
  display: flex; align-items: center; gap: 22px; min-height: 60px;
}
.nav-marca { display: inline-flex; align-items: center; flex: none; }
.nav-marca img { height: 30px; width: auto; }
.nav-vai { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-vai a {
  color: var(--placa-texto-fraco); text-decoration: none;
  font-size: var(--fs-13); font-weight: 600; letter-spacing: .01em;
  padding: 10px 12px; border-radius: var(--raio-bt);
  border-bottom: 2px solid transparent;
}
.nav-vai a:hover { color: var(--placa-texto); background: var(--placa-tinta); }
.nav-vai a[aria-current="page"] {
  color: var(--placa-texto); border-bottom-color: var(--sinal); border-radius: 0;
}
/* O CTA precisa VENCER `.nav-vai a` (0,1,1) — foi exatamente aqui que o
   detector acusou "branco sobre branco" e eu quase suprimi por engano:
   com a especificidade menor, o texto herdava o branco dos links. */
.nav-vai a.nav-cta {
  margin-left: 10px; background: #FFFFFF; color: #141414;
  padding: 10px 16px; border-bottom: 0; flex: none;
}
.nav-vai a.nav-cta:hover { background: #EDECE8; color: #141414; }
/* A marca no cabecalho: a assinatura ORIGINAL, com o proprio retangulo
   cal — grafite sobre cal, como a folha de especificacao manda. Sobre a
   placa preta ela vira uma plaquinha, e e assim que fica legivel sem
   recolorir marca nenhuma. No celular ela nao cabe (o minimo da
   assinatura e 120px); entra o SIMBOLO oficial, tambem grafite sobre
   cal. */
.nav-marca img { border-radius: 0; }
.nav-marca .so-celular { display: none; }
@media (max-width: 640px) {
  .nav-vai a.some-no-celular { display: none; }
  .nav .miolo { gap: 8px; }
  .nav-marca .so-largo { display: none; }
  .nav-marca .so-celular { display: block; height: 34px; width: auto; }
  .nav-vai a { padding: 10px 8px; }
  .nav-vai a.nav-cta { padding: 10px 12px; margin-left: 4px; }
}

/* ============================================================
   BOTÕES — o vocabulário do produto
   ============================================================ */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--raio-bt);
  font: 600 var(--fs-corpo)/1.2 var(--fonte); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.bt-preto { background: var(--placa); color: var(--placa-texto); border-color: var(--placa-borda); }
.bt-preto:hover { background: var(--placa-2); }
.bt-preto .seta { color: var(--sinal); }
.bt-vazado { background: transparent; color: var(--texto); border-color: var(--texto); }
.bt-vazado:hover { background: var(--afundado); }
/* sobre a placa preta */
.bt-branco { background: #FFFFFF; color: #141414; }
.bt-branco:hover { background: #EDECE8; }
.bt-vazado-claro { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.bt-vazado-claro:hover { border-color: #FFFFFF; background: var(--placa-tinta); }
.seta { font-weight: 600; }

/* ============================================================
   AS PLACAS
   ============================================================ */
.placa {
  background: var(--cartao); border: 1px solid var(--fio);
  border-radius: var(--raio); overflow: hidden;
}
.placa-cab {
  display: flex; align-items: center; gap: 10px; min-height: 42px;
  padding: 10px 16px; background: var(--placa); color: var(--placa-texto);
  font-size: var(--fs-13); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; border-bottom: 1px solid var(--placa-borda);
}
.placa-cab small {
  margin-left: auto; color: var(--placa-texto-fraco);
  font-size: var(--fs-12); font-weight: 400; letter-spacing: normal;
  text-transform: none;
}
.placa-corpo { padding: 20px; }

/* a moldura de print: a placa segurando a tela de verdade */
.moldura img { border-radius: 0; }
.moldura .placa-corpo { padding: 0; }

/* o QUADRO placeholder — rotulado, sem fingir produto */
/* selos */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--raio-bt);
  border: 1px solid var(--fio-forte); color: var(--texto-apoio);
}
.selo-ambar { border-color: var(--sinal); color: var(--sinal-texto); background: var(--sinal-fundo); }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao { padding-block: clamp(56px, 9vw, 104px); }
.secao-apertada { padding-block: clamp(40px, 6vw, 64px); }
.chapeu {
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sinal-texto); margin: 0 0 14px;
}
.chapeu::before {
  content: ''; display: inline-block; width: 22px; height: 3px;
  background: var(--sinal); margin-right: 10px; vertical-align: middle;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; }
.titulo { font-size: var(--fs-titulo); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.lede { font-size: var(--fs-lede); line-height: 1.65; color: var(--texto-apoio); max-width: 64ch; }
.prosa { max-width: 66ch; color: var(--texto-apoio); }
.prosa b, .prosa strong { color: var(--texto); }

/* a linha de confiança sob os CTAs */
.confianca { font-size: var(--fs-13); color: var(--texto-fraco); }
.confianca b { color: var(--texto); font-weight: 600; }

/* ============================================================
   O HERO — a placa preta de borda a borda, com a INTEGRAÇÃO ao vivo
   (13/09, refeito a pedido do fundador: sem margem gigante, título
   dele, e a conversa ANIMADA como no hero do malagamidia.com.br —
   só que aqui a conversa dirige a ficha do CRM ao lado, que é o que
   nenhum concorrente tem para mostrar).
   ============================================================ */
.hero {
  background: var(--placa); color: var(--placa-texto);
  border-bottom: 1px solid var(--placa-borda);
  overflow: clip;
}
.hero-grade {
  display: grid; gap: clamp(32px, 5vw, 72px); align-items: center;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  padding-block: clamp(48px, 6.5vw, 84px) clamp(44px, 6vw, 76px);
}
.hero h1 { color: var(--placa-texto); max-width: 21ch; }
.hero .lede { color: var(--placa-texto-fraco); max-width: 46ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 18px; }
.hero .confianca { color: var(--placa-texto-fraco); }
.hero .confianca b { color: var(--placa-texto); }
/* sobre a placa, o chapeu fala o ambar VIVO — o de texto e para o chao */
.hero .chapeu { color: var(--sinal); }
@media (max-width: 1023px) {
  .hero-grade { grid-template-columns: 1fr; }
  .hero h1, .hero .lede { max-width: none; }
}

/* ---- o palco da demonstração: o celular e a ficha ---- */
.demo-par {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2vw, 28px); perspective: 1300px;
}
.fone {
  flex: none; width: min(300px, 78vw, 40dvh);
  padding: 10px; border-radius: 52px; cursor: pointer;
  background: linear-gradient(152deg, #FDFDFE 0%, #E6E6EC 40%, #FAFAFC 57%, #D6D6DE 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .5s ease;
}
.fone-tela {
  position: relative; border: 3px solid #080C0F; border-radius: 43px; overflow: hidden;
  background: #EFE7DE; display: flex; flex-direction: column;
  aspect-ratio: 9 / 18.2; color: #111B21;
  font-size: 13.5px; line-height: 1.45;
}
.fone-ilha {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 23px; border-radius: 99px; background: #080C0F; z-index: 6;
}
.wa-cab {
  display: flex; align-items: center; gap: 10px; padding: 40px 14px 10px;
  background: #F6F6F6; border-bottom: 1px solid rgba(17, 27, 33, .1);
}
.wa-ava {
  width: 34px; height: 34px; border-radius: 99px; background: #141414; color: #E3B83A;
  display: grid; place-items: center; font-weight: 600; font-size: 14px;
}
.wa-nome { font-size: 14px; font-weight: 600; line-height: 1.2; }
.wa-estado { font-size: 11.5px; color: #667781; }
/* a conversa: o WhatsApp claro, que é a tela que todo mundo já sabe ler */
.chat {
  flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  background-image: radial-gradient(rgba(17, 27, 33, .05) 1.1px, transparent 1.1px);
  background-size: 19px 19px;
}
.chat::-webkit-scrollbar { display: none; }
.msg {
  max-width: 84%; padding: 7px 10px 5px; border-radius: 9px;
  box-shadow: 0 1px .6px rgba(11, 20, 26, .14);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .45s ease, transform .45s ease;
}
.msg.show { opacity: 1; transform: none; }
.msg .t { display: block; font-size: 10.5px; color: #667781; text-align: right; margin-top: 2px; }
.msg.in { background: #FFFFFF; align-self: flex-start; border-top-left-radius: 2px; }
.msg.out { background: #D9FDD3; align-self: flex-end; border-top-right-radius: 2px; }
.msg.out .t b { color: #53BDEB; font-weight: 600; letter-spacing: -.5px; }
/* o aviso do meio: o CRM agindo — âmbar, porque é SINAL */
.card-msg {
  align-self: center; background: #FBF3D9; border: 1px solid rgba(122, 91, 11, .25);
  color: #7A5B0B; font-size: 11.5px; font-weight: 600; text-align: center;
  padding: 5px 10px; border-radius: 7px; max-width: 92%;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.card-msg.show { opacity: 1; transform: none; }
.typing {
  align-self: flex-end; background: #D9FDD3; border-radius: 9px; border-top-right-radius: 2px;
  padding: 9px 12px; display: none; gap: 4px;
}
.typing.show { display: flex; }
.typing i { width: 6px; height: 6px; border-radius: 99px; background: #8CA093; animation: tp 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }

/* A FICHA QUE SE PREENCHE SOZINHA: a placa branca do CRM ao lado do
   celular. É a integração à vista — a conversa de um lado, o sistema
   anotando do outro. */
.ficha {
  flex: none; width: min(280px, 84vw); background: var(--cartao);
  border: 1px solid var(--fio); border-radius: var(--raio); overflow: hidden;
  align-self: center;
}
.ficha-linhas { padding: 6px 16px 14px; }
.ficha-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--fio);
  font-size: var(--fs-13);
}
.ficha-linha:last-child { border-bottom: 0; }
.ficha-linha .r {
  color: var(--texto-fraco); font-size: var(--fs-11); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; flex: none;
}
.ficha-linha .v { color: var(--texto); font-weight: 600; text-align: right; }
.ficha-linha .v.vago { color: var(--texto-fraco); font-weight: 400; }
.ficha-linha .v .selo { vertical-align: 1px; }
/* o campo que acabou de mudar acende em sinal, e apaga sozinho */
.ficha-linha.mudou .v { animation: acender 1.6s ease; border-radius: var(--raio-bt); }
@keyframes acender { 0% { background: var(--sinal-fundo); box-shadow: 0 0 0 4px var(--sinal-fundo); } 100% { background: transparent; box-shadow: none; } }
.ficha-pe {
  padding: 10px 16px; border-top: 1px solid var(--fio);
  font-size: var(--fs-11); color: var(--texto-fraco);
}
@media (max-width: 1023px) {
  .demo-par { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .card-msg { opacity: 1; transform: none; }
}

/* a linha de posicionamento (o h2 com o termo, do seo-site-embarque.md) */
.linha-posicao {
  background: var(--cartao); border-block: 1px solid var(--fio);
}
.linha-posicao .miolo {
  display: flex; align-items: center; gap: 12px;
  padding-block: 14px; flex-wrap: wrap;
}
.linha-posicao h2 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em;
}
.linha-posicao .anti-generico {
  margin: 0 0 0 auto; font-size: var(--fs-13); color: var(--texto-apoio);
}
.linha-posicao .anti-generico b { color: var(--texto); }
@media (max-width: 900px) { .linha-posicao .anti-generico { margin-left: 34px; } }
.linha-posicao .tick { width: 22px; height: 3px; background: var(--sinal); flex: none; }

/* ============================================================
   AS BANDAS PRETAS (§2 e §12): a placa que orienta, de borda a borda
   ============================================================ */
.banda {
  background: var(--placa); color: var(--placa-texto);
  border-block: 1px solid var(--placa-borda);
}
.banda .lede, .banda .prosa { color: var(--placa-texto-fraco); }
.banda .prosa b { color: var(--placa-texto); }
.banda .chapeu { color: var(--sinal); }
.banda .confianca { color: var(--placa-texto-fraco); }
.banda .confianca b { color: var(--placa-texto); }

/* AS QUATRO PERDAS COMO PERGUNTAS (13/09, fundador: o painel com N/X
   saiu — letra no lugar de numero lia como molde por preencher). A
   pergunta direta doi mais que a tabela, e nao finge dado nenhum. */
/* O PRECO LOGO ABAIXO DA DOR: a placa preta com a saida na mao. */
.cta-preco {
  margin-top: 34px; background: var(--placa); color: var(--placa-texto);
  border: 1px solid var(--placa-borda); border-radius: var(--raio);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 22px 26px;
}
.cta-preco-cifra {
  margin: 0; font-size: 2.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.cta-preco-cifra small { font-size: 1rem; font-weight: 400; color: var(--placa-texto-fraco); }
.cta-preco-diz { font-size: var(--fs-corpo); font-weight: 400; color: var(--placa-texto-fraco); }
.cta-preco-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   §3 — O SPLIT DA INTEGRAÇÃO
   ============================================================ */
.provas {
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}
@media (max-width: 720px) { .provas { grid-template-columns: 1fr; } }
.prova .placa-corpo { padding: 16px; color: var(--texto-apoio); font-size: var(--fs-corpo); }
.fecho-frase {
  margin: 28px 0 0; font-size: 1.125rem; font-weight: 600; max-width: 46ch;
}
.fecho-frase .risco { box-shadow: inset 0 -6px 0 var(--sinal-fundo); }

/* ============================================================
   §4 — humanizada: texto + o fio da conversa
   ============================================================ */
.par {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .par { grid-template-columns: 1fr; } }
.apoios { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.apoios li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--texto-apoio); }
.apoios b { color: var(--texto); }
.apoios .ico { color: var(--sinal-texto); width: 18px; height: 18px; margin-top: 3px; }
.print-alto { max-width: 460px; margin-inline: auto; }

/* ============================================================
   §5 — o que ela faz
   ============================================================ */
.faz {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 14px 32px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px) { .faz { grid-template-columns: 1fr; } }
.faz li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--fio);
  color: var(--texto-apoio);
}
.faz b { color: var(--texto); }
.faz .ico { width: 20px; height: 20px; color: var(--sinal-texto); margin-top: 2px; }
.dupla {
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 36px; align-items: start;
}
@media (max-width: 900px) { .dupla { grid-template-columns: 1fr; } }

/* ============================================================
   §6 — a base (lista da placa) e §9 — garantias
   ============================================================ */
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--fio);
  color: var(--texto-apoio); font-size: var(--fs-corpo);
}
.linhas li:last-child { border-bottom: 0; }
.linhas b { color: var(--texto); }
.linhas .ico { width: 18px; height: 18px; color: var(--ok-texto); margin-top: 3px; }

.garantias {
  display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) { .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .garantias { grid-template-columns: 1fr; } }
.garantia { border-top: 3px solid var(--sinal); padding-top: 14px; }
.garantia b { display: block; margin-bottom: 6px; }
.garantia p { margin: 0; color: var(--texto-apoio); font-size: var(--fs-13); }

/* ============================================================
   §8 — os dois planos, em resumo
   ============================================================ */
.planos-resumo {
  display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 36px; align-items: stretch;
}
@media (max-width: 820px) { .planos-resumo { grid-template-columns: 1fr; } }
.plano-corpo { padding: 22px; display: grid; gap: 10px; align-content: start; }
.plano-preco { font-size: 2rem; font-weight: 600; letter-spacing: -.01em; }
.plano-preco small { font-size: var(--fs-13); font-weight: 400; color: var(--texto-fraco); }
.plano-diz { color: var(--texto-apoio); margin: 0; }
.plano-pe { padding: 0 22px 22px; }

/* ============================================================
   FAQ — perguntas que abrem, como linhas de placa
   ============================================================ */
.faq { display: grid; gap: 0; }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-height: var(--alt-toque); padding: 16px 4px; font-weight: 600;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .abre {
  margin-left: auto; flex: none; width: 22px; height: 22px;
  color: var(--texto-fraco); transition: transform .18s ease;
}
.faq details[open] summary .abre { transform: rotate(45deg); color: var(--sinal-texto); }
.faq details p { margin: 0 0 18px; color: var(--texto-apoio); max-width: 68ch; padding-inline: 4px; }

/* ============================================================
   O CTA FINAL e o rodapé
   ============================================================ */
.cta-final { text-align: center; }
.cta-final .display { max-width: 24ch; margin-inline: auto; }
.cta-final .lede { margin: 18px auto 0; }
.cta-final .hero-acoes { justify-content: center; }

.rodape { border-top: 1px solid var(--fio); }
.rodape .miolo {
  padding-block: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.rodape p { margin: 0; color: var(--texto-fraco); font-size: var(--fs-13); }
.rodape .marca-pe { display: inline-flex; }
.rodape .marca-pe img { height: 34px; width: auto; }
/* o simbolo do rodape na tinta do tema: grafite de dia, cal a noite */
.rodape .pe-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  .rodape .pe-claro { display: none; }
  .rodape .pe-escuro { display: block; }
}

/* O BALAO DO WHATSAPP que desce com a pagina — o verde oficial, o
   glifo real, e o unico elemento fixo alem da nav. */
.balao-whats {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60; width: 56px; height: 56px; border-radius: 999px;
  background: #25D366; color: #FFFFFF;
  display: grid; place-items: center;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: transform .18s ease;
}
.balao-whats svg { width: 30px; height: 30px; display: block; }
.balao-whats:hover { transform: translateY(-2px); }
.balao-whats:focus-visible { outline: 3px solid var(--sinal); outline-offset: 3px; }
@media (max-width: 640px) { .balao-whats { right: 14px; width: 52px; height: 52px; } }
.rodape nav { margin-left: auto; display: flex; gap: 18px; }
.rodape nav a { color: var(--texto-apoio); font-size: var(--fs-13); text-decoration: none; }
.rodape nav a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   A PÁGINA DE PLANOS — dois cartões, o preço em cima e TODAS as
   features embaixo (13/09, pedido do fundador; a matriz comparativa
   saiu — cartão de preço é o formato que a dona da agência já lê).
   ============================================================ */
.planos-grade {
  display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 880px) { .planos-grade { grid-template-columns: 1fr; } }
.plano { display: flex; flex-direction: column; }
.plano-topo { padding: 24px 24px 20px; border-bottom: 1px solid var(--fio); }
.plano-topo .para-quem { margin: 6px 0 0; color: var(--texto-apoio); }
.plano-cifra-grande { font-size: 2.75rem; font-weight: 600; letter-spacing: -.015em; line-height: 1; }
.plano-cifra-grande small { font-size: 1rem; font-weight: 400; color: var(--texto-fraco); letter-spacing: 0; }
.plano .linhas { flex: 1; }
.plano .linhas li { padding-inline: 24px; }
.plano .linhas .herda { color: var(--texto); font-weight: 600; }
.plano-acao { padding: 20px 24px 24px; border-top: 1px solid var(--fio); }
.plano-acao .bt { width: 100%; }
.plano.destaque { border-color: var(--sinal); box-shadow: inset 0 3px 0 var(--sinal); }

/* ---- OS ARGUMENTOS (13/09, fundador: "refaça os argumentos, estão
   fracos... faça cores, ícones, deixe mais apresentável"). Cada linha
   é um argumento de venda com a pastilha do assunto; a cor obedece ao
   mundo — âmbar só no que é da IA (sinal), o verde-confiança no selo
   de teste, e as cores de MARCA só nos chips dos canais, que é a
   mesma exceção consciente que o CRM já registra. ---- */
.feats { list-style: none; margin: 0; padding: 0; flex: 1; }
.feats li {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--fio); align-items: start;
}
.feats li:last-child { border-bottom: 0; }
.tile {
  width: 38px; height: 38px; border-radius: var(--raio-bt);
  display: grid; place-items: center;
  background: var(--afundado); color: var(--texto);
}
.tile svg { width: 20px; height: 20px; }
.tile.ia { background: var(--sinal-fundo); color: var(--sinal-texto); }
.tile.num { font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.feats b { display: block; font-size: var(--fs-corpo); line-height: 1.35; }
.feats .diz { color: var(--texto-apoio); font-size: var(--fs-13); line-height: 1.55; margin: 2px 0 0; }
.feats .herda-linha {
  grid-template-columns: 1fr; padding: 11px 22px;
  background: var(--afundado); font-size: var(--fs-13); font-weight: 600;
}
.feats .herda-linha::before {
  content: ''; display: inline-block; width: 18px; height: 3px;
  background: var(--sinal); margin-right: 10px; vertical-align: middle;
}
/* os chips dos canais: as cores de marca, um degrau abaixo pelo
   contraste — o mesmo ajuste que o CRM fez no verde oficial */
.canais { display: inline-flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
/* AS MARCAS DOS CANAIS NAS CORES REAIS (13/09, fundador): o mesmo
   desenho da caixa de entrada do CRM — pastilha na cor oficial com o
   glifo branco, e o NOME ao lado em tinta da pagina, que e o que
   mantem a leitura. */
.canal {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-12); font-weight: 600; color: var(--texto-apoio);
}
.canal .m {
  width: 20px; height: 20px; border-radius: var(--raio-bt);
  display: grid; place-items: center; color: #FFFFFF; flex: none;
}
.canal .m svg { width: 12px; height: 12px; display: block; }
.canal .m.wa { background: #25D366; }
.canal .m.ig { background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%); }
.canal .m.em { background: #EA4335; }
.tile-claude { background: var(--afundado); }
.tile-claude img { width: 20px; height: 20px; display: block; }
/* o selo da promessa boa, junto do preço */
.selo-verde { border-color: transparent; background: var(--ok-fundo); color: var(--ok-tinta); }
.plano-topo .plano-cifra-grande { margin: 0; }
.plano-topo .selo { margin-top: 12px; }
.plano-topo .selos-topo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.faixa-confianca {
  background: var(--cartao); border-block: 1px solid var(--fio);
  text-align: center;
}
.faixa-confianca .miolo { padding-block: 18px; }
.faixa-confianca p { margin: 0; color: var(--texto-apoio); font-size: var(--fs-corpo); }

/* utilidades */
.centro { text-align: center; }
.sube { margin-top: 28px; }
.sube-pequeno { margin-top: 16px; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}