/* ==========================================================================
   Proposta Open House para a Home Empreendimentos: Magnific Palace
   O preto carvão, o champanhe e o marfim da Open House formam a página; as linhas de maquete
   (champanhe) desenham tudo. O dourado da Home (do bronze ao champanhe, com a serifa da logo)
   aparece no nome do empreendimento, em dinheiro, em venda e na marca.
   Na tela, um palco 3D fixo atrás do texto. Na impressão (o PDF), páginas A4 claras.
   ========================================================================== */

/* Archivo (Google Fonts, licença OFL): as mesmas regras do CSS do Google, aqui dentro para a página não
   esperar outro servidor antes de aparecer. Só latim e latim estendido (o português cabe no latim). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLmvDIaK18A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLmvDIaI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond (Google Fonts, licença OFL): a serifa clássica, no tom das letras da Home */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_qE6KnTOitk9IfqBUg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnTOitk9IfqBUg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_s06KnTOitk9IfqBUg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnrOitk9IfqBUoT9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --mata: #0b0b0a;        /* fundo: preto carvão da Open House */
  --capa: #0b0b0a;        /* capa do PDF: o mesmo preto carvão */
  --folha: #192622;       /* verde profundo da Open House (blocos) */
  --maquete: #c8c5b5;     /* traço de maquete da Open House (champanhe) */
  --gesso: #f3f1e9;       /* marfim: texto principal */
  --nevoa: #a9ada4;       /* texto de apoio (sálvia, um pouco mais escura) */
  --luz: #dcc195;         /* o dourado da Home: dinheiro, vendas, marca */
  --bronze: #8a6b4c;
  --champanhe: #ead9b3;
  --ouro: linear-gradient(100deg, #8a6b4c 0%, #c9ad85 28%, #ead9b3 50%, #c4a77e 72%, #8a6b4c 100%);

  --linha: rgba(200, 197, 181, 0.15);
  --linha-forte: rgba(200, 197, 181, 0.32);

  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 56px);
  --topo-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lead: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --t-h3: 1rem;
  --t-h2: clamp(2rem, 3.5vw, 3.125rem);
  --t-h1: clamp(2.5rem, 4.6vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--mata);
  scroll-padding-top: calc(var(--topo-h) + 16px);
  scrollbar-width: thin;
  scrollbar-color: #3a3a35 var(--mata);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--mata);
  color: var(--nevoa);
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 350;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 550; color: var(--gesso); }
::selection { background: var(--maquete); color: var(--mata); }
:focus-visible { outline: 1px solid var(--luz); outline-offset: 4px; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: fixed; left: 16px; top: 12px; z-index: 300;
  padding: 10px 16px; border-radius: 99px;
  background: var(--gesso); color: var(--mata); text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 99px;
  font-size: var(--t-sm);
  font-weight: 450;
  font-stretch: 108%;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.botao--linha { border: 1px solid var(--linha-forte); color: var(--gesso); }
.botao--linha:hover { border-color: var(--maquete); }
.botao--luz { background: var(--luz); color: var(--mata); font-weight: 550; }
.botao--luz:hover { background: #f7d8a8; }
.botao[data-gerando] { opacity: 0.7; pointer-events: none; }

/* ---------- topo ---------- */

.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--topo-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--gutter);
  background: var(--mata);
  border-bottom: 1px solid var(--linha);
}
.topo__marcas { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.topo__oh { width: 112px; fill: var(--maquete); }
.topo__traco { width: 1px; height: 22px; background: var(--linha-forte); }
.topo__home { width: auto; height: 34px; }
.topo__acoes { display: flex; gap: 10px; }
/* a linha do topo se desenha conforme a leitura avança */
.topo__progresso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--maquete);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
}

/* ---------- palco 3D ---------- */

.palco {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
/* véu à esquerda: o texto nunca disputa com as linhas do 3D */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 10, 0.96) 0%, rgba(11, 11, 10, 0.88) 38%, rgba(11, 11, 10, 0) 58%);
}
.sem-3d .palco, .sem-3d body::before { display: none; }

main { position: relative; z-index: 2; }

/* ---------- cenas ---------- */

.cena {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--topo-h) + 9vh) var(--gutter) 9vh;
}
.cena--longa { min-height: 150svh; }
.cena__texto { position: relative; z-index: 1; width: min(100%, 35rem); }

.cena h2 {
  font-family: var(--serif);
  font-size: calc(var(--t-h2) * 1.12);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--gesso);
  text-wrap: balance;
}
.cena__para {
  margin-top: 12px;
  font-size: var(--t-sm);
  font-stretch: 108%;
  color: var(--maquete);
}
.cena h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: var(--t-h3);
  font-weight: 520;
  font-stretch: 108%;
  color: var(--gesso);
}
.lead {
  margin-top: 1.25rem;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--gesso);
  opacity: 0.92;
  text-wrap: pretty;
}
.cena p + p { margin-top: 0.75rem; }
.nota { margin-top: 1rem; font-size: var(--t-xs); color: var(--nevoa); }

/* listas: o marcador é um traço curto, a mesma linha que desenha a página */
.lista li { position: relative; padding-left: 26px; }
.lista li + li { margin-top: 0.55rem; }
.lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 14px; height: 1px;
  background: var(--maquete);
}

/* passos em sequência: aqui o número diz a ordem */
.passos { counter-reset: passo; }
.passos li { position: relative; padding-left: 40px; counter-increment: passo; }
.passos li + li { margin-top: 0.7rem; }
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 0.1em;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--gesso);
}

.cena__foto, .capa-marcas { display: none; }
.nota--ilustracao { margin-top: 2rem; padding-top: 12px; border-top: 1px solid var(--linha); }

/* ---------- abertura ---------- */

.cena--abertura { min-height: 100svh; padding-top: calc(var(--topo-h) + 6vh); }
.cena--abertura .cena__texto { width: min(100%, 39rem); }
.abertura__de { font-size: var(--t-xs); font-stretch: 112%; letter-spacing: 0.22em; text-transform: uppercase; color: var(--maquete); }
.abertura__titulo {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-size: calc(var(--t-h1) * 1.3);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0.01em;
  color: var(--gesso);
  text-wrap: balance;
}
.abertura__titulo .ouro { display: block; }
.abertura__sub {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 260;
  font-stretch: 116%;
  letter-spacing: -0.005em;
  color: var(--gesso);
}
/* o dourado da Home em texto, com um brilho que passa devagar */
.ouro {
  background: var(--ouro);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ouro 7s ease-in-out infinite alternate;
}
@keyframes ouro { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* títulos que acendem palavra por palavra com a rolagem (proposta.js) */
[data-revelar] .palavra { opacity: var(--a, 1); transition: opacity 0.2s linear; }

/* o nome deitado no chão (abertura): a faixa corre para o horizonte com a rolagem */
.plano {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34vh;
  overflow: hidden;
  perspective: 520px;
  perspective-origin: 30% 0%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.plano__faixa {
  position: absolute;
  left: -20%; right: -20%; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0%;
  transform: rotateX(68deg) translateY(var(--plano, 0px));
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(220, 193, 149, 0.28);
}
.plano__faixa span:nth-child(odd) { color: rgba(220, 193, 149, 0.05); }
.abertura__data { margin-top: 2rem; font-size: var(--t-xs); color: var(--nevoa); }
.rolar {
  position: absolute;
  left: var(--gutter);
  bottom: 4vh;
  font-size: var(--t-xs);
  color: var(--nevoa);
}
.rolar::after {
  content: "";
  display: block;
  width: 1px; height: 36px;
  margin-top: 10px;
  background: linear-gradient(var(--maquete), transparent);
}

/* ---------- escopo ---------- */

.indice { margin-top: 2rem; display: grid; gap: 10px; perspective: 900px; }
/* cada item é um cartão: entra girando com a rolagem e inclina com o mouse, com uma luz que segue o ponteiro */
.indice li {
  transform: rotateX(var(--entra, 0deg)) translateY(var(--sobe, 0px));
  opacity: var(--opac, 1);
  transform-origin: 50% 100%;
}
.indice a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: rgba(25, 38, 34, 0.42);
  text-decoration: none;
  overflow: hidden;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease), border-color 0.4s;
}
.indice a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(234, 217, 179, 0.16), transparent 60%);
  opacity: var(--foco, 0);
  transition: opacity 0.4s;
  pointer-events: none;
}
.indice a:hover { border-color: rgba(220, 193, 149, 0.5); transition: transform 0.12s linear, border-color 0.4s; }
.indice li.is-aceso a { border-color: rgba(220, 193, 149, 0.45); }
.indice strong { font-weight: 450; font-stretch: 110%; color: var(--gesso); transition: color 0.4s; }
.indice span { font-size: var(--t-sm); color: var(--nevoa); }
.indice a:hover strong, .indice li.is-aceso strong { color: var(--luz); }

/* ---------- painel (exemplo) ---------- */

.demo {
  margin-top: 2rem;
  padding: 18px 20px 16px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: rgba(25, 38, 34, 0.5);
}
.demo__totais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.demo__totais dt { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); }
.demo__totais dt::before {
  content: "";
  width: 12px; height: 8px;
  border-radius: 2px;
}
.demo__vendida dt::before { background: var(--luz); }
.demo__reservada dt::before { background: #7a6548; box-shadow: inset 0 0 0 1px var(--luz); }
.demo__disponivel dt::before { background: #25342e; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.demo__totais dd {
  margin-top: 2px;
  font-size: 1.75rem;
  font-weight: 260;
  font-stretch: 115%;
  color: var(--gesso);
  font-variant-numeric: tabular-nums;
}
.demo__mes { margin-top: 10px; font-size: var(--t-sm); color: var(--gesso); }
.demo .nota { margin-top: 6px; }
.dica {
  position: fixed;
  z-index: 50;
  left: 0; top: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--gesso);
  color: var(--mata);
  font-size: var(--t-xs);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}

/* ---------- OpenTrack ---------- */

.laudo { margin-top: 2rem; padding-top: 14px; border-top: 1px solid var(--linha); }
.laudo__titulo { font-size: var(--t-sm); color: var(--gesso); }
.laudo__partes { margin-top: 10px; }
.laudo__partes li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 12px;
  font-size: var(--t-sm);
}
.laudo__partes li + li { margin-top: 6px; }
.laudo__partes li span:last-child { text-align: right; color: var(--gesso); font-variant-numeric: tabular-nums; }
/* a barra mostra o peso de cada parte na nota (de 0 a 25) */
.laudo__partes li::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  width: calc(var(--peso) * 4%);
  border-radius: 0 3px 3px 0;
  background: var(--maquete);
}
.laudo__partes li:nth-child(1), .laudo__partes li:nth-child(2) { --peso: 25; }
.laudo__partes li:nth-child(3), .laudo__partes li:nth-child(4) { --peso: 20; }
.laudo__partes li:nth-child(5) { --peso: 10; }
.dupla strong { color: var(--luz); font-weight: 500; }

/* ---------- arquivos 3D ---------- */

.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2rem; counter-reset: etapa; }
.etapas li { padding-top: 12px; border-top: 1px solid var(--linha); counter-increment: etapa; transition: border-color 0.4s; }
.etapas strong { display: block; font-weight: 450; font-stretch: 110%; transition: color 0.4s; }
.etapas strong::before { content: counter(etapa) " "; color: var(--nevoa); font-variant-numeric: tabular-nums; }
.etapas span { display: block; margin-top: 4px; font-size: var(--t-xs); line-height: 1.5; }
.etapas li.is-aceso { border-top-color: var(--luz); }
.etapas li.is-aceso strong { color: var(--luz); }

/* ---------- domínio e hospedagem ---------- */

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 0.5rem; }
.dupla h3 { margin-top: 1.75rem; }

/* ---------- prazo ---------- */

.linha-tempo { position: relative; margin-top: 2.25rem; }
.linha-tempo::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--linha-forte);
}
.linha-tempo li { position: relative; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 20px; padding: 0 0 1.25rem 30px; }
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--maquete);
  background: var(--mata);
  transition: background-color 0.4s, border-color 0.4s;
}
.linha-tempo li.is-aceso::before { background: var(--luz); border-color: var(--luz); }
.linha-tempo__quando { font-stretch: 110%; color: var(--gesso); font-variant-numeric: tabular-nums; }
.linha-tempo li.is-aceso .linha-tempo__quando { color: var(--luz); }

/* ---------- investimento ---------- */

.cena--investimento .cena__texto { width: min(100%, 40rem); }

/* o ingresso: um cartão com borda dourada e canhoto picotado. Ao entrar na tela ele vem deitado e assenta;
   com o mouse, inclina e um reflexo holográfico corre pela superfície */
.ingresso { margin-top: 2rem; perspective: 1100px; }
.ingresso__cartao {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.2rem;
  border-radius: 16px;
  background:
    linear-gradient(var(--mata), var(--mata)) padding-box,
    linear-gradient(135deg, rgba(234, 217, 179, 0.7), rgba(138, 107, 76, 0.35) 40%, rgba(234, 217, 179, 0.55) 70%, rgba(138, 107, 76, 0.4)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: rotateX(calc(var(--deita, 0deg) + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) scale(var(--escala, 1));
  transform-origin: 50% 100%;
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}
.ingresso.is-mouse .ingresso__cartao { transition: transform 0.1s linear; }
.ingresso__corpo { padding: 22px 24px 4px; background: radial-gradient(120% 90% at 0% 0%, rgba(25, 38, 34, 0.75), rgba(11, 11, 10, 0.9)); }
.ingresso__canhoto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 0;
  border-left: 1px dashed rgba(220, 193, 149, 0.4);
  background: linear-gradient(180deg, rgba(138, 107, 76, 0.22), rgba(234, 217, 179, 0.08));
}
/* os dois recortes do picote */
.ingresso__canhoto::before, .ingresso__canhoto::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mata);
  box-shadow: inset 0 0 0 1px rgba(220, 193, 149, 0.35);
}
.ingresso__canhoto::before { top: -9px; }
.ingresso__canhoto::after { bottom: -9px; }
.ingresso__nome { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ingresso__nome { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champanhe); }
.ingresso__selo { margin-bottom: 14px; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--nevoa); }
.ingresso__selo i { font-style: normal; color: var(--luz); }
.ingresso .tabela thead th { padding-top: 0; }
.ingresso__brilho {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(420px circle at var(--mx, 30%) var(--my, 20%), rgba(255, 244, 222, 0.16), transparent 55%),
    linear-gradient(115deg, transparent 20%, rgba(234, 217, 179, 0.1) 38%, rgba(190, 210, 220, 0.07) 46%, rgba(234, 200, 160, 0.1) 54%, transparent 72%);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, var(--holo, 50%) 0;
  mix-blend-mode: screen;
}
.tabela-rolagem { margin-top: 2rem; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 14px 0; border-bottom: 1px solid var(--linha); text-align: right; vertical-align: top; }
.tabela th:first-child { text-align: left; padding-right: 20px; }
.tabela td { padding-left: 20px; white-space: nowrap; color: var(--gesso); }
.tabela thead th { padding-top: 0; font-size: var(--t-xs); font-weight: 400; color: var(--nevoa); }
.tabela tbody th { font-weight: 450; color: var(--gesso); }
.tabela small { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: 350; color: var(--nevoa); }
.tabela__soma th, .tabela__soma td { border-top: 1px solid var(--linha-forte); border-bottom: 0; font-weight: 500; }
.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 0.25rem;
  padding: 18px 0;
}
.total span { color: var(--gesso); }
.total strong {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.6vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--luz);
  background: var(--ouro);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ouro 7s ease-in-out infinite alternate;
  font-variant-numeric: lining-nums tabular-nums;
}
.pagamento { margin-top: 0.5rem; }
.parcelas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.parcelas > div { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; }
.parcelas dt { font-size: var(--t-sm); color: var(--gesso); }
.parcelas dd { margin-top: 4px; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; color: var(--luz); font-variant-numeric: lining-nums tabular-nums; }
.parcelas p { margin-top: 4px; font-size: var(--t-xs); }
.dupla--miuda { font-size: var(--t-sm); }

/* ---------- rodapé ---------- */

.rodape {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--linha);
  background: var(--mata);
  font-size: var(--t-xs);
}
.rodape__oh { width: 104px; fill: var(--maquete); }

/* sem 3D (navegador sem WebGL): as ilustrações aparecem como imagens */
.sem-3d .cena__foto { display: block; margin-top: 2rem; }
.sem-3d .cena__foto img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linha); }
.sem-3d .cena__foto figcaption { margin-top: 8px; font-size: var(--t-xs); }
/* arquivos 3D: as três etapas lado a lado, recortadas no centro */
.cena__foto--tres { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sem-3d .cena__foto--tres { display: grid; }
.cena__foto--tres img { aspect-ratio: 3 / 4; object-fit: cover; }
.cena__foto--tres figcaption { grid-column: 1 / -1; }
.sem-3d .nota--ilustracao, .sem-3d .rolar { display: none; }
.sem-3d .cena { grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); gap: 0 5vw; }

/* ---------- celular e tablet ---------- */

@media screen and (max-width: 860px) {
  :root { --topo-h: 58px; }
  .topo__oh { width: 92px; }
  .topo__home { height: 28px; }
  .topo__marcas { gap: 12px; }
  .botao { height: 36px; padding: 0 14px; }

  body::before { display: none; }
  /* o 3D aparece na parte de cima; o texto sobe por cima dele num fundo sólido */
  .cena { display: block; padding: 46svh 0 0; min-height: 0; }
  .cena--longa { min-height: 0; }
  .cena__texto {
    width: auto;
    padding: 5.5rem var(--gutter) 4.5rem;
    background: linear-gradient(180deg, rgba(11, 11, 10, 0) 0, var(--mata) 5rem);
  }
  .cena--abertura { padding-top: 40svh; }
  .cena--abertura .cena__texto { padding-top: 4rem; }
  .rolar { display: none; }
  .indice a { grid-template-columns: 1fr; }
  /* no celular a faixa fica embaixo do texto da abertura, sem passar por trás dele */
  .plano { position: relative; height: 16svh; margin-top: -1.5rem; }
  .ingresso__cartao { grid-template-columns: minmax(0, 1fr) 3.2rem; }
  .ingresso__corpo { padding: 18px 16px 2px; }
  .ingresso__nome { font-size: 1.1rem; }
  .dupla, .parcelas { grid-template-columns: 1fr; }
  .dupla { gap: 0; }
  .etapas { grid-template-columns: 1fr; }
  .linha-tempo li { grid-template-columns: 1fr; }
  .demo__totais dd { font-size: 1.4rem; }
  .sem-3d .cena { padding-top: 0; }
  .sem-3d .cena__texto { padding-top: calc(var(--topo-h) + 2rem); }
}

@media screen and (max-width: 380px) {
  .topo__oh { width: 80px; }
  .topo__home { height: 24px; }
  .topo__traco { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ==========================================================================
   Impressão (é daqui que sai o PDF): A4, capa verde e páginas claras.
   ========================================================================== */

@page {
  size: A4;
  margin: 16mm 16mm 20mm;
  @bottom-left { content: "Magnific Palace: proposta da Open House para a Home Empreendimentos"; font: 7.5pt Archivo, sans-serif; color: #62695f; }
  @bottom-right { content: counter(page) " de " counter(pages); font: 7.5pt Archivo, sans-serif; color: #62695f; }
}
@page capa {
  margin: 0;
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

@media print {
  :root {
    --tinta: #192622;
    --tinta-2: #62695f;
    --fio: #d6d2c2;
    --ouro-p: #8a6b4c;
  }
  html, body { background: #fff !important; color: var(--tinta-2); font-size: 10.5pt; line-height: 1.5; }
  body::before, .palco, .topo, .pular, .rolar, .nota--ilustracao, .dica, .demo, .rodape { display: none !important; }
  strong { color: var(--tinta); }

  /* sem ilustrações, os itens seguem um depois do outro; título e começo do texto nunca se separam */
  .cena {
    display: block;
    min-height: 0 !important;
    padding: 0;
    margin-top: 16mm;
  }
  .cena h2, .cena__para { break-after: avoid; }
  .lead, .lista, .passos, .linha-tempo, .indice, .dupla { break-inside: avoid; }
  .cena--abertura + .cena { margin-top: 0; }
  /* prazo e investimento nunca se dividem entre duas páginas */
  #prazo, .cena--investimento { break-inside: avoid; }
  .cena__texto { width: auto; }
  .cena h2 { font-size: 26pt; color: var(--tinta); }
  .cena__para { color: var(--ouro-p); }
  [data-revelar] .palavra { opacity: 1 !important; }
  .plano { display: none; }
  .indice { display: block; border-top: 1px solid var(--fio); }
  .indice li { transform: none !important; opacity: 1 !important; border-bottom: 1px solid var(--fio); }
  .indice a { transform: none !important; background: none; border: 0; border-radius: 0; padding: 8pt 0; }
  .indice a::before, .ingresso__brilho { display: none; }
  .ingresso__cartao { transform: none !important; box-shadow: none; background: #fff; border: 1px solid var(--fio); }
  .ingresso__corpo { background: none; }
  .ingresso__canhoto { background: #f6f2e8; border-left-color: var(--fio); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ingresso__canhoto::before, .ingresso__canhoto::after { background: #fff; box-shadow: inset 0 0 0 1px var(--fio); }
  .ingresso__nome { color: var(--ouro-p); }
  .total strong, .ouro { background: none; -webkit-text-fill-color: currentColor; color: var(--ouro-p); animation: none; }
  .cena--abertura .ouro { color: var(--champanhe); }
  .cena h3 { color: var(--tinta); margin-top: 13pt; margin-bottom: 6pt; break-after: avoid; }
  .laudo, .etapas, .indice { margin-top: 14pt; }
  .lead { color: var(--tinta); opacity: 1; font-size: 12pt; }
  .lista li::before { background: var(--ouro-p); }
  .passos li::before { border-color: var(--fio); color: var(--tinta); }
  .nota { color: var(--tinta-2); }
  li, .demo, .laudo, .tabela, .total, .parcelas, .etapas, .dupla > div { break-inside: avoid; }

  .cena__foto { display: none; }
  .cena--abertura .cena__foto { display: block; break-inside: avoid; }
  .cena__foto { margin-top: 10pt; }
  /* a ilustração inteira, com o mesmo verde nas sobras */
  .cena__foto img { width: 100%; height: 68mm; object-fit: contain; background: var(--mata); border-radius: 6pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cena--abertura .cena__foto img { height: 108mm; object-fit: cover; }
  .cena__foto figcaption { margin-top: 5pt; font-size: 8.5pt; color: var(--tinta-2); }

  /* capa: página inteira no preto carvão da Open House */
  .cena--abertura {
    page: capa;
    margin-top: 0;
    break-before: auto;
    break-after: page;
    height: 297mm;
    padding: 20mm 18mm 16mm;
    background: var(--capa) !important;
    color: var(--nevoa);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .capa-marcas { display: flex; align-items: center; gap: 8mm; }
  .capa-marcas__oh { width: 42mm; fill: var(--maquete); }
  .capa-marcas__traco { width: 0.3mm; height: 12mm; background: rgba(200, 197, 181, 0.4); }
  .capa-marcas__home { width: auto; height: 16mm; }
  .cena--abertura .cena__texto { width: auto; margin-top: 18mm; }
  .cena--abertura .abertura__titulo { font-size: 50pt; color: var(--gesso); }
  .cena--abertura .abertura__sub { font-size: 22pt; }
  .cena--abertura .lead { color: var(--gesso); font-size: 13pt; }
  .cena--abertura strong { color: var(--gesso); }
  .cena--abertura .cena__foto { margin-top: auto; }
  .cena--abertura .cena__foto img { border-radius: 4pt; }

  .indice a { text-decoration: none; grid-template-columns: 50mm 1fr; }
  .indice strong { color: var(--tinta); }
  .indice li, .indice, .laudo, .etapas li, .tabela th, .tabela td { border-color: var(--fio) !important; }
  .demo { border-color: var(--fio); background: none; }
  .demo__totais dd { color: var(--tinta); }
  .demo__reservada dt::before, .demo__vendida dt::before, .demo__disponivel dt::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .laudo__titulo, .laudo__partes li span:last-child { color: var(--tinta); }
  .laudo__partes li::after { background: var(--tinta); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dupla strong, .total strong, .parcelas dd { color: var(--ouro-p); }
  .etapas strong, .linha-tempo__quando, .tabela td, .tabela tbody th, .total span, .parcelas dt { color: var(--tinta); }
  .etapas li.is-aceso, .etapas li { border-top-color: var(--fio); }
  .etapas li.is-aceso strong { color: var(--tinta); }
  .linha-tempo::before { background: var(--fio); }
  .linha-tempo li::before { border-color: var(--tinta); background: #fff; }
  .linha-tempo li.is-aceso::before { background: #fff; border-color: var(--tinta); }
  .linha-tempo li.is-aceso .linha-tempo__quando { color: var(--tinta); }
  .indice li.is-aceso strong { color: var(--tinta); }
  .tabela__soma th, .tabela__soma td { border-top-color: var(--tinta) !important; }
  .total { border-color: var(--tinta); }
  .parcelas > div { border-color: var(--fio); }
}