/* =========================================================================
IRONESS — tokens e componentes oficiais da marca
Fonte única da verdade para ebooks, posts/stories e landing page.
Não altere valores aqui sem aprovação do dono da marca.
Fontes (todas OFL, uso comercial livre):
https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Kalam:wght@700&display=swap
Para PDF/offline: baixe os .woff2 e declare @font-face local (mesmos nomes de família).
========================================================================= */
:root {
/* Cores */
--papel: #EEEAE2; /* fundo padrão (papel milimetrado) */
--tinta: #16161A; /* texto e traços; fundo dos slides de venda */
--caneta: #E2412B; /* vermelho do revisor: SÓ riscar, circular, anotar, destacar */
--caneta-clara: #FF6A52; /* vermelho sobre fundo tinta (contraste) */
--grafico: #1F3A93; /* azul só para dados/gráficos */
--grafite: #5B5A57; /* texto secundário, legendas */
--rodape: #3A3936; /* texto de citação sobre papel */
--linha: #D9D2C5; /* fundos neutros, divisórias suaves */
--apagado: #8A877F; /* letras inativas do selo */
--papel-escuro-txt: #CFCAC0; /* texto secundário sobre tinta */
/* Grade do papel milimetrado */
--grade-cor: rgba(22, 22, 26, 0.055);
--grade: 45px; /* em canvas 1080 px; escale proporcionalmente */
/* Famílias */
--f-titulo: 'Archivo', sans-serif; /* sempre 900 + font-stretch 112–125% */
--f-emocao: 'Instrument Serif', serif; /* itálico: a palavra que toca */
--f-dado: 'IBM Plex Mono', monospace; /* números, fontes, rótulos, selo */
--f-caneta: 'Kalam', cursive; /* 700, vermelho, frases curtas rotacionadas */
/* Traços */
--borda: 3px; /* borda padrão de caixas em canvas 1080 */
}
/* ---------- Fundo ---------- */
.papel {
background-color: var(--papel);
background-image:
linear-gradient(var(--grade-cor) 1px, transparent 1px),
linear-gradient(90deg, var(--grade-cor) 1px, transparent 1px);
background-size: var(--grade) var(--grade);
color: var(--tinta);
}
.negativo { background: var(--tinta); color: var(--papel); }
/* ---------- Tipografia ---------- */
.titulo { font-family: var(--f-titulo); font-weight: 900; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; }
.titulo-x { font-family: var(--f-titulo); font-weight: 900; font-stretch: 125%; letter-spacing: -0.03em; line-height: 0.9; } /* wordmark/hero */
.emocao { font-family: var(--f-emocao); font-style: italic; }
.dado { font-family: var(--f-dado); }
.rotulo { font-family: var(--f-dado); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.rotulo--caneta { color: var(--caneta); }
.caneta { font-family: var(--f-caneta); font-weight: 700; color: var(--caneta); transform: rotate(-3deg); }
.corpo { font-family: var(--f-titulo); font-weight: 400; font-stretch: 100%; line-height: 1.35; }
/* ---------- Símbolo Fe 26 (tile da tabela periódica) ----------
Proporções: borda = 3% do lado; padding ≈ 7%/8%; número = 13% do lado (mono 600);
símbolo = 50% do lado (Archivo 900, line-height .8); massa = 9% (mono 400).
Uso: 26Fe55,845
*/
.tile {
--lado: 120px;
width: var(--lado); height: var(--lado); box-sizing: border-box;
border: calc(var(--lado) * 0.033) solid currentColor;
padding: calc(var(--lado) * 0.07) calc(var(--lado) * 0.08);
display: flex; flex-direction: column; justify-content: space-between;
}
.tile__n { font-family: var(--f-dado); font-weight: 600; font-size: calc(var(--lado) * 0.13); line-height: 1; }
.tile__s { font-family: var(--f-titulo); font-weight: 900; font-size: calc(var(--lado) * 0.5); line-height: 0.8; letter-spacing: -0.03em; }
.tile__m { font-family: var(--f-dado); font-size: calc(var(--lado) * 0.09); line-height: 1; }
/* ---------- Lockup IRONESS LAB (submarca dos guias) ---------- */
.lab { display: inline-flex; border: var(--borda) solid var(--tinta); font-family: var(--f-titulo); font-weight: 900; font-stretch: 125%; }
.lab > span { padding: 0.25em 0.45em; }
.lab > span + span { background: var(--caneta); color: var(--papel); border-left: var(--borda) solid var(--tinta); }
/* ---------- Selo de nível de evidência ----------
NÍVEL DE EVIDÊNCIA
ABCD
meta-análise · 49 ECRs · n=1.863
Exatamente UMA letra .is-on. A–D definidos no protocolo de evidência. */
.selo { display: inline-flex; align-items: stretch; border: 2px solid var(--tinta); font-family: var(--f-dado); background: var(--papel); color: var(--tinta); }
.selo__rot { padding: 0.55em 0.8em; font-weight: 600; letter-spacing: 0.08em; display: flex; align-items: center; }
.selo__n { width: 2.6em; display: flex; align-items: center; justify-content: center; color: var(--apagado); border-left: 2px solid var(--tinta); font-size: 1.2em; }
.selo__n.is-on { background: var(--tinta); color: var(--papel); font-weight: 600; }
.selo__desc { padding: 0.55em 0.8em; border-left: 2px solid var(--tinta); display: flex; align-items: center; }
/* ---------- Rodapé de citação ---------- */
.citacao { border-top: 2px solid var(--tinta); padding-top: 0.8em; font-family: var(--f-dado); color: var(--rodape); line-height: 1.45; }
/* ---------- Tag de cabeçalho (ex.: MITO × EVIDÊNCIA) ---------- */
.tag { font-family: var(--f-dado); font-weight: 600; border: 2px solid var(--tinta); padding: 0.3em 0.6em; }
.tag--aberto { border-style: dashed; }
/* ---------- Risco de caneta (aplicar SVG por linha de texto) ----------
MAIS MÚSCULO. */
.riscado { position: relative; display: inline-block; }
.riscado svg { position: absolute; left: -1%; top: 46%; width: 102%; height: 0.25em; overflow: visible; }
.riscado path { fill: none; stroke: var(--caneta); stroke-width: 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }