/* ==========================================================================
   CARROSSEL DE PERFIS — prefixo pfl-
   Coluna de texto à esquerda, trilho de cards de pessoa que anda sozinho e
   sangra pela direita, esteira de texto no chão da seção.

   Tokens usados:
     --pad --max          conta do recuo que alinha a coluna de texto à página
     --display --ease     tipografia e curva do projeto
     --sec-gap            respiro vertical da dobra
     --accent --dark      painel da bio: fundo de marca, texto escuro
     --fg --fg-2 --rule   título, corpo e filete, herdados do escopo de tom
     --radius-media       canto da foto

   A BIO É UMA ILHA DE MARCA. O painel que cobre a foto no hover pinta
   --accent e escreve em --dark, e não em --fg: assim ele lê igual numa
   seção clara e numa escura. O que está fora do painel (nome, cargo,
   filete) continua lendo o escopo de tom da seção.
   ========================================================================== */

.pfl{
  /* RECUO DA COLUNA (contrato §4). Não existe .wrap nesta dobra: o trilho
     precisa vazar para a direita, e um .wrap o prenderia. Esta variável
     refaz a conta do .wrap — metade da sobra mais o respiro — e é aplicada
     ao grid, não à página. O 100% é a largura da SEÇÃO.
       tela estreita ->  a coluna já encosta nas bordas, vale --pad
       tela larga    ->  (100% - --max) / 2 + --pad */
  --pfl-inset:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));

  --pfl-col:clamp(280px,32vw,468px);     /* coluna de texto */
  --pfl-gap:clamp(32px,5.5vw,80px);      /* vão entre texto e trilho */
  --pfl-card:clamp(258px,33vw,485px);    /* largura do card */
  --pfl-space:clamp(20px,4.5vw,65px);    /* vão entre um card e o próximo */

  /* Corpo do título. Mesmo teto e mesmo motivo do
     conteudo/apresentacao-foto-alternada: o original roda 160px numa display
     condensada, e uma display de largura normal estoura a coluna nesse corpo. */
  --pfl-title:clamp(46px,6vw,104px);
  --display-xl:var(--pfl-title);

  /* Velocidade da esteira de cards, em PIXELS POR SEGUNDO. Lida pelo script,
     que faz a conta por tempo e não por quadro — assim a dobra anda igual em
     tela de 60Hz e de 120Hz. */
  --pfl-speed:26;

  --pfl-strip-size:clamp(46px,10vw,150px);   /* corpo da esteira de texto */
  --pfl-strip-gap:clamp(24px,3.4vw,50px);
  --pfl-strip-dur:38s;

  /* Chão da seção. A esteira ocupa o lugar do respiro de baixo: ela é a
     última coisa da dobra e encosta na seção seguinte, que é o efeito.
     Numa página SEM a esteira, ponha --pfl-floor:var(--sec-gap) e o respiro
     volta ao normal. */
  --pfl-floor:0px;

  position:relative;
  /* O trilho vaza para fora da segunda coluna do grid; quem corta é aqui. */
  overflow:hidden;
  /* Não usa .sec-pad porque o rodapé desta dobra não é vazio — ver
     --pfl-floor acima. O topo continua lendo --sec-gap, que é a fonte
     única do ritmo entre dobras (§4). */
  padding-block:var(--sec-gap) var(--pfl-floor);
}

.pfl-grid{
  display:grid;
  grid-template-columns:minmax(0,var(--pfl-col)) minmax(0,1fr);
  gap:var(--pfl-gap);
  align-items:center;
  /* Único padding-inline do componente, e ele é do GRID, não da página:
     alinha a coluna de texto à margem sem prender o trilho. Mesma solução
     do midia/galeria-scroll-horizontal. */
  padding-inline-start:var(--pfl-inset);
}

/* ---------------------------------------------------------------- coluna de texto */
.pfl-head{display:flex;flex-direction:column;gap:clamp(22px,3vw,32px);min-width:0}

/* O título é a primitiva .display-xl do core (ver core/base.css). Era a
   segunda das três cópias que dispararam a promoção do §6. */

.pfl-body{display:flex;flex-direction:column;gap:20px}
.pfl-p{font-size:16px;line-height:1.5;color:var(--fg-2)}

/* ---------------------------------------------------------------- trilho */
/* min-width:0 é o que permite a coluna encolher abaixo do conteúdo — sem
   ele, o grid dá ao trilho a largura da fila inteira e a coluna de texto
   some.

   O overflow:hidden aqui é OBRIGATÓRIO, e não é o mesmo da seção. O trilho
   anda para a esquerda: sem este recorte, o card que sai de cena continua
   desenhado e passa POR CIMA do título e dos parágrafos. Quem corta pela
   direita continua sendo a seção — esta coluna do grid vai até a borda da
   página, então o recorte da direita cai exatamente no mesmo lugar.

   O padding-block é o preço do recorte: overflow:hidden corta nos dois
   eixos, e sem esses 6px o anel de foco do card — que o core desenha 3px
   para fora da caixa — sumiria em cima e embaixo. */
.pfl-rail{min-width:0;overflow:hidden;padding-block:6px}

.pfl-track{
  display:flex;
  gap:var(--pfl-space);
  width:max-content;
  cursor:grab;
  /* O gesto horizontal é nosso; o vertical continua sendo da página. Sem
     isto, arrastar de lado no celular trava a rolagem. */
  touch-action:pan-y;
  /* Arrastar sobre texto e foto selecionaria os dois. */
  user-select:none;-webkit-user-select:none;
  will-change:transform;
}
.pfl-track.is-dragging{cursor:grabbing}
/* O trilho é focável (tabindex no markup) para as setas funcionarem. O anel
   do core desenha 3px para fora; sem este respiro, a seção o cortaria. */
.pfl-track:focus-visible{outline-offset:-2px}

.pfl-item{flex:0 0 var(--pfl-card);min-width:0}

/* ---------------------------------------------------------------- card */
.pfl-card{
  display:flex;flex-direction:column;
  gap:clamp(20px,3vw,40px);
  /* O card não tem fundo nem borda: ele é foto, filete e duas linhas sobre
     o papel da seção. Qualquer caixa aqui brigaria com a esteira do rodapé,
     que é justamente o que dá corpo à dobra. */
}
/* O card é focável (tabindex no markup) e o anel do core fica: chegar por
   teclado abre a bio, mas sem o anel não há como saber ONDE se está na
   fileira. Clicar com o mouse não acende nada — :focus-visible só dispara
   para foco por teclado. */

/* 1.08 é a proporção do original (485 × 449): quase quadrado, um fio mais
   largo que alto. Retrato fechado dentro de caixa larga é o enquadramento
   que faz a fileira de rostos ler como fileira, e não como cartas. */
.pfl-photo{
  position:relative;
  aspect-ratio:1.08;
  overflow:hidden;
  border-radius:var(--radius-media);
  background:var(--rule);
}

/* O corte é por card, não por regra: retrato de estúdio tem o rosto no terço
   de cima, foto de ambiente tem no meio, e cravar um valor único faria uma
   das duas famílias sair decapitada. Cada card declara o seu no markup
   (style="--pfl-focus:50% 30%"), como no conteudo/pilares-texto-na-foto —
   o que também impede o acoplamento entre a ORDEM dos cards e o CSS. */
.pfl-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  object-position:var(--pfl-focus,50% 32%);
}
/* 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. O retorno é o painel da bio, que cobre a
   foto em opacidade — ela mesma não se move. */


/* PAINEL DA BIO. Cobre a foto — não o card inteiro. No original ele cobre
   tudo e apaga o nome da pessoa justamente enquanto se lê a bio dela; aqui
   o nome e o cargo continuam embaixo, legíveis, e o painel entra só onde a
   frase "aparece mais texto na imagem" quer dizer alguma coisa.
   pointer-events:none em repouso: um painel invisível por cima da foto
   comeria o hover dela e o card nunca acenderia. */
/* O PAINEL SÓ ESMAECE — não sobe e não desfoca. Os dois efeitos foram
   testados nele e os dois abrem fresta escura sobre a foto:

     filter:blur() desfia as bordas do próprio elemento, então o retângulo
     sólido fica MENOR que a caixa enquanto o desfoque cai a zero, e a foto
     aparece num halo em volta;

     transform:translateY() desliza o painel para baixo dentro de uma caixa
     que corta (a .pfl-photo tem overflow:hidden), deixando à mostra uma
     tira da foto no topo durante toda a subida.

   Quem entra com blur e subida é o TEXTO, logo abaixo — ali o efeito é o
   que o §5 do contrato pede e não há borda para desfiar, porque o
   parágrafo tem o padding do painel inteiro em volta. */
.pfl-bio{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-start;
  padding:clamp(18px,2.6vw,32px);
  background:var(--accent);
  color:var(--dark);
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
}
.pfl-card:hover .pfl-bio,
.pfl-card:focus-visible .pfl-bio,
.pfl-card.is-open .pfl-bio{opacity:1}

/* 16px é o corpo do original, e é o teto: o painel tem a altura da foto e
   não rola. Quem escreve bio mais longa que o padrão editorial da ficha
   perde o fim dela, cortado pelo overflow da caixa.

   O atraso é o que dá ordem à cena: primeiro o painel cobre a foto, e só
   então a bio assenta. Simultâneos, os dois viram um borrão só. */
.pfl-bio-text{
  font-size:clamp(13px,1.2vw,16px);
  line-height:1.5;
  transform:translateY(14px);filter:blur(8px);
  transition:transform .5s var(--ease) .06s,
             filter .5s var(--ease) .06s;
}
.pfl-card:hover .pfl-bio-text,
.pfl-card:focus-visible .pfl-bio-text,
.pfl-card.is-open .pfl-bio-text{transform:none;filter:blur(0)}

/* Filete entre a foto e a assinatura. Era rgba(0,0,0,.2) cravado no
   original; --rule é exatamente esse degrau, e vem do escopo de tom. */
.pfl-rule{display:block;height:1px;background:var(--rule)}

.pfl-foot{display:flex;flex-direction:column;gap:8px}

/* O nome é fonte de TEXTO em corpo grande, não display: quem grita nesta
   dobra é o título e a esteira. Peso 400 é o teto — a nota do tema explica
   que pedir mais de uma face que só tem Light faz o navegador engordar a
   letra artificialmente. O contraste com o cargo vem do corpo, não do peso,
   e é assim no original também. */
.pfl-name{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em;
  color:var(--fg);
}
.pfl-role{font-size:16px;line-height:1.5;color:var(--fg-2)}

/* ---------------------------------------------------------------- esteira */
/* Tinta a 10%: é textura de fundo, não título. Acima disso ela disputa com
   o nome das pessoas e a dobra passa a ter dois assuntos. */
.pfl-strip{
  overflow:hidden;
  margin-block-start:clamp(56px,8vh,100px);
  opacity:.1;
  pointer-events:none;
  user-select:none;-webkit-user-select:none;
}

/* Dois conjuntos idênticos, o trilho anda -50% — a largura exata de um
   deles. É o que fecha o laço sem salto (mesma receita do
   prova/marquee-logos). */
.pfl-strip-rail{
  display:flex;width:max-content;
  animation:pflStrip var(--pfl-strip-dur) linear infinite;
}
.pfl-strip-set{
  display:flex;gap:var(--pfl-strip-gap);
  /* Mantém o vão na emenda entre as duas cópias. */
  padding-inline-end:var(--pfl-strip-gap);
}

.pfl-strip-word{
  font-family:var(--display);font-weight:700;
  font-size:var(--pfl-strip-size);
  line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--fg);
  white-space:nowrap;
}

@keyframes pflStrip{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------------------------------------------------------------- movimento reduzido */
/* Para a esteira de texto e apaga a transição do painel. O trilho de cards
   é tratado no script.js: sem movimento reduzido ele anda sozinho; com,
   fica parado e só o arrasto o move — gesto pedido pela pessoa não é
   movimento imposto. */
@media(prefers-reduced-motion:reduce){
  .pfl-strip-rail{animation:none}
  .pfl-bio{transition:none}
  .pfl-bio-text{transition:none;transform:none;filter:none}
}

/* ---------------------------------------------------------------- toque */
/* Sem ponteiro não existe hover. A bio continua alcançável — o script abre e
   fecha no toque — mas o cursor de arrasto não faz sentido. */
@media(hover:none){
  .pfl-track{cursor:default}
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:900px){
  /* Uma coluna só. O padding-inline-start do grid continua valendo, então
     texto e primeiro card seguem alinhados na mesma margem e o trilho
     continua vazando pela direita — sem margem negativa e sem 100vw. */
  .pfl-grid{grid-template-columns:1fr;gap:clamp(32px,5vh,48px)}
}

@media(max-width:560px){
  .pfl{--pfl-title:clamp(38px,12vw,58px);--pfl-space:18px}
  .pfl-body{gap:16px}
  .pfl-card{gap:18px}
}