/* ==========================================================================
   INTERNA DE PROJETO, O CASO

   CSS só desta página. Carrega depois de todos os outros, então o que
   estiver aqui tem a última palavra.

   A página conta uma história, e por isso ela tem ritmo: abertura larga,
   ficha técnica em linha, capítulos alternando texto e imagem, galeria e
   convite. Tudo centrado numa medida só, para o olho não precisar procurar
   onde a próxima linha começa.

   Tudo em pixel, e não em em, de propósito: assim o texto de leitura não
   encolhe junto com a largura da janela, como acontece no resto do tema.
   ========================================================================== */

.caso{
  display:block; width:100%;
  max-width:1180px; margin:0 auto; padding:0 20px 90px;
  box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  color:#111;
}

/* ---------- abertura ---------- */
.casoMigalhas{
  padding:26px 0 0; font-size:12.5px; line-height:1.4; color:#8a8a80;
}
.casoMigalhas a{ color:#5a5a52; text-decoration:none; font-weight:700; }
.casoMigalhas a:hover{ color:#000; text-decoration:underline; }
.casoMigalhas span{ margin:0 7px; color:#c4c4bc; }

.casoCab{ max-width:860px; margin:0 auto; padding:0 0 34px; text-align:left; }

/* o chapéu: os serviços prestados, com o ponto amarelo da casa */
.casoChapeu{
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:1.6px; text-transform:uppercase;
  color:#111; background:transparent; padding:0; margin:24px 0 15px;
}
.casoChapeu::before{
  content:''; display:inline-block; width:7px; height:7px; margin-right:8px;
  background:#feec34; border-radius:50%; -ms-flex-negative:0; flex-shrink:0;
}

.casoTitulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:50px; line-height:1.02; letter-spacing:.3px;
  text-transform:uppercase; color:#000; margin:0 0 16px;
}
.casoFrase{
  margin:0 0 18px; font-size:21px; line-height:1.42; color:#000;
  font-weight:700;
}
.casoResumo{
  margin:0; font-size:17px; line-height:1.62; color:#4a4a44;
  max-width:720px;
}

/* ---------- capa ---------- */
.casoCapa{
  margin:0 0 42px; padding:0;
  border-radius:14px; overflow:hidden; background:#f2f2ee;
}
.casoCapa img{
  display:block; width:100%; height:auto; margin:0; border:0;
}

/* ---------- ficha técnica ----------
   Uma faixa de dados objetivos, separada por traço fino, no mesmo padrão
   da grade da home: alinhada à esquerda, sem sobra centralizada. */
.casoFicha{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  margin:0 0 48px; padding:0;
  border-top:1px solid #e8e8e0; border-left:1px solid #e8e8e0;
}
@supports (display: grid){
  .casoFicha{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  }
}
.casoFicha__item{
  -webkit-box-flex:1; -ms-flex:1 1 25%; flex:1 1 25%; min-width:0;
  padding:20px 22px 22px; box-sizing:border-box;
  border-right:1px solid #e8e8e0; border-bottom:1px solid #e8e8e0;
}
.casoFicha__rotulo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:10.5px; font-weight:700; line-height:1;
  letter-spacing:1.4px; text-transform:uppercase; color:#8a8a80;
  margin:0 0 9px;
}
.casoFicha__valor{
  margin:0; font-size:15.5px; line-height:1.45; font-weight:700; color:#000;
}

/* ---------- texto de abertura ---------- */
.casoTexto{ max-width:720px; margin:0 auto 54px; }
.casoTexto p{
  margin:0 0 20px; font-size:17.5px; line-height:1.75; color:#25251f;
}
.casoTexto p:last-child{ margin-bottom:0; }

/* ==========================================================================
   OS CAPÍTULOS

   Texto de um lado, imagem do outro, trocando de lado a cada capítulo. É
   esse zigue-zague que dá movimento à leitura sem precisar de enfeite.
   ========================================================================== */
.casoBlocos{ margin:0 0 20px; }

.casoBloco{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin:0 0 62px;
}
.casoBloco:last-child{ margin-bottom:0; }

.casoBloco__texto{
  -webkit-box-flex:1; -ms-flex:1 1 42%; flex:1 1 42%;
  min-width:0; padding:0 44px 0 0; box-sizing:border-box;
}
.casoBloco__foto{
  -webkit-box-flex:1; -ms-flex:1 1 58%; flex:1 1 58%;
  min-width:0; margin:0; padding:0;
}
/* a cada dois, o lado troca */
.casoBloco--invertido{
  -webkit-box-orient:horizontal; -webkit-box-direction:reverse;
  -ms-flex-direction:row-reverse; flex-direction:row-reverse;
}
.casoBloco--invertido .casoBloco__texto{ padding:0 0 0 44px; }

/* capítulo sem foto: o texto ocupa a medida de leitura, centrado */
.casoBloco--semFoto{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.casoBloco--semFoto .casoBloco__texto{
  -ms-flex:1 1 100%; flex:1 1 100%;
  max-width:720px; margin:0 auto; padding:0;
}

.casoBloco__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:29px; line-height:1.1; letter-spacing:.3px;
  text-transform:uppercase; color:#000; margin:0 0 16px;
  position:relative; padding-top:18px;
}
/* o traço amarelo curto que assina cada capítulo */
.casoBloco__titulo::before{
  content:''; position:absolute; left:0; top:0;
  width:44px; height:4px; background:#feec34; border-radius:3px;
}
.casoBloco__texto p{
  margin:0 0 16px; font-size:16.5px; line-height:1.7; color:#3a3a34;
}
.casoBloco__texto p:last-child{ margin-bottom:0; }

.casoBloco__foto img{
  display:block; width:100%; height:auto; margin:0; border:0;
  border-radius:12px; background:#f2f2ee;
}
.casoBloco__foto figcaption{
  margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#8a8a80;
}

/* ---------- vídeo ---------- */
.casoVideo{ margin:0 0 62px; }
.casoVideo .quadroVideo{ max-width:960px; margin:0 auto; border-radius:14px; }

/* ==========================================================================
   A GALERIA
   ========================================================================== */
.casoGaleria{ margin:0 0 60px; }
.casoGaleria__cab{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:20px; line-height:1; letter-spacing:.7px; text-transform:uppercase;
  color:#000; margin:0 0 30px; padding:0 0 14px;
  border-bottom:1px solid #e6e6e0;
}
.casoGaleria__cab span{ position:relative; display:inline-block; padding-bottom:14px; }
.casoGaleria__cab span::after{
  content:''; position:absolute; left:0; bottom:-15px; width:100%; height:3px;
  background:#feec34;
}

.casoGaleria__larga{ margin:0; }
.casoPeca{
  margin:0 0 18px; padding:0;
  border-radius:12px; overflow:hidden; background:#f2f2ee;
}
.casoPeca img{ display:block; width:100%; height:auto; margin:0; border:0; }

.casoGaleria__tres{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  margin:18px -9px 0;
}
.casoGaleria__tres .casoPeca{
  -webkit-box-flex:0; -ms-flex:0 0 33.3333%; flex:0 0 33.3333%;
  max-width:33.3333%; min-width:0;
  margin:0 0 18px; border-radius:0; background:transparent;
  padding:0 9px; box-sizing:border-box; overflow:visible;
}
.casoGaleria__tres .casoPeca img{ border-radius:12px; background:#f2f2ee; }

/* ---------- o site, quando existe ---------- */
.casoSite{ margin:0 0 60px; }

/* ---------- anterior, todos, próximo ---------- */
.casoNav{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  gap:18px; padding:26px 0 0; border-top:1px solid #e8e8e0;
}
.casoNav__item{
  display:block; text-decoration:none; color:inherit; min-width:0;
  max-width:38%;
}
.casoNav__item--prox{ text-align:right; }
.casoNav__rotulo{
  display:block; font-size:10.5px; font-weight:700; line-height:1;
  letter-spacing:1.4px; text-transform:uppercase; color:#8a8a80; margin-bottom:7px;
}
.casoNav__nome{
  display:block; font-size:15.5px; font-weight:700; line-height:1.3; color:#000;
}
.casoNav__item:hover .casoNav__nome{ color:#3a3a34; text-decoration:underline; }
.casoNav__todos{
  display:inline-block; text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.3px; color:#000;
  border:2px solid #d8d8d0; border-radius:40px; padding:12px 24px;
  -webkit-transition:.22s ease-in; transition:.22s ease-in;
}
.casoNav__todos:hover{ border-color:#000; }

/* ==========================================================================
   TELAS MENORES
   No celular tudo empilha, e em cada capítulo o texto vem antes da imagem , 
   primeiro o que se lê, depois o que se vê.
   ========================================================================== */
@media (max-width:980px){
  @supports (display: grid){
    .casoFicha{ grid-template-columns:repeat(2, 1fr); }
  }
  .casoFicha__item{ -ms-flex:1 1 50%; flex:1 1 50%; }
  .casoTitulo{ font-size:38px; }

  .casoBloco,
  .casoBloco--invertido{
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
    margin-bottom:46px;
  }
  .casoBloco__texto,
  .casoBloco--invertido .casoBloco__texto{
    -ms-flex:1 1 auto; flex:1 1 auto;
    padding:0; margin:0 0 20px; max-width:none;
  }
  .casoBloco__foto{ -ms-flex:1 1 auto; flex:1 1 auto; }
  .casoGaleria__tres .casoPeca{ -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; }
}

@media (max-width:640px){
  .caso{ padding:0 16px 66px; }
  .casoMigalhas{ padding-top:20px; font-size:12px; }
  .casoCab{ padding-bottom:24px; }
  .casoChapeu{ margin:18px 0 12px; letter-spacing:1.3px; }
  .casoTitulo{ font-size:29px; line-height:1.08; }
  .casoFrase{ font-size:18px; }
  .casoResumo{ font-size:15.5px; }
  .casoCapa{ margin-bottom:30px; border-radius:12px; }

  @supports (display: grid){
    .casoFicha{ grid-template-columns:1fr; }
  }
  .casoFicha{ margin-bottom:34px; }
  .casoFicha__item{ -ms-flex:1 1 100%; flex:1 1 100%; padding:16px 18px 17px; }

  .casoTexto{ margin-bottom:38px; }
  .casoTexto p{ font-size:16px; line-height:1.72; }

  .casoBloco{ margin-bottom:38px; }
  .casoBloco__titulo{ font-size:23px; padding-top:15px; }
  .casoBloco__texto p{ font-size:15.5px; }
  .casoBloco__foto img{ border-radius:10px; }

  .casoVideo{ margin-bottom:40px; }
  .casoGaleria{ margin-bottom:42px; }
  .casoGaleria__cab{ font-size:18px; margin-bottom:24px; }
  .casoPeca{ margin-bottom:12px; border-radius:10px; }
  .casoGaleria__tres{ margin:12px -6px 0; }
  .casoGaleria__tres .casoPeca{
    -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;
    padding:0 6px; margin-bottom:12px;
  }


  .casoNav{
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
    gap:16px;
  }
  .casoNav__item{ max-width:none; text-align:left; }
  .casoNav__item--prox{ text-align:left; }
  .casoNav__todos{ text-align:center; }
}