/* =========================================================================
   PIE — DESIGN SYSTEM (dourado sobre preto, sofisticado e tecnológico)
   ========================================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* ESCALA TIPOGRAFICA — os mesmos degraus do portal (fs-1..fs-8), estendidos
     para os titulos de display do site. Antes eram 142 font-size em px solto,
     com 24 valores distintos (10.5, 11.5, 13.8...): tamanho decidido no olho,
     um por vez. Escala e o que faz 7 paginas parecerem o mesmo produto. */
  --fs-1: 11px;
  --fs-2: 12px;
  --fs-3: 13px;
  --fs-4: 14px;
  --fs-5: 16px;
  --fs-6: 18px;
  --fs-7: 21px;
  --fs-8: 26px;
  --fs-9: 32px;
  --fs-10: 42px;
  --fs-11: 56px;

  /* GRADE DE ESPACAMENTO — multiplos de 4. Mesma razao. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --esp-9: 90px;

  --bg:            #08080a;
  --bg-2:          #0d0d11;
  --bg-card:       #101015;
  --bg-card-hover: #15151c;
  --line:          rgba(212,175,55,.14);
  --line-strong:   rgba(212,175,55,.34);

  --gold:          #d4af37;
  --gold-bright:   #f0d77e;
  --gold-deep:     #9a7b2e;
  --gold-grad:     linear-gradient(135deg, #f6e4a1 0%, #d4af37 42%, #b8912f 70%, #f0d77e 100%);

  --text:          #ededf0;
  --text-soft:     #b6b6c0;
  --text-mute:     #7d7d88;

  --wpp:           #25d366;

  --maxw:          1180px;
  --radius:        16px;
  --radius-sm:     11px;

  --shadow-gold:   0 18px 60px -20px rgba(212,175,55,.28);
  --ease:          cubic-bezier(.22,.61,.36,1);

  --ff: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  overflow-x: hidden; max-width: 100%;
}
body {
  margin: 0;
  font-family: var(--ff);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
/* nada pode estourar a largura da tela (defesa geral do mobile) */
h1, h2, h3, p, li, a, span, div { overflow-wrap: break-word; word-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 800; }

/* ---------- LAYOUT ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { position: relative; padding: 96px 0; }
.sec-head { max-width: 680px; margin: 0 0 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.overline {
  display: inline-block; font-size: var(--fs-3); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(212,175,55,.08); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
}
h2.title { font-size: clamp(var(--fs-8), 4.4vw, var(--fs-10)); }
.sec-head p { color: var(--text-soft); font-size: clamp(var(--fs-5),1.8vw,var(--fs-6)); margin: 16px 0 0; }
.gold-text {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: var(--fs-5);
  border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: var(--gold-grad); color: #211a05; box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 22px 70px -18px rgba(212,175,55,.5); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.btn-wpp { background: var(--wpp); color: #04310f; }
.btn-wpp:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -18px rgba(37,211,102,.5); }
.btn.block { width: 100%; }

/* ---------- NAVBAR ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: rgba(8,8,10,.55); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s;
}
.nav.scrolled { background: rgba(8,8,10,.9); border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .04em; }
.brand img { height: 44px; width: auto; filter: drop-shadow(0 3px 14px rgba(212,175,55,.42)); transition: filter .3s var(--ease); }
.brand:hover img { filter: drop-shadow(0 3px 20px rgba(212,175,55,.7)); }
.brand span { font-size: var(--fs-3); color: var(--text-mute); font-weight: 600; letter-spacing: .12em; }
.nav-links { display: flex; align-items: center; gap: var(--esp-5); }
/* nowrap: item de menu que quebra em duas linhas desalinha a barra inteira. */
.nav-links a { white-space: nowrap; }
/* Area do Cliente e porta de servico: discreta, separada por uma linha, e SEM
   dourado — dourado no topo pertence ao CTA de venda. */
.nav-links .nav-cliente {
  margin-left: var(--esp-3); padding-left: var(--esp-4);
  border-left: 1px solid var(--line); color: var(--text-mute); font-weight: 500;
}
.nav-links .nav-cliente:hover { color: var(--text-soft); }
.nav-links a.on { color: var(--gold); }
/* foco visivel: navegacao por teclado nao pode ser invisivel */
.nav-links a:focus-visible, .btn:focus-visible, .brand:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px;
}
.nav-links a { color: var(--text-soft); font-size: var(--fs-4); font-weight: 600; transition: color .2s; }
.nav-links a:hover { color: var(--gold-bright); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--gold); padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- HERO ---------- */
.hero { padding: var(--esp-9) 0 var(--esp-8); overflow: hidden; }
/* O simbolo ficava SOZINHO embaixo do texto, e o titulo centralizado deixava as
   laterais vazias — duas faixas mortas numa tela larga. Agora simbolo e texto
   sao a MESMA composicao: o conjunto ocupa a largura, cada um com seu peso. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center; gap: var(--esp-7); text-align: left;
}
.hero-texto { min-width: 0; }
.hero::before { /* glow dourado */
  content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: min(900px, 130vw); height: 620px; pointer-events: none; max-width: 130vw;
  background: radial-gradient(closest-side, rgba(212,175,55,.20), rgba(212,175,55,.05) 55%, transparent 75%);
  filter: blur(10px);
}
.hero::after { /* grade tecnológica */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(212,175,55,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(212,175,55,.045) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-size: var(--fs-3); color: var(--gold-bright); font-weight: 600;
  border: 1px solid var(--line); background: rgba(212,175,55,.06); padding: 8px 16px; border-radius: 999px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wpp); box-shadow: 0 0 10px var(--wpp); }
.hero h1 { font-size: clamp(var(--fs-9), 5vw, var(--fs-11)); max-width: 17ch; margin: 0; font-weight: 900; line-height: 1.05; }
.hero p.sub { max-width: 52ch; margin: var(--esp-5) 0 0; color: var(--text-soft); font-size: clamp(var(--fs-5),2vw,var(--fs-6)); }
.hero-cta { display: flex; gap: var(--esp-3); justify-content: flex-start; flex-wrap: wrap; margin-top: var(--esp-6); }
/* logo do hero: PNG transparente + o glow dourado aprovado pelo Richard */
.hero-logo {
  width: 100%; max-width: 420px; margin: 0; justify-self: center;
  filter: drop-shadow(0 0 46px rgba(212,175,55,.42)) drop-shadow(0 18px 50px rgba(212,175,55,.22));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- FAIXA DE FLUXO ---------- */
.flow { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); padding: 30px 0; }
.flow-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.flow-item { font-weight: 700; font-size: clamp(var(--fs-3),1.6vw,var(--fs-5)); color: var(--text); }
.flow-sep { color: var(--gold); font-size: var(--fs-6); }

/* ---------- GRID DE CARDS ---------- */
/* ------------------------------------------------------------------
   POR QUE minmax(0, 1fr) E NAO 1fr
   `1fr` sozinho e `minmax(auto, 1fr)`: a coluna NUNCA encolhe abaixo do
   conteudo mais largo que ela tem dentro. Numa grade de 4 cards de preco isso
   fazia as colunas somarem 1.324px dentro de um container de 1.132px — e o 4o
   card saia da tela: cortado 39px em 1440, 119px em 1280, 249px em 1100.
   Como o body tem overflow-x: hidden, nao aparecia barra de rolagem: o card
   simplesmente sumia pela direita, sem nenhum sinal de que existia.
   `minmax(0, 1fr)` deixa a coluna encolher e o texto quebrar. Medido 22/08.
   ------------------------------------------------------------------ */
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }   /* o filho tambem precisa poder encolher */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.card:hover { transform: translateY(-5px); border-color: var(--line-strong); background: var(--bg-card-hover); }
.card .ico {
  width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(212,175,55,.09); border: 1px solid var(--line);
}
.card .ico svg { width: 28px; height: 28px; stroke: var(--gold-bright); }
.card h3 { font-size: var(--fs-7); margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: var(--fs-4); margin: 0; }

/* ---------- BLOCO IA (produto principal) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ability-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.ability-list li { position: relative; padding-left: 26px; color: var(--text-soft); font-size: var(--fs-4); }
.ability-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 4px;
  background: var(--gold-grad);
}
.ia-visual {
  background: linear-gradient(160deg, #101015, #0a0a0d); border: 1px solid var(--line-strong);
  border-radius: 20px; padding: 26px; box-shadow: var(--shadow-gold);
}
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat .h { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.chat .h .av { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-grad); display: grid; place-items: center; color: #201a06; font-weight: 800; font-size: var(--fs-4); }
.chat .h b { font-size: var(--fs-4); }
.chat .h small { color: var(--wpp); font-size: var(--fs-2); }
.bubble { max-width: 82%; padding: 11px 15px; border-radius: 14px; font-size: var(--fs-4); }
.bubble.them { align-self: flex-start; background: #1b1b22; color: var(--text); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--gold-grad); color: #221b06; border-bottom-right-radius: 4px; font-weight: 500; }

/* ---------- NÍVEIS DE IA ---------- */
.level {
  display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; transition: transform .3s var(--ease), border-color .3s;
}
.level:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.level.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,175,55,.06), var(--bg-card)); box-shadow: var(--shadow-gold); }
.level .tag { font-size: var(--fs-2); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.level h3 { font-size: var(--fs-8); margin: 8px 0 6px; }
.level .resume { color: var(--text-soft); font-size: var(--fs-4); min-height: 44px; }
.level .best { align-self: flex-start; font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #221b06; background: var(--gold-grad); padding: 5px 11px; border-radius: 999px; margin-bottom: 12px; }
.level ul { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.level ul li { position: relative; padding-left: 24px; font-size: var(--fs-4); color: var(--text-soft); }
.level ul li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-bright); font-weight: 800; }
.level .msg { font-size: var(--fs-4); color: var(--text); font-style: italic; border-left: 2px solid var(--gold); padding-left: 14px; margin: 6px 0 22px; }
.level .price { color: var(--gold-bright); font-weight: 700; margin-bottom: 16px; min-height: 20px; }
.level .btn { margin-top: auto; }

/* ---------- PROCESSO ---------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.step { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.step .n { font-size: var(--fs-10); font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.step h3 { font-size: var(--fs-6); margin: 6px 0 8px; }
.step p { color: var(--text-soft); font-size: var(--fs-4); margin: 0; }

/* ---------- OFERTA / DESTAQUE ---------- */
.banner {
  background: linear-gradient(135deg, rgba(212,175,55,.10), rgba(212,175,55,.02));
  border: 1px solid var(--line-strong); border-radius: 22px; padding: 46px;
  display: grid; grid-template-columns: 1.4fr .6fr; gap: 30px; align-items: center;
}
.banner .price-big { font-size: clamp(var(--fs-9),5vw,var(--fs-10)); font-weight: 900; }
.banner small { color: var(--text-mute); display: block; margin-top: 10px; font-size: var(--fs-3); line-height: 1.5; }

/* ---------- PACOTES ---------- */
.pack { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.pack.on { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.pack h3 { font-size: var(--fs-7); }
.pack .desc { color: var(--text-soft); font-size: var(--fs-4); margin: 6px 0 16px; }
.pack ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; }
.pack ul li { padding-left: 22px; position: relative; font-size: var(--fs-4); color: var(--text-soft); }
.pack ul li::before { content: "▹"; position: absolute; left: 0; color: var(--gold); }
.pack .price { color: var(--gold-bright); font-weight: 700; margin-bottom: 16px; }
.pack .btn { margin-top: auto; }

/* ---------- DIFERENCIAL ---------- */
.contrast { text-align: center; }
.contrast h2 { font-size: clamp(var(--fs-8),4vw,var(--fs-10)); max-width: 20ch; margin: 0 auto 18px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.qa { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; background: var(--bg-card); }
.qa button { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 20px 22px; font-size: var(--fs-5); font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.qa button .plus { color: var(--gold); font-size: var(--fs-7); transition: transform .3s; flex: none; }
.qa.open button .plus { transform: rotate(45deg); }
.qa .a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.qa .a p { padding: 0 22px 20px; margin: 0; color: var(--text-soft); font-size: var(--fs-4); }

/* ---------- CTA FINAL + FORM ---------- */
.cta-final { text-align: center; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--line); }
.cta-final h2 { font-size: clamp(var(--fs-8),4.6vw,var(--fs-10)); max-width: 18ch; margin: 0 auto 16px; }
.cta-final p { color: var(--text-soft); max-width: 54ch; margin: 0 auto 34px; }
.cta-final .hero-cta { margin-top: 0; }

.form-wrap { max-width: 760px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px,4vw,40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-3); color: var(--text-soft); font-weight: 600; }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 11px; padding: 13px 14px;
  color: var(--text); font-size: var(--fs-4); font-family: inherit; transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 92px; }
.form-msg { text-align: center; padding: 16px; border-radius: 12px; margin-top: 18px; display: none; font-weight: 600; }
.form-msg.ok { display: block; background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.35); color: #7ef0a8; }
.form-msg.warn { display: block; background: rgba(212,175,55,.1); border: 1px solid var(--line-strong); color: var(--gold-bright); }
.form-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* composição de preço (Site + IA: valores somados, não bundle fechado) */
.comp { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 16px; display: grid; gap: 10px; background: rgba(212,175,55,.04); }
.comp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.comp-row .cl { font-size: var(--fs-3); color: var(--text-soft); }
.comp-row .cv { font-size: var(--fs-4); font-weight: 700; color: var(--gold-bright); text-align: right; white-space: nowrap; }
.comp-row .cv small { display: block; font-size: var(--fs-1); font-weight: 500; color: var(--text-mute); }

/* foco visível para navegação por teclado (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px;
}
/* âncoras não ficam escondidas atrás da navbar fixa */
section[id], div[id] { scroll-margin-top: 84px; }

/* ---------- WHATSAPP FLUTUANTE ---------- */
.wpp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 60px; height: 60px; border-radius: 50%; background: var(--wpp);
  display: grid; place-items: center; box-shadow: 0 14px 40px -8px rgba(37,211,102,.6);
  transition: transform .25s var(--ease);
}
.wpp-float:hover { transform: scale(1.08); }
.wpp-float svg { width: 32px; height: 32px; fill: #04310f; }
.wpp-float::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--wpp);
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- FOOTER ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 60px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer .brand img { height: 56px; filter: drop-shadow(0 4px 18px rgba(212,175,55,.35)); }
.footer p.f-tag { color: var(--text-mute); font-size: var(--fs-4); margin: 16px 0 0; max-width: 34ch; }
.footer h4 { font-size: var(--fs-3); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a { color: var(--text-soft); font-size: var(--fs-4); transition: color .2s; }
.footer ul a:hover { color: var(--gold-bright); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 26px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--text-mute); font-size: var(--fs-3); }

/* ---------- ANIMAÇÃO DE REVELAÇÃO ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   MELHORIAS v2 — padrões dos líderes (Poli/Zaia) + tendências 2026
   ========================================================================= */

/* ---------- FAIXA DE CREDIBILIDADE (logo abaixo do hero) ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(212,175,55,.03); padding: 26px 0; }
.trust-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; }
.trust-item { display: flex; align-items: center; gap: 11px; color: var(--text-soft); font-size: var(--fs-4); font-weight: 600; }
.trust-item svg { width: 21px; height: 21px; stroke: var(--gold); flex: none; }

/* ---------- SEÇÃO DE DOR (cena concreta) ---------- */
.pain { text-align: center; }
.pain-scene {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px,3vw,34px);
  flex-wrap: wrap; margin: 40px 0 30px;
}
.pain-step { text-align: center; }
.pain-step .t { font-size: clamp(var(--fs-9),5vw,var(--fs-11)); font-weight: 900; letter-spacing: -.02em; }
.pain-step .l { font-size: var(--fs-4); color: var(--text-mute); margin-top: 4px; }
.pain-step.bad .t { color: #ff6b6b; }
.pain-arrow { color: var(--gold); font-size: var(--fs-8); opacity: .6; }
.pain h2 strong { color: #ff6b6b; font-weight: 900; }

/* ---------- BENTO GRID ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.bento .card { margin: 0; height: 100%; }
.bento .b-2 { grid-column: span 2; }
.bento .b-tall { grid-row: span 2; }
.bento .card.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter: blur(12px); border-color: rgba(212,175,55,.22);
}
.bento .card.hi {
  background: linear-gradient(150deg, rgba(212,175,55,.14), rgba(212,175,55,.03));
  border-color: var(--line-strong);
}
.bento .card .big { font-size: clamp(var(--fs-7),2.6vw,var(--fs-9)); font-weight: 800; line-height: 1.2; margin-bottom: 10px; }

/* ---------- DIFERENCIAÇÃO: NÃO É / É ---------- */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: stretch; margin-top: 40px; }
.vs-col { border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); background: var(--bg-card); }
.vs-col.no { opacity: .78; }
.vs-col.no h3 { color: #ff8080; }
.vs-col.yes { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,175,55,.08), var(--bg-card)); box-shadow: var(--shadow-gold); }
.vs-col.yes h3 { color: var(--gold-bright); }
.vs-col h3 { font-size: var(--fs-6); margin-bottom: 18px; }
.vs-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vs-col li { position: relative; padding-left: 28px; color: var(--text-soft); font-size: var(--fs-4); }
.vs-col.no li::before { content: "✕"; position: absolute; left: 0; color: #ff8080; font-weight: 700; }
.vs-col.yes li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-bright); font-weight: 800; }
.vs-mid { display: grid; place-items: center; color: var(--text-mute); font-weight: 800; font-size: var(--fs-4); letter-spacing: .1em; }

/* ---------- DFY (você não configura nada) ---------- */
.dfy { background: linear-gradient(135deg, rgba(212,175,55,.09), rgba(212,175,55,.02)); border: 1px solid var(--line-strong); border-radius: 22px; padding: clamp(28px,5vw,54px); text-align: center; }
.dfy h2 { font-size: clamp(var(--fs-8),4vw,var(--fs-10)); max-width: 22ch; margin: 0 auto 14px; }
.dfy p.lead { color: var(--text-soft); max-width: 56ch; margin: 0 auto 36px; font-size: var(--fs-5); }
.dfy-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; text-align: left; }
.dfy-step { background: rgba(8,8,10,.5); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px; }
.dfy-step .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gold-grad); color: #201a06; font-weight: 900; margin-bottom: 12px; }
.dfy-step h4 { font-size: var(--fs-5); margin: 0 0 6px; }
.dfy-step p { font-size: var(--fs-4); color: var(--text-soft); margin: 0; }

/* ---------- CHAT: animação de digitação ---------- */
.chat .bubble { animation: pop .45s var(--ease) both; }
.chat .bubble:nth-child(2) { animation-delay: .15s; }
.chat .bubble:nth-child(3) { animation-delay: 1.0s; }
.chat .bubble:nth-child(4) { animation-delay: 1.9s; }
.chat .bubble:nth-child(5) { animation-delay: 2.8s; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.typing { display: inline-flex; gap: 5px; align-items: center; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-live { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2); color: var(--wpp); }
.chat-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wpp); box-shadow: 0 0 9px var(--wpp); animation: blink 2s infinite; }

/* ---------- GRID DE 4 (planos de IA) ---------- */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-4 .level { padding: 26px 22px; }
.grid-4 .level h3 { font-size: var(--fs-7); }
.grid-4 .level ul li { font-size: var(--fs-4); }
.grid-4 .level .resume { font-size: var(--fs-4); min-height: 40px; }
.grid-4 .level .msg { font-size: var(--fs-3); }

/* preço */
.level .price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.price .p-val { font-size: clamp(var(--fs-8), 2.6vw, var(--fs-9)); font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.price .p-suf { font-size: var(--fs-4); color: var(--text-mute); font-weight: 600; }

/* ---------- IMPLANTAÇÃO (taxa única) ---------- */
.setup-box {
  margin-top: 26px; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  background: linear-gradient(135deg, rgba(212,175,55,.08), rgba(212,175,55,.02));
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 28px clamp(22px,3vw,36px);
}
.setup-box h3 { font-size: var(--fs-7); margin-bottom: 8px; }
.setup-box p { color: var(--text-soft); font-size: var(--fs-4); margin: 0 0 8px; max-width: 62ch; }
.setup-box small { color: var(--text-mute); font-size: var(--fs-3); }
.setup-price { text-align: right; white-space: nowrap; }
.setup-price .p-val { font-size: clamp(var(--fs-8),3vw,var(--fs-9)); font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; }
.setup-price .p-suf { font-size: var(--fs-2); color: var(--text-mute); }

/* =========================================================================
   v3 — ARQUITETURA COMERCIAL (sites, tráfego, automação, software, escada)
   ========================================================================= */

/* ---------- CARD DE PRODUTO/PREÇO (padrão de todas as linhas) ---------- */
.pcard {
  display: flex; flex-direction: column; position: relative;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.pcard:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.pcard.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,175,55,.07), var(--bg-card)); box-shadow: var(--shadow-gold); }
.pcard.adv { border-color: rgba(212,175,55,.45); background: linear-gradient(180deg, rgba(212,175,55,.04), var(--bg-card)); }
.pcard .badge {
  position: absolute; top: -11px; left: 22px; font-size: var(--fs-1); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #221b06;
  background: var(--gold-grad); padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.pcard h3 { font-size: var(--fs-7); margin-bottom: 6px; }
.pcard .perfil { font-size: var(--fs-2); color: var(--gold-bright); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.pcard .pval { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
.pcard .pval b { font-size: clamp(var(--fs-8),2.8vw,var(--fs-9)); font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pcard .pval span { font-size: var(--fs-4); color: var(--text-mute); font-weight: 600; }
.pcard .desc { color: var(--text-soft); font-size: var(--fs-4); margin: 10px 0 16px; }
.pcard ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.pcard ul li { position: relative; padding-left: 23px; font-size: var(--fs-4); color: var(--text-soft); }
.pcard ul li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-bright); font-weight: 800; }
.pcard .obs { font-size: var(--fs-2); color: var(--text-mute); font-style: italic; margin: -8px 0 16px; }
.pcard .msg { font-size: var(--fs-3); color: var(--text); font-style: italic; border-left: 2px solid var(--gold); padding-left: 13px; margin: 0 0 18px; }
.pcard .btn { margin-top: auto; }

/* ---------- FÓRMULA IMPLANTAÇÃO + MENSALIDADE ---------- */
.formula {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
  margin: 30px auto 0; max-width: 760px;
}
.formula .fbox { text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px 18px; background: rgba(212,175,55,.05); }
.formula .fbox .lab { font-size: var(--fs-1); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.formula .fbox .v { font-size: clamp(var(--fs-7),2.6vw,var(--fs-8)); font-weight: 900; margin: 8px 0 4px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.formula .fbox small { color: var(--text-mute); font-size: var(--fs-2); }
.formula .plus { font-size: var(--fs-9); color: var(--gold); font-weight: 300; }

/* ---------- BLOCO IMPLANTAÇÃO ---------- */
.impl { background: linear-gradient(135deg, rgba(212,175,55,.09), rgba(212,175,55,.02)); border: 1px solid var(--line-strong); border-radius: 22px; padding: clamp(26px,4vw,44px); }
.impl-head { text-align: center; margin-bottom: 28px; }
.impl-head .selo { display: inline-block; font-size: var(--fs-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #221b06; background: var(--gold-grad); padding: 5px 13px; border-radius: 999px; margin-bottom: 12px; }
.impl-head .valor { font-size: clamp(var(--fs-8),4.4vw,var(--fs-10)); font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.impl-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 26px; margin: 24px 0; }
.impl-grid li { list-style: none; position: relative; padding-left: 22px; font-size: var(--fs-4); color: var(--text-soft); }
.impl-grid li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }
.impl-note { text-align: center; font-size: var(--fs-5); color: var(--text); background: rgba(8,8,10,.45); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; margin-top: 6px; }
.impl-note strong { color: var(--gold-bright); }
.impl small.fine { display: block; text-align: center; color: var(--text-mute); font-size: var(--fs-3); margin-top: 14px; }

/* ---------- ESCADA DE VALOR ---------- */
.ladder { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.rung {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 20px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 22px; transition: border-color .3s, transform .3s var(--ease);
  position: relative;
}
.rung:hover { border-color: var(--line-strong); transform: translateX(5px); }
.rung.on { border-color: var(--gold); background: linear-gradient(90deg, rgba(212,175,55,.09), var(--bg-card)); }
.rung.rec { border-style: dashed; border-color: var(--line-strong); background: rgba(212,175,55,.04); }
.rung .rp { font-size: clamp(var(--fs-5),2vw,var(--fs-7)); font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rung .rn { font-weight: 700; font-size: var(--fs-5); }
.rung .rd { color: var(--text-soft); font-size: var(--fs-4); }
.rung .go { color: var(--gold); font-size: var(--fs-7); opacity: .5; transition: opacity .3s, transform .3s; }
.rung:hover .go { opacity: 1; transform: translateX(4px); }
.ladder-title { text-align: center; font-size: var(--fs-3); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin: 0 0 16px; }
.ladders { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* ---------- CROSS-SELL ---------- */
.cross {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 28px; padding: 18px 24px; text-align: center;
  background: rgba(212,175,55,.05); border: 1px dashed var(--line-strong); border-radius: 999px;
  color: var(--text-soft); font-size: var(--fs-4);
}
.cross a { color: var(--gold-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cross a:hover { color: var(--gold); }

/* ---------- TABELA COMPARATIVA (vira card no mobile) ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 540px; }
table.cmp th, table.cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-4); }
table.cmp th { background: rgba(212,175,55,.07); color: var(--gold-bright); font-size: var(--fs-2); letter-spacing: .1em; text-transform: uppercase; }
table.cmp td:nth-child(2) { font-weight: 800; color: var(--text); white-space: nowrap; }
table.cmp tr:last-child td { border-bottom: 0; }
table.cmp tr.hi td { background: rgba(212,175,55,.08); }
table.cmp tr.hi td:first-child { position: relative; font-weight: 700; }

/* ---------- CARDS DE AGENTES (prova social real) ---------- */
.agent-card {
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter: blur(12px); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.agent-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.agent-top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.agent-av {
  width: 48px; height: 48px; border-radius: 50%; background: var(--gold-grad);
  display: grid; place-items: center; color: #201a06; font-weight: 900; font-size: var(--fs-7); flex: none;
}
.agent-top b { font-size: var(--fs-6); display: block; }
.agent-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--wpp); font-weight: 600; }
.agent-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wpp); box-shadow: 0 0 9px var(--wpp); animation: blink 2s infinite; }
.agent-for { font-size: var(--fs-3); color: var(--gold-bright); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; }
.agent-desc { color: var(--text-soft); font-size: var(--fs-4); margin: 0 0 18px; flex: 1; }
.agent-desc strong { color: var(--text); font-weight: 600; }
.agent-tags { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.agent-tags li { font-size: var(--fs-2); color: var(--text-soft); border: 1px solid var(--line); background: rgba(212,175,55,.06); padding: 5px 11px; border-radius: 999px; }
.agent-since { font-size: var(--fs-2); color: var(--text-mute); border-top: 1px solid var(--line); padding-top: 14px; }
.proof-note {
  margin-top: 26px; text-align: center; color: var(--text-soft); font-size: var(--fs-5); line-height: 1.65;
  background: rgba(212,175,55,.05); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px clamp(20px,4vw,40px); max-width: 900px; margin-inline: auto;
}
.proof-note strong { color: var(--gold-bright); }

/* ---------- STICKY CTA MOBILE ---------- */
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 85; gap: 10px;
    background: rgba(10,10,13,.92); backdrop-filter: blur(14px);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px;
  }
  .sticky-cta .btn { flex: 1; padding: 13px 16px; font-size: var(--fs-4); }
  .wpp-float { bottom: 84px; width: 52px; height: 52px; }
  body { padding-bottom: 84px; }
}

/* ---------- RESPONSIVO DAS NOVAS SEÇÕES ---------- */
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* NAVBAR: os 7 links não cabem abaixo de ~1000px (quebravam em cima da logo).
   Passa para o menu hambúrguer já no tablet. */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: rgba(8,8,10,.98); border-bottom: 1px solid var(--line-strong); padding: 20px 24px; gap: 4px;
  }
  .nav.open .nav-links a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-5); }
  .nav.open .nav-links a:last-child { border-bottom: 0; }
  .nav .wrap { gap: 14px; }
  .brand img { flex: none; }
}
@media (max-width: 940px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento .b-tall { grid-row: span 1; }
  .vs { grid-template-columns: 1fr; }
  .vs-mid { padding: 6px 0; }
  .dfy-steps { grid-template-columns: 1fr; }
  .setup-box { grid-template-columns: 1fr; text-align: center; }
  .setup-price { text-align: center; }
  .setup-box p { margin-inline: auto; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento .b-2 { grid-column: span 1; }
  .trust-track { gap: 12px 22px; }
  .trust-item { font-size: var(--fs-3); }
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 940px) {
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }
  .split, .banner, .footer-grid { grid-template-columns: 1fr; }
  .banner { text-align: center; }
  .ability-list { grid-template-columns: 1fr; }
}
/* =========================================================================
   MOBILE (≤720px) — tratado como prioridade: 83% do tráfego
   ========================================================================= */
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  section { padding: 56px 0; }

  /* navbar compacta + menu full */
  .nav .wrap { height: 62px; }
  .brand img { height: 34px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-gold { padding: 11px 16px; font-size: var(--fs-3); }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0;
    background: rgba(8,8,10,.98); border-bottom: 1px solid var(--line-strong); padding: 20px 18px; gap: 4px;
  }
  .nav.open .nav-links a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-5); }
  .nav.open .nav-links a:last-child { border-bottom: 0; }

  /* HERO: logo pequena ANTES do título (a navbar já tem a marca grande) */
  .hero { padding: var(--esp-8) 0 var(--esp-6); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: var(--esp-4); }
  .hero-cta { justify-content: center; }
  .hero h1 { max-width: 100%; }
  .hero p.sub { margin-left: auto; margin-right: auto; }
  .hero-logo {
    order: -1;                      /* no celular o simbolo vem antes do texto */
    width: 172px; max-width: 60vw; margin: 0 auto var(--esp-4);
    animation: none;                 /* sem flutuar no mobile: distrai */
    filter: drop-shadow(0 0 28px rgba(212,175,55,.4));
  }
  .hero-badge { font-size: var(--fs-1); padding: 6px 12px; margin-bottom: 16px; letter-spacing: .02em; }
  .hero h1 { font-size: clamp(var(--fs-8), 8vw, var(--fs-9)); max-width: 100%; line-height: 1.12; }
  .hero p.sub { font-size: var(--fs-4); margin-top: 14px; max-width: 100%; line-height: 1.5; }
  .hero-cta { margin-top: 22px; gap: 9px; flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero::before { width: 130vw; height: 340px; top: -4%; }
  .hero::after { background-size: 34px 34px; }

  /* CREDIBILIDADE: lista alinhada à esquerda (o centralizado ficava torto) */
  .trust { padding: 20px 0; }
  .trust-track { display: grid; grid-template-columns: 1fr; gap: 11px; justify-items: start; }
  .trust-item { font-size: var(--fs-3); align-items: flex-start; text-align: left; }
  .trust-item svg { width: 18px; height: 18px; margin-top: 2px; }

  /* DOR: compacta (estava espaçadíssima) */
  .pain-scene { flex-direction: column; gap: 2px; margin: 22px 0 18px; }
  .pain-arrow { transform: rotate(90deg); font-size: var(--fs-5); margin: 2px 0; }
  .pain-step .t { font-size: var(--fs-9); }
  .pain-step .l { font-size: var(--fs-2); }
  .pain h2.title { font-size: clamp(var(--fs-7), 6vw, var(--fs-8)); }

  /* um CTA só no rodapé da tela: o verde fixo. O flutuante sai. */
  .wpp-float { display: none; }

  /* tipografia e blocos */
  h2.title { font-size: clamp(var(--fs-7), 6.6vw, var(--fs-9)); }
  .sec-head { margin-bottom: 30px; }
  .sec-head p { font-size: var(--fs-5); }
  .overline { font-size: var(--fs-1); padding: 6px 12px; margin-bottom: 14px; letter-spacing: .14em; }
  .grid, .steps, .form-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .split { gap: 30px; }
  .card, .level, .pack, .step, .agent-card { padding: 22px; }
  .card h3, .agent-top b { font-size: var(--fs-6); }

  /* dor: vira coluna com setas pra baixo */
  .pain-scene { flex-direction: column; gap: 8px; margin: 26px 0 22px; }
  .pain-arrow { transform: rotate(90deg); font-size: var(--fs-7); }
  .pain-step .t { font-size: var(--fs-9); }

  /* chat menor */
  .ia-visual { padding: 18px; }
  .bubble { font-size: var(--fs-4); padding: 10px 13px; max-width: 88%; }
  .ability-list { gap: 10px; }
  .ability-list li { font-size: var(--fs-4); }

  /* fluxo tráfego→venda: rolagem horizontal em vez de quebrar feio */
  .flow { padding: 18px 0; }
  .flow-track { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0 18px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .flow-track::-webkit-scrollbar { display: none; }
  .flow-item { font-size: var(--fs-3); white-space: nowrap; }

  /* níveis / pacotes / oferta */
  .level .resume { min-height: 0; }
  .banner { padding: 26px 20px; text-align: left; }
  .banner .price-big { font-size: var(--fs-9); }
  .dfy { padding: 26px 20px; }
  .dfy-steps { gap: 12px; }
  .vs-col { padding: 22px; }

  /* formulário e CTA */
  .form-wrap { padding: 22px 18px; border-radius: 18px; }
  .field input, .field select, .field textarea { font-size: var(--fs-5); padding: 14px; } /* 16px evita zoom no iOS */
  .btn { padding: 15px 22px; }
  .cta-final h2 { font-size: clamp(var(--fs-8), 6.8vw, var(--fs-9)); }

  /* footer */
  .footer { padding: 44px 0 26px; }
  .footer-grid { gap: 28px; margin-bottom: 28px; }
  .footer .brand img { height: 46px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* toque confortável */
  .qa button { padding: 17px 18px; font-size: var(--fs-5); }
  .qa .a p { padding: 0 18px 18px; font-size: var(--fs-4); }
}

/* --- v3: seções comerciais no mobile --- */
@media (max-width: 940px) {
  .impl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ladders { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
  .pcard { padding: 24px 20px; }
  .pcard .badge { left: 50%; transform: translateX(-50%); }
  .formula { grid-template-columns: 1fr; gap: 12px; }
  .formula .plus { transform: rotate(90deg); font-size: var(--fs-8); }
  .impl { padding: 24px 18px; border-radius: 18px; }
  .impl-grid { grid-template-columns: 1fr; gap: 9px; margin: 18px 0; }
  .impl-note { font-size: var(--fs-4); padding: 16px; }

  /* escada: vira cartão empilhado */
  .rung { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 18px; }
  .rung .rp { grid-column: 1 / -1; font-size: var(--fs-6); }
  .rung .go { grid-row: 2; }
  .rung:hover { transform: none; }

  .cross { border-radius: var(--radius); padding: 16px 18px; font-size: var(--fs-4); text-align: center; }

  /* TABELA -> CARDS empilhados (regra do prompt: não pode ficar ilegível) */
  .tbl-wrap { border: 0; overflow: visible; }
  table.cmp { min-width: 0; display: block; }
  table.cmp thead { display: none; }
  table.cmp tbody, table.cmp tr, table.cmp td { display: block; width: 100%; }
  table.cmp tr {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    margin-bottom: 12px; padding: 14px 16px; background: var(--bg-card);
  }
  table.cmp tr.hi { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,175,55,.08), var(--bg-card)); }
  table.cmp td { border: 0; padding: 4px 0; font-size: var(--fs-4); }
  table.cmp td::before { content: attr(data-l); display: block; font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin-bottom: 2px; }
  table.cmp td:nth-child(2) { font-size: var(--fs-7); }
}

/* telas bem pequenas (≤380px) */
@media (max-width: 380px) {
  .hero h1 { font-size: var(--fs-8); }
  .hero-logo { width: 82vw; }
  .pain-step .t { font-size: var(--fs-8); }
  .agent-av { width: 42px; height: 42px; font-size: var(--fs-6); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .wpp-float::after { animation: none; }
}


/* ===== Área do Cliente (20/08) — porta única em /cliente =====
   Discreto de proposito: e porta de servico pra quem JA e cliente, nao CTA de
   venda. O botao dourado continua sendo o "Falar com especialista" — quem chega
   pra comprar nao pode ser desviado pra uma tela de login. */
.nav-links .nav-cliente { opacity: .85; }
.btn.btn-linha.nav-cliente-cta {
  background: transparent;
  border: 1px solid rgba(212,175,55,.45);
  color: #d4af37;
}
.btn.btn-linha.nav-cliente-cta:hover { border-color: #d4af37; background: rgba(212,175,55,.08); }
@media (max-width: 900px) {
  /* no celular o nav colapsa; o link do CTA e o que sobra visivel */
  .nav-cta .nav-cliente-cta { padding: 8px 12px; font-size: var(--fs-3); }
}

/* ---------- 404 ---------- */
#erro404 ul a {
  display: inline-block; padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-soft); font-weight: 600; font-size: var(--fs-4);
  transition: border-color .2s, color .2s;
}
#erro404 ul a:hover { border-color: var(--line-strong); color: var(--gold-bright); }

/* ═══ OPERAÇÃO VITRINE (27/08) — página do agente de IA ═══════════════════ */

/* A DOR NA CENA. Específico converte: a bolha das 14:32 é uma hora concreta,
   não "atendimento demorado". */
.dor-cena { max-width: 620px; margin: 40px auto 0; display: grid; gap: 2px; }
.dor-linha {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: baseline;
  padding: 14px 18px; background: var(--bg-2); border: 1px solid var(--line);
}
.dor-linha:first-child { border-radius: 12px 12px 0 0; }
.dor-linha:last-child  { border-radius: 0 0 12px 12px; }
.dor-hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold-bright); font-size: var(--fs-6); }
.dor-txt  { color: var(--text-soft); font-size: var(--fs-4); line-height: 1.5; }
.dor-fim .dor-hora { color: var(--text-soft); opacity: .5; }
.dor-fim .dor-txt  { color: #e8e8ee; }

.sub-title { font-size: clamp(var(--fs-6), 2.4vw, var(--fs-8)); line-height: 1.25; margin: 0; }
.chat-nota-pe { color: var(--text-soft); font-size: var(--fs-2); margin: 12px 2px 0; line-height: 1.5; }

/* OS 4 PASSOS */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.passo {
  padding: 24px 20px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.passo-n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(212,175,55,.12); border: 1px solid var(--line-strong);
  color: var(--gold-bright); font-weight: 700; font-size: var(--fs-4); margin-bottom: 14px;
}
.passo h3 { margin: 0 0 10px; font-size: var(--fs-6); }
.passo p  { color: var(--text-soft); font-size: var(--fs-4); line-height: 1.55; margin: 0 0 10px; }
.passo-p  { font-size: var(--fs-3) !important; opacity: .82; }

/* AS GARANTIAS — o coração da página. Cada card carrega a prova embaixo:
   promessa sem a linha de prova não entra aqui. */
.gar-card {
  padding: 24px 22px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(212,175,55,.05), transparent 60%);
  border: 1px solid var(--line-strong);
  display: flex; flex-direction: column;
}
.gar-card h3 { margin: 0 0 10px; font-size: var(--fs-6); line-height: 1.3; }
.gar-card p  { color: var(--text-soft); font-size: var(--fs-4); line-height: 1.55; margin: 0 0 16px; flex: 1; }
.gar-prova {
  font-size: var(--fs-2); color: var(--gold-bright); letter-spacing: .02em;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* OBJEÇÕES — a crença do dono com as palavras dele, e a resposta embaixo. */
.obj-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.obj { padding: 22px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.obj h3 { margin: 0 0 10px; font-size: var(--fs-6); color: var(--gold-bright); }
.obj p  { color: var(--text-soft); font-size: var(--fs-4); line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr 1fr; }
  .obj-lista { grid-template-columns: 1fr; }
}
/* No celular a linha da dor não cabe em duas colunas: a hora vira etiqueta. */
@media (max-width: 560px) {
  .passos { grid-template-columns: 1fr; }
  .dor-linha { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
  .dor-hora { font-size: var(--fs-5); }
}

/* nota e teto no card de plano (27/08) — a nota do Start avisa que ele é
   roteiro+FAQ, e o teto mostra o volume incluído. Os dois em tom secundário:
   informam sem competir com o preço. */
.pnota {
  font-size: var(--fs-2); color: var(--text-soft); line-height: 1.5;
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(212,175,55,.06); border: 1px solid var(--line);
}
.pteto { font-size: var(--fs-2); color: var(--gold-bright); margin: 12px 0 0; opacity: .9; }