/* =====================================================================
   CONSTRUTORA JARDINS · peças do site que não estavam no design system v1
   (componentes.css = copiado do design-system.html; tokens.css = cores/tipos)
   ===================================================================== */

html{scroll-behavior:smooth;scroll-padding-top:84px}
body{overflow-x:hidden}
.pular{position:absolute;left:-999px;top:8px;background:var(--cor-verde);color:var(--cor-areia);padding:10px 16px;border-radius:var(--raio-2);z-index:50}
.pular:focus{left:8px}

/* cabeçalho fixo + menu do celular */
.cab{position:sticky;top:0;background:rgba(247,242,234,.96);backdrop-filter:blur(8px)}
.menu-cel{display:none;border-top:var(--borda-fina);background:var(--cor-off)}
.menu-cel.aberto{display:block}
.menu-cel nav{display:grid;padding:var(--e-3) var(--gutter-lateral) var(--e-5)}
.menu-cel a{padding:14px 0;border-bottom:var(--borda-fina);text-decoration:none;color:var(--cor-verde);font-weight:500;font-size:1.0625rem}
.menu-cel .btn{margin-top:var(--e-4);width:100%}
@container (min-width: 861px){ .menu-cel{display:none!important} }

/* hero: selo de imagem ilustrativa e a foto de hoje */
.hero .selo{top:auto;bottom:16px;right:16px}
.hero__hoje{position:absolute;right:var(--gutter-lateral);top:var(--e-6);width:180px;border-radius:var(--raio-2);overflow:hidden;box-shadow:var(--sombra-3);border:3px solid var(--cor-areia);z-index:2}
.hero__hoje img{aspect-ratio:3/4;object-fit:cover;width:100%}
.hero__hoje span{display:block;background:var(--cor-areia);color:var(--cor-verde);font:600 .75rem/1.3 var(--fonte-base);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;text-align:center}
.hero__fatos{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-6);margin:0 0 var(--e-6);padding:0;list-style:none}
.hero__fatos li{font-size:.9375rem;color:#E4DCCD}
.hero__fatos b{display:block;font-size:1.75rem;font-weight:300;color:var(--cor-areia);line-height:1.1}
@container (max-width: 860px){ .hero__hoje{width:120px;top:var(--e-5)} }
@container (max-width: 640px){ .hero__hoje{display:none} }

/* tipologias: 2 cartões largos com a planta */
.tipos--2{grid-template-columns:1fr 1fr}
.tipos--2 .tipo__midia{aspect-ratio:auto;height:clamp(220px,26cqi,330px);cursor:zoom-in;padding:0;border:0;width:100%;font:inherit}
.tipos--2 .tipo__midia img{padding:10px}
.tipo__area{display:flex;align-items:baseline;gap:8px;margin:0}
.tipo__area b{font-size:2.25rem;font-weight:200;color:var(--cor-terracota);line-height:1}
.tipo__area span{color:var(--cor-texto-suave);font-size:.9375rem}
.tipo__acoes{display:flex;flex-wrap:wrap;gap:var(--e-5);margin-top:auto}
@container (max-width: 760px){ .tipos--2{grid-template-columns:1fr} }
.nota{font-size:var(--fs-legenda);color:var(--cor-texto-suave);margin:var(--e-5) 0 0;max-width:760px}

/* faixa do tour 3D */
.tour{display:grid;grid-template-columns:7fr 5fr;gap:var(--e-8);align-items:center}
.tour .midia{aspect-ratio:16/10;border-radius:var(--raio-3)}
.tour ul{list-style:none;margin:var(--e-5) 0 var(--e-6);padding:0}
.tour li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(239,231,218,.18);color:var(--cor-areia)}
.tour li .ic{color:var(--cor-terracota-cl)}
@container (max-width: 760px){ .tour{grid-template-columns:1fr;gap:var(--e-6)} }

/* guias "antes de comprar" (acordeão) */
.guias{display:grid;gap:var(--e-3);max-width:880px}
.guia{background:var(--cor-off);border:var(--borda-fina);border-radius:var(--raio-3);overflow:hidden}
.guia summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:var(--e-4);align-items:center;padding:var(--e-5)}
.guia summary::-webkit-details-marker{display:none}
.guia__n{font-size:2rem;font-weight:200;color:var(--cor-terracota);line-height:1;min-width:44px}
.guia summary .t-h4{margin:0}
.guia summary p{margin:4px 0 0;font-size:.9375rem;color:var(--cor-texto-suave)}
.guia summary .ic{color:var(--cor-verde);transition:transform var(--dur-base) var(--curva-padrao)}
.guia[open] summary .ic{transform:rotate(90deg)}
.guia__corpo{padding:0 var(--e-5) var(--e-6) calc(var(--e-5) + 44px + var(--e-4))}
.guia__corpo ol,.guia__corpo ul{margin:0;padding-left:1.2em;display:grid;gap:10px}
.guia__corpo li::marker{color:var(--cor-terracota-esc);font-weight:600}
.guia__corpo b{font-weight:600;color:var(--cor-verde)}
.guia__corpo p{margin:var(--e-4) 0 0}
.fonte{font-size:.8125rem;color:var(--cor-texto-suave);margin-top:var(--e-5)!important;padding-top:var(--e-3);border-top:var(--borda-fina)}
@container (max-width: 600px){
  .guia summary{grid-template-columns:auto 1fr;padding:var(--e-4)}
  .guia summary .ic{display:none}
  .guia__corpo{padding:0 var(--e-4) var(--e-5)}
}

/* documentos: legenda curta */
.doc .t-legenda{margin-top:-4px}

/* planta ampliada */
.lupa{border:0;padding:0;background:transparent;max-width:min(1400px,96vw);max-height:94vh}
.lupa::backdrop{background:rgba(22,54,44,.88)}
.lupa img{max-width:100%;max-height:88vh;border-radius:var(--raio-2);background:#fff}
.lupa button{display:flex;align-items:center;gap:8px;margin:0 0 10px auto;background:var(--cor-areia);color:var(--cor-verde);border:0;border-radius:var(--raio-pilula);padding:10px 16px;font:600 .9375rem var(--fonte-base);cursor:pointer}

/* botão flutuante do WhatsApp no celular */
.flutua{position:fixed;right:16px;bottom:16px;z-index:30;width:58px;height:58px;border-radius:50%;background:var(--cor-verde);color:var(--cor-areia);display:none;place-items:center;box-shadow:var(--sombra-3)}
.flutua .ic{width:28px;height:28px}
@media (max-width: 860px){ .flutua{display:grid} }
.rodape__legal{font-size:.8125rem;color:#B9B19F;margin:var(--e-3) 0 0}

/* ajuste 29/09: a fachada tem que aparecer (o véu do DS cobria o prédio) */
.hero__foto img{object-position:62% 45%}
.hero__foto::after{background:linear-gradient(90deg,rgba(22,54,44,.94) 0%,rgba(22,54,44,.78) 34%,rgba(22,54,44,.18) 62%,rgba(22,54,44,0) 100%),linear-gradient(180deg,rgba(22,54,44,0) 55%,rgba(22,54,44,.55) 100%)}
@container (max-width: 640px){
  .hero{min-height:0;flex-direction:column;align-items:stretch;padding-top:320px}
  .hero__foto{bottom:auto;height:360px}
  .hero__foto img{object-position:50% 30%}
  .hero__foto::after{background:linear-gradient(180deg,rgba(22,54,44,0) 45%,rgba(22,54,44,1) 100%)}
  .hero .selo{top:12px;bottom:auto;right:12px}
  .hero .wrap{padding-block:0 var(--e-7)}
}
/* documentos: 3 por linha no computador (6 cartões = 2 linhas cheias) */
@container (min-width: 761px){ .docs{grid-template-columns:repeat(3,1fr)} }

/* ===== v2 (29/09): o site fala com quem compra ===== */
.hero .t-h1{max-width:760px}
.hero__txt{max-width:760px}
.link-seta--btn{background:none;border-width:0 0 1px;cursor:pointer;font:inherit;font-weight:600}

/* o que a pessoa pensa */
.dores{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--calha)}
.dor{background:var(--cor-areia);border-radius:var(--raio-3);padding:var(--e-6);border-left:4px solid var(--cor-terracota)}
.dor__frase{font-size:var(--fs-h4);font-weight:600;color:var(--cor-verde);line-height:1.25;margin:0 0 var(--e-3)}
.dor__resp{margin:0;color:var(--cor-texto-suave)}
@container (max-width: 700px){ .dores{grid-template-columns:1fr} .dor{padding:var(--e-5)} }

/* o caminho em 5 passos */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--calha);counter-reset:p}
.passos li{background:var(--cor-off);border:var(--borda-fina);border-radius:var(--raio-3);padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3)}
.passos p{margin:0;font-size:.9375rem;color:var(--cor-texto-suave)}
.passo__n{width:44px;height:44px;border-radius:50%;background:var(--cor-verde);color:var(--cor-areia);display:grid;place-items:center;font-weight:600;font-size:1.25rem}
@container (max-width: 1000px){ .passos{grid-template-columns:repeat(2,1fr)} }
@container (max-width: 600px){ .passos{grid-template-columns:1fr} .passos li{display:grid;grid-template-columns:44px 1fr;column-gap:var(--e-4)} .passos li>*{grid-column:2} .passo__n{grid-column:1;grid-row:1 / span 2} }
.faixa-cta{margin-top:var(--e-7);background:var(--cor-verde);color:var(--cor-areia);border-radius:var(--raio-4);padding:var(--e-6) var(--e-7);display:flex;align-items:center;justify-content:space-between;gap:var(--e-6);flex-wrap:wrap}
.faixa-cta p{margin:0;max-width:640px;font-size:var(--fs-lead)}
.faixa-cta b{color:#fff;font-weight:600}
@container (max-width: 600px){ .faixa-cta{padding:var(--e-5)} .faixa-cta .btn{width:100%} }

/* a obra dentro de "segurança" */
.obra-mini{margin-top:var(--e-8);display:grid;gap:var(--e-6)}
.obra-mini .tempo .midia{aspect-ratio:1/1}
@container (max-width: 640px){ .btn{white-space:normal;text-align:center;line-height:1.2;padding-block:12px} }
.flutua{opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--curva-padrao)}
.flutua.ve{opacity:1;pointer-events:auto}
/* v3: 4 passos */
.passos--4{grid-template-columns:repeat(4,1fr)}
@container (max-width: 1000px){ .passos--4{grid-template-columns:repeat(2,1fr)} }
@container (max-width: 600px){ .passos--4{grid-template-columns:1fr} }
.guia summary{padding-block:var(--e-4)}
/* v3.1: as 4 frases de venda */
.hero__sub{font-size:var(--fs-lead);color:#E4DCCD;margin:calc(-1 * var(--e-3)) 0 var(--e-5)}
.hero__fatos li{max-width:170px}
.hero__fatos b{color:var(--cor-terracota-cl)}
.simular__fatos{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:10px}
.simular__fatos li{display:flex;gap:10px;align-items:center;color:var(--cor-areia);font-weight:500}
.simular__fatos li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cor-terracota-cl);flex:none}
@container (max-width: 640px){ .hero__fatos{display:grid;gap:var(--e-3)} .hero__fatos li{max-width:none;display:flex;align-items:baseline;gap:10px} .hero__fatos b{font-size:1.375rem;min-width:92px} }
/* v3.2: parcela e documentos do comprador */
.hero__preco{font-size:clamp(1.375rem,1.1rem + 1.4cqi,2.125rem);color:var(--cor-areia);margin:0 0 var(--e-5);font-weight:300}
.hero__preco b{font-weight:700;color:var(--cor-terracota-cl)}
.hero__preco sup{font-size:.5em}
.docs-lista{display:grid;grid-template-columns:1fr 1fr;gap:var(--calha)}
.docs-grupo{background:var(--cor-off);border:var(--borda-fina);border-radius:var(--raio-3);padding:var(--e-6)}
.docs-grupo ul{list-style:none;margin:var(--e-4) 0 0;padding:0}
.docs-grupo li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:var(--borda-fina)}
.docs-grupo li .ic{color:var(--cor-verde);flex:none;margin-top:1px}
@container (max-width: 760px){ .docs-lista{grid-template-columns:1fr} .docs-grupo{padding:var(--e-5)} }
.hero__chips{list-style:none;margin:0 0 var(--e-6);padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hero__chips li{border:1.5px solid rgba(233,160,127,.75);color:var(--cor-areia);border-radius:var(--raio-pilula);padding:8px 16px;font-weight:600;font-size:1rem}

/* ===== seção do tour 3D: 360 ao vivo + CTA ===== */
.tour3d{position:relative;min-height:clamp(560px,78vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:#16362C url("../img/tour-preview.jpg") center/cover no-repeat}
.tour3d__viewer{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--curva-padrao)}
.tour3d__viewer.pronto{opacity:1}
.tour3d__viewer .pnlm-load-box,.tour3d__viewer .pnlm-about-msg{display:none!important}
.tour3d__veu{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(22,54,44,.92) 0%,rgba(22,54,44,.62) 38%,rgba(22,54,44,0) 70%),linear-gradient(0deg,rgba(22,54,44,.75) 0%,rgba(22,54,44,0) 45%)}
.tour3d__conteudo{position:relative;z-index:2;padding-block:var(--e-9) var(--e-8);pointer-events:none}
.tour3d__conteudo>*{pointer-events:auto;max-width:560px}
.tour3d .t-h2{font-size:clamp(2.25rem,1.5rem + 3.2cqi,4rem);margin-bottom:var(--e-4)}
.tour3d .t-lead{color:#EFE7DA;margin-bottom:var(--e-6)}
.btn--grande{min-height:64px;padding:0 34px;font-size:1.3125rem;box-shadow:0 0 0 0 rgba(197,106,67,.55);animation:pulso 2.4s var(--curva-padrao) infinite}
.btn--grande .ic{width:26px;height:26px}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(197,106,67,.55)}70%{box-shadow:0 0 0 18px rgba(197,106,67,0)}100%{box-shadow:0 0 0 0 rgba(197,106,67,0)}}
.tour3d__outros{margin:var(--e-5) 0 0;color:#D5CCBD;font-size:.9375rem}
.tour3d__outros a{color:var(--cor-areia);font-weight:600}
.tour3d__dica{position:absolute;right:var(--gutter-lateral);bottom:var(--e-6);z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(22,54,44,.82);color:var(--cor-areia);padding:10px 14px;border-radius:var(--raio-pilula);font-size:.875rem;font-weight:500;pointer-events:none}
.tour3d__dica .ic{width:20px;height:20px}
.tour3d .selo{top:16px;right:16px}
@container (max-width: 640px){
  .tour3d{min-height:640px}
  .tour3d__veu{background:linear-gradient(0deg,rgba(22,54,44,.97) 0%,rgba(22,54,44,.85) 45%,rgba(22,54,44,0) 75%)}
  .tour3d__conteudo{padding-block:var(--e-9) var(--e-7)}
  .btn--grande{width:100%}
  .tour3d__dica{top:16px;left:16px;right:auto;bottom:auto}
  .tour3d .selo{top:auto;bottom:auto;top:60px;left:16px;right:auto}
}
.tour3d .tour3d__viewer{position:absolute!important;inset:0!important;width:auto!important;height:auto!important}