/* ============================================================================
 Landing de curso : EXTENSAO do sistema mh- (assets/css/mh.css), nao um sistema
 novo.

 Historico: esta folha chegou a ter um sistema proprio (`ct-`), verde, pintado
 com `cor_primaria` do banco. Nada disso tinha relacao com a plataforma, cuja
 identidade e roxa com dourado, e a pagina ficou fora da marca. Foi removido.

 A ORGANIZACAO da pagina segue a landing do congresso (congresso.seusaude.com),
 aprovada pelo dono: hero enxuto, contagem regressiva, faixa de numeros, quem
 conduz, programacao oficial com horarios, o que esta incluso, inscricao,
 duvidas e formulario. Do congresso vem o RITMO das secoes, nunca a paleta.

 Regras desta folha:
  1. mh.css entra ANTES e ja resolve shell, topbar, hero, secao, botao, badge,
     cartao, acordeao, depoimento, galeria, CTA final, rodape e sticky mobile.
     Aqui so entra o que a landing tem e a home nao tem: contagem regressiva,
     faixa de dados do hero, agenda dos encontros, cartao de inscricao, contador
     de vagas, colunas "para quem e", materiais e a lista de espera.
  2. Nenhuma cor nova: tudo sai dos tokens --mh-*.
  3. O prefixo continua mh-, porque continua sendo o mesmo sistema.
  4. Alvo de toque de 44px e input de 16px: o dono pediu "formato de aplicativo"
     e menos rolagem no celular.
============================================================================ */

/* ------------------------------------------------------------------ hero */
/* Hero de coluna unica, como o do congresso: badge, titulo, promessa em uma
   linha, faixa de dados e UM botao. O cartao de preco saiu daqui e passou a
   morar na secao de inscricao, onde a decisao acontece. */
.mh-hero-solo { grid-template-columns:minmax(0,1fr); text-align:center; margin-bottom:40px; }
.mh-hero-solo .mh-hero-content { max-width:780px; margin:0 auto; }
.mh-hero-solo p { margin-left:auto; margin-right:auto; }
.mh-hero-solo .mh-hero-ctas { justify-content:center; }

/* Hero comercial do Sem Açúcar: uma peça única, com a oferta no espaço escuro
   da fotografia, o Dr. Jayme no centro e o conflito visual no lado direito. */
.mh-hero-solo.mh-hero-venda {
  display:block;
  position:relative;
  min-height:590px;
  padding:0;
  overflow:hidden;
  text-align:left;
  isolation:isolate;
  border:1px solid rgba(167,139,250,.24);
  border-radius:24px;
  background:#0b071b;
  box-shadow:0 28px 70px rgba(0,0,0,.38);
}
.mh-hero-venda .mh-hero-content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:590px;
  min-height:590px;
  min-width:0;
  margin:0;
  padding:44px 24px 44px 44px;
  background:linear-gradient(90deg,rgba(5,3,19,.28),rgba(5,3,19,.08) 78%,transparent);
}
.mh-hero-venda .mh-hero-content > p { margin-left:0; margin-right:0; max-width:660px; }
.mh-hero-venda h1 { max-width:560px; margin-bottom:12px; }
.mh-hero-venda .mh-hero-badge { width:max-content; max-width:100%; }
.mh-hero-venda .mh-fatos-hero { justify-content:flex-start; }
.mh-hero-venda .mh-fato-hero { flex:1 1 calc(50% - 5px); max-width:none; }
.mh-hero-venda .mh-hero-ctas { justify-content:flex-start; }
.mh-hero-venda-media {
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
}
.mh-hero-venda-media::before {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,3,19,.32) 0%,rgba(5,3,19,.10) 36%,transparent 58%),
    linear-gradient(0deg,rgba(5,3,19,.34),transparent 26%);
  pointer-events:none;
}
.mh-hero-venda-media picture { display:block; width:100%; height:100%; }
.mh-hero-venda-media img {
  display:block;
  width:100%;
  height:100%;
  min-height:590px;
  object-fit:cover;
  object-position:center;
}
.mh-hero-venda-autor {
  position:absolute;
  z-index:2;
  right:24px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(8,4,24,.72);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  color:#fff;
}
.mh-hero-venda-autor strong { font-size:12px; line-height:1.25; }
.mh-hero-venda-autor span { color:rgba(255,255,255,.72); font-size:10.5px; line-height:1.3; }
.mh-hero-seguranca,
.mh-hero-reajuste {
  width:100%;
  color:rgba(255,255,255,.72) !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
}
.mh-hero-seguranca { margin:11px 0 0 !important; }
/* SEO 2026-08-25 (Core Web Vitals): esta linha e curta e muda de UMA para DUAS
   linhas quando a fonte real chega, e o empurrao de 17px derrubava tudo o que
   vem abaixo: era o resto do CLS de 0,124 da landing do BlueZone depois de a
   metrica de fallback ja ter resolvido o grosso. Reservar a altura das duas
   linhas nao muda nada visualmente e congela o layout desde a primeira
   pintura. Se o texto crescer para tres linhas, revisar este valor. */
.mh-hero-seguranca { min-height:2.9em; }
.mh-hero-reajuste { margin:2px 0 0 !important; }
.mh-hero-reajuste strong { color:var(--mh-gold-soft); }
@media(min-width:921px){
  .mh-hero-venda .mh-fatos-hero { max-width:520px; }
  .mh-hero-venda .mh-hero-content > p:not(.mh-hero-seguranca):not(.mh-hero-reajuste) { max-width:520px; }
}
@media(max-width:920px){
  .mh-hero-solo.mh-hero-venda { display:flex; flex-direction:column; min-height:0; }
  .mh-hero-venda .mh-hero-content {
    order:2;
    min-height:0;
    max-width:none;
    width:100%;
    padding:26px 26px 28px;
    text-align:center;
    background:none;
  }
  .mh-hero-venda .mh-hero-badge { order:1; }
  .mh-hero-venda h1 { order:2; }
  .mh-hero-venda .mh-hero-lead { order:3; }
  .mh-hero-venda .mh-hero-ctas { order:4; }
  .mh-hero-venda .mh-hero-seguranca { order:5; }
  .mh-hero-venda .mh-hero-reajuste { order:6; }
  .mh-hero-venda .mh-fatos-hero { order:7; margin:18px 0 0; }
  .mh-hero-venda .mh-hero-content > p { margin-left:auto; margin-right:auto; }
  .mh-hero-venda .mh-fatos-hero,
  .mh-hero-venda .mh-hero-ctas { justify-content:center; }
  .mh-hero-venda .mh-hero-badge { width:auto; }
  .mh-hero-venda-media {
    order:1;
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/10;
    border-bottom:1px solid rgba(167,139,250,.2);
  }
  .mh-hero-venda-media img {
    min-height:0;
    height:100%;
    object-position:center 26%;
  }
  .mh-hero-venda-media::before {
    background:
      linear-gradient(0deg,rgba(16,8,38,.5),transparent 46%),
      linear-gradient(90deg,rgba(16,8,38,.12),transparent 35%);
  }
  .mh-hero-venda-autor { right:18px; bottom:16px; text-align:left; }
}
@media(max-width:560px){
  .mh-hero-venda .mh-hero-content { padding:20px 17px 22px; }
  .mh-hero-venda .mh-hero-badge {
    max-width:100%;
    white-space:normal;
    justify-content:center;
    text-align:center;
    /* É o gatilho de urgência acima do H1: a 9,5px ninguém lia o prazo da oferta. */
    font-size:11.5px;
    line-height:1.35;
    letter-spacing:.5px;
  }
  .mh-hero-venda h1,
  .mh-hero-venda p { max-width:100%; overflow-wrap:anywhere; }
  .mh-hero-venda h1 { margin-bottom:10px; }
  .mh-hero-venda .mh-hero-lead { margin-bottom:18px; }
  .mh-hero-venda .mh-fato-hero { min-width:0; }
  .mh-hero-venda .mh-fato-hero-val { overflow-wrap:anywhere; }
  .mh-hero-venda .mh-hero-ctas .mh-cta { width:100%; justify-content:center; }
  .mh-hero-venda-media { min-height:0; height:auto; aspect-ratio:16/10; }
  .mh-hero-venda-media img { min-height:0; height:100%; }
  .mh-hero-venda-autor { left:12px; right:auto; bottom:12px; max-width:210px; padding:8px 10px; }
  .mh-hero-venda-autor strong { font-size:11px; }
  /* Credencial CRN e âncora de preço são elementos de confiança colados no CTA:
     abaixo de 12px o leitor de celular simplesmente pula. */
  .mh-hero-venda-autor span { font-size:11.5px; }
  .mh-hero-seguranca,
  .mh-hero-reajuste { font-size:12px !important; }
  .mh-hero-seguranca { margin-top:9px !important; }
  .mh-hero-venda .mh-fato-hero { padding:10px 8px; min-height:58px; }
}
@media(max-width:420px){
  .mh-topbar-cta { font-size:0; white-space:nowrap; }
  .mh-topbar-cta::after { content:"Meu portal"; font-size:11px; }
}

/* Hero "gatilho" (arte de agosto/2026, fundo verde-escuro com colagem de fotos
   no lado direito). O texto vive em HTML por cima da arte sem texto, entao a
   paleta verde-lima fica ESCOPADA aqui: o resto da pagina segue roxo e dourado,
   e o hero do metamorfose nao herda nada disto. */
.mh-hero-solo.mh-hero-venda.mh-hero-gatilho {
  border-color:rgba(155,193,48,.30);
  background:#0a100c;
}
.mh-hero-gatilho .mh-hero-content {
  background:linear-gradient(90deg,rgba(10,16,12,.62),rgba(10,16,12,.16) 72%,transparent);
}
.mh-hero-gatilho .mh-hero-eyebrow {
  display:block;
  margin:0 0 14px;
  color:#9bc130;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.mh-hero-gatilho h1 { max-width:600px; }
.mh-hero-gatilho h1 em {
  color:#c8de63;
  font-style:normal;
  font-weight:800;
}
.mh-hero-gatilho .mh-hero-lead { color:#ccd4c0; }
.mh-hero-chips {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}
.mh-hero-chips li {
  padding:8px 16px;
  border:1px solid rgba(200,222,99,.34);
  border-radius:999px;
  background:rgba(200,222,99,.07);
  color:#e9eedb;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}
.mh-hero-gatilho .mh-cta-primary {
  background:#9db32c;
  border-color:rgba(10,16,12,.25);
  color:#101505;
  font-weight:800;
}
.mh-hero-gatilho .mh-cta-primary:hover {
  background:#c8de63;
  border-color:rgba(10,16,12,.25);
  color:#101505;
}
.mh-hero-gatilho .mh-cta-ghost {
  background:rgba(200,222,99,.05);
  border-color:rgba(200,222,99,.38);
}
.mh-hero-gatilho .mh-cta-ghost:hover { background:rgba(200,222,99,.12); border-color:#c8de63; }
.mh-hero-gatilho .mh-cta:focus-visible { outline:2px solid #c8de63; outline-offset:2px; }
.mh-hero-gatilho .mh-hero-seguranca { color:rgba(233,238,219,.78) !important; }
.mh-hero-gatilho .mh-hero-reajuste strong { color:#c8de63; }
.mh-hero-gatilho .mh-hero-badge {
  background:rgba(155,193,48,.13);
  border-color:rgba(200,222,99,.40);
  color:#c8de63;
}
.mh-hero-gatilho .mh-hero-badge::before { background:#9bc130; box-shadow:0 0 0 4px rgba(155,193,48,.22); animation:none; }
@media(max-width:920px){
  .mh-hero-gatilho .mh-hero-content { background:none; }
  /* A ordem herdada do hero antigo nao conhece eyebrow nem chips; o escopo
     gatilho reordena a coluna inteira no celular. */
  .mh-hero-gatilho .mh-hero-badge { order:1; }
  .mh-hero-gatilho .mh-hero-eyebrow { order:2; margin-bottom:10px; }
  .mh-hero-gatilho h1 { order:3; }
  .mh-hero-gatilho .mh-hero-lead { order:4; }
  .mh-hero-gatilho .mh-hero-chips { order:5; justify-content:center; margin-bottom:20px; }
  .mh-hero-gatilho .mh-hero-ctas { order:6; }
  .mh-hero-gatilho .mh-hero-seguranca { order:7; }
  .mh-hero-gatilho .mh-hero-reajuste { order:8; }
  /* O corte mobile e so a foto da geladeira (920x716). */
  .mh-hero-gatilho .mh-hero-venda-media { aspect-ratio:920/716; border-bottom-color:rgba(155,193,48,.24); }
  .mh-hero-gatilho .mh-hero-venda-media img { object-position:center; }
  .mh-hero-gatilho .mh-hero-venda-media::before {
    background:linear-gradient(0deg,rgba(10,16,12,.55),transparent 40%);
  }
}
@media(max-width:560px){
  .mh-hero-gatilho .mh-hero-venda-media { aspect-ratio:920/716; }
  .mh-hero-gatilho .mh-hero-chips li { padding:7px 13px; font-size:12px; }
}

/* Bloco de decisao logo apos o hero (14/08/2026).
   Substitui a captura de lead "decida com calma" enquanto a turma esta a dias
   de comecar: quem chega precisa saber QUANDO comeca, o que leva e que a
   gravacao fica, sem rolar a pagina inteira. */
.mh-agora {
  margin:-12px 0 34px;
  padding:24px;
  border:1px solid rgba(167,139,250,.28);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(255,255,255,.05));
  box-shadow:0 18px 44px rgba(0,0,0,.2);
}
.mh-agora-eyebrow {
  display:block;
  margin-bottom:6px;
  color:var(--mh-gold-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.mh-agora h2 {
  margin:0 0 10px;
  font-size:clamp(21px,3.1vw,30px);
  line-height:1.22;
}
.mh-agora-texto > p {
  margin:0 0 16px;
  max-width:70ch;
  line-height:1.6;
}
.mh-agora-itens {
  margin:0 0 20px;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:9px 22px;
}
.mh-agora-itens li {
  position:relative;
  padding-left:22px;
  line-height:1.5;
  font-size:15px;
}
.mh-agora-itens li::before {
  content:"";
  position:absolute;
  left:2px;
  top:.55em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--mh-gold-soft);
}
.mh-agora-nota {
  margin:12px 0 0;
  font-size:13px;
  opacity:.82;
}
@media (max-width:560px) {
  .mh-agora { padding:18px; }
  .mh-agora-itens { gap:8px; }
}

/* Captura direta logo após o hero. O formulário fica visível sem exigir que a
   pessoa encontre o segundo bloco de captura no fim da página. */
.mh-captura-inicial {
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.55fr);
  gap:22px;
  align-items:center;
  margin:-12px 0 34px;
  padding:22px;
  border:1px solid rgba(167,139,250,.24);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(255,255,255,.05));
  box-shadow:0 18px 44px rgba(0,0,0,.2);
}
.mh-captura-inicial-texto span {
  display:block;
  margin-bottom:5px;
  color:var(--mh-gold-soft);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mh-captura-inicial-texto h2 {
  margin:0 0 6px;
  color:#fff;
  font-size:21px;
  line-height:1.15;
}
.mh-captura-inicial-texto p {
  margin:0;
  color:var(--mh-gray-300);
  font-size:12.5px;
  line-height:1.55;
}
.mh-captura-inicial-box {
  min-width:0;
  padding:15px;
  border-radius:14px;
  background:#fff;
  color:var(--mh-gray-900);
}
.mh-captura-inicial-campos {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:8px;
  align-items:end;
}
.mh-captura-inicial .mh-campo { min-width:0; margin:0; }
.mh-captura-inicial .mh-campo label {
  display:block;
  margin-bottom:5px;
  color:var(--mh-gray-800);
  font-size:11.5px;
  font-weight:700;
}
.mh-captura-inicial input[type=text],
.mh-captura-inicial input[type=email],
.mh-captura-inicial input[type=tel] {
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 11px;
  border:1.5px solid var(--mh-gray-200);
  border-radius:9px;
  background:#fff;
  color:var(--mh-gray-900);
  font:inherit;
  font-size:16px;
  outline:none;
}
.mh-captura-inicial input:focus {
  border-color:var(--mh-purple);
  box-shadow:0 0 0 3px rgba(124,58,237,.14);
}
.mh-captura-inicial .mh-cta {
  min-height:46px;
  padding-left:16px;
  padding-right:16px;
  white-space:nowrap;
}
.mh-captura-inicial-lgpd {
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:9px;
  color:var(--mh-gray-600);
  font-size:10.5px;
  line-height:1.4;
}
.mh-captura-inicial-lgpd input { flex:0 0 auto; width:16px; height:16px; margin:0; accent-color:var(--mh-purple); }
.mh-captura-inicial-lgpd a { color:var(--mh-purple); font-weight:700; }
.mh-captura-inicial-ok {
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  align-items:center;
  justify-content:space-between;
  color:var(--mh-gray-700);
  font-size:12px;
}
.mh-captura-inicial-ok[hidden] { display:none; }
.mh-captura-inicial-ok strong { color:var(--mh-purple-soft); font-size:15px; }
.mh-captura-inicial-ok a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 14px;
  border-radius:9px;
  background:var(--mh-purple);
  color:#fff;
  font-weight:800;
  text-decoration:none;
}
@media(max-width:1080px){
  .mh-captura-inicial { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .mh-captura-inicial-campos { grid-template-columns:1fr 1fr; }
  .mh-captura-inicial .mh-campo:first-child { grid-column:1/-1; }
  .mh-captura-inicial .mh-cta { grid-column:1/-1; width:100%; justify-content:center; }
}
@media(max-width:520px){
  .mh-captura-inicial { margin-top:-8px; padding:15px; border-radius:17px; }
  .mh-captura-inicial-box { padding:13px; }
  .mh-captura-inicial-campos { grid-template-columns:1fr; }
  .mh-captura-inicial .mh-campo:first-child,
  .mh-captura-inicial .mh-cta { grid-column:auto; }
}

/* Faixa de dados do hero: o essencial resolvido antes da primeira rolagem. */
.mh-fatos-hero {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin:0 0 26px;
}
.mh-fato-hero {
  flex:1 1 140px; max-width:220px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--mh-radius-md);
  padding:11px 14px;
}
.mh-fato-hero-lbl {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:var(--mh-gray-400); margin-bottom:3px;
}
.mh-fato-hero-val { display:block; font-size:14px; font-weight:700; color:#fff; line-height:1.35; }
@media (max-width:560px){
  .mh-fatos-hero { gap:8px; }
  .mh-fato-hero { flex:1 1 calc(50% - 4px); max-width:none; padding:10px 12px; }
  .mh-fato-hero-val { font-size:13px; }
}

/* Badge do estado que nao vende: mesmo desenho do hero badge, em roxo e sem
   pulso, para nao anunciar urgencia onde nao existe oferta aberta. */
.mh-hero-badge.mh-hero-badge-frio {
  background:rgba(124,58,237,.16);
  border-color:rgba(167,139,250,.36);
  color:var(--mh-purple-soft);
}
.mh-hero-badge.mh-hero-badge-frio::before {
  background:var(--mh-purple-soft);
  box-shadow:0 0 0 4px rgba(167,139,250,.22);
  animation:none;
}

/* ------------------------------------------------ reconhecimento do problema */
.mh-impacto {
  position:relative;
  margin:0 0 56px;
  border:1px solid rgba(167,139,250,.24);
  border-radius:var(--mh-radius-lg);
  background:
    radial-gradient(circle at 84% 15%,rgba(124,58,237,.18),transparent 34%),
    rgba(15,23,42,.58);
  box-shadow:0 22px 55px rgba(0,0,0,.26);
}
.mh-impacto-conteudo {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);
  gap:12px 44px;
  align-items:start;
  padding:34px 38px;
}
.mh-impacto-eyebrow {
  grid-column:1/-1;
  display:block; margin-bottom:14px;
  color:var(--mh-gold-soft);
  font-size:11px; font-weight:800; line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase;
}
.mh-impacto h2 {
  max-width:640px; margin:0;
  color:#fff; font-family:'Plus Jakarta Sans','Jakarta Fallback','DM Sans',sans-serif;
  font-size:clamp(30px,4vw,48px); line-height:1.08;
  letter-spacing:-.035em;
}
.mh-impacto p {
  max-width:590px; margin:16px 0 0;
  color:rgba(255,255,255,.82);
  font-size:15px; line-height:1.68;
}
.mh-impacto-sinais {
  grid-column:2;
  grid-row:2 / span 2;
  display:flex; flex-direction:column; gap:8px;
  list-style:none; margin:0; padding:0;
}
.mh-impacto-sinais li {
  padding:11px 14px 11px 38px;
  position:relative;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(8,4,24,.48);
  color:rgba(255,255,255,.82);
  font-size:12.5px; font-weight:650;
  backdrop-filter:blur(8px);
}
.mh-impacto-sinais li::before {
  content:"✓";
  position:absolute; left:14px; top:10px;
  color:var(--mh-gold-soft); font-weight:900;
}
.mh-impacto .mh-cta { grid-column:1; width:max-content; margin-top:10px; }
@media(max-width:760px){
  .mh-impacto { margin-bottom:40px; }
  .mh-impacto-conteudo { display:flex; flex-direction:column; padding:25px 20px; }
  .mh-impacto h2 { font-size:31px; }
  .mh-impacto p { font-size:14px; line-height:1.6; }
  .mh-impacto-sinais { width:100%; margin:6px 0 10px; }
  .mh-impacto-sinais li { font-size:11.5px; }
  .mh-impacto .mh-cta { width:100%; justify-content:center; }
}

/* --------------------------------------------------- contagem regressiva */
/* Aparece so quando existe marco futuro (abertura ou encerramento das
   inscricoes). Turma esgotada ou encerrada nao ganha relogio. */
.mh-count {
  background:rgba(15,23,42,.45);
  border:1px solid rgba(167,139,250,.20);
  border-radius:var(--mh-radius-lg);
  padding:24px 20px;
  text-align:center;
  margin-bottom:56px;
}
.mh-count-title { margin:0 0 16px; font-size:13px; font-weight:600; color:var(--mh-gray-300); letter-spacing:.01em; }
.mh-count-boxes { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.mh-count-box {
  min-width:74px; padding:12px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--mh-radius-md);
}
.mh-count-num {
  display:block; font-size:28px; font-weight:800; color:#fff;
  letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;
}
.mh-count-lbl { display:block; margin-top:3px; font-size:10.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--mh-gray-400); }
.mh-count-nota { margin:16px 0 0; font-size:12.5px; color:var(--mh-gray-400); line-height:1.6; }
@media (max-width:560px){
  .mh-count { padding:20px 14px; margin-bottom:40px; }
  .mh-count-boxes { gap:7px; }
  .mh-count-box { min-width:0; flex:1 1 calc(25% - 6px); padding:10px 6px; }
  .mh-count-num { font-size:22px; }
  .mh-count-lbl { font-size:10px; letter-spacing:.06em; }
}

/* --------------------------------------------------------- faixa de numeros */
/* A faixa ja traz margem propria no mh.css; dentro de uma secao ela viraria
   espaco dobrado. */
.mh-section-numeros .mh-stats { margin-bottom:0; }

/* ------------------------------------------------------------ quem conduz */
.mh-hero-quem { grid-template-columns:.85fr 1.15fr; margin-bottom:56px; }
.mh-hero-quem .mh-eyebrow,
.mh-hero-quem .mh-section-title { text-align:left; }
.mh-hero-quem .mh-section-title { margin-bottom:14px; }
.mh-quem-quote {
  border-left:3px solid var(--mh-purple-soft);
  padding-left:14px;
  font-size:15px !important;
  color:var(--mh-gray-300);
}
.mh-quem-chips { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mh-quem-chips li {
  font-size:12.5px; font-weight:600; color:var(--mh-gray-300);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:7px 14px;
}
.mh-quem-chips .mh-quem-chip-destaque {
  color:#fff;
  background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(167,139,250,.18));
  border-color:rgba(167,139,250,.62);
  box-shadow:0 8px 22px rgba(124,58,237,.18);
}
@media (max-width:900px){
  .mh-hero-quem { grid-template-columns:minmax(0,1fr); }
  .mh-hero-quem .mh-eyebrow,
  .mh-hero-quem .mh-section-title { text-align:center; }
  .mh-quem-quote { text-align:left; max-width:560px; margin-left:auto; margin-right:auto; }
  .mh-quem-chips { justify-content:center; }
}

/* --------------------------------------------- sub-titulo dentro da secao */
/* A programacao oficial e o "o que voce recebe" tem dois blocos cada. O
   sub-titulo separa os dois sem gastar uma secao inteira. */
.mh-sub-head {
  text-align:center; font-size:15px; font-weight:700; color:#fff;
  letter-spacing:-.005em; margin:38px 0 18px;
}
/* Quando o sub-titulo vem logo depois da linha de apoio da secao, o respiro
   dela ja basta: dois espacos somados abrem um buraco no meio do bloco. */
.mh-section-sub + .mh-sub-head { margin-top:0; }

/* ------------------------------------------------- programacao: encontros */
/* Mesma leitura da programacao oficial do congresso: horario a esquerda,
   conteudo a direita, uma linha por encontro. */
.mh-agenda { max-width:780px; margin:0 auto; }
.mh-agenda-item {
  display:grid; grid-template-columns:126px minmax(0,1fr); gap:18px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08);
  align-items:start;
}
.mh-agenda-item:last-child { border-bottom:0; }
.mh-agenda-chip {
  display:inline-block; white-space:nowrap;
  background:rgba(167,139,250,.14); border:1px solid rgba(167,139,250,.30);
  color:#c4b5fd; border-radius:8px; padding:5px 10px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.mh-agenda-dia { display:block; margin-top:5px; font-size:11.5px; color:var(--mh-gray-400); }
.mh-agenda-corpo h4 {
  display:flex; align-items:baseline; gap:9px;
  margin:0 0 4px; font-size:15px; font-weight:700; color:#fff; line-height:1.4;
}
.mh-agenda-num {
  flex-shrink:0; font-size:11.5px; font-weight:800; color:#c4b5fd;
  background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.28);
  border-radius:6px; padding:2px 6px;
}
.mh-agenda-dur { margin:0; font-size:12.5px; color:var(--mh-gray-400); line-height:1.5; }
@media (max-width:560px){
  .mh-agenda-item { grid-template-columns:minmax(0,1fr); gap:8px; padding:14px 0; }
}

/* ---------------------------------------------------- cartao de inscricao */
.mh-oferta {
  background:rgba(15,23,42,.55);
  border:1px solid rgba(167,139,250,.22);
  border-radius:var(--mh-radius-lg);
  overflow:hidden;
  max-width:420px; width:100%; margin:0 auto;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.mh-oferta-topo {
  padding:12px 20px;
  background:rgba(124,58,237,.20);
  border-bottom:1px solid rgba(167,139,250,.22);
  color:#fff; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  line-height:1.35;
}
.mh-oferta-topo-frio { background:rgba(255,255,255,.05); color:var(--mh-gray-300); }
.mh-oferta-corpo { padding:22px 20px 20px; text-align:center; }
.mh-oferta-corpo .mh-cta-primary { width:100%; justify-content:center; min-height:48px; }
.mh-guia-publico{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:30px;border:1px solid rgba(46,230,200,.2);border-radius:18px;background:linear-gradient(135deg,rgba(46,230,200,.07),rgba(124,58,237,.08))}
.mh-guia-publico>div{min-width:0}.mh-guia-publico .mh-eyebrow{text-align:left}.mh-guia-publico .mh-section-title{text-align:left;margin-bottom:8px}.mh-guia-publico .mh-section-sub{text-align:left;margin:0;max-width:720px}.mh-guia-publico>.mh-cta{flex:0 0 auto}
@media(max-width:760px){.mh-guia-publico{display:grid;gap:20px;padding:22px}.mh-guia-publico>.mh-cta{width:100%;justify-content:center;text-align:center}}
.mh-oferta-itens {
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mh-purple-soft); margin-bottom:12px;
}
.mh-oferta-nota { font-size:12px; color:var(--mh-gray-400); margin-top:12px; line-height:1.5; }

/* Secao de inscricao: perfil a esquerda, cartao a direita. No celular o cartao
   sobe: quem chegou ate aqui quer o preco antes da lista de perfil. */
.mh-inscricao {
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:22px; align-items:start; margin-bottom:22px;
}
.mh-inscricao-perfil { display:flex; flex-direction:column; gap:14px; }
@media (max-width:960px){
  .mh-inscricao { grid-template-columns:minmax(0,1fr); }
  .mh-inscricao > .mh-oferta { order:-1; }
}

/* ---------------------------------------------------------------- vagas */
.mh-vagas {
  text-align:left; margin:16px 0 18px; padding:14px 16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--mh-radius-md);
}
.mh-vagas-linha { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--mh-gray-300); }
.mh-vagas-linha strong { color:#fff; font-weight:700; text-align:right; }
.mh-vagas-barra { height:7px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin:9px 0 8px; }
.mh-vagas-barra span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--mh-purple-soft), var(--mh-purple)); }
.mh-vagas-rest { font-size:12px; color:var(--mh-gray-400); line-height:1.5; }

/* --------------------------------------------------------- lista com check */
.mh-lista { list-style:none; margin:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:9px; }
.mh-lista li { position:relative; padding-left:24px; font-size:13.5px; color:var(--mh-gray-300); line-height:1.5; }
.mh-lista li::before {
  content:''; position:absolute; left:1px; top:4px;
  width:12px; height:7px;
  border-left:2px solid var(--mh-purple-soft); border-bottom:2px solid var(--mh-purple-soft);
  transform:rotate(-45deg);
}
.mh-oferta .mh-lista { margin-bottom:18px; }

/* ------------------------------------------------------ avisos obrigatorios */
/* Os dois limites que o Dr. Jayme exige. Ficam do lado do preco, em caixa
   dourada, nunca em rodape cinza claro. */
.mh-avisos { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
@media (max-width:760px){ .mh-avisos { grid-template-columns:minmax(0,1fr); gap:12px; } }
.mh-aviso {
  background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(124,58,237,.04));
  border:1px solid rgba(245,158,11,.30);
  border-radius:var(--mh-radius-md);
  padding:22px 22px 20px;
}
.mh-aviso h3 { font-size:15px; font-weight:700; color:#fff; margin:0 0 7px; letter-spacing:-.008em; line-height:1.35; }
.mh-aviso p { margin:0; font-size:13.5px; color:var(--mh-gray-300); line-height:1.65; }

/* ------------------------------------------------------------- para quem e */
.mh-ps-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--mh-radius-md);
  padding:22px 22px 20px;
}
.mh-ps-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mh-ps-card li { position:relative; padding-left:24px; font-size:13.5px; color:var(--mh-gray-300); line-height:1.55; }
.mh-ps-label { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.mh-ps-sim { border-color:rgba(167,139,250,.28); }
.mh-ps-sim .mh-ps-label { color:var(--mh-purple-soft); }
.mh-ps-sim li::before {
  content:''; position:absolute; left:1px; top:4px;
  width:12px; height:7px;
  border-left:2px solid var(--mh-purple-soft); border-bottom:2px solid var(--mh-purple-soft);
  transform:rotate(-45deg);
}
.mh-ps-nao { border-color:rgba(245,158,11,.28); }
.mh-ps-nao .mh-ps-label { color:var(--mh-gold-soft); }
.mh-ps-nao li::before {
  content:''; position:absolute; left:2px; top:9px;
  width:12px; height:2px; background:var(--mh-gold-soft); border-radius:2px;
}

/* ------------------------------------------ acordeao: extras sobre .mh-faq */
.mh-faq-largo { max-width:860px; }
.mh-faq summary { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mh-acc-tit { display:flex; align-items:center; gap:11px; min-width:0; }
.mh-acc-num {
  flex-shrink:0;
  min-width:30px; height:30px; padding:0 6px; border-radius:8px;
  background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.28);
  color:#c4b5fd; font-size:12.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.mh-acc-cont { flex-shrink:0; font-size:11.5px; font-weight:600; color:var(--mh-gray-400); }
.mh-acc-desc { font-size:13.5px; color:var(--mh-gray-400); line-height:1.6; margin:0; }
.mh-acc-aulas { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mh-acc-aulas li { position:relative; padding-left:18px; font-size:13.5px; color:var(--mh-gray-300); line-height:1.5; }
.mh-acc-aulas li::before { content:''; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--mh-purple-soft); opacity:.75; }
@media (max-width:480px){
  .mh-acc-num { min-width:26px; height:26px; font-size:11.5px; }
  .mh-acc-cont { font-size:11px; }
}

/* -------------------------------------------------------------- materiais */
.mh-bonus { max-width:740px; margin:0 auto; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:var(--mh-radius-md); overflow:hidden; }
.mh-bonus-row { display:flex; justify-content:space-between; gap:14px; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
.mh-bonus-row:last-child { border-bottom:0; }
.mh-bonus-row strong { display:block; color:#fff; font-size:14px; font-weight:700; margin-bottom:3px; }
.mh-bonus-row span { display:block; font-size:13px; color:var(--mh-gray-300); line-height:1.55; }
.mh-bonus-val { flex-shrink:0; color:var(--mh-gold-soft); font-size:13.5px; font-weight:700; }
.mh-bonus-fecho { max-width:740px; margin:16px auto 0; text-align:center; font-size:14px; color:var(--mh-gray-300); line-height:1.6; }
.mh-bonus-fecho strong { color:#fff; }

/* ------------------------------------------------------ galeria: nota do pe */
.mh-gal-nota { text-align:center; font-size:12.5px; color:var(--mh-gray-400); line-height:1.6; margin:18px auto 0; max-width:640px; }

/* --------------------------------------------- formulario de lista de espera */
/* Mesmo material do formulario de lead da home: cartao branco sobre o fundo
   escuro, foco roxo, caixa de consentimento lilas. Input em 16px porque abaixo
   disso o iOS da zoom no campo e a pagina "pula" ao focar. */
.mh-espera {
  background:#fff; color:var(--mh-gray-900);
  border-radius:var(--mh-radius-lg);
  padding:22px 20px; max-width:420px; margin:0 auto;
  text-align:left;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.mh-campo { margin-bottom:14px; }
.mh-campo label { display:block; font-size:13px; font-weight:600; color:var(--mh-gray-900); margin-bottom:6px; }
.mh-espera input[type=text],
.mh-espera input[type=email],
.mh-espera input[type=tel],
.mh-espera input:not([type]) {
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font-size:16px; line-height:1.3;
  font-family:inherit;
  border:1.5px solid var(--mh-gray-200);
  border-radius:10px;
  background:#fff; color:var(--mh-gray-900);
  outline:none;
  -webkit-appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.mh-espera input::placeholder { color:var(--mh-gray-400); }
.mh-espera input:focus { border-color:var(--mh-purple); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.mh-campo-dupla { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
@media (min-width:480px){ .mh-campo-dupla { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; } }
.mh-check {
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--mh-gray-600); line-height:1.5;
  margin:6px 0 14px; padding:11px 12px; cursor:pointer;
  background:#faf5ff; border:1px solid var(--mh-purple-tint); border-radius:10px;
}
.mh-check input[type=checkbox] { width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--mh-purple); cursor:pointer; }
.mh-check a { color:var(--mh-purple); text-decoration:underline; font-weight:600; }
.mh-espera .mh-cta { width:100%; justify-content:center; min-height:50px; }
.mh-espera-nota { font-size:11.5px; color:var(--mh-gray-500); text-align:center; line-height:1.5; margin:12px 0 0; }
.mh-espera-ok { text-align:center; }
.mh-espera-ok strong { display:block; font-size:17px; font-weight:800; color:var(--mh-gray-900); margin-bottom:8px; }
.mh-espera-ok p { font-size:14px; color:var(--mh-gray-600); line-height:1.55; margin:0 0 16px; }
.mh-espera-ok a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 22px; border-radius:10px;
  background:var(--mh-purple); color:#fff;
  font-size:14px; font-weight:700; text-decoration:none;
}
.mh-espera-ok a:hover { background:var(--mh-purple-dark); color:#fff; }
.mh-captura-venda { max-width:760px; margin-left:auto; margin-right:auto; }
.mh-captura-venda .mh-section-sub { max-width:620px; margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------------ apoio */
.mh-vazio { text-align:center; color:var(--mh-gray-400); font-size:14px; }
.mh-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Alvo de toque de 44px em tudo que se clica, no celular. */
@media (max-width:900px){
  .mh-cta, .mh-topbar-cta, .mh-faq summary { min-height:44px; }
  .mh-cta, .mh-topbar-cta { display:inline-flex; align-items:center; }
  .mh-foot-cols a { padding:9px 0; }
}

/* Menos rolagem no celular: o dono pediu "formato de aplicativo". O respiro de
   64px entre secoes some quase meia tela em 360px. */
@media (max-width:640px){
  .mh-body .mh-container {
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .mh-hero-solo.mh-hero-venda { border-radius:20px; margin-bottom:30px; }
  .mh-hero-venda .mh-hero-content { padding-left:18px; padding-right:18px; }
  .mh-impacto { border-radius:18px; }
  .mh-section { margin-bottom:40px; }
  .mh-hero-solo { margin-bottom:32px; }
  .mh-hero-quem { margin-bottom:36px; }
  .mh-sub-head { margin:28px 0 14px; font-size:14.5px; }
  .mh-oferta-corpo { padding:18px 16px 16px; }
  .mh-oferta-topo { font-size:11.5px; padding:11px 14px; }
  .mh-aviso, .mh-ps-card { padding:18px 17px; }
  .mh-bonus-row { padding:14px 16px; flex-direction:column; gap:4px; }
  .mh-bonus-val { align-self:flex-start; }
  .mh-espera { padding:18px 16px; border-radius:var(--mh-radius-md); }
  .mh-sticky-cta { padding:8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .mh-sticky-cta-inner { gap:9px; }
  .mh-sticky-info .preco { font-size:16px; }
  .mh-sticky-info .preco-riscado,
  .mh-sticky-info .nota { font-size:10px; line-height:1.2; }
  .mh-sticky-cta a {
    min-height:44px;
    padding:10px 14px;
    font-family:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;
    font-size:13px;
    white-space:nowrap;
  }
}
@media (max-width:350px){
  .mh-body .mh-container {
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .mh-sticky-info .nota { display:none; }
  .mh-sticky-cta a { padding-left:12px; padding-right:12px; }
}

/* 26/09/2026: a arte do Sem Açúcar (colagem) tem o texto sobre a área escura da ESQUERDA e gente
   até a borda DIREITA: no centro, o 982x590 cortava o ombro do homem do quadro de baixo (auditoria
   de heroes, regra do dono: hero com pessoa não corta cabeça nem membro). Só esta arte, só desktop. */
@media (min-width:921px) {
  .mh-hero-venda-media img[src*="semacucar-hero-gatilho-v1"] { object-position:right center; }
}