/* ============================================================ Vértice — imóveis de alto padrão Demonstração Theatrum · mercado imobiliário O contrário do portal: quase nada por tela, tipografia grande e muito preto. Neste segmento o site não precisa mostrar volume — precisa parecer que não está com pressa de vender. ============================================================ */ :root{ --preto:#0A0A0A; --preto-2:#111110; --carta:#161614; --marfim:#EDE8DF; --suave:#8B857A; --linha:#26251F; --latao:#B99154; --latao-2:#D4AE74; --pino:#E0453C; --livre:#7FA98B; --display:'Marcellus',Georgia,serif; --sans:'Karla',system-ui,-apple-system,sans-serif; --mono:'Roboto Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--preto);color:var(--marfim);font:300 16.5px/1.75 var(--sans);overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:0} em{font-style:italic} code{font:500 .92em/1 var(--mono);letter-spacing:.08em;color:var(--latao-2); background:rgba(185,145,84,.12);padding:3px 7px;border-radius:2px} .wrap{width:min(1200px,90vw);margin:0 auto} .wrap-estreito{width:min(780px,90vw)} /* O atributo hidden precisa vencer o display do próprio componente. Sem isto, um .modal{display:grid} ou uma .barra{display:flex} marcados com hidden continuam na tela — o hidden vira letra morta porque a regra de classe tem mais especificidade que o padrão do navegador. */ [hidden]{display:none!important} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 30px;border:1px solid transparent; font:500 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase; text-decoration:none;cursor:pointer;transition:all .25s ease; } .btn-larg{width:100%} .btn-cheio{background:var(--latao);color:#150E04;border-color:var(--latao)} .btn-cheio:hover{background:var(--latao-2);border-color:var(--latao-2)} .btn-vazio{color:var(--marfim);border-color:rgba(237,232,223,.28);background:transparent} .btn-vazio:hover{border-color:var(--latao);color:var(--latao-2)} .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none} /* ============================================================ Placeholder de imagem As fotos ainda não existem. Cada .foto guarda o nome e o tamanho do arquivo em data-ph; se o der 404, o script do marca .sem-foto e o bloco aparece. Basta colocar o .jpg com o nome certo em img/ que ele some sozinho. ============================================================ */ .foto{position:relative;overflow:hidden;background:var(--preto-2)} .foto img{width:100%;height:100%;object-fit:cover} .foto.sem-foto{ background: repeating-linear-gradient(135deg, rgba(185,145,84,.07) 0 10px, transparent 10px 22px), linear-gradient(150deg, var(--preto-2), var(--linha)); } .foto.sem-foto img{opacity:0} .foto::after{ content:attr(data-ph); position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--suave);white-space:nowrap; border:1px solid var(--linha);border-radius:999px; padding:9px 15px;background:rgba(0,0,0,.44); opacity:0;transition:opacity .2s ease;pointer-events:none; } .foto.sem-foto::after{opacity:1} /* ---------- topo ---------- */ .topo{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent; transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease} .topo.rolou{background:rgba(10,10,10,.9);backdrop-filter:blur(12px);border-color:var(--linha)} .topo-in{display:flex;align-items:center;gap:30px;padding:22px 0} .marca{font-family:var(--display);font-size:1.55rem;letter-spacing:.06em;text-decoration:none; display:flex;flex-direction:column;gap:3px;flex:none;line-height:1} .marca em{font:400 8.5px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase; color:var(--suave);font-style:normal} .menu{display:flex;gap:30px;margin-left:auto} .menu a{font:400 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase; color:var(--suave);text-decoration:none;transition:color .25s ease} .menu a:hover{color:var(--latao-2)} .abre-menu{display:none;background:none;border:0;color:var(--marfim);cursor:pointer;padding:6px} .abre-menu svg{width:28px;height:28px} /* ---------- hero ---------- */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:150px 0 120px} .hero-foto{position:absolute;inset:0} .veu{position:absolute;inset:0; background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.66) 52%,rgba(10,10,10,.38) 100%)} .hero-in{position:relative;z-index:2;max-width:840px} .sobrancelha{display:inline-block;font:400 10.5px/1 var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--latao);margin-bottom:30px} .hero h1{font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:1.08} .hero .lead{margin-top:28px;max-width:54ch;color:rgba(237,232,223,.72);font-size:1.05rem} .hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px} .hero-rolar{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2; font:400 9.5px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--suave)} .hero-rolar::after{content:'';display:block;width:1px;height:34px;margin:12px auto 0; background:linear-gradient(180deg,var(--suave),transparent);animation:desce 2.4s ease-in-out infinite} @keyframes desce{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* ---------- seções ---------- */ .sec{padding:120px 0} .cab{max-width:60ch} .etiqueta{display:inline-block;font:400 10.5px/1 var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--latao);margin-bottom:20px} .sec h2{font-size:clamp(1.9rem,4vw,3rem)} .sub{margin-top:18px;color:var(--suave);font-size:1.01rem} /* ---------- manifesto ---------- */ .sec-manifesto{padding:120px 0;border-bottom:1px solid var(--linha)} .manifesto{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.4} .manifesto em{color:var(--latao-2)} .manifesto-pe{margin-top:34px;padding-top:26px;border-top:1px solid var(--linha); color:var(--suave);font-size:1rem;max-width:62ch} /* ---------- carteira ---------- */ .carteira{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-top:52px} .imovel{display:flex;flex-direction:column;text-decoration:none; border:1px solid var(--linha);background:var(--carta); transition:border-color .3s ease,transform .3s ease} .imovel:hover{border-color:rgba(185,145,84,.45);transform:translateY(-4px)} .imovel .foto{aspect-ratio:4/3} .imovel-corpo{padding:26px 26px 28px;display:flex;flex-direction:column;gap:11px;flex:1} .imovel-local{font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--latao)} .imovel h3{font-size:1.32rem;line-height:1.25} .imovel p{font-size:.93rem;color:var(--suave)} .imovel-specs{display:flex;flex-wrap:wrap;gap:14px;padding-top:14px;margin-top:auto; border-top:1px solid var(--linha);font:400 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--suave)} .imovel-preco{font-family:var(--display);font-size:1.5rem;padding-top:14px} .imovel-selo{align-self:flex-start;font:400 9.5px/1 var(--mono);letter-spacing:.18em; text-transform:uppercase;padding:6px 10px;border:1px solid var(--linha);color:var(--suave)} .imovel-selo.reservado{border-color:rgba(185,145,84,.5);color:var(--latao-2)} /* ============================================================ Cofre — a carteira reservada O gesto é o produto: digitar um código e a página revelar imóveis que não estavam ali. Num site real o código vem do painel do corretor; aqui a lista já está na página, e o texto da tela deixa isso claro em vez de fingir segurança. ============================================================ */ .sec-reservada{background:var(--preto-2);border-block:1px solid var(--linha)} .cofre{margin-top:52px} .cofre-porta{max-width:520px;margin:0 auto;text-align:center; border:1px solid var(--linha);background:var(--carta);padding:48px 40px} .cofre-icone{margin-bottom:22px;color:var(--latao)} .cofre-icone svg{width:44px;height:44px;margin:0 auto} .cofre-porta h3{font-size:1.5rem} .cofre-porta>p{margin-top:12px;color:var(--suave);font-size:.94rem} .cofre-campo{display:flex;gap:10px;margin-top:26px} .cofre-campo input{ flex:1;min-width:0;padding:14px 16px;background:var(--preto);border:1px solid var(--linha); color:var(--marfim);font:500 15px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase; transition:border-color .25s ease; } .cofre-campo input::placeholder{color:#4A4740;letter-spacing:.2em} .cofre-campo input:focus{outline:0;border-color:var(--latao)} .cofre-erro{margin-top:16px;font-size:.88rem;color:#D97062} .cofre-dica{margin-top:24px;padding-top:22px;border-top:1px solid var(--linha); font-size:.86rem;line-height:1.7;color:var(--suave)} .cofre-dica b{color:var(--marfim);font-weight:600} .cofre-pedir{display:inline-block;margin-top:18px;font:400 11px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--latao-2);text-decoration:none;border-bottom:1px solid rgba(185,145,84,.4); padding-bottom:4px;transition:color .25s ease,border-color .25s ease} .cofre-pedir:hover{color:var(--marfim);border-color:var(--marfim)} .cofre-cab{position:relative;max-width:60ch} .cofre-cab h3{font-size:2rem;margin-top:4px} .cofre-cab p{margin-top:12px;color:var(--suave);font-size:.95rem} .cofre-sair{position:absolute;right:0;top:0;background:none;border:1px solid var(--linha); color:var(--suave);padding:9px 16px;cursor:pointer; font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; transition:border-color .25s ease,color .25s ease} .cofre-sair:hover{border-color:var(--latao);color:var(--latao-2)} /* ============================================================ Agenda de visitas Três passos em coluna e um resumo grudado ao lado. O resumo fica sempre visível porque é ele que mostra o progresso — sem isso, no meio do terceiro passo a pessoa já esqueceu qual imóvel escolheu no primeiro. ============================================================ */ .agenda{display:grid;grid-template-columns:1fr 320px;gap:40px 48px;margin-top:52px; grid-template-areas:'p1 res' 'p2 res' 'p3 res';align-items:start} .agenda-passo:nth-of-type(1){grid-area:p1} .agenda-passo:nth-of-type(2){grid-area:p2} .agenda-passo:nth-of-type(3){grid-area:p3} .agenda-resumo{grid-area:res;position:sticky;top:100px; border:1px solid var(--linha);background:var(--carta);padding:30px} .passo-num{font:400 10.5px/1 var(--mono);letter-spacing:.24em;color:var(--latao)} .agenda-passo h3{font-size:1.42rem;margin:10px 0 20px} .agenda-nota{margin-top:14px;font-size:.86rem;color:var(--suave)} .agenda-imoveis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .opc{ border:1px solid var(--linha);background:transparent;color:var(--marfim); padding:15px 17px;cursor:pointer;text-align:left;font:inherit; display:flex;flex-direction:column;gap:5px;transition:all .22s ease; } .opc:hover{border-color:rgba(185,145,84,.5)} .opc.on{border-color:var(--latao);background:rgba(185,145,84,.09)} .opc strong{font:400 15px/1.3 var(--display);letter-spacing:.01em} .opc span{font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)} .opc.on span{color:var(--latao-2)} .agenda-dias{display:flex;gap:10px;flex-wrap:wrap} .dia{min-width:96px;align-items:center;text-align:center} .dia strong{font-size:1.5rem} .agenda-horas{display:flex;gap:10px;flex-wrap:wrap} .hora{padding:13px 20px;min-width:96px;align-items:center;text-align:center} .hora strong{font-size:1.05rem} .opc[disabled]{opacity:.3;cursor:not-allowed} .opc[disabled] span{color:#5C574E} .agenda-resumo dl{margin:20px 0 24px;display:flex;flex-direction:column;gap:12px} .agenda-resumo dl div{display:flex;justify-content:space-between;gap:14px; padding-bottom:11px;border-bottom:1px solid var(--linha)} .agenda-resumo dt{font:400 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--suave)} .agenda-resumo dd{font-size:.94rem;text-align:right;font-weight:500} .resumo-micro{margin-top:14px;font:400 10px/1.7 var(--mono);letter-spacing:.1em;color:var(--suave)} .resumo-ok{border-color:rgba(127,169,139,.45)!important} .resumo-ok dd{color:var(--marfim)} /* ---------- método ---------- */ .metodo{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:56px} .metodo li{padding-top:24px;border-top:1px solid var(--latao)} .metodo .num{font:400 10.5px/1 var(--mono);letter-spacing:.24em;color:var(--latao)} .metodo h3{font-size:1.28rem;margin:14px 0 10px} .metodo p{font-size:.93rem;color:var(--suave)} /* ---------- sobre ---------- */ .sec-sobre{background:var(--preto-2);border-block:1px solid var(--linha)} .sobre-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center} .sobre-foto{aspect-ratio:4/5} .sobre-in p{margin-top:18px;color:var(--suave)} .sobre-numeros{list-style:none;display:flex;flex-wrap:wrap;gap:40px;margin-top:34px; padding-top:26px;border-top:1px solid var(--linha)} .sobre-numeros b{display:block;font-family:var(--display);font-size:2.2rem;color:var(--latao-2)} .sobre-numeros span{font:400 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--suave)} /* ---------- faq ---------- */ .faq{margin-top:44px;border-top:1px solid var(--linha)} .faq details{border-bottom:1px solid var(--linha)} .faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative; font-family:var(--display);font-size:1.16rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'';position:absolute;right:8px;top:50%;width:11px;height:1px; background:var(--latao);transition:transform .3s ease} .faq summary::before{content:'';position:absolute;right:13px;top:50%;width:1px;height:11px; background:var(--latao);transform:translateY(-50%);transition:opacity .3s ease} .faq details[open] summary::before{opacity:0} .faq p{padding:0 44px 26px 0;color:var(--suave)} /* ---------- contato ---------- */ .contato-in{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .contato-lista{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:12px; font-size:.96rem;color:rgba(237,232,223,.72)} .contato-lista b{display:inline-block;min-width:118px;font:400 10px/1 var(--mono); letter-spacing:.18em;text-transform:uppercase;color:var(--latao)} .contato-cartao{border:1px solid var(--linha);background:var(--carta);padding:36px} .cartao-linha{font-family:var(--display);font-size:1.5rem;line-height:1.25} .cartao-txt{margin:16px 0 26px;color:var(--suave);font-size:.95rem} /* endereço com pino: o ponto vermelho pulsa devagar, como um marcador de mapa — é o que leva o olho até o endereço */ .endereco{display:flex;align-items:center;gap:13px;margin-top:26px;font-weight:500;font-size:1rem} .pino{position:relative;flex:none;width:11px;height:11px;border-radius:50%;background:var(--pino); box-shadow:0 0 0 3px rgba(224,69,60,.2)} .pino::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--pino); animation:pulso 2.6s cubic-bezier(.2,.6,.3,1) infinite} @keyframes pulso{0%{transform:scale(1);opacity:.65}70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}} .btn-mapa{margin-top:18px;background:var(--livre);color:#0A1A10;border-color:var(--livre)} .btn-mapa:hover{background:#9AC4A5;border-color:#9AC4A5} /* ---------- rodapé ---------- */ .rodape{border-top:1px solid var(--linha);padding:52px 0 28px;color:var(--suave)} .rodape-in{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap} .rodape-marca{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--marfim)} .rodape-creci{margin-top:9px;font:400 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase} .rodape-menu{display:flex;gap:26px;flex-wrap:wrap} .rodape-menu a{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; text-decoration:none;transition:color .25s} .rodape-menu a:hover{color:var(--latao-2)} .rodape-fim{width:min(1200px,90vw);margin:34px auto 0;padding-top:22px; border-top:1px solid var(--linha);font:400 10px/1.7 var(--mono);letter-spacing:.12em} /* ---------- whatsapp flutuante ---------- */ .whatsapp-float{ position:fixed;right:24px;bottom:24px;z-index:60; display:flex;align-items:center;height:58px;padding:0 16px;border-radius:999px; background:#25D366;color:#fff;text-decoration:none; box-shadow:0 10px 28px rgba(37,211,102,.35); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s ease,transform .3s ease,visibility .3s ease,box-shadow .25s ease; } .whatsapp-float.on{opacity:1;visibility:visible;transform:none} .whatsapp-float:hover{box-shadow:0 14px 34px rgba(37,211,102,.5)} .whatsapp-float svg{width:27px;height:27px;flex:none} .whatsapp-float span{max-width:0;overflow:hidden;white-space:nowrap;font:500 14.5px/1 var(--sans); transition:max-width .3s ease,margin-left .3s ease} .whatsapp-float:hover span,.whatsapp-float:focus-visible span{max-width:200px;margin-left:11px} /* ---------- entrada ao rolar ---------- */ .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease} .rv.vis{opacity:1;transform:none} /* ---------- responsivo ---------- */ @media (max-width:1040px){ .agenda{grid-template-columns:1fr;grid-template-areas:'p1' 'p2' 'p3' 'res'} .agenda-resumo{position:static} .metodo{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .sobre-in,.contato-in{grid-template-columns:1fr;gap:38px} .sobre-foto{aspect-ratio:4/3} } @media (max-width:720px){ .menu{display:none} .menu.aberto{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%; background:var(--preto);border-block:1px solid var(--linha);padding:8px 5vw 16px} .menu.aberto a{padding:15px 0;border-bottom:1px solid var(--linha)} .abre-menu{display:block;margin-left:auto} .topo-in{position:relative} .hero{min-height:auto;padding:130px 0 90px} .sec,.sec-manifesto{padding:76px 0} .metodo{grid-template-columns:1fr} .cofre-porta{padding:34px 22px} .cofre-campo{flex-direction:column} .cofre-sair{position:static;margin-top:16px} .whatsapp-float{right:16px;bottom:16px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::after,*::before{animation-duration:.001ms!important;transition-duration:.001ms!important} .rv{opacity:1;transform:none} }