/* =====================================================================
   SITE V2 DO PORTAL VNT (08/11/2026) · tokens e componentes
   Fonte da verdade: site-vnt-v2/_projeto/style-lock.md. Etapa 1: tudo parado (o movimento entra na etapa 3).
   ===================================================================== */
:root{
  --papel:#EDEFE7; --papel-claro:#F7F8F3; --papel-fundo:#E3E6DB;
  --tinta:#131829; --tinta-2:#4A5163; --tinta-3:#B8BDC9;
  --verde:#84BC25; --verde-texto:#4E7004; --verde-botao:#558003; --verde-fundo:#507A03;
  --agenda:#4C8DF6; --agenda-fundo:#2F6FDB; --agenda-texto:#2A63C7;
  --atend:#11C4AF; --atend-fundo:#0A7F72;
  --crm:#AF1010; --crm-fundo:#8C0A0A;
  --proj:#6E3FFF; --proj-fundo:#5226E0;
  --gota:var(--verde);
  --f-tit:'Plus Jakarta Sans', system-ui, sans-serif;
  --f-txt:'Instrument Sans', system-ui, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;
  --t-display:clamp(44px, 6.2vw, 92px);
  --t-h2:clamp(34px, 4.4vw, 64px);
  --t-h3:clamp(22px, 2vw, 28px);
  --t-preco:clamp(72px, 9vw, 140px);
  --margem:max(24px, 5vw);
  --largura:1240px;
  --secao:clamp(96px, 11vw, 160px);
  --casa:28px 28px 6px 28px;
  --casa-bt:14px 14px 3px 14px;
  --sombra:0 18px 36px rgba(19,24,41,.14);
  --vidro:radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 70%);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; }
body{ margin:0; background:var(--papel); color:var(--tinta); font:400 17px/1.55 var(--f-txt); overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-underline-offset:.18em; }
::selection{ background:var(--verde); color:#fff; }
:focus-visible{ outline:3px solid var(--verde-botao); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pular{ position:absolute; left:16px; top:-60px; z-index:50; background:var(--tinta); color:#fff; padding:10px 16px; border-radius:var(--casa-bt); }
.pular:focus{ top:12px; }
.caixa{ width:min(var(--largura), 100% - 2*var(--margem)); margin-inline:auto; }

/* ---------- tipografia ---------- */
h1,h2,h3{ font-family:var(--f-tit); font-weight:800; letter-spacing:-.045em; line-height:1.02; margin:0; text-wrap:balance; }
h1{ font-size:var(--t-display); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.03em; line-height:1.1; }
p{ margin:0; text-wrap:pretty; }
em.s, .s{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; font-size:1.1em; }
.apoio{ font-size:clamp(18px, 1.5vw, 21px); line-height:1.5; color:var(--tinta-2); max-width:56ch; }
.miudo{ font-size:14px; color:var(--tinta-2); }
/* a gota: o ponto final da marca (o "." continua no texto para o leitor de tela) */
.g{ display:inline-block; position:relative; width:.2em; height:.2em; margin-left:.05em; vertical-align:baseline; background:var(--gota);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,50 A50,50 0 0 1 50,0 A50,50 0 0 1 100,50 L100,100 L50,100 A50,50 0 0 1 0,50 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,50 A50,50 0 0 1 50,0 A50,50 0 0 1 100,50 L100,100 L50,100 A50,50 0 0 1 0,50 Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.g > span{ position:absolute; opacity:0; }
.sg{ white-space:nowrap; }   /* a última palavra e a gota não se separam na quebra de linha */

/* marcador visível de pendência (só na prévia) */
.confirmar{ display:inline-block; font:600 12px/1.3 var(--f-txt); letter-spacing:0; color:#7A4B00; background:#FFE9B0; border:1px dashed #C98B00;
  padding:3px 8px; border-radius:6px; vertical-align:middle; }

/* ---------- botões ---------- */
.bt{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:var(--casa-bt);
  font:600 16px/1 var(--f-txt); text-decoration:none; border:0; cursor:pointer; transition:transform .12s, background-color .16s, box-shadow .16s; }
.bt:active{ transform:scale(.97); }
.bt-verde{ background:var(--verde-botao); color:#fff; box-shadow:0 8px 20px rgba(85,128,3,.28); }
.bt-verde:hover{ background:var(--verde-fundo); }
.bt-linha{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1.5px rgba(19,24,41,.22); }
.bt-linha:hover{ box-shadow:inset 0 0 0 1.5px var(--tinta); }
.bt-branco{ background:#fff; color:var(--tinta); }
.bt svg{ width:20px; height:20px; flex:none; }
.botoes{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- topo ---------- */
.topo{ position:sticky; top:0; z-index:30; background:rgba(237,239,231,.86); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(19,24,41,.06); }
.topo .caixa{ display:flex; align-items:center; gap:28px; height:72px; }
.topo .logo img{ height:30px; width:auto; }
.menu{ display:flex; gap:26px; list-style:none; margin:0 0 0 12px; padding:0; font-weight:500; font-size:15.5px; }
.menu a{ text-decoration:none; }
.menu a:hover{ text-decoration:underline; }
.selo-breve{ font:600 11px/1 var(--f-txt); background:var(--papel-fundo); color:var(--tinta-2); padding:4px 7px; border-radius:999px; margin-left:6px; vertical-align:2px; }
.topo .acoes{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.topo .entrar{ font-weight:500; text-decoration:none; }
.topo .bt{ min-height:44px; padding:0 18px; font-size:15px; }
.apps-menu{ position:relative; }
.apps-menu > button{ font:inherit; background:none; border:0; padding:0; cursor:pointer; color:inherit; display:inline-flex; align-items:center; gap:6px; }
.menu-burger{ display:none; }

/* ---------- vidro: círculos dos apps ---------- */
.circ{ --c:rgba(76,141,246,.93); width:var(--d,96px); height:var(--d,96px); border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--vidro), var(--c); box-shadow:0 18px 36px rgba(19,24,41,.18), inset 0 2px 1px rgba(255,255,255,.6), inset 0 -10px 24px rgba(255,255,255,.10); }
.circ svg{ width:46%; height:46%; color:#fff; }
.c-agenda{ --c:rgba(76,141,246,.93); } .c-atend{ --c:rgba(17,196,175,.93); } .c-crm{ --c:rgba(175,16,16,.93); } .c-proj{ --c:rgba(110,63,255,.93); }

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero{ padding:clamp(40px, 6vw, 88px) 0 var(--secao); }
.hero .caixa{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 4vw, 64px); align-items:center; }
.hero h1{ font-size:clamp(44px, 5.4vw, 80px); max-width:9.5em; }
.hero .apoio{ margin:26px 0 30px; }
.hero .miudo{ margin-top:14px; }
.video{ margin:0; position:relative; aspect-ratio:16/9; border-radius:var(--casa); overflow:hidden; background:linear-gradient(180deg, #84BC25 0%, #507A03 46%, #507A03 100%); box-shadow:0 30px 70px rgba(19,24,41,.18); }
.video .padrao{ position:absolute; inset:0; opacity:.16; }
.video .padrao img{ width:100%; height:100%; object-fit:cover; }
.video .logo-v{ position:absolute; left:6.5%; top:8%; width:21%; }
.video .fileira{ position:absolute; left:8%; right:8%; top:50%; transform:translateY(-38%); display:flex; justify-content:space-between; }
.video .fileira figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; width:22%; }
.video .fileira .circ{ --d:clamp(64px, 8.4vw, 124px); }
.video .fileira figcaption{ color:#fff; font:600 clamp(12px, 1.15vw, 16px)/1 var(--f-txt); }

/* o vídeo do topo (pedido do Matteo, 08/11): toca sozinho e sem som; o botão do meio ativa o som e o vídeo recomeça */
.v-filme{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; background:#EDEFE7; }
html:not(.js) .som, html:not(.js) .pausa{ display:none; }
.video .sem-js-video{ position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%, -50%); }
.som{ position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%, -50%); display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--verde-fundo);
  font:600 17px/1 var(--f-txt); padding:16px 24px 16px 18px; border-radius:999px; border:0; cursor:pointer; box-shadow:0 14px 34px rgba(19,24,41,.25); transition:transform .12s, opacity .2s; }
.som:active{ transform:translate(-50%, -50%) scale(.97); }
.som svg{ width:24px; height:24px; }
.som .onda{ display:none; } .som[aria-pressed="true"] .onda{ display:inline; } .som[aria-pressed="true"] .x{ display:none; }
.som.com-som{ left:auto; top:auto; right:4%; bottom:5%; transform:none; padding:10px 14px; font-size:14px; box-shadow:0 8px 20px rgba(19,24,41,.2); }
.som.com-som:active{ transform:scale(.97); }
.pausa{ position:absolute; z-index:3; left:4%; bottom:5%; width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--verde-fundo); box-shadow:0 8px 20px rgba(19,24,41,.2); }
.pausa svg{ width:18px; height:18px; }
.pausa[hidden]{ display:none; }
.som{ white-space:nowrap; }
.pausa[aria-pressed="true"]{ background:var(--verde-fundo); color:#fff; box-shadow:0 0 0 2px #fff, 0 8px 20px rgba(19,24,41,.2); }
.video :focus-visible{ outline-color:#fff; }

/* =====================================================================
   2. A EMPRESA ESPALHADA
   ===================================================================== */
.espalhada{ padding-bottom:var(--secao); }
.espalhada .caixa{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:center; }
.espalhada h2{ max-width:8.5em; }
.espalhada .fecho{ margin-top:28px; font:400 clamp(24px, 2.2vw, 32px)/1.2 var(--f-serif); font-style:italic; color:var(--tinta-2); }
.pedacos{ position:relative; min-height:520px; }
.pedacos .centro{ position:absolute; left:50%; top:50%; width:150px; transform:translate(-50%, -50%); filter:drop-shadow(0 20px 30px rgba(80,122,3,.25)); }
.pedaco{ position:absolute; width:min(270px, 46%); background:var(--papel-claro); border-radius:18px; padding:16px; box-shadow:var(--sombra); }
.pedaco .rot{ display:block; font:600 13px/1.3 var(--f-txt); color:var(--tinta-2); margin-top:12px; }
.pedaco.p1{ left:0; top:0; transform:rotate(-4deg); }
.pedaco.p2{ right:0; top:24px; transform:rotate(3deg); }
.pedaco.p3{ left:4%; bottom:0; transform:rotate(2.5deg); }
.pedaco.p4{ right:2%; bottom:18px; transform:rotate(-3deg); }
.balao{ background:#fff; border-radius:12px 12px 12px 3px; padding:10px 12px; font-size:14.5px; box-shadow:0 1px 0 rgba(19,24,41,.06); }
.balao small{ display:block; text-align:right; color:var(--tinta-2); font-size:11.5px; margin-top:4px; }
.planilha{ display:grid; grid-template-columns:1.1fr 1.2fr .8fr; border:1px solid #CDD2C4; border-radius:6px; overflow:hidden; font-size:13px; background:#fff; }
.planilha span{ padding:6px 8px; border-right:1px solid #DDE1D4; border-bottom:1px solid #DDE1D4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.planilha span:nth-child(3n){ border-right:0; }
.planilha .cab{ background:#EEF1E8; font-weight:600; }
.planilha .vazio{ color:#C0392B; }
.papelzinho{ background:#FFF6C7; border-radius:4px; padding:14px 14px 18px; font:400 22px/1.15 var(--f-serif); font-style:italic; transform:rotate(-1deg); box-shadow:0 2px 0 rgba(0,0,0,.05); }
.grupo{ font-size:14px; }
.grupo b{ display:block; font-size:12.5px; color:var(--verde-texto); margin-bottom:4px; }

/* =====================================================================
   3. SIGA UM CLIENTE (telas REAIS do Vnt: _projeto/prints-reais/)
   ===================================================================== */
.siga{ padding-bottom:var(--secao); }
.siga .cab{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:end; margin-bottom:48px; }
.siga .cab .apoio{ max-width:46ch; }
.siga .nota{ margin-top:12px; }
.passos{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.passo{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(28px, 4vw, 56px); align-items:center; padding:clamp(28px, 3.4vw, 48px);
  border-radius:var(--casa); color:#fff; --gota:#fff; overflow:hidden; }
.passo.inv{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); }
.passo.inv .passo-txt{ order:2; }
.passo .app{ display:flex; align-items:center; gap:10px; font:600 15px/1.2 var(--f-txt); }
.passo .app .n{ width:30px; height:30px; display:grid; place-items:center; font-weight:700; background:rgba(0,0,0,.24); border-radius:50% 50% 3px 50%; }
.passo h3{ font-size:clamp(40px, 4.4vw, 64px); letter-spacing:-.05em; margin:14px 0 16px; }
.passo .passo-txt p:last-child{ font-size:17px; line-height:1.5; max-width:40ch; }
.print{ margin:0; border-radius:18px 18px 4px 18px; overflow:hidden; background:#fff; box-shadow:0 24px 50px rgba(19,24,41,.28); }
.print img, .print picture{ display:block; width:100%; height:auto; }
.passo.s1{ background:linear-gradient(110deg, var(--atend-fundo) 0%, var(--atend-fundo) 36%, var(--atend) 100%); }
.passo.s2{ background:linear-gradient(250deg, var(--crm-fundo) 0%, var(--crm-fundo) 36%, var(--crm) 100%); }
.passo.s3{ background:linear-gradient(110deg, var(--agenda-fundo) 0%, var(--agenda-fundo) 36%, var(--agenda) 100%); }
.passo.s4{ background:linear-gradient(250deg, var(--proj-fundo) 0%, var(--proj-fundo) 36%, var(--proj) 100%); }
.siga .fecho{ margin-top:36px; font:400 clamp(22px, 2vw, 28px)/1.2 var(--f-serif); font-style:italic; color:var(--tinta-2); }

/* =====================================================================
   4. OS QUATRO VERBOS (bento claro: a cor do app só como acento)
   ===================================================================== */
.verbos{ padding-bottom:var(--secao); }
.verbos .cab{ display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:40px; }
.verbos .cab .apoio{ max-width:30ch; }
.bento{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:18px; }
.bloco{ position:relative; overflow:hidden; border-radius:var(--casa); background:var(--papel-claro); border:1px solid rgba(19,24,41,.07);
  box-shadow:0 1px 0 #fff inset, 0 10px 30px rgba(19,24,41,.05); padding:clamp(26px, 2.8vw, 40px); display:flex; flex-direction:column; justify-content:flex-end; }
.bloco::before{ content:""; position:absolute; left:0; top:0; right:0; height:5px; background:var(--cor); }
.bloco > *{ position:relative; z-index:1; }
/* a placa de vidro do app, inteira, como um ícone (a imagem já vem no quadrado da cor do app) */
.bloco > .placa-ic{ width:clamp(84px, 7vw, 104px); height:auto; border-radius:24px 24px 6px 24px; margin-bottom:auto; box-shadow:0 14px 30px rgba(19,24,41,.14); }
.bloco > .placa-ic + .app{ margin-top:32px; }
.bloco .app{ display:flex; align-items:center; gap:9px; font:600 15px/1.2 var(--f-txt); color:var(--tinta-2); margin:0; }
.bloco .app i{ width:12px; height:12px; background:var(--cor); border-radius:50% 50% 0 50%; flex:none; }
.bloco h3{ --gota:var(--cor); font-size:clamp(44px, 4.6vw, 68px); letter-spacing:-.05em; margin:10px 0 12px; }
.bloco .bio{ font-size:17px; line-height:1.5; color:var(--tinta-2); max-width:40ch; }
.bloco ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; font-size:15.5px; }
.bloco li{ display:flex; gap:10px; align-items:flex-start; }
.bloco li svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--cor-txt); }
.bloco .ir{ display:inline-block; margin-top:22px; font-weight:600; font-size:15.5px; align-self:flex-start; color:var(--cor-txt); }
.a-atend{ --cor:var(--atend); --cor-txt:var(--atend-fundo); } .a-crm{ --cor:var(--crm); --cor-txt:var(--crm); }
.a-agenda{ --cor:var(--agenda); --cor-txt:var(--agenda-texto); } .a-proj{ --cor:var(--proj); --cor-txt:var(--proj-fundo); }
.b-1{ grid-column:span 7; grid-row:span 2; min-height:560px; } .b-1 > .placa-ic{ width:clamp(180px, 18vw, 260px); }
.b-2, .b-3{ grid-column:span 5; min-height:270px; }
.b-4{ grid-column:span 12; min-height:280px; flex-direction:row; align-items:center; justify-content:space-between; gap:32px; } .b-4 .conteudo{ max-width:640px; } .b-4 ul{ grid-template-columns:1fr 1fr; } .b-4 > .placa-ic{ order:2; margin:0 4% 0 0; width:clamp(120px, 12vw, 170px); }
.gratis{ display:inline-block; margin-left:6px; background:var(--agenda-texto); color:#fff; font:700 12.5px/1 var(--f-txt); padding:6px 10px; border-radius:999px; }

/* =====================================================================
   5. VNT SALES (papel + rosetas bem calmas; cartão de vidro claro)
   ===================================================================== */
.sales{ position:relative; overflow:hidden; padding:var(--secao) 0; background:var(--papel-fundo); }
.sales .padrao{ position:absolute; inset:0 0 0 46%; background:url("../svg/multi-rosetas-papel.svg") center/560px auto repeat; opacity:.12; }
.sales .padrao::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--papel-fundo) 0%, rgba(227,230,219,0) 34%); }
.sales .caixa{ position:relative; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.sales h2 .s{ color:var(--verde-texto); }
.sales .apoio{ margin-top:24px; }
.gotas-juntas{ position:relative; height:240px; margin-top:44px; }
.gotas-juntas img{ position:absolute; filter:drop-shadow(0 16px 26px rgba(19,24,41,.18)); }
.gotas-juntas .gv{ width:170px; left:120px; top:40px; }
.gotas-juntas .ga{ width:70px; left:0; top:8px; } .gotas-juntas .gt{ width:62px; left:330px; top:0; }
.gotas-juntas .gc{ width:66px; left:20px; top:160px; } .gotas-juntas .gp{ width:58px; left:320px; top:170px; }
.preco-card{ position:relative; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9); border-radius:var(--casa);
  padding:clamp(28px, 3vw, 44px); box-shadow:0 30px 60px rgba(19,24,41,.10), inset 0 1px 0 #fff; backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); }
.preco-card .de{ color:var(--tinta-2); font-size:17px; }
.preco-card .de s{ text-decoration-thickness:2px; }
.preco-card .valor{ display:flex; align-items:baseline; gap:10px; margin:6px 0 4px; font-variant-numeric:tabular-nums; }
.preco-card .valor b{ font:800 var(--t-preco)/.9 var(--f-tit); letter-spacing:-.05em; }
.preco-card .valor small{ font-size:20px; color:var(--tinta-2); }
.preco-card ul{ list-style:none; margin:22px 0 30px; padding:0; display:grid; gap:11px; font-size:16.5px; }
.preco-card li{ display:flex; gap:11px; align-items:center; }
.gotinha{ display:inline-block; width:13px; height:13px; flex:none; background:var(--c); border-radius:50% 50% 0 50%; }
.preco-card .miudo{ margin-top:12px; }
.preco-card .ver{ display:inline-block; margin-top:18px; font-weight:500; }

/* =====================================================================
   6. PARA QUEM É  ·  7. QUEM FAZ
   ===================================================================== */
.para-quem{ padding:var(--secao) 0; }
.para-quem h2{ max-width:13em; }
.capsulas{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:12px; max-width:1060px; }
.capsulas li{ display:inline-flex; align-items:center; gap:10px; background:var(--papel-claro); border:1px solid rgba(19,24,41,.08); border-radius:999px;
  padding:14px 22px 14px 16px; font:500 clamp(17px, 1.6vw, 21px)/1 var(--f-txt); box-shadow:0 6px 14px rgba(19,24,41,.05), inset 0 1px 0 #fff; }
.capsulas li i{ width:14px; height:14px; flex:none; background:var(--c, var(--verde)); border-radius:50% 50% 0 50%; }
.para-quem .linha{ margin-top:34px; max-width:58ch; color:var(--tinta-2); font-size:18px; }
.quem-faz{ padding-bottom:var(--secao); }
.quem-faz .caixa{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:64px; align-items:start; border-top:1px solid rgba(19,24,41,.12); padding-top:64px; }
.quem-faz .apoio{ margin-top:22px; }
.quem-faz .ir{ display:inline-block; margin-top:22px; font-weight:600; color:var(--verde-texto); }
.numeros{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.numeros li{ display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:baseline; padding:18px 0; border-bottom:1px solid rgba(19,24,41,.12); }
.numeros b{ font:800 clamp(48px, 5vw, 72px)/1 var(--f-tit); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.numeros span{ color:var(--tinta-2); font-size:17px; }
.numeros + .fonte{ display:block; margin-top:12px; }

/* =====================================================================
   8. FRANQUIA (faixa verde)
   ===================================================================== */
.franquia{ position:relative; overflow:hidden; color:#fff; --gota:#fff; background:var(--verde-fundo); }
.franquia .padrao{ position:absolute; inset:0 0 auto 0; height:70%; background:url("../svg/marca-gotas-cor.svg") center/640px auto repeat; }
.franquia .padrao::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(80,122,3,0) 0%, rgba(80,122,3,.6) 45%, var(--verde-fundo) 100%); }
.franquia :focus-visible, .passo :focus-visible{ outline-color:#fff; }
.franquia .caixa{ position:relative; padding:clamp(200px, 22vw, 300px) 0 clamp(72px, 8vw, 112px); display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:48px; align-items:end; }
.franquia .apoio{ color:#fff; margin-top:20px; max-width:46ch; }
.franquia .bt-branco{ color:var(--verde-fundo); justify-self:start; }

/* =====================================================================
   9. PERGUNTAS
   ===================================================================== */
.perguntas{ padding:var(--secao) 0; }
.perguntas .caixa{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; align-items:start; }
.perguntas h2{ position:sticky; top:110px; max-width:8em; }
.faq{ display:grid; gap:12px; }
.faq details{ background:var(--papel-claro); border-radius:22px 22px 5px 22px; border:1px solid rgba(19,24,41,.07); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 60px 22px 24px; font:600 18.5px/1.35 var(--f-txt); position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:24px; top:50%; width:12px; height:12px; border-right:2px solid var(--tinta); border-bottom:2px solid var(--tinta); transform:translateY(-70%) rotate(45deg); transition:transform .22s; }
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .resp{ padding:0 24px 22px; color:var(--tinta-2); max-width:62ch; }

/* =====================================================================
   10. FIM
   ===================================================================== */
.fim{ padding:var(--secao) 0 calc(var(--secao) + 20px); text-align:center; position:relative; }
.fim .gotas-fim{ position:relative; width:280px; height:200px; margin:0 auto 26px; }
.fim .gotas-fim img{ position:absolute; filter:drop-shadow(0 18px 26px rgba(19,24,41,.18)); }
.fim .gotas-fim .gv{ width:150px; left:65px; top:20px; }
.fim .gotas-fim .ga{ width:46px; left:20px; top:0; } .fim .gotas-fim .gt{ width:42px; right:24px; top:6px; }
.fim .gotas-fim .gc{ width:44px; left:10px; top:130px; } .fim .gotas-fim .gp{ width:40px; right:14px; top:136px; }
.fim h2{ font-size:var(--t-display); max-width:10em; margin:0 auto; }
.fim .apoio{ margin:22px auto 34px; }
.fim .botoes{ justify-content:center; }

/* ---------- rodapé ---------- */
.rodape{ background:var(--papel-fundo); padding:72px 0 40px; font-size:15px; }
.rodape .grade{ display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:32px; }
.rodape .marca img{ height:28px; width:auto; }
.rodape .marca p{ margin-top:14px; color:var(--tinta-2); max-width:24ch; }
.rodape .rod-tit{ margin:0 0 12px; font:600 14px/1.2 var(--f-txt); letter-spacing:0; color:var(--tinta-2); }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.rodape a{ text-decoration:none; white-space:nowrap; } .rodape a:hover{ text-decoration:underline; }
.rodape .legal{ margin-top:52px; padding-top:22px; border-top:1px solid rgba(19,24,41,.12); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; color:var(--tinta-2); font-size:13.5px; }

/* ---------- barra fixa do celular ---------- */
.barra-cel{ display:none; }
.zap{ width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--sombra); color:var(--verde-fundo); flex:none; }
.zap svg{ width:24px; height:24px; }

/* =====================================================================
   CELULAR (composição própria)
   ===================================================================== */
@media (max-width: 980px){
  .menu, .topo .entrar, .topo .acoes .bt{ display:none; }
  .menu-burger{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px 12px 3px 12px; border:1px solid rgba(19,24,41,.15); background:transparent; margin-left:auto; }
  .menu-burger span, .menu-burger span::before, .menu-burger span::after{ display:block; width:18px; height:2px; background:var(--tinta); position:relative; content:""; }
  .menu-burger span::before{ position:absolute; top:-6px; } .menu-burger span::after{ position:absolute; top:6px; }
  .topo .caixa{ height:64px; }
  .topo .logo img{ height:26px; }
  .hero .caixa, .espalhada .caixa, .siga .cab, .sales .caixa, .quem-faz .caixa, .perguntas .caixa, .franquia .caixa{ grid-template-columns:minmax(0, 1fr); }
  .hero{ padding-top:36px; }
  .hero .apoio{ margin:20px 0 26px; }
  .hero .botoes .bt{ flex:1 1 100%; }
  .video{ aspect-ratio:1/1; margin-top:8px; }
  .video .logo-v{ width:34%; }
  .video .fileira{ top:56%; transform:translateY(-50%); flex-wrap:wrap; row-gap:22px; }
  .video .fileira figure{ width:48%; }
  .video .fileira .circ{ --d:clamp(64px, 20vw, 96px); }
  .video .fileira figcaption{ font-size:14px; }
  .video .logo-v{ top:7%; }
  .pedacos{ min-height:auto; display:grid; gap:14px; padding-top:8px; }
  .pedacos .centro{ position:relative; left:auto; top:auto; transform:none; width:110px; margin:8px auto 0; order:5; }
  .pedaco{ position:relative; width:auto; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; }
  .passo, .passo.inv{ grid-template-columns:minmax(0, 1fr); padding:24px 20px 20px; }
  .passo.inv .passo-txt{ order:0; }
  .passo.s1, .passo.s3{ background:linear-gradient(180deg, var(--s-fundo) 0%, var(--s-fundo) 50%, var(--s-cor) 100%); }
  .passo.s2, .passo.s4{ background:linear-gradient(180deg, var(--s-fundo) 0%, var(--s-fundo) 50%, var(--s-cor) 100%); }
  .passo.s1{ --s-fundo:var(--atend-fundo); --s-cor:var(--atend); } .passo.s2{ --s-fundo:var(--crm-fundo); --s-cor:var(--crm); }
  .passo.s3{ --s-fundo:var(--agenda-fundo); --s-cor:var(--agenda); } .passo.s4{ --s-fundo:var(--proj-fundo); --s-cor:var(--proj); }
  .verbos .cab{ display:block; } .verbos .cab .apoio{ margin-top:16px; }
  .bento{ grid-template-columns:minmax(0, 1fr); }
  .bloco{ grid-column:auto !important; grid-row:auto !important; min-height:0; }
  .b-4{ flex-direction:column; align-items:flex-start; } .b-4 > .placa-ic{ order:0; margin:0 0 4px; width:96px; }
  .b-4 ul{ grid-template-columns:1fr; }
  .gotas-juntas{ height:200px; transform:scale(.82); transform-origin:left top; }
  .numeros li{ grid-template-columns:minmax(110px, auto) 1fr; }
  .perguntas h2{ position:static; }
  .franquia .caixa{ padding-top:180px; }
  .rodape .grade{ grid-template-columns:1fr 1fr; }
  .rodape .marca{ grid-column:1 / -1; }
  body{ padding-bottom:84px; }
  .barra-cel{ display:flex; gap:10px; align-items:center; position:fixed; z-index:40; left:0; right:0; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(237,239,231,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(19,24,41,.08);
    visibility:hidden; transform:translateY(110%); transition:transform .25s, visibility 0s .25s; }
  body.mostra-barra .barra-cel, html:not(.js) .barra-cel{ visibility:visible; transform:none; transition:transform .25s; }
  body.menu-aberto .barra-cel{ visibility:hidden; transform:translateY(110%); }
  .franquia .padrao{ height:200px; }
  .franquia .padrao::after{ background:linear-gradient(180deg, rgba(80,122,3,.1) 0%, var(--verde-fundo) 100%); }
  .sales .padrao{ inset:auto 0 0 0; height:42%; }
  .sales .padrao::after{ background:linear-gradient(180deg, var(--papel-fundo) 0%, rgba(227,230,219,0) 100%); }
  .b-1 > .placa-ic{ width:140px; }
  .barra-cel .bt{ flex:1; }
}
/* =====================================================================
   ETAPA 2 · MENUS (Apps no computador, menu do celular)
   ===================================================================== */
.apps-menu > button[aria-expanded="true"] svg{ transform:rotate(180deg); }
.apps-menu > button svg{ transition:transform .16s; }
.painel-apps{ position:absolute; left:-24px; top:calc(100% + 18px); width:420px; padding:10px; display:grid; gap:4px; background:rgba(255,255,255,.92);
  border:1px solid rgba(19,24,41,.08); border-radius:22px 22px 5px 22px; box-shadow:0 24px 60px rgba(19,24,41,.16); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.painel-apps[hidden]{ display:none; }
.painel-apps a{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:16px 16px 4px 16px; text-decoration:none !important; }
.painel-apps a:hover, .painel-apps a:focus-visible{ background:var(--papel); }
.painel-apps .circ{ --d:48px; box-shadow:0 8px 16px rgba(19,24,41,.14), inset 0 2px 1px rgba(255,255,255,.6); }
.painel-apps b{ display:block; font-size:15.5px; }
.painel-apps small{ display:block; color:var(--tinta-2); font-size:13.5px; --gota:var(--tinta-2); }
.menu-cel[hidden]{ display:none; }
.menu-cel{ display:grid; align-content:start; gap:10px; padding:16px var(--margem) 24px; border-top:1px solid rgba(19,24,41,.08); background:var(--papel); height:calc(100vh - 64px); height:calc(100dvh - 64px); overflow:auto; overscroll-behavior:contain; }
@media (min-width: 981px){ .menu-cel{ display:none !important; } }
.mc-app{ display:flex; align-items:center; gap:14px; padding:8px 4px; font:600 18px/1.2 var(--f-txt); text-decoration:none; }
.mc-app .circ{ --d:44px; }
.mc-links{ display:grid; gap:2px; margin:6px 0 8px; padding-top:10px; border-top:1px solid rgba(19,24,41,.08); }
.mc-links a{ padding:11px 4px; font-size:17px; text-decoration:none; }

/* =====================================================================
   ETAPA 2 · FORMULÁRIO DE INTERESSE (estados: enviando, sucesso, erro)
   ===================================================================== */
.form-lead{ background:#fff; border:1px solid rgba(19,24,41,.08); border-radius:var(--casa); padding:clamp(24px, 3vw, 36px); box-shadow:0 24px 60px rgba(19,24,41,.08); }
.form-tit{ font-size:clamp(26px, 2.4vw, 34px); margin-bottom:8px; }
.form-sub{ color:var(--tinta-2); margin-bottom:6px; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin:18px 0 14px; }
.campo{ display:grid; gap:6px; }
.campo-largo{ grid-column:1 / -1; }
.campo label{ font:600 14px/1.2 var(--f-txt); }
.campo label small{ font-weight:400; color:var(--tinta-2); }
.campo input, .campo textarea{ font:400 16px/1.4 var(--f-txt); color:var(--tinta); background:var(--papel-claro); border:1.5px solid #D6DACE; border-radius:12px 12px 3px 12px; padding:13px 14px; width:100%; }
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--verde-botao); box-shadow:0 0 0 3px rgba(85,128,3,.15); background:#fff; }
.campo [aria-invalid="true"]{ border-color:#B4322F; }
.erro-campo{ color:#B4322F; font-size:13.5px; margin:0; }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.aceite{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--tinta-2); margin:4px 0 6px; cursor:pointer; }
.aceite input{ width:18px; height:18px; margin-top:2px; accent-color:var(--verde-botao); flex:none; }
.erro-aceite{ margin:-2px 0 8px 28px; }
.form-lead .sem-js{ width:100%; margin-top:10px; }
.form-lead > .bt{ width:100%; margin-top:10px; }
.form-lead .lgpd{ font-size:13px; color:var(--tinta-2); margin-top:12px; }
.form-lead .estado{ font-size:14.5px; margin-top:10px; min-height:1px; }
.form-lead .estado.erro{ color:#B4322F; font-weight:500; }
.form-lead.enviando > .bt{ opacity:.7; pointer-events:none; }
.form-lead.enviado > :not(.sucesso){ display:none; }
.sucesso{ outline:none; }
.sucesso .suc-tit{ font:800 clamp(30px, 3vw, 42px)/1 var(--f-tit); letter-spacing:-.045em; margin-bottom:12px; }
.sucesso p{ color:var(--tinta-2); margin-bottom:22px; }

/* =====================================================================
   ETAPA 2 · LANDING PAGE DE APP (hero na cor do app; a cor só na página do app)
   ===================================================================== */
.pg-agenda{ --ac:var(--agenda); --ac-fundo:var(--agenda-fundo); --ac-claro:#E4EEFF; }
.pg-atendimento{ --ac:var(--atend); --ac-fundo:var(--atend-fundo); --ac-claro:#DDF6F2; }
.pg-crm{ --ac:var(--crm); --ac-fundo:var(--crm-fundo); --ac-claro:#F8E3E3; }
.pg-projetos{ --ac:var(--proj); --ac-fundo:var(--proj-fundo); --ac-claro:#ECE6FF; }
.lp-hero{ position:relative; overflow:hidden; color:#fff; --gota:#fff; background:var(--ac-fundo); padding:clamp(56px, 7vw, 96px) 0 0; }
.lp-hero .padrao{ position:absolute; left:0; right:0; top:0; height:78%; background-size:cover; background-repeat:no-repeat; background-position:right center; opacity:.9; }
.lp-hero .padrao::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--ac-fundo) 92%), linear-gradient(90deg, var(--ac-fundo) 0%, var(--ac-fundo) 42%, rgba(0,0,0,0) 82%); }
.lp-hero :focus-visible, .fr-hero :focus-visible{ outline-color:#fff; }
.fr-hero .form-lead :focus-visible{ outline-color:var(--verde-botao); }
.lp-hero .caixa{ position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 4vw, 64px); align-items:end; }
.lp-hero .texto{ padding-bottom:clamp(48px, 6vw, 88px); }
.lp-hero .marca-app{ display:flex; align-items:center; gap:12px; font:600 17px/1 var(--f-txt); }
.lp-hero .marca-app .circ{ --d:52px; --c:rgba(255,255,255,.16); box-shadow:inset 0 2px 1px rgba(255,255,255,.5); }
.lp-hero h1{ font-size:clamp(60px, 7.6vw, 116px); white-space:nowrap; letter-spacing:-.055em; margin:18px 0 18px; }
.lp-hero .bio{ font-size:clamp(18px, 1.6vw, 21px); line-height:1.45; max-width:30ch; }
.lp-hero .preco-chip{ display:inline-flex; align-items:baseline; gap:8px; margin:24px 0 26px; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.3); padding:10px 16px; border-radius:999px; font-weight:500; }
.lp-hero .preco-chip b{ font:800 22px/1 var(--f-tit); letter-spacing:-.03em; }
.lp-hero .bt-branco{ color:var(--ac-fundo); }
.bt-vidro{ background:rgba(0,0,0,.2); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7); }
.bt-vidro:hover{ background:rgba(0,0,0,.3); }
.lp-hero .print{ align-self:end; border-radius:18px 18px 0 0; box-shadow:0 -10px 60px rgba(0,0,0,.25); }
.lp-sec{ padding:var(--secao) 0 0; }
.lp-sec:last-of-type{ padding-bottom:var(--secao); }
.lp-sec h2{ --gota:var(--ac, var(--verde)); max-width:16em; }
.lp-sec .apoio{ margin-top:18px; }
/* a dor do dia: situações comuns, grandes */
.dor{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:start; }
.dor ul{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.dor li{ font:400 clamp(24px, 2.4vw, 34px)/1.2 var(--f-serif); font-style:italic; padding:18px 0; border-bottom:1px solid rgba(19,24,41,.12); }
.dor li:first-child{ padding-top:4px; }
/* funções: cartões claros com o ícone da função na cor do app */
.funcoes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:44px; }
.funcao{ background:var(--papel-claro); border:1px solid rgba(19,24,41,.06); border-radius:22px 22px 5px 22px; padding:24px; }
.funcao svg{ width:30px; height:30px; color:var(--ac-fundo); margin-bottom:14px; }
.funcao h3{ font-size:21px; letter-spacing:-.025em; margin-bottom:8px; }
.funcao p{ color:var(--tinta-2); font-size:15.5px; line-height:1.5; }
.funcao.destaque{ grid-column:span 2; background:var(--ac-claro); border-color:transparent; }
/* uma função com o print real ao lado */
.vitrine{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(28px, 4vw, 56px); align-items:center; margin-top:56px; }
.vitrine.inv{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); }
.vitrine.inv .vt-texto{ order:2; }
.vitrine h3{ font-size:clamp(28px, 2.6vw, 38px); letter-spacing:-.04em; margin-bottom:12px; --gota:var(--ac, var(--verde)); }
.vitrine p{ color:var(--tinta-2); }
.vitrine ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.vitrine li{ display:flex; gap:10px; }
.vitrine li svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--ac-fundo); }
.print-moldura{ margin:0; border-radius:18px 18px 4px 18px; overflow:hidden; background:#fff; border:1px solid rgba(19,24,41,.08); box-shadow:0 24px 60px rgba(19,24,41,.12); }
.print-moldura img{ width:100%; height:auto; display:block; }
/* Atendimento: as funções como balões de conversa (um recurso de texto, não uma tela) */
.conversa{ display:grid; gap:12px; margin-top:44px; max-width:880px; }
.balao-f{ max-width:640px; background:var(--papel-claro); border:1px solid rgba(19,24,41,.06); border-radius:22px 22px 22px 6px; padding:16px 20px; }
.balao-f:nth-child(even){ justify-self:end; background:var(--ac-claro); border-radius:22px 22px 6px 22px; }
.balao-f b{ display:block; font-size:16.5px; margin-bottom:4px; }
.balao-f span{ color:var(--tinta-2); font-size:15.5px; }
/* CRM: as funções ao longo do funil em setas */
.funil{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; margin-top:44px; }
.etapa-f .seta{ height:58px; display:flex; align-items:center; padding-left:22px; color:#fff; font:700 15px/1.15 var(--f-txt);
  background:var(--ac); clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); }
.etapa-f:first-child .seta{ clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); border-radius:12px 0 0 12px; }
.etapa-f:nth-child(2) .seta{ background:#9A0E0E; } .etapa-f:nth-child(3) .seta{ background:#8C0A0A; } .etapa-f:nth-child(4) .seta{ background:#7A0909; } .etapa-f:nth-child(5) .seta{ background:#650707; }
.etapa-f h3{ font-size:19px; letter-spacing:-.02em; margin:18px 6px 8px 4px; }
.etapa-f p{ color:var(--tinta-2); font-size:15px; line-height:1.5; margin:0 6px 0 4px; }
/* Projetos: o mural das 18 ferramentas */
.mural{ list-style:none; margin:44px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.mural li{ background:var(--papel-claro); border:1px solid rgba(19,24,41,.08); border-radius:999px; padding:12px 18px; font:500 clamp(16px, 1.4vw, 19px)/1 var(--f-txt); }
.mural li.grande{ background:var(--ac-fundo); color:#fff; border-color:transparent; font-weight:600; }
/* conversa com os outros apps */
.liga{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 40px; margin-top:40px; }
.liga a{ display:flex; gap:16px; align-items:flex-start; text-decoration:none; padding:24px 0 0; border-top:2px solid rgba(19,24,41,.12); }
.liga a:hover b{ text-decoration:underline; }
.liga .circ{ --d:52px; }
.liga b{ display:block; font-size:17px; margin-bottom:6px; }
.liga span span{ color:var(--tinta-2); font-size:15px; display:block; }
/* preço do app */
.preco-app{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:40px; align-items:center; background:var(--papel-claro); border:1px solid rgba(19,24,41,.07); border-radius:var(--casa); padding:clamp(28px, 4vw, 56px); }
.preco-app .valor{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; font:800 clamp(64px, 8vw, 120px)/.9 var(--f-tit); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.preco-app .valor small{ font:500 20px/1 var(--f-txt); color:var(--tinta-2); letter-spacing:0; white-space:nowrap; }
.preco-app .ou{ margin-top:14px; color:var(--tinta-2); font-size:17px; }
.preco-app .ou a{ color:var(--verde-texto); font-weight:600; }
.preco-app .botoes{ justify-content:flex-start; }
/* formulário do app: texto ao lado */
.lp-form{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 4vw, 64px); align-items:start; }
.lp-form .lado h2{ --gota:var(--ac, var(--verde)); }
.lp-form .lado .zap-bt{ margin-top:26px; }
.faq-lp{ max-width:860px; margin-top:36px; }

/* =====================================================================
   ETAPA 2 · PLANOS / VNT SALES
   ===================================================================== */
.pl-hero{ position:relative; overflow:hidden; padding:clamp(56px, 7vw, 100px) 0 var(--secao); background:var(--papel-fundo); }
.pl-hero .padrao{ position:absolute; inset:0 0 0 46%; background:url("../svg/multi-rosetas-papel.svg") center/560px auto repeat; opacity:.14; }
.pl-hero .padrao::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--papel-fundo) 0%, rgba(227,230,219,0) 34%); }
.pl-hero .caixa{ position:relative; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.pl-hero h1{ font-size:clamp(48px, 6vw, 88px); }
.pl-hero h1 .s{ color:var(--verde-texto); }
.pl-hero .apoio{ margin:22px 0 30px; }
.quatro{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:44px; }
.quatro article{ background:var(--papel-claro); border:1px solid rgba(19,24,41,.06); border-radius:22px 22px 5px 22px; padding:24px; border-top:5px solid var(--cor); }
.quatro .circ{ --d:52px; margin-bottom:16px; }
.quatro h3{ font-size:22px; margin-bottom:12px; }
.quatro ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:15px; color:var(--tinta-2); }
.quatro li{ display:flex; gap:8px; } .quatro li svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--cor-txt); }
.tabela-precos{ width:100%; border-collapse:collapse; margin-top:36px; font-size:17px; }
.tabela-precos th, .tabela-precos td{ text-align:left; padding:16px 12px; border-bottom:1px solid rgba(19,24,41,.1); }
.tabela-precos td:last-child, .tabela-precos th:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabela-precos .app-cel{ display:flex; align-items:center; gap:12px; font-weight:600; }
.tabela-precos .app-cel i{ width:14px; height:14px; border-radius:50% 50% 0 50%; background:var(--c); }
.tabela-precos tfoot td{ font-weight:600; border-bottom:0; }
.extras{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
.extras article{ background:var(--papel-claro); border:1px solid rgba(19,24,41,.06); border-radius:22px 22px 5px 22px; padding:26px; }
.extras h3{ font-size:22px; margin-bottom:8px; }
.extras p{ color:var(--tinta-2); }

/* =====================================================================
   ETAPA 2 · PÁGINAS SIMPLES (Franquia, Sobre, Contato)
   ===================================================================== */
.pg-hero{ padding:clamp(56px, 7vw, 100px) 0 0; }
.pg-hero h1{ font-size:clamp(48px, 6.4vw, 96px); max-width:11em; }
.pg-hero .apoio{ margin-top:22px; }
.fr-hero{ position:relative; overflow:hidden; color:#fff; --gota:#fff; background:var(--verde-fundo); padding:clamp(56px, 7vw, 100px) 0 var(--secao); }
.fr-hero .padrao{ position:absolute; left:0; right:0; top:0; height:70%; background:url("../svg/marca-gotas-cor.svg") center/640px auto repeat; }
.fr-hero .padrao::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(80,122,3,.1) 0%, rgba(80,122,3,.55) 40%, var(--verde-fundo) 100%), linear-gradient(90deg, var(--verde-fundo) 0%, rgba(80,122,3,.9) 45%, rgba(80,122,3,0) 100%); }
.fr-hero .caixa{ position:relative; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(32px, 4vw, 64px); align-items:center; }
.fr-hero h1{ font-size:clamp(52px, 7vw, 104px); }
.fr-hero .apoio{ color:#fff; margin-top:22px; max-width:34ch; }
.fr-hero .form-lead{ color:var(--tinta); --gota:var(--verde); }
.blocos-texto{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:start; }
.blocos-texto + .blocos-texto{ margin-top:clamp(64px, 7vw, 110px); padding-top:clamp(48px, 5vw, 72px); border-top:1px solid rgba(19,24,41,.12); }
.blocos-texto p{ color:var(--tinta-2); font-size:18px; max-width:58ch; }
.blocos-texto p + p{ margin-top:14px; }
.dados{ list-style:none; margin:0; padding:0; display:grid; gap:0; font-size:17px; }
.dados li{ display:grid; grid-template-columns:150px minmax(0, 1fr); gap:16px; padding:14px 0; border-bottom:1px solid rgba(19,24,41,.1); }
.dados li:first-child{ padding-top:0; }
.contato-zap{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(32px, 4vw, 64px); align-items:start; margin-top:44px; }
.cartao-zap{ background:var(--papel-claro); border:1px solid rgba(19,24,41,.07); border-radius:var(--casa); padding:clamp(26px, 3vw, 40px); }
.cartao-zap .num{ font:800 clamp(36px, 3.6vw, 52px)/1 var(--f-tit); letter-spacing:-.04em; margin:10px 0 14px; display:block; text-decoration:none; }
.cartao-zap p{ color:var(--tinta-2); }
.cartao-zap .bt{ margin-top:20px; }
.cartao-zap + .cartao-zap{ margin-top:16px; }

@media (max-width: 980px){
  .painel-apps{ display:none !important; }
  .lp-hero .caixa, .dor, .vitrine, .vitrine.inv, .lp-form, .preco-app, .pl-hero .caixa, .fr-hero .caixa, .blocos-texto, .contato-zap{ grid-template-columns:minmax(0, 1fr); }
  .vitrine.inv .vt-texto{ order:0; }
  .lp-hero .texto{ padding-bottom:8px; }
  .lp-hero .padrao{ top:auto; bottom:0; height:52%; background-position:center top; }
  .lp-hero .padrao::after{ background:linear-gradient(180deg, var(--ac-fundo) 0%, rgba(0,0,0,0) 45%); }
  .liga{ gap:0; }
  .liga a{ padding:20px 0; }
  .liga a + a{ border-top-width:1px; }
  .pl-hero .padrao{ inset:auto 0 0 0; height:40%; }
  .pl-hero .padrao::after{ background:linear-gradient(180deg, var(--papel-fundo) 0%, rgba(227,230,219,0) 100%); }
  .fr-hero .padrao{ top:auto; bottom:0; height:40%; }
  .dados li{ grid-template-columns:minmax(0, 1fr); gap:2px; }
  .lp-hero .botoes .bt{ flex:1 1 100%; }
  .funcoes, .liga, .quatro, .extras{ grid-template-columns:minmax(0, 1fr); }
  .funcao.destaque{ grid-column:auto; }
  .funil{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .etapa-f .seta, .etapa-f:first-child .seta{ clip-path:none; border-radius:14px 14px 3px 14px; }
  .campos{ grid-template-columns:minmax(0, 1fr); }
  .tabela-precos{ font-size:15.5px; }
  .fr-hero .padrao::after{ background:linear-gradient(180deg, var(--verde-fundo) 0%, rgba(80,122,3,.35) 100%); }
}
@media (max-width: 420px){
  .rodape .grade{ grid-template-columns:minmax(0, 1fr); }
  .rodape a{ white-space:normal; }
}
/* sem JavaScript: o menu do celular aparece aberto, o Apps abre no passar do mouse e o formulário vira o link do WhatsApp */
html:not(.js) .menu-burger{ display:none !important; }
html:not(.js) .apps-menu:hover .painel-apps, html:not(.js) .apps-menu:focus-within .painel-apps{ display:grid; }
html:not(.js) .apps-menu::after{ content:""; position:absolute; left:-24px; right:-24px; top:100%; height:20px; }
html:not(.js) .form-lead > button[type="submit"]{ display:none; }
@media (max-width: 980px){
  html:not(.js) .topo{ position:static; }
  html:not(.js) .menu-cel[hidden]{ display:grid; height:auto; }
}
/* =====================================================================
   ETAPA 3 · MOVIMENTO (vnt-motion + site-fenomenal 7.3)
   Curvas da casa: entrar (.16,1,.3,1) · sair (.7,0,.84,0) · mudar de lugar (.65,0,.35,1) · pop (.34,1.56,.64,1), só na gota.
   Tudo aqui vale só com JavaScript e sem movimento reduzido: a classe .mov vem do <head> e cai sozinha em 2,5 s se o
   movimento.js não rodar (nada fica escondido se o script falhar). Anima só transform, opacity e clip-path.
   ===================================================================== */
:root{ --e-in:cubic-bezier(.16,1,.3,1); --e-out:cubic-bezier(.7,0,.84,0); --e-move:cubic-bezier(.65,0,.35,1); --e-pop:cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: no-preference){
  /* resposta: botões e menus (120 a 250 ms) */
  .bt{ transition:transform .16s var(--e-in), background-color .16s, box-shadow .2s; }
  .bt:hover{ transform:translateY(-2px); }
  .bt:active{ transform:translateY(0) scale(.97); transition-duration:.1s; }
  .som:hover{ transform:translate(-50%, -50%) scale(1.04); } .som.com-som:hover{ transform:scale(1.04); }
  .pausa{ transition:transform .14s var(--e-in), background-color .16s; } .pausa:hover{ transform:scale(1.06); } .pausa:active{ transform:scale(.94); }
  .painel-apps:not([hidden]){ animation:v-painel .2s var(--e-in) both; transform-origin:24px 0; }
  .painel-apps:not([hidden]) a{ animation:v-item .24s var(--e-in) both; }
  .painel-apps a:nth-child(2){ animation-delay:.03s; } .painel-apps a:nth-child(3){ animation-delay:.06s; } .painel-apps a:nth-child(4){ animation-delay:.09s; }
  .menu-cel:not([hidden]){ animation:v-desce .26s var(--e-in) both; }
  .menu-cel:not([hidden]) > *{ animation:v-item .3s var(--e-in) both; }
  .menu-cel > :nth-child(2){ animation-delay:.035s; } .menu-cel > :nth-child(3){ animation-delay:.07s; } .menu-cel > :nth-child(4){ animation-delay:.105s; }
  .menu-cel > :nth-child(5){ animation-delay:.14s; } .menu-cel > :nth-child(n+6){ animation-delay:.175s; }
  .faq details[open] .resp{ animation:v-item .24s var(--e-in) both; }
  .liga a .circ, .painel-apps .circ{ transition:transform .2s var(--e-in); }
  .liga a:hover .circ, .painel-apps a:hover .circ{ transform:scale(1.06); }
  .apps-menu > button svg{ transition:transform .2s var(--e-move); }
  .barra-cel{ transition:transform .3s var(--e-in), visibility 0s .3s !important; }
  body.mostra-barra .barra-cel{ transition:transform .3s var(--e-in) !important; }

  /* chegada: título por linhas com máscara, depois apoio e botões; a navegação por último */
  .mov:not(.mov-ok) main h1{ visibility:hidden; }
  .ln{ display:inline-block; width:100%; vertical-align:top; overflow:hidden; padding:.12em 0 .18em; margin:-.12em 0 -.18em; }
  .ln-i{ display:inline-block; transform:translateY(140%); transition:transform 1s var(--e-in); }
  .ln-vai .ln-i{ transform:none; }
  .tt-split .g{ transform:scale(.35); opacity:0; transition:transform .44s var(--e-pop), opacity .18s; }
  .tt-split.g-vai .g{ transform:none; opacity:1; }
  .mov :is(.hero .apoio, .hero .botoes, .hero .miudo, .lp-hero .marca-app, .lp-hero .bio, .lp-hero .preco-chip, .lp-hero .texto > p:not(.marca-app):not(.bio):not(.preco-chip), .lp-hero .botoes, .pl-hero .apoio, .pl-hero .botoes, .pl-hero .miudo, .pg-hero .apoio, .fr-hero .apoio, .contato-zap > div:first-child){ opacity:0; transform:translateY(16px); }
  .mov.mov-ok :is(.hero .apoio, .hero .botoes, .hero .miudo, .lp-hero .marca-app, .lp-hero .bio, .lp-hero .preco-chip, .lp-hero .texto > p:not(.marca-app):not(.bio):not(.preco-chip), .lp-hero .botoes, .pl-hero .apoio, .pl-hero .botoes, .pl-hero .miudo, .pg-hero .apoio, .fr-hero .apoio, .contato-zap > div:first-child){ animation:v-chega .7s var(--e-in) var(--d, .4s) both; }
  .mov main h2.tt:not(.tt-ok){ visibility:hidden; }
  .mov .topo .menu > li, .mov .topo .acoes{ opacity:0; }
  .mov.mov-ok .topo .menu > li, .mov.mov-ok .topo .acoes{ animation:v-fade .5s var(--e-in) var(--d, .7s) both; }
  /* a mídia do topo assenta (1,08 → 1) sem começar invisível: não atrasa o LCP */
  .mov.mov-ok .lp-hero .print img, .mov.mov-ok .hero .video > .padrao, .mov.mov-ok .hero .video > .v-filme, .mov.mov-ok .hero .video > .fileira{ animation:v-assenta 1.6s var(--e-in) both; }
  .mov.mov-ok .lp-hero .print, .mov.mov-ok .pl-hero .preco-card, .mov.mov-ok .fr-hero .form-lead, .mov.mov-ok .hero .video{ animation:v-sobe-midia 1.1s var(--e-in) .1s both; }
  /* o padrão do topo das LPs e da Franquia se abre num círculo, a partir do símbolo do app (a linguagem do login) */
  .mov .lp-hero .padrao, .mov .fr-hero .padrao{ clip-path:circle(0px at var(--cx, 10%) var(--cy, 20%)); }
  .mov .lp-hero .padrao.abre, .mov .fr-hero .padrao.abre{ clip-path:circle(var(--r, 150vmax) at var(--cx, 10%) var(--cy, 20%)); transition:clip-path 1.25s var(--e-move) .15s; }

  /* revelação uma vez só: cartões, listas e prints (uma curva, 24 px, cascata de até 0,5 s) */
  .mov :is(.liga a, .quatro article, .extras article, .faq details, .dor li, .capsulas li, .numeros li, .bloco, .preco-app, .vitrine .print-moldura, .vitrine .vt-texto,
    .cartao-zap, .dados li, .tabela-precos tbody tr, .tabela-precos tfoot tr, .pedaco, .passos > .passo, .blocos-texto > div, .gotas-juntas, .sales .preco-card, .lp-form > .form-lead,
    .lp-form .lado, .pg-projetos .funcao, .contato-zap > .form-lead, .siga .fecho, .espalhada .fecho, .para-quem .linha, .quem-faz .fonte):not(.vis){ opacity:0; transform:translateY(24px); }
  .mov :is(.liga a, .quatro article, .extras article, .faq details, .dor li, .capsulas li, .numeros li, .bloco, .preco-app, .vitrine .print-moldura, .vitrine .vt-texto,
    .cartao-zap, .dados li, .tabela-precos tbody tr, .tabela-precos tfoot tr, .pedaco, .passos > .passo, .blocos-texto > div, .gotas-juntas, .sales .preco-card, .lp-form > .form-lead,
    .lp-form .lado, .pg-projetos .funcao, .contato-zap > .form-lead, .siga .fecho, .espalhada .fecho, .para-quem .linha, .quem-faz .fonte).vis{
    transition:opacity .55s var(--e-in) var(--d, 0s), transform .85s var(--e-in) var(--d, 0s); }
  /* os papéis espalhados da Home guardam o giro deles */
  .mov .pedaco.p1:not(.vis){ transform:translateY(24px) rotate(-4deg); } .mov .pedaco.p2:not(.vis){ transform:translateY(24px) rotate(3deg); }
  .mov .pedaco.p3:not(.vis){ transform:translateY(24px) rotate(2.5deg); } .mov .pedaco.p4:not(.vis){ transform:translateY(24px) rotate(-3deg); }

  /* ASSINATURA da Agenda: os cartões ENCAIXAM na semana, coluna por coluna, como compromissos */
  .mov .pg-agenda .funcao:not(.vis){ opacity:0; transform:translateY(-18px) scale(.97); }
  .mov .pg-agenda .funcao.vis{ transition:opacity .3s var(--e-in) var(--d, 0s), transform .55s var(--e-pop) var(--d, 0s); }
  .mov .pg-agenda .funcao svg{ transition:transform .4s var(--e-pop) calc(var(--d, 0s) + .25s); }
  .mov .pg-agenda .funcao:not(.vis) svg{ transform:scale(.6); }

  /* ASSINATURA do Atendimento: os balões chegam um a um, como numa conversa (antes, "digitando…") */
  .mov .pg-atendimento .balao-f{ position:relative; }
  .mov .pg-atendimento .balao-f:not(.vis){ opacity:0; transform:translateY(10px) scale(.96); }
  .mov .pg-atendimento .balao-f{ transform-origin:0 100%; } .mov .pg-atendimento .balao-f:nth-child(even){ transform-origin:100% 100%; }
  .mov .pg-atendimento .balao-f.vis{ transition:opacity .3s var(--e-in), transform .45s var(--e-in); }
  .digitando{ position:absolute; width:64px; height:38px; border-radius:19px 19px 19px 6px; background:var(--papel-claro); border:1px solid rgba(19,24,41,.06);
    display:flex; gap:5px; align-items:center; justify-content:center; opacity:0; transition:opacity .16s; pointer-events:none; }
  .digitando.dir{ border-radius:19px 19px 6px 19px; background:var(--ac-claro); }
  .digitando.on{ opacity:1; }
  .digitando i{ width:7px; height:7px; border-radius:50%; background:var(--tinta-2); opacity:.35; animation:v-pontos .9s infinite; }
  .digitando i:nth-child(2){ animation-delay:.15s; } .digitando i:nth-child(3){ animation-delay:.3s; }

  /* ASSINATURA do CRM: as setas do funil se preenchem e um lead (a gota) anda por elas até o Fecha */
  .mov .pg-crm .etapa-f:not(.vis) .seta{ clip-path:inset(0 100% 0 0); }
  .mov .pg-crm .etapa-f:not(.vis) :is(h3, p){ opacity:0; transform:translateY(12px); }
  .mov .pg-crm .etapa-f.vis .seta{ transition:clip-path .55s var(--e-move) var(--d, 0s); }
  .mov .pg-crm .etapa-f.vis :is(h3, p){ transition:opacity .5s var(--e-in) calc(var(--d, 0s) + .25s), transform .7s var(--e-in) calc(var(--d, 0s) + .25s); }
  .funil{ position:relative; }
  .funil-gota{ position:absolute; left:0; top:22px; width:16px; height:16px; z-index:2; background:var(--ac, var(--crm)); pointer-events:none; opacity:0;
    border-radius:50% 50% 0 50%; box-shadow:0 4px 10px rgba(0,0,0,.25); }
  .etapa-f .seta{ transition:filter .25s; } .etapa-f.passou .seta{ filter:brightness(1.18); }

  /* ASSINATURA do Projetos: as 18 ferramentas andam para o mural como cartões no Kanban */
  .mov .pg-projetos .mural li:not(.vis){ opacity:0; transform:translateX(-28px); }
  .mov .pg-projetos .mural li.vis{ transition:opacity .4s var(--e-in) var(--d, 0s), transform .65s var(--e-in) var(--d, 0s); }
  .mov .pg-projetos .mural li.grande:not(.vis){ transform:translateX(-28px) scale(.92); }
  .mov .pg-projetos .mural li.grande.vis{ transition:opacity .4s var(--e-in) var(--d, 0s), transform .6s var(--e-pop) var(--d, 0s); }
}

/* ASSINATURA da Home: "Siga um cliente" vira uma cena fixada (só no computador, com JavaScript e sem movimento reduzido) */
.siga-palco{ display:none; }
.siga.fixa .passos{ display:none; }
.siga.fixa .siga-trilho{ position:relative; height:var(--trilho, 340vh); }
.siga.fixa .siga-palco{ display:grid; position:sticky; top:96px; height:min(calc(100vh - 124px), 760px); grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
  gap:clamp(28px, 4vw, 56px); padding:clamp(28px, 3.4vw, 48px); border-radius:var(--casa); overflow:hidden; color:#fff; --gota:#fff; isolation:isolate; }
.sp-fundos{ position:absolute; inset:0; z-index:0; isolation:isolate; }
.sp-fundo{ position:absolute; inset:0; clip-path:circle(0px at var(--cx, 0) var(--cy, 0)); }
.sp-fundo.on{ clip-path:circle(var(--r, 2000px) at var(--cx, 0) var(--cy, 0)); }
.sp-fundo.abrindo{ transition:clip-path .9s var(--e-move); }
.sp-fundo.s1{ background:linear-gradient(110deg, var(--atend-fundo) 0%, var(--atend-fundo) 38%, var(--atend) 100%); }
.sp-fundo.s2{ background:linear-gradient(110deg, var(--crm-fundo) 0%, var(--crm-fundo) 38%, var(--crm) 100%); }
.sp-fundo.s3{ background:linear-gradient(110deg, var(--agenda-fundo) 0%, var(--agenda-fundo) 38%, var(--agenda) 100%); }
.sp-fundo.s4{ background:linear-gradient(110deg, var(--proj-fundo) 0%, var(--proj-fundo) 38%, var(--proj) 100%); }
.sp-esq{ position:relative; z-index:2; display:flex; flex-direction:column; min-height:0; }
.sp-nav{ position:relative; display:grid; gap:4px; margin:0; padding:0 0 0 26px; list-style:none; }
.sp-bt{ display:flex; align-items:center; gap:12px; width:100%; font:600 15.5px/1.2 var(--f-txt); color:#fff; background:none; border:0; padding:8px 10px 8px 0;
  cursor:pointer; text-align:left; opacity:.62; transition:opacity .2s; border-radius:12px; }
.sp-bt:hover{ opacity:.9; } .sp-bt[aria-current="step"]{ opacity:1; }
.sp-bt .n{ width:30px; height:30px; flex:none; display:grid; place-items:center; font-weight:700; background:rgba(0,0,0,.24); border-radius:50% 50% 3px 50%; }
.sp-bt:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.sp-gota{ position:absolute; left:0; top:0; width:14px; height:14px; background:#fff; border-radius:50% 50% 0 50%; box-shadow:0 3px 8px rgba(0,0,0,.2); }
.sp-textos{ position:relative; flex:1; margin-top:auto; min-height:260px; }
.sp-txt{ position:absolute; left:0; right:0; bottom:0; opacity:0; visibility:hidden; transition:opacity .25s var(--e-out), visibility 0s .25s; }
.sp-txt.on{ opacity:1; visibility:visible; transition:opacity .35s var(--e-in); }
.sp-txt h3{ font-size:clamp(44px, 4.6vw, 68px); letter-spacing:-.05em; margin:0 0 16px; }
.sp-txt p{ font-size:17px; line-height:1.5; max-width:36ch; }
.sp-txt.on p{ animation:v-chega .6s var(--e-in) .18s both; }
.sp-prints{ position:relative; z-index:2; min-height:0; }
.sp-print{ position:absolute; inset:0; margin:0; border-radius:18px 18px 4px 18px; overflow:hidden; background:#fff; box-shadow:0 24px 50px rgba(19,24,41,.28);
  opacity:0; transform:scale(1.03); transition:opacity .45s var(--e-out), transform .6s var(--e-in); }
.sp-print.on{ opacity:1; transform:none; transition:opacity .6s var(--e-in) .12s, transform .9s var(--e-in) .12s; }
.sp-print picture{ display:block; width:100%; height:100%; }
.sp-print img{ width:100%; height:100%; object-fit:cover; object-position:left top; }
@media (prefers-reduced-motion: reduce){ .siga.fixa .passos{ display:grid; } .siga.fixa .siga-palco{ display:none; } .siga.fixa .siga-trilho{ height:auto; } }

@keyframes v-painel{ from{ opacity:0; transform:translateY(-6px) scale(.98); } }
@keyframes v-item{ from{ opacity:0; transform:translateY(-4px); } }
@keyframes v-desce{ from{ opacity:0; transform:translateY(-8px); } }
@keyframes v-chega{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes v-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes v-assenta{ from{ transform:scale(1.08); } }
@keyframes v-sobe-midia{ from{ transform:translateY(28px); } }
@keyframes v-pontos{ 0%, 60%, 100%{ opacity:.3; transform:none; } 30%{ opacity:.9; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }