/* Páginas de empreendimento na direção B (Village Prado, Itanhangá). A base (cores, tipos, topo,
   botões, rodapé, logos) vem de style.css, a mesma folha da home; aqui o que as páginas têm em
   comum. O que é de uma página só fica no pagina.css dela. */

.titulo-3 { font: 400 clamp(1.9rem, 1.1rem + 2.2vw, 3.2rem)/1 var(--serifa); letter-spacing: -.016em; text-wrap: balance; }
.titulo-3 em { color: var(--ouro); }
.corrido { display: grid; gap: 1em; color: var(--osso-2); font-size: 1.0625rem; max-width: 36em; text-wrap: pretty; }
.menu a[aria-current] { color: var(--ouro); }

/* ---------- capa ---------- */
.capa { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.capa-foto { position: absolute; inset: 0; z-index: -1; background: var(--noite); }
.capa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-img { filter: saturate(.88) contrast(1.04) brightness(.96); scale: 1.06; opacity: 0; animation: assenta 2.2s .2s var(--sai) forwards, revela 1.3s .55s ease forwards; }
.capa-traco { object-position: 50% 50%; scale: 1.08; filter: grayscale(1) invert(1) contrast(1.35) brightness(1.05); mix-blend-mode: screen; opacity: 0; animation: risca 1.9s .05s ease forwards; }
/* com JavaScript a entrada espera as imagens, como na home: traço primeiro, foto da esquerda para a direita */
.js .capa-traco { animation: none; transition: opacity .45s ease; }
.js.traco-pronto .capa-traco { opacity: .8; }
.js.foto-pronta .capa-traco { opacity: 0; transition: opacity .2s ease 1.3s; }
.js .capa-img { animation: none; scale: 1; opacity: 1; clip-path: inset(0 100% 0 0); }
.js.foto-pronta .capa-img { clip-path: inset(0); transition: clip-path 1.25s cubic-bezier(.65, 0, .35, 1); }
.js .capa-foto::before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--ouro); box-shadow: 0 0 14px rgba(216, 185, 140, .55); opacity: 0; }
.js.foto-pronta .capa-foto::before { animation: fio 1.25s cubic-bezier(.65, 0, .35, 1) forwards; }
.capa-foto::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 14, 11, .72) 0%, rgba(10, 14, 11, 0) 22%, rgba(10, 14, 11, .3) 40%, rgba(10, 14, 11, .9) 100%); }
.capa-texto { position: absolute; inset: auto var(--margem) clamp(34px, 6vh, 76px); display: grid; justify-items: start; gap: clamp(16px, 2.6vh, 30px); }
.trilha { text-shadow: 0 1px 14px rgba(10, 14, 11, .8); display: flex; gap: 10px; font: 500 .75rem/1.4 var(--sem); letter-spacing: .2em; text-transform: uppercase; color: var(--osso); opacity: 0; animation: entra .9s .35s var(--sai) forwards; }
.trilha a { text-decoration: underline; text-decoration-color: rgba(216, 185, 140, .5); text-underline-offset: 4px; }
.trilha span[aria-hidden] { opacity: .6; }
.capa-logo { width: clamp(84px, 8vw, 128px); opacity: 0; animation: entra .9s .1s var(--sai) forwards; }
.capa-lado { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: clamp(16px, 2.4vh, 26px); border-top: 1px solid rgba(236, 229, 216, .36); opacity: 0; animation: entra .9s .55s var(--sai) forwards; }
.capa-lado p { font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); color: rgba(236, 229, 216, .96); max-width: 34em; }

/* ---------- ficha: números e o selo de vendido ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center; padding: clamp(84px, 9vw, 140px) var(--margem) clamp(64px, 7vw, 110px); }
.ficha-dados { display: grid; gap: clamp(22px, 3vw, 36px); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); }
.numeros > div { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 30px) 20px clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--linha); }
.numeros > div:nth-child(even) { padding-left: clamp(18px, 2.4vw, 34px); border-left: 1px solid var(--linha); }
.numeros dd { display: flex; align-items: baseline; gap: .14em; font: 400 clamp(2.6rem, 1.2rem + 3.6vw, 5rem)/.9 var(--serifa); letter-spacing: -.02em; white-space: nowrap; }
.numeros dd small { font-size: .36em; letter-spacing: 0; color: var(--ouro); }
.numeros dd em { color: var(--ouro); }
.numeros dt { margin-top: 10px; font: 500 .75rem/1.45 var(--sem); letter-spacing: .16em; text-transform: uppercase; color: var(--osso-2); }
.ficha-vendido { display: grid; gap: 18px; justify-items: start; padding: clamp(26px, 3vw, 44px); background: var(--mata); border: 1px solid var(--linha); border-radius: 8px; }
.ficha-vendido .titulo-2 em { color: var(--ouro); }

/* empreendimento 100% vendido: o selo fica no lugar do botão de agendar, no topo e na capa */
.topo-selo, .capa-selo { position: static; display: inline-block; }
.topo-selo { margin-left: 8px; padding: 10px 16px 9px; }
.capa-selo { justify-self: start; padding: 11px 18px 10px; font-size: .75rem; }


/* ---------- índice da página ---------- */
.indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 var(--margem); padding: 18px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.indice a { padding: 10px 18px; border: 1px solid var(--linha); border-radius: 999px; font: 500 .8125rem/1 var(--sem); letter-spacing: .08em; transition: border-color .2s ease, color .2s ease; }
@media (hover: hover) and (pointer: fine) { .indice a:hover { border-color: var(--ouro); color: var(--ouro); } }

/* ---------- conceito ---------- */
.conceito { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 110px); align-items: center; padding: clamp(84px, 10vw, 150px) var(--margem); }
.conceito-foto picture { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 5; }
.conceito-foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--tom); }
.conceito-texto { display: grid; gap: 22px; }

/* ---------- filme ---------- */
.filme { background: var(--mata); padding: clamp(64px, 8vw, 120px) var(--margem); }
.filme-quadro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #0e130f; }
.filme-capa { position: absolute; inset: 0; width: 100%; display: block; }
.filme-capa picture, .filme-capa img { display: block; width: 100%; height: 100%; }
.filme-capa img { object-fit: cover; filter: var(--tom); transition: transform 1.6s var(--sai), filter .4s ease; }
.filme-capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 11, .15), rgba(10, 14, 11, .55)); }
.filme-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(72px, 8vw, 112px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(236, 229, 216, .7); background: rgba(10, 14, 11, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s var(--sai), background-color .2s ease; }
.filme-play::before { content: ''; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--osso); }
.filme-rotulo { position: absolute; z-index: 1; left: clamp(18px, 2.4vw, 34px); bottom: clamp(16px, 2.2vw, 30px); font: 600 .8125rem/1 var(--sem); letter-spacing: .14em; text-transform: uppercase; }
.filme-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (hover: hover) and (pointer: fine) {
  .filme-capa:hover img { transform: scale(1.03); }
  .filme-capa:hover .filme-play { transform: scale(1.06); background: rgba(216, 185, 140, .35); }
}

/* ---------- implantação ---------- */
.implantacao { padding: clamp(84px, 10vw, 150px) var(--margem); }
.implantacao-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 110px); align-items: start; margin-bottom: clamp(36px, 5vw, 70px); }
.implantacao-topo > div:first-child { display: grid; gap: 14px; }
.planta { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: clamp(20px, 3vw, 44px); align-items: center; }
.planta-mapa { position: relative; border-radius: 8px; overflow: hidden; background: #f4f1e8; }
.planta-mapa img { width: 100%; height: auto; }
.planta-mapa figcaption { position: absolute; left: 14px; bottom: 10px; font-size: .75rem; color: rgba(19, 25, 21, .6); }
.planta-legenda { display: grid; gap: 2px; counter-reset: none; }
.planta-legenda li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linha); font-size: .9375rem; cursor: default; transition: color .2s ease; }
.planta-legenda b { display: grid; place-items: center; flex: none; width: 24px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(216, 185, 140, .6); font: 600 .6875rem/1 var(--sem); color: var(--ouro); transition: background-color .2s ease, color .2s ease; }
.planta-legenda li.on { color: var(--ouro); }
.planta-legenda li.on b { background: var(--ouro); color: var(--noite); }

/* ---------- convite: faixa de foto do meio ---------- */
.convite { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 11vw, 170px) var(--margem); }
.convite-fundo { position: absolute; inset: 0; z-index: -2; }
.convite-fundo img { width: 100%; height: 100%; object-fit: cover; filter: var(--tom); }
.convite::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 14, 11, .9) 0%, rgba(10, 14, 11, .62) 55%, rgba(10, 14, 11, .38) 100%); }
.convite-dentro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.convite-texto { display: grid; gap: 20px; }
.convite-texto > p:not(.sobrelinha) { color: rgba(236, 229, 216, .86); font-size: 1.125rem; }

/* ---------- lazer ---------- */
.lazer { background: var(--mata); padding: clamp(84px, 10vw, 150px) 0 clamp(64px, 8vw, 110px); }
.lazer-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; padding: 0 var(--margem); margin-bottom: clamp(28px, 3.6vw, 50px); }
.lazer-topo > div:first-child { display: grid; gap: 14px; }
.abas { display: flex; flex-wrap: wrap; gap: 8px; }
.abas button { min-height: 44px; padding: 0 20px; border: 1px solid var(--linha); border-radius: 999px; font: 500 .8125rem/1 var(--sem); letter-spacing: .08em; color: var(--osso-2); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.abas button[aria-selected="true"] { background: var(--osso); border-color: var(--osso); color: var(--noite); }
@media (hover: hover) and (pointer: fine) { .abas button[aria-selected="false"]:hover { border-color: var(--ouro); color: var(--ouro); } }
.trilho { display: flex; gap: clamp(14px, 1.8vw, 28px); padding: 0 var(--margem) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho li { flex: 0 0 auto; display: grid; gap: 12px; scroll-snap-align: start; }
.trilho picture { display: block; height: min(58vh, 560px); overflow: hidden; border-radius: 8px; background: #0e130f; }
.trilho img { height: 100%; width: auto; max-width: none; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.trilho span { font: 500 .75rem/1.4 var(--sem); letter-spacing: .14em; text-transform: uppercase; color: var(--osso-2); }
.lazer-painel[hidden] { display: none; }
.lazer-painel { animation: entra .5s var(--sai); }
.lazer-controles { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin: clamp(28px, 3.4vw, 46px) var(--margem) 0; padding-top: 22px; border-top: 1px solid var(--linha); }
.setas { display: flex; gap: 8px; flex: none; }
.setas button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(236, 229, 216, .4); font-size: 1.1rem; transition: background-color .2s ease, color .2s ease, transform .16s var(--sai); }
.setas button:active { transform: scale(.94); }
.setas button[disabled] { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .setas button:not([disabled]):hover { background: var(--osso); color: var(--noite); } }

/* ---------- localização ---------- */
.local { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); align-items: start; padding: clamp(84px, 10vw, 150px) var(--margem); }
.local-texto { display: grid; gap: 24px; }

/* ---------- fecho: foto do empreendimento antes do Conheça também ---------- */
.fecho { position: relative; isolation: isolate; overflow: hidden; padding: clamp(150px, 20vw, 300px) var(--margem) clamp(72px, 8vw, 120px); }
.fecho-fundo { position: absolute; inset: 0; z-index: -2; }
.fecho-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fecho::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #131915 0, rgba(19, 25, 21, .1) 120px, rgba(19, 25, 21, .35) 38%, rgba(19, 25, 21, .9) 72%, #131915 100%); }
.fecho-dentro > div { text-shadow: 0 1px 24px rgba(10, 14, 11, .6); }
.fecho-dentro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: end; }
.fecho .rodape-chamada { margin-top: 18px; }
.fecho-sub { margin-top: 16px; font-size: 1.125rem; color: rgba(236, 229, 216, .9); }

/* ---------- outros empreendimentos ---------- */
.outros { padding: clamp(64px, 8vw, 110px) var(--margem) clamp(40px, 5vw, 70px); }
.outros-topo { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.outros-lista { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 20px); }
.outro { position: relative; isolation: isolate; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 10; }
.outro picture { position: absolute; inset: 0; z-index: -2; }
.outro img { width: 100%; height: 100%; object-fit: cover; filter: var(--tom); transition: transform 1.6s var(--sai); }
.outro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 14, 11, .58) 0%, rgba(10, 14, 11, .06) 32%, rgba(10, 14, 11, .14) 48%, rgba(10, 14, 11, .88) 100%); }
.outro .logo { position: absolute; top: clamp(18px, 2.2vw, 32px); left: clamp(18px, 2.2vw, 32px); }
.outro .logo-itanhanga { width: 104px; } .outro .logo-cuiaba { width: 92px; }
.outro .selo { top: clamp(18px, 2.2vw, 32px); right: clamp(18px, 2.2vw, 32px); }
.outro-base { position: absolute; left: clamp(18px, 2.2vw, 32px); right: clamp(18px, 2.2vw, 32px); bottom: clamp(18px, 2.4vw, 34px); display: grid; gap: 10px; justify-items: start; }
.outro h3 { font: 400 clamp(1.7rem, 1.1rem + 1.5vw, 2.6rem)/1 var(--serifa); letter-spacing: -.014em; text-shadow: 0 1px 20px rgba(10, 14, 11, .5); }
.outro-dados { font: 500 .8125rem/1.4 var(--sem); letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 229, 216, .9); }
.outro-dados i { letter-spacing: 0; text-transform: none; }
@media (hover: hover) and (pointer: fine) {
  .outro:hover img { transform: scale(1.04); }
  .outro:hover .elo-seta::after { transform: translateX(6px); }
}

/* ---------- rodapé sem a foto (o pôr do sol já está no fecho) ---------- */
.rodape-liso { --faixa: 0px; padding-top: clamp(56px, 7vw, 100px); border-top: 1px solid var(--linha); }
.rodape-liso::after { content: none; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) and (min-width: 901px) { .planta { grid-template-columns: 1fr; } .planta-legenda { grid-template-columns: repeat(3, 1fr); column-gap: 24px; } }

@media (max-width: 900px) {
  .capa-texto { bottom: 26px; gap: 14px; }
  .capa-logo { width: 74px; }
  .capa-lado { display: grid; }
  .capa-lado .botao { width: 100%; }

  .ficha, .conceito, .implantacao-topo, .convite-dentro, .local, .fecho-dentro { grid-template-columns: 1fr; }
  .ficha { padding-top: 64px; gap: 36px; }
  .topo-selo { display: none; }
  .numeros dd { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .numeros dt { font-size: .6875rem; letter-spacing: .1em; }
  .indice { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 14px var(--margem); }
  .indice::-webkit-scrollbar { display: none; }
  .indice a { flex: none; }
  .conceito-foto picture { aspect-ratio: 4 / 3; }
  .filme { padding-left: 10px; padding-right: 10px; }
  .filme-play::before { border-width: 9px 0 9px 15px; }
  .planta { grid-template-columns: 1fr; }
  .planta-mapa { margin: 0 calc(-1 * var(--margem) + 10px); }
  .planta-legenda { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .planta-legenda li { font-size: .875rem; }
  .convite::after { background: linear-gradient(180deg, rgba(10, 14, 11, .55) 0%, rgba(10, 14, 11, .88) 55%); }
  .convite-dentro { gap: 28px; }
  .trilho picture { height: min(52vh, 380px); }
  .trilho li { max-width: 86vw; }
  .trilho img { max-width: 86vw; width: auto; }
  .lazer-controles { flex-direction: column-reverse; }
  .fecho { padding-top: 180px; }
  .fecho::after { background: linear-gradient(180deg, #131915 0, rgba(19, 25, 21, .2) 90px, rgba(19, 25, 21, .55) 30%, rgba(19, 25, 21, .92) 55%, #131915 100%); }
  .outros-lista { grid-template-columns: 1fr; }
  .outro { aspect-ratio: 4 / 3; }
  .outro .logo-itanhanga { width: 78px; } .outro .logo-cuiaba { width: 66px; }
  .outro .selo { top: 16px; right: 16px; padding: 6px 10px 5px; font-size: .625rem; letter-spacing: .12em; }
  .outro-dados { font-size: .6875rem; }
}

/* empreendimento.js não carregou: o onerror da tag tira a classe js e os blocos aparecem sem esperar a rolagem */
.sem-trava [data-entra] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .capa-img { scale: 1; opacity: 1; clip-path: none !important; }
  .capa-traco, .capa-foto::before { display: none; }
  .trilha, .capa-logo, .capa-lado { opacity: 1; }
}