/* impeccable-disable radial-halo: frente C (Claude), é o sol nascendo atrás do prédio, base do recurso de luz do dia */
/* Baldrame Incorporadora · exemplo de estilo da Studios Prumo
   Ideia: o lançamento Varanda Cumaru. Concreto, madeira cumaru e céu; fachada em elevação,
   planta que se abre por andar, sol que entra cômodo por cômodo e simulador de parcelas. */

@font-face { font-family: "Instrument Serif"; src: url("fontes/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fontes/instrument-serif-italico.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fontes/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --faixa: 32px;
  --concreto: #DCD8D1;
  --concreto-2: #CBC6BE;
  --branco: #F7F6F3;
  --grafite: #1D2326;
  --grafite-2: #2A3236;
  --texto-2: #4E575B;
  --claro: #EEF1F2;
  --claro-2: #A9B3B7;
  --cumaru: #7A4A2C;
  --cumaru-claro: #B07A50;
  --ceu: #C7DCE6;
  --sol: #F2B23A;
  --vidro: #8FB3C4;
  --serifa: "Instrument Serif", "Times New Roman", serif;
  --texto: "Sora", "Segoe UI", system-ui, sans-serif;
  --suave: cubic-bezier(0.2, 0.7, 0.1, 1);
  --mola: cubic-bezier(0.25, 1.2, 0.4, 1);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--faixa) + 76px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--faixa); background: var(--concreto); color: var(--grafite); font: 400 1rem/1.65 var(--texto); overflow-x: clip; }
svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--cumaru); outline-offset: 3px; }
.andar :focus-visible, .obra :focus-visible, .rodape :focus-visible, .sim-resultado :focus-visible, .chamada :focus-visible { outline-color: var(--sol); }

/* Faixa da Studios Prumo (igual em todos os exemplos) */
.faixa-prumo { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: center; min-height: var(--faixa); padding: 4px 16px; background: #0E0E10; color: #F2F0EB; font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.01em; text-align: center; text-decoration: none; }
.faixa-prumo:hover { text-decoration: underline; text-underline-offset: 3px; }
.faixa-prumo:focus-visible { outline: 2px solid #6875FF; outline-offset: -4px; }
@media (max-width: 480px) { :root { --faixa: 40px; } .faixa-prumo { font-size: 11px; } }

/* Topo */
.topo { position: sticky; top: var(--faixa); z-index: 50; overflow-x: clip; display: flex; align-items: center; gap: 28px; padding: 12px var(--margem); background: rgba(247, 246, 243, 0.94); border-bottom: 1px solid rgba(29, 35, 38, 0.1); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.marca-sinal { width: 36px; height: 36px; flex: none; fill: var(--grafite); }
.marca-sinal .ms-base { fill: var(--cumaru); }
.marca-nome { font: 400 1.875rem/1 var(--serifa); white-space: nowrap; }
.marca-nome small { font: 500 0.75rem/1 var(--texto); color: var(--texto-2); letter-spacing: 0.02em; margin-left: 2px; }
.topo nav { display: flex; gap: 22px; margin-left: auto; }
.topo nav a { font: 500 0.875rem/1 var(--texto); text-decoration: none; color: var(--texto-2); padding: 8px 0; }
.topo nav a:hover { color: var(--grafite); text-decoration: underline; text-decoration-color: var(--cumaru); text-underline-offset: 6px; }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 999px; font: 600 0.9375rem/1 var(--texto); text-decoration: none; cursor: pointer; transition: transform 220ms var(--mola), background-color 200ms ease; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: scale(0.98); }
.botao-escuro { background: var(--grafite); color: var(--branco); }
.botao-linha { border-color: var(--grafite); color: var(--grafite); background: transparent; }
.botao-sol { background: var(--sol); color: var(--grafite); }
.botao-claro { background: var(--branco); color: var(--cumaru); }
.topo .botao { min-height: 42px; padding: 0 18px; font-size: 0.875rem; flex: none; }

/* Cabeças */
.cabeca { max-width: var(--largura); margin: 0 auto 48px; }
.cabeca h2 { font: 400 clamp(2.6rem, 5.2vw, 4.6rem)/1 var(--serifa); letter-spacing: -0.01em; max-width: 18ch; }
.cabeca p { margin-top: 16px; max-width: 58ch; color: var(--texto-2); font-size: 1.0625rem; }
.cabeca-clara p { color: var(--claro-2); }

/* Abertura */
.abertura { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; min-height: min(900px, calc(100svh - var(--faixa) - 67px)); padding: clamp(40px, 6vw, 80px) var(--margem) 0; overflow: hidden; background: linear-gradient(180deg, #B9D2DF 0%, #DCE6EA 52%, var(--concreto) 100%); }
.ceu { position: absolute; inset: 0; pointer-events: none; }
.sol-abertura { position: absolute; top: 9%; left: 47%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFE2A0 0%, var(--sol) 55%, rgba(242, 178, 58, 0) 72%); animation: nascer 2.4s var(--suave) both; }
@keyframes nascer { from { transform: translateY(160px); opacity: 0; } to { transform: none; opacity: 1; } }
.nuvem { position: absolute; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); animation: nuvem 70s linear infinite; }
.nuvem::before { content: ""; position: absolute; left: 22%; bottom: 10px; width: 46%; height: 40px; border-radius: 50%; background: inherit; }
.n1 { top: 14%; left: 8%; width: 180px; }
.n2 { top: 26%; left: 58%; width: 130px; animation-duration: 90s; animation-delay: -30s; }
.n3 { top: 8%; left: 72%; width: 210px; animation-duration: 110s; animation-delay: -60s; opacity: 0.8; }
@keyframes nuvem { from { transform: translateX(-30vw); } to { transform: translateX(60vw); } }
.abertura-texto { grid-column: 1 / 7; grid-row: 1; align-self: center; position: relative; z-index: 2; padding-bottom: 64px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; animation: surgir 0.7s ease 0.1s both; }
.etiquetas li { padding: 6px 12px; border-radius: 999px; background: var(--grafite); color: var(--branco); font: 600 0.75rem/1.2 var(--texto); }
.etiquetas li + li { background: var(--branco); color: var(--cumaru); }
h1 { margin-top: 22px; font: 400 clamp(4.5rem, 10.4vw, 9.5rem)/0.86 var(--serifa); letter-spacing: -0.02em; }
h1 span { display: block; animation: surgir-grande 1s var(--suave) both; }
h1 span + span { padding-left: 0.5em; animation-delay: 0.15s; }
@keyframes surgir-grande { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lead { margin-top: 26px; max-width: 44ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); color: #2F383C; animation: surgir 0.8s ease 0.45s both; }
.fatos { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 28px; animation: surgir 0.8s ease 0.6s both; }
.fatos dt { font: 600 0.75rem/1.2 var(--texto); color: var(--texto-2); }
.fatos dd { font: 400 1.875rem/1.1 var(--serifa); }
.fatos small { font: 500 0.6875rem var(--texto); color: var(--texto-2); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; animation: surgir 0.8s ease 0.75s both; }
.abertura-predio { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 1; align-self: end; }
.fachada { width: 100%; height: auto; overflow: visible; }
.chao rect { fill: #A8A196; }
.t-base { fill: #C9C3BA; } .t-vidro { fill: #5E7F90; } .t-caixilho { stroke: var(--grafite-2); stroke-width: 1.5; } .t-marquise { fill: var(--grafite-2); }
.laje { fill: #B9B3AA; }
.u-parede { fill: #EDEAE4; stroke: #D6D1C9; stroke-width: 0.8; }
.u-varanda { fill: #3C4A50; }
.u-vidro { fill: #6F93A5; }
.u-vidro.acesa, .u-janela.acesa { fill: #F4D58A; }
.u-ripas { stroke: var(--cumaru-claro); stroke-width: 2.4; }
.u-guarda { fill: rgba(200, 225, 235, 0.35); stroke: #9DB7C3; stroke-width: 1; }
.u-janela { fill: #7FA3B5; }
.c-platibanda { fill: #B9B3AA; } .c-pergolado { stroke: var(--cumaru); stroke-width: 3; fill: none; } .c-casa { fill: #E2DED7; } .c-piscina { stroke: #4FA3C7; stroke-width: 4; }
.arvore circle { fill: #5E7F52; } .arvore circle + circle { fill: #6E9160; } .tronco { stroke: #5A4030; stroke-width: 4; fill: none; stroke-linecap: round; }
.abertura .andar, .abertura .terreo, .abertura .cobertura { animation: subir-andar 0.55s var(--suave) both; animation-delay: calc(0.15s + var(--a) * 0.075s); }
@keyframes subir-andar { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.abertura .acesa { animation: acender 0.5s ease both; animation-delay: calc(1.4s + var(--l)); }
@keyframes acender { from { opacity: 0.2; } to { opacity: 1; } }
.abertura .arvore { animation: arvore 0.8s ease 1.3s both; }
@keyframes arvore { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.pausado *, .pausado *::before { animation-play-state: paused !important; }

/* Condições */
.condicoes { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--concreto); }
.condicoes-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: var(--largura); margin: 0 auto; }
.condicoes-lista li { padding: 32px; border-radius: 18px; background: var(--branco); }
.condicao-numero { display: block; height: 64px; margin-bottom: 20px; font: 400 4rem/1 var(--serifa); color: var(--cumaru); }
.condicao-numero svg { width: 56px; height: 56px; fill: none; stroke: var(--cumaru); stroke-width: 2.4; stroke-linejoin: round; }
.condicoes-lista h3 { font: 600 1.1875rem/1.3 var(--texto); }
.condicoes-lista p { margin-top: 10px; color: var(--texto-2); }

/* Escolha o andar */
.andar { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--grafite); color: var(--claro); }
.andar-grade { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr); gap: 40px; max-width: var(--largura); margin: 0 auto; align-items: start; }
.andar-controle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 6px; border-radius: 999px; background: var(--grafite-2); }
.passo { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--grafite); color: var(--claro); font-size: 1.5rem; cursor: pointer; }
.andar-atual { font: 400 1.875rem/1 var(--serifa); }
.fachada-quadro { position: relative; padding: 18px 10px 0 18px; border-radius: 16px; background: linear-gradient(180deg, #2E3A40, var(--grafite-2)); }
.fachada-interativa .u-alvo { fill: transparent; cursor: pointer; transition: opacity 200ms ease; }
.fachada-interativa .vendido .u-alvo { fill: #111618; opacity: 0.66; }
.fachada-interativa .reservado .u-alvo { fill: var(--sol); opacity: 0.32; }
.fachada-interativa .escolhida .u-alvo { fill: var(--sol); opacity: 0.6; stroke: #FFE2A0; stroke-width: 2; }
.fachada-interativa .u-parede { fill: #D9D5CE; }
.andar-num { font: 600 10px var(--texto); fill: var(--claro-2); text-anchor: end; }
.realce { fill: none; stroke: var(--sol); stroke-width: 2.5; rx: 3; transition: transform 420ms var(--mola); }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 0.8125rem; color: var(--claro-2); }
.l { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -6px; }
.l-disp { background: #D9D5CE; } .l-res { background: #C49536; } .l-vend { background: #4A5357; }
.finais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.final { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 76px; padding: 12px 14px; border: 1px solid #45505A; border-radius: 12px; background: transparent; color: var(--claro); text-align: left; cursor: pointer; transition: transform 200ms var(--mola); }
.final b { font: 400 1.5rem/1 var(--serifa); }
.final span { font-size: 0.75rem; color: var(--claro-2); }
.final em { font-style: normal; font-size: 0.6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #3A464C; }
.final.vendido em { background: #111618; color: var(--claro-2); }
.final.reservado em { background: #6E5520; color: #FFE7B0; }
.final.disponivel em { background: #2F5A47; color: #CDEEDD; }
.final[aria-checked="true"] { border-color: var(--sol); background: rgba(242, 178, 58, 0.12); }
.final:active { transform: scale(0.97); }
.planta-area { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.planta-quadro { padding: 12px; border-radius: 16px; background: var(--branco); }
.planta { width: 100%; height: auto; }
.planta[hidden] { display: none; }
.comodo rect { fill: #FBFAF8; stroke: #B8BDBF; stroke-width: 1; transition: fill 160ms ease; }
.comodo-varanda rect { fill: #EADFD0; }
.comodo-circulacao rect { fill: #F1EFEB; }
.comodo.realce rect { fill: #F6E2B0; }
.c-nome { font: 600 11px var(--texto); fill: var(--grafite); text-anchor: middle; }
.c-area { font: 400 10.5px var(--texto); fill: var(--texto-2); text-anchor: middle; }
.c-pequeno { font-size: 8.5px; }
.parede-ext { fill: none; stroke: var(--grafite); stroke-width: 6; }
.janela { stroke: #6FA6C4; stroke-width: 5; }
.porta { fill: none; stroke: #7A8285; stroke-width: 1.2; }
.churrasqueira rect { fill: #8A8F91; } .churrasqueira path { stroke: #F2B23A; stroke-width: 2; }
.norte circle { fill: none; stroke: var(--texto-2); } .norte path { fill: var(--cumaru); } .norte text { font: 700 10px var(--texto); fill: var(--texto-2); text-anchor: middle; }
.cota { font: 500 11px var(--texto); fill: var(--texto-2); text-anchor: middle; }
.espelhada .planta-corpo, .espelhada .planta-corpo text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.planta-quadro.troca .planta:not([hidden]) { animation: planta-abre 0.55s var(--suave) both; }
@keyframes planta-abre { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.info-tipo { font: 600 0.8125rem/1.2 var(--texto); color: var(--sol); }
.info-titulo { margin-top: 6px; font: 400 2.25rem/1 var(--serifa); }
.info-dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0; padding: 14px 0; border-top: 1px solid #3A464C; border-bottom: 1px solid #3A464C; font-size: 0.875rem; }
.info-dados dt { color: var(--claro-2); }
.comodos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.comodos-lista button { min-height: 34px; padding: 0 10px; border: 1px solid #45505A; border-radius: 999px; background: transparent; color: var(--claro); font-size: 0.75rem; cursor: pointer; }
.comodos-lista button:hover, .comodos-lista button:focus-visible { border-color: var(--sol); background: rgba(242, 178, 58, 0.15); }
.interesse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 14px; align-items: end; margin-top: 22px; padding: 20px; border-radius: 14px; background: var(--grafite-2); }
.interesse:not([hidden]) { animation: surgir 0.4s ease both; }
.interesse-titulo { grid-column: 1 / -1; font-weight: 600; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; }
.campo label, .campo legend { font: 600 0.8125rem/1.2 var(--texto); color: inherit; padding: 0; }
.andar .campo input { min-height: 46px; padding: 0 14px; border: 1px solid #56626A; border-radius: 10px; background: var(--grafite); color: var(--claro); }
.campo input[aria-invalid="true"] { border-color: #FF9B85 !important; }
.aviso-form { grid-column: 1 / -1; font-size: 0.875rem; }
.aviso-form:empty { display: none; }

/* Luz do dia */
.luz { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 128px) var(--margem); background: #E9EEF0; }
.luz-ceu { position: absolute; inset: 0; pointer-events: none; }
.luz-ceu span { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.ceu-manha { background: linear-gradient(180deg, #F6D7B8, #ECE6E0 70%); }
.ceu-dia { background: linear-gradient(180deg, #CFE3EE, #EEF2F3 70%); opacity: 1; }
.ceu-tarde { background: linear-gradient(180deg, #F2B9A0, #EADBD3 70%); }
.luz > .cabeca, .luz-grade { position: relative; }
.luz-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 40px; max-width: var(--largura); margin: 0 auto; align-items: center; }
.arco-sol { width: 100%; height: auto; overflow: visible; margin-bottom: -6px; }
.arco { fill: none; stroke: rgba(122, 74, 44, 0.35); stroke-width: 1.5; stroke-dasharray: 4 6; }
.horizonte { stroke: rgba(29, 35, 38, 0.2); }
.sol-luz circle { fill: var(--sol); }
.sol-luz .sol-halo { opacity: 0.25; }
.sol-luz { transform: translate(20px, 110px); }
.luz-plantas { padding: 12px; border-radius: 16px; background: var(--branco); box-shadow: 0 30px 60px -36px rgba(29, 35, 38, 0.45); }
.mancha { fill: #FFD873; opacity: 0; transform-box: view-box; transform-origin: 0 0; transition: opacity 250ms ease; mix-blend-mode: multiply; }
.luz-unidade { font: 400 1.75rem/1.1 var(--serifa); }
.luz-rotulo { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; font-weight: 600; font-size: 0.875rem; }
.luz-rotulo output { font: 400 2.25rem/1 var(--serifa); }
#luz-hora { width: 100%; margin: 10px 0 18px; accent-color: var(--cumaru); height: 28px; }
.estacoes { display: flex; gap: 8px; border: 0; padding: 0; }
.estacoes legend { width: 100%; margin-bottom: 8px; font-weight: 600; font-size: 0.875rem; padding: 0; }
.estacoes label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--grafite); border-radius: 999px; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.estacoes label:has(input:checked) { background: var(--grafite); color: var(--branco); }
.estacoes input { accent-color: var(--sol); margin: 0; }
.luz-leitura { margin-top: 22px; font-size: 1.0625rem; font-weight: 500; min-height: 3.3em; }
.luz-horas { margin-top: 10px; color: var(--cumaru); font-weight: 600; }
.luz-nota { margin-top: 16px; font-size: 0.875rem; color: var(--texto-2); }

/* Simulador */
.simulador { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--concreto); }
.sim-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; max-width: var(--largura); margin: 0 auto; align-items: start; }
.sim-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 28px; border-radius: 18px; background: var(--branco); }
.simulador .campo input { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid #8C9497; border-radius: 12px; background: #fff; color: var(--grafite); font: 500 1.0625rem var(--texto); }
.moeda { position: relative; }
.moeda span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--texto-2); }
.simulador .moeda input { padding-left: 44px; }
.sistemas { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sistemas legend { width: 100%; margin-bottom: 8px; }
.sistemas label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--grafite); border-radius: 999px; font-weight: 600; cursor: pointer; }
.sistemas label small { font-weight: 400; font-size: 0.8125rem; color: var(--texto-2); }
.sistemas label:has(input:checked) { background: var(--grafite); color: var(--branco); }
.sistemas label:has(input:checked) small { color: var(--claro-2); }
.sistemas input { accent-color: var(--sol); margin: 0; }
.sim-resultado { min-height: 100%; padding: 28px; border-radius: 18px; background: var(--grafite); color: var(--claro); }
.sim-vazio { display: grid; place-items: center; min-height: 260px; color: var(--claro-2); text-align: center; font: 400 1.75rem/1.2 var(--serifa); }
.sim-cheio:not([hidden]) { animation: surgir 0.4s ease both; }
.sim-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sim-numeros dt { font-size: 0.8125rem; color: var(--claro-2); }
.sim-numeros dd { font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--serifa); }
.barra-composicao { position: relative; height: 18px; margin: 26px 0 8px; border-radius: 999px; overflow: hidden; background: #3A464C; }
.seg { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--suave); }
.seg-entrada { background: var(--cumaru-claro); }
.seg-financiado { background: var(--vidro); }
.seg-juros { background: var(--sol); }
.barra-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8125rem; color: var(--claro-2); }
.q { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: -10px; }
.q-entrada { background: var(--cumaru-claro); } .q-financiado { background: var(--vidro); } .q-juros { background: var(--sol); }
.grafico { width: 100%; height: auto; margin-top: 22px; }
.grafico-area { fill: rgba(242, 178, 58, 0.16); }
.grafico-linha { fill: none; stroke: var(--sol); stroke-width: 2.5; }
.grafico-base { stroke: #45505A; }
.sim-nota { margin-top: 14px; font-size: 0.8125rem; color: var(--claro-2); }
.sim-erro { margin-top: 12px; color: #FFB4A3; font-size: 0.875rem; }
.sim-erro:empty { display: none; }

/* Empreendimento */
.empreendimento { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--branco); }
.emp-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 40px; max-width: var(--largura); margin: 0 auto; align-items: start; }
.lazer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.lazer svg { width: 52px; height: 52px; margin-bottom: 14px; fill: none; stroke: var(--cumaru); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lazer h3 { font: 600 1.0625rem/1.3 var(--texto); }
.lazer p { margin-top: 6px; color: var(--texto-2); font-size: 0.9375rem; }
.ficha { padding: 28px; border-radius: 18px; background: var(--concreto); }
.ficha h3 { font: 400 2rem/1 var(--serifa); margin-bottom: 14px; }
.ficha dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--concreto-2); font-size: 0.9375rem; }
.ficha dt { color: var(--texto-2); }
.ficha small { color: var(--texto-2); font-size: 0.75rem; }

/* Obra */
.obra { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--grafite); color: var(--claro); }
.obra-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; max-width: var(--largura); margin: 0 auto; }
.etapas { position: relative; counter-reset: etapa; padding-left: 64px; }
.etapas::before, .etapas::after { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: #3A464C; }
.etapas::after { background: var(--sol); transform-origin: top; }
.etapas li { position: relative; counter-increment: etapa; padding-bottom: 28px; }
.etapas li::before { content: counter(etapa); position: absolute; left: -64px; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--grafite-2); border: 2px solid var(--sol); font: 400 1.5rem/1 var(--serifa); color: var(--sol); z-index: 1; }
.etapas h3 { font: 400 1.75rem/1.1 var(--serifa); }
.etapas p { margin-top: 6px; color: var(--claro-2); }
.andamento { padding: 28px; border-radius: 18px; background: var(--grafite-2); align-self: start; }
.andamento h3 { font: 400 2rem/1 var(--serifa); }
.andamento-data { margin-top: 6px; font-size: 0.8125rem; color: var(--claro-2); }
.andamento ul { margin-top: 20px; display: grid; gap: 16px; }
.andamento li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 0.9375rem; }
.andamento b { font-weight: 600; color: var(--sol); }
.andamento i { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 999px; background: #3A464C; overflow: hidden; }
.andamento i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cumaru-claro), var(--sol)); transform-origin: left; transform: scaleX(var(--p)); }

/* Localização */
.localizacao { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--concreto); }
.loc-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 36px; max-width: var(--largura); margin: 0 auto; align-items: start; }
.mapa { width: 100%; height: auto; border-radius: 18px; }
.m-fundo { fill: #EFEDE9; }
.m-quadras rect { fill: #D3CEC6; }
.m-parque { fill: #A9C29A; }
.m-arvores circle { fill: #7FA06E; }
.m-lote { fill: var(--cumaru); }
.m-rotulos text { font: 500 12px var(--texto); fill: var(--texto-2); }
.m-rotulos .m-parque-nome { font: 400 20px var(--serifa); fill: #2F4A28; }
.m-pino circle { fill: var(--sol); stroke: var(--grafite); stroke-width: 2; }
.m-pino path { fill: var(--grafite); }
.m-destaque { font: 400 18px var(--serifa); fill: var(--grafite); }
.m-poi circle { fill: var(--grafite); stroke: var(--branco); stroke-width: 3; }
.m-poi text { font: 600 12px var(--texto); fill: var(--grafite); paint-order: stroke; stroke: #EFEDE9; stroke-width: 4px; }
.distancias li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--concreto-2); }
.distancias span { color: var(--texto-2); }
.estande { margin-top: 24px; padding: 24px; border-radius: 16px; background: var(--branco); }
.estande h3 { font: 400 1.75rem/1.1 var(--serifa); }
.estande address { margin-top: 10px; font-style: normal; }
.estande p { margin-top: 8px; color: var(--texto-2); font-size: 0.9375rem; }
.ficticio { font-size: 0.8125rem !important; }
.outros { max-width: var(--largura); margin: 56px auto 0; }
.outros h3 { font: 400 2rem/1 var(--serifa); margin-bottom: 18px; }
.outros ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.outros li { padding: 24px; border-radius: 16px; background: var(--branco); }
.outros svg { width: 96px; height: auto; margin-bottom: 14px; fill: none; stroke: var(--grafite); stroke-width: 2; stroke-linejoin: round; }
.outro-nome { font: 400 1.5rem/1.1 var(--serifa); }
.outro-estado { display: inline-block; margin: 8px 0; padding: 3px 10px; border-radius: 999px; font: 600 0.75rem/1.4 var(--texto); }
.estado-entregue { background: #DCEBDD; color: #24502C; }
.estado-obras { background: #F7E6BE; color: #6B4A08; }
.estado-ultimas { background: #F1D9CC; color: #7A3417; }
.outros li p:last-child { color: var(--texto-2); font-size: 0.875rem; }

/* Perguntas */
.perguntas { padding: clamp(72px, 9vw, 128px) var(--margem); background: var(--branco); }
.perguntas .cabeca, .faq { max-width: 880px; }
.faq { margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--concreto-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 400 1.625rem/1.2 var(--serifa); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--cumaru); border-bottom: 2px solid var(--cumaru); transform: rotate(45deg); transition: transform 280ms var(--mola); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.resposta { padding: 0 40px 22px 0; color: var(--texto-2); }
.faq details[open] .resposta { animation: surgir 0.35s ease both; }

/* Chamada */
.chamada { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 160px) var(--margem); background: var(--cumaru); color: var(--branco); }
.chamada-predio { position: absolute; right: 4%; bottom: 0; width: min(420px, 50vw); height: 92%; background: url("predio.svg") no-repeat center bottom / contain; opacity: 0.28; }
.chamada-texto { position: relative; max-width: var(--largura); margin: 0 auto; }
.chamada h2 { font: 400 clamp(2.75rem, 6vw, 5.25rem)/1 var(--serifa); max-width: 16ch; }
.chamada p { margin-top: 16px; max-width: 52ch; font-size: 1.0625rem; color: #F3E6DB; }
.chamada-numero { font: 400 clamp(2.25rem, 5vw, 3.5rem)/1 var(--serifa) !important; color: var(--branco) !important; margin-top: 26px !important; }
.chamada .botao { margin-top: 24px; }
.aviso-whats { font-size: 0.9375rem !important; }
.aviso-whats:empty { display: none; }

/* Rodapé */
.rodape { padding: 72px var(--margem) 40px; background: var(--grafite); color: var(--claro-2); font-size: 0.875rem; }
.rodape-colunas { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; max-width: var(--largura); margin: 0 auto; }
.rodape h2 { margin-bottom: 14px; font: 600 0.875rem/1 var(--texto); color: var(--claro); }
.rodape li + li, .rodape-colunas p + p { margin-top: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--claro); text-decoration: underline; }
.rodape-nome { font: 400 2.5rem/1 var(--serifa); color: var(--claro); margin-bottom: 12px; }
.rodape-legal { max-width: var(--largura); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid #3A464C; font-size: 0.75rem; }
.rodape-legal p + p { margin-top: 6px; }

/* Movimento ligado à rolagem (igual no celular). Sem suporte, o JS usa IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .abertura-predio { animation: predio-sai linear forwards; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes predio-sai { to { transform: translateY(-8%) scale(0.95); opacity: 0.55; } }
    .condicoes-lista li { animation: tela-sobe linear forwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .condicoes-lista li:nth-child(2) { animation-range: entry 8% entry 90%; }
    .condicoes-lista li:nth-child(3) { animation-range: entry 16% entry 100%; }
    @keyframes tela-sobe { from { clip-path: inset(100% 0 0 0 round 18px); transform: translateY(40px); } to { clip-path: inset(0 0 0 0 round 18px); transform: none; } }
    .andar-fachada { animation: lado-esq linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes lado-esq { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
    .lazer svg { animation: icone-sobe linear forwards; animation-timeline: view(); animation-range: entry 10% entry 100%; }
    @keyframes icone-sobe { from { transform: translateY(34px) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
    .ficha dl div { animation: linha-entra linear forwards; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes linha-entra { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
    .etapas::after { animation: linha-tempo linear forwards; animation-timeline: view(); animation-range: entry 25% cover 70%; }
    @keyframes linha-tempo { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .andamento i::after { animation: barra-obra linear forwards; animation-timeline: view(); animation-range: entry 20% entry 100%; }
    @keyframes barra-obra { from { transform: scaleX(0); } to { transform: scaleX(var(--p)); } }
    .m-poi { animation: pino-cai linear forwards; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes pino-cai { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
    .outros li { animation: tela-sobe linear forwards; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .chamada-predio { animation: predio-sobe linear forwards; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes predio-sobe { from { transform: translateY(45%); } to { transform: none; } }
    .faq details { animation: linha-entra linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
.sem-timeline [data-revela] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.8s var(--suave); }
.sem-timeline [data-revela].visto { opacity: 1; transform: none; }
.sem-timeline .etapas::after { transform: scaleY(0); transition: transform 1.4s var(--suave) 0.2s; }
.sem-timeline .etapas.visto::after { transform: scaleY(1); }
.sem-timeline .andamento i::after { transform: scaleX(0); transition: transform 1.2s var(--suave) 0.3s; }
.sem-timeline .andamento.visto i::after { transform: scaleX(var(--p)); }

/* Responsivo */
@media (max-width: 1140px) {
  .topo nav { display: none; }
  .topo .botao { margin-left: auto; }
  .andar-grade { grid-template-columns: 1fr; }
  .andar-fachada { max-width: 560px; }
  .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .abertura { grid-template-columns: 1fr; min-height: 0; align-items: start; padding-bottom: 48px; }
  .abertura-texto { display: contents; }
  .etiquetas { order: 1; } h1 { order: 2; position: relative; z-index: 2; } .lead { order: 4; } .fatos { order: 5; } .acoes { order: 6; }
  .abertura-predio { order: 3; grid-column: 1; grid-row: auto; width: min(76%, 380px); justify-self: center; margin: -18px 0 4px; }
  .sol-abertura { left: auto; right: -24px; top: 3%; width: 96px; height: 96px; }
  .condicoes-lista, .outros ul { grid-template-columns: 1fr; }
  .planta-area, .luz-grade, .sim-grade, .emp-grade, .obra-grade, .loc-grade { grid-template-columns: 1fr; }
  .lazer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interesse { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .marca-nome { font-size: 1.5rem; }
  .marca-nome small { display: none; }
  .topo { gap: 12px; }
  .topo .botao { min-height: 40px; padding: 0 14px; }
  .finais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-form { grid-template-columns: 1fr; padding: 20px; }
  .sim-numeros { grid-template-columns: 1fr 1fr; }
  .lazer { grid-template-columns: 1fr; }
  .ficha dl div { grid-template-columns: 7.5rem 1fr; }
  .c-nome { font-size: 15px; }
  .c-area { font-size: 14px; }
  .c-pequeno { font-size: 11px; }
  .andar-num { font-size: 13px; }
  .m-rotulos text, .m-poi text { font-size: 16px; }
  .rodape-colunas { grid-template-columns: 1fr; }
  .chamada-predio { width: 70vw; opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}