/* =========================================================================
   PERSEVERE LEADS — site institucional de alta conversão
   Identidade travada (SPEC §3): laranja #f97316 é ACENTO, preto, branco,
   cinza #f3f4f6 alternado, borda #e5e7eb, apoio #3f3f46. Poppins única.
   Sem build, sem framework, sem CDN de biblioteca. Abre por duplo clique.
   Mobile é o caso principal: tudo foi dimensionado em 390x664 primeiro.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --brand:      #f97316;   /* acento: fundo de botão, traço, ícone, faixa de CTA */
  --brand-600:  #ea6a0c;   /* hover de botão */
  --brand-700:  #c2540b;   /* texto laranja pequeno sobre fundo claro (AA 4,6:1) */
  --brand-soft: #fff1e6;
  --black:      #000000;
  --ink:        #111111;
  --ink-2:      #3f3f46;   /* texto de apoio */
  --white:      #ffffff;
  --gray-100:   #f3f4f6;   /* fundo de seção alternada */
  --gray-200:   #e5e7eb;   /* borda de card */
  --gray-500:   #6b7280;
  --dark:       #0a0a0a;

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw:   1180px;
  --pad:    20px;
  --sy:     clamp(56px, 7.2vw, 100px);   /* respiro vertical de seção */
  --r:      12px;
  --r-lg:   20px;
  --shadow:    0 1px 2px rgba(17,17,17,.04), 0 6px 18px rgba(17,17,17,.06);
  --shadow-lg: 0 2px 6px rgba(17,17,17,.05), 0 18px 44px rgba(17,17,17,.11);
  --ease:   cubic-bezier(.23,1,.32,1);

  /* faixa reservada ao botão flutuante de WhatsApp (56px + folga) */
  --zona-whats: 88px;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0; list-style:none}  /* os 4 passos têm selo próprio 01..04 */
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
svg{display:block}
img{max-width:100%; display:block}

/* superfícies do navegador — parte do desenho, não default de fábrica */
::selection{background:var(--brand); color:#1c0d02}   /* 6,76:1 — #fff dava 2,80:1 */
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
html{scrollbar-color:var(--brand) var(--gray-100)}
input,textarea{caret-color:var(--brand)}

/* ------------------------------------------------------------- estrutura */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sy); scroll-margin-top:24px}
.section--gray{background:var(--gray-100)}
.section--dark{background:var(--black); color:#e4e4e7}

/* cabeçalho de seção: mais espaço acima do título do que abaixo */
.head{max-width:56ch; margin-bottom:clamp(32px,4vw,52px)}
.head--center{margin-inline:auto; text-align:center}
.head p{margin-top:14px; color:var(--ink-2); font-size:clamp(15px,1.6vw,18px); font-weight:300; line-height:1.55}
.section--dark .head p{color:#a1a1aa}

.h1{font-size:clamp(29px,6.2vw,62px); font-weight:800; line-height:1.08;
    letter-spacing:-.025em; text-transform:uppercase; text-wrap:balance}
.h2{font-size:clamp(24px,3.4vw,40px); font-weight:700; line-height:1.16;
    letter-spacing:-.02em; text-wrap:balance}
.h3{font-size:clamp(18px,2vw,22px); font-weight:700; line-height:1.3; letter-spacing:-.01em}
.rotulo{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-700)}
.fecho{margin-top:clamp(28px,3.4vw,44px); font-size:clamp(16px,1.9vw,20px);
       font-weight:600; line-height:1.45; max-width:60ch; letter-spacing:-.01em}
.fecho--apoio{font-weight:400; color:var(--ink-2); font-size:clamp(15px,1.7vw,17px)}
.regra{width:44px; height:3px; background:var(--brand); border-radius:2px; margin-bottom:22px}

/* placeholder — nunca publica assim; marcado para ninguém subir por engano */
.ph{
  display:inline; font-weight:600; font-style:normal; color:#9a4a09;
  background:repeating-linear-gradient(45deg,#fff6ee,#fff6ee 6px,#ffe6d0 6px,#ffe6d0 12px);
  border:1px dashed #f19a52; border-radius:5px; padding:1px 6px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ---------------------------------------------------------------- botões */
/* Rótulo em quase-preto, não em branco: #fff sobre #f97316 mede 2,80:1 e
   sobre o hover #ea6a0c mede 3,20:1 — reprova AA nos dois estados. O mesmo
   #1c0d02 já usado na faixa de CTA dá 6,76:1 (normal) e 5,93:1 (hover)
   sem tocar no laranja da marca, que é travado pela SPEC §3.
   Vale para as 11 instâncias de .btn: a correção é da CLASSE.            */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--brand); color:#1c0d02; border-radius:10px;
  font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:16px 26px; line-height:1; text-align:center;
  transition:background .18s ease, transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{background:var(--brand-600); color:#1c0d02; transform:translateY(-2px); box-shadow:0 10px 24px rgba(249,115,22,.32)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:16px; height:16px; flex:none}
.btn--block{width:100%}
.btn--branco{background:#fff; color:var(--brand-700)}
.btn--branco:hover{background:var(--black); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

/* ------------------------------------------------------- movimento (JS) */
/* Estado padrão = estado final. Sem JS a página fica correta.             */
html.js-rv .rv{opacity:0; transform:translateY(20px)}
html.js-rv .rv.vis{opacity:1; transform:none;
  transition:opacity .62s var(--ease), transform .62s var(--ease)}
/* espinha dos 4 passos: o único movimento que carrega argumento.
   O gatilho é o .passos-wrap, e não a própria espinha, porque ela é
   display:none acima de 900px e nunca dispararia o observador ali. */
html.js-rv .passos-spine{transform:scaleY(0)}
html.js-rv .passos-wrap.vis .passos-spine{transform:scaleY(1); transition:transform .9s var(--ease)}
html.js-rv .passo{opacity:0; transform:translateY(18px)}
html.js-rv .passos-wrap.vis .passo{opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
html.js-rv .passos-wrap.vis .passo:nth-child(1){transition-delay:.06s}
html.js-rv .passos-wrap.vis .passo:nth-child(2){transition-delay:.28s}
html.js-rv .passos-wrap.vis .passo:nth-child(3){transition-delay:.50s}
html.js-rv .passos-wrap.vis .passo:nth-child(4){transition-delay:.72s}
/* emblema do funil: as seis entradas acendem, o destino fecha */
html.js-rv .funil-anim .porta{opacity:0}
html.js-rv .funil-anim.vis .porta{opacity:1; transition:opacity .45s ease}
html.js-rv .funil-anim.vis .porta:nth-of-type(1){transition-delay:.05s}
html.js-rv .funil-anim.vis .porta:nth-of-type(2){transition-delay:.13s}
html.js-rv .funil-anim.vis .porta:nth-of-type(3){transition-delay:.21s}
html.js-rv .funil-anim.vis .porta:nth-of-type(4){transition-delay:.29s}
html.js-rv .funil-anim.vis .porta:nth-of-type(5){transition-delay:.37s}
html.js-rv .funil-anim.vis .porta:nth-of-type(6){transition-delay:.45s}
html.js-rv .funil-anim .destino{opacity:0}
html.js-rv .funil-anim.vis .destino{opacity:1; transition:opacity .45s ease .56s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js-rv .rv,
  html.js-rv .passo,
  html.js-rv .funil-anim .porta,
  html.js-rv .funil-anim .destino{opacity:1; transform:none; transition:none}
  html.js-rv .passos-spine,
  html.js-rv .passos-wrap.vis .passos-spine{transform:scaleY(1); transition:none}
  .btn,.card,.cena,.modulo,.plano{transition:none}
}

/* --------------------------------------------------------------- header */
.site-header{position:absolute; inset:0 0 auto; z-index:60; padding-block:18px}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px}
/* O símbolo vem antes do wordmark. Usado como está, só escalando: a versão
   negativa (traço branco + gota laranja) é a de fundo escuro — a oficial em
   azul #2F4D75 mede 2,30:1 sobre o --dark e sumiria. */
.logo{display:flex; align-items:center; gap:10px; color:#fff; line-height:1}
.logo img{height:30px; width:auto; flex:none}
.logo b{display:block; font-size:17px; font-weight:800; letter-spacing:.03em}
.logo b i{font-style:normal; color:var(--brand)}
/* 10px, não 8px: é a única linha da dobra que diz o que o produto é, e 8px
   era o menor corpo da página. O letter-spacing caiu de .24em para .18em
   para o descritor não ficar mais largo que PERSEVERE-LEADS acima dele. */
.logo small{display:block; margin-top:4px; font-size:10px; font-weight:500;
            letter-spacing:.18em; text-transform:uppercase; color:#a1a1aa}
/* gap 18, não 26: com o símbolo no logo o header passou a exigir 972px numa
   linha. O gap é multiplicado por 5 (são 5 vãos), então cada pixel aqui vale
   5 — é a alavanca mais barata antes de empurrar o breakpoint. */
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.nav a{font-size:14px; font-weight:500; color:#e4e4e7; padding-block:4px;
       border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease}
.nav a:hover{color:var(--brand); border-color:var(--brand)}
.nav .btn{margin-left:6px; padding:12px 16px; font-size:12px}
.nav-toggle{display:none}

/* ----------------------------------------------------------------- hero */
.hero{position:relative; background:var(--dark); color:#fff; overflow:hidden}
.hero::before{ /* textura de hairlines — sem imagem, sem peso */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(249,115,22,.16) 0%, rgba(249,115,22,0) 58%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
}
.hero .container{position:relative; z-index:2; padding-block:96px 56px}
.hero-copy{max-width:660px}
.hero h1{margin-bottom:16px}
.hero .sub{  /* itálico bold — assinatura da marca (SPEC §3, item 6) */
  font-size:clamp(17px,2.3vw,25px); font-weight:700; font-style:italic;
  color:var(--brand); line-height:1.25; margin-bottom:16px; padding-bottom:2px;
}
.hero .desc{font-size:clamp(15px,1.75vw,19px); font-weight:300; color:#d4d4d8;
            max-width:46ch; line-height:1.6; margin-bottom:28px}
.hero .apoio{margin-top:14px; font-size:14px; color:#a1a1aa}

/* --------------------------------------------- a tela do produto no hero */
/* ESPECIFICIDADE, medida e não suposta: figure.tela{margin:0} mora ~200
   linhas abaixo, no bloco das telas do produto. Escrito aqui como
   figure.hero-tela (0,1,1) o margin empata e PERDE pela ordem — foi o que
   aconteceu na primeira versão, e a janela ficou sem sangrar no celular
   enquanto sangrava no desktop (onde a regra vem de um @media no fim do
   arquivo). .hero figure.hero-tela (0,2,1) vence onde quer que a outra
   esteja. O verificador passou a medir a borda direita da janela contra a
   do container justamente porque este defeito não aparece em screenshot.
   A janela encosta na borda direita da tela de propósito: no celular isso
   devolve 20px de largura ao recorte e diz que o sistema continua fora do
   quadro. O teto de 440px segura a ampliação entre 460px e 1279px de
   viewport, onde o container cresce mais rápido que a janela precisa. */
.hero figure.hero-tela{
  margin:30px calc(-1 * var(--pad)) 0 0;
  --fw:1200; --jw:377; --jh:257; --x0:477; --y0:339;
}
figure.hero-tela .tela-janela{
  max-width:440px; margin-left:auto;
  background:#0f0f10; border-color:rgba(255,255,255,.16);
  border-radius:var(--r) 0 0 var(--r);
  box-shadow:0 26px 64px rgba(0,0,0,.55);
}
figure.hero-tela figcaption{
  margin-top:12px; padding-right:var(--pad); max-width:none; text-align:right;
  font-size:12px; font-weight:400; color:#a1a1aa; line-height:1.5;
}

/* ------------------------------------------ faixa de contexto (assinatura) */
.contexto .container{display:grid; gap:clamp(28px,3.6vw,52px); align-items:center}
.portas{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.porta-chip{
  border:1px solid var(--gray-200); background:var(--white); border-radius:99px;
  padding:9px 16px; font-size:14px; font-weight:600; color:var(--ink);
  max-width:100%; overflow-wrap:break-word;
}
.funil-arte{justify-self:center; width:min(100%,260px)}
.funil-arte svg{width:100%; height:auto}

/* ------------------------------------------------- o problema (6 cenas) */
/* A malha de fios de 1px é o desenho da seção: as células não são cards
   soltos, são uma tabela de diagnóstico. A prova de cada cena entra DENTRO
   da célula, depois do texto — a dor primeiro, a resposta embaixo. */
.ponte{margin:-14px 0 clamp(24px,3vw,34px); font-size:clamp(15px,1.7vw,17px);
       font-weight:500; color:var(--ink-2); max-width:56ch}
.cenas{display:grid; gap:1px; background:var(--gray-200);
       border-block:1px solid var(--gray-200); border-radius:2px; overflow:hidden}
.cena{background:var(--gray-100); padding:26px 22px 28px;
      display:flex; flex-direction:column}
.cena h3{font-size:16px; font-weight:700; line-height:1.35; letter-spacing:-.01em; margin-bottom:10px}
.cena p{font-size:14px; color:var(--ink-2); line-height:1.6}
.cena i{display:block; width:26px; height:3px; border-radius:2px;
        background:var(--brand); margin-bottom:16px}
/* margin-top:auto encosta a prova na base da célula: como as células de uma
   linha do grid têm a mesma altura, as janelas ficam alinhadas entre si
   mesmo com textos de tamanhos diferentes. */
.cena .prova{margin:auto 0 0; padding-top:20px}
.cena .prova .tela-janela{border-radius:10px}
.cena .prova figcaption{margin-top:11px; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.cena .prova figcaption b{display:block; color:var(--ink); font-weight:600; font-size:13px; margin-bottom:2px}
.demo-nota{margin-top:18px}

/* ------------------------------------------------- 4 passos (a espinha) */
.passos-wrap{position:relative}
.passos{position:relative; display:grid; gap:0}
.passos-spine{position:absolute; left:15px; top:10px; bottom:10px; width:2px;
              background:var(--brand); border-radius:2px; transform-origin:top center}
.passo{position:relative; padding:0 0 34px 52px}
.passo:last-child{padding-bottom:0}
.passo b{position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
         background:var(--white); border:2px solid var(--brand); color:var(--brand-700);
         font-size:12px; font-weight:800; display:grid; place-items:center; z-index:2}
.passo h3{margin-bottom:8px; font-size:17px}
.passo p{font-size:14px; color:var(--ink-2); line-height:1.6; max-width:56ch}

/* ---------------------------------------------------- módulos (14 cards) */
.modulos{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr))}
.modulo{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px 16px 20px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
}
.modulo:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#f5c9a4}
.modulo h3{font-size:14px; font-weight:600; color:var(--brand-700); margin-bottom:8px; letter-spacing:0}
.modulo p{font-size:12.5px; color:var(--ink-2); line-height:1.55}

/* ---------------------------------------------------------- lead 360°  */
.l360{display:grid; gap:clamp(32px,4vw,56px); align-items:start}
.l360-texto p{color:var(--ink-2); font-size:clamp(15px,1.6vw,17px); line-height:1.68; margin-bottom:16px}
.painel{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.painel-topo{background:var(--black); color:#fff; padding:16px 20px;
             font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.painel-topo span{color:var(--brand)}
.painel ul{position:relative; padding:22px 20px 24px 20px}
.painel ul::before{content:""; position:absolute; left:26px; top:34px; bottom:34px;
                   width:2px; background:var(--brand); opacity:.28; border-radius:2px}
.painel li{position:relative; padding:0 0 18px 34px}
.painel li:last-child{padding-bottom:0}
.painel li::before{content:""; position:absolute; left:9px; top:6px; width:9px; height:9px;
                   border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px #fff}
.painel b{display:block; font-size:14px; font-weight:600; color:var(--brand-700)}
.painel span{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.5}

/* --------------------------------------------------- gestão (4 perguntas) */
.gestao{display:grid; gap:0; border-top:1px solid var(--gray-200)}
.gestao > div{padding:24px 0 26px; border-bottom:1px solid var(--gray-200)}
/* piso de 19px: #c2540b sobre o cinza f3f4f6 dá 4,18:1, que só passa em AA
   como texto grande (>=18,66px em peso 700). Abaixo disso reprovaria. */
.gestao h3{font-size:clamp(19px,2vw,21px); margin-bottom:8px; letter-spacing:-.015em}
.gestao h3 em{font-style:normal; color:var(--brand-700)}
.gestao p{font-size:14.5px; color:var(--ink-2); line-height:1.62; max-width:52ch}

/* ------------------------------------------------------ LGPD e segurança */
.pergunta{
  margin:-8px 0 clamp(30px,4vw,46px);
  font-size:clamp(18px,2.5vw,27px); font-weight:600; line-height:1.36;
  letter-spacing:-.02em; max-width:42ch; text-wrap:balance;
}
.pergunta em{font-style:normal; color:var(--brand-700)}
.lgpd{display:grid; gap:16px}
.lgpd li{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start}
.lgpd svg{width:20px; height:20px; margin-top:3px; color:var(--brand)}
.lgpd b{display:block; font-size:15px; font-weight:600; margin-bottom:3px}
.lgpd span{font-size:14px; color:var(--ink-2); line-height:1.58}
.acesso{margin-top:clamp(34px,4vw,52px); padding-top:28px; border-top:1px solid var(--gray-200)}
.acesso h3{margin-bottom:18px; font-size:17px}
.acesso ul{display:grid; gap:14px}
.acesso li{padding-left:16px; border-left:1px solid var(--gray-200)}
.acesso b{display:block; font-size:14.5px; font-weight:600}
.acesso span{font-size:13.5px; color:var(--ink-2); line-height:1.55}

/* -------------------------------------------- métricas / depoimentos (opc.) */
.metricas{display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); text-align:center}
.metrica b{display:block; font-size:clamp(26px,4vw,42px); font-weight:800; line-height:1.1}
.metrica span{display:block; margin-top:8px; font-size:13px; color:var(--ink-2); line-height:1.45}
.depos{display:grid; gap:16px}
.depo{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r);
      box-shadow:var(--shadow); padding:24px 22px}
.depo p{font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-bottom:16px}
.depo b{display:block; font-size:14px}
.depo span{font-size:12.5px; color:var(--gray-500)}

/* ---------------------------------------------------------------- planos */
.planos{display:grid; gap:18px; align-items:stretch}
.plano{
  position:relative; background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:28px 24px 26px;
  display:flex; flex-direction:column; gap:14px;
}
.plano--destaque{border:2px solid var(--brand); box-shadow:0 18px 46px rgba(249,115,22,.16)}
.selo{position:absolute; top:-12px; left:24px; background:var(--brand); color:#1c0d02;
      font-size:10px; font-weight:800; letter-spacing:.14em; padding:5px 12px; border-radius:99px}
.plano h3{font-size:18px; text-transform:uppercase; letter-spacing:.04em}
.preco{font-size:clamp(26px,3vw,34px); font-weight:800; line-height:1.05; letter-spacing:-.02em}
.preco small{font-size:13px; font-weight:400; color:var(--gray-500); letter-spacing:0}
.plano .quem{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.plano ul{display:grid; gap:9px; flex:1}
.plano li{position:relative; padding-left:24px; font-size:14px; color:var(--ink-2); line-height:1.5}
.plano li::before{content:""; position:absolute; left:2px; top:8px; width:9px; height:9px;
                  border:2px solid var(--brand); border-top:0; border-right:0;
                  transform:rotate(-45deg)}

/* ------------------------------------------------------------------- FAQ */
.faq{display:grid; gap:10px; max-width:840px}
.faq details{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r);
             padding:2px 20px; transition:border-color .2s ease}
.faq details[open]{border-color:#f5c9a4}
.faq summary{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
             list-style:none; cursor:pointer; padding-block:18px;
             font-size:15px; font-weight:600; line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:12px; height:12px; margin-top:5px;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(45deg); transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .resp{padding:0 0 20px}
.faq .resp p{font-size:14.5px; color:var(--ink-2); line-height:1.65; margin-bottom:12px}
.faq .resp p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ quem somos */
.sobre{max-width:64ch}
.sobre p{font-size:clamp(15px,1.7vw,18px); color:var(--ink-2); line-height:1.72; margin-bottom:16px}
.sobre strong{color:var(--ink); font-weight:600}

/* --------------------------------------- faixa de CTA (único bloco laranja) */
/* Texto em quase-preto, não em branco: branco sobre #f97316 mede 2,8:1 e
   reprova em AA até como texto grande. O preto sobre o mesmo laranja dá
   7,5:1 sem trocar a cor da marca. */
.cta-band{background:var(--brand); color:#1c0d02; padding-block:clamp(52px,6vw,80px); text-align:center}
.cta-band h2{margin-bottom:14px}
.cta-band p{max-width:44ch; margin:0 auto 28px; font-size:clamp(15px,1.8vw,18px); font-weight:500; color:#41200a}

/* -------------------------------------------------------------- contato */
.contato{display:grid; gap:clamp(36px,4.5vw,64px); align-items:start}
.campo{margin-bottom:14px}
.campo label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.campo input,.campo textarea{
  width:100%; padding:14px 15px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid #d4d4d8; border-radius:10px;
}
.campo input::placeholder,.campo textarea::placeholder{color:#6b7280}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand)}
.campo textarea{min-height:104px; resize:vertical}
.opcional{font-weight:400; color:var(--gray-500)}
.consent{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start;
         margin:18px 0 20px; font-size:13px; color:var(--ink-2); line-height:1.5}
.consent input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--brand)}
.form-msg{margin-top:16px; font-size:14px; font-weight:500; line-height:1.5; padding:12px 14px;
          border-radius:10px; border:1px solid var(--gray-200); background:var(--gray-100)}
.form-msg[hidden]{display:none}
.form-msg.err{border-color:#f2b8b8; background:#fdf1f1; color:#8c1d1d}
.contatos{display:grid; gap:20px}
.contatos li b{display:block; font-size:12px; font-weight:700; letter-spacing:.16em;
               text-transform:uppercase; color:var(--brand-700); margin-bottom:5px}
.contatos li a,.contatos li address{font-style:normal; font-size:15.5px; color:var(--ink-2); line-height:1.55}
.contatos li a{border-bottom:1px solid var(--gray-200); transition:color .18s ease, border-color .18s ease}
.contatos li a:hover{color:var(--brand-700); border-color:var(--brand)}

/* -------------------------------------------------------------- rodapé */
.site-footer{background:var(--black); color:#a1a1aa; padding-block:52px 32px}
.footer-top{display:grid; gap:32px; padding-bottom:32px; border-bottom:1px solid #27272a}
.footer-marca .marca{display:flex; align-items:center; gap:12px}
.footer-marca .marca img{height:42px; width:auto; flex:none}
.footer-marca b{font-size:19px; font-weight:800; color:#fff; letter-spacing:.03em}
.footer-marca b i{font-style:normal; color:var(--brand)}
/* :not() explícito — sem ele, .footer-marca p (0,1,1) vence .footer-legal
   (0,1,0) e o CNPJ sai em itálico bold junto com a assinatura da marca. */
.footer-marca p:not(.footer-legal){margin-top:8px; font-size:14px; font-style:italic; font-weight:600; color:#d4d4d8}
.footer-marca p.footer-legal{margin-top:16px; font-size:12px; font-style:normal; font-weight:400;
                             line-height:1.7; color:#a1a1aa}
.footer-nav{display:grid; gap:10px}
.footer-nav b{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff}
.footer-nav a{font-size:14px; color:#a1a1aa; transition:color .18s ease}
.footer-nav a:hover{color:var(--brand)}
.footer-nav .pend{font-size:13px; line-height:1.5}
.footer-fim{padding-top:24px; font-size:12px; color:#7a7a85}   /* 4,95:1 — #71717a dava 4,35:1 */

/* ------------------------------------------- telas reais do produto */
/* Recorte feito em CSS, sem gerar arquivo extra: a janela (--jw x --jh) é
   uma região do arquivo (--fw de largura) deslocada por --x0/--y0. Tudo em
   porcentagem da largura do container, então a escala acompanha a tela.
   Medido: a 350px de largura (celular em 390px) o texto do produto sai
   entre 0,80x e 0,88x do tamanho original — legível. A imagem inteira a
   350px daria 0,25x, que é ilegível, e por isso não entra assim.        */
figure.tela{margin:0}
.tela-janela{
  overflow:hidden; background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--r); box-shadow:var(--shadow);
  aspect-ratio:var(--jw) / var(--jh);
}
.tela-janela img{
  display:block; height:auto; max-width:none;
  width:calc(var(--fw) / var(--jw) * 100%);
  margin-left:calc(var(--x0) / var(--jw) * -100%);
  margin-top:calc(var(--y0) / var(--jw) * -100%);
}
.tela--cheia .tela-janela{max-width:560px; margin-inline:auto}
.tela figcaption{margin-top:12px; font-size:13.5px; color:var(--ink-2); line-height:1.55; max-width:62ch}
.tela figcaption b{display:block; color:var(--ink); font-weight:600; font-size:14.5px; margin-bottom:3px}
.telas{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
       margin-top:clamp(28px,3.6vw,44px)}
/* #9a4a09 e não var(--brand-700): medido no computado, #c2540b sobre o
   --brand-soft dá 4,16:1, e a 11px em peso 700 este selo é texto normal
   (grande só a partir de 18,66px), então reprovava AA. O #9a4a09 dá 5,50:1
   e já é cor da paleta — é o mesmo laranja escuro do .ph. A correção é da
   CLASSE: vale para as seis instâncias do selo, não só para a nova. */
.demo{display:inline-block; margin-top:8px; padding:3px 10px; border-radius:99px;
      border:1px solid #f0bd93; font-size:11px; font-weight:700; letter-spacing:.08em;
      text-transform:uppercase; color:#9a4a09; background:var(--brand-soft)}
/* variante para fundo escuro: o selo claro do .demo viraria o elemento mais
   brilhante do hero. #f5a06a sobre o --dark mede 9,4:1. */
.demo--min{margin:0 0 0 6px; padding:2px 8px; font-size:10px;
           border-color:rgba(249,115,22,.5); background:transparent; color:#f5a06a}

/* ------------------------------------------------- WhatsApp flutuante */
/* O flutuante é elemento de camada fixa: a página sai de baixo dele por
   token, nunca o contrário — nem esconder, nem mover. Medido: sem esta
   reserva, o ponto direito do submit do formulário devolve .whats no
   elementFromPoint na posição de descanso do scroll. */
.whats{
  position:fixed; right:16px; bottom:16px; z-index:80;
  width:56px; height:56px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:transform .2s var(--ease), background .2s ease;
}
.whats:hover{background:var(--brand-600); transform:translateY(-3px)}
.whats svg{width:29px; height:29px}

/* =======================================================================
   RESPONSIVO — 390px é o projeto; daqui para cima é derivação.
   ======================================================================= */
@media (min-width:600px){
  :root{--pad:24px}
  .cenas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modulos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lgpd{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px}
  .acesso ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metricas{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr}
}

/* 940px. Foi 900, virou 928 quando a nav não cabia ao lado do logo de 165px,
   e virou 940 quando o símbolo da marca levou o logo a 225px. O header exige
   918px numa linha (2x24 de padding + 225 do logo + 16 de gap + 629 da nav),
   medido com e sem a webfont. 940 dá 22px de folga.
   O par deste breakpoint é o (max-width:939px) lá embaixo — têm de casar. */
@media (min-width:940px){
  /* só as duas telas principais voltam ao inteiro: aqui o container tem
     880px ou mais e a captura de 1200px cai para ~0,73x — legível. As três
     de detalhe continuam recortadas, porque numa coluna de galeria a tela
     inteira cairia para ~0,32x. */
  .tela--cheia .tela-janela{aspect-ratio:auto; max-width:none; margin-inline:0}
  .tela--cheia .tela-janela img{width:100%; max-width:100%; margin:0}
  /* 118px de respiro embaixo eram do emblema; a janela do produto ocupa esse
     espaço agora e traz a própria margem. */
  .hero .container{padding-block:132px 72px}
  .hero-copy{max-width:660px}
  .contexto .container{grid-template-columns:1fr 260px}
  .modulos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px}
  .passo{padding-bottom:38px}
  .passos-spine{display:none}          /* a espinha é vertical; em 2 colunas ela mentiria */
  .l360{grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .gestao{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px}
  .gestao > div:nth-child(-n+2){border-top:0}
  .planos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .depos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contato{grid-template-columns:1.15fr .85fr}
  .whats{right:24px; bottom:24px}
}

@media (min-width:1200px){
  .cenas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .head{margin-bottom:56px}
}

/* Hero em duas colunas só a partir de 1280px, e a janela troca de recorte:
   passa a mostrar a tela com o menu do sistema, que é o que diz "isto é um
   CRM" numa olhada. Três medidas decidiram estes números, todas no render:

   1) 1fr/0,78fr com 36px de vão dá 616px à coluna de texto. A segunda linha
      da headline ("ESFRIA ESPERANDO") ocupa 577px: com 573px ela quebrava em
      quatro linhas, e a diferença entre três e quatro linhas aqui era de 4px.
   2) o recorte de 760x506 da captura (e não os 900x600 da primeira tentativa)
      põe a janela entre 0,72x e 0,88x do tamanho original do sistema. A
      galeria da seção de gestão, que já estava publicada, roda a 0,72x: esta
      é a régua da página, e o hero está dentro dela.
   3) o sangramento à direita cresce com a folga que existe entre o container
      e a borda da tela: 70px em 1280 (onde a folga é 50) e 150px de 1440 em
      diante (onde é 130 ou mais). Sangrar mais que a folga não alarga a
      janela, só joga imagem para fora da tela.                            */
@media (min-width:1280px){
  .hero .container{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
    gap:36px; align-items:center; padding-block:120px 104px;
  }
  .hero figure.hero-tela{margin:0 -70px 0 0; --jw:651; --jh:434; --x0:0; --y0:0}
  figure.hero-tela .tela-janela{max-width:none; margin-left:0; border-radius:var(--r)}
  figure.hero-tela figcaption{padding-right:70px; text-align:left}
}
@media (min-width:1440px){
  .hero figure.hero-tela{margin-right:-150px}
  figure.hero-tela figcaption{padding-right:150px}
}

@media (min-width:1600px){
  :root{--maxw:1280px; --pad:32px}
}

/* ---- menu mobile: só existe quando há JS; sem JS o menu fica aberto ----
   939px é o par de (min-width:940px). Trocar só um dos dois deixaria uma
   faixa sem menu nenhum ou com os dois ao mesmo tempo.                  */
@media (max-width:939px){
  /* a página cede a faixa do flutuante nos pontos onde o scroll descansa */
  #form-demo .btn--block{margin-bottom:var(--zona-whats)}
  .plano .btn--block{margin-bottom:12px}
  .footer-fim{padding-bottom:var(--zona-whats)}
}

@media (max-width:939px){
  html.js .nav{
    position:fixed; inset:0; z-index:70; display:none;
    flex-direction:column; align-items:center; justify-content:center; gap:22px;
    background:rgba(0,0,0,.97); padding:24px;
  }
  html.js .nav.aberto{display:flex}
  html.js .nav a{font-size:19px; font-weight:600}
  html.js .nav .btn{margin:8px 0 0; font-size:13px; padding:15px 28px}
  html.js .nav-toggle{
    display:grid; place-items:center; position:relative; z-index:75;
    width:44px; height:44px; margin-right:-8px; color:#fff;
  }
  html.js .nav-toggle svg{width:24px; height:24px}
  html.js .nav-toggle .fechar,
  html.js .nav-toggle[aria-expanded="true"] .abrir{display:none}
  html.js .nav-toggle[aria-expanded="true"] .fechar{display:block}
  /* sem JS: o menu é uma linha que quebra, embaixo do logo */
  html:not(.js) .site-header .container{flex-wrap:wrap}
  html:not(.js) .nav{gap:14px 18px; width:100%}
  html:not(.js) .nav a{font-size:13px}
}

/* Sem JS o formulário não tem para onde enviar: o submit viraria GET para a
   própria URL, com nome, e-mail e telefone na querystring — dado pessoal no
   histórico do navegador e no log do host — e o lead se perderia em
   silêncio, com a página recarregando como se tivesse enviado.
   Sem JS o caminho é o <noscript> logo abaixo dele. */
html:not(.js) #form-demo{display:none}