/* ─────────────────────────────────────────────────────────────────────────
 * 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(34, 211, 238, 0.6) 30%,
    rgba(76, 143, 255, 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 "MMcorpo 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(34,211,238,0.22), rgba(76, 143, 255,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(34,211,238,0.38), rgba(76, 143, 255,0.22) 55%, transparent 78%);
  }
  .menu-button.mm-round-menu.w--open .mm-dot {
    background: #22D3EE;
    box-shadow: 0 0 8px rgba(34, 211, 238, 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: #4C8FFF;
    box-shadow: 0 0 10px rgba(76, 143, 255, 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 / MMcorpo 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;
  }
}