/* ==========================================================================
   BENTO DE RECURSOS — prefixo bento-
   Grade de três colunas em duas linhas de peso diferente: um card largo de
   foto com o texto por dentro, um card escuro estreito ao lado, e três cards
   escuros iguais embaixo, cada um com o parágrafo que abre no clique.

   Tokens usados:
     --max --pad          só via .wrap, que o markup usa — nada aqui mexe na coluna
     --sec-gap            respiro da dobra, via .sec-pad do core
     --display --ease     tipografia de título e curva do projeto
     --radius-media       raio dos cards, por multiplicação (ver --bento-radius)
     --radius-pill        pílula de status e botão redondo
     --accent             cor de ação: status, check, hover do gatilho
     --light --dark       o texto DENTRO da foto e os cartõezinhos brancos
     --dark-rgb           o scrim sobre a foto
     --bg --fg --fg-2 --rule-2   herdados do escopo que CADA CARD declara

   OS QUATRO CARDS ESCUROS declaram o próprio escopo no markup: .sec-dark no
   da linha 1, .sec-deep nos três da linha 2. Por isso as regras daqui leem
   --bg e --fg como qualquer componente leria — a inversão de tom acontece na
   classe do core, não numa sobrescrita local (contrato §3). O efeito colateral
   é o que se quer: em tema flat e claro, os mesmos cards saem claros sem
   tocar numa linha deste arquivo.
   ========================================================================== */

.bento{
  /* Vão da grade. 20px na referência a 1440; encolhe junto com a coluna. */
  --bento-gap:clamp(12px,1.4vw,20px);

  /* RAIO POR MULTIPLICAÇÃO, e não valor cravado. O tema define o card em
     --radius-media (16px no kirvano); o painel de dobra da referência é uma
     vez e meia isso. Em projeto flat --radius-media é 0, e 0 vezes 1.5 é 0:
     a dobra sai reta sem uma media query nem um segundo token. */
  --bento-radius:calc(var(--radius-media) * 1.5);

  /* Altura da linha 1. A referência mede 460 numa coluna de 1136 — os 32vw
     acertam esse número a 1440 e derretem junto com a tela. */
  --bento-tall:clamp(360px,32vw,460px);

  /* PISO da linha 2 (472 na referência, contra 460 da linha 1 — as duas
     linhas têm quase a mesma altura, e é isso que faz o bento parecer bento
     e não duas dobras empilhadas).

     É piso e não altura: o texto de três linhas mais o cabeçalho não chegam
     a 472 sozinhos, e a folga que sobra no pé do card é justamente para onde
     o parágrafo cresce. Os primeiros cliques abrem DENTRO do card, sem
     empurrar a página; só quando o texto passa da folga é que a dobra cede
     altura. Encolher este valor devolve o pulo da página ao primeiro clique. */
  --bento-card-h:clamp(380px,33vw,472px);

  /* Altura da mídia no topo dos cards da linha 2 (236 na referência, que é
     exatamente metade do card). */
  --bento-media-h:clamp(170px,16.4vw,236px);

  --bento-pad:clamp(20px,1.95vw,28px);        /* respiro dos cards da linha 2 */
  --bento-pad-wide:clamp(22px,2.2vw,32px);    /* respiro do card largo e do escuro */
  --bento-head-max:760px;
  --bento-float:328px;                        /* largura do grupo de cartões */

  /* O PARÁGRAFO FECHADO, em LINHAS e não em pixels: a entrelinha entra na
     conta, então trocar o corpo do texto não desalinha mais nada.

     Três é o meio do caminho medido. A referência mostra ~5 linhas fechadas
     e revela o resto no hover — o que quase não é revelação, porque já se
     leu quase tudo. Duas linhas fazem o contrário: escondem tanto que o
     título vira o único conteúdo do card. Três mostram o assunto e cortam
     no argumento. */
  --bento-lh:1.55;
  --bento-lines:3;
}

/* ---------------------------------------------------------------- cabeçalho */
/* À esquerda, e por isso não é o .sec-head do core, que centraliza. */
.bento-head{max-width:var(--bento-head-max)}

/* O margin-top que o core dá ao .sec-title existe para o vão até o .eyebrow.
   Esta dobra não tem olho — sem zerar, sobra um degrau solto no topo. */
.bento-head .sec-title{margin-top:0}

/* ---------------------------------------------------------------- grade */
/* minmax(0,1fr) e não 1fr: a coluna precisa poder encolher abaixo do
   conteúdo, senão a foto do card largo define a largura da grade inteira. */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--bento-gap);
  margin-top:clamp(32px,3.4vw,48px);
}

/* ============================================================ card largo */
/* isolation:isolate dá contexto de empilhamento próprio: o desfoque do véu
   não vaza para o card vizinho. Mesma razão do conteudo/pilares-texto-na-foto.

   space-between com dois filhos é o que prende o grupo de cartões no topo e o
   texto no rodapé. Os dois ficam NO FLUXO de propósito, e não posicionados
   sobre a foto: a foto é que é absoluta. Com os dois absolutos — que é o
   desenho da referência — o card teria altura fixa e, em coluna estreita, o
   grupo de cima e o texto de baixo cresceriam um por cima do outro. Assim o
   card não pode se sobrepor a si mesmo: o min-height é piso, não teto. */
.bento-wide{
  grid-column:span 2;
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:var(--bento-tall);
  overflow:hidden;isolation:isolate;
  border-radius:var(--bento-radius);
}

.bento-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  object-position:var(--bento-pos,50% 50%);
}

/* Pilha do §6: scrim garante contraste sempre, véu separa o texto do detalhe
   da foto. Um sem o outro não resolve — só gradiente deixa o texto sobre
   textura, só desfoque deixa claro demais em foto clara. */
.bento-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--dark-rgb),.92) 0%,rgba(var(--dark-rgb),.66) 26%,rgba(var(--dark-rgb),.2) 56%,transparent 78%);
}

/* Véu desfocado COM máscara em degradê. Sem a máscara vira faixa chapada com
   linha dura contra a parte nítida da foto (contrato §6). */
.bento-veil{
  position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;pointer-events:none;
  backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
}

/* ---- grupo de cartões ---- */
/* position:relative só pelo z-index — ele precisa ficar acima do scrim e do
   véu, que são absolutos com z-index 1.

   A largura é DECLARADA, e não deixada por conta do conteúdo: os cartões lá
   dentro têm largura em min(100%,…), e uma caixa que se dimensiona pelos
   filhos com filhos que se dimensionam pela caixa é uma conta circular — o
   navegador a resolve, mas por um caminho que ninguém previu. Com a largura
   escrita aqui, os 100% dos filhos têm de quê ser 100%.

   align-items:flex-start é o que faz cada cartão ter a própria largura em vez
   de esticar até a do grupo. */
.bento-float{
  position:relative;z-index:2;
  width:min(100%,calc(var(--bento-float) + var(--bento-pad-wide) * 2));
  padding:var(--bento-pad-wide);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:12px;
}

/* Pílula de status: ilha de marca, como o painel de bio do midia/carrossel-perfis.
   Pinta --accent e escreve em --dark, e não em --fg — assim ela lê igual sobre
   foto clara ou escura, e num tema claro ou escuro. */
.bento-status{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  background:var(--accent);color:var(--dark);
  font-size:12px;font-weight:600;line-height:1;letter-spacing:normal;
  white-space:nowrap;
}
.bento-glyph{flex:0 0 auto;width:14px;height:14px}

/* Cartão de produto. O segundo é mais estreito e recuado — é o que dá a
   sensação de pilha, e não de lista. As larguras são teto, não medida fixa:
   o min() as devolve à largura do grupo em tela estreita. */
.bento-mini{
  display:flex;align-items:center;gap:12px;
  width:min(100%,279px);
  padding:10px;
  border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--light) 95%,transparent);
  color:var(--dark);
}
.bento-mini-alt{
  width:min(100%,209px);
  margin-inline-start:clamp(14px,2.2vw,32px);
  background:color-mix(in srgb,var(--light) 90%,transparent);
}

.bento-mini-thumb{
  flex:0 0 auto;width:40px;height:40px;
  object-fit:cover;
  border-radius:calc(var(--radius-media) * .625);
}
.bento-mini-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.bento-mini-name{
  font-size:13px;line-height:1.25;letter-spacing:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bento-mini-price{font-size:13px;line-height:1.25;font-weight:600;letter-spacing:normal}

/* ---- texto DENTRO da foto ---- */
/* Fica no fluxo, como o grupo de cartões; quem o prende no rodapé é o
   space-between do card. O z-index o mantém acima do scrim e do véu. */
.bento-lab{position:relative;z-index:2;padding:var(--bento-pad-wide)}

/* O texto vive dentro da foto escura, então é claro SEMPRE — não segue o
   escopo de tom da seção, que aqui é clara. Mesma decisão do
   conteudo/pilares-texto-na-foto.

   As larguras são as medidas da referência (600 e 540 numa caixa de 751), e
   não uma conta em ch: em ch elas mudariam de tamanho junto com a fonte do
   tema, e o que se persegue aqui é a MANCHA — o título ocupando quatro
   quintos do card e o parágrafo terminando antes dele. O min() as devolve à
   largura da caixa quando o card encolhe. */
.bento-lab-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,1.95vw,28px);line-height:1.1;letter-spacing:-.02em;
  color:var(--light);
  max-width:min(100%,600px);
}
.bento-lab-text{
  margin-top:16px;
  font-size:clamp(14px,1.15vw,16px);line-height:1.5;
  color:color-mix(in srgb,var(--light) 72%,transparent);
  max-width:min(100%,540px);
}

/* ============================================================ card escuro da linha 1 */
/* background:var(--bg) e não uma cor: o --bg vem do .sec-dark que o card
   declara no markup. O base.css só pinta <section> — um card precisa dizer. */
.bento-side{
  display:flex;flex-direction:column;
  min-height:var(--bento-tall);
  padding:var(--bento-pad-wide);
  border-radius:var(--bento-radius);
  background:var(--bg);
}

/* text-wrap:initial pelo mesmo motivo da primitiva de título gigante do core:
   o reset dá balance a todo h1..h4, e balancear por cima de um <br> escrito
   à mão reintroduz a quebra automática que o <br> existe para evitar. */
.bento-side-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.1vw,30px);line-height:1.05;letter-spacing:-.02em;
  color:var(--fg);
  text-wrap:initial;
}

.bento-list{
  display:flex;flex-direction:column;gap:14px;
  margin-top:clamp(20px,2vw,28px);
}
.bento-li{
  display:flex;align-items:center;gap:10px;
  font-size:15px;line-height:1.4;color:var(--fg-2);
}
.bento-check{flex:0 0 auto;width:20px;height:20px;color:var(--accent)}

/* margin-top:auto empurra o botão para o rodapé do card, qualquer que seja o
   tamanho da lista. align-self impede que o .btn do core, dentro de uma
   coluna flex, estique até a largura inteira. */
.bento-cta{margin-top:auto;align-self:flex-start}
.bento-arrow{flex:0 0 auto;width:14px;height:14px}

/* ============================================================ cards da linha 2 */
/* min-height é PISO: o card cresce quando o parágrafo abre além da folga.
   Ver --bento-card-h lá em cima — a folga é parte do desenho, não sobra. */
.bento-card{
  position:relative;
  display:flex;flex-direction:column;
  min-height:var(--bento-card-h);
  overflow:hidden;
  border-radius:var(--bento-radius);
  background:var(--bg);
}

.bento-media{
  position:relative;flex:0 0 auto;
  height:var(--bento-media-h);
  overflow:hidden;
}
.bento-media-img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--bento-pos,50% 50%);
}

/* Degradê que dissolve a base da foto no corpo do card. Lê --bg, então é
   sempre exatamente a cor do card embaixo dele — inclusive se o tema mudar. */
.bento-fade{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(60px,8vw,96px);
  pointer-events:none;
  background:linear-gradient(to top,var(--bg),transparent);
}

/* O topo é menor que os outros três lados: a foto acima já dá respiro, e
   repetir os 28px afastaria o título da imagem que ele nomeia. */
.bento-body{
  display:flex;flex-direction:column;
  padding:var(--bento-pad);
  padding-top:calc(var(--bento-pad) * .58);
}

.bento-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;
}
/* Sem max-width: quem impede o título de espremer o gatilho é o flex:0 0 auto
   do próprio gatilho. Título comprido quebra em mais linhas e empurra o card
   para baixo, que é o comportamento certo — o padrão editorial da ficha pede
   duas ou três palavras justamente para isso não acontecer. */
.bento-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.4vw,20px);line-height:1.15;letter-spacing:-.02em;
  color:var(--fg);
}

/* O gatilho é <button> de verdade: teclado, foco e leitor de tela vêm de
   graça, e o anel do :focus-visible do core cai certo por cima do círculo. */
.bento-toggle{
  flex:0 0 auto;
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  /* O círculo é pequeno o bastante para o desenho nativo de botão aparecer
     por baixo do nosso no iOS — daí o appearance zerado, que o .faq-question
     do listas/acordeao-faq não precisa por ser uma faixa de texto inteira. */
  -webkit-appearance:none;appearance:none;
  background:none;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
  color:var(--fg-2);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.bento-toggle:hover{color:var(--accent);border-color:var(--accent)}

.bento-chevron{width:13px;height:13px;transition:transform .4s var(--ease)}
.bento-card.is-open .bento-chevron{transform:rotate(180deg)}

/* PARÁGRAFO QUE ABRE. Fechado, ele tem a altura de --bento-lines linhas; o
   script mede a altura real e escreve o max-height no clique — não dá para
   animar height:auto, e um max-height chutado alto deixa a abertura lenta e o
   fechamento com atraso (mesma receita do listas/acordeao-faq). */
.bento-text{
  position:relative;
  margin-top:12px;
  font-size:clamp(14px,1.15vw,16px);
  line-height:var(--bento-lh);
  color:var(--fg-2);
  max-height:calc(var(--bento-lh) * 1em * var(--bento-lines));
  overflow:hidden;
  transition:max-height .5s var(--ease);
}

/* A última linha visível some no fundo do card: é o sinal de que há mais
   texto ali. Some quando abre — sem ele, o parágrafo aberto terminaria
   esmaecido, o que leria como corte e não como fim. */
.bento-text::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1.5em;
  pointer-events:none;
  background:linear-gradient(to top,var(--bg),transparent);
  transition:opacity .35s var(--ease);
}
.bento-card.is-open .bento-text::after{opacity:0}

/* ---------------------------------------------------------------- movimento reduzido */
/* A entrada da dobra é do core e o core já a desliga. O que sobra aqui é o
   que este componente anima por conta própria: a altura do parágrafo, o giro
   do chevron e o desvanecer do degradê. Sem transição, o clique continua
   abrindo e fechando — só que de uma vez. */
@media(prefers-reduced-motion:reduce){
  .bento-text{transition:none}
  .bento-text::after{transition:none}
  .bento-chevron{transition:none}
}

/* ---------------------------------------------------------------- mobile */
/* Duas colunas: o card largo ocupa a linha inteira e, embaixo, o card escuro
   e o primeiro da linha 2 dividem a seguinte. O bento continua desigual, que
   é a razão de ele existir — três colunas iguais seriam uma tabela. */
@media(max-width:1040px){
  .bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  /* Uma coluna. O span:2 precisa ser desfeito na mão, senão o navegador cria
     uma segunda coluna implícita só para caber o card largo. */
  .bento-grid{grid-template-columns:minmax(0,1fr)}
  .bento-wide{grid-column:auto}
  /* O card escuro perde o piso de altura: ele tem três itens de lista e um
     botão, e esticar isso até 360 abre um vão morto no meio. O card largo
     mantém o piso, porque ali a foto é metade do argumento. */
  .bento-side{min-height:0}
  .bento{--bento-media-h:200px}
  /* Em coluna estreita o recuo do segundo cartão come a largura útil dele. */
  .bento-mini-alt{margin-inline-start:0}
}