/* ============================================================================
   SITE 02 · «ORBIT» — PÁGINA MERCADOS  (markets.html)
   Escopo: exclusivamente `.page-markets .mk-*`
   ----------------------------------------------------------------------------
   Segunda rodada · reescrito do zero. Nada da folha «MERIDIAN» sobrevive.

   O QUE ESTE ARQUIVO RESOLVE — e por quê

     1. ÍNDICE EM PÍLULA GRUDADO (.mk-index)
        A página tem seis tabelas. Em vez de abas (que esconderiam cinco delas
        e quebrariam as âncoras markets.html#forex … #crypto usadas pelo
        rodapé), o índice é uma barra em pílula que acompanha a rolagem
        enquanto qualquer classe estiver na tela. É UMA navegação só: o
        .sectionnav do design system, recomposto na horizontal.

     2. BLOCO DE CLASSE ARREJADO (.mk-class)
        Cada classe vive num container arredondado com respiro, alternando
        papel e névoa. O cartão-resumo (.mk-sum) vem antes da tabela e troca
        de lado a cada classe — a leitura do DOM continua "resumo → tabela",
        quem inverte é o .split--swap.

     3. NOTAS DE RODAPÉ NUMERADAS (.mk-notes)
        Detalhe de site financeiro de verdade: a legenda do topo referencia
        1, 2 e 3, e as notas moram na seção de risco.

   REGRAS RESPEITADAS
     · Nenhum hex literal — só var(--…) de tokens.css.
     · Nenhuma declaração forçada por prioridade (isso é só do base.css).
     · Nenhum canto vivo em card, foto, botão ou input.
     · Nenhum elemento decorativo por cima de linha de texto.
     · Mobile-first; breakpoints 640 / 900 / 1200.
   ========================================================================== */


/* ==========================================================================
   §01 · HERO — coluna do mockup
   ====================================================================== */

.page-markets .mk-hero__mock {
  /* o parallax de -0.05 desloca ~30px: reserva folga para não encostar
     na coluna de texto nem no arco seguinte */
  padding-block: var(--s-4);
}

@media (min-width: 900px) {
  .page-markets .mk-hero__mock { padding-block-start: var(--s-8); }
}


/* ==========================================================================
   §02 · ÍNDICE DAS SEIS CLASSES — barra em pílula, grudada abaixo do header
   --------------------------------------------------------------------------
   A cápsula do header flutua a `--header-h + --header-gap` do topo; a barra
   para logo abaixo dela. Fica sempre em fundo `--paper`, mesmo quando passa
   por cima de um bloco `.tone-deep`: os tokens vêm do <body>, não da seção,
   porque a barra é IRMÃ das seções e não filha.
   ====================================================================== */

.page-markets .mk-flow { position: relative; }

/* Caixa de altura ZERO: a pílula flutua sobre o topo da primeira classe em
   repouso e gruda abaixo do header ao rolar. Sem altura no fluxo não sobra
   uma faixa de papel entre duas seções em névoa. */
.page-markets .mk-index {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--header-gap) + var(--s-2));
  z-index: var(--z-sticky);
  height: 0;
}

/* o .sectionnav do design system nasce como coluna sticky; aqui ele é uma
   fita horizontal dentro da barra — mesma navegação, outra composição */
.page-markets .mk-index__nav {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-markets .mk-index__nav::-webkit-scrollbar { display: none; }

.page-markets .mk-index__nav .sectionnav__link {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: var(--s-4);
  gap: var(--s-2);
  white-space: nowrap;
}

.page-markets .mk-index__n {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  color: var(--faint-ink);           /* 5.60 : 1 sobre --paper                */
}

/* estado ativo: o número acompanha o acento (blue sobre sky = 5.27 : 1) */
.page-markets .mk-index__nav .sectionnav__link.is-active .mk-index__n { color: var(--teal); }

/* o hover do design system pinta --surface-tint + --fg (13.99 : 1) — aqui só
   garantimos que o número não fique mais fraco que o rótulo */
.page-markets .mk-index__nav .sectionnav__link:hover .mk-index__n { color: var(--slate); }

@media (min-width: 640px) {
  .page-markets .mk-index__nav .sectionnav__link { padding-inline: var(--s-5); }
}


/* ==========================================================================
   §03 · BLOCO DE CLASSE
   ====================================================================== */

.page-markets .mk-class-section {
  /* a barra do índice não pode cobrir o título quando a âncora é usada */
  scroll-margin-top: calc(var(--header-h) + var(--header-gap) + 5rem);
}

/* a primeira classe abre com folga extra: é sobre ela que a pílula do índice
   pousa quando a página está no topo */
.page-markets #forex { padding-block-start: calc(var(--sec) + 3.5rem); }

.page-markets .mk-class {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  padding: clamp(var(--s-6), 4vw, var(--s-10));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}

/* variante para as seções em papel: o bloco vira névoa e dispensa borda */
.page-markets .mk-class--plain {
  background-color: var(--surface-2);
  border-color: transparent;
  box-shadow: none;
}

.page-markets .mk-class__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 52rem;
}

.page-markets .mk-class__body { align-items: start; }


/* ==========================================================================
   §04 · CARTÃO-RESUMO — spread inicial, alavancagem, horário
   ====================================================================== */

.page-markets .mk-sum {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  border-radius: var(--radius-lg);
}

.page-markets .mk-sum__count { color: var(--teal-deep); }   /* 10.47 : 1 sobre --tint */

.page-markets .mk-sum__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.page-markets .mk-sum__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.page-markets .mk-sum__row + .mk-sum__row {
  padding-block-start: var(--s-4);
  border-block-start: var(--border) solid var(--line);
}

.page-markets .mk-sum dt {
  font-size: var(--fs-xs);
  color: var(--faint-ink);          /* 4.55 : 1 sobre --tint                   */
}

.page-markets .mk-sum__val {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* horários e valores textuais: mesma família mono, corpo menor, sem estourar */
.page-markets .mk-sum__hours {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink);
}

.page-markets .mk-sum__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-2);
}


/* ==========================================================================
   §05 · TABELA DA CLASSE
   --------------------------------------------------------------------------
   A `.data-table` recebe uma largura mínima confortável para as quatro
   colunas. No mobile o excedente rola DENTRO do `.table-scroll` — a página
   nunca rola na horizontal.
   ====================================================================== */

.page-markets .mk-table {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.page-markets .mk-table .data-table { min-width: 30rem; }

.page-markets .mk-table .table-note { margin-block-start: 0; }

@media (min-width: 900px) {
  /* a partir daqui a tabela cabe inteira: a nota de rolagem some */
  .page-markets .mk-table .table-note { display: none; }
}


/* ==========================================================================
   §06 · LEGENDA DAS NOTAS DE RODAPÉ
   ====================================================================== */

.page-markets .mk-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  max-width: 30rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--faint-ink);          /* 5.17 : 1 sobre --mist                  */
}

.page-markets .mk-legend__ref {
  display: inline-flex;
  align-items: baseline;
  gap: .15em;
  color: var(--teal);               /* 6.00 : 1 sobre --mist                  */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}

/* o hover SOBE o contraste: blue-deep sobre mist ≈ 12 : 1 */
.page-markets .mk-legend__ref:hover { color: var(--teal-deep); }

.page-markets .mk-legend__ref sup {
  font-size: .78em;
  line-height: 0;
}


/* ==========================================================================
   §07 · FAIXA ESCURA — foto panorâmica sangrada + métricas
   --------------------------------------------------------------------------
   A quebra de grade intencional da página: a foto ocupa o container largo
   enquanto o texto acima e as métricas abaixo ficam no container padrão.
   ====================================================================== */

.page-markets .mk-board { margin-block: clamp(var(--s-8), 5vw, var(--s-11)); }

.page-markets .mk-board .photo { box-shadow: var(--shadow-4); }

/* Ponto focal — faixa 21/9 sobre a foto 3/2 de `screen-ticker-05`: o corte é na
   ALTURA (entram 686 dos 1067 px, 64%) e o X é inerte. A parede de LED é uma
   textura homogênea — não há "assunto" a centrar —, então o Y só decide quanto
   das linhas grandes do rodapé entra atrás do véu. 46% deixa as linhas médias,
   mais legíveis, na faixa clara acima da legenda. */
.page-markets .mk-board .photo img { object-position: 50% 46%; }

/* Ponto focal da foto em arco (gráficos no monitor). */
.page-markets .photo--arch img { object-position: 50% 45%; }

/* no mobile o panorâmico fica alto demais para caber com o texto: encurta.
   3/2 é exatamente a proporção do arquivo — no celular a foto entra inteira,
   sem corte em nenhum eixo. */
@media (max-width: 639.98px) {
  .page-markets .mk-board .photo { aspect-ratio: 3 / 2; }
}

/* Véu medido em pixel sobre a imagem composta: o painel de cotações tem verdes
   e laranjas MUITO claros (o pior pixel sob o olho chega a rgb(201,250,78) em
   bruto). Com o degrau padrão o olho em `--tint` caía a 2.25 : 1 no celular e a
   3.70 : 1 no desktop. Este degrau segura `--veil-hard` até 46% da altura —
   toda a faixa onde a legenda vive — e só então alivia. */
.page-markets .mk-board .photo.photo--veil-bottom::after {
  background-image: linear-gradient(
    to top,
    var(--veil-hard) 0%,
    var(--veil-hard) 46%,
    var(--veil-soft) 74%,
    transparent 92%
  );
}

/* a legenda vive sobre a foto: corpo maior e negrito para entrar na regra de
   texto grande (3 : 1) além do véu, que já entrega bem mais que isso */
.page-markets .mk-board .photo__over strong {
  font-weight: var(--fw-bold);
  font-size: clamp(1.0625rem, 1.5vw, 1.35rem);
  line-height: 1.35;
}

.page-markets .mk-stats { row-gap: var(--gap-lg); }

/* `US$ 4.2 B` tem nove caracteres em mono: no corpo padrão da métrica ele
   quebraria em duas linhas dentro de uma coluna de quatro */
.page-markets .mk-stats .stat__value {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  white-space: nowrap;
}


/* ==========================================================================
   §08 · CONDIÇÕES DE NEGOCIAÇÃO
   ====================================================================== */

.page-markets .mk-cond li {
  padding-block-end: var(--s-4);
  border-block-end: var(--border) solid var(--line);
}

.page-markets .mk-cond li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.page-markets .mk-cond .bullets__title { display: block; }
.page-markets .mk-cond .bullets__body  { display: block; margin-block-start: var(--s-1); }


/* ==========================================================================
   §09 · NOTA DE RISCO E NOTAS DE RODAPÉ
   ====================================================================== */

.page-markets .mk-risk {
  display: grid;
  gap: var(--gap);
  padding: clamp(var(--s-6), 4vw, var(--s-9));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-xl);
}

@media (min-width: 900px) {
  .page-markets .mk-risk {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--gap-lg);
    align-items: start;
  }
}

.page-markets .mk-risk__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.page-markets .mk-risk__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

.page-markets .mk-notes {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.page-markets .mk-notes__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-muted);
  scroll-margin-top: calc(var(--header-h) + var(--header-gap) + 5rem);
}

.page-markets .mk-notes__item:target { color: var(--fg); }

.page-markets .mk-notes__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-tint);
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  color: var(--teal-deep);          /* 10.47 : 1 sobre --tint                  */
}

.page-markets .mk-risk__stamp { margin-block-start: var(--s-2); }


/* ==========================================================================
   §10 · FECHO
   ====================================================================== */

.page-markets .mk-close { max-width: 42rem; }

/* Widgets ao vivo por classe de ativo e painel escuro (TradingView) */
.page-markets .mk-live { border-top: var(--border) solid var(--line); padding-block-start: var(--s-7); }
.page-markets .mk-board__live { max-width: var(--wrap); margin-inline: auto; }
.page-markets .mk-board__live .lead { max-width: 46rem; }