/* ============================================================
   Sistema de design — Exclusive iCasa
   Fonte: manual-marca.pdf (marca/assets/manual-marca.pdf)

   Este arquivo é a moldura comum a TODAS as landing pages:
   cores, tipografia, escala, e os componentes de estrutura.
   Cada LP herda tudo e só define o que é seu.

   Para dar cara ao empreendimento sem sair da marca, a LP
   redefine --ic-acento. O padrão é o dourado da própria iCasa.

   Alterou algo aqui? Rode ./sincronizar-marca.sh na raiz.
   ============================================================ */

:root {
  /* --- Cores da marca ---------------------------------------
     Do manual: preto, azul-marinho, cinza e branco. O dourado
     não consta na página de cores, mas é a cor do logotipo e o
     manual proíbe "logo cinza em fundo dourado" — ou seja, está
     em uso. Amostrado do próprio logo: #9C7E4E.
  ---------------------------------------------------------- */
  --ic-preto:    #000000;
  --ic-marinho:  #13182B;
  --ic-cinza:    #999999;
  --ic-branco:   #FFFFFF;
  --ic-ouro:     #9C7E4E;

  /* Dourado só atinge 3,8:1 sobre branco. Para texto pequeno em
     fundo claro, use a variante escura (5,9:1). */
  --ic-ouro-escuro: #7A6139;
  --ic-ouro-claro:  #C4A876;

  /* Acento da LP. Sobrescreva no style.css da página se o
     empreendimento pedir outra cor. */
  --ic-acento:        var(--ic-ouro);
  --ic-acento-escuro: var(--ic-ouro-escuro);
  /* Variante clara do acento, para acento sobre fundo escuro ou sobre foto:
     o dourado padrão só atinge 3,8:1 no branco e some no marinho. Uma LP que
     sobrescreva --ic-acento deve sobrescrever esta também. */
  --ic-acento-claro:  var(--ic-ouro-claro);

  /* --- Superfícies e texto ---------------------------------- */
  --ic-papel:    #F7F8FA;
  --ic-papel-2:  #EEF0F4;
  --ic-linha:    #DCDEE4;
  --ic-linha-forte: var(--ic-cinza);

  --ic-texto:    #13182B;
  --ic-texto-2:  #4A5163;
  --ic-texto-3:  #6B7284;

  --ic-sobre-escuro:       #EDEFF3;
  --ic-sobre-escuro-suave: #A8AEBE;

  /* --- Tipografia -------------------------------------------
     Raleway nos títulos, Montserrat no corpo. Do manual, p.11.
  ---------------------------------------------------------- */
  --ic-fonte-titulo: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --ic-fonte-texto:  "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* --- Escala ----------------------------------------------- */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e6: 1.5rem;  --e8: 2rem;    --e12: 3rem;   --e16: 4rem;
  --e20: 5rem;   --e28: 7rem;

  --ic-largura: 1120px;
  --ic-largura-texto: 34rem;
  --ic-raio: 2px;
  --ic-sombra: 0 1px 2px rgba(19,24,43,.05), 0 12px 32px rgba(19,24,43,.10);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ic-fonte-texto);
  color: var(--ic-texto);
  background: var(--ic-papel);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--ic-acento); outline-offset: 3px; }

/* Pula a barra fixa e vai direto ao conteúdo. Só aparece no teclado. */
.pular {
  position: absolute;
  left: var(--e4); top: var(--e4);
  z-index: 60;
  transform: translateY(-200%);
  background: var(--ic-branco);
  color: var(--ic-marinho);
  font-family: var(--ic-fonte-titulo);
  font-weight: 600; font-size: .9rem;
  padding: var(--e3) var(--e4);
  border-radius: var(--ic-raio);
  text-decoration: none;
}
.pular:focus { transform: translateY(0); }

/* ============================================================
   Estrutura
   ============================================================ */
.envolve {
  width: 100%;
  max-width: var(--ic-largura);
  margin-inline: auto;
  padding-inline: var(--e6);
}

.faixa { padding-block: var(--e28); }
.faixa-escura { background: var(--ic-marinho); color: var(--ic-sobre-escuro); }
.faixa-alt    { background: var(--ic-papel-2); }

.cabeca-secao { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e12); }

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e8) var(--e6);
}

.rolagem { overflow-x: auto; }

/* ============================================================
   Tipografia
   ============================================================ */
h1, h2, h3 { font-family: var(--ic-fonte-titulo); letter-spacing: -.01em; text-wrap: balance; }

h1 {
  font-weight: 700;
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.022em;
}
h2 {
  font-weight: 600;
  font-size: clamp(1.65rem, 3.3vw, 2.4rem);
  line-height: 1.12;
}
h3 { font-weight: 600; font-size: 1.1rem; line-height: 1.28; }

.sobretitulo {
  font-family: var(--ic-fonte-titulo);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ic-acento-escuro);
}
.faixa-escura .sobretitulo { color: var(--ic-acento); }

.conduz { font-size: 1.05rem; color: var(--ic-texto-2); max-width: var(--ic-largura-texto); }
.faixa-escura .conduz { color: var(--ic-sobre-escuro-suave); }

/* ============================================================
   Botões
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--ic-fonte-titulo);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: var(--e3) var(--e6);
  border: 1px solid transparent;
  border-radius: var(--ic-raio);
  background: var(--ic-acento);
  color: var(--ic-marinho);
  cursor: pointer;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--ic-acento-escuro); color: var(--ic-branco); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }

.btn-vazado { background: transparent; border-color: currentColor; color: inherit; }
.btn-vazado:hover { background: rgba(255,255,255,.08); color: inherit; }

.btn-largo { width: 100%; padding-block: var(--e4); }

/* ============================================================
   Barra da corretora
   ============================================================ */
.barra {
  position: sticky; top: 0; z-index: 40;
  background: rgba(19,24,43,.95);
  backdrop-filter: blur(10px);
  color: var(--ic-sobre-escuro);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.barra-int {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding-block: var(--e3);
}
.barra-marca { display: flex; align-items: center; gap: var(--e4); }
.barra-marca img { height: 30px; width: auto; }
.barra-papel {
  font-family: var(--ic-fonte-titulo);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ic-sobre-escuro-suave);
  border-left: 1px solid rgba(255,255,255,.24);
  padding-left: var(--e4);
}

/* ============================================================
   Números
   ============================================================ */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e8) var(--e6);
}
.numero { display: flex; flex-direction: column; gap: var(--e1); }
.numero .cifra {
  font-family: var(--ic-fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ic-acento-escuro);
}
.faixa-escura .numero .cifra { color: var(--ic-acento); }
.numero .rotulo { font-size: .86rem; color: var(--ic-texto-2); max-width: 15rem; }
.faixa-escura .numero .rotulo { color: var(--ic-sobre-escuro-suave); }

/* ============================================================
   Itens de lista
   ============================================================ */
.item { display: flex; flex-direction: column; gap: var(--e2); }
.item h3 { color: var(--ic-marinho); }
.faixa-escura .item h3 { color: var(--ic-branco); }
.item p { font-size: .93rem; color: var(--ic-texto-2); }
.faixa-escura .item p { color: var(--ic-sobre-escuro-suave); }
.item-regua { padding-top: var(--e4); border-top: 2px solid var(--ic-acento); }

/* ============================================================
   Vitrine de imagens
   ============================================================ */
.vitrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--e4); }
.vitrine figure { display: flex; flex-direction: column; gap: var(--e3); }
.vitrine img {
  width: 100%;
  height: auto;          /* a proporção vem do arquivo, não do CSS */
  border-radius: var(--ic-raio);
  /* Sem object-fit: cover. Recorte automático já cortou texto
     impresso em render antes — o arquivo deve chegar aqui pronto,
     no enquadramento que se quer mostrar. */
}
.vitrine figcaption {
  font-family: var(--ic-fonte-titulo);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ic-texto-3);
}
/* Descrição da imagem como texto de verdade — nunca embutida no
   arquivo. Texto em imagem não é lido, nem indexado, nem sobrevive
   a um recorte. */
.vitrine figure p { font-size: .9rem; color: var(--ic-texto-2); }
.faixa-escura .vitrine figure p { color: var(--ic-sobre-escuro-suave); }
.faixa-escura .vitrine figcaption { color: var(--ic-sobre-escuro-suave); }

/* ============================================================
   Faixa de imagem de largura total
   Corta a página inteira e serve de respiro entre blocos de texto.
   ============================================================ */
.faixa-imagem {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: clamp(24rem, 58vw, 42rem);
  align-content: end;
  overflow: hidden;
  background: var(--ic-marinho);
}
.faixa-imagem img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Aqui `cover` é intencional: a faixa tem altura fixa e a imagem
     não carrega texto impresso. Diferente da vitrine, onde o
     recorte automático já cortou conteúdo. */
  object-fit: cover;
  z-index: -2;
}
/* Véu que garante leitura do texto sobre qualquer trecho da foto. */
.faixa-imagem::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(19,24,43,.90) 0%, rgba(19,24,43,.60) 28%, rgba(19,24,43,.06) 66%);
  z-index: -1;
}
.faixa-imagem-texto {
  padding-block: var(--e12);
  display: flex; flex-direction: column; gap: var(--e3);
  color: var(--ic-sobre-escuro);
  max-width: 40rem;
}
.faixa-imagem-texto .sobretitulo { color: var(--ic-acento); }
.faixa-imagem-texto h2 { color: var(--ic-branco); }
.faixa-imagem-texto p { color: var(--ic-sobre-escuro); font-size: 1.05rem; }
.faixa-imagem-credito {
  font-family: var(--ic-fonte-titulo);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ic-sobre-escuro-suave);
}

/* ============================================================
   Mosaico de imagens
   A primeira ocupa a linha inteira; as demais vêm aos pares.
   ============================================================ */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
}
.mosaico > figure:first-child { grid-column: 1 / -1; }
/* As figuras emparelhadas só alinham se os ARQUIVOS tiverem a mesma
   proporção — aqui não há recorte para forçar altura. Padrão: 3:2
   nas pares, mais largo na primeira. E declare width/height reais
   no HTML, senão a caixa nasce torta antes de a imagem carregar. */
.mosaico figure { display: flex; flex-direction: column; gap: var(--e3); margin: 0; }
.mosaico img { width: 100%; height: auto; border-radius: var(--ic-raio); }
.mosaico figcaption {
  font-family: var(--ic-fonte-titulo);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ic-texto-3);
}
.faixa-escura .mosaico figcaption { color: var(--ic-sobre-escuro-suave); }
.mosaico figure p { font-size: .88rem; color: var(--ic-texto-2); }
.faixa-escura .mosaico figure p { color: var(--ic-sobre-escuro-suave); }

@media (max-width: 44rem) {
  .mosaico { grid-template-columns: 1fr; }
}

/* ============================================================
   Formulário
   ============================================================ */
.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: var(--e16);
  align-items: start;
}
.ficha {
  background: var(--ic-branco);
  color: var(--ic-texto);
  border-radius: var(--ic-raio);
  padding: var(--e8);
  box-shadow: var(--ic-sombra);
  scroll-margin-top: 5rem;
}
.ficha h2 { font-size: 1.45rem; color: var(--ic-marinho); }
.ficha .conduz { font-size: .9rem; margin-top: var(--e2); margin-bottom: var(--e6); color: var(--ic-texto-2); }

.campo { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.campo > span { font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.campo em { font-style: normal; font-weight: 400; color: var(--ic-texto-3); }
.campo input, .campo select {
  font: inherit; font-size: .93rem;
  padding: var(--e3);
  border: 1px solid var(--ic-linha);
  border-radius: var(--ic-raio);
  background: var(--ic-papel);
  color: inherit;
  width: 100%;
}
.campo select { cursor: pointer; }

.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erro-form { color: #A6301F; font-size: .84rem; min-height: 1.4em; margin-bottom: var(--e2); }
.aviso-form { font-size: .72rem; color: var(--ic-texto-3); text-align: center; margin-top: var(--e3); }

/* ============================================================
   Rodapé
   ============================================================ */
.rodape { background: var(--ic-preto); color: rgba(255,255,255,.62); padding-block: var(--e12); font-size: .84rem; }
.rodape-int { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e6); }
.rodape strong { color: var(--ic-branco); font-weight: 600; }
.rodape-nota { font-size: .74rem; max-width: 32rem; }

/* ============================================================
   Ação fixa no celular
   ============================================================ */
.flutua {
  display: none;
  position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4);
  z-index: 50;
  width: auto;   /* left+right já definem a largura */
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 60rem) {
  .contato-grade { grid-template-columns: 1fr; gap: var(--e8); }
  .faixa { padding-block: var(--e16); }
  .cabeca-secao { margin-bottom: var(--e8); }
}

@media (max-width: 40rem) {
  .flutua { display: block; }
  body { padding-bottom: 5rem; }
  .barra-papel { display: none; }
  /* O botão flutuante já cobre a ação; manter os dois faz o CTA
     da barra quebrar em duas linhas e engolir o topo. */
  .barra .btn { display: none; }
  .barra-int { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}