/*
 * ADN Racing: componentes do design system.
 * Todos leem de tokens.css. A página /design-system mostra cada um.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tipo-corpo);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 3px;
}

.container {
  width: min(100% - 2 * var(--esp-5), var(--largura-max));
  margin-inline: auto;
}

/* Tipografia ---------------------------------------------------------- */

.display,
.h1,
.h2,
.h3 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
}
.display { font-size: var(--tipo-display); }
.h1 { font-size: var(--tipo-h1); }
.h2 { font-size: var(--tipo-h2); }
.h3 { font-size: var(--tipo-h3); }

.rotulo {
  font-family: var(--fonte-numero);
  font-weight: 600;
  font-size: var(--tipo-rotulo);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.numero-xl {
  font-family: var(--fonte-numero);
  font-weight: 600;
  font-size: var(--tipo-numero-xl);
  line-height: 0.9;
  color: var(--cor-destaque);
}

.texto-suave { color: var(--cor-texto-suave); }
.destaque { color: var(--cor-destaque); }

/* Título de seção em caixa laranja, como "CARROS / TRACK DAY" no folder */
.titulo-caixa {
  display: inline-block;
  background: var(--cor-destaque);
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  font-size: var(--tipo-h3);
  line-height: 1.15;
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio);
}
.titulo-caixa small {
  display: block;
  font-size: 0.75em;
}

/* Faixa quadriculada ------------------------------------------------- */
/* Desenhada em CSS para ficar nítida em qualquer tamanho. */

.quadriculado {
  --qd-cor: var(--cor-destaque);
  --qd-tam: 28px;
  height: calc(var(--qd-tam) * 2);
  background:
    linear-gradient(90deg, var(--qd-cor) 50%, transparent 50%) 0 0 / calc(var(--qd-tam) * 4) var(--qd-tam) repeat-x,
    linear-gradient(90deg, transparent 50%, var(--qd-cor) 50%) 0 var(--qd-tam) / calc(var(--qd-tam) * 4) var(--qd-tam) repeat-x;
}
.quadriculado--branco { --qd-cor: var(--cor-texto); }
.quadriculado--fino { --qd-tam: 10px; }
.quadriculado--grande { --qd-tam: clamp(36px, 8vw, 90px); height: calc(var(--qd-tam) * 3);
  background:
    linear-gradient(90deg, var(--qd-cor) 50%, transparent 50%) 0 0 / calc(var(--qd-tam) * 4) var(--qd-tam) repeat-x,
    linear-gradient(90deg, transparent 50%, var(--qd-cor) 50%) 0 var(--qd-tam) / calc(var(--qd-tam) * 4) var(--qd-tam) repeat-x,
    linear-gradient(90deg, var(--qd-cor) 50%, transparent 50%) 0 calc(var(--qd-tam) * 2) / calc(var(--qd-tam) * 4) var(--qd-tam) repeat-x;
}

/* Botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fonte-numero);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--esp-3) var(--esp-5);
  border: 2px solid var(--cor-destaque);
  border-radius: var(--raio-botao);
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque); /* preto sobre laranja: 6,9:1. Branco dava 3,1:1 */
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao),
    transform var(--tempo-toque) var(--curva), box-shadow var(--tempo-toque) var(--curva);
}
.botao:hover {
  background: var(--cor-destaque-hover);
  border-color: var(--cor-destaque-hover);
  transform: scale(1.04);
  box-shadow: 0 10px 40px var(--brilho-laranja);
}
.botao:active { background: var(--adn-laranja-escuro); transform: scale(0.98); }
.botao::after { content: "→"; font-size: 1.1em; }

.botao--contorno {
  background: transparent;
  color: var(--cor-texto);
}
.botao--contorno:hover { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }

/* Sobre foto ou vídeo: vidro translúcido, vira branco no hover */
.botao--vidro {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  color: var(--cor-texto);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.botao--vidro:hover {
  background: var(--cor-texto);
  border-color: var(--cor-texto);
  color: var(--cor-sobre-destaque);
  box-shadow: none;
}

.botao--pequeno {
  font-size: 0.8rem;
  padding: var(--esp-2) var(--esp-3);
}

/* Selo --------------------------------------------------------------- */

.selo {
  display: inline-block;
  font-family: var(--fonte-numero);
  font-weight: 600;
  font-size: var(--tipo-rotulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px var(--esp-2);
  border: 1px solid currentColor;
  border-radius: var(--raio);
}
.selo--sugerida { color: var(--cor-alerta); }
.selo--confirmada { color: var(--cor-sucesso); }

/* Tabela de voltas e preços ------------------------------------------ */

.tabela-voltas {
  border-collapse: separate;
  border-spacing: 0 4px;
  background: var(--cor-destaque);
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
  border-radius: var(--raio);
  font-family: var(--fonte-numero);
  font-weight: 600;
  min-width: 220px;
}
.tabela-voltas caption {
  caption-side: top;
  text-align: right;
  font-family: var(--fonte-numero);
  font-size: var(--tipo-pequeno);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: var(--esp-1);
}
.tabela-voltas caption b { font-size: 1.3em; }
.tabela-voltas th {
  background: var(--adn-preto);
  color: var(--cor-texto);
  font-size: var(--tipo-rotulo);
  letter-spacing: 0.12em;
  padding: 2px var(--esp-3);
  text-align: center;
}
.tabela-voltas td {
  background: var(--adn-branco);
  color: var(--adn-preto);
  padding: 3px var(--esp-3);
  text-align: center;
  font-size: 1rem;
}
.tabela-voltas td + td { text-align: right; }

/* Cartão de carro ---------------------------------------------------- */

.cartao-carro {
  position: relative;
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  background: linear-gradient(180deg, var(--adn-grafite) 0%, var(--adn-preto) 100%);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.cartao-carro__marca-dagua {
  position: absolute;
  top: var(--esp-3);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  color: var(--cor-marca-dagua);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.cartao-carro__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  width: 100%;
  filter: drop-shadow(0 20px 18px var(--sombra-carro));
}
.cartao-carro__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--esp-4);
  flex-wrap: wrap;
}
.cartao-carro__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-h3);
  color: var(--cor-destaque);
  text-transform: uppercase;
  margin: 0;
}
.cartao-carro__ficha {
  font-family: var(--fonte-numero);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-pequeno);
}
.cartao-carro__corpo {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--esp-5);
  flex-wrap: wrap;
}

/* Cartão de data de track day ---------------------------------------- */

.cartao-data {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  background: var(--cor-superficie);
  border-left: 4px solid var(--cor-destaque);
  border-radius: var(--raio);
}
.cartao-data__dia {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--cor-destaque);
  line-height: 1;
  white-space: nowrap;
}
.cartao-data__local {
  display: grid;
  line-height: 1.2;
}
.cartao-data__autodromo {
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-h3);
  text-transform: uppercase;
}
.cartao-data__rodape {
  margin-top: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* Lista com marcador laranja ----------------------------------------- */

.lista-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-2);
}
.lista-check li {
  display: flex;
  gap: var(--esp-3);
  align-items: baseline;
}
.lista-check li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--cor-destaque);
  transform: translateY(-1px);
}

/* Cartão de data clicável, com o traçado da pista ---------------------- */

.cartao-data--link {
  position: relative;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.cartao-data--link:hover {
  transform: translateY(-2px);
  background: var(--cor-borda);
}
.cartao-data__tracado {
  position: absolute;
  right: var(--esp-4);
  bottom: calc(var(--esp-4) + 46px); /* ao lado do nome do autódromo, acima do rodapé */
  width: 72px;
  height: 52px;
  object-fit: contain;
  opacity: 0.9;
}
.cartao-data__ver {
  font-family: var(--fonte-numero);
  font-weight: 700;
  font-size: var(--tipo-rotulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto);
  background: var(--cor-destaque);
  padding: 2px var(--esp-2);
  border-radius: var(--raio);
}
.cartao-data__ver::after { content: " →"; }

/* Cronograma do dia, como no folder ------------------------------------ */

.cronograma {
  list-style: none;
  margin: var(--esp-5) 0 0;
  padding: 0 0 0 var(--esp-5);
  border-left: 2px solid var(--cor-borda);
  display: grid;
  gap: var(--esp-4);
}
.cronograma__item {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: var(--esp-4);
  align-items: baseline;
}
.cronograma__quando {
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-h3);
  color: var(--cor-destaque);
  white-space: nowrap;
}
.cronograma__o-que {
  font-family: var(--fonte-titulo);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  text-transform: uppercase;
}

/* ======================================================================
   NOVO VISUAL: imagem em tela cheia e movimento
   Aprovado pelo Henrique em 12/11/2026. Toda página nova parte daqui.
   O movimento vem de /js/movimento.js, que só escreve variáveis CSS e
   classes; o desenho fica todo neste arquivo. A vitrine em /design-system
   (seção Novo visual) mostra cada peça e a regra de uso.
   ====================================================================== */

.container--estreito { width: min(100% - 2 * var(--esp-5), 900px); }

/* Títulos de tela inteira --------------------------------------------- */

.sobretitulo {
  font-family: var(--fonte-numero);
  font-weight: 600;
  font-size: var(--tipo-pequeno);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-destaque-hover);
  margin: 0;
}
.titulo-gigante,
.titulo-grande {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}
.titulo-gigante { font-size: var(--tipo-gigante); line-height: 1.02; letter-spacing: -0.01em; }
.titulo-grande { font-size: var(--tipo-grande); line-height: 1.12; }

/* Tela cheia: foto ou vídeo do tamanho da página, com texto por cima ---- */
/* --p: quanto a tela já saiu por cima (0 a 1). --s: quanto já entrou por
   baixo (0 a 1). Os dois vêm de movimento.js em quem tem data-progresso. */

.tela-cheia {
  --p: 0;
  --s: 1;
  --zoom: 1;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--cor-fundo);
}
.tela-cheia__midia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zoom));
  will-change: transform;
}
.tela-cheia::after { /* véu: claro no meio, escuro onde fica o texto */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--veu-medio) 0%, var(--veu-leve) 30%, var(--veu-medio) 62%, var(--veu-forte) 100%);
}
.tela-cheia__texto {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--esp-5), var(--largura-max));
  margin-inline: auto;
  padding-bottom: clamp(3rem, 12vh, 8rem);
  display: grid;
  gap: var(--esp-4);
  justify-items: start;
  overflow-wrap: anywhere;
}
.tela-cheia__texto > * { min-width: 0; max-width: 100%; }
.tela-cheia .sobretitulo { color: var(--cor-texto); }
.tela-cheia .titulo-gigante { text-shadow: 0 4px 50px var(--veu-forte); }

/* A foto respira devagar, mesmo sem rolagem */
.tela-cheia--respira .tela-cheia__midia { animation: respira 24s ease-in-out infinite alternate; }
@keyframes respira {
  from { translate: -1.2% 0; scale: 1; }
  to   { translate: 1.2% -1%; scale: 1.06; }
}

/* Abertura da página: a foto aproxima e o texto sobe ao rolar */
.tela-cheia--abertura { --zoom: calc(1.06 + 0.22 * var(--p)); }
.tela-cheia--abertura::after {
  background: linear-gradient(180deg, var(--veu-medio) 0%, var(--veu-leve) 30%, var(--veu-medio) 62%, var(--cor-fundo) 100%);
}
.tela-cheia--abertura .tela-cheia__texto {
  transform: translateY(calc(-90px * var(--p)));
  opacity: calc(1 - 1.5 * var(--p));
}

/* Pilha: cada tela desliza sobre a anterior e encaixa no topo */
.tela-cheia--pilha {
  --zoom: calc(1.25 - 0.2 * var(--s));
  position: sticky;
  top: 0;
  border-radius: var(--raio-midia) var(--raio-midia) 0 0;
  box-shadow: 0 -30px 60px var(--veu-medio);
}
.tela-cheia--pilha::after {
  background: linear-gradient(180deg, var(--veu-leve) 0%, var(--veu-leve) 35%, var(--veu-forte) 100%);
}
.tela-cheia--pilha .tela-cheia__midia { transition: transform 1600ms var(--curva); }
.tela-cheia--pilha .tela-cheia__texto {
  opacity: calc(var(--s) * 3 - 1.6);
  transform: translateY(calc(60px * (1 - var(--s))));
}
@media (hover: hover) {
  .tela-cheia--pilha:hover { --zoom: calc(1.31 - 0.2 * var(--s)); }
}

/* Entradas ------------------------------------------------------------ */

/* No topo da página: entra sozinho, um depois do outro (--ordem: 0, 1, 2) */
.entra {
  animation: entra var(--tempo-entrada) var(--curva) both;
  animation-delay: calc(180ms + var(--ordem, 0) * 130ms);
}
@keyframes entra {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

/* No resto da página: entra quando aparece na rolagem.
   Só some se o movimento.js estiver ativo (classe com-movimento no html). */
.com-movimento .revela {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity var(--tempo-entrada) var(--curva), transform var(--tempo-entrada) var(--curva);
  transition-delay: calc(var(--ordem, 0) * 110ms);
}
.com-movimento .revela.visivel { opacity: 1; transform: none; }

/* Frase que acende palavra por palavra (data-acende) ------------------- */

.frase-acende {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tipo-frase);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
}
.frase-acende .palavra { color: var(--texto-apagado); transition: color 350ms linear; }
.frase-acende .palavra.acesa { color: var(--cor-texto); }

/* Filme: o vídeo cresce até ocupar a tela (data-filme) ------------------ */
/* --v: 0 quando o vídeo chega, 1 quando ocupa a tela. Vem de movimento.js. */

.filme {
  --v: 0;
  position: relative;
  height: 190vh;
}
.filme__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.filme__moldura {
  position: relative;
  width: calc(64% + 36% * var(--v));
  height: calc(62% + 38% * var(--v));
  border-radius: calc(var(--raio-midia) * (1 - var(--v)));
  overflow: hidden;
  background: var(--cor-superficie);
}
.filme__moldura video { display: block; width: 100%; height: 100%; object-fit: cover; }
.filme__moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--veu-leve) 40%, var(--veu-forte) 100%);
}
.filme__texto {
  position: absolute;
  z-index: 1;
  left: clamp(var(--esp-5), 6vw, 6rem);
  right: clamp(var(--esp-5), 6vw, 6rem);
  bottom: clamp(4.5rem, 12vh, 7rem);
  display: grid;
  gap: var(--esp-4);
  opacity: calc(var(--v) * 4 - 3);
  transform: translateY(calc(40px * (1 - var(--v))));
}
.filme__texto p { max-width: 44ch; margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.filme__botao { /* todo vídeo que toca sozinho tem como pausar */
  position: absolute;
  z-index: 2;
  right: var(--esp-5);
  bottom: var(--esp-5);
  min-height: 44px;
  padding: 0 var(--esp-5);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--vidro-borda);
  background: var(--vidro);
  color: var(--cor-texto);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 600 0.85rem var(--fonte-numero);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.filme__botao:hover { background: var(--cor-texto); color: var(--cor-sobre-destaque); }
@media (max-width: 760px) {
  .filme__moldura { width: calc(86% + 14% * var(--v)); height: calc(56% + 44% * var(--v)); }
}

/* Cartão-palco: o carro num palco escuro, reage ao mouse (data-inclina) -- */

.cartao-palco {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  min-height: 520px;
  display: grid;
  align-content: end;
  padding: var(--esp-6);
  border-radius: var(--raio-cartao);
  background: radial-gradient(120% 90% at 50% 0%, var(--palco-claro) 0%, var(--cor-superficie) 55%, var(--cor-fundo) 100%);
  border: 1px solid var(--cor-borda);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--tempo-toque) var(--curva), border-color var(--tempo-toque) var(--curva),
    box-shadow var(--tempo-toque) var(--curva), opacity var(--tempo-entrada) var(--curva);
}
.com-movimento .cartao-palco.revela { transform: translateY(44px); }
.com-movimento .cartao-palco.revela.visivel { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.cartao-palco__numero {
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-6);
  font-family: var(--fonte-numero);
  font-weight: 700;
  font-size: clamp(7rem, 18vw, 11rem);
  line-height: 1;
  color: var(--cor-marca-dagua);
  transition: color var(--tempo-toque) var(--curva), transform var(--tempo-entrada) var(--curva);
}
.cartao-palco__foto {
  position: absolute;
  left: 4%;
  top: 14%;
  width: 92%;
  height: auto;
  filter: drop-shadow(0 30px 28px var(--sombra-carro));
  transition: transform var(--tempo-entrada) var(--curva);
}
.cartao-palco::after { /* risco laranja no chão, cresce no hover */
  content: "";
  position: absolute;
  left: var(--esp-6);
  bottom: 0;
  width: 56px;
  height: 4px;
  background: var(--cor-destaque);
  transition: width var(--tempo-entrada) var(--curva);
}
.cartao-palco__texto { position: relative; display: grid; gap: var(--esp-1); }
.cartao-palco__texto p { margin: 0; }
.cartao-palco__nome {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--tipo-h2);
  text-transform: uppercase;
  margin: 0;
}
.cartao-palco__ficha { color: var(--cor-texto-suave); }
.cartao-palco__preco { padding-top: var(--esp-3); font-family: var(--fonte-numero); font-size: 1.15rem; letter-spacing: 0.04em; }
.cartao-palco__preco b { color: var(--cor-destaque-hover); font-size: 1.5rem; }
@media (hover: hover) {
  .cartao-palco:hover { border-color: var(--cor-destaque); box-shadow: 0 30px 80px -30px var(--brilho-laranja); }
  .cartao-palco:hover .cartao-palco__foto { transform: translateX(5%) scale(1.09); }
  .cartao-palco:hover .cartao-palco__numero { color: var(--brilho-laranja); transform: translateX(-10px); }
  .cartao-palco:hover::after { width: calc(100% - 2 * var(--esp-6)); }
}
@media (max-width: 760px) {
  .cartao-palco { min-height: 440px; padding: var(--esp-5); }
  .cartao-palco::after { left: var(--esp-5); }
}

/* Trilho: fila de cartões que rola para o lado -------------------------- */

.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 560px);
  gap: var(--esp-5);
  padding-inline: max(var(--esp-5), calc((100vw - var(--largura-max)) / 2));
  padding-block: var(--esp-5) var(--esp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--esp-5), calc((100vw - var(--largura-max)) / 2));
  scrollbar-width: none;
  perspective: 1400px;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }

/* Faixa quadriculada em movimento --------------------------------------- */

.faixa-correndo { overflow: hidden; }
.faixa-correndo::before {
  --qd: clamp(22px, 3.4vw, 44px);
  content: "";
  display: block;
  width: calc(100% + var(--qd) * 4);
  height: calc(var(--qd) * 2);
  background:
    linear-gradient(90deg, var(--cor-destaque) 50%, transparent 50%) 0 0 / calc(var(--qd) * 2) var(--qd) repeat-x,
    linear-gradient(90deg, transparent 50%, var(--cor-destaque) 50%) 0 var(--qd) / calc(var(--qd) * 2) var(--qd) repeat-x;
  animation: correr 2.4s linear infinite;
}
.faixa-correndo--volta::before { animation-direction: reverse; }
@keyframes correr { to { transform: translateX(calc(var(--qd) * -4)); } }

/* Menos movimento: a página aparece parada e completa -------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra,
  .tela-cheia--respira .tela-cheia__midia,
  .faixa-correndo::before { animation: none; }
  .botao, .botao:hover, .botao:active { transform: none; }
  .tela-cheia { --p: 0 !important; --s: 1 !important; --zoom: 1 !important; }
  .tela-cheia--pilha { position: relative; border-radius: 0; }
  .tela-cheia__midia, .cartao-palco, .cartao-palco__foto, .cartao-palco__numero { transition: none; }
  .com-movimento .revela, .com-movimento .cartao-palco.revela { opacity: 1; transform: none; transition: none; }
  .frase-acende .palavra { color: var(--cor-texto); }
  .filme { --v: 1 !important; height: auto; }
  .filme__palco { position: relative; }
}