/* =========================================================
   LP DIAMANTE — Casa Dom Imóveis
   Paleta oficial da marca (Kit de marca Casa Dom):
   creme #F7F1EA · dourado #BDA280 · azul claro #BAC8D1
   azul escuro #364D6F · cinza chumbo #606062
   ========================================================= */

:root{
  --ink:#0c1119;
  --panel:#121a26;
  --panel-2:#182233;
  --hairline:rgba(247,241,234,0.14);
  --hairline-strong:rgba(189,162,128,0.45);
  --creme:#F7F1EA;
  --creme-dim:rgba(247,241,234,0.66);
  --creme-faint:rgba(247,241,234,0.42);
  --gold:#BDA280;
  --gold-bright:#D8C39E;
  --azul-claro:#BAC8D1;
  --azul-escuro:#364D6F;

  /* vidro real: translúcido + blur SOBRE fotografia */
  --glass:rgba(14,20,30,0.52);
  --glass-strong:rgba(14,20,30,0.62);
  --glass-border:rgba(247,241,234,0.22);

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--creme);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

.facets{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 560px at 82% -8%, rgba(189,162,128,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 30%, rgba(54,77,111,0.35), transparent 60%);
}

/* ---------------- marca dentro da home ----------------
   Header removido a pedido do cliente; a logo passou para dentro do hero,
   acompanhada do CRECI (obrigatorio junto da logo pela norma do CRECI-PR). */
.hero-brand{display:flex; align-items:center; margin:0 0 28px;}
.hero-brand .chip{
  background:var(--creme); border-radius:8px; padding:14px 20px;
  display:inline-flex; align-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,0.38);
}
.hero-brand .chip img{height:36px; width:auto;}
@media (max-width:640px){
  .hero-brand .chip{padding:11px 15px;}
  .hero-brand .chip img{height:29px;}
}

/* ---------------- hero (foto de imóvel em tela cheia) ---------------- */
.hero{
  position:relative; z-index:2;
  min-height:min(80vh,720px);
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center 28%; background-repeat:no-repeat;
  background-color:var(--panel);
}
/* Veu calibrado: leve o bastante para a fotografia aparecer atras do texto,
   forte o bastante para manter contraste de leitura (min 4,4:1 / p5 11:1). */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(12,17,25,0.78) 0%, rgba(12,17,25,0.62) 34%, rgba(12,17,25,0.28) 66%, rgba(12,17,25,0.06) 100%),
    linear-gradient(0deg, rgba(12,17,25,0.72) 0%, rgba(12,17,25,0.10) 45%, rgba(12,17,25,0) 70%);
}
.hero-inner{position:relative; z-index:2; padding:130px 0 108px; width:100%;}
@media (max-width:900px){
  .hero{min-height:580px;}
  .hero-inner{padding:96px 0 86px;}
}
/* rede de seguranca de legibilidade nos pontos claros da fachada */
.hero-inner h1,
.hero-inner .lede{text-shadow:0 2px 18px rgba(8,12,18,0.75);}
.eyebrow{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:12px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold);}
h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(38px,5.4vw,64px);
  line-height:1.06; margin:0 0 24px; text-wrap:balance; color:var(--creme);
}
h1 em{font-style:italic; color:var(--gold-bright);}
.lede{font-size:18px; line-height:1.6; color:var(--creme-dim); max-width:46ch; margin:0 0 34px;}
.cta-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}

.btn-primary{
  appearance:none; border:1px solid var(--gold); background:var(--gold);
  color:#161009; font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; padding:16px 30px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  border-radius:999px;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{background:var(--gold-bright); transform:translateY(-1px);}

/* -------- barra de filtros: cápsula flutuante de vidro sobre o hero -------- */
.filterbar-shell{position:relative; z-index:6; margin-top:-38px; margin-bottom:64px;}
@media (max-width:640px){ .filterbar-shell{margin-top:-28px; margin-bottom:48px;} }
/* Painel CLARO flutuando sobre a foto — e o contraste que resolve o
   "filtro muito escondido"; barra escura sobre hero escuro sumia. */
.filterbar{
  position:relative;
  background:rgba(247,241,234,0.95);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:999px;
  box-shadow:0 26px 54px rgba(0,0,0,0.5);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  padding:15px 22px;
}
@media (max-width:640px){ .filterbar{border-radius:26px; padding:16px;} }
.filterbar .flabel{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:#6f6250; margin-right:6px; font-weight:600;
}
.chip-filter{
  appearance:none; cursor:pointer; background:transparent;
  border:1px solid rgba(54,77,111,0.32);
  color:#33404f; font-family:var(--sans); font-size:14px; font-weight:500;
  padding:10px 20px; border-radius:999px; transition:all .18s ease;
}
.chip-filter:hover{border-color:var(--azul-escuro); background:rgba(54,77,111,0.08); color:#1b2432;}
.chip-filter.active{
  background:var(--azul-escuro); border-color:var(--azul-escuro);
  color:var(--creme); font-weight:600;
}
.chip-filter:focus-visible{outline:2px solid var(--azul-escuro); outline-offset:2px;}

/* ---------------- cabeçalho de seção ---------------- */
section{position:relative; z-index:2;}
/* Titulo centralizado e por extenso (o cliente pediu para nao quebrar
   em 3 linhas alinhadas a lateral). */
.section-head{margin-bottom:38px; text-align:center;}
.section-head h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,3.2vw,36px);
  margin:0 auto; text-wrap:balance; max-width:none; line-height:1.18;
}
.section-kicker{font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin:0 0 10px;}

#lancamentos{padding:0 0 90px;}

/* -------- carrossel: cards full-bleed com painel de vidro (ref. cliente) -------- */
/* Formato TABLOIDE: grade de quadros organizados, sem rolagem horizontal. */
.carousel{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(266px, 1fr));
  gap:22px;
  padding:0;
}
@media (max-width:600px){
  .carousel{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;}
}

.card{
  height:404px;
  position:relative; overflow:hidden; border-radius:22px;
  text-decoration:none; color:inherit; display:block;
  background-color:var(--panel-2); background-size:cover; background-position:center;
  border:1px solid rgba(247,241,234,0.1);
  transition:transform .25s ease, box-shadow .25s ease;
}
@media (max-width:600px){ .card{height:378px;} }
.card:hover{transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,0.5);}
.card[hidden]{display:none;}
/* Scrim leve na faixa do painel: se fechar aqui, o backdrop-filter do
   painel nao tem foto para desfocar e o efeito glass deixa de existir. */
.card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,17,25,0.42) 0%, rgba(12,17,25,0.04) 30%, rgba(12,17,25,0.16) 62%, rgba(12,17,25,0.38) 100%);
}
.card-tags{position:absolute; top:14px; left:14px; z-index:3; display:flex; gap:6px; flex-wrap:wrap;}
.tag{
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);
  background:var(--azul-claro); padding:5px 10px; border-radius:999px; font-weight:700;
}
.tag.gold{background:var(--gold);}

/* o "efeito glass" pedido: painel translúcido com blur SOBRE a foto do imóvel */
.card-panel{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:16px; padding:15px 16px 14px;
  display:flex; flex-direction:column; gap:7px;
  text-shadow:0 1px 10px rgba(8,12,18,0.65);
}
.card-title{font-family:var(--serif); font-size:19px; margin:0; line-height:1.2; color:var(--creme);}
.card-loc{font-size:12px; color:var(--creme-dim); margin:0;}
.card-specs{
  font-size:12.5px; color:var(--azul-claro); margin:0; padding-top:9px;
  border-top:1px solid rgba(247,241,234,0.16); font-variant-numeric:tabular-nums;
}
.card-cta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:5px; font-size:11.5px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--gold-bright);
}
.card-arrow{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--gold); color:#161009;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; transition:background .18s ease, transform .18s ease;
}
.card:hover .card-arrow{background:var(--gold-bright); transform:translate(2px,-2px);}

/* setas de navegação embaixo à esquerda (igual referência) */
/* setas de navegacao removidas: o carrossel virou grade tabloide */

/* -------- autoridade: foto clara de fundo + card sobreposto (ref. cliente) -------- */
#autoridade{
  position:relative; z-index:2; margin-bottom:96px;
  background-size:cover; background-position:center 42%; background-repeat:no-repeat;
  background-color:var(--panel);
}
.authority-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(12,17,25,0.55) 0%, rgba(12,17,25,0.18) 42%, rgba(12,17,25,0.04) 100%);
}
.authority-panel{position:relative; z-index:2; padding:84px 0; display:flex;}
@media (max-width:820px){ .authority-panel{padding:56px 0;} }
.authority-card{
  background:var(--creme);
  color:#1b2029;
  border-radius:24px;
  padding:44px 46px;
  max-width:560px;
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
@media (max-width:820px){ .authority-card{padding:32px 26px; max-width:none;} }
.authority-card .kicker{
  font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:#8a7452; margin:0 0 14px;
}
.authority-card h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,38px);
  line-height:1.2; margin:0 0 20px; text-wrap:balance; color:#141a24;
}
.authority-card p{font-size:16px; line-height:1.72; margin:0 0 14px; color:#43505f;}
.authority-card p:last-child{margin-bottom:0;}

/* ---------------- formulário ---------------- */
#contato{padding:0 0 100px;}
.form-shell{
  background:var(--panel); border:1px solid rgba(189,162,128,0.28);
  border-radius:24px;
  padding:52px 56px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px;
}
@media (max-width:820px){ .form-shell{grid-template-columns:1fr; padding:36px 26px; gap:28px;} }
.form-shell h2{font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); margin:0 0 14px; text-wrap:balance;}
.form-shell .sub{font-size:14.5px; color:var(--creme-dim); line-height:1.6; margin:0;}
form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:7px;}
label{font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--creme-faint);}
input, select{
  background:rgba(247,241,234,0.04); border:1px solid var(--hairline-strong);
  color:var(--creme); font-family:var(--sans); font-size:15px; padding:13px 14px;
  border-radius:10px; outline:none; transition:border-color .18s ease, background .18s ease;
}
input::placeholder{color:var(--creme-faint);}
input:focus, select:focus{border-color:var(--gold-bright); background:rgba(247,241,234,0.07);}

/* A lista aberta do select e desenhada pelo sistema com fundo claro.
   Sem cor propria, as opcoes herdam o creme do campo e somem no branco.
   Por isso a opcao leva fundo claro + texto escuro explicitos. */
select option{
  background-color:#F7F1EA;
  color:#1b2432;
}
select option:checked{
  background-color:#364D6F;
  color:#F7F1EA;
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 15px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .row2{grid-template-columns:1fr;} }
.submit-row{margin-top:6px;}
.btn-submit{
  width:100%; appearance:none; border:1px solid var(--gold); background:var(--gold);
  color:#161009; font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; padding:16px 20px; cursor:pointer;
  border-radius:999px; transition:background .2s ease;
}
.btn-submit:hover{background:var(--gold-bright);}
.btn-submit:disabled{opacity:.7; cursor:default;}
.lgpd{font-size:11.5px; color:var(--creme-faint); line-height:1.5; margin:2px 0 0;}
.form-success{
  display:none; align-items:center; gap:12px; font-size:14px; color:var(--gold-bright);
  border:1px solid var(--gold); border-radius:12px; padding:14px 16px; margin-top:4px;
}
.form-success.show{display:flex;}
.form-error{
  display:none; align-items:center; gap:12px; font-size:14px; color:#e08a7d;
  border:1px solid #e08a7d; border-radius:12px; padding:14px 16px; margin-top:4px;
}
.form-error.show{display:flex;}

/* ---------------- rodapé ---------------- */
footer{border-top:1px solid var(--hairline); padding:44px 0 40px; position:relative; z-index:2;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap;}
.foot-brand{display:flex; align-items:center;}
.foot-brand .chip{background:var(--creme); padding:12px 17px; border-radius:8px; display:flex; align-items:center;}
.foot-brand .chip img{height:30px; width:auto;}
.foot-info{font-size:13.5px; color:var(--creme-dim); line-height:1.9; text-align:right;}
.foot-info a{text-decoration:none; color:var(--creme-dim); transition:color .18s ease;}
.foot-info a:hover{color:var(--gold-bright);}
@media (max-width:640px){ .foot-info{text-align:left;} .foot-grid{flex-direction:column;} }
.foot-legal{margin-top:26px; padding-top:20px; border-top:1px solid var(--hairline); font-size:11.5px; color:var(--creme-faint);}

/* ---------------- movimento ---------------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
}