/* ═══ CASES — folha compartilhada pelo hub (/cases/) e pelas 10 páginas de case ═══
   Só tokens MBS. Componentes reusados do site.css (.wrap, .sec, .sec-head, .kicker, .btn,
   .crumb-bar, .card-*, .surface-*) não são redefinidos aqui. */

/* ── filtros do hub (mesmo chip do hub de Soluções) ── */
.fbar{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.fbar-lbl{font-family:var(--font-family-text);font-weight:700;font-size:12px;line-height:1.33;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-footer);margin-right:var(--space-8)}
.fchip{cursor:pointer;padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);border:var(--border-width-thin) solid var(--color-neutral-200);background:var(--color-neutral-0);font:600 14px var(--font-family-text);color:var(--color-text-body)}
.fchip:hover{border-color:var(--color-text-title);color:var(--color-text-title)}
.fchip.on{border-color:var(--color-text-highlight);color:var(--color-text-highlight);font-weight:700}
.filtros{display:flex;flex-direction:column;gap:var(--space-12)}
.filtro-status{font:600 14px/1.4 var(--font-family-text);color:var(--color-text-footer)}

/* ── grade e card do hub ── */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mx-gutter)}
.cs-card{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-32);text-decoration:none}
.cs-card .type-eyebrow{color:var(--color-text-highlight)}
.cs-card h3{margin:var(--space-4) 0 0;text-wrap:pretty}
.cs-card .cs-evid{margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--surface-secondary, var(--color-text-body));flex:1}
.cs-card .cs-ver{margin-top:var(--space-16);font:700 14px var(--font-family-text);color:var(--color-text-highlight)}
.cs-card:hover h3{color:var(--color-text-highlight)}
.cs-card[hidden]{display:none}

/* ── hero da página de case ── */
.cs-hero{position:relative;overflow:hidden;background:var(--color-theme-background)}
/* Foto do hero: enquadramento POR FOTO (--cs-foto-x/y no img) — X puxa o assunto para a direita do texto sem expulsar ninguém do quadro; Y baixa a imagem para nunca cortar cabeça.
   Sem sangria de parallax no case: a faixa superior oculta cortava as cabeças em qualquer Y. */
.cs-hero .hero-bg{top:0;height:100%}
.cs-hero .hero-bg img{object-position:var(--cs-foto-x,60%) var(--cs-foto-y,22%)}
/* VÉU: regra nova da prancha de Heroes — o case abandona o véu LATERAL e passa a usar o
   véu de BASE no desktop também (90°, de baixo para cima), com as mesmas paradas das outras
   larguras: densa em 34%, fim da transparência em 72%. Vale nas TRÊS larguras. */
.cs-hero .hero-bg::after{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 34%, transparent 72%)}
/* Sem degradê próprio: o case usa o MESMO tratamento dos outros heroes (véu horizontal do .hero-bg::after, nunca opaco). O grad antigo fica oculto, markup preservado. Resta só um sombreado leve de baixo pra cima (90°) sustentando a faixa dos stat cards, 64% no máximo. */
.cs-hero-grad{position:absolute;inset:0;background:linear-gradient(0deg, color-mix(in srgb, var(--color-blue-900) var(--opacity-64), transparent), transparent 38%);pointer-events:none}
.cs-hero>.wrap{position:relative}
.cs-hero-in{display:flex;flex-direction:column;gap:var(--space-24);padding-block:var(--space-24) var(--space-48)}
.cs-h1{margin:0;font-family:var(--font-family-display);font-weight:800;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.01em;color:var(--color-text-title);max-width:846px;text-wrap:pretty}
/* MEDIDA DO H1 (estudo): desktop 846px a 56px · tablet 520px a 40px · celular na largura útil */
.cs-h1 em{font-style:italic;color:var(--color-text-highlight)}
.cs-resposta{margin:0;font:400 20px/1.55 var(--font-family-text);color:var(--color-text-body);max-width:var(--mx-span-text)}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mx-gutter);margin-top:var(--space-24)}
.cs-stat{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-16);border-top:var(--border-width-bold) solid var(--color-text-highlight)}
.cs-stat b{font:800 clamp(26px,2.6vw,36px)/1.05 var(--font-family-display);color:var(--color-text-highlight);letter-spacing:-.01em}
.cs-stat span{font:600 14px/1.45 var(--font-family-text);color:var(--color-text-body)}
.cs-fonte{margin:var(--space-16) 0 0;font:600 12px/1.4 var(--font-family-text);color:var(--color-text-body)}

/* ── corpo dos blocos ── */
.cs-texto{display:flex;flex-direction:column;gap:var(--space-16);max-width:var(--mx-span-text)}
.cs-texto p{margin:0;font:400 18px/1.6 var(--font-family-text);color:var(--color-text-body)}
.cs-mech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-32) var(--mx-gutter)}
.cs-mech>div{display:flex;flex-direction:column;gap:var(--space-8);border-top:var(--border-width-base) solid var(--color-line-grid);padding-top:var(--space-16)}
.cs-mech b{font:700 18px/1.33 var(--font-family-display);color:var(--color-text-title)}
.cs-mech p{margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--color-text-body)}
/* I2: ícone e caption do pilar viram UMA linha (Núcleo) sobre o título */
.cs-pilar-linha{display:flex;align-items:center;gap:var(--space-8)}
.cs-pilar{font:700 12px/1.33 var(--font-family-text);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-highlight)}
/* I2/agora chips: links de solução no rodapé do pilar usam O MESMO .cs-chip do bloco Para a sua
   estratégia (componente reaproveitado); notas sem oferta seguem texto no papel de rodapé */
.cs-oferta-tag{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-12);font:600 14px/1.4 var(--font-family-text);color:var(--color-text-footer)}
.cs-oferta-chips{margin-top:var(--space-4)}
/* H3: oferta no rodapé do pilar é CAMINHO, não legenda — link no papel de destaque; notas (sem oferta correspondente) seguem no papel de rodapé */
/* H3 (restrita pós-chips): só âncoras que NÃO são o componente .cs-chip — o chip fica idêntico ao da estratégia (600, sem sublinhado) */
.cs-oferta-tag a:not(.cs-chip){color:var(--color-text-highlight);font-weight:700;text-decoration:none}
.cs-oferta-tag a:not(.cs-chip):hover{text-decoration:underline}

/* ── bloco 4: antes → depois e impactos ── */
.cs-q{margin:0 0 var(--space-24);font:700 24px/1.33 var(--font-family-display);color:var(--color-text-title)}
.cs-ad{display:grid;grid-template-columns:1fr 1fr;gap:var(--mx-gutter)}
.cs-ad>div{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-24);border-radius:var(--radius-12)}
.cs-ad .cs-ad-lbl{font:700 12px/1.33 var(--font-family-text);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-highlight)}
.cs-ad p{margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--surface-text, var(--color-text-body))}
.cs-impactos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mx-gutter);margin-top:var(--space-40)}
.cs-impactos>div{display:flex;flex-direction:column;gap:var(--space-8)}
.cs-impactos h3{margin:0}
.cs-impactos p{margin:0;font:400 16px/1.6 var(--font-family-text);color:var(--color-text-body)}
/* citação × abertura — diferenciação (colisão resolvida na propagação 2.8): a citação usava o MESMO traço grosso laranja da abertura; passa a traço FINO cinza + itálico. Abertura = traço grosso laranja, sem itálico. */
.cs-quote{margin:var(--space-40) 0 0;padding-left:var(--space-24);border-left:var(--border-width-thin) solid var(--color-line-grid);display:flex;flex-direction:column;gap:var(--space-8);max-width:var(--mx-span-text)}
.cs-quote p{margin:0;font:italic 400 20px/1.5 var(--font-family-text);color:var(--color-text-title)}
.cs-quote cite{font:600 14px/1.4 var(--font-family-text);font-style:normal;color:var(--color-text-footer)}
.cs-premio{margin:var(--space-32) 0 0;font:600 16px/1.55 var(--font-family-text);color:var(--color-text-body);max-width:var(--mx-span-text)}

/* ── 2.8: composição do hero + abertura do corpo — COMPONENTE compartilhado das 20 páginas
   (aprovado no piloto PriceWise). Hero: stats ancorados na base (recuo {space.48}), eyebrow+H1
   centrados no espaço que sobra via margens automáticas. Abertura: traço vertical laranja à
   esquerda (o traço de topo é a marca unificada de abrir bloco — aqui significaria outra coisa),
   recuo {space.24}, lead canônico 20px, cor de título, 8 colunas da Malha, sem faixa de fundo.
   Sem aspas/itálico/atribuição — é a resposta da página, não citação. ── */
.cs-hero .hero-body{padding-block:0}
.cs-hero .cs-hero-in{flex:1;display:flex;flex-direction:column;gap:var(--space-24);padding-block:0 var(--space-48)}
.cs-hero .cs-hero-in .kicker{margin-top:auto}
.cs-hero .cs-h1{margin-bottom:auto}
.cs-abre{background:var(--color-neutral-0)}
.cs-abre .wrap{padding-top:calc(var(--space-96) + var(--space-64))}
.cs-abre-p{margin:0;max-width:calc(8*var(--mx-col) + 7*var(--mx-gutter));border-left:var(--border-width-bold) solid var(--color-text-highlight);padding-left:var(--space-24);font:400 20px/1.5 var(--font-family-text);color:var(--color-text-title);text-wrap:pretty}

/* ── bloco 5: caminhos de continuidade ── */
.cs-caminhos{display:flex;gap:var(--space-12);flex-wrap:wrap;margin-top:var(--space-24)}
.cs-chip{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);border:var(--border-width-thin) solid var(--color-text-highlight);font:600 14px var(--font-family-text);color:var(--color-text-highlight);text-decoration:none}
.cs-chip .ph{font-size:1.2em;line-height:1}
.cs-chip:hover{background:color-mix(in srgb, var(--color-text-highlight) var(--opacity-8), transparent);color:var(--color-text-highlight)}
.cs-data{margin:var(--space-16) 0 0;font:600 12px/1.4 var(--font-family-text);color:var(--color-text-footer)}
/* H3: no bloco final o Intervalo do sec-body (48) somava com as margens — escopo próprio:
   texto→chips {8+24}, chips→mobilizou {8+16}, entre as duas linhas {8}, e a seção fecha em {64} */
/* I2: recuo inferior volta ao padrão da Seção (herda o .sec) — o override de 64 deixava o conteúdo grudado na base */
#estrategia .sec-body{gap:var(--space-8)}
#estrategia .cs-texto{margin-bottom:var(--space-24)}
.cs-data+.cs-data{margin-top:0}
#estrategia{min-height:0}

@media (max-width:1000px){.cs-grid,.cs-mech,.cs-ad,.cs-impactos,.cs-stats{grid-template-columns:1fr}}