/* ========================================================
   COSTA RENT | PASO 39.9-C
   MEDITERRANEAN PREMIUM
   PAGINAS INTERIORES ES/EN
   ======================================================== */

/*
 * Activacion exclusivamente mediante
 * html.cr399c-interior.
 *
 * No afecta a la portada ni al blog.
 */

html.cr399c-interior {
    background: #eef2f6;
}

html.cr399c-interior body {
    background: #eef2f6 !important;
    color: #263e53;
}

/* ========================================================
   CABECERA CORPORATIVA
   ======================================================== */

html.cr399c-interior
header.site-navigation-v1 {
    box-sizing: border-box !important;

    width: min(1260px, calc(100% - 44px)) !important;
    max-width: 1260px !important;

    margin: 30px auto 0 !important;

    background: #fff !important;

    border: 1px solid #e1e8ef !important;
    border-bottom: 0 !important;

    border-radius: 12px 12px 0 0 !important;

    box-shadow: none !important;
}

html.cr399c-interior
header.site-navigation-v1 .cr395-shell {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================================
   NAVEGACION PRINCIPAL
   ======================================================== */

/*
 * Solo barras de navegacion exteriores.
 * No se fuerza la visibilidad del menu movil.
 */

html.cr399c-interior
body > nav.site-navigation-links,
html.cr399c-interior
body > nav.cr39-nav,
html.cr399c-interior
body > nav.cr399-nav,
html.cr399c-interior
header.site-navigation-v1 + nav {
    box-sizing: border-box !important;

    width: min(1260px, calc(100% - 44px)) !important;
    max-width: 1260px !important;

    margin: 0 auto !important;

    background: #102d48 !important;

    border-radius: 0 !important;
}

html.cr399c-interior
body > nav.cr39-nav a,
html.cr399c-interior
body > nav.cr399-nav a,
html.cr399c-interior
header.site-navigation-v1 + nav a {
    color: #fff;
    text-decoration: none;
}

/* ========================================================
   PANEL PRINCIPAL
   ======================================================== */

html.cr399c-interior
main.cr39-content {
    box-sizing: border-box !important;

    width: min(1260px, calc(100% - 44px)) !important;
    max-width: 1260px !important;

    margin: 30px auto 42px !important;

    padding: clamp(24px, 3vw, 40px) !important;

    background: #fff !important;

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

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

/* ========================================================
   TITULOS Y TEXTO
   ======================================================== */

html.cr399c-interior
main.cr39-content h1 {
    color: #102d48;

    font-size: clamp(32px, 3.3vw, 46px);

    line-height: 1.17;
    letter-spacing: -.03em;

    text-wrap: balance;
}

html.cr399c-interior
main.cr39-content h2 {
    color: #123a59;
    line-height: 1.28;

    text-wrap: balance;
}

html.cr399c-interior
main.cr39-content h3 {
    color: #17496f;
    line-height: 1.35;
}

html.cr399c-interior
main.cr39-content p {
    color: #52697d;
    line-height: 1.75;
}

/* ========================================================
   SECCIONES INTERIORES
   ======================================================== */

html.cr399c-interior
main.cr39-content > section {
    box-sizing: border-box;

    max-width: 100%;

    border-radius: 14px;
}

html.cr399c-interior
main.cr39-content > section + section {
    margin-top: 24px;
}

/* ========================================================
   FOTOGRAFIAS
   ======================================================== */

html.cr399c-interior
main.cr39-content img {
    max-width: 100%;
    height: auto;
}

html.cr399c-interior
main.cr39-content
:is(
    .about img,
    .services img,
    .mobility img
) {
    border-radius: 12px;
}

/* ========================================================
   CONTACTO
   ======================================================== */

html.cr399c-interior
main.cr39-content
:is(input, textarea, select) {
    max-width: 100%;
    box-sizing: border-box;
}

html.cr399c-interior
main.cr39-content
:is(input, textarea, select):focus-visible {
    outline: 2px solid #3e94db;
    outline-offset: 2px;
}

html.cr399c-interior
main.cr39-content button,
html.cr399c-interior
main.cr39-content input[type="submit"] {
    border-radius: 9px;
}

/* ========================================================
   ACCESIBILIDAD
   ======================================================== */

html.cr399c-interior
main.cr39-content a:focus-visible {
    outline: 3px solid #3e94db;
    outline-offset: 3px;
}

/* ========================================================
   NO ALTERAR TARJETAS DE PRECIOS
   ======================================================== */

/*
 * Se conserva costa-pricing-396.css.
 * No se modifican las clases cr396-card,
 * cr396-grid ni los importes.
 */

/* ========================================================
   TABLET
   ======================================================== */

@media (max-width: 900px) {

    html.cr399c-interior
    header.site-navigation-v1 {
        width: calc(100% - 28px) !important;
        margin-top: 18px !important;
    }

    html.cr399c-interior
    main.cr39-content {
        width: calc(100% - 28px) !important;

        padding: 25px !important;
        margin-top: 20px !important;
    }
}

/* ========================================================
   MOVIL
   ======================================================== */

@media (max-width: 760px) {

    html.cr399c-interior
    header.site-navigation-v1 {
        width: calc(100% - 20px) !important;

        margin: 10px auto 0 !important;

        border-radius: 10px 10px 0 0 !important;
    }

    html.cr399c-interior
    body > nav.site-navigation-links,
    html.cr399c-interior
    body > nav.cr39-nav,
    html.cr399c-interior
    body > nav.cr399-nav,
    html.cr399c-interior
    header.site-navigation-v1 + nav {
        width: calc(100% - 20px) !important;
    }

    html.cr399c-interior
    main.cr39-content {
        width: calc(100% - 20px) !important;

        margin: 14px auto 28px !important;

        padding: 20px 16px !important;

        border-radius: 12px !important;
    }

    html.cr399c-interior
    main.cr39-content h1 {
        font-size: clamp(29px, 7vw, 38px);
    }

    html.cr399c-interior
    main.cr39-content > section + section {
        margin-top: 16px;
    }
}

/* FIN COSTA RENT PASO 39.9-C */

/* =====================================================
   COSTA RENT | PASO 39.9-D
   MENU CORPORATIVO UNIFICADO EN INTERIORES
   ===================================================== */

@media (min-width: 761px) {

    html.cr399c-interior nav.cr399d-nav {
        box-sizing: border-box !important;

        display: flex !important;
        align-items: stretch !important;

        width: min(1260px, calc(100% - 44px)) !important;
        max-width: 1260px !important;

        min-height: 55px !important;

        margin: 0 auto !important;
        padding: 0 16px !important;

        background: #102d48 !important;
        border: 0 !important;
        border-radius: 0 !important;

        gap: 0 !important;
    }

    html.cr399c-interior nav.cr399d-nav a {
        box-sizing: border-box !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        min-height: 55px !important;

        padding: 0 22px !important;
        margin: 0 !important;

        color: #fff !important;

        font-size: 14px !important;
        font-weight: 650 !important;

        text-decoration: none !important;

        border-right:
            1px solid rgba(255,255,255,.09) !important;
    }

    html.cr399c-interior nav.cr399d-nav
    a:hover,
    html.cr399c-interior nav.cr399d-nav
    a:focus-visible,
    html.cr399c-interior nav.cr399d-nav
    a.cr399d-current {
        background: #1765a4 !important;
    }
}

@media (min-width: 761px) and (max-width: 900px) {

    html.cr399c-interior nav.cr399d-nav {
        width: calc(100% - 28px) !important;
        padding: 0 8px !important;
    }

    html.cr399c-interior nav.cr399d-nav a {
        padding: 0 13px !important;
    }
}

@media (max-width: 760px) {

    html.cr399c-interior nav.cr399d-nav {
        display: none !important;
    }
}

/* FIN PASO 39.9-D */
