/* RA Peças — hero cinematográfico da homepage (extraído da landing original).
   Só o hero: o resto do layout vem do tema. */
:root { --pad: clamp(16px, 5vw, 48px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 4px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--red-400); }
.btn--primary:active { background: var(--red-600); }
.btn--ghost { background: transparent; color: var(--text-strong); border-color: var(--gray-500); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--gray-800); }
.btn--lg { min-height: 56px; padding: 0 34px; font-size: 17px; }
:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; }

/* ---------- Secção scrub (canvas fixo) ---------- */
.scrub { position: relative; height: 500vh; background: var(--gray-950); }
.scrub__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#car-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrub__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(5,5,5,.75) 100%);
}
.scrub__copy {
  position: absolute; z-index: 5; left: var(--pad); right: var(--pad);
  max-width: 680px; opacity: 0; margin: 0 auto;
}
.scrub__copy--1 { top: 22vh; left: clamp(16px, 8vw, 120px); right: auto; }
.eyebrow {
  margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red-300);
}
.scrub__copy h1 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 6.5vw, 72px); line-height: 1.02; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-strong); text-wrap: balance;
}
.lead { margin: 0 0 26px; font-size: clamp(15px, 2vw, 18px); color: var(--text-muted); max-width: 460px; }
.scrub__copy--2, .scrub__copy--3, .scrub__copy--4 { top: 50%; transform: translateY(-50%); text-align: center; left: var(--pad); right: var(--pad); }
.line {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 4.5vw, 52px); letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-strong); text-shadow: 0 2px 24px rgba(5,5,5,.8);
}
.scrub__hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 5;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.scrub__hint span { display: block; width: 1px; height: 34px; background: linear-gradient(var(--red-300), transparent); animation: hint 1.6s var(--ease-out) infinite; }
@keyframes hint { 0% { transform: scaleY(.2); opacity: 0 } 40% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(.2); opacity: 0 } }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scrub { height: auto; }
  .scrub__stage { position: relative; height: 100vh; }
  .scrub__copy { opacity: 1 !important; position: relative; inset: auto; padding: 24vh var(--pad) 0 clamp(16px, 8vw, 120px); }
  .scrub__copy--2, .scrub__copy--3, .scrub__copy--4, .scrub__hint { display: none; }
  * { animation: none !important; transition: none !important; }
}