.elementor-65 .elementor-element.elementor-element-54555e0{--display:flex;}.elementor-65 .elementor-element.elementor-element-a2d4b30{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-65 .elementor-element.elementor-element-54555e0{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-65 .elementor-element.elementor-element-a2d4b30{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0em 2em 0em 2em;}}/* Start custom CSS for html, class: .elementor-element-a2d4b30 *//* ==================================================
   HEADER MARY SPA
   DESKTOP + TABLET + MOBILE
================================================== */

.mary-header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    z-index:9999;

    background:rgba(255,250,249,.97);

    border-bottom:1px solid rgba(74,14,26,.08);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 4px 22px rgba(74,14,26,.035);
}

#nosotros,
#servicios,
#tecnologias,
#contacto{
    scroll-margin-top:110px;
}
/* ==================================================
   CONTENEDOR PRINCIPAL
================================================== */

.mary-container{
    width:100%;
    max-width:1280px;

    min-height:96px;

    margin:0 auto;

    /* ESTE PADDING LO CONTROLA EL CSS, NO ELEMENTOR */
    padding:0 36px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:32px;

    box-sizing:border-box;
}


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

.mary-logo{
    display:flex;
    align-items:center;

    gap:14px;

    flex-shrink:0;

    text-decoration:none !important;
}


/* CÍRCULO VINOTINTO */

.mary-logo-icon{
    width:72px;
    height:72px;

    flex:0 0 72px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:7px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #4A0E1A 0%,
            #6F1428 55%,
            #8B1B31 100%
        );

    box-shadow:
        0 6px 18px rgba(74,14,26,.16);

    overflow:hidden;

    box-sizing:border-box;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* IMAGEN DEL LOGO */

.mary-logo-icon img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    border-radius:50%;
}


/* HOVER MUY SUAVE */

.mary-logo:hover .mary-logo-icon{
    transform:translateY(-2px);

    box-shadow:
        0 9px 22px rgba(74,14,26,.20);
}


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

.mary-logo-text{
    display:flex;
    flex-direction:column;

    gap:4px;

    line-height:1;
}

.mary-logo-title{
    font-family:'Cormorant Garamond',serif;

    font-size:25px;
    font-weight:600;

    line-height:1;

    color:#4A0E1A;
}

.mary-logo-subtitle{
    font-family:'Karla',sans-serif;

    font-size:9px;
    font-weight:600;

    line-height:1.2;

    letter-spacing:1.8px;

    text-transform:uppercase;

    color:#8B1B31;
}


/* ==================================================
   NAVEGACIÓN DESKTOP
================================================== */

.mary-nav{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:30px;

    margin-left:auto;
}


/* ENLACES */

.mary-nav > a:not(.mary-btn-mobile){
    position:relative;

    display:flex;
    align-items:center;

    min-height:96px;

    padding:0;

    font-family:'Karla',sans-serif;

    font-size:13px;
    font-weight:500;

    line-height:1;

    color:#4A0E1A;

    text-decoration:none !important;

    transition:color .25s ease;
}


/* LÍNEA HOVER */

.mary-nav > a:not(.mary-btn-mobile)::after{
    content:"";

    position:absolute;

    left:0;
    bottom:28px;

    width:100%;
    height:1px;

    background:#8B1B31;

    transform:scaleX(0);
    transform-origin:left center;

    transition:transform .25s ease;
}

.mary-nav > a:not(.mary-btn-mobile):hover{
    color:#8B1B31;
}

.mary-nav > a:not(.mary-btn-mobile):hover::after{
    transform:scaleX(1);
}


/* ==================================================
   ACCIONES
================================================== */

.mary-header-actions{
    display:flex;
    align-items:center;

    gap:12px;

    flex-shrink:0;
}


/* ==================================================
   BOTÓN RESERVAR DESKTOP
================================================== */

.mary-btn{
    display:inline-flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    min-width:158px;

    padding:13px 17px;

    border:1px solid #8B1B31;
    border-radius:3px;

    background:#8B1B31;

    font-family:'Karla',sans-serif;

    font-size:12px;
    font-weight:600;

    line-height:1;

    color:#FFFFFF !important;

    text-decoration:none !important;

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

.mary-btn span{
    font-size:16px;

    line-height:1;

    transition:transform .25s ease;
}

.mary-btn:hover{
    background:#5A0018;

    border-color:#5A0018;

    transform:translateY(-2px);
}

.mary-btn:hover span{
    transform:translateX(4px);
}


/* ==================================================
   BOTÓN MOBILE DEL MENÚ
================================================== */

.mary-btn-mobile{
    display:none;
}


/* ==================================================
   HAMBURGUESA
================================================== */

.mary-toggle{
    display:none;

    position:relative;

    width:46px;
    height:46px;

    padding:0;

    border:1px solid rgba(139,27,49,.20);

    border-radius:50%;

    background:#F7E8EA;

    cursor:pointer;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:5px;

    box-shadow:none;

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


/* LAS TRES LÍNEAS */

.mary-toggle span{
    display:block;

    width:19px;
    height:1.5px;

    margin:0;

    background:#5A0018;

    border-radius:10px;

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


/* HOVER */

.mary-toggle:hover{
    background:#8B1B31;

    border-color:#8B1B31;
}

.mary-toggle:hover span{
    background:#FFFFFF;
}


/* MENÚ ABIERTO */

.mary-toggle.active{
    background:#5A0018;

    border-color:#5A0018;
}

.mary-toggle.active span{
    background:#FFFFFF;
}

.mary-toggle.active span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
}

.mary-toggle.active span:nth-child(2){
    opacity:0;
}

.mary-toggle.active span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
}


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

@media(max-width:1100px){

    .mary-container{
        padding-left:28px;
        padding-right:28px;

        gap:22px;
    }

    .mary-nav{
        gap:20px;
    }

    .mary-nav > a:not(.mary-btn-mobile){
        font-size:12px;
    }

    .mary-logo-icon{
        width:66px;
        height:66px;

        flex-basis:66px;
    }

    .mary-logo-title{
        font-size:22px;
    }

    .mary-btn{
        min-width:145px;

        padding:12px 14px;
    }

}


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

@media(max-width:767px){

    /* HEADER */

    .mary-header{
        background:rgba(255,250,249,.98);
    }


    /* CONTENEDOR */

    .mary-container{
        position:relative;

        min-height:78px;

        padding-left:18px;
        padding-right:18px;

        gap:14px;
    }


    /* LOGO */

    .mary-logo{
        gap:10px;
    }

    .mary-logo-icon{
        width:58px;
        height:58px;

        flex:0 0 58px;

        padding:6px;

        box-shadow:
            0 5px 14px rgba(74,14,26,.14);
    }

    .mary-logo-title{
        font-size:21px;
    }

    .mary-logo-subtitle{
        font-size:7.5px;

        letter-spacing:1.3px;
    }


    /* ESCONDER CTA DESKTOP */

    .mary-desktop-btn{
        display:none;
    }


    /* HAMBURGUESA */

    .mary-toggle{
        display:flex;

        flex-shrink:0;
    }


    /* MENÚ DESPLEGABLE */

    .mary-nav{
        position:absolute;

        top:100%;
        left:-18px;

        width:calc(100% + 36px);

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:0;

        margin:0;

        padding:0 18px;

        max-height:0;

        overflow:hidden;

        background:#FFF9F8;

        border-top:1px solid rgba(74,14,26,.06);
        border-bottom:1px solid rgba(74,14,26,.10);

        box-shadow:
            0 15px 30px rgba(74,14,26,.08);

        opacity:0;

        visibility:hidden;

        transition:
            max-height .35s ease,
            opacity .25s ease,
            visibility .25s ease;

        box-sizing:border-box;
    }


    /* MENÚ ABIERTO */

    .mary-nav.active{
        max-height:560px;

        opacity:1;

        visibility:visible;
    }


    /* LINKS MOBILE */

    .mary-nav > a:not(.mary-btn-mobile){
    display:flex;
    align-items:center;

    min-height:auto;
    width:100%;

    /* MÁS AIRE INTERNO */
    padding:18px 14px;

    border-bottom:1px solid rgba(74,14,26,.075);

    font-size:13px;
    font-weight:500;

    color:#4A0E1A;

    box-sizing:border-box;
}

    .mary-nav > a:not(.mary-btn-mobile)::after{
        display:none;
    }


    /* CTA WHATSAPP MOBILE */

    .mary-btn-mobile{
    display:flex;

    align-items:center;
    justify-content:center;

    width:auto;

    margin:16px 10px 20px;

    padding:15px 18px;

    border-radius:4px;

    background:#8B1B31;

    font-family:'Karla',sans-serif;

    font-size:12px;
    font-weight:600;

    color:#FFFFFF !important;

    text-decoration:none !important;

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

.mary-btn-mobile:hover{
    background:#5A0018;
}

}


/* ==================================================
   MOBILE PEQUEÑO
================================================== */

@media(max-width:390px){

    .mary-container{
        padding-left:14px;
        padding-right:14px;
    }

    .mary-nav{
        left:-14px;

        width:calc(100% + 28px);

        padding-left:14px;
        padding-right:14px;
    }

    .mary-logo-icon{
        width:54px;
        height:54px;

        flex-basis:54px;
    }

    .mary-logo-title{
        font-size:19px;
    }

    .mary-logo-subtitle{
        font-size:7px;

        letter-spacing:1px;
    }

    .mary-toggle{
        width:43px;
        height:43px;
    }

}/* End custom CSS */