/* Case Mandala (_paginas/case-mandala.html), carregado depois do previa-case.css e só por essa página.
B3 "A conta da loja": três alavancas (visitas, conversão, ticket médio) e o resultado (faturamento do e-commerce), de 2019 para 2020.
Escrito do celular para cima: base 390px, depois 621 e 981. Nada anima: sem JS, com "reduzir movimento" e na impressão é igual.
Barras na mesma escala em todos os cartões: 2019 = 50% da trilha; 2020 = 50% × a razão (--r). Só números do P17.
Prefixo .av-* (nada com .conta, que já existe no previa.css). */
.alavancas{--av-card:rgba(42,8,40,.34);--av-borda:rgba(255,255,255,.17);--av-gap:20px}
/* cabeçalho: texto e o aviso de 2020 (loja de fábrica fechada) */
.alavancas .av-topo{display:grid}
.alavancas .av-topo .lead{margin-bottom:24px}
.alavancas .av-aviso{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:3px;align-content:start;padding:16px 18px 18px;border:1.5px dashed rgba(255,255,255,.42);border-radius:var(--raio);font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.alavancas .av-aviso .av-ic{grid-row:1 / span 3;align-self:start}
.alavancas .av-aviso .av-per,.alavancas .av-aviso b,.alavancas .av-aviso > span:last-child{grid-column:2}
.alavancas .av-aviso b{font-size:16.5px;line-height:1.3;color:var(--titulo)}
.av-per{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.av-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:2px solid #fff;background:var(--roxo-900);color:#fff}
.av-ic .ico{width:20px;height:20px}
/* as três alavancas */
.av{margin-top:clamp(28px,4vw,52px)}
.av-lista{display:grid;gap:14px}
.av-item{display:grid;gap:14px;align-content:start;padding:18px 18px 20px;border:1px solid var(--av-borda);border-radius:var(--raio);background:var(--av-card);min-width:0}
.av-cab{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center}
.av-cab .av-ic{grid-row:1 / span 2}
.av-kick{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.av-cab h3{font-size:clamp(1.25rem,1.7vw,1.45rem);font-weight:800;line-height:1.15;color:var(--titulo);text-wrap:balance}
/* até 620: o número em cima da frase nos três cartões (a conversão, "2,9% → 4,0%", não cabe ao lado da frase) */
.av-dado{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;column-gap:14px;align-items:center;font-size:15px;line-height:1.45;color:var(--fg);text-wrap:pretty}
.av-dado b{font-size:clamp(2.3rem,3.2vw,2.9rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--acento);white-space:nowrap}
.av-dado.longo{grid-template-columns:minmax(0,1fr);row-gap:6px}
.av-dado.longo b{font-size:clamp(2rem,2.7vw,2.5rem)}
/* barras 2019 × 2020 (decorativas: o número está escrito ao lado) */
.av-barras{display:grid;gap:7px}
.av-b{display:grid;grid-template-columns:3.1em minmax(0,1fr);align-items:center;column-gap:8px;font:600 12px/1 var(--fonte);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--fg2)}
.av-b i{display:block;height:10px;width:calc(50% * var(--r,1));max-width:100%;border-radius:0 5px 5px 0;background:rgba(255,255,255,.34)}
.av-b small{font-size:inherit} /* o small herdava "smaller" (9,6 px): o ano fica nos 12 px da linha da barra */
.av-b.novo{color:var(--fg)}
.av-b.novo i{background:var(--oliva)}
/* resultado: no celular, um fio com ponta desce da pilha de cartões até o número */
.av-res{position:relative;display:grid;justify-items:center;gap:8px;margin:0;padding-top:54px;text-align:center}
.av-res::before{content:"";position:absolute;left:50%;top:6px;width:3px;height:30px;margin-left:-1.5px;border-radius:2px;background:var(--oliva)}
.av-res::after{content:"";position:absolute;left:50%;top:34px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top:10px solid var(--oliva)}
.av-rot{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.av-res > b{font-size:clamp(3.6rem,7vw,5.2rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--acento)}
.av-res p{max-width:34ch;font-size:16px;line-height:1.45;color:var(--fg);text-wrap:balance}
.av-res .av-barras{width:min(100%,420px);margin-top:10px;text-align:left}
/* 621+: cartões mais largos; o número e a frase lado a lado também na conversão */
@media (min-width:621px){
.av-item{padding:20px 22px 22px}
.av-dado,.av-dado.longo{grid-template-columns:auto minmax(0,1fr);column-gap:16px}
}
/* 981+: aviso ao lado do título; três colunas alinhadas por subgrid; chave que desce das três até o resultado */
@media (min-width:981px){
/* sobretítulo e H2 na largura toda; embaixo, o texto de apoio e o aviso de 2020 lado a lado */
.alavancas .av-topo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:center}
.alavancas .av-topo > .sobre,.alavancas .av-topo > .h2{grid-column:1 / -1}
.alavancas .av-topo .lead{margin-bottom:0}
.alavancas .av-aviso{margin-top:18px;max-width:440px;justify-self:end}
.av-lista{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--av-gap);row-gap:0}
.av-item{grid-row:span 3;grid-template-rows:subgrid;row-gap:16px}
.av-dado,.av-dado.longo{grid-template-columns:minmax(0,1fr);row-gap:8px;align-items:start;align-content:start}
.av-barras{align-self:end}
.av-res{padding-top:66px}
.av-res::before{top:0;height:30px;left:calc((100% - 2 * var(--av-gap)) / 6 - 1.5px);right:calc((100% - 2 * var(--av-gap)) / 6 - 1.5px);width:auto;margin:0;border:3px solid var(--oliva);border-top:0;border-radius:0 0 18px 18px;background:none}
.av-res::after{top:27px;width:3px;height:24px;margin-left:-1.5px;border:0;border-radius:0 0 2px 2px;background:var(--oliva)}
/* o fio do meio sai da base do cartão do meio, que fica sobre a chave */
.av-lista{position:relative}
.av-lista::after{content:"";position:absolute;left:50%;bottom:-30px;width:3px;height:30px;margin-left:-1.5px;background:var(--oliva)}
}
/* B5: o par de números num cartão ao lado do depoimento saiu daqui em 30/09: é o .res-num do previa-case.css (só a Mandala; Travelex e Koin usam o placar da Jabuticaba) */