/* app/static/css/mxgestao.css — identidade do site público MXGestão (rebranding 10/2026).
   Carrega DEPOIS do site.css, só em site/site_base.html. O site.css continua
   sendo a base compartilhada com o mx2tech.cloud (reset, botões, formulários,
   diálogos legais, prosa): aqui os tokens dele são remapeados para a paleta
   do logo oficial e os componentes novos usam o prefixo .mx-. Nada deste
   arquivo alcança o cloud nem o ERP.
   Direção e regras: docs/DESIGN_SITE_MXGESTAO.md. Cor só por token: hex
   apenas no bloco :root abaixo. */

/* Geist (Vercel, SIL OFL 1.1, ver vendor/fonts/geist/OFL.txt): família única do site. */
@font-face {
  font-family: 'Geist';
  src: url('/static/vendor/fonts/geist/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Marca, medida no logo oficial de 12/07/2026 (mxgestao-logo.png) */
  --mx-navy-950: #041842;   /* letras do wordmark: títulos e valores */
  --mx-navy-900: #0A285A;   /* base do símbolo: faixa de fechamento */
  --mx-blue-800: #13509A;   /* hover do primário, selo informativo */
  --mx-blue-700: #1762BA;   /* faixa média da chama: botão, link */
  --mx-blue-500: #1872D2;   /* o X do wordmark: foco, etapa concluída, ícone */
  --mx-cyan-400: #1FB2F5;   /* topo da chama: etapa atual. Nunca texto sobre claro */
  --mx-cyan-200: #7FD0F7;   /* link sobre navy */
  --mx-blue-100: #D6E8F9;
  --mx-blue-50: #EAF3FC;
  --mx-halo: rgba(31, 178, 245, .22);

  /* Superfícies (as mesmas do mx2tech.cloud) */
  --mx-bg: #FFFFFF;
  --mx-paper: #F4F6FA;
  --mx-mist: #EAEFF6;
  --mx-line: #E1E6EE;
  --mx-line-strong: #C9D2DF;
  --mx-line-input: #7A889F;

  /* Texto */
  --mx-text-strong: #041842;
  --mx-text: #24304A;
  --mx-text-muted: #56627A;
  --mx-text-subtle: #647087;
  --mx-on-navy: #FFFFFF;
  --mx-on-navy-muted: #B7C6DE;

  /* Estados */
  --mx-ok-700: #11734A;   --mx-ok-50: #E5F4EC;
  --mx-warn-700: #8A5100; --mx-warn-50: #FDF3DC;
  --mx-err-700: #B42318;  --mx-err-50: #FDECEA;
  --mx-scrim: rgba(4, 24, 66, .55);

  /* Forma e movimento */
  --mx-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mx-radius-xs: 6px;
  --mx-radius-sm: 8px;
  --mx-radius-md: 12px;
  --mx-radius-lg: 16px;
  --mx-shadow-1: 0 1px 2px rgba(4, 24, 66, .06), 0 12px 32px -12px rgba(4, 24, 66, .14);
  --mx-shadow-2: 0 18px 40px -16px rgba(4, 24, 66, .24);
  --mx-ring: 0 0 0 3px rgba(24, 114, 210, .20);
  --mx-shadow-seg: 0 1px 2px rgba(4, 24, 66, .08);
  --mx-ease: cubic-bezier(.2, .7, .2, 1);
  --mx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mx-section-y: clamp(4rem, 3rem + 4vw, 7rem);
  --mx-header-h: 68px;
  --mx-maxw: 1200px;

  /* Tokens do site.css remapeados: formulários, diálogos e prosa
     compartilhados herdam a paleta nova sem regra extra. */
  --font: var(--mx-font);
  --font-mono: var(--mx-font);
  --ink: var(--mx-bg);
  --surface: var(--mx-bg);
  --surface-2: var(--mx-paper);
  --brand: var(--mx-blue-700);
  --brand-deep: var(--mx-blue-800);
  --brand-sky: var(--mx-blue-500);
  --accent: var(--mx-blue-700);
  --text: var(--mx-text);
  --muted: var(--mx-text-muted);
  --line: var(--mx-line);
  --line-strong: var(--mx-line-strong);
  --good: var(--mx-ok-700);
  --good-strong: var(--mx-ok-700);
  --warn: var(--mx-warn-700);
  --danger: var(--mx-err-700);
  --text-accent: var(--mx-blue-700);
  --glow: transparent;
  --grad-cta: none;
  --elev-1: var(--mx-shadow-1);
  --elev-2: var(--mx-shadow-2);
  --radius: var(--mx-radius-md);
  --radius-sm: var(--mx-radius-sm);
  --maxw: var(--mx-maxw);
  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { scroll-padding-top: calc(var(--mx-header-h) + 16px); scroll-padding-bottom: 104px; }
@media (min-width: 720px) { html { scroll-padding-bottom: 140px; } }
body.mx {
  background: var(--mx-bg);
  color: var(--mx-text);
  font-family: var(--mx-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "ss08";
  transition: none;
  -webkit-tap-highlight-color: rgba(24, 114, 210, .12);
}
.mx a, .mx button, .mx summary, .mx label { touch-action: manipulation; }
.mx [id] { scroll-margin-top: calc(var(--mx-header-h) + 16px); }
.mx :focus-visible { outline: 2px solid var(--mx-blue-500); outline-offset: 2px; }
.mx h1, .mx h2, .mx h3, .mx h4 { color: var(--mx-text-strong); font-weight: 600; text-wrap: balance; }
.mx h1 { font-size: clamp(2.25rem, 1.45rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; }
.mx h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; }
.mx h3 { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); line-height: 1.3; letter-spacing: -.015em; }
.mx h4 { font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; }
.mx p { text-wrap: pretty; }
.mx img { height: auto; }
.mx .container { max-width: var(--mx-maxw); padding-inline: 16px; }
@media (min-width: 560px) { .mx .container { padding-inline: 24px; } }
@media (min-width: 1100px) { .mx .container { padding-inline: 32px; } }
.mx .skip-link { top: 12px; transform: translateY(-200%); background: var(--mx-blue-700); font-weight: 600; }
.mx .skip-link:focus { transform: none; }
.mx-num { font-variant-numeric: tabular-nums; }
.mx-hero__grid > *, .mx-solucoes > *, .mx-faq > *, .mx-footer__grid > *, .mx-passos > *, .mx-prova > *, .mx-cadastro__grid > * { min-width: 0; }
.mx a[href^="mailto:"], .mx .prose a { overflow-wrap: anywhere; }
.mx h1, .mx h2, .mx h3 { overflow-wrap: break-word; }
.mx main .btn { white-space: normal; max-width: 100%; }
.mx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Rótulo acima do título: raro e em caixa normal */
.mx-eyebrow { font-size: .95rem; font-weight: 600; letter-spacing: -.005em; color: var(--mx-blue-700); margin-bottom: 12px; }
.mx-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.55; color: var(--mx-text-muted); max-width: 52ch; }
.mx-link { color: var(--mx-blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mx-link:hover { color: var(--mx-blue-800); }

/* ── Botões (sobrescrevem a base do site.css) ──────────────────────────── */
.mx .btn { gap: .5rem; min-height: 44px; border-radius: var(--mx-radius-sm); font-weight: 600; font-size: .98rem; letter-spacing: -.005em; padding: .8rem 1.35rem;
  transition: background-color 120ms var(--mx-ease), color 120ms var(--mx-ease), border-color 120ms var(--mx-ease), transform 100ms var(--mx-ease); }
.mx .btn:active { transform: translateY(1px); }
.mx .btn:focus-visible { outline: 2px solid var(--mx-blue-500); outline-offset: 2px; }
.mx .btn-primary { background: var(--mx-blue-700); background-image: none; color: var(--mx-on-navy); box-shadow: none; }
.mx .btn-primary:hover { background: var(--mx-blue-800); transform: none; box-shadow: none; }
.mx .btn-primary:active { transform: translateY(1px); }
.mx .btn-ghost { background: transparent; color: var(--mx-text-strong); border-color: var(--mx-line-strong); }
.mx .btn-ghost:hover { border-color: var(--mx-blue-700); color: var(--mx-blue-800); }
.mx .btn-light { background: var(--mx-bg); color: var(--mx-navy-900); border-color: var(--mx-bg); }
.mx .btn-light:hover { background: var(--mx-blue-50); }
.mx .btn-sm { min-height: 40px; padding: .55rem 1rem; font-size: .92rem; }
.mx .btn-lg { min-height: 48px; padding: .9rem 1.5rem; font-size: 1rem; }
.mx .btn-block { min-height: 52px; }
.mx .btn.is-loading { opacity: 1; }
.mx .btn:disabled, .mx .btn:disabled:hover { background: var(--mx-mist); color: var(--mx-text-muted); border-color: transparent; cursor: not-allowed; transform: none; }

/* Ação secundária como link com seta */
.mx-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--mx-blue-700); font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms var(--mx-ease), color 120ms var(--mx-ease); }
.mx-go:hover { color: var(--mx-blue-800); text-decoration-color: currentColor; }
.mx-go svg { transition: transform 200ms var(--mx-ease-out); }
.mx-go:hover svg { transform: translateX(3px); }
.mx-go--claro { color: var(--mx-cyan-200); }
.mx-go--claro:hover { color: var(--mx-on-navy); }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.mx-header { position: sticky; top: 0; z-index: 50; background: var(--mx-bg); border-bottom: 1px solid var(--mx-line); transition: box-shadow 200ms var(--mx-ease); }
.mx-header.is-scrolled { box-shadow: var(--mx-shadow-1); }
.mx-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--mx-header-h); }
.mx-marca { display: inline-flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; margin-right: auto; min-height: 44px; }
.mx-marca__simbolo { width: 25px; height: 32px; }
.mx-marca__nome { width: 134px; height: 20px; }
.mx-nav { display: none; gap: 2px; margin-right: auto; }
.mx-nav a { white-space: nowrap; color: var(--mx-text-muted); font-weight: 500; font-size: .95rem; padding: 8px 12px; border-radius: var(--mx-radius-sm); transition: color 120ms var(--mx-ease), background-color 120ms var(--mx-ease); }
.mx-nav a:hover, .mx-nav a[aria-current] { color: var(--mx-text-strong); background: var(--mx-paper); }
.mx-menu__painel a[aria-current] { color: var(--mx-blue-700); }
.mx-header__acoes { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mx-header .btn { white-space: nowrap; }
.mx-header__entrar { display: none; color: var(--mx-blue-700); font-weight: 600; font-size: .95rem; padding: 10px 12px; border-radius: var(--mx-radius-sm); }
.mx-header__entrar:hover { color: var(--mx-blue-800); background: var(--mx-paper); }
.mx-header .btn-sm { padding-inline: .9rem; }
@media (min-width: 560px) { .mx-header__entrar { display: inline-flex; } }
.mx-header__entrar--sempre { display: inline-flex; }
.mx-header__ja { font-size: .9375rem; color: var(--mx-text-muted); }
@media (max-width: 379.98px) { .mx-header__acoes > .btn-sm { display: none; } }
@media (max-width: 379.98px) { .mx-header__ja { display: none; } }
@media (min-width: 1140px) {
  .mx-marca { margin-right: 20px; }
  .mx-nav { display: flex; }
}
@media (max-width: 439.98px) {
  .mx-marca { gap: 7px; }
  .mx-marca__simbolo { width: 21px; height: 27px; }
  .mx-marca__nome { width: 108px; height: 16px; }
  .mx-header .btn-sm { padding-inline: .75rem; font-size: .875rem; }
}

/* Menu móvel em <details>: abre sem JS */
.mx-menu { position: static; }
.mx-menu > summary { list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--mx-radius-sm); color: var(--mx-text-strong); cursor: pointer; }
.mx-menu > summary::-webkit-details-marker { display: none; }
.mx-menu > summary:hover, .mx-menu[open] > summary { background: var(--mx-paper); }
.mx-menu__painel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--mx-bg); border-bottom: 1px solid var(--mx-line); box-shadow: var(--mx-shadow-2); padding: 8px 16px 20px; display: flex; flex-direction: column; }
.mx-menu__painel a:not(.btn) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--mx-line); font-weight: 500; color: var(--mx-text-strong); }
.mx-menu__painel .btn { margin-top: 16px; width: 100%; }
.mx-menu[open] .mx-menu__painel { animation: mx-desce 200ms var(--mx-ease-out); }
@keyframes mx-desce { from { opacity: 0; transform: translateY(-4px); } }
@media (min-width: 1140px) { .mx-menu { display: none; } }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.mx-section { padding-block: var(--mx-section-y) calc(var(--mx-section-y) + 8px); }
.mx-section--paper { background: var(--mx-paper); }
.mx-section--fio { border-top: 1px solid var(--mx-line); }
.mx-head { max-width: 760px; margin-bottom: clamp(28px, 2rem + 1vw, 44px); }
.mx-head h2 { max-width: 24ch; }
.mx-head .mx-lead { margin-top: 16px; }

/* ── Abertura ───────────────────────────────────────────────────────────── */
.mx-hero { padding-block: clamp(40px, 2rem + 4vw, 88px) clamp(48px, 2.5rem + 4vw, 96px); }
.mx-hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem); }
.mx-quebra { display: none; }
@media (min-width: 900px) { .mx-quebra { display: inline; } }
.mx-hero__grid { display: grid; gap: 40px; align-items: center; margin-top: clamp(24px, 1rem + 1.5vw, 40px); }
.mx-hero .mx-lead { max-width: 46ch; }
.mx-hero .mx-fatos { margin-top: clamp(40px, 2rem + 2vw, 64px); }
.mx-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.mx-hero__nota { margin-top: 16px; font-size: .9375rem; color: var(--mx-text-muted); }
@media (min-width: 900px) { .mx-hero__grid { grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: start; } .mx-hero__grid > div:first-child { padding-top: 8px; } }
@media (max-width: 559.98px) { .mx-hero__cta .btn { width: 100%; } }

/* ── Espécime: um pedaço do sistema montado em HTML ─────────────────────── */
.mx-mesa { background: var(--mx-paper); border-radius: var(--mx-radius-lg); padding: clamp(16px, .8rem + 1.2vw, 28px); }
.mx-section--paper .mx-mesa { background: var(--mx-mist); }
.mx-ficha { background: var(--mx-bg); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-1); overflow: hidden; }
.mx-ficha__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 4px; }
.mx-ficha__id { font-size: .8125rem; color: var(--mx-text-muted); font-variant-numeric: tabular-nums; }
.mx-ficha__titulo { padding: 0 20px; font-weight: 600; color: var(--mx-text-strong); font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.35; }
.mx-ficha__texto { padding: 14px 20px 18px; font-size: .9375rem; color: var(--mx-text-muted); border-top: 1px solid var(--mx-line); }
.mx-ficha__texto strong { color: var(--mx-text-strong); font-weight: 600; }
.mx-legenda { margin-top: 12px; font-size: .8125rem; color: var(--mx-text-muted); }
.mx-linhas { margin-top: 14px; border-top: 1px solid var(--mx-line); }
.mx-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--mx-line); font-size: .92rem; }
.mx-linha:last-child { border-bottom: 0; }
.mx-linha__rotulo { color: var(--mx-text-muted); }
.mx-linha__valor { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mx-text-strong); text-align: right; }
.mx-linhas--par .mx-linha { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 419.98px) {
  .mx-linha { grid-template-columns: 1fr auto; }
  .mx-linha .mx-selo { grid-column: 2; justify-self: end; }
}

/* Selo de estado (caixa normal) */
.mx-selo { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; line-height: 1.3; letter-spacing: .005em; padding: 3px 8px; border-radius: var(--mx-radius-xs); color: var(--mx-blue-800); background: var(--mx-blue-50); }
.mx-selo--ok { color: var(--mx-ok-700); background: var(--mx-ok-50); }
.mx-selo--alerta { color: var(--mx-warn-700); background: var(--mx-warn-50); }
.mx-selo--neutro { color: var(--mx-text-muted); background: var(--mx-mist); }

/* Trilho do documento: a assinatura visual do MXGestão */
.mx-trilho { --n: 5; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; margin: 18px 20px 6px; }
.mx-trilho::before, .mx-trilho::after { content: ""; position: absolute; left: 6px; right: calc(100% / var(--n) - 7px); top: 6px; height: 2px; }
.mx-trilho::before { background: var(--mx-line); }
.mx-trilho::after { background: var(--mx-blue-500); transform-origin: left center; transform: scaleX(var(--mx-progresso, 0)); transition: transform 400ms var(--mx-ease-out); }
.mx-trilho > li { position: relative; z-index: 1; padding-top: 22px; font-size: .8125rem; line-height: 1.3; color: var(--mx-text-muted); }
@media (max-width: 479.98px) { .mx-ficha > .mx-trilho:not(.mx-trilho--abas) > li:not(.is-atual) { font-size: 0; } }
.mx-trilho > li::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--mx-bg); border: 2px solid var(--mx-line-strong); transition: background-color 200ms var(--mx-ease), border-color 200ms var(--mx-ease), box-shadow 200ms var(--mx-ease); }
.mx-trilho > li.is-feito::before { background: var(--mx-blue-500); border-color: var(--mx-blue-500); }
.mx-trilho > li[aria-current="step"], .mx-trilho > li.is-atual { color: var(--mx-text-strong); font-weight: 600; }
.mx-trilho > li[aria-current="step"]::before, .mx-trilho > li.is-atual::before { border-color: var(--mx-cyan-400); box-shadow: 0 0 0 4px var(--mx-halo); }

/* Trilho clicável (etapas da demonstração por segmento) */
.mx-trilho--abas > li { padding-top: 0; }
.mx-trilho--abas > li::before { display: none; }
.mx-etapa { position: relative; display: block; width: 100%; padding: 22px 6px 8px 0; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--mx-radius-xs); }
.mx-etapa::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--mx-bg); border: 2px solid var(--mx-line-input); transition: background-color 200ms var(--mx-ease), border-color 200ms var(--mx-ease), box-shadow 200ms var(--mx-ease); }
.mx-etapa:hover { color: var(--mx-text-strong); }
.mx-etapa.is-feito::before { background: var(--mx-blue-500); border-color: var(--mx-blue-500); }
.mx-etapa[aria-selected="true"] { color: var(--mx-text-strong); font-weight: 600; }
.mx-etapa[aria-selected="true"]::before { border: 3px solid var(--mx-blue-500); box-shadow: 0 0 0 4px var(--mx-halo); }
@media (forced-colors: active) {
  .mx-etapa::before, .mx-trilho > li::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .mx-etapa.is-feito::before { background: CanvasText; }
  .mx-etapa[aria-selected="true"]::before { background: Highlight; border-color: Highlight; }
  .mx-seg__btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}
.mx-etapa:focus-visible { outline-offset: 4px; }
/* Sem JS: painéis empilhados e trilho só ilustrativo */
.mx-demo__painel + .mx-demo__painel { border-top: 1px solid var(--mx-line); }
.mx-demo.is-on .mx-demo__painel { display: none; }
.mx-demo.is-on .mx-demo__painel.is-ativo { display: block; animation: mx-surge 200ms var(--mx-ease); }
.mx-demo.is-on .mx-demo__painel + .mx-demo__painel { border-top: 0; }
@keyframes mx-surge { from { opacity: 0; } }
.mx-demo:not(.is-on) .mx-etapa { cursor: default; }
@media (max-width: 559.98px) {
  .mx-trilho--abas .mx-etapa { min-height: 44px; padding: 0; }
  .mx-trilho--abas .mx-etapa:not([aria-selected="true"]) .mx-etapa__rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mx-trilho--abas .mx-etapa::before { top: 15px; }
  .mx-trilho--abas .mx-etapa[aria-selected="true"] { color: var(--mx-text-strong); padding-top: 34px; white-space: nowrap; }
  .mx-trilho--abas > li:last-child > .mx-etapa { display: flex; justify-content: flex-end; }
  .mx-trilho--abas::before, .mx-trilho--abas::after { top: 21px; }
}
.mx-demo__tela { font-weight: 600; color: var(--mx-text-strong); font-size: 1rem; letter-spacing: -.01em; line-height: 1.35; }

/* ── Faixa de fatos ─────────────────────────────────────────────────────── */
.mx-fatos { list-style: none; display: grid; gap: 20px 32px; padding-block: 32px; border-block: 1px solid var(--mx-line); }
.mx-fatos li { display: grid; gap: 4px; }
.mx-fatos strong { color: var(--mx-text-strong); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.mx-fatos span { color: var(--mx-text-muted); font-size: .9375rem; line-height: 1.5; }
@media (min-width: 560px) { .mx-fatos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .mx-fatos { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .mx-fatos li { padding-inline: 24px; border-left: 1px solid var(--mx-line); }
  .mx-fatos li:first-child { padding-left: 0; border-left: 0; }
}

/* ── Como funciona: as áreas num trilho largo ───────────────────────────── */
.mx-areas { list-style: none; display: grid; gap: 28px; position: relative; }
.mx-area { position: relative; padding-left: 30px; }
.mx-area::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--mx-blue-500); }
.mx-area::after { content: ""; position: absolute; left: 6px; top: 24px; bottom: -24px; width: 2px; background: var(--mx-blue-100); }
.mx-area:last-child::after { display: none; }
.mx-area h3 { font-size: 1.0625rem; }
.mx-area__link { text-decoration: underline; text-decoration-color: var(--mx-line-strong); text-underline-offset: 4px; transition: text-decoration-color 120ms var(--mx-ease), color 120ms var(--mx-ease); }
.mx-area__link:hover { color: var(--mx-blue-700); text-decoration-color: currentColor; }
.mx-mais { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; }
.mx-solucao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 20px; }
.mx-solucao .mx-solucao__acoes .btn { margin-top: 0; }
.mx-area p { margin-top: 6px; font-size: .9375rem; color: var(--mx-text-muted); line-height: 1.55; }
.mx-area__passa { display: block; margin-top: 10px; font-size: .875rem; color: var(--mx-text-muted); font-weight: 500; }
.mx-area--base::before { background: var(--mx-bg); border: 2px solid var(--mx-blue-500); }
@media (min-width: 1000px) {
  .mx-areas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
  .mx-area { padding-left: 0; padding-top: 34px; padding-right: 8px; }
  .mx-area::before { top: 0; }
  .mx-area::after { left: 20px; right: -22px; top: 6px; bottom: auto; width: auto; height: 2px; }
}
.mx-tres { display: grid; gap: 20px 32px; margin-top: clamp(40px, 2rem + 2vw, 64px); padding-top: 32px; border-top: 1px solid var(--mx-line); }
.mx-tres h3 { font-size: 1.0625rem; }
.mx-tres p { margin-top: 6px; color: var(--mx-text-muted); font-size: .9375rem; line-height: 1.55; }
@media (min-width: 900px) { .mx-tres { grid-template-columns: repeat(3, 1fr); } }

/* ── Segmentos: seletor único + espécime + texto ────────────────────────── */
.mx-seg { display: flex; gap: 4px; padding: 4px; background: var(--mx-mist); border-radius: calc(var(--mx-radius-sm) + 2px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: 100%; width: max-content; }
.mx-seg::-webkit-scrollbar { display: none; }
@media (max-width: 719.98px) { .mx-seg { flex-wrap: wrap; width: auto; overflow: visible; } }
html:not(.js) .mx-seg { display: none; }
.js .is-oculto { display: none; }
.mx-seg__btn { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--mx-radius-sm); background: transparent; color: var(--mx-text-muted); font: 500 .95rem/1 var(--mx-font); cursor: pointer; transition: color 120ms var(--mx-ease), background-color 120ms var(--mx-ease); }
.mx-seg__btn:hover { color: var(--mx-text-strong); }
.mx-seg__btn[aria-pressed="true"] { background: var(--mx-bg); color: var(--mx-text-strong); font-weight: 600; box-shadow: var(--mx-shadow-seg), inset 0 0 0 2px var(--mx-blue-500); }
.mx-seg__btn svg { color: var(--mx-blue-500); }
.mx-solucoes { display: grid; gap: 32px; margin-top: 28px; align-items: start; }
@media (min-width: 900px) { .mx-solucoes { grid-template-columns: 7fr 5fr; gap: 48px; } }
.mx-solucao__dor { color: var(--mx-text-muted); font-size: .9375rem; }
.mx-solucao h3 { margin-top: 8px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height: 1.25; letter-spacing: -.02em; }
.mx-solucao__texto { margin-top: 14px; color: var(--mx-text); }
.mx-solucao__rec { margin-top: 22px; font-size: .9375rem; font-weight: 600; color: var(--mx-text-strong); }
.mx-solucao .btn { margin-top: 20px; }
.mx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--mx-radius-xs); background: var(--mx-bg); color: var(--mx-text-strong); font-size: .875rem; font-weight: 500; }
.mx-chip svg { color: var(--mx-blue-500); }
.mx-section:not(.mx-section--paper) .mx-chip { background: var(--mx-paper); }
.mx-chip--dep { color: var(--mx-text-muted); }
.mx-chip__nota { font-size: .8125rem; color: var(--mx-text-muted); }

/* ── Serviços: linhas compactas num formulário GET ──────────────────────── */
.mx-svc-form { margin-top: clamp(40px, 2rem + 2vw, 64px); }
.mx-section .mx-svc-form:first-child { margin-top: 0; }
.mx-svc-head { display: grid; gap: 12px; margin-bottom: 28px; }
.mx-svc-head h2 { max-width: 24ch; }
.mx-svc-head p { color: var(--mx-text-muted); max-width: 62ch; }
.mx-svc-legenda { font-size: .875rem; color: var(--mx-text-muted); }
.mx-grupos { columns: 1; column-gap: 24px; }
@media (min-width: 720px) { .mx-grupos { columns: 2; } }
@media (min-width: 1100px) { .mx-grupos { columns: 3; } }
.mx-grupo { break-inside: auto; border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.mx-grupo legend { break-after: avoid; font-size: .9375rem; font-weight: 600; color: var(--mx-text-strong); padding: 0 0 6px; }
.mx-svc { break-inside: avoid; position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 12px 6px 14px; margin-top: 8px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-md); background: var(--mx-bg); transition: border-color 120ms var(--mx-ease), background-color 120ms var(--mx-ease); }
.mx-svc:hover { border-color: var(--mx-line-strong); }
.mx-svc.is-on { border-color: var(--mx-blue-500); background: var(--mx-blue-50); box-shadow: inset 0 0 0 1px var(--mx-blue-500); }
.mx-svc.is-dep { border-color: var(--mx-blue-100); background: var(--mx-blue-50); }
.mx-svc input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--mx-blue-700); cursor: pointer; }
.mx-svc input[type="checkbox"]:disabled { cursor: default; }
.mx-svc__corpo { min-width: 0; }
.mx-svc__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mx-svc__titulo { font-weight: 600; color: var(--mx-text-strong); font-size: 1rem; letter-spacing: -.01em; cursor: pointer; }
/* o rótulo do título cobre o cartão inteiro (área de toque) sem envolver o <details> */
.mx-svc__titulo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mx-svc__como { flex-basis: 100%; font-size: .8125rem; color: var(--mx-text-muted); }
.mx-svc__como--addon { color: var(--mx-warn-700); }
.mx-svc__vai { flex-basis: 100%; font-size: .8125rem; font-weight: 600; color: var(--mx-blue-800); }
.mx-svc__req-titulo { margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--mx-text-strong); }
.mx-svc__problema { margin-top: 2px; font-size: .875rem; color: var(--mx-text-muted); line-height: 1.45; }
.mx-svc__mais { position: relative; z-index: 1; margin-top: 2px; font-size: .875rem; }
.mx-svc__mais > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--mx-blue-700); font-weight: 600; cursor: pointer; list-style: none; }
.mx-svc__mais > summary::-webkit-details-marker { display: none; }
.mx-svc__mais > summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--mx-ease); }
.mx-svc__mais[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.mx-svc__mais ul { list-style: none; display: grid; gap: 6px; margin: 6px 0 4px; color: var(--mx-text); }
.mx-svc__mais li { position: relative; padding-left: 18px; line-height: 1.45; }
.mx-svc__mais li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-blue-500); }
.mx-svc__mais h4 { margin-top: 12px; font-size: .875rem; color: var(--mx-text-strong); }
.mx-svc__mais .mx-svc__req li::before { background: var(--mx-warn-700); }
.mx-svc__dep { margin: 8px 0 6px; font-size: .8125rem; color: var(--mx-text-muted); }
@media (max-width: 719.98px) {
  .mx-svc__problema { display: none; }
  .mx-svc__mais[open] .mx-svc__problema-m { display: block; }
}
.mx-svc__problema-m { display: none; margin: 4px 0 8px; color: var(--mx-text-muted); }

/* Bandeja: resumo e envio */
.mx-tray { position: sticky; bottom: 12px; z-index: 40; display: grid; gap: 12px; margin-top: 8px; padding: 14px 16px; background: var(--mx-bg); border: 1px solid var(--mx-line); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-2); }
.mx-tray__resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.mx-tray__conta { font-weight: 600; color: var(--mx-text-strong); white-space: nowrap; }
.mx-tray__lista { font-size: .875rem; color: var(--mx-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mx-tray__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mx-tray__nota { font-size: .8125rem; color: var(--mx-text-muted); }
.mx-tray:not(.is-active) .mx-tray__lista { display: none; }
.mx-tray__rot-curto { display: none; }
@media (max-width: 719.98px) {
  .mx-tray { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 8px 8px 14px; }
  .mx-tray__lista, .mx-tray__nota, .mx-tray__acoes .mx-go, .mx-tray__marcados, .mx-tray__rot { display: none; }
  .mx-tray__rot-curto { display: inline; }
  .mx-tray__acoes .btn { width: 100%; min-height: 44px; padding-block: .5rem; }
  .js .mx-tray:not(.is-active) { display: none; }
}
@media (min-width: 720px) { .js .mx-tray:not(.is-active) { position: static; box-shadow: none; } }
@media (min-width: 720px) { .mx-tray { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .mx-tray__nota { grid-column: 1 / -1; } }
.mx-svc-depois { margin-top: 16px; font-size: .9375rem; color: var(--mx-text-muted); }
@media (min-width: 720px) { .mx-svc-depois { display: none; } }

/* ── Como começar: título fixo + trilho vertical ────────────────────────── */
.mx-passos { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .mx-passos { grid-template-columns: 4fr 8fr; gap: 48px; }
  .mx-passos__head { position: sticky; top: calc(var(--mx-header-h) + 32px); align-self: start; }
}
.mx-passos__head .mx-lead { margin-top: 16px; }
.mx-passos__head .btn { margin-top: 28px; }
.mx-passos__entrar { margin-top: 14px; font-size: .9375rem; color: var(--mx-text-muted); }
.mx-linha-tempo { list-style: none; counter-reset: passo; display: grid; gap: 0; }
.mx-linha-tempo li { position: relative; padding: 0 0 36px 52px; counter-increment: passo; }
.mx-linha-tempo li:last-child { padding-bottom: 0; }
.mx-linha-tempo li::before { content: counter(passo); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--mx-radius-sm); background: var(--mx-blue-50); color: var(--mx-blue-800); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }
.mx-linha-tempo li::after { content: ""; position: absolute; left: 15px; top: 40px; bottom: 6px; width: 2px; background: var(--mx-line-strong); }
.mx-linha-tempo li:last-child::after { display: none; }
.mx-linha-tempo h3 { padding-top: 4px; }
.mx-linha-tempo p { margin-top: 8px; color: var(--mx-text-muted); max-width: 62ch; }

/* ── Feito e usado pela MX2Tech ─────────────────────────────────────────── */
.mx-prova { display: grid; gap: 40px; }
.mx-prova__frase { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; color: var(--mx-text-strong); max-width: 26ch; text-wrap: balance; }
.mx-prova__texto { margin-top: 18px; color: var(--mx-text-muted); max-width: 58ch; }
.mx-prova__fatos { display: grid; gap: 28px 32px; }
.mx-prova__fatos h3 { font-size: 1.0625rem; }
.mx-prova__fatos p { margin-top: 6px; color: var(--mx-text-muted); font-size: .9375rem; line-height: 1.55; }
@media (min-width: 640px) { .mx-prova__fatos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mx-prova { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

/* ── Dúvidas: aberto, sem sanfona ───────────────────────────────────────── */
.mx-faq { display: grid; gap: 32px; }
.mx-faq__head p { margin-top: 14px; color: var(--mx-text-muted); font-size: .9375rem; }
@media (min-width: 900px) {
  .mx-faq { grid-template-columns: 4fr 8fr; gap: 48px; }
  .mx-faq__head { position: sticky; top: calc(var(--mx-header-h) + 32px); align-self: start; }
}
.mx-qa { display: grid; }
.mx-qa > div { padding-block: 20px; border-top: 1px solid var(--mx-line); }
.mx-qa > div:last-child { border-bottom: 1px solid var(--mx-line); }
.mx-qa dt { font-weight: 600; color: var(--mx-text-strong); font-size: 1.0625rem; letter-spacing: -.01em; }
.mx-qa dd { margin-top: 8px; color: var(--mx-text-muted); max-width: 64ch; }

/* ── Fechamento: a única faixa escura ───────────────────────────────────── */
.mx-fecho { background: var(--mx-navy-900); color: var(--mx-on-navy); padding-block: clamp(56px, 3rem + 4vw, 96px); }
.mx-fecho__inner { max-width: 760px; }
.mx-fecho h2 { color: var(--mx-on-navy); max-width: 22ch; }
.mx-fecho p { margin-top: 14px; color: var(--mx-on-navy-muted); max-width: 54ch; }
.mx-fecho .mx-hero__cta { margin-top: 28px; }
.mx-fecho :focus-visible { outline-color: var(--mx-cyan-400); }
.mx-fecho__nota { margin-top: 18px; font-size: .9375rem; }
.mx-fecho__nota a { color: var(--mx-cyan-200); text-decoration: underline; text-underline-offset: 3px; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.mx-footer { background: var(--mx-paper); border-top: 1px solid var(--mx-line); }
.mx-footer__grid { display: grid; gap: 32px; padding-block: 48px 40px; }
.mx-footer__marca p { margin-top: 14px; color: var(--mx-text-muted); font-size: .9375rem; max-width: 40ch; line-height: 1.55; }
.mx-footer__titulo { font-weight: 600; color: var(--mx-text-strong); font-size: .9375rem; margin-bottom: 6px; }
.mx-footer ul { list-style: none; display: grid; }
.mx-footer li a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--mx-text-muted); font-size: .9375rem; }
.mx-footer li a:hover { color: var(--mx-blue-700); }
.mx-footer__barra { border-top: 1px solid var(--mx-line); padding-block: 18px; font-size: .8125rem; color: var(--mx-text-muted); }
@media (min-width: 720px) { .mx-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mx-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

/* ── Formulários (cadastro, contratação) ────────────────────────────────── */
.mx .field { gap: 6px; margin-top: 16px; }
.mx .field label { font-size: .9375rem; font-weight: 500; color: var(--mx-text-strong); }
.mx .field input { min-height: 48px; background: var(--mx-bg); border: 1px solid var(--mx-line-input); border-radius: var(--mx-radius-sm); padding: 0 14px; font-size: 1rem; color: var(--mx-text-strong); transition: border-color 120ms var(--mx-ease), box-shadow 120ms var(--mx-ease); }
.mx .field input::placeholder { color: var(--mx-text-subtle); }
.mx .field input:focus { border-color: var(--mx-blue-500); box-shadow: var(--mx-ring); }
.mx .field input:focus-visible { outline: 2px solid var(--mx-blue-500); outline-offset: 2px; }
.mx .field input[aria-invalid="true"] { border-color: var(--mx-err-700); }
.mx .was-validated .field input:invalid { border-color: var(--mx-err-700); }
.mx .field__hint { font-size: .875rem; color: var(--mx-text-muted); }
.mx .field__hint--faint { font-size: .875rem; font-weight: 400; color: var(--mx-text-muted); }
.mx .field--opcional label { color: var(--mx-text-strong); }
.mx .check { gap: 12px; margin-top: 14px; font-size: .9375rem; color: var(--mx-text); }
.mx .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--mx-blue-700); }
.mx .check a, .mx .check__note a, .mx .form-legal a { color: var(--mx-blue-700); text-underline-offset: 3px; }
.mx .check__note { font-size: .875rem; color: var(--mx-text-muted); margin-top: 10px; }
.mx .check--opcional { color: var(--mx-text-muted); }
.mx .check--opcional em { font-style: normal; }
.mx .legal-gate__hint { font-size: .875rem; color: var(--mx-warn-700); background: var(--mx-warn-50); border-radius: var(--mx-radius-sm); padding: 10px 12px; margin-top: 10px; }
.mx .alert-error { margin-top: 20px; background: var(--mx-err-50); border: 0; color: var(--mx-text); border-radius: var(--mx-radius-sm); padding: 14px 16px; font-size: .9375rem; }
.mx .alert-error strong { color: var(--mx-err-700); }
.mx .alert-error__links a { color: var(--mx-err-700); }
.mx .form-legal { font-size: .9375rem; color: var(--mx-text-muted); margin-top: 16px; }
.mx .signup-step { margin-top: 28px; padding-top: 0; border-top: 0; }
.mx .signup-step__legend { display: flex; align-items: center; gap: 10px; width: 100%; font-weight: 600; font-size: 1rem; color: var(--mx-text-strong); padding: 0; }
.mx .signup-step__legend::after { content: ""; flex: 1; height: 1px; background: var(--mx-line); }
.mx .signup-step__num { width: 26px; height: 26px; border-radius: var(--mx-radius-xs); background: var(--mx-blue-50); color: var(--mx-blue-800); font-family: var(--mx-font); font-size: .875rem; font-weight: 600; }
.mx .legal-dialog { margin: auto; border: 0; border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-2); }
.mx .check input[data-legal-checkbox]:disabled, .mx .check input[data-legal-checkbox][aria-disabled="true"] { opacity: .6; }
.legal-dialog__dica { margin-right: auto; align-self: center; font-size: .8125rem; color: var(--mx-text-muted); }
.mx .legal-dialog::backdrop { background: var(--mx-scrim); backdrop-filter: none; }
.mx .legal-dialog__body .prose__note { background: var(--mx-blue-50); border: 0; }

/* ── Cadastro ───────────────────────────────────────────────────────────── */
.mx-cadastro { background: var(--mx-paper); padding-block: clamp(28px, 1.5rem + 3vw, 64px) clamp(48px, 2.5rem + 3vw, 88px); }
.mx-cadastro__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .mx-cadastro__grid { grid-template-columns: 7fr 5fr; gap: 48px; } }
.mx-cadastro__form { background: var(--mx-bg); border-radius: var(--mx-radius-md); padding: clamp(22px, 1rem + 2vw, 40px); }
.mx-cadastro__form h1 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; }
.mx-cadastro__sub { margin-top: 12px; color: var(--mx-text-muted); max-width: 52ch; }
.mx-cadastro__lado { display: grid; gap: 32px; }
.mx-cadastro__lado h2 { font-size: 1.0625rem; letter-spacing: -.01em; }
.mx-cadastro__lado p { margin-top: 8px; color: var(--mx-text-muted); font-size: .9375rem; }
.mx-cadastro__resumo { display: none; }
@media (max-width: 959.98px) {
  .mx-cadastro__grid { display: flex; flex-direction: column; align-items: stretch; }
  .mx-cadastro__resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; order: -1; padding: 12px 16px; background: var(--mx-bg); border-radius: var(--mx-radius-sm); font-size: .9375rem; }
  .mx-cadastro__resumo strong { color: var(--mx-text-strong); }
  .mx-cadastro__lado .mx-cadastro__config { display: none; }
}
.mx-trilho--vertical { --n: 1; grid-template-columns: 1fr; gap: 18px; margin: 14px 0 0; }
.mx-trilho--vertical::before, .mx-trilho--vertical::after { display: none; }
.mx-trilho--vertical > li { padding: 0 0 0 28px; font-size: .9375rem; color: var(--mx-text-muted); line-height: 1.5; }
.mx-trilho--vertical > li::before { top: 4px; }
.mx-trilho--vertical > li strong { color: var(--mx-text-strong); font-weight: 600; }
.mx-trilho--vertical > li.is-atual { font-weight: 400; color: var(--mx-text); }

/* ── Contratação (/assinar) e upgrade ───────────────────────────────────── */
.mx-pagina { padding-block: clamp(36px, 2rem + 3vw, 72px) var(--mx-section-y); }
.mx-pagina--estreita .container { max-width: 720px; }
.mx-pagina--estreita .mx-lead { margin-top: 16px; }
.mx-pagina__head { max-width: 760px; margin-bottom: 32px; }
.mx-pagina__head .mx-lead { margin-top: 14px; }
.mx-pagina__head .mx-trilho { margin: 0 0 28px; max-width: 560px; --n: 3; }
.mx-aviso { border-radius: var(--mx-radius-sm); padding: 14px 16px; font-size: .9375rem; margin-bottom: 24px; background: var(--mx-warn-50); color: var(--mx-text); }
.mx-aviso strong { color: var(--mx-warn-700); }
.mx .recommend { max-width: none; margin: 0 0 32px; border: 0; border-radius: var(--mx-radius-md); padding: clamp(18px, 1rem + 1vw, 28px); background: var(--mx-blue-50); }
.mx .recommend__head h2 { font-size: 1.15rem; letter-spacing: -.015em; }
.mx .conditions h2 { font-size: 1.15rem; letter-spacing: -.015em; margin-bottom: 12px; }
.mx .recommend .mx-chip { background: var(--mx-bg); }
.mx .recommend__note { font-size: .9375rem; color: var(--mx-text-muted); }
.mx .plans { gap: 20px; align-items: stretch; }
.mx .plan { display: flex; flex-direction: column; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-md); padding: 28px; background: var(--mx-bg); }
.mx .plan--featured { border-color: var(--mx-blue-500); box-shadow: inset 0 0 0 1px var(--mx-blue-500); }
.mx .plan__badge { position: static; transform: none; align-self: flex-start; margin-bottom: 12px; background: var(--mx-blue-50); color: var(--mx-blue-800); font-size: .75rem; font-weight: 600; letter-spacing: .005em; padding: 3px 8px; border-radius: var(--mx-radius-xs); }
.mx .plan__name { font-size: 1.25rem; letter-spacing: -.015em; }
.mx .plan__amount { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; color: var(--mx-text-strong); }
.mx .plan__seats { font-size: .9375rem; color: var(--mx-text-muted); }
.mx .plan .checklist { margin: 20px 0 8px; }
.mx .plan__cta { margin-top: 18px !important; }
.mx .plan .check--tight { margin-top: auto; padding-top: 16px; font-size: .875rem; }
.mx .checklist li { padding-left: 26px; font-size: .9375rem; }
.mx .checklist li::before { content: ""; left: 3px; top: .38em; width: 6px; height: 11px; border-right: 2px solid var(--mx-blue-700); border-bottom: 2px solid var(--mx-blue-700); transform: rotate(45deg); }
.mx .conditions { max-width: none; margin-top: 40px; border: 0; border-radius: var(--mx-radius-md); padding: clamp(20px, 1rem + 1vw, 32px); background: var(--mx-paper); }
.mx .conditions__aside a { color: var(--mx-blue-700); }
.mx-erro__caminhos { list-style: none; display: grid; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--mx-line); }
.mx-centro { text-align: center; }
.mx-centro .mx-lead { margin-inline: auto; }
.mx-centro .mx-hero__cta { justify-content: center; }

/* ── Páginas legais ─────────────────────────────────────────────────────── */
.mx .prose { max-width: 720px; margin: clamp(40px, 2rem + 3vw, 72px) auto var(--mx-section-y); }
.mx .prose h1 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; }
.mx .prose h2 { font-size: 1.375rem; margin-top: 44px; letter-spacing: -.02em; }
.mx .prose p, .mx .prose li { color: var(--mx-text); line-height: 1.7; }
.mx .prose a { color: var(--mx-blue-700); text-decoration: underline; text-underline-offset: 3px; }
.mx .prose__date { color: var(--mx-text-muted); font-size: .875rem; }

/* ── Páginas internas (recursos, segmentos, institucionais) ─────────────── */
.mx-section--curta { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mx-section--colada { padding-top: clamp(1rem, .5rem + 1vw, 2rem); }
.mx .mx-titulo-menor { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }
.mx-pagina-topo { padding-block: clamp(28px, 1.5rem + 2vw, 56px) clamp(32px, 1.5rem + 2vw, 56px); }
.mx-pagina-topo + .mx-section { padding-top: clamp(40px, 1.5rem + 2.5vw, 64px); }
.mx-pagina-topo__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .mx-pagina-topo__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .mx-pagina-topo__grid h1 { max-width: 16ch; } }
.mx-pagina-topo__grid > * { min-width: 0; }
.mx-pagina-topo h1 { max-width: 20ch; margin-top: 18px; }
.mx-pagina-topo .mx-lead { margin-top: 16px; max-width: 58ch; }
.mx-pagina-topo .mx-hero__cta { margin-top: 28px; }
.mx-trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .875rem; color: var(--mx-text-muted); }
.mx-trilha li { display: inline-flex; align-items: center; }
.mx-trilha li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-right: 1.5px solid var(--mx-line-input); border-top: 1.5px solid var(--mx-line-input); transform: rotate(45deg); }
.mx-trilha a { color: var(--mx-text-muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 120ms var(--mx-ease), text-decoration-color 120ms var(--mx-ease); }
.mx-trilha a:hover { color: var(--mx-blue-700); text-decoration-color: currentColor; }
.mx-trilha [aria-current="page"] { color: var(--mx-text-strong); font-weight: 500; }
.mx-cadastro__form .mx-trilha { margin-bottom: 18px; }

/* Cartões que levam a outra página */
.mx-cartoes { display: grid; gap: 16px; }
@media (min-width: 640px) { .mx-cartoes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mx-cartoes { grid-template-columns: repeat(3, 1fr); } }
.mx-cartao { position: relative; display: grid; gap: 8px; align-content: start; min-height: 168px; padding: 24px 24px 52px; border-radius: var(--mx-radius-md); background: var(--mx-paper); transition: background-color 120ms var(--mx-ease); }
.mx-cartao:hover { background: var(--mx-mist); }
.mx-cartao__icone { color: var(--mx-blue-500); }
.mx-cartao__titulo { font-weight: 600; font-size: 1.125rem; color: var(--mx-text-strong); letter-spacing: -.015em; }
.mx-cartao__texto { color: var(--mx-text-muted); font-size: .9375rem; line-height: 1.55; }
.mx-cartao__ir { position: absolute; left: 24px; bottom: 20px; color: var(--mx-blue-700); transition: transform 200ms var(--mx-ease-out); }
.mx-cartao:hover .mx-cartao__ir { transform: translateX(4px); }

/* Dores e listas de verificação */
.mx-dores { display: grid; gap: 28px; }
@media (min-width: 900px) { .mx-dores { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.mx-dores .mx-lead { margin-top: 14px; }
.mx-dores__lista { list-style: none; display: grid; }
.mx-dores__lista li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid var(--mx-line); color: var(--mx-text); }
.mx-dores__lista li:last-child { border-bottom: 1px solid var(--mx-line); }
.mx-dores__lista li::before { content: ""; position: absolute; left: 4px; top: 1.45em; width: 10px; height: 2px; background: var(--mx-warn-700); }
.mx-dores__lista--ok li::before { left: 6px; top: 1.05em; width: 5px; height: 10px; background: none; border-right: 2px solid var(--mx-blue-700); border-bottom: 2px solid var(--mx-blue-700); transform: rotate(45deg); }
.mx-texto p + p { margin-top: 14px; }

/* Benefícios e destaques */
.mx-beneficios { display: grid; gap: 28px 40px; }
@media (min-width: 720px) { .mx-beneficios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mx-beneficios--3 { grid-template-columns: repeat(3, 1fr); } }
.mx-beneficio { padding-top: 18px; border-top: 2px solid var(--mx-blue-100); }
.mx-beneficio h3, .mx-beneficio__titulo { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; }
.mx .mx-beneficio__titulo { font-size: 1.125rem; }
.mx-beneficio p { margin-top: 8px; color: var(--mx-text-muted); }

/* Serviço do catálogo em detalhe */
.mx-servicos { display: grid; gap: 16px; }
.mx-servicos > *, .mx-beneficios > *, .mx-prova__fatos > *, .mx-cartoes > *, .mx-dores > * { min-width: 0; }
@media (min-width: 900px) { .mx-servicos { grid-template-columns: 1fr 1fr; } }
.mx-servico { padding: 22px 24px; border-radius: var(--mx-radius-md); background: var(--mx-bg); }
.mx-section:not(.mx-section--paper) .mx-servico { background: var(--mx-paper); }
.mx-servico__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mx-servico__topo h3 { font-size: 1.125rem; margin-right: auto; }
.mx-servico__icone { color: var(--mx-blue-500); display: inline-flex; }
.mx-servico__problema { margin-top: 10px; color: var(--mx-text-muted); font-size: .9375rem; }
.mx-servico__faz, .mx-servico__req { list-style: none; display: grid; gap: 6px; margin-top: 12px; font-size: .9375rem; }
.mx-servico__faz li, .mx-servico__req li { position: relative; padding-left: 20px; line-height: 1.5; }
.mx-servico__faz li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 5px; height: 9px; border-right: 2px solid var(--mx-blue-700); border-bottom: 2px solid var(--mx-blue-700); transform: rotate(45deg); }
.mx-servico__req-titulo { margin-top: 16px; font-size: .875rem; font-weight: 600; color: var(--mx-text-strong); }
.mx-servico__req li { color: var(--mx-text-muted); }
.mx-servico__req li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-warn-700); }
.mx-servicos__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.mx-servicos__acao p { color: var(--mx-text-muted); font-size: .9375rem; max-width: 52ch; }
.mx-etapas-texto { margin-top: 24px; }

/* Hub de recursos */
.mx-base { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: var(--mx-radius-md); background: var(--mx-blue-50); margin-bottom: 32px; }
.mx-base__icone { color: var(--mx-blue-700); flex: none; margin-top: 2px; }
.mx-base p { margin-top: 6px; color: var(--mx-text); }
.mx-areas-linhas { list-style: none; border-top: 1px solid var(--mx-line); }
.mx-area-linha { display: grid; gap: 12px 40px; padding-block: 28px; border-bottom: 1px solid var(--mx-line); }
.mx-area-linha > * { min-width: 0; }
@media (min-width: 900px) { .mx-area-linha { grid-template-columns: 5fr 7fr; align-items: start; } }
.mx-area-linha .mx-area-hub__texto { display: block; margin-top: 8px; }
.mx-area-linha .mx-area-hub__servicos { margin-top: 0; }
.mx-area-linha .mx-area-hub__servicos a { background: var(--mx-paper); }
.mx-areas-hub { list-style: none; display: grid; gap: 16px; }
@media (min-width: 720px) { .mx-areas-hub { grid-template-columns: 1fr 1fr; } }
.mx-area-hub { padding: 24px; border-radius: var(--mx-radius-md); background: var(--mx-paper); }
.mx-area-hub__link { display: grid; gap: 6px; }
.mx-area-hub__nome { font-weight: 600; font-size: 1.25rem; color: var(--mx-text-strong); letter-spacing: -.02em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 120ms var(--mx-ease); }
.mx-area-hub__link:hover .mx-area-hub__nome { text-decoration-color: var(--mx-blue-500); }
.mx-area-hub__texto { color: var(--mx-text-muted); font-size: .9375rem; }
.mx-area-hub__servicos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mx-area-hub__servicos a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: var(--mx-radius-xs); background: var(--mx-bg); font-size: .875rem; font-weight: 500; color: var(--mx-text-strong); }
.mx-area-hub__servicos a:hover { color: var(--mx-blue-800); }
.mx-area-hub__servicos svg { color: var(--mx-blue-500); }
.mx-faixa-links { display: grid; gap: 20px; align-items: center; }
.mx-faixa-links p { margin-top: 6px; color: var(--mx-text-muted); }
.mx-faixa-links__acoes { display: flex; flex-wrap: wrap; gap: 4px 28px; }
@media (min-width: 900px) { .mx-faixa-links { grid-template-columns: 1fr auto; gap: 40px; } }

/* Página de área: posição no fluxo e vizinhas */
.mx-onde { display: grid; gap: 18px; }
.mx-trilho--areas { margin: 0; max-width: 760px; }
.mx-trilho--areas > li { font-size: .875rem; padding-right: 12px; overflow-wrap: anywhere; }
.mx-trilho--areas a, .mx-trilho--areas span { position: relative; z-index: 1; display: block; margin-top: -22px; padding: 22px 0 10px; }
.mx-trilho--areas a { color: var(--mx-text-muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.mx-trilho--areas a:hover { color: var(--mx-blue-700); text-decoration-color: currentColor; }
.mx-onde__passa { color: var(--mx-text-strong); font-weight: 500; }
.mx-vizinhas { display: grid; gap: 12px; }
@media (min-width: 640px) { .mx-vizinhas { grid-template-columns: 1fr 1fr; } }
.mx-vizinha { display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--mx-radius-md); background: var(--mx-paper); }
.mx-vizinha:hover { background: var(--mx-mist); }
.mx-vizinha span { font-size: .875rem; color: var(--mx-text-muted); }
.mx-vizinha strong { color: var(--mx-text-strong); font-weight: 600; }
.mx-vizinha--proxima { text-align: right; }

/* Outros segmentos */
.mx-outros { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mx-outros a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--mx-radius-sm); background: var(--mx-paper); font-weight: 500; color: var(--mx-text-strong); }
.mx-outros a:hover { background: var(--mx-mist); }
.mx-outros svg { color: var(--mx-blue-500); }

/* Integrações */
.mx-integracoes__grupo + .mx-integracoes__grupo { margin-top: 40px; }
.mx-integracoes { list-style: none; margin-top: 12px; }
.mx-integracao-linha { display: grid; gap: 6px 32px; padding-block: 20px; border-top: 1px solid var(--mx-line); }
.mx-integracao-linha > * { min-width: 0; }
.mx-integracao-linha p { color: var(--mx-text-muted); font-size: .9375rem; }
.mx-integracao-linha .mx-integracao__req { color: var(--mx-text); font-size: .875rem; }
@media (min-width: 900px) { .mx-integracao-linha { grid-template-columns: 3fr 5fr 4fr; align-items: start; } }
.mx-integracao { padding: 22px 24px; border-radius: var(--mx-radius-md); background: var(--mx-paper); }
.mx-integracao__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mx-integracao__topo h3 { font-size: 1.0625rem; margin-right: auto; }
.mx-integracao p { margin-top: 8px; color: var(--mx-text-muted); font-size: .9375rem; }
.mx-integracao .mx-integracao__req { color: var(--mx-text); font-size: .875rem; }

/* Fale conosco */
.mx .field select, .mx .field textarea { width: 100%; background: var(--mx-bg); border: 1px solid var(--mx-line-input); border-radius: var(--mx-radius-sm); color: var(--mx-text-strong); font: inherit; font-size: 1rem; transition: border-color 120ms var(--mx-ease), box-shadow 120ms var(--mx-ease); }
.mx .field select { min-height: 48px; padding: 0 12px; }
.mx .field textarea { padding: 12px 14px; resize: vertical; min-height: 132px; line-height: 1.5; }
.mx .field select:focus, .mx .field textarea:focus { outline: none; border-color: var(--mx-blue-500); box-shadow: var(--mx-ring); }
.mx .field select:focus-visible, .mx .field textarea:focus-visible { outline: 2px solid var(--mx-blue-500); outline-offset: 2px; }
.mx .field select[aria-invalid="true"], .mx .field textarea[aria-invalid="true"] { border-color: var(--mx-err-700); }
.mx-enviado .mx-hero__cta { margin-top: 24px; }

/* ── Telas reais do produto (empresa de demonstração) ───────────────────── */
.mx-tela { margin: 0; }
.mx-tela img { display: block; width: 100%; height: auto; border-radius: var(--mx-radius-md); border: 1px solid var(--mx-line); box-shadow: var(--mx-shadow-1); background: var(--mx-bg); }
.mx-tela .mx-legenda { margin-top: 10px; }
.mx-pagina-topo__visual .mx-tela img { box-shadow: var(--mx-shadow-2); }
.mx-galeria { display: grid; gap: 28px 32px; }
.mx-galeria__destaque { padding: clamp(14px, .8rem + 1.2vw, 28px); border-radius: var(--mx-radius-lg); background: var(--mx-paper); }
.mx-section--paper .mx-galeria__destaque { background: var(--mx-mist); }
.mx-galeria__itens { display: grid; gap: 28px 32px; }
@media (min-width: 900px) { .mx-galeria__itens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mx-galeria__itens--depois { margin-top: 48px; }
/* Miniaturas com a mesma proporção, recortadas pelo topo: as legendas alinham. */
.mx-galeria__item .mx-tela img, .mx-galeria__itens > .mx-tela img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.mx-galeria__item h3 { margin-top: 14px; font-size: 1.0625rem; }
.mx-galeria__item p { margin-top: 6px; color: var(--mx-text-muted); font-size: .9375rem; line-height: 1.55; }
.mx-galeria__item .mx-go { margin-top: 2px; }
.mx-galeria__nota { color: var(--mx-text-muted); font-size: .8125rem; }
.mx-telas-segmento { display: grid; gap: 24px 32px; }
@media (min-width: 900px) {
  .mx-telas-segmento { grid-template-columns: 1fr 1fr; align-items: start; }
  .mx-telas-segmento > .mx-tela:first-child { grid-column: 1 / -1; }
}
.mx-telas-segmento > * { min-width: 0; }

/* Casos */
.mx-caso-cartao { display: grid; gap: 24px; padding: clamp(20px, 1rem + 2vw, 40px); border-radius: var(--mx-radius-lg); background: var(--mx-blue-50); }
@media (min-width: 900px) { .mx-caso-cartao { grid-template-columns: 5fr 7fr; align-items: center; gap: 40px; } }
.mx-caso-cartao > * { min-width: 0; }
.mx-caso-cartao h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; }
.mx-caso-cartao p { margin-top: 12px; color: var(--mx-text); }
.mx-caso-cartao .mx-selo { margin-bottom: 12px; }
.mx-caso-cartao .btn { margin-top: 20px; }
.mx-aviso-telas { margin-top: 18px; font-size: .875rem; color: var(--mx-text-muted); }

/* ── Entrada ao rolar: bloco inteiro, uma vez ──────────────────────────── */
.js .mx [data-reveal] { transform: translateY(8px); transition: opacity 400ms var(--mx-ease-out), transform 400ms var(--mx-ease-out); }
.js body.mx [data-reveal].is-in { transform: none; }

/* ── Movimento reduzido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mx *, .mx *::before, .mx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .mx [data-reveal], .js .mx [data-reveal] [data-stagger] { opacity: 1 !important; transform: none !important; }
}