/* ══════════════════════════════════════════════════════════════════════════
   NOVA IDENTIDADE BREVES
   A troca de matiz já aconteceu nos tokens acima; este bloco cuida do que
   depende de contexto — as superfícies que eram escuras e passam a ser
   claras, os gradientes da marca e o acabamento de cards e botões.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --blue: #065bff;
  --blue-bright: #169bff;
  --violet: #6738ff;
  --violet-soft: #9146ff;
  --magenta: #f725c7;
  --magenta-bright: #ff4fd8;
  --hairline: #d9e2f0;
  --grad-brand: linear-gradient(100deg, #065bff, #6738ff 52%, #f725c7);
  --grad-glow: linear-gradient(100deg, #169bff, #9146ff 52%, #ff4fd8);
  --sombra-card: 0 1px 2px rgba(2, 24, 44, .04), 0 8px 24px rgba(2, 24, 44, .05);
  --sombra-alta: 0 2px 6px rgba(2, 24, 44, .06), 0 18px 44px rgba(2, 24, 44, .09);
}

/* O site inteiro passa a nascer claro. */
html, body { background: var(--paper-bright); color: var(--ink); }

/* Texto em gradiente — a assinatura da marca, usada só nos destaques. */

/* Sobre box-decoration-break e o padding: como a letra é pintada pelo fundo
   recortado, o navegador só pinta dentro da caixa do trecho. Quando o destaque
   quebra em duas linhas, a última letra de cada trecho é itálica e a sua ponta
   passa do fim da caixa — essa ponta fica sem tinta e a letra aparece cortada.
   Com "clone" cada trecho ganha caixa própria, e o respiro do padding cabe a
   todos eles; a margem negativa devolve o espaço para o texto não afastar do
   que vem depois. */
h1 em, h2 em, .mz-products-custom-copy strong em, .svc-highlight b em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: .07em;
  margin-right: -.07em;
}

/* ───────────────────────────────────────────────────────────────── header */

.nav-shell {
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 34px rgba(2, 24, 44, .07);
}

.site-header.scrolled .nav-shell {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 38px rgba(2, 24, 44, .1);
}

.brand img { width: auto; height: 30px; }
.brand b { color: var(--ink); }
.brand small { color: var(--blue); }

.site-header nav a { color: var(--ink-muted); }
.site-header nav a:hover, .site-header nav a.active { color: var(--ink); }
.site-header nav a::after { background: var(--grad-brand); }
.nav-external { color: var(--violet) !important; }

/* O CTA do topo é o botão mais forte da página: gradiente cheio. */
.nav-cta {
  border: 0;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--tinta), .28);
}
.nav-cta:hover { background: var(--grad-glow); box-shadow: 0 10px 26px rgba(var(--tinta), .36); }
.nav-cta span { color: rgba(255, 255, 255, .9); }
.nav-toggle span { background: var(--ink); }

/* ─────────────────────────────────────────────────────────────────── heros */

/* O fundo escuro dá lugar a branco com uma aurora suave nas cores da marca,
   que é o que o mockup usa como atmosfera. */
.hero, .mz-hero {
  background:
    radial-gradient(1100px 620px at 78% 22%, rgba(var(--tinta), .13), transparent 62%),
    radial-gradient(900px 520px at 96% 46%, rgba(var(--tinta-5), .1), transparent 60%),
    radial-gradient(760px 460px at 12% 4%, rgba(var(--tinta-3), .09), transparent 64%),
    var(--paper-bright);
  color: var(--ink);
}

.hero::before, .mz-hero::before {
  background-image: radial-gradient(rgba(2, 24, 44, .13) .6px, transparent .6px);
  opacity: .5;
}
.hero::after, .mz-hero::after { opacity: .5; }

.hero h1, .mz-hero h1, .hero-lead, .mz-hero-lead { color: var(--ink); }
.hero-lead, .mz-hero-lead { color: var(--ink-muted); }
.hero-kicker { color: var(--violet); }
.hero-kicker span { background: var(--grad-brand); }
.hero-assurances li { border-color: var(--hairline); color: var(--ink-muted); }
.mz-ascii { opacity: .3; }
.mz-hero-stars { opacity: .35; }
.mz-corner { border-color: rgba(2, 24, 44, .18); }
.mz-hud-coords, .mz-hud-bottom, .mz-notation, .mz-rule { color: var(--ink-muted); }
.mz-hud-bottom i, .mz-rule span, .mz-notation span { background: var(--hairline); }
.mz-notation b, .mz-rule b { color: var(--violet); }
.scroll-cue { color: var(--ink-muted); }
.scroll-cue span { background: var(--hairline); }

/* O console do hero é o único bloco escuro dessa área — vira um cartão
   azul-marinho, que dá o contraste que o mockup tira da onda colorida. */
.mz-console {
  border: 1px solid rgba(2, 24, 44, .1);
  background: linear-gradient(160deg, #041e37, var(--ink));
  box-shadow: var(--sombra-alta);
}

/* ─────────────────────────────────────────────────── seções que clareiam */

.mz-units, .mz-integrations {
  background: var(--paper);
  color: var(--ink);
}
.mz-units h2, .mz-integrations h2 { color: var(--ink); }
.mz-units .section-head > p,
.mz-integrations .section-head > p { border-color: var(--hairline); color: var(--ink-muted); }
.mz-units-grid > * { border-color: var(--hairline); background: var(--paper-bright); color: var(--ink); }

/* ─────────────────────────────────────────────────────────── botões e CTAs */

.button-primary {
  border: 0;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--tinta), .26);
}
.button-primary:hover { background: var(--grad-glow); box-shadow: 0 12px 30px rgba(var(--tinta), .34); }
.button-primary .button-arrow, .button-primary span { color: #fff; }

/* O secundário fica limpo: fundo branco, contorno fino, sem peso. */
.mz-btn-ghost, .button-dark {
  border: 1px solid var(--hairline);
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: var(--sombra-card);
}
.mz-btn-ghost:hover, .button-dark:hover {
  border-color: rgba(var(--tinta), .45);
  background: var(--paper-bright);
  color: var(--violet);
}

.text-link { color: var(--violet); }

/* ──────────────────────────────────────────────────────── cards e blocos */

.svc-card, .mz-card, .mz-products-list li, .faq details, .practice-shell,
.mz-products-custom, .integration-flow-copy {
  border-color: var(--hairline);
  background: var(--paper-bright);
  box-shadow: var(--sombra-card);
}

.svc-card:hover, .mz-card:hover, .mz-products-list li:hover {
  border-color: rgba(var(--tinta), .32);
  box-shadow: var(--sombra-alta);
}

/* Fio colorido no topo do card, que é o detalhe do mockup. */
.svc-card, .mz-products-list li { position: relative; overflow: hidden; }
.svc-card::before, .mz-products-list li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .28s ease;
}
.svc-card:hover::before, .mz-products-list li:hover::before { opacity: 1; }

.mz-products-list li small { color: var(--blue); }
.mz-products-list li b { color: var(--ink); }
.mz-products-list li p { color: var(--ink-muted); }
.section-label { color: var(--violet); }

/* ────────────────────────────────────────────────────── contato e rodapé */

/* A seção de contato é a faixa escura do mockup: azul-marinho com o
   gradiente da marca passando por baixo. */
#contato, .calculator {
  background:
    radial-gradient(900px 520px at 84% 30%, rgba(var(--tinta), .34), transparent 62%),
    radial-gradient(760px 460px at 20% 84%, rgba(var(--tinta-5), .2), transparent 60%),
    var(--ink);
}

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--paper-bright);
  color: var(--ink-muted);
}
.site-footer h3 { color: var(--ink); }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--violet); }
.site-footer .footer-brand img { width: auto; height: 40px; }
.footer-brand-block > p { color: var(--ink-muted); }
.footer-bottom, .footer-top { border-color: var(--hairline); }
.footer-cta { border-color: var(--hairline); color: var(--ink); }
.footer-cta:hover { border-color: var(--violet); color: var(--violet); }
.footer-contact svg { color: var(--violet); }

/* O rodapé claro pede o nome ao lado da marca, como no cabeçalho. */
.footer-brand > span {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 660;
  letter-spacing: .18em;
  color: var(--ink);
}

/* ─────────────────────────── seções da matriz que vinham do fundo escuro */

.mz-units, .mz-integrations { background: var(--paper); color: var(--ink); }
.mz-units h2, .mz-integrations h2 { color: var(--ink); }
.mz-units h2 em, .mz-integrations h2 em { color: transparent; }
.mz-units .section-head > p,
.mz-integrations .section-head > p { border-color: var(--hairline); color: var(--ink-muted); }

.mz-unit {
  border: 1px solid var(--hairline);
  background: var(--paper-bright);
  box-shadow: var(--sombra-card);
}
.mz-unit-head small { color: var(--blue); }
.mz-unit-head b { color: var(--ink); }
.mz-unit p { color: var(--ink-muted); }
.mz-unit-tag { border-color: var(--hairline); color: var(--ink-muted); }
.mz-unit.is-branch:hover,
.mz-unit.is-matrix:hover { border-color: rgba(var(--tinta), .34); box-shadow: var(--sombra-alta); }

.mz-integrations .mz-btn-ghost { border-color: var(--hairline); background: var(--paper-bright); color: var(--ink); }

/* O bloco "a gente cria" é a faixa de chamada do mockup: fica escura, agora
   com o gradiente da marca por baixo do azul-marinho. */
.mz-products-custom {
  border-color: rgba(2, 24, 44, .1);
  background:
    radial-gradient(700px 320px at 88% 20%, rgba(var(--tinta), .5), transparent 62%),
    radial-gradient(520px 300px at 8% 100%, rgba(var(--tinta-5), .28), transparent 60%),
    var(--ink);
  color: #fff;
  box-shadow: var(--sombra-alta);
}
.mz-products-custom-copy small { color: var(--magenta-bright); }
.mz-products-custom-copy strong { color: #fff; }
.mz-products-custom-copy p { color: rgba(255, 255, 255, .74); }
.mz-products-custom .button-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(2, 24, 44, .3);
}
.mz-products-custom .button-primary:hover { background: #fff; color: var(--violet); }
.mz-products-custom .button-primary span,
.mz-products-custom .button-primary .button-arrow { color: inherit; }

/* ───────────────────────────────────── seção de contato, que segue escura */

#contato h2, #contato .contact-intro-foot, #contato .contact-direct > span { color: #fff; }
#contato h2 em { color: transparent; background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; }
#contato .section-label { color: var(--magenta-bright); }
#contato .contact-direct a { color: #fff; }

/* ────────────────────────────────────────────────────────── rodapé claro */

.site-footer, .site-footer .footer-top, .site-footer .footer-bottom { color: var(--ink-muted); }
.site-footer nav a, .site-footer .footer-contact a { color: var(--ink-muted); }
.site-footer nav a:hover, .site-footer .footer-contact a:hover { color: var(--violet); }
.site-footer .footer-contact li { color: var(--ink-muted); }
.footer-brand { gap: 12px; }

/* ────────────────────────────────────── cards da vitrine de soluções */

.gallery-card {
  border: 1px solid var(--hairline);
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: var(--sombra-card);
}
.gallery-card::before { background: radial-gradient(circle, rgba(var(--tinta), .1), transparent 66%); }
.gallery-card:hover, .gallery-card:focus-visible {
  border-color: rgba(var(--tinta), .38);
  box-shadow: var(--sombra-alta);
}
.gallery-ic {
  border: 1px solid rgba(var(--tinta), .22);
  background: var(--paper-deep);
  color: var(--violet);
}
.gallery-card-body small { color: var(--blue); }
.gallery-card-body h3 { color: var(--ink); }

/* ────────────────────────── formulário de contato sobre o azul-marinho */

/* Os rótulos e os campos foram desenhados escuros; sobre o fundo escuro da
   seção eles só funcionam dentro de um cartão branco, que é também o
   acabamento do mockup. */
#contato.contact-commit-1adc .contact-form {
  padding: 34px 36px 38px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(1, 12, 30, .34);
}
#contato.contact-commit-1adc .contact-form::after { display: none; }
#contato.contact-commit-1adc .contact-form-heading { border-bottom-color: var(--hairline); }
#contato.contact-commit-1adc .field input,
#contato.contact-commit-1adc .field select,
#contato.contact-commit-1adc .field textarea {
  border-color: var(--hairline);
  background: var(--paper);
  color: var(--ink);
}
#contato.contact-commit-1adc .field input:focus,
#contato.contact-commit-1adc .field select:focus,
#contato.contact-commit-1adc .field textarea:focus {
  border-color: var(--violet);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--tinta), .14);
}
#contato .contact-form-action .button-primary {
  border: 0;
  background: var(--grad-brand);
  color: #fff;
}
#contato .contact-form-action .button-primary:hover { background: var(--grad-glow); }
#contato .contact-form-action .button-arrow { border-left-color: rgba(255, 255, 255, .3); }

/* Texto da seção, que fica fora do cartão e portanto sobre o escuro. */
#contato .contact-intro-foot > p { color: rgba(255, 255, 255, .74); }
#contato .contact-assurances li { border-top-color: rgba(255, 255, 255, .26); color: rgba(255, 255, 255, .66); }
#contato .contact-assurances li::before { background: var(--magenta-bright); }

/* No escuro o gradiente do destaque perde legibilidade nas pontas; um tom
   sólido da paleta segura melhor o contraste. */
/* O destaque desta seção é pintado por -webkit-text-fill-color mais uma
   camada ::after sobreposta; as duas precisam clarear sobre o escuro. */
#contato.contact-commit-1adc h2 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#contato h2 em::after {
  color: var(--magenta-bright);
  -webkit-text-fill-color: var(--magenta-bright);
}
#contato h2 em::before { background: var(--grad-glow); }

/* A faixa de instrumentos do hero era desenhada para fundo escuro. */
.mz-hud-bottom { background: transparent; border-top: 1px solid var(--hairline); }

/* O cartão branco pede que os rótulos e o texto de apoio voltem ao escuro. */
#contato.contact-commit-1adc .contact-form-heading span,
#contato.contact-commit-1adc .contact-form-heading small { color: var(--ink-muted); }
#contato.contact-commit-1adc .contact-form-heading strong { color: var(--ink); }
#contato.contact-commit-1adc .field label { color: var(--ink-muted); }
#contato.contact-commit-1adc .field { border-bottom: 0; }

/* O rodapé tinha vários tons pensados para o fundo escuro; no claro todos
   precisam vir do azul-marinho. */
.site-footer.footer-rich .footer-col a,
.site-footer.footer-rich .footer-brand-block > p,
.site-footer.footer-rich .footer-contact li,
.site-footer.footer-rich .footer-bottom span { color: var(--ink-muted); }
.site-footer.footer-rich .footer-col h3 { color: var(--ink); }
.site-footer.footer-rich .footer-col a:hover { color: var(--violet); }
.site-footer.footer-rich .footer-top,
.site-footer.footer-rich .footer-bottom { border-color: var(--hairline); }

/* ──────────────────────────────── órbita do hero jurídico, agora no claro */

/* O conjunto foi desenhado em branco sobre fundo escuro. Os anéis e as
   legendas passam ao azul-marinho, e o núcleo — que carrega a marca — vira
   um disco branco, mantendo o mesmo desenho. */
.orbit-ring { border-color: rgba(2, 24, 44, .16); }
.orbit-ring span { color: var(--ink-muted); }
.orbit-ring::before { background: var(--violet); box-shadow: 0 0 18px rgba(var(--tinta), .5); }
.orbit-axis { background: linear-gradient(90deg, transparent, rgba(2, 24, 44, .14), transparent); }
.orbit-axis::after { background: linear-gradient(transparent, rgba(2, 24, 44, .1), transparent); }

.orbit-halo { background: radial-gradient(circle at 42% 36%, rgba(var(--tinta), .16), rgba(var(--tinta-5), .05) 46%, transparent 68%); }

.orbit-core {
  border: 1px solid var(--hairline);
  background: #fff;
  box-shadow: 0 24px 60px rgba(2, 24, 44, .14), inset 0 0 0 10px rgba(2, 24, 44, .02);
}
.orbit-core::before { border-color: rgba(var(--tinta), .22); }
.orbit-core small, .orbit-stage, .core-index { color: var(--ink-muted); }
.orbit-steps i { background: rgba(2, 24, 44, .14); }
.orbit-steps i.done { background: rgba(var(--tinta), .45); }
.orbit-steps i.on { background: var(--violet); box-shadow: 0 0 10px rgba(var(--tinta), .45); }

.orbit-signature { color: rgba(2, 24, 44, .34); }
.legal-orbit:hover .orbit-signature { color: rgba(2, 24, 44, .55); }
.orbit-signature::before, .orbit-signature::after { background: rgba(var(--tinta), .3); }

.orbit-note {
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .92);
  color: var(--ink-muted);
  box-shadow: var(--sombra-card);
}
.orbit-note b { color: var(--violet); }
.legal-orbit::after { background: radial-gradient(circle, rgba(var(--tinta), .1), transparent 62%); }

/* ──────────────────────────────────────────────── ajustes finais de acabamento */

/* A trama de caracteres do hero pesava demais sobre o fundo claro. */
.mz-ascii { opacity: .22; }

/* O balão do usuário e o selo do chat ficavam com texto marinho sobre roxo. */
.bv-user, .bv-badge { background: var(--violet); color: #fff; }
.bv-chat-launcher.bv-alerta::after, .bv-chat-launcher:focus-visible { border-color: var(--violet); }
.bv-opt:hover, .bv-opt:focus-visible { border-color: var(--violet-soft); background: rgba(var(--tinta), .18); }
.bv-msg-link { color: var(--magenta-bright); border-bottom-color: rgba(255, 79, 216, .5); }

/* Rolagem de progresso e link de atalho acompanham a marca. */
.page-progress i { background: var(--grad-brand); }
.skip-link { background: var(--ink); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   INTERSEÇÕES DE FUNDO
   As seções deixam de ser blocos de cor encostados uns nos outros. As
   escuras ganham profundidade indo do marinho ao azul elétrico no miolo, e
   as bordas de cada uma se desfazem no claro da seção vizinha, de modo que
   a passagem seja um degradê e não um corte.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --azul-fundo: #0a3f8f;
  --marinho-fundo: #01101f;
  /* Altura da zona em que uma seção se dissolve na outra. Em px, e não em
     porcentagem, para não variar com a altura da seção. */
  --costura: 130px;
}

/* ─────────────────────────────────────────── seções escuras com miolo azul */

/* O respiro extra é o que permite a costura existir sem invadir o conteúdo. */
#contato.contact-commit-1adc { padding: 190px 0 168px; }
.calculator { padding: 190px 0 176px; }

/* A costura não vai do claro direto ao marinho: passar por cinza no meio do
   caminho suja a emenda. O caminho é claro -> azul de céu -> azul elétrico
   -> marinho, e é o azul do meio que dá o brilho da passagem. */
#contato, .calculator {
  background:
    linear-gradient(to bottom,
      rgba(247, 249, 252, 1) 0,
      rgba(214, 232, 255, .96) calc(var(--costura) * .26),
      rgba(120, 180, 255, .78) calc(var(--costura) * .52),
      rgba(29, 111, 216, .42) calc(var(--costura) * .76),
      rgba(6, 42, 92, 0) var(--costura)),
    linear-gradient(to top,
      rgba(247, 249, 252, 1) 0,
      rgba(214, 232, 255, .96) calc(var(--costura) * .26),
      rgba(120, 180, 255, .78) calc(var(--costura) * .52),
      rgba(29, 111, 216, .42) calc(var(--costura) * .76),
      rgba(6, 42, 92, 0) var(--costura)),
    /* brilhos da marca, que dão o destaque */
    radial-gradient(900px 520px at 82% 26%, rgba(var(--tinta), .42), transparent 60%),
    radial-gradient(760px 460px at 16% 82%, rgba(var(--tinta-5), .24), transparent 58%),
    radial-gradient(1100px 600px at 50% 50%, rgba(var(--tinta-4), .2), transparent 62%),
    /* corpo: marinho nas pontas, azul elétrico no miolo */
    linear-gradient(180deg, var(--marinho-fundo) 0%, #062a5c 30%, var(--azul-fundo) 50%, #062a5c 70%, var(--marinho-fundo) 100%);
  background-color: var(--marinho-fundo);
}

/* O bloco "a gente cria" é um cartão, não uma faixa: fica sem costura, mas
   ganha a mesma passagem do marinho para o azul. */
.mz-products-custom {
  background:
    radial-gradient(680px 320px at 86% 18%, rgba(var(--tinta), .5), transparent 62%),
    radial-gradient(520px 300px at 6% 100%, rgba(var(--tinta-5), .3), transparent 60%),
    linear-gradient(120deg, var(--marinho-fundo), #0a3a7d 58%, #062a5c);
  background-color: var(--marinho-fundo);
}

/* ────────────────────────────────────── seções claras com lavagens móveis */

/* Sem isso as seções claras viram uma laje só. Cada uma recebe uma lavagem
   grande e suave em posição diferente, e as bordas ficam levemente tingidas,
   de modo que uma pareça continuar na outra. */
.mz-products {
  background:
    linear-gradient(to bottom, var(--paper) 0, transparent 220px),
    radial-gradient(900px 520px at 88% 12%, rgba(var(--tinta), .07), transparent 62%),
    var(--paper-bright);
}

.gallery {
  background:
    radial-gradient(820px 480px at 8% 20%, rgba(var(--tinta-3), .07), transparent 62%),
    radial-gradient(700px 420px at 94% 88%, rgba(var(--tinta-5), .05), transparent 60%),
    var(--paper-bright);
}

.mz-units {
  background:
    linear-gradient(to bottom, transparent 0, var(--paper) 180px),
    radial-gradient(900px 520px at 20% 8%, rgba(var(--tinta), .08), transparent 60%),
    radial-gradient(760px 460px at 90% 96%, rgba(var(--tinta-4), .08), transparent 58%),
    var(--paper);
}

.practice {
  background:
    linear-gradient(to bottom, var(--paper) 0, transparent 240px),
    radial-gradient(880px 500px at 90% 16%, rgba(var(--tinta), .06), transparent 62%),
    var(--paper-bright);
}

.faq {
  background:
    radial-gradient(820px 460px at 6% 24%, rgba(var(--tinta-3), .06), transparent 60%),
    linear-gradient(to bottom, transparent 0, var(--paper) 300px),
    var(--paper);
}

.cta-gallery {
  background:
    linear-gradient(to bottom, var(--paper) 0, transparent 260px),
    radial-gradient(860px 500px at 92% 78%, rgba(var(--tinta-5), .06), transparent 60%),
    var(--paper-bright);
}

.integration-section {
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(var(--tinta), .07), transparent 64%),
    var(--paper-bright);
}

/* O rodapé fecha a página com a mesma lavagem, sem emenda visível. */
.site-footer {
  background:
    linear-gradient(to bottom, var(--paper) 0, var(--paper-bright) 260px),
    var(--paper-bright);
}

/* Os heros já nascem com aurora; só a saída deles precisa encontrar a
   próxima seção. */
.hero, .mz-hero {
  background:
    linear-gradient(to top, var(--paper) 0, rgba(247, 249, 252, 0) 200px),
    radial-gradient(1100px 620px at 78% 22%, rgba(var(--tinta), .15), transparent 62%),
    radial-gradient(900px 520px at 96% 46%, rgba(var(--tinta-5), .11), transparent 60%),
    radial-gradient(760px 460px at 12% 4%, rgba(var(--tinta-3), .1), transparent 64%),
    var(--paper-bright);
}

@media (max-width: 760px) {
  /* Em tela estreita as seções são bem mais altas em proporção; a costura
     encurta para não comer metade da faixa escura. */
  :root { --costura: 90px; }
  #contato.contact-commit-1adc { padding: 140px 0 120px; }
  .calculator { padding: 140px 0 128px; }
}

/* Sobre o marinho o gradiente da marca começa escuro demais no azul; nas
   seções escuras o destaque usa a versão luminosa. */
.calculator h2 em, .mz-products-custom-copy strong em {
  background: var(--grad-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO DA MATRIZ — apresentação
   Saíram o console, a trama de caracteres, as estrelas, os cantos e a barra
   de instrumentos. Sobrou a chamada, centralizada sobre um azul claro, com
   o texto principal em preto e a cor concentrada nos destaques.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-hero {
  min-height: auto;
  padding: 190px 24px 130px;
  text-align: center;
  background:
    /* saída do hero encontrando a próxima seção */
    linear-gradient(to top, var(--paper-bright) 0, rgba(255, 255, 255, 0) 190px),
    /* destaques da paleta, difusos, sem desenho */
    radial-gradient(720px 420px at 16% 6%, rgba(var(--tinta-3), .16), transparent 62%),
    radial-gradient(760px 440px at 86% 14%, rgba(var(--tinta), .16), transparent 62%),
    radial-gradient(660px 400px at 62% 96%, rgba(var(--tinta-5), .12), transparent 60%),
    /* o azul de fundo */
    linear-gradient(180deg, #e6efff 0%, var(--paper-deep) 42%, #f2f6ff 100%);
  background-color: var(--paper-deep);
}

.mz-hero-inner { display: block; }

.mz-hero-copy {
  max-width: 880px;
  margin-inline: auto;
}

.hero-kicker { justify-content: center; color: var(--blue); }
.hero-kicker span { background: var(--grad-brand); }

.mz-hero h1 {
  margin-top: 22px;
  color: #000;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -.045em;
}

/* Os destaques continuam sendo o gradiente da marca — é a única cor forte
   sobre o texto preto. */
.mz-hero h1 em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mz-hero-lead {
  max-width: 640px;
  margin-inline: auto;
  color: var(--ink-muted);
}

.mz-hero-actions { justify-content: center; margin-top: 40px; }

@media (max-width: 760px) {
  .mz-hero { padding: 150px 22px 96px; }
  .mz-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .mz-hero-actions > * { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO DA MATRIZ — fundo no azul da logo
   O #02182C é o azul-marinho da marca, e é escuro: o título sai do preto
   para o branco, porque preto sobre ele fica ilegível. A cor vem de um
   elemento gráfico em roxo, atrás da chamada.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-hero {
  background:
    /* costura de saída: o marinho se desfaz no claro da próxima seção,
       passando pelo azul, como as demais emendas do site */
    linear-gradient(to top,
      rgba(247, 249, 252, 1) 0,
      rgba(214, 232, 255, .96) 34px,
      rgba(120, 180, 255, .72) 68px,
      rgba(29, 111, 216, .38) 100px,
      rgba(6, 42, 92, 0) 138px),
    linear-gradient(180deg, #02182c 0%, #041f3a 46%, #02182c 100%);
  background-color: #02182c;
}

.mz-hero h1 { color: #fff; }
.mz-hero-lead { color: rgba(255, 255, 255, .74); }
.hero-kicker { color: var(--violet-soft); }
.mz-hero .hero-atmosphere { opacity: .5; }

/* O secundário precisa se ver sobre o marinho. */
.mz-hero .mz-btn-ghost {
  border-color: rgba(255, 255, 255, .38);
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.mz-hero .mz-btn-ghost:hover {
  border-color: var(--violet-soft);
  background: rgba(var(--tinta-2), .16);
  color: #fff;
}

/* ───────────────────────────────────────────── o elemento gráfico em roxo */

/* Uma aurora de roxos atrás da chamada: três massas difusas e um arco fino
   que as atravessa. Sem grade, sem HUD — só luz e curva. */
.mz-aurora {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mz-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.mz-aurora .a {
  left: 50%; top: 34%;
  width: min(1120px, 96vw); height: min(620px, 62vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--tinta), .55), rgba(var(--tinta), 0) 72%);
  filter: blur(58px);
  animation: aurora-respira 15s ease-in-out infinite;
}

.mz-aurora .b {
  left: 27%; top: 24%;
  width: min(560px, 62vw); height: min(560px, 62vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--tinta-2), .5), rgba(var(--tinta-2), 0) 70%);
  filter: blur(52px);
  animation: aurora-deriva-a 19s ease-in-out infinite;
}

.mz-aurora .c {
  left: 74%; top: 62%;
  width: min(520px, 58vw); height: min(520px, 58vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--tinta-2), .42), rgba(var(--tinta), 0) 70%);
  filter: blur(56px);
  animation: aurora-deriva-b 23s ease-in-out infinite;
}

/* O arco é um anel recortado por máscara: fica uma linha de luz curva, não
   um círculo fechado. */
.mz-aurora .arco {
  left: 50%; top: 50%;
  width: min(1180px, 104vw); height: min(1180px, 104vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    rgba(var(--tinta-2), 0) 0deg,
    rgba(var(--tinta-2), .9) 42deg,
    rgba(var(--tinta), .55) 96deg,
    rgba(var(--tinta), 0) 150deg,
    rgba(var(--tinta), 0) 360deg);
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .85;
  animation: aurora-gira 46s linear infinite;
}

@keyframes aurora-respira {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.09); opacity: .82; }
}
@keyframes aurora-deriva-a {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  50% { transform: translate(-50%, -50%) translate(44px, 34px); }
}
@keyframes aurora-deriva-b {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  50% { transform: translate(-50%, -50%) translate(-52px, -30px); }
}
@keyframes aurora-gira {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* O conteúdo fica acima da aurora. */
.mz-hero-inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .mz-aurora i { animation: none; }
}

@media (max-width: 760px) {
  .mz-aurora .a { width: 130vw; height: 70vw; filter: blur(46px); }
  .mz-aurora .arco { width: 150vw; height: 150vw; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO DA MATRIZ — de volta ao fundo claro
   O azul-marinho sai e volta o azul claro da paleta, com o título em preto.
   O elemento gráfico em roxo continua, mas reajustado: sobre claro os mesmos
   valores de alfa que funcionavam no escuro viram manchas. Aqui ele entra
   como a lavagem suave que colore o fundo, não como luz sobre o escuro.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-hero {
  background:
    /* saída encontrando o branco da seção de produtos */
    linear-gradient(to top, var(--paper-bright) 0, rgba(255, 255, 255, 0) 190px),
    linear-gradient(180deg, #e6efff 0%, var(--paper-deep) 42%, #f2f6ff 100%);
  background-color: var(--paper-deep);
}

.mz-hero h1 { color: #000; }
.mz-hero-lead { color: var(--ink-muted); }
.hero-kicker { color: var(--blue); }
.hero-kicker span { background: var(--grad-brand); }

/* O secundário volta ao acabamento claro dos demais botões do site. */
.mz-hero .mz-btn-ghost {
  border: 1px solid var(--hairline);
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: var(--sombra-card);
}
.mz-hero .mz-btn-ghost:hover {
  border-color: rgba(var(--tinta), .45);
  background: var(--paper-bright);
  color: var(--violet);
}

/* ─────────────────────────────────── a aurora, calibrada para fundo claro */

.mz-aurora .a {
  background: radial-gradient(closest-side, rgba(var(--tinta), .2), rgba(var(--tinta), 0) 72%);
  filter: blur(64px);
}
.mz-aurora .b {
  background: radial-gradient(closest-side, rgba(var(--tinta-2), .17), rgba(var(--tinta-2), 0) 70%);
  filter: blur(58px);
}
.mz-aurora .c {
  background: radial-gradient(closest-side, rgba(var(--tinta-2), .16), rgba(var(--tinta), 0) 70%);
  filter: blur(60px);
}

/* O arco fica só como um traço de contorno; no claro ele não pode brilhar. */
.mz-aurora .arco {
  background: conic-gradient(from 200deg,
    rgba(var(--tinta), 0) 0deg,
    rgba(var(--tinta), .34) 42deg,
    rgba(var(--tinta-2), .2) 96deg,
    rgba(var(--tinta-2), 0) 150deg,
    rgba(var(--tinta-2), 0) 360deg);
  opacity: .55;
}

/* ══════════════════════════════════════════════════════════════════════════
   LINHAS CORRENDO PELO HERO
   As mesmas 36 curvas do componente React, portadas para SVG e CSS puros —
   o site na raiz não tem React. O traço é o gradiente da marca, e o
   movimento vem de stroke-dashoffset em vez de biblioteca de animação: com
   pathLength="1" o comprimento de cada curva vira 1, então o tracejado e o
   deslocamento andam na mesma escala e o laço fecha sem emenda.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-paths {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mz-paths svg { width: 100%; height: 100%; display: block; }

.mz-paths path {
  fill: none;
  stroke: url(#mz-paths-cor);
  /* 0.3 de traço + 0.7 de vão = um padrão inteiro por volta */
  stroke-dasharray: .3 .7;
  stroke-linecap: round;
  animation:
    mz-paths-correr var(--dur, 24s) linear infinite,
    mz-paths-pulsar var(--dur, 24s) ease-in-out infinite;
  animation-delay: var(--atraso, 0s), var(--atraso, 0s);
}

@keyframes mz-paths-correr {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

@keyframes mz-paths-pulsar {
  0%, 100% { opacity: .3; }
  50% { opacity: .62; }
}

/* A aurora fica por baixo das linhas, como lavagem de fundo. */
.mz-aurora { z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento as curvas aparecem inteiras, em opacidade fixa. */
  .mz-paths path {
    animation: none;
    stroke-dasharray: none;
    opacity: .34;
  }
}

@media (max-width: 760px) {
  .mz-paths { opacity: .8; }
}

/* As curvas cruzavam o parágrafo e disputavam a leitura. Uma máscara radial
   abre um vazio no meio: elas seguem fortes nas bordas e somem onde o texto
   está. O gradiente da máscara é de alfa, então basta ir do transparente no
   centro ao opaco nas pontas. */
.mz-paths {
  -webkit-mask-image: radial-gradient(64% 58% at 50% 45%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .18) 48%,
    rgba(0, 0, 0, .72) 72%,
    rgba(0, 0, 0, 1) 88%);
  mask-image: radial-gradient(64% 58% at 50% 45%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .18) 48%,
    rgba(0, 0, 0, .72) 72%,
    rgba(0, 0, 0, 1) 88%);
}

@keyframes mz-paths-pulsar {
  0%, 100% { opacity: .28; }
  50% { opacity: .55; }
}

@media (max-width: 760px) {
  /* A coluna de texto ocupa quase toda a largura, então o vazio da máscara
     precisa ser mais largo do que alto: as curvas ficam nos cantos de cima e
     de baixo, e o meio da tela permanece limpo para a leitura. */
  .mz-paths {
    opacity: .7;
    -webkit-mask-image: radial-gradient(128% 50% at 50% 47%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .14) 46%,
      rgba(0, 0, 0, .7) 74%,
      rgba(0, 0, 0, 1) 92%);
    mask-image: radial-gradient(128% 50% at 50% 47%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .14) 46%,
      rgba(0, 0, 0, .7) 74%,
      rgba(0, 0, 0, 1) 92%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREÇÃO DE DESEMPENHO DO HERO
   O hero acumulou seis camadas animadas: cinco com filter: blur() entre 58 e
   72px e um anel cônico mascarado girando sobre 1,4 milhão de px². Animar
   transform num elemento borrado obriga o navegador a refazer o blur a cada
   quadro, e o conjunto derrubou a página para 4 fps, com travadas de meio
   segundo — daí o fundo piscar e o conteúdo sumir.

   A luz roxa continua, mas parada: um degradê radial já nasce suave e não
   precisa de filtro nem de animação para parecer difuso.
   ══════════════════════════════════════════════════════════════════════════ */

/* As massas borradas e o anel giratório saem de cena. */
.mz-aurora { display: none; }
.mz-hero .hero-atmosphere { display: none; }

/* A mesma luz, agora assada no fundo da seção — custo zero por quadro. */
.mz-hero {
  background:
    linear-gradient(to top, var(--paper-bright) 0, rgba(255, 255, 255, 0) 190px),
    radial-gradient(760px 460px at 50% 34%, rgba(var(--tinta), .2), transparent 68%),
    radial-gradient(560px 520px at 27% 24%, rgba(var(--tinta-2), .16), transparent 66%),
    radial-gradient(520px 480px at 74% 62%, rgba(var(--tinta-2), .15), transparent 66%),
    linear-gradient(180deg, #e6efff 0%, var(--paper-deep) 42%, #f2f6ff 100%);
  background-color: var(--paper-deep);
}

/* As linhas ficam, mas com uma única propriedade animada em vez de duas. */
.mz-paths path {
  animation: mz-paths-correr var(--dur, 24s) linear infinite;
  animation-delay: var(--atraso, 0s);
  opacity: .42;
}

/* As curvas ficam paradas. Medido: com a animação de traço nos 36 caminhos o
   hero fica em 27 fps, com metade deles em 39, e só sem animação alguma
   chega a 60. Animação de stroke em SVG roda na CPU e não pode ser
   acelerada; animar transform no SVG também não resolve, porque escalar ou
   mover vetor obriga a rasterizar de novo. O desenho é o mesmo — o que sai é
   o movimento, que não vale um site que pisca. */
.mz-paths path {
  animation: none;
  stroke-dasharray: none;
  opacity: .32;
}

/* O hero jurídico tem as mesmas duas massas borradas de 72px em movimento, e
   elas o derrubavam para 10 fps. A luz continua; o que sai é a deriva — e o
   seletor precisa casar o :nth-child da regra original para vencê-la. */
.hero-atmosphere i:nth-child(1),
.hero-atmosphere i:nth-child(2) { animation: none; will-change: auto; }

/* Os anéis da órbita e as notas continuam girando: são transform em áreas
   pequenas e sem filtro, que o compositor resolve sozinho. */

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMENTO NAS LINHAS, DENTRO DO ORÇAMENTO DE QUADRO
   Animar o traço dentro do SVG custa a repintura da camada inteira a cada
   quadro — medido, três curvas custam o mesmo que trinta e seis, e ambos
   travam em ~27fps. O movimento sai então de dentro do SVG: as curvas ficam
   paradas e uma faixa de luz atravessa por cima, com o gradiente da marca.
   É uma única camada, uma única propriedade, composta pela GPU.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-sweep {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Isola a camada: o que se mexe aqui dentro não convida o resto da página
     para a conta. */
  contain: strict;
}

.mz-sweep i {
  position: absolute;
  inset: 0;
  display: block;
  /* A cor muda porque a faixa carrega o gradiente inteiro da marca: onde ela
     passa, as curvas viram azul, depois roxo, depois magenta. */
  background: linear-gradient(108deg,
    transparent 41%,
    rgba(var(--tinta-4), .1) 45%,
    rgba(var(--tinta), .17) 48.5%,
    rgba(var(--tinta-2), .16) 51.5%,
    rgba(var(--tinta-5), .1) 55%,
    transparent 59%);
  will-change: transform;
  transform: translate3d(-72%, 0, 0);
  animation: mz-varre 9s linear infinite;
}

@keyframes mz-varre {
  from { transform: translate3d(-72%, 0, 0); }
  to { transform: translate3d(72%, 0, 0); }
}

/* Fora da tela a faixa para: abaixo do hero ela não custa nada. */
.mz-hero[data-fora] .mz-sweep i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mz-sweep i { animation: none; transform: translate3d(0, 0, 0); opacity: .5; }
}

/* A marcação da aurora saiu; a regra que a escondia não tem mais alvo. */

/* ══════════════════════════════════════════════════════════════════════════
   LISTA DE DÚVIDAS
   Era uma pilha de caixas brancas encostadas, com o número solto a quase
   cem pixels da pergunta e o sinal de mais isolado na outra ponta. Vira uma
   lista de cartões com ar entre eles, o número junto do texto e o botão de
   abrir com forma própria. Vale para a matriz e para o jurídico.
   ══════════════════════════════════════════════════════════════════════════ */

.faq-list {
  border-top: 0;
  display: grid;
  gap: 10px;
}

.faq details {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper-bright);
  box-shadow: 0 1px 2px rgba(2, 24, 44, .03);
  transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.faq details:hover { border-color: rgba(var(--tinta), .3); box-shadow: var(--sombra-card); }

/* Aberto, o cartão ganha um fio da marca no topo e sobe um pouco. */
.faq details[open] {
  border-color: rgba(var(--tinta), .34);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

.faq details[open]::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--grad-brand);
}

/* O número passa a encostar na pergunta, e o botão ganha forma. */
.faq summary {
  min-height: 0;
  grid-template-columns: 24px 1fr 34px;
  gap: 0 16px;
  padding: 21px 22px;
  font-size: 15.5px;
  font-weight: 540;
  color: var(--ink);
  transition: color .2s ease;
}

.faq summary:hover { color: var(--violet); }
.faq summary:focus-visible { outline: 2px solid var(--violet); outline-offset: -3px; border-radius: 13px; }

.faq summary > span {
  color: var(--blue);
  font: 10px/1 var(--mono);
  letter-spacing: .04em;
}

/* O sinal de mais vira um botão redondo que se preenche ao abrir. */
.faq summary i {
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  transition: background-color .25s ease, border-color .25s ease;
}

.faq summary i::before,
.faq summary i::after {
  left: 50%;
  top: 50%;
  width: 13px;
  margin: -.5px 0 0 -6.5px;
  background: var(--ink);
}

.faq details:hover summary i { border-color: rgba(var(--tinta), .38); background: var(--paper-deep); }

.faq details[open] summary i {
  border-color: transparent;
  background: var(--grad-brand);
}
.faq details[open] summary i::before,
.faq details[open] summary i::after { background: #fff; }

/* A resposta alinha com a pergunta e ganha um fio separando. */
.faq details p {
  max-width: 640px;
  margin: 0 22px 22px 62px;
  padding: 16px 0 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 860px) {
  .faq summary { grid-template-columns: 22px 1fr 30px; gap: 0 12px; padding: 18px 16px; font-size: 15px; }
  .faq summary i { width: 30px; height: 30px; }
  .faq details p { margin: 0 16px 18px 50px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEM COSTURA ENTRE AS SEÇÕES
   As passagens em degradê saem: cada seção volta a ter borda definida, com
   a cor começando e terminando nela mesma. O respiro vertical extra também
   volta ao normal, porque ele só existia para a costura caber sem invadir o
   conteúdo.
   ══════════════════════════════════════════════════════════════════════════ */

#contato.contact-commit-1adc { padding: 116px 0 104px; }
.calculator { padding: 120px 0 112px; }

#contato, .calculator {
  background:
    radial-gradient(900px 520px at 82% 26%, rgba(var(--tinta), .42), transparent 60%),
    radial-gradient(760px 460px at 16% 82%, rgba(var(--tinta-5), .24), transparent 58%),
    radial-gradient(1100px 600px at 50% 50%, rgba(var(--tinta-4), .2), transparent 62%),
    linear-gradient(180deg, var(--marinho-fundo) 0%, #062a5c 30%, var(--azul-fundo) 50%, #062a5c 70%, var(--marinho-fundo) 100%);
  background-color: var(--marinho-fundo);
}

/* As seções claras mantêm a lavagem de cor, sem o sangramento nas bordas. */
.mz-products {
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(var(--tinta), .07), transparent 62%),
    var(--paper-bright);
}

.mz-units {
  background:
    radial-gradient(900px 520px at 20% 8%, rgba(var(--tinta), .08), transparent 60%),
    radial-gradient(760px 460px at 90% 96%, rgba(var(--tinta-4), .08), transparent 58%),
    var(--paper);
}

.practice {
  background:
    radial-gradient(880px 500px at 90% 16%, rgba(var(--tinta), .06), transparent 62%),
    var(--paper-bright);
}

.faq {
  background:
    radial-gradient(820px 460px at 6% 24%, rgba(var(--tinta-3), .06), transparent 60%),
    var(--paper);
}

.cta-gallery {
  background:
    radial-gradient(860px 500px at 92% 78%, rgba(var(--tinta-5), .06), transparent 60%),
    var(--paper-bright);
}

.site-footer { background: var(--paper-bright); }

.mz-hero {
  background:
    radial-gradient(760px 460px at 50% 34%, rgba(var(--tinta), .2), transparent 68%),
    radial-gradient(560px 520px at 27% 24%, rgba(var(--tinta-2), .16), transparent 66%),
    radial-gradient(520px 480px at 74% 62%, rgba(var(--tinta-2), .15), transparent 66%),
    linear-gradient(180deg, #e6efff 0%, var(--paper-deep) 42%, #f2f6ff 100%);
  background-color: var(--paper-deep);
}

@media (max-width: 760px) {
  #contato.contact-commit-1adc { padding: 88px 0 80px; }
  .calculator { padding: 92px 0 84px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEÇÃO DE UNIDADES
   O rótulo estava em branco a 48% de opacidade, herdado de quando a seção
   era escura — sobre o claro ele sumia. Os cartões ganham um ícone e um
   halo próprio, e a grade passa a reagir ao ponteiro: ao apontar um deles,
   o outro recua e desfoca.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-units .section-label.light { color: var(--violet); }
.mz-units .section-label.light span { border-color: var(--hairline); color: var(--blue); }
.mz-units .section-head { margin-bottom: 34px; }

.mz-units-grid { gap: 20px; }

.mz-unit {
  position: relative;
  overflow: hidden;
  padding: 32px 30px 30px;
  border-radius: 18px;
}

/* Halo de canto, que dá profundidade sem custo por quadro. */
.mz-unit::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -12%;
  top: -28%;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--tinta), .13), transparent 68%);
  transition: opacity .4s ease;
}
.mz-unit.is-branch::after { background: radial-gradient(circle, rgba(var(--tinta-5), .13), transparent 68%); }
.mz-unit > * { position: relative; z-index: 1; }

.mz-unit-ic {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--tinta), .22);
  border-radius: 13px;
  background: var(--paper-deep);
  color: var(--violet);
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.mz-unit-ic svg { width: 23px; height: 23px; }
.mz-unit.is-branch .mz-unit-ic { border-color: rgba(var(--tinta-5), .24); color: var(--magenta); }

.mz-unit-head { gap: 7px; margin-bottom: 14px; }
.mz-unit-head small { color: var(--blue); font-size: 8px; letter-spacing: .16em; }
.mz-unit.is-branch .mz-unit-head small { color: var(--magenta); }
.mz-unit p { font-size: 14.5px; line-height: 1.68; }

/* O cartão empurra o rodapé para baixo, para os dois terminarem alinhados. */
.mz-unit .button, .mz-unit-tag { margin-top: auto; }
.mz-unit .button { margin-top: auto; padding-top: 0; }
.mz-unit-tag {
  margin-top: auto;
  padding: 9px 15px;
  border-color: var(--hairline);
  background: var(--paper-bright);
  color: var(--ink-muted);
}

/* ─────────────────────────────── ao apontar um, o outro recua e desfoca */

@media (hover: hover) {
  .mz-units-grid:hover .mz-unit {
    opacity: .5;
    filter: blur(2.5px);
    transform: scale(.985);
  }
  .mz-units-grid .mz-unit:hover {
    opacity: 1;
    filter: none;
    transform: translateY(-5px);
    border-color: rgba(var(--tinta), .4);
    box-shadow: var(--sombra-alta);
  }
  .mz-units-grid .mz-unit.is-branch:hover { border-color: rgba(var(--tinta-5), .42); }
  .mz-units-grid:hover .mz-unit::after { opacity: .4; }
  .mz-units-grid .mz-unit:hover::after { opacity: 1; }
  .mz-units-grid .mz-unit:hover .mz-unit-ic { background: #fff; border-color: currentColor; }

  .mz-unit { transition: opacity .4s ease, filter .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .4s ease; }
}

/* Quem chega pelo teclado recebe o mesmo destaque. */
.mz-units-grid .mz-unit:focus-within {
  opacity: 1;
  filter: none;
  border-color: rgba(var(--tinta), .4);
}

@media (prefers-reduced-motion: reduce) {
  .mz-units-grid:hover .mz-unit { opacity: 1; filter: none; transform: none; }
  .mz-units-grid .mz-unit:hover { transform: none; }
  .mz-unit { transition: border-color .2s ease; }
}

@media (max-width: 900px) {
  .mz-unit { padding: 26px 22px 24px; }
  .mz-unit-ic { width: 42px; height: 42px; margin-bottom: 16px; }
}

/* O margin-top: auto empurra o rodapé do cartão para baixo, mas quando o
   texto é longo os dois encostam. A folga mínima vem do parágrafo. */
.mz-unit p { margin-bottom: 26px; }

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTES PEDIDOS
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Navegação: um só padrão tipográfico para os quatro itens ─────────── */

/* O link do Jurídico só se distinguia pela cor, mas herdava métrica própria.
   Agora os quatro compartilham família, tamanho, peso e espaçamento; o que
   muda é apenas a cor e a seta. */
.site-header nav a,
.site-header nav a.nav-external {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  padding: 10px 12px;
}
.site-header nav a.nav-external span { font-size: 11px; margin-left: 3px; }

/* ─── Hero: azul-marinho da logo, texto cinza ──────────────────────────── */

.mz-hero {
  background:
    radial-gradient(820px 500px at 50% 32%, rgba(var(--tinta), .3), transparent 66%),
    radial-gradient(600px 540px at 24% 22%, rgba(var(--tinta-2), .22), transparent 64%),
    radial-gradient(560px 500px at 78% 66%, rgba(var(--tinta-5), .16), transparent 64%),
    linear-gradient(180deg, var(--marinho-fundo) 0%, #041f3a 48%, var(--marinho-fundo) 100%);
  background-color: var(--marinho-fundo);
}

/* O cinza de tela, não o branco: destaca sem estourar sobre o marinho, e a
   letra levemente mais fechada dá a leitura técnica. */
.mz-hero h1 {
  color: #ccd7e6;
  letter-spacing: -.04em;
}
.mz-hero-lead { color: rgba(204, 215, 230, .62); }
.hero-kicker { color: var(--violet-soft); }

.mz-hero .mz-btn-ghost {
  border: 1px solid rgba(204, 215, 230, .32);
  background: transparent;
  color: #ccd7e6;
  box-shadow: none;
}
.mz-hero .mz-btn-ghost:hover {
  border-color: var(--violet-soft);
  background: rgba(var(--tinta-2), .16);
  color: #fff;
}

/* As curvas precisam clarear para aparecer sobre o marinho. */
.mz-paths path { opacity: .5; }
.mz-sweep i {
  background: linear-gradient(108deg,
    transparent 41%,
    rgba(var(--tinta-4), .16) 45%,
    rgba(var(--tinta), .26) 48.5%,
    rgba(var(--tinta-2), .24) 51.5%,
    rgba(var(--tinta-5), .16) 55%,
    transparent 59%);
  /* Mais rápido, como pedido: de 9s para 5s por travessia. */
  animation-duration: 5s;
}

/* ─── Calculadora do jurídico: gradiente no ambiente ───────────────────── */

.calculator-shell {
  border-color: rgba(255, 255, 255, .14);
  background:
    radial-gradient(680px 400px at 88% 8%, rgba(var(--tinta), .22), transparent 62%),
    radial-gradient(520px 340px at 6% 96%, rgba(var(--tinta-5), .14), transparent 60%),
    linear-gradient(142deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 58%, rgba(255, 255, 255, .04));
  box-shadow: 0 34px 90px rgba(1, 12, 30, .4);
}

.calculator-result {
  background:
    radial-gradient(460px 320px at 70% 0%, rgba(var(--tinta-2), .26), transparent 64%),
    linear-gradient(158deg, rgba(var(--tinta), .16), rgba(2, 24, 44, .3));
}
.calculator-result::before { border-color: rgba(var(--tinta-2), .26); }
.calculator-progress i { background: var(--grad-glow); }

/* ─── Chamada do hero: o parágrafo em gradiente ────────────────────────── */

/* O gradiente vai de cinza claro a um cinza azulado, não às cores da marca:
   num parágrafo inteiro o gradiente colorido come a legibilidade. Assim ele
   ganha o brilho técnico e mantém contraste em toda a extensão. */
.mz-hero-lead {
  /* Na horizontal, quatro linhas centralizadas caem todas no meio da rampa e
     o gradiente some. Na diagonal fechada cada linha pega um trecho
     diferente, que é o que torna o efeito visível de fato. */
  background: linear-gradient(163deg, #f2f7ff 0%, #c3d5f4 34%, #8fa8e0 66%, #b07cf7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: .008em;
}

/* Sem suporte a recorte de fundo em texto, o parágrafo volta ao cinza sólido
   em vez de sumir. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mz-hero-lead { color: #ccd7e6; -webkit-text-fill-color: #ccd7e6; }
}

/* ─── Hero no azul da logo, e não no roxo ──────────────────────────────── */

/* As lavagens roxa e magenta dominavam e o conjunto lia arroxeado. O tom
   base passa a ser o #02182C da logo, e as luzes vêm do azul elétrico e do
   azul luminoso; o roxo fica como sotaque, não como cor do fundo. */
.mz-hero {
  background:
    radial-gradient(900px 540px at 50% 30%, rgba(var(--tinta-3), .34), transparent 66%),
    radial-gradient(640px 560px at 20% 20%, rgba(var(--tinta-4), .2), transparent 64%),
    radial-gradient(600px 520px at 82% 70%, rgba(var(--tinta), .16), transparent 64%),
    linear-gradient(180deg, #02182c 0%, #06305c 46%, #02182c 100%);
  background-color: #02182c;
}

/* A faixa de luz acompanha: mais azul, com o roxo só na crista. */
.mz-sweep i {
  background: linear-gradient(108deg,
    transparent 41%,
    rgba(var(--tinta-4), .22) 45%,
    rgba(var(--tinta-3), .3) 48.5%,
    rgba(var(--tinta), .22) 51.5%,
    rgba(var(--tinta-4), .16) 55%,
    transparent 59%);
}

/* E o parágrafo fecha no azul, em vez de puxar para o violeta. O recorte
   precisa ser redeclarado: o atalho background zera background-clip, e sem
   ele o gradiente pinta a caixa inteira em vez das letras. */
.mz-hero-lead {
  background: linear-gradient(163deg, #f2f7ff 0%, #c3d9f8 34%, #8fb4e8 66%, #6f9ff0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ─── Submenu de produtos no cabeçalho ─────────────────────────────────── */

/* Cada produto ganha a própria página, e o topo precisa dar acesso a elas sem
   virar uma fileira interminável de abas. "Produtos" passa a abrir uma lista.
   Fica aqui, e não em produto.css, porque o cabeçalho é o mesmo em todas as
   páginas — inclusive nas que não são de produto. */

.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop-trigger i {
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 264px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 50px rgba(2, 24, 44, .14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.site-header nav .nav-drop-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink-muted);
  font-size: 13px;
}
.site-header nav .nav-drop-menu a::after { display: none; }
.site-header nav .nav-drop-menu a:hover { background: var(--paper); color: var(--ink); }
.site-header nav .nav-drop-menu a.is-here { background: rgba(var(--tinta), .09); color: var(--violet); font-weight: 560; }

/* Abre no ponteiro e também no teclado — daí o :focus-within junto. */
@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-drop:hover .nav-drop-trigger i { transform: translateY(1px) rotate(-135deg); }
}
.nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* No menu empilhado do celular o submenu deixa de flutuar e vira lista recuada. */
@media (max-width: 900px) {
  .nav-drop { display: block; }
  .nav-drop-trigger i { display: none; }
  .nav-drop-menu {
    position: static;
    width: auto;
    padding: 0 0 8px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-header nav .nav-drop-menu a { padding: 10px; border-bottom: 0; color: rgba(255, 255, 255, .6); font-size: 12.5px; }
  .site-header nav .nav-drop-menu a:hover,
  .site-header nav .nav-drop-menu a.is-here { background: rgba(255, 255, 255, .07); color: #fff; }
}

/* ─── Produto que já tem página própria ────────────────────────────────── */

/* Enquanto só um produto tem página, o card precisa dizer isso sem quebrar o
   alinhamento dos outros cinco: o link entra no fim, empurrado para a base. */
.mz-products-list li.has-page { display: flex; flex-direction: column; }
.mz-products-list li.has-page p { flex: 1; }
.mz-product-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--violet);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: -.005em;
}
.mz-product-link span { transition: transform .25s ease; }
.mz-products-list li.has-page:hover .mz-product-link span { transform: translateX(3px); }

/* ─── A escada tipográfica dos cartões de produto ──────────────────────────

   Os seis cartões vinham em 7 / 15 / 12 px. O 7px do rótulo é menor do que o
   piso que este arquivo aplica no celular mais abaixo — ou seja, a seção
   estava mais legível no telefone do que no desktop, o que é o contrário do
   que se espera. E entre 15 e 12 há pouca distância: título e parágrafo
   pesavam quase igual, e o cartão lia como um bloco só.

   A escada nova é 10 / 16 / 13, com o entrelinhamento do texto subindo junto.
   O rótulo continua se distinguindo pelo espaçamento largo em caixa alta, não
   pelo tamanho, então ele cresce sem passar a competir com o título.

   Isto vale no desktop; o piso de 11px do celular continua valendo lá e é
   maior que o 10 daqui, de propósito. */
.mz-products-list li small {
  font-size: 10px;
  letter-spacing: .18em;
}
.mz-products-list li b {
  font-size: 16px;
  line-height: 1.3;
}
.mz-products-list li p {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.62;
}
.mz-product-link { font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   PISO DE LEGIBILIDADE NO CELULAR

   Medido em iPhone 13: 31 rótulos de formulário a 9px, os selos dos cartões
   de produto a 7px, a assinatura da marca e o kicker do hero a 8px. Abaixo de
   11px o texto para de ser lido por quem tem mais de 45 anos — que é
   exatamente quem assina contrato de tecnologia. O Google também trata fonte
   miúda como problema de usabilidade mobile.

   O piso vale só no celular: no desktop os mesmos rótulos ficam confortáveis,
   e mexer lá mudaria um desenho já aprovado. O letter-spacing alto continua
   sendo o que diferencia o rótulo do texto corrido, então nada se perde ao
   subir dois pontos.

   Ficam de fora, de propósito, as maquetes — o painel do Power BI e o celular
   do chatbot. Ali o texto é proporção de uma ilustração feita em HTML, como
   seria numa captura de tela; subir a fonte estouraria o desenho. O painel já
   é aria-hidden e não chega a leitor de tela.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .brand small,
  .hero-kicker,
  .section-label,
  /* Com `li` para empatar em peso com a escada tipográfica dos cartões, logo
     acima: sem isso a regra de 10px do desktop vence esta, porque peso de
     seletor não se importa com media query. */
  .mz-products-list li small,
  .mz-products-list small,
  .mz-products-custom-copy small,
  .mz-metodo-lista small,
  .mz-unit-tag,
  .mz-unit-head small,
  .scroll-cue,
  .pd-crumbs,
  .pd-crumbs a,
  .pd-crumbs b,
  .pd-hero-badge,
  .pd-caso-quando,
  .faq details summary span,
  .footer-rich .footer-col h3,
  .mz-fale-campos label,
  .lex-form-campos label,
  .pd-fale-form label,
  .mz-fale-enviar,
  .lex-form-enviar,
  .footer-col a,
  .footer-bottom,
  .footer-bottom span { font-size: 11px; }

  /* O chat é montado pelo JS e tem os próprios rótulos. */
  .bv-lead-campo span,
  .bv-lead-enviar,
  .bv-chat-wa,
  .bv-chat-title span { font-size: 11px; }

  /* Alvo de toque: a WCAG 2.5.8 pede 24x24 e o próprio Google recomenda 44.
     Os links de navegação e rodapé vinham com 33 a 34px de altura — erra-se o
     alvo e volta-se para a página anterior. O padding cresce sem empurrar o
     layout porque a altura já era próxima. */
  .site-header nav a,
  .footer-col a,
  .nav-drop-menu a,
  .mz-product-link,
  .footer-legal {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* A trilha tinha 12px de altura: errar o alvo devolve a pessoa para a home
     logo depois de ela ter chegado na pagina certa. Fica aqui, e nao no
     produto.css, porque a pagina de privacidade tambem tem trilha e nao
     carrega aquela folha — foi assim que a regra falhou da primeira vez. */
  .pd-crumbs a,
  .pd-crumbs b { display: inline-flex; align-items: center; min-height: 32px; }

  .footer-social a { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA LEGAL
   Texto corrido, uma coluna, medida de leitura curta. É documento para ser
   lido, não página de venda — nenhum cartão, nenhuma chamada, nenhum realce.
   ══════════════════════════════════════════════════════════════════════════ */
.pd-legal { padding: 128px 0 96px; background: var(--paper-bright); }
.pd-legal .section-frame { max-width: 760px; }

.pd-legal .pd-crumbs { margin-bottom: 32px; }

.pd-legal h1 {
  margin-bottom: 20px;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: var(--ink);
}
.pd-legal-lead { color: var(--ink-muted); font-size: 17px; line-height: 1.7; }
.pd-legal-data {
  margin-top: 18px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-muted);
  font: 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pd-legal h2 {
  margin: 44px 0 14px;
  font-size: 22px;
  font-weight: 660;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}
.pd-legal h3 {
  margin: 28px 0 10px;
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -.012em;
  color: var(--ink);
  text-transform: none;
}
.pd-legal p { margin-bottom: 14px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.pd-legal ul { margin: 0 0 14px; padding-left: 1.2em; }
.pd-legal li { margin-bottom: 8px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.7; }
.pd-legal strong { color: var(--ink); font-weight: 620; }
.pd-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pd-legal a:hover { text-decoration-thickness: 2px; }

@media (max-width: 620px) {
  .pd-legal { padding: 104px 0 68px; }
  .pd-legal h2 { font-size: 20px; }
}

/* O link da política no rodapé: discreto de propósito — é obrigação legal e
   ponto de consulta, não chamada. */
.footer-legal { color: inherit; opacity: .72; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal:hover { opacity: 1; }

/* A linha de registro do rodapé: razão social mais CNPJ. É a linha mais longa
   do site inteiro em caixa alta — 66 caracteres — e o rodapé é mono com
   letter-spacing largo e line-height 1, herdados do atalho `font:`. No celular
   ela estourava a largura e as linhas quebradas se encostavam.

   Aqui o tracking afrouxa, a altura de linha volta e a quebra passa a poder
   acontecer dentro da sequência — sem isso o CNPJ, que não tem espaço, empurra
   a linha para fora da tela. */
.footer-registro { line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .footer-registro { letter-spacing: .04em; }
}


/* BREVES_NAV_HINTS_V1 — ajuda contextual discreta no menu principal. */
.site-header #main-nav > a.has-nav-hint {
  position: relative;
}

@media (min-width: 901px) {
  .site-header #main-nav > a.has-nav-hint::before {
    content: attr(data-nav-hint);
    position: absolute;
    z-index: 40;
    top: calc(100% + 14px);
    left: 50%;
    width: 224px;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--paper-bright);
    color: var(--ink-soft);
    box-shadow: 0 14px 34px rgba(var(--tinta), .12);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  }

  .site-header #main-nav > a.has-nav-hint:hover::before,
  .site-header #main-nav > a.has-nav-hint:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .site-header #main-nav > a.has-nav-hint.nav-external::before {
    right: 0;
    left: auto;
    transform: translateY(-4px);
  }

  .site-header #main-nav > a.has-nav-hint.nav-external:hover::before,
  .site-header #main-nav > a.has-nav-hint.nav-external:focus-visible::before {
    transform: translateY(0);
  }
}

.site-header .nav-drop-intro {
  margin: 0 4px 7px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .site-header #main-nav > a.has-nav-hint::before,
  .site-header .nav-drop-intro {
    display: none;
  }
}


/* BREVES_NO_ARROWS_V2 — segurança visual para páginas ainda em cache. */
.nav-drop-trigger > i[aria-hidden="true"],
.nav-cta > span[aria-hidden="true"],
.nav-external > span[aria-hidden="true"],
.button > span[aria-hidden="true"],
.mz-product-link > span[aria-hidden="true"],
.footer-col a > span[aria-hidden="true"] {
  display: none !important;
}