/* =========================================================================
Por Dentro da Coisa · tokens da marca (versão 1, 23/10/2026)
Valem para as páginas (celular e computador) e para o PDF feito no Chrome.
Uso:
(peças prontas)
Fontes: arquivos locais em ./fontes, licença SIL Open Font License 1.1
(uso comercial livre, pode embutir em PDF e hospedar no site).
Hospedar as fontes junto com a página evita chamar o Google a cada visita
(melhor para a LGPD e para o aviso de cookies).
========================================================================= */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/inter-500.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/inter-600.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/inter-700.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fontes/inter-800.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("fontes/inter-900.ttf") format("truetype"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fontes/instrument-serif-400-italico.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/jetbrains-mono-500.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/jetbrains-mono-700.ttf") format("truetype"); }
:root {
color-scheme: dark;
/* ---------- cor · escuro (a base: abertura, oferta, capa) ---------- */
--pdc-preto: #0B0B0F; /* fundo de tudo que é escuro */
--pdc-superficie: #131318; /* cartão e bloco sobre o preto */
--pdc-superficie-2: #1A1A21; /* bloco dentro de bloco */
--pdc-linha: #2A2A33; /* borda e divisória (enfeite, nunca informação) */
--pdc-branco: #F2F2F2; /* título, texto e traço do logo · 17,6:1 no preto */
--pdc-texto-2: #C8C8CE; /* texto corrido de apoio · 11,8:1 */
--pdc-cinza: #8A8A8E; /* rótulo e nota · 5,7:1 (o cinza mais escuro que ainda pode levar informação) */
--pdc-vermelho: #FF3B30; /* o acento único · 5,5:1 no preto */
--pdc-vermelho-hover: #FF4F45; /* o botão ao passar o mouse (clareia um pouco) */
--pdc-vermelho-suave: rgba(255, 59, 48, .12);
/* ---------- cor · papel (a parte clara da mescla, para leitura) ---------- */
--pdc-papel: #F2F2F2; /* o mesmo branco da marca, virando fundo */
--pdc-papel-2: #FFFFFF; /* cartão sobre o papel */
--pdc-tinta: #0B0B0F; /* título no papel · 17,6:1 */
--pdc-tinta-texto: #2A2A30; /* texto corrido no papel · 12,7:1 */
--pdc-tinta-apoio: #5C5C63; /* rótulo e nota no papel · 5,9:1 */
--pdc-vermelho-tinta: #C8261B; /* vermelho de texto pequeno no papel · 5,0:1 */
--pdc-linha-papel: #D4D4D8;
/* no papel, o #FF3B30 dá 3,2:1: só forma, tracejado e título a partir de 24 px */
/* ---------- luz e sombra ---------- */
--pdc-brilho-texto: 0 0 22px rgba(255, 59, 48, .55), 0 0 64px rgba(255, 59, 48, .28);
--pdc-brilho-ponto: 0 0 12px rgba(255, 59, 48, .85);
--pdc-brilho-botao: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 30px rgba(255, 59, 48, .32), 0 0 60px rgba(255, 59, 48, .18);
--pdc-sombra: 0 30px 60px rgba(0, 0, 0, .5);
--pdc-sombra-tela: 0 40px 80px rgba(0, 0, 0, .8), 0 12px 26px rgba(0, 0, 0, .6);
--pdc-sombra-papel: 0 24px 50px rgba(11, 11, 15, .22), 0 6px 14px rgba(11, 11, 15, .14);
/* ---------- fontes ---------- */
--pdc-f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* títulos (900, caixa alta) e texto */
--pdc-f-destaque: "Instrument Serif", Georgia, "Times New Roman", serif; /* 1 trecho por título, itálico vermelho */
--pdc-f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* HUD, rótulos, números de apoio */
/* ---------- tamanhos · página (cresce sozinho do celular de 390 px ao computador de 1440 px) ---------- */
--pdc-t-h1: clamp(2.75rem, 1.92rem + 3.4vw, 4.75rem); /* 44 → 76 px */
--pdc-t-h2: clamp(2.125rem, 1.6rem + 2.1vw, 3.25rem); /* 34 → 52 px */
--pdc-t-h3: clamp(1.125rem, 1.07rem + .24vw, 1.25rem); /* 18 → 20 px */
--pdc-t-lead: clamp(1.0625rem, .95rem + .46vw, 1.25rem); /* 17 → 20 px */
--pdc-t-corpo: clamp(1rem, .97rem + .12vw, 1.0625rem); /* 16 → 17 px */
--pdc-t-nota: .875rem; /* 14 px */
--pdc-t-rotulo: clamp(.6875rem, .64rem + .19vw, .8125rem); /* 11 → 13 px, mono, caixa alta */
--pdc-t-botao: 1.25rem; /* 20 px, peso 800 (nunca menos de 19 px: branco no vermelho dá 3,55:1) */
--pdc-t-preco: clamp(4.75rem, 3.95rem + 3.3vw, 6rem); /* 76 → 96 px */
--pdc-destaque-escala: 1.32; /* o trecho em itálico fica 32% maior que o título */
/* ---------- tamanhos · PDF (prancheta de 794 x 1122 px, que sai em meio A4: 148,5 x 210 mm) ----------
No celular a página ocupa a largura da tela; por isso a letra é grande para o papel.
Conta: px da prancheta x 0,53 = pt impresso; px x 0,49 = px num celular de 390 px. */
--pdc-pdf-h2: 56px; /* título da página interna · 30 pt impresso */
--pdc-pdf-lead: 27px; /* abertura da página · 14 pt */
--pdc-pdf-corpo: 24px; /* texto corrido · 12,7 pt impresso, ~12 px num celular de 390 px */
--pdc-pdf-nota: 19px; /* legenda e nota · 10 pt */
--pdc-pdf-rotulo: 16px; /* rótulo mono · 8,5 pt */
/* ---------- espaço (sempre múltiplo de 4) ---------- */
--pdc-e-1: 4px; --pdc-e-2: 8px; --pdc-e-3: 12px; --pdc-e-4: 16px; --pdc-e-5: 24px;
--pdc-e-6: 32px; --pdc-e-7: 48px; --pdc-e-8: 64px; --pdc-e-9: 104px;
--pdc-margem: clamp(20px, 4vw, 56px); /* margem lateral da página: 20 px no celular */
--pdc-faixa: clamp(64px, 8vw, 104px); /* espaço em cima e embaixo de cada faixa */
--pdc-largura: 1120px; /* largura máxima do conteúdo */
--pdc-medida: 62ch; /* linha de leitura confortável */
/* ---------- forma ---------- */
--pdc-raio-1: 6px; /* o miolo (quadrado vermelho) */
--pdc-raio-2: 12px; /* botão e cartão */
--pdc-raio-3: 16px; /* bloco de preço */
--pdc-raio-pilula: 999px;
--pdc-traco: 1.5px; /* borda, canto de câmera, selo */
--pdc-tracejado: repeating-linear-gradient(90deg, var(--pdc-vermelho) 0 16px, transparent 16px 26px); /* a linha do corte */
}
/* faixa clara: dentro dela, as mesmas classes trocam para as cores do papel */
.pdc-papel {
color-scheme: light;
--pdc-fundo: var(--pdc-papel);
--pdc-cor-titulo: var(--pdc-tinta);
--pdc-cor-texto: var(--pdc-tinta-texto);
--pdc-cor-apoio: var(--pdc-tinta-apoio);
--pdc-cor-rotulo: var(--pdc-vermelho-tinta);
--pdc-cor-linha: var(--pdc-linha-papel);
--pdc-titulo-brilho: none;
--pdc-ponto-sombra: 0 0 0 3px rgba(255, 59, 48, .18);
--pdc-selo-fundo: transparent; --pdc-selo-cor: var(--pdc-vermelho-tinta); --pdc-selo-sombra: none;
--pdc-tela-borda: var(--pdc-preto); --pdc-tela-sombra: var(--pdc-sombra-papel);
}
:root, .pdc-escuro {
--pdc-fundo: var(--pdc-preto);
--pdc-cor-titulo: var(--pdc-branco);
--pdc-cor-texto: var(--pdc-texto-2);
--pdc-cor-apoio: var(--pdc-cinza);
--pdc-cor-rotulo: var(--pdc-vermelho);
--pdc-cor-linha: var(--pdc-linha);
--pdc-titulo-brilho: var(--pdc-brilho-texto);
--pdc-ponto-sombra: var(--pdc-brilho-ponto);
--pdc-selo-fundo: rgba(11, 11, 15, .92); --pdc-selo-cor: var(--pdc-vermelho); --pdc-selo-sombra: 0 0 22px rgba(255, 59, 48, .22);
--pdc-tela-borda: var(--pdc-linha); --pdc-tela-sombra: var(--pdc-sombra-tela);
}
/* um bloco .pdc-escuro dentro de uma faixa .pdc-papel (ou o contrário) volta às próprias cores sozinho */