/* ========================================================
   COSTA RENT | HERO 397-D
   Mediterranean Premium | Composición comercial
   ======================================================== */

body.cr39-active .cr39-content > section.hero.cr397d-ready {
    position: relative;

    min-height: 440px;

    padding: clamp(30px, 4.1vw, 56px) !important;

    background:
        radial-gradient(
            ellipse at 94% 5%,
            rgba(135, 203, 237, .24),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 5% 100%,
            rgba(112, 203, 204, .12),
            transparent 52%
        ),
        linear-gradient(
            120deg,
            #f5faff,
            #eaf4fb
        ) !important;

    border: 1px solid #dce9f4 !important;
    border-radius: 17px !important;

    box-shadow:
        0 12px 32px rgba(16, 45, 72, .06) !important;
}

/* DISTRIBUCION EN DOS COLUMNAS, SOLO SI ES SEGURA */

@media (min-width: 901px) {
    body.cr39-active .cr39-content
    > section.hero.cr397d-split {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, .95fr);

        align-items: center;

        column-gap: clamp(24px, 4vw, 56px);
    }

    body.cr39-active .hero.cr397d-split
    > .cr397d-copy {
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }

    body.cr39-active .hero.cr397d-split
    > .cr397d-visual {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
    }
}

/* TITULO */

body.cr39-active .hero.cr397d-ready .cr397d-title {
    max-width: 750px;

    margin-top: 14px;
    margin-bottom: 22px;

    color: #102d48 !important;

    font-size: clamp(34px, 3.4vw, 51px) !important;

    font-weight: 800;
    line-height: 1.13 !important;
    letter-spacing: -.035em !important;

    text-wrap: balance;
}

/* TEXTO */

body.cr39-active .hero.cr397d-ready p {
    color: #526c82;

    line-height: 1.75;
}

/* FOTOGRAFIA ORIGINAL */

body.cr39-active .hero.cr397d-ready .cr397d-photo {
    display: block;

    max-width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 16px 21px rgba(25, 65, 97, .12)
        );
}

/* NO REPETIR LOGOTIPO */

body.cr39-active .hero.cr397d-ready
.cr397d-logo-duplicate {
    display: none !important;
}

/* BOTONES */

body.cr39-active .hero.cr397d-ready .cr397d-primary,
body.cr39-active .hero.cr397d-ready .cr397d-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    max-width: 100%;

    margin: 8px 8px 8px 0;
    padding: 13px 21px !important;

    border-radius: 9px !important;

    font-size: 14px;
    font-weight: 750;

    text-align: center;
    text-decoration: none;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

body.cr39-active .hero.cr397d-ready .cr397d-primary {
    background: #1264ac !important;
    border: 1px solid #1264ac !important;
    color: #fff !important;
}

body.cr39-active .hero.cr397d-ready .cr397d-secondary {
    background: rgba(255,255,255,.88) !important;
    border: 1px solid #b8cfe2 !important;
    color: #145181 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.cr39-active .hero.cr397d-ready
    .cr397d-primary:hover {
        background: #0a4c85 !important;
        transform: translateY(-2px);
    }

    body.cr39-active .hero.cr397d-ready
    .cr397d-secondary:hover {
        background: #fff !important;
        transform: translateY(-2px);
    }
}

/* TABLET */

@media (max-width: 900px) {
    body.cr39-active .hero.cr397d-ready {
        min-height: 0;
    }

    body.cr39-active .hero.cr397d-ready
    .cr397d-title {
        font-size: clamp(31px, 4.7vw, 44px) !important;
    }
}

/* MOVIL */

@media (max-width: 760px) {
    body.cr39-active .cr39-content
    > section.hero.cr397d-ready {
        min-height: 0;

        padding: 26px 20px !important;
        border-radius: 13px !important;
    }

    body.cr39-active .hero.cr397d-ready
    .cr397d-title {
        font-size: clamp(29px, 7vw, 39px) !important;
    }

    body.cr39-active .hero.cr397d-ready
    .cr397d-primary,
    body.cr39-active .hero.cr397d-ready
    .cr397d-secondary {
        width: 100%;
        margin: 5px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cr39-active .hero.cr397d-ready
    .cr397d-primary,
    body.cr39-active .hero.cr397d-ready
    .cr397d-secondary {
        transition: none !important;
    }
}

/* FIN COSTA RENT HERO 397-D */