/* Modelo de case: mesma estrutura da Ju Xavier + blocos Photos, Projects e Feed depois do texto */
  .destaque-case { position: relative; height: 50svh; min-height: 340px; overflow: hidden; background: #111; }
  .destaque-case img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
  /* Capa com foto vertical de fundo preto (ex.: GABBE): a foto aparece inteira, centralizada sobre o preto */
  .destaque-case.capa-inteira { background: #000; }
  .destaque-case.capa-inteira img { object-fit: contain; object-position: center; }
  /* Foto inteira sobre ela mesma desfocada (ex.: Soha): mostra o look completo sem faixa preta dos lados */
  .destaque-case.capa-inteira img.fundo-desfocado { position: absolute; inset: 0; object-fit: cover; filter: blur(36px) brightness(.92); transform: scale(1.15); }
  .destaque-case.capa-inteira img:not(.fundo-desfocado) { position: relative; }
  /* Capa com a logo do cliente no centro, sobre a imagem escurecida */
  .destaque-case video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .destaque-case.com-logo::after { content: ""; position: absolute; inset: 0; background: rgba(12,12,12,.42); pointer-events: none; }
  /* Vídeo da capa: a animação vertical do padrão da marca, inteira e centralizada sobre o preto */
  .destaque-case.capa-video { background: var(--preto); }
  .destaque-case.capa-video video { object-fit: contain; }
  .destaque-case.capa-video::after { display: none; }
  .destaque-case.capa-logo { background: var(--preto); }
  .destaque-case.capa-logo::after { display: none; }
  .destaque-case.capa-logo .logo-cliente { width: min(38vw, 520px); }
  .destaque-case .logo-cliente { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(46vw, 620px); height: auto; object-fit: contain; transform: translate(-50%, -50%); }
  .destaque-case.com-logo .rotulo { z-index: 3; }
  @media (max-width: 760px) { .destaque-case .logo-cliente { width: 72vw; } }
  .destaque-case .rotulo { position: absolute; left: var(--margem); right: var(--margem); bottom: 28px; display: flex; justify-content: space-between; color: #fff; mix-blend-mode: difference; margin: 0; }

  .case-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); padding-top: clamp(96px, 12vw, 160px); padding-bottom: clamp(96px, 12vw, 160px); }
  .case-intro h1 { margin: 0; font-size: clamp(56px, 8vw, 128px); }
  .case-intro .sub { margin: 18px 0 0; color: rgba(237,235,222,.6); max-width: 40ch; }
  .bloco { padding: 22px 0; border-top: 1px solid rgba(237,235,222,.14); }
  .bloco:last-child { border-bottom: 1px solid rgba(237,235,222,.14); }
  .bloco h2 { margin: 0 0 10px; }
  .bloco p { margin: 0 0 10px; color: rgba(237,235,222,.78); max-width: 52ch; }
  .bloco p:last-child { margin-bottom: 0; }
  .bloco ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; color: rgba(237,235,222,.78); }
  /* Bolinha entre os itens (What We Did e listas parecidas), na mesma cor do texto */
  .bloco li:not(:last-child)::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-left: 10px; vertical-align: middle; background: currentColor; }
  @media (max-width: 760px) { .case-intro { grid-template-columns: 1fr; } }

  /* Behind the Work: um texto curto sobre cada material desenvolvido */
  .por-tras { padding: clamp(72px, 9vw, 120px) var(--margem); }
  .por-tras > h2 { margin: 0 0 24px; }
  .por-tras ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 3vw, 48px); }
  .por-tras li { border-top: 1px solid rgba(237,235,222,.14); padding-top: 18px; }
  .por-tras .num { color: var(--amarelo); }
  .por-tras h3 { margin: 10px 0 10px; font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; }
  .por-tras p { margin: 0; color: rgba(237,235,222,.72); max-width: 38ch; }

  /* Rótulo de cada bloco visual */
  .bloco-visual { position: relative; padding: clamp(56px, 7vw, 100px) var(--margem); overflow: hidden; }
  .bloco-visual > .rotulo { margin: 0 0 clamp(32px, 4vw, 56px); display: flex; justify-content: space-between; }
  .bloco-visual img, .bloco-visual video { display: block; width: 100%; height: auto; }
  [data-vel] { will-change: transform; }

  /* Photos (ref. grade de moda): colunas soltas, tamanhos variados, cada coluna numa velocidade */
  .fotos-mural { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 32px); align-items: start; max-width: 1120px; margin: 0 auto; }
  .fotos-mural .col { display: grid; gap: clamp(12px, 2vw, 32px); }
  .fotos-mural .col:nth-child(1) { margin-top: 6vw; } .fotos-mural .col:nth-child(2) { margin-top: 0; }
  .fotos-mural .col:nth-child(3) { margin-top: 12vw; } .fotos-mural .col:nth-child(4) { margin-top: 3vw; }
  .fotos-mural figure { margin: 0; }
  .fotos-mural figure:nth-child(odd) { width: 86%; } .fotos-mural figure:nth-child(even) { width: 100%; }
  .fotos-mural .col:nth-child(even) figure:nth-child(odd) { margin-left: auto; }
  /* Photos por shooting: cada shooting separado, com o nome em cima, no mural solto */
  .fotos-grupo { max-width: 1120px; margin: 0 auto; }
  .fotos-grupo + .fotos-grupo { margin-top: clamp(36px, 4.5vw, 64px); }
  .fotos-grupo > .rotulo { margin: 0 0 14px; }
  /* Celular: as mesmas 4 colunas do computador */

  /* Content Highlights (ref. "de plek"): nome do projeto em cima, no estilo do rótulo, e as peças espalhadas e próximas embaixo */
  .projeto { position: relative; height: 32vw; min-height: 300px; }
  .bloco-visual > .nome-projeto { margin: 0 0 clamp(20px, 2.4vw, 32px); justify-content: center; text-align: center; }
  /* Entrada da seção: "Content Highlights" em título grande, centralizado */
  .titulo-projetos { margin: 0 0 clamp(36px, 4.5vw, 64px); text-align: center; font-size: clamp(48px, 7.5vw, 128px); line-height: .95; font-weight: 700; }
  @media (max-width: 760px) { .titulo-projetos { font-size: 15vw; } }
  .projeto .peca:hover { z-index: 3; }
  .bloco-visual > .projeto + .nome-projeto { margin-top: clamp(24px, 3vw, 48px); }
  /* O nome do projeto fica sempre por cima das peças, nunca cortado por elas */
  .bloco-visual > .nome-projeto { position: relative; z-index: 4; }
  .projeto .peca { position: absolute; }
  /* Cards animados (ex.: Critical Thinking): os cards ficam empilhados na peça e trocam com um fade */
  .js-cards .peca .card { transition: opacity .7s ease; opacity: 0; }
  .js-cards .peca .card:not(:first-child) { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .js-cards .peca .card.on { opacity: 1; }
  /* Celular: a mesma composição do computador, só proporcional à tela, sem zoom */
  @media (max-width: 760px) { .projeto { height: 88vw; min-height: 0; } }

  /* Feed: grade compacta, peças coladas como num perfil */
  .feed-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 620px; margin: 0 auto; }
  .feed-grade + .nome-projeto { margin-top: clamp(48px, 6vw, 88px); }   /* feed dividido por campanha: respiro entre os grupos */
  .feed-grade .peca { aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; }
  .feed-grade .peca img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .feed-grade .peca:hover img { transform: scale(1.04); }
  @media (max-width: 760px) { .feed-grade { gap: 3px; margin: 0 10px; } }   /* celular: respeita a margem lateral, sem encostar na borda */

  /* Imagens passando para o lado */
  .passando { padding: clamp(56px, 7vw, 100px) 0; overflow: hidden; }
  .passando > .rotulo { margin: 0 var(--margem) clamp(28px, 3.5vw, 48px); display: flex; justify-content: space-between; }
  .passando__trilho { display: flex; gap: 16px; width: max-content; will-change: transform; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
  .passando__trilho img { height: min(46vh, 420px); width: auto; display: block; pointer-events: none; }
  @media (max-width: 760px) { .passando__trilho img { height: 46vh; } }

  /* Reels */
  .reels { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
  .reels .cab { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; }
  .reels .cab h2 { margin: 0; }
  /* Vídeos em grade de feed: 3 por linha, todos em 4:5 (1080x1350), alinhados */
  .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin: 0 auto; }
  .trio.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 940px; }
  .video-ph { aspect-ratio: 9 / 16; display: grid; place-items: center; padding: 20px; text-align: center; background: #1a1a1a; color: rgba(237,235,222,.55); font-size: 13px; }
  .reel { position: relative; margin: 0; cursor: pointer; min-width: 0; }
  .reel video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #111; }
  /* Nome do vídeo sempre numa linha só (Vini, 2026-10-22); se não couber, termina com reticências */
  .reel figcaption { margin-top: 12px; font-size: 14px; color: rgba(237,235,222,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reel .som { position: absolute; top: 14px; right: 14px; margin: 0; padding: 6px 10px; background: rgba(12,12,12,.55); color: var(--creme); font-size: 11px; opacity: 0; transition: opacity .3s; }
  .reel:hover .som, .reel.com-som .som { opacity: 1; }
  .reel.com-som .som { background: var(--amarelo); color: var(--preto); }
  /* Reel aberto: ampliado no centro da página, inteiro e com som */
  .reel-aberto { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(12,12,12,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
  .reel-aberto[hidden] { display: none; }
  .reel-aberto.on { opacity: 1; }
  .reel-aberto figure { margin: 0; transform: scale(.94); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .reel-aberto.on figure { transform: none; }
  .ra-midia { background: #111; }
  .ra-midia video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
  .reel-aberto figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 0; min-width: 100%; padding-top: 12px; font-size: 14px; color: rgba(237,235,222,.75); }
  .ra-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ra-som { font: inherit; font-size: 11px; background: none; border: 0; padding: 0; color: var(--creme); cursor: pointer; white-space: nowrap; }
  .ra-som:hover { background: var(--amarelo); color: var(--preto); }
  .ra-fechar { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; background: none; color: var(--creme); font-size: 36px; line-height: 1; cursor: pointer; }
  html.sem-rolagem { overflow: hidden; }

  /* Celular: 2 colunas, reels maiores; com número ímpar, o último fica centralizado no mesmo tamanho */
  @media (max-width: 760px) {
    .trio, .trio.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 10px; }
    .trio .reel:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
    .trio.nove { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }   /* 9 reels (TODA): 3 linhas de 3 */
    .trio.nove .reel:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
    .trio.nove .reel figcaption { font-size: 11px; }
    .reel figcaption { font-size: 12px; margin: 8px 6px 0; } .reel .som { opacity: 1; top: 8px; right: 8px; }
  }

  .nao-encontrado { min-height: 80vh; display: grid; place-content: center; text-align: center; padding: 0 var(--margem); }