/* Modelo de página de case (Technogym, Jabuticaba e os próximos). Carregado depois do previa.css.
   Escrito do celular para cima: base 390px, depois 621, 821, 981 e 1180.
   Só variáveis de superfície (--fg, --fg2, --titulo, --acento, --linha, --card, --chip).
   A página antiga do case (_paginas/case-antigo.html) carrega previa-case-antigo.css. */

main [id]{scroll-margin-top:92px}
.pg-case .sec{padding-block:clamp(48px,6vw,88px)}
.pg-case .sec.sec-res,.pg-case .sec.sec-dentro{padding-block:clamp(40px,5vw,64px)}

/* peças comuns */
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oculto{display:block;height:10px;width:var(--w,60%);border-radius:4px;background:repeating-linear-gradient(90deg,#E4E1D6 0 6px,#EEECE4 6px 12px)}
.rotulo-ilustrativa{flex:none;padding:3px 9px;border:1px solid var(--linha);border-radius:999px;font-family:var(--fonte);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.selo-breve{padding:3px 9px;border:1px dashed var(--acento);border-radius:999px;font-family:var(--fonte);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);white-space:nowrap}
.so-desk{display:none}  /* só para imagem decorativa SEM texto de pendência */
@media (min-width:981px){.so-desk{display:block}}

/* ---------- B1 topo ---------- */
.case-topo .caixa{grid-template-columns:minmax(0,1fr);align-items:center}
.case-topo h1{font-size:clamp(1.9rem,3.2vw,2.75rem)}
/* trecho do título que fica junto só no celular (06/10/2026; Technogym: "integrado ao Salesforce"). Sem isso, a 390 a palavra
   "integrado" sobrava sozinha numa linha. No computador o trecho quebra como antes. */
@media (max-width:620px){.case-topo h1 .junta-cel{white-space:nowrap}}
.meta-case{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:18px;font-size:14.5px;color:var(--fg2)}
.meta-case > * + *::before{content:"·";display:inline-block;margin:0 10px;opacity:.6}
.meta-case > span{white-space:nowrap}
.meta-case a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.meta-case a:hover{color:var(--titulo);text-decoration-thickness:1.5px}
/* frase curta sobre a data da tela do topo (Mandala; Felipe, 06/10/2026, noite): entre a resposta e a linha de setor, na mesma letra
   da linha de setor. Só entra no case em que a tela não é do período dos números. */
.case-topo .nota-tela{margin-top:12px;max-width:44rem;font-size:14.5px;line-height:1.5;color:var(--fg2);text-wrap:pretty}
.case-topo .acoes{display:grid;justify-items:start;gap:16px}
.case-topo .acoes .btn{width:100%;justify-content:center;text-align:center}
@media (min-width:621px){
  .case-topo .acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
  .case-topo .acoes .btn{width:auto}
}
@media (min-width:981px){.case-topo .caixa{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}

/* selo do cliente (logo num cartão branco, no canto do visual): padrão de todo visual "tela" ou "mockup" do B1 */
.selo-cliente{position:absolute;left:-6px;top:-14px;z-index:2;display:flex;padding:6px 10px;border-radius:10px;background:#fff;box-shadow:0 6px 18px -12px rgba(42,8,40,.35)}
.selo-cliente img{height:22px;width:auto}
/* visual "tela": Sales App num tablet (ilustração em CSS, sem dados). No celular a altura segue o conteúdo; a partir de 621, 4:3 */
.tela-app{position:relative;width:100%;max-width:520px;justify-self:center}
.tablet{position:relative;padding:12px;border-radius:24px;background:var(--tinta);box-shadow:var(--sombra)}
.tablet::before{content:"";position:absolute;left:50%;top:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#45443E}
.sa{height:100%;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:12px;background:#fff;color:var(--tinta);font-size:12px;line-height:1.3}
.sa-cab{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--roxo-900);color:#fff}
.sa-cab b{font-size:13px}
.sa-cab span{opacity:.85}
.sa-cab small{margin-left:auto;padding:2px 8px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font:600 10px var(--fonte);letter-spacing:.06em;text-transform:uppercase}
.sa-corpo{display:grid;gap:10px;align-content:start;padding:12px 14px}
.sa-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--tinta-2)}
.sa-pill{flex:none;padding:2px 8px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-size:11px;font-weight:700}
.sa-itens{display:grid;gap:7px;padding:9px 0;border-block:1px solid #ECEAE0}
.sa-itens li{display:grid;grid-template-columns:18px minmax(0,1fr) 34px;align-items:center;gap:8px}
.sa-itens .ico{width:16px;height:16px;color:var(--roxo)}
.sa-fechar{justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-weight:700}
.sa-fechar .ico{width:14px;height:14px;stroke-width:2.4}
/* rótulos neutros das colunas dos itens (nenhum dado) */
.sa-itens li.sa-cols{font:600 10px/1 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:#6B6A62}
.sa-cols span:first-child{grid-column:2}
/* pé da tela: "Pedido fechado" e, embaixo, a trilha do pedido (os destinos ficam dentro da tela) */
.sa-fim{display:grid;gap:8px}
.sa-trilha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:8px;border-top:1px solid #ECEAE0}
.sa-trilha li{position:relative;display:grid;justify-items:center;gap:3px;font-size:10.5px;font-weight:600;line-height:1.2;color:var(--tinta-2);text-align:center}
.sa-trilha li + li::before{content:"";position:absolute;top:11px;left:calc(-50% + 15px);right:calc(50% + 15px);height:2px;background:#E4E1D6}
.sa-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid #D9D6CB;background:#fff;color:var(--roxo)}
.sa-ic .ico{width:14px;height:14px}
.sa-trilha li.nosso .sa-ic{background:var(--oliva);border-color:var(--oliva);color:var(--roxo-900)}
/* tablet maior (621+): tela 4:3, campos mais espaçados e o pé preso ao fim da tela, como num app (sem faixa branca vazia no meio) */
@media (min-width:621px){
  .tablet{aspect-ratio:4/3}
  .sa-corpo{grid-template-rows:auto auto auto 1fr;align-content:stretch;gap:10px;padding:12px 16px}
  .sa-itens{gap:8px;padding:9px 0}
  .sa-fim{align-self:end}
  .sa-trilha li{font-size:11px}
}
/* topo do case em duas colunas estreitas (981 a 1179): em 4:3 a tela ficava mais baixa que o conteúdo e a trilha do pedido saía cortada
   (44px a 981, 32px a 1024). Nessa faixa a altura segue o conteúdo; a partir de 1180 o 4:3 volta a caber. */
@media (min-width:981px) and (max-width:1179px){.case-topo .tablet{aspect-ratio:auto}}
/* visual "mockup": imagem real */
.vitrine-real{position:relative;width:100%;max-width:560px;justify-self:center}
/* ">" para não pegar o logo do .selo-cliente; a imagem pode vir solta ou num <picture> (WebP com PNG de reserva).
   Mockup justo aos aparelhos: o selo cai no canto e a legenda logo abaixo. Com margem transparente, ver .mockup-margem */
.vitrine-real > picture{display:block}
.vitrine-real > img,.vitrine-real > picture > img{width:100%;height:auto}
/* mockup com margem transparente e sombra embutida no arquivo (Jabuticaba 2026, 1600×1000: navegador de 40 a 1320 px
   na largura e de 40 a 851 px na altura; celular até 1560 × 980). A sombra do arquivo chegava cortada à borda da imagem
   e desenhava um retângulo cinza de quina dura no fundo claro: a máscara apaga só a faixa de fora dos aparelhos
   (2,5% dos lados, 4% em cima, 2% embaixo). O selo vai para o canto de baixo do navegador, metade dentro e metade fora:
   no canto de cima ele cobria os botões da janela e o começo do endereço, e sobravam pontas coloridas.
   Em grade, o selo se ancora na imagem (margem em % = % da largura), não na figura com a legenda */
.vitrine-real.mockup-margem{display:grid}
.vitrine-real.mockup-margem > picture,.vitrine-real.mockup-margem > .selo-cliente{grid-area:1 / 1}
.vitrine-real.mockup-margem > figcaption{grid-row:2;padding-inline:2.5%}  /* legenda alinhada à borda do navegador, não à da imagem */
.vitrine-real.mockup-margem > .selo-cliente{position:relative;left:auto;top:auto;align-self:start;justify-self:start;margin:calc(53.2% - 17px) 0 0 calc(2.5% - 6px)}
.vitrine-real.mockup-margem > picture > img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 4%,#000 98%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 4%,#000 98%,transparent);
  mask-composite:intersect}
/* visual "logo": reserva para case sem imagem */
.visual-logo{justify-self:center;width:100%;max-width:440px;display:grid;gap:16px;padding:24px;border-radius:var(--raio);background:#fff;color:var(--tinta);box-shadow:var(--sombra)}
.visual-logo img{height:56px;width:auto;max-width:100%;object-fit:contain}
.tela-app figcaption,.vitrine-real figcaption,.visual-logo figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;font-size:13px;line-height:1.45;color:var(--fg2)}
/* legendas e células de texto corrido: sem palavra sozinha na última linha ("reais.", "alguém.") */
.pg-case figcaption,.conexoes td{text-wrap:pretty}
/* celular (06/10/2026): texto de leitura nunca abaixo de 14px. Vale para a legenda do topo (cases e projetos) e para a nota dos
   gráficos (.indice-anos da Jabuticaba, .indice-pos do Travelex), que estavam a 13 e 12,5px. Rótulos em caixa alta ficam de fora. */
@media (max-width:620px){
  .tela-app figcaption,.vitrine-real figcaption,.visual-logo figcaption,.pg-case .indice-anos figcaption,.pg-case .indice-pos figcaption{font-size:14px}
}
/* celular (06/10/2026): área de toque perto de 44px sem mexer no desenho. O link de setor da linha de cima (23px de altura) e as
   pílulas de "Outros cases" (38px) ganham um pseudo-elemento transparente por cima, que só aumenta onde o dedo acerta. */
@media (max-width:620px){
  .meta-case a,.chips-case a{position:relative}
  .meta-case a::after{content:"";position:absolute;inset:-11px -4px}
  .chips-case a::after{content:"";position:absolute;inset:-4px -1px}  /* a conta parte de dentro da borda de 1px: 36 + 8 = 44 */
}

/* ---------- B2 em 30 segundos + ficha ---------- */
.visao{display:grid;gap:32px;align-items:start}
.resumo{display:grid;margin-top:24px;border-bottom:1px solid var(--linha)}
.resumo > div{display:grid;gap:4px 24px;padding:16px 0;border-top:1px solid var(--linha)}
.resumo dt{padding-top:3px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.resumo dd{margin:0;font-size:1.04rem;line-height:1.55;color:var(--fg)}
.ficha-case dl{grid-template-columns:1fr;gap:0}
.ficha-case dt{margin-top:14px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.ficha-case dt:first-child{margin-top:0}
.ficha-case dd{margin-top:3px;font-size:15px;line-height:1.45;color:var(--tinta)}
.ficha-case dd a{color:var(--roxo);text-decoration-thickness:1px;text-underline-offset:3px}
.ficha-case dd a:hover{text-decoration-thickness:1.5px}
.chips-ficha{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chips-ficha li{font-size:13px;font-weight:600;line-height:1.3;padding:5px 10px;border-radius:999px;background:var(--papel);color:var(--tinta)}
.chips-ficha.nossos li{background:var(--oliva);color:var(--roxo-900)}
/* pílula com link (Felipe, 06/10/2026, pergunta 53: as de "Operamos" levam link para a página do serviço nos sete cases):
   o link ocupa a pílula inteira, com o mesmo desenho que já tinha na Technogym (texto roxo sublinhado sobre a pílula clara) */
.chips-ficha a{display:block;margin:-5px -10px;padding:5px 10px;border-radius:999px}
.lista-ponto li{display:inline;white-space:nowrap}
.lista-ponto li:not(:last-child)::after{content:"\00a0· ";white-space:normal}
/* celular (Felipe, 06/10/2026, pergunta 62): na ficha dos cases, os links de "Soluções" viram lista, um por linha.
   Na mesma frase, separados só por um ponto, o dedo errava o link. Cada linha tem cerca de 40px e o link responde na linha toda
   (o ::after do link cobre o <li>). No computador nada muda. Só a ficha dos cases (.ficha-case): a lista de "Entregas" dos
   projetos (.pj-ficha) tem a regra dela no previa-projeto.css. */
@media (max-width:620px){
  .ficha-case .lista-ponto{display:grid;margin-block:-4px -9px}
  .ficha-case .lista-ponto li{position:relative;display:block;padding:9px 0;white-space:normal}
  .ficha-case .lista-ponto li:not(:last-child)::after{content:none}
  .ficha-case .lista-ponto a::after{content:"";position:absolute;inset:0}
  /* pílulas com link: a área de toque avança 3px para cima e para baixo (o vão entre as pílulas é de 6px) */
  .chips-ficha a{position:relative}
  .chips-ficha a::after{content:"";position:absolute;inset:-3px 0}
}
.ficha-case .btn,.ficha-nota{display:none}  /* botão repetido: no celular, o do topo está a uma tela */
.ficha-nota{margin-top:10px;font-size:13px;color:var(--tinta-2);text-align:center}
@media (min-width:621px){.resumo > div{grid-template-columns:150px minmax(0,1fr)}}
@media (min-width:981px){
  .visao{grid-template-columns:minmax(0,1fr) 340px;column-gap:clamp(28px,5vw,64px);row-gap:0}
  .ficha-case .btn{display:inline-flex}
  .ficha-nota{display:block}
  /* título na largura toda, ficha abaixo dele (Felipe, 06/10/2026, pergunta 56). Antes o título ficava preso à coluna da
     esquerda, quebrava em 3 ou 4 linhas e deixava um vazio em cima da ficha. A coluna de texto some como caixa
     (display:contents) e os filhos dela entram na grade: sobretítulo e título de ponta a ponta; embaixo, o resumo à esquerda
     e a ficha à direita, os dois começando na mesma linha (os 24px são a margem de cima do resumo).
     Ficha mais alta → o resumo estica e as três linhas dividem a sobra por igual (linhas auto, não 1fr: com 1fr cada linha
     ficava da altura da maior e sobrava vão branco embaixo das curtas), e o fio de baixo fecha com o pé da ficha. */
  .visao{align-items:stretch}
  .visao > div:first-child{display:contents}
  .visao > div:first-child > *{grid-column:1 / -1}
  .visao > div:first-child > .resumo{grid-column:1;grid-auto-rows:auto;margin-bottom:0}
  .ficha-case{grid-column:2;align-self:start;margin-top:24px}
  .ficha-case dt{margin-top:12px}
}
@media (min-width:1180px){.visao{grid-template-columns:minmax(0,1fr) 360px}}

/* ---------- B3 caminho: cabeçalho ---------- */
.pc-topo{display:grid;gap:28px}
.pc-topo .lead{margin-top:14px}
.pc-imagem img{width:100%;max-width:380px;height:auto;margin-inline:auto}
@media (min-width:981px){
  .pc-topo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:56px;align-items:center}
  .pc-topo > :only-child{grid-column:1 / -1}  /* cabeçalho sem figura ao lado: o texto usa a largura toda */
}

/* ilhas → um fio só (SVG estático) */
.ilhas-fio{display:grid;gap:14px;width:100%;max-width:560px;padding:18px 18px 16px;border:1px solid var(--linha);border-radius:var(--raio);background:rgba(255,255,255,.06)}
.if-linha{display:grid;gap:6px}
.if-t{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.if-linha + .if-linha .if-t{color:var(--acento)}
.if-svg{display:block;width:100%;height:auto;overflow:visible}
.if-svg use{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.if-ilha circle{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.55);stroke-width:1.5}
.if-ilha ellipse{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:3 4}
.if-fio{stroke:var(--oliva);stroke-width:3;stroke-linecap:round}
.if-no circle{fill:var(--roxo-900);stroke:var(--oliva);stroke-width:2}
.if-no.nosso circle{fill:var(--oliva)}
.if-no.nosso use{stroke:var(--roxo-900)}
.ilhas-fio figcaption{font-size:13.5px;line-height:1.45;color:var(--fg2)}

/* ---------- B3 caminho: percurso (vertical no celular; a partir de 621, no máximo 4 colunas por faixa) ----------
   Hoje só a Technogym (8 etapas); a Jabuticaba passou para o formato "dois motores" (.motores, mais abaixo) em 28/09.
   Sem anel tracejado: "construímos" é o círculo oliva cheio, "integramos" o círculo branco cheio e
   "operamos" o anel sólido de 2px, com o ícone na cor do texto (pedido do Felipe, 25/09/2026: "achei um pouco espremido") */
.percurso{margin-top:44px}
.pc-passos{display:grid;counter-reset:pc}
.pc-passo{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:32px;counter-increment:pc}
.pc-passo:last-child{padding-bottom:0}
.pc-no{position:relative}
.pc-corpo{display:grid;align-content:start;gap:4px;min-width:0}
.pc-fase{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.pc-fase:empty{display:none}
.pc-ic{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--roxo-900)}
.pc-passo.opera .pc-ic{background:var(--roxo-900);color:var(--fg);border:2px solid currentColor}
.pc-passo.nosso .pc-ic{background:var(--oliva);color:var(--roxo-900);box-shadow:0 0 0 5px rgba(220,209,84,.25)}
.pc-etapa{display:block;font-size:16px;font-weight:800;line-height:1.2;color:var(--titulo)}
.pc-etapa::before{content:counter(pc,decimal-leading-zero) " ";font:700 13px var(--fonte);font-variant-numeric:tabular-nums;color:var(--acento)}
.pc-sis{font-size:14.5px;line-height:1.3;color:var(--fg)}
.pc-passo.nosso .pc-sis{font-weight:600}
/* "construímos / integramos / operamos" em minúsculas em todos os cases, como na Technogym (Felipe, 06/10/2026, proposta 1).
   Aqui é o percurso do Nespresso; a Jabuticaba está em .mt-papel e o Ranking no fim deste arquivo (.fd-papel). */
.pc-papel{display:block;font:600 13px/1.35 var(--fonte);letter-spacing:0;text-transform:none;color:var(--fg2)}
.pc-passo.nosso .pc-papel{color:var(--oliva)}
.depara,.pc-faz{margin-top:10px;font-size:14px;line-height:1.45}
.depara{display:grid;gap:10px}
.depara .de{color:var(--fg2)}
.depara .para,.pc-faz{padding-left:10px;border-left:3px solid var(--oliva);font-weight:600;color:var(--titulo)}
.dp-rot{margin-right:6px;font:700 11.5px var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
/* fio: trilho tracejado (::before) e fio aceso (::after) */
.pc-no::before,.pc-no::after{content:"";position:absolute;left:21px;top:44px;bottom:-32px;width:2px}
.pc-no::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 5px,transparent 5px 10px)}
.pc-no::after{background:var(--oliva);transform-origin:50% 0}
.pc-passo:last-child .pc-no::before,.pc-passo:last-child .pc-no::after{display:none}
/* rodapé do percurso */
.pc-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:24px;padding-top:14px;border-top:1px solid var(--linha)}
.pc-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--fg2)}
.pc-legenda li{display:inline-flex;align-items:center;gap:6px}
.pc-legenda i{width:12px;height:12px;border-radius:50%;background:#fff}
.pc-legenda i.l-nosso{background:var(--oliva)}
.pc-legenda i.l-opera{background:var(--roxo-900);border:2px solid var(--fg)}
.percurso figcaption{margin-top:12px;max-width:80ch;font-size:14px;line-height:1.5;color:var(--fg2)}
.pc-rever{min-height:40px;padding:6px 14px;border:1px solid var(--linha);border-radius:999px;background:none;color:var(--titulo);font:600 13.5px var(--fonte);cursor:pointer}
.pc-rever:hover{border-color:var(--oliva)}
.pc-rever[hidden]{display:none}
@media (min-width:621px){
  /* o fio entre as etapas atravessa o vão das colunas: o mesmo valor serve às duas regras */
  .pc-passos{--pc-vao:clamp(20px,2.4vw,36px);column-gap:var(--pc-vao)}
  .pc-passos[data-meio="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pc-passos[data-meio="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 8 linhas no subgrid: a 8ª era o número da etapa (.pc-dado, só da Jabuticaba em 4 etapas; saiu em 28/09) e fica vazia, sem altura */
  .pc-passo{grid-row:span 8;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:0;padding-bottom:0}
  .pc-corpo{display:contents}
  .pc-passo > *,.pc-corpo > *{grid-column:1}
  .pc-fase,.pc-fase:empty{display:block;grid-row:1;min-height:1.3em;margin-bottom:12px}
  .pc-no{grid-row:2;height:44px;margin-bottom:18px}
  .pc-etapa{grid-row:3}
  .pc-sis{grid-row:4;margin-top:6px}
  .pc-papel{grid-row:5;margin-top:6px}
  /* "antes" e "depois" em linhas próprias do subgrid: todos os "depois" começam na mesma altura */
  .depara{display:contents}
  .depara .de,.depara .para{align-self:start}  /* sem esticar: o fio oliva do "depois" acompanha só o texto */
  .depara .de{grid-row:6;margin-top:16px}
  .depara .para{grid-row:7;margin-top:10px}
  .pc-faz{grid-row:6 / span 2;align-self:start;margin-top:16px}
  /* reserva a altura do botão "Rever": a linha da legenda não pula quando ele aparece */
  .pc-legenda{min-height:40px;align-content:center}
  .pc-no::before,.pc-no::after{left:44px;right:calc(-1 * var(--pc-vao));top:21px;bottom:auto;width:auto;height:2px}
  .pc-no::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 5px,transparent 5px 10px)}
  .pc-no::after{transform-origin:0 50%}
  /* 2ª faixa e fim de cada faixa */
  .pc-passos[data-meio="4"] > .pc-passo:nth-child(n+5) .pc-fase{margin-top:48px}
  .pc-passos[data-meio="3"] > .pc-passo:nth-child(n+4) .pc-fase{margin-top:48px}
  .pc-passos[data-meio="4"] > .pc-passo:nth-child(4n) .pc-no::before,.pc-passos[data-meio="4"] > .pc-passo:nth-child(4n) .pc-no::after,
  .pc-passos[data-meio="3"] > .pc-passo:nth-child(3n) .pc-no::before,.pc-passos[data-meio="3"] > .pc-passo:nth-child(3n) .pc-no::after{display:none}
}
/* sem faixa única de 8 etapas no desktop largo: ficava espremido. O caso de 8 etapas (Technogym) fica em 4 + 4 em toda largura */
/* animação: só em tela e só sem "reduzir movimento". O estado base (sem .armado) é o final */
@media screen and (prefers-reduced-motion:no-preference){
  .percurso.armado .pc-ic{opacity:.6;transform:scale(.9)}
  .percurso.armado .pc-no::after{transform:scaleY(0)}
  .percurso.armado .para,.percurso.armado .pc-faz{border-left-color:transparent}
  .percurso.armado .aceso .pc-ic{opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease;animation:pc-acende .6s ease-out 1}
  .percurso.armado .aceso .pc-no::after{transform:none;transition:transform .3s linear .12s}
  .percurso.armado .aceso .para,.percurso.armado .aceso .pc-faz{border-left-color:var(--oliva);transition:border-color .3s ease .1s}
}
@media screen and (prefers-reduced-motion:no-preference) and (min-width:621px){
  .percurso.armado .pc-no::after{transform:scaleX(0)}
}
@keyframes pc-acende{from{box-shadow:0 0 0 0 rgba(220,209,84,.6)}to{box-shadow:0 0 0 12px rgba(220,209,84,0)}}
@media print{.pc-rever{display:none}}

/* formato "frentes" (case sem sequência) */
.frentes{display:grid;gap:14px;margin-top:36px}
.frente{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:rgba(255,255,255,.07)}
.frente h3{font-size:1.15rem;color:var(--titulo)}
.frente p{font-size:15px;color:var(--fg2)}
@media (min-width:621px){.frentes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:981px){.frentes{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}

/* ---------- B3 caminho: formato "dois motores" (case de e-commerce; Jabuticaba desde 28/09) ----------
   Aquisição e retenção em volta da loja: motor 1 "Quem chega" (mídia + SEO) → loja ⇄ motor 2 "Quem volta" (e-mail + remarketing),
   e o resultado dos dois juntos embaixo. Tudo sob .motores (a classe da seção); nenhuma regra do .percurso/.pc-* muda.
   Celular: motor 1 → trilho → loja → laço → motor 2 → resultado, empilhados; os trilhos correm na coluna dos ícones (x = 36px).
   621+: os dois canais de cada motor lado a lado. 981+: cinco colunas (motor | fluxo | loja | fluxo | motor) em subgrid;
   os canais dividem o cartão em duas metades iguais, então as pontas dos fluxos (25% e 75%) caem no meio de cada canal;
   o celular fica centrado na altura dos cartões, então as pontas do lado da loja (30% e 70%) sempre caem nele.
   O resultado sai dos dois motores (uma chave que desce do meio de cada cartão e passa por baixo do celular sem encostar nele),
   nunca do celular da loja nova: os números são de 2023 a 2025, da loja anterior. Todo número traz o período. */
.motores{--fl:clamp(132px,14vw,190px);--ce:clamp(160px,15vw,204px);--mt-card:rgba(42,8,40,.34);--mt-borda:rgba(255,255,255,.17);--mt-trilho:36px;--mt-cel:120px}
.motores .mt{margin-top:clamp(32px,4vw,56px)}
.motores .mt-mapa{display:grid;grid-template-columns:minmax(0,1fr)}
.motores h3{font-size:clamp(1.35rem,1.9vw,1.6rem);font-weight:800;line-height:1.1;color:var(--titulo)}
.motores .mt-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.motores .mt-papel{font-weight:600;letter-spacing:0;text-transform:none;padding:3px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:var(--fg)}
.motores .mt-papel.nosso{border-color:var(--oliva);background:var(--oliva);color:var(--roxo-900)}
.motores .mt-cab{margin-bottom:14px}

/* cartão de canais (motor) */
.motores .mt-canais{display:grid;border:1px solid var(--mt-borda);border-radius:var(--raio);background:var(--mt-card)}
.motores .mt-canal{position:relative;display:grid;align-content:center;gap:6px;padding:16px 18px 18px;min-width:0}
.motores .mt-canal + .mt-canal{border-top:1px solid var(--mt-borda)}
.motores .mt-nome{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;line-height:1.25;color:var(--titulo)}
.motores .mt-nome > span:last-child{text-wrap:balance}
.motores .mt-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;border:2px solid #fff;background:var(--roxo-900);color:#fff}
.motores .mt-ic .ico{width:18px;height:18px}
.motores .mt-faz{font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.motores .mt-dado{margin-top:8px;font-size:14.5px;line-height:1.45;color:var(--fg);text-wrap:pretty}
.motores .mt-dado b{display:block;margin-bottom:2px;font-size:clamp(2.1rem,2.7vw,2.5rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--acento)}
@media (max-width:620px){
  .motores .mt-dado{display:grid;grid-template-columns:4.6rem minmax(0,1fr);column-gap:10px;align-items:center}
  .motores .mt-dado b{margin:0}
}

/* fluxos: no celular, trilho vertical na coluna dos ícones; o texto vai à direita */
.motores .mt-fluxo{position:relative;display:grid;align-content:center;min-height:112px;padding:16px 0 18px calc(var(--mt-trilho) + 34px)}
.motores .mt-saida{font-size:14.5px;line-height:1.45;color:var(--fg);text-wrap:pretty}
.motores .mt-saida b{display:block;margin-bottom:4px;font-size:clamp(2.4rem,3.2vw,2.9rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--acento)}
.motores .mt-per{display:block;margin-bottom:6px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.motores .mt-rot{display:block;margin-bottom:8px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.motores .mt-trilho{position:absolute;top:0;bottom:0;left:calc(var(--mt-trilho) - 1.5px);width:3px;background:var(--oliva)}
.motores .mt-trilho::after{content:"";position:absolute;left:50%;bottom:-1px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top:10px solid var(--oliva)}
.motores .mt-trilho.sobe::after{top:-1px;bottom:auto;border-top:0;border-bottom:10px solid var(--oliva)}
.motores .mt-trilho.desce{left:calc(var(--mt-trilho) - 13.5px)}
.motores .mt-trilho.sobe{left:calc(var(--mt-trilho) + 10.5px)}
.motores .mt-trilho.sem-ponta::after{content:none}
.motores .mt-desk{display:none}
/* o laço continua pelo cabeçalho do motor 2 até o cartão (a seta de descida termina no cartão) */
.motores .mt-m2 .mt-cab{position:relative;margin-bottom:0;padding:0 0 16px calc(var(--mt-trilho) + 34px)}

/* loja: no celular, o celular da loja à esquerda e o texto ao lado */
.motores .mt-loja{position:relative;display:grid;grid-template-columns:var(--mt-cel) minmax(0,1fr);column-gap:18px;align-items:start}
.motores .mt-loja-cab{grid-column:2;grid-row:1;align-self:center}
.motores .mt-fases{display:grid;gap:10px;margin-top:12px}
.motores .mt-fases li{padding:1px 0 2px 11px;border-left:3px solid rgba(255,255,255,.3);font-size:14.5px;line-height:1.4;color:var(--fg2);text-wrap:pretty}
.motores .mt-fases .nova{border-left-color:var(--oliva);color:var(--fg)}
.motores .mt-ano{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:4px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.motores .mt-ano .mt-papel{padding:2px 8px}
.motores .mt-tela{grid-column:1;grid-row:1;position:relative;width:100%;aspect-ratio:330/686;overflow:hidden;border-radius:14% / 6.7%;background:#1C181C;box-shadow:0 0 0 3px var(--oliva),0 28px 50px -24px rgba(0,0,0,.6)}
/* recorte do celular no mockup de 1600×1000 (jabuticaba-loja-2026): o aparelho ocupa 330×686 px a partir de (1230, 294) */
.motores .mt-tela img{position:absolute;left:-372.73%;top:-42.86%;width:484.85%;max-width:none;height:auto}
/* se o texto ao lado passar da altura do celular (até ~375 px), os dois trilhos do laço descem do celular até o fim do bloco */
.motores .mt-loja::before,.motores .mt-loja::after{content:"";position:absolute;top:calc(var(--mt-cel) * 686 / 330);bottom:0;width:3px;background:var(--oliva)}
.motores .mt-loja::before{left:calc(var(--mt-trilho) - 13.5px)}
.motores .mt-loja::after{left:calc(var(--mt-trilho) + 10.5px)}
/* a ponta da volta fica presa ao pé do celular, não no topo do trilho do laço: com o texto mais alto que o celular,
   ela ficava solta no meio do fio, de 12 a 53 px abaixo dele (320 a 375 px) */
@media (max-width:980px){
  .motores .mt-f2 .mt-trilho.sobe::after{content:none}
  .motores .mt-loja-cab::before{content:"";position:absolute;left:calc(var(--mt-trilho) + 5px);top:calc(var(--mt-cel) * 686 / 330 - 1px);border:7px solid transparent;border-top:0;border-bottom:10px solid var(--oliva)}
}

/* resultado */
.motores .mt-res{margin-top:24px;padding:18px 18px 20px;border-radius:var(--raio);background:rgba(255,255,255,.07);border:1px solid var(--mt-borda)}
.motores .mt-res .mt-rot{margin-bottom:10px}
.motores .mt-res b{display:block;font-size:clamp(3.4rem,6vw,4.75rem);font-weight:800;line-height:.95;letter-spacing:-.03em;color:var(--acento)}
.motores .mt-res p{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--fg);max-width:46ch;text-wrap:pretty}

@media (min-width:621px){
  .motores{--mt-cel:150px}
  .motores .mt-canais{grid-template-columns:1fr 1fr}
  .motores .mt-canal + .mt-canal{border-top:0;border-left:1px solid var(--mt-borda)}
  .motores .mt-loja{column-gap:28px}
  .motores .mt-loja-cab{max-width:56ch}
  .motores .mt-fases{grid-template-columns:1fr 1fr;gap:16px}
}

/* 981+: o infográfico em cinco colunas */
@media (min-width:981px){
  .motores .mt-mapa{grid-template-columns:minmax(0,1fr) var(--fl) var(--ce) var(--fl) minmax(0,1fr);grid-template-rows:auto auto;row-gap:18px}
  .motores .mt-motor{grid-row:1 / 3;display:grid;grid-template-rows:subgrid;min-width:0}
  .motores .mt-m1{grid-column:1}
  .motores .mt-m2{grid-column:5}
  .motores .mt-cab,.motores .mt-m2 .mt-cab{align-self:end;margin:0;padding:0}
  .motores .mt-cel{display:none}
  /* altura mínima dos cartões: é ela que dá o vão entre as curvas de cada fluxo (de 30% a 70% da altura, do lado da loja)
     para o texto do meio. Sem ela, de 1100 a 1300 os cartões baixavam para ~420 px e as curvas cortavam o texto do laço */
  .motores .mt-canais{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;min-height:460px}
  .motores .mt-canal + .mt-canal{border-left:0;border-top:1px solid var(--mt-borda)}
  /* pontos de saída/entrada no meio de cada canal, na borda voltada para a loja */
  .motores .mt-canal::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--oliva);box-shadow:0 0 0 4px rgba(220,209,84,.25)}
  .motores .mt-m1 .mt-canal::after{right:-7px}
  .motores .mt-m2 .mt-canal::after{left:-7px}

  .motores .mt-loja{grid-column:2 / 5;grid-row:1 / 3;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:0}
  .motores .mt-loja::before,.motores .mt-loja::after{content:none}
  .motores .mt-loja-cab{grid-column:1 / -1;grid-row:1;align-self:end;max-width:none;display:grid;justify-items:center;text-align:center}
  /* as duas fases empilhadas e estreitas, só sob "A loja online": lado a lado elas pareciam títulos dos fluxos */
  .motores .mt-fases{grid-template-columns:minmax(0,1fr);gap:10px;width:100%;max-width:470px;margin-top:14px;text-align:left}
  .motores .mt-tela{grid-column:2;grid-row:2;align-self:center}

  .motores .mt-fluxo{grid-row:2;min-height:0;padding:0;display:block}
  .motores .mt-f1{grid-column:2}
  .motores .mt-f2{grid-column:4}
  .motores .mt-trilho{display:none}
  .motores .mt-desk{display:block}
  .motores .mt-curva{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .motores .mt-curva path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .motores .mt-curva .halo{stroke:rgba(220,209,84,.16);stroke-width:14}
  .motores .mt-curva .fio{stroke:var(--oliva);stroke-width:3}
  .motores .mt-ponta{position:absolute;width:0;height:0;border:7px solid transparent;border-right:0;border-left:11px solid var(--oliva)}
  .motores .mt-ponta.esq{border-left:0;border-right:11px solid var(--oliva)}
  .motores .mt-f1 .p1{right:0;top:calc(30% - 7px)}
  .motores .mt-f1 .p2{right:0;top:calc(70% - 7px)}
  .motores .mt-f2 .p1{right:0;top:calc(25% - 7px)}
  .motores .mt-f2 .p2{left:0;top:calc(70% - 7px)}
  /* texto do meio compacto (14px, entrelinha 1,35, margens curtas e 6px de cada lado): o rótulo de período ("De 2023 a 2025,
     na loja anterior") ocupa duas linhas e o texto do laço (5,4x) quatro; com as pontas do lado da loja em 30% e 70%,
     sobra folga de cerca de 7px ou mais entre o texto e o halo das curvas, de 981 a 1920 */
  .motores .mt-saida{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);font-size:14px;line-height:1.35;text-align:center;text-wrap:balance}
  .motores .mt-saida .mt-per{margin-bottom:4px}
  .motores .mt-saida b{margin-bottom:2px}
  /* rótulos do laço: o de cima cresce para cima e o de baixo para baixo, então nunca encostam na curva, mesmo em duas linhas */
  .motores .mt-f2 .mt-rot{position:absolute;left:0;right:0;margin:0;text-align:center}
  .motores .mt-f2 .r-ida{bottom:calc(75% + 12px)}
  .motores .mt-f2 .r-volta{top:calc(75% + 12px)}

  /* resultado: uma chave sai do meio de cada motor (cartões) e desce até o número, por baixo da loja */
  .motores .mt-res{position:relative;margin:0;padding:64px 0 0;border:0;border-radius:0;background:none;text-align:center}
  .motores .mt-res::before{content:"";position:absolute;top:0;height:30px;left:calc((100% - 2 * var(--fl) - var(--ce)) / 4 - 1.5px);right:calc((100% - 2 * var(--fl) - var(--ce)) / 4 - 1.5px);border:3px solid var(--oliva);border-top:0;border-radius:0 0 18px 18px}
  .motores .mt-res::after{content:"";position:absolute;left:50%;top:27px;width:3px;height:22px;margin-left:-1.5px;border-radius:0 0 2px 2px;background:var(--oliva)}
  .motores .mt-res p{margin-inline:auto}
}
@media (min-width:981px) and (max-width:1179px){
  .motores{--fl:164px;--ce:150px}
  .motores .mt-canal{padding:16px 16px 18px}
  .motores .mt-nome{gap:10px;font-size:15px}
  .motores .mt-faz,.motores .mt-dado{font-size:14px}
}

/* animação (previa.js, bloco .motores): uma vez, quando cada parte entra na tela. Só desenham os fios, as pontas e a chave:
   números e textos nunca somem (a mesma regra do percurso). O estado base (sem .mt-armado) é o final, com tudo desenhado:
   é o que aparece sem JS, com "reduzir movimento", na impressão e com a parte já na tela ao carregar.
   O script põe .mt-armado em cada parte (fluxo 1, laço e, a partir de 981, a chave do resultado; no celular, também a loja,
   por causa dos trechos de fio sob o celular e da ponta da volta) e .mt-vivo quando ela entra. */
@media screen and (prefers-reduced-motion:no-preference){
  .motores .mt-armado .mt-trilho{transform:scaleY(0);transform-origin:50% 0}
  .motores .mt-armado .mt-trilho.sobe{transform-origin:50% 100%}
  .motores .mt-armado .mt-curva{clip-path:inset(0 100% 0 0)}
  .motores .mt-armado .mt-curva.volta{clip-path:inset(0 0 0 100%)}
  .motores .mt-armado .mt-ponta,.motores .mt-armado.mt-res::before,.motores .mt-armado.mt-res::after{opacity:0}
  .motores .mt-vivo .mt-trilho{transform:none;transition:transform .35s ease-out}
  .motores .mt-vivo .mt-curva,.motores .mt-vivo .mt-curva.volta{clip-path:inset(0 0 0 0);transition:clip-path .6s ease-out}
  .motores .mt-vivo .mt-ponta{opacity:1;transition:opacity .2s ease .55s}
  .motores .mt-vivo.mt-res::before{opacity:1;transition:opacity .3s ease}
  .motores .mt-vivo.mt-res::after{opacity:1;transition:opacity .25s ease .25s}
  /* celular: o laço desenha descendo (loja → motor 2) e depois subindo (motor 2 → loja), com os trechos de fio sob o celular
     (quando o texto da loja passa dele) e a ponta no pé do celular por último */
  .motores .mt-vivo.mt-f2 .mt-trilho.desce{transition-delay:.15s}
  .motores .mt-vivo.mt-m2-cab .mt-trilho.desce{transition-delay:.5s;transition-duration:.2s}
  .motores .mt-vivo.mt-m2-cab .mt-trilho.sobe{transition-delay:.75s;transition-duration:.2s}
  .motores .mt-vivo.mt-f2 .mt-trilho.sobe{transition-delay:.95s}
  @media (max-width:980px){
    .motores .mt-armado.mt-loja::before{transform:scaleY(0);transform-origin:50% 0}
    .motores .mt-armado.mt-loja::after{transform:scaleY(0);transform-origin:50% 100%}
    .motores .mt-armado.mt-loja .mt-loja-cab::before{opacity:0}
    .motores .mt-vivo.mt-loja::before{transform:none;transition:transform .15s linear}
    .motores .mt-vivo.mt-loja::after{transform:none;transition:transform .15s linear 1.3s}
    .motores .mt-vivo.mt-loja .mt-loja-cab::before{opacity:1;transition:opacity .2s ease 1.45s}
  }
  /* 981+: fluxo 1 e laço entram juntos; o laço vem depois do fluxo 1 */
  @media (min-width:981px){
    .motores .mt-vivo.mt-f2 .mt-curva{transition-delay:.35s}
    .motores .mt-vivo.mt-f2 .mt-curva.volta{transition-delay:.65s}
    .motores .mt-vivo.mt-f2 .mt-ponta{transition-delay:.9s}
  }
}

/* ---------- B4 argumento ---------- */
.motivos{display:grid;margin-top:32px;counter-reset:mot}
.motivos li{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:6px;padding:20px 0;border-top:1px solid var(--linha);counter-increment:mot}
.motivos li::before{content:counter(mot);grid-row:span 2;font-size:2.1rem;font-weight:800;line-height:1;color:var(--acento)}
.motivos h3{font-size:1.15rem;color:var(--titulo)}
.motivos p{font-size:15.5px;color:var(--fg2)}
.honesto{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:20px;padding:16px 18px;border-left:4px solid var(--oliva);border-radius:0 var(--raio-s) var(--raio-s) 0;background:var(--chip);font-weight:600;color:var(--titulo)}
@media (min-width:621px){.honesto{padding:18px 22px}}
@media (min-width:981px){
  .motivos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
  .motivos li{grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:48px minmax(0,1fr)}
  .motivos li::before{font-size:2.6rem}
}

/* ---------- B5 resultados ---------- */
/* pendente: um cartão tracejado só, com os números em pílulas numa linha que quebra e as falas numa linha.
   O que pedir fica no title de cada a-confirmar, nunca no texto visível */
.em-apuracao{display:grid;gap:14px;margin-top:28px;padding:18px 20px;border:1.5px dashed var(--acento);border-radius:var(--raio)}
.apur-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14.5px;color:var(--fg2)}
.apur-pilulas{display:flex;flex-wrap:wrap;gap:8px}
.apur-pilulas li{padding:6px 13px;border:1px solid var(--linha);border-radius:999px;background:var(--chip);font-size:14.5px;font-weight:600;line-height:1.35;color:var(--titulo)}
.apur-slot{font:600 13px var(--fonte);color:var(--acento)}
.apur-vozes{padding-top:12px;border-top:1px solid var(--linha);font-size:15px;line-height:1.45;color:var(--fg)}
/* aprovado: gráfico por ano, placar e depoimento */
.res-grade{display:grid;gap:24px;margin-top:28px}
.res-lado{display:grid;gap:20px;align-content:start}
.indice-anos{padding:20px 20px 16px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--card);color:var(--card-fg)}
.anos-t{font-size:14px;font-weight:700;color:var(--tinta)}
.anos{--alto:170px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;margin-top:18px}
.anos li{display:flex;flex-direction:column;align-items:center}
.ano-v{order:1;margin-bottom:6px;font-size:15px;font-weight:800;color:var(--tinta)}
.ano-barra{order:2;display:block;width:24px;height:calc(var(--alto) * var(--v) / var(--max));border-radius:4px 4px 0 0;background:var(--roxo)}
.ano-t{order:3;align-self:stretch;min-height:2.9em;padding-top:8px;border-top:1px solid #D9D6CB;text-align:center;font-size:13px;line-height:1.3;color:var(--tinta-2)}
.ano-t small{display:block;font-size:11.5px}
.anos .parcial .ano-barra{background:repeating-linear-gradient(135deg,var(--roxo) 0 3px,#D7B9D5 3px 6px)}
.indice-anos figcaption{margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--tinta-2)}
.placar-item{display:grid;gap:4px;align-content:start;padding-top:14px;border-top:1px solid var(--linha)}
.placar-n{font-size:clamp(2.6rem,5vw,3.4rem);font-weight:800;line-height:1;color:var(--titulo)}
.placar-r{font-size:15.5px;line-height:1.45;color:var(--fg);text-wrap:pretty}  /* sem "maior" sozinho na última linha */
/* par de números lado a lado (também no celular), com o período numa linha só em cima dos dois */
.placar-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,3vw,28px);row-gap:10px}
.placar-t{grid-column:1 / -1;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
@media (max-width:620px){.placar-par .placar-r{font-size:14.5px}}
@media (min-width:621px){.anos{--alto:200px}}
@media (min-width:981px){
  .res-grade{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:32px;align-items:stretch}
  /* o cartão do gráfico estica até o pé do depoimento; a sobra fica acima das barras, que seguem na mesma linha de base */
  .indice-anos{display:flex;flex-direction:column}
  .indice-anos .anos{flex:1}
}

/* gráfico de posição média, antes → depois (Travelex; o mesmo desenho da Jabuticaba: gráfico à esquerda, par de números e
   depoimento à direita). Um painel por site, na mesma escala: posição 1 no fio tracejado do alto, fios claros em 10 e 20, e só os
   dois pontos que a página publica (sem ponto intermediário). Os valores NÃO são escritos no gráfico: ficam uma vez só, no par de
   números ao lado (revisão 30/09: escritos nos dois lugares, os mesmos números apareciam duas vezes seguidas). O "antes" apagado
   e oco, o "depois" em roxo. A posição de cada ponto e de cada fio vem de --x/--y no HTML (y = (posição − 1) / 24, escala de 1 a
   25); o fio é um SVG 0–100 esticado na mesma caixa. A escala (1, 10, 20) fica numa calha de 24 px à esquerda da área, e o eixo
   de baixo começa no mesmo ponto. Mesmo cartão do .indice-anos; a partir de 981 estica até o pé do depoimento e a sobra fica no gráfico. */
.indice-pos{display:flex;flex-direction:column;padding:20px 20px 16px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--card);color:var(--card-fg)}
.pos-paineis{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,3vw,32px);margin-top:18px}
.pos-painel{display:flex;flex-direction:column;min-width:0}
.pos-site{font-size:14px;font-weight:700;line-height:1.3;color:var(--tinta)}
.pos-graf{position:relative;flex:1;min-height:190px;margin-top:4px}
.pos-area{position:absolute;inset:18px 0 16px 24px;border-top:1.5px dashed #ADAA9E}
.pos-grade{position:absolute;left:0;right:0;top:calc(var(--y) * 1%);border-top:1px solid #E6E3D9}
.pos-tick{position:absolute;right:calc(100% + 7px);top:calc(var(--y) * 1%);transform:translateY(-50%);font-size:11.5px;line-height:1;font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.pos-fio{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pos-fio line{stroke:var(--roxo);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pos-ponto{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--roxo)}
.pos-ponto.antes{background:#fff;box-shadow:inset 0 0 0 2.5px var(--tinta-2)}
.pos-eixo{position:relative;height:2.4em;margin-left:24px;border-top:1px solid #D9D6CB}
.pos-eixo span{position:absolute;top:8px;left:calc(var(--x) * 1%);transform:translateX(-50%);font-size:13px;line-height:1.3;color:var(--tinta-2)}
.indice-pos figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--tinta-2);text-wrap:pretty}
@media (min-width:621px){.pos-graf{min-height:220px}}

/* aprovado sem gráfico, com depoimento (Mandala): os números num cartão branco (.res-num), ao lado do depoimento.
   .placar-par (2 números) ou .placar-trio (3); o período numa linha só em cima (.placar-t); número ainda sem valor numa
   linha "em apuração" no pé do placar (.placar-apur), nunca um número grande vazio.
   Sem gráfico e sem depoimento (Koin): .res-so-num, sem .res-num: o mesmo placar da Jabuticaba e do Travelex (sem cartão,
   número escuro), na largura toda (revisão 30/09: o cartão com número roxo sozinho deixava o bloco diferente dos outros cases). */
.res-num .placar{padding:20px 20px 22px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--card);color:var(--card-fg)}
.res-num .placar-n{color:var(--roxo)}
.res-num .placar-r{color:var(--tinta)}
.placar-trio{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(16px,3vw,28px);row-gap:10px}
/* posição média, antes → depois: o "antes" apagado, a seta fina, o "depois" na cor do número */
.placar-n .placar-de{color:var(--tinta-2);font-weight:700}
.placar-n .placar-seta{margin-inline:.06em;font-size:.62em;font-weight:500;color:var(--tinta-2)}
.placar-n small{font-size:.5em;font-weight:600}
/* colchete curto de pendência na frase do número ("[com ou sem a marca]", "[de N para M]") não se parte no meio */
.placar-r .colchete,.placar-apur .colchete{white-space:nowrap}
/* o depoimento estica até a altura do cartão dos números: citação e nome ficam juntos, no meio do cartão */
.pg-case .res-num > .depo{justify-content:center}
.placar-apur{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--linha);font-size:14.5px;line-height:1.45;color:var(--tinta-2);text-wrap:pretty}
/* até 620: os números empilhados, número em cima e frase embaixo, na largura toda (meia coluna deixava a frase em 5 ou 6 linhas) */
@media (max-width:620px){
  .res-num .placar-par,.res-num .placar-trio{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .res-num .placar-n{font-size:2.5rem}
}
@media (min-width:821px){.placar-trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:981px){
  .res-num{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .res-num .placar{padding:26px 26px 28px;align-content:center}
  .res-so-num{grid-template-columns:minmax(0,1fr)}
}

/* ---------- depoimento: um componente só em todos os cases e projetos (30/09) ----------
   figure.depo > blockquote + figcaption > img.foto-p + span.depo-quem > b (nome) + span.depo-cargo (cargo, empresa)
   [+ span.depo-nota]. Cartão branco, aspas roxas, foto redonda de 56 px com anel oliva, como na Jabuticaba.
   Foto: assets-marca/depoimentos/<nome>.jpg (192 px, quadrada), só a que o site atual liga ao nome da pessoa.
   Sem foto confiável: a marca do cliente no papel, no mesmo círculo (marca-<cliente>.jpg), nunca rosto de banco de imagem.
   Atribuição pendente: a-confirmar em .depo-quem (ou no span de dentro, quando há .depo-nota com marca própria).
   Vence o .depo da Home (previa.css: subgrid de duas linhas na grade dos depoimentos). */
.pg-case .depo{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;min-width:0;margin:0;padding:26px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);box-shadow:var(--sombra)}
.pg-case .depo blockquote{margin:0;font-size:1.02rem;line-height:1.5;color:var(--card-fg);text-wrap:pretty}
.pg-case .depo blockquote::before{content:"“";display:block;font-size:3rem;font-weight:800;line-height:.6;color:var(--roxo)}
.pg-case .depo figcaption{display:flex;align-items:center;gap:14px;align-self:stretch}
.pg-case .depo .foto-p{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;background:var(--papel);box-shadow:0 0 0 3px var(--oliva)}
.pg-case .depo .depo-quem{display:grid;gap:2px;min-width:0;font-size:16px;line-height:1.35;color:var(--card-fg)}
.pg-case .depo .depo-quem b{display:block;font-weight:700;color:var(--card-fg)}
.pg-case .depo figcaption .depo-quem span:not(.depo-cargo):not(.depo-nota){font-size:inherit;color:inherit}
.pg-case .depo figcaption .depo-quem .depo-cargo{display:block;font-size:13.5px;line-height:1.4;color:var(--tinta-2)}
.pg-case .depo figcaption .depo-quem .depo-nota{display:block;margin-top:3px;font:600 13px/1.4 var(--fonte);color:var(--roxo)}
/* no claro, o cartão branco ganha o fio da superfície para não sumir no fundo branco */
.pg-case [data-surf="claro"] .depo{border:1px solid var(--linha)}

/* ---------- B6 por dentro ---------- */
.por-dentro{margin-top:28px;border:1px solid var(--linha);border-radius:var(--raio);background:rgba(255,255,255,.06)}
/* opcional (case de integração): o "por dentro" no fim do B4, no papel ou no claro */
[data-surf="papel"] .por-dentro{background:var(--card)}
[data-surf="claro"] .por-dentro{background:var(--papel)}
.por-dentro > summary{display:flex;align-items:center;gap:14px;min-height:60px;padding:16px;list-style:none;cursor:pointer;font-size:1.05rem;font-weight:700;color:var(--titulo)}
.por-dentro > summary::-webkit-details-marker{display:none}
.por-dentro > summary::before{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font-size:20px;font-weight:800;line-height:1}
.por-dentro[open] > summary::before{content:"−"}
.por-dentro[open] > summary{border-bottom:1px solid var(--linha)}
.por-dentro .sum-txt{display:grid;gap:2px}
.por-dentro .sum-txt small{font-size:13.5px;font-weight:400;line-height:1.4;color:var(--fg2)}
.por-dentro > summary:hover .sum-txt > span{text-decoration:underline;text-underline-offset:4px}
.por-dentro-corpo{display:grid;gap:24px;padding:16px 16px 22px}
.conexoes{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.conexoes th,.conexoes td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--linha)}
.conexoes thead th{padding-top:4px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.conexoes tbody th{width:42%;font-family:var(--fonte);font-size:14.5px;font-weight:700;color:var(--acento)}  /* oliva no roxo, roxo no papel e no claro */
.conexoes td{color:var(--fg)}
.conexoes tbody tr:last-child > *{border-bottom:0}
.por-dentro-duas{display:grid;gap:28px 48px}
.por-dentro-corpo h3{margin-bottom:14px;font-size:1.1rem;color:var(--titulo)}
.decisoes{display:grid;grid-template-columns:1fr;gap:4px;font-size:15px}
.decisoes dt{font-weight:700;color:var(--titulo)}
.decisoes dd{margin:0 0 10px;color:var(--fg2)}
.cuidados{display:grid;gap:8px;font-size:15px}
.cuidados li{position:relative;padding-left:22px;color:var(--fg2)}
.cuidados li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:2px;background:var(--acento)}
.assinatura{padding-top:14px;border-top:1px solid var(--linha);font-size:14px;color:var(--fg2)}
/* tabela vira um bloco por linha no celular (sem rolagem lateral) */
@media (max-width:720px){
  .conexoes,.conexoes tbody,.conexoes tr,.conexoes th,.conexoes td{display:block;width:auto}
  .conexoes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .conexoes thead th{overflow:hidden;white-space:nowrap}
  .conexoes tr{padding:14px 0;border-bottom:1px solid var(--linha)}
  .conexoes tbody tr:last-child{border-bottom:0}
  .conexoes th,.conexoes td{padding:0;border:0}
  .conexoes tbody th{width:auto;margin-bottom:8px}
  /* rótulo em coluna fixa à esquerda; o texto fica num bloco só, mesmo com link no meio (01/10/2026: em grid, o <a> virava um item à parte) */
  .conexoes td{position:relative;padding-left:106px;margin-top:4px}
  .conexoes td::before{content:attr(data-label);position:absolute;left:0;top:2px;width:96px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
  /* tabela com uma coluna de dados só (Technogym, "Papel no fluxo"; 06/10/2026): o mesmo rótulo repetido em toda linha não informa nada
     e tirava 106px do texto. Sem o rótulo, o texto usa a largura toda, embaixo do nome do sistema. Com duas colunas ou mais, o rótulo fica. */
  .conexoes td:only-of-type{padding-left:0}
  .conexoes td:only-of-type::before{content:none}
}
@media (min-width:621px){
  .por-dentro > summary{padding:16px 22px}
  .por-dentro-corpo{padding:20px 22px 26px}
  .decisoes{grid-template-columns:max-content minmax(0,1fr);gap:10px 18px}
  .decisoes dd{margin:0}
}
@media (min-width:981px){.por-dentro-duas{grid-template-columns:1fr 1fr}}

/* ---------- B7 mais do cliente (opcional) ----------
   Outras frentes do cliente que ainda não têm case próprio (Technogym: #bi e #marketing, que a Home aponta).
   Bloco curto: H2 menor que o das outras seções, uma linha por frente e o link "Marketing e tecnologia num time só" no fim.
   Sem linha do tempo da conta: a história de como a conta cresceu fica só na Home ("Contas que cresceram"). */
.pg-case .sec.sec-mais{padding-block:clamp(36px,4.5vw,56px)}
.sec-mais .h2{font-size:clamp(1.55rem,2.4vw,2.1rem)}
.linha-acao{margin-top:18px}
/* um selo só, acima das linhas */
.frentes-conta{display:grid;margin-top:20px}
.frentes-rot{margin-bottom:10px}
/* celular: h3 e, embaixo, a frase com o link logo depois dela (uma linha a menos por frente) */
.frente-linha{padding:10px 0;border-top:1px solid var(--linha);font-size:15px;line-height:1.5}
.frente-linha h3{margin-bottom:3px;font-size:1.06rem;line-height:1.3;color:var(--titulo)}
.frente-linha p{display:inline;margin-right:8px;color:var(--fg2)}
.frente-linha .link-seta{white-space:nowrap}
.mini-t{font-size:13px;font-weight:800;line-height:1.12;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
/* outros cases (no B8, na coluna do FAQ): pílulas compactas, 2 colunas no celular */
.chips-case{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
/* bloco (não flex): em flex, "Cases de" e o span.nw "e-commerce" viravam dois itens e quebravam em pedaços;
   align-content centra na vertical num bloco (navegador antigo só alinha em cima) */
.chips-case a{display:block;align-content:center;min-height:38px;padding:6px 12px;font-size:13.5px;line-height:1.25;text-align:center}
.chips-case a:last-child:nth-child(odd){grid-column:1 / -1}  /* número ímpar de pílulas: a última ocupa a linha, sem sobrar meia coluna */
.leia{display:grid;gap:12px;margin-top:14px}
.leia small{display:block;font:700 12px var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.leia a{font-weight:600;line-height:1.4;color:var(--titulo);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.leia a:hover{text-decoration-color:var(--acento);text-decoration-thickness:2px}
@media (min-width:621px){.chips-case{display:flex;flex-wrap:wrap}.chips-case a{min-height:0}}
@media (min-width:821px){
  /* 16rem: "Marketing digital da Technogym" cabe numa linha (15rem partia a 1px) */
  .frente-linha{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr) auto;column-gap:24px;align-items:baseline}
  .frente-linha h3{margin-bottom:0}
  .frente-linha p{display:block;margin-right:0}
}

/* ---------- B8 perguntas + botão final ---------- */
.faq-cta{display:grid;gap:32px}
.faq-case{margin-top:28px}
.faq summary h3{display:inline;font-size:1.08rem;font-weight:700;line-height:1.35;letter-spacing:0;color:inherit}
.faq-case summary h3{display:block}  /* em bloco, o h3 usa o text-wrap:balance dos títulos (sem palavra sozinha na última linha) */
.faq-mais{margin-top:22px}
.faq-mais + .faq-mais{margin-top:12px}  /* segundo link (Jabuticaba: "Marketing e tecnologia num time só", sem B7) */
/* "Do blog" e "Outros cases" no B8, na coluna do FAQ, depois do link de perguntas */
/* o fio de cima é um ::before, não borda: a lista não é cartão e não deve medir a base contra o cartão fixo (sticky) ao lado */
.faq-leia{position:relative;margin-top:28px;padding-top:22px}
.faq-leia::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha)}
.cta-lado{display:grid;gap:12px;align-content:start}
.cta-t{font-size:1.35rem;font-weight:800;line-height:1.2;color:var(--titulo)}
.cta-lado p:not(.cta-t){font-size:15px;line-height:1.5;color:var(--fg2)}
.cta-lado .btn{justify-content:center;text-align:center}
.cta-tecnico{font-size:14px!important}
@media (min-width:621px){.cta-lado{padding:24px;border-radius:var(--raio);background:var(--chip);border:1px solid var(--linha)}}
@media (min-width:981px){
  .faq-cta{grid-template-columns:minmax(0,1fr) 372px;column-gap:40px;align-items:start}
  .cta-lado{position:sticky;top:110px;padding:24px 22px}
  /* o botão do cartão cabe numa linha ("Quero um fluxo assim na minha empresa") */
  .cta-lado .btn{font-size:15px;padding-inline:1em}
}
@media (min-width:1180px){.faq-cta{column-gap:56px}}

/* ---------- Jabuticaba (case de marketing e e-commerce) ----------
   Ajustes pequenos para peças que a Technogym não usa (gráfico por ano) ou usa noutra superfície.
   Nenhuma regra daqui muda a página da Technogym. */
/* gráfico por ano: o rótulo de duas linhas ("2026 até 25/09") não desloca a linha de base das outras colunas */
.anos .ano-t{min-height:3.2em}
/* botão final quando o B8 cai no papel: cartão branco (hoje os dois cases têm o B8 no claro) */
@media (min-width:621px){[data-surf="papel"] .cta-lado{background:var(--card)}}
/* perguntas quando o B8 cai no papel (Technogym; 06/10/2026): no papel, o --chip das perguntas é o próprio papel e elas ficavam só
   com o contorno. Branco, como o cartão ao lado e como "papel sobre branco" nos outros seis cases. */
[data-surf="papel"] .faq details{background:var(--card)}

/* ---------- bloco Busca (Travelex, Koin) sem legenda visível ----------
   A legenda da figura virou texto só para leitor de tela (06/10/2026: ilustração leva só o selo). O previa-bloco-busca.css ainda
   reserva a linha "leg" na grade; sem ela aqui, não sobra o vão dessa linha no fim da figura. Seletor com a tag para vencer o do bloco. */
.busca figure.bs{grid-template-areas:"serp" "metodo"}
@media (min-width:981px){.busca figure.bs{grid-template-areas:"serp metodo"}}

/* ---------- etiquetas de papel do bloco "fluxo de dados" (Ranking dos Políticos) em minúsculas ----------
   Proposta 1 (Felipe, 06/10/2026): "construímos / integramos / operamos" em minúsculas em todos os cases, como na Technogym.
   O bloco tem folha própria (previa-bloco-fluxo-dados.css), carregada depois desta; o .pg-case na frente vence a regra de lá. */
.pg-case .fluxo-dados .fd-papel{letter-spacing:0;text-transform:none}

/* ---------- marca a-confirmar dentro de link ----------
   O sublinhado do link cobria o pontilhado da marca: o link perde o sublinhado e a marca mantém o dela
   (previa.css: .a-confirmar{text-decoration:underline dotted}). No fim do arquivo para vencer .meta-case a e .leia a */
a:has(.a-confirmar){text-decoration:none}
a .a-confirmar{text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:currentColor}