/* guia.ejs */
:root {
    --brand: #ea580c;
    --brand-lt: #ffedd5;
    --brand-dk: #c2410c;
    --apu-pri: #ea580c;
    --apu-sec: #c2410c;
}

:root {
            --apu-pri: var(--cor-primaria, #1a3c5e);
            --apu-sec: var(--cor-secundaria, #0098DA);
            --apu-accent: #10b981;
            --apu-surface: #ffffff;
            --apu-bg: #f6f8fb;
            --apu-border: #e5eaf2;
            --apu-text: #1e293b;
            --apu-muted: #64748b;
            --apu-card-r: 16px;
            --apu-font-display: 'Bricolage Grotesque', sans-serif;
            --apu-font-body: 'DM Sans', sans-serif;
            --apu-shadow: 0 4px 24px rgba(0, 0, 0, .07);
            --apu-shadow-hover: 0 12px 40px rgba(0, 0, 0, .13)
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        body {
            font-family: var(--apu-font-body);
            background: var(--apu-bg);
            color: var(--apu-text);
            -webkit-font-smoothing: antialiased
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--apu-font-display)
        }

        .sec-pad {
            padding: 72px 0
        }

        .sec-pad-sm {
            padding: 48px 0
        }

        .sec-title {
            font-family: var(--apu-font-display);
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 700;
            color: var(--apu-text);
            margin-bottom: 0.4rem
        }

        .sec-subtitle {
            font-size: 1rem;
            color: var(--apu-muted);
            margin-bottom: 2rem
        }

        .sec-divider {
            width: 48px;
            height: 4px;
            border-radius: 99px;
            background: var(--apu-sec);
            margin: 0 auto 2.5rem
        }

        .apu-navbar {
            background: var(--apu-surface);
            border-bottom: 1px solid var(--apu-border);
            padding: 0.5rem 0;
            box-shadow: 0 2px 16px rgba(0, 0, 0, .05)
        }

        .apu-navbar .navbar-brand img {
            max-height: 72px;
            object-fit: contain;
            transition: transform .3s
        }

        .apu-navbar .navbar-brand img:hover {
            transform: scale(1.03)
        }

        .apu-hero {
            position: relative;
            overflow: hidden;
            padding: 56px 0 48px
        }

        .apu-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--apu-pri) 0%, color-mix(in srgb, var(--apu-pri) 70%, #000) 100%);
            z-index: 0
        }

        .apu-hero::after {
            content: '';
            position: absolute;
            top: -60px;
            right: -80px;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .04);
            z-index: 0
        }

        .apu-hero>* {
            position: relative;
            z-index: 1
        }

        .apu-card {
            background: var(--apu-surface);
            border-radius: var(--apu-card-r);
            border: 1px solid var(--apu-border);
            box-shadow: var(--apu-shadow);
            overflow: hidden;
            transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
            display: flex;
            flex-direction: column;
            height: 100%
        }

        .apu-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--apu-shadow-hover)
        }

        .gcard-img-wrap {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4/3;
            background: var(--apu-bg)
        }

        .gcard-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s cubic-bezier(.22, .61, .36, 1)
        }

        .apu-card:hover .gcard-img-wrap img {
            transform: scale(1.05)
        }

        .gcard-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 10px;
            border-radius: 99px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: .04em;
            color: #fff;
            backdrop-filter: blur(6px);
            background: rgba(0, 0, 0, .35)
        }

        .gcard-badge-dest {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f1db42;
            color: #1a1a1a;
            font-size: 0.75rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .18)
        }

        .gcard-body {
            padding: 1rem 1.1rem 0.8rem;
            flex: 1;
            display: flex;
            flex-direction: column
        }

        .gcard-title {
            font-family: var(--apu-font-display);
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--apu-text);
            text-align: center;
            margin-bottom: 0.4rem
        }

        .gcard-desc {
            font-size: 0.85rem;
            color: var(--apu-muted);
            text-align: center;
            line-height: 1.5;
            flex: 1;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical
        }

        .apu-amenity-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin: 0.6rem 0
        }

        .apu-amenity {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.72rem;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 99px;
            background: var(--apu-bg);
            border: 1px solid var(--apu-border);
            color: var(--apu-text)
        }

        .apu-amenity i {
            font-size: 0.7rem
        }

        .gcard-actions {
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--apu-border);
            background: var(--apu-bg);
            display: flex;
            gap: 8px;
            align-items: center
        }

        .apu-btn-wpp {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 18px;
            border-radius: 99px;
            border: none;
            background: #25D366;
            color: #fff;
            font-family: var(--apu-font-body);
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            transition: filter .2s, transform .15s
        }

        .apu-btn-wpp:hover {
            filter: brightness(1.08);
            transform: translateY(-1px)
        }

        .apu-btn-pri {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 16px;
            border-radius: 99px;
            border: none;
            background: var(--apu-pri);
            color: #fff;
            font-family: var(--apu-font-body);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: filter .2s, transform .15s
        }

        .apu-btn-pri:hover {
            filter: brightness(1.1);
            transform: translateY(-1px)
        }

        .apu-btn-sec {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 16px;
            border-radius: 99px;
            border: none;
            background: var(--apu-sec);
            color: #fff;
            font-family: var(--apu-font-body);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: filter .2s
        }

        .apu-btn-sec:hover {
            filter: brightness(1.1)
        }

        .gcard-socials {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            padding: 8px 0 4px
        }

        .gsoc-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid var(--apu-border);
            background: var(--apu-surface);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s;
            color: var(--apu-text)
        }

        .gsoc-btn:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, .12)
        }

        .gsoc-wpp {
            background: #25D366;
            color: #fff;
            border-color: #25D366
        }

        .gsoc-tel {
            background: #64748b;
            color: #fff;
            border-color: #64748b
        }

        .gsoc-tg {
            background: #2CA5E0;
            color: #fff;
            border-color: #2CA5E0
        }

        .gsoc-ig {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            color: #fff;
            border-color: transparent
        }

        .gsoc-fb {
            background: #1877f2;
            color: #fff;
            border-color: #1877f2
        }

        .gsoc-site {
            background: var(--apu-pri);
            color: #fff;
            border-color: var(--apu-pri)
        }

        .gsoc-mail {
            background: var(--apu-sec);
            color: #fff;
            border-color: var(--apu-sec)
        }

        .gsoc-loc {
            background: #FBBC04;
            color: #1a1a1a;
            border-color: #FBBC04
        }

        .apu-filter-bar {
            background: var(--apu-surface);
            border: 1px solid var(--apu-border);
            border-radius: var(--apu-card-r);
            padding: 1.1rem 1.2rem;
            box-shadow: var(--apu-shadow);
            margin-bottom: 2rem
        }

        .apu-filter-bar select,
        .apu-filter-bar .form-select {
            border-radius: 99px;
            border: 1.5px solid var(--apu-border);
            padding: 0.5rem 1rem;
            font-family: var(--apu-font-body);
            font-size: 0.88rem;
            background-color: var(--apu-bg);
            color: var(--apu-text);
            transition: border-color .2s
        }

        .apu-filter-bar select:focus {
            border-color: var(--apu-sec);
            box-shadow: none
        }

        .apu-filter-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.85rem;
            transition: transform .2s, filter .2s
        }

        .apu-filter-btn:hover {
            transform: scale(1.1);
            filter: brightness(1.08)
        }

        .apu-filter-btn.reset {
            background: var(--apu-sec);
            color: #fff
        }

        .apu-filter-btn.fav {
            background: #f1db42;
            color: #1a1a1a
        }

        .hcard-img-wrap {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16/9;
            background: var(--apu-bg)
        }

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

        .apu-card:hover .hcard-img-wrap img {
            transform: scale(1.05)
        }

        .apu-accordion .accordion-button {
            font-family: var(--apu-font-display);
            font-weight: 600;
            font-size: 0.95rem;
            background: var(--apu-surface);
            color: var(--apu-text);
            border-radius: var(--apu-card-r) !important
        }

        .apu-accordion .accordion-button:not(.collapsed) {
            color: var(--apu-pri);
            background: color-mix(in srgb, var(--apu-sec) 8%, white);
            box-shadow: none
        }

        .apu-accordion .accordion-item {
            border: 1px solid var(--apu-border);
            border-radius: var(--apu-card-r) !important;
            margin-bottom: 0.5rem;
            overflow: hidden
        }

        .apu-modal {
            border-radius: var(--apu-card-r);
            overflow: hidden;
            border: none
        }

        .apu-modal-header {
            background: var(--apu-pri);
            padding: 1rem 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: none
        }

        .apu-modal-logo {
            max-height: 60px;
            object-fit: contain
        }

        .apu-modal-subtitle {
            background: color-mix(in srgb, var(--apu-sec) 10%, white);
            border-bottom: 1px solid var(--apu-border)
        }

        .apu-label {
            font-family: var(--apu-font-body);
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--apu-muted);
            text-transform: uppercase;
            letter-spacing: .05em;
            margin-bottom: 4px;
            display: block
        }

        .apu-input {
            border-radius: 10px;
            border: 1.5px solid var(--apu-border);
            font-family: var(--apu-font-body);
            font-size: 0.9rem;
            padding: 0.55rem 0.9rem;
            transition: border-color .2s
        }

        .apu-input:focus {
            border-color: var(--apu-sec);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--apu-sec) 15%, transparent)
        }

        .apu-select {
            border-radius: 10px;
            border: 1.5px solid var(--apu-border);
            font-family: var(--apu-font-body)
        }

        .apu-fieldset {
            border: 1.5px solid var(--apu-border);
            border-radius: 12px;
            padding: 1rem
        }

        .apu-fieldset-legend {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--apu-muted);
            margin-bottom: 0.6rem
        }

        .apu-contact-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 11px 16px;
            border-radius: 12px;
            border: none;
            font-family: var(--apu-font-body);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity .2s, transform .15s
        }

        .apu-contact-btn:hover {
            opacity: .88;
            transform: translateY(-1px)
        }

        .apu-success-icon {
            animation: successPop .4s cubic-bezier(.22, .61, .36, 1)
        }

        @keyframes successPop {
            from {
                transform: scale(.6);
                opacity: 0
            }

            to {
                transform: scale(1);
                opacity: 1
            }
        }

        .swiper-slide img {
            border-radius: 10px;
            object-fit: cover;
            aspect-ratio: 4/3;
            width: 100%
        }

        .apu-footer {
            padding: 48px 0 24px;
            color: #fff
        }

        .apu-footer-logo {
            max-height: 60px;
            object-fit: contain;
            margin-bottom: 1rem
        }

        .apu-footer-social-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, .3);
            background: rgba(255, 255, 255, .1);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            cursor: pointer;
            transition: background .2s, transform .2s;
            margin: 3px
        }

        .apu-footer-social-btn:hover {
            background: rgba(255, 255, 255, .25);
            transform: scale(1.12)
        }

        .apu-footer-divider {
            border-color: rgba(255, 255, 255, .15);
            margin: 1.5rem 0 1rem
        }

        .apu-footer-copy {
            font-size: 0.82rem;
            color: rgba(255, 255, 255, .6)
        }

        .apu-footer-copy a {
            color: rgba(255, 255, 255, .85);
            text-decoration: none
        }

        .apu-footer-copy a:hover {
            color: #fff
        }

        .apu-fab {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #25D366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 6px 24px rgba(37, 211, 102, .4);
            cursor: pointer;
            border: none;
            z-index: 1050;
            transition: transform .25s, box-shadow .25s
        }

        .apu-fab:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 32px rgba(37, 211, 102, .5)
        }

        .apu-hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 28px;
            border-radius: 99px;
            border: none;
            font-family: var(--apu-font-display);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: filter .2s, transform .2s;
            color: #fff
        }

        .apu-hero-cta:hover {
            filter: brightness(1.1);
            transform: translateY(-2px)
        }

        .bgrid {
            --bs-gutter-x: 1.5rem;
            --bs-gutter-y: 1.5rem
        }

        [dmx-animate-enter] {
            animation-fill-mode: both
        }

        @media(max-width:576px) {
            .sec-pad {
                padding: 48px 0
            }

            .gcard-actions {
                flex-direction: column
            }
        }

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

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

        .sk {
            background: linear-gradient(90deg, #edf0f5 25%, #f6f8fb 50%, #edf0f5 75%);
            background-size: 600px 100%;
            animation: sk-shimmer 1.4s ease infinite;
            border-radius: 8px
        }

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

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

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

        .sk-line.w55 {
            width: 55%
        }

        .sk-line.w70 {
            width: 70%
        }

        .sk-line.w85 {
            width: 85%
        }

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

        .sk-title {
            height: 20px;
            width: 55%;
            margin-bottom: 10px
        }

        .sk-btn {
            height: 40px;
            border-radius: 99px
        }

        /* card base */
        .sk-card {
            background: #fff;
            border: 1px solid var(--apu-border);
            border-radius: var(--apu-card-r);
            overflow: hidden;
            display: flex;
            flex-direction: column
        }

        /* gcard — aspect 4/3, usado em ofertas e guia */
        .sk-gcard-img {
            aspect-ratio: 4/3
        }

        /* hcard — aspect 16/9, usado em produtos */
        .sk-hcard-img {
            aspect-ratio: 16/9
        }

        .sk-card-body {
            padding: 1rem 1.1rem 0.8rem
        }

        /* social icon circles */
        .sk-socials {
            display: flex;
            gap: 6px;
            justify-content: center;
            padding: 8px 0 4px;
            flex-wrap: wrap
        }

        .sk-soc {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            flex-shrink: 0
        }

        /* amenidades pills */
        .sk-amenities {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 8px 0
        }

        .sk-amenity {
            height: 22px;
            width: 68px;
            border-radius: 99px
        }

        /* galeria slide */
        .sk-gslide {
            aspect-ratio: 4/3;
            border-radius: 10px
        }

        @media(max-width:767px) {
            #sk_hero .sk-hero-img-col {
                display: none
            }

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

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

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

        @media(max-width:576px) {

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

/* Overrides — design system unificado */
body {
    font-family: 'Inter', var(--apu-font-body), system-ui, sans-serif;
}

.imob-hero-form.apu-card {
    box-shadow: var(--apu-shadow);
    border: 1px solid var(--apu-border);
}

.imob-hero-form.apu-card .imob-hero-form__head {
    padding: 0;
    background: transparent;
}

.imob-hero-form.apu-card .imob-hero-form__body {
    padding: 0;
}

.imob-search-hero--compact {
    padding-bottom: 0;
}

.imob-search-hero--compact .imob-search-hero-head {
    margin-bottom: var(--sp-md);
}

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

#guiacomercial {
    overflow-x: clip;
}

#guiacomercial .c-xl {
    min-width: 0;
}

.guia-search-panel {
    max-width: 720px;
}

.guia-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guia-search-grid .imob-search-item {
    min-width: 0;
}

@media (min-width: 768px) {
    #collapse_guia.guia-search-panel .guia-search-grid .imob-search-item:nth-child(n) {
        grid-column: auto;
    }
}

/* Cards guia comercial — padrão oferta-card + redes sociais */
.guia-card {
    height: 100%;
}

.guia-card__media {
    aspect-ratio: 4/3;
}

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

.guia-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;
}

.guia-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;
}

.guia-card__socials {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--border);
    justify-content: center;
    align-items: center;
}

.guia-card__socials .gsoc-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    cursor: pointer;
    transition: transform var(--t), box-shadow var(--t);
}

.guia-card__socials .gsoc-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-sm);
}

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

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

.guia-com-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 8px;
    width: 100%;
    min-width: 0;
}

.guia-com-grid > .guia-card {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 576px) {
    .guia-com-grid > .guia-card {
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 992px) {
    .guia-com-grid > .guia-card {
        flex: 1 1 calc(33.333% - 16px);
        max-width: calc(33.333% - 16px);
    }
}

@media (max-width: 767.98px) {
    #sk_guia > .c-xl > div:last-child,
    #sk_ofertas > .c-xl > div:last-child {
        grid-template-columns: 1fr;
    }

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

    .guia-search-grid {
        grid-template-columns: 1fr;
    }

    #collapse_guia .imob-search-footer {
        flex-direction: column;
    }

    #collapse_guia .imob-search-action {
        width: 100%;
        justify-content: center;
    }
}