/* ============================================================
   Luirgi Machado Negócios Imobiliários
   Design tokens extraídos DIRETO do CSS real do site atual
   (Elementor global kit, post-1885.css, post-1896.css)
   — não são estimativa visual, são os valores exatos do site no ar.
   ============================================================ */

:root {
  --cor-primaria: #0A5072;
  --cor-secundaria: #1F1D1E;
  --cor-texto: #7A7A7A;
  --cor-destaque: #FCB900;
  --cor-azul-extra: #4054B2;
  --cor-branco: #FFFFFF;

  --fonte-corpo: "Abel", sans-serif;
  --fonte-titulo: "Poppins", sans-serif;

  /* Espaçamento das seções — TODA seção da home usa estes 3 valores e mais
     nenhum número solto. Mexeu aqui, o site inteiro acompanha junto.
     O hero do WordPress é 100vh com 90px de padding; Felipe pediu mais baixo
     em 01/08/2026, então aqui a gente sai de propósito do valor original. */
  --espaco-secao: 60px;    /* respiro vertical de cada seção */
  --espaco-lateral: 50px;  /* respiro horizontal */
  --espaco-hero: 60px;     /* vertical só do hero */
  --altura-hero: 85vh;
  --espaco-titulo: 30px;   /* do título da seção até o conteúdo dela */
}

/* Breakpoints do site original (Elementor padrão):
   Desktop: acima de 768px
   Tablet:  max-width 768px
   Mobile:  max-width 480px */

/* Os tokens encolhem sozinhos no mobile — por isso nenhuma seção precisa
   redeclarar padding dentro de @media. */
@media (max-width: 768px) {
  :root {
    --espaco-secao: 40px;
    --espaco-lateral: 20px;
    --espaco-hero: 40px;
    --altura-hero: auto;
    --espaco-titulo: 24px;
  }
}
@media (max-width: 480px) {
  :root {
    --espaco-secao: 32px;
    --espaco-lateral: 16px;
    --espaco-hero: 32px;
    --espaco-titulo: 20px;
  }
}

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
}

h1, h2, h3, h4, h5, h6,
.titulo {
  font-family: var(--fonte-titulo);
  color: var(--cor-secundaria);
}

/* ---------- Título de bloco: um padrão só, no site inteiro ----------
   Mora aqui, e não no `home.css`, porque este é o único arquivo que TODA
   página carrega. Referência escolhida pelo Felipe em 02/08/2026: o título
   do bloco "Fale com Nosso Time".
   ⚠️ O WordPress usa 32px nesses títulos (regra `h2{font-size:32px}` do kit
   post-1885). Os 28px daqui são decisão do Felipe depois de ver os títulos
   lado a lado — divergência proposital, não é erro de extração.
   Bloco novo usa `class="bloco-titulo"`. As classes da home estão na lista
   só pra não precisar mexer no PHP delas; não criar regra de tamanho, peso
   ou entrelinha por seção em lugar nenhum. */
.bloco-titulo,
.home-hero__titulo,
.home-destaques__titulo,
.instagram__titulo,
.porque__titulo,
.home-depoimentos__titulo,
.home-time__titulo {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 800;
  line-height: 36px;
  color: var(--cor-primaria);
  margin: 0 0 var(--espaco-titulo);
}
/* Os blocos de fundo azul escuro */
.bloco-titulo--claro,
.home-hero__titulo,
.instagram__titulo { color: var(--cor-branco); }

@media (max-width: 480px) {
  .bloco-titulo,
  .home-hero__titulo,
  .home-destaques__titulo,
  .instagram__titulo,
  .porque__titulo,
  .home-depoimentos__titulo,
  .home-time__titulo { font-size: 24px; line-height: 30px; }
}