/* ============================================================================
   SITE 02 · «ORBIT» — PÁGINA PLATAFORMA  ·  platforms.html
   Escopo: exclusivo desta página. Todo seletor leva o prefixo `.pf-` e,
   quando faz sentido, é ancorado em `.page-platforms`.
   ----------------------------------------------------------------------------
   Esta é a página dos MOCKUPS. A moldura (.device) e os blocos internos
   (.dv-*) vêm do components.css; aqui vive só o que é montagem própria:

     01  Hero — palco do conjunto desktop + celular
     02  Palcos de mockup (folga reservada, sangria de grade)
     03  Peças de interface exclusivas (cabeçalho de tela, log, url, ferramentas)
     04  Celular — tela de mobilidade e alerta de preço
     05  Livro-razão dos diferenciais (seção 01)
     06  Tabela comparativa
     07  Fotografia da página
     08  Ficha técnica e fecho

   Nenhum hex literal · nenhum !important · nenhuma classe de outra página.
   ========================================================================== */


/* ==========================================================================
   §01 · HERO
   ====================================================================== */

.page-platforms .pf-hero__crumb {
  margin-block-end: var(--s-7);
}

.page-platforms .pf-hero__grid {
  align-items: start;
}

.page-platforms .pf-hero__note {
  max-width: 44ch;
}

/* Abaixo de 900px as colunas empilham e o timbre passaria por trás de uma
   linha de texto. Ele recua para quase invisível — a regra do ADENDO vale
   também no celular, onde não dá para "reservar folga" lateral. */
@media (max-width: 899.98px) {
  .page-platforms .section .timbre { opacity: .035; }
}


/* ==========================================================================
   §02 · PALCOS DE MOCKUP
   --------------------------------------------------------------------------
   Regra do ADENDO: camada que deriva no parallax precisa de folga RESERVADA
   no fluxo. O celular do hero pousa fora da moldura do desktop — o palco
   reserva esse espaço em padding, não na sorte do desktop.
   ====================================================================== */

.page-platforms .pf-stage {
  position: relative;
}

.page-platforms .pf-stage--hero {
  padding-block-end: var(--s-9);
  padding-inline-end: var(--s-7);
}

@media (max-width: 639.98px) {
  /* abaixo de 640px o celular deixa de pousar na quina e empilha */
  .page-platforms .pf-stage--hero {
    padding-block-end: 0;
    padding-inline-end: 0;
  }
}

.page-platforms .pf-stage .table-note {
  max-width: 52ch;
}

/* Quebra de grade intencional: no WebTrader o mockup avança sobre a margem
   do container. Só a partir de 1200px, e nunca além da borda do container —
   a página continua sem rolagem horizontal. */
@media (min-width: 1200px) {
  .page-platforms .pf-stage--bleed {
    margin-inline-start: calc(var(--gutter) * -1);
  }
}

@media (min-width: 1440px) {
  .page-platforms .pf-stage--bleed {
    margin-inline-start: calc((var(--gutter) + var(--s-8)) * -1);
  }
}

.page-platforms .pf-stage--phone {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .page-platforms .pf-stage--phone { justify-content: center; }
}


/* ==========================================================================
   §03 · PEÇAS DE INTERFACE EXCLUSIVAS DOS MOCKUPS
   Tudo aqui vive dentro de um contêiner role="img" · puramente ilustrativo.
   ====================================================================== */

/* SEGURANÇA DE SOBREPOSIÇÃO — regra do ADENDO: nada de texto sobre texto.
   As linhas dos mockups usam `space-between` com `white-space: nowrap`; numa
   coluna estreita os rótulos passariam por cima uns dos outros em vez de
   encolher. Aqui elas passam a quebrar para a linha de baixo. */
.page-platforms .dv-row,
.page-platforms .dv-field {
  flex-wrap: wrap;
}

/* Cabeçalho de área da tela: abas à esquerda, métrica à direita */
.page-platforms .pf-screen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
}

.page-platforms .pf-screen__head > * { min-width: 0; }

.page-platforms .pf-screen__head .dv-stat {
  align-items: flex-end;
  text-align: right;
}

/* A watchlist do hero carrega três colunas (símbolo · preço · variação): a
   coluna estreita padrão do .dv-grid--2 as encostava uma na outra. */
@media (min-width: 640px) {
  .page-platforms .pf-screen--hero .dv-grid--2 {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.55fr);
  }
}

.page-platforms .pf-screen--hero .dv-row {
  gap: var(--s-2);
  padding-inline: var(--s-2);
}

.page-platforms .pf-chart--hero { min-height: 15rem; }
.page-platforms .pf-chart--test { min-height: 7.5rem; }

/* Rodapé do mockup de algotrading: parâmetros e tipos de ordem em duas faixas
   largas, em vez de uma terceira coluna estreita que apertaria os rótulos. */
.page-platforms .pf-mock-foot {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-3);
}

@media (min-width: 640px) {
  .page-platforms .pf-mock-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.page-platforms .pf-mock-foot > * { min-width: 0; }

.page-platforms .pf-fields {
  display: grid;
  gap: var(--s-2);
}

@media (min-width: 480px) {
  .page-platforms .pf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-platforms .pf-fields > * { min-width: 0; }

/* O painel de ordens tem rótulos longos: uma coluna só, sem quebra feia. */
.page-platforms .pf-mock-foot > :last-child .pf-fields {
  grid-template-columns: minmax(0, 1fr);
}

/* O título da janela é traduzido: em PT e ES ele cresce e disputaria a barra
   com as abas. Encolhe com reticências em vez de empurrar o resto. */
.page-platforms .device__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Log de backtesting — console em DM Mono dentro do mockup claro */
.page-platforms .pf-log {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-radius: var(--radius);
  background-color: var(--ink);
}

.page-platforms .pf-log .dv-label {
  color: var(--tint-soft);
  margin-block-end: var(--s-2);
}

.page-platforms .pf-log__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: .625rem;
  line-height: 1.9;
  color: var(--tint-soft);
}

.page-platforms .pf-log__t { color: var(--tint-soft); }

.page-platforms .pf-log__k {
  min-width: 2.6rem;
  color: var(--tint);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.page-platforms .pf-log__k--ok { color: var(--up-glow); }

.page-platforms .pf-log__v { color: var(--paper); }

/* Barra de endereço do WebTrader — sem domínio inventado, só o estado da sessão */
.page-platforms .pf-url {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: 5px var(--s-4);
  border-radius: var(--radius-pill);
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  font-family: var(--ff-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-platforms .pf-url .orbit { color: var(--up-ink); }

/* Corpo do WebTrader: trilho de ferramentas · gráfico · painel lateral */
.page-platforms .pf-web {
  display: grid;
  gap: var(--s-3);
}

/* Duas colunas assim que há espaço; a terceira (indicadores) só entra quando a
   janela é larga o bastante para ela não espremer o gráfico. */
@media (min-width: 640px) {
  .page-platforms .pf-web {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .page-platforms .pf-web__side { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .page-platforms .pf-web {
    grid-template-columns: auto minmax(0, 1.9fr) minmax(0, 1fr);
  }

  .page-platforms .pf-web__side { grid-column: auto; }
}

.page-platforms .pf-web > * { min-width: 0; }

.page-platforms .pf-tools {
  display: flex;
  gap: var(--s-2);
}

@media (min-width: 640px) {
  .page-platforms .pf-tools { flex-direction: column; }
}

.page-platforms .pf-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background-color: var(--mist);
  color: var(--slate);
}

.page-platforms .pf-tool:first-child {
  background-color: var(--tint);
  color: var(--teal-deep);
}

.page-platforms .pf-tool svg { width: 15px; height: 15px; }


/* ==========================================================================
   §04 · CELULAR — mobilidade
   ====================================================================== */

.page-platforms .pf-phone {
  width: min(320px, 100%);
}

.page-platforms .pf-phone__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.page-platforms .pf-phone__head > * { min-width: 0; }

.page-platforms .pf-phone__head .dv-stat__val { font-size: var(--fs-body); }

.page-platforms .pf-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  background-color: var(--tint);
  color: var(--teal-deep);          /* 10.47 : 1 sobre --tint */
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: .625rem;
  letter-spacing: .06em;
}

.page-platforms .pf-alert .orbit { color: var(--teal); }

.page-platforms .pf-alert__lab {
  text-transform: uppercase;
  white-space: nowrap;
}

.page-platforms .pf-alert__val {
  margin-inline-start: auto;
  white-space: nowrap;
}


/* ==========================================================================
   §05 · LIVRO-RAZÃO DOS DIFERENCIAIS (seção 01)
   Não é grade de cards: uma peça só, curva, com linhas separadas por hairline.
   ====================================================================== */

.page-platforms .pf-ledger {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.page-platforms .pf-ledger__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding: clamp(var(--s-5), 2.4vw, var(--s-8));
  border-block-end: var(--border) solid var(--line);
  transition: background-color var(--dur) var(--ease-soft);
}

.page-platforms .pf-ledger__item:last-child { border-block-end: 0; }

/* hover: ink sobre mist = 15.90 : 1 — o contraste sobe, nunca desce */
.page-platforms .pf-ledger__item:hover { background-color: var(--surface-2); }

.page-platforms .pf-ledger__n {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  transition: color var(--dur) var(--ease-soft);
}

.page-platforms .pf-ledger__item:hover .pf-ledger__n { color: var(--accent-strong); }

.page-platforms .pf-ledger__body { min-width: 0; }

.page-platforms .pf-ledger__t {
  font-size: var(--fs-h3);
  color: var(--fg);
}

.page-platforms .pf-ledger__b {
  margin-block-start: var(--s-3);
  color: var(--fg-muted);
  max-width: 62ch;
}

.page-platforms .pf-ledger__tag {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: start;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .page-platforms .pf-ledger__item {
    grid-template-columns: 3.5rem minmax(0, 1fr) 11rem;
    gap: var(--gap);
    align-items: start;
  }

  .page-platforms .pf-ledger__tag {
    grid-column: auto;
    justify-self: end;
    background-color: transparent;
    padding-inline: 0;
  }

  .page-platforms .pf-ledger__item:hover .pf-ledger__tag { color: var(--fg-muted); }
}


/* ==========================================================================
   §06 · TABELA COMPARATIVA
   ====================================================================== */

.page-platforms .pf-compare { position: relative; }

/* Os nomes de recurso são texto corrido, não símbolo: saem do mono da coluna
   de cabeçalho de linha e podem quebrar em duas linhas. */
.page-platforms .pf-compare__table tbody th {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  white-space: normal;
  color: var(--fg);
  min-width: 16rem;
}

.page-platforms .pf-compare__table thead th:not(:first-child),
.page-platforms .pf-compare__table tbody td {
  text-align: center;
}

.page-platforms .pf-tick {
  font-size: var(--fs-lead);
  line-height: 1;
}

.page-platforms .pf-tick .tick-no { letter-spacing: 0; }


/* ==========================================================================
   §07 · FOTOGRAFIA
   ====================================================================== */

.page-platforms .pf-photo {
  margin-block-start: var(--s-4);
}

/* Ponto focal — faixa 21/9 sobre foto 3/2: sobra 43% da altura. As mãos, o
   celular e o laptop vivem no terço central; o véu inferior leva a legenda. */
.page-platforms .pf-photo img { object-position: 50% 45%; }

/* Ponto focal — caixa 3/4 sobre a foto VERTICAL 2/3 de `pair-tablet-06`: agora
   o eixo que corta é o outro. A largura entra inteira (os 1600 px) e a altura
   perde 11% (267 dos 2400 px), então quem manda é o Y e o X é inerte.
   35% abre a janela em y 93–2226: sobra ar acima das duas cabeças (a mais alta
   começa por volta de y 370) e o corte sai quase todo no rodapé, onde só há
   chão. */
.page-platforms .pf-photo--arch img { object-position: 50% 35%; }

/* No celular a faixa panorâmica não daria altura para a legenda: a foto fica
   mais alta para o painel de texto caber inteiro sobre o véu. */
@media (max-width: 639.98px) {
  .page-platforms .pf-photo { aspect-ratio: 4 / 3; }
}

/* Véu medido em pixel sobre a imagem composta: a foto é de mármore claro e o
   degrau padrão deixava o olho em `--tint` a 2.4–2.6 : 1 e a linha branca a
   3.7 : 1. Segurar `--veil-hard` até 48% da altura cobre toda a faixa da
   legenda antes de aliviar. */
.page-platforms .pf-photo.photo--veil-bottom::after {
  background-image: linear-gradient(
    to top,
    var(--veil-hard) 0%,
    var(--veil-hard) 48%,
    var(--veil-soft) 76%,
    transparent 94%
  );
}

.page-platforms .pf-photo__line {
  margin-block-start: var(--s-2);
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-h3);
  color: var(--paper);
  max-width: 36ch;
}

/* O anel da órbita entra recortado pela borda da foto (papel 7 do símbolo).
   Na foto de topo em arco ele desce, para não cair na curva do arco. */
.page-platforms .pf-photo--arch .photo__ring {
  inset-block-start: 26%;
  inset-inline-end: calc(var(--s-5) * -1);
  color: var(--paper);
  opacity: .92;
}

@media (max-width: 639.98px) {
  .page-platforms .pf-photo--arch .photo__ring {
    inset-block-start: 26%;
    inset-inline-end: calc(var(--s-3) * -1);
  }
}


/* ==========================================================================
   §08 · FICHA TÉCNICA E FECHO
   ====================================================================== */

.page-platforms .pf-clock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.page-platforms .pf-stats { margin-block-start: var(--s-4); }

/* Abaixo de 640px duas colunas apertariam "1,200+" contra o padding da pílula. */
@media (max-width: 639.98px) {
  .page-platforms .pf-stats { grid-template-columns: minmax(0, 1fr); }
}

.page-platforms .pf-spec {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-platforms .pf-spec__row {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) clamp(var(--s-5), 2vw, var(--s-7));
  border-block-end: var(--border) solid var(--line);
}

.page-platforms .pf-spec__row:last-child { border-block-end: 0; }

.page-platforms .pf-spec__row > * { min-width: 0; }

@media (min-width: 640px) {
  .page-platforms .pf-spec__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--gap);
    align-items: baseline;
  }
}

.page-platforms .pf-spec__k {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-platforms .pf-spec__v {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--fg);
  overflow-wrap: anywhere;
}

.page-platforms .pf-spec__note { color: var(--fg-faint); }

/* Fecho da página. Deliberadamente SEM cartão: o rodapé logo abaixo já traz um
   cartão de conversão curvo, e dois cartões iguais empilhados brigariam entre
   si. Aqui é só uma linha de arremate sobre um fio. */
.page-platforms .pf-close {
  display: grid;
  gap: var(--gap);
  align-items: center;
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-9);
  border-block-start: var(--border) solid var(--line);
}

.page-platforms .pf-close > * { min-width: 0; }

@media (min-width: 900px) {
  .page-platforms .pf-close { grid-template-columns: minmax(0, 1fr) auto; }
}

.page-platforms .pf-close__title {
  font-size: var(--fs-h3);
  color: var(--fg);
  max-width: 26ch;
}

.page-platforms .pf-close__lead {
  color: var(--fg-muted);
  max-width: 54ch;
}


/* O aparelho desta página é maior que o padrão de 300px; `--phone-w` alimenta
   todos os cálculos internos (ilha, bezel, raio, área segura) e precisa
   acompanhar a largura real, senão as proporções saem levemente fora. */
.page-platforms .pf-stage--phone .device--phone { --phone-w: 320px; }

/* Gráfico ao vivo (TradingView) dentro do mockup do WebTrader — mais alto
   que o sparkline, para o gráfico avançado respirar. */
.page-platforms .pf-chart--live { min-height: 22rem; }
.page-platforms .pf-chart--hero.tv-host { min-height: 15rem; }