/* ============================================================================
   SITE 02 · «ORBIT» — COMPONENTES
   Autor: Agente de Design System · Segunda rodada (redesenho completo)
   ----------------------------------------------------------------------------
   Curvas, produto e confiança. Nenhum canto vivo em card, imagem, input ou
   botão. Botões são pílulas. Nenhum hex literal — tudo de tokens.css.

   Cada bloco traz o snippet HTML esperado. O catálogo completo, com receitas de
   seção, está em DESIGN-SYSTEM.md.

   SUMÁRIO
     01  .orbit          — o símbolo, em todos os seus papéis
     02  .btn            — pílulas
     03  .site-header    — cápsula flutuante, nav, drawer em folha curva
     04  .site-footer    — fecho curvo, colunas, bloco legal
     05  .page-curtain   — transição de página (o ponto dá uma volta)
     06  .arc-divider    — divisor em arco que se desenha
     07  .timbre         — anéis concêntricos de fundo
     08  .photo          — máscara curva, arco, véus
     09  .device         — mockups de produto (desktop e celular)
     10  .card           — cartões curvos e suas variantes
     11  .stat           — métricas com contador
     12  .data-table     — tabela em container arredondado
     13  .ticker         — fita de cotações em pílula
     14  .accordion
     15  .tabs
     16  formulário
     17  .badge .chip .pill .note
     18  .bullets .orbit-index .sectionnav .breadcrumb .quote .link-orbit
   ========================================================================== */


/* ==========================================================================
   §01 · .orbit — O SÍMBOLO
   --------------------------------------------------------------------------
   <span class="orbit" aria-hidden="true">
     <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
       <circle class="orbit__ring" cx="12" cy="12" r="8.5" stroke="currentColor" stroke-width="2"/>
       <circle class="orbit__dot"  cx="12" cy="3.5" r="2.75" fill="currentColor"/>
     </svg>
   </span>

   VARIANTES
     .orbit--sm     16px  · marcador de lista, chip
     .orbit         20px  · padrão inline
     .orbit--md     28px  · logotipo do header
     .orbit--lg     44px  · selo, numeração de passo
     .orbit--xl     72px  · fecho de footer, cortina
     .orbit--spin   o ponto dá voltas contínuas (12s, linear)
     .orbit--seal   anel preenchido de fundo, para selo
     .orbit--static opta por não reagir ao hover do host

   MICRO-INTERAÇÃO (papel 5): dentro de um host interativo, o ponto gira 180°
   em 400 ms. Hosts reconhecidos: .btn, .card, .nav__link, .chip, .tab,
   .accordion__trigger, .foot-link, .link-orbit e qualquer .orbit-host.
   ====================================================================== */

.orbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  color: inherit;
  line-height: 0;
}

.orbit svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

.orbit__ring {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: .85;
}

.orbit__dot {
  fill: currentColor;
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform var(--dur-slow) var(--ease-soft);
}

.orbit--sm { width: 1em;    height: 1em; }
.orbit--md { width: 1.75rem; height: 1.75rem; }
.orbit--lg { width: 2.75rem; height: 2.75rem; }
.orbit--xl { width: 4.5rem;  height: 4.5rem; }

.orbit--accent { color: var(--accent); }

/* Selo: anel de preenchimento leve atrás do símbolo */
.orbit--seal {
  background-color: var(--surface-tint);
  border-radius: var(--radius-pill);
  padding: .45em;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--accent);
}

.tone-deep .orbit--seal { color: var(--tint); }

@keyframes orbit-lap {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orbit--spin .orbit__dot {
  animation: orbit-lap var(--spin) linear infinite;
  transition: none;
}

/* Giro de 180° no hover / foco do host */
:is(.btn, .card, .card--link, .nav__link, .chip, .tab, .foot-link,
    .accordion__trigger, .link-orbit, .orbit-host, .step-card, .lang-pill__btn):hover
  .orbit:not(.orbit--static):not(.orbit--spin) .orbit__dot,
:is(.btn, .card, .card--link, .nav__link, .chip, .tab, .foot-link,
    .accordion__trigger, .link-orbit, .orbit-host, .step-card, .lang-pill__btn):focus-visible
  .orbit:not(.orbit--static):not(.orbit--spin) .orbit__dot {
  transform: rotate(180deg);
}

/* Logotipo — papel 1 */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--fg);
  font-family: var(--ff-display);
  font-weight: var(--fw-display-x);
  font-size: 1.0625rem;
  letter-spacing: var(--tr-h3);
  line-height: 1;
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-soft);
}

.logo .orbit { color: var(--accent); }
.logo:hover { color: var(--accent-strong); }
.logo--lg { font-size: 1.375rem; gap: var(--s-4); }
.logo__word { white-space: nowrap; display: inline-flex; }

/* Logotipo PRIMEROXY — monograma «P» cujo bojo é a própria órbita do site.
   Haste + anel em --accent (teal); o ponto, em --accent-2 (teal claro), é o
   satélite: abre uma passagem no anel e percorre a órbita.
   O furo é uma <mask> — o ponto e o furo compartilham a classe .mark__sat e
   giram juntos em torno do centro do bojo (16.5, 12.5).
     .logo__mark        28px no header · 44px no rodapé (.logo--lg)
     .logo__w1 / __w2   «Prime» em peso médio, «Roxy» em peso display + acento */
.logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
  line-height: 0;
}

.logo__mark svg { width: 100%; height: 100%; overflow: visible; fill: none; }

.logo__mark .mark__stem,
.logo__mark .mark__bowl { stroke: currentColor; }

.logo__mark .mark__dot { fill: var(--accent-2); }

.logo__mark .mark__sat {
  transform-box: view-box;
  transform-origin: 16.5px 12.5px;   /* centro do bojo — o satélite orbita o anel */
  transition: transform 700ms var(--ease-soft);
}

.logo:hover .logo__mark .mark__sat,
.logo:focus-visible .logo__mark .mark__sat { transform: rotate(360deg); }

.logo--lg .logo__mark { width: 2.75rem; height: 2.75rem; }

/* No rodapé o satélite dá voltas contínuas, como a órbita de antes */
.logo--lg .logo__mark .mark__sat {
  animation: orbit-lap var(--spin) linear infinite;
  transition: none;
}

.tone-deep .logo__mark { color: var(--paper); }

.logo__w1 { font-weight: var(--fw-medium); }
.logo__w2 { font-weight: var(--fw-display-x); color: var(--accent); }
.logo:hover .logo__w2 { color: var(--accent-strong); }


/* ==========================================================================
   §02 · .btn — PÍLULAS
   --------------------------------------------------------------------------
   <a class="btn btn--primary" href="accounts.html">
     <span data-i18n="cta.open">Open a live account</span>
     <span class="orbit orbit--sm" aria-hidden="true"><svg …></svg></span>
   </a>

     .btn--primary  acento sólido      .btn--ghost  contorno de 2px
     .btn--quiet    preenchimento leve .btn--link   texto + anel
     .btn--sm .btn--lg .btn--block .btn--icon
   ====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 44px;                       /* alvo de toque */
  padding: var(--s-3) var(--s-7);
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-soft),
    border-color var(--dur) var(--ease-soft),
    color var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft),
    transform var(--dur) var(--ease-soft);
}

.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Primário — contraste medido: paper sobre blue 6.50 : 1 · hover 12.91 : 1.
   Em .tone-deep: ink sobre sky 13.99 : 1 · hover ink sobre paper 17.25 : 1. */
.btn--primary {
  background-color: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: var(--shadow-2);
}

.btn--primary:hover {
  background-color: var(--accent-fill-hover);
  color: var(--on-accent);
  box-shadow: var(--shadow-3);
}

/* Contorno — hover preenche; o texto vira --on-accent no mesmo movimento */
.btn--ghost {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn--ghost:hover {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}

/* Preenchimento leve */
.btn--quiet {
  background-color: var(--surface-tint);
  border-color: transparent;
  color: var(--fg);
}

.btn--quiet:hover {
  background-color: var(--accent-fill);
  color: var(--on-accent);
}

/* Texto puro com anel */
.btn--link {
  min-height: 0;
  padding: var(--s-2) var(--s-2);
  border-color: transparent;
  background: none;
  color: var(--accent);
}

.btn--link:hover { color: var(--accent-strong); }

.btn--sm    { min-height: 40px; padding: var(--s-2) var(--s-5); font-size: var(--fs-xs); }
.btn--lg    { min-height: 56px; padding: var(--s-4) var(--s-9); font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

.btn--icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
}


/* ==========================================================================
   §03 · .site-header — CÁPSULA FLUTUANTE
   --------------------------------------------------------------------------
   ANATOMIA PRÓPRIA DESTE SITE — deliberadamente diferente do site 01 e da
   versão anterior: NÃO existe topbar. Uma única cápsula em pílula, destacada
   da borda da página, com logo · nav · ações. Os links de público (Personal,
   Institutional, Partners, Help) vivem no drawer e no rodapé.
   Abaixo de 1280px (Montserrat é largo; a cápsula completa só cabe a partir daí) a nav vira FOLHA INFERIOR de topo arredondado.
   ====================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  padding: var(--header-gap) var(--gutter) 0;
  transition: transform var(--dur-slow) var(--ease-soft);
  pointer-events: none;                    /* só a cápsula recebe o ponteiro */
}

.site-header.is-hidden { transform: translate3d(0, -140%, 0); }

.header-capsule {
  position: relative;
  z-index: var(--z-drawer);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  min-height: var(--header-h);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}

.site-header.is-stuck .header-capsule {
  box-shadow: var(--shadow-3);
  border-color: var(--tint);
}

.header-capsule__spacer { flex: 1 1 auto; }

/* Espaço que o conteúdo precisa reservar sob o header fixo. */
.header-offset { height: calc(var(--header-h) + var(--header-gap)); }

/* Fio de progresso de rolagem, colado na borda inferior da cápsula */
.header-progress {
  position: absolute;
  inset-inline: 12%;
  inset-block-end: -1px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--teal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .9;
}

/* ---------------------------------------------------------------- nav ---- */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  color: var(--slate);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.nav__link .orbit {
  width: 0;
  opacity: 0;
  /* a margem negativa anula o `gap` enquanto o anel está recolhido, para o
     rótulo não flutuar deslocado no estado de repouso */
  margin-inline-end: calc(var(--s-2) * -1);
  transition:
    width var(--dur) var(--ease-soft),
    opacity var(--dur) var(--ease-soft),
    margin-inline-end var(--dur) var(--ease-soft);
}

/* hover: slate 6.15 : 1 → blue-deep sobre sky 10.47 : 1 (o contraste SOBE) */
.nav__link:hover {
  background-color: var(--tint);
  color: var(--teal-deep);
}

.nav__link:hover .orbit,
.nav__link.is-current .orbit {
  width: 1em;
  opacity: 1;
  margin-inline-end: 0;
}

/* Página atual — o anel fica visível e o link ganha o acento (papel 6) */
.nav__link.is-current {
  background-color: var(--tint);
  color: var(--teal-deep);
  font-weight: var(--fw-bold);
}

.nav__link.is-current .orbit { color: var(--teal); }

/* --------------------------------------------------------- ações --------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Seletor de idioma em pílula segmentada */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--mist);
  border: var(--border) solid var(--line-raw);
}

.lang-pill__btn {
  min-width: 38px;
  min-height: 34px;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  color: var(--slate);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.lang-pill__btn:hover {
  background-color: var(--tint);
  color: var(--teal-deep);
}

/* ativo: paper sobre blue 6.50 : 1 */
.lang-pill__btn.is-active {
  background-color: var(--teal);
  color: var(--paper);
}

.lang-pill--invert {
  background-color: var(--deep-surface);
  border-color: var(--deep-line);
}

.lang-pill--invert .lang-pill__btn { color: var(--tint-soft); }

.lang-pill--invert .lang-pill__btn:hover {
  background-color: var(--tint);
  color: var(--ink);
}

.lang-pill--invert .lang-pill__btn.is-active {
  background-color: var(--tint);
  color: var(--ink);
}

/* Botão do drawer — hambúrguer inscrito no anel da órbita */
.nav-toggle {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: var(--border-2) solid var(--tint);
  border-radius: var(--radius-pill);
  background-color: var(--paper);
  color: var(--teal-deep);
  transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}

.nav-toggle:hover { background-color: var(--tint); border-color: var(--teal); }

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 17px;
  height: 11px;
}

.nav-toggle__bars i {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--dur) var(--ease-soft), opacity var(--dur-fast) linear;
}

.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 50%; margin-top: -1px; }
.nav-toggle__bars i:nth-child(3) { bottom: 0; }

.nav-open .nav-toggle__bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------------------------------------------------- drawer (mobile) ---- */

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: auto;
  background-color: var(--veil);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-soft), visibility 0s linear var(--dur-slow);
}

.nav-open .nav-scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav__extra { display: none; }

.aud-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.aud-rail__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.aud-rail__link:hover {
  background-color: var(--tint);
  color: var(--teal-deep);
}

.tone-deep .aud-rail__link { background-color: var(--deep-surface); color: var(--tint-soft); }
.tone-deep .aud-rail__link:hover { background-color: var(--tint); color: var(--ink); }

@media (max-width: 1279.98px) {
  :root { --header-h: 60px; }

  .nav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-drawer);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    max-height: 88vh;
    padding: var(--s-4) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
    background-color: var(--paper);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate3d(0, 100%, 0);
    visibility: hidden;
    transition:
      transform var(--dur-slow) var(--ease-soft),
      visibility 0s linear var(--dur-slow);
  }

  .nav-open .nav {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition-delay: 0s;
  }

  /* alça — a mesma curva do resto do site */
  .nav::before {
    content: '';
    display: block;
    width: 46px;
    height: 4px;
    margin: 0 auto var(--s-4);
    border-radius: var(--radius-pill);
    background-color: var(--line-raw);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
  }

  .nav__link {
    justify-content: flex-start;
    min-height: 52px;
    padding: var(--s-3) var(--s-5);
    font-size: var(--fs-lead);
    font-family: var(--ff-display);
    font-weight: var(--fw-display);
    letter-spacing: var(--tr-h3);
    color: var(--ink);
  }

  .nav__link .orbit { width: 1.25em; opacity: .35; margin-inline-end: 0; }
  .nav__link.is-current .orbit,
  .nav__link:hover .orbit { opacity: 1; }

  /* o rótulo da folha só existe no drawer; `.only-mobile` do base.css corta em
     900px, mas o drawer vai até 1279px — esta regra reconcilia a faixa */
  .nav .only-mobile { display: inline-flex; }

  .nav__extra {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-block-start: var(--s-5);
    border-top: var(--border) solid var(--line-raw);
  }

  .nav__extra .lang-pill { align-self: flex-start; }

  .header-actions .btn--ghost,
  .header-actions .lang-pill { display: none; }

  .nav-toggle { display: inline-flex; }
}

/* Abaixo de 560px a cápsula não comporta logo + CTA + botão do menu sem
   apertar o alvo de toque. O CTA continua a um toque de distância, no drawer. */
@media (max-width: 559.98px) {
  .header-actions .btn--primary { display: none; }
  .header-capsule { padding-inline-start: var(--s-4); }
  .logo { font-size: 1rem; }
}

/* Rótulo longo na folha inferior; na cápsula do desktop entra a versão curta */
.nav__label-short { display: none; }

@media (min-width: 1280px) {
  .nav { display: flex; align-items: center; gap: var(--s-4); }
  .nav-scrim { display: none; }
  .nav__label-full { display: none; }
  .nav__label-short { display: inline; }
}


/* ==========================================================================
   §04 · .site-footer
   --------------------------------------------------------------------------
   ANATOMIA PRÓPRIA: cartão de conversão curvo em bloco escuro, depois um
   split 4/8 (marca à esquerda · quatro colunas à direita), depois o cartão de
   regulação, depois o bloco legal. Não repete as 4 colunas iguais do site 01.
   ====================================================================== */

.site-footer {
  position: relative;
  background-color: var(--mist);
  color: var(--ink);
  padding-block: var(--sec) var(--s-8);
  overflow: hidden;
}

/* Fecho de conversão — cartão escuro de raio grande, com selo em órbita */
.footer-cta {
  position: relative;
  display: grid;
  gap: var(--gap);
  align-items: center;
  padding: clamp(var(--s-8), 5vw, var(--s-11));
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 900px) {
  .footer-cta { grid-template-columns: minmax(0, 1fr) auto; }
}

.footer-cta__title {
  font-size: var(--fs-h2);
  color: var(--paper);
  max-width: 20ch;
}

.footer-cta__lead {
  margin-block-start: var(--s-4);
  color: var(--tint-soft);
  max-width: 46ch;
}

.footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.footer-main {
  display: grid;
  gap: var(--gap-lg);
  margin-block-start: var(--s-11);
}

@media (min-width: 900px) {
  .footer-main { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.footer-main > * { min-width: 0; }

.footer-brand__tagline {
  margin-block-start: var(--s-4);
  color: var(--slate);
  max-width: 34ch;
}

.footer-brand__rail { margin-block-start: var(--s-6); }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

@media (min-width: 900px) {
  .footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.foot-col__title {
  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(--slate);
  margin-block-end: var(--s-4);
}

.foot-col__list { display: flex; flex-direction: column; gap: var(--s-1); }

.foot-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: var(--s-1) var(--s-3);
  margin-inline-start: calc(var(--s-3) * -1);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.foot-link .orbit {
  width: 0;
  opacity: 0;
  margin-inline-end: calc(var(--s-2) * -1);
  transition:
    width var(--dur) var(--ease-soft),
    opacity var(--dur) var(--ease-soft),
    margin-inline-end var(--dur) var(--ease-soft);
}

.foot-link:hover {
  background-color: var(--tint);
  color: var(--teal-deep);
}

.foot-link:hover .orbit { width: .85em; opacity: 1; margin-inline-end: 0; }

/* Cartão de regulação — placeholders de marca sempre visíveis */
.footer-reg {
  margin-block-start: var(--s-10);
  padding: var(--s-7);
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  border-radius: var(--radius-lg);
}

.footer-reg__list {
  display: grid;
  gap: var(--s-5);
  margin: 0;
}

@media (min-width: 640px) { .footer-reg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer-reg__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-reg__list > div { min-width: 0; }

.footer-reg__list dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--slate);
}

.footer-reg__list dd {
  margin-block-start: var(--s-2);
  font-weight: var(--fw-bold);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.footer-legal {
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-7);
  border-top: var(--border) solid var(--line-raw);
}

.footer-legal__risk {
  color: var(--slate);
  font-size: var(--fs-sm);
  max-width: 92ch;
}

.footer-legal__risk strong { color: var(--ink); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-block-start: var(--s-7);
}

.footer-bottom > * { min-width: 0; }

.footer-bottom__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--slate);
}

.footer-bottom__copy strong { color: var(--ink); }


/* ==========================================================================
   §05 · .page-curtain — TRANSIÇÃO DE PÁGINA
   --------------------------------------------------------------------------
   Na saída a cortina só fecha (420 ms); na chegada o satélite dá UMA volta
   (--dur-lap) e a cortina dissolve.
   SEM textura, SEM ruído, SEM barra de progresso, SEM porcentagem.
   (A versão com textura em movimento do site 03 virou chiado de TV e foi
   reprovada. Aqui a superfície que se move é lisa.)

   <div class="page-curtain" aria-hidden="true"></div>
   O site.js injeta o anel dentro dela se estiver vazia — o boilerplate pode
   ficar exatamente como está no BUILD-CONVENTIONS.
   ====================================================================== */

.page-curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--night);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-curtain) var(--ease-soft),
    visibility 0s linear var(--dur-curtain);
}

.page-curtain__orbit {
  width: 72px;
  height: 72px;
  color: var(--tint);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}

.page-curtain__orbit svg { width: 100%; height: 100%; fill: none; }

.page-curtain__orbit .orbit__ring { stroke: currentColor; stroke-width: 2; opacity: .5; }
.page-curtain__orbit .orbit__dot  { fill: currentColor; transform-box: view-box; transform-origin: 50% 50%; }

/* monograma na cortina: haste e anel brancos, satélite teal claro */
.page-curtain__orbit .mark__stem,
.page-curtain__orbit .mark__bowl { stroke: var(--paper); opacity: 1; }
.page-curtain__orbit .mark__dot  { fill: var(--teal-bright); }
.page-curtain__orbit .mark__sat  { transform-box: view-box; transform-origin: 16.5px 12.5px; }

/* saída: cobre a tela e o ponto completa a volta */
.is-leaving .page-curtain {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.is-leaving .page-curtain__orbit { opacity: 1; }

/* na saída o satélite fica parado: a volta única acontece na página
   seguinte (html.is-arriving), para o carregamento ter UMA volta no total */
.is-leaving .page-curtain__orbit .orbit__dot,
.is-leaving .page-curtain__orbit .mark__sat { animation: none; }

/* entrada: já opaca no load, dissolve sem chamar atenção */
.is-entering .page-curtain {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* segurando a cortina (html.tv-hold no primeiro acesso, ou html.is-arriving
   na chegada por navegação interna — classe posta por um script inline no
   <head>, antes da primeira pintura, para a cortina de saída da página
   anterior emendar com a de entrada desta). A duração do carregamento É uma
   volta do satélite: começa na primeira pintura e, no animationend, o
   motion.js solta a cortina com a transição padrão. */
.is-holding .page-curtain { opacity: 1; visibility: visible; }
.is-arriving .page-curtain { opacity: 1; visibility: visible; transition: none; }

.is-entering .page-curtain__orbit,
.is-holding .page-curtain__orbit,
.is-arriving .page-curtain__orbit { opacity: 1; }

.is-arriving .page-curtain__orbit .mark__sat,
.is-holding .page-curtain__orbit .mark__sat { animation: orbit-lap var(--dur-lap) var(--ease-in-out) 1 both; }


/* ==========================================================================
   §06 · .arc-divider — DIVISOR EM ARCO
   --------------------------------------------------------------------------
   UM arco limpo (não onda de vários picos). Transiciona a cor de fundo entre
   duas seções e desenha-se ao entrar na viewport (stroke-dashoffset).

   <div class="arc-divider arc-divider--paper-mist" aria-hidden="true">
     <svg class="arc-divider__svg" viewBox="0 0 1440 100" preserveAspectRatio="none">
       <path class="arc-divider__fill" d="M0,100 C480,0 960,0 1440,100 Z"/>
       <path class="arc-divider__stroke" d="M0,100 C480,0 960,0 1440,100"
             pathLength="1" vector-effect="non-scaling-stroke"/>
     </svg>
   </div>

   Pares prontos: paper-mist · mist-paper · paper-deep · deep-paper ·
                  mist-deep · deep-mist · paper-sky · sky-paper
   `.arc-divider--flip` inverte a curvatura (arco descendo).
   ====================================================================== */

.arc-divider {
  --arc-from: var(--paper);
  --arc-to: var(--mist);
  --arc-line: var(--tint);
  position: relative;
  display: block;
  width: 100%;
  height: var(--arc-h);
  background-color: var(--arc-from);
  line-height: 0;
  overflow: hidden;
}

.arc-divider__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.arc-divider__fill {
  fill: var(--arc-to);
  stroke: none;
}

.arc-divider__stroke {
  fill: none;
  stroke: var(--arc-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms var(--ease-soft);
}

.arc-divider.is-drawn .arc-divider__stroke { stroke-dashoffset: 0; }

.arc-divider--flip { transform: scaleY(-1); }

.arc-divider--paper-mist { --arc-from: var(--paper); --arc-to: var(--mist);      --arc-line: var(--tint); }
.arc-divider--mist-paper { --arc-from: var(--mist);  --arc-to: var(--paper);     --arc-line: var(--tint); }
.arc-divider--paper-sky  { --arc-from: var(--paper); --arc-to: var(--tint);       --arc-line: var(--teal); }
.arc-divider--tint-paper  { --arc-from: var(--tint);   --arc-to: var(--paper);     --arc-line: var(--teal); }
.arc-divider--paper-deep { --arc-from: var(--paper); --arc-to: var(--night); --arc-line: var(--teal); }
.arc-divider--deep-paper { --arc-from: var(--night); --arc-to: var(--paper); --arc-line: var(--tint); }
.arc-divider--mist-deep  { --arc-from: var(--mist);  --arc-to: var(--night); --arc-line: var(--teal); }
.arc-divider--deep-mist  { --arc-from: var(--night); --arc-to: var(--mist);  --arc-line: var(--tint); }

.arc-divider--tall  { height: calc(var(--arc-h) * 1.5); }
.arc-divider--short { height: calc(var(--arc-h) * .6); }


/* ==========================================================================
   §07 · .timbre — PAPEL TIMBRADO EM ANÉIS CONCÊNTRICOS
   --------------------------------------------------------------------------
   Papel 2 do símbolo. Discreto: opacidade .05–.07, sempre ATRÁS do conteúdo,
   nunca sobre uma linha de texto. Quem usa reserva folga no container
   (`padding` ou `.parallax-room`) — o ADENDO proíbe decorativo que encosta.

   <div class="timbre timbre--right" aria-hidden="true" data-parallax="0.08">
     <svg viewBox="0 0 600 600" aria-hidden="true" focusable="false">
       <g fill="none" stroke="currentColor" stroke-width="1.5">
         <circle cx="300" cy="300" r="70"/>  … r=130, 190, 250, 300
       </g>
       <circle cx="300" cy="50" r="14" fill="currentColor"/>
     </svg>
   </div>
   ====================================================================== */

.timbre {
  position: absolute;
  z-index: var(--z-timbre);
  width: min(52rem, 92%);
  aspect-ratio: 1;
  color: var(--teal);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

.timbre svg { width: 100%; height: 100%; fill: none; }

.timbre--right  { inset-block-start: -12%; inset-inline-end: -18%; }
.timbre--left   { inset-block-start: -10%; inset-inline-start: -22%; }
.timbre--bottom { inset-block-end: -28%; inset-inline-end: -14%; }
.timbre--center { inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }

.timbre--soft   { opacity: .04; }
.timbre--strong { opacity: .07; }

.tone-deep .timbre { color: var(--tint); opacity: .1; }

/* Todo bloco que hospeda timbre precisa criar contexto e elevar o conteúdo. */
.has-timbre { position: relative; overflow: hidden; isolation: isolate; }
.has-timbre > .container,
.has-timbre > .timbre-content { position: relative; z-index: var(--z-base); }


/* ==========================================================================
   §08 · .photo — FOTOGRAFIA
   --------------------------------------------------------------------------
   <figure class="photo photo--arch photo--tall">
     <img src="assets/img/tower-glass-01.jpg" width="1600" height="1200"
          alt="Curved glass façade in black and white"
          data-i18n-attr="alt:hm.photo.tower.alt"
          loading="lazy" decoding="async">
   </figure>

   Hero: trocar por loading="eager" fetchpriority="high".
   Tratamento deste site: máscara curva + saturate(.92).
   Texto sobre foto SEMPRE com véu (.photo--veil-*) ou painel opaco (.photo__panel).
   ====================================================================== */

.photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--mist);
  isolation: isolate;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
}

/* topo em arco — pelo menos uma variante por página */
.photo--arch { border-radius: var(--radius-arch); }
.photo--arch-b { border-radius: var(--radius-lg) var(--radius-lg) 999px 999px; }
.photo--pill { border-radius: var(--radius-pill); }

.photo--wide   { aspect-ratio: 16 / 9; }
.photo--pano   { aspect-ratio: 21 / 9; }
.photo--square { aspect-ratio: 1; }
.photo--tall   { aspect-ratio: 3 / 4; }
.photo--portrait { aspect-ratio: 2 / 3; }

/* Véus — ink com opacidade. Nenhum gradiente colorido. */
.photo--veil::after,
.photo--veil-bottom::after,
.photo--veil-deep::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo--veil::after { background-color: var(--veil); }

.photo--veil-bottom::after {
  background-image: linear-gradient(to top, var(--veil-hard) 0%, var(--veil-soft) 52%, transparent 82%);
}

.photo--veil-deep::after { background-color: var(--veil-deep); }

/* Conteúdo sobre a foto — fica acima do véu */
.photo__over {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-base);
  padding: clamp(var(--s-5), 3vw, var(--s-8));
  color: var(--paper);
}

.photo__over .eyebrow { color: var(--tint); }

/* Painel opaco — a garantia de 4.5:1 quando o texto é longo */
.photo__panel {
  position: absolute;
  inset-inline-start: clamp(var(--s-4), 2vw, var(--s-7));
  inset-block-end: clamp(var(--s-4), 2vw, var(--s-7));
  z-index: var(--z-base);
  max-width: min(30rem, calc(100% - var(--s-9)));
  padding: var(--s-6);
  background-color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  color: var(--ink);
}

/* Anel recortado na quina da imagem — papel 7 do símbolo */
.photo__ring {
  position: absolute;
  inset-block-start: calc(var(--s-6) * -1);
  inset-inline-end: calc(var(--s-6) * -1);
  z-index: var(--z-base);
  width: clamp(4.5rem, 9vw, 7.5rem);
  height: clamp(4.5rem, 9vw, 7.5rem);
  color: var(--teal);
  pointer-events: none;
}

.photo__ring svg { width: 100%; height: 100%; fill: none; }

@media (max-width: 639.98px) {
  /* no mobile o anel não pode sangrar para fora da viewport: recolhe para dentro */
  .photo__ring {
    inset-block-start: var(--s-3);
    inset-inline-end: var(--s-3);
    width: 3.25rem;
    height: 3.25rem;
    color: var(--paper);
    opacity: .9;
  }
}

/* Moldura curva com respiro — a foto ganha uma borda de papel */
.photo-frame {
  padding: var(--s-3);
  background-color: var(--paper);
  border-radius: calc(var(--radius-lg) + var(--s-3));
  box-shadow: var(--shadow-2);
}

.photo-frame .photo { border-radius: var(--radius-lg); }
.photo-frame--arch { border-radius: 999px 999px calc(var(--radius-lg) + var(--s-3)) calc(var(--radius-lg) + var(--s-3)); }
.photo-frame--arch .photo { border-radius: var(--radius-arch); }

.photo-credit {
  margin-block-start: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* ==========================================================================
   §09 · .device — MOCKUPS DE PRODUTO  (obrigatórios neste site)
   --------------------------------------------------------------------------
   Desenhados em CSS/SVG, sem imagem externa. A MOLDURA e os BLOCOS BÁSICOS
   vêm daqui; o conteúdo (watchlist, gráfico, boleta, posições) é montado pelo
   agente de página combinando os blocos .dv-*.

   DESKTOP
   <div class="device device--desktop" role="img"
        aria-label="Illustration of the desktop platform" data-i18n-attr="aria-label:hm.mock.desk.alt">
     <div class="device__bar" aria-hidden="true">
       <span class="device__dots"><i></i><i></i><i></i></span>
       <span class="device__title">Terminal</span>
     </div>
     <div class="device__screen"> … blocos .dv-* … </div>
   </div>

   CELULAR
   <div class="device device--phone" role="img" aria-label="…">
     <span class="device__notch" aria-hidden="true"></span>
     <div class="device__screen"> … </div>
   </div>
   ====================================================================== */

.device {
  position: relative;
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  isolation: isolate;
}

.device--desktop {
  border-radius: var(--radius-lg);
  width: 100%;
}

.device__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background-color: var(--mist);
  border-block-end: var(--border) solid var(--line-raw);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.device__dots { display: inline-flex; gap: 6px; }

.device__dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background-color: var(--line-strong);
  opacity: .55;
}

.device__title {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--slate);
}

.device__chrome {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.device__screen {
  background-color: var(--paper);
  padding: var(--s-4);
}

/* ---------------------------------------------------------------------------
   CELULAR — proporções do iPhone Pro Max
   ---------------------------------------------------------------------------
   Tela 440×956pt (2,173:1) · raio de canto ~62pt (14,1% da largura) ·
   moldura ~12pt · Dynamic Island 125×37pt a 11pt do topo · barra de gestos
   140×5pt. Tudo é derivado de `--phone-w`, então o aparelho mantém as
   proporções em qualquer tamanho — basta redefinir essa variável.

   <div class="device device--phone" role="img" aria-label="…">
     <span class="device__notch" aria-hidden="true"></span>
     <div class="device__screen"> … blocos .dv-* … </div>
   </div>
   --------------------------------------------------------------------------- */

.device--phone {
  /* `--phone-w` é SEMPRE um px puro: ele alimenta os cálculos internos.
     Percentual aqui quebraria tudo — `%` não é válido em `border-width`, e em
     `padding` refere-se à largura do PAI, não à do próprio elemento. A adaptação
     à tela vive só na propriedade `width`, logo abaixo. */
  --phone-w: 300px;
  --phone-bezel: calc(var(--phone-w) * .027);
  --phone-radius: calc(var(--phone-w) * .141);
  /* topo da Dynamic Island (2,5%) + altura dela (8,4%) + respiro real */
  --phone-safe-top: calc(var(--phone-w) * .175);

  width: min(var(--phone-w), 100%);
  aspect-ratio: 440 / 956;
  border-radius: var(--phone-radius);
  border: var(--phone-bezel) solid var(--device-frame);
  background-color: var(--device-frame);
  box-shadow: var(--shadow-4), inset 0 0 0 1px var(--device-edge);
  padding: 0;
  overflow: hidden;
}

.device--phone .device__screen {
  position: relative;
  block-size: 100%;
  border-radius: calc(var(--phone-radius) - var(--phone-bezel));
  overflow: hidden;
  background-color: var(--device-screen);
  /* o respiro superior existe para o conteúdo NUNCA encostar na ilha */
  padding: var(--phone-safe-top) calc(var(--phone-w) * .058) calc(var(--phone-w) * .085);
  display: flex;
  flex-direction: column;
  gap: calc(var(--phone-w) * .042);
  min-height: 0;
}

/* O conteúdo do app ocupa a tela inteira: sem isto sobra uma faixa morta acima
   da barra de gestos, e o mockup deixa de parecer um aparelho em uso. */
.device--phone .device__screen > * {
  flex: 1 1 auto;
  min-block-size: 0;
  align-content: space-between;   /* distribui os blocos quando o filho é grid */
}

/* O gráfico ganha altura generosa, mas NÃO estica livremente: o SVG do sparkline
   usa `preserveAspectRatio="none"`, então esticar deformava o ponto final —
   o círculo virava elipse. A folga restante é distribuída pelos intervalos
   (`align-content: space-between` acima), não pelo gráfico. */
.device--phone .dv-chart {
  /* O sparkline tem viewBox 100×40 e `preserveAspectRatio="none"`: qualquer caixa
     com outra razão estica o eixo Y e transforma o ponto final (um `circle`) numa
     elipse. Casando a caixa com o viewBox, o desenho fica fiel. A folga restante
     é distribuída pelos intervalos, não pelo gráfico. */
  block-size: auto;
  flex: 0 0 auto;
}

/* A proporção vai no próprio SVG: várias páginas redefinem a altura do wrapper,
   e só o elemento gráfico garante que o eixo Y não estique. */
.device--phone .dv-chart > svg,
.device--phone svg.dv-chart {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 100 / 40;
}

/* Botões de compra e venda: cores de sinal cheias, não os tons de texto. */
.device--phone .dv-buy,
.device--phone .dv-sell {
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: .01em;
}
.device--phone .dv-buy  { background-color: var(--up);   color: var(--paper); }
.device--phone .dv-sell { background-color: var(--down); color: var(--paper); }

/* --- Dynamic Island ------------------------------------------------------- */
.device__notch {
  position: absolute;
  inset-block-start: calc(var(--phone-w) * .025);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  inline-size: calc(var(--phone-w) * .284);
  block-size: calc(var(--phone-w) * .084);
  border-radius: var(--radius-pill);
  background-color: var(--device-island);
}

/* --- barra de status: hora à esquerda, ícones à direita ------------------- */
.device--phone .device__screen::before {
  content: '9:41';
  position: absolute;
  inset-block-start: calc(var(--phone-w) * .042);
  inset-inline-start: calc(var(--phone-w) * .088);
  z-index: 2;
  font-family: var(--ff-body);
  font-size: calc(var(--phone-w) * .042);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
}

.device--phone .device__screen::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--phone-w) * .045);
  inset-inline-end: calc(var(--phone-w) * .078);
  z-index: 2;
  inline-size: calc(var(--phone-w) * .175);
  block-size: calc(var(--phone-w) * .0315);
  background-color: var(--device-signal);
  -webkit-mask-image: var(--phone-status-icons);
          mask-image: var(--phone-status-icons);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center right;
          mask-position: center right;
}

/* --- barra de gestos ------------------------------------------------------ */
.device--phone > .device__screen ~ .device__home,
.device--phone::after {
  content: '';
  position: absolute;
  inset-block-end: calc(var(--phone-w) * .020);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 4;
  inline-size: calc(var(--phone-w) * .318);
  block-size: calc(var(--phone-w) * .0115);
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  opacity: .30;
}

/* Aparelho pousado sobre o canto do desktop — composição de produto */
.device-stack { position: relative; }

.device-stack .device--phone {
  --phone-w: 196px;
  position: absolute;
  inset-block-end: calc(var(--s-9) * -1);
  inset-inline-end: calc(var(--s-6) * -1);
  width: min(var(--phone-w), 39%);
}

@media (max-width: 639.98px) {
  .device-stack .device--phone {
    --phone-w: 232px;
    position: static;
    margin: var(--s-7) auto 0;
    width: min(var(--phone-w), 78%);
  }
}

/* ------------------------------------------------- blocos internos .dv-* -- */

.dv-grid { display: grid; gap: var(--s-3); }

@media (min-width: 640px) {
  .dv-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
  .dv-grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}

.dv-grid > * { min-width: 0; }

.dv-panel {
  background-color: var(--mist);
  border: var(--border) solid var(--line-raw);
  border-radius: var(--radius);
  padding: var(--s-3);
}

.dv-panel--plain { background-color: var(--paper); }

.dv-label {
  font-family: var(--ff-mono);
  font-size: .625rem;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--slate);
  margin-block-end: var(--s-2);
}

.dv-list { display: flex; flex-direction: column; gap: 2px; }

.dv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

.dv-row > * { min-width: 0; }

.dv-row.is-active { background-color: var(--tint); }

.dv-row__sym {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  color: var(--ink);
  white-space: nowrap;
}

.dv-row__val {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  white-space: nowrap;
}

.dv-row__chg {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: .6875rem;
  white-space: nowrap;
}

.dv-row__chg.is-up   { color: var(--up-ink); }
.dv-row__chg.is-down { color: var(--down-ink); }

/* Gráfico — o site.js desenha a linha a partir de data-spark="4,9,7,12,…" */
.dv-chart {
  position: relative;
  width: 100%;
  min-height: 8rem;
  border-radius: var(--radius);
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  overflow: hidden;
}

.dv-chart--tall { min-height: 12rem; }

.dv-chart svg { width: 100%; height: 100%; display: block; }

.dv-chart__area { fill: var(--tint); opacity: .55; }

.dv-chart__line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dv-chart__grid {
  stroke: var(--line-raw);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dv-chart__dot { fill: var(--teal); }

/* Boleta de ordem */
.dv-ticket { display: flex; flex-direction: column; gap: var(--s-2); }

.dv-ticket__side { display: flex; gap: var(--s-2); }

.dv-ticket__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
}

.dv-ticket__btn--buy  { background-color: var(--up-ink); }
.dv-ticket__btn--sell { background-color: var(--down-ink); }

.dv-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  background-color: var(--paper);
  border: var(--border) solid var(--line-raw);
  font-family: var(--ff-mono);
  font-size: .6875rem;
  color: var(--slate);
}

.dv-field strong { color: var(--ink); font-weight: var(--fw-medium); }

/* Barra de abas do mockup */
.dv-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; }

.dv-tab {
  padding: 4px var(--s-3);
  border-radius: var(--radius-pill);
  background-color: var(--mist);
  font-family: var(--ff-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}

.dv-tab.is-active { background-color: var(--teal); color: var(--paper); }

/* Métrica dentro do mockup */
.dv-stat { display: flex; flex-direction: column; gap: 2px; }

.dv-stat__val {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.dv-stat__lab {
  font-family: var(--ff-mono);
  font-size: .625rem;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--slate);
}

/* Barra inferior do celular */
.dv-navbar {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-block-start: auto;
  padding: var(--s-3) var(--s-2) 0;
  border-block-start: var(--border) solid var(--line-raw);
}

.dv-navbar i {
  width: 22px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--line-strong);
  opacity: .4;
}

.dv-navbar i:first-child { background-color: var(--teal); opacity: 1; }


/* ==========================================================================
   §10 · .card — CARTÕES CURVOS
   --------------------------------------------------------------------------
   <article class="card">
     <p class="eyebrow">…</p>
     <h3 class="card__title">…</h3>
     <p class="card__body">…</p>
     <p class="card__foot"><a class="link-orbit" href="markets.html">…</a></p>
   </article>

   Cartão inteiro clicável: .card--link + <a class="card__hit" href="…">
   ====================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(var(--s-6), 2.4vw, var(--s-8));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft),
    border-color var(--dur) var(--ease-soft);
}

.card > * { min-width: 0; }

.card--link:hover,
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--tint);
}

.card__hit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__hit:focus-visible { outline: none; }
.card--link:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

.card__title { font-size: var(--fs-h3); }
.card__body  { color: var(--fg-muted); }
.card__foot  { margin-block-start: auto; padding-block-start: var(--s-3); }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.card--tint  { background-color: var(--surface-tint); border-color: transparent; box-shadow: none; }
.card--flat  { background-color: var(--surface-2); border-color: transparent; box-shadow: none; }
.card--plain { background: none; border-color: var(--line); box-shadow: none; }

/* Destaque — o tier Professional, a classe de ativo em evidência */
.card--feature {
  border-color: var(--accent);
  border-width: var(--border-2);
  box-shadow: var(--shadow-3);
}

.card--pad-lg { padding: clamp(var(--s-8), 4vw, var(--s-11)); }
.card--tall   { min-height: 100%; }

/* Cartão sobre bloco escuro */
.tone-deep .card {
  background-color: var(--deep-surface);
  border-color: var(--deep-line);
  box-shadow: none;
}

.tone-deep .card--feature { border-color: var(--deep-line-hover); }

/* Cartão de passo — órbita numerada (papel 6) */
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-6), 2.4vw, var(--s-8));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}

.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }

.step-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.step-card__n {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  color: var(--accent);
}

.step-card__title { font-size: var(--fs-h3); }
.step-card__body  { color: var(--fg-muted); }


/* ==========================================================================
   §11 · .stat — MÉTRICAS
   --------------------------------------------------------------------------
   <div class="stat">
     <p class="stat__value"><span data-count-to="1200" data-count-suffix="+">1,200+</span></p>
     <p class="stat__label" data-i18n="hm.stat.instruments">Global instruments</p>
   </div>
   ====================================================================== */

.stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

@media (min-width: 900px) { .stat-band--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stat-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stat-band > * { min-width: 0; }

.stat { display: flex; flex-direction: column; gap: var(--s-2); }

.stat__value {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--fg);
}

.stat__value .unit { color: var(--accent); }

.stat__label {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.stat__note {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* variante em pílula, para a faixa --mist */
.stat--pill {
  padding: var(--s-6) var(--s-7);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
}


/* ==========================================================================
   §12 · .data-table — TABELA EM CONTAINER ARREDONDADO
   --------------------------------------------------------------------------
   <div class="table-scroll" role="region" tabindex="0"
        aria-label="Forex instruments" data-i18n-attr="aria-label:mk.fx.tableAria">
     <table class="data-table">
       <caption class="sr-only" data-i18n="mk.fx.caption">…</caption>
       <thead><tr><th scope="col" data-i18n="ui.col.symbol">Symbol</th>…</tr></thead>
       <tbody><tr><th scope="row">EUR/USD</th><td class="num">0.0 – 0.6 pip</td>…</tr></tbody>
     </table>
   </div>
   ====================================================================== */

.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table caption:not(.sr-only) {
  padding: var(--s-5) var(--s-6) 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.data-table thead th {
  position: sticky;
  inset-block-start: 0;
  padding: var(--s-4) var(--s-5);
  background-color: var(--surface-2);
  border-block-end: var(--border) solid var(--line);
  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);
  white-space: nowrap;
}

.data-table tbody th,
.data-table tbody td {
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--border) solid var(--line);
  vertical-align: middle;
}

.data-table tbody th {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  color: var(--fg);
  white-space: nowrap;
}

.data-table tbody td { color: var(--fg-muted); }

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-block-end: 0; }

.data-table tbody tr:nth-child(even) { background-color: var(--zebra); }

.data-table tbody tr:hover { background-color: var(--surface-tint); }

.data-table .num {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg);
}

.data-table--compact tbody th,
.data-table--compact tbody td,
.data-table--compact thead th { padding: var(--s-3) var(--s-4); }

.data-table--wide { min-width: 52rem; }

/* ✓ / — sempre com texto acessível ao lado (.sr-only) */
.tick-yes { color: var(--sig-up-text); font-weight: var(--fw-bold); }
.tick-no  { color: var(--fg-faint); }

.table-note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}


/* ==========================================================================
   §13 · .ticker — FITA DE COTAÇÕES EM PÍLULA
   --------------------------------------------------------------------------
   <div class="ticker" data-marquee data-marquee-speed="30">
     <div class="ticker__track" data-marquee-track>
       <span class="ticker__item">
         <span class="ticker__sym">EUR/USD</span>
         <span class="ticker__val" data-tick="1.0854" data-tick-decimals="4">1.0854</span>
         <span class="ticker__chg" data-tick-change="0.06">+0.06%</span>
       </span>
       …
     </div>
   </div>
   <p class="ticker__note" data-i18n="ui.demoData">Illustrative delayed demo data.</p>
   ====================================================================== */

.ticker {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--s-2);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  /* as pontas dissolvem na cor do bloco — curvatura sem corte seco */
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-solid) 5%, var(--mask-solid) 95%, transparent);
          mask-image: linear-gradient(to right, transparent, var(--mask-solid) 5%, var(--mask-solid) 95%, transparent);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  will-change: transform;
}

.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
}

.ticker__sym {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ticker__val {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--fg);
  padding-inline: 2px;
}

.ticker__chg {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}

.ticker__chg.is-up   { color: var(--sig-up-text); }
.ticker__chg.is-down { color: var(--sig-down-text); }

.ticker__note {
  margin-block-start: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: center;
}

.tone-deep .ticker { background-color: var(--deep-surface); border-color: var(--deep-line); box-shadow: none; }
.tone-deep .ticker__item { background-color: var(--night); }


/* ==========================================================================
   §14 · .accordion
   --------------------------------------------------------------------------
   <div class="accordion" data-accordion data-accordion-single>
     <div class="accordion__item" data-accordion-item>
       <h3 class="accordion__h">
         <button class="accordion__trigger" type="button" data-accordion-trigger
                 aria-expanded="false" aria-controls="faq-1">
           <span class="orbit orbit--sm" aria-hidden="true"><svg …></svg></span>
           <span data-i18n="ct.faq.q1">…</span>
         </button>
       </h3>
       <div class="accordion__panel" id="faq-1" data-accordion-panel hidden>
         <div class="accordion__body"><p data-i18n="ct.faq.a1">…</p></div>
       </div>
     </div>
   </div>
   ====================================================================== */

.accordion { display: flex; flex-direction: column; gap: var(--s-3); }

.accordion__item {
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}

.accordion__item.is-open { border-color: var(--accent); box-shadow: var(--shadow-2); }

.accordion__h { margin: 0; font-size: inherit; }

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 60px;
  padding: var(--s-5) var(--s-6);
  text-align: left;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-h3);
  color: var(--fg);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.accordion__trigger .orbit { color: var(--accent); }

.accordion__trigger:hover { background-color: var(--surface-tint); }

.accordion__item.is-open .accordion__trigger .orbit__dot { transform: rotate(180deg); }

.accordion__panel {
  height: 0;
  overflow: hidden;
  transition: height var(--dur-slow) var(--ease-soft);
}

.accordion__body {
  padding: 0 var(--s-6) var(--s-6);
  color: var(--fg-muted);
}

.accordion__body > * + * { margin-block-start: var(--s-3); }


/* ==========================================================================
   §15 · .tabs
   --------------------------------------------------------------------------
   <div class="tabs" data-tabs>
     <div class="tabs__list" role="tablist" aria-label="Asset classes">
       <button class="tab" type="button" role="tab" data-tab="fx" aria-selected="true">FX</button>
     </div>
     <section class="tabs__panel" role="tabpanel" data-tabpanel="fx">…</section>
   </div>
   ====================================================================== */

.tabs { display: flex; flex-direction: column; gap: var(--gap); }

.tabs__list {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background-color: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.tab:hover { background-color: var(--surface-tint); color: var(--fg); }

.tab[aria-selected='true'],
.tab.is-active {
  background-color: var(--accent-fill);
  color: var(--on-accent);
  font-weight: var(--fw-bold);
}

.tabs__panel[hidden] { display: none; }


/* ==========================================================================
   §16 · FORMULÁRIO
   --------------------------------------------------------------------------
   <form class="form" data-form novalidate>
     <div class="field">
       <label class="field__label" for="ct-name" data-i18n="ct.form.name">Full name</label>
       <input class="input" id="ct-name" name="name" type="text" required
              aria-describedby="err-name">
       <p class="field__error" id="err-name" data-form-error="name" role="alert" hidden></p>
     </div>
     …
     <p class="form-success" data-form-success hidden data-i18n="form.success">…</p>
   </form>
   ====================================================================== */

.form { display: flex; flex-direction: column; gap: var(--s-5); }

.form-grid { display: grid; gap: var(--s-5); }

@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-grid > * { min-width: 0; }

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--fg);
}

.field__hint { font-size: var(--fs-xs); color: var(--fg-faint); }

.input,
.textarea,
.select {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  background-color: var(--paper);
  border: var(--border) solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}

.textarea {
  min-height: 9rem;
  padding-block: var(--s-4);
  resize: vertical;
  line-height: 1.55;
}

.input::placeholder,
.textarea::placeholder { color: var(--muted-ink); }

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--teal); }

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--teal);
}

.input.has-error,
.textarea.has-error,
.select.has-error { border-color: var(--down-ink); border-width: var(--border-2); }

/* Select com seta desenhada em CSS — sem imagem, sem hex */
.select-wrap { position: relative; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--s-9);
  cursor: pointer;
}

.select-wrap::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--s-5);
  inset-block-start: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  border-radius: 1px;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--down-ink);
}

.field__error[hidden] { display: none; }

/* Checkbox de consentimento — caixa curva */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.checkbox input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-block-start: 2px;
  border-radius: var(--radius-sm);
  accent-color: var(--teal);
  cursor: pointer;
}

.form-success {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  background-color: var(--surface-tint);
  border-radius: var(--radius);
  color: var(--teal-deep);
  font-weight: var(--fw-medium);
}

.form-success[hidden] { display: none; }

.form.is-sent .form-success { box-shadow: var(--shadow-2); }


/* ==========================================================================
   §17 · .badge .chip .pill .note
   ====================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4);
  border-radius: var(--radius-pill);
  background-color: var(--surface-tint);
  color: var(--teal-deep);           /* 10.47 : 1 sobre --tint */
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--accent { background-color: var(--teal); color: var(--paper); }
.badge--up   { background-color: transparent; color: var(--sig-up-text); }
.badge--down { background-color: transparent; color: var(--sig-down-text); }
.badge--quiet { background-color: var(--surface-2); color: var(--fg-muted); }

.tone-deep .badge { background-color: var(--deep-surface); color: var(--tint); }
.tone-deep .badge--accent { background-color: var(--tint); color: var(--ink); }

/* Chip de confiança — pílula com órbita, usada sob os CTAs do hero */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  color: var(--fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft);
}

.chip .orbit { color: var(--accent); }

.chip:hover { border-color: var(--accent); }

.tone-deep .chip { background-color: var(--deep-surface); border-color: var(--deep-line); }

/* Ponto de status pulsante */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--sig-up);
  animation: orbit-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes orbit-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.72); }
}

/* Nota / disclaimer — bloco curvo com anel à esquerda */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background-color: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.note .orbit { color: var(--accent); margin-block-start: .15em; }

.note--accent { background-color: var(--surface-tint); color: var(--teal-deep); }

.tone-deep .note { background-color: var(--deep-surface); color: var(--tint-soft); }


/* ==========================================================================
   §18 · MARCADORES, ÍNDICE, NAVEGAÇÃO DE SEÇÃO, CITAÇÃO, LINK
   ====================================================================== */

/* Marcador de lista — papel 4 do símbolo. A órbita substitui o bullet. */
.bullets { display: flex; flex-direction: column; gap: var(--s-4); }

.bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  min-width: 0;
}

.bullets .orbit {
  flex: 0 0 auto;
  margin-block-start: .18em;
  color: var(--accent);
}

.bullets--tight { gap: var(--s-2); }
.bullets--tight li { gap: var(--s-3); }

.bullets__title { font-weight: var(--fw-bold); color: var(--fg); }
.bullets__body  { color: var(--fg-muted); }

/* Numeração de seção `◉ 01` — papel 6 */
.orbit-index {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  color: var(--accent);
}

.orbit-index__n { color: var(--fg-muted); }

/* Índice lateral com indicador de seção ativa (site.js · [data-section-nav]) */
.sectionnav {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--header-gap) + var(--s-6));
  display: none;
  flex-direction: column;
  gap: var(--s-1);
}

@media (min-width: 900px) { .sectionnav { display: flex; } }

.sectionnav__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

.sectionnav__link .orbit {
  color: var(--line-2);
  transition: color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}

.sectionnav__link:hover { background-color: var(--surface-tint); color: var(--fg); }

.sectionnav__link.is-active {
  background-color: var(--surface-tint);
  color: var(--teal-deep);
  font-weight: var(--fw-bold);
}

.sectionnav__link.is-active .orbit { color: var(--accent); }
.sectionnav__link.is-active .orbit__dot { animation: orbit-lap var(--spin) linear infinite; }

/* Trilha de migalhas */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--fg-faint); }

/* Citação em destaque */
.quote {
  position: relative;
  padding: var(--s-8) 0 var(--s-8) var(--s-9);
  border-inline-start: var(--border-2) solid var(--accent);
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}

.quote p {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h3);
  color: var(--fg);
}

.quote footer {
  margin-block-start: var(--s-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Link com anel que aparece antes do texto — papel 5 */
.link-orbit {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--fw-bold);
  color: var(--accent);
  border-radius: var(--radius-pill);
}

.link-orbit .orbit {
  width: .9em;
  opacity: .45;
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}

.link-orbit:hover { color: var(--accent-strong); }
.link-orbit:hover .orbit { opacity: 1; transform: translateX(2px); }

/* Faixa de logotipo do próprio site como assinatura de fim de seção */
.orbit-seal-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--fg-faint);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}

.orbit-seal-row::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  border-radius: var(--radius-pill);
  background-color: var(--line);
}


/* ==========================================================================
   §XX · TRADINGVIEW — widgets ao vivo (assets/js/tradingview.js)
   --------------------------------------------------------------------------
   Um host `[data-tv]` pode ser o `.dv-chart` de um mockup (o sparkline fica
   por baixo como fallback) ou um `.tv-block` de seção. O widget entra com
   fade quando o iframe carrega. `.tv-widget::after` cobre o selo do
   fornecedor no canto inferior esquerdo dos gráficos.
   ====================================================================== */

.tv-host { position: relative; overflow: hidden; }

.tv-widget {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-soft);
}

.tv-ready > .tv-widget { opacity: 1; }

.tv-widget .tradingview-widget-container,
.tv-widget .tradingview-widget-container__widget,
.tv-widget iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* Bloco de seção — altura própria, cantos arredondados, sem canto vivo */
.tv-block {
  position: relative;
  width: 100%;
  min-height: var(--tv-h, 22rem);
  border-radius: var(--radius);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.tv-block--tall  { --tv-h: 30rem; }
.tv-block--xtall { --tv-h: 36rem; }
.tv-block--short { --tv-h: 14rem; }
.tv-block--flat  { border: 0; box-shadow: none; background-color: transparent; }

/* Fita de cotações — pílula, como a antiga */
.tv-block--tape {
  --tv-h: 3.25rem;
  border-radius: var(--radius-pill);
  padding-inline: var(--s-3);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-solid) 4%, var(--mask-solid) 96%, transparent);
          mask-image: linear-gradient(to right, transparent, var(--mask-solid) 4%, var(--mask-solid) 96%, transparent);
}

.tv-block--tape .tv-widget { inset: 0; }

/* Recorte da faixa inferior (logo do fornecedor / barra de datas) */
.tv-host[data-tv-crop] .tv-widget { inset: 0 0 calc(var(--tv-crop, 34px) * -1) 0; }

/* Selo do fornecedor: coberto por um chip na cor da superfície do host.
   Posição medida por widget — mini: canto superior direito; demais: canto
   inferior direito; fita: extremidade direita. */
.tv-host { --tv-surface: var(--surface); }
.dv-chart.tv-host { --tv-surface: var(--paper); }

.tv-widget::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--tv-surface);
  pointer-events: none;
}

.tv-widget--mini::after {
  inset-block-end: auto;
  inset-block-start: 4px;
  width: 34px;
  height: 34px;
}

/* gráfico avançado e symbol-overview: selo no canto inferior ESQUERDO,
   logo acima do eixo de tempo */
.tv-widget--chart::after {
  inset-inline-end: auto;
  inset-inline-start: 8px;
  inset-block-end: 40px;
  width: 38px;
  height: 38px;
}

.tv-widget--symbol-overview::after {
  inset-inline-end: auto;
  inset-inline-start: 6px;
  inset-block-end: 6px;
  width: 38px;
  height: 38px;
}

.tv-widget--tape::after {
  inset-block: 0;
  inset-inline-end: 0;
  width: 48px;
  height: auto;
  border-radius: 0;
  background-color: var(--tv-surface);
}

/* Loader da marca enquanto o widget carrega */
.tv-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background-color: var(--tv-surface);
  color: var(--accent);
  transition: opacity var(--dur) var(--ease-soft), visibility 0s linear var(--dur);
}

.tv-loader svg { width: 2.25rem; height: 2.25rem; overflow: visible; fill: none; }
.tv-block--tape .tv-loader svg { width: 1.5rem; height: 1.5rem; }
.tv-loader .mark__dot { fill: var(--accent-2); }
.tv-loader .mark__sat {
  transform-box: view-box;
  transform-origin: 16.5px 12.5px;
  animation: orbit-lap 1.4s linear infinite;
}

.tv-ready > .tv-loader { opacity: 0; visibility: hidden; }
.tv-widget { z-index: 0; }

/* Grade de dois widgets lado a lado (ex.: painel + análise técnica) */
.tv-duo {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .tv-duo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* Rodapé de bloco — nota curta, sem marca de fornecedor */
.tv-note {
  margin-block-start: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.tone-deep .tv-block { background-color: var(--deep-surface); border-color: var(--deep-line); }

/* Dentro de mockups o host é o próprio .dv-chart: mantém o raio e a borda */
.dv-chart.tv-host { min-height: 9rem; }
.dv-chart--tall.tv-host { min-height: 13rem; }

@media (prefers-reduced-motion: reduce) {
  .tv-widget { transition: none; }
}

/* Faixa 1280–1599px: com Montserrat a cápsula completa fica no limite
   (PT e ES têm rótulos bem mais longos que EN); links do menu mais justos e
   um ponto menores para caber sem estourar. Medido com os três idiomas. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .nav__link { padding-inline: var(--s-2); font-size: var(--fs-xs); }
}

/* Faixa 1280–1365px: ainda falta espaço em PT/ES — fecha os vãos da cápsula
   e afina os botões de ação. */
@media (min-width: 1280px) and (max-width: 1365.98px) {
  .header-capsule { gap: var(--s-2); }
  .nav__list { gap: 0; }
  .header-actions .btn--sm { padding-inline: .875rem; }
}