/* media_kit/media-kit.css — a folha do MÍDIA KIT (`/media_kit/`). Última na ordem de carga: /ds/sitio/tokens.css → sistema.css → elementos.css → elementos-sitio.css → css/sitio-web.css → css/sitio-chrome.css → ESTA. Convertida do pacote CONGELADO (`/ds/`, vídeo-peça, `class="mesa"`) para o do sítio em 14/08/2026. Os dois declaram os MESMOS nomes de token com valores diferentes, então a conversão não é "trocar arquivo": é trocar a página inteira de terreno. Ver `sites/CLAUDE.md`. O sistema desenha `.cromo`, `.heroi`, `.retrato`, `.secao`, `.medidor`, `.temas`/`.tema`, `.video`, `.ficha`, `.recado`, `.papel`, `.cartao-papel`, `.contato`, `.acao` e `.rodape`. Aqui moram três coisas: 1. as grades que arranjam essas peças nesta página; 2. as peças que o pacote NÃO tem e que esta página precisa: a cifra com procedência (`.kit-cifra`), a barra repartida da faixa etária (`.kit-pilha`), os cem quadrados do gênero (`.kit-cem`) e a linha da casa (`.kit-casa`, que é uma `.tema` promovida). Ditas, não fingidas de peça do sistema; 3. os overrides escopados por classe, cada um com o motivo em cima. Nenhuma cor literal: só tokens do sítio. Por que esta página é diferente das outras cinco: ela não é conteúdo pro público do canal. É a página que uma MARCA abre pra decidir patrocínio — com pressa, cética, comparando com outros canais. Por isso todo número aparece junto da data e da origem da leitura, e por isso a divergência entre 385 (API) e 347 (catálogo público) é EXPLICADA em vez de escondida: número sem procedência, num mídia kit, não vale como argumento. */ /* ── 0 · Utilidades ────────────────────────────────────── */ /* O estado vazio dos blocos que o JS preenche. Não é decoração: se a leitura falhar, a marca precisa ver que falhou e ter um caminho — nunca uma caixa vazia que parece "zero seguidores". */ .kit-vazio { margin: 0; padding: 20px 0; font-family: var(--voz-funcional); font-size: var(--sitio-corpo-corpo); line-height: var(--sitio-corpo-entrelinha); color: var(--sitio-tinta-secundaria); text-wrap: pretty; } /* Dentro de uma grade, o recado ocupa a faixa inteira: numa coluna só ele viraria uma tira estreita ao lado de células vazias — que é exatamente a aparência de "carregou e deu zero" que o recado existe pra evitar. */ .kit-cifras > .kit-vazio, .kit-videos__grade > .kit-vazio { grid-column: 1 / -1; } .kit-cifras > .kit-vazio { padding: 24px; background-color: var(--sitio-superficie); } /* A voz de procedência: mono miúda, caixa baixa, sem tracking de rótulo. Ela aparece três vezes na página (cifra, plataforma, carimbo do herói) e é sempre a MESMA voz, de propósito — quem lê aprende em um segundo que texto nessa voz é "de onde veio este número". */ .kit-cifra__fonte, .kit-procedencia, .kit-carimbo__valor { font-family: var(--voz-sistema); font-size: 11px; line-height: 17px; color: var(--sitio-tinta-fraca); } /* ── 1 · A abertura ────────────────────────────────────── */ /* `.sitio__grade` (elementos-sitio.css) é `position:absolute;inset:0` com máscara radial — precisa de um pai posicionado, senão ancora no e a malha cobre a página inteira. `isolation` prende o z-index dela ao bloco. */ .kit-abertura { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--sitio-traco); padding-bottom: 48px; } .kit-abertura > .sitio__miolo { position: relative; z-index: 1; } /* `.heroi` do pacote é `min-height:600px` com o retrato numa coluna de 420px. Aqui a coluna de texto é mais estreita que a da home porque a manchete tem três palavras a menos, e o que ganha o espaço é a fileira de números logo abaixo — que é o que a marca veio ver. */ .kit-heroi { min-height: 520px; } /* A faixa dos números repete a geometria do `.heroi` (max-width 1440 + 64px de padding, o pacote e `css/sitio-web.css`), em vez de usar o `.sitio__miolo` (1240 centrado): assim o primeiro número nasce alinhado com a primeira letra da manchete. Com o miolo, os dois ficavam a 36px de distância um do outro numa tela de 1440 — desalinhamento pequeno o bastante pra parecer descuido e grande o bastante pra ser visto. */ .kit-glance-faixa { max-width: var(--sitio-largura); margin-inline: auto; padding-inline: 64px; } /* O carimbo de leitura: a linha de sistema do herói com a data da última medição. `.heroi__linha` é `white-space:nowrap` no pacote (uma linha de terminal não quebra) — com duas partes, abaixo de 1180 isso estoura a coluna. Aqui ela pode quebrar entre as duas partes, e só entre elas. */ .kit-carimbo { flex-wrap: wrap; white-space: normal; row-gap: 4px; } .kit-carimbo > span { white-space: nowrap; } /* A fileira de números do pacote. `.medidor` é `display:flex` sem quebra: com quatro itens numa página inteira sobra espaço acima de 1180, e abaixo disso ele precisa quebrar antes de estourar. O separador é `border-left` no item; ao quebrar, o primeiro de cada linha fica com fio encostando na margem, e o `row-gap` maior é o que dá ar suficiente pra leitura. */ .kit-glance { flex-wrap: wrap; row-gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--sitio-traco); } /* Os quatro itens dividem a largura em partes iguais, em vez de se amontoarem à esquerda: assim o fio de cada um vira uma régua de verdade atravessando o herói. `flex-basis: 180px` é o que decide quando quebram — dois por linha a partir de ~420px de vão, sem media query. */ .kit-glance .medidor__item { flex: 1 1 180px; } .kit-glance .medidor__valor { font-size: 28px; line-height: 34px; } /* ── 2 · Os números, com procedência ───────────────────── */ .kit-numeros__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 48px; align-items: start; margin-top: 40px; } .kit-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background-color: var(--sitio-traco); border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio); overflow: hidden; } /* A cifra: valor, rótulo e procedência, nesta ordem de leitura. O fundo de superfície com 1px de vão desenha a grade sozinho (o `gap` mostra o fundo do contêiner) — é a mesma ideia da tabela do sistema, sem inventar borda em cada célula e sem duplicar fio nas junções. */ .kit-cifra { display: grid; gap: 6px; align-content: start; padding: 22px 24px 24px; background-color: var(--sitio-superficie); } .kit-cifra__valor { font-family: var(--voz-sistema); font-size: 32px; line-height: 38px; color: var(--sitio-tinta-cheia); font-variant-numeric: tabular-nums; letter-spacing: -.01em; /* "329,1 mil" quebrando entre o "1" e o "mil" deixa de ser um número e vira duas linhas de texto. `nowrap` transforma a falha silenciosa (quebra) na falha que se mede (transbordo) — e é o que o teste de caixa pega. */ white-space: nowrap; } .kit-cifra__valor small { font-size: 15px; color: var(--sitio-tinta-secundaria); } .kit-cifra__rotulo { font-family: var(--voz-funcional); font-size: 13px; line-height: 18px; color: var(--sitio-tinta-secundaria); } .kit-cifra__fonte { text-wrap: pretty; } /* A cifra sem procedência não deixa buraco na altura da linha: o `:empty` some, em vez de reservar 17px vazios que desalinham a grade. */ .kit-cifra__fonte:empty { display: none; } /* O recado nasce girado 1,2° (o papel colado na mesa). Ele fica ao lado das cifras de propósito: a pergunta "posso confiar nestes números?" é a próxima que a marca faz depois de ler o primeiro deles, e a resposta não pode estar três rolagens abaixo. */ /* `margin-inline` não é respiro: o recado é girado 1,2°, e a caixa girada mede mais que a reta — com ~220px de altura a rotação pede ~5px a mais de largura. Sem a folga, esses 5px transbordam a coluna, o que na tela some dentro do `overflow:hidden` de `.sitio` e aparece em qualquer medição. */ .kit-metodo { max-width: 320px; margin-inline: 6px; } .kit-metodo .recado__texto + .recado__texto { margin-top: 12px; } .kit-metodo b { font-weight: 600; /* Sobre papel claro o realce âmbar do sítio mede 1,98:1 — reprovado. O token escurecido vem de `css/sitio-web.css` (seção 3), que já o usa em `.rodape__legal a` pelo mesmo motivo. */ color: var(--sitio-papel-realce); } /* ── 3 · Audiência ─────────────────────────────────────── */ .kit-audiencia__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } /* O quadro: a caixa de superfície que o pacote não tem como peça genérica. `.ficha` seria o cartão mais próximo, mas ela é o cartão de PROJETO (tem cena, tarja e pé); usar por causa da moldura seria vestir semântica alheia pra herdar padding. */ .kit-quadro { border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio); background-color: var(--sitio-superficie); box-shadow: var(--sitio-relevo), var(--sitio-luz-de-bordo); padding: 24px 24px 28px; } .kit-quadro__titulo { margin: 0 0 8px; font-family: var(--voz-sistema); font-size: var(--sitio-rotulo-corpo); line-height: var(--sitio-rotulo-entrelinha); letter-spacing: var(--sitio-rotulo-espacamento); text-transform: uppercase; color: var(--sitio-tinta-fraca); } .kit-quadro__deck { margin: 0 0 20px; font-size: 13px; line-height: 20px; color: var(--sitio-tinta-secundaria); text-wrap: pretty; } /* A leitura escrita do gráfico. Ela vem DEPOIS do gráfico, e não antes: quem está com pressa lê o gráfico e vai embora; quem quer o argumento lê a frase. Invertido, a frase vira parede antes do dado. */ .kit-leitura { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--sitio-traco); font-size: 14px; line-height: 22px; color: var(--sitio-tinta-secundaria); text-wrap: pretty; } /* A pilha da faixa etária: UMA barra repartida. As quatro faixas dividem o mesmo público e somam 100%, e a forma tem que dizer isso. `overflow:hidden` é o que faz as pontas arredondarem sem que cada pedaço precise saber se é o primeiro ou o último. */ .kit-pilha { display: flex; height: 20px; border-radius: var(--sitio-raio-capsula); overflow: hidden; background-color: var(--sitio-rebaixo); } /* A cor de cada pedaço vem do JS (rampa de intensidade na ordem do eixo, a partir do ciano da casa). O que a folha garante é o `display:block`: `width` em inline é no-op, e o gráfico viraria enfeite sem erro nenhum, que é o defeito que já aconteceu no KavMonitor. O fio de separação é `box-shadow` inset de propósito: borda mexeria na largura, e a largura é o dado. */ .kit-pilha__parte { display: block; height: 100%; flex: none; box-shadow: inset 1px 0 0 var(--sitio-superficie); } .kit-pilha__parte:first-child { box-shadow: none; } /* A legenda é obrigatória: sem ela, a rampa de cor é decoração. Cada item traz o nome escrito e o número, então a cor nunca é o único portador. Em fita, e não em quatro linhas: quatro linhas com fio entre elas voltam a parecer quatro medidas independentes, que é justamente o que a barra repartida existe pra desmentir. */ .kit-legenda { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 0; padding: 0; list-style: none; } .kit-legenda__item { display: flex; align-items: center; gap: 8px; } .kit-legenda__cor { width: 10px; height: 10px; flex: none; border-radius: 3px; background-image: var(--veu-materia); } .kit-legenda__nome { font-family: var(--voz-sistema); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sitio-tinta-secundaria); white-space: nowrap; } .kit-legenda__valor { font-family: var(--voz-sistema); font-size: 13px; font-weight: 400; color: var(--sitio-tinta-cheia); font-variant-numeric: tabular-nums; } /* Os cem quadrados do gênero. 98 contra 2 numa barra repartida dá um fio de poucos pixels para o segundo valor; em cem quadrados, dois quadrados se veem e se contam. A grade é de dez por dez porque a leitura é "a cada cem", e dez colunas é o arranjo em que a conta de cabeça funciona. */ /* Os cem quadrados e a leitura deles lado a lado: empilhados, a leitura vira uma legenda solta embaixo de um mosaico, e a seção ganha 36px de altura para dizer o que cabe ao lado. */ .kit-genero { display: grid; grid-template-columns: 147px minmax(0, 1fr); gap: 22px; align-items: center; } .kit-genero > .kit-vazio { grid-column: 1 / -1; } .kit-cem { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; /* 10 células de 12px mais 9 vãos de 3px. O teto existe porque a grade é de `1fr`: numa coluna de 580px cada célula viraria um bloco de 55px, e cem blocos de 55px são um mosaico, não um gráfico. */ max-width: 147px; } .kit-cem__celula { display: block; aspect-ratio: 1; border-radius: 2px; background-color: var(--sitio-traco); background-image: var(--veu-materia); } /* Ciano da casa e verde do anel, e não azul contra rosa: a convenção de cor por gênero é decoração com opinião, e aqui a cor só separa dois grupos. */ .kit-cem__celula--um { background-color: var(--materia-217, var(--casa)); } .kit-cem__celula--dois { background-color: var(--materia-127, var(--casa)); } .kit-cem__leitura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-family: var(--voz-sistema); font-size: 13px; line-height: 20px; color: var(--sitio-tinta-secundaria); } .kit-cem__leitura b { font-weight: 400; color: var(--sitio-tinta-cheia); font-variant-numeric: tabular-nums; } /* ── 4 · Alcance por plataforma ────────────────────────── */ /* AS COLUNAS SÃO DECLARADAS AQUI, UMA VEZ, PARA AS SEIS LINHAS. A régua compartilhada só é compartilhada se todos os trilhos medirem o mesmo tanto de pixel: com a coluna do nome diferente entre a casa e as cinco, a mesma porcentagem vira largura diferente e a comparação mente sem nada quebrar na tela. Por isso a casa e os satélites leem as MESMAS duas variáveis, e o reflow abaixo troca as duas famílias de uma vez. */ .kit-alcance__grade { --col-nome: 140px; --col-valor: 136px; display: grid; gap: 0; margin-top: 28px; /* O painel é UM só, e as seis linhas moram dentro dele. Painel próprio pra casa custaria 40px de padding no trilho dela e mais nada nas outras: a mesma porcentagem viraria pixel diferente, e a régua compartilhada mentiria sem que nada na tela parecesse errado. */ padding: 18px 20px 16px; border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio); background-color: var(--sitio-superficie); box-shadow: var(--sitio-relevo), var(--sitio-luz-de-bordo); } .kit-casa__linha, .kit-satelites .tema { display: grid; grid-template-columns: var(--col-nome) minmax(0, 1fr) var(--col-valor); grid-template-areas: "nome trilho valor"; column-gap: 24px; align-items: center; } /* A casa: a MESMA linha das outras cinco, promovida. O que a promove é corpo maior, trilho mais grosso e o rótulo em âmbar, nunca uma coluna diferente: coluna diferente tiraria a linha da régua e o argumento junto. O véu que a destaca sangra até a borda do painel (`margin-inline` negativa compensada por `padding-inline` do mesmo tamanho), então ele pinta sem mover nada: a caixa de conteúdo continua exatamente onde estava. */ .kit-casa { margin: -18px -20px 0; padding: 14px 20px 14px; border-bottom: 1px solid var(--sitio-traco); background-color: var(--sitio-superficie-alta); } /* Dois rótulos, dois grupos: é a hierarquia dita em palavra, e não só desenhada. `line-height` explícita porque `.sitio` herda 26px de entrelinha de corpo, e 26px numa linha de 10px são 12px de vão invisível em cada um. */ .kit-casa__titulo, .kit-satelites__titulo { margin: 0; font-family: var(--voz-sistema); font-size: 10px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; } .kit-casa__titulo { padding-bottom: 8px; color: var(--sitio-sinal); } .kit-casa__quem { grid-area: nome; display: grid; gap: 1px; justify-items: start; } .kit-casa__nome { font-family: var(--voz-funcional); font-size: 18px; line-height: 24px; font-weight: 500; color: var(--sitio-tinta-cheia); } .kit-casa__conta { font-family: var(--voz-sistema); font-size: 11px; line-height: 17px; color: var(--sitio-tinta-fraca); } .kit-casa__quanto { grid-area: valor; display: grid; gap: 2px; justify-items: end; text-align: right; } .kit-casa__valor { font-family: var(--voz-sistema); font-size: 28px; line-height: 34px; color: var(--sitio-tinta-cheia); font-variant-numeric: tabular-nums; letter-spacing: -.01em; /* "91,8 mil" quebrando entre o "91,8" e o "mil" deixa de ser um número. `nowrap` transforma a quebra silenciosa em transbordo, que se mede. */ white-space: nowrap; } .kit-casa__unidade { font-family: var(--voz-sistema); font-size: 11px; line-height: 17px; color: var(--sitio-tinta-fraca); } /* O trilho da casa é mais grosso que o das cinco, e essa é a única diferença de desenho que a régua tolera: espessura não é largura. */ .kit-casa .tema__trilho, .kit-casa .tema__barra { height: 14px; } .kit-casa__razao { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--sitio-tinta-secundaria); text-wrap: pretty; } .kit-satelites__titulo { padding: 16px 0 2px; color: var(--sitio-tinta-fraca); } /* `.tema` do pacote é `padding:13px 0`. Aqui a lista é o segundo plano da seção e cada linha cabe numa faixa só: menos ar, e o fio fica, porque é ele que faz as cinco lerem como uma lista e não como cinco afirmações soltas. */ .kit-satelites .tema { padding: 7px 0; } .kit-satelites .tema__nome { grid-area: nome; font-size: 11px; letter-spacing: .1em; white-space: nowrap; } .kit-satelites .tema__valor { grid-area: valor; font-size: 13px; } /* `.sitio a` pinta todo link de âmbar (elementos-sitio.css, mesma especificidade) — a linha inteira ficaria laranja. Mesma correção que `a.cromo__marca` recebe em `css/sitio-chrome.css`. */ .sitio a.kit-casa__linha, .sitio a.kit-satelite { color: var(--sitio-tinta-cheia); } .sitio a.kit-casa__linha:hover .kit-casa__nome, .sitio a.kit-satelite:hover .tema__nome { color: var(--sitio-sinal); } /* `.tema__trilho` e `.tema__barra` são na marcação, e o pacote não declara `display` em nenhum dos dois. Largura em elemento inline é no-op: sem isto TODAS as barras saem do tamanho do trilho e o gráfico vira enfeite. O defeito já aconteceu no KavMonitor; aqui há teste medindo as larguras na tela. */ .kit-alcance .tema__trilho, .kit-alcance .tema__barra { display: block; } .kit-alcance .tema__trilho { grid-area: trilho; } /* A cor do dado é o ciano da casa (`grau-217`, a mesma escolha do KavMonitor), e não o âmbar: âmbar é AÇÃO nesta página — o botão de proposta, o marcador de seção. Gráfico pintado da cor do botão disputa a atenção com o botão. */ .kit-alcance .tema__barra { background-color: var(--materia-217, var(--casa)); } .kit-alcance .escala-sitio { margin-top: 16px; } /* A procedência das seis, consolidada. Mesma voz das outras notas de origem da página, e a mesma promessa: nenhum número sem data. */ .kit-procedencia { margin: 12px 0 0; text-wrap: pretty; } /* ── 5 · Vídeos ────────────────────────────────────────── */ .kit-videos__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; } /* `.video__nome` do pacote não trata palavra longa; título de vídeo tem nome próprio grudado (mesma correção que `css/home.css` aplica). */ .kit-videos__grade .video__nome { overflow-wrap: anywhere; } .sitio a.video { color: var(--sitio-tinta-cheia); } /* ── 6 · Marcas ────────────────────────────────────────── */ .kit-marcas__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 32px 0 0; padding: 0; list-style: none; background-color: var(--sitio-traco); border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio); overflow: hidden; } .kit-marca { display: grid; place-items: center; gap: 10px; min-height: 108px; padding: 20px 24px; background-color: var(--sitio-superficie); } .kit-marca--texto { grid-auto-flow: column; justify-content: center; } /* width/height:auto é obrigatório: os atributos width/height do HTML (que existem pra reservar espaço e evitar reflow) viram, sem isto, o tamanho renderizado — a Hotmart tem 5280px de largura declarada. */ .kit-marca img { width: auto; height: auto; max-width: 100%; max-height: 30px; filter: brightness(0) invert(1); opacity: .74; transition: opacity var(--t-toque) var(--e-entrada); } .kit-marca:hover img { opacity: 1; } .kit-marca span { font-family: var(--voz-funcional); font-size: 15px; font-weight: 500; color: var(--sitio-tinta-cheia); } /* ── 7 · Formatos ──────────────────────────────────────── */ .kit-formatos__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; } /* `.ficha` do pacote levanta 2px no hover porque na home ela LINKA. Aqui é cartão de leitura, não porta: sem link, o movimento promete clique. */ .kit-formato:hover { transform: none; border-color: var(--sitio-traco); box-shadow: var(--sitio-relevo), var(--sitio-luz-de-bordo); } .kit-formato .ficha__corpo { padding: 24px; gap: 12px; } .kit-formato .ficha__deck { font-size: 14px; line-height: 22px; } /* `.papel` (o fecho) sobe 48px por cima do que estiver acima e pinta 144px de degradê opaco. `.secao` só reserva 8px embaixo — sem esta folga, o fim desta seção fica ilegível debaixo do degradê, e a falha é invisível pra qualquer medição de caixa: o conteúdo está inteiro no DOM. */ .kit-formatos { padding-bottom: 56px; } /* ── 8 · O fecho, sobre papel ──────────────────────────── */ .kit-fecho { padding-bottom: 64px; } .kit-fecho__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 300px); gap: 40px; align-items: start; } .kit-fecho__texto { padding-top: 8px; } .kit-fecho__acao { margin-top: 28px; } .kit-briefing__lista { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; } .kit-briefing__lista li { padding: 11px 0 11px 22px; border-top: 1px solid var(--sitio-papel-traco); font-size: 14px; line-height: 21px; color: var(--sitio-papel-tinta); position: relative; } .kit-briefing__lista li:first-child { border-top: 0; } /* O marcador é um traço, não um bullet: o pacote não traz lista com marcador desenhado, e um traço em `::before` é a menor invenção possível. */ .kit-briefing__lista li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 1px; background-color: var(--sitio-papel-tinta-secundaria); } .kit-briefing__nota { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--sitio-papel-traco); font-size: 13px; line-height: 20px; color: var(--sitio-papel-tinta-secundaria); text-wrap: pretty; } /* A linha de lugar não é link (não há pra onde ir), e `.contato__linha` do pacote assume : `css/sitio-web.css` pinta a família inteira com o realce sobre papel. Sem isto ela sai cor de link, com cursor de mão, prometendo um clique que não existe — o tipo de mentira pequena que uma marca nota. */ .kit-canais__lugar { cursor: default; color: var(--sitio-papel-tinta); } .kit-canais__lugar .ico { color: var(--sitio-papel-tinta-secundaria); } /* `.contato__linha` do pacote é `20px 1fr auto`, com o valor na mesma linha do rótulo — calibrado pra valores curtos (`@vkav`, `/viktorkav`). Aqui o valor mais importante é um e-mail de 23 caracteres em mono, que não cabe ao lado do rótulo em nenhuma largura de cartão desta página (medido: 262px de conteúdo numa caixa de 250). Empilhado, ele sai inteiro e clicável — e num mídia kit o endereço é a informação, não o enfeite. */ .kit-canais .contato__linha { grid-template-columns: 20px minmax(0, 1fr); } .kit-canais .contato__valor { grid-column: 2; /* 13px de mono dão 187px pra `vic.cavalcante@gmail.com` — 6px a mais do que a coluna tem a 681px de janela, a largura em que o fecho ainda é de duas colunas. 12px resolve com folga; o `anywhere` é rede pra qualquer caixa mais estreita que apareça depois, e nunca dispara nas larguras da malha. */ font-size: 12px; overflow-wrap: anywhere; } /* ── 9 · O rodapé ──────────────────────────────────────── */ /* `.rodape` é `white-space:nowrap` no pacote (a home põe três coisas curtas nele). Aqui são três grupos, um deles com cinco redes: sem permitir quebra, eles se sobrepõem antes de o miolo estreitar. */ .rodape .sitio__miolo { flex-wrap: wrap; row-gap: 12px; white-space: normal; } .kit-redes { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--voz-sistema); font-size: 12px; } /* `.rodape__legal` não tem regra de layout em lugar nenhum da trilha do sítio: o pacote desenha `.rodape` mas não conhece este filho, que nasce no HTML de cada página. Sem `display`, ele cai no `block` do padrão e os três filhos viram inline separados só pelo espaço em branco do HTML — medido na home a 3px um do outro, "Privacidade Termos © 2026 ViktorKav" lendo como uma coisa só. Isto NÃO é cosmético: o Google exige o link de privacidade pra aprovar a verificação do app OAuth, e o login da área de membros depende dela. Mesma regra que `css/home.css` e `css/tutoriais-hub.css` já carregam, pelo mesmo motivo (ver o commit 7c78e81). */ .rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* Sobre papel claro, `--sitio-sinal` mede 1,98:1 — reprovado. Mesmo token escurecido que `.rodape__legal a` usa em `css/sitio-web.css`. */ .rodape .kit-redes a { color: var(--sitio-papel-realce); } .rodape .kit-redes a:hover { color: var(--sitio-papel-realce-forte); } /* ── 10 · O reflow ─────────────────────────────────────── */ /* 1180 é o breakpoint do cromo compacto (`css/sitio-chrome.css`): a página inteira muda de postura no mesmo ponto, e não num terceiro valor inventado só pra esta folha. */ @media (max-width: 1180px) { /* O herói empilha. `minmax(0, 1fr)`, não `1fr` puro: item de grid tem `min-width:auto`, então mesmo numa trilha só ele não encolhe abaixo do próprio conteúdo — estoura a trilha e o herói por baixo, e o corte fica escondido pelo `overflow:hidden` de `.sitio`. Mesma regra e mesmo motivo de `css/home.css`; esta página não carrega aquela folha. */ .kit-heroi { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-inline: var(--sitio-sangria); } /* Empilhado, o retrato valeria a coluna inteira: com o recorte quase quadrado (2120×2096), 1052px de largura dão ~1039px de altura e a figura domina a dobra sozinha. 320px é presença de retrato, não de pôster. */ /* `min-height:420px` no retrato (elementos-sitio.css) existe pra ele acompanhar a altura da coluna de texto ao LADO. Empilhado, vira 100px de vão escuro entre o carimbo e a foto. */ .kit-heroi .retrato { width: min(320px, 100%); min-height: 0; justify-self: center; } .kit-glance-faixa { padding-inline: var(--sitio-sangria); } .kit-numeros__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; } /* Continua com cara de papel colado: esticado na largura inteira ele deixa de ser recado e vira faixa. */ .kit-metodo { max-width: 460px; justify-self: start; } .kit-videos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-formatos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-fecho__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-fecho__texto { grid-column: 1 / -1; } /* A coluna do nome encolhe nas SEIS de uma vez, pela variável: encolher só a das cinco deixaria o trilho da casa mais curto que o delas, e a régua compartilhada passaria a comparar coisas de escala diferente sem que nada na tela mudasse de aparência. */ .kit-alcance__grade { --col-nome: 118px; } } @media (max-width: 900px) { .kit-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-audiencia__grade { grid-template-columns: minmax(0, 1fr); } /* Abaixo de 900 a fileira de quatro não cabe inteira e quebra 3 + 1 — o quarto número fica órfão numa linha só pra ele. Vira grade de duas faixas, e o fio vertical sai: empilhado, ele deixa de separar colunas e vira traço solto à esquerda de dois dos quatro. Mesma decisão que o KavMonitor tomou pro mesmo componente. */ .kit-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } .kit-glance .medidor__item { padding-left: 0; border-left: 0; } } @media (max-width: 680px) { .kit-abertura { padding-bottom: 32px; } /* `.heroi__acoes` é flex sem quebra (elementos-sitio.css) e cada `.acao` é `white-space:nowrap`: a 390px os dois botões somam mais que a coluna e o segundo vaza pra fora do herói. Mesmo defeito e mesma correção da home. */ .kit-heroi .heroi__acoes { flex-wrap: wrap; } .kit-glance { margin-top: 32px; } .kit-glance .medidor__valor { font-size: 24px; line-height: 30px; } .kit-cifra { padding: 18px 18px 20px; } .kit-cifra__valor { font-size: 26px; line-height: 32px; } /* A barra desce pra uma faixa própria, nas SEIS de uma vez: numa coluna de 350px, trilho e número na mesma linha deixam a barra com menos de 80px, e uma barra de 80px não distingue 20 mil de 6,5 mil. Empilhado, o trilho ganha a largura inteira, que é a única em que o Instagram (2,5% da régua) ainda desenha alguma coisa. */ .kit-casa__linha, .kit-satelites .tema { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome valor" "trilho trilho"; row-gap: 7px; column-gap: 16px; } .kit-casa__quanto { align-self: end; } /* Empilhada, cada linha já ocupa duas faixas: o respiro que separava uma da outra passa a vir da própria altura da linha. */ .kit-satelites .tema { padding: 6px 0 8px; } .kit-videos__grade { grid-template-columns: minmax(0, 1fr); } .kit-formatos__grade { grid-template-columns: minmax(0, 1fr); } .kit-marcas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-fecho__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; } .kit-fecho__texto { grid-column: auto; } /* `.secao__cabeca` é flex com `justify-content:space-between` e o elo do canal na ponta direita: numa coluna de 350px o título e o elo brigam pelo mesmo espaço e os dois quebram em palavras soltas. */ .secao__cabeca { flex-direction: column; align-items: flex-start; gap: 20px; } } /* Quarto degrau, e só nesta folha. Medido a 390px: com duas faixas, cada cifra tem 114px de texto útil, e "329,1 mil" a 26px pede 140. O número quebrava no meio. As duas larguras reais abaixo daqui (390 do iPhone moderno, 375 do SE) caem nesta faixa; 480 é o ponto onde a conta fecha com folga. */ @media (max-width: 480px) { .kit-cifras { grid-template-columns: minmax(0, 1fr); } /* Ao lado dos cem quadrados sobram 110px para a leitura, e "98 masculino" em mono de 13px pede 118. Empilhado ela sai inteira. */ .kit-genero { grid-template-columns: minmax(0, 1fr); gap: 16px; } }