/* ==========================================================================
0. FONTES (self-hosted)
--------------------------------------------------------------------------
Servidas da própria origem: o CSS do Google Fonts bloqueava a renderização
por ~875ms e era 90% do render delay do LCP. Subset latin — cobre pt-BR
inteiro, inclusive ª ã ç õ e o travessão.
Cada família é variável: um arquivo cobre toda a faixa de peso.
Os "* Fallback" abaixo são a fonte do sistema com métricas ajustadas para
bater com a webfont, medidas com fontTools sobre o texto real desta página.
É o que segura o CLS em ~0 durante o swap.
========================================================================== */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('fonts/BodoniModa.woff2') format('woff2');
}
@font-face {
font-family: 'Bodoni Moda';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url('fonts/BodoniModa-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/Archivo.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('fonts/JetBrainsMono.woff2') format('woff2');
}
@font-face {
font-family: 'Bodoni Moda Fallback';
src: local('Times New Roman');
size-adjust: 113.99%;
ascent-override: 98.69%;
descent-override: 35.09%;
line-gap-override: 0.00%;
}
@font-face {
font-family: 'Archivo Fallback';
src: local('Arial');
size-adjust: 101.52%;
ascent-override: 86.48%;
descent-override: 20.68%;
line-gap-override: 0.00%;
}
@font-face {
font-family: 'JetBrains Mono Fallback';
src: local('Courier New');
size-adjust: 99.98%;
ascent-override: 102.02%;
descent-override: 30.00%;
line-gap-override: 0.00%;
}
/* ==========================================================================
KB — Design System
Kerolinne Barboza · Advogada & Professora
Folha de estilo de produção. A landing page importa este arquivo.
Documentação viva: design-system.html
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
/* --- MARCA ------------------------------------------------------------
Amostradas do arquivo do logotipo, não aproximadas:
o grafite das capitulares e o ouro da balança. */
--kb-gold: #d9b432; /* ouro exato da marca · 9,4:1 sobre tinta */
--kb-gold-bright: #e8c855; /* hover / foco */
--kb-gold-deep: #7d6620; /* texto sobre papel · 4,9:1 */
--kb-gold-wash: rgba(217, 180, 50, 0.12);
--kb-gold-hair: rgba(217, 180, 50, 0.32);
--kb-graphite: #393939; /* grafite exato do logotipo */
/* --- TINTA DE CORREÇÃO ------------------------------------------------
Segundo acento, sempre funcional: ponto perdido, erro, linha negativa.
Nunca decorativo. Nunca como cor de fundo de bloco inteiro. */
--kb-oxblood: #8c2f27; /* somente sobre papel */
--kb-alert: #d9705f; /* versão legível sobre fundo escuro */
--kb-alert-wash: rgba(217, 112, 95, 0.12);
/* --- SUPERFÍCIES ESCURAS (dominantes) --------------------------------- */
--kb-ink: #101114; /* base da página */
--kb-ink-2: #16181c; /* seção alternada */
--kb-ink-3: #1d2026; /* card */
--kb-ink-4: #262a31; /* card elevado / hover */
/* --- SUPERFÍCIES CLARAS (relevo documental) ---------------------------
"Papel" = artefato jurídico: espelho, peça, súmula. Uso pontual. */
--kb-paper: #f4f1e8;
--kb-paper-2: #ffffff;
--kb-paper-line: #ddd7c7; /* pauta / régua do papel */
/* --- BORDAS ----------------------------------------------------------- */
--kb-border: rgba(255, 255, 255, 0.09);
--kb-border-2: rgba(255, 255, 255, 0.16);
--kb-border-strong: rgba(255, 255, 255, 0.26);
/* --- TEXTO SOBRE ESCURO ----------------------------------------------- */
--kb-text: #ffffff;
--kb-text-2: rgba(255, 255, 255, 0.78);
--kb-text-3: rgba(255, 255, 255, 0.58);
--kb-text-4: rgba(255, 255, 255, 0.40);
/* --- TEXTO SOBRE PAPEL ------------------------------------------------ */
--kb-text-paper: #1a1a19;
--kb-text-paper-2: #5a574e;
/* --- TIPOGRAFIA -------------------------------------------------------
Display: Bodoni Moda — alto contraste, ecoa as capitulares do logo.
Texto: Archivo — grotesca variável, largura ajustável em rótulos.
Dado: JetBrains Mono — pontuação, artigos, prazos, numeração. */
--kb-font-display: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif;
--kb-font-body: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
--kb-font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', Menlo, monospace;
/* Escala fluida. Cada degrau tem um papel — não interpolar entre eles. */
--kb-fs-2xs: 0.6875rem; /* rótulo de formulário */
--kb-fs-xs: 0.75rem; /* eyebrow, legenda */
--kb-fs-sm: 0.875rem; /* botão, meta */
--kb-fs-md: 1rem; /* corpo */
--kb-fs-lg: 1.0625rem; /* corpo largo, lide */
--kb-fs-xl: 1.25rem;
--kb-fs-2xl: clamp(1.375rem, 2.2vw, 1.625rem); /* título de card */
--kb-fs-3xl: clamp(1.75rem, 3.2vw, 2.25rem); /* título de seção */
--kb-fs-4xl: clamp(2.25rem, 4.6vw, 3.25rem); /* título de seção forte*/
--kb-fs-5xl: clamp(2.75rem, 6.4vw, 4.75rem); /* hero */
--kb-fs-6xl: clamp(3.5rem, 9vw, 7rem); /* número de destaque */
--kb-lh-tight: 1.06;
--kb-lh-snug: 1.25;
--kb-lh-body: 1.62;
/* --- ESPAÇAMENTO ------------------------------------------------------ */
--kb-1: 0.25rem; --kb-2: 0.5rem; --kb-3: 0.75rem;
--kb-4: 1rem; --kb-5: 1.25rem; --kb-6: 1.5rem;
--kb-8: 2rem; --kb-10: 2.5rem; --kb-12: 3rem;
--kb-16: 4rem; --kb-20: 5rem; --kb-24: 6rem;
/* --- RAIO -------------------------------------------------------------
Contido de propósito. Documento jurídico não tem canto arredondado. */
--kb-r-sm: 3px;
--kb-r-md: 6px;
--kb-r-lg: 10px;
--kb-r-full: 9999px;
/* --- SOMBRA ----------------------------------------------------------- */
--kb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
--kb-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
--kb-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
--kb-shadow-paper: 0 24px 60px rgba(0, 0, 0, 0.6);
--kb-shadow-gold: 0 6px 24px rgba(217, 180, 50, 0.28);
/* --- MOVIMENTO -------------------------------------------------------- */
--kb-t-fast: 0.15s ease;
--kb-t-normal: 0.3s ease;
--kb-t-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
/* --- GRADE ------------------------------------------------------------ */
--kb-container: 1180px;
--kb-container-narrow: 760px;
--kb-pad: clamp(1.25rem, 4vw, 2rem);
/* --- NOTA DE CORTE ----------------------------------------------------
6,0 de 10,0. Referência de todo componente de pontuação. */
--kb-corte: 60%;
}
/* ==========================================================================
2. RESET / BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
background: var(--kb-ink);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--kb-font-body);
font-size: var(--kb-fs-md);
line-height: var(--kb-lh-body);
color: var(--kb-text);
background: var(--kb-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* height:auto neutraliza o atributo height="" do HTML. Sem isso a altura vira
definida, e todo aspect-ratio/object-fit aplicado depois é ignorado.
Os atributos width/height continuam valendo para reservar espaço e evitar
salto de layout enquanto a imagem carrega. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--kb-gold); color: var(--kb-ink); }
/* Foco visível em tudo que recebe teclado. Não remover. */
:focus-visible {
outline: 2px solid var(--kb-gold-bright);
outline-offset: 3px;
border-radius: var(--kb-r-sm);
}
/* ==========================================================================
3. LAYOUT
========================================================================== */
.kb-container {
width: 100%;
max-width: var(--kb-container);
margin-inline: auto;
padding-inline: var(--kb-pad);
}
.kb-container--narrow { max-width: var(--kb-container-narrow); }
.kb-section {
padding-block: var(--kb-24);
position: relative;
}
.kb-section--tight { padding-block: var(--kb-16); }
.kb-section--flush { padding-block: 0; }
.kb-section--ink { background: var(--kb-ink); }
.kb-section--ink-2 { background: var(--kb-ink-2); }
.kb-section--paper { background: var(--kb-paper); color: var(--kb-text-paper); }
/* Filete de ouro entre seções de mesmo tom — separa sem pesar. */
.kb-section--ink + .kb-section--ink,
.kb-section--ink-2 + .kb-section--ink-2 { border-top: 1px solid var(--kb-border); }
@media (max-width: 768px) {
.kb-section { padding-block: var(--kb-16); }
.kb-section--tight { padding-block: var(--kb-12); }
}
/* ==========================================================================
3b. LOGOTIPO
--------------------------------------------------------------------------
Seis arquivos em Assets/03. Identidade Visual/:
kb-logo-horizontal.png grafite · fundo claro (papel)
kb-logo-horizontal-claro.png papel · fundo escuro ← padrão na LP
kb-logo-vertical.png grafite · fundo claro
kb-logo-vertical-claro.png papel · fundo escuro
kb-simbolo.png grafite · só a balança, 512×512
kb-simbolo-claro.png papel · só a balança, 512×512
O ouro da balança é idêntico em todos — só o grafite inverte. Como a
página é escura, a variante -claro é a regra; a grafite é exceção
(impresso, bloco de papel, anexo de e-mail).
PISO DE LEGIBILIDADE — medido, não estimado:
lockup ≥ 200px de largura, senão "Advogada & Professora" fecha;
símbolo ≥ 32px, senão a balança vira borrão.
Abaixo de 200px no lockup, troque pelo símbolo — não encolha a assinatura.
========================================================================== */
.kb-logo { height: auto; }
.kb-logo--nav { width: 200px; } /* lockup horizontal no topo */
.kb-logo--rodape { width: 208px; } /* lockup horizontal no rodapé */
.kb-logo--selo { width: 148px; } /* lockup vertical, uso pontual */
.kb-logo--simbolo { width: 40px; } /* balança isolada */
/* No mobile o lockup não cabe acima do piso: entra o símbolo.
A LP marca as duas imagens e o CSS escolhe — nada de encolher a assinatura. */
.kb-logo--so-simbolo { display: none; }
@media (max-width: 620px) {
.kb-logo--nav { display: none; }
.kb-logo--so-simbolo { display: block; width: 36px; }
}
/* ==========================================================================
4. TIPOGRAFIA
========================================================================== */
/* Filete duplo do logotipo. Único ornamento herdado da marca — usar uma vez
por seção, nunca dois na mesma dobra. */
.kb-rule {
display: block;
width: 56px;
height: 5px;
border-top: 1.5px solid var(--kb-gold);
border-bottom: 1.5px solid var(--kb-gold);
margin-bottom: var(--kb-5);
}
.kb-rule--center { margin-inline: auto; }
.kb-eyebrow {
display: inline-block;
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kb-gold);
margin-bottom: var(--kb-4);
}
.kb-title {
font-family: var(--kb-font-display);
font-size: var(--kb-fs-3xl);
font-weight: 600;
line-height: var(--kb-lh-tight);
letter-spacing: -0.015em;
text-wrap: balance;
}
.kb-title--hero { font-size: var(--kb-fs-5xl); }
.kb-title--large { font-size: var(--kb-fs-4xl); }
/* Ênfase no título: itálico Bodoni em ouro. É a voz da marca — um trecho
por título, no substantivo que carrega a promessa. */
.kb-title em {
font-style: italic;
color: var(--kb-gold);
}
.kb-lede {
font-size: var(--kb-fs-lg);
line-height: var(--kb-lh-body);
color: var(--kb-text-2);
max-width: 62ch;
margin-top: var(--kb-5);
text-wrap: pretty;
}
.kb-section--paper .kb-lede { color: var(--kb-text-paper-2); }
.kb-header { margin-bottom: var(--kb-12); }
.kb-header--center { text-align: center; }
.kb-header--center .kb-lede { margin-inline: auto; }
/* Citação legal, prazo, artigo. Sempre mono — é dado, não prosa. */
.kb-cite {
font-family: var(--kb-font-mono);
font-size: 0.85em;
letter-spacing: 0.01em;
color: var(--kb-gold);
white-space: nowrap;
}
.kb-section--paper .kb-cite { color: var(--kb-gold-deep); }
.kb-label {
font-family: var(--kb-font-body);
font-size: var(--kb-fs-2xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kb-text-3);
}
/* ==========================================================================
5. BOTÕES
========================================================================== */
.kb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--kb-2);
padding: 15px 30px;
font-family: var(--kb-font-body);
font-size: var(--kb-fs-sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
border: 1.5px solid transparent;
border-radius: var(--kb-r-sm);
cursor: pointer;
white-space: nowrap;
transition: background var(--kb-t-normal), border-color var(--kb-t-normal),
color var(--kb-t-normal), transform var(--kb-t-fast),
box-shadow var(--kb-t-normal);
}
.kb-btn:hover { transform: translateY(-2px); }
.kb-btn:active { transform: translateY(0); }
.kb-btn--primary {
background: var(--kb-gold);
border-color: var(--kb-gold);
color: #14130e;
box-shadow: var(--kb-shadow-gold);
}
.kb-btn--primary:hover {
background: var(--kb-gold-bright);
border-color: var(--kb-gold-bright);
box-shadow: 0 10px 32px rgba(217, 180, 50, 0.40);
}
.kb-btn--outline {
background: transparent;
border-color: var(--kb-border-strong);
color: var(--kb-text);
}
.kb-btn--outline:hover {
border-color: var(--kb-gold);
color: var(--kb-gold);
}
.kb-btn--paper {
background: var(--kb-paper);
border-color: var(--kb-paper);
color: var(--kb-text-paper);
}
.kb-btn--paper:hover { background: #fff; border-color: #fff; }
.kb-btn--ghost {
background: transparent;
border-color: transparent;
color: var(--kb-gold);
padding-inline: var(--kb-2);
}
.kb-btn--ghost:hover { color: var(--kb-gold-bright); }
.kb-btn--lg { padding: 19px 42px; font-size: var(--kb-fs-md); }
.kb-btn--sm { padding: 11px 20px; font-size: var(--kb-fs-xs); }
.kb-btn--block { display: flex; width: 100%; }
/* Microcópia sob o CTA: responde a objeção imediata, nunca repete o botão. */
.kb-btn-note {
font-size: var(--kb-fs-xs);
color: var(--kb-text-3);
margin-top: var(--kb-3);
}
/* ==========================================================================
6. SELOS E ETIQUETAS
========================================================================== */
.kb-badge {
display: inline-flex;
align-items: center;
gap: var(--kb-2);
padding: 6px 12px;
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-2xs);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--kb-gold-hair);
border-radius: var(--kb-r-full);
background: var(--kb-gold-wash);
color: var(--kb-gold);
}
.kb-badge--solid { background: var(--kb-gold); border-color: var(--kb-gold); color: #14130e; }
.kb-badge--alert { background: var(--kb-alert-wash); border-color: rgba(217,112,95,0.34); color: var(--kb-alert); }
.kb-badge--quiet { background: transparent; border-color: var(--kb-border-2); color: var(--kb-text-3); }
/* ==========================================================================
7. CARDS
========================================================================== */
.kb-card {
background: var(--kb-ink-3);
border: 1px solid var(--kb-border);
border-radius: var(--kb-r-lg);
padding: var(--kb-8);
transition: border-color var(--kb-t-normal), background var(--kb-t-normal),
transform var(--kb-t-normal);
}
.kb-card--hover:hover {
background: var(--kb-ink-4);
border-color: var(--kb-gold-hair);
transform: translateY(-3px);
}
.kb-card__title {
font-family: var(--kb-font-display);
font-size: var(--kb-fs-2xl);
font-weight: 600;
line-height: var(--kb-lh-snug);
margin-bottom: var(--kb-3);
}
.kb-card__body { color: var(--kb-text-2); }
/* Superfície papel: espelho, peça, súmula. É artefato, não card comum. */
.kb-paper {
background: var(--kb-paper);
color: var(--kb-text-paper);
border-radius: var(--kb-r-md);
box-shadow: var(--kb-shadow-paper);
/* Pauta lateral esquerda, como caderno de prova. */
border-left: 3px solid var(--kb-gold);
}
/* min-width:0 anula o "auto" implícito do item de grade. Sem isso, qualquer
conteúdo indivisível dentro (botão com nowrap, tabela, palavra longa)
estica a coluna e empurra a página inteira para além da viewport. */
.kb-grid { display: grid; gap: var(--kb-5); }
.kb-grid > * { min-width: 0; }
.kb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kb-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .kb-grid--3, .kb-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kb-grid--2, .kb-grid--3, .kb-grid--4 { grid-template-columns: 1fr; } }
/* ==========================================================================
8. ESPELHO DE CORREÇÃO ← elemento-assinatura
--------------------------------------------------------------------------
O artefato que define a 2ª fase: itens valendo frações de ponto, somando
10,00, com corte em 6,00. Na LP ele deixa de ser abstração e vira a seção
de competências — cada linha é um ponto que o aluno passa a conquistar.
Uso: ...
O valor de --pontos alimenta a barra e deve bater com a soma das linhas.
========================================================================== */
.kb-espelho {
--pontos: 0;
background: var(--kb-paper);
color: var(--kb-text-paper);
border-radius: var(--kb-r-md);
border-left: 3px solid var(--kb-gold);
box-shadow: var(--kb-shadow-paper);
overflow: hidden;
}
.kb-espelho__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--kb-3);
padding: var(--kb-6) var(--kb-6) var(--kb-4);
border-bottom: 1px solid var(--kb-paper-line);
}
.kb-espelho__peca {
font-family: var(--kb-font-display);
font-size: var(--kb-fs-xl);
font-weight: 600;
line-height: var(--kb-lh-snug);
}
.kb-espelho__ref {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-2xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--kb-text-paper-2);
display: block;
margin-bottom: var(--kb-1);
}
.kb-espelho__linhas { padding: var(--kb-2) var(--kb-6) var(--kb-5); }
.kb-espelho__linha {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: start;
gap: var(--kb-4);
padding: var(--kb-4) 0;
border-bottom: 1px solid var(--kb-paper-line);
}
.kb-espelho__linha:last-child { border-bottom: 0; }
.kb-espelho__marca {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-md);
line-height: 1.4;
color: var(--kb-gold-deep);
}
.kb-espelho__linha--perdido .kb-espelho__marca { color: var(--kb-oxblood); }
.kb-espelho__item { line-height: 1.45; }
.kb-espelho__item small {
display: block;
margin-top: 3px;
font-size: var(--kb-fs-xs);
color: var(--kb-text-paper-2);
}
.kb-espelho__pontos {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--kb-gold-deep);
white-space: nowrap;
padding-top: 2px;
}
.kb-espelho__linha--perdido .kb-espelho__pontos { color: var(--kb-oxblood); }
.kb-espelho__linha--perdido .kb-espelho__item { color: var(--kb-text-paper-2); }
/* --- Medidor: barra 0 → 10 com marca fixa da linha de corte em 6,0 ------- */
.kb-espelho__nota {
padding: var(--kb-5) var(--kb-6) var(--kb-6);
border-top: 1px solid var(--kb-paper-line);
background: rgba(0, 0, 0, 0.03);
}
.kb-medidor {
position: relative;
height: 12px;
background: #e4dfd1;
border-radius: var(--kb-r-full);
overflow: visible;
}
.kb-medidor__preenchimento {
height: 100%;
width: calc(var(--pontos) * 10%);
background: linear-gradient(90deg, var(--kb-gold-deep), var(--kb-gold));
border-radius: var(--kb-r-full);
transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.kb-medidor__corte {
position: absolute;
top: -7px;
bottom: -7px;
left: var(--kb-corte);
width: 2px;
background: var(--kb-oxblood);
}
.kb-medidor__corte::after {
content: "corte 6,00";
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-2xs);
letter-spacing: 0.06em;
color: var(--kb-oxblood);
white-space: nowrap;
}
.kb-espelho__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--kb-4);
margin-top: var(--kb-8);
}
.kb-espelho__total-rotulo {
font-family: var(--kb-font-body);
font-size: var(--kb-fs-2xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kb-text-paper-2);
}
.kb-espelho__total-valor {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-2xl);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--kb-gold-deep);
}
/* Animação de entrada: a barra sobe até a nota ao aparecer na tela.
Adicione .is-visivel via IntersectionObserver. */
.kb-espelho .kb-medidor__preenchimento { width: 0; }
.kb-espelho.is-visivel .kb-medidor__preenchimento { width: calc(var(--pontos) * 10%); }
@media (max-width: 560px) {
.kb-espelho__linha { grid-template-columns: 20px 1fr; }
.kb-espelho__pontos { grid-column: 2; padding-top: var(--kb-1); }
}
/* ==========================================================================
9. AULAS — sequência real, por isso numerada
--------------------------------------------------------------------------
Numeração só aqui e no espelho. Em seção que não é sequência, não numerar.
========================================================================== */
.kb-aula {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--kb-5);
padding: var(--kb-5) 0;
border-bottom: 1px solid var(--kb-border);
}
.kb-aula__n {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-sm);
color: var(--kb-gold);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.kb-aula__titulo {
font-family: var(--kb-font-display);
font-size: var(--kb-fs-xl);
font-weight: 600;
line-height: var(--kb-lh-snug);
}
.kb-aula__desc { color: var(--kb-text-3); font-size: var(--kb-fs-sm); margin-top: 2px; }
.kb-aula__meta {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-xs);
color: var(--kb-text-4);
white-space: nowrap;
}
@media (max-width: 620px) {
.kb-aula { grid-template-columns: auto 1fr; }
.kb-aula__meta { grid-column: 2; }
}
/* ==========================================================================
10. PROVA SOCIAL
--------------------------------------------------------------------------
Os depoimentos são prints de WhatsApp. Não recortar em balão falso —
a captura crua é o que dá credibilidade. Emoldurar, não simular.
========================================================================== */
.kb-print {
background: var(--kb-ink-3);
border: 1px solid var(--kb-border);
border-radius: var(--kb-r-lg);
overflow: hidden;
}
.kb-print img { width: 100%; height: auto; }
.kb-print__pe {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kb-3);
padding: var(--kb-3) var(--kb-4);
border-top: 1px solid var(--kb-border);
font-size: var(--kb-fs-xs);
color: var(--kb-text-3);
}
.kb-print__nome { color: var(--kb-text-2); font-weight: 600; }
/* Números auditáveis: dado em mono, rótulo em caixa alta discreta. */
.kb-stat { text-align: center; }
.kb-stat__valor {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-4xl);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--kb-gold);
line-height: 1;
}
.kb-stat__rotulo {
display: block;
margin-top: var(--kb-3);
font-size: var(--kb-fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--kb-text-3);
}
/* ==========================================================================
11. COMPARATIVO
--------------------------------------------------------------------------
Ouro = o que ela entrega. Oxblood = o que falta no caminho comum.
========================================================================== */
.kb-comparativo {
width: 100%;
border-collapse: collapse;
font-size: var(--kb-fs-sm);
}
.kb-comparativo th,
.kb-comparativo td {
padding: var(--kb-4) var(--kb-5);
border-bottom: 1px solid var(--kb-border);
text-align: left;
vertical-align: top;
}
.kb-comparativo thead th {
font-family: var(--kb-font-body);
font-size: var(--kb-fs-2xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--kb-text-3);
border-bottom-color: var(--kb-border-2);
}
.kb-comparativo thead th.is-destaque { color: var(--kb-gold); }
.kb-comparativo td.is-destaque { background: var(--kb-gold-wash); color: var(--kb-text); }
.kb-comparativo td.is-ausente { color: var(--kb-alert); }
.kb-comparativo tbody tr:last-child td { border-bottom: 0; }
.kb-comparativo__wrap { overflow-x: auto; }
/* ==========================================================================
12. FAQ
========================================================================== */
.kb-faq__item { border-bottom: 1px solid var(--kb-border); }
.kb-faq__pergunta {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kb-5);
padding: var(--kb-5) 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
font-family: var(--kb-font-display);
font-size: var(--kb-fs-xl);
font-weight: 600;
line-height: var(--kb-lh-snug);
color: var(--kb-text);
transition: color var(--kb-t-fast);
}
.kb-faq__pergunta:hover { color: var(--kb-gold); }
.kb-faq__sinal {
flex-shrink: 0;
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-xl);
color: var(--kb-gold);
transition: transform var(--kb-t-normal);
}
.kb-faq__item.is-aberto .kb-faq__sinal { transform: rotate(45deg); }
.kb-faq__resposta {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--kb-t-normal);
}
.kb-faq__item.is-aberto .kb-faq__resposta { grid-template-rows: 1fr; }
.kb-faq__resposta > div { overflow: hidden; }
.kb-faq__resposta p { color: var(--kb-text-2); padding-bottom: var(--kb-6); max-width: 68ch; }
/* ==========================================================================
12b. PEÇA CORRIGIDA ← assinatura da LP de captação
--------------------------------------------------------------------------
Variante do espelho para oferta sem nota. Onde o espelho mostra pontos,
esta mostra o que a promessa da página realmente diz: "eu corrijo a sua
peça, apontando o que travou e como melhorar".
Duas marcas de margem, e só duas:
.kb-peca__nota--travou oxblood — o que custou o ponto
.kb-peca__nota--melhora ouro — o que fazer no lugar
Sem inventar nota: se não há pontuação na oferta, não exiba pontuação.
========================================================================== */
.kb-peca {
background: var(--kb-paper);
color: var(--kb-text-paper);
border-radius: var(--kb-r-md);
border-left: 3px solid var(--kb-gold);
box-shadow: var(--kb-shadow-paper);
overflow: hidden;
}
.kb-peca__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--kb-3);
padding: var(--kb-6) var(--kb-6) var(--kb-4);
border-bottom: 1px solid var(--kb-paper-line);
}
.kb-peca__ref {
display: block;
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-2xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--kb-text-paper-2);
margin-bottom: var(--kb-1);
}
.kb-peca__titulo {
font-family: var(--kb-font-display);
font-size: var(--kb-fs-xl);
font-weight: 600;
line-height: var(--kb-lh-snug);
}
.kb-peca__corpo { padding: var(--kb-6); }
/* Trecho manuscrito do aluno. Serifa em cinza — é rascunho, não título. */
.kb-peca__trecho {
font-family: var(--kb-font-display);
font-size: var(--kb-fs-md);
line-height: 1.85;
color: #46433c;
margin-bottom: var(--kb-5);
}
.kb-peca__trecho:last-child { margin-bottom: 0; }
/* Marcação sobre o texto do aluno: sublinhado de caneta, não realce chapado. */
.kb-peca__marca {
background: linear-gradient(transparent 62%, rgba(140, 47, 39, 0.22) 62%);
padding-bottom: 1px;
}
.kb-peca__marca--ok {
background: linear-gradient(transparent 62%, rgba(217, 180, 50, 0.34) 62%);
}
/* Anotação de margem. */
.kb-peca__nota {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--kb-3);
align-items: start;
margin: var(--kb-4) 0 var(--kb-5) var(--kb-6);
padding-left: var(--kb-4);
border-left: 2px solid var(--kb-oxblood);
font-family: var(--kb-font-body);
font-size: var(--kb-fs-sm);
line-height: 1.55;
color: var(--kb-text-paper-2);
}
.kb-peca__nota--melhora { border-left-color: var(--kb-gold); }
.kb-peca__nota-tag {
font-family: var(--kb-font-mono);
font-size: var(--kb-fs-2xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--kb-oxblood);
white-space: nowrap;
padding-top: 2px;
}
.kb-peca__nota--melhora .kb-peca__nota-tag { color: var(--kb-gold-deep); }
.kb-peca__pe {
display: flex;
align-items: center;
gap: var(--kb-3);
padding: var(--kb-4) var(--kb-6);
border-top: 1px solid var(--kb-paper-line);
background: rgba(0, 0, 0, 0.03);
font-size: var(--kb-fs-sm);
color: var(--kb-text-paper-2);
}
.kb-peca__assinatura {
font-family: var(--kb-font-display);
font-style: italic;
color: var(--kb-text-paper);
}
@media (max-width: 560px) {
.kb-peca__nota { margin-left: 0; grid-template-columns: 1fr; gap: var(--kb-1); }
}
/* ==========================================================================
12c. NÍVEL DE ACOMPANHAMENTO
--------------------------------------------------------------------------
As modalidades são uma escada real de intensidade — por isso ganham
indicador. Não é ornamento: diz quantos degraus acima do mínimo a
modalidade está. Uso:
========================================================================== */
.kb-nivel { display: inline-flex; gap: 5px; align-items: center; }
.kb-nivel::before,
.kb-nivel::after,
.kb-nivel > i {
content: "";
display: block;
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--kb-border-2);
}
.kb-nivel[data-nivel="1"]::before,
.kb-nivel[data-nivel="2"]::before,
.kb-nivel[data-nivel="2"] > i,
.kb-nivel[data-nivel="3"]::before,
.kb-nivel[data-nivel="3"] > i,
.kb-nivel[data-nivel="3"]::after { background: var(--kb-gold); }
/* ==========================================================================
12d. TOPO E RODAPÉ DA LP
========================================================================== */
.kb-topo {
position: sticky;
top: 0;
z-index: 60;
background: rgba(16, 17, 20, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--kb-border);
}
.kb-topo__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kb-5);
max-width: var(--kb-container);
margin-inline: auto;
padding: var(--kb-4) var(--kb-pad);
}
.kb-rodape {
border-top: 1px solid var(--kb-border);
padding-block: var(--kb-16);
}
.kb-rodape__inner {
display: grid;
gap: var(--kb-8);
align-items: start;
grid-template-columns: auto 1fr;
}
.kb-rodape__nota {
font-size: var(--kb-fs-sm);
color: var(--kb-text-3);
max-width: 56ch;
}
@media (max-width: 700px) { .kb-rodape__inner { grid-template-columns: 1fr; } }
/* ==========================================================================
12e. CANAL (YouTube / Instagram)
========================================================================== */
.kb-canal {
display: flex;
align-items: center;
gap: var(--kb-4);
padding: var(--kb-5) var(--kb-6);
background: var(--kb-ink-3);
border: 1px solid var(--kb-border);
border-radius: var(--kb-r-lg);
transition: border-color var(--kb-t-normal), background var(--kb-t-normal),
transform var(--kb-t-normal);
}
.kb-canal:hover {
background: var(--kb-ink-4);
border-color: var(--kb-gold-hair);
transform: translateY(-3px);
}
.kb-canal svg { flex-shrink: 0; width: 26px; height: 26px; fill: var(--kb-gold); }
.kb-canal__nome { font-weight: 600; }
.kb-canal__meta { display: block; font-size: var(--kb-fs-xs); color: var(--kb-text-3); }
.kb-canal__seta { margin-left: auto; color: var(--kb-gold); }
/* ==========================================================================
13. REVELAÇÃO NO SCROLL
--------------------------------------------------------------------------
Só esconde se o JavaScript estiver vivo para mostrar de volta. A classe .js
é gravada no por um script no , antes da primeira pintura.
Sem isso, qualquer falha de JS — ou um rastreador que não executa script —
deixaria metade da página invisível em vez de só sem animação.
========================================================================== */
.js .kb-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--kb-t-slow), transform var(--kb-t-slow);
}
.js .kb-reveal.is-visivel { opacity: 1; transform: none; }
/* ==========================================================================
14. MOVIMENTO REDUZIDO
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js .kb-reveal { opacity: 1; transform: none; }
.kb-espelho .kb-medidor__preenchimento { width: calc(var(--pontos) * 10%); }
}