/* Go Bee Zap — o que só a home (/) tem. Complementa o site.css e usa só os tokens dele. A home segue a Estrutura de Perpétuo (passos anotados em comentário no index.html). */ /* ---------- Passo 1 · atalho do hero para a página da escola ---------- */ .hm-atalho{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s4); font-size:var(--t-body-sm);color:var(--ink-3);max-width:42.5rem} .hm-atalho svg{flex:0 0 auto;margin-top:2px;color:var(--zap-ink)} /* links dentro do texto sempre sublinhados (DS: cor sozinha não basta) */ .hm-atalho a,.hm-link{color:var(--zap-ink);font-weight:800;text-decoration:underline;text-underline-offset:2px} /* ============================================================ IMAGENS DAS SEÇÕES (H1–H8 do roteiro do estúdio) 🔴 A home está NO AR: figura sem imagem fica INVISÍVEL — sem marcador, sem borda, sem espaço. ▸ Enquanto a imagem não carregou, a figura vira um ponto de 1 px transparente e fora do fluxo (absoluta: não ocupa célula de grid nem abre gap). Ela continua renderizada, então o loading="lazy" do navegador ainda a busca quando o leitor chega perto. ▸ onload → .is-ok: a figura ganha o tamanho e entra no layout. ▸ onerror → a figura é removida do documento. ▸ Os pares imagem + texto só viram duas colunas quando a imagem está lá (:has(.is-ok)); sem :has o navegador antigo empilha — nunca sobra coluna vazia. ============================================================ */ .hm-img{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2); box-shadow:var(--e2)} .hm-img--16x9{aspect-ratio:16/9} .hm-img--4x5{aspect-ratio:4/5} /* no celular a 4:5 vira 4:3; o recorte sobe para 25% porque os rostos ficam no terço de cima */ @media(max-width:767px){.hm-img--4x5{aspect-ratio:4/3}.hm-img--4x5 img{object-position:50% 25%}} .hm-img picture,.hm-img img{position:absolute;inset:0;width:100%;height:100%} .hm-img img{display:block;object-fit:cover} .hm-img:not(.is-ok){position:absolute;width:1px;height:1px;aspect-ratio:auto;margin:0;padding:0;border:0; overflow:hidden;opacity:0;pointer-events:none;box-shadow:none;background:none} .hm-img:not(.is-ok) .hm-img__nota{display:none} .hm-img:not(:has(picture)){display:none} .hm-img.is-ok{animation:hm-entra var(--t-mid) var(--ease) both} @keyframes hm-entra{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.hm-img.is-ok{animation:none}} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hm-img img{filter:brightness(.92)} } :root[data-theme="dark"] .hm-img img{filter:brightness(.92)} /* transparência: a imagem é ilustração com IA, não foto de aluno real */ .hm-img__nota{position:absolute;left:var(--s2);bottom:var(--s2);max-width:calc(100% - var(--s4)); padding:var(--s1) var(--s2);border-radius:var(--r-full);font-size:var(--t-cap-xs);font-weight:700;line-height:1.3; color:var(--on-dark);background:color-mix(in srgb,var(--fixed-black) 64%,transparent)} /* par imagem + texto */ .hm-par{display:grid;gap:var(--s8);align-items:center} .hm-par>*{min-width:0} @media(min-width:900px){ .hm-par--img-esq:has(>.hm-img.is-ok){grid-template-columns:5fr 7fr;gap:var(--s12)} .hm-par--img-dir:has(>.hm-img.is-ok){grid-template-columns:7fr 5fr;gap:var(--s12)} .hm-par--topo{align-items:start} .hm-img--fixa.is-ok{position:sticky;top:calc(var(--topbar-h,44px) + 72px + var(--s8))} } .hm-par .faq{max-width:none} /* coluna da direita do bloco #redacao: imagem em cima, as cinco competências embaixo */ .hm-col{display:flex;flex-direction:column;gap:var(--s6);min-width:0} /* imagem no topo dos cartões de recursos extras */ .extra .hm-img.is-ok{box-shadow:none;margin-bottom:var(--s2);border-radius:var(--r-md)} /* ---------- Passo 3 · a escola no bloco do estudante (#redacao) ---------- */ .hm-escola{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s8);padding:var(--s4) var(--s6); background:var(--surface);border:1px solid var(--zap-line);border-radius:var(--r-md); text-decoration:none;color:var(--ink); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .hm-escola:hover{border-color:var(--zap);box-shadow:var(--e2);transform:translateY(-2px)} .hm-escola .ic-hex{background:var(--zap)} .hm-escola small{display:block;font-size:var(--t-cap);font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--zap-ink);margin-bottom:var(--s1)} .hm-escola b{display:block;font-size:var(--t-body);font-weight:800;line-height:1.35} .hm-escola>svg{flex:0 0 auto;margin-left:auto;color:var(--zap-ink)} /* ---------- Passo 5 · micro-história ---------- */ .hm-hist__aviso{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-cap);font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--honey-900);background:var(--honey-50); border:1px solid var(--honey-300);padding:var(--s1) var(--s3);border-radius:var(--r-full);margin-bottom:var(--s4)} .hm-hist p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;margin-bottom:var(--s4);max-width:var(--read)} .hm-hist p.hm-hist__nota{font-size:var(--t-cap);color:var(--muted);margin-bottom:var(--s6)} .hm-hist p:last-child{margin-bottom:0} .hm-hist b{color:var(--ink)} /* ---------- Passo 6 · antes e depois ---------- */ .hm-ad{display:grid;gap:var(--s4)} @media(min-width:640px){.hm-ad{grid-template-columns:1fr 1fr}} .hm-ad__col{border-radius:var(--r-md);padding:var(--s6);border:1px solid var(--line);background:var(--ground)} .hm-ad__col--depois{border-color:var(--zap);box-shadow:0 0 0 1px var(--zap);background:var(--surface)} .hm-ad__t{font-size:var(--t-cap);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); margin-bottom:var(--s4)} .hm-ad__col--depois .hm-ad__t{color:var(--zap-ink)} .hm-ad ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)} .hm-ad li{display:flex;gap:var(--s2);font-size:var(--t-body-sm);color:var(--ink-3);line-height:1.5} .hm-ad li svg{flex:0 0 auto;margin-top:3px;color:var(--muted)} .hm-ad__col--depois li{color:var(--ink-2)} .hm-ad__col--depois li svg{color:var(--zap-ink)} /* ---------- Passo 8 · CTA ---------- A opção mais longa do