/* ColaboraPro | site.css
   Base compartilhada por todas as paginas da maquete: tokens, tipografia,
   botoes, cabecalho, rodape, reveal, FAQ, chamada final e os componentes
   das paginas internas. Extraido da home aprovada (index.html).
   Regra: a home nao muda de aparencia. Nada aqui pode ser especifico dela. */

@import url("tokens.css");

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: #F8FAFD;
  color: #111827;
  font-family: 'Figtree', -apple-system, sans-serif;
}

a, a:hover, a:focus, a:visited, a:active { text-decoration: none !important; color: inherit; }

h1, h2, h3, p, ul, li, figure { margin: 0; }

ul { padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { color: var(--ink); text-wrap: balance; }

button { font-family: inherit; }

.mh-w { margin: 0 auto; max-width: 1200px; padding: 0 32px; width: 100%; }
/* O Astra, no layout "page builder" (classe ast-page-builder-template da
   pagina), zera max-width de todo neto direto de .entry-content com um
   seletor de quatro classes em astra-theme-css-inline-css, e o container
   passa a ocupar a tela inteira no desktop. Mesma especificidade, carregado
   depois: o limite de 1200px volta. Em celular nada muda, o container ja
   ocupa 100% ali. (tema 9.4, 2026-09-09) */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .mh-w {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.mh-section { padding: 96px 0; }

.mh-eyebrow {
  align-items: center;
  color: var(--teal-action);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  letter-spacing: .12em;
  line-height: 1.2;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.mh-eyebrow::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 7px;
  width: 7px;
}

.mh-eyebrow--light { color: var(--teal); }

.mh-head { margin: 0 auto 54px; max-width: 780px; text-align: center; }

.mh-head h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1.12; margin-bottom: 16px; }

.mh-head p { color: var(--text); font-size: 17px; line-height: 1.75; }

.mh-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.mh-actions--center { justify-content: center; }

/* Aviso de prototipo */
.mh-proto {
  background: var(--ink);
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 8px 20px;
  text-align: center;
}

.mh-proto strong { color: var(--yellow); font-weight: 800; }

/* Header */
.mh-header {
  background: rgba(248,250,253,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  transition: box-shadow .25s ease, border-color .25s ease;
  z-index: 100;
}

.mh-header.is-scrolled { border-bottom-color: var(--ink-10); box-shadow: 0 6px 24px rgba(11,53,85,.08); }

.mh-header__inner { align-items: center; display: flex; gap: 28px; margin: 0 auto; max-width: 1200px; padding: 14px 32px; }

.mh-logo { align-items: center; display: inline-flex; gap: 10px; }

.mh-logo img { display: block; height: 34px; width: auto; }

.mh-nav { margin-left: auto; }

.mh-nav ul { align-items: center; display: flex; gap: 26px; }

.mh-nav a { color: var(--ink); font-size: 15px; font-weight: 600; position: relative; transition: color .15s ease; }

.mh-nav a::after { background: var(--teal); border-radius: 2px; bottom: -7px; content: ""; height: 2.5px; left: 0; position: absolute; right: 100%; transition: right .22s ease; }

.mh-nav a:hover { color: var(--ink-hover); }

.mh-nav a:hover::after { right: 0; }

.mh-header__right { align-items: center; display: flex; gap: 18px; }

.mh-login { align-items: center; color: var(--ink); display: inline-flex; font-size: 15px; font-weight: 600; gap: 7px; }

.mh-login:hover { color: var(--teal-action); }

.mh-header__cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #12638F 0%, var(--blue-action) 100%);
  border-radius: var(--r-sm);
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  min-height: 44px;
  padding: 11px 20px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.mh-header__cta::after { content: ""; position: absolute; top: 0; left: -90%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-20deg); transition: left .55s ease; }

.mh-header__cta:hover::after { left: 135%; }

.mh-header__cta:hover { background: linear-gradient(180deg, #14709E 0%, var(--blue-action-hover) 100%); box-shadow: 0 8px 20px rgba(14,79,115,.32); transform: translateY(-1px); }

.mh-burger { align-items: center; background: none; border: 0; cursor: pointer; display: none; flex-direction: column; gap: 5px; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px; }

.mh-burger span { background: var(--ink); border-radius: 2px; display: block; height: 2.5px; width: 24px; }

.mh-mobile { background: var(--paper); border-bottom: 1px solid var(--ink-10); display: none; padding: 10px 20px 22px; }

.mh-mobile.is-open { display: block; }

.mh-mobile ul { display: flex; flex-direction: column; }

.mh-mobile a { color: var(--ink); display: block; font-size: 16px; font-weight: 600; padding: 13px 4px; }

@keyframes mh-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* FAQ */
.mh-faq { background: #fff; }

.mh-faq__list { border: 1px solid var(--border); border-radius: var(--r-lg); margin: 0 auto; max-width: 840px; overflow: hidden; }

.mh-faq details { background: #fff; }

.mh-faq details + details { border-top: 1px solid var(--border); }

.mh-faq summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 16.5px;
  font-weight: 700;
  justify-content: space-between;
  list-style: none;
  padding: 22px 28px;
}

.mh-faq summary::-webkit-details-marker { display: none; }

.mh-faq summary::after { color: var(--teal-action); content: "+"; font-size: 24px; font-weight: 600; line-height: 1; margin-left: 18px; transition: transform .2s ease; }

.mh-faq details[open] summary::after { transform: rotate(45deg); }

.mh-faq details p { font-size: 15.5px; line-height: 1.7; padding: 0 28px 24px; }

/* CTA final */
.mh-cta {
  background:
    radial-gradient(1000px 480px at 80% -12%, rgba(0,205,183,.20), transparent 58%),
    linear-gradient(128deg, var(--ink) 0%, var(--blue-action) 100%);
  overflow: hidden;
  padding: 104px 0;
  position: relative;
  text-align: center;
}

.mh-cta h2 { color: #fff; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.1; margin: 0 auto 18px; max-width: 20ch; }

.mh-cta h2 em {
  background: linear-gradient(92deg, #00CDB7 0%, #7DE8DA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

.mh-cta p { color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.7; margin: 0 auto 34px; max-width: 60ch; }

/* Footer */
.mh-footer { background: linear-gradient(180deg, var(--ink) 0%, #092B46 100%); border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); }

.mh-footer__main { display: grid; gap: 48px; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 64px 0 44px; }

.mh-footer__brand p { font-size: 14px; line-height: 1.7; margin-top: 18px; max-width: 40ch; }

.mh-footer__brand .mh-logo img { height: 30px; }

.mh-footer__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }

.mh-footer__contact a { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; }

.mh-footer__contact a:hover { color: var(--teal); }

.mh-footer__company { font-size: 12.5px; line-height: 1.7; margin-top: 18px; opacity: .7; }

.mh-footer h4 { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .06em; margin: 0 0 16px; text-transform: uppercase; }

.mh-footer__col ul { display: flex; flex-direction: column; gap: 10px; }

.mh-footer__col a { color: rgba(255,255,255,.75); font-size: 14px; }

.mh-footer__col a:hover { color: var(--teal); }

.mh-footer__bottom {
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding: 22px 0;
}

.mh-footer__bottom span { font-size: 13px; }

.mh-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }

.mh-footer__legal a { color: rgba(255,255,255,.75); font-size: 13px; }

.mh-footer__legal a:hover { color: var(--teal); }

/* Reveal */
.mh-rv { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }

.mh-rv.is-on { opacity: 1; transform: none; }

/* Responsivo */
@media (max-width: 1024px) {
  .mh-footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .mh-section { padding: 64px 0; }
  .mh-nav { display: none; }
  .mh-login span { display: none; }
  .mh-login { justify-content: center; min-height: 44px; min-width: 44px; }
  .mh-burger { display: flex; }
}

@media (max-width: 640px) {
  .mh-w { padding: 0 20px; }
  .mh-header__inner { padding: 12px 20px; }
  .mh-logo img { height: 27px; }
  .mh-footer__main { grid-template-columns: 1fr; gap: 34px; }
  .mh-actions .mh-btn { width: 100%; }
  /* O .mh-btn nasce com white-space: nowrap em tokens.css. Em 375 px a
     caixa tem 335 px e o rotulo mais longo do site, "Conheca a consultoria
     empresarial", precisa de mais que isso: sem quebra o texto vaza e a
     pagina ganha rolagem lateral. #1420, P1. */
  .mh-btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mh-rv { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   Ajuste de cascata da divisao (nao muda a home)
   No arquivo unico original o bloco .mh-rv vinha depois de
   .mh-tool, .mh-pain__card e .mh-learn__card, entao a transicao
   do reveal vencia nesses cartoes. Com o CSS em dois arquivos o
   home.css passa a vir por ultimo, entao a regra abaixo devolve
   exatamente o valor que a home ja calculava.
   ============================================================ */
.mh-pain__card.mh-rv, .mh-tool.mh-rv, .mh-learn__card.mh-rv { transition: opacity .6s ease, transform .6s ease; }

/* ============================================================
   Componentes das paginas internas
   Usados so pelas paginas de dentro (plataforma, solucoes,
   seguranca, planos, aprenda, cadastro). Nenhuma classe daqui
   aparece na home, entao nada abaixo altera a home.
   Todas as cores, raios e sombras saem dos tokens do :root.
   ============================================================ */

/* Hero das paginas internas */
.mh-page-hero {
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(0,205,183,.09), transparent 62%),
    radial-gradient(700px 380px at -8% 110%, rgba(11,53,85,.05), transparent 60%),
    linear-gradient(180deg, #fff 0%, #fff 55%, var(--surface) 100%);
  border-bottom: 1px solid var(--ink-10);
  overflow: hidden;
  padding: 72px 0 66px;
  position: relative;
}
.mh-page-hero__grid { align-items: center; display: grid; gap: 60px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.mh-page-hero h1 { font-size: clamp(34px, 4vw, 50px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 20px; }
.mh-page-hero h1 em {
  background: linear-gradient(92deg, #00CDB7 0%, #0E9BD1 55%, #0E4F73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}
.mh-page-hero__lead { font-size: 18px; line-height: 1.72; margin-bottom: 28px; max-width: 56ch; }
.mh-page-hero__media figure { border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.mh-page-hero__media img { width: 100%; }
.mh-page-hero--center .mh-page-hero__grid { grid-template-columns: 1fr; }
.mh-page-hero--center .mh-page-hero__text { margin: 0 auto; max-width: 760px; text-align: center; }
.mh-page-hero--center .mh-page-hero__lead { margin-left: auto; margin-right: auto; max-width: 62ch; }
.mh-page-hero--center .mh-actions { justify-content: center; }
.mh-page-hero--center .mh-eyebrow { justify-content: center; }

/* Grades de cartoes */
.mh-grid-3 { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.mh-grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
.mh-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 30px 26px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.mh-card:hover { border-color: var(--teal); box-shadow: var(--sh-md); transform: translateY(-4px); }
.mh-card__icon {
  align-items: center;
  border-radius: 10px;
  display: flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 16px;
  width: 42px;
}
.mh-card__icon svg { height: 21px; width: 21px; }
.mh-card__icon--teal { background: var(--teal-10); color: var(--teal-action); }
.mh-card__icon--ink { background: var(--ink-06); color: var(--ink); }
.mh-card__icon--yellow { background: var(--yellow-10); color: #8a6d00; }
.mh-card__icon--coral { background: var(--coral-10); color: var(--coral-text); }
.mh-card h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.mh-card p { font-size: 15px; line-height: 1.65; }
.mh-card__more { align-items: center; color: var(--blue-action); display: inline-flex; font-size: 13.5px; font-weight: 800; gap: 5px; margin-top: 14px; }
.mh-card:hover .mh-card__more { color: var(--blue-action-hover); }

/* Bloco texto mais imagem, alternando os lados */
.mh-split { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1.1fr; }
.mh-split h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.14; margin-bottom: 18px; }
.mh-split p { font-size: 17px; line-height: 1.75; margin-bottom: 16px; }
.mh-split .mh-btn { margin-top: 12px; }
.mh-split .mh-checklist { margin-bottom: 18px; }
.mh-split__media figure { border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.mh-split__media img { width: 100%; }
.mh-split--reverse { grid-template-columns: 1.1fr 1fr; }
.mh-split--reverse .mh-split__media { order: -1; }

/* Lista com o check verde */
.mh-checklist { display: flex; flex-direction: column; gap: 11px; }
.mh-checklist li { font-size: 15px; line-height: 1.6; padding-left: 28px; position: relative; }
.mh-checklist li::before { color: var(--teal-action); content: "\2713"; font-weight: 800; left: 0; position: absolute; top: 0; }

/* Faixa escura de destaque ou depoimento */
.mh-band {
  background: radial-gradient(820px 420px at 108% 8%, rgba(0,205,183,.12), transparent 58%), linear-gradient(128deg, var(--ink) 0%, var(--blue-action) 100%);
  padding: 72px 0;
}
.mh-band__inner { margin: 0 auto; max-width: 860px; text-align: center; }
.mh-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; line-height: 1.18; margin-bottom: 16px; }
.mh-band p { color: rgba(255,255,255,.88); font-size: 18px; line-height: 1.75; margin-bottom: 16px; }
.mh-band__who { color: rgba(255,255,255,.72); display: block; font-size: 14.5px; font-style: normal; font-weight: 700; }
.mh-band .mh-actions { margin-top: 26px; }

/* Passos numerados */
.mh-steps { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mh-steps__item { position: relative; text-align: center; }
.mh-steps__item::after {
  background: linear-gradient(90deg, var(--teal), var(--teal-20));
  content: "";
  display: block;
  height: 2px;
  left: calc(50% + 42px);
  position: absolute;
  top: 31px;
  width: calc(100% - 84px);
}
.mh-steps__item:last-child::after { display: none; }
.mh-steps__num {
  align-items: center;
  background: #fff;
  border: 2.5px solid var(--teal);
  border-radius: 50%;
  color: var(--teal-action);
  display: flex;
  font-size: 20px;
  font-weight: 800;
  height: 62px;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  width: 62px;
  z-index: 2;
}
.mh-steps__item h3 { font-size: 19px; font-weight: 700; margin-bottom: 9px; }
.mh-steps__item p { font-size: 15px; line-height: 1.65; }

/* Cartao de preco */
.mh-price-card {
  background: linear-gradient(180deg, #fff 0%, #FCFBF7 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 42px 40px;
  text-align: center;
}
.mh-price-card__label {
  background: var(--yellow-10);
  border-radius: 999px;
  color: var(--ink);
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 20px;
  padding: 7px 16px;
}
.mh-price-card__price { color: var(--ink); display: block; font-size: clamp(34px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 12px; }
.mh-price-card__price small { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.mh-price-card > p { font-size: 15px; line-height: 1.65; margin-bottom: 26px; }
.mh-price-card .mh-btn { width: 100%; }
.mh-price-card .mh-checklist { margin-top: 24px; text-align: left; }
.mh-price-card__more { color: var(--teal-action); display: inline-block; font-size: 14.5px; font-weight: 700; margin-top: 16px; }
.mh-price-card__more:hover { color: var(--teal-action-hover); }

/* Aviso de link sem pagina na maquete */
#mh-toast {
  background: var(--ink);
  border-radius: 999px;
  bottom: 24px;
  box-shadow: var(--sh-lg);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  left: 50%;
  max-width: min(90vw, 560px);
  opacity: 0;
  padding: 12px 22px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translateX(-50%) translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
}
#mh-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Responsivo dos componentes internos */
@media (max-width: 1024px) {
  .mh-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .mh-page-hero { padding: 52px 0 48px; }
  .mh-page-hero__grid, .mh-split, .mh-split--reverse { gap: 36px; grid-template-columns: 1fr; }
  .mh-split--reverse .mh-split__media { order: 0; }
  .mh-band { padding: 56px 0; }
  .mh-steps__item::after { display: none; }
}
@media (max-width: 640px) {
  .mh-grid-3, .mh-grid-2, .mh-steps { grid-template-columns: 1fr; }
  .mh-price-card { padding: 32px 24px; }
}

/* ============================================================
   Bloco Aprenda reutilizavel, antes da chamada final
   Um destaque com pagina propria mais tres linhas compactas.
   Irmao visual da secao de aprendizado da home: mesmos tokens,
   cartao com --sh-md e --r-lg, reveal .mh-rv. Nao aparece na
   home, no cadastro nem dentro de aprenda/.
   ============================================================ */
.mh-learnband { background: var(--light); }

.mh-learnband__grid { align-items: start; display: grid; gap: 24px; grid-template-columns: 1.05fr 1fr; }

.mh-learnband__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  padding: 32px;
  transition: box-shadow .25s ease, transform .25s ease;
}

.mh-learnband__card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }

.mh-learnband__icon {
  align-items: center;
  background: var(--teal-10);
  border-radius: var(--r-md);
  color: var(--teal-action);
  display: inline-flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 20px;
  width: 56px;
}

.mh-learnband__trail { color: var(--teal-action); display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; margin-bottom: 10px; text-transform: uppercase; }

.mh-learnband__desc { color: var(--text); display: block; font-size: 15.5px; line-height: 1.7; }

.mh-learnband__meta { color: var(--ink); display: block; font-size: 13px; font-weight: 600; opacity: .66; }

.mh-learnband__card .mh-learnband__title { color: var(--ink); display: block; font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }

.mh-learnband__card .mh-learnband__meta { margin: 16px 0 22px; }

.mh-learnband__card .mh-btn { align-self: flex-start; }

.mh-learnband__card:hover .mh-btn--teal::after { left: 135%; }

.mh-learnband__list { display: grid; gap: 14px; }

.mh-learnband__row {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  display: grid;
  gap: 0 18px;
  grid-template-columns: 1fr auto;
  padding: 20px 24px;
  transition: box-shadow .25s ease, transform .25s ease;
}

.mh-learnband__row:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

.mh-learnband__row .mh-learnband__trail { grid-column: 1; margin-bottom: 6px; }

.mh-learnband__row .mh-learnband__title { color: var(--ink); font-size: 16.5px; font-weight: 700; grid-column: 1; line-height: 1.45; }

.mh-learnband__row .mh-learnband__meta { grid-column: 1; margin-top: 8px; }

.mh-learnband__arrow { align-self: center; color: var(--teal-action); grid-column: 2; grid-row: 1 / 4; transition: transform .2s ease; }

.mh-learnband__row:hover .mh-learnband__arrow { transform: translateX(4px); }

.mh-learnband__cta { margin-top: 34px; text-align: center; }

@media (max-width: 860px) {
  .mh-learnband__grid { grid-template-columns: 1fr; }
  .mh-learnband__card { padding: 26px; }
  .mh-learnband__card .mh-learnband__title { font-size: 20px; }
}

@media (max-width: 640px) {
  .mh-learnband__card .mh-btn { width: 100%; }
}

/* ============================================================
   Bloco de IA do rodape (.mh-footer__ai)
   Nasceu espelhando o cpf-footer__ai do rodape publicado: fica no
   topo do rodape, antes das colunas de links, e repete em toda
   pagina. So usa os tokens do :root e os mesmos brancos translucidos
   do resto do rodape escuro. Desde 2026-09-05 os tres botoes de texto
   deram lugar a quatro cartoes com icone (ChatGPT, Perplexity, Grok e
   Google), decisao de Anderson.
   ============================================================ */
.mh-footer__ai { border-bottom: 1px solid rgba(255,255,255,.12); }

.mh-footer__ai-inner { padding: 44px 32px 40px; text-align: center; }

.mh-footer__ai-title { color: var(--white); font-size: 24px; font-weight: 800; line-height: 1.3; margin: 0 0 12px; }

.mh-footer__ai-text { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.7; margin: 0 auto 18px; max-width: 68ch; }

.mh-footer__ai-cta { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0 0 16px; text-transform: uppercase; }

/* Os quatro cartoes de IA: linha unica no desktop pelo auto-fit e 2x2 no
   celular. Cada cartao tem icone em cima e nome embaixo, texto centralizado. */
.mh-footer__ai-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 auto; max-width: 800px; }

.mh-footer__ai-card { align-items: center; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.18); border-radius: var(--r-sm); color: var(--white); display: flex; flex-direction: column; font-size: 15px; font-weight: 800; gap: 10px; justify-content: center; min-height: 92px; padding: 18px 12px; text-align: center; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

.mh-footer__ai-card:hover { background: rgba(255,255,255,.10); border-color: var(--teal); box-shadow: var(--sh-md); transform: translateY(-2px); }

.mh-footer__ai-card:focus-visible { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(255,214,0,.34); outline: none; }

.mh-footer__ai-icone { display: block; height: 26px; line-height: 0; width: 26px; }

.mh-footer__ai-icone svg { display: block; height: 26px; width: 26px; }

/* Degrade do icone: as duas paradas do <linearGradient> de cada SVG saem
   dos tokens da marca, do teal para o coral, que e o par com contraste no
   fundo escuro do rodape. Nenhuma cor literal aqui. */
.mh-footer__ai-card .mh-ia-stop-a { stop-color: var(--teal); }

.mh-footer__ai-card .mh-ia-stop-b { stop-color: var(--coral); }

.mh-footer__ai-nome { display: block; }

@media (max-width: 860px) {
  .mh-footer__ai-inner { padding: 36px 20px 32px; }
  .mh-footer__ai-title { font-size: 21px; }
  .mh-footer__ai-text { font-size: 15px; }
  .mh-footer__ai-links { gap: 10px; grid-template-columns: repeat(2, 1fr); max-width: 440px; }
}

/* ============================================================
   Menu consolidado: megamenu do desktop e acordeao do celular
   Espelha a estrutura do header.html publicado (Plataforma com
   as 16 ferramentas, Solucoes com os 6 segmentos, mais
   Seguranca, Planos, Aprenda, Suporte e Contato) sem mudar o
   visual do cabecalho que a home ja aprovou: mesmo fundo
   translucido com desfoque, mesma sombra ao rolar, mesma altura.
   O painel e absoluto dentro de .mh-header__inner, entao nao
   empurra nada e nao vaza da largura do container.
   So tokens do :root.
   ============================================================ */
.mh-header__inner { position: relative; }

.mh-nav__item { position: static; }

.mh-nav__item--mega { align-items: center; display: flex; gap: 3px; }

.mh-nav__seta {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 0;
  padding: 4px;
}

.mh-nav__seta svg { transition: transform .2s ease; }

.mh-nav__seta:hover { color: var(--ink-hover); }

.mh-nav__seta:focus-visible { box-shadow: 0 0 0 3px rgba(255,214,0,.34); outline: 0; }

.mh-nav__item--mega.is-open .mh-nav__seta svg { transform: rotate(180deg); }

/* Painel do megamenu */
.mh-mega {
  left: 32px;
  opacity: 0;
  position: absolute;
  right: 32px;
  top: calc(100% - 14px);
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  visibility: hidden;
  z-index: 5;
}

.mh-mega--segmentos { left: auto; width: min(720px, calc(100vw - 64px)); }

.mh-nav__item--mega.is-open .mh-mega { opacity: 1; transform: none; visibility: visible; }

.mh-mega__caixa {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  margin-top: 24px;
  padding: 22px;
}

.mh-mega__cabeca {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 13px;
}

.mh-mega .mh-mega__cabeca > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: .62;
  text-transform: uppercase;
}

.mh-mega .mh-mega__todas { color: var(--blue-action); font-size: 13.5px; font-weight: 800; }

.mh-mega .mh-mega__todas:hover { color: var(--blue-action-hover); }

/* o sublinhado animado do menu de cima nao vale dentro do painel */
.mh-mega a::after { content: none; }

.mh-mega__grade { display: grid; gap: 4px; }

.mh-mega__grade--ferramentas { grid-template-columns: repeat(4, 1fr); }

.mh-mega__grade--segmentos { gap: 8px; grid-template-columns: repeat(2, 1fr); }

.mh-mega .mh-mega__item {
  align-items: center;
  border-radius: var(--r-md);
  color: var(--ink);
  display: flex;
  font-size: 14.5px;
  font-weight: 600;
  gap: 11px;
  padding: 9px 11px;
  transition: background .18s ease, transform .18s ease;
}

.mh-mega .mh-mega__item:hover { background: var(--ink-04); transform: translateX(2px); }

.mh-mega .mh-mega__item:focus-visible { background: var(--ink-04); outline: 2px solid var(--teal-action); outline-offset: 2px; }

.mh-mega .mh-mega__item--wide { align-items: flex-start; }

.mh-mega__icon {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.mh-mega__icon svg { height: 18px; width: 18px; }

.mh-mega__icon--teal { background: var(--teal-10); color: var(--teal-action); }

.mh-mega__icon--ink { background: var(--ink-06); color: var(--ink); }

.mh-mega__icon--yellow { background: var(--yellow-10); color: #8a6d00; }

.mh-mega__icon--coral { background: var(--coral-10); color: var(--coral-text); }

.mh-mega__nome { line-height: 1.3; }

.mh-mega__texto { display: flex; flex-direction: column; gap: 3px; }

.mh-mega__texto strong { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.3; }

.mh-mega__texto > span { color: var(--text); font-size: 12.5px; font-weight: 500; line-height: 1.45; opacity: .78; }

/* Acordeao do menu do celular */
.mh-mobile__acc {
  align-items: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
  justify-content: space-between;
  padding: 13px 4px;
  text-align: left;
  width: 100%;
}

.mh-mobile__acc svg { flex: 0 0 auto; transition: transform .2s ease; }

.mh-mobile__acc[aria-expanded="true"] svg { transform: rotate(180deg); }

.mh-mobile__acc:focus-visible { box-shadow: 0 0 0 3px rgba(255,214,0,.34); outline: 0; }

.mh-mobile__painel { display: none; }

.mh-mobile__painel.is-open { display: block; }

.mh-mobile__painel ul { border-left: 2px solid var(--teal-20); margin: 0 0 8px; padding-left: 14px; }

.mh-mobile .mh-mobile__painel a { font-size: 15px; font-weight: 500; padding: 13px 4px; }

.mh-mobile .mh-mobile__todas { color: var(--blue-action); font-weight: 800; }

.mh-mobile__item--login { border-top: 1px solid var(--ink-10); margin-top: 6px; padding-top: 4px; }

.mh-mobile .mh-mobile__login { align-items: center; display: flex; gap: 9px; }

/* Icones sociais do rodape, monocromaticos em currentColor */
.mh-footer__social { display: flex; gap: 10px; margin-top: 20px; }

.mh-footer__social a {
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  width: 44px;
}

.mh-footer__social a:hover { background: rgba(255,255,255,.16); color: var(--teal); transform: translateY(-2px); }

.mh-footer__social svg { height: 17px; width: 17px; }

/* Sete itens no menu pedem um pouco menos de folga antes do celular */
@media (max-width: 1180px) {
  .mh-header__inner { gap: 18px; }
  .mh-nav ul { gap: 17px; }
  .mh-nav a { font-size: 14.5px; }
  .mh-mega { left: 20px; right: 20px; }
  .mh-mega__grade--ferramentas { gap: 2px; }
  .mh-mega .mh-mega__item { font-size: 14px; gap: 9px; padding: 8px 9px; }
}

/* Mini formulario de lead do WhatsApp (assets/leads.js) */
.cp-lead {
  background: transparent;
  border: 0;
  color: var(--text);
  max-width: 420px;
  padding: 0;
  width: calc(100% - 32px);
}

.cp-lead::backdrop { background: rgba(11,53,85,.55); }

.cp-lead__caixa {
  background: var(--white);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  display: block;
  padding: 24px 22px 20px;
  position: relative;
  text-align: left;
}

.cp-lead__fechar {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 22px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px;
}

.cp-lead__fechar:hover { background: var(--ink-06); }

.cp-lead__titulo {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 44px 14px 0;
}

.cp-lead__rotulo {
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.cp-lead input[type="text"],
.cp-lead input[type="tel"],
.cp-lead input[type="email"] {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  display: block;
  font: inherit;
  margin-bottom: 14px;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.cp-lead input[type="text"]:focus,
.cp-lead input[type="tel"]:focus,
.cp-lead input[type="email"]:focus {
  border-color: var(--teal);
  outline: 2px solid var(--teal-20);
  outline-offset: 1px;
}

.cp-lead__hp {
  height: 0;
  left: -9999px;
  opacity: 0;
  position: absolute;
  width: 0;
}

.cp-lead__erro {
  color: var(--coral-text);
  font-size: 14px;
  margin: 0 0 12px;
}

.cp-lead__enviar {
  min-height: 44px;
  width: 100%;
}

.cp-lead__apoio {
  color: var(--text);
  font-size: 14px;
  margin: 12px 0 0;
  text-align: center;
}

.cp-lead__aceite {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 10px 0 0;
  opacity: .85;
  text-align: center;
}

.cp-lead__aceite a { color: var(--teal-action); }

html.cp-lead-travado, html.cp-lead-travado body { overflow: hidden; }