/* ============================================================
   VOHAUS — cases.css
   Complemento do main.css para a área de Cases e para a página
   institucional do fundador. Nenhuma classe existente é alterada:
   todos os seletores usam prefixo .case-, .cse- ou .bio-.
   Tokens reaproveitados: --black --white --orange --gray --mid --text
   --font-d (Bebas Neue) --font-ui (Barlow Condensed) --font-b (Barlow)
   Incluir depois de main.css e antes de mobile.css.
   ============================================================ */

/* ---------- ÍNDICE DE CASES ---------- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.0625rem;              /* fresta de 1px como no .prob-grid */
  background:var(--mid);
}
.case-card{
  background:var(--black);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:background .35s;
}
.case-card:hover{background:var(--gray)}
.case-card::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.23,1,.32,1);
}
.case-card:hover::after{transform:scaleX(1)}
.case-card-img{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--mid);
}
.case-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(18%) contrast(1.05);
  transition:transform .8s cubic-bezier(.23,1,.32,1),filter .5s;
}
.case-card:hover .case-card-img img{transform:scale(1.035);filter:grayscale(0) contrast(1.02)}
.case-card-body{
  padding:2.25rem 2rem 2.5rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.case-tag{
  font-family:var(--font-ui);
  font-size:.65rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:0.875rem;
}
.case-name{
  font-family:var(--font-d);
  font-size:2.1rem;
  line-height:.95;
  margin-bottom:0.875rem;
}
.case-line{
  font-size:.85rem;
  line-height:1.8;
  color:rgba(245,240,235,.82);
  margin-bottom:1.5rem;
}
.case-specs{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.25rem;
  margin-top:auto;
  padding-top:1.25rem;
  border-top:1px solid var(--mid);
  font-family:var(--font-ui);
  font-size:.63rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
}
.case-specs span{display:inline-flex;align-items:center;gap:0.4375rem}
.case-specs span::before{content:"";width:5px;height:5px;background:var(--orange);display:block}
.case-metric{
  font-family:var(--font-ui);
  font-size:.82rem;
  line-height:1.5;
  color:var(--white);
  margin-bottom:1.25rem;
}
.case-metric strong{
  font-family:var(--font-d);
  font-size:1.65rem;
  line-height:1;
  color:var(--orange);
  margin-right:.5rem;
  display:inline-block;
  vertical-align:-.15em;
}

/* ---------- PÁGINA DE UM CASE ---------- */
.case-hero{
  padding:11rem 4rem 5rem;
  background:var(--black);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4.5rem;
  align-items:end;
}
.case-hero-h{
  font-family:var(--font-d);
  font-size:clamp(3.4rem,6vw,6.4rem);
  line-height:.9;
  margin-bottom:1.75rem;
}
.case-hero-h em{color:var(--orange);font-style:normal}
.case-hero-sub{
  font-size:1.02rem;
  line-height:1.85;
  color:rgba(245,240,235,.88);
  max-width:34rem;
}
.case-hero-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--gray);
}
.case-hero-media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(12%) contrast(1.05);
}
.case-hero-media figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:0.875rem 1.125rem;
  font-family:var(--font-ui);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(245,240,235,.72);
  background:linear-gradient(to top,rgba(10,10,10,.92),transparent);
}

/* ficha técnica do cliente */
.case-ficha{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.0625rem;
  background:var(--mid);
  border-top:0.0625rem solid var(--mid);
}
.case-ficha > div{
  background:var(--black);
  padding:2rem;
}
.case-ficha .k{
  font-family:var(--font-ui);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:0.625rem;
}
.case-ficha .v{
  font-size:.92rem;
  line-height:1.6;
  color:rgba(245,240,235,.9);
}

/* números do resultado */
.case-numeros{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.0625rem;
  background:var(--mid);
  margin-top:3.5rem;
}
.case-numeros > div{
  background:var(--gray);
  padding:2.5rem 2rem;
}
.case-numeros .n{
  font-family:var(--font-d);
  font-size:3.6rem;
  line-height:.9;
  color:var(--orange);
  margin-bottom:0.375rem;
}
.case-numeros .l{
  font-family:var(--font-ui);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  line-height:1.7;
}

/* blocos de leitura longa */
.case-block{
  max-width:52.5rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.case-block p{
  font-size:1rem;
  line-height:1.9;
  color:rgba(245,240,235,.88);
}
.case-block p.lead{
  font-size:1.14rem;
  line-height:1.85;
  color:rgba(245,240,235,.94);
}
.case-block strong{font-weight:600;color:var(--white)}

/* lista de frentes de trabalho */
.case-frentes{
  margin-top:3.5rem;
  display:flex;
  flex-direction:column;
}
.case-frente{
  display:grid;
  grid-template-columns:4.5rem 1fr;
  gap:2.5rem;
  padding:2.5rem 0;
  border-bottom:1px solid var(--mid);
  align-items:start;
}
.case-frente .fn{
  font-family:var(--font-d);
  font-size:2.6rem;
  color:rgba(255,61,0,.22);
  line-height:1;
}
.case-frente h3{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:1.18rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:0.625rem;
}
.case-frente p{
  font-size:.9rem;
  line-height:1.85;
  color:rgba(245,240,235,.85);
}

/* depoimento do case */
.case-depo{
  padding:6.5rem 4rem;
  background:var(--black);
  text-align:center;
}
.case-depo blockquote{
  max-width:57.5rem;
  margin:0 auto 2.25rem;
  font-family:var(--font-d);
  font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.42;
  color:var(--white);
}
.case-depo cite{
  display:block;
  font-style:normal;
  font-family:var(--font-ui);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
}

/* navegação entre cases */
.case-next{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.0625rem;
  background:var(--mid);
}
.case-next a{
  background:var(--gray);
  padding:3rem 4rem;
  display:flex;
  flex-direction:column;
  gap:0.625rem;
  transition:background .3s;
}
.case-next a:hover{background:var(--black)}
.case-next .lbl{
  font-family:var(--font-ui);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
}
.case-next .ttl{
  font-family:var(--font-d);
  font-size:2rem;
  line-height:.95;
}

/* aviso de uso de dados */
.case-nota{
  font-size:.78rem;
  line-height:1.75;
  color:var(--text);
  max-width:52.5rem;
  margin-top:2.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--mid);
}

/* ---------- HOME: banda de cases ---------- */
.home-cases-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3.5rem;
  flex-wrap:wrap;
}

/* ---------- HOME: blog em destaque ---------- */
.blog-destaque{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0.0625rem;
  background:var(--mid);
}
.blog-destaque .bd-main{
  background:var(--gray);
  padding:3rem 2.75rem;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.blog-destaque .bd-main h3{
  font-family:var(--font-d);
  font-size:clamp(2.1rem,3.4vw,3.1rem);
  line-height:.95;
  margin-bottom:1.25rem;
}
.blog-destaque .bd-main p{
  font-size:.95rem;
  line-height:1.85;
  color:rgba(245,240,235,.85);
  margin-bottom:2rem;
}
.blog-destaque .bd-side{
  display:flex;
  flex-direction:column;
  gap:0.0625rem;
  background:var(--mid);
}
.blog-destaque .bd-item{
  background:var(--gray);
  padding:2rem 2.25rem;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:background .3s;
}
.blog-destaque .bd-item:hover{background:var(--black)}
.blog-destaque .bd-item h4{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:.03em;
  line-height:1.35;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
.blog-destaque .bd-item span{
  font-family:var(--font-ui);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
}

/* ---------- PÁGINA DO FUNDADOR ---------- */
.bio-hero{
  padding:11rem 4rem 5rem;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4.5rem;
  align-items:center;
  background:var(--black);
}
.bio-foto{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--gray);
}
.bio-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(12%) contrast(1.06)}
.bio-nome{
  font-family:var(--font-d);
  font-size:clamp(3rem,5.2vw,5.4rem);
  line-height:.92;
  margin-bottom:0.75rem;
}
.bio-nome em{color:var(--orange);font-style:normal}
.bio-cargo{
  font-family:var(--font-ui);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:2rem;
}
.bio-txt p{
  font-size:1rem;
  line-height:1.9;
  color:rgba(245,240,235,.88);
  margin-bottom:1.25rem;
  max-width:36rem;
}
.bio-trajetoria{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.0625rem;
  background:var(--mid);
  margin-top:3.5rem;
}
.bio-trajetoria > div{background:var(--black);padding:2.25rem 1.75rem}
.bio-trajetoria .k{
  font-family:var(--font-d);
  font-size:2.4rem;
  color:var(--orange);
  line-height:1;
  margin-bottom:0.5rem;
}
.bio-trajetoria .v{
  font-size:.85rem;
  line-height:1.7;
  color:rgba(245,240,235,.85);
}
.bio-lista{
  margin-top:3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.0625rem;
  background:var(--mid);
}
.bio-lista > div{
  background:var(--black);
  padding:2.25rem;
}
.bio-lista h3{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:0.75rem;
}
.bio-lista p{font-size:.88rem;line-height:1.8;color:rgba(245,240,235,.85)}

/* ---------- SOBRE: linha do tempo ---------- */
.timeline{
  margin-top:3.5rem;
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--mid);
  padding-left:2.5rem;
}
.timeline-item{
  position:relative;
  padding:0 0 2.75rem;
}
.timeline-item::before{
  content:"";
  position:absolute;
  left:-2.594rem;
  top:0.5rem;
  width:9px;height:9px;
  background:var(--orange);
  border-radius:50%;
}
.timeline-item .ano{
  font-family:var(--font-d);
  font-size:1.9rem;
  color:var(--orange);
  line-height:1;
  margin-bottom:0.5rem;
}
.timeline-item h3{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
.timeline-item p{
  font-size:.9rem;
  line-height:1.85;
  color:rgba(245,240,235,.85);
  max-width:44rem;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1024px){
  .case-hero{grid-template-columns:1fr;gap:2.5rem;padding:9rem 2.5rem 3.5rem}
  .case-ficha{grid-template-columns:1fr 1fr}
  .case-numeros{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr 1fr}
  .blog-destaque{grid-template-columns:1fr}
  .bio-hero{grid-template-columns:1fr;gap:2.5rem;padding:9rem 2.5rem 3.5rem}
  .bio-trajetoria{grid-template-columns:1fr 1fr}
  .case-depo{padding:4.5rem 2.5rem}
  .case-next a{padding:2.25rem 2.5rem}
}
@media (max-width:720px){
  .case-hero{padding:8rem 1.25rem 2.5rem}
  .case-grid{grid-template-columns:1fr}
  .case-ficha{grid-template-columns:1fr}
  .case-numeros{grid-template-columns:1fr}
  .case-frente{grid-template-columns:2.75rem 1fr;gap:1.25rem}
  .case-frente .fn{font-size:2rem}
  .case-next{grid-template-columns:1fr}
  .case-next a{padding:2rem 1.25rem}
  .case-depo{padding:3.5rem 1.25rem}
  .case-nota{font-size:.75rem}
  .bio-trajetoria,.bio-lista{grid-template-columns:1fr}
  .bio-hero{padding:8rem 1.25rem 2.5rem}
  .timeline{padding-left:1.5rem}
  .timeline-item::before{left:-1.594rem}
  .home-cases-head{margin-bottom:2.25rem}
  .blog-destaque .bd-main,.blog-destaque .bd-item{padding:2rem 1.5rem}
}

/* ---------- GALERIA DE CASE ---------- */
.case-galeria{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.0625rem;
  background:var(--mid);
}
.case-galeria figure{margin:0;position:relative;background:var(--gray)}
.case-galeria img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.case-galeria figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:1.25rem 1.5rem;
  font-family:var(--font-ui);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);
  background:linear-gradient(to top,rgba(10,10,10,.88),transparent);
}
@media(max-width:720px){.case-galeria{grid-template-columns:1fr}}

/* ---------- IMAGENS NO BLOG ---------- */
.blog-destaque .bd-main{overflow:hidden}
.bd-cover{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  margin-bottom:1.75rem;
}
.bd-item{overflow:hidden}
.bd-item-cover{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  margin-bottom:1rem;
}
/* capa em cards de post (listagem e home antigos, se aplicado) */
.blog-card-cover{
  display:block;
  width:calc(100% + 5rem);
  margin:-2.5rem -2.5rem 1.75rem;
  aspect-ratio:16/9;
  object-fit:cover;
}
/* capa no topo do artigo */
.post-cover{
  display:block;
  width:100%;
  max-width:64rem;
  margin:0 auto 3rem;
  aspect-ratio:16/9;
  object-fit:cover;
}
@media(max-width:720px){
  .blog-card-cover{width:calc(100% + 4rem);margin:-2rem -2rem 1.5rem}
}

/* ---------- GRADE DE CASES COM QUATRO ITENS ---------- */
.case-grid.is-four{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){.case-grid.is-four{grid-template-columns:1fr}}

/* ---------- BLOG: CAPAS ---------- */
.post-cover{
  margin:0 0 3.25rem;
  overflow:hidden;
  background:var(--gray);
}
.post-cover img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.blog-cover{
  display:block;
  overflow:hidden;
  margin:-2.5rem -2.5rem 2rem;
  background:var(--mid);
}
.blog-cover img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.23,1,.32,1);
}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.bd-cover{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
@media(max-width:900px){
  .post-cover{margin-bottom:2rem}
  .blog-cover{margin:-1.75rem -1.75rem 1.5rem}
}