/* Nina IA — página de apresentação (estática) */
:root {
  --rosa: #ec2a80;
  --rosa-6: #dc1670;
  --rosa-7: #b80d5b;
  --rosa-4: #f85b9f;
  --rosa-1: #ffe3ef;
  --rosa-05: #fff5f9;
  --tinta: #16141c;
  --texto: #4b4757;
  --mudo: #8a8592;
  --linha: #f1e7ed;
  --verde: #22c55e;
  --wa: #25d366;
  --sombra: 0 1px 2px rgba(31, 16, 25, .05), 0 12px 32px -14px rgba(214, 30, 110, .2);
  --sombra-forte: 0 2px 4px rgba(31, 16, 25, .05), 0 22px 44px -18px rgba(214, 30, 110, .32);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --f-tit: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --f-txt: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mao: "Caveat", "Segoe Print", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--texto); font: 400 16px/1.6 var(--f-txt); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { color: var(--tinta); font-family: var(--f-tit); margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hl-ic svg, .fe-ic svg, .rec-ic svg, .passo-ic svg, .mg-ic svg, .garantias svg, .au-ic svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.caixa { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.mao { font-family: var(--f-mao); font-weight: 700; color: var(--rosa); line-height: 1; }

/* ---------- botões (base 21st: brilho que passa, seta que troca, leve ímã) ---------- */
.btn {
  --h: 46px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: var(--h); padding: 0 1.25rem; border: 0; border-radius: 12px;
  font: 600 .9375rem/1 var(--f-txt); letter-spacing: -.005em; white-space: nowrap;
  transition: translate .25s var(--ease), scale .15s, background-color .2s, box-shadow .25s, border-color .2s, color .2s;
}
.btn:active { scale: .975; }
.btn-p { --h: 40px; padding: 0 1rem; font-size: .875rem; border-radius: 10px; }
.btn-g { --h: 50px; padding: 0 1.4rem; }
.btn-larga { width: 100%; }

.btn-rosa {
  color: #fff;
  background: linear-gradient(180deg, #f43a8c 0%, #e01a71 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(120, 0, 50, .25), 0 1px 2px rgba(150, 10, 70, .28), 0 6px 14px -6px rgba(226, 25, 111, .5);
}
.btn-rosa::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  translate: -110% 0; transition: translate .8s var(--ease);
}
.btn-rosa::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #f64f98, #e5237a); opacity: 0; transition: opacity .25s; }
.btn-rosa:hover::before { translate: 110% 0; }
.btn-rosa:hover::after { opacity: 1; }
.btn-rosa:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(120, 0, 50, .25), 0 1px 2px rgba(150, 10, 70, .3), 0 10px 20px -8px rgba(226, 25, 111, .55); }

.seta { position: relative; display: inline-grid; width: 1.05em; height: 1.05em; overflow: hidden; }
.seta .ic { grid-area: 1 / 1; width: 100%; height: 100%; stroke-width: 2.4; transition: translate .35s var(--ease); }
.seta .ic + .ic { translate: -130% 0; }
.btn:hover .seta .ic:first-child { translate: 130% 0; }
.btn:hover .seta .ic + .ic { translate: 0 0; }

.btn-claro {
  color: var(--tinta); background: #fff;
  border: 1px solid #ebe3e8;
  box-shadow: 0 1px 2px rgba(31, 16, 25, .05), inset 0 -1px 0 rgba(31, 16, 25, .03);
}
.btn-claro:hover { border-color: #f6c6dc; background: #fff9fc; }
.play { display: grid; place-items: center; width: 1.15em; height: 1.15em; color: var(--tinta); transition: scale .25s var(--ease), color .2s; }
.play .ic { width: 100%; height: 100%; }
.btn-claro:hover .play { color: var(--rosa); scale: 1.15; }

/* ---------- peças pequenas ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px;
  background: #fff; border: 1px solid #ffd3e6; color: var(--rosa-6);
  font: 700 .66rem/1 var(--f-txt); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(236, 42, 128, .08);
}
.pill .ic { width: 12px; height: 12px; stroke-width: 2.6; color: #d9a5bd; transition: translate .25s; }
a.pill:hover .ic { translate: 2px 0; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 3px rgba(236, 42, 128, .16); flex: none; }
.ponto.verde { background: var(--verde); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }

.cartao { background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); }

.av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 700 9.5px/1 var(--f-txt); letter-spacing: .02em; border: 2px solid #fff; }
.av-rosa { background: #ffd9e9; color: #c2185b; }
.av-azul { background: #dbeafe; color: #1d4ed8; }
.av-verde { background: #dcfce7; color: #15803d; }
.av-ambar { background: #fef3c7; color: #b45309; }
.av-roxo { background: #ede9fe; color: #6d28d9; }
.av-xs { width: 22px; height: 22px; font-size: 8px; }

.hl-ic, .fe-ic, .rec-ic, .mg-ic { display: grid; place-items: center; flex: none; border-radius: 8px; color: #fff; }
.hl-ic { width: 22px; height: 22px; border-radius: 6px; }
.hl-ic svg { width: 13px; height: 13px; }
.verde { --cor: #22c55e; } .rosa { --cor: #ec2a80; } .roxo { --cor: #8b5cf6; } .laranja { --cor: #f97316; } .azul { --cor: #3b82f6; }
.hl-ic { background: var(--cor); }

/* reveal */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.on { opacity: 1; transform: none; }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.topo.rolou { border-color: var(--linha); box-shadow: 0 6px 24px -18px rgba(31, 16, 25, .35); }
.topo-linha { display: flex; align-items: center; gap: 28px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 9px; font: 800 1.3rem/1 var(--f-tit); color: var(--tinta); letter-spacing: -.03em; }
.marca-n { width: 34px; height: 27px; transition: rotate .5s var(--ease); }
.marca:hover .marca-n { rotate: -8deg; }
.menu { display: flex; align-items: center; gap: 4px; margin-left: 32px; }
.menu-item { position: relative; }
.menu-link { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 0; background: none; border-radius: 8px; font-size: .84rem; font-weight: 500; color: #3a3644; transition: background-color .2s, color .2s; }
.menu-link:hover, .menu-item:focus-within > .menu-link { background: var(--rosa-05); color: var(--tinta); }
.menu-link .ic { width: 14px; height: 14px; transition: rotate .25s; }
.menu-item:hover .menu-link .ic, .menu-item:focus-within .menu-link .ic { rotate: 180deg; }
.menu-gaveta {
  position: absolute; top: calc(100% + 8px); left: -8px; width: 300px; padding: 8px;
  display: grid; gap: 2px;
  background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra-forte);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .2s, translate .25s var(--ease), visibility .2s;
}
.menu-gaveta::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.menu-item:hover .menu-gaveta, .menu-item:focus-within .menu-gaveta { opacity: 1; visibility: visible; translate: 0 0; }
.menu-gaveta a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; transition: background-color .2s; }
.menu-gaveta a:hover { background: var(--rosa-05); }
.menu-gaveta b { display: block; font-size: .84rem; font-weight: 600; color: var(--tinta); }
.menu-gaveta small { display: block; font-size: .75rem; color: var(--mudo); line-height: 1.3; }
.menu-gaveta.estreita { width: 230px; }
.mg-ic { width: 32px; height: 32px; background: color-mix(in srgb, var(--cor) 12%, #fff); color: var(--cor); }
.mg-ic svg { width: 17px; height: 17px; }
.topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.btn-cel { display: none; }
.menu-abrir { display: none; width: 40px; height: 40px; border: 1px solid #ebe3e8; border-radius: 10px; background: #fff; place-items: center; }
.menu-abrir .ic { width: 20px; height: 20px; }
.menu-celular { display: grid; gap: 2px; padding: 8px 24px 20px; border-top: 1px solid var(--linha); background: #fff; }
.menu-celular[hidden] { display: none; }
.menu-celular > a { padding: 12px 4px; font-weight: 500; color: var(--tinta); border-bottom: 1px solid var(--linha); }
.mc-acoes { display: grid; gap: 10px; margin-top: 14px; }

/* ---------- herói ---------- */
.heroi { position: relative; overflow-x: clip; padding: 34px 0 0; background:
  radial-gradient(48% 62% at 74% 34%, #ffe1ef 0%, rgba(255, 225, 239, 0) 70%),
  radial-gradient(30% 40% at 100% 6%, #ffeef6 0%, rgba(255, 238, 246, 0) 70%),
  linear-gradient(180deg, #fff 0%, #fff8fb 100%);
}
.heroi-linhas { position: absolute; right: 0; top: 0; width: 64%; height: 100%; fill: none; stroke: #f9cfe2; stroke-width: 1.2; opacity: .7; pointer-events: none; }
.heroi-grade { position: relative; display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 24px; align-items: center; }
.heroi-texto { padding: 18px 0 40px; }
.heroi h1 { margin: 20px 0 18px; font-size: clamp(2.3rem, 1rem + 2.75vw, 3rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.heroi h1 em, .secao h2 em { background: linear-gradient(92deg, #f0328a, #dc1670); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 28rem; font-size: 1rem; color: var(--texto); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.selos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 26px; font-size: .74rem; color: var(--mudo); }
.selos li { display: inline-flex; align-items: center; gap: 7px; }
.selos .ic { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--rosa); color: #fff; stroke-width: 3.4; }

/* palco do herói: desenhado em 760×440 e ajustado à coluna por zoom (app.js) */
.heroi-arte { position: relative; align-self: end; }
.palco { position: relative; width: 800px; height: 560px; clip-path: inset(-60px -60px 0 -60px); }
.h-nina { position: absolute; left: 34px; top: 0; width: 790px; max-width: none; height: auto; z-index: 1; animation: respira 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes respira { 50% { translate: 0 -5px; } }
.palco .cartao, .palco .h-oi { position: absolute; z-index: 2; }
.js .palco .cartao, .js .palco .h-oi { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.palco.on .cartao, .palco.on .h-oi { opacity: 1 !important; transform: none !important; }
.palco.on .h-chat { transition-delay: .15s; } .palco.on .h-lista { transition-delay: .3s; }
.palco.on .h-oi { transition-delay: .45s; } .palco.on .h-vendas { transition-delay: .55s; }
.palco.on .h-agenda { transition-delay: .7s; } .palco.on .h-crm { transition-delay: .85s; }
.h-vendas, .h-agenda, .h-crm, .h-chat { animation: boia 7s ease-in-out infinite; }
.h-agenda { animation-delay: -2.3s; } .h-crm { animation-delay: -4.6s; } .h-chat { animation-delay: -1.2s; animation-duration: 8s; }
@keyframes boia { 50% { translate: 0 -4px; } }

.h-chat { left: -6px; top: 70px; width: 210px; padding: 10px 11px 11px; }
.hc-topo { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--tinta); }
.hc-topo b { font-weight: 600; }
.hc-topo time { margin-left: auto; font-size: 9px; color: var(--mudo); }
.hc-av { position: relative; flex: none; width: 26px; height: 26px; }
.hc-av img { width: 26px; height: 26px; border-radius: 50%; }
.hc-wa { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; padding: 1px; border-radius: 50%; background: #fff; color: var(--wa); }
.hc-corpo { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; min-height: 112px; }
.bolha { position: relative; max-width: 86%; padding: 6px 8px 14px; border-radius: 9px; font-size: 10.5px; line-height: 1.38; color: #222; }
.bolha time { position: absolute; right: 7px; bottom: 3px; display: inline-flex; align-items: center; gap: 2px; font-size: 7.5px; color: #8b8f93; }
.bolha time .ic, .msg time .ic { width: 11px; height: 11px; color: #53bdeb; }
.bolha.ela { align-self: flex-start; background: #f2f3f5; border-top-left-radius: 3px; }
.bolha.eu { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 3px; }
.digitando { display: inline-flex; gap: 3px; padding: 8px 10px; border-radius: 10px; background: #f2f3f5; }
.digitando.eu { align-self: flex-end; background: #dcf8c6; }
.digitando.ela { align-self: flex-start; background: #fff; }
.digitando i { width: 5px; height: 5px; border-radius: 50%; background: #9aa0a6; animation: pontinho 1.1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
.js [data-passo], .js .msg, .js .cel-msgs .digitando { display: none; }
.js [data-passo].on, .js .msg.on, .js .cel-msgs .digitando.on { display: block; animation: entraMsg .45s var(--ease) both; }
.js .digitando.on { display: inline-flex !important; }
@keyframes entraMsg { from { opacity: 0; translate: 0 8px; scale: .97; } }

.h-lista { left: -6px; top: 272px; width: 212px; padding: 9px 10px; display: grid; gap: 3px; }
.h-lista li { position: relative; display: flex; align-items: center; gap: 9px; height: 27px; padding: 0 22px 0 4px; border-radius: 7px; font-size: 10.5px; color: var(--tinta); transition: background-color .4s, opacity .4s; }
.js .h-lista li { opacity: .5; }
.js .h-lista li.feito-ok { opacity: 1; }
.h-lista li::after { content: ""; position: absolute; right: 6px; width: 6px; height: 10px; border: solid var(--verde); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; opacity: 0; scale: .4; transition: opacity .3s, scale .4s var(--ease); }
.h-lista li.feito-ok::after { opacity: 1; scale: 1; }
.h-lista li.agora { background: var(--rosa-05); }

.h-oi { left: 640px; top: 30px; width: max-content; rotate: -7deg; }
.h-oi strong { display: block; font-size: 27px; line-height: .95; font-weight: 700; }
.h-oi span { display: block; margin-top: 5px; font-size: 17px; line-height: 1; color: #6b6573; }
.h-oi-seta { position: absolute; left: -38px; top: 64px; width: 44px; height: 30px; fill: none; stroke: var(--rosa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.h-vendas { left: 622px; top: 156px; width: 178px; padding: 10px 12px; display: flex; align-items: flex-end; justify-content: space-between; }
.hv-tit { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; color: var(--tinta); }
.hv-tit .ic { color: var(--rosa); stroke-width: 2.6; }
.hv-num { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.hv-num b { font: 800 25px/1 var(--f-tit); color: var(--tinta); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hv-num small { display: inline-flex; align-items: center; gap: 1px; font-size: 10px; font-weight: 700; color: var(--verde); }
.hv-barras { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.hv-barras i { width: 7px; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, #f85b9f, #ffc2dc); transform-origin: bottom; }
.hv-barras i:last-child { background: linear-gradient(180deg, #ec2a80, #f85b9f); }
.js .hv-barras i { scale: 1 0; transition: scale .9s var(--ease); }
.palco.on .hv-barras i { scale: 1 1; }
.palco.on .hv-barras i:nth-child(2) { transition-delay: .1s; } .palco.on .hv-barras i:nth-child(3) { transition-delay: .2s; }
.palco.on .hv-barras i:nth-child(4) { transition-delay: .3s; } .palco.on .hv-barras i:nth-child(5) { transition-delay: .4s; }

.h-agenda { left: 612px; top: 250px; width: 188px; padding: 9px 10px 10px; }
.ha-topo { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--tinta); }
.ha-topo b { font-weight: 600; }
.ha-ok { margin-left: auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--verde); color: #fff; }
.ha-ok .ic { width: 11px; height: 11px; stroke-width: 3.4; }
.ha-corpo { margin-top: 8px; padding: 8px 9px; border: 1px solid var(--linha); border-radius: 9px; }
.ha-data { font-size: 11px; font-weight: 600; color: var(--tinta); }
.ha-data i { margin: 0 4px; font-style: normal; color: var(--mudo); }
.ha-quem { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ha-quem b { display: block; font-size: 9.5px; font-weight: 600; color: var(--tinta); }
.ha-quem small { display: block; font-size: 8.5px; color: var(--mudo); }

.h-crm { left: 566px; top: 424px; width: 234px; padding: 9px 10px 10px; }
.hcr-topo { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--tinta); }
.hcr-topo b { font-weight: 600; }
.hcr-topo > .ic { margin-left: auto; color: var(--mudo); width: 12px; }
.hcr-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.hcr-cols > div { padding: 6px 5px 6px; border: 1px solid var(--linha); border-top: 2px solid var(--c); border-radius: 6px; background: #fff; }
.hcr-cols small { display: block; font-size: 6.8px; color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcr-cols b { display: block; margin: 2px 0 4px; font: 800 13px/1 var(--f-tit); color: var(--tinta); }
.hcr-cols i { display: block; height: 9px; margin-top: 3px; border-radius: 3px; background: radial-gradient(circle at 4px 50%, #e6dce2 3.5px, transparent 4px), linear-gradient(90deg, transparent 10px, #f1e9ee 10px, #f1e9ee 80%, transparent 80%); }

/* faixa de tecnologias */
.faixa-tec { position: relative; display: grid; justify-items: center; gap: 12px; padding-top: 18px; padding-bottom: 28px; }
.faixa-tec::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #f4dce7 15%, #f4dce7 85%, transparent); }
.logos-tit { text-align: center; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); }
.logos-tit b { color: var(--rosa-6); }
.tec { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px; }
.tec li { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--f-tit); color: #3d3946; letter-spacing: -.01em; }
.tec svg { width: 24px; height: 24px; color: #111; }

/* ---------- seções ---------- */
.secao { position: relative; padding: 72px 0; }
.secao h2 { font-size: clamp(2rem, 1.2rem + 2vw, 2.55rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }

/* conversa natural */
.conversa { background: radial-gradient(40% 60% at 50% 40%, #ffe6f1 0%, rgba(255, 230, 241, 0) 70%), linear-gradient(180deg, #fff6fa 0%, #fff 100%); overflow: hidden; }
.conversa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 280px 318px 178px; gap: 26px; align-items: center; }
.conversa h2 { margin: 18px 0 18px; font-size: clamp(2rem, 1.2rem + 1.7vw, 2.4rem); }
.conversa-texto > p { font-size: .98rem; max-width: 26rem; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.numero { padding: 14px 12px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); }
.numero b { display: block; font: 800 1.55rem/1 var(--f-tit); color: var(--rosa); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: 6px; font-size: .74rem; line-height: 1.3; color: var(--texto); }

.celular-area { position: relative; justify-self: center; }
.cel-wa { position: absolute; z-index: 3; left: -34px; top: 26px; width: 54px; height: 54px; padding: 11px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .6); animation: boia 5s ease-in-out infinite; }
.celular { position: relative; width: 280px; height: 572px; padding: 10px; border-radius: 48px; background: #111; box-shadow: 0 0 0 2px #2b2b2e, 0 40px 70px -30px rgba(80, 10, 45, .45), 0 18px 30px -18px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; }
.celular > * { position: relative; }
.cel-ilha { position: absolute; z-index: 4; left: 50%; top: 18px; width: 84px; height: 24px; margin-left: -42px; border-radius: 20px; background: #000; }
.cel-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 8px 24px 0 28px; background: #fff; border-radius: 38px 38px 0 0; font-size: 12px; color: #111; }
.cel-sinais { display: flex; align-items: flex-end; gap: 2px; }
.cel-sinais i { width: 3px; background: #111; border-radius: 1px; }
.cel-sinais i:nth-child(1) { height: 4px; } .cel-sinais i:nth-child(2) { height: 6px; } .cel-sinais i:nth-child(3) { height: 8px; } .cel-sinais i:nth-child(4) { height: 10px; }
.cel-topo { display: flex; align-items: center; gap: 8px; padding: 6px 12px 9px; background: #fff; border-bottom: 1px solid #ececec; color: #128c7e; }
.cel-topo > .ic { width: 18px; height: 18px; }
.cel-topo > .ic:last-child { margin-left: auto; color: #54656f; }
.cel-av { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.cel-nome b { display: block; font-size: 13px; color: #111; line-height: 1.1; }
.cel-nome small { display: block; font-size: 10px; color: #667781; }
.cel-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 10px 9px 8px; background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1.2px); background-size: 14px 14px; }
.cel-msgs { display: flex; flex-direction: column; gap: 6px; }
.msg { position: relative; max-width: 84%; padding: 6px 8px 15px; border-radius: 9px; font-size: 11px; line-height: 1.38; color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.msg time { position: absolute; right: 7px; bottom: 3px; display: inline-flex; align-items: center; gap: 2px; font-size: 8px; color: #667781; }
.msg.eu { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.msg.ela { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.js .msg-audio.on { display: flex; }
.msg-audio { display: flex; align-items: center; gap: 7px; min-width: 168px; }
.au-play { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #00a884; color: #fff; flex: none; }
.au-play .ic { width: 11px; height: 11px; }
.au-onda { display: flex; align-items: center; gap: 2px; height: 18px; }
.au-onda i { width: 2.5px; height: 40%; border-radius: 2px; background: #6b8f7d; }
.au-onda i:nth-child(3n) { height: 85%; } .au-onda i:nth-child(4n+1) { height: 60%; } .au-onda i:nth-child(5n+2) { height: 100%; }
.msg.on .au-onda i { animation: onda 1.4s ease-in-out infinite; }
.au-onda i:nth-child(even) { animation-delay: -.5s; } .au-onda i:nth-child(3n) { animation-delay: -.9s; }
@keyframes onda { 50% { scale: 1 .5; } }
.msg-audio small { font-size: 9px; color: #667781; }
.anexo { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: 7px; background: rgba(11, 20, 26, .05); font-size: 10px; font-weight: 600; color: #111b21; }
.anexo .ic { width: 14px; height: 14px; color: #e5484d; flex: none; }
.evento { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 7px 8px; border-radius: 7px; background: #f0faf4; border: 1px solid #c9ecd6; font-size: 9.5px; color: #3c5a4a; }
.evento .ic { width: 15px; height: 15px; color: #16a34a; flex: none; }
.evento b { display: block; font-size: 10px; color: #14532d; }
.msg.sistema { align-self: center; max-width: 92%; padding: 4px 9px; border-radius: 7px; background: #fff3c4; color: #5c4b14; font-size: 9.5px; text-align: center; box-shadow: none; }

.cel-campo { display: flex; align-items: center; gap: 6px; padding: 7px 8px 16px; background: #efeae2; border-radius: 0 0 38px 38px; }
.cel-input { flex: 1; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 20px; background: #fff; font-size: 11.5px; color: #8696a0; }
.cel-input .ic { width: 15px; height: 15px; color: #8696a0; }
.cel-input .ic:nth-of-type(2) { margin-left: auto; }
.cel-mic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #00a884; color: #fff; }
.cel-mic .ic { width: 16px; height: 16px; }

.feitos { display: grid; gap: 14px; }
.feito { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 13px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); transition: box-shadow .4s, border-color .4s, translate .4s var(--ease); }
.feito:nth-child(2) { margin-left: 14px; } .feito:nth-child(3) { margin-left: 26px; } .feito:nth-child(4) { margin-left: 16px; }
.feito b { display: block; font: 700 .93rem/1.2 var(--f-tit); color: var(--tinta); letter-spacing: -.01em; }
.feito small { display: block; margin-top: 3px; font-size: .76rem; line-height: 1.35; color: var(--texto); }
.fe-ic { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--cor) 11%, #fff); color: var(--cor); transition: scale .4s var(--ease); }
.fe-ic svg { width: 22px; height: 22px; }
.feito-seta { position: absolute; right: 100%; top: 50%; width: 62px; height: 36px; margin: -18px 4px 0 0; fill: none; stroke: #f48bb8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .4s; }
.feito-seta path:first-child { stroke-dasharray: 4 5; }
.feito.ativo { border-color: #ffc9df; box-shadow: 0 0 0 3px rgba(236, 42, 128, .08), var(--sombra-forte); translate: 4px 0; }
.feito.ativo .fe-ic { scale: 1.08; }
.feito.ativo .feito-seta { opacity: 1; }
.feito.ativo .feito-seta path:first-child { animation: tracejo .8s linear infinite; }
@keyframes tracejo { to { stroke-dashoffset: -18; } }

.conversa-deco { position: relative; height: 520px; }
.tudo { position: absolute; left: 30px; top: 0; font-size: 38px; line-height: .9; rotate: -8deg; }
.tudo-seta { position: absolute; left: 0; top: 108px; width: 40px; height: 44px; fill: none; stroke: var(--rosa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flutuam { position: absolute; left: 0; top: 150px; width: 170px; height: 150px; }
.fl { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra); animation: boia 5.5s ease-in-out infinite; }
.fl svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fl-1 svg { fill: currentColor; stroke: none; }
.fl-1 { left: 4px; top: 24px; } .fl-2 { left: 94px; top: 0; animation-delay: -1.5s; }
.fl-3 { left: 6px; top: 96px; animation-delay: -3s; } .fl-4 { left: 92px; top: 76px; animation-delay: -4.2s; }
.nota { position: absolute; left: 4px; top: 330px; width: 170px; padding: 14px 16px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); rotate: -4deg; font-size: 19px; line-height: 1.05; color: #4a4652; font-weight: 600; }
.nota-seta { position: absolute; left: -40px; top: 300px; width: 48px; height: 26px; fill: none; stroke: var(--rosa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* como funciona + crm */
.como-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; align-items: stretch; }
.h2-p { margin: 18px 0 26px; }
.secao .h2-p { font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2rem); }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.passo { position: relative; padding: 22px 14px 18px; }
.passo-n { position: absolute; left: 14px; top: -11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rosa); color: #fff; font: 700 .75rem/1 var(--f-txt); box-shadow: 0 0 0 4px #fff; }
.passo-ic { display: grid; place-items: center; width: 54px; height: 54px; margin: 2px auto 16px; border-radius: 16px; background: linear-gradient(180deg, #fff0f6, #ffe1ee); color: var(--rosa); transition: rotate .5s var(--ease), scale .5s var(--ease); }
.passo-ic svg { width: 26px; height: 26px; }
.passo:hover .passo-ic { rotate: -6deg; scale: 1.06; }
.passo b { display: block; font: 700 .88rem/1.25 var(--f-tit); color: var(--tinta); }
.passo p { margin-top: 6px; font-size: .78rem; line-height: 1.45; }
.passo { transition: translate .35s var(--ease), box-shadow .35s; }
.passo:hover { translate: 0 -3px; box-shadow: var(--sombra-forte); }

.crm-tela { min-width: 0; }
.cartao-faixa { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; background: linear-gradient(180deg, #fff, #fff7fb); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra); }
.crm-texto h3 { margin: 16px 0 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.crm-texto p { font-size: .84rem; line-height: 1.5; }
.crm-texto .btn { margin-top: 22px; }

/* mockup do app (desenhado em 600 px) */
.app { width: 600px; display: grid; grid-template-columns: 120px 1fr; background: #fff; border: 1px solid #eadfe5; border-radius: 14px; box-shadow: var(--sombra-forte); overflow: hidden; font-size: 10px; }
.app-lado { padding: 12px 8px; border-right: 1px solid #f2ebef; background: #fffbfd; }
.app-marca { display: flex; align-items: center; gap: 6px; padding: 2px 6px 12px; font: 800 12px/1 var(--f-tit); color: var(--tinta); }
.app-marca svg { width: 20px; height: 16px; }
.app-lado nav { display: grid; gap: 2px; }
.app-lado nav span { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 7px; color: #5b5664; }
.app-lado nav .ic { width: 12px; height: 12px; }
.app-lado nav .ativo { background: #ffe8f2; color: var(--rosa-6); font-weight: 600; }
.app-corpo { padding: 10px 12px 12px; min-width: 0; }
.app-barra { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #f4eef1; color: var(--mudo); }
.app-migalha { display: flex; align-items: center; gap: 5px; }
.app-icones { display: flex; align-items: center; gap: 7px; }
.app-icones i { width: 16px; height: 16px; border-radius: 50%; background: #f4eef1; }
.app-icones i.largo { width: 40px; border-radius: 8px; }
.app-cab { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; }
.app-cab b { display: block; font: 800 13px/1.1 var(--f-tit); color: var(--tinta); }
.app-cab small { font-size: 8.5px; color: var(--mudo); }
.app-busca { display: flex; align-items: center; gap: 5px; width: 140px; height: 24px; padding: 0 8px; border: 1px solid #efe7ec; border-radius: 7px; color: #a7a0ad; font-size: 9px; }
.quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.coluna { padding: 6px; border-radius: 9px; background: #fbf8fa; border-top: 2.5px solid var(--c); transition: background-color .2s, box-shadow .2s; }
.coluna.sobre { background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent); }
.col-cab { padding: 2px 3px 6px; }
.col-cab small { display: block; font-size: 8.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 75%, #222); }
.col-cab b { display: block; font: 800 14px/1.1 var(--f-tit); color: var(--tinta); transition: color .3s; }
.col-cab b.mudou { color: var(--rosa); }
.col-cards { display: grid; gap: 5px; min-height: 140px; align-content: start; }
.card-k { display: flex; align-items: center; gap: 6px; padding: 6px; background: #fff; border: 1px solid #f0e8ed; border-radius: 7px; cursor: grab; user-select: none; transition: box-shadow .2s, opacity .2s, translate .2s; }
.card-k:hover { box-shadow: 0 6px 14px -8px rgba(214, 30, 110, .35); translate: 0 -1px; }
.card-k.arrastando { opacity: .4; cursor: grabbing; }
.card-k .av { width: 20px; height: 20px; font-size: 7px; border: 0; }
.card-k b { display: block; font-size: 8.8px; font-weight: 600; color: var(--tinta); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-k small { display: block; font-size: 7.6px; color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-k > span:last-child { min-width: 0; }
.card-k.chegou { animation: chega .5s var(--ease); }
@keyframes chega { from { scale: .92; opacity: .3; } }

/* recursos */
.recursos { padding-top: 8px; background: linear-gradient(180deg, #fff 0%, #fff6fa 100%); }
.recursos-grade { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.recurso { padding: 20px; border-radius: 18px; }
.rec-cab { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.rec-cab h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.rec-cab p { margin-top: 3px; font-size: .78rem; line-height: 1.45; }
.rec-ic { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--cor) 11%, #fff); color: var(--cor); }
.rec-ic svg { width: 22px; height: 22px; }
.rec-ic.laranja svg { width: 24px; height: 24px; }
.rec-ir { margin-left: auto; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rosa-05); color: #e48ab3; }

.agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; margin-top: 18px; }
.cal, .compromissos { padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: #fdfbfc; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; font: 700 .76rem/1 var(--f-tit); color: var(--tinta); }
.cal-cab > span { display: grid; place-items: center; width: 22px; height: 22px; color: #6f6977; }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-sem { margin: 9px 0 3px; font-size: .55rem; color: var(--mudo); }
.cal-dias { gap: 2px 0; }
.cal-dias span { display: grid; place-items: center; justify-self: center; width: 22px; height: 22px; border-radius: 7px; font-size: .64rem; color: #3f3a47; }
.cal-dias span.fora { color: #cfc8d2; }
.cal-dias span.sel { background: var(--rosa); color: #fff; font-weight: 700; box-shadow: 0 4px 10px -4px rgba(236, 42, 128, .6); }
.compromissos > b { display: block; font: 700 .74rem/1.2 var(--f-tit); color: var(--tinta); margin-bottom: 8px; }
.compromissos ul { display: grid; gap: 6px; }
.compromissos li { display: flex; align-items: flex-start; gap: 7px; font-size: .68rem; line-height: 1.3; color: var(--tinta); animation: entraMsg .4s var(--ease) both; }
.compromissos li:nth-child(2) { animation-delay: .05s; } .compromissos li:nth-child(3) { animation-delay: .1s; } .compromissos li:nth-child(4) { animation-delay: .15s; }
.compromissos time { flex: none; padding: 3px 5px; border-radius: 5px; background: var(--rosa-1); color: var(--rosa-6); font-weight: 700; font-size: .62rem; }

.autos { margin-top: 18px; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.autos li { display: flex; align-items: center; gap: 10px; height: 38px; font-size: .76rem; color: var(--tinta); border-bottom: 1px solid #f6eff3; }
.autos li:last-child { border: 0; }
.au-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--rosa-05); color: var(--rosa); }
.au-ic .ic { width: 13px; height: 13px; }
.tag-plano { padding: 2px 6px; border-radius: 99px; background: var(--rosa-05); border: 1px solid #ffd3e6; color: var(--rosa-6); font-size: .58rem; font-weight: 700; }
.chave { margin-left: auto; position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: #e2dde3; }
.chave::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.chave.on { background: var(--verde); }
.chave.on::after { translate: 14px 0; }

.integra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; margin-top: 20px; }
.integra li { display: grid; justify-items: center; gap: 7px; font-size: .7rem; text-align: center; color: #4a4652; line-height: 1.2; }
.integra li > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 1px 2px rgba(31, 16, 25, .05), 0 6px 14px -10px rgba(214, 30, 110, .3); transition: translate .3s var(--ease), box-shadow .3s; }
.integra li:hover > span { translate: 0 -3px; box-shadow: var(--sombra-forte); }
.integra svg { width: 28px; height: 28px; }
.int-mais { color: #6f6977; }
.int-mais .ic { width: 20px; height: 20px; }

/* chamada final */
.chamada-sec { padding-top: 130px; padding-bottom: 48px; background: #fff6fa; }
.chamada { position: relative; display: grid; grid-template-columns: 370px minmax(0, 1fr) minmax(0, 300px); gap: 24px; gap: 28px; align-items: center; padding: 30px 32px 30px 0; border-radius: 26px; background: radial-gradient(60% 120% at 20% 100%, #ffd7e8 0%, rgba(255, 215, 232, 0) 60%), linear-gradient(100deg, #ffeef5 0%, #ffe6f0 50%, #fff2f8 100%); border: 1px solid #ffe0ec; }
.ch-nina { position: relative; align-self: end; margin: -170px 0 -30px; }
.ch-nina img { width: 560px; max-width: none; margin-left: -84px; }
.ch-vamos { position: absolute; z-index: 2; left: -22px; top: 168px; font-size: 25px; line-height: .95; rotate: -10deg; }
.ch-vamos-seta { position: absolute; z-index: 2; left: 16px; top: 226px; width: 34px; height: 26px; fill: none; stroke: var(--rosa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-texto h2 { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.1rem); }
.ch-texto p { margin-top: 10px; font-size: .88rem; max-width: 30rem; }
.ch-texto .acoes { margin-top: 22px; }
.ch-entrar { display: inline-block; margin-top: 14px; font-size: .8rem; color: var(--mudo); }
.ch-entrar b { color: var(--rosa-6); font-weight: 600; }
.ch-entrar:hover b { text-decoration: underline; }
.ch-texto .btn-g { padding: 0 1.1rem; }
.ch-lado { position: relative; display: grid; gap: 12px; justify-items: end; }
.garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.garantias li { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; text-align: center; font-size: .7rem; line-height: 1.3; color: var(--tinta); background: rgba(255, 255, 255, .85); border: 1px solid #ffe0ec; border-radius: 14px; }
.garantias svg { width: 22px; height: 22px; color: var(--rosa); }
.ch-res { position: absolute; right: -6px; top: -64px; font-size: 21px; line-height: .95; text-align: right; rotate: -6deg; }
.confiam { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; background: #fff; border-radius: 99px; box-shadow: var(--sombra); }
.avs { display: flex; }
.avs .av { width: 32px; height: 32px; font-size: 10px; margin-left: -9px; }
.avs .av:first-child { margin-left: 0; }
.confiam b { display: block; font: 800 1rem/1 var(--f-tit); color: var(--tinta); }
.confiam small { display: block; font-size: .66rem; color: var(--mudo); }

/* rodapé */
.rodape { padding: 40px 0 34px; border-top: 1px solid var(--linha); background: #fff; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, .8fr)) 1fr 1.3fr; gap: 24px; align-items: start; }
.rp-marca p { margin-top: 12px; max-width: 15rem; font-size: .78rem; line-height: 1.45; }
.rp-col { display: grid; gap: 5px; }
.rp-col b, .rp-redes b { font: 700 .8rem/1.4 var(--f-tit); color: var(--tinta); margin-bottom: 2px; }
.rp-col a { font-size: .76rem; color: var(--texto); transition: color .2s; }
.rp-col a:hover { color: var(--rosa); }
.rp-redes { display: grid; gap: 10px; }
.rp-redes span { display: flex; gap: 6px; }
.rp-redes a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--tinta); transition: background-color .2s, color .2s; }
.rp-redes a:hover { background: var(--rosa-05); color: var(--rosa); }
.rp-redes svg { width: 17px; height: 17px; }
.rp-copy { align-self: center; font-size: .7rem; color: var(--mudo); text-align: right; }

/* cabeçalho de seção */
.cab-secao { max-width: 660px; margin-bottom: 34px; }
.cab-secao h2 { margin: 18px 0 12px; }
.cab-secao p { font-size: .98rem; }
.cab-secao.centro { margin-inline: auto; text-align: center; }

/* segmentos */
.segmentos { background: #fff; }
.seg { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.seg-abas { display: grid; gap: 6px; align-content: start; }
.seg-abas button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px 9px 9px; border: 1px solid transparent; border-radius: 14px; background: none; text-align: left; font: 600 .87rem/1.25 var(--f-tit); color: #4a4652; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.seg-abas button:hover { background: var(--rosa-05); color: var(--tinta); }
.seg-abas button[aria-selected="true"] { background: #fff; border-color: #ffd3e6; color: var(--tinta); box-shadow: var(--sombra); }
.seg-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #f6f1f4; color: #7a7383; transition: background-color .2s, color .2s; }
.seg-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[aria-selected="true"] .seg-ic { background: var(--rosa); color: #fff; }
.seg-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-content: center; padding: 30px; border-radius: 22px; }
.seg-painel[hidden] { display: none; }
.seg-painel:not([hidden]) { animation: entraMsg .45s var(--ease); }
.seg-txt h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; }
.seg-txt p { margin-top: 10px; font-size: .92rem; }
.seg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.seg-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: var(--rosa-05); border: 1px solid #ffe0ec; font-size: .76rem; font-weight: 600; color: var(--rosa-7); }
.seg-tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa); }
.seg-chat { display: flex; flex-direction: column; gap: 8px; align-self: start; padding: 16px; border-radius: 16px; background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1.2px); background-size: 14px 14px; }
.sb { max-width: 88%; padding: 8px 10px; border-radius: 10px; font-size: .82rem; line-height: 1.45; color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.sb.ela { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.sb.eu { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }
.sb .anexo { font-size: .74rem; }

/* antes e depois */
.comparativo { background: linear-gradient(180deg, #fff 0%, #fff6fa 100%); }
.compara { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 18px; max-width: 1060px; margin: 0 auto; }
.lado { padding: 28px; border-radius: 22px; }
.lado-antes { background: #f8f6f7; border: 1px dashed #e3dce0; }
.lado h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.lado-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #ece7ea; color: #8a8592; }
.lado-ic .ic { width: 18px; height: 18px; }
.lado-depois .lado-ic { background: var(--rosa-05); }
.lado-depois .lado-ic svg { width: 22px; height: 18px; }
.lado ul { display: grid; gap: 13px; }
.lado li { position: relative; padding-left: 31px; font-size: .9rem; line-height: 1.45; }
.lado li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; }
.lado-antes li { color: #6f6977; }
.lado-antes li::before { background: #e8e2e6 url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke%3D'%23a8a2ad'%20stroke-width%3D'3'%3E%3Cpath%20d%3D'M18%206%206%2018M6%206l12%2012'%2F%3E%3C%2Fsvg%3E") center / 10px no-repeat; }
.lado-depois { border-color: #ffd3e6; box-shadow: 0 0 0 5px rgba(236, 42, 128, .05), var(--sombra-forte); }
.lado-depois li::before { background: var(--rosa) url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke%3D'%23fff'%20stroke-width%3D'3.4'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E") center / 11px no-repeat; }
.lado-depois b { color: var(--tinta); }

/* depoimentos */
.depoimentos { background: #fff6fa; }
.depo-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1060px; margin: 0 auto; }
.depo { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 30px 30px 24px; border-radius: 22px; }
.aspas { width: 30px; height: 30px; color: var(--rosa); }
.depo blockquote { flex: 1; margin: 0; font: 600 1.05rem/1.55 var(--f-tit); color: var(--tinta); letter-spacing: -.01em; }
.depo figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--linha); }
.depo figcaption .av { width: 42px; height: 42px; font-size: 12px; }
.depo figcaption b { display: block; font-size: .9rem; color: var(--tinta); }
.depo figcaption small { font-size: .78rem; color: var(--mudo); }

/* planos */
.planos { background: linear-gradient(180deg, #fff6fa 0%, #fff 100%); }
.planos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; max-width: 1120px; margin: 0 auto; }
.plano { position: relative; padding: 28px 26px; border-radius: 22px; transition: translate .35s var(--ease), box-shadow .35s; }
.plano:hover { translate: 0 -4px; box-shadow: var(--sombra-forte); }
.plano.destaque { border: 1.5px solid #f9a8cb; box-shadow: 0 0 0 5px rgba(236, 42, 128, .06), var(--sombra-forte); }
.plano-selo { position: absolute; top: -12px; left: 26px; padding: 6px 11px; border-radius: 99px; background: var(--rosa); color: #fff; font: 700 .64rem/1 var(--f-txt); letter-spacing: .08em; text-transform: uppercase; }
.plano h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.plano-desc { min-height: 2.8em; margin-top: 4px; font-size: .82rem; color: var(--mudo); }
.preco { display: flex; align-items: flex-start; gap: 4px; margin: 14px 0 20px; color: var(--tinta); }
.preco small { margin-top: 8px; font-size: .95rem; font-weight: 700; }
.preco b { font: 800 3rem/1 var(--f-tit); letter-spacing: -.04em; }
.preco span { margin-top: 6px; font-size: .76rem; font-weight: 600; line-height: 1.2; color: var(--mudo); }
.plano-itens { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linha); }
.plano-itens li { position: relative; padding-left: 28px; font-size: .86rem; line-height: 1.4; }
.plano-itens li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; }
.plano-itens .sim::before { background: #dcfce7 url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke%3D'%2316a34a'%20stroke-width%3D'3.4'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E") center / 10px no-repeat; }
.plano-itens .nao { color: #aaa4ae; }
.plano-itens .nao::before { background: #f3eff2 url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke%3D'%23a8a2ad'%20stroke-width%3D'3'%3E%3Cpath%20d%3D'M18%206%206%2018M6%206l12%2012'%2F%3E%3C%2Fsvg%3E") center / 9px no-repeat; }
.plano-itens b { color: var(--tinta); }

/* dúvidas */
.faq { background: #fff; }
.faq-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-cab { position: sticky; top: 100px; }
.faq-cab h2 { margin: 18px 0 12px; }
.faq-cab p { max-width: 22rem; font-size: .95rem; }
.faq-cab .btn { margin-top: 22px; }
.faq-lista { display: grid; gap: 10px; }
.faq-lista details { background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 1px 2px rgba(31, 16, 25, .04); transition: border-color .25s, box-shadow .25s; }
.faq-lista details[open] { border-color: #ffd3e6; box-shadow: var(--sombra); }
.faq-lista summary { position: relative; display: block; padding: 18px 58px 18px 20px; font: 700 .98rem/1.35 var(--f-tit); color: var(--tinta); cursor: pointer; list-style: none; border-radius: 16px; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--rosa-05) url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke%3D'%23ec2a80'%20stroke-width%3D'3'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; transition: rotate .3s var(--ease), background-color .25s; }
.faq-lista details[open] summary::after { rotate: 45deg; background-color: var(--rosa-1); }
.faq-lista summary:hover { color: var(--rosa-6); }
.faq-lista details p { padding: 0 20px 20px; font-size: .9rem; line-height: 1.65; }
:root { interpolate-size: allow-keywords; }
.faq-lista details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.faq-lista details[open]::details-content { block-size: auto; }

/* modal */
.modal { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--texto); box-shadow: 0 40px 80px -30px rgba(80, 10, 45, .45); }
.modal::backdrop { background: rgba(22, 20, 28, .38); backdrop-filter: blur(4px); }
.modal[open] { animation: abreModal .45s var(--ease); }
.modal[open]::backdrop { animation: some .3s ease reverse; }
@keyframes abreModal { from { opacity: 0; translate: 0 14px; scale: .97; } }
@keyframes some { to { opacity: 0; } }
.modal-caixa { position: relative; padding: 28px; }
.modal-fechar { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--rosa-05); color: #8c7a85; }
.modal-fechar:hover { color: var(--rosa); }
.modal h2 { margin: 14px 0 6px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.modal-passo > p { font-size: .88rem; margin-bottom: 16px; }
.modal label { display: grid; gap: 6px; margin-top: 12px; font-size: .78rem; font-weight: 600; color: var(--tinta); }
.modal input, .modal select { height: 46px; padding: 0 14px; border: 1px solid #e9e1e6; border-radius: 12px; background: #fff; font-size: .95rem; font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.modal input:focus, .modal select:focus { outline: 0; border-color: #f7a8ca; box-shadow: 0 0 0 4px rgba(236, 42, 128, .12); }
.modal input:user-invalid { border-color: #f87171; }
.modal-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.modal .btn-larga { margin-top: 20px; }
.modal-nota { display: block; margin-top: 10px; text-align: center; font-size: .72rem; color: var(--mudo); }
.modal-ok { text-align: center; }
.modal-ok img { width: 200px; margin: -6px auto 0; }
.modal-ok h2 { margin-top: 10px; }
.modal-ok .btn { margin-top: 16px; }

/* aviso */
.aviso { position: fixed; left: 50%; bottom: 24px; z-index: 80; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 12px; background: var(--tinta); color: #fff; font-size: .82rem; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .4); opacity: 0; translate: -50% 12px; pointer-events: none; transition: opacity .3s, translate .4s var(--ease); }
.aviso.on { opacity: 1; translate: -50% 0; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .menu { margin-left: 8px; }
  .conversa-grade { grid-template-columns: 280px minmax(0, 1fr); gap: 40px 56px; }
  .conversa-texto { grid-column: 1 / -1; max-width: 640px; }
  .celular-area { margin-left: 30px; }
  .conversa-deco { display: none; }
  .como-grade { grid-template-columns: minmax(0, 1fr); }
  .cartao-faixa { grid-template-columns: 240px minmax(0, 1fr); }
  .rodape-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-marca { grid-column: 1 / -1; }
  .rp-redes { grid-column: span 2; }
  .rp-copy { grid-column: span 2; }
}
@media (max-width: 1180px) {
  .seg { grid-template-columns: 250px minmax(0, 1fr); }
  .faq-grade { gap: 32px; }
}
@media (max-width: 960px) {
  .planos-grade { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg-abas { display: flex; gap: 8px; overflow-x: auto; margin: 0 -24px; padding: 4px 24px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .seg-abas::-webkit-scrollbar { display: none; }
  .seg-abas button { flex: none; width: auto; white-space: nowrap; padding: 6px 14px 6px 6px; border-color: var(--linha); background: #fff; scroll-snap-align: start; }
  .seg-ic { width: 32px; height: 32px; border-radius: 9px; }
  .compara, .depo-grade { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .faq-grade { grid-template-columns: minmax(0, 1fr); }
  .faq-cab { position: static; }
}
@media (max-width: 1080px) {
  .menu { display: none; }
  .menu-abrir { display: grid; }
  .heroi-grade { grid-template-columns: minmax(0, 1fr); }
  .heroi-texto { padding-bottom: 8px; text-align: center; }
  .heroi-texto .lead { margin-inline: auto; }
  .heroi-texto .acoes, .heroi-texto .selos { justify-content: center; }
  .heroi-arte { max-width: 760px; width: 100%; margin: 0 auto; }
  .recursos-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recursos-grade > :last-child { grid-column: 1 / -1; }
  .chamada { grid-template-columns: 300px minmax(0, 1fr); padding-right: 28px; }
  .ch-nina { margin-top: -150px; }
  .ch-nina img { width: 390px; margin-left: -40px; }
  .ch-vamos { top: 96px; } .ch-vamos-seta { top: 154px; }
  .ch-lado { grid-column: 1 / -1; justify-items: stretch; padding-left: 28px; }
  .ch-res { display: none; }
  .confiam { justify-self: start; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .caixa { padding: 0 16px; }
  .topo-acoes > .btn { display: none; }
  .topo-acoes > .btn-cel { display: inline-flex; }
  .topo-linha { height: 62px; }
  .heroi { padding-top: 22px; }
  .heroi h1 { font-size: clamp(2.1rem, 1.1rem + 5vw, 2.6rem); }
  .acoes .btn { flex: 1 1 100%; }
  /* palco do celular: 420×480 */
  .palco { width: 420px; height: 560px; clip-path: inset(-60px 0 0 0); }
  .h-nina { left: -133px; top: 6px; width: 700px; }
  .h-lista, .h-crm, .h-oi { display: none; }
  .h-chat { left: 0; top: 346px; width: 214px; }
  .h-vendas { left: 0; top: 28px; width: 172px; }
  .h-agenda { left: 224px; top: 396px; width: 196px; }
  .secao { padding: 56px 0; }
  .conversa-grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .conversa-texto { display: block; }
  .celular-area { justify-self: center; }
  .cel-wa { left: -22px; }
  .feito { margin-left: 0 !important; }
  .feito-seta { display: none; }
  .numeros { gap: 8px; }
  .numero { padding: 12px 10px; }
  .numero b { font-size: 1.3rem; }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .passo { display: grid; grid-template-columns: 54px 1fr; gap: 2px 14px; align-items: center; text-align: left; }
  .passo-ic { grid-row: span 2; margin: 0; }
  .passo p { margin: 0; }
  .cartao-faixa { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .recursos-grade { grid-template-columns: minmax(0, 1fr); }
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .chamada-sec { padding-top: 150px; }
  .chamada { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; text-align: center; }
  .ch-nina { margin: -200px -18px -6px; }
  .ch-nina img { width: 100%; max-width: 380px; margin: 0 auto; }
  .ch-vamos { left: -4px; top: 104px; font-size: 22px; }
  .ch-vamos-seta { display: none; }
  .ch-texto p { margin-inline: auto; }
  .ch-texto .acoes { justify-content: center; }
  .ch-lado { padding: 0; justify-items: center; }
  .confiam { justify-self: center; }
  .garantias li { font-size: .64rem; padding: 12px 4px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rp-redes, .rp-copy { grid-column: 1 / -1; text-align: left; }
  .modal-caixa { padding: 24px 20px; }
  .tec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  .tec li { font-size: .86rem; }
  .logos-tit { max-width: 330px; line-height: 1.7; }
  .crm-tela { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .cal-sem { font-size: .66rem; }
  .cal-dias span { width: 32px; height: 30px; font-size: .78rem; }
  .compromissos li { font-size: .8rem; }
  .compromissos time { font-size: .7rem; }
  .autos li { font-size: .84rem; height: 44px; }
  .integra li { font-size: .74rem; }
  .seg-abas { margin: 0 -16px; padding: 4px 16px 10px; }
  .seg-painel { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .seg-txt h3 { font-size: 1.2rem; }
  .lado { padding: 22px 18px; }
  .depo { padding: 24px 20px 20px; }
  .depo blockquote { font-size: .98rem; }
  .plano { padding: 26px 20px; }
  .faq-lista summary { padding: 16px 52px 16px 16px; font-size: .92rem; }
  .faq-lista details p { padding: 0 16px 18px; }
  .cab-secao { margin-bottom: 26px; }
  .modal-duas { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}