/* Páginas de case na identidade clara (06/10/2026). Carregado depois de site.css e home.css:
   o body leva as classes "home caso" para herdar os tokens, o vidro, as tags, a pasta e o contato
   da home. Aqui ficam só o layout da página de case e os mockups (celular, feed, carrossel, papel). */

body.pagina-caso { --margem: clamp(20px, 5vw, 68px); }
body.pagina-caso main { max-width: 1320px; margin: 0 auto; }

/* ---------- abertura ---------- */
.caso-abre { padding: clamp(120px, 14vw, 168px) var(--margem) 0; }
.caso-cab { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 44px); } /* 07/10: uma coluna; a linha de apoio fica sob o título, como nas seções da home */
.caso-volta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; font: 500 13.5px/1 var(--sans); color: var(--texto-2); transition: color var(--rapido), gap var(--rapido) var(--curva); }
.caso-volta svg { width: 15px; height: 15px; flex: none; }
.caso-volta:hover { gap: 11px; }
.caso-volta:hover { color: var(--texto); }
.caso-titulo { margin: 0; font: 400 clamp(38px, 5.6vw, 72px)/1 var(--display); letter-spacing: -.035em; color: var(--texto); }
.caso-sub { margin: 16px 0 0; max-width: 46ch; font: 400 clamp(16px, 1.3vw, 18px)/1.5 var(--sans); letter-spacing: -.01em; color: var(--texto-2); }
.caso-cab .tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }

.caso-capa { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 1800 / 1020; background: var(--superficie, #DAD6D1); box-shadow: var(--vidro-sombra); }
.caso-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caso-capa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .7); pointer-events: none; }

.caso-ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--vao) 0 0; padding: 6px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6)); box-shadow: var(--vidro-sombra); border: 1px solid var(--vidro-aro); }
.caso-ficha > div { padding: 16px 18px; border-left: 1px solid rgba(14, 14, 14, .08); }
.caso-ficha > div:first-child { border-left: 0; }
.caso-ficha dt { margin: 0 0 6px; font: 500 12px/1 var(--sans); letter-spacing: .02em; color: var(--texto-2); }
.caso-ficha dd { margin: 0; font: 400 14.5px/1.4 var(--sans); color: var(--texto); }

/* ---------- seções ---------- */
.cs { padding: var(--sec) var(--margem) 0; }
.cs-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--vao); margin-bottom: clamp(32px, 4vw, 56px); }
.cs-cab h2 { margin: 0; font: 400 clamp(26px, 3vw, 42px)/1.12 var(--display); letter-spacing: -.03em; color: var(--texto); }
.cs-cab h2 em { display: block; margin-top: 6px; font-style: normal; color: var(--texto-2); }
.cs-cab p { margin: 0; max-width: 58ch; font-size: 15.5px; line-height: 1.6; color: var(--texto-2); }
.cs-cab p + p { margin-top: 14px; }
.cs-cab p strong { color: var(--texto); font-weight: 500; }
.cs-rotulo { margin: 0 0 14px; font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--texto-2); }
.cs-legenda { margin: 12px 0 0; font: 400 13px/1.4 var(--sans); color: var(--texto-2); }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); align-items: start; }
.quadro { position: relative; overflow: hidden; border-radius: 22px; background: var(--superficie, #DAD6D1); box-shadow: 0 24px 50px -24px rgba(48, 44, 38, .28); }
.quadro img { width: 100%; height: auto; display: block; }
.quadro.q-4x5 { aspect-ratio: 4 / 5; } .quadro.q-4x5 img { height: 100%; object-fit: cover; }
.quadro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .35); pointer-events: none; }

/* painel de vidro genérico para agrupar peças */
.painel { padding: clamp(18px, 2.4vw, 32px); border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6)); box-shadow: var(--vidro-sombra); border: 1px solid var(--vidro-aro); }
.painel.escuro { background: linear-gradient(160deg, #141413 0%, #0A0A0A 100%); border-color: rgba(255, 255, 255, .12); color: #F5F4F0; }

/* ---------- paleta ---------- */
.paleta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vao); }
.cor { display: block; }
.cor i { display: block; aspect-ratio: 1; border-radius: 24px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 20px 40px -22px rgba(48, 44, 38, .35); border: 1px solid rgba(255, 255, 255, .5); }
.cor b { display: block; margin: 12px 0 2px; font: 500 14px/1.3 var(--sans); color: var(--texto); }
.cor small { display: block; font: 400 12.5px/1.3 var(--mono); color: var(--texto-2); }

/* ---------- celular ---------- */
.fones { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 28px); align-items: flex-end; }
.fone { --larg: clamp(180px, 22vw, 272px); position: relative; width: var(--larg); aspect-ratio: 9 / 19.2; border-radius: calc(var(--larg) * .17); padding: calc(var(--larg) * .032); background: linear-gradient(#121212, #121212) padding-box, linear-gradient(150deg, #f2f2f2 0%, #9a9a9a 28%, #ececec 50%, #5c5c5c 72%, #d6d6d6 100%) border-box; border: 2px solid transparent; box-shadow: 0 40px 80px -30px rgba(20, 18, 16, .55), 0 2px 0 rgba(255, 255, 255, .6) inset; }
.fone-tela { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--larg) * .14); background: #0A0A0A; }
.fone-tela img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fone::after { content: ""; position: absolute; top: calc(var(--larg) * .05); left: 50%; width: 28%; height: calc(var(--larg) * .038); transform: translateX(-50%); border-radius: 999px; background: #0A0A0A; }
.fones .fone:nth-child(2) { transform: translateY(-5%); }
/* a barra de progresso dos stories, por cima */
.fone-stories::before { content: ""; position: absolute; z-index: 1; top: calc(var(--larg) * .115); left: 6%; right: 6%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff 0 56%, rgba(255, 255, 255, .35) 56%); }

/* ---------- celular com um post do feed ---------- */
.post-mock { display: flex; flex-direction: column; height: 100%; background: #fff; color: #111; font-family: var(--sans); }
.post-mock .pm-topo { display: flex; align-items: center; gap: 8px; padding: calc(var(--larg) * .14) 10px 8px; }
.post-mock .pm-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--pm-av, #111); background-size: cover; }
.post-mock .pm-nome { font-size: 10.5px; font-weight: 600; }
.post-mock .pm-nome small { display: block; font-weight: 400; color: #777; font-size: 9px; }
.post-mock .pm-img { aspect-ratio: 4 / 5; overflow: hidden; }
.post-mock .pm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-mock .pm-acoes { display: flex; gap: 10px; padding: 10px 10px 6px; }
.post-mock .pm-acoes i { width: 14px; height: 14px; border: 1.5px solid #111; border-radius: 4px; }
.post-mock .pm-acoes i:first-child { border-radius: 50% 50% 0 50%; transform: rotate(45deg); width: 12px; height: 12px; }
.post-mock .pm-texto { padding: 0 10px; }
.post-mock .pm-texto i { display: block; height: 6px; border-radius: 3px; background: #E6E4E0; margin-bottom: 5px; }
.post-mock .pm-texto i:nth-child(1) { width: 78%; } .post-mock .pm-texto i:nth-child(2) { width: 54%; }
.fone.escuro .post-mock { background: #0A0A0A; color: #F5F4F0; }
.fone.escuro .post-mock .pm-acoes i { border-color: #F5F4F0; }
.fone.escuro .post-mock .pm-texto i { background: #222; }

/* ---------- feed (perfil do Instagram) ---------- */
.feed { max-width: 560px; margin: 0 auto; padding: 22px 18px 18px; border-radius: 28px; background: #0A0A0A; color: #F5F4F0; box-shadow: 0 40px 90px -30px rgba(20, 18, 16, .55); border: 1px solid rgba(255, 255, 255, .12); }
.feed-cab { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; }
.feed-avatar { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 2px solid #B8924A; padding: 2px; background: #0A0A0A; }
.feed-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.feed-nome { margin: 0; font: 500 15px/1.2 var(--sans); }
.feed-nome small { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--sans); color: #8C8B87; }
.feed-bio { margin: 10px 0 0; font: 400 12.5px/1.45 var(--sans); color: #CFCDC8; }
.feed-destaques { display: flex; gap: 14px; margin: 18px 0 16px; }
.feed-destaques span { display: block; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); padding: 2px; }
.feed-destaques img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.feed-abas { display: flex; gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin-bottom: 3px; }
.feed-abas i { flex: 1; height: 1px; } .feed-abas i:first-child { background: #F5F4F0; }
.feed-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.feed-grade span { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #141413; }
.feed-grade img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- carrossel ---------- */
.carrossel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 12px; margin: 0 -4px; }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel .quadro { flex: none; width: clamp(220px, 24vw, 300px); scroll-snap-align: start; }
.carrossel-pontos { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.carrossel-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(14, 14, 14, .18); }
.carrossel-pontos i:first-child { background: var(--tinta); }

/* ---------- papel ---------- */
.papel { position: relative; max-width: 440px; margin: 0 auto; }
.papel img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -28px rgba(20, 18, 16, .5), 0 8px 18px -10px rgba(20, 18, 16, .3); }

/* ---------- entregáveis ---------- */
.entregas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--vao); margin: 0; padding: 0; list-style: none; }
.entregas li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(14, 14, 14, .1); font: 400 15px/1.4 var(--sans); color: var(--texto); }
.entregas li span { color: var(--texto-2); font-size: 13.5px; white-space: nowrap; }

/* ---------- próximo case (uma pasta) ---------- */
.proximo-caso { padding: var(--sec) var(--margem) 0; }
.proximo-caso .casos { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .cs-cab, .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .caso-ficha { grid-template-columns: 1fr 1fr; }
  .caso-ficha > div:nth-child(3) { border-left: 0; }
  .caso-ficha > div:nth-child(n + 3) { border-top: 1px solid rgba(14, 14, 14, .08); }
  .paleta { grid-template-columns: 1fr 1fr; }
  .entregas { grid-template-columns: 1fr; }
  .fones .fone:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
  .caso-capa { border-radius: 20px; }
  .fones .fone:nth-child(2) { transform: none; }
  .fones .fone:nth-child(n + 2) { display: none; }
  .fone { --larg: min(272px, 72vw); }
}
@media (prefers-reduced-transparency: reduce) {
  .caso-ficha, .painel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .92); }
}

/* ---------- mosaico de abertura: a identidade em blocos (06/10/2026) ----------
   Grade de 6 colunas e 3 fileiras; a peça principal ocupa 2 colunas × 3 fileiras (≈ 4:5),
   os outros blocos são recortes do acabamento, logotipo, paleta e textura. */
.mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(96px, 11vw, 150px); gap: var(--vao); }
.mb { position: relative; overflow: hidden; border-radius: 20px; background: var(--superficie, #DAD6D1); box-shadow: 0 20px 44px -24px rgba(48, 44, 38, .3); }
.mb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .35); pointer-events: none; }
.mb-a { grid-column: 1 / 3; grid-row: 1 / 4; }
.mb-2 { grid-column: span 2; }
.mb-legenda { position: absolute; left: 12px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .9); font: 500 11px/1 var(--sans); color: var(--tinta); border: 1px solid rgba(255, 255, 255, .8); }
.mb.escuro .mb-legenda { background: rgba(20, 20, 19, .6); color: #F5F4F0; border-color: rgba(255, 255, 255, .18); }
/* bloco de paleta: colunas de cor com o hex */
.mb-paleta { display: flex; }
.mb-paleta i { flex: 1; position: relative; background: var(--c); }
.mb-paleta .mb-legenda { top: 10px; bottom: auto; }
.mb-paleta i::after { content: attr(data-hex); position: absolute; left: 10px; bottom: 10px; font: 500 10.5px/1 var(--mono); color: var(--t, #fff); opacity: .85; }
/* bloco de logotipo: a imagem inteira, sem corte */
.mb-logo img { object-fit: contain; padding: 10%; }
@media (max-width: 900px) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(90px, 17vw, 150px); }
  .mb-a { grid-column: 1 / 3; grid-row: 1 / 3; }
}
@media (max-width: 600px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
  .mb-a { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 4 / 5; }
  .mb-2 { grid-column: span 2; }
}

/* ---------- mosaico v2 (06/10/2026): as peças aparecem inteiras. Blocos de cor da marca com a
   peça contida (object-fit: contain), logotipo numa pílula, barra de paleta em degradê com os
   hex, cartão de tipografia e um bloco de textura em sangria, na linha da referência de brand board. */
.mosaico { grid-auto-rows: clamp(92px, 10.4vw, 140px); }
.mb-4 { grid-column: span 4; } .mb-6 { grid-column: span 6; } .mb-r2 { grid-row: span 2; }
.mb-cont { background: var(--bg, #F5F4F0); }
.mb-cont img { object-fit: contain; padding: var(--pad-img, 6%); }
.mb-logo { display: grid; place-items: center; background: var(--bg, #F5F4F0); padding: 8%; }
.mb-logo .pilula { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 999px; background: var(--pilula, #0A0A0A); overflow: hidden; }
.mb-logo .pilula img { width: 60%; height: 70%; object-fit: contain; }
.mb-fone { display: grid; place-items: end center; background: var(--bg, #F5F4F0); padding: 10% 10% 0; overflow: hidden; }
.mb-fone .fone { --larg: 100%; width: 100%; aspect-ratio: auto; height: 118%; transform: translateY(0); border-radius: 14% / 7%; }
.mb-fone .fone-tela { border-radius: 11% / 5.5%; }
.mb-fone .fone::after { width: 30%; top: 2.6%; height: 2%; }
.mb-texto { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 1.8vw, 24px); background: var(--bg, #F5F4F0); color: var(--fg, #0A0A0A); }
.mb-texto .mt-rotulo { font: 500 12px/1 var(--sans); letter-spacing: .02em; opacity: .6; }
.mb-texto .mt-grande { margin: 10px 0 0; font: 400 clamp(30px, 3.6vw, 48px)/1 var(--display); letter-spacing: -.03em; }
.mb-texto .mt-nome { margin: 6px 0 0; font: 500 15px/1.2 var(--sans); }
.mb-texto .mt-p { margin: 12px 0 0; font: 400 12.5px/1.45 var(--sans); opacity: .72; }
.mb-barra { display: flex; align-items: flex-end; background: var(--grad); padding: 14px; }
.mb-barra span { flex: 1; font: 500 10.5px/1.4 var(--mono); color: var(--t, #fff); opacity: .9; }
.mb-barra span b { display: block; font-weight: 500; opacity: .7; }
.mb-barra span:nth-child(2) { text-align: center; } .mb-barra span:last-child { text-align: right; }
.mb-textura img { object-fit: cover; }
@media (max-width: 900px) {
  .mb-4, .mb-6 { grid-column: span 4; }
}
@media (max-width: 600px) {
  .mb-4, .mb-6 { grid-column: span 2; } .mb-r2 { grid-row: span 1; }
  .mb-fone { grid-row: span 2; }
}
/* ajustes do mosaico v2 */
.mb-fone .fone { width: 78%; height: 112%; }
.mb-logo .pilula img { width: 88%; height: 80%; }
.mb-textura.zoom img { object-position: 40% 50%; }
/* desempenho: nas páginas de projeto o grão fixo por cima da tela e a sombra ao rolar saem (pesavam ao rolar) */
body.pagina-caso::after { content: none; }

/* mockups fotográficos (07/10/2026): foto com a peça real aplicada na tela */
.mb-foto img { object-fit: cover; object-position: 55% 55%; }
.quadro.q-foto img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Galeria em faixas (07/10/2026, na linha do "Shipped with Framer", medido: duas fileiras
   de ponta a ponta, 340px de altura, 10px de vão, raio 15px, uma fileira andando para a esquerda e a
   outra para a direita a 30px/s, contínuo). As peças aparecem inteiras ou em corte generoso. ---------- */
.faixas { margin: clamp(28px, 4vw, 48px) 0 0; width: 100%; display: grid; gap: 10px; --alt: clamp(220px, 30vw, 340px); --vel: 30; --raio-peca: calc(var(--alt) * .065); }
/* cada fileira é uma janela recortada com a mesma curvatura das peças: todos os cantos iguais */
.faixa-janela { overflow: hidden; border-radius: var(--raio-peca); isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }
.faixa { display: flex; gap: 10px; width: max-content; animation: faixa-rolar var(--dur, 60s) linear infinite; }
.faixa.inversa { animation-direction: reverse; }
.faixas:hover .faixa { animation-play-state: paused; }
@keyframes faixa-rolar { to { transform: translateX(-50%); } }
.peca { flex: none; height: var(--alt); border-radius: var(--raio-peca); overflow: hidden; background: var(--superficie, #DAD6D1); } /* cantos bem redondos, proporcionais à altura (22px a 340px) */
.peca img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } /* o raio também na imagem: dentro de uma fileira animada, o overflow sozinho às vezes não corta */
.peca { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }
/* 07/10: o mesmo aro de luz dos quadros da home, para a peça não ficar chapada sobre o fundo */
.peca { position: relative; }
.peca::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .3); pointer-events: none; }
.peca.larga { width: calc(var(--alt) * 1.556); }
.peca.card { width: calc(var(--alt) * .8); }
.peca.estreita { width: calc(var(--alt) * .49); }
@media (prefers-reduced-motion: reduce) {
  .faixa-janela { overflow-x: auto; scrollbar-width: none; }
  .faixa { animation: none; }
}
/* briefing + ficha, enxutos */
.resumo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--vao); align-items: start; }
.resumo p { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--texto-2); }
.resumo p + p { margin-top: 14px; }
.resumo p strong { color: var(--texto); font-weight: 500; }
/* 07/10: a ficha é um cartão de vidro (receita .b-gelo da home), não uma lista solta */
.ficha-lista { margin: 0; display: grid; gap: 0; padding: 8px clamp(18px, 2.2vw, 28px); border-radius: 24px; }
.ficha-lista div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(14, 14, 14, .08); font-size: 14.5px; line-height: 1.45; }
.ficha-lista div:first-child { border-top: 0; }
.ficha-lista dt { color: var(--texto-2); } .ficha-lista dd { margin: 0; color: var(--texto); }
/* amostras de cor na ficha: bolinha + hex */
.amostras { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.amostras span { display: inline-flex; align-items: center; gap: 7px; font: 400 12.5px/1 var(--mono); color: var(--texto-2); }
.amostras i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 0 0 1px rgba(14, 14, 14, .08); }
.proximo-caso .cs-rotulo { text-align: center; }
@media (max-width: 900px) { .resumo { grid-template-columns: 1fr; } }

/* peça dupla: dois cards de verdade lado a lado, cada um com canto arredondado, sobre a cor da marca */
.peca.par { display: flex; justify-content: center; align-items: center; gap: calc(var(--alt) * .035); padding: calc(var(--alt) * .05); background: var(--bg, #0A0A0A); -webkit-mask-image: none; }
.peca.par img { width: auto; height: 100%; border-radius: calc(var(--alt) * .05); }


/* 28/10/2026: ficha em cartão na largura da página, como no case da Juliana */
.caso-cartao .ficha-cartao { margin: 0 0 clamp(8px, 1.4vw, 16px); }

/* 28/10/2026: as faixas não andam sozinhas; arrastar para ir e voltar, clicar para ver a peça inteira */
.faixa, .faixa.inversa { animation: none; transform: none; }
.faixa-janela { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.faixa-janela::-webkit-scrollbar { display: none; }
.faixa-janela.arrastando { cursor: grabbing; }
.faixa-janela.arrastando .peca { pointer-events: none; }
.peca img { cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
/* ds-allow-hardcode: fundo escuro e vidro do botão, como no resto do site */
.peca-zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); background: rgba(14, 14, 14, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 220ms var(--curva); cursor: zoom-out; }
.peca-zoom.aberta { opacity: 1; }
.peca-zoom[hidden] { display: none; }
.peca-zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); transform: scale(.97); transition: transform 320ms var(--mola, cubic-bezier(.16, 1, .3, 1)); }
.peca-zoom.aberta img { transform: none; }
.peca-zoom-x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: #fff; font: 300 26px/1 var(--sans); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.peca-zoom img { max-width: min(100%, 1600px); max-height: calc(100vh - 2 * clamp(16px, 4vw, 48px)); max-height: calc(100dvh - 2 * clamp(16px, 4vw, 48px)); object-fit: contain; }
/* o painel final vai de ponta a ponta, como na home (o main destas páginas tem largura máxima) */
body.pagina-caso .fim { width: 100vw; margin-left: calc(50% - 50vw); }