/* =========================================================================
   WebSam CRM · site público
   Identidade oficial: Profundo, Céu, Brisa e Sol · Montserrat + IBM Plex
   Conceito: a nuvem que toca o chão. A página é uma descida: começa no céu,
   onde cada conversa é um ponto de luz solto, e termina no chão, onde cada
   uma tem lugar. O Traço (7 · 1 · 1 · 1 · 3) é o chão e o fio condutor.
   ========================================================================= */

/* ---------- Fontes locais ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-vf.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Fontes de reserva com a largura calibrada: enquanto a fonte de verdade não chega, o texto ocupa o mesmo espaço e
   nada pula de lugar na troca. Medido em frases do site: Montserrat 700 é 9,5% mais larga que Arial Bold, a 600 é
   7,6%, e IBM Plex Sans é 0,75% mais larga que Arial. Subida e descida divididas pelo mesmo fator. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"), local("Helvetica-Bold");
  font-weight: 651 900;
  size-adjust: 109.5%;
  ascent-override: 88.4%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"), local("Helvetica-Bold");
  font-weight: 100 650;
  size-adjust: 107.6%;
  ascent-override: 90%;
  descent-override: 23.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"), local("Roboto-Regular"), local("Helvetica");
  size-adjust: 100.75%;
  ascent-override: 101.7%;
  descent-override: 27.3%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
@property --h-fg { syntax: "<color>"; inherits: true; initial-value: #F7FBFC; }
@property --h-fg2 { syntax: "<color>"; inherits: true; initial-value: #A9C9DF; }
@property --h-bg { syntax: "<color>"; inherits: true; initial-value: rgba(0, 28, 45, .78); }
@property --h-line { syntax: "<color>"; inherits: true; initial-value: rgba(142, 202, 230, .16); }
@property --h-hi { syntax: "<color>"; inherits: true; initial-value: #5CB8D2; }

:root {
  --p950: #001C2D;
  --p900: #023047;
  --p800: #134764;
  --p500: #5891B4;
  --c700: #0C687D;
  --c500: #219EBC;
  --c400: #5CB8D2;
  --brisa: #8ECAE6;
  --c200: #B7E5F4;
  --c100: #D8F2FB;
  --sol: #FFB703;
  --sol-400: #FEC96C;
  --n100: #F0F4F7;
  --n950: #071820;
  --ink: #00121D;

  --f-display: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
  --f-text: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 5vw, 88px);
  --wrap: min(1240px, calc(100% - var(--gutter) * 2));
  --wrap-left: calc((100% - var(--wrap)) / 2);
  --header-h: 72px;
  --seam: clamp(120px, 24vh, 240px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* O Traço em CSS: linha 7 · vão 1 · ponto 1 · vão 1 · linha 3 */
  --traco-2: linear-gradient(currentColor 0 0) 0 0 / 14px 100% no-repeat,
             linear-gradient(currentColor 0 0) 16px 0 / 2px 100% no-repeat,
             linear-gradient(currentColor 0 0) 20px 0 / 6px 100% no-repeat;
  --traco-3: linear-gradient(currentColor 0 0) 0 0 / 21px 100% no-repeat,
             linear-gradient(currentColor 0 0) 24px 0 / 3px 100% no-repeat,
             linear-gradient(currentColor 0 0) 30px 0 / 9px 100% no-repeat;

  /* tema do cabeçalho, da barra de progresso e do cursor: segue a seção que está sob o cabeçalho */
  --h-fg: #F7FBFC; --h-fg2: #A9C9DF; --h-bg: rgba(0, 28, 45, .78); --h-line: rgba(142, 202, 230, .16); --h-hi: #5CB8D2;
  --btn-bg: #5CB8D2; --btn-fg: #001C2D;
  --hi: #5CB8D2;
}
html[data-theme="light"] {
  --h-fg: #071820; --h-fg2: #455661; --h-bg: rgba(240, 244, 247, .84); --h-line: rgba(2, 48, 71, .12); --h-hi: #0C687D;
  --btn-bg: #023047; --btn-fg: #FFFFFF;
  --hi: #0C687D;
}
html[data-theme="deep"] {
  --h-fg: #F7FBFC; --h-fg2: #B7D3E6; --h-bg: rgba(2, 48, 71, .8); --h-line: rgba(142, 202, 230, .2); --h-hi: #8ECAE6;
  --hi: #8ECAE6;
}
html {
  transition: --h-fg .5s var(--ease), --h-fg2 .5s var(--ease), --h-bg .5s var(--ease), --h-line .5s var(--ease), --h-hi .5s var(--ease);
}

/* tom de cada seção: as variáveis valem para tudo dentro dela */
[data-tone="dark"] {
  --bg: var(--p950); --fg: #F7FBFC; --fg2: #A9C9DF; --line: rgba(142, 202, 230, .14); --line2: rgba(142, 202, 230, .3);
  --hi: #5CB8D2; --card: rgba(255, 255, 255, .045); --btn-bg: #5CB8D2; --btn-fg: #001C2D;
}
[data-tone="light"] {
  --bg: var(--n100); --fg: #071820; --fg2: #455661; --line: rgba(2, 48, 71, .09); --line2: rgba(2, 48, 71, .2);
  --hi: #0C687D; --card: #FFFFFF; --btn-bg: #023047; --btn-fg: #FFFFFF;
}
[data-tone="deep"] {
  --bg: var(--p900); --fg: #F7FBFC; --fg2: #B7D3E6; --line: rgba(142, 202, 230, .16); --line2: rgba(142, 202, 230, .32);
  --hi: #8ECAE6; --card: rgba(0, 28, 45, .42); --btn-bg: #5CB8D2; --btn-fg: #001C2D;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--p950);
  color: #F7FBFC;
  font-family: var(--f-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--sol); color: var(--p950); }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 4px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -64px; z-index: 300;
  padding: .7rem 1rem; border-radius: 10px;
  background: var(--sol); color: var(--p950);
  font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 16px; }
[hidden] { display: none !important; }

.mono {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* o eyebrow é Montserrat em caixa alta (regra da marca); o Traço marca o ponto onde o fio condutor passa */
.eyebrow {
  display: flex; align-items: center; gap: .75em;
  margin: 0 0 1.5rem;
  color: var(--fg2);
  font-family: var(--f-display); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
  transition: color .5s;
}
.eyebrow[data-node]::before {
  content: ""; flex: none;
  width: 26px; height: 2px;
  background: var(--traco-2);
  color: var(--hi);
  opacity: .45;
  transition: opacity .5s;
}
.eyebrow.lit { color: var(--hi); }
.eyebrow.lit::before { opacity: 1; }
.eyebrow .dot {
  width: .6em; height: .6em; border-radius: 50%; flex: none;
  background: var(--hi);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 22%, transparent);
}
.h2 {
  font-size: clamp(2.15rem, 1.1rem + 3.9vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.045em;
}
/* Linhas reveladas por SplitText: cada linha ganha uma máscara com folga para as hastes (padding) compensada por margem negativa.
   Como blocos comuns, as margens negativas de linhas vizinhas se fundem e o título cresce uns pixels quando o script o divide
   (deslocamento de layout). Como inline-block de largura total elas não se fundem: a altura antes e depois é a mesma. */
.rl-mask { display: inline-block !important; width: 100%; vertical-align: top; padding: .12em 0 .1em; margin: -.12em 0 -.1em; }
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease);
}
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end; gap: 1.5rem 4rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.sec-lead { max-width: 31rem; color: var(--fg2); font-size: clamp(1rem, .96rem + .25vw, 1.15rem); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 48px; padding: .95rem 1.45rem;
  border: 1px solid transparent; border-radius: 12px;
  font-family: var(--f-display); font-size: 1rem; font-weight: 600; line-height: 1.1;
  letter-spacing: -.01em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .3s var(--ease);
}
.btn:hover .ico, .cta-orb:hover .ico { transform: translate(3px, -3px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-sol {
  background: var(--sol); color: var(--p950);
  box-shadow: 0 14px 44px -14px rgba(255, 183, 3, .6);
}
.btn-sol:hover { background: var(--sol-400); }
.btn-ghost { border-color: var(--line2); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: var(--fg); }
.btn-sm { min-height: 44px; padding: .6rem 1rem; font-size: .9rem; border-radius: 10px; }
.btn-link {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding-block: .3rem;
  font-family: var(--f-display); font-weight: 600;
  text-decoration: none; color: var(--fg);
  background: linear-gradient(currentColor 0 0) 0 calc(50% + .85em) / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.btn-link:hover { background-size: 0 1px; background-position: 100% calc(50% + .85em); }

/* ---------- Abertura (tela de carregamento) ---------- */
.loader { display: none; }
.js:not(.lite):not(.paused) .loader {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  background: var(--p950); color: #F7FBFC;
  animation: loader-bye .5s ease 3.8s forwards;
}
@keyframes loader-bye { to { opacity: 0; visibility: hidden; } }
.loader-cloud {
  position: absolute; left: 50%; top: 44%;
  width: min(360px, 62vw); height: auto; overflow: visible;
  transform: translate(-50%, -50%);
}
.loader-cloud path {
  fill: none; stroke-width: 1.3; stroke-linecap: butt;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: lc-draw 1.5s var(--ease-io) .1s forwards;
}
.lc-nuvem { stroke: var(--brisa); }
.lc-ponto { stroke: var(--c500); }
@keyframes lc-draw { to { stroke-dashoffset: 0; } }
.loader-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-cap {
  position: absolute; left: 50%; top: calc(44% + min(220px, 38vw)); transform: translateX(-50%);
  color: var(--brisa); opacity: 0; white-space: nowrap;
  animation: cap-in .6s var(--ease) .5s forwards;
}
@keyframes cap-in { to { opacity: .9; } }

/* ---------- Barra de progresso (O Traço repetido) ---------- */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 220; height: 3px; pointer-events: none; }
.progress span {
  display: block; height: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='3'%3E%3Cg fill='%23219EBC'%3E%3Crect width='21' height='3'/%3E%3Crect x='24' width='3' height='3'/%3E%3Crect x='30' width='9' height='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 45px 3px repeat-x;
}

/* ---------- Cabeçalho ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--hh, var(--header-h));
  display: flex; align-items: center;
  color: var(--h-fg);
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease), height .45s var(--ease), background-color .4s, border-color .4s;
}
.header.scrolled {
  --hh: 60px;
  background: var(--h-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-bottom-color: var(--h-line);
}
.header.hidden { transform: translateY(-100%); }
.menu-open .header { transform: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 44px; text-decoration: none; color: inherit;
}
.brand-logo { width: 148px; height: 19px; overflow: visible; }
.brand-sep { width: 1px; height: 18px; background: currentColor; opacity: .3; }
.brand-desc { font-family: var(--f-display); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
/* cores da logo: negativa (Web branco, nuvem em degradê claro) em fundo escuro e colorida (Web Profundo) em fundo claro.
   Dois símbolos de nuvem com o degradê escrito no próprio símbolo (atributo, não variável CSS) e um só de texto que segue o
   "color": assim a troca de tema não depende de url() dentro de propriedade personalizada, que os navegadores resolvem de jeitos diferentes. */
.brand-logo { color: #FFFFFF; }
.brand-logo .lg-col { display: none; }
html[data-theme="light"] .header .brand-logo { color: #023047; }
html[data-theme="light"] .header .brand-logo .lg-neg { display: none; }
html[data-theme="light"] .header .brand-logo .lg-col { display: inline; }
.nav { display: flex; align-items: center; gap: 1.7rem; font-size: .93rem; }
.nav a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--h-fg2); text-decoration: none; transition: color .2s;
}
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--h-fg); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; bottom: 6px; width: 26px; height: 2px;
  background: var(--traco-2); color: var(--h-hi);
}
.nav-cta { display: none; }
.nav-entrar { margin-left: .4rem; padding-inline: .4rem; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.menu-btn {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--h-line); border-radius: 12px; background: transparent; cursor: pointer;
}
.menu-btn span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--h-fg);
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }

/* ---------- Cursor (só computador com mouse) ---------- */
.cursor { display: none; }
.has-cursor .cursor {
  display: block;
  position: fixed; left: 0; top: 0; z-index: 240;
  pointer-events: none;
  mix-blend-mode: difference;
}
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .75);
  transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background-color .3s, border-color .3s, opacity .3s;
}
.cursor-label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #000; white-space: nowrap; opacity: 0; transition: opacity .2s;
}
.cursor.is-link .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.cursor.is-label .cursor-ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: #fff; border-color: #fff; }
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-none .cursor-ring { opacity: 0; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor], .has-cursor summary, .has-cursor label { cursor: none; }

/* ---------- Estrutura geral e O Traço condutor ---------- */
main { position: relative; display: block; isolation: isolate; }
main > section, .est-pin > section { position: relative; color: var(--fg); }
/* o fundo de cada seção fica atrás do fio condutor (z -2); o fio (z -1) fica atrás do conteúdo */
.cmp::before, .est::before, .ae::before, .rec::before, .planos::before, .faq::before, .final::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
}
.cmp::before { background: linear-gradient(180deg, var(--p950) 0, var(--n100) var(--seam)); }
.est::before, .ae::before, .rec::before { background: var(--n100); }
.planos::before { background: linear-gradient(180deg, var(--n100) 0, var(--p900) var(--seam)); }
.faq::before { background: var(--p900); }
.final::before { background: linear-gradient(180deg, var(--p900) 0, var(--p950) 220px); }
.has-pin .est-pin { position: relative; z-index: 1 !important; }
.signal {
  position: absolute; left: 0; top: 0; z-index: -1;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  color: var(--c500);
}
.sig-ghost {
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-dasharray: 1.2 8; stroke-linecap: round; opacity: .38;
}
.sig-line {
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: 35 5 5 5 15 10;
}
/* pontos de luz que correm pelo fio: uma conversa a cada trecho */
.sig-run {
  fill: none; stroke: var(--brisa); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 0 340; opacity: .85;
}
.sig-node { fill: transparent; stroke: currentColor; stroke-width: 1.5; transition: fill .4s; }
.sig-node.on { fill: currentColor; }
.sig-node-ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sig-node-ring.on { animation: node-ping 1s var(--ease) 1; }
@keyframes node-ping {
  0% { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(3.4); }
}
.sig-head {
  position: absolute; left: 0; top: 0; z-index: -1;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--brisa);
  box-shadow: 0 0 0 5px rgba(142, 202, 230, .22), 0 0 26px 6px rgba(142, 202, 230, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
  will-change: transform;
}
.sig-head.on { opacity: 1; }

.grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}
.cloud-cut { position: absolute; max-width: none; height: auto; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.2px; }


/* ---------- 01 · Topo ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--p950);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg .grid-lines {
  -webkit-mask-image: radial-gradient(95% 80% at 72% 42%, #000 18%, transparent 74%);
  mask-image: radial-gradient(95% 80% at 72% 42%, #000 18%, transparent 74%);
}
.hero .cloud-cut { width: min(1500px, 125vw); right: -32vw; top: 3%; color: var(--brisa); opacity: .14; }
.hero-glow {
  position: absolute; right: -6vw; top: 4%;
  width: min(940px, 78vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 158, 188, .3), rgba(33, 158, 188, .07) 42%, transparent 66%);
}
/* pontos em CSS: o campo de partículas no celular, sem JavaScript e com movimento reduzido */
.hero-dots i {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); border-radius: 50%;
  background: var(--brisa); opacity: .55;
  box-shadow: 0 0 10px 1px rgba(142, 202, 230, .55);
  animation: dot-float 9s ease-in-out var(--d) infinite alternate;
}
@keyframes dot-float { to { transform: translate3d(0, -14px, 0); opacity: .95; } }
.field-on .hero-dots { display: none; }
.field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

.hero-inner {
  position: relative; z-index: 3; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center; column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 2.5rem));
  padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
}
.hero-copy { position: relative; z-index: 3; min-width: 0; }
.hero-eyebrow { margin-bottom: clamp(1.1rem, 3vh, 1.8rem); }
.hero-title {
  margin: 0 0 clamp(1.2rem, 3vh, 1.8rem);
  font-size: clamp(2.25rem, 5.2vw, 4.7rem);
  line-height: .96; letter-spacing: -.047em;
}
.hl { display: block; overflow: hidden; padding: .12em 0 .08em; margin: -.12em 0 -.08em; }
.hl-in { display: inline-block; }
.hl-acc { color: var(--c400); }
.acc-text { white-space: nowrap; }
.hero-lead { max-width: 32rem; margin-bottom: clamp(1.4rem, 4vh, 2.2rem); color: var(--fg2); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; }
.hero-note { margin-top: 1.1rem; color: var(--fg2); font-size: .9rem; }

/* O palco: o celular onde a conversa acontece e o funil onde ela pousa. Medidas em unidades da caixa (cqi/cqb) */
.stage { position: relative; display: grid; justify-items: center; align-self: center; min-width: 0; }
.stage-glow {
  position: absolute; inset: 6% 0 10%; pointer-events: none;
  background: radial-gradient(55% 55% at 40% 50%, rgba(33, 158, 188, .22), transparent 72%);
}
.stage-box {
  position: relative; container-type: size;
  width: min(100%, calc((100svh - 190px) * 1.02)); aspect-ratio: 1.02 / 1; min-width: 0;
}
.stage-cap { position: relative; margin-top: .9rem; color: rgba(142, 202, 230, .8); font-size: .64rem; text-align: center; }
.phone {
  position: absolute; left: 0; top: 1cqb; z-index: 2;
  height: 98cqb; aspect-ratio: 9 / 18.6; container-type: inline-size;
  padding: .6cqb; border-radius: 5.4cqb;
  background: linear-gradient(160deg, #24475c, #06131b 60%);
  border: 1px solid rgba(142, 202, 230, .42);
  box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .85), 0 0 60px -18px rgba(33, 158, 188, .35);
  will-change: transform;
}
.wa {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 4.8cqb;
  background: #0b141a radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.6px) 0 0 / 15px 15px;
  color: #e9edef;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wa svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-top { display: flex; align-items: center; gap: 2.4cqi; height: 17cqi; padding: 4.2cqi 3.2cqi 0 2.6cqi; background: #202c33; color: #aebac1; flex: none; }
.wa-top > svg { width: 5.6cqi; height: 5.6cqi; }
.wa-av { flex: none; display: grid; place-items: center; width: 9cqi; height: 9cqi; margin-left: -.6cqi; border-radius: 50%; background: #6a7175; color: #dfe5e7; font-style: normal; font-size: 4cqi; font-weight: 600; }
.wa-who { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; min-width: 0; }
.wa-who b { color: #e9edef; font-size: 4.2cqi; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-who small { color: #8696a0; font-size: 3cqi; }
.wa-dots { flex: none; width: .9cqi; height: .9cqi; margin: 0 1cqi 0 1.4cqi; border-radius: 50%; background: currentColor; box-shadow: 0 -1.7cqi 0 currentColor, 0 1.7cqi 0 currentColor; }
.wa-msgs {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.8cqi;
  padding: 3cqi 3.4cqi; overflow: hidden; position: relative;
}
.msg {
  position: relative; max-width: 84%; margin: 0; padding: 1.8cqi 2.4cqi 2cqi;
  border-radius: 2.2cqi; font-size: 3.9cqi; line-height: 1.36;
  box-shadow: 0 1px .5px rgba(0, 0, 0, .25);
}
.msg::before { content: ""; position: absolute; top: 0; width: 2cqi; height: 3cqi; background: inherit; }
.msg.in { align-self: flex-start; border-top-left-radius: 0; background: #202c33; }
.msg.in::before { right: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg.out { align-self: flex-end; border-top-right-radius: 0; background: #005c4b; }
.msg.out::before { left: 100%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg small { display: block; margin-bottom: .4cqi; color: #8be8cf; font-size: 2.9cqi; font-weight: 600; }
.mt { float: right; display: inline-flex; align-items: center; gap: .8cqi; margin: 1.8cqi 0 -.8cqi 2.4cqi; color: rgba(233, 237, 239, .8); font-size: 2.7cqi; line-height: 1; }
.mt svg { width: 4cqi; height: 3.2cqi; stroke: #53bdeb; stroke-width: 1.7; }
.chip {
  align-self: center; display: inline-flex; align-items: center; gap: 1.5cqi;
  padding: 1.5cqi 3.2cqi; border-radius: 2cqi;
  font-family: var(--f-text); font-size: 2.9cqi; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.chip i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: currentColor; }
.chip-q { background: rgba(92, 184, 210, .16); color: #bfeaf6; border: 1px solid rgba(92, 184, 210, .55); }
.chip-t { background: var(--c400); color: var(--p950); }
.typing { align-self: flex-end; display: flex; gap: 1cqi; margin: 0; padding: 2.6cqi 3cqi; border-radius: 2.2cqi; border-top-right-radius: 0; background: #005c4b; }
.typing i { width: 1.7cqi; height: 1.7cqi; border-radius: 50%; background: #d1f4eb; animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
html:not(.motion) .typing { display: none; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-.9cqi); opacity: 1; }
}
.wa-bar { flex: none; display: flex; align-items: center; gap: 1.8cqi; padding: 1.4cqi 2cqi 2.6cqi; }
.wa-input { flex: 1; display: flex; align-items: center; gap: 2.4cqi; height: 9cqi; padding: 0 3cqi; border-radius: 4.5cqi; background: #202c33; color: #8696a0; }
.wa-input svg { width: 4.6cqi; height: 4.6cqi; }
.wa-input em { margin-right: auto; font-style: normal; font-size: 3.7cqi; }
.wa-mic { flex: none; display: grid; place-items: center; width: 9cqi; height: 9cqi; border-radius: 50%; background: #00a884; color: #0b141a; }
.wa-mic svg { width: 4.6cqi; height: 4.6cqi; }

/* funil pequeno: a interface do sistema (claro) ao lado do WhatsApp (escuro) */
.mini-funnel {
  position: absolute; right: 0; top: 17cqb; z-index: 3;
  width: 50cqi; container-type: inline-size;
  padding: 1.6cqb 1.6cqb 1.8cqb; border-radius: 3cqb;
  background: #fff; color: var(--n950);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 70px -20px rgba(142, 202, 230, .35);
  font-family: var(--f-text);
}
.mf-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; margin-bottom: 3cqi; }
.mf-head b { font-family: var(--f-display); font-size: 4.6cqi; font-weight: 700; letter-spacing: -.02em; }
.mf-live { display: inline-flex; align-items: center; gap: 1.2cqi; color: var(--c700); font-size: 2.6cqi; }
.mf-live i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #2fb98a; box-shadow: 0 0 0 .8cqi rgba(47, 185, 138, .22); animation: pulse-s 2s ease-in-out infinite; }
@keyframes pulse-s { 50% { transform: scale(1.35); } }
.mf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; }
.mf-col { display: flex; flex-direction: column; gap: 1.8cqi; min-width: 0; min-height: 52cqi; padding: 2cqi 1.6cqi; border-radius: 2.4cqi; background: #EDF2F5; }
.mf-col h5 { margin: 0 0 .6cqi; padding-bottom: 1.6cqi; border-bottom: 1px solid rgba(2, 48, 71, .12); font-family: var(--f-text); font-size: 2.9cqi; font-weight: 600; letter-spacing: 0; color: #2f4551; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-card, .kc {
  position: relative; display: flex; align-items: center; gap: 1.6cqi;
  padding: 1.8cqi; border-radius: 2cqi; background: #fff;
  border: 1px solid rgba(2, 48, 71, .12); box-shadow: 0 1px 2px rgba(2, 48, 71, .06);
}
.mf-card span, .kc span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mf-card b, .kc b { font-size: 3.1cqi; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-card small, .kc small { color: #566873; font-size: 2.6cqi; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-card .own { flex: none; margin-left: auto; display: grid; place-items: center; width: 4.2cqi; height: 4.2cqi; border-radius: 50%; background: var(--c100); color: var(--c700); }
.mf-card .own svg { width: 2.6cqi; height: 2.6cqi; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mf-card-new { border-color: var(--c500); box-shadow: 0 0 0 .8cqi rgba(33, 158, 188, .16), 0 6px 18px -8px rgba(33, 158, 188, .6); }
.av {
  flex: none; display: grid; place-items: center; width: 5.6cqi; height: 5.6cqi; border-radius: 50%;
  font-style: normal; font-size: 2.7cqi; font-weight: 700; color: #00212f;
  background: var(--c200);
}
.a1 { background: #8ECAE6; } .a2 { background: #FFD27A; } .a3 { background: #B9E3C9; }
.a4 { background: #C9C2F2; } .a5 { background: #F7C1B3; } .a6 { background: #5CB8D2; }

/* o chão: a faixa do Traço sob o topo */
.ground { position: relative; z-index: 3; border-top: 1px solid var(--line2); background: color-mix(in srgb, var(--p950) 88%, transparent); }
.ground::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='3'%3E%3Cg fill='%23219EBC'%3E%3Crect width='21' height='3'/%3E%3Crect x='24' width='3' height='3'/%3E%3Crect x='30' width='9' height='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 45px 3px repeat-x;
}
.ground-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.scroll-cue { display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; color: var(--fg2); text-decoration: none; font-size: .68rem; }
.scroll-cue:hover { color: var(--fg); }
.cue-node { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--c500); }
.cue-node::after {
  content: ""; position: absolute; inset: -7px;
  border: 1px solid var(--c500); border-radius: 50%;
  opacity: 0; animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.ground-steps { display: flex; gap: 1.8rem; color: var(--fg2); font-size: .64rem; }
.ground-steps li { display: flex; align-items: center; gap: .7rem; }
.ground-steps li::before { content: ""; width: 26px; height: 2px; background: var(--traco-2); color: var(--c500); opacity: .75; }


/* ---------- 02 · Comparador: o mesmo WhatsApp, sem sistema e com o WebSam CRM ----------
   Cada conversa é UM elemento (.cv). Ele mora no seu lugar dentro da coluna, e o layout da coluna é do CSS: por isso o cartão
   nunca fica fora do lugar, em nenhuma largura. O script só desloca o elemento até a posição "solta" e troca o rosto dele
   (ponto com brilho e trecho de mensagem, ou cartão com nome e dono) conforme o divisor passa. O avatar é o mesmo nos dois
   lados: é ele o fio entre o ponto e o cartão. Sem JavaScript os dois lados ficam parados, lado a lado (fim deste arquivo). */
.cmp { padding: calc(var(--seam) * .92) 0 clamp(5rem, 12vh, 8rem); }
.cmp .sec-head { margin-bottom: clamp(2rem, 5vh, 3rem); }
.split {
  --split: 50%; --sn: 50;
  position: relative; isolation: isolate; overflow: hidden;
  container: split / inline-size;
  height: clamp(430px, 60vh, 600px);
  border: 1px solid var(--line2); border-radius: 24px;
  background: var(--p950);
  box-shadow: 0 60px 90px -60px rgba(2, 48, 71, .6);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: ew-resize;
}
.split:focus-visible { outline: 2px solid var(--hi); outline-offset: 6px; border-radius: 24px; }
.split-bg { position: absolute; inset: 0; }
.split-bg-a {
  background:
    radial-gradient(60% 90% at 18% 24%, rgba(33, 158, 188, .26), transparent 70%),
    linear-gradient(rgba(142, 202, 230, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(142, 202, 230, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--p950);
}
.split-bg-b {
  background:
    linear-gradient(rgba(2, 48, 71, .05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(2, 48, 71, .05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, #EEF4F8, #E0EBF1);
  clip-path: inset(0 0 0 var(--split));
}
/* tudo que desenha as conversas e as colunas; o tamanho do texto acompanha a largura do quadro */
.split-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-size: clamp(10px, 1.1cqi, 14.5px); line-height: 1.25; }

/* colunas do funil: o quadro de cada uma aparece quando o divisor passa (--kl, de 0 a 1) */
.lanes {
  position: absolute; inset: 1.5rem 3.5rem 6.4rem; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em;
}
.lane { position: relative; display: flex; flex-direction: column; gap: .6em; min-width: 0; padding: .8em .75em .9em; counter-reset: cvn; }
.lane::before {
  content: ""; position: absolute; inset: 0; border-radius: 1.2em;
  background: #D2DFE8; border: 1px solid rgba(2, 48, 71, .16);
  opacity: var(--kl, 1);
}
.lane-head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 2em;
  margin: 0; padding: 0 2.6em 0 .1em; opacity: var(--kl, 1);
  color: #1E3C4B; font-family: var(--f-mono); font-size: max(.86em, 10px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.lane-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-n {
  position: absolute; top: .8em; right: .75em; display: grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .45em; border-radius: 999px;
  background: #fff; border: 1px solid rgba(2, 48, 71, .2); color: #07344A; opacity: var(--kl, 1);
  font: 700 1em/1 var(--f-text); letter-spacing: 0;
}
.lane-n::before { content: counter(cvn); }
.lane-n[data-n]::before { content: attr(data-n); }
.lane[data-fim] .lane-n { background: #D9F3E8; border-color: rgba(18, 128, 92, .5); color: #0A5A40; }
.cvs { display: grid; gap: .6em; }

/* a conversa: um elemento, dois rostos */
.cv {
  --kc: 1; --kt: 1; --kv: 0; --as: 1; --c: #8ECAE6;
  position: relative; z-index: 5; display: flex; align-items: center; gap: .7em; min-width: 0; counter-increment: cvn;
  min-height: 4.3em; padding: .55em .8em .55em .65em;
}
.cv[data-c="1"] { --c: #8ECAE6; } .cv[data-c="2"] { --c: #FFD27A; } .cv[data-c="3"] { --c: #B9E3C9; }
.cv[data-c="4"] { --c: #C9C2F2; } .cv[data-c="5"] { --c: #F7C1B3; } .cv[data-c="6"] { --c: #5CB8D2; }
/* rosto de cartão */
.cv::before {
  content: ""; position: absolute; inset: 0; border-radius: 1em;
  background: #fff; border: 1px solid rgba(2, 48, 71, .16);
  box-shadow: 0 .6em 1.2em -.8em rgba(2, 48, 71, .55), 0 .1em .3em rgba(2, 48, 71, .1);
  opacity: var(--kc); transform: scale(calc(.55 + .45 * var(--kc))); transform-origin: 2em 50%;
}
.lane[data-fim] .cv::before { border-color: rgba(18, 128, 92, .55); box-shadow: 0 .6em 1.2em -.8em rgba(18, 128, 92, .6), 0 0 0 .2em rgba(31, 157, 114, .12); }
.cv .av {
  position: relative; width: 2.7em; height: 2.7em; font-size: 1em; background: var(--c); color: #00212F;
  transform: scale(var(--as));
}
/* brilho do ponto solto */
.cv .av::after {
  content: ""; position: absolute; inset: -.95em; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 62%, transparent) 0, transparent 66%);
  opacity: var(--kv);
}
.cv-txt { position: relative; display: grid; gap: .14em; min-width: 0; opacity: var(--kt); }
.cv-txt b { overflow: hidden; color: #071820; font: 600 1.04em/1.2 var(--f-text); text-overflow: ellipsis; white-space: nowrap; }
.cv-txt small { display: flex; align-items: center; gap: .35em; min-width: 0; overflow: hidden; color: #3B5462; font-size: max(.9em, 10.5px); line-height: 1.25; white-space: nowrap; }
.own-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cv-txt .own { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #0C687D; }
.cv-txt .own-h { color: #3B5462; }
.cv-next { flex: 1 1 0; min-width: 0; overflow: hidden; color: #55707E; text-overflow: ellipsis; }
.cv-ok {
  position: relative; flex: none; margin-left: auto; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: #1F9D72; color: #fff; opacity: var(--kt);
}
.cv-ok svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* rosto de mensagem solta: o que está ao lado do ponto (etiqueta ou trecho) e a marca de não lida */
.cv-loose { position: absolute; left: 4.25em; top: 50%; transform: translateY(-50%); opacity: calc(var(--kv) * var(--kx, 1)); }
.cv.flip .cv-loose { left: auto; right: calc(100% + .15em); }
.cv-tag {
  display: block; padding: .5em .9em; border-radius: 999px; background: #0D3A55; border: 1px solid rgba(142, 202, 230, .75);
  color: #EAF6FB; font: 600 .82em/1.1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 .5em 1.2em -.6em rgba(0, 0, 0, .7);
}
.cv-snip {
  display: block; max-width: 17em; padding: .65em .95em; border-radius: .3em 1em 1em 1em; background: #174A66; border: 1px solid rgba(142, 202, 230, .5);
  color: #F2FAFD; font-size: 1em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 .5em 1.2em -.6em rgba(0, 0, 0, .7);
}
.cv-un {
  position: absolute; left: 3.35em; top: calc(50% - 2.6em); display: grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .5em;
  border-radius: 999px; background: #fff; color: #00212F; font: 700 .8em/1 var(--f-text); font-style: normal;
  box-shadow: 0 0 0 .28em var(--p950); opacity: var(--kv);
}
.cv-ring { position: absolute; left: .65em; top: 50%; width: 2.7em; height: 2.7em; margin-top: -1.35em; opacity: var(--kv); transform: scale(var(--as)); }
.cv-ring i { position: absolute; inset: -.15em; border-radius: 50%; border: .17em solid var(--c); opacity: .6; animation: cv-ring 2.4s ease-out infinite; animation-play-state: paused; }
.split.live .cv-ring i { animation-play-state: running; }
@keyframes cv-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.85); opacity: 0; } }

.split-label { position: absolute; z-index: 4; bottom: 1.6rem; display: grid; gap: .45rem; max-width: min(23rem, 46%); transition: opacity .3s; }
.split-label .mono { font-size: .64rem; letter-spacing: .1em; }
.split-label strong {
  font-family: var(--f-display); font-size: clamp(1.05rem, .85rem + 1vw, 1.55rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
}
.split-label-a { left: 1.8rem; color: #F7FBFC; opacity: var(--la, 1); }
.split-label-a .mono { color: var(--brisa); }
.split-label-b { right: 1.8rem; text-align: right; color: var(--p900); opacity: var(--lb, 1); }
.split-label-b .mono { color: var(--c700); }

/* divisor: o Traço na vertical e o botão (o botão nunca sai do quadro, mesmo com o divisor numa ponta) */
.split-handle { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; transform: translateX(calc(var(--sn) * 1cqi)); }
.split-handle::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(180deg, var(--brisa) 0 21px, transparent 21px 24px, var(--brisa) 24px 27px, transparent 27px 30px, var(--brisa) 30px 39px, transparent 39px 45px);
  box-shadow: 0 0 14px rgba(142, 202, 230, .55);
}
.knob {
  position: absolute; left: 0; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sol); color: var(--p950);
  box-shadow: 0 10px 34px -6px rgba(255, 183, 3, .65), 0 0 0 6px rgba(255, 183, 3, .2);
  transform: translateX(clamp(calc(32px - var(--sn) * 1cqi), 0px, calc(100cqi - 32px - var(--sn) * 1cqi)));
}
@supports not (width: 1cqi) { .split-handle { left: var(--split); transform: none; } .knob { transform: none; } }
.knob svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.split:not(.touched) .knob::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--sol); animation: ping 2.2s var(--ease) infinite;
}
.split-hint {
  display: flex; align-items: center; justify-content: center; gap: .9em; width: fit-content; max-width: 100%; margin: 1.1rem auto 0; padding: .6em 1.2em;
  border: 1px solid rgba(2, 48, 71, .22); border-radius: 999px; background: rgba(255, 255, 255, .72);
  color: #07344A; font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-align: center;
}
.split-hint::before { content: "\2039"; font-size: 1.5em; line-height: .6; color: var(--c700); }
.split-hint::after { content: "\203A"; font-size: 1.5em; line-height: .6; color: var(--c700); }
.hint-desk { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint-desk { display: inline; }
  .hint-mob { display: none; }
}

/* quadro médio: o cartão fica estreito, mostra só o dono e a quarta conversa de cada coluna não aparece */
@container split (max-width: 1000px) { .cv-next, .cv.x4 { display: none; } }

/* quadro estreito (celular e tablet em pé): as quatro colunas viram duas por duas, o texto cresce e encurta */
@container split (max-width: 760px) {
  .split-ui { font-size: clamp(10.5px, 3.3cqi, 15px); }
  /* o vão entre as duas colunas é largo de propósito: é onde o botão do divisor fica em repouso, sem cobrir um cartão */
  .lanes { inset: 1rem 1rem 6.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .6em max(3.2em, 36px); }
  .lane { gap: .45em; padding: .6em .55em .7em; }
  .lane::before { border-radius: .9em; }
  .lane-n { top: .6em; right: .55em; }
  .lane-head { padding-right: 2.5em; }
  .cvs { gap: .4em; }
  .cv { gap: .55em; min-height: 3.7em; padding: .45em .55em .45em .5em; }
  .cv::before { border-radius: .8em; }
  .cv-next, .cv-ls, .cv-tag .tl { display: none; }
  .cv-tag { padding: .45em .75em; font-size: .76em; }
  .cv .av { width: 2.5em; height: 2.5em; }
  .cv-ring { width: 2.5em; height: 2.5em; margin-top: -1.25em; left: .5em; }
  .cv-ok { width: 1.6em; height: 1.6em; }
  .cv-loose { left: 3.9em; }
  .cv-un { left: 3.05em; }
  /* o botão do divisor encolhe (44 px, o mínimo de toque) para deixar mais quadro livre */
  .knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: translateX(clamp(calc(26px - var(--sn) * 1cqi), 0px, calc(100cqi - 26px - var(--sn) * 1cqi))); }
  .knob svg { width: 20px; height: 20px; }
}
@container split (max-width: 520px) {
  .cv-txt b > span { display: none; }
}

/* ---------- sem JavaScript: os dois lados parados, um acima do outro ----------
   Sem o script nada desloca os elementos. Primeiro vem o lado solto (fundo escuro), com cada conversa no ponto que o HTML guarda em
   --lx e --ly (--lxm e --lym no quadro estreito), com a mesma inicial e a mesma cor do cartão; embaixo vêm as colunas, com as
   mesmas conversas. Nenhum elemento daqui pra baixo é posicionado, para que os pontos soltos se meçam pelo quadro inteiro. */
html:not(.js) .split { --hl: 31rem; height: auto; padding-bottom: 1.6rem; cursor: default; touch-action: auto; }
html:not(.js) .split-bg { z-index: -1; }
html:not(.js) .split-bg-a { bottom: auto; height: var(--hl); }
html:not(.js) .split-bg-b { clip-path: inset(var(--hl) 0 0 0); }
html:not(.js) .split-ui { position: static; }
html:not(.js) .split-handle { display: none; }
html:not(.js) .lanes { position: static; margin: var(--hl) 1.5rem 0; grid-template-rows: none; }
html:not(.js) .lane {
  position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6em .5em;
  background: #D2DFE8; border: 1px solid rgba(2, 48, 71, .16); border-radius: 1.2em;
}
html:not(.js) .lane::before { display: none; }
html:not(.js) .lane-head { grid-column: 1; grid-row: 1; padding-right: 0; opacity: 1; }
html:not(.js) .lane-n { position: static; grid-column: 2; grid-row: 1; opacity: 1; }
html:not(.js) .cvs { grid-column: 1 / -1; grid-row: 2; }
html:not(.js) .cv { position: static; background: #fff; border: 1px solid rgba(2, 48, 71, .16); border-radius: 1em; box-shadow: 0 .6em 1.2em -.8em rgba(2, 48, 71, .55); }
html:not(.js) .lane[data-fim] .cv { border-color: rgba(18, 128, 92, .55); }
html:not(.js) .cv-ring, html:not(.js) .cv-un { display: none; }
html:not(.js) .cv::before { display: none; }
/* o ponto solto: a mesma inicial e a mesma cor do cartão */
html:not(.js) .cv::after {
  content: attr(data-i); position: absolute; left: calc(var(--lx) * 1%); top: calc(var(--ly) * var(--hl) / 100); z-index: 3;
  display: grid; place-items: center; width: 2.7em; height: 2.7em; margin: -1.35em 0 0 -1.35em; border-radius: 50%;
  background: var(--c); color: #00212F; font: 700 1em/1 var(--f-text);
  box-shadow: 0 0 0 .2em color-mix(in srgb, var(--c) 40%, transparent), 0 0 1.6em color-mix(in srgb, var(--c) 60%, transparent);
}
/* a marca de não lida do ponto solto */
html:not(.js) .cv[data-un]::before {
  content: attr(data-un); position: absolute; inset: auto; left: calc(var(--lx) * 1% + .5em); top: calc(var(--ly) * var(--hl) / 100 - 2.3em); z-index: 4;
  display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .45em; border: 0; border-radius: 999px;
  background: #fff; color: #00212F; font: 700 .8em/1 var(--f-text); box-shadow: 0 0 0 .25em var(--p950); opacity: 1; transform: none;
}
html:not(.js) .cv-loose { left: calc(var(--lx) * 1% + 2.25em); top: calc(var(--ly) * var(--hl) / 100); opacity: 1; z-index: 3; }
html:not(.js) .cv.flip .cv-loose { left: auto; right: calc(100% - var(--lx) * 1% + 2.25em); }
html:not(.js) .split-label-a { left: 1.8rem; top: calc(var(--hl) - 1.6rem); bottom: auto; transform: translateY(-100%); }
html:not(.js) .split-label-b { position: static; width: fit-content; margin: 1.4rem 1.8rem 0 auto; }
@container split (max-width: 760px) {
  html:not(.js) .lanes { margin: var(--hl) 1rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  html:not(.js) .cv::after { left: calc(var(--lxm) * 1%); top: calc(var(--lym) * var(--hl) / 100); width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em; }
  html:not(.js) .cv[data-un]::before { left: calc(var(--lxm) * 1% + .4em); top: calc(var(--lym) * var(--hl) / 100 - 2.1em); }
  html:not(.js) .cv-loose { left: calc(var(--lxm) * 1% + 2em); top: calc(var(--lym) * var(--hl) / 100); }
  html:not(.js) .cv.flip .cv-loose { left: calc(var(--lxm) * 1% + 2em); right: auto; }
  html:not(.js) .cv.flipm .cv-loose { left: auto; right: calc(100% - var(--lxm) * 1% + 2em); }
  html:not(.js) .split-label-a { left: 1.1rem; }
  html:not(.js) .split-label-b { margin-right: 1.1rem; }
}


/* ---------- 03 · Como funciona: a trilha de quatro passos ---------- */
.est { padding: clamp(5.5rem, 12vh, 8.5rem) 0 clamp(5rem, 11vh, 7.5rem); overflow: clip; }
.est-grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.est-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.est-head .eyebrow { margin: 0; }
.est-count { color: var(--fg2); font-size: .8rem; }
.est-now { display: inline-block; color: var(--fg); font-variant-numeric: tabular-nums; }

.est-track {
  position: relative; display: grid; gap: clamp(3.5rem, 8vw, 6rem);
  width: var(--wrap); margin: clamp(2rem, 5vh, 3.2rem) auto 0;
}
.est-panel { min-width: 0; }
.est-panel[data-step] {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center; gap: clamp(1.6rem, 4vw, 4rem);
}
.est-intro .h2 { max-width: 15ch; margin-bottom: 1.4rem; }
.est-lead { max-width: 34rem; margin-bottom: 1.6rem; color: var(--fg2); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.est-hint { display: inline-flex; gap: .6rem; color: var(--hi); }
.panel-num { margin-bottom: 1.1rem; color: var(--hi); }
.est-panel h3 { margin-bottom: 1.1rem; font-size: clamp(1.9rem, 1.1rem + 2.5vw, 3.3rem); line-height: 1; letter-spacing: -.042em; }
.panel-copy > p:not(.panel-num) { max-width: 30rem; margin-bottom: 1.5rem; color: var(--fg2); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { padding: .42rem .8rem; border: 1px solid var(--line2); border-radius: 999px; background: #fff; color: #2f4551; font-size: .64rem; }
.outro-title { margin-bottom: 1.2rem; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1; letter-spacing: -.045em; }
.est-outro p { max-width: 30rem; margin-bottom: 1.5rem; color: var(--fg2); font-size: 1.1rem; }
.est-rail, .rail-lead { display: none; }

/* trilha na horizontal, com a seção fixa (computador com mouse, com movimento) */
.has-pin .est { height: 100svh; padding: 0; }
.has-pin .est-head { position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; padding-top: calc(var(--header-h) + 1.2rem); }
.has-pin .est-track {
  position: absolute; left: 0; top: 0; width: max-content; height: 100%; margin: 0;
  display: flex; align-items: center; gap: clamp(4rem, 8vw, 9rem);
  padding: calc(var(--header-h) + 3.6rem) var(--wrap-left) 15svh;
  will-change: transform;
}
.has-pin .est-panel { flex: none; }
.has-pin .est-panel[data-step] {
  position: relative;
  width: min(82vw, 1120px); height: min(62svh, 590px);
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(1.2rem, 2vw, 2rem);
  border: 1px solid var(--line2); border-radius: 28px;
  background: #fff;
  box-shadow: 0 40px 80px -50px rgba(2, 48, 71, .35);
}
.has-pin .est-panel[data-step]::before,
.has-pin .est-panel[data-step]::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 0 solid var(--c500); opacity: .85;
}
.has-pin .est-panel[data-step]::before { left: -9px; top: -9px; border-width: 2px 0 0 2px; }
.has-pin .est-panel[data-step]::after { right: -9px; bottom: -9px; border-width: 0 2px 2px 0; }
.has-pin .est-panel h3 { font-size: clamp(1.7rem, 1rem + 2vw, 2.8rem); }
.has-pin .est-intro { width: min(46vw, 640px); }
.has-pin .est-outro { width: min(40vw, 520px); }
.has-pin .est-rail { display: block; position: absolute; left: 0; bottom: 0; height: 15svh; overflow: visible; pointer-events: none; color: var(--c500); }
.rail-ghost { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 1.2 8; stroke-linecap: round; opacity: .5; }
.rail-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 35 5 5 5 15 10; }
.rail-node { fill: var(--bg); stroke: currentColor; stroke-width: 1.5; transition: fill .3s; }
.rail-node.on { fill: currentColor; }
.rail-label { fill: var(--fg2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; }
.has-pin .rail-lead {
  display: inline-flex; align-items: center; gap: .6rem;
  position: absolute; left: 0; top: 0;
  color: var(--fg); font-size: .66rem; pointer-events: none; will-change: transform;
}
.rail-lead i {
  width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--c500);
  box-shadow: 0 0 0 5px rgba(33, 158, 188, .22), 0 0 26px 6px rgba(33, 158, 188, .5);
}

/* ---------- Palco das demonstrações (36 x 25 em; 1em = 1/36 da largura) ---------- */
.mock-cell { container-type: inline-size; display: grid; place-items: center; min-width: 0; }
.has-pin .mock-cell { container-type: size; height: 100%; }
.mock {
  --mw: min(100cqi, calc(100cqh * 1.44));
  position: relative; width: var(--mw); aspect-ratio: 36 / 25;
  font-size: calc(var(--mw) / 36); line-height: 1.3;
  border-radius: 1.5em; overflow: hidden;
  background: linear-gradient(160deg, #E4EEF4, #D3E4EE);
  border: 1px solid rgba(2, 48, 71, .12);
  color: var(--n950); font-family: var(--f-text);
}
.mock::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(2, 48, 71, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 48, 71, .055) 1px, transparent 1px);
  background-size: 1.6em 1.6em;
}
.mock .mono { font-size: .56em; letter-spacing: .06em; }
.mock-tag { color: #455661; }
.mock .mock-tag { position: absolute; top: 1.1em; left: 1.4em; z-index: 6; }
.mock svg { flex: none; }
/* avatares e cartões nos contextos em em (os de cqi ficam no topo) */
.mock .av, .md .av, .ae-thread .av { width: 2.8em; height: 2.8em; font-size: .62em; }
.mock svg.ico, .mock .app-side svg, .th-head svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.win, .app, .phone-s, .board-s {
  position: absolute; background: #fff; border: 1px solid rgba(2, 48, 71, .14);
  box-shadow: 0 2.2em 4em -2em rgba(2, 48, 71, .45);
}
.win { border-radius: 1em; overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: .4em; height: 2.3em; padding: 0 .9em; background: #F1F5F8; border-bottom: 1px solid rgba(2, 48, 71, .1); }
.win-bar i { width: .62em; height: .62em; border-radius: 50%; background: #C5D3DC; }
.win-url { margin-left: .8em; color: #566873; }
.win-body { height: calc(100% - 2.3em); }
.win-h { font-family: var(--f-display); font-size: 1.15em; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.win-p { max-width: 15em; color: #566873; font-size: .78em; }

/* 01 · Conectar */
.w1 { left: 2.2em; top: 3.6em; width: 20em; height: 19.6em; }
.w1 .win-body { display: grid; justify-items: center; align-content: center; gap: .75em; padding: 1em 1.4em; text-align: center; }
.qr { position: relative; width: 10em; height: 10em; padding: .4em; overflow: hidden; background: #fff; border: 1px solid rgba(2, 48, 71, .14); border-radius: .8em; }
.qr-svg { width: 100%; height: 100%; }
.qr-scan { position: absolute; left: 0; right: 0; top: 0; height: .35em; opacity: 0; background: linear-gradient(90deg, transparent, rgba(33, 158, 188, .95), transparent); box-shadow: 0 0 1.2em .3em rgba(33, 158, 188, .5); }
.qr-ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: rgba(255, 255, 255, .9); }
.qr-ok svg { width: 4.4em; height: 4.4em; padding: 1.1em; border-radius: 50%; background: #2fb98a; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st { display: inline-flex; align-items: center; gap: .5em; color: #2f4551; font-size: .76em; font-weight: 600; }
.st i { width: .7em; height: .7em; border-radius: 50%; background: #B5C4CE; transition: background-color .3s; }
.st-b { display: none; color: #13805e; }
.mock.ok .st-a { display: none; }
.mock.ok .st-b { display: inline; }
.mock.ok .st i { background: #2fb98a; }
.phone-s {
  left: 23em; top: 5.6em; z-index: 3; width: 11.4em; height: 18.2em; padding: .9em .8em;
  display: flex; flex-direction: column; border-radius: 1.8em; overflow: hidden;
  background: #0b141a; border-color: rgba(142, 202, 230, .4); color: #e9edef;
}
.ps-top { margin-bottom: .9em; color: #aebac1; font-size: .62em; font-weight: 600; text-align: center; }
.ps-view { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; border-radius: .9em; background: #131f26; }
.ps-qr { width: 62%; height: auto; opacity: .6; }
.cn { position: absolute; width: 1.3em; height: 1.3em; border: 0 solid var(--c400); }
.cn.tl { left: .7em; top: .7em; border-width: 2px 0 0 2px; border-top-left-radius: .35em; }
.cn.tr { right: .7em; top: .7em; border-width: 2px 2px 0 0; border-top-right-radius: .35em; }
.cn.bl { left: .7em; bottom: .7em; border-width: 0 0 2px 2px; border-bottom-left-radius: .35em; }
.cn.br { right: .7em; bottom: .7em; border-width: 0 2px 2px 0; border-bottom-right-radius: .35em; }
.ps-line { position: absolute; left: 12%; right: 12%; top: 0; height: 2px; opacity: 0; background: var(--c400); box-shadow: 0 0 .8em .15em rgba(92, 184, 210, .8); }
.ps-btn { margin-top: .8em; padding: .75em; border-radius: .7em; background: #00a884; color: #0b141a; font-size: .66em; font-weight: 700; text-align: center; }
.run-dot { position: absolute; left: 22.2em; top: 13em; z-index: 5; width: .9em; height: .9em; border-radius: 50%; opacity: 0; background: var(--brisa); box-shadow: 0 0 1.2em .3em rgba(142, 202, 230, .85); }

/* 02 · Montar */
.w2 { left: 1.8em; top: 3.4em; width: 21.4em; height: 19.8em; }
.w2 .win-body { display: grid; align-content: start; gap: 1em; padding: 1.3em 1.4em; }
.fld { display: grid; gap: .4em; }
.lbl { color: #455661; font-size: .62em; font-weight: 600; letter-spacing: .02em; }
.inp { display: flex; align-items: center; min-height: 2.3em; padding: .3em .8em; border: 1px solid rgba(2, 48, 71, .2); border-radius: .6em; background: #fff; font-size: .84em; }
.caret { width: 1px; height: 1.1em; margin-left: 1px; background: var(--c500); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.opts { display: flex; gap: .5em; }
.opt { padding: .45em .8em; border: 1px solid rgba(2, 48, 71, .2); border-radius: 999px; color: #455661; font-size: .68em; }
.opt.on { background: var(--p900); border-color: var(--p900); color: #fff; }
.ta { display: grid; gap: .3em; align-content: start; min-height: 6.6em; padding: .75em .85em; border: 1px solid rgba(2, 48, 71, .2); border-radius: .6em; background: #fff; color: #2f4551; font-size: .68em; line-height: 1.4; }
.ty-l { display: block; }
.board-s { left: 24.4em; top: 5.4em; width: 10.2em; height: 15.8em; padding: .9em .8em; border-radius: 1em; }
.bs-h { margin-bottom: .8em; font-size: .7em; font-weight: 700; }
.bs-cols { display: grid; gap: .6em; }
.bs-cols span { display: flex; align-items: center; padding: .85em .7em; border-left: .3em solid var(--c500); border-radius: .6em; background: #EDF2F5; font-size: .62em; font-weight: 600; color: #2f4551; }

/* 03 e 04 · o sistema (conversas e funil) */
.app { left: 1.6em; top: 3.2em; width: 32.8em; height: 20.2em; display: flex; border-radius: 1em; overflow: hidden; }
.app-side { flex: none; width: 3.1em; display: flex; flex-direction: column; align-items: center; gap: .9em; padding: 1em 0; background: var(--p900); }
.side-logo { width: 2em; height: auto; margin-bottom: .5em; color: #8ECAE6; }
.app-side i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .6em; color: #8FB6CC; }
.app-side i.on { background: rgba(142, 202, 230, .2); color: #fff; }
.app-side i svg { width: 1.2em; height: 1.2em; }
.app-list { flex: none; width: 11em; padding: 1em .8em; border-right: 1px solid rgba(2, 48, 71, .1); }
.al-h { margin-bottom: .8em; font-family: var(--f-display); font-size: .95em; font-weight: 700; letter-spacing: -.02em; }
.convs { display: grid; gap: .3em; }
.convs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .5em; border-radius: .6em; }
.convs li.on { background: #E5F3F8; }
.convs span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.convs b { overflow: hidden; font-size: .68em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.convs small { overflow: hidden; color: #566873; font-size: .58em; text-overflow: ellipsis; white-space: nowrap; }
.convs small svg { display: inline-block; width: 1.1em; height: 1.1em; margin: -.15em .3em 0 0; vertical-align: middle; color: var(--c700); }
.convs time { color: #566873; align-self: start; margin-top: .3em; }
.app-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #F6F9FB; font-size: 1em; }

/* conversa do sistema: usada na demonstração, no cenário do agente e nas peças de recursos */
.th-head { display: flex; align-items: center; gap: .7em; padding: .8em 1em; border-bottom: 1px solid rgba(2, 48, 71, .1); background: #fff; font-size: .74em; }
.th-head b { font-weight: 600; }
.owner { margin-left: auto; display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em; border-radius: 999px; background: #E5F3F8; color: var(--c700); font-size: .86em; font-weight: 600; white-space: nowrap; }
.o-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--c500); }
.o-b { display: none; }
.assumed .o-a { display: none; }
.assumed .o-b { display: inline; }
.th-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; padding: .9em 1em; min-height: 0; }
.bub {
  max-width: 82%; margin: 0; padding: .55em .8em; border-radius: .8em;
  font-size: .72em; line-height: 1.35; box-shadow: 0 1px 2px rgba(2, 48, 71, .08);
}
.bub.in { align-self: flex-start; border-top-left-radius: .2em; background: #fff; }
.bub.out { align-self: flex-end; border-top-right-radius: .2em; background: #D8F2FB; }
.bub small { display: block; margin-bottom: .15em; color: var(--c700); font-size: .8em; font-weight: 700; }
.handoff { padding: .75em .85em; border: 1px solid rgba(2, 48, 71, .12); border-left: .3em solid var(--c500); border-radius: .7em; background: #fff; box-shadow: 0 .6em 1.2em -.8em rgba(2, 48, 71, .35); }
.handoff h4 { display: flex; align-items: center; gap: .5em; margin-bottom: .45em; font-family: var(--f-text); font-size: .74em; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.handoff h4 svg { width: 1.3em; height: 1.3em; color: var(--c700); }
.ho-m { margin-bottom: .55em; color: #2f4551; font-size: .64em; }
.ho-s { display: grid; gap: .1em; margin-bottom: .45em; }
.ho-s b { color: #566873; font-size: .52em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ho-s span { font-size: .64em; line-height: 1.3; }
.ho-b { margin-top: .6em; }
.ho-btn { display: inline-block; padding: .55em .9em; border-radius: .55em; background: var(--p900); color: #fff; font-size: .62em; font-weight: 600; }
.ho-ok { display: none; color: #13805e; font-size: .64em; font-weight: 700; }
.assumed .ho-btn { display: none; }
.assumed .ho-ok { display: inline; }
.cur {
  position: absolute; left: 25.5em; top: 17.4em; z-index: 8; width: 1.5em; height: 1.5em; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.8L9.8 19z' fill='%23071820' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .15em .25em rgba(0, 0, 0, .3));
}

/* 04 · funil */
.app-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1em 1.1em; background: #F6F9FB; }
.am-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9em; }
.am-bar b { font-family: var(--f-display); font-size: .95em; letter-spacing: -.02em; }
.chip-sm { padding: .35em .8em; border: 1px solid rgba(2, 48, 71, .12); border-radius: 999px; background: #fff; color: #455661; }
.board4 { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; margin-bottom: 2.5em; }
.col { display: flex; flex-direction: column; gap: .5em; min-width: 0; padding: .6em; border-radius: .7em; background: #E9F0F4; }
.col h5 { margin: 0 0 .1em; padding-bottom: .65em; overflow: hidden; border-bottom: 1px solid rgba(2, 48, 71, .12); color: #2f4551; font-family: var(--f-text); font-size: .62em; font-weight: 700; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.col .kc { position: relative; gap: .5em; padding: .5em; border-radius: .5em; border-width: 1px; }
.col .kc b { font-size: .62em; }
.col .kc small { font-size: .54em; }
.kc-win { border-color: var(--sol); box-shadow: 0 0 0 .25em rgba(255, 183, 3, .22); }
.tick { position: absolute; right: -.45em; top: -.45em; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--sol); color: var(--p950); }
.tick svg { width: .9em; height: .9em; stroke-width: 3; }
.am-foot { position: absolute; left: 1.1em; right: 1.1em; bottom: .9em; display: flex; align-items: center; gap: .6em; padding: .7em .95em; border-radius: .6em; background: var(--p900); color: #fff; }
.am-foot i { width: .8em; height: .8em; border-radius: 50%; background: var(--sol); }


/* ---------- 04 · Agente de IA e equipe ---------- */
.ae { padding: clamp(5rem, 11vh, 8rem) 0 clamp(4rem, 9vh, 6.5rem); }
.ae-stage {
  position: relative; display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.2vw, 3.2rem);
}
.ae-card {
  position: relative; z-index: 2; min-width: 0;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: #fff; border: 1px solid var(--line2); border-radius: 24px;
  box-shadow: 0 30px 60px -44px rgba(2, 48, 71, .4);
}
.ae-card::before {
  content: ""; position: absolute; left: clamp(1.4rem, 2.2vw, 2rem); top: -1px; width: 26px; height: 3px;
  background: var(--traco-2); color: var(--c500);
}
.ae-card h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); letter-spacing: -.035em; }
.ae-card h3 .ico { width: 1.35em; height: 1.35em; color: var(--c500); }
.checks { display: grid; gap: .95rem; }
.checks li { display: flex; align-items: flex-start; gap: .8rem; color: #2f4551; font-size: .98rem; line-height: 1.45; }
.checks .ico { width: 1.3em; height: 1.3em; margin-top: .1em; padding: .22em; border-radius: 50%; background: #DDF1F8; color: var(--c700); stroke-width: 2.8; }

.ae-thread {
  position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #F6F9FB; border: 1px solid var(--line2); border-radius: 24px;
  box-shadow: 0 50px 80px -50px rgba(2, 48, 71, .5);
  font-size: clamp(.8rem, .68rem + .35vw, 1rem);
}
.ae-thread .mock-tag { padding: .8rem 1.1rem 0; }
.ae-thread .th-head { margin-top: .5rem; }
.ae-thread .th-msgs { justify-content: center; gap: .8em; padding: 1.2em 1.1em; }
.ae-thread .bub { font-size: .86em; }
.ae-thread .bub.out.eq { background: var(--p900); color: #fff; }
.ae-thread .bub.out.eq small { color: var(--brisa); }
.ho-line {
  align-self: center; display: inline-flex; align-items: center; gap: .6em; margin: .2em 0;
  padding: .5em 1em; border-radius: 999px; background: var(--c100); color: var(--c700);
}
.ho-line i { width: .6em; height: .6em; border-radius: 50%; background: var(--c500); }
.ae-wire { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--c500); }
.aw-ghost { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 1.2 8; stroke-linecap: round; opacity: .45; }
.aw-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 35 5 5 5 15 10; }
.ae-point {
  position: absolute; left: 0; top: 0; z-index: 4; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--sol); opacity: 0; pointer-events: none; will-change: transform;
  box-shadow: 0 0 0 5px rgba(255, 183, 3, .22), 0 0 26px 6px rgba(255, 183, 3, .45);
}
.nota {
  position: relative; max-width: 46rem; margin-top: clamp(2rem, 4vh, 3rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line); color: var(--fg2); font-size: .95rem;
}
.nota::before { content: ""; position: absolute; left: 0; top: -2px; width: 26px; height: 3px; background: var(--traco-2); color: var(--c500); }

/* ---------- 05 · Recursos: um mosaico de peças que se mexem ---------- */
.rec { padding: clamp(5rem, 11vh, 8rem) 0 clamp(5rem, 11vh, 7.5rem); }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.tile {
  position: relative; container-type: inline-size; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  transition: translate .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.tile:hover { translate: 0 -4px; border-color: var(--line2); box-shadow: 0 34px 60px -40px rgba(2, 48, 71, .45); }
.tile h3 { margin: 1.1rem 0 .5rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); letter-spacing: -.03em; line-height: 1.1; }
.tile > p { max-width: 34rem; color: var(--fg2); font-size: .95rem; line-height: 1.5; }
.t-conv { grid-column: span 5; grid-row: span 2; }
.t-ia { grid-column: span 3; } .t-doc { grid-column: span 4; }
.t-funil { grid-column: span 3; } .t-ret { grid-column: span 4; }
.t-aviso, .t-agenda, .t-cont { grid-column: span 4; }
.t-visao, .t-equipe { grid-column: span 6; }

.md {
  position: relative; flex: 1 0 auto; min-height: 14em;
  display: flex; flex-direction: column; justify-content: center; gap: .7em;
  font-size: clamp(9.5px, 3.3cqi, 14px); line-height: 1.3;
}
.md .bub { max-width: 88%; font-size: .98em; }
.md .mono { font-size: max(.74em, 9px); }
.md .av { font-size: .62em; }
/* peças paradas até a pessoa chegar nelas; sem movimento (ou sem JavaScript) elas ficam no desenho final */
html.motion .tile:not(.on) .md * { animation-play-state: paused !important; }

/* conversas */
.md-conv { justify-content: flex-start; }
/* a peça ocupa duas fileiras do mosaico: a lista toma a altura que sobrar e reparte o espaço entre as linhas, sem vazio no meio */
.conv-rows { flex: 1 0 auto; display: grid; align-content: space-between; gap: .55em; }
.conv-rows li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .85em;
  padding: .8em .95em; border: 1px solid var(--line); border-radius: .95em; background: #F6F9FB;
}
.conv-rows span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.conv-rows b { overflow: hidden; font-size: 1em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.conv-rows small { overflow: hidden; color: #566873; font-size: .86em; text-overflow: ellipsis; white-space: nowrap; }
.conv-rows time { align-self: start; margin-top: .25em; color: #566873; }
.bdg { width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--c500); box-shadow: 0 0 0 .3em rgba(33, 158, 188, .2); }
.conv-rows li:nth-child(n+3) .bdg { display: none; }
html.motion .tile:not(.on) .conv-rows li { opacity: 0; transform: translateY(.9em); }
html.motion .tile.on .conv-rows li { transition: opacity .7s var(--ease) calc(var(--i) * 110ms), transform .7s var(--ease) calc(var(--i) * 110ms); }
html.motion .tile.on .conv-rows li:first-child { animation: row-new 6s ease-in-out 1.4s infinite; }
html.motion .tile.on .bdg { animation: bdg-pulse 2s ease-in-out infinite; }
@keyframes row-new { 0%, 100% { background: #F6F9FB; } 8%, 40% { background: #E5F3F8; } }
@keyframes bdg-pulse { 50% { box-shadow: 0 0 0 .55em rgba(33, 158, 188, 0); } }

/* agente de IA */
.md-ia { display: grid; align-content: center; gap: .7em; }
.md-ia .bub.in { grid-area: 1 / 1; }
.md-ia .typing, .md-ia .out { grid-area: 2 / 1; justify-self: end; }
.bub.typing { display: none; gap: .38em; align-items: center; padding: .95em 1.1em; background: #D8F2FB; }
.bub.typing i { width: .55em; height: .55em; border-radius: 50%; background: var(--c700); opacity: .5; }
html.motion .tile.on .md-ia .bub.in { animation: ia-in 8s var(--ease) infinite; }
html.motion .tile.on .md-ia .typing { display: flex; animation: ia-typing 8s linear infinite; }
html.motion .tile.on .md-ia .typing i { animation: tdot 1s ease-in-out infinite; }
html.motion .tile.on .md-ia .typing i:nth-child(2) { animation-delay: .15s; }
html.motion .tile.on .md-ia .typing i:nth-child(3) { animation-delay: .3s; }
html.motion .tile.on .md-ia .out { animation: ia-out 8s var(--ease) infinite; }
@keyframes ia-in { 0% { opacity: 0; transform: translateY(.7em); } 5%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ia-typing { 0%, 8% { opacity: 0; } 12%, 32% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ia-out { 0%, 35% { opacity: 0; transform: translateY(.7em); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.35em); opacity: 1; } }

/* material de consulta */
.md-doc { display: grid; align-content: center; gap: 0; }
.doc { display: grid; gap: .55em; padding: .9em 1em 1em; border: 1px solid var(--line2); border-radius: .95em; background: #F6F9FB; }
.doc > b { margin-bottom: .1em; color: #566873; }
.dl { display: block; width: var(--w, 70%); height: .7em; border-radius: .4em; background: #DDE7ED; }
.dl.hit { width: auto; height: auto; padding: .5em .75em; border: 1px solid var(--c400); border-radius: .55em; background: #D8F2FB; color: #0b4a5e; font-size: .92em; font-weight: 500; }
.doc-link { width: 100%; height: 2.6em; overflow: visible; }
.doc-link path { fill: none; stroke: var(--c500); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.md-doc .bub.out { align-self: flex-end; }
html.motion .tile.on .dl.hit { animation: doc-hit 7s ease-in-out infinite; }
html.motion .tile.on .doc-link path { animation: doc-draw 7s var(--ease-io) infinite; }
html.motion .tile.on .md-doc .bub.out { animation: doc-bub 7s var(--ease) infinite; }
@keyframes doc-hit { 0%, 6% { background: #F6F9FB; border-color: transparent; } 14%, 90% { background: #D8F2FB; border-color: var(--c400); } 100% { background: #F6F9FB; border-color: transparent; } }
@keyframes doc-draw { 0%, 16% { stroke-dashoffset: 1; opacity: 1; } 42%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes doc-bub { 0%, 40% { opacity: 0; transform: translateY(.6em); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* funil de vendas */
.md-funil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 5.4em; gap: .6em; align-content: center; }
.mf3 { display: contents; }
.mf3 > span { color: #566873; text-align: center; }
.mf3-b .slot { border-radius: .8em; background: #E9F0F4; border: 1px dashed rgba(2, 48, 71, .18); }
.hop { position: absolute; left: 0; right: 0; bottom: 0; height: 5.4em; pointer-events: none; }
.hop .av { position: absolute; top: 50%; left: 16.67%; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; font-size: .72em; box-shadow: 0 .5em 1em -.3em rgba(2, 48, 71, .4); }
html.motion .tile.on .hop .av { animation: hop 6s var(--ease-io) infinite; }
@keyframes hop { 0%, 12% { left: 16.67%; } 36%, 52% { left: 50%; } 76%, 92% { left: 83.33%; } 100% { left: 16.67%; } }

/* retorno automático */
.md-ret { align-items: stretch; }
.md-ret .bub.in { align-self: flex-start; }
.ring { align-self: center; display: flex; align-items: center; gap: .7em; color: #566873; }
.ring svg { width: 2.7em; height: 2.7em; transform: rotate(-90deg); }
.r-bg { fill: none; stroke: #DDE7ED; stroke-width: 3; }
.r-fg { fill: none; stroke: var(--c500); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.motion .tile.on .r-fg { animation: ring 6s linear infinite; }
html.motion .tile.on .md-ret .bub.out { animation: ret-out 6s var(--ease) infinite; }
@keyframes ring { 0%, 6% { stroke-dashoffset: 1; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes ret-out { 0%, 56% { opacity: 0; transform: translateY(.7em); } 64%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* aviso no WhatsApp */
.md-aviso { gap: .5em; }
.notif {
  display: flex; align-items: center; gap: .9em; padding: .95em 1.05em;
  background: #fff; border: 1px solid var(--line2); border-radius: 1em;
  box-shadow: 0 1em 2.2em -1.3em rgba(2, 48, 71, .45);
}
.n-ico { flex: none; display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: .85em; background: var(--p900); color: #fff; }
.n-ico svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 12%; }
.n-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.n-tx b { font-size: .98em; font-weight: 600; }
.n-tx small { color: #566873; font-size: .86em; }
.notif time { margin-left: auto; align-self: flex-start; color: #566873; }
.n-ghost { opacity: .5; transform: scale(.94); transform-origin: 50% 0; }
.n-ghost .n-ico { background: #DDE7ED; }
.n-ghost b, .n-ghost small { display: block; height: .75em; border-radius: .4em; background: #DDE7ED; }
.n-ghost b { width: 11em; max-width: 100%; }
.n-ghost small { width: 7em; margin-top: .45em; }
html.motion .tile.on .md-aviso .notif:not(.n-ghost) { animation: notif-in 6s var(--ease) infinite; }
html.motion .tile.on .n-ico svg { animation: bell 6s ease-in-out infinite; }
@keyframes notif-in { 0% { opacity: 0; transform: translateY(-1.6em); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bell { 0%, 12%, 30%, 100% { transform: rotate(0); } 16% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 24% { transform: rotate(9deg); } 27% { transform: rotate(-5deg); } }

/* agenda */
.md-agenda { display: grid; align-content: center; }
.cal {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(4, 2.5em); gap: .4em;
  padding: .85em; border: 1px solid var(--line); border-radius: 1em; background: #F6F9FB;
}
.cal-h { color: #566873; text-align: center; }
.ev { border-radius: .55em; border-left: .28em solid var(--c500); background: #D8F2FB; }
.e1 { grid-column: 1; grid-row: 2; } .e2 { grid-column: 2; grid-row: 3 / span 2; }
.e3 { grid-column: 4; grid-row: 2 / span 2; } .e4 { grid-column: 5; grid-row: 4; }
.e-new {
  grid-column: 6; grid-row: 3 / span 2; display: flex; align-items: center; justify-content: space-between; gap: .3em;
  padding: 0 .5em; border-left-color: var(--c400); background: var(--p900); color: #fff; font-size: .82em; font-weight: 600;
}
.e-new svg { width: 1.2em; height: 1.2em; fill: none; stroke: #7fe0b8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.motion .tile.on .e-new { animation: ev-pop 6s var(--ease-pop) infinite; }
@keyframes ev-pop { 0%, 14% { opacity: 0; transform: scale(.5); } 24%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* contatos, tarefas e respostas rápidas */
.md-cont { gap: .55em; }
.mc-row {
  display: flex; align-items: center; gap: .85em; padding: .8em .95em;
  border: 1px solid var(--line); border-radius: .95em; background: #F6F9FB;
}
.mc-row span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mc-row b { font-size: 1em; font-weight: 600; }
.mc-row small { color: #566873; font-size: .86em; }
.mc-row .tag { margin-left: auto; padding: .25em .7em; border-radius: 999px; background: #DDF1F8; color: var(--c700); }
.ck { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #2fb98a; color: #fff; }
.ck svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qr-pill { flex: none; padding: .3em .7em; border-radius: .5em; background: var(--p900); color: var(--brisa); }
.qr-tx { color: #2f4551; font-size: .94em; }
html.motion .tile.on .mc-row { animation: mc-in 7s var(--ease) infinite; }
html.motion .tile.on .mc-2 { animation-delay: .35s; }
html.motion .tile.on .mc-3 { animation-delay: .7s; }
html.motion .tile.on .ck { animation: ck-fill 7s ease-in-out .35s infinite; }
@keyframes mc-in { 0% { opacity: 0; transform: translateX(-.8em); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ck-fill { 0%, 22% { background: #DDE7ED; transform: scale(.85); } 30%, 100% { background: #2fb98a; transform: scale(1); } }

/* visão geral do dia */
.md-visao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; align-content: end; }
.vz { display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: .7em; height: 13em; }
.vz .bar {
  grid-row: 1; align-self: end; height: var(--h); transform-origin: 50% 100%;
  border-radius: .75em .75em .3em .3em; background: linear-gradient(180deg, var(--c400), var(--c500));
}
.vz > span { grid-row: 2; color: #566873; line-height: 1.3; }
html.motion .tile:not(.on) .bar { transform: scaleY(0); }
html.motion .tile.on .bar { transition: transform 1.1s var(--ease) .15s; }
html.motion .tile.on .vz:nth-child(2) .bar { transition-delay: .3s; }
html.motion .tile.on .vz:nth-child(3) .bar { transition-delay: .45s; }

/* equipe com acesso */
.md-equipe { gap: .55em; }
.eq-row { display: flex; align-items: center; gap: .85em; padding: .7em .9em; border: 1px solid var(--line); border-radius: .95em; background: #F6F9FB; font-weight: 500; }
html.motion .tile.on .eq-row { animation: eq-hi 6s ease-in-out infinite; }
html.motion .tile.on .eq-row:nth-child(2) { animation-delay: 1.5s; }
html.motion .tile.on .eq-row:nth-child(3) { animation-delay: 3s; }
html.motion .tile.on .eq-row:nth-child(4) { animation-delay: 4.5s; }
@keyframes eq-hi { 0%, 100% { background: #F6F9FB; border-color: var(--line); } 6%, 22% { background: #E5F3F8; border-color: var(--c400); } 30% { background: #F6F9FB; border-color: var(--line); } }


/* ---------- 06 · Planos ---------- */
.planos { padding: calc(var(--seam) * .9) 0 clamp(4.5rem, 10vh, 7rem); }
.planos .sec-head { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.ciclo {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; min-inline-size: 0;
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem); padding: 5px;
  border: 1px solid var(--line2); border-radius: 999px; background: rgba(0, 28, 45, .4);
}
.ciclo-thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 999px; background: var(--brisa); transition: transform .55s var(--ease);
}
.ciclo[data-ciclo="annual"] .ciclo-thumb { transform: translateX(100%); }
.ciclo-opcao {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px; padding: .5rem 1.4rem; border-radius: 999px;
  color: var(--fg2); font-family: var(--f-display); font-size: .95rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: color .3s;
}
.ciclo-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ciclo-opcao:has(input:checked) { color: var(--p950); }
.ciclo-opcao:has(input:focus-visible) { outline: 2px solid var(--brisa); outline-offset: 3px; }
.ciclo-economia {
  padding: .22em .6em; border-radius: 999px; background: rgba(142, 202, 230, .18); color: var(--brisa);
  font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; transition: background-color .3s, color .3s;
}
.ciclo-opcao:has(input:checked) .ciclo-economia { background: var(--p900); color: #fff; }
/* o lugar da etiqueta fica reservado até os planos chegarem: sem isso o seletor alarga e empurra o que está abaixo quando ela aparece */
.ciclo-economia[data-aguardando] { visibility: hidden; min-width: 10.2em; }

.planos-grade { --colunas: 3; display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.plano {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid var(--line2); border-radius: 26px; background: var(--card); color: var(--fg);
  transition: translate .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
}
.plano:hover { translate: 0 -4px; border-color: var(--brisa); }
.plano-destaque {
  --fg: #071820; --fg2: #455661; --line: rgba(2, 48, 71, .1); --line2: rgba(2, 48, 71, .2); --hi: #0C687D;
  background: #F7FBFC; border-color: transparent;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .5);
}
.plano-destaque:hover { border-color: transparent; translate: 0 -6px; }
.plano-topo { min-height: 8.2rem; }
.plano-etiqueta { display: inline-block; margin-bottom: .9rem; padding: .32rem .75rem; border-radius: 999px; background: var(--p900); color: #fff; font-size: .62rem; }
.plano-nome { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.045em; }
.plano-descricao { margin-top: .6rem; color: var(--fg2); font-size: .95rem; line-height: 1.5; }
.plano-preco { position: relative; margin: 1.3rem 0 1.3rem; padding: 1.3rem 0 1.15rem; border-block: 1px solid var(--line); }
.preco-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.preco-valor { font-family: var(--f-display); font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.preco-ciclo { color: var(--fg2); font-size: .95rem; }
.preco-nota { min-height: 1.3em; margin-top: .55rem; color: var(--fg2); font-size: .86rem; }
.preco-indisponivel { color: var(--fg2); }
.preco-economia {
  position: absolute; right: 0; top: 1.3rem; padding: .32rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--hi) 16%, transparent); color: var(--hi); font-size: .62rem; font-weight: 600;
}
.plano-itens { display: grid; flex: 1; gap: .8rem; margin-bottom: 1.8rem; }
.plano-itens li { display: flex; align-items: flex-start; gap: .7rem; font-size: .97rem; line-height: 1.4; }
.plano-itens .ico { width: 1.3em; height: 1.3em; margin-top: .05em; padding: .22em; border-radius: 50%; background: color-mix(in srgb, var(--hi) 18%, transparent); color: var(--hi); stroke-width: 2.8; }
.plano .btn { width: 100%; margin-top: auto; min-height: 3.6rem; text-wrap: balance; } /* o rótulo "Testar o Profissional pelo WhatsApp" pode quebrar em duas linhas: os três botões ficam da mesma altura */
.plano-destaque .btn-sol { box-shadow: 0 16px 44px -14px rgba(255, 183, 3, .75); }
.plano-esq { min-height: 33rem; gap: 1.1rem; pointer-events: none; }
.esq { display: block; border-radius: .55rem; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)) 0 0 / 200% 100%; animation: esq 1.8s linear infinite; }
.esq-t { width: 58%; height: 2rem; } .esq-l { height: 1rem; } .esq-p { width: 48%; height: 3.4rem; margin-block: 1rem; } .esq-b { height: 3rem; margin-top: auto; border-radius: 12px; }
@keyframes esq { to { background-position: -200% 0; } }
.planos-falha { grid-column: 1 / -1; display: grid; justify-items: start; gap: 1.2rem; padding: 2rem; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); }
.planos-falha p { max-width: 36rem; color: var(--fg2); }
.planos-nota { margin-top: 1.6rem; color: var(--fg2); font-size: .95rem; }
.planos-mais { margin-top: .6rem; }

/* ---------- 07 · Perguntas frequentes ---------- */
.faq { padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(5rem, 10vh, 8rem); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.faq-head { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq .h2 { margin-bottom: 1.4rem; font-size: clamp(2rem, 1.1rem + 3vw, 3.7rem); }
.faq-head .sec-lead { max-width: 24rem; }
.qa { border-top: 1px solid var(--line2); }
.qa:last-child { border-bottom: 1px solid var(--line2); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px; padding: 1.15rem 0; list-style: none; cursor: pointer;
  font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover .qa-ico { border-color: var(--brisa); }
.qa-ico { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 50%; transition: border-color .3s, background-color .3s, transform .5s var(--ease); }
.qa-ico::before, .qa-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease); }
.qa-ico::after { transform: rotate(90deg); }
.qa[open] .qa-ico { background: var(--brisa); border-color: var(--brisa); color: var(--p950); }
.qa[open] .qa-ico::after { transform: rotate(0); }
.qa-body { overflow: hidden; }
.qa-in { max-width: 44rem; padding: 0 3.4rem 1.6rem 0; color: var(--fg2); }
.qa-in p + p { margin-top: .8rem; }
.qa-in a { color: var(--fg); text-underline-offset: .2em; }
.qa-in a:hover { color: var(--hi); }

/* ---------- 08 · Chamada final ---------- */
.final { padding: clamp(6rem, 14vh, 10rem) 0 clamp(6.5rem, 15vh, 10.5rem); overflow: clip; }
.final-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.final-bg .grid-lines { -webkit-mask-image: radial-gradient(70% 80% at 62% 50%, #000 12%, transparent 72%); mask-image: radial-gradient(70% 80% at 62% 50%, #000 12%, transparent 72%); }
.cloud-final { left: 50%; top: 50%; width: min(1500px, 130vw); transform: translate(-50%, -50%); color: var(--brisa); opacity: .1; }
.final-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.final-title { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.2rem); line-height: .95; letter-spacing: -.055em; }
.final-lead { max-width: 34rem; margin: 1.6rem 0 1rem; color: var(--fg2); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.final-note { max-width: 34rem; color: var(--fg2); font-size: .92rem; }
.final-actions { display: grid; justify-items: center; gap: 1.6rem; }
.cta-orb {
  position: relative; display: grid; place-items: center; align-content: center; gap: .55rem;
  width: clamp(200px, 22vw, 280px); aspect-ratio: 1; border-radius: 50%;
  background: var(--sol); color: var(--p950); text-decoration: none; text-align: center;
  font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  box-shadow: 0 30px 90px -20px rgba(255, 183, 3, .55), 0 0 0 10px rgba(255, 183, 3, .12);
  transition: box-shadow .5s var(--ease), background-color .15s;
}
.cta-orb:hover { background: var(--sol-400); box-shadow: 0 40px 110px -20px rgba(255, 183, 3, .7), 0 0 0 16px rgba(255, 183, 3, .14); }
.cta-orb .ico { width: 1.7em; height: 1.7em; stroke-width: 2.2; }
.orb-ring { position: absolute; inset: -14px; border: 1px solid rgba(255, 183, 3, .5); border-radius: 50%; animation: orb-pulse 3s var(--ease) infinite; pointer-events: none; }
@keyframes orb-pulse { 0% { transform: scale(.98); opacity: .8; } 100% { transform: scale(1.32); opacity: 0; } }

/* ---------- Rodapé ---------- */
.footer { position: relative; background: var(--p950); color: var(--fg); border-top: 1px solid var(--line2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); padding-block: clamp(3rem, 7vh, 5rem) 2.4rem; }
.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { max-width: 18rem; color: var(--fg2); font-size: .95rem; }
.footer-traco { width: 130px; height: 6px; margin-top: 1.4rem; fill: none; stroke: var(--c500); stroke-width: 3; }
.footer-title { margin-bottom: .7rem; color: var(--fg2); font-family: var(--f-display); font-size: .74rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--fg); font-size: .96rem; text-decoration: none; transition: color .2s; }
.footer li a:hover { color: var(--hi); }
.footer-base .copy { text-transform: none; letter-spacing: .04em; }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.2rem 2rem; border-top: 1px solid var(--line); color: var(--fg2); }
.motion-toggle { min-height: 44px; padding: .5rem 1.1rem; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.motion-toggle:hover { border-color: var(--brisa); }
.motion-toggle[aria-pressed="true"] { border-color: var(--brisa); background: var(--brisa); color: var(--p950); }


/* ---------- Telas médias ---------- */
@media (max-width: 1100px) {
  .nav { gap: 1.25rem; font-size: .9rem; }
  .hero-inner { column-gap: 2rem; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}
@media (max-width: 1023px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-conv, .t-cont { grid-column: 1 / -1; grid-row: auto; }
  .conv-rows li:nth-child(n+6) { display: none; } /* a peça deixa de ser alta: cinco conversas bastam */
  .t-ia, .t-doc, .t-funil, .t-ret, .t-aviso, .t-agenda, .t-visao, .t-equipe { grid-column: auto; }
}

/* ---------- Tablet e celular: uma coluna, menu em tela cheia ---------- */
/* menu em tela cheia: o cabeçalho completo não cabe abaixo de 1060px */
@media (max-width: 1060px) {
  .menu-btn { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 190;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: .25rem;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 2.5rem;
    background: var(--p950); color: #F7FBFC; --btn-bg: #5CB8D2; --btn-fg: #001C2D;
    opacity: 0; visibility: hidden; transform: translateY(-1rem);
    transition: opacity .4s, transform .6s var(--ease), visibility 0s .6s;
    overflow-y: auto;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav a:not(.btn) {
    min-height: 56px; color: #F7FBFC;
    font-family: var(--f-display); font-size: clamp(1.7rem, 7.4vw, 2.6rem); font-weight: 700; letter-spacing: -.04em;
  }
  .nav a[aria-current]::after { bottom: 8px; }
  .nav-entrar { margin-left: 0; }
  .nav-cta { display: inline-flex; margin-top: 1.4rem; }
  /* o menu em tela cheia mora dentro do cabeçalho: sem filtro no cabeçalho (ele viraria o referencial da tela) e com a marca e o botão acima do véu */
  .brand, .header-actions { position: relative; z-index: 195; }
  html.menu-open { overflow: hidden; }
  html.menu-open .header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.menu-open .header { --h-fg: #F7FBFC; --h-fg2: #B7D3E6; --h-line: rgba(142, 202, 230, .2); --h-bg: transparent; }
  html.menu-open .header .brand-logo { color: #FFFFFF; }
  html.menu-open .header .brand-logo .lg-neg { display: inline; }
  html.menu-open .header .brand-logo .lg-col { display: none; }
}

@media (max-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .h2 { font-size: clamp(2rem, 1.2rem + 4.6vw, 3.4rem); }

  /* topo: texto e depois a demonstração; o funil vem logo abaixo do celular */
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 6vw, 3rem); padding-top: calc(var(--header-h) + 1.6rem); padding-bottom: 3rem; }
  .hero-title { font-size: clamp(2.2rem, 11.2vw, 4.6rem); }
  .stage-box { container-type: inline-size; width: min(100%, 460px); aspect-ratio: auto; height: auto; display: grid; justify-items: center; }
  .phone { position: relative; left: auto; top: auto; width: min(66%, 300px); height: auto; aspect-ratio: 9 / 18.6; padding: .9cqi; border-radius: 7.4cqi; }
  .wa { border-radius: 6.6cqi; }
  .mini-funnel { position: relative; right: auto; top: auto; width: 100%; margin-top: -1.2rem; padding: 3.2cqi; border-radius: 5cqi; }
  .ground-steps { display: none; }

  /* comparador */
  .split { height: clamp(470px, 74svh, 600px); border-radius: 20px; }
  /* cada legenda fica na sua metade: com o divisor no meio, uma não atravessa a outra */
  .split-label { max-width: calc(50% - 1.6rem); bottom: 1.2rem; }
  .split-label-a { left: 1.1rem; } .split-label-b { right: 1.1rem; }

  /* trilha: passos empilhados */
  .est-panel[data-step] { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .est-intro .h2 { max-width: 16ch; }

  /* agente e equipe */
  .ae-stage { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .ae-wire, .ae-point { display: none; }

  /* planos, perguntas, chamada final, rodapé */
  .planos-grade { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
  .plano-topo { min-height: 0; }
  .plano-esq { min-height: 26rem; }
  .ciclo { display: grid; width: 100%; max-width: 34rem; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .final-inner { grid-template-columns: minmax(0, 1fr); }
  .final-actions { justify-items: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .header-cta { display: none; }
  .brand-logo { width: 132px; height: 17px; }
  .qa-in { padding-right: 0; }
  .final-actions { justify-items: center; }
  .final-copy { text-align: left; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-base { flex-wrap: wrap; }
  .hero-actions { gap: .4rem 1.4rem; }
  .hero-actions .btn { width: 100%; }
  .ciclo-opcao { padding-inline: .7rem; font-size: .9rem; }
  .ciclo-economia { font-size: .58rem; }
  .preco-economia { position: static; display: inline-block; margin-top: .6rem; }
  .sec-lead { font-size: 1rem; }
}
@media (max-width: 380px) {
  .brand-sep, .brand-desc { display: none; }
  .nav a:not(.btn) { font-size: 1.6rem; }
}

/* telas muito largas: o conteúdo respira, não estica */
@media (min-width: 1700px) {
  :root { --wrap: min(1360px, calc(100% - var(--gutter) * 2)); }
  .hero-title { font-size: 5rem; }
}

/* ---------- Sem JavaScript ---------- */
html:not(.js) #planos-lista { display: none; }
html:not(.js) .motion-toggle, html:not(.js) .split-hint { display: none; }
/* o cabeçalho troca de tema e some ao rolar por script; sem ele fica sólido e escuro (legível sobre qualquer seção) e o botão de menu,
   que também depende do script, sai de cena: o rodapé repete os links de cada seção */
html:not(.js) .header { --hh: 60px; background: var(--p950); border-bottom-color: rgba(142, 202, 230, .16); }
html:not(.js) .menu-btn { display: none; }

/* ---------- Página parada: "reduzir movimento" do sistema ou botão de pausa ---------- */
html.paused *, html.paused *::before, html.paused *::after {
  animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.reduced .motion-toggle { display: none; }
html.paused .loader { display: none !important; }
html.paused .typing { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .loader { display: none !important; }
  .motion-toggle { display: none; }
}


/* ---------- Estados que o JavaScript liga e peças só do JavaScript ---------- */
.stage { perspective: 1400px; }
.fly-dot {
  position: absolute; left: 0; top: 0; z-index: 5; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--brisa); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 5px rgba(142, 202, 230, .25), 0 0 24px 6px rgba(142, 202, 230, .7);
}
.ae-card { transition: border-color .5s, box-shadow .5s; }
.ae-team.active { border-color: var(--c500); box-shadow: 0 0 0 4px rgba(33, 158, 188, .14), 0 30px 60px -44px rgba(2, 48, 71, .4); }
.ae-agent .checks li { transition: opacity .5s; }
.ae-agent.done .checks li { opacity: .62; }
html:not(.motion) .signal, html:not(.motion) .sig-head { display: none; }

/* ---------- Página de planos ---------- */
.pl-hero { padding: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)) 0 clamp(3.5rem, 8vh, 6rem); }
.pl-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--p950); }
.pl-hero .grid-lines { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(80% 70% at 70% 20%, #000 10%, transparent 70%); pointer-events: none; }
.pl-title { max-width: 16ch; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.8rem); line-height: .96; letter-spacing: -.05em; }
.pl-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 1.5rem 4rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.pl-hero .planos-grade { margin-top: .4rem; }
.pl-hero .planos-nota { margin-top: 1.6rem; }
.incluem { padding: calc(var(--seam) * .9) 0 clamp(4.5rem, 10vh, 7rem); }
.incluem::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--p950) 0, var(--n100) var(--seam)); }
.incluem .sec-head { margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.inc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: clamp(.9rem, 1.6vw, 1.3rem); }
.inc-item { display: grid; align-content: start; gap: .65rem; padding: 1.35rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: border-color .3s, translate .5s var(--ease); }
.inc-item:hover { border-color: var(--line2); translate: 0 -3px; }
.inc-ico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .9rem; background: var(--p900); color: #fff; }
.inc-ico svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inc-item h3 { font-size: 1.15rem; letter-spacing: -.03em; line-height: 1.15; }
.inc-item p { color: var(--fg2); font-size: .94rem; line-height: 1.5; }
.inc-creditos { margin-top: clamp(1.4rem, 3vh, 2rem); padding: 1.5rem 1.6rem; border: 1px solid var(--line2); border-radius: 22px; background: #fff; }
.inc-creditos h3 { margin-bottom: .6rem; font-size: 1.2rem; letter-spacing: -.03em; }
.inc-creditos p { max-width: 46rem; color: var(--fg2); font-size: .97rem; }
.inc-creditos p + p { margin-top: .6rem; }
.pl-faq::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--n100) 0, var(--p900) var(--seam)); }
.pl-faq { padding-top: calc(var(--seam) * .9); }
.pl-fim { text-align: center; }
.pl-fim .final-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.pl-fim .final-title { max-width: 14ch; font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.8rem); }
.pl-fim .final-lead, .pl-fim .final-note { margin-inline: auto; }
.pl-fim .final-actions { margin-top: .6rem; }
.pl-fim .btn { min-height: 56px; padding-inline: 2rem; font-size: 1.05rem; }
@media (max-width: 900px) { .pl-intro { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 2rem) 0 4rem; overflow: clip; }
.nf-inner { position: relative; z-index: 2; }
.nf-num { margin-bottom: 1rem; color: var(--brisa); font-family: var(--f-mono); font-size: clamp(.8rem, .7rem + .3vw, .95rem); letter-spacing: .12em; }
.nf-title { max-width: 14ch; font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); line-height: .94; letter-spacing: -.055em; }
.nf-lead { max-width: 32rem; margin: 1.5rem 0 2rem; color: var(--fg2); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.nf .cloud-cut { right: -20vw; top: 50%; width: min(1100px, 110vw); transform: translateY(-50%); color: var(--brisa); opacity: .12; }

/* rodapé enxuto da 404: os quatro documentos na mesma linha, quebrando em telas estreitas */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 1.4rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg2); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: var(--hi); }