.elementor-235 .elementor-element.elementor-element-c20e438{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-235 .elementor-element.elementor-element-c20e438{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-c20e438 *//* =========================================================
   CONECTADOS SPA — GLOBAL HEADER
========================================================= */


/* =========================================================
   RESET LOCAL
========================================================= */

.cs-header,
.cs-header * {
    box-sizing: border-box;
}

.cs-header a {
    text-decoration: none;
}

.cs-header button {
    font: inherit;
}



/* =========================================================
   HEADER
========================================================= */

.cs-header {
    --cs-bg: #f4f0ea;
    --cs-black: #171717;
    --cs-line: rgba(23,23,23,.18);
    --cs-pink: #cf2f68;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 999999;

    background: var(--cs-bg);

    color: var(--cs-black);

    border-bottom:
        1px solid
        rgba(23,23,23,.08);
}



/* =========================================================
   NAVBAR
========================================================= */

.cs-navbar {
    position: relative;

    z-index: 20;

    width: 100%;
    height: 88px;

    padding:
        0
        clamp(30px,4vw,72px);

    display: grid;

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

    align-items: center;

    background: var(--cs-bg);
}



/* =========================================================
   LOGO
========================================================= */

.cs-logo {
    justify-self: start;

    display: inline-flex;

    align-items: center;

    line-height: 0;
}


.cs-logo__image {
    display: block;

    width: auto;
    height: auto;

    max-width: 210px;
    max-height: 46px;

    object-fit: contain;
}



/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.cs-desktop-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(25px,2.7vw,48px);
}


.cs-desktop-nav > a,
.cs-services-main {
    position: relative;

    color: var(--cs-black);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .18em;

    text-transform: uppercase;

    white-space: nowrap;

    padding: 10px 0;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.cs-desktop-nav > a::after,
.cs-services-main::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 3px;

    width: 0;
    height: 1px;

    background: var(--cs-black);

    transition:
        width .3s ease;
}


.cs-desktop-nav > a:hover,
.cs-services-main:hover {
    opacity: .65;
}


.cs-desktop-nav > a:hover::after,
.cs-services-main:hover::after {
    width: 100%;
}



/* =========================================================
   DESKTOP — SERVICES WRAPPER
========================================================= */

.cs-nav-services {
    position: relative;

    height: 88px;

    display: flex;

    align-items: center;
}


/* puente invisible para que no desaparezca
   al mover el mouse hacia el dropdown */

.cs-nav-services::before {
    content: "";

    position: absolute;

    left: -28px;
    right: -28px;

    top: 52px;

    height: 55px;
}



/* =========================================================
   DESKTOP — SERVICES DROPDOWN
========================================================= */

.cs-services-dropdown {
    position: absolute;

    top: calc(100% - 4px);
    left: 50%;

    width: 370px;

    padding: 22px;

    transform:
        translateX(-50%)
        translateY(14px);

    background: var(--cs-bg);

    border:
        1px solid
        rgba(23,23,23,.12);

    border-radius: 18px;

    box-shadow:
        0 24px 65px
        rgba(23,23,23,.11);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .35s
        cubic-bezier(.22,.61,.36,1),
        visibility .25s ease;

    z-index: 200;
}


.cs-nav-services:hover
.cs-services-dropdown,

.cs-nav-services:focus-within
.cs-services-dropdown {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}



/* =========================================================
   DROPDOWN META
========================================================= */

.cs-services-dropdown__meta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        0
        5px
        16px;

    border-bottom:
        1px solid
        rgba(23,23,23,.12);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .18em;

    color:
        rgba(23,23,23,.42);
}



/* =========================================================
   DROPDOWN LINKS
========================================================= */

.cs-services-dropdown__links {
    display: flex;

    flex-direction: column;
}


.cs-services-dropdown__links a {
    min-height: 55px;

    display: grid;

    grid-template-columns:
        38px
        1fr;

    align-items: center;

    padding: 0 5px;

    border-bottom:
        1px solid
        rgba(23,23,23,.10);

    color: var(--cs-black);

    transition:
        padding-left .25s ease,
        background .25s ease;
}


.cs-services-dropdown__links a:last-child {
    border-bottom: 0;
}


.cs-services-dropdown__links a span {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: .13em;

    color:
        rgba(23,23,23,.38);
}


.cs-services-dropdown__links a strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.02em;

    color: var(--cs-black);
}


.cs-services-dropdown__links a:hover {
    padding-left: 12px;

    background:
        rgba(23,23,23,.035);
}



/* =========================================================
   DESKTOP RESERVE
========================================================= */

.cs-reserve {
    justify-self: end;

    width: 182px;
    height: 58px;

    padding: 0 27px;

    border:
        1px solid
        rgba(23,23,23,.35);

    border-radius: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: var(--cs-black);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .17em;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.cs-reserve:hover {
    background: var(--cs-black);

    color: #fff;

    transform: translateY(-2px);
}



/* =========================================================
   RESERVE ARROW
========================================================= */

.cs-reserve-arrow,
.cs-mobile-reserve-arrow {
    position: relative;

    width: 18px;
    height: 18px;

    display: block;

    flex-shrink: 0;
}


.cs-reserve-arrow::before,
.cs-mobile-reserve-arrow::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 3px;
    right: 2px;

    border-top:
        1.4px solid currentColor;

    border-right:
        1.4px solid currentColor;
}


.cs-reserve-arrow::after,
.cs-mobile-reserve-arrow::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 1.4px;

    top: 8px;
    left: 3px;

    background: currentColor;

    transform: rotate(-45deg);

    transform-origin: center;
}



/* =========================================================
   MOBILE / TABLET TOGGLE
========================================================= */

.cs-toggle {
    display: none;

    justify-self: end;

    width: 54px;
    height: 54px;

    padding: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(23,23,23,.35);

    background: var(--cs-pink);

    cursor: pointer;

    position: relative;

    z-index: 100;

    appearance: none;

    -webkit-appearance: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 7px;
}


.cs-toggle span {
    display: block;

    width: 21px;
    height: 1px;

    background: var(--cs-black);

    transition:
        transform .35s ease,
        opacity .25s ease;
}



/* X */

.cs-header.cs-open
.cs-toggle span:first-child {
    transform:
        translateY(4px)
        rotate(45deg);
}


.cs-header.cs-open
.cs-toggle span:last-child {
    transform:
        translateY(-4px)
        rotate(-45deg);
}



/* =========================================================
   MOBILE MENU
========================================================= */

.cs-mobile-menu {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100dvh;

    background: var(--cs-black);

    color: #f4f0ea;

    z-index: 10;

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(-12px);

    pointer-events: none;

    transition:
        opacity .35s ease,
        transform .45s
        cubic-bezier(.22,.61,.36,1),
        visibility .35s;
}


.cs-header.cs-open
.cs-mobile-menu {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}



/* =========================================================
   MOBILE INNER
========================================================= */

.cs-mobile-inner {
    height: 100%;

    padding:
        112px
        clamp(24px,6vw,55px)
        28px;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    overscroll-behavior: contain;
}



/* =========================================================
   MOBILE META
========================================================= */

.cs-mobile-meta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.15);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.48);
}



/* =========================================================
   MOBILE LINKS
========================================================= */

.cs-mobile-links {
    display: flex;

    flex-direction: column;

    margin-top: 8px;
}


/* enlaces principales */

.cs-mobile-links > a {
    display: grid;

    grid-template-columns:
        42px
        1fr
        30px;

    align-items: center;

    min-height: 72px;

    border-bottom:
        1px solid
        rgba(255,255,255,.14);

    color: #f4f0ea;

    transition:
        padding-left .3s ease,
        opacity .3s ease;
}


.cs-mobile-links > a > span {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: .12em;

    color:
        rgba(255,255,255,.42);
}


.cs-mobile-links > a > strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(28px,5vw,43px);

    font-weight: 400;

    line-height: 1;
}


.cs-mobile-links > a:hover {
    padding-left: 7px;

    opacity: .7;
}



/* =========================================================
   MOBILE LINK ARROW — CSS
========================================================= */

.cs-mobile-link-arrow {
    position: relative;

    justify-self: end;

    width: 18px;
    height: 18px;
}


.cs-mobile-link-arrow::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 2px;
    right: 1px;

    border-top:
        1.3px solid #f4f0ea;

    border-right:
        1.3px solid #f4f0ea;
}


.cs-mobile-link-arrow::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 1.3px;

    top: 8px;
    left: 3px;

    background: #f4f0ea;

    transform:
        rotate(-45deg);
}



/* =========================================================
   MOBILE SERVICES GROUP
========================================================= */

.cs-mobile-service-group {
    width: 100%;

    border-bottom:
        1px solid
        rgba(255,255,255,.14);
}



/* =========================================================
   MOBILE SERVICES BUTTON
========================================================= */

.cs-mobile-service-toggle {
    width: 100%;

    min-height: 72px;

    padding: 0;

    border: 0;

    background: transparent;

    display: grid;

    grid-template-columns:
        42px
        1fr
        30px;

    align-items: center;

    color: #f4f0ea;

    text-align: left;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;
}


.cs-mobile-service-toggle > span {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: .12em;

    color:
        rgba(255,255,255,.42);
}


.cs-mobile-service-toggle > strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(28px,5vw,43px);

    font-weight: 400;

    line-height: 1;
}



/* =========================================================
   MOBILE SERVICES PLUS / MINUS
========================================================= */

.cs-mobile-service-plus {
    position: relative;

    justify-self: end;

    width: 18px;
    height: 18px;
}


.cs-mobile-service-plus::before,
.cs-mobile-service-plus::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 1px;

    background: #f4f0ea;

    transform:
        translate(-50%,-50%);

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.cs-mobile-service-plus::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}


.cs-mobile-service-group.is-open
.cs-mobile-service-plus::after {
    opacity: 0;

    transform:
        translate(-50%,-50%)
        rotate(0deg);
}



/* =========================================================
   MOBILE SERVICES SUBMENU
========================================================= */

.cs-mobile-service-submenu {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    padding-left: 42px;

    transition:
        max-height .45s
        cubic-bezier(.22,.61,.36,1),
        opacity .3s ease;
}


.cs-mobile-service-group.is-open
.cs-mobile-service-submenu {
    max-height: 500px;

    opacity: 1;
}



/* =========================================================
   MOBILE SUBLINKS
========================================================= */

.cs-mobile-service-submenu a {
    min-height: 44px;

    display: grid;

    grid-template-columns:
        32px
        1fr;

    align-items: center;

    color: #f4f0ea;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        padding-left .25s ease,
        opacity .25s ease;
}


.cs-mobile-service-submenu a:last-child {
    border-bottom: 0;
}


.cs-mobile-service-submenu a > span {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 7px;

    letter-spacing: .12em;

    color:
        rgba(255,255,255,.28);
}


.cs-mobile-service-submenu a > strong {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.cs-mobile-service-submenu a:hover {
    padding-left: 6px;

    opacity: .7;
}



/* =========================================================
   MOBILE RESERVE
========================================================= */

.cs-mobile-reserve {
    width: 100%;

    min-height: 62px;

    margin-top: 22px;

    padding: 0 22px;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #f4f0ea;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: .18em;

    transition:
        background .3s ease,
        color .3s ease;
}


.cs-mobile-reserve:hover {
    background: #f4f0ea;

    color: var(--cs-black);
}



/* =========================================================
   MOBILE BOTTOM
========================================================= */

.cs-mobile-bottom {
    margin-top: auto;

    padding-top: 22px;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: .16em;

    color:
        rgba(255,255,255,.42);
}



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

@media (max-width: 1180px) {

    .cs-navbar {
        height: 86px;

        display: flex;

        justify-content: space-between;

        padding:
            0 30px;
    }


    .cs-desktop-nav,
    .cs-reserve {
        display: none;
    }


    .cs-toggle {
        display: flex;
    }


    .cs-logo__image {
        max-width: 195px;

        max-height: 42px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cs-navbar {
        height: 85px;

        padding:
            0 18px;
    }


    .cs-logo__image {
        max-width: 165px;

        max-height: 38px;
    }


    .cs-toggle {
        width: 54px;

        height: 54px;
    }


    .cs-mobile-inner {
        padding:
            104px
            24px
            24px;
    }


    .cs-mobile-meta {
        padding-bottom: 15px;
    }


    .cs-mobile-links > a {
        min-height: 67px;

        grid-template-columns:
            38px
            1fr
            25px;
    }


    .cs-mobile-links > a > strong {
        font-size:
            clamp(27px,8.2vw,38px);
    }


    .cs-mobile-service-toggle {
        min-height: 67px;

        grid-template-columns:
            38px
            1fr
            25px;
    }


    .cs-mobile-service-toggle > strong {
        font-size:
            clamp(27px,8.2vw,38px);
    }


    .cs-mobile-service-submenu {
        padding-left: 38px;
    }


    .cs-mobile-service-submenu a {
        min-height: 42px;
    }


    .cs-mobile-reserve {
        min-height: 58px;

        margin-top: 18px;
    }


    .cs-mobile-bottom {
        flex-direction: column;

        gap: 8px;

        padding-top: 18px;
    }

}



/* =========================================================
   VERY SHORT MOBILE SCREENS
========================================================= */

@media
(max-width: 767px)
and (max-height: 720px) {

    .cs-mobile-links > a {
        min-height: 58px;
    }


    .cs-mobile-links > a > strong {
        font-size: 27px;
    }


    .cs-mobile-service-toggle {
        min-height: 58px;
    }


    .cs-mobile-service-toggle > strong {
        font-size: 27px;
    }


    .cs-mobile-service-submenu a {
        min-height: 38px;
    }


    .cs-mobile-reserve {
        min-height: 52px;
    }

}



/* =========================================================
   BODY OFFSET
========================================================= */

body {
    padding-top: 88px;
}


@media (max-width: 1180px) {

    body {
        padding-top: 86px;
    }

}


@media (max-width: 767px) {

    body {
        padding-top: 85px;
    }

}



/* =========================================================
   MENU OPEN LOCK
========================================================= */

html.cs-menu-lock,
html.cs-menu-lock body {
    overflow: hidden !important;

    touch-action: none;
}






/* =========================================================
   CONECTADOS SPA — HEADER GLOBAL
   AJUSTES FINALES 2026
   MORADO + NUEVOS SERVICIOS
========================================================= */


/* =========================================================
   01. COLOR GLOBAL DE ACCIÓN
========================================================= */

.cs-header {
    --cs-purple: #75438f;
    --cs-purple-dark: #603473;
    --cs-whatsapp: #25d366;
}


/* =========================================================
   02. DESKTOP — CTA RESERVAR
========================================================= */

.cs-reserve {
    background: var(--cs-purple);
    border-color: var(--cs-purple);

    color: #ffffff;

    box-shadow:
        0 8px 22px
        rgba(117, 67, 143, .18);
}


.cs-reserve:hover {
    background: var(--cs-purple-dark);
    border-color: var(--cs-purple-dark);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(117, 67, 143, .25);
}


/* =========================================================
   03. TABLET / MOBILE — HAMBURGUESA
========================================================= */

.cs-toggle {
    background: var(--cs-purple);
    border-color: var(--cs-purple);

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


/* líneas hamburguesa */

.cs-toggle span {
    background: #ffffff;
}


/* =========================================================
   04. MENÚ ABIERTO — X MORADA
========================================================= */

.cs-header.cs-open .cs-toggle {
    background: transparent;

    border-color:
        rgba(117, 67, 143, .75);
}


.cs-header.cs-open .cs-toggle span {
    background: var(--cs-purple);
}


/* =========================================================
   05. SUBMENU SERVICIOS — 8 SERVICIOS
========================================================= */

.cs-mobile-service-group.is-open
.cs-mobile-service-submenu {
    max-height: 650px;
}


/* =========================================================
   06. MOBILE — RESERVAR POR WHATSAPP
========================================================= */

.cs-mobile-reserve {
    background: var(--cs-whatsapp);

    border-color: var(--cs-whatsapp);

    color: #ffffff;
}


.cs-mobile-reserve:hover {
    background: #20bd5a;

    border-color: #20bd5a;

    color: #ffffff;
}


/* =========================================================
   07. MOBILE — AJUSTE PARA PANTALLAS BAJAS
========================================================= */

@media
(max-width: 767px)
and (max-height: 720px) {

    .cs-mobile-service-group.is-open
    .cs-mobile-service-submenu {
        max-height: 600px;
    }

}/* End custom CSS */