/* ---------- Cases: primeiro as categorias, depois a lista ---------- */
.js .cases-bloco[data-modo="categorias"] .cases-lista{display:none}
.cases-bloco[data-modo="lista"] .cases-cats{display:none}

.cases-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.cat-card{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--surface);color:var(--ink)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s}
.cat-card:hover img,.cat-card:focus-visible img{transform:scale(1.05);opacity:.8}
.cat-card .vazio{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,#1f2a1c,transparent 60%),var(--surface)}
.cat-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.8vw,26px);background:linear-gradient(0deg,#0A0B0Acc,#0A0B0A00 55%)}
.cat-num{font-size:.78rem;letter-spacing:.06em;color:#cfcac2}
.cat-nome{font-size:clamp(2rem,3.4vw,3.4rem);margin-top:auto}
.cat-qtd{margin-top:12px;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#cfcac2;transition:color .2s}
.cat-card:hover .cat-qtd{color:var(--accent)}
.cat-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cases-filtro{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,2.6vw,36px)}
.cases-filtro button{padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:none;color:var(--muted);font:inherit;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.cases-filtro button:hover{color:var(--ink);border-color:var(--ink)}
.cases-filtro button.ativo{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cases-filtro .voltar{border-color:transparent;padding-left:0;color:var(--ink)}
.cases-filtro .voltar:hover{border-color:transparent;color:var(--accent)}
.cases-filtro button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cases-lista .cases .case,.cases-lista .cases .case:nth-child(3n+1){grid-column:span 4;aspect-ratio:16/10}
.cases-lista .case[hidden]{display:none}
.case-titulo{position:absolute;left:0;right:0;bottom:0;padding:40px clamp(14px,1.4vw,20px) clamp(12px,1.2vw,16px);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:#ECE8E1;background:linear-gradient(0deg,#0A0B0Acc,#0A0B0A00)}
.case-play{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:1.5px solid #ECE8E1cc;background:#0A0B0A55;opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}
.case-play::after{content:"";position:absolute;left:20px;top:16px;border-left:14px solid #ECE8E1;border-top:9px solid transparent;border-bottom:9px solid transparent}
.case:hover .case-play,.case:focus-visible .case-play{opacity:1;transform:none}

@media (max-width:960px){
  .cases-cats{grid-template-columns:repeat(2,1fr)}
  .cat-card{aspect-ratio:4/3}
  .cases-lista .cases .case,.cases-lista .cases .case:nth-child(3n+1){grid-column:span 6}
}
@media (max-width:640px){
  .cases-cats{grid-template-columns:1fr}
  .cat-card{aspect-ratio:16/9}
  .cases-lista .cases .case,.cases-lista .cases .case:nth-child(3n+1){grid-column:span 12;aspect-ratio:16/10}
  .cases-filtro{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(var(--pad)*-1);padding-right:var(--pad);scrollbar-width:none}
  .cases-filtro::-webkit-scrollbar{display:none}
  .cases-filtro button{flex:0 0 auto}
  .case-play{opacity:1;transform:none}
}
/* ---------- Servicos ---------- */
.servicos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.servico{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,36px) clamp(16px,1.8vw,28px) clamp(26px,2.6vw,40px);border-right:1px solid var(--line)}
.servico:first-child{padding-left:0}
.servico:last-child{border-right:0;padding-right:0}
.servico-num{font-size:.78rem;letter-spacing:.06em;color:var(--muted)}
.servico h3{font-size:clamp(1.9rem,2.8vw,2.8rem);margin-top:6px}
.servico p{color:var(--muted);font-size:1rem;line-height:1.5;max-width:32ch}
.servico ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.servico li{position:relative;padding-left:18px;font-size:.95rem}
.servico li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--accent)}
.servico-link{margin-top:auto;padding-top:14px;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.servico-link:hover{color:var(--accent)}
@media (max-width:1024px){
  .servicos{grid-template-columns:repeat(2,1fr)}
  .servico,.servico:first-child,.servico:last-child{padding:clamp(22px,3vw,32px) clamp(16px,2.4vw,28px);border-right:0;border-bottom:1px solid var(--line)}
  .servico:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}
  .servico:nth-child(even){padding-right:0}
}
@media (max-width:640px){
  .servicos{grid-template-columns:1fr}
  .servico,.servico:nth-child(odd),.servico:nth-child(even){padding:26px 0;border-right:0}
}