/* ═══════════════════════════════════════════ GESTORES NA TELA LARGA ══
   Dono, 14/09/2026: do notebook de 1.300px ao monitor de 2.600px a página
   não tem teto de largura, encosta à ESQUERDA junto do trilho e REORGANIZA
   o conteúdo em vez de esticar card. Lista de gestoras, página da gestora e
   ranking de mais populares são PAINEL (dados, grades), não leitura: ocupam a
   largura toda. Tokens e degraus vêm de `css/trilho-shell.css`.

   Tudo sob `html[data-trilho]` — o celular não vê nada deste arquivo.
   Carregado por: gestores/index.html (+ en/es), gestores/<slug>/index.html
   (gerador `scripts/seo/build_gestores.py`, e o js/gestora-template.js injeta
   se faltar) e fiis/mais-populares/index.html. */


/* ─────────────────────────────────────────────── 1. /gestores/ (lista) ── */

/* O contêiner Tailwind (max-w-7xl mx-auto) centrava 1.280px no meio da tela:
   a 2.560px sobravam 540px de vão de cada lado. */
html[data-trilho] body.gestores-lista .hero-gradient > .max-w-7xl,
html[data-trilho] body.gestores-lista main.max-w-7xl,
html[data-trilho] body.gestores-lista footer > .max-w-7xl {
  max-width: none;
  margin: 0;
  padding-left: var(--pag-pad-l);
  padding-right: var(--pag-pad-r);
}
html[data-trilho] body.gestores-lista .hero-gradient { padding-top: 40px; padding-bottom: 32px; }
html[data-trilho] body.gestores-lista .hero-gradient p { max-width: 62ch; }

/* A grade era de 2 colunas fixas: a 2.560px cada card ficava com 600px e o
   resumo de uma linha boiava num bloco vazio. Agora quem manda é a largura
   útil do card (~400px): 2 colunas no notebook, 3 a 1.920px, 5 a 2.560px. */
html[data-trilho] body.gestores-lista #gestores-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}
html[data-trilho] body.gestores-lista #gestores-counter { text-align: left; }
/* "Como avaliamos" é texto: a linha não passa do teto de leitura. */
html[data-trilho] body.gestores-lista main > section:last-child .dark-card { max-width: calc(var(--pag-texto-max) + 112px); }

/* ≥1600px: os filtros dividem a linha com o "Como avaliamos" — a nota de
   método sobe para perto de onde a pessoa escolhe, em vez de ficar no fim de
   uma lista de 100 gestoras. */
@media (min-width: 1600px) {
  html[data-trilho] body.gestores-lista main.max-w-7xl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 640px);
    column-gap: var(--pag-gap);
    align-items: center;
  }
  html[data-trilho] body.gestores-lista main.max-w-7xl > * { grid-column: 1 / -1; }
  html[data-trilho] body.gestores-lista main.max-w-7xl > section:first-child { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  html[data-trilho] body.gestores-lista main.max-w-7xl > section:last-child { grid-column: 2; grid-row: 1; margin-top: 0; }
  html[data-trilho] body.gestores-lista main > section:last-child .dark-card { max-width: none; padding: 18px 22px; }
  html[data-trilho] body.gestores-lista #gestores-grid { margin-top: 28px; }
}


/* ─────────────────────────────────────── 2. /gestores/<slug>/ (gestora) ── */

/* Primeiro quadro (SSG + "carregando"): o estilo inline centrava 1.280px. */
html[data-trilho] #gestora-loading {
  max-width: none !important;
  margin: 0 !important;
  padding: 32px var(--pag-pad-r) 32px var(--pag-pad-l) !important;
}
html[data-trilho] #gestora-ssg { max-width: var(--pag-texto-max) !important; }

html[data-trilho] .gestora-hero-in,
html[data-trilho] .gestora-stats,
html[data-trilho] .gestora-main {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--pag-pad-l);
  padding-right: var(--pag-pad-r);
}

/* Hero: a nota em anel ia para a outra ponta da tela (justify-between) e, a
   2.560px, ficava a 1.700px do nome da gestora. Ela passa a abrir a linha,
   colada no nome, como um cabeçalho de perfil. Sem cards sobrepostos ao hero
   no desktop, o respiro inferior de 8rem deixa de ser necessário. */
html[data-trilho] .gestora-hero { padding-top: 40px; padding-bottom: 40px; }
html[data-trilho] .gestora-hero-linha {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 36px;
}
html[data-trilho] .gestora-hero-nota { order: -1; flex: none; }
html[data-trilho] .gestora-hero-texto { min-width: 0; max-width: 1400px; }

/* Corpo em DUAS colunas: à esquerda o texto (avaliação + análise completa, a
   linha no teto de leitura); à direita os DADOS — números da gestora e os
   fundos sob gestão. Antes eram três blocos de 1.250px empilhados, com o
   parecer de 5 mil caracteres numa linha de 150 caracteres. O `main` vira
   `display: contents` para que as seções dele e os números (que ficam fora
   dele no HTML do celular) sejam itens da mesma grade. */
html[data-trilho] .gestora-corpo {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--pag-texto-max) + 66px)) minmax(380px, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--pag-gap);
  align-items: start;
  margin-top: 32px;
  padding: 0 var(--pag-pad-r) 64px var(--pag-pad-l);
}
html[data-trilho] .gestora-corpo > .gestora-main { display: contents; }
html[data-trilho] .gestora-corpo .gestora-stats,
html[data-trilho] .gestora-corpo .gestora-main > section {
  margin: 0 0 24px;
  padding: 0;
}
html[data-trilho] .gestora-corpo .gestora-avaliacao { grid-column: 1; grid-row: 1; }
html[data-trilho] .gestora-corpo .gestora-conclusao { grid-column: 1; grid-row: 2 / span 2; }
html[data-trilho] .gestora-corpo .gestora-stats     { grid-column: 2; grid-row: 1; }
html[data-trilho] .gestora-corpo .gestora-fundos    { grid-column: 2; grid-row: 2 / span 2; }
/* Gestora sem análise escrita cai na "Conclusão" curta: o bloco de fundos
   então ocupa a linha inteira abaixo, em mais colunas. */
html[data-trilho] .gestora-corpo:not(:has(.gestora-parecer)) .gestora-conclusao { grid-row: 2; }
html[data-trilho] .gestora-corpo:not(:has(.gestora-parecer)) .gestora-fundos { grid-column: 1 / -1; grid-row: 3; }

/* A nota de rodapé da própria página (data e aviso) acompanha a margem. */
html[data-trilho] .gestora-corpo + footer { text-align: left; padding-left: var(--pag-pad-l); padding-right: var(--pag-pad-r); }

html[data-trilho] .gestora-corpo .gestora-parecer,
html[data-trilho] .gestora-corpo .gestora-avaliacao p { max-width: var(--pag-texto-max); }

/* Fundos: largura útil do card (~300px) decide quantas colunas cabem. */
html[data-trilho] .gestora-corpo .gestora-fundos > .dark-card { padding: 20px; }
@media (min-width: 1900px) {
  html[data-trilho] .gestora-corpo .gestora-fundos > .dark-card { padding: 28px; }
}
html[data-trilho] .gestora-corpo .gestora-fundos-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Números da gestora: o bloco de dados é um contêiner — ele decide o
   desenho pela própria largura, não pela da tela. Estreito (notebook,
   coluna de 380px) os três viram linhas compactas, rótulo à esquerda e
   número à direita, e a linha de tickers sai: os cards de fundo logo abaixo
   já os mostram. */
html[data-trilho] .gestora-corpo .gestora-stats { container-type: inline-size; }
@container (max-width: 700px) {
  html[data-trilho] .gestora-stats-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  html[data-trilho] .gestora-stats-grid > .stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
  }
  html[data-trilho] .gestora-stats-grid > .stat-card > :first-child { margin-bottom: 0; }
  html[data-trilho] .gestora-stats-grid > .stat-card > :nth-child(2) { font-size: 1.5rem; line-height: 1; }
  html[data-trilho] .gestora-stats-grid > .stat-card > :nth-child(3) { display: none; }
}
@container (min-width: 701px) {
  html[data-trilho] .gestora-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-trilho] .gestora-stats-grid > .stat-card { padding: 18px 20px; }
}

/* Com poucos fundos a coluna de dados é curta perto do parecer: ela
   acompanha a leitura (sticky) em vez de deixar a coluna vazia. O limite de
   cards é o que cabe na altura da janela em cada degrau. */
html[data-trilho] .gestora-corpo:has(.gestora-parecer) .gestora-fundos:not(:has(.gestora-fundos-grid > a:nth-child(3))) {
  position: sticky;
  top: 24px;
}
@media (min-width: 1900px) {
  html[data-trilho] .gestora-corpo:has(.gestora-parecer) .gestora-fundos:not(:has(.gestora-fundos-grid > a:nth-child(5))) {
    position: sticky;
    top: 24px;
  }
}


/* ──────────────────────────────────────────── 3. /fiis/mais-populares/ ── */

/* Coluna de 1.200px centrada com sub-coluna de 880px: a 2.560px o ranking
   de 150 fundos ocupava um terço da tela e pedia rolagem de 11 mil pixels. */
html[data-trilho] .rk-main {
  max-width: none;
  margin: 0;
  padding: 36px var(--pag-pad-r) 72px var(--pag-pad-l);
}
html[data-trilho] .rk-col { max-width: none; }
html[data-trilho] .rk-note { max-width: calc(var(--pag-texto-max) + 28px); }

/* O ranking vira GRADE lida em linhas: a posição continua na ordem de
   leitura, e o card fica na largura útil dele (~340px). 3 colunas no
   notebook, 4 a 1.920px, 6 a 2.560px. */
html[data-trilho] .rk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px 14px;
}
html[data-trilho] .rk-list > .rk-state { grid-column: 1 / -1; text-align: left; padding-left: 0; }

/* ≥1600px: o aviso "popularidade não é recomendação" sobe para o lado do
   título — os dois juntos cabem numa linha de altura do hero. */
@media (min-width: 1600px) {
  html[data-trilho] .rk-col {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(420px, 620px) minmax(0, 1fr);
    column-gap: var(--pag-gap);
    align-items: center;
  }
  html[data-trilho] .rk-col > * { grid-column: 1 / -1; }
  html[data-trilho] .rk-col > .rk-hero { grid-column: 1; grid-row: 1; }
  html[data-trilho] .rk-col > .rk-note { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
  /* A terceira trilha é a sobra: o ranking e o rodapé da página correm por
     baixo das três, senão a lista parava onde o aviso termina. */
}

/* Gestora de UM fundo (66 das 110): a coluna de dados é o card desse fundo e
   três números. Largura toda à direita deixava o card de 310px boiando num
   bloco de 700px — a coluna fica na largura útil do card. */
html[data-trilho] .gestora-corpo:has(.gestora-parecer):has(.gestora-fundos-grid > a:only-child) {
  grid-template-columns: minmax(0, calc(var(--pag-texto-max) + 66px)) minmax(380px, 460px);
}