/* Mário Gonçalves Representações
   Tema sobre o motor scrollcraft.css. Não reestilizar .sc-stage nem [data-sc-*]. */

:root {
  --sc-canvas:     #06090F;
  --sc-surface:    #0E1522;
  --sc-ink:        #EEF1F6;
  --sc-ink-soft:   #A3AEC2;
  --sc-accent:     #D9151E;   /* vermelho do logo */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --mg-navy: #2E3D52;         /* azul-ardósia do logo */
  --mg-bar-h: 4rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; }

.mg-caps { text-transform: uppercase; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Barra ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--mg-bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
  color: var(--sc-ink);
}
.bar__brand { display: flex; align-items: center; gap: var(--sc-3); color: inherit; text-decoration: none; margin-right: auto; }
.bar__brand img { width: 2.6rem; height: 2.6rem; border-radius: var(--sc-r-sm); background: #fff; object-fit: cover; }
.bar__name { font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--sc-t-sm); line-height: 1.1; }
.bar__name span { display: block; font-weight: 500; letter-spacing: 0.16em; font-size: 0.68em; color: var(--sc-ink-soft); }
.bar__nav { display: flex; gap: var(--sc-5); }
.bar__nav a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar__nav a:hover { color: var(--sc-ink); }
@media (max-width: 760px) {
  .bar__nav { display: none; }
  .bar__name span { display: none; }
  .bar { gap: var(--sc-3); }
}

/* ---------- Botão (um rótulo só na página) ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 var(--sc-6);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap;
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), scale 120ms var(--sc-ease-out);
}
.cta:hover { background: #EE2630; }
.cta:active { scale: 0.97; }
.cta:focus-visible, .link:focus-visible, .brands a:focus-visible, .td__group:focus-visible, .bar a:focus-visible, .foot a:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 3px;
}
.cta--sm { min-height: 2.5rem; padding: 0 var(--sc-4); font-size: var(--sc-t-xs); box-shadow: none; }

/* ---------- ATO 1 · desmontagem ---------- */
.td { background:
    radial-gradient(60% 46% at 58% 74%, color-mix(in oklab, var(--mg-navy) 46%, transparent), transparent 70%),
    var(--sc-canvas); }

/* Sem JavaScript: documento simples, sem palco. */
.td__groups, .td__labels, .td__scan, .td__chassi, .td__back, .cl__scan, .cl__parts, .cl__chassi { display: none; }
.td__hero { padding: calc(var(--mg-bar-h) + var(--sc-8)) var(--sc-gutter) var(--sc-6); max-width: 60rem; }
.td__hero .sc-lede { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 34rem; }
.td__car { padding-inline: var(--sc-gutter); }
.td__copy { list-style: none; margin: 0; padding: var(--sc-8) var(--sc-gutter); display: grid; gap: var(--sc-8); }
.td__copy li { max-width: 40rem; }
.td__copy p { margin-top: var(--sc-3); }
.td__copy img { margin-top: var(--sc-5); }
.td__final { padding: var(--sc-8) var(--sc-gutter); }
.td__final h2 { font-size: var(--sc-t-xl); max-width: 22ch; }
.td__detail { color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; }

/* Com JavaScript: tudo vira camada absoluta dentro do palco pinado. */
.mg-live .td__groups, .mg-live .td__labels, .mg-live .td__scan, .mg-live .td__chassi, .mg-live .td__back,
.mg-live .cl__scan, .mg-live .cl__parts, .mg-live .cl__chassi { display: block; }
.mg-live .td > *, .mg-live .cl > * { position: absolute; }

.mg-live .td__back { inset: 0; overflow: hidden; pointer-events: none; }
.mg-live .td__back span {
  position: absolute; right: -2vw; top: 9vh;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 34vw; line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--sc-ink) 13%, transparent);
  will-change: transform, opacity;
}

.mg-live .td__hero {
  left: var(--sc-gutter); top: calc(var(--mg-bar-h) + 7vh); padding: 0; z-index: 3;
  width: min(40rem, 44vw); will-change: opacity, transform;
}
.mg-live .td__hero h1 { animation: mg-rise 900ms var(--sc-ease-out) both; }
.mg-live .td__hero .sc-lede { animation: mg-rise 900ms 140ms var(--sc-ease-out) both; }
@keyframes mg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.mg-live .td__car, .mg-live .cl__car { left: 0; top: 0; padding: 0; z-index: 2; will-change: transform, opacity; transform-origin: 0 0; }
.td__car img, .cl__car img { display: block; width: 100%; height: auto; }
.mg-live .td__car img, .mg-live .cl__car img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* O chassi foi gerado um pouco deslocado do veículo: alinhado pelas rodas. */
.mg-live .td__chassi, .mg-live .cl__chassi { translate: 1.55% 2.6%; }
.mg-live .td__scan, .mg-live .cl__scan {
  position: absolute; top: 12%; bottom: 6%; width: 2px; left: 0; opacity: 0;
  background: var(--sc-accent);
  box-shadow: 0 0 18px 2px color-mix(in oklab, var(--sc-accent) 70%, transparent), 28px 0 60px 10px color-mix(in oklab, var(--sc-accent) 16%, transparent);
}

.mg-live .td__groups { inset: 0; z-index: 4; pointer-events: none; }
.td__group {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit;
  transform-origin: 50% 50%; will-change: transform, opacity; cursor: pointer; pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.td__group.is-pick { pointer-events: auto; }
.td__group img {
  position: absolute; max-width: none; pointer-events: none;
  transform: translate(calc(var(--dx) * (1 - var(--e, 1))), calc(var(--dy) * (1 - var(--e, 1)))) scale(calc(0.45 + 0.55 * var(--e, 1)));
  filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.55));
}

.mg-live .td__copy { inset: 0; padding: 0; display: block; z-index: 5; pointer-events: none; }
.mg-live .td__copy li {
  position: absolute; left: var(--sc-gutter); top: 50%; width: min(27rem, 30vw); max-width: none;
  translate: 0 -50%; opacity: 0; visibility: hidden; will-change: opacity, transform;
}
.mg-live .td__copy img { display: none; }

.mg-live .td__final {
  left: 50%; bottom: 4.5vh; translate: -50% 0; width: min(34rem, 36vw); padding: 0; z-index: 5;
  text-align: center; opacity: 0; visibility: hidden; will-change: opacity;
}
.mg-live .td__final h2 { font-size: var(--sc-t-lg); max-width: none; line-height: 1.08; }
.mg-live .td__detail { font-size: var(--sc-t-sm); margin-top: var(--sc-3); min-height: 2.6em; }
.td__detail strong { color: var(--sc-ink); font-weight: 600; }

.mg-live .td__labels { inset: 0; z-index: 5; pointer-events: none; }
.td__label {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
  font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.68rem; color: var(--sc-ink-soft); will-change: transform, opacity;
}
.td__label.is-on { color: var(--sc-ink); }

@media (max-aspect-ratio: 21/20) {
  .mg-live .td__back span { font-size: 46vw; top: 46vh; right: -6vw; }
  .mg-live .td__hero { width: auto; right: var(--sc-gutter); top: calc(var(--mg-bar-h) + 4vh); }
  .mg-live .td__hero h1 { font-size: var(--sc-t-2xl); }
  .mg-live .td__copy li { top: calc(var(--mg-bar-h) + 3.5vh); translate: none; width: auto; right: var(--sc-gutter); }
  .mg-live .td__copy h2 { font-size: var(--sc-t-xl); }
  .mg-live .td__final { bottom: auto; top: 33vh; width: auto; left: var(--sc-gutter); right: var(--sc-gutter); translate: none; }
  .mg-live .td__final h2 { font-size: var(--sc-t-base); }
  .mg-live .td__detail { font-size: var(--sc-t-xs); margin-top: var(--sc-2); }
  .td__label { font-size: 0.6rem; letter-spacing: 0.06em; }
}

/* ---------- Seções claras ---------- */
.paper {
  --sc-ink: #111A29; --sc-ink-soft: #4B586E;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  background: #F1F3F7; color: var(--sc-ink);
  position: relative; z-index: 2;
}
.paper--white { background: #FFFFFF; }
.paper .sc-display { color: var(--sc-ink); }
.paper .sc-body { color: var(--sc-ink-soft); }

.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-9); align-items: start; }
.about__text h2 { max-width: 16ch; }
.about__num { margin: 0; display: flex; align-items: baseline; gap: var(--sc-4); }
.about__num .sc-nums { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(5rem, 11vw, 9.5rem); line-height: 0.82; letter-spacing: -0.05em; color: var(--sc-accent); }
.about__unit { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 9ch; line-height: 1.25; }
.facts { margin: var(--sc-7) 0 0; }
.facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sc-4); padding-block: var(--sc-3); border-top: 1px solid var(--sc-hairline); }
.facts > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.facts dt { font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sc-ink-soft); padding-top: 0.2em; }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: var(--sc-7); }
  .facts > div { grid-template-columns: 6.5rem 1fr; }
}

.brands__head { margin-bottom: var(--sc-7); }
.brands { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.brands li { border-bottom: 1px solid var(--sc-hairline); }
.brands a {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: center; gap: var(--sc-6);
  min-height: 6.5rem; padding: var(--sc-4) var(--sc-3);
  color: var(--sc-ink); text-decoration: none;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.brands__logo { display: flex; align-items: center; height: 3.25rem; }
.brands__logo img { width: auto; height: auto; max-width: 11rem; max-height: 3.25rem; object-fit: contain; }
.brands__what { color: var(--sc-ink-soft); }
.brands__go { display: inline-flex; align-items: center; gap: var(--sc-2); font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--sc-t-xs); white-space: nowrap; }
.brands__go svg { width: 0.9rem; height: 0.9rem; transition: translate var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .brands a:hover { background: #F4F6F9; }
  .brands a:hover .brands__go { color: #B80F17; }
  .brands a:hover .brands__go svg { translate: 2px -2px; }
}
@media (max-width: 700px) {
  .brands a { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sc-2); padding-inline: 0; }
  .brands__logo { grid-column: 1 / -1; height: 2.6rem; }
  .brands__logo img { max-height: 2.6rem; max-width: 9rem; }
  .brands__what { font-size: var(--sc-t-sm); }
}

.events-sec { padding-block: calc(var(--sc-section) * 0.6); }
.events { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sc-8); align-items: center; }
.link { color: #B80F17; font-weight: 600; text-underline-offset: 0.2em; }
.events__frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-3); }
.events__frames li {
  aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center;
  border: 1px dashed color-mix(in oklab, var(--sc-ink) 30%, transparent); border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.4;
}
@media (max-width: 860px) { .events { grid-template-columns: 1fr; gap: var(--sc-6); } }

/* ---------- ATO 5 · remontagem e contato ---------- */
.cl { background:
    radial-gradient(60% 44% at 50% 58%, color-mix(in oklab, var(--mg-navy) 42%, transparent), transparent 70%),
    var(--sc-canvas); }
.cl__car { padding: calc(var(--mg-bar-h) + var(--sc-7)) var(--sc-gutter) 0; }
.cl__copy { padding: var(--sc-7) var(--sc-gutter); text-align: center; display: grid; justify-items: center; gap: var(--sc-4); }
.cl__copy .sc-body { margin: 0; }
.cl__note { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot { padding: var(--sc-5) var(--sc-gutter); text-align: center; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot p { margin: 0.2em 0; }
.foot a { color: var(--sc-ink); text-underline-offset: 0.2em; }

.mg-live .cl__parts { inset: 0; z-index: 3; pointer-events: none; }
.mg-live .cl__parts img { position: absolute; left: 0; top: 0; max-width: none; will-change: transform, opacity; filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.5)); }
.mg-live .cl__copy {
  left: 50%; translate: -50% 0; bottom: 13vh; width: min(52rem, 92vw); padding: 0; z-index: 5; gap: var(--sc-3);
  opacity: 0; visibility: hidden; will-change: opacity;
}
.mg-live .foot { left: 0; right: 0; bottom: 0; padding-block: var(--sc-3); z-index: 5; }
@media (max-aspect-ratio: 21/20) {
  .mg-live .cl__copy { bottom: 19vh; }
  .mg-live .cl__copy h2 { font-size: var(--sc-t-xl); }
}
@media (max-height: 640px) and (min-aspect-ratio: 21/20) {
  .mg-live .cl__copy .sc-body { display: none; }
}

/* Movimento reduzido: sem entradas animadas; a opacidade continua contando a história. */
@media (prefers-reduced-motion: reduce) {
  .mg-live .td__hero h1, .mg-live .td__hero .sc-lede { animation: none; }
}
.mg-live .cl__copy h2 { font-size: var(--sc-t-xl); }
@media (max-width: 700px) { .paper .sc-display--lg { font-size: var(--sc-t-2xl); } }
@media (min-aspect-ratio: 21/20) { .mg-live .td__hero .sc-lede { max-width: 21rem; } }