/* ============================================================
IMÓVEIS COM EXCLUSIVIDADE — Design System
Marca: Imóveis no Itaim | Verde #217217 + Premium
============================================================ */
/* ── Google Fonts: carregado via no HTML head para evitar render-blocking ─ */
/* ── Tokens ────────────────────────────────────────────────── */
:root {
/* Cores da Marca */
--green-900: #0D3D0D;
--green-800: #145214;
--green-700: #185918;
--green-600: #1E6E1E;
--green-500: #217217; /* COR PRINCIPAL DA MARCA */
--green-400: #2A8C2A;
--green-300: #4CAF4C;
--green-100: #E8F5E8;
--green-50: #F0FAF0;
/* Neutros */
--black: #0A0A0A;
--dark: #1A1A1A;
--gray-800: #2C2C2C;
--gray-700: #3D3D3D;
--gray-600: #636363; /* CINZA DA MARCA */
--gray-400: #9C9C9C;
--gray-200: #D8D8D8;
--gray-100: #EEEEEE;
--gray-50: #F5F5F5;
--off-white: #F8F8F8; /* FUNDO DA MARCA */
--white: #FFFFFF;
/* Acento premium */
--gold: #B8965A;
--gold-light: #D4AF7A;
--gold-pale: #F5ECD9;
/* Tipografia */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Espaçamento */
--s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
--s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
--s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem;
/* Sombras */
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
--shadow-md: 0 4px 16px rgba(0,0,0,.10);
--shadow-lg: 0 8px 32px rgba(0,0,0,.14);
--shadow-xl: 0 16px 64px rgba(0,0,0,.18);
/* Border-radius */
--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-full: 9999px;
/* Transições */
--t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 400ms ease;
}
/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-body); color: var(--dark); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--s6); }
.container--narrow { max-width: 900px; margin: 0 auto; padding: 0 var(--s6); }
.section { padding: var(--s20) 0; border-top: 1px solid var(--gray-100); }
.section--gray { background: var(--off-white); }
.section--dark { background: var(--dark); color: var(--white); }
.section--green { background: var(--green-500); color: var(--white); }
/* ── Tipografia ────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 300; line-height: 1.1; }
.display--xl { font-size: clamp(2.5rem, 6vw, 5rem); }
.display--lg { font-size: clamp(2rem, 4vw, 3.5rem); }
.display--md { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.display--sm { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.heading { font-family: var(--font-body); font-weight: 600; line-height: 1.25; }
.heading--lg { font-size: 1.5rem; }
.heading--md { font-size: 1.125rem; }
.heading--sm { font-size: 0.875rem; text-transform: uppercase; letter-spacing: .08em; }
.body-lg { font-size: 1.125rem; line-height: 1.7; }
.body { font-size: 1rem; line-height: 1.65; }
.body-sm { font-size: 0.875rem; line-height: 1.6; }
.body-xs { font-size: 0.75rem; line-height: 1.5; }
.text-gray { color: var(--gray-600); }
.text-green { color: var(--green-500); }
.text-gold { color: var(--gold); }
.text-white { color: var(--white); }
.text-center { text-align: center; }
.italic { font-style: italic; }
/* ── Botões ────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: var(--s2);
padding: var(--s3) var(--s6); border-radius: var(--r-sm);
font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
letter-spacing: .04em; transition: all var(--t-base); white-space: nowrap;
}
.btn--primary { background: var(--green-500); color: var(--white); }
.btn--primary:hover { background: var(--green-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--secondary { background: transparent; color: var(--green-500); border: 1.5px solid var(--green-500); }
.btn--secondary:hover { background: var(--green-50); }
.btn--outline-white { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.6); }
.btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.btn--dark { background: var(--dark); color: var(--white); }
.btn--dark:hover { background: var(--gray-800); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { color: var(--gray-600); }
.btn--ghost:hover { color: var(--green-500); }
.btn--lg { padding: var(--s4) var(--s8); font-size: 1rem; }
.btn--sm { padding: var(--s2) var(--s4); font-size: 0.8125rem; }
.btn--full { width: 100%; justify-content: center; }
.btn--whatsapp { background: #25D366; color: var(--white); }
.btn--whatsapp:hover { background: #1EBB5A; transform: translateY(-1px); }
/* ── Badge ─────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center;
padding: 2px var(--s3); border-radius: var(--r-full);
font-size: 0.7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.badge--green { background: var(--green-100); color: var(--green-700); }
.badge--gold { background: var(--gold-pale); color: #7A5C28; }
.badge--gray { background: var(--gray-100); color: var(--gray-700); }
.badge--dark { background: var(--dark); color: var(--white); }
.badge--white { background: rgba(255,255,255,.15); color: var(--white); border: 1px solid rgba(255,255,255,.3); }
/* ── Divider ───────────────────────────────────────────────── */
.divider { height: 1px; background: var(--gray-100); margin: var(--s8) 0; }
.divider--green { background: var(--green-100); }
/* ── Section Header ────────────────────────────────────────── */
.section-header { margin-bottom: var(--s12); }
.section-header__eyebrow {
font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .12em; color: var(--green-500);
margin-bottom: var(--s3);
}
.section-header__title { margin-bottom: var(--s4); }
.section-header__sub { color: var(--gray-600); max-width: 560px; }
/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
position: sticky; top: 0; z-index: 100;
background: var(--white);
border-bottom: 1px solid var(--gray-100);
padding: 0 var(--s6);
}
.navbar__inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
height: 72px;
}
.navbar__logo { display: flex; align-items: center; gap: var(--s3); }
.navbar__logo-mark {
width: 40px; height: 40px; border-radius: var(--r-sm);
background: var(--green-500); display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.navbar__logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.navbar__logo-mark svg { width: 22px; height: 22px; fill: white; }
/* Logo imagem standalone (sem badge verde) */
.navbar__logo-img {
height: 48px; max-height: 48px; width: auto; max-width: 160px;
display: block; object-fit: contain; flex-shrink: 0;
}
.navbar__logo-text { line-height: 1.2; }
.navbar__logo-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--dark); }
.navbar__logo-text span { display: block; font-size: 0.7rem; font-weight: 400; color: var(--gray-600); letter-spacing: .04em; }
.navbar__nav { display: flex; align-items: center; gap: var(--s8); }
.navbar__link { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); transition: color var(--t-fast); }
.navbar__link:hover { color: var(--green-500); }
.navbar__link--active { color: var(--green-500); }
.navbar__link--gold { color: var(--gold) !important; font-weight: 600; }
.navbar__link--gold:hover { color: #a07840 !important; }
.navbar__actions { display: flex; align-items: center; gap: var(--s3); }
.navbar__mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--s2); }
.navbar__mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: all var(--t-base); }
/* ── Hero ──────────────────────────────────────────────────── */
.hero {
position: relative; min-height: 88vh;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, var(--green-900) 0%, var(--green-700) 45%, var(--green-800) 100%);
overflow: hidden;
}
.hero__overlay {
position: absolute; inset: 0;
background: url('data:image/svg+xml,');
}
.hero__content { position: relative; z-index: 1; text-align: center; padding: var(--s16) var(--s6); max-width: 860px; }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: var(--s2);
font-size: 0.75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.7); margin-bottom: var(--s6);
}
.hero__eyebrow::before, .hero__eyebrow::after {
content:''; display: block; height: 1px; width: 32px; background: rgba(255,255,255,.3);
}
@keyframes luxury-shimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Cursor dourado do typewriter */
.type-cursor {
display: inline-block;
width: 3px;
height: 0.82em;
background: #c8a050;
border-radius: 2px;
margin-left: 3px;
vertical-align: middle;
animation: cursor-blink 0.75s step-end infinite;
}
/* gerada pelo JS herda o estilo de hero__title em */
.hero__title .type-em {
font-style: italic;
}
.hero__title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.05;
margin-bottom: var(--s6);
/* Gradiente ouro luxuoso com shimmer animado */
background: linear-gradient(
90deg,
#8a6020 0%,
#c8a050 18%,
#f5e090 35%,
#fffbe8 50%,
#f5e090 65%,
#c8a050 82%,
#8a6020 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: luxury-shimmer 4.5s linear infinite;
}
/* em dentro do título — apenas itálico, sem background próprio */
.hero__title em {
font-style: italic;
-webkit-text-fill-color: transparent;
}
.hero__subtitle { font-size: 1.125rem; color: rgba(255,255,255,.7); margin-bottom: var(--s12); line-height: 1.6; }
/* ── Search Box ────────────────────────────────────────────── */
.search-box {
background: var(--white); border-radius: var(--r-lg);
padding: var(--s5); box-shadow: var(--shadow-xl);
max-width: 820px; margin: 0 auto;
}
.search-box__tabs { display: flex; gap: var(--s1); margin-bottom: var(--s4); }
.search-box__tab {
padding: var(--s2) var(--s4); border-radius: var(--r-sm);
font-size: 0.8125rem; font-weight: 600; color: var(--gray-600);
transition: all var(--t-fast); cursor: pointer;
}
.search-box__tab.active { background: var(--green-500); color: var(--white); }
.search-box__tab:hover:not(.active) { background: var(--green-50); color: var(--green-500); }
.search-box__fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--s3); align-items: end; }
.search-box__field label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-600); margin-bottom: var(--s2); }
.search-box__field select, .search-box__field input {
width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--gray-200);
border-radius: var(--r-sm); font-size: 0.9rem; font-family: var(--font-body);
color: var(--dark); background: var(--white); transition: border-color var(--t-fast);
appearance: none; -webkit-appearance: none;
}
.search-box__field select:focus, .search-box__field input:focus { outline: none; border-color: var(--green-500); }
.search-box__code {
display: flex; align-items: center; gap: var(--s3);
border-top: 1px solid var(--gray-100); padding-top: var(--s4); margin-top: var(--s4);
}
.search-box__code label { font-size: 0.75rem; color: var(--gray-600); font-weight: 500; white-space: nowrap; }
.search-box__code input {
flex: 1; padding: var(--s2) var(--s3); border: 1.5px solid var(--gray-200);
border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.875rem;
letter-spacing: .04em; transition: border-color var(--t-fast);
}
.search-box__code input:focus { outline: none; border-color: var(--green-500); }
/* ── Stats Bar ─────────────────────────────────────────────── */
.stats-bar { background: var(--dark); padding: var(--s6) 0; }
.stats-bar__inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--s6); display: flex; align-items: center; justify-content: center; gap: var(--s16); flex-wrap: wrap; }
.stats-bar__item { text-align: center; }
.stats-bar__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; color: var(--white); line-height: 1; }
.stats-bar__label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); margin-top: var(--s1); }
.stats-bar__divider { width: 1px; height: 40px; background: var(--gray-700); }
/* ── Property Card ─────────────────────────────────────────── */
.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.prop-card {
background: var(--white); border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow-sm); transition: all var(--t-base);
cursor: pointer; border: 1px solid var(--gray-100);
}
.prop-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.prop-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--gray-100); }
.prop-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.prop-card:hover .prop-card__img-wrap img { transform: scale(1.04); }
.prop-card__badge { position: absolute; top: var(--s3); left: var(--s3); z-index: 1; }
.prop-card__fav { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; background: rgba(255,255,255,.9); border-radius: var(--r-full); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--t-fast); backdrop-filter: blur(4px); }
.prop-card__fav:hover { color: #E53E3E; background: var(--white); }
.prop-card__body { padding: var(--s4) var(--s5); }
.prop-card__code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-400); letter-spacing: .06em; margin-bottom: var(--s2); }
.prop-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--dark); line-height: 1.3; margin-bottom: var(--s2); }
.prop-card__location { font-size: 0.8rem; color: var(--gray-600); margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s1); }
.prop-card__attrs { display: flex; gap: var(--s4); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--gray-100); }
.prop-card__attr { font-size: 0.8rem; color: var(--gray-600); display: flex; align-items: center; gap: var(--s1); }
.prop-card__attr svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--green-500); }
.prop-card__footer { display: flex; align-items: center; justify-content: space-between; }
.prop-card__price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--green-500); }
.prop-card__price-label { font-size: 0.75rem; color: var(--gray-400); display: block; line-height: 1; }
/* ── Vitrine (carrossel horizontal) ───────────────────────── */
.vitrine { padding: var(--s16) 0; overflow: hidden; }
.vitrine__header { max-width: 1280px; margin: 0 auto; padding: 0 var(--s6); display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--s8); }
.vitrine__track { display: flex; gap: var(--s5); padding: 0 var(--s6) var(--s4); max-width: 1280px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.vitrine__track::-webkit-scrollbar { display: none; }
.vitrine__card { flex: 0 0 340px; }
/* ── Blog ──────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.blog-card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gray-100); transition: all var(--t-base); }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__img { aspect-ratio: 16/9; background: var(--green-100); overflow: hidden; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__img--placeholder { display: flex; align-items: center; justify-content: center; }
.blog-card__img--placeholder svg { width: 48px; height: 48px; color: var(--green-300); }
.blog-card__body { padding: var(--s5); }
.blog-card__cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green-500); margin-bottom: var(--s2); }
.blog-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.35; color: var(--dark); margin-bottom: var(--s3); transition: color var(--t-fast); }
.blog-card:hover .blog-card__title { color: var(--green-500); }
.blog-card__excerpt { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--s4); }
.blog-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--gray-400); }
.blog-card__read { font-weight: 600; color: var(--green-500); font-size: 0.8rem; display: flex; align-items: center; gap: var(--s1); }
/* ── Exclusividades Banner ─────────────────────────────────── */
.excl-banner {
background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
border-radius: var(--r-xl); padding: var(--s16); position: relative; overflow: hidden;
}
.excl-banner::before {
content: ''; position: absolute; right: -80px; top: -80px;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,.04);
}
.excl-banner__content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: var(--s8); align-items: center; }
.excl-banner__steps { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s6); }
.excl-banner__step { display: flex; align-items: flex-start; gap: var(--s4); }
.excl-banner__step-num {
width: 32px; height: 32px; border-radius: var(--r-full); flex-shrink: 0;
background: rgba(255,255,255,.15); color: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem; font-weight: 700;
}
.excl-banner__step-text strong { display: block; color: var(--white); font-size: 0.9rem; margin-bottom: 2px; }
.excl-banner__step-text span { color: rgba(255,255,255,.65); font-size: 0.8rem; }
/* ── About ─────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; }
.about__img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5; background: var(--green-100); position: relative; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__badge-float {
position: absolute; bottom: var(--s6); left: var(--s6);
background: var(--white); border-radius: var(--r-lg); padding: var(--s4) var(--s5);
box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--s4);
}
.about__badge-float-icon { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--green-500); display: flex; align-items: center; justify-content: center; }
.about__badge-float-icon svg { width: 22px; height: 22px; fill: white; }
.about__badge-float-text strong { display: block; font-size: 1.1rem; font-weight: 700; color: var(--dark); }
.about__badge-float-text span { font-size: 0.75rem; color: var(--gray-600); }
.about__content { padding: var(--s8) 0; }
.about__bullets { margin: var(--s8) 0; display: flex; flex-direction: column; gap: var(--s4); }
.about__bullet { display: flex; align-items: flex-start; gap: var(--s4); }
.about__bullet-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--green-50); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.about__bullet-icon svg { width: 18px; height: 18px; color: var(--green-500); }
/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--dark); color: var(--white); padding: var(--s20) 0 var(--s8); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s12); margin-bottom: var(--s12); }
.footer__brand { }
.footer__logo { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.footer__logo-mark { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--green-500); display: flex; align-items: center; justify-content: center; }
.footer__logo-mark svg { width: 20px; height: 20px; fill: white; }
.footer__logo-text strong { font-size: 0.875rem; font-weight: 700; }
.footer__logo-text span { display: block; font-size: 0.65rem; color: var(--gray-400); letter-spacing: .04em; }
.footer__desc { font-size: 0.875rem; color: var(--gray-400); line-height: 1.7; margin-bottom: var(--s5); }
.footer__contact a { display: flex; align-items: center; gap: var(--s2); color: var(--gray-400); font-size: 0.8rem; margin-bottom: var(--s2); transition: color var(--t-fast); }
.footer__contact a:hover { color: var(--green-400); }
.footer__col-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); margin-bottom: var(--s5); }
.footer__links { display: flex; flex-direction: column; gap: var(--s3); }
.footer__links a { font-size: 0.875rem; color: var(--gray-400); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid var(--gray-700); padding-top: var(--s6); display: flex; align-items: center; justify-content: space-between; }
.footer__creci { font-size: 0.75rem; color: var(--gray-600); }
.footer__copy { font-size: 0.75rem; color: var(--gray-600); }
.footer__socials { display: flex; gap: var(--s3); }
.footer__social { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--gray-700); display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--t-fast); }
.footer__social:hover { background: var(--green-500); color: var(--white); }
.footer__social svg { width: 16px; height: 16px; }
/* ── WhatsApp Float ─────────────────────────────────────────── */
.whatsapp-float {
position: fixed; bottom: max(var(--s8), env(safe-area-inset-bottom, var(--s8))); right: var(--s8); z-index: 999;
width: 56px; height: 56px; border-radius: var(--r-full);
background: #25D366; color: var(--white);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,.4);
transition: all var(--t-base);
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.5); }
.whatsapp-float svg { width: 28px; height: 28px; }
/* ── Login Page ─────────────────────────────────────────────── */
.login-page {
min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
.login-page__aside {
background: linear-gradient(160deg, var(--green-900), var(--green-700));
padding: var(--s16); display: flex; flex-direction: column; justify-content: space-between;
position: relative; overflow: hidden;
}
.login-page__aside::before {
content: ''; position: absolute; bottom: -100px; right: -100px;
width: 400px; height: 400px; border-radius: 50%;
background: rgba(255,255,255,.04);
}
.login-page__aside-brand { display: flex; align-items: center; gap: var(--s3); }
.login-page__aside-content { position: relative; z-index: 1; }
.login-page__aside-quote { font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--white); line-height: 1.2; margin-bottom: var(--s6); }
.login-page__aside-quote em { color: rgba(255,255,255,.65); }
.login-page__aside-footer { font-size: 0.8rem; color: rgba(255,255,255,.5); }
.login-page__form-area { display: flex; align-items: center; justify-content: center; padding: var(--s12); background: var(--white); }
.login-card { width: 100%; max-width: 420px; }
.login-card__header { margin-bottom: var(--s10); }
.login-card__eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--green-500); margin-bottom: var(--s3); }
.login-card__title { font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--dark); margin-bottom: var(--s2); }
.login-card__subtitle { font-size: 0.9rem; color: var(--gray-600); }
.login-card__tabs { display: flex; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); margin-bottom: var(--s8); overflow: hidden; }
.login-card__tab { flex: 1; padding: var(--s3); text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--gray-600); transition: all var(--t-fast); cursor: pointer; }
.login-card__tab.active { background: var(--green-500); color: var(--white); }
.login-card__tab:hover:not(.active) { background: var(--green-50); color: var(--green-500); }
.form-group { margin-bottom: var(--s5); }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--dark); margin-bottom: var(--s2); }
.form-group input {
width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--gray-200);
border-radius: var(--r-sm); font-size: 0.9rem; font-family: var(--font-body);
color: var(--dark); transition: border-color var(--t-fast); background: var(--white);
}
.form-group input:focus { outline: none; border-color: var(--green-500); }
.form-group__hint { font-size: 0.75rem; color: var(--gray-400); margin-top: var(--s2); }
.form-forgot { display: block; text-align: right; font-size: 0.8rem; color: var(--green-500); margin-top: calc(-1 * var(--s3)); margin-bottom: var(--s6); }
.login-card__divider { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0; }
.login-card__divider::before, .login-card__divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-100); }
.login-card__divider span { font-size: 0.75rem; color: var(--gray-400); }
/* ── Admin Dashboard Preview ────────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; background: var(--off-white); }
.admin-sidebar {
width: 240px; background: var(--dark); flex-shrink: 0;
display: flex; flex-direction: column; padding: var(--s5) 0;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar__brand { padding: var(--s2) var(--s5) var(--s8); display: flex; align-items: center; gap: var(--s3); }
.admin-sidebar__nav { flex: 1; padding: 0 var(--s3); }
.admin-sidebar__section-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-600); padding: var(--s5) var(--s3) var(--s2); }
.admin-sidebar__link {
display: flex; align-items: center; gap: var(--s3);
padding: var(--s3) var(--s4); border-radius: var(--r-sm);
font-size: 0.875rem; color: var(--gray-400); transition: all var(--t-fast); margin-bottom: 2px;
}
.admin-sidebar__link:hover { background: rgba(255,255,255,.06); color: var(--white); }
.admin-sidebar__link.active { background: var(--green-500); color: var(--white); }
.admin-sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-sidebar__link .count { margin-left: auto; background: var(--green-500); color: white; border-radius: var(--r-full); font-size: 0.65rem; font-weight: 700; padding: 1px 6px; }
.admin-sidebar__link.active .count { background: rgba(255,255,255,.2); }
.admin-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.admin-header {
background: var(--white); border-bottom: 1px solid var(--gray-100);
padding: 0 var(--s8); height: 64px;
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 10;
}
.admin-header__title { font-size: 1rem; font-weight: 700; color: var(--dark); }
.admin-header__actions { display: flex; align-items: center; gap: var(--s4); }
.admin-header__avatar { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--green-500); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.admin-content { padding: var(--s8); flex: 1; overflow-y: auto; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s8); }
.admin-kpi {
background: var(--white); border-radius: var(--r-lg); padding: var(--s5);
border: 1px solid var(--gray-100); transition: box-shadow var(--t-base);
}
.admin-kpi:hover { box-shadow: var(--shadow-md); }
.admin-kpi__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-600); margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.admin-kpi__label svg { width: 14px; height: 14px; color: var(--green-500); }
.admin-kpi__value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--dark); line-height: 1; margin-bottom: var(--s2); }
.admin-kpi__delta { font-size: 0.75rem; display: flex; align-items: center; gap: var(--s1); }
.admin-kpi__delta--up { color: var(--green-500); }
.admin-kpi__delta--down { color: #E53E3E; }
.admin-table-wrap { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--gray-100); overflow: hidden; }
.admin-table-header { padding: var(--s5) var(--s6); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: var(--s3) var(--s5); text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.admin-table td { padding: var(--s4) var(--s5); font-size: 0.875rem; border-bottom: 1px solid var(--gray-100); color: var(--dark); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--gray-50); }
.admin-table__code { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-600); }
.admin-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full); }
.admin-status--active { background: var(--green-100); color: var(--green-700); }
.admin-status--paused { background: #FFF3CD; color: #7A5C00; }
.admin-status--sold { background: var(--gray-100); color: var(--gray-700); }
.admin-status--new { background: #E3F2FD; color: #1565C0; }
.admin-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.prop-grid { grid-template-columns: repeat(2, 1fr); }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
.admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.navbar__nav, .navbar__actions { display: none; }
.navbar__mobile-toggle { display: flex; }
.prop-grid { grid-template-columns: 1fr; }
.blog-grid { grid-template-columns: 1fr; }
.search-box__fields { grid-template-columns: 1fr 1fr; }
.stats-bar__inner { gap: var(--s8); }
.stats-bar__divider { display: none; }
.excl-banner__grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; }
.login-page { grid-template-columns: 1fr; }
.login-page__aside { display: none; }
.admin-layout { flex-direction: column; }
.admin-sidebar { width: 100%; height: auto; position: static; }
.admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Utilities ──────────────────────────────────────────────── */
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mt-12 { margin-top: var(--s12); }
.mb-4 { margin-bottom: var(--s4); }
.mb-6 { margin-bottom: var(--s6); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-6 { gap: var(--s6); }
.justify-between { justify-content: space-between; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ══════════════════════════════════════════════════════════
EXTENSÃO — componentes dos HTML de preview
══════════════════════════════════════════════════════════ */
/* ── Navbar extras ──────────────────────────────────────── */
.navbar--scrolled { box-shadow: var(--shadow-md); }
.navbar__logo-mark {
font-family: var(--font-display); font-size: 1rem; font-weight: 700;
color: var(--white); letter-spacing: -.02em;
width: 40px; height: 40px; border-radius: var(--r-sm);
background: var(--green-500); display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.navbar__logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.navbar__logo-text { line-height: 1.25; }
.navbar__logo-text p { margin: 0; }
.navbar__hamburger {
display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: var(--s2); cursor: pointer;
}
.navbar__hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: all var(--t-base); }
/* Hamburger → X animation */
.navbar__hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger--open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navbar__nav--open { display: flex !important; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--white); padding: var(--s4) var(--s6); border-bottom: 1px solid var(--gray-100); z-index: 99; }
/* Botão cliente exclusivo — apenas cadeado, desktop */
.navbar__client-lock {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
color: var(--green-600);
border: 1.5px solid var(--green-200);
background: var(--green-50);
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
flex-shrink: 0;
}
.navbar__client-lock:hover {
background: var(--green-600);
color: var(--white);
border-color: var(--green-600);
}
/* Ícone cadeado — área restrita (mobile) */
.navbar__lock {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--green-600);
border: 1.5px solid var(--green-200);
background: var(--green-50);
transition: background var(--t-base), color var(--t-base);
flex-shrink: 0;
}
.navbar__lock:hover {
background: var(--green-600);
color: var(--white);
border-color: var(--green-600);
}
@media (max-width: 900px) {
.navbar__nav, .navbar__actions { display: none; }
.navbar__hamburger { display: flex; }
.navbar__lock { display: flex; }
}
/* Mobile nav — touch targets ≥44px */
@media (max-width: 900px) {
.navbar__nav--open .navbar__link {
min-height: 44px;
display: flex;
align-items: center;
padding: var(--s2) 0;
border-bottom: 1px solid var(--gray-100);
font-size: 1rem;
}
.navbar__nav--open .navbar__link:last-child { border-bottom: none; }
.navbar__client-lock,
.navbar__lock {
width: 44px;
height: 44px;
}
.navbar__hamburger {
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
padding: var(--s3);
}
}
/* ── Hero extras ────────────────────────────────────────── */
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(13,61,13,.92) 0%, rgba(24,89,24,.80) 50%, rgba(13,61,13,.88) 100%); }
/* ── Btn extras ─────────────────────────────────────────── */
.btn--gold { background: var(--gold); color: var(--white); }
.btn--gold:hover { background: #9E7A3E; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost-light { color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.3); padding: var(--s3) var(--s6); border-radius: var(--r-sm); }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); color: var(--white); }
.btn--xs { padding: var(--s1) var(--s3); font-size: 0.75rem; }
/* ── Section header flex ────────────────────────────────── */
.section-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: var(--s10); flex-wrap: wrap; gap: var(--s4);
}
.section-header__title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.1; color: var(--dark);
}
.section-header__title em { font-style: italic; color: var(--green-500); }
/* ── Vitrine layouts ────────────────────────────────────── */
.vitrine--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.vitrine--scroll {
display: flex; gap: var(--s5);
overflow-x: auto; padding-bottom: var(--s3);
scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent;
}
.vitrine--scroll .prop-card { flex: 0 0 300px; }
@media (max-width: 900px) { .vitrine--grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vitrine--grid { grid-template-columns: 1fr; } }
/* ── Property Card extras ───────────────────────────────── */
.prop-card__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--gray-100); }
.prop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.prop-card:hover .prop-card__media img { transform: scale(1.04); }
.prop-card__badge { position: absolute; top: var(--s3); left: var(--s3); z-index: 1; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-full); }
.prop-card__badge--exclusive { background: var(--green-500); color: var(--white); }
.prop-card__badge--featured { background: var(--gold); color: var(--white); top: calc(var(--s3) + 28px); }
.prop-card__badge--new { background: var(--dark); color: var(--white); }
.prop-card__favorite { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; background: rgba(255,255,255,.9); border-radius: var(--r-full); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--t-fast); backdrop-filter: blur(4px); }
.prop-card__favorite:hover { color: #E53E3E; background: var(--white); }
.prop-card__specs { display: flex; gap: var(--s4); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--gray-100); font-size: .8rem; color: var(--gray-600); }
.prop-card--featured { grid-column: span 1; }
@media (min-width: 900px) { .prop-card--featured { grid-column: span 1; } }
/* ── Exclusividades Banner extras ───────────────────────── */
.excl-banner { position: relative; overflow: hidden; padding: var(--s20) 0; }
.excl-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.excl-banner__overlay { position: absolute; inset: 0; background: linear-gradient(130deg, rgba(10,50,10,.96) 0%, rgba(20,78,20,.88) 55%, rgba(10,50,10,.70) 100%); }
/* Grid: texto + card */
.excl-banner__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 340px;
gap: var(--s16);
align-items: center;
min-width: 0;
}
/* Anula o display:grid da definição legacy (linha ~365) */
.excl-banner__content {
display: flex;
flex-direction: column;
min-width: 0;
}
.excl-banner__eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--green-300); margin-bottom: var(--s3); }
.excl-banner__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; color: var(--white); margin-bottom: var(--s6); }
.excl-banner__title em { font-style: italic; color: rgba(255,255,255,.75); }
.excl-banner__text { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.7; margin-bottom: var(--s6); }
/* Lista com check circles */
.excl-banner__list { list-style: none; display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s8); }
.excl-banner__list li { display: flex; align-items: flex-start; gap: var(--s3); color: rgba(255,255,255,.88); font-size: .9rem; line-height: 1.55; }
.excl-banner__check {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: var(--r-full);
background: rgba(255,255,255,.12);
border: 1.5px solid rgba(255,255,255,.25);
display: flex; align-items: center; justify-content: center;
color: var(--green-300);
margin-top: 1px;
}
.excl-banner__actions { display: flex; gap: var(--s4); flex-wrap: wrap; }
/* Stats card flutuante */
.excl-banner__statscard {
background: rgba(255,255,255,.07);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.15);
border-radius: var(--r-xl);
padding: var(--s8);
}
.excl-banner__statscard-label {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--green-300);
margin-bottom: var(--s5);
}
.excl-banner__statscard-list {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s5) var(--s4);
margin-bottom: var(--s5);
}
.excl-banner__statscard-list li {
display: flex;
flex-direction: column;
gap: 3px;
}
.excl-banner__statscard-list strong {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.excl-banner__statscard-list span {
font-size: .72rem;
color: rgba(255,255,255,.6);
line-height: 1.45;
}
.excl-banner__statscard-divider {
height: 1px;
background: rgba(255,255,255,.1);
margin-bottom: var(--s5);
}
.excl-banner__statscard-note {
font-size: .8rem;
color: rgba(255,255,255,.65);
line-height: 1.6;
}
.excl-banner__statscard-note strong { color: var(--white); font-weight: 600; }
/* ── Responsivo — "O nosso modelo" ── */
/* Tablet ≤900px: empilha grid em 1 coluna */
@media (max-width: 900px) {
.excl-banner { padding: var(--s14) 0; }
.excl-banner__grid { grid-template-columns: 1fr; gap: var(--s8); }
.excl-banner__title { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.excl-banner__text { font-size: .95rem; }
/* Stats card: ocupa largura total, stats em 2×2 */
.excl-banner__statscard { width: 100%; max-width: 100%; }
.excl-banner__statscard-list { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
/* Mobile ≤600px: botões em coluna */
@media (max-width: 600px) {
.excl-banner { padding: var(--s12) 0; }
/* Remove border-radius herdado da definição antiga — fica full-bleed */
.excl-banner { border-radius: 0; }
/* Esconde círculo decorativo que pode causar overflow lateral */
.excl-banner::before { display: none; }
.excl-banner__title { font-size: clamp(1.6rem, 6vw, 2rem); }
.excl-banner__text { font-size: .9rem; margin-bottom: var(--s5); }
.excl-banner__list { gap: var(--s3); margin-bottom: var(--s6); }
.excl-banner__list li { font-size: .85rem; }
/* Botões empilham em coluna */
.excl-banner__actions { flex-direction: column; gap: var(--s3); }
.excl-banner__actions .btn { width: 100%; text-align: center; justify-content: center; }
}
/* Celular pequeno ≤400px */
@media (max-width: 400px) {
.excl-banner { padding: var(--s10) 0; }
.excl-banner__title { font-size: 1.55rem; }
.excl-banner__statscard { padding: var(--s5); }
.excl-banner__statscard-list { gap: var(--s4); }
.excl-banner__statscard-list strong { font-size: 1.3rem; }
.excl-banner__statscard-list span { font-size: .66rem; }
.excl-banner__statscard-note { font-size: .75rem; }
}
/* ── Blog extras ────────────────────────────────────────── */
.blog-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); }
.blog-tag { padding: var(--s2) var(--s4); border-radius: var(--r-full); font-size: .8rem; font-weight: 500; color: var(--gray-600); border: 1.5px solid var(--gray-200); transition: all var(--t-fast); cursor: pointer; }
.blog-tag:hover, .blog-tag--active { background: var(--green-500); color: var(--white); border-color: var(--green-500); }
.blog-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card--featured { background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gray-100); }
.blog-card--featured .blog-card__media { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.blog-card--featured .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.blog-card--featured:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__media { display: block; position: relative; }
.blog-card__cat { position: absolute; bottom: var(--s3); left: var(--s3); background: var(--green-500); color: var(--white); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-full); }
.blog-card__body { padding: var(--s5); }
.blog-card__date { font-size: .75rem; color: var(--gray-400); display: block; margin-bottom: var(--s2); }
.blog-card--featured .blog-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: var(--dark); margin-bottom: var(--s4); transition: color var(--t-fast); }
.blog-card--featured .blog-card__title:hover { color: var(--green-500); }
.blog-card__excerpt { font-size: .9rem; color: var(--gray-600); line-height: 1.65; margin-bottom: var(--s5); }
.blog-card__footer { display: flex; align-items: center; justify-content: space-between; }
.blog-card__author { display: flex; align-items: center; gap: var(--s3); font-size: .8rem; color: var(--gray-600); }
.blog-card__avatar { width: 30px; height: 30px; border-radius: var(--r-full); background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.blog-card__read { font-size: .75rem; color: var(--gray-400); }
.blog-secondary { display: flex; flex-direction: column; gap: var(--s4); }
.blog-card--compact { display: flex; gap: var(--s4); background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gray-100); padding: var(--s4); align-items: flex-start; transition: box-shadow var(--t-base); }
.blog-card--compact:hover { box-shadow: var(--shadow-md); }
.blog-card__media--sm { flex: 0 0 100px; height: 80px; border-radius: var(--r-sm); overflow: hidden; position: relative; }
.blog-card__media--sm img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__media--sm .blog-card__cat { font-size: .55rem; padding: 2px 5px; }
.blog-card--compact .blog-card__body { padding: 0; flex: 1; }
.blog-card--compact .blog-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--dark); margin-bottom: var(--s2); transition: color var(--t-fast); }
.blog-card--compact .blog-card__title:hover { color: var(--green-500); }
/* ── Announce section ───────────────────────────────────── */
.announce-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: start; }
.announce-section__benefits { list-style: none; margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.announce-section__benefits li { color: var(--green-100); font-size: .9rem; line-height: 1.5; }
.announce-form { background: var(--white); border-radius: var(--r-xl); padding: var(--s8); box-shadow: var(--shadow-xl); }
.announce-form__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--dark); margin-bottom: var(--s6); }
.announce-form__privacy { font-size: .75rem; color: var(--gray-400); margin-top: var(--s4); text-align: center; }
/* ── Responsivo — Anunciar ───────────────────────────────── */
@media (max-width: 860px) {
#anunciar.section { padding: var(--s12) 0; }
.announce-section {
grid-template-columns: 1fr;
gap: var(--s8); /* reduz gap s16→s8 ao empilhar */
}
}
@media (max-width: 600px) {
#anunciar.section { padding: var(--s10) 0; }
.announce-form { padding: var(--s5); }
.announce-form__title { font-size: 1.2rem; margin-bottom: var(--s4); }
.announce-section__benefits { gap: var(--s2); margin-top: var(--s4); }
.announce-section__benefits li { font-size: .82rem; }
/* Form fields: input altura toque ≥44px já coberto pelo form-input global */
.form-field { margin-bottom: var(--s4); }
}
/* ── Forms ──────────────────────────────────────────────── */
.form-field { margin-bottom: var(--s5); }
.form-label { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--dark); margin-bottom: var(--s2); }
.form-label__link { font-weight: 400; color: var(--green-500); font-size: .8rem; }
.form-label__link:hover { text-decoration: underline; }
.form-input {
width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--gray-200);
border-radius: var(--r-sm); font-size: .9rem; font-family: var(--font-body);
color: var(--dark); background: var(--white); transition: border-color var(--t-fast);
appearance: none; -webkit-appearance: none;
}
.form-input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(33,114,23,.1); }
.form-input-wrap { position: relative; }
.form-input-icon { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.form-input--icon { padding-left: calc(var(--s4)*2 + 16px); }
.form-input-toggle { position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); color: var(--gray-400); transition: color var(--t-fast); }
.form-input-toggle:hover { color: var(--dark); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239C9C9C' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s4) center; padding-right: var(--s8); }
.form-field--row { display: flex; align-items: center; justify-content: space-between; }
.form-check { display: flex; align-items: center; gap: var(--s3); font-size: .875rem; color: var(--gray-600); cursor: pointer; }
.form-check input[type=checkbox] { accent-color: var(--green-500); width: 16px; height: 16px; }
/* ── About extras ───────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid__text { order: 1; }
.about-grid__image { order: 2; position: relative; border-radius: var(--r-xl); overflow: hidden; }
.about-grid__image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xl); }
.about-grid__badge { position: absolute; bottom: var(--s6); left: var(--s6); background: var(--white); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow-lg); }
.about-grid__badge strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--green-500); }
.about-grid__badge span { font-size: .75rem; color: var(--gray-600); }
.about-grid__desc { color: var(--gray-600); line-height: 1.7; margin-top: var(--s4); }
.about-grid__actions { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s8); }
/* ── Footer extras ──────────────────────────────────────── */
.footer__top { background: var(--dark); padding: var(--s20) 0 var(--s10); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--s10); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand p { line-height: 1.3; }
.footer__logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--white); margin-bottom: var(--s4); }
.footer__logo strong { font-weight: 600; }
.footer__tagline { font-size: .875rem; color: var(--gray-400); margin-bottom: var(--s3); }
.footer__creci { font-size: .75rem; color: var(--gray-600); margin-bottom: var(--s5); }
.footer__social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.footer__social a { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--gray-700); display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--t-fast); }
.footer__social a:hover { background: var(--green-500); color: var(--white); }
.footer__col { }
.footer__heading { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); margin-bottom: var(--s5); }
.footer__links { display: flex; flex-direction: column; gap: var(--s3); }
.footer__links a { font-size: .875rem; color: var(--gray-400); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--white); }
.footer__address { font-style: normal; display: flex; flex-direction: column; gap: var(--s3); }
.footer__address p, .footer__address a { font-size: .875rem; color: var(--gray-400); transition: color var(--t-fast); }
.footer__address a:hover { color: var(--green-400); }
/* ── Footer mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
.footer__top { padding: var(--s12) 0 var(--s8); }
.footer__social a { width: 44px; height: 44px; }
}
/* ── Vitrine card width mobile ───────────────────────────── */
@media (max-width: 768px) {
.vitrine__card { flex: 0 0 280px; }
}
/* ── SEO Bairros nav ─────────────────────────────────────── */
.footer__seo-bairros {
background: var(--dark);
border-top: 1px solid var(--gray-700);
padding: var(--s8) 0 var(--s6);
}
.footer__seo-title {
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--gray-600);
margin-bottom: var(--s5);
}
.footer__seo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s6);
}
@media (max-width: 900px) {
.footer__seo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.footer__seo-grid { grid-template-columns: 1fr; }
}
.footer__seo-col strong {
display: block;
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--gray-500);
margin-bottom: var(--s3);
}
.footer__seo-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.footer__seo-col a {
font-size: .75rem;
color: var(--gray-600);
transition: color var(--t-fast);
line-height: 1.4;
}
.footer__seo-col a:hover { color: var(--gray-300); }
.footer__bottom { background: var(--dark); border-top: 1px solid var(--gray-700); padding: var(--s5) 0; }
.footer__bottom .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); }
.footer__bottom p { font-size: .75rem; color: var(--gray-600); }
.footer__bottom-links { display: flex; gap: var(--s5); }
.footer__bottom-links a { font-size: .75rem; color: var(--gray-600); transition: color var(--t-fast); }
.footer__bottom-links a:hover { color: var(--white); }
/* ── Language Selector ───────────────────────────────────── */
.lang-selector { position: relative; }
.lang-selector__btn {
display: flex; align-items: center; gap: 5px;
padding: var(--s2) var(--s3); border-radius: var(--r-sm);
border: 1px solid var(--gray-200); background: transparent;
font-size: .8rem; font-weight: 500; color: var(--gray-700);
cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
}
.lang-selector__btn:hover { border-color: var(--green-400); color: var(--green-500); }
.lang-selector__arrow { transition: transform var(--t-fast); flex-shrink: 0; }
.lang-selector--open .lang-selector__arrow { transform: rotate(180deg); }
.lang-selector__dropdown {
position: absolute; top: calc(100% + 6px); right: 0;
background: var(--white); border: 1px solid var(--gray-100);
border-radius: var(--r-md); box-shadow: var(--shadow-lg);
min-width: 148px; z-index: 300; display: none; flex-direction: column; overflow: hidden;
}
.lang-selector--open .lang-selector__dropdown { display: flex; }
.lang-selector__option {
padding: var(--s3) var(--s4); font-size: .875rem; color: var(--gray-700);
text-align: left; transition: background var(--t-fast); white-space: nowrap; cursor: pointer;
}
.lang-selector__option:hover { background: var(--green-50); color: var(--green-600); }
.lang-selector__option--active { background: var(--green-50); color: var(--green-600); font-weight: 600; }
/* Lang selector no menu mobile (oculto — substituído pelo do header) */
.lang-selector--nav-mobile { display: none; }
/* Lang selector no header mobile (ao lado do hamburguer) */
.lang-selector--mh { display: none; }
@media (max-width: 900px) {
/* Reduz padding da navbar para logo ficar mais à esquerda */
.navbar { padding: 0 var(--s3); }
.navbar .container { padding: 0; }
/* Mostra seletor de idioma no header mobile */
.lang-selector--mh {
display: block;
position: relative;
}
.lang-selector--mh .lang-selector__btn {
display: flex; align-items: center; justify-content: center;
gap: 3px;
min-width: 44px; min-height: 44px;
padding: var(--s2) var(--s1);
font-size: 1.25rem;
border: none;
background: none;
cursor: pointer;
line-height: 1;
}
.lang-selector--mh .lang-selector__arrow { display: none; }
.lang-selector--mh .lang-selector__dropdown {
right: 0;
top: calc(100% + 4px);
left: auto;
min-width: 148px;
}
/* Oculta o seletor no .navbar__actions no breakpoint mobile */
.navbar__actions .lang-selector { display: none; }
}
/* ── WhatsApp float tooltip ─────────────────────────────── */
.whatsapp-float__tooltip { position: fixed; right: calc(var(--s8) + 64px); bottom: calc(var(--s8) + 14px); background: var(--dark); color: var(--white); font-size: .8rem; white-space: nowrap; padding: var(--s2) var(--s3); border-radius: var(--r-sm); pointer-events: none; opacity: 0; transition: opacity var(--t-fast); }
.whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; }
/* ── Login Page extras ──────────────────────────────────── */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s12); }
@media (max-width: 768px) {
.login-page { grid-template-columns: 1fr; }
.login-aside { display: none; }
}
.login-aside__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.login-aside__overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(13,61,13,.94) 0%, rgba(24,89,24,.82) 100%); }
.login-aside__content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; justify-content: space-between; }
.login-aside__logo { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.login-aside__quote { margin: auto 0; }
.login-aside__quote blockquote { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: var(--white); line-height: 1.4; font-style: italic; }
.login-aside__cite { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: var(--s4); }
.login-aside__stats { display: flex; gap: var(--s8); }
.login-aside__stats > div { text-align: center; }
.login-aside__stats strong { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--white); }
.login-aside__stats span { font-size: .7rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; }
.login-main { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--off-white); padding: var(--s8) var(--s6); min-height: 100vh; }
.login-main__back { display: flex; align-items: center; gap: var(--s2); font-size: .8rem; color: var(--gray-600); position: absolute; top: var(--s6); left: var(--s6); transition: color var(--t-fast); }
.login-main__back:hover { color: var(--green-500); }
.login-card { width: 100%; max-width: 440px; background: var(--white); border-radius: var(--r-xl); padding: var(--s10); box-shadow: var(--shadow-lg); }
.login-card__header { margin-bottom: var(--s8); }
.login-card__title { font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--dark); margin-bottom: var(--s2); }
.login-card__subtitle { font-size: .9rem; color: var(--gray-600); }
.login-tabs { display: flex; border: 1.5px solid var(--gray-200); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s8); }
.login-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s3) var(--s2); font-size: .7rem; font-weight: 600; color: var(--gray-600); background: none; border: none; cursor: pointer; transition: all var(--t-fast); border-right: 1.5px solid var(--gray-200); }
.login-tab:last-child { border-right: none; }
.login-tab:hover:not(.login-tab--active) { background: var(--green-50); color: var(--green-500); }
.login-tab--active { background: var(--green-500); color: var(--white); }
.login-tab-panel { }
.login-tab-panel--active { }
.login-tab-panel__desc { font-size: .875rem; color: var(--gray-600); margin-bottom: var(--s6); line-height: 1.6; padding: var(--s4); background: var(--off-white); border-radius: var(--r-sm); border-left: 3px solid var(--green-500); }
.login-form { }
.login-form__help { font-size: .8rem; color: var(--gray-400); text-align: center; margin-top: var(--s4); }
.login-form__help a { color: var(--green-500); }
.login-recover { }
.login-recover__back { display: flex; align-items: center; gap: var(--s2); font-size: .85rem; color: var(--green-500); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--s6); }
.login-main__footer { font-size: .75rem; color: var(--gray-400); position: absolute; bottom: var(--s6); }
/* ── Login Mobile — header com logo + back ── */
.login-mobile-header {
display: none;
width: 100%;
align-items: center;
justify-content: space-between;
padding: var(--s4) var(--s5);
background: var(--white);
border-bottom: 1px solid var(--gray-100);
position: sticky;
top: 0;
z-index: 10;
}
.login-mobile-header__back {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1.5px solid var(--gray-200);
color: var(--gray-600);
flex-shrink: 0;
}
.login-mobile-header__back:hover { background: var(--green-50); color: var(--green-600); }
.login-mobile-header__brand {
display: flex;
align-items: center;
gap: var(--s2);
text-decoration: none;
}
@media (max-width: 768px) {
/* Mostrar header mobile, ocultar back link desktop */
.login-mobile-header { display: flex; }
.login-main__back { display: none; }
/* main sem height mínimo absoluto — conteúdo rola normalmente */
.login-main {
min-height: unset;
justify-content: flex-start;
padding: var(--s6) var(--s4) var(--s10);
align-items: stretch;
}
/* Card ocupa toda a largura com espaçamento confortável */
.login-card {
max-width: 100%;
padding: var(--s7) var(--s5);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
}
/* Título menor no mobile */
.login-card__title { font-size: 1.5rem; }
/* Tabs: ícone + texto abreviado empilhados, menores */
.login-tabs {
margin-bottom: var(--s6);
}
.login-tab {
font-size: .65rem;
padding: var(--s2) var(--s1);
gap: var(--s1);
}
/* Footer fora do absolute — flui com conteúdo */
.login-main__footer {
position: static;
margin-top: var(--s8);
text-align: center;
padding-bottom: var(--s4);
}
/* Inputs com altura confortável para toque */
.form-input { font-size: 1rem; height: 48px; }
.btn--lg { height: 50px; font-size: 1rem; }
}
/* ══════════════════════════════════════════════════════════
ADMIN DASHBOARD — estilos completos
══════════════════════════════════════════════════════════ */
.admin-body { overflow: hidden; }
.admin-layout { display: flex; height: 100vh; overflow: hidden; background: var(--off-white); }
/* Sidebar */
.admin-sidebar {
width: 260px; background: var(--dark); flex-shrink: 0;
display: flex; flex-direction: column;
height: 100vh; overflow-y: auto; transition: transform var(--t-base);
}
.admin-sidebar__brand { padding: var(--s5) var(--s5) var(--s6); display: flex; align-items: center; gap: var(--s3); border-bottom: 1px solid rgba(255,255,255,.06); }
.admin-sidebar__brand-text p { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.4; margin: 0; }
.admin-sidebar__brand-text p:last-child strong { color: var(--white); }
.admin-sidebar__user { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid rgba(255,255,255,.06); }
.admin-sidebar__avatar { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--green-500); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.admin-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-full); }
.admin-sidebar__user-name { font-size: .85rem; font-weight: 600; color: var(--white); }
.admin-sidebar__user-role { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--green-400); }
.admin-sidebar__nav { flex: 1; padding: var(--s3) var(--s3); overflow-y: auto; }
.admin-sidebar__nav-group { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-600); padding: var(--s5) var(--s3) var(--s2); }
.admin-sidebar__link {
display: flex; align-items: center; gap: var(--s3);
padding: var(--s3) var(--s4); border-radius: var(--r-sm);
font-size: .85rem; color: rgba(255,255,255,.6); transition: all var(--t-fast); margin-bottom: 2px; cursor: pointer;
}
.admin-sidebar__link:hover { background: rgba(255,255,255,.06); color: var(--white); }
.admin-sidebar__link--active { background: var(--green-500) !important; color: var(--white) !important; }
.admin-sidebar__link svg { flex-shrink: 0; }
.admin-sidebar__badge { margin-left: auto; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.admin-sidebar__badge--alert { background: #E53E3E; color: var(--white); }
.admin-sidebar--active .admin-sidebar__badge { background: rgba(255,255,255,.2); }
.admin-sidebar__footer { padding: var(--s4) var(--s3); border-top: 1px solid rgba(255,255,255,.06); }
.admin-sidebar__link--logout { color: rgba(255,255,255,.4) !important; }
.admin-sidebar__link--logout:hover { color: #FC8181 !important; background: rgba(252,129,129,.08) !important; }
/* Main area */
.admin-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.admin-topbar {
background: var(--white); border-bottom: 1px solid var(--gray-100);
padding: 0 var(--s6); height: 64px;
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 10; flex-shrink: 0;
}
.admin-topbar__left { display: flex; align-items: center; gap: var(--s4); }
.admin-topbar__right { display: flex; align-items: center; gap: var(--s4); }
.admin-sidebar-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: var(--s2); }
.admin-sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--dark); border-radius: 2px; }
.admin-breadcrumb { font-size: .875rem; color: var(--gray-600); font-weight: 500; }
.admin-search { display: flex; align-items: center; gap: var(--s3); background: var(--off-white); border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); padding: var(--s2) var(--s4); }
.admin-search svg { color: var(--gray-400); flex-shrink: 0; }
.admin-search input { border: none; background: none; font-size: .875rem; color: var(--dark); font-family: var(--font-body); width: 200px; }
.admin-search input:focus { outline: none; }
.admin-notif { position: relative; background: none; border: none; cursor: pointer; padding: var(--s2); color: var(--gray-600); transition: color var(--t-fast); }
.admin-notif:hover { color: var(--dark); }
.admin-notif__dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: var(--r-full); background: #E53E3E; border: 2px solid var(--white); }
.admin-topbar__user { display: flex; align-items: center; gap: var(--s3); font-size: .875rem; font-weight: 500; color: var(--dark); }
/* Content */
.admin-content { flex: 1; overflow-y: auto; padding: var(--s6); min-height: 0; }
.admin-page { min-width: 0; }
.admin-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap;
}
.admin-page-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; color: var(--dark); margin-bottom: var(--s1); line-height: 1.2; }
.admin-page-subtitle { font-size: .875rem; color: var(--gray-400); }
/* Dashboard charts */
.dash-charts-row { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
.dash-charts-row--2 { grid-template-columns: 1fr 1fr; }
.dash-charts-row--main { grid-template-columns: 3fr 2fr; }
.dash-chart-wrap { position: relative; width: 100%; }
@media (max-width: 1100px) {
.dash-charts-row--2, .dash-charts-row--main { grid-template-columns: 1fr; }
}
/* KPI grid */
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s6); }
@media (max-width: 1100px) { .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.admin-kpi { background: var(--white); border-radius: var(--r-lg); padding: var(--s5); border: 1px solid var(--gray-100); display: flex; gap: var(--s4); align-items: flex-start; transition: box-shadow var(--t-base); }
.admin-kpi:hover { box-shadow: var(--shadow-md); }
.admin-kpi__icon { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-kpi__icon--green { background: var(--green-100); color: var(--green-600); }
.admin-kpi__icon--blue { background: #E3F2FD; color: #1565C0; }
.admin-kpi__icon--amber { background: #FFF8E1; color: #F57F17; }
.admin-kpi__icon--gold { background: var(--gold-pale); color: #7A5C28; }
.admin-kpi__body { flex: 1; min-width: 0; }
.admin-kpi__label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-600); margin-bottom: var(--s2); }
.admin-kpi__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--dark); line-height: 1; margin-bottom: var(--s2); }
.admin-kpi__delta { font-size: .75rem; }
.admin-kpi__delta--up { color: var(--green-500); }
.admin-kpi__delta--neutral { color: var(--gray-400); }
/* Row + Card */
.admin-row { display: grid; grid-template-columns: 1fr 360px; gap: var(--s5); align-items: start; }
@media (max-width: 1200px) { .admin-row { grid-template-columns: 1fr; } }
.admin-card { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--gray-100); overflow: hidden; }
.admin-card--grow { flex: 1; }
.admin-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--gray-100); }
.admin-card__title { font-size: 1rem; font-weight: 600; color: var(--dark); }
.admin-card__actions { display: flex; gap: var(--s2); }
.admin-card__body { padding: var(--s5); }
.admin-col-right { display: flex; flex-direction: column; }
/* Filter bar */
.admin-filter-bar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.admin-filter { padding: var(--s2) var(--s4); border-radius: var(--r-full); font-size: .75rem; font-weight: 600; color: var(--gray-600); border: 1.5px solid var(--gray-200); background: none; cursor: pointer; transition: all var(--t-fast); }
.admin-filter:hover { border-color: var(--green-500); color: var(--green-500); }
.admin-filter--active { background: var(--green-500); color: var(--white); border-color: var(--green-500); }
/* Table */
.admin-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--gray-100); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 580px; }
.admin-table th { padding: var(--s3) var(--s4); text-align: left; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); background: var(--gray-50); white-space: nowrap; }
.admin-table td { padding: var(--s4); font-size: .85rem; border-bottom: 1px solid var(--gray-100); color: var(--dark); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--off-white); }
.admin-table__person { display: flex; align-items: center; gap: var(--s3); }
.admin-table__avatar { width: 34px; height: 34px; border-radius: var(--r-full); background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; flex-shrink: 0; }
.admin-table__avatar--sm { width: 28px; height: 28px; font-size: .6rem; }
.admin-table__name { font-weight: 600; font-size: .85rem; color: var(--dark); }
.admin-table__email { font-size: .75rem; color: var(--gray-400); }
.admin-table__code { font-family: var(--font-mono); font-size: .75rem; color: var(--gray-600); background: var(--gray-50); padding: 2px 6px; border-radius: var(--r-sm); border: 1px solid var(--gray-200); }
.admin-table__broker { font-size: .8rem; color: var(--dark); }
.admin-table__date { font-size: .8rem; color: var(--gray-400); white-space: nowrap; }
/* Status badges */
.admin-status { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap; }
.admin-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-status--new { background: #E3F2FD; color: #1565C0; }
.admin-status--qualified { background: #E8F5E9; color: #2E7D32; }
.admin-status--visit { background: #FFF3E0; color: #E65100; }
.admin-status--proposal { background: var(--gold-pale); color: #7A5C28; }
.admin-status--closed { background: var(--gray-100); color: var(--gray-700); }
/* Top Corretores rank */
.admin-rank { display: flex; flex-direction: column; gap: var(--s3); list-style: none; }
.admin-rank__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--gray-100); }
.admin-rank__item:last-child { border-bottom: none; }
.admin-rank__pos { width: 20px; text-align: center; font-size: .75rem; font-weight: 700; color: var(--gray-400); flex-shrink: 0; }
.admin-rank__info { flex: 1; min-width: 0; }
.admin-rank__name { font-size: .85rem; font-weight: 600; color: var(--dark); }
.admin-rank__meta { font-size: .7rem; color: var(--gray-400); }
.admin-rank__value { font-size: .8rem; font-weight: 700; color: var(--green-600); white-space: nowrap; }
/* Status bar chart */
.admin-donut-legend { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.admin-donut-legend__item { display: flex; align-items: center; gap: var(--s3); }
.admin-donut-legend__dot { width: 10px; height: 10px; border-radius: var(--r-full); flex-shrink: 0; }
.admin-donut-legend__item span { font-size: .8rem; color: var(--gray-600); flex: 1; }
.admin-donut-legend__item strong { font-size: .85rem; color: var(--dark); }
.admin-bar-chart { display: flex; flex-direction: column; gap: var(--s3); }
.admin-bar-chart__row { display: flex; align-items: center; gap: var(--s3); }
.admin-bar-chart__label { font-size: .75rem; color: var(--gray-600); width: 70px; flex-shrink: 0; }
.admin-bar-chart__track { flex: 1; height: 8px; background: var(--gray-100); border-radius: var(--r-full); overflow: hidden; }
.admin-bar-chart__fill { height: 100%; border-radius: var(--r-full); transition: width var(--t-slow); }
.admin-bar-chart__val { font-size: .75rem; font-weight: 600; color: var(--dark); width: 28px; text-align: right; }
/* Activity feed */
.admin-activity { display: flex; flex-direction: column; gap: 0; list-style: none; }
.admin-activity__item { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--gray-100); }
.admin-activity__item:last-child { border-bottom: none; }
.admin-activity__icon { width: 32px; height: 32px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.admin-activity__icon--green { background: var(--green-100); color: var(--green-600); }
.admin-activity__icon--blue { background: #E3F2FD; color: #1565C0; }
.admin-activity__icon--gold { background: var(--gold-pale); color: #7A5C28; }
.admin-activity__icon--amber { background: #FFF8E1; color: #F57F17; }
.admin-activity__icon--gray { background: var(--gray-100); color: var(--gray-600); }
.admin-activity__body { flex: 1; }
.admin-activity__body p { font-size: .875rem; color: var(--dark); line-height: 1.5; margin-bottom: var(--s1); }
.admin-activity__body time { font-size: .75rem; color: var(--gray-400); }
/* Search box extras */
.search-box__form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: var(--s3); align-items: end; }
@media (max-width: 860px) { .search-box__form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .search-box__form { grid-template-columns: 1fr; } }
.search-box__label { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-600); margin-bottom: var(--s2); }
.search-box__select { width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); font-size: .9rem; font-family: var(--font-body); color: var(--dark); background: var(--white); appearance: none; -webkit-appearance: none; transition: border-color var(--t-fast); }
.search-box__select:focus { outline: none; border-color: var(--green-500); }
.search-box__btn { white-space: nowrap; align-self: end; }
.search-box__tab--active { background: var(--green-500); color: var(--white); }
.search-box__hint { margin-top: var(--s3); font-size: .75rem; color: var(--gray-400); text-align: center; }
.search-box__hint a { color: var(--green-500); font-family: var(--font-mono); }
/* Stats bar extras */
.stats-bar__number { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--white); line-height: 1; display: block; margin-bottom: var(--s1); }
.stats-bar__divider { width: 1px; height: 36px; background: rgba(255,255,255,.1); }
/* ══════════════════════════════════════════════════════════
HERO — Vídeo background
══════════════════════════════════════════════════════════ */
.hero--video { background: var(--green-900); }
.hero__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: .55;
pointer-events: none;
}
/* ── Vimeo background cover ─────────────────────────────── */
.hero__video-wrap {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* Garante cobertura total em qualquer proporção de tela */
width: 100vw;
height: 56.25vw; /* 16:9 — cresce com a largura */
min-height: 100vh;
min-width: 177.78vh; /* 16:9 — cresce com a altura */
opacity: .62;
pointer-events: none;
z-index: 0;
}
.hero__video-iframe,
.hero__video-media {
position: absolute;
inset: 0;
width: 100%; height: 100%;
border: none;
object-fit: cover;
}
.hero--open .hero__video-wrap { opacity: .72; }
/* Botão de som do hero */
.hero__sound-btn {
position: absolute;
bottom: var(--s8);
right: var(--s8);
z-index: 10;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.15);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(255,255,255,.3);
color: var(--white);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hero__sound-btn:hover {
background: rgba(255,255,255,.28);
border-color: rgba(255,255,255,.6);
transform: scale(1.08);
}
.hero__sound-btn--active {
background: rgba(33,114,23,.55);
border-color: var(--green-400);
}
.hero__cta-group {
display: flex; gap: var(--s4); justify-content: center;
flex-wrap: wrap; margin-top: var(--s8);
}
/* Scroll indicator */
.hero__scroll {
position: absolute; bottom: var(--s8); left: 50%; transform: translateX(-50%);
width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 13px;
display: flex; justify-content: center; padding-top: 6px;
}
.hero__scroll span {
display: block; width: 4px; height: 8px; background: rgba(255,255,255,.7);
border-radius: 2px; animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
0% { transform: translateY(0); opacity: 1; }
80% { transform: translateY(16px); opacity: 0; }
100% { transform: translateY(0); opacity: 0; }
}
/* ══════════════════════════════════════════════════════════
CAROUSEL — Imóveis em Destaque
══════════════════════════════════════════════════════════ */
.carousel-controls { display: flex; align-items: center; gap: var(--s3); }
.carousel-btn {
width: 38px; height: 38px; border-radius: var(--r-full);
border: 1.5px solid var(--gray-200); background: var(--white);
display: flex; align-items: center; justify-content: center;
color: var(--dark); cursor: pointer; transition: all var(--t-fast);
}
.carousel-btn:hover { border-color: var(--green-500); color: var(--green-500); background: var(--green-50); }
.carousel { overflow: hidden; position: relative; }
.carousel__track {
display: flex; gap: 24px;
transition: transform 500ms cubic-bezier(.4,0,.2,1);
will-change: transform;
}
.carousel__slide {
flex: 0 0 calc((100% - 48px) / 3);
}
@media (max-width: 1024px) {
.carousel__slide { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
.carousel__slide { flex: 0 0 100%; }
}
/* Dots */
.carousel__dots {
display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s6);
}
.carousel__dot {
width: 8px; height: 8px; border-radius: var(--r-full);
background: var(--gray-200); border: none; cursor: pointer;
transition: all var(--t-fast); padding: 0;
}
.carousel__dot--active { background: var(--green-500); width: 24px; }
/* ══════════════════════════════════════════════════════════
PROP SECTION — layout 2 colunas (sidebar + cards)
══════════════════════════════════════════════════════════ */
.prop-section { background: var(--off-white); padding: var(--s16) 0; }
.prop-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--s8);
align-items: start;
}
/* Grid child — sem min-width:0 o conteúdo pode ultrapassar a track de 1fr */
.prop-content {
min-width: 0;
overflow-x: hidden;
}
/* Sidebar: oculto no desktop, modal no mobile */
@media (min-width: 1025px) {
.prop-sidebar { display: none !important; }
}
/* ── FILTRO HORIZONTAL (desktop) ─────────────────────────── */
.prop-filterbar {
display: flex;
align-items: flex-end;
gap: 0;
background: var(--white);
border: 1.5px solid var(--gray-100);
border-radius: var(--r-xl);
padding: var(--s4) var(--s6);
margin-bottom: var(--s6);
flex-wrap: wrap;
gap: var(--s4);
}
.prop-filterbar__group {
display: flex;
flex-direction: column;
gap: var(--s2);
flex: 1;
min-width: 0;
}
.prop-filterbar__group--code {
flex: 0 0 auto;
min-width: 220px;
}
.prop-filterbar__label {
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--gray-400);
}
.prop-filterbar__sep {
width: 1px;
height: 44px;
background: var(--gray-100);
align-self: center;
flex-shrink: 0;
}
.prop-filterbar__code-row {
display: flex;
gap: var(--s2);
align-items: center;
}
.prop-filterbar__input {
flex: 1;
height: 34px;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-md);
padding: 0 var(--s3);
font-family: var(--font-mono);
font-size: .8rem;
color: var(--dark);
background: var(--white);
outline: none;
transition: border-color var(--t-fast);
}
.prop-filterbar__input:focus { border-color: var(--green-500); }
.prop-filterbar__input::placeholder { color: var(--gray-400); }
/* Mobile: esconde filterbar, mostra apenas o botão filtros (sidebar modal) */
@media (max-width: 1024px) {
.prop-filterbar { display: none; }
}
/* Sidebar */
.prop-sidebar {
background: var(--white); border-radius: var(--r-xl);
border: 1px solid var(--gray-100); padding: var(--s6);
position: sticky; top: 88px;
}
.prop-sidebar__header { margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--gray-100); }
.prop-sidebar__title { font-size: .9rem; font-weight: 700; color: var(--dark); }
.prop-sidebar__group { margin-bottom: var(--s5); }
.prop-sidebar__label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); margin-bottom: var(--s3); }
.prop-sidebar__pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.prop-pill {
padding: var(--s1) var(--s3); border-radius: var(--r-full);
font-size: .75rem; font-weight: 500; color: var(--gray-600);
border: 1.5px solid var(--gray-200); background: none; cursor: pointer;
transition: all var(--t-fast); white-space: nowrap;
}
.prop-pill:hover { border-color: var(--green-400); color: var(--green-500); }
.prop-pill--active { background: var(--green-500); color: var(--white); border-color: var(--green-500); }
.prop-sidebar__stats { display: flex; gap: var(--s4); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--gray-100); }
.prop-sidebar__stat { text-align: center; flex: 1; }
.prop-sidebar__stat strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--green-600); }
.prop-sidebar__stat span { font-size: .65rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; }
/* Topbar content */
.prop-topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--s6); gap: var(--s4); flex-wrap: wrap; }
/* View toggle */
.view-toggle { display: flex; border: 1.5px solid var(--gray-200); border-radius: var(--r-md); overflow: hidden; }
.view-toggle__btn {
display: flex; align-items: center; gap: var(--s2);
padding: var(--s2) var(--s4); font-size: .8rem; font-weight: 600;
color: var(--gray-500); background: none; border: none; cursor: pointer;
transition: all var(--t-fast); border-right: 1.5px solid var(--gray-200);
}
.view-toggle__btn:last-child { border-right: none; }
.view-toggle__btn:hover { background: var(--green-50); color: var(--green-500); }
.view-toggle__btn--active { background: var(--green-500); color: var(--white); }
/* Mobile: apenas ícones, sem texto */
@media (max-width: 768px) {
.view-toggle__btn span { display: none; }
.view-toggle__btn { padding: var(--s2) var(--s3); }
}
/* ── GRADE: 2 colunas, card vertical ── */
.prop-grid-area--grade {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s5);
}
@media (max-width: 680px) { .prop-grid-area--grade { grid-template-columns: 1fr; } }
/* ── LISTA: 1 coluna, card horizontal full-width ── */
.prop-grid-area--lista {
display: flex;
flex-direction: column;
gap: var(--s5);
min-width: 0; /* evita grid blowout */
width: 100%;
}
/* ── PCARD — card unificado (funciona nos 2 modos) ── */
.pcard {
background: var(--white); border-radius: var(--r-xl);
border: 1px solid var(--gray-100); overflow: hidden;
transition: box-shadow var(--t-base), transform var(--t-base);
display: flex; flex-direction: column;
}
.pcard:hover { box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--green-500); transform: translateY(-3px); }
/* Foto — modo grade */
.pcard__photo {
display: block; position: relative; overflow: hidden;
aspect-ratio: 4/3; background: var(--gray-100); flex-shrink: 0;
}
.pcard__photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--t-slow);
}
.pcard:hover .pcard__photo img { transform: scale(1.04); }
/* badges */
.pcard__badge {
position: absolute; z-index: 2; font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px;
border-radius: var(--r-full); top: var(--s3); left: var(--s3);
}
.pcard__badge--exclusive { background: var(--green-500); color: var(--white); }
.pcard__badge--top { background: var(--gold); color: var(--white); top: calc(var(--s3) + 26px); }
.pcard__badge--new { background: var(--dark); color: var(--white); }
/* overlay actions (fav) */
.pcard__overlay-actions { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; }
.pcard__fav {
width: 34px; height: 34px; border-radius: var(--r-full);
background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
color: var(--gray-400); border: none; cursor: pointer;
transition: all var(--t-fast);
}
.pcard__fav:hover { color: #E53E3E; background: var(--white); }
/* Corpo */
.pcard__body {
padding: var(--s5); display: flex; flex-direction: column; flex: 1;
}
.pcard__code { font-family: var(--font-mono); font-size: .65rem; color: var(--gray-400); letter-spacing: .06em; margin-bottom: var(--s2); }
.pcard__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--dark); line-height: 1.3; margin-bottom: var(--s2); }
.pcard__location { display: flex; align-items: center; gap: var(--s1); font-size: .8rem; color: var(--gray-600); margin-bottom: var(--s3); }
.pcard__specs { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .8rem; color: var(--gray-600); padding: var(--s3) 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); margin-bottom: var(--s4); }
.pcard__desc { font-size: .85rem; color: var(--gray-600); line-height: 1.65; margin-bottom: var(--s5); flex: 1; }
.pcard__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-top: auto; }
.pcard__price-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); line-height: 1; margin-bottom: var(--s1); }
.pcard__price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--green-600); line-height: 1; }
.pcard__price-extra { font-size: .7rem; color: var(--gray-400); margin-top: 3px; }
/* ── MODO LISTA: card horizontal — foto 50% + corpo 50% ── */
.prop-grid-area--lista .pcard {
flex-direction: row;
min-height: 300px;
min-width: 0; /* impede overflow do flex item */
max-width: 100%; /* nunca ultrapassa o container */
width: 100%;
}
/* Foto ocupa metade exata do card — com limite explícito */
.prop-grid-area--lista .pcard__photo {
width: 50%;
max-width: 50%; /* garante que a imagem não ultrapassa metade */
min-height: 300px;
aspect-ratio: unset;
flex-shrink: 0;
overflow: hidden; /* clipa a imagem dentro do limite */
}
/* Zoom suave no hover somente na foto lista */
.prop-grid-area--lista .pcard:hover .pcard__photo img {
transform: scale(1.05);
}
/* Corpo — metade direita, layout em coluna com conteúdo bem distribuído */
.prop-grid-area--lista .pcard__body {
flex: 1;
min-width: 0; /* evita que o texto empurre o card para fora */
overflow: hidden;
padding: var(--s6) var(--s8);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0;
}
/* Grupo superior: código + título + localização */
.prop-grid-area--lista .pcard__code {
font-size: .65rem;
margin-bottom: var(--s2);
}
.prop-grid-area--lista .pcard__title {
font-size: 1.35rem;
line-height: 1.25;
margin-bottom: var(--s2);
}
.prop-grid-area--lista .pcard__location {
margin-bottom: var(--s4);
}
/* Specs como pills compactos */
.prop-grid-area--lista .pcard__specs {
gap: var(--s2);
margin-bottom: var(--s4);
}
.prop-grid-area--lista .pcard__specs span {
background: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: var(--r-full);
padding: 3px 10px;
font-size: .75rem;
white-space: nowrap;
}
/* Descrição */
.prop-grid-area--lista .pcard__desc {
display: block;
font-size: .83rem;
line-height: 1.65;
flex: 1;
margin-bottom: var(--s5);
}
/* Preço maior e mais prominente */
.prop-grid-area--lista .pcard__price {
font-size: 1.55rem;
}
/* Mobile ≤ 768px: empilha verticalmente */
@media (max-width: 768px) {
.prop-grid-area--lista .pcard {
flex-direction: column;
min-height: unset;
}
.prop-grid-area--lista .pcard__photo {
width: 100%;
max-width: 100%; /* anula o max-width:50% do modo desktop */
min-height: 220px; /* altura mínima visível */
aspect-ratio: 16/9;
flex-shrink: 0;
}
.prop-grid-area--lista .pcard__body {
padding: var(--s5);
}
.prop-grid-area--lista .pcard__title { font-size: 1.15rem; }
.prop-grid-area--lista .pcard__price { font-size: 1.3rem; }
}
/* Oculta descrição no modo grade em telas menores */
.prop-grid-area--grade .pcard__desc { display: none; }
@media (min-width: 1200px) { .prop-grid-area--grade .pcard__desc { display: block; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } }
/* Paginação */
.prop-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--gray-100); flex-wrap: wrap; gap: var(--s4); }
.prop-pagination__info { font-size: .875rem; color: var(--gray-600); }
/* ── HERO: caixa verde só no bloco de texto ── */
.hero__text-box {
display: inline-flex; flex-direction: column; align-items: center;
background: rgba(13, 61, 13, 0.82);
backdrop-filter: blur(6px);
border-radius: var(--r-xl);
padding: var(--s10) var(--s12);
max-width: 680px;
}
/* Hero aberto — vídeo visível, overlay apenas embaixo */
.hero--open .hero__video { opacity: .85; }
.hero__overlay--subtle {
position: absolute; inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.08) 60%,
rgba(13,61,13,.55) 100%
);
}
/* Remove o overlay antigo quando --open está presente */
.hero--open .hero__overlay:not(.hero__overlay--subtle) { display: none; }
/* Hero content centralizado sem fundo próprio */
.hero--open .hero__content {
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Text box: caixa verde translúcida com blur */
.hero__text-box {
text-align: center;
background: rgba(13, 61, 13, 0.80);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--r-xl);
padding: var(--s10) var(--s12);
max-width: 680px;
border: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 640px) {
.hero__text-box { padding: var(--s8) var(--s6); }
}
/* ── Sidebar oculta no mobile — botão filtros ── */
.prop-filter-btn {
display: none;
align-items: center; gap: var(--s2);
min-height: 44px;
padding: var(--s3) var(--s5); border-radius: var(--r-full);
border: 1.5px solid var(--gray-200); background: var(--white);
font-size: .875rem; font-weight: 600; color: var(--dark);
cursor: pointer; transition: all var(--t-fast);
}
.prop-filter-btn:hover { border-color: var(--green-500); color: var(--green-500); }
@media (max-width: 1024px) {
.prop-sidebar { display: none; position: fixed; inset: 0; z-index: 200; overflow-y: auto; border-radius: 0; top: 0; width: 300px; box-shadow: var(--shadow-xl); }
.prop-sidebar--open { display: block; }
.prop-sidebar__close { display: flex; }
.prop-filter-btn { display: flex; }
.prop-layout { grid-template-columns: 1fr; }
}
.prop-sidebar__close {
display: none; align-items: center; justify-content: space-between;
margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--gray-100);
}
.prop-sidebar__close-btn {
background: none; border: none; cursor: pointer; color: var(--gray-600);
display: flex; align-items: center; gap: var(--s2); font-size: .875rem; font-weight: 600;
}
.prop-sidebar-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199;
}
.prop-sidebar-backdrop--open { display: block; }
/* ── Hero: caixa verde só no texto, botões flutuam ── */
.hero__text-box {
padding: var(--s8) var(--s10);
margin-bottom: var(--s8);
}
.hero__cta-group {
/* sombra para legibilidade sobre o vídeo */
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.hero__cta-group .btn {
text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
@media (max-width: 640px) {
.hero__text-box { padding: var(--s6) var(--s6); }
}
/* ── hero__text-box — VERSÃO FINAL (sobrescreve anteriores) ── */
.hero__text-box {
display: inline-flex;
flex-direction: column;
align-items: center;
text-align: center;
background: rgba(13, 61, 13, 0.80);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--r-xl);
border: 1px solid rgba(255,255,255,.08);
max-width: 820px;
width: 90%;
padding: var(--s5) var(--s12);
margin-bottom: var(--s6);
}
/* Remove margem inferior do último elemento dentro da caixa — padding fica simétrico */
.hero__text-box > *:last-child { margin-bottom: 0; }
/* Subtitle: sem negrito, uma linha */
.hero__text-box .hero__subtitle {
font-weight: 300;
font-size: 0.9375rem;
white-space: nowrap;
margin-bottom: 0;
}
@media (max-width: 900px) {
.hero__text-box .hero__subtitle {
white-space: normal;
font-size: .9rem;
}
}
@media (max-width: 768px) {
.hero__text-box {
width: 95%;
padding: var(--s5) var(--s6);
}
}
/* Landscape mobile — garante hero visível sem scroll */
@media (max-height: 500px) and (orientation: landscape) {
.hero { min-height: 100svh; padding-top: 56px; }
}
/* ═══════════════════════════════════════════
INSTAGRAM — Feed section
═══════════════════════════════════════════ */
/* Header com ícone do Instagram */
.insta-header {
display: flex;
align-items: center;
gap: var(--s4);
}
.insta-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
}
.insta-follow-btn {
display: inline-flex;
align-items: center;
gap: var(--s2);
white-space: nowrap;
}
/* Feed — scroll horizontal igual ao vitrine */
.insta-feed {
display: flex;
gap: var(--s4);
overflow-x: auto;
padding-bottom: var(--s3);
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.insta-feed::-webkit-scrollbar { display: none; }
/* Card quadrado — estilo post Instagram */
.insta-post {
position: relative;
flex: 0 0 280px;
aspect-ratio: 1 / 1;
border-radius: var(--r-lg);
overflow: hidden;
scroll-snap-align: start;
display: block;
text-decoration: none;
background: var(--gray-200);
}
.insta-post img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.insta-post:hover img { transform: scale(1.06); }
/* Overlay aparece no hover */
.insta-post__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.52);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--s4);
opacity: 0;
transition: opacity .3s ease;
}
.insta-post:hover .insta-post__overlay { opacity: 1; }
.insta-post__tag {
font-size: .8rem;
font-weight: 600;
color: var(--white);
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: var(--s2);
}
.insta-post__meta {
display: flex;
gap: var(--s4);
color: rgba(255,255,255,.9);
font-size: .875rem;
font-weight: 500;
}
.insta-post__meta span {
display: flex;
align-items: center;
gap: var(--s1);
}
/* Card CTA — "Ver todos" */
.insta-post--cta {
background: linear-gradient(135deg, #1a0a00 0%, #3a1020 50%, #1a0030 100%);
cursor: pointer;
}
.insta-post--cta:hover img { transform: none; }
.insta-post__cta-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s3);
color: var(--white);
text-align: center;
}
.insta-post__cta-inner p {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
color: var(--white);
}
.insta-post__cta-handle {
font-size: .8rem;
color: rgba(255,255,255,.6);
letter-spacing: .05em;
}
/* Mobile: cards menores */
@media (max-width: 768px) {
.insta-post { flex: 0 0 200px; }
.insta-post__overlay { opacity: 1; background: rgba(0,0,0,.35); }
}
/* ═══════════════════════════════════════════
ADMIN — Mobile responsivo
═══════════════════════════════════════════ */
/* Backdrop da sidebar */
.admin-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 109;
}
.admin-sidebar-backdrop--open { display: block; }
@media (max-width: 900px) {
/* Layout: empilhado verticalmente */
.admin-body { overflow: auto; }
.admin-layout { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
/* Sidebar: sai pela esquerda, volta como drawer */
.admin-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 260px;
z-index: 110;
transform: translateX(-260px);
transition: transform .3s ease;
overflow-y: auto;
height: 100%;
}
.admin-sidebar--open { transform: translateX(0); }
/* Main: ocupa 100% da largura */
.admin-main { width: 100%; overflow: visible; height: auto; }
/* Toggle: aparece no mobile */
.admin-sidebar-toggle { display: flex; }
/* Topbar: compacta no mobile */
.admin-topbar { padding: var(--s3) var(--s4); position: sticky; top: 0; z-index: 100; }
.admin-search { display: none; } /* oculta busca — libera espaço */
.admin-topbar__user span { display: none; } /* oculta nome — mantém avatar */
.admin-topbar__right { gap: var(--s3); }
/* Content: padding reduzido */
.admin-content { padding: var(--s4); overflow: visible; }
/* KPIs: 2 colunas no mobile */
.admin-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.admin-kpi { padding: var(--s4); gap: var(--s3); }
.admin-kpi__icon { width: 38px; height: 38px; }
.admin-kpi__value { font-size: 1.4rem; }
/* Grids de 2 colunas: 1 coluna no mobile */
.admin-grid-2 { grid-template-columns: 1fr; }
/* Tabela: scroll horizontal contido */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Tráfego: grids de 2 colunas viram 1 coluna */
#page-trafego > div[style*="grid-template-columns:1fr 1fr"],
#page-trafego > div:last-child { grid-template-columns: 1fr !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
ADMIN — BADGES E TAGS
══════════════════════════════════════════════════════════════════════════ */
.admin-badge {
display: inline-flex; align-items: center; font-size: .65rem; font-weight: 700;
padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap;
}
.admin-badge--success { background: var(--green-50); color: var(--green-700); }
.admin-badge--warning { background: #fff8e1; color: #f57f17; }
.admin-badge--info { background: #e8f0fe; color: #1558b0; }
.admin-badge--gold { background: #fdf3dc; color: #8a6020; }
.admin-tag { display: inline-flex; align-items: center; font-size: .63rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); }
.admin-tag--google { background: #e8f0fe; color: #1558b0; }
.admin-tag--meta { background: #fce4ec; color: #880e4f; }
.admin-tag--organic { background: var(--green-50); color: var(--green-700); }
/* ══════════════════════════════════════════════════════════════════════════
ADMIN — TRÁFEGO: TOGGLE SWITCH
══════════════════════════════════════════════════════════════════════════ */
.trafego-toggle { display: inline-flex; cursor: pointer; flex-shrink: 0; }
.trafego-toggle input { display: none; }
.trafego-toggle span {
display: block; width: 40px; height: 22px; border-radius: 11px;
background: var(--gray-300); transition: background .2s; position: relative;
}
.trafego-toggle span::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%; background: var(--white);
transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.trafego-toggle input:checked + span { background: var(--green-500); }
.trafego-toggle input:checked + span::after { transform: translateX(18px); }
/* ══════════════════════════════════════════════════════════════════════════
ADMIN — TRÁFEGO: REGRAS
══════════════════════════════════════════════════════════════════════════ */
.trafego-rules { display: flex; flex-direction: column; }
.trafego-rule {
display: flex; align-items: flex-start; gap: var(--s4);
padding: var(--s4) 0; border-bottom: 1px solid var(--gray-100);
}
.trafego-rule:last-child { border-bottom: none; }
.trafego-rule__icon {
width: 36px; height: 36px; border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trafego-rule__body { flex: 1; min-width: 0; }
.trafego-rule__title { font-weight: 600; font-size: .875rem; color: var(--dark); margin-bottom: var(--s1); }
.trafego-rule__desc { font-size: .8rem; color: var(--gray-600); line-height: 1.6; }
/* ══════════════════════════════════════════════════════════════════════════
ADMIN — PAGE HEADER
══════════════════════════════════════════════════════════════════════════ */
.admin-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════════════════
ADMIN — CENTRAL DE LINKS: LINK-CARD
══════════════════════════════════════════════════════════════════════════ */
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--s5);
}
.link-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
padding: var(--s5);
display: flex;
flex-direction: column;
gap: var(--s4);
transition: box-shadow .2s, border-color .2s;
}
.link-card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,.08);
border-color: var(--green-200);
}
.link-card--highlight {
border-color: var(--green-300);
background: linear-gradient(135deg, #f0faf0 0%, #fff 60%);
}
.link-card__top {
display: flex;
align-items: flex-start;
gap: var(--s4);
}
.link-card__icon {
width: 44px; height: 44px;
border-radius: var(--r-lg);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.link-card__body { flex: 1; min-width: 0; }
.link-card__label {
font-weight: 700;
font-size: .95rem;
color: var(--dark);
margin: 0 0 var(--s1);
}
.link-card__badge {
display: inline-flex; align-items: center;
font-size: .62rem; font-weight: 700; padding: 2px 8px;
border-radius: var(--r-full); background: var(--green-50); color: var(--green-700);
margin-left: var(--s2);
}
.link-card__desc {
font-size: .8rem;
color: var(--gray-600);
line-height: 1.6;
margin: 0;
}
.link-card__url {
display: flex;
align-items: center;
gap: var(--s2);
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--r-md);
padding: var(--s2) var(--s3);
font-size: .75rem;
color: var(--gray-600);
overflow: hidden;
}
.link-card__url span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-card__url button {
background: none; border: none; cursor: pointer;
color: var(--gray-500); padding: 2px; flex-shrink: 0;
transition: color .2s;
}
.link-card__url button:hover { color: var(--green-600); }
.link-card__actions {
display: flex;
align-items: center;
gap: var(--s3);
flex-wrap: wrap;
}
/* Info box de uso */
.link-info-box {
background: var(--green-50);
border: 1px solid var(--green-200);
border-radius: var(--r-lg);
padding: var(--s4) var(--s5);
display: flex;
gap: var(--s4);
align-items: flex-start;
}
.link-info-box svg { flex-shrink: 0; margin-top: 2px; }
.link-info-box p { font-size: .82rem; color: var(--green-800); line-height: 1.7; margin: 0; }
/* ══════════════════════════════════════════════════════════════════════════
FORMULÁRIOS PÚBLICOS (form-*.html)
══════════════════════════════════════════════════════════════════════════ */
.form-page {
min-height: 100vh;
background: var(--gray-50);
display: flex;
flex-direction: column;
}
.form-page__header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: var(--s4) var(--s6);
display: flex;
align-items: center;
gap: var(--s4);
}
.form-page__header-brand {
display: flex; align-items: center; gap: var(--s3);
text-decoration: none; color: inherit;
}
.form-page__header img { height: 40px; width: auto; }
.form-page__header-name {
font-family: var(--font-display);
font-size: .95rem; font-weight: 600; color: var(--dark);
line-height: 1.2;
}
.form-page__header-name span { font-weight: 300; }
.form-page__body {
flex: 1;
padding: var(--s8) var(--s6);
max-width: 720px;
width: 100%;
margin: 0 auto;
}
.form-page__title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--dark);
margin: 0 0 var(--s2);
}
.form-page__subtitle {
font-size: .9rem;
color: var(--gray-600);
margin: 0 0 var(--s7);
line-height: 1.6;
}
.form-page__card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
padding: var(--s7);
margin-bottom: var(--s5);
}
.form-page__card-title {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--green-700);
margin: 0 0 var(--s5);
display: flex; align-items: center; gap: var(--s2);
}
.form-page__card-title::after {
content: ''; flex: 1; height: 1px; background: var(--gray-200);
}
.form-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
}
.form-page__upload {
border: 2px dashed var(--gray-300);
border-radius: var(--r-lg);
padding: var(--s6);
text-align: center;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.form-page__upload:hover {
border-color: var(--green-400);
background: var(--green-50);
}
.form-page__upload p { font-size: .82rem; color: var(--gray-500); margin: var(--s2) 0 0; }
.form-page__upload input { display: none; }
.form-page__divider {
border: none;
border-top: 1px solid var(--gray-200);
margin: var(--s6) 0;
}
.form-page__footer {
padding: var(--s5) var(--s6);
border-top: 1px solid var(--gray-200);
background: var(--white);
text-align: center;
font-size: .78rem;
color: var(--gray-500);
}
/* Assinatura digital */
.sign-box {
border: 1px solid var(--gray-200);
border-radius: var(--r-lg);
overflow: hidden;
}
.sign-box__pad {
background: #fafafa;
height: 120px;
display: flex; align-items: center; justify-content: center;
color: var(--gray-400); font-size: .82rem;
cursor: crosshair;
}
.sign-box__actions {
display: flex; align-items: center; gap: var(--s3);
padding: var(--s3) var(--s4);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
}
/* Status do formulário */
.form-status {
display: flex; flex-direction: column; align-items: center;
gap: var(--s4); padding: var(--s10) var(--s6); text-align: center;
}
.form-status__icon {
width: 72px; height: 72px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.form-status__icon--success { background: var(--green-50); color: var(--green-600); }
.form-status__title { font-size: 1.4rem; font-weight: 700; color: var(--dark); }
.form-status__desc { font-size: .9rem; color: var(--gray-600); line-height: 1.7; max-width: 480px; }
@media (max-width: 600px) {
.form-page__body { padding: var(--s6) var(--s4); }
.form-page__card { padding: var(--s5); }
.form-cols-2 { grid-template-columns: 1fr; }
.links-grid { grid-template-columns: 1fr; }
}
/* ============================================================
MAPA DE IMÓVEIS — Leaflet + Sidebar (Airbnb style)
============================================================ */
/* ── Layout full-viewport ─────────────────────────────────── */
body.map-page {
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── Filter bar (topo) ────────────────────────────────────── */
.map-filter-bar {
height: 60px;
flex-shrink: 0;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
gap: var(--s3);
padding: 0 var(--s6);
z-index: 1000;
}
.map-filter-bar__back {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) var(--s4);
border: 1px solid var(--gray-200);
border-radius: var(--r-full);
font-size: .82rem;
font-weight: 500;
color: var(--gray-700);
white-space: nowrap;
flex-shrink: 0;
transition: border-color var(--t-fast), color var(--t-fast);
}
.map-filter-bar__back:hover {
border-color: var(--green-500);
color: var(--green-500);
}
.map-filter-bar__logo {
display: flex;
align-items: center;
gap: var(--s3);
flex-shrink: 0;
color: var(--dark);
}
.map-filter-bar__logo img {
height: 30px;
width: auto;
}
.map-filter-bar__logo-text {
font-size: .82rem;
line-height: 1.3;
white-space: nowrap;
}
.map-filter-bar__divider {
width: 1px;
height: 24px;
background: var(--gray-200);
flex-shrink: 0;
}
.map-filter-bar__filters {
display: flex;
align-items: center;
gap: var(--s2);
flex: 1;
}
.map-filter-bar__filters select {
border: 1px solid var(--gray-200);
border-radius: var(--r-full);
padding: 6px var(--s4);
font-size: .80rem;
font-family: var(--font-body);
color: var(--dark);
background: var(--white);
cursor: pointer;
outline: none;
transition: border-color var(--t-fast);
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239C9C9C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 28px;
}
.map-filter-bar__filters select:hover,
.map-filter-bar__filters select:focus {
border-color: var(--green-500);
}
.map-filter-bar__count {
font-size: .78rem;
font-weight: 600;
color: var(--gray-600);
white-space: nowrap;
flex-shrink: 0;
background: var(--gray-100);
padding: 4px var(--s3);
border-radius: var(--r-full);
}
/* ── Main layout ──────────────────────────────────────────── */
.map-layout {
flex: 1;
display: flex;
overflow: hidden;
min-height: 0;
}
/* ── Sidebar ──────────────────────────────────────────────── */
.map-sidebar {
width: 340px;
min-width: 340px;
flex-shrink: 0;
background: var(--white);
border-right: 1px solid var(--gray-200);
display: flex;
flex-direction: column;
overflow: hidden;
}
.map-sidebar__header {
padding: var(--s4) var(--s5) var(--s3);
border-bottom: 1px solid var(--gray-100);
flex-shrink: 0;
}
.map-sidebar__count {
font-size: .82rem;
color: var(--gray-600);
font-weight: 500;
}
.map-sidebar__list {
flex: 1;
overflow-y: auto;
padding: var(--s3) var(--s3);
}
.map-sidebar__list::-webkit-scrollbar { width: 4px; }
.map-sidebar__list::-webkit-scrollbar-track { background: transparent; }
.map-sidebar__list::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
/* ── Mini-card ────────────────────────────────────────────── */
.map-pcard-mini {
display: flex;
gap: var(--s3);
padding: var(--s3);
border-radius: var(--r-md);
cursor: pointer;
border: 1px solid transparent;
transition: background var(--t-fast), border-color var(--t-fast);
margin-bottom: var(--s2);
}
.map-pcard-mini:hover,
.map-pcard-mini--active {
background: var(--green-50);
border-color: var(--green-100);
}
.map-pcard-mini__photo {
width: 80px;
height: 70px;
flex-shrink: 0;
border-radius: var(--r-sm);
overflow: hidden;
}
.map-pcard-mini__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.map-pcard-mini__info { flex: 1; min-width: 0; }
.map-pcard-mini__code {
font-size: .65rem;
color: var(--gray-400);
font-family: var(--font-mono);
margin-bottom: 2px;
}
.map-pcard-mini__title {
font-size: .82rem;
font-weight: 600;
color: var(--dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.map-pcard-mini__bairro {
font-size: .72rem;
color: var(--gray-600);
margin-bottom: var(--s2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.map-pcard-mini__preco {
font-size: .88rem;
font-weight: 700;
color: var(--green-500);
}
/* ── Map wrapper & container ──────────────────────────────── */
.map-wrapper {
flex: 1;
position: relative;
min-width: 0;
min-height: 0;
}
/* Leaflet exige dimensão explícita — absolute fill é o mais confiável */
.map-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ── Price pill marker ────────────────────────────────────── */
.map-price-marker {
display: inline-block;
background: var(--green-500);
color: var(--white);
border: 2px solid var(--white);
border-radius: var(--r-full);
padding: 5px 11px;
font-size: .70rem;
font-weight: 700;
font-family: var(--font-body);
white-space: nowrap;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.28);
transform: translate(-50%, -100%) translateY(-6px);
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
user-select: none;
}
.map-price-marker::after {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--white);
}
.map-price-marker {
position: relative;
}
.map-price-marker:hover,
.map-price-marker--hover {
background: var(--dark);
transform: translate(-50%, -100%) translateY(-6px) scale(1.08);
box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.map-price-marker--selected {
background: var(--gold) !important;
border-color: var(--white) !important;
transform: translate(-50%, -100%) translateY(-6px) scale(1.12) !important;
box-shadow: 0 4px 16px rgba(184,150,90,.5) !important;
}
/* ── POI marker ───────────────────────────────────────────── */
.map-poi-marker {
font-size: 1.3rem;
line-height: 1;
cursor: default;
transform: translate(-50%, -50%);
display: block;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
transition: transform .15s ease;
}
.map-poi-marker:hover {
transform: translate(-50%, -50%) scale(1.25);
}
/* ── POI toggle button ────────────────────────────────────── */
.map-poi-toggle {
position: absolute;
bottom: var(--s5);
right: var(--s5);
z-index: 500;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-full);
padding: 7px var(--s4);
font-size: .78rem;
font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: var(--s2);
color: var(--gray-700);
transition: all var(--t-fast);
}
.map-poi-toggle:hover {
border-color: var(--green-500);
color: var(--green-500);
}
.map-poi-toggle--active {
background: var(--green-500);
border-color: var(--green-500);
color: var(--white);
}
.map-poi-toggle--active:hover {
background: var(--green-700);
border-color: var(--green-700);
color: var(--white);
}
/* ── Popup ────────────────────────────────────────────────── */
.map-popup { min-width: 240px; }
.map-popup__photo {
width: 100%;
height: 148px;
object-fit: cover;
display: block;
}
.map-popup__body { padding: var(--s3) var(--s4) var(--s4); }
.map-popup__code {
font-size: .65rem;
color: var(--gray-400);
font-family: var(--font-mono);
margin-bottom: 3px;
}
.map-popup__title {
font-size: .9rem;
font-weight: 700;
color: var(--dark);
margin-bottom: var(--s2);
line-height: 1.3;
}
.map-popup__specs {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s3);
font-size: .73rem;
color: var(--gray-600);
margin-bottom: var(--s2);
}
.map-popup__preco {
font-size: 1.1rem;
font-weight: 700;
color: var(--green-500);
margin-bottom: var(--s3);
}
.map-popup__actions { display: flex; }
.map-popup__btn {
flex: 1;
padding: var(--s2) var(--s3);
background: var(--green-500);
color: var(--white);
border-radius: var(--r-md);
font-size: .80rem;
font-weight: 600;
font-family: var(--font-body);
text-align: center;
display: block;
transition: background var(--t-fast);
}
.map-popup__btn:hover {
background: var(--green-700);
color: var(--white);
}
/* Leaflet popup overrides */
.leaflet-popup-content-wrapper {
padding: 0 !important;
border-radius: var(--r-lg) !important;
overflow: hidden !important;
box-shadow: var(--shadow-xl) !important;
border: none !important;
}
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip-container { display: none !important; }
.leaflet-popup-close-button {
top: 7px !important;
right: 7px !important;
width: 22px !important;
height: 22px !important;
background: rgba(0,0,0,.45) !important;
border-radius: 50% !important;
color: white !important;
font-size: 15px !important;
line-height: 22px !important;
text-align: center !important;
z-index: 10 !important;
padding: 0 !important;
}
.leaflet-control-zoom {
border: none !important;
box-shadow: var(--shadow-md) !important;
border-radius: var(--r-md) !important;
overflow: hidden;
}
.leaflet-control-zoom a {
font-size: 16px !important;
width: 34px !important;
height: 34px !important;
line-height: 34px !important;
color: var(--dark) !important;
}
/* ── Mobile: toggle button ────────────────────────────────── */
.map-mobile-toggle {
display: none;
position: fixed;
bottom: var(--s6);
left: 50%;
transform: translateX(-50%);
z-index: 600;
background: var(--dark);
color: var(--white);
border: none;
border-radius: var(--r-full);
padding: var(--s3) var(--s6);
font-size: .82rem;
font-weight: 600;
font-family: var(--font-body);
box-shadow: var(--shadow-lg);
cursor: pointer;
white-space: nowrap;
}
/* ── Mobile: bottom sheet ─────────────────────────────────── */
.map-bottom-sheet {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 700;
background: var(--white);
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: 0 -6px 32px rgba(0,0,0,.14);
max-height: 72vh;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
flex-direction: column;
}
.map-bottom-sheet--open {
transform: translateY(0);
}
.map-bottom-sheet__handle {
width: 40px; height: 4px;
background: var(--gray-200);
border-radius: 2px;
margin: var(--s3) auto var(--s2);
flex-shrink: 0;
}
.map-bottom-sheet__filters {
display: flex;
gap: var(--s2);
padding: 0 var(--s4) var(--s3);
flex-shrink: 0;
border-bottom: 1px solid var(--gray-100);
}
.map-bottom-sheet__filters select {
flex: 1;
border: 1px solid var(--gray-200);
border-radius: var(--r-md);
padding: 7px var(--s3);
font-size: .80rem;
font-family: var(--font-body);
color: var(--dark);
background: var(--white);
outline: none;
-webkit-appearance: none;
appearance: none;
}
.map-bottom-sheet__content {
overflow-y: auto;
padding: var(--s2) var(--s4) var(--s12);
flex: 1;
}
/* ── Section view-toggle: map link button ─────────────────── */
a.view-toggle__btn {
display: flex;
align-items: center;
gap: var(--s2);
text-decoration: none;
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
.map-filter-bar {
padding: 0 var(--s4);
height: 52px;
gap: var(--s2);
}
.map-filter-bar__filters,
.map-filter-bar__divider--hide-sm,
.map-filter-bar__logo-text,
.map-filter-bar__count {
display: none;
}
.map-filter-bar__logo img { height: 26px; }
.map-sidebar { display: none; }
.map-mobile-toggle { display: block; }
.map-bottom-sheet { display: flex; }
}
/* ============================================================
HERO SEARCH — barra de busca rápida + quick cards
============================================================ */
.hero-search {
background: var(--white);
padding: var(--s6) 0 var(--s5);
}
/* ── Layout externo: filtros + stats ──────────────────────── */
.hero-search__layout {
display: flex;
gap: var(--s4);
align-items: stretch;
}
/* ── Barra única em linha ─────────────────────────────────── */
.hero-search__bar {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
min-width: 0;
}
.hero-search__group {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
padding: var(--s3) var(--s4);
min-width: 0;
}
.hero-search__group--code { flex: 1.4; }
.hero-search__label {
font-size: .58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray-500);
white-space: nowrap;
}
/* Pills finalidade */
.hero-search__pills { display: flex; gap: 4px; flex-wrap: wrap; }
.hero-search__pill {
padding: 4px 10px;
border-radius: var(--r-full);
font-size: .72rem;
font-weight: 500;
color: var(--gray-700);
background: var(--gray-100);
border: 1.5px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: all var(--t-fast);
}
.hero-search__pill:hover {
background: var(--green-50);
color: var(--green-500);
border-color: var(--green-300);
}
.hero-search__pill--active {
background: var(--green-500);
color: var(--white);
border-color: var(--green-500);
}
.hero-search__pill--active:hover {
background: var(--green-700);
border-color: var(--green-700);
color: var(--white);
}
/* Selects */
.hero-search__select {
border: 1px solid var(--gray-200);
border-radius: var(--r-sm);
padding: 5px 24px 5px var(--s3);
font-size: .8rem;
font-family: var(--font-body);
color: var(--dark);
background: var(--white);
cursor: pointer;
outline: none;
transition: border-color var(--t-fast);
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239C9C9C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 7px center;
width: 100%;
}
.hero-search__select:hover,
.hero-search__select:focus { border-color: var(--green-500); }
/* Separador vertical entre grupos */
.hero-search__sep {
width: 1px;
background: var(--gray-200);
align-self: stretch;
flex-shrink: 0;
margin: var(--s2) 0;
}
/* Input código + botão buscar */
.hero-search__code-row { display: flex; gap: var(--s2); flex: 1; }
.hero-search__input {
flex: 1;
border: 1px solid var(--gray-200);
border-radius: var(--r-sm);
padding: 6px var(--s3);
font-size: .78rem;
font-family: var(--font-mono);
color: var(--dark);
outline: none;
background: var(--white);
transition: border-color var(--t-fast);
}
.hero-search__input:focus { border-color: var(--green-500); }
.hero-search__input::placeholder { color: var(--gray-400); }
.hero-search__btn {
padding: 6px var(--s5);
background: var(--green-500);
color: var(--white);
border: none;
border-radius: var(--r-sm);
font-size: .78rem;
font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
white-space: nowrap;
transition: background var(--t-fast);
}
.hero-search__btn:hover { background: var(--green-700); }
/* ── Painel de stats — bloco separado à direita ───────────── */
.hero-search__stats-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
background: var(--green-900);
border-radius: var(--r-xl);
padding: var(--s5) var(--s7);
min-width: 164px;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.hero-search__stats-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: var(--s3) 0;
width: 100%;
text-align: center;
}
.hero-search__stats-item strong {
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.hero-search__stats-item span {
font-size: .62rem;
color: rgba(255,255,255,.55);
text-transform: uppercase;
letter-spacing: .08em;
}
.hero-search__stats-divider {
width: 100%;
height: 1px;
background: rgba(255,255,255,.12);
flex-shrink: 0;
}
/* ── Quick cards row ──────────────────────────────────────── */
.hero-quick-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s5);
margin-top: var(--s5);
}
.hero-quick-card {
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--gray-200);
background: var(--white);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t-base), transform var(--t-base);
text-decoration: none;
color: inherit;
}
.hero-quick-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.hero-quick-card__photo {
position: relative;
height: 200px;
overflow: hidden;
display: block;
}
.hero-quick-card__photo img,
.hero-quick-card__map-bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.hero-quick-card:hover .hero-quick-card__photo img { transform: scale(1.04); }
/* ── Galeria slideshow no card destaque ──────────────────── */
.hqc-gallery {
cursor: default;
}
.hqc-gallery__slides {
position: absolute;
inset: 0;
}
.hqc-gallery__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .55s ease;
}
.hqc-gallery__slide--active { opacity: 1; }
.hqc-gallery__slide img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Setas */
.hqc-gallery__arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 4;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(0,0,0,.45);
backdrop-filter: blur(6px);
border: none; cursor: pointer;
color: var(--white);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity var(--t-fast), background var(--t-fast);
}
.hqc-gallery:hover .hqc-gallery__arrow { opacity: 1; }
.hqc-gallery__arrow:hover { background: rgba(0,0,0,.7); }
.hqc-gallery__arrow--prev { left: var(--s3); }
.hqc-gallery__arrow--next { right: var(--s3); }
/* Dots */
.hqc-gallery__dots {
position: absolute;
bottom: var(--s3);
left: 50%; transform: translateX(-50%);
display: flex; gap: 5px;
z-index: 4;
}
.hqc-gallery__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.45);
border: none; cursor: pointer;
padding: 0;
transition: background var(--t-fast), transform var(--t-fast);
}
.hqc-gallery__dot--active {
background: var(--white);
transform: scale(1.3);
}
/* Contador */
.hqc-gallery__counter {
position: absolute;
top: var(--s3); right: var(--s3);
z-index: 4;
font-size: .65rem; font-weight: 600;
color: var(--white);
background: rgba(0,0,0,.45);
backdrop-filter: blur(6px);
padding: 3px 8px;
border-radius: var(--r-full);
letter-spacing: .04em;
}
.hero-quick-card__body {
padding: var(--s4) var(--s5) var(--s5);
flex: 1;
display: flex;
flex-direction: column;
}
.hero-quick-card__code {
font-size: .66rem;
color: var(--gray-400);
font-family: var(--font-mono);
margin-bottom: 3px;
}
.hero-quick-card__title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--dark);
margin-bottom: var(--s2);
line-height: 1.3;
}
.hero-quick-card__loc {
display: flex;
align-items: center;
gap: 4px;
font-size: .78rem;
color: var(--gray-600);
margin-bottom: var(--s3);
}
.hero-quick-card__specs {
display: flex;
gap: var(--s3);
font-size: .78rem;
color: var(--gray-700);
margin-bottom: var(--s3);
flex-wrap: wrap;
}
.hero-quick-card__desc {
font-size: .82rem;
color: var(--gray-600);
line-height: 1.65;
flex: 1;
margin-bottom: var(--s4);
}
.hero-quick-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
margin-top: auto;
}
.hero-quick-card__price {
font-size: 1.15rem;
font-weight: 700;
color: var(--green-500);
}
/* ── Map card ─────────────────────────────────────────────── */
.hero-quick-card--map { cursor: pointer; }
.hero-quick-card__map-bg {
position: relative;
height: 200px;
overflow: hidden;
}
.hero-quick-card--map:hover .hero-quick-card__map-bg img { transform: scale(1.04); }
.hero-quick-card__map-overlay {
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(30,110,30,.3) 100%);
}
.hero-map-pill {
position: absolute;
background: var(--green-500);
color: var(--white);
border: 2px solid var(--white);
border-radius: var(--r-full);
padding: 4px 9px;
font-size: .66rem;
font-weight: 700;
font-family: var(--font-body);
box-shadow: 0 2px 8px rgba(0,0,0,.28);
pointer-events: none;
transform: translate(-50%, -100%) translateY(-4px);
}
.hero-map-pill--gold { background: var(--gold); }
.hero-map-pill--dark { background: var(--dark); }
.hero-map-poi {
position: absolute;
font-size: 1.1rem;
transform: translate(-50%, -50%);
filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
pointer-events: none;
}
.hero-quick-card__map-info {
padding: var(--s4) var(--s5) var(--s5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
flex: 1;
}
.hero-quick-card__map-eyebrow {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--green-500);
margin-bottom: 3px;
}
.hero-quick-card__map-title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 3px;
line-height: 1.3;
}
.hero-quick-card__map-desc {
font-size: .78rem;
color: var(--gray-600);
}
.hero-quick-card__map-cta {
display: inline-flex;
align-items: center;
padding: var(--s2) var(--s5);
background: var(--green-500);
color: var(--white);
border-radius: var(--r-full);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
transition: background var(--t-fast);
}
.hero-quick-card--map:hover .hero-quick-card__map-cta { background: var(--green-700); }
/* ── Responsive hero-search ───────────────────────────────── */
@media (max-width: 960px) {
/* Stats panel vai embaixo da barra */
.hero-search__layout { flex-direction: column; gap: var(--s3); }
.hero-search__stats-panel {
flex-direction: row;
min-width: 0;
padding: var(--s4) var(--s6);
justify-content: center;
gap: var(--s8);
}
.hero-search__stats-divider { width: 1px; height: 36px; }
.hero-search__stats-item { padding: 0; }
.hero-quick-row { gap: var(--s4); }
}
@media (max-width: 768px) {
/* Barra quebra em duas linhas */
.hero-search__bar { flex-wrap: wrap; }
.hero-search__sep { display: none; }
.hero-search__group { flex: 1 1 44%; border-bottom: 1px solid var(--gray-100); }
.hero-search__group--code { flex: 1 1 100%; border-bottom: none; }
.hero-quick-row { grid-template-columns: 1fr; }
.hero-quick-card__map-info { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}
@media (max-width: 480px) {
.hero-search__group { flex: 1 1 100%; }
.hero-search__code-row { flex-wrap: wrap; }
.hero-search__btn { width: 100%; }
.hero-search__select,
.hero-search__input { font-size: .9rem; min-height: 42px; padding: 8px var(--s3); }
.hero-search__stats-panel { flex-direction: column; gap: 0; }
.hero-search__stats-divider { width: 100%; height: 1px; }
}
/* ============================================================
INTRO SPLASH — abertura cinematográfica (tela cheia)
============================================================ */
.intro-splash {
position: fixed;
inset: 0;
z-index: 10000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.5s ease;
}
.intro-splash.intro--closing {
transform: translateY(-100vh);
opacity: 0;
pointer-events: none;
}
.intro-splash.intro--done { display: none; }
/* ── Vídeo de fundo ── */
.intro-splash__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.8s ease 0.6s;
}
.intro-splash.intro--loaded .intro-splash__video { opacity: 0.38; }
/* Véu sobre o vídeo */
.intro-splash__veil {
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(0,0,0,.72) 0%,
rgba(0,14,0,.78) 55%,
rgba(0,0,0,.65) 100%
);
z-index: 1;
}
/* ── Barras cinematográficas ── */
.intro-splash__bar {
position: absolute;
left: 0;
right: 0;
height: 56px;
background: #000;
z-index: 3;
transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro-splash__bar--top { top: 0; }
.intro-splash__bar--bottom { bottom: 0; }
.intro-splash.intro--loaded .intro-splash__bar--top { transform: translateY(-56px); }
.intro-splash.intro--loaded .intro-splash__bar--bottom { transform: translateY(56px); }
/* ── Conteúdo central ── */
.intro-splash__content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 var(--s6);
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
}
/* Logo */
.intro-splash__logo {
height: 76px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0;
transform: translateY(-14px);
transition: opacity 0.9s ease 0.5s, transform 0.9s ease 0.5s;
margin-bottom: 28px;
}
.intro-splash.intro--loaded .intro-splash__logo {
opacity: 0.92;
transform: translateY(0);
}
/* Eyebrow */
.intro-splash__eyebrow {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255,255,255,.42);
opacity: 0;
transition: opacity 0.7s ease 1.1s;
margin-bottom: 22px;
}
.intro-splash.intro--loaded .intro-splash__eyebrow { opacity: 1; }
/* Headline */
.intro-splash__headline {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4.5vw, 3.5rem);
font-weight: 300;
color: var(--white);
line-height: 1.09;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.95s ease 1.4s, transform 0.95s ease 1.4s;
margin-bottom: 30px;
}
.intro-splash__headline em {
font-style: italic;
background: linear-gradient(
90deg,
#8a6020 0%, #c8a050 18%, #f5e090 35%, #fffbe8 50%,
#f5e090 65%, #c8a050 82%, #8a6020 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: luxury-shimmer 4.5s linear infinite;
}
.intro-splash.intro--loaded .intro-splash__headline {
opacity: 1;
transform: translateY(0);
}
/* Subtítulo */
.intro-splash__sub {
font-size: 0.82rem;
color: rgba(255,255,255,.48);
line-height: 1.65;
max-width: 420px;
text-align: center;
opacity: 0;
transition: opacity 0.7s ease 1.8s;
margin-bottom: 4px;
}
.intro-splash.intro--loaded .intro-splash__sub { opacity: 1; }
/* Linha divisora dourada */
.intro-splash__divider {
width: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,150,90,.65), transparent);
transition: width 0.9s ease 2.1s;
margin-bottom: 28px;
}
.intro-splash.intro--loaded .intro-splash__divider { width: 80px; }
/* Botão Entrar */
.intro-splash__enter {
display: inline-block;
padding: 12px 48px;
border: 1px solid rgba(255,255,255,.28);
border-radius: var(--r-full);
color: var(--white);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
font-family: var(--font-body);
cursor: pointer;
background: transparent;
opacity: 0;
transition: opacity 0.7s ease 2.5s,
background var(--t-base),
border-color var(--t-base);
}
.intro-splash.intro--loaded .intro-splash__enter { opacity: 1; }
.intro-splash__enter:hover {
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.6);
}
/* CTAs da intro */
.intro-splash__ctas {
display: flex;
gap: var(--s3);
justify-content: center;
flex-wrap: wrap;
opacity: 0;
transition: opacity 0.7s ease 2.6s;
}
.intro-splash.intro--loaded .intro-splash__ctas { opacity: 1; }
.intro-splash__cta {
display: inline-block;
padding: 13px 32px;
border-radius: var(--r-full);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
font-family: var(--font-body);
text-decoration: none;
cursor: pointer;
transition: all var(--t-base);
white-space: nowrap;
}
.intro-splash__cta--gold {
background: var(--gold);
color: #0a0a0a;
border: 1px solid var(--gold);
}
.intro-splash__cta--gold:hover {
background: #a07840;
border-color: #a07840;
color: var(--white);
}
.intro-splash__cta--ghost {
background: transparent;
color: var(--white);
border: 1px solid rgba(255,255,255,.3);
}
.intro-splash__cta--ghost:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.6);
}
@media (max-width: 480px) {
.intro-splash__ctas { flex-direction: column; align-items: center; }
.intro-splash__cta { width: 100%; text-align: center; max-width: 280px; }
}
/* Pular intro */
.intro-splash__skip {
position: absolute;
top: 22px;
right: 24px;
z-index: 4;
font-size: 0.63rem;
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0.08em;
color: rgba(255,255,255,.28);
background: none;
border: none;
cursor: pointer;
padding: 4px 0;
transition: color var(--t-fast);
}
.intro-splash__skip:hover { color: rgba(255,255,255,.72); }
/* Barra de progresso */
.intro-splash__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(255,255,255,.06);
z-index: 4;
overflow: hidden;
}
.intro-splash__progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--green-500), var(--gold));
}
/* ── Mobile ── */
@media (max-width: 600px) {
.intro-splash__headline { font-size: clamp(1.45rem, 5.5vw, 2.2rem); }
}
@media (max-width: 480px) {
.intro-splash__logo { height: 52px; margin-bottom: 18px; }
.intro-splash__bar { height: 40px; }
.intro-splash.intro--loaded .intro-splash__bar--top { transform: translateY(-40px); }
.intro-splash.intro--loaded .intro-splash__bar--bottom { transform: translateY(40px); }
.intro-splash__enter { padding: 11px 32px; font-size: 0.65rem; }
}
/* ============================================================
GALERIA — página de objetos de alto luxo
============================================================ */
/* Layout geral */
body.galeria-page { background: #0a0a0a; color: var(--white); }
/* ── Galeria: navbar fundo verde da marca ── */
body.galeria-page .navbar {
background: var(--green-700);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,.12);
}
body.galeria-page .navbar--scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.3); }
body.galeria-page .navbar__logo-text { color: var(--white); }
body.galeria-page .navbar__link { color: rgba(255,255,255,.78); }
body.galeria-page .navbar__link:hover,
body.galeria-page .navbar__link--active { color: var(--white); }
/* Hamburger branco no fundo verde */
body.galeria-page .navbar__hamburger span { background: var(--white); }
/* Lock icon mobile — branco */
body.galeria-page .navbar__lock {
color: rgba(255,255,255,.8);
background: rgba(255,255,255,.1);
border: 1.5px solid rgba(255,255,255,.22);
}
body.galeria-page .navbar__lock:hover { background: rgba(255,255,255,.22); color: var(--white); border-color: rgba(255,255,255,.5); }
/* Lang selector — branco sobre verde */
body.galeria-page .navbar .lang-selector__btn {
color: rgba(255,255,255,.82);
border-color: rgba(255,255,255,.25);
}
body.galeria-page .navbar .lang-selector__btn:hover { color: var(--white); border-color: rgba(255,255,255,.6); }
/* Menu mobile aberto — verde mais escuro */
body.galeria-page .navbar__nav--open {
background: var(--green-800);
border-bottom: 1px solid rgba(255,255,255,.1);
}
body.galeria-page .navbar__nav--open .navbar__link {
color: rgba(255,255,255,.85);
border-bottom-color: rgba(255,255,255,.08);
}
body.galeria-page .navbar__nav--open .navbar__link:hover { color: var(--white); }
/* Hero da galeria */
.gal-hero {
min-height: 62vh;
display: flex;
align-items: flex-end;
padding-bottom: var(--s16);
position: relative;
overflow: hidden;
background: #000;
}
.gal-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .32;
}
.gal-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,.3) 60%, rgba(0,0,0,.5) 100%);
}
.gal-hero__content {
position: relative;
z-index: 1;
max-width: 760px;
}
.gal-hero__eyebrow {
font-size: .65rem;
font-weight: 700;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s4);
display: flex;
align-items: center;
gap: var(--s3);
}
.gal-hero__eyebrow::after {
content: '';
display: block;
height: 1px;
width: 40px;
background: var(--gold);
opacity: .5;
}
.gal-hero__title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
font-weight: 300;
line-height: 1.07;
color: var(--white);
margin-bottom: var(--s5);
}
.gal-hero__title em {
font-style: italic;
background: linear-gradient(90deg, #8a6020 0%, #c8a050 18%, #f5e090 35%, #fffbe8 50%, #f5e090 65%, #c8a050 82%, #8a6020 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: luxury-shimmer 4.5s linear infinite;
}
.gal-hero__sub {
font-size: 1rem;
color: rgba(255,255,255,.55);
line-height: 1.7;
max-width: 500px;
}
/* ── Filtros ── */
.gal-filters {
background: #111;
border-bottom: 1px solid rgba(255,255,255,.07);
padding: var(--s4) 0;
position: sticky;
top: 64px;
z-index: 100;
}
.gal-filters__inner {
display: flex;
gap: var(--s2);
align-items: center;
overflow-x: auto;
scrollbar-width: none;
}
.gal-filters__inner::-webkit-scrollbar { display: none; }
.gal-filter {
padding: 8px 20px;
border-radius: var(--r-full);
font-size: .75rem;
font-weight: 600;
letter-spacing: .06em;
color: rgba(255,255,255,.5);
background: rgba(255,255,255,.05);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: all var(--t-fast);
font-family: var(--font-body);
}
.gal-filter:hover {
color: var(--white);
background: rgba(255,255,255,.08);
}
.gal-filter.active {
color: #0a0a0a;
background: var(--gold);
border-color: var(--gold);
}
/* ── Seção de categoria ── */
.gal-section {
padding: var(--s16) 0;
border-top: 1px solid rgba(255,255,255,.06);
}
.gal-section__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--s8);
gap: var(--s4);
}
.gal-section__eyebrow {
font-size: .6rem;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s2);
}
.gal-section__title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 300;
color: var(--white);
line-height: 1.15;
}
.gal-section__count {
font-size: .72rem;
color: rgba(255,255,255,.3);
flex-shrink: 0;
}
/* ── Grid de cards ── */
.gal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s5);
}
@media (max-width: 900px) {
.gal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.gal-grid { grid-template-columns: 1fr; }
}
/* ── Card ── */
.gal-card {
background: #141414;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid rgba(255,255,255,.07);
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
display: flex;
flex-direction: column;
}
.gal-card:hover {
border-color: rgba(184,150,90,.35);
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(0,0,0,.55);
}
/* Foto */
.gal-card__photo {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background: #1a1a1a;
}
.gal-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
display: block;
}
.gal-card:hover .gal-card__photo img { transform: scale(1.06); }
/* Tags no canto da foto */
.gal-card__tags {
position: absolute;
top: var(--s3);
left: var(--s3);
display: flex;
gap: var(--s2);
z-index: 1;
}
.gal-card__tag {
padding: 4px 10px;
border-radius: var(--r-full);
font-size: .58rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
color: var(--gold);
border: 1px solid rgba(184,150,90,.3);
}
.gal-card__tag--exclusive {
background: var(--gold);
color: #0a0a0a;
border-color: var(--gold);
}
/* Corpo */
.gal-card__body {
padding: var(--s5);
flex: 1;
display: flex;
flex-direction: column;
}
.gal-card__brand {
font-size: .62rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.gal-card__name {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
color: var(--white);
line-height: 1.25;
margin-bottom: var(--s3);
}
.gal-card__desc {
font-size: .8rem;
color: rgba(255,255,255,.45);
line-height: 1.6;
flex: 1;
margin-bottom: var(--s4);
}
.gal-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s2);
border-top: 1px solid rgba(255,255,255,.07);
padding-top: var(--s4);
}
.gal-card__price {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--white);
}
.gal-card__cta {
padding: 7px 18px;
background: transparent;
border: 1px solid rgba(184,150,90,.45);
border-radius: var(--r-full);
color: var(--gold);
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
font-family: var(--font-body);
text-decoration: none;
transition: all var(--t-fast);
white-space: nowrap;
}
.gal-card__cta:hover {
background: var(--gold);
border-color: var(--gold);
color: #0a0a0a;
}
/* ── CTA final da galeria ── */
.gal-cta {
padding: var(--s20) 0;
background: #0d0d0d;
border-top: 1px solid rgba(255,255,255,.06);
text-align: center;
}
.gal-cta__eyebrow {
font-size: .62rem;
font-weight: 700;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s4);
}
.gal-cta__title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 300;
color: var(--white);
margin-bottom: var(--s5);
line-height: 1.15;
}
.gal-cta__sub {
font-size: .95rem;
color: rgba(255,255,255,.45);
max-width: 480px;
margin: 0 auto var(--s8);
line-height: 1.7;
}
.gal-cta__actions {
display: flex;
gap: var(--s4);
justify-content: center;
flex-wrap: wrap;
}
.btn--gold-solid {
background: var(--gold);
color: #0a0a0a;
border: 1px solid var(--gold);
font-weight: 700;
}
.btn--gold-solid:hover {
background: #a07840;
border-color: #a07840;
color: #fff;
}
.btn--ghost-gold {
background: transparent;
color: var(--gold);
border: 1px solid rgba(184,150,90,.4);
}
.btn--ghost-gold:hover {
background: rgba(184,150,90,.1);
border-color: var(--gold);
}
/* Esconder seções filtradas */
.gal-section[hidden] { display: none; }
/* ── Responsive galeria ── */
@media (max-width: 768px) {
.gal-hero { min-height: 52vh; padding-bottom: var(--s12); }
.gal-section__header { flex-direction: column; align-items: flex-start; }
.gal-filters { top: 56px; }
}