/* landing-base.css — design system compartilhado (lp, hosp, guia, prod) */

    /* ═══ TOKENS ════════════════════════════════════════════════════ */
    :root {
        --brand: #0098DA;
        --brand-lt: #e0f4fd;
        --brand-dk: #006fa3;
        --accent: #00C2FE;
        --surface: #fff;
        --surface-2: #f7f8fa;
        --surface-3: #eef0f4;
        --border: #e4e7ec;
        --text-900: #1a1a1a;
        --text-700: #444;
        --text-500: #6b7280;
        --text-300: #9ca3af;
        --wpp: #25d366;
        --wpp-dk: #1ebc5a;
        --r-xl: 16px;
        --r-lg: 12px;
        --r-md: 8px;
        --sh-sm: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
        --sh-md: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05);
        --sh-lg: 0 12px 40px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .06);
        --sh-br: 0 8px 30px rgba(15, 111, 255, .22);
        --t: .22s cubic-bezier(.4, 0, .2, 1);
        --sp-xs: 8px;
        --sp-sm: 16px;
        --sp-md: 32px;
        --sp-lg: 60px;
        --sp-xl: 88px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    html {
        scroll-behavior: smooth
    }

    body {
        font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
        color: var(--text-700);
        background: var(--surface-2);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden
    }

    img {
        max-width: 100%;
        height: auto;
        display: block
    }

    a {
        text-decoration: none;
        color: inherit
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--brand);
        background: var(--brand-lt);
        padding: 5px 14px;
        border-radius: 100px;
        margin-bottom: 14px
    }

    .eyebrow::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand);
        flex-shrink: 0
    }

    .eyebrow.light {
        background: rgba(255, 255, 255, .15);
        color: #fff
    }

    .eyebrow.light::before {
        background: #fff
    }

    .sec-title {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800;
        color: var(--text-900);
        line-height: 1.18;
        letter-spacing: -.03em
    }

    .sec-title.light {
        color: #fff
    }

    .c-xl {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px
    }

    .c-lg {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 24px
    }

    .c-md {
        max-width: 820px;
        margin: 0 auto;
        padding: 0 24px
    }

    .sec-pad {
        padding: var(--sp-xl) 0
    }

    .sec-pad-sm {
        padding: var(--sp-lg) 0
    }

    .bg-alt {
        background: var(--surface-2)
    }

    .sec-hd {
        text-align: center;
        margin-bottom: var(--sp-md)
    }

    .btn-brand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 13px 28px;
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: var(--r-lg);
        font-weight: 700;
        font-size: .95rem;
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--t), transform var(--t), box-shadow var(--t);
        box-shadow: var(--sh-br);
        text-decoration: none
    }

    .btn-brand:hover {
        background: var(--brand-dk);
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(15, 111, 255, .32);
        color: #fff
    }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 24px;
        background: transparent;
        color: var(--brand);
        border: 2px solid var(--brand);
        border-radius: var(--r-lg);
        font-weight: 700;
        font-size: .9rem;
        cursor: pointer;
        white-space: nowrap;
        transition: all var(--t)
    }

    .btn-outline:hover {
        background: var(--brand);
        color: #fff;
        transform: translateY(-2px)
    }

    .btn-wpp {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 24px;
        width: 100%;
        background: var(--wpp);
        color: #fff;
        border: none;
        border-radius: var(--r-lg);
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        transition: all var(--t);
        box-shadow: 0 6px 24px rgba(37, 211, 102, .28)
    }

    .btn-wpp:hover {
        background: var(--wpp-dk);
        transform: translateY(-2px)
    }

    .btn-white {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 32px;
        background: #fff;
        color: var(--brand);
        border: none;
        border-radius: var(--r-lg);
        font-weight: 800;
        font-size: 1rem;
        cursor: pointer;
        transition: all var(--t);
        box-shadow: 0 6px 24px rgba(0, 0, 0, .12)
    }

    .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, .18)
    }

    .form-control,
    .form-select {
        padding: 11px 16px !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--r-md) !important;
        font-size: .95rem !important;
        color: var(--text-900) !important;
        background: var(--surface-2) !important;
        transition: border-color var(--t), box-shadow var(--t) !important;
        font-family: inherit !important
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand) !important;
        background: var(--surface) !important;
        box-shadow: 0 0 0 3px rgba(15, 111, 255, .12) !important;
        outline: none !important
    }

    .form-label,
    .field-label {
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 6px;
        display: block
    }

    .nav-wrap {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border);
        transition: box-shadow var(--t)
    }

    .nav-wrap.scrolled {
        box-shadow: var(--sh-md)
    }

    .nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px
    }

    .nav-logo img {
        height: 48px;
        max-width: 180px;
        object-fit: contain;
        cursor: pointer
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 48px;
        height: 48px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface);
        cursor: pointer;
        flex-shrink: 0
    }

    .nav-toggle-bar {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--text-900);
        border-radius: 2px;
        transition: transform var(--t), opacity var(--t)
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 28px
    }

    .nav-links a {
        font-size: .9rem;
        font-weight: 600;
        color: var(--text-700);
        transition: color var(--t)
    }

    .nav-links a:hover {
        color: var(--brand)
    }

    .nav-wpp {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        min-height: 48px;
        background: var(--wpp);
        color: #fff;
        border-radius: var(--r-md);
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer;
        border: none;
        transition: all var(--t);
        box-shadow: 0 2px 8px rgba(37, 211, 102, .2)
    }

    .nav-wpp:hover {
        background: var(--wpp-dk);
        transform: translateY(-1px)
    }

    .nav-mobile {
        border-top: 1px solid var(--border);
        background: var(--surface)
    }

    .nav-mobile-inner {
        display: flex;
        flex-direction: column;
        padding: 12px 24px 20px;
        gap: 4px
    }

    .nav-mobile-inner a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 12px;
        font-weight: 600;
        color: var(--text-900);
        border-radius: var(--r-md);
        transition: background var(--t)
    }

    .nav-mobile-inner a:hover {
        background: var(--surface-2);
        color: var(--brand)
    }

    .nav-wpp--mobile {
        width: 100%;
        justify-content: center;
        margin-top: 8px
    }

    .hero {
        position: relative;
        overflow: hidden;
        background: var(--surface);
        padding: 0
    }

    .imob-hero-wrap {
        background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
        margin: 0;
        padding: 0
    }

    .imob-hero {
        padding: 40px 0 0
    }

    .imob-hero-grid {
        gap: 32px;
        align-items: stretch
    }

    .imob-hero-img {
        border-radius: var(--r-xl);
        aspect-ratio: 16/10;
        object-fit: cover;
        min-height: 280px
    }

    .imob-hero-form {
        height: 100%;
        box-shadow: var(--sh-md)
    }

    .imob-hero-form::before {
        background: linear-gradient(90deg, var(--brand), #818cf8)
    }

    .imob-hero-form__head {
        font-size: 1.15rem;
        padding: 20px 24px 14px
    }

    .imob-hero-form__body {
        padding: 16px 24px 24px
    }

    .imob-field-label {
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-500);
        margin-bottom: 6px
    }

    .imob-field-input {
        min-height: 48px !important;
        border-radius: var(--r-md) !important;
        border: 1px solid var(--border) !important;
        font-size: .92rem !important
    }

    .imob-hero-submit {
        min-height: 48px;
        margin-top: 4px
    }

    .imob-hero-skeleton {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: stretch;
        padding: 40px 0 0
    }

    .imob-hero-skeleton__img {
        aspect-ratio: 16/10;
        border-radius: var(--r-xl)
    }

    .imob-hero-skeleton__form {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .imob-hero-slider-wrap {
        padding: 0;
        margin: 0;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border)
    }

    .imob-hero-slider-inner {
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
        max-width: 100%
    }

    .imob-hero-slider-inner img,
    .imob-hero-slider-inner [class*="slide"] {
        border-radius: 0;
        width: 100%;
        max-height: clamp(280px, 42vh, 520px);
        object-fit: cover
    }

    /* topo_slider — altura fixa + crop (cover), sem padding do dmx-slideshow */
    #topo_slider.imob-hero-slider-wrap {
        background: var(--surface);
        line-height: 0;
        overflow: hidden
    }

    #topo_slider .imob-hero-slider-inner {
        width: 100%;
        max-width: none;
        padding: 0;
        line-height: 0;
        overflow: hidden
    }

    #topo_slider .dmx-slideshow {
        position: relative;
        width: 100%;
        height: clamp(160px, min(32vw, 42vh), 520px) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden;
        aspect-ratio: unset !important
    }

    #topo_slider .dmx-slideshow-slides-container,
    #topo_slider .dmx-slideshow-effects-container,
    #topo_slider .dmx-slideshow-textbox-container {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important
    }

    #topo_slider .dmx-slideshow a,
    #topo_slider .dmx-slideshow [class*="slide"],
    #topo_slider .dmx-slideshow img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: cover !important;
        object-position: center center !important
    }

    #topo_slider .dmx-slideshow-paging-container {
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        z-index: 3;
        line-height: normal
    }

    #topo_slider .dmx-slideshow-prev,
    #topo_slider .dmx-slideshow-next {
        line-height: normal
    }

    .imob-intro-section {
        padding: 24px 0 48px;
        background: var(--surface);
        margin: 0
    }

    header.nav-wrap + section#topo3,
    header.nav-wrap + section#topo_slider,
    header.nav-wrap + dmx-if:has(#topo4),
    header.nav-wrap ~ dmx-if:has(#topo4) {
        margin-top: 0
    }

    /* dmx-if desligado deixa blocos vazios visíveis — esconder topo inativo (hero_wrapper usa dmx-show) */
    #topo_slider:not(:has(*)),
    #topo3:not(:has(*)),
    section[is="dmx-if"]:not(:has(*)):not(#topo1),
    div[is="dmx-if"]:not(:has(*)):not(#hero_wrapper) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important
    }

    dmx-if:has(#topo4.imob-hero-video),
    [is="dmx-if"]:has(#topo4.imob-hero-video) {
        display: block !important;
        width: 100%;
        line-height: 0
    }

    #topo3 .anim {
        opacity: 1;
        transform: none;
        animation: none
    }

    .imob-intro-grid {
        gap: 40px
    }

    .imob-intro-text {
        font-size: 1.05rem;
        line-height: 1.65;
        color: var(--text-700);
        margin-bottom: 24px
    }

    .imob-intro-cta {
        min-height: 48px
    }

    .imob-intro-img {
        border-radius: var(--r-xl);
        box-shadow: var(--sh-md)
    }

    /* TOPO 04 — vídeo full-bleed + cover (dmx-background-video injeta o <video> no irmão anterior) */
    [is="dmx-if"]:has(#topo4.imob-hero-video),
    div:has(> #topo4.imob-hero-video) {
        width: 100%;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important
    }

    div:has(> #topo4.imob-hero-video) {
        position: relative;
        display: block;
        overflow: hidden;
        min-height: clamp(320px, min(38vw, 52vh), 680px)
    }

    div:has(> #topo4.imob-hero-video) > div:first-child {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        z-index: 0;
        pointer-events: none
    }

    div:has(> #topo4.imob-hero-video) > div:first-child video,
    div:has(> #topo4.imob-hero-video) video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important
    }

    #topo4.imob-hero-video {
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: clamp(320px, min(38vw, 52vh), 680px);
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    #topo4 .bgvid-ov,
    #topo4 .imob-hero-video__overlay {
        position: absolute;
        inset: 0;
        z-index: 1
    }

    #topo4 .bgvid-ct,
    #topo4 .imob-hero-video__content {
        position: relative;
        z-index: 2;
        width: 100%
    }

    .imob-hero-video__overlay {
        background: rgba(15, 23, 42, .55)
    }

    .imob-hero-video__content {
        padding: 48px 24px
    }

    .imob-hero-video__inner {
        max-width: 720px;
        margin: 0 auto;
        text-align: center
    }

    .imob-hero-video__title {
        margin-bottom: 24px
    }

    .imob-hero-video__btn {
        min-height: 48px;
        padding: 14px 32px;
        font-size: 1rem
    }

    .hero::before {
        display: none
    }

    .hero::after {
        display: none
    }

    .hero-grid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-xl);
        align-items: center;
        position: relative;
        z-index: 1
    }

    .hero-img {
        border-radius: var(--r-xl);
        box-shadow: var(--sh-lg);
        width: 100%;
        object-fit: cover
    }

    .fcard {
        background: var(--surface);
        border-radius: var(--r-xl);
        border: 1px solid var(--border);
        box-shadow: var(--sh-lg);
        overflow: hidden;
        position: relative
    }

    .fcard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--brand), #818cf8, var(--accent))
    }

    .fcard-head {
        padding: 22px 28px 16px;
        border-bottom: 1px solid var(--border);
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-900);
        line-height: 1.4
    }

    .fcard-body {
        padding: 20px 28px 28px
    }

    .bgrid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-xl);
        align-items: center
    }

    .bgrid.rev {
        direction: rtl
    }

    .bgrid.rev>* {
        direction: ltr
    }

    .bimg {
        border-radius: var(--r-xl);
        box-shadow: var(--sh-lg);
        width: 100%;
        object-fit: cover
    }

    .sobre-nos-content,
    .bloco-content {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: clamp(1.2rem, 2.5vw, 2rem);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -.02em
    }

    .sobre-nos-content p,
    .bloco-content p {
        margin-bottom: 12px;
        font-size: 1rem;
        font-weight: 400
    }

    .sobre-nos-content,
    .sobre-nos-content p,
    .sobre-nos-content h1,
    .sobre-nos-content h2,
    .sobre-nos-content h3 {
        color: #fff !important
    }

    .bgvid {
        position: relative;
        min-height: 480px;
        display: flex;
        align-items: center;
        margin: 0
    }

    .bgvid.imob-hero-video {
        min-height: clamp(420px, 62vh, 680px)
    }

    .bgvid-ov {
        position: absolute;
        inset: 0;
        background: rgba(8, 18, 38, .60);
        z-index: 1
    }

    .bgvid-ct {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: var(--sp-xl) 24px;
        text-align: center
    }

    .fwrap {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: var(--sp-sm) 20px;
        margin-bottom: var(--sp-md);
        box-shadow: var(--sh-sm)
    }

    .bfil {
        width: 40px;
        height: 40px;
        border-radius: var(--r-md);
        border: 1.5px solid var(--border);
        background: var(--surface-2);
        color: var(--text-500);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: .88rem;
        flex-shrink: 0;
        transition: all var(--t)
    }

    .bfil:hover {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand)
    }

    .bfil.star {
        background: #fef3c7;
        color: #d97706;
        border-color: #fde68a
    }

    .bfil.star:hover {
        background: #f59e0b;
        color: #fff;
        border-color: #f59e0b
    }

    .imob-filter-wrap {
        max-width: 1040px;
        margin: 0 auto var(--sp-sm)
    }

    .imob-filter-toggle {
        text-align: center;
        margin-bottom: var(--sp-sm)
    }

    .imob-filter-open {
        font-size: .85rem;
        padding: 9px 20px
    }

    .imob-filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-sm)
    }

    .imob-filter-bar .form-select,
    .imob-filter-bar .form-control {
        padding: 8px 12px !important;
        font-size: .86rem !important;
        min-height: 38px;
        border-radius: var(--r-md) !important;
        background: var(--surface) !important;
        width: 100%
    }

    .imob-filter-field {
        flex: 1 1 110px;
        min-width: 100px
    }

    .imob-filter-field--nome {
        flex: 2 1 150px;
        min-width: 130px
    }

    .imob-filter-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0
    }

    .imob-filter-btn {
        width: 38px;
        height: 38px;
        border-radius: var(--r-md);
        border: 1.5px solid var(--border);
        background: var(--surface-2);
        color: var(--text-500);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        font-size: .82rem;
        transition: all var(--t);
        white-space: nowrap
    }

    .imob-filter-btn-label {
        display: none
    }

    .imob-filter-btn:hover {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand)
    }

    .imob-filter-btn.star {
        background: #fef3c7;
        color: #d97706;
        border-color: #fde68a
    }

    .imob-filter-btn.star:hover,
    .imob-filter-btn.star.active {
        background: #f59e0b;
        color: #fff;
        border-color: #f59e0b
    }

    @media(max-width:767px) {
        .imob-filter-wrap {
            margin-bottom: var(--sp-sm);
            padding: 0 2px
        }

        .imob-filter-open {
            width: 100%;
            max-width: 360px;
            justify-content: center;
            min-height: 44px;
            font-size: .9rem
        }

        .imob-filter-bar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 14px 12px
        }

        .imob-filter-field,
        .imob-filter-field--nome,
        .imob-filter-actions {
            grid-column: 1 / -1;
            min-width: 0;
            width: 100%
        }

        .imob-filter-field--half {
            grid-column: span 1
        }

        .imob-filter-bar .form-select,
        .imob-filter-bar .form-control {
            font-size: 16px !important;
            min-height: 44px;
            padding: 10px 14px !important
        }

        .imob-filter-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding-top: 8px;
            margin-top: 2px;
            border-top: 1px solid var(--border)
        }

        .imob-filter-btn {
            width: 100%;
            height: 44px;
            font-size: .78rem;
            font-weight: 600
        }

        .imob-filter-btn-label {
            display: inline
        }

        .icard-attrs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 10px
        }

        .iattr {
            font-size: .8rem
        }

        .icard-body {
            padding: 14px 16px 18px
        }

        .icard-price {
            font-size: 1.15rem
        }
    }

    @media(max-width:400px) {
        .imob-filter-bar {
            grid-template-columns: 1fr
        }

        .imob-filter-field--half {
            grid-column: 1 / -1
        }

        .imob-filter-btn-label {
            font-size: .72rem
        }
    }

    .cgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--sp-md)
    }

    .imoveis-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px
    }

    @media(min-width:576px) {
        .imoveis-grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(min-width:992px) {
        .imoveis-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 24px
        }
    }

    @media(min-width:1280px) {
        .imoveis-grid {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .icard {
        background: var(--surface);
        border-radius: var(--r-xl);
        border: 1px solid var(--border);
        box-shadow: var(--sh-sm);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform var(--t), box-shadow var(--t)
    }

    .icard:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh-lg)
    }

    .icard-img {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16/10
    }

    .icard-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s
    }

    .icard-wm {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(40%, 180px) !important;
        max-height: 50% !important;
        height: auto !important;
        object-fit: contain;
        opacity: .3;
        z-index: 1;
        pointer-events: none;
        user-select: none;
    }

    .icard:hover .icard-img img {
        transform: scale(1.05)
    }

    .icard-sold {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .45);
        z-index: 2
    }

    .icard-sold img {
        max-width: 80%;
        opacity: .9
    }

    .icard-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        padding: 4px 12px;
        border-radius: 100px;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        color: #fff;
        background: var(--brand);
        box-shadow: var(--sh-sm)
    }

    .icard-star {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #fbbf24;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .72rem;
        box-shadow: 0 2px 8px rgba(251, 191, 36, .4)
    }

    .icard-type {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 3px 10px;
        border-radius: 100px;
        margin-bottom: 6px
    }

    .icard-type.venda {
        background: #dbeafe;
        color: #1d4ed8
    }

    .icard-type.aluguel {
        background: #dcfce7;
        color: #15803d
    }

    .icard-body {
        padding: 16px 18px 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .icard-title {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-900);
        line-height: 1.3
    }

    .icard-addr {
        font-size: .82rem;
        color: var(--text-500);
        display: flex;
        align-items: center;
        gap: 5px
    }

    .icard-addr i {
        color: var(--brand);
        font-size: .75rem
    }

    .icard-attrs {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        margin: 4px 0
    }

    .iattr {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: .82rem;
        font-weight: 600;
        color: var(--text-700)
    }

    .iattr i {
        color: var(--brand);
        font-size: .78rem
    }

    .icard-price {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--brand)
    }

    .icard-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        margin-top: auto
    }

    .bcwpp {
        flex: 1;
        padding: 11px 14px;
        background: var(--wpp);
        color: #fff;
        border: none;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: .83rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all var(--t)
    }

    .bcwpp:hover {
        background: var(--wpp-dk);
        transform: translateY(-1px)
    }

    .bcview {
        padding: 11px 14px;
        background: var(--brand-lt);
        color: var(--brand);
        border: none;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: .83rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        transition: all var(--t)
    }

    .bcview:hover {
        background: var(--brand);
        color: #fff
    }

    .cgrid-of {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px
    }

    .ofertas-grid {
        margin-top: 8px
    }

    @media(min-width:576px) {
        .ofertas-grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(min-width:992px) {
        .ofertas-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 24px
        }
    }

    @media(min-width:1280px) {
        .ofertas-grid {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .oferta-card {
        border-radius: var(--r-xl);
        height: 100%
    }

    .oferta-card__media {
        aspect-ratio: 4/3
    }

    .oferta-card__body {
        padding: 16px 18px 18px;
        gap: 8px;
        display: flex;
        flex-direction: column;
        flex: 1
    }

    .oferta-card__price {
        font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--brand);
        text-align: left;
        order: -1;
        line-height: 1.2
    }

    .oferta-card__title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-900);
        text-align: left;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .oferta-card__desc {
        font-size: .86rem;
        color: var(--text-500);
        line-height: 1.55;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .oferta-card__action {
        margin-top: auto;
        padding-top: 8px
    }

    .oferta-card__btn {
        min-height: 48px;
        border-radius: var(--r-md);
        font-size: .88rem
    }

    .oferta-card__star {
        width: 32px;
        height: 32px;
        font-size: .75rem
    }

    .imob-section-head {
        text-align: center;
        margin-bottom: 28px
    }

    .imob-section-head .sec-title {
        margin-top: 8px
    }

    .imob-ofertas-section {
        padding: 48px 0;
        background: var(--surface)
    }

    .imob-ofertas-section--alt {
        background: var(--surface-2);
        border-top: 1px solid var(--border)
    }

    .imob-oferta-toolbar {
        margin-bottom: 28px
    }

    .imob-oferta-filter-panel {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
        padding: 16px 18px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        box-shadow: var(--sh-sm);
        max-width: 720px;
        margin: 0 auto
    }

    .imob-ofertas-section--alt .imob-oferta-filter-panel {
        background: var(--surface)
    }

    .imob-oferta-filter-field {
        flex: 1 1 220px;
        min-width: 180px;
        margin: 0
    }

    .imob-oferta-filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto
    }

    .citem {
        background: var(--surface);
        border-radius: var(--r-xl);
        border: 1px solid var(--border);
        box-shadow: var(--sh-sm);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform var(--t), box-shadow var(--t)
    }

    .citem:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh-lg)
    }

    .cimg {
        position: relative;
        overflow: hidden;
        aspect-ratio: 3/2
    }

    .cimg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s
    }

    .citem:hover .cimg img {
        transform: scale(1.05)
    }

    .cbadge {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 4px 12px;
        border-radius: 100px;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        color: #fff
    }

    .cstar {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #fbbf24;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .72rem;
        box-shadow: 0 2px 8px rgba(251, 191, 36, .4)
    }

    .cbody {
        padding: var(--sp-sm);
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .ctitle {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-900);
        text-align: center
    }

    .cdesc {
        font-size: .86rem;
        color: var(--text-500);
        line-height: 1.6;
        flex: 1
    }

    .cprice {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--brand);
        text-align: center
    }

    .bcwpp-full {
        width: 100%;
        padding: 10px;
        background: var(--wpp);
        color: #fff;
        border: none;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: .83rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all var(--t)
    }

    .bcwpp-full:hover {
        background: var(--wpp-dk)
    }

    .cta {
        background: linear-gradient(135deg, var(--brand) 0%, #3b82f6 50%, #6366f1 100%);
        border-radius: var(--r-xl);
        padding: var(--sp-xl) var(--sp-lg);
        text-align: center;
        position: relative;
        overflow: hidden
    }

    .cta::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/svg%3E") repeat
    }

    .cta-title {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: clamp(1.4rem, 3vw, 2.1rem);
        font-weight: 800;
        color: #fff;
        margin-bottom: var(--sp-md);
        line-height: 1.25;
        position: relative
    }

    .ytwrap {
        border-radius: var(--r-xl);
        overflow: hidden;
        box-shadow: var(--sh-lg);
        max-width: 760px;
        margin: 0 auto
    }

    .ytwrap iframe {
        border: none;
        display: block
    }

    .accordion-item {
        border: 1.5px solid var(--border) !important;
        border-radius: var(--r-lg) !important;
        overflow: hidden;
        margin-bottom: 10px;
        box-shadow: var(--sh-sm)
    }

    .accordion-button {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-weight: 700;
        font-size: .95rem;
        color: var(--text-900);
        background: var(--surface);
        padding: 18px 22px;
        border-radius: var(--r-lg) !important
    }

    .accordion-button:not(.collapsed) {
        color: var(--brand);
        background: var(--brand-lt);
        box-shadow: none
    }

    .accordion-button:focus {
        box-shadow: none !important
    }

    .accordion-body {
        padding: 0 22px 20px;
        font-size: .93rem;
        color: var(--text-500);
        line-height: 1.7
    }

    .mapw iframe,
    .mapw>* {
        border-radius: var(--r-xl) !important;
        overflow: hidden;
        box-shadow: var(--sh-md)
    }

    .gslide img {
        border-radius: var(--r-lg);
        box-shadow: var(--sh-md);
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transition: transform .4s
    }

    .gslide img:hover {
        transform: scale(1.03)
    }

    .modal-content {
        border-radius: var(--r-xl) !important;
        border: 1px solid var(--border) !important;
        overflow: hidden;
        box-shadow: var(--sh-lg)
    }

    .modal-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        padding: 20px 24px
    }

    .modal-header img {
        height: 52px;
        object-fit: contain
    }

    .modal-body {
        padding: 24px
    }

    .modal-footer {
        border-top: 1px solid var(--border);
        padding: 16px 24px
    }

    .mok-icon {
        font-size: 3.5rem;
        color: #16a34a;
        display: block;
        margin-bottom: 14px
    }

    .mok-title {
        font-family: 'Bricolage Grotesque', 'Sora', sans-serif;
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--text-900);
        margin-bottom: 6px
    }

    .mok-sub {
        font-size: .9rem;
        color: var(--text-500)
    }

    .btn-mclose {
        width: 100%;
        padding: 12px;
        border-radius: var(--r-md);
        background: var(--surface-3);
        border: 1px solid var(--border);
        color: var(--text-700);
        font-weight: 700;
        font-size: .9rem;
        cursor: pointer;
        transition: background var(--t)
    }

    .btn-mclose:hover {
        background: var(--border)
    }

    .foot {
        padding: var(--sp-lg) 0 var(--sp-md)
    }

    .foot-in {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 24px;
        text-align: center
    }

    .foot-logo {
        height: 56px;
        object-fit: contain;
        margin: 0 auto var(--sp-sm)
    }

    .foot-addr {
        font-size: .9rem;
        color: rgba(255, 255, 255, .65);
        line-height: 1.65;
        margin-bottom: var(--sp-md)
    }

    .foot-slabel {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .45);
        margin-bottom: 12px
    }

    .srow {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center
    }

    .sbtn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .10);
        color: rgba(255, 255, 255, .75);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
        cursor: pointer;
        border: none;
        transition: all var(--t)
    }

    .sbtn:hover {
        background: rgba(255, 255, 255, .22);
        color: #fff;
        transform: translateY(-2px)
    }

    .foot-div {
        height: 1px;
        background: rgba(255, 255, 255, .10);
        margin: var(--sp-md) 0 var(--sp-sm)
    }

    .foot-copy {
        font-size: .8rem;
        color: rgba(255, 255, 255, .4)
    }

    .foot-copy a {
        color: rgba(255, 255, 255, .6);
        text-decoration: none;
        transition: color var(--t)
    }

    .foot-copy a:hover {
        color: #fff
    }

    .fwpp {
        position: fixed;
        bottom: 26px;
        right: 26px;
        z-index: 9999;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: var(--wpp);
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 28px rgba(37, 211, 102, .45);
        transition: all var(--t);
        animation: wpa 2.8s ease-in-out infinite
    }

    .fwpp:hover {
        transform: scale(1.12);
        box-shadow: 0 10px 36px rgba(37, 211, 102, .55);
        animation: none
    }

    @keyframes wpa {

        0%,
        100% {
            box-shadow: 0 6px 28px rgba(37, 211, 102, .45)
        }

        50% {
            box-shadow: 0 6px 28px rgba(37, 211, 102, .45), 0 0 0 14px rgba(37, 211, 102, .10)
        }
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(22px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .anim {
        animation: fadeUp .6s ease both
    }

    .anim-d1 {
        animation-delay: .10s
    }

    .anim-d2 {
        animation-delay: .20s
    }

    .anim-d3 {
        animation-delay: .30s
    }

    @media(max-width:1199px) {
        :root {
            --sp-xl: 72px;
            --sp-lg: 52px
        }
    }

    @media(max-width:991px) {
        :root {
            --sp-xl: 60px;
            --sp-lg: 44px;
            --sp-md: 28px
        }

        .hero-grid,
        .bgrid {
            grid-template-columns: 1fr;
            gap: var(--sp-lg)
        }

        .bgrid.rev {
            direction: ltr
        }

        .cta {
            padding: var(--sp-md)
        }

        .icard-actions {
            grid-template-columns: 1fr
        }
    }

    @media(max-width:767px) {
        :root {
            --sp-xl: 52px;
            --sp-lg: 36px;
            --sp-md: 24px
        }

        .nav-links {
            display: none
        }

        .cgrid,
        .cgrid-of {
            gap: var(--sp-sm)
        }

        .sec-hd {
            margin-bottom: var(--sp-sm)
        }
    }

    @media(max-width:576px) {
        :root {
            --sp-xl: 44px;
            --sp-lg: 32px;
            --sp-md: 20px;
            --sp-sm: 14px
        }

        .hero {
            padding: var(--sp-lg) 0
        }

        .cgrid,
        .cgrid-of {
            grid-template-columns: 1fr
        }

        .cta {
            padding: var(--sp-md) var(--sp-sm)
        }

        .foot {
            padding: var(--sp-md) 0 var(--sp-sm)
        }

        .fcard-head,
        .fcard-body {
            padding-left: var(--sp-sm);
            padding-right: var(--sp-sm)
        }

        .btn-brand,
        .btn-outline {
            width: 100%;
            justify-content: center
        }
    }

    /* ═══ SKELETON LOADING — imob.html ═════════════════════════════
   dmx-show="sc_empresa.status=='idle'||sc_empresa.status=='executing'"
   Some automaticamente quando o Wappler preenche os dados.
   ══════════════════════════════════════════════════════════════ */
    @keyframes sk-shimmer {
        0% {
            background-position: -600px 0
        }

        100% {
            background-position: 600px 0
        }
    }

    .sk {
        background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
        background-size: 600px 100%;
        animation: sk-shimmer 1.4s ease infinite;
        border-radius: var(--r-md)
    }

    .sk-line {
        height: 14px;
        margin-bottom: 8px
    }

    .sk-line.w25 {
        width: 25%
    }

    .sk-line.w40 {
        width: 40%
    }

    .sk-line.w60 {
        width: 60%
    }

    .sk-line.w80 {
        width: 80%
    }

    .sk-line.w100 {
        width: 100%
    }

    .sk-title {
        height: 22px;
        width: 55%;
        margin-bottom: 12px
    }

    .sk-btn {
        height: 44px;
        border-radius: var(--r-lg)
    }

    .sk-tag {
        height: 20px;
        width: 72px;
        border-radius: 100px;
        display: inline-block
    }

    .sk-icard {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        overflow: hidden
    }

    .sk-icard-img {
        aspect-ratio: 4/3
    }

    .sk-icard-body {
        padding: 16px
    }

    .sk-icard-attrs {
        display: flex;
        gap: 8px;
        margin: 10px 0
    }

    .sk-icard-attr {
        height: 22px;
        width: 64px;
        border-radius: 100px
    }

    @media(max-width:767px) {
        #sk_hero>div,
        #sk_hero .imob-hero-skeleton {
            grid-template-columns: 1fr
        }

        #sk_hero>div>div:first-child,
        #sk_hero .imob-hero-skeleton__img {
            display: none
        }

        #sk_produtos>div>div:last-child,
        #sk_ofertas>div>div:last-child {
            grid-template-columns: 1fr
        }

        #sk_produtos .sk-icard:nth-child(n+2),
        #sk_ofertas .sk-icard:nth-child(n+2) {
            display: none
        }

        #sk_galeria>div:last-child {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:576px) {

        #sk_produtos .sk-icard:nth-child(n+2),
        #sk_ofertas .sk-icard:nth-child(n+2) {
            display: none
        }
    }

    /* ═══ BUSCA HERO (portal imobiliário) ═══════════════════════════ */
    .imob-listings-section {
        margin-top: 0
    }

    .imob-search-hero {
        background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
        padding: 32px 0 28px;
        border-bottom: 1px solid var(--border);
        margin-top: 0
    }

    .imob-search-hero-head {
        text-align: center;
        margin-bottom: 24px
    }

    .imob-search-title {
        font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
        font-size: clamp(1.5rem, 4vw, 2rem);
        font-weight: 800;
        color: var(--text-900);
        letter-spacing: -.02em;
        margin-bottom: 6px
    }

    .imob-search-sub {
        font-size: .95rem;
        color: var(--text-500);
        max-width: 520px;
        margin: 0 auto
    }

    .imob-search-panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        box-shadow: var(--sh-md);
        padding: 20px;
        max-width: 1100px;
        margin: 0 auto
    }

    .imob-search-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px
    }

    .imob-search-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0
    }

    .imob-search-item--wide {
        grid-column: span 2
    }

    .imob-search-label {
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-500);
        display: flex;
        align-items: center;
        gap: 6px
    }

    .imob-search-label i {
        color: var(--brand);
        font-size: .75rem
    }

    .imob-search-input {
        min-height: 48px !important;
        font-size: .92rem !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--r-md) !important;
        background: var(--surface) !important;
        transition: border-color var(--t), box-shadow var(--t) !important
    }

    .imob-search-input:focus {
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px rgba(92, 40, 212, .12) !important
    }

    .imob-search-extras {
        grid-column: 1 / -1
    }

    .imob-search-extras-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 14px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed var(--border)
    }

    @media(min-width:768px) {
        .imob-search-extras.collapse {
            display: block !important;
            visibility: visible !important;
            height: auto !important
        }

        .imob-search-extras-grid {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
            grid-column: 1 / -1
        }

        .imob-search-grid {
            grid-template-columns: repeat(6, 1fr)
        }

        .imob-search-item:nth-child(1) { grid-column: span 2 }
        .imob-search-item:nth-child(2) { grid-column: span 1 }
        .imob-search-item:nth-child(3) { grid-column: span 1 }
        .imob-search-item:nth-child(4) { grid-column: span 1 }
        .imob-search-extras { grid-column: 1 / -1 }
        .imob-search-extras-grid {
            grid-template-columns: 1fr 2fr 1fr;
            gap: 14px
        }
        .imob-search-item--collapse { display: none !important }
    }

    .imob-search-more-toggle {
        width: 100%;
        min-height: 48px;
        border: 1px dashed var(--border);
        border-radius: var(--r-md);
        background: var(--surface-2);
        color: var(--text-700);
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer
    }

    .imob-search-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border)
    }

    .imob-search-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 20px;
        border-radius: var(--r-md);
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text-700);
        transition: all var(--t)
    }

    .imob-search-action:hover {
        border-color: var(--brand);
        color: var(--brand)
    }

    .imob-search-action--star {
        background: #fef9c3;
        border-color: #fde047;
        color: #a16207
    }

    .imob-search-action--star.active,
    .imob-search-action--star:hover {
        background: #facc15;
        border-color: #eab308;
        color: #713f12
    }

    .imob-listings-body {
        padding: 40px 24px 60px
    }

    .imob-results-head {
        margin-bottom: 28px
    }

    .imob-results-title {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
        margin-top: 8px
    }

    .imob-empty {
        text-align: center;
        padding: 48px 24px;
        color: var(--text-500);
        font-size: .95rem;
        background: var(--surface);
        border-radius: var(--r-lg);
        border: 1px dashed var(--border)
    }

    /* ═══ CARDS IMÓVEL (Vivareal-style) ═════════════════════════════ */
    .imovel-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        overflow: hidden;
        transition: transform var(--t), box-shadow var(--t);
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .imovel-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg)
    }

    .imovel-card__media {
        aspect-ratio: 4/3
    }

    .imovel-card__body {
        padding: 16px 18px 18px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .imovel-card__price {
        font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--brand);
        order: -1;
        line-height: 1.2
    }

    .imovel-card__title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-900);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .imovel-card__addr {
        font-size: .82rem;
        color: var(--text-500);
        display: flex;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.4
    }

    .imovel-card__addr i {
        color: var(--brand);
        margin-top: 2px;
        flex-shrink: 0
    }

    .imovel-card__attrs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        padding: 10px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        margin: 4px 0
    }

    .imovel-card__attrs .iattr {
        font-size: .82rem;
        font-weight: 600;
        color: var(--text-700);
        gap: 5px
    }

    .imovel-card__attrs .iattr i {
        color: var(--text-500);
        font-size: .78rem
    }

    .imovel-card__actions {
        margin-top: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .imovel-card__actions .bcwpp,
    .imovel-card__actions .bcview {
        min-height: 48px;
        font-size: .84rem;
        border-radius: var(--r-md)
    }

    .imovel-card__actions .bcview {
        color: #fff !important
    }

    .icard-star {
        width: 32px;
        height: 32px;
        font-size: .75rem
    }

    /* ═══ FOOTER MULTI-COLUNA ═══════════════════════════════════════ */
    .foot-vivareal {
        padding: 48px 0 0;
        text-align: left
    }

    .foot-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 32px
    }

    @media(min-width:768px) {
        .foot-grid {
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 40px
        }
    }

    .foot-col--brand .foot-logo {
        margin: 0 0 16px
    }

    .foot-col--brand .foot-addr {
        text-align: left;
        margin-bottom: 16px
    }

    .foot-contact-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 18px;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--r-md);
        color: #fff;
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer;
        transition: background var(--t)
    }

    .foot-contact-btn:hover {
        background: rgba(255, 255, 255, .22)
    }

    .foot-nav {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .foot-nav a {
        color: rgba(255, 255, 255, .75);
        font-size: .9rem;
        min-height: 36px;
        display: flex;
        align-items: center;
        transition: color var(--t)
    }

    .foot-nav a:hover {
        color: #fff
    }

    .foot-social {
        justify-content: flex-start
    }

    .foot-bottom {
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding: 20px 24px;
        text-align: center
    }

    .foot-bottom .foot-copy {
        margin: 0
    }

    /* ═══ MOBILE — busca e cards ════════════════════════════════════ */
    @media(max-width:767px) {
        .imob-search-hero {
            padding: 24px 0 20px
        }

        .imob-search-panel {
            padding: 16px;
            border-radius: var(--r-lg)
        }

        .imob-search-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .imob-search-item:nth-child(1),
        .imob-search-item:nth-child(2),
        .imob-search-item:nth-child(3) {
            grid-column: 1 / -1
        }

        .imob-search-item--collapse {
            grid-column: 1 / -1
        }

        .imob-search-extras-grid {
            grid-template-columns: 1fr;
            gap: 12px
        }

        .imob-search-item--wide {
            grid-column: 1 / -1
        }

        .imob-search-input {
            font-size: 16px !important
        }

        .imob-search-footer {
            flex-direction: column
        }

        .imob-search-action {
            width: 100%
        }

        .imob-listings-body {
            padding: 28px 16px 48px
        }

        .imovel-card__actions {
            grid-template-columns: 1fr
        }

        .imovel-card__attrs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px
        }

        .imob-hero-wrap {
            padding: 0
        }

        .imob-hero {
            padding: 24px 0 0
        }

        .imob-hero-skeleton {
            padding: 24px 0 0
        }

        .imob-hero-skeleton {
            grid-template-columns: 1fr
        }

        .imob-hero-skeleton__img {
            display: none
        }

        .imob-hero-grid {
            grid-template-columns: 1fr;
            gap: 20px
        }

        .imob-hero-media {
            order: -1
        }

        .imob-hero-form__head {
            padding: 16px 18px 12px;
            font-size: 1.05rem
        }

        .imob-hero-form__body {
            padding: 14px 18px 20px
        }

        .imob-field-input {
            font-size: 16px !important
        }

        .imob-intro-section {
            padding: 20px 0 28px
        }

        .imob-hero-video,
        .bgvid.imob-hero-video,
        #topo4.imob-hero-video,
        div:has(> #topo4.imob-hero-video) {
            min-height: clamp(280px, min(34vw, 48vh), 520px)
        }

        div:has(> #topo4.imob-hero-video) > div:first-child video,
        div:has(> #topo4.imob-hero-video) video {
            transform: none !important
        }

        .imob-intro-grid {
            grid-template-columns: 1fr;
            gap: 24px
        }

        .imob-ofertas-section {
            padding: 32px 0
        }

        .imob-oferta-filter-panel {
            flex-direction: column;
            align-items: stretch;
            padding: 14px
        }

        .imob-oferta-filter-actions {
            width: 100%;
            margin-left: 0
        }

        .imob-oferta-filter-actions .imob-search-action {
            flex: 1
        }
    }