/* ----------------------------------------------------------------
	Custom CSS (bundle)

	AUTO-GENERADO. No editar este fichero a mano.
	Editar ficheros fuente en este directorio y regenerar con:
	powershell -ExecutionPolicy Bypass -File .\front\patches\build-custom-css.ps1
-----------------------------------------------------------------*/

/* ===== SOURCE: custom.core.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Core)

	Fuentes + variables globales + estilos base del sitio.
	Se carga desde `custom.css` antes de plugins y header.
-----------------------------------------------------------------*/

@font-face {
    font-family: 'Bahnschrift';
    src: url("../../fonts/bahnschrift-0d86cdad17cd99126f77102255632b5c.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Bahnschrift-condensed";
    src: url("../../fonts/bahnschrift-0d86cdad17cd99126f77102255632b5c.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: condensed;
}

@font-face {
    font-family: "Soehne Schmal leicht";
    src: url("../../fonts/soehne-schmal/soehne-schmal-leicht-017694fd39a56d78eea8d89745012fcc.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* Google Fonts (local): Open Sans */
@font-face {
    font-family: "Open Sans";
    src: url("../../fonts/OpenSans/OpenSans-VariableFont_wdth,wght-1564c11ef9e14b935ea24d8c114d4112.ttf") format("truetype");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Open Sans";
    src: url("../../fonts/OpenSans/OpenSans-Italic-VariableFont_wdth,wght-cc79fa97cc6d1cdd6a5fa3fa172ccfaf.ttf") format("truetype");
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

/* Google Fonts (local): Caveat */
@font-face {
    font-family: "Caveat";
    src: url("../../fonts/Caveat/Caveat-VariableFont_wght-90eb182f4a0dafbf8ac1cafde9dc58fd.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Google Fonts (local): Cinzel */
@font-face {
    font-family: "Cinzel";
    src: url("../../fonts/Cinzel/Cinzel-VariableFont_wght-2ec82007ab34eaa1b62682f6406141d9.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* Google Fonts (local): Cormorant Garamond */
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../../fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght-2f89491daaa9a595ee4cc15fbe994378.ttf") format("truetype");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../../fonts/Cormorant_Garamond/CormorantGaramond-Italic-VariableFont_wght-8b938d3ba51ddc0106df39cf2ee776a2.ttf") format("truetype");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

/* Google Fonts (local): Montserrat */
@font-face {
    font-family: "Montserrat";
    src: url("../../fonts/Montserrat/Montserrat-VariableFont_wght-4ed99a77944086031cafdf069a876adc.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../../fonts/Montserrat/Montserrat-Italic-VariableFont_wght-9e913d2b45892d925bbb2d68ea1501be.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Google Fonts (local): Playfair Display */
@font-face {
    font-family: "Playfair Display";
    src: url("../../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght-3f6ebd345fee09c3f31ee6b0c17bf9a5.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../../fonts/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght-c558074e4db9962a68d3b9dc83690435.ttf") format("truetype");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

/*body {
    background-color: skyblue;
}*/
:root {
    --cnvs-themecolor: #d19f00;
    --cnvs-themecolor-rgb: 209, 159, 0;
    --bs-primary-rgb: 209, 159, 0;
    /*--cnvs-header-height: 135px;*/

    --cnvs-body-font: "Open Sans", sans-serif;
    --cnvs-primary-font: "Open Sans", sans-serif;
    --cnvs-heading-font: "Soehne Schmal leicht", sans-serif;
    /*--cnvs-secondary-font: "Playfair Display", serif;*/

    --cnvs-header-height: 80px;
    /* Altura del topbar para cálculos fuera de #top-bar (p. ej. include-header con topbar). */
    --cnvs-topbar-height: 45px;

    /* Opacidad para semi-transparente y semi-transparente+blur (top bar, barra, overlays). Modificar para cambiar transparencia. */
    --cnvs-transparency-opacity: 0.60;
    --cnvs-header-height-sm: 50px;
    --cnvs-header-height-md: 60px;
    --cnvs-header-height-lg: 110px;
    --cnvs-header-height-shrink: 50px;

    /* Ancho del panel lateral (side-panel). Por defecto el tema usa 260px. */
    --cnvs-side-header-width: 300px;

    /* Backdrop overlay (.body-overlay): variables propias del proyecto. */
    --cnvs-body-overlay-bg: rgba(0, 0, 0, 0.6);
    --cnvs-body-overlay-backdrop-filter: none;

    /* Sombras de contraste (top bar y barra transparentes): orientación y definición.
     offset-x/y = dirección (positivo = derecha/abajo); blur = definición (menor = más nítida, mayor = más difuminada). */
    --cnvs-contrast-shadow-x: 0.5px;
    --cnvs-contrast-shadow-y: 0.5px;
    --cnvs-contrast-shadow-blur-1: 0.5px;
    --cnvs-contrast-shadow-x2: 1px;
    --cnvs-contrast-shadow-y2: 1px;
    --cnvs-contrast-shadow-blur-2: 0.5px;

    /* Constantes del sistema de header (para evitar números mágicos). */
    --sauri-blur-filter: blur(20px) saturate(1.8);
    /* Jerarquía base (Canvas): #header-wrap=299, offcanvas móvil=499, body-overlay=599, #side-panel=699 */
    --sauri-z-header-wrap: 299;
    --sauri-z-mobile-offcanvas: 499;
    --sauri-z-body-overlay: 599;
    --sauri-z-side-panel: 699;
    --sauri-z-topbar: 399;
    --sauri-z-sidepanel-trigger: 799;

    /* Swiper: posición de la paginación vertical (usadas por swiper.css en .swiper-vertical>.swiper-pagination-bullets). */
    --swiper-pagination-right: 0;
    --swiper-pagination-left: auto;
}

/* Canvas: permitir configurar paleta light/dark por tokens del panel.
   - Light: se aplica en `body` (afecta a todo el site)
   - Dark: se aplica en `.dark` (Canvas usa esta clase para scheme oscuro por sección)
   Nota: solo tocamos bg/bg-offset + rgb base; la escala `--cnvs-contrast-100..` sigue siendo la de Canvas. */
body {
    --cnvs-contrast-bg: var(--sauri-light-contrast-bg, #ffffff);
    --cnvs-contrast-bg-offset: var(--sauri-light-contrast-bg-offset, #ffffff);
    --cnvs-contrast-rgb: var(--sauri-light-contrast-rgb, 0, 0, 0);
    --cnvs-invert-contrast-rgb: var(--sauri-light-invert-contrast-rgb, 255, 255, 255);
}

.dark {
    --cnvs-contrast-bg: var(--sauri-dark-contrast-bg, #212529);
    --cnvs-contrast-bg-offset: var(--sauri-dark-contrast-bg-offset, #343a40);
    --cnvs-contrast-rgb: var(--sauri-dark-contrast-rgb, 255, 255, 255);
    --cnvs-invert-contrast-rgb: var(--sauri-dark-invert-contrast-rgb, 0, 0, 0);
}

h1,
.h1 {
    font-family: var(--sauri-h1-font, var(--cnvs-heading-font, var(--cnvs-primary-font)));
    font-weight: var(--sauri-h1-font-weight, var(--cnvs-headings-font-weight));
}

h2,
.h2 {
    font-family: var(--sauri-h2-font, var(--cnvs-heading-font, var(--cnvs-primary-font)));
    font-weight: var(--sauri-h2-font-weight, var(--cnvs-headings-font-weight));
}

/* Canvas: Footer backdrop-filter solo si se define variable (por token). */
#footer {
    -webkit-backdrop-filter: var(--cnvs-footer-backdrop-filter, none);
    backdrop-filter: var(--cnvs-footer-backdrop-filter, none);
}

.is-expanded-menu .menu-link {
    --cnvs-primary-menu-padding-y: calc(calc(var(--cnvs-sticky-header-height) - 44px) * 0.5);
    --cnvs-primary-menu-padding-x: 15px;
    transition: margin 0.4s ease, padding 0.4s ease;
}

/* ========================================================================
   SISTEMA DE HEADER – Overlay, panel lateral, trigger, alineación
   Referencia: docs/front/header/HEADER.md, docs/CHANGELOG.md
   - 1) Overlay a pantalla completa (Canvas menu-10, sin overrides)
   - 2) Menú móvil off-canvas (oculto hasta .d-block)
  - 3) Panel lateral #side-panel (Canvas SidePanel), trigger visible, estilos del panel
   - 4) Alineación barra (header-alignment-menu-left) y top-bar transparente
   ======================================================================== */

/* Canvas: `.include-header` sube el primer bloque para empezar “donde empieza el header”.
   Con topbar visible, queremos que empiece desde el inicio de la pantalla (incluyendo el topbar). */
.is-expanded-menu #top-bar~#header:not(.floating-header)+.include-header {
    margin-top: calc(-1 * (var(--cnvs-header-height) + var(--cnvs-topbar-height)) - 1px);
}

.dark {
    --cnvs-footer-bg: #1f1f1f;
    --cnvs-section-bg: #1f1f1f;
    --cnvs-contrast-bg: #212529;
    --cnvs-contrast-bg-offset: #343a40;
    --cnvs-contrast-0: #000;
    --cnvs-contrast-100: #212529;
    --cnvs-contrast-200: #343a40;
    --cnvs-contrast-300: #495057;
    --cnvs-contrast-400: #6c757d;
    --cnvs-contrast-500: #adb5bd;
    --cnvs-contrast-600: #ced4da;
    --cnvs-contrast-700: #dee2e6;
    --cnvs-contrast-800: #e9ecef;
    --cnvs-contrast-900: #f8f9fa;
    --cnvs-contrast-1000: #fff;
    --bs-link-color: var(--cnvs-contrast-900);
    --cnvs-invert-contrast-0: #fff;
    --cnvs-invert-contrast-100: #f8f9fa;
    --cnvs-invert-contrast-200: #e9ecef;
    --cnvs-invert-contrast-300: #dee2e6;
    --cnvs-invert-contrast-400: #ced4da;
    --cnvs-invert-contrast-500: #adb5bd;
    --cnvs-invert-contrast-600: #6c757d;
    --cnvs-invert-contrast-700: #495057;
    --cnvs-invert-contrast-800: #343a40;
    --cnvs-invert-contrast-900: #212529;
    --cnvs-invert-contrast-1000: #000;
    --cnvs-contrast-rgb: 255, 255, 255;
    --cnvs-invert-contrast-rgb: 0, 0, 0;
    --cnvs-heading-color: var(--cnvs-contrast-900);
    --cnvs-topbar-bg: #363636;
    --cnvs-header-bg: #1f1f1f;
    --cnvs-header-sticky-bg: #1f1f1f;
    --cnvs-side-header-bg: #1f1f1f;
    --cnvs-header-floating-bg: #1f1f1f;
    --cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-bg);
    color: var(--cnvs-contrast-800);
}


#page-menu {
    --cnvs-page-submenu-sticky-offset: var(--cnvs-header-height-shrink);
    --cnvs-page-submenu-link-size: 1.1rem;
    --cnvs-page-submenu-link-marging-x: 4px;
    --cnvs-page-submenu-link-marging-y: 10px;
    --cnvs-page-submenu-link-rounded: 14px;
    --cnvs-page-submenu-dropdown-width: 150px;
    --cnvs-page-submenu-trigger: 44px;
    --cnvs-page-dotsmenu-size: 10px;
    --cnvs-page-dotsmenu-gutters: 10px;
    --cnvs-page-dotsmenu-rounded: 50%;
    position: relative;
}

.border-top-sauri {
    border-top: 7px solid rgb(var(--cnvs-themecolor-rgb)) !important;
}


/* Color texto descripción portafolio */
.portfolio-desc span,
.portfolio-desc span a {
    color: var(--cnvs-contrast-600);
}

#footer {
    --cnvs-footer-top-border: 13px solid rgb(var(--cnvs-themecolor-rgb));
    --cnvs-copyrights-link-color: var(--cnvs-contrast-500);
    /*--cnvs-copyrights-link-color: rgba(0, 0, 0, 1);*/
    position: relative;
    background-color: var(--cnvs-footer-bg);
    border-top: var(--cnvs-footer-top-border);
    padding-bottom: calc(var(--cnvs-content-padding) * 0.5);
}

#copyrights {
    padding: 0.3rem 0;
    background-color: var(--cnvs-contrast-300);
    font-size: var(--cnvs-copyrights-font-size);
    line-height: var(--cnvs-line-height-content);
}

.dark #copyrights,
#copyrights.dark {
    color: var(--cnvs-contrast-500);
    background-color: #363636
}

.widget_links li {
    font-size: 0.7rem;
}

.widget_address,
address {
    font-size: 0.8rem;
}

.widget_address {
    background: url("../../images/world-map-e17d0dfad26cb37ec3f55a51f8bf8ebd.png") no-repeat;
}

.widget_links:not(.widget-li-noicon) li::before {
    content: '\f287';
    font-size: 0.13rem;
}

#footer .footer-widgets-wrap {
    position: relative;
    padding: 2rem 0 5rem 0;
}

.footer-logo {
    margin-bottom: 20px;
}

.current-language {
    color: var(--cnvs-themecolor) !important;
}


.top-border-sauri {
    border-top: 13px solid var(--cnvs-themecolor) !important;
}



/*-- BOTON SAURI--*/
.button-sauri {
    --cnvs-btn-color: var(--cnvs-themecolor);
}

.button-sauri.button-3d:hover,
.button-sauri.button-reveal:hover,
.button-sauri.button-border:hover {
    --cnvs-btn-color: var(--cnvs-themecolor) !important;
}

.button-sauri.button-border.button-fill::before {
    background-color: var(--cnvs-themecolor);
}

.button-sauri.button-action {
    --cnvs-btn-action-border-color: var(--cnvs-themecolor);
}

.button-border.button-sauri,
.button-border.button-light.button-sauri {
    color: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
}


/*-- Medio Container --*/
@media (min-width: 576px) {

    .half-container-sm,
    .half-container {
        max-width: 270px;
    }
}

@media (min-width: 768px) {

    .half-container-md,
    .half-container-sm,
    .half-container {
        max-width: 360px;
    }
}

@media (min-width: 992px) {

    .half-container-lg,
    .half-container-md,
    .half-container-sm,
    .half-container {
        max-width: 480px;
    }
}

@media (min-width: 1200px) {

    .half-container-xl,
    .half-container-lg,
    .half-container-md,
    .half-container-sm,
    .half-container {
        max-width: 570px;
    }
}

@media (min-width: 1400px) {

    .half-container-xxl,
    .half-container-xl,
    .half-container-lg,
    .half-container-md,
    .half-container-sm,
    .half-container {
        max-width: 660px;
    }
}

/*-- Medio Container --*/

.flexslider {
    height: 100%;
    /* Ajusta esto según tus necesidades */
}

.flexslider .slider-wrap .slide img {
    width: 100%;
    /* Asegura que la imagen cubra el ancho del contenedor */
    height: 100%;
    /* Asegura que la imagen cubra el alto del contenedor */
    object-fit: cover;
    /* Esto hace que la imagen se estire pero mantenga sus proporciones */
}


/*--MENU CUSTOM --*/
.form-control {
    --cnvs-input-focus-box-shadow: 0 0 0 0.25rem rgba(209, 160, 0, 0.25);
}

/* Topbar por variables (Canvas-style): soporte blur opcional. */
#top-bar {
    z-index: 1;
    backdrop-filter: var(--cnvs-topbar-backdrop-filter, none);
    -webkit-backdrop-filter: var(--cnvs-topbar-backdrop-filter, none);
}


/* ===== SOURCE: custom.utils.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Utils)

	Utilidades genéricas reutilizables.
-----------------------------------------------------------------*/

.aspect-w-16 {
    width: 100%;
}

.aspect-h-9 {
    height: 0;
    padding-bottom: 56.25%; /* Proporción 16:9 */
}

.aspect-w-16.aspect-h-9 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    inset: 0px !important;
    position: absolute !important;
}

.lh-xl {
    line-height: 2.5 !important;
}
.lh-xxl {
    line-height: 3 !important;
}



/* ===== SOURCE: custom.plugin.quill.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Plugin: Quill)
-----------------------------------------------------------------*/

/* Contenedor de contenido Quill en front: que el texto haga wrap y no se desborde.
   Sin .ql-editor, las reglas de quill.snow.css no aplican y el texto puede desbordar.
   min-width: 0 permite que en contextos flex el contenedor se encoja y el texto wrap. */
.ql-editor {
    white-space: normal !important;
    height: auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
    padding: 0; /* anular padding del CDN; el contenedor define el suyo */
}

/* Párrafos vacíos (doble Enter en Quill): darles altura para que el doble salto se vea. */
.ql-editor p:empty {
    min-height: 1em;
    margin: 0;
}

.ql-font-Bahnschrift {
    font-family: "Bahnschrift";
}
.ql-font-Bahnschrift-condensed {
    font-family: "Bahnschrift-condensed";
}
.ql-font-Caveat {
    font-family: "Caveat";
}
.ql-font-Arial {
    font-family: "Arial";
}



/* ===== SOURCE: custom.plugin.owl-carousel.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Plugin: Owl Carousel)
-----------------------------------------------------------------*/

.owl-carousel .owl-stage {
	display: flex;
}

.owl-carousel .owl-nav [class*=owl-] {
	opacity: 1;
	left: -38px;
}

.owl-carousel .owl-nav .owl-next {
	left: auto;
	right: -38px;
}

.owl-carousel.owl-nav-hover-fixed .owl-nav [class*=owl-], .owl-carousel:hover .owl-nav [class*=owl-] {
    opacity: 1;
    left: -38px;
}

.owl-carousel.owl-nav-hover-fixed .owl-nav .owl-next, .owl-carousel:hover .owl-nav .owl-next {
    left: auto;
	right: -38px;
}

.owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
    background-color: #1f1f1f;
    color: #fff;
}



/* ===== SOURCE: custom.plugin.twentytwenty.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Plugin: TwentyTwenty)
-----------------------------------------------------------------*/

/* .twentytwenty-horizontal */
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
    content: " ";
    display: block;
    background: white;
    position: absolute;
    z-index: 30;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
    width: 4px;
    height: 9999px;
    left: 50%;
    margin-left: -2px;
}

.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.twentytwenty-before-label,
.twentytwenty-after-label {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    color: white;
    font-size: 13px;
    letter-spacing: 0.1em;
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    line-height: 38px;
    padding: 0 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before {
    top: 50%;
    margin-top: -19px;
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    top: 50%;
    margin-top: -6px;
}

.twentytwenty-container {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 0;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.twentytwenty-container img {
    width: 100%;
    position: absolute;
    top: 0;
    display: block;
}
.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active:hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); }

.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; }

.twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.twentytwenty-before-label { opacity: 0; }
.twentytwenty-before-label:before { content: "Before"; }

.twentytwenty-after-label { opacity: 0; }
.twentytwenty-after-label:before { content: "After"; }

.twentytwenty-horizontal .twentytwenty-before-label:before { left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before { right: 10px; }

.twentytwenty-overlay {
    -webkit-transition-property: background;
    -moz-transition-property: background;
    transition-property: background;
    background: rgba(0, 0, 0, 0);
    z-index: 25;
}

.twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-before-label { opacity: 1; }

.twentytwenty-before { z-index: 20; }
.twentytwenty-after { z-index: 10; }

.twentytwenty-handle {
    height: 38px;
    width: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
    border: 3px solid white;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
    background-color: #FFF;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    z-index: 40;
    cursor: pointer;
}

.twentytwenty-horizontal .twentytwenty-handle:before {
    bottom: 50%;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-horizontal .twentytwenty-handle:after {
    top: 50%;
    margin-top: 22px;
    -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-left-arrow {
    border-right: 6px solid #999;
    left: 50%;
    margin-left: -17px;
}

.twentytwenty-right-arrow {
    border-left: 6px solid #999;
    right: 50%;
    margin-right: -17px;
}
/* twentytwenty-horizontal End */

/* .arrow-transparent */
.arrow-transparent .twentytwenty-handle { background-color: transparent; }

.arrow-transparent .twentytwenty-left-arrow,
.twentytwenty-container[class*="bg-"] .twentytwenty-left-arrow { border-right-color: #FFF; }

.arrow-transparent .twentytwenty-right-arrow,
.twentytwenty-container[class*="bg-"] .twentytwenty-right-arrow { border-left-color: #FFF; }

.arrow-rounded .twentytwenty-handle { border-radius: 4px; } /* .arrow-rounded */
.arrow-square .twentytwenty-handle { border-radius: 0; } /* .arrow-square */

/* .arrow-diamond */
.arrow-diamond .twentytwenty-handle {
    border: 0;
    box-shadow: none;
    background-color: transparent;
}

.arrow-diamond .twentytwenty-handle span.twentytwenty-left-arrow:after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    left: 50%;
    top: 50%;
    border: 3px solid #FFF;
    z-index: -1;
    border-radius: 2px;
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    transform: translate(-22%, -50%) rotate(45deg);
}

.arrow-diamond:not(.arrow-transparent) .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: #FFF }

.arrow-diamond .twentytwenty-handle:before { bottom: calc(50% + 3px); }
.arrow-diamond .twentytwenty-handle:after { top: calc(50% + 3px); }

/* bg-primary */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-primary .twentytwenty-handle,
.arrow-diamond.bg-primary .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--primary, var(--cnvs-themecolor)); }

/* bg-secondary */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-secondary .twentytwenty-handle,
.arrow-diamond.bg-secondary .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--secondary, #6c757d); }

/* bg-warning */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-warning .twentytwenty-handle,
.arrow-diamond.bg-warning .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--warning, #ffc107); }

/* bg-info */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-info .twentytwenty-handle,
.arrow-diamond.bg-info .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--info, #17a2b8); }

/* bg-danger */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-danger .twentytwenty-handle,
.arrow-diamond.bg-danger .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--danger, #dc3545); }

/* bg-success */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-success .twentytwenty-handle,
.arrow-diamond.bg-success .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--success, #28a745); }

/* bg-dark */
.twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-dark .twentytwenty-handle,
.arrow-diamond.bg-dark .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--dark, #343a40); }



/* ===== SOURCE: custom.site.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Site / componentes)

	Estilos propios del sitio (no son plugins ni header).
-----------------------------------------------------------------*/

/* Page Builder gallery-5: fondo blanco en tema claro y encima del slider legacy en parallax.
   El slider usa .slider-inner con position:fixed; sin z-index la sección pinta por debajo
   y solo el contenido (p. ej. .container con z-index del tema) quedaba encima. */
.pb-gallery-5 {
  position: relative;
  z-index: 2;
  /* Altura y aire por defecto (solo si el módulo no define padding en General) */
}
.pb-gallery-5:not([class*="pt-"]) {
  padding-top: var(--cnvs-section-padding, 4rem);
}
.pb-gallery-5:not([class*="pb-"]) {
  padding-bottom: var(--cnvs-section-padding, 4rem);
}
.pb-gallery-5:not(.dark) {
  background-color: #fff;
}
/* Más margen entre filas del grid de 4 bloques (por defecto col-mb-30 = 30px; aquí 50px) */
.pb-gallery-5 .row.row-cols-2.row-cols-lg-4 {
  --cnvs-col-mb: 50px;
}

/* Overrides de fuente del título (Page Builder): primaria/secundaria del sitio */
.pb-title-font-primary {
  font-family: var(--cnvs-primary-font);
}
.pb-title-font-secondary {
  font-family: var(--cnvs-secondary-font, var(--cnvs-primary-font));
}

.menu-marcas-item {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    filter: grayscale(100%);
}

.menu-marcas-item:hover, .menu-marcas-item.current {
    filter: grayscale(0%);
}

.filter-p-pricing {
position: absolute;
top: 20px;
right: 0;
background: var(--cnvs-themecolor);
color: #FFF;
padding: 8px 15px;
z-index: 10;
font-family: var(--cnvs-primary-font);
}

  .filter-p-pricing::before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: -8px;
    height: 100%;
    width: 32px;
    background-color: var(--cnvs-themecolor);
    -moz-transform: skew(-23deg,0deg);
    -o-transform: skew(-23deg,0deg);
    -ms-transform: skew(-23deg,0deg);
    -webkit-transform: skew(-23deg,0deg);
    transform: skew(-23deg,0deg);
    z-index: -1;
  }

  .page-menu-item > a {
    display: block;
    position: relative;
    line-height: 22px;
    padding: 11px 14px;
    color: var(--cnvs-white);
    font-size: var(--cnvs-page-submenu-link-size);
    }

/* Hero1 slider: paginación vertical con contraste (bullets visibles en cualquier fondo)
   Siguiendo el patrón de Canvas para las flechas: fondo semi-transparente.
   z-index: 5 para que las flechas (z-index: 10) queden encima y sigan siendo clickeables.
   Variables --swiper-pagination-right/left definidas en custom.core.css (:root). */
.pb-hero-1 .swiper_wrapper[data-direction="vertical"] .swiper-pagination {
  padding: 0px 30px;
  z-index: 5;
  
  width: auto;  /* override el width: 100% de swiper.css */
}

/* Hero 18 (Split): dos mitades que crecen al hover */
.pb-hero-18 .content-wrap {
  position: relative;
  min-height: 100vh;
}

.pb-hero-18 .section-split h1,
.pb-hero-18 .section-split h2,
.pb-hero-18 .section-split h3 {
  font-family: var(--cnvs-heading-font, inherit) !important;
}

/* Modo claro: forzar texto y enlaces oscuros (algo en el tema los dejaba en blanco) */
.pb-hero-18 .section-split:not(.dark) h1,
.pb-hero-18 .section-split:not(.dark) h2,
.pb-hero-18 .section-split:not(.dark) h3 {
  color: var(--cnvs-contrast-0, #000) !important;
}

/* .pb-hero-18 .section-split:not(.dark) a {
  color: var(--cnvs-contrast-0, #000) !important;
}

.pb-hero-18 .section-split:not(.dark) a:hover {
  color: var(--cnvs-contrast-100, rgba(0, 0, 0, 0.8)) !important;
} */

/* Modo dark: texto y enlaces claros */
.pb-hero-18 .section-split.dark h1,
.pb-hero-18 .section-split.dark h2,
.pb-hero-18 .section-split.dark h3 {
  color: var(--cnvs-contrast-1000, #fff) !important;
}

/* .pb-hero-18 .section-split.dark a {
  color: var(--cnvs-contrast-1000, #fff) !important;
}

.pb-hero-18 .section-split.dark a:hover {
  color: var(--cnvs-contrast-900, rgba(255, 255, 255, 0.9)) !important;
} */

@media (min-width: 576px) {
  .pb-hero-18 .section-split {
    --section-width: 50%;
    --hover-width: 65%;
    --less-width: calc(100% - var(--hover-width));
    --hover-speed: 1s;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--section-width);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    transition: width var(--hover-speed) ease;
  }

  .pb-hero-18 .section-split.split-right {
    left: auto;
    right: 0;
  }

  .pb-hero-18 .section-split:hover ~ .section-split {
    width: var(--less-width);
  }

  .pb-hero-18 .section-split:hover {
    width: var(--hover-width);
  }
}

/* Page Builder: contenedor CTA y botón redondo solo icono (misma apariencia en todos los módulos) */
.pb-cta-wrap {
  display: inline-block;
}

.pb-cta-wrap a.rounded-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  min-height: 3rem !important;
  max-width: 3rem !important;
  max-height: 3rem !important;
  padding: 0 !important;
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  text-decoration: none;
}

/* Icono dentro del botón redondo. Anular .button i del tema. */
.pb-cta-wrap a.rounded-circle .bi,
.pb-cta-wrap a.rounded-circle .uil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem !important;
  line-height: 1;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  color: inherit;
}

.pb-cta-wrap a.rounded-circle .bi::before,
.pb-cta-wrap a.rounded-circle .uil::before {
  font-size: inherit;
  color: inherit;
}

/* Botón texto + icono: texto e icono juntos con margen entre ellos */
.pb-cta-wrap a.pb-btn-text-icon {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}
.pb-cta-wrap a.pb-btn-text-icon .bi,
.pb-cta-wrap a.pb-btn-text-icon .uil {
  flex-shrink: 0;
}



/* ===== SOURCE: custom.header.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (Header)

	Sistema de header: off-canvas móvil, sidepanel, overlay fullscreen, sticky/transparencias, alineación y contraste.
-----------------------------------------------------------------*/

/* ========================================================================
  Estructura del fichero (bloques)
  - Helpers / contract (sin tocar Canvas core)
  - Mobile menu (off-canvas / overlay)
  - SidePanel (#side-panel) + backdrop (.body-overlay) + trigger
  - Fullscreen overlay (Canvas overlay-menu)
  - Alineación de barra (logo/trigger/misc/nav)
  - Sticky/transparencias/contraste
  - Topbar (stacking + modo oscuro)
  - Presets del proyecto (ej. `.header-sauri-*`)

  Nota: política del proyecto → evitar selectores frágiles tipo `has()`; usar flags/clases en `<body>`.
 ======================================================================== */

/* --- 2) Menú móvil off-canvas: mantener oculto hasta que se abra (.d-block). --- */
/* El tema Canvas solo aplica el off-canvas con #header:not(.sticky-header); estas reglas aplican siempre en vista móvil. */
body:not(.is-expanded-menu) #header .mobile-menu-off-canvas .menu-container {
  position: fixed !important;
  display: block !important;
  width: var(--cnvs-mobile-menu-off-canvas-width) !important;
  height: 100% !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  left: 0 !important;
  top: 0 !important;
  padding: 35px 25px 60px !important;
  background-color: var(--cnvs-header-bg) !important;
  border-right: 1px solid var(--cnvs-header-border-color) !important;
  overflow-y: scroll !important;
  transform: translate3d(calc(-1 * var(--cnvs-mobile-menu-off-canvas-width)), 0, 0) !important;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  z-index: -1 !important;
  transition: 0.3s ease-in-out, opacity 0.2s ease !important;
}
body:not(.is-expanded-menu) #header .mobile-menu-off-canvas .menu-container.d-block {
  z-index: var(--sauri-z-mobile-offcanvas, 499) !important;
  transform: translate3d(0, 0, 0) !important;
}
body:not(.is-expanded-menu) #header .mobile-menu-off-canvas.from-right .menu-container {
  left: auto !important;
  right: 0 !important;
  border-right: 0 !important;
  border-left: 1px solid var(--cnvs-header-border-color) !important;
  transform: translate3d(var(--cnvs-mobile-menu-off-canvas-width), 0, 0) !important;
}
body:not(.is-expanded-menu) #header .mobile-menu-off-canvas.from-right .menu-container.d-block {
  transform: translate3d(0, 0, 0) !important;
}
/* --- Fin 2) Off-canvas --- */

/* --- 3) Panel lateral #side-panel (Canvas SidePanel estándar). --- */

/* SidePanel (Canvas estándar): en este modo, el menú “de barra” solo se usa en móvil (regla móvil).
   En desktop (body.is-expanded-menu) el menú vive en #side-panel. */
body.nav-overlay-sidepanel.is-expanded-menu #header .primary-menu {
  display: none !important;
}
/* En desktop, ocultar la hamburguesa “móvil” (la que abre el off-canvas/overlay del menú móvil). */
body.nav-overlay-sidepanel.is-expanded-menu #header .primary-menu-trigger:not(.side-panel-trigger) {
  display: none !important;
}
/* En móvil, ocultar el trigger del panel (desktop). */
body.nav-overlay-sidepanel:not(.is-expanded-menu) #header .primary-menu-trigger.side-panel-trigger {
  display: none !important;
}
/* En desktop, mostrar el trigger del panel aunque .is-expanded-menu oculte el primary-menu-trigger por defecto. */
body.nav-overlay-sidepanel.is-expanded-menu #header .primary-menu-trigger.side-panel-trigger {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

/* En SidePanel abierto, mantener la hamburguesa por encima del backdrop
   (`.body-overlay` = var(--sauri-z-body-overlay, 599)) y del panel (`#side-panel` = var(--sauri-z-side-panel, 699)). */
body.nav-overlay-sidepanel.side-panel-open #header .primary-menu-trigger.side-panel-trigger {
  z-index: var(--sauri-z-sidepanel-trigger) !important;
}

/* Estado “X” de la hamburguesa cuando el panel está abierto (Canvas no aplica primary-menu-trigger-active aquí). */
body.nav-overlay-sidepanel.side-panel-open #header .primary-menu-trigger.side-panel-trigger .cnvs-hamburger .cnvs-hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
body.nav-overlay-sidepanel.side-panel-open #header .primary-menu-trigger.side-panel-trigger .cnvs-hamburger .cnvs-hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
body.nav-overlay-sidepanel.side-panel-open #header .primary-menu-trigger.side-panel-trigger .cnvs-hamburger .cnvs-hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* #side-panel: panel lateral (menú + logo opcional). Por encima del top bar y de la barra de menú.
   Las variables --cnvs-primary-menu-* están definidas en #header del tema; el side-panel no está dentro
   del header, así que no las hereda. Definimos aquí las mismas variables para que el menú del panel
   tenga el mismo aspecto que en modo items. */
#side-panel {
  --cnvs-primary-menu-color: var(--cnvs-contrast-900);
  --cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
  --cnvs-primary-menu-active-color: var(--cnvs-primary-menu-hover-color);
  --cnvs-primary-menu-font: var(--cnvs-primary-font);
  --cnvs-primary-menu-font-weight: 700;
  --cnvs-primary-menu-font-size: 0.8125rem;
  --cnvs-primary-menu-tt: uppercase;
  --cnvs-primary-menu-ls: 1px;
  --cnvs-primary-menu-icon-size: 1rem;
  --cnvs-primary-menu-icon-gap: 0.625rem;
  --cnvs-primary-menu-hover-text-decoration: none;
  --cnvs-primary-menu-hover-text-decoration-offset: 3px;
  --cnvs-primary-menu-submenu-padding-x: 15px;
  --cnvs-primary-menu-submenu-padding-y: 10px;
  --cnvs-primary-menu-submenu-top-border: 2px solid var(--cnvs-themecolor);
  --cnvs-primary-menu-submenu-width: 240px;
  --cnvs-primary-menu-submenu-font: var(--cnvs-body-font);
  --cnvs-primary-menu-submenu-font-size: 0.75rem;
  --cnvs-primary-menu-submenu-font-weight: 600;
  --cnvs-primary-menu-submenu-hover-font-weight: 700;
  --cnvs-primary-menu-submenu-tt: uppercase;
  --cnvs-primary-menu-submenu-color: var(--cnvs-contrast-900);
  --cnvs-primary-menu-submenu-spacing: 0;
  --cnvs-primary-menu-submenu-border: 1px solid rgba(var(--cnvs-contrast-rgb), 0.1);
  --cnvs-primary-menu-submenu-hover-bg: rgba(var(--cnvs-contrast-rgb), 0.025);
  --cnvs-primary-menu-submenu-hover-color: var(--cnvs-primary-menu-active-color);
  --cnvs-primary-menu-submenu-hover-padding-offset: 0.25rem;
  --cnvs-primary-menu-submenu-subtitle-display: none;
  --cnvs-primary-menu-submenu-subtitle-font-size: var(--cnvs-primary-menu-submenu-font-size);
  --cnvs-primary-menu-submenu-subtitle-font-weight: 400;
  --cnvs-primary-menu-submenu-subtitle-tt: none;
  /* Importante: el posicionamiento/apertura del panel lo gestiona Canvas en style.css:
     - body.side-panel-open
     - body.side-panel-left
     No reescribir aquí position/left/right/width para evitar conflictos. */
}
/* Overlay (panel lateral + pantalla completa): 4 opciones (sólido, semi-transparente, semi-transparente+blur, transparente). Variable --cnvs-transparency-opacity controla la opacidad. */

/* Overlay por variables (Canvas-style):
   - SidePanel: Canvas ya usa `background-color: var(--cnvs-side-panel-bg)` en `#side-panel` (style.css)
     y aquí solo añadimos soporte de blur via variable.
   - Fullscreen overlay (overlay-menu): Canvas fija el fondo con un `background: rgba(...)` hardcoded;
     lo sobreescribimos para que lea de `--cnvs-overlay-menu-bg` y (opcional) blur. */

#side-panel {
  backdrop-filter: var(--cnvs-side-panel-backdrop-filter, none);
  -webkit-backdrop-filter: var(--cnvs-side-panel-backdrop-filter, none);
}

.is-expanded-menu.overlay-menu .primary-menu {
  background: var(--cnvs-overlay-menu-bg, rgba(var(--cnvs-invert-contrast-rgb), 0.95)) !important;
  background-color: var(--cnvs-overlay-menu-bg, rgba(var(--cnvs-invert-contrast-rgb), 0.95)) !important;
  backdrop-filter: var(--cnvs-overlay-menu-backdrop-filter, none);
  -webkit-backdrop-filter: var(--cnvs-overlay-menu-backdrop-filter, none);
}

/* SidePanel backdrop overlay (.body-overlay) por variables (Canvas-style). */
.body-overlay {
  /* Variable propia del proyecto para el backdrop del overlay (NO ligada a overlayBackground del menú).
     Mantiene fallback a las variables antiguas por compatibilidad. */
  background-color: var(--cnvs-body-overlay-bg, var(--cnvs-sidepanel-overlay-bg, rgba(0, 0, 0, 0.6)));
  backdrop-filter: var(--cnvs-body-overlay-backdrop-filter, var(--cnvs-sidepanel-overlay-backdrop-filter, none));
  -webkit-backdrop-filter: var(--cnvs-body-overlay-backdrop-filter, var(--cnvs-sidepanel-overlay-backdrop-filter, none));
}

/* .style-6: barra inferior (::before) que crece de derecha a izquierda; el tema ya tiene ::after arriba (izquierda a derecha). */
.is-expanded-menu .style-6 .menu-container > .menu-item > .menu-link::before,
.is-expanded-menu .style-6 .menu-container > .menu-item.current > .menu-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: var(--cnvs-primary-menu-active-color);
  transition: width 0.3s ease;
}
.is-expanded-menu .style-6 .menu-container > .menu-item.current > .menu-link::before,
.is-expanded-menu .style-6 .menu-container > .menu-item:hover > .menu-link::before {
  width: 100%;
}

.is-expanded-menu #header.transparent-header.full-header #logo {
  border-right-color: transparent !important;
}
.is-expanded-menu #header.full-header.transparent-header #header-wrap {
  border-bottom: 0px solid !important;
}

.is-expanded-menu #header.full-header.transparent-header.sticky-header #header-wrap {
  border-bottom: 1px solid var(--cnvs-header-transparent-border-color) !important;
}


/* Barra de navegación: semi-transparente y semi-transparente+blur (variable --cnvs-transparency-opacity). Sobrescribe tema. */
.is-expanded-menu #header.transparent-header.semi-transparent {
  --cnvs-header-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}
.is-expanded-menu #header.transparent-header.semi-transparent-blur:not(.floating-header) {
  --cnvs-header-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}
/* En modo no flotante el blur va en #header-wrap; en flotante solo en el .container (rounded-6) de dentro. */
.is-expanded-menu #header.transparent-header.semi-transparent-blur:not(.floating-header) #header-wrap {
  backdrop-filter: var(--sauri-blur-filter);
  -webkit-backdrop-filter: var(--sauri-blur-filter);
}

/* Fullscreen overlay (overlay-menu):
   Si `#header-wrap` tiene `backdrop-filter`, puede crear un containing block y hacer que
   `.is-expanded-menu.overlay-menu .primary-menu { position: fixed; top: 0; }` quede “anclado” al header
   (no cubre el topbar). Al abrir el overlay, desactivamos el blur del header para que el overlay vuelva
   a posicionarse respecto al viewport. */
body.overlay-menu.primary-menu-open #header-wrap {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Canvas (style.css):
   `.is-expanded-menu #header.transparent-header.floating-header .container { background-color: var(--cnvs-header-floating-bg); }`
   En overlay fullscreen abierto no queremos esa capa sólida centrada. */
body.overlay-menu.primary-menu-open.is-expanded-menu #header.transparent-header.floating-header #header-wrap .container {
  background: transparent !important;
  background-color: transparent !important;
}
.is-expanded-menu #header.transparent-header.semi-transparent-blur.floating-header #header-wrap .container {
  /*backdrop-filter: var(--sauri-blur-filter);
  -webkit-backdrop-filter: var(--sauri-blur-filter);*/
}

.is-expanded-menu #header.transparent-header.semi-transparent-blur.floating-header.sticky-header #header-wrap .container {
  background-color: transparent !important;
}
.is-expanded-menu #header.transparent-header.floating-header.sticky-header #header-wrap .container {
  background-color: transparent !important;
}
/* Sticky: respetar modo (sólido, semi, semi+blur). Si el modo es transparente, al hacer sticky = semi+blur.
   Fondo aplicado directamente con rgba + !important para que ninguna regla del tema lo pise. */
/* Variable por si otros estilos la usan */
#header.sticky-header.semi-transparent,
#header.sticky-header.semi-transparent-blur,
#header.transparent-header.sticky-header:not(.semi-transparent):not(.semi-transparent-blur) {
  --cnvs-header-sticky-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}
/* Semi-transparente al hacer sticky: fondo semi, sin blur */
#header.sticky-header.semi-transparent #header-wrap {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}
/* Semi-transparente+blur al hacer sticky: fondo semi + blur */
#header.sticky-header.semi-transparent-blur #header-wrap {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
  backdrop-filter: var(--sauri-blur-filter) !important;
  -webkit-backdrop-filter: var(--sauri-blur-filter) !important;
}
/* Transparente al hacer sticky → comportar como semi+blur */
#header.transparent-header.sticky-header:not(.semi-transparent):not(.semi-transparent-blur) #header-wrap {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
  backdrop-filter: var(--sauri-blur-filter) !important;
  -webkit-backdrop-filter: var(--sauri-blur-filter) !important;
}
/* Modo flotante: no aplicar blur en #header-wrap (el blur va en .container). */
#header.floating-header.sticky-header.semi-transparent-blur #header-wrap,
#header.floating-header.transparent-header.sticky-header:not(.semi-transparent):not(.semi-transparent-blur) #header-wrap {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#header.floating-header #header-wrap {
  /* background-color: transparent !important; */
  border-bottom: none !important;
}
#side-panel .side-panel-wrap {
  /* Canvas ya define overflow/padding en .side-panel-wrap; aquí solo ajustamos si necesitamos. */
  height: 100%;
}
#side-panel .side-panel-logo {
  margin: 3rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#side-panel .side-panel-logo a {
  display: inline-block;
}
#side-panel .side-panel-logo img {
  max-width: 100%;
  height: auto;
  width: auto;
}
#side-panel .side-panel-logo [class^="logo-"] {
  display: none;
}
#side-panel .side-panel-logo .logo-default {
  display: block;
}
#side-panel.dark .side-panel-logo [class^="logo-"] {
  display: none;
}
#side-panel.dark .side-panel-logo .logo-dark {
  display: block;
}
/* Menú dentro del panel: mismo aspecto que en la barra (mismas variables y tipografía).
   El tema tiene .menu-container { display: none } por defecto y el JS quita inline display;
   forzamos visibilidad para que los ítems se vean siempre en el panel.
   Anulamos la lógica de overlay a pantalla completa: el tema aplica .is-expanded-menu.overlay-menu .primary-menu
   (position: fixed, top/left 0, width/height 100%, etc.) a TODOS los .primary-menu; aquí el menú debe quedarse
   dentro del panel, al lateral, sin centrado en viewport. */
#side-panel .primary-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 30px;
  flex-grow: 0;
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: auto !important;
  transform: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
#side-panel .primary-menu:not(.border-bottom-0)::after {
  margin-top: 40px;
}
#side-panel .menu-container {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  justify-content: flex-start;
  height: auto;
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  list-style: none;
  visibility: visible !important;
  opacity: 1 !important;
}

#side-panel .menu-item,
#side-panel .menu-link {
  display: block !important;
  visibility: visible !important;
}
#side-panel .menu-item {
  width: 100%;
  border-top: 0;
}
#side-panel .menu-item:not(:first-child) {
  margin-top: 0;
  border-top: 0;
}
/* Mismo aspecto que la barra en modo “items”: anular overlay y usar variables del tema (padding, tipografía, hover). */
#side-panel .primary-menu .menu-link {
  --cnvs-primary-menu-padding-y: 14px;
  --cnvs-primary-menu-padding-x: 15px;
  position: relative;
  margin: 0 !important;
  padding: var(--cnvs-primary-menu-padding-y) var(--cnvs-primary-menu-padding-x) !important;
  color: var(--cnvs-primary-menu-color);
  font-weight: var(--cnvs-primary-menu-font-weight);
  font-size: var(--cnvs-primary-menu-font-size);
  font-family: var(--cnvs-primary-menu-font);
  text-transform: var(--cnvs-primary-menu-tt);
  letter-spacing: var(--cnvs-primary-menu-ls);
  line-height: 22px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}
#side-panel .primary-menu .menu-link i:not(.sub-menu-indicator) {
  font-size: var(--cnvs-primary-menu-icon-size);
  width: var(--cnvs-primary-menu-icon-size);
  margin: 0 var(--cnvs-primary-menu-icon-gap) 0 0 !important;
  flex-shrink: 0;
}
#side-panel .primary-menu .menu-link > div {
  flex: 1;
  min-width: 0;
}
/* Anular margin-left entre ítems del tema en el panel lateral (igual que en overlay a pantalla completa). */
#side-panel .primary-menu .menu-container > .menu-item:not(:first-child) {
  margin-left: 0 !important;
}
#side-panel .primary-menu.style-5 .menu-container > .menu-item:not(:first-child) {
  margin-left: 0 !important;
}
#side-panel .menu-item:hover > .menu-link {
  color: var(--cnvs-primary-menu-hover-color);
}
#side-panel .menu-item:hover > .menu-link div {
  text-decoration: var(--cnvs-primary-menu-hover-text-decoration);
  text-underline-offset: var(--cnvs-primary-menu-hover-text-decoration-offset);
}
#side-panel .menu-item.current > .menu-link {
  color: var(--cnvs-primary-menu-active-color);
}
/* Submenús: mismo estilo que en la barra (tipografía y padding del tema). */
#side-panel .sub-menu-container,
#side-panel .mega-menu-content {
  position: relative;
  width: 100% !important;
  background-color: transparent;
  box-shadow: none;
  border: none;
  height: auto;
  z-index: 1;
  top: 0;
  left: 0;
  margin: 5px 0;
  padding: 0 0 0 12px !important;
}
#side-panel .sub-menu-container .menu-item > .menu-link {
  padding: var(--cnvs-primary-menu-submenu-padding-y, 10px) var(--cnvs-primary-menu-submenu-padding-x, 15px) !important;
  font-size: var(--cnvs-primary-menu-submenu-font-size);
  font-weight: var(--cnvs-primary-menu-submenu-font-weight);
  font-family: var(--cnvs-primary-menu-submenu-font);
  color: var(--cnvs-primary-menu-submenu-color);
  letter-spacing: var(--cnvs-primary-menu-submenu-spacing);
  text-transform: var(--cnvs-primary-menu-submenu-tt);
}
#side-panel .sub-menu-container .menu-item:hover > .menu-link {
  color: var(--cnvs-primary-menu-submenu-hover-color);
  background-color: var(--cnvs-primary-menu-submenu-hover-bg);
  font-weight: var(--cnvs-primary-menu-submenu-hover-font-weight);
}
#side-panel .sub-menu-container .menu-item.current > .menu-link {
  color: var(--cnvs-primary-menu-submenu-hover-color);
}

@media (prefers-reduced-motion: reduce) {
  #side-panel {
    transition: none;
  }
}

/* Con top bar: si el panel está abierto, que siempre empiece debajo del top bar (con o sin “desplaza contenido”), para que el top bar no tape el panel. */

/* Con no-sticky + push-wrapper evitar desplazar #wrapper: elimina el “panel doble” (fantasma a la izquierda). */

/* Barra (logo + hamburguesa): z-index y posición. La barra no se mueve; en pantalla completa solo la hamburguesa se desplaza. */
/* Solo la hamburguesa anima al abrir/cerrar. El logo no tiene transición: se queda fijo, es el contenedor el que se mueve. */
/* Pantalla completa con panel abierto: hamburguesa se desplaza justo el ancho del panel; logo compensa con translate para no salirse. */

/* Con “desplazar contenido” (push-wrapper): la barra va con el wrapper para que se desplace lo mismo que el contenido. */
/* Con push, la barra es absolute; el contenido que sigue a #header debe tener margen para no quedar bajo la barra. */
/* Alineación izquierda/derecha:
   OJO: estas reglas se deben aplicar SOLO en desktop (is-expanded-menu).
   En móvil dejamos el layout base de Canvas para evitar desalinear hamburguesa/logo. */
/* Misma barra que overlay: logo a la derecha, trigger y menú a la izquierda. */
body.is-expanded-menu #header .header-row.header-alignment-menu-left #logo {
  order: 4;
  margin-left: auto;
  margin-right: 0;
}
/* En modo "logo derecha": queremos el buscador a la izquierda de los botones del menú. */
body.is-expanded-menu #header .header-row.header-alignment-menu-left .primary-menu-trigger {
  order: 1;
}
body.is-expanded-menu #header .header-row.header-alignment-menu-left .header-misc {
  order: 2;
  margin-left: 0;
}
body.is-expanded-menu #header .header-row.header-alignment-menu-left .primary-menu {
  order: 3;
}
/* Alineación derecha: logo a la izquierda, ítems/hamburguesa/menú a la derecha (modo ítems y overlay). */
body.is-expanded-menu #header .header-row.header-alignment-menu-right #logo {
  order: 1;
  /* En Canvas, `#logo` lleva `margin-right:auto` para empujar el resto a la derecha. */
  margin-right: auto;
  margin-left: 0;
}
body.is-expanded-menu #header .header-row.header-alignment-menu-right .primary-menu {
  order: 2;
}
/* En modo "logo izquierda": el buscador debe quedar agrupado con el bloque del menú (después del nav). */
body.is-expanded-menu #header .header-row.header-alignment-menu-right .header-misc {
  order: 3;
  margin-left: 0;
}
body.is-expanded-menu #header .header-row.header-alignment-menu-right .primary-menu-trigger {
  order: 4;
}
/* En desktop, `#logo` ya empuja el resto a la derecha (margin-right:auto en Canvas).
   Evitamos múltiples `margin-left:auto` que pueden “centrar” elementos sueltos como el buscador. */
/* (margin-left ya gestionado arriba por alignment) */

/* Móvil: respetar alineación logo/trigger/misc sin apilar.
   En móvil el `.primary-menu` ocupa 100% (flex-basis) y salta de línea: lo forzamos a ir siempre en 2ª fila (order:4)
   para que el logo/trigger/header-misc queden alineados en la 1ª fila. */
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-left .primary-menu,
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-right .primary-menu {
  order: 4;
}

/* Logo a la derecha (menú/trigger a la izquierda).
   Queremos que el buscador quede junto a la hamburguesa (no “flotando” en medio). */
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-left .primary-menu-trigger {
  order: 1;
}
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-left .header-misc {
  order: 2;
  margin-left: 0; /* En este layout el misc no va “separado del logo” */
}
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-left #logo {
  order: 3;
  margin-left: auto;
  margin-right: 0;
}

/* Logo a la izquierda (trigger a la derecha).
   Empujamos el grupo “trigger + misc” a la derecha con un único auto-margin. */
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-right #logo {
  order: 1;
  margin-right: auto;
  margin-left: 0;
}
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-right .primary-menu-trigger {
  order: 2;
  margin-left: auto;
}
body:not(.is-expanded-menu) #header .header-row.header-alignment-menu-right .header-misc {
  order: 3;
  margin-left: 0;
}
/* --- Fin 4) Alineación. Top-bar transparente (floating). --- */

/* panel-fixed (Canvas side-header): asegurar que el top bar sea visible.
   En side-header, el panel (#header) tiene z-index > 0 y puede “tapar” el #top-bar. */
body.side-header #top-bar {
  z-index: 1;
}

/* Canvas (header-floating-with-topbar.html):
   Con header flotante, al hacer scroll #header-wrap pasa a position:fixed (z-index 299) y puede tapar el top bar.
   Mantener el top bar por encima (z-index 399) sin depender de flags del body. */

/* Con menú en modo flotante, el top bar siempre es transparente.
   El modo claro/oscuro (.dark) se sigue aplicando para los elementos del interior (enlaces, iconos). */
body.has-floating-header #top-bar {
  background: transparent !important;
  border-bottom: 0;
  z-index: var(--sauri-z-topbar);
  /* En modo flotante el topbar se fuerza a transparente (sin translúcido ni blur),
     aunque venga `--cnvs-topbar-backdrop-filter` definido inline. */
  --cnvs-topbar-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Barra de menú solo transparente (sin semi-transparent ni semi-transparent-blur), modo oscuro + hamburguesa */
#header.transparent-header.dark:not(.semi-transparent):not(.semi-transparent-blur) * {
  text-shadow: var(--cnvs-contrast-shadow-x) var(--cnvs-contrast-shadow-y) var(--cnvs-contrast-shadow-blur-1) rgba(0, 0, 0, 0.95), var(--cnvs-contrast-shadow-x2) var(--cnvs-contrast-shadow-y2) var(--cnvs-contrast-shadow-blur-2) rgba(0, 0, 0, 0.8);
}
#header.transparent-header.dark:not(.semi-transparent):not(.semi-transparent-blur) img,
#header.transparent-header.dark:not(.semi-transparent):not(.semi-transparent-blur) #logo [class^="logo-"],
#header.transparent-header.dark:not(.semi-transparent):not(.semi-transparent-blur) .cnvs-hamburger {
  filter: drop-shadow(var(--cnvs-contrast-shadow-x) var(--cnvs-contrast-shadow-y) var(--cnvs-contrast-shadow-blur-1) rgba(0, 0, 0, 0.95)) drop-shadow(var(--cnvs-contrast-shadow-x2) var(--cnvs-contrast-shadow-y2) var(--cnvs-contrast-shadow-blur-2) rgba(0, 0, 0, 0.8));
}
#header.transparent-header:not(.dark):not(.semi-transparent):not(.semi-transparent-blur) * {
  text-shadow: var(--cnvs-contrast-shadow-x) var(--cnvs-contrast-shadow-y) var(--cnvs-contrast-shadow-blur-1) rgba(255, 255, 255, 0.95), var(--cnvs-contrast-shadow-x2) var(--cnvs-contrast-shadow-y2) var(--cnvs-contrast-shadow-blur-2) rgba(255, 255, 255, 0.8);
}
#header.transparent-header:not(.dark):not(.semi-transparent):not(.semi-transparent-blur) img,
#header.transparent-header:not(.dark):not(.semi-transparent):not(.semi-transparent-blur) #logo [class^="logo-"],
#header.transparent-header:not(.dark):not(.semi-transparent):not(.semi-transparent-blur) .cnvs-hamburger {
  filter: drop-shadow(var(--cnvs-contrast-shadow-x) var(--cnvs-contrast-shadow-y) var(--cnvs-contrast-shadow-blur-1) rgba(255, 255, 255, 0.95)) drop-shadow(var(--cnvs-contrast-shadow-x2) var(--cnvs-contrast-shadow-y2) var(--cnvs-contrast-shadow-blur-2) rgba(255, 255, 255, 0.8));
}


.dark #top-social li a,
.dark .top-links li > a {
  color: #fff;
}
.dark .top-links li:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.dark #top-social li {
  border-left: 0;
}

/* Fullscreen overlay: el overlay debe cubrir el topbar (también en floating-header). */
body.overlay-menu.primary-menu-open #top-bar {
  z-index: 0 !important;
}

/* ========================================================================
  Presets del proyecto
  - Si se crean presets tipo `.header-sauri-*`, mantenerlos agrupados aquí.
 ======================================================================== */