/* =====================================================================
   BK INCORPORADORA
   Paleta oficial (Identidade visual/coresBK.pdf):
   #1d1717 tinta · #606b63 cinza-esverdeado · #b8a99b taupe · #efeded claro
   ===================================================================== */

:root{
  --tinta:    #1d1717;
  --tinta-2:  #2e2727;
  --tinta-3:  #57504e;
  --cinza:    #606b63;
  --cinza-cl: #8a938c;
  --taupe:    #b8a99b;
  --taupe-cl: #d3c8bf;
  --taupe-hero: #e2d8cf;   /* taupe clareado: o normal some sobre a foto */
  --claro:    #efeded;
  --claro-2:  #e7e3e0;
  --branco:   #ffffff;

  --linha:    rgba(29,23,23,.10);
  --linha-2:  rgba(29,23,23,.16);
  --linha-cl: rgba(239,237,237,.14);

  --raio:     18px;
  --raio-sm:  10px;
  --raio-xs:  6px;

  /* uma sombra só, quase imperceptível: quem separa os blocos é a linha fina */
  --sombra:   0 1px 2px rgba(29,23,23,.04), 0 14px 34px -16px rgba(29,23,23,.18);
  --sombra-2: 0 2px 6px rgba(29,23,23,.05), 0 28px 60px -24px rgba(29,23,23,.30);

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

  --mola:  cubic-bezier(.22,.68,.24,1);
  --mola2: cubic-bezier(.16,1,.3,1);
  --suave:    cubic-bezier(.32,.06,.12,1);  /* abertura: entra devagar e assenta sem freada */
  --desenho:  cubic-bezier(.55,.02,.30,1);  /* traço da prancheta */
  --dissolve: cubic-bezier(.42,0,.32,1);    /* cruzamento longo entre as camadas */
  --topo-h: 72px;
  --secao:  clamp(4.5rem, 10vw, 8.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topo-h) + 16px); }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--claro);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.travado{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }

.container{ width:min(1200px, 88vw); margin-inline:auto; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0 0 .5em; }
h1,h2{ letter-spacing:-.028em; line-height:1.06; }
h2{ font-size:clamp(1.95rem, 4vw, 3.05rem); }
h3{ font-size:1.15rem; letter-spacing:-.012em; line-height:1.3; }

/* olho-de-texto: risquinho + rótulo, marca editorial do site */
.olho{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.25rem; font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cinza);
}
.olho::before{ content:""; width:26px; height:1px; background:var(--taupe); flex:none; }
.escura .olho{ color:var(--taupe); }
.hero-txt .olho{ color:var(--taupe-hero); }

.lead{ font-size:clamp(1.02rem,1.35vw,1.15rem); color:var(--tinta-3); max-width:56ch; }

/* ============ reveal ao rolar ============ */
.rv{
  opacity:0; transform:translate3d(0,20px,0);
  transition:opacity .8s var(--mola), transform .8s var(--mola);
  transition-delay:var(--atraso, 0ms);
}
.rv.vis{ opacity:1; transform:none; }

/* ============ botões ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.75rem; border-radius:999px; border:1px solid transparent;
  font-size:.92rem; font-weight:600; letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  transition:transform .4s var(--mola), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primario{ background:var(--tinta); color:var(--claro); }
.btn-primario:hover{ background:#000; }
.btn-linha{ border-color:var(--linha-2); color:inherit; background:transparent; }
.btn-linha:hover{ background:var(--tinta); border-color:var(--tinta); color:var(--claro); }
.btn-claro{ background:var(--claro); color:var(--tinta); }
.btn-claro:hover{ background:#fff; }
.escura .btn-linha{ border-color:var(--linha-cl); }
.escura .btn-linha:hover{ background:var(--claro); border-color:var(--claro); color:var(--tinta); }
.btn-bloco{ width:100%; }

/* seta que estica no hover */
.seta{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:.9rem; text-decoration:none; }
.seta i{ display:block; width:20px; height:1px; background:currentColor; transition:width .45s var(--mola); }
a:hover .seta i,.seta:hover i{ width:34px; }

/* ============ cabeçalho ============ */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--topo-h);
  display:flex; align-items:center;
  background:rgba(239,237,237,.88);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--mola), background .4s var(--mola), transform .45s var(--mola);
}
.topo-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(1200px,88vw); margin-inline:auto; }
.topo.solido{ background:rgba(239,237,237,.94); border-bottom-color:var(--linha); }
.topo.escondido{ transform:translateY(-100%); }

.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--tinta); }
.marca img{ width:36px; height:36px; object-fit:contain; transition:transform .6s var(--mola2); }
.marca:hover img{ transform:rotate(-5deg); }
.marca-txt{ display:flex; flex-direction:column; line-height:1.05; }
.marca-txt strong{ font-family:var(--serif); font-size:1.2rem; letter-spacing:.06em; font-weight:600; }
.marca-txt em{ font-style:normal; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cinza); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ text-decoration:none; font-size:.9rem; font-weight:500; color:var(--tinta-3); position:relative; transition:color .3s ease; }
.nav a:hover{ color:var(--tinta); }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--tinta); transition:right .4s var(--mola); }
.nav a:hover::after{ right:0; }
.nav .nav-zap{ background:var(--tinta); color:var(--claro); padding:.55rem 1.25rem; border-radius:999px; font-weight:600; }
.nav .nav-zap:hover{ background:#000; color:var(--claro); }
.nav .nav-zap::after{ display:none; }

.menu-btn{ display:none; width:42px; height:42px; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0; }
.menu-btn span{ height:1.5px; background:var(--tinta); border-radius:2px; transition:.3s var(--mola); }
.menu-btn.x span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn.x span:nth-child(2){ opacity:0; }
.menu-btn.x span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* =====================================================================
   HERO — "o drone entra na projeção"
   ===================================================================== */
.hero{
  position:relative; overflow:hidden;
  /* a barra fica fora de cena aqui, então a foto ocupa a tela inteira */
  min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--tinta);
  isolation:isolate;
}

.hero-camada{
  position:absolute; inset:-2%;
  background-size:cover; background-position:center;
  opacity:0; will-change:transform, opacity; z-index:0;
}
.hero-malha{
  position:absolute; inset:0; z-index:1; opacity:0;
  background-image:
    linear-gradient(rgba(184,169,155,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,169,155,.14) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 76%);
}
.hero-tracado{ position:absolute; inset:0; width:100%; height:100%; z-index:2; opacity:0; pointer-events:none; }
.hero-tracado path,.hero-tracado circle{ stroke:var(--taupe); fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.hero-tracado .grosso{ stroke-width:2.2; stroke:#e8ded4; }
.hero-tracado .no{ fill:var(--taupe); stroke:none; }
.hero-tracado .cota{ stroke:rgba(184,169,155,.45); stroke-dasharray:5 7; }

.hero-reticulo{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; }
.hero-reticulo i{ position:absolute; width:42px; height:42px; border:1.5px solid rgba(239,237,237,.7); }
.hero-reticulo i:nth-child(1){ top:15%; left:9%;  border-right:0; border-bottom:0; }
.hero-reticulo i:nth-child(2){ top:15%; right:9%; border-left:0;  border-bottom:0; }
.hero-reticulo i:nth-child(3){ bottom:15%; left:9%;  border-right:0; border-top:0; }
.hero-reticulo i:nth-child(4){ bottom:15%; right:9%; border-left:0;  border-top:0; }

/* Véu em duas camadas: uma sobe do rodapé, outra vem da esquerda por trás do
   texto. Medido sobre a foto: nenhum texto do header fica abaixo de 5,4:1 de
   contraste, e a casa continua clara do centro para a direita. */
.hero-veu{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(18,14,14,.52) 0%, rgba(18,14,14,.32) 42%,
      rgba(18,14,14,.07) 72%, rgba(18,14,14,0) 100%),
    linear-gradient(to top,
      rgba(18,14,14,.86) 0%,  rgba(18,14,14,.66) 30%,
      rgba(18,14,14,.38) 56%, rgba(18,14,14,.16) 82%,
      rgba(18,14,14,.30) 100%);
}

/* o padding de cima garante que o texto nunca encoste na barra do navegador,
   mesmo em janela baixa (notebook com barra de favoritos, fora do F11) */
.hero-txt{
  position:relative; z-index:5; color:var(--claro);
  padding:calc(var(--topo-h) + 1.4rem) 0 clamp(2.5rem,7vh,5rem);
  width:min(1200px,88vw); margin-inline:auto;
}
.hero h1{ font-size:clamp(2.7rem, 7.4vw, 5.6rem); line-height:1.02; margin:0 0 1.3rem; color:var(--claro); max-width:15ch; }
.hero h1 .l{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero h1 .l > span{ display:block; }
.hero h1 em{ font-style:normal; color:var(--taupe-hero); }
.hero-sub{ max-width:44ch; color:rgba(239,237,237,.88); font-size:clamp(1rem,1.4vw,1.12rem); margin:0 0 2.3rem; }

/* sombra discreta: reforça a leitura sem precisar escurecer mais a foto */
.hero-txt .olho,.hero h1,.hero-sub{ text-shadow:0 1px 16px rgba(12,9,9,.55); }
.hero-acoes{ display:flex; flex-wrap:wrap; gap:.7rem; }
.hero-acoes .btn-linha{ color:var(--claro); border-color:rgba(239,237,237,.3); }
.hero-acoes .btn-linha:hover{ background:var(--claro); border-color:var(--claro); color:var(--tinta); }

.hero-ficha{
  list-style:none; display:flex; flex-wrap:wrap; margin:2.8rem 0 0; padding:0;
  border-top:1px solid var(--linha-cl);
}
.hero-ficha li{ display:flex; flex-direction:column; padding:1.4rem clamp(1.4rem,3vw,2.6rem) 0 0; }
.hero-ficha li + li{ padding-left:clamp(1.4rem,3vw,2.6rem); border-left:1px solid var(--linha-cl); margin-top:1.4rem; padding-top:0; }
.hero-ficha b{ font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--claro); line-height:1.2; }
.hero-ficha span{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe-hero); margin-top:.3rem; }

.hero-scroll{
  position:absolute; z-index:5; bottom:1.5rem; right:max(6vw,1.5rem);
  display:flex; align-items:center; gap:.7rem; opacity:0;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(239,237,237,.5);
}
.hero-scroll i{ display:block; width:1px; height:42px; background:rgba(239,237,237,.2); position:relative; overflow:hidden; }
.hero-scroll i::after{ content:""; position:absolute; inset:0; background:var(--taupe); animation:desce 2.4s var(--mola) infinite; }
@keyframes desce{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* ---------------------------------------------------------------------
   A ABERTURA — 5,4 s
   traço técnico → render frontal (cinza) → o drone gira e a cor entra
   → obra entregue. O título chega da direita atrás de um degradê.
   --------------------------------------------------------------------- */
/* 5 s em dois tempos: o projeto se desenha, depois vira a casa construída */
.hero.roda .hero-malha    { animation:surge 1.1s ease forwards .1s; }
.hero.roda .hero-tracado  { animation:tracadoEntra 3.4s var(--suave) forwards .2s; }
.hero.roda .hero-tracado .risco{ animation:desenha 2.15s var(--desenho) forwards .25s; }
.hero.roda .hero-reticulo { animation:reticulo 2.4s var(--suave) forwards .8s; }
.hero.roda .hero-foto     { animation:fotoEntra 2.2s var(--dissolve) forwards 2.45s; }
.hero.roda .hero-txt .an  { animation:revelaDireita .95s var(--suave) both; animation-delay:var(--atraso,3.5s); }
.hero.roda .hero-scroll   { animation:surge 1.1s ease forwards 5.3s; }

.hero-tracado .risco{ stroke-dasharray:var(--d,1400); stroke-dashoffset:var(--d,1400); }

/* o título chega da direita atrás de um degradê de opacidade */
.hero-txt .an{
  -webkit-mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.35) 68%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.35) 68%,transparent 96%);
  -webkit-mask-size:260% 100%; mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

@keyframes desenha{ to{ stroke-dashoffset:0; } }
@keyframes surge{ to{ opacity:1; } }

@keyframes revelaDireita{
  0%  { opacity:0; transform:translate3d(90px,0,0); filter:blur(7px);
        -webkit-mask-position:118% 0; mask-position:118% 0; }
  55% { opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:none; filter:blur(0);
        -webkit-mask-position:0% 0; mask-position:0% 0; }
}

/* o desenho fica em cena o tempo de ser lido e só então dissolve, devagar */
@keyframes tracadoEntra{
  0%  { opacity:0; transform:scale(1.045); }
  11% { opacity:1; }
  55% { opacity:1; }            /* segura o traço pronto sobre o preto */
  72% { opacity:.72; }
  88% { opacity:.28; }
  100%{ opacity:0; transform:scale(1); }
}
@keyframes reticulo{
  0%  { opacity:0; transform:scale(1.26); }
  28% { opacity:.75; }
  100%{ opacity:0; transform:scale(.96); }
}
/* a casa sobe do escuro em preto e branco e vai ganhando cor no caminho */
@keyframes fotoEntra{
  0%  { opacity:0; transform:scale(1.11); filter:grayscale(1) contrast(1.1) brightness(.55); }
  26% { opacity:.38; filter:grayscale(1) contrast(1.08) brightness(.70); }
  58% { opacity:.82; filter:grayscale(.55) contrast(1.03) brightness(.87); }
  100%{ opacity:1; transform:scale(1.02); filter:grayscale(0) contrast(1) brightness(1); }
}

.hero-foto{ transform-origin:50% 45%; }
.hero.pronto .hero-foto{ transform:translate3d(0, var(--deslize,0px), 0) scale(var(--zoom,1.02)); transition:none; }

/* ============ seções ============ */
.secao{ padding:var(--secao) 0; position:relative; }
.secao + .secao:not(.escura){ border-top:1px solid var(--linha); }
.secao-cab{ max-width:60ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.secao-cab h2{ margin-bottom:.5em; }
.secao-cab p{ margin:0; font-size:clamp(1.02rem,1.35vw,1.15rem); color:var(--tinta-3); }
.escura{ background:var(--tinta); color:var(--claro); }
.escura h2,.escura h3{ color:var(--claro); }
.escura p,.escura .lead{ color:rgba(239,237,237,.7); }

/* ============ cards ============ */
.grade{ display:grid; gap:clamp(1.5rem,3vw,2.2rem); grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); }

.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  text-decoration:none; color:inherit;
  transition:transform .6s var(--mola), box-shadow .6s var(--mola), border-color .4s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sombra-2); border-color:transparent; }

.card-foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--claro-2); }
.card-foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--mola); }
.card:hover .card-foto img{ transform:scale(1.04); }

.selo{
  position:absolute; z-index:2; top:1rem; left:1rem;
  padding:.4rem .85rem; border-radius:999px;
  font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:rgba(255,255,255,.94); color:var(--tinta); backdrop-filter:blur(8px);
}
.selo-video{ left:auto; right:1rem; display:inline-flex; align-items:center; gap:.35rem; }
.selo-video svg{ width:9px; height:9px; }

.card-corpo{ padding:1.6rem 1.7rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.card-olho{
  margin:0 0 .7rem; font-size:.64rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cinza);
}
.card-corpo h3{ font-size:1.55rem; margin:0 0 .35rem; }
.card-emp{ margin:0 0 1.1rem; font-size:.92rem; color:var(--tinta-3); }
/* etiqueta do lote — o cliente identifica a unidade pelo número, tem de saltar */
.card-lote{
  display:inline-block; margin-left:.5rem; padding:.18rem .55rem; border-radius:999px;
  background:var(--claro-2); border:1px solid var(--linha-2);
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinta); white-space:nowrap; vertical-align:.08em;
}
.card-preco{ margin:0; font-family:var(--serif); font-size:1.5rem; letter-spacing:-.02em; }

.card-ficha{
  list-style:none; display:flex; flex-wrap:wrap; margin:1.3rem 0 1.4rem; padding:1.2rem 0 0;
  border-top:1px solid var(--linha);
}
.card-ficha li{ display:flex; flex-direction:column; padding-right:1.6rem; }
.card-ficha li + li{ padding-left:1.6rem; border-left:1px solid var(--linha); }
.card-ficha b{ font-size:.95rem; font-weight:600; }
.card-ficha span{ font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cinza); margin-top:.15rem; }
.card .seta{ margin-top:auto; color:var(--tinta); }

/* ============ comparador projeto x obra ============ */
.projeto-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.antes-depois{
  position:relative; border-radius:var(--raio); overflow:hidden;
  aspect-ratio:16/10; background:var(--tinta-2); cursor:ew-resize; touch-action:none;
  /* sem isso, arrastar pinta a imagem e as legendas de azul (seleção do texto) */
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.antes-depois *{ user-select:none; -webkit-user-select:none; }
.antes-depois img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-user-drag:none; pointer-events:none;
}
.antes-depois ::selection{ background:transparent; }
.antes-depois .depois{ clip-path:inset(0 0 0 var(--corte,50%)); }
.ad-alca{ position:absolute; top:0; bottom:0; left:var(--corte,50%); width:1.5px; background:var(--claro); z-index:3; }
.ad-alca::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--claro);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  background-image:linear-gradient(90deg, transparent 42%, var(--tinta) 42%, var(--tinta) 44%, transparent 44%, transparent 56%, var(--tinta) 56%, var(--tinta) 58%, transparent 58%);
}
.ad-tag{
  position:absolute; z-index:4; bottom:1rem; padding:.38rem .85rem; border-radius:999px;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(29,23,23,.6); color:var(--claro); backdrop-filter:blur(8px);
}
.ad-tag.esq{ left:1rem; } .ad-tag.dir{ right:1rem; }

/* ============ sobre ============ */
.sobre-grid{ display:grid; grid-template-columns:1.25fr .8fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.lista-tracos{ list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:.75rem; }
.lista-tracos li{ position:relative; padding-left:1.7rem; color:var(--tinta-3); }
.lista-tracos li::before{ content:""; position:absolute; left:0; top:.82em; width:11px; height:1px; background:var(--taupe); }
.escura .lista-tracos li{ color:rgba(239,237,237,.72); }

.cartao-resp{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:2.2rem 1.9rem; text-align:center;
}
/* quadro de cantos arredondados: a foto aparece inteira, sem corte e sem
   preenchimento — o quadro acompanha a proporção da própria imagem */
.resp-avatar{
  width:min(230px, 78%); margin:0 auto 1.5rem;
  border-radius:14px; overflow:hidden;
  background:var(--claro-2); color:var(--tinta);
  display:grid; place-items:center; min-height:120px;
  font-family:var(--serif); font-size:2.4rem;
}
.resp-avatar .principal{ width:100%; height:auto; display:block; }
.resp-avatar .fundo{ display:none; }   /* não é mais preciso */
.cartao-resp h3{ font-size:1.15rem; margin:0 0 .3rem; }
.resp-cargo{ font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--cinza); margin:0 0 1.4rem; }
.resp-txt{ font-family:var(--serif); font-size:1.08rem; line-height:1.55; color:var(--tinta-3); margin:0 0 1.8rem; }

/* ============ contato ============ */
.contato-grid{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contatos{ list-style:none; padding:0; margin:2.4rem 0 0; display:grid; gap:1.5rem; }
.contatos li{ display:flex; gap:1rem; align-items:flex-start; }
.contatos svg{ width:17px; height:17px; flex:none; margin-top:.42rem; color:var(--taupe); stroke-width:1.5; }
.contatos b{ display:block; font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--cinza); font-weight:600; margin-bottom:.05rem; }
.contatos a{ text-decoration:none; border-bottom:1px solid var(--linha-2); transition:border-color .3s ease; }
.contatos a:hover{ border-bottom-color:var(--tinta); }

.form{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:2rem; display:grid; gap:1.1rem; }
.form-nota{ margin:0; font-size:.78rem; color:var(--cinza); }
.form label{ display:grid; gap:.4rem; font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--cinza); font-weight:600; }
.form input,.form select,.form textarea{
  font-family:inherit; font-size:.97rem; color:var(--tinta); font-weight:400; letter-spacing:normal; text-transform:none;
  padding:.82rem .95rem; border:1px solid var(--linha); border-radius:var(--raio-sm); background:var(--claro); width:100%; resize:vertical;
  transition:border-color .3s ease, background .3s ease;
}
.form :is(input,select,textarea):focus{ outline:none; border-color:var(--cinza); background:var(--branco); }

/* ============ rodapé ============ */
.rodape{ background:var(--tinta); color:var(--claro); padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; }
.rodape-inner{ display:flex; flex-wrap:wrap; gap:1.8rem 2rem; justify-content:space-between; align-items:center; }
.rodape-marca{ display:flex; align-items:center; gap:.9rem; }
.rodape-marca img{ width:42px; height:42px; object-fit:contain; }
.rodape-marca p{ margin:0; font-family:var(--serif); font-size:1.05rem; }
.rodape-marca small{ display:block; font-family:var(--sans); font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--taupe); margin-top:.2rem; }
.rodape-min{ margin:0; font-size:.8rem; color:rgba(239,237,237,.5); }
.rodape-min a{ color:rgba(239,237,237,.5); text-decoration:none; border-bottom:1px solid rgba(239,237,237,.2); transition:color .3s ease; }
.rodape-min a:hover{ color:var(--claro); }

/* ============ WhatsApp flutuante ============ */
.zap-float{
  position:fixed; right:20px; bottom:20px; z-index:70; width:52px; height:52px; border-radius:50%;
  background:var(--tinta); color:var(--claro); display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(29,23,23,.28);
  transform:scale(0); transition:transform .55s var(--mola2), background .3s ease;
}
.zap-float.vis{ transform:scale(1); }
.zap-float:hover{ transform:scale(1.08); background:#25d366; }
.zap-float svg{ width:26px; height:26px; }

/* =====================================================================
   PÁGINA DO IMÓVEL
   ===================================================================== */
.im-topo{ padding:calc(var(--topo-h) + clamp(2.5rem,6vw,4.5rem)) 0 0; }
.voltar{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-size:.82rem; color:var(--cinza); margin-bottom:2rem; transition:gap .4s var(--mola), color .3s ease; }
.voltar:hover{ gap:.9rem; color:var(--tinta); }

.im-selos{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.im-selos .selo{
  position:static; background:transparent; border:1px solid var(--linha-2);
  color:var(--cinza); backdrop-filter:none;
}
.im-cab{ display:flex; flex-wrap:wrap; gap:1.8rem 2.5rem; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(2rem,4vw,3rem); }
.im-cab h1{ font-size:clamp(2.1rem,4.8vw,3.4rem); margin:0 0 .5rem; }
.im-local{ margin:0; color:var(--tinta-3); }
.im-preco{ text-align:right; }
.im-preco b{ display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-.02em; line-height:1.1; }
.im-preco span{ font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--cinza); }

/* ---- carrossel ---- */
.carro{ position:relative; }
.carro-trilho{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
}
.carro-trilho::-webkit-scrollbar{ display:none; }
.carro-item{
  position:relative; flex:0 0 min(900px, 84%); scroll-snap-align:center;
  aspect-ratio:16/10; border-radius:var(--raio); overflow:hidden; background:var(--tinta-2);
  cursor:zoom-in;
}
.carro-item .fundo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:blur(34px) brightness(.5); transform:scale(1.22);
}
.carro-item .principal,.carro-item video{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
}
.carro-item video{ cursor:default; }
.carro-item .play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; transition:opacity .4s var(--mola); }
.carro-item .play i{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--tinta);
  display:grid; place-items:center; font-style:normal;
}
.carro-item .play svg{ width:18px; height:18px; margin-left:3px; }
.carro-item.tocando .play{ opacity:0; }

.carro-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--linha);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); color:var(--tinta);
  cursor:pointer; display:grid; place-items:center;
  transition:transform .4s var(--mola), background .3s ease;
}
.carro-nav svg{ width:15px; height:15px; }
.carro-nav:hover{ transform:translateY(-50%) scale(1.08); background:#fff; }
.carro-prev{ left:14px; } .carro-next{ right:14px; }

.carro-linha{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  margin:1.2rem 0 1rem; font-size:.85rem; color:var(--tinta-3);
}
.carro-cont{ font-size:.75rem; letter-spacing:.14em; color:var(--cinza); white-space:nowrap; font-variant-numeric:tabular-nums; }
.miniaturas{ display:flex; gap:9px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.miniaturas::-webkit-scrollbar{ display:none; }
.mini{
  flex:0 0 68px; height:50px; border-radius:var(--raio-xs); overflow:hidden; border:0;
  padding:0; cursor:pointer; background:var(--claro-2); opacity:.4;
  transition:opacity .4s var(--mola), transform .4s var(--mola);
  position:relative;
}
.mini img{ width:100%; height:100%; object-fit:cover; }
.mini:hover{ opacity:.75; }
.mini.ativa{ opacity:1; }
.mini.ativa::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--tinta); }

/* ---- corpo ---- */
.im-grid{ display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.im-resumo{
  list-style:none; padding:0; margin:0 0 clamp(2.5rem,5vw,3.5rem);
  display:flex; flex-wrap:wrap; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
}
.im-resumo li{ display:flex; flex-direction:column; padding:1.3rem 2rem 1.3rem 0; }
.im-resumo li + li{ padding-left:2rem; border-left:1px solid var(--linha); }
.im-resumo b{ font-family:var(--serif); font-size:1.4rem; line-height:1.15; letter-spacing:-.02em; }
.im-resumo span{ font-size:.61rem; letter-spacing:.15em; text-transform:uppercase; color:var(--cinza); margin-top:.3rem; }

.itens{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem 2rem; }
.itens li{ position:relative; padding-left:1.5rem; color:var(--tinta-3); }
.itens li::before{ content:""; position:absolute; left:0; top:.78em; width:5px; height:5px; border-radius:50%; background:var(--taupe); }

.painel{
  position:sticky; top:calc(var(--topo-h) + 24px);
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:1.9rem; display:grid; gap:1.1rem;
}
.painel h3{ margin:0; }
.painel p{ margin:0; font-size:.88rem; color:var(--tinta-3); }
.painel .linha{ height:1px; background:var(--linha); }
.painel dl{ margin:0; display:grid; gap:.7rem; font-size:.87rem; }
.painel dl div{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.painel dt{ color:var(--cinza); white-space:nowrap; }
.painel dd{ margin:0; font-weight:600; text-align:right; }

.renders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; }
.renders figure{ margin:0; border-radius:var(--raio); overflow:hidden; background:var(--tinta-2); }
.renders img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform 1.1s var(--mola); }
.renders figure:hover img{ transform:scale(1.04); }

/* ---- lightbox ---- */
.lb{ position:fixed; inset:0; z-index:100; background:rgba(20,17,17,.97); display:flex; flex-direction:column; padding:1.2rem; opacity:0; transition:opacity .4s var(--mola); }
.lb[hidden]{ display:none; }
.lb.vis{ opacity:1; }
.lb-palco{ flex:1; display:grid; place-items:center; min-height:0; }
.lb-palco img,.lb-palco video{ max-width:100%; max-height:calc(100svh - 8rem); border-radius:var(--raio-sm); background:#000; }
.lb-fechar,.lb-nav{
  position:absolute; z-index:2; border:1px solid rgba(239,237,237,.18); background:rgba(239,237,237,.06);
  color:var(--claro); cursor:pointer; border-radius:50%; display:grid; place-items:center;
  transition:background .3s ease, transform .4s var(--mola);
}
.lb-fechar{ top:1.2rem; right:1.2rem; width:44px; height:44px; }
.lb-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; }
.lb-fechar svg,.lb-nav svg{ width:15px; height:15px; }
.lb-nav:hover{ transform:translateY(-50%) scale(1.08); }
.lb-prev{ left:1.2rem; } .lb-next{ right:1.2rem; }
.lb-fechar:hover,.lb-nav:hover{ background:rgba(239,237,237,.16); }
.lb-rodape{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center; color:rgba(239,237,237,.7); padding:1.1rem .4rem .1rem; font-size:.85rem; }
.lb-rodape #lbCont{ font-variant-numeric:tabular-nums; letter-spacing:.14em; font-size:.75rem; }

/* ---- janela baixa: o bloco do header encolhe para caber sem apertar ---- */
@media (max-height:800px){
  .hero h1{ font-size:clamp(2.1rem, 4.8vw, 3.5rem); margin-bottom:1rem; }
  .hero-sub{ font-size:1rem; margin-bottom:1.7rem; max-width:50ch; }
  .hero-ficha{ margin-top:1.9rem; padding-top:1.2rem; }
  .hero-ficha b{ font-size:1.2rem; }
  .hero-txt .olho{ margin-bottom:.9rem; }
}
@media (max-height:660px){
  .hero h1{ font-size:clamp(1.85rem, 4.2vw, 2.6rem); margin-bottom:.8rem; }
  .hero-sub{ font-size:.95rem; margin-bottom:1.3rem; }
  .hero-ficha{ margin-top:1.4rem; padding-top:.9rem; }
  .hero-ficha b{ font-size:1.05rem; }
  .hero-acoes .btn{ padding:.72rem 1.4rem; font-size:.88rem; }
}

/* ============ responsivo ============ */
@media (max-width:1000px){
  .sobre-grid,.contato-grid,.im-grid,.projeto-grid{ grid-template-columns:1fr; }
  .painel{ position:static; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .menu-btn{ display:flex; }
  .nav{
    position:fixed; top:var(--topo-h); left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(239,237,237,.98); backdrop-filter:blur(16px);
    padding:.5rem 6vw 1.6rem; box-shadow:0 24px 44px -20px rgba(29,23,23,.3);
  }
  .nav.aberto{ display:flex; animation:sobe .45s var(--mola); }
  .nav a{ color:var(--tinta-3); padding:1rem 0; border-bottom:1px solid var(--linha); }
  .nav a::after{ display:none; }
  .nav .nav-zap{ text-align:center; margin-top:1.1rem; border-bottom:0; }

  .hero-txt{ padding-top:3.2rem; }   /* no celular a folga do topo pode ser menor */
  /* no celular o texto sobe mais na tela: o véu precisa subir junto
     (medido: título em 5,0:1 — com o véu do desktop caía para 3,5:1) */
  .hero-veu{
    background:linear-gradient(to top,
      rgba(18,14,14,.90) 0%,  rgba(18,14,14,.78) 34%,
      rgba(18,14,14,.60) 62%, rgba(18,14,14,.50) 88%,
      rgba(18,14,14,.56) 100%);
  }
  .grade{ grid-template-columns:1fr; }
  .card-corpo{ padding:1.4rem 1.4rem 1.5rem; }
  .carro-item{ flex-basis:88%; aspect-ratio:4/5; }
  .carro-nav{ width:40px; height:40px; }
  .carro-prev{ left:10px; } .carro-next{ right:10px; }
  .im-cab{ align-items:flex-start; }
  .im-preco{ text-align:left; }
  .im-resumo li{ padding:1rem 1.4rem 1rem 0; }
  .im-resumo li + li{ padding-left:1.4rem; }
  .hero-ficha li{ padding-right:1.2rem; }
  .hero-ficha li + li{ padding-left:1.2rem; }
  .hero-reticulo i{ width:30px; height:30px; }
  .hero-scroll{ display:none; }
  .cartao-resp{ padding:1.9rem 1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
  .zap-float{ transform:scale(1); }

  /* EXCEÇÃO: a abertura é a assinatura do site e roda em todo computador,
     inclusive nos que estão com "reduzir movimento" ligado no Windows.
     Sem estas linhas ela era pulada e o visitante caía direto na foto. */
  .hero.roda .hero-malha    { animation:surge 1.1s ease forwards .1s !important; }
  .hero.roda .hero-tracado  { animation:tracadoEntra 3.4s var(--suave) forwards .2s !important; }
  .hero.roda .hero-tracado .risco{ animation:desenha 2.15s var(--desenho) forwards .25s !important; }
  .hero.roda .hero-reticulo { animation:reticulo 2.4s var(--suave) forwards .8s !important; }
  .hero.roda .hero-foto     { animation:fotoEntra 2.2s var(--dissolve) forwards 2.45s !important; }
  .hero.roda .hero-txt .an  { animation:revelaDireita .95s var(--suave) both !important;
                              animation-delay:var(--atraso,3.5s) !important; }
  .hero.roda .hero-scroll   { animation:surge 1.1s ease forwards 5.3s !important; }
}