/* ============================================================
   PÁGINA DE CASE — mesma linguagem da home
   Modelo: um case por página, com o antes/depois do trabalho
   ============================================================ */

.pg-case main{ display:block; }

/* ---------- HERO DO CASE ---------- */
.ch{
  position:relative;
  padding:clamp(120px,12vw,190px) clamp(20px,5vw,72px) clamp(50px,6vw,90px);
  background:linear-gradient(165deg, #0b0b0b 0%, #000 45%, #03211e 100%);
  border-radius:0 0 var(--raio-bloco) var(--raio-bloco);
  overflow:hidden; color:#fff;
  isolation:isolate;
}
.ch__foto{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  opacity:.42;
}
.ch__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 48%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 32%, rgba(3,33,30,.66) 100%);
}
.ch__inner{ position:relative; z-index:3; max-width:900px; }

.ch__trilha{
  display:flex; gap:.55em; align-items:center; flex-wrap:wrap;
  font-size:clamp(13px,.97vw,14px); color:rgba(255,255,255,.5);
  margin-bottom:clamp(18px,2.4vw,32px);
}
.ch__trilha a{ display:inline-flex; align-items:center; min-height:44px; transition:color .3s; }
.ch__trilha a:hover{ color:var(--verde); }
.ch__trilha strong{ color:rgba(255,255,255,.8); font-weight:600; }

/* o logo do cliente entra em branco sólido para funcionar sobre o hero escuro,
   qualquer que seja a cor original do arquivo */
.ch__marca{
  height:clamp(38px,4.4vw,60px); width:auto;
  margin-bottom:clamp(18px,2.4vw,32px);
  filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.5));
}

/* quando a marca não tem logo limpo, o nome entra como texto */
.ch__nome{
  font-size:clamp(20px,2.4vw,34px); font-weight:800; letter-spacing:-.01em;
  color:#fff; margin-bottom:clamp(18px,2.4vw,32px);
}

/* rótulo de seção (reaproveita o padrão das páginas de serviço) */
.coutros .rotulo{
  font-size:clamp(13px,.9vw,13px); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--laranja);
  text-align:center; margin-bottom:.9em;
}

/* as frentes que a Cluster tocou no case */
.ch__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(18px,2.2vw,30px); }
.ch__tags li{
  font-size:clamp(13px,.97vw,13px); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  padding:.42em 1em; border-radius:999px;
  background:rgba(4,74,68,.66); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(114,191,141,.34);
}
.ch__tags .is-destaque{ background:rgba(224,121,47,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); }

.ch__titulo{
  display:flex; flex-direction:column;
  font-size:clamp(30px,5vw,70px); font-weight:800; line-height:1.03;
  letter-spacing:-.02em;
}
.ch__titulo .en{ color:var(--verde); }
.ch__sub{
  margin:clamp(18px,2.2vw,32px) 0 0; max-width:660px;
  font-size:clamp(14px,1.32vw,19px); line-height:1.55;
  color:rgba(255,255,255,.72);
}

/* ---------- NÚMEROS DO CASE ---------- */
.cnum{ padding:clamp(44px,5.5vw,86px) var(--pad) clamp(24px,3vw,44px); }
.cnum__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,36px);
  text-align:center;
}
.cnum__i{ display:flex; flex-direction:column; gap:.45em; align-items:center; }
.cnum__v{
  font-size:clamp(28px,4.1vw,58px); font-weight:800; line-height:1;
  letter-spacing:-.03em; color:var(--verde-esc);
  font-variant-numeric:tabular-nums;
}
.cnum__l{ font-size:clamp(13px,1.04vw,15px); line-height:1.35; color:#3d5b57; max-width:16ch; }

/* ---------- O DESAFIO / O QUE FIZEMOS ---------- */
.cdes{ padding:clamp(30px,4vw,60px) var(--pad) clamp(40px,5vw,80px); }
.cdes__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,52px);
  align-items:start;
}
.cdes__bloco h2{
  font-size:clamp(22px,3vw,42px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:var(--verde-esc);
  margin-bottom:clamp(14px,1.8vw,24px);
}
.cdes__bloco p{
  font-size:clamp(14px,1.32vw,19px); line-height:1.6; color:#41504e;
}
.cdes__bloco p + p{ margin-top:1em; }

@media (max-width:820px){ .cdes__grid{ grid-template-columns:1fr; } }

/* ---------- FRENTES DE TRABALHO ---------- */
.cfr{
  margin:0;
  padding:clamp(46px,5.6vw,92px) clamp(20px,4vw,70px);
  background:linear-gradient(180deg, #000 0%, #03211e 72%, var(--verde-esc) 100%);
  border-radius:var(--raio-bloco);
}
.cfr__titulo{
  max-width:900px; margin:0 auto clamp(30px,4vw,58px);
  text-align:center;
  font-size:clamp(24px,3.6vw,52px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:#fff;
}
.cfr__lista{ max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(12px,1.5vw,20px); }
.frente{
  display:flex; gap:clamp(16px,2.2vw,34px); align-items:flex-start;
  background:rgba(255,255,255,.045);
  border-radius:clamp(18px,2.2vw,30px);
  padding:clamp(20px,2.4vw,34px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background-color .4s, box-shadow .4s;
}
.frente:hover{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(114,191,141,.35); }
.frente__n{
  flex:0 0 auto;
  font-size:clamp(30px,4.4vw,62px); font-weight:800; line-height:.86; letter-spacing:-.04em;
  background:linear-gradient(180deg, var(--verde) 10%, rgba(114,191,141,.15) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.frente h3{ font-size:clamp(16px,1.8vw,26px); font-weight:700; color:#fff; margin-bottom:.45em; }
.frente p{ font-size:clamp(13px,1.18vw,17px); line-height:1.6; color:rgba(255,255,255,.7); }

/* ---------- GALERIA ---------- */
.cgal{ padding:clamp(44px,5.5vw,86px) var(--pad); }
.cgal__titulo{
  text-align:center; margin-bottom:clamp(24px,3vw,48px);
  font-size:clamp(22px,3vw,42px); font-weight:800; letter-spacing:-.02em;
  color:var(--verde-esc);
}
.cgal__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1vw,14px);
}
.cgal__grid figure{
  border-radius:clamp(12px,1.5vw,22px); overflow:hidden;
  background:#0d0d0d; margin:0;
}
.cgal__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--easing); }
.cgal__grid figure:hover img{ transform:scale(1.05); }
/* composição: 2 grandes + 4 menores */
.cgal__grid figure:nth-child(1){ grid-column:span 4; aspect-ratio:16/9; }
.cgal__grid figure:nth-child(2){ grid-column:span 2; aspect-ratio:4/5; }
.cgal__grid figure:nth-child(3),
.cgal__grid figure:nth-child(4){ grid-column:span 2; aspect-ratio:1; }
.cgal__grid figure:nth-child(5){ grid-column:span 2; aspect-ratio:1; }
.cgal__grid figure:nth-child(6){ grid-column:span 3; aspect-ratio:4/3; }
.cgal__grid figure:nth-child(7){ grid-column:span 3; aspect-ratio:4/3; }

@media (max-width:760px){
  .cgal__grid{ grid-template-columns:repeat(2,1fr); }
  .cgal__grid figure:nth-child(n){ grid-column:span 2; aspect-ratio:16/10; }
  .cgal__grid figure:nth-child(3),
  .cgal__grid figure:nth-child(4),
  .cgal__grid figure:nth-child(5){ grid-column:span 1; aspect-ratio:1; }
  .cnum__grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
}

/* ---------- DEPOIMENTO ---------- */
.cdep{ padding:clamp(20px,3vw,50px) var(--pad) clamp(44px,5vw,80px); }
.cdep__box{
  max-width:900px; margin:0 auto;
  background:var(--claro);
  border-radius:clamp(18px,2.2vw,32px);
  padding:clamp(26px,3.4vw,52px);
  box-shadow:0 18px 46px rgba(0,0,0,.14);
  text-align:center;
}
.cdep__estrelas{
  color:var(--verde); font-size:clamp(16px,1.94vw,28px);
  letter-spacing:.12em; margin-bottom:.5em;
}
.cdep__box blockquote{
  margin:0;
  font-size:clamp(16px,1.94vw,28px); font-weight:600; line-height:1.34;
  color:var(--verde-esc);
}
.cdep__quem{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:clamp(18px,2.2vw,32px); }
.cdep__quem img{ width:clamp(44px,4vw,58px); height:clamp(44px,4vw,58px); border-radius:50%; object-fit:cover; }
.cdep__quem span{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.cdep__quem:not(:has(img)) span{ align-items:center; text-align:center; }
.cdep__quem strong{ font-size:clamp(14px,1.32vw,19px); font-weight:700; color:var(--verde-esc); }
.cdep__quem em{ font-style:normal; font-size:clamp(13px,1.11vw,16px); color:#3d5b57; }

/* ---------- FECHO + OUTROS CASES ---------- */
.cfim{ padding:clamp(20px,3vw,50px) var(--pad) clamp(30px,4vw,60px); text-align:center; }
.cfim__titulo{
  display:flex; flex-direction:column; align-items:center;
  font-size:clamp(24px,4vw,56px); font-weight:800; line-height:1.08;
  letter-spacing:-.02em; color:var(--verde-esc);
  margin-bottom:clamp(18px,2.2vw,32px);
}
.cfim__titulo .en{ color:var(--laranja); }

.coutros{ padding:clamp(20px,3vw,50px) var(--pad) clamp(44px,5vw,80px); }
.coutros__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,14px);
}
.coutros__grid a{
  display:flex; align-items:center; gap:.6em; min-height:52px;
  padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px);
  background:var(--claro); border-radius:999px;
  font-size:clamp(13px,1.11vw,16px); font-weight:600; color:var(--verde-esc);
  box-shadow:0 6px 18px rgba(0,0,0,.07);
  transition:background-color .35s, color .35s, transform .4s var(--easing);
}
.coutros__grid a:hover{ background:var(--verde-esc); color:#fff; transform:translateY(-3px); }
.coutros__grid em{ margin-left:auto; font-style:normal; transition:transform .35s var(--easing); }
.coutros__grid a:hover em{ transform:translateX(4px); }

@media (max-width:760px){ .coutros__grid{ grid-template-columns:1fr; } }

/* a dica de ampliar vale nas duas telas aqui: na galeria do case a célula
   recorta a imagem, então mesmo no desktop tem coisa pra ver de perto */
.cgal .zoom-dica{ display:block; color:#41504e; margin-top:clamp(14px,1.8vw,22px); }