/* Selo — vistaselo.com.br — sistema visual
Direção: oryzo.ai (narrativa editorial) + ramp.com (cor única dominante,
serif heroica, composição assimétrica), aplicada com Design Taste Stack
(emil-design-eng / impeccable / taste-skill). Brand própria da Selo —
sem diálogo com LA CERDA. Ver tokens.css para a origem de cada cor.
tokens.css é carregado via separado no de cada página
(antes deste arquivo) — NÃO via @import, que serializa a busca de
tokens.css depois de baixar e parsear este arquivo inteiro (perf QA
25/09/2026: ~150-300ms de LCP/FCP perdidos por página). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
body {
margin: 0;
background: var(--selo-cream);
color: var(--selo-ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 var(--space-4); line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 640px) { .container { padding: 0 var(--space-4); } }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; background: var(--selo-ink);
color: var(--selo-text-on-dark); padding: var(--space-3) var(--space-4);
z-index: 1000; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--selo-gold); outline-offset: 2px; }
/* ---------- botões ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: 0.85rem 1.6rem; border-radius: var(--radius-sm); border: 1px solid transparent;
font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--selo-ink); color: var(--selo-text-on-dark); }
.btn-primary:hover { background: var(--selo-ink-soft); }
.btn-gold { background: var(--selo-gold); color: var(--selo-ink); }
.btn-gold:hover { background: var(--selo-gold-dim); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--selo-ink); }
.btn-outline:hover { background: var(--selo-ink); color: var(--selo-text-on-dark); }
.btn-ghost { background: transparent; color: var(--selo-ink); text-transform: none; font-weight: 500; }
.btn-ghost:hover { color: var(--selo-gold-dim); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-sm { padding: 0.55rem 1rem; font-size: var(--fs-micro); }
/* ---------- header ---------- */
.site-header {
position: sticky; top: 0; z-index: var(--z-header);
background: var(--selo-cream); border-bottom: 1px solid var(--selo-line-on-cream);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); padding-bottom: var(--space-4); gap: var(--space-6); }
.site-header__logo img { height: 30px; width: auto; }
.site-header__nav { display: flex; gap: var(--space-8); }
.site-header__nav a { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.site-header__nav a[aria-current="page"] { color: var(--selo-gold-dim); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.cart-pill {
display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--selo-ink);
border-radius: 999px; padding: 0.4rem 0.9rem; font-size: var(--fs-small); font-weight: 600;
transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-pill:hover { background: var(--selo-ink); color: var(--selo-text-on-dark); }
.nav-toggle { display: none; background: none; border: 0; padding: var(--space-2); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
content: ""; display: block; width: 22px; height: 2px; background: var(--selo-ink); position: relative;
transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
@media (max-width: 860px) {
.site-header__nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); height: 100vh; z-index: var(--z-header);
background: var(--selo-ink); color: var(--selo-text-on-dark); flex-direction: column; justify-content: center;
padding: var(--space-8); gap: var(--space-6); transform: translateX(100%);
transition: transform var(--dur-base) var(--ease-out); }
.site-header__nav.is-open { transform: translateX(0); }
.site-header__nav a { color: var(--selo-text-on-dark); font-size: var(--fs-h3); }
.nav-toggle { display: block; }
.nav-scrim {
position: fixed; inset: 0; background: rgba(31, 29, 34, 0.55); z-index: calc(var(--z-header) - 1);
opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 861px) { .nav-scrim { display: none; } }
/* ---------- footer ---------- */
.site-footer { background: var(--selo-ink); color: var(--selo-text-on-dark); padding: var(--space-16) 0 var(--space-8); margin-top: var(--space-32); }
.site-footer a:hover { color: var(--selo-gold); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--selo-line); }
.site-footer__brand img { height: 26px; margin-bottom: var(--space-4); filter: brightness(0) invert(1); }
.site-footer__manifesto { color: var(--selo-muted); font-size: var(--fs-small); max-width: 32ch; }
/* era h4 — rótulo de grupo de links do footer, não título de seção do
conteúdo da página (páginas diferentes chegam no footer em profundidades
de heading distintas, então nenhum nível fixo de heading funciona pra
todas — a11y QA 25/09/2026, heading-order). Vira +