/* =========================================================
   COSTA MODERNA V56
   MULTIMEDIA + AMENIDADES PREMIUM
   ========================================================= */


/* ---------------------------------------------------------
   MULTIMEDIA
   --------------------------------------------------------- */

.modern-property-multimedia-v56 {
    padding-top:
        28px !important;
}


.modern-property-media-stack-v56 {
    display:
        grid;

    gap:
        22px;

    margin-top:
        12px;
}


.modern-property-media-card-v56 {
    overflow:
        hidden;

    border:
        1px solid
        #dce6f1;

    border-radius:
        24px;

    background:
        #fff;

    box-shadow:
        0
        20px
        55px
        rgba(
            19,
            52,
            88,
            .07
        );
}


.modern-property-media-heading-v56 {
    display:
        grid;

    grid-template-columns:
        48px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        13px;

    padding:
        17px
        18px;
}


.modern-property-media-icon-v56 {
    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    border-radius:
        15px;
}


.modern-property-media-icon-v56.youtube {
    color:
        #e32636;

    background:
        #fff0f2;
}


.modern-property-media-icon-v56.tour {
    color:
        #155eef;

    background:
        #edf4ff;
}


.modern-property-media-icon-v56 svg {
    width:
        24px !important;

    height:
        24px !important;
}


.modern-property-media-heading-v56
span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #155eef;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.modern-property-media-heading-v56
h2 {
    margin:
        0 !important;

    color:
        #10233c;

    font-size:
        22px !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.025em;
}


.modern-property-youtube-v56,

.modern-property-tour-v56 {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 /
        9;

    overflow:
        hidden;

    background:
        #08192e;
}


.modern-property-youtube-v56
iframe,

.modern-property-tour-v56
iframe {
    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    border:
        0;
}


.modern-property-tour-v56 {
    min-height:
        520px;
}


.modern-property-tour-open-v56 {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    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;

    white-space:
        nowrap;
}


.modern-property-tour-open-v56:hover {
    color:
        #fff;

    border-color:
        #155eef;

    background:
        #155eef;
}


/* ---------------------------------------------------------
   AMENIDADES PREMIUM
   --------------------------------------------------------- */

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

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

    gap:
        12px
        !important;
}


.modern-amenity-card-v56 {
    position:
        relative;

    display:
        grid !important;

    grid-template-columns:
        44px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        11px;

    min-height:
        72px !important;

    padding:
        12px
        13px !important;

    overflow:
        hidden;

    border:
        1px solid
        #dfe8f2
        !important;

    border-radius:
        18px
        !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f8fbff
        )
        !important;

    box-shadow:
        0
        12px
        28px
        rgba(
            21,
            55,
            91,
            .055
        );

    transition:
        transform
        .25s
        ease,
        box-shadow
        .25s
        ease,
        border-color
        .25s
        ease;
}


.modern-amenity-card-v56:hover {
    transform:
        translateY(
            -3px
        );

    border-color:
        #c9daf0
        !important;

    box-shadow:
        0
        20px
        40px
        rgba(
            21,
            55,
            91,
            .10
        );
}


.modern-amenity-card-v56
> i {
    display:
        grid !important;

    place-items:
        center;

    width:
        44px !important;

    height:
        44px !important;

    flex:
        0
        0
        44px;

    border-radius:
        14px !important;

    color:
        #155eef;

    background:
        #edf4ff
        !important;
}


.modern-amenity-card-v56
> i
svg {
    width:
        22px !important;

    height:
        22px !important;

    max-width:
        22px !important;

    max-height:
        22px !important;
}


.modern-amenity-card-v56
> strong {
    min-width:
        0;

    color:
        #1e3b58;

    font-size:
        12px;

    line-height:
        1.3;
}


.modern-amenity-check-v56 {
    display:
        grid;

    place-items:
        center;

    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    color:
        #0da86d;

    background:
        #e8faf3;

    font-size:
        11px;

    font-weight:
        900;
}


/* Variaciones visuales según la amenidad */
.modern-amenity-card-v56.amenity-pool
> i,

.modern-amenity-card-v56.amenity-beach
> i {
    color:
        #0877c9;

    background:
        #eaf7ff
        !important;
}


.modern-amenity-card-v56.amenity-security
> i {
    color:
        #0c9c67;

    background:
        #eafaf3
        !important;
}


.modern-amenity-card-v56.amenity-gym
> i,

.modern-amenity-card-v56.amenity-parking
> i {
    color:
        #7b4fd6;

    background:
        #f3efff
        !important;
}


.modern-amenity-card-v56.amenity-garden
> i,

.modern-amenity-card-v56.amenity-pet
> i {
    color:
        #45a34d;

    background:
        #eef9ed
        !important;
}


.modern-amenity-card-v56.amenity-terrace
> i,

.modern-amenity-card-v56.amenity-clubhouse
> i,

.modern-amenity-card-v56.amenity-furnished
> i {
    color:
        #d78924;

    background:
        #fff6e8
        !important;
}


@media (
    max-width:
    1180px
) {
    .modern-detail-content-v12
    .modern-amenities-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            )
            !important;
    }
}


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


    .modern-property-media-heading-v56 {
        grid-template-columns:
            46px
            minmax(
                0,
                1fr
            );
    }


    .modern-property-tour-open-v56 {
        grid-column:
            1 /
            -1;

        justify-self:
            start;
    }


    .modern-property-tour-v56 {
        min-height:
            420px;
    }
}


@media (
    max-width:
    540px
) {
    .modern-detail-content-v12
    .modern-amenities-grid {
        grid-template-columns:
            1fr
            !important;
    }


    .modern-property-media-heading-v56
    h2 {
        font-size:
            19px !important;
    }


    .modern-property-tour-v56 {
        min-height:
            330px;
    }
}