/* ==========================================================================
   CARROSSEL DE FOCO CENTRAL — prefixo focus-
   Fila de cards retrato com encaixe no CENTRO. O card centrado está em
   tamanho e brilho cheios; os vizinhos encolhem e escurecem em proporção à
   distância que os separa do meio do trilho.

   Tokens usados:
     --display            título do card e contador (o texto de apoio herda
                          --sans do core, sem declarar)
     --ease               curva única do projeto, em toda transição
     --accent             ponto ativo e realce dos botões
     --dark-rgb           véu em gradiente da legenda sobre a foto
     --light              texto sobre a foto — o card é ilha escura
     --radius-media       canto da foto
     --radius-pill        disco dos botões, ponto e pílula de categoria
     --rule --rule-2      borda do botão e ponto em repouso
     --bg                 fundo enquanto a foto não pintou
     --fg --fg-2 --fg-muted   legenda do rodapé, contador e botões
     --pad --max          NÃO são lidos aqui: o cabeçalho e o rodapé são
                          .wrap, e a coluna deles vem de lá

   A CONTA QUE SUBSTITUI O --inset. Os componentes irmãos que sangram alinham
   o primeiro item à borda da COLUNA (--hgal-inset, --depo-inset). Aqui o
   encaixe é no CENTRO: o card ativo tem de conseguir chegar ao meio da tela,
   e o primeiro e o último só chegam se houver meia tela de sobra antes e
   depois deles. Daí padding-inline:calc(50% - card/2) no trilho — metade da
   seção menos metade do card. O 50% é da SEÇÃO: o trilho tem de continuar
   filho direto dela.

   O QUE O SCRIPT ESCREVE. Só --focus-k, um número de 0 a 1 por card: 0 no
   centro, 1 a um passo de distância. A escala e o brilho são estas duas
   linhas de CSS. O padrão do var() é 0, não 1 — sem script, a fila fica
   inteira em tamanho cheio, que é o estado degradado legível.
   ========================================================================== */

.focus{
  /* Largura do card. O clamp faz o desktop mostrar o card do meio inteiro e
     boa parte dos dois vizinhos; no celular sobra a fatia que promete o
     próximo. Altura vem do aspect-ratio 4/5 da mídia: 520px de largura são
     650px de altura, e é por isso que o teto não sobe mais. */
  --focus-card:clamp(260px,40vw,520px);
  --focus-gap:clamp(14px,2vw,26px);

  /* Os dois parafusos da hierarquia, em fração de 0 a 1.
     escala: o vizinho fica scale(1 - k * --focus-scale)  -> .14 = 86%
     brilho: o vizinho fica brightness(1 - k * --focus-dim) -> .45 = 55% */
  --focus-scale:.14;
  --focus-dim:.45;

  /* --dur do core é .9s: certo para entrada de seção, lento demais para a
     foto responder ao ponteiro. Duração de interação é local. */
  --focus-dur:.55s;

  /* A seção é um GRID de uma coluna por um motivo só: no desktop os dois
     botões ficam na mesma célula do cabeçalho, alinhados pela base e pela
     direita; no celular eles ganham uma linha própria depois do rodapé.
     Cabeçalho e rodapé são caixas diferentes, então order de flex não
     resolveria — grid resolve, e sem posicionamento absoluto. */
  display:grid;
  grid-template-columns:100%;
  row-gap:clamp(26px,4vh,44px);
}

/* ---------------------------------------------------------------- cabeçalho */
.focus-head{grid-row:1;grid-column:1;min-width:0}

/* MESMA CÉLULA do cabeçalho. Os dois são .wrap, então os dois pousam
   exatamente sobre a coluna — o título encosta na esquerda, os botões na
   direita, e nada precisa saber a largura do outro.

   pointer-events:none na caixa é obrigatório: ela cobre a largura inteira da
   coluna, e sem isso a metade direita do título ficaria sob um retângulo
   invisível que engole clique e seleção. Os botões devolvem auto. */
.focus-nav{
  grid-row:1;grid-column:1;
  align-self:end;
  display:flex;justify-content:flex-end;gap:12px;
  pointer-events:none;
}

/* Disco de ícone, o mesmo desenho do midia/galeria-scroll-horizontal. Não é
   .btn: .btn é pílula de TEXTO com padding fixo, e espremer 42px nela seria
   brigar com a primitiva. Terceira aparição do disco na biblioteca — se
/* O disco de ícone é a primitiva .btn-disc do core (core/base.css): forma,
   cor, hover e estado desabilitado vêm de lá, e o markup traz as duas
   classes. Esta pasta escrevia as mesmas seis linhas — eram cinco cópias
   idênticas na biblioteca, e o §6 manda promover na terceira. */
   Sobra uma linha só, e ela é desta dobra: a faixa de navegação inteira é
   pointer-events:none para não cobrir o trilho que passa por baixo, então o
   botão precisa devolver o seu. */
.focus-btn{pointer-events:auto}

/* ---------------------------------------------------------------- trilho */
.focus-track{
  grid-row:2;grid-column:1;
  display:flex;align-items:flex-start;
  gap:var(--focus-gap);
  margin:0;list-style:none;

  /* A conta do topo do arquivo: meia seção menos meio card, dos dois lados.
     max(0px,…) é rede para a tela mais estreita que o card mínimo, onde a
     conta iria a negativo. */
  padding-inline:max(0px,calc(50% - var(--focus-card) / 2));
  /* Respiro para o anel de foco, que o core desenha 3px para fora e o
     overflow cortaria. */
  padding-block:10px 14px;

  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Com scroll-snap-align:center o snapport é a caixa de padding inteira, e
     o centro dela já é o centro do trilho: scroll-padding não é preciso.
     Medido — o alvo do scrollIntoView e a parada do snap batem em 0px. */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;

  /* Barra escondida nos três motores. É o que obriga os botões e os pontos a
     existirem: sem barra, some o último indício de que há mais fila. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.focus-track::-webkit-scrollbar{width:0;height:0;display:none}

/* Enquanto a mão puxa, o encaixe SAI do caminho. Snap obrigatório durante o
   arrasto briga com o dedo: o navegador tenta voltar ao ponto de parada a
   cada quadro e o trilho fica emborrachado. Quem devolve o encaixe é o
   script, e só depois que o deslize de volta assentou. */
.focus-track.is-free{scroll-snap-type:none}
.focus-track.is-dragging,
.focus-track.is-dragging .focus-card{cursor:grabbing}
.focus-track.is-dragging{user-select:none;-webkit-user-select:none}

.focus-item{
  flex:0 0 var(--focus-card);min-width:0;
  scroll-snap-align:center;
}

/* ---------------------------------------------------------------- card */
/* As duas linhas que o --focus-k comanda. Não há transition aqui de
   propósito: o script reescreve --focus-k a cada quadro do scroll, e uma
   transição reiniciada a cada quadro faz o card perseguir o valor com
   atraso — a fila inteira lê emborrachada. A suavidade vem do scroll, que
   já é contínuo. Ver o gotcha da ficha, com os números. */
.focus-card{
  display:block;position:relative;
  transform:scale(calc(1 - var(--focus-k,0) * var(--focus-scale)));
  filter:brightness(calc(1 - var(--focus-k,0) * var(--focus-dim)));
}
/* Sob movimento reduzido a escala ENCOLHE, não morre — e o brilho fica
   inteiro, porque escurecer não é deslocamento. É a mesma decisão do
   midia/galeria-scroll-horizontal, onde o zoom do hover cai de 1.06 para
   1.02 em vez de sumir. Zerar aqui deixaria seis cards idênticos e a dobra
   pararia de comunicar qual está ativo, que é a única coisa que ela faz.
   O que o script desliga é outra coisa: o deslocamento programado passa a
   behavior:'auto' e a legenda troca sem transição. */
@media(prefers-reduced-motion:reduce){
  .focus{--focus-scale:.05}
}

.focus-media{
  display:block;position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius-media);
  background:var(--bg);
}

.focus-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* HOVER NÃO MEXE NA IMAGEM (CLAUDE.md §6, regra de 2026-09-29). O zoom de
   foto sob o ponteiro saiu: escala e deslocamento de mídia no hover mexem
   em recorte e composição, e é o que quebra a página quando o componente
   é colado noutro lugar. Aqui o card sob o ponteiro já responde pela
   borda e pelo estado ativo do trilho; a foto fica parada. */


/* Legenda DENTRO da foto, ancorada embaixo, com véu em gradiente mascarado
   (contrato §6 — texto sobre imagem). O backdrop-filter continua enxergando
   a foto mesmo com o filter:brightness do card acima: o filtro do card cria
   uma raiz de backdrop, e a <img> está DENTRO dela. Medido. */
.focus-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:66px 26px 24px;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.92) 0%,
    rgba(var(--dark-rgb),.52) 46%,
    transparent 100%);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
}

/* Reaproveita a .pill do core; só o tom muda, porque a pílula está sobre foto
   e não sobre a seção. Seletor duplo de propósito: .pill e .focus-tag têm a
   mesma especificidade, e o contrato §6 proíbe depender de qual folha
   carregou primeiro. */
.focus-cap .focus-tag{
  color:var(--light);
  border-color:color-mix(in srgb,var(--light) 32%,transparent);
}

.focus-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.7vw,25px);line-height:1.16;letter-spacing:-.022em;
  color:var(--light);
  max-width:15ch;
}

/* ---------------------------------------------------------------- rodapé */
.focus-foot{
  grid-row:3;grid-column:1;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,56px);
}

/* Piso de três linhas, medido: a 52ch, uma frase de 120 caracteres ocupa 3
   linhas e uma de 95 ocupa 2. Sem o piso, a barra de pontos sobe e desce a
   cada troca de card — e ela está alinhada pela BASE justamente para poder
   ficar parada. Mexeu no comprimento das frases ou no max-width, refaça a
   conta: o piso é em em, então acompanha o corpo do texto sozinho. */
.focus-notes{
  max-width:52ch;min-width:0;
  min-height:calc(1.6em * 3);
  transition:opacity .15s var(--ease),filter .15s var(--ease),transform .15s var(--ease);
}
/* Meio caminho da troca: some com blur e um passo para baixo, o script troca
   qual frase está visível, e ela volta. 150ms para cada metade — os 300ms da
   troca inteira. Em repouso não há filter declarado, para não custar camada. */
.focus-notes.is-swap{opacity:0;filter:blur(10px);transform:translateY(8px)}
@media(prefers-reduced-motion:reduce){
  .focus-notes{transition:none}
  .focus-notes.is-swap{opacity:1;filter:none;transform:none}
}

/* Sem regra de display: assim o [hidden] do navegador continua valendo.
   Declarar display aqui venceria o [hidden] e as seis frases apareceriam
   empilhadas — é a armadilha que o .hgal-nav[hidden] documenta do outro
   lado, e a saída aqui é simplesmente não declarar. */
.focus-note{
  font-size:clamp(15px,1.15vw,17px);line-height:1.6;
  color:var(--fg-2);
}

.focus-bar{
  display:flex;align-items:center;gap:clamp(16px,2vw,26px);
  flex:0 0 auto;padding-bottom:2px;
}

.focus-dots{display:flex;align-items:center;gap:7px}

/* O alvo tem 22x26; o ponto visível tem 8. Um botão de 8px é impossível de
   acertar com o dedo, e o alvo maior não muda o desenho. */
.focus-dot{
  width:22px;height:26px;padding:0;
  border:0;background:none;
  display:grid;place-items:center;
}
.focus-dot::before{
  content:"";
  width:8px;height:8px;border-radius:var(--radius-pill);
  background:var(--rule-2);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.focus-dot:hover::before{background:var(--fg-muted)}
/* O estado vem do atributo que o leitor de tela já lê, não de uma classe
   paralela: uma fonte de verdade só. */
.focus-dot[aria-current="true"]::before{background:var(--accent);width:22px}

.focus-count{
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.12em;
  color:var(--fg-muted);white-space:nowrap;
}
.focus-count-now{color:var(--fg)}

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  .focus{
    /* A fatia do vizinho que aparece é (tela - card) / 2 - vão, e ainda
       encolhe pela escala. Medido em 390px: com 76vw sobravam 21px do
       próximo — não é promessa, é um risco escuro na borda. Com 68vw e o vão
       menor sobram ~40px, que já se leem como um card cortado. Custa 30px de
       largura do card ativo, e vale. */
    --focus-card:min(68vw,310px);
    --focus-gap:12px;
    /* Cabe menos tela: com .14 o vizinho encolheria a ponto de a fatia à
       mostra sumir de novo. .08 mantém a hierarquia legível. */
    --focus-scale:.08;
    --focus-dim:.4;
    row-gap:22px;
  }
  /* Os botões saem da célula do cabeçalho e ganham linha própria, embaixo da
     legenda e da barra de pontos — onde o polegar alcança. */
  .focus-nav{
    grid-row:4;grid-column:1;
    align-self:auto;justify-content:flex-start;
    pointer-events:auto;
  }
  /* A pílula é uma FORMA: só se sustenta em uma linha. "Consultoria de
     investimentos" tem 28 caracteres e não cabe na largura do card de
     celular — a borda quebra em duas e a pílula vira um retângulo torto.
     Aqui o rótulo abre mão da pílula e vira linha de rótulo, que quebra sem
     ficar feia. Encurtar o conteúdo para caber seria o caminho errado. */
  .focus-cap .focus-tag{
    border-color:transparent;
    padding:0;
    font-size:10px;letter-spacing:.14em;
  }
  .focus-foot{flex-direction:column;align-items:flex-start;gap:20px}
  .focus-bar{padding-bottom:0}
  .focus-notes{min-height:calc(1.6em * 3)}
  .focus-cap{padding:52px 18px 18px;gap:9px}
}
/* O bloco de largura acima reescreve --focus-scale e venceria o de movimento
   reduzido lá de cima por ordem de fonte. Esta query é a única forma de
   manter a promessa nos dois eixos ao mesmo tempo — e por ser de largura,
   mora aqui embaixo com as outras. */
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .focus{--focus-scale:.04}
}
@media(max-width:420px){
  .focus-title{font-size:17px}
  .focus-notes{min-height:calc(1.6em * 4)}
}