.elementor-5838 .elementor-element.elementor-element-8b3c1e4{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-5838 .elementor-element.elementor-element-8b3c1e4:not(.elementor-motion-effects-element-type-background), .elementor-5838 .elementor-element.elementor-element-8b3c1e4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9F9F9;}.elementor-5838 .elementor-element.elementor-element-4312ef1{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:110px;--padding-bottom:110px;--padding-left:0px;--padding-right:0px;}.elementor-5838 .elementor-element.elementor-element-4312ef1:not(.elementor-motion-effects-element-type-background), .elementor-5838 .elementor-element.elementor-element-4312ef1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9F9F9;}.elementor-5838 .elementor-element.elementor-element-401035e img{width:235px;height:95px;}.elementor-5838 .elementor-element.elementor-element-4aec3e6{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-5838 .elementor-element.elementor-element-4aec3e6 .elementor-heading-title{font-family:"Coolvetica", Sans-serif;font-size:64px;font-weight:400;color:var( --e-global-color-secondary );}.elementor-5838 .elementor-element.elementor-element-ece6f64{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-5838 .elementor-element.elementor-element-ece6f64 .elementor-heading-title{font-family:"Coolvetica", Sans-serif;font-size:64px;font-weight:400;color:var( --e-global-color-secondary );}.elementor-5838 .elementor-element.elementor-element-c8f1f07{margin:0% 25% calc(var(--kit-widget-spacing, 0px) + 0%) 25%;text-align:center;font-family:"Inter", Sans-serif;font-size:23px;font-weight:400;color:#535353;}.elementor-5838 .elementor-element.elementor-element-da11e73 .elementor-button{background-color:#02010100;font-family:"Inter", Sans-serif;font-size:18px;font-weight:600;text-decoration:underline;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-style:none;}.elementor-5838 .elementor-element.elementor-element-da11e73 .elementor-button:hover, .elementor-5838 .elementor-element.elementor-element-da11e73 .elementor-button:focus{color:var( --e-global-color-secondary );}.elementor-5838 .elementor-element.elementor-element-da11e73 .elementor-button:hover svg, .elementor-5838 .elementor-element.elementor-element-da11e73 .elementor-button:focus svg{fill:var( --e-global-color-secondary );}.elementor-5838 .elementor-element.elementor-element-dde7a83{--display:flex;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-5838 .elementor-element.elementor-element-dde7a83:not(.elementor-motion-effects-element-type-background), .elementor-5838 .elementor-element.elementor-element-dde7a83 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-5838 .elementor-element.elementor-element-d33352b{text-align:center;}.elementor-5838 .elementor-element.elementor-element-d33352b .elementor-heading-title{font-family:"Coolvetica", Sans-serif;font-size:36px;color:var( --e-global-color-secondary );}.elementor-5838 .elementor-element.elementor-element-dba1b11 .elementor-icon-wrapper{text-align:center;}.elementor-5838 .elementor-element.elementor-element-dba1b11 .elementor-icon{font-size:31px;}.elementor-5838 .elementor-element.elementor-element-dba1b11 .elementor-icon svg{height:31px;}.elementor-5838 .elementor-element.elementor-element-cc0ab66{--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:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-5838 .elementor-element.elementor-element-54a1d68{z-index:3;}.elementor-5838 .elementor-element.elementor-element-ac68f85{--grid-columns:4;width:var( --container-widget-width, 89% );max-width:89%;--container-widget-width:89%;--container-widget-flex-grow:0;z-index:3;}.elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-5838 .elementor-element.elementor-element-ac68f85 .e-loop-item > .elementor-section, .elementor-5838 .elementor-element.elementor-element-ac68f85 .e-loop-item > .elementor-section > .elementor-container, .elementor-5838 .elementor-element.elementor-element-ac68f85 .e-loop-item > .e-con, .elementor-5838 .elementor-element.elementor-element-ac68f85 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination{text-align:center;font-family:"Coolvetica", Sans-serif;font-weight:400;margin-top:30px;}.elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination .page-numbers:not(.dots){color:var( --e-global-color-secondary );}.elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination a.page-numbers:hover{color:var( --e-global-color-primary );}.elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination .page-numbers.current{color:var( --e-global-color-primary );}body:not(.rtl) .elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 16px/2 );}body:not(.rtl) .elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 16px/2 );}body.rtl .elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 16px/2 );}body.rtl .elementor-5838 .elementor-element.elementor-element-ac68f85 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 16px/2 );}@media(min-width:690px){.elementor-5838 .elementor-element.elementor-element-dde7a83{--content-width:60%;}.elementor-5838 .elementor-element.elementor-element-cc0ab66{--width:85%;}}@media(max-width:999px){.elementor-5838 .elementor-element.elementor-element-4312ef1{--padding-top:120px;--padding-bottom:340px;--padding-left:0px;--padding-right:0px;}.elementor-5838 .elementor-element.elementor-element-4aec3e6{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5838 .elementor-element.elementor-element-4aec3e6 .elementor-heading-title{font-size:40px;}.elementor-5838 .elementor-element.elementor-element-ece6f64{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5838 .elementor-element.elementor-element-ece6f64 .elementor-heading-title{font-size:40px;}.elementor-5838 .elementor-element.elementor-element-d33352b .elementor-heading-title{font-size:30px;}.elementor-5838 .elementor-element.elementor-element-ac68f85{--grid-columns:2;}}@media(max-width:689px){.elementor-5838 .elementor-element.elementor-element-4312ef1{--padding-top:110px;--padding-bottom:310px;--padding-left:0px;--padding-right:0px;}.elementor-5838 .elementor-element.elementor-element-4aec3e6{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5838 .elementor-element.elementor-element-ece6f64{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5838 .elementor-element.elementor-element-d33352b{text-align:center;}.elementor-5838 .elementor-element.elementor-element-ac68f85{--grid-columns:1;}}/* Start custom CSS for heading, class: .elementor-element-4aec3e6 *//* 1. Convertir la palabra en un "Ancla" */
.elementor-5838 .elementor-element.elementor-element-4aec3e6 .palabra-brillo {
    position: relative; /* Esto es vital: crea el punto de referencia */
    display: inline-block; /* Asegura que la palabra tenga cuerpo */
}

/* 2. Crear el brillo flotante pegado a ella */
.elementor-5838 .elementor-element.elementor-element-4aec3e6 .palabra-brillo::after {
    content: "";
    /* BORRA LO DE ABAJO Y PEGA TU URL ENTRE LAS COMILLAS */
    background-image: url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/12/brillo-de.svg'); 
    
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    
    /* TAMAÑO DEL BRILLO */
    width: 0.7em;  /* Ajusta según el tamaño de tu imagen */
    height: 0.7em;
    
    /* POSICIÓN EXACTA (Juega con estos números) */
    top: 0em;   /* Más negativo = Más arriba */
    right: -0.4em; /* Más negativo = Más a la derecha */
    
    pointer-events: none; /* Para que no estorbe si pasas el mouse */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-da11e73 */.elementor-5838 .elementor-element.elementor-element-da11e73 {
    overflow: visible !important;
    position: relative;
}

.elementor-5838 .elementor-element.elementor-element-da11e73::before {
    content: "";
    /* REEMPLAZA LO DE ABAJO CON TU ENLACE ENTRE LAS COMILLAS */
    background-image: url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/12/flecha-azul-ver-productos-x4.png');
    
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    
    /* TAMAÑO Y POSICIÓN */
    width: 283.91px;  /* Usa px al principio para asegurar que se vea */
    height: 152.69px;
    
    left: -400px;  /* Ajusta para mover izquierda/derecha */
    bottom: -135px; /* Ajusta para mover arriba/abajo */
    
    z-index: 1;
    pointer-events: none;
}

/* Ocultar la flecha en Tablet y Móvil (pantallas menores a 1024px) */
@media (max-width: 999px) {
    .elementor-5838 .elementor-element.elementor-element-da11e73::before {
        display: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for woofilters, class: .elementor-element-54a1d68 *//* 1. Títulos de las categorías del filtro (Selector más fuerte + Grosor 500) */
.wpfFilterWrapper .wpfFilterTitle,
.wpfFilterWrapper .wpfFilterTitle span,
.wpfFilterWrapper .wpfFilterTitle .wfpTitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    color: #000000 !important;
}

/* 2. Resto de los elementos (Opciones en Grosor 400) */
.wpfFilterWrapper label,
.wpfFilterWrapper .wpfValue,
.wpfFilterWrapper .wpfCheckbox,
.wpfFilterWrapper li {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400
    font-size: 16px !important;
    color: #002762 !important;
}

/* 3. Recuperar la negrita SOLO para la opción seleccionada */
.wpfFilterWrapper li:has(input:checked) label,
.wpfFilterWrapper li:has(input:checked) .wpfValue,
.wpfFilterWrapper input:checked + label,
.wpfFilterWrapper input:checked + label .wpfValue,
.wpfFilterWrapper input:checked ~ .wpfValue {
    font-weight: 700 !important;
}

/* 4. Línea divisoria debajo del título del filtro */
.wpfFilterWrapper .wpfFilterTitle {
    border-bottom: 1px solid #EAEAEA !important; /* El color y grosor de la línea */
    padding-bottom: 1px !important; /* Espacio entre el texto del título y la línea */
    margin-bottom: 10px !important; /* Espacio entre la línea y la primera opción de abajo */
    display: block !important; /* Asegura que la línea ocupe todo el ancho de la caja */
}

/* 5. División entre bloques de filtros */
.wpfFilterWrapper {
    border-bottom: 0px solid #EAEAEA !important; /* Línea gris muy suave */
    padding-bottom: 20px !important; /* Espacio interno antes de la línea */
    margin-bottom: 20px !important; /* Espacio externo después de la línea */
}

/* Quitar la línea en el último bloque para que quede limpio */
.wpfFilterWrapper:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* -----------------------------------------
   6. DISEÑO DEL SLIDER DE PRECIO
----------------------------------------- */

/* La pista base (el fondo gris claro) */
.wpfFilterWrapper .wpfPriceFilterRange.ui-slider {
    height: 6px !important;
    background: #EAEAEA !important; /* Gris muy suave */
    border: none !important;
    border-radius: 10px !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

/* La barra de progreso (El rango seleccionado) */
.wpfFilterWrapper .wpfPriceFilterRange .ui-slider-range {
    background: #BACE00 !important; /* Verde lima de tu marca */
    border-radius: 10px !important;
    height: 100% !important;
    top: 0 !important;
}

/* Los círculos arrastrables (Handles) */
.wpfFilterWrapper .wpfPriceFilterRange .ui-slider-handle {
    width: 22px !important;
    height: 22px !important;
    background: #FFFFFF !important;
    border: 3px solid #002762 !important; /* Azul oscuro de tu marca */
    border-radius: 50% !important;
    top: -8px !important; /* Centra el círculo verticalmente en la barra */
    cursor: grab !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Sombrita sutil */
    outline: none !important;
}

/* Efecto al hacer clic y arrastrar el círculo */
.wpfFilterWrapper .wpfPriceFilterRange .ui-slider-handle:active {
    cursor: grabbing !important;
    background: #BACE00 !important; /* Se pinta de verde por dentro al agarrarlo */
}

/* -----------------------------------------
   7. DISEÑO DE LOS NÚMEROS (Precios)
----------------------------------------- */

/* Centrar y estilizar el contenedor de los precios */
.wpfFilterWrapper .wpfPriceInputs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 15px !important;
    color: #002762 !important; /* Azul oscuro */
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Quitar el diseño de "caja de texto" a los inputs para que parezcan solo texto */
.wpfFilterWrapper .wpfPriceInputs input.wpfPriceRangeField {
    background: transparent !important;
    border: none !important;
    color: #002762 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important; /* Un poco más gordita la letra del número */
    text-align: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 75px !important; /* Espacio para números grandes */
}

/* Ocultar las flechitas feas que traen los inputs de número por defecto */
.wpfFilterWrapper .wpfPriceInputs input.wpfPriceRangeField::-webkit-outer-spin-button,
.wpfFilterWrapper .wpfPriceInputs input.wpfPriceRangeField::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ============================================================
   REDISENO PREMIUM DEL FILTRO (V2 - Micro-Ajustes)
   ============================================================ */

/* 1. CONTENEDOR PRINCIPAL: Reducimos espaciado vertical */
.wpfFilterContent ul li label.wpfLiLabel {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente */
    width: 100% !important;
    justify-content: space-between !important; /* Texto izq, flecha der */
    cursor: pointer !important;
    padding: 2px 5px !important; /* ¡AJUSTE! Reducimos el colchón de aire vertical */
    margin: 0 !important; /* ¡AJUSTE! Matamos márgenes antiguos */
    border: none !important;
}

/* Forzamos espaciado sutil entre los ítems de la lista */
.wpfFilterContent ul li {
    margin-bottom: 4px !important; /* ¡AJUSTE! Espacio controlado entre categorías */
    padding: 0 !important;
    border: none !important;
}

/* 2. OCULTAR EL SELECCIONADOR NATIVO */
.wpfLiLabel > span.wpfCheckbox { display: none !important; }

/* 3. CONTENEDOR DE TEXTO Y CANTIDAD */
.wpfLiLabel span.wpfDisplay {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important; /* Clave para el recorte */
    gap: 6px !important; /* Une cantidad con texto */
}

/* 4. RECORTE DE TEXTO CON PUNTOS SUSPENSIVOS */
.wpfLiLabel .wpfValue {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #002762 !important; /* Tu azul oscuro */
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Ajuste específico para el texto interno */
.wpfFilterTaxNameWrapper {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Estilo para la cantidad (ej. (20)) */
.wpfCount {
    color: #6c7275 !important; /* Gris suave */
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   5. AÑADIR LA FLECHA A LA DERECHA (Pseudo-elemento - AJUSTADO)
   ============================================================ */
.wpfFilterContent ul li label.wpfLiLabel::after {
    content: "›" !important; 
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #bed000 !important; /* Verde lima */
    margin-left: 10px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    
    /* ¡LA MAGIA PARA ALINEAR LA FLECHA! */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; /* Evita que el símbolo estire el renglón */
    height: 14px !important; /* Forzamos un alto similar al texto */
    transform: translateY(-2px) !important; /* ¡AJUSTE FINAL! Sube la flecha 2px para centrarla ópticamente */
}

/* EFECTO HOVER: Movimiento sutil + El texto se pone azul Divercell */
.wpfLiLabel:hover { color: #002762 !important; }
.wpfLiLabel:hover::after { transform: translateX(3px) translateY(-2px) !important; /* Mantenemos el ajuste vertical */ }

/* ============================================================
   SOLO ESTILIZACION DEL SELECTOR (BOTON)
   ============================================================ */

/* 1. Transformación del cuadro a Botón Premium */
.wpfFilterWrapper[data-filter-type="wpfSortBy"] select#wpfSortProducts {
    background-color: #ffffff !important;
    border: 1.5px solid #002762 !important; /* Azul corporativo */
    border-radius: 12px !important; /* Bordes redondeados elegantes */
    color: #002762 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 35px 8px 15px !important;
    width: 100% !important; /* Se ajusta al ancho del contenedor */
    max-width: 250px !important; /* Límite para que no se vea gigante */
    height: auto !important;
    cursor: pointer !important;
    
    /* ELIMINAR ESTILOS NATIVOS DEL SISTEMA */
    appearance: none !important;
    -webkit-appearance: none !important;
    
    /* ICONO DE FLECHA (Chevron azul) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23002762' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    transition: all 0.3s ease !important;
}

/* 2. Efecto de interacción */
.wpfFilterWrapper[data-filter-type="wpfSortBy"] select#wpfSortProducts:hover {
    border-color: #bed000 !important; /* Tu verde lima corporativo */
    background-color: #fcfcfc !important;
}

.wpfFilterWrapper[data-filter-type="wpfSortBy"] select#wpfSortProducts:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 39, 98, 0.1) !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Coolvetica';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/10/CoolveticaRg-Regular.eot');
	src: url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/10/CoolveticaRg-Regular.eot?#iefix') format('embedded-opentype'),
		url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/10/CoolveticaRg-Regular.woff2') format('woff2'),
		url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/10/CoolveticaRg-Regular.woff') format('woff'),
		url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/10/coolvetica-rg.ttf') format('truetype'),
		url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/10/CoolveticaRg-Regular.svg#Coolvetica') format('svg');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-display: auto;
	src: url('https://imaginacionypublicidad.divercellcol.com/wp-content/uploads/2025/11/Inter-VariableFont_opszwght.ttf') format('truetype');
}
/* End Custom Fonts CSS */