/* CLS Fix + Font Optimization - Core Web Vitals */
/* Aplicado em: 10/01/2026 */

/* FONTES OTIMIZADAS - WOFF2 primeiro (67% menor) */
@font-face {
  font-family: "SF Pro";
  src: url("../types/SFPro-Bold.woff2") format("woff2"),
       url("../types/SFPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro";
  src: url("../types/SFPro-Regular.woff2") format("woff2"),
       url("../types/SFPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ESPACAMENTO ENTRE SECOES - Otimizado */
.secao {
  margin-top: 120px;
}

@media screen and (max-width: 1140px) {
  .secao {
    margin-top: 100px;
  }
}

@media screen and (max-width: 740px) {
  .secao {
    margin-top: 80px;
  }
}

/* Dimensoes para icones da secao Por que contratar */
#cards-icons .icons-coloridos img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* Icones redes sociais do hero */
.hero .icons-social img {
  width: 24px;
  height: 24px;
}

/* Banner hero - manter aspect ratio */
.banner picture img {
  width: 100%;
  height: auto;
}






/* FIX: Hero post mobile — reduzir gap (30/03/2026)
   O hero tem 500px fixo no mobile, título sobe -330px, sobram ~170px vazios
   Solução: auto height no mobile, imagem aspect-ratio mantém proporção */
@media screen and (max-width: 740px) {
  .single-post__hero {
    height: auto;
  }
  .single-post__hero img {
    height: 300px;
  }
  .single-post__hero h1 {
    margin-top: -120px;
    font-size: 1.6rem;
    padding: 15px 5% !important;
  }
}