/* Pagina inicial (pranchas Main.dc.html e Inicial_celular.dc.html). Usa os tokens e componentes do base.css. */

/* --- Topo: H1, foto do imovel e busca rapida --- */
.inicial-topo { padding-top: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); }
.inicial-topo__titulos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 48px; }
.inicial-topo h1 {
  flex: 999 1 600px; min-width: 0; margin: 0; font-size: clamp(32px, 25px + 1.8vw, 48px); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--cor-primaria);
}
.inicial-topo__abertura { flex: 1 1 320px; min-width: 0; max-width: 40ch; }
.inicial-topo__painel { display: flex; flex-direction: column; }
.inicial-foto { position: relative; }
.inicial-foto .foto { height: clamp(320px, 40vw, 560px); border-radius: var(--raio-grande); }
.inicial-foto .foto img { object-position: center 60%; }
/* A busca cobre a borda de baixo da foto: a pelicula sobe junto, para continuar visivel no canto direito. */
.inicial-foto .foto--pelicula::after { bottom: calc(clamp(48px, 7vw, 96px) + 3%); }
.inicial-foto__legenda {
  position: absolute; top: 16px; left: 16px; max-width: calc(100% - 32px); z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px 8px 16px;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--cor-texto); background: var(--cor-superficie);
  border-radius: 999px; box-shadow: var(--sombra-foto); text-decoration: none;
}
.inicial-foto__legenda:hover { color: var(--cor-primaria); }

.busca-rapida {
  position: relative; z-index: 2; margin: calc(-1 * clamp(48px, 7vw, 96px)) clamp(0px, 3vw, 40px) 0;
  display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 3vw, 28px);
  background: var(--cor-superficie); border-radius: var(--raio-grande); box-shadow: var(--sombra-alta);
}
.busca-rapida--sem-foto { margin-top: 0; }
.busca-rapida__campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.busca-rapida__onde { flex: 2 1 240px; }
.busca-rapida__tipo { flex: 1 1 150px; }
.busca-rapida__valor { flex: 1 1 160px; }
.busca-rapida__quartos { flex: 1 1 130px; }
.busca-rapida__botao { flex: 1 1 140px; }
.busca-rapida__dicas { display: flex; flex-direction: column; gap: 4px; }
.busca-rapida__dicas [hidden] { display: none; }
/* No celular, os campos quebram em linhas, e a lista de faixas fica no fluxo, abaixo do campo (base.css), sem cobrir o
   botao Buscar: os campos de cada linha ficam alinhados pelo alto, para a lista aberta nao descer o campo vizinho. O
   botao, que nao tem rotulo, fica sempre sozinho na ultima linha, com o vao normal: o CSS nao sabe quando ele quebra de
   linha, e a margem que o punha na altura do campo vizinho sobrava quando ele ficava sozinho (36 px, e nao 12).
   O WhatsApp flutuante (base.css) so aparece quando a busca sai da tela e nenhum campo dela tem o foco (o base.js poe
   o data-livre): por cima da busca, ele cobria o Buscar e o campo do valor, e o toque abria a conversa em vez de
   buscar. Sem JavaScript, ele nao aparece na inicial do celular; o WhatsApp do cabecalho continua. */
@media (max-width: 59.99em) {
  .busca-rapida__campos { align-items: flex-start; }
  .busca-rapida__botao { flex-basis: 100%; }
  .whatsapp-flutuante:not([data-livre]) { display: none; }
}

/* --- Vitrines de aluguel e de venda --- */
.vitrine { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; }
.vitrine__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vitrine__cartoes { flex: 999 1 600px; min-width: 0; }
.vitrine__dica { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.vitrine__dica svg { margin-top: 1px; }
#novidades, #guias { display: flex; flex-direction: column; gap: 24px; }

/* --- Guias de bairro --- */
.guia-cartao {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px;
  color: var(--cor-texto); text-decoration: none;
}
.guia-cartao:hover { color: var(--cor-texto); box-shadow: var(--sombra-alta); }
.guia-cartao__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.guia-cartao__cabeca svg { color: var(--cor-primaria); }
.guia-cartao__resumo { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cor-texto-suave); }
.guia-cartao__ler { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--cor-primaria); }

/* --- Alugar sem fiador (Garantia Locaticia Creditas) --- */
.creditas {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 40px; padding: clamp(20px, 3.5vw, 44px);
  background: var(--cor-destaque-suave); border: 1px solid var(--cor-destaque); border-radius: var(--raio-medio);
}
.creditas__texto { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.creditas__abertura { max-width: 60ch; }
.creditas__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.creditas__lista li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.creditas__lista svg { margin-top: 2px; color: var(--cor-destaque-escura); }
.creditas__outras { font-size: 15px; }
.linha-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.creditas__exemplo { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.creditas__exemplo-cabeca { display: flex; flex-direction: column; gap: 4px; }
.creditas__exemplo-cabeca p { margin: 0; }
.creditas__contas { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.creditas__contas div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.creditas__contas dt { color: var(--cor-texto-suave); }
.creditas__contas dd { margin: 0; font-weight: 600; }
.creditas__contas .creditas__total { padding-top: 10px; border-top: 1px solid var(--cor-borda); }
.creditas__total dt { font-weight: 700; color: var(--cor-texto); }
.creditas__total dd { font-weight: 700; }
.creditas__renda { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); }
.creditas__renda p { margin: 0; }
.creditas__renda-rotulo { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--cor-texto-suave); }
.creditas__renda-valor { font-size: 20px; font-weight: 700; line-height: 1.2; }
.creditas__exemplo .link-seta { align-self: flex-start; }

/* --- Proprietarios (faixa branca) --- */
.proprietarios { margin-top: var(--entre-secoes); background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); border-bottom: 1px solid var(--cor-borda); }
.proprietarios__conteudo { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.proprietarios__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.proprietarios__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.proprietarios__lista {
  flex: 999 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px 24px;
}
.proprietarios__lista li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.proprietarios__lista h3 { margin-top: 4px; }
.proprietarios__lista p { font-size: 15px; }
.proprietarios__icone { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--cor-primaria); background: var(--cor-primaria-suave); border-radius: 12px; }

/* --- A Forte: nota, CRECI, atendimento e corretores --- */
#a-forte { display: flex; flex-direction: column; gap: 24px; }
.confianca { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.confianca__item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; }
.confianca__item p { font-size: 15px; }
.confianca__item > a { margin-top: auto; }
.confianca__cabeca { display: flex; align-items: center; gap: 10px; }
.confianca__cabeca svg { color: var(--cor-destaque-escura); }
.equipe { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 3vw, 32px); }
.equipe__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.equipe__cabeca > div { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.equipe__lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px 24px; }
.equipe__lista li { display: flex; align-items: center; gap: 12px; }
.equipe__dados { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.equipe__nome { font-size: 16px; font-weight: 600; line-height: 1.35; }

/* --- Velocidade no celular (Fase 5, 2026-10-20) ---
   As secoes abaixo do topo so sao desenhadas quando chegam perto da tela (content-visibility), e as fotos delas so
   carregam nessa hora: na abertura, a rede fica para a foto principal. contain-intrinsic-size reserva o espaco (o
   "auto" guarda a altura de verdade depois da primeira vez), para a pagina e a barra de rolagem nao pularem. */
.inicial-topo ~ .secao, .inicial-topo ~ .proprietarios { content-visibility: auto; contain-intrinsic-size: auto 720px; }