/* ----------------------------------------------------------------
	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: "Soehne Schmal leicht";
    src: url("../../fonts/soehne-schmal/soehne-schmal-leicht-017694fd39a56d78eea8d89745012fcc.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    size-adjust: 150%; /* Ajuste del tamaño de la fuente para mejor visualización */
}

/* 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): 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;
}

/* Tektur (local, variable) */
@font-face {
    font-family: "Tektur";
    src: url("../../fonts/Tektur/Tektur-VariableFont_wdth,wght-260651736023aed1a8417418977470dc.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Dongle (local) */
@font-face {
    font-family: "Dongle";
    src: url("../../fonts/Dongle/Dongle-Light-e337e0497cef17ae95ab7c664eb8bd55.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Dongle";
    src: url("../../fonts/Dongle/Dongle-Regular-395894056bbf5f295c10e466a29c3558.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Dongle";
    src: url("../../fonts/Dongle/Dongle-Bold-4d7a4cd3e071eb88d923cb87b0184f9b.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* WDXL Lubrifont TC (local) */
@font-face {
    font-family: "WDXL Lubrifont TC";
    src: url("../../fonts/WDXL_Lubrifont_TC/WDXLLubrifontTC-Regular-fe78266d1867b23d10622f79cc7d5069.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Electrolize (local) */
@font-face {
    font-family: "Electrolize";
    src: url("../../fonts/Electrolize/Electrolize-Regular-845c08798d76c99f8cd745323b11fb3b.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Iceberg (local) */
@font-face {
    font-family: "Iceberg";
    src: url("../../fonts/Iceberg/Iceberg-Regular-0a0e3779b1e6ea664ec7d60a5d5e1b20.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Asimovian (local) */
@font-face {
    font-family: "Asimovian";
    src: url("../../fonts/Asimovian/Asimovian-Regular-67e26ccab592025e3ca60c7480f48569.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    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;
    /* Con panel lateral abierto, la cabecera y topbar deben quedar *encima* del .body-overlay (599)
       para no “apagarse” el cristal del logo; por debajo de #side-panel (699). */
    --sauri-z-header-above-overlay: 650;
    --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;
}

/* Un `.row` con gutter ampliado (`g-5`, `gutter-50`) tira de márgenes negativos
   —24px y 25px— que el `.container` solo compensa con sus 12px de padding. Por
   debajo de 576px el contenedor ocupa todo el ancho y no queda hueco lateral que
   los absorba, así que la fila se sale y abre scroll horizontal: 12px en los
   `g-5` de stats-media/specs-media, 13px en los `gutter-50` de las fichas de
   venta y proyecto. Lo que se sale es margen vacío —las columnas se lo devuelven
   con su propio padding, el texto cae donde debe—, así que recortarlo no quita
   nada de la página. Se recorta solo el eje X y con `clip`, no con `hidden`:
   `hidden` convertiría #content en contenedor de scroll y rompería el
   `position: sticky` de la columna de datos de las fichas. */
#content {
    overflow-x: clip;
}

/* 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);
}

/* Logo del footer: mostrar solo uno según tema (como en header/side-panel). */
#footer .logo-default {
    display: block;
}
#footer .logo-dark {
    display: none;
}
#footer.dark .logo-default,
.dark #footer .logo-default {
    display: none;
}
#footer.dark .logo-dark,
.dark #footer .logo-dark {
    display: block;
}

/* En variantes con logo centrado (text-center), el logo debe ser inline-block para que text-align: center lo centre. Solo .logo-default aquí: .logo-dark debe seguir en none en tema claro. */
#footer .text-center .logo-default {
    display: inline-block;
}
#footer.dark .text-center .logo-default,
.dark #footer .text-center .logo-default {
    display: none;
}
#footer.dark .text-center .logo-dark,
.dark #footer .text-center .logo-dark {
    display: inline-block;
}

.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;
}

/* Entre 992 y 1199px el menú horizontal ya está desplegado pero el `.container`
   del header solo mide 960px (936 de caja útil), y los siete ítems piden 967:
   se salía 31px del contenedor y por debajo de ~1014px llegaba a abrir scroll
   lateral.

   El padding no da margen: son 5px por lado (70px de los 967) y no se deja
   cambiar ni con !important. Los 886px restantes son texto puro, así que la
   única palanca es el cuerpo. Se recorta un 6% solo en esta franja: el menú
   pasa de 967 a 908 y entra con 28px de holgura. Se escala
   `--cnvs-primary-menu-font-size` en vez de fijar un px para no pisar el token
   `themePrimaryMenuFontSize` del panel: si ahí se cambia el cuerpo del menú,
   esta franja lo sigue. Desde 1200px el contenedor pasa a 1140 y sobra sitio. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .is-expanded-menu #header .menu-container > .menu-item > .menu-link {
        font-size: calc(var(--cnvs-primary-menu-font-size) * 0.94);
    }
}

/* ========================================================================
   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
   ======================================================================== */

/* Primer bloque con include-header: subirlo bajo header (+ topbar si la sección lleva .include-topbar).
   Canvas usa `#header + .include-header` (hermano directo); en base.html el siguiente hermano es `#content`
   y el Page Builder pone las clases en la `<section>` dentro de `#content`, así que el selector antiguo no aplicaba
   (ni en móvil sin .is-expanded-menu, ni con panel lateral abierto). */
#header:not(.floating-header) ~ #content > .pb-builder-module:first-child > section.include-header.include-topbar,
#header:not(.floating-header) ~ #content > section.include-header.include-topbar:first-child {
    margin-top: calc(-1 * (var(--cnvs-header-height) + var(--cnvs-topbar-height)) - 1px);
    display: block;
    width: 100%;
}

#header:not(.floating-header) ~ #content > .pb-builder-module:first-child > section.include-header:not(.include-topbar),
#header:not(.floating-header) ~ #content > section.include-header:first-child:not(.include-topbar) {
    margin-top: calc(-1 * var(--cnvs-header-height) - 1px);
    display: block;
    width: 100%;
}

.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);
}

/* Padding como Canvas: calc(var(--cnvs-content-padding) * 0.5) — definido en style.css; no sobreescribir aquí para que todas las variantes de footer lo hereden. */
#copyrights {
    background-color: var(--cnvs-copyrights-bg, var(--cnvs-contrast-300));
    font-size: var(--cnvs-copyrights-font-size);
    line-height: var(--cnvs-copyrights-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;
}

/* Mapa de fondo bajo datos de contacto (Canvas footer-2/3): centrado por defecto */
.widget_address {
    background: url("../../images/world-map-e17d0dfad26cb37ec3f55a51f8bf8ebd.png") no-repeat center center;
}

/* Canvas 2: mapa al 100% del contenedor */
#footer.footer-layout-canvas-2 .widget_address {
    background-size: 100%;
}

/* Canvas 3: mapa sin redimensionar, padding vertical como en el ejemplo */
#footer.footer-layout-canvas-3 .widget_address {
    background-size: auto;
    padding: 0.5rem 0;
}

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

#footer .footer-widgets-wrap {
    position: relative;
    padding: var(--cnvs-footer-widgets-padding, 2rem) 0 var(--cnvs-footer-widgets-padding, 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.
   z-index por encima de #content (2) para que no quede tapado por el contenido al hacer scroll. */
#top-bar {
    z-index: var(--sauri-z-topbar, 399);
    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.quill-content.css ===== */
/* =============================================================
   custom.quill-content.css
   Estilos de renderizado de contenido Quill para el frontal.
   Reemplaza la carga de quill.snow.css desde CDN.
   Solo incluye las reglas de .ql-editor (contenido), NO toolbar/tooltips.
   Fuente: quill.snow.css v1.3.6 (extracto)
   ============================================================= */

.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  outline: none;
  overflow-y: auto;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ql-editor > * {
  cursor: text;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}

.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}

.ql-editor ul > li::before {
  content: '\2022';
}

.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}

.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}

.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}

.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}

.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}

.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}

.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}

.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}

.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}

/* Ordered list counters (niveles 1-9) */
.ql-editor ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; }
.ql-editor ol li:before { content: counter(list-0, decimal) '. '; }
.ql-editor ol li.ql-indent-1 { counter-increment: list-1; counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.ql-editor ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; }
.ql-editor ol li.ql-indent-2 { counter-increment: list-2; counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.ql-editor ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; }

/* Indentaciones (1-8 niveles) */
.ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }

/* Alineación */
.ql-editor .ql-align-center { text-align: center; }
.ql-editor .ql-align-justify { text-align: justify; }
.ql-editor .ql-align-right { text-align: right; }

/* Tamaños de fuente Quill */
.ql-editor .ql-size-small { font-size: 0.75em; }
.ql-editor .ql-size-large { font-size: 1.5em; }
.ql-editor .ql-size-huge { font-size: 2.5em; }

/* Video embed */
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}

/* Blockquote */
.ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}

/* Code */
.ql-editor code,
.ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}

/* Clean spacing */
.ql-editor h1 { font-size: 2em; }
.ql-editor h2 { font-size: 1.5em; }
.ql-editor h3 { font-size: 1.17em; }
.ql-editor h4 { font-size: 1em; }
.ql-editor h5 { font-size: 0.83em; }
.ql-editor h6 { font-size: 0.67em; }

.ql-editor a { text-decoration: underline; }

.ql-editor img {
  max-width: 100%;
}


/* ===== 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;
}

/* Fuentes globales del proyecto (IDs alineados con ProyectConfService::fontFamilyById y canvas-fonts.constants) */
.ql-font-openSans {
    font-family: "Open Sans", sans-serif;
}
.ql-font-caveat {
    font-family: "Caveat", cursive;
}
.ql-font-montserrat {
    font-family: "Montserrat", sans-serif;
}
.ql-font-soehneSchmalLeicht {
    font-family: "Soehne Schmal leicht", sans-serif;
}
.ql-font-tektur {
    font-family: "Tektur", sans-serif;
}
.ql-font-dongle {
    font-family: "Dongle", sans-serif;
}
.ql-font-wdxlLubrifontTc {
    font-family: "WDXL Lubrifont TC", sans-serif;
}
.ql-font-electrolize {
    font-family: "Electrolize", sans-serif;
}
.ql-font-iceberg {
    font-family: "Iceberg", sans-serif;
}
.ql-font-asimovian {
    font-family: "Asimovian", sans-serif;
}



/* ===== 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;
}

/* Módulo a sangre (contenedor desactivado en el panel).

   Las flechas van fuera de la caja del carrusel (-38px) porque cuentan con el
   gutter del `.container`. Sin contenedor ese hueco no existe y las dos caen
   fuera de la pantalla: la izquierda queda inalcanzable y la derecha ensancha
   el documento, que es lo que abría el scroll lateral en Canyon y en la página
   de Porsche. Aquí se pegan al borde interior del módulo, sobre la primera y la
   última tarjeta. Se repite el estado :hover porque el de arriba las devolvería
   a -38px. */
.pb-modulo--sin-contenedor .owl-carousel .owl-nav [class*=owl-],
.pb-modulo--sin-contenedor .owl-carousel.owl-nav-hover-fixed .owl-nav [class*=owl-],
.pb-modulo--sin-contenedor .owl-carousel:hover .owl-nav [class*=owl-] {
	left: 0.75rem;
}

.pb-modulo--sin-contenedor .owl-carousel .owl-nav .owl-next,
.pb-modulo--sin-contenedor .owl-carousel.owl-nav-hover-fixed .owl-nav .owl-next,
.pb-modulo--sin-contenedor .owl-carousel:hover .owl-nav .owl-next {
	left: auto;
	right: 0.75rem;
}



/* ===== 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 tarjetas (por defecto col-mb-30 = 30px; aquí 50px).
   Sin atar al nº de columnas: desde que se controla desde el panel (Layout → Columnas en
   móvil/tablet/escritorio) la combinación de clases row-cols-* varía por módulo. */
.pb-gallery-5 .row[class*="row-cols-"] {
  --cnvs-col-mb: 50px;
}

/* Carrusel proyectos (Page Builder): todas las tarjetas con la misma proporción (4/3) e imagen recortada para rellenar.
   Especificidad alta para ganar al tema (.portfolio-item .portfolio-image img { height: auto }). */
.pb-proyectos-carousel .portfolio-item .portfolio-image {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  width: 100%;
}
.pb-proyectos-carousel .portfolio-item .portfolio-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.pb-proyectos-carousel .portfolio-item .portfolio-image > a img,
.pb-proyectos-carousel .portfolio-item .portfolio-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Modo slider: cada slide con la misma proporción */
.pb-proyectos-carousel .portfolio-item .portfolio-image .fslider {
  height: 100%;
}
.pb-proyectos-carousel .portfolio-item .portfolio-image .slide,
.pb-proyectos-carousel .portfolio-item .portfolio-image .slide a {
  display: block;
  height: 100%;
}
.pb-proyectos-carousel .portfolio-item .portfolio-image .slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Carrusel "Proyectos [marca]" al pie de la ficha de proyecto: misma proporción que pb-proyectos-carousel */
#related-portfolio .portfolio-item .portfolio-image {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  width: 100%;
}
#related-portfolio .portfolio-item .portfolio-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
#related-portfolio .portfolio-item .portfolio-image > a img,
#related-portfolio .portfolio-item .portfolio-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
#related-portfolio .portfolio-item .portfolio-image .fslider {
  height: 100%;
}
#related-portfolio .portfolio-item .portfolio-image .slide,
#related-portfolio .portfolio-item .portfolio-image .slide a {
  display: block;
  height: 100%;
}
#related-portfolio .portfolio-item .portfolio-image .slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 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 (Page Builder): la section lleva .h-auto y/o .min-vh-0 (altura responsive del módulo).
   Canvas en style.css fuerza .h-auto .swiper, .min-vh-0 .swiper → height:auto !important; position:relative
   y el .swiper deja de llenar .swiper_wrapper (antes position:absolute; height:100%) → slides sin altura, sin ver fondos. */
.pb-hero-1.slider-element.h-auto .swiper.swiper-parent,
.pb-hero-1.slider-element.min-vh-0 .swiper.swiper-parent {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  margin: 0;
}

@media (min-width: 992px) {
  /* Mismo origen Canvas: .min-vh-0 .swiper-wrapper { height: 75vh } fija 75vh aunque el módulo sea vh-md-50, etc. */
  .pb-hero-1.slider-element.h-auto .swiper-wrapper,
  .pb-hero-1.slider-element.min-vh-0 .swiper-wrapper {
    height: 100% !important;
  }
}

/* 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;
}

/* Slider: el tema usa .slider-caption h2 { line-height: 1 }. Modificador para interlineado 1.5 en título. */
.slider-caption.slider-caption--title-lh-15 h2,
.slider-caption.slider-caption--title-lh-15 .h2 {
  line-height: 1.5;
}


/* PB slider/hero en modo dark: el eyebrow (.before-heading) de Canvas es gris fijo (#6c757d)
   y desaparece sobre foto; en contexto dark hereda el esquema de contraste. */
.pb-slider.dark .slider-caption .before-heading,
.pb-hero-1.dark .before-heading {
  color: var(--cnvs-contrast-800);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* promo-with-images estilo "flat" (style.cardStyle = flat): sin sombra/borde/rounded;
   las cajas se separan con una línea fina del color de línea del tema. */
.pb-promo-with-images .col-12 + .col-12 .pb-promo-card--flat {
  border-top: 1px solid var(--cnvs-line-color, #eee);
  padding-top: 2.5rem;
}

/* hero-18: texto opcional bajo el título de cada mitad (va sobre foto con overlay oscuro) */
.pb-hero-18 .pb-hero-18-text {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Canyon — Convicciones (módulo 187): recortes con ratios distintos; unificar altura de tarjeta */
.pb-modulo-187 .pb-gallery-5 img.img-fluid {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

/* PB specs-table: tabla de ficha técnica fina */
.pb-specs-table .pb-specs-table-tabla td {
  padding: 0.8rem 0.25rem;
  font-size: 0.95rem;
}

/* Dato pendiente de cerrar: se marca en vez de dejar la fila fuera o poner una cifra inventada */
.pb-specs-table-tabla .pb-spec-pending {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border: 1px solid var(--cnvs-contrast-300);
  border-radius: 2rem;
  font-size: 0.8em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--cnvs-contrast-500);
  white-space: nowrap;
}

/* PB counters: cifras grandes con la tipografía de encabezado del tema */
.pb-counters .pb-counters-cifra {
  font-family: var(--cnvs-heading-font);
  font-weight: 200;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--cnvs-contrast-900);
}
@media (min-width: 768px) {
  .pb-counters .pb-counters-cifra { font-size: 3.4rem; }
}
.pb-counters .pb-counters-unidad { font-size: 0.5em; }
.pb-counters .pb-counters-etiqueta { font-size: 0.78rem; }
/* El .counter interno hereda la tipografía del wrapper de cifra */
.pb-counters .pb-counters-cifra .counter {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* PB ticker de marca: banda fina con texto grande en la tipografía de encabezado */
.pb-ticker {
  border-top: 1px solid var(--cnvs-line-color, #eee);
  border-bottom: 1px solid var(--cnvs-line-color, #eee);
  padding: 1.1rem 0;
  overflow: hidden;
}
.pb-ticker .pb-ticker-item {
  font-family: var(--cnvs-heading-font);
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cnvs-contrast-800);
}
@media (min-width: 768px) {
  .pb-ticker .pb-ticker-item { font-size: 2.8rem; }
}

/* Logo en caption del slider PB (captionImage): el título queda visually-hidden para SEO */
.pb-slider-caption-logo {
  max-width: min(440px, 72vw);
  height: auto;
  display: inline-block;
}

/* El caption es un flex en columna, así que el logo es un flex item y `text-align: center`
   no lo mueve: se queda pegado a la izquierda mientras el título y el texto sí se centran.
   El eje cruzado es el horizontal, de ahí align-self.
   Con captionAlign=right no hace falta regla: el tema solo empuja la caja entera
   (`margin-left:auto`) y el texto sigue alineado a la izquierda dentro de ella, que es
   justo donde ya cae el logo. */
.slider-caption.slider-caption-center > .pb-slider-caption-logo {
  align-self: center;
}

/* Logo sobre el título del formulario de contacto (formImage) */
.pb-contact-form-logo {
  max-width: 200px;
  height: auto;
  opacity: 0.92;
}

/* PB process-carousel: pasos de proceso en horizontal */
.pb-process-carousel .pb-process-carousel-img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}
.pb-process-carousel .pb-process-carousel-num {
  font-family: var(--cnvs-heading-font);
  font-weight: 200;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--cnvs-contrast-400);
}
.pb-process-carousel .pb-process-carousel-title {
  font-size: 1.5rem;
}
.pb-process-carousel .owl-nav [class*='owl-'] {
  margin-top: 1rem;
}

/* PB stats-media / specs-media: columna slider (swiper de Canvas, patrón hero-1) con caption superpuesto */
.pb-split-media-swiperbox {
  aspect-ratio: 4 / 5;
  min-height: 300px;
}
.pb-split-media-swiperbox .swiper-slide-bg {
  position: absolute;
  inset: 0;
}
.pb-split-media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.75rem 1.5rem 1.15rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  color: #fff;
}
.pb-split-media-caption .pb-split-media-title {
  color: #fff;
  font-size: 1.5rem;
}
.pb-split-media-caption .pb-split-media-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}
/* El contador de slide de Canvas se muestra al hover de .slider-element; replicar en la caja propia */
.pb-split-media-swiperbox:hover .slide-number {
  opacity: 1;
}


/* ===== 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;
}

/* Móvil, menú abierto (off-canvas / hamburguesa): el panel debe anclarse al **viewport** y con el mismo
   cristal que la barra. Tres reglas de Canvas crean contenedor de posicionamiento bajo .menu-container:
   - #header-wrap: `backdrop-filter` (semi-blur) y, con `sticky`, `-webkit-transform: translateZ(0)`.
   Con un ancestro así, `position: fixed` deja de ser respecto al viewport → el cajón “sube”/salta y el
   fondo calculado con `var(--cnvs-header-bg)` deja de coincidir. No depender de `.sticky-header`. */
/* Fondo del cajón abierto: fijo, sin atar a clases puntuales (transparent+semi) que el CMS puede omitir. */
body:not(.is-expanded-menu).primary-menu-open #header .mobile-menu-off-canvas .menu-container.d-block {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}
body:not(.is-expanded-menu).primary-menu-open #header.semi-transparent-blur .mobile-menu-off-canvas .menu-container.d-block,
body:not(.is-expanded-menu).primary-menu-open #header.transparent-header.semi-transparent-blur .mobile-menu-off-canvas .menu-container.d-block {
  -webkit-backdrop-filter: var(--sauri-blur-filter) !important;
  backdrop-filter: var(--sauri-blur-filter) !important;
}
/* mobileMenuMode=overlay (tema: position absolute + top calculado; salta con scroll y sticky). */
body:not(.is-expanded-menu).primary-menu-open #header .mobile-menu-overlay .menu-container.d-block {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(var(--cnvs-mobile-menu-off-canvas-width, 280px), 100vw) !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
  max-height: none !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: var(--sauri-z-mobile-offcanvas, 499) !important;
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body:not(.is-expanded-menu).primary-menu-open #header.semi-transparent-blur .mobile-menu-overlay .menu-container.d-block,
body:not(.is-expanded-menu).primary-menu-open #header.transparent-header.semi-transparent-blur .mobile-menu-overlay .menu-container.d-block {
  -webkit-backdrop-filter: var(--sauri-blur-filter) !important;
  backdrop-filter: var(--sauri-blur-filter) !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 usa `background-color: var(--cnvs-side-panel-bg)` (tema: --cnvs-contrast-100 si no
     hay estilo). Si en CMS el token overlay es sólido, PHP no inyecta `style` en #side-panel y al abrir
     el panel se ve opaco; la barra puede ser translúcida por otra vía. Por defecto, mismo cristal que el
     resto: rgba + blur (el `style` inline de PHP gana si define --cnvs-side-panel-*). */
#side-panel {
  --cnvs-side-panel-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6));
  background-color: var(--cnvs-side-panel-bg) !important;
  -webkit-backdrop-filter: var(--cnvs-side-panel-backdrop-filter, var(--sauri-blur-filter));
  backdrop-filter: var(--cnvs-side-panel-backdrop-filter, var(--sauri-blur-filter));
}

.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);
}

/* Móvil (sin .is-expanded-menu): el tema no define --cnvs-header-bg translúcido en #header; se queda
   en --cnvs-contrast-0 (sólido) hasta que se añade .sticky-header al hacer scroll. Eso coincide con
   “arriba con topbar = opaco” y “tras scroll = translúcido”. Alineamos con el modo desktop. */
body:not(.is-expanded-menu) #header.transparent-header.semi-transparent,
body:not(.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;
}
body:not(.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);
}
/* Header flotante: el fondo va en .container, no en #header-wrap (mismo criterio que is-expanded-menu). */
body:not(.is-expanded-menu) #header.transparent-header.floating-header.semi-transparent .container,
body:not(.is-expanded-menu) #header.transparent-header.floating-header.semi-transparent-blur .container {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}

/* 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.
   No aplica a panel lateral (#side-panel): si vaciamos el header, la franja superior (topbar+barra) se ve
   totalmente a través del héroe y choca con el aspecto del panel. */
body.overlay-menu.primary-menu-open:not(.side-panel-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:not(.side-panel-open) #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;
}

/* Móvil, menú hamburguesa abierto: anular blur/transform en #header-wrap **después** de las reglas
   sticky (arriba) con el mismo `!important`, para que el off-canvas vuelva a fijarse al viewport. */
body:not(.is-expanded-menu).primary-menu-open #header.sticky-header.semi-transparent-blur #header-wrap,
body:not(.is-expanded-menu).primary-menu-open #header.sticky-header.semi-transparent #header-wrap,
body:not(.is-expanded-menu).primary-menu-open #header.transparent-header.sticky-header:not(.semi-transparent):not(.semi-transparent-blur) #header-wrap,
body:not(.is-expanded-menu).primary-menu-open #header.transparent-header.semi-transparent-blur:not(.floating-header) #header-wrap,
body:not(.is-expanded-menu).primary-menu-open #header #header-wrap {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  will-change: auto !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;
}

/* Con el panel lateral abierto, alinear la franja superior (topbar) con el estilo de barra: mismo fondo
   que en reposo, no forzar el modo “flotante = topbar cristalino puro” encima del backdrop. */
body.nav-overlay-sidepanel.side-panel-open.has-floating-header #top-bar {
  background-color: var(--cnvs-topbar-bg) !important;
}

/* Misma lógica para #header-wrap / .container: con panel abierto la franja de la barra no debe
   quedar anulada por otras reglas (overlay) ni verse “vacía” frente al héroe. */
body.nav-overlay-sidepanel.side-panel-open #header.transparent-header.semi-transparent #header-wrap,
body.nav-overlay-sidepanel.side-panel-open #header.transparent-header.semi-transparent-blur:not(.floating-header) #header-wrap {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !important;
}
body.nav-overlay-sidepanel.side-panel-open #header.transparent-header.floating-header.semi-transparent .container,
body.nav-overlay-sidepanel.side-panel-open #header.transparent-header.floating-header.semi-transparent-blur .container {
  background-color: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-transparency-opacity, 0.6)) !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;
}

/* Topbar móvil: iconos RRSS/contacto detrás de un único botón (una fila con idiomas). */
@media (max-width: 767.98px) {
  #top-bar .top-bar-inner-row {
    flex-wrap: nowrap;
  }
  #top-bar .top-social-wrap {
    position: relative;
    z-index: 0;
  }
  #top-bar .top-social-wrap--collapsible.is-open {
    z-index: calc(var(--sauri-z-topbar, 399) + 6);
  }
  #top-bar .top-social-collapse-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--cnvs-topbar-social-icon-color, inherit);
    font-weight: bold;
    vertical-align: top;
  }
  #top-bar .top-social-collapse-trigger .ts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: var(--cnvs-topbar-height, 45px);
    line-height: 1;
    font-size: 0.875rem;
  }
  #top-bar .top-social-collapse-trigger:focus-visible {
    outline: 2px solid var(--cnvs-themecolor, #c96);
    outline-offset: 2px;
  }
  .dark #top-bar .top-social-collapse-trigger {
    color: #fff;
  }
  /* Móvil: desplegable RRSS con fondo sólido (sin cristal / sin blur de fondo). */
  #top-bar .top-social-wrap--collapsible #top-social {
    position: fixed;
    left: 0;
    right: auto;
    top: var(--cnvs-topbar-height, 45px);
    margin: 0;
    padding: 0.3rem 0.65rem 0.35rem 0.65rem;
    box-sizing: border-box;
    z-index: calc(var(--sauri-z-topbar, 399) + 5);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: min(20rem, 100vw);
    max-width: min(20rem, 100vw);
    max-height: min(60vh, 22rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background-color: rgb(var(--cnvs-invert-contrast-rgb)) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    text-align: left;
    align-items: flex-start;
  }
  .dark #top-bar .top-social-wrap--collapsible #top-social {
    background-color: var(--cnvs-contrast-bg) !important;
    border-right-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  }
  #top-bar .top-social-wrap--collapsible #top-social > li {
    border-left: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    align-self: stretch;
  }
  .dark #top-bar .top-social-wrap--collapsible #top-social > li {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  #top-bar .top-social-wrap--collapsible #top-social > li:first-child {
    border-top: 0 !important;
  }
  #top-bar .top-social-wrap--collapsible #top-social a {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 0.35rem;
  }
  /* Canvas pone flex-grow:1 en icono y texto: reparte el ancho y deja uno en cada extremo; aquí lo agrupamos a la izquierda. */
  #top-bar .top-social-wrap--collapsible #top-social li .ts-icon {
    flex-grow: 0;
    flex-basis: auto;
    flex-shrink: 0;
    text-align: left;
  }
  #top-bar .top-social-wrap--collapsible #top-social li .ts-text {
    flex-grow: 0;
    flex-basis: auto;
    max-width: none;
    padding-right: 0.5rem;
    text-align: left;
  }
  @media (prefers-reduced-motion: reduce) {
    #top-bar .top-social-wrap--collapsible #top-social {
      transition: none;
    }
  }
  #top-bar .top-social-wrap--collapsible.is-open #top-social {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  #top-bar .top-social-wrap--collapsible.is-open .top-social-collapse-trigger {
    color: var(--cnvs-themecolor, #c96);
  }
  .dark #top-bar .top-social-wrap--collapsible.is-open .top-social-collapse-trigger {
    color: var(--cnvs-themecolor, #c96);
  }
}
@media (min-width: 768px) {
  #top-bar .top-social-wrap--collapsible #top-social {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: visible !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
  }
  #top-bar .top-social-wrap--collapsible #top-social > li {
    border-top: 0 !important;
  }
  #top-bar .top-social-wrap--collapsible #top-social a {
    width: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  /* Restaurar flex del tema Canvas (icono+texto comparten crecimiento; icono centrado en su celda). */
  #top-bar .top-social-wrap--collapsible #top-social li .ts-icon,
  #top-bar .top-social-wrap--collapsible #top-social li .ts-text {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
  }
  #top-bar .top-social-wrap--collapsible #top-social li .ts-icon {
    text-align: center !important;
  }
}

/* Off-canvas: topbar al plano de la barra, debajo del cajón (499). */
body.primary-menu-open:not(.side-panel-open) #top-bar {
  z-index: var(--sauri-z-header-wrap, 299) !important;
}
/* Panel lateral: Canvas pone `.body-overlay` a z-index 599; #header/#header-wrap van a 299 → el velo
   tapa el logo y el blur parece “perderse” (franja a la izquierda del panel). Subir cabecera y topbar
   entre el overlay (599) y #side-panel (699). */
body.side-panel-open #header,
body.side-panel-open #top-bar {
  z-index: var(--sauri-z-header-above-overlay, 650) !important;
  position: relative;
}

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

/* Aviso cookies: el color de texto lo fija `header-fixes.js` (mismo criterio que los enlaces del menú). */
.gdpr-settings,
.gdpr-settings .lead {
  color: inherit;
}
.gdpr-settings a.gdpr-cookie-preflink {
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
}
.gdpr-settings a.gdpr-cookie-preflink:hover {
  opacity: 1;
}

/* #gdpr-preferences: tercer hijo del .toggle-header (Requerido / switch) a línea completa en móvil, sin chocar con el título. */
@media (max-width: 767.98px) {
  .gdpr-cookie-settings .toggle-header .gdpr-toggle-header-aside {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Móvil: el aviso de cookies crece con el contenido (tema: 60vh + scroll; aquí se evita). Desde 768px el tema ya usa max-height: none. */
@media (max-width: 767.98px) {
  .gdpr-settings {
    max-height: none !important;
    overflow: visible;
    overflow-y: visible;
  }
}



/* ===== SOURCE: custom.estado-vehiculo.css ===== */
/* ============================================================
   Estado del vehículo — Badge
   Valores: 1=Para restaurar, 2=Malo, 3=Bueno, 4=Excelente, 5=Concurso
   ============================================================ */

.estado-vehiculo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 0.5rem;
}

.estado-vehiculo-badge .ev-stars {
    display: inline-flex;
    gap: 0.15rem;
    font-size: 0.78rem;
}

.estado-vehiculo-badge .ev-stars .ev-star-on  { opacity: 1;    }
.estado-vehiculo-badge .ev-stars .ev-star-off { opacity: 0.22; }

/* Niveles — color sólido (ficha de detalle) */
.ev-restaurar  { background-color: #922b21; }
.ev-malo       { background-color: #7d3c1a; }
.ev-bueno      { background-color: #1a5276; }
.ev-excelente  { background-color: #1e6b3a; }
.ev-concurso   { background-color: #9a7110; }

/* Variante ficha de detalle — badge ancho completo */
.estado-vehiculo-badge.ev-detail {
    display: flex;
    width: 100%;
    font-size: 0.95rem;
    padding: 0.45rem 1rem;
    margin-bottom: 0.6rem;
}
.estado-vehiculo-badge.ev-detail .ev-stars {
    font-size: 0.88rem;
}

/* Texto descriptivo del estado */
.ev-desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0;
    font-style: italic;
}

/* Overlay sobre imagen en el listado — base */
.ev-overlay {
    position: absolute;
    top: 1.5rem;
    right: 0;
    left: auto;
    z-index: 5;
    margin-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Overlay lado izquierdo (imagen en columna derecha) */
.ev-overlay.ev-overlay-left {
    left: 0;
    right: auto;
}

.ev-overlay.ev-restaurar { background-color: rgba(146, 43,  33,  0.65); }
.ev-overlay.ev-malo      { background-color: rgba(125, 60,  26,  0.65); }
.ev-overlay.ev-bueno     { background-color: rgba(26,  82,  118, 0.65); }
.ev-overlay.ev-excelente { background-color: rgba(30,  107, 58,  0.65); }
.ev-overlay.ev-concurso  { background-color: rgba(154, 113, 16,  0.65); }

/* ============================================================
   Precio — variante bottom para listado PB
   ============================================================ */

/* Precio bottom — fondo blanco, texto oscuro */
.filter-p-pricing-bottom {
    position: absolute;
    bottom: 0;
    top: auto;
    z-index: 10;
    background: #fff;
    color: #1a1a1a;
    padding: 5px 14px;
    font-family: var(--cnvs-primary-font);
    font-size: 0.92rem;
}
/* Selector por clase (no por etiqueta): el precio ya no es <h1> para no
   generar múltiples <h1> en el listado (auditoría jun-2026). Replica el
   tamaño/peso/color/interlineado que el <h1> tomaba del tema Canvas. */
.filter-p-pricing-bottom .p-price-msrp {
    font-size: 0.92rem !important;
    font-weight: 600;
    line-height: var(--cnvs-line-height-base);
    /* Misma fuente que tenía el <h1> (el contenedor solo daba --cnvs-primary-font). */
    font-family: var(--sauri-h1-font, var(--cnvs-heading-font, var(--cnvs-primary-font)));
    color: #1a1a1a;
}

/* Derecha (imagen a la izquierda: precio bottom-left, bisél a la derecha) */
.filter-p-pricing-bottom.fp-left {
    left: 0;
    right: auto;
}
.filter-p-pricing-bottom.fp-left::before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    right: -8px;
    left: auto;
    height: 100%;
    width: 32px;
    background-color: #fff;
    transform: skew(23deg, 0deg);
    z-index: -1;
}

/* Izquierda (imagen a la derecha: precio bottom-right, bisél a la izquierda) */
.filter-p-pricing-bottom.fp-right {
    right: 0;
    left: auto;
}
.filter-p-pricing-bottom.fp-right::before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: -8px;
    height: 100%;
    width: 32px;
    background-color: #fff;
    transform: skew(-23deg, 0deg);
    z-index: -1;
}


/* ===== SOURCE: custom.canyon-ticker.css ===== */
/* =========================================================================
   Franja / ticker Canyon — skyline de mesas (tono arena claro)

   Se activa en el módulo `ticker` (misc) cuando props.tickerStyle == 'canyon-mesas'.
   Markup: templates/modulos_builder/types/misc/ticker.html.twig
   Silueta de mesas definida una vez (<g id="cyMesa">) y reutilizada con <use>.
   El desplazamiento es un translateX(-50%) sobre 16 unidades idénticas → sin costura.
   ========================================================================= */

.pb-ticker--silhouette { overflow: hidden; }

.cyband__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.cyband {
  --cyband-sand: #e9ddc6;   /* fondo arena claro */
  --cyband-mesa: #b4642f;   /* silueta terracota (primer plano) */
  --cyband-ridge: #d7a274;  /* cordillera de fondo (más clara, con aire) */
  --cyband-duration: 28s;

  position: relative;
  width: 100%;
  height: clamp(104px, 12vw, 150px);
  overflow: hidden;
  background: var(--cyband-sand);
}

.cyband__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: cyband-scroll var(--cyband-duration) linear infinite;
  will-change: transform;
}
.cyband__track.is-reverse { animation-direction: reverse; }
.cyband:hover .cyband__track { animation-play-state: paused; }

.cyband__unit {
  position: relative;
  flex: 0 0 640px;
  width: 640px;
  height: 100%;
}

.cyband__mesas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;   /* unidad = 640px → ratio 640:84 → 84px de alto */
  height: auto;
  display: block;
  z-index: 1;
}

.cyband__logo {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  height: 30%;
  width: auto;
  opacity: .9;
  z-index: 2;            /* el logo siempre por delante de las mesas */
  pointer-events: none;
  user-select: none;
}

@keyframes cyband-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .cyband__track { animation: none; }
}


/* ===== SOURCE: custom.pb-hero-9.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (PageBuilder · hero-9)

	La altura por módulo no llegaba al slider.

	`modulo.height` pasa por `module_height_md_only()`, que convierte `vh-60` en
	`h-auto vh-md-60`: el `h-auto` existe para que por debajo de 768px el bloque crezca con
	su contenido en vez de quedar clavado a una altura en vh.

	Pero Canvas trae esta regla, sin media query:

		.h-auto .swiper, .min-vh-0 .swiper { position: relative !important; height: auto !important; }

	Como la clase cae en la sección, alcanza al slider en TODOS los breakpoints: el `.swiper`
	perdía el posicionamiento absoluto, pasaba a `height:auto` y crecía con su contenido,
	desbordando la sección y saliendo recortado por el `overflow:hidden` del propio swiper.

	Se devuelve el comportamiento original a partir de md, que es justo donde la altura en vh
	sí aplica. Por debajo no se toca nada: ahí `h-auto` es lo que queremos.

	No se modifica `assets/styles/style.css` (Canvas es upstream, ver docs/POLICIES.md).
-----------------------------------------------------------------*/

@media (min-width: 768px) {
    .pb-hero-9.h-auto .swiper,
    .pb-hero-9.min-vh-0 .swiper {
        position: absolute !important;
        height: 100% !important;
    }

    /* La pista del swiper crecía con el contenido en vez de quedarse en el alto del slider,
       y de ahí para abajo lo arrastraba todo. */
    .pb-hero-9.h-auto .swiper > .swiper-wrapper,
    .pb-hero-9.min-vh-0 .swiper > .swiper-wrapper {
        height: 100% !important;
    }

    /* El slide es un item flex: con `min-height: auto` no baja de la altura de su contenido,
       así que arrastraba a la fila y a la columna de la imagen por encima del alto del slider
       y se recortaba por abajo. Con la cadena cerrada, la fila hereda el alto real disponible
       y la columna de texto (que cabe de sobra) se centra dentro. */
    .pb-hero-9.h-auto .swiper-slide,
    .pb-hero-9.min-vh-0 .swiper-slide {
        height: 100% !important;
        min-height: 0 !important;
    }

    .pb-hero-9.h-auto .swiper-slide > .row,
    .pb-hero-9.min-vh-0 .swiper-slide > .row {
        height: 100% !important;
    }
}


/* ===== SOURCE: custom.slider-legibilidad.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (legibilidad de los captions de slider)

	Dos problemas que afectan a todos los sliders del PageBuilder, no solo al de Canyon.

	1. TEXTO BLANCO SOBRE FOTO CLARA
	   Cuando la foto es clara —badlands ocres, un coche blanco— no hay opacidad de overlay
	   que lo arregle sin estropear la imagen: el overlay actúa sobre el brillo medio de la
	   foto, y lo que falla es el contraste local, el de la zona justa que hay detrás de las
	   letras. Subirlo apaga la foto entera y el título sigue sin despegarse.

	   Una sombra difusa ataca el contraste local y deja la foto intacta. En el hero de Canyon
	   permitió además BAJAR el overlay de 0.5 a 0.4 y que la imagen se viera mejor.

	2. EL HEADER TAPABA EL ARRANQUE DEL CAPTION EN MÓVIL
	   El primer módulo de la página se extiende por debajo del header (empieza en y=2; el
	   header ocupa hasta y=128). Como el caption se centra sobre el alto COMPLETO del slide,
	   su primera línea caía dentro de la franja del header y no se veía: no faltaba, estaba
	   detrás.

	   Esto solo le pasa al módulo que queda bajo el header, así que la regla se limita al
	   primer hijo de #content. Aplicarla a todos los sliders desplazaría sin motivo los que
	   van a media página.

	Generalizado el 2026-08-11 tras validarlo en el hero de Canyon (185).
-----------------------------------------------------------------*/

/* ---- 1. Contraste local del texto sobre foto ---- */

.pb-builder-module .slider-caption h1,
.pb-builder-module .slider-caption h2,
.pb-builder-module .slider-caption h3,
.pb-builder-module .slider-caption h4,
.pb-builder-module .slider-caption .before-heading,
.pb-builder-module .slider-caption p {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Un logotipo incrustado en el caption suele ser un PNG de trazo fino: sobre una carrocería
   clara el perfil se pierde. `drop-shadow` sigue la silueta real del trazo, no su caja. */
.pb-builder-module .slider-caption img {
    filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.6));
}

/* Mismo problema en las cajas promo con imagen de fondo (`promo-boxes`): texto claro sobre foto.
   Solo se aplica cuando la sección lleva `.dark`, que es la que indica que el texto va en claro;
   sobre fondo blanco con texto negro una sombra oscura dejaría un halo gris. */
.pb-builder-module .pb-promo-boxes.dark .pb-promo-boxes-inner h1,
.pb-builder-module .pb-promo-boxes.dark .pb-promo-boxes-inner h2,
.pb-builder-module .pb-promo-boxes.dark .pb-promo-boxes-inner h3,
.pb-builder-module .pb-promo-boxes.dark .pb-promo-boxes-inner h4,
.pb-builder-module .pb-promo-boxes.dark .pb-promo-boxes-inner p {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- 2. Caption por debajo del header, solo en el módulo que lo tiene encima ---- */

@media (max-width: 767.98px) {
    #content > .pb-builder-module:first-child .swiper-slide .container.position-absolute {
        padding-top: 7rem;
    }
}


/* ===== SOURCE: custom.pb-titulares.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (interlineado de titulares de display)

	Los titulares del PageBuilder no declaran `line-height`, así que heredan el 1.5 del cuerpo
	de texto. En una sola línea no se nota; en cuanto el titular ocupa dos, el hueco entre
	ellas es mayor que la propia altura de las mayúsculas y el título deja de leerse como una
	unidad. Medido en el manifiesto de Canyon: 108px de interlineado para 72px de fuente.

	Para un titular de display lo correcto es 0.95–1.1, y más aún con Söhne Schmal Leicht, que
	es condensada y ligera: cuanto más estrecha es la letra, más canta el exceso de aire.

	Aquí se usa **1.15** y no 1.05: con 1.05 la tilde de «MIRÓ» llegaba a tocar la «D» de
	«DAKAR» de la línea siguiente. El español lleva acentos en mayúscula y esta fuente los pone
	altos, así que el mínimo real es más alto que el de un titular en inglés.

	Es un defecto latente de todo el sitio —solo se ve donde el titular pasa de una línea—,
	pero de momento se acota al módulo afectado. La solución de fondo es un campo
	`typography.titleLineHeight` en el schema del PageBuilder, editable desde el panel; no se
	añade ahora para no chocar con la sesión que está tocando tabs-global.json y el panel.
-----------------------------------------------------------------*/

.pb-modulo-186 .pb-pb-title--block,
.pb-modulo-186 h2 {
    line-height: 1.15;
}


/* ===== SOURCE: custom.pb-anim.css ===== */
/* ----------------------------------------------------------------
	Animaciones de bloque del PageBuilder

	El motor es el nativo de Canvas (js/modules/animations.js): un
	IntersectionObserver que lee [data-animate] y añade las clases. Aquí NO hay
	motor: solo tres clases más para ese mismo motor y las salvaguardas.

	Catálogo cerrado y criterio de marca: _Brain_Sauri/brand/visual-conventions.md
	§ «Movimiento en la web». El porqué, en decisions/0009.
	El mapa valor→clase vive en templates/modulos_builder/partials/_pb_anim.html.twig.
-----------------------------------------------------------------*/

/* Canvas trae 1s. A esa duración el bloque se arrastra y deja de leerse como
   enérgico; y el motor ya suma 500 ms fijos antes de arrancar (animations.js).
   Escala las tres velocidades a la vez: faster .3s / normal .6s / slow 1.2s. */
:root {
  --cnvs-animate-duration: .6s;
}

/* --- Las tres clases propias -------------------------------------------- */

/* Los fundidos de Canvas desplazan un PORCENTAJE de la altura del elemento
   (fadeInUpSmall = 50%), así que el mismo efecto recorre 25 px en un título y
   200 px en una tarjeta alta. Este va en px fijos: igual en todos los bloques. */
.sauriFadeUp {
  animation-name: sauriFadeUp;
}

@keyframes sauriFadeUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* El zoomIn nativo arranca en scale(.3) — eso no es un zoom suave, es un efecto
   de presentación. 1.04 basta para que la imagen «asiente». */
.sauriZoomSoft {
  animation-name: sauriZoomSoft;
}

@keyframes sauriZoomSoft {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

/* Gesto de marca: el subrayado del menú (.menu-link::before, custom.header.css)
   traído al título de un bloque. El texto entra en fundido y el filete ámbar
   crece debajo, de izquierda a derecha, en los mismos .3s que el del menú. */
.sauriRule {
  animation-name: fadeIn;
}

.sauriRule::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: .75rem;
  background: var(--cnvs-themecolor);
}

/* El filete arranca cuando el título ya está: .2s de retardo sobre el fundido. */
.animated.sauriRule::after {
  animation: sauriRuleGrow .3s ease .2s forwards;
}

@keyframes sauriRuleGrow {
  to { width: 100%; }
}

/* El filete sigue la alineación del título: centrado y a la derecha no puede
   nacer pegado al borde izquierdo. */
.sauriRule.text-center::after { margin-left: auto; margin-right: auto; }
.sauriRule.text-end::after    { margin-left: auto; }

@media (min-width: 768px) {
  .sauriRule.text-md-center::after { margin-left: auto; margin-right: auto; }
  .sauriRule.text-md-end::after    { margin-left: auto; margin-right: 0; }
  .sauriRule.text-md-start::after  { margin-left: 0; margin-right: auto; }
}

@media (min-width: 992px) {
  .sauriRule.text-lg-center::after { margin-left: auto; margin-right: auto; }
  .sauriRule.text-lg-end::after    { margin-left: auto; margin-right: 0; }
  .sauriRule.text-lg-start::after  { margin-left: 0; margin-right: auto; }
}

/* --- Salvaguardas ------------------------------------------------------- */

/* Canvas deja [data-animate]:not(.animated) { opacity: 0 } (style.css) y quien
   revela el elemento es el JS. Si el JS no corre, el contenido NO SE VE. Antes
   esto lo cubría el early-return de pb-animate.js, que ya no existe: ahora el
   atributo lo emite Twig y siempre está en el HTML. Estas dos reglas son lo
   único que separa un fallo de JS de media página en blanco. */

@media (prefers-reduced-motion: reduce) {
  [data-animate]:not(.animated) { opacity: 1 !important; }
  /* El filete tampoco crece: aparece ya puesto. */
  .sauriRule::after { width: 100%; animation: none !important; }
}

html.no-js [data-animate] { opacity: 1 !important; }
html.no-js .sauriRule::after { width: 100%; }


/* ===== SOURCE: custom.pb-promo-card-link.css ===== */
/* ----------------------------------------------------------------
	Custom CSS (tarjeta promo enlazada)

	Cuando una caja de `promo-with-images` lleva enlace pero no texto de botón, el Twig envuelve
	la tarjeta entera en un `<a>`. Sin señal visual, nada indica que se puede pulsar: el cursor
	cambia, pero solo si ya estás encima.

	Un desplazamiento mínimo al pasar por encima basta para que se lea como pulsable, sin añadir
	texto donde el diseño no lo quiere.

	`prefers-reduced-motion` desactiva el movimiento: no es decorativo, es una señal, y quien
	pide menos animación sigue teniendo el cursor y el foco.
-----------------------------------------------------------------*/

.pb-promo-card-link {
    transition: transform 0.25s ease;
}

.pb-promo-card-link:hover,
.pb-promo-card-link:focus-visible {
    transform: translateY(-4px);
}

/* El foco por teclado tiene que verse: la tarjeta es ahora el elemento interactivo. */
.pb-promo-card-link:focus-visible {
    outline: 2px solid var(--cnvs-themecolor, #d19f00);
    outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-promo-card-link,
    .pb-promo-card-link:hover,
    .pb-promo-card-link:focus-visible {
        transition: none;
        transform: none;
    }
}


/* ===== SOURCE: custom.venta-iva.css ===== */
/* ================================================================
   custom.venta-iva.css — IVA label + specs columna única en ficha
   Incluido en el bundle via build-custom-css.ps1
   ================================================================ */

/* Canvas fuerza column-count:2 en viewport >= 576px — lo anulamos */
.block-portfolio-single-grid .portfolio-meta {
    column-count: 1 !important;
}

/* Etiqueta inline — no rompe el estilo Canvas de portfolio-meta */
.iva-label {
    display: inline !important;
    font-size: 0.65em;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.75;
}

.iva-label::before {
    content: ' — ';
}

/* En badge oscuro (listados con overlay) */
.iva-label--dark {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* En badge claro (listado PB bisél blanco) */
.iva-label--light {
    color: #333 !important;
}

/* En specs de la ficha (hereda el color Canvas) */
.iva-label--specs {
    color: inherit;
}


/* ===== SOURCE: custom.error-pages.css ===== */
/* ════════════════════════════════════════════════════════════
   Páginas de error (404, 500, etc.) — overrides sobre Canvas
   ════════════════════════════════════════════════════════════ */

/* --- Esquema claro (fondo blanco): número en gris muy suave --- */
.error404-wrap:not(.dark) .error404 {
    color: rgba(0, 0, 0, 0.06) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.error404-wrap:not(.dark) .heading-block h4,
.error404-wrap:not(.dark) .heading-block .h4 {
    color: var(--cnvs-heading-color, #333);
}

.error404-wrap:not(.dark) .heading-block span {
    color: var(--cnvs-body-color, #555);
}

/* --- Esquema oscuro (fondo imagen/color oscuro): número blanco translúcido --- */
.error404-wrap.dark .error404 {
    color: rgba(255, 255, 255, 0.15) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* --- Compensar margin-top negativo del include-header para que el
      contenido no se corte bajo el header fijo / transparente.
      El padding-top empuja el vertical-middle lo suficiente para
      que el número 404 y el texto queden visibles. --- */
.error404-wrap .slider-inner {
    padding-top: calc(var(--cnvs-header-height, 80px) + var(--cnvs-topbar-height, 40px) + 2rem);
}


/* ===== SOURCE: custom.lang-suggestion.css ===== */
/* ════════════════════════════════════════════════════════════
   Banner sugerencia de idioma — barra fija inferior
   ════════════════════════════════════════════════════════════ */

#lang-suggestion {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: var(--sauri-blur-filter, blur(20px) saturate(1.8));
    backdrop-filter: var(--sauri-blur-filter, blur(20px) saturate(1.8));
    color: var(--cnvs-heading-color, #333);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

#lang-suggestion.lang-suggestion--visible {
    transform: translateY(0);
}

#lang-suggestion.lang-suggestion--hiding {
    transform: translateY(100%);
}

.lang-suggestion-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lang-suggestion-text {
    flex: 0 1 auto;
}

.lang-suggestion-switch {
    background: var(--cnvs-themecolor, #d19f00);
    color: #fff;
    padding: 0.35rem 1rem;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.lang-suggestion-switch:hover {
    opacity: 0.85;
    color: #fff;
}

.lang-suggestion-dismiss {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--cnvs-body-color, #555);
    padding: 0.35rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8125rem;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}

.lang-suggestion-dismiss:hover {
    border-color: rgba(0, 0, 0, 0.4);
    color: var(--cnvs-heading-color, #333);
}