/* =============================================================================
Site de apresentacao do Crivo. Prompt 34, 01/11/2026.
Os tokens moram em tokens.css e sao a UNICA fonte de cor. Aqui nao ha hex,
rgb nem rgba de cor: so var(--token) e color-mix sobre eles. A excecao
escrita e a do HTML, que nao aceita variavel.
Tipografia: Outfit. O peso 200 nos titulos grandes com entreletra negativa e
a assinatura da familia; o corpo sai em 400 e o rotulo tecnico em 500.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* A barra do topo tem 68px: o alvo de uma ancora nao pode ficar atras dela. */
scroll-padding-top: 88px;
}
body {
margin: 0;
background: var(--bg-000);
color: var(--ink);
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { max-width: 100%; }
/* O foco e visivel em tudo o que recebe foco, nos dois temas. */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Todo numero sai tabular: coluna de valores alinhada e digito de largura fixa. */
.num, .kpi-v, .calc-v, .pn-v, .frente-n, .passo-n {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Valor em R$ nunca quebra em duas linhas (criterio 11). */
.nowrap, .calc-v, .kpi-v { white-space: nowrap; }
.coluna {
width: min(var(--coluna), 100% - var(--gutter) * 2);
margin-inline: auto;
}
.pular {
position: absolute;
left: -9999px;
top: 0;
background: var(--sinal);
color: var(--on-sinal);
padding: var(--space-3) var(--space-4);
z-index: 100;
border-radius: 0 0 var(--radius-sm) 0;
font-weight: 500;
}
.pular:focus { left: 0; }
/* ---- 1. Tipografia ------------------------------------------------------- */
h1, h2, h3 {
font-weight: 200;
letter-spacing: -0.03em;
line-height: 1.08;
margin: 0;
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; }
p { margin: 0 0 var(--space-4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--sinal); }
.olho {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
.olho::before {
content: "";
width: 28px;
height: 1px;
background: var(--sinal);
flex: none;
}
.dim { color: var(--ink-muted); }
.sm { font-size: 0.92rem; }
/* ---- 2. Marca ------------------------------------------------------------ */
/* A assinatura e o vetor da spec, inline para herdar a cor do tema: o traco
em currentColor e a celula cheia no --sinal. Nada e recomposto com texto. */
.marca { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.marca svg { height: 30px; width: auto; display: block; }
/* A cor do logo NAO sai daqui. O