/* 01-marca.css */
/* 01-marca.css: seção 01 Marca (páginas 4 a 9). Tudo preso ao id da página: o build junta o CSS de todas as seções. */

/* 5 Posicionamento (a margem padrão do blockquote é zerada em .pg-frase .frase, no brand.css) */
#posicionamento .frase { text-wrap: balance; }
#posicionamento .pg-texto b { font-weight: 600; }

/* 6 Origem: verdade central no meio do card; o exemplo no pé, alinhado ao rótulo */
#origem .verdade { font-size: 2.2cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance; }
#origem .nota { position: absolute; left: 1cqi; bottom: 0.9cqi; max-width: 52ch; color: var(--texto-2); text-wrap: pretty; }

/* cards de texto: conteúdo na margem do rótulo (1cqi), começando abaixo dele */
#cliente-inimigo .card, #tom-de-voz .card, #produtos .card { padding: 4.2cqi 1cqi 1cqi; }
#cliente-inimigo ul, #tom-de-voz ol { list-style: none; padding: 0; }
#cliente-inimigo li, #tom-de-voz li { padding: 0.8cqi 0; border-top: var(--hairline) solid var(--linha); }

/* 7 Cliente e inimigo: afirmação no alto, lista no pé (flex: o place-items do .card centralizava) */
#cliente-inimigo .card { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; }
#cliente-inimigo .card > p { font-size: 1.2cqi; font-weight: 500; line-height: 1.3; max-width: 26ch; }

/* 8 Personalidade e tom de voz: afirmação no alto (como a p.7), regras no pé */
#tom-de-voz .card { place-items: start stretch; }
#tom-de-voz .regras { place-items: end stretch; }
#tom-de-voz .personalidade p:first-child { font-size: 2cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
#tom-de-voz .personalidade p + p { margin-top: 1.2cqi; font-size: 1cqi; color: var(--texto-2); }
#tom-de-voz ol { counter-reset: regra; }
#tom-de-voz li { counter-increment: regra; display: grid; grid-template-columns: 2cqi 1fr; }
#tom-de-voz li::before { content: counter(regra); color: var(--texto-2); }
#tom-de-voz li b { display: block; font-weight: 500; }

/* 9 Família de produtos: rótulo, marca no centro, descrição no pé */
#produtos .pg-texto .regra { font-weight: 600; }
#produtos .card { grid-template-rows: 1fr minmax(3lh, auto); } /* descrição com no mínimo 3 linhas: a marca fica na mesma altura nos três cards */
#produtos .card > p { place-self: end start; text-wrap: pretty; }
#produtos .lockup { width: 60%; }
#produtos .mini { height: 2.5cqi; width: auto; } /* 48 px em 1920: teto da mini (README do logo) */

/* celular: os tamanhos em cqi acima viram px, como no bloco mobile de brand.css */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  #origem .card { align-content: center; gap: 16px; padding: 48px 12px 16px; }
  #origem .verdade { font-size: 24px; }
  #origem .nota { position: static; }
  #cliente-inimigo .card, #tom-de-voz .card, #produtos .card { padding: 40px 12px 12px; gap: 24px; min-height: 0; }
  #cliente-inimigo li, #tom-de-voz li { padding: 10px 0; }
  #cliente-inimigo .card > p { font-size: 18px; }
  #tom-de-voz .personalidade p:first-child { font-size: 26px; }
  #tom-de-voz .personalidade p + p { margin-top: 12px; font-size: 16px; }
  #tom-de-voz li { grid-template-columns: 24px 1fr; }
  #produtos .card { grid-template-rows: auto auto; }
  #produtos .mini { height: 40px; }
}

/* 02-logo.css */
/* 02-logo.css: seção 02 Logo (páginas 10 a 21). Unidades em cqi dentro da folha; px só no bloco de celular.
   Prefixo lg- em tudo: pages.css junta as seções num arquivo só. */

/* logo num card: largura em % do card (--w); no celular, --wm */
.lg { width: var(--w, 40%); height: auto; }
.lg-mono { font-family: var(--fonte-mono); font-size: .94em; }

/* marcador certo/errado no canto do card: ícone de linha de 1,5 px, na cor do texto do card */
.lg-marca { position: absolute; right: 1cqi; top: 0.9cqi; width: 1.2cqi; height: 1.2cqi; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.lg-marca path { vector-effect: non-scaling-stroke; }

/* grade de construção: o <img> do símbolo e, por cima, um SVG nas mesmas coordenadas de simbolo.svg.
   viewBox do SVG: -160 -40 1545 1225 (o do símbolo, -21.92 -20 1139.93 1040, com folga para as cotas).
   Posição do <img> em % desse viewBox: (-21.92 + 160) / 1545, (-20 + 40) / 1225, 1139.93 / 1545, 1040 / 1225 */
.lg-grade { position: relative; width: 44cqi; aspect-ratio: 1545 / 1225; }
.lg-grade > img { position: absolute; left: 8.937%; top: 1.633%; width: 73.782%; height: 84.898%; max-width: none; opacity: .12; }
.lg-grade > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; }
.lg-grade path, .lg-grade polygon { vector-effect: non-scaling-stroke; stroke-width: var(--hairline); }
.lg-grade .rede, .lg-grade .guia { stroke: var(--cinza-200); }
.lg-grade .corpo { stroke: var(--tinta); }
.lg-grade .cota { stroke: var(--cinza-500); }
.lg-grade .ponto { fill: var(--tinta); }
/* 27.4 unidades = 0.78cqi com o SVG em 44cqi de largura (1545 unidades) */
.lg-grade text { fill: var(--cinza-500); font-family: var(--fonte); font-size: 27.4px; }
.lg-grade text.num { font-family: var(--fonte-mono); }

/* área de proteção: a caixa .lg-zona é a caixa da tinta; d = altura da gema na peça.
   Horizontal: a gema ocupa a altura toda do viewBox, então d = altura do <img>.
   Vertical: gema de 240 num viewBox de 392.6 de altura. Símbolo: tinta 1096.1 x 1000, folga de 2% por lado */
/* margin d: a sombra e o tracejado não ocupam lugar no layout; a margem reserva a zona e o card cresce junto */
.lg-zona { --d: 5cqi; position: relative; margin: var(--d); background: var(--neve); box-shadow: 0 0 0 var(--d) var(--neve); }
.lg-zona > img { display: block; max-width: none; }
.lg-zona-s { height: var(--d); aspect-ratio: 1096.1 / 1000; }
.lg-zona-s > img { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; }
.lg-zona-h > img { height: var(--d); width: auto; }
.lg-zona-v > img { height: calc(var(--d) * 392.6 / 240); width: auto; }
/* limite tracejado a 1 d da tinta, no traço 10/8 das órbitas */
.lg-limite { position: absolute; left: calc(-1 * var(--d)); top: calc(-1 * var(--d)); width: calc(100% + 2 * var(--d)); height: calc(100% + 2 * var(--d)); max-width: none; overflow: visible; fill: none; stroke: var(--cinza-500); stroke-width: var(--hairline); stroke-dasharray: 0.52cqi 0.42cqi; pointer-events: none; }
.lg-limite rect { width: 100%; height: 100%; }
/* o quadrado d fica na margem, ao lado da gema: mostra que a margem mede a altura da gema */
.lg-zona::before { content: 'd'; position: absolute; left: calc(-1 * var(--d)); top: 0; width: var(--d); height: var(--d); display: grid; place-items: center; border: var(--hairline) solid var(--cinza-200); font-family: var(--fonte-mono); font-size: 0.78cqi; line-height: 1; color: var(--cinza-500); }

/* tamanho mínimo e escalas: larguras de 1920 px convertidas em cqi (1 cqi = 19,2 px) */
.lg-2-1 { grid-template-columns: 2fr 1fr; }
.lg-escala { width: 100%; display: grid; }
.lg-escala > div { display: flex; align-items: center; justify-content: space-between; gap: 1.5cqi; padding: 1.4cqi 0; }
.lg-escala > div:not(:last-child) { border-bottom: var(--hairline) solid var(--linha); }
.lg-escala img { flex: none; max-width: none; }
.lg-cota { font-size: 0.78cqi; color: var(--texto-2); white-space: nowrap; }
.lg-cota b { font-family: var(--fonte-mono); font-weight: 400; color: var(--texto); }
.lg-576 { width: 30cqi; }
.lg-384 { width: 20cqi; }
.lg-288 { width: 15cqi; }
.lg-192 { width: 10cqi; }
.lg-96 { width: 5cqi; }
.lg-s128 { height: 6.6667cqi; width: auto; }
.lg-s48 { height: 2.5cqi; width: auto; }
.lg-s16 { height: 0.8333cqi; width: auto; }

/* uso incorreto: cada erro é CSS sobre o <img> certo */
.lg-esticado { transform: scaleX(1.4); }
.lg-girado { transform: rotate(-12deg); }
.lg-sombra { filter: drop-shadow(0 0.35cqi 0.3cqi rgba(0, 0, 0, .45)); }
/* cor e degradê: camada por cima em "lighten". Sobre a tinta vale a camada; sobre o card claro vale o card */
.lg-tinge { position: relative; }
.lg-tinge > img { width: 100%; }
.lg-tinge::after { content: ''; position: absolute; inset: 0; mix-blend-mode: lighten; pointer-events: none; }
.lg-tinge-degrade::after { background: linear-gradient(90deg, #0A0A0A, #8A8A8A); }
.lg-tinge-azul::after { background: #1D9BF0; }
.lg-tinge-cinza::after { background: var(--cinza-500); }
/* fonte trocada: o símbolo e SULEIMAN. em serifada, na proporção da vertical (--c = caixa alta) */
.lg-serifa { --c: 1.27cqi; display: grid; justify-items: center; }
.lg-serifa img { height: calc(var(--c) * 2.4 * 1.04); width: auto; max-width: none; margin-bottom: calc(var(--c) * .42); }
.lg-serifa span { font-family: Georgia, 'Times New Roman', serif; font-size: calc(var(--c) / .7); line-height: 1; letter-spacing: 0; }

/* contraste e cor */
.lg-grafite { background: var(--grafite-2); color: var(--branco); }
#contraste .card.preto > figcaption, #contraste .lg-grafite > figcaption { color: var(--cinza-400); }
.lg-foto { isolation: isolate; color: var(--branco); }
.lg-foto > figcaption { color: var(--branco); }
.lg-fundo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -1; }

/* assinatura de produto em HTML: caixa alta da assinatura = 40% da caixa alta do nome (Geist 0,71 em;
   Gasoek One 0,77 em); gema mini de --gema caixas altas centrada nela, meia caixa alta de cada lado.
   --gema acompanha GEMA_H de tools/logo-svg.py (1,9 em produto-escala-go.svg de 00:18) */
#assinatura-produto { --f: 3cqi; }   /* corpo do nome: as duas colunas na mesma escala */
.lg-produto { --gema: 1.9; --cp: calc(var(--f) * .71); --ca: calc(var(--cp) * .4); }
.lg-produto-nome { font-size: var(--f); font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.lg-produto-svg { width: calc(var(--f) * 4.66); height: auto; }   /* 466 unidades de largura, caixa alta do nome = 71 */
.lg-produto-assina { margin-top: calc(var(--cp) * .16); font-size: calc(var(--ca) / .71); font-weight: 500; line-height: 1; white-space: nowrap; }
.lg-produto-assina img { display: inline-block; height: calc(var(--ca) * var(--gema) * 1.04); width: auto; max-width: none; vertical-align: calc(var(--ca) * ((1 - var(--gema)) / 2 - var(--gema) * .02)); margin: 0 calc(var(--ca) * .46); }
.lg-produto-wm { font-family: var(--fonte-display); font-weight: 400; font-size: .922em; }

/* celular e retrato (mesma media query de brand.css) */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .lg { width: var(--wm, var(--w, 40%)); }
  .lg-marca { right: 12px; top: 10px; width: 18px; height: 18px; }
  .lg-grade { width: 100%; }
  .lg-grade text { font-size: 58px; }
  /* d = 52 px: com 48 px ou menos o símbolo seria a mini (página 18). A horizontal só cabe nos 310 px do card
     com d = 40 px; com essa gema entra a horizontal mini (.so-celular), que ocupa 7,54 d com a margem: 302 px */
  .lg-zona { --d: 52px; }
  .lg-zona-h { --d: 40px; }
  #protecao .card { padding-top: 40px; }
  .lg-zona::before { font-size: 12px; }
  .lg-limite { stroke-dasharray: 5px 4px; }
  /* no celular os tamanhos da página 18 são px reais: somem as linhas maiores que a tela e a frase da folha de 1920 */
  .lg-escala > .lg-so-folha, .pg-texto > .lg-so-folha { display: none; }
  .lg-escala > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0; }
  .lg-cota { font-size: 12px; }
  .lg-288 { width: 288px; }
  .lg-192 { width: 192px; }
  .lg-96 { width: 96px; }
  .lg-s128 { height: 128px; }
  .lg-s48 { height: 48px; }
  .lg-s16 { height: 16px; }
  .lg-sombra { filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .45)); }
  .lg-serifa { --c: 20px; }
  #assinatura-produto { --f: 32px; }
}

/* 03-cores.css */
/* 03-cores.css: seção 03 Cores (páginas 22 a 26). Tudo preso ao id da página: o build junta o CSS de todas as seções. */

/* valores técnicos em Geist Mono, sem tracking; só os HEX levam o tracking de código (+30%, classe .codigo do brand.css).
   RGB, razões e porcentagens não: na mono a vírgula, os dois-pontos e o % já ocupam uma célula inteira */
:is(#paleta, #combinacoes, #proporcoes, #claro-escuro) :is(code, dd) { font-family: var(--fonte-mono); white-space: nowrap; }
#paleta .cor dd, #claro-escuro dd { margin-left: 0; } /* zera o recuo de 40 px do dd; a margem direita do HEX vem de .codigo */

/* 23 Paleta: cada card é a cor; nome e papel no alto, HEX e RGB no pé, como no Outset p.27.
   --t é o texto e --t2 o rótulo; o HTML só troca o rótulo onde o cinza padrão não chega a 4,5:1 */
#paleta .cor { --t: var(--tinta); --t2: var(--cinza-500); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; padding: 1cqi 1.1cqi 0.8cqi; background: var(--c); color: var(--t); }
#paleta .cor.escura { --t: var(--branco); --t2: var(--cinza-400); }
#paleta .cor > figcaption { position: static; font-size: 1.2cqi; font-weight: 500; line-height: 1.2; color: var(--t); }
#paleta .cor figcaption span { display: block; margin-top: 0.35cqi; font-size: 0.78cqi; font-weight: 400; line-height: 1.35; color: var(--t2); }
#paleta .cor dl div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 1cqi; }
#paleta .cor dt { font-size: 0.78cqi; color: var(--t2); }
#paleta .cor dd { margin-left: auto; font-size: 0.86cqi; line-height: 1.7; } /* sem espaço na linha, o valor desce e continua à direita */
/* neve, branco e superfície somem sobre a neve da página: hairline por dentro */
:is(#paleta, #proporcoes) .borda { box-shadow: inset 0 0 0 var(--hairline) var(--cinza-200), var(--sombra); }
#combinacoes .amostra.borda { box-shadow: inset 0 0 0 var(--hairline) var(--cinza-200); } /* amostra dentro do card: sem sombra */

/* 24 Combinações: 3 linhas de 4 amostras; rótulo da linha à esquerda, legenda no pé */
#combinacoes .card { place-items: center stretch; padding: 1.2cqi 1.4cqi; }
#combinacoes table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 1.2cqi 1.5cqi; }
#combinacoes th { width: 7.5cqi; padding-top: 0.2cqi; text-align: left; vertical-align: top; font-weight: 400; color: var(--texto-2); }
#combinacoes td { padding: 0; vertical-align: top; }
#combinacoes .amostra { display: grid; place-items: center; height: 8.8cqi; border-radius: 0.6cqi; background: var(--f); color: var(--t); font-size: 3cqi; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
#combinacoes td p { margin-top: 0.7cqi; line-height: 1.3; }
#combinacoes .razao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3cqi 0.6cqi; margin-top: 0.25cqi; }
#combinacoes .razao span { font-size: 0.78cqi; color: var(--texto-2); }
#combinacoes caption { caption-side: bottom; padding: 0 1.2cqi; text-align: left; font-size: 0.78cqi; color: var(--texto-2); }
#combinacoes caption > span { display: inline-flex; align-items: center; gap: 0.5cqi; margin-right: 2.4cqi; }
/* ✓ e ✕ em SVG inline com a geometria das seções 02 e 04 (a Geist não tem U+2713 nem U+2715). Máscara CSS
   deixava fios na borda da caixa no PDF. Traço em cqi e sem escala: igual no ✓ grande e no pequeno */
#combinacoes .marca { flex: none; width: 1cqi; height: 1cqi; fill: none; stroke: currentColor; stroke-width: 0.08cqi; stroke-linecap: round; stroke-linejoin: round; }
#combinacoes .marca path { vector-effect: non-scaling-stroke; }
#combinacoes .marca.pequeno { width: 0.7cqi; height: 0.7cqi; }

/* 25 Proporções: duas barras 70/20/10 em blocos, como os blocos 80/20 do Outset p.29 */
#proporcoes .pg-visual { grid-template-rows: 1fr 1fr; }
#proporcoes .barra { display: grid; grid-template-columns: 70fr 20fr 10fr; gap: var(--gap); min-height: 0; }
#proporcoes .bloco { padding: 0; background: var(--f); color: var(--t); }
#proporcoes .rotulo { position: absolute; left: 1cqi; right: 1cqi; top: 0.9cqi; font-size: 0.86cqi; font-weight: 500; line-height: 1.35; }
#proporcoes .rotulo code { display: block; font-weight: 400; }
#proporcoes .simbolo { height: 6.5cqi; width: auto; }
/* os 10% são mais de um tom: faixas, com o rótulo sobre a primeira */
#proporcoes .bandas { display: flex; flex-direction: column; align-items: stretch; } /* stretch: o place-items do .card deixava as faixas vazias com largura zero */
#proporcoes .bandas > span { flex: 1; }

/* 26 Claro e escuro: três painéis (claro, escuro, aço), texto no alto, onde o degradê ainda é escuro */
#claro-escuro .paineis { grid-template-columns: repeat(3, 1fr); }
#claro-escuro .painel { place-items: start; align-content: start; text-align: left; padding: 2.2cqi; }
#claro-escuro .painel h3 { margin-bottom: 1cqi; font-size: 2.2cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
#claro-escuro .painel p { min-height: 4lh; margin-bottom: 2.2cqi; } /* 4 linhas nos três: as listas de valores ficam na mesma altura */
#claro-escuro dl { display: grid; grid-template-columns: max-content max-content; gap: 0.35cqi 2cqi; }
#claro-escuro dl div { display: contents; }
#claro-escuro dt { color: var(--cinza-500); }
#claro-escuro .preto dt { color: var(--cinza-400); }
/* o único degradê do site, aqui como demonstração do fundo de imagem */
#claro-escuro .aco { background: linear-gradient(180deg, var(--aco-900), #8D949D); color: var(--branco); }
#claro-escuro .aco dt { color: var(--branco); }

/* celular: os tamanhos em cqi acima viram px, como no bloco mobile de brand.css */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  #paleta .pg-visual { grid-template-columns: 1fr 1fr !important; }
  #paleta .cor { min-height: 150px; padding: 12px; gap: 16px; border-radius: 12px; }
  #paleta .cor > figcaption { font-size: 16px; }
  #paleta .cor figcaption span { margin-top: 4px; font-size: 12px; }
  #paleta .cor dt, #paleta .cor dd { font-size: 12px; }
  #paleta .cor dl div { column-gap: 8px; }
  #combinacoes .card { padding: 16px 12px; }
  #combinacoes table, #combinacoes tbody { display: block; }
  #combinacoes caption { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 0 20px; font-size: 12px; }
  #combinacoes caption > span { gap: 6px; margin: 0; }
  #combinacoes tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
  #combinacoes tr:last-child { margin-bottom: 0; }
  #combinacoes th { grid-column: 1 / -1; width: auto; padding: 0; }
  #combinacoes .amostra { height: 64px; border-radius: 10px; font-size: 24px; }
  #combinacoes td p { margin-top: 8px; font-size: 13px; }
  #combinacoes .razao { gap: 4px 8px; margin-top: 2px; }
  #combinacoes .razao span { font-size: 12px; }
  #combinacoes .marca { width: 14px; height: 14px; stroke-width: 1.5px; }
  #combinacoes .marca.pequeno { width: 10px; height: 10px; }
  #proporcoes .barra { grid-template-columns: 1fr; grid-template-rows: 70fr 20fr 10fr; height: 420px; gap: 8px; }
  #proporcoes .bloco { min-height: 0; border-radius: 12px; }
  #proporcoes .rotulo { left: 12px; right: 12px; top: 10px; font-size: 13px; }
  #proporcoes .rotulo code { display: inline; margin-left: 6px; }
  #proporcoes .simbolo { height: 56px; }
  #proporcoes .bandas { flex-direction: row; }
  #proporcoes .bandas > span:first-child { flex: 3; } /* o rótulo fica inteiro sobre a primeira faixa */
  #claro-escuro .painel { min-height: 0; padding: 24px; }
  #claro-escuro .painel h3 { margin-bottom: 8px; font-size: 22px; }
  #claro-escuro .painel p { min-height: 0; margin-bottom: 16px; }
  #claro-escuro dl { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 13px; }
  #claro-escuro dd { white-space: normal; } /* em 360 px "#353E45 → #8D949D" com o tracking do HEX passava da tela: quebra depois da seta */
  #claro-escuro .aco { min-height: 560px; } /* o texto fica na metade de cima, onde o branco passa de 5:1 */
}

/* 04-tipografia.css */
/* 04-tipografia.css — seção 04 (páginas 27 a 30). Classes com prefixo tp- e regras presas ao id da página,
   para não vazar para as outras seções (o build junta todos os NN-*.css em pages.css). */

/* 28 Família e pesos: o par display + texto ocupa a coluna da esquerda inteira; à direita, empilhados,
   os três pesos da Geist, o AaBb da Gasoek One e a Geist Mono. Três linhas porque o AaBb em 12cqi mede
   34,8cqi e só cabe inteiro na largura toda da coluna da direita. */
#familia .pg-visual { grid-template-rows: auto 1fr auto; }
#familia .pg-visual > .tp-par { grid-row: 1 / 4; }
/* rótulos na mesma margem do conteúdo (2cqi), como no Outset p.32; o padrão de .card fica em 1cqi */
#familia .card > figcaption { left: 2cqi; top: 1.6cqi; }
/* display em cima, texto embaixo, como "Headlines" e "Body text" no Outset p.32 */
.tp-par { place-items: start; align-content: space-between; padding: 1.6cqi 2cqi 2cqi; }
.tp-rotulo { font-size: 0.86cqi; color: var(--texto-2); margin-bottom: 0.4cqi; }
.tp-nome { font-size: 1.4cqi; font-weight: 500; line-height: 1.2; margin-bottom: 1.2cqi; }
.tp-nome-display { font-family: var(--fonte-display); font-weight: 400; }
.tp-wordmark { font-family: var(--fonte-display); font-size: 3.2cqi; line-height: 1; }
.tp-alfabeto-display { font-family: var(--fonte-display); font-size: 1cqi; line-height: 1.35; margin-top: 1.6cqi; }
.tp-frase { font-size: 1.6cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.2cqi; }
.tp-corpo { font-size: 0.86cqi; line-height: 1.45; }

.tp-pesos { place-items: start; align-content: start; padding: 3.9cqi 2cqi 2cqi; }
.tp-peso + .tp-peso { margin-top: 1.1cqi; }
.tp-peso-nome { display: block; font-size: 0.86cqi; color: var(--texto-2); margin-bottom: 0.2cqi; }
.tp-alfabeto { display: block; font-size: 1.2cqi; line-height: 1.3; }
.tp-w400 { font-weight: 400; }
.tp-w500 { font-weight: 500; }
.tp-w600 { font-weight: 600; }

.tp-aabb-amostra { font-family: var(--fonte-display); font-size: 12cqi; line-height: 1; }

.tp-mono { place-items: end start; padding: 3.9cqi 2cqi 1.6cqi; }
.tp-mono-amostra { font-family: var(--fonte-mono); font-size: 1.2cqi; } /* só o HEX leva o tracking (.codigo) */

/* 29 Escala e tracking: dez papéis, do menor ao maior; cada linha mostra o exemplo no próprio tamanho.
   Linhas alinhadas pela linha de base: os valores ficam na mesma base do exemplo. */
/* inline-table num card em bloco: na impressão o Chrome fragmenta a tabela comum e ignora o alinhamento
   pela linha de base (valores sobem para o topo da linha no PDF); caixa atômica não fragmenta. Em card
   grid a tabela seria convertida em bloco e o problema voltaria. */
.tp-escala { display: block; padding: 0.9cqi 1.6cqi 0.4cqi; }
.tp-tabela { display: inline-table; vertical-align: top; width: 100%; border-collapse: collapse; }
.tp-tabela th, .tp-tabela td { padding: 0.28cqi 1.4cqi 0.28cqi 0; text-align: left; vertical-align: baseline; font-weight: 400; white-space: nowrap; border-bottom: var(--hairline) solid var(--linha); }
.tp-tabela thead th { color: var(--texto-2); padding-bottom: 0.3cqi; }
.tp-tabela tbody th { font-weight: 500; }
.tp-tabela tbody td:nth-child(2) { color: var(--texto-2); }
.tp-tabela th:last-child, .tp-tabela td:last-child { width: 100%; padding-right: 0; }
.tp-tabela tbody tr:last-child > * { border-bottom: 0; }
.tp-num { font-family: var(--fonte-mono); } /* números de tabela: Mono sem tracking */
.tp-ex { display: block; }
.tp-ex-rodape { font-size: 0.78cqi; color: var(--texto-2); }
.tp-ex-corpo { font-size: 0.86cqi; }
.tp-ex-rotulo { font-size: 0.86cqi; color: var(--texto-2); }
.tp-ex-codigo { font-family: var(--fonte-mono); font-size: 0.86cqi; }
.tp-ex-titulo { font-size: 1cqi; font-weight: 600; line-height: 1.3; }
.tp-ex-frase { font-size: 3.2cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
/* exemplos em Gasoek One com a caixa justa à tinta (a entrelinha real está na tabela), para as dez
   linhas caberem na folha: a fonte reserva 1,16 em acima da linha de base e a caixa alta mede 0,77 em */
.tp-ex-sumario { font-family: var(--fonte-display); font-size: 3.1cqi; line-height: 0.9; }
.tp-ex-divisoria { font-family: var(--fonte-display); font-size: 5cqi; line-height: 0.8; }
.tp-ex-capa { font-family: var(--fonte-display); font-size: 8cqi; line-height: 0.75; }
.tp-ex-numero { font-family: var(--fonte-display); font-size: 18cqi; line-height: 0.75; }

/* 30 Hierarquia: o mesmo bloco de texto certo (dois tamanhos, dois pesos, cinza) e errado */
.tp-hier { place-items: center start; padding: 3cqi 4cqi; }
/* ✓ e ✕ de linha, mesma geometria e posição dos marcadores da seção 02 */
.tp-marca { position: absolute; right: 1cqi; top: 0.9cqi; width: 1.2cqi; height: 1.2cqi; fill: none; stroke: currentColor; stroke-width: max(1px, 0.08cqi); stroke-linecap: round; stroke-linejoin: round; }
.tp-marca path { vector-effect: non-scaling-stroke; }
.tp-hier-bloco { max-width: 26cqi; }
.tp-hier-titulo { font-size: 2.2cqi; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.2cqi; }
.tp-hier-corpo { font-size: 1cqi; line-height: 1.45; max-width: 44ch; }
.tp-hier-meta { color: var(--texto-2); margin-top: 1cqi; }
.tp-hier-errado .tp-hier-titulo { font-weight: 400; font-style: italic; font-size: 2.6cqi; }
.tp-hier-errado .tp-hier-corpo { font-size: 1.3cqi; }
.tp-hier-errado .tp-hier-meta { font-size: 0.78cqi; text-transform: uppercase; letter-spacing: 0.25em; }
.tp-azul { color: #1D9BF0; } /* cor fora da paleta de propósito: só neste exemplo de erro */

/* mobile e retrato (mesma consulta de brand.css): tamanhos em px, grade de uma coluna, tabela vira lista */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  #familia .pg-visual > .tp-par { grid-row: auto; }
  #familia .card > figcaption { left: 24px; top: 16px; }
  .tp-par { row-gap: 24px; padding: 16px 24px 24px; }
  .tp-rotulo { font-size: 13px; margin-bottom: 4px; }
  .tp-nome { font-size: 18px; margin-bottom: 10px; }
  .tp-wordmark { font-size: 32px; }
  .tp-alfabeto-display { font-size: 13px; margin-top: 12px; }
  .tp-frase { font-size: 20px; margin-bottom: 12px; }
  .tp-corpo { font-size: 15px; }
  .tp-pesos { padding: 48px 24px 24px; }
  .tp-peso + .tp-peso { margin-top: 14px; }
  .tp-peso-nome { font-size: 13px; margin-bottom: 2px; }
  .tp-alfabeto { font-size: 15px; overflow-wrap: anywhere; }
  .tp-aabb-amostra { font-size: 96px; }
  .tp-mono { min-height: 0; padding: 48px 24px 24px; }
  .tp-mono-amostra { font-size: 14px; }

  .tp-escala { padding: 16px 20px; }
  .tp-tabela thead { display: none; }
  .tp-tabela, .tp-tabela tbody { display: block; }
  .tp-tabela tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .tp-tabela tbody tr:last-child { border-bottom: 0; }
  .tp-tabela th, .tp-tabela td { display: block; padding: 0; border: 0; width: auto; white-space: normal; font-size: 13px; }
  .tp-tabela td:last-child { order: -1; width: 100%; padding-bottom: 10px; overflow: hidden; }
  .tp-tabela tbody th { font-size: 15px; }
  .tp-num::before { content: attr(data-rotulo) " "; font-family: var(--fonte); color: var(--texto-2); }
  .tp-ex-rodape { font-size: 12px; }
  .tp-ex-corpo, .tp-ex-rotulo, .tp-ex-codigo { font-size: 15px; }
  .tp-ex-titulo { font-size: 18px; }
  .tp-ex-sumario { font-size: 32px; }
  .tp-ex-frase { font-size: 24px; }
  .tp-ex-divisoria { font-size: 40px; }
  .tp-ex-capa { font-size: 48px; }
  .tp-ex-numero { font-size: 120px; }

  .tp-hier { padding: 40px 24px 24px; }
  .tp-marca { right: 12px; top: 10px; width: 18px; height: 18px; stroke-width: 1.5px; }
  .tp-hier-bloco { max-width: none; }
  .tp-hier-titulo { font-size: 24px; margin-bottom: 10px; }
  .tp-hier-corpo { font-size: 15px; }
  .tp-hier-meta { margin-top: 8px; }
  .tp-hier-errado .tp-hier-titulo { font-size: 30px; }
  .tp-hier-errado .tp-hier-corpo { font-size: 18px; }
  .tp-hier-errado .tp-hier-meta { font-size: 11px; }
}

/* 05-sistema.css */
/* 05-sistema.css — seção 05 Sistema gráfico (páginas 31 a 34). Todo seletor começa pelo id da página.
   Fora do bloco mobile, px só aparece dentro de SVG: é unidade do viewBox e escala com o desenho. A exceção é o
   traço de 1,5 px do ícone, que a spec fixa em px de tela (non-scaling-stroke). */

/* desenhos cotados (32 e 33): o SVG cobre o card; o traço fica em hairline de tela em qualquer escala */
:is(#orbitas, #marcadores) .sis { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(#orbitas, #marcadores) svg :is(line, path, circle) { fill: none; stroke-width: var(--hairline); vector-effect: non-scaling-stroke; }
:is(#orbitas, #marcadores) .l-tinta { stroke: var(--tinta); }
:is(#orbitas, #marcadores) .l-400 { stroke: var(--cinza-400); }
:is(#orbitas, #marcadores) .l-200 { stroke: var(--cinza-200); }
:is(#orbitas, #marcadores) .trac { stroke-dasharray: 10 8; }
:is(#orbitas, #marcadores) .cota-l { stroke: var(--cinza-400); }
:is(#orbitas, #marcadores) :is(.marca, .marca *) { fill: var(--tinta); stroke: none; }
/* cotas: Geist Mono cinza 500, com halo da cor do card para a linha não atravessar o número */
:is(#orbitas, #marcadores) .cota text { font-family: var(--fonte-mono); fill: var(--cinza-500); paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; }
:is(#orbitas, #marcadores) .cota .baixo { dominant-baseline: hanging; }
#orbitas .cota text { font-size: 17px; }   /* unidades do viewBox: 0,8cqi em 1920 */

/* 33, grade de pontos: pontos.svg e, por cima, as cotas no mesmo viewBox */
#marcadores .pontos-card { align-content: center; row-gap: 3.4cqi; }
#marcadores .pontos { position: relative; height: 14.8cqi; aspect-ratio: 320 / 424; }
#marcadores .pontos > * { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#marcadores .pontos .cota text { font-size: 24px; }
#marcadores .legenda { font-size: 0.86cqi; color: var(--texto-2); }

/* 33, marcadores sobre um trecho de órbita */
#marcadores .circulo circle { fill: var(--branco); stroke: var(--tinta); }
#marcadores .circulo path { stroke: var(--tinta); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
#marcadores .fundo { fill: var(--card); stroke: none; }
#marcadores .rotulo text { font-family: var(--fonte); font-size: 16.5px; font-weight: 500; fill: var(--tinta); }
#marcadores .rotulo .valor { font-family: var(--fonte-mono); font-size: 15px; font-weight: 400; fill: var(--cinza-500); }
#marcadores .mini { position: absolute; height: 1.25cqi; width: auto; transform: translate(-50%, -50%); }

/* 34, peças: cada uma é um container; dentro dela, cqi é relativo à largura da peça */
#sistema-aplicado .peca { position: relative; overflow: hidden; container-type: inline-size; background: var(--neve); }
/* orbitas.svg tem traço que não escala (vector-effect: non-scaling-stroke): na miniatura (escala 0,4 a 0,5) a linha
   continua com 1 px e o cinza 200 não some */
#sistema-aplicado .peca .orb { position: absolute; max-width: none; height: auto; }
/* símbolo mini como marcador sobre a órbita: um disco neve por trás esconde a linha nas facetas */
#sistema-aplicado .marcador { position: absolute; width: 8cqi; padding: 1.2cqi; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: var(--neve); transform: translate(-50%, -50%); }
#sistema-aplicado .formato { display: block; margin-top: 0.3cqi; font-family: var(--fonte-mono); font-size: 0.78cqi; }
/* recortes de orbitas.svg (1920 x 1080, centro 1500,540): a borda direita do arquivo fica em x 1920, então a
   janela nunca passa de 1500 + 420; largura = 1920 / janela, left = -(início / janela), top em % da altura da peça */
#sistema-aplicado .a4 { width: 18cqi; aspect-ratio: 1 / 1.4142; border-radius: 0.3cqi; }
#sistema-aplicado .a4 .orb { width: 228.57%; left: -128.57%; top: -11.46%; }          /* janela 1080..1920, centro a 34% da altura */
#sistema-aplicado .a4 .assinatura { position: absolute; left: 8cqi; bottom: 8cqi; width: 40.86cqi; } /* horizontal mini: gema de 25 px em 1920; a mesma altura da horizontal de 40cqi */
#sistema-aplicado .a4 .ano { position: absolute; right: 8cqi; bottom: 9cqi; font-size: 4cqi; line-height: 1; color: var(--cinza-500); }
#sistema-aplicado .social { width: 18cqi; aspect-ratio: 1; border-radius: 0.6cqi; }
#sistema-aplicado .social .orb { width: 274.29%; left: -164.29%; top: -27.14%; }       /* janela 1150..1850, centro no meio */
/* o disco neve (raio 15,5cqi, logo dentro da órbita interna de 17,1cqi) interrompe a diagonal em volta do símbolo,
   como no vídeo X: a área de proteção fica livre e o losango da órbita interna continua visível */
#sistema-aplicado .social .centro { position: absolute; left: 50%; top: 50%; width: 31cqi; padding: 9cqi; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: var(--neve); transform: translate(-50%, -50%); }
#sistema-aplicado .tela { width: 14cqi; aspect-ratio: 9 / 19.5; border-radius: 2cqi; outline: var(--hairline) solid var(--cinza-200); }
#sistema-aplicado .tela .orb { width: 300%; left: -184.38%; top: 50%; transform: translateY(-50%); }  /* janela 1180..1820 */
#sistema-aplicado .ilha { position: absolute; left: 50%; top: 4cqi; width: 30cqi; height: 8.5cqi; transform: translateX(-50%); border-radius: 4.25cqi; background: var(--tinta); }
#sistema-aplicado .disco-mini { position: absolute; left: 50%; top: 50%; width: 30cqi; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--branco); border: var(--hairline) solid var(--cinza-200); display: grid; place-items: center; }
#sistema-aplicado .disco-mini img { width: 34%; } /* 1 d de folga até a borda do disco */

@media screen and (max-width: 900px), screen and (orientation: portrait) {
  /* 32: o card mostra a metade direita do sistema (o lado das cotas), com números de 11 px */
  #orbitas .card { aspect-ratio: 920 / 1045; }
  #orbitas .cota text { font-size: 28px; }
  #orbitas figcaption { top: 6px; padding: 4px 6px 2px 0; background: var(--card); } /* o losango do topo cai sob o rótulo */
  #marcadores .pontos-card { row-gap: 28px; padding-top: 48px; }
  #marcadores .pontos { height: 180px; }
  #marcadores .pontos .cota text { font-size: 30px; }
  #marcadores .legenda { font-size: 13px; }
  #marcadores .card:not(.pontos-card) { aspect-ratio: 714 / 946; }
  #marcadores .rotulo text { font-size: 26px; }
  #marcadores .rotulo .valor { font-size: 24px; }
  #marcadores .mini { height: 16px; }
  #sistema-aplicado .card { padding-top: 64px; }
  #sistema-aplicado .formato { font-size: 12px; margin-top: 2px; }
  #sistema-aplicado .a4 { width: 200px; border-radius: 4px; }
  #sistema-aplicado .marcador { width: 28px; padding: 5px; } /* símbolo com 18 px: nunca abaixo de 16 */
  #sistema-aplicado .social { width: 220px; border-radius: 8px; }
  #sistema-aplicado .tela { width: 170px; border-radius: 24px; }
}

/* 06-imagens.css */
/* 06-imagens.css — seção 06 Imagens (páginas 35 a 38). Seletores presos aos ids: pages.css junta todas as seções. */

/* 37 Grade de fotos: a foto cobre o card; posição absoluta porque altura em % dentro de .card não resolve */
#grade-fotos .card { padding: 0; }
#grade-fotos .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 38 Logo sobre fotografia: dois cards empilhados, foto 2,4:1 (largura inteira, corte só no topo) e legenda.
   Assinatura horizontal: viewBox 1029,81 x 190, altura = largura / 5,42; d = altura da gema = altura da assinatura.
   Largura 24% -> d = 4,43% da largura da foto; 1 d de margem: left 4,43%, bottom 4,43% x 2,4 = 10,63% da altura.
   Na foto original a caixa fica em x 4,4-28,4%, y 84,3-92,1%: f04 média 79 (máx. 99), f08 média 250 (desvio 0,6).
   A 24% a nova f08 ainda tem meio d limpo em volta; a 26% o tubo encosta. Foto de 57,9cqi: assinatura de
   13,9cqi (267 px em 1920) e gema de 49 px, acima dos 48 px abaixo dos quais o lápis vira textura. */
#logo-foto .pg-visual { grid-template-rows: 1fr 1fr; }
#logo-foto .card { padding: 0; grid-template-columns: 57.9cqi 1fr; place-items: stretch; }
#logo-foto .foto { position: relative; overflow: hidden; }
#logo-foto .foto > img:not(.sobre) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }
#logo-foto .sobre { position: absolute; left: 4.43%; bottom: 10.63%; width: 24%; }
/* linha de base de "Assinatura branca" na linha de base do wordmark: 2,56 (margem) + 0,61 (45/190 de d) = 3,17cqi
   acima da base do card; a Geist (ascendente 1005, descendente 295, entrelinha 1,2) põe a linha de base 0,29cqi
   acima do fim da linha, então sobram 2,88cqi de padding */
#logo-foto .card > figcaption { position: static; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; padding: 0.9cqi 1cqi 2.88cqi; }
/* ✓ de linha (a Geist não tem U+2713): mesma geometria e traço de 1,5 px dos marcadores das seções 02 a 04 */
#logo-foto .ok { width: 1.2cqi; height: 1.2cqi; fill: none; stroke: var(--texto); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
#logo-foto .ok path { vector-effect: non-scaling-stroke; }
#logo-foto figcaption b { grid-column: 1 / -1; grid-row: 3; font-size: 1.2cqi; font-weight: 500; line-height: 1.2; color: var(--texto); }
#logo-foto .tec { font-family: var(--fonte-mono); }

/* celular, sem px (px só no bloco de brand.css). Foto 3:2 presa à esquerda mostra 84,4% da largura; a assinatura
   a 28,44% (24 / 0,844) cai no mesmo lugar da foto original e mede 102 px em 390, acima do mínimo de 96 px */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  #grade-fotos .pg-visual { grid-template-columns: 1fr 1fr !important; }
  #grade-fotos .card { min-height: 0; aspect-ratio: 3 / 4; }
  #logo-foto .card { grid-template-columns: 1fr; }
  #logo-foto .foto { aspect-ratio: 3 / 2; }
  #logo-foto .sobre { left: 5.25%; bottom: 7.87%; width: 28.44%; }
  #logo-foto .card > figcaption { font-size: 0.8em; padding: 0.8em 1em 1em; }
  #logo-foto figcaption b { font-size: 1.25em; }
  #logo-foto .ok { width: 1.25em; height: 1.25em; }
}

/* 07-aplicacoes.css */
/* 07-aplicacoes.css — seção 07 Aplicações (T10). Tudo com escopo .ap (as páginas de conteúdo da seção).
   Os mocks são componentes que se medem por conta própria: .iphone, .tela, .post, .capa e .slide são containers,
   e o que está dentro deles usa cqi deles. Assim o mesmo bloco serve na página e reduzido na visão geral. */

.ap .mono { font-family: var(--fonte-mono); font-size: 0.94em; word-spacing: -0.35em; } /* o espaço da Geist Mono tem uma célula inteira */

/* ---------- cena de foto: o .quadro cobre a figura na proporção 4:3 da foto (o mesmo que object-fit: cover),
   então os logos ficam em % da foto. A figura da página é mais larga que 4:3 (largura 100%); a célula da visão geral
   é mais estreita (largura 118%, abaixo). Sem container-type: size: com ele o Chrome imprime o PDF em branco. ---------- */
.ap .cena { padding: 0; }
/* centrado por margem negativa (em %, relativa à largura), não por translate: na impressão o Chrome parte a página pela
   caixa sem transformação, e com translate o que fica na metade de baixo da foto ia para a página seguinte e sumia */
.ap .quadro { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 4 / 3; margin-top: -37.5%; container-type: inline-size; }
/* célula de 1,15:1: 118% da largura cobre a altura. A largura precisa ser definida: largura vinda da altura pelo
   aspect-ratio num container inline-size com cqi dentro deixa a impressão do Chrome inteira em branco */
.ap .mosaico .quadro { left: 50%; width: 118%; margin: -44.25% 0 0 -59%; }
.ap .quadro > img:first-child { width: 100%; height: 100%; }
.ap .quadro .sobre { position: absolute; translate: -50% -50%; } /* left e top inline = centro do logo na foto (fora de .full também) */
.ap .bordado { mix-blend-mode: multiply; opacity: .88; }       /* símbolo "bordado" no jaleco */
@media print { .ap .bordado { mix-blend-mode: normal; } }     /* no PDF do Chrome o multiply some com o símbolo */
.ap .adesivo { transform: matrix(.911, .412, -.821, .571, 0, 0); } /* eixos do adesivo medidos na foto: 24° e -35° */
.ap .cracha-nome { font-size: 2cqi; font-weight: 500; line-height: 1; color: var(--branco); white-space: nowrap; }

/* ---------- iPhone: moldura em SVG, tela em HTML por cima. Medidas da tela em cqi da tela (100cqi = 402 do SVG) ---------- */
.ap .iphone { position: absolute; aspect-ratio: 430 / 880; background: url(assets/ui/iphone.svg) 0 0 / 100% 100% no-repeat; container-type: inline-size; }
.ap .tela { position: absolute; left: 3.256%; top: 1.591%; width: 93.488%; height: 96.818%; border-radius: 13.02cqi; overflow: hidden; container-type: inline-size; background: var(--branco); color: var(--tinta); line-height: 1.25; }
.ap .tela > .cinza { position: absolute; inset: 0; }
.ap .ilha { position: absolute; left: 34.33cqi; top: 3.98cqi; width: 31.34cqi; height: 8.96cqi; border-radius: 4.48cqi; background: var(--preto); }
.ap .statusbar { position: absolute; left: 0; right: 0; top: 0; height: 16.9cqi; display: grid; grid-template-columns: 34.33cqi 1fr 34.33cqi; align-items: center; justify-items: center; font-size: 4.3cqi; font-weight: 600; letter-spacing: -0.01em; }
.ap .statusbar > span:first-child { grid-column: 1; }
.ap .statusbar .icones { grid-column: 3; display: flex; align-items: center; gap: 1.3cqi; }

/* ícones de linha desenhados por máscara (a cor vem do texto) */
.ap .tela i[class^="i-"], .ap .statusbar i, .ap .cromo i[class^="i-"] { display: block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ap .sinal { width: 4.6cqi; height: 3cqi; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' width='3' height='12' rx='1'/%3E%3C/svg%3E"); }
.ap .wifi { width: 4.1cqi; height: 3cqi; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 11.8 5.5 9.2a3.6 3.6 0 0 1 5 0z'/%3E%3Cpath d='M3.2 6.9a6.8 6.8 0 0 1 9.6 0M.9 4.5a10.1 10.1 0 0 1 14.2 0' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ap .bateria { width: 6.9cqi; height: 3.3cqi; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 13'%3E%3Crect x='.5' y='.5' width='23' height='12' rx='3.5' fill='none' stroke='%23000' stroke-opacity='.45'/%3E%3Crect x='2' y='2' width='20' height='9' rx='2'/%3E%3Cpath d='M25 4.5v4c.9-.3 1.5-1.1 1.5-2s-.6-1.7-1.5-2z' fill-opacity='.45'/%3E%3C/svg%3E"); }
.ap .i-voltar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-video { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='14' height='12' rx='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M16 10.5l6-3.5v10l-6-3.5z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-fone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.5l2.6-.4 1.7 4.2-2 1.5a12 12 0 0 0 6.3 6.3l1.5-2 4.2 1.7-.4 2.6a2 2 0 0 1-2 1.7A16.8 16.8 0 0 1 4.9 5.5a2 2 0 0 1 1.7-2z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-busca { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ap .i-relogio { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ap .i-link { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ap .i-lido { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6.5l3.2 3.2L10 3.5M7 9.7l1 .9L15.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-voltar-nav { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-avancar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-recarregar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4.5H15' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap .i-fechar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- 41 ícone de app: tela de início do iOS (em .cinza) e o ícone da marca por cima, fora do filtro ---------- */
.ap .full.neve { background: var(--neve); }
.ap .icone-cena .iphone { left: 12%; top: 9%; height: 104%; }
.ap .ios { background: var(--branco); }
.ap .apps { position: absolute; left: 6.5cqi; right: 6.5cqi; top: 19cqi; display: grid; grid-template-columns: repeat(4, 16cqi); justify-content: space-between; row-gap: 5.4cqi; }
.ap .apps i, .ap .app-nosso { display: grid; justify-items: center; row-gap: 1.6cqi; font-style: normal; font-size: 2.9cqi; line-height: 1.2; color: var(--cinza-500); }
.ap .apps i::before { content: ''; width: 16cqi; aspect-ratio: 1; border-radius: 22%; background: #D9D9D9; }
.ap .apps .vazio { visibility: hidden; }
.ap .app-nosso { position: absolute; left: 6.5cqi; top: 19cqi; width: 16cqi; color: var(--tinta); }
.ap .app-nosso img { width: 100%; border-radius: 22%; }
.ap .icones-soltos { position: absolute; left: 50%; right: 4%; top: 50%; translate: 0 -50%; display: flex; align-items: flex-end; justify-content: center; gap: 4cqi; }
.ap .icones-soltos figure { display: grid; justify-items: center; row-gap: 1.1cqi; }
.ap .icones-soltos figcaption { font-size: 0.78cqi; color: var(--texto-2); display: grid; justify-items: center; }
.ap .icone-g { width: 8cqi; border-radius: 22%; }
.ap .icone-p { width: 1.6cqi; border-radius: 22%; }

/* ---------- 42 avatares ---------- */
.ap .avatar { width: 13cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.ap .avatar.preto { background: var(--preto); }
.ap .avatar.neve { background: var(--neve); }
.ap .avatar.branco { background: var(--branco); border: var(--hairline) solid var(--cinza-200); }
.ap .avatar img { width: 40%; }
.ap .avatar img.vertical { width: 64%; }

/* ---------- 43 capas sociais: mesma largura, altura pela proporção de cada rede ---------- */
.ap .capas { grid-template-rows: none; align-content: center; }
.ap .capas > figure { margin: 0; display: flex; align-items: center; gap: 1.6cqi; }
.ap .capas .capa { width: 40cqi; }
.ap .capas figcaption { display: grid; row-gap: 0.3cqi; font-size: 0.86cqi; }
.ap .capas figcaption .mono { color: var(--texto-2); }
.ap .capa { position: relative; aspect-ratio: var(--r); container-type: inline-size; overflow: hidden; padding: 0; display: block; background: var(--superficie); border-radius: 0.5cqi; }
/* as órbitas correm para a direita até sair da área de proteção do logo (1 d em volta dele) */
.ap .capa-orbitas { position: absolute; top: 0; left: var(--ox, 0cqi); width: 100%; height: 100%; object-fit: cover; } /* traço de 1 px em qualquer escala: orbitas.svg não escala o traço */
.ap .capa-marca { position: absolute; top: 50%; translate: 0 -50%; height: 20%; left: 5cqi; }   /* 4:1: d = 20% da altura = 5cqi */
.ap .capa.r3 .capa-marca { left: 6.67cqi; }                                                   /* 3:1: d = 6,67cqi */
.ap .capa.r3 { --ox: 12cqi; }
.ap .capa.youtube .capa-marca { height: 14%; left: 24cqi; }                                        /* dentro da faixa central */
.ap .capa.youtube { --ox: 38cqi; }

/* ---------- 44 posts 4:5 ---------- */
.ap .posts { align-content: center; }
.ap .post { position: relative; aspect-ratio: 4 / 5; padding: 0; display: block; container-type: inline-size; overflow: hidden; border-radius: 0.5cqi; }
.ap .post.neve { background: var(--neve); border: var(--hairline) solid var(--cinza-200); }
.ap .post.aco { background: var(--aco-100); }
.ap .post.preto { background: var(--preto); color: var(--branco); }
.ap .post-frase { position: absolute; left: 9cqi; right: 9cqi; top: 9cqi; font-size: 7.4cqi; font-weight: 500; line-height: 1.16; letter-spacing: -0.01em; }
.ap .post-marca { position: absolute; left: 9cqi; bottom: 9cqi; width: 11cqi; }
.ap .post-numero { position: absolute; left: 8cqi; top: 6cqi; display: grid; font-weight: 500; letter-spacing: -0.03em; }
.ap .post-numero b { font-size: 62cqi; font-weight: 500; line-height: .82; }
.ap .post-numero span { font-size: 15cqi; line-height: 1; }
.ap .post-legenda { position: absolute; left: 9cqi; right: 12cqi; bottom: 25cqi; font-size: 5.4cqi; line-height: 1.3; }
.ap .post-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap .post-assinatura { position: absolute; left: 9cqi; bottom: 9cqi; width: 53.1cqi; } /* horizontal mini: a mesma altura da horizontal de 52cqi */
.ap .post-texto { position: absolute; left: 9cqi; right: 9cqi; top: 9cqi; font-size: 12cqi; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--branco); }

/* ---------- 45 favicon: barra de navegador em dobro do tamanho (favicon de 32 px em 1:1 a 1920) ---------- */
.ap .favicon-grade { grid-template-rows: auto 1fr; }
.ap .navegador { padding: 0; display: block; place-items: normal; } /* sem isso o Chrome centraliza o filho de bloco pelo place-items do .card */
.ap .janela { position: relative; --luzes: 6.9cqi; --faixa: 4.3cqi; --aba: 3.5cqi; font-size: 1.25cqi; }
.ap .abas { display: flex; align-items: flex-end; height: var(--faixa); background: #E4E4E4; }
.ap .luzes { width: var(--luzes); align-self: center; display: flex; gap: 0.83cqi; padding-left: 1.3cqi; }
.ap .luzes i { width: 1.25cqi; aspect-ratio: 1; border-radius: 50%; background: var(--cinza-200); }
.ap .aba { height: var(--aba); width: 25cqi; display: flex; align-items: center; justify-content: space-between; gap: 0.8cqi; padding: 0 1.1cqi 0 3.9cqi; background: var(--branco); border-radius: 0.8cqi 0.8cqi 0 0; white-space: nowrap; }
.ap .aba.inativa { background: none; color: var(--cinza-500); padding-left: 1.6cqi; width: 14cqi; }
.ap .aba .i-fechar { width: 1.25cqi; height: 1.25cqi; color: var(--cinza-500); }
.ap .barra { display: flex; align-items: center; gap: 1.6cqi; height: 4.4cqi; padding: 0 1.4cqi; background: var(--branco); color: var(--cinza-500); }
.ap .barra i[class^="i-"] { width: 1.5cqi; height: 1.5cqi; }
.ap .url { flex: 1; display: flex; align-items: center; height: 3.1cqi; padding: 0 1.4cqi; border-radius: 1cqi; background: #F0F0F0; color: var(--tinta); font-size: 1.35cqi; }
.ap .favicon-aba { position: absolute; left: calc(var(--luzes) + 1.25cqi); top: calc(var(--faixa) - var(--aba) / 2); translate: 0 -50%; width: 1.667cqi; }
.ap .ampliados .par { display: flex; align-items: flex-end; gap: 7cqi; }
.ap .ampliados figure { display: grid; justify-items: center; row-gap: 1.2cqi; }
.ap .ampliados figcaption { font-size: 0.86cqi; color: var(--texto-2); }
.ap .px32 { width: 16cqi; image-rendering: pixelated; }
.ap .px16 { width: 8cqi; image-rendering: pixelated; }

/* ---------- 46 WhatsApp Business (escuro): interface em .cinza, avatar da marca por cima ---------- */
.ap .full.preto { background: var(--preto); }
.ap .dois-iphones .iphone { top: 8%; height: 106%; }
.ap .dois-iphones .iphone:first-child { left: 14%; }
.ap .dois-iphones .iphone:last-child { right: 14%; }
.ap .tela.escura { background: var(--grafite-1); color: var(--branco); }
.ap .wa .statusbar { color: var(--branco); }
.ap .wa i[class^="i-"] { width: 5.6cqi; height: 5.6cqi; }
.ap .wa-barra { position: absolute; left: 0; right: 0; top: 16.9cqi; height: 11cqi; display: grid; grid-template-columns: 14cqi 1fr 14cqi; align-items: center; justify-items: center; font-size: 4.2cqi; font-weight: 600; }
.ap .wa-perfil { position: absolute; left: 0; right: 0; top: 30cqi; display: grid; justify-items: center; text-align: center; }
.ap .wa-perfil .wa-avatar-vazio { width: 32cqi; aspect-ratio: 1; }
.ap .wa-avatar-g { position: absolute; left: 34cqi; top: 30cqi; width: 32cqi; border-radius: 50%; }
.ap .wa-perfil-nome { margin-top: 4cqi; font-size: 7cqi; font-weight: 600; letter-spacing: -0.01em; }
.ap .wa-perfil-tipo { margin-top: 1cqi; font-size: 3.8cqi; color: var(--cinza-400); }
.ap .wa-acoes { margin-top: 5cqi; display: grid; grid-template-columns: repeat(3, 27cqi); gap: 2.5cqi; }
.ap .wa-acoes span { display: grid; justify-items: center; row-gap: 1.6cqi; padding: 3.2cqi 0 2.8cqi; border-radius: 3cqi; background: var(--grafite-2); font-size: 3.3cqi; }
.ap .wa-bloco { margin-top: 3cqi; width: 86.5cqi; padding: 4cqi; border-radius: 3cqi; background: var(--grafite-2); display: grid; row-gap: 3.6cqi; text-align: left; font-size: 3.9cqi; }
.ap .wa-linha { display: flex; gap: 3cqi; align-items: flex-start; }
.ap .wa-linha small { display: block; font-size: 3.3cqi; color: var(--cinza-400); }
.ap .wa-topo { position: absolute; left: 0; right: 0; top: 16.9cqi; height: 12cqi; display: flex; align-items: center; gap: 3cqi; padding: 0 3.5cqi 0 3cqi; background: var(--grafite-2); }
.ap .wa-topo .wa-avatar-vazio { width: 9.5cqi; aspect-ratio: 1; flex: none; }
.ap .wa-nome { flex: 1; display: grid; font-size: 4.2cqi; font-weight: 600; line-height: 1.2; }
.ap .wa-nome small { font-size: 3cqi; font-weight: 400; color: var(--cinza-400); }
.ap .wa-topo i[class^="i-"] { margin-left: 2.4cqi; }
.ap .wa-avatar-p { position: absolute; left: 11.6cqi; top: 18.15cqi; width: 9.5cqi; aspect-ratio: 1; border-radius: 50%; background: var(--neve); display: grid; place-items: center; }
.ap .wa-avatar-p img { width: 58%; }
.ap .wa-conversa { position: absolute; left: 0; right: 0; top: 28.9cqi; bottom: 0; padding: 4cqi 3.5cqi; display: flex; flex-direction: column; gap: 2.2cqi; }
.ap .wa-data { align-self: center; padding: 1cqi 2.6cqi; border-radius: 2cqi; background: var(--grafite-2); font-size: 3cqi; color: var(--cinza-400); }
.ap .balao { max-width: 78cqi; padding: 2.4cqi 3.2cqi 2cqi; border-radius: 3.4cqi; font-size: 3.9cqi; line-height: 1.32; }
.ap .balao small { display: flex; justify-content: flex-end; align-items: center; gap: 0.8cqi; margin-top: 0.8cqi; font-size: 2.6cqi; color: var(--cinza-400); }
.ap .wa .balao .i-lido { width: 3.6cqi; height: 2.4cqi; }
.ap .balao.entra { align-self: flex-start; background: var(--grafite-3); border-top-left-radius: 0.8cqi; }
.ap .balao.sai { align-self: flex-end; background: #474747; border-top-right-radius: 0.8cqi; }
.ap .balao.sai small { color: var(--cinza-200); } /* cinza 400 sobre #474747 dava 2,7:1; cinza 200 dá 5,5:1 */

/* ---------- 47 slide e assinatura de e-mail ---------- */
#slide-email .pg-visual { grid-template-columns: 3fr 2fr; }
.ap .slide { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: var(--neve); border-radius: 0.4cqi; border: var(--hairline) solid var(--cinza-200); }
.ap .slide-orbitas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap .slide-corpo { position: absolute; left: 6cqi; top: 8cqi; width: 31cqi; }   /* à esquerda da órbita externa: as linhas não cruzam o título */
.ap .slide-titulo { font-size: 4.4cqi; font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
.ap .slide-sub { margin-top: 1.6cqi; font-size: 2.3cqi; color: var(--cinza-500); }
.ap .mini-slide .slide-titulo { position: absolute; left: 6cqi; top: 8cqi; width: 31cqi; }
.ap .slide-rodape { position: absolute; left: 6cqi; right: 6cqi; bottom: 4.5cqi; display: flex; justify-content: space-between; align-items: center; font-size: 2.1cqi; color: var(--cinza-500); }
.ap .slide-rodape img { height: 3.6cqi; }
.ap .slide-rodape span { margin-right: -1.2cqi; padding: 0.5cqi 1.2cqi; background: var(--neve); } /* halo: a órbita passa por trás do endereço */
.ap .email { justify-self: start; padding-left: 2cqi; font-size: 0.86cqi; line-height: 1.45; }
.ap .email-nome { font-size: 0.95cqi; font-weight: 600; }
.ap .email-cargo { color: var(--texto-2); }
.ap .email-contato { margin-top: 0.7cqi; }
/* horizontal mini: a altura do arquivo é a da gema (1,9 C); caixa alta de 0,6cqi, gema de 22 px em 1920 */
.ap .assinatura-mini { margin-top: 1.6cqi; height: 1.14cqi; width: auto; }

/* ---------- 48 splash de produto ---------- */
/* iPhone no centro das órbitas, a 74,6% da figura, como a capa (centro em x 1500 de 1920) */
.ap .splash-cena .iphone { left: 74.6%; translate: -50% 0; top: 3%; height: 94%; }
/* .full > img:not(.sobre) do brand.css (0,2,1) esticaria a imagem: o seletor aqui precisa ser mais forte */
/* orbitas.svg termina 420 unidades à direita do centro: com 116,2% de largura a borda dele cai na borda da figura e a
   altura enche a figura (a diagonal não termina no meio do nada) */
.ap .full > .splash-orbitas { position: absolute; width: 116.2%; height: auto; max-width: none; object-fit: fill; left: -16.2%; top: 0; }
.ap .tela.splash { background: var(--neve); }
.ap .produto-icone { position: absolute; left: 50%; top: 44%; translate: -50% -50%; width: 27cqi; aspect-ratio: 1; border-radius: 22%; background: var(--aco-900); }
.ap .produto-assinatura { position: absolute; left: 50%; bottom: 13cqi; translate: -50% 0; width: 40cqi; }
.ap .indicador { position: absolute; left: 50%; bottom: 2.4cqi; translate: -50% 0; width: 35cqi; height: 1.3cqi; border-radius: 1cqi; background: var(--tinta); }

/* ---------- 40 visão geral: miniaturas medidas pela largura da célula (1,149:1); os componentes se reescalam por
   dentro. Sempre largura, nunca altura em %: um container inline-size com largura vinda da altura pelo aspect-ratio
   deixa a impressão do Chrome inteira em branco ---------- */
.ap .mini { padding: 0; }
.ap .mini-icone { width: 34.8%; border-radius: 22%; }          /* 40% da altura */
.ap .mini-post { width: 58.4%; box-shadow: var(--sombra); }    /* 84% da altura */
.ap .mini-capa { width: 86%; box-shadow: var(--sombra); }
.ap .mini-avatar { width: 54%; }                                /* 62% da altura */
.ap .mini-splash { left: 50%; top: 6%; width: 37.4%; translate: -50% 0; }  /* 88% da altura */
.ap .mini-wa { left: 50%; top: 9%; width: 74.4%; translate: -50% 0; }      /* 175% da altura */
.ap .mini-slide { width: 86%; }

/* ---------- celular e retrato ---------- */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .ap .mosaico, .ap .avatares, .ap .posts { grid-template-columns: 1fr 1fr !important; }
  .ap .mosaico > .card { min-height: 0; aspect-ratio: 1.15; border-radius: 12px; }
  .ap .full.cena { aspect-ratio: 4 / 3; min-height: 0; }
  .ap .splash-cena { height: 520px; }
  .ap .splash-cena .iphone { left: 50%; }
  .ap .full > .splash-orbitas { display: none; }
  .ap .dois-iphones { height: 330px; }
  .ap .dois-iphones .iphone { top: 6%; width: 47%; height: auto; }
  .ap .dois-iphones .iphone:first-child { left: 2%; }
  .ap .dois-iphones .iphone:last-child { right: 2%; }
  .ap .icone-cena { height: 460px; }
  .ap .icone-cena .iphone { left: 4%; top: 6%; height: 100%; }
  .ap .icones-soltos { left: 67%; right: 2%; flex-direction: column; align-items: center; gap: 20px; }
  .ap .icone-g { width: 64px; }
  .ap .icone-p { width: 18px; }
  .ap .icones-soltos figcaption, .ap .ampliados figcaption { font-size: 12px; }
  .ap .avatares .card { min-height: 170px; padding: 16px; }
  .ap .avatar { width: 112px; }
  .ap .capas > figure { display: grid; gap: 8px; }
  .ap .capas .capa { width: 100%; min-height: 0; padding: 0; } /* o min-height do .card no celular desfazia a proporção */
  .ap .capas figcaption { font-size: 13px; }
  .ap .posts .post { min-height: 0; padding: 0; border-radius: 8px; }
  .ap .navegador { min-height: 0; padding: 0; }
  .ap .janela { --luzes: 58px; --faixa: 36px; --aba: 30px; font-size: 12px; }
  .ap .luzes { gap: 6px; padding-left: 12px; }
  .ap .luzes i { width: 10px; }
  .ap .aba { width: 190px; padding: 0 8px 0 32px; border-radius: 8px 8px 0 0; }
  .ap .aba.inativa { display: none; }
  .ap .aba .i-fechar { width: 12px; height: 12px; }
  .ap .barra { height: 40px; gap: 12px; padding: 0 12px; }
  .ap .barra i[class^="i-"] { width: 14px; height: 14px; }
  .ap .url { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
  .ap .favicon-aba { left: calc(var(--luzes) + 10px); width: 16px; }
  .ap .ampliados .par { gap: 40px; }
  .ap .px32 { width: 128px; }
  .ap .px16 { width: 64px; }
  #slide-email .card { padding-top: 36px; }
  .ap .email { padding: 0; font-size: 15px; }
  .ap .email-nome { font-size: 16px; }
  .ap .assinatura-mini { margin-top: 14px; height: 21px; }
}