/* =========================================================================
The Ingredient Brief — Design System "Berry Press" (r04, 18/07/2026)
Linho + vinho-cranberry + sage; CTA âmbar-queimado = única cor quente
saturada (regra medida no KetoSana: o olho vai direto ao botão).
Plus Jakarta Sans self-hosted. Mobile-first (tráfego 100% mobile) ·
WCAG AA >= 4.5:1 · :focus-visible · prefers-reduced-motion.
1. Chrome estrutural (.site-header/.site-footer/.container/.prose/.legal/
.cmp-banner) + 2. componentes de conversão (seção 22: .adv-hero,
.offer-line, .pkg-cards, .ad-label, .buybar, captura). Comentado por seção.
========================================================================= */
/* ====================== 0. FONTES (self-hosted) ========================
Plus Jakarta Sans self-hospedada (SIL OFL — ver assets/fonts/OFL.txt).
Elimina o render-block do Google Fonts (~834ms confirmado no /qa-lp).
É uma fonte VARIÁVEL: 1 woff2 por subset cobre o eixo de peso 400–700,
por isso o mesmo arquivo é referenciado em todos os font-weight.
Subsets latin + latin-ext (acentos pt-BR). font-display: swap.
Os pesos críticos (latin) são pré-carregados via no .
----------------------------------------------------------------------- */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 700; /* eixo variável: cobre 400/500/600/700 */
font-display: swap;
src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fallback ajustado por métrica: enquanto a webfont carrega (swap), o texto usa
Arial reescalado para casar as métricas de Plus Jakarta Sans → swap sem CLS.
Valores Capsize/fontaine (PJS sobre Arial). Entra em --font-sans ANTES das
fontes de sistema cruas, para que o fallback do swap seja o ajustado. */
@font-face {
font-family: "Plus Jakarta Sans Fallback";
src: local("Arial");
ascent-override: 92.7%;
descent-override: 23.16%;
line-gap-override: 0%;
size-adjust: 104.34%;
}
/* ============================ 1. TOKENS (:root) ========================= */
:root {
/* --- Cores: "Berry Press" (The Ingredient Brief, r04 — escolha do dono 18/07) ---
Linho quente + vinho-cranberry dessaturado (remete ao ingrediente do rótulo) +
sage de apoio. O CTA âmbar-queimado é a ÚNICA cor quente saturada da página
(regra medida no KetoSana: o olho vai direto ao botão). Tudo tokenizado; o
HTML não tem hex cravado. Contrastes WCAG AA anotados por par. */
--bg: #FAF6F0; /* linho claro — fundo geral */
--bg-rgb: 250, 246, 240; /* canais de --bg p/ header translúcido */
--surface: #FFFFFF; /* superfície de card/painel */
--primary: #7C2D4A; /* vinho-cranberry — marca (textual: ~8.6:1 s/ branco, AA) */
--primary-text: #63243C; /* vinho profundo p/ ênfase textual (~10.9:1 s/ branco) */
--secondary: #8FA382; /* sage — acento decorativo (NÃO-textual) */
--cta: #B45309; /* âmbar-queimado — ação (branco 4.6:1, AA UI/large) */
--cta-hover: #92400E; /* âmbar profundo — hover (branco 6.3:1, AA) */
--ink: #262219; /* texto principal (quase-preto quente, ~14:1) */
--muted: #5A544B; /* texto secundário (~6.2:1 s/ linho, AA) */
--border: #EDE4D8; /* hairline quente */
--border-strong: #DBCDBB; /* hairline de destaque */
/* Aliases de compatibilidade: nomes que o CSS/HTML antigos esperavam.
Mantidos para que nada referencie variável inexistente. */
--text: var(--ink);
--panel: var(--surface);
--line: var(--border);
--line-bright:var(--border-strong);
--ink-muted: var(--muted);
--warn: var(--cta);
/* --- Tipografia: Plus Jakarta Sans (self-hosted; @font-face na seção 0) ---
"Plus Jakarta Sans Fallback" (Arial reescalado) absorve o swap sem CLS. */
--font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Escala clamp() da v1 */
--fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
--fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
--fs-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
--fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.25rem);
--fs-body: 1rem;
--fs-small: 0.85rem;
--lh-tight: 1.15;
--lh-body: 1.6;
/* --- Forma / espaço --- */
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 18px;
--maxw: 1120px;
--maxw-prose: 42rem;
--gap: clamp(36px, 5.5vw, 72px); /* espaço vertical entre seções */
--pad-x: 24px;
/* Espaçamentos nomeados (compat com HTML que usa var(--space-*) inline) */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4rem;
--space-6: 6rem;
/* --- Sombras (tons do ink quente, herdam a paleta via --shadow-rgb) --- */
--shadow-rgb: 38, 34, 25; /* base das sombras (ink quente) */
--shadow-sm: 0 4px 18px -14px rgba(var(--shadow-rgb), 0.35);
--shadow: 0 14px 40px -22px rgba(var(--shadow-rgb), 0.45);
--shadow-lg: 0 20px 50px -30px rgba(var(--shadow-rgb), 0.50);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* (Temas alternativos kraft/olive removidos na r04 — a paleta oficial é a
Berry Press do :root; troca futura de tema = trocar só os tokens acima.) */
/* ============================ 2. RESET / BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, picture, svg, video { max-width: 100%; display: block; height: auto; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 {
font-family: var(--font-sans);
line-height: var(--lh-tight);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-2); color: var(--muted); }
strong, b { color: var(--ink); font-weight: 600; }
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em; background: var(--bg);
border: 1px solid var(--border); border-radius: 6px; padding: 0.1em 0.4em;
}
/* Foco visível (a11y) */
:focus-visible { outline: 3px solid var(--primary-text); outline-offset: 3px; border-radius: 6px; }
/* Skip link (estrutural — preservado) */
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 100;
background: var(--ink); color: #fff;
font-size: var(--fs-small); font-weight: 600;
padding: var(--space-1) var(--space-2); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
/* ============================ 3. LAYOUT / UTILS ========================= */
/* .container = grade principal do site (estrutural — preservado) */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
/* .wrap = equivalente da v1 (alias para LPs novas que usam .wrap) */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.prose { max-width: var(--maxw-prose); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.center { text-align: center; }
.center .eyebrow { display: inline-block; }
/* .section = bloco vertical (estrutural — preservado). Usa o gap da v1. */
.section { padding-block: var(--gap); border-top: 1px solid var(--border); }
/* nu (LPs v1 que não usam .section) */
section { padding-block: var(--gap); }
/* .section-tag (home) e .eyebrow (v1) — mesmo papel: rótulo de seção. */
.section-tag,
.eyebrow {
display: inline-block;
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--primary-text); margin-bottom: 14px;
}
/* .lead = subtítulo de seção/hero */
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.center .lead { max-width: 62ch; margin-inline: auto; }
/* ============================ 4. HEADER (sticky + blur) ================= */
/* .site-header = chrome real do site. header.site = variante v1 p/ LPs. */
.site-header,
header.site {
position: sticky; top: 0; z-index: 50;
background: rgba(var(--bg-rgb), 0.85); /* fundo translúcido (= --bg, themeable) */
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--border);
}
/* Masthead centrado (pedido do dono, 19/07): marca no CENTRO em cima,
menu centrado embaixo — em todas as larguras, estilo publicação. */
.site-header .container {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; min-height: 62px; padding-top: 10px; padding-bottom: 8px;
}
/* .nav da v1 (LP): wrapper flex de header */
header.site .nav,
.site-header .nav-wrap {
display: flex; align-items: center; justify-content: space-between;
padding: 14px var(--pad-x); max-width: var(--maxw); margin-inline: auto;
}
/* Marca / logo */
.brand,
.logo {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink);
}
.brand:hover, .logo:hover { text-decoration: none; }
.brand .logo-mark { width: 26px; height: 26px; flex: 0 0 auto; color: var(--primary); }
.brand b { color: var(--primary); font-weight: 700; }
.logo .mark {
width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
background: var(--primary); display: grid; place-items: center; color: #fff;
}
/* Nav de links (home) */
/* `.site-header nav` (elemento nu) além de `.nav`: as 27 páginas usam