/* Cabeçalho e rodapé padrão: usado por todas as páginas e ferramentas. Fala o vocabulário do design system (tokens em português, sem fallback): `assets/design-system.css` é carregado antes desta folha em toda página que usa o componente. Página que ainda não carrega a folha declara os mesmos nomes no próprio `:root`, é o caso de `privacidade/` e `termos/`. */ /* --------------------------------------------------------------------------- A GRADE: um container para a casca inteira (design-system.md §9, v2 de 05/09/2026). Medido pelo Designer em 21 páginas: 12 larguras de container no conteúdo, o cabeçalho numa 13ª (1400) e o rodapé numa 14ª; a 1280 o logo, o conteúdo e o rodapé começavam em três x diferentes em 20 de 21. A regra é UMA, escrita UMA vez, para as cinco caixas da casca: cabeçalho, miolo do rodapé, linha final do rodapé, raiz da ferramenta e raiz da institucional. Os números moram em `design-system.css` (`--container`, `--gutter`); aqui só o token. `testes/grade.teste.js` reprova quem sair. `--largura-ferramenta`/`--largura-pagina` NÃO mudam o container: limitam a coluna interna de conteúdo (`.ferramenta-conteudo`/`.pagina-conteudo`), que nasce na linha-guia, à esquerda; centrar a coluna criaria uma segunda linha-guia, que foi o defeito medido (§9, "A ferramenta estreita"). --------------------------------------------------------------------------- */ .rhc-topo,.rhc-rodape-in,.rhc-r-fim,.ferramenta,.pagina{ max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .ferramenta-conteudo,.pagina-conteudo{min-width:0;margin-left:0} .ferramenta-conteudo{max-width:var(--largura-ferramenta)} .pagina-conteudo{max-width:var(--largura-pagina)} /* Os dois modificadores de coluna do §9, formulário e documento longo. A página marca a classe no container do conteúdo, via `identidade().coluna` na ferramenta ou `{ coluna }` em `RHCPagina.iniciar`. REVISTO EM 10/09/2026 (§21 e §25): a coluna estreita ancorada à esquerda era o defeito "texto todo colado na esquerda". Na FERRAMENTA ela não estreita mais nada: quem divide a largura é o layout de app (`.ferramenta-corpo`, no fim desta folha). Na INSTITUCIONAL ela é CENTRADA de propósito: é a tarefa única e curta (entrar, segurança da conta, descadastro), o desenho das telas de entrada do Linear e do Vercel, com a mesma sobra dos dois lados. A classe continua sendo marcada pelas duas bases. */ .coluna-estreita{max-width:var(--coluna-estreita)} .coluna-leitura{max-width:var(--coluna-leitura)} .pagina-conteudo.coluna-estreita{margin-inline:auto} .ferramenta-corpo > .coluna-estreita,.ferramenta-corpo > .coluna-leitura{max-width:none} .rhc-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap; padding-block:var(--e-4)} .rhc-logo{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--toque-min); text-decoration:none;color:inherit} .rhc-logo svg{width:47.5px;height:40px;flex:none;display:block} /* O prisma pintado por token: a marca nos dois temas. --------------------------------------------------------------------------- As cores saíram dos atributos do SVG porque `var()` não funciona lá. Aqui elas seguem o tema: no claro, `--acento`, `--secundaria` e `--primaria` já valem #C2410C, #0E7490 e #6D45FF, que é exatamente o que o guia de marca manda usar sobre fundo claro. O feixe de entrada é `--texto`: branco no escuro, quase-preto no claro; no escrito do guia, "a cor do texto". */ .rhc-prisma .pr-feixe{fill:var(--texto);opacity:.95} .rhc-prisma .pr-vidro{fill:color-mix(in srgb, var(--primaria) 22%, transparent); stroke:var(--secundaria)} .rhc-prisma .pr-dentro{opacity:.3} .rhc-prisma .pr-c{fill:var(--acento)} .rhc-prisma .pr-s{fill:var(--secundaria)} .rhc-prisma .pr-p{fill:var(--primaria)} .rhc-prisma .pr-ponta{opacity:.78} .rhc-wordmark{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:20px; color:var(--texto)} .rhc-wordmark span{background:var(--espectro); -webkit-background-clip:text;background-clip:text;color:transparent} .rhc-nav{display:flex;gap:var(--e-2);flex-wrap:wrap} .rhc-nav a{display:inline-flex;align-items:center;min-height:var(--toque-min); padding:var(--e-3) var(--e-5);border-radius:var(--r-total);font-weight:600;font-size:14px;text-decoration:none; color:var(--texto-3);border:1px solid var(--borda); /* Sem transição em `color`: com ela, a troca de tema ao vivo deixava o link preso na cor do tema anterior até recarregar (Chromium; medido em 05/09, AXE-03). A borda continua animando. */ transition:border-color .2s} .rhc-nav a:hover{color:var(--texto);border-color:var(--secundaria)} .rhc-rodape{/* Era `margin-top:clamp(40px,8vh,90px)`, e somado ao padding-bottom de 64 da página dava de 129 a 185px de nada antes do filete: o maior vão de toda a varredura de 06/09, e o único acima de 96 em 15 páginas. Quem separa o rodapé do conteúdo agora é `--ritmo-rodape`, aplicado UMA vez, no pé da página (abaixo). O rodapé encosta no filete de propósito: o filete e a mudança de superfície já são a separação. */ margin-top:0;border-top:1px solid var(--borda); /* Era rgba(11,15,26,.6): cinza-escuro fixo, que no tema claro pintava uma faixa quase preta sob uma página branca; visto em 19/08 num print do dono. A superfície de cartão é o token certo aqui: acompanha o tema sozinha. */ background:var(--fundo-2)} /* O respiro DENTRO do rodapé também era viewport (5vh/3vh no bloco, 4vw no vão): três valores que engordavam junto com a tela do dono. Viraram degraus da escala. O vão entre colunas continua elástico porque é horizontal, e vão horizontal pode acompanhar a largura; o vertical não. */ .rhc-rodape-in{padding-block:var(--e-7) var(--e-5); display:grid;row-gap:var(--ritmo-bloco);column-gap:clamp(24px,4vw,54px);grid-template-columns:1fr} @media(min-width:820px){.rhc-rodape-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1.75fr)}} .rhc-r-marca p{color:var(--texto-3);font-size:16px;line-height:1.6;margin-top:var(--e-3);max-width:42ch} .rhc-r-cols{display:grid;gap:var(--e-5);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} /* O título de coluna virou

em 06/09/2026: era

logo abaixo do

da página, e 12 páginas pulavam um nível de título por causa dele. O desenho é o mesmo, porque quem pinta é a classe. */ .rhc-r-cols h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em; color:var(--secundaria);margin:0 0 var(--e-3);font-weight:700} .rhc-r-cols a{display:flex;align-items:center;min-height:var(--toque-min); color:var(--texto-3);text-decoration:none;font-size:16px} .rhc-r-cols a:hover{color:var(--texto)} .rhc-r-fim{padding-block:var(--e-4) var(--e-5); border-top:1px solid var(--borda);display:flex;justify-content:space-between;gap:var(--e-3);flex-wrap:wrap; color:var(--texto-3);font-size:14px} @media(max-width:620px){.rhc-r-fim{flex-direction:column;gap:var(--e-1)}} /* --------------------------------------------------------------------------- PADRÃO DAS FERRAMENTAS Vale para toda ferramenta do catálogo, não só para as duas de hoje. 1. faixa-jogo, o nome do jogo tem UM lugar: centralizado, com o símbolo próprio da ferramenta, filetes laterais e corpo maior que a wordmark do cabeçalho. A logo é assinatura; o jogo é o título. 2. nota-ferramenta: a frase curta sobre como a ferramenta funciona ("tudo roda no seu navegador", "sala ao vivo…") fica logo ABAIXO do botão de ação principal, onde a pessoa está olhando ao decidir. Solta no meio ou no pé da página, ela vira ruído. 1b. fj-lead, v2 §11 (05/09/2026): a segunda linha da faixa, a frase que diz o que a ferramenta faz. Vem de `identidade().lead`, a base emite. Medido: aparecia solta como `.mont-intro` no Bingo e em nenhuma das outras onze; o nome ficava "colado" no guia. Abaixo da faixa inteira, `--ritmo-faixa` (§10). Por que o lead NÃO tem `max-width` (05/09, medido pelos três Devs): o item flex parte de `flex-basis:100%`, mas o tamanho hipotético é APERTADO pelo `max-width`: com a medida ele encolhia para a medida, cabia ao lado do nome a 1280 e só descia a 375. A largura do item fica em 100% (é o que força a segunda linha) e a medida vira `padding-inline` em `max(0, (100% − medida)/2)`: o texto lê na medida, centrado, em toda tela. O número saiu daqui em 06/09 (B1): é `--medida-leitura`, do §21, e muda em um lugar só. --------------------------------------------------------------------------- */ .faixa-jogo{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.6vw,22px);row-gap:var(--e-2);width:100%; margin:0 auto var(--ritmo-faixa)} .fj-lead{flex:1 0 100%;max-width:none;box-sizing:border-box; padding-inline:max(0px,calc((100% - var(--medida-leitura)) / 2)); margin:0;text-align:center;font-size:16px;line-height:1.6;color:var(--texto-2)} .fj-fio{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--borda-forte),transparent)} .fj-nome{flex:none;display:inline-flex;align-items:center;gap:var(--e-3); font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;line-height:1.05;white-space:nowrap; font-size:var(--tipo-titulo-pagina);letter-spacing:-.01em;color:var(--texto)} .fj-nome em{font-style:normal;background:var(--espectro); -webkit-background-clip:text;background-clip:text;color:transparent} .fj-nome .sb{flex:none;display:block} @media(max-width:600px){ .faixa-jogo{gap:var(--e-2);row-gap:var(--e-2)} .fj-nome{font-size:20px;gap:var(--e-2)} } /* A nota não tem teto desde 10/09/2026 (§21 revisto). Em tela larga ela mora no painel lateral (§25), alinhada à esquerda e com a largura do painel; na pilha do celular ela fecha a tela, centrada, depois do resumo. O teto de 56ch de 06/09 existia porque a nota atravessava 1192px sozinha; no painel ela tem 326px, e fora dele a tela é estreita. */ .nota-ferramenta{margin:var(--e-3) 0 0;text-align:center;color:var(--texto-3); font-size:16px;line-height:1.6} .nota-ferramenta b{color:var(--texto)} /* --------------------------------------------------------------------------- 3. bloco-etapa: cabeçalho padrão dos cartões de montagem de qualquer ferramenta. O número da etapa fica em um disco ancorado na BORDA do cartão (metade para fora); o TÍTULO abre a linha, na linha-guia do cartão; o selo e o ícone do assunto fecham a linha, à direita; um filete separa do conteúdo. Por que na borda: dentro do cartão o número disputava espaço com o ícone e empurrava o título; na borda ele vira marcador de sequência; lê-se a coluna de números antes de ler os títulos. Por que o ícone à DIREITA (v2 §11, 05/09/2026): medido em 12 de 12 ferramentas, o título começava 36px à direita do corpo (24 de ícone + 12 de vão) e computava peso 400, só o tamanho o separava do corpo. Agora `x(.be-tit) === x(primeiro p do corpo)` e o título é 20/700. Título → filete → corpo: `--ritmo-titulo` duas vezes (§10). --------------------------------------------------------------------------- */ .bloco-etapa{display:flex;align-items:center;gap:var(--e-3); font-family:"Space Grotesk",system-ui,sans-serif;font-size:20px;line-height:1.3; margin-bottom:var(--ritmo-titulo);padding-bottom:var(--ritmo-titulo);border-bottom:1px solid var(--borda)} /* O disco fica montado no CANTO do cartão: o centro cai exatamente sobre o vértice, então metade sobra para fora nos dois eixos e as duas metades ficam simétricas na horizontal e na vertical. Pequeno e sem brilho: é marcador de sequência, não elemento de destaque. Exige `position:relative` no cartão (cada ferramenta declara isso na sua classe de cartão). */ .be-n{position:absolute;top:0;left:0;transform:translate(-50%,-50%); width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace;font-weight:700;font-size:12px;color:#fff; background:linear-gradient(140deg,var(--primaria),var(--secundaria)); box-shadow:0 0 0 3px var(--fundo)} /* A ordem visual é a ordem da marcação (título · selo · ícone), e `order` a fixa também para a marcação antiga que ainda traga o ícone primeiro. */ .be-tit{flex:1;min-width:0;order:1;font-weight:700;color:var(--texto)} .be-extra{flex:none;order:2;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--texto-3); padding:var(--e-1) var(--e-2);border-radius:var(--r-total);border:1px solid var(--borda)} .be-ic{flex:none;order:3;width:var(--simbolo-catalogo);height:var(--simbolo-catalogo);color:var(--secundaria)} .be-ic svg{width:100%;height:100%} /* O disco fica no vértice em TODA largura. A exceção antiga (abaixo de 900px ele entrava na linha do título) existia porque o cartão encostava na borda da tela e metade do disco seria cortada; com a grade v2 a `--gutter` de 16 é maior que a metade do disco (13), e o disco cabe. Dentro da linha ele empurrava o título 38px: o defeito A1 em tela estreita. */ /* =========================================================================== A FILEIRA FECHA (10/09/2026): a última fileira ocupa a largura inteira --------------------------------------------------------------------------- O DEFEITO, medido no WebKit e no Chromium com o guia aberto: os blocos do "Como funciona" em três colunas davam 1 + 3 + 1 em oito ferramentas, com 913px vazios ao lado do último bloco a 1440, e 1 + 3 + 2 na Retrospectiva (457px). O mesmo defeito em /design/ (a régua de tokens em 6 + 1, 1125px; os cartões em 4 + 1, 1011px) e na letra miúda da chamada de /planos/. O QUE OS PESQUISADOS FAZEM (10/09, 1440 de tela, medido sobre as caixas): nenhum deixa vaga numa fileira de cartões. Linear e Vercel só publicam contagem que enche a fileira (Vercel /pricing: 27 grades de 4 colunas, todas com múltiplo de 4). Quando a contagem não enche, a última fileira divide a largura: o Notion dá `grid-column: 1 / -1` ao terceiro cartão de uma grade de duas (/product e /pricing), o Intercom fecha três trilhas com um cartão de uma e outro de duas (/customers), e o Stripe põe o último cartão do bento da capa em `flex-grow: 1` com base de 100%. A TÉCNICA, uma só para o produto, é a do Stripe com a conta de colunas do Notion: flex com quebra, e cada item nasce com a largura de uma coluna e cresce. A fileira cheia fica igual a uma grade; a fileira incompleta divide a largura inteira entre os seus itens, seja qual for a contagem, sem contar filho para achar a última fileira. - `--fileira-colunas` diz quantas colunas a largura comporta, em degraus (container query ou media query). Abaixo da largura da grade, 1. - Quando a divisão deixaria um item sozinho e largo demais para ler, a grade escolhe as colunas pelo número de itens, com `:has()`: quatro blocos do guia viram 2 + 2, e não 3 + 1 com uma linha de 190 caracteres; cinco passos viram 3 + 2, e não 2 + 2 + 1 (seção 4, os passos). A variável também vale declarada no ITEM: aí ela muda só a base dele. - O item que abre a leitura (`.destaque`) toma a fileira: base de 100%. - O item não declara altura nem margem: a altura da fileira é o `stretch` do flex, e margem somaria à base e empurraria o último para baixo. - O `- 1px` da base é a folga do arredondamento. Três colunas de 444,67px podem somar uma fração de pixel além da caixa, e a terceira desceria. O crescimento devolve o pixel a cada item. - As variáveis têm valor de reserva (`1` e `--ritmo-bloco`): quem só põe a classe tem uma coluna e o vão do bloco. ONDE A REGRA MORA HOJE: `interno/docs/design-system.md` §17.2, na tabela "Uma regra, dois mecanismos". A regra é uma só, nenhuma vaga na última fileira, e o mecanismo sai de uma pergunta: o item alinha partes de dentro com o vizinho? - FLEX, este bloco, quando os itens são independentes: blocos de leitura, passos, abas, amostras, opções de configuração. Também quando a grade mora numa coluna que não é a da página (a da ferramenta, um painel), mesmo com contagem conhecida, porque ali as colunas são da caixa e não da tela. - GRADE de 12 trilhas, em `design-system.css` §17.2, quando o cartão alinha título, descrição e selo com o vizinho por subgrid: é a `.grade-equilibrada`, do catálogo. Subgrid só existe com o pai em grade, e por isso ela não usa este bloco. =========================================================================== */ .fileira-fecha,.g-blocos,.g-passos,.pf-abas{display:flex;flex-wrap:wrap;align-items:stretch; gap:var(--fileira-vao, var(--ritmo-bloco))} .fileira-fecha > *,.g-blocos > *,.g-passos > *,.pf-abas > *{min-width:0;margin:0; flex:1 1 calc((100% - (var(--fileira-colunas, 1) - 1) * var(--fileira-vao, var(--ritmo-bloco))) / var(--fileira-colunas, 1) - 1px)} .fileira-fecha > .destaque,.g-blocos > .destaque{flex-basis:100%} /* =========================================================================== A FILEIRA QUE ROLA (10/09/2026, BV16) --------------------------------------------------------------------------- O DEFEITO: grupo pequeno de pílulas com quebra livre deixava uma sozinha na última linha. As seis categorias do catálogo davam 5 + 1 a 1280, 1440 e 1920 ("Metas e performance" sozinha), e os cinco itens do Feedback 4 + 1 a 1280 ("Qualidade da reunião"), no WebKit e no Chromium. O QUE OS PESQUISADOS FAZEM (15 fontes, 8 design systems e 7 produtos, lidas em 10/09/2026): ninguém equilibra as linhas de chips; os componentes quebram livre; YouTube e Polaris, no celular, põem os chips numa fileira que rola; catálogo grande vira lateral ou menu; o Carbon põe até 6 numa linha. A REGRA (decisão do Coordenador, 10/09/2026): - GRUPO PEQUENO E FIXO, de até 8 pílulas, nunca tem pílula sozinha: é uma fileira só. Onde cabe, é uma fileira comum; onde falta largura, ela rola, com a borda esmaecida do lado em que há mais. - LISTA LONGA OU FEITA POR QUEM USA quebra livre, sem equilíbrio forçado: os itens do Bingo, os nomes do Amigo Oculto. Não leva esta regra. COMO SE PEDE: - `.fileira-rola` em qualquer fileira de pílulas (o índice por função do catálogo, que é navegação e não `.chip`); - `.chips[role="group"]` de até 8 itens entra sozinho, sem classe nova. O papel de grupo com rótulo é o que diz "conjunto de opções que o produto oferece", e é o que o leitor de tela já pede. Lista feita por quem usa não é grupo de opções e não leva o papel. Mora aqui, e não em `componentes/padroes.css`, porque esta é a folha que toda página carrega: `padroes.css` só entra em duas, e o `.chip` é de `componentes/formulario.css`. ACESSIBILIDADE: - teclado: cada pílula é link ou botão, o foco rola a fileira até ela, e o `scroll-padding` a deixa fora do esmaecido; - foco visível: 8px de folga por dentro, devolvidos pela margem, para o anel de 3px com afastamento de 2 (§6 do design-system.css) não ser cortado pela caixa que rola. A pílula fica no mesmo x e y de antes; - leitor de tela: nada sai da árvore. A rolagem só recorta a pintura, e o esmaecido é máscara, não conteúdo; - a barra de rolagem fica, fina: é o caminho de quem só tem mouse. O esmaecido usa `animation-timeline` (Chromium 115 e Safari 26). Sem ele, a pílula cortada na borda é a indicação. Sem rolagem, a linha do tempo fica inativa e não há máscara. Na máscara só o alfa conta: `black` não é cor de desenho, é "opaco". =========================================================================== */ @property --rola-ini{syntax:'';inherits:false;initial-value:0px} @property --rola-fim{syntax:'';inherits:false;initial-value:0px} .fileira-rola,.chips[role="group"]:not(:has(> :nth-child(9))){display:flex;flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:var(--e-7); padding:var(--e-2);margin:calc(-1 * var(--e-2));scrollbar-width:thin} .fileira-rola > *,.chips[role="group"]:not(:has(> :nth-child(9))) > *{flex-shrink:0} /* COM FOCO DE TECLADO, A FILEIRA ABRE. Medido em 10/09/2026, numa página sem nenhuma folha da casa, no WebKit e no Chromium: o navegador rola até o item focado quando ele está escondido de todo, e NÃO rola quando ele está escondido em parte. A 1280, no Chromium, com Tab, "Metas e performance" ficava com 68 de 207px à vista e só 20 fora do esmaecido, com o foco nela; "Qualidade da reunião", no Feedback, 59 de 199 e 11. Nenhuma folha resolve isso com rolagem, e o Feedback não carrega script desta casa. Então, enquanto o foco de teclado está na fileira, ela quebra em linhas e toda pílula fica inteira, com o anel; o foco sai, e ela volta a uma fileira. Clique e toque não acionam `:focus-visible`: só quem navega por teclado vê a fileira aberta, e só onde ela de fato rolava. */ .fileira-rola:has(:focus-visible),.chips[role="group"]:not(:has(> :nth-child(9))):has(:focus-visible){flex-wrap:wrap;row-gap:var(--e-2)} .fileira-rola:has(:focus-visible) > *,.chips[role="group"]:not(:has(> :nth-child(9))):has(:focus-visible) > *{flex-grow:0} @keyframes rola-bordas{ 0%{--rola-ini:0px;--rola-fim:var(--e-7)} 12%{--rola-ini:var(--e-7)} 88%{--rola-fim:var(--e-7)} 100%{--rola-ini:var(--e-7);--rola-fim:0px}} @supports (animation-timeline: scroll()){ .fileira-rola,.chips[role="group"]:not(:has(> :nth-child(9))){ -webkit-mask-image:linear-gradient(to right,transparent,black var(--rola-ini),black calc(100% - var(--rola-fim)),transparent); mask-image:linear-gradient(to right,transparent,black var(--rola-ini),black calc(100% - var(--rola-fim)),transparent); animation:rola-bordas linear both !important;animation-timeline:scroll(self inline) !important}} /* O `!important` acima é de propósito. O esmaecido não é movimento: não anda sozinho, só acompanha a rolagem que a própria pessoa faz, e é ele que diz que há mais. Páginas que desligam toda animação com movimento reduzido (`*{animation:none!important}` no Bingo) o apagavam: a 375, a duração da rodada rolava sem indicação nenhuma, nos dois motores. */ /* --------------------------------------------------------------------------- 4. guia: bloco "Como funciona", colapsado por padrão, no topo da montagem de TODA ferramenta. Traz o passo a passo encenado (.palco-fases) e os blocos de leitura (.g-blocos). Quem já conhece não é obrigado a passar por ele; quem nunca conduziu tem o roteiro antes de começar. --------------------------------------------------------------------------- */ /* faixa → guia é `--ritmo-faixa` (§10): a faixa já traz essa margem embaixo e o guia a repete em cima; as duas colapsam numa só, e o valor não depende de qual das duas peças está na tela. */ .guia{margin-top:var(--ritmo-faixa);border:1px solid var(--borda);border-radius:var(--r-g);background:var(--fundo-2);overflow:hidden} .guia > summary{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-4);cursor:pointer;list-style:none} .guia > summary::-webkit-details-marker{display:none} .guia > summary:hover{background:color-mix(in srgb, var(--primaria) 6%, transparent)} .guia summary b{display:block;font-size:16px} .guia summary small{color:var(--texto-3);font-size:14px} .guia .g-ic{flex:none;width:24px;height:24px;color:var(--secundaria)} .guia .g-ic svg{width:100%;height:100%} .guia .g-seta{margin-left:auto;color:var(--texto-3);transition:transform .25s var(--spring,cubic-bezier(.34,1.56,.64,1))} .guia[open] > summary .g-seta{transform:rotate(180deg);color:var(--secundaria)} .guia[open] > summary{border-bottom:1px solid var(--borda)} .guia-corpo{padding:var(--e-4)} .g-int{font-size:16px;line-height:1.6;margin-bottom:var(--e-4)} .g-fases{display:grid;gap:var(--e-2);margin-bottom:var(--e-4)} @media(min-width:900px){.g-fases{grid-template-columns:repeat(3,1fr)}} .g-fase{display:flex;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-radius:var(--r-m);background:var(--fundo); border:1px solid var(--borda)} .g-n{flex:none;width:30px;height:30px;border-radius:var(--r-p);display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace;font-weight:700;background:linear-gradient(140deg,var(--primaria),var(--secundaria));color:#fff} .g-fase b{font-size:16px} .g-fase em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--secundaria);margin-left:var(--e-1)} .g-fase p{color:var(--texto-3);font-size:16px;line-height:1.6;margin-top:var(--e-1)} .g-fase p b, .guia-corpo li b{color:var(--texto)} .g-cols{display:grid;gap:var(--e-4)} @media(min-width:900px){.g-cols{grid-template-columns:1fr 1fr}} .guia-corpo h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--secundaria);margin-bottom:var(--e-2)} .guia-corpo h4 + ul{margin-bottom:var(--e-3)} .guia-corpo ul{list-style:none;display:grid;gap:var(--e-2)} .guia-corpo li{position:relative;padding-left:var(--e-4);font-size:16px;line-height:1.6;color:var(--texto-3)} .guia-corpo li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:var(--r-p); background:linear-gradient(140deg,var(--acento),var(--primaria))} .g-nota{margin-top:var(--e-2);color:var(--texto-3);font-size:14px;line-height:1.6} .g-quando{margin-top:var(--e-4);padding:var(--e-3) var(--e-4);border-radius:var(--r-m);font-size:16px;line-height:1.6; border:1px solid color-mix(in srgb, var(--acento) 30%, transparent);background:color-mix(in srgb, var(--acento) 7%, transparent);color:var(--acento)} .g-fontes{margin-top:var(--e-4);border-top:1px solid var(--borda);padding-top:var(--e-3)} .g-fontes summary{display:flex;align-items:center;min-height:var(--toque-min); cursor:pointer;color:var(--secundaria);font-size:14px;font-weight:600} .g-fontes p{color:var(--texto-3);font-size:14px;line-height:1.6;margin:var(--e-2) 0} .g-fontes li{font-size:14px} /* passo a passo encenado */ .palco-fases{margin:var(--e-4) 0;border:1px solid var(--borda);border-radius:var(--r-g); background:var(--fundo);overflow:hidden} /* cinco passos: cabem em uma linha no monitor e viram duas no celular. A fileira fecha (10/09/2026, a técnica logo acima da seção 4): em três ou duas colunas, a aba que sobra divide a largura. Em grade, a 375, o quinto passo ficava na metade esquerda da última fileira com a outra metade vazia (154px de 307, 50%, no WebKit e no Chromium). */ .pf-abas{--fileira-vao:0px;--fileira-colunas:5;border-bottom:1px solid var(--borda)} @media(max-width:760px){.pf-abas{--fileira-colunas:3}} @media(max-width:420px){.pf-abas{--fileira-colunas:2}} /* `background:transparent` explicito: sem isto a aba herda o cinza padrao de