/* ==========================================================================
   LISTA DE BENEFÍCIOS COM PALCO ILUSTRADO — prefixo benf-
   Duas colunas: um palco de foto com quatro peças flutuando em volta, e uma
   lista de quatro benefícios com ícone, filete e um botão fechando a coluna.

   Tokens usados:
     --display --sans        tipografia de título e de texto
     --fg --fg-2 --fg-muted  tinta, herdada do escopo de tom
     --rule                  o filete de 2px que dá ritmo à lista
     --rule-2                borda da pílula de ressalva (via .pill do core)
     --bg                    papel das peças claras (vem do .sec-light delas)
     --accent                ícones, arco, linha pontilhada, barra do cartão
     --dark-rgb              sombra das peças, em canal separado
     --ease                  curva única — boiada, hover do link
     --radius-media          canto das peças e da foto
     --radius-pill           ícone em círculo, pílula, barra
     --sec-gap               respiro vertical, via .sec-pad do core

   SEM script.js. A entrada é o [data-rv] do core, a boiada é uma animação
   CSS e o resto é layout. Não há um só listener nesta dobra.

   POR QUE A BOIADA É @keyframes E NÃO UM LAÇO EM rAF. O §5 pede animação
   por TEMPO, com dt limitado — a regra existe porque um laço de JS que anda
   por QUADRO acelera em 120Hz e salta ao voltar de uma aba em segundo plano.
   Animação CSS já é por tempo na origem: o navegador interpola pelo relógio
   do documento, pausa junto com a aba e não tem dt nenhum a limitar. O laço
   equivalente em JS seria mais código para chegar ao mesmo lugar com mais
   jeitos de errar. Precedente na casa: o stageBob do hero/duas-colunas-produto.
   ========================================================================== */

.benf-grid{
  display:grid;
  /* ~7/5, medido na referência (696 e 488 numa coluna de 1264). minmax(0,…)
     e não 7fr/5fr puro: sem o minmax, uma linha longa dentro de um item da
     lista estica a coluna e a proporção some. */
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(34px,4.6vw,64px);
  align-items:start;
}


/* ==========================================================================
   O PALCO
   Caixa de referência de tudo que flutua. As quatro peças são absolute em
   PORCENTAGEM daqui — nunca em px —, e é só por isso que a composição
   sobrevive a qualquer largura de coluna.
   ========================================================================== */

.benf-stage{
  /* 696x530 da referência. É o único lugar onde a proporção do palco mora:
     mudar aqui reposiciona as quatro peças junto, porque todas leem % desta
     mesma caixa. */
  --benf-stage-ratio:696/530;

  /* A calha à esquerda. A foto não encosta na borda do palco: os 6,3% que
     sobram (44 de 696 na referência) são onde o cartão e o arco pousam
     meio para dentro, meio para fora da imagem. Zerar isto cola o cartão
     na foto e a composição perde a profundidade inteira. */
  --benf-photo-inset:6.3%;

  position:relative;
  aspect-ratio:var(--benf-stage-ratio);
  margin-top:clamp(32px,3.4vw,48px);
}

/* LARGURA E ALTURA EXPLÍCITAS, e isto é medido: `left/right/top/bottom` mais
   `width:auto` NÃO dimensiona uma <img>. Elemento SUBSTITUÍDO com dimensão
   automática resolve pelo tamanho intrínseco do arquivo, o `right`/`bottom`
   viram excesso e são descartados. Medido no Chrome com uma foto 1600x900
   num palco de 602x458: a imagem saiu 602x339 — a largura toda (pelo
   max-width:100% do core) e só 74% da altura, com as peças de baixo boiando
   sobre fundo vazio. A conta abaixo é o que devolve os 458. */
.benf-photo{
  position:absolute;
  top:0;left:var(--benf-photo-inset);
  width:calc(100% - var(--benf-photo-inset));
  height:100%;
  object-fit:cover;
  /* O assunto vive no terço central e alto do quadro: embaixo à esquerda
     entram o cartão e o arco, e em cima à direita a confirmação. */
  object-position:50% 40%;
  border-radius:var(--radius-media);
}

/* ---- o invólucro que posiciona ----
   ELE leva o data-rv; a peça de dentro é que se move. Não junte os dois no
   mesmo nó: `[data-rv].in{transform:none}` vale (0,2,0) contra a (0,1,0) de
   `.benf-piece` e apagaria a boiada em silêncio assim que a dobra entrasse
   (ver o cabeçalho do markup.html). Aqui não há transform NENHUM de repouso,
   de propósito — a única coisa que este nó faz é posicionar. */
.benf-slot{
  position:absolute;
  left:var(--benf-x);
  top:var(--benf-y);
  width:var(--benf-w);
}

/* ---- a peça, e a boiada ----
   Amplitude pequena e tempos primos entre si. Em fase igual as quatro peças
   sobem e descem juntas, a foto inteira parece respirar e o truque aparece;
   dessincronizar é o que as faz ler como objetos soltos. O delay NEGATIVO
   começa cada uma no meio do próprio balanço, para nenhuma nascer parada. */
.benf-piece{
  --benf-bob:7px;
  --benf-bob-dur:6.4s;
  --benf-bob-delay:0s;
  animation:benfBob var(--benf-bob-dur) var(--ease) var(--benf-bob-delay) infinite alternate;
}
@keyframes benfBob{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,calc(var(--benf-bob) * -1),0)}
}
/* Colada à regra que ela desliga (§6.5): o que anda sozinho para. */
@media(prefers-reduced-motion:reduce){
  .benf-piece{animation:none}
}

.benf-piece-card{--benf-bob:6px;--benf-bob-dur:7.4s;--benf-bob-delay:-2.6s}
.benf-piece-check{--benf-bob:9px;--benf-bob-dur:5.8s;--benf-bob-delay:-1.2s}
.benf-piece-link{--benf-bob:5px;--benf-bob-dur:8.2s;--benf-bob-delay:-3.4s}
.benf-piece-arc{--benf-bob:4px;--benf-bob-dur:9s;--benf-bob-delay:-.8s}

/* ---- as duas peças de papel ----
   Superfície clara sobre foto escura. A cor vem do --bg do .sec-light que
   cada uma declara no markup: nenhuma regra daqui escreve cor de papel nem
   cor de texto, e o tema segue mandando nas duas.

   O CANTO É DO TEMA, e isso é decisão, não esquecimento: a referência mede
   12px, mas projeto flat (--radius-media:0) tem de devolver peça de canto
   vivo, senão o componente passa a decidir a forma do cliente — que é
   exatamente o que o §10 proíbe. Quem quiser o arredondado da referência num
   tema flat troca --benf-piece-radius no consumidor, sem tocar em regra. */
.benf-piece-card,
.benf-piece-check{
  --benf-piece-radius:var(--radius-media);
  --benf-piece-pad:clamp(11px,1.15vw,15px);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:var(--benf-piece-pad);
  background:var(--bg);
  border-radius:var(--benf-piece-radius);
  box-shadow:0 10px 24px rgba(var(--dark-rgb),.32);
}

.benf-piece-card{gap:clamp(5px,.55vw,8px)}
.benf-piece-check{gap:clamp(6px,.7vw,9px)}

/* ---- o cartão ---- */

/* A ressalva onde a pessoa lê o número, e não num rodapé legal. Herda a
   .pill do core (contorno, caixa alta, --fg-muted já virado escuro pelo
   .sec-light da peça) e só encolhe: 11px ao lado de um rótulo de 10px
   inverteria a hierarquia — a ressalva gritaria mais que o dado. */
.benf-badge-illu{
  font-size:9.5px;
  letter-spacing:.12em;
  padding:3px 9px;
}
.benf-card-label{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(9.5px,.82vw,11px);line-height:1.3;letter-spacing:.02em;
  color:var(--fg-muted);
}
.benf-card-fig{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.65vw,22px);line-height:1.1;letter-spacing:-.02em;
  color:var(--fg);
}
/* A barra É a distribuição por classe. Quatro faixas do mesmo acento em
   quatro intensidades: uma paleta de quatro cores exigiria quatro tokens
   novos e faria um cartão de 36% do palco competir com a dobra inteira. */
.benf-bar{
  display:flex;
  width:100%;
  gap:3px;
  height:6px;
  margin-top:3px;
}
.benf-seg{
  flex:0 0 var(--benf-seg);
  background:var(--accent);
  border-radius:var(--radius-pill);
}
/* O piso é .38 e não zero: abaixo disso a última classe some no papel da
   peça, e uma distribuição com uma fatia invisível deixa de ser distribuição. */
.benf-seg:nth-child(2){opacity:.8}
.benf-seg:nth-child(3){opacity:.58}
.benf-seg:nth-child(4){opacity:.38}

/* ---- a confirmação ---- */
.benf-check-mark{
  --benf-check-size:clamp(22px,2.2vw,28px);
  flex:0 0 auto;
  width:var(--benf-check-size);height:var(--benf-check-size);
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  /* Disco CHEIO com o sinal no papel da peça, e não o inverso: acento sobre
     papel claro é o par de menor contraste do tema (sage sobre creme, na
     Liberta), e um "concluído" que só se adivinha não confirma nada. */
  background:var(--accent);
  color:var(--bg);
}
.benf-check-mark svg{width:58%;height:58%;display:block}
.benf-check-text{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(9.5px,.82vw,11px);line-height:1.35;
  color:var(--fg-2);
}

/* ---- arco e linha pontilhada ----
   Traço puro, sem caixa. Os dois são só um SVG que estica na largura do
   invólucro; a altura sai do viewBox, e é isso que mantém a geometria da
   linha casada com o cartão e a confirmação em qualquer largura. */
.benf-piece-arc,
.benf-piece-link{
  display:block;
  color:var(--accent);
}
.benf-glyph{display:block;width:100%;height:auto}
/* O halo do pontilhado: mesma curva, mais larga, no escuro do projeto. Ele
   existe porque a linha é a única peça que atravessa a foto de ponta a ponta
   e vai encontrar céu, terra e sombra no mesmo caminho. Sem ele, medido sobre
   uma foto de fim de tarde, o pontilhado em --accent simplesmente sumia na
   metade clara. Lê --dark-rgb, não cor crua. */
.benf-link-halo{stroke:rgba(var(--dark-rgb),.5);fill:rgba(var(--dark-rgb),.5)}
/* O arco tem de ficar ATRÁS do cartão, e quem resolve isso é a ordem do
   markup — quatro absolutos irmãos empilham na ordem em que aparecem.
   A opacidade recua um passo só — o bastante para ele ficar atrás da linha
   pontilhada na hierarquia, não o bastante para virar borrão. Em .55 ele
   lia como sombra suja do cartão em vez de gráfico; medido na foto do
   preview. */
.benf-piece-arc{opacity:.85}


/* ==========================================================================
   A LISTA
   ========================================================================== */

.benf-col{display:flex;flex-direction:column;align-items:flex-start}

.benf-list{
  display:flex;
  flex-direction:column;
  /* 40 na referência. 34 aqui: o título desta dobra corre uma linha a mais
     que o dela, e o ritmo mais fechado é o que aproxima o pé das duas colunas
     — com gap 40 a lista terminava 139px abaixo da foto, e o botão ficava
     pendurado no vazio. Medido. */
  gap:clamp(26px,2.4vw,34px);
  width:100%;
}

.benf-item{
  --benf-icon:clamp(44px,3.6vw,52px);
  display:grid;
  grid-template-columns:var(--benf-icon) 1fr;
  gap:clamp(14px,1.4vw,20px);
  align-items:start;
}

.benf-icon{
  width:var(--benf-icon);height:var(--benf-icon);
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  /* A referência põe um disco ESCURO aqui. Numa dobra escura isso
     desapareceria: o disco vira um véu do próprio acento, que separa o
     ícone do fundo sem inventar uma superfície nova. */
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid var(--rule);
  color:var(--accent);
}
.benf-icon svg{width:52%;height:52%;display:block}

/* O filete começa DEPOIS do ícone, e é por isso que ele vive aqui e não no
   <li>: atravessando a coluna inteira, ele viraria uma régua de tabela e o
   ícone deixaria de ancorar o item. 2px e não 1px — em 1px o filete some no
   --rule de uma dobra escura, e a lista perde o ritmo que a referência tem. */
.benf-body{
  padding-bottom:clamp(16px,1.5vw,21px);
  border-bottom:2px solid var(--rule);
}
/* Filete no fim fecharia a lista como se houvesse um quinto item. O botão
   mora fora do <ul> exatamente para esta regra poder ser esta linha. */
.benf-item:last-child .benf-body{border-bottom:0}

.benf-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.45vw,20px);line-height:1.3;letter-spacing:-.018em;
  color:var(--fg);
}
/* A pílula acompanha o título na mesma linha e não vira uma segunda linha
   de metadado. vertical-align porque ela é inline-block dentro de texto. */
.benf-badge{margin-left:10px;vertical-align:middle}

.benf-body p{
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.6;
  color:var(--fg-2);
  margin-top:9px;
  max-width:48ch;
}

.benf-link{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:13px;
  font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.01em;
  color:var(--accent);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.benf-link svg{width:13px;height:13px;display:block;transition:transform .3s var(--ease)}
/* Só o sublinhado e o deslocamento da seta dependem de hover — a seta já
   NASCE visível, então em toque não falta nada (§ "toque não tem hover"). */
.benf-link:hover{border-bottom-color:var(--accent)}
.benf-link:hover svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .benf-link:hover svg{transform:none}
}

.benf-cta{margin-top:clamp(24px,2.4vw,34px)}


/* ==========================================================================
   MOBILE
   ========================================================================== */

/* Uma coluna. O palco NÃO ganha a largura inteira: as peças flutuantes são
   dimensionadas em vw e a caixa em %, então um palco de 900px de largura
   produziria um cartão de 320px com tipografia de 17px — sparso e errado.
   O teto devolve ao palco mais ou menos o tamanho que ele tem no desktop, e
   a composição centraliza. */
@media(max-width:980px){
  .benf-grid{grid-template-columns:1fr;gap:clamp(38px,6vw,56px)}
  .benf-stage{max-width:560px;margin-inline:auto}
  .benf-col{width:100%}
}

/* A COMPOSIÇÃO SAI, A FOTO FICA — e esta é a decisão de forma da peça.
   A referência esconde o palco inteiro no celular, e esconder as PEÇAS é
   inegociável: quatro objetos absolutos sobre 350px viram sopa, e o cartão
   ficaria mais largo que a foto. Mas levar a foto junto seria jogar fora a
   única metade da composição que atravessa intacta — e a dobra "por que
   trabalhar com a gente" sem nenhuma imagem vira uma lista comum, que a
   biblioteca já tem em conteudo/imagem-lista-numerada.
   O que se perde é ornamento, não conteúdo: as quatro peças são aria-hidden
   justamente porque o argumento inteiro mora na lista ao lado. */
@media(max-width:640px){
  .benf-slot{display:none}
  .benf-stage{
    --benf-stage-ratio:16/11;
    --benf-photo-inset:0%;   /* sem cartão, a calha não tem mais função */
    max-width:none;
  }
  .benf-item{--benf-icon:44px;gap:14px}
  .benf-body p{max-width:none}
}