:root {
  --brand: oklch(42% 0.145 23.6);
  --brand-strong: oklch(33% 0.12 23);
  --brand-deep: oklch(24% 0.09 22);
  --brand-soft: oklch(95% 0.022 20);
  --brand-line: oklch(84% 0.05 22);
  --gold: oklch(80% 0.12 80);

  --ink: oklch(21% 0.02 250);
  --ink-muted: oklch(46% 0.015 250);
  --ink-subtle: oklch(62% 0.012 250);
  --line: oklch(90% 0.008 250);
  --line-strong: oklch(82% 0.012 250);
  --paper: oklch(99% 0.004 95);
  --surface: #fff;
  --surface-sunken: oklch(96.5% 0.007 80);
  --success: oklch(52% 0.13 155);
  --live: oklch(66% 0.17 50);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-raised: 0 1px 2px oklch(21% 0.02 250 / .05), 0 2px 6px oklch(21% 0.02 250 / .04);
  --shadow-overlay: 0 12px 32px oklch(21% 0.02 250 / .12), 0 2px 6px oklch(21% 0.02 250 / .06);
  --shadow-brand: 0 18px 40px oklch(33% 0.12 23 / .28);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --container: 76rem;
  --header-h: 84px;
  --section: clamp(4rem, 3rem + 4vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: var(--radius-md); text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Botões ---------- */
.btn {
  --bg: var(--brand); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.25rem; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font: 600 .95rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary:hover { --bg: var(--brand-strong); box-shadow: var(--shadow-brand); }
.btn--light { --bg: #fff; --fg: var(--brand-strong); }
.btn--light:hover { box-shadow: 0 14px 30px oklch(0% 0 0 / .25); }
.btn--ghost-light { --bg: oklch(100% 0 0 / .06); --fg: #fff; --bd: oklch(100% 0 0 / .35); backdrop-filter: blur(6px); }
.btn--ghost-light:hover { --bg: oklch(100% 0 0 / .14); --bd: oklch(100% 0 0 / .6); }
.btn--sm { padding: .6rem 1rem; font-size: .875rem; }
.btn--lg { padding: 1rem 1.5rem; font-size: 1rem; }

/* ---------- Topbar & header ---------- */
.topbar { background: #8d0f12; color: #fff; font-size: .82rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar__info { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.topbar__info span, .topbar__info a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; opacity: .92; }
.topbar__info a:hover, .topbar__site:hover { opacity: 1; text-decoration: underline; }
.topbar__site { text-decoration: none; font-weight: 600; opacity: .92; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(100% 0 0 / .9);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px oklch(21% 0.02 250 / .06); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.brand img { height: 48px; width: auto; }
.brand__tag {
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a:not(.btn) {
  position: relative; padding: .55rem .8rem; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: oklch(45% 0.01 250); text-decoration: none; transition: color .2s;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px;
  background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:not(.btn):hover, .nav a:not(.btn).is-active { color: var(--brand); }
.nav a:not(.btn):hover::after, .nav a:not(.btn).is-active::after { transform: scaleX(1); }
.nav .btn { margin-left: .75rem; }
.nav-toggle { display: none; }

/* ---------- Barra de status ---------- */
.status-bar { background: var(--brand-deep); color: #fff; font-size: .9rem; }
.status-bar__inner { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 46px; flex-wrap: wrap; padding-block: .4rem; }
.status-bar__pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 currentColor; color: oklch(70% 0.15 155 / .6); animation: pulse 1.8s infinite; }
.status-bar[data-state="breve"] .status-bar__pulse { background: var(--gold); color: oklch(80% 0.12 80 / .6); }
.status-bar[data-state="encerrada"] .status-bar__pulse { background: var(--ink-subtle); animation: none; }
.status-bar span[data-status-text] { opacity: .8; }
.status-bar__countdown {
  font-variant-numeric: tabular-nums; font-weight: 700;
  padding: .2rem .7rem; border-radius: var(--radius-pill); background: oklch(100% 0 0 / .1);
}
.status-bar__countdown:empty { display: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(4rem, 3rem + 5vw, 7rem); isolation: isolate; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48rem 32rem at 100% 0%, oklch(93% 0.035 22 / .9), transparent 65%),
    radial-gradient(36rem 26rem at 0% 100%, oklch(95% 0.025 60 / .8), transparent 60%),
    var(--paper);
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(oklch(42% 0.145 23.6 / .14) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60rem 40rem at 70% 30%, #000, transparent 70%);
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hero__pill {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .7rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--brand-line); box-shadow: var(--shadow-raised);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-strong);
}
.hero__pill-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; margin-top: 1.5rem; color: var(--ink); }
.hero h1 em {
  position: relative; font-style: normal; color: var(--brand); white-space: nowrap;
}
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; z-index: -1;
  background: oklch(84% 0.09 70 / .7); border-radius: 4px;
}
.hero__lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; color: var(--ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }
.hero__stats { list-style: none; padding: 0; margin: 3rem 0 0; display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.hero__stats li { display: grid; padding-left: 1rem; border-left: 2px solid var(--brand-line); }
.hero__stats strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hero__stats span { font-size: .85rem; color: var(--ink-subtle); }

.hero__visual { position: relative; padding: 1.5rem 0 3.5rem 2.5rem; }
.hero__shape {
  position: absolute; inset: 0 0 1.5rem 4.5rem; border-radius: 40px; transform: rotate(4deg);
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  box-shadow: var(--shadow-brand);
}
.hero__photo {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden;
  box-shadow: 0 30px 60px oklch(21% 0.02 250 / .2);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero__badge {
  position: absolute; top: 3.25rem; right: -1rem; display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1rem .7rem .7rem; border-radius: var(--radius-lg);
  background: oklch(100% 0 0 / .92); backdrop-filter: blur(10px); box-shadow: var(--shadow-overlay);
  animation: float 6s ease-in-out infinite;
}
.hero__badge-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--brand); color: #fff; }
.hero__badge > span:last-child { display: grid; line-height: 1.25; }
.hero__badge strong { font-size: .92rem; }
.hero__badge small { font-size: .78rem; color: var(--ink-subtle); }
@keyframes float { 50% { transform: translateY(-8px); } }

.ilustra { width: 100%; height: auto; stroke: none; overflow: visible; }
.hero__urna {
  position: absolute; top: 2.5rem; left: 0; z-index: 2; display: grid; justify-items: center; gap: .35rem;
  width: 9.5rem; padding: .9rem .9rem 1rem; border-radius: var(--radius-xl);
  background: oklch(100% 0 0 / .94); backdrop-filter: blur(10px); box-shadow: var(--shadow-overlay); text-align: center;
  animation: float 7s ease-in-out -2s infinite;
}
.hero__urna .urna { width: 5.75rem; }
.hero__urna > span { display: grid; line-height: 1.25; }
.hero__urna strong { font-size: .9rem; }
.hero__urna small { font-size: .74rem; color: var(--ink-subtle); }
.urna__cedula { animation: votar 3.6s var(--ease) infinite; }
@keyframes votar {
  0% { transform: translateY(-10px); opacity: 0; }
  15%, 50% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(42px); opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}

.ticker { overflow: hidden; background: linear-gradient(90deg, var(--brand-deep), var(--brand) 50%, var(--brand-deep)); color: #fff; }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; }
.ticker__group span {
  display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.75rem; white-space: nowrap;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.ticker__group span::after { content: ""; width: .35rem; height: .35rem; margin-left: 1.75rem; border-radius: 50%; background: oklch(84% 0.09 70); }
.ticker__group svg { width: 1.3rem; height: 1.3rem; color: oklch(88% 0.08 70); }
.ticker__group b { font-weight: 800; }
@keyframes ticker { to { transform: translateX(-50%); } }

.when-card {
  position: absolute; left: 0; bottom: 0; width: min(20rem, 80%); padding: 1.25rem 1.35rem;
  border-radius: var(--radius-xl); background: oklch(100% 0 0 / .95); backdrop-filter: blur(12px);
  border: 1px solid oklch(100% 0 0 / .6); box-shadow: 0 24px 50px oklch(21% 0.02 250 / .18);
}
.when-card__label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.when-card__dates { display: flex; align-items: center; gap: .75rem; margin: .85rem 0; }
.date-tile {
  position: relative; flex: 1; display: grid; justify-items: center; padding: .85rem .5rem .6rem;
  background: var(--surface); border: 1px solid var(--brand-line); border-top: 7px solid var(--brand); border-radius: var(--radius-md);
  box-shadow: 0 3px 0 -1px var(--surface), 0 4px 0 -1px var(--brand-line);
}
.date-tile::before, .date-tile::after {
  content: ""; position: absolute; top: -.7rem; width: .32rem; height: .8rem; border-radius: 99px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--surface);
}
.date-tile::before { left: 28%; }
.date-tile::after { right: 28%; }
.date-tile__day { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--brand); }
.date-tile__month { font-size: .8rem; font-weight: 700; letter-spacing: .14em; margin-top: .25rem; color: var(--ink); }
.when-card__line { flex: 0 0 1.5rem; height: 2px; background: var(--brand-line); position: relative; overflow: hidden; border-radius: 2px; }
.when-card__line span { position: absolute; inset: 0; width: 40%; background: var(--brand); animation: slide 2.2s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.when-card__note { font-size: .85rem; color: var(--ink-muted); }

/* ---------- Seções ---------- */
.section { padding-block: var(--section); }
.section--sunken { background: var(--surface-sunken); }
.section--dark { background: linear-gradient(180deg, var(--brand-deep), oklch(19% 0.06 22)); color: #fff; }
.section__head { max-width: 42rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.section__head--row > div { max-width: 42rem; }
.section__head h2, .cta h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); font-weight: 800; margin-top: .6rem; }
.section__head p:not(.eyebrow) { margin-top: 1rem; font-size: 1.075rem; color: var(--ink-muted); }
.section--dark .section__head p:not(.eyebrow) { color: oklch(100% 0 0 / .72); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--light { color: oklch(88% 0.08 60); }

.icon-badge {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff;
  box-shadow: 0 8px 18px oklch(33% 0.12 23 / .25);
}
.icon-badge svg { width: 1.5rem; height: 1.5rem; }
.icon-badge--soft { background: var(--brand-soft); color: var(--brand); box-shadow: none; border: 1px solid var(--brand-line); }
.icon-badge--glass { background: oklch(100% 0 0 / .12); box-shadow: none; }

/* Mensagem do presidente */
.president { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); overflow-x: clip; }
.president__grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.president__media {
  position: relative; margin: 0; padding: .55rem; border-radius: 28px; isolation: isolate;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 55%, var(--brand-deep) 100%);
  box-shadow: 0 30px 60px oklch(21% 0.02 250 / .2), 0 0 0 1px oklch(100% 0 0 / .06) inset;
}
.president__media::before {
  content: ""; position: absolute; inset: auto -14% -26% auto; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, oklch(80% 0.12 80 / .2), transparent 65%); pointer-events: none;
}
.president__player { position: relative; aspect-ratio: 16 / 9; border-radius: 21px; overflow: hidden; background: var(--brand-deep); }
.president__player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.president__play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1.1rem;
  border: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer;
  background: linear-gradient(to top, oklch(19% 0.06 22 / .55), transparent 45%);
  transition: opacity .35s var(--ease), visibility .35s;
}
.president__play-btn {
  display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #fff; color: var(--brand); position: relative; z-index: 1;
  box-shadow: 0 12px 26px oklch(19% 0.06 22 / .35);
  transition: transform .3s var(--ease);
}
.president__play-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: oklch(100% 0 0 / .5); animation: president-pulse 2.2s var(--ease) infinite;
}
.president__play-btn svg { width: 1.35rem; height: 1.35rem; fill: currentColor; stroke: none; margin-left: .15rem; }
.president__play-tag {
  margin-left: -1.2rem; padding: .55rem 1rem .55rem 1.75rem; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: oklch(100% 0 0 / .92); font-size: .82rem; font-weight: 700; letter-spacing: .01em; color: var(--brand-strong);
  box-shadow: 0 10px 22px oklch(19% 0.06 22 / .25);
}
.president__play:hover .president__play-btn { transform: scale(1.07); }
.president__player.is-playing .president__play { opacity: 0; visibility: hidden; }
@keyframes president-pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.65); opacity: 0; }
}
.president__caption { display: flex; align-items: center; gap: .9rem; padding: 1rem .9rem .5rem; color: #fff; }
.president__seal {
  display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gold); color: var(--brand-deep); box-shadow: 0 0 0 4px oklch(80% 0.12 80 / .2);
}
.president__seal svg { width: 1.3rem; height: 1.3rem; }
.president__who { display: grid; gap: .1rem; line-height: 1.3; min-width: 0; }
.president__who strong { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.president__who span { font-size: .88rem; color: oklch(100% 0 0 / .72); }
.president__body h2 { font-size: clamp(1.8rem, 1.35rem + 1.6vw, 2.5rem); font-weight: 800; margin-top: .6rem; max-width: 34rem; }
.president__quote { position: relative; margin: 1.5rem 0 0; padding-left: 1.5rem; border-left: 3px solid var(--brand); color: var(--ink-muted); font-size: 1.02rem; }
.president__quote p + p { margin-top: .85rem; }
.president__quote p:first-child { color: var(--ink); font-weight: 600; }

/* Requisitos */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.info-card {
  position: relative; overflow: hidden; padding: 2rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.info-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-overlay); border-color: var(--brand-line); }
.info-card:hover::before { transform: scaleX(1); }
.info-card__num { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--brand-soft); letter-spacing: -.04em; }
.info-card h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.info-card p { color: var(--ink-muted); }
.info-card p.info-card__highlight {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; padding: .7rem .85rem; border-radius: var(--radius-md);
  background: var(--brand); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.35; box-shadow: 0 8px 18px oklch(33% 0.12 23 / .25);
}
.info-card__highlight svg { width: 1.1rem; height: 1.1rem; margin-top: .05rem; color: oklch(88% 0.08 70); }

.deadline {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 2rem; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, oklch(97% 0.03 80), oklch(95% 0.05 75)); border: 1px solid oklch(85% 0.1 80);
  box-shadow: var(--shadow-raised);
}
.deadline::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(var(--brand), oklch(72% 0.16 60)); }
.deadline__badge {
  position: relative; display: grid; justify-items: center; width: 6.5rem; padding: .95rem .5rem .7rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--brand-line); border-top: 8px solid var(--brand); box-shadow: var(--shadow-overlay);
}
.deadline__badge::before, .deadline__badge::after {
  content: ""; position: absolute; top: -.8rem; width: .35rem; height: .9rem; border-radius: 99px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface);
}
.deadline__badge::before { left: 28%; }
.deadline__badge::after { right: 28%; }
.deadline__badge strong { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--brand); }
.deadline__badge span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.deadline__label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: oklch(48% 0.12 55); }
.deadline h3 { margin-top: .3rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.deadline h3 span { color: var(--brand); }
.deadline__body > p:last-child { margin-top: .45rem; color: var(--ink-muted); font-size: .97rem; }

/* Passos */
.howto { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.howto__body .section__head { margin-bottom: 1.75rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.step__btn {
  width: 100%; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.1rem; row-gap: .2rem; align-items: start;
  padding: 1.05rem 1.2rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.step__btn:hover { transform: translateX(6px); box-shadow: var(--shadow-overlay); border-color: var(--brand-line); }
.step__btn.is-active { transform: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-raised); }
.step__num {
  grid-row: span 3; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px;
  background: var(--brand-soft); color: var(--brand); font-size: 1.2rem; font-weight: 800; transition: background .3s, color .3s;
}
.step__btn:hover .step__num, .step__btn.is-active .step__num { background: var(--brand); color: #fff; }
.step__btn.is-done .step__num { background: oklch(94% 0.05 155); color: var(--success); }
.step__titulo { margin-top: .1rem; font-size: 1.08rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.step__texto { color: var(--ink-muted); font-size: .95rem; line-height: 1.5; }
.step__ver { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .8rem; font-weight: 700; color: var(--brand); }
.step__ver svg { width: .95rem; height: .95rem; transition: transform .25s var(--ease); }
.step__btn:hover .step__ver svg { transform: translateX(3px); }
.step__btn.is-active .step__ver { display: none; }
.step__btn > :not(.step__num) { grid-column: 2; }
.step__num { grid-row: 1 / span 6; }
.step__formas { display: grid; gap: .4rem; margin-top: .45rem; }
.step__forma { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; line-height: 1.45; color: var(--ink-muted); }
.step__forma > svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .1rem; color: var(--brand); }
.step__forma b { color: var(--ink); }
.step__destaque {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .55rem; padding: .6rem .75rem; border-radius: var(--radius-md);
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-strong); font-size: .86rem; font-weight: 600; line-height: 1.4;
}
.step__destaque svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .05rem; }

/* Demonstração da votação (telas do sistema, chapas fictícias) */
.demo {
  position: sticky; top: calc(var(--header-h) + 1.25rem); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px oklch(21% 0.02 250 / .16);
}
.demo__aviso {
  display: flex; align-items: center; gap: .7rem; margin: 0; padding: .7rem 1rem;
  background: repeating-linear-gradient(-45deg, oklch(86% 0.15 88), oklch(86% 0.15 88) 14px, oklch(83% 0.15 85) 14px, oklch(83% 0.15 85) 28px);
  color: oklch(28% 0.06 60); font-size: .86rem; line-height: 1.35;
}
.demo__aviso svg { flex: none; width: 1.5rem; height: 1.5rem; stroke-width: 2.2; }
.demo__aviso strong { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.demo__url-tag {
  flex: none; padding: .1rem .5rem; border-radius: var(--radius-pill); background: oklch(86% 0.15 88); color: oklch(28% 0.06 60);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.demo__bar { display: flex; align-items: center; gap: .8rem; padding: .6rem .85rem; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.demo__dots { display: flex; gap: .35rem; }
.demo__dots i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--line-strong); }
.demo__url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line); font-size: .78rem; color: var(--ink-muted);
}
.demo__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo__tela { position: relative; container: demo / inline-size; min-height: 31rem; display: flex; flex-direction: column; background: oklch(98.6% 0.004 95); font-size: .9rem; line-height: 1.45; }
.demo__tela > * { animation: dm-entra .35s var(--ease); }
.demo__tela::after {
  content: "SIMULAÇÃO"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden;
  font-size: clamp(3rem, 14cqi, 6.5rem); font-weight: 900; letter-spacing: .08em; color: oklch(42% 0.145 23.6 / .07);
  transform: rotate(-22deg);
}
@keyframes dm-entra { from { opacity: 0; transform: translateY(6px); } }
.demo__pe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-top: 1px solid var(--line); font-size: .78rem; }
.demo__selo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: oklch(48% 0.12 55); }
.demo__selo svg { width: 1rem; height: 1rem; }
.demo__reiniciar { padding: .25rem .1rem; border: 0; background: none; font: 600 .78rem var(--font); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.dm-pad { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem 1.6rem; }
.dm-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); }
.dm-h { margin-top: .2rem; font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.dm-h:focus { outline: none; }
.dm-sub { max-width: 34rem; margin-top: .35rem; font-size: .86rem; color: var(--ink-muted); }
.dm-btn {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; padding: .65rem 1.05rem; border-radius: 8px;
  border: 1.5px solid transparent; background: var(--brand); color: #fff; font: 600 .86rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background .2s, transform .2s var(--ease);
}
.dm-btn:hover { background: var(--brand-strong); transform: translateY(-1px); }
.dm-btn svg { width: 1rem; height: 1rem; }
.dm-btn--sec { background: #fff; color: var(--brand); border-color: var(--brand-line); }
.dm-btn--sec:hover { background: var(--brand-soft); }
.dm-label { margin-top: 1rem; font-size: .75rem; font-weight: 700; color: var(--ink-muted); }
.dm-select { width: 100%; max-width: 22rem; margin-top: .3rem; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; color: var(--ink); }
.dm-cro { display: flex; align-items: center; gap: .85rem; width: 100%; max-width: 22rem; margin-top: .85rem; padding: .85rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.dm-cro strong { display: block; }
.dm-cro small { display: block; font-size: .8rem; line-height: 1.45; color: var(--ink-muted); }

.dm-marca { display: inline-flex; align-items: center; gap: .6rem; }
.dm-marca img { width: 5.85rem; height: 1.6rem; object-fit: cover; object-position: left center; }
.dm-marca b { padding-left: .6rem; border-left: 1px solid var(--line-strong); font-size: .8rem; letter-spacing: .04em; color: var(--brand); }
.dm-marca--claro img { filter: brightness(0) invert(1); }
.dm-marca--claro b { color: #fff; border-color: oklch(100% 0 0 / .4); }
.dm-app { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.6rem; background: #fff; border-bottom: 1px solid var(--line); }
.dm-app__sis { font-size: .75rem; font-weight: 600; color: var(--ink-muted); }

.dm-split { flex: 1; display: grid; grid-template-columns: 38% 1fr; }
.dm-painel { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.2rem; color: #fff; background: linear-gradient(160deg, #8d0f12, #5e0a0d); }
.dm-painel__sis { font-size: .8rem; font-weight: 700; }
.dm-painel__lema { margin-top: auto; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.dm-opcoes { display: grid; gap: .55rem; width: 100%; margin-top: 1rem; }
.dm-opcao {
  display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.dm-opcao:hover { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand), var(--shadow-raised); }
.dm-opcao__ic { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.dm-opcao__ic svg { width: 1.15rem; height: 1.15rem; }
.dm-opcao > span:nth-child(2) { flex: 1; display: grid; }
.dm-opcao b { font-size: .88rem; }
.dm-opcao small { font-size: .76rem; color: var(--ink-muted); }
.dm-opcao > svg { width: 1rem; height: 1rem; color: var(--ink-subtle); }
.dm-voltar, .dm-link { padding: 0; border: 0; background: none; font: 600 .8rem var(--font); color: var(--ink); cursor: pointer; }
.dm-voltar { margin-bottom: .7rem; }
.dm-link--manual { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; color: var(--brand); text-decoration: none; }
.dm-link--manual svg { width: .95rem; height: .95rem; }
.dm-dica {
  display: flex; align-items: flex-start; gap: .55rem; width: 100%; margin-top: .8rem; padding: .6rem .75rem; border-radius: 10px;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-strong); font-size: .8rem; line-height: 1.4;
}
.dm-dica svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .05rem; }
.dm-voltar:hover, .dm-link:hover { color: var(--brand); }

.dm-situacao { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .5rem .85rem; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: .84rem; font-weight: 600; }
.dm-situacao.is-ok { background: oklch(94% 0.05 155); color: oklch(40% 0.11 155); }
.dm-situacao svg { width: 1.05rem; height: 1.05rem; }
.dm-spin { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brand); animation: dm-gira .8s linear infinite; }
@keyframes dm-gira { to { transform: rotate(360deg); } }
.dm-cert { display: flex; align-items: center; gap: .75rem; width: 100%; max-width: 24rem; margin-top: 1rem; padding: .75rem .9rem; border: 1.5px solid var(--brand); border-radius: 10px; background: #fff; }
.dm-cert > svg { width: 1.4rem; height: 1.4rem; color: var(--brand); }
.dm-cert span { display: grid; }
.dm-cert b { font-size: .86rem; }
.dm-cert small { font-size: .76rem; color: var(--ink-muted); }

.dm-bio { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1.2rem; align-items: center; width: 100%; margin-top: 1rem; padding: 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.dm-bio .dm-label { margin-top: 0; }
.dm-qr { aspect-ratio: 1; padding: .55rem; border: 1px solid var(--line); border-radius: 12px; }
.dm-qr svg { display: block; width: 100%; height: 100%; fill: var(--ink); stroke: none; }
.dm-par { font-size: 1.15rem; font-weight: 800; letter-spacing: .35em; color: var(--ink); }
.dm-nota { margin-top: .35rem; font-size: .78rem; color: var(--ink-muted); }
.dm-pill { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: .76rem; font-weight: 600; }
.dm-pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-muted); animation: dm-pisca 1.2s ease-in-out infinite; }
@keyframes dm-pisca { 50% { opacity: .25; } }
.dm-celular { display: grid; place-items: center; width: 6.5rem; aspect-ratio: 9 / 17; margin-inline: auto; border-radius: 1.2rem; border: .35rem solid var(--ink); background: oklch(28% 0.02 250); }
.dm-oval { display: grid; place-items: center; width: 70%; aspect-ratio: 3 / 4; border-radius: 50%; border: 3px dashed #fff; color: #fff; animation: dm-pisca 1.1s ease-in-out infinite; }
.dm-oval svg { width: 60%; height: 60%; }
.dm-celular.is-ok .dm-oval { border: 3px solid oklch(74% 0.17 155); color: oklch(74% 0.17 155); animation: none; }

.dm-pleito { display: grid; justify-items: start; gap: .25rem; width: 100%; max-width: 24rem; margin-top: 1.1rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-raised); }
.dm-pleito b { font-size: 1rem; line-height: 1.3; }
.dm-pleito small { font-size: .8rem; color: var(--ink-muted); }
.dm-pleito .dm-btn { margin-top: .7rem; }
.dm-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: var(--radius-pill); background: oklch(95% 0.04 60); color: oklch(45% 0.12 50); font-size: .72rem; font-weight: 700; }
.dm-tag::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.dm-teclas { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.dm-teclas li { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--ink-muted); }
.dm-k { flex: none; min-width: 4.6rem; padding: .32rem .45rem; border-radius: 5px; background: #3b4048; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.dm-k--confirma { background: #1f8a4c; }
.dm-k--corrige { background: #d9581a; }
.dm-k--branco { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dm-k--nulo { background: #6b7280; }

.dm-pad--cabine { padding-bottom: 1rem; }
.dm-urna { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: .9rem; width: 100%; margin-top: .9rem; padding: .9rem; border-radius: 16px; background: linear-gradient(#ececea, #dadad6); border: 1px solid #c9c9c5; }
.dm-urna:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.dm-visor { display: flex; flex-direction: column; min-height: 14rem; padding: .8rem .95rem; border-radius: 6px; background: #e8edf5; border: 1px solid #b9c2d0; color: #1f2937; }
.dm-visor__titulo { padding-bottom: .4rem; border-bottom: 1.5px solid #1f2937; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dm-visor__corpo { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: .7rem 0; }
.dm-visor__pe { padding-top: .45rem; border-top: 1px solid #9aa4b2; font-size: .7rem; color: #374151; }
.dm-numero { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; }
.dm-caixa { display: grid; place-items: center; width: 1.7rem; height: 2rem; border: 1px solid #6b7280; background: #fff; font-size: 1.1rem; font-weight: 800; }
.dm-caixa.is-atual { border-bottom: 3px solid #111; }
.dm-instrucao { margin: auto; text-align: center; font-size: .95rem; color: #4b5563; }
.dm-instrucao small { display: block; margin-top: .2rem; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.dm-chapa { display: flex; align-items: flex-start; gap: .7rem; }
.dm-sigla { flex: none; display: grid; place-items: center; width: 2.6rem; height: 3.1rem; border-radius: 4px; background: var(--brand); color: #fff; font-weight: 800; }
.dm-chapa p { font-size: .84rem; }
.dm-chapa ul { margin: .25rem 0 0; padding-left: 1rem; font-size: .76rem; color: #374151; }
.dm-alerta { font-size: .95rem; font-weight: 800; color: #b42318; text-transform: uppercase; }
.dm-alerta small { display: block; margin-top: .2rem; font-size: .76rem; font-weight: 500; color: #374151; text-transform: none; }
.dm-grande { margin: auto; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
.dm-fim { margin: auto; font-size: 3.2rem; font-weight: 800; letter-spacing: .08em; }
.dm-teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; align-content: start; padding: .6rem; border-radius: 8px; background: #1f2329; }
.dm-tecla {
  min-width: 0; height: 2.35rem; padding: 0; border: 0; border-radius: 5px; background: linear-gradient(#4a5059, #3a3f47); color: #fff; box-shadow: 0 2px 0 #111;
  font: 700 .95rem var(--font); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .15s;
}
.dm-tecla:hover { filter: brightness(1.15); }
.dm-tecla:active, .dm-tecla.is-pressed { transform: translateY(2px); box-shadow: none; }
.dm-tecla--zero { grid-column: 2; }
.dm-tecla--branco, .dm-tecla--corrige, .dm-tecla--confirma, .dm-tecla--nulo { font-size: .55rem; letter-spacing: .02em; text-transform: uppercase; }
.dm-tecla--branco { grid-column: 1; background: #f7f7f5; color: #111; }
.dm-tecla--corrige { background: #d9581a; }
.dm-tecla--confirma { background: #1f8a4c; }
.dm-tecla--nulo { grid-column: 1 / -1; height: 2rem; background: #6b7280; }
.dm-urna.is-pronto .dm-tecla--confirma { animation: dm-chama 1.3s ease-in-out infinite; }
@keyframes dm-chama { 50% { box-shadow: 0 0 0 4px oklch(72% 0.17 155 / .5); } }
.dm-aviso { min-height: 1.2rem; margin-top: .5rem; font-size: .78rem; font-weight: 600; color: oklch(48% 0.12 55); }
.dm-cabine-pe { display: flex; justify-content: space-between; gap: 1rem; width: 100%; margin-top: .3rem; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-muted); }

.dm-comprovante { width: 100%; max-width: 26rem; margin-top: 1rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-raised); }
.dm-ok { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: var(--radius-pill); background: oklch(94% 0.05 155); color: oklch(40% 0.11 155); font-size: .82rem; font-weight: 700; }
.dm-ok svg { width: 1rem; height: 1rem; }
.dm-comprovante dl { display: grid; gap: .55rem; margin: .9rem 0 .4rem; }
.dm-comprovante dt { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.dm-comprovante dd { margin: 0; font-size: .88rem; font-weight: 600; }
.dm-comprovante dd.dm-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; color: var(--brand); }
.dm-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

@container demo (max-width: 520px) {
  .dm-pad { padding: 1.2rem 1.1rem; }
  .dm-app { padding-inline: 1.1rem; }
  .dm-split { grid-template-columns: 1fr; }
  .dm-painel { padding: .9rem 1.1rem; }
  .dm-painel__lema { display: none; }
  .dm-bio { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dm-qr { width: 10rem; }
}
@container demo (max-width: 480px) {
  .dm-urna { grid-template-columns: 1fr; padding: .7rem; }
  .dm-visor { min-height: 11.5rem; }
  .dm-tecla { height: 2.6rem; }
  .dm-tecla--branco, .dm-tecla--corrige, .dm-tecla--confirma, .dm-tecla--nulo { font-size: .66rem; }
  .dm-cabine-pe span { display: none; }
}
.manual-link {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; text-decoration: none;
  box-shadow: var(--shadow-brand); transition: transform .3s var(--ease), box-shadow .3s;
}
.manual-link:hover { transform: translateY(-3px); box-shadow: 0 18px 36px oklch(33% 0.12 23 / .35); }
.manual-link .icon-badge { flex: none; background: oklch(100% 0 0 / .14); box-shadow: none; }
.manual-link__text { flex: 1; display: grid; gap: .15rem; }
.manual-link__text strong { font-size: 1.05rem; }
.manual-link__text span { font-size: .9rem; color: oklch(100% 0 0 / .8); }
.manual-link__arrow { flex: none; width: 1.4rem; height: 1.4rem; transition: transform .25s var(--ease); }
.manual-link:hover .manual-link__arrow { transform: translateX(4px); }

/* Manuais */
.section--manuais {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(80% 60% at 85% 0%, oklch(42% 0.1 22 / .55) 0%, transparent 65%),
    linear-gradient(170deg, oklch(37% 0.105 23) 0%, oklch(33% 0.095 23) 100%);
}
.section--manuais > .container { position: relative; }
.section--manuais .section__head p:not(.eyebrow) { color: oklch(100% 0 0 / .74); }
.manuais-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.manuais-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(100% 0 0 / .05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000 0%, transparent 70%);
  animation: manuais-grid 30s linear infinite;
}
.manuais-bg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(80% 0.12 80 / .75), transparent);
}
.manuais-bg__glow { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.manuais-bg__glow--a {
  width: 34rem; height: 34rem; top: -12rem; right: -6rem; opacity: .22;
  background: radial-gradient(circle, oklch(60% 0.12 25), transparent 70%);
  animation: crono-drift-b 24s ease-in-out infinite alternate;
}
.manuais-bg__glow--b {
  width: 30rem; height: 30rem; bottom: -14rem; left: -8rem; opacity: .16;
  background: radial-gradient(circle, oklch(80% 0.12 80), transparent 70%);
  animation: crono-drift-a 28s ease-in-out infinite alternate;
}
.manuais-bg__ring {
  position: absolute; top: -9rem; right: -9rem; width: 34rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / .08); animation: manuais-orbit 40s linear infinite;
}
.manuais-bg__ring::before {
  content: ""; position: absolute; inset: 4.5rem; border-radius: 50%; border: 1px dashed oklch(100% 0 0 / .07);
}
.manuais-bg__ring::after {
  content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 18px 4px oklch(80% 0.12 80 / .6);
}
@keyframes manuais-grid { to { background-position: 64px 64px, 64px 64px; } }
@keyframes manuais-orbit { to { transform: rotate(360deg); } }

.manuais { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.5rem; align-items: stretch; }
.mcard {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--radius-xl);
  background: linear-gradient(160deg, oklch(100% 0 0 / .11), oklch(100% 0 0 / .03));
  border: 1px solid oklch(100% 0 0 / .14);
  box-shadow: 0 24px 50px oklch(15% 0.05 22 / .22), inset 0 1px 0 oklch(100% 0 0 / .12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .45s var(--ease), border-color .35s, box-shadow .45s;
}
.mcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), oklch(80% 0.12 80 / .16), transparent 60%);
}
.mcard::after {
  content: ""; position: absolute; left: 2rem; right: 2rem; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}
.mcard.is-visible { transition: opacity .7s var(--ease) var(--d, 0ms), transform .45s var(--ease), border-color .35s, box-shadow .45s; }
.mcard.is-visible:hover { transform: translateY(-5px); border-color: oklch(100% 0 0 / .26); box-shadow: 0 32px 64px oklch(15% 0.05 22 / .3), inset 0 1px 0 oklch(100% 0 0 / .18); }
.mcard:hover::before { opacity: 1; }
.mcard h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); font-weight: 800; margin-top: .7rem; }
.mcard p { margin-top: .6rem; color: oklch(100% 0 0 / .74); font-size: .98rem; }
.mcard__tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.mcard__tag::before { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor; }
.mcard__meta { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: oklch(100% 0 0 / .6); }
.mcard__meta svg { width: 1rem; height: 1rem; color: var(--gold); }
.mcard__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.5rem; }

.mcard__top { display: grid; grid-template-columns: 12rem 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
.mcard__body { display: flex; flex-direction: column; min-height: 100%; }
.mcard__cover {
  position: relative; display: block; aspect-ratio: 210 / 297; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 8px 10px 0 -3px oklch(100% 0 0 / .14), 16px 20px 0 -6px oklch(100% 0 0 / .07), 0 22px 44px oklch(15% 0.05 22 / .35);
  transform: perspective(900px) rotateY(12deg) rotateZ(-2deg); transform-origin: left center;
  transition: transform .6s var(--ease), box-shadow .6s;
}
.mcard__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, oklch(100% 0 0 / .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.mcard:hover .mcard__cover { transform: perspective(900px) rotateY(0) rotateZ(0) translateY(-4px); }
.mcard:hover .mcard__cover::after { transform: translateX(120%); }
.mcard__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mcard__ribbon {
  position: absolute; left: .55rem; bottom: .55rem; z-index: 1; padding: .28rem .6rem; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--brand-deep); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 14px oklch(15% 0.05 22 / .25);
}

.mcard__chapters { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid oklch(100% 0 0 / .12); }
.mcard__chapters-title { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: oklch(100% 0 0 / .6); }
.mcard__chapters ol { list-style: none; margin: .85rem 0 0; padding: 0; counter-reset: cap; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.mcard__chapters a {
  counter-increment: cap; display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: var(--radius-md);
  background: oklch(100% 0 0 / .05); border: 1px solid oklch(100% 0 0 / .08);
  color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.mcard__chapters a::before {
  content: counter(cap, decimal-leading-zero); flex: none; font-size: .74rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums;
}
.mcard__chapters a svg { width: 1rem; height: 1rem; margin-left: auto; flex: none; color: oklch(100% 0 0 / .4); transition: transform .25s, color .25s; }
.mcard__chapters a:hover { background: oklch(100% 0 0 / .12); border-color: oklch(80% 0.12 80 / .4); transform: translateX(2px); }
.mcard__chapters a:hover svg { color: var(--gold); transform: translateX(3px); }

.mcard--cro { align-items: flex-start; }
.mcard__lock-tag {
  position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--radius-pill); background: oklch(100% 0 0 / .1); border: 1px solid oklch(100% 0 0 / .16);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: oklch(100% 0 0 / .85);
}
.mcard__lock-tag svg { width: .85rem; height: .85rem; }
.mcard__stack {
  position: relative; align-self: center; width: min(11rem, 60%); aspect-ratio: 1 / 1.414; margin: 2.75rem 0 2rem;
}
.mcard__stack::before, .mcard__stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; background: oklch(100% 0 0 / .14); border: 1px solid oklch(100% 0 0 / .18);
  transition: transform .6s var(--ease);
}
.mcard__stack::before { transform: rotate(-9deg) translateX(-10%); }
.mcard__stack::after { transform: rotate(6deg) translateX(9%); background: oklch(100% 0 0 / .08); }
.mcard__stack img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; background: #fff;
  box-shadow: 0 22px 44px oklch(15% 0.05 22 / .35); transition: transform .6s var(--ease);
}
.mcard--cro:hover .mcard__stack::before { transform: rotate(-14deg) translateX(-18%); }
.mcard--cro:hover .mcard__stack::after { transform: rotate(11deg) translateX(17%); }
.mcard--cro:hover .mcard__stack img { transform: translateY(-6px); }
.mcard__lock {
  position: absolute; z-index: 2; left: 50%; bottom: -1.1rem; translate: -50% 0; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--gold); color: var(--brand-deep);
  box-shadow: 0 0 0 5px oklch(35% 0.1 23), 0 10px 22px oklch(15% 0.05 22 / .35);
}
.mcard__lock svg { width: 1.2rem; height: 1.2rem; }
.mcard__stack { cursor: pointer; }
.mcard__key { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: auto; padding-top: 1.5rem; }
.mcard__key-label { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: oklch(100% 0 0 / .7); }
.mcard__key-field {
  position: relative; display: flex; align-items: center; height: 3.1rem; border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / .08); border: 1px solid oklch(100% 0 0 / .22);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.mcard__key-field > svg { position: absolute; left: 1rem; width: 1.1rem; height: 1.1rem; color: var(--gold); pointer-events: none; }
.mcard__key-field input {
  flex: 1; min-width: 0; height: 100%; padding: 0 .5rem 0 2.75rem; border: 0; background: transparent; outline: none;
  font: 600 .98rem var(--font); letter-spacing: .04em; color: #fff;
}
.mcard__key-field input::placeholder { color: oklch(100% 0 0 / .5); font-weight: 500; letter-spacing: 0; }
.mcard__key-field:focus-within { background: oklch(100% 0 0 / .12); border-color: var(--gold); box-shadow: 0 0 0 4px oklch(80% 0.12 80 / .2); }
.mcard__key-ver {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-right: .25rem; border: 0; border-radius: 50%;
  background: transparent; color: oklch(100% 0 0 / .65); cursor: pointer; transition: background .2s, color .2s;
}
.mcard__key-ver:hover, .mcard__key-ver[aria-pressed="true"] { background: oklch(100% 0 0 / .1); color: #fff; }
.mcard__key-ver svg { width: 1.15rem; height: 1.15rem; }
.mcard__key .btn { justify-content: center; }
.mcard__key-msg { min-height: 1.3rem; margin: 0 !important; font-size: .86rem !important; font-weight: 600; color: oklch(100% 0 0 / .8) !important; }
.mcard__key-msg:empty { min-height: 0; }
.mcard__key.is-erro .mcard__key-field { border-color: oklch(75% 0.15 30); box-shadow: 0 0 0 4px oklch(70% 0.17 28 / .22); animation: cro-shake .45s var(--ease); }
.mcard__key.is-erro .mcard__key-msg { color: oklch(86% 0.09 40) !important; }
@keyframes cro-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.btn--outline { --bg: transparent; --fg: var(--brand); --bd: var(--brand-line); }
.btn--outline:hover { --bg: var(--brand-soft); --bd: var(--brand); }
.pill { padding: .35rem .8rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-subtle); font-size: .8rem; font-weight: 600; }


/* Cronograma */
.section--crono { position: relative; isolation: isolate; overflow: hidden; background: oklch(97.6% 0.012 25); }
.section--crono > .container { position: relative; }
.crono-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.crono-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(oklch(42% 0.145 23.6 / .14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 30%, #000 10%, transparent 75%);
  animation: crono-dots 40s linear infinite;
}
.crono-bg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(42% 0.145 23.6 / .35), oklch(80% 0.12 80 / .8), oklch(42% 0.145 23.6 / .35), transparent);
}
.crono-bg__glow { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.crono-bg__glow--a {
  width: 36rem; height: 36rem; top: -14rem; left: -10rem; opacity: .5;
  background: radial-gradient(circle, oklch(86% 0.07 18), transparent 70%);
  animation: crono-drift-a 22s ease-in-out infinite alternate;
}
.crono-bg__glow--b {
  width: 28rem; height: 28rem; top: 8rem; right: -8rem; opacity: .45;
  background: radial-gradient(circle, oklch(90% 0.08 80), transparent 70%);
  animation: crono-drift-b 26s ease-in-out infinite alternate;
}
.crono-bg__glow--c {
  width: 42rem; height: 42rem; bottom: -22rem; left: 30%; opacity: .45;
  background: radial-gradient(circle, oklch(84% 0.08 15), transparent 70%);
  animation: crono-drift-c 30s ease-in-out infinite alternate;
}
.crono-bg__mark {
  position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: -1.5rem;
  font: 900 clamp(8rem, 4rem + 16vw, 19rem)/.8 var(--font); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px oklch(42% 0.145 23.6 / .09);
  background: linear-gradient(180deg, oklch(42% 0.145 23.6 / .06), transparent 80%); -webkit-background-clip: text; background-clip: text;
}
@keyframes crono-dots { to { background-position: 26px 52px; } }
@keyframes crono-drift-a { to { transform: translate(14rem, 8rem) scale(1.15); } }
@keyframes crono-drift-b { to { transform: translate(-12rem, 10rem) scale(.9); } }
@keyframes crono-drift-c { to { transform: translate(-16rem, -6rem) scale(1.1); } }

.crono-summary { display: flex; gap: .75rem; }
.crono-summary div {
  display: grid; min-width: 8.5rem; padding: .9rem 1.1rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised);
}
.crono-summary strong { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--brand); letter-spacing: -.03em; }
.crono-summary span { font-size: .82rem; color: var(--ink-muted); }
.section--crono .crono-summary div {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, oklch(100% 0 0 / .85), oklch(100% 0 0 / .6));
  border-color: oklch(100% 0 0 / .9); box-shadow: 0 14px 34px oklch(33% 0.12 23 / .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.section--crono .crono-summary div::before {
  content: ""; position: absolute; left: 1.1rem; right: 1.1rem; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}
.section--crono .crono-summary strong { font-size: 2.2rem; }

.crono-timeline {
  list-style: none; margin: 0; padding: .6rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: 1.6rem 1rem;
}
.crono-day { display: grid; gap: .75rem; align-content: start; }
.crono-day--passada { opacity: .5; }

.cal {
  position: relative; display: grid; justify-items: center; padding-bottom: .65rem; overflow: visible;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 0 4px 0 -1px var(--surface), 0 5px 0 -1px var(--line), var(--shadow-raised);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.cal::before, .cal::after {
  content: ""; position: absolute; top: -.45rem; width: .45rem; height: 1rem; border-radius: 99px;
  background: linear-gradient(var(--ink-muted), var(--ink)); box-shadow: 0 0 0 2px var(--surface);
}
.cal::before { left: 28%; }
.cal::after { right: 28%; }
.crono-day:hover .cal { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--shadow-overlay); }
.cal__month {
  justify-self: stretch; padding: .5rem .5rem .4rem; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff; text-align: center;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.cal__day { font-size: 2.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; color: var(--ink); margin-top: .3rem; }
.cal__week { padding-inline: .3rem; font-size: .74rem; font-weight: 600; text-align: center; color: var(--ink-subtle); text-transform: capitalize; }
.crono-day--hoje .cal { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-overlay); }
.crono-day--pendente .cal { background: var(--surface-sunken); border-style: dashed; box-shadow: none; }
.crono-day--pendente .cal__month { background: var(--ink-subtle); letter-spacing: .08em; }
.crono-day--pendente .cal__day { color: var(--ink-subtle); }
.crono-day--pendente .cal__week { text-transform: none; }
.crono-day__ufs { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.crono-horarios {
  display: grid; gap: .3rem; padding: .5rem; border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px oklch(33% 0.12 23 / .08);
}
.crono-horarios__titulo {
  display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .1rem 0 .25rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle);
}
.crono-horarios__titulo svg { width: .85rem; height: .85rem; color: var(--brand); stroke-width: 2.2; }
.crono-uf {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; padding: .35rem .5rem .35rem .35rem;
  border: 0; border-radius: 8px; background: var(--brand-soft); font: inherit; cursor: pointer;
  transition: background .2s, transform .2s var(--ease);
}
.crono-uf b {
  display: grid; place-items: center; min-width: 2.1rem; height: 1.65rem; border-radius: 6px;
  background: #fff; border: 1px solid var(--brand-line); color: var(--brand-strong);
  font-size: .76rem; font-weight: 800; letter-spacing: .04em;
}
.crono-uf span { font-size: 1.08rem; font-weight: 800; color: var(--brand-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.crono-uf:hover { background: var(--brand); transform: translateX(2px); }
.crono-uf:hover span { color: #fff; }
.crono-uf:hover b { border-color: transparent; }
.uf-chip {
  padding: .3rem .55rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); border: 1px solid var(--brand-line); color: var(--brand-strong);
  font: 700 .78rem/1 var(--font); letter-spacing: .04em; transition: background .2s, color .2s, transform .2s var(--ease);
}
.uf-chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }

.section--crono .cal {
  box-shadow: 0 1px 0 var(--line), 0 4px 0 -1px var(--surface), 0 5px 0 -1px var(--line), 0 16px 30px oklch(33% 0.12 23 / .1);
}
.section--crono .crono-day:hover .cal {
  transform: translateY(-6px) rotate(-2deg); border-color: var(--brand-line);
  box-shadow: 0 0 0 4px oklch(80% 0.12 80 / .35), 0 24px 44px oklch(33% 0.12 23 / .2);
}
.section--crono .crono-day--hoje .cal { border-color: var(--brand); box-shadow: 0 0 0 4px oklch(80% 0.12 80 / .55), 0 0 36px oklch(80% 0.12 80 / .45), 0 18px 34px oklch(33% 0.12 23 / .18); }
.section--crono .uf-chip { background: oklch(100% 0 0 / .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.section--crono .uf-chip:hover { box-shadow: 0 6px 16px oklch(33% 0.12 23 / .3); }
.section--crono .crono-timeline.is-visible .crono-day { animation: crono-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
@keyframes crono-in { from { opacity: 0; transform: translateY(26px) scale(.94); } }

.section--crono .crono-rules { box-shadow: 0 16px 36px oklch(33% 0.12 23 / .08); }
.section--crono .crono-rules div { background: oklch(100% 0 0 / .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.section--crono .crono-map { box-shadow: 0 30px 60px oklch(33% 0.12 23 / .12); }

.crono-rules {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.75rem; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--line); border: 1px solid var(--line);
}
.crono-rules div { display: grid; gap: .25rem; padding: 1.1rem 1.25rem; background: var(--surface); }
.crono-rules strong { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.crono-rules span { font-size: .92rem; color: var(--ink-muted); }

.crono-map {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin-top: 2.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised);
}
.crono-map__kicker {
  display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .85rem .3rem .3rem; border-radius: var(--radius-pill);
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-strong);
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.crono-map__kicker > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand); color: #fff; }
.crono-map__kicker svg { width: 1.05rem; height: 1.05rem; }
.crono-map__vote {
  display: flex; align-items: center; gap: .18em; margin-top: .8rem;
  font-size: clamp(4.2rem, 2.6rem + 5vw, 7.5rem); font-weight: 900; line-height: .9; letter-spacing: -.05em; text-transform: uppercase;
  color: var(--brand); background: linear-gradient(135deg, var(--brand) 20%, var(--brand-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.crono-map__seta {
  display: grid; place-items: center; flex: none; width: .62em; height: .62em; border-radius: 50%;
  background: var(--gold); color: var(--brand-deep); -webkit-text-fill-color: initial;
  box-shadow: 0 0 0 .08em oklch(80% 0.12 80 / .3), 0 12px 26px oklch(60% 0.12 70 / .35);
  animation: vote-seta 1.6s var(--ease) infinite;
}
.crono-map__seta svg { width: .36em; height: .36em; stroke-width: 2.6; }
@keyframes vote-seta { 50% { translate: .1em 0; } }
.crono-map__titulo { margin-top: 1rem; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.crono-map__copy > .crono-map__titulo + p { margin-top: .35rem; }
.crono-map__cta { flex: 1 1 auto; justify-content: center; box-shadow: var(--shadow-brand); }
.crono-map__copy > p:not(.eyebrow, .crono-map__kicker, .crono-map__titulo) { margin-top: .75rem; color: var(--ink-muted); }
.crono-map__form { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.crono-map__form select {
  flex: 1 1 14rem; height: 3rem; padding: 0 2.5rem 0 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a1418' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.1rem;
  font: 500 .95rem var(--font); color: var(--ink); appearance: none; cursor: pointer;
}
.crono-map__form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.crono-map__info {
  display: flex; align-items: center; gap: .9rem; min-height: 5.5rem; margin-top: 1.25rem; padding: 1rem 1.1rem;
  border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px dashed var(--line-strong);
}
.crono-map__info.is-highlight { animation: highlight 1.6s var(--ease); }
.crono-map__hint { font-size: .9rem; color: var(--ink-subtle); }
.crono-map__detail { display: grid; line-height: 1.4; }
.crono-map__detail strong { font-size: 1.05rem; }
.crono-map__detail span { font-size: .88rem; color: var(--ink-muted); }
.crono-map__detail span.crono-map__prazo {
  display: inline-flex; align-items: center; gap: .35rem; justify-self: start; margin-top: .4rem; padding: .25rem .6rem;
  border-radius: var(--radius-pill); background: var(--brand); color: #fff; font-size: .8rem; font-weight: 700;
}
.crono-map__prazo svg { width: .95rem; height: .95rem; }
.crono-map__map { min-height: 22rem; display: grid; place-items: center; }
.crono-map__map brazil-component { display: block; width: 100%; max-width: 40rem; }

.cro-card__uf {
  flex: 0 0 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff; font-weight: 800; letter-spacing: .03em;
}
.crono-note { margin-top: 1.5rem; font-size: .85rem; color: var(--ink-subtle); }
.when-card__link { display: inline-block; margin-top: .6rem; color: var(--brand); font-weight: 700; font-size: .88rem; text-underline-offset: 3px; }

/* FAQ */
.faq__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.faq__head > div { max-width: 40rem; }
.faq__head h2 { margin-top: .6rem; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 800; }
.faq__head p:not(.eyebrow) { margin-top: .7rem; font-size: 1rem; color: var(--ink-muted); }
.faq__head p a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
.search {
  flex: 0 1 22rem; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; height: 2.9rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-subtle);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--ink); }

.faq__filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.faq__chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .5rem .45rem .9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 .85rem var(--font); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.faq__chip span { min-width: 1.5rem; padding: .1rem .4rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: .72rem; text-align: center; }
.faq__chip:hover { border-color: var(--brand); color: var(--brand); }
.faq__chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.faq__chip.is-active span { background: oklch(100% 0 0 / .2); color: #fff; }

.faq__corpo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
.faq__lista { margin: 0; padding: .4rem; list-style: none; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.faq__item + .faq__item { border-top: 1px solid var(--line); }
.faq__item.is-active, .faq__item.is-active + .faq__item { border-top-color: transparent; }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: .8rem; padding: .78rem .85rem; border: 0; border-radius: var(--radius-md);
  background: none; font: 600 .93rem/1.35 var(--font); color: var(--ink); text-align: left; cursor: pointer; transition: background .2s, color .2s;
}
.faq-q:hover { background: var(--surface-sunken); }
.faq-q__num { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.faq-q__txt { flex: 1; }
.faq-q > svg { flex: none; width: 1rem; height: 1rem; color: var(--ink-subtle); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); }
.faq-q:hover > svg { opacity: 1; transform: none; }
.faq__item.is-active .faq-q { background: var(--brand); color: #fff; }
.faq__item.is-active .faq-q__num { color: oklch(100% 0 0 / .7); }
.faq__item.is-active .faq-q > svg { opacity: 1; transform: none; color: #fff; }

.faq__resposta {
  position: sticky; top: calc(var(--header-h) + 1.25rem); padding: 1.6rem 1.75rem 1.25rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); animation: dm-entra .3s var(--ease);
  display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 2.5rem);
}
.faq__resposta[hidden] { display: none; }
.faq__resposta:focus { outline: none; }
.faq__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--ink-subtle); }
.faq__meta span { padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.faq__resposta h3 { margin-top: .7rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.faq__texto { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: .9rem; padding-right: .35rem; color: var(--ink-muted); font-size: .95rem; line-height: 1.6; }
.faq__texto > * + * { margin-top: .8rem; }
.faq__nav { flex: none; display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.faq__passo { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .2rem; border: 0; background: none; font: 600 .85rem var(--font); color: var(--brand); cursor: pointer; }
.faq__passo svg { width: 1rem; height: 1rem; }
.faq__passo:first-child svg { transform: rotate(180deg); }
.faq__passo:disabled { color: var(--ink-subtle); opacity: .5; cursor: default; }
.faq__empty { padding: 2rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px dashed var(--line-strong); color: var(--ink-muted); font-size: .93rem; text-align: center; }
.faq__edition { margin-top: 1.25rem; font-size: .78rem; color: var(--ink-subtle); }
.faq__texto strong { color: var(--ink); font-weight: 600; }
.faq__texto a { color: var(--brand); font-weight: 500; text-underline-offset: 3px; word-break: break-word; }
.faq__texto ul, .faq__texto ol { padding-left: 1.25rem; display: grid; gap: .45rem; margin-bottom: 0; }
.faq__texto li::marker { color: var(--brand); font-weight: 700; }
.faq__texto table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; font-size: .92rem; }
.faq__texto th { background: var(--brand-soft); color: var(--brand-strong); text-align: left; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.faq__texto th, .faq__texto td { padding: .75rem 1rem; vertical-align: top; }
.faq__texto td { border-top: 1px solid var(--line); }
.faq__texto td:first-child { font-weight: 600; color: var(--ink); width: 42%; }
.faq__texto kbd { display: inline-block; padding: .05rem .4rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 600 .8rem var(--font); color: var(--ink); }
.answer-alert { padding: .85rem 1rem; border-radius: var(--radius-md); background: oklch(96% 0.05 85); border: 1px solid oklch(85% 0.1 80); color: oklch(35% 0.08 60); }
.answer-alert strong { color: inherit; }
.answer-highlight { padding: .9rem 1rem; border-radius: var(--radius-md); background: var(--brand-soft); border: 1px solid var(--brand-line); border-left: 4px solid var(--brand); color: var(--brand-strong); }
.faq__texto .answer-highlight strong { color: var(--brand-strong); }
.key { display: inline-block; padding: .1rem .6rem; border-radius: 5px; font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; box-shadow: inset 0 -2px 0 oklch(0% 0 0 / .15); }
.key--green { background: oklch(62% 0.15 150); color: #fff; }
.key--orange { background: oklch(72% 0.16 60); color: oklch(25% 0.05 50); }
.key--white { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }

/* CTA */
.cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
  padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius-xl); color: #fff;
  background:
    radial-gradient(30rem 20rem at 100% 0, oklch(55% 0.16 25 / .5), transparent 60%),
    linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: var(--shadow-brand);
}
.cta__copy { position: relative; z-index: 1; min-width: 0; }
.cta-link small { overflow-wrap: anywhere; }
.cta__copy > p:not(.eyebrow) { margin-top: 1rem; color: oklch(100% 0 0 / .8); font-size: 1.05rem; max-width: 32rem; }
.cta__links { display: grid; gap: .75rem; margin-top: 2rem; }
.cta__photo { position: relative; margin: 0; align-self: stretch; min-height: 22rem; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px oklch(15% 0.06 22 / .45); }
.cta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-link {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-lg); text-decoration: none;
  background: oklch(100% 0 0 / .08); border: 1px solid oklch(100% 0 0 / .14); transition: background .25s, transform .3s var(--ease);
}
.cta-link:hover { background: oklch(100% 0 0 / .16); transform: translateX(4px); }
.cta-link > span:nth-child(2) { flex: 1; display: grid; }
.cta-link small { color: oklch(100% 0 0 / .7); font-size: .85rem; }

/* Footer */
.footer { background: oklch(18% 0.03 20); color: oklch(100% 0 0 / .75); padding-top: 4rem; font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.footer__brand img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer__brand p { margin-top: 1.25rem; max-width: 26rem; }
.footer h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer nav { display: grid; gap: .5rem; align-content: start; }
.footer nav a { text-decoration: none; }
.footer nav a:hover, .footer__bottom a:hover { color: #fff; }
.footer .btn { margin-top: 1.25rem; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid oklch(100% 0 0 / .1); font-size: .85rem; }
.footer__bottom a { text-decoration: none; }


/* Animação de entrada */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */
.brand__tag { white-space: nowrap; }
@media (max-width: 1320px) {
  .brand__tag { display: none; }
  .nav a:not(.btn) { padding-inline: .6rem; }
}
@media (max-width: 1100px) {
  .nav a:not(.btn) { padding-inline: .45rem; font-size: .74rem; letter-spacing: .04em; }
}
@media (max-width: 1180px), (max-height: 760px) {
  .demo { position: relative; top: auto; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .brand img { height: 40px; }
  .nav-toggle {
    display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md);
    background: var(--brand-soft); cursor: pointer;
  }
  .nav-toggle span { width: 20px; height: 2px; background: var(--brand); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem 1.25rem 1.5rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-overlay);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .3s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a:not(.btn) { padding: .9rem .25rem; font-size: .9rem; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin: 1rem 0 0; }

  .hero__grid, .cta { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .president__grid, .howto { grid-template-columns: 1fr; }
  .deadline { grid-template-columns: auto 1fr; }
  .deadline .btn { grid-column: 1 / -1; justify-self: start; }
  .president__media { max-width: 44rem; width: 100%; margin-inline: auto; }
  .manuais { grid-template-columns: 1fr; }
  .mcard--cro { display: grid; grid-template-columns: 11rem 1fr; column-gap: 2rem; align-items: center; }
  .mcard--cro > :not(.mcard__stack):not(.mcard__lock-tag) { grid-column: 2; }
  .mcard--cro .mcard__stack { grid-column: 1; grid-row: 1 / span 5; width: 100%; margin: 1rem 0; }
  .mcard--cro .mcard__tag { margin-top: 2rem; }
  .howto { gap: 1.25rem; }
  .howto__body { display: contents; }
  .howto .section__head { order: 1; margin-bottom: .5rem; }
  .howto .steps { order: 2; }
  .howto .demo { order: 3; position: static; }
  .howto .manual-link { order: 4; margin-top: 0; }
  .demo { scroll-margin-top: calc(var(--header-h) + 1rem); }
  .demo__tela { min-height: 0; }
  .step__btn:not(.is-active) :is(.step__texto, .step__formas, .step__destaque), .step__ver { display: none; }
  .step__btn:hover { transform: none; }
  .hero__visual { max-width: 34rem; margin-inline: auto; width: 100%; }
  .cta__photo { min-height: 16rem; order: -1; }
  .crono-timeline { grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 1.4rem .75rem; }
  .crono-rules { grid-template-columns: 1fr; }
  .crono-map { grid-template-columns: 1fr; }
  .crono-map__map { min-height: 0; order: -1; }
  .crono-map__seta { rotate: -90deg; animation-name: vote-seta-cima; }
  @keyframes vote-seta-cima { 50% { translate: 0 -.1em; } }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .faq__corpo { grid-template-columns: 1fr; }
  .faq__resposta { position: static; max-height: none; margin: .35rem 0 .6rem; padding: 1.1rem 1.1rem .9rem; box-shadow: none; background: var(--surface-sunken); border-color: transparent; }
  .faq__resposta h3 { display: none; }
  .faq__meta { font-size: .72rem; }
  .faq__texto { overflow: visible; margin-top: .6rem; padding-right: 0; }
  .faq__filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .faq__filtros::-webkit-scrollbar { display: none; }
  .faq__chip { flex: none; }
  .faq-q > svg { opacity: 1; transform: rotate(90deg); }
  .faq__item.is-active .faq-q > svg { transform: rotate(-90deg); }
  .search { flex-basis: 100%; }
}

@media (max-width: 600px) {
  .topbar__info a, .topbar__site { display: none !important; }
  .topbar__inner { justify-content: center; }
  .cards-3, .steps { grid-template-columns: 1fr; }
  .president__quote { padding-left: 1.1rem; }
  .mcard { padding: 1.4rem; }
  .mcard__top { grid-template-columns: 1fr; gap: 1.5rem; }
  .mcard__cover { width: 8.5rem; }
  .mcard__chapters ol { grid-template-columns: 1fr; }
  .mcard__actions .btn { flex: 1; justify-content: center; }
  .mcard--cro { display: flex; align-items: flex-start; }
  .mcard--cro .mcard__stack { width: min(9.5rem, 55%); margin: 2.5rem 0 1.75rem; }
  .mcard--cro .mcard__tag { margin-top: 0; }
  .manuais-bg__ring { width: 22rem; top: -6rem; right: -8rem; }
  .president__media { padding: .4rem; border-radius: 22px; }
  .president__player { border-radius: 18px; }
  .president__play { padding: .75rem; }
  .president__play-btn { width: 2.9rem; height: 2.9rem; }
  .president__play-tag { font-size: .76rem; padding-block: .45rem; }
  .president__caption { padding: .85rem .7rem .45rem; gap: .75rem; }
  .president__seal { width: 2.4rem; height: 2.4rem; }
  .president__who strong { font-size: 1rem; }
  .president__who span { font-size: .82rem; }
  .hero__actions .btn { width: 100%; }
  .deadline { grid-template-columns: 1fr; padding-top: 2rem; }
  .deadline__badge { justify-self: start; }
  .deadline .btn { width: 100%; justify-content: center; }
  .hero__visual { padding: 1rem 0 0; }
  .hero__shape { inset: 0 0 4rem 2rem; }
  .hero__badge { top: 1.75rem; right: .75rem; }
  .hero__urna { top: 13rem; left: auto; right: .75rem; width: 7.25rem; padding: .7rem; }
  .hero__urna .urna { width: 4.25rem; }
  .hero__urna small { display: none; }
  .crono-timeline { grid-template-columns: repeat(3, 1fr); gap: 1.25rem .6rem; }
  .cal__day { font-size: 2rem; }
  .cal__month { font-size: .68rem; letter-spacing: .1em; }
  .crono-day--pendente .cal__month { font-size: .6rem; letter-spacing: .02em; }
  .uf-chip { padding: .28rem .42rem; font-size: .72rem; }
  .crono-horarios { padding: .35rem; gap: .25rem; }
  .crono-horarios__titulo { font-size: .56rem; letter-spacing: .06em; }
  .crono-uf { padding: .3rem .4rem .3rem .3rem; gap: .25rem; }
  .crono-uf b { min-width: 1.75rem; height: 1.4rem; font-size: .66rem; }
  .crono-uf span { font-size: .9rem; }
  .ticker__group span { padding: .85rem 1.25rem; font-size: .78rem; }
  .ticker__group span::after { margin-left: 1.25rem; }
  .when-card { position: relative; width: auto; margin: -3rem 1rem 0; }
  .step__btn { padding: .85rem 1rem; column-gap: .9rem; }
  .cta { padding: 1.25rem 1.1rem 1.5rem; }
  .cta-link { padding: .9rem 1rem; gap: .8rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: center; }
  .faq__texto table, .faq__texto tbody, .faq__texto tr, .faq__texto td { display: block; width: 100%; }
  .faq__texto thead { display: none; }
  .faq__texto td:first-child { width: 100%; padding-bottom: .15rem; }
  .faq__texto td + td { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}