.elementor-1508 .elementor-element.elementor-element-1427fe3{--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;}/* Start custom CSS for shortcode, class: .elementor-element-b8336a8 *//* Contenedor principal */
.categorias-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}

/* Contenedor del buscador con sticky */
.categorias-buscador-wrapper {
    position: sticky;
    top: 100px;
    align-self: flex-end;
    z-index: 100;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/* Cuando el buscador no debe ser sticky (buscar activo) */
.categorias-buscador-wrapper.no-sticky {
    position: static !important;
    top: auto !important;
    box-shadow: none;
}





/* Input con lupa a la derecha */
.categorias-buscador-wrapper input#buscador-categorias {
    width: 250px;
    padding: 8px 34px 8px 12px; /* espacio para la lupa a la derecha */
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #6293c3;
    color: #6293c3;
    background: url("data:image/svg+xml,%3Csvg fill='gray' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.471 6.471 0 001.48-5.34C15.09 5.02 12.07 2 8.5 2S1.91 5.02 1.91 8.39s3.02 6.39 6.59 6.39c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l4.99 4.99 1.49-1.49-4.99-4.99zM8.5 13c-2.5 0-4.5-2-4.5-4.5S6 4 8.5 4s4.5 2 4.5 4.5S11 13 8.5 13z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 16px 16px;
}

/* Grid responsivo */
.categorias-grid {
    display: grid;
    gap: 30px;
}

.columnas-4 {
    grid-template-columns: repeat(4, 1fr);
}
.columnas-3 {
    grid-template-columns: repeat(3, 1fr);
}
.columnas-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Breakpoints */
@media (max-width: 1024px) {
    .columnas-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .columnas-4,
    .columnas-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .columnas-4,
    .columnas-3,
    .columnas-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .categorias-buscador-wrapper {
        align-self: stretch;
        text-align: center;
    }

    .categorias-buscador-wrapper input#buscador-categorias {
        width: 100%;
        max-width: 250px;
    }
}

/* Tarjetas */
.categorias-grid .categoria-item {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    overflow: hidden;
}

.categorias-grid .categoria-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.categoria-img {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: 0 auto 15px;
    display: block;
}

.categoria-placeholder {
    width: 100%;
    height: 120px;
    background-color: #f0f0f0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 6px;
}

.categorias-grid .categoria-item h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #222;
}

.categorias-grid .categoria-item p {
    font-size: 14px;
    color: #666;
    margin: 0;
}/* End custom CSS */