/* ═══════════════════════════════════════════════════════════════════════════ PERFIL PÚBLICO — PREMIUM INMOB360 --c = cor primária do corretor (inline no ) ═══════════════════════════════════════════════════════════════════════════ */ /* ── HEADER ───────────────────────────────────────────────────────────────── */ .pp-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06);} .pp-header__inner{max-width:1200px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;} .pp-header__logo img{height:34px;display:block;} .pp-header__brand{display:flex;align-items:center;gap:10px;text-decoration:none;} .pp-header__brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:-.02em;} .pp-header__brand-name{font-weight:700;font-size:16px;color:var(--text,#0f172a);} .pp-header__home{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--text-muted,#64748b);text-decoration:none;transition:color .15s;margin-left:auto;margin-right:16px;} .pp-header__home:hover{color:var(--c,#4f46e5);} .pp-header__cta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;background:#25d366;color:#fff;font-size:13px;font-weight:700;text-decoration:none;transition:background .15s,transform .1s;} .pp-header__cta:hover{background:#1faa52;transform:translateY(-1px);} /* ── HERO ─────────────────────────────────────────────────────────────────── */ /* Animations — GPU only, zero layout cost */ /* Pulso suave e contínuo — sempre em movimento, discreto mas perceptível */ @keyframes pp-hero-breathe{0%,100%{opacity:.28}50%{opacity:.58}} @keyframes pp-aurora-hue{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(20deg)}} /* Fundo escuro FIXO no próprio hero — nunca anima, nunca clareia */ .pp-hero{ position:relative;overflow:hidden;padding:120px 0 64px;margin-top:60px; background:linear-gradient(170deg,#0b1220 0%,#111827 50%,#0f172a 100%); } /* Orbs animam SOZINHOS por cima do fundo escuro — sem gradiente base aqui */ .pp-hero__bg{ position:absolute;inset:0;z-index:0; background: radial-gradient(ellipse 80% 80% at 20% 0%, color-mix(in srgb,var(--c) 15%,transparent), transparent 60%), radial-gradient(ellipse 60% 60% at 80% 100%, color-mix(in srgb,var(--c) 9%,transparent), transparent 55%), radial-gradient(ellipse 50% 40% at 50% 40%, color-mix(in srgb,var(--c) 5%,transparent), transparent 60%), radial-gradient(ellipse 85% 200px at 50% 100%, color-mix(in srgb,var(--c) 8%,transparent), transparent 68%); animation: pp-hero-breathe 14s ease-in-out infinite, pp-aurora-hue 28s ease-in-out infinite; } /* Grade de pontos — mesma do home, toque tech */ .pp-hero::after{ content:''; position:absolute;inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.028) 1px,transparent 1px); background-size:32px 32px; pointer-events:none;z-index:0; } /* ── Skyline — mesma silhueta do home, cores adaptadas ao corretor ────────── */ .pp-hero__skyline{ position:absolute; bottom:0;left:0;right:0; height:220px; pointer-events:none; z-index:0; } /* Prédios: gradiente fill + grade de janelas, clipped ao polygon */ .pp-hero__skyline::before{ content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0,transparent 10px, rgba(255,255,255,.011) 10px,rgba(255,255,255,.011) 11px), repeating-linear-gradient(0deg, transparent 0,transparent 14px, rgba(255,255,255,.011) 14px,rgba(255,255,255,.011) 15px), linear-gradient(to bottom, rgba(11,18,32,.0) 0%, rgba(11,18,32,.24) 18%, rgba(11,18,32,.64) 42%, rgba(11,18,32,.95) 60%, #0b1220 72% ); clip-path:polygon( 0% 100%, 0% 85%, 2% 85%, 2% 72%, 4% 72%, 4% 79%, 5.5% 79%, 5.5% 60%, 7% 60%, 7% 52%, 9% 52%, 9% 63%, 11% 63%, 11% 53%, 13% 53%, 13% 44%, 15% 44%, 15% 55%, 17% 55%, 17% 46%, 19.5% 46%, 19.5% 37%, 22% 37%, 22% 50%, 23.5% 50%, 23.5% 40%, 25.5% 40%, 25.5% 30%, 28% 30%, 28% 42%, 29.5% 42%, 29.5% 33%, 31% 33%, 31% 25%, 31.5% 19%, 32% 13%, 32.5% 19%, 33% 25%, 35% 25%, 35% 38%, 36.5% 38%, 36.5% 30%, 38% 30%, 38% 42%, 40% 42%, 40% 31%, 41.5% 31%, 41.5% 23%, 42% 23%, 42% 16%, 43% 9%, 44% 16%, 44% 23%, 46% 23%, 46% 34%, 48% 34%, 48% 26%, 49.5% 26%, 49.5% 18%, 50.5% 12%, 51.5% 18%, 51.5% 26%, 54% 26%, 54% 38%, 56% 38%, 56% 30%, 58% 30%, 58% 45%, 60% 45%, 60% 36%, 62% 36%, 62% 27%, 64% 27%, 64% 19%, 64.5% 14%, 65% 19%, 65% 27%, 67% 27%, 67% 42%, 68.5% 42%, 68.5% 50%, 70% 50%, 70% 38%, 72% 38%, 72% 52%, 74% 52%, 74% 43%, 76% 43%, 76% 35%, 78% 35%, 78% 50%, 79.5% 50%, 79.5% 58%, 81.5% 58%, 81.5% 50%, 83% 50%, 83% 42%, 86% 42%, 86% 59%, 87.5% 59%, 87.5% 67%, 89.5% 67%, 89.5% 74%, 91% 74%, 91% 65%, 93% 65%, 93% 72%, 95% 72%, 95% 78%, 97% 78%, 97% 83%, 100% 83%, 100% 100% ); } /* Halo neon acima das espiras — cor do corretor */ .pp-hero__skyline::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 55% 36% at 43% 6%, color-mix(in srgb,var(--c) 18%,transparent), transparent 70%), radial-gradient(ellipse 45% 32% at 51% 8%, color-mix(in srgb,var(--c) 14%,transparent), transparent 65%), radial-gradient(ellipse 40% 30% at 65% 10%, color-mix(in srgb,var(--c) 12%,transparent), transparent 68%); filter:blur(14px); pointer-events:none; } @media(max-width:640px){.pp-hero__skyline{height:130px;}} .pp-hero__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:40px;} .pp-hero__photo-wrap{position:relative;flex-shrink:0;} .pp-hero__photo{width:160px;height:160px;border-radius:24px;object-fit:cover;display:block;border:4px solid rgba(255,255,255,.15);box-shadow:0 8px 40px rgba(0,0,0,.35);} .pp-hero__photo--initials{display:grid;place-items:center;font-size:56px;font-weight:900;color:#fff;width:160px;height:160px;border-radius:24px;border:4px solid rgba(255,255,255,.15);background:var(--c);} .pp-hero__badge{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;background:var(--c);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.25);} .pp-hero__info{flex:1;min-width:0;} .pp-hero__eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:4px;} .pp-hero__name{font-size:clamp(26px,4vw,40px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:12px;letter-spacing:-.02em;} .pp-hero__meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px;} .pp-hero__meta-item{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:rgba(255,255,255,.65);} .pp-hero__meta-item svg{opacity:.7;} .pp-hero__bio{font-size:14px;line-height:1.7;color:rgba(255,255,255,.55);max-width:600px;margin-bottom:18px;} .pp-hero__whatsapp{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:14px;background:#25d366;color:#fff;font-size:15px;font-weight:700;text-decoration:none;transition:background .15s,transform .12s;box-shadow:0 4px 20px rgba(37,211,102,.35);} .pp-hero__whatsapp:hover{background:#1faa52;transform:translateY(-2px);} /* ── VITRINE ──────────────────────────────────────────────────────────────── */ .pp-vitrine{padding:48px 0 60px;background:var(--bg,#f6f8fb);} .pp-vitrine__inner{max-width:1200px;margin:0 auto;padding:0 24px;} .pp-vitrine__header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:28px;} .pp-vitrine__title{font-size:22px;font-weight:800;color:var(--text,#0f172a);} .pp-vitrine__count{text-align:center;margin-top:18px;font-size:13px;font-weight:500;color:var(--text-muted,#64748b);} /* ── TOOLBAR: busca + filtros ─────────────────────────────────────────────── */ .pp-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .pp-search-wrap{position:relative;} .pp-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-subtle,#94a3b8);pointer-events:none;} .pp-search{padding:8px 12px 8px 36px;border:1.5px solid var(--border,#e2e8f0);border-radius:10px;font-size:13px;font-weight:500;background:var(--surface,#fff);color:var(--text,#0f172a);width:200px;transition:border-color .15s,width .2s;} .pp-search:focus{outline:none;border-color:var(--c);width:240px;} .pp-search::placeholder{color:var(--text-subtle,#94a3b8);} .pp-filters{display:flex;gap:6px;flex-wrap:wrap;} .pp-filter{padding:7px 18px;border-radius:999px;border:1.5px solid var(--border,#e2e8f0);background:transparent;color:var(--text-muted,#64748b);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;} .pp-filter:hover{border-color:var(--c);color:var(--c);} .pp-filter--active,.pp-filter--active:hover{background:var(--c);color:#fff;border-color:var(--c);} /* ── GRID ─────────────────────────────────────────────────────────────────── */ .pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;} /* ── CARD ─────────────────────────────────────────────────────────────────── */ .pp-card{background:var(--surface,#fff);border-radius:18px;overflow:hidden;border:1px solid var(--border,#e2e8f0);transition:transform .18s,box-shadow .18s;} .pp-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.08);} .pp-card__img-wrap{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;} .pp-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;} .pp-card:hover .pp-card__img{transform:scale(1.04);} .pp-card__img--empty{background:var(--surface-2,#f1f5f9);display:grid;place-items:center;} .pp-card__img--empty svg{width:40px;height:40px;color:var(--text-subtle,#94a3b8);} .pp-card__badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;} .pp-badge{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;backdrop-filter:blur(8px);} .pp-badge--venda{background:rgba(79,70,229,.9);color:#fff;} .pp-badge--aluguel{background:rgba(37,99,235,.9);color:#fff;} .pp-badge--temp{background:rgba(22,163,74,.9);color:#fff;} /* Badge — estático, visual premium, sem animação */ .pp-badge--destaque{background:linear-gradient(135deg,#6d28d9,#4f46e5);color:#fff;display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(79,70,229,.4);} .pp-badge--destaque .dst-star{flex-shrink:0;display:block;} /* ── DESTAQUE RING — borda roxa que percorre o card inteiro, uma vez só ────── */ /* 1) Wrapper: borda roxa estática (3px) */ .pp-destaque-ring{ position:relative;border-radius:20px;padding:3px; overflow:hidden;isolation:isolate; background:linear-gradient(135deg,#4f46e5,#7c3aed); box-shadow:0 0 0 1px rgba(124,58,237,.25),0 6px 24px rgba(79,70,229,.15); } /* 2) Cometa giratório — roxo neon */ .pp-destaque-ring::before{ content:''; position:absolute; width:250%;aspect-ratio:1/1; top:50%;left:50%; transform:translate(-50%,-50%); background:conic-gradient( from 0deg, transparent 0deg, transparent 138deg, #3730a3 156deg, #4f46e5 168deg, #a78bfa 177deg, #ffffff 181deg, #a78bfa 185deg, #4f46e5 194deg, #3730a3 206deg, transparent 222deg, transparent 360deg ); opacity:0;z-index:0;pointer-events:none; } /* 3) Uma volta completa: aparece → gira 360° → some */ @keyframes dst-ring-once{ 0% {opacity:1;transform:translate(-50%,-50%) rotate(0deg)} 85% {opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) rotate(360deg)} } .pp-destaque-ring.ring-play::before{animation:dst-ring-once 2s ease-in-out 1 forwards;} /* 4) Card fica acima, perde border e hover próprios (wrapper assume) */ .pp-destaque-ring>.pp-card{position:relative;z-index:1;border:none;margin:0;flex:1;} .pp-destaque-ring>.pp-card:hover{transform:none;box-shadow:none;} /* Wrapper estica junto com o grid (flex col) e hover assume */ .pp-destaque-ring{display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;} .pp-destaque-ring:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(79,70,229,.15);} /* PREMIUM futuro — só trocar background e conic para âmbar: background: linear-gradient(135deg,#f59e0b,#d97706) conic: #92400e → #f59e0b → #fde68a → #fff → #fde68a → #f59e0b → #92400e */ .pp-card__body{padding:16px 18px 18px;} .pp-card__local{font-size:12px;font-weight:600;color:var(--c);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;} .pp-card__title{font-size:16px;font-weight:700;line-height:1.3;color:var(--text,#0f172a);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pp-card__price{font-size:20px;font-weight:900;color:var(--text,#0f172a);margin-bottom:12px;letter-spacing:-.02em;} .pp-card__specs{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px;} .pp-spec{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--text-muted,#64748b);} .pp-card__actions{display:flex;gap:8px;} .pp-card__btn-ver{flex:1;text-align:center;padding:10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 8%,transparent);text-decoration:none;transition:background .15s;} .pp-card__btn-ver:hover{background:color-mix(in srgb,var(--c) 16%,transparent);} .pp-card__btn-wa{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#25d366;color:#fff;text-decoration:none;transition:background .15s;flex-shrink:0;} .pp-card__btn-wa:hover{background:#1faa52;} /* ── EMPTY ────────────────────────────────────────────────────────────────── */ .pp-empty{text-align:center;padding:60px 20px;color:var(--text-subtle,#94a3b8);} .pp-empty p{font-size:16px;font-weight:500;} /* ── WHATSAPP FLUTUANTE ───────────────────────────────────────────────────── */ .pp-float-wa{position:fixed;bottom:24px;right:24px;z-index:90;display:flex;align-items:center;gap:8px;padding:14px 22px;border-radius:50px;background:#25d366;color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 6px 28px rgba(37,211,102,.45);transition:transform .15s,box-shadow .15s;} .pp-float-wa:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 36px rgba(37,211,102,.55);} .pp-float-wa span{display:none;} @media(min-width:600px){.pp-float-wa span{display:inline;}} /* ── FOOTER ───────────────────────────────────────────────────────────────── */ .pp-footer{border-top:1px solid var(--border,#e2e8f0);padding:20px 0;text-align:center;font-size:13px;color:var(--text-subtle,#94a3b8);} .pp-footer__inner{max-width:1200px;margin:0 auto;padding:0 24px;} .pp-footer a{color:var(--c);text-decoration:none;font-weight:600;} /* ── RESPONSIVE ───────────────────────────────────────────────────────────── */ @media(max-width:768px){ .pp-hero__inner{flex-direction:column;text-align:center;gap:20px;} .pp-hero__photo,.pp-hero__photo--initials{width:120px;height:120px;border-radius:20px;} .pp-hero__photo--initials{font-size:42px;} .pp-hero__meta{justify-content:center;} .pp-hero__bio{margin-left:auto;margin-right:auto;} .pp-hero{padding:100px 0 48px;} .pp-vitrine__header{flex-direction:column;align-items:stretch;} .pp-toolbar{flex-direction:column;align-items:stretch;} .pp-search{width:100%;} .pp-search:focus{width:100%;} .pp-grid{grid-template-columns:1fr;} .pp-header__cta span{display:none;} } @media(max-width:480px){ .pp-hero__name{font-size:24px;} .pp-card__price{font-size:18px;} .pp-float-wa{bottom:16px;right:16px;padding:12px 18px;} } /* ── Carousel de fotos nos cards ───────────────────────────────────────── */ .has-fc{touch-action:pan-y} .fc-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.52);border:none;color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s;backdrop-filter:blur(4px);padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .pp-card__img-wrap:hover .fc-btn{opacity:1} @media(hover:none){.fc-btn{opacity:.75}} .fc-btn--prev{left:8px}.fc-btn--next{right:8px} .fc-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:10;pointer-events:none} .fc-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s} .fc-dot--on{background:#fff;transform:scale(1.3)}