/* ============================================================
   COMPONENTES — o repertorio do WikiMM (docs/DESIGN_SYSTEM.md),
   reatribuido ao dominio das cartas. Cada bloco declara --ac e
   deriva a familia inteira com color-mix().

   .table nao vem do WikiMM (que nao tem tabela): e derivada dos
   mesmos tokens, e esta documentada como derivacao no design system.
   ============================================================ */

/* -------------------------------------------------- .band: card de secao */
.band {
  --ac: var(--ac-purple);
  position: relative;
  padding: var(--pad-card);
  border: 1px solid var(--line);
  border-top: 3px solid color-mix(in srgb, var(--ac) 62%, var(--panel));
  border-radius: var(--r-card);
  background:
    radial-gradient(
      440px 210px at 100% 0%,
      color-mix(in srgb, var(--ac) 15%, transparent),
      transparent 72%
    ),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.band-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.band-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ac);
}
.band-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac);
}
/* O rotulo tambem e link onde ele nomeia algo que tem pagina -- a gestora, no
   painel da visao geral. Herda forma e cor do rotulo: o que muda e o sublinhado
   no hover e o anel de foco, que e o que distingue link de etiqueta. */
a.band-label-link {
  text-decoration: none;
}
a.band-label-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.band-label-link:focus-visible {
  outline: 2px solid var(--ac-blue);
  outline-offset: 3px;
}
.band h2,
.band h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.018em;
  font-variation-settings: "SOFT" 28, "WONK" 1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--gap-card);
  margin: var(--gap-card) var(--gap-page);
}

/* -------------------------------------------------- .chip: contagem, status */
/* Sem variante de escopo (institucional, fundo, estrategia): o escopo nao existe
   no dominio (ROADMAP, fases futuras; ADR-0014), e as classes dele ficaram sem
   uso. Voltam quando voltar o dado. */
.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--ac);
}

/* A variante de numero: mono sobre fundo claro, sem a cor solida. Conta
   resultado, e nao categoriza -- por isso nao carrega acento. Em `--dim`, e
   nao no `--faint` dos rotulos vizinhos: aqui o texto e informacao, e a 8,5px
   o `--faint` da 3,1:1 de contraste, abaixo do minimo. */
.chip-count {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--dim);
}

/* -------------------------------------------------- .pill: filtro, etiqueta */
.pill {
  --ac: var(--line-strong);
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, var(--ac) 32%, var(--line));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ac) 8%, var(--panel));
  color: var(--dim);
  font-family: var(--sans);
  font-size: 12.5px;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
/* A pill tambem e link: filtro que muda a URL e navegacao, nao acao, e a
   pagina filtrada precisa ser compartilhavel e recarregavel. */
a.pill {
  display: inline-block;
  text-decoration: none;
}
/* Mao e hover so em quem responde ao clique. A forma da pill tambem serve de
   etiqueta estatica -- o "Quem Somos revisado em ..." da lista de gestoras e um
   `<span>` --, e ali `cursor: pointer` com realce no hover prometia um clique
   que nao existe. O seletor e por elemento, e nao uma classe nova, porque o que
   decide se ha acao e ser `<a>` ou `<button>`, nao uma marca no HTML. */
a.pill,
button.pill {
  cursor: pointer;
}
a.pill:hover,
button.pill:hover {
  color: var(--txt);
  border-color: color-mix(in srgb, var(--ac) 55%, var(--panel));
}
/* Dois estados porque sao dois papeis: `aria-pressed` e o botao que liga e
   desliga; `aria-current` e o link que aponta para onde ja se esta. */
.pill[aria-pressed="true"],
.pill[aria-current="true"] {
  background: var(--ac-blue);
  border-color: var(--ac-blue);
  color: #fff;
}
.pill-mini {
  padding: 4px 10px;
  font-size: 12px;
}

/* -------------------------------------------------- .row: item de lista */
.row {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ac);
  border-radius: var(--r-box);
  background: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--txt);
}
.row:hover {
  border-color: var(--line-strong);
  border-left-color: var(--ac);
}
/* A meta da linha e `.row-meta`, la embaixo. Um `.row small` aqui vencia ela
   pela especificidade e desligava o flex e o espaco entre data, meio e
   "Ver original". */

/* -------------------------------------------------- rotulos e metadados */
.meta {
  margin-bottom: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}

/* A data era 10px no tom mais claro da paleta, colada ao meio: a informacao
   que se procura numa lista de cartas sumia ao lado da que nao se procura.
   Peso e cor de corpo a trazem para a frente; a mono fica, que e o que alinha
   os digitos de uma data sob os da outra. */
.pub-date {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--txt);
}
/* O meio vira etiqueta: continua legivel, para de competir. O fundo e um
   `color-mix` translucido, e nao um token solido, porque a etiqueta aparece
   sobre o branco do card e sobre o `--bg` da pagina no detalhe -- qualquer um
   dos dois, fixo, some numa das duas superficies. */
.pub-medium {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--dim) 10%, transparent);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.prose {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 62ch;
}

/* -------------------------------------------------- barra de filtros */
.filters {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin: var(--gap-card) var(--gap-page) 0;
}
.filters-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--faint);
}
/* Cada grupo da barra e um `role="group"` nomeado pelo rotulo ao lado: sem
   isso, as pills chegam ao leitor de tela como tres links soltos, sem dizer
   o que filtram. */
.filters-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* -------------------------------------------------- formularios */
/* Nativo primeiro: <input type="date"> e <input type="search">
   trazem calendario e limpar de graca, em desktop e celular. Sao os dois
   unicos campos do site publico; texto, senha e select nao tem tela. */
input[type="search"],
input[type="date"] {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--panel);
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
input[type="date"] {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
}
input:focus {
  border-color: var(--ac-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-blue) 15%, transparent);
}
input::placeholder {
  color: var(--faint);
}

/* Na busca (2.3) quem veste `.search-top` e o FORMULARIO, e nao o campo: o
   input divide a linha com o botao, e e o conjunto que a topbar empurra para a
   ponta. 300px, e nao os 240px de antes, porque agora sao dois controles.
   Tudo em seletor de classe puro: a regra de 760px la embaixo, que manda o
   bloco ocupar a linha inteira no celular, tambem e, e um `form.search-top`
   aqui teria especificidade maior e venceria o celular. */
.search-top {
  display: flex;
  gap: 8px;
  margin-left: auto;
  width: 300px;
}
.search-top input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

.btn {
  padding: 8px 16px;
  border: 1px solid var(--ac-blue);
  border-radius: var(--r-pill);
  background: var(--ac-blue);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.16s;
}
.btn:hover {
  box-shadow: 0 8px 20px -12px rgba(47, 109, 240, 0.7);
}
.btn-ghost {
  background: var(--panel);
  border-color: var(--line);
  color: var(--txt);
}
.btn-ghost:hover {
  border-color: var(--ac-blue);
  color: var(--ac-blue);
}

/* -------------------------------------------------- .table */
/* Numero em monoespaçada tabular e alinhado a direita: com
   tabular-nums, 1 e 8 ocupam a mesma largura e a coluna alinha. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.table th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--faint);
}
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--ac-blue) 4%, var(--panel));
}
.table .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .grid,
  .filters {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .search-top {
    order: 5;
    flex: 1 1 100%;
    width: auto;
    margin-left: 0;
  }

  /* Tabela larga nao rola na horizontal no celular: cada linha
     vira um bloco, e o rotulo da coluna vem do data-label. */
  .table thead {
    display: none;
  }
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }
  .table tr {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-box);
    background: var(--panel);
  }
  .table td {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .table td:last-child {
    border-bottom: none;
  }
  .table td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.2em;
    color: var(--faint);
  }
  .table .num {
    text-align: left;
  }
}

/* -------------------------------------------------- placeholder da Fase 0 */
.placeholder {
  --ac: var(--ac-blue);
  margin: var(--gap-card) var(--gap-page);
  max-width: 620px;
}
.placeholder .phase {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--ac) 32%, var(--line));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ac) 8%, var(--panel));
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ac);
}
.placeholder p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}
.placeholder .note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--faint);
}

@media (max-width: 760px) {
  .placeholder {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
}

/* -------------------------------------------------- pagina nao encontrada (404) */
/* A frase e dois caminhos de volta, com as margens da pagina. Os links sao os
   `.btn-ghost` do paginador: navegacao, e nao acao. */
.not-found {
  margin: var(--gap-card) var(--gap-page);
  max-width: 620px;
}
.not-found p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}
.not-found .not-found-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .not-found {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
}

/* -------------------------------------------------- cartas: lista e detalhe */
.list {
  display: grid;
  gap: 8px;
  margin: var(--gap-card) var(--gap-page);
}
/* Duas colunas em /cartas/. `minmax(0, 1fr)` e nao `1fr` sozinho: o minimo
   automatico de uma coluna de grid e o conteudo, e um titulo longo sem espaco
   empurraria a coluna alem da metade em vez de quebrar. O celular volta a uma
   coluna no mesmo ponto em que o `.grid` de cards volta.

   A regra do `:not(.row)` e para o que nao e linha -- o aviso de lista vazia:
   ele fala da lista inteira e nao cabe numa das metades. */
.list-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.list-pair > :not(.row) {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
  .list-pair {
    grid-template-columns: 1fr;
  }
}
/* O acento da linha e o meio da carta (`row-{{ primary_medium }}`). OTHER nao
   tem regra: a coleta o recusa (`collecting.py`), entao nunca chega a lista. */
.row-pdf { --ac: var(--ac-amber); }
.row-youtube { --ac: var(--ac-pink); }
.row-html { --ac: var(--ac-cyan); }
.empty {
  margin: var(--gap-card) 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* -------------------------------------------------- paginacao da lista */
/* Dois links, nas duas pontas da largura da lista: o de voltar onde a leitura
   comeca, o de avancar onde ela termina. `margin-left: auto` no de avancar, e
   nao `justify-content: space-between`, porque na primeira e na ultima pagina
   so existe um dos dois -- e com space-between o unico link cairia sempre a
   esquerda, mudando de lugar conforme a pagina.

   As mesmas margens laterais do `.list` logo acima, para que os botoes alinhem
   com as linhas da lista em vez de flutuarem. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--gap-card) var(--gap-page);
}
.pager-older {
  margin-left: auto;
}

@media (max-width: 760px) {
  .pager {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
  /* No celular os dois ocupam a largura toda, um em cima do outro: alvo de
     toque de linha inteira, e nenhum dos dois espremido contra a borda. */
  .pager a {
    flex: 1 1 100%;
    text-align: center;
  }
}

.letter-head {
  margin: var(--gap-card) var(--gap-page) 0;
}
.letter-head .meta a {
  color: inherit;
}
.band-summary { --ac: var(--ac-blue); }
.band-summary .prose {
  max-width: none;
  font-size: 15px;
}
/* O resumo e prosa de varios paragrafos: o espaco entre eles e o que deixa
   cenario, portfolio, teses e riscos lidos como blocos distintos. */
.summary p + p {
  margin-top: 10px;
}
.band-macro_view { --ac: var(--ac-blue); }
.band-portfolio_changes { --ac: var(--ac-cyan); }
.band-investment_theses { --ac: var(--ac-purple); }
.band-risks { --ac: var(--ac-red); }

.claims {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.claim p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt);
}
.claim small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}
.cite {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--dim);
}
a.cite {
  text-decoration: underline dotted;
}
.not-stated {
  font-style: italic;
  color: var(--faint);
}
/* O italico e o `--faint` do `.not-stated` valem em toda a interface -- a
   ausencia se declara sempre do mesmo jeito. O corpo, nao: aqui ele acompanha as
   afirmacoes da carta (13,5px), e no card da visao geral acompanha a `.prose` do
   card, que e o texto ao lado dele. Uma ausencia maior que a frase vizinha
   chamaria mais atencao que o que a gestora disse. */
.letter .prose.not-stated {
  font-size: 13.5px;
  line-height: 1.55;
}

.letter-foot {
  margin: var(--gap-card) var(--gap-page) 0;
}

/* -------------------------------------------------- a capa da carta (ADR-0009) */
/* A miniatura e identificacao, nao leitura: pequena na lista, media no detalhe,
   e sempre com a proporcao real da pagina preservada por object-fit. */
.row-cover {
  flex: 0 0 auto;
  width: 52px;
  height: 70px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}

.band-summary.with-cover {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.band-summary .band-body {
  min-width: 0;
  flex: 1;
}
.letter-cover {
  flex: 0 0 auto;
  width: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(26, 34, 50, 0.09);
  background: var(--panel);
}

@media (max-width: 620px) {
  .band-summary.with-cover {
    flex-direction: column;
  }
  .letter-cover {
    width: 104px;
  }
}

/* -------------------------------------------------- linha da lista de cartas */
/* Dois destinos por linha: o titulo leva ao resumo, "ver original" leva ao PDF
   da gestora. Por isso a linha e um <article>, e nao um <a> -- link dentro de
   link e HTML invalido. O alvo grande sobrevive porque o link do titulo se
   estica por cima da linha inteira. */
.list .row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
}
.list .row:hover {
  background: color-mix(in srgb, var(--ac) 4%, rgba(255, 255, 255, 0.85));
}

.row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* A gestora vem antes do titulo e com peso proprio: numa lista de varias
   gestoras, e por ela que o leitor se orienta primeiro. */
.row-manager {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* O roxo e o acento que os tokens ja reservam para gestora. Ele separa quem
     escreveu de o que foi escrito: o `--ac` da linha e do meio (PDF, YouTube),
     e com a gestora tambem em `--txt` os dois textos se liam como um so. */
  color: var(--ac-purple);
}
/* O nome da gestora e link para a pagina dela. Precisa de `z-index` pelo mesmo
   motivo do "ver original": o link do titulo se estica por cima da linha toda, e
   sem isto o clique no nome cairia nele. */
a.row-manager {
  position: relative;
  z-index: 1;
  width: fit-content;
  color: var(--ac-purple);
  text-decoration: none;
}
a.row-manager:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.row-title {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--txt);
  text-decoration: none;
}
/* Estica o link do titulo por cima da linha toda. */
a.row-title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-box);
}
a.row-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.row-title:focus-visible::after {
  outline: 2px solid var(--ac-blue);
  outline-offset: 2px;
}

.row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* Acima do link esticado do titulo, senao ele nunca recebe o clique. */
.row-source {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.row-source:hover {
  border-color: color-mix(in srgb, var(--ac) 55%, var(--line));
  color: var(--txt);
  background: var(--panel);
}

/* -------------------------------------------------- detalhe da carta (2.3) */
/* A confianca saiu da pagina publica: era a coisa mais visivel da tela e
   dizia menos que a propria frase. A procedencia fica, discreta -- ela e a
   promessa do produto, e some so se a promessa sumir junto. */
.claim-topic {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac);
}


/* Botao de compartilhar, no cabecalho do resumo. */
.share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 11px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.share:hover {
  border-color: color-mix(in srgb, var(--ac) 55%, var(--line));
  color: var(--txt);
}
.share-feito {
  border-color: var(--ac-green);
  color: var(--ac-green);
}

/* Titulo da carta e nome da gestora no topo: os dois destinos externos da
   pagina de detalhe. O titulo leva a publicacao original, a gestora ao site
   oficial dela. */
.topbar-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
  /* `flex: 1 1 0`, e nao o `auto` implicito. Com base automatica o bloco pede a
     largura do texto inteiro, e num item de flex container que QUEBRA isso nao
     encolhe: ele desce para a proxima linha. No detalhe da carta a 390px o
     efeito era o topo virar tres linhas -- botao, titulo e marca, cada um na
     sua --, com 142px de altura.

     Base zero faz ele pedir nada e ficar com o que sobrar, que e exatamente o
     comportamento que `min-width: 0` ali em cima ja preparava. Medido no
     Chromium: 142px para 72px a 390px, com os tres na mesma linha; em 620px e
     em 1440px a altura da barra nao muda. */
  flex: 1 1 0;
}
.topbar-manager {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}
/* A marca na ponta direita do topo. `margin-left: auto` e o que a empurra para
   la; o nome da gestora continua a esquerda, ao lado do titulo. */
.topbar-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  border-radius: 8px;
}
.topbar-mark:focus-visible {
  outline: 2px solid var(--ac-blue);
  outline-offset: 3px;
}
.manager-mark {
  display: block;
  flex: 0 0 auto;
  /* Altura fixa, largura livre ate o limite: logo de gestora tanto e quadrado
     quanto uma assinatura larga, e esticar qualquer um dos dois o estraga. */
  height: 42px;
  width: auto;
  max-width: 180px;
}
.manager-logo {
  /* `contain` e nao `cover`: logo cortado deixa de ser logo. */
  object-fit: contain;
  object-position: right center;
}
.manager-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.topbar-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topbar-link svg {
  opacity: 0.55;
  vertical-align: baseline;
}
.topbar-link:hover {
  border-bottom-color: var(--line-strong);
}
.topbar-link:hover svg {
  opacity: 1;
}
.topbar-link:focus-visible {
  outline: 2px solid var(--ac-blue);
  outline-offset: 3px;
  border-radius: 3px;
}


@media (max-width: 620px) {
  .manager-mark {
    height: 32px;
    max-width: 120px;
  }
  .manager-initials {
    width: 32px;
    font-size: 12px;
  }

  .share-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* -------------------------------------------------- visao geral: card de gestora */
/* Sem componente novo nem acento novo: o card e o `.band`, cujo `--ac` padrao ja
   e o roxo da gestora. O que entra sao ajustes de tamanho dentro dele. */
/* A marca menor que no topo da carta: la ela e a identidade da pagina, aqui e
   uma entre varias num painel denso. */
.band-manager .manager-mark {
  height: 26px;
  max-width: 104px;
}
.band-manager .manager-initials {
  width: 26px;
  font-size: 11px;
}
/* A tese ocupa a largura do card: o limite de 62ch da `.prose` foi escrito para
   prosa longa em coluna larga, e num card de 340px nao restringe nada. */
.band-manager .prose {
  max-width: none;
}
/* O titulo herda a serifada de `.band h2`; ao link falta so a cor e o sublinhado
   no hover, como na lista de cartas. */
.panel-title {
  color: var(--txt);
  text-decoration: none;
}
.panel-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Estica por cima do card inteiro o link do destino principal dele, como
   `a.row-title::after` faz na linha da lista. `.band` ja e
   `position: relative`, entao o `inset: 0` para no card e nao na pagina.

   Qual e o destino principal muda por tela: no indice de gestoras e o nome, que
   leva a pagina dela; na visao geral e o titulo, que leva ao resumo da carta.
   Os outros links do card sobem acima do esticamento (a regra logo abaixo) --
   sem isso o esticamento engoliria o clique deles. */
a.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}
/* O anel de foco acompanha o card, e nao as duas palavras do nome: e a area que
   responde ao clique que precisa se anunciar a quem navega pelo teclado. */
a.card-link:focus-visible {
  outline: none;
}
a.card-link:focus-visible::after {
  outline: 2px solid var(--ac-blue);
  outline-offset: 2px;
}
/* Acima do link esticado, senao eles nunca recebem o clique -- e o mesmo que
   `.row-source` faz na linha da lista. Sao os dois destinos externos do card da
   visao geral: o nome da gestora e a marca dela, ambos no site oficial.

   `a.topbar-mark`, e nao `.topbar-mark`: gestora sem site oficial emite a marca
   como `<span>`, e subir um span acima do esticamento criaria uma zona morta --
   vinte e seis pixels de monograma que nao levam a lugar nenhum, em vez de
   caírem no card e abrirem o resumo. So sobe o que e link. */
.band-head a.band-label-link,
.band-head a.topbar-mark {
  position: relative;
  z-index: 1;
}
.panel-meta {
  margin: 5px 0 12px;
}
.overview-foot {
  margin: var(--gap-card) var(--gap-page) 0;
}

@media (max-width: 760px) {
  .overview-foot {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
}

/* -------------------------------------------------- pagina da gestora (2.3) */
/* O "Quem Somos" e um `.band` sozinho, e `.band` nao traz margem -- quem a da
   aos cards e o `.grid`. Usar o `.grid` aqui deixaria a faixa com 340px numa
   tela larga, porque ele monta colunas e nao uma so. Dai as mesmas margens de
   pagina que o `.list` de cartas logo abaixo dela usa. */
.manager-about {
  margin: var(--gap-card) var(--gap-page) 0;
}
/* A procedencia do paragrafo fica sob ele, e nao antes: primeiro o que a gestora
   diz, depois desde quando isso foi conferido. */
.manager-about-meta {
  margin: 10px 0 0;
}
.manager-about-meta a {
  color: inherit;
}

@media (max-width: 760px) {
  .manager-about {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
}

/* -------------------------------------------------- comparativos por pilar (Fase 3) */
/* Um `.band` por pilar, em rosa -- o acento que a secao 1 da ao comparativo --,
   com uma linha por gestora. O mesmo `.band` das outras telas: o que entra aqui
   e layout, nao componente. Nenhuma cor carrega direcao (FASE_3_SPEC.md secao
   6): o rosa e do pilar, igual em todas as linhas. */
.pillar-nav {
  display: grid;
  gap: 8px;
  margin: var(--gap-card) var(--gap-page) 0;
}
.pillar-nav-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* O segundo grupo de chips abre com o mesmo fio tracejado que separa as
   regioes no corpo da pagina: a divisao Brasil/US se le igual nos dois. */
.pillar-nav-group + .pillar-nav-group {
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
}
.pillar-nav .filters-label {
  flex: 0 0 58px;
  font-weight: 600;
}
.pillar-nav .pill {
  --ac: var(--ac-pink);
}

/* A regiao: um titulo em caixa alta sobre um fio tracejado. E a separacao que
   o spec pede entre Brasil e US, e ela tem nome escrito -- nao so um espaco. */
.pillar-region {
  margin: 26px var(--gap-page) 0;
}
.pillar-region-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.pillar-region-title::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--line-strong);
}

.band-pillar {
  --ac: var(--ac-pink);
  /* O salto pela ancora do chip nao pode esconder o titulo sob a topbar fixa. */
  scroll-margin-top: 84px;
}
.band-pillar + .band-pillar {
  margin-top: var(--gap-card);
}
.pillar-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-bottom: 12px;
}
.band .pillar-head h3 {
  margin: 0;
  font-size: 20px;
}
.pillar-aliases {
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.pillar-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pillar-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.pillar-row:last-child {
  padding-bottom: 0;
}
.pillar-who {
  min-width: 0;
}
.pillar-manager {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ac-purple);
  overflow-wrap: anywhere;
}
.pillar-manager:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pillar-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 5px 0 0;
}
.pillar-say {
  min-width: 0;
}
/* A postura e o modelo falando: menor, em `--dim`, e com o rotulo escrito --
   RESUMO -- dizendo o que ela e. `--dim` e nao `--faint` no rotulo: ele e
   informacao (quem escreveu aquilo), e a 9px o `--faint` fica abaixo do
   contraste minimo (secao 4). */
/* A postura em destaque (decisao do responsavel, 2026-09-23): e o que se le de
   relance. Continua sem cor por direcao -- o rotulo usa o acento da secao, igual
   em toda celula -- e a frase da gestora segue colada embaixo. */
.pillar-stance {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt);
}
.pillar-stance-label {
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-pink);
  vertical-align: 2px;
}
/* A frase da gestora e o texto principal da tela. O limite de largura e de
   leitura: a 1440px uma frase de duas linhas virava uma so de 170 caracteres. */
.pillar-statement {
  max-width: 88ch;
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.pillar-source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
}
.pillar-letter {
  min-width: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pillar-letter:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pillar-say .not-stated {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 760px) {
  .pillar-nav,
  .pillar-region {
    margin-left: var(--gap-page-sm);
    margin-right: var(--gap-page-sm);
  }
  /* Alvo de toque maior no celular (secao 4). */
  .pillar-nav .pill {
    padding: 8px 13px;
  }
  .pillar-nav .filters-label {
    flex-basis: 100%;
  }
}
@media (max-width: 620px) {
  /* Nome e data numa linha, a frase embaixo com a largura toda. */
  .pillar-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 12px 0;
  }
  .pillar-who {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .pillar-date {
    margin: 0;
  }
  .pillar-statement {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .pillar-stance {
    font-size: 16px;
  }
}