/* ========================================================================== MGX — camada de COMPORTAMENTO do clone (estados que o JS acende) O clone estático vem sem o JS da origem, de propósito. O CSS clonado, porém, guarda o sistema de revelação inteiro: `.scroll-bottom`, `.scroll-top`, `.scroll-left`, `.scroll-right` e `.txtdestaque1` declaram o estado ESCONDIDO (opacity 0, deslocado, desfocado) e esperam alguém acender. Medido em 22/09/2026: 45 de 50 elementos com essas classes estavam com opacity 0 — 10,9% da área da página invisível, inclusive títulos de seção e parágrafos inteiros. (Há duas regras `.scroll-bottom` no CSS clonado, com valores opostos; vence a da linha 2067, que esconde.) Aqui está o estado ACESO. Quem acende é o mgx-motion.js, ao elemento entrar na tela. A classe é nova (`.mgx-visivel`) para não disputar com as duas regras conflitantes da origem, e o seletor repete a classe de estado para ganhar especificidade sem precisar de !important. ========================================================================== */ :is(.scroll-bottom, .scroll-top, .scroll-left, .scroll-right, .txtdestaque1).mgx-visivel { opacity: 1; transform: none; filter: none; } /* Seguro contra JS quebrado: sem o motor no ar, nada pode ficar escondido. O motor marca assim que roda; enquanto isso NÃO estiver marcado, as classes de estado escondido ficam neutralizadas. */ html:not(.mgx-motor) :is(.scroll-bottom, .scroll-top, .scroll-left, .scroll-right, .txtdestaque1) { opacity: 1; transform: none; filter: none; } /* Menos movimento: tudo nasce aceso, sem transição de entrada. */ @media (prefers-reduced-motion: reduce) { :is(.scroll-bottom, .scroll-top, .scroll-left, .scroll-right, .txtdestaque1) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ========================================================================== CARROSSÉIS — a origem usava Swiper; aqui é esteira em CSS puro. O mgx.js duplica a fita e aplica .mgx-esteira; estas regras dão a largura certa de cada slide para nada esticar nem colapsar. ========================================================================== */ .swiper-wrapper.mgx-esteira { display: flex; width: max-content; align-items: stretch; } .swiper-wrapper.mgx-esteira > .swiper-slide { flex: 0 0 auto; height: auto; } /* depoimentos: ~4 por vista no desktop, ~1,6 no celular (a ponta do próximo aparecendo, que é o que sinaliza "tem mais ao lado") */ .mgx-carrossel--depoimentos > .swiper-slide { inline-size: clamp(13rem, 60vw, 21rem); } @media (min-width: 64rem) { .mgx-carrossel--depoimentos > .swiper-slide { inline-size: 22rem; } } /* marcas: fileira densa de logos */ .mgx-carrossel--marcas > .swiper-slide { inline-size: clamp(7rem, 26vw, 10rem); display: grid; place-items: center; } /* velocidades levemente diferentes por carrossel: sincronizadas, viram parede */ .mgx-esteira { animation-duration: 42s; } .mgx-esteira.mgx-vel-2 { animation-duration: 55s; } .mgx-esteira.mgx-vel-3 { animation-duration: 48s; animation-direction: reverse; } .mgx-esteira.mgx-vel-4 { animation-duration: 64s; } /* ========================================================================== SEÇÃO PINADA — na origem, o bloco dos entregáveis prendia na tela e os cartões atravessavam na horizontal conforme a rolagem vertical (pin+scrub). O JS monta a estrutura; aqui está o vestuário dela. ========================================================================== */ .mgx-pin-trilho { position: relative; display: block; } /* o JS decide entre `absolute` (nas pontas) e `fixed` (atravessando): `sticky` não valia aqui, ver o comentário em mgx-secoes.js */ .mgx-pin-palco { block-size: 100svh; z-index: 1; display: grid; align-content: center; overflow: clip; /* corta a pintura sem criar caixa rolável */ } .mgx-pin-fita { display: flex; gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--mgx-gutter, 5vw); inline-size: max-content; will-change: transform; } .mgx-pin-fita > * { flex: 0 0 auto; } /* O pin só existe onde há espaço e ponteiro: no celular vira trilho (abaixo). */ @media (max-width: 64rem) { .mgx-pin-palco { position: static; block-size: auto; overflow: visible; } .mgx-pin-fita { transform: none !important; } } /* ========================================================================== TRILHO NO CELULAR — a referência faz assim nos entregáveis (≤767px): rolagem horizontal DO COMPONENTE, com encaixe, nunca da página. ========================================================================== */ @media (max-width: 47.99rem) { .mgx-trilho { display: flex; gap: 0.875rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; padding-inline: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mgx-trilho::-webkit-scrollbar { display: none; } .mgx-trilho > * { flex: 0 0 min(82%, 20rem); scroll-snap-align: start; } } /* ========================================================================== O `overflow-x: hidden` do body ANULAVA todo `position: sticky` da página. A origem põe `overflow-x: hidden` no para esconder sangramento (o curativo clássico). O problema: um elemento não pode ter `hidden` num eixo e `visible` no outro — o navegador promove o outro eixo para `auto`, e o body vira um contêiner de rolagem próprio. A partir daí, `sticky` gruda em relação a ELE, não à janela, e simplesmente não gruda. Medido em 22/09/2026: o palco da seção presa ia de +1230px a −1265px de posição na tela ao longo do curso — acompanhando a rolagem em vez de ficar parado. Era por isso que o primeiro e o último cartão nunca davam para ler. `clip` corta igual a `hidden` e NÃO cria contexto de rolagem, então pode conviver com `visible` no outro eixo. O sangramento segue contido e o sticky volta a funcionar na página inteira. ========================================================================== */ /* E têm o mesmo `overflow-x: hidden` na origem, e a regra de lá é mais específica — por isso a primeira tentativa sem `html` na frente não venceu (computed seguia `hidden auto` nos dois). */ html, body, html.mgx-motor, html.mgx-motor body { overflow-x: clip !important; overflow-y: visible !important; }