/* ==========================================================================
3Z Realty — main.css
Marca: preto + dourado (#FFC900) + branco. Fonte: Montserrat.
========================================================================== */
/* ---- Fonte (Montserrat variável self-hosted, latin, pesos 100–900) ---- */
@font-face {
font-family: "Montserrat";
font-weight: 100 900;
font-style: normal;
font-display: swap;
src: url("../fonts/montserrat-var.woff2") format("woff2");
}
:root {
--gold: #FFC900;
--gold-2: #FDC745;
--black: #000;
--dark: #383838;
--dark-mid: #545454;
--gray-mid: #808080;
--charcoal: #1c1c1c;
--footer-bg: #111111;
--light: #e7e7e7;
--light-2: #d9d9d9;
--text: #333333;
--text-muted: #696969;
--white: #ffffff;
--container: 1600px;
--nav-h: 92px;
--font: "Montserrat", Arial, Helvetica, sans-serif;
}
/* ---- Reset leve ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
font-weight: 400;
color: var(--text);
background: var(--white);
line-height: 1.55;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { opacity: .85; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.15; }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.text-gold { color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ---- Botões ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 15px 40px; border: none; border-radius: 2px;
font-weight: 400; font-size: 16px; letter-spacing: normal; text-transform: uppercase;
background: var(--gold); color: #354147; transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: var(--gold-2); opacity: 1; transform: translateY(-1px); }
.btn-dark { background: rgba(0,0,0,.75); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
/* ---- Título de seção com traços laterais ---- */
.section-heading {
display: flex; align-items: center; justify-content: center; gap: 28px;
text-align: center; margin-bottom: 52px;
}
.section-heading::before, .section-heading::after {
content: ""; height: 1px; flex: 1; background: var(--gold);
}
.section-heading h2 {
margin: 0; color: var(--gold); font-size: 30px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.label-gold {
display: inline-flex; align-items: center; gap: 16px;
color: var(--gold); font-weight: 700; letter-spacing: 6px; text-transform: uppercase; font-size: 16px;
}
.label-gold::before { content: ""; width: 44px; height: 1px; background: var(--gold); }
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
height: var(--nav-h); display: flex; align-items: center;
background: transparent; box-shadow: 0 0 0 rgba(0,0,0,0);
transition: background-color .5s ease, box-shadow .5s ease, height .35s ease;
}
.site-header.is-solid { background: rgba(20,20,20,.97); box-shadow: 0 2px 16px rgba(0,0,0,.28); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.site-logo img { height: 60px; width: auto; object-fit: contain; }
.main-nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.main-nav a:hover { color: var(--gold); opacity: 1; }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 26px; }
/* ==========================================================================
Hero / Banner
========================================================================== */
/* Hero = banner desenhado exibido inteiro (composição já embutida na imagem). */
.hero { position: relative; width: 100%; aspect-ratio: 1920 / 1030; overflow: hidden; background: #1c1c1c; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; display: block; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-arrows { position: absolute; top: 50%; width: 100%; left: 0; display: flex; justify-content: space-between; padding: 0 18px; z-index: 6; transform: translateY(-50%); pointer-events: none; }
.hero-arrows button { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(0,0,0,.3); color: #fff; font-size: 20px; display: grid; place-items: center; transition: background .2s ease; }
.hero-arrows button:hover { background: var(--gold); color: #000; }
/* Banner simples de páginas internas */
.page-banner { position: relative; min-height: 46vh; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; }
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.page-banner h1 { position: relative; z-index: 2; font-size: 44px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
/* ==========================================================================
Home — seções
========================================================================== */
/* A seção usa uma coluna mais estreita que o resto do site e centralizada — é assim no
site original (medido a 1440 e 1920: coluna ~1300px, texto alinhado à esquerda dentro dela). */
.sec-historia { background: var(--dark); color: #fff; padding: 64px 0 56px; }
.sec-historia > .container { max-width: 1348px; }
.historia-intro { max-width: 1086px; margin-bottom: 48px; }
.historia-intro h2 { font-size: 30px; font-weight: 700; color: #fff; max-width: 1086px; margin-bottom: 22px; }
.historia-intro p { color: #d0d0d0; font-weight: 300; font-size: 15px; max-width: 1086px; margin-bottom: 16px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 15px; margin-top: 6px; }
.link-arrow:hover { color: var(--gold); opacity: 1; }
.label-historia { margin-left: 90px; }
.numeros-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px;
margin: 32px 0 0 90px; max-width: 1070px; }
.numero { display: flex; align-items: center; justify-content: flex-start; gap: 18px; }
.numero img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.numero-txt { display: flex; flex-direction: column; line-height: 1.25; }
.numero .num { color: var(--gold); font-size: 23px; font-weight: 300; letter-spacing: .5px; }
.numero .desc { color: #cfcfcf; font-size: 14px; font-weight: 300; }
@media (max-width: 720px) { .numeros-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } }
@media (max-width: 480px) { .numeros-grid { grid-template-columns: 1fr; } }
.sec-empreendimentos { background: var(--dark); color: #fff; padding: 56px 0 40px; }
.sec-midia { background: var(--dark); color: #fff; padding: 40px 0 72px; }
/* Grid destaque (home) 2x2 */
.emp-grid-home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.emp-card-lg { position: relative; height: 340px; border-radius: 4px; overflow: hidden; }
.emp-card-lg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.emp-card-lg:hover img { transform: scale(1.05); }
.emp-card-lg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%); }
.emp-card-lg .info { position: absolute; inset: 0; z-index: 2; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.emp-card-lg .info h3 { font-size: 26px; margin: 0 0 6px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.emp-card-lg .info .city { position: absolute; left: 28px; bottom: 24px; font-size: 13px; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; }
.center-cta { text-align: center; margin-top: 36px; }
/* Cards mídia */
.midia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.midia-card { display: block; }
.midia-card .thumb { height: 215px; border-radius: 2px; overflow: hidden; margin-bottom: 20px; background: #2b333a; }
.midia-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.midia-card:hover .thumb img { transform: scale(1.05); }
.midia-card .midia-body { border-left: 3px solid var(--gold); padding-left: 18px; }
.midia-card h3 { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; color: #fff; }
.midia-card p { font-size: 14px; color: #d4d4d4; margin-bottom: 12px; line-height: 1.5; }
.midia-card .more { color: var(--gold); font-weight: 400; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; }
/* ==========================================================================
Contato (bloco compartilhado)
========================================================================== */
.sec-contato { display: grid; grid-template-columns: 1fr 1fr; background: var(--light); min-height: 520px; }
.sec-contato .photo { position: relative; filter: grayscale(1); }
.sec-contato .photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sec-contato .form-wrap { padding: 70px 70px; display: flex; flex-direction: column; justify-content: center; }
.sec-contato h2 { font-size: 36px; font-weight: 700; color: #696969; margin-bottom: 6px; }
.sec-contato .lead { color: #696969; margin-bottom: 30px; font-size: 15px; }
.sec-contato .lead strong { color: #575757; }
.tz-form input, .tz-form textarea { width: 100%; height: 55px; padding: 10px 18px; margin-bottom: 16px; border: 1px solid #354147; border-radius: 12px; background: transparent; font-family: inherit; font-size: 14px; color: #333; }
.tz-form textarea { height: auto; }
.tz-form .btn { width: 100%; border-radius: 12px; margin-top: 6px; }
.gold-divider { height: 34px; background: var(--gold); }
/* ==========================================================================
Archive empreendimentos
========================================================================== */
.emp-filter-hero { position: relative; min-height: 46vh; display: flex; align-items: center; color: #fff; }
.emp-filter-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emp-filter-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
/* o .container é flex item aqui: sem width:100% ele encolhe para o conteúdo
(ficou evidente ao remover o filtro de Estado, que deixou a barra estreita). */
.emp-filter-hero > .container { width: 100%; }
/* Com só 3 campos, selects esticados na largura toda ficavam desproporcionais:
cada um tem largura própria e o conjunto fica centralizado na tela (19/08/2026). */
.emp-filter { position: relative; z-index: 3; display: grid;
grid-template-columns: auto repeat(3, minmax(0, 230px)); gap: 18px;
align-items: end; justify-content: center; width: 100%; }
.emp-filter .filter-title { font-size: 22px; letter-spacing: .1em; text-transform: uppercase; align-self: center; }
.emp-filter label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; opacity: .8; }
.emp-filter select { width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.5); background: rgba(28,36,49,.92); color: #fff; border-radius: 4px; font-family: inherit; cursor: pointer; }
.emp-filter select:focus { outline: none; border-color: var(--gold); }
.emp-filter select option { background: #2b333a; color: #fff; }
.emp-filter select option:checked, .emp-filter select option:hover { background: #3a444f; }
.emp-listing { background: var(--dark); padding: 60px 0 90px; }
.emp-listing .lead { color: #fff; text-align: center; font-size: 22px; margin-bottom: 40px; }
.emp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.emp-nenhum { color: #cfcfcf; text-align: center; padding: 40px 0; font-size: 16px; }
/* Paginação */
.emp-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.emp-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 6px; background: #2f2f2f; color: #e6e6e6; font-weight: 600; font-size: 14px; border: 1px solid #3d3d3d; transition: background .2s ease, color .2s ease; }
.emp-pagination a.page-numbers:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.emp-pagination .page-numbers.current { background: var(--gold); color: #000; border-color: var(--gold); }
.emp-pagination .page-numbers.dots { background: none; border: none; }
.emp-card {
background: #354147; border-radius: 2px; overflow: hidden; display: flex; flex-direction: column;
min-height: 510px;
transition: box-shadow .3s ease, transform .3s ease;
}
.emp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.emp-card .thumb { height: 255px; padding: 20px 22px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.emp-card .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.emp-card:hover .thumb img { transform: scale(1.05); }
.emp-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.emp-card h3 { color: var(--gold); font-size: 21px; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; margin-bottom: 18px; }
.emp-card .meta { color: #e6e6e6; font-size: 14px; line-height: 2.1; margin-bottom: 22px; }
.emp-card .card-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.emp-card .status-tag { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #eaeaea; background: #5a666c; border-radius: 2px; padding: 10px 14px; }
.emp-card .btn-mini { font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; background: var(--gold); color: #354147; border-radius: 2px; padding: 10px 16px; }
/* ==========================================================================
Single empreendimento
========================================================================== */
.emp-hero { position: relative; min-height: 64vh; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; overflow: hidden; }
.emp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: emp-hero-image-enter 4.2s cubic-bezier(.16, 1, .3, 1) both; }
.emp-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.emp-hero-content { position: relative; z-index: 2; }
.emp-hero h1 { font-size: 65px; font-weight: 100; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.emp-hero-tipo { display: block; margin-top: 10px; font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
@keyframes emp-hero-image-enter { from { transform: scale(1.08); } to { transform: scale(1); } }
.emp-status-badge { background: var(--light); text-align: center; padding: 34px 0; }
.emp-status-badge span { display: inline-block; background: #6f6a5f; color: #fff; padding: 13px 44px; border-radius: 30px; font-weight: 700; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.emp-intro { background: var(--light); padding: 10px 0 90px; }
.emp-intro .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
/* A coluna de texto é mais curta que a imagem (640px): centraliza em relação a ela
em vez de ficar colada no topo (pedido de 20/08/2026). */
.emp-intro-txt { min-width: 0; align-self: center; }
.emp-nome { font-size: 36px; font-weight: 700; color: #696969; margin-bottom: 20px; }
.emp-titulo-hero { color: #000; font-size: 14.4px; line-height: 1.5; margin-bottom: 20px; }
/* O espaço entre o intertítulo e o texto vinha dos
do conteúdo importado,
removidos na normalização — agora é margem de verdade. */
.emp-titulo-hero h1, .emp-titulo-hero h2, .emp-titulo-hero h3 { font-size: 14.4px; font-weight: 400; margin: 0 0 14px; letter-spacing: .01em; }
.emp-titulo-hero p { margin: 0 0 6px; }
.emp-corpo { color: #333; font-size: 14.5px; line-height: 1.6; }
.emp-corpo p { margin: 0 0 14px; }
.emp-intro .figure { align-self: center; }
.emp-intro .figure img { border-radius: 6px; width: 100%; height: 640px; object-fit: cover; display: block; }
/* Diferenciais — carrossel 2 colunas x 3 linhas (6 visíveis) */
/* Diferenciais: setas nas laterais, centradas na vertical. Ficam POSICIONADAS
(não são itens de flex), então a grade continua ocupando a largura toda —
o recuo de ~50px de cada lado que existia antes não volta. */
.dif-carousel { position: relative; margin-top: 40px; padding: 0 46px; }
.dif-carousel .dif-prev { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.dif-carousel .dif-next { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.dif-viewport { overflow: hidden; flex: 1; min-width: 0;
/* O bloco de diferenciais fica CENTRALIZADO entre as duas setas, em vez de
colado à esquerda (pedido de 15/09/2026). As colunas continuam 50% da
viewport, que agora tem largura máxima e margem automática. */
max-width: 572px; margin: 0 auto; }
.dif-track { position: relative; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
grid-auto-columns: calc(50% - 16px); gap: 26px 32px; transition: transform .4s ease; }
.dif-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dif-item .dif-ico { width: 40px; height: 40px; object-fit: contain; flex: none; filter: brightness(0) saturate(100%) opacity(.85); }
.dif-item span { font-size: 14px; font-weight: 600; color: #696969; min-width: 0; word-break: normal; overflow-wrap: normal; hyphens: auto; }
.dif-carousel .dif-prev, .dif-carousel .dif-next { width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(53,65,71,.08); color: #354147; font-size: 20px; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.dif-carousel .dif-prev:hover, .dif-carousel .dif-next:hover { background: var(--gold); color: #000; }
.dif-carousel .dif-prev[disabled], .dif-carousel .dif-next[disabled] { opacity: .3; cursor: default; }
.emp-regiao { background: var(--gray-mid); color: #fff; padding: 84px 0; }
.emp-regiao-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.emp-regiao-grid.has-map { grid-template-columns: 1fr 1fr; gap: 54px; }
/* Mesmo caso: o texto é mais curto que o mapa (560px) e sobrava um vão embaixo. */
.emp-regiao-grid.has-map .emp-regiao-left { align-self: center; }
.emp-regiao-left { align-self: center; }
.emp-regiao-titulo { color: var(--gold); font-size: 36px; font-weight: 400; line-height: 1.2; margin-bottom: 28px; }
.emp-regiao .txt { font-size: 14.5px; line-height: 1.9; font-weight: 300; }
.emp-regiao .txt p { margin: 0 0 6px; }
.emp-regiao-map iframe { width: 100%; height: 560px; border: 0; border-radius: 4px; display: block; }
@media (prefers-reduced-motion: reduce) {
.emp-hero img { animation: none; }
}
@media (max-width: 820px) {
.emp-regiao-grid.has-map { grid-template-columns: 1fr; }
.emp-regiao-map iframe { height: 380px; }
}
.emp-gallery { background: var(--light); padding: 56px 0 80px; }
.emp-gallery .tabs { display: flex; gap: 34px; margin-bottom: 24px; }
.emp-gallery .tabs button { background: none; border: none; font-size: 16px; color: #535353; padding: 6px 0; border-bottom: 2px solid transparent; cursor: pointer; }
.emp-gallery .tabs button.is-active { color: #1c1c1c; border-color: var(--gold); }
.emp-gallery .tabs button.tab-disabled { opacity: .4; cursor: default; }
.gallery-stage { position: relative; }
.gallery-set { display: none; position: relative; }
.gallery-set.is-active { display: block; }
.gallery-slides { position: relative; height: 530px; border-radius: 4px; overflow: hidden; background: #cfcfcf; }
.gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.gallery-slide.is-active { opacity: 1; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-set .gal-prev, .gallery-set .gal-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 22px; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.gallery-set .gal-prev { left: 16px; }
.gallery-set .gal-next { right: 16px; }
.gallery-set .gal-prev:hover, .gallery-set .gal-next:hover { background: var(--gold); color: #000; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.gallery-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: #b6b6b6; cursor: pointer; padding: 0; transition: background .2s ease; }
.gallery-dots button.is-active { background: var(--gold); }
@media (max-width: 820px) { .gallery-slides { height: 320px; } }
/* ==========================================================================
Blog
========================================================================== */
.blog-listing { padding: 70px 0 90px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { border: 1px solid #eee; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.05); transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.blog-card .thumb { height: 210px; overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .body { padding: 22px; }
.blog-card h3 { font-size: 17px; color: var(--text); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .01em; }
.blog-card .excerpt { color: var(--text-muted); font-size: 14px; }
.blog-card .more { display: inline-block; margin-top: 14px; color: var(--gold); font-weight: 700; font-size: 13px; }
.single-post-content { max-width: 820px; margin: 0 auto; padding: 60px 24px 90px; }
.single-post-content h1 { font-size: 34px; margin-bottom: 20px; }
.single-post-content img { border-radius: 6px; margin: 20px 0; }
/* ==========================================================================
Imprensa (archive)
========================================================================== */
.imprensa-listing { padding: 70px 0 90px; background: #353535; color: #e7e7e7; }
.imprensa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Paginação legível sobre o fundo grafite */
.imprensa-listing .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 4px; border-radius: 6px; background: rgba(255,255,255,.07); color: #e6e6e6; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid rgba(255,255,255,.12); transition: background .2s ease, color .2s ease; }
.imprensa-listing .page-numbers.current { background: var(--gold); color: #1c1c1c; border-color: var(--gold); }
.imprensa-listing a.page-numbers:hover { background: var(--gold); color: #1c1c1c; border-color: var(--gold); }
/* ==========================================================================
Páginas institucionais (hero + seção)
========================================================================== */
.inst-hero { position: relative; min-height: 58vh; display: flex; align-items: center; color: #fff; overflow: hidden; }
.inst-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inst-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.4) 100%); }
.inst-hero-inner { position: relative; z-index: 3; width: 100%; }
.inst-hero h1 { font-size: 52px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.inst-hero-sub { font-size: 17px; font-weight: 300; display: flex; align-items: center; gap: 16px; }
.scroll-arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; font-size: 18px; animation: tz-bounce 1.8s infinite; }
@keyframes tz-bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }
.inst-section { padding-top: 48px; }
.inst-body { max-width: 800px; margin-bottom: 44px; color: #dcdcdc; font-size: 16px; }
.inst-body h1, .inst-body h2 { color: #fff; font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 18px; }
.inst-body p { margin-bottom: 14px; line-height: 1.6; }
.inst-body strong { color: var(--gold); }
.inst-body .gold-cta { color: var(--gold); font-weight: 700; }
/* Grid de pastas por ano (Demonstrações Financeiras) */
.anos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 380px)); gap: 18px; margin-top: 10px; }
.ano-folder { display: flex; align-items: center; gap: 16px; background: var(--gold); color: #1c1c1c; padding: 14px 22px; border-radius: 2px; font-weight: 500; font-size: 16px; transition: background .2s ease, transform .2s ease; }
.ano-folder:hover { background: var(--gold-2); opacity: 1; transform: translateY(-2px); }
.ano-folder .ano-icon { font-size: 20px; line-height: 1; }
.ano-folder .ano-num { flex: 1; text-align: center; letter-spacing: .04em; }
@media (max-width: 900px) { .anos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .anos-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Páginas de formulário dark (Contato)
========================================================================== */
.page-form-dark { background: linear-gradient(180deg, #383838 0%, #3d3d3d 55%, #5a5a5a 100%); color: #fff; padding: calc(var(--nav-h) + 56px) 0 90px; min-height: 70vh; }
.page-form-dark h1 { font-size: 46px; font-weight: 700; color: #fff; margin-bottom: 22px; text-transform: uppercase; }
.page-form-dark .form-intro { color: #cfcfcf; font-size: 16px; margin-bottom: 40px; }
.page-form-dark .form-intro p { margin: 0; }
/* Quando a seção vem logo abaixo de um hero (Investidores, Trabalhe Conosco),
o padding de compensação do header fixo vira espaço morto — pedido do cliente
em 04/08/2026 (Demonstrações Financeiras: "diminuir o banner e remover esse espaço"). */
.page-form-dark.inst-section { padding-top: 44px; }
.form-success { background: rgba(255,201,0,.12); border: 1px solid var(--gold); color: var(--gold); padding: 14px 18px; border-radius: 4px; max-width: 800px; margin-bottom: 24px; }
.tz-form-dark { max-width: 800px; }
.tz-form-dark .field { margin-bottom: 24px; }
.tz-form-dark label { display: block; color: #e2e2e2; font-size: 14px; margin-bottom: 10px; }
.tz-form-dark input, .tz-form-dark textarea { width: 100%; background: transparent; border: 1px solid #8f8f8f; border-radius: 2px; color: #fff; font-family: inherit; font-size: 15px; padding: 14px 18px; }
.tz-form-dark input { height: 56px; }
.tz-form-dark input::placeholder, .tz-form-dark textarea::placeholder { color: #8f8f8f; }
.tz-form-dark input:focus, .tz-form-dark textarea:focus { outline: none; border-color: var(--gold); }
.tz-form-dark .btn { margin-top: 12px; padding: 16px 64px; }
.tz-form-dark .field-file .file-note { display: block; color: #9a9a9a; font-size: 12.5px; margin: -4px 0 10px; }
.tz-form-dark input[type="file"] { padding: 0; height: auto; border: 1px solid #8f8f8f; border-radius: 2px; color: #cfcfcf; font-size: 14px; }
.tz-form-dark input[type="file"]::file-selector-button { background: #2b3440; color: #fff; border: none; padding: 16px 20px; margin-right: 16px; cursor: pointer; font-family: inherit; }
.tz-form-dark input[type="file"]::file-selector-button:hover { background: #354147; }
.form-error { background: rgba(220,80,80,.12); border: 1px solid #d05050; color: #f0a0a0; padding: 14px 18px; border-radius: 4px; max-width: 800px; margin-bottom: 24px; }
/* ==========================================================================
Footer
========================================================================== */
.site-footer { background: #000; color: #e2e2e2; padding: 48px 0 28px; font-size: 14px; }
/* As duas colunas de links usam a largura do conteúdo e ficam lado a lado:
antes sobrava folga dentro de cada coluna e elas pareciam distantes (pedido 04/08/2026). */
/* A folga vai toda para a coluna da marca; contato e os dois menus ficam
agrupados com o mesmo respiro — antes as duas colunas de links ficavam
distantes uma da outra (pedido do cliente em 04/08/2026). */
.footer-grid { display: grid; grid-template-columns: repeat(4, max-content);
justify-content: center; gap: 30px 64px; align-items: start; }
.footer-brand { display: flex; align-items: center; align-self: stretch; padding-top: 0; }
.footer-brand img { width: 150px; height: auto; }
.site-footer a { color: #e2e2e2; }
.site-footer a:hover { color: var(--gold); }
.footer-contact p { margin-bottom: 14px; line-height: 1.5; }
.footer-contact .with-pin { display: flex; gap: 8px; }
.footer-contact .pin { color: var(--gold); display: inline-flex; flex: none; }
.footer-contact .pin svg { width: 15px; height: 15px; margin-top: 2px; }
.footer-contact .gold { color: var(--gold); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #555; display: grid; place-items: center; color: #fff; font-size: 11px; }
.footer-social a svg { width: 17px; height: 17px; display: block; }
.footer-social a:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.footer-menu ul { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 14px; }
.footer-menu a { font-size: 14px; }
.footer-bottom { text-align: center; margin-top: 32px; padding-top: 0; color: #9a9a9a; font-size: 13px; line-height: 1.7; }
.historia-intro .label-gold { margin-bottom: 20px; }
/* ==========================================================================
Responsivo
========================================================================== */
@media (max-width: 1024px) {
.emp-grid { grid-template-columns: repeat(2, 1fr); }
.midia-grid, .blog-grid, .imprensa-grid { grid-template-columns: repeat(2, 1fr); }
.emp-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid { grid-template-columns: repeat(2, max-content); justify-content: center; }
}
/* O menu tem 6 itens: abaixo de ~1100px ele não cabe numa linha e vazava para
fora do header. A gaveta (hambúrguer) passa a valer já a partir daqui. */
@media (max-width: 1100px) {
.main-nav { position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 320px; background: rgba(18,18,18,.98); transform: translateX(100%); transition: transform .3s ease; padding: 90px 28px; z-index: 55; }
.main-nav.is-open { transform: translateX(0); }
.main-nav ul { flex-direction: column; align-items: flex-start; gap: 22px; }
.main-nav a { font-size: 15px; }
.nav-toggle { display: block; z-index: 60; }
}
@media (max-width: 820px) {
.site-header { background: rgba(20,20,20,.96); }
.hero-content h1 { font-size: 34px; }
.emp-grid-home { grid-template-columns: 1fr; }
.emp-intro .grid { grid-template-columns: 1fr; gap: 30px; }
.sec-contato { grid-template-columns: 1fr; }
.sec-contato .photo { min-height: 280px; }
.emp-hero h1, .page-banner h1 { font-size: 30px; }
}
@media (max-width: 560px) {
.emp-grid, .midia-grid, .blog-grid, .imprensa-grid, .footer-grid, .emp-filter { grid-template-columns: 1fr; }
.dif-grid { grid-template-columns: 1fr; }
.section { padding: 56px 0; }
.hero-content h1 { font-size: 28px; }
}
/* ==========================================================================
Ajustes solicitados pelo cliente — 04/08/2026 (Pedro Gamaroni)
Mobile: vãos verticais entre seções (itens 2 a 6 da lista "MOBILE")
========================================================================== */
@media (max-width: 820px) {
/* Banner do topo (item 1 da lista MOBILE): a arte horizontal 1920x1030 tem o
texto embutido e ficava cortada/ilegível no celular. Agora cada banner tem
uma ARTE VERTICAL 1080x1350 (campo "banner_mobile"), servida por media query
em tz_banner_picture() — então aqui é 4:5 com cover, sem corte de conteúdo. */
.hero { aspect-ratio: 4 / 5; background: #141414; margin-top: var(--nav-h); }
/* atrás do header fixo o fundo precisa ser escuro, não o branco do body */
body { background: #141414; }
/* Vão entre o banner e "Sobre nós" / dentro de Nossa História (itens 2 e 3) */
.sec-historia { padding: 40px 0 36px; }
.historia-intro { margin-bottom: 32px; }
.numeros-grid { margin: 24px 0 0; }
.label-historia { margin-left: 0; }
/* Vão depois de "2,5 BI" e antes de EMPREENDIMENTOS (item 4) */
.sec-empreendimentos { padding: 36px 0 28px; }
/* Vão antes de "3Z na Mídia" (item 5) */
.sec-midia { padding: 28px 0 44px; }
.center-cta { margin-top: 24px; }
/* Vão no topo do rodapé, acima do logo (item 6) */
.site-footer { padding: 32px 0 24px; }
.footer-brand { align-self: auto; margin-bottom: 8px; }
.footer-bottom { margin-top: 24px; }
/* PRODUTOS item 2 — vão entre as fotos e "Localização" */
.emp-intro { padding: 10px 0 24px; }
.emp-gallery { padding: 40px 0 40px; }
.emp-regiao { padding: 40px 0; }
/* PRODUTOS item 1 — diferenciais em 1 coluna: rótulo deixa de quebrar letra a letra */
.dif-carousel { padding: 0 38px; }
.dif-carousel .dif-prev, .dif-carousel .dif-next { width: 32px; height: 32px; font-size: 18px; }
.dif-track { grid-auto-columns: 100%; gap: 20px 0; }
}
/* ==========================================================================
Documentos legais (Política de Privacidade / Termos de Uso) — 17/08/2026
========================================================================== */
.doc-legal { background: var(--white); color: var(--text); padding: calc(var(--nav-h) + 56px) 0 80px; }
/* O header é transparente por padrão (fica sobre heros escuros). Numa página de
fundo branco o menu ficaria ilegível, então aqui ele nasce sólido. */
.page-template-page-legal .site-header { background: rgba(20,20,20,.97); }
.doc-legal .container { max-width: 900px; }
.doc-legal h1 { font-size: 38px; font-weight: 700; color: #1c1c1c; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; }
.doc-legal .doc-meta { color: #8a8a8a; font-size: 13px; margin-bottom: 36px; }
.doc-corpo { font-size: 15px; line-height: 1.75; }
.doc-corpo h2 { font-size: 19px; font-weight: 700; color: #1c1c1c; text-transform: uppercase; letter-spacing: .02em; margin: 40px 0 14px; padding-left: 14px; border-left: 4px solid var(--gold); }
.doc-corpo h2 strong { font-weight: 700; }
.doc-corpo p { margin: 0 0 14px; }
.doc-corpo ul { margin: 0 0 18px; padding-left: 22px; }
.doc-corpo li { margin-bottom: 10px; }
.doc-corpo a { color: #0b6bb3; text-decoration: underline; }
.doc-corpo a:hover { color: #1c1c1c; opacity: 1; }
.doc-tabela { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; }
.doc-tabela th, .doc-tabela td { border: 1px solid #d8d8d8; padding: 12px 14px; vertical-align: top; text-align: left; }
.doc-tabela th { background: #f2f2f2; font-weight: 700; }
.doc-tabela td:first-child { width: 32%; background: #fafafa; }
.doc-tabela p { margin: 0 0 6px; }
.doc-tabela p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
.doc-legal { padding: calc(var(--nav-h) + 32px) 0 56px; }
.doc-legal h1 { font-size: 26px; }
.doc-tabela, .doc-tabela tbody, .doc-tabela tr, .doc-tabela td, .doc-tabela th { display: block; width: 100%; }
.doc-tabela tr { margin-bottom: 14px; border: 1px solid #d8d8d8; }
.doc-tabela td, .doc-tabela th { border: none; border-bottom: 1px solid #ececec; }
.doc-tabela td:first-child { width: 100%; }
}
/* ==========================================================================
Negocie Seu Terreno — formulário sobreposto ao hero (pedido de 04/08/2026)
========================================================================== */
.hero-form {
position: relative;
background: var(--dark);
padding: calc(var(--nav-h) + 30px) 0 56px;
color: #fff;
overflow: hidden;
}
/* A arte cobre a seção inteira — antes parava em 74% da altura e a foto
aparecia cortada embaixo do card do formulário. */
.hero-form .hero-form-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
}
.hero-form::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.45) 100%);
z-index: 1;
}
.hero-form-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr minmax(520px, 640px);
gap: 48px; align-items: start;
}
/* Título e subtítulo centralizados verticalmente em relação ao card do formulário
(é o card que define a altura da linha). */
.hero-form-intro { align-self: center; padding-top: 0; }
.hero-form-intro h1 {
font-size: 52px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.hero-form-sub { font-size: 17px; font-weight: 300; max-width: 430px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero-form-card {
background: rgba(28,28,28,.86);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 6px;
padding: 28px 30px 26px;
box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hero-form-card-intro h2 { font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin-bottom: 8px; }
.hero-form-card-intro p { font-size: 13.5px; color: #cfcfcf; line-height: 1.5; margin-bottom: 8px; }
.hero-form-card-intro .gold-cta { color: var(--gold); font-weight: 700; }
.hero-form-card .tz-form-dark { max-width: none; }
.hero-form-card .tz-form-dark .field { margin-bottom: 14px; }
.hero-form-card .tz-form-dark label { font-size: 13px; margin-bottom: 6px; }
.hero-form-card .tz-form-dark input { height: 44px; }
.hero-form-card .tz-form-dark textarea { padding: 10px 14px; }
.hero-form-card .tz-form-dark .btn { width: 100%; margin-top: 2px; padding: 13px 0; }
.hero-form-card .form-success { max-width: none; }
@media (max-width: 1024px) {
.hero-form-grid { grid-template-columns: 1fr; gap: 32px; }
.hero-form .hero-form-bg, .hero-form::after { inset: 0 0 auto 0; height: 340px; }
.hero-form-intro { padding-top: 0; min-height: 220px; }
.hero-form-intro h1 { font-size: 34px; }
}
@media (max-width: 560px) {
.hero-form { padding: calc(var(--nav-h) + 32px) 0 48px; }
.hero-form-card { padding: 26px 20px 22px; }
.hero-form-intro h1 { font-size: 28px; }
}
/* ==========================================================================
Aviso de privacidade dos formulários (LGPD) — 17/08/2026
========================================================================== */
.aviso-lgpd { font-size: 12px; line-height: 1.6; margin-top: 20px; }
.aviso-lgpd p { margin: 0 0 10px; }
.aviso-lgpd p:last-child { margin-bottom: 0; }
.aviso-lgpd a { text-decoration: underline; }
/* Bloco Contato: fundo claro */
.aviso-lgpd--contato { color: #6f6f6f; border-top: 1px solid #cfcfcf; padding-top: 16px; }
.aviso-lgpd--contato a { color: #4a4a4a; }
.aviso-lgpd--contato a:hover { color: #1c1c1c; opacity: 1; }
/* Página /contato e card Seja Parceiro: fundo escuro */
.page-form-dark .aviso-lgpd--contato { color: #c2c2c2; border-top-color: rgba(255,255,255,.2); max-width: 800px; }
.page-form-dark .aviso-lgpd--contato a { color: #fff; }
.aviso-lgpd--parceiro { color: #b3b3b3; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; }
.aviso-lgpd--parceiro a { color: var(--gold); }
.aviso-lgpd--parceiro a:hover { color: #fff; opacity: 1; }
/* Formulário em 2 colunas (Seja Parceiro 3Z) — o card empilhado passava da
dobra; com os campos pareados e o aviso legal em duas colunas ele cabe na tela. */
.tz-form-2col .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tz-form-2col .field-row .field { margin-bottom: 14px; }
.hero-form-card .aviso-lgpd--parceiro { columns: 2; column-gap: 26px; font-size: 11.5px; line-height: 1.5; padding-top: 14px; }
.hero-form-card .aviso-lgpd--parceiro p { margin: 0 0 8px; break-inside: avoid; }
@media (max-width: 640px) {
.tz-form-2col .field-row { grid-template-columns: 1fr; gap: 0; }
.hero-form-card .aviso-lgpd--parceiro { columns: 1; }
}
/* Ano de demonstração financeira ainda sem arquivo: não é link, e diz isso. */
.ano-folder.is-vazio { background: rgba(255,255,255,.08); color: #9a9a9a; cursor: default; }
.ano-folder.is-vazio:hover { background: rgba(255,255,255,.08); transform: none; }
.ano-folder.is-vazio .ano-icon { filter: grayscale(1); opacity: .5; }
.ano-folder .ano-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
/* Campo de arquivo dentro do card do hero (Trabalhe Conosco) */
.hero-form-card .tz-form-dark .field-file { margin-bottom: 16px; }
.hero-form-card .tz-form-dark .field-file .file-note { margin: -2px 0 8px; font-size: 12px; }
.hero-form-card .tz-form-dark input[type="file"] { height: auto; font-size: 13px; }
.hero-form-card .tz-form-dark input[type="file"]::file-selector-button { padding: 12px 16px; margin-right: 12px; }
/* ==========================================================================
Formulário "Novos Negócios" (Negocie Seu Terreno) — 24/08/2026
Passou de 5 para ~20 campos: precisa de seções e de um card mais largo.
========================================================================== */
.tz-form-nn .tz-fs { border: 0; margin: 0 0 18px; padding: 0; }
.tz-form-nn .tz-fs > legend {
display: block; width: 100%; padding: 0 0 8px; margin-bottom: 12px;
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--gold); border-bottom: 1px solid rgba(255,255,255,.14);
}
.tz-form-nn .tz-opc { font-weight: 400; letter-spacing: .02em; text-transform: none; color: #9a9a9a; }
/* Passo 2 repetia os mesmos rótulos do passo 1 e virava um espelho confuso
do bloco de contato (relato de 02/09/2026). */
.tz-form-nn .tz-fs-nota { font-size: 12.5px; line-height: 1.5; color: #b6b6b6; margin: -4px 0 14px; }
.tz-form-nn .tz-fs-nota strong { color: #e2e2e2; }
.tz-form-nn .field-row-3 { grid-template-columns: repeat(3, 1fr); }
.tz-form-nn select {
width: 100%; height: 44px; padding: 0 14px; background: transparent;
border: 1px solid #8f8f8f; border-radius: 2px; color: #fff;
font-family: inherit; font-size: 15px; cursor: pointer;
}
.tz-form-nn select:focus { outline: none; border-color: var(--gold); }
.tz-form-nn select option { background: #2b2b2b; color: #fff; }
/* Materiais disponíveis */
.tz-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.tz-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #e2e2e2; cursor: pointer; margin: 0; }
.tz-check input { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin-top: 1px;
border: 1px solid #8f8f8f; border-radius: 3px; background: transparent; cursor: pointer; position: relative; }
.tz-check input:checked { background: var(--gold); border-color: var(--gold); }
.tz-check input:checked::after {
content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
border: solid #1c1c1c; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tz-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* A caixa saía 38x44 e o texto 20px fora do centro (relato de 02/09/2026).
Três regras do formulário escuro venciam por especificidade:
.tz-form-dark label (0,1,1) > .tz-check (0,1,0) -> label virava block
.hero-form-card ... input (0,2,1) > .tz-check input (0,1,1) -> height 44px
.tz-form-dark input padding 14px 18px, com box-sizing: border-box,
impedia a caixa de encolher abaixo de 38px
Os seletores abaixo sobem a especificidade só onde é preciso, em vez de !important. */
.tz-form-dark .tz-check { display: flex; align-items: center; gap: 9px; }
.tz-form-dark .tz-check input[type="checkbox"] {
width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none;
}
.tz-form-dark .tz-check input[type="checkbox"]:checked::after {
left: 6px; top: 2px; width: 5px; height: 10px;
}
/* O card cresce: cabe mais campo por linha sem apertar. */
.hero-form-grid:has(.tz-form-nn) { grid-template-columns: 1fr minmax(560px, 720px); }
/* ...mas o minmax(560px) é um PISO: abaixo de 1024px ele vencia por
especificidade o `.hero-form-grid { grid-template-columns: 1fr }` do
media query (0,2,0 > 0,1,0) e o card ficava com 560px numa tela de 390px,
com metade dos campos fora do alcance (02/09/2026). */
@media (max-width: 1024px) {
.hero-form-grid:has(.tz-form-nn) { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.tz-form-nn .field-row-3 { grid-template-columns: 1fr; }
.tz-checks { grid-template-columns: 1fr; }
}
/* ==========================================================================
Vídeo / tour virtual e mapa sob demanda — 26/08/2026
========================================================================== */
.emp-media { background: var(--light); padding: 56px 0 72px; }
.emp-media .section-heading h2 { color: #1c1c1c; }
.emp-video, .emp-mapa-lazy { position: relative; width: 100%; background: #2b2b2b; border-radius: 4px; overflow: hidden; }
.emp-video { aspect-ratio: 16 / 9; }
.emp-mapa-lazy { height: 560px; }
.emp-video iframe, .emp-mapa-lazy iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.emp-mapa-btn {
position: absolute; inset: 0; width: 100%; height: 100%;
display: grid; place-items: center; gap: 10px;
background: rgba(28,28,28,.55); border: 0; color: #fff;
font-family: inherit; font-size: 15px; letter-spacing: .04em; cursor: pointer;
transition: background .2s ease;
}
.emp-mapa-btn:hover { background: rgba(28,28,28,.7); }
.emp-mapa-lazy.is-carregado .emp-mapa-btn, .emp-video.is-carregado .emp-mapa-btn { display: none; }
.emp-media-cta { margin-top: 26px; text-align: center; }
.emp-media noscript iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
@media (max-width: 820px) {
.emp-media { padding: 40px 0 48px; }
.emp-mapa-lazy { height: 380px; }
}
/* Botões secundários do bloco de mídia (site do empreendimento, ficha técnica) */
.emp-media-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-ghost { background: transparent; color: #1c1c1c; border: 1px solid #1c1c1c; }
.btn-ghost:hover { background: #1c1c1c; color: #fff; opacity: 1; }
/* ==========================================================================
Entrada do hero — a arte abre um pouco maior e assenta no tamanho do container
(comportamento do site original). Respeita quem pediu menos movimento.
========================================================================== */
@keyframes tz-hero-entrada {
from { transform: scale(1.12); }
to { transform: scale(1); }
}
/* seletor de descendente: o ![]()
fica dentro de (o filtro AVIF do tema),
então `>` não casaria. */
.emp-hero img,
.page-banner img,
.inst-hero img,
.emp-filter-hero img,
.hero-form-bg {
animation: tz-hero-entrada 1600ms cubic-bezier(.22, .61, .36, 1) both;
will-change: transform;
}
/* os contêineres precisam recortar o excedente do zoom */
.page-banner, .emp-filter-hero, .hero-form { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.emp-hero img, .page-banner img, .inst-hero img,
.emp-filter-hero img, .hero-form-bg { animation: none; }
}
/* Confirmação de envio dentro do bloco Contato (fundo claro) */
.sec-contato .form-success { background: rgba(0,0,0,.05); border: 1px solid var(--gold); color: #6b5a00; margin-bottom: 18px; }
/* ==========================================================================
Novos Negócios em passos — 01/09/2026
O card tinha 1936px (desktop) / 2972px (mobile). Os 6 fieldsets viraram
3 passos. Tudo é progressive enhancement: sem JS nenhuma regra .is-stepped
entra e o formulário volta a ser a lista única de antes.
========================================================================== */
.tz-steps-nav { display: none; }
.tz-steps-acoes { display: block; }
.tz-form-nn:not(.is-stepped) .tz-step-voltar,
.tz-form-nn:not(.is-stepped) .tz-step-avancar { display: none; }
.tz-form-nn.is-stepped .tz-step { display: none; }
.tz-form-nn.is-stepped .tz-step.is-active { display: block; }
/* Trilha de passos */
.tz-form-nn.is-stepped .tz-steps-nav {
display: flex; list-style: none; margin: 0 0 22px; padding: 0;
counter-reset: none; gap: 0;
}
.tz-steps-nav li {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
position: relative; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
color: #8f8f8f; font-weight: 700;
}
/* linha ligando os marcadores, atrás dos números */
.tz-steps-nav li::before {
content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 1px;
background: rgba(255,255,255,.18);
}
.tz-steps-nav li:first-child::before { display: none; }
.tz-step-n {
width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid rgba(255,255,255,.28); background: #2b2b2b; color: #8f8f8f;
font-size: 12.5px; position: relative; z-index: 1; transition: all .2s ease;
}
.tz-steps-nav li.is-active { color: var(--gold); }
.tz-steps-nav li.is-active .tz-step-n { border-color: var(--gold); color: var(--gold); }
.tz-steps-nav li.is-done { color: #d8d8d8; }
.tz-steps-nav li.is-done .tz-step-n { background: var(--gold); border-color: var(--gold); color: #1c1c1c; }
.tz-steps-nav li.is-done::before,
.tz-steps-nav li.is-active::before { background: var(--gold); }
/* Ações: Voltar à esquerda, Avançar/Enviar à direita */
.tz-form-nn.is-stepped .tz-steps-acoes { display: flex; gap: 12px; margin-top: 4px; }
.tz-form-nn.is-stepped .tz-steps-acoes .btn { width: auto; flex: 1; margin-top: 0; }
.tz-form-nn.is-stepped .tz-step-voltar { flex: 0 0 34%; }
.hero-form-card .tz-form-dark .tz-steps-acoes .btn-ghost {
background: transparent; border: 1px solid #8f8f8f; color: #e2e2e2;
}
.hero-form-card .tz-form-dark .tz-steps-acoes .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
/* Primeiro passo não tem para onde voltar; o envio só existe no último.
Por classe, e não pelo número do passo: a quantidade de passos já mudou
uma vez (3 -> 4) e não deve arrastar o CSS junto. */
.tz-form-nn.is-stepped.is-primeiro .tz-step-voltar { display: none; }
.tz-form-nn.is-stepped:not(.is-ultimo) .tz-step-enviar { display: none; }
.tz-form-nn.is-stepped.is-ultimo .tz-step-avancar { display: none; }
@media (max-width: 560px) {
.tz-steps-nav li { font-size: 9.5px; letter-spacing: .02em; }
.tz-step-n { width: 24px; height: 24px; font-size: 11.5px; }
.tz-steps-nav li::before { top: 11.5px; }
.tz-form-nn.is-stepped .tz-steps-nav { margin-bottom: 18px; }
}
/* O título de seção fica entre dois traços dourados (flex: 1), por isso o
`white-space: nowrap` do .section-heading h2. Em 390px o título mais longo
— "Conheça o empreendimento", da seção de vídeo — forçava 546px e fazia a
página rolar para o lado nos 4 empreendimentos que têm vídeo (02/09/2026).
No mobile o traço lateral vale menos que o título caber: liberamos a quebra. */
@media (max-width: 720px) {
.section-heading { gap: 14px; }
.section-heading h2 { white-space: normal; font-size: 22px; letter-spacing: 1px; }
}
/* Diferenciais alinhados com o texto acima e setas FORA da coluna (pedido de
15/09/2026). Só é possível onde existe calha lateral: abaixo de 1700px a
coluna de texto começa a 24px da borda da tela (padding do .container) e a
seta de 38px não cabe — nessas larguras o recuo interno de 46px permanece. */
@media (min-width: 1700px) {
/* Seta esquerda fora da coluna de texto; seta direita termina na borda
direita do texto; as duas colunas se distribuem no espaço entre elas
(pedido de 15/09/2026, 2ª rodada — a versão de colunas fixas comprimia). */
.dif-carousel { padding: 0 54px 0 0; }
.dif-carousel .dif-prev { left: -54px; }
.dif-carousel .dif-next { right: 0; }
}
}