/* =====================================================================
   SITE DA VNT (02/11/2026) — a folha única das cinco páginas.
   Tokens no :root; tudo referencia tokens. Regras da casa:
   · página clara do começo ao fim (papel branco e a parede #F3F5F8);
   · FORMA DA CASA: tudo arredondado menos o canto de baixo à direita
     (o pingo da marca). Coisas sutis (pílulas, avatares) = 4 cantos redondos;
   · a cor de cada produto só no bloco dele;
   · botão verde com texto ESCURO (branco no #84BC25 dá 2,3:1).
   ===================================================================== */

:root{
  --papel:#ffffff; --parede:#f3f5f8; --parede-2:#eceff4;
  --tinta:#131829; --tinta-2:#59607a; --tinta-3:#8b92a8; --linha:#e7e9ef;
  --verde:#84bc25; --verde-escuro:#4f7303; --verde-suave:#f0f7e1; --verde-borda:#d9ebb5;
  --crm:#af1010; --crm-txt:#af1010; --crm-suave:#fbecec;
  --atd:#11c4af; --atd-txt:#0a7f72; --atd-suave:#e3f8f5;
  --pj:#6e3fff; --pj-txt:#5a2de0; --pj-suave:#efeaff;
  --ag:#4c8df6; --ag-txt:#2f6fe0; --ag-suave:#e9f1fe;

  --f-tit:'Outfit', system-ui, sans-serif;
  --f-txt:'Inter', system-ui, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;

  --r:26px; --r-p:18px;
  --casa:var(--r) var(--r) 0 var(--r);
  --casa-p:var(--r-p) var(--r-p) 0 var(--r-p);
  --sombra:0 6px 18px rgba(17,24,39,.08);
  --sombra-g:0 24px 60px -18px rgba(17,24,39,.22);

  --margem:clamp(20px, 4vw, 40px);
  --largura:1200px;
  --secao:clamp(72px, 9vw, 132px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --rapido:160ms; --base:320ms; --lento:760ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:96px; }
body{ margin:0; background:var(--papel); color:var(--tinta); font:400 1.0625rem/1.58 var(--f-txt); overflow-x:clip;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }
::selection{ background:var(--verde-suave); color:var(--tinta); }
:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:6px; }
input, textarea, select, button{ font:inherit; color:inherit; caret-color:var(--verde-escuro); }
h1,h2,h3,h4{ font-family:var(--f-tit); font-weight:700; letter-spacing:-.03em; line-height:1.04; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
em.serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.num{ font-variant-numeric:tabular-nums; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pular{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--tinta); color:#fff; padding:10px 16px; border-radius:12px; }
.pular:focus{ top:12px; }

.dentro{ width:min(100% - 2*var(--margem), var(--largura)); margin-inline:auto; }
.secao{ padding-block:var(--secao); }
.parede{ background:var(--parede); }

/* ---------- textos de apoio ---------- */
.chapeu{ display:inline-flex; align-items:center; gap:8px; font:600 .8125rem/1 var(--f-txt); color:var(--verde-escuro);
         background:var(--verde-suave); border:1px solid var(--verde-borda); padding:7px 12px; border-radius:999px; }
.chapeu i{ width:7px; height:7px; border-radius:2px 2px 0 2px; background:var(--verde); }
.titulo{ font-size:clamp(2.05rem, 3.7vw, 3.35rem); }
.apoio{ color:var(--tinta-2); font-size:clamp(1.0625rem, 1.3vw, 1.1875rem); max-width:58ch; }
.cabeca{ display:grid; gap:18px; margin-bottom:clamp(40px, 5vw, 64px); max-width:820px; }

/* ---------- botões (forma da casa) ---------- */
.btn{ --bg:var(--verde); --cor:#fff; display:inline-flex; align-items:center; justify-content:center; gap:10px;
      min-height:52px; padding:0 26px; border:0; border-radius:22px 22px 0 22px; background:var(--bg); color:var(--cor);
      font:600 1rem/1 var(--f-txt); text-decoration:none; cursor:pointer; white-space:nowrap;
      transition:transform var(--rapido) var(--ease), background-color var(--rapido), box-shadow var(--rapido); }
.btn:hover{ background:#92c93a; box-shadow:0 10px 22px -10px rgba(103,148,5,.55); }
.btn:active{ transform:scale(.97); }
.btn-g{ min-height:58px; padding:0 32px; font-size:1.0625rem; }
.btn-p{ min-height:42px; padding:0 18px; font-size:.9375rem; border-radius:18px 18px 0 18px; }
.btn-claro{ --bg:var(--papel); --cor:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--linha); }
.btn-claro:hover{ background:var(--parede); box-shadow:inset 0 0 0 1.5px #d5d9e3; }
.btn svg{ width:18px; height:18px; }
.link{ color:var(--verde-escuro); font-weight:600; text-decoration:underline; text-decoration-color:var(--verde-borda);
       text-underline-offset:.3em; text-decoration-thickness:2px; transition:text-decoration-color var(--rapido); }
.link:hover{ text-decoration-color:var(--verde); }
.nota{ font-size:.9375rem; color:var(--tinta-2); }

/* =====================================================================
   TOPO + O FIO DO DIA (a régua das 7h às 23h que anda com a rolagem)
   ===================================================================== */
.topo{ position:sticky; top:0; z-index:50; background:var(--papel); border-bottom:1px solid transparent;
       transition:border-color var(--base); }
.topo.rolou{ border-bottom-color:var(--linha); }
.topo-dentro{ display:flex; align-items:center; gap:28px; height:76px; }
.marca img{ height:30px; width:auto; }
.menu{ display:flex; gap:4px; margin-left:12px; }
.menu a{ padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:500; color:var(--tinta-2);
         transition:color var(--rapido), background-color var(--rapido); }
.menu a:hover{ color:var(--tinta); background:var(--parede); }
.menu a[aria-current="page"]{ color:var(--tinta); background:var(--parede); }
.menu .so-cel{ display:none; }
.menu .so-cel .btn{ color:var(--cor); }
.topo-acoes{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.entrar{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:600; text-decoration:none; }
.entrar:hover{ background:var(--parede); }
.entrar svg{ width:18px; height:18px; color:var(--tinta-2); }
.abre-menu{ display:none; margin-left:auto; width:46px; height:46px; border:0; border-radius:14px 14px 0 14px; background:var(--parede); cursor:pointer; }
.abre-menu span{ display:block; width:20px; height:2px; background:var(--tinta); margin:5px auto; border-radius:2px; transition:transform var(--base) var(--ease); }
.topo.aberto .abre-menu span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.topo.aberto .abre-menu span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.fio{ position:relative; height:3px; background:var(--linha); }
.fio-cheio{ position:absolute; inset:0 auto 0 0; width:0; background:var(--verde); }
/* ⚠️ a etiqueta da hora saiu da tela (02/11): caía em cima de títulos e pílulas. A barra sozinha já é o dia andando. */
.fio-hora{ display:none!important; position:absolute; top:7px; left:0; transform:translateX(-50%); font:600 .6875rem/1 var(--f-txt); color:var(--verde-escuro);
           background:var(--papel); border:1px solid var(--verde-borda); padding:4px 7px; border-radius:999px; white-space:nowrap;
           opacity:0; transition:opacity var(--base); pointer-events:none; }
.topo.rolou .fio-hora{ opacity:1; }
.topo.rolou.no-dia .fio-hora{ opacity:0; }   /* na seção do dia o relógio grande manda; duas horas na tela confundem */

/* =====================================================================
   HOME — 1 · HERO
   ===================================================================== */
.hero{ padding:clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); position:relative; }
.hero::before{ content:""; position:absolute; inset:0 0 auto; height:78%; background:linear-gradient(180deg, var(--parede), var(--papel)); z-index:-1; }
.hero-grade{ display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(36px, 5vw, 72px); align-items:center; }
.hero h1{ font-size:clamp(2.7rem, 5.6vw, 5.4rem); line-height:.98; letter-spacing:-.04em; }
.hero h1 em.serif{ color:var(--verde-escuro); letter-spacing:-.02em; }
.hero .apoio{ margin-top:24px; }
.hero-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:34px; }
.hero-nota{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.9375rem; color:var(--tinta-2); }
.hero-nota span{ display:inline-flex; align-items:center; gap:7px; }
.hero-nota svg{ width:16px; height:16px; color:var(--verde-escuro); }

.tela{ position:relative; }
.janela{ background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); box-shadow:var(--sombra-g); overflow:hidden; }
.janela-barra{ display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-bottom:1px solid var(--linha); background:#fbfcfd; }
.janela-barra i{ width:9px; height:9px; border-radius:50%; background:#dfe3ea; }
.janela-barra b{ margin-left:10px; font:500 .75rem/1 var(--f-txt); color:var(--tinta-3); }
.janela img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top left; }
.legenda{ margin-top:12px; font-size:.8125rem; color:var(--tinta-2); }

.relogio{ position:absolute; left:clamp(-28px, -2vw, -12px); bottom:-34px; width:min(300px, 70%); padding:20px 22px 18px;
          background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); box-shadow:var(--sombra-g); }
.relogio-saud{ font:500 .9375rem/1.2 var(--f-txt); color:var(--tinta-2); }
.relogio-saud b{ font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:1.375rem; color:var(--tinta); }
.relogio-hora{ font:700 clamp(3rem, 5vw, 4.25rem)/.95 var(--f-tit); letter-spacing:-.045em; margin:6px 0 8px; font-variant-numeric:tabular-nums; }
.relogio-hora .dp{ color:var(--verde); }
.relogio-data{ display:inline-block; font:500 .8125rem/1 var(--f-txt); color:var(--tinta-2); background:var(--parede); padding:7px 11px; border-radius:999px; }

/* =====================================================================
   HOME — 2 · O DIA (a assinatura: coluna fixa + o relógio que se arrasta)
   ===================================================================== */
.dia-grade{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.dia-fixo{ position:sticky; top:104px; }
.dia-hora{ display:flex; align-items:baseline; gap:16px; }
.dia-hora strong{ font:700 clamp(3.6rem, 7vw, 6.5rem)/.9 var(--f-tit); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.dia-app{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9375rem; padding:8px 13px; border-radius:999px;
          background:var(--papel); border:1px solid var(--linha); transition:color var(--base); }
.dia-app i{ width:9px; height:9px; border-radius:3px 3px 0 3px; background:var(--c, var(--verde)); transition:background-color var(--base); }

.regua{ position:relative; margin:22px 0 22px; }
.regua input{ -webkit-appearance:none; appearance:none; width:100%; height:40px; background:transparent; cursor:grab; margin:0; position:relative; z-index:2; }
.regua input:active{ cursor:grabbing; }
.regua input::-webkit-slider-runnable-track{ height:6px; border-radius:6px; background:transparent; }
.regua input::-moz-range-track{ height:6px; background:transparent; }
.regua input::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:9px 9px 0 9px;
     background:var(--tinta); border:4px solid var(--papel); box-shadow:0 4px 12px rgba(17,24,39,.3); }
.regua input::-moz-range-thumb{ width:22px; height:22px; border-radius:8px 8px 0 8px; background:var(--tinta); border:4px solid var(--papel); box-shadow:0 4px 12px rgba(17,24,39,.3); }
.regua-trilho{ position:absolute; left:14px; right:14px; top:17px; height:6px; border-radius:6px; background:var(--parede-2); overflow:hidden; }
.regua-trilho b{ position:absolute; inset:0 auto 0 0; width:0; background:var(--verde); border-radius:6px; }
.regua-marcas{ display:flex; justify-content:space-between; padding:0 14px; margin-top:2px; font:500 .75rem/1 var(--f-txt); color:var(--tinta-2); font-variant-numeric:tabular-nums; }

.dia-palco{ position:relative; aspect-ratio:16/10; }
.dia-palco > *{ position:absolute; inset:0; opacity:0; transform:translateY(10px) scale(.985); transition:opacity 520ms var(--ease), transform 720ms var(--ease); }
.dia-palco > .ativo{ opacity:1; transform:none; }
.dia-palco .janela img{ aspect-ratio:auto; height:calc(100% - 34px); }
.dia-palco .janela{ height:100%; }

.dia-passos{ display:grid; }
.passo{ min-height:72vh; display:flex; flex-direction:column; justify-content:center; gap:14px; padding-block:32px; }
.passo:first-child{ min-height:56vh; padding-top:0; justify-content:flex-start; }
.passo-hora{ font:600 .875rem/1 var(--f-txt); color:var(--tinta-2); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:10px; }
.passo-hora i{ width:9px; height:9px; border-radius:3px 3px 0 3px; background:var(--c); }
.passo h3{ font-size:clamp(1.65rem, 2.5vw, 2.25rem); line-height:1.08; }
.passo p{ color:var(--tinta-2); max-width:44ch; }
.passo .link{ align-self:flex-start; margin-top:4px; }
.passo-img{ display:none; }

/* a caixa de conversas desenhada (o Atendimento da Test não tem número ligado) */
.caixa{ height:100%; display:grid; grid-template-rows:auto auto 1fr; background:var(--papel); }
.caixa-topo{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--atd); color:#06352f; font:600 .875rem/1 var(--f-txt); }
.caixa-topo img{ height:18px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.caixa-abas{ display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--linha); font-size:.75rem; font-weight:600; color:var(--tinta-2); overflow:hidden; }
.caixa-abas span{ padding:6px 10px; border-radius:999px; background:var(--parede); white-space:nowrap; }
.caixa-abas span:first-child{ background:var(--atd-suave); color:var(--atd-txt); }
.caixa-lista{ list-style:none; margin:0; padding:4px 0; overflow:hidden; }
.caixa-lista li{ display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid #f1f3f6; }
.caixa-lista li > span{ min-width:0; }
.caixa-lista .av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:600 .8125rem/1 var(--f-txt); color:#fff; }
.caixa-lista b{ display:block; font-size:.875rem; }
.caixa-lista small{ display:block; font-size:.8125rem; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.caixa-lista em{ font-style:normal; font:600 .6875rem/1 var(--f-txt); padding:6px 8px; border-radius:999px; background:#fdf1e3; color:#8a4b00; white-space:nowrap; }
.caixa-lista em.ok{ background:var(--atd-suave); color:var(--atd-txt); }
.caixa-ex{ position:absolute; right:12px; bottom:10px; font:500 .6875rem/1 var(--f-txt); color:var(--tinta-2); background:var(--parede); padding:5px 8px; border-radius:999px; }

/* =====================================================================
   HOME — 3 · A PLANILHA DAS 23H
   ===================================================================== */
.manifesto{ font:600 clamp(1.75rem, 3.4vw, 3rem)/1.16 var(--f-tit); letter-spacing:-.03em; max-width:24ch; }
.manifesto .p{ transition:opacity 300ms; }
.js .manifesto.vivo .p{ opacity:.16; }
.js .manifesto.vivo .p.aceso{ opacity:1; }
.tentativas{ list-style:none; padding:0; margin:clamp(48px, 6vw, 80px) 0 0; display:grid; gap:12px; }
.tentativas li{ display:grid; grid-template-columns:minmax(150px, .7fr) 1fr 1fr; gap:20px; align-items:center; padding:24px 28px;
                border:1px solid var(--linha); border-radius:var(--casa); background:var(--papel); }
.tentativas .rot{ font:600 .875rem/1.2 var(--f-txt); color:var(--tinta-2); }
.tentativas .rot b{ display:block; font:700 1.25rem/1.1 var(--f-tit); color:var(--tinta); letter-spacing:-.02em; margin-top:4px; }
.tentativas .bom{ font-weight:600; }
.tentativas .ruim{ color:var(--tinta-2); display:flex; gap:10px; align-items:center; }
.tentativas .ruim svg{ width:18px; height:18px; color:#c2410c; flex:none; }
.tentativas li.vnt{ background:var(--verde-suave); border-color:var(--verde-borda); }
.tentativas li.vnt .ruim{ color:var(--tinta); font-weight:600; }
.tentativas li.vnt .ruim svg{ color:var(--verde-escuro); }

/* =====================================================================
   HOME — 4 · TUDO JUNTO (o fio de quatro pontos)
   ===================================================================== */
.fluxo{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; position:relative; }
.fluxo::before{ content:""; position:absolute; left:12px; right:12px; top:12px; height:2px; background:var(--linha); }
.fluxo::after{ content:""; position:absolute; left:12px; right:12px; top:12px; height:2px; background:var(--verde);
               transform-origin:left; transform:scaleX(var(--fio, 1)); }
.fluxo li{ position:relative; padding-top:44px; }
.fluxo li::before{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:7px 7px 0 7px; background:var(--c);
                   box-shadow:0 0 0 5px var(--parede); z-index:1; }
.fluxo .hora{ font:600 .8125rem/1 var(--f-txt); color:var(--tinta-2); font-variant-numeric:tabular-nums; }
.fluxo h3{ font-size:1.375rem; line-height:1.15; margin:10px 0 8px; letter-spacing:-.02em; }
.fluxo p{ color:var(--tinta-2); font-size:1rem; }
.fluxo-fim{ margin-top:48px; display:flex; align-items:center; gap:12px; font:600 1.125rem/1.3 var(--f-tit); }
.fluxo-fim svg{ width:22px; height:22px; color:var(--verde-escuro); }

/* =====================================================================
   OS APLICATIVOS (cartões com o pingo da cor no canto reto)
   ===================================================================== */
.apps{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.app{ --c:var(--verde); --ct:var(--verde-escuro); position:relative; display:flex; flex-direction:column; gap:16px; padding:30px 30px 28px;
      background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); text-decoration:none;
      transition:transform var(--base) var(--ease), box-shadow var(--base), border-color var(--base); }
.app::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; background:var(--c); }
a.app:hover{ transform:translateY(-4px); box-shadow:var(--sombra-g); border-color:#dfe2ea; }
.app-logo{ height:30px; width:auto; align-self:flex-start; }
.app-frase{ font:600 1.25rem/1.25 var(--f-tit); letter-spacing:-.02em; }
.app ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--tinta-2); font-size:.9688rem; }
.app li{ display:flex; gap:10px; }
.app li::before{ content:""; flex:none; width:6px; height:6px; margin-top:.6em; border-radius:2px 2px 0 2px; background:var(--c); }
.app-preco{ margin-top:auto; padding-top:18px; border-top:1px solid var(--linha); display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.app-preco b{ font:700 1.75rem/1 var(--f-tit); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.app-preco b small{ font:500 .9375rem/1 var(--f-txt); color:var(--tinta-2); letter-spacing:0; }
.app-preco span{ font-weight:600; color:var(--ct); font-size:.9375rem; }
.app.crm{ --c:var(--crm); --ct:var(--crm-txt); } .app.atd{ --c:var(--atd); --ct:var(--atd-txt); }
.app.pj{ --c:var(--pj); --ct:var(--pj-txt); } .app.ag{ --c:var(--ag); --ct:var(--ag-txt); }

/* =====================================================================
   QUEM FAZ (home) e números
   ===================================================================== */
.quem{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(36px, 6vw, 96px); align-items:center; }
.retrato{ position:relative; background:var(--verde-suave); border-radius:var(--casa); aspect-ratio:1; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.retrato img{ width:86%; }
.retrato figcaption{ position:absolute; left:18px; top:18px; background:var(--papel); padding:10px 14px; border-radius:16px 16px 0 16px; font-weight:600; font-size:.9375rem; box-shadow:var(--sombra); }
.retrato figcaption small{ display:block; font-weight:500; color:var(--tinta-2); font-size:.8125rem; }
.numeros{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; margin-top:40px; border-top:1px solid var(--linha); }
.numeros div{ padding:22px 18px 0 0; }
.numeros b{ display:block; font:700 clamp(1.9rem, 3vw, 2.6rem)/1 var(--f-tit); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.numeros > div > span{ display:block; margin-top:8px; font-size:.9375rem; color:var(--tinta-2); line-height:1.35; }

/* =====================================================================
   PLANO FUNDADOR (faixa) — some sozinha depois de 20/12/2026
   ===================================================================== */
.fundador{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(28px, 5vw, 72px); align-items:center;
           padding:clamp(32px, 5vw, 64px); background:var(--verde-suave); border:1px solid var(--verde-borda); border-radius:var(--casa); }
.fundador h2{ font-size:clamp(2rem, 3.6vw, 3.2rem); margin:16px 0 14px; }
.fundador p{ color:var(--tinta-2); max-width:50ch; }
.fundador .btn{ margin-top:26px; }
.meses{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.meses li{ aspect-ratio:1; border-radius:12px 12px 0 12px; background:var(--verde); display:grid; place-items:center; font:600 .8125rem/1 var(--f-txt); color:var(--tinta); }
.meses li.gratis{ background:var(--papel); border:2px dashed var(--verde); color:var(--verde-escuro); }
.meses-leg{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:.875rem; color:var(--tinta-2); }
.meses-leg span{ display:inline-flex; align-items:center; gap:8px; }
.meses-leg i{ width:12px; height:12px; border-radius:4px 4px 0 4px; background:var(--verde); }
.meses-leg i.g{ background:var(--papel); border:2px dashed var(--verde); }

/* =====================================================================
   PERGUNTAS (acordeão)
   ===================================================================== */
.perguntas{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 20px; align-items:start; }
.perguntas details{ background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa-p); }
.perguntas summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px 22px;
                    font:600 1.0625rem/1.3 var(--f-tit); letter-spacing:-.01em; }
.perguntas summary::-webkit-details-marker{ display:none; }
.perguntas summary::after{ content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--tinta-2); border-bottom:2px solid var(--tinta-2);
                           transform:rotate(45deg) translateY(-3px); transition:transform var(--base) var(--ease); }
.perguntas details[open] summary::after{ transform:rotate(225deg) translateY(-3px); }
.perguntas details p{ padding:0 22px 22px; color:var(--tinta-2); }

/* =====================================================================
   FIM (o único momento centralizado do site)
   ===================================================================== */
.fim{ text-align:center; padding-block:clamp(96px, 12vw, 176px); }
.fim-hora{ font:700 clamp(4.5rem, 12vw, 10rem)/.85 var(--f-tit); letter-spacing:-.06em; font-variant-numeric:tabular-nums; color:var(--tinta); }
.fim-hora .dp{ color:var(--verde); }
.fim h2{ font-size:clamp(2rem, 4vw, 3.5rem); margin-top:22px; }
.fim .apoio{ margin:18px auto 0; }
.fim-acoes{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; margin-top:34px; }

/* =====================================================================
   PÁGINAS INTERNAS
   ===================================================================== */
.topo-pg{ padding:clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 72px); background:linear-gradient(180deg, var(--parede), var(--papel)); }
.topo-pg h1{ font-size:clamp(2.6rem, 5.4vw, 5rem); line-height:.98; letter-spacing:-.04em; max-width:15ch; margin-top:20px; }
.topo-pg .apoio{ margin-top:22px; }

/* produtos: a barra de atalhos */
body[data-pg="produtos"] .fio-hora{ display:none; }   /* a etiqueta cairia em cima das pílulas dos atalhos */
.atalhos{ position:sticky; top:79px; z-index:30; background:var(--papel); border-block:1px solid var(--linha); }
.atalhos .dentro{ display:flex; gap:8px; overflow-x:auto; padding-block:12px; scrollbar-width:none; }
.atalhos a{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.9375rem;
            border:1px solid var(--linha); white-space:nowrap; transition:background-color var(--rapido), border-color var(--rapido); }
.atalhos a i{ width:9px; height:9px; border-radius:3px 3px 0 3px; background:var(--c); }
.atalhos a:hover, .atalhos a.ativo{ background:var(--parede); border-color:#d5d9e3; }

.produto{ --c:var(--verde); --ct:var(--verde-escuro); --cs:var(--verde-suave); padding-block:clamp(72px, 9vw, 136px); border-top:1px solid var(--linha); }
.produto.crm{ --c:var(--crm); --ct:var(--crm-txt); --cs:var(--crm-suave); }
.produto.atd{ --c:var(--atd); --ct:var(--atd-txt); --cs:var(--atd-suave); }
.produto.pj{ --c:var(--pj); --ct:var(--pj-txt); --cs:var(--pj-suave); }
.produto.ag{ --c:var(--ag); --ct:var(--ag-txt); --cs:var(--ag-suave); }
.produto-cabeca{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px 48px; align-items:end; margin-bottom:clamp(36px, 5vw, 56px); }
.produto-cabeca img.logo{ height:38px; width:auto; margin-bottom:22px; }
.produto-cabeca h2{ font-size:clamp(2rem, 3.6vw, 3.2rem); max-width:18ch; }
.produto-cabeca .apoio{ margin-top:16px; }
.preco-tag{ text-align:right; }
.preco-tag b{ display:block; font:700 clamp(2.2rem, 3.5vw, 3rem)/1 var(--f-tit); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.preco-tag b small{ font:500 1rem/1 var(--f-txt); color:var(--tinta-2); letter-spacing:0; }
.preco-tag span{ display:inline-block; margin-top:10px; font-weight:600; font-size:.875rem; color:var(--ct); background:var(--cs); padding:7px 12px; border-radius:999px; }
.produto-vitrine{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:20px; align-items:stretch; }
.produto-vitrine .janela{ border-top:4px solid var(--c); }
.produto-vitrine .lado{ display:grid; gap:20px; align-content:start; }
.dor{ padding:26px; border-radius:var(--casa); background:var(--cs); }
.dor small{ font:600 .8125rem/1 var(--f-txt); color:var(--ct); font-variant-numeric:tabular-nums; }
.dor p{ font:600 1.25rem/1.3 var(--f-tit); letter-spacing:-.02em; margin-top:10px; }
.recursos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; margin-top:clamp(32px, 4vw, 48px); border-top:1px solid var(--linha); }
.recursos > div{ padding:26px 26px 26px 0; border-bottom:1px solid var(--linha); }
.recursos > div:not(:nth-child(3n+1)){ padding-left:26px; border-left:1px solid var(--linha); }
.recursos h3{ font-size:1.125rem; letter-spacing:-.015em; line-height:1.25; display:flex; gap:10px; align-items:center; }
.recursos h3 i{ flex:none; width:8px; height:8px; border-radius:3px 3px 0 3px; background:var(--c); }
.recursos p{ margin-top:8px; color:var(--tinta-2); font-size:.9688rem; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chips span{ font-size:.8125rem; font-weight:500; padding:6px 10px; border-radius:999px; background:var(--cs); color:var(--ct); }

.sofia{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(28px, 5vw, 64px); align-items:center; margin-top:clamp(48px, 6vw, 80px);
        padding:clamp(28px, 4vw, 52px); background:var(--atd-suave); border-radius:var(--casa); }
.sofia-fig{ position:relative; }
.sofia-fig .janela{ border-top:4px solid var(--atd); }
.sofia-fig img.pers{ position:absolute; right:-6%; bottom:-6%; width:38%; filter:drop-shadow(0 16px 24px rgba(17,24,39,.18)); }
.sofia h3{ font-size:clamp(1.8rem, 3vw, 2.6rem); margin:14px 0 14px; }
.sofia ul{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.sofia li{ display:flex; gap:12px; color:var(--tinta); }
.sofia li svg{ flex:none; width:20px; height:20px; color:var(--atd-txt); margin-top:2px; }
.pacotes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pacotes div{ background:var(--papel); border-radius:16px 16px 0 16px; padding:14px 16px; min-width:170px; }
.pacotes b{ font:700 1.375rem/1 var(--f-tit); letter-spacing:-.03em; display:block; font-variant-numeric:tabular-nums; }
.pacotes span{ font-size:.875rem; color:var(--tinta-2); }

/* planos: a calculadora */
.calc{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:20px; align-items:start; }
.calc-apps{ display:grid; gap:12px; }
.opcao{ --c:var(--verde); --cs:var(--verde-suave); display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:20px 22px;
        background:var(--papel); border:1.5px solid var(--linha); border-radius:var(--casa-p); cursor:pointer;
        transition:border-color var(--rapido), background-color var(--rapido); }
.opcao.crm{ --c:var(--crm); --cs:var(--crm-suave); } .opcao.atd{ --c:var(--atd); --cs:var(--atd-suave); }
.opcao.pj{ --c:var(--pj); --cs:var(--pj-suave); } .opcao.ag{ --c:var(--ag); --cs:var(--ag-suave); cursor:default; }
.opcao input{ position:absolute; opacity:0; pointer-events:none; }
.opcao .caixinha{ width:26px; height:26px; border-radius:9px 9px 0 9px; border:2px solid #cfd4de; display:grid; place-items:center; transition:all var(--rapido); }
.opcao .caixinha svg{ width:16px; height:16px; color:#fff; opacity:0; }
.opcao:has(input:checked){ border-color:var(--c); background:var(--cs); }
.opcao:has(input:checked) .caixinha{ background:var(--c); border-color:var(--c); }
.opcao:has(input:checked) .caixinha svg{ opacity:1; }
.opcao:has(input:focus-visible){ outline:3px solid var(--verde); outline-offset:3px; }
.opcao img{ height:24px; width:auto; }
.opcao small{ display:block; color:var(--tinta-2); font-size:.875rem; margin-top:6px; }
.opcao .v{ font:700 1.25rem/1 var(--f-tit); letter-spacing:-.02em; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.opcao .v small{ font:500 .8125rem/1 var(--f-txt); margin:0; display:inline; }

.conta{ position:sticky; top:104px; padding:28px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); box-shadow:var(--sombra-g); }
.chave{ display:grid; grid-template-columns:1fr 1fr; padding:5px; background:var(--parede); border-radius:16px 16px 0 16px; }
.chave button{ border:0; background:transparent; padding:11px 10px; border-radius:12px 12px 0 12px; font-weight:600; font-size:.9375rem; color:var(--tinta-2); cursor:pointer; }
.chave button[aria-pressed="true"]{ background:var(--papel); color:var(--tinta); box-shadow:var(--sombra); }
.conta-linhas{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; font-size:.9688rem; }
.conta-linhas li{ display:flex; justify-content:space-between; gap:12px; color:var(--tinta-2); }
.conta-linhas li b{ font-weight:600; color:var(--tinta); font-variant-numeric:tabular-nums; }
.conta-linhas li.desc b{ color:var(--verde-escuro); }
.conta-total{ margin-top:18px; padding-top:18px; border-top:1px solid var(--linha); }
.conta-total b{ display:block; font:700 clamp(2.6rem, 4vw, 3.4rem)/1 var(--f-tit); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.conta-total b small{ font:500 1rem/1 var(--f-txt); color:var(--tinta-2); letter-spacing:0; }
.conta-total p{ margin-top:10px; color:var(--tinta-2); font-size:.9375rem; }
.conta .btn{ width:100%; margin-top:22px; }
.conta .nota{ margin-top:12px; text-align:center; }
.niveis{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.niveis span{ font-size:.8125rem; font-weight:600; padding:6px 10px; border-radius:999px; background:var(--parede); color:var(--tinta-2); transition:all var(--base); }
.niveis span.on{ background:var(--verde-suave); color:var(--verde-escuro); }

.regras{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border-top:1px solid var(--linha); }
.regras div{ padding:28px 28px 28px 0; }
.regras div + div{ padding-left:28px; border-left:1px solid var(--linha); }
.regras b{ display:block; font:700 2.4rem/1 var(--f-tit); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.regras h3{ font-size:1.125rem; margin:14px 0 8px; letter-spacing:-.015em; }
.regras p{ color:var(--tinta-2); font-size:.9688rem; }

/* sobre */
.historia{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(36px, 6vw, 96px); align-items:start; }
.historia .fixo{ position:sticky; top:110px; }
.historia .texto{ display:grid; gap:22px; font-size:1.125rem; }
.historia .texto p{ max-width:60ch; }
.historia .texto p.grande{ font:600 clamp(1.5rem, 2.4vw, 2rem)/1.25 var(--f-tit); letter-spacing:-.025em; }
.viu{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.viu li{ padding:26px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); }
.viu li q{ quotes:none; display:block; font:600 1.25rem/1.3 var(--f-tit); letter-spacing:-.02em; }
.viu li p{ margin-top:10px; color:var(--tinta-2); font-size:.9688rem; }
.viu li p b{ color:var(--tinta); }
.socios{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.socio{ display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:center; padding:24px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); }
.socio .foto{ background:var(--verde-suave); border-radius:22px 22px 0 22px; aspect-ratio:1; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.socio .foto img{ width:92%; }
.socio h3{ font-size:1.5rem; }
.socio small{ display:block; margin-top:6px; color:var(--verde-escuro); font-weight:600; font-size:.875rem; }
.socio p{ margin-top:12px; color:var(--tinta-2); font-size:.9688rem; }

/* contato */
.contato{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:20px; align-items:start; }
.form{ padding:clamp(24px, 4vw, 40px); background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); box-shadow:var(--sombra); }
.form h2{ font-size:1.75rem; letter-spacing:-.025em; }
.form-corpo > p{ margin-top:8px; color:var(--tinta-2); }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.campo{ display:grid; gap:7px; }
.campo.largo{ grid-column:1 / -1; }
.campo label{ font-weight:600; font-size:.9375rem; }
.campo label span{ font-weight:400; color:var(--tinta-2); }
.campo input, .campo textarea, .campo select{ width:100%; min-height:50px; padding:12px 15px; border:1.5px solid var(--linha); border-radius:14px 14px 0 14px; background:var(--papel);
     transition:border-color var(--rapido), box-shadow var(--rapido); }
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(132,188,37,.2); }
.campo .erro{ display:none; color:#b42318; font-size:.875rem; }
.campo.invalido input, .campo.invalido textarea{ border-color:#e5484d; }
.campo.invalido .erro{ display:block; }
.mel{ position:absolute; left:-9999px; }
.form .btn{ margin-top:22px; }
.form .lgpd{ margin-top:14px; font-size:.8125rem; color:var(--tinta-2); }
.form-ok{ display:none; padding:28px; border-radius:var(--casa); background:var(--verde-suave); }
.form-ok h3{ font-size:1.5rem; }
.form-ok p{ margin-top:8px; color:var(--tinta-2); }
.form.enviado .form-corpo{ display:none; }
.form.enviado .form-ok{ display:block; }
.canais{ display:grid; gap:12px; }
.canal{ padding:24px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--casa); }
.canal small{ font:600 .8125rem/1 var(--f-txt); color:var(--tinta-2); }
.canal b, .canal a.grande{ display:block; margin-top:10px; font:600 1.375rem/1.25 var(--f-tit); letter-spacing:-.02em; text-decoration:none; }
.canal p{ margin-top:8px; color:var(--tinta-2); font-size:.9688rem; }
.canal.verde{ background:var(--verde-suave); border-color:var(--verde-borda); }
.canal .btn{ margin-top:16px; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.rodape{ background:var(--parede); padding:72px 0 32px; border-top:1px solid var(--linha); }
.rodape-grade{ display:grid; grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap:32px; }
.rodape-marca img{ height:30px; width:auto; }
.rodape-marca p{ margin-top:16px; color:var(--tinta-2); font-size:.9375rem; max-width:34ch; }
.rodape h2{ font:600 .875rem/1 var(--f-txt); letter-spacing:0; color:var(--tinta); margin-bottom:16px; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rodape ul a{ color:var(--tinta-2); text-decoration:none; font-size:.9375rem; }
.rodape ul a:hover{ color:var(--tinta); text-decoration:underline; }
.rodape-empresa{ margin-top:56px; padding-top:24px; border-top:1px solid #dfe3ea; font-size:.8125rem; color:var(--tinta-2); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }

/* marcador de pendência: só existe enquanto o Matteo não confirma o dado */
mark.confirmar{ background:#fff4d6; color:#7a4b00; border:1px dashed #e0a800; border-radius:6px; padding:1px 6px; font:600 .8125rem/1.4 var(--f-txt); }

/* barra fixa do celular */
.barra-cel{ display:none; }

/* =====================================================================
   REVELAÇÃO (uma vez; só com JS e com movimento)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .js [data-revela]{ opacity:0; transform:translateY(20px); transition:opacity var(--lento) var(--ease), transform var(--lento) var(--ease); transition-delay:var(--d, 0ms); }
  .js [data-revela].visto{ opacity:1; transform:none; }
  .js .linhas .l{ display:inline-block; vertical-align:top; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
  .js .linhas .l > span{ display:block; transform:translateY(105%); transition:transform 1000ms var(--ease); transition-delay:var(--d, 0ms); }
  .js .linhas.visto .l > span{ transform:none; }
  .relogio-hora .dp{ animation:pisca 2s steps(1) infinite; }
  .fim-hora .dp{ animation:pisca 2s steps(1) infinite; }
  @keyframes pisca{ 50%{ opacity:.25; } }
  .js .fluxo{ --fio:0; }
  .fluxo::after{ transition:transform 1400ms var(--ease-io); }
  .js .fluxo.visto{ --fio:1; }
}

/* =====================================================================
   CELULAR E TABLET
   ===================================================================== */
@media (max-width: 1020px){
  .menu, .topo-acoes{ display:none; }
  .abre-menu{ display:block; }
  .topo.aberto .menu{ display:grid; position:absolute; left:0; right:0; top:100%; background:var(--papel); padding:12px var(--margem) 20px; margin:0;
                      border-bottom:1px solid var(--linha); box-shadow:var(--sombra-g); }
  .topo.aberto .menu > a{ padding:14px 12px; font-size:1.0625rem; }
  .topo.aberto .menu .so-cel{ display:flex; gap:10px; margin-top:10px; }
  .topo.aberto .menu .so-cel .btn{ flex:1; }
  .hero-grade, .dia-grade, .quem, .fundador, .produto-vitrine, .calc, .historia, .contato, .sofia{ grid-template-columns:1fr; }
  .relogio{ left:12px; bottom:-28px; }
  .dia-fixo{ display:none; }   /* no celular cada passo já traz a hora e a tela dele */
  .passo, .passo:first-child{ min-height:0; padding-block:28px; }
  .passo-img{ display:block; margin-top:8px; }
  .passo-img .janela img{ aspect-ratio:16/10; }
  .fluxo{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .fluxo::before, .fluxo::after{ display:none; }
  .apps{ grid-template-columns:1fr; }
  .numeros{ grid-template-columns:1fr 1fr; }
  .perguntas{ grid-template-columns:1fr; }
  .recursos{ grid-template-columns:1fr 1fr; }
  .recursos > div, .recursos > div:not(:nth-child(3n+1)){ padding:22px 18px 22px 0; border-left:0; }
  .recursos > div:nth-child(2n){ padding-left:18px; border-left:1px solid var(--linha); }
  .produto-cabeca{ grid-template-columns:1fr; }
  .preco-tag{ text-align:left; }
  .conta, .historia .fixo{ position:static; }
  .regras{ grid-template-columns:1fr; }
  .regras div + div{ padding-left:0; border-left:0; border-top:1px solid var(--linha); }
  .viu, .socios{ grid-template-columns:1fr; }
  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .rodape-marca{ grid-column:1 / -1; }
  .atalhos{ top:79px; }
}
@media (max-width: 640px){
  body{ font-size:1rem; }
  .hero-acoes .btn, .fim-acoes .btn{ width:100%; }
  .tentativas li{ grid-template-columns:1fr; gap:8px; padding:22px; }
  .fluxo{ grid-template-columns:1fr; }
  .recursos{ grid-template-columns:1fr; }
  .recursos > div, .recursos > div:nth-child(2n){ padding:20px 0; border-left:0; }
  .campos{ grid-template-columns:1fr; }
  .socio{ grid-template-columns:96px 1fr; gap:16px; padding:18px; }
  .meses{ grid-template-columns:repeat(4, 1fr); }
  .relogio{ position:relative; left:auto; bottom:auto; width:auto; margin:-28px 12px 0; }
  .barra-cel{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:60; gap:10px; padding:10px; background:var(--papel);
              border:1px solid var(--linha); border-radius:20px 20px 0 20px; box-shadow:var(--sombra-g);
              transform:translateY(140%); transition:transform var(--base) var(--ease); }
  .barra-cel.mostra{ transform:none; }
  .barra-cel .btn{ flex:1; min-height:48px; }
  .barra-cel .btn-claro{ flex:0 0 auto; }
  .rodape{ padding-bottom:100px; }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto!important; }
  .dia-palco > *{ transition:none; }
}