/* ═══════════════════════════════════════════════════════════════════════════
   artigo-leitura.css — o artigo no DESKTOP com trilho: menu do site à
   esquerda, e a tela dividida em DOIS blocos.

   Dono, 13/09/2026: *"o bloco principal, que é onde está o artigo, e o bloco
   da direita, onde ficam as coisas complementares"*. O título fica embaixo da
   capa, no topo da matéria — a primeira tentativa (título ao lado da capa,
   índice numa terceira coluna) foi recusada: *"ficou bagunçado, mal
   estruturado"*.

     principal — capa, título, texto, comentários
     lateral   — quem escreveu, a análise do fundo citado, "Neste artigo" (o
                 menu da matéria) e compartilhar no WhatsApp — tudo grudado.
                 O card da carteira é CONVERSÃO e fica no corpo do artigo.

   A lateral é montada pelo `js/artigo-leitura.js`, que MOVE para lá os blocos
   que já existem (o autor, o compartilhar do `comments.js` e a parte de análise
   do card do `cta.js`) — nenhuma cópia. Abaixo de 1201px não existe lateral: os
   blocos voltam para o fluxo do texto.

   Tudo vive sob `html[data-trilho]` (desktop; quem liga é o
   `js/trilho-shell.js`). No celular nada daqui se aplica.

   A largura do principal é TETO, não a tela: acima de ~90 caracteres a linha
   cansa. O que sobra de tela vira margem dos dois lados, com o conjunto
   centrado na área à direita do trilho.

   Os nomes de transição (`rap-capa`, `rap-titulo`, `rap-trilho`) e o
   `@view-transition` vivem em `js/transicao-paginas.js`, não aqui.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-trilho] body {
  background: #0A0E14;
}

/* A coluna do trilho, o recuo do conteúdo, o cabeçalho legado escondido e o
   RODAPÉ saíram daqui em 14/09/2026 para `css/trilho-shell.css`: deixaram de
   ser do artigo quando o trilho passou a valer em todas as páginas do site. */

/* `overflow-x: hidden` no body e no .page-wrapper (style.css) faz de cada um
   um contêiner de rolagem que nunca rola — e o `position: sticky` da lateral
   passa a grudar NELE, ou seja, não gruda. `clip` corta igual e não cria
   contêiner. Medido: o menu "Neste artigo" subia junto com o texto. */
html[data-trilho] body,
html[data-trilho] .page-wrapper {
  overflow-x: clip;
  overflow-y: visible;
}

/* ─────────────────────────────────────────────────────────────── a coluna ── */
html[data-trilho] .article-container {
  max-width: 1000px;
  padding: 28px clamp(24px, 2.4vw, 48px) 16px;
}

/* ──────────────────────────────────────────────────────────────────── capa ── */
html[data-trilho] .article-cover {
  margin: 0 0 28px;
  max-height: none;
  border-radius: 16px;
  background: #0d141c;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
html[data-trilho] .article-cover img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 16px;
}

/* ─────────────────────────────────────────────────────────────── cabeçalho ── */
html[data-trilho] .article-header {
  margin: 0 0 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid #1E2836;
}
html[data-trilho] .article-header h1 {
  font-family: 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 1.1vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #E9F0F8;
  margin: 14px 0 14px;
  text-wrap: balance;
}
html[data-trilho] .article-header .article-subtitle,
html[data-trilho] .article-header .subtitle {
  font-size: 1.16rem;
  line-height: 1.5;
  color: #93A2B4;
  max-width: 68ch;
  text-wrap: pretty;
}
html[data-trilho] .article-meta { color: #66768A; font-size: .88rem; }

/* ─────────────────────────────────────────────────────────────────── texto ── */
html[data-trilho] .article-content {
  font-size: 1.08rem;
  line-height: 1.78;
  color: #C3CEDA;
}
html[data-trilho] .article-content h2 {
  font-family: 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: #E9F0F8;
  margin: 44px 0 14px;
  padding-bottom: 0;
  border-bottom: 0;
  scroll-margin-top: 28px;
}
html[data-trilho] .article-content h3 { scroll-margin-top: 28px; }

/* ─────────────────────────────────────────── card da carteira (conversão) ──
   Dono, 13/09/2026: *"tá um pouquinho estranho, um pouquinho feio — o botão
   entrar com o Google deveria ser branco; amarelo não ficou legal; o design
   deveria ser melhor para converter mais"*. Sai a foto de skyline com dourado;
   entra a paleta da casa (azul sobre o fundo escuro), o título grande com o
   ticker em destaque, as vantagens como checklist e o botão BRANCO do Google
   — o formato que a pessoa já reconhece de outros sites, e o de mais
   contraste na tela. O cartão "já está na carteira" (--compact) não muda. */
html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact) {
  margin: 0 0 36px;
  padding: 26px 30px;
  border: 1px solid #1f3341;
  border-radius: 20px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(17, 134, 254, .20) 0%, transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(0, 224, 163, .07) 0%, transparent 60%),
    linear-gradient(160deg, #102030 0%, #0b151e 100%);
  box-shadow: 0 30px 60px -44px rgba(17, 134, 254, .55);
}
html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact)::before,
html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact)::after { display: none; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__icon { display: none; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__eyebrow { color: #6cb4ff; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__eyebrow::before {
  background: #1186fe;
  box-shadow: none;
  animation: rap-leitura-pulso 2.4s ease-out infinite;
}
@keyframes rap-leitura-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17, 134, 254, .55); }
  50% { box-shadow: 0 0 0 6px rgba(17, 134, 254, 0); }
}
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__title {
  margin-top: 6px;
  font-family: 'Archivo', 'Segoe UI', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-shadow: none;
  text-wrap: balance;
}
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__title strong { color: #6cb4ff; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__sub { margin-top: 8px; color: #9fb0bd; font-size: .95rem; line-height: 1.5; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__perk { color: #c3ceda; font-size: .88rem; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__perk svg { color: #00e0a3; }
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__btn--primary {
  justify-content: center;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #ffffff;
  box-shadow: 0 12px 30px -14px rgba(255, 255, 255, .45);
}
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__btn--primary:hover {
  background: #eaf2fb;
  color: #111;
  box-shadow: 0 16px 36px -14px rgba(255, 255, 255, .55);
}
html[data-trilho] .article-container > .rap-cta-carteira .rap-cta-carteira__hint { justify-content: center; color: #71838f; }

/* Com largura (a partir de 1201px): texto e vantagens à esquerda, a ação
   numa coluna própria à direita — o olho termina a leitura no botão. */
@media (min-width: 1201px) {
  html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact) .rap-cta-carteira__inner {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "head cta" "perks cta";
    gap: 18px 36px;
    align-items: center;
  }
  html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact) .rap-cta-carteira__head { grid-area: head; }
  html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact) .rap-cta-carteira__perks { grid-area: perks; }
  html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact) .rap-cta-carteira__cta {
    grid-area: cta;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, .13);
    align-self: stretch;
    justify-content: center;
  }
  html[data-trilho] .article-container > .rap-cta-carteira:not(.rap-cta-carteira--compact) .rap-cta-carteira__btn { width: 100%; box-sizing: border-box; padding-left: 16px; padding-right: 16px; font-size: .95rem; white-space: normal; text-align: center; }
}

/* A lateral só existe a partir de 1201px. */
html[data-trilho] .leitura-lateral { display: none; }

/* ═════════════════════════════════════════ DOIS BLOCOS (a partir de 1201px) ══ */
@media (min-width: 1201px) {
  html[data-trilho] .article-container {
    --leitura-lateral: clamp(300px, 21vw, 360px);
    max-width: calc(940px + var(--leitura-lateral) + 56px + 2 * clamp(24px, 2.4vw, 48px));
    display: grid;
    grid-template-columns: minmax(0, 940px) var(--leitura-lateral);
    column-gap: 56px;
    align-items: start;
  }
  html[data-trilho] .article-container > * { grid-column: 1; min-width: 0; }

  html[data-trilho] .leitura-lateral {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* Moldura dos blocos da lateral que não trazem a sua. */
  html[data-trilho] .leitura-bloco {
    border: 1px solid #1E2836;
    border-radius: 16px;
    background: #0f151e;
  }
  html[data-trilho] .leitura-rotulo {
    display: block;
    margin: 0 0 12px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #66768A;
  }

  /* ── análise do fundo (montado em js/artigo-leitura.js): ticker e cota,
     o gráfico de 12 meses com a cota do dia no mouse, quantos usuários têm o
     ativo e UM botão para a análise completa. ── */
  html[data-trilho] .leitura-analise { flex: none; padding: 14px 16px 16px; }
  html[data-trilho] .leitura-analise[hidden] { display: none; }
  html[data-trilho] .leitura-analise .leitura-rotulo { margin-bottom: 10px; }
  html[data-trilho] .la-topo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: inherit;
    text-decoration: none;
  }
  html[data-trilho] .la-tk {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #93A2B4;
  }
  html[data-trilho] .la-preco {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #E9F0F8;
  }
  html[data-trilho] .la-dia { margin-left: auto; font-size: .78rem; font-weight: 700; white-space: nowrap; }
  html[data-trilho] .la-dia em { font-style: normal; font-weight: 500; opacity: .7; }
  html[data-trilho] :is(.la-dia, .la-rodape span).sobe { color: #00e0a3; }
  html[data-trilho] :is(.la-dia, .la-rodape span).cai { color: #f85560; }
  html[data-trilho] .la-grafico {
    position: relative;
    height: 96px;
    margin: 10px -4px 0;
    cursor: crosshair;
  }
  html[data-trilho] .la-grafico.sobe { color: #00e0a3; }
  html[data-trilho] .la-grafico.cai { color: #f85560; }
  html[data-trilho] .la-grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
  /* O vermelho pesa mais que o verde com a mesma opacidade: a área encobria a linha. */
  html[data-trilho] .la-grafico.cai .la-area { opacity: .55; }
  html[data-trilho] .la-mira {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(10, 14, 20, .9);
    pointer-events: none;
  }
  html[data-trilho] .la-dica {
    position: absolute;
    top: -32px;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: #1E2836;
    color: #E9F0F8;
    font-size: .72rem;
    white-space: nowrap;
    pointer-events: none;
  }
  html[data-trilho] .la-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: .74rem;
    color: #66768A;
  }
  html[data-trilho] .la-rodape span:last-child { font-weight: 700; }
  html[data-trilho] .la-quem { margin: 10px 0 0; font-size: .78rem; color: #93A2B4; }
  html[data-trilho] .la-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(17, 134, 254, .45);
    border-radius: 10px;
    background: rgba(17, 134, 254, .12);
    color: #cfe5ff;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
  }
  html[data-trilho] .la-botao:hover { background: rgba(17, 134, 254, .24); color: #fff; }
  html[data-trilho] .la-botao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


  /* ── quem escreveu: um bloco só — foto, "Autor do artigo", o nome e, colada
     nele, a reputação. Dono, 13/09/2026: artigos, comentários e likes saem; a
     reputação fica "vinculada ao nome", sem linha dividindo nada. A bio e o
     botão também saem (o nome já leva à página do autor). */
  html[data-trilho] .leitura-lateral .article-author-footer {
    flex: none;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #1E2836;
    border-radius: 16px;
    background: #0f151e;
  }
  html[data-trilho] .leitura-lateral .article-author-footer > h3 { display: none; }
  html[data-trilho] .leitura-lateral .author-card {
    grid-template-columns: 40px minmax(0, max-content) 1fr;
    grid-template-areas: none;
    gap: 1px 0;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
  }
  html[data-trilho] .leitura-lateral .author-info { display: contents; }
  html[data-trilho] .leitura-lateral .author-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  html[data-trilho] .leitura-lateral .author-label {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: end;
    padding-left: 12px;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #66768A;
  }
  html[data-trilho] .leitura-lateral .author-name {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    padding-left: 12px;
    font-size: .95rem;
    font-weight: 700;
    color: #E9F0F8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-trilho] .leitura-lateral :is(.author-bio, .author-cta) { display: none; }
  html[data-trilho] .leitura-lateral .author-stats {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    display: block;
    margin: 0 0 0 10px;
    padding: 0;
    border: 0;
    font-size: .74rem;
    line-height: 1;
    color: #93A2B4;
    white-space: nowrap;
  }
  html[data-trilho] .leitura-lateral .author-stats { display: none !important; } /* reputação não aparece (dono, 23/10/2026) */
  html[data-trilho] .leitura-lateral .author-stats > span {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(245, 183, 15, .1);
    color: #d9b75a;
  }
  html[data-trilho] .leitura-lateral .author-stats strong { font-size: .78rem; font-weight: 700; color: #f5c542; }
  html[data-trilho] .leitura-lateral .author-stats small { margin-left: 2px; font-size: inherit; color: inherit; }

  /* ── "Página do ativo" (o card de fim de artigo do cta.js) repetia o botão
     "Ver análise de X" que o card da carteira já traz. Na lateral fica só o
     da carteira; o de fim de artigo some quando o outro já tem o botão. */
  html[data-trilho] .article-container:has(.leitura-analise:not([hidden])) :is(.rap-asset-card, .article-fii-cta) { display: none; }
  /* E o card da carteira no corpo deixa de repetir o gráfico, o contador e o
     "Ver análise": com a lateral de pé, ele é só conversão. */
  html[data-trilho] .article-container:has(.leitura-analise:not([hidden])) > .rap-cta-carteira :is(.rap-preview, .rap-cta-carteira__socialwrap, .rap-cta-carteira__btn--ghost) { display: none; }

  /* ── a lateral inteira gruda (dono: o autor "também tem que ficar
     travado"). Para caber na altura da tela, só o índice encolhe: a lista dele
     rola por dentro e o item aceso nunca some (js/artigo-leitura.js). */
  html[data-trilho] .leitura-fixo {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 40px);
  }

  /* ── "Neste artigo": o menu ── */
  html[data-trilho] .leitura-indice {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 14px 10px 12px 16px;
  }
  html[data-trilho] .leitura-indice ol {
    list-style: none;
    margin: 0;
    padding: 0 8px 0 0;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #2C3A4D transparent;
    border-left: 1px solid #1E2836;
  }
  html[data-trilho] .leitura-indice li { margin: 0; }
  html[data-trilho] .leitura-indice a {
    position: relative;
    display: block;
    margin-left: -1px;
    padding: 8px 6px 8px 14px;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    font-size: .88rem;
    line-height: 1.38;
    color: #93A2B4;
    text-decoration: none;
    transition: color .15s, background-color .15s, border-color .15s;
  }
  html[data-trilho] .leitura-indice a:hover { color: #E9F0F8; background: rgba(255, 255, 255, .03); }
  html[data-trilho] .leitura-indice a:focus-visible { outline: 2px solid #1186fe; outline-offset: -2px; }
  html[data-trilho] .leitura-indice a.is-lido { color: #71838f; }
  html[data-trilho] .leitura-indice a.is-atual {
    color: #E9F0F8;
    font-weight: 600;
    border-left-color: #1186fe;
    background: rgba(17, 134, 254, .09);
  }
  html[data-trilho] .leitura-progresso-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 8px 0 0;
    color: #66768A;
    font-size: .78rem;
    white-space: nowrap;
  }
  html[data-trilho] .leitura-progresso {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: #1E2836;
    overflow: hidden;
  }
  html[data-trilho] .leitura-progresso i {
    display: block;
    height: 100%;
    background: #1186fe;
    transform-origin: left center;
    transform: scaleX(0);
  }

  /* ── compartilhar: uma linha de texto e o botão. ── */
  html[data-trilho] .leitura-lateral .rap-c-share {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #1E2836;
    border-radius: 16px;
    background: #0f151e;
  }
  html[data-trilho] .leitura-lateral .rap-c-share-text { flex: none; }
  html[data-trilho] .leitura-lateral .rap-c-share-text strong { font-size: .9rem; }
  html[data-trilho] .leitura-lateral .rap-c-share-text span { font-size: .78rem; }
  html[data-trilho] .leitura-lateral .rap-c-share-btn { justify-content: center; padding: 9px 14px; font-size: .86rem; }
}

/* Tela muito larga: os dois blocos ganham corpo, a proporção fica. */
@media (min-width: 2200px) {
  html[data-trilho] .article-container {
    --leitura-lateral: 400px;
    max-width: calc(1040px + 400px + 64px + 96px);
    grid-template-columns: minmax(0, 1040px) var(--leitura-lateral);
    column-gap: 64px;
  }
  html[data-trilho] .article-content { font-size: 1.14rem; }
}