/* ============================================================
   ATUAN Contabilidade Digital — Design System
   Site estático (sem build). Edite as variáveis abaixo para
   ajustar cores/tipografia em todo o site de uma vez só.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     PALETA INSTITUCIONAL
     A identidade da ATUAN é mantida (navy, azul, verde, gelo).
     Ao lado de cada cor de identidade existe uma variante "ink":
     é ela que deve ser usada em TEXTO e em fundos de botão com
     texto branco, porque a cor de identidade pura não alcança o
     contraste AA (4.5:1) exigido para texto.
       --blue     #1677FF  4.10:1 no branco -> só gráfico/ícone/borda
       --blue-600 #0F5FD6  5.79:1 no branco -> texto, links, botões
       --green    #19A974  3.01:1 no branco -> só gráfico/ícone/check
       --green-ink#0E7350  5.85:1 no branco -> texto verde
       --green-600var(--green-ink)  4.93:1 com texto branco -> botão WhatsApp
     --------------------------------------------------------- */
  --navy:      #102A43; /* azul-marinho ATUAN (institucional) */
  --navy-700:  #1B3A5B;
  --blue:      #1677FF; /* azul tecnológico — identidade (gráficos) */
  --blue-600:  #0F5FD6; /* azul de texto/CTA — AA no branco */
  --blue-700:  #0B4CB0; /* hover do CTA azul */
  --blue-50:   #E9F2FF;
  --green:     #19A974; /* verde de crescimento — identidade (checks) */
  --green-600: var(--green-ink); /* fundo de botão verde — AA com texto branco */
  --green-700: #0E6A4A; /* hover do botão verde */
  --green-ink: #0E7350; /* verde de TEXTO — AA no branco e no verde-50 */
  --green-50:  #E6F6EF;
  --red:       #C4302B; /* erro — AA no branco */
  --red-50:    #FEECEC;
  --amber-ink: #8A5A00;
  --ice:       #F7F9FC; /* branco gelo (fundo) */
  --white:     #FFFFFF;
  --graphite:  #273444; /* textos */
  --gray:      #E8EDF3; /* bordas/fundos secundários */
  --gray-500:  #566577; /* texto secundário — 5.96:1 no branco */
  --gray-400:  #93A1B0; /* SÓ decoração (bordas, traços) — reprova em texto */

  /* Semânticos */
  --bg:            var(--ice);
  --surface:       var(--white);
  --text:          var(--graphite);
  --text-muted:    var(--gray-500);
  --text-faint:    #5F6E80; /* placeholders e notas — 5.21:1 no branco */
  --border:        var(--gray);
  --border-strong: #D3DCE6;
  --brand:         var(--blue);
  --brand-strong:  var(--navy);
  /* Texto sobre fundos escuros (navy/deep) — todos >= 4.5:1 */
  --on-dark:       #DBE6F3;
  --on-dark-muted: #A9BDD6;
  --on-dark-faint: #96AECB;
  --on-dark-blue:  #6FB0FF;

  /* Tipografia */
  --font-title: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala tipográfica fluida — um nível por papel, nada solto.
     Piso de leitura: 14px (--fs-sm). Micro-rótulos em CAIXA ALTA
     com tracking podem ir a 12px (--fs-xs), nunca abaixo. */
  --fs-xs:   .75rem;   /* 12px — rótulos/eyebrows em caixa alta */
  --fs-sm:   .875rem;  /* 14px — piso de qualquer texto de leitura */
  --fs-base: 1rem;     /* 16px */
  --fs-md:   1.0625rem;/* 17px — corpo em desktop */
  --fs-lg:   clamp(1.0625rem, .98rem + .38vw, 1.1875rem);  /* lead */
  --fs-h3:   clamp(1.0625rem, 1rem + .3vw,  1.1875rem);
  --fs-h2:   clamp(1.6rem,   1.28rem + 1.5vw, 2.4rem);
  --fs-h1:   clamp(2rem,     1.45rem + 2.6vw, 3.25rem);
  --fs-display: clamp(2.2rem, 1.5rem + 3.1vw, 3.9rem);
  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* Escala de espaçamento — base 4/8, sem valores mágicos */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 104px;
  /* Ritmo vertical das seções e recuo lateral: fluidos */
  --section-y:   clamp(56px, 8vw, 104px);
  --section-y-sm: clamp(40px, 5vw, 64px);
  --gutter:      clamp(20px, 4vw, 32px);

  /* Raio — 4 degraus, usados em todo o site */
  --container: 1160px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevação — 3 degraus + foco */
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, .06);
  --shadow:    0 8px 30px rgba(16, 42, 67, .08);
  --shadow-lg: 0 20px 50px rgba(16, 42, 67, .14);
  --shadow-dark: 0 18px 40px rgba(0, 0, 0, .28);
  --ring:      0 0 0 4px rgba(22, 119, 255, .18);
  --ring-focus: 0 0 0 3px #fff, 0 0 0 6px var(--blue-600);

  /* Movimento */
  --t-fast: .15s ease;
  --t:      .2s ease;
  --t-slow: .35s ease;

  /* Alvo mínimo de toque (WCAG 2.5.5) */
  --tap: 44px;

  --header-h: 72px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Rede de segurança contra rolagem lateral: "clip" não cria um
     contêiner de rolagem, então NÃO quebra o cabeçalho sticky. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-body);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-700); }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--navy); line-height: var(--lh-tight); margin: 0 0 .4em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.01em; }
h4 { font-size: var(--fs-base); font-weight: 700; }
p  { margin: 0 0 1rem; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }
/* Sobre fundo escuro o anel azul claro some — usa um anel de 2 camadas */
.section--deep :focus-visible, .section--navy :focus-visible,
.hero-n :focus-visible, .phero--dark :focus-visible,
.footer :focus-visible, .decision-panel :focus-visible, .legal-nav :focus-visible {
  box-shadow: 0 0 0 3px rgba(12, 33, 55, .9), 0 0 0 6px #7CB6FF;
}
::selection { background: rgba(22, 119, 255, .18); }
::placeholder { color: var(--text-faint); opacity: 1; }
/* Nunca deixa uma string longa (e-mail, CNPJ, URL) estourar a caixa.
   "anywhere" só nos links, porque é lá que moram as strings sem espaço
   (e-mails, URLs) — em texto corrido "break-word" evita quebras feias. */
a { overflow-wrap: anywhere; }
/* Filhos de grid/flex não podem ter largura mínima automática, senão
   um conteúdo longo empurra a coluna e cria rolagem lateral. */
.grid > *, .footer__grid > *, .split > *, .hero-n__grid > *, .phero__grid > *,
.legal-grid > *, .app-sec > *, .control > * { min-width: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-sm) 0; }
.section--ice { background: var(--ice); }
.section--white { background: var(--white); }
.section--navy { background: var(--navy); color: #DCE6F2; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 720px; }
.mt-0 { margin-top: 0; }
.hidden { display: none !important; }

/* ---------- Eyebrow / section header ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600);
}
.section-head { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }
.section-head .lead { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--sp-2); }
.lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-body); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm);
  background: var(--blue-50); color: var(--blue-600); border: 1px solid rgba(22,119,255,.16);
}
.badge--green { background: var(--green-50); color: var(--green-ink); border-color: rgba(25,169,116,.2); }
.badge--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Buttons ---------- */
/* Um único botão para todo o site. Variantes trocam só as 3 cores
   (--_bg / --_fg / --_bd); tamanho, raio, peso e movimento são iguais
   em toda parte. Altura mínima = alvo de toque de 44px. */
.btn {
  --_bg: var(--blue-600); --_fg: #fff; --_bd: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-base); line-height: 1.2;
  padding: 12px 22px; min-height: var(--tap); border-radius: var(--radius-sm); border: 1.5px solid var(--_bd);
  background: var(--_bg); color: var(--_fg); cursor: pointer; text-align: center;
  transition: transform .12s ease, box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--_fg); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none;
}
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--_fg);
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { --_bg: var(--blue-600); --_bd: var(--blue-600); }
.btn--primary:hover { --_bg: var(--blue-700); --_bd: var(--blue-700); }
.btn--secondary { --_bg: #fff; --_fg: var(--navy); --_bd: var(--border-strong); }
.btn--secondary:hover { --_bd: var(--blue-600); --_bg: var(--blue-50); color: var(--navy); }
.btn--ghost { --_bg: transparent; --_fg: var(--navy); --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--blue-50); color: var(--blue-700); box-shadow: none; }
.btn--wa { --_bg: var(--green-600); --_fg: #fff; --_bd: var(--green-600); }
.btn--wa:hover { --_bg: var(--green-700); --_bd: var(--green-700); }
.btn--onnavy { --_bg: #fff; --_fg: var(--navy); --_bd: #fff; }
.btn--onnavy:hover { --_bg: var(--ice); --_bd: var(--ice); }
.btn--onnavy-ghost { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,.45); }
.btn--onnavy-ghost:hover { --_bg: rgba(255,255,255,.12); --_bd: #fff; color:#fff; }
.btn--lg { padding: 15px 28px; min-height: 52px; font-size: 1.05rem; }
/* Acessos do cabeçalho (Entrar / Sistema / Painel): um degrau menores que o
   CTA principal, mas com a MESMA altura, para a barra ficar alinhada.
   Escopo restrito ao cabeçalho — no menu mobile seguem em tamanho normal. */
.nav__actions .btn { min-height: var(--tap); padding-block: 10px; }
.nav__actions .btn--access { padding-inline: 14px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247,249,252,.85); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s;
}
.header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); background: rgba(255,255,255,.9); }
.nav { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); }
.nav__menu { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-2); }
.nav__menu a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--font-title); font-weight: 600; font-size: var(--fs-sm); color: var(--navy);
  padding: 9px 12px; border-radius: var(--radius-xs); transition: background var(--t-fast), color var(--t-fast);
}
.nav__menu a:hover { background: var(--blue-50); color: var(--blue-700); }
.nav__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.nav__toggle { display: none; }

/* Brand / logo */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  display: block; width: 46px; height: 44px; flex: none; border-radius: 0; box-shadow: none;
  color: transparent; font-size: 0; overflow: hidden; line-height: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20112%22%3E%3Cpolygon%20points%3D%2260%2C12%2012%2C104%2042%2C104%2060%2C68%22%20fill%3D%22%231677FF%22%2F%3E%3Cpolygon%20points%3D%2260%2C12%20108%2C104%2078%2C104%2060%2C68%22%20fill%3D%22%23102A43%22%2F%3E%3Cpolygon%20points%3D%2260%2C72%2074%2C104%2046%2C104%22%20fill%3D%22%2319A974%22%2F%3E%3Cpath%20d%3D%22M28%2088%20Q66%2058%20106%2026%22%20fill%3D%22none%22%20stroke%3D%22%232f88ff%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* Variante para fundos escuros (rodapé): navy vira branco */
.footer .brand__mark, .section--deep .brand__mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20112%22%3E%3Cpolygon%20points%3D%2260%2C12%2012%2C104%2042%2C104%2060%2C68%22%20fill%3D%22%234aa3ff%22%2F%3E%3Cpolygon%20points%3D%2260%2C12%20108%2C104%2078%2C104%2060%2C68%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpolygon%20points%3D%2260%2C72%2074%2C104%2046%2C104%22%20fill%3D%22%2325c088%22%2F%3E%3Cpath%20d%3D%22M28%2088%20Q66%2058%20106%2026%22%20fill%3D%22none%22%20stroke%3D%22%234aa3ff%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-title); font-weight: 800; font-size: 1.15rem; color: var(--navy); letter-spacing: .01em; }
.brand__sub { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); margin-top: 4px; font-weight: 600; white-space: nowrap; }
@media (max-width: 380px) { .brand__sub { letter-spacing: .08em; } }

/* Mobile menu panel */
.nav__panel { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(22,119,255,.10), transparent 60%),
    radial-gradient(50% 45% at 5% 95%, rgba(25,169,116,.08), transparent 60%);
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.hero h1 { margin-top: 18px; }
.hero .lead { max-width: 560px; }
.hero .btn-row { margin-top: 30px; }
.hero__note { margin-top: 18px; font-size: .9rem; color: var(--text-muted); }

/* ---------- SaaS mockup (hero) ---------- */
.mock {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock__bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,#fff,#fbfcfe); }
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray); display: block; }
.mock__dots i:nth-child(1){ background:#FF6058; } .mock__dots i:nth-child(2){ background:#FFBD2E; } .mock__dots i:nth-child(3){ background:#28C840; }
.mock__title { font-family: var(--font-title); font-weight: 700; font-size: .9rem; color: var(--navy); margin-left: 6px; }
.mock__body { padding: 20px; }
.mock__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mock__company { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.mock__status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--fs-sm); color: var(--green-ink); background: var(--green-50); padding: 6px 12px; border-radius: 999px; }
.mock__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(25,169,116,.18); }
.mock__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fff; }
.tile__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); font-weight: 700; }
.tile__value { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: 1.15rem; margin-top: 6px; }
.tile__value--ok { color: var(--green); }
.tile__value--blue { color: var(--blue-600); }
.mock__row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.mock__row small { color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-xs); }
.mock__date { font-family: var(--font-title); font-weight: 800; color: var(--navy); }
.hero__float {
  position: absolute; right: -14px; bottom: 22px; z-index: 2;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-sm); color: var(--navy);
}
.hero__float .ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-50); color: var(--green); }
.hero__visual { position: relative; }

/* ---------- Value strip ---------- */
.valuestrip { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.value {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm); color: var(--navy); box-shadow: var(--shadow-sm);
}
.value .check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-50); color: var(--green); }
.value .check svg { width: 16px; height: 16px; }

/* ---------- Feature cards ---------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-7); box-shadow: var(--shadow-sm); height: 100%;
  transition: transform .18s ease, box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600); margin-bottom: var(--sp-4); }
.card__icon svg { width: 24px; height: 24px; }
.card__icon--green { background: var(--green-50); color: var(--green); }
.card__icon--navy { background: rgba(16,42,67,.06); color: var(--navy); }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--text-muted); margin: 0; }
.card--problem .card__icon { background: var(--red-50); color: var(--red); }

/* ---------- Steps / timeline ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); box-shadow: var(--shadow-sm); }
.step__num { font-family: var(--font-title); font-weight: 800; font-size: 1rem; color: #fff; background: var(--blue-600); width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.step h3 { font-size: 1.08rem; }
.step p { color: var(--text-muted); margin: 0; font-size: .96rem; }
.steps--line .step::after {
  content: ""; position: absolute; top: 46px; right: -13px; width: 24px; height: 2px; background: var(--gray); z-index: 1;
}
.steps--line .step:last-child::after { display: none; }

/* ---------- Split (abrir empresa / trocar contador) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.checklist { list-style: none; display: grid; gap: 12px; margin: 8px 0 26px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--graphite); font-weight: 500; }
.checklist li .ck { flex: none; margin-top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-50); color: var(--green); }
.checklist li .ck svg { width: 15px; height: 15px; }

/* Vertical steps panel */
.vsteps { display: grid; gap: 14px; }
.vstep { display: flex; gap: var(--sp-4); align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.vstep__n { flex: none; font-family: var(--font-title); font-weight: 800; color: var(--blue-600); background: var(--blue-50); width: 40px; height: 40px; border-radius: var(--radius-xs); display: grid; place-items: center; }
.vstep p { margin: 0; color: var(--text-muted); }
.vstep strong { color: var(--navy); font-family: var(--font-title); }

/* ---------- Pricing ---------- */
.tabs { display: inline-flex; padding: 5px; background: #fff; border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); margin: 0 auto 40px; }
.tabs button {
  font-family: var(--font-title); font-weight: 700; font-size: .95rem; color: var(--text-muted);
  padding: 11px 26px; min-height: var(--tap); border: none; background: transparent; border-radius: var(--radius-pill);
  cursor: pointer; transition: background var(--t), color var(--t);
}
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.tabs-wrap { text-align: center; }

.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-7); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow var(--t), border-color var(--t);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--featured { border: 2px solid var(--blue-600); box-shadow: var(--shadow); }
.plan--featured::before {
  content: attr(data-badge); position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue-600); color: #fff; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.plan__name { font-family: var(--font-title); font-weight: 800; font-size: 1.25rem; color: var(--navy); }
.plan__desc { color: var(--text-muted); font-size: .92rem; min-height: 42px; margin-top: 4px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin: 16px 0 4px; }
.plan__price .cur { font-family: var(--font-title); font-weight: 700; color: var(--navy); font-size: 1.1rem; }
.plan__price .val { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; }
.plan__price .per { color: var(--text-muted); font-weight: 600; font-size: .95rem; }
.plan__from { font-size: var(--fs-sm); color: var(--gray-500); margin-bottom: 14px; }
.plan__features { list-style: none; display: grid; gap: 11px; margin: 18px 0 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--graphite); }
.plan__features li .ck { flex: none; margin-top: 2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green-50); color: var(--green); }
.plan__features li .ck svg { width: 13px; height: 13px; }
.plan__features li.is-heading { font-weight: 700; color: var(--navy); font-family: var(--font-title); border: none; }
.plan__cta { margin-top: auto; }

.plan-note { margin-top: var(--sp-7); background: var(--blue-50); border: 1px solid rgba(22,119,255,.16); border-radius: var(--radius-sm); padding: var(--sp-5) var(--sp-6); color: #23415f; font-size: .96rem; display: flex; gap: var(--sp-3); align-items: flex-start; }
.plan-note svg { flex: none; width: 22px; height: 22px; color: var(--blue-600); }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
/* sombra na borda direita = pista de que a tabela rola no celular */
.compare-wrap { background-image: linear-gradient(to left, rgba(16,42,67,.10), rgba(16,42,67,0) 24px);
  background-repeat: no-repeat; background-position: right center; background-size: 24px 100%; background-attachment: local, scroll; }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
table.compare th, table.compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--border); font-size: .95rem; }
table.compare thead th { position: sticky; top: 0; background: var(--navy); color: #fff; font-family: var(--font-title); font-weight: 700; }
table.compare thead th:first-child { text-align: left; border-top-left-radius: var(--radius); }
table.compare thead th:last-child { border-top-right-radius: var(--radius); }
table.compare tbody th { text-align: left; font-weight: 600; color: var(--navy); }
table.compare tbody tr:nth-child(even) { background: #fbfcfe; }
table.compare tbody tr:last-child td, table.compare tbody tr:last-child th { border-bottom: none; }
.cmp-yes { display: inline-grid; place-items: center; color: var(--green); }
.cmp-yes svg { width: 20px; height: 20px; }
.cmp-no { color: var(--text-muted); font-weight: 700; }
.cmp-val { font-weight: 700; color: var(--navy); }
.compare .col-feat { background: rgba(22,119,255,.05); }

/* ---------- Add-ons ---------- */
.addons { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.addon { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
.addon h3 { font-size: 1.02rem; margin-bottom: 4px; }
.addon .price { font-family: var(--font-title); font-weight: 800; color: var(--blue-600); }
.addon .price small { color: var(--gray-500); font-weight: 600; }

/* ---------- ATUAN Control mockup ---------- */
.control { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.control-app { background: #0d2338; border: 1px solid #1d3f5f; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.control-app__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #1d3f5f; }
.control-app__bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #2c4d6e; }
.control-app__bar span { margin-left: 8px; color: var(--on-dark-muted); font-size: var(--fs-sm); font-family: var(--font-title); font-weight: 700; }
.control-app__body { display: grid; grid-template-columns: 132px 1fr; min-height: 260px; }
.control-app__side { border-right: 1px solid #1d3f5f; padding: 16px 12px; display: grid; gap: 6px; align-content: start; }
.control-app__side a { display: flex; align-items: center; min-height: var(--tap); color: var(--on-dark-muted); font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--radius-xs); font-weight: 600; }
.control-app__side a.active { background: rgba(22,119,255,.18); color: #cfe1ff; }
.control-app__main { padding: 18px; display: grid; gap: 12px; align-content: start; }
.ctrl-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.ctrl-kpi { background: #12293f; border: 1px solid #1d3f5f; border-radius: 10px; padding: 12px; }
.ctrl-kpi small { color: var(--on-dark-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ctrl-kpi b { display: block; color: #fff; font-family: var(--font-title); font-size: 1.2rem; margin-top: 4px; }
.ctrl-kpi b.green { color: #37d29a; }
.ctrl-bars { background: #12293f; border: 1px solid #1d3f5f; border-radius: 10px; padding: 14px; display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.ctrl-bars i { flex: 1; background: linear-gradient(180deg, var(--blue), #0f5fd6); border-radius: 4px 4px 0 0; display: block; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 4px 22px; box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--font-title); font-weight: 700; color: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--blue); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); margin: 0 0 18px; }

/* ---------- CTA final ---------- */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% 0%, rgba(22,119,255,.35), transparent 55%), radial-gradient(50% 120% at 0% 100%, rgba(25,169,116,.22), transparent 55%);
}
.cta-final .container { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: var(--on-dark-muted); padding: clamp(48px, 7vw, 72px) 0 var(--sp-7); }
.footer a { color: #C6D5E8; }
.footer a:hover { color: #fff; }
/* min-width:0 é obrigatório: sem isso um e-mail longo numa coluna força
   a largura mínima da grade e cria rolagem lateral no site inteiro. */
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: var(--sp-7) var(--sp-6); }
.footer__grid > * { min-width: 0; }
.footer h4 { color: #fff; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--sp-4); }
.footer ul { list-style: none; display: grid; gap: 2px; }
/* área de toque confortável nos links do rodapé (antes tinham 20px de altura) */
.footer ul a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 4px 0; font-size: var(--fs-sm); }
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: var(--on-dark-faint); }
.footer__tag { margin-top: var(--sp-4); max-width: 280px; color: var(--on-dark-muted); font-size: var(--fs-sm); }
.footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer__social a { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); background: rgba(255,255,255,.08); color: #C6D5E8; transition: background var(--t-fast), color var(--t-fast); }
.footer__social a:hover { background: var(--blue-600); color: #fff; }
.footer__bottom { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: var(--fs-sm); color: var(--on-dark-faint); }

/* ---------- WhatsApp floating ---------- */
.wa-float {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  background: var(--green-600); color: #fff;
  padding: 13px 20px 13px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg); transition: transform var(--t-fast), background var(--t);
}
.wa-float:hover { transform: translateY(-2px) scale(1.02); background: var(--green-700); color: #fff; }
.wa-float svg { width: 24px; height: 24px; flex: none; }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-family: var(--font-title); font-weight: 600; font-size: var(--fs-sm); color: var(--navy); margin-bottom: var(--sp-2); }
.field label .req { color: var(--red); }
.field .hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 6px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--graphite);
  padding: 12px 15px; min-height: var(--tap);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: #B9C6D4; }
.input:focus, .select:focus, .textarea:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--blue-600); box-shadow: var(--ring); outline: none; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--ice); color: var(--text-muted); cursor: not-allowed; }
.select { appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566577' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.textarea { resize: vertical; min-height: 130px; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field-2 > * { min-width: 0; }
.input.invalid, .select.invalid, .textarea.invalid { border-color: var(--red); background: #FFFBFB; }
.input.invalid:focus, .select.invalid:focus, .textarea.invalid:focus { box-shadow: 0 0 0 4px rgba(196,48,43,.16); }
.field-error { color: var(--red); font-size: var(--fs-sm); font-weight: 600; margin-top: 6px; display: none; }
.field-error.show { display: flex; align-items: center; gap: 6px; }
.field-error.show::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.consent { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.consent input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--blue-600); flex: none; cursor: pointer; }
.form-status { margin-top: var(--sp-4); padding: 14px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm); display: none; }
.form-status.ok { display: block; background: var(--green-50); color: var(--green-ink); border: 1px solid rgba(25,169,116,.3); }
.form-status.err { display: block; background: var(--red-50); color: #A32723; border: 1px solid rgba(196,48,43,.3); }
.contact-info { display: grid; gap: var(--sp-4); align-content: start; }
.contact-info .item { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.contact-info .item .ic { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600); }
.contact-info .item b { font-family: var(--font-title); color: var(--navy); display: block; }
.contact-info .item span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Page hero (subpáginas) ---------- */
.page-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(30px, 4vw, 48px); }
.breadcrumb { display: flex; gap: 8px; font-size: var(--fs-sm); color: var(--gray-500); margin-bottom: 14px; flex-wrap: wrap; }
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--blue-600); }

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid .footer__brandcol { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { order: -1; max-width: 460px; }
  .split, .control { grid-template-columns: 1fr; gap: 32px; }
  .grid-3, .grid-4, .plans, .steps, .addons, .valuestrip, .ctrl-kpis { grid-template-columns: 1fr 1fr; }
  .steps--line .step::after { display: none; }
  .plan--featured { order: -1; }
}
/* O cabeçalho completo (marca + 4 links + acessos + CTA) só cabe a partir de
   ~1240px. Abaixo disso o menu e os botões de acesso vão para o botão de menu,
   senão a barra passa da largura da tela e cria scroll lateral. */
@media (max-width: 1240px) {
  .nav__menu, .nav__actions .btn-desktop { display: none; }
  .nav__toggle {
    display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); margin-left: auto;
    background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--navy); transition: background var(--t-fast), border-color var(--t-fast);
  }
  .nav__toggle:hover { background: var(--blue-50); border-color: var(--blue-600); }
  .nav__toggle[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .nav__toggle svg { width: 24px; height: 24px; }
  .nav__panel {
    display: block; position: fixed; inset: var(--header-h) 0 auto 0; z-index: 55;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: var(--sp-2) var(--gutter) var(--sp-6);
    transform: translateY(-120%); transition: transform .28s ease; visibility: hidden;
    /* o painel nunca passa da tela: rola por dentro se a lista for longa */
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav__panel.open { transform: translateY(0); visibility: visible; }
  .nav__panel a {
    display: flex; align-items: center; min-height: var(--tap); padding: 12px 4px;
    font-family: var(--font-title); font-weight: 600; font-size: var(--fs-base); color: var(--navy);
    border-bottom: 1px solid var(--border);
  }
  .nav__panel a:hover { color: var(--blue-700); }
  .nav__panel a[aria-current="page"], .nav__panel a.is-active { color: var(--blue-600); }
  /* os botões de acesso formam um bloco separado no fim do painel */
  .nav__panel .btn { margin-top: var(--sp-3); width: 100%; border-bottom: none; }
  .nav__panel .btn:first-of-type { margin-top: var(--sp-5); }
  body.nav-open { overflow: hidden; }
}
/* Entre 861px e 1240px o CTA principal continua na barra (só o menu e os
   acessos é que recolhem) — em telas menores ele vai junto para o menu. */
@media (max-width: 1240px) and (min-width: 861px) {
  .nav__actions .btn--primary.btn-desktop { display: inline-flex; }
  .nav__toggle { margin-left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-3, .grid-4, .plans, .steps, .addons, .valuestrip, .ctrl-kpis, .field-2, .field-3 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid .footer__brandcol { grid-column: 1 / -1; }
  .hero__float { display: none; }
  .btn--block-sm { width: 100%; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .footer__bottom { flex-direction: column; }
  .wa-float span { display: none; }
  .wa-float { padding: 14px; border-radius: 50%; }
}

/* ============================================================
   REWORK — estilo "Nauta" com a paleta da ATUAN (navy + azul + verde)
   ============================================================ */
:root { --deep-1:#0c2137; --deep-2:#0b1c30; --deep-3:#102A43; }

/* Seções escuras profundas */
.section--deep { background: linear-gradient(180deg, var(--deep-1), var(--deep-2)); color: #c3d4e8; position: relative; overflow: hidden; }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep .lead { color: var(--on-dark-muted); }

/* Eyebrow com linha (Nauta) */
.eyebrow-line { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.eyebrow-line::before { content: ""; width: 32px; height: 2px; background: currentColor; border-radius: 2px; }
.section--deep .eyebrow-line, .section--navy .eyebrow-line,
.hero-n .eyebrow-line, .phero--dark .eyebrow-line { color: var(--on-dark-blue); }

/* Título grande com palavra destacada */
.display { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-display); line-height: 1.06; letter-spacing: -.025em; color: var(--navy); margin: var(--sp-4) 0 0; text-wrap: balance; }
.section--deep .display, .section--navy .display { color: #fff; }
.hl { color: var(--blue-600); }
.section--deep .hl, .section--navy .hl, .hero-n .hl, .phero--dark .hl { color: var(--on-dark-blue); }

/* frase que gira no título da Home (efeito máquina de escrever) */
/* O texto fixo fica na sua linha; a frase que gira ganha um "quadro" próprio
   de altura reservada, para que trocar/digitar a frase NUNCA mexa o layout. */
.hero-headline__lead { display: block; }
.hero-rotator {
  display: block;                 /* faixa própria = quadro estático */
  line-height: 1.15;
  min-height: calc(2 * 1.15em);   /* reserva ~2 linhas (o JS trava no exato) p/ não pular */
}
.hero-rotator__text { display: inline; }
.hero-rotator__caret {
  display: inline-block; width: 3px; height: .92em; margin-left: 4px;
  background: currentColor; vertical-align: baseline; border-radius: 2px;
  animation: hero-caret 1s steps(1, end) infinite;
}
@keyframes hero-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-rotator__caret { animation: none; } }

/* ============================================================
   Componentes "pegada Contabilizei" (hero checks, trust, FAQ, abas)
   ============================================================ */

/* Lista de checks no hero + nota do 1º mês grátis (sobre fundo escuro) */
.hero-checks { margin: 20px 0 6px; display: grid; gap: 10px; }
@media (min-width: 620px) { .hero-checks { grid-template-columns: 1fr 1fr; column-gap: 26px; } }
/* texto claro para as listas de check sobre fundo escuro (hero e seções deep/navy) */
.hero-n .mini-list li, .section--deep .mini-list li, .section--navy .mini-list li { color: #DCE6F2; }
.hero-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; color: #C6D5E8; font-size: .95rem; }

/* Faixa de confiança (logo abaixo do hero) */
.trust-strip { background: var(--white); border-bottom: 1px solid var(--border); }
.trust-strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; padding: 18px 22px; }
.trust-strip__row span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-title); font-weight: 700; color: var(--navy); font-size: .95rem; }
.trust-strip__row svg { width: 18px; height: 18px; color: var(--green); flex: none; }

/* Abas "Como funciona": esconde o painel inativo */
.flow-panel[hidden] { display: none; }

/* FAQ (acordeão nativo com <details>) */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 0; overflow: hidden; transition: border-color var(--t), box-shadow var(--t); }
.faq details:hover { border-color: var(--border-strong); }
.faq details[open] { border-color: rgba(22,119,255,.28); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-6); min-height: var(--tap); font-family: var(--font-title); font-weight: 700; font-size: var(--fs-base); color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); transition: background var(--t-fast); }
.faq summary:hover { background: var(--ice); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--blue); flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 var(--sp-6) var(--sp-5); color: var(--text-muted); }
.faq details > p { padding: 0 var(--sp-6); }
.faq details > div a { font-weight: 600; }

/* ---------- HERO (nauta) ---------- */
.hero-n { position: relative; background: linear-gradient(155deg, #0c2137 0%, #102A43 55%, #0b1c30 100%); color: #dbe6f3; overflow: hidden; padding: clamp(96px, 13vh, 150px) 0 clamp(56px, 8vh, 92px); }
.hero-n::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 88% 12%, rgba(22,119,255,.28), transparent 60%), radial-gradient(45% 50% at 2% 100%, rgba(25,169,116,.18), transparent 60%); }
.hero-n__watermark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); font-family: var(--font-title); font-weight: 800; font-size: clamp(20rem, 42vw, 40rem); line-height: 1; color: rgba(255,255,255,.035); pointer-events: none; user-select: none; z-index: 0; }
.hero-n__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; }
.hero-n__copy { max-width: 780px; }
.hero-n h1 { color: #fff; margin: 20px 0 0; font-size: clamp(2.3rem, 5.4vw, 4.05rem); }
.hero-n .lead { color: var(--on-dark-muted); max-width: 540px; margin-top: 18px; }
.hero-n .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-n__visual { position: relative; }

/* Stats (honestos — sem números inventados) */
.stats { display: flex; gap: clamp(24px, 4vw, 46px); flex-wrap: wrap; margin-top: 42px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.13); }
.stat b { display: block; font-family: var(--font-title); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #fff; letter-spacing: -.01em; }
.stat b .accent { color: #4aa3ff; font-size: 1em; }
.stat span { color: var(--on-dark-muted); font-size: .9rem; }

/* ---------- Passos "trocar é fácil" ---------- */
.tsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tstep { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 24px 22px; position: relative; }
.tstep__n { font-family: var(--font-title); font-weight: 800; font-size: 1rem; color: #fff; background: var(--blue-600); width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; }
.tstep h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.tstep p { color: var(--on-dark-muted); font-size: .95rem; margin: 0 0 16px; }
.tbadge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; color: #7fe3b4; background: rgba(25,169,116,.16); border: 1px solid rgba(25,169,116,.28); padding: 6px 12px; border-radius: 999px; }

/* ---------- Grade de serviços ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.serv-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 26px 24px; transition: transform .18s, border-color .2s, background .2s; display: flex; flex-direction: column; }
.serv-card:hover { transform: translateY(-4px); border-color: rgba(22,119,255,.5); background: rgba(22,119,255,.06); }
.serv-card__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(22,119,255,.16); color: #4aa3ff; margin-bottom: 16px; }
.serv-card__ico svg { width: 24px; height: 24px; }
.serv-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: 6px; }
.serv-card p { color: var(--on-dark-muted); font-size: .95rem; margin: 0 0 18px; }
.serv-card__more { margin-top: auto; color: #4aa3ff; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.serv-card:hover .serv-card__more { gap: 11px; }
.serv-card--feat { background: linear-gradient(135deg, rgba(22,119,255,.16), rgba(25,169,116,.1)); border-color: rgba(22,119,255,.4); }

/* ---------- Perfis (MEI / Simples / Presumido) + segmentos ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); text-align: center; transition: transform .18s, box-shadow .2s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier__tag { font-family: var(--font-title); font-weight: 800; font-size: 1.15rem; color: var(--navy); }
.tier__range { color: var(--blue-600); font-weight: 700; margin-top: 6px; }
.tier__note { color: var(--text-muted); font-size: .9rem; margin-top: 6px; }
.tier--feat { border: 2px solid var(--blue); }
.segmentos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.seg-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; font-weight: 600; color: var(--navy); font-size: .92rem; box-shadow: var(--shadow-sm); }
.seg-chip svg { width: 16px; height: 16px; color: var(--blue); }
.mini-list { list-style: none; display: grid; gap: 12px; margin: 0; }
.mini-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--graphite); font-weight: 500; }
.mini-list li .ck { flex: none; margin-top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-50); color: var(--green); }
.mini-list li .ck svg { width: 15px; height: 15px; }

/* ---------- App / Tecnologia ---------- */
.app-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px 16px; color: #dbe6f3; }
.store-badge small { display: block; font-size: var(--fs-xs); color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: .05em; }
.store-badge b { font-family: var(--font-title); font-size: .95rem; color: #fff; }

/* ---------- Ferramentas ---------- */
.tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tool-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow var(--t), border-color var(--t); }
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.tool-card .eyebrow { font-size: var(--fs-xs); }
.tool-card h3 { font-size: 1.15rem; margin: 4px 0; }
.tool-card p { color: var(--text-muted); font-size: .95rem; margin: 0 0 14px; }
.tool-card__more { margin-top: auto; color: var(--blue-600); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.blog-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .2s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card__img { height: 150px; background: linear-gradient(135deg, var(--navy), var(--blue)); position: relative; }
.blog-card__img.g2 { background: linear-gradient(135deg, var(--green-ink), var(--green)); }
.blog-card__img.g3 { background: linear-gradient(135deg, var(--blue), #4aa3ff); }
.blog-card__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.blog-card__cat { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); }
.blog-card h3 { font-size: 1.08rem; margin: 8px 0 10px; }
.blog-card__meta { margin-top: auto; color: var(--gray-500); font-size: var(--fs-sm); display: flex; gap: 10px; }
.blog-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.blog-card__excerpt { color: var(--text-muted); font-size: .92rem; line-height: 1.55; margin: 0 0 14px; }

/* ---------- Artigo (post do blog) ---------- */
.article { max-width: 730px; margin: 0 auto; }
.article > p { font-size: 1.08rem; line-height: 1.75; margin: 0 0 1.15rem; }
.article .lead { font-size: 1.2rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.4rem; }
.article h2 { font-size: 1.5rem; margin: 2.1rem 0 .7rem; }
.article h3 { font-size: 1.18rem; margin: 1.6rem 0 .5rem; }
.article ul, .article ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.article li { margin: .45rem 0; line-height: 1.7; }
.article strong { color: var(--navy); }
.article a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.callout { background: var(--blue-50); border: 1px solid rgba(22,119,255,.18); border-left: 4px solid var(--blue); border-radius: 12px; padding: 16px 18px; margin: 1.5rem 0; }
.callout p { margin: 0; font-size: 1rem; }
.callout b { color: var(--navy); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; color: #C6D5E8; font-size: .9rem; margin-top: 16px; }
.post-share { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 34px auto 0; max-width: 730px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .92rem; }
.post-cta { max-width: 730px; margin: 26px auto 0; background: var(--ice); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; text-align: center; }
.post-cta h3 { font-size: 1.2rem; margin-bottom: 8px; }

.section--deep .mini-list li { color: #c3d4e8; }
.section--deep .mini-list li .ck { background: rgba(25,169,116,.18); }

/* ---------- Faixa de destaque (accent bar) ---------- */
.accent-bar { height: 5px; background: linear-gradient(90deg, var(--blue), var(--green)); }

/* ---------- Responsivo (rework) ---------- */
@media (max-width: 900px) {
  .hero-n__grid, .app-sec { grid-template-columns: 1fr; gap: 36px; }
  .hero-n__visual { order: -1; max-width: 460px; }
  .serv-grid, .tsteps, .tiers, .blog-grid { grid-template-columns: 1fr 1fr; }
  .hero-n__watermark { display: none; }
}
@media (max-width: 640px) {
  .serv-grid, .tsteps, .tiers, .blog-grid, .tools { grid-template-columns: 1fr; }
  .stats { gap: 20px; }
}

/* item ativo do menu (definido por <body data-page>) */
.nav__menu a.is-active { color: var(--blue-600); font-weight: 600; }

/* ============================================================
   HERO em 2 colunas + Card de Diagnóstico + Jornada
   ============================================================ */
.hero-n__grid--split { align-items: center; row-gap: 40px; }
@media (min-width: 901px) {
  .hero-n__grid--split { grid-template-columns: 1.04fr .96fr; column-gap: clamp(36px, 5vw, 76px); }
}
.hero-n__grid--split .hero-n__copy { max-width: 600px; }
.hero-microcopy { margin: 14px 0 0; color: var(--on-dark-faint); font-size: .9rem; }

/* --- Card de diagnóstico --- */
.hero-n__visual { position: relative; z-index: 1; width: 100%; }
.diag-card {
  background: var(--white); color: var(--text);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(22px, 2.4vw, 32px);
  width: 100%; max-width: 500px; margin-left: auto;
}
.diag-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.diag-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--green-50); color: var(--green-ink);
  font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; }
.diag-step { color: var(--gray-500); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.diag-title { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.18; margin: 0; }
.diag-sub { color: var(--text-muted); margin: 8px 0 0; font-size: .95rem; }
.diag-options { display: grid; gap: 12px; margin: 20px 0 22px; }
.diag-option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit;
  color: var(--navy); background: var(--white); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 15px 16px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.diag-option:hover { border-color: #b7c7da; }
.diag-option.is-selected { border-color: var(--blue); box-shadow: var(--ring); }
.diag-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c4d0de; position: relative; transition: border-color .15s ease; }
.diag-option.is-selected .diag-radio { border-color: var(--blue); }
.diag-option.is-selected .diag-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--blue); }
.diag-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; }
.diag-ico svg { width: 20px; height: 20px; }
.diag-label { font-family: var(--font-title); font-weight: 700; font-size: 1.02rem; }
/* cabeçalho: contador + botão fechar */
.diag-head__right { display: inline-flex; align-items: center; gap: 10px; }
.diag-close { flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: none; background: var(--gray); color: var(--navy); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background var(--t-fast); }
.diag-close:hover { background: #d6dfe9; }
.diag-close svg { width: 14px; height: 14px; }
/* ações: voltar + continuar */
.diag-actions { display: flex; gap: 10px; align-items: stretch; }
.diag-actions .diag-continue { flex: 1; }
.diag-actions .diag-back { flex: none; padding-left: 18px; padding-right: 18px; }
.diag-actions .diag-back[hidden] { display: none; }
.diag-continue { margin-top: 2px; }
/* botão para reabrir o diagnóstico depois de fechar */
.diag-reopen { display: block; margin-left: auto; }
.diag-foot { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 14px 0 0; }
/* resultado do diagnóstico */
.diag-result__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--green-50); color: var(--green-ink);
  font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; margin-bottom: 14px; }
.diag-result h2 { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: 1.4rem; line-height: 1.2; margin: 0 0 8px; }
.diag-result p { color: var(--text-muted); margin: 0 0 8px; }
.diag-result .diag-answers { display: grid; gap: 8px; margin: 16px 0 4px; }
.diag-answer { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: .95rem; }
.diag-answer svg { width: 18px; height: 18px; color: var(--green); flex: none; }

/* --- Seção Jornada --- */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.journey-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-7); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow var(--t), border-color var(--t); }
.journey-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.journey-num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600);
  font-family: var(--font-title); font-weight: 800; font-size: 1.25rem; margin-bottom: 16px; }
.journey-card h3 { font-family: var(--font-title); color: var(--navy); font-size: 1.2rem; margin: 0 0 8px; }
.journey-card p { color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .hero-n__visual { order: 0; max-width: 500px; margin: 0 auto; }
  .diag-card { margin: 0 auto; }
}
@media (max-width: 760px) {
  .journey { grid-template-columns: 1fr; }
}

/* ============================================================
   SISTEMA DE HERO DAS PÁGINAS INTERNAS (redesign 2026)
   Compartilhado por Soluções, Planos, Trocar, Abrir, Sobre,
   Ferramentas, Contato, Conteúdos, artigos e legais.
   ============================================================ */
:root {
  /* Acentos de categoria. Os tons puros ficam nos elementos GRÁFICOS
     (pontos, bordas, ícones); os "ink" — mais escuros — são os únicos
     que podem carregar texto ou ficar atrás de texto branco (AA). */
  --c-blue:   #1677FF;
  --c-green:  #19A974;
  --c-purple: #7C5CFC;
  --c-amber:  #F5A623;
  --c-teal:   #17B3A3;
  --c-red:    #EF5C7B;
  --c-blue-ink:   #0F5FD6;
  --c-green-ink:  #0E7350;
  --c-purple-ink: #5B3FD6;
  --c-amber-ink:  #8A5A00;
  --c-teal-ink:   #0A6F66;
  --c-red-ink:    #C22B4C;
}
/* --- Hero base --- */
.phero { position: relative; overflow: hidden; padding: clamp(70px, 10vh, 120px) 0 clamp(56px, 8vh, 92px); }
.phero--light { background: linear-gradient(160deg, #eef3f9 0%, #f7f9fc 60%, #eaf1fb 100%); color: var(--text); }
.phero--dark { background: linear-gradient(155deg, #0c2137 0%, #102A43 55%, #0b1c30 100%); color: #dbe6f3; }
.phero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 951px) { .phero__grid { grid-template-columns: 1.02fr .98fr; column-gap: clamp(34px, 4vw, 68px); } }
.phero__copy { max-width: 600px; }
.phero__title { font-family: var(--font-title); font-weight: 800; line-height: 1.06; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin: 18px 0 0; }
.phero--light .phero__title { color: var(--navy); }
.phero--dark .phero__title { color: #fff; }
.phero__title .hl { color: var(--blue-600); }
.phero--dark .phero__title .hl { color: #4aa3ff; }
.phero__lead { margin-top: 22px; font-size: 1.06rem; max-width: 520px; }
.phero--light .phero__lead { color: var(--gray-500); }
.phero--dark .phero__lead { color: var(--on-dark-muted); }
.phero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.pill-outline { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(25,169,116,.4); color: var(--green-ink);
  background: rgba(25,169,116,.06); font-family: var(--font-title); font-weight: 700; font-size: .9rem; padding: 9px 16px; border-radius: 999px; }
.pill-outline::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.phero--dark .pill-outline { background: rgba(25,169,116,.12); }

/* --- Linha de confiança (pontos) --- */
.trust-line { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-line--dark { background: var(--navy); border-color: rgba(255,255,255,.08); }
.trust-line__row { text-align: center; padding: 20px 22px; font-family: var(--font-title); font-weight: 700; color: var(--navy); font-size: .98rem; }
.trust-line--dark .trust-line__row { color: #cfe0f2; }
.trust-line__row span { color: var(--text-muted); margin: 0 6px; }

/* --- Teaser de rodapé da seção (headline + pílulas) --- */
.page-teaser { background: var(--ice); padding: clamp(34px, 5vh, 56px) 0; }
.page-teaser__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-teaser__title { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: clamp(1.35rem, 2.4vw, 1.9rem); margin: 0; max-width: 620px; }
.teaser-tabs { display: flex; gap: 14px; flex-wrap: wrap; }
.teaser-tab { display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 22px; font-family: var(--font-title); font-weight: 700; color: var(--navy); box-shadow: var(--shadow-sm); }
.page-teaser--dark { background: var(--navy); }
.page-teaser--dark .page-teaser__title { color: #fff; }
.page-teaser--dark .teaser-tab { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #cfe0f2; box-shadow: none; }

/* --- Dots utilitários --- */
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.dot--blue { background: var(--c-blue); } .dot--green { background: var(--c-green); }
.dot--purple { background: var(--c-purple); } .dot--amber { background: var(--c-amber); }
.dot--teal { background: var(--c-teal); } .dot--red { background: var(--c-red); }

/* ===================== SOLUÇÕES: mapa "Seu Momento" ===================== */
.momentmap { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
.momentmap__hub { flex: none; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, var(--blue) 0 46%, var(--navy) 47% 100%);
  color: #fff; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(16,42,67,.28); line-height: 1.25; }
.momentmap__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mcard { display: flex; align-items: flex-start; gap: 12px; background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.mcard .dot { margin-top: 5px; }
.mcard b { display: block; font-family: var(--font-title); color: var(--navy); font-size: .98rem; }
.mcard small { color: var(--text-muted); font-size: var(--fs-sm); }
.resultcard { display: block; margin-top: 18px;
  background: linear-gradient(120deg, #0c2137, #14314f); color: #fff; border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-lg); }
.resultcard__eyebrow { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #6ea8e6; }
.resultcard h3 { font-family: var(--font-title); font-size: 1.3rem; margin: 8px 0 6px; color: #fff; }
.resultcard p { margin: 0; color: #b9cbe0; font-size: .95rem; }
.resultcard__go { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--green-600); color: #fff; display: grid; place-items: center; transition: transform .15s ease; }
.resultcard__go:hover { transform: translateX(3px); color: #fff; }
.resultcard__go svg { width: 22px; height: 22px; }

@media (max-width: 620px) {
  .momentmap { grid-template-columns: 1fr; justify-items: center; }
  .momentmap__cards { grid-template-columns: 1fr; width: 100%; }
  .resultcard { flex-direction: column; text-align: center; }
  .page-teaser__row { flex-direction: column; align-items: flex-start; }
}

/* ===================== PLANOS: stepper + 3 cards ===================== */
.planos-hero__top { display: block; }
.pstepper { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 10px 0 0; flex-wrap: wrap; }
@media (min-width: 951px) { .pstepper { justify-content: flex-end; margin-top: 22px; } }
.pstep { display: flex; align-items: center; gap: 10px; }
.pstep::after { content: ""; width: 30px; height: 2px; background: rgba(255,255,255,.18); }
.pstep:last-child::after { display: none; }
.pstep__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 800; font-size: .9rem; background: rgba(255,255,255,.08); color: var(--on-dark-muted); }
.pstep--done .pstep__n { background: var(--green-600); color: #fff; }
.pstep--active .pstep__n { background: var(--blue-600); color: #fff; }
.pstep__l { color: #cfe0f2; font-family: var(--font-title); font-weight: 700; font-size: .92rem; }

.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; align-items: start; }
.plan-card { position: relative; border: 1.5px solid rgba(255,255,255,.14); border-radius: 18px; padding: 28px 26px; background: rgba(255,255,255,.03); }
.plan-card__tier { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.plan-card__price { font-family: var(--font-title); font-weight: 800; font-size: 2.1rem; color: #fff; margin-top: 12px; }
.plan-card__per { color: var(--on-dark-muted); font-size: .9rem; }
.plan-card__desc { font-family: var(--font-title); font-weight: 700; color: #fff; margin: 18px 0 12px; }
.plan-card__list { list-style: none; display: grid; gap: 9px; padding: 0; margin: 0; }
.plan-card__list li { color: #c7d6e8; font-size: .95rem; position: relative; padding-left: 22px; }
.plan-card__list li::before { content: "✓"; position: absolute; left: 0; color: #4aa3ff; font-weight: 700; }
.plan-card--featured { background: #fff; border-color: var(--green); box-shadow: var(--shadow-lg); }
.plan-card--featured .plan-card__price, .plan-card--featured .plan-card__desc { color: var(--navy); }
.plan-card--featured .plan-card__per { color: var(--gray-500); }
.plan-card--featured .plan-card__list li { color: var(--graphite); }
.plan-card--featured .plan-card__list li::before { color: var(--green); }
.plan-card__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--green-600); color: #fff; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; }
.planos-hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
@media (max-width: 760px) { .plan-cards { grid-template-columns: 1fr; } }

/* ===================== FERRAMENTAS: painel de decisões ===================== */
.decision-panel { background: linear-gradient(150deg,#0e2540,#123253); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: clamp(20px,2.2vw,28px); box-shadow: var(--shadow-lg); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dp-head b { font-family: var(--font-title); color: #fff; font-size: 1.02rem; }
.dp-head .dot { width: 14px; height: 14px; }
.dp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dp-stat { background: #fff; border-radius: 16px; padding: 18px 20px; }
.dp-stat__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.dp-stat--fr .dp-stat__k { color: var(--green-ink); } .dp-stat--sl .dp-stat__k { color: var(--blue-600); }
.dp-stat__sub { color: var(--gray-500); font-size: var(--fs-sm); margin: 2px 0 12px; }
.dp-stat__v { font-family: var(--font-title); font-weight: 800; font-size: 1.9rem; color: var(--navy); }
.dp-mini-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 14px; }
.dp-mini { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-top: 2px solid rgba(255,255,255,.2); border-radius: 14px; padding: 16px; }
.dp-mini--purple { border-top-color: var(--c-purple); } .dp-mini--amber { border-top-color: var(--c-amber); } .dp-mini--red { border-top-color: var(--c-red); }
.dp-mini__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.dp-mini--purple .dp-mini__k { color: #a58bff; } .dp-mini--amber .dp-mini__k { color: #f5b74e; } .dp-mini--red .dp-mini__k { color: #ff7d98; }
.dp-mini__sub { color: var(--on-dark-muted); font-size: var(--fs-sm); margin: 3px 0 10px; }
.dp-mini__a { font-family: var(--font-title); font-weight: 700; color: #fff; }
.dp-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 18px 20px; }
.dp-next__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: #6ea8e6; }
.dp-next h3 { color: #fff; font-family: var(--font-title); font-size: 1.15rem; margin: 6px 0 4px; }
.dp-next p { color: var(--on-dark-muted); margin: 0; font-size: .9rem; }
.dp-next__go { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-600); color: #fff; display: grid; place-items: center; }
.dp-next__go svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .dp-stats, .dp-mini-row { grid-template-columns: 1fr; } }

/* --- Painel de decisões: variante com calculadoras clicáveis --- */
.decision-panel--tools .dp-intro { color: var(--on-dark-muted); font-size: .92rem; margin: 0 0 16px; }
.dp-tools { display: grid; gap: 12px; }
.dp-tool { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-left: 3px solid var(--dp-accent,#4aa3ff);
  border-radius: 14px; padding: 14px 16px; color: #fff; font: inherit;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease; }
.dp-tool:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.32); }
.dp-tool:focus-visible { outline: 2px solid var(--dp-accent,#4aa3ff); outline-offset: 3px; }
.dp-tool--blue { --dp-accent:#4aa3ff; } .dp-tool--red { --dp-accent:#ff6b81; } .dp-tool--green { --dp-accent:#2fbf8f; }
.dp-tool__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--dp-accent); background: rgba(255,255,255,.06); }
.dp-tool--blue .dp-tool__ico { background: rgba(74,163,255,.16); } .dp-tool--red .dp-tool__ico { background: rgba(255,107,129,.16); } .dp-tool--green .dp-tool__ico { background: rgba(47,191,143,.16); }
.dp-tool__ico svg { width: 22px; height: 22px; }
.dp-tool__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dp-tool__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--dp-accent); }
.dp-tool__t { font-family: var(--font-title); font-weight: 800; color: #fff; font-size: 1.02rem; }
.dp-tool__d { color: var(--on-dark-muted); font-size: var(--fs-sm); line-height: 1.3; }
.dp-tool__go { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--dp-accent); background: rgba(255,255,255,.06); transition: transform .16s ease, background-color .16s ease, color .16s ease; }
.dp-tool__go svg { width: 18px; height: 18px; }
.dp-tool:hover .dp-tool__go { transform: translateX(3px); background: var(--dp-accent); color: #0e2540; }
.dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--on-dark-faint); font-size: var(--fs-sm); }
.dp-foot__dot { width: 8px; height: 8px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 10px rgba(70,211,154,.7); }

/* --- Campo com ícone (modal de ferramentas + barra de contato) --- */
.ifield { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 0 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.ifield:focus-within { border-color: var(--blue); box-shadow: var(--ring); }
.ifield__ico { flex: none; color: var(--text-faint); display: grid; place-items: center; }
.ifield__ico svg { width: 18px; height: 18px; display: block; }
.ifield input { flex: 1; border: none; outline: none; background: transparent; font: inherit; color: var(--navy); padding: 13px 0; min-width: 0; }
.ifield input::placeholder { color: var(--text-faint); }
.ifield--dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.ifield--dark:focus-within { border-color: #4aa3ff; box-shadow: 0 0 0 3px rgba(74,163,255,.25); }
.ifield--dark .ifield__ico { color: var(--on-dark-faint); }
.ifield--dark input { color: #fff; }
.ifield--dark input::placeholder { color: var(--on-dark-faint); }

/* --- Barra "Seus dados": versão com campos bonitos --- */
.data-bar--rich { display: block; }
.data-bar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.data-bar__sel { display: none; align-items: center; gap: 7px; font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm); color: #dbe9fb; background: rgba(74,163,255,.16); border: 1px solid rgba(74,163,255,.32); padding: 5px 12px; border-radius: 999px; }
.data-bar__sel.is-on { display: inline-flex; }
.data-bar__sel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4aa3ff; }
.data-bar__grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: center; }
.data-bar__status { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--on-dark-muted); min-height: 1.1em; }
.data-bar__status.ok { color: #7fe0b3; } .data-bar__status.err { color: #ff9aa9; }
@media (max-width: 820px) { .data-bar__grid { grid-template-columns: 1fr; } }

/* --- Modal de ferramentas (calculadora -> lead) --- */
.ferr-modal .lead-modal__card { max-width: 480px; }
.ferr-eyebrow { display: inline-block; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); }
.ferr-pick { display: grid; gap: 10px; margin-top: 10px; }
.ferr-pick__item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer; background: var(--ice); border: 1.5px solid var(--border); border-left: 3px solid var(--fc,#4aa3ff); border-radius: 14px; padding: 13px 15px; font: inherit; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ferr-pick__item:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: #fff; }
.ferr-pick__item:focus-visible { outline: 2px solid var(--fc,#4aa3ff); outline-offset: 2px; }
.ferr-pick__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--fc,#4aa3ff); }
.ferr-pick__ico svg { width: 22px; height: 22px; }
.ferr-pick__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ferr-pick__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fc,#4aa3ff); }
.ferr-pick__t { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.ferr-pick__go { flex: none; color: var(--gray-400); } .ferr-pick__go svg { width: 20px; height: 20px; }
.ferr-fields { display: grid; gap: 10px; margin-top: 4px; }
.ferr-actions { display: flex; gap: 10px; margin-top: 18px; }
.ferr-actions .btn { flex: 1; }
.ferr-hint { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 12px 0 0; }
.ferr-hint.is-err { color: var(--red); }
.ferr-result .lead-modal__badge { margin-bottom: 6px; }

/* ===================== CONTATO: 3 caminhos + barra de dados ===================== */
.entry-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 34px; }
.entry-card { display: block; background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 26px 24px; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; cursor: pointer; }
.entry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.entry-card.is-selected { box-shadow: var(--ring); }
.entry-card--blue { border-color: rgba(22,119,255,.5); } .entry-card--green { border-color: rgba(25,169,116,.5); } .entry-card--purple { border-color: rgba(124,92,252,.5); }
.entry-card__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; margin-bottom: 16px; }
.entry-card--blue .entry-card__ico { background: var(--blue-600); } .entry-card--green .entry-card__ico { background: var(--green-600); } .entry-card--purple .entry-card__ico { background: var(--c-purple-ink); }
.entry-card__ico svg { width: 22px; height: 22px; }
.entry-card__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.entry-card--blue .entry-card__k { color: var(--blue-600); } .entry-card--green .entry-card__k { color: var(--green-ink); } .entry-card--purple .entry-card__k { color: var(--c-purple); }
.entry-card h3 { font-family: var(--font-title); color: var(--navy); font-size: 1.2rem; margin: 4px 0 14px; }
.entry-card__go { color: var(--text-muted); font-weight: 600; font-size: .95rem; }
.data-bar { margin-top: 22px; background: linear-gradient(120deg,#0c2137,#14314f); border-radius: var(--radius-lg); padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: center; box-shadow: var(--shadow-lg); }
.data-bar__k { grid-column: 1 / -1; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: #6ea8e6; }
.data-bar input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px 16px; color: #fff; font: inherit; }
.data-bar input::placeholder { color: var(--on-dark-faint); }
@media (max-width: 820px) { .entry-cards { grid-template-columns: 1fr; } .data-bar { grid-template-columns: 1fr; } }

/* ===================== TAGS / QUOTE / ROADMAP / RADIAL ===================== */
.hero-tags { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; font-family: var(--font-title); font-weight: 700; color: var(--navy); box-shadow: var(--shadow-sm); }
.hero-tags--dark .hero-tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #dbe6f3; box-shadow: none; }

.quote-card { background: linear-gradient(135deg,#0c2137,#16324f); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-lg); max-width: 520px; margin-top: 4px; }
.quote-card__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #6ea8e6; }
.quote-card h3 { font-family: var(--font-title); color: #fff; font-size: 1.5rem; line-height: 1.2; margin: 12px 0 10px; }
.quote-card p { color: #b9cbe0; margin: 0; font-size: .95rem; }

.roadmap { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 48px 0 24px; }
.roadmap::before { content: ""; position: absolute; left: 6%; right: 6%; top: 30px; border-top: 2px dashed rgba(16,42,67,.18); z-index: 0; }
.roadmap--dark::before { border-top-color: rgba(120,170,230,.32); }
.rnode { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 104px; }
.rnode__c { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-title); font-weight: 800; font-size: 1.05rem; border: 4px solid var(--white); box-shadow: 0 8px 22px rgba(16,42,67,.2); }
.roadmap--dark .rnode__c { border-color: #0e2540; }
.rnode__t { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; margin-top: 12px; color: var(--navy); }
.roadmap--dark .rnode__t { color: #9fc0e6; }
.rnode__s { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.roadmap--dark .rnode__s { color: #b9cbe0; }
@media (max-width: 760px) {
  .roadmap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .roadmap::before { display: none; }
  .rnode { flex-direction: row; text-align: left; gap: 14px; min-width: 0; width: 100%; align-items: center; }
  .rnode__c { flex: none; }
}

.radial { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; }
.radial__ring { position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(16,42,67,.14); }
.radial__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 47%; height: 47%; border-radius: 50%;
  background: #0c2137; color: #fff; display: grid; place-items: center; text-align: center; padding: 6%; overflow: hidden; box-shadow: 0 16px 40px rgba(16,42,67,.3); }
.radial__label { position: relative; z-index: 2; }
.radial__orbit { position: absolute; inset: 0; z-index: 1; animation: radialOrbit 7s linear infinite; }
.radial__ball { position: absolute; left: 50%; top: 38%; width: 62%; height: 62%; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #6fb4ff, var(--blue) 62%); box-shadow: 0 8px 26px rgba(74,163,255,.42); }
@keyframes radialOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radial__orbit { animation: none; } }
.radial__core small { display: block; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: #a9c6e8; margin-bottom: 4px; }
.radial__core b { font-family: var(--font-title); font-weight: 800; font-size: .95rem; line-height: 1.18; }
.rpill { position: absolute; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 15px; font-family: var(--font-title); font-weight: 700; color: var(--navy); box-shadow: var(--shadow-sm); white-space: nowrap; font-size: .88rem; }
/* Posições das pílulas em volta do diagrama radial. Antes vinham em
   style="" no HTML e estouravam a tela no celular; agora são classes,
   então cada tamanho de tela recebe o arranjo que cabe nele. */
.rpill--1 { left: 50%; top: 6%; }
.rpill--2 { left: 88%; top: 28%; }
.rpill--3 { left: 90%; top: 66%; }
.rpill--4 { left: 56%; top: 92%; }
.rpill--5 { left: 12%; top: 70%; }
.rpill--6 { left: 14%; top: 30%; }
/* O disco (anel + núcleo) é uma peça só; no desktop ocupa todo o
   quadrado do .radial e as pílulas orbitam por cima dele. */
.radial__disc { position: absolute; inset: 0; }
@media (max-width: 760px) {
  /* No celular o diagrama se REORGANIZA: o disco fica em cima e os
     valores viram uma lista de chips embaixo — legível de verdade,
     em vez de seis pílulas espremidas e cortadas pela borda da tela. */
  .radial { max-width: 100%; aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-3); }
  .radial__disc { position: relative; inset: auto; flex: 0 0 100%; width: 100%; height: 210px; margin-bottom: var(--sp-2); }
  .radial__ring { inset: 50% auto auto 50%; width: 210px; height: 210px; translate: -50% -50%; }
  .radial__core { width: 132px; height: 132px; padding: 12px; }
  .rpill { position: static; transform: none; font-size: var(--fs-sm); padding: 9px 14px; }
}

/* ===================== CONTEÚDOS / BLOG ===================== */
.feature-card { background: linear-gradient(150deg,#0c2137,#16324f); border-radius: var(--radius-lg); padding: clamp(24px,2.5vw,34px); box-shadow: var(--shadow-lg); color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 260px; }
.feature-card__k { display: inline-flex; align-self: flex-start; background: rgba(25,169,116,.18); color: #3ddca0; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
.feature-card h2 { font-family: var(--font-title); font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1.15; margin: 16px 0 0; color: #fff; }
.feature-card__meta { color: var(--on-dark-muted); margin: 14px 0 22px; font-size: .95rem; }
.content-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 24px; }
.ccard { display: block; background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.ccard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ccard--green { border-color: rgba(25,169,116,.4); } .ccard--purple { border-color: rgba(124,92,252,.4); }
.ccard--dark { background: linear-gradient(150deg,#0c2137,#15304d); border-color: transparent; color: #fff; }
.ccard__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; }
.ccard--green .ccard__ico { background: var(--green-50); } .ccard--purple .ccard__ico { background: #efeaff; } .ccard--dark .ccard__ico { background: rgba(22,119,255,.2); }
.ccard__ico .dot { width: 14px; height: 14px; }
.ccard h3 { font-family: var(--font-title); color: var(--navy); font-size: 1.15rem; margin: 0 0 8px; }
.ccard--dark h3 { color: #fff; }
.ccard__meta { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 14px; }
.ccard--dark .ccard__meta { color: var(--on-dark-muted); }
.ccard__go { font-family: var(--font-title); font-weight: 700; }
.ccard--green .ccard__go { color: var(--green-ink); } .ccard--purple .ccard__go { color: var(--c-purple-ink); } .ccard--dark .ccard__go { color: var(--on-dark-blue); }
@media (max-width: 820px) { .content-cards { grid-template-columns: 1fr; } }

/* ===================== ARTIGO FATOR R: medidor ===================== */
.gauge { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--c-teal) 0 78%, rgba(255,255,255,.08) 78% 100%); display: grid; place-items: center; }
.gauge::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: #0e2540; }
.gauge__in { position: relative; text-align: center; }
.gauge__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #3ddca0; }
.gauge__v { font-family: var(--font-title); font-weight: 800; font-size: 2.6rem; color: #fff; line-height: 1; margin: 6px 0; }
.gauge__s { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.gauge-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.gauge-card { background: #fff; border-radius: 16px; padding: 18px 20px; }
.gauge-card__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.gauge-card__v { font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; color: var(--navy); margin-top: 6px; }
.stepline { display: flex; gap: 22px; margin-top: 36px; flex-wrap: wrap; }
.stepline__i { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stepline__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 800; background: rgba(255,255,255,.08); color: var(--on-dark-muted); }
.stepline__i--on .stepline__n { background: var(--blue-600); color: #fff; }
.stepline__l { color: var(--on-dark-muted); font-size: var(--fs-sm); }
@media (max-width: 560px) { .gauge-cards { grid-template-columns: 1fr; } }

/* ===================== ARTIGO CHECKLIST ===================== */
.checklist { display: grid; gap: 16px; }
.chk-node { display: flex; align-items: center; gap: 16px; }
.chk-node__c { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--border); background: var(--white); display: grid; place-items: center; font-family: var(--font-title); font-weight: 800; font-size: 1.1rem; color: var(--navy); flex: none; }
.chk-node__card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 13px 20px; box-shadow: var(--shadow-sm); }
.chk-node__card b { font-family: var(--font-title); color: var(--navy); display: block; }
.chk-node__st { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm); }
@media (min-width: 761px) { .chk-node:nth-child(2) { margin-left: 12%; } .chk-node:nth-child(3) { margin-left: 24%; } .chk-node:nth-child(4) { margin-left: 36%; } }
.progress-card { background: linear-gradient(135deg,#0c2137,#16324f); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-lg); margin-top: 8px; max-width: 480px; }
.progress-card__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #6ea8e6; }
.progress-card h3 { color: #fff; font-family: var(--font-title); font-size: 1.4rem; margin: 8px 0 16px; }
.progress-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.progress-bar__f { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--green),#3ddca0); }

/* ===================== ARTIGO MEI x SIMPLES: split ===================== */
.split-compare { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.split-side { padding: clamp(26px,3vw,44px); }
.split-side--light { background: #eef3f9; color: var(--text); }
.split-side--dark { background: linear-gradient(150deg,#0c2137,#16324f); color: #fff; }
.split-side__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.split-side--dark .split-side__k { color: #4aa3ff; }
.split-side__big { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.8rem,3vw,2.6rem); margin: 12px 0 0; color: var(--navy); }
.split-side--dark .split-side__big { color: #fff; }
.split-side__sub { font-family: var(--font-title); font-weight: 700; color: var(--gray-500); margin: 18px 0 22px; font-size: 1.15rem; }
.split-side--dark .split-side__sub { color: var(--on-dark-muted); }
.split-tags { display: grid; gap: 12px; }
.stag { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-family: var(--font-title); font-weight: 700; color: var(--navy); }
.split-side--dark .stag { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.1); color: #dbe6f3; }
.split-when { margin-top: 24px; }
.split-when b { color: var(--gray-500); font-size: .9rem; }
.split-side--dark .split-when b { color: var(--on-dark-muted); }
.split-when ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.split-when li { font-family: var(--font-title); font-weight: 700; color: var(--navy); }
.split-side--dark .split-when li { color: #fff; }
.split-swap { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: var(--blue-600); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-lg); z-index: 2; }
.split-swap svg { width: 24px; height: 24px; }
@media (max-width: 720px) { .split-compare { grid-template-columns: 1fr; } .split-swap { top: 50%; } }

/* ===================== LEGAIS: leitor de documento ===================== */
.legal-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 951px) { .legal-grid { grid-template-columns: .82fr 1.18fr; } }
.legal-nav { background: linear-gradient(160deg,#0c2137,#15304d); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg); }
.legal-nav__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #6ea8e6; margin-bottom: 14px; }
.legal-nav button { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; color: #cfe0f2; font: inherit; font-family: var(--font-title); font-weight: 700; cursor: pointer; transition: background .15s ease; }
.legal-nav button:last-child { margin-bottom: 0; }
.legal-nav button.is-active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.legal-card { position: relative; background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--green); border-radius: var(--radius-lg); padding: clamp(26px,3vw,40px); box-shadow: var(--shadow); }
.legal-card__k { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }
.legal-card h2 { font-family: var(--font-title); color: var(--navy); font-size: clamp(1.4rem,2.2vw,1.9rem); margin: 12px 0 14px; }
.legal-card p { color: var(--gray-500); }
.legal-minis { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 22px 0; }
.legal-mini { background: var(--ice); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.legal-mini b { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); color: var(--navy); font-size: .98rem; margin-bottom: 8px; }
.legal-mini small { color: var(--text-muted); font-size: var(--fs-sm); }
.legal-callout { background: var(--green-50); border-radius: 14px; padding: 18px 22px; margin-bottom: 22px; }
.legal-callout b { color: var(--green-ink); font-family: var(--font-title); display: block; margin-bottom: 4px; }
.legal-callout span { color: var(--gray-500); font-size: .92rem; }
@media (max-width: 640px) { .legal-minis { grid-template-columns: 1fr; } }

/* Formulário simples da home (Contato) */
.home-contact-form { max-width: 640px; margin: 24px auto 0; }
.home-contact-form .hcf__title { font-family: var(--font-title); color: var(--navy); margin: 0 0 2px; font-size: 1.2rem; }
.home-contact-form .hcf__hint { color: var(--text-muted); margin: 0 0 16px; font-size: .92rem; }

/* Popup de oferta (abre após 5s) */
.lead-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.lead-modal.is-open { display: flex; }
.lead-modal__backdrop { position: absolute; inset: 0; background: rgba(8,20,34,.62); }
.lead-modal__card { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(24px,3.4vw,36px); animation: leadpop .25s ease; }
@keyframes leadpop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.lead-modal__close { position: absolute; top: 12px; right: 12px; width: var(--tap); height: var(--tap); border-radius: 50%; border: none; background: var(--gray); color: var(--navy); cursor: pointer; display: grid; place-items: center; line-height: 1; transition: background var(--t-fast); }
.lead-modal__close:hover { background: #d6dfe9; }
.lead-modal__close svg { width: 16px; height: 16px; }
.lead-modal__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--green-50); color: var(--green-ink); font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; }
.lead-modal__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.lead-modal h2 { font-family: var(--font-title); color: var(--navy); font-size: clamp(1.5rem,4vw,1.95rem); line-height: 1.14; margin: 14px 0 8px; }
.lead-modal h2 .hl { color: var(--blue-600); }
.lead-modal p { color: var(--text-muted); margin: 0 0 18px; font-size: .96rem; }
.lead-modal .field { margin-bottom: 12px; }
.lead-modal__mini { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 12px 0 0; }
.lead-sent { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--green); display: grid; place-items: center; margin: 6px auto 14px; }
.lead-sent svg { width: 30px; height: 30px; }

/* Teaser centralizado (alinha com o card acima) */
.page-teaser__row--center { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.page-teaser__row--center .page-teaser__title { max-width: 640px; }
.page-teaser__row--center .teaser-tabs { justify-content: center; }

/* Rolagem suave + âncoras não ficam escondidas sob o cabeçalho fixo */
html { scroll-behavior: smooth; }
section[id], [id].section, #jornada, [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ============================================================
   MAPA CONTÁBIL — modal do "Montar minha solução"
   ============================================================ */
.mapa-modal .lead-modal__card { max-width: 560px; padding: 0; overflow: hidden; }
.mapa-head { position: relative; background: linear-gradient(125deg,#0c2137,#16324f); color: #fff; padding: 26px 30px 22px; }
.mapa-head__k { display: inline-flex; align-items: center; gap: 8px; background: rgba(25,169,116,.2); color: #3ddca0;
  font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.mapa-head h2 { font-family: var(--font-title); font-size: 1.32rem; line-height: 1.2; margin: 12px 0 4px; color: #fff; }
.mapa-head p { color: var(--on-dark-muted); margin: 0; font-size: .9rem; }
.mapa-head .lead-modal__close { background: rgba(255,255,255,.14); color: #fff; }
.mapa-head .lead-modal__close:hover { background: rgba(255,255,255,.26); }
.mapa-prog { display: flex; gap: 6px; margin-top: 18px; }
.mapa-prog i { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .25s ease; }
.mapa-prog i.on { background: var(--green); }
.mapa-body { padding: 24px 30px 28px; }
.mapa-q { font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: 1.24rem; line-height: 1.2; margin: 0 0 4px; }
.mapa-sub { color: var(--text-muted); font-size: .9rem; margin: 0 0 18px; }
.mapa-opts { display: grid; gap: 10px; }
.mapa-opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; font: inherit; color: var(--navy);
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 15px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.mapa-opt:hover { border-color: #b7c7da; }
.mapa-opt.is-on { border-color: var(--blue); background: #f4f9ff; box-shadow: var(--ring); }
.mapa-opt__ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; }
.mapa-opt__ico svg { width: 19px; height: 19px; }
.mapa-opt__t { font-family: var(--font-title); font-weight: 700; font-size: .99rem; }
.mapa-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mapa-chip { font: inherit; font-family: var(--font-title); font-weight: 700; font-size: .9rem; color: var(--navy); background: #fff;
  border: 1.5px solid var(--border); border-radius: 999px; padding: 10px 15px; cursor: pointer; transition: all .15s ease; }
.mapa-chip:hover { border-color: #b7c7da; }
.mapa-chip.is-on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.mapa-actions { display: flex; gap: 10px; margin-top: 22px; }
.mapa-actions .mapa-next { flex: 1; }
.mapa-hint { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 12px 0 0; }
.mapa-field { margin-bottom: 11px; }
/* resultado */
.mapa-result__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--green-50); color: var(--green-ink);
  font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.mapa-result h3 { font-family: var(--font-title); color: var(--navy); font-size: 1.2rem; margin: 12px 0 8px; }
.mapa-result__p { color: var(--text-muted); font-size: .95rem; margin: 0 0 16px; }
.mapa-fix { display: grid; gap: 10px; margin-bottom: 18px; }
.mapa-fix__i { display: flex; gap: 11px; align-items: flex-start; background: var(--ice); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.mapa-fix__n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green-600); color: #fff; display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); }
.mapa-fix__t { color: var(--graphite); font-size: .92rem; line-height: 1.45; }

/* ============================================================
   ORBE "SEU MOMENTO" — flutua pela página e abre o Mapa Contábil
   ============================================================ */
/* o hub dentro do mapa também vira clicável e pulsante */
.momentmap__hub { cursor: pointer; transition: transform .2s ease; }
.momentmap__hub:hover { transform: scale(1.06); }

.orb-float {
  position: fixed; z-index: 70; width: 104px; height: 104px; padding: 0; border: none; background: none;
  cursor: pointer; opacity: 0; transform: scale(.6);
  transition: left 2.6s cubic-bezier(.4,.03,.3,1), top 2.6s cubic-bezier(.4,.03,.3,1), opacity .5s ease, transform .35s cubic-bezier(.2,1.3,.5,1);
}
.orb-float.is-in { opacity: 1; transform: scale(1); }
.orb-float:hover { transform: scale(1.1); }
.orb-float__core {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 1.2;
  background: radial-gradient(circle at 50% 38%, #2f8bff 0 47%, #0c2137 48% 100%);
  color: #fff; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(12,33,55,.4); animation: orb-bob 3.4s ease-in-out infinite;
}
.orb-float__ring, .orb-float__ring2 {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(47,139,255,.55); pointer-events: none;
  animation: orb-pulse 2.6s ease-out infinite;
}
.orb-float__ring2 { animation-delay: 1.3s; }
@keyframes orb-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes orb-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.orb-float__x {
  position: absolute; top: -2px; right: -2px; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .2s ease; padding: 0;
}
.orb-float:hover .orb-float__x, .orb-float:focus-within .orb-float__x { opacity: 1; }
@media (hover: none) { .orb-float__x { opacity: 1; } }
.orb-float__x svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .orb-float { width: 84px; height: 84px; }
  .orb-float__core { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .orb-float { transition: opacity .3s ease; }
  .orb-float__core { animation: none; }
  .orb-float__ring, .orb-float__ring2 { animation: none; opacity: .35; }
}

/* --- Orbe confinado à seção Soluções + hub fixo oculto (o orbe assume a função) --- */
.momentmap { grid-template-columns: 1fr; }
.momentmap__hub { display: none; }
.orb-float { position: absolute; z-index: 6; width: 92px; height: 92px; margin: 0; translate: -50% -50%; }
/* a seção que hospeda o orbe recorta: o orbe é posicionado por JS em
   percentuais de 4% a 96% e, sem isto, estoura a lateral da tela. */
section:has(> .orb-float) { overflow: hidden; }
.orb-float .orb-float__core { font-size: var(--fs-xs); letter-spacing: .03em; }
@media (max-width: 640px) { .orb-float { width: 84px; height: 84px; } }

/* Abas Serviços/Comércio acima dos cards de plano (hero escuro) */
.home-plan-switch { display: flex; justify-content: center; margin: 30px 0 26px; }
.home-plan-toggle { display: inline-flex; gap: 4px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px; }
.hpt-btn { font: inherit; font-family: var(--font-title); font-weight: 700; font-size: .95rem; color: #cfe0f2; background: transparent; border: none; border-radius: var(--radius-pill); padding: 11px 22px; min-height: var(--tap); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; }
.hpt-btn:hover { color: #fff; }
.hpt-btn.is-on { background: #fff; color: var(--navy); }
@media (max-width: 480px) { .hpt-btn { padding: 9px 14px; font-size: .88rem; } }

/* Cards de plano clicáveis + modal de especificações */
.plan-card--clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.plan-card--clickable:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.35); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.plan-card--featured.plan-card--clickable:hover { box-shadow: var(--shadow-lg); }
.plan-card__more { display: inline-block; margin-top: 16px; font-family: var(--font-title); font-weight: 700; font-size: .9rem; color: #4aa3ff; }
.plan-card--featured .plan-card__more { color: var(--blue-600); }

.plan-modal .lead-modal__card { max-width: 470px; padding: 0; overflow: hidden; }
.plan-modal__head { position: relative; background: linear-gradient(125deg,#0c2137,#16324f); color: #fff; padding: 26px 30px 22px; }
.plan-modal__cat { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.plan-modal__badge { display: inline-block; margin-left: 8px; background: var(--green-600); color: #fff; font-family: var(--font-title); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; vertical-align: middle; }
.plan-modal__price { font-family: var(--font-title); font-weight: 800; font-size: 2.3rem; color: #fff; margin: 12px 0 0; }
.plan-modal__price small { font-size: 1rem; font-weight: 700; color: var(--on-dark-muted); margin-left: 4px; }
.plan-modal__desc { color: var(--on-dark-muted); margin: 8px 0 0; font-size: .93rem; }
.plan-modal .lead-modal__close { background: rgba(255,255,255,.14); color: #fff; }
.plan-modal .lead-modal__close:hover { background: rgba(255,255,255,.26); }
.plan-modal__body { padding: 22px 30px; max-height: 46vh; overflow-y: auto; }
.plan-modal__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.plan-modal__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--graphite); font-size: .95rem; line-height: 1.4; }
.plan-modal__list li svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 1px; }
.plan-modal__sub { display: block !important; font-family: var(--font-title); font-weight: 800; color: var(--navy); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.plan-modal__foot { padding: 0 30px 26px; }
.plan-modal__note { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 12px 0 0; }

/* ============================================================
   REDESIGN 2026 — camada final do design system
   Aplica ao site inteiro o que precisa valer por cima de todos os
   componentes: ritmo vertical, ergonomia no celular e estados.
   ============================================================ */

/* ---------- Ritmo e largura de leitura ---------- */
.measure { max-width: 68ch; }
.article, .post-share, .post-cta { max-width: 68ch; }
.legal-card p, .legal-card li { max-width: 66ch; }
.section-head + * { margin-top: 0; }

/* ---------- Grupos de ação: um só comportamento em todo o site ----------
   No celular todo grupo de botões empilha e ocupa a largura toda —
   antes cada grupo se virava de um jeito (uns empilhavam, outros
   quebravam a linha em larguras diferentes). */
.hero-cta, .phero__cta, .planos-hero__cta, .btn-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
}
@media (max-width: 640px) {
  .hero-cta, .phero__cta, .planos-hero__cta, .btn-row,
  .ferr-actions, .mapa-actions, .diag-actions, .post-share {
    flex-direction: column; align-items: stretch;
  }
  .hero-cta > .btn, .phero__cta > .btn, .planos-hero__cta > .btn, .btn-row > .btn,
  .ferr-actions > .btn, .mapa-actions > .btn, .diag-actions > .btn { width: 100%; }
  /* a pílula de reforço ao lado do CTA fica centrada, não esticada */
  .phero__cta > .pill-outline, .planos-hero__cta > .pill-outline,
  .hero-cta > .pill-outline { align-self: center; }
  .diag-actions .diag-back { order: 2; }
}

/* ---------- Tabelas: sempre roláveis, nunca cortadas ---------- */
.table-scroll, .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare th, table.compare td { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  table.compare th, table.compare td { padding: var(--sp-3) var(--sp-4); }
}

/* ---------- Estados ----------
   Sem "will-change" aqui de propósito: promover dezenas de cartões a
   camadas de composição custa memória e provoca falhas de pintura. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible { position: relative; z-index: 2; }

/* ---------- Cabeçalho: barra alinhada e legível ---------- */
.header { border-bottom: 1px solid transparent; }
.nav__actions .btn--ghost { border-color: var(--border); }
@media (min-width: 1241px) {
  /* os três acessos ficam agrupados e visualmente subordinados ao CTA */
  .nav__actions { gap: var(--sp-2); }
  .nav__actions .btn--primary { order: 5; margin-left: var(--sp-2); }
}

/* ---------- Rodapé no celular: uma coluna por assunto ---------- */
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer__tag { max-width: none; }
}

/* ---------- Heróis: respiro fluido, nada comprimido ---------- */
.hero-n, .phero { padding-inline: 0; }
.hero-n__copy, .phero__copy { max-width: 62ch; }
@media (max-width: 640px) {
  .hero-n { padding: clamp(56px, 12vh, 88px) 0 clamp(40px, 7vh, 64px); }
  .phero  { padding: clamp(48px, 10vh, 80px) 0 clamp(36px, 6vh, 56px); }
  .stats { gap: var(--sp-5) var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-6); }
}

/* ---------- Painel de decisões / cartões escuros no celular ---------- */
@media (max-width: 640px) {
  .decision-panel, .diag-card, .quote-card, .progress-card, .feature-card { padding: var(--sp-5); }
  .mapa-head, .plan-modal__head { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .mapa-body, .plan-modal__body { padding: var(--sp-5); }
  .plan-modal__foot { padding: 0 var(--sp-5) var(--sp-5); }
  .lead-modal { padding: var(--sp-3); }
  .lead-modal__card { max-height: calc(100dvh - 24px); overflow-y: auto; }
}

/* ---------- Movimento: discreto e respeitando a preferência do sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover, .plan:hover, .tier:hover, .tool-card:hover,
  .blog-card:hover, .journey-card:hover, .serv-card:hover, .wa-float:hover { transform: none; }
}

/* ---------- Correções medidas na verificação ---------- */
/* Botão de largura total no celular: o rótulo longo não cabia numa
   linha só e vazava 12px para fora da tela (ferramentas.html). */
@media (max-width: 640px) {
  .btn { white-space: normal; line-height: 1.3; }
  .btn--lg { padding-inline: var(--sp-5); }
}
/* Links de ação isolados precisam de alvo de toque — links dentro de
   frases (prosa dos artigos) ficam de fora, como prevê a WCAG 2.5.8. */
.contact-info .item a, .post-share a, .breadcrumb a {
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.post-share { gap: var(--sp-3) var(--sp-5); }
/* Caixa de consentimento: linha inteira com altura de toque */
.consent { min-height: var(--tap); padding-block: var(--sp-1); }
.consent input { width: 22px; height: 22px; }

/* ---------- Ferramentas: saída das calculadoras ----------
   Estava num <style> dentro de ferramentas.html; veio para cá para o
   site ter mesmo UMA folha de estilo só. Contrastes conferidos em AA. */
.calc-out { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); font-size: var(--fs-base); }
.calc-out.ok   { background: var(--green-50); border: 1px solid rgba(25,169,116,.3); color: #0F6340; }
.calc-out.warn { background: #FFF6E6; border: 1px solid rgba(240,160,40,.35); color: var(--amber-ink); }
.calc-out.err  { background: var(--red-50); border: 1px solid rgba(196,48,43,.3); color: #A32723; }
.calc-big { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2rem); color: var(--navy); display: flex; flex-direction: column; margin-bottom: var(--sp-3); line-height: 1.15; }
.calc-big small { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-top: var(--sp-1); }
.calc-tbl { width: 100%; border-collapse: collapse; }
.calc-tbl td { padding: var(--sp-2) 0; border-bottom: 1px dashed rgba(16,42,67,.15); color: var(--graphite); font-size: var(--fs-sm); }
.calc-tbl td:last-child { text-align: right; font-weight: 600; font-family: var(--font-title); }
.calc-tbl tr.tot td { border-bottom: none; padding-top: var(--sp-3); font-size: var(--fs-base); color: var(--navy); font-weight: 800; }

/* ---------- Contraste: acentos de categoria em texto e em preenchimento ----------
   Os círculos numerados e os rótulos coloridos usavam o tom puro do
   acento; com texto branco por cima ficavam entre 2,0:1 e 4,4:1.
   Agora usam a variante "ink". */
.rnode__c { background-color: var(--c-blue-ink); }
.rnode--green  .rnode__c, .rnode__c[data-c="green"]  { background-color: var(--c-green-ink); }
.rnode--purple .rnode__c, .rnode__c[data-c="purple"] { background-color: var(--c-purple-ink); }
.rnode--amber  .rnode__c, .rnode__c[data-c="amber"]  { background-color: var(--c-amber-ink); }
.rnode--teal   .rnode__c, .rnode__c[data-c="teal"]   { background-color: var(--c-teal-ink); }
.rnode--red    .rnode__c, .rnode__c[data-c="red"]    { background-color: var(--c-red-ink); }
.chk-node__st { color: var(--c-blue-ink); }
.dp-stat--sl .dp-stat__k { color: var(--blue-600); }
.entry-card--purple .entry-card__k { color: var(--c-purple-ink); }
.split-side--light .split-side__k { color: var(--blue-600); }
.plan-card--featured .plan-card__list li::before { color: var(--green-ink); }
.tile__value--ok { color: var(--green-ink); }

/* A pílula de reforço tem duas vidas: em fundo claro usa verde escuro;
   em fundo escuro precisa de verde CLARO, senão fica verde sobre navy. */
.phero--dark .pill-outline, .section--deep .pill-outline,
.section--navy .pill-outline, .hero-n .pill-outline {
  color: #7FE3B4; border-color: rgba(127,227,180,.42); background: rgba(25,169,116,.16);
}
.phero--dark .pill-outline::before, .section--deep .pill-outline::before,
.section--navy .pill-outline::before, .hero-n .pill-outline::before { background: #7FE3B4; }

/* Orbe: núcleo um pouco mais escuro para o rótulo branco passar em AA */
.orb-float__core { background: radial-gradient(circle at 50% 38%, #1F6FD8 0 47%, #0c2137 48% 100%); }

/* ============================================================
   SUPERFÍCIES ESCURAS — regra única de legibilidade
   Antes cada bloco escuro (.section--deep, .section--navy, .hero-n,
   .phero--dark, .trust-line--dark) tinha a sua própria lista de
   exceções, e o .phero--dark tinha ficado de fora de várias: listas e
   leads apareciam em cinza-escuro sobre o navy (1,3:1 — ilegível).
   Agora todas as superfícies escuras compartilham as mesmas regras.
   ============================================================ */
.section--deep, .section--navy, .hero-n, .phero--dark, .trust-line--dark { color: var(--on-dark); }
.section--deep .lead, .section--navy .lead, .hero-n .lead, .phero--dark .lead,
.section--deep p, .section--navy p, .hero-n p, .phero--dark p { color: var(--on-dark-muted); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4,
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4,
.hero-n h1, .hero-n h2, .hero-n h3, .hero-n h4,
.phero--dark h1, .phero--dark h2, .phero--dark h3, .phero--dark h4 { color: #fff; }
.section--deep .mini-list li, .section--navy .mini-list li,
.hero-n .mini-list li, .phero--dark .mini-list li,
.section--deep .checklist li, .section--navy .checklist li,
.hero-n .checklist li, .phero--dark .checklist li,
.phero--dark .plan-card__list li, .section--deep .plan-card__list li,
.phero--dark .split-when li, .section--deep .split-when li { color: var(--on-dark); }
.section--deep .mini-list li .ck, .section--navy .mini-list li .ck,
.hero-n .mini-list li .ck, .phero--dark .mini-list li .ck,
.phero--dark .checklist li .ck { background: rgba(25,169,116,.2); color: #7FE3B4; }
.trust-line--dark .trust-line__row span { color: var(--on-dark-faint); }
.section--deep strong, .section--navy strong, .hero-n strong, .phero--dark strong { color: #fff; }
/* o cartão claro dentro de uma seção escura volta ao texto escuro */
.phero--dark .plan-card--featured .plan-card__list li,
.phero--dark .plan-card--featured p { color: var(--graphite); }
.phero--dark .diag-card p, .phero--dark .diag-card .lead,
.phero--dark .form-card p, .section--deep .diag-card p { color: var(--text-muted); }

/* ============================================================
   TABELA COMPARATIVA — a coluna destacada apagava o cabeçalho
   .col-feat pintava um azul de 5% por cima do <th> navy, e o texto
   branco do cabeçalho ficava branco-sobre-branco (1:1, invisível).
   O destaque agora vale só no corpo da tabela.
   ============================================================ */
table.compare thead th.col-feat { background: var(--navy); color: #fff; }
table.compare tbody .col-feat { background: rgba(22,119,255,.06); }
table.compare tbody tr:nth-child(even) .col-feat { background: rgba(22,119,255,.09); }

/* ------------------------------------------------------------
   ILHAS CLARAS DENTRO DE SEÇÕES ESCURAS
   Um cartão branco pode viver dentro de um hero escuro. As regras
   de superfície escura acima não podem vazar para dentro dele,
   senão o título fica branco sobre branco. Estas regras devolvem
   o texto escuro a cada ilha clara conhecida.
   ------------------------------------------------------------ */
.diag-card, .form-card, .plan-card--featured, .mock, .card, .tier, .dp-stat,
.gauge-card, .chk-node__card, .rpill, .lead-modal__card, .mcard, .value,
.seg-chip, .hero__float, .entry-card, .journey-card, .legal-card, .blog-card,
.tool-card, .split-side--light, .ferr-pick__item, .mapa-opt, .mapa-body,
.plan-modal__body, .plan-modal__foot, .teaser-tab:not(.page-teaser--dark *),
.stag:not(.split-side--dark *), .calc-out { color: var(--text); }
.diag-card h1, .diag-card h2, .diag-card h3, .diag-card h4,
.form-card h1, .form-card h2, .form-card h3, .form-card h4,
.plan-card--featured h3, .mock h3, .card h3, .tier h3, .dp-stat h3,
.gauge-card h3, .lead-modal__card h2, .lead-modal__card h3,
.entry-card h3, .journey-card h3, .legal-card h2, .legal-card h3,
.blog-card h3, .tool-card h3, .split-side--light h2, .split-side--light h3,
.mapa-body h2, .mapa-body h3, .plan-modal__body h3,
.diag-title, .mapa-q, .diag-result h2, .mapa-result h3 { color: var(--navy); }
.diag-card p, .diag-sub, .diag-foot, .diag-result p, .mapa-sub, .mapa-result__p,
.form-card p, .card p, .tier__note, .journey-card p, .legal-card p,
.blog-card__excerpt, .tool-card p, .entry-card__go, .lead-modal__card p,
.dp-stat__sub, .mcard small, .plan-modal__list li { color: var(--text-muted); }
.diag-label, .mapa-opt__t, .plan-card--featured .plan-card__desc,
.mcard b, .chk-node__card b, .stag:not(.split-side--dark *) { color: var(--navy); }
.diag-answer { color: var(--navy); }
.plan-card--featured .plan-card__price { color: var(--navy); }
.plan-card--featured .plan-card__per { color: var(--text-muted); }

/* ---------- Últimos alvos de toque ----------
   O e-mail da página de contato é um <a class="item"> sem ícone, e a
   linha de links do rodapé enxuto das páginas legais é navegação de
   verdade (não link no meio de frase): ambos precisam dos 44px. */
.contact-info .item { min-height: var(--tap); }
.footer__bottom a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ============================================================
   CABEÇALHO — a barra não pode espremer os itens
   Sem flex:none/nowrap os links do menu encolhiam abaixo do próprio
   texto em 1280px e quebravam letra a letra ("Sol uçõ es").
   ============================================================ */
.nav__menu, .nav__actions { flex: none; }
.nav__menu a { white-space: nowrap; }
.nav .brand { flex: none; }
@media (min-width: 1241px) {
  /* em telas mais apertadas os acessos ficam compactos para os quatro
     links do menu continuarem inteiros ao lado do CTA principal */
  .nav { gap: var(--sp-4); }
  .nav__menu { margin-left: var(--sp-1); gap: 2px; }
  .nav__menu a { padding-inline: 10px; }
  .nav__actions .btn--access { padding-inline: 12px; font-size: 13px; }
  .nav__actions .btn--primary { padding-inline: 18px; font-size: var(--fs-sm); }
}
@media (min-width: 1400px) {
  .nav { gap: var(--sp-5); }
  .nav__menu a { padding-inline: 12px; }
  .nav__actions .btn--access { padding-inline: 14px; font-size: var(--fs-sm); }
  .nav__actions .btn--primary { padding-inline: 22px; font-size: var(--fs-base); }
}

/* O rótulo dentro do círculo do diagrama radial precisa caber no
   círculo — no celular ele estava encostando nas bordas. */
.radial__core small { letter-spacing: .1em; line-height: 1.3; }
@media (max-width: 760px) {
  .radial__disc { height: 232px; }
  .radial__ring { width: 232px; height: 232px; }
  .radial__core { width: 168px; height: 168px; padding: 14px; }
  .radial__core small { font-size: var(--fs-xs); letter-spacing: .04em; }
  .radial__core b { font-size: var(--fs-sm); }
}

/* Links do menu do desktop com a mesma altura de alvo dos botões (44px):
   a barra tem 72px, então cabe sem apertar. */
.nav__menu a { min-height: var(--tap); }