/* ============================================================
Reserva Aurora — lançamento imobiliário
Demonstração Theatrum · mercado imobiliário
Linguagem de lançamento: creme, serifa larga e muito respiro.
O que difere este demo dos outros dois é o peso que o espelho
de unidades tem na página — ele é o motivo de a pessoa entrar,
e por isso ocupa uma seção inteira, não um cantinho.
============================================================ */
:root{
--creme:#F4EFE6;
--creme-2:#EAE3D6;
--verde:#16261D;
--verde-2:#22382B;
--terra:#C2603C;
--terra-2:#A94E2E;
--tinta:#1A1A17;
--suave:#6F6A5F;
--linha:#DBD3C3;
--pino:#E0453C;
--disp:#3E7D54;
--res:#D9A441;
--vend:#B9B2A4;
--serif:'Cormorant Garamond',Georgia,serif;
--sans:'Inter',system-ui,-apple-system,sans-serif;
--mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--creme);color:var(--tinta);font:400 16.5px/1.68 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.01em}
em{font-style:italic}
.wrap{width:min(1220px,92vw);margin:0 auto}
.wrap-estreito{width:min(760px,92vw)}
/* 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:9px;
padding:12px 24px;border-radius:2px;border:1px solid transparent;
font:600 13.5px/1 var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;
transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.btn-g{padding:16px 32px;font-size:14.5px}
.btn-larg{width:100%}
.btn-cheio{background:var(--terra);color:#fff;border-color:var(--terra)}
.btn-cheio:hover{background:var(--terra-2);border-color:var(--terra-2)}
.btn-vazio{color:inherit;border-color:currentColor;background:transparent;opacity:.85}
.btn-vazio:hover{opacity:1;background:rgba(0,0,0,.05)}
/* ============================================================
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(--creme-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.sem-foto{
background:
repeating-linear-gradient(135deg, rgba(194,96,60,.07) 0 10px, transparent 10px 22px),
linear-gradient(150deg, var(--creme-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:.12em;text-transform:uppercase;
color:var(--suave);white-space:nowrap;
border:1px solid var(--linha);border-radius:999px;
padding:9px 15px;background:rgba(255,255,255,.62);
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 .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.topo.rolou{background:rgba(244,239,230,.94);backdrop-filter:blur(10px);border-color:var(--linha)}
.topo.rolou .marca,.topo.rolou .menu a{color:var(--tinta)}
.topo-in{display:flex;align-items:center;gap:28px;padding:18px 0}
.marca{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.01em;
text-decoration:none;color:#fff;flex:none;transition:color .3s ease}
.marca b{font-weight:600;color:var(--terra)}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;
transition:color .2s ease}
.topo.rolou .menu a{color:var(--suave)}
.menu a:hover{color:var(--terra)}
.abre-menu{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.topo.rolou .abre-menu{color:var(--tinta)}
.abre-menu svg{width:26px;height:26px}
/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
padding:150px 0 70px;color:var(--creme)}
.hero-foto{position:absolute;inset:0}
.veu{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(22,38,29,.62) 0%,rgba(22,38,29,.36) 40%,rgba(22,38,29,.92) 100%)}
.hero-in{position:relative;z-index:3;max-width:900px}
.sobrancelha{display:inline-block;font:400 11px/1 var(--mono);letter-spacing:.22em;
text-transform:uppercase;color:#E8B79D;margin-bottom:22px}
.hero h1{font-size:clamp(2.7rem,6vw,4.9rem);color:#fff}
.hero h1 em{color:#E8B79D}
.hero .lead{margin-top:22px;max-width:56ch;font-size:1.07rem;color:rgba(244,239,230,.86)}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .btn-vazio{color:var(--creme)}
.hero-marcas{list-style:none;display:flex;flex-wrap:wrap;gap:34px;margin-top:40px;
padding-top:24px;border-top:1px solid rgba(244,239,230,.22)}
.hero-marcas li{font:400 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:rgba(244,239,230,.62)}
.hero-marcas b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;
letter-spacing:0;text-transform:none;color:#fff;margin-bottom:2px}
/* ---------- filme do hero ----------
Dois