/* v6 — menu mobile, explicação de vertical, CTA flutuante, relacionados por família e pequenos ajustes de acessibilidade. Não substitui nada de v2/v3/v4; só adiciona o que faltava. */ /* ---------- Hambúrguer + drawer mobile ---------- */ .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(12,29,50,.6);cursor:pointer;position:relative} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:#eaf7ff;border-radius:2px;transition:transform .2s ease,opacity .2s ease} .nav-toggle span{top:21px} .nav-toggle span::before{top:-7px} .nav-toggle span::after{top:7px} body.nav-open .nav-toggle span{background:transparent} body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)} body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)} @media(max-width:840px){ .nav-toggle{display:block} /* `.topbar` usa backdrop-filter (v4.css) para o efeito de vidro fosco. backdrop-filter cria um novo containing block para descendentes position:fixed — então nav.js move o

para ser filho direto do nesta faixa de largura, escapando desse problema. Por isso a regra abaixo usa o seletor por id (#primaryNav, atribuído pelo JS), não mais `.topbar nav` — o elemento já não está mais dentro da topbar quando estas regras precisam valer. */ #primaryNav{ display:flex!important; position:fixed;top:0;right:0;bottom:0;left:auto; flex-direction:column;gap:0; width:min(320px,86vw);height:100%; background:#07101d;border-left:1px solid var(--line); padding:82px 18px 18px; transform:translateX(100%); transition:transform .24s ease; z-index:50; overflow-y:auto; color:var(--muted); } body.nav-open #primaryNav{transform:translateX(0)} #primaryNav a{ padding:16px 6px;border-bottom:1px solid var(--line);font-size:16px; color:var(--muted);text-decoration:none;transition:color .2s; } #primaryNav a:hover{color:#c8f6ff} body.nav-open{overflow:hidden} body.nav-open::after{ content:"";position:fixed;inset:0;background:rgba(3,8,15,.6);z-index:40; } } /* ---------- O que é uma vertical ---------- */ .vertical-explainer{max-width:1000px;margin:56px auto 0;padding:36px 40px;border:1px solid var(--line);border-radius:20px;background:rgba(12,29,50,.5)} .vertical-explainer p.eyebrow{margin:0 0 10px} .vertical-explainer h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin:0 0 14px} .vertical-explainer p:last-child{color:var(--muted);font-size:15px;line-height:1.75;margin:0} @media(max-width:840px){.vertical-explainer{margin:40px 22px 0;padding:26px}} /* ---------- Selo de badge nos cards e página de módulo ---------- */ .module-copy .tag,.module-hero #type{font:11px 'DM Mono';letter-spacing:.12em} /* ---------- CTA flutuante mobile ---------- */ .mobile-cta{display:none} @media(max-width:840px){ .mobile-cta{ display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:45; align-items:center;justify-content:center;gap:8px; background:linear-gradient(120deg,#36cef6,#1477d9); color:#fff;text-decoration:none;font-weight:800;font-size:14px; padding:15px;border-radius:99px;box-shadow:0 14px 30px rgba(10,30,50,.45); } body.nav-open .mobile-cta{display:none} } /* ---------- Hub de módulos (modulos.html) ---------- Mesmo tratamento de imagem dos cards da home (.module): banner cheio 16:10 com object-fit:cover, não um ícone pequeno solto no card. */ .modules-index-grid{max-width:1320px;margin:40px auto 0;padding:0 32px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .modules-index-grid a{ display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:#eaf7ff; border:1px solid var(--line);border-radius:16px; background:linear-gradient(145deg,rgba(15,56,89,.84),rgba(7,20,36,.82)); transition:transform .2s ease,border-color .2s ease; } .modules-index-grid a:hover{transform:translateY(-3px);border-color:#56d9ff} .modules-index-grid .tile{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(circle,#10558d,transparent 68%),#09182a} .modules-index-grid .tile img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;transition:transform .45s ease}.modules-index-grid a:hover .tile img{transform:scale(1.04)} .modules-index-grid .body{padding:18px 20px 22px} .modules-index-grid b{display:block;font:10px 'DM Mono';letter-spacing:.12em;color:#61ddff} .modules-index-grid h3{margin:10px 0 7px;font-size:19px} .modules-index-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.55} @media(max-width:900px){.modules-index-grid{grid-template-columns:1fr 1fr;padding:0 22px 10px}} @media(max-width:560px){.modules-index-grid{grid-template-columns:1fr}} /* ---------- Toggle de idioma na carta ---------- */ .letter-hero .language{border:1px solid var(--line);border-radius:99px;padding:8px 14px;margin-top:18px}