/* ═══════════════════════════════════════════════════════════════════ ZYONERA IMÓVEIS — LUXURY STYLESHEET v3 Riviera de São Lourenço · Bertioga ═══════════════════════════════════════════════════════════════════ */ /* ── Reconexão Blazor ─────────────────────────────────────────────────────── */ #components-reconnect-modal { display: none; position: fixed; bottom: 16px; right: 16px; width: 240px; background: #1e2530; color: #e0e0e0; box-shadow: 0 4px 16px rgba(0,0,0,0.45); border-left: 4px solid #ffc107; z-index: 9999; padding: 14px 16px; border-radius: 6px; font-size: 0.85rem; line-height: 1.4; } #components-reconnect-modal .reconnect-failed-msg { display: none; } #components-reconnect-modal a { color: #ffc107; } /* ATENÇÃO ao seletor: o blazor.web.js aplica estas classes NO PRÓPRIO elemento #components-reconnect-modal (classe UserSpecifiedDisplay do runtime), não no . Estava escrito como `body.components-reconnect-show #components-…`, que nunca casa — o aviso ficou invisível desde sempre e a queda de circuito acontecia em silêncio, que é metade da reclamação de "o site trava". */ #components-reconnect-modal.components-reconnect-show { display: block; } #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: block; border-left-color: #dc3545; } #components-reconnect-modal.components-reconnect-failed .reconnect-msg, #components-reconnect-modal.components-reconnect-rejected .reconnect-msg { display: none; } #components-reconnect-modal.components-reconnect-failed .reconnect-failed-msg, #components-reconnect-modal.components-reconnect-rejected .reconnect-failed-msg { display: block; } /* ─────────────────────────────────────────────────────────────────────────── */ /* ─── CSS Variables ──────────────────────────────────────────────── */ :root { --gold: #c9a96e; --gold-dark: #a88550; /* Fallback do R,G,B de destaque: o MainLayout sobrescreve com a cor do tema escolhido em /zygest/aparencia. Fica aqui pra que rgba(var(--gold-rgb),…) continue válido em qualquer página servida sem o layout público. */ --gold-rgb: 201,169,110; /* Tinta do chrome: 255,255,255 é o fallback histórico (paleta escura). Paleta clara sobrescreve no MainLayout — ver Models/TemaCatalogo.cs. */ --tinta: #ffffff; --tinta-rgb: 255,255,255; --sombra-nav: rgba(0,0,0,0.40); --bg-page: #f8f6f1; --bg-card: #ffffff; --text-main: #1a1a1a; --text-sub: #6b6b6b; --text-faint: #999999; --shadow-card: 0 2px 18px rgba(0,0,0,0.07), 0 0 0 1px rgba(var(--gold-rgb),0.06); --shadow-hover: 0 10px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(var(--gold-rgb),0.13); --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; --nav-h: 70px; } /* ─── Base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { font-family: var(--sans); font-size: 16px; background: var(--bg-page); color: var(--text-main); line-height: 1.65; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--text-main); margin: 0; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-dark); } h1:focus { outline: none; } /* ─── Bootstrap overrides ────────────────────────────────────────── */ .btn-primary { background-color: var(--gold); border-color: var(--gold); color: var(--sobre-metal, #1a1a1a); } .btn-primary:hover, .btn-primary:focus { background-color: var(--gold-dark); border-color: var(--gold-dark); color: var(--sobre-metal, #1a1a1a); } .btn:focus, .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.15rem rgba(var(--gold-rgb),0.3); border-color: var(--gold); outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "Ocorreu um erro."; } /* ═══════════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════════ */ .luxury-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: var(--navbar-bg, rgba(10,10,10,0.75)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(var(--gold-rgb),0.1); transition: background 0.3s ease, box-shadow 0.3s ease; } .luxury-nav.scrolled { background: var(--navbar-bg, rgba(10,10,10,0.97)); box-shadow: 0 4px 28px var(--sombra-nav, rgba(0,0,0,0.4)); border-bottom-color: rgba(var(--gold-rgb),0.18); } .luxury-nav-container { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; } .luxury-nav-logo { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--gold) !important; letter-spacing: 0.02em; text-decoration: none !important; flex-shrink: 0; } .luxury-nav-logo:hover { opacity: 0.85; } .luxury-nav-menu { display: flex; align-items: center; gap: 0.1rem; } .luxury-nav-link { color: rgba(var(--tinta-rgb),0.78) !important; font-size: 0.76rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45rem 0.85rem; border-radius: 3px; text-decoration: none !important; transition: color 0.2s ease, background 0.2s ease; } .luxury-nav-link:hover { color: var(--gold) !important; background: rgba(var(--gold-rgb),0.08); } .luxury-nav-link.luxury-nav-link-disabled { cursor: default; opacity: 0.55; } .luxury-nav-link.luxury-nav-link-disabled:hover { color: rgba(var(--tinta-rgb),0.78) !important; background: transparent; } .luxury-nav-cta { color: var(--gold) !important; border: 1px solid var(--gold); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.43rem 1rem; border-radius: 3px; margin-left: 0.7rem; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease; } .luxury-nav-cta:hover { background: var(--gold); color: var(--sobre-metal, #1a1a1a) !important; } /* Hamburger */ .luxury-nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; } .luxury-nav-hamburger span { display: block; width: 22px; height: 1.5px; background: rgba(var(--tinta-rgb),0.8); transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease; transform-origin: center; } .luxury-nav-hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--gold); } .luxury-nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .luxury-nav-hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--gold); } /* ═══════════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════════ */ .luxury-main { min-height: 100vh; padding-top: var(--nav-h); } /* ═══════════════════════════════════════════════════════════════════ HERO SECTION ═══════════════════════════════════════════════════════════════════ */ .luxury-hero { background: linear-gradient(155deg, #0c0b09 0%, #1c1812 55%, #0e0c09 100%); min-height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5rem 2rem 5rem; position: relative; overflow: hidden; } .luxury-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 65%, rgba(var(--gold-rgb),0.09) 0%, transparent 70%); pointer-events: none; } .luxury-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top, var(--bg-page), transparent); pointer-events: none; } .luxury-hero-content { position: relative; z-index: 1; max-width: 780px; } .luxury-hero-eyebrow { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; } .luxury-hero-title { font-family: var(--serif); font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 700; color: var(--tinta, #fff); line-height: 1.08; margin-bottom: 1.2rem; letter-spacing: -0.01em; } .luxury-hero-title em { font-style: italic; color: var(--gold); } .luxury-hero-subtitle { font-family: var(--sans); font-size: 1rem; font-weight: 300; color: rgba(var(--tinta-rgb),0.58); margin-bottom: 2.75rem; line-height: 1.65; } /* Hero search bar */ .luxury-hero-search { display: flex; align-items: center; background: rgba(var(--tinta-rgb),0.07); border: 1px solid rgba(var(--gold-rgb),0.22); border-radius: 5px; padding: 0.4rem; max-width: 600px; margin: 0 auto; gap: 0; } .luxury-hero-search select { flex: 1; min-width: 0; background: transparent; border: none; color: rgba(var(--tinta-rgb),0.82); font-family: var(--sans); font-size: 0.84rem; font-weight: 400; padding: 0.6rem 0.9rem; outline: none; cursor: pointer; } .luxury-hero-search select option { background: var(--cor-secundaria, #1a1a1a); color: var(--tinta, #fff); } .luxury-hero-search-divider { width: 1px; height: 26px; background: rgba(var(--gold-rgb),0.22); flex-shrink: 0; margin: 0 0.1rem; } .luxury-hero-search-btn { background: var(--gold); color: #1a1a1a; border: none; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65rem 1.4rem; border-radius: 3px; cursor: pointer; transition: background 0.2s ease; white-space: nowrap; flex-shrink: 0; } .luxury-hero-search-btn:hover { background: var(--gold-dark); } /* Filtros avançados — toggle link */ .luxury-hero-filtro-toggle { display: block; background: none; border: none; color: rgba(var(--tinta-rgb),0.42); font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; margin: 0.55rem auto 0; padding: 0.25rem 0.5rem; transition: color 0.2s; } .luxury-hero-filtro-toggle:hover { color: var(--gold); } /* Filtros avançados — painel colapsável */ .hero-filtro-avancado { overflow: hidden; max-height: 0; opacity: 0; max-width: 600px; margin: 0 auto; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .hero-filtro-avancado.aberto { max-height: 620px; opacity: 1; background: var(--glass, rgba(10,10,10,0.55)); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(var(--tinta-rgb),0.12); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.28); padding: 0.9rem 1.2rem 1rem; } /* Grid 4 colunas */ .hero-avancado-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; padding: 1rem 0 0.5rem; } .hero-avancado-field label { display: block; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--tinta-rgb),0.42); margin-bottom: 0.28rem; font-weight: 500; } .hero-avancado-field input { width: 100%; background: rgba(var(--tinta-rgb),0.07); border: 1px solid rgba(var(--tinta-rgb),0.12); border-radius: 5px; color: rgba(var(--tinta-rgb),0.88); padding: 0.4rem 0.6rem; font-size: 0.78rem; font-family: var(--sans); outline: none; transition: border-color 0.2s; } .hero-avancado-field input::placeholder { color: rgba(var(--tinta-rgb),0.22); } .hero-avancado-field input:focus { border-color: var(--gold); } .hero-avancado-field select { width: 100%; background: rgba(var(--tinta-rgb),0.07); border: 1px solid rgba(var(--tinta-rgb),0.12); border-radius: 5px; color: rgba(var(--tinta-rgb),0.88); padding: 0.4rem 0.6rem; font-size: 0.78rem; font-family: var(--sans); outline: none; cursor: pointer; transition: border-color 0.2s; } .hero-avancado-field select:focus { border-color: var(--gold); } .hero-avancado-field select option { background: var(--cor-secundaria, #1a1a1a); color: var(--tinta, #fff); } /* Chips da busca em linguagem natural interpretada */ .busca-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; max-width: 640px; margin: 0.85rem auto 0; } .busca-chip { background: rgba(var(--gold-rgb),0.14); border: 1px solid rgba(var(--gold-rgb),0.35); color: rgba(var(--tinta-rgb),0.88); font-family: var(--sans); font-size: 0.72rem; padding: 0.32rem 0.75rem; border-radius: 20px; white-space: nowrap; } .busca-chip-editar { background: none; border: 1px solid rgba(var(--tinta-rgb),0.25); color: rgba(var(--tinta-rgb),0.55); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--tinta-rgb),0.2); } .busca-chip-editar:hover { color: var(--gold); border-color: var(--gold); } /* Linha de características */ .hero-avancado-caracts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0.4rem 0 0.6rem; } .hero-avancado-caracts .luxury-check { color: rgba(var(--tinta-rgb),0.68); font-size: 0.74rem; } .hero-avancado-caracts .luxury-check input[type="checkbox"] { accent-color: var(--gold); width: 13px; height: 13px; } /* Botão limpar */ .hero-avancado-limpar { display: inline-block; background: none; border: none; color: rgba(var(--tinta-rgb),0.3); font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.1em; cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: rgba(var(--tinta-rgb),0.15); transition: color 0.2s; } .hero-avancado-limpar:hover { color: rgba(var(--tinta-rgb),0.72); } /* ═══════════════════════════════════════════════════════════════════ CATALOG SECTION ═══════════════════════════════════════════════════════════════════ */ .luxury-catalog-section { max-width: 1300px; margin: 0 auto; padding: 3rem 2rem 5rem; } .luxury-results-count { font-family: var(--sans); font-size: 0.82rem; color: var(--text-sub); margin-bottom: 1.5rem; letter-spacing: 0.01em; } .luxury-results-count strong { color: var(--gold); font-weight: 600; } /* ─── Loading / Empty ────────────────────────────────────────────── */ .luxury-loading { text-align: center; padding: 5rem 2rem; color: var(--text-sub); } .luxury-loading .spinner-border { color: var(--gold) !important; width: 2rem; height: 2rem; border-width: 2px; } .luxury-empty { text-align: center; padding: 5rem 2rem; color: var(--text-sub); font-size: 0.95rem; } /* ─── Pagination ─────────────────────────────────────────────────── */ .luxury-pagination { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 3rem; } .luxury-pagination .btn { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-color: rgba(0,0,0,0.12); color: var(--text-sub); padding: 0.48rem 1.2rem; border-radius: 3px; font-family: var(--sans); transition: border-color 0.2s ease, color 0.2s ease; } .luxury-pagination .btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); } .luxury-pagination .btn:disabled { opacity: 0.3; } .luxury-pagination-info { font-size: 0.78rem; color: var(--text-sub); letter-spacing: 0.04em; } /* ═══════════════════════════════════════════════════════════════════ FILTERS ═══════════════════════════════════════════════════════════════════ */ .luxury-filters { background: var(--bg-card); border: 1px solid rgba(0,0,0,0.07); border-radius: 6px; padding: 1.5rem 1.75rem 1.25rem; margin-bottom: 2.25rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .luxury-filters .form-label { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 0.35rem; display: block; } .luxury-filters .form-select, .luxury-filters .form-control { border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; font-size: 0.855rem; font-family: var(--sans); color: var(--text-main); background-color: #faf9f7; padding: 0.42rem 0.7rem; height: auto; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .luxury-filters .form-select:focus, .luxury-filters .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.1); background: #fff; } .luxury-filters .form-select-sm, .luxury-filters .form-control-sm { font-size: 0.855rem !important; padding: 0.42rem 0.7rem; } .btn-buscar { background: var(--gold); border: none; color: #1a1a1a; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px; padding: 0.48rem 1.1rem; width: 100%; cursor: pointer; transition: background 0.2s ease; } .btn-buscar:hover { background: var(--gold-dark); } .btn-limpar { background: transparent; border: 1px solid rgba(0,0,0,0.12); color: var(--text-sub); font-family: var(--sans); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.05em; border-radius: 3px; padding: 0.48rem 1rem; width: 100%; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .btn-limpar:hover { border-color: var(--gold); color: var(--gold); } /* Custom checkboxes */ .luxury-check { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; user-select: none; font-size: 0.78rem; color: var(--text-sub); font-family: var(--sans); } .luxury-check input[type="checkbox"] { width: 15px; height: 15px; border: 1.5px solid rgba(0,0,0,0.18); border-radius: 2px; appearance: none; -webkit-appearance: none; cursor: pointer; background: #fff; transition: background 0.18s ease, border-color 0.18s ease; flex-shrink: 0; position: relative; top: -0.5px; } .luxury-check input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); } .luxury-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3.5px; top: 0.5px; width: 5px; height: 9px; border: 1.5px solid #1a1a1a; border-top: none; border-left: none; transform: rotate(45deg); } /* ═══════════════════════════════════════════════════════════════════ SHARED BADGE STYLES ═══════════════════════════════════════════════════════════════════ */ .luxury-badge { display: inline-block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.52rem; border-radius: 2px; border: 1px solid; font-family: var(--sans); white-space: nowrap; } .luxury-badge-sea { color: #1a6b9a; border-color: rgba(26,107,154,0.3); background: rgba(26,107,154,0.07); } .luxury-badge-green { color: #2d6a4f; border-color: rgba(45,106,79,0.3); background: rgba(45,106,79,0.07); } .luxury-badge-neutral { color: #777; border-color: rgba(120,120,120,0.3); background: rgba(120,120,120,0.06); } .luxury-badge-dark { color: #555; border-color: rgba(85,85,85,0.28); background: rgba(85,85,85,0.05); } /* ═══════════════════════════════════════════════════════════════════ CATALOG ROW CARDS ═══════════════════════════════════════════════════════════════════ */ .imovel-list { display: flex; flex-direction: column; gap: 0; } .imovel-row-card { position: relative; display: flex; background: var(--bg-card); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 1.5rem; border: 1px solid rgba(0,0,0,0.04); transition: box-shadow 0.32s ease, transform 0.32s ease; text-decoration: none; color: inherit; cursor: pointer; } .imovel-row-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); color: inherit; text-decoration: none; } .imovel-row-card:hover .imovel-row-photo img { transform: scale(1.04); } /* Photo side */ .imovel-row-photo { width: 60%; flex-shrink: 0; position: relative; overflow: hidden; background: #e8e4dc; } .imovel-row-photo::before { content: ''; display: block; padding-top: 56.25%; /* 16:9 ratio */ } .imovel-row-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; transition: transform 0.4s ease; display: block; } .imovel-row-no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #aaa5a0; letter-spacing: 0.05em; font-family: var(--sans); } .imovel-row-photo-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.07) 0%, transparent 55%); pointer-events: none; z-index: 1; } .imovel-row-tipo-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(10,10,10,0.7); backdrop-filter: blur(5px); color: rgba(255,255,255,0.9); font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.28rem 0.62rem; border-radius: 2px; } .imovel-row-destaque-tag { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--gold); color: #1a1a1a; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.28rem 0.62rem; border-radius: 2px; } /* Selo diagonal (ex.: "Veja Nova Condição !") + layer escurecendo — cobrem o CARD INTEIRO (foto + texto), não só a foto, então vivem soltos dentro de .imovel-row-card (não de .imovel-row-photo) e o gatilho é hover no card inteiro. */ .imovel-row-photo-darken { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .imovel-row-card:hover .imovel-row-photo-darken { opacity: 1; } .imovel-row-ribbon { position: absolute; top: 50%; left: 50%; z-index: 5; /* 200% da largura do card garante que, rotacionado -45°, a faixa cubra a diagonal inteira do retângulo mesmo quando ele é bem mais alto que largo (card vertical do grid) — sobra é cortada pelo overflow:hidden do .imovel-row-card, então nunca vaza pra fora do cantos arredondados. */ width: 200%; padding: 0.85rem 0; text-align: center; transform: translate(-50%, -50%) rotate(-45deg) scale(0.85); background: var(--gold); color: #1a1a1a; font-family: var(--sans); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; text-transform: uppercase; opacity: 0; box-shadow: 0 3px 14px rgba(0,0,0,0.4); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .imovel-row-card:hover .imovel-row-ribbon { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scale(1); } /* Info side */ .imovel-row-info { flex: 1; padding: 1.75rem 2rem 1.5rem; display: flex; flex-direction: column; min-width: 0; border-left: 1px solid rgba(0,0,0,0.05); } .imovel-row-condominio { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; } .imovel-row-titulo { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--text-main); line-height: 1.2; margin-bottom: 0.3rem; } .imovel-row-local { font-size: 1.2rem; color: var(--text-sub); margin-bottom: 0; } .imovel-row-ref { display: inline-block; font-family: var(--sans); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--gold); opacity: 0.72; margin: 0.3rem 0 0; } .imovel-row-divider { border: none; border-top: 1px solid rgba(0,0,0,0.07); margin: 1rem 0; } .imovel-row-preco { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 0.18rem; } .imovel-row-preco-unit { font-size: 0.52em; font-weight: 400; font-family: var(--sans); color: var(--gold); } .imovel-row-preco-label { font-size: 0.67rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; font-family: var(--sans); margin: 0; } .imovel-row-specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 1.23rem; color: var(--text-sub); } .imovel-row-spec strong { color: var(--text-main); font-weight: 600; } .imovel-row-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; } .imovel-row-desc { font-family: var(--sans); font-size: 0.85rem; color: var(--text-sub); line-height: 1.5; margin: 0.85rem 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .imovel-row-footer { margin-top: auto; padding-top: 1.25rem; } .imovel-row-cta { display: inline-block; border: 1px solid var(--gold); color: var(--gold) !important; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.6rem 1.75rem; border-radius: 3px; text-decoration: none !important; transition: background 0.22s ease, color 0.22s ease; } .imovel-row-cta:hover { background: var(--gold); color: var(--sobre-metal, #1a1a1a) !important; } /* ═══════════════════════════════════════════════════════════════════ CATALOG LAYOUT TOGGLE (1/3/5 colunas — preferência salva em localStorage) Grid só ativa em telas largas (≥992px); abaixo disso sempre fica a lista de 1 coluna já existente, então nenhuma regra daqui precisa "desfazer" nada do card padrão/empilhado em tablet/celular. ═══════════════════════════════════════════════════════════════════ */ .catalog-layout-toggle { display: flex; gap: 0.4rem; align-items: center; } .catalog-layout-btn { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: var(--bg-card); color: var(--text-sub); cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; padding: 0; } .catalog-layout-btn:hover { border-color: var(--gold); color: var(--gold); } .catalog-layout-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb),0.1); } .catalog-layout-btn svg { width: 1.05rem; height: 1.05rem; } /* Abaixo de 992px o grid nem ativa (ver bloco seguinte) — mostrar os botões ali só confundiria (clica e nada muda visualmente). */ @media (max-width: 991.98px) { .catalog-layout-toggle { display: none; } } @media (min-width: 992px) { .imovel-list.cols-3, .imovel-list.cols-5 { display: grid; gap: 1.5rem; } .imovel-list.cols-3 { grid-template-columns: repeat(3, 1fr); } .imovel-list.cols-5 { grid-template-columns: repeat(5, 1fr); } .imovel-list.cols-3 .imovel-row-card, .imovel-list.cols-5 .imovel-row-card { flex-direction: column; margin-bottom: 0; height: 100%; } .imovel-list.cols-3 .imovel-row-photo, .imovel-list.cols-5 .imovel-row-photo { width: 100%; } .imovel-list.cols-3 .imovel-row-info, .imovel-list.cols-5 .imovel-row-info { border-left: none; border-top: 1px solid rgba(0,0,0,0.05); padding: 1.1rem 1.1rem 0.9rem; } .imovel-list.cols-3 .imovel-row-titulo { font-size: 1.25rem; } .imovel-list.cols-5 .imovel-row-titulo { font-size: 1rem; } .imovel-list.cols-3 .imovel-row-local, .imovel-list.cols-3 .imovel-row-specs { font-size: 0.9rem; } .imovel-list.cols-5 .imovel-row-local, .imovel-list.cols-5 .imovel-row-specs { font-size: 0.76rem; } .imovel-list.cols-3 .imovel-row-preco { font-size: 1.25rem; } .imovel-list.cols-5 .imovel-row-preco { font-size: 1.05rem; } .imovel-list.cols-5 .imovel-row-desc { display: none; } .imovel-list.cols-3 .imovel-row-desc { -webkit-line-clamp: 2; } } /* ═══════════════════════════════════════════════════════════════════ CATALOG CAROUSEL ═══════════════════════════════════════════════════════════════════ */ /* Image with fade-in on each slide change (Blazor @key recreates the element) */ @keyframes carouselFadeIn { from { opacity: 0; } to { opacity: 1; } } .carousel-img { animation: carouselFadeIn 0.32s ease; } /* Prev / Next arrows */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; background: rgba(8, 8, 8, 0.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.92); font-size: 1.7rem; line-height: 1; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.22s ease, background 0.18s ease, transform 0.18s ease; padding: 0; user-select: none; } .imovel-row-photo:hover .carousel-arrow { opacity: 1; } .carousel-arrow:hover { background: rgba(8, 8, 8, 0.75); transform: translateY(-50%) scale(1.08); } .carousel-prev { left: 12px; } .carousel-next { right: 12px; } /* Dots */ .carousel-dots { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 6px; align-items: center; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.45); border: none; padding: 0; cursor: pointer; transition: background 0.22s ease, transform 0.22s ease; } .carousel-dot:hover { background: rgba(255,255,255,0.75); } .carousel-dot.active { background: rgba(255,255,255,0.96); transform: scale(1.45); } /* On mobile: always show arrows (no hover) */ @media (max-width: 900px) { .carousel-arrow { opacity: 0.82; width: 2rem; height: 2rem; font-size: 1.4rem; } } /* ═══════════════════════════════════════════════════════════════════ DETAIL PAGE ═══════════════════════════════════════════════════════════════════ */ .detalhe-container { max-width: 1300px; margin: 0 auto; padding: 2.25rem 2rem 5rem; } /* Breadcrumb row (breadcrumb + lang selector side-by-side) */ .detalhe-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } /* Breadcrumb */ .detalhe-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-sub); margin-bottom: 0; font-family: var(--sans); flex-wrap: wrap; } .detalhe-breadcrumb a { color: var(--text-sub); text-decoration: none; } .detalhe-breadcrumb a:hover { color: var(--gold); } .detalhe-breadcrumb .sep { color: var(--text-faint); font-size: 0.68rem; } /* Language selector */ .lang-selector { display: flex; gap: 0.25rem; flex-shrink: 0; } .lang-btn { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.18rem 0.45rem; border: 1.5px solid #ccc; border-radius: 3px; color: #999; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .lang-btn:hover { border-color: var(--gold); color: var(--gold); } .lang-btn.active { border-color: var(--gold); color: var(--gold); } /* USD conversion beside BRL price */ .preco-usd { font-size: 0.75em; font-weight: 400; color: var(--text-sub); letter-spacing: 0; margin-left: 0.35em; } /* Catalog hero lang row — overrides for dark background */ .cat-lang-row { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.85rem; } .cat-lang-row .lang-btn { color: rgba(var(--tinta-rgb),0.55); border-color: rgba(var(--tinta-rgb),0.3); } .cat-lang-row .lang-btn:hover { color: rgba(var(--tinta-rgb),0.9); border-color: rgba(var(--tinta-rgb),0.65); } .cat-lang-row .lang-btn.active { color: var(--tinta, #fff); border-color: var(--gold); } /* Main gallery */ .detalhe-gallery-wrap { position: relative; border-radius: 7px; overflow: hidden; background: #e8e4dc; height: clamp(320px, 60vh, 620px); } .detalhe-gallery-wrap .carousel, .detalhe-gallery-wrap .carousel-inner, .detalhe-gallery-wrap .carousel-item { height: 100%; } .detalhe-gallery-wrap .carousel-item img, .detalhe-foto { width: 100%; height: 100%; object-fit: cover; object-position: bottom center; display: block; } .detalhe-gallery-wrap .carousel-control-prev, .detalhe-gallery-wrap .carousel-control-next { width: 50px; opacity: 0.65; transition: opacity 0.2s; } .detalhe-gallery-wrap:hover .carousel-control-prev, .detalhe-gallery-wrap:hover .carousel-control-next { opacity: 1; } .detalhe-no-foto { height: clamp(320px, 60vh, 620px); background: #e8e4dc; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; color: #aaa5a0; letter-spacing: 0.05em; font-family: var(--sans); } .detalhe-pano-section { margin-bottom: 2.5rem; } .detalhe-pano-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 0.75rem; } /* Thumbnail strip */ .detalhe-thumb-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.65rem 0 0; margin-bottom: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--gold) rgba(0,0,0,0.05); } .detalhe-foto-meta { display: flex; align-items: baseline; gap: 0.65rem; margin: 0 0 2rem; flex-wrap: wrap; min-height: 1.4rem; } .detalhe-foto-cat-pill { display: inline-block; font-size: 0.68rem; font-family: var(--sans); text-transform: capitalize; background: var(--gold); color: #111; padding: 2px 9px; border-radius: 20px; white-space: nowrap; font-weight: 600; letter-spacing: 0.03em; flex-shrink: 0; } .detalhe-foto-desc { font-size: 0.83rem; color: var(--text-sub); font-style: italic; font-family: var(--sans); line-height: 1.45; } .detalhe-thumb-strip::-webkit-scrollbar { height: 3px; } .detalhe-thumb-strip::-webkit-scrollbar-track { background: transparent; } .detalhe-thumb-strip::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; } .detalhe-thumb { flex-shrink: 0; width: 84px; height: 56px; border: 3px solid rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; cursor: pointer; opacity: 0.4; background: none; padding: 0; transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .detalhe-thumb.active { opacity: 1 !important; border-color: var(--gold) !important; border-width: 4px !important; transform: scale(1.08) !important; box-shadow: 0 3px 12px rgba(var(--gold-rgb),0.6) !important; } .detalhe-thumb:hover { opacity: 0.7; border-color: rgba(var(--gold-rgb),0.5); } .detalhe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Header (full-width above 2 cols) */ .detalhe-header { margin-bottom: 2rem; } .detalhe-badges-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.85rem; } .detalhe-tipo-badge { display: inline-block; background: rgba(var(--gold-rgb),0.1); color: var(--gold); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 2px; border: 1px solid rgba(var(--gold-rgb),0.28); font-family: var(--sans); } .detalhe-destaque-badge { display: inline-block; background: var(--gold); color: #1a1a1a; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 2px; font-family: var(--sans); } .detalhe-condominio { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; font-family: var(--sans); } .detalhe-titulo { font-family: var(--serif); font-size: clamp(2.3rem, 4.2vw, 3.4rem); font-weight: 700; color: var(--text-main); line-height: 1.15; margin-bottom: 0.4rem; } .detalhe-localizacao { font-size: 1.26rem; color: var(--text-sub); margin: 0; } .detalhe-ref { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--gold); opacity: 0.75; margin: 0.6rem 0 0; } /* Two-column info layout */ .detalhe-info-cols { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; } .detalhe-sep { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 1.25rem 0; } /* Left col: price, specs, CTA */ .detalhe-preco-venda { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 0.2rem; } .detalhe-preco-aluguel { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: 0.2rem; } .detalhe-preco-temporada { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--gold); opacity: 0.88; margin-bottom: 0.2rem; } .detalhe-preco-label { font-size: 0.67rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--sans); font-weight: 500; margin-bottom: 0; } .detalhe-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.65rem; margin-bottom: 0; } .detalhe-spec-item { text-align: center; padding: 0.65rem 0.35rem; background: #faf9f7; border-radius: 4px; border: 1px solid rgba(0,0,0,0.055); } .detalhe-spec-value { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--text-main); line-height: 1.1; } .detalhe-spec-label { display: block; font-size: 0.63rem; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.18rem; font-weight: 500; font-family: var(--sans); } .detalhe-feature-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; } .detalhe-custos { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.78rem; color: var(--text-sub); font-family: var(--sans); } .detalhe-cta-primary { display: block; width: 100%; text-align: center; background: var(--gold); color: #1a1a1a !important; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; padding: 1rem; border-radius: 3px; text-decoration: none !important; transition: background 0.2s ease; margin-bottom: 0.65rem; border: none; cursor: pointer; } .detalhe-cta-primary:hover { background: var(--gold-dark); } .detalhe-cta-secondary { display: block; width: 100%; text-align: center; border: 1px solid rgba(0,0,0,0.12); color: var(--text-sub) !important; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.72rem; border-radius: 3px; text-decoration: none !important; transition: border-color 0.2s ease, color 0.2s ease; } .detalhe-cta-secondary:hover { border-color: var(--gold); color: var(--gold) !important; } /* Formulário de interesse inline (expansível) */ .interesse-form { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease; margin-bottom: 0; } .interesse-form.aberto { max-height: 700px; opacity: 1; margin-bottom: 0.65rem; } .interesse-form-inner { background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.07); border-radius: 6px; padding: 1.1rem 1rem 1rem; margin-top: 0.65rem; } .interesse-form-inner .form-group { margin-bottom: 0.85rem; } .interesse-form-inner label { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 0.32rem; } .interesse-form-inner label .req { color: #c0392b; } .interesse-form-inner label .opt { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0.02em; } .interesse-form-inner input, .interesse-form-inner textarea { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 0.88rem; color: var(--text-main); background: #fff; border: 1px solid rgba(0,0,0,0.13); border-radius: 5px; padding: 0.55rem 0.75rem; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .interesse-form-inner input:focus, .interesse-form-inner textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.18); } .interesse-form-inner input.invalido, .interesse-form-inner textarea.invalido { border-color: #c0392b; background: #fdf6f5; } .interesse-form-inner textarea { resize: vertical; min-height: 78px; } .interesse-form-erro { font-family: var(--sans); font-size: 0.82rem; color: #c0392b; background: #fdf0ef; border: 1px solid #f5c6c2; border-radius: 5px; padding: 0.5rem 0.75rem; margin: 0.25rem 0 0.7rem; } .interesse-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.4rem; } .interesse-form-actions .detalhe-cta-primary, .interesse-form-actions .detalhe-cta-secondary { margin-bottom: 0; } .interesse-sucesso { background: #e6f9ee; border: 1px solid #b5e8c7; color: #1f7a3f; font-family: var(--sans); font-size: 0.92rem; font-weight: 600; text-align: center; padding: 0.85rem 1rem; border-radius: 6px; margin-bottom: 0.65rem; } @media (max-width: 575.98px) { .interesse-form-actions { grid-template-columns: 1fr; } } /* Right col: description */ .detalhe-desc-titulo { font-family: var(--sans); font-size: 1.37rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 0.6rem; } .detalhe-desc-texto { font-size: 1.35rem; color: var(--text-sub); line-height: 1.78; white-space: pre-line; font-family: var(--sans); margin: 0; } .detalhe-caract-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem 1.5rem; margin-top: 0.5rem; } .detalhe-caract-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; color: var(--text-sub); } .detalhe-caract-item svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--gold); } /* ═══════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════ */ .luxury-footer { background: var(--cor-secundaria, #0a0a0a); border-top: 1px solid rgba(var(--gold-rgb),0.14); padding: 3.5rem 2rem 2.25rem; text-align: center; } .luxury-footer-inner { max-width: 960px; margin: 0 auto; } .luxury-footer-logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 0.45rem; } .luxury-footer-tagline { font-size: 0.7rem; color: rgba(var(--tinta-rgb),0.38); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.75rem; font-family: var(--sans); } .luxury-footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; } .luxury-footer-links a { font-size: 0.74rem; color: rgba(var(--tinta-rgb),0.4) !important; text-decoration: none !important; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s ease; font-family: var(--sans); } .luxury-footer-links a:hover { color: var(--gold) !important; } /* Redes sociais da loja. Fica sobre a cor-base da paleta (não sobre foto), então segue --tinta/--gold e funciona nas paletas claras e escuras. */ .luxury-footer-social { display: flex; justify-content: center; gap: 0.9rem; margin-bottom: 1.75rem; } .luxury-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(var(--tinta-rgb),0.18); transition: border-color 0.2s ease, background-color 0.2s ease; } .luxury-footer-social a:hover { border-color: var(--gold); background: rgba(var(--gold-rgb),0.08); } .luxury-footer-social svg { width: 17px; height: 17px; fill: none; stroke: rgba(var(--tinta-rgb),0.45); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease; } .luxury-footer-social a:hover svg { stroke: var(--gold); } /* Registro do CRECI: um degrau mais legível que o copyright — é informação obrigatória em publicidade imobiliária, não letra miúda de rodapé. */ .luxury-footer-creci { font-size: 0.72rem; color: rgba(var(--tinta-rgb),0.32); font-family: var(--sans); letter-spacing: 0.12em; margin: 0 0 0.4rem; } .luxury-footer-copy { font-size: 0.7rem; color: rgba(var(--tinta-rgb),0.2); font-family: var(--sans); margin: 0; } /* ═══════════════════════════════════════════════════════════════════ BLAZOR ERROR UI ═══════════════════════════════════════════════════════════════════ */ #blazor-error-ui { background: #111; border-top: 1px solid var(--gold); bottom: 0; left: 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.45); display: none; padding: 0.75rem 1.5rem; position: fixed; width: 100%; z-index: 2000; color: rgba(255,255,255,0.75); font-size: 0.85rem; font-family: var(--sans); } #blazor-error-ui .reload { color: var(--gold); text-decoration: underline; margin-left: 0.5rem; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; color: rgba(255,255,255,0.45); } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { .luxury-nav-hamburger { display: flex; } .luxury-nav-menu { position: fixed; top: 0; right: -100%; width: min(290px, 84vw); height: 100vh; background: var(--navbar-bg, rgba(10,10,10,0.97)); flex-direction: column; align-items: flex-start; padding: calc(var(--nav-h) + 1.5rem) 1.75rem 2rem; gap: 0.1rem; transition: right 0.32s ease; border-left: 1px solid rgba(var(--gold-rgb),0.12); z-index: 999; } .luxury-nav-menu.open { right: 0; } .luxury-nav-link { width: 100%; padding: 0.7rem 0; border-bottom: 1px solid rgba(var(--tinta-rgb),0.05); border-radius: 0; font-size: 0.85rem; } .luxury-nav-cta { margin-left: 0; margin-top: 1.5rem; width: 100%; text-align: center; padding: 0.7rem 1.25rem; } .detalhe-info-cols { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 767.98px) { .luxury-hero { min-height: 430px; padding: 4rem 1.25rem 4rem; } .luxury-hero-search { flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 0.5rem; } .luxury-hero-search select { width: 100%; } .luxury-hero-search-divider { display: none; } .luxury-hero-search-btn { width: 100%; padding: 0.75rem; } .hero-avancado-grid { grid-template-columns: repeat(2, 1fr); } .luxury-catalog-section { padding: 2rem 1rem 3rem; } .luxury-filters { padding: 1.25rem 1rem 1rem; } .imovel-row-card { flex-direction: column; } .imovel-row-photo { width: 100%; min-height: 240px; } .imovel-row-info { border-left: none; border-top: 1px solid rgba(0,0,0,0.05); padding: 1.25rem 1.25rem 1rem; } .detalhe-container { padding: 1.75rem 1rem 3rem; } .detalhe-thumb { width: 68px; height: 46px; } } @media (max-width: 575.98px) { .luxury-hero-title { font-size: 2.1rem; } .imovel-row-titulo { font-size: 1.15rem; } .detalhe-preco-venda { font-size: 1.8rem; } .detalhe-specs-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Imóveis Semelhantes ──────────────────────────────────────────────────── */ .semelhantes-section { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.08); } .semelhantes-titulo { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--text-main); margin-bottom: 1.25rem; } .semelhantes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .seme-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid rgba(0,0,0,0.07); border-radius: 8px; overflow: hidden; text-decoration: none !important; color: inherit; transition: box-shadow 0.2s, transform 0.2s; } .seme-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.10); transform: translateY(-3px); } .seme-foto-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: rgba(0,0,0,0.04); } .seme-foto { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; } .seme-card:hover .seme-foto { transform: scale(1.05); } .seme-foto-empty { width: 100%; height: 100%; } .seme-body { padding: 0.85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.12rem; } .seme-tipo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); font-weight: 600; margin: 0; } .seme-nome-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; } .seme-nome { font-size: 0.9rem; font-weight: 600; color: var(--text-main); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .seme-ref { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; margin-left: auto; } .seme-desc { font-size: 0.85rem; color: var(--text-sub); margin: 0.15rem 0 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .seme-preco { font-size: 1.2rem; font-weight: 700; color: var(--gold); margin: 0.45rem 0 0; } .seme-preco span { font-size: 0.65em; font-weight: 400; color: var(--text-sub); margin-left: 1px; } .seme-specs { display: flex; gap: 0.75rem; margin-top: 0.55rem; flex-wrap: wrap; } .seme-spec { display: flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; color: var(--text-sub); } .seme-spec svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--gold); } @media (max-width: 991.98px) { .semelhantes-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .semelhantes-grid { grid-template-columns: 1fr; } .semelhantes-titulo { font-size: 1.1rem; } } /* ═══════════════════════════════════════════════════════════════════ PROMO CTA — painel "premium" com aurora, borda girando e sparkles. Nasceu na chamada de Oportunidades da Home; promovido pra cá (era