:root { --bg: #F3F5F7; --surface: #FFFFFF; --ink: #17233B; --ink-soft: #5B6B82; --line: #E3E8EE; --red: #C81B2E; --red-dark: #8F0F1E; --red-pale: #FBEAEA; --price: #0F8A5F; --badge: #20262E; --radius: 10px; --shadow: 0 1px 2px rgba(23,35,59,0.06), 0 6px 20px rgba(23,35,59,0.06); --shadow-hover: 0 4px 10px rgba(23,35,59,0.08), 0 14px 32px rgba(23,35,59,0.12); }  * { box-sizing: border-box; }  html { overflow-x: hidden; }  body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }  h1, h2, h3 { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; }  a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; }  .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }  /* ---------- Header ---------- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand .logo-img { width: 46px; height: 46px; flex-shrink: 0; } .brand .name-block { line-height: 1.15; min-width: 0; } .brand .name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } .brand .tagline { font-size: 11px; color: var(--ink-soft); font-weight: 500; }  .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .btn-share-header { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); flex-shrink: 0; } .btn-share-header svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; } .btn-share-header:hover { background: var(--bg); } .btn-whatsapp { display: flex; align-items: center; gap: 8px; background: #1DA851; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; border: none; white-space: nowrap; } .btn-whatsapp:hover { background: #178c43; } .btn-whatsapp svg { width: 16px; height: 16px; flex-shrink: 0; }  /* ---------- Hero + search bar ---------- */ .hero { background: linear-gradient(180deg, var(--red-dark) 0%, var(--red) 100%); padding: 40px 0 84px; } .hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FBD8DC; margin-bottom: 10px; display: block; } .hero h1 { color: #fff; font-size: 34px; max-width: 640px; line-height: 1.15; } .hero p { color: #F6DEE1; margin-top: 10px; font-size: 15px; max-width: 560px; }  .search-card { position: relative; z-index: 1; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-hover); padding: 22px 24px 24px; margin-top: -48px; border: 1px solid var(--line); }  .search-top-row { display: flex; gap: 24px; align-items: end; margin-bottom: 16px; } .field-finalidade { flex: 0 0 auto; min-width: 0; } .field-tipo { flex: 1 1 auto; min-width: 0; }  .field-finalidade > label, .search-fields .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); display: block; margin-bottom: 6px; }  .finalidade-tabs { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .finalidade-tab { font-family: inherit; padding: 9px 20px; border-radius: 999px; border: none; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 13px; transition: all 0.15s ease; } .finalidade-tab:hover { color: var(--red); } .finalidade-tab.active { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(200,27,46,0.28); }  .search-fields { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.3fr) minmax(0,1.3fr) auto; gap: 12px; align-items: end; } .search-fields > * { min-width: 0; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .field input, .field select { font-family: inherit; font-size: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; min-width: 0; width: 100%; } .field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .field input:focus, .field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,27,46,0.12); } .btn-search { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--red); color: #fff; border: none; border-radius: 9px; padding: 13px 26px; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; min-width: 0; } .btn-search svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-search:hover { background: var(--red-dark); transform: translateY(-1px); }  .search-extra { margin-top: 14px; } .link-toggle { background: none; border: none; color: var(--red); font-weight: 600; font-size: 13px; padding: 0; display: inline-flex; align-items: center; gap: 6px; } .link-toggle svg { width: 15px; height: 15px; flex-shrink: 0; } .link-toggle:hover { text-decoration: underline; } .field-keyword { margin-top: 10px; max-width: 360px; }  @media (max-width: 880px) { .search-top-row { flex-direction: column; align-items: stretch; } .field-finalidade .finalidade-tabs { display: flex; flex-wrap: wrap; row-gap: 6px; border-radius: 14px; } .finalidade-tab { flex: 1 1 30%; min-width: 30%; text-align: center; padding: 9px 4px; font-size: 12px; border-radius: 999px; } .search-fields { grid-template-columns: 1fr; } .hero h1 { font-size: 27px; } .field-keyword { max-width: 100%; } }  @media (max-width: 520px) { .site-header .container { flex-wrap: wrap; row-gap: 10px; } .brand { width: 100%; justify-content: center; text-align: center; } .header-actions { width: 100%; } .btn-whatsapp { flex: 1; justify-content: center; } .finalidade-tab { font-size: 11px; padding: 9px 2px; } }  /* ---------- Listing section ---------- */ .listing-section { padding: 44px 0 80px; } .listing-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .listing-header h2 { font-size: 21px; } .listing-count { color: var(--ink-soft); font-size: 14px; }  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; }  /* Card */ .card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.15s ease, transform 0.15s ease; display: flex; flex-direction: column; border: 1px solid var(--line); } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }  .photo-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--red-pale); } .photo-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; } .no-photo { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--red); opacity: 0.55; background: var(--red-pale); } .no-photo svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.6; } .no-photo span { font-size: 12px; font-weight: 600; color: var(--ink-soft); opacity: 1; }  .badge-pill { position: absolute; top: 12px; left: 12px; background: var(--badge); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card-price { font-size: 21px; font-weight: 800; color: var(--price); } .card-price span { font-size: 12px; font-weight: 500; color: var(--ink-soft); } .card-address { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; } .card-address strong { color: var(--ink); font-weight: 600; }  .spec-row { display: flex; gap: 14px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); } .spec-row .spec { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); } .spec-row svg { width: 15px; height: 15px; stroke: var(--ink-soft); fill: none; stroke-width: 1.8; }  .empty-state { padding: 60px 20px; text-align: center; color: var(--ink-soft); font-size: 14px; background: var(--surface); border-radius: var(--radius); border: 1px dashed var(--line); }  /* ---------- Detail page ---------- */ .breadcrumb { display: flex; gap: 6px; align-items: center; padding: 18px 0 4px; font-size: 13px; color: var(--ink-soft); } .breadcrumb a:hover { color: var(--red); }  .detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; padding: 16px 0 80px; align-items: start; } @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 26px; } }  .gallery { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; } .gallery img { width: 100%; height: 100%; object-fit: contain; display: block; } .gallery .badge-pill { top: 16px; left: 16px; }  .detail-title-block { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-top: 20px; } .detail-title-block h1 { font-size: 24px; margin-bottom: 14px; }  .detail-spec-row { display: flex; gap: 24px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .detail-spec-row .spec { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); } .detail-spec-row svg { width: 19px; height: 19px; stroke: var(--red); fill: none; stroke-width: 1.8; }  .descricao-block { margin-top: 20px; } .descricao-block h3 { font-size: 15px; margin-bottom: 8px; } .descricao-block p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }  /* Sidebar contact box */ .contact-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; position: sticky; top: 88px; } .contact-box .price-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .contact-box .price-big { font-size: 30px; font-weight: 800; color: var(--price); } .contact-box .price-big span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; } .status-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; } .status-pill.status-on { background: #1DA851; } .status-pill.status-off { background: var(--red); } .contact-box .divider { height: 1px; background: var(--line); margin: 16px 0; } .contact-box .agent { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .contact-box .agent .avatar-logo { width: 42px; height: 42px; flex-shrink: 0; } .contact-box .agent .info { font-size: 13px; line-height: 1.3; } .contact-box .agent .info strong { display: block; font-size: 14px; color: var(--ink); } .contact-box .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: 8px; font-weight: 700; font-size: 14px; border: none; margin-bottom: 10px; } .contact-box .btn svg { width: 17px; height: 17px; } .contact-box .btn-share svg { fill: none; stroke: currentColor; stroke-width: 1.8; } .btn-wa { background: #1DA851; color: #fff; } .btn-wa:hover { background: #178c43; } .btn-call { background: var(--red-pale); color: var(--red-dark); } .btn-call:hover { background: #d7e9f8; } .btn-share { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); } .contact-box .btn-share { border: 1.5px solid var(--line); } .btn-share:hover { background: var(--bg); } .contact-box .ref { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin-top: 4px; }  /* ---------- Footer ---------- */ .site-footer { background: var(--red-dark); color: #fff; padding: 40px 0 0; margin-top: 40px; font-size: 13px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 32px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-brand img { width: 40px; height: 40px; flex-shrink: 0; background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.28); } .footer-brand .footer-name { font-weight: 700; font-size: 15px; color: #fff; } .footer-brand .footer-tagline { font-size: 12px; color: #F6DEE1; } .footer-note { font-size: 13px; color: #F6DEE1; line-height: 1.5; max-width: 320px; margin: 0; } .footer-cta {   margin-top: 14px; padding: 14px 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); text-align: center; } .footer-cta h4 { margin: 0 0 6px; text-wrap: balance; } .footer-cta p { margin: 0; max-width: none; text-wrap: balance; } .site-footer h4 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 14px; } .footer-link { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; margin-bottom: 10px; opacity: 0.92; } .footer-link svg { width: 18px; height: 18px; flex-shrink: 0; } .footer-link:hover { opacity: 1; text-decoration: underline; } .footer-link.disabled { opacity: 0.55; pointer-events: none; } .footer-person { font-weight: 600; font-size: 14px; margin: 0 0 6px; color: #fff; } .footer-cred { font-size: 12.5px; color: #F6DEE1; margin: 0 0 4px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 24px; font-size: 12px; color: #F6DEE1; text-align: center; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }   /* ---------- Floating WhatsApp button ---------- */ .wa-float { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background: #1DA851; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 999; animation: wa-float-pulse 1.8s ease-in-out infinite; } .wa-float svg { width: 32px; height: 32px; fill: #fff; flex-shrink: 0; } .wa-float:hover { background: #178c43; } @keyframes wa-float-pulse { 0% { transform: scale(1); box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 0 rgba(29,168,81,0.45); } 50% { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 0 0 14px rgba(29,168,81,0); } 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 0 rgba(29,168,81,0); } } @media (max-width: 520px) { .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; } .wa-float svg { width: 27px; height: 27px; } }  :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }  .carousel { position: relative; overflow: hidden; border-radius: 12px; background: #000; } .carousel-track { display: flex; transition: transform .35s ease; } .carousel-track .slide { flex: 0 0 100%; aspect-ratio: 4 / 3; } .carousel-track .slide img, .carousel-track .slide video { width: 100%; height: 100%; object-fit: contain; display: block; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; } .carousel-arrow.prev { left: 10px; } .carousel-arrow.next { right: 10px; } .carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; cursor: pointer; padding: 0; } .carousel-dot.active { background: #fff; }  .carousel-track .slide { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 2000; } .lightbox.open { display: flex; } .lightbox-track { display: flex; transition: transform .35s ease; width: 100%; height: 100%; } .lightbox-track .slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; cursor: default; } .lightbox-track .slide img, .lightbox-track .slide video { max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; } .lightbox-close { position: absolute; top: 16px; right: 20px; background: transparent; color: #fff; border: none; font-size: 32px; cursor: pointer; line-height: 1; z-index: 2001; } .lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px; z-index: 2001; } .lightbox-arrow.prev { left: 16px; } .lightbox-arrow.next { right: 16px; } @media (max-width: 520px) { .lightbox-arrow { width: 36px; height: 36px; font-size: 15px; } }   /* Bloco de localizacao (mapa) na pagina do anuncio */ .location-block { margin-top: 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; } .location-block h3 { font-size: 15px; margin: 0; } .location-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .location-address { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); } .location-address svg { width: 13px; height: 13px; flex-shrink: 0; fill: var(--ink-soft); } @media (max-width: 480px) { .location-head { flex-direction: column; align-items: flex-start; } } .map-thumb-wrap { position: relative; border-radius: var(--radius); overflow: hidden; height: 220px; border: 1px solid var(--line); background: var(--surface); } .map-thumb-wrap iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; } .map-thumb-link { position: absolute; inset: 0; } .map-thumb-badge { position: absolute; right: 12px; bottom: 12px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 20px; box-shadow: var(--shadow-hover); pointer-events: none; }