/* Cases: topo, filtro + grade de cases, cases em detalhe (Quadro, PET ID) e faixa azul de chamada. */
@keyframes cases-sobe { from { opacity: 0; transform: translateY(28px); } }
@keyframes cases-cresce { from { transform: scaleX(0); } }

/* O desenho não usa border-box: os 1200 px do contêiner são de conteúdo, mais 24 px de respiro de cada lado. */

.pg-cases .topo-cases { padding-top: 96px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.pg-cases .topo-cases > * { animation: cases-sobe .8s var(--anima) both; }
.pg-cases .topo-cases > :nth-child(2) { animation-delay: .09s; }
.pg-cases .topo-cases > p { animation-delay: .18s; }
.pg-cases .titulo-cases { font-size: clamp(44px, 6vw, 80px); line-height: 1; font-weight: 700; letter-spacing: -.045em; max-width: 980px; }
.pg-cases .intro-cases { font-size: 20px; line-height: 1.55; color: var(--grafite-suave); max-width: 680px; }

.pg-cases .lista { padding-bottom: 96px; display: flex; flex-direction: column; gap: 32px; }
.pg-cases .filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-cases .filtro { font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: var(--raio-pilula); cursor: pointer; border: 1px solid var(--linha); background: var(--superficie); color: var(--grafite); }
.pg-cases .filtro[aria-pressed="true"] { border-color: var(--grafite); background: var(--grafite); color: #fff; }

.pg-cases .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.pg-cases .case { text-decoration: none; color: var(--grafite); background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.pg-cases .case:hover { color: var(--grafite); }
.pg-cases .case-img { background: #EEF0F4; aspect-ratio: 16 / 10; overflow: hidden; }
.pg-cases .case-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pg-cases .case-corpo { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pg-cases .case-tag { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--azul-texto); background: var(--azul-claro); padding: 4px 10px; border-radius: var(--raio-sm); }
.pg-cases .case-nome { font-size: 22px; letter-spacing: -.02em; }
.pg-cases .case-ler { font-weight: 600; color: var(--azul-texto); }

.pg-cases .proximo { text-decoration: none; color: #fff; background: var(--grafite); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 344px; }
.pg-cases .proximo:hover { color: #fff; }
.pg-cases .faixas, .pg-cases .proximo-texto { display: flex; flex-direction: column; gap: 8px; }
.pg-cases .faixa { display: block; border-radius: 0 999px 999px 0; transform-origin: left; animation: cases-cresce 1.1s var(--anima) .2s both; }
.pg-cases .faixa-azul { width: 96px; height: 34px; background: var(--azul); }
.pg-cases .faixa-clara { width: 128px; height: 40px; background: var(--fundo); }
.pg-cases .proximo strong { font-size: 24px; letter-spacing: -.02em; }
.pg-cases .proximo-link { color: var(--ciano); font-weight: 600; }

.pg-cases .case-detalhe { background: var(--fundo); border-top: 1px solid var(--linha); transition: transform .3s var(--anima), box-shadow .3s; }
.pg-cases .case-detalhe:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(14, 20, 36, .28); }
.pg-cases .case-branco { background: var(--superficie); }
.pg-cases .detalhe { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.pg-cases .detalhe-cabeca { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.pg-cases .etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pg-cases .etapa-nome { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--grafite-suave); }
.pg-cases .etapa-texto { font-size: 17px; }
.pg-cases .moldura { background: var(--grafite); border-radius: 20px; padding: 16px; }
.pg-cases .moldura img { width: 100%; border-radius: 12px; }
.pg-cases .fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.pg-cases .fotos img { width: 100%; border-radius: 20px; }
.pg-cases .fotos .foto-branca { background: var(--superficie); }
.pg-cases .case-detalhe img { transition: transform .3s var(--anima); }
.pg-cases .case-detalhe:hover img { transform: translateY(-4px); }

.pg-cases .chamada { background: var(--azul); color: #fff; }
.pg-cases .chamada-dentro { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.pg-cases .chamada .titulo-secao { flex: 1 1 520px; }

@media (max-width: 720px) {
  .pg-cases .topo-cases { padding-top: 56px; padding-bottom: 40px; gap: 18px; }
  .pg-cases .intro-cases { font-size: 18px; }
  .pg-cases .lista { padding-bottom: 64px; gap: 24px; }
  .pg-cases .filtro { min-height: 44px; }
  .pg-cases .proximo { min-height: 220px; padding: 28px; }
  .pg-cases .detalhe { padding-top: 64px; padding-bottom: 64px; gap: 28px; }
  .pg-cases .etapas .elevar { padding: 22px; }
  .pg-cases .chamada-dentro { padding-top: 64px; padding-bottom: 64px; }
  .pg-cases .chamada .titulo-secao { flex-basis: 100%; }
}