/* ===========================================================================
   Tipografia do site, seção por seção.
   Duas famílias, nada além delas: Rubik (400/500/600/700) e Signika (400/700).
   Signika só aparece sobre imagem ou fundo colorido.
   Carregado por último, então manda sobre base.css, components.css e a página.
   =========================================================================== */

/* ===== Regras globais ===== */

body {
  font-family: var(--font-texto);
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  line-height: 1.85;
  color: var(--tinta-texto);
}

/* Título de seção: 38px no desktop, ~28px no celular */
.secao h2,
.secao h3,
.secao--financiamento__titulo,
.secao--cta-final__titulo,
.pagina-institucional h2,
.pagina-imoveis__cabecalho h1 {
  font-family: var(--font-titulo);
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.375rem);
  font-weight: 600;
  line-height: 1;
  color: var(--tinta-titulo);
}

.secao__subtitulo {
  font-family: var(--font-texto);
  font-size: 1.0625rem;     /* 17px */
  font-weight: 400;
  line-height: 1.85;
  color: var(--tinta-subtitulo);
}

.secao__etapa {
  font-family: var(--font-texto);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Sobre fundo escuro o título e o subtítulo trocam de cor, não de fonte */
.secao--financiamento h2,
/* O financiamento continua escuro; o CTA final virou claro e fica com a
   tinta escura de título, herdada da regra geral. */
.secao--financiamento .secao--financiamento__titulo {
  color: var(--branco);
}

.secao__subtitulo--sobre-preto {
  color: #d9d9d9;
}

/* ===== 1. Header e menu ===== */

.header__nav a,
.header__menu-mobile a {
  font-family: var(--font-texto);
  font-size: 1rem;          /* 16px */
  font-weight: 400;
}

.header__whatsapp {
  font-family: var(--font-texto);
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
}

.header__busca-campo {
  font-size: 0.875rem;
}

/* ===== 2. Hero ===== */

.hero__titulo {
  font-family: var(--font-destaque);
  font-size: clamp(2rem, 1.1rem + 3.9vw, 3.125rem);   /* 32px -> 50px */
  font-weight: 400;
  line-height: 1.15;
  color: var(--branco);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.hero__subtitulo {
  font-family: var(--font-texto);
  font-size: 1.125rem;      /* 18px */
  font-weight: 400;
  line-height: 1.85;
  color: var(--branco);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.busca__select {
  font-family: var(--font-texto);
  font-size: 0.9375rem;     /* 15px */
  font-weight: 400;
  color: var(--preto);
}

.busca__codigo-label,
.busca__codigo-input,
.busca__codigo-btn {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 400;
}

.busca__enviar {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 1px;
}

/* ===== 3. A empresa (página Sobre) ===== */

.pagina-institucional p {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--tinta-subtitulo);
}

.secao--cinza {
  background: #F1F1F7;
}

/* ===== 4. Destaques sobre imagem (carrossel e detalhes do card) ===== */

.carrossel__titulo {
  font-family: var(--font-destaque);
  font-size: 1.25rem;       /* 20px */
  font-weight: 400;
  color: var(--branco);
}

.carrossel__apoio,
.card-imovel__specs,
.card-imovel__corretor {
  font-family: var(--font-destaque);
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  color: var(--branco);
}

.card-imovel__selo,
.carrossel__slide .selo {
  font-family: var(--font-destaque);
  font-size: 0.75rem;       /* 12px */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--branco);
}

/* ===== 5. Imóveis em destaque (cards brancos) ===== */

.secao--imoveis {
  background: #F1F1F7;
}

.card-imovel__titulo {
  font-family: var(--font-texto);
  font-size: 1.125rem;      /* 18px */
  font-weight: 500;
  line-height: 1.4;
  color: #222;
}

.card-imovel__local {
  font-family: var(--font-texto);
  font-size: 0.6875rem;     /* 11px */
  font-weight: 400;
  color: var(--tinta-texto);
}

.card-imovel__preco {
  font-family: var(--font-texto);
  font-size: 1.5625rem;     /* 25px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--vinho);
}

.card-imovel__periodo {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--tinta-texto);
}

.card-imovel__codigo {
  font-family: var(--font-texto);
  font-size: 0.8125rem;     /* 13px */
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tinta-texto);
}

/* As abas "Encontre do seu jeito" são a mesma pílula dos filtros rápidos, então
   levam o mesmo texto. A cor sai do home.css, que é quem trata os estados. */
.filtro-rapido,
.abas-encontre__botao {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ===== 6. Nossos corretores ===== */

.card-corretor__nome {
  font-family: var(--font-texto);
  font-size: 1.125rem;      /* 18px */
  font-weight: 500;
  color: #112A46;
}

.card-corretor__creci {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--tinta-texto);
}

/* ===== 7. Módulos (financiamento, anuncie) ===== */

.sequencia-financiamento li {
  font-family: var(--font-texto);
  font-size: 1.125rem;      /* 18px */
  font-weight: 500;
  color: var(--branco);
}

.btn {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ===== 9. Conheça os bairros (aba Bairro do "Encontre do seu jeito") ===== */

.secao--cinza h2 {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 1.875rem);  /* 24px -> 30px */
  font-weight: 600;
  color: #333;
}

.secao--cinza .secao__subtitulo {
  font-size: 0.9375rem;     /* 15px */
  color: #777;
}

.card-atalho__titulo {
  font-family: var(--font-texto);
  font-size: 1.15rem;       /* 18px */
  font-weight: 700;
  color: var(--preto);
}

.card-atalho__cidade {
  font-size: 0.85rem;       /* 14px */
  font-weight: 400;
  color: var(--cinza-texto-suave);
}

/* Vermelho escuro, e não --vermelho: sobre o fundo lavado do selo o tom claro
   dá 4,33:1 e reprova no AA. Escuro dá 6,3:1. */
.card-atalho__contagem {
  font-family: var(--font-texto);
  font-size: 0.78rem;       /* 12.5px */
  font-weight: 700;
  color: var(--vermelho-escuro);
}

.secao__acao a {
  font-family: var(--font-texto);
  font-size: 0.9375rem;     /* 15px */
  font-weight: 600;
}

/* ===== 10. Localização (página de contato) ===== */

/* O botão do WhatsApp fica de fora: pintado de #454545, o texto dele sumia no
   vermelho (1,91:1) */
.formulario-publico__aside,
.formulario-publico__aside a:not(.btn),
.formulario-publico__aside p,
.formulario-publico__aside span:not(.btn *) {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 400;
  color: #454545;
}

/* ===== 11. Rodapé ===== */

.footer h5,
.footer__marca .footer__logo-nome {
  font-family: var(--font-texto);
  font-size: 1.125rem;      /* 18px */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--branco);
}

.footer a,
.footer p,
.footer li {
  font-family: var(--font-texto);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .7);
}

.footer__base,
.footer__base span {
  font-size: 0.875rem;
  font-weight: 400;
  color: #7D7D84;
}