/* ========================================================
   COSTA RENT | PASO 39.8-A
   MEDITERRANEAN PREMIUM | MULTISECCION
   ======================================================== */

/*
 * Variables visuales.
 * Exclusivamente para la portada existente.
 */

body.cr39-active .cr39-content:has(> .hero) {
    --cr398-navy: #102d48;
    --cr398-blue: #1264ac;
    --cr398-text: #52697d;
    --cr398-border: #e1eaf2;
    --cr398-shadow:
        0 12px 30px rgba(16,45,72,.055);
}

/* ========================================================
   1. COMPOSICION GENERAL
   ======================================================== */

body.cr39-active .cr39-content:has(> .hero) {
    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fafcfe 48%,
            #fff 100%
        ) !important;
}

body.cr39-active .cr39-content > section {
    scroll-margin-top: 28px;
}

body.cr39-active .cr39-content > section
:is(h2, h3) {
    color: #102d48;
    line-height: 1.22;
    letter-spacing: -.025em;
}

body.cr39-active .cr39-content > section p {
    line-height: 1.75;
}

body.cr39-active .cr39-content > section
a:focus-visible {
    outline: 3px solid #3e94db;
    outline-offset: 4px;
}

/* ========================================================
   2. HERO PRINCIPAL
   ======================================================== */

body.cr39-active main.cr39-content
> section.hero {
    border-radius: 18px !important;
    border: 1px solid #dcebf5 !important;

    box-shadow:
        0 14px 35px rgba(16,45,72,.07) !important;
}

body.cr39-active main.cr39-content
> section.hero h1 {
    color: #102d48 !important;
    letter-spacing: -.035em;
    text-wrap: balance;
}

body.cr39-active main.cr39-content
> section.hero p {
    max-width: 650px;
    color: #4d657a;
}

body.cr39-active main.cr39-content
> section.hero img {
    max-width: 100%;
    object-fit: contain;
}

/* ========================================================
   3. VENTAJAS PRINCIPALES
   ======================================================== */

body.cr39-active main.cr39-content
> section.features {
    background:
        linear-gradient(145deg,#fff,#f8fbfe) !important;

    border: 1px solid #e3eaf1 !important;
    border-radius: 15px !important;

    box-shadow:
        0 8px 22px rgba(16,45,72,.035) !important;
}

body.cr39-active main.cr39-content
> section.features h2,
body.cr39-active main.cr39-content
> section.features h3 {
    color: #102d48;
}

body.cr39-active main.cr39-content
> section.features p {
    color: #5b7183;
}

/* ========================================================
   4. NOSOTROS
   ======================================================== */

body.cr39-active main.cr39-content
> section.about {
    border-radius: 17px !important;

    border: 1px solid #e0e9f1 !important;

    background:
        linear-gradient(
            125deg,
            #fff 0%,
            #f6faff 100%
        ) !important;

    box-shadow: var(
        --cr398-shadow,
        0 10px 25px rgba(16,45,72,.05)
    ) !important;
}

body.cr39-active main.cr39-content
> section.about img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

body.cr39-active main.cr39-content
> section.about h2 {
    color: #102d48 !important;
    text-wrap: balance;
}

body.cr39-active main.cr39-content
> section.about p {
    color: #52697d;
}

/* ========================================================
   5. SERVICIOS
   ======================================================== */

body.cr39-active main.cr39-content
> section.services-home {
    border: 1px solid #e1eaf2 !important;
    border-radius: 17px !important;

    background:
        linear-gradient(
            150deg,
            #f8fbff,
            #fff 65%
        ) !important;

    box-shadow:
        0 10px 27px rgba(16,45,72,.045) !important;
}

body.cr39-active main.cr39-content
> section.services-home h2 {
    color: #102d48;
    text-wrap: balance;
}

body.cr39-active main.cr39-content
> section.services-home h3 {
    color: #145b94;
    line-height: 1.3;
}

body.cr39-active main.cr39-content
> section.services-home p {
    color: #52697d;
}

/* ========================================================
   6. VENTAJAS Y MOVILIDAD
   ======================================================== */

body.cr39-active main.cr39-content
> section.advantages-home {
    background:
        linear-gradient(
            140deg,
            #edf7fc,
            #f8fcfe
        ) !important;

    border: 1px solid #dcebf3 !important;
    border-radius: 16px !important;
}

body.cr39-active main.cr39-content
> section.mobility-home {
    border: 1px solid #deebf2 !important;
    border-radius: 17px !important;

    background:
        radial-gradient(
            ellipse at 95% 10%,
            rgba(113,190,218,.14),
            transparent 55%
        ),
        #fff !important;

    box-shadow:
        0 11px 29px rgba(16,45,72,.045) !important;
}

body.cr39-active main.cr39-content
> section.mobility-home img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ========================================================
   7. PRECIOS DESTACADOS EN PORTADA
   ======================================================== */

body.cr39-active main.cr39-content
> section.pricing-home {
    border: 1px solid #dae8f4 !important;
    border-radius: 17px !important;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(120,189,229,.16),
            transparent 58%
        ),
        linear-gradient(
            150deg,
            #f7fbff,
            #fff
        ) !important;

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

body.cr39-active main.cr39-content
> section.pricing-home h2 {
    color: #102d48 !important;
}

body.cr39-active main.cr39-content
> section.pricing-home p {
    color: #52697d;
}

/* ========================================================
   8. BLOG DESTACADO
   ======================================================== */

body.cr39-active main.cr39-content
> section.blog-home {
    border: 1px solid #e2eaf1 !important;
    border-radius: 17px !important;

    background: #fff !important;

    box-shadow:
        0 9px 25px rgba(16,45,72,.04) !important;
}

body.cr39-active main.cr39-content
> section.blog-home h2 {
    color: #102d48 !important;
}

body.cr39-active main.cr39-content
> section.blog-home h3 {
    color: #163e60;
    line-height: 1.35;
}

body.cr39-active main.cr39-content
> section.blog-home img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ========================================================
   9. CONTACTO COMERCIAL
   ======================================================== */

body.cr39-active main.cr39-content
> section.contact-home {
    border: 1px solid #dbe9f4 !important;
    border-radius: 17px !important;

    background:
        radial-gradient(
            ellipse at 5% 100%,
            rgba(111,198,206,.12),
            transparent 55%
        ),
        linear-gradient(
            130deg,
            #f1f8fd,
            #fafcfe
        ) !important;

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

body.cr39-active main.cr39-content
> section.contact-home h2 {
    color: #102d48 !important;
    text-wrap: balance;
}

body.cr39-active main.cr39-content
> section.contact-home p {
    color: #52697d;
}

/* ========================================================
   10. BOTONES DE LAS SECCIONES COMERCIALES
   ======================================================== */

body.cr39-active main.cr39-content
> :is(
    section.about,
    section.services-home,
    section.pricing-home,
    section.contact-home
)
a[class*="btn"],
body.cr39-active main.cr39-content
> :is(
    section.about,
    section.services-home,
    section.pricing-home,
    section.contact-home
)
a[class*="button"] {
    border-radius: 9px !important;
    text-decoration: none;

    transition:
        background-color .18s ease,
        box-shadow .18s ease;
}

/* ========================================================
   11. CONSISTENCIA DE ESPACIADO
   ======================================================== */

body.cr39-active main.cr39-content
> section + section {
    margin-top: 26px;
}

/* ========================================================
   12. TABLET
   ======================================================== */

@media (max-width: 1050px) {
    body.cr39-active main.cr39-content
    > section + section {
        margin-top: 21px;
    }
}

/* ========================================================
   13. MOVIL
   ======================================================== */

@media (max-width: 760px) {

    body.cr39-active main.cr39-content
    > section + section {
        margin-top: 17px;
    }

    body.cr39-active main.cr39-content
    > :is(
        section.features,
        section.about,
        section.services-home,
        section.advantages-home,
        section.mobility-home,
        section.pricing-home,
        section.blog-home,
        section.contact-home
    ) {
        border-radius: 12px !important;
    }

    body.cr39-active main.cr39-content
    > section h2 {
        text-wrap: pretty;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cr39-active main.cr39-content
    > section a {
        transition: none !important;
    }
}

/* FIN COSTA RENT PASO 39.8-A */