/* ==========================================================================
   CrIAmos V2 — base (mobile first)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
em { font-style: italic; }
::selection { background: var(--champagne); color: var(--brown-100); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--pad-x); top: -60px; z-index: 300; padding: 10px 14px; background: var(--cream); color: var(--brown-100); font-size: var(--fs-small); }
.skip:focus { top: 12px; }

.label { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); line-height: 1.4; }

/* Revelação ao rolar */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }