/* ============================================================================ page-fsm.css — overrides específicos da página /fsm (fsm.html, ) Foco: responsividade mobile. Reaproveita os padrões que já funcionam no ELG. Carregado depois de sections.css, então as regras [data-page="fsm"] vencem. ============================================================================ */ /* Evita scroll horizontal vindo de qualquer elemento que estoure a largura. */ [data-page="fsm"] { overflow-x: clip; } [data-page="fsm"] section { max-width: 100vw; } [data-page="fsm"] img, [data-page="fsm"] svg, [data-page="fsm"] video, [data-page="fsm"] iframe { max-width: 100%; } /* O slideshow do hero usa imagens ~674×459 (não mais quadradas) — caixa na mesma proporção. */ [data-page="fsm"] .hero__slideshow { aspect-ratio: 674 / 459; } /* Topbar do cupom — clicável, rola até a seção de preço (#preco), como na /edu-led. */ [data-page="fsm"] a.topbar { display: block; text-decoration: none; transition: filter var(--dur-fast) var(--ease-out); } [data-page="fsm"] a.topbar:hover { filter: brightness(1.12); } [data-page="fsm"] a.topbar .topbar__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); } [data-page="fsm"] a.topbar:hover .topbar__arrow { transform: translateX(3px); } /* ============================================ HERO — mobile Antes: slideshow caía abaixo do CTA, fora de quadro, e o padding era enorme. Agora: slideshow compacto no topo → H1 → subtítulo → CTA, cabendo na altura. ============================================ */ @media (max-width: 900px) { /* Mesma "régua" de altura da hero do /edu-led: padding generoso no .hero__inner, gaps e H1 maiores. A hero ocupa ~uma tela cheia, sem espremer. */ [data-page="fsm"] .hero { padding: 0; overflow: hidden; border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 8%, transparent); } [data-page="fsm"] .hero__inner { grid-template-columns: 1fr; min-height: auto; gap: clamp(24px, 5vh, 40px); padding: clamp(36px, 7vh, 72px) clamp(20px, 6vw, 32px) clamp(56px, 11vh, 110px); max-width: 560px; margin-inline: auto; } /* Slideshow primeiro e quase full-bleed (~12px das bordas da tela): imagens landscape ficam o maior/mais legível possível e a hero recupera altura. */ [data-page="fsm"] .hero__right { order: -1; margin-inline: calc(-1 * clamp(20px, 6vw, 32px) + 12px); } [data-page="fsm"] .hero__slideshow { max-width: 100%; margin: 0 auto; } /* Texto: H1 + subtítulo + CTA empilhados */ [data-page="fsm"] .hero__left { max-width: none; display: flex; flex-direction: column; gap: clamp(16px, 3vh, 24px); } [data-page="fsm"] .hero__title { font-size: clamp(34px, 9vw, 48px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; } [data-page="fsm"] .hero__subtitle { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.4; margin: 0; max-width: 38ch; } [data-page="fsm"] .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin: clamp(4px, 1vh, 12px) 0 0; } [data-page="fsm"] .hero__actions .btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 16px; } /* O marquee gigante de fundo só atrapalha no mobile */ [data-page="fsm"] .hero__marquee-wrap { display: none; } } @media (max-width: 520px) { [data-page="fsm"] .hero__inner { padding-top: clamp(28px, 6vh, 48px); padding-bottom: clamp(44px, 9vh, 80px); gap: 24px; } [data-page="fsm"] .hero__title { font-size: clamp(30px, 9.5vw, 40px); } } /* ============================================ MÓDULOS — mobile (mesma lógica/tamanho de fonte do ELG) Antes: nome em --step-4 (gigante) e ícone de 48px estourando a coluna de 40px. Agora: num | nome+meta(2ª linha) | ícone de 36px; nome em ~17–20px. ============================================ */ @media (max-width: 760px) { [data-page="fsm"] .module__row { grid-template-columns: 56px 1fr 40px; column-gap: 12px; row-gap: 4px; padding: 4px 0; align-items: start; } [data-page="fsm"] .module__num { grid-row: 1; grid-column: 1; align-self: start; } [data-page="fsm"] .module__name { grid-row: 1; grid-column: 2; font-size: clamp(17px, 4.5vw, 20px); line-height: 1.15; } [data-page="fsm"] .module__meta { display: block; grid-row: 2; grid-column: 2; font-size: 12px; margin-top: 4px; white-space: normal; } [data-page="fsm"] .module__icon { grid-row: 1 / span 2; grid-column: 3; align-self: center; width: 36px; height: 36px; font-size: 18px; } [data-page="fsm"] .module__body { grid-template-columns: 1fr; } [data-page="fsm"] .module__body-lead, [data-page="fsm"] .module__lessons { grid-column: 1; } } /* ============================================ STATS — mobile Antes: números em --step-7 estouravam o quadro (padding var(--space-xl) grande demais). Agora: 2x2, padding contido, números ~34–52px, labels que quebram em 2 linhas se preciso. ============================================ */ @media (max-width: 720px) { [data-page="fsm"] .stats__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 5vw, 32px); padding: clamp(18px, 5vw, 28px); } [data-page="fsm"] .stats__item { padding: 8px 4px; min-width: 0; } [data-page="fsm"] .stats__item + .stats__item::before { display: none; } [data-page="fsm"] .stats__num { font-size: clamp(34px, 11vw, 52px); line-height: 1; } [data-page="fsm"] .stats__label { font-size: 11px; letter-spacing: 0.06em; white-space: normal; } [data-page="fsm"] .stats__rating { margin-bottom: var(--space-lg); flex-wrap: wrap; justify-content: center; } } /* ============================================ CONTAINER — padding lateral consistente no mobile ============================================ */ @media (max-width: 720px) { [data-page="fsm"] .container { padding-left: 16px; padding-right: 16px; } }