.elementor-1360 .elementor-element.elementor-element-390d0ffa{--display:flex;--min-height:543px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1360 .elementor-element.elementor-element-390d0ffa:not(.elementor-motion-effects-element-type-background), .elementor-1360 .elementor-element.elementor-element-390d0ffa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://grupogzl.com/wp-content/uploads/2025/12/Banner-Noches-doradas.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1360 .elementor-element.elementor-element-60341dcc{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1360 .elementor-element.elementor-element-5e371cee .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:70px;font-weight:600;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1360 .elementor-element.elementor-element-389cfd6{font-family:"Roboto", Sans-serif;font-size:25px;font-weight:400;font-style:italic;color:#FFFAFA;}.elementor-1360 .elementor-element.elementor-element-12791e76{--display:flex;}.elementor-1360 .elementor-element.elementor-element-01287e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1360 .elementor-element.elementor-element-56f5fc4.elementor-element{--align-self:flex-end;}.elementor-1360 .elementor-element.elementor-element-28fde4b.elementor-element{--align-self:flex-end;}.elementor-1360 .elementor-element.elementor-element-d09b2fc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1360 .elementor-element.elementor-element-d09b2fc:not(.elementor-motion-effects-element-type-background), .elementor-1360 .elementor-element.elementor-element-d09b2fc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F9F9;}.elementor-1360 .elementor-element.elementor-element-1a05c1f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1360 .elementor-element.elementor-element-1a05c1f:not(.elementor-motion-effects-element-type-background), .elementor-1360 .elementor-element.elementor-element-1a05c1f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1360 .elementor-element.elementor-element-bfe858e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1360 .elementor-element.elementor-element-c80b039{--grid-columns:3;}.elementor-1360 .elementor-element.elementor-element-c80b039 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-1360 .elementor-element.elementor-element-c80b039 .e-loop-item > .elementor-section, .elementor-1360 .elementor-element.elementor-element-c80b039 .e-loop-item > .elementor-section > .elementor-container, .elementor-1360 .elementor-element.elementor-element-c80b039 .e-loop-item > .e-con, .elementor-1360 .elementor-element.elementor-element-c80b039 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-1360 .elementor-element.elementor-element-c80b039 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1360 .elementor-element.elementor-element-c80b039 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1360 .elementor-element.elementor-element-c80b039 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1360 .elementor-element.elementor-element-c80b039 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1360 .elementor-element.elementor-element-c80b039 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1360 .elementor-element.elementor-element-c80b039{--grid-columns:2;}}@media(max-width:767px){.elementor-1360 .elementor-element.elementor-element-390d0ffa:not(.elementor-motion-effects-element-type-background), .elementor-1360 .elementor-element.elementor-element-390d0ffa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://grupogzl.com/wp-content/uploads/2025/12/Banner-Movil-Zeta-X-4.png");background-position:top center;}.elementor-1360 .elementor-element.elementor-element-60341dcc{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1360 .elementor-element.elementor-element-5e371cee{text-align:center;}.elementor-1360 .elementor-element.elementor-element-5e371cee .elementor-heading-title{font-size:45px;}.elementor-1360 .elementor-element.elementor-element-389cfd6{text-align:center;font-size:20px;}.elementor-1360 .elementor-element.elementor-element-01287e7{--justify-content:center;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-1360 .elementor-element.elementor-element-28fde4b{width:initial;max-width:initial;}.elementor-1360 .elementor-element.elementor-element-c80b039{--grid-columns:1;}}@media(min-width:768px){.elementor-1360 .elementor-element.elementor-element-1a05c1f{--width:20%;}.elementor-1360 .elementor-element.elementor-element-bfe858e{--width:80%;}}/* Start custom CSS for html, class: .elementor-element-56f5fc4 *//* =========================================
   REGLAS DE VISIBILIDAD CORREGIDAS
   ========================================= */

/* ESTILOS BASE PARA LA REJILLA */
.mi-rejilla-dinamica .elementor-loop-container {
    display: grid;
    gap: 20px;
    transition: grid-template-columns 0.3s ease;
}

/* MÓVIL (hasta 767px) */
@media (max-width: 767px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-56f5fc4-columnas .solo-desktop  {
        display: none !important;
    }
    
    .mi-.elementor-1360 .elementor-element.elementor-element-56f5fc4-columnas .mi-btn-columna[title="3 Columnas"] {
        display: none !important;
    }
    
    /* Por defecto en móvil, 1 columna */
    .mi-rejilla-dinamica .elementor-loop-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* Solo si explícitamente se selecciona 2 columnas en móvil */
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ESCRITORIO (768px en adelante) */
@media (min-width: 768px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-56f5fc4-columnas .solo-movil {
        display: none !important;
    }

    /* Valores por defecto para escritorio */
    .mi-rejilla-dinamica .elementor-loop-container {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas por defecto */
    }
    
    /* Overrides para otras opciones */
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-4 .elementor-loop-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
.mi-.elementor-1360 .elementor-element.elementor-element-56f5fc4-columnas {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* Alineado a la derecha */
    gap: 15px;
    margin-bottom: 20px;
}

/* --- 2. BOTONES INDIVIDUALES --- */
.mi-btn-columna {
    /* Quitamos el !important de aquí para que se deje ocultar */
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #b0b0b0; /* Color inactivo */
    transition: all 0.3s ease;
}

/* --- 3. ESTILO DE LOS ICONOS SVG --- */
.mi-btn-columna svg {
    width: 26px; /* Ajuste para que se vean bien todos */
    height: 18px;
    display: block;
}

/* Botón de 4 columnas un poco más ancho */
.mi-btn-columna[title="4 Columnas"] svg {
    width: 35px;
}

/* --- 4. ESTADOS (HOVER Y ACTIVO) --- */
.mi-btn-columna:hover,
.mi-btn-columna.activo {
    color: #222222; /* Negro activo */
    transform: scale(1.1);
}

/* =========================================
   REGLAS DE VISIBILIDAD (AQUÍ ESTÁ LA SOLUCIÓN)
   ========================================= */

/* EN MÓVIL (Menos de 768px): Ocultar los botones de escritorio */
@media (max-width: 767px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-56f5fc4-columnas .solo-desktop {
        display: none !important;
    }
    
    /* Lógica de la rejilla en Móvil */
    .mi-rejilla-dinamica.cols-1 .elementor-loop-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* EN PC/TABLET (Más de 768px): Ocultar el botón de 1 columna */
@media (min-width: 768px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-56f5fc4-columnas .solo-movil {
        display: none !important;
    }

    /* Lógica de la rejilla en PC */
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-3 .elementor-loop-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-4 .elementor-loop-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-28fde4b *//* =========================================
   REGLAS DE VISIBILIDAD CORREGIDAS
   ========================================= */

/* ESTILOS BASE PARA LA REJILLA */
.mi-rejilla-dinamica .elementor-loop-container {
    display: grid;
    gap: 20px;
    transition: grid-template-columns 0.3s ease;
}

/* MÓVIL (hasta 767px) */
@media (max-width: 767px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-28fde4b-columnas .solo-desktop  {
        display: none !important;
    }
    
    .mi-.elementor-1360 .elementor-element.elementor-element-28fde4b-columnas .mi-btn-columna[title="3 Columnas"] {
        display: none !important;
    }
    
    /* Por defecto en móvil, 1 columna */
    .mi-rejilla-dinamica .elementor-loop-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* Solo si explícitamente se selecciona 2 columnas en móvil */
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ESCRITORIO (768px en adelante) */
@media (min-width: 768px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-28fde4b-columnas .solo-movil {
        display: none !important;
    }

    /* Valores por defecto para escritorio */
    .mi-rejilla-dinamica .elementor-loop-container {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas por defecto */
    }
    
    /* Overrides para otras opciones */
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-4 .elementor-loop-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
.mi-.elementor-1360 .elementor-element.elementor-element-28fde4b-columnas {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* Alineado a la derecha */
    gap: 15px;
    margin-bottom: 20px;
}

/* --- 2. BOTONES INDIVIDUALES --- */
.mi-btn-columna {
    /* Quitamos el !important de aquí para que se deje ocultar */
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #b0b0b0; /* Color inactivo */
    transition: all 0.3s ease;
}

/* --- 3. ESTILO DE LOS ICONOS SVG --- */
.mi-btn-columna svg {
    width: 26px; /* Ajuste para que se vean bien todos */
    height: 18px;
    display: block;
}

/* Botón de 4 columnas un poco más ancho */
.mi-btn-columna[title="4 Columnas"] svg {
    width: 35px;
}

/* --- 4. ESTADOS (HOVER Y ACTIVO) --- */
.mi-btn-columna:hover,
.mi-btn-columna.activo {
    color: #222222; /* Negro activo */
    transform: scale(1.1);
}

/* =========================================
   REGLAS DE VISIBILIDAD (AQUÍ ESTÁ LA SOLUCIÓN)
   ========================================= */

/* EN MÓVIL (Menos de 768px): Ocultar los botones de escritorio */
@media (max-width: 767px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-28fde4b-columnas .solo-desktop {
        display: none !important;
    }
    
    /* Lógica de la rejilla en Móvil */
    .mi-rejilla-dinamica.cols-1 .elementor-loop-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* EN PC/TABLET (Más de 768px): Ocultar el botón de 1 columna */
@media (min-width: 768px) {
    .mi-.elementor-1360 .elementor-element.elementor-element-28fde4b-columnas .solo-movil {
        display: none !important;
    }

    /* Lógica de la rejilla en PC */
    .mi-rejilla-dinamica.cols-2 .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-3 .elementor-loop-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .mi-rejilla-dinamica.cols-4 .elementor-loop-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ac24e26 *//* =========================================
   SOLUCIÓN DEFINITIVA OFF-CANVAS
   ========================================= */

/* 1. OCULTAR EL BOTÓN NATIVO DE YITH (EL QUE ABRE LA OTRA VENTANA) */
.yith-wcan-mobile-opener, 
.yith-wcan-filters-opener {
    display: none !important;
}

/* 2. ESTILO DE NUESTRO BOTÓN DORADO (#mi-boton-dorado) */
#mi-boton-dorado {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99990;
    
    background-color: #BF843F; /* DORADO */
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(191, 132, 63, 0.4);
    
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

#mi-boton-dorado:active {
    transform: translateX(-50%) scale(0.95);
}

/* Solo visible en móvil */
@media (min-width: 769px) {
    #mi-boton-dorado, #mi-overlay, #mi-btn-cerrar { display: none !important; }
}

/* 3. EL PANEL LATERAL (EL WIDGET DE FILTROS) */
@media (max-width: 768px) {
    
    /* Forzamos que el widget sea el panel */
    .elementor-widget-yith_wcan_filters {
        position: fixed !important;
        top: 0 !important;
        left: -110% !important; /* Escondido a la izquierda */
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 99999 !important;
        padding: 50px 20px 20px 20px !important; /* Espacio arriba para la X */
        overflow-y: auto !important;
        transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        
        /* Aseguramos que se vea el contenido */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* CLASE QUE ABRE EL PANEL */
    .elementor-widget-yith_wcan_filters.panel-abierto {
        left: 0 !important; /* Entra en pantalla */
    }
}

/* 4. OVERLAY (FONDO OSCURO) */
#mi-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6);
    z-index: 99995;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
}
#mi-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* 5. BOTÓN CERRAR (LA X) */
#mi-btn-cerrar {
    display: none; /* Oculto hasta que entre en el panel */
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    line-height: 1;
    z-index: 100000;
}

/* Mostrar la X solo cuando está dentro del widget */
.elementor-widget-yith_wcan_filters #mi-btn-cerrar {
    display: block !important;
}/* End custom CSS */
/* Start custom CSS for yith_wcan_filters, class: .elementor-element-1bb895d *//* 1. TRADUCCIÓN: Ocultar el texto en inglés */
.filter-content .show-more {
    font-size: 0 !important; /* Desaparece el texto "Show more" */
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
    background: transparent;
    border: none;
    margin-top: 10px;
    padding: 5px 0;
    width: 100%; /* Ocupa todo el ancho para ser fácil de clicar */
    text-align: center; /* Centrado */
}

/* 2. TEXTO NUEVO Y ESTILO: Crear el botón en español */
.filter-content .show-more::before {
    content: "+ Ver todas las opciones"; /* Aquí cambias el texto */
    font-size: 13px; /* Tamaño real del texto nuevo */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333; /* Color del texto (Gris oscuro) */
    
    /* ESTILO VISUAL DIFERENCIADOR */
    border-bottom: 1px dashed #999; /* Subrayado discontinuo (indica desplegable) */
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

/* 3. ESTILO HOVER (Al pasar el mouse) */
.filter-content .show-more:hover::before {
    color: #d4af37; /* Tu color dorado corporativo */
    border-bottom: 1px solid #d4af37; /* La línea se vuelve sólida y dorada */
    content: "▼ Desplegar opciones"; /* Opcional: Cambia el texto al pasar el mouse */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bfe858e *//* =========================================
   ESTILO DE PAGINACIÓN MODERN (CIRCULAR)
   ========================================= */

/* 1. El Contenedor (Centrado y Espaciado) */
.elementor-pagination {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;
    gap: 10px; /* Espacio entre los círculos */
    margin-top: 50px; /* Separación con los productos de arriba */
    padding-bottom: 20px;
}

/* 2. Los Números (Círculos Base) */
.elementor-pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;  /* Ancho fijo para círculo perfecto */
    height: 45px; /* Alto fijo */
    border-radius: 50%; /* Redondeado total */
    
    font-size: 16px;
    font-weight: 600; /* Un poco de negrita */
    color: white;   /* Color de texto gris oscuro */
    background-color: #F3AB53; /* Fondo transparente o #fff */
    border: 1px solid #e5e5e5; /* Borde muy sutil y elegante */
    
    text-decoration: none !important;
    transition: all 0.3s ease; /* Suavidad al cambio */
}

/* 3. Estado Hover (Al pasar el mouse) */
.elementor-pagination a.page-numbers:hover {
    background-color: #333333; /* Fondo negro */
    color: #ffffff;            /* Texto blanco */
    border-color: #333333;     /* Borde negro */
    transform: translateY(-3px); /* Pequeño efecto de elevación */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombra suave */
}

/* 4. Estado Activo (La página actual "1") */
.elementor-pagination .page-numbers.current {
    background-color: #333333; /* Fondo negro sólido */
    color: #ffffff;            /* Texto blanco */
    border-color: #333333;
    cursor: default;           /* Indica que ya estás aquí */
}

/* 5. (Opcional) Si usas flechas de "Siguiente" o "Anterior" */
/* Esto arregla si aparecen textos feos y los convierte en iconos si Elementor los carga */
.elementor-pagination .next,
.elementor-pagination .prev {
    font-size: 14px;
}/* End custom CSS */