/* atendy: faixas escuro / claro. Visual único, não muda com o tema do visitante. */
:root {
  --v300: #4fe0c8; --v400: #2ed3ba; --v500: #19c2a8; --v600: #12a893; --on-v: #04201c;
  --tinta: #0c0f10; --tinta-2: #14181a; --tinta-3: #1d2325; --borda-e: #2a3134;
  --papel: #f6f6f5; --branco: #ffffff; --nevoa: #ececea; --borda-c: #dedfdc;
  --txt-c: #0c0f10; --suave-c: #575d5c; --txt-e: #f4f5f5; --suave-e: #a9afb0;
  --vt-c: #0a6f62;
  --f: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --pill: 999px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--tinta); color: var(--txt-e); font: 400 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }
svg, img { display: block; }
.wrap { max-width: 1200px; width: 100%; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.band { padding-block: 104px; }
.claro { background: var(--papel); color: var(--txt-c); color-scheme: light; }
.escuro { background: var(--tinta); color: var(--txt-e); }
.h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.07; letter-spacing: -.035em; }
.lead { font-size: 16px; line-height: 1.55; max-width: 50ch; }
.claro .lead { color: var(--suave-c); }
.escuro .lead { color: var(--suave-e); }
:focus-visible { outline: 2px solid var(--v300); outline-offset: 2px; }
.claro :focus-visible { outline-color: var(--vt-c); }
.sec-head { display: grid; justify-items: start; gap: 16px; margin-bottom: 48px; }
.sec-head.center { justify-items: center; text-align: center; margin-inline: auto; max-width: 760px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--v500); color: var(--on-v); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.pular:focus { top: 12px; }

/* Botões e etiqueta */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--pill); font: 600 15px/1 var(--f); padding: 15px 24px; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, box-shadow .15s ease, transform .16s var(--ease); white-space: nowrap; }
.btn svg { width: 17px; height: 17px; flex: none; fill: currentColor; }
.btn:active { transform: scale(.97); }
.btn-p { background: var(--v500); color: var(--on-v); }
.btn-g { color: var(--txt-e); border-color: #3a4144; background: rgba(255, 255, 255, .04); }
@media (hover: hover) {
  .btn-p:hover { background: var(--v400); box-shadow: 0 12px 40px rgba(25, 194, 168, .3); }
  .btn-g:hover { background: rgba(255, 255, 255, .09); }
  .nav ul a:hover, .ft a:hover, .lang a:hover { color: var(--txt-e); }
}
.eb { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px var(--f); letter-spacing: .1em; text-transform: uppercase; }
.eb i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--v500); }
.claro .eb { color: var(--suave-c); }
.escuro .eb, .hero .eb { color: var(--suave-e); }

/* Menu flutuante em pílula, com troca de idioma */
.nav { position: sticky; top: 12px; z-index: 40; padding-inline: 16px; height: 0; }
.nav .wrap { max-width: 1160px; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 60px; padding-inline: 24px 8px; border-radius: var(--pill); background: rgba(20, 24, 26, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.logo { display: inline-block; color: var(--txt-e); text-decoration: none; border-radius: 6px; }
.logo svg { height: 28px; width: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font: 500 14px/1 var(--f); color: var(--suave-e); }
.nav ul a { text-decoration: none; }
.nav-d { display: flex; align-items: center; gap: 8px; }
.nav .btn { padding: 12px 18px; font-size: 14px; }
.lang { position: relative; font: 600 13px/1 var(--f); color: var(--suave-e); }
.lang summary { list-style: none; cursor: pointer; padding: 12px 14px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .12); display: flex; gap: 6px; align-items: center; color: var(--txt-e); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang div { position: absolute; right: 0; top: calc(100% + 8px); background: var(--tinta-2); border: 1px solid var(--borda-e); border-radius: 14px; padding: 6px; display: grid; min-width: 140px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.lang a { text-decoration: none; padding: 10px 12px; border-radius: 9px; font-weight: 500; }
.lang a[aria-current] { color: var(--txt-e); background: var(--tinta-3); }

/* Hero: tela inteira, texto à esquerda e a conversa à direita */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: center; padding-block: 104px 48px; background: var(--tinta); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; -webkit-mask-image: radial-gradient(46% 60% at 77% 54%, #000 0%, transparent 76%); mask-image: radial-gradient(46% 60% at 77% 54%, #000 0%, transparent 76%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: center; }
.hero-txt { display: grid; gap: 22px; justify-items: start; }
.hero h1 { font-size: clamp(38px, 4.7vw, 64px); line-height: 1.03; letter-spacing: -.045em; }
.hero h1 em { font-style: normal; color: var(--v300); }
.hero .lead { color: #c9cdcd; font-size: 17px; max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-nota { font-size: 13px; color: var(--suave-e); max-width: 46ch; padding-left: 14px; border-left: 2px solid var(--borda-e); }
.stage { display: flex; justify-content: center; }

/* Celular com a tela do WhatsApp */
.phone { width: 300px; flex: none; aspect-ratio: 9 / 19; background: #101213; border-radius: 46px; padding: 9px; border: 1px solid #2b2f31; box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 0 0 2px #1d2022; position: relative; color: #111b21; color-scheme: light; }
.phone::before { content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: 88px; height: 25px; background: #000; border-radius: 20px; z-index: 2; }
.screen { height: 100%; border-radius: 38px; overflow: hidden; background: #efeae2; display: flex; flex-direction: column; }
.st { display: flex; justify-content: space-between; padding: 15px 26px 4px; font: 600 12px/1 var(--f); background: #f6f6f6; }
.chat-h { display: flex; align-items: center; gap: 9px; padding: 12px 14px 9px; background: #f6f6f6; border-bottom: 1px solid #e3e3e3; }
.chat-h .av { width: 32px; height: 32px; border-radius: 50%; background: #dfe5e7; color: #54656f; display: grid; place-items: center; font: 600 14px/1 var(--f); flex: none; }
.chat-h .av svg { width: 17px; height: 17px; fill: currentColor; }
.chat-h b { display: block; font: 600 14px/1.15 var(--f); }
.chat-h small { display: block; font-size: 11px; line-height: 1.25; color: #667781; }
.msgs { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; overflow: hidden; }
.m { align-self: flex-start; max-width: 86%; padding: 6px 9px; border-radius: 9px; border-top-left-radius: 0; background: #fff; font-size: 12.5px; line-height: 1.38; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); white-space: pre-line; flex: none; }
.m.eu { align-self: flex-end; background: #d9fdd3; border-radius: 9px; border-top-right-radius: 0; }
.m b { font-weight: 600; }
.m .t { float: right; margin: 7px 0 -2px 10px; font-size: 10px; line-height: 1; color: #667781; }
.m.eu .t::after { content: " \2713\2713"; color: #53bdeb; letter-spacing: -3px; }
.m.foto { padding: 4px 4px 6px; width: 64%; }
.papel { display: block; height: 70px; border-radius: 6px; margin-bottom: 5px; background: repeating-linear-gradient(#fbfbf8 0 8px, #cfd6da 8px 9px) content-box, #fbfbf8; padding: 12px 14px; border: 1px solid #e6e6e0; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; background: #fff; border-radius: 9px; border-top-left-radius: 0; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); flex: none; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: tp 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes tp { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.barra { display: flex; gap: 6px; align-items: center; padding: 6px 8px 14px; }
.barra span { flex: 1; background: #fff; border-radius: 20px; padding: 8px 14px; font-size: 12px; color: #8696a0; }
.barra i { width: 32px; height: 32px; border-radius: 50%; background: #00a884; flex: none; }
.js .seq > * { display: none; }
.js .seq > .on { display: block; animation: chega .26s var(--ease); }
.js .seq > .typing.on { display: flex; }
@keyframes chega { from { opacity: 0; transform: translateY(8px); } }

/* Números em linha, sem caixa */
#resultado { padding-block: 72px 104px; }
.bento { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 20px; }
.bt { position: relative; overflow: hidden; display: flex; border-radius: 28px; padding: 44px; min-height: 360px; }
.bt > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.bt h3 { font: 500 17px/1.3 var(--f); margin-bottom: 26px; }
.bt small { display: block; font-size: 14px; opacity: .7; margin-bottom: 6px; }
.bt p { margin-top: 14px; font-size: 15px; }
.num { display: block; font: 600 clamp(56px, 7vw, 96px)/.95 var(--f); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num i { font-style: normal; font-size: .5em; letter-spacing: -.02em; margin-inline: .06em; }
.num.v { color: var(--v300); }
.bt-fat { background: var(--nevoa); justify-content: space-between; gap: 24px; }
.bt-bars { display: flex; align-items: flex-end; gap: 28px; align-self: flex-end; }
.bt-bars div { display: grid; justify-items: center; gap: 12px; font-size: 13px; color: var(--suave-c); }
.bt-bars i { display: flex; justify-content: center; padding-top: 16px; width: 76px; height: var(--h); border-radius: 12px 12px 0 0; background: #c3c8c9; transform-origin: bottom; }
.bt-bars .on i { background: var(--v400); color: var(--on-v); }
.js .bt.rv .bt-bars i { transform: scaleY(0); }
.js .bt.rv.in .bt-bars i { transform: none; transition: transform .9s var(--ease) .3s; }
.js .bt.rv.in .bt-bars .on i { transition-delay: .45s; }
.bt-wa { background: var(--v400); color: var(--on-v); }
.bt-wa > div:first-child { justify-content: flex-start; }
.bt-card { position: absolute; right: 30px; bottom: 70px; width: 184px; display: grid; gap: 9px; padding: 18px; border-radius: 18px; background: #fff; color: var(--txt-c); font-size: 13px; transform: rotate(-8deg); box-shadow: 0 24px 40px -22px rgba(4, 32, 28, .5); }
.bt-card b { font-weight: 600; }
.bt-card span { padding-top: 9px; border-top: 1px solid var(--borda-c); color: var(--suave-c); }
.bt-chip { position: absolute; right: 28px; bottom: 28px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--txt-c); font: 500 14px/1.2 var(--f); }
.bt-chip svg { color: var(--vt-c); }
.bt-tempo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 0; background: var(--tinta); color: var(--txt-e); }
.de-para { display: flex; align-items: flex-end; gap: 28px; }
.de-para > svg { margin-bottom: 10px; color: var(--suave-e); flex: none; }
.de-para s { display: block; font: 400 clamp(26px, 3.2vw, 42px)/1.1 var(--f); letter-spacing: -.03em; color: var(--suave-e); }
.bt-24 { position: relative; padding-left: 44px; border-left: 1px solid var(--borda-e); }
.sol-lua { position: absolute; right: 0; top: 0; display: grid; justify-items: center; gap: 10px; color: var(--v300); }
.sol-lua i { width: 1px; height: 26px; background: var(--borda-e); }
.nota { margin-top: 32px; font-size: 13.5px; color: var(--suave-e); }
.claro .nota { color: var(--suave-c); }

/* Antes e depois */
.vs { display: grid; }
.vs > div { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 20px 0; border-top: 1px solid var(--borda-c); align-items: start; }
.vs > div:last-child { border-bottom: 1px solid var(--borda-c); }
.vs .cab { border-top: 0; padding-top: 0; font: 600 12px/16px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--suave-c); }
.vs .cab span:last-child { color: var(--vt-c); }
.vs b { font: 600 12px/22px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--suave-c); }
.vs p { font-size: 15px; color: var(--suave-c); }
.vs p + p { color: var(--txt-c); font-weight: 500; padding-left: 26px; position: relative; }
.vs p + p::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--v500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%2304201c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px; }

/* Lista de funcionalidades: linhas, sem caixa */
.duas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.duas .sec-head { position: sticky; top: 108px; margin: 0; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: grid; grid-template-columns: 24px minmax(0, .75fr) minmax(0, 1.25fr); gap: 16px; align-items: start; padding: 19px 0; border-top: 1px solid var(--borda-e); }
.lista li:last-child { border-bottom: 1px solid var(--borda-e); }
.lista svg { width: 22px; height: 22px; fill: var(--v300); margin-top: 1px; }
.lista b { font-weight: 600; font-size: 16px; }
.lista p { color: var(--suave-e); font-size: 14.5px; }

/* Linha do tempo da retomada */
.linha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; margin-bottom: 56px; }
.linha::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--borda-c); }
.linha div { position: relative; padding: 28px 16px 0 0; font: 500 13px/1.3 var(--mono); color: var(--suave-c); }
.linha div::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--papel); border: 2px solid #c3c6c2; }
.linha .on { color: var(--txt-c); }
.linha .on::before { background: var(--v500); border-color: var(--v500); box-shadow: 0 0 0 6px rgba(25, 194, 168, .18); }
.linha span { display: block; margin-top: 6px; font: 600 13.5px/1.3 var(--f); color: var(--vt-c); white-space: nowrap; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.tres div { border-top: 1px solid var(--borda-c); padding-top: 18px; display: grid; gap: 6px; align-content: start; }
.tres b { font-weight: 600; font-size: 16px; }
.tres p { color: var(--suave-c); font-size: 14.5px; }

/* Perguntas e respostas das objeções */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; }
.qa div { padding: 26px 0; border-top: 1px solid var(--borda-e); display: grid; gap: 8px; align-content: start; }
.qa h3 { font-size: 20px; letter-spacing: -.02em; }
.qa p { color: var(--suave-e); font-size: 15px; max-width: 50ch; }

/* Integrações: o atendy no centro, ligado a cada sistema */
.hub { position: relative; height: 560px; }
.hub .fios { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub path { fill: none; stroke: #bfc3bf; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 5 7; animation: fio 1.2s linear infinite; transition: stroke .2s; }
@keyframes fio { to { stroke-dashoffset: -24; } }
.hub path.on { stroke: var(--v500); stroke-width: 2.5; }
.hub-c { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 172px; height: 172px; border-radius: 50%; background: var(--tinta); color: var(--txt-e); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(12, 15, 16, .05), 0 24px 60px rgba(0, 0, 0, .2); }
.hub-c svg { width: 108px; height: auto; }
.no { position: absolute; width: 27%; transform: translateY(-50%); background: var(--branco); border: 1px solid var(--borda-c); border-radius: 20px; padding: 14px 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; text-align: left; font: inherit; color: inherit; cursor: default; transition: border-color .2s, box-shadow .2s; }
.no.e { left: 0; } .no.d { right: 0; } .no.t { top: 36%; } .no.b { top: 80%; }
.no.c { left: 50%; top: 0; transform: translateX(-50%); }
.lg { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--branco); border: 1px solid var(--borda-c); overflow: hidden; }
.lg img { width: 28px; height: 28px; object-fit: contain; }
.lg img.cheio { width: 100%; height: 100%; object-fit: cover; }
.no b { font-weight: 600; font-size: 16px; display: block; line-height: 1.2; }
.no small { color: var(--suave-c); font-size: 13px; }
.no p { grid-column: 1 / -1; color: var(--suave-c); font-size: 14px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease), opacity .25s, margin .35s var(--ease); }
.no:hover, .no:focus-visible { border-color: var(--v500); box-shadow: 0 14px 34px rgba(0, 0, 0, .09); z-index: 2; }
.no:hover p, .no:focus p { max-height: 130px; opacity: 1; margin-top: 10px; }

/* Duas colunas com celular ou painel */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.pontos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; max-width: 54ch; }
.pontos li { padding-left: 18px; border-left: 2px solid var(--borda-c); font-size: 14.5px; color: var(--suave-c); }
.pontos b { display: block; font-weight: 600; font-size: 16px; color: var(--txt-c); }
.escuro .pontos li { border-left-color: var(--borda-e); color: var(--suave-e); }
.escuro .pontos b { color: var(--txt-e); }
.pontos + .btn { margin-top: 32px; }

/* Painel de exemplo */
.dash { background: var(--branco); border: 1px solid var(--borda-c); border-radius: 20px; box-shadow: 0 30px 70px rgba(12, 15, 16, .1); overflow: hidden; }
.dash-top { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--borda-c); font: 500 11px/1 var(--mono); color: var(--suave-c); }
.dash-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--borda-c); }
.dash-top span { margin-left: 8px; }
.dash-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--borda-c); }
.dash-k div { padding: 16px 18px; }
.dash-k div + div { border-left: 1px solid var(--borda-c); }
.dash-k small, .dash-g small { display: block; font-size: 12px; color: var(--suave-c); }
.dash-k b { font: 500 26px/1.25 var(--f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-g { padding: 18px; }
.dash-g b { font: 500 22px/1.3 var(--f); letter-spacing: -.03em; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 14px; }
.barras i { flex: 1; background: #d9dcd8; border-radius: 4px 4px 0 0; height: var(--h); transform-origin: bottom; }
.barras i:last-child { background: var(--v500); }
.js .dash .barras i { transform: scaleY(0); }
.js .dash.in .barras i { transform: none; transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms + 150ms); }
.barras-x { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); color: var(--suave-c); margin-top: 8px; }

/* Passos numerados */
.passos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; counter-reset: p; position: relative; }
.passos::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--borda-c); }
.passos div { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 48px; }
.passos div::before { counter-increment: p; content: counter(p); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--tinta); color: var(--txt-e); display: grid; place-items: center; font: 500 13px/1 var(--mono); }
.passos b { font-weight: 600; font-size: 15px; }
.passos p { font-size: 14px; color: var(--suave-c); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq details { border-bottom: 1px solid var(--borda-c); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; font: 500 17px/1.4 var(--f); letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 16px; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--f); color: var(--suave-c); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 20px; color: var(--suave-c); font-size: 15px; max-width: 62ch; }

/* CTA final e rodapé */
.cta { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.cta::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -380px; transform: translateX(-50%); width: 1100px; height: 700px; max-width: 200vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(25, 194, 168, .22), rgba(18, 168, 147, .06) 55%, transparent); }
.cta .wrap { display: grid; justify-items: center; gap: 22px; }
.cta .h2 { max-width: 17ch; font-size: clamp(34px, 5vw, 60px); }
footer { border-top: 1px solid var(--borda-e); padding-block: 56px 40px; color: var(--suave-e); font-size: 14px; background: var(--tinta); }
.ft { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.ft .logo { margin-bottom: 16px; }
.ft h2 { margin: 0 0 12px; font: 600 13px/1 var(--f); color: var(--txt-e); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft a { text-decoration: none; }
.ft-b { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--borda-e); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* Entrada: só com JS, para a página nunca ficar vazia sem ele */
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }

@media (max-width: 1020px) {
  .nav ul { display: none; }
  .hero { min-height: 0; padding-block: 104px 64px; }
  .hero .wrap, .split, .faq, .duas { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero canvas { -webkit-mask-image: radial-gradient(80% 42% at 50% 74%, #000 0%, transparent 78%); mask-image: radial-gradient(80% 42% at 50% 74%, #000 0%, transparent 78%); }
  .duas .sec-head { position: static; }
  .split .stage, .split .dash { order: 2; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .passos::before { display: none; }
  .ft { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft > :first-child { grid-column: span 2; }
  .hub { height: auto; display: grid; gap: 10px; }
  .hub .fios { display: none; }
  .hub-c { position: static; transform: none; width: 132px; height: 132px; margin: 0 auto 14px; order: -1; }
  .hub-c svg { width: 84px; }
  .no, .no.c { position: static; width: 100%; transform: none; }
  .no p { max-height: none; opacity: 1; margin-top: 10px; }
}
@media (max-width: 640px) {
  .band { padding-block: 64px; }
  #resultado { padding-block: 48px 64px; }
  .hero { padding-block: 96px 48px; }
  .hero .eb, .hero .btn-g { display: none; }
  .hero .lead { font-size: 16px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .phone { width: 272px; border-radius: 42px; }
  .screen { border-radius: 34px; }
  .sec-head { margin-bottom: 32px; gap: 12px; }
  .lead { font-size: 15px; }
  .bt { padding: 28px; border-radius: 22px; min-height: 0; }
  .bt-fat { align-items: flex-end; gap: 12px; } .bt-bars { gap: 12px; } .bt-bars i { width: 54px; height: calc(var(--h) * .62); } .bt-bars div { font-size: 12px; white-space: nowrap; }
  .bt-wa { flex-direction: column; gap: 28px; } .bt-card { position: static; align-self: flex-end; margin-right: 12px; } .bt-chip { position: static; align-self: flex-end; margin-top: -8px; }
  .bt-tempo { grid-template-columns: minmax(0, 1fr); gap: 28px; } .bt-24 { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--borda-e); } .sol-lua { top: 28px; }
  .de-para { gap: 16px; } .de-para > svg { width: 24px; }
  .linha { margin-bottom: 40px; }
  .linha div { padding: 26px 0 0; font-size: 12px; }
  .passos { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .passos div { padding: 4px 0 0 46px; }
  .passos::before { display: block; left: 16px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .dash-k b { font-size: 20px; } .dash-k div { padding: 12px; }
  .nav { padding-inline: 10px; }
  .nav .wrap { padding-inline: 18px 7px; height: 60px; }
  .nav .btn { padding: 0 14px; min-height: 44px; font-size: 13px; }
  .lang summary { padding: 0 13px; min-height: 44px; }
  .logo svg { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .seq > * { display: block; }
  .js .dash .barras i { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav .wrap { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--tinta-2); }
}
.hero h1 { text-wrap: pretty; }
@media (max-width: 1020px) { #integracoes .lead { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .bt.rv .bt-bars i { transform: none; } }

/* Menu no celular: os links das seções entram no mesmo menu do idioma */
.hb, .lang-m, .hub-info, .arraste { display: none; }
@media (max-width: 1020px) {
  .hb { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; margin-right: 4px; }
  .lang-m { display: grid; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--borda-e); }
  .lang div { min-width: 210px; }
  .lang a { padding: 13px 12px; font-size: 15px; }
}

/* Celular: cada seção com uma forma própria, sem virar uma lista corrida */
@media (max-width: 640px) {
  .sec-head, .hero-txt { justify-items: center; text-align: center; }
  .sec-head .lead, .hero .lead { margin-inline: auto; }
  .hero h1 { font-size: clamp(29px, 8.9vw, 40px); }
  .split .btn, .sec-head .btn { width: 100%; justify-content: center; }
  .split .h2 { text-align: center; } .split .eb { display: flex; justify-content: center; }
  .ft a { display: block; padding: 9px 0; } .ft ul { gap: 0; }

  /* Antes e depois, objeções: cartões para arrastar de lado */
  .vs, .qa { display: flex; gap: 12px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vs::-webkit-scrollbar, .qa::-webkit-scrollbar { display: none; }
  .vs .cab { display: none; }
  .vs > div, .vs > div:last-child, .qa div { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--borda-c); border-radius: 22px; }
  .vs > div { display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--branco); overflow: hidden; }
  .vs b { padding: 20px 20px 4px; color: var(--txt-c); font-size: 13px; }
  .vs p, .vs p + p { padding: 34px 20px 20px; position: relative; font-size: 15px; }
  .vs p::after { content: attr(data-l); position: absolute; left: 20px; top: 12px; font: 600 11px/16px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--suave-c); }
  .vs p + p { flex: 1; background: var(--tinta); color: var(--txt-e); padding-left: 46px; }
  .vs p + p::before { left: 20px; top: 38px; }
  .vs p + p::after { color: var(--v300); }
  .qa { counter-reset: q; }
  .qa div { border-color: var(--borda-e); background: var(--tinta-2); padding: 22px; gap: 10px; }
  .qa div::before { counter-increment: q; content: "0" counter(q); font: 500 13px/1 var(--mono); color: var(--v300); }
  .qa h3 { font-size: 19px; }
  .arraste { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font: 500 12px/1 var(--mono); opacity: .6; }

  /* Funcionalidades: grade de dois em dois */
  .lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lista li, .lista li:last-child { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; border: 1px solid var(--borda-e); border-radius: 18px; background: var(--tinta-2); }
  .lista svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(79, 224, 200, .1); margin: 0 0 4px; }
  .lista b { font-size: 15px; line-height: 1.25; }
  .lista p { font-size: 13.5px; line-height: 1.45; }

  /* Retomada e pontos: blocos, não linhas soltas */
  .tres { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tres div { border: 0; border-radius: 18px; background: var(--nevoa); padding: 18px 20px; }
  .pontos { gap: 0; border: 1px solid var(--borda-c); border-radius: 20px; overflow: hidden; }
  .pontos li { border-left: 0; padding: 16px 18px; }
  .pontos li + li { border-top: 1px solid var(--borda-c); }
  .escuro .pontos, .escuro .pontos li + li { border-color: var(--borda-e); }
  .escuro .pontos { background: var(--tinta-2); }
  .claro .pontos { background: var(--branco); }

  /* Integrações: atendy em cima, os sistemas numa fileira ligada por fios, detalhe embaixo */
  .hub { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; justify-items: center; }
  .hub-c { grid-column: 1 / -1; position: relative; left: auto; top: auto; margin: 0 auto 44px; }
  .hub-c::after { content: ""; position: absolute; left: 50%; top: 100%; height: 28px; border-left: 1.5px dashed #bfc3bf; }
  .hub::before { content: ""; position: absolute; left: 10%; right: 10%; top: 160px; border-top: 1.5px dashed #bfc3bf; }
  .hub .no { inset: auto; }
  .no, .no.c { position: relative; width: auto; padding: 0; border: 0; border-radius: 16px; background: none; display: block; cursor: pointer; box-shadow: none; }
  .no::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 16px; border-left: 1.5px dashed #bfc3bf; }
  .no.sel::before { border-left: 2px solid var(--v500); }
  .no .lg { width: 56px; height: 56px; border-radius: 16px; transition: box-shadow .2s, border-color .2s; }
  .no .lg img { width: 34px; height: 34px; }
  .no.sel .lg { border-color: var(--v500); box-shadow: 0 0 0 4px rgba(25, 194, 168, .2); }
  .no > span:not(.lg) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .no p { display: none; }
  .hub-info { grid-column: 1 / -1; width: 100%; margin-top: 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 168px; align-content: start; padding: 18px; border: 1px solid var(--borda-c); border-radius: 20px; background: var(--branco); }
  .hub-info b { display: block; font-weight: 600; font-size: 16px; line-height: 1.2; }
  .hub-info small { color: var(--suave-c); font-size: 13px; }
  .hub-info p { grid-column: 1 / -1; margin-top: 8px; color: var(--suave-c); font-size: 14.5px; }
}
@media (max-width: 400px) {
  .nav .wrap { gap: 10px; padding-left: 14px; }
  .nav .btn { padding-inline: 12px; }
  .lang summary { font-size: 0; }
  .hb { margin-right: 0; }
}
@media (max-width: 340px) {
  .nav { padding-inline: 6px; }
  .nav .wrap { gap: 6px; padding-left: 12px; }
  .nav .btn { font-size: 12px; padding-inline: 10px; }
  .logo svg { height: 20px; }
}
/* O texto do painel verde não passa por baixo do cartão inclinado */
@media (min-width: 641px) { .bt-wa > div:first-child { max-width: calc(100% - 236px); } }
.bt-wa h3 { white-space: nowrap; }
@media (max-width: 1020px) { .hero h1 br { display: none; } .hero h1 { text-wrap: balance; } }

/* Desktop: cada seção cabe na altura da tela (a partir de ~700 px de altura útil) */
@media (min-width: 1021px) {
  .band { padding-block: clamp(62px, 8.6vh, 104px); }
  .cta, #preco { padding-block: clamp(64px, 10vh, 104px); }
  .h2 { font-size: clamp(30px, min(4vw, 5.6vh), 48px); }
  .sec-head { margin-bottom: clamp(28px, 4.5vh, 48px); gap: 14px; }
  .phone { width: min(300px, calc((100svh - 190px) * 9 / 19)); }
  .hero { padding-block: 100px 40px; }

  .bento { gap: clamp(12px, 2vh, 20px); }
  .bt { min-height: clamp(200px, 29vh, 340px); padding: clamp(22px, 3.6vh, 44px) 44px; }
  .de-para s { font-size: clamp(22px, 4.4vh, 42px); }
  #resultado .sec-head { margin-bottom: clamp(20px, 3.4vh, 48px); }
  .bt-tempo { min-height: 0; }
  .bt h3 { margin-bottom: clamp(12px, 2.4vh, 26px); }
  .num { font-size: clamp(46px, min(7vw, 9.4vh), 96px); }
  .bt-bars i { height: calc(var(--h) * var(--k)); }
  .bt-bars { --k: clamp(.5, calc((100vh - 500px) / 400px), 1); }
  .bt-card { bottom: 62px; padding: 14px 16px; gap: 7px; } .bt-card span { padding-top: 7px; }

  .vs > div { padding: clamp(12px, 1.9vh, 20px) 0; }
  .duas { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 56px; align-items: center; }
  .duas .sec-head { position: static; }
  .lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .lista li { grid-template-columns: 24px minmax(0, 1fr); align-content: start; row-gap: 3px; padding: clamp(11px, 1.7vh, 16px) 0; }
  .lista li:nth-last-child(2) { border-bottom: 1px solid var(--borda-e); }
  .lista p { grid-column: 2; font-size: 14px; }
  .qa div { padding: clamp(14px, 2.3vh, 26px) 0; gap: 6px; }
  .hub { height: clamp(340px, 49vh, 560px); }
  .hub-c { width: clamp(124px, 19vh, 172px); height: clamp(124px, 19vh, 172px); }
  .hub-c svg { width: 62%; }
  .hub + .nota { margin-top: 14px; }
  #integracoes .sec-head { margin-bottom: clamp(16px, 2.6vh, 48px); gap: 10px; }
  .pontos { gap: clamp(9px, 1.6vh, 16px); margin-top: clamp(16px, 3vh, 28px); }
  .pontos + .btn { margin-top: clamp(18px, 3vh, 32px); }
  .barras { height: clamp(96px, 15vh, 150px); }
}

/* Celular: nas seções de cartões, rolar para baixo passa os cartões de lado e só depois a página desce */
@media (max-width: 640px) {
  .band.pin { padding-block: 0; height: calc(100svh + var(--dist, 0px)); }
  .band.pin > .wrap { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; }
  .pin .vs, .pin .qa { overflow-x: hidden; scroll-snap-type: none; flex: none; }
  .pin .arraste { letter-spacing: .08em; }
}

/* Para quem é: segmentos à esquerda, o que a Bia faz em cada um à direita */
.seg { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 20px; }
.seg-tabs { display: grid; gap: clamp(6px, 1vh, 8px); align-content: start; }
.seg-tabs button { display: flex; align-items: center; gap: 12px; padding: clamp(9px, 1.55vh, 15px) 18px; border: 1px solid var(--borda-e); border-radius: 16px; background: var(--tinta-2); color: var(--suave-e); font: 500 16px/1.25 var(--f); text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.seg-tabs svg { flex: none; color: var(--v300); }
.seg-tabs button[aria-selected="true"] { background: var(--papel); border-color: var(--papel); color: var(--txt-c); }
.seg-tabs button[aria-selected="true"] svg { color: var(--vt-c); }
.seg-pane { height: 100%; display: grid; align-content: center; gap: 14px; padding: clamp(24px, 4vh, 40px) 44px; border-radius: 28px; background: var(--papel); color: var(--txt-c); }
.seg-pane[hidden] { display: none; }
.seg-pane h3 { font: 500 clamp(22px, 2.2vw, 28px)/1.15 var(--f); letter-spacing: -.025em; }
.seg-pane p { color: var(--suave-c); font-size: 16px; }
.seg-pane ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.seg-pane li, .pq-ok li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.4; }
.seg-pane li svg { color: var(--vt-c); margin-top: 1px; }
.pq-ok { list-style: none; margin: clamp(18px, 3vh, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pq-ok li { font-size: 14.5px; color: var(--suave-e); }
.pq-ok svg { color: var(--v300); margin-top: 1px; }
@media (hover: hover) { .seg-tabs button:hover { color: var(--txt-e); } .seg-tabs button[aria-selected="true"]:hover { color: var(--txt-c); } }
@media (max-width: 1020px) {
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg-tabs { display: flex; gap: 8px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .seg-tabs::-webkit-scrollbar { display: none; }
  .seg-tabs button { flex: none; padding: 11px 16px 11px 13px; border-radius: var(--pill); font-size: 14.5px; white-space: nowrap; }
  .pq-ok { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) { .seg-pane { padding: 26px 22px; border-radius: 22px; min-height: 290px; align-content: start; } .seg-pane li { font-size: 15px; } }
/* Celular baixo (até 620 px de altura): a seção presa precisa caber inteira */
@media (max-width: 640px) and (max-height: 620px) {
  .band.pin > .wrap { padding-top: 62px; }
  .pin .sec-head { margin-bottom: 16px; gap: 8px; }
  .pin .h2 { font-size: 25px; }
  .pin .arraste { margin-top: 10px; }
}

/* páginas por termo */
.lp-card.seg-pane { max-width: 720px; height: auto; min-height: 0; margin-inline: auto; }
.lp-rel { margin: 28px auto 0; max-width: 720px; text-align: center; font-size: 14.5px; line-height: 1.9; color: var(--suave-e); }
.lp-rel a { color: inherit; }
@media (min-width: 1021px) { .ft:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }