/* Carregamento de fontes: ver assets/fontes.html
Copie as tags de fontes.html no de cada página HTML.
*/
:root {
--bg: oklch(0.988 0.006 45);
--surface: oklch(0.937 0.021 44);
--fg: oklch(0.375 0.093 40);
--muted: oklch(0.515 0.058 42);
--border: oklch(0.375 0.093 40 / 0.18);
--accent: oklch(0.685 0.157 42);
--accent-deep: oklch(0.525 0.145 40);
--salmon: oklch(0.77 0.107 39);
--fonte-display: "Lora", Georgia, "Times New Roman", serif;
--fonte-body: "Karla", "Segoe UI", system-ui, sans-serif;
--fonte-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--fonte-body); }
h1, h2, h3 { font-family: var(--fonte-display); font-weight: 600; letter-spacing: -0.02em; }
.marca-italico { font-family: var(--fonte-display); font-style: italic; font-weight: 500; color: var(--accent); }
.rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.pill-btn {
display: inline-block; border-radius: 999px; padding: 0.8rem 1.6rem;
background: var(--accent-deep); color: var(--bg); border: 0;
font-family: var(--fonte-body); font-weight: 700; cursor: pointer;
text-decoration: none;
}
.pill-btn:hover, .pill-btn:focus-visible { background: var(--accent); }
.faixa-ritmo {
background: var(--fg); color: var(--bg);
padding: 0.35rem 1rem; font-size: 12px; letter-spacing: 0.09em;
text-transform: uppercase; text-align: center;
}
.card-produto {
background: var(--bg); border: 1px solid var(--border); border-radius: 0;
display: flex; flex-direction: column; position: relative;
}
.card-produto img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.card-produto .nome {
font-size: 0.9rem; line-height: 1.25; padding: 0.5rem 0.6rem 0.7rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }