/* ==========================================================================
   FAIXAS E TRAÇOS — Remessa na execução, iHub na identidade (23/09/2026)

   O dono: "as fitas não se parecem em nada com a da Remessa" e "na LP do
   iHub existem traços divisórias e a cor vermelha; não vejo nesta da MGX".
   · A faixa segue a da Remessa MEDIDA no ar (remessa-blush.vercel.app):
     legenda em mono 12px caixa-alta, duas linhas em mono 16px andando em
     sentidos opostos com velocidades que nunca batem (38s e 33,6s), borda
     que some nas pontas (máscara 12%–88%), pausa com o mouse em cima.
   · As bordas da faixa e os traços entre seções são os do iHub MEDIDOS na
     LP deles: linha cheia de largura inteira, azul até 70% e vermelho no
     resto, alternando o lado a cada traço.
   ========================================================================== */
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --traco-azul: var(--ihub-azul, #00A7FF);
  --traco-vermelho: var(--ihub-vermelho, #FF192A);
  --traco: linear-gradient(90deg, var(--traco-azul) 0 70%, var(--traco-vermelho) 70% 100%);
  --traco-inv: linear-gradient(90deg, var(--traco-vermelho) 0 30%, var(--traco-azul) 30% 100%);
}

/* ---- traço entre seções --------------------------------------------------- */
.mgx-traco {
  display: block;
  inline-size: 100%;
  block-size: 4px;
  background: var(--traco);
  position: relative;
  z-index: 3;
}
.mgx-traco--inv { background: var(--traco-inv); }

/* ---- a faixa -------------------------------------------------------------- */
.mgx-faixa {
  position: relative;
  display: grid;
  /* sem isto a coluna da grade toma a largura das trilhas (3.840px) e a
     legenda centraliza fora da tela */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 1.4rem;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.mgx-faixa::before,
.mgx-faixa::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 3px;
  background: var(--traco);
}
.mgx-faixa::before { inset-block-start: 0; }
.mgx-faixa::after { inset-block-end: 0; background: var(--traco-inv); }

.mgx-faixa .mgx-faixa__titulo {
  margin: 0;
  color: #7C8C9A;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}
/* `clip` e não `hidden`: o letreiro é feito para ser recortado, e clip não
   cria caixa de rolagem escondida (o que o auditor caça como curativo) */
.mgx-faixa .mgx-letreiro {
  display: flex;
  margin-block: 0.35rem;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mgx-faixa .mgx-letreiro__trilha {
  display: flex;
  flex: none;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin: 0;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem);
  list-style: none;
}
.mgx-faixa .mgx-letreiro__trilha li {
  margin: 0;
  color: #93A3B1;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
  list-style: none;
}
.mgx-faixa .mgx-faixa__leitor {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mgx-faixa .mgx-letreiro__trilha { animation: mgx-letreiro var(--dur, 38s) linear infinite; }
  /* duas velocidades que nunca batem: o encontro das linhas nunca se repete */
  .mgx-faixa .mgx-letreiro--volta .mgx-letreiro__trilha { animation-direction: reverse; --dur: 33.6s; }
  .mgx-faixa .mgx-letreiro:hover .mgx-letreiro__trilha { animation-play-state: paused; }
}
@keyframes mgx-letreiro { to { transform: translateX(-100%); } }

@media (max-width: 47.99rem) {
  .mgx-faixa { padding-block: 1.1rem; gap: 0.6rem; }
  .mgx-faixa .mgx-letreiro__trilha li { font-size: 0.9375rem; }
}

/* celular baixo (até 800px de altura): a faixa fica com uma linha só */
@media (max-width: 47.99rem) and (max-height: 50rem) {
  .mgx-faixa { padding-block: 0.875rem; gap: 0.375rem; }
  .mgx-faixa .mgx-letreiro--volta { display: none; }
}