/* ==========================================================
   V&V SWISS SERVICES
   HEADER RESPONSIVE - VERSIÓN DEFINITIVA
   ==========================================================

   LÓGICA DE VISIBILIDAD

   1600px o más
   ✓ Logo
   ✓ Menú principal
   ✓ Teléfono
   ✓ Idiomas
   ✓ Buscador
   ✓ Botón lateral

   1400px - 1599px
   ✓ Logo
   ✓ Menú principal
   ✗ Teléfono
   ✓ Idiomas
   ✓ Buscador
   ✓ Botón lateral

   1200px - 1399px
   ✓ Logo
   ✓ Menú principal
   ✗ Teléfono
   ✓ Idiomas
   ✓ Buscador
   ✓ Botón lateral

   768px - 1199px
   ✓ Logo
   ✗ Menú principal
   ✗ Teléfono
   ✓ Idiomas móvil
   ✓ Buscador
   ✓ Botón lateral

   Menos de 768px
   ✓ Logo
   ✗ Menú principal
   ✗ Teléfono
   ✓ Idiomas móvil
   ✗ Buscador
   ✓ Botón lateral

   PRINCIPIO:
   Un elemento no desaparece para volver a aparecer después.

========================================================== */


/* ==========================================================
   01. ESTRUCTURA GENERAL
========================================================== */

.header-4 .primary-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}


/* ==========================================================
   02. ZONA IZQUIERDA
   Logo + menú principal
========================================================== */

.header-4 .header-left-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    flex: 1 1 auto;
    min-width: 0;
}


/* ==========================================================
   03. LOGO

   Siempre visible.
   Nunca debe comprimirse.
========================================================== */

.header-4 .header-logo {
    display: block !important;
    flex: 0 0 auto;
}


/* ==========================================================
   04. CONTENEDOR DEL MENÚ PRINCIPAL
========================================================== */

.header-4 .header-menu-wrap {
    flex: 1 1 auto;
    min-width: 0;
}


/* ==========================================================
   05. MENÚ PRINCIPAL

   Mientras esté visible:
   - una sola fila
   - textos sin saltos
========================================================== */

.header-4 .mobile-menu-items > ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.header-4 .mobile-menu-items > ul > li {
    flex: 0 0 auto;
}

.header-4 .mobile-menu-items > ul > li > a {
    white-space: nowrap;
}


/* ==========================================================
   06. ZONA DERECHA

   Contiene:
   - Teléfono
   - Idiomas desktop
   - Idiomas móvil
   - Buscador
   - Botón lateral
========================================================== */

.header-4 .header-right-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    flex: 0 0 auto;
}


/* ==========================================================
   07. ESTADO BASE DE LOS IDIOMAS MÓVILES

   Ocultos por defecto.
   Se activan únicamente debajo de 1200px.
========================================================== */

.header-4 .header-language-mobile {
    display: none !important;
}


/* ==========================================================
   08. DESKTOP GRANDE
   1600px EN ADELANTE
/* ==========================================================
   1600px EN ADELANTE
   DESKTOP COMPLETO
========================================================== */

@media (min-width: 1600px) {

    .header-4 .header-menu-wrap {
        display: block !important;
    }

    .header-4 .header-contact {
        display: flex !important;
    }

    .header-4 .header-language {
        display: flex !important;
    }

    .header-4 .header-language-mobile {
        display: none !important;
    }

    .header-4 .search-icon {
        display: flex !important;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
    }
}


/* ==========================================================
   1400px - 1599px
   DESKTOP REDUCIDO
========================================================== */

@media (min-width: 1400px) and (max-width: 1599px) {

    .header-4 .header-menu-wrap {
        display: block !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: none !important;
    }

    .header-4 .search-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    /* MENÚ REDUCIDO */

    .header-4 .mobile-menu-items > ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
    }

    .header-4 .mobile-menu-items > ul > li {
        flex: 0 0 auto;
        margin-left: 6px;
        margin-right: 6px;
    }

    .header-4 .mobile-menu-items > ul > li > a {
        font-size: 14px;
        white-space: nowrap;
    }
}


/* ==========================================================
   768px - 1399px
   TABLET / LAPTOP PEQUEÑO
   MODO MÓVIL
========================================================== */

@media (min-width: 768px) and (max-width: 1399px) {

    .header-4 .header-menu-wrap {
        display: none !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: none !important;
    }

    .header-4 .search-icon {
        display: none !important;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;

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

        gap: 5px !important;
        white-space: nowrap !important;
    }

    .header-4 .header-language-mobile > form {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ==========================================================
   MENOS DE 768px
   MÓVIL COMPACTO
========================================================== */

@media (max-width: 767px) {

    .header-4 .header-menu-wrap {
        display: none !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: none !important;
    }

    .header-4 .search-icon {
        display: none !important;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;

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

        gap: 2px !important;
        white-space: nowrap !important;
    }

    .header-4 .header-language-mobile > form {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================
   13. FORMULARIOS DE IDIOMAS MÓVILES

   Estas reglas aplican siempre que
   .header-language-mobile esté visible.

   Evitan que FR / DE / IT / EN
   aparezcan uno debajo del otro.
========================================================== */

.header-4 .header-language-mobile > form {
    display: inline-flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

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

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   14. BOTONES DE IDIOMAS MÓVILES
========================================================== */

.header-4 .header-language-mobile > form > button {
    display: inline-flex !important;

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

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    cursor: pointer;
}


/* ==========================================================
   15. SEPARADORES DE IDIOMAS

   FR / DE / IT / EN
========================================================== */

.header-4 .header-language-mobile > span {
    display: inline-flex !important;

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

    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    opacity: 0.5;
}


/* ==========================================================
   16. IDIOMA ACTIVO
========================================================== */

.header-4 .header-language-mobile > form > button.active {
    font-weight: 700 !important;
    opacity: 1 !important;
}


/* ==========================================================
   17. TELÉFONOS MUY PEQUEÑOS
   MENOS DE 480px

   Conservamos:

   LOGO       FR/DE/IT/EN       BOTÓN

   Solamente reducimos espacios.
========================================================== */

@media (max-width: 479px) {

    .header-4 .header-language-mobile {
        gap: 2px !important;

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

    .header-4 .header-language-mobile > form > button {
        font-size: 13px !important;
        padding: 1px !important;
    }

    .header-4 .header-language-mobile > span {
        font-size: 12px !important;
    }

}


/* ==========================================================
   FIN
   V&V SWISS SERVICES
   HEADER RESPONSIVE
========================================================== */


/* ==========================================================
   SERVICIOS HOME · IMÁGENES CUADRADAS 1:1
   SERVICES HOME · IMAGES CARRÉES 1:1
========================================================== */

/* El contenedor define físicamente el cuadrado */
.project-section-inner .project-item .project-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}


/* El enlace ocupa exactamente el cuadrado */
.project-section-inner .project-item .project-img > a {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}


/* La imagen llena el cuadrado sin deformarse */
.project-section-inner .project-item .project-img .service-square-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
}



/* ==========================================================
   SERVICIOS HOME · IMÁGENES CUADRADAS 1:1
   SERVICES HOME · IMAGES CARRÉES 1:1
========================================================== */

.services-home-grid .project-item .project-img {
    height: auto;
    aspect-ratio: 1 / 1;
}

.services-home-grid .project-item .project-img a {
    width: 100%;
    height: 100%;
}

.services-home-grid .project-item .project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================
   CONTACT FORM
   SERVICE SELECT NATIVO
   Evita duplicación causada por Nice Select / Select2
   ========================================================== */

#id_service {
    display: block !important;
    width: 100% !important;
}

/* Nice Select generado automáticamente */
#id_service + .nice-select,
#id_service ~ .nice-select {
    display: none !important;
}

/* Select2 generado automáticamente */
#id_service + .select2-container,
#id_service ~ .select2-container {
    display: none !important;
}


/* ==========================================================
   V&V SWISS SERVICES
   HEADER RESPONSIVE DEFINITIVO
========================================================== */


/* ==========================================================
   BASE GENERAL
========================================================== */

.header-4 .primary-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.header-4 .header-left-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.header-4 .header-logo {
    display: block !important;
    flex: 0 0 auto;
}

.header-4 .header-menu-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.header-4 .mobile-menu-items > ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.header-4 .mobile-menu-items > ul > li {
    flex: 0 0 auto;
}

.header-4 .mobile-menu-items > ul > li > a {
    white-space: nowrap;
}

.header-4 .header-right-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.header-4 .header-language-mobile {
    display: none !important;
}


/* ==========================================================
   1600px EN ADELANTE
   DESKTOP GRANDE

   LOGO
   MENÚ COMPLETO
   TELÉFONO
   IDIOMAS
   BUSCADOR
   BOTÓN LATERAL
========================================================== */

@media (min-width: 1600px) {

    .header-4 .header-menu-wrap {
        display: block !important;
    }

    .header-4 .header-contact {
        display: flex !important;
    }

    .header-4 .header-language {
        display: flex !important;
    }

    .header-4 .header-language-mobile {
        display: none !important;
    }

    .header-4 .search-icon {
        display: flex !important;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
    }

}


/* ==========================================================
   1400px - 1599px
   DESKTOP NORMAL

   LOGO
   MENÚ REDUCIDO
   IDIOMAS
   BUSCADOR
   BOTÓN LATERAL

   TELÉFONO OCULTO
========================================================== */

@media (min-width: 1400px) and (max-width: 1599px) {

    .header-4 .header-menu-wrap {
        display: block !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: none !important;
    }

    .header-4 .search-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    /* MENÚ REDUCIDO */

    .header-4 .mobile-menu-items > ul {
        gap: 0;
    }

    .header-4 .mobile-menu-items > ul > li {
        margin-left: 7px;
        margin-right: 7px;
    }

    .header-4 .mobile-menu-items > ul > li > a {
        font-size: 14px;
        white-space: nowrap;
    }

}


/* ==========================================================
   1200px - 1399px
   LAPTOP / DESKTOP PEQUEÑO

   LOGO
   MENÚ MÁS REDUCIDO
   IDIOMAS
   BUSCADOR
   BOTÓN LATERAL

   TELÉFONO OCULTO
========================================================== */

@media (min-width: 1200px) and (max-width: 1399px) {

    .header-4 .header-menu-wrap {
        display: block !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: none !important;
    }

    .header-4 .search-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    /* MENÚ MÁS COMPACTO */

    .header-4 .mobile-menu-items > ul {
        gap: 0;
    }

    .header-4 .mobile-menu-items > ul > li {
        margin-left: 5px;
        margin-right: 5px;
    }

    .header-4 .mobile-menu-items > ul > li > a {
        font-size: 13px;
        white-space: nowrap;
    }

}


/* ==========================================================
   768px - 1199px
   TABLET / LAPTOP PEQUEÑO

   LOGO
   IDIOMAS MÓVILES
   BOTÓN LATERAL

   OCULTOS:
   MENÚ HORIZONTAL
   TELÉFONO
   IDIOMAS DESKTOP
   BUSCADOR
========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .header-4 .header-menu-wrap {
        display: none !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: none !important;
    }

    .header-4 .search-icon {
        display: none !important;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

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

        gap: 5px !important;

        white-space: nowrap !important;
    }

    .header-4 .header-language-mobile > form {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

}


/* ==========================================================
   MENOS DE 768px
   MÓVIL

   LOGO
   IDIOMAS MÓVILES
   BOTÓN LATERAL

   MÁS COMPACTO
========================================================== */

@media (max-width: 767px) {

    .header-4 .header-menu-wrap {
        display: none !important;
    }

    .header-4 .header-contact {
        display: none !important;
    }

    .header-4 .header-language {
        display: none !important;
    }

    .header-4 .search-icon {
        display: none !important;
    }

    .header-4 .sidebar-icon {
        display: flex !important;
        flex: 0 0 auto;
    }

    .header-4 .header-language-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;

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

        gap: 2px !important;

        white-space: nowrap !important;
    }

    .header-4 .header-language-mobile > form {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

}




/* ==========================================================
   V&V SWISS SERVICES
   PRELOADER
========================================================== */

.vvs-preloader {
    background: #111;
}


/* ==========================================================
   FONDO
========================================================== */

.vvs-preloader .vvs-preloader-brand {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-color: #111;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 1;

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

    overflow: hidden;
}


/* ==========================================================
   OVERLAY
========================================================== */

.vvs-preloader-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            135deg,
            rgba(5, 15, 22, 0.50),
            rgba(5, 15, 22, 0.25)
        );

    pointer-events: none;
}


/* ==========================================================
   CONTENIDO
========================================================== */

.vvs-preloader-content {
    position: relative;

    z-index: 3;

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

    width: 100%;
    height: 100%;

    padding: 30px;

    text-align: center;
}


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

.vvs-preloader-logo {
    display: block;

    width: min(320px, 60vw);
    max-width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 30px rgba(0, 0, 0, 0.28)
        );
}


/* ==========================================================
   TEXTO FALLBACK
========================================================== */

.vvs-preloader-content span {
    color: #fff;

    font-size: 48px;
    line-height: 1.1;

    text-shadow:
        0 5px 22px rgba(0, 0, 0, 0.35);
}


/* ==========================================================
   BARRAS ANIMACIÓN
========================================================== */

.vvs-preloader .preloader-gutters {
    z-index: 2;
    pointer-events: none;
}

.vvs-preloader .preloader-gutters .inner-bar {
    background-color: rgba(255, 255, 255, 0.10);
}


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

@media (max-width: 1199px) {

    .vvs-preloader-logo {
        width: min(280px, 60vw);
    }

}


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

@media (max-width: 767px) {

    .vvs-preloader .vvs-preloader-brand {
        background-position: center center;
    }

    .vvs-preloader-logo {
        width: min(220px, 65vw);
    }

    .vvs-preloader-content span {
        font-size: 32px;
    }

    .vvs-preloader-overlay {
        background: rgba(5, 15, 22, 0.38);
    }

}

/* ==========================================================
   V&V SWISS SERVICES
   DESKTOP DROPDOWN MENU · FIX FINAL
   ========================================================== */

/*
   El menú desplegable mantiene el mismo aspecto
   en todos los tamaños donde el menú horizontal está activo.

   - Fondo oscuro
   - Texto blanco
   - Hover verde
   - Sin heredar el texto negro de header-4
   - Mayor z-index para evitar solapamientos
*/

@media (min-width: 1200px) {

    /* CONTENEDOR DEL SUBMENÚ */
    .header-4
    .primary-header-inner
    .header-menu-wrap
    .mobile-menu-items > ul > li > ul {
        background-color: var(--tl-color-bg-1, #1c1c1d) !important;
        border-radius: 18px !important;
        overflow: hidden;
        z-index: 9999 !important;
    }

    /* ITEMS */
    .header-4
    .primary-header-inner
    .header-menu-wrap
    .mobile-menu-items > ul > li > ul > li {
        background-color: transparent !important;
        margin: 0 !important;
    }

    /* TEXTO DEL SUBMENÚ */
    .header-4
    .primary-header-inner
    .header-menu-wrap
    .mobile-menu-items > ul > li > ul > li > a {
        display: block;
        width: 100%;
        background-color: transparent !important;
        color: var(--tl-color-common-white, #ffffff) !important;
        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            padding-left 0.25s ease;
    }

    /* HOVER */
    .header-4
    .primary-header-inner
    .header-menu-wrap
    .mobile-menu-items > ul > li > ul > li:hover > a {
        background-color: var(--tl-color-theme-primary, #0a4c03) !important;
        color: var(--tl-color-common-white, #ffffff) !important;
        padding-left: 35px;
    }

    /* ITEM ACTIVO */
    .header-4
    .primary-header-inner
    .header-menu-wrap
    .mobile-menu-items > ul > li > ul > li.active > a {
        background-color: var(--tl-color-theme-primary, #0a4c03) !important;
        color: var(--tl-color-common-white, #ffffff) !important;
    }

    /* LÍNEA DECORATIVA DE ANTRA */
    .header-4
    .primary-header-inner
    .header-menu-wrap
    .mobile-menu-items > ul > li > ul > li > a::before {
        background-color: var(--tl-color-common-white, #ffffff) !important;
    }
}

static/css/vvswinss-theme.css

/* ==========================================================
   V&V SWISS SERVICES
   SIDEBAR OSCURO · TEXTO BLANCO
   ========================================================== */

#sidebar-area {
    background-color: #1c1c1d !important;
    color: #ffffff !important;
}

/* MENÚ PRINCIPAL */
#sidebar-area .mean-bar .mean-nav ul li > a {
    color: #ffffff !important;
    background: transparent !important;
}

/* FLECHAS / EXPANDIR */
#sidebar-area .mean-bar .mean-nav a.mean-expand {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
}

/* SUBMENÚS */
#sidebar-area .mean-bar .mean-nav ul ul li > a {
    color: #ffffff !important;
    background: transparent !important;
}

/* TEXTO GENERAL DEL SIDEBAR */
#sidebar-area .side-menu-about,
#sidebar-area .side-menu-about .title,
#sidebar-area .side-menu-contact,
#sidebar-area .side-menu-list li,
#sidebar-area .side-menu-list li a,
#sidebar-area .side-menu-list li p,
#sidebar-area .side-menu-content p,
#sidebar-area .side-menu-content span {
    color: #ffffff !important;
}

/* BOTÓN CERRAR */
#sidebar-area .sidebar-trigger.close,
#sidebar-area .sidebar-trigger.close svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* HOVER Y ACTIVO */
#sidebar-area .mean-bar .mean-nav ul li > a:hover,
#sidebar-area .mean-bar .mean-nav ul li.active > a {
    color: var(--tl-color-theme-primary, #0a4c03) !important;
}

/* ==========================================================
   V&V SWISS SERVICES
   SIDEBAR OSCURO EN TODOS LOS TAMAÑOS
   ========================================================== */

/* PANEL LATERAL SIEMPRE OSCURO */
#sidebar-area {
    background-color: #1c1c1d !important;
    color: #ffffff !important;
}


/* ==========================================================
   TABLET Y MÓVIL
   Mantener el mismo fondo oscuro del escritorio
   ========================================================== */

@media (max-width: 992px) {

    #sidebar-area {
        background-color: #1c1c1d !important;
        color: #ffffff !important;
    }

    /* MENÚ PRINCIPAL */
    #sidebar-area .mean-bar .mean-nav ul li > a {
        color: #ffffff !important;
        background-color: transparent !important;
    }

    /* SUBMENÚS */
    #sidebar-area .mean-bar .mean-nav ul ul li > a {
        color: #ffffff !important;
        background-color: transparent !important;
    }

    /* FLECHAS */
    #sidebar-area .mean-bar .mean-nav a.mean-expand,
    #sidebar-area .mean-bar .mean-nav a.mean-expand i {
        color: #ffffff !important;
        background-color: transparent !important;
    }

    /* TEXTOS GENERALES */
    #sidebar-area .side-menu-about,
    #sidebar-area .side-menu-about .title,
    #sidebar-area .side-menu-contact,
    #sidebar-area .side-menu-list li,
    #sidebar-area .side-menu-list li a,
    #sidebar-area .side-menu-list li p,
    #sidebar-area .side-menu-content p,
    #sidebar-area .side-menu-content span {
        color: #ffffff !important;
    }

    /* BOTÓN CERRAR */
    #sidebar-area .sidebar-trigger.close,
    #sidebar-area .sidebar-trigger.close svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* SEPARADORES */
    #sidebar-area .mean-bar .mean-nav.mean-nav > ul > li {
        border-bottom-color: rgba(255, 255, 255, 0.18) !important;
    }

    /* HOVER / ACTIVO */
    #sidebar-area .mean-bar .mean-nav ul li > a:hover,
    #sidebar-area .mean-bar .mean-nav ul li.active > a,
    #sidebar-area .mean-bar .mean-nav a.mean-expand:hover {
        color: var(--tl-color-theme-primary, #0a4c03) !important;
    }
}
/* ==========================================================
   V&V SWISS SERVICES
   LOGOS · PROPORCIÓN ORIGINAL
   Evita deformación vertical u horizontal
   ========================================================== */


/* ==========================================================
   01. LOGO PRINCIPAL DEL HEADER
   ========================================================== */

.header-4 .header-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

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

    object-fit: contain !important;
    object-position: center !important;

    aspect-ratio: auto !important;
}


/* El contenedor conserva los tamaños originales del tema */

.header-4 .header-logo {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
}


/* ==========================================================
   02. LOGO DEL PANEL LATERAL OSCURO
   ========================================================== */

#sidebar-area .side-menu-logo {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
}

#sidebar-area .side-menu-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

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

    object-fit: contain !important;
    object-position: left center !important;

    aspect-ratio: auto !important;
}


/* ==========================================================
   03. LOGO DEL MENÚ MÓVIL
   ========================================================== */

.mobile-side-menu .side-menu-head > a {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

.mobile-side-menu .side-menu-head > a img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 150px !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: left center !important;

    aspect-ratio: auto !important;
}


/* ==========================================================
   04. LOGO DEL FOOTER
   ========================================================== */

.footer-section .footer-logo {
    width: auto !important;
    height: auto !important;
    max-width: 170px !important;
}

.footer-section .footer-logo a {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

.footer-section .footer-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

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

    object-fit: contain !important;
    object-position: left center !important;

    aspect-ratio: auto !important;
}


/* ==========================================================
   05. LOGO DEL PRELOADER
   ========================================================== */

.vvs-preloader-logo {
    width: auto !important;
    height: auto !important;

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

    object-fit: contain !important;
    aspect-ratio: auto !important;
}

/* ==========================================================
   V&V SWISS SERVICES
   LOGOS · TAMAÑO AJUSTADO
   ========================================================== */

/* HEADER */
.header-4 .header-logo img {
    max-width: 150px !important;
}

/* SIDEBAR */
#sidebar-area .side-menu-logo {
    max-width: 140px !important;
}

/* MENÚ MÓVIL */
.mobile-side-menu .side-menu-head > a img {
    max-width: 140px !important;
}

/* FOOTER */
.footer-section .footer-logo {
    max-width: 155px !important;
}

/* ==========================================================
   V&V SWISS SERVICES
   CORRECCIÓN DE PROPORCIONES DE IMÁGENES
   ========================================================== */


/* ==========================================================
   EMPRESA / EXPERIENCIA
   Imagen principal cuadrada
   ========================================================== */

.about-img-wrap-3 .about-img-1 {
    overflow: hidden;
}

.about-img-wrap-3 .about-img-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   EMPRESA / EXPERIENCIA
   Imagen horizontal 1448 x 1086 = 4:3
   NO forzarla a una caja vertical
   ========================================================== */

.about-img-wrap-3 .about-img-2 {
    max-width: 420px;
    width: 100%;

    height: auto !important;
    aspect-ratio: 4 / 3;

    position: absolute;
    right: 0;
    bottom: 0;

    overflow: hidden;
    z-index: 1;

    border-radius: 24px;
}

.about-img-wrap-3 .about-img-2 img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 24px;
}


/* ==========================================================
   SAVOIR-FAIRE
   Imagen 1448 x 1086 = 4:3
   ========================================================== */

.skill-img {
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
}

.skill-img img {
    display: block;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: auto !important;
    object-fit: contain !important;

    border-radius: 24px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767px) {

    .about-img-wrap-3 .about-img-2 {
        max-width: 72%;
        aspect-ratio: 4 / 3;
    }

    .skill-img img {
        width: 100% !important;
        height: auto !important;
    }
}