@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Special+Gothic+Expanded+One&display=swap');
/* ─────────────────────────────────────────────────────────────────────────
 * mm-page-fixes.css
 *
 * Patches escopados em CSS pra resolver bugs visuais sem mexer em
 * mm-ab.js (que afeta elementos nativos do template Webflow e pode
 * quebrar animações da home).
 *
 * Regras AQUI devem ser:
 * - Mobile-first (≤991px ou ≤767px) quando possível
 * - Específicas (classes próprias, não selectors genéricos)
 * - Idempotentes (segura mesmo se a página já estiver correta)
 * ───────────────────────────────────────────────────────────────────────── */

/* ───── Fix 1 — CTA pre-footer centralizar em mobile ──────────────────────
 * .cta-block tem align-items:flex-start (desktop) sem override mobile.
 * Resultado: .free-tag (Comece de graça + linha squiggly) e
 * .download-buttons (App Store/Google Play) ficam à esquerda em mobile.
 * Solução: forçar centralização horizontal dentro de .cta-buttons. */
@media screen and (max-width: 991px) {
  .cta-buttons {
    align-items: center !important;
  }
  .cta-buttons .download-buttons {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .cta-buttons .free-tag {
    align-self: center !important;
    text-align: center !important;
  }
  .cta-buttons .free-tag .body-b2-bold,
  .cta-buttons .free-tag .hero-tag-line {
    text-align: center !important;
    width: auto !important;
  }
}

/* ───── Fix 2 — Footer categorizado em 4 colunas (Produto/Atendimento/
 *               Empresa/Legal) + socials separado ────────────────────────
 * mm-ab.js → reorganizeFooter() reconstrói .footer-right-content como
 * grid de 5 colunas (4 categorias + socials), cada uma com title.
 * Cada coluna usa .mm-footer-col + .mm-footer-col-title + .footer-list.
 *
 * Antes: 2 ULs flex side-by-side (Webflow base).
 * Agora: grid responsivo desktop → 2 cols tablet → 1 col mobile.
 *
 * .footer-list-item.socials fica isolado na 5ª coluna (mm-footer-col-socials)
 * no desktop; em mobile vira o último item full-width centralizado. */
.footer-right-content {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
  gap: 2.4rem 2rem !important;
  align-items: flex-start !important;
}
.mm-footer-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mm-footer-col-title {
  font-family: 'Satoshi Variable', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #71717a;
  margin: 0 0 1rem 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mm-footer-col .footer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-footer-col-socials .mm-footer-col-title {
  /* Socials title visualmente igual aos outros, mas a coluna inteira
     fica alinhada à direita no desktop pra não competir com texto */
  text-align: right;
}
.mm-footer-col-socials .footer-list {
  align-items: flex-end;
}

/* Tablet — 2 colunas com socials full-width abaixo */
@media screen and (max-width: 991px) {
  .footer-right-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1.6rem !important;
  }
  .mm-footer-col-socials {
    grid-column: 1 / -1;
    align-items: center;
  }
  .mm-footer-col-socials .mm-footer-col-title {
    text-align: center;
  }
  .mm-footer-col-socials .footer-list {
    align-items: center;
  }
}

/* Mobile — 1 coluna empilhada + socials centralizado no fim */
@media screen and (max-width: 580px) {
  .footer-right-content {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
  }
  .mm-footer-col-title {
    text-align: center;
  }
  .mm-footer-col .footer-list {
    align-items: center;
  }
  .footer-list-item.socials {
    width: 100% !important;
    justify-content: center !important;
  }
  .footer-list-item.socials .socials-icons.footer {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ───── Fix 3 — Hairline vertical + respiro no início da segunda section ──
 * Páginas: consultoria, método, medicina-natural (consult-hero +
 * sobre-pillars). Aumenta padding-top da próxima section pra dar respiro
 * antes da hairline + entre hairline e eyebrow ("O SINAL", "O problema"),
 * tudo dentro da própria segunda section. Inspiração: Asurex. */
section.consult-hero + section.sobre-pillars {
  position: relative;
  padding-top: 7rem !important;
}
section.consult-hero + section.sobre-pillars::before {
  content: '';
  position: absolute;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 56px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(175,255,56, 0.6) 30%,
    rgba(175,255,56, 0.6) 70%,
    transparent 100%
  );
  border-radius: 2px;
  z-index: 5;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  section.consult-hero + section.sobre-pillars {
    padding-top: 5.5rem !important;
  }
  section.consult-hero + section.sobre-pillars::before {
    height: 44px;
    top: 2rem;
  }
}

/* ───── Fix 7 — Navbar refinements ─────────────────────────────────────────
 * Desktop: gap menor entre items + font maior.
 * Mobile: font maior + menos respiro entre items + botão Entrar visível
 * ao lado do hamburger (e escondido do fim do menu pra não duplicar).
 * Logo "Mcorpo Coach" continua com a fonte default do template (Satoshi),
 * não tocamos. */
@media screen and (min-width: 992px) {
  .nav-menu {
    grid-column-gap: 1.6rem !important;
    gap: 1.6rem !important;
  }
  .nav-link {
    font-size: 1.05rem !important;
  }
}
@media screen and (max-width: 991px) {
  /* ── CAUSA RAIZ REAL do hamburger fora da tela (descoberta 2026-05-27 tarde) ──
     .nav-container tem `grid-column-gap: 5rem` (= 80px gap entre cada flex
     item). Em iPhone ~390px: LOGO + gap + ENTRAR + gap + HAMBURGER já
     excede a viewport antes de chegar no hamburger → overflow direita.
     5 tentativas anteriores falharam porque mexiam só em order/flex/float
     no .menu-button mas não tocavam no gap do container pai.
     Fix: zerar o gap em mobile + ajustar padding lateral. */
  .nav-container,
  .nav-container.down {
    grid-column-gap: 0 !important;
    column-gap: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }
  /* Webflow data-collapse="medium" agora esconde o drawer nativamente
     em ≤991px (HTMLs trocados de "tiny" → "medium"). Esta regra fica
     como belt+suspenders pra qualquer HTML residual ou edge case. */
  .navbar.w-nav .nav-menu-wrapper.w-nav-menu:not([data-nav-menu-open]) {
    display: none !important;
  }
  /* Mobile nav items: font ainda maior + ainda menos respiro vertical */
  .nav-menu .nav-link-wrapper:not(.mm-mobile-entrar-wrapper) .nav-link {
    font-size: 1.55rem !important;
    padding: 0.3rem 0 !important;
    line-height: 1.35 !important;
  }
  /* Esconde o "Entrar" sticky DENTRO do menu (já temos no topo, evita duplicação) */
  .mm-mobile-entrar-wrapper {
    display: none !important;
  }
  /* Order + margin-left:auto trick:
     - nav-buttons (Entrar) ganha margin-left:auto → empurra tudo antes pra esquerda e cola ele + tudo depois à direita
     - menu-button (hamburger) vem logo após Entrar (gap controlado)
     - Resultado: LOGO ........ ENTRAR · HAMBURGER (à direita, juntos, dentro do viewport) */
  .nav-buttons.navbar-set {
    display: flex !important;
    order: 2 !important;
    position: relative;
    z-index: 999;
    flex-shrink: 0;
    margin: 0 0 0 auto !important;
  }
  .menu-button {
    order: 3 !important;
    flex-shrink: 0 !important;
    margin-left: 0.65rem !important;
    /* Override Webflow defaults: float:right + display:block estavam fazendo
       o hamburger flutuar pra fora do flex flow (sumindo da tela) */
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  .nav-buttons.navbar-set .nav-entrar {
    padding: 0.55rem 1.3rem !important;
    font-size: 0.92rem !important;
    white-space: nowrap;
  }
  .nav-buttons.navbar-set .nav-entrar .mm-cart-count {
    display: none !important;
  }
  .nav-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ───── Fix 12 — Horizontal swipe/overflow em mobile ─────────────────────
 * Sintoma: passando o dedo pra esquerda/direita em mobile, o template
 * inteiro parece deslizar revelando "espaço extra" lateral.
 * Causa: elementos do template com width >100vw (menu-gradient 150%,
 * form-gradient 130%, blobs com inset negativo) escapam o viewport.
 * Eles deveriam ficar contidos pelo .page-wrapper mas ele não tem
 * overflow-x setado.
 * Fix: overflow-x:clip no .page-wrapper + body como fallback.
 *   - `clip` (moderno) não quebra position:sticky (filhos como navbar
 *     sticky continuam funcionando)
 *   - `hidden` no body como fallback pra browsers antigos
 * Aplicado em todos os viewports (não só mobile) porque o problema pode
 * acontecer em qualquer width onde o gradient/blob escapa. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body.page-body {
  position: relative;
}
.page-wrapper {
  overflow-x: clip;
  max-width: 100vw;
}

/* ───── Fix 11 — Sobre/Como Funciona: centralizar block-head + respiro ───
 * As 9 sections novas adicionadas em 2026-05-27 (5 em como-funciona +
 * 4 em sobre) usam `.benefits-text-wrapper.sobre-block-head` com
 * eyebrow + h2 + lede. O wrapper sem text-align:center fica left-aligned
 * e o lede gruda no card abaixo sem respiro.
 * Fix: centralizar + max-width pro lede não esticar feio + margin-bottom
 * pra dar respiro antes do grid de cards.
 * Idempotente — applies aos block-heads existentes (Como Funciona "As 4
 * etapas" e "Os 3 agentes IA") sem prejuízo (eles só têm eyebrow + h2). */
.benefits-text-wrapper.sobre-block-head {
  text-align: center !important;
  max-width: 56rem;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2.8rem !important;
}
.benefits-text-wrapper.sobre-block-head .sobre-eyebrow,
.benefits-text-wrapper.sobre-block-head .sobre-h1,
.benefits-text-wrapper.sobre-block-head .sobre-lede,
.benefits-text-wrapper.sobre-block-head .heading-4 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.benefits-text-wrapper.sobre-block-head .sobre-lede {
  max-width: 48rem !important;
}
@media screen and (max-width: 767px) {
  .benefits-text-wrapper.sobre-block-head {
    margin-bottom: 2rem !important;
  }
}

/* ───── Fix 10 — Hamburger virou 3 pontinhos (IRONEX-style) ───────────────
 * APENAS MOBILE (≤991px). No desktop o hamburger fica escondido pelo
 * Webflow (data-collapse="tiny" → .w-nav-button display:none ≥992px)
 * e a navbar normal cuida da nav — não tocamos.
 *
 * mm-ab.js → replaceHamburgerWithDots() substitui o conteúdo interno do
 * .menu-button.w-nav-button pelos 3 spans .mm-dot e adiciona .mm-round-menu.
 * (A injeção do HTML roda em qualquer viewport, mas como o botão fica
 * display:none no desktop, ninguém vê.)
 *
 * Estados (mobile only):
 *   Idle:   · · ·              (3 pontos brancos espalhados)
 *   Hover:  ···  + halo soft   (pontos se juntam no centro)
 *   Open:   pontos nas diagonais + halo cyan mais forte + dot central pulsa
 *
 * Cubic-bezier mate IRONEX (0.075, 0.82, 0.165, 1). */
@media screen and (max-width: 991px) {
  .menu-button.mm-round-menu {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    overflow: visible; /* halo precisa escapar */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .42s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .menu-button.mm-round-menu:active {
    transform: scale(0.94);
  }
  /* Halo gradient cyan→violet que aparece em hover/open */
  .menu-button.mm-round-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(175,255,56,0.22), rgba(175,255,56,0.16) 55%, transparent 78%);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1),
                transform .5s cubic-bezier(0.075, 0.82, 0.165, 1),
                background .42s ease;
    pointer-events: none;
    z-index: 0;
  }
  /* Override Webflow .menu-button.w--open { background: transparent } */
  .menu-button.mm-round-menu.w--open {
    background: transparent !important;
  }
  /* Esconde as 2 linhas antigas (caso fallback ou edits parciais existam) */
  .menu-button.mm-round-menu .menu-button-lines,
  .menu-button.mm-round-menu .menu-line {
    display: none !important;
  }
  /* Os 3 pontinhos — base */
  .menu-button.mm-round-menu .mm-dot {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    top: 50%;
    left: 50%;
    margin: -2.5px 0 0 -2.5px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
    transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1),
                background .42s ease,
                box-shadow .42s ease,
                opacity .42s ease;
  }
  .menu-button.mm-round-menu .mm-dot-1 {
    transform: translate3d(-11px, 0, 0);
  }
  .menu-button.mm-round-menu .mm-dot-3 {
    transform: translate3d(11px, 0, 0);
  }
  /* Hover: pontos se juntam + halo aparece */
  .menu-button.mm-round-menu:hover::before {
    opacity: 1;
    transform: scale(1);
  }
  .menu-button.mm-round-menu:hover .mm-dot-1 {
    transform: translate3d(-3px, 0, 0);
  }
  .menu-button.mm-round-menu:hover .mm-dot-3 {
    transform: translate3d(3px, 0, 0);
  }
  /* Open (Webflow seta .w--open quando hamburger abre o menu) */
  .menu-button.mm-round-menu.w--open::before {
    opacity: 1;
    transform: scale(1.08);
    background: radial-gradient(circle at center, rgba(175,255,56,0.38), rgba(175,255,56,0.22) 55%, transparent 78%);
  }
  .menu-button.mm-round-menu.w--open .mm-dot {
    background: #AFFF38;
    box-shadow: 0 0 8px rgba(175,255,56, 0.65);
  }
  .menu-button.mm-round-menu.w--open .mm-dot-1 {
    transform: translate3d(-8px, -8px, 0);
  }
  .menu-button.mm-round-menu.w--open .mm-dot-3 {
    transform: translate3d(8px, 8px, 0);
  }
  .menu-button.mm-round-menu.w--open .mm-dot-2 {
    transform: scale(1.45);
    background: #AFFF38;
    box-shadow: 0 0 10px rgba(175,255,56, 0.75);
  }
}
@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .menu-button.mm-round-menu,
  .menu-button.mm-round-menu::before,
  .menu-button.mm-round-menu .mm-dot {
    transition-duration: 1ms !important;
  }
}

/* ───── Fix 6 — CTA pre-footer headlines (h1s) centralizar em mobile ─────
 * .cta-block tem align-items:flex-start (desktop) sem override mobile.
 * Resultado: .cta-header (que contem 3 h1s "Comece pelo treino" etc) e
 * .cta-access-block (lista 🔥 bullets) ficam à esquerda em mobile.
 * No index funciona porque os textos "Baixe o / Mcorpo Coach / agora"
 * são longos e ocupam quase 100% da largura, mas em outras páginas como
 * agente-treino ("Comece / pelo / treino.") textos curtos viram esquerda. */
@media screen and (max-width: 767px) {
  .cta-block {
    align-items: center !important;
  }
  .cta-header {
    text-align: center !important;
    width: 100% !important;
    align-items: center !important;
  }
  .cta-header .heading-3,
  .cta-header h1 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .cta-access-block {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .cta-access-block .body-b3,
  .cta-access-block .body-b3.white {
    text-align: center !important;
    width: 100% !important;
  }
  .cta-buttons {
    width: 100% !important;
  }
}

/* ───── Fix 5 — Headlines + conteúdo do .app-card no footer mobile ───────
 * .app-card vira flex-flow:column em mobile mas mantém align-items:center
 * que vem do desktop — só que .footer-left-content em mobile tem
 * align-items:stretch (forçando width:100% nos filhos). Resultado: tudo
 * dentro (logo, "Comece a treinar hoje", App Store/Google Play, copyright)
 * fica à esquerda.
 * Solução: forçar center em todo o footer-left-content em mobile. */
@media screen and (max-width: 767px) {
  .footer-left-content {
    align-items: center !important;
    text-align: center !important;
  }
  .app-card-wrapper,
  .app-card {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .app-card {
    justify-content: center !important;
  }
  .app-start {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  .app-start .body-b2,
  .app-start .body-b2.white,
  .app-start .body-b2.white.footer {
    text-align: center !important;
  }
  .app-card-buttons {
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .footer-logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .copyright.mobile {
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
  }
}

/* ───── Fix 9 — Forms dos 3 agentes visíveis desde o load ─────────────────
 * Os HTMLs dos 3 agentes têm anti-flash do Webflow:
 *   html.w-mod-js:not(.w-mod-ix) .agent-form-card{opacity:0}
 * O IX2 só dispara o reveal quando o data-w-id parent entra no viewport,
 * o que com a hero + moving text + headline acima leva pra ~50% do form
 * já scrollado. Override: form visível desde o load (sem reveal animation,
 * mas é só o form — não tem efeito cinematográfico essencial). */
.agent-form-card {
  opacity: 1 !important;
  transform: none !important;
}

/* ───── Fix 8 — Moving text section (replicada do .categories-sc do index)
 * Section reusable: frase grande cinematográfica com efeito de reveal
 * por scroll (gradient cinza→branco→cinza atravessa o texto).
 * Inserida em agente-treino/nutri/stack, agentes, metodo, medicina-natural
 * e consultoria — entre o hero e a primeira section de conteúdo.
 * JS: js/mm-moving-text.js. */
.mm-moving-text-sc {
  background: #000;
  position: relative;
  z-index: 1;
}
.mm-moving-text-height {
  height: 320vh;        /* alto pra dar scroll runway longo (suave) */
  position: relative;
}
.mm-moving-text-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
}
.mm-moving-text-inner {
  max-width: 90rem;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.mm-moving-text {
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 1.1 !important;
}
[moving-text] {
  overflow: hidden;
  background: linear-gradient(90deg, #1a1a1a, #fff, #1a1a1a);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: -500% 0;  /* invisível por default antes do JS rodar */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0);
}
@media screen and (max-width: 991px) {
  .mm-moving-text-height { height: 260vh; }
}
@media screen and (max-width: 767px) {
  .mm-moving-text-height { height: 220vh; }
  .mm-moving-text-sticky { padding: 0 1.5rem; }
}

/* ───── Fix 4 — Hero pills empilhadas (1 por linha) em mobile ─────────────
 * Páginas: agente-treino, agente-nutricao, agente-stack.
 * Decisão (após testar 1+2 e ficar feio): em mobile, melhor 1 pill por
 * linha empilhada vertical, todas centralizadas. Mantém clean e legível
 * com qualquer tamanho de texto. */
@media screen and (max-width: 767px) {
  .agent-hero-pills {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.55rem !important;
  }
  .agent-hero-pills .agent-hero-pill {
    width: auto !important;
    text-align: center !important;
    flex: 0 0 auto !important;
  }
}

/* =============================================================
   PELE APEX — a navbar do site
   =============================================================
   ⚠️ Este bloco mora AQUI e nao no CSS do Webflow de proposito: aquele
   arquivo e GERADO, e uma republicacao do template apagaria a edicao. Aqui
   ela sobrevive.

   ⚠️ Escopo deliberadamente curto — o dono pediu, pra HOME, somente o
   repasse de cor do NOME, do LOGO e do BOTAO ENTRAR. A home e a fonte da
   linguagem visual do site; mexer na estrutura dela nao estava em questao.
   ============================================================= */

/* O "Entrar" era um comprimido AZUL iridescente (#AFFF38 -> #7FB0FF). O CTA
   da casa e limao — e a tinta dentro dele e escura, nunca branca. */
.nav-entrar {
  background: linear-gradient(110deg, #93F500 0%, #AFFF38 26%, #CCFF80 50%, #AFFF38 74%, #93F500 100%) !important;
  background-size: 220% 100% !important;
  color: #181B1B !important;
}
/* ⚠️ O halo tambem: um objeto nao pode brilhar numa cor que ele nao e. */
.nav-entrar:hover {
  box-shadow: 0 9px 24px -8px rgba(175, 255, 56, 0.62) !important;
}

/* O carrinho vive ao lado do Entrar e usava o mesmo azul. */
.mm-nav-cart {
  border-color: rgba(175, 255, 56, 0.34) !important;
  color: #AFFF38 !important;
}
.mm-nav-cart:hover {
  background: rgba(175, 255, 56, 0.06) !important;
}

/* O CHAO. Era PRETO PURO (#000). O chao da casa e um quase-preto FRIO — e a
   diferenca importa: sobre preto puro o limao fica neon e duro; sobre o
   quase-preto ele assenta. E o mesmo tom do `ApexBackdrop` do app, entao o
   site e o produto passam a pisar no mesmo lugar.
   ⚠️ So o CHAO EXTERNO. O painel azul do hero — que e a identidade da home —
   nao foi tocado: azul e a cor da ESTRUTURA na lingua da casa, e um hero
   limao mataria o sentido do limao. */
body {
  background-color: #0C1011 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   O CHAO APEX — em TODAS as paginas, de uma vez
   ═══════════════════════════════════════════════════════════════════════
   Lei do dono: se o fundo deixa de ser preto puro, deixa em TODA pagina.
   Fundo e justamente o que mais denuncia inconsistencia entre telas — uma
   pagina preta ao lado de uma com brilho le como duas marcas.

   Por isso a regra mora AQUI, na folha unica que as 60 paginas carregam:
   nao existe como uma ficar pra tras.

   O brilho e o do heroi do Apex — o limao entrando como LUZ pelo alto e
   pela direita, nunca como campo. Alfa baixissimo (6% e 3,5%): o suficiente
   pra o preto deixar de ser plano, longe do ponto em que vira barro.
   `fixed` faz a luz ficar parada enquanto a pagina rola, como um ambiente,
   em vez de subir junto com o conteudo. */
body.page-body{
  background-color:#0C1011 !important;
  background-image:
    radial-gradient(1100px 620px at 50% -8%,  rgba(175,255,56,.060), transparent 62%),
    radial-gradient(820px 560px at 100% 6%,   rgba(175,255,56,.035), transparent 60%),
    radial-gradient(760px 520px at 0% 88%,    rgba(247,208,191,.022), transparent 62%) !important;
  background-attachment: fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}

/* ═══ o rodape de direitos, centralizado em TODAS as paginas ════════════
   Ele nasce dentro da coluna da esquerda do rodape (x=158, 375px de
   largura), entao lia como legenda daquela coluna e nao como a linha de
   fecho da pagina. Medido: era assim em TODAS, inclusive na home.
   Agora ele atravessa o rodape inteiro e centraliza. O respiro extra
   embaixo abre o espaco que ele passa a ocupar. */
.container.footer-s{ position:relative; padding-bottom:5rem; }
.footer-left-content .copyright.desktop{
  position:absolute; left:0; right:0; bottom:1.4rem;
  text-align:center;
}
.copyright.mobile{ text-align:center; }

/* ═══ o "Life" do nome, na manuscrita da casa ═══════════════════════════
   ⚠️ NAO e a Rock Salt do app, e a escolha foi MEDIDA na tela: a Rock Salt
   so tem formas de caixa alta, entao "Life" saiu como um rabisco em
   maiusculas, ilegivel no tamanho da marca. Ela funciona no wizard do app
   porque la e uma anotacao pequena ("feito para voce"), nao um NOME.
   Caveat tem minusculas de verdade e le como assinatura ao lado do
   "Mcorpo" em negrito.

   ⚠️ Tres ajustes vem JUNTO com a troca, e nenhum e opcional:
     1. TAMANHO. Rock Salt desenha bem maior que a Satoshi no mesmo `px` —
        sem reduzir, "Life" fica mais alto que "Mcorpo" e a marca desalinha.
     2. LINHA DE BASE. A manuscrita assenta mais alto; o deslocamento
        devolve as duas palavras pra mesma linha.
     3. ESPACO. Rock Salt tem muito ar proprio; o respiro da esquerda evita
        que ela encoste no "Mcorpo".
   O `!important` existe porque a cor e o tamanho vem de style inline. */

.mm-life{
  font-family:'Caveat', 'Segoe Script', cursive !important;
  font-weight:700 !important;
  font-size:1.34em !important;
  letter-spacing:0 !important;
  margin-left:.16em;
  position:relative;
  top:.03em;
}

/* ═══ O CHAO APEX PRECISA PASSAR ═══════════════════════════════════════
   O degrade vive no `body`, mas cada `<section>` pintava o proprio PRETO
   PURO opaco por cima — entao o brilho existia e nunca aparecia. Medido no
   navegador: `body` = rgb(12,16,17) com o degrade, e a secao em cima =
   rgb(0,0,0) chapado.

   ⚠️ A LISTA E EXPLICITA, e isso e de proposito. Uma regra ampla
   (`section{background:transparent!important}`) apagaria tambem as secoes
   que TEM cor propria — a de fundo BRANCO da home e a da loja, que o dono
   confirmou duas vezes que permanecem. Aqui so entram as que foram
   MEDIDAS pintando preto puro, sem imagem de fundo.

   ⛔ `.rotate-sc` FICOU DE FORA e nao pode voltar: e a secao dos 4 VIDEOS,
   a de fundo claro que o dono confirmou duas vezes que permanece (na home e
   na loja). Ela entrou na minha primeira lista porque foi MEDIDA preta — os
   videos ainda nao tinham carregado no momento da medicao, e o que respondeu
   foi o fundo por tras deles. Licao: medir superficie com midia dentro exige
   esperar a midia.

   ⭐ `.mm-moving-text-sc` e a secao da frase que anda ("Defina seu
   objetivo") — ela estava entre as pretas, e por isso a frase corria sobre
   um retangulo preto no meio de uma pagina com chao. */
section.sobre-sec,
section.mm-moving-text-sc,
section.categories-sc,
section.track-sc,
section.loja-hero-sc,
section.loja-supps-hero-sc,
section.loja-catalog-sc,
section.loja-detail-sc,
section.loja-trust-sc,
section.loja-bridge-sc,
section.loja-nutrition-sc,
section.loja-filter-sc,
section.loja-kind-sc,
section.ck-empty-sc,
section.ck-main-sc,
section.ck-canceled-sc,
section.success-next-sc{
  background-color: transparent !important;
}

/* ═══ a headline da hero da home ═══════════════════════════════════════
   "Seu ritmo, hoje", com "hoje" na segunda linha, em Special Gothic
   Expanded One — a display da casa (a mesma familia `Gothic` cravada no
   tema do Core). Caixa baixa, como o dono pediu: a Special Gothic ja e
   larga e imponente por desenho; em caixa alta ela vira grito.

   ⚠️ A entrelinha PRECISA encolher junto. Uma display expandida herda a
   entrelinha da fonte anterior e as duas linhas ficam com um vao no meio
   grande o bastante pra parecerem duas frases, e nao uma. */
.mm-hero-headline{
  font-family:'Special Gothic Expanded One','Wixmadefordisplay',sans-serif !important;
  font-weight:400 !important;
  text-transform:none !important;
  line-height:.92 !important;
  letter-spacing:-.005em !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN · SIGNUP · ESQUECI A SENHA — estrutura Spector, cores Apex
   ═══════════════════════════════════════════════════════════════════════ */

/* ── O GRAO SOBRE O VIDEO ──────────────────────────────────────────────
   A receita do Apex: ladrilho de 256px a 4%, com mascara diagonal a 305°.
   O grao NAO e enfeite — ele tira o "digital limpo demais" do veu sobre o
   video e faz o cartao pousar num ambiente, nao numa cor.
   ⚠️ `pointer-events:none` e obrigatorio: sem isso a camada engole o clique
   do formulario inteiro, e o defeito nao aparece em foto nenhuma. */
/* ⚠️ MEDIDO, NÃO SUPOSTO (23/08): a 5,5% e sem blend, este grão acrescentava
   **0,05 de desvio de brilho** sobre o vídeo — ou seja, NADA. Ele existia no
   HTML, passava em qualquer revisão de código, e não estava na tela.

   A correção não é subir a opacidade: um cinza chapado mais forte vira VÉU e
   engole o vídeo do dono, que é justamente o que uma sessão anterior proibiu
   ("aprofundar o véu o teria engolido"). O que faz grão parecer grão é o
   `mix-blend-mode: overlay`: o cinza médio do ladrilho vira NEUTRO, e o ruído
   passa a modular o brilho para cima E para baixo. O vídeo continua
   respirando, e a superfície ganha textura.

   ⚠️ `isolation:isolate` no pai NÃO é preciso aqui porque a seção já cria
   contexto de empilhamento pelo `position/z-index` — mas se um dia o grão
   sumir de novo, é o primeiro lugar a olhar. */
.login-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.30;
  /* ⚠️ NADA DE `mix-blend-mode` AQUI, e a razão é física: `overlay` sobre um
     fundo escuro se comporta como `multiply` e PRESERVA as sombras. Medido: o
     grão tocava 78% dos pixels e movia 0,78 nível de brilho — presente no
     código, invisível no olho. Sobre quase-preto, grão se faz com ALFA. */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'>\
<filter id='g'>\
<feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='matrix' values='0 0 0 0 0.99 0 0 0 0 0.99 0 0 0 0 0.96 1 0 0 0 -0.30'/>\
</filter>\
<rect width='256' height='256' filter='url(%23g)'/></svg>");
  background-size:256px 256px;
  -webkit-mask-image:linear-gradient(305deg,#000 0%,rgba(0,0,0,.35) 58%,transparent 100%);
  mask-image:linear-gradient(305deg,#000 0%,rgba(0,0,0,.35) 58%,transparent 100%);
}

/* ── O CARTAO ──────────────────────────────────────────────────────────
   Chao Apex (quase-preto quente) no lugar do azul-ardosia, e o raio 16 do
   template. A ordem e reescrita aqui em vez de no HTML: em Spector o
   RÓTULO vem antes do titulo, porque ele diz ONDE voce esta e o titulo diz
   o que voce FAZ. */
.login-card{
  display:flex; flex-direction:column;
  background:rgba(24,27,27,.86) !important;
  border:1px solid rgba(252,245,238,.09) !important;
  border-radius:16px !important;
}
.login-logo{ order:1 }
.login-sub{ order:2 }
.login-title{ order:3 }
.login-form{ order:4 }

/* o rotulo vira o kicker: caixa alta, entreletra aberta, tinta quieta */
.login-sub{
  font-size:.68rem !important; font-weight:800 !important;
  letter-spacing:.22em !important; text-transform:uppercase !important;
  color:rgba(252,245,238,.42) !important;
  margin:1.15rem 0 .45rem !important;
}
/* o fio sob o kicker — a assinatura editorial do Spector */
.login-sub::after{
  content:""; display:block; width:34px; height:1px; margin:.7rem auto 0;
  background:linear-gradient(90deg,#AFFF38,rgba(175,255,56,0));
}
.login-title{
  font-family:'Special Gothic Expanded One','Wixmadefordisplay',sans-serif !important;
  font-weight:400 !important; letter-spacing:-.01em !important;
  color:#FCF5EE !important; margin:.2rem 0 1.9rem !important;
}

/* ── O INDICE DOS CAMPOS ───────────────────────────────────────────────
   A coluna de numerais do Spector. Vem por CSS, sem tocar o HTML — o
   numeral e um fato sobre a POSICAO do campo, nao conteudo do rotulo.
   Quieto de proposito: ele ordena, nao compete. */
.login-field{ position:relative }
.login-field .lable{
  display:flex; align-items:baseline; gap:.6rem;
  font-size:.78rem !important; font-weight:800 !important;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(252,245,238,.62) !important;
}
.login-field .lable::before{
  font-family:'Satoshi',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; color:rgba(252,245,238,.24);
}
.login-form .login-field:nth-of-type(1) .lable::before{ content:"01" }
.login-form .login-field:nth-of-type(2) .lable::before{ content:"02" }

/* ── O FIO QUE SE DESENHA ──────────────────────────────────────────────
   No repouso o campo e uma linha quieta; no foco o limao CRESCE da
   esquerda pra direita em vez de acender de uma vez. E o gesto do Kyma:
   dado entrando pede curva, nao mola. */
.login-card .text-field{
  background:transparent !important;
  border:0 !important; border-bottom:1px solid rgba(252,245,238,.16) !important;
  border-radius:0 !important; padding-left:0 !important;
  color:#FCF5EE !important;
}
.login-field::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:#AFFF38; transition:width .42s cubic-bezier(.22,1,.36,1);
}
.login-field:focus-within::after{ width:100% }
.login-card .text-field:focus{ border-bottom-color:rgba(252,245,238,.16) !important }
.login-card .text-field::placeholder{ color:rgba(252,245,238,.24) }

/* ── O CTA ─────────────────────────────────────────────────────────────
   Pilula, limao, tinta quase-preta — a assinatura do Apex. */
.login-btn{
  border-radius:9999px !important;
  color:#181B1B !important; font-weight:800 !important;
  letter-spacing:.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN — o revamp de verdade: a PAGINA vira editorial, nao so o cartao
   ═══════════════════════════════════════════════════════════════════════
   Antes: um cartao centralizado sobre video. Bonito, mas mudo — nao dizia
   nada, e a tela mais visitada do produto e uma oportunidade de dizer.

   Agora e Spector na escala da pagina: COLUNA DE INDICE a esquerda (rotulo,
   titulo display, tres fatos numerados) e o formulario a direita. O olho
   entra pela marca e sai pelo campo — que e a ordem que a pessoa precisa. */
@media screen and (min-width:992px){
  .login-sec{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,31rem);
    gap:5rem; align-items:center;
    /* ⚠️ O LIMITE VEM DO PADDING, NAO DE max-width. Com `max-width` na
       secao, o VIDEO (que e `position:absolute; inset:0` dentro dela) ficava
       preso ao miolo e apareciam duas EMENDAS VERTICAIS onde ele acabava —
       o fundo da pagina de um lado, o video do outro. O padding elastico
       centra o conteudo e deixa a secao sangrar ate a borda. */
    padding:9rem max(2rem, calc((100% - 76rem) / 2)) 5rem !important;
  }
  .login-editorial{ position:relative; z-index:2 }
  .login-card{ margin:0 !important }
}
/* No telefone a coluna editorial vira a ABERTURA e o formulario segue
   embaixo — a mesma leitura, empilhada. */
.login-editorial{ position:relative; z-index:2; max-width:34rem; margin:0 auto 2.6rem }

.login-eyebrow{
  font-family:'Satoshi',sans-serif; font-size:.68rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(252,245,238,.42); margin:0;
}
.login-eyebrow::after{
  content:""; display:block; width:38px; height:1px; margin:.85rem 0 0;
  background:linear-gradient(90deg,#AFFF38,rgba(175,255,56,0));
}
.login-hero{
  font-family:'Special Gothic Expanded One','Wixmadefordisplay',sans-serif;
  font-weight:400; font-size:clamp(2.6rem,5.2vw,4.4rem); line-height:.92;
  letter-spacing:-.01em; color:#FCF5EE; margin:1.5rem 0 1.1rem;
}
.login-lede{
  font-family:'Satoshi',sans-serif; font-size:1.05rem; line-height:1.6;
  color:rgba(252,245,238,.56); margin:0; max-width:30rem;
}

/* ── OS TRES FATOS ─────────────────────────────────────────────────────
   Coluna de numerais + fio por item. E o gesto do Spector: o numeral
   ORDENA e fica quieto; quem fala e o fato. */
.login-facts{ list-style:none; margin:2.2rem 0 0; padding:0 }
.login-facts li{
  display:flex; align-items:baseline; gap:.95rem;
  padding:.85rem 0; border-top:1px solid rgba(252,245,238,.08);
  font-family:'Satoshi',sans-serif; font-size:.96rem; line-height:1.45;
  color:rgba(252,245,238,.74);
}
.login-facts li:last-child{ border-bottom:1px solid rgba(252,245,238,.08) }
.login-facts span{
  flex:none; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  color:rgba(175,255,56,.62);
}

/* ── O CARTAO PERDE O DISPLAY ──────────────────────────────────────────
   O titulo grande mudou de lugar: agora ele e da PAGINA. Deixar dois
   titulos display na mesma tela faria os dois brigarem, e o cartao passa a
   ser o que ele e — o lugar de digitar. */
@media screen and (min-width:992px){
  .login-card .login-title{
    font-family:'Satoshi',sans-serif !important;
    font-size:1.02rem !important; font-weight:800 !important;
    letter-spacing:.18em !important; text-transform:uppercase !important;
    color:rgba(252,245,238,.72) !important;
    margin:.9rem 0 1.7rem !important;
  }
  .login-card .login-sub{ display:none !important }
  .login-card .login-logo{ margin:0 0 .2rem !important }
  .login-card .login-title{ text-align:left !important }
}

/* ── O VEU SOBRE O VIDEO ───────────────────────────────────────────────
   Com a coluna editorial, o texto passou a morar SOBRE o video, e o veu
   antigo (uniforme) deixava manchas claras atravessarem a leitura.
   Agora ele e o chao Apex e pesa MAIS DE UM LADO: escuro atras do texto,
   aberto do outro, pra o video continuar respirando. E o gesto do cartaz —
   a imagem nao e apagada, e organizada. */
.login-ov{
  background:
    linear-gradient(105deg, rgba(12,16,17,.93) 0%, rgba(12,16,17,.86) 38%,
                            rgba(12,16,17,.62) 66%, rgba(12,16,17,.80) 100%),
    radial-gradient(120% 90% at 8% 40%, rgba(175,255,56,.05), transparent 62%)
    !important;
}

/* ═══ DOIS DEFEITOS QUE SO O TELEFONE MOSTRA ════════════════════════════

   1) A MARCA DUPLICADA — "Mcorpo Life" por cima de "Mcorpo Life".
   O logo tem DUAS camadas empilhadas: a de repouso e a de hover (tudo
   limao), que o IX2 do Webflow mantem a opacity 0 e revela no ponteiro. No
   telefone NAO HA ponteiro, e em algumas paginas a camada de hover nasce
   VISIVEL — as duas aparecem juntas e a palavra sai dobrada.
   ⚠️ A regra vale pro site inteiro, nao so pras paginas de login: e a mesma
   navbar em todas, e o defeito acompanha.
   O `@media (hover:hover)` e o que separa: so onde existe ponteiro o hover
   volta a existir. */
.logo-svg.hover{ opacity:0 !important; transition:opacity .22s ease }
@media (hover:hover) and (pointer:fine){
  .logo:hover .logo-svg.hover{ opacity:1 !important }
  .logo:hover .logo-svg:not(.hover){ opacity:0; transition:opacity .22s ease }
}

/* 2) NO TELEFONE A COLUNA EDITORIAL E O CARTAO SE SOBREPUNHAM.
   `.login-sec` e um flex CENTRALIZADO — com dois filhos eles viram duas
   colunas lado a lado e colidem. Empilhar e o comportamento certo abaixo
   do ponto onde a grade de duas colunas entra. */
@media screen and (max-width:991px){
  .login-sec{ flex-direction:column !important; justify-content:flex-start !important }
  .login-editorial{ width:100% }
  .login-card{ width:100% }
}

/* ═══════════════════════════════════════════════════════════════════════
   TERMOS · PRIVACIDADE · EXCLUIR CONTA — estrutura Spector, cores Apex
   ═══════════════════════════════════════════════════════════════════════
   Sao documentos LONGOS que ninguem le de cabo a rabo — a pessoa CACA uma
   coisa. Entao o trabalho aqui nao e "deixar bonito", e deixar NAVEGAVEL:
   um sumario no topo, o numero de cada secao virando coluna de indice, e
   fio entre secoes pra o olho achar onde uma acaba. */

/* ── A ABERTURA ────────────────────────────────────────────────────────
   Rotulo quieto com fio, titulo display, e a data como FATO — nao como
   subtitulo, que e o que ela era. */
main.doc{ max-width:52rem }
main.doc > h1{
  font-family:'Special Gothic Expanded One','Wixmadefordisplay',sans-serif !important;
  font-weight:400 !important; font-size:clamp(2.1rem,4.6vw,3.2rem) !important;
  line-height:.94 !important; letter-spacing:-.01em !important;
  color:#FCF5EE !important; margin:0 0 1.1rem !important;
}
main.doc > h1::before{
  content:"Documento · Mcorpo Life";
  display:block; font-family:'Satoshi',sans-serif;
  font-size:.66rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(252,245,238,.40); margin-bottom:1.15rem;
}
main.doc > h1::after{
  content:""; display:block; width:38px; height:1px; margin:1.1rem 0 0;
  background:linear-gradient(90deg,#AFFF38,rgba(175,255,56,0));
}
.doc .updated{
  font-family:'Satoshi',sans-serif; font-size:.72rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(252,245,238,.42) !important; margin:1.4rem 0 0 !important;
}
.doc .lawyer-note{
  border-left:2px solid rgba(247,208,191,.55) !important;
  background:rgba(247,208,191,.05) !important;
  color:rgba(252,245,238,.70) !important;
  padding:.9rem 1.1rem !important; border-radius:0 10px 10px 0 !important;
  margin:1.6rem 0 0 !important; font-style:normal !important;
}

/* ── O INDICE DAS SECOES ───────────────────────────────────────────────
   O numero sai da linha do titulo e vira COLUNA a esquerda: ele ordena e
   fica quieto, o titulo e quem fala. E cada secao ganha um fio acima —
   sem ele o documento e um bloco unico de 15 titulos iguais. */
.doc h2{
  position:relative; display:flex; align-items:baseline; gap:.85rem;
  border-top:1px solid rgba(252,245,238,.09);
  padding-top:1.9rem !important; margin-top:3rem !important;
  color:#FCF5EE !important;
}
.doc h2 .num{
  flex:none; font-family:'Satoshi',sans-serif;
  font-size:.78rem; font-weight:800; letter-spacing:.06em;
  color:rgba(175,255,56,.62);
}
.doc h3{ color:rgba(252,245,238,.88) !important }
.doc p, .doc li{ color:rgba(252,245,238,.68) !important }
.doc strong{ color:#FCF5EE }
/* ⚠️ SO OS LINKS DE TEXTO CORRIDO. A regra anterior era `.doc a`, que tem
   especificidade (0,1,1) e vencia o `.cta-mail{color:#0b0b0d}` (0,1,0) — os
   dois botoes da pagina de exclusao ficaram com TINTA LIMAO SOBRE FUNDO
   LIMAO, invisiveis. Um seletor generico de `a` dentro de um container
   atropela todo botao que more ali dentro.

   ⚠️ Restringir a `.doc p a` NAO BASTOU: os botoes estao DENTRO de um
   paragrafo (`p.cta-mail`... na verdade `<p><a class="cta-mail">`), entao a
   regra continuava vencendo. O `:not([class])` e o corte certo — link de
   texto corrido nao tem classe, botao tem. Quem apontou o caminho foi o
   navegador: pedir a ele QUAL regra venceu, em vez de deduzir. */
.doc p a:not([class]), .doc li a:not([class]), .doc td a:not([class]){ color:#AFFF38 }

/* ── O SUMARIO ─────────────────────────────────────────────────────────
   Injetado por JS a partir dos proprios h2 — nao ha lista pra manter em
   dia, e uma secao nova entra sozinha. */
.doc-sumario{
  margin:2.6rem 0 0; padding:1.4rem 1.5rem;
  border:1px solid rgba(252,245,238,.09); border-radius:16px;
  background:rgba(255,255,255,.02);
}
.doc-sumario-titulo{
  font-family:'Satoshi',sans-serif; font-size:.66rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(252,245,238,.40); margin:0 0 .9rem;
}
.doc-sumario ol{ list-style:none; margin:0; padding:0;
  columns:2; column-gap:2rem }
@media screen and (max-width:640px){ .doc-sumario ol{ columns:1 } }
.doc-sumario li{ margin:0 0 .5rem !important; break-inside:avoid }
.doc-sumario a{
  display:flex; gap:.7rem; align-items:baseline;
  color:rgba(252,245,238,.72) !important; text-decoration:none !important;
  font-size:.93rem; line-height:1.35;
  transition:color .2s ease;
}
.doc-sumario a:hover{ color:#AFFF38 !important }
.doc-sumario a span{
  flex:none; font-size:.7rem; font-weight:800;
  color:rgba(175,255,56,.5);
}

/* ═══ NO CELULAR, O TEXTO GANHA A LARGURA DOS CARDS ═════════════════════
   🔴 A CAUSA, achada no CSS do template:
       @media (max-width:479px){ .benefits-text-wrapper{ width:15rem } }
   Uma largura FIXA de 15rem pra todo texto de heroi e de secao. Medido num
   aparelho de 390px: os CARDS ocupam 340px comecando em x=25, e o TEXTO
   ocupa 234px comecando em x=78 — cem pixels mais estreito e tres vezes
   mais afastado da borda. E o que dava a sensacao de texto "confinado no
   meio" enquanto o resto da pagina respirava.

   Agora o texto usa a largura do container, igual aos cards. O recuo passa
   a ser UM SO na tela — o do container — em vez de dois concorrentes.

   ⚠️ So no telefone. No desktop a coluna estreita e proposital: 15rem la
   nao existe, e o `max-width:60rem` continua dando a medida editorial. */
@media screen and (max-width:479px){
  .benefits-text-wrapper{ width:auto !important; max-width:none !important; }
}

/* ⚠️ O INDICE PROPRIO da pagina de exclusao (`.toc`) tambem foi atropelado:
   os links dele estao dentro de `li` e NAO TEM CLASSE, entao o
   `.doc li a:not([class])` os pintava de limao — o indice inteiro verde, em
   vez de limao so no item sob o ponteiro.
   A lei que fica: seletor de texto corrido nunca deve alcancar NAVEGACAO.
   Aqui o `.toc` volta a tinta clara e ganha o mesmo tratamento do sumario
   das outras duas paginas, pra as tres lerem igual. */
.doc .toc a{ color:rgba(252,245,238,.74) !important; transition:color .2s ease }
.doc .toc a:hover{ color:#AFFF38 !important; text-decoration:none }
.doc .toc li::before{ color:rgba(175,255,56,.5) !important }
.doc .toc{
  border:1px solid rgba(252,245,238,.09) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.02) !important;
}
.doc .toc-label{
  font-family:'Satoshi',sans-serif !important; font-size:.66rem !important;
  font-weight:800 !important; letter-spacing:.22em !important;
  color:rgba(252,245,238,.40) !important;
}

/* ── "já preenchemos para você" ─────────────────────────────────────────
   O aviso dos formulários de agente, quando o onboarding já respondeu.

   ⚠️ PÊSSEGO, nunca limão. Limão é do que a pessoa CONQUISTA ou ESCOLHE; um
   campo herdado ela ainda não escolheu, só herdou. Pintá-lo de limão
   colocaria uma informação de estado no mesmo tom das respostas dela.

   ⚠️ E o bloco não existe no HTML: o JS o insere depois do cabeçalho do
   formulário e SÓ quando há algo recuperado — um aviso que diz "recuperamos
   0 campos" é pior que silêncio.                                          */
.mm-contexto-aviso{
  display:flex; align-items:flex-start; gap:.7rem;
  max-width:48rem; margin:-1.2rem auto 2.4rem; padding:.9rem 1.1rem;
  border-radius:1rem; text-align:left;
  background:rgba(247,208,191,.07);
  border:1px solid rgba(247,208,191,.22);
}
.mm-contexto-aviso-icone{
  flex:0 0 auto; display:grid; place-items:center;
  width:1.9rem; height:1.9rem; border-radius:.62rem;
  background:rgba(247,208,191,.12); color:#F7D0BF;
}
.mm-contexto-aviso-icone svg{ width:.95rem; height:.95rem }
.mm-contexto-aviso-texto{
  font-family:'Satoshi Variable',sans-serif; font-weight:700;
  font-size:.86rem; line-height:1.45; color:#c9c9cf; min-width:0;
}
.mm-contexto-aviso-texto b{
  display:block; margin-bottom:.16rem;
  font-size:.62rem; font-weight:900; letter-spacing:.13em;
  color:#F7D0BF;
}
.mm-contexto-aviso-texto i{ font-style:normal; font-weight:600; color:#8b8b92 }
@media screen and (max-width:479px){
  .mm-contexto-aviso{ margin:-.6rem 0 1.8rem }
}