/* =========================================================
   COSTA MODERNA V47
   RESTAURA ÚNICAMENTE EL LAYOUT DEL DETALLE
   NO MODIFICA EL INTERIOR DEL FORMULARIO NI DEL ASESOR
   ========================================================= */


/* ---------------------------------------------------------
   CABECERA COMPACTA
   --------------------------------------------------------- */

.modern-detail-page
.modern-detail-intro {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto !important;
    align-items: end !important;
    gap: 28px !important;

    padding-top: 22px !important;
    padding-bottom: 14px !important;
}


.modern-detail-page
.modern-back-link {
    display: inline-block;
    margin-bottom: 10px !important;
}


.modern-detail-page
.modern-detail-code {
    display: block;
    margin-bottom: 6px !important;
}


.modern-detail-page
.modern-detail-heading {
    min-width: 0;
}


.modern-detail-page
.modern-detail-heading h1 {
    max-width: 920px !important;
    margin: 0 !important;

    font-size:
        clamp(
            38px,
            4.15vw,
            64px
        ) !important;

    line-height: .98 !important;
    letter-spacing: -.045em !important;
}


.modern-detail-page
.modern-detail-location {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}


.modern-detail-page
.modern-detail-location svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px;
}


.modern-detail-page
.modern-detail-value-tags-v12 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px !important;
}


.modern-value-tag-v12 {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;
    padding: 7px 11px;

    border: 1px solid #dde7f3;
    border-radius: 999px;

    color: #36506d;
    background: rgba(255, 255, 255, .86);

    box-shadow:
        0 6px 18px
        rgba(24, 62, 108, .05);

    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}


.modern-value-tag-v12 i {
    display: grid;
    place-items: center;

    width: 21px;
    height: 21px;
    flex: 0 0 21px;

    overflow: hidden;
    border-radius: 7px;

    color: #155eef;
    background: #edf4ff;
}


.modern-value-tag-v12 i svg,
.modern-detail-page
.modern-detail-value-tags-v12
svg {
    display: block;

    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;

    flex: 0 0 15px;
}


.modern-value-tag-view-v12 {
    color: #fff;
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #1764ef,
            #0d55d7
        );

    box-shadow:
        0 9px 22px
        rgba(21, 94, 239, .20);
}


.modern-value-tag-view-v12 i {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}


.modern-value-tag-amenity-v12 i {
    color: #12a96d;
    background: #eafaf4;
}


/* Precio compacto y alineado con la cabecera. */
.modern-detail-page
.modern-detail-price {
    display: block !important;
    min-width: auto !important;
    padding: 0 0 7px !important;
    text-align: right !important;
    white-space: nowrap;
}


.modern-detail-page
.modern-detail-price span {
    color:
        var(
            --modern-detail-price-color,
            #155eef
        ) !important;

    font-size:
        clamp(
            20px,
            2vw,
            28px
        ) !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   LAYOUT PRINCIPAL
   GALERÍA IZQUIERDA + ASESOR DERECHA
   --------------------------------------------------------- */

.modern-detail-page
.modern-detail-main-v12 {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 380px)
        !important;

    align-items: start !important;

    gap: 22px !important;

    margin-top: 8px !important;
}


.modern-detail-page
.modern-detail-left-v12 {
    display: grid !important;
    gap: 14px !important;

    min-width: 0;
}


/*
 * Solamente posicionamos la tarjeta en la columna derecha.
 * NO tocamos ninguno de sus estilos internos.
 */
.modern-detail-page
.modern-detail-main-v12
> .modern-advisor-contact-v5 {
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;

    z-index: 20 !important;

    max-height:
        calc(
            100vh -
            36px
        ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* ---------------------------------------------------------
   GALERÍA COMPACTA
   --------------------------------------------------------- */

.modern-detail-page
.modern-detail-gallery-v4 {
    display: grid !important;

    grid-template-columns:
        minmax(0, 2.25fr)
        minmax(210px, .95fr)
        !important;

    gap: 7px !important;

    width: 100% !important;

    height:
        clamp(
            440px,
            38vw,
            590px
        ) !important;

    min-height: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 24px !important;

    background: #dfe7ef;
}


.modern-detail-page
.modern-detail-gallery-v4.single-photo {
    grid-template-columns:
        1fr !important;
}


.modern-detail-page
.modern-gallery-main,
.modern-detail-page
.modern-gallery-side,
.modern-detail-page
.modern-gallery-side a {
    min-width: 0 !important;
    min-height: 0 !important;
}


.modern-detail-page
.modern-gallery-main {
    position: relative;
    width: 100%;
    height: 100% !important;
    overflow: hidden;
}


.modern-detail-page
.modern-gallery-side {
    display: grid !important;

    width: 100% !important;
    height: 100% !important;

    gap: 7px !important;

    overflow: hidden;
}


.modern-detail-page
.modern-gallery-side-count-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}


.modern-detail-page
.modern-gallery-side-count-2 {
    grid-template-columns: 1fr;

    grid-template-rows:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.modern-detail-page
.modern-gallery-side-count-3,
.modern-detail-page
.modern-gallery-side-count-4 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.modern-detail-page
.modern-gallery-side-count-3
a:first-child {
    grid-row:
        1 /
        3;
}


.modern-detail-page
.modern-gallery-main img,
.modern-detail-page
.modern-gallery-side a img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center !important;
}


.modern-detail-page
.modern-gallery-tile {
    overflow: hidden;
}


.modern-detail-page
.modern-gallery-tile img {
    transition:
        transform
        .28s
        ease,
        filter
        .28s
        ease;
}


.modern-detail-page
.modern-gallery-tile:hover img {
    transform: scale(1.018);
    filter: brightness(.97);
}


/* ---------------------------------------------------------
   CONTENIDO BAJO LA GALERÍA
   --------------------------------------------------------- */

.modern-detail-page
.modern-detail-content-v12 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


.modern-detail-page
.modern-detail-content-v12
.modern-detail-content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding-top: 0 !important;
}


/* Características horizontales compactas. */
.modern-detail-content-v12
.modern-detail-specs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;

    gap: 9px !important;

    margin: 0 !important;
}


.modern-detail-content-v12
.modern-detail-spec-card {
    display: grid !important;

    grid-template-columns:
        42px
        minmax(
            82px,
            max-content
        )
        !important;

    grid-template-rows:
        auto
        auto
        !important;

    align-items: center !important;

    column-gap: 10px !important;
    row-gap: 2px !important;

    width: auto !important;

    min-width: 145px !important;
    max-width: 230px !important;
    min-height: 68px !important;

    padding:
        10px
        13px
        !important;

    border:
        1px solid
        rgba(
            34,
            72,
            124,
            .07
        )
        !important;

    border-radius:
        16px
        !important;

    box-shadow:
        0 9px 24px
        rgba(
            23,
            58,
            99,
            .045
        );
}


.modern-detail-content-v12
.modern-detail-spec-bedrooms {
    background:
        linear-gradient(
            180deg,
            #F1F6FF,
            #EAF2FF
        )
        !important;
}


.modern-detail-content-v12
.modern-detail-spec-bathrooms {
    background:
        linear-gradient(
            180deg,
            #EFFBFF,
            #E8F7FC
        )
        !important;
}


.modern-detail-content-v12
.modern-detail-spec-parking {
    background:
        linear-gradient(
            180deg,
            #FFF8ED,
            #FFF2DD
        )
        !important;
}


.modern-detail-content-v12
.modern-detail-spec-construction {
    background:
        linear-gradient(
            180deg,
            #F7F3FF,
            #F0EAFF
        )
        !important;
}


.modern-detail-content-v12
.modern-detail-spec-lot {
    background:
        linear-gradient(
            180deg,
            #F1FBF3,
            #E9F7EC
        )
        !important;
}


.modern-detail-content-v12
.modern-detail-spec-emoji {
    display: inline-grid !important;
    place-items: center !important;

    grid-column: 1 !important;
    grid-row:
        1 /
        3
        !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;

    border-radius:
        11px
        !important;

    background:
        rgba(
            255,
            255,
            255,
            .72
        )
        !important;

    font-size:
        var(
            --detail-spec-icon-size,
            25px
        )
        !important;
}


.modern-detail-content-v12
.modern-detail-spec-card
> strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: end !important;

    margin: 0 !important;

    color:
        var(
            --detail-spec-value-color,
            #10233C
        )
        !important;

    font-size:
        var(
            --detail-spec-value-size,
            15px
        )
        !important;

    font-weight: 900 !important;
    white-space: nowrap;
}


.modern-detail-content-v12
.modern-detail-spec-card
> small {
    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: start !important;

    margin: 0 !important;

    color:
        var(
            --detail-spec-label-color,
            #60728B
        )
        !important;

    font-size:
        var(
            --detail-spec-label-size,
            9px
        )
        !important;

    font-weight: 900 !important;

    white-space: nowrap;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   AMENIDADES Y MAPA
   Sólo sus componentes, nunca el formulario.
   --------------------------------------------------------- */

.modern-detail-content-v12
.modern-amenities-grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        )
        !important;

    gap: 10px !important;
}


.modern-amenity-item-v12 {
    display: flex !important;
    align-items: center;

    gap: 10px;

    min-height: 52px;

    padding:
        11px
        13px
        !important;

    border:
        1px solid
        #e0e8f2
        !important;

    border-radius:
        14px
        !important;

    color:
        #344b66
        !important;

    background:
        #fff
        !important;
}


.modern-amenity-item-v12 i {
    display: grid !important;
    place-items: center;

    width: 30px !important;
    height: 30px !important;

    flex:
        0
        0
        30px;

    border-radius: 10px;

    color: #155eef;
    background: #eef5ff;
}


.modern-amenity-item-v12 i svg {
    width: 18px !important;
    height: 18px !important;
}


.modern-map-heading-v12 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 16px;
}


.modern-map-open-v12 {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 38px;

    padding:
        8px
        12px;

    border:
        1px solid
        #cfe0fb;

    border-radius:
        999px;

    color: #155eef;
    background: #f2f7ff;

    font-size: 10px;
    font-weight: 900;

    text-decoration: none;
}


.modern-map-open-v12 svg {
    width: 15px !important;
    height: 15px !important;
}


.modern-map-frame-v12 {
    width: 100%;
    height: 390px;

    overflow: hidden;

    border:
        1px solid
        #dae4ef;

    border-radius:
        20px;

    background: #eaf0f6;
}


.modern-map-frame-v12 iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


.modern-map-address-v12 {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 10px;
}


.modern-map-address-v12 svg {
    width: 17px !important;
    height: 17px !important;

    flex:
        0
        0
        17px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (
    max-width:
    1180px
) {
    .modern-detail-page
    .modern-detail-main-v12 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 350px)
            !important;

        gap: 18px !important;
    }


    .modern-detail-content-v12
    .modern-amenities-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            )
            !important;
    }
}


@media (
    max-width:
    980px
) {
    .modern-detail-page
    .modern-detail-intro {
        grid-template-columns:
            1fr
            !important;
    }


    .modern-detail-page
    .modern-detail-price {
        text-align: left !important;
    }


    .modern-detail-page
    .modern-detail-main-v12 {
        grid-template-columns:
            1fr
            !important;
    }


    .modern-detail-page
    .modern-detail-main-v12
    > .modern-advisor-contact-v5 {
        position: static !important;

        top: auto !important;

        max-height: none !important;

        overflow: visible !important;
    }


    .modern-detail-page
    .modern-detail-gallery-v4 {
        height:
            clamp(
                420px,
                66vw,
                580px
            )
            !important;
    }
}


@media (
    max-width:
    700px
) {
    .modern-detail-page
    .modern-detail-intro {
        padding-top:
            14px
            !important;

        padding-bottom:
            10px
            !important;
    }


    .modern-detail-page
    .modern-detail-heading h1 {
        font-size:
            clamp(
                34px,
                11vw,
                52px
            )
            !important;
    }


    .modern-detail-page
    .modern-detail-gallery-v4 {
        grid-template-columns:
            1fr
            !important;

        height:
            auto
            !important;

        min-height:
            360px
            !important;
    }


    .modern-detail-page
    .modern-gallery-main {
        min-height:
            360px
            !important;
    }


    .modern-detail-page
    .modern-gallery-side {
        display:
            none
            !important;
    }


    .modern-detail-content-v12
    .modern-detail-spec-card {
        min-width:
            138px
            !important;

        max-width:
            none
            !important;

        flex:
            1
            1
            138px;
    }


    .modern-detail-content-v12
    .modern-amenities-grid {
        grid-template-columns:
            1fr
            !important;
    }


    .modern-map-heading-v12 {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .modern-map-frame-v12 {
        height:
            310px;
    }
}