/* =========================================
   URUZ - BOTÓN MODO CLARO / OSCURO
========================================= */
:root{

--bg:#FFFFFF;

--surface:#F8F8F8;

--text:#434343;

--gold:#B38E40;

}
-----Modo oscuro-------
html.dark{

--bg:#434343;

--surface:#434343;

--text:#D5D5D5;

--gold:#B38E40;

}

.theme-toggle {
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #eeeeee;
    border: 1px solid #dddddd;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: background 0.3s ease;
}

.toggle-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #434343;

    position: absolute;
    top: 2px;
    left: 3px;

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

    color: #ffffff;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


/* MODO OSCURO */

html.dark .theme-toggle {
    background: #3d2030;
}

html.dark .toggle-thumb {
    transform: translateX(23px);
    background: #b38e40;
}


/* ICONOS */

.icon-sun,
.icon-moon {
    width: 12px;
    height: 12px;
}

.icon-moon {
    display: none;
}

html.dark .icon-sun {
    display: none;
}

html.dark .icon-moon {
    display: block;
}
/*=========================================================
                    URUZ MASSAGE THEME
==========================================================

/*=========================================================
                    VARIABLES
=========================================================*/

:root{

    /* Fondo principal */

    --bg:#FFFFFF;

    /* Tarjetas */

    --surface:#F8F8F8;

    /* Texto */

    --text:#434343;

    /* Texto secundario */

    --text-light:#777777;

    /* Color institucional */

    --gold:#B38E40;

    /* Bordes */

    --border:#E7E7E7;

}



/*=========================================================
                VARIABLES MODO OSCURO
=========================================================*/

html.dark{

    /* Fondo principal */

    --bg:#434343;

    /* Superficies */

    --surface:#434343;

    /* Texto */

    --text:#D5D5D5;

    /* Texto secundario */

    --text-light:#D5D5D5;

    /* Dorado */

    --gold:#B38E40;

    /* Bordes */

    --border:rgba(255,255,255,.10);

}
/*=========================================================
                    BODY
=========================================================*/

body{

    background:var(--bg);

    color:var(--text);

    transition:

        background .35s ease,

        color .35s ease;

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

.navbar{

    transition:

        background .35s ease,

        color .35s ease;

}


html.dark .navbar{

    background:var(--surface)!important;

}


html.dark .navbar-light .navbar-nav .nav-link{

    color:var(--text);

}


html.dark .navbar-light .navbar-nav .nav-link:hover{

    color:var(--gold);

}


html.dark .navbar-brand .text-dark{

    color:var(--text)!important;

}
/*=========================================================
                    TITULOS
=========================================================*/

html.dark h1,

html.dark h2,

html.dark h3,

html.dark h4,

html.dark h5,

html.dark h6{

    color:var(--text);

}
/*=========================================================
                    PARRAFOS
=========================================================*/

html.dark p,

html.dark li,

html.dark span{

    color:var(--text-light);

}
/*=========================================================*
*CARDS*
*=========================================================*/

html.dark .bg-white{

    background:var(--surface)!important;

}

html.dark .bg-light{

    background:var(--surface)!important;

}

html.dark .pricing-carousel .bg-white{

    background:#805A40!important;

}

html.dark .hours-text{

    background:#805A40!important;

}
/*=========================================================
                    GOLD
=========================================================*/

html.dark .text-primary{

    color:var(--gold)!important;

}


html.dark .btn-primary{

    background:var(--gold);

    border-color:var(--gold);

}
/* =========================================================
   BOTÓN DE TEMA MOBILE
========================================================= */

/* Por defecto oculto */

@media (max-width: 991.98px) {

    /* 
       El botón original está dentro de #navbarCollapse.
       Lo ocultamos únicamente en teléfonos/tablets.
    */

    #navbarCollapse .theme-toggle {

        display: none !important;

    }

}


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

@media (max-width: 991.98px) {

    .theme-toggle-mobile {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

        margin-left: auto;

        margin-right: 10px;

    }

}


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

@media (min-width: 992px) {

    .theme-toggle-mobile {

        display: none !important;

    }

}
/* OPENING HOURS - MODO OSCURO */

html.dark .hours-text h1 {
    color: #E7E7E7 !important;
}


/* PRECIOS - MODO OSCURO */

html.dark .pricing-carousel span[style*="color: #434343"] {
    color: #E7E7E7 !important;
}
html.dark .pricing-carousel .text-primary {
    color: #D5D5D5 !important;
}

/* =========================================================
   VALORES - MODO OSCURO
========================================================= */


/* =========================================================
   FONDO DE LA SECCIÓN
========================================================= */

html.dark .values-section {
    background: #434343 !important;
}


/* =========================================================
   TARJETAS
   Estado normal: DORADO
========================================================= */

html.dark .ve-card {
    background: #805A40!important;
    color: #D5D5D5 !important;
    border-color: rgba(255,255,255,.25);
}


/* =========================================================
   TARJETAS - HOVER
   Al pasar el cursor: CAFÉ
========================================================= */

html.dark .ve-card:hover {
    background: #B38E40 !important;
}


/* =========================================================
   TÍTULOS Y TEXTOS
========================================================= */

html.dark .ve-card h6 {
    color: #D5D5D5 !important;
}

html.dark .ve-card p {
    color: #D5D5D5 !important;
}


/* =========================================================
   ICONOS
   Líneas en D5D5D5
========================================================= */

html.dark .ve-icon {
    background: transparent;
    border-color: rgba(255,255,255,.25);
}

html.dark .ve-icon svg {
    color: #D5D5D5 !important;
}


/* =========================================================
   LÍNEA DECORATIVA
========================================================= */

html.dark .ve-rule {
    background: #D5D5D5 !important;
}


/* =========================================================
   FLECHAS
========================================================= */

html.dark .ve-arrow {
    background: #B38E40 !important;
    color: #D5D5D5 !important;
    border-color: rgba(255,255,255,.25);
}

html.dark .ve-arrow:hover {
    background: #805A40 !important;
}


/* =========================================================
   INDICADORES
========================================================= */

html.dark .ve-dot {
    background: rgba(255,255,255,.25);
}

html.dark .ve-dot.active {
    background: #B38E40;
}
/* =========================================================
   MISIÓN Y VISIÓN - MODO OSCURO
========================================================= */

html.dark .mv-scope {
    --card-bg: #805A40;
    --ink: #D5D5D5;
    --muted: #D5D5D5;
}


/* =========================================================
   TARJETA - HOVER
========================================================= */

html.dark .mv-scope .mv-card:hover,
html.dark .mv-scope .mv-card:focus-within {
    background: #B38E40 !important;
}


/* =========================================================
   ICONOS
========================================================= */

html.dark .mv-scope .mv-icon {
    color: #D5D5D5 !important;
}

html.dark .mv-scope .mv-icon svg {
    color: #D5D5D5 !important;
}


/* =========================================================
   TEXTOS
========================================================= */

html.dark .mv-scope .mv-eyebrow,
html.dark .mv-scope .mv-card h5,
html.dark .mv-scope .mv-card p {
    color: #D5D5D5 !important;
}


/* Línea inferior */

html.dark .mv-scope .mv-rule {
    background: #D5D5D5 !important;
}
/* =========================================================
   COPYRIGHT
========================================================= */

.copyright-text {
    color: #D5D5D5 !important;
}

html.dark .copyright-text {
    color: #D5D5D5 !important;
}
/* =========================================================
   MISIÓN Y VISIÓN - SEPARACIÓN EN MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .mv-scope .col-md-6 + .col-md-6 {
        margin-top: 24px;
    }

}
/* =========================================================
   BOTÓN TESTIMONIOS - GOOGLE
========================================================= */

/* MODO CLARO */

.testimonial-google-btn {
    background: #434343 !important;
    border-color: #434343 !important;
    color: #FFFFFF !important;
    transition: all .3s ease;
}

/* CLARO + CURSOR */

.testimonial-google-btn:hover {
    background: #B38E40 !important;
    border-color: #B38E40 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   MODO OSCURO
========================================================= */

html.dark .testimonial-google-btn {
    background: #805A40 !important;
    border-color: #805A40 !important;
    color: #D5D5D5 !important;
}

/* OSCURO + CURSOR */

html.dark .testimonial-google-btn:hover {
    background: #B38E40 !important;
    border-color: #B38E40 !important;
    color: #D5D5D5 !important;
}