/* ==========================================================================
   PAINÉIS EMPILHADOS COM ÍNDICE — pnl-
   Quatro painéis irmãos, todos sticky no mesmo top, cobrindo-se por inteiro;
   índice lateral também colado.

   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --display --nav-h --ease --radius-media --pad --max
   Primitivas usadas: .wrap .sec-pad .eyebrow .sec-title .sec-lead .pill
                      .btn/.btn-primary .grain .visually-hidden
   Compõe: efeitos/selo-circular (o .selo do cabeçalho — o CSS dele vem de lá,
           nada aqui redesenha o selo)

   A PILHA É CSS PURO E CABE EM TRÊS LINHAS: os quatro painéis são irmãos com
   o mesmo `top`, têm altura menor que o bloco que os contém (.pnl-pilha) e
   fundo opaco. Sticky faz o resto, e a ordem de árvore decide quem cobre quem.
   Não há uma linha de JavaScript envolvida no empilhamento.

   O QUE QUEBRA A PILHA, e é sempre a mesma coisa: `overflow` diferente de
   `visible` em QUALQUER ancestral entre o painel e a .pnl-pilha mata o sticky
   (medido no irmão conteudo/rolagem-sincronizada, que derruba o painel em
   ~800px). Por isso não existe overflow:hidden em .pnl-pilha, .pnl-body,
   .wrap nem na seção. O overflow:hidden do .pnl-painel é seguro porque ele é
   o PRÓPRIO elemento colado — overflow recorta descendente, não a si mesmo.
   ========================================================================== */

.pnl{
  /* Onde os painéis e o índice encaixam. Lê --nav-h para o componente
     funcionar em projeto com menu fixo alto e baixo sem tocar no CSS. */
  --pnl-top:calc(var(--nav-h) + clamp(14px,2.4vh,28px));
  /* Respiro sob o painel colado. Ele é também o vão entre painéis na pilha,
     e é o que sobra de tela por onde o próximo aparece. Uma variável só
     porque as duas medidas TÊM de andar juntas: se o vão for maior que o
     respiro, o painel seguinte entra antes de haver espaço para ele. */
  --pnl-fim:clamp(24px,5vh,52px);
  /* Altura do painel. O teto de 660px existe porque acima disso o bloco de
     texto boia no meio de meia tela de vazio; o piso de 400px é o que o
     conteúdo (pílula + título + quatro linhas + botão) ocupa sem apertar. */
  --pnl-h:clamp(400px,calc(100vh - var(--pnl-top) - var(--pnl-fim)),660px);
  --pnl-gap:var(--pnl-fim);
  --pnl-nav-w:158px;
  --pnl-col:clamp(24px,3vw,52px);
  /* Proporção arte : texto dentro do painel. */
  --pnl-col-arte:1.22fr;
  /* Altura do trilho horizontal do celular — MEDIDA (49px a 390x844), não
     estimada. Só o scroll-margin-top do caso sem script a consome; com script
     quem mede o trilho é o próprio script. */
  --pnl-trilho-h:50px;
}

/* ---- cabeçalho ---- */
.pnl-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.pnl-head-txt{max-width:62ch}
.pnl-selo-slot{justify-self:end}

/* ---- corpo: índice + pilha ---- */
.pnl-body{
  display:flex;
  gap:var(--pnl-col);
  margin-top:clamp(44px,7vh,84px);
}

/* O índice é um item flex de altura esticada (o padrão), e é isso que dá ao
   .pnl-nav-list um bloco alto onde grudar. Trocar align-items para start aqui
   encolhe o .pnl-nav e o índice deixa de acompanhar a pilha. */
.pnl-nav{flex:0 0 var(--pnl-nav-w)}

.pnl-nav-list{
  position:sticky;
  top:var(--pnl-top);
  border-inline-start:1px solid var(--rule);
}

.pnl-nav-item{
  position:relative;
  display:block;
  padding:14px 12px 16px 18px;
  color:var(--fg-muted);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
/* O filete que acende no rail do índice. É ele que faz a leitura de
   "estou aqui" antes de qualquer cor mudar. */
.pnl-nav-item::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:-1px;
  inline-size:2px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .45s var(--ease);
}
.pnl-nav-item:hover{color:var(--fg-2)}

/* O estado corrente é o ATRIBUTO, não uma classe: aria-current é o que o
   leitor de tela recebe, e ter as duas coisas criaria duas verdades que
   podem divergir. O script só mexe no atributo. */
.pnl-nav-item[aria-current="true"]{
  color:var(--fg);
  background-color:color-mix(in srgb,var(--fg) 6%,transparent);
}
.pnl-nav-item[aria-current="true"]::before{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  /* Colado na regra que desliga. O filete continua acendendo — é a resposta
     ao gesto de quem rola —, só não desliza. */
  .pnl-nav-item::before{transition:none}
}

.pnl-nav-num{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--fg-muted);
  transition:color .3s var(--ease);
}
.pnl-nav-item[aria-current="true"] .pnl-nav-num{color:var(--accent)}

.pnl-nav-rot{
  display:block;
  margin-top:7px;
  font-size:13px;
  line-height:1.3;
  letter-spacing:.005em;
}

/* ---- a pilha ---- */
.pnl-pilha{
  flex:1 1 auto;
  min-width:0;
}

/* O PERCURSO DO ÚLTIMO PAINEL, e este bloco vazio não é gambiarra: sem ele o
   painel 04 gruda e desgruda no MESMO pixel — encosta no fim do contêiner no
   instante em que encaixa, e sai de cena sem ter sido lido.

   E tem de ser um ::after, não `padding-bottom` na .pnl-pilha. Elemento
   sticky é preso ao bloco de CONTEÚDO do contêiner, e padding fica FORA dele:
   medido a 1440x900 com padding-bottom de 705px, o painel 04 já se soltava em
   scrollY 2437 (topo 36 em vez de 106, junto com os outros três) — os 705px
   contavam para a altura da página e nada para o percurso. Um bloco em fluxo
   entra no conteúdo, e aí o painel 04 ganha o mesmo passo dos outros. */
.pnl-pilha::after{
  content:"";
  display:block;
  height:calc(var(--pnl-h) + var(--pnl-gap));
}

.pnl-painel{
  position:sticky;
  top:var(--pnl-top);
  /* Sem script, a âncora nativa (#id) para no topo da janela e o painel fica
     debaixo do menu fixo. O scroll-margin-top devolve exatamente a distância
     do encaixe — é o que faz o índice funcionar com o JavaScript desligado. */
  scroll-margin-top:var(--pnl-top);
  height:var(--pnl-h);
  display:grid;
  grid-template-columns:var(--pnl-col-arte) 1fr;
  /* Opaco. É o fundo que faz a troca ler como corte limpo em vez de
     sobreposição — sem ele a pilha vira sopa. O escopo de tom vem do markup
     (.sec-deep dentro de uma seção .sec-dark): o componente não sobrescreve
     --fg, só declara em qual escopo o painel vive. Precedente:
     conteudo/bento-recursos-expansivel. */
  background:var(--bg);
  /* O fio de cima é a borda que se vê subir durante a troca. Sem ele, dois
     escuros vizinhos entrando um sobre o outro não têm aresta legível. */
  border-top:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  /* Conteúdo mais alto que --pnl-h transbordaria POR CIMA do painel de
     baixo — texto sobre texto. Recortar contém o estrago no próprio painel.
     Ver o teto editorial de quatro linhas na ficha. */
  overflow:hidden;
}
.pnl-painel + .pnl-painel{margin-top:var(--pnl-gap)}

/* ---- arte ---- */
.pnl-arte{position:relative;overflow:hidden}
.pnl-arte img{inline-size:100%;block-size:100%;object-fit:cover}

/* ---- texto ---- */
.pnl-texto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(13px,1.9vh,20px);
  /* O respiro de cima e de baixo é vh, o dos lados é vw. Não é simetria
     perdida por descuido: numa janela baixa quem falta é altura, e um padding
     em vw continuaria gastando 46px em cima e embaixo de um painel de 490 —
     medido, era o que fazia o botão cair fora do recorte. */
  padding:clamp(22px,3.4vh,46px) clamp(26px,3.2vw,50px);
  min-width:0;
}
.pnl-marca{flex:0 0 auto}

.pnl-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(20px,2vw,27px);
  line-height:1.22;
  letter-spacing:-.022em;
  color:var(--fg);
  max-width:20ch;
}

.pnl-checks{display:grid;gap:clamp(9px,1.4vh,15px)}
.pnl-checks li{
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:12px;
  align-items:start;
  font-size:15.5px;
  line-height:1.5;
  color:var(--fg-2);
}
.pnl-check{
  inline-size:16px;
  block-size:16px;
  margin-top:4px;
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.pnl-cta{margin-top:clamp(4px,1.2vh,12px)}

/* ==========================================================================
   JANELA BAIXA — a pilha sai, o índice fica
   A conta que a pilha precisa fechar é --pnl-top + --pnl-h + --pnl-fim <= 100vh,
   com --pnl-h grande o bastante para o conteúdo. Abaixo de ~700px de altura
   ela não fecha: medido a 1440x620, o painel cabia em 490px e o bloco de texto
   pedia 554 — e como o painel colado RECORTA, o botão sumia sem aviso. Um
   notebook de 1366x768 com barra de menu e abas cai bem aí.

   A saída não é apertar o texto, é desligar a pilha: os painéis viram sequência
   em altura automática e o índice continua colado ao lado, navegável. Perde-se
   a troca; não se perde nem conteúdo nem o acesso fora de ordem, que é o que
   este componente tem de próprio.
   ========================================================================== */
@media(max-height:699px){
  .pnl-pilha::after{content:none}
  .pnl-painel{
    position:static;
    top:auto;                       /* ver o comentário do bloco de celular */
    height:auto;
    min-height:var(--pnl-h);
    overflow:visible;
    scroll-margin-top:var(--pnl-top);
  }
  .pnl-painel + .pnl-painel{margin-top:clamp(36px,6vh,60px)}
  /* Sem altura fixa no painel, a <img> com block-size:100% cai na proporção
     natural dela e passa a MANDAR na altura da linha do grid: medido a
     1440x620, um painel que precisava de 514px saía com 657. Absoluta, a arte
     não pede altura nenhuma e quem decide volta a ser o texto. */
  .pnl-arte img{position:absolute;inset:0}
}

/* ==========================================================================
   MOBILE — a pilha sai de cena, o índice fica
   Empilhar painéis colados numa tela de celular esconderia o conteúdo em vez
   de organizá-lo: um painel de largura cheia com arte e quatro linhas não
   cabe em 844px de altura sem encolher a arte até ela não dizer mais nada.
   Então os painéis viram uma sequência comum, em altura automática.

   O ÍNDICE FICA, e vira um trilho horizontal colado no topo — porque é ele o
   que este componente tem e os irmãos não: acesso fora de ordem. Escondê-lo
   no celular apagaria justamente a razão de o componente existir.

   E É AQUI QUE A BARRA DE ENDEREÇO DEIXA DE IMPORTAR: no celular NENHUMA
   altura depende de vh (o painel é auto, o trilho é px), e a única coisa
   colada é um trilho de altura fixa em `top`. A barra que some e volta muda
   o valor de 100vh; como nada aqui o lê, não há o que saltar.
   ========================================================================== */
@media(max-width:900px){
  .pnl-head{grid-template-columns:1fr;gap:0}
  .pnl-selo-slot{justify-self:start;margin-top:30px}

  .pnl-body{display:block;margin-top:clamp(30px,5vh,44px)}

  /* Quem gruda agora é o <nav>, e não a <ul>: sticky só se move dentro do
     bloco que o contém, e como bloco no fluxo o <nav> tem a .pnl-body inteira
     como containing block — a <ul> teria só a caixa curta do <nav>. */
  .pnl-nav{
    position:sticky;
    top:var(--nav-h);
    z-index:3;
    /* Opaco: o trilho passa POR CIMA dos painéis. */
    background:var(--bg);
    border-block-end:1px solid var(--rule);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .pnl-nav-list{
    position:static;
    display:flex;
    gap:6px;
    border-inline-start:0;
    /* Respiro vertical para o anel de foco (outline-offset:3px do core)
       caber sem gerar rolagem dentro do trilho. */
    padding-block:7px;
    width:max-content;
  }
  .pnl-nav-item{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:8px 14px;
    white-space:nowrap;
  }
  .pnl-nav-item::before{
    inset-block:auto 0;
    inset-inline:0;
    inline-size:auto;
    block-size:2px;
    transform:scaleX(0);
    transform-origin:left center;
  }
  .pnl-nav-item[aria-current="true"]::before{transform:scaleX(1)}
  .pnl-nav-rot{margin-top:0;font-size:13.5px}

  /* Sem pilha não há último painel para segurar: o percurso extra sairia como
     um buraco no fim da dobra. */
  .pnl-pilha::after{content:none}
  .pnl-painel{
    position:static;
    /* O `top` volta a auto de propósito. Não é higiene: elemento estático
       guarda o valor computado do top que o CSS declarou, e o script confere
       `position` justamente porque essa leitura engana — devolver auto aqui
       mantém as duas pistas dizendo a mesma coisa. */
    top:auto;
    height:auto;
    /* Zera o piso que o bloco de janela baixa põe: ele lê 100vh, e é a única
       coisa aqui que dependeria da barra de endereço que some. Sem esta linha
       a afirmação do comentário acima deixaria de ser verdade num celular de
       tela baixa, onde as duas media queries valem ao mesmo tempo. */
    min-height:0;
    grid-template-columns:1fr;
    overflow:visible;
    /* O trilho colado cobre o topo do painel: a âncora tem de parar abaixo
       dele. Com script quem calcula é o próprio script, medindo o trilho;
       este valor é o caso SEM script, e por isso é aproximado de propósito. */
    scroll-margin-top:calc(var(--nav-h) + var(--pnl-trilho-h) + 10px);
  }
  .pnl-painel + .pnl-painel{margin-top:clamp(40px,7vh,68px)}
  .pnl-arte{aspect-ratio:3/2}
  .pnl-texto{padding:clamp(22px,5vw,30px) 0 0}
  .pnl-title{max-width:none}
}

@media(max-width:520px){
  .pnl-arte{aspect-ratio:4/3}
  .pnl-checks li{font-size:15px}
}