/* ======================================================
   COSTA RENT | PASO 40.7-A
   PRECIOS | FONDO FOTOGRAFICO MEDITERRANEAN PREMIUM
   ====================================================== */

/*
 * Exclusivamente el panel de Precios identificado
 * mediante JavaScript.
 *
 * No altera importes, botones ni tarjetas.
 */

body .cr407-pricing-panel {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* Fotografía real en el lado derecho */

body .cr407-pricing-panel::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 61% !important;
    height: 390px !important;

    background-image:
        url('/assets/images/costa-rent-nosotros-real.webp') !important;

    background-position: center 43% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    opacity: .19 !important;

    filter: blur(2px) !important;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.20) 21%,
            rgba(0,0,0,.78) 57%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.20) 21%,
            rgba(0,0,0,.78) 57%,
            #000 100%
        );

    pointer-events: none !important;

    z-index: 0 !important;
}

/* Mantener el contenido delante de la fotografía */

body .cr407-pricing-panel > * {
    position: relative;
    z-index: 1;
}

/* Garantizar legibilidad del encabezado */

body .cr407-pricing-panel h1 {
    position: relative;
    z-index: 2;
}

/* Las tarjetas mantienen su presentación original */

body .cr407-pricing-panel .cr396-card {
    position: relative;
    z-index: 2;
}

/* TABLET */

@media (max-width: 1000px) {

    body .cr407-pricing-panel::before {
        width: 58% !important;
        height: 345px !important;
        opacity: .14 !important;
    }
}

/* MOVIL */

@media (max-width: 760px) {

    body .cr407-pricing-panel::before {
        width: 100% !important;
        height: 280px !important;

        opacity: .09 !important;

        filter: blur(3px) !important;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                #000,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                to bottom,
                #000,
                transparent 100%
            );
    }
}

@media (prefers-reduced-motion: reduce) {
    body .cr407-pricing-panel::before {
        transition: none !important;
    }
}

/* FIN PASO 40.7-A */

/* ======================================================
   COSTA RENT | PASO 40.7-B
   FOTOGRAFIA REAL VISIBLE EN CABECERA DE PRECIOS
   ====================================================== */

body .cr407-pricing-panel {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/*
 * La fotografía se sitúa exclusivamente en
 * la zona superior derecha del panel.
 */

body .cr407-pricing-panel::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 61% !important;
    height: 380px !important;

    background-image:
        url('/assets/images/costa-rent-nosotros-real.webp') !important;

    background-size: cover !important;

    background-position: center 48% !important;

    background-repeat: no-repeat !important;

    opacity: .48 !important;

    filter: blur(2px) !important;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.20) 22%,
            rgba(0,0,0,.76) 56%,
            #000 100%
        ) !important;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.20) 22%,
            rgba(0,0,0,.76) 56%,
            #000 100%
        ) !important;

    z-index: 0 !important;

    pointer-events: none !important;
}

/* Título y contenido por encima de la imagen */

body .cr407-pricing-panel > * {
    position: relative;
    z-index: 1;
}

/* Mantener las tarjetas sin fondos fotográficos */

body .cr407-pricing-panel .cr396-card {
    position: relative;
    z-index: 2;
}

/* Si el panel engloba también las tarifas, el
   fondo termina antes de las tarjetas. */

@media (max-width: 1000px) {

    body .cr407-pricing-panel::before {
        width: 60% !important;
        height: 340px !important;
        opacity: .34 !important;
    }
}

@media (max-width: 760px) {

    body .cr407-pricing-panel::before {
        width: 100% !important;
        height: 260px !important;

        opacity: .15 !important;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                transparent 100%
            ) !important;

        mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                transparent 100%
            ) !important;
    }
}

/* FIN PASO 40.7-B */