/* Gran Vista · AZCA — grafite e ouro da marca, bronze e cinza do logo Gran Vista. */
:root {
  --fundo: #0c0c0d;
  --carvao: #151517;
  --linha: rgba(233, 180, 76, .22);
  --ouro: #e9b44c;
  --ouro-claro: #f7cf75;
  --bronze: #b68c5a;
  --prata: #c9c6c0;
  --texto: #ece8e1;
  --apagado: #9b968e;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Lato', 'Segoe UI', Arial, sans-serif;
  --torre-l: calc(100svh * 9 / 16);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--fundo); }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- tipografia ---------- */
.rotulo { margin: 0 0 14px; font: 700 12px/1.2 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ouro); }
.titulo { margin: 0 0 16px; font: 500 clamp(36px, 5vw, 68px)/1.02 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.titulo em { font-style: italic; color: var(--ouro-claro); }
.sub { margin: 0 0 22px; max-width: 34ch; color: var(--apagado); font-size: 17px; }
.gv { margin: 0 0 18px; display: inline-grid; align-self: flex-start; width: fit-content; padding: 18px 28px 14px; border: 1px solid var(--bronze); font: 500 clamp(56px, 8vw, 112px)/.86 var(--serif); letter-spacing: .02em; }
.gv-gran { color: var(--bronze); }
.gv-vista { color: var(--prata); }
.dica { margin: 8px 0 0; color: var(--apagado); font-size: 14px; letter-spacing: .08em; display: flex; gap: 10px; align-items: center; }
.dica::after { content: ''; width: 1px; height: 34px; background: linear-gradient(var(--ouro), transparent); animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0%,100% { transform: translateY(-6px); opacity: .3 } 50% { transform: translateY(6px); opacity: 1 } }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 2px; font: 700 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: transform .25s, background .25s, color .25s; cursor: pointer; border: 0; }
.botao-ouro { background: linear-gradient(135deg, var(--ouro-claro), var(--ouro) 55%, #c98f2a); color: #141210; }
.botao-ouro:hover { transform: translateY(-2px); }
.botao-linha { border: 1px solid var(--ouro); color: var(--ouro-claro); background: transparent; }
.botao-linha:hover { background: rgba(233, 180, 76, .1); }
.botao.pequeno { min-height: 40px; padding: 0 18px; font-size: 11px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- topo fixo ---------- */
.topo { position: fixed; z-index: 50; inset: 0 0 auto 0; display: flex; align-items: center; gap: 28px; padding: calc(14px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 48px) 14px; background: linear-gradient(rgba(12,12,13,.92), rgba(12,12,13,.0)); transition: background .35s, box-shadow .35s; }
.topo.rolou { background: rgba(12,12,13,.94); box-shadow: 0 1px 0 var(--linha); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.topo .marca img { height: 40px; width: auto; }
.topo nav { display: flex; gap: 26px; margin-left: auto; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--prata); }
.topo nav a:hover { color: var(--ouro-claro); }

/* ---------- cenas presas ---------- */
[data-cena] { position: relative; }
.palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.batida { position: absolute; inset: auto 0 0 0; opacity: 0; transform: translateY(28px); transition: opacity .7s, transform .7s; pointer-events: none; }
.batida.ativa { opacity: 1; transform: none; pointer-events: auto; }
.barra-cena { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.barra-cena i { display: block; height: 100%; background: var(--ouro); transform-origin: left; transform: scaleX(0); }

/* ---------- HERO ---------- */
.hero .ceu { position: absolute; inset: 0; background: radial-gradient(60% 70% at 72% 40%, rgba(233,180,76,.16), transparent 70%), linear-gradient(180deg, #101012, #0c0c0d); }
/* fundo: o mesmo quadro da torre cobrindo a tela inteira, desfocado e escuro (preenche o espaço no computador) */
.hero .torre-fundo { position: absolute; top: -6%; left: -6%; width: 112%; height: 112%; filter: blur(40px) brightness(.66) saturate(1.2); }
.hero .torre { position: absolute; top: 0; right: clamp(16px, 7vw, 120px); height: 100svh; width: var(--torre-l); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.hero .veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(12,12,13,.8) 0%, rgba(12,12,13,.42) 32%, transparent 52%), linear-gradient(180deg, rgba(12,12,13,.45), transparent 18%, transparent 82%, rgba(12,12,13,.65)); }
.hero .titulo { font-size: clamp(38px, 5vw, 92px); }
.hero .gv { font-size: clamp(56px, 8.4vw, 150px); }
.hero .sub { font-size: clamp(16px, 1.15vw, 20px); }
.hero-texto { position: absolute; left: clamp(16px, 7vw, 120px); top: 50%; transform: translateY(-50%); width: min(820px, calc(100vw - var(--torre-l) - 20vw)); height: 70svh; }
.hero-texto .batida { top: 0; bottom: auto; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.regua { position: absolute; top: 14svh; bottom: 14svh; right: max(12px, calc(clamp(16px, 7vw, 120px) - 84px)); width: 74px; display: flex; gap: 12px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.regua-trilho { position: relative; width: 1px; background: repeating-linear-gradient(to top, var(--linha) 0 1px, transparent 1px calc(100% / 30)); border-left: 1px solid var(--linha); }
.regua-trilho i { position: absolute; left: -4px; bottom: min(100%, calc(var(--p, 0) * 111%)); width: 9px; height: 9px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 14px var(--ouro); translate: 0 50%; }
.regua-andar { align-self: center; display: grid; line-height: 1; }
.regua-andar b { font: 500 46px/1 var(--serif); color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.regua-andar span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--apagado); }


/* ---------- DECORADO ---------- */
.decorado .palco { background: radial-gradient(50% 60% at 30% 50%, rgba(182,140,90,.12), transparent 70%), var(--fundo); }
/* no computador o passeio ocupa mais da metade da tela (corta teto e chão, que num interior não fazem falta) */
.decorado-quadro { position: absolute; top: 0; left: 0; height: 100svh; width: max(var(--torre-l), 56vw); -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.decorado-quadro video { width: 100%; height: 100%; object-fit: cover; }
.decorado-texto { position: absolute; top: 50%; transform: translateY(-50%); left: calc(max(var(--torre-l), 56vw) + 2vw); right: clamp(16px, 6vw, 110px); height: 56svh; }
.decorado-texto .batida { top: 44px; bottom: auto; }

/* ---------- NÚMEROS ---------- */
.numeros { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--linha); }
.numero { padding: 48px 20px; text-align: center; display: grid; gap: 8px; }
.numero + .numero { border-left: 1px solid var(--linha); }
.numero b { font: 500 clamp(40px, 4.4vw, 64px)/1 var(--serif); color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.numero > span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); }

/* ---------- AMBIENTES ---------- */
.ambientes { padding: 120px 0 100px; }
.cabeca { padding: 0 clamp(16px, 7vw, 120px); max-width: 900px; }
.trilho-amb { margin-top: 40px; display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 72vw); gap: 18px; overflow-x: auto; padding: 0 clamp(16px, 7vw, 120px) 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--bronze) transparent; }
@media (min-width: 901px) { .trilho-amb { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.amb { margin: 0; scroll-snap-align: start; }
.amb video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--carvao); }
.amb figcaption { margin-top: 12px; font: 500 22px/1.2 var(--serif); }

/* ---------- PLANTA ---------- */
.planta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: 100px clamp(16px, 7vw, 120px); background: var(--carvao); }
.legenda { margin: 10px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; counter-reset: c; font-size: 15px; color: var(--prata); }
.legenda li { counter-increment: c; padding: 5px 0; break-inside: avoid; }
.legenda li::before { content: counter(c, decimal-leading-zero); display: inline-block; width: 30px; color: var(--bronze); font-variant-numeric: tabular-nums; }
.planta-quadro { position: relative; background: #fff; padding: 0; }
.planta-quadro img { width: 100%; height: auto; }
.ponto { position: absolute; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; background: var(--ouro); color: #141210; font: 900 13px/1 var(--sans); cursor: pointer; box-shadow: 0 0 0 0 rgba(233,180,76,.6); animation: pulsa 2.2s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(233,180,76,.6) } 70% { box-shadow: 0 0 0 16px rgba(233,180,76,0) } 100% { box-shadow: 0 0 0 0 rgba(233,180,76,0) } }
.visor { border: 0; padding: 0; background: var(--carvao); color: var(--texto); max-width: min(1100px, 94vw); }
.visor::backdrop { background: rgba(0,0,0,.8); }
.visor img { width: 100%; height: auto; }
.visor p { margin: 0; padding: 14px 18px; font: 500 22px var(--serif); }
.visor .fechar { position: absolute; top: 8px; right: 8px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 26px; cursor: pointer; }

/* ---------- LAZER ---------- */
.lazer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: 110px clamp(16px, 7vw, 120px); }
.lazer-quadro img { width: 100%; height: auto; background: #fff; }
.listas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.listas h3 { margin: 0 0 8px; font: 700 12px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); }
.listas ul { margin: 0; padding: 0; list-style: none; color: var(--prata); font-size: 15px; }
.listas li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---------- LOCAL ---------- */
.local { padding: 100px 0; background: var(--carvao); }
.local-mapa { margin: 34px auto 0; width: min(1200px, calc(100% - 32px)); height: auto; }

/* ---------- VISITA ---------- */
.visita { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); min-height: 90svh; }
.visita-foto img { width: 100%; height: 100%; object-fit: cover; }
.visita-form { padding: clamp(40px, 7vw, 100px) clamp(16px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 640px; }
.visita-form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); }
.visita-form input, .visita-form select { height: 52px; padding: 0 14px; border: 1px solid rgba(255,255,255,.14); background: var(--carvao); color: var(--texto); font: 400 17px var(--sans); border-radius: 2px; }
.visita-form input:focus, .visita-form select:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }
.visita-form .botao { margin-top: 8px; }
.aviso-priv { margin: 4px 0 0; font-size: 13px; color: var(--apagado); }

/* ---------- RODAPÉ ---------- */
.rodape { padding: 48px clamp(16px, 7vw, 120px) calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); display: grid; gap: 14px; justify-items: start; color: var(--apagado); font-size: 13px; }
.rodape p { margin: 0; max-width: 70ch; }

/* ---------- revelação palavra a palavra (cinema.js) ---------- */
[data-revela] .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .08em; }
[data-revela] .palavra > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 45ms); }
[data-revela].visto .palavra > span { transform: none; }
.cursor-ponto, .cursor-anel { display: none; }

/* ---------- celular e tablet ---------- */
@media (max-width: 900px) {
  :root { --torre-l: 100vw; }
  .topo nav { display: none; }
  .topo .botao { margin-left: auto; }
  .topo .marca img { height: 32px; }
  .hero .torre-fundo { display: none; }
  .hero .torre { right: 0; width: 100vw; -webkit-mask-image: none; mask-image: none; }
  .hero .veu { background: linear-gradient(180deg, rgba(12,12,13,.55) 0%, transparent 30%, transparent 42%, rgba(12,12,13,.9) 78%, #0c0c0d 100%); }
  .hero-texto { left: 16px; right: 16px; width: auto; top: auto; bottom: 34px; transform: none; height: 46svh; }
  .hero-texto .batida { justify-content: flex-end; }
  .gv { font-size: 60px; padding: 12px 18px 10px; }
  .titulo { font-size: clamp(34px, 9vw, 46px); }
  .regua { right: 12px; left: auto; top: 16svh; bottom: auto; height: 34svh; width: auto; flex-direction: row-reverse; }
  .regua-andar { background: rgba(12,12,13,.62); padding: 8px 10px 7px; border-radius: 2px; }
  .regua-andar b { font-size: 34px; }
  .decorado-quadro { left: 0; width: 100vw; -webkit-mask-image: none; mask-image: none; }
  .decorado-quadro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(12,12,13,.92) 82%); }
  .decorado-texto { left: 16px; right: 16px; top: auto; bottom: 34px; transform: none; height: 40svh; }
  .decorado-texto .batida { top: auto; bottom: 0; }
  .decorado-texto > .rotulo { display: none; }
  .numeros { grid-template-columns: 1fr 1fr; }
  .numero { padding: 30px 12px; }
  .numero:nth-child(odd) { border-left: 0; }
  .numero:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .numero:last-child { grid-column: 1 / -1; }
  .planta, .lazer, .visita { grid-template-columns: 1fr; }
  .planta { padding-block: 70px; }
  .ponto { width: 34px; height: 34px; font-size: 11px; }
  .listas { grid-template-columns: 1fr; }
  .visita-foto img { height: 52svh; }
  .ambientes, .lazer, .local { padding-block: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .batida { transition: none; }
  .dica::after, .ponto { animation: none; }
}